CITS/src/views/departure/waybillManage/index.vue

<template>
  <div class="table-search">
    <a-button class="common-button" @click="showSearchOrder"> 新增 </a-button>
  </div>
  <CrudTable
    ref="crudTableRef"
    :api-obj="ApiObj"
    :search-config="searchConfig"
    :columns="columns"
    :search-form="searchForm"
    :show-details="false"
    :show-add="false"
    :show-edit="false"
    :show-del="false"
  >
    <template #operate-cell="{ record }">
      <a-button
        v-if="record?.status === WAYBILL_ORDER_STATUS_MAP.FINISH"
        v-auth="'platform:awb:info'"
        type="text"
        shape="round"
        @click="showOrEditWaybill(MODEL_TYPE.DETAIL, record, 'new')"
      >
        详情
      </a-button>
      <a-button
        v-if="
          !userStore.isSuperAdmin &&
          record?.status === WAYBILL_ORDER_STATUS_MAP.UNFINISHED
        "
        v-auth="'platform:awb:update'"
        type="text"
        shape="round"
        @click="showOrEditWaybill(MODEL_TYPE.EDIT, record, 'new')"
        >补录
      </a-button>
      <a-button
        v-if="
          !record?.hawbNo &&
          record?.status === WAYBILL_ORDER_STATUS_MAP.UNFINISHED
        "
        v-auth="'platform:awb:update'"
        type="text"
        shape="round"
        @click="showOrEditWaybill(MODEL_TYPE.ADD, record, 'new')"
        >新增分运单
      </a-button>
      <!-- <a-button
        v-if="
          !userStore.isSuperAdmin &&
          record?.status === WAYBILL_ORDER_STATUS_MAP.UNFINISHED
        "
        v-auth="'platform:awb:update'"
        type="text"
        shape="round"
        @click="showOrEditWaybill(MODEL_TYPE.EDIT, record)"
      >
        补录
      </a-button> -->
      <a-button
        v-if="
          !record?.hawbNo && record?.status === WAYBILL_ORDER_STATUS_MAP.FINISH
        "
        v-auth="'platform:awb:print'"
        type="text"
        shape="round"
        @click="printReport(record)"
      >
        打印安检申报单
      </a-button>
      <a-button
        v-auth="'platform:awb:print'"
        type="text"
        shape="round"
        @click="printConfirm(record)"
      >
        打印收货确认单
      </a-button>
    </template>
  </CrudTable>
  <Additional
    v-model="visibleDialog"
    :from-data="fromData"
    :order-type="orderType"
    :model-type="modelType"
  ></Additional>
  <additionalDialog
    ref="additionalDialogRef"
    :from-data="fromData"
    :order-type="orderType"
    :model-type="modelType"
  ></additionalDialog>
  <!-- 点击新增按钮弹出的对话框 -->
  <a-modal
    v-model:visible="visible"
    :closable="false"
    :mask-closable="false"
    title=" "
    hide-cancel
    width="auto"
    ok-text="关闭"
    :ok-loading="buttonLoading"
    @ok="handleOk"
  >
    <a-form :model="queryForm" layout="inline" @submit="submitQuery">
      <a-form-item
        field="name"
        label="请输入运单号"
        :rules="[{ required: true, message: '必填项不可为空!' }]"
      >
        <a-input v-model="queryForm.name" allow-clear width="200px" />
      </a-form-item>
      <a-form-item>
        <a-button html-type="submit">查询</a-button>
      </a-form-item>
    </a-form>
  </a-modal>
  <!-- 查询运单后弹出的对话框 -->
  <a-modal
    v-model:visible="visibleTip"
    width="46%"
    ok-text="关闭"
    :closable="false"
    :mask-closable="false"
    :cancel-text="tipCancelText"
    @cancel="updateOrSave"
    @ok="handleTipClose"
  >
    <h4 style="color: red">ICS2欧盟申报温馨提示:</h4>
    <div v-for="item in cueMsg" :key="item.value">
      <p style="color: red; font-size: 11px"
        >{{ item.value }}.{{ item.label }}</p
      >
    </div>
    <a-typography-title :heading="4">
      <div v-text="tipMsg"> </div>
    </a-typography-title>
  </a-modal>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
import CrudTable from '@/components/crud-table/index';
import { Message } from '@arco-design/web-vue';
import { WAYBILL_TYPE, WAYBILL_ORDER_STATUS_MAP } from '@/constant/waybill';
import { MODEL_TYPE } from '@/constant/base';
import { useWaybillStore, useUserStore } from '@/store';
import DictApi from '@/api/module/DictApi';
import AdditionalDialog from '@/views/departure/waybillManage/additionalDialog.vue';
import ApiObj from './api/CurrentPageApi';
import Additional from './additional.vue';
import { columns } from './functions/table';
import { setFiltrateData } from './functions/data';

const additionalDialogRef = ref<any>(null);
const waybillStatusMap = ref<string[]>([]);
useWaybillStore();
const userStore = useUserStore();
const crudTableRef = ref();

