Commit 93e93adc by liangjianmin

feat(orderTrack): 新增合同上传弹窗及上传功能

- 新增“新增合同”弹窗组件,支持选择并上传PDF格式合同文件
- 添加表单验证,确保只能上传PDF格式文件
- 实现上传成功和失败的消息提示及处理逻辑
- 上传成功后自动关闭弹窗并刷新页面数据
- 扩展组件依赖,增加element-ui中Form和FormItem的使用
- 新增相关状态数据和方法,管理弹窗显示和文件列表清理
parent 71610a0f
Showing with 64 additions and 3 deletions
......@@ -115,6 +115,21 @@
</div>
</div>
<!-- 新增合同弹窗 -->
<el-dialog title="新增合同" :visible.sync="addContractDialogVisible" width="500px" :before-close="closeAddContractDialog">
<el-form :model="addContractForm" label-width="80px">
<el-form-item label="合同文件" required>
<el-upload ref="contractUpload" :headers="{ Authorization: 'Bearer ' + token }" :action="addContractUrl" :data="{ purchase_id: id }" :on-success="handleAddContractSuccess" :on-error="handleAddContractError" :before-upload="beforeAddContractUpload" :file-list="addContractFileList" accept=".pdf" :limit="1">
<el-button type="primary">选择文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传PDF文件</div>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="closeAddContractDialog">关闭</el-button>
</div>
</el-dialog>
<!-- 签署合同弹窗 -->
<el-dialog title="签署合同" :visible.sync="signDialogVisible" width="900px" :before-close="closeSignDialog">
<div class="sign-contract-content" @scroll="handleScroll" ref="contractContent">
......@@ -321,13 +336,13 @@
import Vue from 'vue';
import Tool from '../../tool'
import Menu from "@/components/menu.vue";
import { Col, Message, MessageBox, Pagination, Row, Table, TableColumn, Select, Option, Link, Upload, Tooltip, Dialog } from 'element-ui';
import { Col, Message, MessageBox, Pagination, Row, Table, TableColumn, Select, Option, Link, Upload, Tooltip, Dialog, Form, FormItem } from 'element-ui';
import { NODE_ENVS } from "../../ajax";
Vue.prototype.$message = Message;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.use(Pagination);
Vue.use(TableColumn).use(Table).use(Row).use(Col).use(Select).use(Option).use(Link).use(Upload).use(Tooltip).use(Dialog);
Vue.use(TableColumn).use(Table).use(Row).use(Col).use(Select).use(Option).use(Link).use(Upload).use(Tooltip).use(Dialog).use(Form).use(FormItem);
export default {
name: "orderTrackGoodsDetail",
data() {
......@@ -349,7 +364,12 @@
},
signDialogVisible: false,
signContractData: {},
disabled: true
disabled: true,
// 新增合同相关数据
addContractDialogVisible: false,
addContractForm: {},
addContractUrl: NODE_ENVS + '/api/purchase/addContract',
addContractFileList: []
};
},
created() {
......@@ -412,7 +432,48 @@
},
// 新增合同
addContract() {
this.addContractDialogVisible = true;
this.addContractFileList = [];
},
// 关闭新增合同弹窗
closeAddContractDialog() {
this.addContractDialogVisible = false;
this.addContractFileList = [];
this.$refs.contractUpload.clearFiles();
},
// 上传前验证
beforeAddContractUpload(file) {
var isPdf = file.type === 'application/pdf';
if (!isPdf) {
this.$message.error('上传文件只能是 PDF 格式!');
return false;
}
return true;
},
// 上传成功回调
handleAddContractSuccess(response, file, fileList) {
if (response.code === 0) {
this.$message({
message: '合同上传成功',
type: 'success'
});
this.closeAddContractDialog();
this.getData(); // 刷新页面数据
} else {
this.$message({
message: response.msg || '上传失败',
type: 'error'
});
}
},
// 上传失败回调
handleAddContractError(err, file, fileList) {
this.$message({
message: '上传失败,请重试',
type: 'error'
});
},
//下载猎芯合同
downloadContract() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment