feat: 新增数据列表

yangyin

2024-08-29 78e2641ff81d172115279915d74f4271ea49a35e

feat: 新增数据列表

 src/api/login/UserMenuData.ts

@@ -72,7 +72,7 @@
                Path: '/knowledge/graph',
                Permission: '',
                Icon: 'ywifont ywicon-a-appround15',
                IsIframe: true,
                IsIframe: false,
                IsHide: false,
                Weight: 0,
                SortCode: 2,

 src/views/project/yw/knowledge/Graph.vue

@@ -1,4 +1,622 @@
<template><div>123</div></template>
<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>

<script setup lang="ts"></script>
<style scoped lang="scss"></style>
                <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="openOperateFormulaDialog()"> å¯¼å…¥æ•°æ® </el-button>
                </el-form-item>
            </el-form></template
        >
        <template #main
            ><!-- æ•°æ®å±•ç¤ºè¡¨æ ¼ -->
            <div class="flex-auto flex-column h-full">
                <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-Edit" size="small" text type="primary" @click="openOperateFormulaDialog(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="formulaDialogIsShow"
            width="530"
            :close-on-click-modal="false"
            @closed="closeFormulaDialog"
        >
            <template #header>
                <div style="color: #fff">
                    <SvgIcon :name="formulaDialogHeaderIcon" :size="16" style="margin-right: 3px; display: inline; vertical-align: middle" />
                    <span> {{ formulaDialogTitle }} </span>
                </div>
            </template>

            <el-form :model="formulaDialogFormValue" ref="formulaDialogFormRef" :rules="formulaDialogFormRules" label-width="78">
                <el-form-item label="名称" prop="Name">
                    <el-input placeholder="请输入名称" v-model="formulaDialogFormValue.Name"></el-input>
                </el-form-item>
                <el-form-item label="编码" prop="Code">
                    <el-input placeholder="请输入唯一编码" v-model="formulaDialogFormValue.Code"></el-input>
                </el-form-item>
                <el-form-item label="说明" prop="Description">
                    <el-input placeholder="请输入说明" v-model="formulaDialogFormValue.Description" type="textarea" :rows="3" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div>
                    <el-button @click="closeFormulaDialog">取 æ¶ˆ</el-button>
                    <el-button type="primary" @click="submitFormulaFormValue">ç¡® å®š</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 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,
});
//#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([]);
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 ====================== å¢žåŠ ã€ä¿®æ”¹è¡¨æ ¼è®°å½•æ“ä½œ, dialog init======================
const isEditFormulaDialog = ref(false);
const formulaDialogTitle = computed(() => {
    return isEditFormulaDialog.value ? '修改公式' : '添加公式';
});
const formulaDialogHeaderIcon = computed(() => {
    return isEditFormulaDialog.value ? 'ele-Edit' : 'ele-Plus';
});
const formulaDialogFormValue = ref(null);
const formulaDialogIsShow = ref(false);
const formulaDialogFormRef = ref<FormInstance>(null);
const formulaInitialCode = ref('');

const formulaDialogFormRules = ref<FormRules>({
    Name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    FormatType: [{ required: true, message: '请选择返回类型', trigger: 'change' }],
});
const openOperateFormulaDialog = (row?) => {
    if (row) {
        isEditFormulaDialog.value = true;
        const { ID, Name, FormatType, MeasureTypes, CronTypes, SourceTypes, Code, Description } = row;
        formulaInitialCode.value = Code;
        formulaDialogFormValue.value = deepClone({ ID, Name, FormatType, MeasureTypes, CronTypes, SourceTypes, Code, Description });
    } else {
        isEditFormulaDialog.value = false;
        formulaInitialCode.value = '';

        formulaDialogFormValue.value = {
            GroupID: currentListID.value,
            FormatType: null,
            MeasureTypes: [],
            CronTypes: [],
            SourceTypes: [],
            Name: '',
            Code: '',
            Description: '',
        };
    }
    formulaDialogIsShow.value = true;
};

const closeFormulaDialog = () => {
    formulaDialogIsShow.value = false;
    formulaDialogFormRef.value.clearValidate();
};

const submitFormulaFormValue = async () => {
    const valid = await formulaDialogFormRef.value.validate().catch(() => {});
    if (!valid) return;

    if (isEditFormulaDialog.value) {
        const res = await TableUpdate(formulaDialogFormValue.value, props.request);
        if (res?.Code === 0) {
            if (res.Data) {
                getCategoryTableData();
                closeFormulaDialog();
                ElMessage.success('修改公式成功');
            } else {
                ElMessage.error('修改公式失败');
            }
        } else {
            ElMessage.error('修改公式失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
        }
    } else {
        const res = await TableInsert(formulaDialogFormValue.value, props.request);
        if (res?.Code === 0) {
            if (res.Data) {
                getCategoryTableData();
                closeFormulaDialog();
                ElMessage.success('添加公式成功');
            } else {
                ElMessage.error('添加公式失败');
            }
        } else {
            ElMessage.error('添加公式失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
        }
    }
};
//#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>

 src/views/types/catalog/index.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,21 @@
export enum AnalyzeWay {
    All = 0,
    PendingAnalysis = 1,
    AnalyzingInProgress = 2,
    ImportCompleted = 3,
    AnalysisFailed = 4,
    Deleting = 5,
    ImportingInProgress = 6,
    ImportFailed = 7,
}

export const analyzeMap = {
    [AnalyzeWay.All]: '全部',
    [AnalyzeWay.PendingAnalysis]: '待解析',
    [AnalyzeWay.AnalyzingInProgress]: '解析中',
    [AnalyzeWay.ImportCompleted]: '导入完成',
    [AnalyzeWay.AnalysisFailed]: '解析失败',
    [AnalyzeWay.Deleting]: '删除中',
    [AnalyzeWay.ImportingInProgress]: '导入中',
    [AnalyzeWay.ImportFailed]: '导入失败',
} as const;