demo/demo-web-ui/src/views/workflow/userManage/userManageAdd.vue

<template>
  <div>
    <el-card class="box-card">
      <table class="e-table" cellspacing="0">
        <tr>
          <td>姓名</td>
          <td>
            <el-input v-model="form.name" style="width:300px"></el-input>
          </td>
        </tr>
        <tr>
          <td>用户类型</td>
          <td>
            <el-select v-model="form.userType" @change="$forceUpdate()" style="width:300px">
              <el-option
                v-for="(item, i) in userTypeData"
                :key="i"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td>部门</td>
          <td>
            <el-select v-model="form.deptSid" placeholder="请选择" style="width:300px">
              <el-option hidden :key="form.deptSid" :label="orgName" :value="form.deptSid"></el-option>
              <el-tree :data="treedata" ref="Tree" show-checkbox accordion node-key="sid"
                       :default-checked-keys="checkedId"
                       :default-expand-all='true' :check-strictly='true' :props="defaultProps"
                       @check-change="checkchange"
              >
              </el-tree>
            </el-select>
            <!--<el-select v-model="form.deptSid" @change="$forceUpdate()">
                <el-option
                  v-for="(item, i) in treedata"
                  :key="i"
                  :label="item.name"
                  :value="item.sid">
                </el-option>
             </el-select>-->
          </td>
        </tr>
        <tr>
          <td>岗位</td>
          <td>
            <el-select v-model="form.postSid" @change="$forceUpdate()" style="width:300px">
              <el-option
                v-for="(item, i) in postSidData"
                :key="i"
                :label="item.name"
                :value="item.sid">
              </el-option>
            </el-select>
            <!--<el-input v-model="form.postSid"></el-input>-->
          </td>
        </tr>
        <tr>
          <td>手机号码</td>
          <td>
            <el-input v-model="form.mobile" style="width:300px"></el-input>
          </td>
        </tr>
        <tr>
          <td>手机验证码</td>
          <td>
            <el-input v-model="form.verificationCode" placeholder="请输入验证码" style="width:300px">
              <el-button v-show="showCode" slot="append" @click.native="getIdentifying">获取验证码</el-button>
              <el-button v-show="!showCode" slot="append">{{phoneCodeCount}} s</el-button>
            </el-input>
            <!--<el-input v-model="form.verificationCode"></el-input>-->
          </td>
        </tr>
      </table>
      <div style="margin-top: 20px; text-align: center;">
        <el-button type="primary" @click="save()">保 存</el-button>
        <!--<el-button type="warning" @click="cancel()">取 消</el-button>-->
      </div>
    </el-card>
  </div>
</template>

<script>
  import {userAdd, userUpdata, userSingle, orgList, postList, getCode} from '@/api/system/userManage/index.js'

  export default {
    data() {
      return {
        form: {
          sid: '',
          name: '',
          userType: '',
          deptSid: '',
          postSid: '',
          mobile: '',
          verificationCode: ''
        },
        form1: {
          sid: '',
        },
        userTypeData: [{
          value: '1',
          name: '员工'
        }, {
          value: '2',
          name: '客户'
        }, {
          value: '3',
          name: '供应商'
        }],
        treedata: [],
        checkedId: [],
        orgName: '',
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        postSidData: [],
        showCode: true,
        phoneCodeCount: '',
        timer: null,
      };
    },
    props: ['dataObj'],
    watch: {
      dataObj: {
        handler(val) {
          this.form1.sid = val.sid
          this.getUserSingle()
          this.getOrgList()
        },
        deep: true,
      },
    },
    mounted() {
      this.getOrgList()
    },
    methods: {
      getUserSingle() {
        userSingle(this.form1).then(res => {
          if (res.code == '200') {
            this.form.sid = res.data.sid
            this.form.name = res.data.name
            this.form.userType = res.data.userType
            this.form.deptSid = res.data.deptSid
            this.orgName = res.data.departmentName
            this.form.postSid = res.data.postSid
            this.form.mobile = res.data.mobile
          }
        })
      },
      // 获取部门树形
      getOrgList(row) {
//      this.roleDialog = true
        this.checkedId = []
        this.Thisrow = row
        this.loading = true
        let params = {}
        orgList(params).then(res => {
          this.treedata = res.data
        })

      },
      checkchange(data, checked, indeterminate) {
        if (checked) {

          this.form.deptSid = data.sid
          this.orgName = data.name
          let arr = []
          arr = [data.sid];
          this.$refs.Tree.setCheckedKeys(arr);
          this.form.postSid = ''
          this.getPost(data.sid)
          return;
        }
      },
      getPost(orgSid) {
        let params = {
          sid: orgSid
        }
        postList(params).then(res => {
          this.postSidData = res.data
        })
      },
      save() {
        if (this.form.sid) {
          userUpdata(this.form).then(res => {
            if (res.code == '200') {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.$emit('status', false)
            }
          })
        } else {
          let orgSid = this.$refs.Tree.getCheckedKeys()
          this.form.deptSid = orgSid.toString()
          userAdd(this.form).then(res => {
            if (res.code == '200') {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.$emit('status', false)
            }
          })
          let arr = []
          this.$refs.Tree.setCheckedKeys(arr);
        }
        this.reset()
      },
      reset() {
        this.form = {
          sid: '',
          name: '',
          userType: '',
          deptSid: '',
          postSid: '',
          mobile: '',
          verificationCode: ''
        }
      },
      //获取验证码
      getIdentifying() {
        if (this.form.mobile == "") {
          this.$alert('请填写手机号码', '', {
            confirmButtonText: '确定'
          })
          return;
        }
        //验证码倒计时
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.phoneCodeCount = TIME_COUNT;
          this.showCode = false;
          this.timer = setInterval(() => {
            if (this.phoneCodeCount > 0 && this.phoneCodeCount <= TIME_COUNT) {
              this.phoneCodeCount--;
            } else {
              this.showCode = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        }

        let obj = {
          phone: this.form.mobile,
        }
        getCode(obj).then(res => {
          if (res.code == '200') {
            this.orginTranceNo = res.data.tranceNo;
          }
        })
      },
      cancel() {
        this.$emit('status', false)
      }
    }
  }
</script>

<style>
</style>