<template>
|
<div>
|
<div v-if="!showEdit">
|
<el-container class="layout-container-demo">
|
<el-aside width="400px">
|
<el-scrollbar>
|
<el-card class="box-card">
|
<template #header>
|
<div class="card-header">
|
<el-input v-model="keyword" placeholder="字典名称" />
|
<Search class="icon_btn_class" @click="handleQuery()" />
|
<el-icon @click="handleCreate()"><CirclePlus /></el-icon>
|
<!-- <el-button class="button" text>Operation button</el-button> -->
|
</div>
|
</template>
|
|
<div v-for="dict in dicts" :key="dict.id">
|
<!-- 由于SVG图标默认不携带任何属性 -->
|
<!-- 你需要直接提供它们 -->
|
<el-link class="dict_class" @click="handleShowItem(dict.id)"> {{ dict.remark }}</el-link>
|
<el-link class="dict_class" @click="handleShowItem(dict.id)"> {{ dict.name }} </el-link>
|
|
<Edit class="icon_btn_class" @click="handleEdit(dict.id)" />
|
<Delete class="icon_btn_class" @click="handleDelete(dict.id)" />
|
<el-icon @click="handleCreateItem(dict)"><CirclePlus /></el-icon>
|
<!-- <Search class="icon_btn_class" /> -->
|
<!-- <Share class="icon_btn_class" /> -->
|
</div>
|
</el-card>
|
</el-scrollbar>
|
</el-aside>
|
|
<el-container>
|
<el-header>
|
<div class="toolbar">
|
<el-select
|
v-model="editId"
|
@clear="handleClear"
|
@change="handleDictChange"
|
clearable
|
filterable
|
placeholder="父字典值"
|
>
|
<el-option v-for="item in dicts" :key="item.id" :label="item.remark" :value="item.id" />
|
</el-select>
|
|
<el-input v-model="itemKeyword" placeholder="字典项名称" />
|
<Search class="icon_btn_class2" @click="handleQueryItems" />
|
<!-- <el-icon ><CirclePlus /></el-icon> -->
|
</div>
|
</el-header>
|
|
<el-main>
|
<el-scrollbar>
|
<el-table :data="dictItems">
|
<el-table-column prop="remark" label="字典名称" />
|
<el-table-column prop="name" label="字典值" />
|
<el-table-column prop="label" label="字典项名称" />
|
<el-table-column prop="value" label="字典项值" />
|
<el-table-column prop="sort" label="排序号" />
|
|
<el-table-column fixed="right" label="操作">
|
<template #default="scope">
|
<!-- <el-button link type="primary" size="small" @click="handleClick">Detail</el-button>
|
<el-button link type="primary" size="small">Edit</el-button> -->
|
<Edit class="icon_btn_class" @click="handleItemEdit(scope.row)" />
|
<Delete class="icon_btn_class" @click="handleItemDelete(scope.row)" />
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-scrollbar>
|
</el-main>
|
</el-container>
|
</el-container>
|
</div>
|
<!-- 编辑页面 -->
|
<sys-dict-modify v-else @editClose="editClose" :editId="editId"></sys-dict-modify>
|
|
<div>
|
<el-drawer v-model="drawer2" :direction="direction" :before-close="handleItemClose">
|
<template #header>
|
<h4>字典项新增</h4>
|
</template>
|
<div class="wrap">
|
<el-row>
|
<el-col :lg="16" :md="20" :sm="24" :xs="24">
|
<el-form :model="sysDictItem" status-icon ref="form" label-width="100px" @submit.prevent :rules="rules">
|
<el-form-item label="字典名称" prop="">
|
<el-input v-model="sysDictItem.remark" readonly></el-input>
|
</el-form-item>
|
<el-form-item label="字典项名称" prop="label">
|
<el-input v-model="sysDictItem.label" placeholder="请填写字典项名称"></el-input>
|
</el-form-item>
|
<el-form-item label="字典项值" prop="value">
|
<el-input v-model="sysDictItem.value" placeholder="请填写字典项值"></el-input>
|
</el-form-item>
|
<el-form-item label="排序号" prop="sort">
|
<el-input v-model="sysDictItem.sort" placeholder="请填写排序号"></el-input>
|
</el-form-item>
|
<el-form-item class="submit">
|
<el-button type="primary" @click="submitForm">保 存</el-button>
|
<el-button @click="resetForm">重 置</el-button>
|
</el-form-item>
|
</el-form>
|
</el-col>
|
</el-row>
|
</div>
|
<!-- <template #default>
|
<div>
|
<el-radio v-model="radio1" label="Option 1" size="large"
|
>Option 1</el-radio
|
>
|
<el-radio v-model="radio1" label="Option 2" size="large"
|
>Option 2</el-radio
|
>
|
</div>
|
</template> -->
|
<template #footer>
|
<div style="flex: auto">
|
<!-- <el-button @click="cancelClick">cancel</el-button>
|
<el-button type="primary" @click="confirmClick">confirm</el-button> -->
|
</div>
|
</template>
|
</el-drawer>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { onMounted, ref, reactive } from 'vue'
|
import { ElMessageBox, ElMessage } from 'element-plus'
|
import { Edit, View as IconView } from '@element-plus/icons-vue'
|
|
import sysDictModel from '@/model/sysDict'
|
import sysDictItemModel from '@/model/sysDictItem'
|
|
import SysDictModify from './sys-dict.vue'
|
|
export default {
|
components: {
|
SysDictModify,
|
},
|
setup() {
|
const dicts = ref([])
|
const loading = ref(false)
|
const showEdit = ref(false)
|
const editId = ref('')
|
const keyword = ref('')
|
|
// 子项字典
|
const form = ref(null)
|
const dictItems = ref([])
|
const drawer2 = ref(false)
|
const direction = ref('rtl')
|
const sysDictItem = reactive({ id: '', dict_id: '', label: '', value: '', sort: 0, remark: '', name: '' })
|
const sysDict = reactive({ name: '', remark: '' })
|
const itemKeyword = ref('')
|
const editItemId = ref('')
|
|
const listAssign = (a, b) => Object.keys(a).forEach(key => {
|
a[key] = b[key] || a[key]
|
})
|
|
const listAssignNull = a => Object.keys(a).forEach(key => {
|
a[key] = ''
|
})
|
|
onMounted(() => {
|
getSysDictList()
|
// 列出所有字典项目
|
getSysDictItemList()
|
})
|
|
const getSysDictList = async () => {
|
try {
|
loading.value = true
|
dicts.value = await sysDictModel.getSysDictList(keyword.value)
|
loading.value = false
|
} catch (error) {
|
loading.value = false
|
if (error.code === 10020) {
|
dicts.value = []
|
}
|
}
|
}
|
|
const handleQuery = () => {
|
// 列出所有字典
|
getSysDictList()
|
}
|
|
const handleDetail = id => {
|
editId.value = id
|
}
|
|
const handleCreate = () => {
|
showEdit.value = true
|
editId.value = ''
|
}
|
|
const handleEdit = id => {
|
showEdit.value = true
|
editId.value = id
|
}
|
|
const handleDelete = id => {
|
ElMessageBox.confirm('此操作将永久删除该字典, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(async () => {
|
const res = await sysDictModel.deleteSysDict(id)
|
if (res.code < window.MAX_SUCCESS_CODE) {
|
getSysDictList()
|
ElMessage.success(`${res.message}`)
|
}
|
})
|
.catch(() => {
|
// 用户点击取消按钮时执行的操作
|
// 可以选择不做任何事情，也可以显示取消消息
|
// ElMessage.info('操作已取消'); // 如果需要显示取消消息，可以取消注释
|
})
|
}
|
|
const editClose = () => {
|
showEdit.value = false
|
getSysDictList()
|
getSysDictItemList()
|
}
|
|
const onSubmit = () => {
|
console.log('submit!')
|
}
|
|
// 字典子项目
|
|
const handleQueryItems = () => {
|
getSysDictItemList()
|
}
|
|
const handleShowItem = dictId => {
|
// 根据当前的字典查找字典项目，并展示
|
editId.value = dictId
|
sysDictItem.dict_id = dictId
|
getSysDictItemList()
|
}
|
|
const getSysDictItemList = async () => {
|
try {
|
loading.value = true
|
dictItems.value = await sysDictItemModel.getSysDictItemList(itemKeyword.value, editId.value)
|
loading.value = false
|
} catch (error) {
|
loading.value = false
|
if (error.code === 10020) {
|
dictItems.value = []
|
}
|
}
|
}
|
|
// 创建子字典项目
|
|
// 表单验证规则
|
const { rules } = getRules()
|
|
const handleCreateItem = dict => {
|
drawer2.value = true
|
// listAssign(sysDict,dict);
|
// 创建的时候将id设置为空
|
sysDictItem.id = ''
|
sysDictItem.dict_id = dict.id
|
sysDictItem.remark = dict.remark
|
sysDictItem.name = dict.name
|
|
// console.log(sysDict)
|
}
|
|
// 重置表单
|
const resetForm = () => {
|
form.value.resetFields()
|
// listAssignNull(sysDictItem)
|
sysDictItem.label = ''
|
sysDictItem.value = ''
|
}
|
|
const submitForm = async formName => {
|
form.value.validate(async valid => {
|
if (valid) {
|
let res = {}
|
if (sysDictItem.id) {
|
res = await sysDictItemModel.editSysDictItem(sysDictItem.id, sysDictItem)
|
} else {
|
res = await sysDictItemModel.createSysDictItem(sysDictItem)
|
}
|
if (res.code < window.MAX_SUCCESS_CODE) {
|
ElMessage.success(`${res.message}`)
|
resetForm()
|
getSysDictItemList()
|
}
|
} else {
|
console.error('error submit!!')
|
ElMessage.error('请将信息填写完整')
|
}
|
})
|
}
|
|
const indexMethod = index => index + 1
|
|
const handleItemClose = () => {
|
resetForm()
|
drawer2.value = false
|
}
|
|
const handleClear = () => {
|
editId.value = ''
|
sysDictItem.dict_id = ''
|
getSysDictItemList()
|
}
|
|
const handleDictChange = val => {
|
editId.value = val
|
sysDictItem.dict_id = val
|
getSysDictItemList()
|
}
|
|
const handleItemEdit = row => {
|
listAssign(sysDictItem, row)
|
drawer2.value = true
|
}
|
|
const handleItemDelete = row => {
|
ElMessageBox.confirm('此操作将永久删除该字典, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(async () => {
|
const res = await sysDictItemModel.deleteSysDictItem(row.id)
|
if (res.code < window.MAX_SUCCESS_CODE) {
|
getSysDictItemList()
|
ElMessage.success(`${res.message}`)
|
}
|
})
|
.catch(() => {
|
// 用户点击取消按钮时执行的操作
|
// 可以选择不做任何事情，也可以显示取消消息
|
// ElMessage.info('操作已取消'); // 如果需要显示取消消息，可以取消注释
|
})
|
}
|
|
return {
|
keyword,
|
dicts,
|
editId,
|
showEdit,
|
editClose,
|
handleQuery,
|
handleCreate,
|
handleEdit,
|
handleDelete,
|
handleShowItem,
|
onSubmit,
|
|
handleCreateItem,
|
drawer2,
|
direction,
|
sysDictItem,
|
sysDict,
|
resetForm,
|
submitForm,
|
rules,
|
form,
|
dictItems,
|
itemKeyword,
|
handleItemClose,
|
handleQueryItems,
|
handleClear,
|
handleDictChange,
|
handleItemEdit,
|
handleItemDelete,
|
}
|
},
|
}
|
|
/**
|
* 表单验证规则
|
*/
|
function getRules() {
|
/**
|
* 验证回调函数
|
*/
|
const checkInfo = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error('信息不能为空'))
|
}
|
callback()
|
}
|
const rules = {
|
label: [{ validator: checkInfo, trigger: 'blur', required: true }],
|
value: [{ validator: checkInfo, trigger: 'blur', required: true }],
|
}
|
return { rules }
|
}
|
</script>
|
|
<style scoped>
|
.layout-container-demo {
|
min-height: 100% !important;
|
/* margin:10px ; */
|
}
|
.layout-container-demo .el-header {
|
position: relative;
|
/* background-color: var(--el-color-primary-light-7); */
|
color: var(--el-text-color-primary);
|
}
|
.layout-container-demo .el-aside {
|
color: var(--el-text-color-primary);
|
/* background: var(--el-color-primary-light-8); */
|
}
|
.layout-container-demo .el-menu {
|
border-right: none;
|
}
|
.layout-container-demo .el-main {
|
padding: 0;
|
}
|
.layout-container-demo .toolbar {
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
height: 100%;
|
/* right: 20px; */
|
}
|
|
.el-card {
|
width: 99% !important;
|
height: 100%;
|
overflow: auto;
|
}
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.text {
|
font-size: 14px;
|
}
|
|
.item {
|
margin-bottom: 18px;
|
}
|
|
.box-card {
|
width: 480px;
|
height: 100%;
|
}
|
|
.el-link {
|
margin-right: 8px;
|
}
|
|
.icon_btn_class {
|
width: 1em;
|
height: 1em;
|
margin-left: 4px;
|
margin-right: 4px;
|
}
|
.icon_btn_class2 {
|
width: 2em;
|
height: 1em;
|
margin-left: 4px;
|
}
|
|
.dict_class {
|
width: 100px;
|
overflow: hidden;
|
}
|
</style>
|
