443 lines
16 KiB
Vue
443 lines
16 KiB
Vue
<template>
|
||
<view>
|
||
<top-bar></top-bar>
|
||
<common-header></common-header>
|
||
<category-bar></category-bar>
|
||
|
||
<view class="page-nav">
|
||
<el-breadcrumb separator="/">
|
||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||
<el-breadcrumb-item>
|
||
<navigator style="display: inline-block;" url="/pages/enquiry/list">询价单</navigator>
|
||
</el-breadcrumb-item>
|
||
<el-breadcrumb-item>发布询价单</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
</view>
|
||
|
||
<view class="form-view">
|
||
|
||
<view class="m-20">
|
||
<view class="title-main">请填写询价单</view>
|
||
<view class="title-sub">询价信息越完整，供应商报价越精准</view>
|
||
|
||
<view class="form-type-box">
|
||
<view @click="form1.data.fillType = 0" :class="{active: form1.data.fillType == 0}" class="form-type-item">手动填写</view>
|
||
<view @click="form1.data.fillType = 1" :class="{active: form1.data.fillType == 1}" class="form-type-item">批量上传</view>
|
||
</view>
|
||
</view>
|
||
<!-- 手动填写 -->
|
||
<template v-if="form1.data.fillType == 0">
|
||
<view v-for="(item, index) in productList" :key="index">
|
||
<enquiry-template :ref="'product' + index" v-model="productList[index]" :base-attributes="baseAttributes" :productIndex="index"></enquiry-template>
|
||
</view>
|
||
</template>
|
||
<!-- 批量上传 -->
|
||
|
||
<view v-if="form1.data.fillType == 0" class="btn-add-outer">
|
||
<el-button @click="addProduct" type="primary" size="small">添加商品</el-button>
|
||
<el-button v-show="productList.length > 1" @click="removeProduct" type="warning" size="small">删除商品</el-button>
|
||
</view>
|
||
<vk-data-form ref="form1" v-model="form1.data" :action="form1.props.action" :columns="form1.props.columns"
|
||
:rules="form1.props.rules" :form-type="form1.props.formType" :loading.sync="form1.props.loading"
|
||
:before-action="form1.props.beforeAction" label-width="140px" cancel-text="保存草稿" submit-text="提交询价单"
|
||
@success="onFormSuccess" :footer-show="false">
|
||
<template v-slot:productCategoryIds="{ form, keyName }">
|
||
<el-form-item label="主要商品分类">
|
||
<el-tabs>
|
||
<el-tab-pane v-for="(item, index) in categoryTreeData" :label="item.name" :key="item._id">
|
||
<el-checkbox-group v-model="checkCategoryList[index]">
|
||
<el-checkbox v-for="(citem, cindex) in item.children" :label="citem"
|
||
:key="cindex">{{citem.name}}</el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</el-form-item>
|
||
<el-form-item label="已选分类">
|
||
<view class="tags">
|
||
<el-tag v-for="(item, index) in checkCategoryArr" :key="index">{{item.name}}</el-tag>
|
||
</view>
|
||
</el-form-item>
|
||
</template>
|
||
|
||
</vk-data-form>
|
||
<view class="form-footer">
|
||
<el-button type="" @click="draft">保存草稿</el-button>
|
||
<el-button type="primary" @click="submit">提交询价单</el-button>
|
||
</view>
|
||
<!-- <el-divider content-position="left">其他设置</el-divider> -->
|
||
</view>
|
||
|
||
|
||
|
||
<common-footer></common-footer>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { reject } from 'lodash';
|
||
import EnquiryTemplate from './components/template.vue'
|
||
export default {
|
||
components: {EnquiryTemplate},
|
||
data() {
|
||
return {
|
||
// 表单相关开始-----------------------------------------------------------
|
||
productList: [{}],
|
||
baseAttributes: [],
|
||
categoryTreeData: [],
|
||
checkCategoryList: [],
|
||
form1: {
|
||
// 表单请求数据，此处可以设置默认值
|
||
data: {
|
||
fillType: 0,
|
||
// extraAttributes: {},
|
||
// attributes: {},
|
||
invoice: false,
|
||
breachLiability: `1. 乙方所交产品品种、型号、规格、质量不符合规定的，如果甲方同意利用，应当按质论价；如果甲方不能利用的，应根据产品的具体情况，由乙方负责包换或包修，并承担修理、调换或退货而支付的实际费用；
|
||
2.乙方不予供货违约责任为甲方的实际损失+违约金，如乙方材料符合订货标准，甲方不能退货和不收货，甲方无条件应按实际本合同订货数量支付100%货款，并支付乙方因此产生的实际费用。带有甲乙双方单位相关收货人和发货人签字的本合同的发货清单事项和内容均视为本合同的补充合同，与本合同有相同的法律效力，双方应共同遵照执行。`,
|
||
solveDispute: `1、凡因本合同引起的或与本合同有关的任何争议，均可友好协商或仲裁解决，协商或仲裁不成的，双方协商同意在合同签订地人民法院管辖地起诉，违约一方或对合同争议承担主要责任的一方，应承担对方因仲裁和起诉而产生的全部律师代理费、鉴定（检验）费、诉讼保全费、诉讼保险费、公告费、差旅费、执行费、误工费和获取证据产生费用等其他相关费用。
|
||
2、双方本合同相关权利放弃均应有双方书面作出并加盖公章或授权委托人签字后生效。`,
|
||
forceMajeure: `甲乙双方的任何一方由于不可抗力或突发公共事件的原因不能履行合同时，应及时向对方通报不能履行或不能完全履行的理由，以减轻可能给对方造成的损失，在取得有关机构证明以后，允许延期履行、部分履行或者不履行合同，并根据情况可部分或全部免予承担违约责任。`,
|
||
contracOther: `本合同的全部内容由双方平等共同协商一致，共同起草制定，非一方事先拟定，不属于格式条款。本合同自双方签字盖章后生效（包括电子签字、盖章），按本合同内容地址、联系方式寄送的一切文书、函件送达与否，均为视为送达有法律效力，通知途径和本合同内联系方式或地址送达文件双方均予以验证。`,
|
||
buyerSupplement: '供货方逾期供货承担采购方一切损失',
|
||
signMethod: 0,
|
||
},
|
||
// 表单属性
|
||
props: {
|
||
// 表单请求地址
|
||
action: "client/enquiry/sheet/kh/add",
|
||
// 表单字段显示规则
|
||
columns: [
|
||
{key: "", title: "采购单", type: "bar-title", showRule: 'fillType==1'},
|
||
{key: "productFiles", title: "附件文档", type: "file", showRule: 'fillType==1'},
|
||
{key: "productCategoryIds", title: "商品分类", type: "bar-title", showRule: 'fillType==1'},
|
||
{key: "", title: "采购商其他要求", type: "bar-title"},
|
||
|
||
{key: "remark", title: "其他要求", type: "textarea",},
|
||
{key: "", title: "发票要求", type: "bar-title"},
|
||
{key: "invoice", title: "发票要求", type: "radio",
|
||
data: [
|
||
{ value: true, label: "含税" },
|
||
{ value: false, label: "不含税" }
|
||
],
|
||
},
|
||
{key: "writeInvoiceTime",
|
||
title: "开票时间",
|
||
type: "radio",
|
||
data: [
|
||
{ value: '付款当月（限20号之前付款，20号之后付款次月开票）', label: "付款当月（限20号之前付款，20号之后付款次月开票）" },
|
||
{ value: '付款后次月', label: "付款后次月" },
|
||
{ value: '付款前', label: "付款前" },
|
||
],
|
||
showRule: 'invoice==true'
|
||
},
|
||
{key: "nvoiceType",
|
||
title: "发票种类",
|
||
type: "radio",
|
||
data: [
|
||
{ value: '增值税专用发票13%', label: "增值税专用发票13%" },
|
||
{ value: '增值税普通发票', label: "增值税普通发票" },
|
||
{ value: '普通发票', label: "普通发票" },
|
||
],
|
||
showRule: 'invoice == true'
|
||
},
|
||
{key: "", title: "运输要求", type: "bar-title"},
|
||
{key: "transportDocuments",
|
||
title: "随货资料",
|
||
type: "checkbox",
|
||
data: [
|
||
{ value: '合格证', label: "合格证" },
|
||
{ value: '检测报告', label: "检测报告" },
|
||
{ value: '销售清单', label: "销售清单" },
|
||
{ value: '磅重', label: "磅重" },
|
||
],
|
||
},
|
||
{key: "otherTransportDocuments", title: "其他资料", type: "text"},
|
||
{key: "transportLimit",
|
||
title: "运输限制",
|
||
type: "text",
|
||
},
|
||
{key: "", title: "交易说明", type: "bar-title", component: 'custom-form-section'},
|
||
{key: "tradeMethod",
|
||
title: "交易模式",
|
||
type: "radio",
|
||
data: [
|
||
{ value: 1, label: "自主交易" },
|
||
{ value: 0, label: "金久信公证" },
|
||
],
|
||
},
|
||
// {key: "", title: "交易说明", type: "bar-title"},
|
||
{
|
||
key: "payMethod",
|
||
title: "付款方式",
|
||
type: "radio",
|
||
data: [
|
||
{ value: 1, label: "预付x%货到付全款" },
|
||
{ value: 2, label: "货到验收后付款" },
|
||
{ value: 3, label: "提货付全款" },
|
||
{ value: 4, label: "信誉采购" },
|
||
{ value: 5, label: "其他付款方式" },
|
||
],
|
||
},
|
||
|
||
{
|
||
key: "",title: "",type: 'group',showLabel: false, justify: "start",columns:[
|
||
{key: "advancePayRate", title: "预付百分比", type: "percentage",showRule: "payMethod==1"},
|
||
{key: "otherPayMethod", title: "其他付款方式", type: "text",showRule: "payMethod==5"},
|
||
{key: "reputationPayDay", title: "货到签单后账期天数", type: "number",showRule: "payMethod==4",rightText: '天'},
|
||
|
||
]
|
||
},
|
||
{key: "answerTime", title: "报价时限", type: "date",dateType: "datetime"},
|
||
{key: "earnestMoney", title: "保证金要求", type: "text"},
|
||
{key: "", title: "合同要求", type: "bar-title"},
|
||
{key: 'signMethod', title: '签约方式', type: 'radio', data: [
|
||
{ value: 0, label: "法大大" },
|
||
{ value: 1, label: "线下签约" },
|
||
]},
|
||
{key: 'contractType', title: '合同选择', type: 'radio',showRule: 'signMethod==0', data: [
|
||
{ value: 0, label: "标准合同模板" },
|
||
{ value: 1, label: "自定义合同" },
|
||
]},
|
||
{key: "breachLiability", title: "违约责任", type: "textarea", readonly: true, showRule: 'signMethod==0&&contractType==0'},
|
||
{key: "solveDispute", title: "解决纠纷的方法", type: "textarea", readonly: true, showRule: 'signMethod==0&&contractType==0'},
|
||
{key: "forceMajeure", title: "不可抗力", type: "textarea", readonly: true, showRule: 'signMethod==0&&contractType==0'},
|
||
{key: "contracOther", title: "其他", type: "textarea", readonly: true, showRule: 'signMethod==0&&contractType==0'},
|
||
{key: "buyerSupplement", title: "采购方补充条款", type: "textarea", readonly: true, showRule: 'signMethod==0&&contractType==0'},
|
||
{key: "sellerSupplement", title: "供应方补充条款", type: "textarea", showRule: 'signMethod==0&&contractType==0'},
|
||
// {key: "", title: "采购商信息", type: "bar-title"},
|
||
{
|
||
key: "files",
|
||
title: "附件文档",
|
||
type: "file",
|
||
buttonText: "点击上传",
|
||
limit: 9,
|
||
accept: ".jpg,.png,.xlsx,.doc,.docx",
|
||
tips: '上传自有采购单图片或文档,支持jpg/png/word/excel'
|
||
},
|
||
|
||
|
||
],
|
||
// 表单验证规则
|
||
rules: {
|
||
answerTime:[
|
||
{ required:true, message:'报价时限不能为空', trigger: ["change","blur"] }
|
||
],
|
||
productCategoryIds:[
|
||
{ required:true, message:'商品分类不能为空', trigger: ["change","blur"] }
|
||
],
|
||
productFiles:[
|
||
{ required:true, message:'采购单不能为空', trigger: ["change","blur"] }
|
||
],
|
||
tradeMethod:[
|
||
{ required:true, message:'交易模式不能为空', trigger: ["change","blur"] }
|
||
],
|
||
invoice:[
|
||
{ required:true, message:'发票要求不能为空', trigger: ["change","blur"] }
|
||
],
|
||
writeInvoiceTime:[
|
||
{ required:true, message:'开票时间不能为空', trigger: ["change","blur"] }
|
||
],
|
||
nvoiceType:[
|
||
{ required:true, message:'发票类型不能为空', trigger: ["change","blur"] }
|
||
],
|
||
payMethod:[
|
||
{ required:true, message:'预付百分比不能为空', trigger: ["change","blur"] }
|
||
],
|
||
advancePayRate:[
|
||
{ required:true, message:'预付百分比不能为空', trigger: ["change","blur"] }
|
||
],
|
||
otherPayMethod:[
|
||
{ required:true, message:'付款方式不能为空', trigger: ["change","blur"] }
|
||
],
|
||
reputationPayDay:[
|
||
{ required:true, message:'账期天数不能为空', trigger: ["change","blur"] }
|
||
],
|
||
signMethod:[
|
||
{ required:true, message:'签约方式不能为空', trigger: ["change","blur"] }
|
||
],
|
||
contractType:[
|
||
{ required:true, message:'合同模板不能为空', trigger: ["change","blur"] }
|
||
],
|
||
|
||
},
|
||
// add 代表添加 update 代表修改
|
||
formType: "add",
|
||
// 表单是否在请求中
|
||
loading: false,
|
||
// 是否显示表单1 的弹窗
|
||
show: false,
|
||
beforeAction: (formData)=> {
|
||
|
||
// console.log('formData: ',JSON.parse(JSON.stringify(formData)));
|
||
// console.log('product: ',JSON.parse(JSON.stringify(this.productList)));
|
||
formData.productList = JSON.parse(JSON.stringify(this.productList))
|
||
formData.productCategoryList = this.checkCategoryArr
|
||
return formData
|
||
}
|
||
}
|
||
},
|
||
// 表单相关结束-----------------------------------------------------------
|
||
};
|
||
},
|
||
computed: {
|
||
checkCategoryArr() {
|
||
let arr = []
|
||
this.checkCategoryList.forEach(item => {
|
||
arr.push(...item)
|
||
})
|
||
|
||
return arr
|
||
}
|
||
|
||
},
|
||
onLoad() {
|
||
this.getAttributes()
|
||
vk.callFunction({
|
||
url: 'client/spot/category/pub/getTree',
|
||
title: '请求中...',
|
||
data: {
|
||
|
||
},
|
||
success: (data) => {
|
||
this.categoryTreeData = data.rows
|
||
for (var i = 0; i < data.rows.length; i++) {
|
||
this.checkCategoryList.push([])
|
||
}
|
||
}
|
||
});
|
||
},
|
||
methods: {
|
||
getAttributes() {
|
||
// vk.callFunction({
|
||
// url: 'client/enquiry/attributes/pub/getList',
|
||
// title: '请求中...',
|
||
// data: {
|
||
// pageSize: 1000
|
||
// },
|
||
// success: (res) => {
|
||
// this.baseAttributes = res.rows
|
||
// }
|
||
// });
|
||
},
|
||
addProduct() {
|
||
this.productList.push({})
|
||
},
|
||
removeProduct() {
|
||
if(this.productList.length > 1) {
|
||
this.productList.splice(this.productList.length - 1, 1)
|
||
}
|
||
},
|
||
onFormSuccess() {
|
||
vk.navigateTo('/pages/enquiry/list');
|
||
},
|
||
// 提交并发布
|
||
submit() {
|
||
this.form1.data.isShow = 1
|
||
this.submitAll()
|
||
},
|
||
// 提交并保存草稿
|
||
draft() {
|
||
this.form1.data.isShow = 0
|
||
this.submitAll()
|
||
},
|
||
async submitAll() {
|
||
// 手动填写表单校验
|
||
if(this.form1.data.fillType == 0) {
|
||
const verifyTasks = []
|
||
for (var i = 0; i < this.productList.length; i++) {
|
||
const valid = new Promise((resolve, reject) => {
|
||
console.log(this.$refs['product' + i]);
|
||
console.log(this.$refs['product' + i][0].$refs);
|
||
this.$refs['product' + i][0].$refs.form1.validate((valid) => {
|
||
if(valid) {
|
||
resolve(valid)
|
||
}else {
|
||
reject()
|
||
}
|
||
})
|
||
})
|
||
verifyTasks.push(valid)
|
||
}
|
||
|
||
await Promise.all(verifyTasks)
|
||
}
|
||
|
||
this.$refs.form1.submitForm()
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
|
||
.form-type-box{
|
||
position: absolute;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 270px;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
margin: auto;
|
||
}
|
||
.form-type-item {
|
||
width: 120px;
|
||
height: 35px;
|
||
text-align: center;
|
||
line-height: 35px;
|
||
font-size: 14px;
|
||
background-color: rgba(206, 206, 206, 0.75);
|
||
color: rgba(0, 0, 0, 1);
|
||
cursor: pointer;
|
||
}
|
||
.form-type-item.active {
|
||
background-color: #A92924;
|
||
color: #FFFFFF;
|
||
|
||
}
|
||
.form-view {
|
||
width: 1200px;
|
||
margin: 0 auto;
|
||
background-color: #FFFFFF;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.m-20 {
|
||
margin: 20px;
|
||
position: relative;
|
||
}
|
||
.title-main{
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
|
||
.title-sub{
|
||
font-size: 14px;
|
||
text-align: center;
|
||
}
|
||
|
||
.btn-add-outer{
|
||
padding-left: 140px;
|
||
margin: 0 0 20px 0;
|
||
}
|
||
.form-footer {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
background: #fff;
|
||
padding-top: 0;
|
||
text-align: center;
|
||
display: block;
|
||
}
|
||
|
||
.tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.el-tag {
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
</style> |