From 08bb99011b3584efad9ee99c2593cca1832905d8 Mon Sep 17 00:00:00 2001
From: "851673013@qq.com" <851673013@qq.com>
Date: Fri, 8 Jul 2022 10:42:00 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8E=E5=8F=B0=E7=BC=96=E7=9B=AEbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/bscatalogue/ManagementPop.vue     | 489 +++++++++---------
 .../views/modules/bscatalogue/bscatalogue.vue | 289 ++++++-----
 2 files changed, 409 insertions(+), 369 deletions(-)

diff --git a/back/src/views/modules/bscatalogue/ManagementPop.vue b/back/src/views/modules/bscatalogue/ManagementPop.vue
index faab5067..dd55ee8e 100644
--- a/back/src/views/modules/bscatalogue/ManagementPop.vue
+++ b/back/src/views/modules/bscatalogue/ManagementPop.vue
@@ -6,130 +6,206 @@
  * @Description: 编目弹窗
 -->
 <template>
-    <div class="management-pop">
-        <div class="top">
-            <a-button series="primary" @click="showAdd()">
-              新增
-            </a-button>
+  <div class="management-pop">
+    <div class="top">
+      <a-button series="primary" @click="showAdd()"> 新增 </a-button>
+      <a-popconfirm
+        title="是否删除选中字段?"
+        okText="是"
+        cancelText="否"
+        @confirm="confirmDel"
+        @cancel="cancelDel"
+      >
+        <!-- <a-button series="primary">批量删除</a-button> -->
+      </a-popconfirm>
+    </div>
+    <a-table
+      :columns="columns"
+      :data-source="data"
+      :expanded-row-keys.sync="expandedRowKeys"
+      :pagination="false"
+      ref="aTable"
+      :key="showKey"
+      :scroll="{ x: 1200, y: 500 }"
+    >
+      <template
+        v-for="col in [
+          'name',
+          'isAttr',
+          'isLinkToDic',
+          'linkValue',
+          'isFilterCriteria',
+          'type',
+          'xh',
+          'operation'
+        ]"
+        :slot="col"
+        slot-scope="text, record, index"
+        class="text"
+      >
+        <div :key="col" style="display: inline-block" v-if="col === 'name'">
+          <a-input
+            v-if="record.editable"
+            style="margin: -5px 0"
+            :value="text"
+            @change="(e) => handleChange(e.target.value, record.key, col)"
+          />
+          <template v-else>
+            {{ text }}
+          </template>
+        </div>
+        <div
+          :key="col"
+          style="display: inline-block"
+          v-else-if="col === 'isAttr'"
+        >
+          <a-switch
+            v-if="record.editable && !record.children"
+            default-checked
+            @change="isAttrOnChange"
+            :checked="text"
+          />
+          <template v-else>
+            <a-switch default-checked :disabled="disabled" :checked="text" />
+          </template>
+        </div>
+        <div
+          :key="col"
+          style="display: inline-block"
+          v-else-if="col === 'isLinkToDic'"
+        >
+          <a-switch
+            v-if="record.editable && record.isAttr"
+            default-checked
+            @change="isLinkToDicOnChange"
+            :checked="text"
+          />
+          <template v-else>
+            <a-switch default-checked :disabled="disabled" :checked="text" />
+          </template>
+        </div>
+        <div
+          :key="col"
+          style="display: inline-block"
+          v-else-if="col === 'linkValue'"
+        >
+          <a-select
+            :defaultValue="text"
+            style="width: 150px"
+            @change="linkValueHandleChange"
+            :disabled="
+              record.editable && record.isLinkToDic ? !disabled : disabled
+            "
+          >
+            <a-select-option :value="val.id" v-for="val in zdList" :key="val">
+              {{ val.dictName }}
+            </a-select-option>
+          </a-select>
+        </div>
+        <div
+          :key="col"
+          style="display: inline-block"
+          v-else-if="col === 'isFilterCriteria'"
+        >
+          <a-switch
+            v-if="record.editable && record.linkValue"
+            default-checked
+            @change="isFilterCriteriaOnChange"
+            :checked="text"
+          />
+          <template v-else>
+            <a-switch default-checked :disabled="disabled" :checked="text" />
+          </template>
+        </div>
+        <div
+          :key="col"
+          style="display: inline-block"
+          v-else-if="col === 'type'"
+        >
+          <a-select
+            :defaultValue="text"
+            style="width: 150px"
+            @change="typeHandleChange"
+            :disabled="
+              record.editable && !record.children ? !disabled : disabled
+            "
+          >
+            <a-select-option
+              :value="val.dictValue"
+              v-for="val in fieldTypeList"
+              :key="val"
+            >
+              {{ val.dictLabel }}
+            </a-select-option>
+          </a-select>
+        </div>
+        <div :key="col" style="display: inline-block" v-else-if="col === 'xh'">
+          <a-input
+            v-if="record.editable"
+            style="margin: -5px 0"
+            :value="text"
+            @change="(e) => handleChange(e.target.value, record.key, col)"
+          />
+          <template v-else>
+            {{ text }}
+          </template>
+        </div>
+        <div
+          :key="col"
+          class="editable-row-operations"
+          v-else-if="col === 'operation'"
+        >
+          <span v-if="record.editable">
+            <a @click="() => save(record.key)">保存</a>
             <a-popconfirm
