managerSetting.vue

<template>
  <div class="app-content from-table" style="height:450px;overflow: auto;">
    <a-spin :spinning="loading" style="width: 100%;height: 100%;">
      <a-form-model ref="form" :model="formData" :rules="rules">
        <a-row>
          <a-col :span="24">
            <div class="tb-title">
              <span>添加管理员</span>
            </div>
          </a-col>
        </a-row>
        <a-row type="flex">
          <a-col :span="4" class="bg-gray">
            <div class="special-middle">
              <div class="required">用户名</div>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="special-middle">
              <a-form-model-item prop="username">
                <a-input v-model="formData.username" :maxLength="30" style="width: 200px;margin-right: 10px;" />
              </a-form-model-item>
            </div>
          </a-col>
          <a-col :span="4" class="bg-gray">
            <div class="special-middle">
              <div class="required">密码</div>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="special-middle">
              <a-form-model-item prop="password">
                <a-input v-model="formData.password" :maxLength="30" style="width: 200px;margin-right: 10px;" />
              </a-form-model-item>
            </div>
          </a-col>
        </a-row>
        <a-row type="flex">
          <a-col :span="4" class="bg-gray">
            <div class="special-middle">
              <div class="required">证件号</div>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="special-middle">
              <a-form-model-item prop="certId">
                <a-input v-model="formData.certId" :maxLength="30" style="width: 200px;margin-right: 10px;" />
              </a-form-model-item>
            </div>
          </a-col>
          <a-col :span="4" class="bg-gray">
            <div class="special-middle">
              <div class="required">姓名</div>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="special-middle">
              <a-form-model-item prop="personName">
                <a-input v-model="formData.personName" :maxLength="30" style="width: 200px;margin-right: 10px;" />
              </a-form-model-item>
            </div>
          </a-col>
        </a-row>
        <a-row type="flex">
          <a-col :span="4" class="bg-gray">
            <div class="special-middle">
              <div class="required">手机号</div>
            </div>
          </a-col>
          <a-col :span="20">
            <div class="special-middle">
              <a-form-model-item prop="mobile">
                <a-input v-model="formData.mobile" :maxLength="30" style="width: 200px;margin-right: 10px;" />
              </a-form-model-item>
            </div>
          </a-col>
        </a-row>
        <a-row type="flex">
          <a-col :span="24" style="text-align: center;">
            <div class="special-middle">
              <a-button type="primary" @click="submit">添加</a-button>
            </div>
          </a-col>
        </a-row>
      </a-form-model>
      <a-row>
        <a-col :span="24">
          <div class="tb-title">
            <span>管理员信息</span>
          </div>
        </a-col>
      </a-row>
      <a-table :dataSource="tableData" :columns="columns" rowKey="id" :pagination="false">
        <template slot="stateSwitch" slot-scope="record">
          <a-switch checked-children="启用" un-checked-children="停用" :checked="checkedState(record)" @change="switchChange($event,record)" />
        </template>
        <template slot="option" slot-scope="record">
          <a-button type="link" size="small" @click="recordClick(record,'delete')">删除</a-button>
          <a-button type="link" size="small" @click="recordClick(record,'reset')">重置密码</a-button>
        </template>
      </a-table>
    </a-spin>
  </div>
</template>

<script>
import { isEmptyParams, checkPhone, checkIdentitytionId } from "@/views/utils/common"

