480 lines
20 KiB
Vue
480 lines
20 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="page-main" v-if="sheet">
|
||
<view class="flex justify-between items-center">
|
||
<text class="text-gray">加工询价单编号:{{ sheet.orderNo }}</text>
|
||
<text class="text-gray">发布时间:{{ sheet._add_time_str }}</text>
|
||
</view>
|
||
<view class="my-25 flex justify-between items-center">
|
||
<view class="flex justify-start items-center">
|
||
<text class="text-40 font-bold">{{ sheet.title }}</text>
|
||
<view class="ml-20 flex justify-start items-center">
|
||
<building-one theme="outline" size="24" fill="#a92924" strokeLinecap="square"/>
|
||
<view class="text-main ">
|
||
<text class="mx-20">{{ sheet.quoteList.length > 0 ? sheet.quoteList.rows.length : 0 }}
|
||
</text>
|
||
<text>家已报价</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex justify-end items-end"
|
||
v-if="sheet.answerEndTime && dayjs().diff(dayjs(sheet.answerEndTime), 'second') > 0">
|
||
<text>距离报价结束还有：</text>
|
||
<view class="border-main countdown text-main">{{
|
||
dayjs().diff(dayjs(sheet.answerEndTime), 'day')
|
||
}}
|
||
</view>
|
||
<text>天</text>
|
||
<view class="border-main countdown text-main">
|
||
{{ (dayjs().diff(dayjs(sheet.answerEndTime), 'hour')) % 24 }}
|
||
</view>
|
||
<text>时</text>
|
||
</view>
|
||
</view>
|
||
<view class="my-25 flex justify-between items-center pb-20 border-bottom">
|
||
<view class="flex justify-start items-center">
|
||
<id-card theme="outline" size="24" fill="#a92924" strokeLinecap="square"/>
|
||
<text class="ml-15 text-gray">
|
||
{{
|
||
sheet.user.accountType === 1 ? sheet.user.person.personName : sheet.user.company.companyName
|
||
}}
|
||
</text>
|
||
</view>
|
||
<el-button type="primary" @click.native="toQuote"
|
||
v-if="vk.getVuex('$user.userInfo._id') !== sheet.userId">我要申请加工
|
||
</el-button>
|
||
<el-button type="primary" @click.native="showDialog = true"
|
||
v-else>查看收到的申请加工
|
||
</el-button>
|
||
</view>
|
||
<view class="item-wrap">
|
||
<view class="form-title-wrap">
|
||
<view class="goods-sheet-title">
|
||
<view class="form-title">
|
||
上传的附件
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mt-15 mr-15" v-for="(item, index) in sheet.files" :key="index">
|
||
<el-image :src="item" style="width: 100px; height: 100px" fit="cover"
|
||
:preview-src-list="sheet.files"/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="item-wrap">
|
||
<view class="form-title-wrap">
|
||
<view class="goods-sheet-title">
|
||
<view class="form-title">
|
||
采购商其他要求
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mt-15">{{ sheet.remark }}</view>
|
||
</view>
|
||
|
||
<view class="item-wrap">
|
||
<view class="form-title-wrap">
|
||
<view class="goods-sheet-title">
|
||
<view class="form-title">
|
||
纳税和税票
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mt-15">是否含税：{{ sheet.invoice ? '含税' : '不含税' }}</view>
|
||
<view class="mt-15">开票时间：{{ WRITE_INVOICE_TIME[sheet.writeInvoiceTime] }}</view>
|
||
<view class="mt-15">发票种类：{{ INVOICE_TYPE[sheet.invoiceType] }}</view>
|
||
<view class="mt-15">其他要求：{{ sheet.invoiceOther }}</view>
|
||
</view>
|
||
|
||
<view class="item-wrap">
|
||
<view class="form-title-wrap">
|
||
<view class="goods-sheet-title">
|
||
<view class="form-title">
|
||
运输要求
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mt-15">随货资料：{{ sheet.transportDocuments.join() }}</view>
|
||
<view class="mt-15">其他要求：{{ sheet.otherTransportDocuments }}</view>
|
||
<view class="mt-15">运输限制要求：{{ sheet.transportLimit ? '有' : '无' }}</view>
|
||
</view>
|
||
|
||
<view class="item-wrap">
|
||
<view class="form-title-wrap">
|
||
<view class="goods-sheet-title">
|
||
<view class="form-title">
|
||
交易说明
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mt-15">付款方式：{{ PROCESS_PAY_METHOD[sheet.payMethod] }}</view>
|
||
<view class="mt-15">报价形式：{{ sheet.offerType === 0 ? '整单报价' : '可分项报价' }}</view>
|
||
<view class="mt-15">报价期限：
|
||
<text v-if="sheet.answerStartTime && sheet.answerEndTime">{{
|
||
dayjs(sheet.answerStartTime).format('YYYY-MM-DD')
|
||
}}~{{ dayjs(sheet.answerEndTime).format('YYYY-MM-DD') }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="item-wrap">
|
||
<view class="form-title-wrap">
|
||
<view class="goods-sheet-title">
|
||
<view class="form-title">
|
||
简易合同备注和其他补充条款
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mt-15">违约责任：</view>
|
||
<view class="mt-15">
|
||
1.乙方所交产品品种、型号、规格、质量不符合规定的，如果甲方同意利用，应当按质论价；如果甲方不能利用的，应根据产品的具体情况，由乙方负责包换或包修，并承担修理、调换或退货而支付的实际费用；2.乙方不予供货违约责任为甲方的实际损失+违约金，如乙方材料符合订货标准，甲方不能退货和不收货，甲方无条件应按实际本合同订货数量支付100%货款，并支付乙方因此产生的实际费用。带有甲乙双方单位相关收货人和发货人签字的本合同的发货清单事项和内容均视为本合同的补充合同，与本合同有相同的法律效力，双方应共同遵照执行。
|
||
</view>
|
||
<view class="mt-15">解决纠纷的方法：</view>
|
||
<view class="mt-15">
|
||
1、凡因本合同引起的或与本合同有关的任何争议，均可友好协商或仲裁解决，协商或仲裁不成的，双方协商同意在合同签订地人民法院管辖地起诉，违约一方或对合同争议承担主要责任的一方，应承担对方因仲裁和起诉而产生的全部律师代理费、鉴定（检验）费、诉讼保全费、诉讼保险费、公告费、差旅费、执行费、误工費和获取证据产生费用等其他相关费用。2、双方本合同相关权利放弃均应有双方书面作出并加盖公章或授权委托人签字后生效。
|
||
</view>
|
||
<view class="mt-15">不可抗力：</view>
|
||
<view class="mt-15">
|
||
甲乙双方的任何一方由于不可抗力或突发公共事件的原因不能履行合同时，应及时向对方通报不能履行或不能完全履行的理由，以减轻可能给对方造成的损失，在取得有关机构证明以后，允许延期履行、部分履行或者不履行合同，并根据情况可部分或全部免予承担违约责任。
|
||
</view>
|
||
<view class="mt-15">其他：</view>
|
||
<view class="mt-15">
|
||
本合同的全部内容由双方平等共同协商一致，共同起草制定，非一方事先拟定，不属于格式条款。本合同自双方签字盖章后生效（包括电子签字、盖章），按本合同内容地址、联系方式寄送的一切文书、函件送达与否，均为视为送达有法律效力，通知途径和本合同内联系方式或地址送达文件双方均予以验证。
|
||
</view>
|
||
<view class="mt-15">采购方补充条款： 供货方逾期供货承担采购方一切损失</view>
|
||
<view class="mt-15"> 供应方补充条款：</view>
|
||
</view>
|
||
|
||
<view class="item-wrap">
|
||
<view class="form-title-wrap">
|
||
<view class="goods-info-title">
|
||
<view class="form-title">
|
||
已收到的加工申请
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 报价列表 -->
|
||
<vk-data-table :data="sheet.quoteList" :columns="table1.columns" title="adasda "
|
||
:customRightBtns="table1.customRightBtns"></vk-data-table>
|
||
</view>
|
||
</view>
|
||
|
||
<common-footer></common-footer>
|
||
|
||
<el-dialog :visible.sync="showDialog" width="70%" :show-close="false">
|
||
<view slot="title" class="text-main text-40 m-30 flex justify-between items-center">
|
||
<text>收到的报价</text>
|
||
<el-button type="primary" @click.native="showDialog = false">关闭</el-button>
|
||
</view>
|
||
<view class="mt-15">
|
||
<view class="request-header">
|
||
<text class="flex-1">供应商</text>
|
||
<text class="flex-1">报价时间</text>
|
||
<text class="flex-1">联系方式</text>
|
||
<text class="flex-1">报价</text>
|
||
<text class="flex-1">操作</text>
|
||
</view>
|
||
<view class="quote" v-for="(item, index) in sheet.quoteList.rows" :key="index">
|
||
<text class="flex-1">{{ item.subjectName }}</text>
|
||
<text class="flex-1">{{ item._add_time_str }}</text>
|
||
<text class="flex-1">{{ item.subjectMobile }}</text>
|
||
<text class="flex-1">{{ item.totalPrice }}元</text>
|
||
<text class="flex-1">
|
||
<el-button type="primary">选择</el-button>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</el-dialog>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {BuildingOne, IdCard} from "@icon-park/vue";
|
||
import dayjs from "dayjs";
|
||
import {WRITE_INVOICE_TIME, INVOICE_TYPE, PROCESS_PAY_METHOD} from '@/util'
|
||
|
||
export default {
|
||
components: {BuildingOne, IdCard},
|
||
data() {
|
||
return {
|
||
WRITE_INVOICE_TIME,
|
||
INVOICE_TYPE,
|
||
PROCESS_PAY_METHOD,
|
||
enquiryId: undefined,
|
||
showDialog: false,
|
||
productList: [],
|
||
sheetTitle: '',
|
||
sheet: {
|
||
user: {},
|
||
productList: [],
|
||
transportDocuments: []
|
||
},
|
||
table1: {
|
||
// 表格数据
|
||
data: [],
|
||
// 表格字段显示规则
|
||
columns: [{
|
||
key: "subjectName",
|
||
title: "供应商",
|
||
type: "text",
|
||
width: 300,
|
||
formatter: (val, row, column, index) => {
|
||
if (vk.getVuex('$user.userInfo._id') == this.sheet.userId) {
|
||
return val
|
||
}
|
||
if (row.accountType == 1) {
|
||
return vk.pubfn.hidden(val, 1, 1);
|
||
} else {
|
||
return vk.pubfn.hidden(val, 2, 4);
|
||
}
|
||
}
|
||
|
||
},
|
||
{
|
||
key: "_add_time_str",
|
||
title: "报价时间",
|
||
type: "text",
|
||
width: 200
|
||
},
|
||
{
|
||
key: "subjectMobile",
|
||
title: "联系方式",
|
||
type: "text",
|
||
width: 120,
|
||
formatter: (val, row, column, index) => {
|
||
let str = val
|
||
if (row.managerMobile) {
|
||
str = row.managerMobile
|
||
}
|
||
if (vk.getVuex('$user.userInfo._id') == this.sheet.userId) {
|
||
return str
|
||
}
|
||
return vk.pubfn.hidden(str, 3, 4);
|
||
}
|
||
},
|
||
{
|
||
key: "totalPrice",
|
||
title: "报价",
|
||
type: "textarea",
|
||
width: 130,
|
||
formatter: (val, row, column, index) => {
|
||
let str = val
|
||
if (row.managerMobile) {
|
||
str = row.managerMobile
|
||
}
|
||
if (vk.getVuex('$user.userInfo._id') == this.sheet.userId) {
|
||
return val
|
||
}
|
||
return "******";
|
||
}
|
||
},
|
||
|
||
|
||
],
|
||
customRightBtns: [
|
||
{
|
||
title: '合同',
|
||
type: 'primary',
|
||
icon: 'el-icon-search',
|
||
show: (row) => {
|
||
return vk.getVuex('$user.userInfo._id') == this.sheet.userId && row.status == 1
|
||
},
|
||
onClick: (item) => {
|
||
vk.navigateTo('/pages/contract/index');
|
||
},
|
||
},
|
||
|
||
{
|
||
title: '选择',
|
||
type: 'primary',
|
||
icon: 'el-icon-search',
|
||
show: (row) => {
|
||
return vk.getVuex('$user.userInfo._id') == this.sheet.userId && row.status == 0
|
||
},
|
||
onClick: (item) => {
|
||
vk.callFunction({
|
||
url: 'client/enquiry/quote/kh/confirmQuote',
|
||
title: '请求中...',
|
||
data: {
|
||
quoteId: item._id
|
||
},
|
||
success: (data) => {
|
||
vk.navigateTo('/pages/contract/index');
|
||
}
|
||
});
|
||
},
|
||
},
|
||
{
|
||
title: '查看报价详情',
|
||
type: 'primary',
|
||
icon: 'el-icon-search',
|
||
disabled: (item) => {
|
||
return vk.getVuex('$user.userInfo._id') != this.sheet.userId
|
||
},
|
||
onClick: (item) => {
|
||
vk.toast(`${item._id}-按钮1`);
|
||
}
|
||
},
|
||
]
|
||
},
|
||
};
|
||
},
|
||
onLoad(options = {}) {
|
||
const {
|
||
id
|
||
} = options
|
||
if (!id) {
|
||
vk.navigateTo('/pages/enquiry/list');
|
||
return
|
||
}
|
||
|
||
this.enquiryId = id
|
||
|
||
this.getEnquiryDetail()
|
||
},
|
||
methods: {
|
||
dayjs,
|
||
/**
|
||
* 打开报价窗口
|
||
*/
|
||
toQuote() {
|
||
// 获取用户信息
|
||
vk.userCenter.getCurrentUserInfo({
|
||
success: (data) => {
|
||
const {
|
||
userInfo
|
||
} = data
|
||
if (userInfo.quoteTimes > 3) {
|
||
|
||
}
|
||
|
||
this.$confirm(`今日报价次数${userInfo.quoteTimes || 0}, 是否继续?`, '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
center: true
|
||
}).then(res => {
|
||
vk.navigateTo('/pages/enquiry/quote?enquiryId=' + this.enquiryId);
|
||
})
|
||
|
||
}
|
||
});
|
||
},
|
||
/**
|
||
* 获取询价单详情
|
||
*/
|
||
getEnquiryDetail() {
|
||
vk.callFunction({
|
||
url: 'client/enquiry/sheet/pub/getDetail',
|
||
title: '请求中...',
|
||
data: {
|
||
_id: this.enquiryId
|
||
},
|
||
success: (res) => {
|
||
const {
|
||
productList
|
||
} = res.data
|
||
let title = []
|
||
productList.forEach(item => {
|
||
const keys = Object.keys(item.extraAttributes)
|
||
keys.forEach(citem => {
|
||
item.extraAttributes[citem] = JSON.parse(item.extraAttributes[
|
||
citem])
|
||
})
|
||
title.push(item.goodsName)
|
||
})
|
||
this.productList = productList
|
||
|
||
delete res.data.productList
|
||
|
||
this.sheet = {...res.data, ...{title: title.join()}}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/common/css/app.scss";
|
||
|
||
.page-main {
|
||
width: 1200px;
|
||
margin: 20px auto;
|
||
background-color: #FFFFFF;
|
||
padding: 20px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.countdown {
|
||
padding: 2px 5px;
|
||
margin: 0 5px;
|
||
}
|
||
|
||
.item-wrap {
|
||
margin: 24px 0;
|
||
|
||
.form-title-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.goods-info-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.form-title {
|
||
padding-left: 10px;
|
||
color: $--color-primary;
|
||
font-size: 18px;
|
||
line-height: 18px;
|
||
border-left: 4px solid $--color-primary;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.request-header {
|
||
border: 1px solid #EDEDED;
|
||
background-color: #FFF8F1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 15px;
|
||
margin-top: 30px;
|
||
|
||
text {
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.quote {
|
||
border-left: 1px solid #EDEDED;
|
||
border-right: 1px solid #EDEDED;
|
||
border-bottom: 1px solid #EDEDED;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 15px;
|
||
|
||
text {
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style> |