|
|
@@ -0,0 +1,328 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="table-area">
|
|
|
+ <el-table
|
|
|
+ :data="leftTableData"
|
|
|
+ border
|
|
|
+ stripe
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ @cell-click="cellClick"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" width="55" />
|
|
|
+ <el-table-column type="index" label="序号" width="50" />
|
|
|
+ <el-table-column align="center" prop="customerName" label="客户名称">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="noticeNumber" label="通知单号">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="noticeDate" label="开单日期">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="form-area">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-form
|
|
|
+ :model="form"
|
|
|
+ ref="form"
|
|
|
+ label-width="80px"
|
|
|
+ :inline="true"
|
|
|
+ size="mini"
|
|
|
+ :rules="rules"
|
|
|
+ >
|
|
|
+ <el-col :span="16">
|
|
|
+ <el-form-item label="通知单号" prop="noticeNumber">
|
|
|
+ <div class="text-area">
|
|
|
+ <span class="mr10">{{ form.noticeNumber }}</span>
|
|
|
+ <span>{{ form.documentTypeName }}</span>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="销售员" prop="salesman">
|
|
|
+ {{ form.salesman }}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <el-form-item label="客户名称" prop="customerName">
|
|
|
+ {{ form.customerName }}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="售货单位" prop="sellingUnit">
|
|
|
+ {{ form.sellingUnit }}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <el-form-item label="货车信息" prop="truckRegistration">
|
|
|
+ {{ form.truckRegistration }}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="发货员" prop="drawer">
|
|
|
+ {{ form.drawer }}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="备注" prop="dispatchNoteRemark">
|
|
|
+ {{ form.dispatchNoteRemark }}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="发货日期" prop="deliveryDate">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.deliveryDate"
|
|
|
+ type="date"
|
|
|
+ size="mini"
|
|
|
+ placeholder="选择日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="发货仓库" prop="deliveryWarehouse">
|
|
|
+ <el-select v-model="form.deliveryWarehouse" clearable filterable>
|
|
|
+ <el-option
|
|
|
+ v-for="item in warehouseList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.warehouseName"
|
|
|
+ :value="item.id"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="调拨仓库" prop="transferWarehouse">
|
|
|
+ <el-select v-model="form.transferWarehouse" clearable filterable>
|
|
|
+ <el-option
|
|
|
+ v-for="item in warehouseList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.warehouseName"
|
|
|
+ :value="item.id"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="outStockHandler">出库</el-button>
|
|
|
+ <el-button @click="refreshHandler">刷新</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-row>
|
|
|
+ <el-table width="100%" :data="saleProductInfoList" border stripe>
|
|
|
+ <el-table-column align="center" label="编码" prop="productCode">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" label="品名" prop="productName">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="规格"
|
|
|
+ prop="productSpecifications"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" label="色泽" prop="productColor">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" label="批号" prop="lotNum">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" label="等级" prop="levels">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" label="通知">
|
|
|
+ <el-table-column align="center" label="重量" prop="actualWeight">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" label="实发">
|
|
|
+ <el-table-column align="center" label="箱数" prop="boxNum">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" label="重量" prop="weight">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ productInvoiceList,
|
|
|
+ saleStorageDetails,
|
|
|
+ queryDropDownBoxData,
|
|
|
+ noticeOutStorage,
|
|
|
+} from "@/api/tablelist/commonTable";
|
|
|
+export default {
|
|
|
+ name: "OutStock",
|
|
|
+ props: [],
|
|
|
+ dicts: ["billing_type", "document_type"],
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ currentIndex: "",
|
|
|
+ form: {
|
|
|
+ noticeNumber: "", //通知单号
|
|
|
+ documentType: "", //通知单类型
|
|
|
+ documentTypeName: "",
|
|
|
+ salesman: "", //销售员
|
|
|
+ sellingUnit: "", //售货单位
|
|
|
+ truckRegistration: "", //货车信息
|
|
|
+ drawer: "", //发货员
|
|
|
+ dispatchNoteRemark: "", //备注
|
|
|
+ customerName: "", //客户名称
|
|
|
+ deliveryDate: "", //发货日期
|
|
|
+ deliveryWarehouse: "", //发货仓库
|
|
|
+ transferWarehouse: "", //调拨仓库
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ leftTableData: [],
|
|
|
+ warehouseList: [],
|
|
|
+ saleProductInfoList: [],
|
|
|
+ rules: {
|
|
|
+ deliveryDate: [
|
|
|
+ { required: true, message: "请选择发货日期", trigger: "change" },
|
|
|
+ ],
|
|
|
+ deliveryWarehouse: [
|
|
|
+ { required: true, message: "请选择发货仓库", trigger: "change" },
|
|
|
+ ],
|
|
|
+ transferWarehouse: [
|
|
|
+ { required: true, message: "请选择调拨仓库", trigger: "change" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ // 左侧表格点击回调
|
|
|
+ cellClick(row, column, cell, event) {
|
|
|
+ this.currentIndex = this.leftTableData.findIndex(
|
|
|
+ (item) => item.id == row.id
|
|
|
+ );
|
|
|
+ this.initFormData();
|
|
|
+ },
|
|
|
+ // 刷新回调
|
|
|
+ refreshHandler() {
|
|
|
+ this.initFormData();
|
|
|
+ },
|
|
|
+ // 出库回调
|
|
|
+ outStockHandler() {
|
|
|
+ this.$refs.form.validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ let payLoad = { ...this.form };
|
|
|
+ delete payLoad.documentTypeName;
|
|
|
+ let res = await noticeOutStorage(payLoad);
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message.success("出库成功");
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleSelectionChange() {},
|
|
|
+ // 初始化仓库选项数据
|
|
|
+ async initWarehouse() {
|
|
|
+ try {
|
|
|
+ let payload = [
|
|
|
+ {
|
|
|
+ basicMap: {
|
|
|
+ tableName: "warehouse",
|
|
|
+ },
|
|
|
+ conditionMap: {
|
|
|
+ warehouse_type: ["1"],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ let res = await queryDropDownBoxData(payload);
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.warehouseList = res.data.resultMap?.warehouse || [];
|
|
|
+ } else {
|
|
|
+ throw new Error(res.msg);
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 初始化数据
|
|
|
+ async initData() {
|
|
|
+ try {
|
|
|
+ let payload = {
|
|
|
+ isEnablePaging: false,
|
|
|
+ status: 1,
|
|
|
+ };
|
|
|
+ let res = await productInvoiceList(payload);
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.leftTableData = res.rows;
|
|
|
+ if (this.leftTableData.length > 0) {
|
|
|
+ this.currentIndex = 0;
|
|
|
+ this.initFormData();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ throw new Error(res.msg);
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 根据字典获取文件类型
|
|
|
+ getdocumentTypeName(value) {
|
|
|
+ return (
|
|
|
+ this.dict.type.document_type.find((item) => {
|
|
|
+ return item.value === value;
|
|
|
+ })?.label || ""
|
|
|
+ );
|
|
|
+ },
|
|
|
+ // 加载表单数据
|
|
|
+ async initFormData() {
|
|
|
+ let { id, customerName } = this.leftTableData[this.currentIndex];
|
|
|
+ try {
|
|
|
+ let res = await saleStorageDetails(id);
|
|
|
+ console.log(res);
|
|
|
+ if (res.code == 200) {
|
|
|
+ let {
|
|
|
+ noticeNumber, //通知单号
|
|
|
+ documentType, //通知单类型
|
|
|
+ salesman, //销售员
|
|
|
+ sellingUnit, //售货单位
|
|
|
+ truckRegistration, //货车信息
|
|
|
+ drawer, //发货员
|
|
|
+ dispatchNoteRemark, //备注
|
|
|
+ saleProductInfoList, //产品信息
|
|
|
+ id,
|
|
|
+ } = res.data;
|
|
|
+ let documentTypeName = this.getdocumentTypeName(documentType);
|
|
|
+ this.saleProductInfoList = saleProductInfoList;
|
|
|
+ Object.assign(this.form, {
|
|
|
+ noticeNumber, //通知单号
|
|
|
+ documentType, //通知单类型
|
|
|
+ documentTypeName, //通知单类型 名
|
|
|
+ salesman, //销售员
|
|
|
+ sellingUnit, //售货单位
|
|
|
+ truckRegistration, //货车信息
|
|
|
+ drawer, //发货员
|
|
|
+ dispatchNoteRemark, //备注
|
|
|
+ customerName, //客户名称
|
|
|
+ id,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initData();
|
|
|
+ this.initWarehouse();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.app-container {
|
|
|
+ display: flex;
|
|
|
+ .table-area {
|
|
|
+ width: 600px;
|
|
|
+ }
|
|
|
+ .form-area {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