export default {
  name: "managerSetting",
  components: {
    
  },
  data () {
    return {
      loading: false,
      tableData: [],
      columns: [
        { title: '姓名', dataIndex: 'personName', align: 'center' },
        { title: '性别', dataIndex: 'sex', align: 'center' },
        { title: '证件号', dataIndex: 'certId', align: 'center' },
        { title: '手机号', dataIndex: 'mobile', align: 'center' },
        { title: '用户名', dataIndex: 'username', align: 'center' },
        { title: '状态', scopedSlots: { customRender: 'stateSwitch' }, width: '100px', align: 'center' },
        { title: '操作', scopedSlots: { customRender: 'option' }, align: 'center', fixed: 'right', width: 80, },
      ],
      pagination: { pageIndex: 1, pageSize: this.$defaultPageSize, total: 0, pageSizeOptions: this.$defaultPageSizeOptions, },
      formData: { username: '', password: '', personName: '', certId: '', mobile: '', unitId: this.unitInfo.id, treeCode: this.unitInfo.treeCode, unitType: this.unitInfo.unitType },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value == '' || value == undefined) {
                callback()
              }
              else {
                let pars = { username: value }
                this.$api.base.checkUser(pars).then(({ data = {} }) => {
                  if (data) {
                    callback(new Error("用户名已存在"));
                  } else
                    callback()
                })
              }
            }
          }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            if (value == '' || value == undefined) {
              callback()
            }
            let ckPwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/;
            if (ckPwd.test(value)) {
              callback()
            } else {
              callback(new Error('密码格式错误，请检查！'));
            }
          }
        },],
        personName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        certId: [
          { required: true, message: '请输入证件号', trigger: 'blur' },
          { required: true, validator: checkIdentitytionId, trigger: 'blur' },
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { required: true, validator: checkPhone, trigger: 'blur' }
        ],
      },
    }
  },
  props: {
    value: {
      type: String,
      default: () => {
        return null
      }
    },
    unitInfo: {
      type: Object,
      default: () => {
        return null
      }
    },
  },
  created () {
    if (!!this.unitInfo.id) {
      this.getManagerListByUnitId()
    }
  },
  methods: {
    getManagerListByUnitId () {
      this.loading = true
      let par = { id: this.unitInfo.id }
      this.$api.manager.getManagerListByUnitId(par).then(({ data = {} }) => {
        if (data) {
          this.tableData = data
          this.loading = false
        }
      }).catch(() => {
        this.loading = false
      })
    },
    change () {
      this.getManagerListByUnitId()
    },
    showSizeChange (current, pageSize) {
      this.pagination.pageIndex = current
      this.pagination.pageSize = pageSize
      this.getManagerListByUnitId()
    },
    checkedState (record) {
      return record.stateName === "启用" ? true : false
    },
    switchChange (checked, record) {//启用/停用单位开关
      if (checked) {
        record.stateName = "启用";
        record.state = 1;
      } else {
        record.stateName = "停用";
        record.state = 2;
      }
      this.loading = true
      let par = { id: record.userRoleId, personState: record.state }
      this.$api.manager.updateManagerState(par).then(({ data = {} }) => {
        if (data) {
          this.$message.success('修改成功！')
        }
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    recordClick (record, type) {
      if (type === 'reset') {
        this.resetPwd(record)
      }
      if (type === 'delete') {
        this.deleteManager(record.unitId, record.userRoleId)
      }
    },
    deleteManager (unitId, userRoleId) {
      let self = this
      this.$confirm({
        title: '管理员删除',
        content: '确定要删除该管理员？',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          self.loading = true
          self.$api.manager.delete({ unitId: unitId, userRoleId: userRoleId }).then(({ data = {} }) => {
            if (data) {
              self.$message.success('删除成功！')
              self.getManagerListByUnitId()
            }
            self.loading = false
          }).catch(() => { self.loading = false })
        },
        onCancel () {
        },
      })
    },
    resetPwd (record) {
      let self = this
      this.$confirm({
        title: '重置密码',
        content: '重置后密码为"ky123456"确定要重置密码？',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          self.loading = true
          let par = { id: record.userId }
          self.$api.systemUser.resetUserPwd(par).then(({ data = {} }) => {
            if (data) {
              self.$message.success('重置成功！')
              self.getManagerListByUnitId()
            }
            self.loading = false
          }).catch(() => { self.loading = false })
        },
        onCancel () {
        },
      })
    },
    submit () {
      //提交单位数据
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          let pars = isEmptyParams(this.formData)
          let par = { ...pars }
          this.$api.manager.createManager(par).then(({ data = {} }) => {
            if (data) {
              this.formData = {
                username: null, password: null, personName: null, certId: null, mobile: null, unitId: this.unitInfo.id, treeCode: this.unitInfo.treeCode, unitType: this.unitInfo.unitType
              }
              this.$message.success('添加成功！')
              this.getManagerListByUnitId()
            }
            this.loading = false
          }).catch(() => { this.loading = false })
        }
      })
    }
  }
}
</script>