修改bug

董国庆

2025-06-20 0204d3e40681c2a4f50df373012d8cb226d98966

修改bug

 laboratory/src/App.vue

@@ -113,6 +113,16 @@
  border-color: #009688 !important;
  background: #e6ffff !important;
}
.el-form {
  .el-date-editor--daterange{
    .el-range-separator{
      width: 30px;
    }
    .el-input__inner {
    width: 220px !important;
  }
  }
}

.card-custom {
  .el-form {
@@ -122,31 +132,35 @@
      line-height: 14px;
    }


    .el-input__inner {
      width: 290px;
      width: 290px !important;
      padding: 0 12px;
      border-radius: 6px;
      border: 1px solid rgba(0, 0, 0, 0.15);
    }

    .el-date-editor {
      .el-range-separator{

      .el-range-editor--small .el-range-separator {
        width: 22px;
      }

      .el-input__inner {
        width: 260px;
        width: 240px !important;
        padding: 0 12px 0 30px;
        border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, 0.15);
      }

    }

    .el-pagination__sizes {
      .el-input__inner {
        width: 100px;
      }
    }

    .el-pagination__jump {
      .el-input__inner {
        width: 50px;
@@ -162,7 +176,7 @@
    .el-input__inner {
      width: 200px;
    }
    


    .el-pagination__sizes {
      .el-input__inner {
@@ -178,6 +192,10 @@
  }
}





.el-dialog {
  border-radius: 16px 16px 6px 6px;


 laboratory/src/components/AiEditor/index.vue

@@ -7,6 +7,8 @@
<script>
import { AiEditor } from "aieditor";
import 'aieditor/dist/style.css'
// import { customUploadRequest, getFullUrl } from '@/utils/utils'
import apiConfig from '@/utils/baseurl'

export default {
  name: 'AiEditor',
@@ -101,7 +103,110 @@
        // 禁用调整大小功能
        resize: false,
        // 添加唯一标识
        id: `editor-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
        id: `editor-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
        // 自定义图片上传功能
        image: {
          uploadUrl: apiConfig.imgUrl,
          uploadHeaders: {
            Authorization: sessionStorage.getItem('token') || '',
            // ...headers
          },
          uploader: (file, uploadUrl, headers, formName = 'file') => {
            const formData = new FormData();
            formData.append('file', file);
            return new Promise((resolve, reject) => {
              fetch(apiConfig.imgUrl, {
                method: "post",
                headers: { 'Accept': 'application/json', ...headers },
                body: formData,
              }).then((resp) => resp.json())
                .then(json => {
                  let data = {
                    "errorCode": 0,
                    "data": {
                      "src": apiConfig.showImgUrl + json.msg,
                      "alt": "图片 alt"
                    }
                  }
                  resolve(data);
                }).catch((error) => {
                  console.log('error error', error)
                  // reject(error);
                })
            });
          },
        },
        video: {
          uploadUrl: apiConfig.imgUrl,
          uploadFormName: "video", //上传时的文件表单名称
          uploadHeaders: {
            Authorization: sessionStorage.getItem('token') || '',
          },
          uploader: (file, uploadUrl, headers, formName = 'file') => {
            const formData = new FormData();
            formData.append('file', file);
            return new Promise((resolve, reject) => {
              fetch(apiConfig.imgUrl, {
                method: "post",
                headers: { 'Accept': 'application/json', ...headers },
                body: formData,
              }).then((resp) => resp.json())
                .then(json => {
                  let data = {
                    "errorCode": 0,
                    "data": {
                      "src": apiConfig.showImgUrl + json.msg,
                      "poster": "http://your-domain.com/poster.jpg"
                    }
                  }
                  resolve(data);
                }).catch((error) => {
                  console.log('error error', error)
                  // reject(error);
                })
            });
          },

        },
        attachment: {
          uploadUrl: apiConfig.imgUrl,
          uploadFormName: "attachment", //上传时的文件表单名称
          // uploadHeaders: {
          //     "jwt": "xxxxx",
          //     "other": "xxxx",
          // },
          uploadHeaders: () => {
            return {
              Authorization: sessionStorage.getItem('token') || '',
            }
          },
          uploader: (file, uploadUrl, headers, formName = 'file') => {
            const formData = new FormData();
            formData.append('file', file);
            return new Promise((resolve, reject) => {
              fetch(apiConfig.imgUrl, {
                method: "post",
                headers: { 'Accept': 'application/json', ...headers },
                body: formData,
              }).then((resp) => resp.json())
                .then(json => {
                  let data = {
                    "errorCode": 0,
                    "data": {
                      "href": apiConfig.showImgUrl + json.msg,
                      "fileName": file.name
                    }
                  }
                  resolve(data);
                }).catch((error) => {
                  console.log('error error', error)
                  // reject(error);
                })
            });
          },

        },

      }

      try {

 laboratory/src/components/DynamicComponent/index.vue

@@ -36,7 +36,7 @@
                <!-- 图片类型显示 -->
                <template v-else-if="header.type === 'image'">
                  <img v-if="scope.row[header.name]" 
                       :src="scope.row[header.name]" 
                       :src="getFullUrl(scope.row[header.name])" 
                       alt="头像" 
                       class="table-image" />
                </template>
@@ -57,8 +57,10 @@
        </div>
        <!-- 文件上传 -->
        <div v-else-if="item.type == 'fileUpload'">
          <el-upload v-if="editable" action="#" :file-list="item.data.fileList"
            :on-change="(file, fileList) => handleFileChange(idx, fileList)" list-type="text">
          <el-upload v-if="editable" :http-request="customUploadRequest" :file-list="item.data.fileList"
            :on-change="(file, fileList) => handleFileChange(idx, fileList)"
            :on-success="(res, file, fileList) => handleFileSuccess(res, file, fileList, idx)"
            list-type="text">
            <el-button size="small" icon="el-icon-upload2">点击上传</el-button>
          </el-upload>
          <div v-else>
@@ -70,11 +72,10 @@
        <!-- 图片上传 -->
        <div v-else-if="item.type == 'imageUpload'">
          <div class="image-upload-container">
            <el-upload v-if="editable" action="#" :file-list="item.data.imageList"
            <el-upload v-if="editable" :http-request="customUploadRequest" :file-list="item.data.imageList"
              :on-change="(file, fileList) => handleImageChange(idx, fileList)"
              :on-success="(res, file, fileList) => handleImageSuccess(res, file, fileList, idx)"
              :auto-upload="true"
              :http-request="() => { }"
              :before-upload="beforeImageUpload"
              list-type="picture-card"
              :on-preview="(file) => handlePreview(file, idx)"
@@ -85,8 +86,8 @@
            <div v-else class="image-preview">
              <el-image v-for="image in item.data.imageList"
                :key="image.uid"
                :src="image.url"
                :preview-src-list="item.data.imageList.map(img => img.url)"
                :src="getFullUrl(image.url)"
                :preview-src-list="item.data.imageList.map(img => getFullUrl(img.url))"
                class="preview-image" />
            </div>
            <div class="uploaf-notice">支持.jpg .png格式</div>
@@ -116,6 +117,8 @@
import Table from "../Table/index.vue";
import addTableHeader from "./addTableHeader.vue";
import addTableData from "./addTableData.vue";
import apiConfig from '../../utils/baseurl'
import { customUploadRequest, getFullUrl } from '@/utils/utils'

export default {
  name: "DynamicComponent",
@@ -150,6 +153,7 @@
  },
  data() {
    return {
      apiConfig:apiConfig,
      showAddDialog: false,
      components: [],
      tableHeaderDialog: {
@@ -439,34 +443,27 @@
    },
    handleFileChange(idx, fileList) {
      if (!this.editable) return;

      fileList = fileList.map(file => {
        if (!file.url) {
          file.url = 'https://picsum.photos/200/200';
        }
        if (!file.name) {
          file.name = '默认文件.txt';
        }
        return file;
      });
      // 只做 fileList 同步
      this.components[idx].data.fileList = fileList;
      this.emitUpdate();
    },
    handleFileSuccess(res, file, fileList, idx) {
      // 上传成功后设置真实 url
      file.url = res.data.url;
      this.components[idx].data.fileList = fileList;
      this.emitUpdate();
    },
    handleImageChange(idx, fileList) {
      if (!this.editable) return;

      fileList = fileList.map(file => {
        if (!file.url) {
          file.url = 'https://picsum.photos/200/200';
        }
        return file;
      });
      // 只做 imageList 同步
      this.components[idx].data.imageList = fileList;
      this.emitUpdate();
    },
    handleImageSuccess(res, file, fileList, idx) {
      file.url = 'https://picsum.photos/200/200';
      // 上传成功后设置真实 url
      file.url = res.data.url;
      this.components[idx].data.imageList = fileList;
      this.emitUpdate();
    },
    beforeImageUpload(file) {
      const isJPG = file.type === 'image/jpeg';
@@ -487,7 +484,7 @@
      // 使用el-image的preview-src-list实现预览
      // 这里直接用Element的图片预览能力，实际上el-upload会自动处理
      // 但如果你想自定义弹窗，可以用如下代码：
      this.imagePreviewUrl = file.url;
      this.imagePreviewUrl = this.getFullUrl(file.url);
      this.imagePreviewVisible = true;
    },
    emitUpdate() {
@@ -496,6 +493,8 @@
      this.$emit('update:dataSource', updatedComponents);
    },
  },
  computed: {
  },
};
</script>


 laboratory/src/utils/baseurl.js

@@ -2,7 +2,8 @@
    // 开发环境
    development: {
        baseURL: "http://192.168.110.34:8081",
        imgUrl: "",
        imgUrl: "http://192.168.110.34:8081/open/file/upload",
        showImgUrl:'http://192.168.110.34:11222/'
    },
    // 生产环境
    production: {

 laboratory/src/utils/request.js

@@ -19,12 +19,14 @@

    if (config.method == 'get') {
      if (!config.params) config.params = {};
      console.log('请求数据',config.params)
      config.params = {
        ...config.params,
      }
    }
    if (config.method == 'post') {
      if (!config.data) config.data = {};
      console.log('请求数据',config.data)
      if (needEncrypt) {
        config.data = { param: encryptBySM4(config.data) };
      }

 laboratory/src/utils/utils.js

@@ -1,3 +1,6 @@
import axios from 'axios';
import apiConfig from './baseurl';

export const customRequest = (params) => {
  const { file, onSuccess, onError } = params;
  uploadObs(file)
@@ -7,4 +10,30 @@
    .catch((ret) => {
      onError();
    });
};
};

export const customUploadRequest = ({ file, onSuccess, onError, action, headers }) => {
  // 默认 action 为 apiConfig.imgUrl
  const uploadUrl = action || apiConfig.imgUrl;
  // 默认 headers 带上 Authorization
  const uploadHeaders = {
    Authorization: sessionStorage.getItem('token') || '',
    ...headers
  };
  const formData = new FormData();
  formData.append('file', file);

  axios.post(uploadUrl, formData, { headers: uploadHeaders })
    .then(res => {
      onSuccess(res.data);
    })
    .catch(err => {
      onError(err);
    });
};

export function getFullUrl(url) {
  if (!url) return '';
  if (/^https?:\/\//.test(url)) return url;
  return apiConfig.showImgUrl + url;
}