perf: 修改 protocol

src/components/FormFields/ProtocolSelector.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-for="(item, index) in items" :key="index" style="display: flex;margin-top: 8px;">
+    <div v-for="(item, index) in items" :key="item.name" style="display: flex;margin-top: 8px;">
       <el-input v-model="item.port" class="input-with-select" v-bind="$attrs">
         <el-select slot="prepend" v-model="item.name" @change="handleProtocolChange($event, item)">
           <el-option v-for="p of remainProtocols" :key="p.name" :label="p.name" :value="p.name" />
@@ -42,7 +42,7 @@ export default {
     },
     choices: {
       type: Array,
-      default: () => []
+      default: () => ([])
     }
   },
   data() {
@@ -52,51 +52,33 @@ export default {
     }
   },
   computed: {
-    protocols() {
+    selectedProtocolNames() {
-      return this.choices.map(item => {
+      return this.items.map(item => item.name)
-        const proto = item.split('/')
-        return { name: proto[0], port: proto[1] }
-      })
-    },
-    values() {
-      return this.items.map(item => {
-        return `${item.name}/${item.port}`
-      })
-    },
-    itemsMap() {
-      const mapper = {}
-      for (const item of this.items) {
-        mapper[item.name] = item
-      }
-      return mapper
     },
     remainProtocols() {
-      return this.protocols.filter(proto => {
+      return this.choices.filter(proto => {
-        return !this.itemsMap[proto.name]
+        return this.selectedProtocolNames.indexOf(proto.name) === -1
       })
     }
   },
   watch: {
-    values: {
+    choices: {
+      handler(value) {
+        this.setDefaultItems(value)
+      }
+    },
+    items: {
       handler(value) {
         this.$emit('input', value)
       },
       immediate: true,
       deep: true
-    },
-    choices: {
-      handler(value) {
-        this.setDefaultItems()
-      }
     }
   },
   mounted() {
-    this.setDefaultItems()
+    this.setDefaultItems(this.choices)
   },
   methods: {
-    onInput(val) {
-      this.$emit('input', 'my-input: ' + val)
-    },
     handleDelete(index) {
       this.items = this.items.filter((value, i) => {
         return i !== index
@@ -110,20 +92,14 @@ export default {
       item.name = selected.name
       item.port = selected.port
     },
-    setDefaultItems() {
+    setDefaultItems(choices) {
-      let items = []
+      if (!this.value) {
-      if (this.value.length !== 0) {
+        if (choices.length !== 0) {
-        items = this.value.map(item => {
+          this.items = [choices[0]]
-          const proto = item.split('/')
+        }
-          return { name: proto[0], port: proto[1] }
+      } else {
-        })
+        this.items = [...this.value]
-        const protocolsNames = this.protocols.map(item => item.name)
-        items = items.filter(item => protocolsNames.indexOf(item.name) > -1)
       }
-      if (items.length === 0) {
-        items.push({ ...this.protocols[0] })
-      }
-      this.items = items
     }
   }
 }

src/store/modules/assets.js

@@ -46,11 +46,14 @@ const mutations = {
 const actions = {
   getAssetCategories({ commit, dispatch, state }) {
     return new Promise(resolve => {
+      if (state.assetCategories.length > 0) {
+        resolve(state)
+      }
       apiGetCategoryTypes().then(data => {
         commit('SET_CATEGORIES', data)
         commit('SET_CATEGORIES_DROPDOWN', data)
-        console.log('Set done')
+        console.log('Get category done: ', state.assetCategories)
-        resolve(true)
+        resolve(state)
       })
     })
   }

src/views/assets/Platform/PlatformCreateUpdate.vue

@@ -25,7 +25,9 @@ export default {
       initial: {
         comment: 'Hello world',
         charset: 'utf8',
-        category_type: ['host', 'linux']
+        category_type: ['host', 'linux'],
+        domain_enabled: false,
+        protocols_enabled: false
       },
       fields: [
         [this.$t('common.Basic'), [
@@ -37,8 +39,11 @@ export default {
         [this.$t('assets.Domain'), [
           'domain_enabled', 'domain_default'
         ]],
-        [this.$t('assets.Auth'), [
+        [this.$t('assets.Account'), [
-          'admin_user_enabled', 'admin_user_default'
+          'su_enabled', 'su_method',
+          'verify_account_enabled', 'verify_account_method',
+          'create_account_enabled', 'create_account_method',
+          'change_password_enabled', 'change_password_method'
         ]],
         [this.$t('common.Other'), ['comment']]
       ],
@@ -89,30 +94,27 @@ export default {
           ],
           el: {
             multiple: false,
-            options: this.$store.state.assets.assetCategoriesCascader
+            options: []
           },
           on: {
-            change: ([event], formValue) => {
+            change: ([event], updateForm) => {
               const category = event[0]
               const type = event[1]
-              this.setLimits(category, type)
+              this.setLimits(category, type, updateForm)
             }
           }
         },
-        admin_user_default: {
-          ...assetMeta.admin_user,
-          hidden: (formValue) => {
-            return !formValue['admin_user_enabled']
-          }
-        },
         protocols_enabled: {
           el: {
-            disabled: false
+            disabled: false,
-          }
+            value: false
+          },
+          value: false
         },
         protocols_default: {
           ...assetMeta.protocols,
           hidden: (formValue) => {
+            console.log('formValue', formValue)
             return !formValue['protocols_enabled']
           }
         },
@@ -144,7 +146,10 @@ export default {
     }
   },
   mounted() {
-    this.setCategoryOnCreate()
+    this.$store.dispatch('assets/getAssetCategories').then((state) => {
+      this.fieldsMeta.category_type.el.options = state.assetCategoriesCascader
+      this.setCategoryOnCreate()
+    })
   },
   methods: {
     setCategoryOnCreate() {
@@ -154,22 +159,22 @@ export default {
         return
       }
     },
-    toOption(choice) {
+    async setLimits(category, type, updateForm) {
-      return {
+      const url = `/api/v1/assets/platforms/type-constraints/?category=${category}&type=${type}`
-        label: choice['display_name'],
+      const constraints = await this.$axios.get(url)
-        value: choice['value']
+      const hasDomain = constraints['has_domain']
-      }
-    },
-    async setLimits(category, type) {
-      const url = `/api/v1/assets/platforms/type-limits/?category=${category}&type=${type}`
-      const limits = await this.$axios.get(url)
-      const hasDomain = limits['has_domain']
-      const protocolLimits = limits['protocols_limit']
       this.fieldsMeta.domain_enabled.el.disabled = !hasDomain
-      this.fieldsMeta.domain_enabled.value = !!hasDomain
 
-      this.fieldsMeta.protocols_enabled.el.disabled = protocolLimits.length === 0
+      const protocols = constraints['protocols'] || []
-      this.fieldsMeta.protocols_default.el.choices = protocolLimits
+      this.fieldsMeta.protocols_enabled.el.disabled = protocols.length === 0
+      this.fieldsMeta.protocols_default.el.choices = protocols
+
+      if (updateForm) {
+        updateForm({
+          protocols_enabled: !!protocols.length,
+          domain_enabled: hasDomain
+        })
+      }
     }
   }
 }

src/views/assets/const.js

@@ -10,14 +10,10 @@ export const assetFieldsMeta = (vm) => {
     },
     protocols: {
       component: ProtocolSelector,
-      on: {
+      on: {},
-        input: ([value], updateForm) => {
+      el: {
-          vm.fieldsMeta.accounts.el.protocols = value.map(item => {
+        choices: []
-            return item.split('/')[0]
+      }
-          })
-        }
-      },
-      el: {}
     },
     platform: {
       el: {