iview-admin 学习 04 列表展示、增删查改及模态框按钮修改
dict.vue<template><div class='table_view'><!-- 头部查询 开始 --><Card :bordered='false' class='margin_bottom'><div class='form_cx'><div class='...
·
dict.vue
<template>
<div class='table_view'>
<!-- 头部查询 开始 -->
<Card :bordered='false' class='margin_bottom'>
<div class='form_cx'>
<div class='form_cx_item_l'>
<div class='form_cx_item_block'>
<span class='form_cx_item_lable'>类型</span>
<div class='form_cx_item_input'>
<Input class='form_cx_item_input' v-model='formData.type' placeholder='请输入类型' />
</div>
</div>
</div>
<div class='form_cx_item_r'>
<Button type='primary' icon='ios-search' @click='chaxun'>{{this.GLOBAL.TEXT_SEARCH}}</Button>
<Button type='success' icon='md-add' @click="add" >{{this.GLOBAL.TEXT_ADD}}</Button>
</div>
</div>
</Card>
<!-- 头部查询 结束 -->
<Card :bordered='false' class='margin_bottom'>
<Table :loading='tableObj.loading' border :columns='columns7' :data='data6'>
<template slot-scope='{ row, index }' slot='action'>
<Button type='primary' class="button_right" size='small' @click='show(index,row)'>{{text_view}}</Button>
<Button type='primary' class="button_right" size='small' @click='edit(index,row)'>{{text_edit}}</Button>
<Button type='error' class="button_right" size='small' @click='remove(index,row)'>{{text_delete}}</Button>
</template>
</Table>
<!-- 分页 -->
<div style="margin: 10px;overflow: hidden">
<div>
<Page :total="tableObj.total" :current="tableObj.page" :page-size="tableObj.rows" show-sizer @on-change="changePage" ></Page>
</div>
</div>
</Card>
<!-- 弹窗 -->
<!--标题dailogTitle ;对象dataForm -->
<dictAdd v-model="addShow" v-on:getList="getList" :dailogTitle="dailogTitle" :dataForm="dataForm"></dictAdd>
</div>
</template>
<script>
import { getTableList,delInfo } from '@/api/dict';
import dictAdd from '@/view/standard/dict/dictAdd';
export default {
name: 'tableView',
components:{
dictAdd //新增
},
data () {
// 页面所有数据储存对象
return {
dailogTitle:'',
text_view : this.GLOBAL.TEXT_VIEW,
text_edit : this.GLOBAL.TEXT_EDIT,
text_delete : this.GLOBAL.TEXT_DELETE,
dataForm:{},
addShow : false,
// 查询数据
modelObj: {
modal1: false
},
formData: {},
tableObj: {
rows: 15, // 每页条数
page: 1, // 页码
total:10, // 总条数
loading: true
},
columns7: [
{
title: '类型',
key: 'type'
},
{
title: '标签名',
key: 'label'
},
{
title: '数据值',
key: 'value'
},
{
title: '描述',
key: 'description'
},
{
title: '操作',
slot: 'action',
// width: 150,
align: 'center'
}
],
data6: []
};
},
mounted () {
// 生命周期 页面加载完毕
this.getList(); // 获取表格数据
},
methods: {
// 所有事件绑定对象
getList () {
// 头部查询条件对象
let formData = this.formData||{}
formData.pageSize=this.tableObj.rows //条数
formData.currentPage=this.tableObj.page //页码
console.log("条数:"+this.tableObj.rows)
console.log("页码:"+this.tableObj.page)
//列表数据加载
getTableList(formData)
.then(res => {
// 获取的数据 设置到表格对应绑定的数组
this.data6 = res.data.records || []
// 设置加载状态
this.tableObj.loading = false
// 设置分页
this.tableObj.total=res.data.total;
})
.catch(err => {
this.tableObj.loading = false // 取消表格加载状态
})
},
add () {//新增
this.dataForm={};
this.addShow = true ;
this.dailogTitle = this.GLOBAL.TEXT_ADD;
},
chaxun () { // 查询事件
this.getList(); // 获取表格数据
},
show (index,row) {//查看
this.addShow = true ;
this.dailogTitle = this.GLOBAL.TEXT_VIEW;
this.dataForm = row;
},
edit(index,row){// 修改
this.$delete(row,'_index');
this.$delete(row,'_rowKey');
this.$delete(row,'createDate');
this.$delete(row,'updateDate');
this.dataForm=row;
this.addShow =true;
this.dailogTitle = this.GLOBAL.TEXT_EDIT;
},
remove (index, row) {
console.log(row.id)
this.$Modal.confirm({
title: this.GLOBAL.MSG_TITLE_TIPS,
content: '确定删除该数据?',
onOk: () => {
this.delData(row.id); //调用删除方法
},
onCancel: () => {
}
})
},
delData(id){ // 删除请求
delInfo(id)
.then(res =>{
let data = res.data;
if (data.success == true) {
this.$Message.success(data.msg);
this.getList()
} else {
this.$Message.error(data.msg);
}
})
.catch(err=>{
this.$Message.error(this.GLOBAL.MSG_FAILED_DEL);
})
},
isShowModel (name) {
this.modelObj[name] = !this.modelObj[name]
},
changePage (item) {// 页码变更 触发
console.log(item)
// 修改页码 重新加载表格
this.tableObj.page=item;
this.getList(); // 获取表格数据
}
}
}
</script>
<style lang='stylus'>
.table_view
.form_cx
display flex
.form_cx_item_l
display flex
flex 1
flex-wrap wrap
.form_cx_item_block
display flex
width 25%
margin 0 0 15px 0
padding 0 15px 0 0
box-sizing boder-box
.form_cx_item_lable
height 32px
line-height 32px
display inline-block
padding-right 15px
box-sizing border-box
.form_cx_item_input
flex 1
.ivu-date-picker
width 100%
.form_cx_item_r
display flex
button
height 32px
margin-right 10px
.margin_bottom
margin-bottom 15px
.button_right
margin-right 10px
</style>
dictAdd.vue
<template>
<Modal v-model="show" :title="dailogTitle" :loading="loading"
:mask-closable="false" width="800">
<Form ref="dictForm" :model="dataForm" :rules="dictFormRule" :label-width="100">
<Row>
<Col span="11">
<FormItem label="字典类型" prop="type">
<Input type="text" :maxlength=50 v-model="dataForm.type" placeholder="请输入字典类型"/>
</FormItem>
</Col>
<Col span="11">
<FormItem label="字典文本" prop="label">
<Input type="text" :maxlength=50 v-model="dataForm.label" placeholder="请输入字典文本"/>
</FormItem>
</Col>
</Row>
<Row>
<Col span="11">
<FormItem label="字典数值" prop="value">
<Input type="text" :maxlength=50 v-model="dataForm.value" placeholder="请输入字典数值"/>
</FormItem>
</Col>
<Col span="11">
<FormItem label="排序" prop="sort">
<Input type="number" :maxlength=50 v-model="dataForm.sort" placeholder="请输入字典序号"/>
</FormItem>
</Col>
</Row>
<Row>
<FormItem label="描述" prop="description">
<Input type="textarea" :autosize="{minRows: 3,maxRows: 5}" style="width: 90%"
:maxlength=200 show-word-limit v-model="dataForm.description" placeholder="请输入字典描述"/>
</FormItem>
</Row>
</Form>
<div slot="footer">
<!-- 按钮颜色
primary 蓝
dashed、 有边框白
text、 无边框白
info、 浅蓝
success、 绿
warning、 橘
error 红
-->
<span v-if="dailogTitle == dailogView">
<Button type="dashed" size="large" @click="closeModal()">{{this.GLOBAL.BTN_CLOSE}}</Button>
</span>
<span v-else>
<Button type="dashed" size="large" @click="closeModal()">{{this.GLOBAL.BTN_CANCEL}}</Button>
<Button type="primary" size="large" @click="ok()">{{this.GLOBAL.BTN_OK}}</Button>
</span>
</div>
</Modal>
</template>
<script>
import { saveInfo} from '@/api/dict';
export default {
name: "dictAdd",
props: ["dailogTitle", "dataForm", "value"],
watch: { // 侦听id 如果有变化则刷新列表
},
data() {
return {
show: this.value,
loading: true,
dailogView : this.GLOBAL.TEXT_VIEW,
// dictForm : this.dataForm2||{},
//dictForm:{},
dictFormRule: {
type: [
{required: true, message: '字典类型不能为空', trigger: 'blur'},
{type: 'string', max: 50, message: '字典类型不能大于50个字符', trigger: 'blur'}
],
label: [
{required: true, message: '字典文本不能为空', trigger: 'blur'},
{type: 'string', max: 50, message: '字典文本不能大于50个字符', trigger: 'blur'}
],
value: [
{required: true, message: '字典数值不能为空', trigger: 'blur'},
{type: 'string', max: 50, message: '字典数值不能大于50个字符', trigger: 'blur'}
],
sort: [
{required: true, message: '字典排序不能为空', trigger: 'blur'}
]
}
}
},
mounted () {
},
methods: {
//确定:保存数据
ok() {
setTimeout(() => {
this.loading = false;
this.$nextTick(() => {
this.loading = true;
});
}, 1000);
this.$refs['dictForm'].validate((valid) => {
debugger
//数据校验
if (valid) {
//提交表单
saveInfo(this.dataForm)
.then(res => {
let data = res.data;
if (data.success == true) {
this.$Message.success(data.msg);
// 提交表单数据成功则关闭当前的modal框
this.closeModal(false);
// 同时调用父页面的刷新页面的方法
this.$emit('getList');//子组件可以使用$emit 触发父组件的自定义事件
} else {
this.$Message.error(data.msg)
}
})
} else {
this.$Message.error(this.GLOBAL.MSG_FAILED_SAVE);
}
});
},
//取消:关闭modal
closeModal(val) {
if (this.dailogTitle == this.GLOBAL.DAILOG_TITLE_ADD) {
this.$refs['dictForm'].resetFields();
}
this.$emit('input', val);
}
},
watch: {
value(val) {
this.show = val;
},
show(val) {
if (!val) {
//this.$refs['dictForm'].resetFields();//数据置空
this.closeModal(val);//关闭
}
}
}
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)