feat(xumu): 添加数据字典
This commit is contained in:
aixianling
32
project/xumu/AppDictionary/AppDictionary.vue
Normal file
32
project/xumu/AppDictionary/AppDictionary.vue
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
<template>
|
||||||
|
<section class="AppDictionary">
|
||||||
|
<component :is="currentPage" v-bind="$props"/>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import DictDetail from "./dictDetail";
|
||||||
|
import DictList from "@project/xumu/AppDictionary/dictList.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "AppDictionary",
|
||||||
|
label: "数据字典",
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
permissions: Function
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
currentPage() {
|
||||||
|
let {hash} = this.$route
|
||||||
|
return hash == "#add" ? DictDetail : DictList
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.AppDictionary {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
202
project/xumu/AppDictionary/dictDetail.vue
Normal file
202
project/xumu/AppDictionary/dictDetail.vue
Normal file
@@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<section class="dictDetail">
|
||||||
|
<ai-detail>
|
||||||
|
<ai-title slot="title" title="字典信息" isShowBottomBorder isShowBack @onBackClick="$router.push({})"/>
|
||||||
|
<template #content>
|
||||||
|
<ai-card title="基本信息">
|
||||||
|
<template #content>
|
||||||
|
<el-form ref="dictDetailForm" :model="form" :rules="rules" size="small" label-width="110px">
|
||||||
|
<el-form-item required label="数据项：" prop="code">
|
||||||
|
<el-input v-model="form.code" style="width: 259px;" clearable
|
||||||
|
placeholder="请输入..."/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item required label="数据项名称：" prop="name">
|
||||||
|
<el-input v-model="form.name" style="width: 259px;" clearable
|
||||||
|
placeholder="请输入..."/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
<ai-card title="数据值" v-if="$route.query.id">
|
||||||
|
<template #right>
|
||||||
|
<el-button type="text" icon="iconfont iconAdd"
|
||||||
|
@click="form.dictionaryDetails.push({name:'',value:'',editable:true})"> 添加
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<template #content>
|
||||||
|
<el-table border :data="form.dictionaryDetails" header-cell-class-name="table-header"
|
||||||
|
cell-class-name="table-cell">
|
||||||
|
<el-table-column align="center" label="值">
|
||||||
|
<div slot-scope="{row}">
|
||||||
|
<el-input size="small" v-if="row.editable" v-model="row.value" clearable/>
|
||||||
|
<span v-else>{{ row.dictValue }}</span>
|
||||||
|
</div>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="描述">
|
||||||
|
<div slot-scope="{row}">
|
||||||
|
<el-input size="small" v-if="row.editable" v-model="row.name" clearable/>
|
||||||
|
<span v-else>{{ row.dictName }}</span>
|
||||||
|
</div>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="颜色">
|
||||||
|
<div slot-scope="{row}">
|
||||||
|
<el-color-picker v-if="row.editable" v-model="row.dictColor" size="medium"></el-color-picker>
|
||||||
|
<span v-else>{{ row.dictColor || '未设置' }}</span>
|
||||||
|
</div>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="操作" width="109px">
|
||||||
|
<div slot-scope="{row,$index}">
|
||||||
|
<section v-if="row.editable">
|
||||||
|
<el-button style="color: #2EA222" type="text" icon="iconfont iconCorrect"
|
||||||
|
@click="addDict(row)"/>
|
||||||
|
<el-button style="color: #f46" type="text" icon="iconfont iconClean"
|
||||||
|
@click="cancelEdit(row,$index)"/>
|
||||||
|
</section>
|
||||||
|
<section v-else>
|
||||||
|
<el-button class="dict-detail-operation" type="text" icon="iconfont iconEdit"
|
||||||
|
@click="editDetail(row)"/>
|
||||||
|
<el-button class="dict-detail-operation" type="text" icon="iconfont iconDelete"
|
||||||
|
@click="delDictValue(row.id)"/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
</template>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="$router.push({})">返回</el-button>
|
||||||
|
<el-button type="primary" @click="modifyDict">保存</el-button>
|
||||||
|
</template>
|
||||||
|
</ai-detail>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "dictDetail",
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
permissions: Function
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
rules() {
|
||||||
|
return {
|
||||||
|
code: [
|
||||||
|
{required: true, message: "请填写数据项"}
|
||||||
|
],
|
||||||
|
name: [
|
||||||
|
{required: true, message: "请填写数据项名称"}
|
||||||
|
],
|
||||||
|
// dictionaryDetails: [
|
||||||
|
// {
|
||||||
|
// validator: (r, v, cb) => {
|
||||||
|
// if (v.every(item => item.dictName && item.dictValue)) {
|
||||||
|
// cb()
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
code: "",
|
||||||
|
name: "",
|
||||||
|
dictionaryDetails: []
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if (this.$route.query.id) this.getDict()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getDict() {
|
||||||
|
this.instance.post("/admin/dictionary/queryDictDetail", null, {
|
||||||
|
params: {dictionaryId: this.$route.query.id}
|
||||||
|
}).then(res => {
|
||||||
|
if (res?.data) {
|
||||||
|
res.data.dictionaryDetails = res.data.dictionaryDetails.map(d => {
|
||||||
|
return {
|
||||||
|
...d,
|
||||||
|
editable: false,
|
||||||
|
name: "",
|
||||||
|
value: ""
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.form = res.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
delDictValue(id) {
|
||||||
|
this.$confirm("是否要删除该字典值", {
|
||||||
|
type: 'error'
|
||||||
|
}).then(() => {
|
||||||
|
this.instance.post("/admin/dictionary/deletevalue", null, {
|
||||||
|
params: {id}
|
||||||
|
}).then(res => {
|
||||||
|
if (res?.code == 0) {
|
||||||
|
this.$message.success("删除成功!")
|
||||||
|
this.getDict()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}).catch(() => 0)
|
||||||
|
},
|
||||||
|
editDetail(row) {
|
||||||
|
row.editable = true
|
||||||
|
row.name = row.dictName
|
||||||
|
row.value = row.dictValue
|
||||||
|
},
|
||||||
|
addDict(row) {
|
||||||
|
row.dictValue = row.value
|
||||||
|
row.dictName = row.name
|
||||||
|
row.dictionaryId = this.form.id
|
||||||
|
this.instance.post("/admin/dictionary/updateDetail", row).then(res => {
|
||||||
|
row.editable = false
|
||||||
|
row = res.data.data
|
||||||
|
this.$message.success("提交成功!")
|
||||||
|
})
|
||||||
|
},
|
||||||
|
cancelEdit(row, index) {
|
||||||
|
if (row.id) {
|
||||||
|
row.editable = false
|
||||||
|
} else {
|
||||||
|
this.form.dictionaryDetails.splice(index, 1)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
modifyDict() {
|
||||||
|
this.$refs.dictDetailForm.validate(v => {
|
||||||
|
if (v) {
|
||||||
|
this.instance.post("/admin/dictionary/updateDict", this.form).then(res => {
|
||||||
|
if (res?.code == 0) {
|
||||||
|
this.$message.success("提交成功!")
|
||||||
|
this.$router.push({})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dictDetail {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
:deep( .el-table__row ){
|
||||||
|
|
||||||
|
.el-input__inner {
|
||||||
|
padding: 0 30px;
|
||||||
|
border: none;
|
||||||
|
text-align: center;
|
||||||
|
background: #ddd;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
142
project/xumu/AppDictionary/dictList.vue
Normal file
142
project/xumu/AppDictionary/dictList.vue
Normal file
@@ -0,0 +1,142 @@
|
|||||||
|
<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>
|
||||||
Reference in New Issue
Block a user