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>
|