新增运单界面功能完善

src/App.vue

@@ -1,15 +1,31 @@
-<script setup lang="ts">
+<template>
+  <a-config-provider :locale="arcoLocale">
+    <router-view></router-view>
+    <global-setting />
+  </a-config-provider>
+</template>
+
+<script lang="ts" setup>
 import { computed } from 'vue';
-import { ElConfigProvider } from 'element-plus';
-import { useI18n } from 'vue-i18n';
-import { getElementPlusLocale } from '@/i18n';
+import { useRoute } from 'vue-router';
+import GlobalSetting from '@/components/global-setting/index.vue';
+import useLocale from '@/hooks/locale';
+import { useAppStore } from './store';
 
-const { locale } = useI18n({ useScope: 'global' });
-const lang = computed(() => getElementPlusLocale(locale.value as string));
+const appStore = useAppStore();
+const route = useRoute();
+const loading = computed(() => appStore.loading);
+const { arcoLocale } = useLocale();
+onBeforeMount(() => {
+  if (!window.location.href.includes('login')) {
+    appStore.initConfig();
+  }
+});
 </script>
 
-<template>
-  <el-config-provider :locale="lang">
-    <router-view />
-  </el-config-provider>
-</template>
+<style lang="less" scoped>
+.arco-spin {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/breadcrumb/index.vue

@@ -1,37 +1,34 @@
-<script lang="ts">
-export default { name: 'BreadCrumb' };
-</script>
+<template>
+  <a-breadcrumb class="container-breadcrumb">
+    <a-breadcrumb-item v-for="item in items" :key="(item as string)">
+      {{ item }}
+    </a-breadcrumb-item>
+  </a-breadcrumb>
+</template>
 
-<script setup lang="ts">
-import { ref, watchEffect } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { compile } from 'path-to-regexp';
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+import { useRoute } from 'vue-router';
 
-const router = useRouter();
-const route = useRoute();
-const itemList = ref<any[]>([]);
+export default defineComponent({
+  setup() {
+    const route = useRoute();
+    const items = computed(() => {
+      return route.matched.map((item) => item.meta.title).filter(Boolean);
+    });
 
-const pathCompile = (path: string) => {
-  const { params } = route;
-  const toPath = compile(path);
-  return toPath(params);
-};
-const handleLink = (item: any) => {
-  const { redirect, path } = item;
-  router.push(redirect || pathCompile(path));
-};
-watchEffect(() => {
-  itemList.value = route.matched.filter((item) => item.meta?.title);
+    return {
+      route,
+      items,
+    };
+  },
 });
 </script>
 
-<template>
-  <el-breadcrumb separator="/">
-    <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item, index) in itemList" :key="item.path">
-        <span v-if="index === itemList.length - 1" class="text-gray-400">{{ $t(item.meta.title) }}</span>
-        <a v-else class="text-theme" @click.prevent="() => handleLink(item)">{{ $t(item.meta.title) }}</a>
-      </el-breadcrumb-item>
-    </transition-group>
-  </el-breadcrumb>
-</template>
+<style scoped lang="less">
+@import '@/styles/var.less';
+:deep(.arco-breadcrumb-item:last-child) {
+  font-size: 18px;
+  color: @theme-color;
+}
+</style>

src/components/upload/index.ts

@@ -1,4 +1,6 @@
-export { default as ImageUpload } from './ImageUpload.vue';
-export { default as ImageListUpload } from './ImageListUpload.vue';
-export { default as FileListUpload } from './FileListUpload.vue';
-export { default as BaseUpload } from './BaseUpload.vue';
+import Upload from './index.vue';
+import CropperUpload from './cropper-upload.vue';
+
+export { CropperUpload };
+
+export default Upload;

src/constant/base.ts

@@ -7,9 +7,10 @@
 export const IS_DEV: boolean = import.meta.env.MODE === 'development';
 
 export enum MODEL_TYPE {
-  ADD = 1,
+  ADD = 1, // 分运单补录或者是新增
   EDIT,
   DETAIL,
+  MAIN_ADD, // 新增主运单
 }
 
 export enum LOGIN_TYPE {

src/constant/waybill.ts

@@ -9,7 +9,11 @@ export enum WAYBILL_STATUS {
   ERROR,
 }
 
+/**
+ * 运单类型
+ */
 export enum WAYBILL_TYPE {
-  MAIN = 1,
+  MAIN = 1, // 主运单补录
   SPLIT,
+  MAIN_ADD, // 主运单新增
 }

src/main.ts

@@ -1,21 +1,25 @@
+import 'normalize.css';
+import 'reset.css';
+import '@arco-design/web-vue/dist/arco.less';
+import '@/styles/index.less';
 import { createApp } from 'vue';
-import ElementPlus from 'element-plus';
-import { initRefreshInterval } from '@/store/useCurrentUser';
-import App from './App.vue';
+import ArcoVue from '@arco-design/web-vue';
+import ArcoVueIcon from '@arco-design/web-vue/es/icon';
+import globalComponents from '@/components';
+import directives from '@/directives';
+// eslint-disable-next-line import/no-unresolved
+import 'virtual:svg-icons-register';
 import router from './router';
-import i18n from './i18n';
-import '@/permission';
-
-import '@/styles/tailwind.scss';
-import '@/styles/element-plus.scss';
-import '@/styles/index.scss';
-
-// 初始化RefreshToken自动刷新
-initRefreshInterval();
+import store from './store';
+import i18n from './locale';
+import App from './App.vue';
 
-const app = createApp(App)
+createApp(App)
+  .use(ArcoVue)
+  .use(ArcoVueIcon)
   .use(router)
-  // tinymce 对话框的层级太低，必须调低 ElementPlus 的 对话框层级（默认为2000）
-  .use(ElementPlus, { zIndex: 500 })
-  .use(i18n);
-app.mount('#app');
+  .use(store)
+  .use(i18n)
+  .use(directives)
+  .use(globalComponents)
+  .mount('#app');

src/router/index.ts

@@ -1,81 +1,74 @@
-import { Component } from 'vue';
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
-import Layout from '@/layout/index.vue';
+import 'nprogress/nprogress.css';
+import { authRouter } from './auth-router';
+import routerInterceptor from './interceptor';
 
-declare module 'vue-router' {
-  interface RouteMeta {
-    hidden?: boolean;
-    title?: string;
-    icon?: Component;
-    requiresPermission?: string;
-    noCache?: boolean;
-  }
-}
-export const routes: Array<RouteRecordRaw> = [
-  { path: '/refresh', component: () => import('@/views/RefreshPage.vue'), meta: { hidden: true, noCache: true } },
-  { path: '/', component: () => import('@/views/LoginPage.vue'), meta: { hidden: true, noCache: true } },
-  { path: '/login', component: () => import('@/views/LoginPage.vue'), meta: { hidden: true, noCache: true } },
-  { path: '/404', component: () => import('@/views/404.vue'), meta: { hidden: true, noCache: true } },
-  { path: '/403', component: () => import('@/views/403.vue'), meta: { hidden: true, noCache: true } },
-  {
-    path: '/content',
-    component: Layout,
-    meta: { title: 'menu.content', iconName: 'content', requiresPermission: 'menu.content' },
-    children: [
-      {
-        path: 'articleMgt',
-        name: 'ArticleList',
-        component: () => import('@/views/content/articleMgt/ArticleList.vue'),
-        meta: { title: 'menu.content.article', requiresPermission: 'article:page' },
-      },
-      {
-        path: 'channelMgt',
-        name: 'ChannelList',
-        component: () => import('@/views/content/channelMgt/ChannelList.vue'),
-        meta: { title: 'menu.content.channel', requiresPermission: 'channel:page' },
-      },
-      {
-        path: 'blockItemMgt',
-        name: 'BlockItemList',
-        component: () => import('@/views/content/blockItemMgt/BlockItemList.vue'),
-        meta: { title: 'menu.content.blockItem', requiresPermission: 'blockItem:page' },
-      },
-    ],
-  },
-  {
-    path: '/statisticsService',
-    component: Layout,
-    meta: { title: 'menu.statisticsService', iconName: 'system', requiresPermission: 'menu.statisticsService' },
-    children: [
-      {
-        path: 'surveyMgt',
-        name: 'SurveyList',
-        component: () => import('@/views/statisticsService/surveyMgt/SurveyList.vue'),
-        meta: { title: 'menu.statisticsService.survey', requiresPermission: 'survey:page' },
-      },
-    ],
-  },
-  {
-    path: '/user',
-    component: Layout,
-    meta: { title: 'menu.system', iconName: 'system', requiresPermission: 'menu.system' },
-    children: [
-      { path: 'userMgt', name: 'UserList', component: () => import('@/views/user/userMgt/UserList.vue'), meta: { title: 'menu.system.user', requiresPermission: 'user:page' } },
-      { path: 'roleMgt', name: 'RoleList', component: () => import('@/views/user/roleMgt/RoleList.vue'), meta: { title: 'menu.system.role', requiresPermission: 'role:page' } },
-    ],
-  },
-  // 404 页面配置必须放在最后
-  {
-    path: '/:pathMatch(.*)*',
-    name: 'not-found',
-    redirect: '/404',
-    meta: { hidden: true, noCache: true },
-  },
-];
 const router = createRouter({
   history: createWebHashHistory(),
-  scrollBehavior: () => ({ top: 0 }),
-  routes,
+  routes: [
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'NotFound',
+      hidden: true,
+      redirect: '/404',
+    },
+    {
+      path: '/login',
+      name: 'login',
+      hidden: true,
+      component: () => import('@/views/login/index.vue'),
+    },
+    {
+      path: '/message',
+      component: () => import('@/layout/page-layout.vue'),
+      hidden: true,
+      children: [
+        {
+          path: '/message-center',
+          name: 'messageCenter',
+          component: () => import('@/views/messageCenter/index.vue'),
+          meta: {
+            title: '消息中心',
+          },
+        },
+      ],
+    },
+    {
+      path: '/',
+      component: () => import('@/layout/page-layout.vue'),
+      hidden: true,
+      children: [
+        {
+          path: '/403',
+          name: '403',
+          component: () => import('@/views/exception/403/index.vue'),
+          meta: { breadcrumb: false },
+        },
+        {
+          path: '/404',
+          name: '404',
+          component: () => import('@/views/exception/404/index.vue'),
+          meta: { breadcrumb: false },
+        },
+        {
+          path: '/500',
+          name: '500',
+          component: () => import('@/views/exception/500/index.vue'),
+          meta: { breadcrumb: false },
+        },
+      ],
+    },
+    {
+      path: '/',
+      component: () => import('@/layout/empty-layout.vue'),
+      children: [...authRouter],
+    },
+  ] as unknown as Array<RouteRecordRaw>,
+  scrollBehavior() {
+    return { top: 0 };
+  },
 });
 
+routerInterceptor(router);
+
 export default router;

src/router/interceptor.ts

@@ -8,6 +8,7 @@ const whiteList: string[] = [
   '/login',
   '/composite-search/inward-flight-inquiry',
   '/composite-search/inward-flight-inquiry-his',
+  '/departure/waybill-manage',
 ];
 
 const routerInterceptor = (router: Router) => {

src/utils/auth.ts

@@ -1,58 +1,133 @@
-import Cookies from 'js-cookie';
+import { MENU_TYPE } from '@/constant/menu';
+import md5 from 'js-md5';
+import { RouteRecordRaw } from 'vue-router';
+import { routerMap } from '@/router/auth-router';
+import { Message } from '@arco-design/web-vue';
+import { REG_URL } from '../regexp/index';
 
-const JWT_ACCESS_TOKEN = 'jwt-access-token';
-const JWT_ACCESS_AT = 'jwt-access-at';
-const JWT_REFRESH_TOKEN = 'jwt-refresh-token';
-const JWT_REFRESH_AT = 'jwt-refresh-at';
-const JWT_SESSION_TIMEOUT = 'jwt-session-timeout';
+interface Menu2RouteOptions {
+  pathKey?: string;
+  titleKey?: string;
+  iconKey?: string;
+}
 
-export const getAccessToken = (): string | undefined => Cookies.get(JWT_ACCESS_TOKEN);
-export const setAccessToken = (token: string): void => {
-  Cookies.set(JWT_ACCESS_TOKEN, token);
+const isLogin = () => {
+  return !!localStorage.getItem('token');
 };
-export const removeAccessToken = (): void => Cookies.remove(JWT_ACCESS_TOKEN);
 
-export const getRefreshToken = (): string | undefined => Cookies.get(JWT_REFRESH_TOKEN);
-export const setRefreshToken = (token: string): void => {
-  Cookies.set(JWT_REFRESH_TOKEN, token);
-};
-export const removeRefreshToken = (): void => {
-  Cookies.remove(JWT_REFRESH_TOKEN);
+const getToken = () => {
+  return localStorage.getItem('token');
 };
 
-export const getRefreshAt = (): number => {
-  const refreshAt = Cookies.get(JWT_REFRESH_AT);
-  return refreshAt ? Number(refreshAt) : 0;
-};
-export const setRefreshAt = (refreshAt: number): void => {
-  Cookies.set(JWT_REFRESH_AT, String(refreshAt));
+const setToken = (token: string) => {
+  localStorage.setItem('token', token);
 };
-export const removeRefreshAt = (): void => {
-  Cookies.remove(JWT_REFRESH_AT);
+
+const clearToken = () => {
+  localStorage.removeItem('token');
 };
 
-export const getAccessAt = (): number => {
-  const accessAt = Cookies.get(JWT_ACCESS_AT);
-  return accessAt ? Number(accessAt) : 0;
+const getEncryptCode = (passwrod: string) => {
+  // const encrypt = new JsEncrypt(); // 实例化加密对象
+  // encrypt.setPublicKey(
+  //   'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCx5Ti8+2vC7VjiiMw4rArFDYTPBgLICP0hDCU6OrBTVgoE6TEgup/gWbjHN3BWw10drtm9hy1M5SaXULOYCq9pf27bkqb2xshIOKn9GQ/yoP5NJolo9LhT+GNH9tz87ZdFoB8NFWiCFeGRu6kS8r++s5SriaLyR8nYtbdMULOVfQIDAQAB'
+  // ); // 设置公钥
+  // encrypt.setPrivateKey('MIICdwIBADANBgkqhkiG9w0BAQEFAASCAmEwggJdAgEAAoGBAJddxbamrQdHYn12rjwk8Z2eDWB+TB7Oeh9r/UFyoT/JFV2H259sUr3iwKvnPQ6d9oQcK4WmaxCpp6trv2t6HsRWqKN+t6qgb1xR1IZ8BKSofVODsJT7k9MB6Ct7MW2ymKP9o6bbgw3LOFP26cg7RJ334f9e/b2Zts4o7lzDgAWLAgMBAAECgYBmuubYCxE98m3e1vBzs2MkZUOQ7Ma+1cW+k60jgSf9QX01qGIfNgaGB2JaiStAQ2cuzGuhXowll+9LAWq+B/jem+t8IrKYTKgVW099PfQd1srKtMwwqOfQ9yxlXML8Sta2+4Q+ijOzVXOwXjDFyQySpBjygswP05m0+6sQgNDF8QJBAOT39A4WXetnl+WkGgCsrt98HkpfyG1BEwgm7eIyJw6UnikwT0DGRiYM6BO+OEFsql/pV6wMCBaCiR7pjB1OiEkCQQCpPHgsosdhA8XafSos9QA0BPI1e6hmMWcz03WjZrJYR1oYXsWJxMzLpqMCPNiszcWUgkQkMrbPOFdbWBc62eczAkEAqTuXOD5R5qcnvwS+b1cy3V3IqaIH6rCZV4ImevQkqAMyrzDUswSZXpBVjBohTEH7324BbdlqtPCAVse51wNveQJAIvTjmcyxxD9EQgIykQC2Xwhag2OcgCdaOuFF3k+bLRLn8Dq7MN7esn4kE5U/6EnEsw1JR/TVv+3SVYLXoYda8wJBALUgVoMcI+p/tki1nduvd3ofr3rbMHz6fmccNL/1/ad/eYK7qm7zlWfZscr+RRu0vLpBOXV4bHChmFfE1OCSYNg=');
+  // return encrypt.encrypt(md5(passwrod));
+  return md5(passwrod);
 };
-export const setAccessAt = (accessAt: number): void => {
-  Cookies.set(JWT_ACCESS_AT, String(accessAt));
+const encodebase64 = (str: string) => {
+  // 对字符串进行编码
+  const encode = encodeURI(str);
+  // 对编码的字符串转化base64
+  const base64 = btoa(encode);
+  return base64;
 };
-export const removeAccessAt = () => Cookies.remove(JWT_ACCESS_AT);
+const components = [...routerMap.keys()].reduce(
+  (cur: Record<string, any>, key: any) => {
+    const route: any = routerMap.get(key);
+    cur[route.name] = route.component;
+    return cur;
+  },
+  {}
+);
 
-export const getSessionTimeout = (): number => {
-  const sessionTimeout = Cookies.get(JWT_SESSION_TIMEOUT);
-  // 默认 30 分钟
-  return sessionTimeout ? Number(sessionTimeout) : 30;
+const getComponentByName = (name: string) => {
+  return components[name];
 };
-export const setSessionTimeout = (sessionTimeout: number): void => {
-  Cookies.set(JWT_SESSION_TIMEOUT, String(sessionTimeout));
+
+const menu2route = (
+  menu: Record<string, any>,
+  options: Menu2RouteOptions = {}
+): RouteRecordRaw => {
+  const { pathKey = 'path', titleKey = 'title', iconKey = 'icon' } = options;
+  const component = getComponentByName(menu.component);
+  // if (!component) {
+  //   throw new Error('数据异常');
+  // }
+  return {
+    path: menu[pathKey],
+    // 默认值防止页面点击无效
+    component,
+    meta: {
+      title: menu.meta[titleKey],
+      icon: menu.meta[iconKey],
+      type: menu.type,
+      extra: JSON.parse(menu.extra || '""'),
+    },
+  };
 };
-export const removeSessionTimeout = (): void => {
-  Cookies.remove(JWT_SESSION_TIMEOUT);
+
+const menuTree2Routes = (
+  menuTree: Record<string, any>[],
+  options: Menu2RouteOptions = {},
+  routes: RouteRecordRaw[] = [],
+  sidebarMenu: any[] = []
+): any => {
+  const { pathKey = 'path', titleKey = 'title', iconKey = 'icon' } = options;
+  try {
+    menuTree.forEach((menu) => {
+      if (menu.type !== MENU_TYPE.BUTTON) {
+        if (REG_URL.test(menu.path)) {
+          sidebarMenu.push({
+            path: menu[pathKey],
+            meta: {
+              title: menu.meta[titleKey],
+              icon: menu.meta[iconKey],
+            },
+          });
+        } else {
+          const route: RouteRecordRaw = menu2route(menu, options);
+          if (menu.children && menu.children.length) {
+            route.children = menuTree2Routes(
+              menu.children,
+              options,
+              [],
+              []
+            ).routes;
+          }
+          routes.push(route);
+          sidebarMenu.push(route);
+        }
+      }
+    });
+
+    return {
+      sidebarMenu,
+      routes,
+    };
+  } catch (error: any) {
+    Message.error(error.message);
+    return [];
+  }
 };
 
-export const getAuthHeaders = (): any => {
-  const accessToken = getAccessToken();
-  return { Authorization: accessToken ? `Bearer ${accessToken}` : '' };
+export {
+  isLogin,
+  getToken,
+  setToken,
+  clearToken,
+  getEncryptCode,
+  menuTree2Routes,
+  encodebase64,
 };

src/utils/common.ts

@@ -1,165 +1,87 @@
-import Cookies from 'js-cookie';
-import dayjs from 'dayjs';
-const CMS_LOCALE = 'cms-locale';
-const CMS_SITE_ID = 'cms-site-id';
-import { ElMessage } from 'element-plus';
-
-export const getCookieLocale = (): string | undefined => Cookies.get(CMS_LOCALE);
-export const setCookieLocale = (local: string): void => {
-  Cookies.set(CMS_LOCALE, local);
-};
-export const getSessionSiteId = (): number | null => {
-  const siteId = sessionStorage.getItem(CMS_SITE_ID);
-  if (siteId != null) {
-    return Number(siteId);
-  }
-  return null;
-};
-export const setSessionSiteId = (siteId: number): void => {
-  sessionStorage.setItem(CMS_SITE_ID, String(siteId));
-};
-export const removeSessionSiteId = (): void => {
-  sessionStorage.removeItem(CMS_SITE_ID);
-};
-
-export const getSiteHeaders = (): any => {
-  const siteId = getSessionSiteId();
-  return siteId != null ? { [CMS_SITE_ID]: siteId } : {};
+export const obj2propsList = (
+  obj: Record<string, string>,
+  toNumber = false
+) => {
+  return Object.keys(obj).map((key: any) => {
+    return {
+      label: (obj as Record<string, any>)[key],
+      value: toNumber ? +key : key,
+    };
+  });
 };
 
-export const pageSizes = [10, 20, 50, 100, 200, 400, 800];
-export const pageLayout = 'total, sizes, prev, pager, next, jumper';
-
-export const toParams = (params: Record<string, any>): any => {
-  const obj = { ...params };
-  Object.keys(obj).forEach((key) => {
-    if (obj[key] instanceof Array) {
-      const [first] = obj[key];
-      if (first instanceof Date) {
-        key.split(',').forEach((item, index) => {
-          obj[item] = obj[key][index];
-        });
-        delete obj[key];
-        return;
-      }
-      obj[key] = obj[key].join(',');
+const getChildrenIds = (
+  list: Record<string, any>[],
+  field = 'children',
+  initArg: string[] = []
+) => {
+  list.forEach((item) => {
+    if (item[field]) {
+      // 后台可能不会给children
+      initArg.push(...item[field].map((item: any) => item.id));
     }
+    getChildrenIds(item.children || [], field, initArg);
   });
-  return obj;
+  return initArg;
 };
 
-export const resetParams = (params: Record<string, any>): void => {
-  Object.keys(params).forEach((key) => {
-    delete params[key];
-  });
+export const getIdListByChildField = (
+  list: Record<string, any>[],
+  field?: string,
+  initArg: any[] = []
+): Array<string | number> => {
+  initArg = list.map((item) => item.id);
+  return getChildrenIds(list, field, initArg);
 };
 
 /**
- * 移动树形结构的列表，同一父节点下的子节点才能一起移动排序。
+ * 构造树型结构数据
+ * @param {*} data 数据源
+ * @param {*} id id字段 默认 'id'
+ * @param {*} parentId 父节点字段 默认 'parentId'
+ * @param {*} children 子节点字段 默认 'children'
  */
-export const moveTreeList = (selected: any[], data: any[], type: 'top' | 'up' | 'down' | 'bottom'): any[] => {
-  const { parentId } = selected[0];
-  const ids = selected
-    .filter((item) => item.parentId === parentId)
-    .sort((a, b) => a.order - b.order)
-    .map((item) => item.id);
-  const list = data.filter((item) => item.parentId === parentId).map((item) => item.id);
-  const top = 0;
-  const bottom = list.length;
-  let up = list.indexOf(ids[0]);
-  if (up <= top) {
-    up = top + 1;
-  }
-  let down = list.indexOf(ids[ids.length - 1]);
-  if (down >= bottom) {
-    down = bottom - 1;
-  }
-  for (let i = 0, len = ids.length; i < len; i += 1) {
-    const index = list.indexOf(ids[i]);
-    const [deleted] = list.splice(index, 1);
-    if (type === 'top') {
-      list.splice(top + i, 0, deleted);
-    } else if (type === 'bottom') {
-      list.splice(bottom, 0, deleted);
-    } else if (type === 'up') {
-      list.splice(up - 1 + i, 0, deleted);
-    } else if (type === 'down') {
-      list.splice(down + 1, 0, deleted);
-    }
-  }
-  return list;
-};
+export const handleTree = (
+  data: any[],
+  id?: string,
+  parentId?: string,
+  children?: string
+) => {
+  const config = {
+    id: id || 'id',
+    parentId: parentId || 'parentId',
+    childrenList: children || 'children',
+  };
 
-/**
- * 移动普通列表
- */
-export const moveList = (selected: any[], list: any[], type: 'top' | 'up' | 'down' | 'bottom'): any[] => {
-  selected.sort((a, b) => a.order - b.order);
-  const top = 0;
-  const bottom = list.length;
-  let up = list.indexOf(selected[0]);
-  if (up <= top) up = top + 1;
-  let down = list.indexOf(selected[selected.length - 1]);
-  if (down >= bottom) down = bottom - 1;
-  for (let i = 0, len = selected.length; i < len; i += 1) {
-    const index = list.indexOf(selected[i]);
-    const [deleted] = list.splice(index, 1);
-    if (type === 'top') {
-      list.splice(top + i, 0, deleted);
-    } else if (type === 'bottom') {
-      list.splice(bottom, 0, deleted);
-    } else if (type === 'up') {
-      list.splice(up - 1 + i, 0, deleted);
-    } else if (type === 'down') {
-      list.splice(down + 1, 0, deleted);
+  const childrenListMap: any = {};
+  const nodeIds: any = {};
+  const tree: any[] = [];
+  data.forEach((d) => {
+    const parentId = d[config.parentId];
+    if (childrenListMap[parentId] == null) {
+      childrenListMap[parentId] = [];
     }
-  }
-  return list;
-};
-
-export const isExternalPath = (path: string): boolean => {
-  return /^(https?:|mailto:|tel:)/.test(path);
-};
-
-export const formatDuration = (duration?: number): string => {
-  if (duration == null) {
-    return '';
-  }
-  const hours = Math.floor(duration / 3600);
-  const minutes = Math.floor((duration - hours * 3600) / 60);
-  const seconds = duration - hours * 3600 - minutes * 60;
-  let str = '';
-  if (hours > 0) {
-    str = hours + ':';
-  }
-  if (minutes < 10) {
-    str += '0' + minutes + ':';
-  } else {
-    str += minutes + ':';
-  }
-  if (seconds < 10) {
-    str += '0' + seconds;
-  } else {
-    str += seconds;
-  }
-  return str;
-};
+    nodeIds[d[config.id]] = d;
+    childrenListMap[parentId].push(d);
+  });
 
-export const dateFormatter = (date: string | null) => {
-  if (!date) return '-';
-  if (date.includes('Z')) {
-    const currentDate = date.replace(new RegExp('T', 'g'), ' ').replace(new RegExp('Z'), '');
-    return dayjs(currentDate).format('YYYY-MM-DD HH:mm');
-  }
-  return dayjs(date).format('YYYY-MM-DD HH:mm');
-};
+  data.forEach((d) => {
+    const parentId = d[config.parentId];
+    if (nodeIds[parentId] == null) {
+      tree.push(d);
+    }
+  });
 
-export const openImage = (img: string | string[] | unknown) => {
-  if (typeof img === 'string') {
-    window.open(img);
-  } else if (Array.isArray(img) && img.length > 0) {
-    img.forEach((item) => window.open(item.url));
-  } else {
-    ElMessage.success('无可查看的文件');
+  tree.forEach((t) => {
+    adaptToChildrenList(t);
+  });
+  function adaptToChildrenList(t: any) {
+    if (childrenListMap[t[config.id]] != null) {
+      t[config.childrenList] = childrenListMap[t[config.id]];
+    }
+    if (t[config.childrenList]) {
+      t[config.childrenList].forEach((c: any) => adaptToChildrenList(c));
+    }
   }
+  return tree;
 };

src/views/compositeSearch/inwardFlightInquiry/index.vue

@@ -7,24 +7,26 @@
 -->
 
 <template>
-  <CrudTable
-    :api-obj="ApiObj"
-    :search-config="searchConfig"
-    :search-form="searchForm"
-    :columns="columns"
-    :show-details="false"
-    :show-add="false"
-    :show-edit="false"
-    :show-del="false"
-    :dialog-form-config="dialogConfig"
-    :dialog-form-rules="dialogFormRules"
-  >
-    <template #operate-cell="{ record }">
-      <a-button type="text" shape="round" @click="toDetail(record)">
-        详细流程
-      </a-button>
-    </template>
-  </CrudTable>
+  <div class="crud-table__wrapper">
+    <CrudTable
+      :api-obj="ApiObj"
+      :search-config="searchConfig"
+      :search-form="searchForm"
+      :columns="columns"
+      :show-details="false"
+      :show-add="false"
+      :show-edit="false"
+      :show-del="false"
+      :dialog-form-config="dialogConfig"
+      :dialog-form-rules="dialogFormRules"
+    >
+      <template #operate-cell="{ record }">
+        <a-button type="text" shape="round" @click="toDetail(record)">
+          详细流程
+        </a-button>
+      </template>
+    </CrudTable>
+  </div>
 
   <a-modal
     v-model:visible="dictItemDialogVisible"
@@ -284,6 +286,6 @@ const toDetail = (row: any) => {
 <script lang="ts">
 export default {
   // eslint-disable-next-line vue/component-definition-name-casing
-  name: 'waybillFollow',
+  name: 'inwardFlightInquiry',
 };
 </script>

src/views/compositeSearch/inwardFlightInquiryHis/api/CurrentPageApi.ts

@@ -1,11 +0,0 @@
-import BaseApi from '@/api/base/BaseApi';
-
-class CurrentPageApi extends BaseApi {
-  constructor() {
-    super({
-      baseUrl: 'user/sysDict',
-    });
-  }
-}
-
-export default new CurrentPageApi();

src/views/compositeSearch/inwardFlightInquiryHis/index.vue

@@ -8,7 +8,7 @@
       <a-form-item field="post" label="航班日期">
         <a-date-picker v-model="form.post" style="width: 200px" />
       </a-form-item>
-      <a-form-item field="isRead">
+      <a-form-item field="type">
         <a-radio-group v-model="form.optionValue" :options="options">
         </a-radio-group>
       </a-form-item>
@@ -22,7 +22,49 @@
     <!--  分割线  -->
     <a-divider orientation="left">查询条件</a-divider>
     <!-- 复选框组 -->
-    <a-checkbox-group v-model="form.value1" :options="plainOptions" />
+    <a-checkbox-group
+      v-model="form.mawbNo"
+      direction="vertical"
+      :options="plainOptions.mawbNo"
+      max="1"
+    />
+    <a-checkbox-group
+      v-model="form.shouHuo"
+      direction="vertical"
+      :options="plainOptions.shouHuo"
+      max="1"
+    />
+    <a-checkbox-group
+      v-model="form.tiHuo"
+      direction="vertical"
+      :options="plainOptions.tiHuo"
+      max="1"
+    />
+    <a-checkbox-group
+      v-model="form.fangXin"
+      direction="vertical"
+      :options="plainOptions.fangXin"
+      max="1"
+    />
+    <a-checkbox-group
+      v-model="form.guoQi"
+      direction="vertical"
+      :options="plainOptions.guoQi"
+      max="1"
+    />
+    <a-checkbox-group
+      v-model="form.liHuo"
+      direction="vertical"
+      :options="plainOptions.liHuo"
+      max="1"
+    />
+    <a-checkbox-group
+      v-model="form.suDu"
+      max="1"
+      :options="plainOptions.suDu"
+    />
+    <a-checkbox-group v-model="form.leiXin" :options="plainOptions.leiXin" />
+    <a-divider orientation="left"></a-divider>
     <!--  表格  -->
     <a-table
       :columns="columns"
@@ -91,86 +133,83 @@ const scroll = reactive({
 /**
  * 表格列信息
  */
-const columns = useTableOperate(
-  useTableIndex([
-    {
-      title: '代理',
-      dataIndex: 'agtNo',
-      width: 90,
-    },
-    {
-      title: '航班信息',
-      dataIndex: 'hanBanXinXi',
-      width: 90,
-    },
-    {
-      title: '运单信息',
-      dataIndex: 'mawbNo',
-      width: 90,
-    },
-    {
-      title: '运单件重',
-      dataIndex: 'zhongLiang',
-      width: 90,
-    },
-    {
-      title: '始发地/国家',
-      dataIndex: 'start',
-      width: 110,
-    },
-    {
-      title: '目的地/国家',
-      dataIndex: 'end',
-      width: 110,
-    },
-    {
-      title: '收货时间',
-      dataIndex: 'shouHuoTime',
-      width: 90,
-    },
-    {
-      title: '取单时间',
-      dataIndex: 'quDanTime',
-      width: 90,
-    },
-    {
-      title: '提货时间',
-      dataIndex: 'getTime',
-      width: 90,
-    },
-    {
-      title: '航班落地时间',
-      dataIndex: 'luoDiTime',
-      width: 120,
-    },
-    {
-      title: '海关放行',
-      dataIndex: 'fangXing',
-      width: 90,
-    },
-    {
-      title: '品名',
-      dataIndex: 'productName',
-      width: 60,
-    },
-    {
-      title: '特殊货物代码',
-      dataIndex: 'type',
-      width: 130,
-    },
-    {
-      title: '破损',
-      dataIndex: 'wtDec',
-      width: 60,
-    },
-    {
-      title: '备注',
-      dataIndex: 'remark',
-      width: 60,
-    },
-  ]),
-  { width: 150, align: 'center' }
-);
+const columns = [
+  {
+    title: '代理',
+    dataIndex: 'agtNo',
+    width: 90,
+  },
+  {
+    title: '航班信息',
+    dataIndex: 'hanBanXinXi',
+    width: 90,
+  },
+  {
+    title: '运单信息',
+    dataIndex: 'mawbNo',
+    width: 90,
+  },
+  {
+    title: '运单件重',
+    dataIndex: 'zhongLiang',
+    width: 90,
+  },
+  {
+    title: '始发地/国家',
+    dataIndex: 'start',
+    width: 110,
+  },
+  {
+    title: '目的地/国家',
+    dataIndex: 'end',
+    width: 110,
+  },
+  {
+    title: '收货时间',
+    dataIndex: 'shouHuoTime',
+    width: 90,
+  },
+  {
+    title: '取单时间',
+    dataIndex: 'quDanTime',
+    width: 90,
+  },
+  {
+    title: '提货时间',
+    dataIndex: 'getTime',
+    width: 90,
+  },
+  {
+    title: '航班落地时间',
+    dataIndex: 'luoDiTime',
+    width: 120,
+  },
+  {
+    title: '海关放行',
+    dataIndex: 'fangXing',
+    width: 90,
+  },
+  {
+    title: '品名',
+    dataIndex: 'productName',
+    width: 60,
+  },
+  {
+    title: '特殊货物代码',
+    dataIndex: 'type',
+    width: 130,
+  },
+  {
+    title: '破损',
+    dataIndex: 'wtDec',
+    width: 60,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    width: 60,
+  },
+];
 /**
  * 分页参数 分十页
  */
@@ -191,6 +230,52 @@ const form = reactive<FormData>({
   post: '',
   optionValue: 1,
 });
+/**
+ * 复选框组
+ */
+const plainOptions = {
+  mawbNo: [
+    { label: '已配航班', value: 0 },
+    { label: '未配航班', value: 1 },
+  ],
+  shouHuo: [
+    { label: '已收货', value: 0 },
+    { label: '未收货', value: 1 },
+  ],
+  tiHuo: [
+    { label: '已提货', value: 0 },
+    { label: '未提货', value: 1 },
+  ],
+  fangXin: [
+    { label: '海关放行', value: 0 },
+    { label: '未放行', value: 1 },
+  ],
+  guoQi: [
+    { label: '过期货', value: 0 },
+    { label: '未过期', value: 1 },
+  ],
+  liHuo: [
+    { label: '已理货', value: 0 },
+    { label: '未理货', value: 1 },
+  ],
+  suDu: [
+    { label: '普货', value: 0 },
+    { label: '快货', value: 1 },
+    { label: '邮件', value: 2 },
+    { label: '中转', value: 3 },
+  ],
+  leiXin: [
+    { label: '鲜活易腐', value: 0 },
+    { label: '生鲜', value: 1 },
+    { label: '危险品', value: 2 },
+    { label: '锂电池', value: 3 },
+    { label: '冷藏冷冻', value: 4 },
+    { label: '高价值', value: 5 },
+    { label: '药品', value: 6 },
+    { label: '提前报关', value: 7 },
+  ],
+};
+
 /**
  * 单选按钮组
  */

src/views/departure/waybillManage/additionalDialog.vue

@@ -1,3 +1,4 @@
+<!--补录弹窗-->
 <template>
   <a-modal
     v-model:visible="dialogVisible"
@@ -16,7 +17,38 @@
         @submit="handleSubmit"
       >
         <a-row :gutter="16">
-          <template v-if="isMain || modelType === MODEL_TYPE.ADD">
+          <template
+            v-if="
+              isMain ||
+              modelType === MODEL_TYPE.ADD ||
+              modelType === MODEL_TYPE.MAIN_ADD
+            "
+          >
+            <a-col :span="6">
+              <a-form-item
+                field="asIcs2"
+                label-col-flex="120px"
+                label="是否为ICS2运单"
+                :rules="[{ required: true, message: '必选项不可为空!' }]"
+              >
+                <a-radio-group
+                  v-model="currentFrom.asIcs2"
+                  :options="plainOptions"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="6">
+              <a-form-item
+                field="asEawOrEap"
+                label-col-flex="120px"
+                label="是否EAW/EAP"
+              >
+                <a-radio-group
+                  v-model="currentFrom.asEawOrEap"
+                  :options="plainOptions"
+                />
+              </a-form-item>
+            </a-col>
             <a-col
               v-for="item in mainWaybillInfo"
               :key="item.field"
@@ -29,7 +61,13 @@
                 :hide-asterisk="isDetail || modelType === MODEL_TYPE.ADD"
                 :label-col-flex="LABEL_WIDTH"
               >
-                <p v-if="isDetail || !item.type || !isMain">
+                <p
+                  v-if="
+                    ((isDetail || !item.type || !isMain) &&
+                      modelType !== MODEL_TYPE.MAIN_ADD) ||
+                    item.field === 'mawbNo'
+                  "
+                >
                   {{ currentFrom.mawbDetail[item.field] || '--' }}
                 </p>
                 <a-input
@@ -94,6 +132,7 @@
             </a-col>
           </template>
           <template v-else>
+            <a-divider orientation="left"></a-divider>
             <a-col :span="24">
               <strong class="strong before-flag">航班信息</strong>
             </a-col>
@@ -113,6 +152,11 @@
                   currentFrom.mawbDetail[item.field] || '--'
                 }}</p>
                 <div v-else-if="item.field === 'fltNo'" class="flex">
+                  <!--                  <a-input
+                    v-model="currentFrom.mawbDetail.fltNo"
+                    allow-clear
+                    class="mr-4 w-24"
+                  />-->
                   <a-input
                     v-model="currentFrom.mawbDetail['fltNoPrefix']"
                     allow-clear
@@ -121,6 +165,7 @@
                   />
                   <a-input
                     v-model="currentFrom.mawbDetail['fltNoSuffix']"
+                    class="mr-4 w-24"
                     allow-clear
                     @input="commonUpperCase('mawbDetail', 'fltNoSuffix')"
                   />
@@ -141,6 +186,7 @@
                 />
               </a-form-item>
             </a-col>
+            <a-divider orientation="left"></a-divider>
             <a-col :span="24">
               <strong class="strong before-flag">费用</strong>
             </a-col>
@@ -170,6 +216,7 @@
                 ></a-select>
               </a-form-item>
             </a-col>
+            <a-divider orientation="left"></a-divider>
             <a-col :span="24">
               <strong class="strong before-flag">其他费用</strong>
             </a-col>
@@ -188,10 +235,12 @@
                   v-else
                   v-model="currentFrom.mawbPrice[item.field]"
                   allow-clear
+                  @blur="handleBlur(item.field)"
                   @input="commonUpperCase('mawbPrice', item.field)"
                 />
               </a-form-item>
             </a-col>
+            <a-divider orientation="left"></a-divider>
           </template>
 
           <a-col :span="24">
@@ -218,6 +267,7 @@
               />
             </a-form-item>
           </a-col>
+          <a-divider orientation="left"></a-divider>
           <a-col :span="24">
             <strong class="strong before-flag">收货人信息</strong>
           </a-col>
@@ -262,7 +312,7 @@
 </template>
 
 <script lang="ts" setup>
-import { toRefs } from 'vue';
+import { Ref, toRefs } from 'vue';
 import { WAYBILL_TYPE } from '@/constant/waybill';
 import { MODEL_TYPE } from '@/constant/base';
 import { Modal, Message } from '@arco-design/web-vue';
@@ -302,33 +352,74 @@ const LABEL_WIDTH = '100px';
 
 const { fromData, orderType, modelType } = toRefs(props);
 const dialogVisible = ref(false);
+/**
+ *  对话框表单
+ */
 const currentFrom = ref<any>({
   awbContact: {},
   mawbDetail: {},
   mawbPrice: {},
+  asIcs2: null,
+  asEawOrEap: 1,
 });
 const chgsList = ref([]);
 
+/**
+ * 查看运单详情
+ */
 const isDetail = computed(() => {
   return modelType.value === MODEL_TYPE.DETAIL;
 });
+/**
+ * ?可能是新增分运单或者分运单补录
+ */
 const isMain = computed(() => {
   return orderType.value === WAYBILL_TYPE.MAIN;
 });
 
-const title = computed(() => {
-  // eslint-disable-next-line no-nested-ternary
-  return isDetail.value
-    ? '运单详情'
-    : orderType.value === WAYBILL_TYPE.MAIN
-    ? '运单补录（主运单）'
-    : '运单补录（分运单）';
+// 对话框标题修改
+const title = computed((): string => {
+  if (isDetail.value) {
+    return '运单详情';
+  }
+  if (modelType.value === MODEL_TYPE.MAIN_ADD) {
+    return '新增运单(主运单)';
+  }
+  if (orderType.value === WAYBILL_TYPE.MAIN && !isDetail.value) {
+    return '运单补录（主运单）';
+  }
+  return '运单补录（分运单）';
 });
 
+/**
+ * 渲染费用项的表单控件数据
+ */
 const costInfo = computed(() => {
-  return getCostInfo(chgsList);
+  const tmp = getCostInfo(chgsList);
+  if (currentFrom.value.asIcs2 === 0) {
+    const hsCodeItem = tmp.find(
+      (item: { field: string }) => item.field === 'hsCode'
+    );
+    if (hsCodeItem) {
+      // 修改 hsCode 对象的 rules
+      hsCodeItem.rules = {
+        required: true,
+        message: '必填项不能为空',
+      };
+    }
+  } else {
+    const hsCodeItem = tmp.find((item) => item.field === 'hsCode');
+    if (hsCodeItem) {
+      // 修改 hsCode 对象的 rules
+      hsCodeItem.rules = { required: false, message: '' };
+    }
+  }
+  return tmp;
 });
 
+/**
+ * 初始化字典下拉框
+ */
 const initData = async () => {
   try {
     const dataList = await DictApi.chgsCode();
@@ -338,6 +429,10 @@ const initData = async () => {
   }
 };
 
+/**
+ * form表单提交方法
+ * @param e
+ */
 const handleSubmit = async (e: any) => {
   const { errors, values } = e;
   if (errors) return;
@@ -348,6 +443,28 @@ const handleSubmit = async (e: any) => {
   const params: any = {
     awbContact: currentFrom.value.awbContact,
   };
+  // 新增主运单
+  if (modelType?.value === MODEL_TYPE.MAIN_ADD) {
+    params.mawbPrice = currentFrom.value.mawbPrice;
+    params.mawbDetail = currentFrom.value.mawbDetail;
+    params.asIcs2 = currentFrom.value.asIcs2;
+    params.asEawOrEap = currentFrom.value.asEawOrEap;
+    console.log(JSON.stringify(params));
+    const res = await ApiObj.addMainWaybill(params);
+    if (res.code === 200) {
+      Message.success('新增主运单成功');
+      dialogVisible.value = false;
+      // 清空表单
+      currentFrom.value = {
+        awbContact: {},
+        mawbDetail: {},
+        mawbPrice: {},
+        asIcs2: null,
+        asEawOrEap: 1,
+      };
+    }
+    return;
+  }
   if (isMain.value) {
     params.mawbPrice = currentFrom.value.mawbPrice;
     params.mawbDetail = currentFrom.value.mawbDetail;
@@ -365,6 +482,9 @@ const handleSubmit = async (e: any) => {
   }
 };
 
+/**
+ * 补录运单
+ */
 const handleAdd = async () => {
   const params = {
     ...currentFrom.value.hawbDetail,
@@ -378,18 +498,82 @@ const handleAdd = async () => {
     dialogVisible.value = false;
   }
 };
-
+// 使用 watch 来监听 fltNoPrefix 和 fltNoSuffix 的变化，并更新 fltNo
+watch(
+  () =>
+    // eslint-disable-next-line no-nested-ternary
+    (currentFrom.value.mawbDetail.fltNoPrefix !== undefined
+      ? currentFrom.value.mawbDetail.fltNoPrefix
+      : '') +
+    (currentFrom.value.mawbDetail.fltNoSuffix !== undefined
+      ? currentFrom.value.mawbDetail.fltNoSuffix
+      : ''),
+  (newValue) => {
+    if (newValue === undefined || newValue === null) {
+      currentFrom.value.mawbDetail.fltNo = '';
+    } else {
+      currentFrom.value.mawbDetail.fltNo = newValue;
+    }
+  }
+);
+/**
+ * 大小写
+ * @param prefix
+ * @param suffix
+ */
 const commonUpperCase = (prefix: any, suffix: any) => {
   currentFrom.value[prefix][suffix] =
-    currentFrom.value[prefix][suffix]?.toLocaleUpperCase();
+    currentFrom.value[prefix][suffix].toLocaleUpperCase();
+};
+/**
+ * 打开新增主运单对话框
+ */
+const openNewMainDialog = (mawbNo: string): void => {
+  nextTick(() => {
+    // 清空表单
+    currentFrom.value = {
+      awbContact: {},
+      mawbDetail: {},
+      mawbPrice: {},
+      asIcs2: null,
+      asEawOrEap: 1,
+    };
+    // 设置默认值
+    currentFrom.value.mawbPrice.ccWtChg = 0;
+    currentFrom.value.mawbPrice.ccVlChg = 0;
+    currentFrom.value.mawbPrice.ccTxChg = 0;
+    currentFrom.value.mawbPrice.ccAgChg = 0;
+    currentFrom.value.mawbPrice.CrChg = 0;
+    currentFrom.value.mawbDetail.mawbNo = mawbNo;
+    currentFrom.value.mawbPrice.wtValChgs = 'pp';
+    dialogVisible.value = true;
+  });
 };
 
 const openDialog = () => {
   nextTick(() => {
     currentFrom.value.awbContact = { ...fromData.value.awbContact };
     if (isMain.value) {
-      currentFrom.value.mawbPrice = { ...fromData.value.mawbPrice };
       currentFrom.value.mawbDetail = { ...fromData.value.mawbDetail };
+      currentFrom.value.mawbDetail = { ...fromData.value.mawbDetail };
+
+      // 主运单补录
+      currentFrom.value.mawbPrice.ccWtChg = setZero(
+        currentFrom.value.mawbPrice.ccWtChg
+      );
+      currentFrom.value.mawbPrice.ccVlChg = setZero(
+        currentFrom.value.mawbPrice.ccVlChg
+      );
+      currentFrom.value.mawbPrice.ccTxChg = setZero(
+        currentFrom.value.mawbPrice.ccTxChg
+      );
+      currentFrom.value.mawbPrice.ccAgChg = setZero(
+        currentFrom.value.mawbPrice.ccAgChg
+      );
+      currentFrom.value.mawbPrice.CrChg = setZero(
+        currentFrom.value.mawbPrice.CrChg
+      );
+
       const fltNo = currentFrom.value.mawbDetail.fltNo || '';
       const rateItemList = currentFrom.value.mawbPrice.rateItemList || [];
       if (fltNo) {
@@ -414,11 +598,84 @@ const openDialog = () => {
     console.log(currentFrom.value);
   });
 };
-defineExpose({ openDialog });
+
+/**
+ * 将其它费用默认值设置为0
+ * @param tmp
+ */
+const setZero = (tmp: any): string => {
+  if (tmp === '' || tmp === null || tmp === undefined) {
+    return '0';
+  }
+  return tmp;
+};
+/**
+ * 暴露子组件方法给父组件
+ */
+defineExpose({ openDialog, openNewMainDialog });
 
 onMounted(() => {
   initData();
 });
+/**
+ * 单选按钮组
+ */
+const plainOptions = reactive([
+  { label: '是', value: 0 },
+  { label: '否', value: 1 },
+]);
+
+// 使用 watch 监听 currentForm.asIcs2 的变化
+watch(
+  () => currentFrom.value.asIcs2,
+  (newValue, oldValue) => {
+    console.log('asIcs2 属性变化了:', newValue);
+
+    if (newValue === 0) {
+      nextTick(() => {
+        // 使用代码动态添加 rules , find才能使页面进行渲染,遍历插入的无法生效
+        const cnePostNoItem = gooderInfo.find(
+          (item) => item.field === 'cnePostNo'
+        );
+        if (cnePostNoItem) {
+          cnePostNoItem.rules = { required: true, message: '必填项不可为空!' };
+        }
+        const shpPostNoItem = shipperInfo.find(
+          (item) => item.field === 'shpPostNo'
+        );
+        if (shpPostNoItem) {
+          shpPostNoItem.rules = { required: true, message: '必填项不可为空!' };
+        }
+      });
+    } else {
+      nextTick(() => {
+        gooderInfo.forEach((item: any) => {
+          if (item.field === 'cnePostNo') {
+            item.rules = [];
+          }
+        });
+        shipperInfo.forEach((item: any) => {
+          if (item.field === 'shpPostNo') {
+            item.rules = [];
+          }
+        });
+      });
+    }
+  }
+);
+
+// 其他费用里的几项 失去焦点的时候,如果是空那么设置为0
+const handleBlur = (tmp: string) => {
+  nextTick(() => {
+    if (
+      currentFrom.value.mawbPrice[tmp] === undefined ||
+      currentFrom.value.mawbPrice[tmp] === null ||
+      currentFrom.value.mawbPrice[tmp] === ''
+    ) {
+      currentFrom.value.mawbPrice[tmp] = 0;
+    }
+  });
+};
 </script>
 
 <style lang="less" scoped>

src/views/departure/waybillManage/api/CurrentPageApi.ts

@@ -13,6 +13,14 @@ class CurrentPageApi extends BaseApi {
     return request.post(`${this.baseUrl}/list`, data);
   }
 
+  /**
+   * 新增主运单
+   * @param data
+   */
+  addMainWaybill(data: any): Promise<ResponseData<any>> {
+    return request.post(`${this.baseUrl}/insert`, data);
+  }
+
   get(data: any): Promise<ResponseData<any>> {
     return request.post(`${this.baseUrl}/info`, data);
   }

src/views/departure/waybillManage/functions/data.ts

@@ -1,5 +1,5 @@
 import { useUserStore } from '@/store';
-import { ComputedRef, Ref } from 'vue';
+import { ComputedRef, Ref, reactive } from 'vue';
 import { validatorNum, validatorNotReqNum } from '@/regexp';
 
 const userStore = useUserStore();
@@ -563,7 +563,7 @@ export const mainWaybillInfo = [
   },
 ];
 
-export const haWaybillInfo = [
+export const haWaybillInfo = reactive<ShipperInfoItem[]>([
   {
     type: 'input',
     label: '分单号',
@@ -644,7 +644,7 @@ export const haWaybillInfo = [
     clo: 24,
     editFlag: true,
   },
-];
+]);
 
 export const hawbMainWaybillInfo = [
   { label: '主运单号', field: 'mawbNo', clo: 6 },
@@ -680,7 +680,7 @@ export const flightInfo = [
   {
     label: '预配航班',
     field: 'fltNo',
-    clo: 6,
+    clo: 12,
     rules: {
       required: true,
       message: '必填项不可为空',
@@ -751,13 +751,13 @@ export const getCostInfo = (chgsList: Ref<string[]>) => {
   ];
 };
 
-export const otherInfo = [
+export const otherInfo = reactive<ShipperInfoItem[]>([
   {
     label: '运费',
     field: 'ccWtChg',
     clo: 6,
     rules: {
-      required: true,
+      required: false,
       message: '必填项不可为空',
     },
   },
@@ -766,7 +766,7 @@ export const otherInfo = [
     field: 'ccVlChg',
     clo: 6,
     rules: {
-      required: true,
+      required: false,
       message: '必填项不可为空',
     },
   },
@@ -775,7 +775,7 @@ export const otherInfo = [
     field: 'ccTxChg',
     clo: 6,
     rules: {
-      required: true,
+      required: false,
       message: '必填项不可为空',
     },
   },
@@ -784,7 +784,7 @@ export const otherInfo = [
     field: 'ccAgChg',
     clo: 6,
     rules: {
-      required: true,
+      required: false,
       message: '必填项不可为空',
     },
   },
@@ -793,13 +793,13 @@ export const otherInfo = [
     field: 'CrChg',
     clo: 6,
     rules: {
-      required: true,
+      required: false,
       message: '必填项不可为空',
     },
   },
-];
+]);
 
-export const gooderInfo = [
+export const gooderInfo = reactive<ShipperInfoItem[]>([
   {
     'label': '收货人名称',
     'field': 'cneName',
@@ -843,9 +843,9 @@ export const gooderInfo = [
     'clo': 6,
     'max-length': 50,
   },
-];
+]);
 
-export const shipperInfo = [
+export const shipperInfo = reactive<ShipperInfoItem[]>([
   {
     'label': '发货人名称',
     'field': 'shpName',
@@ -889,4 +889,19 @@ export const shipperInfo = [
     'clo': 6,
     'max-length': 50,
   },
-];
+]);
+
+// 1. 定义字段的类型接口
+interface ShipperInfoItem {
+  'type'?: string | undefined;
+  'label': string; // 字段标签
+  'field': string; // 字段名称
+  'editFlag'?: boolean | undefined | null;
+  'clo': number; // 列宽
+  'max-length'?: number; // 最大长度，可能是可选的
+  'placeholder'?: string; // 提示文字，可能是可选的
+  'rules'?: {
+    required: boolean; // 是否必填
+    message?: string; // 校验失败时的提示信息
+  };
+}

src/views/departure/waybillManage/index.vue

@@ -1,4 +1,7 @@
 <template>
+  <div class="table-search">
+    <a-button class="common-button" @click="showSearchOrder"> 新增 </a-button>
+  </div>
   <CrudTable
     ref="crudTableRef"
     :api-obj="ApiObj"
@@ -87,6 +90,52 @@
     :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>
@@ -97,20 +146,21 @@ 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 additionalDialog from './additionalDialog.vue';
 import { columns } from './functions/table';
 import { setFiltrateData } from './functions/data';
+import dataList from './res.json';
 
 const additionalDialogRef = ref<any>(null);
 const waybillStatusMap = ref<string[]>([]);
-const waybillStore = useWaybillStore();
+useWaybillStore();
 const userStore = useUserStore();
 const crudTableRef = ref();
 
 onMounted(async () => {
-  const res = await DictApi.wbcStatus();
+  const res = await DictApi.wbcStatus(); // 原来代码
   waybillStatusMap.value = res.data;
 });
 const timeRange = [
@@ -131,17 +181,32 @@ 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
 ) => {
-  const res = await ApiObj.get(data);
-  fromData.value = res.data ?? {};
+  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]);
   // });
-  modelType.value = type;
+
   // 目前只有分单有新增
   orderType.value =
     data?.hawbNo || type === MODEL_TYPE.ADD
@@ -159,7 +224,8 @@ const showOrEditWaybill = async (
 const printReport = async (data: Record<string, any>) => {
   const { agtNo, mawbId } = data;
   try {
-    const res = await ApiObj.printReport({
+    console.log('---导出');
+    await ApiObj.printReport({
       agtNo,
       mawbId,
     });
@@ -169,7 +235,7 @@ const printReport = async (data: Record<string, any>) => {
 };
 
 const printConfirm = async (data: Record<string, any>) => {
-  const { agtNo, mawbId } = data;
+  const { mawbId } = data;
   try {
     const res = await ApiObj.printConfirm({
       id: mawbId,
@@ -178,4 +244,104 @@ const printConfirm = async (data: Record<string, any>) => {
     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>

src/views/departure/waybillManage/res.json

@@ -0,0 +1,57 @@
+{
+  "code": 200,
+  "message": "操作成功",
+  "data": {
+    "mawbDetail": {
+      "mawbId": 79438,
+      "mawbNo": "880-38722773",
+      "agtNo": "LWL",
+      "crrNo": "HU",
+      "goodsType": "普货",
+      "wbcStatus": "N",
+      "pcsDec": 6,
+      "wtDec": 45.0,
+      "wtChg": 45.0,
+      "goodsName": "印刷电路板",
+      "dimSizeList": [],
+      "volumeSum": 0.0,
+      "volumeAvg": 0.0,
+      "fltNo": "HU7704",
+      "fltDate": "2024-11-30",
+      "orgnNo": "SZX",
+      "destNo": "MEX",
+      "rtgTo1": "MEX",
+      "rtgBy1": "HU",
+      "volDec": 0.0,
+      "dataFlag": "M"
+    },
+    "awbContact": {
+      "mawbNo": "880-38722773",
+      "agtNo": "LWL"
+    },
+    "mawbPrice": {
+      "mawbNo": "880-38722773",
+      "agtNo": "LWL",
+      "curNo": "人民币",
+      "wtValChgs": "PP",
+      "othChgs": "PP",
+      "crgDecVal": "无价值",
+      "cusDecVal": "无价值",
+      "insAmt": "XXX",
+      "hsCode": "",
+      "categoryCode": "Q",
+      "ccWtChg":0,
+      "ccVlChg":null,
+      "ccTxChg":20,
+      "ccAgChg": "",
+      "CrChg":10,
+      "rateItemList": [
+        {
+          "srlNo": 1,
+          "pcs": 6,
+          "wtGrs": 45.0
+        }
+      ]
+    }
+  }
+}