522 lines
17 KiB
Vue
522 lines
17 KiB
Vue
<template>
|
||
<el-dialog v-model="showDialog" title="采购订单审批" width="1200px" @close="closeDialog">
|
||
<el-form label-position="right" label-width="110px" v-loading="loading" :disabled="elType == 'view'">
|
||
<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-button type="primary" @click="openGoods()">添加商品</el-button>
|
||
|
||
<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">
|
||
<template #default="scope">
|
||
<el-input class="inpt" type="text" v-model="scope.row.expect_unit_price" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="单位" align="center">
|
||
<template #default="scope">
|
||
<el-input class="inpt" type="text" v-model="scope.row.unit" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="预计采购数量" align="center">
|
||
<template #default="scope">
|
||
<el-input class="inpt" type="text" v-model="scope.row.expect_quantity" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="预付款比例(%)" align="center">
|
||
<template #default="scope">
|
||
<div style="display: flex;align-items: center;"><el-input type="text" class="inpt" v-model="scope.row.prepayment_ratio" /> %</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="交货时间" width="160" align="center">
|
||
<template #default="scope">
|
||
<el-date-picker
|
||
v-model="scope.row.delivery_date"
|
||
type="date"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
placeholder="选择日期"
|
||
style="width: 130px;"
|
||
clearable>
|
||
</el-date-picker>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" align="center" width="100">
|
||
<template #default="scope">
|
||
<el-button type="danger" size="mini" @click="removeGoods(scope.$index, scope.row.product_id)"><el-icon><DeleteFilled /></el-icon></el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="其他费用：">
|
||
<el-button type="primary" @click="addFee">添加其他费用</el-button>
|
||
|
||
<el-table :data="feesList" style="width: 100%;margin-top: 15px;" border>
|
||
<el-table-column label="费用名称" align="center">
|
||
<template #default="scope">
|
||
<el-input type="text" v-model="scope.row.fee_name" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="订单金额">
|
||
<template #default="scope">
|
||
<el-input type="text" v-model="scope.row.amount" />
|
||
</template>
|
||
</el-table-column>
|
||
<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-column label="操作" align="center" width="100">
|
||
<template #default="scope">
|
||
<el-button type="danger" size="mini" @click="removeFee(scope.$index)"><el-icon><DeleteFilled /></el-icon></el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-form-item>
|
||
<el-form-item label="备注：">
|
||
<el-input v-model="itemInfo.remark" placeholder="请填写备注内容" type="textarea" :rows="4"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="逾期交货说明：">
|
||
<el-input v-model="itemInfo.late_delivery_explanation" placeholder="请填写逾期交货说明" type="textarea" :rows="4"></el-input>
|
||
</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="space"></div>
|
||
<div class="h5Tit">其余信息</div>
|
||
<el-form-item label="开团时间：">
|
||
<el-date-picker
|
||
v-model="itemInfo.sold_start_time"
|
||
type="datetime"
|
||
format="YYYY-MM-DD HH:mm:ss"
|
||
value-format="YYYY-MM-DD HH:mm:ss"
|
||
placeholder="请选择开团时间"
|
||
clearable>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="预计到仓时间：">
|
||
<el-date-picker
|
||
v-model="itemInfo.arrived_time"
|
||
type="datetime"
|
||
format="YYYY-MM-DD HH:mm:ss"
|
||
value-format="YYYY-MM-DD HH:mm:ss"
|
||
placeholder="预计到仓时间"
|
||
clearable>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="仓库：">
|
||
<el-input type="text" v-model="itemInfo.warehouse_name" placeholder="请输入仓库名称" clearable style="width: 320px;" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<span class="dialog-footer" v-if="elType != 'view'">
|
||
<el-button @click="closeDialog()">取消</el-button>
|
||
<el-button type="primary" @click="commitApproval()" :loading="btnloading">提交审批</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<el-dialog v-model="showGoods" width="900px" title="添加商品">
|
||
<div class="searchBox">
|
||
<div class="row">
|
||
<span class="span">商品名称：</span>
|
||
<div class="right">
|
||
<el-select v-model="filter.goodsIds" placeholder="请选择" clearable filterable class="wid100">
|
||
<el-option v-for="it in goodskuList" :key="it.id" :label="it.title" :value="it.id" />
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<span class="span">规格名称：</span>
|
||
<div class="right"><el-input v-model="filter.title" class="wid100" clearable></el-input></div>
|
||
</div>
|
||
<div class="row">
|
||
<span class="span">规格编码：</span>
|
||
<div class="right"><el-input v-model="filter.sku_code" class="wid100" clearable></el-input></div>
|
||
</div>
|
||
<el-button type="primary" @click="handleSearch"><el-icon><Search /></el-icon> 筛选</el-button>
|
||
</div>
|
||
<el-table :data="tableList" style="width: 100%" border v-loading="loading1" @select="select"
|
||
ref="multipleTable" @select-all="selectAll">
|
||
<el-table-column type="selection" width="55" :selectable="checkSelect" />
|
||
<el-table-column prop="id" label="ID" width="80" align="center" />
|
||
<el-table-column prop="goods.title" label="商品名称" align="center" />
|
||
<el-table-column prop="goods.goods_code" label="商品货号" align="center" />
|
||
<el-table-column prop="title" label="规格名称" align="center" />
|
||
<el-table-column prop="sku_code" label="规格编码" align="center" />
|
||
</el-table>
|
||
<div class="page-pagination">
|
||
<el-pagination
|
||
:current-page="page"
|
||
background
|
||
layout="prev, pager, next, sizes, total"
|
||
:total="total"
|
||
:page-sizes="[10, 50, 100]"
|
||
:page-size="pageSize"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"></el-pagination>
|
||
</div>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="showGoods = false">取消</el-button>
|
||
<el-button type="primary" @click="addGoods">确定</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import { DeleteFilled, Search } from "@element-plus/icons"
|
||
import { reactive, toRefs, watch } from 'vue'
|
||
import { get, post } from '@/api/request'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
|
||
export default {
|
||
components: { DeleteFilled, Search },
|
||
props: {
|
||
show: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
id: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
type: {
|
||
type: String,
|
||
default: '',
|
||
}
|
||
},
|
||
setup(props, context) {
|
||
const data = reactive({
|
||
launchId: 0,
|
||
elType: '',
|
||
showDialog: false,
|
||
companyList: [],
|
||
managerList: [],
|
||
supplierList: [],
|
||
accountList: [],
|
||
goodsList: [],
|
||
itemInfo: {},
|
||
loading: false,
|
||
showGoods: false,
|
||
feesList: [],
|
||
goodskuList: [],
|
||
filter: {},
|
||
tableList: [],
|
||
page: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
loading1: false,
|
||
chooseList: [],
|
||
btnloading: false,
|
||
goodsIds: [],
|
||
sumData: {}
|
||
})
|
||
|
||
function getDetail() {
|
||
data.loading = true
|
||
get(`/api/purchaseOrder/${data.launchId}`).then((res) => {
|
||
data.itemInfo = res.data
|
||
data.feesList = res.data.other_expenses
|
||
data.goodsList = res.data.products
|
||
res.data.products.forEach((item) => {
|
||
data.goodsIds.push(item.product_id)
|
||
})
|
||
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
|
||
})
|
||
}
|
||
|
||
const commitApproval = () => {
|
||
data.btnloading = true
|
||
let products = []
|
||
for (let index = 0; index < data.goodsList.length; index++) {
|
||
let obj = data.goodsList[index]
|
||
products.push({
|
||
product_id: obj.goods_id,
|
||
sku_id: obj.sku_id,
|
||
expect_unit_price: obj.expect_unit_price,
|
||
expect_quantity: obj.expect_quantity,
|
||
unit: obj.unit,
|
||
prepayment_ratio: obj.prepayment_ratio,
|
||
delivery_date: obj.delivery_date
|
||
})
|
||
}
|
||
let params = {
|
||
company_id: data.itemInfo.company_id,
|
||
manager_id: data.itemInfo.manager_id,
|
||
purchase_supplier_id: data.itemInfo.purchase_supplier_id,
|
||
products: products,
|
||
otherExpenses: data.feesList,
|
||
remark: data.itemInfo.remark,
|
||
late_delivery_explanation: data.itemInfo.late_delivery_explanation,
|
||
sold_start_time: data.itemInfo.sold_start_time,
|
||
arrived_time: data.itemInfo.arrived_time,
|
||
warehouse_name: data.itemInfo.warehouse_name
|
||
}
|
||
post(`/api/purchaseOrder`, params).then((res) => {
|
||
ElMessage({ type: 'success', message: '操作成功' })
|
||
closeDialog()
|
||
context.emit('refresh')
|
||
data.btnloading = false
|
||
}).catch(() => {
|
||
data.btnloading = false
|
||
})
|
||
}
|
||
|
||
function clearForm() {
|
||
data.itemInfo = {}
|
||
data.feesList = []
|
||
data.goodsList = []
|
||
data.goodsIds = []
|
||
}
|
||
|
||
function getGoodskuList() {
|
||
get(`/api/all/goods`).then((res) => {
|
||
data.goodskuList = res.data
|
||
})
|
||
}
|
||
|
||
function handleSearch() {
|
||
data.page = 1
|
||
fetchData()
|
||
}
|
||
|
||
const fetchData = () => {
|
||
data.loading1 = true
|
||
let params = {
|
||
page: data.page,
|
||
pageSize: data.pageSize,
|
||
...data.filter,
|
||
}
|
||
get(`/api/goods-skus`, params).then((res) => {
|
||
data.tableList = res.data
|
||
data.total = res.meta.total
|
||
data.loading1 = false
|
||
data.chooseList = []
|
||
}).catch(() => {
|
||
data.loading1 = false
|
||
})
|
||
}
|
||
|
||
function handleCurrentChange(e) {
|
||
data.page = e
|
||
fetchData()
|
||
}
|
||
|
||
function handleSizeChange(e) {
|
||
data.page = 1
|
||
data.pageSize = e
|
||
fetchData()
|
||
}
|
||
|
||
const closeDialog = () => {
|
||
clearForm()
|
||
context.emit('close')
|
||
data.showDialog = false
|
||
}
|
||
|
||
function select(e) {
|
||
data.chooseList = e
|
||
}
|
||
|
||
function selectAll(e) {
|
||
data.chooseList = e
|
||
}
|
||
|
||
function checkSelect(row) {
|
||
if (data.goodsIds.indexOf(row.id) >= 0) {
|
||
return false
|
||
} else {
|
||
return true
|
||
}
|
||
}
|
||
|
||
function addGoods() {
|
||
if(!data.chooseList.length) {
|
||
return ElMessage.info('请选择商品')
|
||
}
|
||
data.chooseList.forEach((item) => {
|
||
item.product_id = item.goods_id
|
||
item.sku_id = item.id
|
||
data.goodsList.push(item)
|
||
data.goodsIds.push(item.goods_id)
|
||
})
|
||
data.showGoods = false
|
||
}
|
||
|
||
function removeGoods(i, id) {
|
||
data.goodsList.splice(i, 1)
|
||
let index = data.goodsIds.indexOf(id)
|
||
data.goodsIds.splice(index, 1)
|
||
}
|
||
|
||
function addFee() {
|
||
data.feesList.push({
|
||
fee_name: '',
|
||
amount: '',
|
||
other_expense_account_id: ''
|
||
})
|
||
}
|
||
|
||
function removeFee(i) {
|
||
data.feesList.splice(i, 1)
|
||
}
|
||
|
||
function openGoods() {
|
||
data.showGoods = true
|
||
handleSearch()
|
||
}
|
||
|
||
watch(() => data.goodsList, (newProps) => {
|
||
let num1 = 0, num2 = 0, num3 = 0
|
||
for (let index = 0; index < newProps.length; index++) {
|
||
let item = newProps[index]
|
||
if(item.expect_unit_price && item.expect_quantity) {
|
||
num1 += item.expect_unit_price * item.expect_quantity
|
||
if(item.prepayment_ratio) {
|
||
num2 += num1 * item.prepayment_ratio
|
||
num3 += num1 * 100 - num2
|
||
}
|
||
}
|
||
}
|
||
data.sumData.total_amount = num1.toFixed(2)
|
||
data.sumData.pre_pay_amount = (num2 / 100).toFixed(2)
|
||
data.sumData.balance_amount = (num3 / 100).toFixed(2)
|
||
}, { deep: true })
|
||
|
||
watch(() => props, (newProps) => {
|
||
if (newProps.show) {
|
||
data.showDialog = true
|
||
data.launchId = newProps.id
|
||
data.elType = newProps.type || ''
|
||
if(data.launchId) {
|
||
getDetail()
|
||
}
|
||
getCompany()
|
||
getManagerList()
|
||
getSupplier()
|
||
getGoodskuList()
|
||
getAccount()
|
||
}
|
||
}, { deep: true })
|
||
|
||
return {
|
||
...toRefs(data),
|
||
getDetail,
|
||
getAccount,
|
||
closeDialog,
|
||
getCompany,
|
||
getManagerList,
|
||
getSupplier,
|
||
clearForm,
|
||
commitApproval,
|
||
getGoodskuList,
|
||
handleSearch,
|
||
handleCurrentChange,
|
||
handleSizeChange,
|
||
select,
|
||
selectAll,
|
||
checkSelect,
|
||
addGoods,
|
||
removeGoods,
|
||
addFee,
|
||
removeFee,
|
||
openGoods
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.searchBox{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
background-color: #fff;
|
||
padding: 15px 0 0 0;
|
||
border-radius: 4px;
|
||
margin-bottom: 15px;
|
||
.row{
|
||
display: flex;
|
||
align-items: center;
|
||
width: 250px;
|
||
box-sizing: border-box;
|
||
margin-bottom: 15px;
|
||
.span{
|
||
display: block;
|
||
width: 80px;
|
||
font-size: 14px;
|
||
text-align: right;
|
||
box-sizing: border-box;
|
||
}
|
||
.right{
|
||
width: calc(100% - 100px);
|
||
}
|
||
.wid100{
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
::v-deep .inpt .el-input__inner{
|
||
text-align: center;
|
||
}
|
||
</style> |