0824xx

src/api/sys/version.ts

@@ -0,0 +1,77 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+    GetVersionList = '/sdataversion/SDataVersionProvider/pageList',
+    AddVersion = '/sdataversion/SDataVersionProvider/add',
+    DelVersion = '/sdataversion/SDataVersionProvider/deleteByIds',
+    GetVersionDetail = '/sdataversion/SDataVersionProvider/getDetailById',
+    UpdateVersion = '/sdataversion/SDataVersionProvider/updateById'
+}
+const locationType = { apiUrl2: true };
+
+/**
+ * @description: 获取所有版本
+ * @param: 1:用户登录tokenV2
+ * @param: 2:实体json {}
+ * @param: 3:页码
+ * @param: 4.每页大小
+ */
+export const getVersionList = (params: any) => {
+    return new Promise<void>((resolve) => {
+        defHttp.post({ ...locationType, url: Api.GetVersionList, params: params }, { joinParamsToUrl: true }).then((res) => {
+            resolve(res)
+        })
+    })
+};
+
+/**
+ * @description: 新增版本
+ * @param: 1:用户登录tokenV2
+ * @param: 2:实体json {}
+ */
+export const addVersion = (params: any) => {
+    return new Promise<void>((resolve) => {
+        defHttp.post({ ...locationType, url: Api.AddVersion, params: params }, { joinParamsToUrl: true }).then((res) => {
+            resolve(res)
+        })
+    })
+};
+
+/**
+ * @description: 根据ids删除版本
+ * @param: 1:用户登录tokenV2
+ * @param: 2:ids
+ */
+export const delVersionByIds = (params: any) => {
+    return new Promise<void>((resolve) => {
+        defHttp.post({ ...locationType, url: Api.DelVersion, params: params }, { joinParamsToUrl: true }).then((res) => {
+            resolve(res)
+        })
+    })
+};
+
+/**
+ * @description: 更新版本信息
+ * @param: 1: 用户登录tokenV2
+ * @param: 2: 实体json {}
+ */
+export const updateVersion = (params: any) => {
+    return new Promise<void>((resolve) => {
+        defHttp.post({ ...locationType, url: Api.UpdateVersion, params: params }, { joinParamsToUrl: true }).then((res) => {
+            resolve(res)
+        })
+    })
+};
+
+/**
+ * @description: 获取版本下的资源详情
+ * @param: 1: 用户登录tokenV2
+ * @param: 2: id
+ */
+export const getVersionDetail = (params: any) => {
+    return new Promise<void>((resolve) => {
+        defHttp.post({ ...locationType, url: Api.GetVersionDetail, params: params }, { joinParamsToUrl: true }).then((res) => {
+            resolve(res)
+        })
+    })
+};

src/views/dataAdmin/dataAdmin/version/DirManagerDrawer.vue

