admin/src/pages/system/systemSet/userManager/add.vue

<template>
  <div class="subPage">
    <form class="mainForm">
      <ul>
        <li class="flex-h">
          <span>帐户名称：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input
                placeholder="请输入帐户名称"
                v-model="postData.UserName"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>用户头像：</span>
          <div class="flex-item">
            <div>
              <el-upload
                class="avatar-uploader"
                :action='$api.file.image.url'
                :show-file-list="false"
                :on-success="handleAvatarSuccess">
                <img v-if="postData.HeadImgUrl" :src="postData.HeadImgUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>真实姓名：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input
                placeholder="请输入真实姓名"
                v-model="postData.RealName"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>邮箱：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input
                placeholder="请输入邮箱"
                v-model="postData.Email"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>工号：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input
                placeholder="请输入工号"
                v-model="postData.workNo"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>手机号：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input
                placeholder="请输入手机号"
                v-model="postData.Phone"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>用户标签：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-checkbox-group v-model="TagIds" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="(item,index) in TagList" :label="item.TagId" :key="index">{{item.TagName}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>用户类型：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-select v-model="postData.TypeId" placeholder="请选择">
                <el-option
                  v-for="item in typeList"
                  :key="item.TypeId"
                  :label="item.TypeName"
                  :value="item.TypeId">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>选择案场：</span>
          <div class="flex-item">
            <el-select v-model="CaseId" placeholder="请选择">
              <el-option
                v-for="item in cases"
                :key="item.CaseId"
                :label="item.CaseName"
                :value="item.CaseId">
              </el-option>
            </el-select>
          </div>
        </li>
        <li style="text-align:center">
          <el-button type="primary" size="mini" @click="submit">保存</el-button>
          <el-button type="danger" size="mini" @click="cancel">取消</el-button>
        </li>
      </ul>
    </form>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: '',
  data () {
    return {
      TagIds: [],
      typeList: [],
      TagList: [],
      CheckPwd: '',
      postData: {
        UserId: '', // 用户id
        UserName: '', // 用户名
        RealName: '', // 真实姓名
        Pwd: '', // 密码
        OrgId: '', // 机构id
        Sex: '', // 性别
        WorkNo: '', // 工号
        Email: '', // 邮箱
        Phone: '', // 手机号
        HeadImgUrl: '', // 头像
        TypeId: '', // 用户类型id
        TagIds: '', // 用户标签
        BelongCaseId: '', // 所属案场id
      }
    }
  },
  components: {},
  computed: {
    ...mapState({
      cases: x => x.app.cases.list,
      defaultCaseId: x => x.app.cases.default,
    }),
    CaseId: {
      get () {
        return this.postData.BelongCaseId || this.defaultCaseId
      },
      set (val) {
        this.postData.BelongCaseId = val
      }
    }
  },
  created () {
    this.getCaseTagList()
    this.getUserTypeList()
  },
  methods: {
    getCaseTagList () { // 获取标签数据
      this.$ajax(this.$api.caseManager.getCaseTagList.url, {
        method: this.$api.caseManager.getCaseTagList.method,
        queryData: { caseid: this.CaseId, page: 1, pagesize: 10000 }
      }).then(res => {
        this.TagList = res.list
      })
    },
    getUserTypeList () { // 获取用户类型
      this.$ajax(this.$api.caseManager.getUserTypeList.url, {
        method: this.$api.caseManager.getUserTypeList.method,
      }).then(res => {
        this.typeList = res
        this.postData.TypeId = res[0].TypeId
      })
    },
    handleCheckedCitiesChange (val) {
      this.postData.TagIds = val.join(',')
    },
    handleAvatarSuccess (res, file) {
      this.postData.HeadImgUrl = res.result.url
    },
    submit () { // 提交数据
      if (this.postData.UserName === '') {
        this.$message({
          type: 'error',
          message: '帐户名称不能为空'
        })
        return false
      }
      if (this.postData.Phone === '') {
        this.$message({
          type: 'error',
          message: '手机号不能为空'
        })
        return false
      }
      if (this.postData.BelongCaseId === '') this.postData.BelongCaseId = this.CaseId
      this.$ajax(this.$api.systemSet.addUser.url, {
        method: this.$api.systemSet.addUser.method,
        data: this.postData
      }).then(res => {
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        this.$router.push({name: 'userManager'})
      })
    },
    cancel () {
      this.$router.go(-1)
    }
  },
  mounted () { }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
</style>