544 lines
15 KiB
Vue
544 lines
15 KiB
Vue
<template>
|
||
<view>
|
||
<view class="base-info pb20">
|
||
<view class="content-title">{{baseData.HIGHWAYPROINST_DESC}}</view>
|
||
<view class="main-card">
|
||
<div class="card-title">
|
||
<h4>{{baseData.SERVERPART_NAME}}</h4>
|
||
<div class="card-status" :style="baseData.HIGHWAYPROINST_NEXTID!=9000 ?'color:#df7f42;':''">{{proStatus[baseData.HIGHWAYPROINST_NEXTID]}}</div>
|
||
</div>
|
||
<div class="base-body" style="align-items: center;">
|
||
<i class="ico ico-user"></i><span class="item-title">申请人：</span><text>{{baseData.STAFF_NAME}}</text>
|
||
</div>
|
||
<div class="base-body" style="align-items: center;">
|
||
<i class="ico ico-sjx"></i><span class="item-title">创建日期： </span><text>{{baseData.HIGHWAYPROINST_CREATEDATE}}</text>
|
||
</div>
|
||
<div class="base-body">
|
||
<view class="uni-flex" style="align-items: center;">
|
||
<i class="ico ico-bz"></i><span class="item-title">业务说明： </span>
|
||
|
||
</view>
|
||
|
||
<text>{{baseData.PROINST_NAME}}</text>
|
||
</div>
|
||
</view>
|
||
<div class="file-body" v-if="FileList.length>0">
|
||
<div class="item-title">
|
||
<!-- <i class="ico ico-fj"></i> -->
|
||
附件文件
|
||
</div>
|
||
<div class="imgBox">
|
||
<filesUnit v-for="(file,i) in baseData.FileList" :fileItem="file" :key="i"></filesUnit>
|
||
</div>
|
||
</div>
|
||
<view class="button-box" v-if="baseData.USER_ID==users.UserId">
|
||
<span @tap="showPop(4000)"><image src="/static/images/yj-btn.png" mode="aspectFit"></image> 移交 </span>
|
||
<span @tap="showPop(2000)"><image src="/static/images/sh-btn.png" mode="aspectFit"></image> 审核 </span>
|
||
<span @tap="showPop(3000)" v-if="baseData.CAN_REJECT===1"><image src="/static/images/bh-btn.png" mode="aspectFit"></image> 驳回</span>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="base-info mt20" v-if="baseData.RejectApproved.length>0">
|
||
<div class="uni-list-cell uni-collapse">
|
||
<div class="cat-box uni-list-cell-navigate">
|
||
<b>驳回意见</b>
|
||
</div>
|
||
<div class="process-box uni-collapse-content uni-active">
|
||
<processUnit :item="baseData.RejectApproved[0]" :approveType="0"/>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
<view class="base-info">
|
||
<div class="uni-list-cell uni-collapse">
|
||
<div class="cat-box uni-list-cell-navigate" :class="cardShow ? ' uni-navigate-bottom' : 'uni-navigate-right'" @tap="cardShow =!cardShow">
|
||
<b>审批流程</b>
|
||
</div>
|
||
<div class="process-box uni-collapse-content" :class="cardShow ? 'uni-active' : ''" v-show="cardShow">
|
||
<processUnit v-for="item in baseData.ApproveList" :item="item" :key="item.APPROVED_ID" :approveType="1"/>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
<view class="page-title">{{baseData.ACCEPT_CODE == 100100 ? '商品新增' : '信息修改'}}详情</view>
|
||
|
||
<div class="uni-list-cell uni-collapse base-info" v-for="(item,index) in cateArr" :key="index">
|
||
<div class="cat-box uni-list-cell-navigate" :class="cardShowMap[item.id] ? ' uni-navigate-bottom' : 'uni-navigate-right'" @tap="isShowCate(item)">
|
||
<b>{{item.name}}</b>
|
||
</div>
|
||
<div class="uni-collapse-content" :class="cardShowMap[item.id]? 'uni-active' : ''" v-show="cardShowMap[item.id]">
|
||
<div class="main-card" v-for="(proUnit, cardIndex) in item.child" :key="cardIndex">
|
||
<div class="card-top">
|
||
<view class="uni-flex" style="justify-content: space-between;">
|
||
<div class="pro-name-box">
|
||
<p class="product-name">{{proUnit.COMMODITY_NAME}}</p>
|
||
<!-- <p class="product-detail"><i class="ico ico-cate"></i>{{proUnit.COMMODITY_BARCODE}}</p> -->
|
||
</div>
|
||
<div class="pro-orther-box ">
|
||
<p class="product-detail lh28">
|
||
<text class="unit-text-b1">售价</text> <b class="product-price">￥{{$util.fmoney(proUnit.COMMODITY_RETAILPRICE,2)}}</b>
|
||
</p>
|
||
<!-- <p class="product-detail">{{proUnit.COMMODITY_RULE}} <text style="color: #CCCCCC;margin: 0 8upx;">|</text> {{proUnit.COMMODITY_UNIT}} <text style="color: #CCCCCC;margin: 0 8upx;">|</text> <text :class="proUnit.COMMODITY_STATE==1 ? 'product-status' : 'uni-text-gray'">{{proUnit.COMMODITY_STATE_NAME}}</text></p> -->
|
||
</div>
|
||
|
||
</view>
|
||
<div class="uni-flex" style="justify-content: space-between;">
|
||
|
||
|
||
<p class="product-detail"><i class="ico ico-cate"></i>{{proUnit.COMMODITY_BARCODE}}</p>
|
||
|
||
<div class="pro-orther-box">
|
||
|
||
<p class="product-detail">{{proUnit.COMMODITY_RULE}} <text style="color: #CCCCCC;margin: 0 8upx;">|</text> {{proUnit.COMMODITY_UNIT}} <text style="color: #CCCCCC;margin: 0 8upx;">|</text> <text :class="proUnit.COMMODITY_STATE==1 ? 'product-status' : 'uni-text-gray'">{{proUnit.COMMODITY_STATE_NAME}}</text></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<ul :class="(baseData.ACCEPT_CODE!=='100200' && baseData.ACCEPT_CODE!=='100201') ? 'card-detail': (getChange[proUnit.COMMODITY_ID] ? 'card-change-detail' : 'no-show')" >
|
||
<template v-if="(baseData.ACCEPT_CODE!=='100200' && baseData.ACCEPT_CODE!=='100201')">
|
||
<li style="flex:2;">进货价格：<text style="color:#333;">￥{{$util.fmoney(proUnit.COMMODITY_PURCHASEPRICE)}}</text></li>
|
||
<li style="text-align: center;flex:1;">是否散装：<text style="color:#333;">{{proUnit.ISBULK_NAME}}</text></li>
|
||
<li style="text-align: right;flex:1.5;">称重方式：<text style="color:#333;">{{proUnit.METERINGMETHOD_NAME}}</text></li>
|
||
</template>
|
||
<template v-else>
|
||
<!-- 调整的商品参数 -->
|
||
<li v-for='(changeItem, i) in changeList[proUnit.COMMODITY_ID]' :key="i">
|
||
{{changeItem.changeName}}:
|
||
<template v-if="changeItem.isprice">
|
||
<b class="product-price">￥{{changeItem.nowV}}</b>
|
||
<span class="through-line text-b9">￥{{changeItem.org}}</span>
|
||
<b class="uni-icon" :class="(changeItem.org < changeItem.nowV) ?'uni-icon-arrowthinup': ' uni-icon-arrowthindown'"></b>
|
||
</template>
|
||
<template v-else>
|
||
<text class="uni-text-gray">{{changeItem.nowV}}</text>
|
||
<text class="through-line">{{changeItem.org}}</text>
|
||
</template>
|
||
|
||
</li>
|
||
</template>
|
||
<li v-if="baseData.HIGHWAYPROINST_NEXTID==='9000'">生效时间：<text class="uni-text-gray">{{proUnit.OPERATE_DATE}}</text></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
const json = {
|
||
COMMODITY_NAME: '品名',
|
||
COMMODITY_BARCODE: '条码',
|
||
COMMODITYTYPE_NAME: '类别',
|
||
COMMODITY_UNIT: '单位',
|
||
COMMODITY_RULE: '规格',
|
||
COMMODITY_STATE_NAME: '状态',
|
||
COMMODITY_ORI: '产地',
|
||
COMMODITY_RETAILPRICE: '售价',
|
||
COMMODITY_PURCHASEPRICE: '进价',
|
||
BUSINESSTYPE_NAME: '业态',
|
||
COMMODITY_GRADE_NAME: '质量等级',
|
||
ISBULK_NAME : '是否散装',
|
||
METERINGMETHOD_NAME: '称重方式',
|
||
}
|
||
|
||
import {mapGetters} from 'vuex'
|
||
import processUnit from '@/components/auditingProcess/item.vue'
|
||
import filesUnit from '@/components/filesComponent/fileUnit.vue'
|
||
|
||
export default {
|
||
|
||
components: {
|
||
filesUnit,
|
||
processUnit
|
||
},
|
||
computed: {
|
||
...mapGetters({'users':'getUser'}),
|
||
|
||
},
|
||
data () {
|
||
|
||
return {
|
||
baseData: {},
|
||
pageData: [],
|
||
changeList: [],
|
||
cateArr: [],
|
||
cardShowMap: {},
|
||
commodityTree: {},
|
||
cardShow: true,
|
||
doUser: false,
|
||
proStatus: {
|
||
1000: '待受理',
|
||
2000: '办理中',
|
||
3000: '已驳回',
|
||
4000: '已移交',
|
||
9000: '已审结'
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
isShowCate(item){
|
||
|
||
this.cardShowMap[item.id] = !this.cardShowMap[item.id]
|
||
},
|
||
getYes(val) {
|
||
return val===1 ? '是 ' : '否'
|
||
},
|
||
|
||
showPop(type) {
|
||
let _this = this
|
||
let url = ''
|
||
switch (type) {
|
||
case 4000:
|
||
url= '/pages/auditingPop/transfer?businessType=2000&PROINST_ID='+_this.baseData.HIGHWAYPROINST_ID+'&NOWACTINST_ID='+_this.baseData.NOWACTINST_ID
|
||
break;
|
||
case 2000:
|
||
url= '/pages/auditingPop/toExamine?businessType=2000&PROINST_ID='+_this.baseData.HIGHWAYPROINST_ID+'&NOWACTINST_ID='+_this.baseData.NOWACTINST_ID+'&ApproName='+_this.baseData.ACTINST_NAME+'&NeedApproved=1'
|
||
break;
|
||
case 3000:
|
||
url= '/pages/auditingPop/reject?businessType=2000&PROINST_ID='+_this.baseData.HIGHWAYPROINST_ID+'&NOWACTINST_ID='+_this.baseData.NOWACTINST_ID
|
||
break;
|
||
}
|
||
this.$util.toNextRoute('navigateTo', url)
|
||
},
|
||
|
||
getDetail (id) {
|
||
let _this = this
|
||
_this.$request.get({
|
||
action_type: 'GetCommodityFlowDetail',
|
||
HIGHWAYPROINST_ID: id
|
||
}).then(rs => {
|
||
// console.log(_this.loadingType)
|
||
if(!rs.ResultCode ||rs.ResultCode!='100') {
|
||
_this.isShow = false
|
||
|
||
}else{
|
||
_this.isShow = true
|
||
}
|
||
uni.hideLoading()
|
||
let _data = rs.Data
|
||
|
||
_this.baseData = _data
|
||
if(_data.FileList){
|
||
|
||
_data.FileList.map(v => {
|
||
let name= v.ATTACHMENT_NAME.split('.')
|
||
v.type = name[name.length-1]
|
||
v.name = v.ATTACHMENT_NAME
|
||
v.path = v.ATTACHMENT_URL
|
||
})
|
||
}
|
||
_this.getChange()
|
||
_this.$forceUpdate()
|
||
|
||
})
|
||
},
|
||
getChange () { // 获取调整过的商品参数
|
||
let _this = this
|
||
let itemName = Object.keys(json) // 数据名称
|
||
let changeItem = {} //
|
||
let map = {}
|
||
let cateArr = []
|
||
let cardShowMap = {}
|
||
|
||
_this.baseData.CommodityList.forEach(item => {
|
||
|
||
if (!map[item.COMMODITY_TYPE]) {
|
||
map[item.COMMODITY_TYPE] = []
|
||
cardShowMap[item.COMMODITY_TYPE] = true
|
||
cateArr.push({
|
||
id: item.COMMODITY_TYPE,
|
||
name:item.COMMODITYTYPE_NAME,
|
||
child: map[item.COMMODITY_TYPE]
|
||
})
|
||
|
||
}
|
||
map[item.COMMODITY_TYPE].push(item)
|
||
itemName.forEach(el => {
|
||
let fName ='F_'+ el
|
||
|
||
// item[el] 现参数值 item[fName] 原参数值
|
||
if (item[fName] && item[el]!==item[fName]) {
|
||
|
||
if (!changeItem[item.COMMODITY_ID]) {
|
||
changeItem[item.COMMODITY_ID] = []
|
||
}
|
||
let originValue = item[fName]
|
||
let nowValue = item[el]
|
||
let arr = {
|
||
changeName: json[el],
|
||
org: originValue,
|
||
nowV: nowValue,
|
||
isprice: false
|
||
}
|
||
if (json[el].indexOf('价')>-1) {
|
||
arr.org = _this.$util.fmoney(originValue,2)
|
||
arr.nowV = _this.$util.fmoney(nowValue,2)
|
||
arr.isprice = true
|
||
}
|
||
changeItem[item.COMMODITY_ID].push(arr)
|
||
}
|
||
})
|
||
})
|
||
_this.changeList = changeItem
|
||
// _this.commodityTree = map
|
||
_this.cateArr = cateArr
|
||
_this.cardShowMap = cardShowMap
|
||
|
||
}
|
||
|
||
},
|
||
onLoad(option) {
|
||
let _this = this
|
||
uni.showLoading({
|
||
title:'正在加载'
|
||
})
|
||
this.getDetail(option.id)
|
||
|
||
uni.$on('2000', function (data){
|
||
if(data) {
|
||
uni.showLoading({
|
||
title:'正在加载'
|
||
})
|
||
_this.pageData.pageIndex = 1
|
||
_this.pageData.isEnd = false
|
||
_this.getDetail(_this.baseData.HIGHWAYPROINST_ID)
|
||
|
||
}
|
||
});
|
||
},
|
||
onUnload() {
|
||
this.$util.addUserBehavior()
|
||
uni.$off('2000');
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
onHide() {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.mt20 {
|
||
margin-top: 10upx;
|
||
}
|
||
.uni-icon {
|
||
font-size: 28upx;
|
||
font-weight: bold;
|
||
}
|
||
.uni-text-gray {
|
||
font-size: 24upx;
|
||
}
|
||
.uni-icon-arrowthindown {
|
||
color: #50b045;
|
||
}
|
||
.uni-icon-arrowthinup {
|
||
color: #ff4952;
|
||
}
|
||
.no-show {
|
||
display: none;
|
||
}
|
||
.pb20 {
|
||
padding-bottom: 40upx;
|
||
}
|
||
.pb8 {
|
||
padding-bottom: 8upx;
|
||
}
|
||
.lh28 {
|
||
line-height: 54upx;
|
||
}
|
||
.base-info {
|
||
background-color: #fff;
|
||
}
|
||
.base-info + .base-info {
|
||
margin-top: 20upx;
|
||
}
|
||
.content-title {
|
||
height: 115upx;
|
||
line-height: 115upx;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.main-card {
|
||
border: 1upx solid #ddd;
|
||
border-radius: 6upx;
|
||
box-shadow: 0 2upx 6upx rgba(0, 0, 0, 0.1);
|
||
margin-left: 24upx;
|
||
margin-right: 24upx;
|
||
}
|
||
.main-card +.main-card {
|
||
margin-top: 20upx;
|
||
}
|
||
.uni-collapse-content .main-card:nth-last-child(1) {
|
||
margin-bottom: 40upx;
|
||
}
|
||
.card-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.card-title h4 {
|
||
padding: 20upx 0 15upx 20upx;
|
||
}
|
||
.card-status {
|
||
font-size: 22upx;
|
||
color: #999;
|
||
padding-right: 16upx;
|
||
}
|
||
.base-body {
|
||
font-size: 24upx;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
padding: 15upx 20upx;
|
||
align-items: flex-start;
|
||
}
|
||
.item-title {
|
||
color: #777;
|
||
width: 120upx;
|
||
text-align: justify;
|
||
height: 40upx;
|
||
font-size: 24upx;
|
||
/* white-space: nowrap; */
|
||
}
|
||
|
||
.item-title:after{
|
||
display: inline-block ;
|
||
content: '';
|
||
padding-left: 100%;
|
||
}
|
||
.base-body + .base-body {
|
||
border-top: 1upx dashed #eee;
|
||
}
|
||
.page-title {
|
||
padding: 15upx 0 15upx 30upx;
|
||
font-size: 26upx;
|
||
color: #949494;
|
||
background-color: #eee;
|
||
}
|
||
.cat-card {
|
||
padding: 30upx 0;
|
||
}
|
||
.cat-box {
|
||
justify-content: space-between;
|
||
display: flex;
|
||
margin-left: 30upx;
|
||
margin-right: 30upx;
|
||
}
|
||
.cat-title {
|
||
font-weight: bold;
|
||
}
|
||
.card-top {
|
||
|
||
padding: 16upx 24upx;
|
||
}
|
||
.card-top .product-name {
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
max-width: 400upx;
|
||
font-size: 30upx;
|
||
padding-bottom: 8upx;
|
||
}
|
||
.card-top .pro-name-box {
|
||
flex: 2;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.product-detail {
|
||
color: #696969;
|
||
font-size: 24upx;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
.card-top .pro-orther-box {
|
||
flex: 1;
|
||
}
|
||
.card-top .pro-orther-box .product-detail {
|
||
justify-content: flex-end;
|
||
}
|
||
.product-price {
|
||
color: #ee8437;
|
||
margin-left: 10upx;
|
||
}
|
||
.product-status {
|
||
color: #6dbf9c;
|
||
font-size: 24upx;
|
||
}
|
||
.card-detail {
|
||
border-top: 1upx dashed #eee;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 0 24upx 24upx 24upx;
|
||
}
|
||
.card-detail li {
|
||
padding-top: 20upx;
|
||
line-height: 30upx;
|
||
/* flex: 33.3%; */
|
||
font-size: 24upx;
|
||
color: #888;
|
||
}
|
||
.card-change-detail {
|
||
border-top: 1upx dashed #eee;
|
||
padding: 0 20upx 20upx 20upx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
}
|
||
.card-change-detail li {
|
||
padding-top: 20upx;
|
||
line-height: 30upx;
|
||
font-size: 25upx;
|
||
padding-right: 20upx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.card-change-detail .through-line {
|
||
text-decoration: line-through;
|
||
color: #cbcbcb;
|
||
margin-left: 16upx;
|
||
}
|
||
.text-b9 {
|
||
color: #b9b9b9
|
||
}
|
||
.process-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
overflow: hidden;
|
||
}
|
||
.uni-list-cell:after {
|
||
height: 0;
|
||
}
|
||
.button-box {
|
||
padding-top: 36upx;
|
||
display: flex;
|
||
/* padding-bottom: 40upx; */
|
||
justify-content: space-around;
|
||
padding-bottom: 6upx;
|
||
}
|
||
.button-box image {
|
||
width: 100upx;
|
||
height: 100upx;
|
||
}
|
||
.button-box span {
|
||
font-size: 24upx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
text-align: center;
|
||
}
|
||
|
||
.ico-user:before{
|
||
background-image: url('../../static/images/tender/lxr.png');
|
||
}
|
||
.ico-sjx:before{
|
||
background-image: url('../../static/images/expense/sjx.png');
|
||
}
|
||
.ico-cate:before{
|
||
width: 26upx;
|
||
height: 25upx;
|
||
background-image: url('../../static/images/txm_logo.png');
|
||
}
|
||
</style> |