UNION_NJUST/target/classes/static/components/member/MemChangeApply.vue

<template>
  <div style="display: flex;align-items: center;justify-content: center">
    <el-form :model="formData" ref="form" :rules="formRules" v-loading="loading" label-width="100px"
             style="width: 1000px">

      <vi-title title="申请变更"></vi-title>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="工&emsp;&emsp;号">
            <el-input :value="formData.loginname" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓&emsp;&emsp;名">
            <el-input :value="formData.username" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="所在单位">
            <el-input :value="formData.unitname" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在工会">
            <el-input :value="formData.unionname"
                      disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="变更时间">
        <el-input :value="formData.auditTime" disabled></el-input>
      </el-form-item>

      <el-form-item prop="type" label="变更类型">
        <dict-select v-model="formData.type" style="width: 100%" clearable placeholder="变更类型"
                     code="MemberChangeType" @change="typeChange"></dict-select>
      </el-form-item>

      <!--异动-->
      <div v-if="formData.type==='1'">
        <el-form-item prop="type" label="新&ensp;单&ensp;位">
          <el-select v-model="formData.currentUnitId" style="width: 100%" filterable clearable
                     @change="unitChange"
                     placeholder="请选择单位">
            <el-option
                v-for="item in unitOptions"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="type" label="新&ensp;工&ensp;会">
          <el-input :value="formData.currentUnionName" disabled placeholder=""></el-input>
        </el-form-item>
      </div>

      <div v-else-if="welfare_member&&['3','4','5'].includes(formData.type)">
        <el-form-item prop="updateWelfareMember" label="是否设为非福利会员" label-width="170px">
          <el-switch
              v-model="formData.updateWelfareMember"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
      </div>

      <el-form-item prop="remark" label="变化原因">
        <el-input v-model="formData.remark" placeholder="变化原因" type="textarea" :rows="4"></el-input>
      </el-form-item>

      <el-row style="display: flex;justify-content:flex-end;">
        <el-button @click="doSubmit" :loading="submitLoading" :disabled="disabled" type="primary">提交</el-button>
      </el-row>
    </el-form>
  </div>
</template>


<script>
module.exports = {
  components: {
    'dict-select': httpVueLoader('/components/plugins/DictSelect.vue?v=1.0.0'),
  },
  props: {
    userid: {type: String},
    welfare_member: {type: Boolean, default: true},
  },
  data() {
    return {
      loading: true,
      disabled: false,
      submitLoading: false,

      formData: {},
      formRules: {
        type: [{required: true, message: '必选', trigger: ['blur', 'change']}],
        updateWelfareMember: [{required: true, message: '必选', trigger: ['blur', 'change']}],
      },

      unitOptions: [],

    }
  },
  watch: {
    userid(val) {
      this.flush()
    }
  },
  methods: {
    typeChange() {
      this.$set(this.formData, "updateWelfareMember", ['3', '4', '5'].includes(this.formData.type))
    },
    async doSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.submitLoading = true
          this.$emit("submit", this.formData)
        }
      })
    },
    closeLoading() {
      this.submitLoading = false
    },

    unitChange(v) {
      const unit = this.unitOptions.find(x => x.id === v)
      if (unit) {
        this.formData.currentUnionId = unit.unionid
        this.formData.currentUnionName = unit.unionname
      } else {
        this.formData.currentUnionId = ''
        this.formData.currentUnionName = ''
      }
    },

    async flush() {
      this.loading = true
      this.disabled = false

      if (!this.userid) {
        this.formData = {}
        this.loading = false
        this.disabled = true
        return
      }

      const resp = await $.get("/platform/member/common/userInfo", {userId: this.userid})

      requestLaterFun(resp, (data) => {
        if (this.$refs["form"])
          this.$refs["form"].resetFields();

        this.formData = {
          userId: data.id,
          loginname: data.loginname,
          username: data.username,
          unitname: data.unitname,
          unionname: data.unionname,
          originUnitId: data.unitid,
          originUnionId: data.unionid,
          auditTime: moment().format('YYYY-MM-DD')
        }

        this.disabled = false
      }, () => {
        this.disabled = true
        this.$notify.error({
          title: '错误',
          message: '获取用户信息失败'
        });
      }, () => {
        this.loading = false
      })
    },
  },
  async created() {
    this.flush()
    this.unitOptions = await getUnits()
  }
}
</script>

<style>
.is-flex {
  display: flex;
}

.is-flex .el-form-item {
  width: 50%;
}
</style>