fix: 修复多个页面样式、交互及路由问题

董国庆

2026-04-28 9dcad0c65f2564fc2fe43e21b23f9faf4a073d30

 laboratory/src/components/DynamicComponent/addTableData.vue

@@ -30,20 +30,28 @@
                  :prop="header.name"
                  :rules="[
                    {
                      required: header.required === true || header.required === 'true',
                      required:
                        (header.required === true ||
                          header.required === 'true') &&
                        isApprovaler,
                      message: header.message || `请输入${header.name}`,
                      trigger: ['blur', 'change'],
                    },
                    {
                      validator: (rule, value, callback) => {
                        if ((header.required === true || header.required === 'true') && (!value || value.trim() === '')) {
                        if (
                          (header.required === true ||
                            header.required === 'true') &&
                          (!value || value.trim() === '') &&
                          isApprovaler
                        ) {
                          callback(header.message || `请输入${header.name}`);
                        } else {
                          callback();
                        }
                      },
                      trigger: ['blur', 'change'],
                    }
                    },
                  ]"
                  v-if="header.type == 'text'"
                >
@@ -58,7 +66,9 @@
                  :prop="header.name"
                  :rules="{
                    required:
                      header.required === true || header.required === 'true',
                      (header.required === true ||
                        header.required === 'true') &&
                      isApprovaler,
                    trigger: ['blur', 'change'],
                  }"
                  class="image-form-item"
@@ -72,11 +82,25 @@
                    :auto-upload="true"
                    list-type="picture-card"
                    :before-upload="beforeImageUpload"
                    :on-change="(file, fileList) => handleImageChange(file, fileList, header.name)"
                    :on-remove="(file, fileList) => handleImageRemove(file, fileList, header.name)"
                    :on-success="(res, file, fileList) => handleImageSuccess(res, file, fileList, header.name)"
                    :on-change="
                      (file, fileList) =>
                        handleImageChange(file, fileList, header.name)
                    "
                    :on-remove="
                      (file, fileList) =>
                        handleImageRemove(file, fileList, header.name)
                    "
                    :on-success="
                      (res, file, fileList) =>
                        handleImageSuccess(res, file, fileList, header.name)
                    "
                    :on-error="
                      (err, file, fileList) =>
                        handleImageError(err, file, fileList, header.name)
                    "
                    :on-preview="handlePreview"
                    :disabled="!checkEditPermission(header)"
                    accept="image/*"
                    multiple
                  >
                    <div
@@ -88,7 +112,7 @@
                    >
                      <i class="el-icon-plus"></i>
                    </div>
                    <div slot="tip" class="el-upload__tip">只支持.jpg格式</div>
                    <div slot="tip" class="el-upload__tip">支持任意图片格式上传</div>
                  </el-upload>
                </el-form-item>
                <el-form-item
@@ -96,7 +120,9 @@
                  :prop="header.name"
                  :rules="{
                    required:
                      header.required === true || header.required === 'true',
                      (header.required === true ||
                        header.required === 'true') &&
                      isApprovaler,
                    message: header.message || `请输入${header.name}`,
                    trigger: ['blur', 'change'],
                  }"
@@ -141,7 +167,9 @@
                  :prop="header.name"
                  :rules="{
                    required:
                      header.required === true || header.required === 'true',
                      (header.required === true ||
                        header.required === 'true') &&
                      isApprovaler,
                    message: header.message || `请输入${header.name}`,
                    trigger: ['blur', 'change'],
                  }"
