<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
|
ref="leftTreeRef"
|
title-name="属性组列表"
|
:show-add="true"
|
:select-is-show="true"
|
:showSelectNodeIcon="true"
|
:selectFolderIcon="(_, data) => data.LogicalType === MODULE_CODE"
|
:select-data="selectTreeData"
|
:show-more-operate="true"
|
:select-props="{
|
id: 'LogicalID',
|
label: 'LogicalName',
|
children: 'Children',
|
}"
|
:default-select-value="currentSelectID"
|
:folder-icon="() => false"
|
@selectchange="selectNodeChange"
|
:treedata="listTreeData"
|
:current-node-key="currentListID"
|
:show-sorter="true"
|
@click="handleClickNode"
|
@node-drag-end="dragNodeEnd"
|
@tree-edit="openOperatePropertyGroupDialog"
|
@tree-delete="deleteCurrentPropertyGroup"
|
@tree-add="openOperatePropertyGroupDialog"
|
>
|
</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="openOperatePropertyDialog()"> 增加 </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"
|
:row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'"
|
:cell-style="{ textAlign: 'center' }"
|
:header-cell-style="{ textAlign: 'center' }"
|
:data="displayTableData"
|
style="width: 100%"
|
highlight-current-row
|
>
|
<el-table-column type="index" label="序号" width="55" align="center" />
|
<el-table-column prop="Name" label="名称" show-overflow-tooltip />
|
<el-table-column prop="Code" label="编码" show-overflow-tooltip />
|
<el-table-column prop="Format" label="格式" show-overflow-tooltip>
|
<template #default="scope">
|
{{ FORMAT_MAP[scope.row.Format] }}
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="UnitName" label="单位" show-overflow-tooltip />
|
<el-table-column prop="DefaultValue" label="默认值" align="center" show-overflow-tooltip> </el-table-column>
|
<el-table-column prop="IsNull" label="可空" show-overflow-tooltip>
|
<template #default="scope">
|
<el-tag type="success" v-if="scope.row.IsNull">是</el-tag>
|
<el-tag type="danger" v-else>否</el-tag>
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="Description" label="说明" show-overflow-tooltip />
|
<el-table-column label="操作" width="240" fixed="right" align="center" show-overflow-tooltip>
|
<template #default="scope">
|
<el-button icon="ele-Edit" size="small" text type="primary" @click="openOperatePropertyDialog(scope.row)">
|
编辑
|
</el-button>
|
<el-button icon="ele-Grid" size="small" text type="primary" @click="openDrawer(scope.row)"> 属性选项 </el-button>
|
|
<el-button icon="ele-Delete" size="small" text type="danger" @click="deleteCurrentRow(scope.row)"> 删除 </el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</el-col>
|
<!-- property 增加、修改数据对话框 -->
|
<el-dialog
|
:destroy-on-close="true"
|
v-model="propertyDialogIsShow"
|
width="500"
|
:close-on-click-modal="false"
|
@closed="closePropertyDialog"
|
>
|
<template #header>
|
<div style="color: #fff">
|
<SvgIcon :name="propertyDialogHeaderIcon" :size="16" style="margin-right: 3px; display: inline; vertical-align: middle" />
|
<span> {{ propertyDialogTitle }} </span>
|
</div>
|
</template>
|
|
<el-form :model="propertyDialogFormValue" ref="propertyDialogFormRef" :rules="propertyDialogFormRules" label-width="80">
|
<el-form-item label="名称" prop="Name">
|
<el-input placeholder="请输入名称" v-model="propertyDialogFormValue.Name"></el-input>
|
</el-form-item>
|
<el-form-item label="编码" prop="Code">
|
<el-input placeholder="请输入唯一编码" v-model="propertyDialogFormValue.Code"></el-input>
|
</el-form-item>
|
|
<el-form-item label="属性格式" prop="Format">
|
<el-select v-model="propertyDialogFormValue.Format" class="w100" filterable @change="selectFormatChange">
|
<el-option
|
v-for="item of Object.keys(FORMAT_MAP)"
|
:key="item"
|
:label="FORMAT_MAP[item]"
|
:value="parseInt(item)"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="单位名称" prop="UnitName">
|
<el-input v-model="propertyDialogFormValue.UnitName" clearable />
|
</el-form-item>
|
<el-form-item label="默认值" prop="DefaultValue">
|
<el-radio-group
|
class="w100"
|
v-if="propertyDialogFormValue.Format === PropertyFormatEnum.Boolean"
|
v-model="propertyDialogFormValue.DefaultValue"
|
>
|
<el-radio label="true" value="true"></el-radio>
|
<el-radio label="false" value="false"></el-radio>
|
</el-radio-group>
|
<el-input v-else v-model="propertyDialogFormValue.DefaultValue"></el-input>
|
</el-form-item>
|
<el-form-item label="是否可空" prop="IsNull">
|
<el-checkbox v-model="propertyDialogFormValue.IsNull" />
|
</el-form-item>
|
<el-form-item label="说明" prop="Description">
|
<el-input v-model="propertyDialogFormValue.Description" type="textarea" :rows="3" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div>
|
<el-button @click="closePropertyDialog">取 消</el-button>
|
<el-button type="primary" @click="submitPropertyFormValue">确 定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
<!-- propertyGroup 增加、修改数据对话框 -->
|
<el-dialog
|
:destroy-on-close="true"
|
v-model="propertyGroupDialogIsShow"
|
width="400"
|
:close-on-click-modal="false"
|
@closed="closePropertyGroupDialog"
|
>
|
<template #header>
|
<div style="color: #fff">
|
<SvgIcon
|
:name="propertyGroupDialogHeaderIcon"
|
:size="16"
|
style="margin-right: 3px; display: inline; vertical-align: middle"
|
/>
|
<span> {{ propertyGroupDialogTitle }} </span>
|
</div>
|
</template>
|
|
<el-form
|
:model="propertyGroupDialogFormValue"
|
ref="propertyGroupDialogFormRef"
|
:rules="propertyGroupDialogFormRules"
|
label-width="55"
|
>
|
<el-form-item label="名称" prop="Name">
|
<el-input placeholder="请输入名称" v-model="propertyGroupDialogFormValue.Name"></el-input>
|
</el-form-item>
|
|
<el-form-item label="说明" prop="Description">
|
<el-input placeholder="请输入说明" v-model="propertyGroupDialogFormValue.Description" type="textarea" :rows="3" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div>
|
<el-button @click="closePropertyGroupDialog">取 消</el-button>
|
<el-button type="primary" @click="submitPropertyGroupFormValue">确 定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
<!-- 属性选项修改、编辑dialog -->
|
<el-dialog
|
:destroy-on-close="true"
|
v-model="choiceDialogIsShow"
|
width="400"
|
:close-on-click-modal="false"
|
@closed="closeChoiceDialog"
|
>
|
<template #header>
|
<div style="color: #fff">
|
<SvgIcon :name="choiceDialogHeaderIcon" :size="16" style="margin-right: 3px; display: inline; vertical-align: middle" />
|
<span> {{ choiceDialogTitle }} </span>
|
</div>
|
</template>
|
|
<el-form :model="choiceDialogFormValue" ref="choiceDialogFormRef" :rules="choiceDialogFormRules" label-width="55">
|
<el-form-item label="名称" prop="Name">
|
<el-input placeholder="请输入名称" v-model="choiceDialogFormValue.Name"></el-input>
|
</el-form-item>
|
<el-form-item label="选项" prop="Choice">
|
<el-input placeholder="请输入选项" v-model="choiceDialogFormValue.Choice"></el-input>
|
</el-form-item>
|
<el-form-item label="说明" prop="Description">
|
<el-input placeholder="请输入说明" v-model="choiceDialogFormValue.Description" type="textarea" :rows="3" />
|
</el-form-item>
|
</el-form>
|
<template v-slot:footer>
|
<div>
|
<el-button @click="closeChoiceDialog">取 消</el-button>
|
<el-button type="primary" @click="submitChoiceFormValue">确 定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
<!-- 抽屉表格 -->
|
<div class="custom-drawer">
|
<el-drawer v-model="drawerIsShow" direction="rtl" size="30%">
|
<template #header>
|
<div>
|
<SvgIcon name="ele-Grid" :size="16" style="margin-right: 3px; display: inline; vertical-align: middle" />
|
<span> {{ currentProp?.Name + ' - 属性选项配置' }} </span>
|
</div>
|
</template>
|
<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
|
<!-- 查询、重置、排序、增加表单 -->
|
<el-form :inline="true" :model="choiceQueryParams">
|
<el-form-item>
|
<el-button icon="ele-Plus" @click="openOperateChoiceDialog()"> 增加 </el-button>
|
</el-form-item>
|
<el-form-item label="排序">
|
<el-switch
|
v-model="isChoiceTableDrag"
|
@change="handleChoiceTableDrag"
|
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="choiceTableLoading"
|
class="h100"
|
ref="draggableChoiceTableRef"
|
border
|
size="small"
|
row-key="ID"
|
:row-class-name="isChoiceTableDrag ? 'cursor-move' : 'cursor-pointer'"
|
:cell-style="{ textAlign: 'center' }"
|
:header-cell-style="{ textAlign: 'center' }"
|
:data="choiceTableData"
|
style="width: 100%"
|
highlight-current-row
|
>
|
<el-table-column prop="Name" label="名称" fixed="left" show-overflow-tooltip />
|
<el-table-column prop="Choice" label="选项" show-overflow-tooltip />
|
<el-table-column prop="Description" label="说明" show-overflow-tooltip />
|
<el-table-column label="操作" fixed="right" width="180" show-overflow-tooltip>
|
<template #default="scope">
|
<el-button icon="ele-Edit" size="small" text type="primary" @click="openOperateChoiceDialog(scope.row)">
|
编辑
|
</el-button>
|
<el-button icon="ele-Delete" size="small" text type="danger" @click="deleteCurrentChoiceRow(scope.row)">
|
删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</el-drawer>
|
</div>
|
</el-row>
|
</template>
|
|
<script setup lang="ts">
|
import type { FormInstance, FormRules } from 'element-plus';
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue';
|
import type { PropType } from 'vue';
|
import { ref, onMounted, computed, nextTick } from 'vue';
|
import { deepClone } from '/@/utils/other';
|
import { useQueryTable } from '/@/hooks/useQueryTable';
|
import { updateSort, useTableSort } from '/@/hooks/useTableSort';
|
import { useValidateUniqueness } from '/@/hooks/useValidateUniqueness';
|
import {
|
// 获取系统类型
|
GetSysTypeSelectTreeData,
|
// 属性接口
|
DeleteAProperty,
|
GetAllPropertyByID,
|
GetIsExistPropertyCode,
|
InsertAProperty,
|
UpdateAProperty,
|
UpdatePropertySorter,
|
// 属性组接口
|
GetPropertyGroupListTreeData,
|
DeleteAPropertyGroup,
|
InsertAPropertyGroup,
|
UpdateAPropertyGroup,
|
UpdatePropertyGroupSorter,
|
} from '/@/api/basic/property/propertyManage';
|
import {
|
DeleteAPropChoice,
|
GetAllPropChoice,
|
InsertAPropChoice,
|
UpdateAPropChoice,
|
UpdatePropChoiceSorter,
|
} from '/@/api/basic/property/propChoice';
|
|
import { FORMAT_MAP, PropertyFormatEnum } from '/@/projectCom/basic/types';
|
|
import { booleanRegex, dateRegex, integerRegex, numberRegex } from '/@/utils/toolsValidate';
|
import type { AxiosRequestConfig, AxiosResponse } from 'axios';
|
import { MODULE_CODE } from '/@/constants';
|
import { arrayIsEmpty } from '/@/utils/util';
|
const props = defineProps({
|
request: {
|
type: Function as PropType<(config: AxiosRequestConfig<any>) => Promise<AxiosResponse<any, any>>>,
|
},
|
});
|
|
//#region ====================== 左侧树数据，tree with select init ======================
|
const treeLoading = ref(false);
|
|
const selectTreeData = ref([]);
|
const currentSelectID = ref('');
|
const selectNodeChange = (data) => {
|
currentSelectID.value = data.LogicalID;
|
if (data.LogicalType === MODULE_CODE) {
|
listTreeData.value = [];
|
tableData.value = [];
|
return;
|
}
|
getListTreeData(true);
|
};
|
|
const getSelectTreeData = async () => {
|
treeLoading.value = true;
|
const res = await GetSysTypeSelectTreeData(props.request).finally(() => {
|
treeLoading.value = false;
|
});
|
if (res?.Code === 0) {
|
selectTreeData.value = res.Data || [];
|
const firstSelectTreeNode = selectTreeData.value[0]?.Children[0];
|
if (firstSelectTreeNode) {
|
selectNodeChange(firstSelectTreeNode);
|
} else {
|
listTreeData.value = [];
|
tableData.value = [];
|
}
|
} else {
|
ElMessage.error('获取系统类型列表失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
};
|
const leftTreeRef = ref(null);
|
const listTreeData = ref([]);
|
const currentListID = ref('');
|
const currentTreeNode = ref(null);
|
|
const handleClickNode = (data) => {
|
currentTreeNode.value = data;
|
nextTick(() => {
|
leftTreeRef.value?.treeRef.setCurrentKey(data.ID);
|
});
|
|
currentListID.value = data.ID;
|
getTableData();
|
};
|
const getListTreeData = async (selectFirst = false) => {
|
treeLoading.value = true;
|
const res = await GetPropertyGroupListTreeData(
|
{
|
TypeID: currentSelectID.value,
|
},
|
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 {
|
tableData.value = [];
|
currentTreeNode.value = null;
|
currentListID.value = null;
|
}
|
} else {
|
currentTreeNode.value && handleClickNode(currentTreeNode.value);
|
}
|
} 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();
|
},
|
UpdatePropertyGroupSorter,
|
() => {
|
handleClickNode(draggingNode.data);
|
},
|
undefined,
|
props.request
|
);
|
};
|
//#endregion
|
|
//#region ====================== 表格数据，table init ======================
|
const tableLoading = ref(false);
|
const tableData = ref([]);
|
const isDragStatus = ref(false);
|
const getTableData = async () => {
|
tableLoading.value = true;
|
const res = await GetAllPropertyByID({ GroupID: currentListID.value }, props.request).finally(() => {
|
tableLoading.value = false;
|
});
|
if (res?.Code === 0) {
|
tableData.value = res.Data || [];
|
} 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 DeleteAProperty(
|
{
|
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 { handleDragStatus, draggableTableRef } = useTableSort(
|
tableData,
|
UpdatePropertySorter,
|
getTableData,
|
undefined,
|
false,
|
props.request
|
);
|
|
const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(tableData, queryParams, getTableData);
|
|
//#endregion
|
|
const selectFormatChange = () => {
|
propertyDialogFormValue.value.DefaultValue = '';
|
propertyDialogFormRef.value.clearValidate(['DefaultValue']);
|
};
|
|
//#region ====================== 增加、修改记录操作, dialog init======================
|
const isEditPropertyDialog = ref(false);
|
const propertyDialogTitle = computed(() => {
|
return isEditPropertyDialog.value ? '修改属性' : '添加属性';
|
});
|
const propertyDialogHeaderIcon = computed(() => {
|
return isEditPropertyDialog.value ? 'ele-Edit' : 'ele-Plus';
|
});
|
const propertyDialogFormValue = ref(null);
|
const propertyDialogIsShow = ref(false);
|
const propertyDialogFormRef = ref<FormInstance>(null);
|
const propertyInitialCode = ref('');
|
|
const { uniquenessValidator: propertyCodeValidator } = useValidateUniqueness(
|
GetIsExistPropertyCode,
|
propertyInitialCode,
|
'编码',
|
'Code',
|
{
|
TypeID: currentSelectID,
|
},
|
false,
|
props.request
|
);
|
|
const defaultValueValidator = (rule: any, value: any, callback: any) => {
|
if (!value) {
|
callback();
|
} else if (!propertyDialogFormValue.value.Format) {
|
callback('请先选择属性格式，再填写默认值');
|
} else {
|
if (propertyDialogFormValue.value.Format === PropertyFormatEnum.Numeric && !numberRegex.test(value)) {
|
callback('请输入数字');
|
} else if (
|
[PropertyFormatEnum.Bigint, PropertyFormatEnum.Integer].includes(propertyDialogFormValue.value.Format) &&
|
!integerRegex.test(value)
|
) {
|
callback('请输入整数');
|
} else if (PropertyFormatEnum.Time === propertyDialogFormValue.value.Format && !dateRegex.test(value)) {
|
callback('请输入正确的日期格式（yyyy-MM-dd HH:mm:ss 或 yyyy-MM-dd）');
|
} else if (PropertyFormatEnum.Boolean === propertyDialogFormValue.value.Format && !booleanRegex.test(value)) {
|
callback('请选择 true 或 false');
|
} else {
|
callback();
|
}
|
}
|
};
|
|
const propertyDialogFormRules = ref<FormRules>({
|
Name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
Code: [{ required: true, validator: propertyCodeValidator as any, trigger: 'blur' }],
|
Format: [{ required: true, message: '请选择格式', trigger: 'change' }],
|
DefaultValue: [{ validator: defaultValueValidator as any, trigger: 'blur' }],
|
});
|
const openOperatePropertyDialog = (row?) => {
|
if (!currentListID.value) {
|
return ElMessage.warning('请先选择属性组！');
|
}
|
if (row) {
|
isEditPropertyDialog.value = true;
|
const { ID, Name, Format, UnitName, IsNull, DefaultValue, Code, Description } = row;
|
propertyInitialCode.value = Code;
|
propertyDialogFormValue.value = deepClone({ ID, Name, Format, UnitName, IsNull, DefaultValue, Code, Description });
|
} else {
|
isEditPropertyDialog.value = false;
|
propertyInitialCode.value = '';
|
propertyDialogFormValue.value = {
|
GroupID: currentListID.value,
|
Name: '',
|
Format: null,
|
UnitName: '',
|
IsNull: true,
|
DefaultValue: '',
|
Code: '',
|
Description: '',
|
};
|
}
|
propertyDialogIsShow.value = true;
|
};
|
|
const closePropertyDialog = () => {
|
propertyDialogIsShow.value = false;
|
propertyDialogFormRef.value.clearValidate();
|
};
|
|
const submitPropertyFormValue = async () => {
|
const valid = await propertyDialogFormRef.value.validate().catch(() => {});
|
if (!valid) return;
|
|
if (isEditPropertyDialog.value) {
|
const res = await UpdateAProperty(propertyDialogFormValue.value, props.request);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
getTableData();
|
closePropertyDialog();
|
ElMessage.success('修改属性成功');
|
} else {
|
ElMessage.error('修改属性失败');
|
}
|
} else {
|
ElMessage.error('修改属性失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
} else {
|
const res = await InsertAProperty(propertyDialogFormValue.value, props.request);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
getTableData();
|
closePropertyDialog();
|
ElMessage.success('添加属性成功');
|
} else {
|
ElMessage.error('添加属性失败');
|
}
|
} else {
|
ElMessage.error('添加属性失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
}
|
};
|
//#endregion
|
|
//#region ====================== 增加、删除属性组操作, dialog init======================
|
const isEditPropertyGroupDialog = ref(false);
|
const propertyGroupDialogTitle = computed(() => {
|
return isEditPropertyGroupDialog.value ? '修改属性组' : '添加属性组';
|
});
|
const propertyGroupDialogHeaderIcon = computed(() => {
|
return isEditPropertyGroupDialog.value ? 'ele-Edit' : 'ele-Plus';
|
});
|
const propertyGroupDialogFormValue = ref(null);
|
const propertyGroupDialogIsShow = ref(false);
|
const propertyGroupDialogFormRef = ref<FormInstance>(null);
|
|
const propertyGroupDialogFormRules = ref<FormRules>({
|
Name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
});
|
const openOperatePropertyGroupDialog = (data?) => {
|
if (data) {
|
isEditPropertyGroupDialog.value = true;
|
const { ID, Name, Description } = data;
|
propertyGroupDialogFormValue.value = deepClone({ ID, Name, Description });
|
} else {
|
isEditPropertyGroupDialog.value = false;
|
propertyGroupDialogFormValue.value = { TypeID: currentSelectID.value, Name: '', Description: '' };
|
}
|
propertyGroupDialogIsShow.value = true;
|
};
|
|
const closePropertyGroupDialog = () => {
|
propertyGroupDialogIsShow.value = false;
|
propertyGroupDialogFormRef.value.clearValidate();
|
};
|
|
const submitPropertyGroupFormValue = async () => {
|
const valid = await propertyGroupDialogFormRef.value.validate().catch(() => {});
|
if (!valid) return;
|
|
if (isEditPropertyGroupDialog.value) {
|
const res = await UpdateAPropertyGroup(propertyGroupDialogFormValue.value, props.request);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
getListTreeData();
|
closePropertyGroupDialog();
|
ElMessage.success('修改属性组成功');
|
} else {
|
ElMessage.error('修改属性组失败');
|
}
|
} else {
|
ElMessage.error('修改属性组失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
} else {
|
const res = await InsertAPropertyGroup(propertyGroupDialogFormValue.value, props.request);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
getListTreeData();
|
closePropertyGroupDialog();
|
ElMessage.success('添加属性组成功');
|
} else {
|
ElMessage.error('添加属性组失败');
|
}
|
} else {
|
ElMessage.error('添加属性组失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
}
|
};
|
//#endregion
|
|
//#region ====================== 删除左侧树属性组数据 ======================
|
|
const deleteCurrentPropertyGroup = (row: any) => {
|
ElMessageBox.confirm(`确定删除属性组：【${row.Name}】?`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(async () => {
|
const res = await DeleteAPropertyGroup(
|
{
|
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 ====================== 属性选项 drawer ======================
|
const drawerIsShow = ref(false);
|
const currentProp = ref(null);
|
|
const openDrawer = (row: any) => {
|
drawerIsShow.value = true;
|
currentProp.value = row;
|
getChoiceTableData();
|
};
|
//#endregion
|
//#region ====================== 属性选项CRUD ======================
|
//#region ====================== 获取、删除表格数据 ======================
|
const choiceTableLoading = ref(false);
|
const choiceTableData = ref([]);
|
const isChoiceTableDrag = ref(false);
|
const nextChoiceValue = computed(() => {
|
if (arrayIsEmpty(choiceTableData.value)) {
|
return '0';
|
} else {
|
const lastItem = choiceTableData.value.at(-1);
|
if (integerRegex.test(lastItem.Choice)) {
|
return Number(lastItem.Choice) + 1 + '';
|
} else {
|
return '';
|
}
|
}
|
});
|
const getChoiceTableData = async () => {
|
choiceTableLoading.value = true;
|
const res = await GetAllPropChoice({ PropID: currentProp.value.ID }, props.request).finally(() => {
|
choiceTableLoading.value = false;
|
});
|
if (res?.Code === 0) {
|
choiceTableData.value = res.Data || [];
|
} else {
|
ElMessage.error('获取属性选项失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
};
|
const deleteCurrentChoiceRow = (row: any) => {
|
ElMessageBox.confirm(`确定删除属性选项：【${row.Name}】?`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(async () => {
|
const res = await DeleteAPropChoice(
|
{
|
ID: row.ID,
|
},
|
props.request
|
);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
ElMessage.success('删除属性选项成功');
|
getChoiceTableData();
|
} else {
|
ElMessage.error('删除属性选项失败');
|
}
|
} else {
|
ElMessage.error('删除属性选项失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
});
|
};
|
//#endregion
|
|
const choiceQueryParams = ref({
|
Name: '',
|
});
|
const { handleDragStatus: handleChoiceTableDrag, draggableTableRef: draggableChoiceTableRef } = useTableSort(
|
choiceTableData,
|
UpdatePropChoiceSorter,
|
getChoiceTableData,
|
undefined,
|
false,
|
props.request
|
);
|
|
//#region ====================== 增加、修改记录操作, dialog init======================
|
const isEditChoiceDialog = ref(false);
|
const choiceDialogTitle = computed(() => {
|
return isEditChoiceDialog.value ? '修改属性选项' : '添加属性选项';
|
});
|
const choiceDialogHeaderIcon = computed(() => {
|
return isEditChoiceDialog.value ? 'ele-Edit' : 'ele-Plus';
|
});
|
const choiceDialogFormValue = ref(null);
|
const choiceDialogIsShow = ref(false);
|
const choiceDialogFormRef = ref<FormInstance>(null);
|
|
const choiceDialogFormRules = ref<FormRules>({
|
Name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
Choice: [{ required: true, message: '请输入属性选项', trigger: 'blur' }],
|
DefaultValue: [{ validator: defaultValueValidator, trigger: 'blur' }],
|
});
|
const openOperateChoiceDialog = (row?) => {
|
if (row) {
|
isEditChoiceDialog.value = true;
|
const { ID, Name, Choice, Description } = row;
|
choiceDialogFormValue.value = deepClone({ ID, Name, Choice, Description });
|
} else {
|
isEditChoiceDialog.value = false;
|
choiceDialogFormValue.value = { PropID: currentProp.value.ID, Name: '', Choice: nextChoiceValue.value, Description: '' };
|
}
|
choiceDialogIsShow.value = true;
|
};
|
|
const closeChoiceDialog = () => {
|
choiceDialogIsShow.value = false;
|
choiceDialogFormRef.value.clearValidate();
|
};
|
|
const submitChoiceFormValue = async () => {
|
const valid = await choiceDialogFormRef.value.validate().catch(() => {});
|
if (!valid) return;
|
|
if (isEditChoiceDialog.value) {
|
const res = await UpdateAPropChoice(choiceDialogFormValue.value, props.request);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
getChoiceTableData();
|
closeChoiceDialog();
|
ElMessage.success('修改属性选项成功');
|
} else {
|
ElMessage.error('修改属性选项失败');
|
}
|
} else {
|
ElMessage.error('修改属性选项失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
} else {
|
const res = await InsertAPropChoice(choiceDialogFormValue.value, props.request);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
getChoiceTableData();
|
closeChoiceDialog();
|
ElMessage.success('添加属性选项成功');
|
} else {
|
ElMessage.error('添加属性选项失败');
|
}
|
} else {
|
ElMessage.error('添加属性选项失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
}
|
};
|
//#endregion
|
|
onMounted(() => {
|
getSelectTreeData();
|
});
|
</script>
|
<style scoped lang="scss"></style>
|
