源文件
This commit is contained in:
276
src/views/invoicing/operation_in.vue
Normal file
276
src/views/invoicing/operation_in.vue
Normal file
@@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<el-form ref="queryForm" :model="queryForm" :rules="queryRules" label-position="left" label-width="80px">
|
||||
<el-form-item label="出库类型">
|
||||
<div class="shop_type_box">
|
||||
<div class="item" v-for="(item, index) in shopTypes" :key="index"
|
||||
:class="{ active: shopTypesActive == index }" @click="changeTypeEnum(index)">
|
||||
<div class="s_title">{{ item.label }}</div>
|
||||
<div class="active_dot">
|
||||
<i class="el-icon-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="8" v-if="shopTypes[shopTypesActive].value == 'purveyor'">
|
||||
<el-form-item label="供应商" prop="purveyorId">
|
||||
<el-select v-model="queryForm.purveyorId" placeholder="请选择供应商" style="width: 220px;">
|
||||
<el-option :label="item.purveyorName" :value="item.id" v-for="item in purveyorList"
|
||||
:key="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="入库时间" prop="time">
|
||||
<el-date-picker v-model="queryForm.time" type="date" format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 220px;">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-if="shopTypes[shopTypesActive].value == 'purveyor'">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="应收金额">
|
||||
<el-input v-model="queryForm.totalAmount" placeholder="请输入应收金额"
|
||||
style="width: 220px;"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="实收金额">
|
||||
<el-input v-model="queryForm.paidAmount" placeholder="请输入实收金额"
|
||||
style="width: 220px;"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-if="shopTypes[shopTypesActive].value == 'purveyor'">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="付款时间">
|
||||
<el-date-picker v-model="queryForm.paidAt" type="date" format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 220px;">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="批号">
|
||||
<el-input v-model="queryForm.batchNumber" placeholder="请输入批号"
|
||||
style="width: 220px;"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="queryForm.remark" placeholder="请输入备注" style="width: 220px;"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="$refs.shopList.show(tableData.list)">选择商品</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-button type="primary" plain>
|
||||
共{{ tableData.list.length }}种商品，金额合计<span style="color: red;">￥{{ queryForm.totalAmount }}</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-table :data="tableData.list">
|
||||
<el-table-column type="index" width="50"></el-table-column>
|
||||
<el-table-column label="商品名称" prop="name">
|
||||
<template v-slot="scope">
|
||||
<div class="name_wrap">
|
||||
<span class="name">{{ scope.row.name }}</span>
|
||||
<el-tag type="info" v-if="scope.row.specSnap" size="mini">{{ scope.row.specSnap }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="进价">
|
||||
<template v-slot="scope">
|
||||
<el-input-number v-model="scope.row.guidePrice" :min="0" controls-position="right"
|
||||
@change="e => scope.row.totalAmount = e * scope.row.number"></el-input-number>
|
||||
<div class="tips">成本价￥{{ scope.row.costPrice }}/{{ scope.row.unitName }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="数量">
|
||||
<template v-slot="scope">
|
||||
<el-input-number v-model="scope.row.number" :min="0" controls-position="right"
|
||||
@change="e => scope.row.totalAmount = e * scope.row.guidePrice"></el-input-number>
|
||||
<div class="tips">入库前：{{ scope.row.stockNumber }}{{ scope.row.unitName }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="小计">
|
||||
<template v-slot="scope">
|
||||
<el-input-number v-model="scope.row.totalAmount" :min="0"
|
||||
controls-position="right"></el-input-number>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="变动后剩余库存">
|
||||
<template v-slot="scope">
|
||||
{{ scope.row.stockNumber + scope.row.number }}{{ scope.row.unitName }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="80">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" @click="tableData.list.splice(scope.$index, 1)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="primary" @click="submitHandle" :loading="queryFormLoading">确定</el-button>
|
||||
</div>
|
||||
<shopList ref="shopList" @success="selectShop" />
|
||||
<el-dialog :visible.sync="showResult" :show-close="false" :close-on-press-escape="false"
|
||||
:close-on-click-modal="false">
|
||||
<el-result icon="success" title="入库提交成功" :subTitle="`共操作${tableData.list.length}件商品`">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium" @click="resetHandle">创建新的入库单</el-button>
|
||||
<router-link to="/invoicing/operating_record">
|
||||
<el-button size="medium">历史提交</el-button>
|
||||
</router-link>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from 'dayjs'
|
||||
import shopList from '@/components/shopList'
|
||||
import { tbShopPurveyorGet, tbProductStockOperateOutAndOn } from '@/api/invoicing'
|
||||
export default {
|
||||
components: {
|
||||
shopList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
shopTypesActive: 0,
|
||||
shopTypes: [
|
||||
{
|
||||
label: '供应商入库',
|
||||
value: 'purveyor'
|
||||
},
|
||||
{
|
||||
label: '其他入库',
|
||||
value: 'purchase'
|
||||
}
|
||||
],
|
||||
resetForm: '',
|
||||
queryFormLoading: false,
|
||||
queryForm: {
|
||||
batchNumber: '',
|
||||
list: [],
|
||||
paidAmount: 0,
|
||||
paidAt: '',
|
||||
purveyorId: '',
|
||||
purveyorName: '',
|
||||
remark: '',
|
||||
time: dayjs().format('YYYY-MM-DD'),
|
||||
totalAmount: 0,
|
||||
type: 'purveyor',
|
||||
shopId: localStorage.getItem('shopId')
|
||||
},
|
||||
queryRules: {
|
||||
purveyorId: [
|
||||
{
|
||||
required: true,
|
||||
message: ' ',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
time: [
|
||||
{
|
||||
required: true,
|
||||
message: ' ',
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
},
|
||||
purveyorList: [],
|
||||
tableData: {
|
||||
list: []
|
||||
},
|
||||
showResult: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.resetForm = { ...this.queryForm }
|
||||
this.tbShopPurveyorGet()
|
||||
},
|
||||
methods: {
|
||||
// 提交
|
||||
submitHandle() {
|
||||
this.$refs.queryForm.validate(async valid => {
|
||||
if (valid) {
|
||||
try {
|
||||
this.queryFormLoading = true
|
||||
this.queryForm.list = this.tableData.list
|
||||
await tbProductStockOperateOutAndOn(this.queryForm)
|
||||
this.queryFormLoading = false
|
||||
this.showResult = true
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
this.queryFormLoading = false
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 选择商品
|
||||
selectShop(res) {
|
||||
let arr = []
|
||||
res.forEach(item => {
|
||||
item.skuList.forEach(i => {
|
||||
arr.push({
|
||||
name: item.name,
|
||||
unitName: item.unitName,
|
||||
productId: item.id,
|
||||
number: 0,
|
||||
totalAmount: '',
|
||||
...i
|
||||
})
|
||||
})
|
||||
})
|
||||
console.log(arr)
|
||||
this.tableData.list = arr
|
||||
},
|
||||
// 初始化
|
||||
resetHandle() {
|
||||
this.showResult = false
|
||||
this.queryForm = { ...this.resetForm }
|
||||
this.tableData.list = []
|
||||
},
|
||||
// 切换类型
|
||||
changeTypeEnum(index) {
|
||||
this.shopTypesActive = index
|
||||
this.queryForm.type = this.shopTypes[index].value
|
||||
},
|
||||
// 获取供应商列表
|
||||
async tbShopPurveyorGet() {
|
||||
try {
|
||||
const res = await tbShopPurveyorGet({
|
||||
shopId: localStorage.getItem('shopId'),
|
||||
page: 0,
|
||||
size: 100
|
||||
})
|
||||
this.purveyorList = res.content
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.name_wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.name {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user