1 năm trước cách đây · 1883a1c04c
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -0,0 +1,16 @@
 
															+/* eslint-env node */
														
 
															+require('@rushstack/eslint-patch/modern-module-resolution')
														
 
															+
														
 
															+module.exports = {
														
 
															+  root: true,
														
 
															+  extends: [
														
 
															+    'plugin:vue/vue3-essential',
														
 
															+    'eslint:recommended',
														
 
															+    '@vue/eslint-config-typescript',
														
 
															+    '@vue/eslint-config-prettier/skip-formatting'
														
 
															+  ],
														
 
															+  parser: 'vue-eslint-parser',
														
 
															+  parserOptions: {
														
 
															+    ecmaVersion: 'latest'
														
 
															+  }
														
 
															+}
														
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,33 @@
 
															+# Logs
														
 
															+logs
														
 
															+*.log
														
 
															+npm-debug.log*
														
 
															+yarn-debug.log*
														
 
															+yarn-error.log*
														
 
															+pnpm-debug.log*
														
 
															+lerna-debug.log*
														
 
															+
														
 
															+node_modules
														
 
															+.DS_Store
														
 
															+dist
														
 
															+dist-ssr
														
 
															+coverage
														
 
															+*.local
														
 
															+components.d.ts
														
 
															+package-lock.json
														
 
															+pnpm-lock.yaml
														
 
															+
														
 
															+/cypress/videos/
														
 
															+/cypress/screenshots/
														
 
															+
														
 
															+# Editor directories and files
														
 
															+.vscode/*
														
 
															+!.vscode/extensions.json
														
 
															+.idea
														
 
															+*.suo
														
 
															+*.ntvs*
														
 
															+*.njsproj
														
 
															+*.sln
														
 
															+*.sw?
														
 
															+
														
 
															+*.tsbuildinfo
														
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -0,0 +1,8 @@
 
															+{
														
 
															+  "$schema": "https://json.schemastore.org/prettierrc",
														
 
															+  "semi": false,
														
 
															+  "tabWidth": 2,
														
 
															+  "singleQuote": true,
														
 
															+  "printWidth": 100,
														
 
															+  "trailingComma": "none"
														
 
															+}
														
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,7 @@
 
															+{
														
 
															+  "recommendations": [
														
 
															+    "Vue.volar",
														
 
															+    "dbaeumer.vscode-eslint",
														
 
															+    "esbenp.prettier-vscode"
														
 
															+  ]
														
 
															+}
														
--- a/README.md
+++ b/README.md
@@ -0,0 +1,39 @@
 
															+# online-optmize
														
 
															+
														
 
															+This template should help get you started developing with Vue 3 in Vite.
														
 
															+
														
 
															+## Recommended IDE Setup
														
 
															+
														
 
															+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
														
 
															+
														
 
															+## Type Support for `.vue` Imports in TS
														
 
															+
														
 
															+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
														
 
															+
														
 
															+## Customize configuration
														
 
															+
														
 
															+See [Vite Configuration Reference](https://vitejs.dev/config/).
														
 
															+
														
 
															+## Project Setup
														
 
															+
														
 
															+```sh
														
 
															+pnpm install
														
 
															+```
														
 
															+
														
 
															+### Compile and Hot-Reload for Development
														
 
															+
														
 
															+```sh
														
 
															+pnpm dev
														
 
															+```
														
 
															+
														
 
															+### Type-Check, Compile and Minify for Production
														
 
															+
														
 
															+```sh
														
 
															+pnpm build
														
 
															+```
														
 
															+
														
 
															+### Lint with [ESLint](https://eslint.org/)
														
 
															+
														
 
															+```sh
														
 
															+pnpm lint
														
 
															+```
														
--- a/env.d.ts
+++ b/env.d.ts
@@ -0,0 +1 @@
 
															+/// <reference types="vite/client" />
														
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
 
															+<!doctype html>
														
 
															+<html lang="en">
														
 
															+  <head>
														
 
															+    <meta charset="UTF-8" />
														
 
															+    <link rel="icon" href="/favicon.ico" />
														
 
															+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
														
 
															+    <title>online</title>
														
 
															+  </head>
														
 
															+  <body>
														
 
															+    <div id="app"></div>
														
 
															+    <script type="module" src="/src/main.ts"></script>
														
 
															+  </body>
														
 
															+</html>
														
--- a/package.json
+++ b/package.json
@@ -0,0 +1,68 @@
 
															+{
														
 
															+  "name": "online-optmize",
														
 
															+  "version": "0.0.0",
														
 
															+  "private": true,
														
 
															+  "type": "module",
														
 
															+  "scripts": {
														
 
															+    "dev": "vite",
														
 
															+    "build": "run-p type-check \"build-only {@}\" --",
														
 
															+    "preview": "vite preview",
														
 
															+    "build-only": "vite build",
														
 
															+    "type-check": "vue-tsc --build --force",
														
 
															+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
														
 
															+    "format": "prettier --write src/"
														
 
															+  },
														
 
															+  "dependencies": {
														
 
															+    "@element-plus/icons-vue": "^2.3.1",
														
 
															+    "@wangeditor/editor": "^5.1.23",
														
 
															+    "@wangeditor/editor-for-vue": "^5.1.12",
														
 
															+    "ant-design-vue": "^4.2.3",
														
 
															+    "axios": "^1.7.5",
														
 
															+    "dayjs": "^1.11.13",
														
 
															+    "echarts": "^5.5.1",
														
 
															+    "element-plus": "^2.8.1",
														
 
															+    "exceljs": "^4.4.0",
														
 
															+    "js-md5": "^0.8.3",
														
 
															+    "lodash": "^4.17.21",
														
 
															+    "mitt": "^3.0.1",
														
 
															+    "moment": "^2.30.1",
														
 
															+    "pinia": "^2.2.2",
														
 
															+    "vue": "^3.4.29",
														
 
															+    "vue-draggable-plus": "^0.5.3",
														
 
															+    "vue-router": "^4.3.3",
														
 
															+    "vuedraggable": "^2.24.3",
														
 
															+    "vxe-pc-ui": "^4.1.7",
														
 
															+    "vxe-table": "^4.7.70",
														
 
															+    "vxe-table-plugin-export-xlsx": "^4.0.5",
														
 
															+    "xe-clipboard": "^1.10.2"
														
 
															+  },
														
 
															+  "devDependencies": {
														
 
															+    "@rushstack/eslint-patch": "^1.8.0",
														
 
															+    "@tsconfig/node20": "^20.1.4",
														
 
															+    "@types/lodash": "^4.17.7",
														
 
															+    "@types/node": "^20.14.5",
														
 
															+    "@vitejs/plugin-vue": "^5.0.5",
														
 
															+    "@vue/eslint-config-prettier": "^9.0.0",
														
 
															+    "@vue/eslint-config-typescript": "^13.0.0",
														
 
															+    "@vue/tsconfig": "^0.5.1",
														
 
															+    "autoprefixer": "^10.4.20",
														
 
															+    "eslint": "^8.57.0",
														
 
															+    "eslint-plugin-vue": "^9.23.0",
														
 
															+    "npm-run-all2": "^6.2.0",
														
 
															+    "postcss": "^8.4.41",
														
 
															+    "postcss-loader": "^8.1.1",
														
 
															+    "prettier": "^3.2.5",
														
 
															+    "sass": "^1.77.8",
														
 
															+    "typescript": "~5.4.0",
														
 
															+    "unplugin-auto-import": "^0.18.2",
														
 
															+    "unplugin-icons": "^0.19.2",
														
 
															+    "unplugin-vue-components": "^0.27.4",
														
 
															+    "vite": "^5.3.1",
														
 
															+    "vue-tsc": "^2.0.21"
														
 
															+  },
														
 
															+  "postcss": {
														
 
															+    "plugins": {
														
 
															+      "autoprefixer": {}
														
 
															+    }
														
 
															+  }
														
 
															+}
														
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,10 @@
 
															+<script setup lang="ts">
														
 
															+import { RouterLink, RouterView } from 'vue-router'
														
 
															+import HelloWorld from './components/HelloWorld.vue'
														
 
															+</script>
														
 
															+
														
 
															+<template>
														
 
															+  <RouterView />
														
 
															+</template>
														
 
															+
														
 
															+<style scoped></style>
														
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -0,0 +1,22 @@
 
															+import * as booking from './module/booking'
														
 
															+import * as tracking from './module/tracking'
														
 
															+import * as common from './module/common'
														
 
															+/**
														
 
															+ * api 对象接口定义
														
 
															+ */
														
 
															+function generateApiMap(maps: any) {
														
 
															+  const methodMap: any = {}
														
 
															+  for (const key in maps) {
														
 
															+    methodMap[key] = maps[key]
														
 
															+  }
														
 
															+  return methodMap
														
 
															+}
														
 
															+
														
 
															+const apis = generateApiMap({
														
 
															+  ...booking,
														
 
															+  ...tracking,
														
 
															+  ...common
														
 
															+})
														
 
															+export default {
														
 
															+  ...apis // 取出所有可遍历属性赋值在新的对象上
														
 
															+}
														
