logpm_page/src/views/distribution/artery/directMerchantSign.vue

<template>
  <basic-container v-loading="details.loadingObj.pageLoading">
    <div class="avue-crud">
      <!-- 搜索模块 -->
      <div v-h5uShow="search">
        <!-- 查询模块 -->
        <el-form :inline="true" :model="query" class="header_search" label-width="100px">
          <!-- 查询按钮 -->
          <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></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>

      <!-- 表格 -->
      <!-- 列表模块 -->
      <tablecmt
        :columnList="details.columnList"
        :tableData="details.packageListData"
        :loading="loadingObj.list"
        @inputTxt="inputsc"
        @timeCheck="timesc"
        @btnCheck="btnsc"
        @selectCheck="selectsc"
        @selection="selectionChange"
      >
        <template #default="slotProps">
          <template v-if="slotProps.scope.column.label === '签收状态'">
            <el-tag
              :class="{
                err: Number(slotProps.scope.row.signStatus) === 0,
                sub: Number(slotProps.scope.row.signStatus) === 10,
                primary: Number(slotProps.scope.row.signStatus) === 20,
              }"
            >
              {{ slotProps.scope.row.signStatusName }}
            </el-tag>
          </template>

          <template v-else-if="slotProps.scope.column.label === '操作'">
            <el-text
              v-if="Number(slotProps.scope.row.signStatus) !== 0"
              @click="() => handleShowSignImg(slotProps.scope)"
            >
              查看签收图片
            </el-text>
          </template>
        </template>
      </tablecmt>

      <!-- 分页模块 -->
      <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
    title="签收图片"
    v-model="details.popUpShow.signImg"
    width="50%"
    append-to-body
    :show-close="true"
    class="signImg"
  >
    <div class="signImg_container">
      <el-image
        v-for="(item, index) in details.signImgList"
        :key="item.photoUrl"
        style="width: 150px; height: 150px; margin: 5px; border-radius: 5px"
        :src="item.photoUrl"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="details.signImgList.map(val => val.photoUrl)"
        :initial-index="index"
        fit="cover"
      />
    </div>
  </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, useStore } from 'vuex';
/** 获取字典 */
import { getDictionaryBiz } from '@/api/system/dict';
import {
  postFindSignOrderPageList,
  postFindSignPhotoList,
} from '@/api/distribution/directMerchantSign.js';
import {
  downloadXls,
  setNodeHeight,
  getHtmls,
  deepClone,
  getObjType,
  handleTranslationDataSeclect,
  handleClearTableQuery,
  handleSelectQuery,
  handleInputQuery,
} from '@/utils/util';
import { columnList } from '@/option/distribution/directMerchantSign.js';
import { flowNodeColumnList } from '@/option/waybill/orderPackageListDetails.js';
import { useRouter } from 'vue-router';
import print from '@/utils/print';
import { ElMessage, ElMessageBox } from 'element-plus';

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

const details = reactive<any>({
  /** 是否开启搜索 */
  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),
  /** 包明细数据 */
  packageListData: [],
  /** 页面loading */
  loadingObj: {
    /** 列表加载loading */
    list: false,
    /** 页面loading */
    pageLoading: false,
  },
  /** 列表复选框选中的数据 */
  selectionList: [],
  /** 是否显示设置表格 */
  drawerShow: false,
  /** 分页参数 */
  page: {
    pageNum: 1,
    pageSize: 30,
    total: 0,
  },
  /** 弹出层显示 */
  popUpShow: {
    signImg: false,
  },
  /** 列表Dom节点 */
  listNode: '',
  html: '',
  signImgList: [],
});

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

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

/** 权限按钮 */
const permissionObj = reactive({});

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 {
    // if (Object.keys(details.query).length === 0) return (details.packageListData = []);

    details.loadingObj.list = true;

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

    // 创建时间
    if (
      getObjType(details.query.createTimeArr) === 'array' &&
      details.query.createTimeArr.length > 0
    ) {
      submitData.createTimeStartStr = details.query.createTimeArr[0];
      submitData.createTimeEndStr = details.query.createTimeArr[1];
    }

    delete submitData.createTimeArr;
    const res = await postFindSignOrderPageList(submitData);
    const { code, data } = res.data;
    if (code !== 200) return;
    details.packageListData = data.records;
    details.page.total = data.total;

    handleTranslationDataSeclect(details.packageListData, details.columnList);
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.list = false;
  }
};

onLoad();

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

/** 清空表单 */
const searchReset = () => {
  details.query = {};
  details.stockupDate = [];
  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) => {
  handleInputQuery(index, row, details.query);
  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) => {
  handleSelectQuery(index, row, details.query);
  onLoad();
};

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

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

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

/** 查看签收图片 */
const handleShowSignImg = async ({ row }) => {
  try {
    details.loadingObj.pageLoading = true;

    const submitData = {
      signOrderId: row.id,
    };

    const res = await postFindSignPhotoList(submitData);

    const { code, data } = res.data;

    if (code !== 200) return;

    details.signImgList = data || [];
    if (details.signImgList.length === 0) return ElMessage.warning('暂无签收图片');
    details.popUpShow.signImg = true;
  } 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-tag) {
  &.err {
    background-color: #f8544b;
    border-color: #f8544b;
    color: #fff;
  }

  &.primary {
    background-color: #0086f1;
    border-color: #0086f1;
    color: #fff;
  }

  &.sub {
    background-color: #d3832a;
    border-color: #d3832a;
    color: #fff;
  }
}

// 签收图片
.signImg_container {
  display: flex;
  flex-wrap: wrap;
}
</style>