elizebeth/src/xt_pages/role/components/AdminRoleInfoForm.vue

<template>
  <el-dialog :title="formTitle" :visible.sync="dialogFormVisible">
    <el-form :model="form" ref="form" :rules="rules" label-width="60px">
      <el-form-item label="账号 : " prop="mobile">
        <el-input v-model="form.mobile" placeholder="用户手机号" maxlength="11"
                  :disabled="form.id !==  0"></el-input>
      </el-form-item>

      <el-form-item label="姓名 : " prop="name">
        <el-input v-model="form.name" placeholder="用户姓名"></el-input>
      </el-form-item>

      <!--<el-form-item label="角色 : " prop="role_ids" label-width="60px">-->

        <el-form-item label="角色 : " prop="role_ids">
          <el-checkbox-group v-model="form.role_ids">
            <el-checkbox v-for="( item,index) in roles" :key="index" :label="item.id" :value="item.id">{{item.name}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>


      <el-form-item label="职称 : ">
        <el-select v-model="form.user_type" placeholder="用户类型">
          <el-option
            v-for="item in user_types"
            :label="item.name"
            :value="item.index"
            :key="item.index"
          ></el-option>
        </el-select>

        <el-select v-model="form.user_title" placeholder="用户职称">
          <el-option
            v-for="item in user_titles"
            :label="item.name"
            :value="item.index"
            :key="item.index"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="职位 : ">
        <el-input v-model="form.user_title_name" placeholder="输入职位"></el-input>
      </el-form-item>

      <el-form-item label="介绍 : ">
        <Tinymce :height="400" menubar ref="editor" v-model="form.intro" :show_upload_img="false"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitAction">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import Tinymce from '@/components/Tinymce'
  import { addAdmin, getAddAdminInitData, getModifyAdminInitData, modifyAdmin } from '@/api/role/admin'

  export default {
    name: 'AdminRoleInfoForm',
    components: {
      Tinymce
    },
    data() {
      var checkMobile = (rule, value, callback) => {
        if (!value || value.length == 0) {
          return callback(new Error('手机号不能为空'))
        }
        if (/^1\d{10}$/.test(value) == false) {
          return callback(new Error('手机号格式错误'))
        } else {
          callback()
        }
      }
      var checkName = (rule, value, callback) => {
        if (!value || value.length == 0) {
          return callback(new Error('姓名不能为空'))
        } else {
          callback()
        }
      }
      return {
        admin_id: 0,
        dialogFormVisible: false,

        user_types: [
          { index: 2, name: '医生' },
          { index: 3, name: '护士' }
        ],
        user_titles: [
          { index: 1, name: '医士' },
          { index: 2, name: '医师' },
          { index: 3, name: '住院医师' },
          { index: 4, name: '主治医师' },
          { index: 5, name: '副主任医师' },
          { index: 6, name: '主任医师' },
          { index: 7, name: '护士' },
          { index: 8, name: '护师' },
          { index: 9, name: '主管护师' },
          { index: 10, name: '副主任护师' },
          { index: 11, name: '主任护师' },
          { index: 12, name: '运营专员' },
          { index: 13, name: '运营主管' }
        ],
        roles: [], // [{id, name, intro, status}]
        loading: true,
        qntoken: '',
        formTitle: '',
        isSubSuperAdmin: false,
        org: null,
        form: {
          role_ids: [],
          user_title_name: '',
          id: 0,
          mobile: '',
          name: '',
          user_type: '',
          user_title: '',
          role: '', // 其实应该是 int 类型
          intro: ''
        },
        rules: {
          mobile: [{ required: true, validator: checkMobile, trigger: 'blur' }],
          name: [{ required: true, validator: checkName, trigger: 'blur' }],
          role: [{ required: true, message: '请选择角色', trigger: 'blur' }]
        }
      }
    },
    methods: {
      open: function(adminId,role_id) {
        this.admin_id = adminId
        this.roles.push(role_id)
        if (this.admin_id < 0) {
          this.$message.error('参数错误')
          this.loading = false
          return
        }
        let local_user_id = this.$store.getters.xt_user.user.id
        this.form.id = this.admin_id
        this.formTitle = '编辑用户'
        getModifyAdminInitData(this.form.id)
          .then(rs => {
            this.loading = false
            var resp = rs.data
            if (resp.state === 1) {
              this.roles = []
              this.roles.push(...resp.data.roles)
              this.qntoken = resp.data.qntoken
              var admin = resp.data.admin
              this.form.name = admin.user_name
              this.form.mobile = admin.admin.mobile
              this.form.user_type = admin.user_type
              this.form.user_title = admin.user_title
              this.form.role = admin.role_ids
              this.form.role_ids = []
              for (let i = 0; i < this.form.role.split(",").length; i++) {
                if (this.form.role.split(',')[i].length > 0) {
                  this.form.role_ids.push(parseInt(this.form.role.split(',')[i]))
                }
              }

              this.form.intro = admin.intro
              this.form.user_title_name = admin.user_title_name

              //如果当前用户是超级管理员而且编辑自己的信息
              if (!this.isSubSuperAdmin && local_user_id == this.form.id) {
                for (let i = 0; i < this.roles.length; i++) {
                  if (this.roles[i].is_system == 1 && this.roles[i].role_name != '子管理员') {
                    this.roles.splice(i, 1)
                    i--
                  }
                }
              }

            } else {
              this.$message.error('该用户不存在')
            }
          })
          .catch(err => {
            this.loading = false
            this.$message.error('该用户不存在')
          })

        this.dialogFormVisible = true
      },
      submitAction: function() {
        if (this.admin_id < 0) {
          return
        }
        this.$refs.form.validate(valid => {
          if (valid) {
            this.loading = true
            if (this.form.id === 0) {
              this.form.role = this.form.role_ids.join(',')
              addAdmin(
                this.form.mobile,
                this.form.name,
                this.form.user_type,
                this.form.user_title,
                this.form.role,
                this.form.intro,
                this.form.user_title_name
              )
                .then(rs => {
                  this.loading = false
                  var resp = rs.data
                  if (resp.state === 1) {
                    this.$store.dispatch('DidChangeAdmins')
                    var _this = this
                    setTimeout(() => {
                      _this.$store.dispatch('RecoverAdminsChangeState')
                    }, 500)

                    this.$emit('did-edit-admin')
                    this.$refs.form.resetFields();

                  } else {
                    this.$message.error(resp.msg)
                  }
                })
                .catch(err => {
                  this.loading = false
                  this.$message.error(err)
                })
            } else {
              this.form.role = this.form.role_ids.join(',')

              modifyAdmin(
                this.form.id,
                this.form.name,
                this.form.user_type,
                this.form.user_title,
                this.form.role,
                this.form.intro,
                this.form.user_title_name
              )
                .then(rs => {
                  this.loading = false
                  var resp = rs.data
                  if (resp.state === 1) {
                    this.$emit('did-edit-admin')
                    this.$refs.form.resetFields();

                  } else {
                    this.$message.error(resp.msg)
                  }
                })
                .catch(err => {
                  this.loading = false
                  this.$message.error(err)
                })
            }
          } else {
            return false
          }
        })
      },
      close:function() {
        this.dialogFormVisible= false

      }
    }
  }
</script>