@@ -244,6 +272,10 @@
      const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
      return userInfo.userId;
    },
    isApprovaler() {
      const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
      return userInfo.roleType != 3; // 不是工艺工程师
    },
  },
  watch: {
    visible: {
@@ -277,6 +309,17 @@
    },
  },
  methods: {
    removeUploadItem(fileList, file) {
      const list = Array.isArray(fileList) ? fileList : [];
      const nextList = list.filter((item) => item.uid !== file.uid);
      const removeIndex = list.findIndex((item) => item.uid === file.uid);

      if (removeIndex > -1) {
        list.splice(removeIndex, 1);
      }

      return nextList;
    },
    getUserOptions() {
      listByRole()
        .then((res) => {
@@ -297,7 +340,8 @@
      if (!header.role || !Array.isArray(header.role)) {
        return true;
      }
      return header.role.includes(this.currentUserId);
      const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
      return header.role.includes(this.currentUserId) || (userInfo.roleType == 3);
    },
    initRules() {
      // 初始化校验规则
@@ -305,12 +349,24 @@
      if (this.headerList && this.headerList.length) {
        this.headerList.forEach((header) => {
          // 处理required可能是字符串的情况
          const userInfo = JSON.parse(
            sessionStorage.getItem("userInfo") || "{}"
          );
          const isRequired =
            header.required === true || header.required === "true";
            (header.required === true || header.required === "true") &&
            userInfo.roleType != 3;
          if (isRequired) {
            rules[header.name] = [
              {
                required: true,
                message: header.message || `请输入${header.name}`,
                trigger: ["blur", "change"],
              },
            ];
          }else{
            rules[header.name] = [
              {
                required: false,
                message: header.message || `请输入${header.name}`,
                trigger: ["blur", "change"],
              },
@@ -357,8 +413,20 @@
          if (header.type === "user") {
            formData[header.name] = data[header.name] || [];
          } else if (header.type === "image") {
            formData[header.name] = Array.isArray(data[header.name]) ? data[header.name] : (data[header.name] ? [data[header.name]] : []);
            this.$set(this.imageListMap, header.name, (formData[header.name] || []).map(url => ({ name: "image", url: getFullUrl(url), status: "success" })));
            formData[header.name] = Array.isArray(data[header.name])
              ? data[header.name]
              : data[header.name]
              ? [data[header.name]]
              : [];
            this.$set(
              this.imageListMap,
              header.name,
              (formData[header.name] || []).map((url) => ({
                name: "image",
                url: getFullUrl(url),
                status: "success",
              }))
            );
          } else {
            formData[header.name] = data[header.name] || "";
          }
@@ -415,7 +483,7 @@
      this.initFormData();
    },
    handleSubmit() {
      console.log('4444444444444')
      console.log("4444444444444");
      this.$refs.form.validate((valid) => {
        if (valid) {
          const submitData = {
@@ -451,11 +519,12 @@
      });
    },
    beforeImageUpload(file) {
      const isJPG = file.type === "image/jpeg";
      // const isLt2M = file.size / 1024 / 1024 < 2;
      const isImage =
        (file.type && file.type.startsWith("image/")) ||
        /\.(png|jpe?g|gif|bmp|webp|svg|ico|tiff?)$/i.test(file.name || "");

      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 格式!");
      if (!isImage) {
        this.$message.error("只能上传图片类型文件");
        return false;
      }
      return true;
@@ -466,18 +535,86 @@
      this.$refs.form && this.$refs.form.validateField(fieldName);
    },
    handleImageSuccess(res, file, fileList, fieldName) {
      if (!res || (res.code !== 200 && res.code !== "200") || !res.msg) {
        const errorMessage =
          (res && (res.msg || res.message)) || "图片上传失败";
        this.$message.error(errorMessage);
        file.status = "fail";
        file.url = "";
        const successFileList = this.removeUploadItem(fileList, file);
        this.$set(this.imageListMap, fieldName, successFileList);
        this.$set(
          this.form,
          fieldName,
          successFileList.map((f) =>
            f.url ? (f.url.startsWith("http") ? f.url : getFullUrl(f.url)) : ""
          )
        );
        this.$refs.form && this.$refs.form.validateField(fieldName);
        return;
      }

      const url = res.msg;
      file.url = getFullUrl(url);
      if (!Array.isArray(this.form[fieldName])) {
        this.$set(this.form, fieldName, []);
      }
      // 只保留 fileList 中的 url
      this.$set(this.form, fieldName, fileList.map(f => f.url ? (f.url.startsWith('http') ? f.url : getFullUrl(f.url)) : ''));
      this.$set(
        this.form,
        fieldName,
        fileList.map((f) =>
          f.url ? (f.url.startsWith("http") ? f.url : getFullUrl(f.url)) : ""
        )
      );
      this.$set(this.imageListMap, fieldName, fileList);
      this.$refs.form && this.$refs.form.validateField(fieldName);
    },
    handleImageError(err, file, fileList, fieldName) {
      let errorMessage = "图片上传失败";
      const rawMessage =
        (err &&
          (err.message ||
            err.response ||
            err.responseText ||
            (err.target && err.target.response))) ||
        "";

      if (typeof rawMessage === "string" && rawMessage) {
        try {
          const parsedMessage = JSON.parse(rawMessage);
          errorMessage =
            parsedMessage.msg || parsedMessage.message || errorMessage;
        } catch (e) {
          errorMessage = rawMessage;
        }
      }

      this.$message.error(errorMessage);
      file.status = "fail";
      file.url = "";
      const validFileList = this.removeUploadItem(
        (fileList || []).filter((item) => item.status !== "fail"),
        file
      );
      this.$set(this.imageListMap, fieldName, validFileList);
      this.$set(
        this.form,
        fieldName,
        validFileList.map((f) =>
          f.url ? (f.url.startsWith("http") ? f.url : getFullUrl(f.url)) : ""
        )
      );
      this.$refs.form && this.$refs.form.validateField(fieldName);
    },
    handleImageRemove(file, fileList, fieldName) {
      this.$set(this.form, fieldName, fileList.map(f => f.url ? (f.url.startsWith('http') ? f.url : getFullUrl(f.url)) : ''));
      this.$set(
        this.form,
        fieldName,
        fileList.map((f) =>
          f.url ? (f.url.startsWith("http") ? f.url : getFullUrl(f.url)) : ""
        )
      );
      this.$set(this.imageListMap, fieldName, fileList);
    },
    handlePreview(file) {