gubersail-platform-ui/src/views/outboundWorkOrder/index.vue

<template>
  <div>
    <basic-container v-show="!detailsOpen">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="待生成" name="待生成"></el-tab-pane>
        <el-tab-pane label="待出库" name="待出库"></el-tab-pane>
        <el-tab-pane label="已出库" name="已出库"></el-tab-pane>
        <el-tab-pane label="全部" name=""></el-tab-pane>
      </el-tabs>
      <avue-crud
        v-show="activeName == '待生成'"
        ref="crud2"
        :option="option2"
        :table-loading="loading2"
        :data="dataList2"
        :page.sync="page2"
        :search.sync="query"
        @search-change="searchChange2"
        @search-reset="searchReset2"
        @refresh-change="refreshChange2"
        @on-load="onLoad2"
      >
        <template slot="menu" slot-scope="{ row, index }">
          <el-button size="small" type="text" @click="rowEdit(row)">生成发货单</el-button>
        </template>
        <template slot="claimNo" slot-scope="{ row }">
          <span style="color: #1e9fff; cursor: pointer" @click="rowEdit(row)">
            {{ row.claimNo }}
          </span>
        </template>
      </avue-crud>
      <avue-crud
        v-show="activeName != '待生成'"
        :option="option"
        :search.sync="search"
        v-model="form"
        :table-loading="loading"
        :data="dataList"
        ref="crud"
        :key="key"
        @on-load="onLoad"
        @search-change="searchChange"
        @row-del="rowDel"
        @expand-change="expandChange"
        @refresh-change="refreshChange"
        :page.sync="page"
      >
        <template slot-scope="{ row }" slot="expand">
          <avue-crud
            :data="row.itemData"
            :option="itemOption"
            :table-loading="row.itemLoading"
            :cell-style="cellStyle"
            class="itemTable"
          ></avue-crud>
        </template>
        <template slot-scope="{ type, size, row, index }" slot="menu">
          <el-button
            :size="size"
            :disabled="row.statusName != '待出库'"
            :type="type"
            @click="$refs.crud.rowDel(row, index)"
            >撤销生成发货单</el-button
          >
        </template>
        <template slot="corpNameSearch">
          <crop-select v-model="search.corpId" corpType="KH" :refresh="false"></crop-select>
        </template>
        <template slot-scope="{ row, index }" slot="billno">
          <span style="color: #409eff; cursor: pointer" @click.stop="editOpen(row, 1)">{{ row.billno }} </span>
        </template>
        <template slot-scope="{ row, index }" slot="ordNo">
          <span style="color: #409eff; cursor: pointer" @click.stop="editOpen(row, 2)">{{ row.ordNo }} </span>
        </template>
      </avue-crud>
    </basic-container>
    <detailsPage v-if="detailsOpen" :onLoad="form" :detailData="detailData" @backToList="backToList"></detailsPage>

    <el-dialog
      title="发货"
      :visible.sync="dialogVisible"
      append-to-body
      close-on-click-modal
      close-on-press-escape
      width="40%"
    >
      <div class="elForm">
        <el-form :model="dialogForm" label-position="right">
          <el-col :span="24">
            <el-form-item label="收货人姓名:" label-width="100px">
              <span>{{ dialogForm.contacts }}</span>
            </el-form-item>
            <el-form-item label="收货人电话:" label-width="100px">
              <span>{{ dialogForm.phone }}</span>
            </el-form-item>
            <el-form-item label="收货人地址:" label-width="100px">
              <span>{{ dialogForm.recAddress }}</span>
            </el-form-item>
          </el-col>
          <el-form-item label="配送方式" label-width="100px">
            <el-select
              v-model="dialogForm.shipType"
              @change="courierTypeChange"
              style="width: 90%"
              placeholder="请选择运输类型"
            >
              <el-option
                v-for="item in courierTypeList"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="货运公司" label-width="100px">
            <el-select
              v-model="dialogForm.logisticsCorpName"
              filterable
              allow-create
              default-first-option
              style="width: 90%"
              placeholder="请选择货运公司"
            >
              <el-option
                v-for="item in courierList"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="货运单号" label-width="100px">
            <el-input v-model="dialogForm.expressNo" style="width: 90%" placeholder="请输入货运单号"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="confirmShipment">确认发货</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="生成发货单"
      :visible.sync="generateVisible"
      append-to-body
      close-on-click-modal
      close-on-press-escape
      width="60%"
    >
      <div>
        <avue-crud v-if="generateVisible" :data="generateData" :option="generateOption">
          <template slot-scope="{ row, index }" slot="sendNum">
            <el-input-number
              v-model="row.sendNum"
              placeholder="请输入发货数量"
              :controls="false"
              :precision="0"
              :min="0"
              :max="Number(row.inventory)"
              size="small"
              style="width: 100%"
            ></el-input-number>
          </template>
        </avue-crud>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="generateVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="generate">生成发货</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// @ts-nocheck
