fix

13404089107

2025-04-11 eb296bfbd3f18dff5a2ee60b42f8415d51c897b9

 src/views/storing-data/components/UploadDialog.vue

@@ -1,23 +1,32 @@
<template>
  <el-dialog
    :title="type === 'add' ? '新增资料' : '编辑资料'"
    :title="type === 'add' ? '新增资料' : type === 'edit' ? '编辑资料' : '资料详情'"
    :visible.sync="dialogVisible"
    width="40%"
    @close="handleClose"
  >
    <el-form ref="uploadForm" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="镇(街道)" prop="batchNo">
        <el-input v-model="form.batchNo" placeholder="请输入" />
      <el-form-item label="镇(街道)" prop="street">
        <el-select :disabled="type === 'detail'" v-model="form.street" placeholder="请选择" @change="handleStreetChange">
          <el-option v-for="item in streetOptions" :key="item.dictCode" :label="item.dictLabel" :value="item.dictLabel"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="资料名称" prop="batchNo">
        <el-input v-model="form.batchNo" placeholder="请输入" />
      <el-form-item label="资料名称" prop="name">
        <el-input v-model="form.name" :disabled="type === 'detail'" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="资料文件" prop="file">
        <el-upload
          :disabled="type === 'detail'"
          ref="upload"
          class="upload-demo"
          drag
          action="#"
          :auto-upload="false"
          :action="baseUrl + '/common/upload'"
          :headers="{
            'Authorization': 'Bearer ' + token
          }"
          :file-list="fileList"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
          :on-change="handleFileChange"
          :limit="1"
        >
@@ -30,13 +39,16 @@
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitUpload">确 定</el-button>
      <el-button v-if="type !== 'detail'" type="primary" @click="submitUpload">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getToken } from '@/utils/auth'
import { add, update } from "@/api/storing-data";

export default {
  name: 'UploadDialog',
  props: {
@@ -47,21 +59,31 @@
    type: {
      type: String,
      default: 'add',
      validator: function(value) {
        return ['add', 'batch'].indexOf(value) !== -1
      }
    },
    streetOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      token: getToken(),
      dialogVisible: false,
      fileList: [],
      form: {
        batchNo: '',
        file: null
        street: '',
        name: '',
        file: null,
        attachName: '',
        attachUrl: ''
      },
      baseUrl: process.env.VUE_APP_BASE_API,
      rules: {
        batchNo: [
          { required: true, message: '请输入批次号', trigger: 'blur' }
        street: [
          { required: true, message: '请选择镇(街道)', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入资料名称', trigger: 'blur' }
        ],
        file: [
          { required: true, message: '请选择上传文件', trigger: 'change' }
@@ -79,35 +101,68 @@
  },
  methods: {
    handleClose() {
      this.form.batchNo = '';
      this.form.file = null;
      this.form = {
        street: '',
        name: '',
        file: null,
        attachName: '',
        attachUrl: ''
      };
      this.$refs.uploadForm && this.$refs.uploadForm.resetFields();
      // 清空文件列表
      this.$refs.upload && this.$refs.upload.clearFiles();
    },
    handleFileChange(file) {
      this.form.file = file.raw;
      this.form.attachName = file.name;
      // 手动触发文件字段验证
      this.$refs.uploadForm.validateField('file');
    },
    // 处理上传成功
    handleUploadSuccess(response, file) {
      if (response.code === 200) {
        this.form.attachUrl = response.url;
        this.$message.success('文件上传成功');
      } else {
        this.$message.error(response.msg || '文件上传失败');
      }
    },
    // 处理上传失败
    handleUploadError(err) {
      this.$message.error('文件上传失败');
    },
    submitUpload() {
      this.$refs.uploadForm.validate(valid => {
        if (!valid) {
          return;
        }
        
        // 这里添加实际的上传逻辑
        const formData = new FormData();
        formData.append('file', this.form.file);
        if (this.type === 'add') {
          formData.append('batchNo', this.form.batchNo);
        if (!this.form.attachUrl) {
          this.$message.error('请先上传文件');
          return;
        }
        // 构建提交数据
        const submitData = {
          street: this.form.street,
          name: this.form.name,
          attachName: this.form.attachName,
          attachUrl: this.form.attachUrl
        };

        // 模拟上传
        this.$message.info('正在上传，请稍候...');
        setTimeout(() => {
          this.$emit('success');
          this.handleClose();
        }, 1000);
        if (this.type === 'add') {
          add(submitData).then(res => {
            this.$emit('success', res.data);
            this.handleClose();
          });
        } else {
          update(submitData).then(res => {
            this.$emit('success', res.data);
            this.handleClose();
          });
        }
      });
    },
    handleStreetChange(value) {
      // 处理镇(街道)选择变化后的逻辑
    }
  }
}