@@ -1,171 +0,0 @@
-<template>
-    <a-drawer :title="title" :visible="true" :width="540" :body-style="{ paddingBottom: '80px' }"
-        :footer-style="{ textAlign: 'right' }" @close="onClose">
-        <a-form ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-            <!-- 上级节点名称 -->
-            <a-form-item label="上级节点" name="pName">
-                <a-input v-model:value="form.pName" disabled />
-            </a-form-item>
-            <!-- 节点名称 -->
-            <a-form-item label="节点名称" name="name">
-                <a-input v-model:value="form.name" />
-            </a-form-item>
-            <!-- 节点别名 -->
-            <a-form-item label="节点别名" name="alaisename">
-                <a-input v-model:value="form.alaisename" />
-            </a-form-item>
-            <!-- 节点编码 -->
-            <!-- <a-form-item label="节点编码" name="code">
-                <a-input v-model:value="form.code" />
-            </a-form-item> -->
-            <!-- 节点分类 -->
-            <a-form-item label="节点分类" name="type">
-                <a-input v-model:value="form.type" disabled />
-            </a-form-item>
-            <!-- 节点描述 -->
-            <a-form-item label="节点描述" name="remark">
-                <a-textarea v-model:value="form.remark" />
-            </a-form-item>
-        </a-form>
-        <div :style="{
-            position: 'absolute',
-            right: 0,
-            bottom: 0,
-            width: '100%',
-            borderTop: '1px solid #e9e9e9',
-            padding: '10px 16px',
-            background: '#fff',
-            textAlign: 'right',
-            zIndex: 1,
-        }">
-            <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
-            <a-button type="primary" @click="onSubmit">确定</a-button>
-        </div>
-    </a-drawer>
-</template>
-<script>
-import { defineComponent, reactive, ref, onMounted, watch } from 'vue';
-import { message } from 'ant-design-vue';
-import { addNode } from '/@/api/sys/dirManager';
-import { session } from '/@/utils/Memory';
-import { v4 as uuidv4 } from 'uuid';
-
-const props = {
-    formData: {
-        type: Object,
-        default: () => {
-            return {}
-        }
-    },
-    drawerTitle: {
-        type: String,
-        default: "新增岗位"
-    }
-}
-export default defineComponent({
-    name: 'DirManagerDrawer',
-    components: {},
-    props,
-    setup(props, { emit }) {
-        const form = reactive({
-            id: "",
-            pid: "",
-            pName: "",
-            name: "",
-            alaisename: "",
-            sortindex: 0,
-            // code: "",
-            type: "",
-            remark: ""
-        });
-        const rules = {
-            name: [{
-                required: true,
-                message: '请输入节点名称',
-                trigger: 'blur'
-            }],
-            // code: [{
-            //     required: true,
-            //     message: '请输入节点编码',
-            //     trigger: 'blur'
-            // }],
-            alaisename: [{
-                required: true,
-                message: '请选择节点别名',
-                trigger: 'blur'
-            }],
-            remark: [{
-                required: true,
-                message: '请输入节点描述',
-                trigger: 'blur'
-            }]
-        };
-        const title = ref(props.drawerTitle)
-        const formRef = ref()
-
-        onMounted(() => {
-            if (Object.keys(props.formData).length) {
-                for (let key in form) {
-                    form[key] = props.formData[key]
-                }
-            };
-        })
-
-        watch(
-            () => [props.formData, props.drawerTitle],
-            ([newF, newD]) => {
-                for (let key in form) {
-                    form[key] = props.formData[key]
-                }
-                title.value = newD
-            },
-            {
-                immediate: true,
-                deep: true
-            }
-        )
-        // 关闭弹窗
-        const onClose = () => {
-            emit('closeDialog')
-            resetForm()
-        };
-        // 提交信息
-        const onSubmit = () => {
-            formRef.value.validate().then(() => {
-                form.id = uuidv4();
-                form.pName = undefined;
-                form.updateuser = session.getItem('userInfo').EMPLOYEE.NAME || '';
-                form.userid = session.getItem('userInfo').EMPLOYEE.EMPLOYEE_ID || '';
-                let param = {
-                    1: session.getItem('tokenV2'),
-                    2: JSON.stringify(form)
-                }
-                addNode(param).then(res => {
-                    if(res.status==='0'){
-                        message.success('添加成功')
-                        emit('onSubmit', true, form.name)
-                    }
-                    onClose();
-                })
-            }).catch((error) => {
-                console.log('error', error);
-            });
-        };
-        // 重置表单
-        const resetForm = () => {
-            formRef.value.resetFields();
-        };
-        return {
-            form,
-            rules,
-            title,
-            formRef,
-            labelCol: { span: 6 },
-            wrapperCol: { span: 18 },
-            onClose,
-            onSubmit,
-            resetForm
-        };
-    },
-});
-</script>

src/views/dataAdmin/dataAdmin/version/TagDrawer.vue

