微调
This commit is contained in:
sjl
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<el-dialog v-model='dialogVisible' :title='dialogTitle' v-bind='dialogSmall' @close="close">
|
||||
<el-form :model='formContent' ref='dialogFormRef' :rules='rules' >
|
||||
<el-form-item label='字典名称' :label-width='100' prop='name'>
|
||||
<el-input v-model='formContent.name' placeholder='请输入字典名称' autocomplete='off' />
|
||||
</el-form-item>
|
||||
<el-form-item label='序号' :label-width='100'>
|
||||
<el-input-number v-model='formContent.sort' :min="0" controls-position="right" style="width: 300px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label='编码' :label-width='100' prop='code'>
|
||||
<el-input v-model='formContent.code' placeholder='请输入字典编码' autocomplete='off' />
|
||||
</el-form-item>
|
||||
<el-form-item label='描述' :label-width='100' prop='remark'>
|
||||
<el-input v-model='formContent.remark' placeholder='请输入字典描述' autocomplete='off' :rows="2"
|
||||
type="textarea"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class='dialog-footer'>
|
||||
<el-button @click='close()'>取消</el-button>
|
||||
<el-button type='primary' @click='save()'>
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
import { dialogSmall } from '@/utils/elementBind'
|
||||
import { type Dict } from '@/api/system/dictionary/interface'
|
||||
import { ElMessage, type FormItemRule } from 'element-plus'
|
||||
import { addDictTree, updateDictTree } from '@/api/system/dictionary/dictTree'
|
||||
import { computed, type Ref, ref } from 'vue';
|
||||
import { useDictStore } from '@/stores/modules/dict'
|
||||
const dictStore = useDictStore()
|
||||
const selectedStatMethods = ref<string[]>([])
|
||||
// 定义弹出组件元信息
|
||||
const dialogFormRef = ref()
|
||||
function useMetaInfo() {
|
||||
const dialogVisible = ref(false)
|
||||
const titleType = ref('add')
|
||||
const formContent = ref<Dict.ResDictTree>({
|
||||
id: '',
|
||||
pid: '',
|
||||
pids: '',
|
||||
name: '',
|
||||
code: ' ',
|
||||
sort: 100,
|
||||
remark: '',
|
||||
status: 1,
|
||||
children: [],
|
||||
})
|
||||
return { dialogVisible, titleType, formContent }
|
||||
}
|
||||
|
||||
const { dialogVisible, titleType, formContent } = useMetaInfo()
|
||||
// 清空formContent
|
||||
const resetFormContent = () => {
|
||||
formContent.value = {
|
||||
id: '',
|
||||
pid: '',
|
||||
pids: '',
|
||||
name: '',
|
||||
code: ' ',
|
||||
sort: 100,
|
||||
remark: '',
|
||||
status: 1,
|
||||
children: [],
|
||||
}
|
||||
}
|
||||
|
||||
let dialogTitle = computed(() => {
|
||||
return titleType.value === 'add' ? '新增字典类型' : '编辑字典类型'
|
||||
})
|
||||
|
||||
// 定义表单校验规则
|
||||
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
|
||||
dataType: [{ required: true, message: '数据模型必选！', trigger: 'change' }],
|
||||
name: [{ required: true, message: '指标名称必填！', trigger: 'blur' }],
|
||||
})
|
||||
|
||||
// 关闭弹窗
|
||||
const close = () => {
|
||||
dialogVisible.value = false
|
||||
// 清空dialogForm中的值
|
||||
resetFormContent()
|
||||
// 重置表单
|
||||
dialogFormRef.value?.resetFields()
|
||||
selectedStatMethods.value = []
|
||||
}
|
||||
|
||||
// 保存数据
|
||||
const save = () => {
|
||||
try {
|
||||
dialogFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
if (formContent.value.id) {
|
||||
const result = await updateDictTree(formContent.value);
|
||||
if(result.code != 'A0000'){
|
||||
ElMessage.error({ message: result.message})
|
||||
}else{
|
||||
ElMessage.success({ message: `${dialogTitle.value}成功！` })
|
||||
}
|
||||
|
||||
} else {
|
||||
const result = await addDictTree(formContent.value);
|
||||
if(result.code != 'A0000'){
|
||||
ElMessage.error({ message: result.message})
|
||||
}else{
|
||||
ElMessage.success({ message: `${dialogTitle.value}成功！` })
|
||||
}
|
||||
}
|
||||
close()
|
||||
// 刷新表格
|
||||
await props.refreshTable!()
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
console.error('验证过程中出现错误', err)
|
||||
}
|
||||
}
|
||||
|
||||
// 打开弹窗，可能是新增，也可能是编辑
|
||||
const open = (sign: string, data: Dict.ResDictTree) => {
|
||||
titleType.value = sign
|
||||
dialogVisible.value = true
|
||||
if (data.id) {
|
||||
formContent.value = { ...data }
|
||||
} else {
|
||||
resetFormContent()
|
||||
}
|
||||
}
|
||||
|
||||
// 对外映射
|
||||
defineExpose({ open })
|
||||
const props = defineProps<{
|
||||
refreshTable: (() => Promise<void>) | undefined;
|
||||
}>()
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
85
frontend/src/views/system/dictionary/dictTree/index.vue
Normal file
85
frontend/src/views/system/dictionary/dictTree/index.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class='table-box' ref='popupBaseView'>
|
||||
<ProTable
|
||||
ref='proTable'
|
||||
:columns='columns'
|
||||
:request-api='getDictTreeList'
|
||||
>
|
||||
<template #tableHeader>
|
||||
<el-button type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
|
||||
</template>
|
||||
|
||||
<template #operation='scope'>
|
||||
<el-button type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
|
||||
<el-button type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button>
|
||||
<el-button type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button>
|
||||
</template>
|
||||
</ProTable>
|
||||
</div>
|
||||
<TreePopup :refresh-table='proTable?.getTableList' ref='treePopup'/>
|
||||
</template>
|
||||
|
||||
<script setup lang='tsx' name='dict'>
|
||||
import {CirclePlus, Delete, EditPen, Download, View} from '@element-plus/icons-vue'
|
||||
import {type Dict} from '@/api/system/dictionary/interface'
|
||||
import type { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
|
||||
import TreePopup from '@/views/system/dictionary/dictTree/components/treePopup.vue'
|
||||
import {useDictStore} from '@/stores/modules/dict'
|
||||
import {useHandleData} from '@/hooks/useHandleData'
|
||||
import {
|
||||
getDictTreeList,
|
||||
deleteDictTree,
|
||||
} from '@/api/system/dictionary/dictTree'
|
||||
import { reactive, ref } from 'vue'
|
||||
|
||||
const dictStore = useDictStore()
|
||||
|
||||
const proTable = ref<ProTableInstance>()
|
||||
const treePopup = ref()
|
||||
|
||||
const columns = reactive<ColumnProps<Dict.ResDictTree>[]>([
|
||||
{
|
||||
prop: 'name',
|
||||
label: '字典名称',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: '编码',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: '描述',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
prop: 'status',
|
||||
label: '状态',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
prop: 'operation',
|
||||
label: '操作',
|
||||
fixed: 'right',
|
||||
minWidth: 200,
|
||||
},
|
||||
])
|
||||
|
||||
|
||||
// 打开 drawer(新增、编辑)
|
||||
const openDialog = (titleType: string, row: Partial<Dict.ResDictTree> = {}) => {
|
||||
treePopup.value?.open(titleType, row)
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 删除字典类型
|
||||
const handleDelete = async (params: Dict.ResDictTree) => {
|
||||
await useHandleData(deleteDictTree, [params.id], `删除【${params.name}】树形字典类型`)
|
||||
proTable.value?.getTableList()
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user