feat(component): the RadioTableDialog component

src/components/dialog/RadioTableDialog/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <confirm-dialog
+    ref="confirmDialg"
+    :size="size"
+    v-bind="$attrs"
+    @confirm="onConfirm"
+  >
+    <schema-table
+      ref="table"
+      :schema="tableSchema"
+      :row-key="rowKey"
+      :current-row-key="selectedKey"
+      highlight-current-row
+      @row-click="onClickRow"
+    >
+      <template
+        v-if="hasHeader"
+        #header="scope"
+      >
+        <slot
+          name="header"
+          :item="selectedRow"
+          v-bind="scope"
+        />
+      </template>
+    </schema-table>
+  </confirm-dialog>
+</template>
+
+<script>
+export default {
+  name: 'RadioTableDialog',
+  props: {
+    schema: {
+      type: Object,
+      required: true
+    },
+    size: {
+      type: String,
+      default: 'medium'
+    },
+    message: {
+      type: String,
+      default: '请选择内容'
+    },
+    rowKey: {
+      type: String,
+      default: 'id'
+    }
+  },
+  data () {
+    return {
+      selectedRow: null
+    }
+  },
+  computed: {
+    hasHeader () {
+      return this.$scopedSlots.header
+    },
+    selectedKey () {
+      return this.selectedRow?.[this.rowKey]
+    },
+    tableSchema () {
+      const { cols, ...data } = this.schema
+      return {
+        ...data,
+        cols: [
+          { render: (data, h) => h(
+            'span',
+            { staticClass: `el-radio__input ${data[this.rowKey] === this.selectedKey ? 'is-checked' : ''}` },
+            [h('span', { staticClass: 'el-radio__inner' })]
+          ), width: 60, align: 'center' },
+          ...cols
+        ]
+      }
+    }
+  },
+  methods: {
+    show (current) {
+      this.selectedRow = current
+      this.$refs.confirmDialg.show()
+    },
+    onConfirm (done) {
+      if (!this.selectedKey) {
+        this.$message({
+          type: 'warning',
+          message: this.message
+        })
+        return
+      }
+      this.$emit('confirm', {
+        value: this.selectedRow,
+        done
+      })
+    },
+    onClickRow (row) {
+      this.selectedRow = row
+    }
+  }
+}
+</script>

src/layout/components/Navbar/index.vue

@@ -42,11 +42,11 @@
         </el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
-    <table-dialog
+    <radio-table-dialog
       ref="tenantDialog"
-      title="切换租户"
+      :title="title"
       :schema="tenantSchema"
-      @choosen="onChoosenTenant"
+      @confirm="onChoosenTenant"
     />
   </div>
 </template>
@@ -84,8 +84,12 @@ export default {
       'name',
       'isSuperAdmin',
       'isOperator',
+      'tenantId',
       'tenantName'
-    ])
+    ]),
+    title () {
+      return `租户切换（${this.tenantName}）`
+    }
   },
   methods: {
     onCommand (command) {
@@ -101,7 +105,7 @@ export default {
       }
     },
     onChangeTenant () {
-      this.$refs.tenantDialog.show()
+      this.$refs.tenantDialog.show({ id: this.tenantId, name: this.tenantName })
     },
     onChoosenTenant ({ value, done }) {
       if (value.path !== this.tenant) {