@@ -0,0 +1,208 @@
+<template>
+    <a-drawer :title="title" :visible="true" :width="540" :body-style="{ paddingBottom: '80px' }"
+        :footer-style="{ textAlign: 'right' }" @close="onClose">
+        <a-form ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
+            <!-- 名称 -->
+            <a-form-item label="标签名称" name="name">
+                <a-input v-model:value="form.name" style="width: 100%" placeholder="请输入名称" />
+            </a-form-item>
+            <!-- 编码 -->
+            <a-form-item label="标签编码" name="code">
+                <a-input v-model:value="form.code" style="width: 100%" placeholder="根据名称生成" disabled />
+            </a-form-item>
+            <!-- 类型 -->
+            <a-form-item label="标签类型" name="type">
+                <a-select v-model:value="form.type" style="width: 100%" :options="selectOptions">
+                </a-select>
+            </a-form-item>
+            <!-- 排序 -->
+            <a-form-item label="标签排序" name="px">
+                <a-input v-model:value="form.px" style="width: 100%" placeholder="请输入序号" />
+            </a-form-item>
+        </a-form>
+        <div :style="{
+            position: 'absolute',
+            right: 0,
+            bottom: 0,
+            width: '100%',
+            borderTop: '1px solid #e9e9e9',
+            padding: '10px 16px',
+            background: '#fff',
+            textAlign: 'right',
+            zIndex: 1,
+        }">
+            <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
+            <a-button type="primary" @click="onSubmit">确定</a-button>
+        </div>
+    </a-drawer>
+</template>
+<script>
+import { defineComponent, reactive, ref, onMounted, watch } from 'vue';
+import { message } from 'ant-design-vue';
+import { getAllTagsType, generateCodeByName, addTag, updateTag, checkTagCode } from '/@/api/sys/tag';
+import { session } from '/@/utils/Memory';
+
+const props = {
+    formData: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+    drawerTitle: {
+        type: String,
+        default: "新增岗位"
+    }
+}
+export default defineComponent({
+    name: 'TagDrawer',
+    components: {},
+    props,
+    setup(props, { emit }) {
+        const form = reactive({
+            id: "",
+            name: "",
+            code: "",
+            codeName: "",
+            type: "",
+            px: "",
+        });
+        const rules = {
+            name: [{
+                required: true,
+                message: '请输入标签名称',
+                trigger: 'blur'
+            }],
+            // code: [{
+            //     required: true,
+            //     message: '请输入标签编码',
+            //     trigger: 'blur'
+            // }],
+            type: [{
+                required: true,
+                message: '请选择标签类型',
+                trigger: 'blur'
+            }],
+            px: [{
+                required: true,
+                message: '请输入标签排序',
+                trigger: 'blur'
+            }]
+        };
+        const title = ref(props.drawerTitle)
+        const formRef = ref()
+        const selectOptions = ref([])
+
+        onMounted(() => {
+            if (Object.keys(props.formData).length) {
+                for (let key in form) {
+                    form[key] = props.formData[key]
+                }
+            };
+            getTagsType();
+        })
+
+        watch(
+            () => [props.formData, props.drawerTitle],
+            ([newF, newD]) => {
+                for (let key in form) {
+                    form[key] = props.formData[key]
+                }
+                title.value = newD
+            },
+            {
+                immediate: true,
+                deep: true
+            }
+        )
+        //获取所有标签类型
+        const getTagsType = () => {
+            let param = {
+                1: session.getItem('tokenV2')
+            }
+            getAllTagsType(param).then(res => {
+                let resData = JSON.parse(res.result)
+                resData.forEach((item, index) => {
+                    selectOptions.value.push({
+                        value: item.TYPE,
+                        label: item.TYPE
+                    })
+                })
+            })
+        }
+        // 关闭弹窗
+        const onClose = () => {
+            emit('closeDialog')
+            resetForm()
+        };
+        // 提交信息
+        const onSubmit = () => {
+            formRef.value.validate().then(() => {
+                //此处调用新增
+                if (title.value === '新增标签') {
+                    form.id = undefined;
+                    form.codeName = undefined;
+                    //名称生成code
+                    let param1 = {
+                        1: session.getItem('tokenV2'),
+                        2: form.name
+                    }
+                    generateCodeByName(param1).then(res1 => {
+                        form.code = res1.result
+                        //检查code是否重复
+                        let param2 = {
+                            1: session.getItem('tokenV2'),
+                            2: form.code
+                        }
+                        checkTagCode(param2).then(res2 => {
+                            if (res2.result === 'true') {
+                                // 添加标签
+                                let param3 = {
+                                    1: session.getItem('tokenV2'),
+                                    2: JSON.stringify([form])
+                                }
+                                addTag(param3).then(res3 => {
+                                    message.success('操作成功')
+                                    resetForm()
+                                    emit('onSubmit', true)
+                                })
+                            } else {
+                                message.error('code重复')
+                                resetForm()
+                            }
+                        })
+                    })
+                } else {
+                    let param = {
+                        1: session.getItem('tokenV2'),
+                        2: JSON.stringify([form])
+                    }
+                    updateTag(param).then(res => {
+                        message.success('操作成功')
+                        resetForm()
+                        emit('onSubmit', true)
+                    })
+                }
+            }).catch((error) => {
+                console.log('error', error);
+            });
+        };
+        // 重置表单
+        const resetForm = () => {
+            formRef.value.resetFields();
+        };
+        return {
+            form,
+            rules,
+            title,
+            formRef,
+            labelCol: { span: 6 },
+            wrapperCol: { span: 18 },
+            selectOptions,
+            onClose,
+            onSubmit,
+            resetForm
+        };
+    },
+});
+</script>

src/views/dataAdmin/dataAdmin/version/index.vue

@@ -1,599 +1,339 @@
-<!-- 目录管理 -->
 <template>
