logpm_page/src/views/finance/ReconciliationDepositSlip.vue

<template>
  <basic-container v-loading="details.loadingObj.pageLoading">
    <div class="avue-crud">
      <el-tabs type="border-card" v-model="details.pageStatus" @tab-click="handleClickTab">
        <!-- toB -->
        <el-tab-pane
          v-for="(item, index) in details.pageInfo"
          :name="item.name"
          :label="item.title"
        >
          <!-- 搜索模块 -->
          <div v-h5uShow="!search">
            <!-- 查询模块 -->
            <el-form :inline="true" :model="item.query" class="header_search">
              <!-- 查询按钮 -->

              <el-form-item label="收货单位">
                <el-input v-model="item.query.consignee" clearable placeholder="请输入客户名称" />
              </el-form-item>
              <el-form-item label="是否计算价格">
                <el-select
                  v-model="item.query.syncFeeSstatus"
                  placeholder="请选择"
                  style="width: 240px"
                  clearable
                >
                  <el-option label="未计算" value="0" />
                  <el-option label="已计算" value="1" />
                </el-select>
              </el-form-item>
              <el-form-item label="签收状态">
                <el-select
                  v-model="item.query.signStatus"
                  placeholder="请选择"
                  style="width: 240px"
                  clearable
                >
                  <el-option label="已签收" value="2" />
                  <el-option label="未签收" value="0" />
                  <el-option label="部分签收" value="1" />
                </el-select>
              </el-form-item>
              <el-form-item label="计算时间">
                <el-date-picker
                  v-model="item.query.calculateTimeSection"
                  type="datetimerange"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  :shortcuts="shortcuts"
                  :default-time="defaultTime2"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  format="YYYY/MM/DD HH:mm:ss"
                />
              </el-form-item>
              <el-form-item label="签收时间">
                <el-date-picker
                  v-model="item.query.signTimeSection"
                  type="datetimerange"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :shortcuts="shortcuts"
                  :default-time="defaultTime2"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  format="YYYY/MM/DD HH:mm:ss"
                />
              </el-form-item>
              <el-form-item label="开单时间">
                <el-date-picker
                  v-model="item.query.calculatePriceTimeSection"
                  type="datetimerange"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="defaultTime2"
                  :shortcuts="shortcuts"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  format="YYYY/MM/DD HH:mm:ss"
              /></el-form-item>
              <el-form-item>
                <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>
          </div>

          <div class="avue-crud__header">
            <!-- 头部左侧按钮模块 -->
            <div class="avue-crud__left">
              <!-- 审核 -->
              <el-button type="primary" icon="Stamp" @click="handleConfirm">生成对账单</el-button>

              <el-button type="primary" icon="Stamp" @click="handleJiesuan">批量结算完成</el-button>

              <!-- 导出 -->
              <el-button type="primary" icon="Download" @click="handleExport">导 出</el-button>
            </div>
            <!-- 头部右侧按钮模块 -->
            <div class="avue-crud__right">
              <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
              <el-button icon="Operation" @click="showdrawer(item, true)" circle></el-button>
              <el-button icon="Search" @click="searchHide" circle></el-button>
            </div>
          </div>

          <!-- 表格 -->
          <tablecmt
            ref="tableNodeRef"
            :columnList="item.columnList"
            :tableData="details.data"
            :loading="details.loadingObj.list"
            @inputTxt="(val, col) => inputsc(val, col, item)"
            @timeCheck="timesc"
            @selectCheck="(val, col) => selectsc(val, col, item)"
            @selection="selectionChange"
          >
            <template #default="slotProps">
              <template v-if="item.name !== 1 && slotProps.scope.column.label === '操作'">
                <el-text @click="() => handleComputedPrice(slotProps.scope)">计算费用</el-text>
              </template>
            </template>
          </tablecmt>

          <!-- 分页模块 -->
          <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
            <div style="font-size: 14px">勾选数量: {{ selectionList.length }}</div>
            <!-- 分页模块 -->
            <el-pagination
              align="right"
              background
              @size-change="sizeChange"
              @current-change="currentChange"
              :current-page="page.pageNum"
              :page-sizes="[30, 50, 80, 120]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
          <!-- 列表配置显示 -->
          <edittablehead
            @closce="flag => showdrawer(item, flag)"
            :drawerShow="item.drawerShow"
            v-model="item.columnList"
          ></edittablehead>
        </el-tab-pane>
      </el-tabs>

      <el-dialog
        destroy-on-close
        :modal-append-to-body="false"
        :append-to-body="false"
        class="confirmVisited"
        width="80%"
        v-model="details.popUpShow.confirmVisited"
        :fullscreen="details.fullscreenObj.confirmVisited"
        :show-close="false"
        draggable
      >
        <!-- 标题 -- 头部控件区 -->
        <template #header="{ close, titleId, titleClass }">
          <div class="my-header flex-c-sb" draggable>
            <div class="fwb" :id="titleId" :class="titleClass">开标签</div>
            <div class="flex-c-c">
              <!-- 全屏显示按钮 -->
              <el-button
                type="text"
                @click="handleFullScrean('open', 'confirmVisited')"
                v-if="!details.fullscreenObj.confirmVisited"
              >
                <el-icon class=""><FullScreen /></el-icon>
              </el-button>

              <el-button type="text" @click="handleFullScrean('close', 'confirmVisited')" v-else>
                <el-icon class=""><CopyDocument /></el-icon>
              </el-button>

              <!-- 弹窗关闭按钮 -->
              <el-button type="text">
                <el-icon class="" @click="close"><Close /></el-icon>
              </el-button>
            </div>
          </div>
        </template>

        <tablecmt :columnList="details.confirmColumnList" :tableData="details.selectionList">
        </tablecmt>

        <div class="flex-c-c dialog-footer">
          <el-button icon="Close" @click="details.popUpShow.confirmVisited = false">
            取 消
          </el-button>

          <!-- 提交 -->
          <el-button
            icon="Position"
            type="primary"
            :loading="details.loadingObj.addTagLoading"
            @click="handleSubmitConfrim"
          >
            提 交
          </el-button>
        </div>
      </el-dialog>
    </div>
  </basic-container>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