-              title="是否删除选中字段?"
+              title="是否取消修改?"
+              @confirm="() => cancel(record.key)"
               okText="是"
               cancelText="否"
-              @confirm="confirmDel"
+            >
+              <a>取消</a>
+            </a-popconfirm>
+          </span>
+          <span v-else>
+            <a
+              :disabled="editingKey !== ''"
+              @click="() => add(record.id, record.children)"
+              v-if="!record.isAttr && record.cengji <= 3"
+              >新增</a
+            >
+            <a :disabled="editingKey !== ''" @click="() => edit(record.key)"
+              >修改</a
+            >
+            <a-popconfirm
+              title="是否确定删除?"
+              okText="是"
+              cancelText="否"
+              @confirm="del(record)"
               @cancel="cancelDel"
             >
-            <!-- <a-button series="primary">批量删除</a-button> -->
-          </a-popconfirm>
+              <a :disabled="editingKey !== ''">删除</a>
+            </a-popconfirm>
+          </span>
         </div>
-        <a-table
-          :columns="columns"
-          :data-source="data"
-          :expanded-row-keys.sync="expandedRowKeys"
-          :pagination='false'
-          ref="aTable"
-          :key="showKey"
-          :scroll="{ x: 1200, y: 500 }"
-        >
-          <template
-            v-for="col in ['name', 'isAttr', 'isLinkToDic', 'linkValue', 'isFilterCriteria', 'type', 'xh', 'operation']"
-            :slot="col"
-            slot-scope="text, record, index"
-            class="text"
-          >
-            <div :key="col" style="display: inline-block;" v-if="col==='name'">
-              <a-input
-                v-if="record.editable"
-                style="margin: -5px 0"
-                :value="text"
-                @change="e => handleChange(e.target.value, record.key, col)"
-              />
-              <template v-else>
-                {{ text }}
-              </template>
-            </div>
-            <div :key="col" style="display: inline-block;" v-else-if="col==='isAttr'">
-              <a-switch v-if="record.editable && !record.children" default-checked @change="isAttrOnChange" :checked="text" />
-              <template v-else>
-                <a-switch default-checked :disabled='disabled' :checked="text" />
-              </template>
-            </div>
-            <div :key="col" style="display: inline-block;" v-else-if="col==='isLinkToDic'">
-              <a-switch v-if="record.editable && record.isAttr" default-checked @change="isLinkToDicOnChange" :checked="text" />
-              <template v-else>
-                <a-switch default-checked :disabled='disabled' :checked="text" />
-              </template>
-            </div>
-            <div :key="col" style="display: inline-block;" v-else-if="col==='linkValue'">
-              <a-select :defaultValue="text" style="width: 150px" @change="linkValueHandleChange" :disabled='(record.editable && record.isLinkToDic)?!disabled:disabled'>
-                <a-select-option :value="val.id" v-for="val in zdList" :key="val">
-                  {{val.dictName}}
-                </a-select-option>
-              </a-select>
-            </div>
-            <div :key="col" style="display: inline-block;" v-else-if="col==='isFilterCriteria'">
-              <a-switch v-if="record.editable && record.linkValue" default-checked @change="isFilterCriteriaOnChange" :checked="text" />
-              <template v-else>
-                <a-switch default-checked :disabled='disabled' :checked="text" />
-              </template>
-            </div>
-            <div :key="col" style="display: inline-block;" v-else-if="col==='type'">
-              <a-select :defaultValue="text" style="width: 150px" @change="typeHandleChange" :disabled='(record.editable && !record.children)?!disabled:disabled'>
-                <a-select-option :value="val.dictValue" v-for="val in fieldTypeList" :key="val">
-                  {{val.dictLabel}}
-                </a-select-option>
-              </a-select>
-            </div>
-            <div :key="col" style="display: inline-block;" v-else-if="col==='xh'">
-              <a-input
-                v-if="record.editable"
-                style="margin: -5px 0"
-                :value="text"
-                @change="e => handleChange(e.target.value, record.key, col)"
-              />
-              <template v-else>
-                {{ text }}
-              </template>
-            </div>
-            <div :key="col" class="editable-row-operations" v-else-if="col==='operation'">
-              <span v-if="record.editable">
-                <a @click="() => save(record.key)">保存</a>
-                <a-popconfirm title="是否取消修改?" @confirm="() => cancel(record.key)" okText='是' cancelText='否'>
-                  <a>取消</a>
-                </a-popconfirm>
-              </span>
-              <span v-else>
-                <a :disabled="editingKey !== ''" @click="() => add(record.id,record.children)" v-if="!record.isAttr&&record.cengji<=3">新增</a>
-                <a :disabled="editingKey !== ''" @click="() => edit(record.key)">修改</a>
-                <a-popconfirm
-                  title="是否确定删除?"
-                  okText="是"
-                  cancelText="否"
-                  @confirm="del(record)"
-                  @cancel="cancelDel"
-                >
-                  <a :disabled="editingKey !== ''">删除</a>
-                </a-popconfirm>
-              </span>
-            </div>
-          </template>
-        </a-table>
-        <a-modal
-          :visible="visible"
-          style="margin-top: 200px"
-          title="新增编目"
-          okText="新增"
-          cancelText="取消"
-          @ok="handleOk"
-          @cancel="handleCancel"
-        >
-          字段名：
-          <a-input
-            style="width: 80%"
-            placeholder="请输入字段名"
-            v-model="nameTxt"
-          />
-        </a-modal>
-    </div>
+      </template>
+    </a-table>
+    <a-modal
+      :visible="visible"
+      style="margin-top: 200px"
+      title="新增编目"
+      okText="新增"
+      cancelText="取消"
+      @ok="handleOk"
+      @cancel="handleCancel"
+    >
+      字段名：
+      <a-input
+        style="width: 80%"
+        placeholder="请输入字段名"
+        v-model="nameTxt"
+      />
+    </a-modal>
+  </div>
 </template>
 <script>
 import Vue from 'vue'
