初始化
This commit is contained in:
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" :title="dialogTitle"
|
||||
v-bind="dialogSmall" @close="close" align-center>
|
||||
<div>
|
||||
<el-form :model="formContent" ref="dialogFormRef" :rules="rules">
|
||||
<el-form-item label="字典类型" :label-width="100">
|
||||
<el-input :value="dictTypeName" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" :label-width="100" prop="name">
|
||||
<el-input v-model="formContent.name" placeholder="请输入" autocomplete="off" maxlength="32" show-word-limit/>
|
||||
</el-form-item>
|
||||
<el-form-item label="编码" :label-width="100" prop="code">
|
||||
<el-input v-model="formContent.code" placeholder="请输入" autocomplete="off" maxlength="32" show-word-limit/>
|
||||
</el-form-item>
|
||||
<el-form-item label="开启值描述" :label-width="100" >
|
||||
<el-radio-group v-model="formContent.openValue" @change="handleOpenValueChange">
|
||||
<el-radio-button label="开启" :value="1"></el-radio-button>
|
||||
<el-radio-button label="关闭" :value="0"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="值" :label-width="100" prop="value" v-if="formContent.openValue==1">
|
||||
<el-input v-model="formContent.value" placeholder="请输入" autocomplete="off"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="事件等级" :label-width="100" prop="level" v-if="false">
|
||||
<el-select v-model.number="formContent.level">
|
||||
<el-option label="普通" :value="0"/>
|
||||
<el-option label="中等" :value="1"/>
|
||||
<el-option label="严重" :value="2"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" :label-width="100">
|
||||
<el-input-number v-model="formContent.sort" :min='1' :max='999'/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<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 lang="tsx" setup>
|
||||
import {dialogSmall} from "@/utils/elementBind";
|
||||
import {addDictData, updateDictData} from "@/api/system/dictionary/dictData/index.ts";
|
||||
import {Dict} from "@/api/system/dictionary/interface";
|
||||
import {ElMessage, FormItemRule} from "element-plus";
|
||||
import {computed, Ref} from "vue";
|
||||
|
||||
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
|
||||
name: [{required: true, message: '类型名称必填！', trigger: 'blur'}],
|
||||
code: [{required: true, message: '类型编码必填！', trigger: 'blur'}],
|
||||
})
|
||||
|
||||
const dialogFormRef = ref()
|
||||
const {dialogVisible, titleType, formContent, dictTypeName} = useMetaInfo();
|
||||
|
||||
function useMetaInfo() {
|
||||
const dialogVisible = ref(false)
|
||||
const titleType = ref('add')
|
||||
const dictTypeName = ref('')
|
||||
|
||||
const formContent = ref<Dict.ResDictData>({
|
||||
id: "",
|
||||
typeId: "",
|
||||
name: "",
|
||||
code: "",
|
||||
value: "",
|
||||
//dictValue: "",
|
||||
level: 0,
|
||||
sort: 100,
|
||||
state: 1,
|
||||
openValue:0
|
||||
})
|
||||
|
||||
return {dialogVisible, titleType, formContent, dictTypeName};
|
||||
}
|
||||
|
||||
let dialogTitle = computed(() => {
|
||||
return titleType.value === 'add' ? '新增字典数据' : '编辑字典数据'
|
||||
})
|
||||
|
||||
const resetFormContent = () => {
|
||||
formContent.value = {
|
||||
id: "",
|
||||
typeId: "",
|
||||
name: "",
|
||||
code: "",
|
||||
value: "",
|
||||
//dictValue: "",
|
||||
level: 0,
|
||||
sort: 100,
|
||||
state: 1,
|
||||
openValue:0
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const handleOpenValueChange = ()=> {
|
||||
if(formContent.value.openValue == 0){
|
||||
formContent.value.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
dialogVisible.value = false
|
||||
resetFormContent()
|
||||
dialogFormRef.value?.resetFields()
|
||||
}
|
||||
const open = (sign: string, typeId: string, name: string, data: Dict.ResDictData) => {
|
||||
// 重置表单
|
||||
dialogFormRef.value?.resetFields()
|
||||
resetFormContent()
|
||||
|
||||
titleType.value = sign
|
||||
formContent.value.typeId = typeId
|
||||
dictTypeName.value = name
|
||||
dialogVisible.value = true
|
||||
if (data.id) {
|
||||
formContent.value = {...data}
|
||||
//formContent.value.dictValue = data.value
|
||||
}
|
||||
}
|
||||
|
||||
const save = () => {
|
||||
try {
|
||||
dialogFormRef.value?.validate(async (valid: boolean) => {
|
||||
if(formContent.value.openValue === 0){
|
||||
formContent.value.value = null
|
||||
}
|
||||
|
||||
if (valid) {
|
||||
if (formContent.value.id) {
|
||||
await updateDictData(formContent.value)
|
||||
} else {
|
||||
await addDictData(formContent.value)
|
||||
}
|
||||
ElMessage.success({message: `${dialogTitle.value}成功！`})
|
||||
close()
|
||||
await props.refreshTable!()
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
console.error('验证过程中出现错误', err)
|
||||
}
|
||||
}
|
||||
|
||||
// 对外映射
|
||||
defineExpose({open})
|
||||
const props = defineProps<{
|
||||
refreshTable: (() => Promise<void>) | undefined;
|
||||
}>()
|
||||
</script>
|
||||
194
frontend/src/views/system/dictionary/dictData/index.vue
Normal file
194
frontend/src/views/system/dictionary/dictData/index.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="table-box"
|
||||
v-model="dialogVisible"
|
||||
top="114px"
|
||||
:style="{ height: height + 'px', maxHeight: height + 'px', overflow: 'hidden' }"
|
||||
title="字典数据"
|
||||
:width="width"
|
||||
:modal="false"
|
||||
>
|
||||
<div
|
||||
class="table-box"
|
||||
:style="{ height: height - 64 + 'px', maxHeight: height - 64 + 'px', overflow: 'hidden' }"
|
||||
>
|
||||
<ProTable ref="proTable" :columns="columns" :request-api="getDictDataListByTypeId" :initParam="initParam">
|
||||
<template #tableHeader="scope">
|
||||
<el-button v-auth.dict="'show_add'" type="primary" :icon="CirclePlus" @click="openDialog('add')">
|
||||
新增
|
||||
</el-button>
|
||||
<el-button v-auth.dict="'show_export'" type="primary" :icon="Download" plain @click="downloadFile">
|
||||
导出
|
||||
</el-button>
|
||||
<el-button
|
||||
v-auth.dict="'show_delete'"
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
plain
|
||||
:disabled="!scope.isSelected"
|
||||
@click="batchDelete(scope.selectedListIds)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<template #operation="scope">
|
||||
<el-button
|
||||
v-auth.dict="'show_edit'"
|
||||
type="primary"
|
||||
link
|
||||
:icon="EditPen"
|
||||
@click="openDialog('edit', scope.row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-auth.dict="'show_delete'"
|
||||
type="primary"
|
||||
link
|
||||
:icon="Delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</ProTable>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<DataPopup :refresh-table="proTable?.getTableList" ref="dataPopup" />
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx" name="dictData">
|
||||
import { CirclePlus, Delete, Download, EditPen } from '@element-plus/icons-vue'
|
||||
import { type Dict } from '@/api/system/dictionary/interface'
|
||||
import { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
|
||||
import { useHandleData } from '@/hooks/useHandleData'
|
||||
import { deleteDictData, exportDictData, getDictDataListByTypeId } from '@/api/system/dictionary/dictData/index'
|
||||
import { useDownload } from '@/hooks/useDownload'
|
||||
|
||||
defineOptions({
|
||||
name: 'dict'
|
||||
})
|
||||
const proTable = ref<ProTableInstance>()
|
||||
const dialogVisible = ref(false)
|
||||
//字典数据所属的字典类型Id
|
||||
const dictTypeId = ref('')
|
||||
const dictTypeName = ref('')
|
||||
|
||||
const initParam = reactive({ typeId: '' })
|
||||
|
||||
const dataPopup = ref()
|
||||
|
||||
const props = defineProps({
|
||||
width: {
|
||||
type: Number,
|
||||
default: 800
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 744
|
||||
}
|
||||
})
|
||||
|
||||
const columns = reactive<ColumnProps<Dict.ResDictData>[]>([
|
||||
{ type: 'selection', fixed: 'left', width: 70 },
|
||||
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
|
||||
{
|
||||
prop: 'name',
|
||||
label: '名称',
|
||||
minWidth: 180,
|
||||
search: {
|
||||
el: 'input'
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: '编码',
|
||||
minWidth: 180,
|
||||
search: {
|
||||
el: 'input'
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'value',
|
||||
label: '值',
|
||||
minWidth: 180,
|
||||
render: scope => {
|
||||
if (scope.row.openValue === 0 || scope.row.value === null || scope.row.value === '') {
|
||||
return <span>/</span> // 使用 JSX 返回 VNode
|
||||
}
|
||||
return <span>{scope.row.value}</span> // 使用 JSX 返回 VNode
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'level',
|
||||
label: '事件等级',
|
||||
minWidth: 180,
|
||||
isShow: false,
|
||||
render: scope => {
|
||||
return (
|
||||
<>
|
||||
{
|
||||
<el-tag type={scope.row.level === 0 ? 'info' : scope.row.level === 1 ? 'warning' : 'danger'}>
|
||||
{scope.row.level === 0 ? '普通' : scope.row.level === 1 ? '中等' : '严重'}
|
||||
</el-tag>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '创建时间',
|
||||
minWidth: 180
|
||||
},
|
||||
{
|
||||
prop: 'operation',
|
||||
label: '操作',
|
||||
fixed: 'right',
|
||||
width: 200
|
||||
}
|
||||
])
|
||||
|
||||
const open = (row: Dict.ResDictType) => {
|
||||
dialogVisible.value = true
|
||||
dictTypeId.value = row.id
|
||||
dictTypeName.value = row.name
|
||||
initParam.typeId = row.id
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
|
||||
// 打开 dialog(新增、查看、编辑)
|
||||
const openDialog = (titleType: string, row: Partial<Dict.ResDictData> = {}) => {
|
||||
dataPopup.value?.open(titleType, dictTypeId.value, dictTypeName.value, row)
|
||||
}
|
||||
|
||||
// 批量删除字典数据
|
||||
const batchDelete = async (id: string[]) => {
|
||||
await useHandleData(deleteDictData, id, '删除所选字典数据')
|
||||
proTable.value?.clearSelection()
|
||||
proTable.value?.getTableList()
|
||||
}
|
||||
|
||||
// 删除字典数据
|
||||
const handleDelete = async (params: Dict.ResDictData) => {
|
||||
await useHandleData(deleteDictData, [params.id], `删除【${params.name}】字典数据`)
|
||||
proTable.value?.getTableList()
|
||||
}
|
||||
|
||||
const downloadFile = async () => {
|
||||
ElMessageBox.confirm('确认导出字典数据?', '温馨提示', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消'
|
||||
}).then(() =>
|
||||
useDownload(
|
||||
exportDictData,
|
||||
'字典数据导出数据',
|
||||
{ typeId: dictTypeId.value, ...proTable.value?.searchParam },
|
||||
false
|
||||
)
|
||||
)
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<el-dialog v-model='dialogVisible' :title='dialogTitle' v-bind='dialogSmall' @close="close" align-center>
|
||||
<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' maxlength="32" show-word-limit/>
|
||||
</el-form-item>
|
||||
<el-form-item label='排序' :label-width='100'>
|
||||
<el-input-number v-model='formContent.sort' :min='1' :max='999' />
|
||||
</el-form-item>
|
||||
<el-form-item label='编码' :label-width='100' prop='code'>
|
||||
<el-input v-model='formContent.code' placeholder='请输入字典编码' autocomplete='off' maxlength="32" show-word-limit/>
|
||||
</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 { type ResultData } from '@/api/interface';
|
||||
// 定义弹出组件元信息
|
||||
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: '',
|
||||
state: 0,
|
||||
children: [],
|
||||
})
|
||||
return { dialogVisible, titleType, formContent }
|
||||
}
|
||||
|
||||
const { dialogVisible, titleType, formContent } = useMetaInfo()
|
||||
// 清空formContent
|
||||
const resetFormContent = () => {
|
||||
formContent.value = {
|
||||
id: '',
|
||||
pid: '0',
|
||||
pids: '0',
|
||||
name: '',
|
||||
code: '',
|
||||
sort: 100,
|
||||
remark: '',
|
||||
state: 0,
|
||||
children: [],
|
||||
}
|
||||
}
|
||||
|
||||
let dialogTitle = computed(() => {
|
||||
return titleType.value === 'add' ? '新增字典类型' : '编辑字典类型'
|
||||
})
|
||||
|
||||
// 定义表单校验规则
|
||||
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
|
||||
name: [{ required: true, message: '字典名称必填！', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '编码必填！', trigger: 'blur' }],
|
||||
})
|
||||
|
||||
// 关闭弹窗
|
||||
const close = () => {
|
||||
dialogVisible.value = false
|
||||
// 清空dialogForm中的值
|
||||
resetFormContent()
|
||||
// 重置表单
|
||||
dialogFormRef.value?.resetFields()
|
||||
}
|
||||
|
||||
// 保存数据
|
||||
const save = () => {
|
||||
try {
|
||||
dialogFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
if (formContent.value.id) {
|
||||
let result: ResultData<unknown>;
|
||||
if( titleType.value == 'add'){
|
||||
await addDictTree(formContent.value);
|
||||
}else{
|
||||
await updateDictTree(formContent.value);
|
||||
}
|
||||
ElMessage.success({ message: `${dialogTitle.value}成功！` })
|
||||
} else {
|
||||
await addDictTree(formContent.value);
|
||||
ElMessage.success({ message: `${dialogTitle.value}成功！` })
|
||||
|
||||
}
|
||||
close()
|
||||
// 刷新表格
|
||||
await props.refreshTable!()
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
console.error('验证过程中出现错误', err)
|
||||
}
|
||||
}
|
||||
|
||||
// 打开弹窗，可能是新增，也可能是编辑
|
||||
const open = (sign: string, data: Dict.ResDictTree) => {
|
||||
// 重置表单
|
||||
dialogFormRef.value?.resetFields()
|
||||
titleType.value = sign
|
||||
dialogVisible.value = true
|
||||
if (data.id) {
|
||||
if(sign == 'add'){
|
||||
resetFormContent()
|
||||
formContent.value.pid = data.id
|
||||
}else{
|
||||
formContent.value = { ...data }
|
||||
}
|
||||
} else {
|
||||
resetFormContent()
|
||||
}
|
||||
}
|
||||
|
||||
// 对外映射
|
||||
defineExpose({ open })
|
||||
const props = defineProps<{
|
||||
refreshTable: (() => Promise<void>) | undefined;
|
||||
}>()
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
105
frontend/src/views/system/dictionary/dictTree/index.vue
Normal file
105
frontend/src/views/system/dictionary/dictTree/index.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class='table-box' ref='popupBaseView'>
|
||||
<ProTable
|
||||
ref='proTable'
|
||||
:columns='columns'
|
||||
:request-api='getDictTreeByName'
|
||||
:pagination="false"
|
||||
|
||||
>
|
||||
<template #tableHeader>
|
||||
<el-button v-auth.dictTree="'add'" type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
|
||||
</template>
|
||||
|
||||
<template #operation='scope'>
|
||||
<el-button v-auth.dictTree="'add'" type='primary' link :icon='CirclePlus' @click="openDialog('add',scope.row)">新增</el-button>
|
||||
<el-button v-auth.dictTree="'edit'" type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button>
|
||||
<el-button v-auth.dictTree="'delete'" 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} 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 {
|
||||
getDictTreeByName,
|
||||
deleteDictTree,
|
||||
} from '@/api/system/dictionary/dictTree'
|
||||
import { reactive, ref } from 'vue'
|
||||
defineOptions({
|
||||
name: 'dictTree'
|
||||
})
|
||||
const dictStore = useDictStore()
|
||||
|
||||
const proTable = ref<ProTableInstance>()
|
||||
const treePopup = ref()
|
||||
|
||||
const columns = reactive<ColumnProps<Dict.ResDictTree>[]>([
|
||||
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
|
||||
{
|
||||
prop: 'name',
|
||||
label: '字典名称',
|
||||
align:'left',
|
||||
headerAlign: 'center',
|
||||
search: { el: 'input' },
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: '编码',
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: '描述',
|
||||
},
|
||||
{
|
||||
prop: 'sort',
|
||||
label: '排序',
|
||||
width:70,
|
||||
|
||||
},
|
||||
{
|
||||
prop: 'state',
|
||||
label: '状态',
|
||||
minWidth:30,
|
||||
isShow:false,
|
||||
render: scope => {
|
||||
return (
|
||||
<el-tag type={scope.row.state === 0 ? 'success' : (scope.row.state === 1 ? 'warning' : 'danger')}>
|
||||
{scope.row.state === 0 ? '正常' : (scope.row.state === 1 ? '停用' : '删除')}
|
||||
</el-tag>
|
||||
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'operation',
|
||||
label: '操作',
|
||||
fixed: 'right',
|
||||
width:250,
|
||||
|
||||
},
|
||||
])
|
||||
|
||||
// 打开 drawer(新增、编辑)
|
||||
const openDialog = (titleType: string, row: Partial<Dict.ResDictTree> = {}) => {
|
||||
treePopup.value?.open(titleType, row)
|
||||
}
|
||||
|
||||
|
||||
// 删除字典类型
|
||||
const handleDelete = async (params: Dict.ResDictTree) => {
|
||||
await useHandleData(deleteDictTree, params, `删除【${params.name}】树形字典类型`)
|
||||
proTable.value?.getTableList()
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<el-dialog v-model='dialogVisible' :title='dialogTitle' v-bind='dialogSmall' @close="close" align-center>
|
||||
<div>
|
||||
<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' maxlength="32" show-word-limit/>
|
||||
</el-form-item>
|
||||
<el-form-item label='类型编码' :label-width='100' prop='code'>
|
||||
<el-input v-model='formContent.code' placeholder='请输入' autocomplete='off' maxlength="32" show-word-limit/>
|
||||
</el-form-item>
|
||||
<el-form-item label="开启等级" :label-width="100" v-if="false">
|
||||
<el-radio-group v-model="formContent.openLevel" >
|
||||
<el-radio-button label="开启" :value="1"></el-radio-button>
|
||||
<el-radio-button label="关闭" :value="0"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="开启描述" :label-width="100" v-if="false">
|
||||
<el-radio-group v-model="formContent.openDescribe" >
|
||||
<el-radio-button label="开启" :value="1"></el-radio-button>
|
||||
<el-radio-button label="关闭" :value="0"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label='排序' :label-width='100'>
|
||||
<el-input-number v-model='formContent.sort' :min='1' :max='999'/>
|
||||
</el-form-item>
|
||||
<el-form-item label='备注' :label-width='100'>
|
||||
<el-input v-model='formContent.remark' placeholder='请输入备注' autocomplete='off' :rows='2'
|
||||
type='textarea' />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<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 { Dict } from '@/api/system/dictionary/interface'
|
||||
import { FormItemRule } from 'element-plus'
|
||||
import { addDictType, updateDictType } from '@/api/system/dictionary/dictType'
|
||||
|
||||
// 定义弹出组件元信息
|
||||
const dialogFormRef = ref()
|
||||
|
||||
|
||||
function useMetaInfo() {
|
||||
const dialogVisible = ref(false)
|
||||
const titleType = ref('add')
|
||||
const formContent = ref<Dict.ResDictType>({
|
||||
id: '',
|
||||
name: '',
|
||||
code: '',
|
||||
sort: 100,
|
||||
openLevel: 0,
|
||||
openDescribe: 0,
|
||||
remark: '',
|
||||
state: 1,
|
||||
})
|
||||
return { dialogVisible, titleType, formContent }
|
||||
}
|
||||
|
||||
const { dialogVisible, titleType, formContent } = useMetaInfo()
|
||||
|
||||
// 清空formContent
|
||||
const resetFormContent = () => {
|
||||
formContent.value = {
|
||||
id: '',
|
||||
name: '',
|
||||
code: '',
|
||||
sort: 100,
|
||||
openLevel: 0,
|
||||
openDescribe: 0,
|
||||
remark: '',
|
||||
state: 1,
|
||||
}
|
||||
}
|
||||
|
||||
let dialogTitle = computed(() => {
|
||||
return titleType.value === 'add' ? '新增字典类型' : '编辑字典类型'
|
||||
})
|
||||
|
||||
// 定义表单校验规则
|
||||
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
|
||||
name: [{ required: true, message: '类型名称必填！', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '类型编码必填！', trigger: 'blur' }],
|
||||
})
|
||||
|
||||
|
||||
// 关闭弹窗
|
||||
const close = () => {
|
||||
dialogVisible.value = false
|
||||
// 清空dialogForm中的值
|
||||
resetFormContent()
|
||||
// 重置表单
|
||||
dialogFormRef.value?.resetFields()
|
||||
}
|
||||
|
||||
// 保存数据
|
||||
const save = () => {
|
||||
try {
|
||||
dialogFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
if (formContent.value.id) {
|
||||
await updateDictType(formContent.value)
|
||||
} else {
|
||||
await addDictType(formContent.value)
|
||||
}
|
||||
ElMessage.success({ message: `${dialogTitle.value}成功！` })
|
||||
close()
|
||||
// 刷新表格
|
||||
await props.refreshTable!()
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
console.error('验证过程中出现错误', err)
|
||||
}
|
||||
}
|
||||
|
||||
// 打开弹窗，可能是新增，也可能是编辑
|
||||
const open = (sign: string, data: Dict.ResDictType) => {
|
||||
// 重置表单
|
||||
dialogFormRef.value?.resetFields()
|
||||
titleType.value = sign
|
||||
dialogVisible.value = true
|
||||
if (data.id) {
|
||||
formContent.value = { ...data }
|
||||
} else {
|
||||
resetFormContent()
|
||||
}
|
||||
}
|
||||
|
||||
// 对外映射
|
||||
defineExpose({ open })
|
||||
const props = defineProps<{
|
||||
refreshTable: (() => Promise<void>) | undefined;
|
||||
}>()
|
||||
|
||||
</script>
|
||||
139
frontend/src/views/system/dictionary/dictType/index.vue
Normal file
139
frontend/src/views/system/dictionary/dictType/index.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div class="table-box" ref="popupBaseView">
|
||||
<ProTable ref="proTable" :columns="columns" :request-api="getDictTypeList">
|
||||
<template #tableHeader="scope">
|
||||
<el-button v-auth.dict="'add'" type="primary" :icon="CirclePlus" @click="openDialog('add')">
|
||||
新增
|
||||
</el-button>
|
||||
<el-button v-auth.dict="'export'" type="primary" :icon="Download" plain @click="downloadFile()">
|
||||
导出
|
||||
</el-button>
|
||||
<el-button
|
||||
v-auth.dict="'delete'"
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
plain
|
||||
:disabled="!scope.isSelected"
|
||||
@click="batchDelete(scope.selectedListIds)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<template #operation="scope">
|
||||
<el-button v-auth.dict="'show'" type="primary" link :icon="View" @click="toDictData(scope.row)">
|
||||
查看
|
||||
</el-button>
|
||||
<el-button
|
||||
v-auth.dict="'edit'"
|
||||
type="primary"
|
||||
link
|
||||
:icon="EditPen"
|
||||
@click="openDialog('edit', scope.row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button v-auth.dict="'delete'" type="primary" link :icon="Delete" @click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</ProTable>
|
||||
</div>
|
||||
<DictData :width="viewWidth" :height="viewHeight" ref="openView" />
|
||||
<TypePopup :refresh-table="proTable?.getTableList" ref="typePopup" />
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx" name="dict">
|
||||
import { CirclePlus, Delete, Download, EditPen, View } from '@element-plus/icons-vue'
|
||||
import { type Dict } from '@/api/system/dictionary/interface'
|
||||
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
|
||||
import DictData from '@/views/system/dictionary/dictData/index.vue'
|
||||
import { useHandleData } from '@/hooks/useHandleData'
|
||||
import { useViewSize } from '@/hooks/useViewSize'
|
||||
import { useDownload } from '@/hooks/useDownload'
|
||||
import { deleteDictType, exportDictType, getDictTypeList } from '@/api/system/dictionary/dictType'
|
||||
import { reactive, ref } from 'vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'dict'
|
||||
})
|
||||
const { popupBaseView, viewWidth, viewHeight } = useViewSize()
|
||||
|
||||
const proTable = ref<ProTableInstance>()
|
||||
const typePopup = ref()
|
||||
const openView = ref()
|
||||
|
||||
const columns = reactive<ColumnProps<Dict.ResDictType>[]>([
|
||||
{ type: 'selection', fixed: 'left', width: 70 },
|
||||
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
|
||||
{
|
||||
prop: 'name',
|
||||
label: '类型名称',
|
||||
minWidth: 180,
|
||||
search: {
|
||||
el: 'input'
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: '类型编码',
|
||||
minWidth: 220,
|
||||
search: {
|
||||
el: 'input'
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: '描述',
|
||||
minWidth: 250
|
||||
},
|
||||
{
|
||||
prop: 'sort',
|
||||
label: '排序',
|
||||
minWidth: 70
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '创建时间',
|
||||
minWidth: 180
|
||||
},
|
||||
{
|
||||
prop: 'operation',
|
||||
label: '操作',
|
||||
fixed: 'right',
|
||||
width: 250
|
||||
}
|
||||
])
|
||||
|
||||
// 打开 drawer(新增、编辑)
|
||||
const openDialog = (titleType: string, row: Partial<Dict.ResDictType> = {}) => {
|
||||
typePopup.value?.open(titleType, row)
|
||||
}
|
||||
|
||||
// 批量删除字典类型
|
||||
const batchDelete = async (id: string[]) => {
|
||||
await useHandleData(deleteDictType, id, '删除所选字典类型')
|
||||
proTable.value?.clearSelection()
|
||||
proTable.value?.getTableList()
|
||||
}
|
||||
|
||||
// 删除字典类型
|
||||
const handleDelete = async (params: Dict.ResDictType) => {
|
||||
await useHandleData(deleteDictType, [params.id], `删除【${params.name}】字典类型`)
|
||||
proTable.value?.getTableList()
|
||||
}
|
||||
|
||||
//查看字典类型包含的字典数据
|
||||
const toDictData = (row: Dict.ResDictType) => {
|
||||
openView.value.open(row)
|
||||
}
|
||||
|
||||
// 导出字典类型列表
|
||||
const downloadFile = async () => {
|
||||
ElMessageBox.confirm('确认导出字典类型数据?', '温馨提示', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消'
|
||||
}).then(() => useDownload(exportDictType, '字典类型导出数据', proTable.value?.searchParam, false))
|
||||
}
|
||||
</script>
|
||||
185
frontend/src/views/system/versionRegister/index.vue
Normal file
185
frontend/src/views/system/versionRegister/index.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
title="程序激活"
|
||||
width="450px"
|
||||
draggable
|
||||
:close-on-click-modal="false"
|
||||
:before-close="beforeClose"
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<el-form :label-width="100" label-position="left">
|
||||
<el-form-item label="程序版本号">
|
||||
<el-text style="margin-left: 82%">{{ 'v' + versionNumber }}</el-text>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-descriptions class="mode-descriptions" title="授权模块状态" size="small"></el-descriptions>
|
||||
<el-form v-if="activationModules.length" label-position="left" :label-width="100">
|
||||
<el-form-item v-for="module in activationModules" :key="module.key" class="mode-item" :label="module.label">
|
||||
<el-tag class="activated-state" disable-transitions :type="module.permanently === 1 ? 'success' : 'danger'">
|
||||
{{ module.permanently === 1 ? '已激活' : '未激活' }}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-text v-else type="info">暂无可展示的授权模块</el-text>
|
||||
<el-row v-if="applicationCode">
|
||||
<el-descriptions class="mode-descriptions" title="设备申请码" size="small"></el-descriptions>
|
||||
<el-tooltip placement="top-end" effect="light">
|
||||
<el-input
|
||||
v-model="applicationCode"
|
||||
:rows="5"
|
||||
type="textarea"
|
||||
readonly
|
||||
resize="none"
|
||||
class="code-display"
|
||||
/>
|
||||
<template #content>
|
||||
<el-button size="small" @click="copyCode" icon="DocumentCopy">复制</el-button>
|
||||
</template>
|
||||
</el-tooltip>
|
||||
</el-row>
|
||||
<el-row v-if="applicationCode || hadActivationCode">
|
||||
<el-descriptions class="mode-descriptions" title="设备激活码" size="small"></el-descriptions>
|
||||
<el-input
|
||||
placeholder="请输入设备激活码"
|
||||
v-model="activationCode"
|
||||
:rows="5"
|
||||
resize="none"
|
||||
type="textarea"
|
||||
class="code-input"
|
||||
/>
|
||||
</el-row>
|
||||
<template #footer v-if="!activatedAll">
|
||||
<div v-if="!applicationCode && !hadActivationCode">
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="getApplicationCode">获取申请码</el-button>
|
||||
<el-button type="primary" @click="hadActivationCode = true">已有激活码</el-button>
|
||||
</div>
|
||||
<div v-if="applicationCode || hadActivationCode">
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button :disabled="!activationCode" type="primary" @click="submitActivation">激活</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { version } from '../../../../package.json'
|
||||
import { generateApplicationCode, verifyActivationCode } from '@/api/activate'
|
||||
import type { Activate } from '@/api/activate/interface'
|
||||
import { useAuthStore } from '@/stores/modules/auth'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const activateInfo = computed(() => authStore.activateInfo)
|
||||
const versionNumber = ref(version)
|
||||
const activationModules = computed<Activate.ActivationModuleStatus[]>(() => {
|
||||
return Object.keys(activateInfo.value)
|
||||
.sort()
|
||||
.map((key, index) => ({
|
||||
key,
|
||||
label: `授权模块 ${index + 1}`,
|
||||
permanently: activateInfo.value[key]?.permanently === 1 ? 1 : 0
|
||||
}))
|
||||
})
|
||||
const activatedAll = computed(() => {
|
||||
return activationModules.value.length > 0 && activationModules.value.every(module => module.permanently === 1)
|
||||
})
|
||||
const hadActivationCode = ref(false)
|
||||
const applicationCode = ref('')
|
||||
const activationCode = ref('')
|
||||
const dialogVisible = ref(false)
|
||||
// 获取申请码
|
||||
const getApplicationCode = async () => {
|
||||
const res = await generateApplicationCode()
|
||||
if (res.code == 'A0000') {
|
||||
applicationCode.value = res.data as string
|
||||
}
|
||||
}
|
||||
// 复制申请码
|
||||
const copyCode = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(applicationCode.value)
|
||||
ElMessage.success('已复制到剪贴板')
|
||||
} catch {
|
||||
ElMessage.error('复制失败，请手动选择内容')
|
||||
}
|
||||
}
|
||||
const resetDialogState = () => {
|
||||
hadActivationCode.value = false
|
||||
activationCode.value = ''
|
||||
applicationCode.value = ''
|
||||
}
|
||||
const openDialog = () => {
|
||||
resetDialogState()
|
||||
dialogVisible.value = true
|
||||
}
|
||||
const beforeClose = (done: Function) => {
|
||||
resetDialogState()
|
||||
done()
|
||||
}
|
||||
const cancel = () => {
|
||||
resetDialogState()
|
||||
dialogVisible.value = false
|
||||
}
|
||||
const submitActivation = async () => {
|
||||
const res = await verifyActivationCode(activationCode.value)
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage.success('激活成功')
|
||||
await authStore.setActivateInfo()
|
||||
window.location.reload()
|
||||
} else {
|
||||
ElMessage.error(res.message)
|
||||
}
|
||||
}
|
||||
defineExpose({ openDialog })
|
||||
</script>
|
||||
<style scoped>
|
||||
.activated-state {
|
||||
margin-left: 80%;
|
||||
}
|
||||
.code-display,
|
||||
.code-input {
|
||||
font-family: consolas, sans-serif;
|
||||
}
|
||||
:deep(.el-tag) {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
:deep(.el-divider__text) {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
.mode-descriptions {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
margin-top: 15px;
|
||||
}
|
||||
:deep(.el-form-item) {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 4px;
|
||||
padding: 0 10px !important;
|
||||
margin-bottom: 10px !important;
|
||||
margin-right: 0 !important;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
:deep(.el-divider--horizontal) {
|
||||
margin: 10px 0 !important;
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
.mode-item {
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
.mode-item:hover {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user