<template>
|
<AHMContainer type="card">
|
<template #aside>
|
<!-- 目录树 -->
|
<LeftTreeByMgr
|
v-loading="treeLoading"
|
ref="leftTreeRef"
|
:treedata="listTreeData"
|
title-name="类目管理"
|
:show-more-operate="true"
|
:show-add="true"
|
:folderIcon="() => false"
|
:current-node-key="currentListID"
|
:expand-on-click-node="false"
|
:default-expand-all="true"
|
:tooltip="(_, data) => data.Code"
|
@click="handleClickNode"
|
:customDropdown="true"
|
@tree-add="openOperateFormulaGroupDialog"
|
>
|
<template #customDropdown="{ data, node }">
|
<el-dropdown-menu>
|
<el-dropdown-item>
|
<el-button
|
@click.stop="() => openOperateFormulaGroupDialog(data)"
|
link
|
type="primary"
|
icon="ele-Edit"
|
style="cursor: pointer"
|
>
|
编辑
|
</el-button>
|
</el-dropdown-item>
|
<el-dropdown-item>
|
<el-button
|
link
|
type="danger"
|
@click.stop="() => deleteCurrentFormulaGroup(data)"
|
icon="ele-Delete"
|
style="cursor: pointer"
|
>
|
删除
|
</el-button>
|
</el-dropdown-item>
|
<el-dropdown-item>
|
<el-button @click.stop="() => openParentDlg(data)" link type="primary" icon="ele-Menu" style="cursor: pointer">
|
父级
|
</el-button>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</LeftTreeByMgr>
|
</template>
|
|
<template #header>
|
<!-- 查询、重置、排序、增加表单 -->
|
<el-form :inline="true" :model="formulaQueryParams">
|
<el-form-item label="名称" prop="Name">
|
<el-input v-model="formulaQueryParams.Name" style="width: 226.4px" placeholder="文件名称" clearable></el-input>
|
</el-form-item>
|
<el-form-item prop="Code">
|
<el-select v-model="formulaQueryParams.Code" autocomplete="off" style="width: 226.4px" clearable>
|
<el-option v-for="item in Object.keys(analyzeMap)" :key="item" :value="parseInt(item)" :label="analyzeMap[item]">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button type="primary" icon="ele-Search"> 查询 </el-button>
|
<el-button icon="ele-Refresh">重置 </el-button>
|
<el-button icon="ele-Plus" @click="importData()"> 导入数据 </el-button>
|
</el-form-item>
|
</el-form></template
|
>
|
<template #main
|
><!-- 数据展示表格 -->
|
<div class="flex-auto flex-column h-full" v-if="state.isShowTrendFun">
|
<el-table
|
v-loading="formulaTableLoading"
|
ref="draggableFormulaTableRef"
|
border
|
row-key="ID"
|
class="flex-auto"
|
:row-class-name="isFormulaTableDrag ? 'cursor-move' : 'cursor-pointer'"
|
:cell-style="{ textAlign: 'center' }"
|
:header-cell-style="{ textAlign: 'center' }"
|
:data="categoryTableData"
|
highlight-current-row
|
>
|
<el-table-column prop="Name" width="220" label="文件名称" fixed="left" show-overflow-tooltip />
|
<el-table-column prop="Code" width="300" label="文件格式" show-overflow-tooltip />
|
<el-table-column prop="FormatType" label="文件大小" width="120" show-overflow-tooltip> </el-table-column>
|
<el-table-column prop="MeasureTypes" width="120" label="状态" show-overflow-tooltip> </el-table-column>
|
<el-table-column prop="CronTypes" label="上传时间" show-overflow-tooltip> </el-table-column>
|
<el-table-column label="操作" width="220" fixed="right" show-overflow-tooltip>
|
<template #default="scope">
|
<el-button icon="ele-Tickets" size="small" text type="primary" @click="openOperateDemoPage(scope.row)"> 详情</el-button>
|
<el-button icon="ele-Delete" size="small" text type="danger" @click="deleteCurrentFormulaRow(scope.row)">
|
删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="flex-0">
|
<el-pagination
|
v-model:currentPage="state.tableParams.PageIndex"
|
v-model:page-size="state.tableParams.PageSize"
|
:total="state.tableTotal"
|
:page-sizes="[10, 20, 50, 100]"
|
background
|
@size-change="handleSizeChange"
|
style="margin-bottom: 20px"
|
@current-change="handleCurrentChange"
|
layout="total, sizes, prev, pager, next, jumper"
|
/>
|
</div>
|
</div>
|
</template>
|
<!-- 增加、修改数据对话框 -->
|
<el-dialog
|
:destroy-on-close="true"
|
v-model="formulaGroupDialogIsShow"
|
width="400"
|
:close-on-click-modal="false"
|
@closed="closeFormulaGroupDialog"
|
>
|
<template #header>
|
<div style="color: #fff">
|
<SvgIcon
|
:name="formulaGroupDialogHeaderIcon"
|
:size="16"
|
style="margin-right: 3px; display: inline; vertical-align: middle"
|
/>
|
<span> {{ formulaGroupDialogTitle }} </span>
|
</div>
|
</template>
|
|
<el-form
|
:model="formulaGroupDialogFormValue"
|
ref="formulaGroupDialogFormRef"
|
:rules="formulaGroupDialogFormRules"
|
label-width="55"
|
>
|
<el-form-item label="父级" v-if="!isEditFormulaGroupDialog" prop="ParentID">
|
<el-tree-select
|
default-expand-all
|
filterable
|
style="width: 100%"
|
v-model="formulaGroupDialogFormValue.ParentID"
|
:props="{
|
id: 'ID',
|
label: 'Name',
|
children: 'Children',
|
}"
|
:data="listTreeData"
|
node-key="ID"
|
:clearable="true"
|
:accordion="true"
|
:expandNode="false"
|
:check-strictly="true"
|
placeholder="请选择父级"
|
>
|
</el-tree-select>
|
</el-form-item>
|
<el-form-item label="名称" prop="Name">
|
<el-input placeholder="请输入名称" v-model="formulaGroupDialogFormValue.Name"></el-input>
|
</el-form-item>
|
<el-form-item label="编码" prop="Code">
|
<el-input placeholder="请输入编码" v-model="formulaGroupDialogFormValue.Code"></el-input>
|
</el-form-item>
|
|
<el-form-item label="说明" prop="Description">
|
<el-input placeholder="请输入说明" v-model="formulaGroupDialogFormValue.Description" type="textarea" :rows="3" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div>
|
<el-button @click="closeFormulaGroupDialog">取 消</el-button>
|
<el-button type="primary" @click="submitFormulaGroupFormValue">确 定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
<!-- 增加、修改数据对话框 -->
|
<el-dialog
|
:destroy-on-close="true"
|
v-model="updateModuleDlgIsShow"
|
width="400"
|
:close-on-click-modal="false"
|
@closed="closeUpdateModuleDlg"
|
>
|
<template #header>
|
<div style="color: #fff">
|
<span> {{ updateModuleTitle }} </span>
|
</div>
|
</template>
|
|
<el-form :model="updateModuleFormValue" ref="updateModuleFormRef" :rules="updateModuleFormRules" label-width="60">
|
<el-form-item label="分组" prop="GroupID">
|
<el-tree-select
|
filterable
|
class="w100"
|
v-model="updateModuleFormValue.GroupID"
|
:props="{
|
id: 'ID',
|
label: 'Name',
|
children: 'Children',
|
}"
|
:data="updateModuleOptions"
|
node-key="ID"
|
:clearable="true"
|
:accordion="false"
|
:expandNode="false"
|
:check-strictly="true"
|
>
|
</el-tree-select>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div>
|
<el-button @click="closeUpdateModuleDlg">取 消</el-button>
|
<el-button type="primary" @click="submitUpdateModule">确 定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</AHMContainer>
|
</template>
|
|
<script setup lang="ts">
|
import type { AxiosRequestConfig, AxiosResponse } from 'axios';
|
import type { FormInstance, FormRules } from 'element-plus';
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
import type { PropType } from 'vue';
|
import { computed, nextTick, onMounted, reactive, ref } from 'vue';
|
import { useRouter } from 'vue-router';
|
import AHMContainer from '/@/components/layout/AHMContainer.vue';
|
import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue';
|
import { deepClone } from '/@/utils/other';
|
import { convertListToTree } from '/@/utils/util';
|
import { analyzeMap } from '/@/views/types/catalog/index';
|
|
const props = defineProps({
|
request: {
|
type: Function as PropType<(config: AxiosRequestConfig<any>) => Promise<AxiosResponse<any, any>>>,
|
},
|
});
|
const state = reactive({
|
tableParams: {
|
PageIndex: 1,
|
PageSize: 10,
|
},
|
tableTotal: 0,
|
isShowTrendFun: true,
|
showViewBack: false,
|
detailTitle: '',
|
});
|
//#region ====================== 左侧树数据，tree init ======================
|
const leftTreeRef = ref(null);
|
const treeLoading = ref(false);
|
const listTreeData = ref([]);
|
const currentTreeNode = ref(null);
|
const currentListID = computed(() => currentTreeNode.value?.ID);
|
const handleClickNode = (data) => {
|
nextTick(() => {
|
leftTreeRef.value?.treeRef.setCurrentKey(data.ID);
|
});
|
currentTreeNode.value = data;
|
getCategoryTableData();
|
};
|
const getListTreeData = async (selectFirst = false) => {
|
return;
|
treeLoading.value = true;
|
const res = await GetAll(props.request).finally(() => {
|
treeLoading.value = false;
|
});
|
if (res?.Code === 0) {
|
const resData = (res.Data || []) as [];
|
listTreeData.value = convertListToTree(resData);
|
if (selectFirst) {
|
const firstListTreeNode = listTreeData.value[0];
|
if (firstListTreeNode) {
|
handleClickNode(firstListTreeNode);
|
} else {
|
categoryTableData.value = [];
|
}
|
} else {
|
currentTreeNode.value && handleClickNode(currentTreeNode.value);
|
}
|
} else {
|
ElMessage.error('获取公式组失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
};
|
//#endregion
|
//#region ====================== 获取、删除表格数据 ======================
|
const formulaTableLoading = ref(false);
|
const categoryTableData = ref([
|
{
|
Name: '测试',
|
},
|
]);
|
const isFormulaTableDrag = ref(false);
|
const getCategoryTableData = async () => {
|
formulaTableLoading.value = true;
|
const res = await GetByGroupID({ GroupID: currentListID.value }, props.request).finally(() => {
|
formulaTableLoading.value = false;
|
});
|
if (res?.Code === 0) {
|
const resData = (res.Data || []) as [];
|
categoryTableData.value = resData;
|
} else {
|
ElMessage.error('获取公式失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
};
|
const deleteCurrentFormulaRow = (row: any) => {
|
ElMessageBox.confirm(`确定删除公式：【${row.Name}】?`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(async () => {
|
const res = await TableDelete(
|
{
|
ID: row.ID,
|
},
|
props.request
|
);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
ElMessage.success('删除公式成功');
|
getCategoryTableData();
|
} else {
|
ElMessage.error('删除公式失败');
|
}
|
} else {
|
ElMessage.error('删除公式失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
});
|
};
|
//数据列表页面分页
|
|
const handleSizeChange = (val) => {
|
state.tableParams.PageSize = val;
|
getCategoryTableData();
|
};
|
const handleCurrentChange = (val) => {
|
state.tableParams.PageIndex = val;
|
getCategoryTableData();
|
};
|
//#endregion
|
|
//#endregion
|
|
//#region ====================== 搜索表格，对表格排序 ======================
|
const formulaQueryParams = ref({
|
Name: '',
|
Code: '',
|
});
|
//#endregion
|
|
//#region ====================== 跳转文档详情页面 init======================
|
const router = useRouter();
|
const openOperateDemoPage = (row: any) => {
|
router.push({
|
name: 'GraphDetail',
|
params: {
|
ID: row.ID,
|
},
|
});
|
};
|
|
//导入数据
|
const importData = () => {};
|
//#endregion
|
|
//#region ====================== 删除左侧树公式组数据 ======================
|
|
const deleteCurrentFormulaGroup = (row: any) => {
|
ElMessageBox.confirm(`确定删除公式组：【${row.Name}】?`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(async () => {
|
const res = await DeleteGroupGetByID(
|
{
|
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 isEditFormulaGroupDialog = ref(false);
|
const formulaGroupDialogTitle = computed(() => {
|
return isEditFormulaGroupDialog.value ? '修改公式组' : '添加公式组';
|
});
|
const formulaGroupDialogHeaderIcon = computed(() => {
|
return isEditFormulaGroupDialog.value ? 'ele-Edit' : 'ele-Plus';
|
});
|
const formulaGroupDialogFormValue = ref(null);
|
const formulaGroupDialogIsShow = ref(false);
|
|
const formulaGroupDialogFormRef = ref<FormInstance>(null);
|
|
const formulaGroupDialogFormRules = ref<FormRules>({
|
Name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
});
|
const openOperateFormulaGroupDialog = (data?) => {
|
if (data) {
|
isEditFormulaGroupDialog.value = true;
|
const { ID, Name, Code, Description } = data;
|
formulaGroupDialogFormValue.value = deepClone({ ID, Name, Code, Description });
|
} else {
|
isEditFormulaGroupDialog.value = false;
|
formulaGroupDialogFormValue.value = { Name: '', ParentID: '', Code: '', Description: '' };
|
}
|
formulaGroupDialogIsShow.value = true;
|
};
|
|
const closeFormulaGroupDialog = () => {
|
formulaGroupDialogIsShow.value = false;
|
formulaGroupDialogFormRef.value.clearValidate();
|
};
|
|
const submitFormulaGroupFormValue = async () => {
|
const valid = await formulaGroupDialogFormRef.value.validate().catch(() => {});
|
if (!valid) return;
|
|
if (isEditFormulaGroupDialog.value) {
|
const res = await UpdateGroupGetByID(formulaGroupDialogFormValue.value, props.request);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
getListTreeData();
|
closeFormulaGroupDialog();
|
ElMessage.success('修改公式组成功');
|
} else {
|
ElMessage.error('修改公式组失败');
|
}
|
} else {
|
ElMessage.error('修改公式组失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
} else {
|
const res = await InsertGroup(
|
{ ...formulaGroupDialogFormValue.value, ParentID: formulaGroupDialogFormValue.value.ParentID || '0' },
|
props.request
|
);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
getListTreeData();
|
closeFormulaGroupDialog();
|
ElMessage.success('添加公式组成功');
|
} else {
|
ElMessage.error('添加公式组失败');
|
}
|
} else {
|
ElMessage.error('添加公式组失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
}
|
};
|
//#endregion
|
|
//#region ====================== 修改父级 ======================
|
const parentDlgIsShow = ref(false);
|
const parentDlgMapRow = ref(null);
|
const openParentDlg = (row?) => {
|
parentDlgMapRow.value = row;
|
parentDlgIsShow.value = true;
|
};
|
const submitParentForm = (res) => {
|
getListTreeData();
|
};
|
//#endregion
|
|
//#region ====================== updateModuleDlg ======================
|
const updateModuleDlgIsShow = ref(false);
|
const updateModuleMapRow = ref(null);
|
const updateModuleFormRef = ref(null);
|
const updateModuleTitle = computed(() => `【${updateModuleMapRow.value?.Name}】—— 修改所属分组`);
|
const updateModuleFormRules = ref<FormRules>({
|
GroupID: [{ required: true, message: '请选择分组', trigger: 'change' }],
|
});
|
|
const updateModuleOptions = computed(() => {
|
return listTreeData.value;
|
});
|
const updateModuleFormValue = ref(null);
|
|
const closeUpdateModuleDlg = () => {
|
updateModuleDlgIsShow.value = false;
|
updateModuleFormRef.value.clearValidate();
|
};
|
|
const submitUpdateModule = async () => {
|
const valid = await updateModuleFormRef.value.validate().catch(() => {});
|
if (!valid) return;
|
if (updateModuleFormValue.value.GroupID === currentListID.value) {
|
ElMessage.info('未修改');
|
return;
|
}
|
const res = await UpdateFormulaGroupID(updateModuleFormValue.value);
|
|
if (res?.Data) {
|
ElMessage.success('修改成功！');
|
getCategoryTableData();
|
closeUpdateModuleDlg();
|
} else {
|
ElMessage.error('修改失败');
|
}
|
};
|
|
//#endregion
|
|
//#region ====================== 挂载时获取初始数据 ======================
|
onMounted(() => {
|
getListTreeData(true);
|
});
|
//#endregion
|
</script>
|
<style scoped lang="scss">
|
:deep(.el-card__body) {
|
padding-bottom: unset;
|
}
|
</style>
|
