<template>
|
<div>
|
<a-card :bordered="false" style="margin-top: 24px">
|
<a-button icon="plus" type="primary" @click="handleCreate" style="margin-bottom:15px">新建字典</a-button>
|
<a-collapse >
|
<a-collapse-panel
|
v-for="(item,index) in dictionaryData"
|
:header="item.name+' ('+item.desc+')'"
|
:key="index"
|
>
|
<a v-if="item.system!==1" v slot="extra" @click="handleEdit(true,item)">编辑</a>
|
<a-divider v-if="item.system!==1" slot="extra" type="vertical" />
|
<a-popconfirm v-if="item.system!==1" slot="extra" @confirm="popCollapseConfirm(item)" title="确定要删除该数据吗？" ok-text="确定" cancel-text="取消" >
|
<a>删除</a>
|
</a-popconfirm>
|
{{dictionaryData[index].dataVos}}
|
<a-button v-if="item.system!==1" icon="plus" type="primary" @click="handleTableCreate(item)" style="margin-bottom:15px" >新建配置</a-button>
|
<a-table
|
:dataSource="dictionaryData[index].dataVOs"
|
:columns="columns"
|
:disabled="dictionaryData[index].system==1?false:true"
|
>
|
<span v-if="item.system!==1" slot="action" slot-scope="record">
|
<a @click="handleUpdateModalVisible(true,record)">编辑</a>
|
<a-divider type="vertical" />
|
<a-popconfirm
|
@confirm="popconfirm(record)"
|
title="确定要删除该数据吗"
|
ok-text="确定"
|
cancel-text="取消"
|
>
|
<a>删除</a></a-popconfirm>
|
|
</span>
|
</a-table>
|
</a-collapse-panel>
|
</a-collapse>
|
</a-card>
|
|
<a-modal
|
title="新建-字典"
|
destroyOnClose
|
v-model="visibleCreateModal"
|
@ok="handleCreateModalOk"
|
@cancel="handleCreateModalCancel"
|
okText="保存"
|
>
|
<a-form style="margin-top: 8px" :form="form">
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="字典类型"
|
>
|
<a-input v-decorator="['name', { rules: [{ required: true,pattern:/^[A-Za-z]+$/, message: '请输入字典（只支持英文字母）！', min: 2 }] }]"
|
placeholder="请输入字典类型" />
|
</a-form-item>
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="字典描述"
|
>
|
<a-input v-decorator="['desc', { rules: [{ required: true, message: '请输入描述,至少2位！', min: 2 }] }]"
|
placeholder="请输入字典描述" />
|
</a-form-item>
|
</a-form>
|
</a-modal>
|
|
<!-- table编辑组件 -->
|
<update-dictionary-form
|
:visible.sync="updateDictionaryFormVisible"
|
:record="updateRecord"
|
@updateData="loadData"
|
></update-dictionary-form>
|
|
<!-- 折叠菜单编辑组件 -->
|
<update-dictionary-type :visible.sync="updateDictionaryTypeVisible"
|
:record="updateTypeRecord"
|
@updateData="loadData"
|
>
|
</update-dictionary-type>
|
|
<!-- table新建组件 -->
|
<a-modal
|
title="新建-配置"
|
destroyOnClose
|
:visible="visibleCreateTableModal"
|
@ok="handleCreateTableModalOk"
|
@cancel="handleCreateTableModalCancel"
|
okText="保存"
|
>
|
<a-form style="margin-top: 8px" :form="tableForm">
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="key"
|
>
|
<a-input v-decorator="['key', { rules: [{ required: true,pattern:/^[A-Za-z0-9]+$/, message: '请输入key,只能为数字或字母！', min: 1 }] }]"
|
placeholder="请输入key" />
|
</a-form-item>
|
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="value"
|
>
|
<a-input v-decorator="['value', { rules: [{ required: true, message: '请输入value,至少2位！', min: 1 }] }]"
|
placeholder="请输入value" />
|
</a-form-item>
|
</a-form>
|
</a-modal>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component } from "vue-property-decorator";
|
import { get, post } from "@/util/request";
|
import UpdateDictionaryForm from "../list/components/UpdateDictionaryForm.vue";
|
import UpdateDictionaryType from "../list/components/UpdateDictionaryType.vue";
|
@Component({
|
components: {
|
UpdateDictionaryForm,
|
UpdateDictionaryType
|
}
|
})
|
export default class dictionaryManage extends Vue {
|
//接口数据
|
private dictionaryData: any[] = [];
|
private visibleCreateModal: boolean = false;
|
private visibleCreateTableModal:boolean=false;
|
private updateDictionaryFormVisible: boolean = false;
|
private updateDictionaryTypeVisible:boolean=false;
|
private updateRecord: any = {};
|
private updateTypeRecord:any={}
|
private dictData:any={}
|
|
private form:any={}
|
private tableForm:any={}
|
|
private columns: any[] = [
|
{
|
title: "key",
|
dataIndex: "key"
|
},
|
{
|
title: "value",
|
dataIndex: "value"
|
},
|
{
|
title: "操作",
|
scopedSlots: { customRender: "action" }
|
}
|
];
|
|
//新建表格 ,点击弹窗
|
private handleTableCreate(item: any){
|
this.dictData=item
|
this.visibleCreateTableModal=true;
|
}
|
|
private handleCreateTableModalCancel(){
|
this.visibleCreateTableModal=false;
|
}
|
|
//table 新建保存
|
private handleCreateTableModalOk(){
|
this.tableForm.validateFields((err: any,values: any)=>{
|
if(err){
|
return;
|
}
|
post('dict/data/insert',{
|
typeId:this.dictData.id,
|
key:values.key,
|
value:values.value
|
}).then(res=>{
|
if(res.data.code!=0){
|
this.$message.error(res.data.message)
|
}else{
|
this.loadData();
|
this.$message.success(res.data.message)
|
this.visibleCreateTableModal=false;
|
}
|
}).catch(err=>{
|
console.log(err)
|
})
|
})
|
|
|
}
|
|
//折叠面板删除
|
private popCollapseConfirm(record:any){
|
post("dict/type/delete",{
|
id:record.id
|
}).then(res=>{
|
if(res.data.code!=0){
|
this.$message.error(res.data.message)
|
}else{
|
this.$message.success(res.data.message)
|
this.loadData()
|
}
|
}).catch(err=>{
|
console.log(err)
|
})
|
}
|
|
//重置
|
private handleFormReset() {}
|
|
private handleSearch() {}
|
//编辑按钮点击调用显示弹窗
|
private handleUpdateModalVisible(visible: boolean, record: any): void {
|
this.updateDictionaryFormVisible = true;
|
this.updateRecord = record;
|
}
|
|
// 新建，插入数据库，默认都是可修改，system=0
|
private handleCreateModalOk(){
|
this.form.validateFields((err: any,values: any)=>{
|
if(err){
|
return;
|
}
|
post('dict/type/insert',{
|
name:values.name,
|
desc:values.desc
|
}).then(res=>{
|
//判断信息，是否保存成功，回调查询接口,隐藏界面
|
if(res.data.code!=0){
|
this.$message.error(res.data.message)
|
}else{
|
this.loadData()
|
this.$message.success(res.data.message)
|
this.visibleCreateModal=false;
|
}
|
}).catch(err=>{
|
console.log(err)
|
})
|
})
|
}
|
|
|
private handleCreateModalCancel(){
|
|
this.visibleCreateModal=false;
|
}
|
|
//折叠面板类型编辑方法，修改描述
|
private handleEdit(visible:boolean,record:any) {
|
this.updateDictionaryTypeVisible=visible
|
this.updateTypeRecord=record
|
}
|
|
//删除折叠面板
|
private handleDelete() {
|
|
}
|
//新建，建一个折叠面板，
|
private handleCreate() {
|
// this.form=this.$form.createForm(this,{name:'coor'}) //声明变量的时候不能写，必须这样写
|
this.visibleCreateModal=true;
|
}
|
|
//删除table，网络请求
|
private popconfirm(record: any) {
|
post("dict/data/delete", {
|
id: record.id
|
}).then(res => {
|
if(res.data.code!=0){
|
this.$message.error(res.data.message)
|
}else{
|
//删除刷新数据
|
this.$message.success(res.data.message)
|
this.loadData();
|
}
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
}
|
|
private created() {
|
this.form=this.$form.createForm(this,{name:'form'})
|
this.tableForm=this.$form.createForm(this,{name:'tableForm'})
|
this.loadData();
|
}
|
|
private sortbykey(array: any, key: any) {
|
return array.sort(function(a: any, b: any) {
|
var x = a[key];
|
var y = b[key];
|
return x < y ? -1 : x > y ? 1 : 0;
|
});
|
}
|
|
//网络请求，初始加载数据
|
private loadData() {
|
get("dict/type/query", {})
|
.then(res => {
|
this.dictionaryData = res.data.data.sysDictTypes;
|
//对table的key进行排序
|
for(let i=0;i<this.dictionaryData.length;i++){
|
this.dictionaryData[i].dataVOs=this.sortbykey(this.dictionaryData[i].dataVOs,"key")
|
}
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.tableList {
|
.tableListOperator {
|
margin-bottom: 16px;
|
button {
|
margin-right: 8px;
|
}
|
}
|
}
|
</style>
|
|
