kh-device-client/src/views/systemOverview/systemSettings/modules/UserInfoModal.vue

<template>
  <a-modal
    :title="title"
    :width="556"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top:5%;height: 85%;overflow-y: hidden">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form" class="custom-vertical-form flex-column-between">
        <a-form-item>
          <div class="upload-avatar-box">
            <j-image-upload v-decorator="['avatar', validatorRules.avatar]"
                            class="upload-avatar"
                            :number="1"
                            uploadLimitHideBtn
                            accept='.png,.PNG,.jpg,.JPG'></j-image-upload>
          </div>
        </a-form-item>
        <a-row type="flex" :gutter="20" class="mb-20">
          <a-col :span="12">
            <a-form-item label="用户名称">
              <a-input placeholder="请输入用户名称" :max-length="50" disabled
                       @change="event => event.target.value = event.target.value.trim()"
                       v-decorator="['username', validatorRules.username]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="用户类别">
              <j-dict-select-tag :triggerChange="true"
                                 dictCode="user_type"
                                 :disabled="global.adminUserList.includes(model.username)"
                                 v-decorator="['userType', validatorRules.userType]"
                                 placeholder="请选择用户类别">
              </j-dict-select-tag>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="所属单位">
              <a-select v-decorator="['selecteddeparts', validatorRules.selecteddeparts]" allowClear
                        placeholder="请选择所属单位">
                <a-icon slot="suffixIcon" type="caret-down" class="select-arrow" />
                <a-select-option v-for="item in departList" :key="item.id" :value="item.id">{{ item.departName }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="联系方式">
              <a-input placeholder="请输入联系方式"
                       v-decorator="['phone', validatorRules.phone]" />
            </a-form-model-item>

          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { editUserInfo } from '@api/systemOverview'
import { getAction } from '@api/manage'
import { queryDepartTreeList } from '@api/api'
export default {
  name: 'UserInfoModal',
  data () {
    return {
      title: '编辑',
      form: this.$form.createForm(this),
      visible: false,
      roleDisabled: false,
      model: {},
      confirmLoading: false,
      validatorRules: {
        username: { rules: [{ required: true, message: '请输入用户名称' }], validateTrigger: 'blur' },
        userType: { rules: [{ required: true, message: '请选择用户类别' }], validateTrigger: 'change' },
        selecteddeparts: { rules: [{ required: true, message: '请选择所属单位' }], validateTrigger: 'change' },
        phone: { rules: [{ required: true, message: '请输入联系方式' }, { validator: this.validateMobile }], validateTrigger: 'blur' }
      },
      departList: [] // 所属单位下拉
    }
  },
  methods: {
    add () {
      this.loadDepartList()
      this.edit(this.modelDefault)
    },
    edit (record) {
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(this.model)
      })
      this.loadDepartList()
      this.getUserDeparts(record.id)
    },
    close () {
      this.form.resetFields()
      this.model = {}
      this.$emit('close')
      this.visible = false
    },
    handleOk () {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          const params = Object.assign({}, this.model, values)
          editUserInfo(params).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
              that.close()
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        }
      })
    },
    handleCancel () {
      this.close()
    },
    // 获取部门下拉
    loadDepartList () {
      const flattenTree = (tree) => {
        const result = []
        function flatten (node) {
          result.push(node)
          if (Array.isArray(node.children) && node.children.length) {
            node.children.forEach(child => flatten(child))
          }
        }
        tree.forEach((node) => flatten(node))
        return result
      }
      return queryDepartTreeList().then(res => {
        if (res.success) {
          const tree = res.result || []
          this.departList = flattenTree(tree)
        }
      })
    },
    // 获取用户部门
    getUserDeparts (userid) {
      const that = this
      getAction('/sys/user/userDepartList', { userId: userid }).then((res) => {
        if (res.success) {
          const departOptions = []
          const selectDepartKeys = []
          for (let i = 0; i < res.result.length; i++) {
            selectDepartKeys.push(res.result[i].key)
            // 新增负责部门选择下拉框
            departOptions.push({
              value: res.result[i].key,
              label: res.result[i].title
            })
          }
          that.model.selecteddeparts = selectDepartKeys.join(',')
          this.$nextTick(() => {
            this.form.setFieldsValue({
              selecteddeparts: this.model.selecteddeparts
            })
          })
          that.nextDepartOptions = departOptions
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>

.upload-avatar-box {
  position: relative;
  width: 100%;
  height: 168px;
  background: url("~@/assets/images/systemOverview/systemSettings/upload-avatar.png") no-repeat center center;
  background-size: 124px 124px;

  .upload-avatar {
    width: 120px;
    height: 120px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    // 隐藏上传组件
    /deep/.ant-upload-select {
      opacity: 0;
    }
    /deep/.ant-upload-list-picture-card .ant-upload-list-item {
      border: none;
      width: 120px;
      height: 120px;
      padding: 1px;
    }
    /deep/.ant-upload-list-picture .ant-upload-list-item-thumbnail,
    /deep/.ant-upload-list-picture-card .ant-upload-list-item-thumbnail {
      opacity: 1;
    }
  }
}
</style>