<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
|
title-name="类型列表"
|
:treedata="listTreeData"
|
:current-node-key="currentListID"
|
:default-props="{
|
children: 'Children',
|
label: 'LogicalName',
|
id: 'LogicalID',
|
}"
|
:folder-icon="(node, data) => data.LogicalType === MODULE_CODE"
|
:default-expand-all="true"
|
@click="handleClickNode"
|
>
|
</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>
|
<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"
|
: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 prop="Name" label="名称" fixed="left" show-overflow-tooltip />
|
<el-table-column prop="Description" width="550" label="说明" 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="openOperateDialog(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-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="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>
|
</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 } from 'vue';
|
import { deepClone } from '/@/utils/other';
|
import { useQueryTable } from '/@/hooks/useQueryTable';
|
import { useTableSort } from '/@/hooks/useTableSort';
|
import {
|
DeleteAFlag,
|
GetTypeListTreeData,
|
GetAllFlagByID,
|
GetIsExistFlagName,
|
InsertAFlag,
|
UpdateAFlag,
|
UpdateFlagSorter,
|
} from '/@/api/basic/flagInfo';
|
import { useValidateUniqueness } from '/@/hooks/useValidateUniqueness';
|
import type { AxiosRequestConfig, AxiosResponse } from 'axios';
|
import { MODULE_CODE } from '/@/constants';
|
|
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 currentTreeNode = ref(null);
|
|
const listTreeData = ref([]);
|
const currentListID = ref('');
|
const handleClickNode = (data) => {
|
currentTreeNode.value = data;
|
currentListID.value = data.LogicalID;
|
|
if (data.LogicalType === MODULE_CODE) {
|
tableData.value = [];
|
return;
|
}
|
|
getTableData();
|
};
|
const getListTreeData = async () => {
|
treeLoading.value = true;
|
const res = await GetTypeListTreeData(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 tableData = ref([]);
|
const isDragStatus = ref(false);
|
const getTableData = async () => {
|
tableLoading.value = true;
|
const res = await GetAllFlagByID({ TypeID: 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 DeleteAFlag(
|
{
|
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: '',
|
});
|
const { handleDragStatus, draggableTableRef } = useTableSort(
|
tableData,
|
UpdateFlagSorter,
|
getTableData,
|
undefined,
|
false,
|
props.request
|
);
|
|
const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(tableData, queryParams, getTableData);
|
|
//#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({
|
Name: '',
|
Description: '',
|
}) as any;
|
const dialogIsShow = ref(false);
|
const dialogFormRef = ref<FormInstance>(null);
|
|
const initialValue = ref('');
|
|
const { uniquenessValidator: nameValidator } = useValidateUniqueness(
|
GetIsExistFlagName,
|
initialValue,
|
'标签名称',
|
'Name',
|
{
|
TypeID: currentListID,
|
},
|
false,
|
props.request
|
);
|
|
//#endregion
|
|
const dialogFormRules = ref<FormRules>({
|
Name: [{ required: true, validator: nameValidator as any, trigger: 'blur' }],
|
});
|
const currentRow = ref(null);
|
const openOperateDialog = (row?) => {
|
if (!currentListID.value) {
|
return ElMessage.warning('请先选择类型！');
|
}
|
if (row) {
|
isEditDialog.value = true;
|
initialValue.value = row.Name;
|
currentRow.value = row;
|
const { ID, Name, Description } = row;
|
dialogFormValue.value = deepClone({ ID, Name, Description });
|
} else {
|
if (currentTreeNode.value.LogicalType === MODULE_CODE) return ElMessage.warning('请先选择系统类型再添加！');
|
initialValue.value = '';
|
isEditDialog.value = false;
|
dialogFormValue.value = { Name: '', Description: '' };
|
}
|
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 (isEditDialog.value) {
|
const res = await UpdateAFlag(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 InsertAFlag({ ...dialogFormValue.value, TypeID: currentListID.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)}` : ''));
|
}
|
}
|
};
|
|
//#endregion
|
|
onMounted(() => {
|
getListTreeData();
|
});
|
</script>
|
<style scoped lang="scss"></style>
|
