1
This commit is contained in:
parent
bd5be7e4e9
commit
1c6a9c60b8
@ -206,12 +206,12 @@
|
|||||||
<view v-if="isDetail == '1'" class="card cardInfo projCard">
|
<view v-if="isDetail == '1'" class="card cardInfo projCard">
|
||||||
<view class="projTitle">维修进度记录表</view>
|
<view class="projTitle">维修进度记录表</view>
|
||||||
<view class="projList">
|
<view class="projList">
|
||||||
<!-- <view class="tushi-box">-->
|
<view class="tushi-box">
|
||||||
<!-- <view class="tushi-item">- 待维修 </view>-->
|
<view class="tushi-item" style="color: #B7BDC6">待维修 </view>
|
||||||
<!-- <view class="tushi-item" style="color: #E8A321">○ 维修中 </view>-->
|
<view class="tushi-item" style="color: #E8A321">维修中 </view>
|
||||||
<!-- <view class="tushi-item" style="color: #17DBB1;">√ 已完成</view>-->
|
<view class="tushi-item" style="color: #2979FF;">已完成</view>
|
||||||
<!-- </view>-->
|
</view>
|
||||||
<uni-steps :options="list2" active-color="#007AFF" :active="active" direction="column" />
|
<uni-steps :canOpenCus="canOpenCus" :options="list2" active-color="#007AFF" :active="active" :doingActive="doingActive" direction="column" @prviewImage="prviewImage" @sendCusImgManage="sendCusImgManage"/>
|
||||||
<!-- <uni-table ref="table" :loading="false" border stripe emptyText="暂无数据">-->
|
<!-- <uni-table ref="table" :loading="false" border stripe emptyText="暂无数据">-->
|
||||||
<!-- <uni-tr>-->
|
<!-- <uni-tr>-->
|
||||||
<!-- <uni-th width="50" align="center">序号</uni-th>-->
|
<!-- <uni-th width="50" align="center">序号</uni-th>-->
|
||||||
@ -375,8 +375,10 @@ export default {
|
|||||||
//是否是通知客户取车操作,默认都不是
|
//是否是通知客户取车操作,默认都不是
|
||||||
ifCallCus:false,
|
ifCallCus:false,
|
||||||
//维修项目进度记录表
|
//维修项目进度记录表
|
||||||
tableData:[],
|
// tableData:[],
|
||||||
active: 1,
|
active: -1,
|
||||||
|
doingActive: -1,
|
||||||
|
//维修项目进度记录表
|
||||||
list2: [],
|
list2: [],
|
||||||
//通知客户取车联系人对象
|
//通知客户取车联系人对象
|
||||||
callServiceInfo:{
|
callServiceInfo:{
|
||||||
@ -832,9 +834,12 @@ export default {
|
|||||||
let thisObj = res.data[i]
|
let thisObj = res.data[i]
|
||||||
thisObj.title = thisObj.itemName
|
thisObj.title = thisObj.itemName
|
||||||
if(thisObj.itemStatus=='03'){
|
if(thisObj.itemStatus=='03'){
|
||||||
//这个项目已处理完毕,维修完成的项目设置为这个
|
//这个项目已处理完毕,
|
||||||
endIndex = i
|
endIndex = i
|
||||||
thisObj.desc = formatTimestamp(thisObj.updateTime)
|
thisObj.desc = formatTimestamp(thisObj.updateTime)
|
||||||
|
}else if(thisObj.itemStatus=='02'){
|
||||||
|
//正在处理中
|
||||||
|
this.doingActive = i
|
||||||
}
|
}
|
||||||
this.list2.push(thisObj)
|
this.list2.push(thisObj)
|
||||||
}
|
}
|
||||||
@ -1193,6 +1198,7 @@ export default {
|
|||||||
gap: 20rpx;
|
gap: 20rpx;
|
||||||
|
|
||||||
.tushi-box{
|
.tushi-box{
|
||||||
|
font-size: 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
@ -4,10 +4,27 @@
|
|||||||
<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
|
<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
|
||||||
<view v-for="(item,index) in options" :key="index"
|
<view v-for="(item,index) in options" :key="index"
|
||||||
:class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
|
:class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
|
||||||
<text :style="{color:index === active?activeColor:deactiveColor}"
|
<text v-if="doingActive==index" :style="{color:doingColor}"
|
||||||
|
:class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
|
||||||
|
<text v-else :style="{color:index <= active?activeColor:deactiveColor}"
|
||||||
:class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
|
:class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
|
||||||
<text v-if="item.desc" :style="{color: deactiveColor}"
|
<text v-if="item.desc" :style="{color: deactiveColor}"
|
||||||
:class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text>
|
:class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text>
|
||||||
|
<template >
|
||||||
|
<view class="projImg" v-if="item.recordsItemList.length>0">
|
||||||
|
<image v-for="(img, imgIndex) in item.recordsItemList" @click="prviewImage(item.recordsItemList,imgIndex)" :key="imgIndex" :src="imgUrlPrex + img.image"
|
||||||
|
class="projImgItem"></image>
|
||||||
|
</view>
|
||||||
|
<view class="projSend" v-if="item.recordsItemList.length>0 && canOpenCus">
|
||||||
|
<template >
|
||||||
|
<uni-icons v-if="doingActive==index" type="cloud-upload" size="18" :style="{color:doingColor}"></uni-icons>
|
||||||
|
<uni-icons v-else type="cloud-upload" size="18" :style="{color:index <= active?activeColor:deactiveColor}"></uni-icons>
|
||||||
|
<!-- <image mode="aspectFit" src="@/static/icons/send.png" class="projIcon" :style="{color:index <= active?activeColor:deactiveColor}"></image>-->
|
||||||
|
<text v-if="doingActive==index" :style="{color: doingColor}" @click="sendCusImgManage(item.recordsItemList)">发送给客户</text>
|
||||||
|
<text v-else :style="{color:index <= active?activeColor:deactiveColor}" @click="sendCusImgManage(item.recordsItemList)">发送给客户</text>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']">
|
<view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']">
|
||||||
@ -17,12 +34,18 @@
|
|||||||
:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']"
|
:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']"
|
||||||
:style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}">
|
:style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}">
|
||||||
</view>
|
</view>
|
||||||
<view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']"
|
<!-- <view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']"-->
|
||||||
v-if="index === active">
|
<!-- v-if="index === active">-->
|
||||||
<uni-icons :color="activeColor" :type="activeIcon" size="20" />
|
<!-- <uni-icons :color="activeColor" :type="activeIcon" size="20" />-->
|
||||||
</view>
|
<!-- </view>-->
|
||||||
|
<view v-if="doingActive==index" :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']"
|
||||||
|
:style="{backgroundColor:doingColor}" >
|
||||||
|
<text style="font-size: 16px;color: white">{{index+1}}</text>
|
||||||
|
</view>
|
||||||
<view v-else :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']"
|
<view v-else :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']"
|
||||||
:style="{backgroundColor:index<active?activeColor:deactiveColor}" />
|
:style="{backgroundColor:index<=active?activeColor:deactiveColor}" >
|
||||||
|
<text style="font-size: 16px;color: white">{{index+1}}</text>
|
||||||
|
</view>
|
||||||
<view
|
<view
|
||||||
:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']"
|
:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']"
|
||||||
:style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}" />
|
:style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}" />
|
||||||
@ -44,7 +67,7 @@
|
|||||||
* @property {String} activeColor 选中状态的颜色
|
* @property {String} activeColor 选中状态的颜色
|
||||||
* @property {Array} options 数据源,格式为:[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
|
* @property {Array} options 数据源,格式为:[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
|
||||||
*/
|
*/
|
||||||
|
import config from '@/config'
|
||||||
export default {
|
export default {
|
||||||
name: 'UniSteps',
|
name: 'UniSteps',
|
||||||
props: {
|
props: {
|
||||||
@ -53,6 +76,11 @@
|
|||||||
type: String,
|
type: String,
|
||||||
default: 'row'
|
default: 'row'
|
||||||
},
|
},
|
||||||
|
canOpenCus: {
|
||||||
|
// 是否可以操作发送给客户
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
activeColor: {
|
activeColor: {
|
||||||
// 激活状态颜色
|
// 激活状态颜色
|
||||||
type: String,
|
type: String,
|
||||||
@ -63,10 +91,20 @@
|
|||||||
type: String,
|
type: String,
|
||||||
default: '#B7BDC6'
|
default: '#B7BDC6'
|
||||||
},
|
},
|
||||||
|
doingColor: {
|
||||||
|
// 进行中颜色
|
||||||
|
type: String,
|
||||||
|
default: '#E8A321'
|
||||||
|
},
|
||||||
active: {
|
active: {
|
||||||
// 当前步骤
|
// 当前已经处理完的步骤
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0
|
default: -1
|
||||||
|
},
|
||||||
|
doingActive: {
|
||||||
|
// 当前正在处理的步骤
|
||||||
|
type: Number,
|
||||||
|
default: -1
|
||||||
},
|
},
|
||||||
activeIcon: {
|
activeIcon: {
|
||||||
// 当前步骤
|
// 当前步骤
|
||||||
@ -83,6 +121,7 @@
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
heightArr: [],
|
heightArr: [],
|
||||||
|
imgUrlPrex:config.baseImageUrl,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -95,6 +134,14 @@
|
|||||||
}).exec()
|
}).exec()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
methods:{
|
||||||
|
prviewImage(itemList,index){
|
||||||
|
this.$emit("prviewImage",itemList,index)
|
||||||
|
},
|
||||||
|
sendCusImgManage(itemList){
|
||||||
|
this.$emit("sendCusImgManage",itemList)
|
||||||
|
},
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -164,15 +211,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.uni-steps__row-title {
|
.uni-steps__row-title {
|
||||||
font-size: 14px;
|
font-size: 28rpx;
|
||||||
line-height: 16px;
|
line-height: 32rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-steps__column-title {
|
.uni-steps__column-title {
|
||||||
font-size: 18px;
|
font-size: 28rpx;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
line-height: 24px;
|
line-height: 32rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-steps__row-desc {
|
.uni-steps__row-desc {
|
||||||
@ -182,9 +229,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.uni-steps__column-desc {
|
.uni-steps__column-desc {
|
||||||
font-size: 16px;
|
font-size: 25rpx;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
line-height: 20px;
|
line-height: 32rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-steps__row-container {
|
.uni-steps__row-container {
|
||||||
@ -253,16 +300,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.uni-steps__row-circle {
|
.uni-steps__row-circle {
|
||||||
width: 15px;
|
width: 20px;
|
||||||
height: 15px;
|
height: 20px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: #B7BDC6;
|
background-color: #B7BDC6;
|
||||||
margin: 0px 3px;
|
margin: 0px 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-steps__column-circle {
|
.uni-steps__column-circle {
|
||||||
width: 15px;
|
width: 20px;
|
||||||
height: 15px;
|
height: 20px;
|
||||||
|
text-align: center;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: #B7BDC6;
|
background-color: #B7BDC6;
|
||||||
margin: 4px 0px 5px 0px;
|
margin: 4px 0px 5px 0px;
|
||||||
@ -277,4 +325,31 @@
|
|||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
margin: 2px 0px;
|
margin: 2px 0px;
|
||||||
}
|
}
|
||||||
|
.projImg {
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, 120rpx);
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 20rpx;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
|
||||||
|
.projImgItem {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
background-color: #efefef;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.projSend {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28rpx;
|
||||||
|
column-gap: 8rpx;
|
||||||
|
}
|
||||||
|
.projIcon{
|
||||||
|
width: 28rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user