replay and command storage create update views (#40)

* active menu

* create update replay and command storage views

src/views/sessions/CommandStorageCreate.vue

@@ -1,121 +0,0 @@
-<template>
-  <GenericCreateUpdatePage
-    :create-success-next-route="createSuccessUrl"
-    :clean-form-value="cleanFormValue"
-    :fields="selectFields"
-    :initial="selectInitial"
-    :fields-meta="selectFieldsMeta"
-    :url="url"
-  />
-</template>
-
-<script>
-import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
-
-export default {
-  name: 'CommandStorageCreate',
-  components: {
-    GenericCreateUpdatePage
-  },
-  data() {
-    return {
-      createSuccessUrl: { name: 'Storage' },
-      es: {
-        initial: {
-          type: 'es'
-        },
-        fields: [
-          ['', ['name', 'type', 'hosts', 'index', 'doc_type', 'comment']]
-        ],
-        fieldsMeta: {
-          name: {
-            label: this.$t('sessions.name')
-          },
-          comment: {
-            label: this.$t('sessions.comment')
-          },
-          type: {
-            type: 'select',
-            label: this.$t('sessions.type'),
-            disabled: true,
-            rules: [
-              { required: true }
-            ]
-          },
-          hosts: {
-            label: this.$t('sessions.hosts'),
-            rules: [
-              { required: true }
-            ]
-          },
-          index: {
-            label: this.$t('sessions.index'),
-            rules: [
-              { required: true }
-            ]
-          },
-          doc_type: {
-            label: this.$t('sessions.docType'),
-            rules: [
-              { required: true }
-            ]
-          }
-        }
-      },
-      url: '/api/v1/terminal/command-storages/'
-    }
-  },
-  computed: {
-    postUrl() {
-      return this.url
-    },
-    selectInitial() {
-      return this.renderFieldObject.initial
-    },
-    selectFields() {
-      return this.renderFieldObject.fields
-    },
-    selectFieldsMeta() {
-      return this.renderFieldObject.fieldsMeta
-    },
-    renderFieldObject() {
-      const storageType = this.$route.query.type
-      if (typeof storageType !== 'string') {
-        return this.es
-      }
-      switch (storageType.toLowerCase()) {
-        case 'es':
-          return this.es
-        default:
-          return this.es
-      }
-    }
-  },
-  methods: {
-    cleanFormValue(value) {
-      switch (value.type.toLowerCase()) {
-        case 'es':
-          return this.createEsMeta(value)
-      }
-      return value
-    },
-    createEsMeta(value) {
-      const host_array = value.hosts.split(',').map(item => (item.trim()))
-      return {
-        name: value.name,
-        type: 'es',
-        comment: value.comment,
-        meta: {
-          es_hosts: host_array,
-          es_index: value.index,
-          es_doc_type: value.doc_type
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/sessions/CommandStorageCreateUpdate.vue

@@ -3,10 +3,12 @@
     <GenericCreateUpdatePage
       :fields="selectFields"
       :url="url"
-      :update-success-next-route="updateSuccessUrl"
+      :initial="initial"
+      :update-success-next-route="successUrl"
+      :create-success-next-route="successUrl"
       :clean-form-value="cleanFormValue"
       :object="formData"
-      :fields-meta="selectedFieldsMeta"
+      :fields-meta="fieldsMeta"
     />
   </div>
 </template>
@@ -28,75 +30,79 @@ export default {
         comment: ''
       },
       commandStorageData: {},
-      updateSuccessUrl: { name: 'Storage', params: { activeMenu: 'command' }},
+      successUrl: { name: 'Storage', params: { activeMenu: 'command' }},
-      es: {
+
-        initial: {
+      fieldsMeta: {
-          type: 'es'
+        name: {
+          label: this.$t('sessions.name')
         },
-        fields: [
+        comment: {
-          ['', ['name', 'type', 'hosts', 'index', 'doc_type', 'comment']]
+          label: this.$t('sessions.comment')
-        ],
+        },
-        fieldsMeta: {
+        type: {
-          name: {
+          type: 'select',
-            label: this.$t('sessions.name')
+          label: this.$t('sessions.type'),
-          },
+          disabled: true,
-          comment: {
+          rules: [
-            label: this.$t('sessions.comment')
+            { required: true }
-          },
+          ]
-          type: {
+        },
-            type: 'select',
+        hosts: {
-            label: this.$t('sessions.type'),
+          label: this.$t('sessions.hosts'),
-            disabled: true,
+          rules: [
-            rules: [
+            { required: true }
-              { required: true }
+          ]
-            ]
+        },
-          },
+        index: {
-          hosts: {
+          label: this.$t('sessions.index'),
-            label: this.$t('sessions.hosts'),
+          rules: [
-            rules: [
+            { required: true }
-              { required: true }
+          ]
-            ]
+        },
-          },
+        doc_type: {
-          index: {
+          label: this.$t('sessions.docType'),
-            label: this.$t('sessions.index'),
+          rules: [
-            rules: [
+            { required: true }
-              { required: true }
+          ]
-            ]
-          },
-          doc_type: {
-            label: this.$t('sessions.docType'),
-            rules: [
-              { required: true }
-            ]
-          }
         }
       },
+      fieldsMap: {
+        es: ['name', 'type', 'hosts', 'index', 'doc_type', 'comment']
+      },
       url: '/api/v1/terminal/command-storages/'
     }
   },
   computed: {
     selectFields() {
-      return this.renderCommandStorage.fields
+      return this.fieldsMap[this.currentType]
     },
-    selectedFieldsMeta() {
+    initial() {
-      return this.renderCommandStorage.fieldsMeta
+      return { type: this.currentType }
     },
-    renderCommandStorage() {
+    currentType() {
-      switch (this.formData.type.toLowerCase()) {
+      const params = this.$route.params
-        case 'es':
+      const query = this.$route.query
-          return this.es
+      if (params.id) {
-        default:
+        return this.formData.type
-          return {}
+      } else if (query.type) {
+        return query.type
       }
+      return 'es'
     }
   },
   mounted() {
-    getCommandStorage(this.$route.params.id).then(data => {
+    const params = this.$route.params
-      this.commandStorageData = data
+    const query = this.$route.query
-      console.log(data)
+    if (params.id) {
-      this.formData = this.convertMataToForm(this.commandStorageData)
+      getCommandStorage(this.$route.params.id).then(data => {
+        this.commandStorageData = data
+        this.formData = this.convertMataToForm(this.commandStorageData)
+        this.loading = false
+      })
+    }
+    if (query.type) {
       this.loading = false
-    })
+    }
   },
   methods: {
     convertMataToForm(commandStorageData) {

src/views/sessions/ReplayStorageCreate.vue

@@ -1,337 +0,0 @@
-<template>
-  <GenericCreateUpdatePage :create-success-next-route="createSuccessUrl" :clean-form-value="cleanFormValue" :fields="selectFields" :initial="selectInitial" :fields-meta="selectFieldsMeta" :url="url" />
-</template>
-
-<script>
-import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
-export default {
-  name: 'ReplayStorageCreate',
-  components: {
-    GenericCreateUpdatePage
-  },
-  data() {
-    return {
-      createSuccessUrl: { name: 'Storage' },
-      s3: {
-        initial: {
-          type: 's3'
-        },
-        fields: ['name', 'type', 'bucket', 'access_key', 'secret_key', 'endpoint', 'comment'],
-        fieldsMeta: {
-          name: {
-            label: this.$t('sessions.name')
-          },
-          comment: {
-            label: this.$t('sessions.comment')
-          },
-          type: {
-            label: this.$t('sessions.type'),
-            disabled: true,
-            rules: [
-              { required: true }
-            ]
-          },
-          bucket: {
-            label: this.$t('sessions.bucket')
-          },
-          access_key: {
-            label: 'Access key'
-          },
-          secret_key: {
-            label: 'Secret key'
-          },
-          endpoint: {
-            label: this.$t('sessions.endPoint'),
-            helpText: '比如应该这么输入',
-            helpTips: '是的应该这么做'
-          }
-        }
-      },
-      ceph: {
-        initial: {
-          type: 'ceph'
-        },
-        fields: [
-          ['', ['name', 'type', 'bucket', 'access_key', 'secret_key', 'endpoint', 'comment']]
-        ],
-        fieldsMeta: {
-          name: {
-            label: this.$t('sessions.name')
-          },
-          comment: {
-            label: this.$t('sessions.comment')
-          },
-          type: {
-            label: this.$t('sessions.type'),
-            disabled: true,
-            rules: [
-              { required: true }
-            ]
-          },
-          bucket: {
-            label: this.$t('sessions.bucket')
-          },
-          access_key: {
-            label: 'Access key'
-          },
-          secret_key: {
-            label: 'Secret key'
-          },
-          endpoint: {
-            label: this.$t('sessions.endPoint')
-          }
-        }
-      },
-      swift: {
-        initial: {
-          type: 'swift',
-          protocol: 'http'
-        },
-        fields: [
-          ['', ['name', 'type', 'bucket', 'access_key', 'secret_key', 'region', 'endpoint', 'protocol', 'comment']]
-        ],
-        fieldsMeta: {
-          name: {
-            label: this.$t('sessions.name')
-          },
-          comment: {
-            label: this.$t('sessions.comment')
-          },
-          type: {
-            label: this.$t('sessions.type'),
-            disabled: true,
-            rules: [
-              { required: true }
-            ]
-          },
-          bucket: {
-            label: this.$t('sessions.bucket')
-          },
-          access_key: {
-            label: 'Access key'
-          },
-          secret_key: {
-            label: 'Secret key'
-          },
-          region: {
-            label: this.$t('sessions.region')
-          },
-          endpoint: {
-            label: this.$t('sessions.endPoint')
-          },
-          protocol: {
-            label: this.$t('sessions.protocol'),
-            type: 'select',
-            options: [
-              { label: 'http', value: 'http' },
-              { label: 'https', value: 'https' }
-            ],
-            rules: [
-              { required: true }
-            ]
-          }
-        }
-      },
-      oss: {
-        initial: {
-          type: 'oss'
-        },
-        fields: [
-          ['', ['name', 'type', 'bucket', 'access_key', 'secret_key', 'endpoint', 'comment']]
-        ],
-        fieldsMeta: {
-          name: {
-            label: this.$t('sessions.name')
-          },
-          comment: {
-            label: this.$t('sessions.comment')
-          },
-          type: {
-            label: this.$t('sessions.type'),
-            disabled: true,
-            rules: [
-              { required: true }
-            ]
-          },
-          bucket: {
-            label: this.$t('sessions.bucket')
-          },
-          access_key: {
-            label: 'Access key'
-          },
-          secret_key: {
-            label: 'Secret key'
-          },
-          endpoint: {
-            label: this.$t('sessions.endPoint')
-          }
-        }
-      },
-      azure: {
-        initial: {
-          type: 'azure',
-          endpoint_suffix: 'core.chinacloudapi.cn'
-        },
-        fields: [
-          ['', ['name', 'type', 'container_name', 'account_name', 'account_key', 'endpoint_suffix', 'comment']]
-        ],
-        fieldsMeta: {
-          name: {
-            label: this.$t('sessions.name')
-          },
-          comment: {
-            label: this.$t('sessions.comment')
-          },
-          type: {
-            label: this.$t('sessions.type'),
-            disabled: true,
-            rules: [
-              { required: true }
-            ]
-          },
-          container_name: {
-            label: this.$t('sessions.containerName')
-          },
-          account_name: {
-            label: this.$t('sessions.accountName')
-          },
-          account_key: {
-            label: this.$t('sessions.accountKey')
-          },
-          endpoint_suffix: {
-            label: this.$t('sessions.endpointSuffix'),
-            type: 'select',
-            options: [
-              { label: 'core.chinacloudapi.cn', value: 'core.chinacloudapi.cn' },
-              { label: 'core.windows.net', value: 'core.windows.net' }
-            ]
-          }
-        }
-      },
-      url: '/api/v1/terminal/replay-storages/'
-    }
-  },
-  computed: {
-    postUrl() {
-      return this.url
-    },
-    selectInitial() {
-      return this.renderFieldObject.initial
-    },
-    selectFields() {
-      return this.renderFieldObject.fields
-    },
-    selectFieldsMeta() {
-      return this.renderFieldObject.fieldsMeta
-    },
-    renderFieldObject() {
-      const storageType = this.$route.query.type
-      if (typeof storageType !== 'string') {
-        return this.s3
-      }
-      switch (storageType.toLowerCase()) {
-        case 's3':
-          return this.s3
-        case 'ceph':
-          return this.ceph
-        case 'swift':
-          return this.swift
-        case 'oss':
-          return this.oss
-        case 'azure':
-          return this.azure
-        default:
-          return this.s3
-      }
-    }
-  },
-  methods: {
-    cleanFormValue(value) {
-      switch (value.type.toLowerCase()) {
-        case 's3':
-          return this.createS3Meta(value)
-        case 'ceph':
-          return this.createCephMeta(value)
-        case 'swift':
-          return this.createSwiftMeta(value)
-        case 'oss':
-          return this.createOSSMeta(value)
-        case 'azure':
-          return this.createAzureMeta(value)
-      }
-      return value
-    },
-    createS3Meta(value) {
-      return {
-        name: value.name,
-        type: 's3',
-        comment: value.comment,
-        meta: {
-          s3_bucket: value.bucket,
-          s3_access_key: value.access_key,
-          s3_secret_key: value.secret_key,
-          s3_endpoint: value.endpoint
-        }
-      }
-    },
-    createCephMeta(value) {
-      return {
-        name: value.name,
-        type: 'ceph',
-        comment: value.comment,
-        meta: {
-          ceph_bucket: value.bucket,
-          ceph_access_key: value.access_key,
-          ceph_secret_key: value.secret_key,
-          ceph_endpoint: value.endpoint
-        }
-      }
-    },
-    createSwiftMeta(value) {
-      return {
-        name: value.name,
-        type: 'swift',
-        comment: value.comment,
-        meta: {
-          swift_bucket: value.bucket,
-          swift_access_key: value.access_key,
-          swift_secret_key: value.secret_key,
-          swift_region: value.region,
-          swift_endpoint: value.endpoint,
-          swift_protocol: value.protocol
-        }
-      }
-    },
-    createOSSMeta(value) {
-      return {
-        name: value.name,
-        type: 'oss',
-        comment: value.comment,
-        meta: {
-          oss_bucket: value.bucket,
-          oss_access_key: value.access_key,
-          oss_secret_key: value.secret_key,
-          oss_endpoint: value.endpoint
-        }
-      }
-    },
-    createAzureMeta(value) {
-      return {
-        name: value.name,
-        type: 'azure',
-        comment: value.comment,
-        meta: {
-          azure_container_name: value.container_name,
-          azure_account_name: value.account_name,
-          azure_account_key: value.account_key,
-          azure_endpoint_suffix: value.endpoint_suffix
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/sessions/ReplayStorageCreateUpdate.vue

@@ -0,0 +1,291 @@
+<template>
+  <div v-if="!loading">
+    <GenericCreateUpdatePage
+      :fields="fields"
+      :url="url"
+      :update-success-next-route="successUrl"
+      :create-success-next-route="successUrl"
+      :clean-form-value="cleanFormValue"
+      :object="formData"
+      :initial="initial"
+      :fields-meta="fieldsMetas"
+    />
+  </div>
+</template>
+
+<script>
+import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
+import { getReplayStorage } from '@/api/sessions'
+export default {
+  name: 'ReplayStorageUpdate',
+  components: {
+    GenericCreateUpdatePage
+  },
+  data() {
+    return {
+      loading: true,
+      successUrl: { name: 'Storage', params: { activeMenu: 'replay' }},
+      replayData: {},
+      formData: {
+        type: '',
+        name: '',
+        comment: ''
+      },
+      url: '/api/v1/terminal/replay-storages/',
+      fieldsMetas: {
+        name: {
+          label: this.$t('sessions.name')
+        },
+        comment: {
+          label: this.$t('sessions.comment')
+        },
+        type: {
+          label: this.$t('sessions.type'),
+          disabled: true,
+          rules: [
+            { required: true }
+          ]
+        },
+        bucket: {
+          label: this.$t('sessions.bucket')
+        },
+        access_key: {
+          label: 'Access key'
+        },
+        secret_key: {
+          label: 'Secret key'
+        },
+        endpoint: {
+          label: this.$t('sessions.endPoint')
+        },
+        region: {
+          label: this.$t('sessions.region')
+        },
+        protocol: {
+          label: this.$t('sessions.protocol'),
+          type: 'select',
+          options: [
+            { label: 'http', value: 'http' },
+            { label: 'https', value: 'https' }
+          ],
+          rules: [
+            { required: true }
+          ]
+        },
+        container_name: {
+          label: this.$t('sessions.containerName')
+        },
+        account_name: {
+          label: this.$t('sessions.accountName')
+        },
+        account_key: {
+          label: this.$t('sessions.accountKey')
+        },
+        endpoint_suffix: {
+          label: this.$t('sessions.endpointSuffix'),
+          type: 'select',
+          options: [
+            { label: 'core.chinacloudapi.cn', value: 'core.chinacloudapi.cn' },
+            { label: 'core.windows.net', value: 'core.windows.net' }
+          ]
+        }
+      },
+      fieldsMap: {
+        s3: ['name', 'type', 'bucket', 'access_key', 'secret_key', 'endpoint', 'comment'],
+        ceph: ['name', 'type', 'bucket', 'access_key', 'secret_key', 'endpoint', 'comment'],
+        swift: ['name', 'type', 'bucket', 'access_key', 'secret_key', 'region', 'endpoint', 'protocol', 'comment'],
+        oss: ['name', 'type', 'bucket', 'access_key', 'secret_key', 'endpoint', 'comment'],
+        azure: ['name', 'type', 'container_name', 'account_name', 'account_key', 'endpoint_suffix', 'comment']
+      }
+    }
+  },
+  computed: {
+    fields() {
+      return this.fieldsMap[this.currentType]
+    },
+    initial() {
+      return {
+        type: this.currentType,
+        endpoint_suffix: 'core.chinacloudapi.cn',
+        protocol: 'http'
+      }
+    },
+    currentType() {
+      const params = this.$route.params
+      const query = this.$route.query
+      if (params.id) {
+        return this.formData.type
+      } else if (query.type) {
+        return query.type
+      }
+      return 's3'
+    }
+  },
+  mounted() {
+    const params = this.$route.params
+    const query = this.$route.query
+    if (params.id) {
+      getReplayStorage(this.$route.params.id).then(data => {
+        this.replayData = data
+        this.formData = this.convertMataToForm(this.replayData)
+        this.loading = false
+      })
+    }
+    if (query.type) {
+      this.loading = false
+    }
+  },
+  methods: {
+    convertMataToForm(replayData) {
+      switch (replayData.type.toLowerCase()) {
+        case 's3':
+          return this.s3MetaToForm(replayData)
+        case 'ceph':
+          return this.cephMetaToForm(replayData)
+        case 'swift':
+          return this.swiftMetaToForm(replayData)
+        case 'oss':
+          return this.ossMetaForm(replayData)
+        case 'azure':
+          return this.azureMetaForm(replayData)
+        default:
+          return {}
+      }
+    },
+    s3MetaToForm(replayData) {
+      return {
+        name: replayData.name,
+        type: 's3',
+        comment: replayData.comment,
+        bucket: replayData.meta.BUCKET,
+        endpoint: replayData.meta.ENDPOINT
+      }
+    },
+    cephMetaToForm(replayData) {
+      return {
+        name: replayData.name,
+        type: 'ceph',
+        comment: replayData.comment,
+        bucket: replayData.meta.BUCKET,
+        endpoint: replayData.meta.ENDPOINT
+      }
+    },
+    swiftMetaToForm(replayData) {
+      return {
+        name: replayData.name,
+        type: 'swift',
+        comment: replayData.comment,
+        bucket: replayData.meta.BUCKET,
+        region: replayData.meta.REGION,
+        endpoint: replayData.meta.ENDPOINT,
+        protocol: replayData.meta.PROTOCOL
+      }
+    },
+    ossMetaForm(replayData) {
+      return {
+        name: replayData.name,
+        type: 'oss',
+        comment: replayData.comment,
+        bucket: replayData.meta.BUCKET,
+        endpoint: replayData.meta.ENDPOINT
+      }
+    },
+    azureMetaForm(replayData) {
+      return {
+        name: replayData.name,
+        type: 'azure',
+        comment: replayData.comment,
+        container_name: replayData.meta.CONTAINER_NAME,
+        account_name: replayData.meta.ACCOUNT_NAME,
+        endpoint_suffix: replayData.meta.ENDPOINT_SUFFIX
+      }
+    },
+    cleanFormValue(value) {
+      switch (value.type.toLowerCase()) {
+        case 's3':
+          return this.createS3Meta(value)
+        case 'ceph':
+          return this.createCephMeta(value)
+        case 'swift':
+          return this.createSwiftMeta(value)
+        case 'oss':
+          return this.createOSSMeta(value)
+        case 'azure':
+          return this.createAzureMeta(value)
+      }
+      return value
+    },
+    createS3Meta(value) {
+      return {
+        name: value.name,
+        type: 's3',
+        comment: value.comment,
+        meta: {
+          s3_bucket: value.bucket,
+          s3_access_key: value.access_key,
+          s3_secret_key: value.secret_key,
+          s3_endpoint: value.endpoint
+        }
+      }
+    },
+    createCephMeta(value) {
+      return {
+        name: value.name,
+        type: 'ceph',
+        comment: value.comment,
+        meta: {
+          ceph_bucket: value.bucket,
+          ceph_access_key: value.access_key,
+          ceph_secret_key: value.secret_key,
+          ceph_endpoint: value.endpoint
+        }
+      }
+    },
+    createSwiftMeta(value) {
+      return {
+        name: value.name,
+        type: 'swift',
+        comment: value.comment,
+        meta: {
+          swift_bucket: value.bucket,
+          swift_access_key: value.access_key,
+          swift_secret_key: value.secret_key,
+          swift_region: value.region,
+          swift_endpoint: value.endpoint,
+          swift_protocol: value.protocol
+        }
+      }
+    },
+    createOSSMeta(value) {
+      return {
+        name: value.name,
+        type: 'oss',
+        comment: value.comment,
+        meta: {
+          oss_bucket: value.bucket,
+          oss_access_key: value.access_key,
+          oss_secret_key: value.secret_key,
+          oss_endpoint: value.endpoint
+        }
+      }
+    },
+    createAzureMeta(value) {
+      return {
+        name: value.name,
+        type: 'azure',
+        comment: value.comment,
+        meta: {
+          azure_container_name: value.container_name,
+          azure_account_name: value.account_name,
+          azure_account_key: value.account_key,
+          azure_endpoint_suffix: value.endpoint_suffix
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/sessions/ReplayStorageUpdate.vue

@@ -1,396 +0,0 @@
-<template>
-  <div v-if="!loading">
-    <GenericCreateUpdatePage :fields="selectFields" :url="url" :update-success-next-route="updateSuccessUrl" :clean-form-value="cleanFormValue" :object="formData" :fields-meta="selectedFieldsMeta" />
-  </div>
-</template>
-
-<script>
-import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
-import { getReplayStorage } from '@/api/sessions'
-export default {
-  name: 'ReplayStorageUpdate',
-  components: {
-    GenericCreateUpdatePage
-  },
-  data() {
-    return {
-      loading: true,
-      updateSuccessUrl: { name: 'Storage', params: { activeMenu: 'replay' }},
-      replayData: {},
-      formData: {
-        type: '',
-        name: '',
-        comment: ''
-      },
-      url: '/api/v1/terminal/replay-storages/',
-      s3: {
-        fields: [
-          ['', ['name', 'type', 'bucket', 'access_key', 'secret_key', 'endpoint', 'comment']]
-        ],
-        fieldsMeta: {
-          name: {
-            label: this.$t('sessions.name')
-          },
-          comment: {
-            label: this.$t('sessions.comment')
-          },
-          type: {
-            label: this.$t('sessions.type'),
-            disabled: true,
-            rules: [
-              { required: true }
-            ]
-          },
-          bucket: {
-            label: this.$t('sessions.bucket')
-          },
-          access_key: {
-            label: 'Access key'
-          },
-          secret_key: {
-            label: 'Secret key'
-          },
-          endpoint: {
-            label: this.$t('sessions.endPoint')
-          }
-        }
-      },
-      ceph: {
-        fields: [
-          ['', ['name', 'type', 'bucket', 'access_key', 'secret_key', 'endpoint', 'comment']]
-        ],
-        fieldsMeta: {
-          name: {
-            label: this.$t('sessions.name')
-          },
-          comment: {
-            label: this.$t('sessions.comment')
-          },
-          type: {
-            label: this.$t('sessions.type'),
-            disabled: true,
-            rules: [
-              { required: true }
-            ]
-          },
-          bucket: {
-            label: this.$t('sessions.bucket')
-          },
-          access_key: {
-            label: 'Access key'
-          },
-          secret_key: {
-            label: 'Secret key'
-          },
-          endpoint: {
-            label: this.$t('sessions.endPoint')
-          }
-        }
-      },
-      swift: {
-        fields: [
-          ['', ['name', 'type', 'bucket', 'access_key', 'secret_key', 'region', 'endpoint', 'protocol', 'comment']]
-        ],
-        fieldsMeta: {
-          name: {
-            label: this.$t('sessions.name')
-          },
-          comment: {
-            label: this.$t('sessions.comment')
-          },
-          type: {
-            label: this.$t('sessions.type'),
-            disabled: true,
-            rules: [
-              { required: true }
-            ]
-          },
-          bucket: {
-            label: this.$t('sessions.bucket')
-          },
-          access_key: {
-            label: 'Access key'
-          },
-          secret_key: {
-            label: 'Secret key'
-          },
-          region: {
-            label: this.$t('sessions.region')
-          },
-          endpoint: {
-            label: this.$t('sessions.endPoint')
-          },
-          protocol: {
-            label: this.$t('sessions.protocol'),
-            type: 'select',
-            options: [
-              { label: 'http', value: 'http' },
-              { label: 'https', value: 'https' }
-            ],
-            rules: [
-              { required: true }
-            ]
-          }
-        }
-      },
-      oss: {
-        fields: [
-          ['', ['name', 'type', 'bucket', 'access_key', 'secret_key', 'endpoint', 'comment']]
-        ],
-        fieldsMeta: {
-          name: {
-            label: this.$t('sessions.name')
-          },
-          comment: {
-            label: this.$t('sessions.comment')
-          },
-          type: {
-            label: this.$t('sessions.type'),
-            disabled: true,
-            rules: [
-              { required: true }
-            ]
-          },
-          bucket: {
-            label: this.$t('sessions.bucket')
-          },
-          access_key: {
-            label: 'Access key'
-          },
-          secret_key: {
-            label: 'Secret key'
-          },
-          endpoint: {
-            label: this.$t('sessions.endPoint')
-          }
-        }
-      },
-      azure: {
-        initial: {
-          type: 'azure',
-          endpoint_suffix: 'core.chinacloudapi.cn'
-        },
-        fields: [
-          ['', ['name', 'type', 'container_name', 'account_name', 'account_key', 'endpoint_suffix', 'comment']]
-        ],
-        fieldsMeta: {
-          name: {
-            label: this.$t('sessions.name')
-          },
-          comment: {
-            label: this.$t('sessions.comment')
-          },
-          type: {
-            label: this.$t('sessions.type'),
-            disabled: true,
-            rules: [
-              { required: true }
-            ]
-          },
-          container_name: {
-            label: this.$t('sessions.containerName')
-          },
-          account_name: {
-            label: this.$t('sessions.accountName')
-          },
-          account_key: {
-            label: this.$t('sessions.accountKey')
-          },
-          endpoint_suffix: {
-            label: this.$t('sessions.endpointSuffix'),
-            type: 'select',
-            options: [
-              { label: 'core.chinacloudapi.cn', value: 'core.chinacloudapi.cn' },
-              { label: 'core.windows.net', value: 'core.windows.net' }
-            ]
-          }
-        }
-      }
-    }
-  },
-  computed: {
-    selectFields() {
-      return this.renderReplayStorage.fields
-    },
-    selectedFieldsMeta() {
-      return this.renderReplayStorage.fieldsMeta
-    },
-    renderReplayStorage() {
-      switch (this.formData.type.toLowerCase()) {
-        case 's3':
-          return this.s3
-        case 'ceph':
-          return this.ceph
-        case 'swift':
-          return this.swift
-        case 'oss':
-          return this.oss
-        case 'azure':
-          return this.azure
-        default:
-          return this.s3
-      }
-    }
-  },
-  mounted() {
-    getReplayStorage(this.$route.params.id).then(data => {
-      this.replayData = data
-      console.log(data)
-      this.formData = this.convertMataToForm(this.replayData)
-      this.loading = false
-    })
-  },
-  methods: {
-    convertMataToForm(replayData) {
-      switch (replayData.type.toLowerCase()) {
-        case 's3':
-          return this.s3MetaToForm(replayData)
-        case 'ceph':
-          return this.cephMetaToForm(replayData)
-        case 'swift':
-          return this.swiftMetaToForm(replayData)
-        case 'oss':
-          return this.ossMetaForm(replayData)
-        case 'azure':
-          return this.azureMetaForm(replayData)
-        default:
-          return {}
-      }
-    },
-    s3MetaToForm(replayData) {
-      return {
-        name: replayData.name,
-        type: 's3',
-        comment: replayData.comment,
-        bucket: replayData.meta.BUCKET,
-        endpoint: replayData.meta.ENDPOINT
-      }
-    },
-    cephMetaToForm(replayData) {
-      return {
-        name: replayData.name,
-        type: 'ceph',
-        comment: replayData.comment,
-        bucket: replayData.meta.BUCKET,
-        endpoint: replayData.meta.ENDPOINT
-      }
-    },
-    swiftMetaToForm(replayData) {
-      return {
-        name: replayData.name,
-        type: 'swift',
-        comment: replayData.comment,
-        bucket: replayData.meta.BUCKET,
-        region: replayData.meta.REGION,
-        endpoint: replayData.meta.ENDPOINT,
-        protocol: replayData.meta.PROTOCOL
-      }
-    },
-    ossMetaForm(replayData) {
-      return {
-        name: replayData.name,
-        type: 'oss',
-        comment: replayData.comment,
-        bucket: replayData.meta.BUCKET,
-        endpoint: replayData.meta.ENDPOINT
-      }
-    },
-    azureMetaForm(replayData) {
-      return {
-        name: replayData.name,
-        type: 'azure',
-        comment: replayData.comment,
-        container_name: replayData.meta.CONTAINER_NAME,
-        account_name: replayData.meta.ACCOUNT_NAME,
-        endpoint_suffix: replayData.meta.ENDPOINT_SUFFIX
-      }
-    },
-    cleanFormValue(value) {
-      switch (value.type.toLowerCase()) {
-        case 's3':
-          return this.createS3Meta(value)
-        case 'ceph':
-          return this.createCephMeta(value)
-        case 'swift':
-          return this.createSwiftMeta(value)
-        case 'oss':
-          return this.createOSSMeta(value)
-        case 'azure':
-          return this.createAzureMeta(value)
-      }
-      return value
-    },
-    createS3Meta(value) {
-      return {
-        name: value.name,
-        type: 's3',
-        comment: value.comment,
-        meta: {
-          s3_bucket: value.bucket,
-          s3_access_key: value.access_key,
-          s3_secret_key: value.secret_key,
-          s3_endpoint: value.endpoint
-        }
-      }
-    },
-    createCephMeta(value) {
-      return {
-        name: value.name,
-        type: 'ceph',
-        comment: value.comment,
-        meta: {
-          ceph_bucket: value.bucket,
-          ceph_access_key: value.access_key,
-          ceph_secret_key: value.secret_key,
-          ceph_endpoint: value.endpoint
-        }
-      }
-    },
-    createSwiftMeta(value) {
-      return {
-        name: value.name,
-        type: 'swift',
-        comment: value.comment,
-        meta: {
-          swift_bucket: value.bucket,
-          swift_access_key: value.access_key,
-          swift_secret_key: value.secret_key,
-          swift_region: value.region,
-          swift_endpoint: value.endpoint,
-          swift_protocol: value.protocol
-        }
-      }
-    },
-    createOSSMeta(value) {
-      return {
-        name: value.name,
-        type: 'oss',
-        comment: value.comment,
-        meta: {
-          oss_bucket: value.bucket,
-          oss_access_key: value.access_key,
-          oss_secret_key: value.secret_key,
-          oss_endpoint: value.endpoint
-        }
-      }
-    },
-    createAzureMeta(value) {
-      return {
-        name: value.name,
-        type: 'azure',
-        comment: value.comment,
-        meta: {
-          azure_container_name: value.container_name,
-          azure_account_name: value.account_name,
-          azure_account_key: value.account_key,
-          azure_endpoint_suffix: value.endpoint_suffix
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/sessions/index.js

@@ -66,28 +66,28 @@ export default [
   {
     path: 'replay-storage/create',
     name: 'CreateReplayStorage',
-    component: () => import('@/views/sessions/ReplayStorageCreate'),
+    component: () => import('@/views/sessions/ReplayStorageCreateUpdate'),
     meta: { title: 'CreateReplayStorage' },
     hidden: true
   },
   {
     path: 'command-storage/create',
     name: 'CreateCommandStorage',
-    component: () => import('@/views/sessions/CommandStorageCreate'),
+    component: () => import('@/views/sessions/CommandStorageCreateUpdate'),
     meta: { title: 'CreateCommandStorage' },
     hidden: true
   },
   {
     path: 'replay-storage/:id/update',
     name: 'ReplayStorageUpdate',
-    component: () => import('@/views/sessions/ReplayStorageUpdate'),
+    component: () => import('@/views/sessions/ReplayStorageCreateUpdate'),
     meta: { title: 'ReplayStorageUpdate' },
     hidden: true
   },
   {
     path: 'command-storage/:id/update',
     name: 'CommandStorageUpdate',
-    component: () => import('@/views/sessions/CommandStorageUpdate'),
+    component: () => import('@/views/sessions/CommandStorageCreateUpdate'),
     meta: { title: 'CommandStorageUpdate' },
     hidden: true
   }