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

<template>
  <basic-container v-loading="details.loadingObj.pageLoading">
    <div class="avue-crud">
      <el-tabs @tab-click="handleCheckTab" type="border-card" v-model="details.activeTab">
        <el-tab-pane label="详 情 信 息" name="tab1">
          <!-- 标题 基础信息 -->
          <el-divider content-position="left">
            <div class="flex-c-c">
              <el-icon class="mr10"><Document /></el-icon> 基础信息
            </div>
          </el-divider>
          <!-- 表单 -->
          <el-form disabled :inline="true" label-width="100px" :model="form" class="el-fr-d">
            <div class="fo-fl">
              <el-form-item label="中转承运商" prop="carrierName" style="flex: 1">
                <el-input v-model="form.carrierName"> </el-input>
              </el-form-item>

              <el-form-item label="经办人" prop="operator">
                <el-input v-model="form.operator" />
              </el-form-item>

              <el-form-item label="送货方式" prop="deliveryType">
                <el-select
                  :teleported="false"
                  v-model="form.deliveryType"
                  class="m-2"
                  size="default"
                >
                  <el-option
                    v-for="item in details.pageInfo.deliveryType || []"
                    :key="item.dictValue"
                    :label="item.dictValue"
                    :value="item.dictKey"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="付款方式" prop="payMethod">
                <el-select :teleported="false" v-model="form.payMethod" class="m-2" size="default">
                  <el-option
                    v-for="item in details.pageInfo.payMethod || []"
                    :key="item.dictValue"
                    :label="item.dictValue"
                    :value="item.dictKey"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="运费分摊方式" prop="chargeType">
                <el-select :teleported="false" v-model="form.chargeType" class="m-2" size="default">
                  <el-option
                    v-for="item in details.pageInfo.chargeType || []"
                    :key="item.dictValue"
                    :label="item.dictValue"
                    :value="item.dictKey"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="送货司机" prop="driverName">
                <el-select
                  v-model="form.driverName"
                  filterable
                  :teleported="false"
                  remote
                  @change="handleNameChange"
                  reserve-keyword
                  :remote-method="remoteMethodDriver"
                  :loading="details.loadingObj.loading"
                >
                  <el-option
                    v-for="val in details.driverListByName"
                    :key="val.driverName"
                    :label="val.driverName"
                    :value="val.driverId"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="送货车辆" prop="carNumber" style="flex: 1">
                <el-input v-model="form.carNumber"> </el-input>
              </el-form-item>

              <el-form-item label="客户类型" prop="customerType">
                <el-select
                  :teleported="false"
                  v-model="form.customerType"
                  class="m-2"
                  multiple
                  size="default"
                >
                  <el-option
                    v-for="item in details.pageInfo.customerType || []"
                    :key="item.dictValue"
                    :label="item.dictValue"
                    :value="item.dictKey"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="是否结算" prop="isSettlement">
                <el-select
                  :teleported="false"
                  v-model="form.isSettlement"
                  class="m-2"
                  size="default"
                >
                  <el-option
                    v-for="item in details.pageInfo.settlementStatus || []"
                    :key="item.dictValue"
                    :label="item.dictValue"
                    :value="item.dictKey"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="代收贷款" prop="replacePrice">
                <el-input-number
                  v-model="form.replacePrice"
                  :precision="2"
                  :min="0"
                  :step="1"
                  :controls="false"
                />
              </el-form-item>

              <el-form-item label="承运单号" prop="carrierOrderCode">
                <el-input v-model="form.carrierOrderCode" />
              </el-form-item>

              <el-form-item label="承运时间" prop="carrierTimeStr">
                <el-date-picker
                  v-model="form.carrierTimeStr"
                  type="date"
                  size="default"
                  :teleported="false"
                />
              </el-form-item>

              <el-form-item label="客户收货时间" prop="receivingTimeStr">
                <el-date-picker
                  v-model="form.receivingTimeStr"
                  type="date"
                  size="default"
                  :teleported="false"
                />
              </el-form-item>

              <el-form-item label="运费" prop="countTransportCost">
                <el-input-number
                  v-model="form.countTransportCost"
                  :precision="2"
                  :min="0"
                  :step="1"
                  :controls="false"
                />
              </el-form-item>

              <el-form-item label="司机结算费" prop="settlementValue">
                <el-input-number
                  v-model="form.settlementValue"
                  :precision="2"
                  :min="0"
                  :step="1"
                  :controls="false"
                />
              </el-form-item>

              <div style="padding-right: 0; width: 100%">
                <el-form-item
                  style="width: 100%; margin: 0"
                  label="备注"
                  label-width="100px"
                  :inline="false"
                >
                  <el-input type="textarea" v-model="form.remark" />
                </el-form-item>
              </div>
            </div>
          </el-form>

          <!-- 标题 运单信息 -->
          <el-divider content-position="left">
            <div class="flex-c-c">
              <el-icon class="mr10"><Switch /></el-icon> 运单信息
            </div>
          </el-divider>

          <!-- 运单池 && 调度池 -->
          <!-- 列表模块 -->

          <div v-h5uShow="!search">
            <el-form
              :inline="true"
              label-width="80px"
              :model="details.oldQuery"
              class="header_search"
            >
              <el-form-item class="el-times" label="开单时间">
                <el-date-picker
                  v-model="details.query.timeQuery.createTime"
                  type="daterange"
                  unlink-panels
                  range-separator="-"
                  start-placeholder="开单日期"
                  end-placeholder="开单日期"
                  :shortcuts="shortcuts"
                  value-format="YYYY-MM-DD"
                  clearable
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleData"
                  >搜 索</el-button
                >
                <el-button icon="el-icon-delete" @click="searchReset()">重置</el-button>
              </el-form-item>
            </el-form>
          </div>

          <!-- 控件 -->
          <div style="margin-bottom: 10px" class="flex-c-sb">
            <div>
              <el-button
                v-if="permissionObj.TripartiteTransferDetails_CostSharingRecognition"
                type="primary"
                icon="Promotion"
                @click="searchReset()"
              >
                成本分摊确认
              </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, 1)" circle></el-button>
              <el-button icon="el-icon-search" @click="searchHide" circle></el-button>
            </div>
          </div>
          <!-- 表格 -->
          <tablecmt
            ref="oldColumnListNode"
            :columnList="details.columnList"
            :tableData="details.renderData"
            :loading="loadingObj.renderData"
            @inputTxt="inputsc"
            @timeCheck="timesc"
            @selectCheck="selectsc"
            @selection="selectionChange"
            :arraySpanMethod="row => arraySpanMethod(row)"
          >
            <template #default="slotProps">
              <template v-if="slotProps.scope.column.label === '运单号'">
                <el-text @click="() => handleGoWayBillDetail(slotProps.scope)">
                  {{ slotProps.scope.row.waybillNo }}
                </el-text>
              </template>
            </template>
          </tablecmt>
        </el-tab-pane>

        <el-tab-pane label="操 作 日 志" name="tab2">
          <div style="min-height: 300px">
            <el-steps direction="vertical" space="120px" :active="details.loadLogsList.length">
              <el-step :title="item.abstText" v-for="item in details.loadLogsList" :key="item">
                <template #description>
                  <div class="fz-0-9">
                    <el-row>
                      <div class="flex-c-c mr10">
                        <el-icon color="#172e60" class="mr10" size="20px"><Clock /></el-icon>
                        <span>操作时间：</span>
                        <span>{{ item.updateTime }}</span>
                      </div>
                      <div class="flex-c-c mr10">
                        <el-icon color="#172e60" size="20px"><Location /></el-icon>
                        <span>操作网点：</span>
                        <span>{{ item.nodeName }}</span>
                      </div>
                      <div class="flex-c-c mr10">
                        <el-icon color="#172e60" size="20px"><User /></el-icon>
                        <span>操作人：</span>
                        <span>{{ item.createUserName }}</span>
                      </div>
                    </el-row>

                    <div class="word-break-break-all mt10">
                      {{ item.content }}
                    </div>
                  </div>
                </template>
                <template #icon>
                  <el-icon color="#172e60" size="20px"><HelpFilled /></el-icon>
                </template>
              </el-step>
            </el-steps>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </basic-container>

  <edittablehead
    @closce="showdrawer"
    :drawerShow="drawerShow"
    v-model="details.columnList"
    :columnList="columnList"
  >
  </edittablehead>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, computed, onMounted, nextTick, watch } from 'vue';
