143 lines
4.2 KiB
Vue
143 lines
4.2 KiB
Vue
<script>
|
||
const columns = [
|
||
{slot: "expand"},
|
||
{label: "数据项", prop: "code"},
|
||
{label: "数据项名称", prop: "name"},
|
||
]
|
||
export default {
|
||
name: "dictList",
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
permissions: Function
|
||
},
|
||
data() {
|
||
return {
|
||
columns,
|
||
page: {
|
||
current: 1,
|
||
total: 0,
|
||
size: 10
|
||
},
|
||
search: {
|
||
condition: ""
|
||
},
|
||
dictList: [],
|
||
id: ''
|
||
}
|
||
},
|
||
methods: {
|
||
resetSearch() {
|
||
this.page.current = 1;
|
||
this.search.condition = '';
|
||
this.getDicts();
|
||
},
|
||
getDicts() {
|
||
this.instance.post("/admin/dictionary/queryDictList", null, {
|
||
params: {
|
||
...this.page,
|
||
name: this.search.condition
|
||
}
|
||
}).then(res => {
|
||
this.dictList = res.data.records.map(e => {
|
||
return {...e, detail: []}
|
||
})
|
||
this.page.total = res.data.total
|
||
})
|
||
},
|
||
addDict() {
|
||
this.$router.push({hash: "#add"})
|
||
},
|
||
handleDelete(id) {
|
||
this.$confirm("确定要删除该数据项吗？", {
|
||
type: "error"
|
||
}).then(() => {
|
||
this.instance.post("/admin/dictionary/deleteDict", null, {
|
||
params: {id}
|
||
}).then(res => {
|
||
if (res?.code == 0) {
|
||
this.getDicts();
|
||
this.$message.success("删除成功!")
|
||
}
|
||
})
|
||
}).catch(() => 0)
|
||
},
|
||
openDetail(id) {
|
||
this.$router.push({query: {id}, hash: "#add"})
|
||
},
|
||
handleSizeChange(val) {
|
||
this.page.size = val;
|
||
this.getDicts();
|
||
},
|
||
getDictInfo(row) {
|
||
if (row.detail.length) {
|
||
row.detail = []
|
||
} else {
|
||
this.getDict(row.id).then(res => {
|
||
if (res && res.data) {
|
||
row.detail = res.data.dictionaryDetails || []
|
||
}
|
||
})
|
||
}
|
||
},
|
||
getDict(dictionaryId) {
|
||
return this.instance.post("/admin/dictionary/queryDictDetail", null, {
|
||
params: {dictionaryId}
|
||
})
|
||
},
|
||
},
|
||
created() {
|
||
this.getDicts()
|
||
},
|
||
}
|
||
</script>
|
||
<template>
|
||
<section class="dictList">
|
||
<ai-list>
|
||
<ai-title slot="title" title="数据字典" isShowBottomBorder/>
|
||
<template #content>
|
||
<ai-search-bar>
|
||
<template #left>
|
||
<el-button type="primary" size="small" icon="iconfont iconAdd" @click="addDict"
|
||
v-if="$permissions('admin_sysdictionary_add')">添加
|
||
</el-button>
|
||
</template>
|
||
<template #right>
|
||
<el-input size="small" v-model="search.condition" placeholder="数据项" clearable
|
||
@change="page.current=1,getDicts()" prefix-icon="iconfont iconSearch"/>
|
||
<el-button type="primary" size="small" icon="iconfont iconSearch"
|
||
@click="page.current=1,getDicts()">查询
|
||
</el-button>
|
||
<el-button size="small" icon="el-icon-refresh-right" @click="resetSearch">重置</el-button>
|
||
</template>
|
||
</ai-search-bar>
|
||
<ai-table :tableData="dictList" :colConfigs="columns" :dict="dict" @getList="getDicts"
|
||
:total="page.total" :current.sync="page.current" :size.sync="page.size" :page-sizes="[10, 20, 50, 100,200]"
|
||
@expand-change="getDictInfo">
|
||
<el-table-column slot="expand" type="expand">
|
||
<template slot-scope="{row}">
|
||
<div class="flex" style="gap:4px">
|
||
<el-tag v-for="(op,i) in row.detail||[]" :key="i">{{ [op.dictValue, op.dictName, op.dictColor].filter(Boolean).join("｜") }}</el-tag>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column slot="options" label="操作" fixed="right" align="center">
|
||
<template slot-scope="{row}">
|
||
<div class="table-options">
|
||
<el-button type="text" @click="openDetail(row.id)" v-if="$permissions('admin_sysdictionary_edit')">编辑</el-button>
|
||
<el-button type="text" @click="handleDelete(row.id)" v-if="$permissions('admin_sysdictionary_del')">删除</el-button>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</ai-table>
|
||
</template>
|
||
</ai-list>
|
||
</section>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.dictList {
|
||
height: 100%;
|
||
}
|
||
</style>
|