-  <div class="dir-manager" style="height: 100%; width: 100%; padding: 0; margin: 0">
-    <!-- 头部 -->
-    <div class="head">
-      <a-card class="box-card" body-style="{height:'100%'}">
-        <div class="head-rows">
-          <div class="head-col">目录：</div>
-          <div class="head-col"><a-select ref="select" style="width: 220px" :value="inputSearchValue">
-              <a-select-option v-for="item in searchCategory" :key="item.id" :value="item.id">{{
-                item.name
-              }}</a-select-option>
-            </a-select>
-          </div>
-        </div>
-      </a-card>
-    </div>
-    <!-- 左边 -->
-    <div class="mains">
-      <div class="left">
-        <a-card class="box-card" body-style="{height:'100%'}">
-          <a-input-search v-model:value="treeSearchValue" style="margin-bottom: 8px" placeholder="搜索关键字" />
-          <a-tree :tree-data="treeData" @select="select" :expandedKeys="expandedKeys"
-            :auto-expand-parent="autoExpandParent" @expand="onExpand">
-            <template #title="{ title }">
-              <span v-if="title.indexOf(treeSearchValue) > -1">
-                {{ title.substr(0, title.indexOf(treeSearchValue)) }}
-                <span style="color: #f50">{{ treeSearchValue }}</span>
-                {{ title.substr(title.indexOf(treeSearchValue) + treeSearchValue.length) }}
-              </span>
-              <span v-else>{{ title }}</span>
-            </template>
-          </a-tree>
-        </a-card>
-      </div>
-      <!-- 右边 -->
-      <div class="right">
-        <div class="right-top">
-          <a-card class="box-card" body-style="{height:'100%'}">
-            <div style="
-                border-bottom-style: solid;
-                border-bottom-width: 1px;
-                border-bottom-color: #ddd;
-                height: 40px;
-                padding: 10px;
-                padding-top: 0px;
-                margin-top: 0px;
-              ">
-              <a-row>
-                <a-col :span="9"><span style="font-weight: 700; font-size: 16px">节点编辑</span>
-                </a-col>
-                <a-col :span="15">
-                  <a-row type="flex" justify="end">
-                    <div class="btn" style="margin-right: 10px;">
-                      <a-button type="primary" @click="getTreeData">刷新</a-button>
-                    </div>
-                    <div class="btn" style="margin-right: 10px;">
-                      <a-button type="primary" @click="addTreeNode">添加根节点</a-button>
-                    </div>
-                    <div class="btn" style="margin-right: 10px;">
-                      <a-button type="primary" @click="addTreeChildNode">添加子节点</a-button>
-                    </div>
-                    <div class="btn">
-                      <a-popconfirm title="确定删除该节点及其子节点？" @confirm="delTreeNode">
-                        <a-button danger :disabled="!editBtuState">删除节点</a-button>
-                      </a-popconfirm>
-                    </div>
-                  </a-row>
-                </a-col>
-              </a-row>
+    <div class="p-4">
+        <div class="version-header">
+            <div class="version-title">版本管理</div>
+            <div class="handle-btns">
+                <span class="label">版本名称：</span>
+                <!-- <a-select v-model:value="searchType" style="width: 120px">
+                    <a-select-option value="name">标签名称</a-select-option>
+                    <a-select-option value="code">标签编码</a-select-option>
+                    <a-select-option value="type">标签类型</a-select-option>
+                    <a-select-option value="time">创建时间</a-select-option>
+                </a-select> -->
+                <a-input v-model:value="searchValue" placeholder="输入关键字查询" allow-clear />
+                <a-button class="btn" type="primary" @click="searchTable">查询</a-button>
             </div>
-            <a-form :model="formState" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" style="margin-top: 20px"
-              layout="horizontal">
-              <a-row :gutter="24">
-                <a-col :span="8">
-                  <a-form-item label="名称">
-                    <a-input v-model:value="formState.name" />
-                  </a-form-item>
-                </a-col>
-                <a-col :span="8">
-                  <a-form-item label="别名">
-                    <a-input v-model:value="formState.alaisename" />
-                  </a-form-item>
-                </a-col>
-                <a-col :span="8">
-                  <a-form-item label="排序">
-                    <a-input v-model:value="formState.sortindex" disabled />
-                  </a-form-item>
-                </a-col>
-              </a-row>
-              <a-row :gutter="24">
-                <a-col :span="8">
-                  <a-form-item label="描述">
-                    <a-textarea v-model:value="formState.remark" />
-                  </a-form-item>
-                </a-col>
-              </a-row>
-            </a-form>
-            <div style="margin-top: 60px">
-              <div class="col-item" style="width: 100%;display: flex;justify-content: flex-end;">
-                <a-button type="primary" style="margin-right: 10px;" @click="moveNode(-1)"
-                  :disabled="!editBtuState">上移节点</a-button>
-                <a-button type="primary" style="margin-right: 10px;" @click="moveNode(1)"
-                  :disabled="!editBtuState">下移节点</a-button>
-                <a-button type="primary" @click="editNode" :disabled="!editBtuState">保存节点</a-button>
-              </div>
-            </div>
-          </a-card>
         </div>
-
-        <div class="right-bottom">
-          <a-card class="box-card" body-style="{height:'100%'}">
-            <div style="
-                border-bottom-style: solid;
-                border-bottom-width: 1px;
-                border-bottom-color: #ddd;
-                height: 40px;
-              ">
-              <a-row>
-                <a-col :span="10">
-                  <span style="font-weight: 700; font-size: 16px">操作记录</span>
-                </a-col>
-              </a-row>
+        <div class="version-body">
+            <div class="body-header">
+                <div class="item-title">标签列表</div>
+                <div class="table-btns">
+                    <a-button class="btn" type="primary" @click="getTagsData" title="刷新">
+                        <RedoOutlined />
+                    </a-button>
+                    <a-button class="btn" type="primary" @click="openDialog('add', {})">新增标签</a-button>
+                    <a-popconfirm :title="delAllBtnTitle" @confirm="delAllData">
+                        <a-button class="btn" :disabled="!hasSelected">批量删除</a-button>
+                    </a-popconfirm>
+                </div>
             </div>
