305 lines
8.1 KiB
Vue
305 lines
8.1 KiB
Vue
<template>
|
||
<div>
|
||
<uni-section title="基本信息" type="line"></uni-section>
|
||
<div class="list-cont">
|
||
<div class="list-item">
|
||
<div class="title">计划类型：</div>
|
||
<div>{{ formData.typeName }}</div>
|
||
</div>
|
||
<div class="list-item">
|
||
<div class="title">项目名称：</div>
|
||
<div>{{ formData.proName }}</div>
|
||
</div>
|
||
<div class="list-item">
|
||
<div class="title">项目部分：</div>
|
||
<div>{{ formData.projectPart }}</div>
|
||
</div>
|
||
<div class="list-item">
|
||
<div class="title">施工地点：</div>
|
||
<div>{{ formData.projectContent }}</div>
|
||
</div>
|
||
<div class="list-item">
|
||
<div class="title">需要日期：</div>
|
||
<div>{{ formData.needDay }}</div>
|
||
</div>
|
||
<div class="list-item">
|
||
<div class="title">计划说明：</div>
|
||
<div>{{ formData.remark }}</div>
|
||
</div>
|
||
</div>
|
||
<uni-section title="申请明细" type="line"></uni-section>
|
||
<div class="list-cont" v-for="(item, index) in tableList" :key="index">
|
||
<div class="list-item">
|
||
<span class="title">类 型：</span>
|
||
<span>{{ item.type }}</span>
|
||
</div>
|
||
<div class="list-item">
|
||
<span class="title">名 称：</span>
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
<div class="list-item">
|
||
<span class="title">规 格：</span>
|
||
<span>{{ item.model }}</span>
|
||
</div>
|
||
<div class="list-item">
|
||
<span class="title">单 位：</span>
|
||
<span>{{ item.unit }}</span>
|
||
</div>
|
||
<div class="list-item">
|
||
<span class="title">需 用 量：</span>
|
||
<span>{{ item.needNum }}</span>
|
||
</div>
|
||
<div class="list-item">
|
||
<span class="title">需要天数：</span>
|
||
<span>{{ item.needDay }}</span>
|
||
</div>
|
||
<div class="list-item">
|
||
<span class="title">备 注：</span>
|
||
<span>{{ item.remark }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- btn -->
|
||
<div class="btn-wrap" v-if="opt.isPlan">
|
||
<div style="margin: 0 15px">
|
||
<u-button type="primary" @click="openModal">派 车 分 配</u-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 弹框 -->
|
||
<u-modal :show="showModal" title="指定派车供应商" showCancelButton @cancel="showModal = false" @confirm="submit">
|
||
<view class="slot-content">
|
||
<div>
|
||
<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>
|
||
</view>
|
||
</u-modal>
|
||
|
||
<!-- 空状态 -->
|
||
<u-empty v-if="tableList.length == 0" mode="data"></u-empty>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getDispatchCarListData, getPlanDetails, getContractSupList, addPlanSupInfo } from '@/api/carManage'
|
||
|
||
export default {
|
||
props: {
|
||
opt: {
|
||
type: Object,
|
||
default: () => {}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
showModal: false,
|
||
formData: {
|
||
planType: '', // 计划类型
|
||
proName: '', // 项目名称
|
||
proPart: '', // 项目部分
|
||
jobContent: '', // 工作内容
|
||
needDate: '', // 需要日期
|
||
explain: '' // 计划说明
|
||
},
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
tableList: [
|
||
{
|
||
type: '类型1',
|
||
name: '名称1',
|
||
specification: '规格1',
|
||
unit: '单位1',
|
||
num: '数量1',
|
||
date: '需要天数1',
|
||
remark: '备注1'
|
||
},
|
||
{
|
||
type: '类型2',
|
||
name: '名称2',
|
||
specification: '规格2',
|
||
unit: '单位2',
|
||
num: '数量2',
|
||
date: '需要天数2',
|
||
remark: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
|
||
}
|
||
],
|
||
radioList: [],
|
||
supId: '', // 供应商id
|
||
supName: '', // 供应商名称
|
||
contractId: '' // 合同id
|
||
}
|
||
},
|
||
mounted() {
|
||
console.log('🚀 ~ 计划详情 ~ this.opt', this.opt)
|
||
this.getPlanDetails()
|
||
},
|
||
methods: {
|
||
// 计划详情-到货确认单
|
||
async getDispatchCarListData() {
|
||
try {
|
||
const params = {
|
||
encryptedData: JSON.stringify({ id: this.opt.id })
|
||
}
|
||
const res = await getDispatchCarListData(params)
|
||
console.log('🚀 ~ getDispatchCarListData ~ res', res)
|
||
this.formData = res.data
|
||
this.tableList = res.data.detailsList || []
|
||
} catch (error) {
|
||
console.log('🚀 ~ getDispatchCarListData ~ error', error)
|
||
}
|
||
},
|
||
// 计划详情-派车管理
|
||
async getPlanDetails() {
|
||
try {
|
||
const params = {
|
||
encryptedData: JSON.stringify({ planId: this.opt.planId })
|
||
}
|
||
const res = await getPlanDetails(params)
|
||
console.log('🚀 ~ 计划详情-派车管理 ~ res', res)
|
||
this.formData = res.data
|
||
this.tableList = res.data.detailsList || []
|
||
} catch (error) {
|
||
console.log('🚀 ~ getPlanDetails ~ error', error)
|
||
}
|
||
},
|
||
// 获取供应商列表
|
||
async openModal() {
|
||
this.showModal = true
|
||
console.log('🚀 ~ 供应商-列表 ~ item:', this.opt)
|
||
const params = {
|
||
encryptedData: JSON.stringify({ type: this.opt.type })
|
||
}
|
||
try {
|
||
const res = await getContractSupList(params)
|
||
console.log('🚀 ~ getContractSupList ~ res', res)
|
||
this.radioList = res.data
|
||
} catch (error) {
|
||
console.log('🚀 ~ openModal ~ error', error)
|
||
}
|
||
},
|
||
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)
|
||
},
|
||
submit() {
|
||
console.log('🚀 ~ submit ~ this.supId', this.supId)
|
||
if (!this.supId) {
|
||
uni.showToast({
|
||
title: '请选择派车供应商',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
this.addPlanSupInfo()
|
||
},
|
||
// 确认分配供应商
|
||
async addPlanSupInfo() {
|
||
const params = {
|
||
encryptedData: JSON.stringify({
|
||
type: this.opt.type,
|
||
id: this.opt.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'
|
||
})
|
||
setTimeout(() => {
|
||
this.showModal = false
|
||
uni.navigateBack()
|
||
}, 1000)
|
||
} catch (error) {
|
||
console.log('🚀 ~ addPlanSupInfo ~ error', error)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
padding-bottom: 70px;
|
||
}
|
||
.list-cont {
|
||
margin: 15px;
|
||
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;
|
||
|
||
.title {
|
||
color: #999;
|
||
}
|
||
|
||
div {
|
||
line-height: 1.9;
|
||
}
|
||
span {
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
}
|
||
.btn-wrap {
|
||
width: 100%;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
background-color: #fff;
|
||
padding: 15px 0 20px;
|
||
}
|
||
.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>
|