0821xx目录管理

src/api/sys/dirManager.ts

@@ -0,0 +1,74 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+    FindList = '/sdatacatlog/SDataCatlogProvider/findList',
+    FindRoot = '/sdatacatlog/SDataCatlogProvider/findRoot',
+    Insert = '/sdatacatlog/SDataCatlogProvider/insert',
+    Delete = '/sdatacatlog/SDataCatlogProvider/delete',
+    Update = '/sdatacatlog/SDataCatlogProvider/update'
+}
+const locationType = { apiUrl2: true };
+
+/**
+ * @description: 获取目录树
+ * @param: 1:用户登录tokenV2
+ * @param: 2:根节点id
+ */
+export const getTreeList = (params: any) => {
+    return new Promise<void>((resolve) => {
+        defHttp.post({ ...locationType, url: Api.FindList, params: params }, { joinParamsToUrl: true }).then((res) => {
+            resolve(res)
+        })
+    })
+};
+
+/**
+ * @description: 获取根节点id
+ * @param: 1:用户登录tokenV2
+ */
+export const getTreeRootId = (params: any) => {
+    return new Promise<void>((resolve) => {
+        defHttp.post({ ...locationType, url: Api.FindRoot, params: params }, { joinParamsToUrl: true }).then((res) => {
+            resolve(res)
+        })
+    })
+};
+
+/**
+ * @description: 新增节点
+ * @param: 1:用户登录tokenV2
+ * @param: 2:根节点信息
+ */
+export const addNode = (params: any) => {
+    return new Promise<void>((resolve) => {
+        defHttp.post({ ...locationType, url: Api.Insert, params: params }, { joinParamsToUrl: true }).then((res) => {
+            resolve(res)
+        })
+    })
+};
+
+/**
+ * @description: 删除节点
+ * @param: 1:用户登录tokenV2
+ * @param: 2:节点id，多个用逗号隔开
+ */
+export const delNode = (params: any) => {
+    return new Promise<void>((resolve) => {
+        defHttp.post({ ...locationType, url: Api.Delete, params: params }, { joinParamsToUrl: true }).then((res) => {
+            resolve(res)
+        })
+    })
+};
+
+/**
+ * @description: 修改节点
+ * @param: 1:用户登录tokenV2
+ * @param: 2:修改的节点信息
+ */
+export const updateNode = (params: any) => {
+    return new Promise<void>((resolve) => {
+        defHttp.post({ ...locationType, url: Api.Update, params: params }, { joinParamsToUrl: true }).then((res) => {
+            resolve(res)
+        })
+    })
+};

src/api/sys/log.ts

@@ -0,0 +1,26 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+    SelecteLogin = '/base-center/syslog/SelecteLogin'
+}
+
+/**
+ * @description: 查询登录日志
+ * @param: page:页数    must
+ * @param: rows:每页数据条数    must
+ * @param: keyStr:模糊查询关键字
+ * @param: startCreateTimeStr:操作开始时间
+ * @param: endCreateTimeStr:操作结束时间 
+ */
+export const getLoginList = (params) => {
+    // let axiosHttp = defHttp;
+    // let headers = {
+    //     token:session.getItem('tokenV2')
+    // };
+    // axiosHttp.setHeader(headers);
+    return new Promise<void>((resolve) => {
+        defHttp.post({ url: Api.SelecteLogin, params: params }).then((res) => {
+            resolve(res)
+        })
+    })
+};

src/mock/menu.json

@@ -957,7 +957,7 @@
                         "type": "SYSADMIN",
                         "permission": "",
                         "sort": 1,
