mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-23 05:40:20 +08:00
✨ Introducing new features. 增加字典管理
This commit is contained in:
parent
d18f1e3ddd
commit
f7e3df12a1
@ -7,3 +7,86 @@ export const getDicts = (type: String) => {
|
||||
method: "get",
|
||||
})
|
||||
}
|
||||
|
||||
export function fetchList(query: any) {
|
||||
return request({
|
||||
url: '/admin/dict/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function fetchItemList(query: any) {
|
||||
return request({
|
||||
url: '/admin/dict/item/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function addItemObj(obj: any) {
|
||||
return request({
|
||||
url: '/admin/dict/item',
|
||||
method: 'post',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
|
||||
export function getItemObj(id: string) {
|
||||
return request({
|
||||
url: '/admin/dict/item/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function delItemObj(id: string) {
|
||||
return request({
|
||||
url: '/admin/dict/item/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
export function putItemObj(obj: any) {
|
||||
return request({
|
||||
url: '/admin/dict/item',
|
||||
method: 'put',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
|
||||
export function addObj(obj: any) {
|
||||
return request({
|
||||
url: '/admin/dict/',
|
||||
method: 'post',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
|
||||
export function getObj(id: string) {
|
||||
return request({
|
||||
url: '/admin/dict/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function delObj(row: any) {
|
||||
return request({
|
||||
url: '/admin/dict/' + row.id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
export function putObj(obj: any) {
|
||||
return request({
|
||||
url: '/admin/dict/',
|
||||
method: 'put',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
|
||||
export function refreshCache() {
|
||||
return request({
|
||||
url: '/admin/dict/sync',
|
||||
method: 'put'
|
||||
})
|
||||
}
|
||||
|
@ -32,6 +32,9 @@ service.interceptors.request.use((config: InternalAxiosRequestConfig) => {
|
||||
|
||||
// 添加响应拦截器
|
||||
service.interceptors.response.use((res: any) => {
|
||||
if(res.data.code === 1){
|
||||
throw res.data
|
||||
}
|
||||
return res.data;
|
||||
}, error => {
|
||||
const status = Number(error.response.status) || 200
|
||||
|
@ -6,7 +6,7 @@
|
||||
<el-button icon="search" type="primary" class="ml10" @click="getDataList">
|
||||
{{ $t('common.queryBtn') }}
|
||||
</el-button>
|
||||
<el-button icon="folder-add" type="success" class="ml10" @click="deptDialogRef.openDialog('add');" v-auth="'sys_dept_add'">
|
||||
<el-button icon="folder-add" type="primary" class="ml10" @click="deptDialogRef.openDialog('add');" v-auth="'sys_dept_add'">
|
||||
{{ $t('common.addBtn') }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
@ -1,150 +0,0 @@
|
||||
<template>
|
||||
<div class="system-dic-dialog-container">
|
||||
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
|
||||
<el-alert title="半成品,交互过于复杂,请自行扩展!" type="warning" :closable="false" class="mb20"> </el-alert>
|
||||
<el-form ref="dicDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="字典名称">
|
||||
<el-input v-model="state.ruleForm.dicName" placeholder="请输入字典名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="字段名">
|
||||
<el-input v-model="state.ruleForm.fieldName" placeholder="请输入字段名,拼接 ruleForm.list" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="字典状态">
|
||||
<el-switch v-model="state.ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-row :gutter="35" v-for="(v, k) in state.ruleForm.list" :key="k">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item :prop="`list[${k}].label`">
|
||||
<template #label>
|
||||
<el-button type="primary" circle size="small" @click="onAddRow" v-if="k === 0">
|
||||
<el-icon>
|
||||
<ele-Plus />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-button type="danger" circle size="small" @click="onDelRow(k)" v-else>
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<span class="ml10">字段</span>
|
||||
</template>
|
||||
<el-input v-model="v.label" style="width: 100%" placeholder="请输入字段名"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="属性" :prop="`list[${k}].value`">
|
||||
<el-input v-model="v.value" style="width: 100%" placeholder="请输入属性值"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="字典描述">
|
||||
<el-input v-model="state.ruleForm.describe" type="textarea" placeholder="请输入字典描述" maxlength="150"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="systemDicDialog">
|
||||
import { reactive, ref } from 'vue';
|
||||
|
||||
// 定义子组件向父组件传值/事件
|
||||
const emit = defineEmits(['refresh']);
|
||||
|
||||
// 定义变量内容
|
||||
const dicDialogFormRef = ref();
|
||||
const state = reactive({
|
||||
ruleForm: {
|
||||
dicName: '', // 字典名称
|
||||
fieldName: '', // 字段名
|
||||
status: true, // 字典状态
|
||||
list: [] as ListType[], // 子集字段 + 属性值
|
||||
describe: '', // 字典描述
|
||||
},
|
||||
dialog: {
|
||||
isShowDialog: false,
|
||||
type: '',
|
||||
title: '',
|
||||
submitTxt: '',
|
||||
},
|
||||
});
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (type: string, row: RowDicType) => {
|
||||
if (type === 'edit') {
|
||||
if (row.fieldName === 'SYS_UERINFO') {
|
||||
row.list = [
|
||||
{ id: Math.random(), label: 'sex', value: '1' },
|
||||
{ id: Math.random(), label: 'sex', value: '0' },
|
||||
];
|
||||
} else {
|
||||
row.list = [
|
||||
{ id: Math.random(), label: 'role', value: 'admin' },
|
||||
{ id: Math.random(), label: 'role', value: 'common' },
|
||||
{ id: Math.random(), label: 'roleName', value: '超级管理员' },
|
||||
{ id: Math.random(), label: 'roleName', value: '普通用户' },
|
||||
];
|
||||
}
|
||||
state.ruleForm = row;
|
||||
state.dialog.title = '修改字典';
|
||||
state.dialog.submitTxt = '修 改';
|
||||
} else {
|
||||
state.dialog.title = '新增字典';
|
||||
state.dialog.submitTxt = '新 增';
|
||||
// 清空表单,此项需加表单验证才能使用
|
||||
// nextTick(() => {
|
||||
// dicDialogFormRef.value.resetFields();
|
||||
// });
|
||||
}
|
||||
state.dialog.isShowDialog = true;
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
state.dialog.isShowDialog = false;
|
||||
};
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
};
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
closeDialog();
|
||||
emit('refresh');
|
||||
// if (state.dialog.type === 'add') { }
|
||||
};
|
||||
// 新增行
|
||||
const onAddRow = () => {
|
||||
state.ruleForm.list.push({
|
||||
id: Math.random(),
|
||||
label: '',
|
||||
value: '',
|
||||
});
|
||||
};
|
||||
// 删除行
|
||||
const onDelRow = (k: number) => {
|
||||
state.ruleForm.list.splice(k, 1);
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
122
src/views/admin/dict/dictItem/form.vue
Normal file
122
src/views/admin/dict/dictItem/form.vue
Normal file
@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="system-dic-dialog-container">
|
||||
<el-dialog v-model="visible" :title="dataForm.id ? $t('common.editBtn') : $t('common.addBtn')" width="60%">
|
||||
<el-form ref="dicDialogFormRef" :model="dataForm" label-width="90px" size="default">
|
||||
<el-row :gutter="35">
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20" v-if="dataForm.id">
|
||||
<el-form-item label="类型" prop="dictType">
|
||||
<el-input v-model="dataForm.dictType" clearable disabled placeholder="请输入字典名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
|
||||
<el-form-item label="数据值" prop="value">
|
||||
<el-input v-model="dataForm.value" placeholder="请输入数据值" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
|
||||
<el-form-item label="标签名" prop="label">
|
||||
<el-input v-model="dataForm.label" placeholder="请输入标签名" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
|
||||
<el-form-item label="描述" prop="description">
|
||||
<el-input v-model="dataForm.description" placeholder="请输入描述" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
|
||||
<el-form-item label="排序" prop="sortOrder">
|
||||
<el-input-number v-model="dataForm.sortOrder" placeholder="请输入排序" clearable></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
|
||||
<el-form-item label="备注信息" prop="remarks">
|
||||
<el-input v-model="dataForm.remarks" type="textarea" placeholder="请输入字典描述" maxlength="150"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" size="default">{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button type="primary" @click="onSubmit" size="default">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="dict-item-form">
|
||||
import { getItemObj, addItemObj, putItemObj } from '/@/api/admin/dict'
|
||||
import {useMessage} from "/@/hooks/message";
|
||||
|
||||
|
||||
// 定义子组件向父组件传值/事件
|
||||
const emit = defineEmits(['refresh']);
|
||||
|
||||
// 定义变量内容
|
||||
const dicDialogFormRef = ref();
|
||||
|
||||
const visible = ref(false)
|
||||
|
||||
const dataForm = reactive({
|
||||
id: '',
|
||||
dictType: '',
|
||||
value: '',
|
||||
label: '',
|
||||
description: '',
|
||||
sortOrder: '',
|
||||
remarks: '',
|
||||
})
|
||||
|
||||
|
||||
const dataRules = reactive({})
|
||||
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (row: any) => {
|
||||
dataForm.id = ''
|
||||
if (row?.id) {
|
||||
getItemObj(row.id).then(res => {
|
||||
Object.assign(dataForm,res.data)
|
||||
})
|
||||
} else {
|
||||
// 清空表单,此项需加表单验证才能使用
|
||||
nextTick(() => {
|
||||
dicDialogFormRef?.value?.resetFields();
|
||||
});
|
||||
}
|
||||
visible.value = true
|
||||
};
|
||||
|
||||
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
visible.value = false
|
||||
};
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
};
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
if (dataForm.id) {
|
||||
putItemObj(dataForm).then(() => {
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
}else{
|
||||
addItemObj(dataForm).then(() => {
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
}
|
||||
};
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
89
src/views/admin/dict/dictItem/index.vue
Normal file
89
src/views/admin/dict/dictItem/index.vue
Normal file
@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<el-drawer v-model="visible" title="字典项" size="80%">
|
||||
<el-card shadow="hover" class="layout-padding-auto">
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<el-button icon="folder-add" type="primary" class="ml10" @click="dictformRef.openDialog()">
|
||||
{{ $t('common.addBtn') }}
|
||||
</el-button>
|
||||
<right-toolbar :search='false' class="ml10" style="float: right;margin-right: 20px"
|
||||
@queryTable="getDataList"></right-toolbar>
|
||||
</div>
|
||||
<el-table :data="state.dataList" v-loading="state.loading" style="width: 100%">
|
||||
<el-table-column prop="dictType" label="类型" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="value" label="数据值" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="label" label="标签" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="sortOrder" label="排序" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="remarks" label="备注信息" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建日期" show-overflow-tooltip></el-table-column>
|
||||
|
||||
<el-table-column :label="$t('common.action')" width="150">
|
||||
<template #default="scope">
|
||||
<el-button text type="primary" @click="dictformRef.openDialog(scope.row)"> {{$t('common.editBtn') }}
|
||||
</el-button>
|
||||
<el-button text type="primary" @click="handleDelete(scope.row)">
|
||||
{{ $t('common.delBtn') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination">
|
||||
</pagination>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<dict-form ref="dictformRef" @refresh="getDataList"></dict-form>
|
||||
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="dict-item">
|
||||
|
||||
|
||||
import {BasicTableProps, useTable} from "/@/hooks/table";
|
||||
import {fetchItemList,delItemObj} from "/@/api/admin/dict";
|
||||
import {useMessage, useMessageBox} from "/@/hooks/message";
|
||||
import {useI18n} from "vue-i18n";
|
||||
|
||||
const { t } = useI18n()
|
||||
const visible = ref(false)
|
||||
const DictForm = defineAsyncComponent(() => import("./form.vue"))
|
||||
const dictformRef = ref()
|
||||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
queryForm: {
|
||||
dictId: ''
|
||||
},
|
||||
createdIsNeed: false,
|
||||
pageList: fetchItemList
|
||||
})
|
||||
const {
|
||||
getDataList,
|
||||
currentChangeHandle,
|
||||
sizeChangeHandle,
|
||||
} = useTable(state)
|
||||
|
||||
const handleDelete = (row: any) => {
|
||||
useMessageBox().confirm(`${t('common.delConfirmText')}:${row.name} ?`).then(() => {
|
||||
// 删除用户的接口
|
||||
delItemObj(row.id).then(() => {
|
||||
getDataList();
|
||||
useMessage().success(t('common.delSuccessText'))
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
})
|
||||
};
|
||||
const open = (row: any) => {
|
||||
state.queryForm.dictId = row.id
|
||||
visible.value = true
|
||||
getDataList()
|
||||
}
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
open,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
113
src/views/admin/dict/form.vue
Normal file
113
src/views/admin/dict/form.vue
Normal file
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div class="system-dic-dialog-container">
|
||||
<el-dialog v-model="visible" :title="dataForm.id ? $t('common.editBtn') : $t('common.addBtn')" width="60%">
|
||||
<el-form ref="dicDialogFormRef" :model="dataForm" label-width="90px" size="default">
|
||||
<el-row :gutter="35">
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
|
||||
<el-form-item label="类型" prop="dictType">
|
||||
<el-input v-model="dataForm.dictType" clearable placeholder="请输入字典名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
|
||||
<el-form-item label="描述" prop="description">
|
||||
<el-input v-model="dataForm.description" placeholder="请输入描述" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
|
||||
<el-form-item label="字典类型" prop="systemFlag">
|
||||
<el-radio-group v-model="dataForm.systemFlag">
|
||||
<el-radio-button :label="item.value" v-for="(item,index) in dict_type" :key="index">{{item.label}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
|
||||
<el-form-item label="备注信息" prop="remarks">
|
||||
<el-input v-model="dataForm.remarks" type="textarea" placeholder="请输入字典描述" maxlength="150"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" size="default">{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button type="primary" @click="onSubmit" size="default">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="systemDicDialog">
|
||||
import { getObj, addObj, putObj } from '/@/api/admin/dict'
|
||||
import {useDict} from "/@/hooks/dict";
|
||||
import {useMessage} from "/@/hooks/message";
|
||||
|
||||
|
||||
// 定义子组件向父组件传值/事件
|
||||
const emit = defineEmits(['refresh']);
|
||||
const { dict_type } = useDict('dict_type')
|
||||
|
||||
// 定义变量内容
|
||||
const dicDialogFormRef = ref();
|
||||
|
||||
const visible = ref(false)
|
||||
|
||||
const dataForm = reactive({
|
||||
id: '',
|
||||
dictType: '',
|
||||
description: '',
|
||||
systemFlag: '',
|
||||
remarks: '',
|
||||
})
|
||||
|
||||
|
||||
const dataRules = reactive({})
|
||||
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (type: string, row: any) => {
|
||||
if (row?.id) {
|
||||
getObj(row.id).then(res => {
|
||||
Object.assign(dataForm,res.data)
|
||||
})
|
||||
} else {
|
||||
// 清空表单,此项需加表单验证才能使用
|
||||
nextTick(() => {
|
||||
dicDialogFormRef?.value?.resetFields();
|
||||
});
|
||||
}
|
||||
visible.value = true
|
||||
};
|
||||
|
||||
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
visible.value = false
|
||||
};
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
};
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
if (dataForm.id) {
|
||||
putObj(dataForm).then(() => {
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
}else{
|
||||
addObj(dataForm).then(() => {
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
}
|
||||
};
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
@ -1,132 +1,122 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<el-card shadow="hover" class="layout-padding-auto">
|
||||
<div class="mb15">
|
||||
<el-input size="default" placeholder="请输入字典名称" style="max-width: 180px"> </el-input>
|
||||
<el-button size="default" type="primary" class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" type="success" class="ml10" @click="onOpenAddDic('add')">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增字典
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
<el-row v-show="showSearch" class="mb8">
|
||||
<el-form :model="state.queryForm" ref="queryRef" :inline="true">
|
||||
<el-form-item :label="$t('post.postName')" prop="postName">
|
||||
<el-input :placeholder="$t('post.inputpostNameTip')" v-model="state.queryForm.postName"
|
||||
style="max-width: 180px" />
|
||||
</el-form-item>
|
||||
<el-form-item class="ml2">
|
||||
<el-button icon="search" type="primary" @click="getDataList">
|
||||
{{ $t('common.queryBtn') }}
|
||||
</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<el-button icon="folder-add" type="primary" class="ml10" @click="dicDialogRef.openDialog()">
|
||||
{{ $t('common.addBtn') }}
|
||||
</el-button>
|
||||
<el-button :disabled="multiple" icon="Delete" type="primary" class="ml10"
|
||||
v-auth="'sys_dict_del'" @click="handleDelete(undefined)">
|
||||
{{ $t('common.delBtn') }}
|
||||
</el-button>
|
||||
<right-toolbar v-model:showSearch="showSearch" class="ml10" style="float: right;margin-right: 20px"
|
||||
@queryTable="getDataList"></right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-table :data="state.dataList" v-loading="state.loading" style="width: 100%">
|
||||
<el-table-column type="index" label="序号" width="50" />
|
||||
<el-table-column prop="dicName" label="字典名称" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="fieldName" label="字段名" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="status" label="字典状态" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status">启用</el-tag>
|
||||
<el-tag type="info" v-else>禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="describe" label="字典描述" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="dictType" label="类型" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="systemFlag" label="字典类型" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<dict-tag :options="dict_type" :value="scope.row.systemFlag"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remarks" label="备注信息" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
|
||||
<el-table-column label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<el-button text type="primary" @click="onOpenEditDic('edit', scope.row)">修改</el-button>
|
||||
<el-button text type="primary" @click="onRowDel(scope.row)">删除</el-button>
|
||||
<el-button text type="primary" @click="onOpenEditDic('edit', scope.row)">修改</el-button>
|
||||
<el-button text type="primary" @click="showDictITem(scope.row)">字典项</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
|
||||
</el-card>
|
||||
<DicDialog ref="dicDialogRef" @refresh="getTableData()" />
|
||||
</div>
|
||||
<DicDialog ref="dicDialogRef" @refresh="getDataList()" />
|
||||
<dict-item-dialog ref="dictItemDialogRef"></dict-item-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="systemDic">
|
||||
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
|
||||
import {BasicTableProps, useTable} from "/@/hooks/table";
|
||||
import {fetchList,delObj} from "/@/api/admin/dict";
|
||||
import {useMessage, useMessageBox} from "/@/hooks/message";
|
||||
import {useDict} from "/@/hooks/dict";
|
||||
import {useI18n} from "vue-i18n";
|
||||
const { dict_type } = useDict('dict_type')
|
||||
// 引入组件
|
||||
const DicDialog = defineAsyncComponent(() => import('/@/views/admin/dict/dialog.vue'));
|
||||
|
||||
const DicDialog = defineAsyncComponent(() => import('./form.vue'));
|
||||
const DictItemDialog = defineAsyncComponent(() => import('./dictItem/index.vue'))
|
||||
const { t } = useI18n()
|
||||
// 定义变量内容
|
||||
const dicDialogRef = ref();
|
||||
const state = reactive<SysDicState>({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
const dictItemDialogRef = ref()
|
||||
const queryRef = ref()
|
||||
const showSearch = ref(true)
|
||||
// 多选变量
|
||||
const selectObjs = ref([])
|
||||
const multiple = ref(true)
|
||||
|
||||
|
||||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
queryForm: {},
|
||||
pageList: fetchList
|
||||
})
|
||||
const {
|
||||
getDataList,
|
||||
currentChangeHandle,
|
||||
sizeChangeHandle,
|
||||
} = useTable(state)
|
||||
|
||||
// 初始化表格数据
|
||||
const getTableData = () => {
|
||||
state.tableData.loading = true;
|
||||
const data = [];
|
||||
for (let i = 0; i < 2; i++) {
|
||||
data.push({
|
||||
dicName: i === 0 ? '角色标识' : '用户性别',
|
||||
fieldName: i === 0 ? 'SYS_ROLE' : 'SYS_UERINFO',
|
||||
describe: i === 0 ? '这是角色字典' : '这是用户性别字典',
|
||||
status: true,
|
||||
createTime: new Date().toLocaleString(),
|
||||
list: [],
|
||||
});
|
||||
}
|
||||
state.tableData.data = data;
|
||||
state.tableData.total = state.tableData.data.length;
|
||||
setTimeout(() => {
|
||||
state.tableData.loading = false;
|
||||
}, 500);
|
||||
};
|
||||
// 打开新增字典弹窗
|
||||
const onOpenAddDic = (type: string) => {
|
||||
dicDialogRef.value.openDialog(type);
|
||||
};
|
||||
// 打开修改字典弹窗
|
||||
const onOpenEditDic = (type: string, row: RowDicType) => {
|
||||
const onOpenEditDic = (type: string, row: any) => {
|
||||
dicDialogRef.value.openDialog(type, row);
|
||||
};
|
||||
// 删除字典
|
||||
const onRowDel = (row: RowDicType) => {
|
||||
ElMessageBox.confirm(`此操作将永久删除字典名称:“${row.dicName}”,是否继续?`, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
getTableData();
|
||||
ElMessage.success('删除成功');
|
||||
})
|
||||
.catch(() => {});
|
||||
|
||||
const showDictITem = (row: any) => {
|
||||
dictItemDialogRef.value.open(row)
|
||||
}
|
||||
|
||||
|
||||
// 清空搜索条件
|
||||
const resetQuery = () => {
|
||||
queryRef.value.resetFields()
|
||||
getDataList()
|
||||
}
|
||||
// 删除操作
|
||||
const handleDelete = (row: any) => {
|
||||
if (!row) {
|
||||
selectObjs.value.forEach((val: any) => {
|
||||
handleDelete(val)
|
||||
});
|
||||
return
|
||||
}
|
||||
|
||||
useMessageBox().confirm(t('common.delConfirmText') + row.postId)
|
||||
.then(() => {
|
||||
delObj(row.postId).then(() => {
|
||||
getDataList();
|
||||
useMessage().success(t('common.delSuccessText'));
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
})
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val: number) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
getTableData();
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val: number) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
getTableData();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
});
|
||||
</script>
|
||||
|
@ -6,7 +6,7 @@
|
||||
<el-button icon="search" type="primary" class="ml10" @click="getDataList">
|
||||
{{ $t('common.queryBtn') }}
|
||||
</el-button>
|
||||
<el-button icon="folder-add" type="success" class="ml10" @click="onOpenAddMenu">
|
||||
<el-button icon="folder-add" type="primary" class="ml10" @click="onOpenAddMenu" v-auth="'sys_menu_add'">
|
||||
{{ $t('common.addBtn') }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user