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

<template>
  <basic-container>
    <div class="avue-crud">
      <!-- 搜索模块 -->
      <el-row v-if="!details.search"> </el-row>

      <!-- 控件模块 -->
      <el-row>
        <div class="avue-crud__header">
          <!-- 头部左侧按钮模块 -->
          <div class="avue-crud__left">
            <el-button type="primary" icon="Edit" @click="handleBratchConfiguration"
              >批量配置
            </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="el-icon-search" @click="searchHide" circle></el-button>
          </div>
        </div>
      </el-row>

      <!-- 表格 -->
      <!-- 列表模块 -->
      <tablecmt
        :columnList="details.packageColumnList"
        :tableData="details.renderData"
        :loading="details.loadingObj.list"
        @inputTxt="inputsc"
        @timeCheck="timesc"
        @selectCheck="selectsc"
        @selection="selectionChange"
        :isShowRefresh="false"
      >
        <template #default="slotProps">
          <el-text @click="handleConfiguration(slotProps.scope)">配置包条码</el-text>
        </template>
      </tablecmt>

      <!-- 提交按钮 -->
      <div class="submitBtn-container">
        <el-button type="primary" icon="Position" @click="handleBratchConfiguration">
          提交配置
        </el-button>
      </div>
    </div>

    <!-- 配置装车目的地 -->
    <el-dialog
      title="配置装车目的地"
      v-model="details.popUpShow.truckLoadingDetailVisited"
      width="40%"
      append-to-body
      class="truckLoadingDetailPopUp"
    >
      <el-form-item label="目的地" prop="region">
        <el-select v-model="details.chooseNodeId" placeholder="Activity zone">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>

      <!-- 表单按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button
            icon="el-icon-circle-close"
            @click="details.popUpShow.truckLoadingDetailVisited = false"
            >取 消</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-circle-check"
            @click="handleEditSubmit(ruleFormRef)"
          >
            确 认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </basic-container>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
import functions from '@/utils/functions';
import dayjs from 'dayjs';
import { mapGetters } from 'vuex';
/** 获取字典 */
import { getDictionaryBiz } from '@/api/system/dict';
import { downloadXls, setNodeHeight, debounce } from '@/utils/util';
import { packageColumnList } from '@/option/distribution/VehicleStowage';
import {
  postDetermineHasNoFinalNode,
  postUpdateLoadScanFinalNodeIdById,
  postFindNextNodeList,
} from '@/api/distribution/VehicleStowage';
import { useStore } from 'vuex';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';

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

const $store = useStore();
const details = reactive<any>({
  /** 是否显示搜索控件去 */
  search: false,
  /** 表格数据 */
  data: [{}],
  /** 渲染数据 */
  renderData: [],
  /** loading */
  loadingObj: {
    list: false,
  },
  /** 弹窗 */
  popUpShow: {
    truckLoadingDetailVisited: 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];
      },
    },
  ],
  packageColumnList,
  /** 复选框选中数据 */
  selectionList: [],
  /** 后续节点数据 */
  nextNodeData: [],
  chooseNodeId: '',
});

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

    const res1 = postDetermineHasNoFinalNode({ loadId: $route.query.loadId });
    const res2 = postFindNextNodeList({ loadId: $route.query.loadId });

    const responseArr = await Promise.all([res1, res2]);
    // postFindNextNodeList

    // 包条数据
    const { code, data } = responseArr[0].data;

    if (code !== 200) return;

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

    // 下一步节点数据
    const { code: code1, data: data1 } = responseArr[1].data;
    if (code1 !== 200) return;
    details.nextNodeData = data1 || [];
  } 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;
  onLoad();
};

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

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

/** 表格表头输入框搜索 */
const inputsc = (value, row) => {
  // 动态设置正则
  const reg = new RegExp(value, 'i');

  details.query[row.prop] = reg;

  if (value === '') delete details.query[row.prop];

  if (Object.keys(details.query).length === 0) return (details.renderData = details.data);

  const _data = details.data.filter(item => {
    let _flag = true;
    for (let key in details.query) {
      if (!details.query[key].test(item[key])) _flag = false;
      if (!_flag) break;
    }

    return _flag;
  });

  details.renderData = _data;
};

/** 表格表头时间选择 */
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 selectsc = (index, row) => {
  details.query[row.prop] = index;
  if (!index) delete details.query[row.prop];
  onLoad();
};

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

/** 批量配置 */
const handleBratchConfiguration = () => {
  details.popUpShow.truckLoadingDetailVisited = true;
};

/** 单独配置 */
const handleConfiguration = ({ row }) => {
  details.popUpShow.truckLoadingDetailVisited = true;
};

/** 配置装车 */
const handleEditSubmit = () => {};
</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;
}

// 提交按钮
.submitBtn-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

// 弹出层标题
.popUp_title {
  font-size: 18px;
  font-weight: bold;
  padding: 5px 20px;
  position: relative;
  margin: 20px 0;

  &:first-child {
    margin-top: 0;
  }

  &::before {
    width: 4px;
    height: 100%;
    background: #172e60;
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>