From 848a172fbe45de4f9b9d54b3a939f2446f9077f5 Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Wed, 10 Sep 2025 13:42:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=88=86=E7=B1=BB=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/api/data-collect/data-class-manage.js     |  10 +-
 src/components/DialogModel/index.vue          |  84 +++
 src/components/TableModel/index.vue           | 601 ++++++++++++++++++
 src/components/ToolbarModel/index.vue         | 241 +++++++
 .../data-collect/data-class-manage/config.js  |  15 +
 .../data-collect/data-class-manage/index.vue  | 361 +++--------
 .../data-class-manage/prop/dataClassForm.vue  | 187 ++++++
 8 files changed, 1207 insertions(+), 293 deletions(-)
 create mode 100644 src/components/DialogModel/index.vue
 create mode 100644 src/components/TableModel/index.vue
 create mode 100644 src/components/ToolbarModel/index.vue
 create mode 100644 src/views/data-collect/data-class-manage/config.js
 create mode 100644 src/views/data-collect/data-class-manage/prop/dataClassForm.vue

diff --git a/package.json b/package.json
index 4bb107f..80c31e0 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "lodash": "^4.17.21",
     "nprogress": "0.2.0",
     "quill": "2.0.2",
     "screenfull": "5.0.2",
diff --git a/src/api/data-collect/data-class-manage.js b/src/api/data-collect/data-class-manage.js
index e021a80..40057fe 100644
--- a/src/api/data-collect/data-class-manage.js
+++ b/src/api/data-collect/data-class-manage.js
@@ -3,7 +3,7 @@ import request from '@/utils/request'
 // 新增数据类型
 export function addDataClassAPI(data) {
     return request({
-        url: '/smartArchives/***',
+        url: '/smartArchives/data/classify/addKyDataClassify',
         method: 'POST',
         data: data,
     })
@@ -12,7 +12,7 @@ export function addDataClassAPI(data) {
 // 修改数据类型
 export function updateDataClassAPI(data) {
     return request({
-        url: '/smartArchives/***',
+        url: '/smartArchives/data/classify/updateKyDataClassify',
         method: 'POST',
         data: data,
     })
@@ -21,8 +21,8 @@ export function updateDataClassAPI(data) {
 // 删除数据类型
 export function deleteDataClassAPI(data) {
     return request({
-        url: '/smartArchives/***',
-        method: 'DELETE',
+        url: '/smartArchives/data/classify/delKyDataClassify',
+        method: 'POST',
         data: data,
     })
 }
@@ -30,7 +30,7 @@ export function deleteDataClassAPI(data) {
 // 查询数据类型列表
 export function getListDataClassAPI(data) {
     return request({
-        url: '/smartArchives/***',
+        url: '/smartArchives/data/classify/list',
         method: 'GET',
         params: data,
     })
diff --git a/src/components/DialogModel/index.vue b/src/components/DialogModel/index.vue
new file mode 100644
index 0000000..4e2002f
--- /dev/null
+++ b/src/components/DialogModel/index.vue
@@ -0,0 +1,84 @@
+<template>
+    <!-- 弹框组件 -->
+    <div>
+        <el-dialog
+            append-to-body
+            :title="dialogConfig.outerTitle"
+            v-if="dialogConfig.outerVisible"
+            :width="dialogConfig.outerWidth"
+            :before-close="handleCloseOuter"
+            :visible.sync="dialogConfig.outerVisible"
+            :style="{
+                '--el-dialog-min-height': dialogConfig.minHeight,
+                '--el-dialog-max-height': dialogConfig.maxHeight,
+            }"
+        >
+            <!-- 外层弹框内容 -->
+            <slot name="outerContent"> </slot>
+
+            <!-- 内层对话框 -->
+            <el-dialog
+                append-to-body
+                :title="dialogConfig.innerTitle"
+                :width="dialogConfig.innerWidth"
+                v-if="dialogConfig.innerVisible"
+                :before-close="handleCloseInner"
+                :visible.sync="dialogConfig.innerVisible"
+                :style="{
+                    '--el-dialog-min-height': dialogConfig.innerMinHeight,
+                    '--el-dialog-max-height': dialogConfig.innerMaxHeight,
+                }"
+            >
+                <!-- 内层弹框内容 -->
+                <slot name="innerContent"></slot>
+            </el-dialog>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        /* 配置项 */
+        dialogConfig: {
+            type: Object,
+            default: () => {
+                return {}
+            },
+        },
+    },
+
+    methods: {
+        /* 右上角关闭外层 */
+        handleCloseOuter() {
+            /* 通知父组件更改弹框显示值 */
+            this.$emit('closeDialogOuter', false)
+        },
+        /* 右上角关闭内层 */
+        handleCloseInner() {
+            /* 通知父组件更改弹框显示值 */
+            this.$emit('closeDialogInner', false)
+        },
+    },
+}
+</script>
+<style scoped lang="scss">
+::v-deep .el-dialog {
+    display: flex !important;
+    flex-direction: column !important;
+    margin: 0 !important;
+    position: absolute !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    height: var(--el-dialog-max-height) !important;
+    min-height: var(--el-dialog-min-height) !important;
+    max-height: var(--el-dialog-max-height) !important;
+    .el-dialog__body {
+        flex: 1 !important;
+        overflow-y: scroll !important;
+        padding: 20px 20px !important;
+        box-sizing: border-box !important;
+    }
+}
+</style>
diff --git a/src/components/TableModel/index.vue b/src/components/TableModel/index.vue
new file mode 100644
index 0000000..e71de13
--- /dev/null
+++ b/src/components/TableModel/index.vue
@@ -0,0 +1,601 @@
+<template>
+    <!-- 表格公共组件 -->
+    <div>
+        <!-- 表单搜索 -->
+        <el-form
+            :inline="true"
+            size="small"
+            ref="queryFormRef"
+            :rules="formRules"
+            v-show="showSearch"
+            :model="queryParams"
+            label-width="auto"
+        >
+            <el-form-item
+                :key="v"
+                :prop="item.f_model"
+                v-for="(item, v) in formLabel"
+                :label="item.isShow ? item.f_label : ''"
+            >
+                <el-input
+                    clearable
+                    :maxlength="item.f_max || 50"
+                    v-if="item.f_type === 'ipt'"
+                    v-model.trim="queryParams[item.f_model]"
+                    :placeholder="`请输入${item.f_label}`"
+                    :style="{ width: item.f_width || '180px' }"
+                />
+                <el-select
+                    clearable
+                    filterable
+                    v-if="item.f_type === 'sel'"
+                    v-model="queryParams[item.f_model]"
+                    :placeholder="`请选择${item.f_label}`"
+                    :style="{ width: item.f_width || '180px' }"
+                >
+                    <el-option
+                        :key="v"
+                        :label="sel.label"
+                        :value="sel.value"
+                        v-for="(sel, v) in item.f_selList"
+                    />
+                </el-select>
+                <el-cascader
+                    clearable
+                    style="width: 180px"
+                    :show-all-levels="false"
+                    :props="item.optionProps"
+                    :options="item.f_selList"
+                    v-if="item.f_type === 'selCasAdd'"
+                    v-model="queryParams[item.f_model]"
+                    @change="
+                        handleCasAdd(
+                            $event,
+                            item.f_model,
+                            cascadeFunc,
+                            extraTableProp,
+                        )
+                    "
+                />
+                <el-cascader
+                    style="width: 180px"
+                    :show-all-levels="false"
+                    :options="item.f_selList"
+                    :props="item.optionProps"
+                    v-if="item.f_type === 'selCas'"
+                    v-model="queryParams[item.f_model]"
+                    @change="handleCas($event, item.f_model)"
+                />
+                <el-date-picker
+                    type="date"
+                    style="width: 240px"
+                    value-format="yyyy-MM-dd"
+                    v-if="item.f_type === 'date'"
+                    v-model="queryParams[item.f_model]"
+                    :placeholder="`请选择${item.f_label}`"
+                />
+                <el-date-picker
+                    type="daterange"
+                    style="width: 240px"
+                    range-separator="至"
+                    value-format="yyyy-MM-dd"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    v-if="item.f_type === 'dateRange'"
+                    v-model="queryParams[item.f_model]"
+                    @change="onChangeTime($event, item.dateType)"
+                    :picker-options="pickerOptions"
+                />
+                <el-input-number
+                    :min="0"
+                    style="width: 240px"
+                    v-if="item.f_type === 'num'"
+                    v-model="queryParams[item.f_model]"
+                />
+            </el-form-item>
+            <el-form-item v-if="showBtnCrews">
+                <el-button
+                    size="mini"
+                    type="primary"
+                    icon="el-icon-search"
+                    @click="handleQuery"
+                >
+                    查询
+                </el-button>
+                <el-button
+                    plain
+                    size="mini"
+                    type="warning"
+                    icon="el-icon-refresh"
+                    @click="resetQuery"
+                >
+                    重置
+                </el-button>
+
+                <slot name="btn" :queryParams="queryParams"></slot>
+            </el-form-item>
+        </el-form>
+        <!-- 按钮集群 -->
+        <el-row class="btn-container">
+            <ToolbarModel
+                v-if="showRightTools"
+                :columns="columnCheckList"
+                @queryTable="getTableList"
+                :showSearch.sync="showSearch"
+                :handleShow.sync="handleShow"
+                :indexNumShow.sync="indexNumShow"
+                :selectionShow.sync="selectionShow"
+                :isSelectShow="isSelectShow"
+                :showOperation="showOperation"
+            />
+        </el-row>
+        <!-- 表格 -->
+        <el-table
+            border
+            ref="tableRef"
+            :data="tableList"
+            style="width: 100%"
+            v-loading="loading"
+            select-on-indeterminate
+            @selection-change="handleSelectionChange"
+        >
+            <el-table-column
+                width="45"
+                align="center"
+                type="selection"
+                :selectable="selectable"
+                v-if="selectionShow && isSelectShow"
+            />
+            <el-table-column
+                fixed
+                width="55"
+                label="序号"
+                type="index"
+                align="center"
+                :index="
+                    (index) =>
+                        (queryParams.pageNum - 1) * queryParams.pageSize +
+                        index +
+                        1
+                "
+                v-if="indexNumShow"
+            />
+            <el-table-column
+                :key="v"
+                align="center"
+                :label="item.t_label"
+                :prop="item.t_props"
+                :width="item.t_width"
+                show-overflow-tooltip
+                v-for="(item, v) in tableColumCheckProps"
+            >
+                <template slot-scope="scope">
+                    <!-- 判断当前列数据是否需要使用插槽的数据 -->
+                    <template v-if="item.t_slot">
+                        <slot :data="scope.row" :name="item.t_slot"></slot>
+                    </template>
+                    <template v-else>
+                        {{ scope.row[item.t_props] || '-' }}
+                    </template>
+                </template>
+            </el-table-column>
+            <el-table-column
+                align="center"
+                label="操作"
+                :min-width="dynamicWidth"
+                :show-overflow-tooltip="false"
+                v-if="handleShow && showOperation"
+            >
+                <template slot-scope="{ row }">
+                    <div class="optionDivRef">
+                        <slot :data="row" name="handle">-</slot>
+                    </div>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <!-- 分页 -->
+        <pagination
+            :total="total"
+            @pagination="getTableList"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+        />
+    </div>
+</template>
+
+<script>
+import ToolbarModel from '../ToolbarModel'
+export default {
+    components: { ToolbarModel },
+    props: {
+        // 表单查询条件
+        formLabel: {
+            type: Array,
+            default: () => [],
+        },
+        // 列表请求接口
+        requestApi: {
+            type: Function,
+            default: () => function () {},
+        },
+        // 列表配置项
+        columnsList: {
+            type: Array,
+            default: () => [],
+        },
+        // 传递的额外参数
+        sendParams: {
+            type: Object,
+            default: () => null,
+        },
+        // 是否显示查询按钮 默认显示
+        showBtnCrews: {
+            type: Boolean,
+            default: true,
+        },
+        // 级联选择
+        cascadeFunc: {
+            type: Function,
+            default: () => null,
+        },
+        // 级联选择 额外参数
+        extraTableProp: {
+            type: Object,
+            default: () => null,
+        },
+        // 是否显示操作列 默认不显示
+        showOperation: {
+            type: Boolean,
+            default: false,
+        },
+        // 是否显示右侧工具栏 默认不显示
+        showRightTools: {
+            type: Boolean,
+            default: false,
+        },
+
+        // 复选框是否勾选
+        selectable: {
+            type: Function,
+            default: () => {
+                return true
+            },
+        },
+        // 是否显示复选框 由父组件传递 默认不显示
+        isSelectShow: {
+            type: Boolean,
+            default: false,
+        },
+        // 测试时使用的数据源
+        testTableList: {
+            type: Array,
+            default: () => [],
+        },
+        // 是否显示当天日期
+        isCurrentDate: {
+            type: Boolean,
+            default: false,
+        },
+        // 是否只可选择一个月的范围
+        isOneMonth: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    computed: {
+        /* 根据操作栏控制表头是否显示 */
+        tableColumCheckProps() {
+            return this.columnCheckList.filter((e) => {
+                return e.checked != false
+            })
+        },
+    },
+    watch: {
+        columnsList: {
+            handler(nv, ov) {
+                if (nv !== ov) {
+                    this.columnsList = nv
+                    this.columnCheckList = this.columnsList.map((e) => {
+                        this.$set(e, 'checked', true)
+                        return e
+                    })
+                }
+            },
+            deep: true,
+        },
+    },
+    data() {
+        return {
+            // 表单校验
+            formRules: {},
+            loading: false,
+            // 列表接口查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+            },
+            // 列表数据源
+            tableList: [],
+            // 选中数据
+            selectedData: [],
+            // 列表数据条数
+            total: 0,
+            // 搜索区域是否隐藏
+            showSearch: true,
+            // 是否显示复选框
+            selectionShow: true,
+            // 是否显示序号
+            indexNumShow: true,
+            // 是否显示操作列
+            handleShow: true,
+            // 列表每列 label
+            columnCheckList: [],
+            // 操作列最小宽度
+            dynamicWidth: 0,
+            // 自增id
+            idCount: 1,
+            // 日期查询条件 字段名称
+            typeList: [],
+
+            // 日期选择器配置
+            pickerOptions: {},
+        }
+    },
+
+    created() {
+        this.columnCheckList = this.columnsList.map((e) => {
+            this.$set(e, 'checked', true)
+            return e
+        })
+        /* 生成查询参数 */
+        this.formLabel.map((e) => {
+            if (e.f_type === 'dateRange') {
+                this.$set(this.queryParams, e.dateType[0], '')
+                this.$set(this.queryParams, e.dateType[1], '')
+                this.typeList = e.dateType
+
+                if (this.isOneMonth) {
+                    this.pickerOptions = {
+                        disabledDate: (time) => {
+                            // 禁用今天之后的日期
+                            return time.getTime() > Date.now()
+                        },
+                        onPick: ({ maxDate, minDate }) => {
+                            // 当选择第一个日期后，设置第二个日期的可选范围
+                            this.pickerOptions.minDate = minDate
+                            if (minDate) {
+                                const maxRangeDate = new Date(minDate)
+                                maxRangeDate.setMonth(minDate.getMonth() + 1)
+                                this.pickerOptions.maxDate = maxRangeDate
+                            } else {
+                                this.pickerOptions.maxDate = null
+                            }
+                        },
+                    }
+                }
+            } else {
+                this.$set(this.queryParams, e.f_model, '')
+            }
+        })
+        if (this.sendParams !== null) {
+            for (let key in this.sendParams) {
+                this.$set(this.queryParams, key, this.sendParams[key])
+            }
+        }
+        this.getTableList()
+    },
+    updated() {
+        // 更新时重新计算操作列需要的最小宽度 确保展示无误
+        this.dynamicWidth = this.getOperatorWidth()
+    },
+    methods: {
+        /** 获取列表数据 */
+        async getTableList() {
+            try {
+                if (
+                    this.queryParams.time &&
+                    this.queryParams.time.length !== 0
+                ) {
+                    this.queryParams[this.typeList[0]] =
+                        this.queryParams.time[0]
+                    this.queryParams[this.typeList[1]] =
+                        this.queryParams.time[1]
+                }
+
+                const params = { ...this.queryParams }
+                const queryParams = JSON.parse(JSON.stringify(params))
+                delete queryParams.time // 剔除无关参数
+                // console.log(
+                //     `%c🔍 列表查询入参 %c`,
+                //     'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
+                //     '',
+                //     queryParams,
+                // )
+                this.loading = true
+                const res = await this.requestApi(queryParams)
+                if (res.code === 200) {
+                    this.tableList = res.rows
+                    this.total = res.total
+                }
+                this.loading = false
+            } catch (error) {
+                this.loading = false
+                this.tableList = this.testTableList
+            }
+        },
+        /** 查询按钮 */
+        handleQuery() {
+            this.getTableList()
+        },
+
+        /** 重置按钮 */
+        resetQuery() {
+            this.$refs.queryFormRef.resetFields()
+            if (this.typeList.length > 1) {
+                if (this.isCurrentDate) {
+                    this.queryParams[this.typeList[0]] = new Date()
+                        .toISOString()
+                        .split('T')[0]
+                    this.queryParams[this.typeList[1]] = new Date()
+                        .toISOString()
+                        .split('T')[0]
+                    this.queryParams.time = [
+                        new Date().toISOString().split('T')[0],
+                        new Date().toISOString().split('T')[0],
+                    ]
+                } else {
+                    this.queryParams[this.typeList[0]] = ''
+                    this.queryParams[this.typeList[1]] = ''
+                    this.queryParams.time = []
+                }
+            } else {
+                this.queryParams[this.typeList[0]] = ''
+            }
+            this.queryParams.pageNum = 1
+            this.queryParams.pageSize = 10
+            this.getTableList()
+        },
+        /** 级联选择 */
+        handleCas(e, val) {
+            this.queryParams[val] = e[e.length - 1]
+        },
+        /** 级联选择只选最后一级 */
+        handleCasAdd(e, val, func, prop) {
+            if (e.length !== 0) {
+                this.queryParams[val] = e[e.length - 1]
+                let setObj = {}
+                // 合并
+                if (prop) {
+                    Object.assign(setObj, prop)
+                }
+                // 设置id自增
+                this.$set(setObj, 'id', this.idCount)
+                this.idCount++
+                // 获取单位
+                func({
+                    id: e[e.length - 1],
+                })
+                    .then((res) => {
+                        this.$set(setObj, 'name', res.data.parentName)
+                        this.$set(setObj, 'unitName', res.data.unitName)
+                        this.$set(setObj, 'typeName', res.data.name)
+                    })
+                    .catch((err) => {})
+                for (let key in this.queryParams) {
+                    this.$set(setObj, key, this.queryParams[key])
+                }
+                this.tableList.unshift(setObj)
+                console.log(this.tableList)
+            }
+        },
+        /** 动态设置操作列的列宽 */
+        getOperatorWidth() {
+            const operatorColumn =
+                document.getElementsByClassName('optionDivRef')
+
+            // 默认宽度
+            let width = 100
+            // 内间距
+            let paddingSpacing = 0
+            // 按钮数量
+            let buttonCount = 0
+
+            if (operatorColumn.length > 0) {
+                Array.prototype.forEach.call(operatorColumn, function (item) {
+                    // 最宽的宽度
+                    width = width > item.offsetWidth ? width : item.offsetWidth
+                    const buttons = item.getElementsByClassName('el-button')
+                    buttonCount = buttons.length
+                    buttonCount =
+                        buttonCount > buttons.length
+                            ? buttonCount
+                            : buttons.length
+                })
+                return width + 10
+            }
+        },
+
+        queryTableList(params) {
+            Object.assign(this.queryParams, params)
+            this.getTableList()
+        },
+
+        handleSelectionChange(e) {
+            this.selectedData = e
+        },
+
+        /* 时间change事件 */
+        onChangeTime(e, type) {
+            if (this.isOneMonth) {
+                if (e && e.length === 2) {
+                    const [start, end] = e
+                    const startDate = new Date(start)
+                    const endDate = new Date(end)
+                    // 计算两个日期之间的天数差
+                    const diffTime = Math.abs(endDate - startDate)
+                    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+                    // 如果超过31天，自动调整结束日期
+                    if (diffDays > 31) {
+                        const newEndDate = new Date(startDate)
+                        newEndDate.setDate(startDate.getDate() + 31)
+                        this.queryParams.time = [
+                            start,
+                            newEndDate.toISOString().split('T')[0],
+                        ]
+                        this.$message.warning(
+                            '选择的时间范围超过31天，查询将会缓慢，已自动调整',
+                        )
+                    }
+                }
+            } else {
+                const [_1, _2] = type
+                const [_time1, _time2] = e
+                if (e.length > 0) {
+                    this.queryParams[_1] = _time1
+                    this.queryParams[_2] = _time2
+                }
+            }
+        },
+    },
+
+    watch: {
+        sendParams: {
+            handler(nv, ov) {
+                if (nv) {
+                    for (let key in nv) {
+                        this.$set(this.queryParams, key, this.sendParams[key])
+                    }
+                }
+            },
+            deep: true,
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.btn-container {
+    margin-bottom: 6px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+::v-deep .btn-handler {
+    display: flex;
+    flex: 1;
+
+    .el-button {
+        padding: 6px 18px;
+    }
+}
+
+::v-deep .optionDivRef {
+    white-space: nowrap;
+    display: inline-block;
+
+    .el-button {
+        padding: 6px 12px;
+    }
+}
+</style>
diff --git a/src/components/ToolbarModel/index.vue b/src/components/ToolbarModel/index.vue
new file mode 100644
index 0000000..050d783
--- /dev/null
+++ b/src/components/ToolbarModel/index.vue
@@ -0,0 +1,241 @@
+<template>
+    <div class="top-right-btn" :style="style">
+        <el-row>
+            <el-tooltip
+                class="item"
+                effect="dark"
+                :content="showSearch ? '隐藏搜索' : '显示搜索'"
+                placement="top"
+                v-if="search"
+            >
+                <el-button
+                    size="mini"
+                    circle
+                    icon="el-icon-search"
+                    @click="toggleSearch()"
+                />
+            </el-tooltip>
+            <el-tooltip
+                class="item"
+                effect="dark"
+                content="刷新"
+                placement="top"
+            >
+                <el-button
+                    size="mini"
+                    circle
+                    icon="el-icon-refresh"
+                    @click="refresh()"
+                />
+            </el-tooltip>
+            <el-tooltip
+                class="item"
+                effect="dark"
+                content="列表筛选"
+                placement="top"
+            >
+                <el-dropdown
+                    trigger="click"
+                    :hide-on-click="false"
+                    style="padding-left: 12px"
+                >
+                    <el-button size="mini" circle icon="el-icon-menu" />
+                    <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item v-if="isSelectShow">
+                            <el-checkbox
+                                :checked="selectionShow"
+                                @change="
+                                    () => {
+                                        this.$emit(
+                                            'update:selectionShow',
+                                            !this.selectionShow,
+                                        )
+                                    }
+                                "
+                            >
+                                复选框
+                            </el-checkbox>
+                        </el-dropdown-item>
+                        <el-dropdown-item>
+                            <el-checkbox
+                                :checked="indexNumShow"
+                                @change="
+                                    () => {
+                                        this.$emit(
+                                            'update:indexNumShow',
+                                            !this.indexNumShow,
+                                        )
+                                    }
+                                "
+                            >
+                                序号
+                            </el-checkbox>
+                        </el-dropdown-item>
+                        <el-dropdown-item v-if="showOperation">
+                            <el-checkbox
+                                :checked="handleShow"
+                                @change="
+                                    () => {
+                                        this.$emit(
+                                            'update:handleShow',
+                                            !this.handleShow,
+                                        )
+                                    }
+                                "
+                            >
+                                操作
+                            </el-checkbox>
+                        </el-dropdown-item>
+
+                        <template v-for="(item, index) in columns">
+                            <el-dropdown-item :key="index">
+                                <el-checkbox
+                                    :checked="item.checked"
+                                    @change="
+                                        checkboxChange($event, item.t_label)
+                                    "
+                                    :label="item.t_label"
+                                    >{{ item.t_label }}</el-checkbox
+                                >
+                            </el-dropdown-item>
+                        </template>
+                    </el-dropdown-menu>
+                </el-dropdown>
+            </el-tooltip>
+        </el-row>
+    </div>
+</template>
+<script>
+export default {
+    name: 'RightToolbar',
+    data() {
+        return {
+            // 显隐数据
+            value: [],
+            // 弹出层标题
+            title: '显示/隐藏',
+            // 是否显示弹出层
+            open: false,
+        }
+    },
+    props: {
+        /* 是否显示检索条件 */
+        showSearch: {
+            type: Boolean,
+            default: true,
+        },
+        /* 列表复选框显示 */
+        selectionShow: {
+            type: Boolean,
+            default: true,
+        },
+        /* 列表序号显示 */
+        indexNumShow: {
+            type: Boolean,
+            default: true,
+        },
+        /* 列表操作列显示 */
+        handleShow: {
+            type: Boolean,
+            default: true,
+        },
+        /* 显隐列信息 */
+        columns: {
+            type: Array,
+        },
+        /* 是否显示检索图标 */
+        search: {
+            type: Boolean,
+            default: true,
+        },
+        /* 显隐列类型（transfer穿梭框、checkbox复选框） */
+        showColumnsType: {
+            type: String,
+            default: 'checkbox',
+        },
+        /* 右外边距 */
+        gutter: {
+            type: Number,
+            default: 10,
+        },
+
+        /* 是否显示复选框 */
+        isSelectShow: {
+            type: Boolean,
+            default: false,
+        },
+        /* 是否显示复选框 */
+        showOperation: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    computed: {
+        style() {
+            const ret = {}
+            if (this.gutter) {
+                ret.marginRight = `${this.gutter / 2}px`
+            }
+            return ret
+        },
+    },
+    created() {
+        if (this.showColumnsType == 'transfer') {
+            // 显隐列初始默认隐藏列
+            for (let item in this.columns) {
+                if (this.columns[item].visible === false) {
+                    this.value.push(parseInt(item))
+                }
+            }
+        }
+    },
+    methods: {
+        // 搜索
+        toggleSearch() {
+            this.$emit('update:showSearch', !this.showSearch)
+        },
+
+        // // 搜索
+        // toggleSearch() {
+        //     this.$emit('update:showSearch', !this.showSearch)
+        // },
+        // 刷新
+        refresh() {
+            this.$emit('queryTable')
+        },
+        // 右侧列表元素变化
+        dataChange(data) {
+            for (let item in this.columns) {
+                const key = this.columns[item].key
+                this.columns[item].visible = !data.includes(key)
+            }
+        },
+        // 打开显隐列dialog
+        showColumn() {
+            this.open = true
+        },
+        // 勾选
+        checkboxChange(event, label) {
+            let checkList = this.columns
+            checkList.forEach((e) => {
+                if (e.t_label === label) {
+                    e.checked = event
+                }
+            })
+
+            this.$emit('checkboxChange', checkList)
+        },
+    },
+}
+</script>
+<style lang="scss" scoped>
+::v-deep .el-transfer__button {
+    border-radius: 50%;
+    padding: 12px;
+    display: block;
+    margin-left: 0px;
+}
+::v-deep .el-transfer__button:first-child {
+    margin-bottom: 10px;
+}
+</style>
diff --git a/src/views/data-collect/data-class-manage/config.js b/src/views/data-collect/data-class-manage/config.js
new file mode 100644
index 0000000..0397709
--- /dev/null
+++ b/src/views/data-collect/data-class-manage/config.js
@@ -0,0 +1,15 @@
+export const formLabel = [
+    {
+        isShow: false, // 是否展示label
+        f_type: 'ipt',
+        f_label: '数据类型名称',
+        f_model: 'dataTypeName',
+    },
+]
+
+export const columnsList = [
+    { t_props: 'dataTypeName', t_label: '数据类型名称' },
+    { t_props: 'updateUserName', t_label: '更新人' },
+    { t_props: 'updateTime', t_label: '更新时间' },
+    { t_props: 'remark', t_label: '备注' }
+]
\ No newline at end of file
diff --git a/src/views/data-collect/data-class-manage/index.vue b/src/views/data-collect/data-class-manage/index.vue
index 66bab5f..a50c3e1 100644
--- a/src/views/data-collect/data-class-manage/index.vue
+++ b/src/views/data-collect/data-class-manage/index.vue
@@ -1,325 +1,110 @@
 <template>
     <!-- 数据分类管理 -->
     <div class="app-container">
-        <!-- 查询 -->
-        <el-form
-            size="small"
-            ref="queryForm"
-            :inline="true"
-            :model="queryParams"
-        >
-            <el-form-item prop="dataTypeName">
-                <el-input
-                    clearable
-                    placeholder="数据类型名称"
-                    v-model="queryParams.dataTypeName"
-                    @keyup.enter.native="onHandleQuery"
-                />
-            </el-form-item>
-
-            <el-form-item>
-                <el-button
-                    size="mini"
-                    type="primary"
-                    icon="el-icon-search"
-                    @click="onHandleQuery"
-                >
-                    查询
-                </el-button>
-                <el-button
-                    size="mini"
-                    icon="el-icon-refresh"
-                    @click="onResetQuery"
-                >
-                    重置
-                </el-button>
-
-                <el-button
-                    size="mini"
-                    type="primary"
-                    icon="el-icon-plus"
-                    @click="onHandleAdd"
-                >
+        <TableModel :formLabel="formLabel" :showOperation="true" :showRightTools="true" ref="dataClassTableRef"
+            :columnsList="columnsList" :request-api="getListDataClassAPI">
+            <template slot="btn">
+                <el-button plain size="mini" type="primary" icon="el-icon-plus" v-hasPermi="['data:classify:add']"
+                    @click="handleAdd">
                     新增
                 </el-button>
-            </el-form-item>
-        </el-form>
+            </template>
 
-        <!-- 表格 -->
-        <el-table :data="tableData" border>
-            <el-table-column
-                width="50"
-                type="index"
-                label="序号"
-                align="center"
-            />
-            <el-table-column
-                align="center"
-                :key="column.prop"
-                :prop="column.prop"
-                :label="column.label"
-                v-for="column in columns"
-                :show-overflow-tooltip="true"
-            />
-
-            <el-table-column align="center" label="操作" width="140">
-                <template slot-scope="{ row }">
-                    <el-button
-                        size="mini"
-                        type="text"
-                        icon="el-icon-edit"
-                        style="color: #409eff"
-                        @click="onHandleEdit(row)"
-                    >
-                        编辑
-                    </el-button>
-                    <el-button
-                        size="mini"
-                        type="text"
-                        icon="el-icon-delete"
-                        style="color: #f56c6c"
-                        @click="onHandleDelete(row.id)"
-                    >
-                        删除
-                    </el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-
-        <pagination
-            :total="total"
-            :page.sync="queryParams.pageNum"
-            :limit.sync="queryParams.pageSize"
-            @pagination="getListDataClassFun"
-        />
-
-        <!-- 新增修改弹框 -->
-        <el-dialog
-            width="40%"
-            append-to-body
-            :title="addAndEditDialogTitle"
-            :visible.sync="addAndEditDialogVisible"
-        >
-            <el-form
-                label-width="auto"
-                :model="addAndEditForm"
-                :rules="addAndEditRules"
-                ref="addAndEditFormRef"
-            >
-                <el-form-item label="数据类型名称" prop="dataTypeName">
-                    <el-input
-                        clearable
-                        maxlength="60"
-                        show-word-limit
-                        placeholder="请输入数据类型名称"
-                        v-model="addAndEditForm.dataTypeName"
-                    />
-                </el-form-item>
-                <el-form-item label="备注" prop="remark">
-                    <el-input
-                        clearable
-                        type="textarea"
-                        show-word-limit
-                        maxlength="120"
-                        placeholder="请输入备注"
-                        v-model="addAndEditForm.remark"
-                        :autosize="{ minRows: 4, maxRows: 6 }"
-                    />
-                </el-form-item>
-
-                <el-form-item>
-                    <el-button type="primary" @click="onHandleAddAndEditSubmit">
-                        确定
-                    </el-button>
-                    <el-button @click="onHandleAddAndEditCancel">
-                        取消
-                    </el-button>
-                </el-form-item>
-            </el-form>
-        </el-dialog>
+            <template slot="handle" slot-scope="{ data }">
+                <el-button plain size="mini" type="primary" icon="el-icon-edit" v-hasPermi="['data:classify:update']"
+                    @click="handleUpdate(data)">
+                    修改
+                </el-button>
+                <el-button plain size="mini" type="danger" icon="el-icon-delete" v-hasPermi="['data:classify:del']"
+                    @click="handleDelete(data)">
+                    删除
+                </el-button>
+            </template>
+        </TableModel>
+        <!-- 新增/编辑 -->
+        <DataClassForm v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
+            @closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :disabled="loading" :width="600" />
     </div>
 </template>
 
 <script>
+import TableModel from '@/components/TableModel'
+import { columnsList, formLabel } from './config'
 import {
-    addDataClassAPI,
-    updateDataClassAPI,
     deleteDataClassAPI,
     getListDataClassAPI,
 } from '@/api/data-collect/data-class-manage'
+import DataClassForm from './prop/dataClassForm'
+
 
 export default {
     name: 'DataClassManage',
-
+    components: {
+        TableModel,
+        DataClassForm
+    },
     data() {
         return {
-            total: 0,
-            addAndEditDialogVisible: false,
-            addAndEditDialogTitle: '新增',
-            // 表格数据
-            tableData: [
-                {
-                    dataTypeName: '业主项目部数据',
-                    updateBy: '李思思',
-                    updateTime: '2025-12-30 20:00:00',
-                    remark: '测试数据1',
-                },
-                {
-                    dataTypeName: '业主项目部数据',
-                    updateBy: '李思思',
-                    updateTime: '2025-12-30 20:00:00',
-                    remark: '测试数据1',
-                },
-                {
-                    dataTypeName: '业主项目部数据',
-                    updateBy: '李思思',
-                    updateTime: '2025-12-30 20:00:00',
-                    remark: '测试数据1',
-                },
-            ],
-            // 表格列
-            columns: [
-                {
-                    label: '数据类型名称',
-                    prop: 'dataTypeName',
-                },
-                {
-                    label: '更新人',
-                    prop: 'updateBy',
-                },
-                {
-                    label: '更新时间',
-                    prop: 'dataTypeName',
-                },
-                {
-                    label: '备注',
-                    prop: 'dataTypeName',
-                },
-            ],
-
-            // 查询参数
-            queryParams: {
-                id: null, // 修改的id
-                pageNum: 1,
-                pageSize: 10,
-                dataTypeName: '',
-            },
-
-            // 新增修改表单
-            addAndEditForm: {
-                remark: '',
-                dataTypeName: '',
-            },
-
-            // 新增修改表单验证
-            addAndEditRules: {
-                dataTypeName: [
-                    {
-                        required: true,
-                        trigger: 'blur',
-                        message: '请输入数据类型名称',
-                    },
-                ],
-            },
+            formLabel,
+            columnsList,
+            getListDataClassAPI,
+            title: "",
+            isflag: false,
+            isAdd: '',
+            row: {},
+            loading: false,
         }
     },
 
     created() {
-        // this.getListDataClassFun()
+
     },
 
     methods: {
-        // 获取数据类型列表
-        async getListDataClassFun() {
-            const res = await getListDataClassAPI(this.queryParams)
-            this.tableData = res.rows
-            this.total = res.total
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.title = "新增";
+            this.isAdd = 'add';
+            this.isflag = true;
         },
-        // 查询按钮
-        onHandleQuery() {
-            this.getListDataClassFun()
+        closeDialog() {
+            this.isflag = false;
         },
-        // 重置按钮
-        onResetQuery() {
-            this.queryParams = {
-                pageNum: 1,
-                pageSize: 10,
-                dataTypeName: undefined,
-            }
-            this.getListDataClassFun()
+        showColose() {
+            this.isflag = false;
         },
-        // 新增按钮
-        onHandleAdd() {
-            this.addAndEditForm.id = null
-            this.addAndEditDialogTitle = '新增'
-            this.addAndEditDialogVisible = true
+        /** 修改操作 */
+        handleUpdate(row) {
+            this.title = "修改";
+            this.isAdd = 'edit';
+            this.row = row;
+            this.isflag = true;
         },
-        // 编辑按钮
-        onHandleEdit(row) {
-            const { dataTypeName, remark, id } = row // 只取出需要的数据
-            Object.assign(this.addAndEditForm, { dataTypeName, remark, id })
-            this.addAndEditDialogTitle = '编辑'
-            this.addAndEditDialogVisible = true
+        /* 搜索操作 */
+        handleQuery() {
+            this.$refs.dataClassTableRef.getTableList()
         },
-        // 删除按钮
-        onHandleDelete(id) {
-            this.$modal
-                .confirm(
-                    '是否确认删除数据类型名称"' +
-                        row.dataTypeName +
-                        '"的数据项？',
-                )
-                .then(async () => {
-                    const res = await deleteDataClassAPI({ id })
+        /** 删除操作 */
+        handleDelete(row) {
+            this.$modal.confirm(`是否确认删除数据类型名称为"${row.dataTypeName}"的数据项？`).then(() => {
+                // 显示加载遮罩
+                this.$modal.loading("正在删除，请稍候...");
+                deleteDataClassAPI({ id: row.id }).then(res => {
+                    this.$modal.closeLoading();
                     if (res.code === 200) {
-                        this.$modal.msgSuccess('删除成功')
-                        this.getListDataClassFun()
+                        this.$modal.msgSuccess("删除成功");
+                        this.handleQuery();
                     } else {
-                        this.$message.error('删除失败')
+                        this.$modal.msgError(res.msg);
                     }
-                })
-                .catch(() => {
-                    console.log('删除失败')
-                })
-        },
-
-        // 新增修改确定按钮
-        onHandleAddAndEditSubmit() {
-            console.log(this.addAndEditForm)
-            this.$refs.addAndEditFormRef.validate(async (valid) => {
-                if (valid) {
-                    console.log('新增修改成功')
-
-                    // 组装参数
-                    const { dataTypeName, remark, id } = this.addAndEditForm
-                    const params = {
-                        dataTypeName,
-                        remark,
-                    }
-                    // 如果有id，则修改
-                    if (id) {
-                        params.id = id
-                    }
-
-                    const API = id ? addDataClassAPI : updateDataClassAPI
-                    const res = await API(params)
-                    if (res.code === 200) {
-                        this.$modal.msgSuccess(
-                            `${this.addAndEditDialogTitle}成功`,
-                        )
-                        this.addAndEditDialogVisible = false
-                    } else {
-                        this.$message.error('新增修改失败')
-                    }
-                } else {
-                    console.log('新增修改失败')
-                }
-            })
-        },
-        // 新增修改取消按钮
-        onHandleAddAndEditCancel() {
-            this.$refs.addAndEditFormRef.resetFields()
-            this.addAndEditDialogVisible = false
+                }).catch(error => {
+                    this.$modal.closeLoading();
+                    this.$modal.msgError("删除失败，请重试");
+                    console.error('删除失败:', error);
+                });
+            }).catch(() => {
+                // 用户取消删除，不需要处理
+            });
         },
     },
 }
diff --git a/src/views/data-collect/data-class-manage/prop/dataClassForm.vue b/src/views/data-collect/data-class-manage/prop/dataClassForm.vue
new file mode 100644
index 0000000..fbe9e53
--- /dev/null
+++ b/src/views/data-collect/data-class-manage/prop/dataClassForm.vue
@@ -0,0 +1,187 @@
+<template>
+    <!-- 小型弹窗，用于完成，删除，保存等操作 -->
+    <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
+        :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
+        <div>
+            <el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px">
+                <el-form-item label="数据类型名称" prop="dataTypeName">
+                    <el-input class="form-item" v-model="form.dataTypeName" clearable show-word-limit
+                        placeholder="请输入数据类型名称" maxlength="32"></el-input>
+                </el-form-item>
+                <el-form-item label="备注" prop="remark">
+                    <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" class="form-item"
+                        v-model="form.remark" clearable show-word-limit placeholder="请输入备注" maxlength="255"></el-input>
+                </el-form-item>
+            </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+            <el-button class="clear-btn" @click="handleClose" :disabled="disabled">取消</el-button>
+            <el-button type="primary" class="search-btn" :disabled="disabled"
+                @click="submitForm('ruleForm')">确认</el-button>
+        </span>
+    </el-dialog>
+</template>
+<script>
+import _ from 'lodash'
+import {
+    addDataClassAPI,
+    updateDataClassAPI,
+} from '@/api/data-collect/data-class-manage'
+export default {
+    name: "DataClassForm",
+    props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData"],
+    data() {
+        return {
+            lDialog: this.width > 500 ? "w700" : "w500",
+            dialogVisible: true,
+            isDisabled: true,
+            form: {
+                dataTypeName: '',
+                remark: '',
+            },
+            loading: null,
+            rules: {
+                dataTypeName: [
+                    { required: true, message: '数据类型名称不能为空', trigger: 'blur' }
+                ],
+            },
+        };
+    },
+    created() {
+        this.initFormData();
+    },
+    methods: {
+        /** 初始化表单数据 */
+        initFormData() {
+            if (this.isAdd === 'edit' && this.rowData) {
+                // 编辑模式：填充表单数据
+                this.form = {
+                    dataTypeName: this.rowData.dataTypeName || '',
+                    remark: this.rowData.remark || '',
+                };
+            } else {
+                // 新增模式：重置表单
+                this.form = {
+                    dataTypeName: '',
+                    remark: '',
+                };
+            }
+        },
+        /*关闭弹窗 */
+        handleClose() {
+            this.dialogVisible = false;
+            this.$emit("closeDialog");
+            setTimeout(() => {
+                this.dialogVisible = true;
+            });
+        },
+        /**确认弹窗 */
+        sureBtnClick() {
+            this.dialogVisible = false;
+            this.$emit("closeDialog");
+            setTimeout(() => {
+                this.dialogVisible = true;
+            });
+        },
+        /**重置表单*/
+        reset() {
+            this.form = {
+                dataTypeName: '',
+                remark: '',
+            };
+            this.resetForm("ruleForm");
+        },
+        handleReuslt(res) {
+            this.$modal.msgSuccess(res.msg);
+            this.reset();
+            this.$emit('handleQuery');
+            this.handleClose();
+        },
+        /**验证 */
+        submitForm(formName) {
+            this.$refs[formName].validate(valid => {
+                if (valid) {
+                    // 显示遮罩层
+                    this.loading = this.$loading({
+                        lock: true,
+                        text: "数据提交中，请稍候...",
+                        background: 'rgba(0,0,0,0.5)',
+                        target: this.$el.querySelector('.el-dialog') || document.body
+                    })
+                    let params = _.cloneDeep(this.form);
+                    const data = {
+                        dataTypeName: params.dataTypeName,
+                        remark: params.remark,
+                    }
+                    
+                    if (this.isAdd === 'add') {
+                        addDataClassAPI(data).then(res => {
+                            this.loading.close();
+                            if (res.code === 200) {
+                                this.handleReuslt(res);
+                            } else {
+                                this.$modal.msgError(res.msg);
+                            }
+                        }).catch(error => {
+                            this.loading.close();
+                            // this.$modal.msgError('提交失败，请重试');
+                        });
+                    } else {
+                        const data = {
+                            dataTypeName: params.dataTypeName,
+                            remark: params.remark,
+                            id: this.rowData.id,
+                        }
+                        updateDataClassAPI(data).then(res => {
+                            this.loading.close();
+                            if (res.code === 200) {
+                                this.handleReuslt(res);
+                            } else {
+                                this.$modal.msgError(res.msg);
+                            }
+                        }).catch(error => {
+                            this.loading.close();
+                            // this.$modal.msgError('提交失败，请重试');
+                        });
+                    }
+                }
+            });
+        }
+    }
+};
+</script>
+<style lang="scss">
+.w700 .el-dialog {
+    width: 700px;
+}
+
+.w500 .el-dialog {
+    width: 500px;
+}
+
+.w500 .el-dialog__header,
+.w700 .el-dialog__header {
+    // background: #eeeeee;
+
+    .el-dialog__title {
+        font-size: 16px;
+    }
+}
+
+.yxq .el-range-separator {
+    margin-right: 7px !important;
+}
+
+.el-date-editor--daterange.el-input__inner {
+    width: 260px;
+}
+
+.form-item {
+    width: 100%;
+}
+
+.select-style {
+    display: flex;
+    justify-content: space-between;
+}
+</style>
\ No newline at end of file