[更新] 完成资源类型页面

ui/src/views/cmdb/acl/module/resourceTypeForm.vue

@@ -27,7 +27,7 @@
         :wrapper-col="formItemLayout.wrapperCol"
         label="描述"
       >
-        <a-textarea placeholder="请输入描述信息..." name="description" :rows="4" />
+        <a-textarea placeholder="请输入描述信息..." name="description" :rows="4"  v-decorator="['description', {rules: []} ]"/>
       </a-form-item>
 
       <a-form-item
@@ -35,13 +35,8 @@
         :wrapper-col="formItemLayout.wrapperCol"
         label="权限"
       >
-        <div :style="{ borderBottom: '1px solid #E9E9E9' }">
+        <a-select mode="tags" v-model="perms" style="width: 100%" placeholder="请输入权限名...">
-          <a-checkbox :indeterminate="indeterminate" @change="onCheckAllChange" :checked="checkAll">
+        </a-select>
-            全选
-          </a-checkbox>
-        </div>
-        <br />
-        <a-checkbox-group :options="plainOptions" v-model="perms" @change="onPermChange" />
 
       </a-form-item>
 
@@ -89,10 +84,7 @@ export default {
       drawerTitle: '新增资源类型',
       drawerVisible: false,
       formLayout: 'vertical',
-      perms: ['1'],
+      perms: []
-      indeterminate: true,
-      checkAll: false,
-      plainOptions: ['1', '2']
     }
   },
 
@@ -101,7 +93,6 @@ export default {
   },
 
   computed: {
-
     formItemLayout () {
       const { formLayout } = this
       return formLayout === 'horizontal' ? {
@@ -127,17 +118,6 @@ export default {
   mounted () {
   },
   methods: {
-    onPermChange (perms) {
-      this.indeterminate = !!perms.length && perms.length < this.plainOptions.length
-      this.checkAll = perms.length === this.plainOptions.length
-    },
-    onCheckAllChange (e) {
-      Object.assign(this, {
-        perms: e.target.checked ? this.plainOptions : [],
-        indeterminate: false,
-        checkAll: e.target.checked
-      })
-    },
     handleCreate () {
       this.drawerVisible = true
     },
@@ -152,6 +132,7 @@ export default {
     handleEdit (record) {
       this.drawerVisible = true
       console.log(record)
+      this.perms = record.perms
       this.$nextTick(() => {
         this.form.setFieldsValue({
           id: record.id,

ui/src/views/cmdb/acl/resource_types.vue

@@ -112,7 +112,7 @@ export default {
           title: '类型名',
           dataIndex: 'name',
           sorter: false,
-          width: 50,
+          width: 300,
           scopedSlots: {
             customRender: 'nameSearchRender',
             filterDropdown: 'filterDropdown',
@@ -130,7 +130,7 @@ export default {
         {
           title: '描述',
           dataIndex: 'description',
-          width: 250,
+          width: 500,
           sorter: false,
           scopedSlots: { customRender: 'description' }
         },
@@ -241,6 +241,15 @@ export default {
     },
 
     handleEdit (record) {
+      var perms = []
+      var permList = this.id2perms[record.id]
+      if (permList) {
+        for (var i = 0; i < permList.length; i++) {
+          perms.push(permList[i].name)
+        }
+      }
+      record.perms = perms
+      console.log(record)
       this.$refs.resourceTypeForm.handleEdit(record)
     },
     handleDelete (record) {