240 lines
9.3 KiB
Vue
240 lines
9.3 KiB
Vue
<template>
|
||
<div>
|
||
<el-form label-position="right" label-width="110px" v-loading="loading" :disabled="true">
|
||
<el-form-item label="公司名称：">
|
||
<el-select v-model="itemInfo.company_id" placeholder="请选择" clearable filterable style="width: 320px;">
|
||
<el-option v-for="it in companyList" :key="it.id" :label="it.name" :value="it.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="选品：">
|
||
<el-select v-model="itemInfo.manager_id" placeholder="请选择" clearable filterable style="width: 320px;">
|
||
<el-option v-for="it in managerList" :key="it.id" :label="it.username" :value="it.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="供应商名称：">
|
||
<el-select v-model="itemInfo.purchase_supplier_id" placeholder="请选择" clearable filterable style="width: 320px;">
|
||
<el-option v-for="it in supplierList" :key="it.id" :label="it.supplier_name" :value="it.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="商品信息：">
|
||
<el-table :data="goodsList" style="width: 100%;margin-top: 15px;" border>
|
||
<el-table-column prop="goods.title" label="商品名称" />
|
||
<el-table-column label="规格名称">
|
||
<template #default="scope">
|
||
<span>{{ scope.row.sku && scope.row.sku.title || scope.row.title }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="预计产品单价（含税）" align="center" prop="expect_unit_price" />
|
||
<el-table-column label="实际产品单价（含税）" align="center" prop="real_unit_price" />
|
||
<el-table-column label="单位" align="center" prop="unit" />
|
||
<el-table-column label="预计采购数量" align="center" prop="expect_quantity" />
|
||
<el-table-column label="实际采购数量" prop="real_quantity" align="center" />
|
||
<el-table-column label="预付款比例(%)" align="center">
|
||
<template #default="scope">
|
||
<span>{{ scope.row.prepayment_ratio }}%</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="交货时间" width="160" align="center" prop="delivery_date" />
|
||
<el-table-column label="预计订单金额(元)" align="center" prop="estimated_order_amount" />
|
||
<el-table-column label="实际订单金额" prop="real_amount" align="center" />
|
||
<el-table-column label="预付款(元)" align="center" prop="advance_payment" />
|
||
<el-table-column label="尾款(元)" align="center" prop="balance_payment" />
|
||
</el-table>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="其他费用：">
|
||
<el-table :data="feesList" style="width: 100%;margin-top: 15px;" border>
|
||
<el-table-column label="费用名称" >
|
||
<template #default="scope">
|
||
<span class="iconfont icon-bohui" v-if="scope.row.has_paid_amount * 1 == 0"></span>
|
||
<span>{{ scope.row.fee_name }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="订单金额" prop="amount" />
|
||
<el-table-column label="打款信息">
|
||
<template #default="scope">
|
||
<el-select v-model="scope.row.other_expense_account_id" placeholder="请选择" clearable filterable>
|
||
<el-option v-for="it in accountList" :key="it.id" :label="it.name" :value="it.id" />
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-form-item>
|
||
<el-form-item label="备注：">
|
||
<span>{{ itemInfo.remark }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="逾期交货说明：">
|
||
<span>{{ itemInfo.late_delivery_explanation }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="总计：">
|
||
<div class="sumbox">
|
||
总预计订单金额（元）：<span>{{ sumData.total_amount || '0.00' }}</span>，
|
||
总预付款（元）：<span>{{ sumData.pre_pay_amount || '0.00' }}</span>，
|
||
总尾款（元）：<span>{{ sumData.balance_amount || '0.00' }}</span>
|
||
</div>
|
||
</el-form-item>
|
||
<div class="h5Tit">其余信息</div>
|
||
<el-form-item label="开团时间：">
|
||
<span>{{ itemInfo.sold_start_time }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="预计到仓时间：">
|
||
<span>{{ itemInfo.arrived_time }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="仓库：">
|
||
<span>{{ itemInfo.warehouse_name }}</span>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div v-if="itemInfo.approval_instances && itemInfo.approval_instances.length">
|
||
<div v-for="it in itemInfo.approval_instances" :key="it.id">
|
||
<div v-if="(it.payment_voucher && it.payment_voucher.length) || (it.related_images && it.related_images.length)">
|
||
<h4>{{it.type == 1 ? '采购订单' : it.type == 2 ? '预付款打款' : '尾款打款'}}</h4>
|
||
<el-form label-position="right" label-width="110px">
|
||
<div v-if="it.amount * 1 > 0" style="padding-bottom: 10px;">申请打款金额：{{it.amount}}元</div>
|
||
<el-form-item label="支付凭证：" v-if="it.payment_voucher && it.payment_voucher.length">
|
||
<div class="imgBox">
|
||
<el-image :z-index="9999" v-for="(itm, j) in it.payment_voucher" :key="j" :src="itm" :hide-on-click-modal="true" :preview-src-list="[itm]" fit="cover" :preview-teleported="true" />
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="合同照片：" v-if="it.related_images && it.related_images.length">
|
||
<div class="imgBox">
|
||
<el-image :z-index="9999" v-for="(itm, j) in it.related_images" :key="j" :src="itm" :hide-on-click-modal="true" :preview-src-list="[itm]" fit="cover" :preview-teleported="true" />
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="space"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { Plus, Search } from "@element-plus/icons"
|
||
import { reactive, toRefs, watch } from 'vue'
|
||
import { get } from '@/api/request'
|
||
|
||
export default {
|
||
components: { Plus, Search },
|
||
props: {
|
||
show: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
id: {
|
||
type: Number,
|
||
default: 0,
|
||
}
|
||
},
|
||
setup(props, context) {
|
||
const data = reactive({
|
||
launchId: 0,
|
||
companyList: [],
|
||
managerList: [],
|
||
supplierList: [],
|
||
accountList: [],
|
||
loading: false,
|
||
goodsList: [],
|
||
itemInfo: {},
|
||
feesList: [],
|
||
sumData: {}
|
||
})
|
||
|
||
function getDetail() {
|
||
data.loading = true
|
||
get(`/api/purchaseOrder/${props.id}`).then((res) => {
|
||
data.itemInfo = res.data
|
||
data.feesList = res.data.other_expenses
|
||
let num1 = 0, num2 = 0
|
||
res.data.products.forEach((item) => {
|
||
if(item.expect_unit_price && item.expect_quantity) {
|
||
item.estimated_order_amount = (item.expect_unit_price * item.expect_quantity).toFixed(2)
|
||
if(item.prepayment_ratio) {
|
||
item.advance_payment = ((item.estimated_order_amount * item.prepayment_ratio) / 100).toFixed(2)
|
||
item.balance_payment = (((item.estimated_order_amount * 100) - (item.advance_payment * 100)) / 100).toFixed(2)
|
||
}
|
||
num1 += item.expect_unit_price * item.expect_quantity
|
||
if(item.prepayment_ratio) {
|
||
num2 += num1 * item.prepayment_ratio
|
||
}
|
||
}
|
||
})
|
||
data.sumData.total_amount = num1.toFixed(2)
|
||
data.sumData.pre_pay_amount = (num2 / 100).toFixed(2)
|
||
data.sumData.balance_amount = (((data.sumData.total_amount * 100) - (data.sumData.pre_pay_amount * 100)) / 100).toFixed(2)
|
||
data.goodsList = res.data.products
|
||
data.loading = false
|
||
}).catch(() => {
|
||
data.loading = false
|
||
})
|
||
}
|
||
|
||
function getCompany() {
|
||
get(`/api/company/all`, {page: 1, pageSize: 1000}).then((res) => {
|
||
data.companyList = res.data
|
||
})
|
||
}
|
||
|
||
function getManagerList() {
|
||
get('/api/staff', {role_id: 1}).then((res) => {
|
||
data.managerList = res.data
|
||
})
|
||
}
|
||
|
||
function getSupplier() {
|
||
get(`/api/purchaseSupplier`, {page: 1, pageSize: 1000}).then((res) => {
|
||
data.supplierList = res.data
|
||
})
|
||
}
|
||
|
||
function getAccount() {
|
||
get(`/api/otherExpenseAccount`, {page: 1, pageSize: 1000}).then((res) => {
|
||
data.accountList = res.data
|
||
})
|
||
}
|
||
|
||
watch(() => props, (newProps) => {
|
||
if (newProps.show) {
|
||
getDetail()
|
||
getCompany()
|
||
getManagerList()
|
||
getSupplier()
|
||
getAccount()
|
||
}
|
||
}, { deep: true, immediate: true })
|
||
|
||
return {
|
||
...toRefs(data),
|
||
getCompany,
|
||
getManagerList,
|
||
getSupplier,
|
||
getDetail,
|
||
getAccount
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.space{
|
||
background: repeating-linear-gradient(-45deg, #F56C6C 0, #F56C6C 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
|
||
height: 2px;
|
||
background-size: 80px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.icon-bohui{
|
||
color: #f00;
|
||
margin-right: 5px;
|
||
font-size: 20px;
|
||
vertical-align: bottom;
|
||
}
|
||
.imgBox{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.el-image{
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 4px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
</style> |