-            <div class="list-box">
-              <a-list size="small" :data-source="recordsData" v-if="recordsData.length">
-                <template #renderItem="{ item }">
-                  <a-list-item>{{ item }}</a-list-item>
-                </template>
-              </a-list>
-              <a-empty :image="simpleImage" v-else />
+            <div class="body-content">
+                <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns"
+                    :data-source="tableData" :bordered="true" @change="tableChange">
+                    <template #operation="{ record }">
+                        <a-tooltip title="编辑" color="yellow">
+                            <a @click="openDialog('edit', record)">
+                                <EditOutlined />
+                            </a>
+                        </a-tooltip>
+                        <a-popconfirm v-if="tableData.length" title="确定删除该标签？" @confirm="onDelete(record.id)">
+                            <a-tooltip title="删除" color="red">
+                                <a>
+                                    <DeleteOutlined />
+                                </a>
+                            </a-tooltip>
+                        </a-popconfirm>
+                    </template>
+                </a-table>
             </div>
-          </a-card>
         </div>
-      </div>
+        <TagDrawer v-if="ifShowDialog" @closeDialog="ifShowDialog = false" :formData="formData" :drawerTitle="drawerTitle"
+            @onSubmit="onSubmit" ref="drawerRef">
+        </TagDrawer>
     </div>
-    <DirManagerDrawer v-if="ifShowDialog" @closeDialog="ifShowDialog = false" :formData="formState2"
-      :drawerTitle="drawerTitle" @onSubmit="onSubmit"></DirManagerDrawer>
-  </div>
 </template>
+
 <script>
-import { defineComponent, ref } from 'vue';
-import { getTreeRootId, getTreeList, delNode, updateNode, updateNodeList } from '/@/api/sys/dirManager';
-// import Guid from 'guid';
-import { v4 as uuidv4 } from 'uuid';
+import { defineComponent, reactive, ref, toRefs, computed, onMounted, watch } from 'vue';
+import TagDrawer from './TagDrawer.vue';
+import { getAllTags, deleteTag } from '/@/api/sys/tag';
+import { getVersionList, delVersionByIds } from '/@/api/sys/version';
+import { message } from 'ant-design-vue';
+import { EditOutlined, DeleteOutlined, RedoOutlined } from '@ant-design/icons-vue';
+import moment from 'moment'
 import { session } from '/@/utils/Memory';
