470 lines
12 KiB
Vue
470 lines
12 KiB
Vue
<template>
|
|
<view>
|
|
<div class="tabs">
|
|
<div class="item" :class="{ active: active == 1 }" @click="handleTab(1)">派车分配</div>
|
|
<div class="item" :class="{ active: active == 2 }" @click="handleTab(2)">派车审核</div>
|
|
</div>
|
|
<!-- 搜索 -->
|
|
<div class="search flex align-center">
|
|
<div v-if="active == 2" style="width: 30%">
|
|
<div class="search-item" @click="showPicker = true">
|
|
{{ checkStatus || '审核状态' }}
|
|
<u-icon name="arrow-down"></u-icon>
|
|
</div>
|
|
</div>
|
|
<u-input
|
|
v-model="keyWord"
|
|
placeholder="请输入搜索工程或计划"
|
|
suffixIcon="search"
|
|
suffixIconStyle="color: #666"
|
|
shape="circle"
|
|
@blur="handleSearch"
|
|
></u-input>
|
|
</div>
|
|
<!-- 列表 -->
|
|
<div class="list">
|
|
<div class="list-cont" v-for="(item, index) in tableList" :key="index" @click="handleDetail(item)">
|
|
<u-row justify="space-between" customStyle="margin-bottom: 10px; padding: 0 15px;">
|
|
<u-col span="6">
|
|
<div>{{ item.code }}</div>
|
|
</u-col>
|
|
<u-col span="6" v-if="active == 1">
|
|
<div style="display: flex; justify-content: flex-end">
|
|
<u-tag :text="item.status" type="success" v-if="item.supId && item.status == '已派车'"></u-tag>
|
|
<u-tag :text="item.status" type="warning" v-else></u-tag>
|
|
</div>
|
|
</u-col>
|
|
</u-row>
|
|
<u-line style="margin-bottom: 5px"></u-line>
|
|
<div class="list-item">
|
|
<span>工程名称：</span>
|
|
<span>{{ item.proName }}</span>
|
|
</div>
|
|
<div class="list-item df-item">
|
|
<div>
|
|
<span>计划类型：</span>
|
|
<span>{{ item.typeName }}</span>
|
|
</div>
|
|
<div>
|
|
<u-tag v-if="active == 1 && !item.supId" type="primary" text="派车分配" @click="openModal(item)"></u-tag>
|
|
<u-tag
|
|
v-else-if="active == 2 && item.status == 0"
|
|
type="warning"
|
|
text="审核"
|
|
@click="openModal(item)"
|
|
></u-tag>
|
|
<u-tag :text="item.statusName" type="success" v-else-if="active == 2 && item.status == 1"></u-tag>
|
|
<u-tag :text="item.statusName" type="error" v-else-if="active == 2"></u-tag>
|
|
</div>
|
|
</div>
|
|
<div class="list-item">
|
|
<span>供 应 商：</span>
|
|
<span>{{ item.supName }}</span>
|
|
</div>
|
|
</div>
|
|
<!-- 空状态 -->
|
|
<u-empty v-if="tableList.length == 0" mode="data"></u-empty>
|
|
</div>
|
|
|
|
<!-- 弹框 -->
|
|
<u-modal :show="showModal" :title="modalTitle" showCancelButton @cancel="showModal = false" @confirm="submit">
|
|
<view class="slot-content">
|
|
<div v-if="active == 1">
|
|
<u-radio-group v-model="supId" placement="column" @change="groupChange">
|
|
<u-radio
|
|
:customStyle="{ marginBottom: '8px' }"
|
|
v-for="(item, index) in radioList"
|
|
:key="index"
|
|
:label="item.name"
|
|
:name="item.id"
|
|
></u-radio>
|
|
</u-radio-group>
|
|
</div>
|
|
<div v-else>
|
|
<div class="item-wrap">
|
|
<div class="item" :class="{ active: isPass }" @click="isPass = true">通过</div>
|
|
<div class="item" :class="{ active: !isPass }" @click="isPass = false">不通过</div>
|
|
</div>
|
|
<u-textarea
|
|
v-model="remark"
|
|
placeholder="不通过必须填写审核不通过意见"
|
|
:rows="5"
|
|
maxlength="200"
|
|
count
|
|
></u-textarea>
|
|
</div>
|
|
</view>
|
|
</u-modal>
|
|
|
|
<!-- 选择器 -->
|
|
<u-picker
|
|
v-if="showPicker"
|
|
:show="showPicker"
|
|
:columns="[columns]"
|
|
keyName="label"
|
|
@cancel="showPicker = false"
|
|
@confirm="confirm"
|
|
></u-picker>
|
|
|
|
<u-loadmore :status="status" line v-if="tableList.length > 10" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getPlanList, getAuditList, getContractSupList, addPlanSupInfo, dispatchAudit } from '@/api/carManage'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
active: 1,
|
|
showModal: false,
|
|
modalTitle: '',
|
|
readonly: false,
|
|
keyWord: '',
|
|
status: 'loadmore',
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
tableList: [],
|
|
checkStatus: '', // 审核状态
|
|
checkStatusId: '', // 审核状态id
|
|
showPicker: false,
|
|
columns: [
|
|
{
|
|
label: '全部',
|
|
value: ''
|
|
},
|
|
{
|
|
label: '已审核',
|
|
value: '1'
|
|
},
|
|
{
|
|
label: '待审核',
|
|
value: '0'
|
|
}
|
|
],
|
|
// 单选
|
|
radioList: [],
|
|
supId: '', // 供应商id
|
|
supName: '', // 供应商名称
|
|
contractId: '', // 合同id
|
|
remark: '', // 审批意见
|
|
isPass: true, // 是否通过
|
|
row: {}
|
|
}
|
|
},
|
|
computed: {
|
|
justifyContent() {
|
|
return this.active == 1 ? 'flex-start' : 'center'
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
handleTab(index) {
|
|
this.active = index
|
|
this.pageNum = 1
|
|
this.pageSize = 10
|
|
this.tableList = []
|
|
this.total = 0
|
|
this.checkStatus = ''
|
|
this.checkStatusId = ''
|
|
this.keyWord = ''
|
|
this.getList()
|
|
},
|
|
handleSearch() {
|
|
console.log('搜索', this.keyWord.trim())
|
|
this.pageSize = 10
|
|
this.getList()
|
|
},
|
|
async getList() {
|
|
try {
|
|
const params = {
|
|
encryptedData: JSON.stringify({
|
|
keyWord: this.keyWord.trim(),
|
|
status: this.checkStatusId
|
|
}),
|
|
pageNum: this.pageNum,
|
|
pageSize: this.pageSize
|
|
}
|
|
console.log('🚀 ~ getList ~ params', params)
|
|
try {
|
|
let res = null
|
|
if (this.active == 1) {
|
|
// 派车分配-列表
|
|
res = await getPlanList(params)
|
|
} else {
|
|
// 派车审核-列表
|
|
res = await getAuditList(params)
|
|
}
|
|
console.log('🚀 ~ getList ~ res', res)
|
|
this.tableList = res.list
|
|
this.total = res.total
|
|
} catch (error) {
|
|
console.log('🚀 ~ getList ~ error', error)
|
|
}
|
|
} catch (error) {
|
|
console.log('🚀 ~ getList ~ error', error)
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
console.log('🚀 ~ onReachBottom ~ ')
|
|
if (this.total < 10 || this.total == this.tableList.length) {
|
|
this.status = 'nomore'
|
|
return
|
|
}
|
|
this.status = 'loading'
|
|
setTimeout(() => {
|
|
this.pageSize += 10
|
|
this.getList()
|
|
if (this.tableList.length != this.total) this.status = 'loadmore'
|
|
else this.status = 'nomore'
|
|
}, 500)
|
|
console.log('加载..', this.pageSize)
|
|
},
|
|
// 打开弹窗
|
|
openModal(item) {
|
|
this.row = item
|
|
this.showModal = true
|
|
if (this.active == 1) {
|
|
this.getContractSupList(item)
|
|
this.modalTitle = '指定派车供应商'
|
|
this.supId = ''
|
|
this.supName = ''
|
|
} else {
|
|
this.modalTitle = '派车审核'
|
|
this.isPass = true
|
|
this.remark = ''
|
|
}
|
|
},
|
|
// 获取供应商列表
|
|
async getContractSupList(item) {
|
|
console.log('🚀 ~ 供应商-列表 ~ item:', item)
|
|
const params = {
|
|
encryptedData: JSON.stringify({ type: item.type })
|
|
}
|
|
try {
|
|
const res = await getContractSupList(params)
|
|
console.log('🚀 ~ getContractSupList ~ res', res)
|
|
this.radioList = res.data
|
|
} catch (error) {
|
|
console.log('🚀 ~ getContractSupList ~ error', error)
|
|
}
|
|
},
|
|
confirm(e) {
|
|
console.log('🚀 ~ confirm ~ e', e)
|
|
this.checkStatus = e.value[0].label
|
|
this.checkStatusId = e.value[0].value
|
|
this.getList()
|
|
this.showPicker = false
|
|
},
|
|
groupChange() {
|
|
console.log('🚀 ~ supId', this.supId)
|
|
this.supName = this.radioList.find(item => item.id == this.supId).name
|
|
this.contractId = this.radioList.find(item => item.id == this.supId).contractId
|
|
console.log('🚀 ~ supName', this.supName, this.contractId)
|
|
},
|
|
// 查看详情
|
|
handleDetail(item) {
|
|
console.log('查看详情', item)
|
|
let isPlan = false
|
|
let isAudit = false
|
|
let isDetail = false
|
|
let active = null
|
|
if (this.active == 1 && !item.supId) {
|
|
isPlan = true
|
|
active = 1
|
|
} else if (this.active == 2 && item.status == 0) {
|
|
isAudit = true
|
|
active = 2
|
|
} else {
|
|
isDetail = true
|
|
active = 1
|
|
}
|
|
const params = {
|
|
...item,
|
|
isPlan,
|
|
isAudit,
|
|
isDetail,
|
|
active
|
|
}
|
|
uni.navigateTo({
|
|
url: `/pages/sendACarSystem/details?params=${JSON.stringify(params)}`
|
|
})
|
|
},
|
|
// 提交-派车分配/审核
|
|
submit() {
|
|
console.log('提交')
|
|
if (this.active == 1) {
|
|
console.log('派车分配', this.supId)
|
|
if (!this.supId) {
|
|
uni.showToast({
|
|
title: '请选择派车供应商',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
this.addPlanSupInfo()
|
|
} else {
|
|
console.log('派车审核', this.isPass, this.remark)
|
|
if (!this.isPass && !this.remark) {
|
|
uni.showToast({
|
|
title: '请填写审核不通过意见',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
this.dispatchAudit()
|
|
}
|
|
this.showModal = false
|
|
this.getList()
|
|
},
|
|
// 确认分配供应商
|
|
async addPlanSupInfo() {
|
|
const params = {
|
|
encryptedData: JSON.stringify({
|
|
type: this.row.type,
|
|
id: this.row.planId,
|
|
supId: this.supId,
|
|
supName: this.supName,
|
|
contractId: this.contractId
|
|
})
|
|
}
|
|
try {
|
|
const res = await addPlanSupInfo(params)
|
|
console.log('🚀 ~ addPlanSupInfo ~ res', res)
|
|
uni.showToast({
|
|
title: '分配成功',
|
|
icon: 'success'
|
|
})
|
|
} catch (error) {
|
|
console.log('🚀 ~ addPlanSupInfo ~ error', error)
|
|
}
|
|
},
|
|
// 派车审核
|
|
async dispatchAudit() {
|
|
const params = {
|
|
encryptedData: JSON.stringify({
|
|
id: this.row.outId,
|
|
planId: this.row.planId,
|
|
status: this.isPass ? 1 : 2,
|
|
remark: this.remark
|
|
})
|
|
}
|
|
try {
|
|
const res = await dispatchAudit(params)
|
|
console.log('🚀 ~ dispatchAudit ~ res', res)
|
|
uni.showToast({
|
|
title: '审核成功',
|
|
icon: 'success'
|
|
})
|
|
} catch (error) {
|
|
console.log('🚀 ~ dispatchAudit ~ error', error)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #f8f8f8;
|
|
}
|
|
.search {
|
|
margin: 15px;
|
|
display: flex;
|
|
.search-item {
|
|
margin-right: 10px;
|
|
border: 1px solid #e8e8e8;
|
|
padding: 7px 10px;
|
|
border-radius: 30px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.list {
|
|
height: calc(100vh - 112px);
|
|
overflow-y: auto;
|
|
}
|
|
.list-cont {
|
|
margin: 15px;
|
|
margin-top: 0;
|
|
padding: 15px 0;
|
|
margin-bottom: 15px;
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
|
|
|
.list-item {
|
|
padding: 5px 15px;
|
|
}
|
|
|
|
.df-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.tabs {
|
|
width: 100%;
|
|
height: 45px;
|
|
background-color: #fff;
|
|
z-index: 99;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: #fff;
|
|
.item {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
color: #666;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
border-bottom: 2px solid #dcdcdc; // 添加透明边框
|
|
transition: color 0.3s ease, border-bottom 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
|
|
|
|
// 激活状态
|
|
&.active {
|
|
color: $u-primary;
|
|
border-bottom: 2px solid $u-primary;
|
|
background-color: #f8f8f8;
|
|
}
|
|
}
|
|
}
|
|
.slot-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
.item-wrap {
|
|
margin-bottom: 15px;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.item {
|
|
width: 45%;
|
|
height: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 1px solid #e8e8e8;
|
|
border-radius: 30px;
|
|
background-color: #f8f8f8;
|
|
color: #666;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
|
|
|
|
&.active {
|
|
color: $u-primary;
|
|
background-color: #f8f8f8;
|
|
border: 1px solid $u-primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|