<template>
|
<el-row :gutter="8" class="h100">
|
<el-col :span="4" :xs="24" class="h100">
|
<el-card shadow="hover" class="h100 left-tree-card" v-loading="treeLoading">
|
<LeftTreeByMgr
|
:treedata="listTreeData"
|
title-name="类型列表"
|
:current-node-key="currentListID"
|
@click="handleClickNode"
|
:folder-icon="(node, data) => data.LogicalType === MODULE_CODE"
|
:default-props="{
|
id: 'LogicalID',
|
label: 'LogicalName',
|
children: 'Children',
|
}"
|
>
|
</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="queryParams">
|
<el-form-item label="名称" prop="Name">
|
<el-input v-model="queryParams.Name" style="width: 226.4px" placeholder="名称" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="编码" prop="Code">
|
<el-input v-model="queryParams.Code" style="width: 226.4px" placeholder="编码" clearable />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="ele-Search" @click="handleQueryTable"> 查询 </el-button>
|
<el-button icon="ele-Refresh" @click="resetQuery">重置 </el-button>
|
<el-button icon="ele-Plus" @click="openOperateDialog()"> 增加 </el-button>
|
</el-form-item>
|
<el-form-item label="排序">
|
<el-switch
|
v-model="isDragStatus"
|
@change="handleDragStatus"
|
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="tableLoading"
|
ref="draggableTableRef"
|
border
|
row-key="ID"
|
:expand-row-keys="treeTableExpandKeys"
|
:tree-props="{ children: 'Children', hasChildren: 'hasChildren' }"
|
:row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'"
|
:cell-style="tableCellCenterExceptColumn()"
|
:header-cell-style="{ textAlign: 'center' }"
|
:data="tableData"
|
@expand-change="tableExpandChange"
|
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="Description" width="550" label="说明" show-overflow-tooltip />
|
<el-table-column label="操作" fixed="right" show-overflow-tooltip width="250">
|
<template #default="scope">
|
<el-button icon="ele-Edit" size="small" text type="primary" @click="openOperateDialog(scope.row)"> 编辑 </el-button>
|
<el-button icon="ele-Folder" size="small" text type="primary" @click="openCatalogOrgDrawer(scope.row)"> 目录 </el-button>
|
<el-button icon="ele-Grid" size="small" text type="primary" @click="openPropertySetDialog(scope.row)"> 属性 </el-button>
|
|
<el-dropdown>
|
<el-button icon="ele-MoreFilled" size="small" text type="primary" style="padding-left: 12px" />
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item icon="ele-Menu" @click="openParentDlg(scope.row)"> 父级 </el-dropdown-item>
|
<el-dropdown-item icon="ele-Delete" @click="deleteCurrentRow(scope.row)" divided> 删除 </el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
<el-dialog :destroy-on-close="true" v-model="dialogIsShow" width="400" :close-on-click-modal="false" @closed="closeDialog">
|
<template #header>
|
<div style="color: #fff">
|
<SvgIcon :name="dialogHeaderIcon" :size="16" style="margin-right: 3px; display: inline; vertical-align: middle" />
|
<span> {{ dialogTitle }} </span>
|
</div>
|
</template>
|
|
<el-form :model="dialogFormValue" ref="dialogFormRef" :rules="dialogFormRules" label-width="55">
|
<el-form-item label="名称" prop="Name">
|
<el-input placeholder="请输入名称" v-model="dialogFormValue.Name"></el-input>
|
</el-form-item>
|
<el-form-item label="编码" prop="Code">
|
<el-input placeholder="请输入唯一编码" v-model="dialogFormValue.Code"></el-input>
|
</el-form-item>
|
<el-form-item label="父级" prop="ParentID">
|
<el-tree-select
|
filterable
|
style="width: 100%"
|
v-model="dialogFormValue.ParentID"
|
:props="{
|
id: 'ID',
|
label: 'Name',
|
children: 'Children',
|
}"
|
:data="tableData"
|
node-key="ID"
|
:clearable="true"
|
:accordion="true"
|
:expandNode="false"
|
:check-strictly="true"
|
placeholder="请选择父级"
|
>
|
</el-tree-select>
|
</el-form-item>
|
<el-form-item label="说明" prop="Description">
|
<el-input placeholder="请输入说明" v-model="dialogFormValue.Description" type="textarea" :rows="3" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div>
|
<el-button @click="closeDialog">取 消</el-button>
|
<el-button type="primary" @click="submitFormValue">确 定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</el-col>
|
|
<!-- 抽屉表格 -->
|
<div class="custom-drawer">
|
<el-drawer v-model="catalogOrgDrawerIsShow" direction="rtl" size="18%" :with-header="false">
|
<el-card shadow="hover" style="height: 100%" v-loading="catalogOrgDrawerListLoading">
|
<LeftTreeByMgr
|
:titleName="currentCatalogOrgMapRow.Name + ' - 分类目录'"
|
:treedata="displayCatalogOrgData"
|
:search-is-show="false"
|
:expand-on-click-node="false"
|
>
|
<template #customTitleRight>
|
<div class="titleSlotRight">
|
<SvgIcon
|
:size="20"
|
name="ele-Setting"
|
color="#528abe"
|
class="cursor-pointer"
|
@click="openOperateCatalogOrgSetDialog"
|
/>
|
</div>
|
</template>
|
</LeftTreeByMgr>
|
</el-card>
|
</el-drawer>
|
</div>
|
|
<el-dialog
|
:destroy-on-close="true"
|
v-model="propertySetDialogIsShow"
|
width="700"
|
:close-on-click-modal="false"
|
@closed="closePropertySetDialog"
|
>
|
<template #header>
|
<div style="color: #fff">
|
<SvgIcon name="ele-Grid" :size="16" style="margin-right: 3px; display: inline; vertical-align: middle" />
|
<span>设置属性</span>
|
</div>
|
</template>
|
<el-tree
|
v-loading="propertyCheckTreeLoading"
|
ref="propertyCheckTreeRef"
|
:data="propertyCheckTree"
|
node-key="LogicalID"
|
show-checkbox
|
check-strictly
|
:props="{ children: 'Children', label: 'LogicalName', class: treeNodeClass, disabled: 'Inherit' }"
|
icon="ele-Menu"
|
highlight-current
|
default-expand-all
|
>
|
<template #default="{ node, data }">
|
<el-tooltip v-if="data.LogicalType === 'sys-prop-group'" content="属性分组" placement="top-start">
|
{{ node.label }}
|
</el-tooltip>
|
<el-tooltip v-else-if="data.Inherit" content="继承自祖级分类" placement="top-start">
|
{{ node.label }}
|
</el-tooltip>
|
<template v-else>
|
{{ node.label }}
|
</template>
|
</template>
|
</el-tree>
|
|
<template v-slot:footer>
|
<div>
|
<el-button @click="closePropertySetDialog">取 消</el-button>
|
<el-button type="primary" @click="submitPropertySetForm">确 定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
<!-- catalogOrg 设置对话框 -->
|
<el-dialog
|
:destroy-on-close="true"
|
v-model="catalogOrgSetDialogIsShow"
|
width="700"
|
:close-on-click-modal="false"
|
@closed="closeCatalogOrgSetDialog"
|
>
|
<template #header>
|
<div style="color: #fff">
|
<SvgIcon name="ele-Setting" :size="16" style="margin-right: 3px; display: inline; vertical-align: middle" />
|
<span> 设置目录 </span>
|
</div>
|
</template>
|
|
<el-form :model="catalogOrgTableForm">
|
<!-- 数据展示表格 -->
|
<el-table
|
ref="catalogOrgCheckTableRef"
|
v-loading="catalogOrgTableLoading"
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
border
|
row-key="ID"
|
:cell-style="tableCellCenterExceptColumn(1)"
|
:header-cell-style="{ textAlign: 'center' }"
|
:data="filteredTableData"
|
:expand-row-keys="catalogOrgExpandRowKeys"
|
style="width: 100%"
|
highlight-current-row
|
row-class-name="cursor-pointer"
|
@select="userSelectCatalogOrg"
|
>
|
<el-table-column type="selection" width="55px"> </el-table-column>
|
<el-table-column prop="Name" label="系统分类" fixed="left" show-overflow-tooltip />
|
<el-table-column prop="Count" label="数量" width="130" show-overflow-tooltip>
|
<template #default="scope">
|
<el-form-item>
|
<el-input-number size="small" :min="1" v-model="catalogOrgTableForm[scope.row.ID]"></el-input-number>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form>
|
|
<template #footer>
|
<div>
|
<el-button @click="closeCatalogOrgSetDialog">取 消</el-button>
|
<el-button type="primary" @click="submitCatalogOrgSetValue">确 定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
<ParentDialog
|
v-model="parentDlgIsShow"
|
:data="treeTableData"
|
:api="UpdateCatalogTreeSortCode"
|
:rowData="parentDlgMapRow"
|
@submitSuccess="submitParentForm"
|
>
|
</ParentDialog>
|
</el-row>
|
</template>
|
|
<script setup lang="ts">
|
import type { FormInstance, FormRules, TableInstance } from 'element-plus';
|
import { ElMessage, ElMessageBox, ElTree } from 'element-plus';
|
import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue';
|
import type { PropType } from 'vue';
|
import { ref, onMounted, computed, watch, nextTick } from 'vue';
|
import { deepClone } from '/@/utils/other';
|
import { useQueryTable } from '/@/hooks/useQueryTable';
|
import { useTableSort } from '/@/hooks/useTableSort';
|
import { useValidateUniqueness } from '/@/hooks/useValidateUniqueness';
|
import {
|
DeleteACatalog,
|
GetTypeListTreeData,
|
GetAllCatalogByID,
|
GetIsExistCatalogCode,
|
InsertACatalog,
|
UpdateACatalog,
|
UpdateCatalogSorter,
|
GetCatalogOrgByParentID,
|
GetHaveLogicalTreeList,
|
SetCatalogMapProperty,
|
SetCatalogOrg,
|
UpdateCatalogTreeSortCode,
|
} from '/@/api/basic/dataManage/catalogManage';
|
import { ExtendTypeEnum } from '/@/projectCom/basic/types';
|
import { convertListToTree, travelTree, tableCellCenterExceptColumn, flatten } from '/@/utils/util';
|
import type { AxiosRequestConfig, AxiosResponse } from 'axios';
|
import { MODULE_CODE } from '/@/constants';
|
import ParentDialog from '/@/components/dialog/parentDialog/ParentDialog.vue';
|
|
const props = defineProps({
|
request: {
|
type: Function as PropType<(config: AxiosRequestConfig<any>) => Promise<AxiosResponse<any, any>>>,
|
},
|
});
|
|
//#region ====================== 左侧树数据，tree init ======================
|
const treeLoading = ref(false);
|
const listTreeData = ref([]);
|
const currentListID = ref('');
|
const currentTreeNode = ref(null);
|
const handleClickNode = (data) => {
|
currentListID.value = data.LogicalID;
|
currentTreeNode.value = data;
|
if (data.LogicalType === MODULE_CODE) {
|
tableData.value = [];
|
return;
|
}
|
getTableData();
|
};
|
const getListTreeData = async () => {
|
treeLoading.value = true;
|
const res = await GetTypeListTreeData(
|
{
|
ExtendType: ExtendTypeEnum.Inherit,
|
},
|
props.request
|
).finally(() => {
|
treeLoading.value = false;
|
});
|
if (res?.Code === 0) {
|
listTreeData.value = res.Data || [];
|
const firstListTreeNode = listTreeData.value[0]?.Children[0];
|
if (firstListTreeNode) {
|
handleClickNode(firstListTreeNode);
|
} else {
|
tableData.value = [];
|
currentTreeNode.value = null;
|
currentListID.value = null;
|
}
|
} else {
|
ElMessage.error('获取类型列表失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
};
|
//#endregion
|
|
//#region ====================== 表格数据，table init ======================
|
const tableLoading = ref(false);
|
const flatTableData = ref([]);
|
// 树形态的表格数据
|
|
const treeTableData = ref([]);
|
|
const isDragStatus = ref(false);
|
// 保存当前 ID 节点的根节点 ID;
|
let IDRootMap = {};
|
const getTableData = async () => {
|
tableLoading.value = true;
|
const res = await GetAllCatalogByID({ TypeID: currentListID.value }, props.request).finally(() => {
|
tableLoading.value = false;
|
});
|
if (res?.Code === 0) {
|
flatTableData.value = res.Data || [];
|
treeTableData.value = convertListToTree(flatTableData.value);
|
// 每一个树节点有一个 RootID，指向当前节点的最上层的根节点 ID
|
let rootID = '';
|
travelTree(treeTableData.value, (value) => {
|
if (value.ParentID === '0') {
|
rootID = value.ID;
|
}
|
value.RootID = rootID;
|
IDRootMap[value.ID] = rootID;
|
});
|
} else {
|
ElMessage.error('获取分类失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
};
|
const deleteCurrentRow = (row: any) => {
|
ElMessageBox.confirm(`确定删除分类：【${row.Name}】?`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(async () => {
|
const res = await DeleteACatalog(
|
{
|
ID: row.ID,
|
},
|
props.request
|
);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
ElMessage.success('删除分类成功');
|
getTableData();
|
} else {
|
ElMessage.error('删除分类失败');
|
}
|
} else {
|
ElMessage.error('删除分类失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
});
|
};
|
//#endregion
|
|
//#region ====================== 表格查询、排序，search form init ======================
|
const queryParams = ref({
|
Name: '',
|
Code: '',
|
});
|
const { resetQuery, handleQueryTable, displayTableData: tableData } = useQueryTable(flatTableData, queryParams, getTableData, true);
|
|
const { handleDragStatus, draggableTableRef } = useTableSort(
|
tableData,
|
UpdateCatalogSorter,
|
getTableData,
|
undefined,
|
true,
|
props.request
|
);
|
|
//#endregion
|
|
//#region ====================== 增加、修改记录操作, dialog init======================
|
const isEditDialog = ref(false);
|
const dialogTitle = computed(() => {
|
return isEditDialog.value ? '修改分类' : '添加分类';
|
});
|
const dialogHeaderIcon = computed(() => {
|
return isEditDialog.value ? 'ele-Edit' : 'ele-Plus';
|
});
|
const dialogFormValue = ref(null);
|
const dialogIsShow = ref(false);
|
const dialogFormRef = ref<FormInstance>(null);
|
const initialCode = ref('');
|
|
const { uniquenessValidator } = useValidateUniqueness(
|
GetIsExistCatalogCode,
|
initialCode,
|
'编码',
|
'Code',
|
{
|
CorpID: currentListID,
|
},
|
false,
|
props.request
|
);
|
|
const dialogFormRules = ref<FormRules>({
|
Name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
Code: [{ required: true, validator: uniquenessValidator as any, trigger: 'blur' }],
|
});
|
const openOperateDialog = (row?) => {
|
if (!currentListID.value) {
|
return ElMessage.warning('请先选择类型！');
|
}
|
if (row) {
|
isEditDialog.value = true;
|
const { ID, Name, Code, Description, ParentID } = row;
|
|
initialCode.value = Code;
|
dialogFormValue.value = deepClone({
|
TypeID: currentTreeNode.value.LogicalID,
|
ID,
|
Name,
|
Code,
|
Description,
|
ParentID: ParentID === '0' ? null : ParentID,
|
});
|
} else {
|
if (currentTreeNode.value.LogicalType === MODULE_CODE) {
|
return ElMessage.info('请选择系统类型，再添加数据');
|
}
|
isEditDialog.value = false;
|
initialCode.value = '';
|
dialogFormValue.value = { Name: '', Code: '', Description: '', ParentID: null, TypeID: currentListID.value };
|
}
|
dialogIsShow.value = true;
|
};
|
|
const closeDialog = () => {
|
dialogIsShow.value = false;
|
dialogFormRef.value.clearValidate();
|
};
|
|
const submitFormValue = async () => {
|
const valid = await dialogFormRef.value.validate().catch(() => {});
|
if (!valid) return;
|
|
if (!dialogFormValue.value.ParentID) {
|
dialogFormValue.value.ParentID = '0';
|
}
|
|
if (isEditDialog.value) {
|
const res = await UpdateACatalog(dialogFormValue.value, props.request);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
getTableData();
|
closeDialog();
|
ElMessage.success('修改分类成功');
|
} else {
|
ElMessage.error('修改分类失败');
|
}
|
} else {
|
ElMessage.error('修改分类失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
} else {
|
const res = await InsertACatalog(dialogFormValue.value, props.request);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
getTableData();
|
closeDialog();
|
ElMessage.success('添加分类成功');
|
} else {
|
ElMessage.success('添加分类失败');
|
}
|
} else {
|
ElMessage.error('添加分类失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
}
|
};
|
|
//#endregion
|
|
//#region ====================== 抽屉树数据 ======================
|
const catalogOrgDrawerIsShow = ref(false);
|
const catalogOrgDrawerListsData = ref([]);
|
const catalogOrgDrawerListLoading = ref(false);
|
let currentCatalogOrgOrgID = '';
|
|
/**展示的目录数据 */
|
const displayCatalogOrgData = computed(() => {
|
return catalogOrgDrawerListsData.value.map((item) => {
|
let foundCatalog = {
|
// ID 是目录ID
|
ID: '0',
|
Name: '-',
|
// CatalogID 是分类ID
|
CatalogID: '0',
|
};
|
|
for (const value of flatTableData.value) {
|
if (value.ID === item.ChildID) {
|
foundCatalog = {
|
ID: item.ID,
|
Name: value.Name,
|
CatalogID: value.ID,
|
};
|
break;
|
}
|
}
|
return foundCatalog;
|
});
|
});
|
|
const getCatalogOrgDrawerListDataByID = async () => {
|
catalogOrgDrawerListLoading.value = true;
|
const res = await GetCatalogOrgByParentID({ ParentID: currentCatalogOrgOrgID }, props.request).finally(() => {
|
catalogOrgDrawerListLoading.value = false;
|
});
|
if (res?.Code === 0) {
|
if (res.Data) {
|
catalogOrgDrawerListsData.value = res.Data;
|
} else {
|
catalogOrgDrawerListsData.value = [];
|
}
|
} else {
|
ElMessage.error('获取目录失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
};
|
const currentCatalogOrgMapRow = ref(null);
|
const openCatalogOrgDrawer = (row?) => {
|
const { ID } = row;
|
currentCatalogOrgMapRow.value = row;
|
currentCatalogOrgOrgID = ID;
|
getCatalogOrgDrawerListDataByID();
|
catalogOrgDrawerIsShow.value = true;
|
};
|
//#endregion
|
|
//#region ====================== 解决拖拽展开状态失效问题 ======================
|
const treeTableExpandKeys = ref([]);
|
|
const tableExpandChange = (row, expanded) => {
|
if (expanded) {
|
treeTableExpandKeys.value.push(row.ID);
|
} else {
|
const idx = treeTableExpandKeys.value.indexOf(row.ID);
|
treeTableExpandKeys.value.splice(idx, 1);
|
}
|
};
|
//#endregion
|
|
//#region ====================== 分类属性设置 ======================
|
const propertySetDialogIsShow = ref(false);
|
|
const propertyCheckTree = ref([]);
|
const propertyCheckTreeRef = ref<InstanceType<typeof ElTree>>(null);
|
let currentCatalog = null;
|
|
const openPropertySetDialog = (row) => {
|
propertySetDialogIsShow.value = true;
|
currentCatalog = row;
|
getPropertyByCatalogID();
|
};
|
|
const getCheckedKeys = (treeData: any) => {
|
const checkedKeys = [];
|
const getKeys = (treeData: any) => {
|
for (const item of treeData) {
|
if (item.Have) {
|
checkedKeys.push(item.LogicalID);
|
}
|
if (item.Children && item.Children.length !== 0) {
|
getKeys(item.Children);
|
}
|
}
|
};
|
getKeys(treeData);
|
return checkedKeys;
|
};
|
const propertyCheckTreeLoading = ref(false);
|
const getPropertyByCatalogID = async () => {
|
propertyCheckTreeLoading.value = true;
|
const res = await GetHaveLogicalTreeList({ CatalogID: currentCatalog?.ID }, props.request).finally(() => {
|
propertyCheckTreeLoading.value = false;
|
});
|
if (res?.Code === 0) {
|
if (res.Data) {
|
propertyCheckTree.value = res.Data;
|
const checkedKeys = getCheckedKeys(propertyCheckTree.value);
|
|
propertyCheckTreeRef.value.setCheckedKeys(checkedKeys);
|
}
|
} else {
|
ElMessage.error('获取属性失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
};
|
|
const closePropertySetDialog = () => {
|
propertySetDialogIsShow.value = false;
|
propertyCheckTreeRef.value.setCheckedNodes([]);
|
};
|
// 叶子节点同行显示样式
|
const treeNodeClass = (node) => {
|
let addClass = true; // 添加叶子节点同行显示样式
|
for (const key in node.Children) {
|
// 如果存在子节点非叶子节点，不添加样式
|
if (node.Children[key].Children?.length ?? 0 > 0) {
|
addClass = false;
|
break;
|
}
|
}
|
const checkboxClass = node.LogicalType === 'sys-prop-group' ? 'sys-prop-group' : 'sys-prop';
|
const penultimateClass = addClass ? 'penultimate-node' : '';
|
const treeNodeClass = checkboxClass + ' ' + penultimateClass;
|
return treeNodeClass;
|
};
|
|
const submitPropertySetForm = async () => {
|
const checkedKeys = propertyCheckTreeRef.value
|
.getCheckedNodes()
|
.filter((item) => item.LogicalType === 'sys-prop' && !item.Inherit)
|
.map((item) => item.LogicalID);
|
const res = await SetCatalogMapProperty({ CatalogID: currentCatalog?.ID, PropIds: checkedKeys }, props.request);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
propertySetDialogIsShow.value = false;
|
ElMessage.success('设置成功');
|
} else {
|
ElMessage.info('未修改');
|
}
|
} else {
|
ElMessage.error('设置失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
};
|
//#endregion
|
|
//#region ======================设置目录操作, dialog init======================
|
|
const catalogOrgSetDialogIsShow = ref(false);
|
const catalogOrgTableLoading = ref(false);
|
const catalogOrgCheckTableRef = ref<TableInstance>(null);
|
|
const catalogOrgTableForm = ref({});
|
const filteredTableData = ref([]);
|
|
const setCatalogOrgTableData = () => {
|
filteredTableData.value = deepClone(
|
treeTableData.value.filter((item) => item.RootID !== IDRootMap[currentCatalogOrgMapRow.value.ID])
|
) as any[];
|
travelTree(filteredTableData.value, (value) => {
|
value.children = value.Children;
|
});
|
const checkedKeysObj = {};
|
displayCatalogOrgData.value.forEach((value) => {
|
if (!checkedKeysObj[value.CatalogID]) {
|
checkedKeysObj[value.CatalogID] = 1;
|
} else {
|
checkedKeysObj[value.CatalogID]++;
|
}
|
});
|
|
nextTick(() => {
|
nextTick(() => {
|
catalogOrgCheckTableRef.value?.clearSelection();
|
const catalogIDCount = {};
|
travelTree(
|
filteredTableData.value,
|
(value) => {
|
const IDMapCount = checkedKeysObj[value.ID];
|
if (IDMapCount) {
|
catalogOrgCheckTableRef.value?.toggleRowSelection(value, true);
|
} else {
|
catalogOrgCheckTableRef.value?.toggleRowSelection(value, false);
|
}
|
|
catalogIDCount[value.ID] = IDMapCount || 1;
|
},
|
null,
|
false,
|
'children'
|
);
|
catalogOrgTableForm.value = catalogIDCount;
|
});
|
});
|
};
|
|
const userSelectCatalogOrg = (checkedRow, currentRow) => {
|
const isChecked = checkedRow.includes(currentRow);
|
if (isChecked) {
|
if (currentRow.children?.length > 0) {
|
for (const item of currentRow.children) {
|
catalogOrgCheckTableRef.value?.toggleRowSelection(item, false);
|
}
|
}
|
}
|
};
|
const openOperateCatalogOrgSetDialog = () => {
|
resetCatalogOrgTable();
|
setCatalogOrgTableData();
|
catalogOrgSetDialogIsShow.value = true;
|
};
|
// 展开的 tree
|
const catalogOrgExpandRowKeys = ref([]);
|
const resetCatalogOrgTable = () => {
|
catalogOrgExpandRowKeys.value = [];
|
};
|
const closeCatalogOrgSetDialog = () => {
|
catalogOrgSetDialogIsShow.value = false;
|
};
|
|
const submitCatalogOrgSetValue = async () => {
|
const selectedRows = catalogOrgCheckTableRef.value.getSelectionRows();
|
const CatalogIDs = [];
|
selectedRows.forEach((row) => {
|
const count = catalogOrgTableForm.value[row.ID];
|
for (let index = 0; index < count; index++) {
|
CatalogIDs.push(row.ID);
|
}
|
});
|
const sendParams = {
|
ParentID: currentCatalogOrgOrgID,
|
ChildIds: CatalogIDs,
|
};
|
catalogOrgTableLoading.value = true;
|
const res = await SetCatalogOrg(sendParams, props.request).finally(() => {
|
catalogOrgTableLoading.value = false;
|
});
|
if (res?.Code === 0) {
|
if (res.Data) {
|
closeCatalogOrgSetDialog();
|
getCatalogOrgDrawerListDataByID();
|
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) => {
|
getTableData();
|
};
|
//#endregion
|
onMounted(() => {
|
getListTreeData();
|
});
|
</script>
|
<style scoped lang="scss">
|
:deep(.sys-prop-group > .el-tree-node__content > .el-checkbox) {
|
display: none;
|
}
|
.titleSlotRight {
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
}
|
</style>
|
