supply-front/src/views/supply/pickup/check.vue

<template>
  <div class="app-container">

    <div v-show="!isShowPrint">
      <div class="main-title" style="margin-top: 0;">
        <div class="title">仓库提货确认</div>
      </div>

      <div>
        <el-form ref="screenForm" :model="screenForm" label-width="96px" size="mini" label-position="right">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="8" :lg="6">
              <el-form-item label="提货人手机号" prop="phone">
                <el-input v-model="screenForm.phone" placeholder="请输入提货人手机号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="3" :lg="3">
              <el-button size="mini" type="primary" @click="getCode" :disabled="!screenForm.phone || countDown != 60">{{countDown == 60 ? getCodeText : '重新获取('+countDown+'s)'}}</el-button>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="8">
              <el-form-item label="验证码" prop="code">
                <el-input v-model="screenForm.code" placeholder="请输入验证码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="3" :lg="3">
              <el-button size="mini" type="primary" :disabled="!screenForm.phone || !screenForm.code" @click="getPickupManInfo">确 认</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="8" :lg="8">
              <el-form-item label="提货人姓名" prop="name">
                <!-- <el-input v-model="screenForm.name" placeholder="请通过手机验证获取" ></el-input> -->
                 <el-select style="width:100%" v-model="screenForm.name"  placeholder="请选提货人姓名" clearable filterable  @change="onChage">
                  <el-option v-for="item in userList"
                    :key="item.id"
                    :label="`${item.takerName} - ${item.customerName}`"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="8">
              <el-form-item label="提货人身份证" prop="idCard">
                <el-input v-model="screenForm.idCard" placeholder="请通过手机验证获取" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="8" :lg="8">
              <el-form-item label="经销商" prop="customerName">
                <el-input v-model="screenForm.customerName" placeholder="经销商" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="8">
              <el-form-item label="仓库" prop="warehouse">
                <el-select v-model="screenForm.warehouse" placeholder="请选择仓库" filterable clearable style="width: 100%">
                  <el-option :label="item.name" :value="item.id" v-for="(item, index) in warehouseList" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="5" :lg="5">
              <el-button size="mini" type="primary" @click="getList">查 询</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-form-item prop="status" label-width="0">
                <el-radio-group v-model="screenForm.status" size="mini" @change="getList()">
                  <el-radio-button v-for="(item, index) in statusList" :key="index" :label="item.value">{{item.label}}</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="main-title">
        <div class="title">提货单</div>
        <div class="fr">
          <ExportButton :exUrl="'pick/storeExport'" :exParams="exParams" />
        </div>
      </div>

      <div class="mymain-container">
        <div class="table">
          <el-table ref="table" v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe @select="handleSelect" @select-all="handleSelectAll">
            <el-table-column align="left" type="selection" width="55"></el-table-column>
            <!-- <el-table-column align="left" label="操作" width="100" fixed="left">
              <template slot-scope="scope">
                <el-button type="text" @click="toPrint(scope.row)">打印</el-button>
              </template>
            </el-table-column> -->
            <el-table-column align="left" label="状态" min-width="100" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.printNum ? '已打单(' + scope.row.printNum + ')' : '未打单' }}
              </template>
            </el-table-column>
            <el-table-column align="left" label="信息密钥" prop="informationKey" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copyText="scope.row.informationKey" />
                <span>{{scope.row.informationKey}}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="经销商编码" prop="customerNumber" min-width="100" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copyText="scope.row.customerNumber" />
                <span>{{scope.row.customerNumber}}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="经销商名称" prop="customerName" min-width="250" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copyText="scope.row.customerName" />
                <span>{{scope.row.customerName}}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="预约日期" prop="pickTime" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.pickTime | dateToDayFilter }}
              </template>
            </el-table-column>
            <el-table-column align="left" label="提货时段" min-width="100" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.pickStatus == '1' ? '上午':'下午' }}
              </template>
            </el-table-column>
            <el-table-column align="left" label="销售订单号" prop="mainOrderId" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copyText="(scope.row.orderType == 'HOME' || scope.row.orderType == 'TRADE') ? scope.row.enginOrderNo: scope.row.mainOrderId" />
                <span>{{ (scope.row.orderType == 'HOME' || scope.row.orderType == 'TRADE') ? scope.row.enginOrderNo: scope.row.mainOrderId }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="发货申请单号" prop="invoiceId" min-width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copyText="scope.row.invoiceId" />
                <span>{{scope.row.invoiceId}}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="销售类型" prop="saleTypeName" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" label="物料编码" prop="materialCode" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copyText="scope.row.materialCode" />
                <span>{{scope.row.materialCode}}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="产品编码" prop="materialOldNumber" min-width="140" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copyText="scope.row.materialOldNumber" />
                <span>{{scope.row.materialOldNumber}}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="产品名称" prop="materialName" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copyText="scope.row.materialName" />
                <span>{{scope.row.materialName}}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="规格型号" prop="specification" min-width="350" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copyText="scope.row.specification" />
                <span>{{scope.row.specification}}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="单位" prop="unit" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" label="数量" prop="refundableQty" min-width="100" show-overflow-tooltip></el-table-column>
            <!-- <el-table-column align="left" label="单价" prop="price" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" label="金额" prop="payAmount" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" label="使用返利金额" prop="payRebateAmount" min-width="120" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" label="格力折扣" prop="totalDiscAmount" min-width="100" show-overflow-tooltip></el-table-column> -->
            <el-table-column align="left" label="仓库" prop="correspondName" min-width="160" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" label="提货方式" prop="pickType" min-width="100" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.pickType == '1' ? '自提':'物流快递' }}
              </template>
            </el-table-column>
            <el-table-column align="left" label="提货人/物流公司" prop="takerName" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.pickType == '1' ? scope.row.takerName:scope.row.pickLogistics }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- <div class="pagination clearfix">
        <div class="fr">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal">
          </el-pagination>
        </div>
      </div> -->

      <div class="page-footer">
        <div class="footer">
          <el-button type="primary" @click="toPrint" :disabled="tableSelection.length < 1">打印发货单</el-button>
        </div>
      </div>

    </div>

    <el-dialog title="密码确认" :visible.sync="isShowDialog" :show-close="false" width="40%" :close-on-click-modal="false">
      <el-form ref="dialogForm" :model="dialogForm" :rules="dialogFormRules" label-position="right" label-width="70px">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :lg="24">
            <el-form-item label="密码" prop="password">
              <el-input v-model="dialogForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="12">
            <el-form-item label="操作人" prop="createMan">
              <el-input v-model="dialogForm.createMan" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="12" style="height: 51px;">
            <el-form-item label="操作日期" prop="createDate">
              <el-date-picker v-model="dialogForm.createDate" readonly type="date" value-format="yyyy-MM-dd" style="width: 100%;" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialogForm">取 消</el-button>
        <el-button type="primary" @click="submitDialogForm">确 定</el-button>
      </div>
    </el-dialog>
    <print-preview ref="preView" />

    <!-- <PickupPrint :listItem="queryItem" v-if="isShowPrint" @backListFormDetail="backList" /> -->

  </div>