import functions from '@/utils/functions.js';
import dayjs from 'dayjs';
import { mapGetters } from 'vuex';
/** 获取字典 */
import { getDictionaryBiz } from '@/api/system/dict';
import {
  postPageList,
  postCheckBalance,
  postReal,
  postOrderInfoListExport,
  postCreateReconciliationOrder,
  postCreateFinishWaybillId,
  postCreateReconciliationwWaybillId,
  postCalculateRealCostByWaybillId
} from '@/api/finance/ReconciliationDepositSlip';
import {
  downloadXls,
  setNodeHeight,
  getHtmls,
  handleClearTableQuery,
  handleInputQuery,
  handleSelectQuery,
  handleTranslationDataSeclect,
  getObjType,
} from '@/utils/util';
import {
  columnList,
  confirmColumnList,
  columnListB,
} from '@/option/finance/ReconciliationDepositSlip';
import { useRouter } from 'vue-router';
import { deepClone } from '@/utils/util';
import { ElMessage, ElMessageBox } from 'element-plus';

// 获取路由实例
const $router = useRouter();

const details = reactive<any>({
  /** 是否开启搜索 */
  search: true,
  pageInfo: [
    {
      // 标题
      title: 'toB订单对账',
      // 表头
      columnList: deepClone(columnList),
      // 查询对象
      query: {},
      name: 1,
    },
    {
      title: 'toC订单对账',
      columnList: deepClone(columnListB),
      query: {},
      name: 2,
    },
  ],
  defaultTime2: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)], // '12:00:00', '08:00:00'
  /** 时间快捷选择设置 */
  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];
      },
    },
  ],
  /** 列表数据 */
  data: [],
  /** 页面loading */
  loadingObj: {
    /** 列表加载loading */
    list: false,
    pageLoading: false,
  },
  /** 全屏 */
  fullscreenObj: {
    /** 开标签 */
    confirmVisited: false,
  },
  /** 弹出层显示 */
  popUpShow: {
    /** 新增标签 */
    confirmVisited: false,
  },
  /** 列表复选框选中的数据 */
  selectionList: [],
  /** 生成对账单表头 */
  confirmColumnList: deepClone(confirmColumnList),
  /** 分页参数 */
  page: {
    pageNum: 1,
    pageSize: 30,
    total: 0,
  },
  form: {},
  /** 页面激活状态 : 1 -- toB; 2 -- toC */
  pageStatus: 1 as 1 | 2,
});