import {
  getOutboundList,
  getList,
  remove,
  getGoodsInfo,
  getDetails,
  shipments,
  tireStockDescList,
  submitShip,
} from "@/api/salesManagement/outboundWorkOrder";
import detailsPage from "./detailsPage";
import { getWorkDicts } from "@/api/system/dictbiz";

export default {
  name: "index",
  components: {
    detailsPage,
  },
  data() {
    return {
      loading2: false,
      generateForm: {},
      generateVisible: false,
      generateData: [],
      generateOption: {
        align: "center",
        header: false,
        border: true,
        menu: false,
        column: [
          {
            label: "发货仓库名称",
            prop: "storageName",
            width: 200,
            overHidden: true,
          },
          {
            label: "批次号",
            prop: "dot",
            width: 100,
            overHidden: true,
          },
          {
            label: "采购订单号",
            prop: "poNo",
            width: 100,
            overHidden: true,
          },
          {
            label: "库存",
            prop: "inventory",
            width: 100,
            overHidden: true,
          },
          {
            label: "发货数量",
            prop: "sendNum",
            width: 100,
            overHidden: true,
          },
          {
            label: "库区",
            prop: "reservoirArea",
            width: 100,
            overHidden: true,
          },
        ],
      },
      activeName: "待生成",
      statusNameData: [], // 状态字典
      dialogVisible: false,
      dialogForm: {},
      courierTypeList: [],
      courierList: [],
      detailsOpen: false,
      loading: false,
      search: {},
      query: {},
      form: {},
      dataList: [],
      detailData: {},
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0,
        pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500],
      },
      page2: {
        pageSize: 20,
        currentPage: 1,
        total: 0,
        pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500],
      },
      key: 0,
      itemOption: {
        align: "center",
        header: false,
        border: true,
        menu: false,
        column: [
          {
            label: "商品名称",
            prop: "goodsName",
            disabled: true,
            width: 200,
            overHidden: true,
            // props: {
            //   label: 'cname',
            //   value: 'id'
            // },
            // dicUrl: '/api/gubersail-admin/goodsDesc/goodsListAll'
          },
          {
            label: "商品编码",
            disabled: true,
            prop: "goodsNo",
            width: 100,
          },
          {
            label: "品牌",
            prop: "brandName",
            overHidden: true,
          },
          {
            label: "规格型号",
            prop: "propertyName",
            disabled: true,
            width: 100,
          },
          {
            label: "花纹",
            prop: "pattern",
            disabled: true,
            width: 100,
          },
          {
            label: "仓库",
            prop: "storageName",
            overHidden: true,
          },
          {
            label: "商品描述",
            prop: "goodsDescription",
            disabled: true,
          },
          {
            label: "批次号",
            prop: "dot",
            type: "select",
            disabled: true,
            dicData: [],
            props: {
              label: "dot",
              value: "dot",
            },
            dicUrl: "/api/gubersail-admin/tireStockDesc/dotList",
          },
        ],
      },
      option: {
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        addBtn: false,
        index: true,
        span: 8,
        border: true,
        height: "auto",
        searchMenuPosition: "right",
        align: "center",
        size: "small",
        menuWidth: 120,
        searchSpan: 8,
        searchIcon: true,
        searchIndex: 2,
        highlightCurrentRow: true,
        expand: true,
        expandWidth: 60,
        dialogWidth: "70%",
        summaryText: "合计",
        showSummary: true,
        sumColumnList: [
          {
            name: "goodsTotalNum",
            type: "sum",
            decimals: 0,
          },
        ],
        column: [
          {
            label: "出库单号",
            prop: "billno",
            search: true,
            overHidden: true,
          },
          {
            label: "来源单号",
            prop: "ordNo",
            search: true,
            overHidden: true,
          },
          {
            label: "业务来源",
            prop: "bsType",
            search: true,
            overHidden: true,
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=business_Source",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
          },
          {
            label: "业务对象",
            prop: "customerName",
            search: true,
            overHidden: true,
            cell: true,
            width: 140,
            // filterable:true,
            // type: 'select',
            // remote:true,
            // props: {
            //   label: 'cname',
            //   value: 'cname',
            //   res: 'data.records'
            // },
            // dicUrl: '/api/gubersail-admin/corpsDesc/list?current=1&size=20&corpType=KH&cname={{key}}',
          },
          // {
          //   label: "仓库",
          //   prop: "storageName",
          //   search: true,
          //   overHidden: true,
          //   filterable: true,
          //   type: "select",
          //   props: {
          //     label: "cname",
          //     value: "cname",
          //   },
          //   dicUrl: "/api/gubersail-admin/storageDesc/listAll",
          // },
          // , {
          //   label: '商品种类',
          //   prop: "numberRows",
          //   overHidden: true,
          // }
          {
            label: "订单数量",
            prop: "goodsTotalNum",
            search: false,
            overHidden: true,
            // width: 120,
          },
          {
            label: "实际数量",
            prop: "sendTotalNum",
            search: false,
            overHidden: true,
            // width: 120,
          },
          {
            label: "状态",
            prop: "statusName",
            // search: true,
            overHidden: true,
            // type: "select",
            // dicUrl: "/api/blade-system/dict-biz/dictionary?code=outbound_work_order_status",
            // props: {
            //   label: "dictValue",
            //   value: "dictKey",
            // },
          },
          {
            label: "业务日期",
            prop: "businesDate",
            overHidden: true,
            searchProp: "businesDateList",
            type: "date",
            search: true,
            width: 100,
            unlinkPanels: true,
            searchRange: true,
            searchDefaultTime: ["00:00:00", "23:59:59"],
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
          },
          {
            label: "库管",
            prop: "stockClerkName",
            type: "select",
            search: true,
            props: {
              label: "realName",
              value: "realName",
            },
            dicUrl: "/api/blade-user/stockClerkList",
            overHidden: true,
          },
          {
            label: "制单人",
            prop: "createUserName",
            searchProp: "createUser",
            overHidden: true,
            width: 100,
            filterable: true,
            remote: true,
            type: "select",
            dicUrl: "/api/blade-user/page?size=20&current=1&account={{key}}",
            props: {
              label: "account",
              value: "id",
              res: "data.records",
            },
          },
          {
            label: "制单日期",
            prop: "createTime",
            searchProp: "createTimeList",
            type: "date",
            overHidden: true,
            width: 100,
            searchRange: true,
            searchDefaultTime: ["00:00:00", "23:59:59"],
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
          },
          {
            label: "更新人",
            prop: "updateUserName",
            searchProp: "updateUser",
            overHidden: true,
            width: 100,
            filterable: true,
            remote: true,
            type: "select",
            dicUrl: "/api/blade-user/page?size=20&current=1&account={{key}}",
            props: {
              label: "account",
              value: "id",
              res: "data.records",
            },
          },
          {
            label: "更新日期",
            prop: "updateTime",
            searchProp: "updateTimeList",
            type: "date",
            overHidden: true,
            width: 100,
            searchRange: true,
            searchDefaultTime: ["00:00:00", "23:59:59"],
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
          },
        ],
      },
      option2: {
        height: "auto",
        calcHeight: 30,
        menuWidth: 120,
        tip: false,
        searchShow: true,
        searchMenuSpan: 12,
        border: true,
        index: true,
        addBtn: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        // selection: true,
        searchIcon: true,
        align: "center",
        searchIndex: 3,
        column: [
          {
            label: "订单编号",
            prop: "ordNo",
            search: true,
            overHidden: true,
          },
          {
            label: "客户名称",
            prop: "customerName",
            search: true,
            overHidden: true,
          },
          {
            label: "订单数量",
            prop: "goodsNum",
            overHidden: true,
          },
          {
            label: "已出库数量",
            prop: "outGoodsTotalShipNum",
            overHidden: true,
          },
          {
            label: "未出库数量",
            prop: "sendNum",
            overHidden: true,
          },
          {
            label: "商品名称",
            prop: "goodsName",
            overHidden: true,
          },
        ],
      },
    };
  },
  async created() {
    // 状态字段获取
    this.getWorkDicts("outbound_work_order_status").then((res) => {
      this.statusNameData = res.data.data;
    });
    this.key++;
    let i = 0;
    this.option.column.forEach((item) => {
      if (item.search) i++;
    });
    if (i % 3 !== 0) {
      const num = 3 - Number(i % 3);
      this.option.searchMenuSpan = num * 8;
      this.option.searchMenuPosition = "right";
    }
    if (this.$route.query.id) {
      this.detailData = {
        id: this.$route.query.id,
      };
      this.detailsOpen = true;
    }
    console.log(this.$route.query);
  },
  activated() {
    if (this.$route.query.id) {
      this.detailData = {
        id: this.$route.query.id,
      };
      this.detailsOpen = true;
    }
    setTimeout(() => {
      if (this.$route.query.srcId) {
        this.$store.commit("DOMIO_IN_DETAIL");
        this.detailsOpen = true;
      }
    }, 100);
  },
  methods: {
    check(row) {
      this.form = row;
      this.detailsOpen = true;
    },
    backToList(type) {
      this.form = {};
      this.detailsOpen = false;
      if (type === 0) {
        this.detailData = {};
      }
      if (this.$route.query.srcId) {
        this.$router.$avueRouter.closeTag(this.$route.fullPath);
        this.$router.push({
          path: "/tirePartsMall/salesManagement/outboundWorkOrder/index",
        });
      }
      this.onLoad(this.page, this.search);
      this.$store.commit("DOMIO_OUT_DETAIL");
    },
    //刷新
    refreshChange() {
      this.onLoad(this.page, this.search);
    },
    rowDel(form, index) {
      console.log(form);
      this.$confirm("是否撤销生成发货单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          remove(form.id).then((res) => {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.dataList.splice(index, 1);
            this.onLoad(this.page);
          });
        })
        .catch(() => {});
    },
    searchChange(params, done) {
      this.page.currentPage = 1;
      done();
      this.onLoad(this.page, params);
    },
    handleClick(tab, event) {
      console.log(tab.name, event);
      if (tab.name == "待生成") {
        // this.query.statusName = tab.name;
        this.onLoad2(this.page2, this.query);
      } else {
        // this.search.statusName = tab.name;
        this.onLoad(this.page, this.search);
      }
    },
    onLoad(page, params = {}) {
      var obj2 = this.deepClone(this.search);
      params = {
        ...params,
        current: page.currentPage,
        size: page.pageSize,
        bizTypeName: "FHGD",
        ...Object.assign(params, this.search),
        statusName:this.activeName==3?'':this.activeName,
      };
      this.loading = true;
      this.dataList.forEach((item) => {
        this.$refs.crud.toggleRowExpansion(item, false);
      });
      getList(params)
        .then((res) => {
          if (res.data.data.records) {
            res.data.data.records.forEach((e) => {
              e.itemLoading = true;
            });
          }
          this.dataList = res.data.data.records;
          this.page.total = res.data.data.total;
          this.$nextTick(() => {
            this.$refs.crud.doLayout();
            this.$refs.crud.dicInit();
          });
          this.loading = false;
        })
        .finally(() => {
          // if(this.search.statusName==''){
          //   this.search.statusName='待出库'
          // }
          this.search = obj2;
          console.log(this.search);
          this.loading = false;
        });
    },
    editOpen(row, status) {
      this.form = row;
      this.detailData = {
        id: row.id,
        status: status,
      };
      this.detailsOpen = true;
    },
    expandChange(row) {
      if (!row.itemData) {
        getDetails({ id: row.id })
          .then((res) => {
            this.dataList[row.$index].itemData = res.data.data.shipItemsList;
          })
          .finally(() => {
            this.dataList[row.$index].itemLoading = false;
          });
      }
    },
    // 发货按钮
    deliverGoods(row) {
      // 获取运输类型
      getWorkDicts("deliveryMethod").then((res) => {
        this.courierTypeList = res.data.data;
      });
      // 获取快递公司
      getWorkDicts("tyre_express_company").then((res) => {
        this.courierList = res.data.data;
      });

      this.dialogForm = row;

      this.dialogVisible = true;
    },
    courierTypeChange() {
      this.dialogForm.courierCorporation = null;
    },
    // 发货
    confirmShipment() {
      for (let courierCompanies of this.courierList) {
        if (courierCompanies.dictValue === this.dialogForm.logisticsCorpName) {
          this.dialogForm.logisticsCorpId = courierCompanies.dictKey;
          break;
        }
      }

      const requestBody = {
        id: this.dialogForm.id,
        logisticsCorpId: this.dialogForm.logisticsCorpId,
        logisticsCorpName: this.dialogForm.logisticsCorpName,
        shipType: this.dialogForm.shipType,
        expressNo: this.dialogForm.expressNo,
      };

      shipments(requestBody).then((res) => {
        console.log(res);
        this.$message.success("发货成功");
        this.dialogVisible = false;
      });
    },
    /**
     * @param {{ currentPage: any; pageSize: any; }} page
     */
    onLoad2(page, params = {}) {
      let obj = {};
      obj = {
        ...Object.assign(params, this.query),
      };
      this.loading2 = true;
      getOutboundList(page.currentPage, page.pageSize, obj)
        .then((res) => {
          this.dataList2 = res.data.data.records;
          this.page2.total = res.data.data.total;
          this.$nextTick(() => {
            this.$refs.crud2.doLayout();
          });
        })
        .finally(() => {
          this.loading2 = false;
        });
    },
    refreshChange2() {
      this.onLoad2(this.page2, this.query);
    },
    searchChange2(params, done) {
      done();
      this.page2.currentPage = 1;
      this.onLoad2(this.page2, params);
    },
    rowEdit(row) {
      this.generateForm = row;
      this.generateData = [];
      let obj = {
        goodsId: row.goodsId,
      };
      tireStockDescList(obj).then((res) => {
        res.data.data.forEach((item) => {
          this.generateData.push({
            ...row,
            storageId: item.storageId,
            storageName: item.storageName,
            dot: item.dot,
            poNo: item.poNo,
            inventory: item.balanceQuantity,
            sendNum: 0,
            costpriePrice: item.inventoryCostPrice,
            reservoirAreaId: item.reservoirAreaId,
            reservoirArea: item.reservoirArea,
          });
        });
      });
      console.log(this.generateData);
      this.generateVisible = true;
    },
    sendNumChange(row, index) {
      let sum = 0;
      for (let item of this.generateData) {
        sum += Number(item.sendNum);
      }
      if (sum > row.goodsNum) {
        return this.$message.error("发货数量合计不能超过订单数量:"+row.goodsNum);
      }
    },
    generate() {
      if (this.generateData.filter((item) => item.sendNum > 0).length == 0) {
        return this.$message.error("发货数量不能为0");
      }
      let sum = 0;
      for (let item of this.generateData) {
        sum += Number(item.sendNum);
      }
      if (sum > this.generateForm.sendNum){
        return this.$message.error("发货数量合计不能超过订单数量:"+this.generateForm.sendNum);
      }
      let obj = {
        ...this.generateForm,
        shipItemsList: this.generateData.filter((item) => item.sendNum > 0),
      };
      const loading = this.$loading({
        lock: true,
        text: "加载中",
        spinner: "el-icon-loading",
        background: "rgba(255,255,255,0.7)",
      });
      submitShip(obj)
        .then((res) => {
          this.generateVisible = false;
          this.$message.success("操作成功");
          this.refreshChange();
          this.refreshChange2();
        })
        .finally(() => {
          loading.close();
        });
    },
  },
};
</script>

<style scoped>
.bottomBox {
  padding: 3px 6px;
  border-radius: 12px;
  color: #fff;
  font-size: 10px;
}
</style>