import functions from '@/utils/functions';
import dayjs from 'dayjs';
import { mapGetters } from 'vuex';
/** 获取字典 */
import { getDictionaryBiz } from '@/api/system/dict';
import {
  downloadXls,
  computeNumber,
  setNodeHeight,
  debounce,
  deepClone,
  handleClearTableQuery,
  handleInputQuery,
  handleSelectQuery,
  handleTimeQuery,
  handleFilterData,
} from '@/utils/util';
import { TripartiteTransferColumnList } from '@/option/distribution/TripartiteTransfer.js';
import {
  postloadFindLoadInitData,
  postFindDriverListByName,
  postFindUseOrderList,
} from '@/api/distribution/AddVehicleStowage';
import { postCarsLoadDetailInfo } from '@/api/distribution/VehicleStowageDetails.js';
import { postFindCarsLoadLogs } from '@/api/distribution/VehicleStowageDetails.js';
import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';

/** 被合并的列 */
const mergeColumn = [];
// 获取需要被合并的列
TripartiteTransferColumnList.map(val => {
  if (val.isColumnMerge) mergeColumn.push(val.prop);
});

// 获取vuex仓库
const $store = useStore();

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

// 表单实例
const ruleFormRef = ref();

// 表格实例
const oldColumnListNode = ref();