const tableNodeRef = ref();

const { search, shortcuts, selectionList, drawerShow, page, defaultTime2 } = toRefs(details);

/** vuex */
const permission = computed(() => mapGetters(['permission', 'tagWel', 'tagList']));
console.log('permission :>> ', permission);

onMounted(async () => {
  await nextTick();

  const node = details.pageStatus === 1 ? tableNodeRef.value[0].$el : tableNodeRef.value[1].$el;

  setNodeHeight(node, '', true);
});

/** 请求页面数据 */
const onLoad = async () => {
  try {
    // 开启列表loading动画
    details.loadingObj.list = true;

    const { query, columnList } =
      details.pageStatus === 1 ? details.pageInfo[0] : details.pageInfo[1];

    // 创建 query 的浅拷贝
    const queryCopy = { ...query };
    await TimeProcessing(queryCopy);
    const submitData = { ...queryCopy, ...details.page };

    // const submitData = { ...query, ...details.page };
    // listType 1 -- toB ; 2 -- toC
    submitData.listType = details.pageStatus;

    // 获取暂存单列表
    const res = await postPageList(submitData);
    console.log('res :>> ', res);
    const { code, data } = res.data;
    if (code !== 200) return;
    details.data = data.records;
    details.page.total = data.total;
    console.log('columnList :>> ', columnList);
    handleTranslationDataSeclect(details.data, columnList);

    return res.data;
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.list = false;
  }
};

const processTimeSection = (query, sectionKey, startKey, endKey) => {
  if (query[sectionKey]?.length) {
    query[startKey] = query[sectionKey][0];
    query[endKey] = query[sectionKey][1];
    delete query[sectionKey];
  } else {
    delete query[startKey];
    delete query[endKey];
  }
};

const TimeProcessing = query => {
  processTimeSection(query, 'calculateTimeSection', 'syncFeeDateStart', 'syncFeeDateEnd');
  processTimeSection(query, 'signTimeSection', 'signTimeStart', 'signTimeEnd');
  processTimeSection(query, 'calculatePriceTimeSection', 'openTimeStart', 'openTimeEnd');
};
const handleData = (key, res) => {
  const { code, data } = res.data;
  if (code !== 200) return;
  for (let i = 0; i < details.pageInfo[0].columnList.length; i++) {
    const value = details.pageInfo[0].columnList[i];

    if (value.label === key)
      return (value.checkarr =
        getObjType(data) === 'array'
          ? data.map(val => {
              val.label = val.dictValue;
              val.value = val.dictKey;
              return val;
            })
          : []);
  }
  for (let i = 0; i < details.pageInfo[1].columnList.length; i++) {
    const value = details.pageInfo[1].columnList[i];

    if (value.label === key)
      return (value.checkarr =
        getObjType(data) === 'array'
          ? data.map(val => {
              val.label = val.dictValue;
              val.value = val.dictKey;
              return val;
            })
          : []);
  }
};

const initData = async () => {
  await Promise.all([
    // 服务类型
    // getDictionaryBiz('distribution_type').then(res => handleData('订单类型', res)),
    // 支付方式
    getDictionaryBiz('open_order_pay_type').then(res => handleData('支付方式', res)),
    // 付款方式
    getDictionaryBiz('open_order_pay_way').then(res => handleData('付款方式', res)),
    initOnLoad(),
  ]);

  await nextTick();
  const { columnList } = details.pageStatus === 1 ? details.pageInfo[0] : details.pageInfo[1];

  handleTranslationDataSeclect(details.data, columnList);
};

