logpm_page/src/views/reportforms/Selfpickuptask.vue

<template>
    <basic-container>
      <!-- 首页表格 -->
      <div class="avue-crud">
        <!-- 搜索模块 -->
        <el-row v-if="search">
            <!-- 查询模块 -->
            <el-form :inline="true" :model="TopQuery" class="el-fr-d">
            <!-- 查询按钮 -->
  
            <div class="el_top_left">
              <el-form-item label="提货时间">
                <el-date-picker
                  v-model="TopQuery.time"
                  type="datetimerange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD"
                  date-format="YYYY/MM/DD"
                  time-format="A"
                  @change="Toptiem"
                />  
              </el-form-item>
  
              <el-form-item label="仓库">
                <el-select
                  multiple
                  v-model="TopQuery.warehouseRange"
                  filterable
                  placeholder="多选仓库搜索"
                  style="width: 240px"
                >
                  <el-option
                    v-for="item in warehouseList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
  
              <el-form-item label="收货单位">
                <el-input
                  v-model="TopQuery.consigneeUnitRange"
                  style="width: 240px"
                  :rows="1"
                  type="textarea"
                  placeholder="多个收货单位请用逗号隔开"
                />
              </el-form-item>
              <el-form-item label="收货人">
                <el-input
                  v-model="TopQuery.consigneeUserRange"
                  style="width: 240px"
                  :rows="1"
                  type="textarea"
                  placeholder="多个收货人请用逗号隔开"
                />
              </el-form-item>
              <el-form-item label="提货人">
                <el-input
                  v-model="TopQuery.billUserRange"
                  style="width: 240px"
                  :rows="1"
                  type="textarea"
                  placeholder="多个提货人请用逗号隔开"
                />
              </el-form-item>
  
              <el-form-item label="运单收货人">
                <el-input
                  v-model="TopQuery.consigneeNameRange"
                  style="width: 240px"
                  :rows="1"
                  type="textarea"
                  placeholder="多个运单收货人请用逗号隔开"
                />
              </el-form-item>
            </div>
            <el-form-item class="el-btn">
              <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
              <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
            </el-form-item>
          </el-form>
          </el-row>
  
        <!-- 控件模块 -->
        <el-row>
          <div class="avue-crud__header">
            <!-- 头部左侧按钮模块 -->
            <div class="avue-crud__left">
              <el-button type="primary" @click="exportReport">
                <el-icon><Download /></el-icon>导出报表</el-button
              >
            </div>
            <!-- 头部右侧按钮模块 -->
            <div class="avue-crud__right">
              <el-button icon="el-icon-refresh" @click="searchChangeS" circle></el-button>
              <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
              <el-button icon="Search" @click="searchHide" circle></el-button>
            </div>
          </div>
        </el-row>
  
        <!-- 首页表格 -->
        <el-row>
          <!-- 列表模块 -->
          <tablecmt
            class="tableNode"
            :columnList="columnList"
            :tableData="data"
            :loading="loadingObj.list"
            @inputTxt="inputsc"
            @timeCheck="timesc"
            @btnCheck="btnsc"
            @selectCheck="selectsc"
            @selection="selectionChange"
          >
            <template #default="slotProps">
              <template v-if="slotProps.scope.column.label === '操作'">
                <div class="ElBtnClass">
                  <el-button @click="view(slotProps.scope)">查看</el-button>
                </div>
              </template>
            </template>
          </tablecmt>
        </el-row>
  
        <!-- 分页模块 -->
        <el-row class="el-fy">
          <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
            <div></div>
            <el-pagination
              align="right"
              background
              @size-change="sizeChange"
              @current-change="currentChange"
              :current-page="page.currentPage"
              :page-sizes="[30, 50, 80, 120]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
        </el-row>
      </div>
    </basic-container>
    <!-- 列表配置显示 -->
    <edittablehead
      @setcolum="setnewcolum"
      @closce="showdrawer"
      :drawerShow="drawerShow"
      :columnList="details.columnList"
    ></edittablehead>
  </template>
  
  <script setup>
  import { ref, reactive, toRefs, computed, onMounted, nextTick, watch } from 'vue';
  import { columnList } from '@/option/reportforms/Selfpickuptask.js';
  import { getDictionaryBiz } from '@/api/system/dict'; //字典
  import { processRowProperty, setNodeHeight } from '@/utils/util';
  import { $_getMyWarehouseList,$_exportStockOrder, $_getstockOrder  } from '@/api/reportforms/index.js';
  import { ElMessageBox } from 'element-plus';
  import { downloadXls } from '@/utils/util';
  import functions from '@/utils/functions.js';
  import dayjs from 'dayjs';
  const queryCarn=ref({});//查询顶部
  const TopQuery=ref({});//查询顶部
  const warehouseList = ref([]); //仓库列表
  const DeliveryTypeList = ref([
    {
      label: '商配',
      value: '商配',
    },
  
    {
      label: '市配',
      value: '市配',
    },
  ]); //配送类型
  // 配送种类
  const DeliverygenericList = ref([
    {
      label: '自主配送',
      value: '自主配送',
    },
  
    {
      label: '三方配送',
      value: '三方配送',
    },
  ]); //配送类型
  const details = reactive({
    /** 是否开启搜索 */
    search: false,
    /** 表格搜索条件 */
    query: {},
    /** 时间快捷选择设置 */
    shortcuts: [
      {
        text: '最近一周',
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          return [start, end];
        },
      },
      {
        text: '最近一个月',
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          return [start, end];
        },
      },
      {
        text: '最近三个月',
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          return [start, end];
        },
      },
    ],
    /** 时间选择器数据 */
    stockupDate: [],
    /** 列表 */
    columnList,
  
    /** 列表数据 */
    data: [],
    /** 页面loading */
    loadingObj: {
      /** 列表加载loading */
      list: false,
      packageListLoading: false,
    },
    /** 列表复选框选中的数据 */
    selectionList: [],
    /** 是否显示设置表格 */
    drawerShow: false,
    /** 分页参数 */
    page: {
      currentPage: 1,
      pageSize: 50,
      total: 0,
    },
  
    /** 弹出层显示 */
    popUpShow: {
      /** 包件明细 */
      packageOrderListlVisited: false,
      /** 二维码 */
      QRCodeVisible: false,
      /** 修改客户信息 */
      editClientInfoVisible: false,
    },
    /** 列表Dom节点 */
    listNode: '',
    form: {},
    /** 全屏 */
    fullscreenObj: {
      /** 包明细 */
      packageOrderListlVisited: false,
    },
  });
  
  const {
    search,
    query,
    shortcuts,
    stockupDate,
    data,
    loadingObj,
    selectionList,
    drawerShow,
    page,
    trickleLoadingPage,
    zeroAdditionalRecordingInfo,
    popUpShow,
    recorddata,
  } = toRefs(details);
  /**
   * 设置列表 -- 固定函数
   * 弹窗的勾选回调，用于更改头部数组
   * 固定搭配，只需要更换   columnList
   *  */
  const setnewcolum = (newarr, headarr, type) => {
    if (type == 1) {
      details.columnList = newarr;
      functions.setStorage(window.location.pathname + 'checkList', headarr);
    } else if (type == 2) {
      details.columnList = newarr;
      functions.setStorage(window.location.pathname + 'flexList', headarr);
    } else if (type == 3) {
      details.columnList = newarr;
      functions.setStorage(window.location.pathname + 'sortlist', headarr);
    }
  };
  /** 展开列表控件 */
  const showdrawer = _flag => {
    details.drawerShow = _flag;
  };
  /** 表格表头输入框搜索 */
  const inputsc = (index, row) => {
    details.query[row.prop] = index;
    processRowProperty(index, row, details);
    getrain();
  };
  
  /** 表格表头时间选择 */
  const timesc = (index, row) => {
    console.log(index, row);
    if (!!index) {
      index = dayjs(index).format('YYYY-MM-DD');
    }
    details.query[row.prop] = index;
    if (!index) {
      delete details.query[row.prop];
    }
    getrain();
  };
  
  /** 表格表头输入框搜索 */
  const btnsc = val => {
    console.log(val);
  };
  /** 表格表头下拉框选择 */
  const selectsc = (index, row) => {
    processRowProperty(index, row, details);
    getrain();
  };
  /** 表格表头复选框选择 */
  const selectionChange = list => {
    console.log(list);
    details.selectionList = list;
  };
  // 清空
  const searchReset=()=>{
    TopQuery.value = {};
    TopQuery.value.warehouseRange=[]
    queryCarn.value = {};
    getrain();
  }
  // 网页顶部搜索按钮
  const searchChange = () => {
    // 日期处理
    if (TopQuery.value.time) {
      queryCarn.value.startCreatedTime = dayjs(TopQuery.value.time[0]).format('YYYY-MM-DD HH:mm:ss'); //开始日期
      queryCarn.value.endCreatedTime = dayjs(TopQuery.value.time[1]).format('YYYY-MM-DD HH:mm:ss'); //结束日期
    }else{
      delete  queryCarn.value.startCreatedTime
      delete  queryCarn.value.endCreatedTime
    }
    // 仓库处理
    if (TopQuery.value.warehouseRange.length) {
      queryCarn.value.warehouseRange = TopQuery.value.warehouseRange.join(',');
    }else{
      delete queryCarn.value.warehouseRange;                                          
    }
    // 收货单位
    if(TopQuery.value.consigneeUnitRange){
      queryCarn.value.consigneeUnitRange = TopQuery.value.consigneeUnitRange
    }else{
      delete queryCarn.value.consigneeUnitRange;
    }
    // 收货人
    if(TopQuery.value.consigneeUserRange){
      queryCarn.value.consigneeUserRange = TopQuery.value.consigneeUserRange
    }else{
      delete queryCarn.value.consigneeUserRange;
    }
  
    // 提货人
    if(TopQuery.value.billUserRange){
      queryCarn.value.billUserRange = TopQuery.value.billUserRange
    }else{
      delete queryCarn.value.billUserRange;
    }
    // 运单收货人
    if(TopQuery.value.consigneeNameRange){
      queryCarn.value.consigneeNameRange = TopQuery.value.consigneeNameRange
    }else{
      delete queryCarn.value.consigneeNameRange;
    }
    // 运单收货人
    if(TopQuery.value.consigneeNameRange){
      queryCarn.value.consigneeNameRange = TopQuery.value.consigneeNameRange
    }
    console.log(queryCarn.value, '顶部搜索触发');
    getrain(queryCarn.value)
    // details.search = false; //关闭搜索
  };
  // 每页多少条
  const sizeChange = val => {
    details.page.pageSize = val;
    getrain();
  };
  /** 页码改变执行的回调 */
  const currentChange = val => {
    details.page.currentPage = val;
    getrain();
  };
  // 刷新按钮
  const searchChangeS = () => {
    details.columnList.forEach(item => {
      item.values = '';
    });
    details.search = false; //关闭搜索
    getrain();
  };
  // 顶部搜索
  const searchHide = () => {
    console.log(details);
    details.search = !details.search;
  
    const _node = document.querySelector('.tableNode');
    setNodeHeight(_node, '', true);
  };
  // 字典公共函数
  function updateDictionary(targetArray, dictionaryType) {
    getDictionaryBiz(dictionaryType).then(res => {
      console.log(res, '字典');
      res.data.data.forEach(item => {
        targetArray.push({
          value: item.dictKey,
          label: item.dictValue,
        });
      });
    });
  }
  // 页面初始化方法
  const onLoad = () => {
    warehouseList.value = [];
    columnList.find(res => res.label == '仓库').checkarr = [];
    columnList.find(res => res.label == '仓库').checkarr = warehouseList.value;
  
    console.log(columnList, 'columnList');
    // 获取仓库
  
    $_getMyWarehouseList().then(res => {
      console.log(res, '仓库列表');
      if (res.data.data.length)
        res.data.data.forEach(item => {
          warehouseList.value.push({
            value: item.name,
            label: item.name,
          });
        });
    });
  };
  onLoad();
  // 获取数据
  const getrain = (val) => {
    let data = {
      current: details.page.currentPage,
      size: details.page.pageSize,
      ...details.query,
      ...val,
    };
    details.loadingObj.list = true;
    
    $_getstockOrder(data)
      .then(res => {
        console.log(res, '当前参数');
        details.page.total = res.data.data.total;
        details.data = res.data.data.records;
      })
      .catch(() => {})
      .finally(() => {
        details.loadingObj.list = false;
      });
  };
  getrain();
  // 导出
  const exportReport = () => {
    ElMessageBox.confirm('是否导出报表?', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(() => {
        let data = {
          ...details.query,
        };
        $_exportStockOrder(data)
          .then(res => {
            downloadXls(res.data, `在库订单报表数据.xlsx`);
          })
          .catch(() => {})
          .finally(() => {
            details.loadingObj.list = false;
          });
      })
      .catch(() => {});
  };
  </script>
  
  <style scoped lang="scss">
  .ElBtnClass button {
    border: none;
    padding: 0;
    background-color: transparent;
  }
  :deep(.el-card) {
    height: 100%;
  }
  :deep(.el-card__body) {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .el-fy {
    flex: 1;
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
  }
  .avue-crud {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  :deep(.el-fr-d) {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .el_top_left {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      .el-form-item {
        align-items: flex-start;
      }
      .el-form-item__content {
        align-items: flex-start;
        height: 100%;
        .el-date-editor {
          height: 29px !important;
        }
      }
    }
  }
  :deep(.el-btn) {
    margin-right: 0;
    display: flex;
    width: 100%;
    justify-content: flex-end;
    .el-form-item__content {
      justify-content: flex-end;
    }
  }
  </style>