678 lines
27 KiB
Vue
678 lines
27 KiB
Vue
<template>
|
||
<view class="">
|
||
<top-bar></top-bar>
|
||
<common-nav></common-nav>
|
||
<view class="w-1200">
|
||
<el-row :gutter="20">
|
||
<el-col :span="6">
|
||
<el-menu @select="menuSelect" :default-active="menuIndex" class="el-menu-vertical-demo">
|
||
<el-menu-item index="1">
|
||
<i class="el-icon-warning-outline"></i>
|
||
<span slot="title">询价单管理</span>
|
||
</el-menu-item>
|
||
<el-menu-item index="0">
|
||
<i class="el-icon-edit"></i>
|
||
<span slot="title">加工单管理</span>
|
||
</el-menu-item>
|
||
</el-menu>
|
||
</el-col>
|
||
<el-col :span="18">
|
||
<el-card shadow="never">
|
||
<el-tabs v-model="activeName" @tab-click="changeStatus">
|
||
<el-tab-pane :label="`全部(${allNum})`" name="all">
|
||
</el-tab-pane>
|
||
<el-tab-pane :label="`待报价(${noQuoteNum})`" name="noQuote"></el-tab-pane>
|
||
<el-tab-pane :label="`待选商(${notPickNum})`" name="notPick"></el-tab-pane>
|
||
<el-tab-pane :label="`已选商(${pickedNum})`" name="picked"></el-tab-pane>
|
||
</el-tabs>
|
||
<!-- <div class="search">-->
|
||
<!-- <view class="p">-->
|
||
<!-- <el-select v-model="value2" placeholder="请选择">-->
|
||
<!-- <el-option v-for="item in options2" :key="item.value" :label="item.label"-->
|
||
<!-- :value="item.value">-->
|
||
<!-- </el-option>-->
|
||
<!-- </el-select>-->
|
||
<!-- </view>-->
|
||
<!-- <view class="p">-->
|
||
<!-- <el-date-picker v-model="value1" type="date" placeholder="选择日期">-->
|
||
<!-- </el-date-picker>-->
|
||
<!-- </view>-->
|
||
<!-- <view class="p">-->
|
||
<!-- <el-input placeholder="请输入内容" v-model="input3" class="input-with-select"-->
|
||
<!-- @change="onSearch">-->
|
||
<!-- <i slot="append" class="el-icon-search" @click="onSearch"></i>-->
|
||
<!-- </el-input>-->
|
||
<!-- </view>-->
|
||
<!-- </div>-->
|
||
</el-card>
|
||
<el-card shadow="never" style="margin-top: 20px;">
|
||
<template v-if="menuIndex === '0'">
|
||
<view class="transaction-list">
|
||
<view class="item" v-for="(item, index) in processList" :key="index">
|
||
<view class="info">
|
||
<view class="title">
|
||
<view class="name">
|
||
<view class="fabu-status">
|
||
<view class="text">{{
|
||
item.status === 0 ? '发布中' : '已选商'
|
||
}}
|
||
</view>
|
||
<view class="sjx"></view>
|
||
</view>
|
||
<span>{{ item.title }}</span>
|
||
<el-tag effect="plain" size="mini" class="el-tag">签单宝</el-tag>
|
||
</view>
|
||
</view>
|
||
<view class="caigou">
|
||
<view class="item">
|
||
<view class="icon">
|
||
<i class="el-icon-shopping-bag-1"></i>
|
||
</view>
|
||
<view class="infos">
|
||
<view class="name">加工量</view>
|
||
<view class="unit">{{ item.num }}</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="item" style="margin-left: 100px;">-->
|
||
<!-- <view class="icon">-->
|
||
<!-- <i class="el-icon-location-outline"></i>-->
|
||
<!-- </view>-->
|
||
<!-- <view class="infos">-->
|
||
<!-- <view class="name">交易地址</view>-->
|
||
<!-- <view class="unit">广西壮族自治区-南宁市-五象航洋城</view>-->
|
||
<!-- </view>-->
|
||
<!-- </view>-->
|
||
</view>
|
||
<view class="sub-title">
|
||
<text>交易编号：{{ item.orderNo }}</text>
|
||
<text>发布时间：{{ item._add_time_str }}</text>
|
||
</view>
|
||
<view class="status">
|
||
<view class="icon">
|
||
<img src="/static/images/store/choose.png" alt=""
|
||
v-if="item.status === 1"/>
|
||
<img src="/static/images/store/unchoose.png" alt="" v-else/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tool">
|
||
<view class="btn">
|
||
<el-button size="small" plain style="width: 160px;" v-if="item.status === 0"
|
||
@click.native="editEnquiry(item._id)">编辑询价详情
|
||
</el-button>
|
||
<el-button size="small" type="success" style="width: 160px;" v-else
|
||
@click.native="navTo('/pages/contract/index')">去创建合同
|
||
</el-button>
|
||
</view>
|
||
<view class="btn">
|
||
<el-button size="small" type="danger" v-if="item.status === 0"
|
||
@click.native="showProcessModal(item)"
|
||
style="width: 160px;">查看收到的报价列表
|
||
</el-button>
|
||
<el-button size="small" type="success" plain style="width: 160px;" v-else
|
||
>查看交易方
|
||
</el-button>
|
||
</view>
|
||
<view class="btn">
|
||
<el-button size="small" type="text"
|
||
style="width: 160px;">共收到{{ item.quoteNum }}个报价
|
||
</el-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="paginatio">
|
||
<el-pagination background layout="prev, pager, next" :total="total"
|
||
:page-size="pageSize" @current-change="handleCurrentChange">
|
||
</el-pagination>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-if="menuIndex === '1'">
|
||
<view class="transaction-list">
|
||
<view class="item" v-for="(item, index) in enquiryList" :key="index">
|
||
<view class="info">
|
||
<view class="title">
|
||
<view class="name">
|
||
<view class="fabu-status">
|
||
<view class="text">{{
|
||
item.status === 0 ? '发布中' : '已选商'
|
||
}}
|
||
</view>
|
||
<view class="sjx"></view>
|
||
</view>
|
||
<span>{{
|
||
item.productList.map(row => `${row.goodsName}(${row.materialQuality})`).join("/")
|
||
}}</span>
|
||
<el-tag effect="plain" size="mini" class="el-tag">
|
||
{{ item.signMethod === 0 ? '平台交易' : '线下签单' }}
|
||
</el-tag>
|
||
<view v-if="item.status === 0 && item.signMethod === 1"
|
||
class="ml-20 flex justify-start items-center">
|
||
<switch-icon theme="outline" size="20" fill="#000000"
|
||
strokeLinecap="square"/>
|
||
<el-tag size="mini" type="warning" class="pointer"
|
||
@click.native="enquiryChangeToOnlineSign(item._id, index)">
|
||
切换至线上交易
|
||
</el-tag>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="caigou">
|
||
<view class="item">
|
||
<view class="icon">
|
||
<i class="el-icon-shopping-bag-1"></i>
|
||
</view>
|
||
<view class="infos">
|
||
<view class="name">采购量</view>
|
||
<view class="unit">{{
|
||
item.productList.map(row => row.procureNumber + row.procureUnit).join("/")
|
||
}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="item" style="margin-left: 100px;">
|
||
<view class="icon">
|
||
<i class="el-icon-location-outline"></i>
|
||
</view>
|
||
<view class="infos">
|
||
<view class="name">交易地址</view>
|
||
<view class="unit">{{ item.fullAddress }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="sub-title">
|
||
<text>交易编号：{{ item.enquiryNo }}</text>
|
||
<text>发布时间：{{ item._add_time_str }}</text>
|
||
</view>
|
||
<view class="status">
|
||
<view class="icon">
|
||
<img src="/static/images/store/choose.png" alt=""
|
||
v-if="item.status === 1"/>
|
||
<img src="/static/images/store/unchoose.png" alt="" v-else/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tool">
|
||
<view class="btn">
|
||
<el-button size="small" plain style="width: 160px;" v-if="item.status === 0"
|
||
@click.native="editEnquiry(item._id)">编辑询价详情
|
||
</el-button>
|
||
<el-button size="small" type="success" style="width: 160px;" v-else
|
||
@click.native="navTo('/pages/contract/index')">去创建合同
|
||
</el-button>
|
||
</view>
|
||
<view class="btn">
|
||
<el-button size="small" type="danger" v-if="item.status === 0"
|
||
@click.native="showEnquiryModal(item)"
|
||
style="width: 160px;">查看收到的报价列表
|
||
</el-button>
|
||
<el-button size="small" type="success" plain style="width: 160px;" v-else
|
||
>查看交易方
|
||
</el-button>
|
||
</view>
|
||
<view class="btn">
|
||
<el-button size="small" type="text"
|
||
style="width: 160px;">共收到{{ item.quoteNum }}个报价
|
||
</el-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="paginatio">
|
||
<el-pagination background layout="prev, pager, next" :total="total"
|
||
:page-size="pageSize" @current-change="handleCurrentChange">
|
||
</el-pagination>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
</view>
|
||
<common-footer></common-footer>
|
||
<enquiry-modal ref="enquiryModal"/>
|
||
<process-modal ref="processModal"/>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import provinces from "@/uni_modules/vk-uview-ui/libs/address/provinces.json";
|
||
import citys from "@/uni_modules/vk-uview-ui/libs/address/citys.json";
|
||
import areas from "@/uni_modules/vk-uview-ui/libs/address/areas.json";
|
||
import {
|
||
Agreement,
|
||
Switch as SwitchIcon
|
||
} from "@icon-park/vue";
|
||
import EnquiryModal from "./components/enquiryModal.vue";
|
||
import ProcessModal from "./components/processModal.vue";
|
||
|
||
export default {
|
||
components: {
|
||
ProcessModal,
|
||
EnquiryModal,
|
||
Agreement,
|
||
SwitchIcon
|
||
},
|
||
data() {
|
||
return {
|
||
provinceData: provinces,
|
||
cityData: citys,
|
||
areaData: areas,
|
||
activeName: 'all',
|
||
value: '',
|
||
value1: '',
|
||
options: [{
|
||
value: '金久信自营',
|
||
label: '金久信自营'
|
||
}],
|
||
value2: '',
|
||
options2: [{
|
||
value: '未开发票',
|
||
label: '自主交易'
|
||
}],
|
||
input3: '',
|
||
menuIndex: '1',
|
||
isSign: false,
|
||
formData: {
|
||
status: 0,
|
||
tradeMethod: null
|
||
},
|
||
tableData: {},
|
||
pageSize: 10,
|
||
enquiryList: [],
|
||
processList: [],
|
||
total: 0,
|
||
notPickNum: 0,
|
||
pickedNum: 0,
|
||
noQuoteNum: 0,
|
||
allNum: 0,
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if (options.menuIndex) {
|
||
this.menuIndex = String(options.menuIndex)
|
||
}
|
||
if (this.menuIndex === '1') this.getEnquiryList()
|
||
else this.getProcessList()
|
||
},
|
||
methods: {
|
||
navTo(url) {
|
||
vk.navigateTo({
|
||
url
|
||
})
|
||
},
|
||
menuSelect(e) {
|
||
this.menuIndex = String(e)
|
||
this.formData.status = Number(e)
|
||
this.isSign = false
|
||
this.handleCurrentChange(1)
|
||
},
|
||
handleCurrentChange(page) {
|
||
if (this.menuIndex === '1') this.getEnquiryList(page)
|
||
else this.getProcessList(page)
|
||
},
|
||
changeStatus() {
|
||
if (this.menuIndex === '1') this.getEnquiryList(1)
|
||
else this.getProcessList(1)
|
||
},
|
||
getEnquiryList(pageIndex = 1) {
|
||
vk.callFunction({
|
||
url: 'client/enquiry/sheet/pub/getList',
|
||
data: {
|
||
userId: vk.getVuex('$user.userInfo._id'),
|
||
pageIndex,
|
||
pageSize: this.pageSize,
|
||
status: this.activeName
|
||
},
|
||
success: (res) => {
|
||
this.enquiryList = res.rows.map(val => {
|
||
let str = ''
|
||
if (val.productList !== undefined && val.productList.length > 0 && val.productList[0].addressRegion !== undefined && val.productList[0].addressRegion.length > 0) {
|
||
let provinceIndex = 0, cityIndex = 0, areaIndex = 0
|
||
this.provinceData.forEach((item, index) => {
|
||
if (parseInt(val.productList[0].addressRegion[0]) === parseInt(item.code)) {
|
||
provinceIndex = index
|
||
str = item.name
|
||
}
|
||
})
|
||
this.cityData[provinceIndex].forEach((item, index) => {
|
||
if (parseInt(val.productList[0].addressRegion[1]) === parseInt(item.code)) {
|
||
cityIndex = index
|
||
str += `-${item.name}`
|
||
}
|
||
})
|
||
this.areaData[provinceIndex][cityIndex].forEach((item, index) => {
|
||
if (parseInt(val.productList[0].addressRegion[2]) === parseInt(item.code)) {
|
||
areaIndex = index
|
||
str += `-${item.name}`
|
||
}
|
||
})
|
||
// str += val.productList[0].addressDetail
|
||
}
|
||
val.fullAddress = str
|
||
return val
|
||
})
|
||
this.total = res.total
|
||
this.allNum = res.all
|
||
this.notPickNum = res.notPickNum
|
||
this.pickedNum = res.pickedNum
|
||
this.quoteNum = res.quoteNum
|
||
}
|
||
})
|
||
},
|
||
getProcessList(pageIndex = 1) {
|
||
vk.callFunction({
|
||
url: 'client/process/sheet/pub/getList',
|
||
data: {
|
||
userId: vk.getVuex('$user.userInfo._id'),
|
||
pageIndex,
|
||
pageSize: this.pageSize,
|
||
status: this.activeName
|
||
},
|
||
success: (res) => {
|
||
this.processList = res.rows
|
||
this.total = res.total
|
||
this.allNum = res.all
|
||
this.notPickNum = res.notPickNum
|
||
this.pickedNum = res.pickedNum
|
||
this.quoteNum = res.quoteNum
|
||
}
|
||
})
|
||
},
|
||
showEnquiryModal({status, quoteList}) {
|
||
this.$refs.enquiryModal.open(status, quoteList)
|
||
},
|
||
showProcessModal({status, quoteList}) {
|
||
this.$refs.processModal.open(status, quoteList)
|
||
},
|
||
editEnquiry(id) {
|
||
vk.navigateTo({
|
||
url: `/pages/enquiry/release?id=${id}`
|
||
})
|
||
},
|
||
enquiryChangeToOnlineSign(id, index) {
|
||
vk.callFunction({
|
||
url: ' client/enquiry/sheet/kh/changeToOnlineSign',
|
||
data: {
|
||
id
|
||
}
|
||
})
|
||
this.enquiryList[index].signMethod = 0
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.w-1200 {
|
||
width: 1200px;
|
||
margin: 20px auto;
|
||
}
|
||
|
||
.contract-list {
|
||
background-color: #FFFFFF;
|
||
padding: 10px 20px 20px;
|
||
}
|
||
|
||
|
||
.transaction-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid #f3f3f3;
|
||
|
||
.info {
|
||
position: relative;
|
||
border-right: 1px solid #f3f3f3;
|
||
flex: 1;
|
||
|
||
.name {
|
||
display: flex;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
line-height: 1.6em;
|
||
align-items: center;
|
||
|
||
.fabu-status {
|
||
margin-right: 20px;
|
||
font-weight: normal;
|
||
display: flex;
|
||
|
||
.text {
|
||
padding: 0 10px 0 20px;
|
||
font-size: 13px;
|
||
color: #fff;
|
||
background-color: #A92924;
|
||
}
|
||
|
||
.sjx {
|
||
border: 12px solid;
|
||
border-color: #A92924 #ffffff #A92924 #A92924;
|
||
position: relative;
|
||
}
|
||
|
||
// .text{
|
||
// color: #fff;
|
||
// background-color: #A92924
|
||
// }
|
||
}
|
||
|
||
.buyer,
|
||
.seller {
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
display: flex;
|
||
margin: 0 30px;
|
||
}
|
||
|
||
.el-tag {
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
|
||
.caigou {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px 0;
|
||
border: none;
|
||
|
||
.icon {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 10px;
|
||
background-color: #f3f3f3;
|
||
padding: 10px;
|
||
border-radius: 100px;
|
||
|
||
.el-icon-shopping-bag-1,
|
||
.el-icon-location-outline {
|
||
font-size: 30px;
|
||
}
|
||
}
|
||
|
||
.infos {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.unit {
|
||
color: #A92924
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.sub-title {
|
||
color: #999999;
|
||
|
||
text {
|
||
margin-right: 60px;
|
||
}
|
||
}
|
||
|
||
.action {
|
||
padding: 10px 0;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
|
||
.btn-buy,
|
||
.btn-close {
|
||
color: #A92924;
|
||
}
|
||
}
|
||
|
||
.status {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
|
||
.icon {
|
||
margin: 0 20px;
|
||
|
||
img {
|
||
width: 80px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tool {
|
||
display: flex;
|
||
width: 200px;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
flex-direction: column;
|
||
|
||
.btn {
|
||
margin: 5px 0;
|
||
}
|
||
|
||
.price {
|
||
margin: 0 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.red {
|
||
font-size: 16px;
|
||
color: #A92924;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.paginatio {
|
||
margin: 20px auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
|
||
.contract-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: solid 1px #e8e8e8;
|
||
padding: 10rpx 0;
|
||
}
|
||
|
||
.contract-left {
|
||
}
|
||
|
||
.contract-right {
|
||
text-align: right;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.trade-method {
|
||
display: flex;
|
||
margin-bottom: 20px;
|
||
border-bottom: solid 2px #f4f4f4;
|
||
}
|
||
|
||
.trade-method-item {
|
||
cursor: pointer;
|
||
font-size: 18px;
|
||
margin-right: 15px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
}
|
||
|
||
.trade-method-item.active {
|
||
color: #A92924;
|
||
border-bottom: solid 2px #A92924;
|
||
}
|
||
|
||
.contract-left-top {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
}
|
||
|
||
.contract-product {
|
||
margin: 0 10px;
|
||
}
|
||
|
||
.contract-left-center {
|
||
height: 40px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
color: #999999;
|
||
font-size: 12px;
|
||
flex-direction: column;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.contract-left-bottom {
|
||
display: flex;
|
||
}
|
||
|
||
.contract-status {
|
||
display: flex;
|
||
}
|
||
|
||
.contract-status-tag {
|
||
margin-left: 2px;
|
||
}
|
||
|
||
.sign {
|
||
padding: 20px 20px 20px 25px;
|
||
font-size: 14px;
|
||
|
||
.icon {
|
||
line-height: 18px;
|
||
}
|
||
}
|
||
|
||
.search {
|
||
display: flex;
|
||
|
||
.p {
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
.el-select .el-input {
|
||
width: 130px;
|
||
}
|
||
|
||
.input-with-select .el-input-group__prepend {
|
||
background-color: #fff;
|
||
}
|
||
</style> |