/** 初始化请求 */
const initOnLoad = () => {
  details.page.pageNum = 1;
  details.page.total = 0;
  return onLoad();
};

initData();

/** 搜索 */
const searchChange = () => {
  initOnLoad();
};

/** 清空表单 */
const searchReset = () => {
  // details.query = {};
  console.log(details, 'details');

  details.pageStatus == 1 ? (details.pageInfo[0].query = {}) : (details.pageInfo[1].query = {});
  details.page.pageNum = 1;
  handleClearTableQuery(details.pageStatus === 1 ? details.columnList1 : details.columnList2);
  initOnLoad();
};

/** 展开列表控件 */
const showdrawer = (item: any, _flag?: boolean) => {
  item.drawerShow = _flag;
};

/** 是否开启搜索区 */
const searchHide = () => {
  details.search = !details.search;

  const node = details.pageStatus === 1 ? tableNodeRef.value[0].$el : tableNodeRef.value[1].$el;

  setNodeHeight(node, '', true);
};

/** 表格表头输入框搜索 */
const inputsc = (index, col, item) => {
  handleInputQuery(index, col, item.query);
  initOnLoad();
};

/** 表格表头时间选择 */
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];
  }
  initOnLoad();
};

/** 表格表头下拉框选择 */
const selectsc = (index, colors, item) => {
  handleSelectQuery(index, colors, item.query);
  initOnLoad();
};

/** 表格表头复选框选择 */
const selectionChange = (list: any) => {
  details.selectionList = list;
};

/** 每页数量改变执行的回调 */
const sizeChange = (pageSize: number) => {
  details.page.pageSize = pageSize;
  initOnLoad();
};

/** 页码改变执行的回调 */
const currentChange = pageNum => {
  details.page.pageNum = pageNum;
  onLoad();
};

const handleClickTab = async e => {
  console.log('e :>> ', e);

  await nextTick();

  const node = details.pageStatus === 1 ? tableNodeRef.value[0].$el : tableNodeRef.value[1].$el;

  setNodeHeight(node, '', true);
  console.log('details.pageStatus :>> ', details.pageStatus);
  initOnLoad();
};

/**
 * 是否开启全屏
 * @params(_type) 开启或关闭
 */
const handleFullScrean = (_type: 'open' | 'close', _name: string) => {
  let _node: any = '';
  if (_name) _node = document.querySelector(`.${_name} .maboxhi`);

  switch (_name) {
    case 'confirmVisited':
      details.fullscreenObj.confirmVisited = !details.fullscreenObj.confirmVisited;

      if (_type === 'close') {
        if (_node) setNodeHeight(_node, '500px', true);
      } else {
        if (_node) setNodeHeight(_node, '', true);
      }
      break;

    default:
      details.fullscreenObj[_name] = !details.fullscreenObj[_name];
      break;
  }
};

/** 生成对账单 */
const handleConfirm = async () => {
  await nextTick();
  if (details.selectionList.length === 0) return ElMessage.warning('请选择需要确认的数据');

  const _errorArr = [];

  // 目的仓
  let _destinationWarehouseName = '';
  // 收货单位
  let _consignee = '';

  for (let index = 0; index < details.selectionList.length; index++) {
    const value = details.selectionList[index];
    if (index === 0) {
      _destinationWarehouseName = value.destinationWarehouseName;
      _consignee = value.consignee;
    }

    if (value.consignee !== _consignee)
      return ElMessage.warning(`收货单位不一致，请移除不一致数据`);
    if (value.destinationWarehouseName !== _destinationWarehouseName)
      return ElMessage.warning(`目的仓不一致，请移除不一致数据`);
    if (details.pageStatus === 2 && Number(value.signStatus) !== 2)
      return ElMessage.warning(`存在未签收完成的数据`);
  }

  details.popUpShow.confirmVisited = true;
  await nextTick();
  const _node = document.querySelector(`.confirmVisited .maboxhi`);
  setNodeHeight(_node, details.popUpShow.confirmVisited ? '' : '500px', true);
};

