logpm_page/src/views/reportforms/DeliveryDetails.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.warehouseNameRange"
                filterable
                clearable
                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.vehicleNameRange"
                style="width: 240px"
                :rows="1"
                type="textarea"
                clearable
                placeholder="多个配送车辆请用逗号隔开"
              />
            </el-form-item>
            <el-form-item label="配送司机">
              <el-input
                v-model="TopQuery.driverNameRange"
                style="width: 240px"
                :rows="1"
                type="textarea"
                clearable
                placeholder="多个配送司机请用逗号隔开"
              />
            </el-form-item>
            <el-form-item label="客户名称">
              <el-input
                v-model="TopQuery.consigneeRange"
                style="width: 240px"
                :rows="1"
                clearable
                type="textarea"
                placeholder="多个客户名称请用逗号隔开"
              />
            </el-form-item>

            <el-form-item label="运单收货人">
              <el-input
                v-model="TopQuery.consigneeNameRange"
                style="width: 240px"
                :rows="1"
                type="textarea"
                clearable
                placeholder="多个运单收货人请用逗号隔开"
              />
            </el-form-item>
          </div>
        </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 type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
            <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
            <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
    @closce="showdrawer"
    :drawerShow="drawerShow"
    :columnList="details.columnList"
    v-model="columnList"
  ></edittablehead>
</template>

<script setup>
import { ref, reactive, toRefs, computed, onMounted, nextTick, watch } from 'vue';
import { columnList } from '@/option/reportforms/DeliveryDetails.js';
import { getDictionaryBiz } from '@/api/system/dict'; //字典
import { processRowProperty, setNodeHeight } from '@/utils/util';
import { $_getdetails, $_exportDetails, $_getMyWarehouseList } from '@/api/reportforms/index.js';
import { ElMessageBox } from 'element-plus';
import { downloadXls, deepClone } from '@/utils/util';
import functions from '@/utils/functions.js';
import dayjs from 'dayjs';
const queryCarn = ref({}); //查询顶部
const TopQuery = ref({
  warehouseNameRange: [],
  time: [],
}); //查询顶部
const warehouseList = ref([]); //仓库列表
const DeliveryTypeList = ref([
  {
    label: '商配',
    value: '商配',
  },

  {
    label: '市配',
    value: '市配',
  },
]); //配送类型
// 配送种类
const DeliverygenericList = ref([
  {
    label: '自主配送',
    value: '自主配送',
  },

  {
    label: '三方配送',
    value: '三方配送',
  },
]); //配送类型

// 签收状态

const Signingstatus = 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: deepClone(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);

/** 展开列表控件 */
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.warehouseNameRange = [];
  TopQuery.value.time = [];

  queryCarn.value = {};
  details.query = {};
  columnList.forEach(item => {
    item.values = '';
  });
  details.page.total = 0;
  details.data = [];
  // getrain();
};
// 网页顶部搜索按钮
const searchChange = () => {
  // 日期处理
  if (TopQuery.value.time?.length) {
    queryCarn.value.startTaskTime = dayjs(TopQuery.value.time[0]).format('YYYY-MM-DD HH:mm:ss'); //开始日期
    queryCarn.value.endTaskTime = dayjs(TopQuery.value.time[1]).format('YYYY-MM-DD HH:mm:ss'); //结束日期
  } else {
    delete queryCarn.value.startTaskTime;
    delete queryCarn.value.endTaskTime;
  }
  // 仓库处理
  if (TopQuery.value.warehouseNameRange?.length) {
    queryCarn.value.warehouseNameRange = TopQuery.value.warehouseNameRange.join(',');
  } else {
    delete queryCarn.value.warehouseNameRange;
  }
  // 车辆处理
  if (TopQuery.value.vehicleNameRange) {
    queryCarn.value.vehicleNameRange = TopQuery.value.vehicleNameRange;
  } else {
    delete queryCarn.value.vehicleNameRange;
  }
  // 司机处理
  if (TopQuery.value.driverNameRange) {
    queryCarn.value.driverNameRange = TopQuery.value.driverNameRange;
  } else {
    delete queryCarn.value.driverNameRange;
  }

  // 客户处理
  if (TopQuery.value.consigneeRange) {
    queryCarn.value.consigneeRange = TopQuery.value.consigneeRange;
  } else {
    delete queryCarn.value.consigneeRange;
  }
  // 运单收货人
  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(queryCarn.value);
};
/** 页码改变执行的回调 */
const currentChange = val => {
  details.page.currentPage = val;
  getrain(queryCarn.value);
};
// 刷新按钮
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 = DeliveryTypeList.value;
  columnList.find(res => res.label == '配送种类').checkarr = [];
  columnList.find(res => res.label == '配送种类').checkarr = DeliverygenericList.value;
  columnList.find(res => res.label == '仓库').checkarr = [];
  columnList.find(res => res.label == '仓库').checkarr = warehouseList.value;
  columnList.find(res => res.label == '司机签收状态').checkarr = [];
  columnList.find(res => res.label == '司机签收状态').checkarr = Signingstatus.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;
  $_getdetails(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,
        ...queryCarn.value,
      };
      $_exportDetails(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>