onMounted(async () => {
  const res = await DictApi.wbcStatus(); // 原来代码
  waybillStatusMap.value = res.data;
});
const timeRange = [
  // dayjs().add(-50, 'day').format('YYYY-MM-DD'),
  // dayjs().add(14, 'day').format('YYYY-MM-DD'),
  dayjs().format('YYYY-MM-DD'),
  dayjs().add(14, 'day').format('YYYY-MM-DD'),
];
const searchForm = reactive<Record<string, any>>({
  agtNo: userStore.isSuperAdmin ? '' : userStore.userInfo?.tenant?.threeCode,
  timeRange,
});
// 查询条件
const searchConfig = setFiltrateData(waybillStatusMap);

const visibleDialog = ref<boolean>(false);
const orderType = ref<WAYBILL_TYPE>(WAYBILL_TYPE.MAIN);
const modelType = ref<MODEL_TYPE>(MODEL_TYPE.EDIT);
const fromData = ref<Record<string, any>>({});

/**
 * 这里确认打开的是 补录主运单 还是 补录分运单 还是 打开新增主运单
 * @param type
 * @param data
 * @param isNew
 */
const showOrEditWaybill = async (
  type: MODEL_TYPE,
  data: Record<string, any>,
  isNew?: string
) => {
  modelType.value = type;
  if (isNew === 'mainNew') {
    // 主运单新增
    if (additionalDialogRef.value) {
      additionalDialogRef.value.openNewMainDialog(queryForm.name);
    }
    return;
  }
  const res = await ApiObj.get(data);
  fromData.value = res.data ?? {};
  // fromData.value = dataList.data ?? {}; // fixme 这里给测试数据
  // Object.keys(fromData.value).forEach((key: string) => {
  //   waybillStore.setValueByKey(key, fromData.value[key]);
  // });

  // 目前只有分单有新增
  orderType.value =
    data?.hawbNo || type === MODEL_TYPE.ADD
      ? WAYBILL_TYPE.SPLIT
      : WAYBILL_TYPE.MAIN;
  if (isNew === 'new') {
    if (additionalDialogRef.value) {
      additionalDialogRef.value.openDialog();
    }
  } else {
    visibleDialog.value = true;
  }
};

const printReport = async (data: Record<string, any>) => {
  const { agtNo, mawbId } = data;
  try {
    console.log('---导出');
    await ApiObj.printReport({
      agtNo,
      mawbId,
    });
  } catch (error) {
    Message.error('数据导出异常');
  }
};

const printConfirm = async (data: Record<string, any>) => {
  const { mawbId } = data;
  try {
    const res = await ApiObj.printConfirm({
      id: mawbId,
    });
  } catch (error) {
    Message.error('数据导出异常');
  }
};

interface queryFormInterface {
  name: string;
}
const visible = ref<boolean>(false);
const tipMsg = ref<string>('');
const tipCancelText = ref<string>('');
const visibleTip = ref<boolean>(false);
const buttonLoading = ref<boolean>(false);
const queryForm = reactive<queryFormInterface>({
  name: '',
});

/**
 * 点击新增按钮
 */
function showSearchOrder(): void {
  visible.value = true;
}
/**
 * 点击新增按钮对话框的关闭按钮
 */
function handleOk(): void {
  queryForm.name = '';
  buttonLoading.value = false;
  visible.value = false;
}

/**
 * 点击新增按钮对话框的查询按钮
 */
const submitQuery = async (e: any) => {
  const { errors, values } = e;
  if (errors) return; // 表单校验

  try {
    // 根据运单号查询运单是否存在
    // const res = await ApiObj.get({ mawbNo: queryForm.name });
    // console.log(res);

    // const flag = res.data !== null && res.data !== undefined;
    const flag = queryForm.name === '1';
    visibleTip.value = true;
    if (flag) {
      // 假设运单存在
      tipMsg.value = '当前运单已存在,点击补录按钮补录运单';
      // 弹出的子对话框按钮变为 补录 关闭
      tipCancelText.value = '补录';
    } else {
      // 假设运单不存在
      tipMsg.value = '当前运单号不存在,点击新增按钮新增运单';
      // 弹出的子对话框按钮变为 新增 关闭
      tipCancelText.value = '新增';
    }
  } catch (error) {
    Message.error('数据导出异常');
  }
};
const handleTipClose = () => {
  visibleTip.value = false;
};
type CueMessage = {
  value: number;
  label: string;
};
// ICS2欧盟申报温馨提示
const cueMsg = ref<CueMessage[]>([
  {
    value: 1,
    label:
      '凡是属于3S/D0/I9/ES且航班目的地为飞往欧盟以及挪威和瑞士的所有航班，请选择IC2选项',
  },
  {
    value: 2,
    label:
      '请根据航班目的站为欧盟以及挪威和瑞士，而不是以运单目的地，作为ICS2申报的必要条件。',
  },
  {
    value: 3,
    label:
      '主分单录入中的单个商品编码请勿以空格隔开，比如61020499为正确格式，而61 02 04 99为不规范格式。' +
      '多个商品编码请以空格隔开，比如61020499 61020410为正确格式，61020499, 61020410为不规范格式。',
  },
  {
    value: 4,
    label: '请尽量一次性录入规范正确的主分单信息，防止多次修改主分单。',
  },
]);

/**
 * 补录或是新增
 */
const updateOrSave = () => {
  if (tipCancelText.value === '新增') {
    showOrEditWaybill(MODEL_TYPE.MAIN_ADD, queryForm, 'mainNew');
  } else {
    // 调用补录
    showOrEditWaybill(MODEL_TYPE.EDIT, queryForm, 'new');
  }
};
</script>