-import { message, Empty } from 'ant-design-vue';
-import DirManagerDrawer from './DirManagerDrawer.vue';
 
 export default defineComponent({
-
-  components: { DirManagerDrawer },
-
-  data() {
-    return {
-      // 搜索框数据
-      searchCategory: [],
-      // 树的搜索值
-      treeSearchValue: '',
-      // 树形数据
-      treeData: [],
-      // 表单数据
-      formState: {
-        id: '',
-        pid: '',
-        name: '',
-        alaisename: '',
-        remark: '',
-        sortindex: '',
-      },
-      // 头部搜索框的值
-      inputSearchValue: '',
-      // 新增弹窗表单
-      formState2: {
-        pid: '',
-        pName: '',
-        type: "0",
-        sortindex: 0,
-      },
-      // 编辑按钮使用状态
-      editBtuState: true,
-      //用于树状结构搜索的dataList
-      dataList: [],
-      expandedKeys: [],
-      autoExpandParent: true,
-      ifShowDialog: false,
-      drawerTitle: '',
-      delIds: '',
-      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
-      recordsData: []
-    };
-  },
-
-  mounted() {
-    this.getTreeData();
-  },
-
-  watch: {
-    treeSearchValue(value) {
-      if (value) {
-        let expanded = this.dataList
-          .map(item => {
-            if (item.title.indexOf(value) > -1) {
-              return this.getParentKey(item.key, this.treeData);
+    name: 'version',
+    components: { TagDrawer, EditOutlined, DeleteOutlined, RedoOutlined },
+    setup() {
+        const drawerRef = ref(null)
+        onMounted(() => {
+            getVersionData();
+        });
+        const data = reactive({
+            tableData: [],//表格数据
+            selectedRowKeys: [],//选中的key
+            searchType: "name",//查询类型
+            searchValue: "",//查询值
+            formData: {
+                id: "",
+                name: "",
+                codeName: "",
+                code: "",
+                type: "",
+                px: "",
+            },
+            drawerTitle: "新增标签",
+            ifShowDialog: false
+        });
+        //获取所有标签
+        const getVersionData = () => {
+            data.tableData = []
+            data.selectedRowKeys = []
+            let param = {
+                1: session.getItem('tokenV2'),
+                2: JSON.stringify({}),
+                3: 1,
+                4: 10000000
             }
-            return null;
-          })
-          .filter((item, i, self) => item && self.indexOf(item) === i);
-        this.expandedKeys = expanded;
-      } else {
-        this.expandedKeys = [];
-      }
-      this.treeSearchValue = value;
-      this.autoExpandParent = true;
-    },
-    formState: {
-      handler(val) {
-        this.editBtuState = Boolean(val.id)
-      },
-      immediate: true,
-      deep: true
-    },
-  },
-
-  methods: {
-    //获取树节点列表
-    getTreeData() {
-      this.treeData = []
-      this.dataList = []
-      this.formState = {
-        id: '',
-        pid: '',
-        name: '',
-        alaisename: '',
-        remark: '',
-        sortindex: ''
-      }
-      let param = {
-        1: session.getItem('tokenV2')
-      }
-      getTreeRootId(param).then(res => {
-        this.searchCategory = JSON.parse(res.result)
-        this.inputSearchValue = this.searchCategory[0].id
-        let param2 = {
-          1: session.getItem('tokenV2'),
-          2: this.searchCategory[0].id
+            getVersionList(param).then(res => {
+                let resData = JSON.parse(res.result)
+                resData.items.forEach((item, index) => {
+                    data.tableData.push({
+                        index: index + 1,
+                        key: item.vid,
+                        ...item
+                    })
+                })
+            })
         }
-        getTreeList(param2).then(res2 => {
-          const data = JSON.parse(res2.result);
-          // 让每层带上自己的孩子节点、title、key
-          data.forEach((item) => {
-            item['title'] = item.name;
-            item['key'] = item.id;
-            data.forEach((item2) => {
-              if (item.id == item2.pid) {
-                if (item.children) {
-                  item.children.push(item2);
-                } else {
-                  item['children'] = [];
-                  item.children.push(item2);
-                }
-              }
-            });
-          });
-          data.forEach((item) => {
-            if (this.searchCategory[0].id === item.pid) {
-              this.treeData.push(item);
-            }
-          });
-          this.generateList(this.treeData)
-        })
-      })
-    },
-    //生成用于树搜索的dataList
-    generateList(data) {
-      for (let i = 0; i < data.length; i++) {
-        const node = data[i];
-        const key = node.key;
-        this.dataList.push({
-          key,
-          title: node.title,
+        //筛选数据，用于表格
+        const filteredInfo = ref({
+            name: null
         });
-        if (node.children) {
-          this.generateList(node.children);
-        }
-      }
-    },
-    //获取所有父节点key
-    getParentKey(key, tree) {
-      let parentKey;
-      for (let i = 0; i < tree.length; i++) {
-        const node = tree[i];
-        if (node.children) {
-          if (node.children.some(item => item.key === key)) {
-            parentKey = node.key;
-          } else if (this.getParentKey(key, node.children)) {
-            parentKey = this.getParentKey(key, node.children);
-          }
-        }
-      }
-      return parentKey;
-    },
-    //树结构展开时触发
-    onExpand(keys) {
-      this.expandedKeys = keys;
-      this.autoExpandParent = false;
-    },
-
-    // 点击树节点
-    select(selectkey, { selectedNodes, node }) {
-      console.log(node.dataRef);
-      if (selectkey.length) {
-        this.formState = {
-          ...node.dataRef
-        }
-      } else {
-        this.formState = {
-          id: '',
-          pid: '',
-          name: '',
-          alaisename: '',
-          remark: '',
-          sortindex: ''
-        }
-      }
-    },
-
-    // 添加树节点
-    addTreeNode() {
-      if (this.inputSearchValue) {
-        this.searchCategory.forEach((item) => {
-          if (this.inputSearchValue === item.id) {
-            this.formState2.pName = item.name;
-            this.formState2.pid = item.id;
-            this.formState2.sortindex = this.treeData.length;
-            this.drawerTitle = '添加根节点'
-            this.ifShowDialog = true;
-          }
+        //表格列
+        const columns = computed(() => {
+            const filtered = filteredInfo.value || {};
+            return [
+                {
+                    title: '序号',
+                    align: 'center',
+                    dataIndex: 'index',
+                    key: 'index',
+                    width: "120px"
+                },
+                {
+                    title: '版本名称',
+                    align: 'center',
+                    dataIndex: 'name',
+                    key: 'name',
+                    filteredValue: filtered.name || null,
+                    onFilter: (value, record) => record.name.includes(value),
+                    width: "250px"
+                },
+                {
+                    title: '版本说明',
+                    align: 'center',
+                    dataIndex: 'description',
+                    key: 'description',
+                    width: "500px"
+                },
+                {
+                    title: '发布时间',
+                    align: 'center',
+                    dataIndex: 'insertTime',
+                    key: 'insertTime',
+                    width: "250px"
+                },
+                {
+                    title: '修改时间',
+                    align: 'center',
+                    dataIndex: 'updateTime',
+                    key: 'updateTime',
+                    width: "250px"
+                },
+                {
+                    title: '操作',
+                    align: 'center',
+                    dataIndex: 'operation',
+                    slots: {
+                        customRender: 'operation',
+                    }
+                },
+            ];
         });
-      } else {
-        //没有选择头部分类
-        message.error('没有目录')
-      }
-    },
-
-    // 添加子节点
-    addTreeChildNode() {
-      // message.warning('请选择需要添加子节点的父节点！', 5);
-      if (this.formState.id) {
-        this.formState2.pName = this.formState.name;
-        this.formState2.pid = this.formState.id;
-        this.formState2.sortindex = this.formState.children ? this.formState.children.length : 0;
-        this.drawerTitle = '添加子节点'
-        this.ifShowDialog = true;
-      } else {
-        message.error('请先选择父节点')
-      }
-    },
-
-    //删除节点
-    delTreeNode() {
-      if (this.formState.id) {
-        this.delIds = ''
-        this.getChildrenIds(this.formState)
-        let param = {
-          1: session.getItem('tokenV2'),
-          2: this.delIds
-        }
-        delNode(param).then(res => {
-          if (res.result === "true") {
-            message.success('删除成功');
-            this.recordsData.push(`删除节点：${this.formState.name}`)
-            this.getTreeData();
-          } else {
-            message.error('删除失败');
-          }
-        })
-      } else {
-        message.error('请先选择节点');
-      }
-    },
-
-    //获取节点下所有子节点ids
-    getChildrenIds(node) {
-      this.delIds += node.id + ','
-      if (node.children && node.children.length) {
-        node.children.forEach(item => {
-          this.getChildrenIds(item)
-        })
-      }
-    },
-
-    // 修改节点
-    editNode() {
-      if (this.editBtuState) {
-        let editData = {
-          id: this.formState.id,
-          pid: this.formState.pid,
-          name: this.formState.name,
-          alaisename: this.formState.alaisename,
-          type: this.formState.type,
-          sortindex: this.formState.sortindex,
-          remark: this.formState.remark,
+        //表格发生分页等改变事件
+        const tableChange = (pagination, filters, sorter) => {
+            filteredInfo.value = filters;
         };
-        let param = {
-          1: session.getItem('tokenV2'),
-          2: JSON.stringify(editData)
-        }
-        updateNode(param).then(res => {
-          if (res.status === '0') {
-            message.success('修改成功')
-            this.recordsData.push(`修改节点：${this.formState.name}`)
-            this.searchCategory = [];
-            this.getTreeData();
-          }
-        })
-      }
-    },
-
-    //移动节点
-    async moveNode(flag) {
-      //判断是否为根节点, 并获取同层级的数组
-      let data = []
-      let mvNode = null
-      if (this.formState.pid !== this.inputSearchValue) {
-        let param = {
-          1: session.getItem('tokenV2'),
-          2: this.formState.pid
+        //表格查询功能
+        const searchTable = () => {
+            filteredInfo.value.name = [data.searchValue]
         }
-        let resData = await getTreeList(param)
-        data = JSON.parse(resData.result);
-        data = data.filter(item => item.id !== this.formState.pid)
-      } else {
-        data = this.treeData
-      }
-      data.sort((a, b) => a['sortindex'] - b['sortindex'])
-      // 判断移动方向
-      if (flag === 1) {
-        // 判断是否是最后一个
-        data.forEach((item, index) => {
-          if (this.formState.id === item.id) {
-            if ((index + 1) >= data.length) {
-              message.info('已经是最后一个节点')
-            } else {
-              mvNode = data[index + 1]
+        //判断是否选中数据
+        const hasSelected = computed(() => data.selectedRowKeys.length > 0);
+        //删除提示
+        const delAllBtnTitle = computed(() => `确定删除${data.selectedRowKeys.length}个版本？`)
+        //删除所有选中的数据
+        const delAllData = () => {
+            let param = {
+                1: session.getItem('tokenV2'),
+                2: JSON.stringify({}),
+                3: JSON.stringify(data.selectedRowKeys)
             }
-          }
-        })
-      } else {
-        // 判断是否是第一个
-        data.forEach((item, index) => {
-          if (this.formState.id === item.id) {
-            if ((index - 1) < 0) {
-              message.info('已经是第一个节点')
+            deleteTag(param).then(res => {
+                message.success('操作成功');
+                getTagsData();
+                data.selectedRowKeys = [];
+            })
+        };
+        //表格行选中事件
+        const onSelectChange = selectedRowKeys => {
+            data.selectedRowKeys = selectedRowKeys;
+        };
+        //新增或修改数据，打开弹窗
+        const openDialog = (flag, record) => {
+            if (flag === 'add') {
+                data.formData = {
+                    id: "",
+                    name: "",
+                    codeName: "",
+                    code: "",
+                    type: "",
+                    px: "",
+                }
+                data.drawerTitle = '新增标签'
+                data.ifShowDialog = true
             } else {
-              mvNode = data[index - 1]
+                data.formData = {
+                    id: record.id,
+                    name: record.name,
+                    code: record.code,
+                    codeName: record.codeName,
+                    type: record.type,
+                    px: record.px,
+                }
+                data.drawerTitle = '修改标签'
+                data.ifShowDialog = true
             }
-          }
-        })
-      }
-      //此处使用批量更新
-      if (mvNode) {
-        let editData = {
-          id: this.formState.id,
-          pid: this.formState.pid,
-          name: this.formState.name,
-          alaisename: this.formState.alaisename,
-          type: this.formState.type,
-          sortindex: mvNode.sortindex,
-          remark: this.formState.remark,
-        };
-        let mvData = {
-          id: mvNode.id,
-          pid: mvNode.pid,
-          name: mvNode.name,
-          alaisename: mvNode.alaisename,
-          type: mvNode.type,
-          sortindex: this.formState.sortindex,
-          remark: mvNode.remark,
         }
-        let param = {
-          1: session.getItem('tokenV2'),
-          2: JSON.stringify([editData, mvData])
+        //删除单个数据
+        const onDelete = (id) => {
+            let param = {
+                1: session.getItem('tokenV2'),
+                2: JSON.stringify({}),
+                3: JSON.stringify([id])
+            }
+            deleteTag(param).then(res => {
+                message.success('操作成功');
+                getTagsData();
+            })
+        }
+        //弹窗确认
+        const onSubmit = (e) => {
+            data.ifShowDialog = false
+            if (e) {
+                getTagsData();
+            }
         }
-        updateNodeList(param).then(res => {
-          if (res.status==="0"){
-            message.success('修改成功')
-            this.recordsData.push(`移动节点：${this.formState.name}`)
-            this.searchCategory = [];
-            this.getTreeData();
-          }
-        })
-      }
+        return {
+            drawerRef,
+            filteredInfo,
+            columns,
+            hasSelected,
+            delAllBtnTitle,
+            ...toRefs(data),
+            // func
+            getVersionData,
+            tableChange,
+            searchTable,
+            delAllData,
+            onDelete,
+            onSelectChange,
+            openDialog,
+            onSubmit
+        };
     },
-
-    //弹窗确认
-    onSubmit(e, item) {
-      this.ifShowDialog = false
-      if (e) {
-        this.recordsData.push(`添加节点：${item}`)
-        this.getTreeData();
-      }
-    }
-  },
 });
 </script>
 
 <style lang="less" scoped>
-.dir-manager {
-  .head {
-    padding: 20px 20px 0;
-
-    .box-card {
-      height: calc(100% - 0px);
+.p-4 {
+    height: 100%;
 
-      .head-rows {
-        width: 500px;
+    .version-header {
+        padding: 10px;
+        width: 100%;
+        height: 70px;
+        background-color: #fff;
         display: flex;
+        justify-content: space-between;
         align-items: center;
-      }
-    }
-  }
 
-  .mains {
-    .box-card {
-      height: calc(100% - 0px);
-    }
+        .version-title {
+            font-size: 16px;
+            font-weight: 500;
+            margin-left: 20px;
+            user-select: none;
+        }
 
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px;
-    height: calc(100% - 102px);
+        .handle-btns {
+            margin-right: 20px;
+            display: flex;
+            align-items: center;
 
-    .left {
-      height: calc(100% - 0px);
-      width: 20%;
-    }
+            .label {
+                width: 150px;
+            }
 
-    .right {
-      display: flex;
-      flex-direction: column; //设置主轴为y轴
-      justify-content: flex-start; //子元素排列方式，
-      align-items: center; //设置侧轴上子元素对齐方式
-      padding: 0 0 0 20px;
-      height: calc(100% - 0px);
-      width: 100%;
-      // height: 50%;
-      // width: 78%;
-      // margin-left: 1%;
-      // margin-right: 1%;
-      // border: 1px red solid;
+            .btn {
+                margin-left: 10px;
+            }
+        }
+    }
 
-      .right-top {
-        height: 50%;
+    .version-body {
+        padding: 0 30px;
+        margin-top: 20px;
         width: 100%;
-        margin-left: 1%;
-        margin-right: 1%;
-        margin-bottom: 2%;
+        // height: 800px;
+        height: calc(100% - 90px);
+        background-color: #fff;
 
-        .right-top-item {
-          border-style: solid;
-          border-width: 1px;
-          border-color: #ddd;
-          box-shadow: 0 0 10px #ddd;
-          height: 250px;
-          margin-top: 10px;
-          padding: 10px;
-        }
-      }
+        .body-header {
+            display: flex;
+            height: 80px;
+            width: 100%;
+            justify-content: space-between;
+            align-items: center;
 
-      .right-bottom {
-        height: 50%;
-        width: 100%;
-        margin-left: 1%;
-        margin-right: 1%;
+            .item-title {
+                height: 40px;
+                line-height: 40px;
+                font-size: 16px;
+                user-select: none;
+            }
+
+            .table-btns {
+                .btn {
+                    margin-right: 10px;
 
-        .list-box {
-          height: 282px;
-          overflow: auto;
-          // display: flex;
-          // align-items: center;
-          // justify-content: center;
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                }
+            }
         }
 
-        .right-bottom-item {
-          border-style: solid;
-          border-width: 1px;
-          border-color: #ddd;
-          box-shadow: 0 0 10px #ddd;
-          height: 250px;
-          margin-top: 10px;
-          padding: 10px;
+        .body-content {
+            padding-bottom: 20px;
+            height: calc(100% - 80px);
+
+            a {
+                margin-right: 10px;
+            }
         }
-      }
     }
-  }
 }
-</style>
+</style>