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="standard">
        <el-radio-group v-model="ruleForm.standard" :disabled="disabled">
          <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.standard == 3">
        <el-select v-model="value" placeholder="请选择" :disabled="disabled">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="" v-if="ruleForm.standard == 6">
        <el-input v-model="ruleForm.condition" placeholder="请输入标准名称" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="" prop="" v-if="ruleForm.standard == 6">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :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 } 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' }],
      },
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
    };
  },
  mounted() {
    this.openShow = this.showDialog;

    if (this.title == '详情') {
      this.disabled=true
      this.getDetails(this.projectId);
    }
    if (this.title == '编辑') {
      this.getDetails(this.projectId);
    }
  },
  methods: {
    getDetails(id) {
      getDetail(id).then(res => {
        this.ruleForm = res.data.data;
      });
    },
    closeDialog() {
      this.openShow = false;
      this.$emit('closeDialog');
    },
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.title == '编辑') {
            update(this.ruleForm).then(res => {
              // 获取新增数据的相关字段
              this.$message({
                type: 'success',
                message: '操作成功!',
              });
              // 数据回调进行刷新
              this.$emit('closeDialog', true);
            });
          }
          if (this.title == '新增') {
            add(this.ruleForm).then(
              res => {
                // 获取新增数据的相关字段
                this.$message({
                  type: 'success',
                  message: '操作成功!',
                });
                // 数据回调进行刷新
                this.$emit('closeDialog', true);
              },
              error => {
                // loading();
              }
            );
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>