Define display fields

cmdb-ui/src/views/cmdb/ci/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <a-card :bordered="false">
       <a-spin :tip="loadTip" :spinning="loading">
         <search-form ref="search" @refresh="refreshTable" :preferenceAttrList="preferenceAttrList" />
@@ -11,6 +12,7 @@
             icon="plus"
             @click="$refs.create.visible = true; $refs.create.action='create'"
           >新建</a-button>
+          <a-button class="right" @click="showDrawer(typeId)">显示字段</a-button>
           <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
             <a-menu slot="overlay">
               <a-menu-item
@@ -73,6 +75,52 @@
         <create-instance-form @refresh="refreshTable" ref="create" @submit="batchUpdate" />
       </a-spin>
     </a-card>
+
+    <template>
+      <div>
+        <a-drawer
+          title="显示字段定义"
+          :width="600"
+          @close="onClose"
+          :visible="visible"
+          :wrapStyle="{height: 'calc(100% - 108px)', overflow: 'auto', paddingBottom: '108px'}"
+        >
+          <template>
+            <a-transfer
+              :dataSource="attrList"
+              :showSearch="true"
+              :listStyle="{
+                width: '230px',
+                height: '500px',
+              }"
+              :titles="['未选属性','已选属性']"
+              :render="item=>item.title"
+              :targetKeys="selectedAttrList"
+              @change="handleChange"
+              @search="handleSearch"
+            >
+              <span slot="notFoundContent">没数据</span>
+            </a-transfer>
+          </template>
+          <div
+            :style="{
+              position: 'absolute',
+              left: 0,
+              bottom: 0,
+              width: '100%',
+              borderTop: '1px solid #e9e9e9',
+              padding: '10px 16px',
+              background: '#fff',
+              textAlign: 'right',
+            }"
+          >
+            <a-button :style="{marginRight: '8px'}" @click="onClose">取消</a-button>
+            <a-button @click="subInstanceSubmit" type="primary">提交</a-button>
+          </div>
+        </a-drawer>
+      </div>
+    </template>
+  </div>
 </template>
 
 <script>
@@ -85,8 +133,9 @@ import CreateInstanceForm from './modules/CreateInstanceForm'
 import EditableCell from './modules/EditableCell'
 import CiDetail from './modules/CiDetail'
 import { searchCI, updateCI, deleteCI } from '@/api/cmdb/ci'
-import { getSubscribeAttributes } from '@/api/cmdb/preference'
+import { getSubscribeAttributes, subscribeCIType } from '@/api/cmdb/preference'
 import { notification } from 'ant-design-vue'
+import { getCITypeAttributesByName } from '@/api/cmdb/CITypeAttr'
 
 var valueTypeMap = {
   '0': 'int',
@@ -123,6 +172,10 @@ export default {
 
       preferenceAttrList: [],
 
+      selectedAttrList: [],
+      attrList: [],
+      visible: false,
+
       instanceList: [],
       // 表头
       columns: [],
@@ -202,6 +255,58 @@ export default {
   },
   inject: ['reload'],
   methods: {
+    showDrawer () {
+      this.getAttrList()
+    },
+    getAttrList () {
+      getCITypeAttributesByName(this.typeId).then(res => {
+        const attributes = res.attributes
+        getSubscribeAttributes(this.typeId).then(_res => {
+          const attrList = []
+          const selectedAttrList = []
+          const subAttributes = _res.attributes
+          this.instanceSubscribed = _res.is_subscribed
+          subAttributes.forEach(item => {
+            selectedAttrList.push(item.id.toString())
+          })
+
+          attributes.forEach(item => {
+            const data = {
+              key: item.id.toString(),
+              title: item.alias || item.name
+            }
+            attrList.push(data)
+          })
+
+          this.attrList = attrList
+          this.selectedAttrList = selectedAttrList
+          this.visible = true
+        })
+      })
+    },
+    onClose () {
+      this.visible = false
+      this.reload()
+    },
+    subInstanceSubmit () {
+      subscribeCIType(this.typeId, this.selectedAttrList)
+        .then(res => {
+          notification.success({
+            message: '修改成功'
+          })
+          this.reload()
+        })
+        .catch(e => {
+          notification.error({
+            message: e.response.data.message
+          })
+        })
+    },
+    handleChange (targetKeys, direction, moveKeys) {
+      this.selectedAttrList = targetKeys
+    },
+    handleSearch (dir, value) {},
+
     setColumnWidth () {
       let rows = []
       try {
@@ -445,15 +550,18 @@ export default {
 }
 </script>
 
-<style>
+<style lang='less' scoped>
-.ant-table-thead > tr > th,
+/deep/ .ant-table-thead > tr > th,
-.ant-table-tbody > tr > td {
+/deep/ .ant-table-tbody > tr > td {
   white-space: nowrap;
   overflow: hidden;
 }
-.spin-content {
+/deep/ .spin-content {
   border: 1px solid #91d5ff;
   background-color: #e6f7ff;
   padding: 30px;
 }
+.right {
+  float: right;
+}
 </style>