smsb-web-develop/src/views/platform/tenant/index.vue

<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <schema-table
      ref="table"
      row-key="id"
      :schema="schema"
    />
    <confirm-dialog
      ref="editDialog"
      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="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>
</template>

<script>
import {
  getTenants,
  addTenant,
  updateGroup,
  deleteTenant
} from '@/api/user'

export default {
  name: 'Tenant',
  data () {
    return {
      schema: {
        condition: { name: '' },
        list: getTenants,
        buttons: [
          { type: 'add', on: this.onAdd }
        ],
        filters: [
          { key: 'name', type: 'search', placeholder: '租户标识' }
        ],
        cols: [
          { label: '租户名称', render: (data, h) => h('edit-input', {
            props: {
              value: `${data.remark}`
            },
            on: { edit: val => this.onEditName(data, val) }
          }), 'class-name': 'c-edit-column' },
          { prop: 'name', label: '租户标识' },
          { type: 'invoke', render: [
            { label: '删除', on: this.onDel }
          ] }
        ]
      },
      tenant: {}
    }
  },
  methods: {
    onAdd () {
      this.tenant = {
        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) {
      const { name, remark } = this.tenant
      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.tenant).then(() => {
        done()
        this.$refs.table.pageTo(1)
      })
    },
    onDel (tenant) {
      this.$confirm(
        `删除租户 ${tenant.remark}？`,
        '操作确认',
        { type: 'warning' }
      ).then(() => {
        const loading = this.$showLoading()
        deleteTenant(tenant)
          .then(() => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.$refs.table.decrease(1)
          })
          .finally(() => {
            this.$closeLoading(loading)
          })
      })
    }
  }
}
</script>