fix: content does not refresh when switching tenants on the tenant device management page

adjust the PlatformPage component

src/api/user.js

@@ -155,8 +155,9 @@ export async function getTenants (query) {
   }
 }
 
-export function getPlatformTenants () {
-  return getTenantsByQuery({}, false)
+export async function getPlatformTenants () {
+  const { count } = await getTenantCount()
+  return getTenantsByQuery({ max: count }, false)
 }
 
 export function getTenantTree () {

src/components/layout/PlatformPage/index.vue

@@ -1,27 +1,20 @@
 <template>
-  <wrapper
-    :vertical="false"
-    fill
-    margin
-    padding
-    background
-  >
-    <template v-if="groups">
+  <div class="l-flex">
+    <template v-if="tenants">
       <div
         class="c-sibling-item c-sidebar u-overflow-y--auto"
         :class="size"
       >
         <el-tree
-          ref="groupTree"
-          :data="groups"
+          :data="tenants"
           node-key="path"
-          :current-node-key="group.path"
+          :current-node-key="tenant.path"
           highlight-current
-          @node-click="setGroup"
+          @node-click="setTenant"
         />
       </div>
-      <div class="l-flex__fill c-sibling-item far">
-        <slot :group="group" />
+      <div class="l-flex__fill l-flex c-sibling-item far">
+        <slot :tenant="tenant" />
       </div>
     </template>
     <template v-else>
@@ -43,7 +36,7 @@
         </template>
       </div>
     </template>
-  </wrapper>
+  </div>
 </template>
 
 <script>
@@ -61,8 +54,8 @@ export default {
     return {
       loading: true,
       error: false,
-      groups: null,
-      group: null
+      tenants: null,
+      tenant: null
     }
   },
   created () {
@@ -75,8 +68,8 @@ export default {
       getPlatformTenants().then(
         ({ data }) => {
           if (data.length) {
-            this.groups = data
-            this.setGroup(this.groups[0])
+            this.tenants = data
+            this.setTenant(this.tenants[0])
           }
         },
         () => {
@@ -86,10 +79,10 @@ export default {
         this.loading = false
       })
     },
-    setGroup (group) {
-      if (!this.group || this.group.id !== group.id) {
-        this.$emit('change', group)
-        this.group = group
+    setTenant (tenant) {
+      if (!this.tenant || this.tenant.id !== tenant.id) {
+        this.$emit('change', tenant)
+        this.tenant = tenant
       }
     }
   }

src/views/platform/ai-stock/Assign.vue

@@ -1,15 +1,6 @@
 <template>
-  <div class="l-flex">
-    <template v-if="groups">
-      <div class="c-sibling-item c-sidebar u-overflow-y--auto">
-        <el-tree
-          ref="groupTree"
-          :data="groups"
-          node-key="path"
-          highlight-current
-          @node-click="onGroupTreeClick"
-        />
-      </div>
+  <platform-page @change="onTenantChange">
+    <template #default>
       <schema-table
         ref="table"
         class="c-sibling-item far"
@@ -59,26 +50,7 @@
         </div>
       </confirm-dialog>
     </template>
-    <template v-else>
-      <div
-        v-loading="loading"
-        class="l-flex__auto l-flex--row center"
-      >
-        <template v-if="!loading">
-          <warning
-            v-if="error"
-            @click="getTreeData"
-          />
-          <div
-            v-else
-            class="u-bold"
-          >
-            暂无租户，请先添加租户
-          </div>
-        </template>
-      </div>
-    </template>
-  </div>
+  </platform-page>
 </template>
 
 <script>
@@ -86,7 +58,6 @@ import {
   AssetType,
   AssetTypeInfo
 } from '@/constant'
-import { getPlatformTenants } from '@/api/user'
 import {
   getCredits,
   getTenantCredits,
@@ -103,10 +74,7 @@ export default {
     ]
 
     return {
-      loading: true,
-      error: false,
-      groups: null,
-      group: null,
+      tenant: null,
       auditTypeSchema: {
         options: auditTypeOptions
       },
@@ -157,9 +125,6 @@ export default {
         : 0
     }
   },
-  created () {
-    this.getTreeData()
-  },
   methods: {
     disabledDate (date) {
       if (this.fromCredit) {
@@ -171,35 +136,15 @@ export default {
     transformAuditType (data) {
       return AssetTypeInfo[data.auditType]
     },
-    getTreeData () {
-      this.loading = true
-      this.error = false
-      getPlatformTenants().then(
-        ({ data }) => {
-          if (data.length) {
-            this.groups = data
-            this.group = this.groups[0]
-            this.$nextTick(() => {
-              this.$refs.groupTree.setCurrentKey(this.group.path)
-            })
-          }
-        },
-        () => {
-          this.error = true
-        }
-      ).finally(() => {
-        this.loading = false
-      })
-    },
-    onGroupTreeClick (group) {
-      if (!this.group || this.group.id !== group.id) {
-        this.group = group
-        this.$refs.table.pageTo(1)
+    onTenantChange (tenant) {
+      if (!this.tenant || this.tenant.id !== tenant.id) {
+        this.tenant = tenant
+        this.$refs.table?.pageTo(1)
       }
     },
     getTenantCredits (params) {
       return getTenantCredits({
-        tenant: this.group.path,
+        tenant: this.tenant.path,
         ...params
       })
     },
@@ -236,7 +181,7 @@ export default {
       addCredit({
         admin: 0,
         fromCredit: this.fromCredit.id,
-        tenant: this.group.path,
+        tenant: this.tenant.path,
         auditType,
         initialAmount,
         effectiveDate: date[0],

src/views/platform/tenant/device/components/Device.vue

@@ -166,11 +166,6 @@ export default {
       return this.isSub ? '新增备份设备' : '新增设备'
     }
   },
-  watch: {
-    group () {
-      this.$refs.table.pageTo(1)
-    }
-  },
   methods: {
     getProducts (params) {
       return getProducts({

src/views/platform/tenant/device/components/Product.vue

@@ -5,22 +5,21 @@
   >
     <confirm-dialog
       ref="editDialog"
-      :title="dialogTitle"
+      title="新增屏幕配置"
       @confirm="onSave"
     >
       <div class="c-grid-form u-align-self--center">
         <span class="c-grid-form__label u-required">名称</span>
         <el-input
           v-model.trim="currObj.name"
-          placeholder="最多50个字符"
-          maxlength="50"
+          placeholder="最多30个字符"
+          maxlength="30"
           clearable
         />
         <span class="c-grid-form__label u-required">类型</span>
         <schema-select
           v-model="currObj.productTypeId"
           placeholder="请选择屏幕类型"
-          :disabled="!isAdd"
           :schema="productTypeSelectSchema"
         />
         <span class="c-grid-form__label u-required">分辨率</span>
@@ -31,7 +30,6 @@
             class="l-flex__auto c-sibling-item"
             :min="1"
             :max="999999"
-            :disabled="!isAdd"
             step-strictly
           />
           <span class="c-sibling-item far">高</span>
@@ -40,7 +38,6 @@
             class="l-flex__auto c-sibling-item"
             :min="1"
             :max="999999"
-            :disabled="!isAdd"
             step-strictly
           />
         </div>
@@ -50,17 +47,8 @@
             v-model="currObj.fpga"
             active-color="#13ce66"
             inactive-color="#ff4949"
-            :disabled="!isAdd"
           />
         </div>
-        <span class="c-grid-form__label">备注</span>
-        <el-input
-          v-model.trim="currObj.remark"
-          type="textarea"
-          maxlength="100"
-          :rows="3"
-          show-word-limit
-        />
       </div>
     </confirm-dialog>
   </schema-table>
@@ -92,19 +80,10 @@ export default {
     }
 
     return {
-      isAdd: false,
       currObj: {},
-      proxy: {
-        add: addProduct,
-        update: updateProduct,
-        del: deleteProduct
-      },
       typeOptions: [],
-      fetching: false,
-      loaded: false,
       productTypeSelectSchema,
       schema: {
-        condition: { productTypeId: void 0 },
         list: this.getProducts,
         buttons: [
           { type: 'add', on: this.onAdd }
@@ -113,7 +92,13 @@ export default {
           { key: 'productTypeId', type: 'select', placeholder: '全部类型', ...productTypeSelectSchema }
         ],
         cols: [
-          { prop: 'name', label: '配置名称', 'min-width': 60 },
+          { label: '配置名称', render: (data, h) => h('edit-input', {
+            props: {
+              value: `${data.name}`,
+              maxlength: 30
+            },
+            on: { edit: val => this.onEditName(data, val) }
+          }), 'min-width': 120 },
           { prop: 'productTypeName', label: '类型', 'min-width': 60 },
           { prop: 'resolutionRatio', label: '分辨率', 'min-width': 60 },
           { label: '分割器', type: 'tag', render: ({ fpga }) => {
@@ -122,9 +107,7 @@ export default {
               label: fpga ? '有' : '无'
             }
           } },
-          { prop: 'remark', label: '备注' },
           { type: 'invoke', render: [
-            { label: '编辑', on: this.onEdit },
             { label: '删除', on: this.onDel }
           ] }
         ]
@@ -132,18 +115,10 @@ export default {
     }
   },
   computed: {
-    dialogTitle () {
-      return this.isAdd ? `新增屏幕配置` : `编辑屏幕配置`
-    },
     productTypes () {
       return this.isAdd ? this.typeOptions : [{ value: this.currObj.productTypeId, label: this.$currObj.productTypeName }]
     }
   },
-  watch: {
-    group () {
-      this.$refs.table.pageTo(1)
-    }
-  },
   methods: {
     getProductTypes (params) {
       return getProductTypes({
@@ -158,7 +133,6 @@ export default {
       })
     },
     onAdd () {
-      this.isAdd = true
       this.productTypeSelectSchema.option = null
       this.currObj = {
         name: '',
@@ -166,18 +140,28 @@ export default {
         wide: 1920,
         high: 1080,
         fpga: false,
-        remark: '',
         tenant: this.tenant
       }
       this.$refs.editDialog.show()
     },
-    onEdit (product) {
-      this.isAdd = false
-      const { id, name, productTypeId, productTypeName, high, wide, fpga, remark } = product
-      this.productTypeSelectSchema.option = { value: productTypeId, label: productTypeName }
-      this.currObj = { id, name, productTypeId, high, wide, fpga, remark }
-      this.$currObj = product
-      this.$refs.editDialog.show()
+    onEditName (product, { newVal, oldVal }) {
+      if (newVal === oldVal) {
+        return
+      }
+      if (!newVal) {
+        this.$message({
+          type: 'warning',
+          message: '请填写配置名称'
+        })
+        return
+      }
+      product.name = newVal
+      updateProduct({
+        id: product.id,
+        name: newVal
+      }).catch(() => {
+        product.name = oldVal
+      })
     },
     onSave (done) {
       if (!this.currObj.name) {
@@ -194,23 +178,13 @@ export default {
         })
         return
       }
-      this.save(done).then(() => {
-        if (this.isAdd) {
-          this.$refs.table.resetCondition({ productTypeId: this.currObj.productTypeId })
-        } else {
-          this.$refs.table.pageTo()
-        }
-      })
-    },
-    save (done) {
-      if (!this.isAdd && Object.keys(this.currObj).every(key => this.currObj[key] === this.$currObj[key])) {
+      addProduct(this.currObj).then(() => {
         done()
-        return Promise.reject()
-      }
-      return (this.isAdd ? addProduct : updateProduct)(this.currObj).then(done)
+        this.$refs.table.resetCondition({ productTypeId: this.currObj.productTypeId })
+      })
     },
     onDel (product) {
-      return deleteProduct(product).then(() => {
+      deleteProduct(product).then(() => {
         this.$refs.table.decrease(1)
       })
     }

src/views/platform/tenant/device/components/ProductType.vue

@@ -5,26 +5,17 @@
   >
     <confirm-dialog
       ref="editDialog"
-      :title="dialogTitle"
+      title="新增屏幕类型"
       @confirm="onSave"
     >
       <div class="c-grid-form u-align-self--center">
         <span class="c-grid-form__label u-required">宽高比</span>
         <el-input
-          v-model.trim="currObj.name"
+          v-model.trim="name"
           placeholder="例：16:9"
-          :disabled="!isAdd"
-          maxlength="50"
+          maxlength="30"
           clearable
         />
-        <span class="c-grid-form__label">备注</span>
-        <el-input
-          v-model.trim="currObj.remark"
-          type="textarea"
-          maxlength="100"
-          :rows="3"
-          show-word-limit
-        />
       </div>
     </confirm-dialog>
   </schema-table>
@@ -48,35 +39,27 @@ export default {
   },
   data () {
     return {
-      isAdd: false,
-      currObj: {},
+      name: '',
       schema: {
-        condition: { name: '' },
         list: this.getProductTypes,
         buttons: [
           { type: 'add', on: this.onAdd }
         ],
         cols: [
-          { prop: 'name', label: '宽高比' },
-          { prop: 'remark', label: '备注' },
+          { label: '宽高比', render: (data, h) => h('edit-input', {
+            props: {
+              value: `${data.name}`,
+              maxlength: 30
+            },
+            on: { edit: val => this.onEditName(data, val) }
+          }) },
           { type: 'invoke', render: [
-            { label: '编辑', on: this.onEdit },
             { label: '删除', on: this.onDel }
           ] }
         ]
       }
     }
   },
-  computed: {
-    dialogTitle () {
-      return this.isAdd ? `新增屏幕类型` : `编辑屏幕类型`
-    }
-  },
-  watch: {
-    tenant () {
-      this.$refs.table.pageTo(1)
-    }
-  },
   methods: {
     getProductTypes (params) {
       return getProductTypes({
@@ -85,49 +68,55 @@ export default {
       })
     },
     onAdd () {
-      this.isAdd = true
-      this.currObj = {
-        name: '',
-        remark: '',
-        tenant: this.tenant
-      }
+      this.name = ''
       this.$refs.editDialog.show()
     },
-    onEdit (productType) {
-      this.isAdd = false
-      const { id, name, remark } = productType
-      this.currObj = { id, name, remark }
-      this.$currObj = productType
-      this.$refs.editDialog.show()
+    onEditName (productType, { newVal, oldVal }) {
+      if (newVal === oldVal) {
+        return
+      }
+      if (!this.checkName(newVal)) {
+        return
+      }
+      productType.name = newVal
+      updateProductType({
+        id: productType.id,
+        name: newVal
+      }).catch(() => {
+        productType.name = oldVal
+      })
     },
-    onSave (done) {
-      if (!this.currObj.name) {
+    checkName (name) {
+      if (!name) {
         this.$message({
           type: 'warning',
           message: '宽高比不能为空'
         })
-        return
+        return false
       }
-      if (!/^[1-9]\d*:[1-9]\d*$/.test(this.currObj.name)) {
+      if (!/^[1-9]\d*:[1-9]\d*$/.test(name)) {
         this.$message({
           type: 'warning',
           message: '宽高比格式错误'
         })
-        return
+        return false
       }
-      this.save(done).then(() => {
-        this.$refs.table.pageTo(this.isAdd ? 1 : 0)
-      })
+      return true
     },
-    save (done) {
-      if (!this.isAdd && Object.keys(this.currObj).every(key => this.currObj[key] === this.$currObj[key])) {
-        done()
-        return Promise.reject()
+    onSave (done) {
+      if (!this.checkName(this.name)) {
+        return
       }
-      return (this.isAdd ? addProductType : updateProductType)(this.currObj).then(done)
+      addProductType({
+        tenant: this.tenant,
+        name: this.name
+      }).then(() => {
+        done()
+        this.$refs.table.pageTo(1)
+      })
     },
     onDel (product) {
-      return deleteProductType(product).then(() => {
+      deleteProductType(product).then(() => {
         this.$refs.table.decrease(1)
       })
     }

src/views/platform/tenant/device/index.vue

@@ -1,32 +1,39 @@
 <template>
-  <platform-page>
-    <template #default="{ group }">
-      <div class="l-flex__auto l-flex--col">
-        <el-tabs
-          v-model="active"
-          class="c-tabs has-bottom-padding"
-        >
-          <el-tab-pane
-            label="设备"
-            name="Device"
+  <wrapper
+    fill
+    margin
+    padding
+    background
+  >
+    <platform-page class="l-flex__fill">
+      <template #default="{ tenant }">
+        <div class="l-flex__auto l-flex--col">
+          <el-tabs
+            v-model="active"
+            class="c-tabs has-bottom-padding"
+          >
+            <el-tab-pane
+              label="设备"
+              name="Device"
+            />
+            <el-tab-pane
+              label="屏幕配置"
+              name="Product"
+            />
+            <el-tab-pane
+              label="屏幕类型"
+              name="ProductType"
+            />
+          </el-tabs>
+          <component
+            :is="active"
+            :key="`${tenant.id}_${active}`"
+            :tenant="tenant.path"
           />
-          <el-tab-pane
-            label="屏幕配置"
-            name="Product"
-          />
-          <el-tab-pane
-            label="屏幕类型"
-            name="ProductType"
-          />
-        </el-tabs>
-        <component
-          :is="active"
-          :key="active"
-          :tenant="group.path"
-        />
-      </div>
-    </template>
-  </platform-page>
+        </div>
+      </template>
+    </platform-page>
+  </wrapper>
 </template>
 
 <script>

src/views/platform/tenant/device/settings/components/AdConfigDialog.vue

@@ -27,24 +27,24 @@
         format="HH:mm"
         :clearable="false"
       />
-      <span class="c-grid-form__label u-required">起投时长(s)</span>
+      <span class="c-grid-form__label">单次时长(s)</span>
       <el-input-number
         v-model="attributes.minDuration"
         class="has-info"
-        data-info="范围：5~60"
+        data-info="范围：5~600"
         :min="5"
-        :max="60"
+        :max="600"
         :step="5"
         step-strictly
       />
-      <span class="c-grid-form__label u-required">起投次数</span>
+      <span class="c-grid-form__label">起投次数</span>
       <el-input-number
         v-model="attributes.minCount"
         :min="1"
         :max="1000"
         step-strictly
       />
-      <span class="c-grid-form__label u-required">单价(分)</span>
+      <span class="c-grid-form__label">单价(分)</span>
       <el-input-number
         v-model="attributes.price"
         class="has-info"
@@ -120,7 +120,7 @@ export default {
       if (openTime >= closeTime) {
         this.$message({
           type: 'warning',
-          message: '开机时间不能大于等于关机时间'
+          message: '开机时间必须小于关机时间'
         })
         return
       }

src/views/platform/tenant/index.vue

@@ -12,31 +12,29 @@
     />
     <confirm-dialog
       ref="editDialog"
-      :title="dialogTitle"
+      title="新增租户"
       @confirm="onSave"
     >
       <div class="c-grid-form u-align-self--center">
-        <template v-if="isAdd">
-          <span class="c-grid-form__label u-required">标识</span>
-          <div
-            class="has-info"
-            data-info="仅可包含数字、字母和-_符号"
-          >
-            <el-input
-              v-model.trim="group.name"
-              placeholder="最多50个字符"
-              maxlength="50"
-              clearable
-            />
-          </div>
-        </template>
         <span class="c-grid-form__label u-required">名称</span>
         <el-input
-          v-model.trim="group.remark"
-          placeholder="最多50个字符"
-          maxlength="50"
+          v-model.trim="tenant.remark"
+          placeholder="最多30个字符"
+          maxlength="30"
           clearable
         />
+        <span class="c-grid-form__label u-required">标识</span>
+        <div
+          class="has-info"
+          data-info="仅可包含数字、字母和-_符号"
+        >
+          <el-input
+            v-model.trim="tenant.name"
+            placeholder="最多30个字符"
+            maxlength="30"
+            clearable
+          />
+        </div>
       </div>
     </confirm-dialog>
   </wrapper>
@@ -54,9 +52,6 @@ export default {
   name: 'Tenant',
   data () {
     return {
-      isAdd: false,
-      isTenant: false,
-      dialogTitle: '',
       schema: {
         condition: { name: '' },
         list: getTenants,
@@ -64,82 +59,89 @@ export default {
           { type: 'add', on: this.onAdd }
         ],
         filters: [
-          { key: 'name', type: 'search', placeholder: '标识' }
+          { key: 'name', type: 'search', placeholder: '租户标识' }
         ],
         cols: [
-          { prop: 'remark', label: '名称' },
-          { prop: 'name', label: '标识' },
+          { label: '租户名称', render: (data, h) => h('edit-input', {
+            props: {
+              value: `${data.remark}`,
+              maxlength: 30
+            },
+            on: { edit: val => this.onEditName(data, val) }
+          }) },
+          { prop: 'name', label: '租户标识' },
           { type: 'invoke', render: [
-            { label: '编辑', on: this.onEdit },
             { label: '删除', on: this.onDel }
           ] }
         ]
       },
-      group: {}
+      tenant: {}
     }
   },
   methods: {
     onAdd () {
-      this.isAdd = true
-      this.dialogTitle = '新增租户'
-      this.group = {
+      this.tenant = {
         name: '',
         remark: ''
       }
       this.$refs.editDialog.show()
     },
-    onEdit (group) {
-      this.isAdd = false
-      this.dialogTitle = '编辑租户'
-      const { id, name, remark } = group
-      this.$group = group
-      this.group = { id, name, remark }
-      this.$refs.editDialog.show()
+    onEditName (tenant, { newVal, oldVal }) {
+      if (newVal === oldVal) {
+        return
+      }
+      if (!newVal) {
+        this.$message({
+          type: 'warning',
+          message: '请填写租户名称'
+        })
+        return
+      }
+      tenant.remark = newVal
+      updateGroup({
+        id: tenant.id,
+        name: tenant.name,
+        remark: newVal
+      }).catch(() => {
+        tenant.remark = oldVal
+      })
     },
     onSave (done) {
-      if (this.isAdd) {
-        const { name, remark } = this.group
-        if (!name) {
-          this.$message({
-            type: 'warning',
-            message: '请填写标识'
-          })
-          return
-        }
-        if (!/^[\da-zA-Z\-_]+$/.test(name)) {
-          this.$message({
-            type: 'warning',
-            message: '标识格式错误'
-          })
-          return
-        }
-        if (!remark) {
-          this.$message({
-            type: 'warning',
-            message: '请填写名称'
-          })
-          return
-        }
-        addTenant(this.group).then(() => {
-          done()
-          this.$refs.table.pageTo(1)
+      const { name, remark } = this.tenant
+      if (!name) {
+        this.$message({
+          type: 'warning',
+          message: '请填写租户标识'
         })
         return
       }
-      if (this.$group.remark !== this.group.remark) {
-        updateGroup(this.group).then(() => {
-          done()
-          this.$group.remark = this.group.remark
+      if (!/^[\da-zA-Z\-_]+$/.test(name)) {
+        this.$message({
+          type: 'warning',
+          message: '租户标识格式错误'
         })
+        return
       }
+      if (!remark) {
+        this.$message({
+          type: 'warning',
+          message: '请填写租户名称'
+        })
+        return
+      }
+      addTenant(this.tenant).then(() => {
+        done()
+        this.$refs.table.pageTo(1)
+      })
     },
-    onDel (group) {
+    onDel (tenant) {
       this.$confirm(
-        `删除租户 ${group.remark}？`,
+        `删除租户 ${tenant.remark}？`,
+        '操作确认',
         { type: 'warning' }
       ).then(() => {
         const loading = this.$showLoading()
-        deleteGroup(group)
+        deleteGroup(tenant)
           .then(() => {
             this.$message({
               type: 'success',

src/views/platform/upgrade/deploy/index.vue

@@ -59,47 +59,27 @@
       append-to-body
       @choosen="onChoosenApk"
     />
-    <el-dialog
+    <confirm-dialog
+      ref="targetDialog"
       title="目标设备选择"
-      :visible.sync="choosingDevice"
-      custom-class="c-dialog lg"
+      size="lg fixed"
       append-to-body
+      @confirm="onChoosenDevices"
     >
-      <div
-        v-if="choosingDevice"
-        class="l-flex__auto l-flex"
+      <platform-page
+        class="l-flex__fill"
+        @change="onTenantChange"
       >
-        <div class="c-sibling-item c-sidebar u-overflow-y--auto">
-          <el-tree
-            ref="tree"
-            :data="groups"
-            node-key="path"
-            highlight-current
-            @node-click="onGroupTreeClick"
+        <template #default="{ tenant: { id } }">
+          <device-tree
+            :key="id"
+            class="l-flex__fill c-sibling-item far u-overflow-y--auto"
+            :invoke="getDevices"
+            @change="onChooseDevices"
           />
-        </div>
-        <device-tree
-          v-if="group"
-          class="l-flex__fill c-sibling-item far u-overflow-y--auto"
-          :invoke="getDevices"
-          @change="onChooseDevices"
-        />
-      </div>
-      <template #footer>
-        <button
-          class="o-button"
-          @click="onChoosenDevices"
-        >
-          确定
-        </button>
-        <button
-          class="o-button cancel"
-          @click="choosingDevice = false"
-        >
-          取消
-        </button>
-      </template>
-    </el-dialog>
+        </template>
+      </platform-page>
+    </confirm-dialog>
   </wrapper>
 </template>
 
@@ -110,7 +90,6 @@ import {
   deployVersion,
   delVersion
 } from '@/api/platform'
-import { getPlatformTenants } from '@/api/user'
 import { getDevicesByAdmin } from '@/api/device'
 
 export default {
@@ -130,7 +109,6 @@ export default {
         ]
       },
       apk: '',
-      choosingDevice: false,
       devices: '',
       schema: {
         condition: { status: void 0, name: '' },
@@ -168,8 +146,7 @@ export default {
           ] }
         ]
       },
-      groups: [],
-      group: null
+      tenant: null
     }
   },
   methods: {
@@ -223,49 +200,33 @@ export default {
       this.version.fileId = id
     },
     chooseDevices () {
-      this.getPlatformTenants().then(({ data }) => {
-        if (data.length) {
-          this.choosingDevice = true
-          this.groups = data
-          this.group = this.groups[0]
-          this.$slectedDevices = []
-          this.$nextTick(() => {
-            this.$refs.tree.setCurrentKey(this.group.path)
-          })
-        } else {
-          this.$message({
-            type: 'warning',
-            message: '请先添加租户'
-          })
-        }
-      })
+      this.tenant = null
+      this.$slectedDevices = []
+      this.$refs.targetDialog.show()
     },
-    getPlatformTenants () {
-      if (this.groups.length === 0) {
-        return getPlatformTenants()
-      }
-      return Promise.resolve({ data: this.groups })
-    },
-    onGroupTreeClick (group) {
-      if (!this.group || this.group.id !== group.id) {
-        this.group = null
-        this.$nextTick(() => {
-          this.group = group
-        })
+    onTenantChange (tenant) {
+      if (!this.tenant || this.tenant.id !== tenant.id) {
+        this.$slectedDevices = []
+        this.tenant = tenant
       }
     },
     getDevices (params) {
-      return getDevicesByAdmin({ tenant: this.group.path, ...params })
+      return getDevicesByAdmin({ tenant: this.tenant.path, ...params })
     },
     onChooseDevices (devices) {
       this.$slectedDevices = devices
     },
-    onChoosenDevices () {
-      if (this.$slectedDevices.length) {
-        this.$devices = this.$slectedDevices
-        this.devices = this.$slectedDevices.map(({ name }) => name).join(', ')
+    onChoosenDevices (done) {
+      if (!this.$slectedDevices.length) {
+        this.$message({
+          type: 'warning',
+          message: '请选择目标设备'
+        })
+        return
       }
-      this.choosingDevice = false
+      this.$devices = this.$slectedDevices
+      this.devices = this.$slectedDevices.map(({ name }) => name).join(', ')
+      done()
     },
     onDel (version) {
       delVersion(version).then(() => {

src/views/realm/assign/Device.vue

@@ -6,6 +6,7 @@
     <table-dialog
       ref="tableDialog"
       title="分配设备"
+      size="lg"
       :schema="deviceSchema"
       @choosen="onChoosen"
     />

src/views/realm/org/index.vue

@@ -11,31 +11,29 @@
     />
     <confirm-dialog
       ref="editDialog"
-      :title="dialogTitle"
+      title="新增部门"
       @confirm="onSave"
     >
       <div class="c-grid-form u-align-self--center">
-        <template v-if="isAdd">
-          <span class="c-grid-form__label u-required">标识</span>
-          <div
-            class="has-info"
-            data-info="仅可包含数字、字母和-_符号"
-          >
-            <el-input
-              v-model.trim="group.name"
-              placeholder="最多50个字符"
-              maxlength="50"
-              clearable
-            />
-          </div>
-        </template>
         <span class="c-grid-form__label u-required">名称</span>
         <el-input
           v-model.trim="group.remark"
-          placeholder="最多50个字符"
-          maxlength="50"
+          placeholder="最多30个字符"
+          maxlength="30"
           clearable
         />
+        <span class="c-grid-form__label u-required">标识</span>
+        <div
+          class="has-info"
+          data-info="仅可包含数字、字母和-_符号"
+        >
+          <el-input
+            v-model.trim="group.name"
+            placeholder="最多30个字符"
+            maxlength="30"
+            clearable
+          />
+        </div>
       </div>
     </confirm-dialog>
   </wrapper>
@@ -55,8 +53,6 @@ export default {
   name: 'Org',
   data () {
     return {
-      isAdd: false,
-      dialogTitle: '',
       schema: {
         singlePage: true,
         list: getTenantGroups,
@@ -64,7 +60,13 @@ export default {
           { type: 'add', on: this.onAdd }
         ],
         cols: [
-          { prop: 'remark', label: '部门名称' },
+          { label: '部门名称', render: (data, h) => h('edit-input', {
+            props: {
+              value: `${data.remark}`,
+              maxlength: 30
+            },
+            on: { edit: val => this.onEditName(data, val) }
+          }) },
           { prop: 'name', label: '部门标识' },
           { type: 'invoke', render: [
             { label: '编辑', on: this.onEdit },
@@ -84,59 +86,61 @@ export default {
         this.$refs.table.pageTo()
         return
       }
-      this.isAdd = true
-      this.dialogTitle = '新增部门'
       this.group = { name: '', remark: '' }
       this.$refs.editDialog.show()
     },
-    onEdit (group) {
-      this.isAdd = false
-      this.dialogTitle = '编辑部门'
-      const { id, name, remark } = group
-      this.$group = group
-      this.group = { id, name, remark }
-      this.$refs.editDialog.show()
+    onEditName (group, { newVal, oldVal }) {
+      if (newVal === oldVal) {
+        return
+      }
+      if (!newVal) {
+        this.$message({
+          type: 'warning',
+          message: '请填写租户名称'
+        })
+        return
+      }
+      group.remark = newVal
+      updateGroup({
+        id: group.id,
+        name: group.name,
+        remark: newVal
+      }).catch(() => {
+        group.remark = oldVal
+      })
     },
     onSave (done) {
-      if (this.isAdd) {
-        const { name, remark } = this.group
-        if (!name) {
-          this.$message({
-            type: 'warning',
-            message: '请填写部门标识'
-          })
-          return
-        }
-        if (!/^[\da-zA-Z\-_]+$/.test(name)) {
-          this.$message({
-            type: 'warning',
-            message: '部门标识格式错误'
-          })
-          return
-        }
-        if (!remark) {
-          this.$message({
-            type: 'warning',
-            message: '请填写部门名称'
-          })
-          return
-        }
-        addSubGroup({ id: this.tenantId }, this.group).then(() => {
-          done()
-          this.$refs.table.pageTo()
+      const { name, remark } = this.group
+      if (!name) {
+        this.$message({
+          type: 'warning',
+          message: '请填写部门标识'
+        })
+        return
+      }
+      if (!/^[\da-zA-Z\-_]+$/.test(name)) {
+        this.$message({
+          type: 'warning',
+          message: '部门标识格式错误'
         })
         return
       }
-      if (this.$group.remark !== this.group.remark) {
-        updateGroup(this.group).then(() => {
-          done()
-          this.$group.remark = this.group.remark
+      if (!remark) {
+        this.$message({
+          type: 'warning',
+          message: '请填写部门名称'
         })
+        return
       }
+      addSubGroup({ id: this.tenantId }, this.group).then(() => {
+        done()
+        this.$refs.table.pageTo()
+      })
     },
     onDel (group) {
       this.$confirm(
         `删除部门 ${group.remark} ？`,
+        '操作确认',
         { type: 'warning' }
       ).then(() => {
         const loading = this.$showLoading()