const details = reactive<any>({
  activeTab: 'tab1',
  /** 是否开启搜索 */
  search: true,
  /** 表格搜索条件 */
  query: {
    /** 输入框搜索 */
    inputQuery: {},
    /** 下拉框搜索 */
    selectQuery: {},
    /** 时间搜索 */
    timeQuery: {},
  },
  /** 时间快捷选择设置 */
  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: [],
  /** 修改的列表信息 */
  editColumnList: [],
  /** 运单池 */
  columnList: deepClone(TripartiteTransferColumnList),
  /** 列表数据 */
  oldData: [], // 实际数据
  planData: [], // 计划数据
  /** 列表数据显示类型 -- 实际 | 计划 */
  type: 'real' as 'real' | 'plan',
  /** 渲染数据 */
  renderData: [],
  rules: {
    /** 中转承运商 */
    carrierName: [
      {
        required: true,
        message: '请选择承运商',
        trigger: ['change', 'blur'],
      },
    ],
    /** 经办人 */
    operator: [
      {
        required: true,
        message: '请选择经办人',
        trigger: ['change'],
      },
    ],
    /** 客户类型 */
    customerType: [
      {
        required: true,
        message: '请选择客户类型',
        trigger: ['change'],
      },
    ],
    /** 承运单号 */
    carrierOrderCode: [
      {
        required: true,
        message: '请选择承运单号',
        trigger: ['change', 'blur'],
      },
    ],
    /** 承运时间 */
    carrierTime: [
      {
        required: true,
        message: '请选择承运时间',
        trigger: ['change'],
      },
    ],
    /** 运费 */
    num: [
      {
        required: true,
        message: '请填写运费',
        trigger: ['change'],
      },
    ],
  },
  /** 页面loading */
  loadingObj: {
    /** 列表加载loading */
    list: false,
    oldListLoading: false,
    pageLoading: false,
  },
  /** 列表复选框选中的数据 */
  selectionList: [],
  newSelectionList: [],
  /** 是否显示设置表格 */
  drawerShow: false,
  /** 分页参数 */
  page: {
    pageNum: 1,
    pageSize: 30,
    total: 0,
  },
  oldPage: {
    pageNum: 1,
    pageSize: 30,
    total: 0,
  },
  /** 弹出层显示 */
  popUpShow: {
    /** 装车详情 */
    truckLoadingDetailVisited: false,
    /** 零担补录 */
    transferVisited: false,
  },
  /** 列表Dom节点 */
  listNode: '',
  form: {
    customerType: '',
  },
  /** 页面数据 */
  pageInfo: {},
  /** 承运商 */
  carrierNameOptions: [],
  /** 客户类型 */
  customerType: [],
  /** 送货司机 */
  driverListByName: [],
  /** 被选中在调度池的订单列表 */
  orderCodeList: [],
  /** 配载日志 */
  loadLogsList: [],
});

