qms/src/views/modules/supplier/components/addPlan.vue

<template>
  <el-card shadow="never" class="aui-card--fill">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="标题" prop="title">
        <el-input v-model="ruleForm.title"></el-input>
      </el-form-item>
      <el-form-item label="评估类型" prop="evaluationType">
        <el-radio-group v-model="ruleForm.evaluationType">
          <el-radio-button :label="0">年度</el-radio-button>
          <el-radio-button :label="1">季度</el-radio-button>
          <el-radio-button :label="2">月度</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="评估模板" prop="evaluationTemplateId">
        <el-select v-model="ruleForm.evaluationTemplateId" filterable clearable placeholder="评估模板">
          <el-option
            v-for="item in modalOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="说明" prop="description">
        <el-input type="textarea" v-model="ruleForm.description"></el-input>
      </el-form-item>
      提醒时间
      <el-form-item label="月" prop="reminderTimeMonth">
        <el-radio-group v-model="ruleForm.reminderTimeMonth" @change="setDay">
          <el-radio-button v-for="(item, index) in monthList" :key="index" :label="item"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="日" prop="reminderTimeDay">
        <el-radio-group v-model="ruleForm.reminderTimeDay">
          <el-radio-button v-for="(item, index) in dayList" :key="index" :label="item"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="评估人" prop="evaluator">
        <el-radio-group v-model="ruleForm.evaluator">
          <el-radio v-for="(item, index) in userList" :key="index" :label="item.id">{{ item.username }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="提醒人" prop="reminder">
        <el-select v-model="ruleForm.reminder" filterable clearable placeholder="提醒人">
          <el-option
            v-for="item in userList"
            :key="item.id"
            :label="item.username"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="待评估供应商" prop="chooseSupplierList">
        <el-select v-model="chooseSupplierList" filterable multiple clearable placeholder="待评估供应商">
          <el-option
            v-for="item in supplierList"
            :key="item.id"
            :label="item.supplierTypeName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <el-button @click="resetForm('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      urlOptions: {
        addURL: '/supplier/qmsEvaluationPlan',
        getTemplateListURL: '/supplier/qmsEvaluationTemplate/page',
        getSupplierURL: '/supplier/qmsSupplier/page',
        getUserURL: '/sys/user/page',
        addQmsRelation: '/supplier/qmsEvaluationPlanSupplier'
      },
      ruleForm: {
        title: '',
        evaluationType: '',
        evaluationTemplateId: '',
        description: '',
        reminderTimeMonth: 1,
        reminderTimeDay: 1,
        evaluationType: '',
        evaluator: '',
        reminder: ''
      },
      chooseSupplierList: [],
      monthList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      dayList: 30,
      modalOptions: [],
      userList: [],
      supplierList: [],
      rules: {
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getTemplate()
    this.getSupplier()
    this.getUser()
  },
  methods: {
    init(val) {
      this.ruleForm = val
    },
    setDay() {
      switch (this.ruleForm.reminderTimeMonth) {
        case 2:
          this.dayList = 28
          break
        case 1:
        case 3:
        case 5:
        case 7:
        case 8:
        case 10:
        case 12:
          this.dayList = 31
          break
        case 4:
        case 6:
        case 9:
        case 11:
          this.dayList = 30
          break
      }
    },
    getUser() {
      this.$http
        .get(this.urlOptions.getUserURL, {
          params: {
            limit: 999,
            page: 1
          },
        })
        .then(({ data: res }) => {
          this.dataListLoading = false;
          if (res.code !== 0) {
            this.userList = [];
            return this.$message.error(res.msg);
          }
          this.userList = res.data.list;
        })
        .catch(() => {
          this.dataListLoading = false;
        });
    },
    getSupplier() {
      this.$http
        .get(this.urlOptions.getSupplierURL, {
          params: {
            limit: 999,
            page: 1
          },
        })
        .then(({ data: res }) => {
          this.dataListLoading = false;
          if (res.code !== 0) {
            this.supplierList = [];
            return this.$message.error(res.msg);
          }
          this.supplierList = res.data.list;
        })
        .catch(() => {
          this.dataListLoading = false;
        });
    },
    getTemplate() {
      this.$http
        .get(this.urlOptions.getTemplateListURL, {
          params: {
            limit: 999,
            page: 1
          },
        })
        .then(({ data: res }) => {
          this.dataListLoading = false;
          if (res.code !== 0) {
            this.modalOptions = [];
            return this.$message.error(res.msg);
          }
          this.modalOptions = res.data.list;
        })
        .catch(() => {
          this.dataListLoading = false;
        });
    },
    submitForm(formName) {
      console.log('啊啊啊啊啊', this.ruleForm)
      console.log('nich ', this.chooseSupplierList)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http[!this.ruleForm.id ? "post" : "put"](this.urlOptions.addURL, this.ruleForm)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            }
            if (this.chooseSupplierList.length > 0) {
              this.chooseSupplierList.forEach(item => {
                let param = {
                  supplierId: item,
                  evaluationPlanId: res.data
                }
                this.$http[!this.ruleForm.id ? "post" : "put"](this.urlOptions.addQmsRelation, param)
                  .then(({ data: res }) => {
                    if (res.code !== 0) {
                      return this.$message.error(res.msg);
                    }
                    console.log('添加成功')
                    // this.$message({
                    //   message: this.$t("prompt.success"),
                    //   type: "success",
                    //   duration: 500
                    // })
                  })
              })
            }
            this.$message({
              message: this.$t("prompt.success"),
              type: "success",
              duration: 500,
              onClose: () => {
                console.log(1111, res);
                this.$emit("refreshDataList");
                this.addRelation()
              },
            })
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    addRelation() {

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>