<template>
|
<!-- 左侧分类目录树，上部表格操作 card，下部 table 数据展示 -->
|
<div class="h100">
|
<el-row :gutter="8" class="h100">
|
<el-col :span="4" :xs="24" class="h100">
|
<el-card shadow="hover" class="h100" v-loading="treeLoading">
|
<!-- 目录树 -->
|
<LeftTreeByMgr
|
class="h100 left-tree-card"
|
ref="leftTreeRef"
|
:treedata="listTreeData"
|
title-name="模块列表"
|
:show-more-operate="true"
|
:show-add="true"
|
:show-sorter="true"
|
:current-node-key="currentListID"
|
:node-icon="() => 'ele-Document'"
|
:tooltip="(_, data) => data.Code"
|
@click="handleClickNode"
|
@tree-edit="openOperateModuleDialog"
|
@tree-delete="deleteCurrentModule"
|
@tree-add="openOperateModuleDialog"
|
@node-drag-end="dragNodeEnd"
|
>
|
</LeftTreeByMgr>
|
</el-card>
|
</el-col>
|
|
<el-col :span="20" :xs="24" class="flex-column h100">
|
<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
|
<!-- 查询、重置、排序、增加表单 -->
|
<el-form :inline="true" :model="typeQueryParams">
|
<el-form-item label="名称" prop="Name">
|
<el-input v-model="typeQueryParams.Name" style="width: 226.4px" placeholder="名称" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="编码" prop="Code">
|
<el-input v-model="typeQueryParams.Code" style="width: 226.4px" placeholder="编码" clearable />
|
</el-form-item>
|
|
<el-form-item>
|
<el-button type="primary" icon="ele-Search" @click="handleQueryTypeTable"> 查询 </el-button>
|
<el-button icon="ele-Refresh" @click="resetTypeQuery">重置 </el-button>
|
<el-button icon="ele-Plus" @click="openOperateTypeDialog()"> 增加 </el-button>
|
</el-form-item>
|
<el-form-item label="排序">
|
<el-switch
|
:disabled="displayTypeTableData !== typeTableData"
|
v-model="isTypeTableDrag"
|
@change="handleTypeTableDrag"
|
inline-prompt
|
active-icon="ele-Check"
|
inactive-icon="ele-Close"
|
>
|
</el-switch>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
|
<el-card class="flex-auto scroll-table-card" shadow="hover" style="margin-top: 8px">
|
<!-- 数据展示表格 -->
|
<el-table
|
v-loading="typeTableLoading"
|
ref="draggableTypeTableRef"
|
border
|
row-key="ID"
|
:row-class-name="isTypeTableDrag ? 'cursor-move' : 'cursor-pointer'"
|
:cell-style="{ textAlign: 'center' }"
|
:header-cell-style="{ textAlign: 'center' }"
|
:data="displayTypeTableData"
|
style="width: 100%"
|
highlight-current-row
|
>
|
<el-table-column prop="Name" label="名称" fixed="left" show-overflow-tooltip />
|
<el-table-column prop="Code" label="编码" show-overflow-tooltip />
|
|
<el-table-column prop="ExtendType" label="拓展类型" align="center" show-overflow-tooltip>
|
<template #default="scope">
|
<el-tag>
|
{{ EXTEND_TYPE_MAP[scope.row.ExtendType] }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="Description" label="说明" width="550" show-overflow-tooltip />
|
<el-table-column label="操作" fixed="right" show-overflow-tooltip>
|
<template #default="scope">
|
<el-button icon="ele-Edit" size="small" text type="primary" @click="openOperateTypeDialog(scope.row)">
|
编辑
|
</el-button>
|
<el-button icon="ele-Delete" size="small" text type="danger" @click="deleteCurrentTypeRow(scope.row)">
|
删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</el-col>
|
</el-row>
|
|
<!-- 增加、修改数据对话框 -->
|
<el-dialog
|
:destroy-on-close="true"
|
v-model="moduleDialogIsShow"
|
width="400"
|
:close-on-click-modal="false"
|
@closed="closeModuleDialog"
|
>
|
<template #header>
|
<div style="color: #fff">
|
<SvgIcon :name="moduleDialogHeaderIcon" :size="16" style="margin-right: 3px; display: inline; vertical-align: middle" />
|
<span> {{ moduleDialogTitle }} </span>
|
</div>
|
</template>
|
|
<el-form :model="moduleDialogFormValue" ref="moduleDialogFormRef" :rules="moduleDialogFormRules" label-width="55">
|
<el-form-item label="名称" prop="Name">
|
<el-input placeholder="请输入名称" v-model="moduleDialogFormValue.Name"></el-input>
|
</el-form-item>
|
<el-form-item label="编码" prop="Code">
|
<el-input placeholder="请输入唯一编码" v-model="moduleDialogFormValue.Code"></el-input>
|
</el-form-item>
|
<el-form-item label="说明" prop="Description">
|
<el-input placeholder="请输入说明" v-model="moduleDialogFormValue.Description" type="textarea" :rows="3" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div>
|
<el-button @click="closeModuleDialog">取 消</el-button>
|
<el-button type="primary" @click="submitModuleFormValue">确 定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
<!-- 增加、修改数据对话框 -->
|
<el-dialog :destroy-on-close="true" v-model="typeDialogIsShow" width="400" :close-on-click-modal="false" @closed="closeTypeDialog">
|
<template #header>
|
<div style="color: #fff">
|
<SvgIcon :name="typeDialogHeaderIcon" :size="16" style="margin-right: 3px; display: inline; vertical-align: middle" />
|
<span> {{ typeDialogTitle }} </span>
|
</div>
|
</template>
|
|
<el-form :model="typeDialogFormValue" ref="typeDialogFormRef" :rules="typeDialogFormRules" label-width="78">
|
<el-form-item label="名称" prop="Name">
|
<el-input placeholder="请输入名称" v-model="typeDialogFormValue.Name"></el-input>
|
</el-form-item>
|
<el-form-item label="编码" prop="Code">
|
<el-input placeholder="请输入唯一编码" v-model="typeDialogFormValue.Code"></el-input>
|
</el-form-item>
|
<el-form-item label="拓展类型" prop="ExtendType">
|
<el-select placeholder="请选择拓展类型" v-model="typeDialogFormValue.ExtendType" class="w100" filterable>
|
<el-option
|
v-for="item of Object.keys(EXTEND_TYPE_MAP)"
|
:key="item"
|
:value="parseInt(item)"
|
:label="EXTEND_TYPE_MAP[item]"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="说明" prop="Description">
|
<el-input placeholder="请输入说明" v-model="typeDialogFormValue.Description" type="textarea" :rows="3" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div>
|
<el-button @click="closeTypeDialog">取 消</el-button>
|
<el-button type="primary" @click="submitTypeFormValue">确 定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import type { PropType } from 'vue';
|
import { computed, nextTick, onMounted, ref } from 'vue';
|
import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue';
|
|
import type { AxiosRequestConfig, AxiosResponse } from 'axios';
|
import type { FormInstance, FormRules } from 'element-plus';
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
import {
|
// 系统模块
|
DeleteAModule,
|
// 系统类型
|
DeleteAType,
|
GetAllModule,
|
GetAllTypeByID,
|
GetIsExistModuleCode,
|
GetIsExistTypeCode,
|
InsertAModule,
|
InsertAType,
|
UpdateAModule,
|
UpdateAType,
|
UpdateModuleSorter,
|
UpdateTypeSorter,
|
} from '/@/api/basic/dataManage/typeManage';
|
import { useQueryTable } from '/@/hooks/useQueryTable';
|
import { updateSort, useTableSort } from '/@/hooks/useTableSort';
|
import { useValidateUniqueness } from '/@/hooks/useValidateUniqueness';
|
import { EXTEND_TYPE_MAP } from '/@/projectCom/basic/types';
|
import { deepClone } from '/@/utils/other';
|
const props = defineProps({
|
request: {
|
type: Function as PropType<(config: AxiosRequestConfig<any>) => Promise<AxiosResponse<any, any>>>,
|
},
|
});
|
//#region ====================== 左侧树数据，tree init ======================
|
const leftTreeRef = ref(null);
|
const treeLoading = ref(false);
|
const listTreeData = ref([]);
|
const currentListID = ref('');
|
const currentNode = ref(null);
|
const handleClickNode = (data) => {
|
nextTick(() => {
|
leftTreeRef.value?.treeRef.setCurrentKey(data.ID);
|
});
|
currentListID.value = data.ID;
|
currentNode.value = data;
|
getTypeTableData();
|
};
|
const getListTreeData = async (selectFirst = false) => {
|
treeLoading.value = true;
|
const res = await GetAllModule(props.request).finally(() => {
|
treeLoading.value = false;
|
});
|
if (res?.Code === 0) {
|
listTreeData.value = res.Data || [];
|
if (selectFirst) {
|
const firstListTreeNode = listTreeData.value[0];
|
if (firstListTreeNode) {
|
handleClickNode(firstListTreeNode);
|
} else {
|
typeTableData.value = [];
|
currentNode.value = null;
|
currentListID.value = null;
|
}
|
} else {
|
currentNode.value && handleClickNode(currentNode.value);
|
}
|
} else {
|
ElMessage.error('获取模块失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
};
|
//#endregion
|
//#region ====================== 获取、删除表格数据 ======================
|
const typeTableLoading = ref(false);
|
const typeTableData = ref([]);
|
const isTypeTableDrag = ref(false);
|
const getTypeTableData = async () => {
|
typeTableLoading.value = true;
|
const res = await GetAllTypeByID({ ModuleID: currentListID.value }, props.request).finally(() => {
|
typeTableLoading.value = false;
|
});
|
if (res?.Code === 0) {
|
typeTableData.value = res.Data || [];
|
} else {
|
ElMessage.error('获取系统类型失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
};
|
const deleteCurrentTypeRow = (row: any) => {
|
ElMessageBox.confirm(`确定删除系统类型：【${row.Name}】?`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(async () => {
|
const res = await DeleteAType(
|
{
|
ID: row.ID,
|
},
|
props.request
|
);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
ElMessage.success('删除系统类型成功');
|
getTypeTableData();
|
} else {
|
ElMessage.error('删除系统类型失败');
|
}
|
} else {
|
ElMessage.error('删除系统类型失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
});
|
};
|
//#endregion
|
|
//#region ====================== 搜索表格，对表格排序 ======================
|
const typeQueryParams = ref({
|
Name: '',
|
Code: '',
|
});
|
const { handleDragStatus: handleTypeTableDrag, draggableTableRef: draggableTypeTableRef } = useTableSort(
|
typeTableData,
|
UpdateTypeSorter,
|
getTypeTableData,
|
undefined,
|
false,
|
props.request
|
);
|
|
const {
|
resetQuery: resetTypeQuery,
|
handleQueryTable: handleQueryTypeTable,
|
displayTableData: displayTypeTableData,
|
} = useQueryTable(typeTableData, typeQueryParams, getTypeTableData);
|
//#endregion
|
|
//#region ====================== 增加、修改表格记录操作, dialog init======================
|
const isEditTypeDialog = ref(false);
|
const typeDialogTitle = computed(() => {
|
return isEditTypeDialog.value ? '修改系统类型' : '添加系统类型';
|
});
|
const typeDialogHeaderIcon = computed(() => {
|
return isEditTypeDialog.value ? 'ele-Edit' : 'ele-Plus';
|
});
|
const typeDialogFormValue = ref({
|
Name: '',
|
Code: '',
|
}) as any;
|
const typeDialogIsShow = ref(false);
|
const typeDialogFormRef = ref<FormInstance>(null);
|
const typeInitialCode = ref('');
|
const { uniquenessValidator: typeCodeValidator } = useValidateUniqueness(
|
GetIsExistTypeCode,
|
typeInitialCode,
|
'编码',
|
'Code',
|
undefined,
|
false,
|
props.request
|
);
|
|
const typeDialogFormRules = ref<FormRules>({
|
Name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
Code: [{ required: true, validator: typeCodeValidator as any, trigger: 'blur' }],
|
ExtendType: [{ required: true, message: '请选择拓展类型', trigger: 'blur' }],
|
});
|
const openOperateTypeDialog = (row?) => {
|
if (!currentListID.value) {
|
return ElMessage.warning('请先选择模块！');
|
}
|
if (row) {
|
isEditTypeDialog.value = true;
|
const { ID, Name, Code, Description, ExtendType } = row;
|
typeInitialCode.value = Code;
|
typeDialogFormValue.value = deepClone({ ID, Name, Code, Description, ExtendType });
|
} else {
|
isEditTypeDialog.value = false;
|
typeInitialCode.value = '';
|
|
typeDialogFormValue.value = { ModuleID: currentListID.value, Name: '', Code: '', Description: '', ExtendType: null };
|
}
|
typeDialogIsShow.value = true;
|
};
|
|
const closeTypeDialog = () => {
|
typeDialogIsShow.value = false;
|
typeDialogFormRef.value.clearValidate();
|
};
|
|
const submitTypeFormValue = async () => {
|
const valid = await typeDialogFormRef.value.validate().catch(() => {});
|
if (!valid) return;
|
|
if (isEditTypeDialog.value) {
|
const res = await UpdateAType(typeDialogFormValue.value, props.request);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
getTypeTableData();
|
typeDialogIsShow.value = false;
|
ElMessage.success('修改系统类型成功');
|
} else {
|
ElMessage.error('修改系统类型失败');
|
}
|
} else {
|
ElMessage.error('修改系统类型失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
} else {
|
const res = await InsertAType(typeDialogFormValue.value, props.request);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
getTypeTableData();
|
typeDialogIsShow.value = false;
|
ElMessage.success('添加系统类型成功');
|
} else {
|
ElMessage.error('添加系统类型失败');
|
}
|
} else {
|
ElMessage.error('添加系统类型失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
}
|
};
|
//#endregion
|
|
//#region ====================== 删除左侧树系统模块数据 ======================
|
|
const deleteCurrentModule = (row: any) => {
|
ElMessageBox.confirm(`确定删除系统模块：【${row.Name}】?`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(async () => {
|
const res = await DeleteAModule(
|
{
|
ID: row.ID,
|
},
|
props.request
|
);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
ElMessage.success('删除系统模块成功');
|
getListTreeData(true);
|
} else {
|
ElMessage.error('删除系统模块失败');
|
}
|
} else {
|
ElMessage.error('删除系统模块失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
});
|
};
|
//#endregion
|
|
//#region ====================== 增加、删除系统模块操作, dialog init======================
|
const isEditModuleDialog = ref(false);
|
const moduleDialogTitle = computed(() => {
|
return isEditModuleDialog.value ? '修改系统模块' : '添加系统模块';
|
});
|
const moduleDialogHeaderIcon = computed(() => {
|
return isEditModuleDialog.value ? 'ele-Edit' : 'ele-Plus';
|
});
|
const moduleDialogFormValue = ref({
|
Name: '',
|
Code: '',
|
Description: '',
|
}) as any;
|
const moduleDialogIsShow = ref(false);
|
const moduleDialogFormRef = ref<FormInstance>(null);
|
const moduleInitialCode = ref('');
|
const { uniquenessValidator: moduleCodeValidator } = useValidateUniqueness(
|
GetIsExistModuleCode,
|
moduleInitialCode,
|
'编码',
|
'Code',
|
undefined,
|
false,
|
props.request
|
);
|
|
const moduleDialogFormRules = ref<FormRules>({
|
Name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
Code: [{ required: true, validator: moduleCodeValidator as any, trigger: 'blur' }],
|
});
|
const openOperateModuleDialog = (data?) => {
|
if (data) {
|
isEditModuleDialog.value = true;
|
const { ID, Name, Code, Description } = data;
|
moduleInitialCode.value = Code;
|
moduleDialogFormValue.value = deepClone({ ID, Name, Code, Description });
|
} else {
|
isEditModuleDialog.value = false;
|
moduleInitialCode.value = '';
|
moduleDialogFormValue.value = { Name: '', Code: '', Description: '' };
|
}
|
moduleDialogIsShow.value = true;
|
};
|
|
const closeModuleDialog = () => {
|
moduleDialogIsShow.value = false;
|
moduleDialogFormRef.value.clearValidate();
|
};
|
|
const submitModuleFormValue = async () => {
|
const valid = await moduleDialogFormRef.value.validate().catch(() => {});
|
if (!valid) return;
|
|
if (isEditModuleDialog.value) {
|
const res = await UpdateAModule(moduleDialogFormValue.value, props.request);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
getListTreeData();
|
moduleDialogIsShow.value = false;
|
ElMessage.success('修改系统模块成功');
|
} else {
|
ElMessage.error('修改系统模块失败');
|
}
|
} else {
|
ElMessage.error('修改系统模块失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
} else {
|
const res = await InsertAModule(moduleDialogFormValue.value, props.request);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
getListTreeData();
|
moduleDialogIsShow.value = false;
|
ElMessage.success('添加系统模块成功');
|
} else {
|
ElMessage.error('添加系统模块失败');
|
}
|
} else {
|
ElMessage.error('添加系统模块失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
}
|
};
|
//#endregion
|
|
//#region ====================== 左侧树拖拽 ======================
|
const dragNodeEnd = async (draggingNode, dropNode, dropType, ev, originTreeData) => {
|
updateSort(
|
listTreeData,
|
listTreeData.value,
|
originTreeData,
|
() => {
|
handleClickNode(draggingNode.data);
|
getListTreeData();
|
},
|
UpdateModuleSorter,
|
() => {
|
handleClickNode(draggingNode.data);
|
},
|
undefined,
|
props.request
|
);
|
};
|
//#endregion
|
|
//#region ====================== 挂载时获取初始数据 ======================
|
onMounted(() => {
|
getListTreeData(true);
|
});
|
//#endregion
|
</script>
|
<style scoped lang="scss"></style>
|