for (let i = 0; i < details.columnList.length; i++) {
  const value = details.columnList[i];

  if (value.prop === 'waybillNo') {
    value.type = 13;
    break;
  }
}

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

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

/** 权限按钮 */
const permissionObj = reactive({
  /** 计划仓更改 */
  TripartiteTransferDetails_CostSharingRecognition: computed(() => {
    return $store.getters.permission.TripartiteTransferDetails_CostSharingRecognition;
  }),
});

// TripartiteTransferDetails_CostSharingRecognition

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

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

    // 获取表单信息
    const promiseAll = await Promise.all([
      // 获取下拉列表
      postloadFindLoadInitData(),
      // 获取表单数据
      // postSelectEditDetailByLoadId({ loadId: $route.query.loadId }),
      postCarsLoadDetailInfo({ loadId: $route.query.loadId }),
    ]);

    console.log('promiseAll :>> ', promiseAll);

    const [
      {
        data: { code, data },
      },
      {
        data: { code: code1, data: data1 },
      },
    ] = promiseAll;

    console.log('code :>> ', code);
    console.log('code1 :>> ', code1);

    if (code !== 200 && code1 !== 200) return;

    details.pageInfo = data;
    details.customerType = data.customerType;
    console.log('data :>> ', data);

    details.form = data1;
    details.form.customerType = data1.customerType.split(',');

    details.form.startWarehouseName = data.startWarehouseInfo.warehouseName;
    details.form.startWarehouseId = data.startWarehouseInfo.warehouseId;
    details.form.carrierTimeStr = details.form.carrierTime;
    details.form.receivingTimeStr = details.form.receivingTime;

    delete details.form.carrierTime;
    delete details.form.receivingTime;

    details.oldData = [];
    details.planData = [];

    data1.carsLoadWaybillInfoList.forEach(val => {
      details.oldData.push(
        ...val.carsLoadOrderInfoList.map((item, index) => {
          item = { ...val, ...item };
          delete item.carsLoadOrderInfoList;
          delete item.carsLoadOrderInfoListPlan;
          return item;
        })
      );

      details.planData.push(
        ...val.carsLoadOrderInfoListPlan.map((item, index) => {
          item = { ...val, ...item };
          delete item.carsLoadOrderInfoList;
          delete item.carsLoadOrderInfoListPlan;
          return item;
        })
      );
    });

    handleData();
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.pageLoading = false;
  }
}, 10);

onLoad();

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

/** 清空表单 */
const searchReset = () => {
  for (const key in details.query) {
    details.query[key] = {};
  }
  details.stockupDate = [];
  handleClearTableQuery(details.columnList);
  handleData();
};

/** 展开列表控件 */
const showdrawer = (_flag?: boolean, _type?: number) => {
  switch (_type) {
    default:
      console.log('123 :>> ', 123);
      details.editColumnList = details.columnList;
      break;
    // details.
  }
  details.drawerShow = _flag;
};

/** 是否开启搜索区 */
const searchHide = async () => {
  details.search = !details.search;
  await nextTick();
  setNodeHeight(details.listNode, '50vh');
};

/** 查询司机信息 */
const remoteMethodDriver = async val => {
  const res = await postFindDriverListByName({ driverName: val });
  console.log('res :>> ', res);
  const { code, data } = res.data;
  if (code !== 200) return;
  details.driverListByName = data;
};

/** 处理合并 */
const handleMerge = (startIndex: number, endIndex: number, data: {}) => {
  for (let index = startIndex; index < endIndex; index++) {
    const value = data[index];

    if (index === startIndex) value.mergeColumnIndex = endIndex - startIndex;
    else {
      value.mergeColumnIndex = 0;
      for (let key of mergeColumn) {
        value[key] = '';
      }
    }
  }
};

