logpm_page/src/views/waybill/ChangeOrder.vue

<template>
  <basic-container>
    <div class="avue-crud" v-loading="details.loadingObj.pageLoading">
      <!-- 搜索模块 -->
      <div v-h5uShow="!search">
        <!-- 查询模块 -->
        <el-form :inline="true" :model="query" class="header_search">
          <el-form-item label="开单时间:" class="el-times">
            <el-date-picker
              v-model="details.query.openTime"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :shortcuts="shortcuts"
              value-format="YYYY-MM-DD"
              clearable
            />
          </el-form-item>
          <el-form-item label="申请时间:" class="el-times">
            <el-date-picker
              v-model="details.query.applyTime"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :shortcuts="shortcuts"
              value-format="YYYY-MM-DD"
              clearable
            />
          </el-form-item>
          <el-form-item label="审核时间:" class="el-times">
            <el-date-picker
              v-model="details.query.checkTime"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :shortcuts="shortcuts"
              value-format="YYYY-MM-DD"
              clearable
            />
          </el-form-item>
          <!-- 查询按钮 -->
          <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>
      </div>

      <!-- 控件模块 -->
      <el-row>
        <div class="avue-crud__header">
          <!-- 头部左侧按钮模块 -->
          <div class="avue-crud__left">
            <!-- <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(true)" circle></el-button>
            <el-button icon="Search" @click="searchHide" circle></el-button>
          </div>
        </div>
      </el-row>

      <!-- 表格 -->
      <el-row>
        <!-- 列表模块 -->
        <tablecmt
          :columnList="details.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 === '运单号'">
              <el-text @click="handleGoWaybillDetails(slotProps.scope)">
                {{ slotProps.scope.row.waybillNo }}
              </el-text>
            </template>

            <template v-else-if="slotProps.scope.column.label === '操作'">
              <el-button type="text" @click="handleShowPackageOrderList(slotProps.scope)">
                查看
              </el-button>
            </template>
          </template>
        </tablecmt>
      </el-row>

      <!-- 分页模块 -->
      <el-row class="el-fy">
        <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>
      </el-row>
    </div>
  </basic-container>

  <!-- 查看改单 -->
  <el-dialog
    class="el-dialog-view"
    title="查看改单"
    :visible.sync="details.popUpShow.view"
    width="780px"
    :show-close="false"
    :fullscreen="details.fullscreenObj.view"
    v-model="details.popUpShow.view"
  >
    <!-- 头部 -->
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header flex-c-sb">
        <div :id="titleId" :class="titleClass">查看改单</div>
        <div class="flex-c-c">
          <!-- 全屏显示按钮 -->
          <el-button
            type="text"
            @click="handleFullScrean('open', 'el-dialog-view')"
            v-if="!details.fullscreenObj.view"
          >
            <el-icon class=""><FullScreen /></el-icon>
          </el-button>
          <el-button type="text" @click="handleFullScrean('close', 'el-dialog-view')" 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>

    <el-divider style="font-size: 28px">基本信息</el-divider>
    <div class="view_row">
      <div class="view_row_item">运单号：</div>
      <div class="view_row_item">
        <span>运单类型：</span>
      </div>
      <div class="view_row_item">
        <span>状态：</span>
      </div>
      <div class="view_row_item">申请网点：</div>
      <div class="view_row_item">申请人：</div>
      <div class="view_row_item">申请时间：</div>
      <div class="view_row_item">审核网点：</div>
      <div class="view_row_item">审核人：</div>
      <div class="view_row_item">审核时间：</div>
      <div class="view_row_item">审核意见：</div>
      <div class="view_row_item">修改原因：</div>
      <div class="view_row_item"></div>
    </div>

    <el-divider style="font-size: 28px">修改信息</el-divider>
    <!-- <el-table class="maboxhi" :data="data" border style="width: 100%">
      <el-table-column v-for="item in details.viewColumnList" prop="address" :label="item.label" />
    </el-table> -->

    <tablecmt
      isNotSave
      :columnList="details.viewColumnList"
      :tableData="data"
      :loading="loadingObj.list"
    >
    </tablecmt>
  </el-dialog>

  <!-- 列表配置显示 -->
  <edittablehead
    @closce="showdrawer"
    :drawerShow="drawerShow"
    :columnList="details.columnList"
    v-model="details.columnList"
  ></edittablehead>
</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 {
  downloadXls,
  setNodeHeight,
  getHtmls,
  deepClone,
  handleTranslationDataSeclect,
  getObjType,
  handleClearTableQuery,
} from '@/utils/util';
import { columnList, viewColumnList } from '@/option/waybill/ChangeOrder';
import {
  postFindUpdateWaybillList,
  postUpdateWaybillQualityExport,
} from '@/api/waybill/ChangeOrder';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { exportExcel } from '@/utils/exportData';

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

const details = reactive<any>({
  /** 是否开启搜索 */
  search: true,
  /** 表格搜索条件 */
  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];
      },
    },
  ],
  /** 列表 */
  columnList: deepClone(columnList),
  /** 列表数据 */
  data: [{}],
  /** 查看列表表头 */
  viewColumnList: deepClone(viewColumnList),
  /** 页面loading */
  loadingObj: {
    /** 列表加载loading */
    list: false,
    packageListLoading: false,
    pageLoading: false,
  },
  /** 列表复选框选中的数据 */
  selectionList: [],
  /** 是否显示设置表格 */
  drawerShow: false,
  /** 分页参数 */
  page: {
    pageNum: 1,
    pageSize: 30,
    total: 0,
  },
  /** 弹出层显示 */
  popUpShow: {
    /** 包件明细 */
    packageOrderListlVisited: false,
    /** 查看 */
    view: false,
  },
  /** 列表Dom节点 */
  listNode: '',
  form: {},
  /** 全屏 */
  fullscreenObj: {
    /** 查看 */
    view: false,
  },
});