@@ -184,9 +260,7 @@ const columns = [
 ]
 const data = []
 export default {
-  components: {
-
-  },
+  components: {},
   props: {
     showItem: {
       type: Object,
@@ -198,7 +272,7 @@ export default {
     }
   },
   data () {
-    this.cacheData = data.map(item => ({ ...item }))
+    this.cacheData = data.map((item) => ({ ...item }))
     return {
       time: true,
       showKey: 0,
@@ -217,19 +291,27 @@ export default {
       editingKey: '',
       rowSelection: {
         onChange: (selectedRowKeys, selectedRows) => {
-          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
+          console.log(
+            `selectedRowKeys: ${selectedRowKeys}`,
+            'selectedRows: ',
+            selectedRows
+          )
           this.delList = []
           if (selectedRows) {
             selectedRows.forEach((val) => {
               this.delList.push(val.key)
             })
           }
-          console.log('delList================>', this.expandedRowKeys, this.delList)
+          console.log(
+            'delList================>',
+            this.expandedRowKeys,
+            this.delList
+          )
         },
         onSelect: (record, selected, selectedRows) => {
           console.log(record, selected, selectedRows)
           if (record.children) {
-            record.children.forEach(item => {
+            record.children.forEach((item) => {
               this.delList.push(item.key)
             })
           }
@@ -258,83 +340,13 @@ export default {
     },
     // 查询所有编目
     getCategoryTree () {
-      this.$http.get('/category/getCategoryTree').then(res => {
-        console.log(res.data.data, this.index)
+      this.$http.get('/category/getCategoryTree').then((res) => {
         this.data = []
-        if (res.data.data[this.index].children) {
-          res.data.data[this.index].children.forEach(val => {
+        if (this.showItem.children) {
+          this.showItem.children.forEach((val) => {
             this.initData(val, this.cengji)
-            // if (val.children) {
-            //   if (val.children.length === 0) {
-            //     delete val.children
-            //   } else {
-            //     val.children.forEach(item => {
-            //       item.key = item.id
-            //       item.cengji = '2'
-            //       console.log(item)
-            //       if (item.children && item.children.length === 0) {
-            //         delete item.children
-            //       } else if (item.children) {
-            //         item.children.forEach(child => {
-            //           child.key = child.id
-            //           child.cengji = '3'
-            //           if (child.children && child.children.length === 0) {
-            //             delete child.children
-            //           }
-            //           if (child.isAttr === 'true') {
-            //             child.isAttr = true
-            //           } else if (child.isAttr === 'false') {
-            //             child.isAttr = false
-            //           }
-            //           if (child.isFilterCriteria === 'true') {
-            //             child.isFilterCriteria = true
-            //           } else if (child.isFilterCriteria === 'false') {
-            //             child.isFilterCriteria = false
-            //           }
-            //           if (child.isLinkToDic === 'true') {
-            //             child.isLinkToDic = true
-            //           } else if (child.isLinkToDic === 'false') {
-            //             child.isLinkToDic = false
-            //           }
-            //         })
-            //       }
-            //       if (item.isAttr === 'true') {
-            //         item.isAttr = true
-            //       } else if (item.isAttr === 'false') {
-            //         item.isAttr = false
-            //       }
-            //       if (item.isFilterCriteria === 'true') {
-            //         item.isFilterCriteria = true
-            //       } else if (item.isFilterCriteria === 'false') {
-            //         item.isFilterCriteria = false
-            //       }
-            //       if (item.isLinkToDic === 'true') {
-            //         item.isLinkToDic = true
-            //       } else if (item.isLinkToDic === 'false') {
-            //         item.isLinkToDic = false
-            //       }
-            //     })
-            //   }
-            // }
-            // val.key = val.id
-            // val.cengji = '1'
-            // if (val.isAttr === 'true') {
-            //   val.isAttr = true
-            // } else if (val.isAttr === 'false') {
-            //   val.isAttr = false
-            // }
-            // if (val.isFilterCriteria === 'true') {
-            //   val.isFilterCriteria = true
-            // } else if (val.isFilterCriteria === 'false') {
-            //   val.isFilterCriteria = false
-            // }
-            // if (val.isLinkToDic === 'true') {
-            //   val.isLinkToDic = true
-            // } else if (val.isLinkToDic === 'false') {
-            //   val.isLinkToDic = false
-            // }
           })
-          this.data = res.data.data[this.index].children
+          this.data = this.showItem.children
           console.log('data======================>', this.data)
           this.flag = true
           this.showKey++
@@ -365,7 +377,7 @@ export default {
           delete data.children
         } else {
           cengji++
-          data.children.forEach(item => {
+          data.children.forEach((item) => {
             this.initData(item, cengji)
           })
         }
@@ -373,17 +385,21 @@ export default {
     },
     // 查询所有字典
     selectZd () {
-      this.$http.get('/sys/dict/type/page?limit=10000&page=1').then(res => {
+      this.$http.get('/sys/dict/type/page?limit=10000&page=1').then((res) => {
         this.zdList = res.data.data.list
         console.log(this.zdList)
       })
     },
     // 查询表单类型字典
     selectFieldType () {
-      this.$http.get('/sys/dict/data/page?limit=10000&page=1&dictTypeId=1531163741457014785').then(res => {
-        this.fieldTypeList = res.data.data.list
-        console.log(this.fieldTypeList)
-      })
+      this.$http
+        .get(
+          '/sys/dict/data/page?limit=10000&page=1&dictTypeId=1531163741457014785'
+        )
+        .then((res) => {
+          this.fieldTypeList = res.data.data.list
+          console.log(this.fieldTypeList)
+        })
     },
     // 新增弹窗显示
     showAdd () {
@@ -408,39 +424,42 @@ export default {
     // 新增编目
     handleOk () {
       if (this.nameTxt) {
-        this.$http.post('/category/insert', {
-          isAttr: true,
-          isFilterCriteria: false,
-          isLinkToDic: false,
-          linkValue: '',
-          name: this.nameTxt,
-          pid: this.pid,
-          rootCategory: this.rootCategory,
-          type: 'input',
-          xh: this.px || this.data.length + 1
-        }).then(res => {
-          console.log(res)
-          this.visible = false
-          this.nameTxt = ''
-          this.pid = this.showItem.id
-          this.init()
-        })
+        this.$http
+          .post('/category/insert', {
+            isAttr: true,
+            isFilterCriteria: false,
+            isLinkToDic: false,
+            linkValue: '',
+            name: this.nameTxt,
+            pid: this.pid,
+            rootCategory: this.rootCategory,
+            type: 'input',
+            xh: this.px || this.data.length + 1
+          })
+          .then((res) => {
+            console.log(res)
+            this.visible = false
+            this.nameTxt = ''
+            this.pid = this.showItem.id
+            this.init()
+          })
       }
     },
     // 批量删除
     confirmDel () {
-      this.$http.post('/category/deleteById', { ids: this.delList }).then(res => {
-        console.log(res)
-        this.init()
-      })
+      this.$http
+        .post('/category/deleteById', { ids: this.delList })
+        .then((res) => {
+          console.log(res)
+          this.init()
+        })
     },
     // 取消修改
-    cancelDel () {
-    },
+    cancelDel () {},
     handleChange (value, key, column) {
       const newData = [...this.data]
       this.editData = {}
-      newData.forEach(val => {
+      newData.forEach((val) => {
         this.handleChangeFor(val, key)
       })
       if (this.editData) {
@@ -454,7 +473,7 @@ export default {
         this.editData = val
       } else {
         if (val.children) {
-          val.children.forEach(item => {
+          val.children.forEach((item) => {
             this.handleChangeFor(item, key)
           })
         }
@@ -495,7 +514,7 @@ export default {
       }
     },
     editFor (data, key) {
-      data.forEach(val => {
+      data.forEach((val) => {
         if (val.key === key) {
           this.editData = val
         } else {
@@ -515,7 +534,7 @@ export default {
           })
         } else {
           this.flag = false
-          this.$http.post('/category/update', this.editData).then(res => {
+          this.$http.post('/category/update', this.editData).then((res) => {
             console.log(res)
             this.editingKey = ''
             this.init()
@@ -586,12 +605,12 @@ export default {
         //   }
         // })
       }
-      this.$http.post('/category/deleteById', { ids: arr }).then(res => {
+      this.$http.post('/category/deleteById', { ids: arr }).then((res) => {
         this.init()
       })
     },
     delFor (data, arr) {
-      data.forEach(val => {
+      data.forEach((val) => {
         arr.push(val.id)
         if (val.children) {
           this.delFor(val.children, arr)
@@ -601,7 +620,7 @@ export default {
   }
 }
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .top {
   display: flex;
   justify-content: flex-end;
diff --git a/back/src/views/modules/bscatalogue/bscatalogue.vue b/back/src/views/modules/bscatalogue/bscatalogue.vue
index 3c32b637..43f341da 100644
--- a/back/src/views/modules/bscatalogue/bscatalogue.vue
+++ b/back/src/views/modules/bscatalogue/bscatalogue.vue
@@ -24,7 +24,9 @@
         <div
           class="resource-detail-wrap"
           :style="{
-            backgroundImage: `url(${topicCardBgImg(slotProps.item.positionNum)})`,
+            backgroundImage: `url(${topicCardBgImg(
+              slotProps.item.positionNum
+            )})`
           }"
         >
           <!-- 企业标题 -->
@@ -36,11 +38,17 @@
             <input
               v-model="slotProps.item.name"
               class="edit-enterprise-input"
-            >
+            />
           </div>
           <!-- 专题资源列表 -->
           <div class="resource-detail-resource">
-            <div class="num" v-for="item2 in slotProps.item.children" :key="item2.id">{{ item2.name }}</div>
+            <div
+              class="num"
+              v-for="item2 in slotProps.item.children"
+              :key="item2.id"
+            >
+              {{ item2.name }}
+            </div>
             <!-- <span class="unit">个</span> -->
           </div>
           <!-- 删除资源按钮 -->
@@ -48,7 +56,9 @@
             <i
               v-if="isRemoveCard"
               class="resource-detail-remove"
-              @click.stop="removeEnterpriseCard(slotProps.item,slotProps.index)"
+              @click.stop="
+                removeEnterpriseCard(slotProps.item, slotProps.index)
+              "
             />
           </transition>
         </div>
@@ -61,7 +71,7 @@
       </div>
       <div>
         <span @click.stop="editTopicCard">{{
-          isRemoveCard ? "完成" : "编辑"
+          isRemoveCard ? '完成' : '编辑'
         }}</span>
       </div>
     </div>
@@ -75,7 +85,7 @@
         :style="{
           top: cardAddTop,
           left: cardAddLeft,
-          backgroundImage: `url(${addCardBgImg})`,
+          backgroundImage: `url(${addCardBgImg})`
         }"
       >
         <div v-if="!isAddCard">
@@ -88,7 +98,7 @@
               v-model="addEnterpriseName"
               class="add-enterprise-input"
               placeholder="请输入目录名称"
-            >
+            />
           </div>
           <div class="add-enterprise-button-wrap">
             <el-button
@@ -109,24 +119,26 @@
       </div>
     </transition>
     <!-- 卡片覆盖层-->
-    <div class="enterprise-card-cover" :style="{ zIndex: topicCoverZIndex||1000 }">
+    <div
+      class="enterprise-card-cover"
+      :style="{ zIndex: topicCoverZIndex || 1000 }"
+    >
       <div
         v-for="(item, index) in topicList"
         :key="index"
-        @click="test(item,index)"
-      >
-      </div>
+        @click="test(item, index)"
+      ></div>
     </div>
     <a-modal
       :visible="show"
       title="编目配置"
       @ok.stop="handleOk"
       @cancel.stop="handleCancel"
-      :footer='null'
+      :footer="null"
       :key="showKey"
       width="1200px"
     >
-      <ManagementPop :showItem="showItem" :index='index'></ManagementPop>
+      <ManagementPop :showItem="showItem" :index="index"></ManagementPop>
     </a-modal>
   </div>
 </template>
@@ -147,7 +159,8 @@ export default {
     ManagementPop
   },
   props: {
-    enterpriseTypeOption: { // 企业类型字典值
+    enterpriseTypeOption: {
+      // 企业类型字典值
       type: Array,
       default: () => {
         return []
@@ -169,8 +182,7 @@ export default {
       cardInsideWidth: 360, // 卡片的宽度
       cardOutsideHeight: 198, // 卡片组件的高度
       cardInsideHeight: 176, // 卡片的高度
-      topicList: [
-      ],
+      topicList: [],
       newGroupName: {
         // 修改后的企业新名称
         cur: []
@@ -271,44 +283,47 @@ export default {
     },
     // 初始化卡片列表
     async initTopicCardList () {
-      this.$http.get('/category/getCategoryTree').then(({ data: res }) => {
-        // 首先对后端返回的数据进行排序，这是为了方便进行卡片排序
-        this.oldIdList = res.data
-        res.data.sort((a, b) => a.sortIndex - b.sortIndex)
-        this.topicList = res.data
-        res.data.map((resource, index) => {
-          this.topicList[index].id = `card_${this.topicList[index].id}`
-          const indexson = index
-          this.$set(this.topicList[index], 'positionNum', indexson + 1)
-        })
-        console.log('this.topicList', res.data)
-        if (this.selectIndex !== -1) {
-          console.log('showItem=============>', res.data[this.selectIndex])
-          if (res.data[this.selectIndex].children) {
-            res.data[this.selectIndex].children.forEach(val => {
-              val.key = val.id
-              if (val.isAttr === 'true') {
-                val.isAttr = true
-              } else if (val.isAttr === 'false') {
-                val.isAttr = false
-              }
-              if (val.isFilterCriteria === 'true') {
-                val.isFilterCriteria = true
-              } else if (val.isFilterCriteria === 'false') {
-                val.isFilterCriteria = false
-              }
-              if (val.isLinkToDic === 'true') {
-                val.isLinkToDic = true
-              } else if (val.isLinkToDic === 'false') {
-                val.isLinkToDic = false
-              }
-            })
+      this.$http
+        .get('/category/getCategoryTree')
+        .then(({ data: res }) => {
+          // 首先对后端返回的数据进行排序，这是为了方便进行卡片排序
+          this.oldIdList = res.data
+          res.data.sort((a, b) => a.sortIndex - b.sortIndex)
+          this.topicList = res.data
+          res.data.map((resource, index) => {
+            this.topicList[index].id = `card_${this.topicList[index].id}`
+            const indexson = index
+            this.$set(this.topicList[index], 'positionNum', indexson + 1)
+          })
+          console.log('this.topicList', res.data)
+          if (this.selectIndex !== -1) {
+            console.log('showItem=============>', res.data[this.selectIndex])
+            if (res.data[this.selectIndex].children) {
+              res.data[this.selectIndex].children.forEach((val) => {
+                val.key = val.id
+                if (val.isAttr === 'true') {
+                  val.isAttr = true
+                } else if (val.isAttr === 'false') {
+                  val.isAttr = false
+                }
+                if (val.isFilterCriteria === 'true') {
+                  val.isFilterCriteria = true
+                } else if (val.isFilterCriteria === 'false') {
+                  val.isFilterCriteria = false
+                }
+                if (val.isLinkToDic === 'true') {
+                  val.isLinkToDic = true
+                } else if (val.isLinkToDic === 'false') {
+                  val.isLinkToDic = false
+                }
+              })
+            }
+            console.log('showItem=============>', res.data[this.selectIndex])
+            this.showItem = res.data[this.selectIndex]
           }
-          console.log('showItem=============>', res.data[this.selectIndex])
-          this.showItem = res.data[this.selectIndex]
-        }
-        this.cardNum = this.topicList.length
-      }).catch(() => {})
+          this.cardNum = this.topicList.length
+        })
+        .catch(() => {})
     },
     // 卡片开始拖拽前的方法
     startDrag () {},
@@ -348,40 +363,42 @@ export default {
         const params = {
           ids: letid
         }
-        this.$http.post('/category/deleteById', params).then(({ data: res }) => {
-          let removeIndex = 0
-          this.topicList.forEach((enterprise, index) => {
-            if (
-              enterprise.positionNum &&
+        this.$http
+          .post('/category/deleteById', params)
+          .then(({ data: res }) => {
+            let removeIndex = 0
+            this.topicList.forEach((enterprise, index) => {
+              if (
+                enterprise.positionNum &&
                 enterprise.positionNum > item.positionNum
-            ) {
-              enterprise.positionNum = enterprise.positionNum - 1
-            }
-            if (item.resourceGroupId === enterprise.resourceGroupId) {
-              enterprise.position = this.topicList.length
-              removeIndex = index
-            }
+              ) {
+                enterprise.positionNum = enterprise.positionNum - 1
+              }
+              if (item.resourceGroupId === enterprise.resourceGroupId) {
+                enterprise.position = this.topicList.length
+                removeIndex = index
+              }
+            })
+            this.topicList.splice(removeIndex, 1)
+            // 此处需要把删除的对象的id添加回来，否则缺失的id将导致卡片不能再拖动
+            this.topicList.push({ id: item.id })
+            this.cardNum -= 1
+            // 调整编辑框的企业名称顺序
+            this.resortEditGroupName()
+            // 隐藏已经删除的卡片 -> 变更为移除已经删除的卡片
+            this.$refs.cardDragger.$vnode.elm.childNodes.forEach((node) => {
+              if (node.id === item.id) {
+                node.style.display = 'none'
+                this.oldId = item.id
+              }
+            })
+            this.$message.success('删除企业成功！')
+            // 删除完退出编辑模式
+            this.initTopicCardList()
+            this.isRemoveCard = !this.isRemoveCard
+            this.isEditGroupName = !this.isEditGroupName
+            this.topicCoverZIndex = this.isEditGroupName ? -999 : 1000
           })
-          this.topicList.splice(removeIndex, 1)
-          // 此处需要把删除的对象的id添加回来，否则缺失的id将导致卡片不能再拖动
-          this.topicList.push({ id: item.id })
-          this.cardNum -= 1
-          // 调整编辑框的企业名称顺序
-          this.resortEditGroupName()
-          // 隐藏已经删除的卡片 -> 变更为移除已经删除的卡片
-          this.$refs.cardDragger.$vnode.elm.childNodes.forEach((node) => {
-            if (node.id === item.id) {
-              node.style.display = 'none'
-              this.oldId = item.id
-            }
-          })
-          this.$message.success('删除企业成功！')
-          // 删除完退出编辑模式
-          this.initTopicCardList()
-          this.isRemoveCard = !this.isRemoveCard
-          this.isEditGroupName = !this.isEditGroupName
-          this.topicCoverZIndex = this.isEditGroupName ? -999 : 1000
-        })
           .catch((e) => {
             console.log('删除企业失败！%o', e)
             this.$message.error('删除企业失败！')
@@ -395,9 +412,11 @@ export default {
         id: item.id.slice(5),
         name: item.name
       }
-      this.$http.post('/category/update', params).then(({ data: res }) => {
-        item.name = newGroupName
-      })
+      this.$http
+        .post('/category/update', params)
+        .then(({ data: res }) => {
+          item.name = newGroupName
+        })
         .catch((e) => {
           console.log('更新企业名称失败！%o', e)
           this.$message.warning('更新企业名称失败！')
@@ -437,35 +456,37 @@ export default {
         linkValue: '',
         xh: this.topicList.length + 1
       }
-      const response = this.$http.post('/category/insert', params).then(({ data: res }) => {
-        if (res.code !== 0) {
-          console.log('response.code', res)
-          this.$message.error('新增目录失败，请联系管理员！')
-        } else {
-          this.$message.success('新增目录成功！')
-          const enterprise = {
-            // id: `id${this.topicList.length + 1}`,
-            name: this.addEnterpriseName,
-            positionNum: this.cardNum + 1
+      const response = this.$http
+        .post('/category/insert', params)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            console.log('response.code', res)
+            this.$message.error('新增目录失败，请联系管理员！')
+          } else {
+            this.$message.success('新增目录成功！')
+            const enterprise = {
+              // id: `id${this.topicList.length + 1}`,
+              name: this.addEnterpriseName,
+              positionNum: this.cardNum + 1
+            }
+            this.topicList.push(enterprise)
+            this.cardNum += 1
+            this.newGroupName.cur.push(enterprise.name)
+            this.addEnterpriseName = ''
+            if (this.oldId !== -1) {
+              this.$refs.cardDragger.$vnode.elm.childNodes.forEach((node) => {
+                if (node.id === this.oldId) {
+                  node.style.display = 'flex'
+                }
+              })
+            }
+            // 创建完退出编辑模式
+            this.isRemoveCard = !this.isRemoveCard
+            this.isEditGroupName = !this.isEditGroupName
+            this.topicCoverZIndex = this.isEditGroupName ? -999 : 1000
+            this.initTopicCardList()
           }
-          this.topicList.push(enterprise)
-          this.cardNum += 1
-          this.newGroupName.cur.push(enterprise.name)
-          this.addEnterpriseName = ''
-          if (this.oldId !== -1) {
-            this.$refs.cardDragger.$vnode.elm.childNodes.forEach((node) => {
-              if (node.id === this.oldId) {
-                node.style.display = 'flex'
-              }
-            })
-          }
-          // 创建完退出编辑模式
-          this.isRemoveCard = !this.isRemoveCard
-          this.isEditGroupName = !this.isEditGroupName
-          this.topicCoverZIndex = this.isEditGroupName ? -999 : 1000
-          this.initTopicCardList()
-        }
-      })
+        })
       // const response = await resourceGroup({
       //   method: 'post',
       //   data: {
@@ -548,7 +569,7 @@ export default {
         height: 28px;
         margin-left: 14px;
         margin-top: 9px;
-        background-image: url("~@/assets/img/capabilityCatalogingManagement/edit-card.png");
+        background-image: url('~@/assets/img/capabilityCatalogingManagement/edit-card.png');
       }
     }
     div:nth-child(2) {
@@ -587,7 +608,7 @@ export default {
         left: 50%;
         margin-left: -45.5px;
         margin-top: -45.5px;
-        background-image: url("~@/assets/img/capabilityCatalogingManagement/add.png");
+        background-image: url('~@/assets/img/capabilityCatalogingManagement/add.png');
         cursor: pointer;
       }
       > span {
@@ -596,7 +617,7 @@ export default {
         padding-top: 5px;
         padding-left: 20px;
         font-size: 26px;
-        font-family: "Microsoft YaHei";
+        font-family: 'Microsoft YaHei';
       }
       .add-enterprise-input-wrap {
         // height: 50px;
@@ -634,7 +655,7 @@ export default {
           background: #0fa7f6;
           span {
             color: #ffffff;
-            font-family: "Microsoft YaHei";
+            font-family: 'Microsoft YaHei';
             font-size: 16px;
           }
         }
@@ -682,7 +703,7 @@ export default {
       text-align: center;
       color: #ffffff;
       font-size: 14px;
-      font-family: "Microsoft YaHei";
+      font-family: 'Microsoft YaHei';
     }
     span:nth-child(2) {
       display: inline-block;
@@ -691,7 +712,7 @@ export default {
       text-align: center;
       color: #ffffff;
       font-size: 14px;
-      font-family: "Microsoft YaHei";
+      font-family: 'Microsoft YaHei';
       border: 1px solid rgba(255, 255, 255, 0.5);
       padding-top: 4px;
       margin-top: 15px;
@@ -702,7 +723,7 @@ export default {
   .enterprise-card-tip-first:before,
   .enterprise-card-tip-first:after {
     position: absolute;
-    content: " ";
+    content: ' ';
     top: 32px;
     left: -16px;
     display: block;
@@ -730,7 +751,7 @@ export default {
       text-align: center;
       color: #ffffff;
       font-size: 14px;
-      font-family: "Microsoft YaHei";
+      font-family: 'Microsoft YaHei';
     }
     span:nth-child(2) {
       display: inline-block;
@@ -739,7 +760,7 @@ export default {
       text-align: center;
       color: #ffffff;
       font-size: 14px;
-      font-family: "Microsoft YaHei";
+      font-family: 'Microsoft YaHei';
       border: 1px solid rgba(255, 255, 255, 0.5);
       padding-top: 4px;
       margin-top: 15px;
@@ -750,7 +771,7 @@ export default {
   .enterprise-card-tip-third:before,
   .enterprise-card-tip-third:after {
     position: absolute;
-    content: " ";
+    content: ' ';
     top: 32px;
     left: 180px;
     display: block;
@@ -779,7 +800,7 @@ export default {
       text-align: center;
       color: #ffffff;
       font-size: 14px;
-      font-family: "Microsoft YaHei";
+      font-family: 'Microsoft YaHei';
     }
     span:nth-child(2) {
       display: inline-block;
@@ -788,7 +809,7 @@ export default {
       text-align: center;
       color: #ffffff;
       font-size: 14px;
-      font-family: "Microsoft YaHei";
+      font-family: 'Microsoft YaHei';
       border: 1px solid rgba(255, 255, 255, 0.5);
       padding-top: 4px;
       margin-top: 15px;
@@ -799,7 +820,7 @@ export default {
   .enterprise-card-tip-second:before,
   .enterprise-card-tip-second:after {
     position: absolute;
-    content: " ";
+    content: ' ';
     top: -15px;
     left: 78px;
     display: block;
@@ -814,7 +835,7 @@ export default {
     width: 100%;
     // height: 373px;
     height: 176px;
-    background-image: url("~@/assets/img/capabilityCatalogingManagement/small-card-orange.png");
+    background-image: url('~@/assets/img/capabilityCatalogingManagement/small-card-orange.png');
     .resource-detail-title {
       width: 100%;
       height: 40px;
@@ -826,7 +847,7 @@ export default {
       span {
         width: 100%;
         height: 100%;
-        font-family: "Microsoft YaHei";
+        font-family: 'Microsoft YaHei';
         font-size: 20px;
         display: inline-block;
         overflow: hidden;
@@ -845,7 +866,7 @@ export default {
         width: 100%;
         height: 30px;
         padding-left: 19px;
-        font-family: "Microsoft YaHei";
+        font-family: 'Microsoft YaHei';
         font-size: 20px;
         color: white;
         vertical-align: middle;
@@ -877,7 +898,7 @@ export default {
       position: absolute;
       width: 28px;
       height: 28px;
-      background-image: url("~@/assets/img/capabilityCatalogingManagement/remove.png");
+      background-image: url('~@/assets/img/capabilityCatalogingManagement/remove.png');
       top: 0;
       right: 0;
       cursor: pointer;
@@ -886,7 +907,7 @@ export default {
 }
 input::-webkit-input-placeholder {
   font-size: 14px;
-  font-family: "Microsoft YaHei";
+  font-family: 'Microsoft YaHei';
   color: #999999;
 }
 </style>