/** 处理数据 */
const handleData = async () => {
  await nextTick();

  const nowData = details.type === 'real' ? details.oldData : details.planData;

  // 深拷贝筛选后的数据
  let _data = deepClone(handleFilterData(nowData, [], details.query));

  console.log('_data :>> ', _data);

  if (_data.length === 0) return (details.renderData = []);

  // 合并起始索引
  let mergeStartIndex = 0;
  // 比对值
  let comparisonValue = _data[0].waybillNo;

  _data[0].mergeColumnIndex = 1;

  for (let index = 0; index < _data.length; index++) {
    const value = _data[index];

    // 比对运单号是否相同
    if (value.waybillNo !== comparisonValue) {
      // if (index === 1) mergeStartIndex = 1;
      comparisonValue = value.waybillNo;
      handleMerge(mergeStartIndex, index, _data);
      mergeStartIndex = index;

      if (index === _data.length - 1) {
        handleMerge(mergeStartIndex, index + 1, _data);
      }
      // 最后一位特殊处理
    } else if (index === _data.length - 1) handleMerge(mergeStartIndex, index + 1, _data);
  }

  details.renderData = _data;
};

/** 表格表头输入框搜索 */
const inputsc = (value, row) => {
  handleInputQuery(value, row, details.query.inputQuery, true);

  handleData();
};

/** 表格表头时间选择 */
const timesc = (index, row) => {
  handleTimeQuery(index, row, details.query.timeQuery);

  handleData();
};

/** 表格表头下拉框选择 */
const selectsc = (index, row) => {
  handleSelectQuery(index, row, details.query.selectQuery);

  handleData();
};

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

/** 司机改变时 */
const handleNameChange = () => {
  const findValue = form.value.driverName;
  const _value = details.driverListByName.find(value => value.driverId === findValue);

  form.value.driverName = _value.driverName;
  form.value.driverId = _value.driverId;
  form.value.driverMobile = _value.driverPhone;
};

/** 请求日志跟踪 */
const handleSignLoadScanLogs = async () => {
  try {
    details.loadingObj.pageLoading = true;

    const submitData = { loadId: $route.query.loadId };
    const res = await postFindCarsLoadLogs(submitData);

    const { code, data } = res.data;
    if (code !== 200) return;
    details.loadLogsList = data;
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.pageLoading = false;
  }
};

const handleCheckTab = e => {
  console.log('e :>> ', e);
  switch (e.props.name) {
    // 日志跟踪
    case 'tab2':
      handleSignLoadScanLogs();
      break;

    default:
      break;
  }
};

/** 合并行 */
const arraySpanMethod = (row: any) => {
  const { column } = row;
  if (mergeColumn.indexOf(column.property) !== -1) {
    if (row.row.mergeColumnIndex !== 0) return [row.row.mergeColumnIndex, 1];
    else return [0, 0];
  }
};

/** 跳转到运单详情 */
const handleGoWayBillDetail = ({ row }) => {
  if (row.waybillNo === '--') return ElMessage.warning('暂无运单号');

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

watch($route, () => {
  if ($route.path !== '/distribution/artery/TripartiteTransferDetails') return;
  onLoad();
});
</script>
<style scoped lang="scss">
.fo-fl {
  display: flex;
  flex-wrap: wrap;
  zoom: 0.9;

  > div {
    min-width: 25%;
    margin-right: 0px;
    padding: 0 10px;
    box-sizing: border-box;

    &:nth-child(4n) {
      padding-right: 0;
    }
  }
}

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

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

:deep(.el-select) {
  width: 100%;
}

:deep(.el-input-number) {
  width: 100%;
}

.pointer {
  cursor: pointer;
}

// 页面底部站位
.footer {
  height: 80px;
}

// 提交按钮
.button-container {
  z-index: 99;
  position: fixed;
  bottom: 30px;
  left: 50%;
}

// 标题
:deep(.el-divider__text.is-left) {
  font-size: 20px;
  font-weight: bold;
  color: var(--el-color-primary);
}

.mr10 {
  margin-right: 10px;
  height: 40px;
}

:deep(.el-table__row) {
  height: 30px;
}

:deep(.slotbuts) {
  height: 30px;

  .el-input-number {
    height: 100%;
  }
}

// 禁用样式
:deep(.el-input.is-disabled .el-input__wrapper) {
  background-color: #fff;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

:deep(.el-input.is-disabled .el-input__inner) {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  text-align: left;
}

:deep(.el-textarea.is-disabled .el-textarea__inner) {
  background-color: #fff;
  color: #000 !important;
}

.overflow {
  overflow: hidden;
}
</style>