zhxg_pc/src/components/StudentCadre.vue

<template>
  <div>
    <el-dialog v-bind="$attrs" :visible="visible" v-on="$listeners" @open="onOpen" @close="onClose" title="职位设置">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="18">
            <el-form-item label="选择职位" prop="id">
              <el-select v-model="formData.id" placeholder="请选择选择职位" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in idOptions" :key="index" :label="item.label" :value="item.value"
                  :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="职位状态" prop="isRemove" required>
              <el-switch v-model="formData.isRemove" inactive-text="撤销职务" :disabled='!formData.isRemove'
                @change="delCadre"></el-switch>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listCarders
  } from '@/api/comprehensive/carders';
  import {
    addStudentCadre,
    listStudentCadre,
    updateStudentCadre,
    delStudentCadre
  } from '@/api/comprehensive/studentCadre'
  export default {
    inheritAttrs: false,
    components: {},
    props: {
      visible: {
        type: Boolean,
        required: true
      },
      stuNo: {
        type: String,
        required: true
      },
      carderId: {
        type: Number,
        required: false
      }
    },
    data() {
      return {
        formData: {
          id: undefined,
          isRemove: false,
        },
        rules: {
          id: [{
            required: true,
            message: '请选择选择职位',
            trigger: 'change'
          }],
        },
        idOptions: [],
      }
    },
    computed: {},
    watch: {},
    created() {

    },
    mounted() {},
    methods: {
      getList() {
        listCarders().then(res => {
          res.rows.forEach(i => {
            let carders = {
              "label": i.carderName,
              "value": i.id
            }
            this.idOptions.push(carders)
          })
        })

      },
      onOpen() {
        this.getList()
        this.hasCadre()
      },
      onClose() {
        this.idOptions = [];
        this.$refs['elForm'].resetFields()
      },
      close() {
        this.$emit('update:visible', false); // 关闭对话框
      },
      handleConfirm() {
        let carderId = this.formData.id
        let stuNo = this.stuNo
        this.$refs['elForm'].validate(valid => {
          if (!valid) return
          if (!this.carderId) {
            addStudentCadre({
              carderId,
              stuNo
            }).then(res => {
              this.$modal.msgSuccess(res.msg)
            })
          } else {
            listStudentCadre({
              carderId: this.carderId,
              stuNo
            }).then(res => {
              res.rows.forEach(i => {
                updateStudentCadre({
                  id: i.id,
                  carderId,
                  stuNo
                }).then(res1 => {
                  this.$modal.msgSuccess(res1.msg)
                })
              })
            })
          }
          this.idOptions.forEach(i => {
            if(carderId === i.value){
              this.cardersName(stuNo, i.label, carderId)
            }
          })
          this.close()
        })
      },
      hasCadre() {
        if (this.carderId) {
          this.formData.isRemove = true
          this.formData.id = this.carderId
        }
      },
      delCadre() {
        let stuNo = this.stuNo
        listStudentCadre({
          carderId: this.carderId,
          stuNo
        }).then(res => {
          res.rows.forEach(i => {
            delStudentCadre(i.id).then(res1 => {
              this.$modal.msgSuccess(res1.msg)
              this.cardersName(this.stuNo, null, null)
              this.formData.id = null
              this.close()
            })
          })
        })
      },
      cardersName(stuNo, carder, carderId) {
        let name = {
          stuNo,
          carder,
          carderId
        }
        console.log(name);
        this.$emit("cardersName", name)
      }
    }
  }
</script>

<style>
</style>