--- a/src/api/module/booking.ts
+++ b/src/api/module/booking.ts
@@ -0,0 +1,92 @@
 
															+import HttpAxios from '@/utils/axios'
														
 
															+
														
 
															+const baseUrl = 'http://localhost/api/Customer_Service_Online/main_new_version.php'
														
 
															+
														
 
															+/**
														
 
															+ * Booking首页表格列数据
														
 
															+ */
														
 
															+export const getBookingTableColumns = (params: any, config: any) => {
														
 
															+  return HttpAxios.get(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'ocean_booking',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+/**
														
 
															+ * 获取Booking首页表格数据
														
 
															+ */
														
 
															+export const getBookingTableData = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'ocean_booking',
														
 
															+      operate: 'search',
														
 
															+      _ntype: 'ocean_booking',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+/**
														
 
															+ * 获取Booking详情页数据
														
 
															+ */
														
 
															+export const getBookingDetail = (params: any, config: any) => {
														
 
															+  return HttpAxios.get(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'ocean_booking',
														
 
															+      operate: 'detail',
														
 
															+      _schemas: 'public',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+/**
														
 
															+ * 获取Booking详情页发送邮件
														
 
															+ */
														
 
															+export const bookingSendEmail = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'ocean_booking',
														
 
															+      operate: 'save_communication',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+/**
														
 
															+ * 获取自动完成列表
														
 
															+ */
														
 
															+export const getMoreFiltersData = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'ajax',
														
 
															+      operate: 'autody',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+/**
														
 
															+ * 获取table自动完成列表
														
 
															+ */
														
 
															+export const getMoreFiltersTableData = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'ajax',
														
 
															+      operate: 'autoport',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
--- a/src/api/module/common.ts
+++ b/src/api/module/common.ts
@@ -0,0 +1,26 @@
 
															+import HttpAxios from '@/utils/axios'
														
 
															+
														
 
															+const baseUrl = 'http://localhost/api/Customer_Service_Online/main_new_version.php'
														
 
															+
														
 
															+/**
														
 
															+ * 获取表格定制列功能数据
														
 
															+ */
														
 
															+export const getTableSettingColumns = (params: any, config: any) => {
														
 
															+  return HttpAxios.get(`${baseUrl}`, params, config)
														
 
															+}
														
 
															+
														
 
															+/**
														
 
															+ * 保存表格定制列数据
														
 
															+ */
														
 
															+export const saveTableSettingColumns = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'ajax',
														
 
															+      operate: 'save_setting_display',
														
 
															+      model_name: 'Booking_Search',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
--- a/src/api/module/tracking.ts
+++ b/src/api/module/tracking.ts
@@ -0,0 +1,49 @@
 
															+import HttpAxios from '@/utils/axios'
														
 
															+
														
 
															+const baseUrl = 'http://localhost/api/Customer_Service_Online/main_new_version.php'
														
 
															+
														
 
															+/**
														
 
															+ * Tracking首页表格列数据
														
 
															+ */
														
 
															+export const getTrackingTableColumns = (params: any, config: any) => {
														
 
															+  return HttpAxios.get(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'ocean_order',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+/**
														
 
															+ * 获取Tracking首页表格数据
														
 
															+ */
														
 
															+export const getTrackingTableData = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'ocean_order',
														
 
															+      operate: 'search',
														
 
															+      _ntype: 'ocean_order',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+/**
														
 
															+ * 获取Tracking详情页数据
														
 
															+ */
														
 
															+export const getTrackingDetail = (params: any, config: any) => {
														
 
															+  return HttpAxios.get(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'ocean_order',
														
 
															+      operate: 'detail',
														
 
															+      _schemas: 'public',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -0,0 +1,74 @@
 
															+/* color palette from <https://github.com/vuejs/theme> */
														
 
															+:root {
														
 
															+  --vt-c-white: #ffffff;
														
 
															+  --vt-c-white-soft: #f8f8f8;
														
 
															+  --vt-c-white-mute: #f2f2f2;
														
 
															+
														
 
															+  --vt-c-black: #181818;
														
 
															+  --vt-c-black-soft: #222222;
														
 
															+  --vt-c-black-mute: #282828;
														
 
															+
														
 
															+  --vt-c-indigo: #2c3e50;
														
 
															+
														
 
															+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
														
 
															+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
														
 
															+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
														
 
															+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
														
 
															+
														
 
															+  --vt-c-text-light-1: var(--vt-c-indigo);
														
 
															+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
														
 
															+  --vt-c-text-dark-1: var(--vt-c-white);
														
 
															+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
														
 
															+}
														
 
															+
														
 
															+/* semantic color variables for this project */
														
 
															+:root {
														
 
															+  --color-background: var(--vt-c-white);
														
 
															+  --color-background-soft: var(--vt-c-white-soft);
														
 
															+  --color-background-mute: var(--vt-c-white-mute);
														
 
															+
														
 
															+  --color-border: var(--vt-c-divider-light-2);
														
 
															+  --color-border-hover: var(--vt-c-divider-light-1);
														
 
															+
														
 
															+  --color-heading: var(--vt-c-text-light-1);
														
 
															+  --color-text: var(--vt-c-text-light-1);
														
 
															+
														
 
															+  --section-gap: 160px;
														
 
															+}
														
 
															+
														
 
															+@media (prefers-color-scheme: dark) {
														
 
															+  :root {
														
 
															+    --color-background: var(--vt-c-black);
														
 
															+    --color-background-soft: var(--vt-c-black-soft);
														
 
															+    --color-background-mute: var(--vt-c-black-mute);
														
 
															+
														
 
															+    --color-border: var(--vt-c-divider-dark-2);
														
 
															+    --color-border-hover: var(--vt-c-divider-dark-1);
														
 
															+
														
 
															+    --color-heading: var(--vt-c-text-dark-1);
														
 
															+    --color-text: var(--vt-c-text-dark-2);
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+*,
														
 
															+*::before,
														
 
															+*::after {
														
 
															+  box-sizing: border-box;
														
 
															+  margin: 0;
														
 
															+  font-weight: normal;
														
 
															+}
														
 
															+
														
 
															+body {
														
 
															+  min-height: 100vh;
														
 
															+  overflow-x: hidden;
														
 
															+  color: var(--color-text);
														
 
															+  background: var(--color-background);
														
 
															+  transition:
														
 
															+    color 0.5s,
														
 
															+    background-color 0.5s;
														
 
															+  line-height: 1.6;
														
 
															+
														
 
															+  text-rendering: optimizeLegibility;
														
 
															+  -webkit-font-smoothing: antialiased;
														
 
															+  -moz-osx-font-smoothing: grayscale;
														
 
															+}
														
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@@ -0,0 +1 @@
 
															+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
														
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -0,0 +1,19 @@
 
															+@import './base.css';
														
 
															+
														
 
															+#app {
														
 
															+  max-width: 100%;
														
 
															+  height: 100%;
														
 
															+  font-weight: normal;
														
 
															+}
														
 
															+
														
 
															+/* scroll bar */
														
 
															+::-webkit-scrollbar {
														
 
															+  width: 8px;
														
 
															+  height: 8px;
														
 
															+  /* background-color: white; */
														
 
															+}
														
 
															+::-webkit-scrollbar-thumb {
														
 
															+  background-color: #dddee0;
														
 
															+  border-radius: 20px;
														
 
															+  box-shadow: inset 0 0 0 white;
														
 
															+}
														
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -0,0 +1,69 @@
 
															+/* eslint-disable */
														
 
															+/* prettier-ignore */
														
 
															+// @ts-nocheck
														
 
															+// noinspection JSUnusedGlobalSymbols
														
 
															+// Generated by unplugin-auto-import
														
 
															+export {}
														
 
															+declare global {
														
 
															+  const $api: typeof import('@/api/index')['default']
														
 
															+  const EffectScope: typeof import('vue')['EffectScope']
														
 
															+  const ElMessage: typeof import('element-plus/es')['ElMessage']
														
 
															+  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
														
 
															+  const computed: typeof import('vue')['computed']
														
 
															+  const createApp: typeof import('vue')['createApp']
														
 
															+  const customRef: typeof import('vue')['customRef']
														
 
															+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
														
 
															+  const defineComponent: typeof import('vue')['defineComponent']
														
 
															+  const effectScope: typeof import('vue')['effectScope']
														
 
															+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
														
 
															+  const getCurrentScope: typeof import('vue')['getCurrentScope']
														
 
															+  const h: typeof import('vue')['h']
														
 
															+  const inject: typeof import('vue')['inject']
														
 
															+  const isProxy: typeof import('vue')['isProxy']
														
 
															+  const isReactive: typeof import('vue')['isReactive']
														
 
															+  const isReadonly: typeof import('vue')['isReadonly']
														
 
															+  const isRef: typeof import('vue')['isRef']
														
 
															+  const markRaw: typeof import('vue')['markRaw']
														
 
															+  const nextTick: typeof import('vue')['nextTick']
														
 
															+  const onActivated: typeof import('vue')['onActivated']
														
 
															+  const onBeforeMount: typeof import('vue')['onBeforeMount']
														
 
															+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
														
 
															+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
														
 
															+  const onDeactivated: typeof import('vue')['onDeactivated']
														
 
															+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
														
 
															+  const onMounted: typeof import('vue')['onMounted']
														
 
															+  const onRenderTracked: typeof import('vue')['onRenderTracked']
														
 
															+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
														
 
															+  const onScopeDispose: typeof import('vue')['onScopeDispose']
														
 
															+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
														
 
															+  const onUnmounted: typeof import('vue')['onUnmounted']
														
 
															+  const onUpdated: typeof import('vue')['onUpdated']
														
 
															+  const provide: typeof import('vue')['provide']
														
 
															+  const reactive: typeof import('vue')['reactive']
														
 
															+  const readonly: typeof import('vue')['readonly']
														
 
															+  const ref: typeof import('vue')['ref']
														
 
															+  const resolveComponent: typeof import('vue')['resolveComponent']
														
 
															+  const shallowReactive: typeof import('vue')['shallowReactive']
														
 
															+  const shallowReadonly: typeof import('vue')['shallowReadonly']
														
 
															+  const shallowRef: typeof import('vue')['shallowRef']
														
 
															+  const toRaw: typeof import('vue')['toRaw']
														
 
															+  const toRef: typeof import('vue')['toRef']
														
 
															+  const toRefs: typeof import('vue')['toRefs']
														
 
															+  const toValue: typeof import('vue')['toValue']
														
 
															+  const triggerRef: typeof import('vue')['triggerRef']
														
 
															+  const unref: typeof import('vue')['unref']
														
 
															+  const useAttrs: typeof import('vue')['useAttrs']
														
 
															+  const useCssModule: typeof import('vue')['useCssModule']
														
 
															+  const useCssVars: typeof import('vue')['useCssVars']
														
 
															+  const useSlots: typeof import('vue')['useSlots']
														
 
															+  const watch: typeof import('vue')['watch']
														
 
															+  const watchEffect: typeof import('vue')['watchEffect']
														
 
															+  const watchPostEffect: typeof import('vue')['watchPostEffect']
														
 
															+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
														
 
															+}
														
 
															+// for type re-export
														
 
															+declare global {
														
 
															+  // @ts-ignore
														
 
															+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
														
 
															+  import('vue')
														
 
															+}
														
--- a/src/components/AutoComplete/index.ts
+++ b/src/components/AutoComplete/index.ts
@@ -0,0 +1 @@
 
															+export { default } from './src/AutoComplete.vue'
														
--- a/src/components/AutoComplete/src/AutoComplete.vue
+++ b/src/components/AutoComplete/src/AutoComplete.vue
@@ -0,0 +1,241 @@
 
															+<script setup lang="ts" name="SelTable">
														
 
															+import _ from 'lodash'
														
 
															+import { reactive, ref, onMounted, watch } from 'vue'
														
 
															+
														
 
															+const emit = defineEmits(['check', 'input'])
														
 
															+const props = defineProps({
														
 
															+  poverWidth: {
														
 
															+    type: Number,
														
 
															+    default: 380
														
 
															+  },
														
 
															+  searchInput: {
														
 
															+    type: String,
														
 
															+    default: ''
														
 
															+  }
														
 
															+})
														
 
															+const searchVal = ref(props.searchInput)
														
 
															+watch(
														
 
															+  () => props.searchInput,
														
 
															+  (current) => {
														
 
															+    searchVal.value = current
														
 
															+  }
														
 
															+)
														
 
															+// 响应数据
														
 
															+const state: any = reactive({
														
 
															+  // searchVal: '',
														
 
															+  poverShow: false,
														
 
															+  currentPage: 1,
														
 
															+  pageSize: 10,
														
 
															+  total: 6,
														
 
															+  activeRowIndex: '',
														
 
															+  tableData: [
														
 
															+    {
														
 
															+      Country: 'China',
														
 
															+      City: 'Shenzhen',
														
 
															+      id: 1,
														
 
															+      Uncode: 'CNSZX'
														
 
															+    },
														
 
															+    {
														
 
															+      Country: 'China',
														
 
															+      City: 'Beijing',
														
 
															+      id: 2,
														
 
															+      Uncode: 'CNBJX'
														
 
															+    },
														
 
															+    {
														
 
															+      Country: 'JaPan',
														
 
															+      id: 3,
														
 
															+      City: 'Tokyo',
														
 
															+      Uncode: 'JPARI'
														
 
															+    },
														
 
															+    {
														
 
															+      Country: 'Germany',
														
 
															+      id: 4,
														
 
															+      City: 'Berlin',
														
 
															+      Uncode: 'DEBER'
														
 
															+    },
														
 
															+    {
														
 
															+      Country: 'France',
														
 
															+      City: 'Paris',
														
 
															+      id: 5,
														
 
															+      Uncode: 'FRCDG'
														
 
															+    },
														
 
															+    {
														
 
															+      Country: 'Italy',
														
 
															+      City: 'Rome',
														
 
															+      id: 6,
														
 
															+      Uncode: 'ITCIA'
														
 
															+    },
														
 
															+    {
														
 
															+      Country: 'Italy',
														
 
															+      City: 'Rome',
														
 
															+      id: 7,
														
 
															+      Uncode: 'ITCIA'
														
 
															+    },
														
 
															+    {
														
 
															+      Country: 'Italy',
														
 
															+      City: 'Rome',
														
 
															+      id: 8,
														
 
															+      Uncode: 'ITCIA'
														
 
															+    },
														
 
															+    {
														
 
															+      Country: 'Italy',
														
 
															+      City: 'Rome',
														
 
															+      id: 9,
														
 
															+      Uncode: 'ITCIA'
														
 
															+    },
														
 
															+    {
														
 
															+      Country: 'Italy',
														
 
															+      City: 'Rome',
														
 
															+      id: 10,
														
 
															+      Uncode: 'ITCIA'
														
 
															+    },
														
 
															+    {
														
 
															+      Country: 'Italy',
														
 
															+      City: 'Rome',
														
 
															+      id: 11,
														
 
															+      Uncode: 'ITCIA'
														
 
															+    }
														
 
															+  ],
														
 
															+  copyData: [],
														
 
															+  loading: false
														
 
															+})
														
 
															+
														
 
															+// 模拟搜索 复制一份数据给copyData，数据来源于接口 直接删除此代码
														
 
															+onMounted(() => {
														
 
															+  state.copyData = state.tableData
														
 
															+  handleSearch()
														
 
															+})
														
 
															+
														
 
															+// 点击行
														
 
															+const handleRowClick = (row: { id: number; City: string }) => {
														
 
															+  state.poverShow = false
														
 
															+  searchVal.value = row.City
														
 
															+  state.activeRowIndex = row.id
														
 
															+  // 将点击行传给父级
														
 
															+  emit('check', row)
														
 
															+}
														
 
															+// 搜索 模拟，正常请求接口
														
 
															+const handleSearch = _.debounce(() => {
														
 
															+  // 模拟请求，正常将搜索文字传给后端 请求接口 重新赋值
														
 
															+  state.loading = true
														
 
															+  emit('input', searchVal.value)
														
 
															+  setTimeout(() => {
														
 
															+    const filterList = state.copyData.filter((p: any) => {
														
 
															+      return (
														
 
															+        p.Country.indexOf(searchVal.value) > -1 ||
														
 
															+        p.City.indexOf(searchVal.value) > -1 ||
														
 
															+        p.Uncode.indexOf(searchVal.value) > -1
														
 
															+      )
														
 
															+    })
														
 
															+    state.tableData = filterList
														
 
															+    state.total = filterList.length
														
 
															+    state.loading = false
														
 
															+  }, 800)
														
 
															+}, 500)
														
 
															+// 分页 请求接口
														
 
															+const handleCurrentChange = (val: number) => {
														
 
															+  console.log(`current page: ${val}`)
														
 
															+}
														
 
															+</script>
														
 
															+<template>
														
 
															+  <div>
														
 
															+    <el-popover
														
 
															+      v-model:visible="state.poverShow"
														
 
															+      placement="bottom-start"
														
 
															+      :teleported="false"
														
 
															+      :width="props.poverWidth"
														
 
															+      trigger="click"
														
 
															+    >
														
 
															+      <template #reference>
														
 
															+        <el-input
														
 
															+          v-model="searchVal"
														
 
															+          placeholder="Please input country/city/uncode"
														
 
															+          @input="handleSearch"
														
 
															+          @click="handleSearch"
														
 
															+        >
														
 
															+          <template #suffix>
														
 
															+            <el-icon :class="state.poverShow ? 'reverse' : ''"><CaretBottom /></el-icon>
														
 
															+          </template>
														
 
															+        </el-input>
														
 
															+      </template>
														
 
															+      <el-table
														
 
															+        :data="state.tableData"
														
 
															+        border
														
 
															+        stripe
														
 
															+        v-loading="state.loading"
														
 
															+        @row-click="handleRowClick"
														
 
															+        header-row-class-name="cus-header"
														
 
															+      >
														
 
															+        <el-table-column width="120" property="Country" label="Country" />
														
 
															+        <el-table-column width="120" property="City" label="City" />
														
 
															+        <el-table-column min-width="120" property="Uncode" label="Uncode" />
														
 
															+      </el-table>
														
 
															+      <div class="pagination">
														
 
															+        <span>Total {{ state.total }}</span>
														
 
															+        <el-pagination
														
 
															+          v-model:currentPage="state.currentPage"
														
 
															+          v-model:page-size="state.pageSize"
														
 
															+          size="small"
														
 
															+          layout="prev, pager, next"
														
 
															+          :total="state.total"
														
 
															+          @current-change="handleCurrentChange"
														
 
															+        />
														
 
															+      </div>
														
 
															+    </el-popover>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<style scoped lang="scss">
														
 
															+:deep(.el-input) {
														
 
															+  input {
														
 
															+    cursor: pointer;
														
 
															+  }
														
 
															+  .el-input__suffix-inner {
														
 
															+    i {
														
 
															+      transition: all 0.3s;
														
 
															+    }
														
 
															+    .reverse {
														
 
															+      transform: rotate(-180deg);
														
 
															+    }
														
 
															+  }
														
 
															+  .el-input__wrapper.is-focus {
														
 
															+    box-shadow: 0 0 0 1px #ffbc79 inset !important;
														
 
															+  }
														
 
															+}
														
 
															+:deep(.cus-header) th {
														
 
															+  background-color: var(--color-table-header-bg) !important;
														
 
															+}
														
 
															+:deep(.el-table__row) {
														
 
															+  td {
														
 
															+    cursor: pointer;
														
 
															+  }
														
 
															+}
														
 
															+:deep(.el-table__row:not(.current-row):hover) {
														
 
															+  td {
														
 
															+    background-color: #fff1e6 !important;
														
 
															+  }
														
 
															+}
														
 
															+:deep(.current-row) {
														
 
															+  td {
														
 
															+    background-color: #ffe3cd !important;
														
 
															+  }
														
 
															+}
														
 
															+.pagination {
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  height: 40px;
														
 
															+  justify-content: space-between;
														
 
															+  padding: 0 12px 0 8px;
														
 
															+  > span {
														
 
															+    font-size: 13px;
														
 
															+  }
														
 
															+}
														
 
															+:deep(.el-popper) {
														
 
															+  border-radius: 12px !important;
														
 
															+}
														
 
															+:deep(.el-pagination) {
														
 
															+  .is-active {
														
 
															+    color: #b57b32 !important;
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/src/components/AutoSelect/index.ts
+++ b/src/components/AutoSelect/index.ts
@@ -0,0 +1 @@
 
															+export { default } from './src/AutoSelect.vue'
														
--- a/src/components/AutoSelect/src/AutoSelect.vue
+++ b/src/components/AutoSelect/src/AutoSelect.vue
@@ -0,0 +1,121 @@
 
															+<script setup lang="ts">
														
 
															+import { ref, watch } from 'vue'
														
 
															+
														
 
															+const props = defineProps({
														
 
															+  ASPlaceholder: {
														
 
															+    type: String
														
 
															+  },
														
 
															+  ASValue: {
														
 
															+    type: Array
														
 
															+  },
														
 
															+  ASisDisabled: {
														
 
															+    type: Boolean
														
 
															+  },
														
 
															+  ASType: {
														
 
															+    type: String
														
 
															+  }
														
 
															+})
														
 
															+
														
 
															+interface ListItem {
														
 
															+  value: string
														
 
															+  label: string
														
 
															+}
														
 
															+
														
 
															+const list = ref<ListItem[]>([])
														
 
															+const options = ref<ListItem[]>([])
														
 
															+const value = ref(props.ASValue)
														
 
															+const type = ref(props.ASType)
														
 
															+const loading = ref(false)
														
 
															+watch(
														
 
															+  () => props.ASValue,
														
 
															+  (current) => {
														
 
															+    value.value = current
														
 
															+  }
														
 
															+)
														
 
															+const remoteMethod = (query: string) => {
														
 
															+  if (query) {
														
 
															+    loading.value = true
														
 
															+    setTimeout(() => {
														
 
															+      $api
														
 
															+        .getMoreFiltersData({
														
 
															+          term: query,
														
 
															+          type: type.value
														
 
															+        })
														
 
															+        .then((res: any) => {
														
 
															+          console.log(res)
														
 
															+          loading.value = false
														
 
															+          if (res.code == 200) {
														
 
															+            list.value = res.data.map((item: any) => {
														
 
															+              return { value: item, label: item }
														
 
															+            })
														
 
															+            options.value = list.value.filter((item) => {
														
 
															+              return item.label.toLowerCase().includes(query.toLowerCase())
														
 
															+            })
														
 
															+          }
														
 
															+        })
														
 
															+    }, 200)
														
 
															+  } else {
														
 
															+    options.value = []
														
 
															+  }
														
 
															+}
														
 
															+const emit = defineEmits(['changeAutoSelect'])
														
 
															+// 选中改变
														
 
															+const changeAutoSelect = () => {
														
 
															+  emit('changeAutoSelect', value)
														
 
															+}
														
 
															+// 清除警告样式
														
 
															+const removeClass = () => {
														
 
															+  const input_change = document.getElementsByClassName('input_change')
														
 
															+  if (input_change.length) {
														
 
															+    if (input_change[0].classList.value.indexOf('AlertInput') != -1) {
														
 
															+      input_change[0].classList.remove('AlertInput')
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+</script>
														
 
															+<template>
														
 
															+  <div>
														
 
															+    <el-select
														
 
															+      v-model="value"
														
 
															+      multiple
														
 
															+      filterable
														
 
															+      remote
														
 
															+      @change="changeAutoSelect"
														
 
															+      :reserve-keyword="false"
														
 
															+      :placeholder="props.ASPlaceholder"
														
 
															+      collapse-tags
														
 
															+      @focus="removeClass"
														
 
															+      :disabled="props.ASisDisabled"
														
 
															+      collapse-tags-tooltip
														
 
															+      :max-collapse-tags="3"
														
 
															+      :remote-method="remoteMethod"
														
 
															+      :loading="loading"
														
 
															+    >
														
 
															+      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
														
 
															+        <el-checkbox :checked="value?.includes(item.value)"></el-checkbox>
														
 
															+        <div class="label">{{ item.value }}</div>
														
 
															+      </el-option>
														
 
															+    </el-select>
														
 
															+  </div>
														
 
															+</template>
														
 
															+<style lang="scss" scoped>
														
 
															+.el-select-dropdown__item.is-selected {
														
 
															+  background-color: transparent;
														
 
															+  div {
														
 
															+    color: var(--badge__content--warning);
														
 
															+  }
														
 
															+}
														
 
															+.el-select-dropdown__item {
														
 
															+  padding-left: 7.7px;
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+}
														
 
															+.label {
														
 
															+  margin-left: 8px;
														
 
															+}
														
 
															+.el-select-dropdown__item.is-hovering {
														
 
															+  div {
														
 
															+    color: var(--badge__content--warning);
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/src/components/ContainerStatus/index.ts
+++ b/src/components/ContainerStatus/index.ts
@@ -0,0 +1 @@
 
															+export { default } from './src/ContainerStatus.vue'
														
--- a/src/components/ContainerStatus/src/ContainerStatus.vue
+++ b/src/components/ContainerStatus/src/ContainerStatus.vue
@@ -0,0 +1,125 @@
 
															+<script setup lang="ts">
														
 
															+import dayjs from 'dayjs'
														
 
															+
														
 
															+const props = defineProps({
														
 
															+  data: Object
														
 
															+})
														
 
															+
														
 
															+const containerStatusData: any = ref([
														
 
															+  {
														
 
															+    title: 'Empty Equipment Dispatched',
														
 
															+    date: 'May-31-2024 10:03(GMT+02)',
														
 
															+    country: 'CN,SHK'
														
 
															+  },
														
 
															+  {
														
 
															+    title: 'In-Gate',
														
 
															+    date: 'May-31-2024 10:03(GMT+02)',
														
 
															+    country: 'CN,SHK'
														
 
															+  },
														
 
															+  {
														
 
															+    title: 'Loaded On Vessel',
														
 
															+    date: 'Jun-05-2024 10:03(GMT+02)',
														
 
															+    country: 'CN,SHK'
														
 
															+  },
														
 
															+  {
														
 
															+    title: 'Vessel Departure',
														
 
															+    date: 'Jun-06-2024 10:03(GMT+02)',
														
 
															+    country: 'CN,SHK'
														
 
															+  },
														
 
															+  {
														
 
															+    title: 'Vessel Arrival',
														
 
															+    date: 'Jun-07-2024 14:00(GMT+02)',
														
 
															+    country: 'ES,BCN'
														
 
															+  }
														
 
															+])
														
 
															+watch(
														
 
															+  () => props.data,
														
 
															+  (newVal) => {
														
 
															+    if (newVal) {
														
 
															+      containerStatusData.value = newVal[0].content
														
 
															+    } else {
														
 
															+      containerStatusData.value = []
														
 
															+    }
														
 
															+  },
														
 
															+  {
														
 
															+    immediate: true,
														
 
															+    deep: true
														
 
															+  }
														
 
															+)
														
 
															+
														
 
															+const formatDate = (date: string) => {
														
 
															+  return date ? dayjs(date).format('MMM-DD-YYYY HH:mm [(GMT]Z[)]') : '--'
														
 
															+}
														
 
															+</script>
														
 
															+
														
 
															+<template>
														
 
															+  <div class="container-status">
														
 
															+    <div class="step-item" v-for="(item, index) in containerStatusData" :key="item.title">
														
 
															+      <div class="step-data">
														
 
															+        <div class="step-dot-icon"></div>
														
 
															+        <div class="info">
														
 
															+          <div class="left-info">
														
 
															+            <div class="title">{{ item.title }}</div>
														
 
															+            <div class="date">{{ formatDate(item.date) }}</div>
														
 
															+          </div>
														
 
															+          <div class="right-country">{{ item.country }}</div>
														
 
															+        </div>
														
 
															+      </div>
														
 
															+      <div class="line" v-if="index + 1 !== containerStatusData.length"></div>
														
 
															+    </div>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.container-status {
														
 
															+  width: 100%;
														
 
															+  padding: 22px 0 22px;
														
 
															+}
														
 
															+
														
 
															+.step-data {
														
 
															+  display: flex;
														
 
															+  gap: 8px;
														
 
															+  height: 8px;
														
 
															+  width: 100%;
														
 
															+  .step-dot-icon {
														
 
															+    height: 8px;
														
 
															+    width: 8px;
														
 
															+    background-color: var(--color-neutral-1);
														
 
															+    border-radius: 50%;
														
 
															+  }
														
 
															+  .info {
														
 
															+    flex: 1;
														
 
															+    display: flex;
														
 
															+    height: 52px;
														
 
															+    margin-top: -22px;
														
 
															+    background-color: var(--color-table-header-bg);
														
 
															+    border: 1px solid var(--color-border);
														
 
															+    border-radius: 6px;
														
 
															+    color: var(--color-neutral-1);
														
 
															+    .left-info {
														
 
															+      flex: 1;
														
 
															+      padding: 8px 10px;
														
 
															+      border-right: 1px solid var(--color-border);
														
 
															+      .title {
														
 
															+        font-size: 14px;
														
 
															+        font-weight: 700;
														
 
															+      }
														
 
															+      .date {
														
 
															+        margin-top: 4px;
														
 
															+        font-size: 12px;
														
 
															+      }
														
 
															+    }
														
 
															+    .right-country {
														
 
															+      padding: 0 24px;
														
 
															+      line-height: 52px;
														
 
															+      font-weight: 700;
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+.line {
														
 
															+  height: 60px;
														
 
															+  width: 0;
														
 
															+  margin-left: 3px;
														
 
															+  border-left: 1px solid var(--color-neutral-1);
														
 
															+}
														
 
															+</style>
														
--- a/src/components/CustomizeColumns/index.ts
+++ b/src/components/CustomizeColumns/index.ts
@@ -0,0 +1 @@
 
															+export { default } from './src/CustomizeColumns.vue'
														
--- a/src/components/CustomizeColumns/src/CustomizeColumns.vue
+++ b/src/components/CustomizeColumns/src/CustomizeColumns.vue
@@ -0,0 +1,762 @@
 
															+<script setup lang="ts">
														
 
															+import { VueDraggable } from 'vue-draggable-plus'
														
 
															+
														
 
															+const dialogVisible = ref(false)
														
 
															+// search筛选的字段
														
 
															+const searchColumn = ref('')
														
 
															+// search筛选的options
														
 
															+const searchOptions: any = ref()
														
 
															+
														
 
															+// 右侧箭头消失所需要translateX的值
														
 
															+const rightArrowHideDistance = ref(0)
														
 
															+// 控制tab栏的左右切换箭头
														
 
															+const handleTabArrow = () => {
														
 
															+  const parentElement: HTMLElement | null = document.querySelector('.left-all-columns')
														
 
															+  if (!parentElement) return
														
 
															+
														
 
															+  // 左侧切换箭头
														
 
															+  const leftArrow: HTMLElement | null = parentElement.querySelector('.el-tabs__nav-prev')
														
 
															+  // 右侧切换箭头
														
 
															+  const rightArrow: HTMLElement | null = parentElement.querySelector('.el-tabs__nav-next')
														
 
															+  const targetObserverElement = parentElement.querySelector('.el-tabs__nav')
														
 
															+
														
 
															+  if (!targetObserverElement || !leftArrow || !rightArrow) return
														
 
															+
														
 
															+  // 创建一个函数来获取 translateX
														
 
															+  const getTranslateX = () => {
														
 
															+    const style = window.getComputedStyle(targetObserverElement)
														
 
															+    const matrix = style.transform
														
 
															+
														
 
															+    if (matrix !== 'none' && matrix) {
														
 
															+      // 提取 matrix 中的 translateX 值
														
 
															+      const values = matrix.match(/matrix\(([^)]+)\)/)?.[1].split(', ')
														
 
															+      if (!values) return 0
														
 
															+      const translateX = parseFloat(values[4])
														
 
															+      return translateX
														
 
															+    }
														
 
															+    return 0 // 如果没有 transform 或 translateX，默认返回 0
														
 
															+  }
														
 
															+
														
 
															+  // 检查并更新箭头显示状态
														
 
															+  const updateArrowVisibility = () => {
														
 
															+    const translateX = getTranslateX()
														
 
															+    if (translateX === 0) {
														
 
															+      leftArrow.style.display = 'none'
														
 
															+    } else {
														
 
															+      leftArrow.style.display = 'inline-block'
														
 
															+    }
														
 
															+
														
 
															+    if (translateX === rightArrowHideDistance.value) {
														
 
															+      rightArrow.style.display = 'none'
														
 
															+    } else {
														
 
															+      rightArrow.style.display = 'inline-block'
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+  // 监听 transitionend 事件，等待动画结束后再获取 translateX 值
														
 
															+  targetObserverElement.addEventListener('transitionend', (event: any) => {
														
 
															+    if (event.propertyName === 'transform') {
														
 
															+      // 只有 transform 动画结束时才触发
														
 
															+      updateArrowVisibility()
														
 
															+    }
														
 
															+  })
														
 
															+
														
 
															+  // 初次运行时手动检查一次
														
 
															+  updateArrowVisibility()
														
 
															+}
														
 
															+
														
 
															+// 筛选选中时滚动到对应的元素
														
 
															+const handleDocumentClick = (event: any) => {
														
 
															+  if (!scrollTargetElement.value.contains(event.target)) {
														
 
															+    scrollTargetElement.value.className = scrollTargetElement.value.className.replace(
														
 
															+      'search-select-item',
														
 
															+      ''
														
 
															+    )
														
 
															+    scrollTargetElement.value = null
														
 
															+    document.removeEventListener('click', handleDocumentClick)
														
 
															+  }
														
 
															+}
														
 
															+const scrollTargetElement = ref()
														
 
															+const scrollToItem = (itemId: string) => {
														
 
															+  if (activeName.value !== 'All') {
														
 
															+    activeName.value = 'All'
														
 
															+  }
														
 
															+  setTimeout(() => {
														
 
															+    // 重置
														
 
															+    if (scrollTargetElement.value) {
														
 
															+      scrollTargetElement.value.className = scrollTargetElement.value.className.replace(
														
 
															+        'search-select-item',
														
 
															+        ''
														
 
															+      )
														
 
															+    }
														
 
															+    // 获取目标元素
														
 
															+    scrollTargetElement.value = document.querySelector(`[data-field='${itemId}']`)
														
 
															+    if (scrollTargetElement.value) {
														
 
															+      // 使用 scrollIntoView 滚动到该元素
														
 
															+      scrollTargetElement.value.scrollIntoView({ behavior: 'smooth', block: 'center' })
														
 
															+      scrollTargetElement.value.className += ' search-select-item'
														
 
															+      // 或者使用自定义滚动
														
 
															+      // const container = this.$refs.dataContainer
														
 
															+      // container.scrollTop = targetElement.offsetTop - container.offsetTop
														
 
															+
														
 
															+      document.addEventListener('click', handleDocumentClick)
														
 
															+    }
														
 
															+  }, 100)
														
 
															+}
														
 
															+
														
 
															+// 系统首次加载时，会有引导操作
														
 
															+let firstLoad = localStorage.getItem('firstLoadCustomizeColumns')
														
 
															+const step1 = ref()
														
 
															+const open1 = ref(false)
														
 
															+const step2 = ref()
														
 
															+const open2 = ref(false)
														
 
															+const handleCloseTour = (stepStr: string) => {
														
 
															+  stepStr === 'step1' ? (open1.value = false) : (open2.value = false)
														
 
															+  localStorage.setItem('firstLoadCustomizeColumns', 'true')
														
 
															+  // firstLoad = 'true'
														
 
															+}
														
 
															+
														
 
															+// 左侧选中的tab
														
 
															+const activeName = ref()
														
 
															+// 分组列
														
 
															+const groupColumns: any = ref([])
														
 
															+// 所有数据
														
 
															+const allDataCopy: any = ref()
														
 
															+
														
 
															+const loading = ref(false)
														
 
															+// 获取数据
														
 
															+const getData = async (reset?: string) => {
														
 
															+  loading.value = true
														
 
															+  let paramsData: any = { ...params.value.getData }
														
 
															+  if (reset === 'yes') {
														
 
															+    paramsData.reset = 'yes'
														
 
															+  }
														
 
															+  await $api.getTableSettingColumns(paramsData).then((res: any) => {
														
 
															+    if (res.code === 200) {
														
 
															+      // allDataCopy就是所有的数据
														
 
															+      allDataCopy.value = res.data.GroupColumnsAll
														
 
															+      groupColumns.value = res.data.GroupColumnsLeft
														
 
															+      activeName.value = allDataCopy.value?.[0]?.name
														
 
															+      searchOptions.value = res.data.GroupColumnsLeft?.[0]?.children
														
 
															+      // 右侧选中的数据
														
 
															+      selectColumns.value = res.data.GroupColumnsRight
														
 
															+      nextTick(() => {
														
 
															+        handleTabArrow()
														
 
															+      })
														
 
															+    }
														
 
															+  })
														
 
															+  loading.value = false
														
 
															+}
														
 
															+
														
 
															+const params = ref()
														
 
															+// rightDistance是右侧箭头消失所需要translateX的值
														
 
															+const openDialog = async (paramsData: Object, rightDistance: number) => {
														
 
															+  params.value = paramsData
														
 
															+  dialogVisible.value = true
														
 
															+  await getData()
														
 
															+  rightArrowHideDistance.value = rightDistance
														
 
															+  nextTick(() => {
														
 
															+    if (!firstLoad) {
														
 
															+      open1.value = true
														
 
															+      open2.value = true
														
 
															+    }
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+const selectColumns: any = ref([])
														
 
															+
														
 
															+// 左侧Icon的显隐
														
 
															+const hoverAllIcon = ref('')
														
 
															+// 右侧Icon的显隐
														
 
															+const hoverSelectIcon = ref('')
														
 
															+
														
 
															+const handleAddSelect = (item: any) => {
														
 
															+  groupColumns.value.forEach((groupItem: any) => {
														
 
															+    groupItem.children.forEach((child: any, index: number) => {
														
 
															+      if (child.field === item.field) {
														
 
															+        groupItem.children.splice(index, 1)
														
 
															+      }
														
 
															+    })
														
 
															+  })
														
 
															+  selectColumns.value.push(item)
														
 
															+}
														
 
															+
														
 
															+// 从左侧拖拽到右侧时，删除其他分组中相同的数据
														
 
															+const handleLeftRemove = (e: any) => {
														
 
															+  if (e.to === e.from) return
														
 
															+  const curItem = e.data
														
 
															+  groupColumns.value.forEach((groupItem: any) => {
														
 
															+    groupItem.children.forEach((child: any, index: number) => {
														
 
															+      if (child.field === curItem.field) {
														
 
															+        groupItem.children.splice(index, 1)
														
 
															+      }
														
 
															+    })
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+// 从右侧拖拽到左侧时，左侧根据分组添加数据
														
 
															+const handleRightRemove = (e: any) => {
														
 
															+  if (e.to === e.from) return
														
 
															+  const curItem = e.data
														
 
															+  // 获取当前移动项移入到了那一组
														
 
															+  const curGroup = groupColumns.value.find((item: any) => {
														
 
															+    return item.name == activeName.value
														
 
															+  })
														
 
															+  // 获取当前项应该对应哪一组
														
 
															+  const originalGroup = allDataCopy.value.find((item: any) => {
														
 
															+    if (item.name === 'All') {
														
 
															+      return false
														
 
															+    }
														
 
															+    const index = item.children.findIndex((child: any) => {
														
 
															+      return child.field === curItem.field
														
 
															+    })
														
 
															+    return index !== -1
														
 
															+  })
														
 
															+
														
 
															+  if (curGroup.name !== originalGroup.name && curGroup.name !== 'All') {
														
 
															+    // 从当前分组中删除移入的数据
														
 
															+    curGroup.children.forEach((item: any, index: number) => {
														
 
															+      item.field === curItem.field && curGroup.children.splice(index, 1)
														
 
															+    })
														
 
															+    // 在对应分组中添加移入的数据
														
 
															+    groupColumns.value.forEach((item: any) => {
														
 
															+      item.name === originalGroup.name && item.children.push(curItem)
														
 
															+    })
														
 
															+    // 添加到All分组里
														
 
															+    groupColumns.value[0].children.push(curItem)
														
 
															+  } else if (curGroup.name === 'All') {
														
 
															+    // 在对应分组中添加移入的数据
														
 
															+    groupColumns.value.forEach((item: any) => {
														
 
															+      item.name === originalGroup.name && item.children.push(curItem)
														
 
															+    })
														
 
															+  } else if (curGroup.name === originalGroup.name) {
														
 
															+    groupColumns.value[0].children.push(curItem)
														
 
															+  }
														
 
															+}
														
 
															+// 点击右侧的减号删除选中的列，并添加到左侧
														
 
															+const handleDeleteSelect = (curItem: any) => {
														
 
															+  selectColumns.value.forEach((item: any, index: number) => {
														
 
															+    if (item.field === curItem.field) {
														
 
															+      selectColumns.value.splice(index, 1)
														
 
															+    }
														
 
															+  })
														
 
															+  // 获取当前项应该对应哪一组
														
 
															+  const originalGroup = allDataCopy.value.find((item: any) => {
														
 
															+    if (item.name === 'All') {
														
 
															+      return false
														
 
															+    }
														
 
															+    const index = item.children.findIndex((child: any) => {
														
 
															+      return child.field === curItem.field
														
 
															+    })
														
 
															+    return index !== -1
														
 
															+  })
														
 
															+  // 在对应分组中添加移入的数据
														
 
															+  groupColumns.value.forEach((item: any) => {
														
 
															+    item.name === originalGroup.name && item.children.push(curItem)
														
 
															+  })
														
 
															+  // 添加到All分组里
														
 
															+  groupColumns.value[0].children.push(curItem)
														
 
															+}
														
 
															+
														
 
															+const handleMoveUpSelect = (item: any) => {
														
 
															+  const index = selectColumns.value.findIndex((i: any) => i.field === item.field)
														
 
															+  if (index === 0) return
														
 
															+  const temp = selectColumns.value[index]
														
 
															+  selectColumns.value[index] = selectColumns.value[index - 1]
														
 
															+  selectColumns.value[index - 1] = temp
														
 
															+}
														
 
															+const handleMoveDownSelect = (item: any) => {
														
 
															+  const index = selectColumns.value.findIndex((i: any) => i.field === item.field)
														
 
															+  if (index === selectColumns.value.length - 1) return
														
 
															+  const temp = selectColumns.value[index]
														
 
															+  selectColumns.value[index] = selectColumns.value[index + 1]
														
 
															+  selectColumns.value[index + 1] = temp
														
 
															+}
														
 
															+
														
 
															+const emits = defineEmits<{
														
 
															+  customize: []
														
 
															+  reset: []
														
 
															+}>()
														
 
															+const handleReset = () => {
														
 
															+  getData('yes')
														
 
															+}
														
 
															+const handleApply = () => {
														
 
															+  const columnsList = selectColumns.value.map((item: any) => {
														
 
															+    return item.ids
														
 
															+  })
														
 
															+  $api
														
 
															+    .saveTableSettingColumns({
														
 
															+      ...params.value.saveData,
														
 
															+      ids: columnsList
														
 
															+    })
														
 
															+    .then((res: any) => {
														
 
															+      if (res.code === 200) {
														
 
															+        // ElMessage.success('Save successfully')
														
 
															+        emits('customize')
														
 
															+        dialogVisible.value = false
														
 
															+      }
														
 
															+    })
														
 
															+}
														
 
															+
														
 
															+const clearData = () => {
														
 
															+  open1.value = false
														
 
															+  open2.value = false
														
 
															+  activeName.value = ''
														
 
															+  groupColumns.value = []
														
 
															+  selectColumns.value = []
														
 
															+  searchColumn.value = ''
														
 
															+}
														
 
															+
														
 
															+defineExpose({
														
 
															+  openDialog
														
 
															+})
														
 
															+</script>
														
 
															+
														
 
															+<template>
														
 
															+  <el-dialog
														
 
															+    class="customize-columns"
														
 
															+    v-model="dialogVisible"
														
 
															+    :width="1000"
														
 
															+    title="Customize Columns"
														
 
															+    @close="clearData"
														
 
															+  >
														
 
															+    <div class="search-header">
														
 
															+      <div class="search-input" ref="searchRef">
														
 
															+        <el-select
														
 
															+          v-model="searchColumn"
														
 
															+          @change="scrollToItem"
														
 
															+          filterable
														
 
															+          placeholder="Search columns you preffered"
														
 
															+        >
														
 
															+          <template #prefix>
														
 
															+            <span class="iconfont_icon">
														
 
															+              <svg class="iconfont" aria-hidden="true">
														
 
															+                <use xlink:href="#icon-icon_search_b"></use>
														
 
															+              </svg>
														
 
															+            </span>
														
 
															+          </template>
														
 
															+          <el-option
														
 
															+            v-for="item in searchOptions"
														
 
															+            :key="item.field"
														
 
															+            :label="item.label"
														
 
															+            :value="item.field"
														
 
															+          />
														
 
															+        </el-select>
														
 
															+      </div>
														
 
															+      <div class="tips">
														
 
															+        <span style="font-size: 16px">* </span>
														
 
															+        <span
														
 
															+          >Drag item over to this selection or click "add" icon to show the column on your booking
														
 
															+          list</span
														
 
															+        >
														
 
															+      </div>
														
 
															+    </div>
														
 
															+    <div class="draggable-list">
														
 
															+      <div class="left-all-columns" v-vloading="loading">
														
 
															+        <div class="tabs">
														
 
															+          <el-tabs v-model="activeName">
														
 
															+            <el-tab-pane
														
 
															+              v-for="groupItem in groupColumns"
														
 
															+              :key="groupItem.name"
														
 
															+              :label="groupItem.name"
														
 
															+              :name="groupItem.name"
														
 
															+            >
														
 
															+              <VueDraggable
														
 
															+                v-model="groupItem.children"
														
 
															+                class="column-list"
														
 
															+                :sort="false"
														
 
															+                ghost-class="ghost-column"
														
 
															+                :forceFallback="true"
														
 
															+                fallbackClass="fallback-class"
														
 
															+                group="customizeColumns"
														
 
															+                item-key="field"
														
 
															+                @end="handleLeftRemove"
														
 
															+              >
														
 
															+                <template v-for="(item, index) in groupItem.children" :key="item.field">
														
 
															+                  <div
														
 
															+                    :data-field="item.field"
														
 
															+                    class="column-item"
														
 
															+                    @mouseenter="hoverAllIcon = item.field"
														
 
															+                    @mouseleave="hoverAllIcon = ''"
														
 
															+                  >
														
 
															+                    <span class="font_family icon-icon_dragsort__b draggable-icon"></span>
														
 
															+                    <span class="title">{{ item.label }}</span>
														
 
															+                    <span
														
 
															+                      ref="step1"
														
 
															+                      v-if="hoverAllIcon === item.field || (index === 0 && !firstLoad)"
														
 
															+                      class="font_family icon-icon_add_b move-icon"
														
 
															+                      @click="handleAddSelect(item)"
														
 
															+                    ></span>
														
 
															+                  </div>
														
 
															+                </template>
														
 
															+              </VueDraggable>
														
 
															+            </el-tab-pane>
														
 
															+          </el-tabs>
														
 
															+        </div>
														
 
															+      </div>
														
 
															+      <div class="right-select-columns">
														
 
															+        <div class="title">Selected columns on your booking list</div>
														
 
															+        <VueDraggable
														
 
															+          v-vloading="loading"
														
 
															+          v-model="selectColumns"
														
 
															+          class="column-list"
														
 
															+          ghost-class="ghost-column"
														
 
															+          :forceFallback="true"
														
 
															+          fallback-class="fallback-class"
														
 
															+          group="customizeColumns"
														
 
															+          item-key="field"
														
 
															+          @end="handleRightRemove"
														
 
															+        >
														
 
															+          <template v-for="(item, index) in selectColumns" :key="item.field">
														
 
															+            <div
														
 
															+              class="column-item"
														
 
															+              @mouseenter="hoverSelectIcon = item.field"
														
 
															+              @mouseleave="hoverSelectIcon = ''"
														
 
															+            >
														
 
															+              <span
														
 
															+                class="font_family icon-icon_dragsort__b draggable-icon"
														
 
															+                style="font-size: 16px"
														
 
															+              ></span>
														
 
															+              <span class="title">{{ item.label }}</span>
														
 
															+              <span
														
 
															+                v-if="hoverSelectIcon === item.field || (index === 0 && !firstLoad)"
														
 
															+                class="font_family icon-icon_moveup_b move-icon"
														
 
															+                @click="handleMoveUpSelect(item)"
														
 
															+              ></span>
														
 
															+              <span
														
 
															+                v-if="hoverSelectIcon === item.field || (index === 0 && !firstLoad)"
														
 
															+                class="font_family icon-icon_movedown_b move-icon"
														
 
															+                @click="handleMoveDownSelect(item)"
														
 
															+              ></span>
														
 
															+              <span
														
 
															+                ref="step2"
														
 
															+                v-if="hoverSelectIcon === item.field || (index === 0 && !firstLoad)"
														
 
															+                class="font_family icon-icon_reduce_b move-icon"
														
 
															+                @click="handleDeleteSelect(item)"
														
 
															+              ></span>
														
 
															+            </div>
														
 
															+          </template>
														
 
															+        </VueDraggable>
														
 
															+      </div>
														
 
															+    </div>
														
 
															+    <template #footer>
														
 
															+      <el-button type="default" @click="dialogVisible = false">Cancel</el-button>
														
 
															+      <el-button type="default" @click="handleReset">Reset to default</el-button>
														
 
															+      <el-button class="el-button--dark" @click="handleApply"> Apply </el-button>
														
 
															+    </template>
														
 
															+    <el-tour
														
 
															+      :target-area-clickable="false"
														
 
															+      class="step1-tour"
														
 
															+      v-model="open1"
														
 
															+      type="primary"
														
 
															+      :mask="false"
														
 
															+      v-if="step1?.[0]"
														
 
															+    >
														
 
															+      <el-tour-step :show-close="false" :target="step1?.[0]">
														
 
															+        <template #default>
														
 
															+          <div class="description">
														
 
															+            <span>Drag</span> items to the right group or click the "<span>Add</span>" icon to add
														
 
															+            columns to the shipment list.
														
 
															+          </div>
														
 
															+          <div class="got-it-text" @click="handleCloseTour('step1')">Got it</div>
														
 
															+        </template>
														
 
															+      </el-tour-step>
														
 
															+    </el-tour>
														
 
															+    <el-tour
														
 
															+      :target-area-clickable="false"
														
 
															+      class="step2-tour"
														
 
															+      v-model="open2"
														
 
															+      type="primary"
														
 
															+      :mask="false"
														
 
															+      v-if="step2?.[0]"
														
 
															+    >
														
 
															+      <el-tour-step :show-close="false" :target="step2?.[0]">
														
 
															+        <template #default>
														
 
															+          <div class="description">
														
 
															+            <span>Drag</span> items to the left group or click the "<span>Remove</span>" icon to
														
 
															+            delete columns from the shipment list.
														
 
															+          </div>
														
 
															+          <div class="description">
														
 
															+            <span>Drag</span> items up or down to reorder the shipment list, or use the "<span
														
 
															+              >Move up</span
														
 
															+            >" and "<span>Move down</span>" icons.
														
 
															+          </div>
														
 
															+          <div class="got-it-text" @click="handleCloseTour('step2')">Got it</div>
														
 
															+        </template>
														
 
															+      </el-tour-step>
														
 
															+    </el-tour>
														
 
															+  </el-dialog>
														
 
															+</template>
														
 
															+
														
 
															+<style lang="scss">
														
 
															+.customize-columns {
														
 
															+  .search-header {
														
 
															+    display: flex;
														
 
															+    justify-content: space-between;
														
 
															+    align-items: center;
														
 
															+    gap: 8px;
														
 
															+    padding: 10px 0;
														
 
															+
														
 
															+    .search-input {
														
 
															+      width: 50%;
														
 
															+      padding-right: 16px;
														
 
															+    }
														
 
															+
														
 
															+    .tips {
														
 
															+      display: flex;
														
 
															+      align-items: flex-start;
														
 
															+      gap: 3px;
														
 
															+      width: 50%;
														
 
															+      padding-left: 5px;
														
 
															+      vertical-align: middle;
														
 
															+
														
 
															+      span {
														
 
															+        font-size: 12px;
														
 
															+        color: var(--color-neutral-2);
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+  .draggable-list {
														
 
															+    display: flex;
														
 
															+    user-select: none;
														
 
															+    gap: 8px;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.right-select-columns,
														
 
															+.left-all-columns {
														
 
															+  width: 50%;
														
 
															+
														
 
															+  .column-list {
														
 
															+    height: 400px;
														
 
															+    overflow: auto;
														
 
															+
														
 
															+    .column-item {
														
 
															+      display: flex;
														
 
															+      align-items: center;
														
 
															+      height: 40px;
														
 
															+      margin-bottom: 5px;
														
 
															+      padding-left: 12px;
														
 
															+      border: 1px solid var(--color-border);
														
 
															+      border-radius: 6px;
														
 
															+
														
 
															+      &:hover {
														
 
															+        background-color: #fff1e5;
														
 
															+        box-shadow: 4px 4px 32px 0px rgba(0, 0, 0, 0.1);
														
 
															+      }
														
 
															+
														
 
															+      & > .title {
														
 
															+        flex: 1;
														
 
															+      }
														
 
															+
														
 
															+      span.draggable-icon {
														
 
															+        margin-right: 12px;
														
 
															+        color: var(--color-neutral-3);
														
 
															+      }
														
 
															+
														
 
															+      .font_family {
														
 
															+        font-size: 16px;
														
 
															+        cursor: pointer;
														
 
															+        margin-right: 16px;
														
 
															+      }
														
 
															+
														
 
															+      .move-icon {
														
 
															+        &:hover {
														
 
															+          color: var(--color-theme);
														
 
															+        }
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+  .ghost-column {
														
 
															+    opacity: 0;
														
 
															+    cursor: move !important;
														
 
															+  }
														
 
															+
														
 
															+  .fallback-class {
														
 
															+    opacity: 1 !important;
														
 
															+    background-color: #fff1e5 !important;
														
 
															+    cursor: move !important;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.left-all-columns {
														
 
															+  border: 1px solid var(--color-border);
														
 
															+  border-radius: 12px;
														
 
															+
														
 
															+  .tabs {
														
 
															+    position: relative;
														
 
															+    height: 100%;
														
 
															+
														
 
															+    .el-tabs {
														
 
															+      .el-tabs__header {
														
 
															+        margin-bottom: 0px;
														
 
															+        border-bottom: 1px solid #ebeef5;
														
 
															+      }
														
 
															+
														
 
															+      .el-tabs__item {
														
 
															+        padding: 10px;
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+  .column-list {
														
 
															+    padding: 8px;
														
 
															+    padding-bottom: 0px;
														
 
															+  }
														
 
															+
														
 
															+  .search-select-item {
														
 
															+    border: 1px solid var(--color-theme) !important;
														
 
															+    box-shadow: 2px 2px 12px 0px rgba(237, 109, 0, 0.2);
														
 
															+
														
 
															+    .title {
														
 
															+      color: var(--color-theme) !important;
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.right-select-columns {
														
 
															+  background-color: #fffbf7;
														
 
															+  padding-top: 0;
														
 
															+  border: 1px dashed var(--color-border);
														
 
															+  border-radius: 12px;
														
 
															+
														
 
															+  & > .title {
														
 
															+    height: 40px;
														
 
															+    padding: 8px;
														
 
															+    line-height: 24px;
														
 
															+    font-size: 16px;
														
 
															+    font-weight: 700;
														
 
															+  }
														
 
															+
														
 
															+  .column-list {
														
 
															+    padding: 8px;
														
 
															+    padding-bottom: 0px;
														
 
															+  }
														
 
															+
														
 
															+  .column-item {
														
 
															+    background-color: #fff;
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
 
															+<style lang="scss">
														
 
															+.left-all-columns {
														
 
															+  .el-tabs__nav-prev,
														
 
															+  .el-tabs__nav-next {
														
 
															+    height: 40px;
														
 
															+    width: 40px;
														
 
															+  }
														
 
															+
														
 
															+  .el-tabs__item {
														
 
															+    color: var(--color-neutral-1);
														
 
															+    font-weight: 400;
														
 
															+    font-size: 14px;
														
 
															+  }
														
 
															+
														
 
															+  .el-tabs__item.is-active,
														
 
															+  .el-tabs__item:hover {
														
 
															+    font-weight: 700;
														
 
															+    font-size: 14px;
														
 
															+    color: var(--color-neutral-1);
														
 
															+  }
														
 
															+
														
 
															+  .el-tabs__nav-prev {
														
 
															+    border-right: 1px solid var(--color-border);
														
 
															+    box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.2);
														
 
															+    /* 左侧阴影 */
														
 
															+  }
														
 
															+
														
 
															+  .el-tabs__nav-next {
														
 
															+    border-left: 1px solid var(--color-border);
														
 
															+    box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.2);
														
 
															+    /* 左侧阴影 */
														
 
															+  }
														
 
															+
														
 
															+  .el-tabs__nav-wrap {
														
 
															+    padding: 0 40px;
														
 
															+  }
														
 
															+
														
 
															+  .el-tabs__item.is-active,
														
 
															+  .el-tabs__item:hover {
														
 
															+    color: var(--color-theme);
														
 
															+  }
														
 
															+
														
 
															+  .el-tabs__active-bar {
														
 
															+    background-color: var(--color-theme);
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.search-header {
														
 
															+  & > .search-input {
														
 
															+    .el-select {
														
 
															+      width: 100%;
														
 
															+
														
 
															+      .el-select__wrapper {
														
 
															+        border-radius: 20px;
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
 
															+
														
 
															+<style lang="scss">
														
 
															+.step1-tour {
														
 
															+  .el-tour__content {
														
 
															+    width: 240px;
														
 
															+    height: 124px;
														
 
															+    background-color: var(--color-theme);
														
 
															+    z-index: 9999 !important;
														
 
															+  }
														
 
															+
														
 
															+  .el-tour__arrow {
														
 
															+    background-color: var(--color-theme);
														
 
															+  }
														
 
															+
														
 
															+  .el-tour__footer {
														
 
															+    display: none;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.step2-tour {
														
 
															+  .el-tour__content {
														
 
															+    width: 240px;
														
 
															+    height: 200px;
														
 
															+    background-color: var(--color-theme);
														
 
															+    z-index: 9999 !important;
														
 
															+  }
														
 
															+
														
 
															+  .el-tour__arrow {
														
 
															+    background-color: var(--color-theme);
														
 
															+  }
														
 
															+
														
 
															+  .el-tour__footer {
														
 
															+    display: none;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.step1-tour,
														
 
															+.step2-tour {
														
 
															+  .el-tour__header {
														
 
															+    display: none;
														
 
															+  }
														
 
															+
														
 
															+  .description {
														
 
															+    margin-bottom: 16px;
														
 
															+    color: white;
														
 
															+    line-height: 22px;
														
 
															+
														
 
															+    span {
														
 
															+      color: white;
														
 
															+      font-weight: 600;
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+  .got-it-text {
														
 
															+    float: right;
														
 
															+    color: white;
														
 
															+    font-weight: 700;
														
 
															+    cursor: pointer;
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/src/components/DateRange/index.ts
+++ b/src/components/DateRange/index.ts
@@ -0,0 +1 @@
 
															+export { default } from './src/DateRange.vue'
														
--- a/src/components/DateRange/src/DateRange.vue
+++ b/src/components/DateRange/src/DateRange.vue
@@ -0,0 +1,295 @@
 
															+<script setup lang="ts">
														
 
															+import emitter from '@/utils/bus'
														
 
															+import { ref, computed, onMounted, onBeforeMount } from 'vue'
														
 
															+import IconDropDown from '@/components/IconDropDown'
														
 
															+import CalendarDate from './components/CalendarDate.vue'
														
 
															+
														
 
															+onMounted(() => {
														
 
															+  emitter.on('clearTag', (tag: any) => {
														
 
															+    if (tag.includes('ETD')) {
														
 
															+      clearDateStart()
														
 
															+    } else if (tag.includes('ETA')) {
														
 
															+      clearDateEnd()
														
 
															+    } else {
														
 
															+      clearDateCreation()
														
 
															+    }
														
 
															+  })
														
 
															+  emitter.on('clearDaterangeObj', () => {
														
 
															+    clearDaterangeObj()
														
 
															+  })
														
 
															+})
														
 
															+
														
 
															+onBeforeMount(() => {
														
 
															+  emitter.off('clearTag')
														
 
															+  emitter.off('clearDaterangeObj')
														
 
															+})
														
 
															+
														
 
															+const Date_visible = ref(false)
														
 
															+const DateType = ref()
														
 
															+const DateTypeoptions = ref([
														
 
															+  {
														
 
															+    value: 'Creation Time',
														
 
															+    label: 'Creation Time'
														
 
															+  }
														
 
															+])
														
 
															+const AddDateType = ref()
														
 
															+AddDateType.value = []
														
 
															+const AddType = () => {
														
 
															+  AddDateType.value.push({
														
 
															+    value: '',
														
 
															+    number: ''
														
 
															+  })
														
 
															+}
														
 
															+const deleteType = (i: any) => {
														
 
															+  AddDateType.value.splice(i, 1)
														
 
															+  DateType.value = ''
														
 
															+}
														
 
															+let daterangeObj: any = {}
														
 
															+const DateStart = ref()
														
 
															+const DateEnd = ref()
														
 
															+const DateCreation = ref()
														
 
															+const daterangedata = ref()
														
 
															+daterangedata.value = []
														
 
															+const DateRangeChange = (val: any) => {
														
 
															+  daterangeObj[val.title] = val.data[0] + ' To ' + val.data[1]
														
 
															+}
														
 
															+const emit = defineEmits(['DateRangeSearch', 'clearDaterangeTags'])
														
 
															+const DateRangeSearch = () => {
														
 
															+  emit('DateRangeSearch', daterangeObj)
														
 
															+  Date_visible.value = false
														
 
															+}
														
 
															+const CalendarTitle = computed(() => {
														
 
															+  if (DateType.value == 'undefined') {
														
 
															+    return 'Date Range'
														
 
															+  } else {
														
 
															+    return DateType.value
														
 
															+  }
														
 
															+})
														
 
															+// 清除
														
 
															+const clearrest = () => {
														
 
															+  emit('clearDaterangeTags')
														
 
															+  clearDateStart()
														
 
															+  clearDateEnd()
														
 
															+  clearDateCreation()
														
 
															+}
														
 
															+// 清除EDT
														
 
															+const clearDateStart = () => {
														
 
															+  DateStart.value = []
														
 
															+  delete daterangeObj['ETD']
														
 
															+}
														
 
															+// 清除EDA
														
 
															+const clearDateEnd = () => {
														
 
															+  DateEnd.value = []
														
 
															+  delete daterangeObj['ETA']
														
 
															+}
														
 
															+// 清除Creation Time
														
 
															+const clearDateCreation = () => {
														
 
															+  DateCreation.value = []
														
 
															+  AddDateType.value = []
														
 
															+  DateType.value = ''
														
 
															+  delete daterangeObj['Creation Time']
														
 
															+}
														
 
															+// 清除 daterangeObj
														
 
															+const clearDaterangeObj = () => {
														
 
															+  daterangeObj = {}
														
 
															+}
														
 
															+</script>
														
 
															+<template>
														
 
															+  <div class="select">
														
 
															+    <el-popover trigger="click" :width="400" :visible="Date_visible">
														
 
															+      <template #reference>
														
 
															+        <div class="Date_Range" @click="Date_visible = !Date_visible">
														
 
															+          <div class="select_title">Date Range</div>
														
 
															+          <span class="iconfont_icon">
														
 
															+            <svg class="iconfont" aria-hidden="true">
														
 
															+              <use xlink:href="#icon-icon_dropdown_b"></use>
														
 
															+            </svg>
														
 
															+          </span>
														
 
															+        </div>
														
 
															+      </template>
														
 
															+      <div>
														
 
															+        <div class="title">Date Range</div>
														
 
															+        <div class="ETD">
														
 
															+          <CalendarDate
														
 
															+            CalendarTitle="ETD"
														
 
															+            :Date="DateStart"
														
 
															+            @DateRangeChange="DateRangeChange"
														
 
															+          ></CalendarDate>
														
 
															+        </div>
														
 
															+        <div class="ETA">
														
 
															+          <CalendarDate
														
 
															+            CalendarTitle="ETA"
														
 
															+            :Date="DateEnd"
														
 
															+            @DateRangeChange="DateRangeChange"
														
 
															+          ></CalendarDate>
														
 
															+        </div>
														
 
															+        <div class="AddType" v-for="(item, index) in AddDateType" :key="item">
														
 
															+          <div>
														
 
															+            <div class="ETD_title Date_Title">
														
 
															+              <div>Date Type</div>
														
 
															+              <span class="iconfont_icon" @click="deleteType(index)">
														
 
															+                <svg class="iconfont icon_delete" aria-hidden="true">
														
 
															+                  <use xlink:href="#icon-icon_delete_b"></use>
														
 
															+                </svg>
														
 
															+              </span>
														
 
															+            </div>
														
 
															+            <el-select
														
 
															+              :suffix-icon="IconDropDown"
														
 
															+              placeholder="Please Select Date Type"
														
 
															+              v-model="DateType"
														
 
															+            >
														
 
															+              <el-option
														
 
															+                v-for="item in DateTypeoptions"
														
 
															+                :key="item.value"
														
 
															+                :label="item.label"
														
 
															+                :value="item.value"
														
 
															+              >
														
 
															+              </el-option>
														
 
															+            </el-select>
														
 
															+          </div>
														
 
															+          <div style="margin-top: 16px">
														
 
															+            <CalendarDate
														
 
															+              :CalendarTitle="CalendarTitle"
														
 
															+              CalendarWidth="352px"
														
 
															+              :Date="DateCreation"
														
 
															+              @DateRangeChange="DateRangeChange"
														
 
															+            ></CalendarDate>
														
 
															+          </div>
														
 
															+        </div>
														
 
															+        <div class="MoreType" @click="AddType" v-if="AddDateType.length != DateTypeoptions.length">
														
 
															+          + More Date Type
														
 
															+        </div>
														
 
															+        <div class="daterange_bottom">
														
 
															+          <div><el-button type="default" @click="clearrest" class="Clear">Reset</el-button></div>
														
 
															+          <div>
														
 
															+            <el-button class="search el-button--dark" @click="DateRangeSearch">Search</el-button>
														
 
															+          </div>
														
 
															+        </div>
														
 
															+      </div>
														
 
															+    </el-popover>
														
 
															+  </div>
														
 
															+</template>
														
 
															+<style lang="scss" scoped>
														
 
															+.iconfont_icon {
														
 
															+  margin-right: 8px;
														
 
															+}
														
 
															+.icon_delete {
														
 
															+  fill: var(--color-danger);
														
 
															+}
														
 
															+.select {
														
 
															+  width: 186px;
														
 
															+  margin-left: 8px;
														
 
															+  cursor: pointer;
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  border: 1px solid var(--color-border);
														
 
															+  border-radius: var(--border-radius-6);
														
 
															+}
														
 
															+.Date_Range {
														
 
															+  width: 186px;
														
 
															+  display: flex;
														
 
															+  position: relative;
														
 
															+  align-items: center;
														
 
															+  justify-content: space-between;
														
 
															+}
														
 
															+.select_title {
														
 
															+  font-size: var(--font-size-3);
														
 
															+  font-weight: 400;
														
 
															+  margin-left: 8.53px;
														
 
															+  color: var(--color-neutral-1);
														
 
															+}
														
 
															+.select_icon {
														
 
															+  width: 16px;
														
 
															+  margin-right: 10.5px;
														
 
															+}
														
 
															+.select:hover {
														
 
															+  border: 1px solid var(--color-theme);
														
 
															+}
														
 
															+.title {
														
 
															+  font-weight: 700;
														
 
															+  font-size: var(--font-size-5);
														
 
															+  background-color: #f6f8fa;
														
 
															+  height: 48px;
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  padding-left: 16px;
														
 
															+}
														
 
															+.ETD {
														
 
															+  margin: 8px 16px;
														
 
															+}
														
 
															+.ETA {
														
 
															+  margin: 16px 16px;
														
 
															+}
														
 
															+.ETD_title {
														
 
															+  font-size: var(--font-size-2);
														
 
															+  margin-bottom: 4px;
														
 
															+  color: var(--color-neutral-2);
														
 
															+}
														
 
															+.Date_Title {
														
 
															+  display: flex;
														
 
															+  justify-content: space-between;
														
 
															+  align-items: center;
														
 
															+}
														
 
															+:deep(.el-dialog__header) {
														
 
															+  display: none;
														
 
															+}
														
 
															+:deep(div.el-dialog) {
														
 
															+  width: 400px;
														
 
															+  padding: 0;
														
 
															+  margin-top: 202px;
														
 
															+  border: 1px solid var(--color-border);
														
 
															+}
														
 
															+:deep(div.el-dialog__body) {
														
 
															+  padding: 0;
														
 
															+}
														
 
															+.MoreType {
														
 
															+  color: var(--color-accent-2);
														
 
															+  padding: 0 0 16px 16px;
														
 
															+}
														
 
															+:deep(.el-select__wrapper) {
														
 
															+  border-radius: var(--border-radius-6);
														
 
															+  height: 40px;
														
 
															+}
														
 
															+.AddType {
														
 
															+  background-color: var(--color-neutral-4);
														
 
															+  margin: 0 16px 8px 16px;
														
 
															+  padding: 8px;
														
 
															+  border-radius: var(--border-radius-6);
														
 
															+}
														
 
															+.daterange_bottom {
														
 
															+  display: flex;
														
 
															+  justify-content: flex-end;
														
 
															+  align-items: center;
														
 
															+  height: 48px;
														
 
															+  border-top: 1px solid var(--color-border);
														
 
															+  margin-top: 5px;
														
 
															+  font-weight: 400;
														
 
															+  font-size: var(--font-size-3);
														
 
															+}
														
 
															+.Clear {
														
 
															+  width: 81px;
														
 
															+  height: 32px;
														
 
															+  margin-right: 7.82px;
														
 
															+}
														
 
															+.search {
														
 
															+  width: 86px;
														
 
															+  height: 32px;
														
 
															+  margin-right: 16px;
														
 
															+}
														
 
															+:deep(.el-date-editor .el-range__icon) {
														
 
															+  position: absolute;
														
 
															+  right: 16px;
														
 
															+}
														
 
															+@media only screen and (min-width: 1280px) {
														
 
															+  .Date_Range,
														
 
															+  .select {
														
 
															+    width: 224px;
														
 
															+  }
														
 
															+}
														
 
															+@media only screen and (min-width: 1440px) {
														
 
															+  .Date_Range,
														
 
															+  .select {
														
 
															+    width: 336px;
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/src/components/DateRange/src/components/CalendarDate.vue
+++ b/src/components/DateRange/src/components/CalendarDate.vue
@@ -0,0 +1,135 @@
 
															+<script lang="ts" setup>
														
 
															+import dayjs, { Dayjs } from 'dayjs'
														
 
															+import { ref, watch } from 'vue'
														
 
															+
														
 
															+// type RangeValue = [Dayjs, Dayjs]
														
 
															+// const ETDDate = ref<RangeValue>()
														
 
															+const props = defineProps({
														
 
															+  CalendarWidth: {
														
 
															+    type: String,
														
 
															+    default: '368px'
														
 
															+  },
														
 
															+  CalendarTitle: {
														
 
															+    type: String
														
 
															+  },
														
 
															+  Date: {
														
 
															+    type: Array
														
 
															+  }
														
 
															+})
														
 
															+const ETDDate = ref(props.Date)
														
 
															+watch(
														
 
															+  () => props.Date,
														
 
															+  (current) => {
														
 
															+    ETDDate.value = current
														
 
															+  }
														
 
															+)
														
 
															+const emit = defineEmits(['DateRangeChange'])
														
 
															+const open = ref(false)
														
 
															+const Disabled = ref([false, false])
														
 
															+const isShowExtra = ref(true)
														
 
															+
														
 
															+const ChangeToday = (val: any) => {
														
 
															+  console.log(ETDDate.value)
														
 
															+  if (val == 'Earliest') {
														
 
															+    // ETDDate.value = [dayjs(), dayjs()]
														
 
															+    ETDDate.value[0] = dayjs()
														
 
															+    open.value = false
														
 
															+    console.log(ETDDate.value)
														
 
															+  } else {
														
 
															+    ETDDate.value[1] = dayjs()
														
 
															+    open.value = false
														
 
															+    // ETDDate.value = [dayjs(), dayjs()]
														
 
															+  }
														
 
															+}
														
 
															+const handleCalendarOpen = () => {
														
 
															+  open.value = !open.value
														
 
															+}
														
 
															+const Earliest = () => {
														
 
															+  Disabled.value = [true, false]
														
 
															+  ETDDate.value = [dayjs('Oct-05-2009'), dayjs()]
														
 
															+}
														
 
															+const Latest = () => {
														
 
															+  Disabled.value = [false, true]
														
 
															+}
														
 
															+const changeRangeData = (value: any) => {
														
 
															+  if (value != '') {
														
 
															+    const rangedata = {
														
 
															+      title: props.CalendarTitle,
														
 
															+      data: value
														
 
															+    }
														
 
															+    emit('DateRangeChange', rangedata)
														
 
															+  }
														
 
															+}
														
 
															+const handlePanelChange = (value: any, mode: any) => {
														
 
															+  if (mode[0] == 'year' || mode[0] == 'month') {
														
 
															+    isShowExtra.value = false
														
 
															+  } else {
														
 
															+    isShowExtra.value = true
														
 
															+  }
														
 
															+}
														
 
															+</script>
														
 
															+<template>
														
 
															+  <div>
														
 
															+    <div class="ETD_title">{{ props.CalendarTitle }}</div>
														
 
															+    <a-range-picker
														
 
															+      separator="To"
														
 
															+      :showToday="false"
														
 
															+      :allowClear="false"
														
 
															+      :style="{ width: props.CalendarWidth }"
														
 
															+      :open="open"
														
 
															+      :disabled="Disabled"
														
 
															+      @change="changeRangeData"
														
 
															+      :placeholder="['Start Time', 'End Time']"
														
 
															+      format="MMM-DD-YYYY"
														
 
															+      valueFormat="MMM-DD-YYYY"
														
 
															+      @openChange="handleCalendarOpen"
														
 
															+      @panelChange="handlePanelChange"
														
 
															+      v-model:value="ETDDate"
														
 
															+    >
														
 
															+      <template #suffixIcon>
														
 
															+        <span class="iconfont_icon">
														
 
															+          <svg class="iconfont" aria-hidden="true">
														
 
															+            <use xlink:href="#icon-icon_date_b"></use>
														
 
															+          </svg>
														
 
															+        </span>
														
 
															+      </template>
														
 
															+      <template #renderExtraFooter v-if="isShowExtra">
														
 
															+        <div class="flex">
														
 
															+          <div class="footer_left">
														
 
															+            <el-button class="el-button--noborder" @click="Earliest">Earliest Time</el-button>
														
 
															+            <el-button class="el-button--noborder" @click="ChangeToday('Earliest')"
														
 
															+              >Today</el-button
														
 
															+            >
														
 
															+          </div>
														
 
															+          <div class="footer_left footer_right">
														
 
															+            <el-button @click="Latest" class="el-button--noborder">Latest Time</el-button>
														
 
															+            <el-button class="el-button--noborder" @click="ChangeToday('Latest')">Today</el-button>
														
 
															+          </div>
														
 
															+        </div>
														
 
															+      </template>
														
 
															+    </a-range-picker>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.flex {
														
 
															+  display: flex;
														
 
															+  justify-content: space-between;
														
 
															+}
														
 
															+.footer_left {
														
 
															+  display: flex;
														
 
															+  flex: 50%;
														
 
															+  padding: 4px 0 4px 8px;
														
 
															+}
														
 
															+.footer_right {
														
 
															+  border-left: 1px solid var(--color-border);
														
 
															+}
														
 
															+.el-button--noborder {
														
 
															+  color: var(--color-theme);
														
 
															+}
														
 
															+.ETD_title {
														
 
															+  font-size: var(--font-size-2);
														
 
															+  margin-bottom: 4px;
														
 
															+  color: var(--color-neutral-2);
														
 
															+}
														
 
															+</style>
														
--- a/src/components/FliterTags/index.ts
+++ b/src/components/FliterTags/index.ts
@@ -0,0 +1 @@
 
															+export { default } from './src/FilterTags.vue'
														
--- a/src/components/FliterTags/src/FilterTags.vue
+++ b/src/components/FliterTags/src/FilterTags.vue
@@ -0,0 +1,165 @@
 
															+<script setup lang="ts">
														
 
															+import { ref, watch } from 'vue'
														
 
															+interface ListItem {
														
 
															+  name: string
														
 
															+  number: number
														
 
															+  type: string
														
 
															+  checked: boolean
														
 
															+}
														
 
															+interface Props {
														
 
															+  TagsListItem: ListItem[]
														
 
															+}
														
 
															+const props = withDefaults(defineProps<Props>(), {})
														
 
															+
														
 
															+const TagsList = ref(props.TagsListItem)
														
 
															+const NewTagsList = ref()
														
 
															+
														
 
															+watch(
														
 
															+  () => props.TagsListItem,
														
 
															+  (current) => {
														
 
															+    TagsList.value = current
														
 
															+  }
														
 
															+)
														
 
															+
														
 
															+NewTagsList.value = []
														
 
															+
														
 
															+let checkedCount: any[] = []
														
 
															+const emits = defineEmits(['changeTag'])
														
 
															+const checkedBox = (i: any, name: any, checked: any) => {
														
 
															+  if (name == 'All') {
														
 
															+    checkedCount = []
														
 
															+    TagsList.value.forEach((item: any) => {
														
 
															+      item.checked = false
														
 
															+    })
														
 
															+    TagsList.value[0].checked = true
														
 
															+  } else if (!checked) {
														
 
															+    TagsList.value[0].checked = false
														
 
															+    TagsList.value[i].checked = !TagsList.value[i].checked
														
 
															+    checkedCount.push(name)
														
 
															+    const map = new Map()
														
 
															+    checkedCount.forEach((item) => map.set(item, true))
														
 
															+    checkedCount = [...map.keys()]
														
 
															+  } else {
														
 
															+    checkedCount.pop()
														
 
															+    TagsList.value[0].checked = false
														
 
															+    TagsList.value[i].checked = !TagsList.value[i].checked
														
 
															+  }
														
 
															+  if (checkedCount.length === TagsList.value.length - 1 || checkedCount.length == 0) {
														
 
															+    checkedCount = []
														
 
															+    TagsList.value.forEach((item: any) => {
														
 
															+      item.checked = false
														
 
															+    })
														
 
															+    TagsList.value[0].checked = true
														
 
															+  }
														
 
															+  if (checkedCount.length == 0) {
														
 
															+    NewTagsList.value = ['All']
														
 
															+  } else {
														
 
															+    NewTagsList.value = checkedCount
														
 
															+  }
														
 
															+  emits('changeTag', NewTagsList.value)
														
 
															+}
														
 
															+</script>
														
 
															+
														
 
															+<template>
														
 
															+  <div class="body">
														
 
															+    <div class="TagsBox">
														
 
															+      <div
														
 
															+        class="list"
														
 
															+        v-for="(item, index) of TagsList"
														
 
															+        :key="index"
														
 
															+        :class="[item.checked ? 'checked' : '']"
														
 
															+        @click="checkedBox(index, item.name, item.checked)"
														
 
															+      >
														
 
															+        {{ item.name }}
														
 
															+        <div
														
 
															+          :class="[
														
 
															+            'v-tag',
														
 
															+            item.type && 'v-tag__' + item.type,
														
 
															+            item.checked ? 'checked_color' : ''
														
 
															+          ]"
														
 
															+        >
														
 
															+          {{ item.number }}
														
 
															+        </div>
														
 
															+      </div>
														
 
															+    </div>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.body {
														
 
															+  margin-top: 8.73px;
														
 
															+}
														
 
															+.TagsBox {
														
 
															+  display: flex;
														
 
															+  flex-wrap: wrap;
														
 
															+}
														
 
															+.list {
														
 
															+  margin-right: 16px;
														
 
															+  min-width: 93px;
														
 
															+  padding: 5.42px 16px;
														
 
															+  color: var(--color-neutral-2);
														
 
															+  font-size: var(--font-size-3);
														
 
															+  cursor: pointer;
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  justify-content: center;
														
 
															+  border-radius: var(--border-radius-12);
														
 
															+}
														
 
															+.v-tag {
														
 
															+  min-width: 36px;
														
 
															+  font-size: var(--font-size-2);
														
 
															+  margin-left: 6px;
														
 
															+  border-radius: 6px;
														
 
															+  padding: 3px;
														
 
															+  text-align: center;
														
 
															+}
														
 
															+.v-tag__all {
														
 
															+  font-weight: 400;
														
 
															+  background-color: var(--color-tag-all-bg);
														
 
															+  color: var(--color-tag-all);
														
 
															+}
														
 
															+.v-tag__created {
														
 
															+  font-weight: 400;
														
 
															+  background-color: var(--color-tag-created-bg);
														
 
															+  color: var(--color-tag-created);
														
 
															+}
														
 
															+.v-tag__confirmed {
														
 
															+  font-weight: 400;
														
 
															+  background-color: var(--color-tag-confirmed-bg);
														
 
															+  color: var(--color-tag-confirmed);
														
 
															+}
														
 
															+.v-tag__cancelled {
														
 
															+  font-weight: 400;
														
 
															+  background-color: var(--color-tag-cancelled-bg);
														
 
															+  color: var(--color-tag-cancelled);
														
 
															+}
														
 
															+.v-tag__departure {
														
 
															+  font-weight: 400;
														
 
															+  background-color: var(--color-tag-departure-bg);
														
 
															+  color: var(--color-tag-departure);
														
 
															+}
														
 
															+.v-tag__cargo_received {
														
 
															+  font-weight: 400;
														
 
															+  background-color: var(--color-tag-cargo-received-bg);
														
 
															+  color: var(--color-tag-cargo-received);
														
 
															+}
														
 
															+.v-tag__arrived {
														
 
															+  font-weight: 400;
														
 
															+  background-color: var(--color-tag-arrived-bg);
														
 
															+  color: var(--color-tag-arrived);
														
 
															+}
														
 
															+.v-tag__completed {
														
 
															+  font-weight: 400;
														
 
															+  background-color: var(--color-tag-completed-bg);
														
 
															+  color: var(--color-tag-completed);
														
 
															+}
														
 
															+.checked {
														
 
															+  color: var(--color-tag-all);
														
 
															+  font-weight: 700;
														
 
															+  background: var(--color-tag-checked-all);
														
 
															+}
														
 
															+.checked_color {
														
 
															+  background-color: var(--color-tag-all-bg);
														
 
															+  color: var(--color-tag-all);
														
 
															+}
														
 
															+</style>
														
--- a/src/components/Icon/index.ts
+++ b/src/components/Icon/index.ts
@@ -0,0 +1 @@
 
															+export { default as Icon } from './src/IconView.vue'
														
--- a/src/components/Icon/src/IconView.vue
+++ b/src/components/Icon/src/IconView.vue
@@ -0,0 +1,63 @@
 
															+<template>
														
 
															+  <div :style="containerStyle" v-if="svgContent" v-html="svgContent"></div>
														
 
															+</template>
														
 
															+
														
 
															+<script setup>
														
 
															+import { ref, onMounted, watch } from 'vue'
														
 
															+
														
 
															+const props = defineProps({
														
 
															+  name: {
														
 
															+    type: String,
														
 
															+    required: true
														
 
															+  },
														
 
															+  size: {
														
 
															+    type: String,
														
 
															+    default: '100'
														
 
															+  },
														
 
															+  color: {
														
 
															+    type: String,
														
 
															+    default: 'currentColor'
														
 
															+  }
														
 
															+})
														
 
															+
														
 
															+const svgContent = ref('')
														
 
															+
														
 
															+// 设置容器的样式
														
 
															+const containerStyle = computed(() => ({
														
 
															+  width: props.size,
														
 
															+  height: props.size
														
 
															+}))
														
 
															+
														
 
															+// 监听name属性变化
														
 
															+watch(() => props.name, fetchSvg)
														
 
															+
														
 
															+// 加载SVG文件并添加样式
														
 
															+async function fetchSvg() {
														
 
															+  try {
														
 
															+    const response = await fetch(
														
 
															+      new URL(`../../src/icons/${props.name}.svg`, 'http://localhost').href
														
 
															+    )
														
 
															+    let svg = await response.text()
														
 
															+
														
 
															+    // 使用正则表达式替换fill属性
														
 
															+    svg = svg.replace(/fill="[^"]*"/g, `fill="${props.color}"`)
														
 
															+
														
 
															+    // 将大小属性直接应用到svg标签
														
 
															+    svg = svg.replace(/<svg/, `<svg width="${props.size}" height="${props.size}"`)
														
 
															+
														
 
															+    svgContent.value = svg
														
 
															+  } catch (error) {
														
 
															+    console.error(`Error fetching SVG: ${error.message}`)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+// 在组件挂载时加载SVG
														
 
															+onMounted(fetchSvg)
														
 
															+</script>
														
 
															+
														
 
															+<style scoped>
														
 
															+div {
														
 
															+  display: inline-block;
														
 
															+  vertical-align: middle;
														
 
															+}
														
 
															+</style>
														
--- a/src/components/IconDropDown/index.ts
+++ b/src/components/IconDropDown/index.ts
@@ -0,0 +1 @@
 
															+export { default } from './src/IconDropDown.vue'
														
--- a/src/components/IconDropDown/src/IconDropDown.vue
+++ b/src/components/IconDropDown/src/IconDropDown.vue
@@ -0,0 +1,18 @@
 
															+<template>
														
 
															+  <span class="iconfont_icon">
														
 
															+    <svg class="iconfont iconfont_select" aria-hidden="true">
														
 
															+      <use xlink:href="#icon-icon_dropdown_b"></use>
														
 
															+    </svg>
														
 
															+  </span>
														
 
															+</template>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.iconfont_icon {
														
 
															+  margin-right: 8px;
														
 
															+}
														
 
															+.iconfont_select {
														
 
															+  width: 17px;
														
 
															+  height: 17px;
														
 
															+  fill: var(--color-btn-default-dark-bg);
														
 
															+}
														
 
															+</style>
														
--- a/src/components/MoreFilters/index.ts
+++ b/src/components/MoreFilters/index.ts
@@ -0,0 +1 @@
 
															+export { default } from './src/MoreFilters.vue'
														
--- a/src/components/MoreFilters/src/MoreFilters.vue
+++ b/src/components/MoreFilters/src/MoreFilters.vue
@@ -0,0 +1,816 @@
 
															+<script setup lang="ts">
														
 
															+import emitter from '@/utils/bus'
														
 
															+import AutoSelect from '@/components/AutoSelect'
														
 
															+import SelectAutoSelect from '@/components/SelectAutoSelect'
														
 
															+import SelectTableSelect from '@/components/SelectTableSelect'
														
 
															+import { ref, onMounted, onBeforeMount } from 'vue'
														
 
															+import SelectTable from '@/components/SelectTable/src/SelectTable.vue'
														
 
															+
														
 
															+onMounted(() => {
														
 
															+  emitter.on('clearTag', (tag: any) => {
														
 
															+    console.log(tag)
														
 
															+    if (tag.includes('shippername')) {
														
 
															+      clearname(InputForm.value, 'parties', 'shippername')
														
 
															+    } else if (tag.includes('consigneename')) {
														
 
															+      clearname(InputForm.value, 'parties', 'consigneename')
														
 
															+    } else if (tag.includes('Incoterms')) {
														
 
															+      clearname(InputForm.value, 'General', 'Incoterms')
														
 
															+    } else if (tag.includes('Service')) {
														
 
															+      clearname(InputForm.value, 'General', 'Service')
														
 
															+    } else if (tag.includes('vessel')) {
														
 
															+      clearname(InputForm.value, 'transportation', 'vessel')
														
 
															+    } else if (tag.includes('voyage')) {
														
 
															+      clearname(InputForm.value, 'transportation', 'voyage')
														
 
															+    } else if (tag.includes('origin')) {
														
 
															+      clearname(InputForm.value, 'palces', 'origin')
														
 
															+    } else if (tag.includes('destination')) {
														
 
															+      clearname(InputForm.value, 'palces', 'destination')
														
 
															+    } else if (tag.includes('Origin Agent')) {
														
 
															+      AddDateType.value = AddDateType.value.filter((item: any) => item.partyType !== 'Origin Agent')
														
 
															+      delete MoreFiltersObj['Origin Agent']
														
 
															+      selectedPartyTypeoptions.value = selectedPartyTypeoptions.value.filter(
														
 
															+        (item: any) => item !== 'Origin Agent'
														
 
															+      )
														
 
															+    } else if (tag.includes('Destination Agent')) {
														
 
															+      AddDateType.value = AddDateType.value.filter(
														
 
															+        (item: any) => item.partyType !== 'Destination Agent'
														
 
															+      )
														
 
															+      delete MoreFiltersObj['Destination Agent']
														
 
															+      selectedPartyTypeoptions.value = selectedPartyTypeoptions.value.filter(
														
 
															+        (item: any) => item !== 'Destination Agent'
														
 
															+      )
														
 
															+    } else if (tag.includes('Sales')) {
														
 
															+      AddDateType.value = AddDateType.value.filter((item: any) => item.partyType !== 'Sales')
														
 
															+      delete MoreFiltersObj['Sales']
														
 
															+      selectedPartyTypeoptions.value = selectedPartyTypeoptions.value.filter(
														
 
															+        (item: any) => item !== 'Sales'
														
 
															+      )
														
 
															+    } else if (tag.includes('Place of Receipt')) {
														
 
															+      AddDatePlaceType.value = AddDatePlaceType.value.filter(
														
 
															+        (item: any) => item.placesType !== 'Place of Receipt'
														
 
															+      )
														
 
															+      delete MoreFiltersObj['Place of Receipt']
														
 
															+      selectedPlacesTypeoptions.value = selectedPlacesTypeoptions.value.filter(
														
 
															+        (item: any) => item !== 'Place of Receipt'
														
 
															+      )
														
 
															+    } else if (tag.includes('Port of Loading')) {
														
 
															+      AddDatePlaceType.value = AddDatePlaceType.value.filter(
														
 
															+        (item: any) => item.placesType !== 'Port of Loading'
														
 
															+      )
														
 
															+      delete MoreFiltersObj['Port of Loading']
														
 
															+      selectedPlacesTypeoptions.value = selectedPlacesTypeoptions.value.filter(
														
 
															+        (item: any) => item !== 'Port of Loading'
														
 
															+      )
														
 
															+    } else if (tag.includes('Place of delivery')) {
														
 
															+      AddDatePlaceType.value = AddDatePlaceType.value.filter(
														
 
															+        (item: any) => item.placesType !== 'Place of delivery'
														
 
															+      )
														
 
															+      delete MoreFiltersObj['Place of delivery']
														
 
															+      selectedPlacesTypeoptions.value = selectedPlacesTypeoptions.value.filter(
														
 
															+        (item: any) => item !== 'Place of delivery'
														
 
															+      )
														
 
															+    }
														
 
															+  })
														
 
															+  emitter.on('clearDaterangeObj', () => {
														
 
															+    clearMoreFiltersObj()
														
 
															+  })
														
 
															+})
														
 
															+
														
 
															+onBeforeMount(() => {
														
 
															+  emitter.off('clearTag')
														
 
															+  emitter.off('clearMoreFiltersObj')
														
 
															+})
														
 
															+
														
 
															+const drawer = ref(false)
														
 
															+interface TypeItem {
														
 
															+  partyType: ''
														
 
															+  partyname: []
														
 
															+  isshowVerfication: boolean
														
 
															+}
														
 
															+interface PlacesTypeItem {
														
 
															+  placesType: ''
														
 
															+  placesname: []
														
 
															+  isshowVerfication: boolean
														
 
															+}
														
 
															+const AddDateType = ref<TypeItem[]>([])
														
 
															+const AddDatePlaceType = ref<PlacesTypeItem[]>([])
														
 
															+const PartyTypeoptions = ref([
														
 
															+  {
														
 
															+    value: 'Origin Agent',
														
 
															+    label: 'Origin Agent'
														
 
															+  },
														
 
															+  {
														
 
															+    value: 'Destination Agent',
														
 
															+    label: 'Destination Agent'
														
 
															+  },
														
 
															+  {
														
 
															+    value: 'Sales',
														
 
															+    label: 'Sales'
														
 
															+  }
														
 
															+])
														
 
															+const PlaceTypeoptions = ref([
														
 
															+  {
														
 
															+    value: 'Place of Receipt',
														
 
															+    label: 'Place of Receipt'
														
 
															+  },
														
 
															+  {
														
 
															+    value: 'Port of Loading',
														
 
															+    label: 'Port of Loading'
														
 
															+  },
														
 
															+  {
														
 
															+    value: 'Place of delivery',
														
 
															+    label: 'Place of delivery'
														
 
															+  }
														
 
															+])
														
 
															+
														
 
															+const partSelectTableSelectRef = ref(null)
														
 
															+const placeSelectTableSelectRef = ref(null)
														
 
															+
														
 
															+const selectedPartyTypeoptions = ref()
														
 
															+selectedPartyTypeoptions.value = []
														
 
															+
														
 
															+const selectedPlacesTypeoptions = ref()
														
 
															+selectedPlacesTypeoptions.value = []
														
 
															+
														
 
															+const selectedPartyTypeIndex = ref()
														
 
															+selectedPartyTypeIndex.value = []
														
 
															+
														
 
															+const selectedPlacesTypeIndex = ref()
														
 
															+selectedPlacesTypeIndex.value = []
														
 
															+
														
 
															+const InputForm = ref({
														
 
															+  parties: {
														
 
															+    shippername: [],
														
 
															+    consigneename: []
														
 
															+  },
														
 
															+  transportation: {
														
 
															+    vessel: [],
														
 
															+    voyage: []
														
 
															+  },
														
 
															+  palces: {
														
 
															+    origin: [],
														
 
															+    destination: []
														
 
															+  },
														
 
															+  General: {
														
 
															+    Incoterms: '',
														
 
															+    Service: ''
														
 
															+  }
														
 
															+})
														
 
															+const props = defineProps({
														
 
															+  isShipment: Boolean
														
 
															+})
														
 
															+
														
 
															+const AddType = (item: any) => {
														
 
															+  if (item == 'party') {
														
 
															+    AddDateType.value.push({
														
 
															+      partyType: '',
														
 
															+      partyname: [],
														
 
															+      isshowVerfication: false
														
 
															+    })
														
 
															+  } else if (item == 'place') {
														
 
															+    AddDatePlaceType.value.push({
														
 
															+      placesType: '',
														
 
															+      placesname: [],
														
 
															+      isshowVerfication: false
														
 
															+    })
														
 
															+  }
														
 
															+}
														
 
															+const count = ref()
														
 
															+const countT = ref()
														
 
															+const countP = ref()
														
 
															+const countG = ref()
														
 
															+const PartiesBadge = ref('')
														
 
															+const GeneralBadge = ref('')
														
 
															+const TransportationBadge = ref()
														
 
															+const PlacesBadge = ref()
														
 
															+count.value = []
														
 
															+countT.value = []
														
 
															+countP.value = []
														
 
															+countG.value = []
														
 
															+
														
 
															+const changeAll = (value: any, countTotal: any, BadegTotal: any) => {
														
 
															+  for (let key in value) {
														
 
															+    if (value[key] != '') {
														
 
															+      countTotal.push(value[key])
														
 
															+    }
														
 
															+  }
														
 
															+  if (countTotal.length == 0) {
														
 
															+    BadegTotal.value = ''
														
 
															+  } else {
														
 
															+    BadegTotal.value = countTotal.length
														
 
															+  }
														
 
															+}
														
 
															+// 折叠面板生成badge
														
 
															+const changeCollapse = (val: any) => {
														
 
															+  if (val.indexOf('Parties') == -1) {
														
 
															+    AddDateType.value.forEach((item: any) => {
														
 
															+      if (item.partyType != '' && item.partyname.length != 0) {
														
 
															+        count.value.push(item.partyname)
														
 
															+      }
														
 
															+    })
														
 
															+    changeAll(InputForm.value.parties, count.value, PartiesBadge)
														
 
															+    count.value = []
														
 
															+  } else {
														
 
															+    PartiesBadge.value = ''
														
 
															+  }
														
 
															+  if (val.indexOf('General') == -1) {
														
 
															+    changeAll(InputForm.value.General, countG.value, GeneralBadge)
														
 
															+    countG.value = []
														
 
															+  } else {
														
 
															+    GeneralBadge.value = ''
														
 
															+  }
														
 
															+  if (val.indexOf('Transportation') == -1) {
														
 
															+    changeAll(InputForm.value.transportation, countT.value, TransportationBadge)
														
 
															+    countT.value = []
														
 
															+  } else {
														
 
															+    TransportationBadge.value = ''
														
 
															+  }
														
 
															+  if (val.indexOf('Places') == -1) {
														
 
															+    AddDatePlaceType.value.forEach((item: any) => {
														
 
															+      if (item.partyType != '' && item.partyname.length != 0) {
														
 
															+        countP.value.push(item.partyname)
														
 
															+      }
														
 
															+    })
														
 
															+    changeAll(InputForm.value.palces, countP.value, PlacesBadge)
														
 
															+    countP.value = []
														
 
															+  } else {
														
 
															+    PlacesBadge.value = ''
														
 
															+  }
														
 
															+}
														
 
															+const verification = ref('')
														
 
															+const placesVerification = ref('')
														
 
															+let MoreFiltersObj: any = {}
														
 
															+// 赋值
														
 
															+const changeAutoSelect = (Array: any, val: any, value: any, arraykey1: any, arraykey2: any) => {
														
 
															+  if (value == 'InputForm') {
														
 
															+    if (Array) {
														
 
															+      Array[arraykey1][arraykey2] = val.value
														
 
															+      MoreFiltersObj[arraykey2] = val.value.join()
														
 
															+    }
														
 
															+  } else if (value == 'AddDateType') {
														
 
															+    if (Array.length) {
														
 
															+      Array.forEach((item: any) => {
														
 
															+        if (item.partyType == arraykey1) {
														
 
															+          item.partyname = val.value
														
 
															+        }
														
 
															+        MoreFiltersObj[item.partyType] = val.value.join()
														
 
															+      })
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+const changeAutoSelectshippername = (val: any) => {
														
 
															+  changeAutoSelect(InputForm.value, val, 'InputForm', 'parties', 'shippername')
														
 
															+}
														
 
															+const changeAutoSelectconsigneename = (val: any) => {
														
 
															+  changeAutoSelect(InputForm.value, val, 'InputForm', 'parties', 'consigneename')
														
 
															+}
														
 
															+const changeAutoSelectvessel = (val: any) => {
														
 
															+  changeAutoSelect(InputForm.value, val, 'InputForm', 'transportation', 'vessel')
														
 
															+}
														
 
															+const changeAutoSelectvoyage = (val: any) => {
														
 
															+  changeAutoSelect(InputForm.value, val, 'InputForm', 'transportation', 'voyage')
														
 
															+}
														
 
															+const check = (row: any, value: any, key1: any, key2: any) => {
														
 
															+  value[key1][key2] = row
														
 
															+  MoreFiltersObj[key2] = row
														
 
															+}
														
 
															+//选择origin
														
 
															+const checkorigin = (row: any) => {
														
 
															+  if (row) {
														
 
															+    check(row, InputForm.value, 'palces', 'origin')
														
 
															+  }
														
 
															+}
														
 
															+const checkdestination = (row: any) => {
														
 
															+  if (row) {
														
 
															+    check(row, InputForm.value, 'palces', 'destination')
														
 
															+  }
														
 
															+}
														
 
															+const delSelect = (i: any, val: any) => {
														
 
															+  let index = selectedPartyTypeoptions.value.findIndex((item: any) => {
														
 
															+    return item == val
														
 
															+  })
														
 
															+  if (index >= 0) {
														
 
															+    selectedPartyTypeoptions.value.splice(index, 1)
														
 
															+  }
														
 
															+  let j = selectedPartyTypeIndex.value.findIndex((item: any) => {
														
 
															+    return item == i
														
 
															+  })
														
 
															+  if (j >= 0) {
														
 
															+    for (let i = 0; i < selectedPartyTypeIndex.value.length; i++) {
														
 
															+      if (selectedPartyTypeIndex.value[i] > j) {
														
 
															+        selectedPartyTypeIndex.value[i] = selectedPartyTypeIndex.value[i] - 1
														
 
															+      }
														
 
															+    }
														
 
															+    selectedPartyTypeIndex.value.splice(j, 1)
														
 
															+  }
														
 
															+}
														
 
															+const delPlacesSelect = (i: any, val: any) => {
														
 
															+  let index = selectedPlacesTypeoptions.value.findIndex((item: any) => {
														
 
															+    return item == val
														
 
															+  })
														
 
															+  if (index >= 0) {
														
 
															+    selectedPlacesTypeoptions.value.splice(index, 1)
														
 
															+  }
														
 
															+  let j = selectedPlacesTypeIndex.value.findIndex((item: any) => {
														
 
															+    return item == i
														
 
															+  })
														
 
															+  if (j >= 0) {
														
 
															+    for (let i = 0; i < selectedPlacesTypeIndex.value.length; i++) {
														
 
															+      if (selectedPlacesTypeIndex.value[i] > j) {
														
 
															+        selectedPlacesTypeIndex.value[i] = selectedPlacesTypeIndex.value[i] - 1
														
 
															+      }
														
 
															+    }
														
 
															+    selectedPlacesTypeIndex.value.splice(j, 1)
														
 
															+  }
														
 
															+}
														
 
															+const pushSelectedList = (i: any, val: any) => {
														
 
															+  let index = selectedPartyTypeoptions.value.findIndex((item: any) => {
														
 
															+    return item == val
														
 
															+  })
														
 
															+  if (index < 0) {
														
 
															+    if (!selectedPartyTypeIndex.value.includes(i)) {
														
 
															+      selectedPartyTypeoptions.value.push(val)
														
 
															+      selectedPartyTypeIndex.value.push(i)
														
 
															+    } else {
														
 
															+      let j = selectedPartyTypeIndex.value.findIndex((con: any) => {
														
 
															+        return con == i
														
 
															+      })
														
 
															+      selectedPartyTypeoptions.value.splice(i, 1, val)
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const pushPlacesSelectedList = (i: any, val: any) => {
														
 
															+  let index = selectedPlacesTypeoptions.value.findIndex((item: any) => {
														
 
															+    return item == val
														
 
															+  })
														
 
															+  if (index < 0) {
														
 
															+    if (!selectedPlacesTypeIndex.value.includes(i)) {
														
 
															+      selectedPlacesTypeoptions.value.push(val)
														
 
															+      selectedPlacesTypeIndex.value.push(i)
														
 
															+    } else {
														
 
															+      let j = selectedPlacesTypeIndex.value.findIndex((con: any) => {
														
 
															+        return con == i
														
 
															+      })
														
 
															+      selectedPlacesTypeoptions.value.splice(i, 1, val)
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+const changeAutoSelectAddType = (index: any, val: any) => {
														
 
															+  pushSelectedList(index, val)
														
 
															+}
														
 
															+
														
 
															+const changeAutoSelectPlacesAddType = (index: any, val: any) => {
														
 
															+  pushPlacesSelectedList(index, val)
														
 
															+}
														
 
															+const changeAutoSelectVal = (val: any) => {
														
 
															+  MoreFiltersObj = { ...MoreFiltersObj, ...val }
														
 
															+}
														
 
															+// 点击search
														
 
															+const emit = defineEmits(['MoreFiltersSearch', 'clearMoreFiltersTags'])
														
 
															+const SearchMore = () => {
														
 
															+  // 判断是否有验证样式
														
 
															+  const input_change = document.getElementsByClassName('input_change')
														
 
															+  if (AddDateType.value.length) {
														
 
															+    AddDateType.value.forEach((item: any, index: any) => {
														
 
															+      if (item.partyType != '' && item.partyname.length == 0) {
														
 
															+        item.isshowVerfication = true
														
 
															+        verification.value = 'Please input Party Details'
														
 
															+        input_change[index].classList.add('AlertInput')
														
 
															+      } else {
														
 
															+        item.isshowVerfication = false
														
 
															+        input_change[index].classList.remove('AlertInput')
														
 
															+      }
														
 
															+    })
														
 
															+    const AlertInput = document.getElementsByClassName('AlertInput')
														
 
															+    if (AlertInput.length == 0) {
														
 
															+      // 传数据给父组件
														
 
															+      emit('MoreFiltersSearch', MoreFiltersObj)
														
 
															+      drawer.value = false
														
 
															+    }
														
 
															+  } else {
														
 
															+    // 传数据给父组件
														
 
															+    emit('MoreFiltersSearch', MoreFiltersObj)
														
 
															+    drawer.value = false
														
 
															+  }
														
 
															+}
														
 
															+// 清除
														
 
															+const clearrest = () => {
														
 
															+  emit('clearMoreFiltersTags')
														
 
															+  InputForm.value = {
														
 
															+    parties: {
														
 
															+      shippername: [],
														
 
															+      consigneename: []
														
 
															+    },
														
 
															+    transportation: {
														
 
															+      vessel: [],
														
 
															+      voyage: []
														
 
															+    },
														
 
															+    palces: {
														
 
															+      origin: [],
														
 
															+      destination: []
														
 
															+    },
														
 
															+    General: {
														
 
															+      Incoterms: 'Please Select Date Range',
														
 
															+      Service: 'Please Select Date Range'
														
 
															+    }
														
 
															+  }
														
 
															+  AddDateType.value = []
														
 
															+  AddDatePlaceType.value = []
														
 
															+  PartiesBadge.value = ''
														
 
															+  GeneralBadge.value = ''
														
 
															+  TransportationBadge.value = ''
														
 
															+  PlacesBadge.value = ''
														
 
															+  MoreFiltersObj = {}
														
 
															+  selectedPartyTypeoptions.value = []
														
 
															+  selectedPlacesTypeoptions.value = []
														
 
															+  IncotermsList.value.forEach((item) => {
														
 
															+    item.checked = false
														
 
															+  })
														
 
															+  SeiviceList.value.forEach((item) => {
														
 
															+    item.checked = false
														
 
															+  })
														
 
															+  IncotermsCheckAll.value = false
														
 
															+  ServiceCheckAll.value = false
														
 
															+}
														
 
															+// 清除name
														
 
															+const clearname = (val: any, key1: any, key2: any) => {
														
 
															+  if (key2 == 'partyType' || key2 == 'partyname') {
														
 
															+    val[key1][key2] = ''
														
 
															+  } else if (key2 == 'Incoterms') {
														
 
															+    val[key1][key2] = 'Please Select Date Range'
														
 
															+  } else {
														
 
															+    val[key1][key2] = []
														
 
															+  }
														
 
															+  delete MoreFiltersObj[key2]
														
 
															+}
														
 
															+// 清除 MoreFiltersObj
														
 
															+const clearMoreFiltersObj = () => {
														
 
															+  MoreFiltersObj = {}
														
 
															+}
														
 
															+const IncotermsCheckAll = ref(false)
														
 
															+const ServiceCheckAll = ref(false)
														
 
															+const IncotermsList = ref([
														
 
															+  {
														
 
															+    name: 'FOB',
														
 
															+    number: 2229,
														
 
															+    checked: false
														
 
															+  },
														
 
															+  {
														
 
															+    name: 'CIF',
														
 
															+    number: 1000,
														
 
															+    checked: false
														
 
															+  }
														
 
															+])
														
 
															+const SeiviceList = ref([
														
 
															+  {
														
 
															+    name: 'FOB',
														
 
															+    number: 2229,
														
 
															+    checked: false
														
 
															+  },
														
 
															+  {
														
 
															+    name: 'CIF',
														
 
															+    number: 1000,
														
 
															+    checked: false
														
 
															+  }
														
 
															+])
														
 
															+const IncotermsSearch = (val: any) => {
														
 
															+  InputForm.value.General.Incoterms = val.data
														
 
															+  MoreFiltersObj[val.title] = val.data
														
 
															+}
														
 
															+const ServiceSearch = (val: any) => {
														
 
															+  InputForm.value.General.Service = val.data
														
 
															+  MoreFiltersObj[val.title] = val.data
														
 
															+}
														
 
															+</script>
														
 
															+<template>
														
 
															+  <div>
														
 
															+    <el-button class="More_Filters el-button--grey" @click="drawer = true">
														
 
															+      <span class="iconfont_icon icon_more">
														
 
															+        <svg class="iconfont" aria-hidden="true">
														
 
															+          <use xlink:href="#icon-icon_filter_b"></use>
														
 
															+        </svg>
														
 
															+      </span>
														
 
															+      <div class="Filters_title">More Filters</div>
														
 
															+    </el-button>
														
 
															+    <el-drawer size="400px" title="More Filters" v-model="drawer">
														
 
															+      <el-collapse @change="changeCollapse"
														
 
															+        ><!-- General -->
														
 
															+        <el-collapse-item class="collapse_item" name="General" v-if="props.isShipment">
														
 
															+          <template #title>
														
 
															+            <span class="collapse-title"
														
 
															+              >General <el-badge class="mark" :value="GeneralBadge" type="warning"
														
 
															+            /></span>
														
 
															+          </template>
														
 
															+          <div class="ETD">
														
 
															+            <div class="ETD_title">Incoterms</div>
														
 
															+            <SelectValue
														
 
															+              :checkAll="IncotermsCheckAll"
														
 
															+              title="Incoterms"
														
 
															+              :TransportListItem="IncotermsList"
														
 
															+              @generalSearch="IncotermsSearch"
														
 
															+              :Serval="InputForm.General.Incoterms"
														
 
															+            ></SelectValue>
														
 
															+          </div>
														
 
															+          <div class="ETA">
														
 
															+            <div class="ETD_title">Service</div>
														
 
															+            <SelectValue
														
 
															+              :checkAll="ServiceCheckAll"
														
 
															+              title="Service"
														
 
															+              :TransportListItem="SeiviceList"
														
 
															+              @generalSearch="ServiceSearch"
														
 
															+              :Serval="InputForm.General.Service"
														
 
															+            ></SelectValue>
														
 
															+          </div>
														
 
															+        </el-collapse-item>
														
 
															+        <!-- Parties -->
														
 
															+        <el-collapse-item class="collapse_item" name="Parties">
														
 
															+          <template #title>
														
 
															+            <span class="collapse-title"
														
 
															+              >Parties <el-badge class="mark" :value="PartiesBadge" type="warning"
														
 
															+            /></span>
														
 
															+          </template>
														
 
															+          <div class="ETD">
														
 
															+            <div class="ETD_title">Shipper Name</div>
														
 
															+            <AutoSelect
														
 
															+              ASType="contanct"
														
 
															+              @changeAutoSelect="changeAutoSelectshippername"
														
 
															+              :ASValue="InputForm.parties.shippername"
														
 
															+              ASPlaceholder="Please input shipper name"
														
 
															+            >
														
 
															+            </AutoSelect>
														
 
															+          </div>
														
 
															+          <div class="ETA">
														
 
															+            <div class="ETD_title">Consignee Name</div>
														
 
															+            <AutoSelect
														
 
															+              ASType="contanct"
														
 
															+              @changeAutoSelect="changeAutoSelectconsigneename"
														
 
															+              :ASValue="InputForm.parties.consigneename"
														
 
															+              ASPlaceholder="Please input consignee name"
														
 
															+            >
														
 
															+            </AutoSelect>
														
 
															+          </div>
														
 
															+          <SelectAutoSelect
														
 
															+            ref="partSelectTableSelectRef"
														
 
															+            :AddDateType="AddDateType"
														
 
															+            :DateTypeoptions="PartyTypeoptions"
														
 
															+            :Verification="verification"
														
 
															+            @changeAutoSelectAddType="changeAutoSelectAddType"
														
 
															+            @changeAutoSelect="changeAutoSelectVal"
														
 
															+            :selectedPartyTypeoptions="selectedPartyTypeoptions"
														
 
															+            @delSelect="delSelect"
														
 
															+            ASPlaceholder="Please input party name"
														
 
															+          >
														
 
															+          </SelectAutoSelect>
														
 
															+          <div
														
 
															+            class="MoreType"
														
 
															+            @click="AddType('party')"
														
 
															+            v-if="AddDateType.length != PartyTypeoptions.length"
														
 
															+          >
														
 
															+            + More Party Type
														
 
															+          </div>
														
 
															+        </el-collapse-item>
														
 
															+        <!-- Places -->
														
 
															+        <el-collapse-item class="collapse_item" name="Places">
														
 
															+          <template #title
														
 
															+            ><span class="collapse-title"
														
 
															+              >Places<el-badge class="mark" :value="PlacesBadge" type="warning" /></span
														
 
															+          ></template>
														
 
															+          <div class="ETD">
														
 
															+            <div class="ETD_title">Origin</div>
														
 
															+            <SelectTable :searchInput="InputForm.palces.origin" @check="checkorigin" />
														
 
															+          </div>
														
 
															+          <div class="ETA">
														
 
															+            <div class="ETD_title">Destination</div>
														
 
															+            <SelectTable :searchInput="InputForm.palces.destination" @check="checkdestination" />
														
 
															+          </div>
														
 
															+          <SelectTableSelect
														
 
															+            ref="placeSelectTableSelectRef"
														
 
															+            :AddDateType="AddDatePlaceType"
														
 
															+            :DateTypeoptions="PlaceTypeoptions"
														
 
															+            :Verification="placesVerification"
														
 
															+            @changeAutoSelectAddType="changeAutoSelectPlacesAddType"
														
 
															+            @changeAutoSelect="changeAutoSelectVal"
														
 
															+            :selectedPartyTypeoptions="selectedPlacesTypeoptions"
														
 
															+            @delSelect="delPlacesSelect"
														
 
															+            ASPlaceholder="Please input places name"
														
 
															+          >
														
 
															+          </SelectTableSelect>
														
 
															+          <!-- More Place Type -->
														
 
															+          <div
														
 
															+            class="MoreType"
														
 
															+            @click="AddType('place')"
														
 
															+            v-if="AddDatePlaceType.length != PlaceTypeoptions.length"
														
 
															+          >
														
 
															+            + More Place Type
														
 
															+          </div>
														
 
															+        </el-collapse-item>
														
 
															+        <!-- Transportation -->
														
 
															+        <el-collapse-item class="collapse_item" name="Transportation">
														
 
															+          <template #title
														
 
															+            ><span class="collapse-title"
														
 
															+              >Transportation
														
 
															+              <el-badge class="mark" :value="TransportationBadge" type="warning" /></span
														
 
															+          ></template>
														
 
															+          <div class="ETD">
														
 
															+            <div class="ETD_title">Vessel</div>
														
 
															+            <AutoSelect
														
 
															+              ASType="vessel"
														
 
															+              @changeAutoSelect="changeAutoSelectvessel"
														
 
															+              class="input_change"
														
 
															+              :ASValue="InputForm.transportation.vessel"
														
 
															+              ASPlaceholder="Please input vessel name or code"
														
 
															+            >
														
 
															+            </AutoSelect>
														
 
															+          </div>
														
 
															+          <div class="ETA">
														
 
															+            <div class="ETD_title">Voyage/Flight</div>
														
 
															+            <AutoSelect
														
 
															+              ASType="vessel"
														
 
															+              @changeAutoSelect="changeAutoSelectvoyage"
														
 
															+              class="input_change"
														
 
															+              :ASValue="InputForm.transportation.voyage"
														
 
															+              ASPlaceholder="Please input voyage or flight no."
														
 
															+            ></AutoSelect>
														
 
															+          </div>
														
 
															+        </el-collapse-item>
														
 
															+        <!-- Others -->
														
 
															+        <el-collapse-item class="collapse_item" name="Others">
														
 
															+          <template #title><span class="collapse-title">Others</span></template>
														
 
															+        </el-collapse-item>
														
 
															+      </el-collapse>
														
 
															+      <div class="more_bottom">
														
 
															+        <el-button class="reset" type="default" @click="clearrest">
														
 
															+          <span class="iconfont_icon select_icon">
														
 
															+            <svg class="iconfont" aria-hidden="true">
														
 
															+              <use xlink:href="#icon-icon_reset_b"></use>
														
 
															+            </svg>
														
 
															+          </span>
														
 
															+          Reset
														
 
															+        </el-button>
														
 
															+        <el-button class="reset el-button--dark" style="margin-left: 8px" @click="SearchMore">
														
 
															+          <span class="iconfont_icon select_icon search_icon">
														
 
															+            <svg class="iconfont" aria-hidden="true">
														
 
															+              <use xlink:href="#icon-icon_search_b"></use>
														
 
															+            </svg>
														
 
															+          </span>
														
 
															+          Search
														
 
															+        </el-button>
														
 
															+      </div>
														
 
															+    </el-drawer>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.icon_more {
														
 
															+  margin-left: 8px;
														
 
															+  margin-right: 0;
														
 
															+}
														
 
															+
														
 
															+.icon_delete {
														
 
															+  fill: var(--color-danger);
														
 
															+  cursor: pointer;
														
 
															+}
														
 
															+
														
 
															+.More_Filters {
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  height: 32px;
														
 
															+  font-size: var(--font-size-3);
														
 
															+  margin-left: 8px;
														
 
															+  width: 116px;
														
 
															+}
														
 
															+
														
 
															+.More_Filters:hover {
														
 
															+  .Filters_title {
														
 
															+    color: var(--color-theme);
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.select_icon {
														
 
															+  margin-right: 8px;
														
 
															+}
														
 
															+
														
 
															+.Filters_title {
														
 
															+  margin: 0 8px;
														
 
															+}
														
 
															+
														
 
															+:deep(.el-drawer__header) {
														
 
															+  background-color: var(--color-table-header-bg);
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  height: 64px;
														
 
															+  padding: 0;
														
 
															+  padding-left: 17.12px;
														
 
															+  margin-bottom: 0;
														
 
															+  color: var(--color-neutral-1);
														
 
															+}
														
 
															+
														
 
															+:deep(.el-drawer__title) {
														
 
															+  font-size: var(--font-size-6);
														
 
															+  font-weight: bold;
														
 
															+}
														
 
															+
														
 
															+:deep(.el-drawer__close-btn) {
														
 
															+  font-size: var(--font-size-4);
														
 
															+  color: var(--icon-color-black);
														
 
															+  margin-right: 24px;
														
 
															+  padding: 0;
														
 
															+}
														
 
															+
														
 
															+:deep(.el-drawer__body) {
														
 
															+  padding: 0;
														
 
															+  position: relative;
														
 
															+}
														
 
															+
														
 
															+.collapse-title {
														
 
															+  flex: 1 0 90%;
														
 
															+  order: 1;
														
 
															+  text-align: left;
														
 
															+}
														
 
															+
														
 
															+:deep(.el-collapse-item__header) {
														
 
															+  border-bottom: none;
														
 
															+  height: 48px;
														
 
															+  color: var(--icon-color-blac);
														
 
															+  font-size: var(--font-size-4);
														
 
															+  font-weight: bold;
														
 
															+  padding-left: 16px;
														
 
															+}
														
 
															+
														
 
															+:deep(.el-collapse-item__wrap) {
														
 
															+  border-bottom: none;
														
 
															+  background-color: var(--more-filters-background-color);
														
 
															+}
														
 
															+
														
 
															+.ETD {
														
 
															+  margin: 8px 16px;
														
 
															+}
														
 
															+
														
 
															+.ETA {
														
 
															+  margin: 16px 16px;
														
 
															+}
														
 
															+
														
 
															+.ETD_title {
														
 
															+  font-size: var(--font-size-2);
														
 
															+  color: var(--color-neutral-2);
														
 
															+}
														
 
															+
														
 
															+.Date_Title {
														
 
															+  display: flex;
														
 
															+  justify-content: space-between;
														
 
															+  align-items: center;
														
 
															+}
														
 
															+
														
 
															+.MoreType {
														
 
															+  color: var(--color-accent-2);
														
 
															+  padding: 0 0 16px 16px;
														
 
															+  cursor: pointer;
														
 
															+}
														
 
															+
														
 
															+.AddType {
														
 
															+  background-color: var(--addparties-background-color);
														
 
															+  margin: 0 16px 8px 16px;
														
 
															+  padding: 8px;
														
 
															+  border-radius: var(--border-radius-6);
														
 
															+}
														
 
															+
														
 
															+.more_bottom {
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  bottom: 0;
														
 
															+  height: 64px;
														
 
															+  border-top: 1px solid var(--color-border-top);
														
 
															+  width: 400px;
														
 
															+  padding: 16px;
														
 
															+}
														
 
															+
														
 
															+.reset {
														
 
															+  width: 180px;
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  height: 40px;
														
 
															+  justify-content: center;
														
 
															+  border: 1px solid var(--color-accent-13);
														
 
															+  border-radius: var(--border-radius-6);
														
 
															+}
														
 
															+
														
 
															+.AlertInput :deep(.el-select__wrapper) {
														
 
															+  box-shadow: 0 0 0 0.5px var(--color-danger);
														
 
															+}
														
 
															+
														
 
															+:deep(.el-drawer__body) {
														
 
															+  padding: 0 !important;
														
 
															+  display: flex;
														
 
															+  flex-direction: column;
														
 
															+  justify-content: space-between;
														
 
															+  overflow-x: hidden;
														
 
															+}
														
 
															+
														
 
															+:deep(.el-overlay) {
														
 
															+  background-color: transparent;
														
 
															+}
														
 
															+:deep(.el-drawer__close-btn) {
														
 
															+  margin-right: 0;
														
 
															+}
														
 
															+</style>
														
--- a/src/components/MoreFilters/src/components/SelectValue.vue
+++ b/src/components/MoreFilters/src/components/SelectValue.vue
@@ -0,0 +1,283 @@
 
															+<script setup lang="ts">
														
 
															+import { ref, watch, computed } from 'vue'
														
 
															+import type { DropdownInstance } from 'element-plus'
														
 
															+
														
 
															+interface ListItem {
														
 
															+  name: string
														
 
															+  number: number
														
 
															+  checked: boolean
														
 
															+}
														
 
															+interface Props {
														
 
															+  TransportListItem: ListItem[]
														
 
															+  title: String
														
 
															+  Serval: String
														
 
															+  checkAll: boolean
														
 
															+}
														
 
															+const props = withDefaults(defineProps<Props>(), {
														
 
															+  checkAll: false
														
 
															+})
														
 
															+const TransportList = ref(props.TransportListItem)
														
 
															+const Title = ref(props.title)
														
 
															+const Serval = ref(props.Serval)
														
 
															+const checkAll = ref(props.checkAll)
														
 
															+watch(
														
 
															+  () => props.TransportListItem,
														
 
															+  (current) => {
														
 
															+    TransportList.value = current
														
 
															+  }
														
 
															+)
														
 
															+watch(
														
 
															+  () => props.Serval,
														
 
															+  (current) => {
														
 
															+    Serval.value = current
														
 
															+  }
														
 
															+)
														
 
															+watch(
														
 
															+  () => props.checkAll,
														
 
															+  (current) => {
														
 
															+    checkAll.value = current
														
 
															+  }
														
 
															+)
														
 
															+
														
 
															+const dropdown1 = ref<DropdownInstance>()
														
 
															+let checkedCount: any[] = []
														
 
															+const TotalAll = computed(() => {
														
 
															+  var total_sum = 0
														
 
															+  if (TransportList.value != undefined) {
														
 
															+    TransportList.value.map((item) => {
														
 
															+      total_sum += item.number
														
 
															+    })
														
 
															+  }
														
 
															+  return total_sum
														
 
															+})
														
 
															+
														
 
															+const handleCheckAllChange = (val: any) => {
														
 
															+  checkedCount = []
														
 
															+  TransportList.value.forEach((item: any) => {
														
 
															+    if (val) {
														
 
															+      item.checked = true
														
 
															+      checkedCount.push(item.name)
														
 
															+    } else {
														
 
															+      item.checked = false
														
 
															+      checkedCount = []
														
 
															+    }
														
 
															+  })
														
 
															+}
														
 
															+const handleCheckedTransportChange = (value: any, checked: any, index: any) => {
														
 
															+  if (checked) {
														
 
															+    checkedCount.push(value)
														
 
															+    const map = new Map()
														
 
															+    checkedCount.forEach((item) => map.set(item, true))
														
 
															+    checkedCount = [...map.keys()]
														
 
															+  } else {
														
 
															+    if (checkedCount.length == 1) {
														
 
															+      checkedCount.splice(0, 1)
														
 
															+    } else {
														
 
															+      checkedCount.splice(index, 1)
														
 
															+    }
														
 
															+  }
														
 
															+  checkAll.value = checkedCount.length === TransportList.value.length
														
 
															+}
														
 
															+
														
 
															+// 清除选中
														
 
															+const clearList = () => {
														
 
															+  checkAll.value = false
														
 
															+  TransportList.value.forEach((item: any) => {
														
 
															+    item.checked = false
														
 
															+  })
														
 
															+  changedata.value = ''
														
 
															+  checkedCount = []
														
 
															+}
														
 
															+const emit = defineEmits(['generalSearch'])
														
 
															+const changedata = ref()
														
 
															+//点击搜索
														
 
															+const TransportSearch = (visible: any) => {
														
 
															+  if (checkedCount.length == TransportList.value.length) {
														
 
															+    changedata.value = 'All'
														
 
															+  } else {
														
 
															+    changedata.value = checkedCount.join(', ')
														
 
															+  }
														
 
															+  const TransportData = {
														
 
															+    title: Title.value,
														
 
															+    data: changedata.value
														
 
															+  }
														
 
															+  Serval.value = changedata.value
														
 
															+  emit('generalSearch', TransportData)
														
 
															+  if (!dropdown1.value) return
														
 
															+  if (visible) {
														
 
															+    dropdown1.value.handleClose()
														
 
															+  } else {
														
 
															+    dropdown1.value.handleOpen()
														
 
															+  }
														
 
															+}
														
 
															+</script>
														
 
															+<template>
														
 
															+  <div class="select">
														
 
															+    <el-dropdown ref="dropdown1" trigger="click" :hide-on-click="false">
														
 
															+      <div class="el-dropdown-link">
														
 
															+        <div v-if="Serval == 'Please Select Date Range' || Serval == ''" class="select_title">
														
 
															+          Please Select Date Range
														
 
															+        </div>
														
 
															+        <div v-else class="select_title_2">{{ Serval }}</div>
														
 
															+        <span class="iconfont_icon">
														
 
															+          <svg class="iconfont" aria-hidden="true">
														
 
															+            <use xlink:href="#icon-icon_dropdown_b"></use>
														
 
															+          </svg>
														
 
															+        </span>
														
 
															+      </div>
														
 
															+      <template #dropdown>
														
 
															+        <div class="dropdownwidth">
														
 
															+          <div class="title">{{ Title }} {{ checkAll }}</div>
														
 
															+          <el-dropdown-menu>
														
 
															+            <el-dropdown-item>
														
 
															+              <el-checkbox v-model="checkAll" class="checkbox" @change="handleCheckAllChange">
														
 
															+                <div class="checkbox_title">Select All</div>
														
 
															+                <div class="checkbox_number">({{ TotalAll }})</div>
														
 
															+              </el-checkbox>
														
 
															+            </el-dropdown-item>
														
 
															+            <el-divider></el-divider>
														
 
															+            <el-dropdown-item v-for="(item, index) in TransportList" :key="index">
														
 
															+              <el-checkbox
														
 
															+                :value="item.name"
														
 
															+                v-model="item.checked"
														
 
															+                class="checkbox"
														
 
															+                @change="handleCheckedTransportChange(item.name, item.checked, index)"
														
 
															+              >
														
 
															+                <div class="checkbox_title">
														
 
															+                  {{ item.name }}
														
 
															+                </div>
														
 
															+                <div class="checkbox_number">({{ item.number }})</div>
														
 
															+              </el-checkbox>
														
 
															+            </el-dropdown-item>
														
 
															+            <div class="transport_bottom">
														
 
															+              <div>
														
 
															+                <el-button class="clear" type="default" @click="clearList">Reset</el-button>
														
 
															+              </div>
														
 
															+              <div>
														
 
															+                <el-button class="search el-button--dark" @click="TransportSearch">OK</el-button>
														
 
															+              </div>
														
 
															+            </div>
														
 
															+          </el-dropdown-menu>
														
 
															+        </div>
														
 
															+      </template>
														
 
															+    </el-dropdown>
														
 
															+  </div>
														
 
															+</template>
														
 
															+<style lang="scss" scoped>
														
 
															+.iconfont_icon {
														
 
															+  margin-right: 8px;
														
 
															+}
														
 
															+.iconfont_select {
														
 
															+  width: 17px;
														
 
															+  height: 17px;
														
 
															+}
														
 
															+.select {
														
 
															+  cursor: pointer;
														
 
															+  width: 368px;
														
 
															+  height: 40px;
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  justify-content: space-between;
														
 
															+  background-color: white;
														
 
															+  border: 1px solid var(--color-border);
														
 
															+  border-radius: var(--border-radius-6);
														
 
															+}
														
 
															+.select:hover {
														
 
															+  border: 1px solid var(--color-theme);
														
 
															+}
														
 
															+.el-dropdown-link {
														
 
															+  width: 360px;
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  justify-content: space-between;
														
 
															+}
														
 
															+.select_title {
														
 
															+  font-size: var(--font-size-3);
														
 
															+  font-weight: 400;
														
 
															+  margin-left: 8.53px;
														
 
															+  color: var(--color-neutral-3);
														
 
															+}
														
 
															+.select_title_2 {
														
 
															+  font-size: var(--font-size-3);
														
 
															+  font-weight: 400;
														
 
															+  margin-left: 8.53px;
														
 
															+  color: var(--color-neutral-1);
														
 
															+}
														
 
															+.title {
														
 
															+  font-weight: 700;
														
 
															+  font-size: var(--font-size-5);
														
 
															+  background-color: var(--color-header-bg);
														
 
															+  height: 48px;
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  padding-left: 16px;
														
 
															+}
														
 
															+.checkbox {
														
 
															+  width: 216px;
														
 
															+  font-weight: 400;
														
 
															+  font-size: var(--font-size-3);
														
 
															+  padding: 0 12px;
														
 
															+  height: 40px;
														
 
															+}
														
 
															+:deep(.el-popper__arrow, .el-popper__arrow:before) {
														
 
															+  height: 0;
														
 
															+  width: 0;
														
 
															+}
														
 
															+:deep(.el-checkbox__label) {
														
 
															+  width: 176px;
														
 
															+  padding-left: 13px;
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  justify-content: space-between;
														
 
															+}
														
 
															+.checkbox_title {
														
 
															+  color: var(--color-neutral-1);
														
 
															+}
														
 
															+.checkbox_number {
														
 
															+  color: var(--color-neutral-3);
														
 
															+}
														
 
															+.transport_bottom {
														
 
															+  display: flex;
														
 
															+  justify-content: flex-end;
														
 
															+  align-items: center;
														
 
															+  height: 48px;
														
 
															+  border-top: 1px solid var(--color-border);
														
 
															+  margin-top: 5px;
														
 
															+  font-weight: 400;
														
 
															+  font-size: var(--font-size-3);
														
 
															+}
														
 
															+.clear {
														
 
															+  width: 81px;
														
 
															+  height: 32px;
														
 
															+  margin-right: 7.82px;
														
 
															+}
														
 
															+.search {
														
 
															+  width: 86px;
														
 
															+  height: 32px;
														
 
															+  margin-right: 16px;
														
 
															+}
														
 
															+.search:hover {
														
 
															+  color: var(--color-theme);
														
 
															+}
														
 
															+:deep(.el-dropdown-menu__item:hover) {
														
 
															+  background-color: var(--border-hover-color);
														
 
															+  border-radius: var(--border-radius-6);
														
 
															+  border-color: var(--border-hover-color);
														
 
															+}
														
 
															+:deep(.el-dropdown-menu__item) {
														
 
															+  padding: 0;
														
 
															+  margin: 10px 16px;
														
 
															+}
														
 
															+:deep(.el-dropdown-menu__item:not(.is-disabled):focus) {
														
 
															+  background-color: var(--border-hover-color);
														
 
															+  border-radius: var(--border-radius-6);
														
 
															+  border-color: var(--border-hover-color);
														
 
															+}
														
 
															+.dropdownwidth {
														
 
															+  width: 360px;
														
 
															+}
														
 
															+.el-divider--horizontal {
														
 
															+  margin: 8px 0;
														
 
															+  border-top-color: var(--color-border);
														
 
															+}
														
 
															+</style>
														
--- a/src/components/ScoringGrade/components/DialogColorful.vue
+++ b/src/components/ScoringGrade/components/DialogColorful.vue
@@ -0,0 +1,111 @@
 
															+<script setup lang="ts">
														
 
															+import { ref } from 'vue'
														
 
															+const props = defineProps({
														
 
															+  colorfulSrc: String,
														
 
															+  isshowexpression: Boolean,
														
 
															+  isshowDetails: Boolean
														
 
															+})
														
 
															+const inputdetails = ref('')
														
 
															+const emits = defineEmits(['submitDetails'])
														
 
															+const submitDetails = (val: any) => {
														
 
															+  emits('submitDetails', val)
														
 
															+}
														
 
															+</script>
														
 
															+<template>
														
 
															+  <div class="colorfulflex">
														
 
															+    <div v-if="props.isshowexpression" class="dialogcolorful">
														
 
															+      <div class="dialogue">
														
 
															+        <img :src="props.colorfulSrc" />
														
 
															+      </div>
														
 
															+      <div class="vector">
														
 
															+        <img class="vector_img" src="/src/styles/images/bubble_corner_colorful.png" />
														
 
															+      </div>
														
 
															+    </div>
														
 
															+    <div v-if="props.isshowDetails" class="dialogcolorful submit">
														
 
															+      <div class="dialogue dialoguesubmit">
														
 
															+        <el-input
														
 
															+          class="inputdetails"
														
 
															+          v-model="inputdetails"
														
 
															+          style="width: 554px"
														
 
															+          :rows="4"
														
 
															+          type="textarea"
														
 
															+          placeholder="We look forward to hearing from you.  thank you for helping to build a better customer system"
														
 
															+        />
														
 
															+        <div class="button_submit">
														
 
															+          <el-button class="submit_button el-button--dark" @click="submitDetails(inputdetails)"
														
 
															+            >Submit</el-button
														
 
															+          >
														
 
															+        </div>
														
 
															+      </div>
														
 
															+      <div class="vector vector_submit">
														
 
															+        <img class="vector_img" src="/src/styles/images/bubble_corner_colorful.png" />
														
 
															+      </div>
														
 
															+    </div>
														
 
															+  </div>
														
 
															+</template>
														
 
															+<style lang="scss" scoped>
														
 
															+.colorfulflex {
														
 
															+  display: flex;
														
 
															+  justify-content: end;
														
 
															+  margin-bottom: 8px;
														
 
															+}
														
 
															+.dialogcolorful {
														
 
															+  width: 56px;
														
 
															+  display: flex;
														
 
															+  flex-direction: column;
														
 
															+}
														
 
															+.submit {
														
 
															+  width: 570px;
														
 
															+  margin: auto;
														
 
															+}
														
 
															+.dialogue {
														
 
															+  color: var(--tag-info-text-color);
														
 
															+  font-size: var(--font-size-4);
														
 
															+  border-radius: var(--border-radius-12) var(--border-radius-12) 0 var(--border-radius-12);
														
 
															+  background: linear-gradient(251deg, rgba(242, 244, 247) 0%, rgba(255, 237, 230) 100%);
														
 
															+  padding: 8px;
														
 
															+  width: 56px;
														
 
															+  height: 56px;
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  justify-content: center;
														
 
															+}
														
 
															+.dialoguesubmit {
														
 
															+  width: 570px;
														
 
															+  display: block;
														
 
															+  height: auto;
														
 
															+}
														
 
															+.vector {
														
 
															+  width: 56px;
														
 
															+  height: 8px;
														
 
															+  display: flex;
														
 
															+  justify-content: end;
														
 
															+}
														
 
															+.vector_submit {
														
 
															+  width: 570px;
														
 
															+}
														
 
															+.vector_img {
														
 
															+  vertical-align: top;
														
 
															+}
														
 
															+:deep(.el-textarea) {
														
 
															+  .el-textarea__inner {
														
 
															+    resize: none; // 去除右下角图标
														
 
															+    padding: 5px 7px 5px 10px;
														
 
															+  }
														
 
															+}
														
 
															+.submit_button {
														
 
															+  width: 180px;
														
 
															+  height: 40px;
														
 
															+}
														
 
															+.button_submit {
														
 
															+  width: 553px;
														
 
															+  margin-top: 9.51px;
														
 
															+  display: flex;
														
 
															+  justify-content: end;
														
 
															+}
														
 
															+:deep(.el-button > span) {
														
 
															+  color: #ffffff !important;
														
 
															+  font-weight: 400;
														
 
															+  font-size: var(--font-size-3);
														
 
															+}
														
 
															+</style>
														
--- a/src/components/ScoringGrade/components/DialogUe.vue
+++ b/src/components/ScoringGrade/components/DialogUe.vue
@@ -0,0 +1,218 @@
 
															+<script setup lang="ts">
														
 
															+import { ref } from 'vue'
														
 
															+
														
 
															+const props = defineProps({
														
 
															+  content: String,
														
 
															+  dialogWidth: String,
														
 
															+  isShowAngry: Boolean,
														
 
															+  isShowSmile: Boolean
														
 
															+})
														
 
															+const checkboxGroup1 = ref([])
														
 
															+const evaluate = [
														
 
															+  'Complete funtionality',
														
 
															+  'Accurate information',
														
 
															+  'Visualization of shipments',
														
 
															+  'Easy to use',
														
 
															+  'Performance'
														
 
															+]
														
 
															+const emits = defineEmits(['changeAngryDetails', 'changeSmileRadio'])
														
 
															+const changebuttonbox = () => {
														
 
															+  emits('changeAngryDetails')
														
 
															+}
														
 
															+const Aspects = ref([
														
 
															+  'Highly Dissatisfied',
														
 
															+  'Dissatisfied',
														
 
															+  'Neutral',
														
 
															+  'Satisfied',
														
 
															+  'Highly Satisfied'
														
 
															+])
														
 
															+
														
 
															+interface smileAspectsItem {
														
 
															+  title: string
														
 
															+  proposal: Array<string>
														
 
															+  radio: string
														
 
															+}
														
 
															+const smileAspects = ref<smileAspectsItem[]>([])
														
 
															+smileAspects.value = [
														
 
															+  {
														
 
															+    title: 'Complete funtionality',
														
 
															+    proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
														
 
															+    radio: ''
														
 
															+  },
														
 
															+  {
														
 
															+    title: 'Accurate information',
														
 
															+    proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
														
 
															+    radio: ''
														
 
															+  },
														
 
															+  {
														
 
															+    title: 'Visualization of shipments',
														
 
															+    proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
														
 
															+    radio: ''
														
 
															+  },
														
 
															+  {
														
 
															+    title: 'Easy to use',
														
 
															+    proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
														
 
															+    radio: ''
														
 
															+  },
														
 
															+  {
														
 
															+    title: 'Performance',
														
 
															+    proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
														
 
															+    radio: ''
														
 
															+  }
														
 
															+]
														
 
															+let SmileObj: any = {}
														
 
															+const changeSmileRadio = (title: any, value: any) => {
														
 
															+  SmileObj[title] = value
														
 
															+  emits('changeSmileRadio', SmileObj)
														
 
															+}
														
 
															+</script>
														
 
															+<template>
														
 
															+  <div style="margin-bottom: 8px">
														
 
															+    <div class="dialogue" :style="{ width: props.dialogWidth }">
														
 
															+      {{ props.content }}
														
 
															+      <div v-if="props.isShowAngry" class="dialogflex">
														
 
															+        <el-checkbox-group v-model="checkboxGroup1" size="large">
														
 
															+          <el-checkbox-button
														
 
															+            @change="changebuttonbox"
														
 
															+            v-for="item in evaluate"
														
 
															+            :key="item"
														
 
															+            :value="item"
														
 
															+          >
														
 
															+            {{ item }}
														
 
															+          </el-checkbox-button>
														
 
															+        </el-checkbox-group>
														
 
															+      </div>
														
 
															+      <div v-if="props.isShowSmile">
														
 
															+        <div class="smile_flex">
														
 
															+          <div class="smile_title_left"></div>
														
 
															+          <div class="smile_title_right">
														
 
															+            <div class="smile_title" v-for="item in Aspects" :key="item">
														
 
															+              {{ item }}
														
 
															+            </div>
														
 
															+          </div>
														
 
															+        </div>
														
 
															+        <div class="smile_content_flex" v-for="(item, index) in smileAspects" :key="index">
														
 
															+          <div class="smile_title_left content_left">{{ item.title }}</div>
														
 
															+          <div class="smile_title_right content_right">
														
 
															+            <el-radio-group v-model="item.radio" @change="changeSmileRadio(item.title, item.radio)">
														
 
															+              <el-radio
														
 
															+                class="smile_radio"
														
 
															+                v-for="proposal in item.proposal"
														
 
															+                :value="proposal"
														
 
															+                :key="proposal"
														
 
															+              ></el-radio>
														
 
															+            </el-radio-group>
														
 
															+          </div>
														
 
															+        </div>
														
 
															+      </div>
														
 
															+    </div>
														
 
															+    <div class="vector"><img class="vector_img" src="/src/styles/images/bubble_corner.png" /></div>
														
 
															+  </div>
														
 
															+</template>
														
 
															+<style lang="scss" scoped>
														
 
															+.dialogflex {
														
 
															+  display: flex;
														
 
															+  margin-top: 8px;
														
 
															+}
														
 
															+.dialogue {
														
 
															+  color: var(--tag-info-text-color);
														
 
															+  font-size: var(--font-size-4);
														
 
															+  border-radius: var(--border-radius-12) var(--border-radius-12) var(--border-radius-12) 0;
														
 
															+  background-color: #f2f4f7;
														
 
															+  padding: 8px;
														
 
															+}
														
 
															+.vector {
														
 
															+  height: 8px;
														
 
															+}
														
 
															+.vector_img {
														
 
															+  vertical-align: top;
														
 
															+}
														
 
															+:deep(.el-checkbox-button__inner) {
														
 
															+  color: var(--tag-info-text-color);
														
 
															+  font-size: var(--font-size-3);
														
 
															+  font-weight: 400;
														
 
															+  padding: 0;
														
 
															+  width: 180px;
														
 
															+  height: 40px;
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  justify-content: center;
														
 
															+  border: 1px solid var(--color-border);
														
 
															+  border-radius: var(--border-radius-6);
														
 
															+  margin-bottom: 8px;
														
 
															+}
														
 
															+:deep(.el-checkbox-button__inner:hover) {
														
 
															+  color: var(--color-theme);
														
 
															+  background-color: var(--color-btn-default-bg-hover);
														
 
															+  border-color: var(--color-btn-default-bg-hover);
														
 
															+}
														
 
															+:deep(.el-checkbox-button.is-focus .el-checkbox-button__inner) {
														
 
															+  border-color: transparent;
														
 
															+}
														
 
															+:deep(.el-checkbox-button:first-child .el-checkbox-button__inner) {
														
 
															+  border-left: 1px solid var(--color-border);
														
 
															+  border-top-left-radius: var(--border-radius-6);
														
 
															+  border-bottom-left-radius: var(--border-radius-6);
														
 
															+}
														
 
															+:deep(.el-checkbox-button:last-child .el-checkbox-button__inner) {
														
 
															+  border-top-right-radius: var(--border-radius-6);
														
 
															+  border-bottom-right-radius: var(--border-radius-6);
														
 
															+}
														
 
															+:deep(.el-checkbox-button:nth-child(3n + 1)) {
														
 
															+  margin-right: 8px;
														
 
															+}
														
 
															+:deep(.el-checkbox-button:nth-child(3n + 2)) {
														
 
															+  margin-right: 8px;
														
 
															+}
														
 
															+:deep(.el-checkbox-button.is-checked .el-checkbox-button__inner) {
														
 
															+  color: #ffffff;
														
 
															+  background-color: var(--color-theme);
														
 
															+  border-color: var(--color-theme);
														
 
															+}
														
 
															+.smile_flex {
														
 
															+  display: flex;
														
 
															+  margin-top: 20px;
														
 
															+}
														
 
															+.smile_title_left {
														
 
															+  width: 176px;
														
 
															+}
														
 
															+.smile_title_right {
														
 
															+  display: flex;
														
 
															+}
														
 
															+.smile_title {
														
 
															+  width: 75.4px;
														
 
															+  font-size: var(--font-size-2);
														
 
															+  line-height: 16px;
														
 
															+  font-weight: 400;
														
 
															+  display: flex;
														
 
															+  justify-content: center;
														
 
															+  align-items: end;
														
 
															+  text-align: center;
														
 
															+}
														
 
															+.smile_content_flex {
														
 
															+  display: flex;
														
 
															+  margin-top: 8px;
														
 
															+}
														
 
															+.content_left {
														
 
															+  height: 41px;
														
 
															+  background-color: #fff;
														
 
															+  font-weight: 400;
														
 
															+  font-size: var(--font-size-3);
														
 
															+  border-radius: 6px 0 0 6px;
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  padding-left: 7px;
														
 
															+}
														
 
															+.smile_radio {
														
 
															+  width: 75.4px;
														
 
															+  display: flex;
														
 
															+  justify-content: center;
														
 
															+}
														
 
															+.content_right {
														
 
															+  background-color: #e0e2e6;
														
 
															+  border-radius: 0 6px 6px 0;
														
 
															+}
														
 
															+.el-radio {
														
 
															+  margin-right: 0;
														
 
															+}
														
 
															+</style>
														
--- a/src/components/ScoringGrade/index.ts
+++ b/src/components/ScoringGrade/index.ts
@@ -0,0 +1 @@
 
															+export { default } from './src/ScoringGrade.vue'
														
--- a/src/components/ScoringGrade/src/ScoringGrade.vue
+++ b/src/components/ScoringGrade/src/ScoringGrade.vue
@@ -0,0 +1,293 @@
 
															+<script setup lang="ts">
														
 
															+import { ref } from 'vue'
														
 
															+import DialogUe from '../components/DialogUe.vue'
														
 
															+import DialogColorful from '../components/DialogColorful.vue'
														
 
															+
														
 
															+const isShow = ref(true)
														
 
															+const visible = ref(false)
														
 
															+const isLoaded = ref(false)
														
 
															+const isShowAngry = ref(false)
														
 
															+const isShowSmile = ref(false)
														
 
															+const isLoaded_share = ref(false)
														
 
															+const isshowexpression = ref(true)
														
 
															+const isshowexpression_details = ref(false)
														
 
															+const isshowDetails_submit = ref(false)
														
 
															+const isshowDetails = ref(true)
														
 
															+interface AvaterItem {
														
 
															+  src: string
														
 
															+  itemsrc: string
														
 
															+  itemtext: string
														
 
															+  expression: string
														
 
															+  proposal: string
														
 
															+}
														
 
															+const avater = ref<AvaterItem[]>([])
														
 
															+const colorfulSrc = ref()
														
 
															+const dialogcontent = ref()
														
 
															+const angryproposal = ref()
														
 
															+const smileproposal = ref()
														
 
															+const clickSrc = ref('/src/styles/images/score_normal.png')
														
 
															+avater.value = [
														
 
															+  {
														
 
															+    src: '/src/styles/images/score_angry.png',
														
 
															+    itemsrc: '/src/styles/images/angry_2.png',
														
 
															+    itemtext: 'We are so sorry for the inconveniences. We value your experience immensely. ',
														
 
															+    expression: 'angry',
														
 
															+    proposal: 'Could you please tell us which aspects of the system you are dissatisfied with?'
														
 
															+  },
														
 
															+  {
														
 
															+    src: '/src/styles/images/score_sad.png',
														
 
															+    itemsrc: '/src/styles/images/sad_2.png',
														
 
															+    itemtext: 'We are so sorry for the inconveniences. We value your experience immensely. ',
														
 
															+    expression: 'angry',
														
 
															+    proposal: 'Could you please tell us which aspects of the system you are dissatisfied with?'
														
 
															+  },
														
 
															+  {
														
 
															+    src: '/src/styles/images/score_smile.png',
														
 
															+    itemsrc: '/src/styles/images/smile_2.png',
														
 
															+    itemtext: 'Thank you for sharing your thoughts with us. We value your experience greatly.',
														
 
															+    expression: 'smile',
														
 
															+    proposal: 'Could you share what aspects you liked and what could be improved ?'
														
 
															+  },
														
 
															+  {
														
 
															+    src: '/src/styles/images/score_hhh.png',
														
 
															+    itemsrc: '/src/styles/images/hhh_2.png',
														
 
															+    itemtext: 'Thank you very much for giving us a satisfied rating on our service or system.',
														
 
															+    expression: 'happy',
														
 
															+    proposal: 'We are curious to learn more about what specifically made you feel satisfied. '
														
 
															+  },
														
 
															+  {
														
 
															+    src: '/src/styles/images/score_happy.png',
														
 
															+    itemsrc: '/src/styles/images/happy_2.png',
														
 
															+    itemtext: 'Thank you very much for giving us a satisfied rating on our service or system.',
														
 
															+    expression: 'happy',
														
 
															+    proposal: 'We are curious to learn more about what specifically made you feel satisfied. '
														
 
															+  }
														
 
															+]
														
 
															+const dialogVisible = ref(false)
														
 
															+
														
 
															+// 控制表情normal的显隐
														
 
															+const showPopver = () => {
														
 
															+  isShow.value = false
														
 
															+}
														
 
															+// 控制popover的显隐
														
 
															+const showScore = (item: any) => {
														
 
															+  visible.value = false
														
 
															+  dialogVisible.value = true
														
 
															+  clickSrc.value = item.itemsrc
														
 
															+  isShow.value = true
														
 
															+  colorfulSrc.value = item.itemsrc
														
 
															+  setTimeout(() => {
														
 
															+    isLoaded.value = true
														
 
															+    dialogcontent.value = item.itemtext
														
 
															+    if (item.expression == 'angry') {
														
 
															+      setTimeout(() => {
														
 
															+        isShowAngry.value = true
														
 
															+        angryproposal.value = item.proposal
														
 
															+      }, 1500)
														
 
															+    } else if (item.expression == 'smile') {
														
 
															+      setTimeout(() => {
														
 
															+        isShowSmile.value = true
														
 
															+        smileproposal.value = item.proposal
														
 
															+      }, 1500)
														
 
															+    } else {
														
 
															+      setTimeout(() => {
														
 
															+        isShowAngry.value = true
														
 
															+        angryproposal.value = item.proposal
														
 
															+      }, 1500)
														
 
															+    }
														
 
															+  }, 1000)
														
 
															+}
														
 
															+const avatarClick = () => {
														
 
															+  visible.value = true
														
 
															+  isshowDetails.value = true
														
 
															+}
														
 
															+//关闭对话框后，隐藏有动画的对话框
														
 
															+const closeDialog = () => {
														
 
															+  isLoaded.value = false
														
 
															+  isLoaded.value = false
														
 
															+  isLoaded_share.value = false
														
 
															+  isShowAngry.value = false
														
 
															+  isshowDetails.value = false
														
 
															+  isShowSmile.value = false
														
 
															+  isshowexpression_details.value = false
														
 
															+}
														
 
															+//生气表情，选择建议后显示对话
														
 
															+const changeAngryDetails = () => {
														
 
															+  setTimeout(() => {
														
 
															+    isLoaded_share.value = true
														
 
															+    setTimeout(() => {
														
 
															+      isshowexpression_details.value = true
														
 
															+    }, 1500)
														
 
															+  }, 1500)
														
 
															+}
														
 
															+// smile提交后显示对话
														
 
															+const changeSmileRadio = (val: any) => {
														
 
															+  if (Object.keys(val).length == 5) {
														
 
															+    changeAngryDetails()
														
 
															+  }
														
 
															+}
														
 
															+// 提交details
														
 
															+const submitDetails = (val: any) => {
														
 
															+  console.log(val)
														
 
															+  isshowDetails_submit.value = true
														
 
															+}
														
 
															+</script>
														
 
															+<template>
														
 
															+  <div class="scoring" :style="[{ display: isShow ? 'flex' : 'none' }]">
														
 
															+    <el-popover
														
 
															+      @show="showPopver"
														
 
															+      :visible="visible"
														
 
															+      placement="left"
														
 
															+      trigger="click"
														
 
															+      :width="367"
														
 
															+      popper-class="popver_class"
														
 
															+    >
														
 
															+      <template #reference>
														
 
															+        <el-avatar
														
 
															+          @click="avatarClick"
														
 
															+          :style="[{ display: isShow ? 'block' : 'none' }]"
														
 
															+          :size="46"
														
 
															+          shape="square"
														
 
															+          :src="clickSrc"
														
 
															+        />
														
 
															+      </template>
														
 
															+      <div class="flex">
														
 
															+        <el-popover
														
 
															+          placement="top"
														
 
															+          :width="260"
														
 
															+          trigger="hover"
														
 
															+          v-for="(item, index) in avater"
														
 
															+          :key="index"
														
 
															+          content="How satisfied are you with this system?"
														
 
															+        >
														
 
															+          <template #reference>
														
 
															+            <div class="score">
														
 
															+              <el-avatar @click="showScore(item)" :size="40" shape="square" :src="item.src" />
														
 
															+            </div>
														
 
															+          </template>
														
 
															+        </el-popover>
														
 
															+      </div>
														
 
															+    </el-popover>
														
 
															+    <el-dialog
														
 
															+      v-model="dialogVisible"
														
 
															+      title="Hi,Caroline!"
														
 
															+      :destroy-on-close="true"
														
 
															+      @close="closeDialog"
														
 
															+      width="640"
														
 
															+      :modal="false"
														
 
															+      top="0"
														
 
															+      class="scoreDialog"
														
 
															+      custom-class="my-dialog"
														
 
															+      :close-on-click-modal="false"
														
 
															+    >
														
 
															+      <div v-if="isshowDetails">
														
 
															+        <DialogUe content="How satisfied are you with this system ?" dialogWidth="298px"></DialogUe>
														
 
															+        <DialogColorful
														
 
															+          :colorfulSrc="colorfulSrc"
														
 
															+          :isshowexpression="isshowexpression"
														
 
															+        ></DialogColorful>
														
 
															+        <transition name="fade">
														
 
															+          <DialogUe v-if="isLoaded" :content="dialogcontent" dialogWidth="573px"></DialogUe>
														
 
															+        </transition>
														
 
															+        <transition name="fade" v-if="isShowAngry">
														
 
															+          <DialogUe
														
 
															+            :content="angryproposal"
														
 
															+            :isShowAngry="isShowAngry"
														
 
															+            @changeAngryDetails="changeAngryDetails"
														
 
															+            dialogWidth="573px"
														
 
															+          ></DialogUe>
														
 
															+        </transition>
														
 
															+        <transition name="fade" v-if="isShowSmile">
														
 
															+          <DialogUe
														
 
															+            :isShowSmile="isShowSmile"
														
 
															+            @changeSmileRadio="changeSmileRadio"
														
 
															+            :content="smileproposal"
														
 
															+            dialogWidth="573px"
														
 
															+          ></DialogUe>
														
 
															+        </transition>
														
 
															+        <transition name="fade" v-if="isLoaded_share">
														
 
															+          <DialogUe
														
 
															+            content="Would you like to share more details with us?"
														
 
															+            dialogWidth="334px"
														
 
															+          ></DialogUe>
														
 
															+        </transition>
														
 
															+        <transition name="fade" v-if="isshowexpression_details">
														
 
															+          <DialogColorful
														
 
															+            :isshowDetails="isshowexpression_details"
														
 
															+            @submitDetails="submitDetails"
														
 
															+          ></DialogColorful>
														
 
															+        </transition>
														
 
															+      </div>
														
 
															+      <el-result
														
 
															+        class="result"
														
 
															+        v-if="isshowDetails_submit"
														
 
															+        icon="success"
														
 
															+        title="Submit Successful"
														
 
															+      >
														
 
															+        <template #icon>
														
 
															+          <el-image src="/src/styles/images/submit_successful.png" />
														
 
															+        </template>
														
 
															+        <template #sub-title>
														
 
															+          <div class="sub_title_text">Apologize once again for your experience.</div>
														
 
															+          <div class="sub_title_text">
														
 
															+            We are committed to working hard to provide better services.
														
 
															+          </div>
														
 
															+        </template>
														
 
															+      </el-result>
														
 
															+    </el-dialog>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<style lang="scss">
														
 
															+.scoring {
														
 
															+  width: 64px;
														
 
															+  height: 64px;
														
 
															+  border-radius: 12px 0 0 12px;
														
 
															+  background-color: #fff;
														
 
															+  position: absolute;
														
 
															+  z-index: 2013;
														
 
															+  right: 0;
														
 
															+  bottom: 168px;
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  justify-content: center;
														
 
															+}
														
 
															+.el-avatar {
														
 
															+  background-color: #fff;
														
 
															+  cursor: pointer;
														
 
															+}
														
 
															+.flex {
														
 
															+  display: flex;
														
 
															+  height: 64px;
														
 
															+  align-items: center;
														
 
															+}
														
 
															+.score {
														
 
															+  margin: 0 16px;
														
 
															+}
														
 
															+.el-popover.popver_class {
														
 
															+  border-radius: 12px 0 0 12px !important;
														
 
															+  box-shadow: none;
														
 
															+  filter: drop-shadow(-2px 2px 12px rgba(0, 0, 0, 0.15));
														
 
															+  right: 0 !important;
														
 
															+}
														
 
															+.el-dialog.scoreDialog {
														
 
															+  position: absolute;
														
 
															+  margin-bottom: 0;
														
 
															+  right: 0;
														
 
															+  bottom: 168px;
														
 
															+}
														
 
															+.fade-enter-active,
														
 
															+.fade-leave-active {
														
 
															+  transition: opacity 3s;
														
 
															+}
														
 
															+.fade-enter-from,
														
 
															+.fade-leave-to {
														
 
															+  opacity: 0;
														
 
															+}
														
 
															+.sub_title_text {
														
 
															+  color: var(--color-neutral-3);
														
 
															+}
														
 
															+.result {
														
 
															+  height: 578px;
														
 
															+}
														
 
															+</style>
														
--- a/src/components/SeeAllIcon/index.ts
+++ b/src/components/SeeAllIcon/index.ts
@@ -0,0 +1 @@
 
															+export { default } from './src/SeeAllIcon.vue'
														
--- a/src/components/SeeAllIcon/src/SeeAllIcon.vue
+++ b/src/components/SeeAllIcon/src/SeeAllIcon.vue
@@ -0,0 +1,45 @@
 
															+<script setup lang="ts">
														
 
															+const isCollapse = defineModel<boolean>()
														
 
															+const emits = defineEmits<{ collapse: [boolean] }>()
														
 
															+const handleSeeAll = () => {
														
 
															+  isCollapse.value = !isCollapse.value
														
 
															+  // 使用nextTick来确保父组件能够在子组件的值更新后获取到最新的值
														
 
															+  nextTick(() => {
														
 
															+    emits('collapse', isCollapse.value as boolean)
														
 
															+  })
														
 
															+}
														
 
															+</script>
														
 
															+
														
 
															+<template>
														
 
															+  <div class="see-all-icon" @click="handleSeeAll">
														
 
															+    <span class="btn">See All</span>
														
 
															+    <span
														
 
															+      class="icon font_family icon-icon_dropdown__line_b"
														
 
															+      :class="{ 'is-rotate': isCollapse }"
														
 
															+    ></span>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.see-all-icon {
														
 
															+  display: inline-block;
														
 
															+  cursor: pointer;
														
 
															+  & > .btn {
														
 
															+    margin-left: 8px;
														
 
															+    font-size: 14px;
														
 
															+    font-weight: 400;
														
 
															+    color: var(--color-theme);
														
 
															+  }
														
 
															+  & > .icon {
														
 
															+    display: inline-block !important;
														
 
															+    margin-left: 2px;
														
 
															+    margin-top: -2px;
														
 
															+    transform: rotate(0deg);
														
 
															+    transition: all 0.3s;
														
 
															+    color: var(--color-theme);
														
 
															+    &.is-rotate {
														
 
															+      transform: rotate(180deg) !important;
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/src/components/SelectTable/index.ts
+++ b/src/components/SelectTable/index.ts
@@ -0,0 +1 @@
 
															+export { default } from './src/SelectTable.vue'
														
--- a/src/components/SelectTable/src/SelectTable
+++ b/src/components/SelectTable/src/SelectTable
@@ -0,0 +1,114 @@
 
															+<script setup lang="ts" name="SelTable">
														
 
															+
														
 
															+const emit = defineEmits(['check', 'input'])
														
 
															+
														
 
															+const props = defineProps({
														
 
															+  value: {
														
 
															+    type: Array,
														
 
															+    default: () => []
														
 
															+  },
														
 
															+  addTagOnKeys: {
														
 
															+    type: Array,
														
 
															+    default: () => []
														
 
															+  },
														
 
															+  readOnly: {
														
 
															+    type: Boolean,
														
 
															+    default: false
														
 
															+  },
														
 
															+})
														
 
															+
														
 
															+const tagInputRef: any = ref(null)
														
 
															+const newTag = ref('')
														
 
															+const innerTags = ref([...props.value])
														
 
															+
														
 
															+watch(
														
 
															+  () => props.value,
														
 
															+  () => {
														
 
															+    innerTags.value = [...props.value]
														
 
															+  }
														
 
															+)
														
 
															+
														
 
															+function focusTagInput() {
														
 
															+  if (props.readOnly || !tagInputRef.value) {
														
 
															+    return
														
 
															+  } else {
														
 
															+    tagInputRef.value.focus()
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function inputTag(ev: any) {
														
 
															+  newTag.value = ev.target.value
														
 
															+}
														
 
															+function remove(index: number) {
														
 
															+  innerTags.value.splice(index, 1)
														
 
															+  tagChange()
														
 
															+}
														
 
															+function addNew(e: any) {
														
 
															+  if (e && (!props.addTagOnKeys.includes(e.keyCode)) && (e.type !== 'blur')) {
														
 
															+    return
														
 
															+  }
														
 
															+  if (e) {
														
 
															+    e.stopPropagation()
														
 
															+    e.preventDefault()
														
 
															+  }
														
 
															+  let addSuccess = false
														
 
															+  if (newTag.value.includes(',')) {
														
 
															+    newTag.value.split(',').forEach(item => {
														
 
															+      if (addTag(item.trim())) {
														
 
															+        addSuccess = true
														
 
															+      }
														
 
															+    })
														
 
															+  } else {
														
 
															+    if (addTag(newTag.value.trim())) {
														
 
															+      addSuccess = true
														
 
															+    }
														
 
															+  }
														
 
															+  if (addSuccess) {
														
 
															+    tagChange()
														
 
															+    newTag.value = ''
														
 
															+  }
														
 
															+}
														
 
															+function addTag(tag: any) {
														
 
															+  tag = tag.trim()
														
 
															+  if (tag && !innerTags.value.includes(tag)) {
														
 
															+    innerTags.value.push(tag)
														
 
															+    return true
														
 
															+  }
														
 
															+  return false
														
 
															+}
														
 
															+
														
 
															+function removeLastTag() {
														
 
															+  if (newTag.value) {
														
 
															+    return
														
 
															+  }
														
 
															+  innerTags.value.pop()
														
 
															+  tagChange()
														
 
															+}
														
 
															+function tagChange() {
														
 
															+  emit('input', innerTags.value)
														
 
															+}
														
 
															+
														
 
															+
														
 
															+</script>
														
 
															+<template>
														
 
															+  <div class="el-input el-input--suffix el-tooltip__trigger" @click="focusTagInput">
														
 
															+    <div class="el-input__wrapper">
														
 
															+      <el-space>
														
 
															+        <template v-for="(tag, idx) in innerTags" :key="tag">
														
 
															+          <el-tag v-bind="$attrs" type="info" size="small" round :closable="!readOnly" :disable-transitions="false"
														
 
															+            @close="remove(idx)">
														
 
															+            {{ tag }}
														
 
															+          </el-tag>
														
 
															+        </template>
														
 
															+        <input v-if="!readOnly" ref="tagInputRef" class="el-input__inner" @input="inputTag" :value="newTag"
														
 
															+          @keydown.delete.stop="removeLastTag" @keydown="addNew" @blur="addNew" />
														
 
															+      </el-space>
														
 
															+    </div>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<style scoped lang="scss">
														
 
															+.el-input__wrapper {
														
 
															+  justify-content: flex-start;
														
 
															+}
														
 
															+</style>
														
--- a/src/components/SelectTable/src/SelectTable.vue
+++ b/src/components/SelectTable/src/SelectTable.vue
@@ -0,0 +1,341 @@
 
															+<script setup lang="ts" name="SelTable">
														
 
															+import _ from 'lodash'
														
 
															+import { reactive, ref, onMounted, watch } from 'vue'
														
 
															+import { ElMessage } from 'element-plus'
														
 
															+
														
 
															+const emit = defineEmits(['check', 'input'])
														
 
															+const props = defineProps({
														
 
															+  poverWidth: {
														
 
															+    type: Number,
														
 
															+    default: 380
														
 
															+  },
														
 
															+  searchInput: {
														
 
															+    type: Array,
														
 
															+    default: () => []
														
 
															+  },
														
 
															+  disabled: {
														
 
															+    type: Boolean,
														
 
															+    default: false
														
 
															+  },
														
 
															+  keyVal: {
														
 
															+    type: String,
														
 
															+    default: 'city'
														
 
															+  }
														
 
															+})
														
 
															+
														
 
															+const searchVal = ref(null)
														
 
															+const innerTags: any = ref([])
														
 
															+const tagInputRef: any = ref(null)
														
 
															+
														
 
															+watch(
														
 
															+  () => props.searchInput,
														
 
															+  (current) => {
														
 
															+    innerTags.value = current
														
 
															+  },
														
 
															+  {
														
 
															+    deep: true,
														
 
															+    immediate: true
														
 
															+  }
														
 
															+)
														
 
															+// 响应数据
														
 
															+const state: any = reactive({
														
 
															+  poverShow: false,
														
 
															+  currentPage: 1,
														
 
															+  pageSize: 10,
														
 
															+  total: 0,
														
 
															+  activeRowIndex: '',
														
 
															+  tableData: [],
														
 
															+  loading: false
														
 
															+})
														
 
															+
														
 
															+// 点击行
														
 
															+const handleRowClick = (row: any) => {
														
 
															+  state.poverShow = false
														
 
															+  if (!innerTags.value.includes(row[props.keyVal])) {
														
 
															+    innerTags.value.push(row[props.keyVal])
														
 
															+    state.activeRowIndex = row.id
														
 
															+    emit('input', innerTags.value)
														
 
															+    emit('check', innerTags.value)
														
 
															+  } else {
														
 
															+    ElMessage({
														
 
															+      message: 'Cannot add duplicate cities.',
														
 
															+      type: 'success'
														
 
															+    })
														
 
															+  }
														
 
															+  searchVal.value = null
														
 
															+}
														
 
															+const handleSearch = _.debounce((val?) => {
														
 
															+  state.loading = true
														
 
															+  searchVal.value = val?.target?.value
														
 
															+  let filterList: any = []
														
 
															+  setTimeout(() => {
														
 
															+    $api
														
 
															+      .getMoreFiltersTableData({
														
 
															+        term: searchVal.value ? searchVal.value : '',
														
 
															+        cp: state.currentPage,
														
 
															+        ps: state.pageSize,
														
 
															+        rc: '-1'
														
 
															+      })
														
 
															+      .then((res: any) => {
														
 
															+        if (res.code == 200) {
														
 
															+          filterList = res.data.searchData
														
 
															+          state.loading = false
														
 
															+          filterList = res.data.searchData.filter((p: any) => {
														
 
															+            return (
														
 
															+              p.country.toLowerCase().indexOf(searchVal.value.toLowerCase()) > -1 ||
														
 
															+              p.city.toLowerCase().indexOf(searchVal.value.toLowerCase()) > -1 ||
														
 
															+              p.uncode.toLowerCase().indexOf(searchVal.value.toLowerCase()) > -1
														
 
															+            )
														
 
															+          })
														
 
															+          state.tableData = filterList
														
 
															+          state.total = Number(res.data.rc)
														
 
															+          state.loading = false
														
 
															+        }
														
 
															+      })
														
 
															+  }, 800)
														
 
															+}, 500)
														
 
															+// 分页 请求接口
														
 
															+const handleCurrentChange = () => {
														
 
															+  state.loading = true
														
 
															+  let filterList: any = []
														
 
															+  setTimeout(() => {
														
 
															+    $api
														
 
															+      .getMoreFiltersTableData({
														
 
															+        term: searchVal.value ? searchVal.value : '',
														
 
															+        cp: state.currentPage,
														
 
															+        ps: state.pageSize,
														
 
															+        rc: state.total
														
 
															+      })
														
 
															+      .then((res: any) => {
														
 
															+        if (res.code == 200) {
														
 
															+          filterList = res.data.searchData
														
 
															+          state.loading = false
														
 
															+          filterList = res.data.searchData.filter((p: any) => {
														
 
															+            return (
														
 
															+              p.country.toLowerCase().indexOf(searchVal.value.toLowerCase()) > -1 ||
														
 
															+              p.city.toLowerCase().indexOf(searchVal.value.toLowerCase()) > -1 ||
														
 
															+              p.uncode.toLowerCase().indexOf(searchVal.value.toLowerCase()) > -1
														
 
															+            )
														
 
															+          })
														
 
															+          state.tableData = filterList
														
 
															+          state.total = Number(res.data.rc)
														
 
															+          state.loading = false
														
 
															+        }
														
 
															+      })
														
 
															+  }, 800)
														
 
															+}
														
 
															+// 删除
														
 
															+const remove = (idx: number) => {
														
 
															+  innerTags.value.splice(idx, 1)
														
 
															+  emit('input', innerTags.value)
														
 
															+  emit('check', innerTags.value)
														
 
															+}
														
 
															+
														
 
															+const onInput = () => {
														
 
															+  tagInputRef.value.focus()
														
 
															+}
														
 
															+</script>
														
 
															+<template>
														
 
															+  <div>
														
 
															+    <el-popover
														
 
															+      v-model:visible="state.poverShow"
														
 
															+      placement="bottom-start"
														
 
															+      :teleported="false"
														
 
															+      :width="props.poverWidth"
														
 
															+      trigger="click"
														
 
															+    >
														
 
															+      <template #reference>
														
 
															+        <div
														
 
															+          class="el-input el-input--suffix el-tooltip__trigger"
														
 
															+          @click="disabled ? null : onInput"
														
 
															+        >
														
 
															+          <div class="el-input__wrapper" :class="{ 'is-disabled': disabled }">
														
 
															+            <el-space :class="[innerTags.length ? 'custom-el-spaceno' : 'custom-el-space']">
														
 
															+              <template v-for="(item, idx) in innerTags" :key="item">
														
 
															+                <template v-if="idx <= 2">
														
 
															+                  <el-tag type="info" closable :disable-transitions="false" @close="remove(idx)">
														
 
															+                    {{ item }}
														
 
															+                  </el-tag>
														
 
															+                </template>
														
 
															+              </template>
														
 
															+              <template v-if="innerTags.length && innerTags.length > 3">
														
 
															+                <el-popover placement="bottom" trigger="hover">
														
 
															+                  <template #reference>
														
 
															+                    <el-tag type="info" size="small" round :disable-transitions="false">
														
 
															+                      +{{ innerTags.length - 3 }}
														
 
															+                    </el-tag>
														
 
															+                  </template>
														
 
															+                  <template #default>
														
 
															+                    <div style="padding: 5px 5px 0">
														
 
															+                      <template v-for="(item, idx) in innerTags" :key="item">
														
 
															+                        <template v-if="idx >= 3">
														
 
															+                          <el-tag
														
 
															+                            type="info"
														
 
															+                            style="
														
 
															+                              width: 100% !important;
														
 
															+                              justify-content: space-between;
														
 
															+                              margin-bottom: 5px;
														
 
															+                            "
														
 
															+                            closable
														
 
															+                            :disable-transitions="false"
														
 
															+                            @close="remove(idx)"
														
 
															+                          >
														
 
															+                            {{ item }}
														
 
															+                          </el-tag>
														
 
															+                        </template>
														
 
															+                      </template>
														
 
															+                    </div>
														
 
															+                  </template>
														
 
															+                </el-popover>
														
 
															+              </template>
														
 
															+              <input
														
 
															+                :disabled="props.disabled"
														
 
															+                :value="searchVal"
														
 
															+                ref="tagInputRef"
														
 
															+                :placeholder="innerTags.length ? '' : 'Please input country/city/uncode'"
														
 
															+                class="el-input__inner"
														
 
															+                type="text"
														
 
															+                @input="handleSearch"
														
 
															+                @click="handleSearch"
														
 
															+              />
														
 
															+            </el-space>
														
 
															+            <div class="el-input__suffix">
														
 
															+              <div class="el-input__suffix-inner" v-if="!disabled">
														
 
															+                <el-icon :class="state.poverShow ? 'reverse' : ''">
														
 
															+                  <CaretBottom />
														
 
															+                </el-icon>
														
 
															+              </div>
														
 
															+            </div>
														
 
															+          </div>
														
 
															+        </div>
														
 
															+      </template>
														
 
															+      <el-table
														
 
															+        :data="state.tableData"
														
 
															+        border
														
 
															+        stripe
														
 
															+        v-loading="state.loading"
														
 
															+        @row-click="handleRowClick"
														
 
															+        header-row-class-name="cus-header"
														
 
															+      >
														
 
															+        <el-table-column property="country" label="Country" />
														
 
															+        <el-table-column property="city" label="City" />
														
 
															+        <el-table-column property="uncode" label="Uncode" />
														
 
															+      </el-table>
														
 
															+      <div class="pagination">
														
 
															+        <span>Total {{ state.total }}</span>
														
 
															+        <el-pagination
														
 
															+          v-model:currentPage="state.currentPage"
														
 
															+          v-model:page-size="state.pageSize"
														
 
															+          size="small"
														
 
															+          layout="prev, pager, next"
														
 
															+          :pager-count="5"
														
 
															+          :total="state.total"
														
 
															+          @current-change="handleCurrentChange"
														
 
															+          @size-change="handleCurrentChange"
														
 
															+        />
														
 
															+      </div>
														
 
															+    </el-popover>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<style scoped lang="scss">
														
 
															+:deep(.el-input) {
														
 
															+  input {
														
 
															+    cursor: pointer;
														
 
															+  }
														
 
															+
														
 
															+  .el-input__suffix-inner {
														
 
															+    i {
														
 
															+      transition: all 0.3s;
														
 
															+    }
														
 
															+
														
 
															+    .reverse {
														
 
															+      transform: rotate(-180deg);
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+  .el-input__wrapper {
														
 
															+    justify-content: space-between;
														
 
															+  }
														
 
															+
														
 
															+  .el-input__wrapper.is-focus {
														
 
															+    box-shadow: 0 0 0 1px #ffbc79 inset !important;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+:deep(.cus-header) th {
														
 
															+  background-color: var(--color-table-header-bg) !important;
														
 
															+}
														
 
															+
														
 
															+:deep(.el-table__row) {
														
 
															+  td {
														
 
															+    cursor: pointer;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+:deep(.el-table__row:not(.current-row):hover) {
														
 
															+  td {
														
 
															+    background-color: #fff1e6 !important;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+:deep(.current-row) {
														
 
															+  td {
														
 
															+    background-color: #ffe3cd !important;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.pagination {
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  height: 40px;
														
 
															+  justify-content: space-between;
														
 
															+  padding: 0 12px 0 8px;
														
 
															+
														
 
															+  > span {
														
 
															+    font-size: 13px;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+:deep(.el-popper) {
														
 
															+  border-radius: 12px !important;
														
 
															+}
														
 
															+
														
 
															+:deep(.el-pagination) {
														
 
															+  .is-active {
														
 
															+    color: #b57b32 !important;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+:deep(.el-table--fit) {
														
 
															+  border-top-left-radius: 12px;
														
 
															+  border-top-right-radius: 12px;
														
 
															+}
														
 
															+
														
 
															+:deep(.el-scrollbar__wrap--hidden-default) {
														
 
															+  border-radius: 0;
														
 
															+}
														
 
															+
														
 
															+.is-disabled {
														
 
															+  background-color: #f5f7fa;
														
 
															+  color: #a8abb2;
														
 
															+  cursor: not-allowed;
														
 
															+  box-shadow: none !important;
														
 
															+}
														
 
															+
														
 
															+:deep(.el-tag) {
														
 
															+  border-color: transparent;
														
 
															+}
														
 
															+
														
 
															+:deep(.custom-el-space) {
														
 
															+  flex-grow: 1;
														
 
															+}
														
 
															+
														
 
															+:deep(.custom-el-spaceno .el-space__item) {
														
 
															+  width: initial;
														
 
															+}
														
 
															+
														
 
															+:deep(.custom-el-space .el-space__item) {
														
 
															+  width: 100%;
														
 
															+}
														
 
															+</style>
														
--- a/src/components/SelectTableSelect/index.ts
+++ b/src/components/SelectTableSelect/index.ts
@@ -0,0 +1 @@
 
															+export { default } from './src/SelectTableSelect.vue'
														
--- a/src/components/SelectTableSelect/src/SelectTableSelect.vue
+++ b/src/components/SelectTableSelect/src/SelectTableSelect.vue
@@ -0,0 +1,240 @@
 
															+<script setup lang="ts">
														
 
															+import { ref, watch } from 'vue'
														
 
															+import IconDropDown from '@/components/IconDropDown'
														
 
															+import VerrifyInformation from '@/components/VerrifyInformation'
														
 
															+import SelectTable from '@/components/SelectTable'
														
 
															+
														
 
															+interface TypeItem {
														
 
															+  placesType: ''
														
 
															+  placesname: []
														
 
															+  isshowVerfication: boolean
														
 
															+}
														
 
															+interface dateoptions {
														
 
															+  value: string
														
 
															+  label: string
														
 
															+}
														
 
															+interface Props {
														
 
															+  AddDateType: TypeItem[]
														
 
															+  ASPlaceholder: string
														
 
															+  DateTypeoptions: dateoptions[]
														
 
															+  Verification: string
														
 
															+  selectedPartyTypeoptions: Array<string>
														
 
															+}
														
 
															+interface optionsItem {
														
 
															+  value: string
														
 
															+  label: string
														
 
															+}
														
 
															+const props = withDefaults(defineProps<Props>(), {})
														
 
															+const AddType: any = ref([])
														
 
															+const dataTypeoptions = ref<optionsItem[]>([])
														
 
															+const typeSelectIndex = ref(-1)
														
 
															+watch(
														
 
															+  () => props.selectedPartyTypeoptions,
														
 
															+  (newV) => {
														
 
															+    let arr: any = []
														
 
															+    if (newV.length == 0) {
														
 
															+      arr = props.DateTypeoptions
														
 
															+    } else {
														
 
															+      props.DateTypeoptions.forEach((item: any) => {
														
 
															+        let index = newV.findIndex((con: any) => {
														
 
															+          return con == item.value
														
 
															+        })
														
 
															+        if (index < 0) {
														
 
															+          arr.push(item)
														
 
															+        }
														
 
															+      })
														
 
															+    }
														
 
															+    dataTypeoptions.value = arr
														
 
															+  },
														
 
															+  {
														
 
															+    immediate: true,
														
 
															+    deep: true
														
 
															+  }
														
 
															+)
														
 
															+
														
 
															+watch(
														
 
															+  () => props.AddDateType,
														
 
															+  (val) => {
														
 
															+    AddType.value = val
														
 
															+  },
														
 
															+  {
														
 
															+    immediate: true,
														
 
															+    deep: true
														
 
															+  }
														
 
															+)
														
 
															+
														
 
															+// 删除当前more type
														
 
															+const deleteType = (i: any) => {
														
 
															+  emit('delSelect', i, AddType.value[i].placesType)
														
 
															+  AddType.value.splice(i, 1)
														
 
															+}
														
 
															+// 选中type改变
														
 
															+const changeSelect = (val: any) => {
														
 
															+  emit('changeAutoSelectAddType', typeSelectIndex.value, val)
														
 
															+}
														
 
															+// 选中name改变
														
 
															+const emit = defineEmits(['changeAutoSelectAddType', 'delSelect', 'changeAutoSelect'])
														
 
															+let AutoSelectObj: any = {}
														
 
															+const changeAutoSelect = (val: any, value: any) => {
														
 
															+  AutoSelectObj[val] = value.join()
														
 
															+  emit('changeAutoSelect', AutoSelectObj)
														
 
															+}
														
 
															+const typeSelectFocus = (index: any, e: any) => {
														
 
															+  typeSelectIndex.value = index
														
 
															+}
														
 
															+const typeSelectBlur = () => {
														
 
															+  typeSelectIndex.value = -1
														
 
															+  let arr: any = []
														
 
															+  if (props.selectedPartyTypeoptions.length == 0) {
														
 
															+    arr = props.DateTypeoptions
														
 
															+  } else {
														
 
															+    props.DateTypeoptions.forEach((item: any) => {
														
 
															+      let index = props.selectedPartyTypeoptions.findIndex((con: any) => {
														
 
															+        return con == item.value
														
 
															+      })
														
 
															+      if (index < 0) {
														
 
															+        arr.push(item)
														
 
															+      }
														
 
															+    })
														
 
															+  }
														
 
															+  dataTypeoptions.value = arr
														
 
															+}
														
 
															+const typeSelectClick = (index: any, val: any) => {
														
 
															+  if (AddType.value[index].placesType) {
														
 
															+    let j = props.DateTypeoptions.findIndex((item: any) => {
														
 
															+      return item.value == AddType.value[index].placesType
														
 
															+    })
														
 
															+    let i = dataTypeoptions.value.findIndex((item: any) => {
														
 
															+      return item.value == AddType.value[index].placesType
														
 
															+    })
														
 
															+    if (i < 0) {
														
 
															+      dataTypeoptions.value.push(props.DateTypeoptions[j])
														
 
															+    }
														
 
															+  } else {
														
 
															+    let arr: any = []
														
 
															+    if (props.selectedPartyTypeoptions.length == 0) {
														
 
															+      arr = props.DateTypeoptions
														
 
															+    } else {
														
 
															+      props.DateTypeoptions.forEach((item: any) => {
														
 
															+        let index = props.selectedPartyTypeoptions.findIndex((con: any) => {
														
 
															+          return con == item.value
														
 
															+        })
														
 
															+        if (index < 0) {
														
 
															+          arr.push(item)
														
 
															+        }
														
 
															+      })
														
 
															+    }
														
 
															+    dataTypeoptions.value = arr
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const checkdestination = (row: any, index: any) => {
														
 
															+  if (row) {
														
 
															+    AddType.value[index].placesname = row
														
 
															+    changeAutoSelect(AddType.value[index].placesType, AddType.value[index].placesname)
														
 
															+  }
														
 
															+}
														
 
															+</script>
														
 
															+<template>
														
 
															+  <div class="AddType" v-for="(item, index) in AddType" :key="index">
														
 
															+    <div>
														
 
															+      <div class="Date_Title">
														
 
															+        <div class="ETD_title">Places Type</div>
														
 
															+        <span class="iconfont_icon" @click="deleteType(index)">
														
 
															+          <svg class="iconfont icon_delete" aria-hidden="true">
														
 
															+            <use xlink:href="#icon-icon_delete_b"></use>
														
 
															+          </svg>
														
 
															+        </span>
														
 
															+      </div>
														
 
															+      <el-select
														
 
															+        v-model="AddType[index].placesType"
														
 
															+        :suffix-icon="IconDropDown"
														
 
															+        @blur="typeSelectBlur"
														
 
															+        class="testname"
														
 
															+        @focus="typeSelectFocus(index, $event)"
														
 
															+        @click="typeSelectClick(index, $event)"
														
 
															+        @change="changeSelect(AddType[index].placesType)"
														
 
															+        placeholder="Please Select Party Type"
														
 
															+      >
														
 
															+        <el-option
														
 
															+          v-for="item in dataTypeoptions"
														
 
															+          :key="item.value"
														
 
															+          :label="item.label"
														
 
															+          :value="item.value"
														
 
															+        >
														
 
															+        </el-option>
														
 
															+      </el-select>
														
 
															+    </div>
														
 
															+    <div style="margin-top: 16px">
														
 
															+      <div class="ETD_title">Places Details</div>
														
 
															+      <SelectTable
														
 
															+        :key-val="
														
 
															+          AddType[index].placesType && AddType[index].placesType === 'Port of Loading'
														
 
															+            ? 'uncode'
														
 
															+            : 'city'
														
 
															+        "
														
 
															+        :disabled="AddType[index].placesType ? false : true"
														
 
															+        :searchInput="AddType[index].placesname"
														
 
															+        @check="(row) => checkdestination(row, index)"
														
 
															+      />
														
 
															+      <VerrifyInformation
														
 
															+        :isshowVerfication="AddDateType[index]?.isshowVerfication"
														
 
															+        :verification="props.Verification"
														
 
															+      >
														
 
															+      </VerrifyInformation>
														
 
															+    </div>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.AddType {
														
 
															+  background-color: var(--addparties-background-color);
														
 
															+  margin: 0 16px 8px 16px;
														
 
															+  padding: 8px;
														
 
															+  border-radius: var(--border-radius-6);
														
 
															+}
														
 
															+
														
 
															+.ETD_title {
														
 
															+  font-size: var(--font-size-2);
														
 
															+  color: var(--color-neutral-2);
														
 
															+}
														
 
															+
														
 
															+.Date_Title {
														
 
															+  display: flex;
														
 
															+  justify-content: space-between;
														
 
															+  align-items: center;
														
 
															+}
														
 
															+
														
 
															+.icon_delete {
														
 
															+  fill: var(--color-danger);
														
 
															+  cursor: pointer;
														
 
															+}
														
 
															+
														
 
															+.el-select-dropdown__item.is-selected {
														
 
															+  div {
														
 
															+    color: var(--badge__content--warning);
														
 
															+  }
														
 
															+
														
 
															+  background-color: transparent;
														
 
															+}
														
 
															+
														
 
															+.el-select-dropdown__item {
														
 
															+  padding-left: 7.7px;
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+}
														
 
															+
														
 
															+.label {
														
 
															+  margin-left: 8px;
														
 
															+}
														
 
															+
														
 
															+.el-select-dropdown__item.is-hovering {
														
 
															+  div {
														
 
															+    color: var(--badge__content--warning);
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.AlertInput :deep(.el-select__wrapper) {
														
 
															+  box-shadow: 0 0 0 0.5px var(--color-danger);
														
 
															+}
														
 
															+</style>
														
--- a/src/components/ShipmentStatus/index.ts
+++ b/src/components/ShipmentStatus/index.ts
@@ -0,0 +1 @@
 
															+export { default } from './src/ShipmentStatus.vue'
														
--- a/src/components/ShipmentStatus/src/ShipmentStatus.vue
+++ b/src/components/ShipmentStatus/src/ShipmentStatus.vue
@@ -0,0 +1,205 @@
 
															+<script setup lang="ts">
														
 
															+import dayjs from 'dayjs'
														
 
															+
														
 
															+const props = defineProps({
														
 
															+  data: Object
														
 
															+})
														
 
															+const simplexData: any = ref([])
														
 
															+
														
 
															+watch(
														
 
															+  () => props.data,
														
 
															+  (newVal) => {
														
 
															+    if (newVal) {
														
 
															+      simplexData.value = newVal
														
 
															+    } else {
														
 
															+      simplexData.value = []
														
 
															+    }
														
 
															+  },
														
 
															+  {
														
 
															+    immediate: true,
														
 
															+    deep: true
														
 
															+  }
														
 
															+)
														
 
															+
														
 
															+// 中间点 每两个节点之间加上26px  上边距离28px 下边距离54px  如果没有中间点则高度为56px
														
 
															+const getSimplexLineHeight = (index: number) => {
														
 
															+  if (index === 0) {
														
 
															+    return 56
														
 
															+  } else {
														
 
															+    return 28 + 56 + 26 * (index - 1)
														
 
															+  }
														
 
															+}
														
 
															+const getDateHeight = (index: number) => {
														
 
															+  return 42 + 26 * index
														
 
															+}
														
 
															+
														
 
															+const formatDate = (date: string) => {
														
 
															+  return date ? dayjs(date).format('MMM-DD-YYYY') : '--'
														
 
															+}
														
 
															+</script>
														
 
															+
														
 
															+<template>
														
 
															+  <div class="simplex-content">
														
 
															+    <div
														
 
															+      class="detail-step-item"
														
 
															+      :class="{
														
 
															+        last: !stepItem.isArrival
														
 
															+      }"
														
 
															+      v-for="stepItem in simplexData"
														
 
															+      :key="stepItem.index"
														
 
															+    >
														
 
															+      <div class="data">
														
 
															+        <div class="left-step-icon">{{ stepItem.index }}</div>
														
 
															+        <div class="right-info">
														
 
															+          <div class="path">
														
 
															+            <div class="label">{{ stepItem.label }}</div>
														
 
															+            <div class="detail-path">{{ stepItem.path }}</div>
														
 
															+          </div>
														
 
															+          <div
														
 
															+            class="transport-info"
														
 
															+            :style="{ top: getDateHeight(dateIndex) + 'px' }"
														
 
															+            v-for="(dateItem, dateIndex) in stepItem.children"
														
 
															+            :key="dateIndex"
														
 
															+          >
														
 
															+            <div class="step-dot"></div>
														
 
															+            <div class="label">{{ dateItem.label }}</div>
														
 
															+            <div class="divider"></div>
														
 
															+            <div class="date">{{ formatDate(dateItem.date) }}</div>
														
 
															+          </div>
														
 
															+        </div>
														
 
															+      </div>
														
 
															+      <div
														
 
															+        class="line"
														
 
															+        v-if="stepItem.label !== 'Place of Delivery'"
														
 
															+        :style="{ height: getSimplexLineHeight(stepItem.children?.length || 0) + 'px' }"
														
 
															+      ></div>
														
 
															+    </div>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+// 单式样式
														
 
															+.simplex-content {
														
 
															+  width: 100%;
														
 
															+  padding: 8px 0 9px;
														
 
															+}
														
 
															+.detail-step-item {
														
 
															+  & > .data {
														
 
															+    display: flex;
														
 
															+    position: relative;
														
 
															+    height: 16px;
														
 
															+
														
 
															+    .left-step-icon {
														
 
															+      width: 16px;
														
 
															+      height: 16px;
														
 
															+      margin-right: 8px;
														
 
															+      border-radius: 50%;
														
 
															+      background-color: var(--color-neutral-1);
														
 
															+      font-size: 10px;
														
 
															+      font-weight: 700;
														
 
															+      text-align: center;
														
 
															+      line-height: 16px;
														
 
															+      color: #fff;
														
 
															+    }
														
 
															+    .right-info {
														
 
															+      flex: 1;
														
 
															+      position: relative;
														
 
															+      display: flex;
														
 
															+      flex-direction: column;
														
 
															+      justify-content: flex-start;
														
 
															+      align-items: flex-start;
														
 
															+      gap: 8px;
														
 
															+      margin-top: -8px;
														
 
															+      .step-dot {
														
 
															+        width: 8px;
														
 
															+        height: 8px;
														
 
															+        border-radius: 50%;
														
 
															+        background-color: var(--color-neutral-1);
														
 
															+      }
														
 
															+      .path {
														
 
															+        flex: 1;
														
 
															+        display: flex;
														
 
															+        align-items: center;
														
 
															+        width: 100%;
														
 
															+        border-radius: 6px;
														
 
															+        .label,
														
 
															+        .detail-path {
														
 
															+          height: 32px;
														
 
															+          padding: 0 8px;
														
 
															+          line-height: 32px;
														
 
															+        }
														
 
															+        .label {
														
 
															+          // width: 96px;
														
 
															+          background-color: var(--color-neutral-1);
														
 
															+          color: #fff;
														
 
															+          font-weight: 500;
														
 
															+          font-size: 12px;
														
 
															+          border-radius: 3px 0 0 3px;
														
 
															+        }
														
 
															+        .detail-path {
														
 
															+          flex: 1;
														
 
															+          width: 252px;
														
 
															+          background-color: #fff;
														
 
															+          font-weight: 700;
														
 
															+          color: var(--color-neutral-1);
														
 
															+          border: 1px solid #bfc1c3;
														
 
															+          border-left: 0;
														
 
															+          border-radius: 0 3px 3px 0;
														
 
															+        }
														
 
															+      }
														
 
															+      .transport-info {
														
 
															+        position: absolute;
														
 
															+        top: 20px;
														
 
															+        left: -20px;
														
 
															+        display: flex;
														
 
															+        align-items: center;
														
 
															+        gap: 8px;
														
 
															+        width: calc(100% + 20px);
														
 
															+        .label {
														
 
															+          font-weight: 700;
														
 
															+        }
														
 
															+        .divider {
														
 
															+          flex: 1;
														
 
															+          height: 0px;
														
 
															+          margin-right: 8px;
														
 
															+          border-top: 1px dashed var(--color-neutral-3);
														
 
															+        }
														
 
															+        .date {
														
 
															+          font-size: 12px;
														
 
															+        }
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+  & > .line {
														
 
															+    height: 72px;
														
 
															+    margin-left: 7px;
														
 
															+    border-left: 1px solid var(--color-neutral-1);
														
 
															+  }
														
 
															+  &.last {
														
 
															+    & > .data {
														
 
															+      .left-step-icon {
														
 
															+        background-color: #ccd1db;
														
 
															+      }
														
 
															+      .right-info {
														
 
															+        .step-dot {
														
 
															+          background-color: #ccd1db;
														
 
															+        }
														
 
															+        .path {
														
 
															+          .label {
														
 
															+            background-color: #ccd1db;
														
 
															+
														
 
															+            font-weight: 600;
														
 
															+            color: var(--color-neutral-1);
														
 
															+          }
														
 
															+          .detail-path {
														
 
															+            border-color: #ccd1db;
														
 
															+          }
														
 
															+        }
														
 
															+      }
														
 
															+    }
														
 
															+    & > .line {
														
 
															+      border-left: 1px dashed var(--color-neutral-3);
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/src/components/TransportMode/index.ts
+++ b/src/components/TransportMode/index.ts
@@ -0,0 +1 @@
 
															+export { default } from './src/TransportMode.vue'
														
--- a/src/components/TransportMode/src/TransportMode.vue
+++ b/src/components/TransportMode/src/TransportMode.vue
@@ -0,0 +1,299 @@
 
															+<script setup lang="ts">
														
 
															+import { ref, onMounted, onBeforeMount, watch, computed } from 'vue'
														
 
															+import type { DropdownInstance } from 'element-plus'
														
 
															+import emitter from '@/utils/bus'
														
 
															+
														
 
															+interface ListItem {
														
 
															+  name: string
														
 
															+  number: number
														
 
															+  icon: string
														
 
															+  checked: boolean
														
 
															+}
														
 
															+interface Props {
														
 
															+  TransportListItem: ListItem[]
														
 
															+}
														
 
															+const props = withDefaults(defineProps<Props>(), {})
														
 
															+const TransportList = ref(props.TransportListItem)
														
 
															+watch(
														
 
															+  () => props.TransportListItem,
														
 
															+  (current) => {
														
 
															+    TransportList.value = current
														
 
															+  }
														
 
															+)
														
 
															+
														
 
															+onMounted(() => {
														
 
															+  emitter.on('clearTag', (tag: any) => {
														
 
															+    if (tag.includes('Transport Mode')) {
														
 
															+      clearList()
														
 
															+    }
														
 
															+  })
														
 
															+})
														
 
															+
														
 
															+onBeforeMount(() => {
														
 
															+  emitter.off('clearTag')
														
 
															+})
														
 
															+
														
 
															+const checkAll = ref(false)
														
 
															+const dropdown1 = ref<DropdownInstance>()
														
 
															+let checkedCount: any[] = []
														
 
															+const TotalAll = computed(() => {
														
 
															+  var total_sum = 0
														
 
															+  if (TransportList.value != undefined) {
														
 
															+    TransportList.value.map((item) => {
														
 
															+      total_sum += item.number
														
 
															+    })
														
 
															+  }
														
 
															+  return total_sum
														
 
															+})
														
 
															+
														
 
															+const handleCheckAllChange = (val: any) => {
														
 
															+  checkedCount = []
														
 
															+  TransportList.value.forEach((item: any) => {
														
 
															+    if (val) {
														
 
															+      item.checked = true
														
 
															+      checkedCount.push(item.name)
														
 
															+    } else {
														
 
															+      item.checked = false
														
 
															+      checkedCount = []
														
 
															+    }
														
 
															+  })
														
 
															+}
														
 
															+const handleCheckedTransportChange = (value: any, checked: any, index: any) => {
														
 
															+  if (checked) {
														
 
															+    checkedCount.push(value)
														
 
															+    const map = new Map()
														
 
															+    checkedCount.forEach((item) => map.set(item, true))
														
 
															+    checkedCount = [...map.keys()]
														
 
															+  } else {
														
 
															+    if (checkedCount.length == 1) {
														
 
															+      checkedCount.splice(0, 1)
														
 
															+    } else {
														
 
															+      checkedCount.splice(index, 1)
														
 
															+    }
														
 
															+  }
														
 
															+  checkAll.value = checkedCount.length === TransportList.value.length
														
 
															+}
														
 
															+
														
 
															+// 清除选中
														
 
															+const clearList = () => {
														
 
															+  checkAll.value = false
														
 
															+  TransportList.value.forEach((item: any) => {
														
 
															+    item.checked = false
														
 
															+  })
														
 
															+  changedata.value = ''
														
 
															+  checkedCount = []
														
 
															+  emit('clearTransportTags')
														
 
															+}
														
 
															+const emit = defineEmits(['TransportSearch', 'clearTransportTags'])
														
 
															+const changedata = ref()
														
 
															+//点击搜索
														
 
															+const TransportSearch = (visible: any) => {
														
 
															+  if (checkedCount.length == TransportList.value.length) {
														
 
															+    changedata.value = 'All'
														
 
															+  } else {
														
 
															+    changedata.value = checkedCount.join(', ')
														
 
															+  }
														
 
															+  const TransportData = {
														
 
															+    title: 'Transport Mode',
														
 
															+    data: changedata.value
														
 
															+  }
														
 
															+  emit('TransportSearch', TransportData)
														
 
															+  if (!dropdown1.value) return
														
 
															+  if (visible) {
														
 
															+    dropdown1.value.handleClose()
														
 
															+  } else {
														
 
															+    dropdown1.value.handleOpen()
														
 
															+  }
														
 
															+}
														
 
															+</script>
														
 
															+<template>
														
 
															+  <div class="select">
														
 
															+    <el-dropdown ref="dropdown1" trigger="click" :hide-on-click="false">
														
 
															+      <div class="el-dropdown-link">
														
 
															+        <div class="select_title">Transport Mode</div>
														
 
															+        <span class="iconfont_icon">
														
 
															+          <svg class="iconfont" aria-hidden="true">
														
 
															+            <use xlink:href="#icon-icon_dropdown_b"></use>
														
 
															+          </svg>
														
 
															+        </span>
														
 
															+      </div>
														
 
															+      <template #dropdown>
														
 
															+        <div class="dropdownwidth">
														
 
															+          <div class="title">Transport Mode</div>
														
 
															+          <el-dropdown-menu>
														
 
															+            <el-dropdown-item>
														
 
															+              <el-checkbox v-model="checkAll" class="checkbox" @change="handleCheckAllChange">
														
 
															+                <div class="checkbox_title">
														
 
															+                  <span class="iconfont_icon">
														
 
															+                    <svg class="iconfont iconfont_select" aria-hidden="true">
														
 
															+                      <use xlink:href="#icon-icon_all_b"></use>
														
 
															+                    </svg>
														
 
															+                  </span>
														
 
															+                  Select All
														
 
															+                </div>
														
 
															+                <div class="checkbox_number">({{ TotalAll }})</div>
														
 
															+              </el-checkbox>
														
 
															+            </el-dropdown-item>
														
 
															+            <el-divider></el-divider>
														
 
															+            <el-dropdown-item v-for="(item, index) in TransportList" :key="index">
														
 
															+              <el-checkbox
														
 
															+                :value="item.name"
														
 
															+                v-model="item.checked"
														
 
															+                class="checkbox"
														
 
															+                @change="handleCheckedTransportChange(item.name, item.checked, index)"
														
 
															+              >
														
 
															+                <div class="checkbox_title">
														
 
															+                  <span class="iconfont_icon">
														
 
															+                    <svg class="iconfont iconfont_select" aria-hidden="true">
														
 
															+                      <use :xlink:href="item.icon"></use>
														
 
															+                    </svg>
														
 
															+                  </span>
														
 
															+                  {{ item.name }}
														
 
															+                </div>
														
 
															+                <div class="checkbox_number">({{ item.number }})</div>
														
 
															+              </el-checkbox>
														
 
															+            </el-dropdown-item>
														
 
															+            <div class="transport_bottom">
														
 
															+              <div>
														
 
															+                <el-button class="clear" type="default" @click="clearList">Reset</el-button>
														
 
															+              </div>
														
 
															+              <div>
														
 
															+                <el-button class="search el-button--dark" @click="TransportSearch"
														
 
															+                  >Search</el-button
														
 
															+                >
														
 
															+              </div>
														
 
															+            </div>
														
 
															+          </el-dropdown-menu>
														
 
															+        </div>
														
 
															+      </template>
														
 
															+    </el-dropdown>
														
 
															+  </div>
														
 
															+</template>
														
 
															+<style lang="scss" scoped>
														
 
															+.iconfont_icon {
														
 
															+  margin-right: 8px;
														
 
															+}
														
 
															+.iconfont_select {
														
 
															+  width: 17px;
														
 
															+  height: 17px;
														
 
															+}
														
 
															+.select {
														
 
															+  width: 186px;
														
 
															+  margin-left: 8px;
														
 
															+  cursor: pointer;
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  border: 1px solid var(--color-border);
														
 
															+  border-radius: var(--border-radius-6);
														
 
															+}
														
 
															+.select:hover {
														
 
															+  border: 1px solid var(--color-theme);
														
 
															+}
														
 
															+.el-dropdown-link {
														
 
															+  width: 186px;
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  justify-content: space-between;
														
 
															+}
														
 
															+.select_title {
														
 
															+  font-size: var(--font-size-3);
														
 
															+  font-weight: 400;
														
 
															+  margin-left: 8.53px;
														
 
															+  color: var(--color-neutral-1);
														
 
															+}
														
 
															+.title {
														
 
															+  font-weight: 700;
														
 
															+  font-size: var(--font-size-5);
														
 
															+  background-color: var(--color-header-bg);
														
 
															+  height: 48px;
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  padding-left: 16px;
														
 
															+}
														
 
															+.checkbox {
														
 
															+  width: 216px;
														
 
															+  font-weight: 400;
														
 
															+  font-size: var(--font-size-3);
														
 
															+  padding: 0 12px;
														
 
															+  height: 40px;
														
 
															+}
														
 
															+:deep(.el-popper__arrow, .el-popper__arrow:before) {
														
 
															+  height: 0;
														
 
															+  width: 0;
														
 
															+}
														
 
															+:deep(.el-checkbox__label) {
														
 
															+  width: 176px;
														
 
															+  padding-left: 13px;
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  justify-content: space-between;
														
 
															+}
														
 
															+.checkbox_title {
														
 
															+  color: var(--color-neutral-1);
														
 
															+}
														
 
															+.checkbox_number {
														
 
															+  color: var(--color-neutral-3);
														
 
															+}
														
 
															+.transport_bottom {
														
 
															+  display: flex;
														
 
															+  justify-content: flex-end;
														
 
															+  align-items: center;
														
 
															+  height: 48px;
														
 
															+  border-top: 1px solid var(--color-border);
														
 
															+  margin-top: 5px;
														
 
															+  font-weight: 400;
														
 
															+  font-size: var(--font-size-3);
														
 
															+}
														
 
															+.clear {
														
 
															+  width: 81px;
														
 
															+  height: 32px;
														
 
															+  margin-right: 7.82px;
														
 
															+}
														
 
															+.search {
														
 
															+  width: 86px;
														
 
															+  height: 32px;
														
 
															+  margin-right: 16px;
														
 
															+}
														
 
															+.search:hover {
														
 
															+  color: var(--color-theme);
														
 
															+}
														
 
															+:deep(.el-dropdown-menu__item:hover) {
														
 
															+  background-color: var(--border-hover-color);
														
 
															+  border-radius: var(--border-radius-6);
														
 
															+  border-color: var(--border-hover-color);
														
 
															+}
														
 
															+:deep(.el-dropdown-menu__item) {
														
 
															+  padding: 0;
														
 
															+  margin: 10px 16px;
														
 
															+}
														
 
															+:deep(.el-dropdown-menu__item:not(.is-disabled):focus) {
														
 
															+  background-color: var(--border-hover-color);
														
 
															+  border-radius: var(--border-radius-6);
														
 
															+  border-color: var(--border-hover-color);
														
 
															+}
														
 
															+.dropdownwidth {
														
 
															+  width: 248px;
														
 
															+}
														
 
															+@media only screen and (min-width: 1280px) {
														
 
															+  .el-dropdown-link,
														
 
															+  .select {
														
 
															+    width: 224px;
														
 
															+  }
														
 
															+  .dropdownwidth {
														
 
															+    width: 248px;
														
 
															+  }
														
 
															+}
														
 
															+@media only screen and (min-width: 1440px) {
														
 
															+  .el-dropdown-link,
														
 
															+  .select {
														
 
															+    width: 336px;
														
 
															+  }
														
 
															+  .dropdownwidth {
														
 
															+    width: 336px;
														
 
															+  }
														
 
															+}
														
 
															+.el-divider--horizontal {
														
 
															+  margin: 8px 0;
														
 
															+  border-top-color: var(--color-border);
														
 
															+}
														
 
															+</style>
														
--- a/src/components/VBox/index.ts
+++ b/src/components/VBox/index.ts
@@ -0,0 +1 @@
 
															+export { default } from './src/VBox.vue'
														
--- a/src/components/VBox/src/VBox.vue
+++ b/src/components/VBox/src/VBox.vue
@@ -0,0 +1,159 @@
 
															+<script setup lang="ts">
														
 
															+const props = withDefaults(
														
 
															+  defineProps<{
														
 
															+    id?: number
														
 
															+    isSeeAll?: boolean
														
 
															+    isDraggable?: boolean
														
 
															+  }>(),
														
 
															+  {
														
 
															+    isSeeAll: true,
														
 
															+    isDraggable: true
														
 
															+  }
														
 
															+)
														
 
															+
														
 
															+const isCollapse = defineModel<boolean>()
														
 
															+const emits = defineEmits<{ collapse: [boolean]; draggable: [string, number] }>()
														
 
															+const handleCollapse = (isCollapse: boolean) => {
														
 
															+  emits('collapse', isCollapse)
														
 
															+}
														
 
															+
														
 
															+const optionList = ref([
														
 
															+  { id: 1, name: 'Move to Top', icon: 'icon_movetotop_b' },
														
 
															+  {
														
 
															+    id: 2,
														
 
															+    name: 'Move Up',
														
 
															+    icon: 'icon_moveup_b'
														
 
															+  },
														
 
															+  {
														
 
															+    id: 3,
														
 
															+    name: 'Move Down',
														
 
															+    icon: 'icon_movedown_b'
														
 
															+  },
														
 
															+  {
														
 
															+    id: 4,
														
 
															+    name: 'Move to Bottom',
														
 
															+    icon: 'icon_movetobottom__b'
														
 
															+  }
														
 
															+])
														
 
															+
														
 
															+const handleDraggable = (type: string) => {
														
 
															+  if (!props.id) return
														
 
															+  emits('draggable', type, props.id)
														
 
															+  vBoxPopoverRef.value.hide()
														
 
															+}
														
 
															+
														
 
															+const vBoxPopoverRef = ref()
														
 
															+</script>
														
 
															+
														
 
															+<template>
														
 
															+  <div class="v-box">
														
 
															+    <div class="header">
														
 
															+      <slot name="header">Title</slot>
														
 
															+      <div class="option">
														
 
															+        <SeeAllIcon
														
 
															+          v-if="props.isSeeAll"
														
 
															+          @update:modelValue="handleCollapse"
														
 
															+          v-model="isCollapse"
														
 
															+        />
														
 
															+        <el-popover
														
 
															+          ref="vBoxPopoverRef"
														
 
															+          popper-class="v-box-options"
														
 
															+          :width="172"
														
 
															+          placement="bottom"
														
 
															+          trigger="click"
														
 
															+        >
														
 
															+          <div class="options">
														
 
															+            <div
														
 
															+              class="move-item"
														
 
															+              @click="handleDraggable(item.name)"
														
 
															+              v-for="item in optionList"
														
 
															+              :key="item.name"
														
 
															+            >
														
 
															+              <span class="font_family" :class="[`icon-${item.icon}`]"></span>
														
 
															+              <span>{{ item.name }}</span>
														
 
															+            </div>
														
 
															+          </div>
														
 
															+          <template #reference v-if="props.isDraggable">
														
 
															+            <el-button type="text" class="sort handle-draggable">
														
 
															+              <span class="font_family icon-icon_dragsort__b" style="font-size: 16px"></span>
														
 
															+            </el-button>
														
 
															+          </template>
														
 
															+        </el-popover>
														
 
															+      </div>
														
 
															+    </div>
														
 
															+    <div class="content">
														
 
															+      <slot name="content"></slot>
														
 
															+    </div>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.v-box {
														
 
															+  border: 1px solid var(--color-border);
														
 
															+  overflow: hidden;
														
 
															+  border-radius: 12px;
														
 
															+  & > .header {
														
 
															+    position: relative;
														
 
															+    padding: 0 16px;
														
 
															+    height: 48px;
														
 
															+    line-height: 48px;
														
 
															+    background-color: var(--color-header-bg);
														
 
															+    font-size: 18px;
														
 
															+    font-weight: 700;
														
 
															+    .option {
														
 
															+      position: absolute;
														
 
															+      right: 48px;
														
 
															+      top: 50%;
														
 
															+      transform: translateY(-50%);
														
 
															+      display: flex;
														
 
															+      align-items: center;
														
 
															+    }
														
 
															+    .sort {
														
 
															+      position: absolute;
														
 
															+      top: 50%;
														
 
															+      right: -40px;
														
 
															+      transform: translateY(-50%);
														
 
															+      display: flex;
														
 
															+      align-items: center;
														
 
															+      justify-content: center;
														
 
															+      span.icon-icon_dragsort__b {
														
 
															+        color: var(--color-neutral-1);
														
 
															+      }
														
 
															+      & .font_family {
														
 
															+        &:active {
														
 
															+          color: var(--color-theme);
														
 
															+        }
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
 
															+<style lang="scss">
														
 
															+.el-popover.el-popper.v-box-options {
														
 
															+  border-radius: 12px;
														
 
															+}
														
 
															+.v-box-options {
														
 
															+  .options {
														
 
															+    padding: 8px;
														
 
															+    color: var(--color-neutral-1);
														
 
															+    .move-item {
														
 
															+      height: 40px;
														
 
															+      line-height: 40px;
														
 
															+
														
 
															+      &:hover {
														
 
															+        border-radius: 6px;
														
 
															+        background-color: var(--color-btn-default-bg-hover);
														
 
															+        span {
														
 
															+          color: var(--color-theme);
														
 
															+        }
														
 
															+      }
														
 
															+      .font_family {
														
 
															+        margin-left: 8px;
														
 
															+        margin-right: 10px;
														
 
															+        font-size: 16px;
														
 
															+        vertical-align: baseline;
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/src/components/VBox_Dashboard/index.ts
+++ b/src/components/VBox_Dashboard/index.ts
@@ -0,0 +1 @@
 
															+export { default } from './src/VBox_Dashboard.vue'
														
--- a/src/components/VBox_Dashboard/src/VBox_Dashboard.vue
+++ b/src/components/VBox_Dashboard/src/VBox_Dashboard.vue
@@ -0,0 +1,169 @@
 
															+<script setup lang="ts">
														
 
															+import { ref } from 'vue'
														
 
															+const props = withDefaults(
														
 
															+  defineProps<{
														
 
															+    id?: number
														
 
															+  }>(),
														
 
															+  {}
														
 
															+)
														
 
															+
														
 
															+const emits = defineEmits<{ changeCancel: [boolean]; draggable: [string, number] }>()
														
 
															+const changeCancel = (isShow: boolean) => {
														
 
															+  emits('changeCancel', isShow)
														
 
															+}
														
 
															+
														
 
															+const optionList = ref([
														
 
															+  { id: 1, name: 'Move to Top', icon: 'icon_movetotop_b' },
														
 
															+  {
														
 
															+    id: 2,
														
 
															+    name: 'Move Up',
														
 
															+    icon: 'icon_moveup_b'
														
 
															+  },
														
 
															+  {
														
 
															+    id: 3,
														
 
															+    name: 'Move Down',
														
 
															+    icon: 'icon_movedown_b'
														
 
															+  },
														
 
															+  {
														
 
															+    id: 4,
														
 
															+    name: 'Move to Bottom',
														
 
															+    icon: 'icon_movetobottom__b'
														
 
															+  }
														
 
															+])
														
 
															+
														
 
															+const handleDraggable = (type: string) => {
														
 
															+  if (!props.id) return
														
 
															+  emits('draggable', type, props.id)
														
 
															+  vBoxPopoverRef.value.hide()
														
 
															+}
														
 
															+
														
 
															+const vBoxPopoverRef = ref()
														
 
															+</script>
														
 
															+
														
 
															+<template>
														
 
															+  <div class="v-box">
														
 
															+    <div class="header">
														
 
															+      <slot name="header">Title</slot>
														
 
															+      <div class="option">
														
 
															+        <!-- <el-popover
														
 
															+          ref="vBoxPopoverRef"
														
 
															+          popper-class="v-box-options"
														
 
															+          :width="172"
														
 
															+          placement="bottom"
														
 
															+          trigger="click"
														
 
															+        >
														
 
															+          <div class="options">
														
 
															+            <div
														
 
															+              class="move-item"
														
 
															+              @click="handleDraggable(item.name)"
														
 
															+              v-for="item in optionList"
														
 
															+              :key="item.name"
														
 
															+            >
														
 
															+              <span class="font_family" :class="[`icon-${item.icon}`]"></span>
														
 
															+              <span>{{ item.name }}</span>
														
 
															+            </div>
														
 
															+          </div>
														
 
															+          <template #reference> -->
														
 
															+        <el-button type="text" class="sort handle-draggable">
														
 
															+          <span class="iconfont_icon">
														
 
															+            <svg class="iconfont" aria-hidden="true">
														
 
															+              <use xlink:href="#icon-icon_dragsort__b"></use>
														
 
															+            </svg>
														
 
															+          </span>
														
 
															+        </el-button>
														
 
															+        <!-- </template>
														
 
															+        </el-popover> -->
														
 
															+      </div>
														
 
															+      <div class="cancel" @click="changeCancel">
														
 
															+        <span class="iconfont_icon">
														
 
															+          <svg class="iconfont" aria-hidden="true">
														
 
															+            <use xlink:href="#icon-icon_reject_b"></use>
														
 
															+          </svg>
														
 
															+        </span>
														
 
															+      </div>
														
 
															+    </div>
														
 
															+    <div class="content">
														
 
															+      <slot name="content"></slot>
														
 
															+    </div>
														
 
															+    <div class="content">
														
 
															+      <slot name="content2"></slot>
														
 
															+    </div>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.v-box {
														
 
															+  border: 1px solid var(--color-border);
														
 
															+  overflow: hidden;
														
 
															+  border-radius: 12px;
														
 
															+  & > .header {
														
 
															+    position: relative;
														
 
															+    padding: 0 16px 0 48px;
														
 
															+    height: 48px;
														
 
															+    line-height: 48px;
														
 
															+    font-size: 18px;
														
 
															+    border-bottom: 1px solid var(--color-border);
														
 
															+    font-weight: 700;
														
 
															+    .option {
														
 
															+      position: absolute;
														
 
															+      left: 0px;
														
 
															+      top: 50%;
														
 
															+      transform: translateY(-50%);
														
 
															+      display: flex;
														
 
															+      align-items: center;
														
 
															+    }
														
 
															+    .cancel {
														
 
															+      position: absolute;
														
 
															+      right: 26px;
														
 
															+      cursor: pointer;
														
 
															+      top: 0;
														
 
															+    }
														
 
															+    .sort {
														
 
															+      position: absolute;
														
 
															+      top: 50%;
														
 
															+      right: -40px;
														
 
															+      transform: translateY(-50%);
														
 
															+      display: flex;
														
 
															+      align-items: center;
														
 
															+      justify-content: center;
														
 
															+      span.icon-icon_dragsort__b {
														
 
															+        color: var(--color-neutral-1);
														
 
															+      }
														
 
															+      & .font_family {
														
 
															+        &:active {
														
 
															+          color: var(--color-theme);
														
 
															+        }
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
 
															+<style lang="scss">
														
 
															+.el-popover.el-popper.v-box-options {
														
 
															+  border-radius: 12px;
														
 
															+}
														
 
															+.v-box-options {
														
 
															+  .options {
														
 
															+    padding: 8px;
														
 
															+    color: var(--color-neutral-1);
														
 
															+    .move-item {
														
 
															+      height: 40px;
														
 
															+      line-height: 40px;
														
 
															+
														
 
															+      &:hover {
														
 
															+        border-radius: 6px;
														
 
															+        background-color: var(--color-btn-default-bg-hover);
														
 
															+        span {
														
 
															+          color: var(--color-theme);
														
 
															+        }
														
 
															+      }
														
 
															+      .font_family {
														
 
															+        margin-left: 8px;
														
 
															+        margin-right: 10px;
														
 
															+        font-size: 16px;
														
 
															+        vertical-align: baseline;
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/src/components/VBreadcrumd/index.ts
+++ b/src/components/VBreadcrumd/index.ts
@@ -0,0 +1 @@
 
															+export { default } from './src/VBreadcrumd.vue'
														
--- a/src/components/VBreadcrumd/src/VBreadcrumd.vue
+++ b/src/components/VBreadcrumd/src/VBreadcrumd.vue
@@ -0,0 +1,38 @@
 
															+<script setup lang="ts">
														
 
															+import { useParentPathStore } from '@/stores/modules/parentPath'
														
 
															+import { useRouter } from 'vue-router'
														
 
															+
														
 
															+const router = useRouter()
														
 
															+const parentPathStore = useParentPathStore()
														
 
															+
														
 
															+const handleGoBack = () => {
														
 
															+  router.push({ path: parentPathStore.parentPathInfo?.fullPath })
														
 
															+}
														
 
															+</script>
														
 
															+
														
 
															+<template>
														
 
															+  <div class="v-breadcrumd" v-if="parentPathStore.parentPathInfo?.name">
														
 
															+    <span class="font_family icon-icon_back_b" @click="handleGoBack"></span>
														
 
															+    <span style="color: var(--color-neutral-3)">{{ parentPathStore.parentPathInfo?.name }}</span>
														
 
															+    <span class="interval">|</span>
														
 
															+    <span style="font-weight: 700">Detail</span>
														
 
															+  </div>
														
 
															+  <div v-else></div>
														
 
															+</template>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.v-breadcrumd {
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  gap: 4px;
														
 
															+  .icon-icon_back_b {
														
 
															+    font-size: 18px;
														
 
															+    cursor: pointer;
														
 
															+  }
														
 
															+  .interval {
														
 
															+    margin: 0 2px;
														
 
															+    color: var(--color-neutral-3);
														
 
															+    transform: rotate(20deg);
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/src/components/VEmpty/index.ts
+++ b/src/components/VEmpty/index.ts
--- a/src/components/VEmpty/src/VEmpty.vue
+++ b/src/components/VEmpty/src/VEmpty.vue
@@ -0,0 +1,49 @@
 
															+<script setup lang="ts"></script>
														
 
															+
														
 
															+<template>
														
 
															+  <div class="v-empty">
														
 
															+    <div class="empty-img">
														
 
															+      <img src="./images/default_image.png" alt="" />
														
 
															+    </div>
														
 
															+    <p class="title">Whoops, No matches</p>
														
 
															+    <p class="light">We didn't find any search results,</p>
														
 
															+    <p class="light">please try to adjust your search keywords.</p>
														
 
															+    <div class="suggestion">
														
 
															+      <slot></slot>
														
 
															+    </div>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.v-empty {
														
 
															+  display: flex;
														
 
															+  flex-direction: column;
														
 
															+  align-items: center;
														
 
															+  .empty-img {
														
 
															+    margin-bottom: 16px;
														
 
															+  }
														
 
															+  .title {
														
 
															+    margin-bottom: 8px;
														
 
															+    font-weight: 600;
														
 
															+    color: var(--color-neutral-2);
														
 
															+  }
														
 
															+  .light {
														
 
															+    font-size: 12px;
														
 
															+    line-height: 18px;
														
 
															+    color: var(--color-neutral-3);
														
 
															+  }
														
 
															+  .suggestion {
														
 
															+    margin-top: 16px;
														
 
															+    padding: 8px;
														
 
															+    font-size: 12px;
														
 
															+    line-height: 18px;
														
 
															+    border-radius: 6px;
														
 
															+    text-align: left;
														
 
															+    background-color: var(--color-table-header-bg);
														
 
															+    :deep(p) {
														
 
															+      margin: 0;
														
 
															+      color: var(--color-neutral-3);
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/src/components/VEmpty/src/images/default_image.png
+++ b/src/components/VEmpty/src/images/default_image.png
--- a/src/components/VLoading/index.ts
+++ b/src/components/VLoading/index.ts
@@ -0,0 +1 @@
 
															+export { default } from './src/VLoading.vue'
														
--- a/src/components/VLoading/src/VLoading.vue
+++ b/src/components/VLoading/src/VLoading.vue
@@ -0,0 +1,74 @@
 
															+<script setup lang="ts">
														
 
															+/**
														
 
															+ *
														
 
															+ * @param {string} target - 挂载的目标元素
														
 
															+ * @param {boolean} loading - 是否显示loading
														
 
															+ * @param {boolean} isLoadingBackground - 是否显示背景
														
 
															+ */
														
 
															+interface internalProps {
														
 
															+  target?: string
														
 
															+  loading: boolean
														
 
															+  isLoadingBackground: boolean
														
 
															+}
														
 
															+
														
 
															+const props = withDefaults(defineProps<internalProps>(), {
														
 
															+  target: 'body',
														
 
															+  isLoadingBackground: false
														
 
															+})
														
 
															+</script>
														
 
															+<template>
														
 
															+  <Teleport :to="props.target">
														
 
															+    <div v-if="props.loading" class="v-loading-mask"
														
 
															+      :style="{ background: props.isLoadingBackground ? 'none' : '#2B2F36' }">
														
 
															+      <div class="v-loading-spinner">
														
 
															+        <div>
														
 
															+          <img class="circular" src="./images/icon_loading.png" alt="" />
														
 
															+          <p class="loading-text">Loading...</p>
														
 
															+        </div>
														
 
															+      </div>
														
 
															+    </div>
														
 
															+  </Teleport>
														
 
															+</template>
														
 
															+
														
 
															+<style scoped>
														
 
															+.v-loading-mask {
														
 
															+  position: absolute;
														
 
															+  z-index: 2000;
														
 
															+  margin: 0;
														
 
															+  top: 0;
														
 
															+  right: 0;
														
 
															+  bottom: 0;
														
 
															+  left: 0;
														
 
															+  opacity: 0.7;
														
 
															+}
														
 
															+
														
 
															+.v-loading-spinner {
														
 
															+  top: 50%;
														
 
															+  margin-top: -24px;
														
 
															+  width: 100%;
														
 
															+  text-align: center;
														
 
															+  position: absolute;
														
 
															+}
														
 
															+
														
 
															+.circular {
														
 
															+  display: inline;
														
 
															+  height: 48px;
														
 
															+  width: 48px;
														
 
															+  margin-bottom: 8px;
														
 
															+  animation: loading-rotate 2s linear infinite;
														
 
															+}
														
 
															+
														
 
															+.loading-text {
														
 
															+  color: var(--color-neutral-3);
														
 
															+}
														
 
															+
														
 
															+@keyframes loading-rotate {
														
 
															+  0% {
														
 
															+    transform: rotate(0deg);
														
 
															+  }
														
 
															+
														
 
															+  100% {
														
 
															+    transform: rotate(360deg);
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/src/components/VLoading/src/images/icon_loading.png
+++ b/src/components/VLoading/src/images/icon_loading.png
--- a/src/components/VTag/index.ts
+++ b/src/components/VTag/index.ts
@@ -0,0 +1 @@
 
															+export { default } from './src/VTag.vue'
														
--- a/src/components/VTag/src/VTag.vue
+++ b/src/components/VTag/src/VTag.vue
@@ -0,0 +1,120 @@
 
															+<script setup lang="ts">
														
 
															+interface internalProps {
														
 
															+  type?:
														
 
															+    | 'Confirmed'
														
 
															+    | 'Cancelled'
														
 
															+    | 'Created'
														
 
															+    | 'Booked'
														
 
															+    | 'Cargo Received'
														
 
															+    | 'Departure'
														
 
															+    | 'Arrived'
														
 
															+    | 'Completed'
														
 
															+  large?: boolean
														
 
															+}
														
 
															+
														
 
															+const mappingTable = new Map([
														
 
															+  ['Confirmed', 'confirmed'],
														
 
															+  ['Cancelled', 'cancelled'],
														
 
															+  ['Created', 'created'],
														
 
															+  ['Booked', 'booked'],
														
 
															+  ['Cargo Received', 'cargo-received'],
														
 
															+  ['Departure', 'departure'],
														
 
															+  ['Arrived', 'arrived'],
														
 
															+  ['Completed', 'completed']
														
 
															+])
														
 
															+defineProps<internalProps>()
														
 
															+</script>
														
 
															+
														
 
															+<template>
														
 
															+  <div :class="['v-tag', type && 'v-tag__' + mappingTable.get(type), large && 'large']">
														
 
															+    <div class="dot"></div>
														
 
															+    <slot />
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.v-tag {
														
 
															+  display: inline-flex;
														
 
															+  justify-content: center;
														
 
															+  cursor: default;
														
 
															+  align-items: center;
														
 
															+  padding: 4px 8px;
														
 
															+  height: 22px;
														
 
															+  line-height: 28px;
														
 
															+  font-size: 12px;
														
 
															+  border-radius: 12px;
														
 
															+  background-color: #f7faff;
														
 
															+  color: #4290ff;
														
 
															+  &.large {
														
 
															+    padding: 12px 12px;
														
 
															+    height: 28px;
														
 
															+    font-size: 14px;
														
 
															+  }
														
 
															+  .dot {
														
 
															+    height: 5px;
														
 
															+    width: 5px;
														
 
															+    margin-right: 4px;
														
 
															+    border-radius: 50%;
														
 
															+    background-color: var(--color-tag-confirmed);
														
 
															+  }
														
 
															+  &.v-tag__confirmed {
														
 
															+    background-color: var(--color-tag-confirmed-bg);
														
 
															+    color: var(--color-tag-confirmed);
														
 
															+    .dot {
														
 
															+      background-color: var(--color-tag-confirmed);
														
 
															+    }
														
 
															+  }
														
 
															+  &.v-tag__cancelled {
														
 
															+    background-color: var(--color-tag-cancelled-bg);
														
 
															+    color: var(--color-tag-cancelled);
														
 
															+    .dot {
														
 
															+      background-color: var(--color-tag-cancelled);
														
 
															+    }
														
 
															+  }
														
 
															+  &.v-tag__created {
														
 
															+    background-color: var(--color-tag-created-bg);
														
 
															+    color: var(--color-tag-created);
														
 
															+    .dot {
														
 
															+      background-color: var(--color-tag-created);
														
 
															+    }
														
 
															+  }
														
 
															+  &.v-tag__booked {
														
 
															+    background-color: var(--color-tag-booked-bg);
														
 
															+    color: var(--color-tag-booked);
														
 
															+    .dot {
														
 
															+      background-color: var(--color-tag-booked);
														
 
															+    }
														
 
															+  }
														
 
															+  &.v-tag__cargo-received {
														
 
															+    background-color: var(--color-tag-cargo-received-bg);
														
 
															+    color: var(--color-tag-cargo-received);
														
 
															+    .dot {
														
 
															+      background-color: var(--color-tag-cargo-received);
														
 
															+    }
														
 
															+  }
														
 
															+  &.v-tag__departure {
														
 
															+    background-color: var(--color-tag-departure-bg);
														
 
															+    color: var(--color-tag-departure);
														
 
															+    .dot {
														
 
															+      background-color: var(--color-tag-departure);
														
 
															+    }
														
 
															+  }
														
 
															+  &.v-tag__arrived {
														
 
															+    background-color: var(--color-tag-arrived-bg);
														
 
															+    color: var(--color-tag-arrived);
														
 
															+    .dot {
														
 
															+      background-color: var(--color-tag-arrived);
														
 
															+    }
														
 
															+  }
														
 
															+  &.v-tag__completed {
														
 
															+    background-color: var(--color-tag-completed-bg);
														
 
															+    color: var(--color-tag-completed);
														
 
															+    .dot {
														
 
															+      background-color: var(--color-tag-completed);
														
 
															+    }
														
 
															+  }
														
 
															+  & + .v-tag {
														
 
															+    margin-left: 8px;
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/src/components/VerrifyInformation/index.ts
+++ b/src/components/VerrifyInformation/index.ts
@@ -0,0 +1 @@
 
															+export { default } from './src/VerrifyInformation.vue'
														
--- a/src/components/VerrifyInformation/src/VerrifyInformation.vue
+++ b/src/components/VerrifyInformation/src/VerrifyInformation.vue
@@ -0,0 +1,18 @@
 
															+<script setup lang="ts">
														
 
															+const props = defineProps({
														
 
															+  isshowVerfication: Boolean,
														
 
															+  verification: String
														
 
															+})
														
 
															+</script>
														
 
															+<template>
														
 
															+  <div v-if="props.isshowVerfication" class="verification" id="verification">
														
 
															+    {{ props.verification }}
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.verification {
														
 
															+  color: var(--color-danger);
														
 
															+  font-size: var(--font-size-2);
														
 
															+}
														
 
															+</style>
														
--- a/src/components/icons/IconCommunity.vue
+++ b/src/components/icons/IconCommunity.vue
@@ -0,0 +1,7 @@
 
															+<template>
														
 
															+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
														
 
															+    <path
														
 
															+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
														
 
															+    />
														
 
															+  </svg>
														
 
															+</template>
														
--- a/src/components/icons/IconDocumentation.vue
+++ b/src/components/icons/IconDocumentation.vue
@@ -0,0 +1,7 @@
 
															+<template>
														
 
															+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
														
 
															+    <path
														
 
															+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
														
 
															+    />
														
 
															+  </svg>
														
 
															+</template>
														
--- a/src/components/icons/IconEcosystem.vue
+++ b/src/components/icons/IconEcosystem.vue
@@ -0,0 +1,7 @@
 
															+<template>
														
 
															+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
														
 
															+    <path
														
 
															+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
														
 
															+    />
														
 
															+  </svg>
														
 
															+</template>
														
--- a/src/components/icons/IconSupport.vue
+++ b/src/components/icons/IconSupport.vue
@@ -0,0 +1,7 @@
 
															+<template>
														
 
															+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
														
 
															+    <path
														
 
															+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
														
 
															+    />
														
 
															+  </svg>
														
 
															+</template>
														
--- a/src/components/icons/IconTooling.vue
+++ b/src/components/icons/IconTooling.vue
@@ -0,0 +1,19 @@
 
															+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
														
 
															+<template>
														
 
															+  <svg
														
 
															+    xmlns="http://www.w3.org/2000/svg"
														
 
															+    xmlns:xlink="http://www.w3.org/1999/xlink"
														
 
															+    aria-hidden="true"
														
 
															+    role="img"
														
 
															+    class="iconify iconify--mdi"
														
 
															+    width="24"
														
 
															+    height="24"
														
 
															+    preserveAspectRatio="xMidYMid meet"
														
 
															+    viewBox="0 0 24 24"
														
 
															+  >
														
 
															+    <path
														
 
															+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
														
 
															+      fill="currentColor"
														
 
															+    ></path>
														
 
															+  </svg>
														
 
															+</template>
														
--- a/src/components/selectAutoSelect/index.ts
+++ b/src/components/selectAutoSelect/index.ts
@@ -0,0 +1 @@
 
															+export { default } from './src/selectAutoSelect.vue'
														
--- a/src/components/selectAutoSelect/src/selectAutoSelect.vue
+++ b/src/components/selectAutoSelect/src/selectAutoSelect.vue
@@ -0,0 +1,286 @@
 
															+<script setup lang="ts">
														
 
															+import { ref, watch } from 'vue'
														
 
															+import IconDropDown from '@/components/IconDropDown'
														
 
															+import VerrifyInformation from '@/components/VerrifyInformation'
														
 
															+interface TypeItem {
														
 
															+  partyType: ''
														
 
															+  partyname: []
														
 
															+  isshowVerfication: boolean
														
 
															+}
														
 
															+interface ListItem {
														
 
															+  value: string
														
 
															+  label: string
														
 
															+}
														
 
															+interface dateoptions {
														
 
															+  value: string
														
 
															+  label: string
														
 
															+}
														
 
															+interface Props {
														
 
															+  AddDateType: TypeItem[]
														
 
															+  ASPlaceholder: string
														
 
															+  DateTypeoptions: dateoptions[]
														
 
															+  Verification: string
														
 
															+  selectedPartyTypeoptions: Array<string>
														
 
															+}
														
 
															+interface optionsItem {
														
 
															+  value: string
														
 
															+  label: string
														
 
															+}
														
 
															+const list = ref<ListItem[]>([])
														
 
															+const options = ref<ListItem[]>([])
														
 
															+const loading = ref(false)
														
 
															+const props = withDefaults(defineProps<Props>(), {})
														
 
															+const AddType = ref(props.AddDateType)
														
 
															+const value = ref()
														
 
															+const dataTypeoptions = ref<optionsItem[]>([])
														
 
															+const typeSelectIndex = ref(-1)
														
 
															+watch(
														
 
															+  () => props.selectedPartyTypeoptions,
														
 
															+  (newV) => {
														
 
															+    let arr: any = []
														
 
															+    if (newV.length == 0) {
														
 
															+      arr = props.DateTypeoptions
														
 
															+    } else {
														
 
															+      props.DateTypeoptions.forEach((item: any) => {
														
 
															+        let index = newV.findIndex((con: any) => {
														
 
															+          return con == item.value
														
 
															+        })
														
 
															+        if (index < 0) {
														
 
															+          arr.push(item)
														
 
															+        }
														
 
															+      })
														
 
															+    }
														
 
															+    dataTypeoptions.value = arr
														
 
															+  },
														
 
															+  {
														
 
															+    immediate: true,
														
 
															+    deep: true
														
 
															+  }
														
 
															+)
														
 
															+const str = ref()
														
 
															+const InputAutoSelect = (val: any) => {
														
 
															+  if (val.includes('Agent')) {
														
 
															+    str.value = 'apex'
														
 
															+  } else {
														
 
															+    str.value = 'sales'
														
 
															+  }
														
 
															+}
														
 
															+const remoteMethod = (query: string) => {
														
 
															+  if (query) {
														
 
															+    loading.value = true
														
 
															+    setTimeout(() => {
														
 
															+      $api
														
 
															+        .getMoreFiltersData({
														
 
															+          term: query,
														
 
															+          type: str.value
														
 
															+        })
														
 
															+        .then((res: any) => {
														
 
															+          if (res.code == 200) {
														
 
															+            loading.value = false
														
 
															+            list.value = res.data.map((item: any) => {
														
 
															+              return { value: item, label: item }
														
 
															+            })
														
 
															+            options.value = list.value.filter((item) => {
														
 
															+              return item.label.toLowerCase().includes(query.toLowerCase())
														
 
															+            })
														
 
															+          }
														
 
															+        })
														
 
															+    }, 200)
														
 
															+  } else {
														
 
															+    options.value = []
														
 
															+  }
														
 
															+}
														
 
															+// 删除当前more type
														
 
															+const deleteType = (i: any) => {
														
 
															+  emit('delSelect', i, AddType.value[i].partyType)
														
 
															+  AddType.value.splice(i, 1)
														
 
															+}
														
 
															+// 选中type改变
														
 
															+const changeSelect = (val: any) => {
														
 
															+  emit('changeAutoSelectAddType', typeSelectIndex.value, val)
														
 
															+}
														
 
															+// 选中name改变
														
 
															+const emit = defineEmits(['changeAutoSelectAddType', 'delSelect', 'changeAutoSelect'])
														
 
															+let AutoSelectObj: any = {}
														
 
															+const changeAutoSelect = (val: any, value: any) => {
														
 
															+  AutoSelectObj[val] = value.join()
														
 
															+  emit('changeAutoSelect', AutoSelectObj)
														
 
															+}
														
 
															+// 清除警告样式
														
 
															+const removeClass = (val: any, index: any) => {
														
 
															+  const input_change = document.getElementsByClassName('input_change')
														
 
															+  if (input_change.length && val.partyname.length != 0) {
														
 
															+    if (input_change[index].classList.value.indexOf('AlertInput') != -1) {
														
 
															+      input_change[index].classList.remove('AlertInput')
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+const typeSelectFocus = (index: any, e: any) => {
														
 
															+  typeSelectIndex.value = index
														
 
															+}
														
 
															+const typeSelectBlur = () => {
														
 
															+  typeSelectIndex.value = -1
														
 
															+  let arr: any = []
														
 
															+  if (props.selectedPartyTypeoptions.length == 0) {
														
 
															+    arr = props.DateTypeoptions
														
 
															+  } else {
														
 
															+    props.DateTypeoptions.forEach((item: any) => {
														
 
															+      let index = props.selectedPartyTypeoptions.findIndex((con: any) => {
														
 
															+        return con == item.value
														
 
															+      })
														
 
															+      if (index < 0) {
														
 
															+        arr.push(item)
														
 
															+      }
														
 
															+    })
														
 
															+  }
														
 
															+  dataTypeoptions.value = arr
														
 
															+}
														
 
															+const typeSelectClick = (index: any, val: any) => {
														
 
															+  if (AddType.value[index].partyType) {
														
 
															+    let j = props.DateTypeoptions.findIndex((item: any) => {
														
 
															+      return item.value == AddType.value[index].partyType
														
 
															+    })
														
 
															+    let i = dataTypeoptions.value.findIndex((item: any) => {
														
 
															+      return item.value == AddType.value[index].partyType
														
 
															+    })
														
 
															+    if (i < 0) {
														
 
															+      dataTypeoptions.value.push(props.DateTypeoptions[j])
														
 
															+    }
														
 
															+  } else {
														
 
															+    let arr: any = []
														
 
															+    if (props.selectedPartyTypeoptions.length == 0) {
														
 
															+      arr = props.DateTypeoptions
														
 
															+    } else {
														
 
															+      props.DateTypeoptions.forEach((item: any) => {
														
 
															+        let index = props.selectedPartyTypeoptions.findIndex((con: any) => {
														
 
															+          return con == item.value
														
 
															+        })
														
 
															+        if (index < 0) {
														
 
															+          arr.push(item)
														
 
															+        }
														
 
															+      })
														
 
															+    }
														
 
															+    dataTypeoptions.value = arr
														
 
															+  }
														
 
															+}
														
 
															+</script>
														
 
															+<template>
														
 
															+  <div class="AddType" v-for="(item, index) in AddType" :key="index">
														
 
															+    <div>
														
 
															+      <div class="Date_Title">
														
 
															+        <div class="ETD_title">Party Type</div>
														
 
															+        <span class="iconfont_icon" @click="deleteType(index)">
														
 
															+          <svg class="iconfont icon_delete" aria-hidden="true">
														
 
															+            <use xlink:href="#icon-icon_delete_b"></use>
														
 
															+          </svg>
														
 
															+        </span>
														
 
															+      </div>
														
 
															+      <el-select
														
 
															+        v-model="AddType[index].partyType"
														
 
															+        :suffix-icon="IconDropDown"
														
 
															+        @blur="typeSelectBlur"
														
 
															+        class="testname"
														
 
															+        @focus="typeSelectFocus(index, $event)"
														
 
															+        @click="typeSelectClick(index, $event)"
														
 
															+        @change="changeSelect(AddType[index].partyType)"
														
 
															+        placeholder="Please Select Party Type"
														
 
															+      >
														
 
															+        <el-option
														
 
															+          v-for="item in dataTypeoptions"
														
 
															+          :key="item.value"
														
 
															+          :label="item.label"
														
 
															+          :value="item.value"
														
 
															+        >
														
 
															+        </el-option>
														
 
															+      </el-select>
														
 
															+    </div>
														
 
															+    <div style="margin-top: 16px">
														
 
															+      <div class="ETD_title">Party Details</div>
														
 
															+      <el-select
														
 
															+        v-model="AddType[index].partyname"
														
 
															+        multiple
														
 
															+        filterable
														
 
															+        remote
														
 
															+        class="input_change"
														
 
															+        :reserve-keyword="false"
														
 
															+        :placeholder="props.ASPlaceholder"
														
 
															+        collapse-tags
														
 
															+        @blur="removeClass(AddType[index], index)"
														
 
															+        @input="InputAutoSelect(AddType[index].partyType)"
														
 
															+        @change="changeAutoSelect(AddType[index].partyType, AddType[index].partyname)"
														
 
															+        :disabled="AddType[index].partyType ? false : true"
														
 
															+        collapse-tags-tooltip
														
 
															+        :max-collapse-tags="3"
														
 
															+        :remote-method="remoteMethod"
														
 
															+        :loading="loading"
														
 
															+      >
														
 
															+        <el-option
														
 
															+          v-for="item in options"
														
 
															+          :key="item.value"
														
 
															+          :label="item.label"
														
 
															+          :value="item.value"
														
 
															+        >
														
 
															+          <el-checkbox :checked="value?.includes(item.value)"></el-checkbox>
														
 
															+          <div class="label">{{ item.value }}</div>
														
 
															+        </el-option>
														
 
															+      </el-select>
														
 
															+      <VerrifyInformation
														
 
															+        :isshowVerfication="AddDateType[index].isshowVerfication"
														
 
															+        :verification="props.Verification"
														
 
															+      ></VerrifyInformation>
														
 
															+    </div>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.AddType {
														
 
															+  background-color: var(--addparties-background-color);
														
 
															+  margin: 0 16px 8px 16px;
														
 
															+  padding: 8px;
														
 
															+  border-radius: var(--border-radius-6);
														
 
															+}
														
 
															+
														
 
															+.ETD_title {
														
 
															+  font-size: var(--font-size-2);
														
 
															+  color: var(--color-neutral-2);
														
 
															+}
														
 
															+
														
 
															+.Date_Title {
														
 
															+  display: flex;
														
 
															+  justify-content: space-between;
														
 
															+  align-items: center;
														
 
															+}
														
 
															+
														
 
															+.icon_delete {
														
 
															+  fill: var(--color-danger);
														
 
															+  cursor: pointer;
														
 
															+}
														
 
															+
														
 
															+.el-select-dropdown__item.is-selected {
														
 
															+  div {
														
 
															+    color: var(--badge__content--warning);
														
 
															+  }
														
 
															+
														
 
															+  background-color: transparent;
														
 
															+}
														
 
															+
														
 
															+.el-select-dropdown__item {
														
 
															+  padding-left: 7.7px;
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+}
														
 
															+
														
 
															+.label {
														
 
															+  margin-left: 8px;
														
 
															+}
														
 
															+
														
 
															+.el-select-dropdown__item.is-hovering {
														
 
															+  div {
														
 
															+    color: var(--badge__content--warning);
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.AlertInput :deep(.el-select__wrapper) {
														
 
															+  box-shadow: 0 0 0 0.5px var(--color-danger);
														
 
															+}
														
 
															+</style>
														
--- a/src/directive/VLoading.ts
+++ b/src/directive/VLoading.ts
@@ -0,0 +1,83 @@
 
															+import { createApp, h } from 'vue'
														
 
															+import Loading from '../components/VLoading'
														
 
															+
														
 
															+export const VLoading = {
														
 
															+  mounted(el: any, binding: any) {
														
 
															+    let options = {}
														
 
															+    const target = el.getAttribute('target')
														
 
															+    if (target) {
														
 
															+      options = {
														
 
															+        target: `${target}`
														
 
															+      }
														
 
															+    } else {
														
 
															+      if (el.id) {
														
 
															+        options = {
														
 
															+          target: `#${el.id}`
														
 
															+        }
														
 
															+      } else {
														
 
															+        el.id = `loading-target-${Math.random().toString(36).slice(2, 9)}`
														
 
															+        options = {
														
 
															+          target: `#${el.id}`
														
 
															+        }
														
 
															+      }
														
 
															+    }
														
 
															+    options = {
														
 
															+      ...options,
														
 
															+      isLoadingBackground: el.getAttribute('isLoadingBackground') || false
														
 
															+    }
														
 
															+    const app = createApp({
														
 
															+      render() {
														
 
															+        return h(Loading, { loading: binding.value, ...options })
														
 
															+      }
														
 
															+    })
														
 
															+
														
 
															+    const newDiv = document.createElement('div')
														
 
															+    el.appendChild(newDiv) // 将 Loading 组件的根元素添加到目标元素中
														
 
															+
														
 
															+    const instance = app.mount(newDiv)
														
 
															+
														
 
															+    el.style.position = 'relative' // 确保父元素有相对定位
														
 
															+    el.instance = instance
														
 
															+    el.newDiv = newDiv // 保存对新 div 的引用
														
 
															+    el.component = app // 保存 Vue 应用实例
														
 
															+  },
														
 
															+  updated(el: any, binding: any) {
														
 
															+    if (binding.value !== binding.oldValue) {
														
 
															+      // 卸载旧的组件
														
 
															+      if (el.component) {
														
 
															+        el.component.unmount()
														
 
															+        el.component = null
														
 
															+      }
														
 
															+
														
 
															+      // 移除旧的 div 元素
														
 
															+      if (el.newDiv) {
														
 
															+        el.removeChild(el.newDiv)
														
 
															+        el.newDiv = null
														
 
															+      }
														
 
															+
														
 
															+      // 创建新的 Vue 应用实例和 div 元素
														
 
															+      const target = el.id || `loading-target-${Math.random().toString(36).substr(2, 9)}`
														
 
															+      const app = createApp({
														
 
															+        render() {
														
 
															+          return h(Loading, { loading: binding.value, target: `#${target}` })
														
 
															+        }
														
 
															+      })
														
 
															+
														
 
															+      const newDiv = document.createElement('div')
														
 
															+      el.appendChild(newDiv)
														
 
															+      const instance = app.mount(newDiv)
														
 
															+
														
 
															+      el.instance = instance
														
 
															+      el.newDiv = newDiv // 更新对新 div 的引用
														
 
															+      el.component = app // 更新 Vue 应用实例
														
 
															+    }
														
 
															+  },
														
 
															+  unmounted(el: any) {
														
 
															+    if (el.newDiv) {
														
 
															+      el.removeChild(el.newDiv) // 移除剩余的 div 元素
														
 
															+    }
														
 
															+    if (el.component) {
														
 
															+      el.component.unmount() // 卸载 Vue 应用实例
														
 
															+    }
														
 
															+  }
														
 
															+}
														
--- a/src/hooks/calculatingHeight.ts
+++ b/src/hooks/calculatingHeight.ts
@@ -0,0 +1,67 @@
 
															+/**
														
 
															+ *
														
 
															+ * @param parentElement 基准容器Ref
														
 
															+ * @param fixedHeight 固定减去的值
														
 
															+ * @param elementList 需要减去的可变的容器RefList
														
 
															+ * @returns 高度值number
														
 
															+ */
														
 
															+export const useCalculatingHeight = (
														
 
															+  parentElement: HTMLElement | null,
														
 
															+  fixedHeight: number,
														
 
															+  elementList: Ref<HTMLElement | null>[]
														
 
															+) => {
														
 
															+  const containerHeight = ref(0)
														
 
															+  const calculatingHeight = () => {
														
 
															+    if (parentElement) {
														
 
															+      containerHeight.value = parentElement.offsetHeight - fixedHeight
														
 
															+      elementList.forEach((item: any) => {
														
 
															+        if (item.value) {
														
 
															+          containerHeight.value -= item.value.offsetHeight || 0
														
 
															+        }
														
 
															+      })
														
 
															+    }
														
 
															+  }
														
 
															+  // 创建 ResizeObserver 观察变化
														
 
															+  const resizeObserver = new ResizeObserver(() => {
														
 
															+    calculatingHeight()
														
 
															+  })
														
 
															+
														
 
															+  // 开始观察
														
 
															+  const startObserving = () => {
														
 
															+    if (parentElement) {
														
 
															+      resizeObserver.observe(parentElement)
														
 
															+    }
														
 
															+    elementList.forEach((item) => {
														
 
															+      if (item.value) {
														
 
															+        resizeObserver.observe(item.value)
														
 
															+      }
														
 
															+    })
														
 
															+  }
														
 
															+
														
 
															+  // Vue 生命周期钩子
														
 
															+  onMounted(() => {
														
 
															+    nextTick(() => {
														
 
															+      calculatingHeight()
														
 
															+      startObserving()
														
 
															+    })
														
 
															+  })
														
 
															+
														
 
															+  // 停止观察
														
 
															+  const stopObserving = () => {
														
 
															+    resizeObserver.disconnect()
														
 
															+  }
														
 
															+
														
 
															+  // Vue 生命周期钩子
														
 
															+  onMounted(() => {
														
 
															+    nextTick(() => {
														
 
															+      calculatingHeight()
														
 
															+      startObserving()
														
 
															+    })
														
 
															+  })
														
 
															+
														
 
															+  onBeforeUnmount(() => {
														
 
															+    stopObserving()
														
 
															+  })
														
 
															+
														
 
															+  return containerHeight
														
 
															+}
														
--- a/src/hooks/rowClickStyle.ts
+++ b/src/hooks/rowClickStyle.ts
@@ -0,0 +1,40 @@
 
															+import { onMounted, onBeforeUnmount } from 'vue'
														
 
															+
														
 
															+export function useRowClickStyle(tableRef: any, rowClass: string = 'row--clicked') {
														
 
															+  const handleMouseDown = (event: any) => {
														
 
															+    const trElement = event.target.closest('tr')
														
 
															+    if (trElement && trElement.hasAttribute('rowid')) {
														
 
															+      const rowId = trElement.getAttribute('rowid')
														
 
															+      const allRows = document.querySelectorAll(`tr[rowid="${rowId}"]`)
														
 
															+      allRows.forEach((row) => {
														
 
															+        row.classList.add(rowClass)
														
 
															+      })
														
 
															+
														
 
															+      const handleMouseUp = () => {
														
 
															+        allRows.forEach((row) => {
														
 
															+          row.classList.remove(rowClass)
														
 
															+        })
														
 
															+        // 移除 mouseup 事件监听器
														
 
															+        document.removeEventListener('mouseup', handleMouseUp)
														
 
															+      }
														
 
															+
														
 
															+      // 监听 mouseup 事件，抬起鼠标时移除类名
														
 
															+      document.addEventListener('mouseup', handleMouseUp)
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+  onMounted(() => {
														
 
															+    const gridElement = tableRef.value?.$el
														
 
															+    if (gridElement) {
														
 
															+      // 为表格添加 mousedown 事件监听器
														
 
															+      gridElement.addEventListener('mousedown', handleMouseDown)
														
 
															+    }
														
 
															+  })
														
 
															+
														
 
															+  onBeforeUnmount(() => {
														
 
															+    const gridElement = tableRef.value?.$el
														
 
															+    if (gridElement) {
														
 
															+      gridElement.removeEventListener('mousedown', handleMouseDown)
														
 
															+    }
														
 
															+  })
														
 
															+}
														
--- a/src/icons/icon_bold_b.svg
+++ b/src/icons/icon_bold_b.svg
@@ -0,0 +1 @@
 
															+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1725959674170" class="icon" viewBox="0 0 1088 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7008" xmlns:xlink="http://www.w3.org/1999/xlink" width="212.5" height="200"><path d="M536.832 32H265.792C229.312 32 199.68 61.568 199.68 98.048V925.44c0 36.736 29.76 66.56 66.496 66.56h378.624a280.064 280.064 0 0 0 104.768-539.968A263.872 263.872 0 0 0 536.832 32zM327.68 431.744V160h209.088a135.872 135.872 0 1 1 0 271.744H327.744z m0 432.192V559.808h317.12a152.064 152.064 0 1 1 0 304.128H327.744z" p-id="7009"></path></svg>
														
--- a/src/icons/icon_date_b.svg
+++ b/src/icons/icon_date_b.svg
@@ -0,0 +1,3 @@
 
															+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
														
 
															+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.17346 3.49834V4.60463H6.37346V3.49834H9.45935V4.60463H10.6594V3.49834H13.8664V5.8767H2.26641V3.49834H5.17346ZM5.17346 2.29834H2.26641H1.06641V3.49834V13.2775V14.4775H2.26641H13.8664H15.0664V13.2775V3.49834V2.29834H13.8664H10.6594V1.52246H9.45935V2.29834H6.37346V1.52246H5.17346V2.29834ZM2.26641 7.0767V13.2775H13.8664V7.0767H2.26641Z" fill="#2B2F36"/>
														
 
															+</svg>
														
--- a/src/icons/icon_logo.svg
+++ b/src/icons/icon_logo.svg
--- a/src/icons/icon_quotes_b.svg
+++ b/src/icons/icon_quotes_b.svg
@@ -0,0 +1 @@
 
															+<svg t="1725953102375" class="icon" viewBox="0 0 1088 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6853" width="200" height="200"><path d="M149.504 503.04l181.248-278.4a38.4 38.4 0 1 1 64.384 41.92l-97.152 149.12a208.64 208.64 0 1 1-153.6 99.264 38.4 38.4 0 0 1 5.12-11.904z m478.848 0l181.248-278.4a38.4 38.4 0 1 1 64.384 41.92l-97.152 149.12a208.64 208.64 0 1 1-153.6 99.264 38.336 38.336 0 0 1 5.12-11.904z" p-id="6854"></path></svg>
														
--- a/src/icons/icon_redo_b.svg
+++ b/src/icons/icon_redo_b.svg
@@ -0,0 +1 @@
 
															+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1725960121756" class="icon" viewBox="0 0 1088 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7929" xmlns:xlink="http://www.w3.org/1999/xlink" width="212.5" height="200"><path d="M972.608 422.528a32 32 0 0 1 0 50.496l-200.64 156.224a32 32 0 0 1-51.648-25.28V486.144H494.72a278.336 278.336 0 0 0-275.648 240c-2.88 20.992-19.84 38.272-40.96 38.272-21.248 0-38.656-17.28-36.416-38.4a355.136 355.136 0 0 1 353.024-316.672h225.536v-117.76a32 32 0 0 1 51.648-25.28l200.64 156.16z" p-id="7930"></path></svg>
														
--- a/src/icons/icon_revoke__b.svg
+++ b/src/icons/icon_revoke__b.svg
@@ -0,0 +1 @@
 
															+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1725960115265" class="icon" viewBox="0 0 1088 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7774" xmlns:xlink="http://www.w3.org/1999/xlink" width="212.5" height="200"><path d="M152.064 422.528a32 32 0 0 0 0 50.496L352.64 629.248a32 32 0 0 0 51.712-25.28V486.144h225.472a278.336 278.336 0 0 1 275.648 240c2.88 20.992 19.84 38.272 41.024 38.272s38.592-17.28 36.352-38.4a355.136 355.136 0 0 0-353.024-316.672H404.48v-117.76a32 32 0 0 0-51.712-25.28L152.064 422.4z" p-id="7775"></path></svg>
														
--- a/src/icons/icon_underline_b.svg
+++ b/src/icons/icon_underline_b.svg
@@ -0,0 +1 @@
 
															+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1725959944625" class="icon" viewBox="0 0 1088 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7315" xmlns:xlink="http://www.w3.org/1999/xlink" width="212.5" height="200"><path d="M251.392 22.016a38.4 38.4 0 0 0-38.4 38.4V448.64a349.376 349.376 0 1 0 698.752 0V60.416a38.4 38.4 0 1 0-76.8 0V448.64a272.576 272.576 0 1 1-545.152 0V60.416a38.4 38.4 0 0 0-38.4-38.4z m-107.072 941.44a38.4 38.4 0 0 0 38.4 38.4h759.232a38.4 38.4 0 0 0 0-76.8H182.72a38.4 38.4 0 0 0-38.4 38.4z" p-id="7316"></path></svg>
														
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,44 @@
 
															+import './assets/main.css'
														
 
															+import './styles/index.scss'
														
 
															+import './styles/icons/iconfont.js'
														
 
															+import VXETable from 'vxe-table'
														
 
															+import 'vxe-table/lib/style.css'
														
 
															+import enUS from 'vxe-table/lib/locale/lang/en-US'
														
 
															+import VxeUI from 'vxe-pc-ui'
														
 
															+import 'element-plus/dist/index.css'
														
 
															+import 'vxe-pc-ui/lib/style.css'
														
 
															+import Antd from 'ant-design-vue'
														
 
															+import 'ant-design-vue/dist/reset.css'
														
 
															+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
														
 
															+import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
														
 
															+import ExcelJS from 'exceljs'
														
 
															+import { VLoading } from './directive/VLoading'
														
 
															+
														
 
															+import { createApp } from 'vue'
														
 
															+import { createPinia } from 'pinia'
														
 
															+
														
 
															+import App from './App.vue'
														
 
															+import router from './router'
														
 
															+
														
 
															+const app = createApp(App)
														
 
															+
														
 
															+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
														
 
															+  app.component(key, component)
														
 
															+}
														
 
															+// 让VxeTable支持导出Excel
														
 
															+VXETable.use(VXETablePluginExportXLSX, {
														
 
															+  ExcelJS
														
 
															+})
														
 
															+VXETable.setI18n('en-US', enUS)
														
 
															+VXETable.setLanguage('en-US')
														
 
															+
														
 
															+app.use(createPinia())
														
 
															+app.use(VXETable)
														
 
															+app.use(VxeUI)
														
 
															+app.use(router)
														
 
															+app.use(Antd)
														
 
															+
														
 
															+// 注册全局指令
														
 
															+app.directive('vloading', VLoading)
														
 
															+
														
 
															+app.mount('#app')
														
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -0,0 +1,80 @@
 
															+import { createRouter, createWebHistory } from 'vue-router'
														
 
															+import { useParentPathStore } from '@/stores/modules/parentPath'
														
 
															+
														
 
															+const router = createRouter({
														
 
															+  history: createWebHistory(import.meta.env.BASE_URL),
														
 
															+  routes: [
														
 
															+    {
														
 
															+      path: '/',
														
 
															+      name: 'Home',
														
 
															+      redirect: '/booking',
														
 
															+      component: () => import('../views/Layout'),
														
 
															+      children: [
														
 
															+        {
														
 
															+          path: '/dashboard',
														
 
															+          name: 'Dashboard',
														
 
															+          component: () => import('../views/Dashboard')
														
 
															+        },
														
 
															+        {
														
 
															+          path: '/booking',
														
 
															+          name: 'Booking',
														
 
															+          component: () => import('../views/Booking')
														
 
															+        },
														
 
															+        {
														
 
															+          path: '/booking/detail',
														
 
															+          name: 'Booking Detail',
														
 
															+          component: () => import('../views/Booking/src/components/BookingDetail'),
														
 
															+          meta: {
														
 
															+            parentPath: '/booking'
														
 
															+          }
														
 
															+        },
														
 
															+        {
														
 
															+          path: '/tracking',
														
 
															+          name: 'Tracking',
														
 
															+          component: () => import('../views/Tracking')
														
 
															+        },
														
 
															+        {
														
 
															+          path: '/tracking/detail',
														
 
															+          name: 'Tracking Detail',
														
 
															+          component: () => import('../views/Tracking/src/components/TrackingDetail')
														
 
															+        },
														
 
															+        {
														
 
															+          path: '/public-tracking',
														
 
															+          name: 'Public Tracking',
														
 
															+          component: () => import('../views/Tracking/src/components/PublicTracking')
														
 
															+        },
														
 
															+        {
														
 
															+          path: '/public-tracking/detail',
														
 
															+          name: 'Public Tracking Detail',
														
 
															+          component: () =>
														
 
															+            import(
														
 
															+              '../views/Tracking/src/components/PublicTracking/src/components/PublicTrackingDetail.vue'
														
 
															+            )
														
 
															+        },
														
 
															+        {
														
 
															+          path: '/login',
														
 
															+          name: 'Login',
														
 
															+          component: () => import('../views/Login')
														
 
															+        },
														
 
															+        {
														
 
															+          path: '/Operationlog',
														
 
															+          name: 'Operationlog',
														
 
															+          component: () => import('../views/OperationLog')
														
 
															+        }
														
 
															+      ]
														
 
															+    }
														
 
															+  ]
														
 
															+})
														
 
															+
														
 
															+// * 路由拦截 beforeEach
														
 
															+router.beforeEach(async (to, from, next) => {
														
 
															+  const parentPathStore = useParentPathStore()
														
 
															+  if (to.path.includes('/detail')) {
														
 
															+    parentPathStore.setParentPath(from)
														
 
															+  } else {
														
 
															+    parentPathStore.clearParentPath()
														
 
															+  }
														
 
															+  next()
														
 
															+})
														
 
															+
														
 
															+export default router
														
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -0,0 +1 @@
 
															+declare module '@wangeditor/editor-for-vue'
														
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -0,0 +1,4 @@
 
															+import { createPinia } from 'pinia'
														
 
															+const store = createPinia()
														
 
															+
														
 
															+export default store
														
--- a/src/stores/modules/BookingData.ts
+++ b/src/stores/modules/BookingData.ts
@@ -0,0 +1,8 @@
 
															+import {ref } from 'vue'
														
 
															+import { defineStore } from 'pinia'
														
 
															+
														
 
															+export const useBookingStore = defineStore('BookingData', () => {
														
 
															+  const TransportData = ref()
														
 
															+
														
 
															+  return {TransportData}
														
 
															+})
														
--- a/src/stores/modules/parentPath.ts
+++ b/src/stores/modules/parentPath.ts
@@ -0,0 +1,28 @@
 
															+import { defineStore } from 'pinia'
														
 
															+interface ParentPath {
														
 
															+  parentPathInfo: {
														
 
															+    fullPath?: string
														
 
															+    name?: string
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+export const useParentPathStore = defineStore('parentPath', {
														
 
															+  state: (): ParentPath => ({
														
 
															+    parentPathInfo: JSON.parse(localStorage.getItem('parentPathInfo') as string) || {}
														
 
															+  }),
														
 
															+  getters: {},
														
 
															+  actions: {
														
 
															+    setParentPath(route: any) {
														
 
															+      const pathInfo = {
														
 
															+        name: route.name,
														
 
															+        fullPath: route.fullPath
														
 
															+      }
														
 
															+      localStorage.setItem('parentPath', JSON.stringify(pathInfo))
														
 
															+      this.parentPathInfo = pathInfo
														
 
															+    },
														
 
															+    clearParentPath() {
														
 
															+      localStorage.removeItem('parentPath')
														
 
															+      this.parentPathInfo = {}
														
 
															+    }
														
 
															+  }
														
 
															+})
														
--- a/src/styles/Antdui.scss
+++ b/src/styles/Antdui.scss
@@ -0,0 +1,66 @@
 
															+:where(.css-dev-only-do-not-override-19iuou).ant-picker-range {
														
 
															+  height: 40px;
														
 
															+  border: 1px solid var(--color-border-1);
														
 
															+}
														
 
															+:where(.css-dev-only-do-not-override-19iuou).ant-picker:hover, :where(.css-dev-only-do-not-override-19iuou).ant-picker-focused {
														
 
															+  border-color: var(--color-theme);
														
 
															+  box-shadow: none;
														
 
															+}
														
 
															+.ant-picker-active-bar {
														
 
															+  display: none;
														
 
															+}
														
 
															+:where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown-range {
														
 
															+  z-index: 9999;
														
 
															+}
														
 
															+:where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before {
														
 
															+  border: none;
														
 
															+}
														
 
															+:where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
														
 
															+  background-color: var(--color-theme);
														
 
															+  color: #FFFFFF;
														
 
															+}
														
 
															+:where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-in-range::before {
														
 
															+  background-color: var(--color-orange-6);
														
 
															+}
														
 
															+:where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before {
														
 
															+  background-color: var(--color-orange-6);
														
 
															+}
														
 
															+:where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-in-range {
														
 
															+  color: var(--color-theme);
														
 
															+}
														
 
															+.ant-picker-cell:hover:not(.ant-picker-cell-in-view).ant-picker-cell-inner,
														
 
															+
														
 
															+  .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start)
														
 
															+
														
 
															+    :not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) {
														
 
															+      background-color: var(--color-orange-6) !important;
														
 
															+      color: var(--color-theme);
														
 
															+  }
														
 
															+  :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-date-panel .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start .ant-picker-cell-inner::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-date-panel .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end .ant-picker-cell-inner::after {
														
 
															+    background-color: var(--color-orange-6);
														
 
															+  }
														
 
															+  :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single).ant-picker-cell-range-hover-start::before, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single).ant-picker-cell-range-hover-end::before, .ant-picker-panel>:not(.ant-picker-date-panel) :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before, .ant-picker-panel>:not(.ant-picker-date-panel) :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before {
														
 
															+    background-color: var(--color-orange-6);
														
 
															+  }
														
 
															+  :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end)::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-end:not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end)::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start-single::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-end-near-hover::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-start-near-hover::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-end-single::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover:not(.ant-picker-cell-in-range)::after {
														
 
															+    border-top: none;
														
 
															+    border-bottom: none;
														
 
															+  }
														
 
															+  tr>:where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover:first-child::after, tr>:where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-end:first-child::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-start.ant-picker-cell-range-hover-edge-start.ant-picker-cell-range-hover-edge-start-near-range::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-edge-start:not(.ant-picker-cell-range-hover-edge-start-near-range)::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-start::after {
														
 
															+    border-inline-start: none;
														
 
															+  }
														
 
															+  tr>:where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover:last-child::after, tr>:where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-end.ant-picker-cell-range-hover-edge-end.ant-picker-cell-range-hover-edge-end-near-range::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-edge-end:not(.ant-picker-cell-range-hover-edge-end-near-range)::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-end::after {
														
 
															+    border-inline-end: none;
														
 
															+  }
														
 
															+  :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-header-view button:hover {
														
 
															+    color: var(--color-theme);
														
 
															+  }
														
 
															+  :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-panel-container .ant-picker-panels .ant-picker-panel {
														
 
															+    border-left: 1px solid var(--color-border);
														
 
															+  }
														
 
															+  .ant-picker-footer {
														
 
															+    border-top: 1px solid var(--color-border);
														
 
															+  }
														
 
															+  :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-panel {
														
 
															+    border: none;
														
 
															+  }
														
--- a/src/styles/elementui.scss
+++ b/src/styles/elementui.scss
@@ -0,0 +1,526 @@
 
															+// button
														
 
															+.el-button.el-button--noborder {
														
 
															+  border: none;
														
 
															+  background-color: var(--color-white);
														
 
															+  span {
														
 
															+    color: var(--color-theme);
														
 
															+  }
														
 
															+  &:hover {
														
 
															+    border-color: var(--color-btn-default-bg-hover);
														
 
															+    background-color: var(--color-btn-default-bg-hover);
														
 
															+    fill: var(--color-theme);
														
 
															+    span {
														
 
															+      color: var(--color-theme);
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+button.el-button.el-button--text {
														
 
															+  height: 24px;
														
 
															+  padding: 4px 8px;
														
 
															+  border: none;
														
 
															+  background-color: transparent;
														
 
															+  span {
														
 
															+    color: var(--color-theme);
														
 
															+  }
														
 
															+  &:hover {
														
 
															+    background-color: var(--color-btn-default-bg-hover);
														
 
															+    color: var(--color-theme);
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.el-button.el-button--default {
														
 
															+  background-color: var(--color-white);
														
 
															+  color: var(--color-neutral-1);
														
 
															+  border: 1px solid var(--color-border);
														
 
															+  &:hover {
														
 
															+    border: 1px solid var(--color-btn-default-bg-hover);
														
 
															+    background-color: var(--color-btn-default-bg-hover);
														
 
															+    fill: var(--color-theme);
														
 
															+    span {
														
 
															+      color: var(--color-theme);
														
 
															+    }
														
 
															+  }
														
 
															+  &:focus {
														
 
															+    border: 1px solid var(--color-btn-default-bg-hover);
														
 
															+    background-color: var(--color-btn-default-bg-hover);
														
 
															+    fill: var(--color-theme);
														
 
															+    span {
														
 
															+      color: var(--color-theme);
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.el-button.el-button--main.is-plain {
														
 
															+  background-color: var(--color-white);
														
 
															+  border: 1px solid var(--color-border);
														
 
															+  span {
														
 
															+    color: var(--color-theme);
														
 
															+  }
														
 
															+  &:hover {
														
 
															+    border: 1px solid var(--color-btn-main-plain-bg-hover);
														
 
															+    background-color: var(--color-btn-main-plain-bg-hover);
														
 
															+    color: var(--color-theme);
														
 
															+    fill: var(--color-theme);
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.el-button.el-button--main {
														
 
															+  border: none;
														
 
															+  background-color: var(--color-theme);
														
 
															+  span {
														
 
															+    color: var(--color-white);
														
 
															+  }
														
 
															+  &:hover {
														
 
															+    background-color: var(--color-btn-main-bg-hover);
														
 
															+    color: var(--color-white);
														
 
															+    fill: var(--color-white);
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.el-button.el-button--success {
														
 
															+  border: none;
														
 
															+  background-color: var(--color-success);
														
 
															+  span {
														
 
															+    color: var(--color-white);
														
 
															+  }
														
 
															+  &:hover {
														
 
															+    background-color: var(--color-btn-success-bg-hover);
														
 
															+    color: var(--color-white);
														
 
															+    fill: var(--color-white);
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.el-button.el-button--warning {
														
 
															+  border: none;
														
 
															+  background-color: var(--color-btn-warning-bg);
														
 
															+  span {
														
 
															+    color: var(--color-white);
														
 
															+  }
														
 
															+  &:hover {
														
 
															+    background-color: var(--color-btn-warning-bg-hover);
														
 
															+    color: var(--color-white);
														
 
															+    fill: var(--color-white);
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.el-button.el-button--danger {
														
 
															+  border: none;
														
 
															+  background-color: var(--color-danger);
														
 
															+  span {
														
 
															+    color: var(--color-white);
														
 
															+  }
														
 
															+  &:hover {
														
 
															+    background-color: var(--color-btn-danger-bg-hover);
														
 
															+    color: var(--color-white);
														
 
															+    fill: var(--color-white);
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.el-button.el-button--grey {
														
 
															+  border: none;
														
 
															+  background-color: var(--color-grey);
														
 
															+  color: var(--color-accent-1);
														
 
															+  &:hover {
														
 
															+    background-color: var(--color-btn-default-bg-hover);
														
 
															+    fill: var(--color-theme);
														
 
															+    span {
														
 
															+      color: var(--color-theme);
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.el-button.el-button--blue {
														
 
															+  border: none;
														
 
															+  padding: 0 4px;
														
 
															+  background-color: #f6f6fe;
														
 
															+  color: var(--color-accent-1);
														
 
															+  &:hover {
														
 
															+    background-color: var(--color-btn-default-bg-hover);
														
 
															+    fill: var(--color-theme);
														
 
															+    span {
														
 
															+      color: var(--color-theme);
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+// 纯图标
														
 
															+button.el-button.el-button--icon {
														
 
															+  height: auto;
														
 
															+  padding: 4px;
														
 
															+  border: none;
														
 
															+  background-color: #f6f6fe;
														
 
															+  &:hover {
														
 
															+    background-color: #f6f6fe;
														
 
															+  }
														
 
															+}
														
 
															+// 初始为黑色
														
 
															+.el-button.el-button--dark {
														
 
															+  background-color: var(--color-btn-default-dark-bg);
														
 
															+  fill: var(--color-white);
														
 
															+  border: none;
														
 
															+  span {
														
 
															+    color: var(--color-white);
														
 
															+  }
														
 
															+  &:hover {
														
 
															+    background-color: var(--color-btn-default-dark-bg);
														
 
															+    fill: var(--color-btn-default-dark-hover);
														
 
															+    span {
														
 
															+      color: var(--color-btn-default-dark-hover) !important;
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+button.el-button {
														
 
															+  border-radius: 6px;
														
 
															+}
														
 
															+
														
 
															+// pagination
														
 
															+ul.el-pager li.is-active {
														
 
															+  font-weight: 400;
														
 
															+}
														
 
															+div.el-pagination.is-background .el-pager li.is-active {
														
 
															+  border: none;
														
 
															+  background-color: var(--color-theme);
														
 
															+  color: var(--color-white);
														
 
															+}
														
 
															+.el-pagination.is-background .el-pager li.number,
														
 
															+.el-pagination.is-background .el-pager li.more,
														
 
															+.el-pagination.is-background button.btn-next,
														
 
															+.el-pagination.is-background button.btn-prev {
														
 
															+  border-radius: 3px;
														
 
															+  background-color: transparent;
														
 
															+  border: 1px solid var(--color-border);
														
 
															+}
														
 
															+.el-pagination.is-background button.btn-next:disabled,
														
 
															+.el-pagination.is-background button.btn-prev:disabled {
														
 
															+  color: var(--color-neutral-1);
														
 
															+  background-color: transparent;
														
 
															+}
														
 
															+
														
 
															+ul.el-pager li:hover {
														
 
															+  color: var(--color-theme);
														
 
															+}
														
 
															+
														
 
															+// dialog
														
 
															+div.el-dialog {
														
 
															+  padding: 0 0 8px;
														
 
															+  border-radius: 12px;
														
 
															+  overflow: hidden;
														
 
															+}
														
 
															+header.el-dialog__header {
														
 
															+  padding: 12px 16px;
														
 
															+  height: 48px;
														
 
															+  font-weight: 700;
														
 
															+  background-color: var(--color-dialog-header-bg);
														
 
															+}
														
 
															+footer.el-dialog__footer {
														
 
															+  padding-right: 16px;
														
 
															+  padding-top: 8px;
														
 
															+  border-top: 1px solid var(--color-border);
														
 
															+}
														
 
															+div.el-dialog__body {
														
 
															+  padding: 16px;
														
 
															+}
														
 
															+
														
 
															+// radio
														
 
															+label.el-radio {
														
 
															+  &.is-checked .el-radio__inner {
														
 
															+    background-color: var(--color-theme);
														
 
															+    border-color: var(--color-theme);
														
 
															+  }
														
 
															+  .el-radio__inner {
														
 
															+    height: 16px;
														
 
															+    width: 16px;
														
 
															+    &::after {
														
 
															+      height: 8px;
														
 
															+      width: 8px;
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+// drawer抽屉
														
 
															+div.el-drawer {
														
 
															+  .el-drawer__header {
														
 
															+    height: 64px;
														
 
															+    padding: 16px;
														
 
															+    margin-bottom: 0;
														
 
															+    background-color: var(--color-table-header-bg);
														
 
															+    & > span {
														
 
															+      font-weight: 700;
														
 
															+      font-size: 24px;
														
 
															+    }
														
 
															+  }
														
 
															+  .el-drawer__body {
														
 
															+    padding: 16px;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+div .el-input__inner {
														
 
															+  color: var(--color-neutral-1);
														
 
															+  font-size: var(--font-size-3);
														
 
															+}
														
 
															+input.el-input__inner::placeholder {
														
 
															+  color: var(--color-neutral-3);
														
 
															+  font-size: var(--font-size-3);
														
 
															+}
														
 
															+div .el-select__placeholder.is-transparent {
														
 
															+  span {
														
 
															+    color: var(--color-neutral-3) !important;
														
 
															+    font-size: var(--font-size-3);
														
 
															+  }
														
 
															+}
														
 
															+div.el-input__wrapper {
														
 
															+  box-shadow: 0 0 0 1px var(--color-border) inset;
														
 
															+  padding-left: 8px;
														
 
															+}
														
 
															+div.el-input div.el-input__wrapper.is-focus {
														
 
															+  box-shadow: 0 0 0 1px var(--color-theme) inset;
														
 
															+  background-color: #ffffff !important;
														
 
															+}
														
 
															+div.el-input__wrapper:hover {
														
 
															+  box-shadow: 0 0 0 1px var(--color-theme) inset;
														
 
															+}
														
 
															+// div .el-button {
														
 
															+//   background-color: var(--color-btn-default-dark-bg);
														
 
															+//   font-weight: 400;
														
 
															+//   border-radius: var(--border-radius-6);
														
 
															+//   border: none;
														
 
															+//   span {
														
 
															+//     color: white;
														
 
															+//   }
														
 
															+// }
														
 
															+// div .el-button:hover {
														
 
															+//   background-color: var(--color-btn-default-dark-bg);
														
 
															+//   color: var(--color-btn-default-dark-hover);
														
 
															+//   border-radius: var(--border-radius-6);
														
 
															+// }
														
 
															+div.el-dropdown-link:focus-visible {
														
 
															+  outline: unset;
														
 
															+}
														
 
															+div .el-dropdown__popper .el-dropdown__list {
														
 
															+  user-select: none;
														
 
															+}
														
 
															+div .el-checkbox__inner:hover {
														
 
															+  border-color: var(--color-border);
														
 
															+}
														
 
															+div .el-checkbox__input.is-checked .el-checkbox__inner {
														
 
															+  background-color: var(--color-theme);
														
 
															+  border-color: var(--color-theme);
														
 
															+}
														
 
															+div .el-popper__arrow,
														
 
															+div .el-popper__arrow:before {
														
 
															+  height: 0;
														
 
															+  width: 0;
														
 
															+}
														
 
															+div .el-popper[data-popper-placement^='bottom'] > .el-popper__arrow {
														
 
															+  top: 0;
														
 
															+}
														
 
															+div .el-dropdown-menu__item {
														
 
															+  border: 1px solid var(--color-border);
														
 
															+  border-radius: var(--border-radius-6);
														
 
															+}
														
 
															+div .el-dropdown__popper.el-popper,
														
 
															+.el-dropdown__popper.el-popper .el-popper__arrow:before {
														
 
															+  border-radius: var(--border-radius-12);
														
 
															+}
														
 
															+div .el-scrollbar__wrap--hidden-default {
														
 
															+  border-radius: var(--border-radius-12);
														
 
															+}
														
 
															+div .el-popper[data-popper-placement^='top'] .el-popper__arrow:before {
														
 
															+  border: 0;
														
 
															+  background: transparent;
														
 
															+}
														
 
															+div .el-popper[data-popper-placement^='bottom'] .el-popper__arrow:before {
														
 
															+  border: 0;
														
 
															+  background: transparent;
														
 
															+}
														
 
															+div .el-popover.el-popper {
														
 
															+  padding: 0;
														
 
															+}
														
 
															+.el-popper.is-dark {
														
 
															+  span {
														
 
															+    color: #fff;
														
 
															+  }
														
 
															+}
														
 
															+div .el-collapse-item__arrow,
														
 
															+.el-tabs__nav {
														
 
															+  transform: rotate(90deg);
														
 
															+}
														
 
															+div .el-collapse-item__arrow.is-active {
														
 
															+  transform: rotate(-90deg);
														
 
															+}
														
 
															+div .el-collapse-item__content {
														
 
															+  padding-bottom: 0;
														
 
															+}
														
 
															+.el-select__placeholder.is-transparent {
														
 
															+  span {
														
 
															+    color: var(--color-neutral-3);
														
 
															+  }
														
 
															+}
														
 
															+div .el-select__wrapper {
														
 
															+  box-shadow: 0 0 0 1px var(--color-border);
														
 
															+}
														
 
															+div .el-select__wrapper.is-focused {
														
 
															+  box-shadow: 0 0 0 1px var(--color-theme);
														
 
															+}
														
 
															+div .el-select-dropdown__item.is-selected {
														
 
															+  background-color: var(--border-hover-color);
														
 
															+  span {
														
 
															+    color: var(--color-theme);
														
 
															+  }
														
 
															+}
														
 
															+div .el-select-dropdown__item.is-hovering {
														
 
															+  background-color: var(--border-hover-color);
														
 
															+}
														
 
															+.el-select-dropdown__item {
														
 
															+  border-radius: var(--border-radius-6);
														
 
															+  margin: 0 8px;
														
 
															+}
														
 
															+
														
 
															+div .el-badge__content--warning {
														
 
															+  background-color: var(--badge__content--warning);
														
 
															+  border-radius: 50%;
														
 
															+  width: 20px;
														
 
															+  height: 20px;
														
 
															+  color: #ffffff;
														
 
															+}
														
 
															+div .el-badge {
														
 
															+  margin: 8px 0 0 8px;
														
 
															+}
														
 
															+
														
 
															+div .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
														
 
															+  background-color: var(--color-table-header-bg);
														
 
															+}
														
 
															+div .el-range-editor.is-active,
														
 
															+.el-range-editor.is-active:hover,
														
 
															+.el-date-editor.el-input__wrapper:hover,
														
 
															+.el-date-editor.el-input__wrapper:hover {
														
 
															+  box-shadow: 0 0 0 1px var(--color-theme) !important;
														
 
															+  border-color: var(--color-theme);
														
 
															+}
														
 
															+div .el-date-table td.today .el-date-table-cell__text,
														
 
															+.el-date-table td.available:hover {
														
 
															+  color: var(--color-theme);
														
 
															+}
														
 
															+div .el-date-table td.in-range .el-date-table-cell {
														
 
															+  background-color: var(--color-orange-6) !important;
														
 
															+  color: var(--color-theme);
														
 
															+}
														
 
															+div .el-date-table td.end-date .el-date-table-cell__text,
														
 
															+.el-date-table td.start-date .el-date-table-cell__text {
														
 
															+  background-color: var(--color-theme) !important;
														
 
															+  color: #ffffff;
														
 
															+}
														
 
															+div .el-date-table td.available:hover {
														
 
															+  color: var(--color-theme);
														
 
															+}
														
 
															+div .el-date-editor .el-range-input,
														
 
															+div .el-date-editor .el-range-separator {
														
 
															+  color: var(--color-btn-default-dark-bg);
														
 
															+  font-size: var(--font-size-3);
														
 
															+}
														
 
															+div .el-range-editor.el-input__wrapper {
														
 
															+  height: 40px;
														
 
															+}
														
 
															+div .el-select__wrapper.is-hovering:not(.is-focused) {
														
 
															+  box-shadow: 0 0 0 1px var(--color-theme);
														
 
															+}
														
 
															+div .el-tag .el-tag__close:hover {
														
 
															+  background-color: transparent;
														
 
															+}
														
 
															+div .el-tag.el-tag--info {
														
 
															+  background-color: var(--tag-info-bg-color);
														
 
															+  span {
														
 
															+    color: var(--tag-info-text-color);
														
 
															+  }
														
 
															+}
														
 
															+div .el-tag .el-tag__close {
														
 
															+  svg {
														
 
															+    color: var(--tag-info-text-color);
														
 
															+  }
														
 
															+}
														
 
															+div .el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected:after {
														
 
															+  width: 0;
														
 
															+  height: 0;
														
 
															+}
														
 
															+div .el-select__wrapper.is-disabled,
														
 
															+.el-select__wrapper.is-disabled:hover {
														
 
															+  box-shadow: none !important;
														
 
															+}
														
 
															+div .scoreDialog header.el-dialog__header {
														
 
															+  background: linear-gradient(
														
 
															+    251deg,
														
 
															+    rgba(255, 255, 255, 0.3),
														
 
															+    rgba(255, 244, 235, 0.5) 22.66%,
														
 
															+    rgba(240, 243, 255, 0.5) 44.57%,
														
 
															+    rgba(224, 247, 249, 0.6) 80.46%,
														
 
															+    rgba(255, 255, 255, 0.3)
														
 
															+  );
														
 
															+}
														
 
															+
														
 
															+div .el-textarea__inner:hover {
														
 
															+  box-shadow: 0 0 0 1px var(--color-theme);
														
 
															+}
														
 
															+div .el-textarea__inner:focus {
														
 
															+  box-shadow: 0 0 0 1px var(--color-theme);
														
 
															+}
														
 
															+div .el-result__title {
														
 
															+  margin-top: 16px;
														
 
															+  font-weight: 700;
														
 
															+  color: var(--tag-info-text-color);
														
 
															+  font-size: var(--font-size-3);
														
 
															+}
														
 
															+div .el-result__subtitle {
														
 
															+  margin-top: 8.28px;
														
 
															+  font-weight: 400;
														
 
															+  font-size: var(--font-size-2);
														
 
															+  line-height: 16px;
														
 
															+}
														
 
															+div .el-switch.is-checked .el-switch__core {
														
 
															+  background-color: var(--color-theme);
														
 
															+  border-color: var(--color-theme);
														
 
															+}
														
 
															+div .el-switch__core {
														
 
															+  background-color: #87909e;
														
 
															+  border-color: #87909e;
														
 
															+}
														
 
															+div .el-pager li.is-active,
														
 
															+.el-pager li:hover {
														
 
															+  color: var(--badge__content--warning);
														
 
															+}
														
 
															+
														
 
															+div .el-tabs__item:hover {
														
 
															+  color: var(--color-theme);
														
 
															+}
														
 
															+div .el-tabs__item.is-active,
														
 
															+.el-tabs__item:hover {
														
 
															+  color: var(--color-neutral-1);
														
 
															+  font-weight: 700;
														
 
															+  font-size: var(--font-size-5);
														
 
															+}
														
 
															+div .el-tabs__item {
														
 
															+  color: var(--color-neutral-3);
														
 
															+  font-weight: 700;
														
 
															+  font-size: var(--font-size-5);
														
 
															+}
														
 
															+div .el-tabs__nav-wrap:after {
														
 
															+  height: 0;
														
 
															+}
														
 
															+
														
 
															+div .el-tabs__active-bar {
														
 
															+  background-color: var(--color-accent-2);
														
 
															+}
														
 
															+
														
 
															+div .el-radio-button.is-active .el-radio-button__original-radio:not(:disabled)+.el-radio-button__inner {
														
 
															+  background-color: var(--color-theme);
														
 
															+  border-color: var(--color-theme);
														
 
															+  box-shadow:none
														
 
															+}
														
 
															+div .el-radio-button__inner:hover {
														
 
															+  color: var(--color-theme);
														
 
															+}
														
 
															+div .el-space {
														
 
															+  flex-wrap: wrap;
														
 
															+  margin: 3px 0 0 0;
														
 
															+}
														
--- a/src/styles/fonts/Lato-Regular.ttf
+++ b/src/styles/fonts/Lato-Regular.ttf
--- a/src/styles/fonts/Open-Sans-2.ttf
+++ b/src/styles/fonts/Open-Sans-2.ttf
--- a/src/styles/icons/iconfont.css
+++ b/src/styles/icons/iconfont.css
@@ -0,0 +1,700 @@
 
															+@font-face {
														
 
															+  font-family: "font_family"; /* Project id 4672385 */
														
 
															+  src: url('iconfont.woff2?t=1726717215398') format('woff2'),
														
 
															+       url('iconfont.woff?t=1726717215398') format('woff'),
														
 
															+       url('iconfont.ttf?t=1726717215398') format('truetype'),
														
 
															+       url('iconfont.svg?t=1726717215398#font_family') format('svg');
														
 
															+}
														
 
															+
														
 
															+.font_family {
														
 
															+  font-family: "font_family" !important;
														
 
															+  font-size: 16px;
														
 
															+  font-style: normal;
														
 
															+  -webkit-font-smoothing: antialiased;
														
 
															+  -moz-osx-font-smoothing: grayscale;
														
 
															+}
														
 
															+
														
 
															+.icon-icon_location_fill_b:before {
														
 
															+  content: "\e6c0";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_unmark_b:before {
														
 
															+  content: "\e6c1";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_location_b:before {
														
 
															+  content: "\e6bf";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_path_b:before {
														
 
															+  content: "\e6be";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_bold_b:before {
														
 
															+  content: "\e6bd";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_unlink_b:before {
														
 
															+  content: "\e6b1";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_revoke__b:before {
														
 
															+  content: "\e6b2";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_text_links_b:before {
														
 
															+  content: "\e6b3";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_align__left_b:before {
														
 
															+  content: "\e6b4";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_redo_b:before {
														
 
															+  content: "\e6b5";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_underline_b:before {
														
 
															+  content: "\e6b6";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_quotes_b:before {
														
 
															+  content: "\e6b7";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_right__align_b:before {
														
 
															+  content: "\e6b8";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_expression_b:before {
														
 
															+  content: "\e6b9";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_center__align_b:before {
														
 
															+  content: "\e6ba";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_italic_b:before {
														
 
															+  content: "\e6bb";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_cross__out_b:before {
														
 
															+  content: "\e6bc";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_preview_b:before {
														
 
															+  content: "\e6a2";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_zoom_in_b:before {
														
 
															+  content: "\e6a3";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_template_b:before {
														
 
															+  content: "\e6a4";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_zoom_out_b:before {
														
 
															+  content: "\e6a5";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_mix_b:before {
														
 
															+  content: "\e6a6";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_takeoff_b:before {
														
 
															+  content: "\e6a7";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_sort_b:before {
														
 
															+  content: "\e6a8";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_landing_b:before {
														
 
															+  content: "\e6a9";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_fit_to__width_b:before {
														
 
															+  content: "\e6aa";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_help_b:before {
														
 
															+  content: "\e6ab";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_crop_b:before {
														
 
															+  content: "\e6ac";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_filter_b1:before {
														
 
															+  content: "\e6ad";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_full_screen_b:before {
														
 
															+  content: "\e6ae";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_download__template_b:before {
														
 
															+  content: "\e6af";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_airplane_b:before {
														
 
															+  content: "\e6b0";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_vgm_b:before {
														
 
															+  content: "\e694";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_ocean_b:before {
														
 
															+  content: "\e695";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_railway_b:before {
														
 
															+  content: "\e696";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_truck_b:before {
														
 
															+  content: "\e697";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_railway3_b:before {
														
 
															+  content: "\e698";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_communic_ation_b:before {
														
 
															+  content: "\e699";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_railway2_b:before {
														
 
															+  content: "\e69a";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_booking_b:before {
														
 
															+  content: "\e69b";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_booking_order_b:before {
														
 
															+  content: "\e69c";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_marked_b:before {
														
 
															+  content: "\e69d";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_bus_b:before {
														
 
															+  content: "\e69e";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_log_b:before {
														
 
															+  content: "\e69f";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_focus_b:before {
														
 
															+  content: "\e6a0";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_ratesheet_b:before {
														
 
															+  content: "\e6a1";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_report__fill_b:before {
														
 
															+  content: "\e689";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_quote__fill_b:before {
														
 
															+  content: "\e68a";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_system__management_fill_b:before {
														
 
															+  content: "\e68b";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_view__management_b:before {
														
 
															+  content: "\e68c";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_movetotop_b:before {
														
 
															+  content: "\e68d";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_tracking__fill_b:before {
														
 
															+  content: "\e68e";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_booking__fill_b:before {
														
 
															+  content: "\e68f";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_rate_o:before {
														
 
															+  content: "\e690";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_all_b:before {
														
 
															+  content: "\e691";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_movetobottom__b:before {
														
 
															+  content: "\e692";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_data_fill_b:before {
														
 
															+  content: "\e693";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_visitor_b:before {
														
 
															+  content: "\e67e";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_tag_b:before {
														
 
															+  content: "\e67f";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_reassign__b:before {
														
 
															+  content: "\e680";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_platenumber_b:before {
														
 
															+  content: "\e681";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_printing_b:before {
														
 
															+  content: "\e682";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_time_b:before {
														
 
															+  content: "\e683";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_email_b:before {
														
 
															+  content: "\e684";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_picture_b:before {
														
 
															+  content: "\e685";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_phone_b:before {
														
 
															+  content: "\e686";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_idcard_b:before {
														
 
															+  content: "\e687";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_filter_b:before {
														
 
															+  content: "\e688";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_menu_collapse_b:before {
														
 
															+  content: "\e675";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_related_b:before {
														
 
															+  content: "\e676";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_piedata_b:before {
														
 
															+  content: "\e677";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_jumplink_b:before {
														
 
															+  content: "\e678";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_cargo_b:before {
														
 
															+  content: "\e679";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_linedata_b:before {
														
 
															+  content: "\e67a";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_dimension_b:before {
														
 
															+  content: "\e67b";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_dragsort__b:before {
														
 
															+  content: "\e67c";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_group_b:before {
														
 
															+  content: "\e67d";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_settled_b:before {
														
 
															+  content: "\e66e";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_adduser_b:before {
														
 
															+  content: "\e66f";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_module_collapse_b:before {
														
 
															+  content: "\e670";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_switch_b1:before {
														
 
															+  content: "\e671";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_serialnumber__b:before {
														
 
															+  content: "\e672";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_switchupdown__b:before {
														
 
															+  content: "\e673";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_renew_b:before {
														
 
															+  content: "\e674";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_application_b:before {
														
 
															+  content: "\e66d";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_radio_b:before {
														
 
															+  content: "\e667";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_reduce_b:before {
														
 
															+  content: "\e668";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_paragraph_b:before {
														
 
															+  content: "\e669";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_longtext_b:before {
														
 
															+  content: "\e66a";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_dropdownlist__b:before {
														
 
															+  content: "\e66b";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_checkbox_b:before {
														
 
															+  content: "\e66c";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_scan_b:before {
														
 
															+  content: "\e662";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_wholeprocess__b:before {
														
 
															+  content: "\e663";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_edoc_b:before {
														
 
															+  content: "\e664";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_conditional__branch_b:before {
														
 
															+  content: "\e665";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_review_b:before {
														
 
															+  content: "\e666";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_slider_b:before {
														
 
															+  content: "\e655";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_back_b:before {
														
 
															+  content: "\e656";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_rulesetting__b:before {
														
 
															+  content: "\e657";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_switch_b:before {
														
 
															+  content: "\e658";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_table_b:before {
														
 
															+  content: "\e659";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_matrixlist__b:before {
														
 
															+  content: "\e65a";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_invisible_b:before {
														
 
															+  content: "\e65b";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_rate_b:before {
														
 
															+  content: "\e65c";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_inputnumber_b:before {
														
 
															+  content: "\e65d";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_disablee__b:before {
														
 
															+  content: "\e65e";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_inputtree_b:before {
														
 
															+  content: "\e65f";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_import_b:before {
														
 
															+  content: "\e660";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_document_b:before {
														
 
															+  content: "\e661";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_notes_b:before {
														
 
															+  content: "\e646";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_team_b:before {
														
 
															+  content: "\e647";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_workflow_b:before {
														
 
															+  content: "\e648";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_transfer_b:before {
														
 
															+  content: "\e649";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_workbench_b:before {
														
 
															+  content: "\e64a";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_request_data_b:before {
														
 
															+  content: "\e64b";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_remind_b:before {
														
 
															+  content: "\e64c";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_followup_b:before {
														
 
															+  content: "\e64d";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_descending_b:before {
														
 
															+  content: "\e64e";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_department_b:before {
														
 
															+  content: "\e64f";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_refresh__b:before {
														
 
															+  content: "\e650";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_business__setting_b:before {
														
 
															+  content: "\e651";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_admin_b:before {
														
 
															+  content: "\e652";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_company_b:before {
														
 
															+  content: "\e653";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_ascending_b:before {
														
 
															+  content: "\e654";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_view_b:before {
														
 
															+  content: "\e639";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_createpo_b:before {
														
 
															+  content: "\e63a";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_submit_b:before {
														
 
															+  content: "\e63b";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_save_b:before {
														
 
															+  content: "\e63c";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_upload_b:before {
														
 
															+  content: "\e63d";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_createinvoice_b:before {
														
 
															+  content: "\e63e";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_share_b:before {
														
 
															+  content: "\e63f";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_more_b:before {
														
 
															+  content: "\e640";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_edit_b:before {
														
 
															+  content: "\e641";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_draft_b:before {
														
 
															+  content: "\e642";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_delete_b:before {
														
 
															+  content: "\e643";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_clone_b:before {
														
 
															+  content: "\e644";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_closerequest_b:before {
														
 
															+  content: "\e645";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_top_b:before {
														
 
															+  content: "\e637";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_exportpo_b:before {
														
 
															+  content: "\e638";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_info_b:before {
														
 
															+  content: "\e62e";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_approval__path_b:before {
														
 
															+  content: "\e62f";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_contract_b:before {
														
 
															+  content: "\e630";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_download_b:before {
														
 
															+  content: "\e631";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_document__signing_b:before {
														
 
															+  content: "\e632";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_commission_b:before {
														
 
															+  content: "\e633";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_approval_b:before {
														
 
															+  content: "\e634";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_cancel_b:before {
														
 
															+  content: "\e635";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_batch__email_b:before {
														
 
															+  content: "\e636";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_project_b:before {
														
 
															+  content: "\e627";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_budget_b:before {
														
 
															+  content: "\e628";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_finance__entity_b:before {
														
 
															+  content: "\e629";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_return_b:before {
														
 
															+  content: "\e62a";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_set_b:before {
														
 
															+  content: "\e62b";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_attendance_b:before {
														
 
															+  content: "\e62c";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_reset_b:before {
														
 
															+  content: "\e62d";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_dropdown_b:before {
														
 
															+  content: "\e61f";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_reject_b:before {
														
 
															+  content: "\e620";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_dropdown__line_b:before {
														
 
															+  content: "\e621";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_movedown_b:before {
														
 
															+  content: "\e622";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_moveup_b:before {
														
 
															+  content: "\e623";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_date_b:before {
														
 
															+  content: "\e624";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_column_b:before {
														
 
															+  content: "\e625";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_add_b:before {
														
 
															+  content: "\e626";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_password_b:before {
														
 
															+  content: "\e618";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_notice_b:before {
														
 
															+  content: "\e619";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_language_b:before {
														
 
															+  content: "\e61a";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_username_b:before {
														
 
															+  content: "\e61b";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_tipsfilled_b:before {
														
 
															+  content: "\e61c";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_search_b:before {
														
 
															+  content: "\e61d";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_confirm_b:before {
														
 
															+  content: "\e617";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_export_b:before {
														
 
															+  content: "\e61e";
														
 
															+}
														
 
															+
														
--- a/src/styles/icons/iconfont.js
+++ b/src/styles/icons/iconfont.js
--- a/src/styles/icons/iconfont.svg
+++ b/src/styles/icons/iconfont.svg
--- a/src/styles/icons/iconfont.ttf
+++ b/src/styles/icons/iconfont.ttf
	`@@ -0,0 +1 @@`
			`+export { default } from './src/AutoComplete.vue'`
	`@@ -0,0 +1 @@`
			`+export { default } from './src/AutoSelect.vue'`
	`@@ -0,0 +1 @@`
			`+export { default } from './src/ContainerStatus.vue'`
	`@@ -0,0 +1 @@`
			`+export { default } from './src/CustomizeColumns.vue'`
	`@@ -0,0 +1 @@`
			`+export { default } from './src/DateRange.vue'`
	`@@ -0,0 +1 @@`
			`+export { default } from './src/FilterTags.vue'`
	`@@ -0,0 +1 @@`
			`+export { default as Icon } from './src/IconView.vue'`
	`@@ -0,0 +1 @@`
			`+export { default } from './src/IconDropDown.vue'`
	`@@ -0,0 +1 @@`
			`+export { default } from './src/MoreFilters.vue'`
	`@@ -0,0 +1 @@`
			`+export { default } from './src/ScoringGrade.vue'`