对接评定接口和中台待办事项

董国庆

2025-06-25 d8d68a0aee93073b5ec3195368ca0ed1076f66a2

 laboratory/src/components/DynamicComponent/addTableData.vue

@@ -1,6 +1,6 @@
<template>
  <el-dialog
    title="添加表数据"
    :title="isEdit? '编辑表数据' : '添加表数据'"
    :visible.sync="dialogVisible"
    width="60%"
    :close-on-click-modal="false"
@@ -53,16 +53,18 @@
                >
                  <el-upload
                    class="upload-demo"
                    action="#"
                    :file-list="spectrumList"
                    :auto-upload="false"
                    :action="uploadUrl"
                    :headers="uploadHeaders"
                    :file-list="imageList"
                    :auto-upload="true"
                    list-type="picture-card"
                    :on-change="handleSpectrumChange"
                    :on-remove="handleSpectrumRemove"
                    :on-change="handleImageChange"
                    :on-remove="handleImageRemove"
                    :on-success="handleImageSuccess"
                    :on-preview="handlePreview"
                    :disabled="!checkEditPermission(header)"
                  >
                    <i class="el-icon-plus"></i>
                    <!-- <div slot="tip" class="el-upload__tip">暂未连接服务器，使用默认图片</div> -->
                  </el-upload>
                </el-form-item>
                <el-form-item
@@ -140,11 +142,16 @@
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
    <el-dialog :visible.sync="imagePreviewVisible" append-to-body>
      <img width="100%" :src="imagePreviewUrl" alt="" />
    </el-dialog>
  </el-dialog>
</template>
  
<script>
import { listByRole } from './service';
import { getFullUrl } from '@/utils/utils';
import apiConfig from '@/utils/baseurl';

export default {
  name: "AddDialog",
@@ -173,9 +180,15 @@
      form: {},
      rules: {},
      photoList: [],
      spectrumList: [],
      imageList: [],
      defaultImageUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', // 默认图片地址
      userOptions: []
      userOptions: [],
      imagePreviewVisible: false,
      imagePreviewUrl: '',
      uploadUrl: apiConfig.imgUrl,
      uploadHeaders: {
        Authorization: sessionStorage.getItem('token') || ''
      }
    };
  },
  computed: {
@@ -318,14 +331,13 @@
      }

      // 设置图谱列表
      if (data.spectrums && data.spectrums.length) {
        this.spectrumList = data.spectrums.map((spectrum) => ({
          name: spectrum.name,
          url: spectrum.url,
          status: "success",
        }));
      } else {
        this.spectrumList = [];
      this.imageList = [];
      const imageHeader = this.headerList.find(h => h.type === 'image');
      if (imageHeader && data[imageHeader.name]) {
        this.imageList = [{
          name: 'image',
          url: getFullUrl(data[imageHeader.name]),
        }];
      }

      // 重置表单校验状态
@@ -346,7 +358,7 @@
      this.dialogVisible = false;
      this.$refs.form?.resetFields();
      this.photoList = [];
      this.spectrumList = [];
      this.imageList = [];
      this.initFormData();
    },
    handleSubmit() {
@@ -356,7 +368,6 @@
          const submitData = {
            ...this.form,
            photos: this.photoList,
            spectrums: this.spectrumList,
          };
          
          // 为用户类型字段添加用户完整信息
@@ -380,32 +391,41 @@
        }
      });
    },
    handlePhotoChange(file, fileList) {
      this.photoList = fileList;
      this.$refs.form.validateField("photos");
    },
    handleSpectrumChange(file, fileList) {
      // 使用默认图片替代实际上传
      this.spectrumList = [{
        name: '默认图片.jpg',
        url: this.defaultImageUrl,
        status: 'success'
      }];
      
      // 同时更新form中对应的字段值以通过表单验证
    handleImageChange(file, fileList) {
      this.imageList = fileList;
      const imageHeader = this.headerList.find(h => h.type === 'image');
      if (imageHeader && imageHeader.name) {
        // 保存图片URL，这样在表格中可以直接使用
        this.$set(this.form, imageHeader.name, this.defaultImageUrl);
        console.log('设置图片字段:', imageHeader.name, this.defaultImageUrl);
      if (imageHeader) {
        this.$refs.form.validateField(imageHeader.name);
      }
      
      this.$refs.form.validateField("spectrums");
    },
    handleSpectrumRemove(file) {
      this.spectrumList = [];
    handleImageSuccess(res, file, fileList) {
      console.log('res, file, fileList',res, file, fileList)
      const url = res.msg;
      file.url = getFullUrl(url);
      const imageHeader = this.headerList.find(h => h.type === 'image');
      if (imageHeader) {
        this.$set(this.form, imageHeader.name, url);
        this.$refs.form.validateField(imageHeader.name);
      }
      this.imageList = fileList.map(f => {
        if (f.uid === file.uid) {
          return file;
        }
        return f;
      });
    },

    handleImageRemove(file, fileList) {
      const imageHeader = this.headerList.find(h => h.type === 'image');
      if (imageHeader) {
        this.$set(this.form, imageHeader.name, '');
      }
      this.imageList = fileList;
    },
    handlePreview(file) {
      this.imagePreviewUrl = file.url;
      this.imagePreviewVisible = true;
    },
    getFullUrl,
  },
  mounted() {
    // 获取用户列表数据