/** toB 批量结算完成 */
const handleJiesuan = async () => {
  if (details.selectionList.length === 0) return ElMessage.warning('请选择需要确认的数据');

  ElMessageBox.confirm('是否确认对账单?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    try {
      details.loadingObj.pageLoading = true;

      const submitData = {
        waybillIds: details.selectionList.map(val => val.waybillId),
      };

      const res = await postCreateFinishWaybillId(submitData);
      const { code, msg } = res.data;

      if (code !== 200) return msg && ElMessage.warning(msg);
      if (msg) ElMessage.success(msg);
    } catch (error) {
      console.log('error :>> ', error);
    } finally {
      onLoad();
      details.loadingObj.pageLoading = false;
    }
  });
};

const handleSubmitConfrim = () => {
  ElMessageBox.confirm('是否确认对账单?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    details.popUpShow.confirmVisited = false;
    try {
      details.loadingObj.pageLoading = true;

      const submitData = {
        orderInfoIds: details.selectionList.map(val => val.orderInfoId),
      };

      const res = await postCreateReconciliationOrder(submitData);
      const { code, msg } = res.data;

      if (code !== 200) return msg && ElMessage.warning(msg);
      if (msg) ElMessage.success(msg);
    } catch (error) {
      console.log('error :>> ', error);
    } finally {
      onLoad();
      details.loadingObj.pageLoading = false;
    }
  });
};

/** 计算仓储&配送费用 */
const handleComputedPrice = ({ row }) => {
  ElMessageBox.confirm('确认计算仓储&配送费用?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    try {
      details.loadingObj.pageLoading = true;

      // const res = await postReal(row.orderInfoId);
      const res = await postCalculateRealCostByWaybillId(row.waybillId);
      const { code, msg } = res.data;

      if (code !== 200) return msg && ElMessage.warning(msg);
      if (msg) ElMessage.success(msg);
    } catch (error) {
      console.log('error :>> ', error);
    } finally {
      onLoad();
      details.loadingObj.pageLoading = false;
    }
  });
};

/** 导出 */
const handleExport = () => {
  ElMessageBox.confirm('是否确认导出?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    try {
      details.loadingObj.pageLoading = true;

      const submitData =
        details.pageStatus === 1
          ? { ...details.pageInfo[0].query }
          : { ...details.pageInfo[1].query };

      submitData.listType = details.pageStatus;

      if (getObjType(submitData.createTimeArr) === 'array' && submitData.createTimeArr.length > 0) {
        submitData.createTimeStartStr = submitData.createTimeArr[0];
        submitData.createTimeEndStr = submitData.createTimeArr[1];
      }

      if (getObjType(submitData.checkTimeArr) === 'array' && submitData.checkTimeArr.length > 0) {
        submitData.checkTimeStartStr = submitData.checkTimeArr[0];
        submitData.checkTimeEndStr = submitData.checkTimeArr[1];
      }

      delete submitData.createTimeArr;
      delete submitData.checkTimeArr;

      const res = await postOrderInfoListExport(submitData);

      const { status, data } = res;
      if (status !== 200) return;
      downloadXls(data, details.pageStatus === 1 ? '对账预存单toB.xlsx' : '对账预存单toC.xlsx');

      ElMessage.success('导出成功!');
    } catch (error) {
      console.log('error :>> ', error);
    } finally {
      details.loadingObj.pageLoading = false;
    }
  });
};
</script>

<style scoped lang="scss">
// 日期选择器
:deep(.el-date-editor.el-input) {
  height: 100% !important;
  width: 100% !important;
}

:deep(.el-range-editor.el-input__wrapper) {
  height: 100% !important;
}

// 弹窗
:deep(.el-overlay) {
  position: absolute;
}

:deep(.el-overlay-dialog) {
  position: absolute;
}
</style>