jonhon-mes-web/src/views/periodicTesting/components/addTestProjectDialog.vue

<template>
  <el-dialog :title="title" append-to-body :modelValue="openShow" width="30%" @close="closeDialog">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="试验项目:" prop="name">
        <el-input v-model="ruleForm.name" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="试验条件:" prop="condition">
        <el-input v-model="ruleForm.condition" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="试验标准:" prop="standardValue">
        <el-radio-group v-model="ruleForm.standardValue" :disabled="disabled" @change="changeStand">
          <el-radio :label="3">已有标准</el-radio>
          <el-radio :label="6">上传新标准</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="" prop="" v-if="ruleForm.standardValue == 3">
        <el-select v-model="ruleForm.cycleTestStandardId" placeholder="请选择" :disabled="disabled">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="" v-if="ruleForm.standardValue == 6">
        <el-input v-model="ruleForm.cycleTestStandardName" placeholder="请输入标准名称" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="" prop="" v-if="ruleForm.standardValue == 6">
        <el-upload
          class="upload-demo"
          action="/api/blade-resource/oss/endpoint/put-file-attach"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          multiple
          accept=".pdf,.doc,.docx"
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="fileList"
          :disabled="disabled"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">支持扩展名:.pdf.doc.docx(最大5M)</div>
        </el-upload>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { add, getDetail, update,getStandardList } from '@/api/qualityManagement/periodicTesting/testProject.js';
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    projectId: {
      type: String,
      default: {},
    },
  },
  data() {
    return {
      disabled:false,
      openShow: false,
      ruleForm: {},
      rules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        condition: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
      fileList:[],
      options: [],
    };
  },
  mounted() {
    this.openShow = this.showDialog;
    this.getStandards()
    if (this.title == '详情') {
      this.disabled=true
      this.getDetails(this.projectId);
    }
    if (this.title == '编辑') {
      this.getDetails(this.projectId);
    }
  },
  methods: {
    getStandards(){
      getStandardList().then(res =>{
        this.options = res.data.data
      })
    },
    changeStand(val){
      if(val == 6){
        this.ruleForm.cycleTestStandardName = ''
        this.fileList = []
      }
    },
    getDetails(id) {
      getDetail(id).then(res => {
        this.ruleForm = res.data.data;
        this.ruleForm.cycleTestStandardId = this.ruleForm.cycleTestStandardId == -1 ? '' : this.ruleForm.cycleTestStandardId
        this.ruleForm.standardValue = 3
      });
    },
    closeDialog() {
      this.openShow = false;
      this.$emit('closeDialog');
    },
    handleSuccess(response, file, fileList){
      this.ruleForm.attachId = response.data.attachId
      this.fileList.push(response.data)
    },
    handleRemove(file, fileList){
      this.fileList = []
    },
    handleExceed(files, fileList){
      this.$message.error('标准文件只能上传一份')
    },
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.title == '编辑') {
            let params = {
              id:this.ruleForm.id,
              name:this.ruleForm.name,
              condition:this.ruleForm.condition,
              cycleTestStandardId:this.ruleForm.standardValue == 3 ? this.ruleForm.cycleTestStandardId ? this.ruleForm.cycleTestStandardId : null : null,
              standardAttachId:this.ruleForm.standardValue ==  6 ? this.fileList.length != 0 ? this.fileList.map(item => item.attachId).join(',') : '' : '',
              cycleTestStandardName:this.ruleForm.standardValue == 6 ? this.ruleForm.cycleTestStandardName : ''
            }
            update(params).then(res => {
              // 获取新增数据的相关字段
              this.$message({
                type: 'success',
                message: '操作成功!',
              });
              // 数据回调进行刷新
              this.$emit('closeDialog', true);
            });
          }
          if (this.title == '新增') {
            let params = {
              name:this.ruleForm.name,
              condition:this.ruleForm.condition,
              cycleTestStandardId:this.ruleForm.standardValue == 3 ? this.ruleForm.cycleTestStandardId ? this.ruleForm.cycleTestStandardId : null : null,
              standardAttachId:this.ruleForm.standardValue ==  6 ? this.fileList.length != 0 ? this.fileList.map(item => item.attachId).join(',') : '' : '',
              cycleTestStandardName:this.ruleForm.standardValue == 6 ? this.ruleForm.cycleTestStandardName : ''
            }
            add(params).then(
              res => {
                // 获取新增数据的相关字段
                this.$message({
                  type: 'success',
                  message: '操作成功!',
                });
                // 数据回调进行刷新
                this.$emit('closeDialog', true);
              },
              error => {
                // loading();
              }
            );
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>