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

<template>
  <el-card shadow="always" :body-style="{ padding: '10px' }">
    <div class="app-container">
      <div class="table-area">
        <el-button
          type="success"
          size="small"
          @click="handleRefresh"
          :icon="loading ? 'el-icon-loading' : 'el-icon-refresh'"
          :disabled="loading"
          >刷新</el-button
        >

        <el-table
          :data="leftTableData"
          border
          stripe
          @cell-click="cellClick"
          highlight-current-row
        >
          <!-- <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="deliveryClerk">
                {{ form.deliveryClerk }}
              </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>
  </el-card>
</template>

<script>
import {
  productInvoiceList,
  saleStorageDetails,
  queryDropDownBoxData,
  noticeOutStorage,
} from "@/api/tablelist/commonTable";
import { mapState } from "vuex";
export default {
  name: "OutStock",
  props: [],
  dicts: ["billing_type", "document_type"],
  components: {},
  data() {
    return {
      loading: false,
      currentIndex: "",
      form: {
        noticeNumber: "", //通知单号
        documentType: "", //通知单类型
        documentTypeName: "",
        salesman: "", //销售员
        sellingUnit: "", //售货单位
        truckRegistration: "", //货车信息
        drawer: "", //开票员
        deliveryClerk: "", // 发货员
        dispatchNoteRemark: "", //备注
        customerName: "", //客户名称
        deliveryDate: new Date(), //发货日期
        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" },
        ],
      },
    };
  },
  methods: {
    // 刷新回调
    async handleRefresh() {
      this.loading = true;
      await this.initData();
      await this.initWarehouse();
      this.loading = false;
    },
    // 左侧表格点击回调
    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) {
          this.$confirm("是否确认出库?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(async () => {
              let payLoad = { ...this.form };
              console.log(this.form);
              if (!this.form.id) {
                return;
              }
              delete payLoad.documentTypeName;
              let res = await noticeOutStorage(payLoad);
              if (res.code == 200) {
                this.$message.success("出库成功");
                this.currentIndex = 0;
                await this.initData();
                this.refreshHandler();
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消出库",
              });
            });
        } 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];
      let id = false,
        customerName;
      if (this.leftTableData[this.currentIndex]) {
        id = this.leftTableData[this.currentIndex].id;
        customerName = this.leftTableData[this.currentIndex].customerName;
      }
      console.log(this.leftTableData[this.currentIndex]);
      console.log(id);
      if (!id) {
        //重置表单数据
        Object.assign(this.form, {
          noticeNumber: "", //通知单号
          documentType: "", //通知单类型
          documentTypeName: "", //通知单类型  名
          salesman: "", //销售员
          sellingUnit: "", //售货单位
          truckRegistration: "", //货车信息
          dispatchNoteRemark: "", //备注
          customerName: "", //客户名称
          deliveryClerk: "", //发货员
          id: "",
        });
        console.log(this.form);
        return;
      }
      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, //货车信息
            dispatchNoteRemark, //备注
            customerName, //客户名称
            id,
          });
          this.form.deliveryClerk = this.nickName;
        }
      } catch (error) {
        console.log(error);
      }
    },
  },
  computed: {
    ...mapState({
      nickName: (state) => state.user.nickName,
    }),
  },
  mounted() {
    this.initData();
    this.initWarehouse();
  },
};
</script>

<style scoped lang="scss">
.app-container {
  display: flex;
  .table-area {
    width: 600px;
  }
  .form-area {
    flex: 1;
  }
}
::v-deep .el-table__body tr.current-row > td.el-table__cell {
  background-color: #55e905 !important;
}
</style>