const { search, query, shortcuts, data, loadingObj, selectionList, drawerShow, page, popUpShow } =
  toRefs(details);

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

onMounted(() => {
  const timer = setTimeout(() => {
    details.listNode = document.querySelector('.maboxhi');
    details.listNode.style.transition = 'all .5s ease-out';
    clearTimeout(timer);
  }, 100);
});

/** 请求页面数据 */
const onLoad = async (params = {}) => {
  try {
    details.loadingObj.list = true;

    const submitData = { ...details.page, ...details.query, ...params };

    // 开单时间
    if (getObjType(details.query.openTime) === 'array' && details.query.openTime.length > 0) {
      submitData.openTimeStartStr = details.query.openTime[0];
      submitData.openTimeEndStr = details.query.openTime[1];
    }

    // 申请时间
    if (getObjType(details.query.applyTime) === 'array' && details.query.applyTime.length > 0) {
      submitData.applyTimeStartStr = details.query.applyTime[0];
      submitData.applyTimeEndStr = details.query.applyTime[1];
    }

    // 审核时间
    if (getObjType(details.query.checkTime) === 'array' && details.query.checkTime.length > 0) {
      submitData.checkTimeStartStr = details.query.checkTime[0];
      submitData.checkTimeEndStr = details.query.checkTime[1];
    }

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

    if (code !== 200) return;

    details.data = data.records || [];

    handleTranslationDataSeclect(details.data, details.columnList);

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

onLoad();

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

/** 清空表单 */
const searchReset = () => {
  details.query = {};
  details.page.pageNum = 1;

  handleClearTableQuery(details.columnList);
  onLoad();
};

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

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

  setNodeHeight(details.listNode, '', true);
};

/** 表格表头输入框搜索 */
const inputsc = (index, row) => {
  details.query[row.prop] = index;
  if (!index && index !== 0) delete details.query[row.prop];
  onLoad();
};

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

/** 表格表头输入框搜索 */
const btnsc = () => {};

/** 表格表头下拉框选择 */
const selectsc = (index, row) => {
  const key = row.prop.replace('Name', '');

  details.query[key] = index;
  if (!index && index !== 0) delete details.query[key];
  onLoad();
};

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

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

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

/** 查看包明细 */
const handleShowPackageOrderList = ({ row }) => {
  details.popUpShow.view = true;
  nextTick(() => {
    const _node = document.querySelector(`.el-dialog-view .maboxhi`);
    setNodeHeight(_node);
  });
};

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

  switch (_name) {
    case 'el-dialog-view':
      details.fullscreenObj.view = !details.fullscreenObj.view;
      if (_type === 'close') {
        if (_node) setNodeHeight(_node);
      } else {
        if (_node) setNodeHeight(_node);
      }
      break;

    default:
      break;
  }
};

/** 查看运单 */
const handleGoWaybillDetails = ({ row }) => {
  if (row.waybillNo === '————' || !row.waybillId) return ElMessage.warning('暂无运单号');

  console.log('row :>> ', row);
  $router.push({
    path: '/distribution/inventory/BookingNote',
    query: {
      name: `查看 -- 【${row.waybillNo}】`,
      waybillNo: row.waybillNo,
      id: row.waybillId,
      waybillType: row.waybillType,
    },
  });
};

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

    //   const submitData = { ...details.query };
    //   // 开单时间
    //   if (getObjType(details.query.openTime) === 'array' && details.query.openTime.length > 0) {
    //     submitData.openTimeStartStr = details.query.openTime[0];
    //     submitData.openTimeEndStr = details.query.openTime[1];
    //   }

    //   // 申请时间
    //   if (getObjType(details.query.applyTime) === 'array' && details.query.applyTime.length > 0) {
    //     submitData.applyTimeStartStr = details.query.applyTime[0];
    //     submitData.applyTimeEndStr = details.query.applyTime[1];
    //   }

    //   // 审核时间
    //   if (getObjType(details.query.checkTime) === 'array' && details.query.checkTime.length > 0) {
    //     submitData.checkTimeStartStr = details.query.checkTime[0];
    //     submitData.checkTimeEndStr = details.query.checkTime[1];
    //   }

    //   const res = await postUpdateWaybillQualityExport(submitData);
    //   const { status, data } = res;
    //   if (status !== 200) return;

    //   downloadXls(data, '改单 - ' + new Date().getTime() + '.xlsx');
    // } catch (error) {
    //   console.log('error :>> ', error);
    // } finally {
    //   details.loadingObj.pageLoading = false;
    // }
    exportExcel(details.columnList, details.data, '改单 - ' + new Date().getTime());
  });
};
</script>

<style scoped lang="scss">
.fo-fl {
  display: flex;
  flex-wrap: wrap;
  zoom: 0.9;
}

// 日期选择器
:deep(.el-date-editor.el-input) {
  height: 100% !important;
  width: 100% !important;
}

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

.view_row {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #e6e6e6;

  > div {
    width: 33.33%;
    flex: none;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
    padding: 5px 10px;
  }
}
</style>