-                        "component": "/system/log/operate/index",
+                        "component": "/systemAdmin/system/log/operate/index",
                         "meta": {
                             "icon": "ant-design:exception-outlined",
                             "title": "操作日志",
@@ -979,7 +979,7 @@
                         "type": "SYSADMIN",
                         "permission": "",
                         "sort": 0,
-                        "component": "/system/log/exception/index",
+                        "component": "/systemAdmin/system/log/exception/index",
                         "meta": {
                             "icon": "ant-design:file-done-outlined",
                             "title": "异常日志",
@@ -1001,7 +1001,7 @@
                         "type": "SYSADMIN",
                         "permission": "",
                         "sort": 2,
-                        "component": "/system/log/user/index",
+                        "component": "/systemAdmin/system/log/user/index",
                         "meta": {
                             "icon": "ant-design:file-add-outlined",
                             "title": "登录日志",
@@ -1017,7 +1017,7 @@
                 "type": "SYSADMIN",
                 "permission": "log:management:view",
                 "sort": 10,
-                "component": "/system/log/index",
+                "component": "/systemAdmin/system/log/index",
                 "meta": {
                     "icon": "ant-design:file-text-outlined",
                     "title": "日志管理",

src/views/dataAdmin/dataAdmin/directoryManagement/DirManagerDrawer.vue

@@ -0,0 +1,171 @@
+<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/directoryManagement/index.vue

@@ -1,26 +1,36 @@
 <!-- 目录管理 -->
 <template>
-  <div style="height: 100%; width: 100%; padding: 0; margin: 0">
+  <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%'}">
-        <a-row>
-          <a-col :span="10">
-            <a-select ref="select" style="width: 220px" :value="inputSearchValue">
+        <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>
-          </a-col>
-        </a-row>
+          </div>
+        </div>
       </a-card>
     </div>
     <!-- 左边 -->
     <div class="mains">
       <div class="left">
         <a-card class="box-card" body-style="{height:'100%'}">
-          <a-input-search :value="TreeSearchValue" style="margin-bottom: 8px" placeholder="搜索关键字" />
-          <a-tree :tree-data="treeData" @select="select" />
+          <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>
       <!-- 右边 -->
@@ -37,16 +47,24 @@
                 margin-top: 0px;
               ">
               <a-row>
-                <a-col :span="10"><span style="font-weight: 700; font-size: 16px">节点编辑</span>
+                <a-col :span="9"><span style="font-weight: 700; font-size: 16px">节点编辑</span>
                 </a-col>
-                <a-col :span="13">
+                <a-col :span="15">
                   <a-row type="flex" justify="end">
-                    <a-col :span="4">
-                      <a-button @click="addTreeChildNode">添加子节点</a-button>
-                    </a-col>
-                    <a-col :span="4">
-                      <a-button type="primary" @click="addTreeNode">添加节点</a-button>
-                    </a-col>
+                    <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>
@@ -66,7 +84,7 @@
                 </a-col>
                 <a-col :span="8">
                   <a-form-item label="排序">
-                    <a-input v-model:value="formState.sortindex" />
+                    <a-input v-model:value="formState.sortindex" disabled />
                   </a-form-item>
                 </a-col>
               </a-row>
@@ -78,11 +96,13 @@
                 </a-col>
               </a-row>
             </a-form>
-            <a-row type="flex" justify="center" style="margin-top: 60px">
-              <a-col :span="4">
-                <a-button type="primary" @click="editNode" :disabled="editBtuState">保存节点</a-button>
-              </a-col>
-            </a-row>
+            <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>
 
@@ -93,58 +113,38 @@
                 border-bottom-width: 1px;
                 border-bottom-color: #ddd;
                 height: 40px;
-                padding: 10px;
-                padding-top: 0px;
               ">
               <a-row>
-                <a-col :span="10"><span style="font-weight: 700; font-size: 16px">操作记录</span>
+                <a-col :span="10">
+                  <span style="font-weight: 700; font-size: 16px">操作记录</span>
                 </a-col>
               </a-row>
             </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>
           </a-card>
         </div>
       </div>
     </div>
-    <a-modal v-model:visible="visible" title="添加节点" @ok="handleOk" width="50%">
-      <div style="margin: 10px">
-        <a-form :model="formState2" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
-          <a-row>
-            <a-col :span="10">
-              <a-form-item label="上级节点">
-                <a-input v-model:value="formState2.pName" :disabled="true" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="10">
-              <a-form-item label="名称">
-                <a-input v-model:value="formState2.name" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="10">
-              <a-form-item label="别名">
-                <a-input v-model:value="formState2.alaisename" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="10">
-              <a-form-item label="分类">
-                <a-input v-model:value="formState2.type" :disabled="true" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="20">
-              <a-form-item label="描述">
-                <a-textarea v-model:value="formState2.remark" />
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
-      </div>
-    </a-modal>
+    <DirManagerDrawer v-if="ifShowDialog" @closeDialog="ifShowDialog = false" :formData="formState2"
+      :drawerTitle="drawerTitle" @onSubmit="onSubmit"></DirManagerDrawer>
   </div>
 </template>
 <script>
 import { defineComponent, ref } from 'vue';
 import { getDirectoryTreeList, addTreeNode } from '/@/api/sys/gis';
-import Guid from 'guid';
+import { getTreeRootId, getTreeList, delNode, updateNode } from '/@/api/sys/dirManager';
+// import Guid from 'guid';
+import { v4 as uuidv4 } from 'uuid';
 import { session } from '/@/utils/Memory';
+import { message, Empty } from 'ant-design-vue';
+import DirManagerDrawer from './DirManagerDrawer.vue';
 
 export default defineComponent({
   setup() {
@@ -154,6 +154,8 @@ export default defineComponent({
     };
   },
 
+  components: { DirManagerDrawer },
+
   data() {
     return {
       // 搜索框数据
@@ -166,10 +168,8 @@ export default defineComponent({
       formState: {
         id: '',
         pid: '',
-        pName: '',
         name: '',
         alaisename: '',
-        type: '',
         remark: '',
         sortindex: '',
       },
@@ -182,37 +182,81 @@ export default defineComponent({
       formState2: {
         pid: '',
         pName: '',
-        name: '',
-        alaisename: '',
-        type: 0,
-        remark: '',
-        sortindex: '',
+        type: "0",
+        sortindex: 0,
       },
       // 节点和子节点新增区别
       type: '',
-      // 父级id
-      pid: '',
       // 编辑按钮使用状态
       editBtuState: true,
+      //用于树状结构搜索的dataList
+      dataList: [],
+      expandedKeys: [],
+      autoExpandParent: true,
+      ifShowDialog: false,
+      drawerTitle: '',
+      delIds: '',
+      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
+      recordsData: []
     };
   },
 
   mounted() {
-    this.getTreeList();
+    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);
+            }
+            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: {
     //获取树节点列表
-    getTreeList() {
-      let f = new FormData();
-      f.append('interfaceName', 'antu.space.provider.sdatacatlog.SDataCatlogProvider');
-      f.append('methodName', 'findList');
-      f.append('args[]', session.getItem("token"));
-      f.append('args[]', '');
-      getDirectoryTreeList(f).then((res) => {
-        if (res.status == 0) {
-          const data = JSON.parse(res.result);
-          console.log('获取设备列表2:', data);
+    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
+        }
+        getTreeList(param2).then(res2 => {
+          const data = JSON.parse(res2.result);
           // 让每层带上自己的孩子节点、title、key
           data.forEach((item) => {
             item['title'] = item.name;
@@ -228,116 +272,137 @@ export default defineComponent({
               }
             });
           });
-          console.log('11111111111:', data);
-          // 找出搜索框数据
           data.forEach((item) => {
-            if (item.pid == '') {
-              this.searchCategory.push(item);
+            if (this.searchCategory[0].id === item.pid) {
+              this.treeData.push(item);
             }
           });
-          this.inputSearchValue = this.searchCategory[0].id;
-          // 找出树形数据
-          this.searchCategory.forEach((item1) => {
-            data.forEach((item2) => {
-              if (item1.id == item2.pid) {
-                this.treeData.push(item2);
-              }
-            });
-          });
+          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,
+        });
+        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(value1, value2) {
-      console.log('树的数据' + JSON.stringify(value2.selectedNodes[0].props));
-      this.formState = { ...value2.selectedNodes[0].props };
-      // const pid = { ...value2.selectedNodes[0].props };
-      this.formState2.pid = value2.selectedNodes[0].props.id;
-      console.log('222' + JSON.stringify(value2.selectedNodes[0].props));
-      this.editBtuState = 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() {
-      this.visible = true;
-      this.type = 1;
       if (this.inputSearchValue) {
         this.searchCategory.forEach((item) => {
-          if (this.inputSearchValue == item.id) {
+          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;
           }
         });
       } else {
         //没有选择头部分类
+        message.error('没有目录')
       }
     },
 
     // 添加子节点
     addTreeChildNode() {
       // message.warning('请选择需要添加子节点的父节点！', 5);
-      this.visible = true;
-      this.type = 2;
+      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('请先选择父节点')
+      }
     },
 
-    // 新增弹窗提交新增数据
-    handleOk() {
-      if (this.type == 1) {
-        console.log('表单数据' + JSON.stringify(this.formState2));
-        const gisToken = sessionStorage.getItem('gisToken');
-        this.formState2.id = Guid.raw();
-        this.formState2.sortindex = this.treeData.length;
-        let directoryFormData = new FormData();
-        directoryFormData.append(
-          'interfaceName',
-          'antu.space.provider.sdatacatlog.SDataCatlogProvider'
-        );
-        directoryFormData.append('methodName', 'insert');
-        directoryFormData.append('args[]', gisToken);
-        directoryFormData.append('args[]', JSON.stringify(this.formState2));
-        addTreeNode(directoryFormData).then((res) => {
-          if (res.status == 0) {
-            console.log('新增' + res);
-            this.searchCategory = [];
-            this.treeData = [];
-            this.getTreeList();
-            this.visible = false;
-          }
-        });
-        this.type = '';
-      } else if (this.type == 2) {
-        console.log('表单数据2' + JSON.stringify(this.formState2));
-        const gisToken = sessionStorage.getItem('gisToken');
-        this.formState2.id = Guid.raw();
-        // 排序
-        // this.formState2.sortindex = this.treeData.length
-        let directoryFormData = new FormData();
-        directoryFormData.append(
-          'interfaceName',
-          'antu.space.provider.sdatacatlog.SDataCatlogProvider'
-        );
-        directoryFormData.append('methodName', 'insert');
-        directoryFormData.append('args[]', gisToken);
-        directoryFormData.append('args[]', JSON.stringify(this.formState2));
-        addTreeNode(directoryFormData).then((res) => {
-          if (res.status == 0) {
-            console.log('新增' + res);
-            this.searchCategory = [];
-            this.treeData = [];
-            this.getTreeList();
-            this.visible = false;
+    //删除节点
+    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('删除失败');
           }
-        });
-        this.visible = false;
-        this.type = '';
+        })
+      } 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) {
-        console.log('表单数据3' + JSON.stringify(this.formState));
-        const gisToken = sessionStorage.getItem('gisToken');
+      if (this.editBtuState) {
         let editData = {
           id: this.formState.id,
           pid: this.formState.pid,
@@ -347,101 +412,166 @@ export default defineComponent({
           sortindex: this.formState.sortindex,
           remark: this.formState.remark,
         };
-        let directoryFormData = new FormData();
-        directoryFormData.append(
-          'interfaceName',
-          'antu.space.provider.sdatacatlog.SDataCatlogProvider'
-        );
-        directoryFormData.append('methodName', 'update');
-        directoryFormData.append('args[]', gisToken);
-        directoryFormData.append('args[]', JSON.stringify(editData));
-        addTreeNode(directoryFormData).then((res) => {
-          if (res.status == 0) {
-            console.log('编辑' + res);
+        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.treeData = [];
-            this.getTreeList();
-            this.editBtuState = true;
+            this.getTreeData();
+            this.editBtuState = false;
           }
-        });
+        })
+      }
+    },
+
+    //移动节点
+    async moveNode(flag) {
+      //判断是否为根节点, 并获取同层级的数组
+      let data = []
+      let mvNode = null
+      if (this.formState.pid !== this.inputSearchValue) {
+        let param = {
+          1: session.getItem('tokenV2'),
+          2: this.formState.pid
+        }
+        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]
+            }
+          }
+        })
+      } else {
+        // 判断是否是第一个
+        data.forEach((item, index)=>{
+          if(this.formState.id === item.id){
+            if((index-1) < 0){
+              message.info('已经是第一个节点')
+            }else{
+              mvNode = data[index-1]
+            }
+          }
+        })
       }
+      //此处使用批量更新
+      console.log(mvNode);
     },
+
+    //弹窗确认
+    onSubmit(e, item) {
+      this.ifShowDialog = false
+      if (e) {
+        this.recordsData.push(`添加节点：${item}`)
+        this.getTreeData();
+      }
+    }
   },
 });
 </script>
 
-<style lang="scss" scoped>
-.head {
-  padding: 10px;
-  height: 74px;
-  margin-right: 30px;
-  margin-left: 10px;
-}
-
-.mains {
-  .box-card {
-    height: calc(100% - 0px);
-  }
+<style lang="less" scoped>
+.dir-manager {
+  .head {
+    padding: 20px 20px 0;
 
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px;
-  height: calc(100% - 74px);
+    .box-card {
+      height: calc(100% - 0px);
 
-  .left {
-    height: calc(100% - 0px);
-    width: 20%;
+      .head-rows {
+        width: 500px;
+        display: flex;
+        align-items: center;
+      }
+    }
   }
 
-  .right {
+  .mains {
+    .box-card {
+      height: calc(100% - 0px);
+    }
+
     display: flex;
-    flex-direction: column; //设置主轴为y轴
-    justify-content: flex-start; //子元素排列方式，
-    align-items: center; //设置侧轴上子元素对齐方式
+    justify-content: space-between;
+    align-items: center;
     padding: 20px;
-    padding-top: 0;
-    padding-bottom: 0;
-    height: calc(100% - 0px);
-    width: 100%;
-    // height: 50%;
-    // width: 78%;
-    // margin-left: 1%;
-    // margin-right: 1%;
-    // border: 1px red solid;
+    height: calc(100% - 102px);
+
+    .left {
+      height: calc(100% - 0px);
+      width: 20%;
+    }
 
-    .right-top {
-      height: 50%;
+    .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%;
-      margin-left: 1%;
-      margin-right: 1%;
-      margin-bottom: 2%;
+      // height: 50%;
+      // width: 78%;
+      // margin-left: 1%;
+      // margin-right: 1%;
+      // border: 1px red solid;
+
+      .right-top {
+        height: 50%;
+        width: 100%;
+        margin-left: 1%;
+        margin-right: 1%;
+        margin-bottom: 2%;
 
-      .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;
+        .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;
+        }
       }
-    }
 
-    .right-bottom {
-      height: 50%;
-      width: 100%;
-      margin-left: 1%;
-      margin-right: 1%;
+      .right-bottom {
+        height: 50%;
+        width: 100%;
+        margin-left: 1%;
+        margin-right: 1%;
 
-      .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;
+        .list-box {
+          height: 282px;
+          overflow: auto;
+          // display: flex;
+          // align-items: center;
+          // justify-content: center;
+        }
+
+        .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;
+        }
       }
     }
   }

src/views/dataAdmin/dataAdmin/resourceCataloging/index.vue

@@ -157,7 +157,8 @@
 import { defineComponent, ref, watch, reactive, onMounted  } from 'vue';
 import { message } from 'ant-design-vue';
 import { getDirectoryTreeList, addTreeNode } from '/@/api/sys/gis';
-import Guid from 'guid'
+// import Guid from 'guid'
+import { v4 as uuidv4 } from 'uuid';
 
 export default defineComponent({
 
@@ -337,7 +338,7 @@ export default defineComponent({
       let associatedValueArr = []
       useValue.value.forEach((item) => {
         let associatedValue = {
-          id: Guid.raw(),
+          id: uuidv4(),
           serviceid: item,
           servicename: '',
           did: clickTreeNode.value[0],
@@ -418,7 +419,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .head{
   padding: 10px;
   height: 74px;

src/views/systemAdmin/system/log/user/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/systemAdmin/system/log/user/UserDrawer.vue

@@ -1,41 +0,0 @@
-<template>
-  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="登录登出日志详情" width="40%">
-    <BasicForm @register="registerForm" />
-  </BasicDrawer>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { formSchema } from './config.data';
-  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-  import { getLogManageDetail } from '/@/api/log/logManager';
-  import moment from 'moment';
-
-  export default defineComponent({
-    name: 'ContactDrawer',
-    components: { BasicDrawer, BasicForm },
-    emits: ['success', 'register'],
-    setup(_) {
-      const [registerForm, { setFieldsValue, resetFields }] = useForm({
-        labelWidth: 120,
-        schemas: formSchema,
-        showActionButtonGroup: false,
-      });
-
-      const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
-        await resetFields();
-        setDrawerProps({ confirmLoading: false });
-        const res = await getLogManageDetail(data.record.id);
-        const createdTime = moment(data.record.createdTime).format('YYYY-MM-DD');
-        const actionData = JSON.stringify(res.actionData);
-        await setFieldsValue(res || data.record);
-        await setFieldsValue({ actionData });
-        await setFieldsValue({ createdTime });
-      });
-      return {
-        registerDrawer,
-        registerForm,
-      };
-    },
-  });
-</script>

src/views/systemAdmin/system/log/user/config.data.ts

@@ -1,171 +0,0 @@
-import { BasicColumn, FormSchema } from '/@/components/Table';
-import moment from 'moment';
-import { findDictItemByCode } from '/@/api/system/dict';
-import { format } from '../util';
-import { h } from 'vue';
-import { Tag } from 'ant-design-vue';
-
-// 表格数据
-export const columns: BasicColumn[] = [
-  {
-    title: '租户名称',
-    dataIndex: 'tenantName',
-    width: 120,
-  },
-  {
-    title: '客户名称',
-    dataIndex: 'customerName',
-    width: 120,
-  },
-  {
-    title: '操作人员',
-    dataIndex: 'userName',
-    width: 180,
-  },
-  {
-    title: '操作类型',
-    dataIndex: 'actionType',
-    width: 180,
-    format: (_, record) => {
-      return record.actionType == 'LOGIN' ? '登录' : '登出';
-    },
-  },
-  {
-    title: '操作状态',
-    dataIndex: 'actionStatus',
-    width: 180,
-    customRender: ({ record }) => {
-      const status = record.actionStatus;
-      const enable = status === 'SUCCESS' ? '成功' : '失败';
-      const color = enable === '成功' ? 'green' : 'red';
-      const text = enable === '成功' ? '成功' : '失败';
-      return h(Tag, { color }, () => text);
-    },
-  },
-  {
-    title: '操作时间',
-    dataIndex: 'createdTime',
-    width: 180,
-    format: (_, record) => {
-      return format(record.createdTime, 'yyyy-MM-dd HH:mm:ss');
-    },
-  },
-];
-
-// 分页查询
-export const searchFormSchema: FormSchema[] = [
-  {
-    field: 'actionType',
-    label: '操作类型',
-    component: 'ApiSelect',
-    componentProps: {
-      api: findDictItemByCode,
-      params: {
-        dictCode: 'user_log',
-      },
-      labelField: 'itemText',
-      valueField: 'itemValue',
-    },
-    colProps: { span: 6 },
-  },
-  {
-    field: 'queryTime',
-    label: '查询时间',
-    component: 'RangePicker',
-    componentProps: {
-      showTime: {
-        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
-      },
-    },
-    colProps: { span: 6 },
-  },
-];
-
-// 详情配置
-export const formSchema: FormSchema[] = [
-  {
-    field: 'createdTime',
-    label: '操作时间',
-    component: 'Input',
-    componentProps: {
-      disabled: true,
-    },
-  },
-  {
-    field: 'tenantName',
-    label: '租户名称',
-    component: 'Input',
-    componentProps: {
-      disabled: true,
-    },
-  },
-  {
-    field: 'customerName',
-    label: '客户名称',
-    component: 'Input',
-    componentProps: {
-      disabled: true,
-    },
-  },
-  {
-    field: 'entityType',
-    label: '资源类型',
-    component: 'Input',
-    componentProps: {
-      disabled: true,
-    },
-  },
-  {
-    field: 'entityName',
-    label: '资源名称',
-    component: 'Input',
-    componentProps: {
-      disabled: true,
-    },
-  },
-  {
-    field: 'userName',
-    label: '操作人员',
-    colProps: { span: 24 },
-    component: 'Input',
-    componentProps: {
-      disabled: true,
-    },
-  },
-  {
-    field: 'actionType',
-    label: '操作类型',
-    component: 'Input',
-    componentProps: {
-      disabled: true,
-    },
-  },
-  {
-    field: 'actionStatus',
-    label: '操作状态',
-    component: 'Input',
-    componentProps: {
-      disabled: true,
-    },
-  },
-  {
-    field: 'actionData',
-    label: '操作数据',
-    component: 'InputTextArea',
-    componentProps: {
-      disabled: true,
-      autosize: true,
-      allowClear: false,
-    },
-  },
-  {
-    field: 'actionFailureDetails',
-    label: '失败信息',
-    component: 'InputTextArea',
-    componentProps: {
-      disabled: true,
-      autosize: true,
-      allowClear: false,
-    },
-  },
-];

src/views/systemAdmin/system/log/user/index.vue

@@ -1,85 +1,343 @@
 <template>
-  <div>
-    <BasicTable :clickToRowSelect="false" @register="registerTable">
-      <template #toolbar> </template>
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              label: '详情',
-              auth: 'api:yt:log:get',
-              icon: 'clarity:note-edit-line',
-              onClick: handleViewDetail.bind(null, record),
-            },
-          ]"
-        />
-      </template>
-    </BasicTable>
-    <UserDrawer @register="registerDrawer" @success="handleSuccess" />
-  </div>
+    <div class="p-4">
+        <div class="userLogin-header">
+            <div class="userLogin-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>
+        </div>
+        <div class="userLogin-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="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>
+        </div>
+        <TagDrawer v-if="ifShowDialog" @closeDialog="ifShowDialog = false" :formData="formData" :drawerTitle="drawerTitle"
+            @onSubmit="onSubmit" ref="drawerRef">
+        </TagDrawer>
+    </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { useDrawer } from '/@/components/Drawer';
-  import UserDrawer from './UserDrawer.vue';
-  import { getUserPage } from '/@/api/log/logManager';
-  import { searchFormSchema, columns } from './config.data';
-  import { useModal } from '/@/components/Modal';
+<script>
+import { defineComponent, reactive, ref, toRefs, computed, onMounted, watch } from 'vue';
+import TagDrawer from './TagDrawer.vue';
+import { getLoginList } from '/@/api/sys/log';
+import { message } from 'ant-design-vue';
+import { EditOutlined, DeleteOutlined, RedoOutlined } from '@ant-design/icons-vue';
+import moment from 'moment'
+import { session } from '/@/utils/Memory';
 
-  export default defineComponent({
-    components: {
-      BasicTable,
-      TableAction,
-      UserDrawer,
-    },
+export default defineComponent({
+    name: 'userLogin',
+    components: { TagDrawer, EditOutlined, DeleteOutlined, RedoOutlined },
     setup() {
-      const [registerModal] = useModal();
-      const [registerTable, { reload }] = useTable({
-        title: '登录登出日志列表',
-        api: getUserPage,
-        columns,
-        showIndexColumn: false,
-        clickToRowSelect: false,
-        formConfig: {
-          labelWidth: 120,
-          schemas: searchFormSchema,
-          fieldMapToTime: [['queryTime', ['startTime', 'endTime'], 'x']],
-        },
-        useSearchForm: true,
-        showTableSetting: true,
-        bordered: true,
-        rowKey: 'id',
-        actionColumn: {
-          width: 200,
-          title: '操作',
-          dataIndex: 'action',
-          slots: { customRender: 'action' },
-          fixed: 'right',
-        },
-      });
-      // 弹框
-      const [registerDrawer, { openDrawer }] = useDrawer();
-
-      // 刷新
-      const handleSuccess = () => {
-        reload();
-      };
-
-      const handleViewDetail = (record) => {
-        openDrawer(true, {
-          isUpdate: true,
-          record,
+        const drawerRef = ref(null)
+        onMounted(() => {
+            getLoginData();
+        });
+        const data = reactive({
+            tableData: [],//表格数据
+            selectedRowKeys: [],//选中的key
+            searchType: "name",//查询类型
+            searchValue: "",//查询值
+            formData: {
+                id: "",
+                name: "",
+                codeName: "",
+                code: "",
+                type: "",
+                px: "",
+            },
+            drawerTitle: "新增标签",
+            ifShowDialog: false
         });
-      };
-      return {
-        handleSuccess,
-        registerTable,
-        registerDrawer,
-        handleViewDetail,
-        registerModal,
-      };
+        //获取所有日志
+        const getLoginData = () => {
+            data.tableData = []
+            data.selectedRowKeys = []
+            let param = {
+                page:1,
+                rows:10000000
+            }
+            getLoginList(param).then(res => {
+                console.log(res);
+                // let resData = JSON.parse(res.result)
+                // resData.forEach((item, index) => {
+                //     data.tableData.push({
+                //         key: item.id,
+                //         state: `状态${index + 1}`,
+                //         time: moment(item.createtime).format('YYYY-MM-DD HH:mm:ss'),
+                //         ...item
+                //     })
+                // })
+            })
+        }
+        //排序与删选数据，用于表格
+        const filteredInfo = ref({
+            name: null,
+            code: null,
+            type: null,
+            time: null
+        });
+        //表格列
+        const columns = computed(() => {
+            const filtered = filteredInfo.value || {};
+            return [
+                {
+                    title: '标签名称',
+                    dataIndex: 'name',
+                    key: 'name',
+                    filteredValue: filtered.name || null,
+                    onFilter: (value, record) => record.name.includes(value),
+                    width: "500px"
+                },
+                {
+                    title: '标签编码',
+                    dataIndex: 'code',
+                    key: 'code',
+                    filteredValue: filtered.code || null,
+                    onFilter: (value, record) => record.code.includes(value),
+                    width: "400px"
+                },
+                {
+                    title: '标签类型',
+                    dataIndex: 'type',
+                    key: 'type',
+                    filteredValue: filtered.type || null,
+                    onFilter: (value, record) => record.type.includes(value),
+                    width: "230px"
+                },
+                {
+                    title: '启用状态',
+                    dataIndex: 'state',
+                    key: 'state',
+                    filteredValue: filtered.state || null,
+                    onFilter: (value, record) => record.state.includes(value),
+                    width: "100px"
+                },
+                {
+                    title: '创建时间',
+                    dataIndex: 'time',
+                    key: 'time',
+                    filteredValue: filtered.time || null,
+                    onFilter: (value, record) => record.time.includes(value),
+                    width: "230px"
+                },
+                {
+                    title: '操作',
+                    dataIndex: 'operation',
+                    slots: {
+                        customRender: 'operation',
+                    }
+                },
+            ];
+        });
+        //表格发生分页等改变事件
+        const tableChange = (pagination, filters, sorter) => {
+            filteredInfo.value = filters;
+        };
+        //表格查询功能
+        const searchTable = () => {
+            filteredInfo.value[data.searchType] = [data.searchValue]
+        }
+        //判断是否选中数据
+        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)
+            }
+            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 {
+                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
+            }
+        }
+        //删除单个数据
+        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();
+            }
+        }
+        return {
+            drawerRef,
+            filteredInfo,
+            columns,
+            hasSelected,
+            delAllBtnTitle,
+            ...toRefs(data),
+            // func
+            getLoginData,
+            tableChange,
+            searchTable,
+            delAllData,
+            onDelete,
+            onSelectChange,
+            openDialog,
+            onSubmit
+        };
     },
-  });
+});
 </script>
+
+<style lang="less" scoped>
+.p-4 {
+    height: 100%;
+
+    .userLogin-header {
+        padding: 10px;
+        width: 100%;
+        height: 70px;
+        background-color: #fff;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .userLogin-title {
+            font-size: 16px;
+            font-weight: 500;
+            margin-left: 20px;
+            user-select: none;
+        }
+
+        .handle-btns {
+            margin-right: 20px;
+            display: flex;
+            align-items: center;
+
+            .label {
+                width: 150px;
+            }
+
+            .btn {
+                margin-left: 10px;
+            }
+        }
+    }
+
+    .userLogin-body {
+        padding: 0 30px;
+        margin-top: 20px;
+        width: 100%;
+        // height: 800px;
+        height: calc(100% - 90px);
+        background-color: #fff;
+
+        .body-header {
+            display: flex;
+            height: 80px;
+            width: 100%;
+            justify-content: space-between;
+            align-items: center;
+
+            .item-title {
+                height: 40px;
+                line-height: 40px;
+                font-size: 16px;
+                user-select: none;
+            }
+
+            .table-btns {
+                .btn {
+                    margin-right: 10px;
+
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                }
+            }
+        }
+
+        .body-content {
+            padding-bottom: 20px;
+            height: calc(100% - 80px);
+
+            a {
+                margin-right: 10px;
+            }
+        }
+    }
+}
+</style>