后台管理-模型关联 关系删除&&筛选

cmdb-ui/src/modules/cmdb/views/model_relation/index.vue

@@ -1,65 +1,63 @@
 <template>
-  <div>
-    <a-card :bordered="false">
-      <a-button @click="handleCreate" type="primary" style="margin-bottom: 15px;" icon="plus">新增关系</a-button>
-      <model-relation-table ref="table"></model-relation-table>
-      <a-modal
-        :closable="false"
-        :title="drawerTitle"
-        :visible="visible"
-        @cancel="onClose"
-        @ok="handleSubmit"
-        width="500px"
-      >
-        <a-form :form="form" @submit="handleSubmit" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
-          <a-form-item label="源模型">
-            <a-select
-              showSearch
-              name="source_ci_type_id"
-              v-decorator="['source_ci_type_id', { rules: [{ required: true, message: '请选择源模型' }] }]"
-              @change="handleSourceTypeChange"
-              :filterOption="filterOption"
-            >
-              <a-select-option :value="CIType.id" :key="CIType.id" v-for="CIType in displayCITypes">{{
-                CIType.alias || CIType.name
-              }}</a-select-option>
-            </a-select>
-          </a-form-item>
-          <a-form-item label="目标模型">
-            <a-select
-              showSearch
-              name="ci_type_id"
-              v-decorator="['ci_type_id', { rules: [{ required: true, message: '请选择目标模型' }] }]"
-              @change="handleTargetTypeChange"
-              :filterOption="filterOption"
-            >
-              <a-select-option :value="CIType.id" :key="CIType.id" v-for="CIType in displayTargetCITypes">
-                {{ CIType.alias || CIType.name }}
-              </a-select-option>
-            </a-select>
-          </a-form-item>
+  <div class="model-relation">
+    <a-button @click="handleCreate" type="primary" style="margin-bottom: 15px;" icon="plus">新增关系</a-button>
+    <model-relation-table ref="table"></model-relation-table>
+    <a-modal
+      :closable="false"
+      :title="drawerTitle"
+      :visible="visible"
+      @cancel="onClose"
+      @ok="handleSubmit"
+      width="500px"
+    >
+      <a-form :form="form" @submit="handleSubmit" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
+        <a-form-item label="源模型">
+          <a-select
+            showSearch
+            name="source_ci_type_id"
+            v-decorator="['source_ci_type_id', { rules: [{ required: true, message: '请选择源模型' }] }]"
+            @change="handleSourceTypeChange"
+            :filterOption="filterOption"
+          >
+            <a-select-option :value="CIType.id" :key="CIType.id" v-for="CIType in displayCITypes">{{
+              CIType.alias || CIType.name
+            }}</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="目标模型">
+          <a-select
+            showSearch
+            name="ci_type_id"
+            v-decorator="['ci_type_id', { rules: [{ required: true, message: '请选择目标模型' }] }]"
+            @change="handleTargetTypeChange"
+            :filterOption="filterOption"
+          >
+            <a-select-option :value="CIType.id" :key="CIType.id" v-for="CIType in displayTargetCITypes">
+              {{ CIType.alias || CIType.name }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
 
-          <a-form-item label="关联关系">
-            <a-select
-              name="relation_type_id"
-              v-decorator="['relation_type_id', { rules: [{ required: true, message: '请选择关联关系' }] }]"
-            >
-              <a-select-option :value="relationType.id" :key="relationType.id" v-for="relationType in relationTypes">{{
-                relationType.name
-              }}</a-select-option>
-            </a-select>
-          </a-form-item>
+        <a-form-item label="关联关系">
+          <a-select
+            name="relation_type_id"
+            v-decorator="['relation_type_id', { rules: [{ required: true, message: '请选择关联关系' }] }]"
+          >
+            <a-select-option :value="relationType.id" :key="relationType.id" v-for="relationType in relationTypes">{{
+              relationType.name
+            }}</a-select-option>
+          </a-select>
+        </a-form-item>
 
-          <a-form-item label="关联约束">
-            <a-select v-decorator="['constraint', { rules: [{ required: true, message: '请选择关联约束' }] }]">
-              <a-select-option value="0">一对多</a-select-option>
-              <a-select-option value="1">一对一</a-select-option>
-              <a-select-option value="2">多对多</a-select-option>
-            </a-select>
-          </a-form-item>
-        </a-form>
-      </a-modal>
-    </a-card>
+        <a-form-item label="关联约束">
+          <a-select v-decorator="['constraint', { rules: [{ required: true, message: '请选择关联约束' }] }]">
+            <a-select-option value="0">一对多</a-select-option>
+            <a-select-option value="1">一对一</a-select-option>
+            <a-select-option value="2">多对多</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-form>
+    </a-modal>
   </div>
 </template>
 
@@ -110,16 +108,13 @@ export default {
   },
   mounted() {
     const _currentId = localStorage.getItem('ops_cityps_currentId')
-    console.log(_currentId)
     if (_currentId) {
       this.currentId = _currentId
     }
     searchResourceType({ page_size: 9999, app_id: 'cmdb' }).then((res) => {
-      console.log('searchResourceType', res)
       this.resource_type = { groups: res.groups, id2perms: res.id2perms }
     })
     this.loadCITypes(!_currentId)
-    console.log(this.CITypeId)
   },
   computed: {
     currentCId() {
@@ -168,7 +163,6 @@ export default {
     },
     getCITypes() {
       getCITypes().then((res) => {
-        console.log('getCITypes', res.ci_types)
         this.CITypes = res.ci_types
       })
     },
@@ -196,9 +190,6 @@ export default {
       e.preventDefault()
       this.form.validateFields((err, values) => {
         if (!err) {
-          // eslint-disable-next-line no-console
-          console.log('Received values of form: ', values)
-
           createRelation(values.source_ci_type_id, values.ci_type_id, values.relation_type_id, values.constraint).then(
             (res) => {
               this.$message.success(`添加成功`)
@@ -215,8 +206,6 @@ export default {
       this.$refs.table.refresh()
     },
     handleDelete(record) {
-      console.log(record)
-
       deleteRelation(record.source_ci_type_id, record.id).then((res) => {
         this.$message.success(`删除成功！`)
 
@@ -236,4 +225,12 @@ export default {
 }
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.model-relation {
+  background-color: #fff;
+  border-radius: 15px;
+  padding: 24px;
+  height: calc(100vh - 64px);
+  margin-bottom: -24px;
+}
+</style>

cmdb-ui/src/modules/cmdb/views/model_relation/modules/modelRelationTable.vue

@@ -1,12 +1,13 @@
 <template>
   <div>
     <vxe-table
+      ref="xTable"
       stripe
       class="ops-stripe-table"
       show-header-overflow
       show-overflow
       resizable
-      :max-height="`${windowHeight - 183}px`"
+      :height="`${windowHeight - 160}px`"
       :data="tableData"
       :sort-config="{ defaultSort: { field: 'created_at', order: 'desc' } }"
     >
@@ -16,21 +17,8 @@
         field="relation_type_id"
         title="关系"
         :filters="[{ data: '' }]"
-        :filter-method="filterRelationMethod"
-        :filter-recover-method="filterRelationRecoverMethod"
+        :filter-multiple="false"
       >
-        <template #filter="{ $panel, column }">
-          <template v-for="(option, index) in column.filters">
-            <input
-              type="type"
-              :key="index"
-              v-model="option.data"
-              @input="$panel.changeOption($event, !!option.data, option)"
-              @keyup.enter="$panel.confirmFilter()"
-              placeholder="按回车确认筛选"
-            />
-          </template>
-        </template>
         <template #default="{ row }">
           <a-tag color="cyan">
             {{ row.relation_type.name }}
@@ -39,9 +27,14 @@
       </vxe-column>
       <vxe-column field="child.alias" title="目标模型"></vxe-column>
       <vxe-column field="constraint" title="关联约束"></vxe-column>
-      <vxe-column field="authorization" title="授权" width="89px">
+      <vxe-column field="authorization" title="操作" width="89px">
         <template #default="{ row }">
-          <a @click="handleOpenGrant(row)"><a-icon type="user-add"/></a>
+          <a-space>
+            <a @click="handleOpenGrant(row)"><a-icon type="user-add"/></a>
+            <a-popconfirm title="确认删除？" @confirm="deleteRelation(row)">
+              <a :style="{ color: 'red' }"><ops-icon type="icon-xianxing-delete"/></a>
+            </a-popconfirm>
+          </a-space>
         </template>
       </vxe-column>
     </vxe-table>
@@ -50,7 +43,7 @@
 </template>
 
 <script>
-import { getCITypeRelations } from '@/modules/cmdb/api/CITypeRelation'
+import { getCITypeRelations, deleteRelation } from '@/modules/cmdb/api/CITypeRelation'
 import { getRelationTypes } from '@/modules/cmdb/api/relationType'
 import CMDBGrant from '../../../components/cmdbGrant'
 
@@ -86,40 +79,35 @@ export default {
         item.constraint = this.handleConstraint(item.constraint)
       })
       this.tableData = res
-      console.log('MainData', res)
     },
     // 获取关系
     async getRelationTypes() {
       const res = await getRelationTypes()
-      const relationTypeMap = new Map()
-      res.forEach((item) => {
-        relationTypeMap.set(item.id, item.name)
-      })
-      this.relationTypeList = relationTypeMap
-      console.log('relationTypeList', this.relationTypeList)
+      this.relationTypeList = res.map((item) => ({ value: item.id, label: item.name }))
+      const $table = this.$refs.xTable
+      if ($table) {
+        const nameColumn = $table.getColumnByField('relation_type_id')
+        if (nameColumn) {
+          $table.setFilter(nameColumn, this.relationTypeList)
+        }
+      }
     },
     // 转换关联关系
     handleConstraint(constraintId) {
       return this.constraintMap[constraintId]
     },
     handleOpenGrant(record) {
-      console.log('record', record)
-      console.log(`${record.parent.name} -> ${record.child.name}`)
-      // this.$refs.grantDrawer.open({ name: `${record.parent.name} -> ${record.child.name}` })
       this.$refs.cmdbGrant.open({
         name: `${record.parent.name} -> ${record.child.name}`,
         typeRelationIds: [record.parent_id, record.child_id],
         cmdbGrantType: 'type_relation',
       })
     },
-    filterRelationMethod({ option, row }) {
-      return row.relation_type.name.includes(String(option.data))
-    },
-    filterRelationRecoverMethod({ option }) {
-      option.data = ''
-    },
-    refresh() {
-      this.getMainData()
+    deleteRelation(row) {
+      deleteRelation(row.parent_id, row.child_id).then((res) => {
+        this.$message.success(`删除成功！`)
+        this.getRelationTypes()
+      })
     },
   },
 }