mec-cloud_-intelligent-manufacturing_client/zkqy-ui/src/views/orderMange/outStock/index.vue

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