</template>

<script>
import {
  getPickupList,
  getCode,
  getPickupManInfo,
  checkPassword,
  getWarehouseList,
} from "@/api/supply/pickup";
import { getDealerList, getListCustomer } from "@/api/basic_data/dealer";

import PickupPrint from "@/views/supply/pickup/components/pickup_print";

import { disAutoConnect, hiprint, defaultElementTypeProvider } from 'vue-plugin-hiprint'
disAutoConnect();

import panel from './components/design/panel'
import { getDetails, detailArr } from './components/design/print-data'

import printPreview from './components/design/preview.vue'
export default {
  components: {
    PickupPrint,
    printPreview
  },
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      dataList: null, // 列表数据
      listLoading: false, // 列表加载loading
      screenForm: {
        // 筛选表单数据
        phone: "",
        code: "",
        name: "",
        idCard: "",
        manId: "",
        status: 0,
        customerName: '',
        warehouse: '',
      },
      statusList: [
        { label: "未打单", value: 0 },
        { label: "已打单", value: 1 },
      ],
      warehouseList: [],

      getCodeText: "获取验证码",
      countDown: 60,
      timer: null,

      tableSelection: [],

      queryItem: {},
      isShowPrint: false,
      dealerList:[],
      isShowDialog: false,
      dialogForm: {
        password: "",
        createMan: "",
        createDate: "",
      },
      dialogFormRules: {
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      userList:[]
      ,
      curPaper: {
        type: 'A5',
        width: 500,
        height: 147.6
      },
      paperTypes: {
        'A3': {
          width: 420,
          height: 296.6
        },
        'A4': {
          width: 210,
          height: 296.6
        },
        'A5': {
          width: 210,
          height: 147.6
        },
        'B3': {
          width: 500,
          height: 352.6
        },
        'B4': {
          width: 250,
          height: 352.6
        },
        'B5': {
          width: 250,
          height: 175.6
        }
      },
      scaleValue: 1,
      scaleMax: 5,
      scaleMin: 0.5,
      hiprintTemplate:'',
      isShowDialog: false,
    };
  },

  computed: {
    exParams() {
      return {
        takerId: this.screenForm.manId,
        status: this.screenForm.status,
      };
    },
    
    curPaperType() {
      let type = 'other'
      let types = this.paperTypes
      for (const key in types) {
        let item = types[key]
        let { width, height } = this.curPaper
        if (item.width === width && item.height === height) {
          type = key
        }
      }
      return type
    }
  },

  created() {
    // this.getDealerList()
  },
  activated(){
    this.initPrint()
  },
  methods: {
    initPrint(){
      hiprint.init({
      providers: [new defaultElementTypeProvider()]
    });
    // 还原配置
    hiprint.setConfig()
    // 替换配置
    hiprint.setConfig({
      movingDistance: 2.5,
      text: {
        supportOptions: [
          {
            name: 'styler',
            hidden: true
          },
          {
            name: 'formatter',
            hidden: true
          },
        ]
      }
    })
    // eslint-disable-next-line no-undef
    hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
    this.hiprintTemplate = new hiprint.PrintTemplate({
      template: panel,
      settingContainer: '#PrintElementOptionSetting',
      paginationContainer: '.hiprint-printPagination'
    });
    this.hiprintTemplate.design('#hiprint-printTemplate');
    // 获取当前放大比例, 当zoom时传true 才会有
    // this.scaleValue = hiprintTemplate.editingPanel.scale || 1;
    }
,
    getDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },

    async getDealerList() {
      const res = await getDealerList({ pageNum: 1, pageSize: -1 });
      this.dealerList = res.data.records;
    },

    // 获取仓库列表
    getWarehouseList() {
      getWarehouseList({
        pageNum: 1,
        pageSize: -1
      }).then((res) => {
        this.warehouseList = res.data.records;
      })
    },
    
    // 获取短信验证码
    getCode() {
      getCode({ mobile: this.screenForm.phone }).then((res) => {
        this.$successMsg("短信已发送");
        this.countDown--;
        this.timer = setInterval(() => {
          this.countDown--;
          if (this.countDown == 0) {
            this.countDown = 60;
            this.getCodeText = "重新获取";
            clearInterval(this.timer);
          }
        }, 1000);
      });
    },

    // 获取提货人信息
    getPickupManInfo() {
      getPickupManInfo({
        mobile: this.screenForm.phone,
        code: this.screenForm.code,
      }).then((res) => {
        this.$successMsg("验证成功");
        this.screenForm.name = `${res.data[0].takerName} - ${res.data[0].customerName}`;
        this.screenForm.idCard = res.data[0].identity;
        this.screenForm.manId = res.data[0].id;
        this.screenForm.customerName = res.data[0].customerName
        this.userList = res.data
        this.getListCustomer()
      });
    },

    onChage(e){
       const  userInfo =   this.userList.filter(k=>{
          return e === k.id
        })
     this.screenForm.name = `${userInfo[0].takerName} - ${userInfo[0].customerName}`;
        this.screenForm.idCard = userInfo[0].identity;
        this.screenForm.manId = userInfo[0].id;
        this.screenForm.customerName = userInfo[0].customerName
    },

    getListCustomer(){
      getListCustomer({
        keyword:'',
        phone: this.screenForm.phone,
        pageNum:1,
        pageSize:-1
      }).then(res=>{
        this.dealerList = res.data.records
        // this.screenForm.customerNumber = this.dataList[0].number
      })
    },

    // 查询列表
    getList() {
      if (!this.screenForm.manId) {
        return this.$errorMsg("请先查询提货人信息");
      }
      if (!this.screenForm.warehouse) {
        return this.$errorMsg("请选择仓库");
      }

      this.listLoading = true;

      let params = {
        pageNum: 1,
        pageSize: -1,
        // takerId: this.screenForm.manId,
        status: this.screenForm.status,
        takerPhone: this.screenForm.phone,
        // customerName:this.screenForm.customerName,
        correspondId: this.screenForm.warehouse,
      };
      getPickupList(params).then((res) => {
        this.dataList = res.data.records;
        this.listTotal = res.data.total;
        this.listLoading = false;
      });
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getList();
    },

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },

    backList() {
      this.queryItem = {};
      this.isShowPrint = false;
    },

    handleSelect(selection, row) {
      this.$refs.table.toggleRowSelection(row);
      this.dataList.forEach((item) => {
        if (item.informationKey === row.informationKey) {
          this.$refs.table.toggleRowSelection(item);
        }
      });
      this.tableSelection = this.$refs.table.selection;
    },

    handleSelectAll(selection) {
      this.tableSelection = this.$refs.table.selection;
    },

    // 检查是否一致
    isAllEqual(array) {
      if (array.length > 0) {
        return !array.some(function (item, index) {
          return item.informationKey !== array[0].informationKey;
        });
      } else {
        return true;
      }
    },

    // 点击打印
    toPrint() {
    
      if (!this.isAllEqual(this.tableSelection)) {
        return this.$errorMsg("只能选择同一个提货订单");
      }

      if (!this.tableSelection[0].printNum) {
        this.queryItem = this.tableSelection;
        getDetails(this.tableSelection)
        this.$refs.preView.show(this.hiprintTemplate, detailArr)
      } else {
        this.queryItem = this.tableSelection;
        this.dialogForm.createMan = JSON.parse(
          localStorage.getItem("supply_user")
        ).nickName;
        this.dialogForm.createDate = this.getDate();
        this.isShowDialog = true;
      }
    },

    // 点击打印
    // toPrint(item) {
    //   if(!item.printNum) {
    //     this.queryItem = item;
    //     this.isShowPrint = true;
    //   }else {
    //     this.queryItem = item;
    //     this.dialogForm.createMan = JSON.parse(localStorage.getItem("supply_user")).nickName;
    //     this.dialogForm.createDate = this.getDate();
    //     this.isShowDialog = true;
    //   }
    // },

    // 关闭弹窗
    cancelDialogForm() {
      this.isShowDialog = false;
      this.$refs.dialogForm.resetFields();
    },

    // 提交 弹窗
    submitDialogForm() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          let params = {
            shipId: this.queryItem[0].invoiceId,
            password: this.dialogForm.password,
          };
          checkPassword(params).then((res) => {
            this.cancelDialogForm();
            getDetails(this.tableSelection)
            this.$refs.preView.show(this.hiprintTemplate, detailArr)
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.main-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  border-bottom: 1px solid #dcdfe6;
  margin-bottom: 20px;
  .title {
    font-size: 16px;
    font-weight: 600;
    padding-left: 10px;
  }
}
</style>