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

<template>
  <div class="app-container">
    
    <div v-show="!isShowPrint">
      <div class="main-title">
        <div class="title">仓库提货确认</div>
      </div>

      <div>
        <el-form ref="screenForm" :model="screenForm" label-width="96px" size="small" label-position="right">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :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="12" :lg="3">
              <el-button size="small" type="primary" @click="getCode" :disabled="!screenForm.phone || countDown != 60">{{countDown == 60 ? getCodeText : '重新获取('+countDown+'s)'}}</el-button>
            </el-col>
            <el-col :xs="24" :sm="12" :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="12" :lg="3">
              <el-button size="small" type="primary" :disabled="!screenForm.phone || !screenForm.code" @click="getPickupManInfo">确 认</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="9">
              <el-form-item label="提货人姓名" prop="name">
                <el-input v-model="screenForm.name" placeholder="请通过手机验证获取" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="8">
              <el-form-item label="提货人身份证" prop="idCard">
                <el-input v-model="screenForm.idCard" placeholder="请通过手机验证获取" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="3">
              <el-button size="small" 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="orderNum" label-width="0">
                <el-radio-group v-model="screenForm.status" size="medium">
                  <el-radio-button label="0">未打印</el-radio-button>
                  <el-radio-button label="1">已打印</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>

      <div class="mymain-container">
        <div class="table">
          <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe @selection-change="handleSelectionChange">
            <el-table-column align="center" type="selection" width="55"></el-table-column>
            <el-table-column align="center" 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="center" label="信息密钥" prop="informationKey" min-width="180" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" 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="center" label="提货时段" min-width="100" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.pickStatus == '1' ? '上午':'下午' }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="销售订单号" prop="mainOrderId" min-width="200" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="发货申请单号" prop="invoiceOrderId" min-width="180" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="销售类型" prop="saleTypeName" min-width="120" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="产品大类" prop="mainName" min-width="120" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="产品编码" prop="materialCode" min-width="160" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="产品名称" prop="materialName" min-width="160" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="规格型号" prop="specification" min-width="160" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="单位" prop="unit" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="数量" prop="qty" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="单价" prop="price" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="金额" prop="payAmount" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="使用返利金额" prop="payRebateAmount" min-width="120" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="格力折扣" prop="totalDiscAmount" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="仓库" prop="correspondName" min-width="160" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" 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="center" 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" :class="classObj">
          <el-button type="primary" @click="printData" :disabled="multipleSelection.length < 1">打印发货单</el-button>
        </div>
      </div>

    </div>

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

  </div>
</template>

<script>
import { getPickupList, getCode, getPickupManInfo, addPrint } from "@/api/supply/pickup";
import PickupPrint from "@/views/supply/pickup/components/pickup_print";

export default {
  components: {
    PickupPrint
  },
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      dataList: null, // 列表数据
      listLoading: false, // 列表加载loading
      screenForm: { // 筛选表单数据
        phone: '',
        code: '',
        name: '',
        idCard: '',
        pickupWay: '',
        company: '',
        secretKey: '',
      },

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

      multipleSelection: [],

      queryItem: {},
      isShowPrint: false,
    }
  },

  computed: {
    
  },

  created() {
    
  },

  methods: {
    // 查询按钮权限
    checkBtnRole(value) {
      // let btnRole = this.$route.meta.roles;
      // if(!btnRole) {return true}
      // let index = btnRole.indexOf(value);
      // return index >= 0;
      return true
    },

    // 获取短信验证码
    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.takerName;
        this.screenForm.idCard = res.data.identity;
      })
    },

    // 查询列表
    getList() {
      this.listLoading = true;

      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        userName: this.screenForm.account,
        nickName: this.screenForm.nickName,
        linkPhone: this.screenForm.phone,
        email: this.screenForm.email,
        status: this.screenForm.status,
      };
      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;
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 点击打印
    printData() {
      if(!item.printNum) {
        this.queryItem = item;
        this.isShowPrint = true;
        // addPrint({ids: item.id}).then(res => {

        // })
      }
    },
  }
}
</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>