375 lines
14 KiB
Vue
375 lines
14 KiB
Vue
|
<template>
|
||
|
|
<div class="container">
|
||
|
|
<el-form ref="elForm" :model="formData" :rules="rules" size="mini" label-width="100px">
|
||
|
|
<el-form-item v-if="false" label="报价单Id" prop="quotId">
|
||
|
|
<el-input v-model="formData.quotId" placeholder="报价单Id" readonly clearable
|
||
|
|
></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="报价单单号" prop="quotCode">
|
||
|
|
<el-input v-model="formData.quotCode" placeholder="报价单单号(自动生成)" readonly clearable
|
||
|
|
></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="客户" prop="quotCustomerName">
|
||
|
|
<el-input readonly v-model="formData.quotCustomerName" placeholder="请输入客户" >
|
||
|
|
<template slot="append">
|
||
|
|
<span @click="openCustomer">选择</span>
|
||
|
|
</template>
|
||
|
|
</el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="地址" prop="quotAddress">
|
||
|
|
<el-input v-model="formData.quotAddress" placeholder="请输入地址" clearable>
|
||
|
|
</el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="审核人" prop="quotCheckUserNickname">
|
||
|
|
<el-input readonly v-model="formData.quotCheckUserNickname" placeholder="审核人" clearable
|
||
|
|
></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="提交状态" prop="quotApprovalStatus">
|
||
|
|
<el-input readonly v-model="formData.quotApprovalStatus" placeholder="保存后显示" clearable
|
||
|
|
></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="项目名称" prop="quotProject">
|
||
|
|
<el-input v-model="formData.quotProject" placeholder="请输入项目名称" clearable >
|
||
|
|
</el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="报价要求" prop="quotQuotationRequire">
|
||
|
|
<el-input v-model="formData.quotQuotationRequire" placeholder="请输入报价要求" clearable
|
||
|
|
></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="联系电话" prop="quotPhone">
|
||
|
|
<el-input v-model="formData.quotPhone" placeholder="请输入联系电话" clearable >
|
||
|
|
</el-input>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
|
||
|
|
<el-divider content-position="left" class="customer_divider_text">询价附件(先保存)</el-divider>
|
||
|
|
<div v-hasPermi="['quot:quot:quotXjFile']">
|
||
|
|
<el-upload class="upload-demo"
|
||
|
|
ref="upload"
|
||
|
|
name="quotFile"
|
||
|
|
:action="uploadUrl"
|
||
|
|
:headers="headers"
|
||
|
|
:data="{ relation_id: this.formData.quotId,file_type: 'quotXjFile' }"
|
||
|
|
:on-success="handleAvatarSuccess"
|
||
|
|
:show-file-list="false"
|
||
|
|
:limit="1"
|
||
|
|
v-if="this.form.quotApprovalStatus == '0'">
|
||
|
|
<el-button size="small" type="primary" @click="uploadFile('quotXjFile')">上传文件</el-button>
|
||
|
|
</el-upload>
|
||
|
|
</div>
|
||
|
|
<el-table class="down" :data="quotXjFileList" border stripe style="width: 100%;margin-top: 10px;" height="200px">
|
||
|
|
<el-table-column prop="fileName" label="文件名称" ></el-table-column>
|
||
|
|
<el-table-column width="150px" label="操作">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-button :key="Math.random()" size="small" type="text">
|
||
|
|
<a @click="downloadFile(scope.row.fileUrl)">下载</a>
|
||
|
|
</el-button>
|
||
|
|
<el-button :key="Math.random()" size="small" type="text" v-if="form.quotApprovalStatus == '0'">
|
||
|
|
<a @click="deleteFile(scope.row.fileId,'quotXjFile')">删除</a>
|
||
|
|
</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
|
||
|
|
<el-divider content-position="left" class="customer_divider_text">技术规范要求(询价附件)</el-divider>
|
||
|
|
<div v-hasPermi="['quot:quot:quotXjFile']">
|
||
|
|
<el-upload class="upload-demo"
|
||
|
|
ref="upload"
|
||
|
|
name="quotFile"
|
||
|
|
:action="uploadUrl"
|
||
|
|
:headers="headers"
|
||
|
|
:data="{ relation_id: this.formData.quotId,file_type: 'quotXjFile' }"
|
||
|
|
:on-success="handleAvatarSuccess"
|
||
|
|
:show-file-list="false"
|
||
|
|
:limit="1"
|
||
|
|
v-if="this.form.quotApprovalStatus == '0'">
|
||
|
|
<el-button size="small" type="primary" @click="uploadFile('quotXjFile')">上传文件</el-button>
|
||
|
|
</el-upload>
|
||
|
|
</div>
|
||
|
|
<el-table class="down" :data="quotXjFileList" border stripe style="width: 100%;margin-top: 10px;" height="200px">
|
||
|
|
<el-table-column prop="fileName" label="文件名称" ></el-table-column>
|
||
|
|
<el-table-column width="150px" label="操作">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-button :key="Math.random()" size="small" type="text">
|
||
|
|
<a @click="downloadFile(scope.row.fileUrl)">下载</a>
|
||
|
|
</el-button>
|
||
|
|
<el-button :key="Math.random()" size="small" type="text" v-if="form.quotApprovalStatus == '0'">
|
||
|
|
<a @click="deleteFile(scope.row.fileId,'quotXjFile')">删除</a>
|
||
|
|
</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
|
||
|
|
<el-divider content-position="left" class="customer_divider_text">反馈附件</el-divider>
|
||
|
|
<div v-hasPermi="['quot:quot:quotXjFile']">
|
||
|
|
<el-upload class="upload-demo"
|
||
|
|
ref="upload"
|
||
|
|
name="quotFile"
|
||
|
|
:action="uploadUrl"
|
||
|
|
:headers="headers"
|
||
|
|
:data="{ relation_id: this.formData.quotId,file_type: 'quotXjFile' }"
|
||
|
|
:on-success="handleAvatarSuccess"
|
||
|
|
:show-file-list="false"
|
||
|
|
:limit="1"
|
||
|
|
v-if="this.form.quotApprovalStatus == '0'">
|
||
|
|
<el-button size="small" type="primary" @click="uploadFile('quotXjFile')">上传文件</el-button>
|
||
|
|
</el-upload>
|
||
|
|
</div>
|
||
|
|
<el-table class="down" :data="quotXjFileList" border stripe style="width: 100%;margin-top: 10px;" height="200px">
|
||
|
|
<el-table-column prop="fileName" label="文件名称" ></el-table-column>
|
||
|
|
<el-table-column width="150px" label="操作">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-button :key="Math.random()" size="small" type="text">
|
||
|
|
<a @click="downloadFile(scope.row.fileUrl)">下载</a>
|
||
|
|
</el-button>
|
||
|
|
<el-button :key="Math.random()" size="small" type="text" v-if="form.quotApprovalStatus == '0'">
|
||
|
|
<a @click="deleteFile(scope.row.fileId,'quotXjFile')">删除</a>
|
||
|
|
</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
|
||
|
|
|
||
|
|
<el-form-item style="margin-top: 15px">
|
||
|
|
<el-button @click="saveForm">保存</el-button>
|
||
|
|
<el-button style="margin: 0px 15px 0px 20px" type="primary" @click="submitForm">提交</el-button>
|
||
|
|
<el-button @click="resetForm">重置</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<CustomerSelect :width="100 + '%'" ref="customerSelect" :open="customerOpen" @submit="submitCustomer" @cancel="customerOpen=false"></CustomerSelect>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import CustomerSelect from "@/views/components/Tools/Mobile/CustomerSelect/index.vue";
|
||
|
|
import { NumberAdd } from '@/utils/number';// 数值计算
|
||
|
|
import { changQuotPrintStatus,listQuot, getQuot, getReturnUpdateQuot, delQuot, addQuot, updateQuot, quotFileList, quotFileDelete, commitQuot, commitJsQuot, commitHjQuot, commitJswQuot, commitOAQuot, feedbackQuot, madeQuot, rejectQuot } from "@/api/quot/quot";
|
||
|
|
import { getToken } from "@/utils/auth";
|
||
|
|
import { checkPermi,checkRole } from '@/utils/permission';// 权限判断函数
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
// 注册组件
|
||
|
|
'CustomerSelect': CustomerSelect,
|
||
|
|
},
|
||
|
|
props: [],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
// 表单参数
|
||
|
|
form: {},
|
||
|
|
// 报价单-询价附件列表数据
|
||
|
|
quotXjFileList: [],
|
||
|
|
// 报价单-反馈附件列表数据
|
||
|
|
quotFkFileList: [],
|
||
|
|
// 报价单-技术规范附件列表数据
|
||
|
|
quotJsgfFileList: [],
|
||
|
|
//报价单-询价附件上传地址
|
||
|
|
uploadUrl: process.env.VUE_APP_BASE_API + "/quot/quot/quotFile",
|
||
|
|
//报价单-询价附件请求头
|
||
|
|
headers: {Authorization: "Bearer " + getToken()},
|
||
|
|
//是否打开客户选择组件，默认不打开
|
||
|
|
customerOpen:false,
|
||
|
|
formData: {
|
||
|
|
quotId: null,
|
||
|
|
quotCode: '',
|
||
|
|
quotCustomerName: '',
|
||
|
|
quotAddress: '',
|
||
|
|
quotCheckUserNickname: '',
|
||
|
|
quotProject: '',
|
||
|
|
quotQuotationRequire: '',
|
||
|
|
quotPhone: '',
|
||
|
|
quotQuotationFrom: '',
|
||
|
|
quotPrintUserName: '',
|
||
|
|
field115: null,
|
||
|
|
field116: null,
|
||
|
|
},
|
||
|
|
rules: {
|
||
|
|
quotAddress: [{
|
||
|
|
required: true,
|
||
|
|
message: '请输入地址',
|
||
|
|
trigger: 'blur'
|
||
|
|
}],
|
||
|
|
quotProject: [{
|
||
|
|
required: true,
|
||
|
|
message: '请输入项目名称',
|
||
|
|
trigger: 'blur'
|
||
|
|
}],
|
||
|
|
quotQuotationRequire: [{
|
||
|
|
required: true,
|
||
|
|
message: '请输入报价要求',
|
||
|
|
trigger: 'blur'
|
||
|
|
}],
|
||
|
|
quotPhone: [{
|
||
|
|
required: true,
|
||
|
|
message: '请输入联系电话',
|
||
|
|
trigger: 'blur'
|
||
|
|
}],
|
||
|
|
quotQuotationFrom: [{
|
||
|
|
required: true,
|
||
|
|
message: '请输入报价来源',
|
||
|
|
trigger: 'blur'
|
||
|
|
}],
|
||
|
|
},
|
||
|
|
field115Action: 'https://jsonplaceholder.typicode.com/posts/',
|
||
|
|
field115fileList: [],
|
||
|
|
field116Action: 'https://jsonplaceholder.typicode.com/posts/',
|
||
|
|
field116fileList: [],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {},
|
||
|
|
watch: {},
|
||
|
|
created() {},
|
||
|
|
mounted() {},
|
||
|
|
methods: {
|
||
|
|
//下载附件
|
||
|
|
downloadFile(fileUrl){
|
||
|
|
window.open(fileUrl, "_blank");
|
||
|
|
},
|
||
|
|
|
||
|
|
//删除附件
|
||
|
|
deleteFile(fileId,activeName){
|
||
|
|
//let activeName = this.activeName;
|
||
|
|
quotFileDelete(fileId).then(response => {
|
||
|
|
if(activeName=='quotXjFile'){
|
||
|
|
this.getQuotXjFileList();
|
||
|
|
}else if(activeName=='quotJsInfo'){
|
||
|
|
this.getQuotJsgfFileList();
|
||
|
|
}else if(activeName=='quotFkFile'){
|
||
|
|
this.getQuotFkFileList();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
//点击上传附件按钮触发事件
|
||
|
|
uploadFile(activeName){
|
||
|
|
this.activeName = activeName
|
||
|
|
},
|
||
|
|
//成功回调
|
||
|
|
handleAvatarSuccess(res) {
|
||
|
|
let activeName = this.activeName;
|
||
|
|
// 如果上传成功
|
||
|
|
if (res.code == 200) {
|
||
|
|
this.$modal.msgSuccess(res.msg);
|
||
|
|
if(activeName=='quotXjFile'){
|
||
|
|
this.getQuotXjFileList();
|
||
|
|
}else if(activeName=='quotJsInfo'){
|
||
|
|
this.getQuotJsgfFileList();
|
||
|
|
}else if(activeName=='quotFkFile'){
|
||
|
|
this.getQuotFkFileList();
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
this.$modal.msgError(res.msg);
|
||
|
|
}
|
||
|
|
this.$refs.upload.clearFiles(); //上传成功之后清除历史记录**加粗样式**
|
||
|
|
},
|
||
|
|
submitForm() {
|
||
|
|
this.$refs['elForm'].validate(valid => {
|
||
|
|
if (!valid) return
|
||
|
|
// TODO 提交表单
|
||
|
|
})
|
||
|
|
},
|
||
|
|
resetForm() {
|
||
|
|
this.$refs['elForm'].resetFields()
|
||
|
|
},
|
||
|
|
field115BeforeUpload(file) {
|
||
|
|
let isRightSize = file.size / 1024 / 1024 < 2
|
||
|
|
if (!isRightSize) {
|
||
|
|
this.$message.error('文件大小超过 2MB')
|
||
|
|
}
|
||
|
|
return isRightSize
|
||
|
|
},
|
||
|
|
field116BeforeUpload(file) {
|
||
|
|
let isRightSize = file.size / 1024 / 1024 < 100
|
||
|
|
if (!isRightSize) {
|
||
|
|
this.$message.error('文件大小超过 100MB')
|
||
|
|
}
|
||
|
|
return isRightSize
|
||
|
|
},
|
||
|
|
//打开客户选择弹窗
|
||
|
|
openCustomer(){
|
||
|
|
this.customerOpen=true;
|
||
|
|
},
|
||
|
|
//客户选择确定按钮事件
|
||
|
|
submitCustomer(customer){
|
||
|
|
this.formData.quotCustomerName = customer.label
|
||
|
|
this.customerOpen=false;
|
||
|
|
},
|
||
|
|
/** 修改按钮操作 */
|
||
|
|
handleUpdate(row) {
|
||
|
|
const quotId = row.quotId || this.ids
|
||
|
|
getQuot(quotId).then(response => {
|
||
|
|
this.setInfo(response);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
/** 修改按钮操作-详细信息设置 */
|
||
|
|
setInfo(response){
|
||
|
|
console.log(response)
|
||
|
|
this.formData = response.data;
|
||
|
|
// this.$set(this.form, "quotJsxzGroup", (this.form.quotJsxzGroupValues==''||this.form.quotJsxzGroupValues==null)?[]:this.form.quotJsxzGroupValues.split(','));
|
||
|
|
// this.quotMaterialList = response.data.quotMaterialList;
|
||
|
|
// this.open = true;
|
||
|
|
// this.activeName = "quotInfo";
|
||
|
|
//
|
||
|
|
// const quotJsxzGroup = this.form.quotJsxzGroupValues;
|
||
|
|
// if(quotJsxzGroup){
|
||
|
|
// if(quotJsxzGroup.indexOf("TL")!==-1){
|
||
|
|
// this.showTl = true;
|
||
|
|
// this.getQuotJsqrFileList('quotJsqrTlFkFile');
|
||
|
|
// }
|
||
|
|
// if(quotJsxzGroup.indexOf("DY")!==-1){
|
||
|
|
// this.showDy = true;
|
||
|
|
// this.getQuotJsqrFileList('quotJsqrDyFkFile');
|
||
|
|
// }
|
||
|
|
// if(quotJsxzGroup.indexOf("ZY")!==-1){
|
||
|
|
// this.showZy = true;
|
||
|
|
// this.getQuotJsqrFileList('quotJsqrZyFkFile');
|
||
|
|
// }
|
||
|
|
// if(quotJsxzGroup.indexOf("QT")!==-1){
|
||
|
|
// this.showQt = true;
|
||
|
|
// this.getQuotJsqrFileList('quotJsqrQtFkFile');
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// this.getQuotXjFileList();
|
||
|
|
// this.getQuotJsgfFileList();
|
||
|
|
// this.getQuotHjFileList();
|
||
|
|
// this.getQuotFkFileList();
|
||
|
|
},
|
||
|
|
|
||
|
|
/** 保存按钮 */
|
||
|
|
saveForm() {
|
||
|
|
this.$refs["elForm"].validate(valid => {
|
||
|
|
if (valid) {
|
||
|
|
if (this.formData.quotId != null) {
|
||
|
|
updateQuot(this.formData).then(response => {
|
||
|
|
this.$modal.msgSuccess("修改成功");
|
||
|
|
this.open = false;
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
addQuot(this.formData).then(response => {
|
||
|
|
this.$modal.msgSuccess("新增成功");
|
||
|
|
const row = {'quotId':response.data.quotId}
|
||
|
|
this.handleUpdate(row);
|
||
|
|
}) ;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
.small-upload .el-upload {
|
||
|
|
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-upload__tip {
|
||
|
|
line-height: 1.2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
margin: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|