125 lines
4.2 KiB
Vue
125 lines
4.2 KiB
Vue
<template>
|
|
<div>
|
|
<navbar title="业务字典" />
|
|
<div class="flex flex-align-start">
|
|
<div class="container mr-20" style="flex: 1">
|
|
<div class="flex flex-center flex-justify-start">
|
|
<add-dict @ok="fetchList" type="new" />
|
|
</div>
|
|
<a-table
|
|
class="mt-20"
|
|
:columns="columns"
|
|
:data="list"
|
|
:pagination="page"
|
|
@row-click="rowClick"
|
|
@page-change="pageChange"
|
|
>
|
|
<template #label="{ record }">
|
|
<div>{{ record.sort }} {{ record.label }}</div>
|
|
</template>
|
|
</a-table>
|
|
</div>
|
|
<div class="container" style="flex: 3" v-if="dict">
|
|
<div class="flex flex-center flex-justify-between">
|
|
<div class="flex flex-center">
|
|
<h2>{{ dict.label }}</h2>
|
|
<add-dict class="ml-20" :info="dict" type="edit" @click="fetchDetail" />
|
|
</div>
|
|
<add-dict :info="dict" type="add" @ok="fetchDetail" />
|
|
</div>
|
|
<a-table class="mt-20" :columns="columns2" :data="list2">
|
|
<template #menu="{ record }">
|
|
<div class="flex flex-center flex-justify-start">
|
|
<add-dict
|
|
:info="record"
|
|
type="edit"
|
|
@ok="fetchDetail"
|
|
/>
|
|
<add-dict :info="record" type="addSub" />
|
|
<a-popconfirm
|
|
content="确定删除该数据？"
|
|
@ok="remove(record.id)"
|
|
>
|
|
<a-button type="text" size="small"
|
|
>删除
|
|
</a-button>
|
|
</a-popconfirm>
|
|
</div>
|
|
</template>
|
|
</a-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import navbar from '@/components/navbar/index.vue'
|
|
import addDict from '@/views/system/components/add-dict.vue'
|
|
|
|
export default {
|
|
components: {
|
|
navbar,
|
|
addDict
|
|
},
|
|
data() {
|
|
return {
|
|
page: { page: 1, size: 10, total: 0 },
|
|
list: [],
|
|
list2: [],
|
|
|
|
columns: [{ title: '名称', slotName: 'label' }],
|
|
columns2: [
|
|
{ title: '名称', dataIndex: 'label' },
|
|
{ title: '值', dataIndex: 'value' },
|
|
{ title: 'code', dataIndex: 'code' },
|
|
{ title: '排序', dataIndex: 'sort' },
|
|
{ title: '操作', slotName: 'menu' }
|
|
],
|
|
dict: null,
|
|
index: 0
|
|
}
|
|
},
|
|
mounted() {
|
|
this.fetchList()
|
|
},
|
|
methods: {
|
|
pageChange(page) {
|
|
this.page.page = page
|
|
this.fetchList()
|
|
},
|
|
fetchList() {
|
|
this.$api.sys.dictPage(this.page).then(res => {
|
|
if (res.code === 200) {
|
|
this.list = res.data.records
|
|
this.dict = this.list[this.index]
|
|
this.fetchDetail()
|
|
this.page.total = res.data.total
|
|
}
|
|
})
|
|
},
|
|
fetchDetail() {
|
|
this.$api.sys.dict({ code: this.dict.code }).then(res => {
|
|
if (res.code === 200) {
|
|
this.list2 = res.data
|
|
}
|
|
})
|
|
},
|
|
rowClick(res) {
|
|
this.dict = res
|
|
this.index = this.list.findIndex(sub => sub.id === res.id)
|
|
this.fetchDetail()
|
|
},
|
|
remove(id) {
|
|
this.$api.sys.dictRemove({ id: id }).then(res => {
|
|
if (res.code === 200) {
|
|
this.fetchList()
|
|
this.$notification.success(res.msg)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|