样品管理大模块85%

董国庆

2 天以前 b4ac09eb2e493aab92557628e0436189337e2939

 laboratory/src/views/dataManagement/sampleRecordList/components/sampleDialog.vue

@@ -23,9 +23,9 @@
          >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="取样名称" prop="sampleName">
                <el-form-item label="取样名称" prop="samplingName">
                  <el-input
                    v-model="form.sampleName"
                    v-model="form.samplingName"
                    placeholder="请输入取样名称"
                  />
                </el-form-item>
@@ -50,17 +50,17 @@
                </el-form-item>
              </el-col>
              <el-col :span="7.5">
                <el-form-item label="PH" prop="ph">
                <el-form-item label="PH" prop="samplePh">
                  <el-input
                    v-model="form.ph"
                    v-model="form.samplePh"
                    placeholder="请输入PH值"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="7.5">
                <el-form-item label="加水量" prop="waterAmount">
                <el-form-item label="加水量" prop="waterAddition">
                  <el-input
                    v-model="form.waterAmount"
                    v-model="form.waterAddition"
                    placeholder="请输入加水量"
                  />
                </el-form-item>
@@ -68,21 +68,21 @@
            </el-row>

            <el-row :gutter="20">
              <el-col :span="4.6" v-for="i in 5" :key="'additive' + i">
                <el-form-item :label="'加辅' + i" :prop="'additive' + i">
                  <el-input v-model="form['additive' + i]" placeholder="请输入" />
              <el-col :span="4.6" v-for="i in 5" :key="'addAuxiliary' + i">
                <el-form-item :label="'加辅' + i" :prop="'addAuxiliary' + (i === 1 ? 'One' : i === 2 ? 'Two' : i === 3 ? 'Three' : i === 4 ? 'Four' : 'Five')">
                  <el-input v-model="form['addAuxiliary' + (i === 1 ? 'One' : i === 2 ? 'Two' : i === 3 ? 'Three' : i === 4 ? 'Four' : 'Five')]" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="4.6" v-for="i in 5" :key="'additive' + (i + 5)">
              <el-col :span="4.6" v-for="i in 5" :key="'addAuxiliary' + (i + 5)">
                <el-form-item
                  :label="'加辅' + (i + 5)"
                  :prop="'additive' + (i + 5)"
                  :prop="'addAuxiliary' + (i === 1 ? 'Six' : i === 2 ? 'Seven' : i === 3 ? 'Eight' : i === 4 ? 'Nine' : 'Ten')"
                >
                  <el-input
                    v-model="form['additive' + (i + 5)]"
                    v-model="form['addAuxiliary' + (i === 1 ? 'Six' : i === 2 ? 'Seven' : i === 3 ? 'Eight' : i === 4 ? 'Nine' : 'Ten')]"
                    placeholder="请输入"
                  />
                </el-form-item>
@@ -110,7 +110,7 @@
              <el-col :span="24">
                <el-form-item
                  label="拍照"
                  prop="fileList"
                  prop="pictures"
                  :rules="[
                    { required: true, message: '请上传照片', trigger: 'change' },
                  ]"
@@ -121,6 +121,10 @@
                    :file-list="fileList"
                    :auto-upload="false"
                    list-type="picture-card"
                    :on-change="handleChange"
                    :on-remove="handleRemove"
                    :before-upload="beforeUpload"
                    multiple
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
@@ -139,6 +143,8 @@
</template>

<script>
import { updateRecordOperation } from '../service'

export default {
  name: "SampleDialog",
  props: {
@@ -155,25 +161,26 @@
    return {
      form: {
        processTime: "",
        sampleName: "",
        samplingName: "",
        sampleCode: "",
        temperature: "",
        ph: "",
        waterAmount: "",
        additive1: "",
        additive2: "",
        additive3: "",
        additive4: "",
        additive5: "",
        additive6: "",
        additive7: "",
        additive8: "",
        additive9: "",
        additive10: "",
        samplePh: "",
        waterAddition: "",
        addAuxiliaryOne: "",
        addAuxiliaryTwo: "",
        addAuxiliaryThree: "",
        addAuxiliaryFour: "",
        addAuxiliaryFive: "",
        addAuxiliarySix: "",
        addAuxiliarySeven: "",
        addAuxiliaryEight: "",
        addAuxiliaryNine: "",
        addAuxiliaryTen: "",
        sampleAmount: "",
        pictures: "",
      },
      rules: {
        sampleName: [
        samplingName: [
          { required: true, message: "请输入取样名称", trigger: "blur" },
        ],
        sampleCode: [
@@ -182,12 +189,13 @@
        temperature: [
          { required: true, message: "请输入温度", trigger: "blur" },
        ],
        ph: [{ required: true, message: "请输入PH值", trigger: "blur" }],
        waterAmount: [
        samplePh: [{ required: true, message: "请输入PH值", trigger: "blur" }],
        waterAddition: [
          { required: true, message: "请输入加水量", trigger: "blur" },
        ],
      },
      fileList: [],
      defaultImage: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    };
  },
  watch: {
@@ -195,6 +203,14 @@
      handler(val) {
        if (val) {
          this.form = { ...this.form, ...val };
          // 如果有图片数据，设置到fileList中
          if (val.pictures) {
            const imageUrls = val.pictures.split(',');
            this.fileList = imageUrls.map((url, index) => ({
              name: `sample-image-${index + 1}.png`,
              url: url
            }));
          }
        }
      },
      immediate: true,
@@ -206,17 +222,69 @@
      this.form = this.$options.data().form;
      this.fileList = [];
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
    // 上传前校验
    beforeUpload(file) {
      const isImage = file.type.startsWith('image/');
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isImage) {
        this.$message.error('只能上传图片文件!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB!');
        return false;
      }
      return true;
    },
    // 文件状态改变时的钩子
    handleChange(file, fileList) {
      this.fileList = fileList;
      
      // 更新pictures字段
      if (fileList.length === 0) {
        this.form.pictures = this.defaultImage;
      } else {
        const imageUrls = fileList.map(file => file.url || this.defaultImage);
        this.form.pictures = imageUrls.join(',');
      }
    },
    // 移除文件时的钩子
    handleRemove(file, fileList) {
      this.fileList = fileList;
      
      // 更新pictures字段
      if (fileList.length === 0) {
        this.form.pictures = this.defaultImage;
      } else {
        const imageUrls = fileList.map(file => file.url || this.defaultImage);
        this.form.pictures = imageUrls.join(',');
      }
    },
    async handleSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const submitData = {
            ...this.form,
            sampleTime: new Date().toISOString(),
            operator: window._userInfo?.name || "",
            handlePersonId: JSON.parse(sessionStorage.getItem('userInfo') || '{}').userId || "",
            handlePersonName: JSON.parse(sessionStorage.getItem('userInfo') || '{}').nickName || "",
            fileList: this.fileList,
          };
          this.$emit("submit", submitData);
          this.handleClose();
          
          try {
            // 先调用updateRecordOperation接口保存数据
            const res = await updateRecordOperation(submitData);
            if (res.code === 200) {
              // 保存成功，继续执行原来的提交逻辑
              this.$emit("submit", submitData);
              this.handleClose();
            } else {
              this.$message.error(res.msg || '保存失败');
            }
          } catch (error) {
            console.error('保存失败：', error);
            this.$message.error('保存失败，请重试');
          }
        }
      });
    },