Home Explore Help
Register Sign In
peter
/
crm_extend
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

init

peter 1 year ago
commit
449e49fbe1
29 changed files with 3001 additions and 0 deletions
Unified View Show Diff Stats
  1. 41 0
      .drone.yml
  2. 31 0
      .eslintrc.js
  3. 23 0
      .gitignore
  4. 12 0
      .prettierrc
  5. 47 0
      README.md
  6. 22 0
      docker-compose.yml
  7. 15 0
      index.html
  8. 38 0
      package.json
  9. BIN
      public/assets/sign/AZY.png
  10. BIN
      public/assets/sign/FOT.png
  11. BIN
      public/assets/sign/Pangea.png
  12. 47 0
      src/App.vue
  13. 3 0
      src/assets/css/border-box.scss
  14. 5 0
      src/assets/css/element-hack.scss
  15. 35 0
      src/assets/css/flex-custom.scss
  16. 6 0
      src/assets/css/var.module.scss
  17. 5 0
      src/assets/css/var.scss
  18. 8 0
      src/env.d.ts
  19. 94 0
      src/interface.ts
  20. 13 0
      src/main.ts
  21. 11 0
      src/pages/404.vue
  22. 2390 0
      src/pages/purchase-order/edit.vue
  23. 13 0
      src/pages/purchase-order/index.vue
  24. 38 0
      src/route.ts
  25. 7 0
      src/useCommon.ts
  26. 8 0
      src/utils/index.ts
  27. 24 0
      tsconfig.json
  28. 8 0
      tsconfig.node.json
  29. 57 0
      vite.config.ts

+ 41 - 0
.drone.yml
View File 

@@ -0,0 +1,41 @@
 
+kind: pipeline
 
+type: docker
 
+# 流水线名称
 
+name: crm_extend_cicd
 
+
 
+volumes:
 
+  - name: build_dist
 
+    host:
 
+      path: /www/wwwroot/crm_extend
 
+clone:
 
+  disable: true
 
+
 
+steps:
 
+  - name: clone
 
+    image: alpine/git
 
+    commands:
 
+      - git clone --depth=1 -b develop --single-branch http://front:carlyle123@git.promocollection.com.au:11180/PromoAu/Au_admin_front.git /drone/src
 
+    when:
 
+      branch:
 
+        - develop
 
+      event:
 
+        - push
 
+
 
+  - name: npm_run_build
 
+    image: node:16.14.0
 
+
 
+    volumes:
 
+      - name: build_dist
 
+        path: /drone/src/build
 
+    commands:
 
+      - npm --registry=https://registry.npmmirror.com i
 
+      - npm run build
 
+      - rm -rf ./build/*
 
+      - cp -arf ./dist/* ./build
 
+      - ls build
 
+      - ls dist
 
+    when:
 
+      branch:
 
+        - develop
 
+      event:
 
+        - push

+ 31 - 0
.eslintrc.js
View File 

@@ -0,0 +1,31 @@
 
+// eslint-disable-next-line no-undef
 
+module.exports = {
 
+  env: {
 
+    browser: true,
 
+    es2021: true, // 添加所有 ECMAScript 2021 全局变量并自动将 ecmaVersion 解析器选项设置为 12
 
+    node: true,
 
+    'vue/setup-compiler-macros': true,
 
+  },
 
+  plugins: ['@typescript-eslint'],
 
+  parser: 'vue-eslint-parser',
 
+  parserOptions: {
 
+    ecmaVersion: 'lasted',
 
+    parser: '@typescript-eslint/parser',
 
+    sourceType: 'module',
 
+    ecmaFeatures: {
 
+      jsx: true,
 
+    },
 
+  },
 
+  extends: ['prettier', 'eslint:recommended', 'plugin:vue/vue3-recommended'],
 
+  rules: {
 
+    // override/add rules settings here, such as:
 
+    // 'vue/no-unused-vars': 'error'
 
+    // Enable vue/script-setup-uses-vars rule
 
+    'vue/script-setup-uses-vars': 'error',
 
+    'vue/no-lone-template': 0,
 
+    'vue/singleline-html-element-content-newline': 0,
 
+    'vue/valid-attribute-name': 0,
 
+    'vue/html-self-closing': 0,
 
+    'vue/html-indent': 0,
 
+  },
 
+}

+ 23 - 0
.gitignore
View File 

@@ -0,0 +1,23 @@
 
+.DS_Store
 
+node_modules
 
+/dist
 
+
 
+
 
+# local env files
 
+.env.local
 
+.env.*.local
 
+
 
+# Log files
 
+npm-debug.log*
 
+yarn-debug.log*
 
+yarn-error.log*
 
+pnpm-debug.log*
 
+
 
+# Editor directories and files
 
+.idea
 
+.vscode
 
+*.suo
 
+*.ntvs*
 
+*.njsproj
 
+*.sln
 
+*.sw?

+ 12 - 0
.prettierrc
View File 

@@ -0,0 +1,12 @@
 
+{
 
+  "printWidth": 80,
 
+  "tabWidth": 2,
 
+  "useTabs": false,
 
+  "singleQuote": true,
 
+  "semi": false,
 
+  "trailingComma": "all",
 
+  "bracketSpacing": true,
 
+  "htmlWhitespaceSensitivity": "ignore",
 
+  "singleAttributePerLine": true,
 
+  "vueIndentScriptAndStyle": false
 
+}

+ 47 - 0
README.md
View File 

@@ -0,0 +1,47 @@
 
+# crm_extend
 
+
 
+CRM 功能扩展模块
 
+
 
+## Project setup
 
+
 
+```bash
 
+npm i
 
+```
 
+
 
+### Compiles and hot-reloads for development
 
+
 
+```bash
 
+npm run dev
 
+```
 
+
 
+### Compiles and minifies for production with 'test' mode
 
+
 
+```bash
 
+npm run build-test
 
+```
 
+
 
+### Compiles and minifies for production
 
+
 
+```bash
 
+npm run build
 
+```
 
+
 
+## use docker
 
+
 
+在项目根目录运行命令即可启动
 
+
 
+```bash
 
+docker-compose up -d
 
+```
 
+
 
+### 停止
 
+
 
+```bash
 
+docker-compose stop
 
+```
 
+
 
+### 删除所有未使用的卷
 
+
 
+```bash
 
+docker volume prune
 
+```

+ 22 - 0
docker-compose.yml
View File 

@@ -0,0 +1,22 @@
 
+version: "3.9"
 
+services:
 
+  yys_tool:
 
+    # restart: always
 
+    container_name: yys_tool
 
+    image: "node:18.15.0-slim"
 
+    command: bash -c "npm --registry=https://registry.npmmirror.com install && npm run dev"
 
+    working_dir: /var/local
 
+    volumes:
 
+      - ./:/var/local
 
+    ports:
 
+      - "8888:8888"
 
+    environment:
 
+      - TZ=Asia/Shanghai
 
+      - MODE=dev
 
+  # yys_tool_nginx:
 
+  #   restart: always
 
+  #   image: "nginx:1.23.3"
 
+  #   ports:
 
+  #     - "8889:80"
 
+  #   volumes:
 
+  #     - ./dist/:/usr/share/nginx/html/yys-tool

+ 15 - 0
index.html
View File 

@@ -0,0 +1,15 @@
 
+<!DOCTYPE html>
 
+<html lang="zh_CN">
 
+  <head>
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
+    <meta name="keywords" content="zoho crm extend">
 
+   <title>crm_extend</title>
 
+  </head>
 
+  <body>
 
+    <div id="app"></div>
 
+    <script type="module" src="/src/main.ts"></script>
 
+    <!-- built files will be auto injected -->
 
+  </body>
 
+</html>

+ 38 - 0
package.json
View File 

@@ -0,0 +1,38 @@
 
+{
 
+  "name": "crm_extend",
 
+  "version": "1.0.0",
 
+  "scripts": {
 
+    "build": "vue-tsc --noEmit && vite build",
 
+    "build-test": "vue-tsc --noEmit && vite build --mode test",
 
+    "dev": "vite",
 
+    "lint": "eslint --ext .js,.vue src",
 
+    "lint-fix": "eslint --ext .js,.vue src --fix"
 
+  },
 
+  "dependencies": {
 
+    "@element-plus/icons-vue": "^2.1.0",
 
+    "axios": "~0.27.2",
 
+    "dayjs": "^1.11.2",
 
+    "element-plus": "2.3.3",
 
+    "html2canvas": "^1.4.1",
 
+    "jspdf": "^2.5.1",
 
+    "lodash": "^4.17.21",
 
+    "vue": "^3.2.33",
 
+    "vue-router": "^4.0.15"
 
+  },
 
+  "devDependencies": {
 
+    "@typescript-eslint/eslint-plugin": "^5.59.5",
 
+    "@typescript-eslint/parser": "^5.59.5",
 
+    "@vitejs/plugin-vue": "^4.2.1",
 
+    "@vue/eslint-config-prettier": "^7.1.0",
 
+    "eslint": "^8.40.0",
 
+    "eslint-config-prettier": "^8.8.0",
 
+    "eslint-plugin-vue": "^9.12.0",
 
+    "prettier": "^2.8.8",
 
+    "sass": "^1.62.1",
 
+    "sass-loader": "^13.2.2",
 
+    "typescript": "^5.0.4",
 
+    "vite": "^4.3.5",
 
+    "vite-plugin-eslint": "^1.8.1",
 
+    "vue-tsc": "^1.6.4"
 
+  }
 
+}

BIN
public/assets/sign/AZY.png
View File


BIN
public/assets/sign/FOT.png
View File


BIN
public/assets/sign/Pangea.png
View File


+ 47 - 0
src/App.vue
View File 

@@ -0,0 +1,47 @@
 
+<template>
 
+  <el-config-provider :locale="locale">
 
+    <router-view v-if="!loading" />
 
+  </el-config-provider>
 
+</template>
 
+
 
+<script lang="ts">
 
+export default defineComponent({
 
+  name: 'App',
 
+})
 
+</script>
 
+
 
+<script lang="ts" setup>
 
+import { defineComponent, ref } from 'vue'
 
+// import useCommon from './useCommon'
 
+// import { useRoute, useRouter } from 'vue-router'
 
+import zhCn from 'element-plus/lib/locale/lang/zh-cn'
 
+import { ElConfigProvider } from 'element-plus'
 
+// const {} = useCommon()
 
+// const $route = useRoute()
 
+// const $router = useRouter()
 
+
 
+const loading = ref(true)
 
+loading.value = false
 
+const locale = ref(zhCn)
 
+</script>
 
+
 
+<style lang="scss">
 
+body {
 
+  position: relative;
 
+  margin: 0;
 
+  padding: 0;
 
+  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
 
+    'Microsoft YaHei', '\5fae\8f6f\96c5\9ed1', Arial, sans-serif;
 
+}
 
+
 
+#app {
 
+  height: 100%;
 
+  width: 100vw;
 
+  position: relative;
 
+  div {
 
+    box-sizing: border-box;
 
+  }
 
+}
 
+</style>
 
+
 
+<style lang="scss" scoped></style>

+ 3 - 0
src/assets/css/border-box.scss
View File 

@@ -0,0 +1,3 @@
 
+div {
 
+  box-sizing: border-box;
 
+}

+ 5 - 0
src/assets/css/element-hack.scss
View File 

@@ -0,0 +1,5 @@
 
+.el-card__header,
 
+.el-card__body {
 
+  padding-right: 14px;
 
+  padding-left: 14px;
 
+}

+ 35 - 0
src/assets/css/flex-custom.scss
View File 

@@ -0,0 +1,35 @@
 
+// 自定义flex布局class。vant-ui的布局默认带有flex-wrap，且有其他干扰，干脆自己定义
 
+.flex {
 
+  display: flex;
 
+  align-content: flex-start; // 侧轴方向 行与行的对齐
 
+  align-items: center; // 侧轴方向 行内item的对齐
 
+  &.column {
 
+    flex-direction: column; // 定义主轴方向
 
+  }
 
+  &.wrap {
 
+    flex-wrap: wrap;
 
+  }
 
+  /* 主轴方向 item的对齐 */
 
+  &.around {
 
+    justify-content: space-around;
 
+  }
 
+  &.between {
 
+    justify-content: space-between;
 
+  }
 
+  &.center {
 
+    justify-content: center;
 
+  }
 
+  &.end {
 
+    justify-content: flex-end;
 
+  }
 
+  &.baseline {
 
+    align-items: baseline;
 
+  }
 
+  &.start {
 
+    align-items: flex-start;
 
+  }
 
+  &.stretch {
 
+    align-items: stretch;
 
+  }
 
+}
 
+.flex-auto { flex: auto; }

+ 6 - 0
src/assets/css/var.module.scss
View File 

@@ -0,0 +1,6 @@
 
+@import './var.scss';
 
+:export {
 
+  mainColor: $mainColor;
 
+  subColor: $subColor;
 
+  bgColor: $bgColor;
 
+}

+ 5 - 0
src/assets/css/var.scss
View File 

@@ -0,0 +1,5 @@
 
+$mainColor: #222;
 
+$textColor: #444;
 
+$subColor: #777;
 
+$bgColor: #e5e5e5;
 
+$tableHeaderBgColor: #f8faff;

+ 8 - 0
src/env.d.ts
View File 

@@ -0,0 +1,8 @@
 
+/// <reference types="vite/client" />
 
+
 
+declare module '*.vue' {
 
+  import type { DefineComponent } from 'vue'
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
 
+  const component: DefineComponent<{}, {}, any>
 
+  export default component
 
+}

+ 94 - 0
src/interface.ts
View File 

@@ -0,0 +1,94 @@
 
+/* eslint-disable */
 
+export enum ServiceTypeKeyEnum {
 
+  PC = 'PC',
 
+  Pangea = 'Pangea',
 
+  PangeaTaxReimbursement = 'PangeaTaxReimbursement',
 
+  AZYTaxReimbursement = 'AZYTaxReimbursement',
 
+  FOTTaxReimbursement = 'FOTTaxReimbursement',
 
+}
 
+
 
+export type TypeService = {
 
+  [key in ServiceTypeKeyEnum]: string[]
 
+}
 
+
 
+export interface ISelectItem {
 
+  label: string | number
 
+}
 
+export interface IProduct {
 
+  label: string
 
+  value: string
 
+  [key: string]: number | string
 
+}
 
+
 
+export interface IProductItem {
 
+  name: string
 
+  desc: string
 
+  id: string
 
+  quantity: number | string
 
+  rate: number | string
 
+  requirement: string
 
+  amount: number | string
 
+  discount: number | string
 
+  candidate: IProduct[]
 
+
 
+  [key: string]: number | string | IProduct | IProduct[]
 
+}
 
+export interface IForm {
 
+  Order_Type: string
 
+  Artwork_Link: string
 
+  Currency: string
 
+  PO_Date: string
 
+  Payment_Terms: string
 
+  Title: string
 
+  field9: string
 
+  field7: string
 
+  field8: string
 
+  field6: string
 
+  productList: IProductItem[]
 
+  field12: string
 
+  field13: string
 
+  field10: string
 
+  field11: string
 
+  field4: string
 
+  field5: string
 
+  saleOrderId: string
 
+  // 用了处理给接口发送数据前的包装格式
 
+  Related_Sales_Order?: any
 
+  Product_Details?: any
 
+  Status?: string
 
+  Subject?: string
 
+  Sub_Total?: number
 
+  Total_Taxes?: number
 
+  Total_Discount?: number
 
+  Adjustment?: number
 
+  Grand_Total?: number
 
+  Created_By?: any
 
+  Vendor_Name?: any
 
+  currentVendor?: string // 仅前端界面用到, API接口的字段是Vendor_Name
 
+}
 
+
 
+export interface IVendorItem {
 
+  value: string
 
+  label: string
 
+  Primary_Contact_name: string
 
+  PDF_display: string
 
+  [x: string]: string | null
 
+}
 
+export interface ICompanyItem {
 
+  id: string
 
+  name: string
 
+  addr: string
 
+  phone: string
 
+  label: string
 
+  signPath: string
 
+  fax?: string
 
+  taxReimbursement?: boolean
 
+}
 
+
 
+export interface IUser {
 
+  id: number
 
+  email: string
 
+  users_id: string
 
+  full_name: string
 
+  [x: string]: string | number
 
+}

+ 13 - 0
src/main.ts
View File 

@@ -0,0 +1,13 @@
 
+import { createApp } from 'vue'
 
+import App from './App.vue'
 
+import router from './route'
 
+
 
+const app = createApp(App)
 
+app.use(router)
 
+
 
+import { ElLoading } from 'element-plus'
 
+app.use(ElLoading)
 
+import 'element-plus/dist/index.css'
 
+import '@/assets/css/element-hack.scss'
 
+
 
+app.mount('#app')

+ 11 - 0
src/pages/404.vue
View File 

@@ -0,0 +1,11 @@
 
+<template>
 
+  <div>404</div>
 
+</template>
 
+<script lang="ts">
 
+export default defineComponent({
 
+  name: 'PageNotFound',
 
+})
 
+</script>
 
+<script lang="ts" setup>
 
+import { defineComponent } from 'vue'
 
+</script>

+ 2390 - 0
src/pages/purchase-order/edit.vue
View File 

@@ -0,0 +1,2390 @@
 
+<template>
 
+  <div>
 
+    <div
 
+      v-if="loading"
 
+      v-loading="true"
 
+      class="view-window"
 
+    ></div>
 
+    <div
 
+      class="flex"
 
+      style="position: fixed; top: 20px; right: 100px; z-index: 2"
 
+    >
 
+      <el-button
 
+        type="info"
 
+        @click="formVisible = !formVisible"
 
+      >
 
+        <el-icon
 
+          size="18px"
 
+          color="#fff"
 
+        >
 
+          <Switch />
 
+        </el-icon>
 
+        &nbsp;{{ formVisible ? 'Preview PDF' : 'Show Form' }}
 
+      </el-button>
 
+      <el-button
 
+        type="primary"
 
+        :disabled="!formVisible"
 
+        @click="checkForm(mainForm)"
 
+      >
 
+        <el-icon
 
+          size="20px"
 
+          color="#fff"
 
+        >
 
+          <FolderAdd />
 
+        </el-icon>
 
+        &nbsp;Save & Attach
 
+      </el-button>
 
+    </div>
 
+    <div
 
+      v-show="formVisible"
 
+      class="screen"
 
+    >
 
+      <div class="flex between page-title-wrap">
 
+        <div class="flex">
 
+          <el-icon
 
+            size="36px"
 
+            :color="variables.mainColor"
 
+          >
 
+            <ShoppingCart />
 
+          </el-icon>
 
+          <div class="page-title">New Purchase Order</div>
 
+        </div>
 
+      </div>
 
+      <el-form
 
+        ref="mainForm"
 
+        :model="form"
 
+        :rules="formRule"
 
+        label-width="120px"
 
+      >
 
+        <div class="flex start">
 
+          <div class="layout-left">
 
+            <el-form-item label="Order Type">
 
+              <el-select
 
+                v-model="form.Order_Type"
 
+                style="width: 100%"
 
+                placeholder="please select order type"
 
+              >
 
+                <el-option
 
+                  v-for="(item, index) in orderTypeList"
 
+                  :key="index"
 
+                  :label="item.label"
 
+                  :value="item.label"
 
+                />
 
+              </el-select>
 
+            </el-form-item>
 
+            <el-form-item
 
+              label="Artwork Link"
 
+              prop="Artwork_Link"
 
+            >
 
+              <el-input
 
+                v-model="form.Artwork_Link"
 
+                placeholder="Please input"
 
+                type="textarea"
 
+                :rows="3"
 
+              ></el-input>
 
+            </el-form-item>
 
+            <el-form-item label="Currency">
 
+              <el-select
 
+                v-model="form.Currency"
 
+                style="width: 100%"
 
+                placeholder="please select currency"
 
+              >
 
+                <el-option
 
+                  v-for="(item, index) in currencyList"
 
+                  :key="index"
 
+                  :label="item.label"
 
+                  :value="item.label"
 
+                />
 
+              </el-select>
 
+            </el-form-item>
 
+          </div>
 
+
 
+          <div class="layout-right flex-auto">
 
+            <div style="position: absolute; right: 0; top: 0">
 
+              <el-form-item label="Template:">
 
+                <el-select
 
+                  v-model="currentCompany"
 
+                  style="width: 150px"
 
+                  @change="onCompanyTemplateChange"
 
+                >
 
+                  <el-option
 
+                    v-for="company in companyList"
 
+                    :key="company.id"
 
+                    :value="company.id"
 
+                    :label="company.label"
 
+                  ></el-option>
 
+                </el-select>
 
+              </el-form-item>
 
+            </div>
 
+
 
+            <div class="company-info">
 
+              <div class="company-name">{{ computedCompany.name }}</div>
 
+              <div class="flex center">
 
+                <div class="company-addr">
 
+                  地址:&nbsp;{{ computedCompany.addr }}
 
+                </div>
 
+                <div class="company-phone">
 
+                  &nbsp;|&nbsp;电话:&nbsp;{{ computedCompany.phone }}
 
+                </div>
 
+                <div
 
+                  v-show="computedCompany.fax"
 
+                  class="company-fax"
 
+                >
 
+                  &nbsp;|&nbsp;传真:&nbsp;{{ computedCompany.phone }}
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="pdf-title">采购合同</div>
 
+            <div class="pdf-title-bg">
 
+              <div class="left"></div>
 
+              <div class="right"></div>
 
+            </div>
 
+            <div class="flex start between form-area">
 
+              <div class="form-area-left">
 
+                <div class="">
 
+                  <span style="color: #f56c6c">*</span>
 
+                  供应商(乙方) :
 
+                </div>
 
+                <div>{{ computedVendor.Primary_Contact_name }}</div>
 
+                <el-form-item
 
+                  label-width="0"
 
+                  prop="currentVendor"
 
+                >
 
+                  <el-select-v2
 
+                    v-model="form.currentVendor"
 
+                    :remote-method="getSupplierLists"
 
+                    remote
 
+                    style="width: 100%"
 
+                    :loading="vendorLoading"
 
+                    :options="vendorList"
 
+                    filterable
 
+                    clearable
 
+                  ></el-select-v2>
 
+                </el-form-item>
 
+                <div class="">{{ computedVendor.PDF_display }}</div>
 
+              </div>
 
+              <div class="form-area-right">
 
+                <el-form-item label="采购订单 #:">
 
+                  Generate once PO submitted
 
+                </el-form-item>
 
+                <el-form-item
 
+                  label="订单号 # :"
 
+                  prop="saleOrderId"
 
+                >
 
+                  <el-input
 
+                    v-model="form.saleOrderId"
 
+                    disabled
 
+                  ></el-input>
 
+                </el-form-item>
 
+                <el-form-item
 
+                  label="日期:"
 
+                  prop="PO_Date"
 
+                >
 
+                  <el-date-picker
 
+                    v-model="form.PO_Date"
 
+                    format="YYYY-MM-DD"
 
+                    value-format="YYYY-MM-DD"
 
+                    style="width: 100%"
 
+                    type="date"
 
+                    placeholder=""
 
+                  ></el-date-picker>
 
+                </el-form-item>
 
+                <el-form-item label="付款方式 :">
 
+                  <el-select
 
+                    v-model="form.Payment_Terms"
 
+                    style="width: 100%"
 
+                  >
 
+                    <el-option
 
+                      v-for="(item, index) in supplierPaymentTermsLists"
 
+                      :key="index"
 
+                      :value="item.label"
 
+                      :label="item.label"
 
+                    ></el-option>
 
+                  </el-select>
 
+                </el-form-item>
 
+                <el-form-item label="参考 :">
 
+                  <el-input v-model="form.Title"></el-input>
 
+                </el-form-item>
 
+
 
+                <!-- 退税版没有这几项 -->
 
+                <template
 
+                  v-if="typeof computedCompany.taxReimbursement === 'undefined'"
 
+                >
 
+                  <el-form-item label="收货详情 :">
 
+                    <el-select
 
+                      v-model="form.field9"
 
+                      style="width: 100%"
 
+                    >
 
+                      <el-option
 
+                        v-for="(item, index) in addressList"
 
+                        :key="index"
 
+                        :value="item.label"
 
+                        :label="item.label"
 
+                      ></el-option>
 
+                    </el-select>
 
+                  </el-form-item>
 
+                  <el-form-item
 
+                    label="收件人 :"
 
+                    prop="field7"
 
+                  >
 
+                    <el-input v-model="form.field7"></el-input>
 
+                  </el-form-item>
 
+                  <el-form-item
 
+                    label="联系电话 :"
 
+                    prop="field8"
 
+                  >
 
+                    <el-input v-model="form.field8"></el-input>
 
+                  </el-form-item>
 
+                </template>
 
+                <el-form-item
 
+                  label="工厂交货日期 :"
 
+                  prop="field6"
 
+                >
 
+                  <el-date-picker
 
+                    v-model="form.field6"
 
+                    style="width: 100%"
 
+                    format="YYYY-MM-DD"
 
+                    value-format="YYYY-MM-DD"
 
+                  ></el-date-picker>
 
+                </el-form-item>
 
+              </div>
 
+            </div>
 
+            <div class="product-table-separator"></div>
 
+            <div class="product-table">
 
+              <table
 
+                border="0"
 
+                cellspacing="0"
 
+              >
 
+                <tr>
 
+                  <th class="product">Product</th>
 
+                  <th class="quantity">Quantity</th>
 
+                  <th class="rate">Rate</th>
 
+                  <th class="requirement">Requirement</th>
 
+                  <th class="amount">Amount</th>
 
+                  <th class="discount">Discount</th>
 
+                  <th class="action">Action</th>
 
+                </tr>
 
+                <tr
 
+                  v-for="(product, index) in form.productList"
 
+                  :key="index"
 
+                >
 
+                  <td class="product">
 
+                    <el-form-item
 
+                      label=""
 
+                      label-width="0"
 
+                      :prop="'productList.' + index + '.id'"
 
+                      :rules="{
 
+                        required: true,
 
+                        message: '必填项',
 
+                        trigger: ['blur', 'change'],
 
+                      }"
 
+                    >
 
+                      <el-select-v2
 
+                        v-model="product.id"
 
+                        style="width: 100%; margin-bottom: 4pt"
 
+                        :options="product.candidate"
 
+                        :loading="productLoading"
 
+                        :remote-method="(e:string) => getProductList(e, product)"
 
+                        remote
 
+                        filterable
 
+                        clearable
 
+                        @change="(e) => onProductSelect(e, product)"
 
+                      ></el-select-v2>
 
+                    </el-form-item>
 
+                    <el-input
 
+                      v-model="product.desc"
 
+                      type="textarea"
 
+                      placeholder="Free text"
 
+                    ></el-input>
 
+                  </td>
 
+                  <td class="quantity">
 
+                    <el-form-item
 
+                      label=""
 
+                      label-width="0"
 
+                      :prop="'productList.' + index + '.quantity'"
 
+                      :rules="{
 
+                        required: true,
 
+                        message: '必填项',
 
+                        trigger: ['blur', 'change'],
 
+                      }"
 
+                    >
 
+                      <el-input
 
+                        v-model="product.quantity"
 
+                        type="number"
 
+                        min="1"
 
+                        @change="(e) => onInputChange(e, product, 'quantity')"
 
+                      ></el-input>
 
+                    </el-form-item>
 
+                  </td>
 
+                  <td class="rate">
 
+                    <el-form-item
 
+                      label=""
 
+                      label-width="0"
 
+                      :prop="'productList.' + index + '.rate'"
 
+                      :rules="{
 
+                        required: true,
 
+                        message: '必填项',
 
+                        trigger: ['blur', 'change'],
 
+                      }"
 
+                    >
 
+                      <el-input
 
+                        v-model="product.rate"
 
+                        type="number"
 
+                        @change="(e) => onInputChange(e, product, 'rate')"
 
+                      ></el-input>
 
+                    </el-form-item>
 
+                  </td>
 
+                  <td class="requirement">
 
+                    <el-input
 
+                      v-model="product.requirement"
 
+                      rows="2"
 
+                      type="textarea"
 
+                      placeholder="Free text"
 
+                    ></el-input>
 
+                  </td>
 
+                  <td class="amount">
 
+                    <el-input
 
+                      v-model="product.amount"
 
+                      type="number"
 
+                      disabled
 
+                    ></el-input>
 
+                  </td>
 
+                  <td class="discount">
 
+                    <el-input
 
+                      v-model="product.discount"
 
+                      type="number"
 
+                      @change="(e) => onInputChange(e, product, 'discount')"
 
+                    ></el-input>
 
+                  </td>
 
+                  <td class="action">
 
+                    <el-button
 
+                      size="small"
 
+                      type="danger"
 
+                      plain
 
+                      @click="form.productList.splice(index, 1)"
 
+                    >
 
+                      Delete
 
+                    </el-button>
 
+                  </td>
 
+                </tr>
 
+              </table>
 
+            </div>
 
+            <div>
 
+              <el-button
 
+                type="primary"
 
+                size="small"
 
+                plain
 
+                @click="addRow"
 
+              >
 
+                Add Row
 
+              </el-button>
 
+            </div>
 
+            <div class="flex end">
 
+              <div class="product-total-table">
 
+                <div class="total-item">
 
+                  <div class="label">Sub Total</div>
 
+                  <div class="value">{{ subTotal.toFixed(2) }}</div>
 
+                </div>
 
+                <div class="total-item">
 
+                  <div class="label">Total Discount</div>
 
+                  <div class="value">
 
+                    {{ totalDiscount.toFixed(2) }}
 
+                  </div>
 
+                </div>
 
+                <div class="total-item">
 
+                  <div class="label">Adjustment</div>
 
+                  <div class="value">
 
+                    <el-input
 
+                      v-model="adjustment"
 
+                      style="width: 100%"
 
+                      type="number"
 
+                      @change="(e) => formatAdjustment(e)"
 
+                      @input="(e) => formatAdjustment(e)"
 
+                    ></el-input>
 
+                  </div>
 
+                </div>
 
+                <div class="total-item">
 
+                  <div class="label">Grand Total</div>
 
+                  <div class="value">
 
+                    {{ grandTotal.toFixed(2) }}
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+
 
+            <div class="note-form-area">
 
+              <div class="sub-form-title">注意事项:</div>
 
+              <el-form-item label="印刷质量:">
 
+                <el-input
 
+                  v-model="form.field12"
 
+                  type="textarea"
 
+                  rows="3"
 
+                ></el-input>
 
+              </el-form-item>
 
+              <el-form-item label="产品质量:">
 
+                <el-input
 
+                  v-model="form.field13"
 
+                  type="textarea"
 
+                  rows="3"
 
+                ></el-input>
 
+              </el-form-item>
 
+              <el-form-item label="质量承诺:">
 
+                <el-input
 
+                  v-model="form.field10"
 
+                  type="textarea"
 
+                  rows="3"
 
+                ></el-input>
 
+              </el-form-item>
 
+              <el-form-item label="箱子箱唛:">
 
+                <el-input
 
+                  v-model="form.field11"
 
+                  type="textarea"
 
+                  rows="3"
 
+                ></el-input>
 
+              </el-form-item>
 
+            </div>
 
+
 
+            <div class="sub-form-title">服务条款</div>
 
+            <template v-if="currentCompany === 'PangeaTaxReimbursement'">
 
+              <div class="rule-item flex">
 
+                一、合同价为含税价，税率为:
 
+                <span style="color: #f56c6c">*</span>
 
+                <el-form-item
 
+                  label-width="10"
 
+                  prop="field4"
 
+                  :rules="{
 
+                    required: true,
 
+                    message: '必填项',
 
+                    trigger: ['blur', 'change'],
 
+                  }"
 
+                >
 
+                  <el-input
 
+                    v-model="form.field4"
 
+                    size="small"
 
+                    style="width: 120px"
 
+                  >
 
+                    <template #append>%</template>
 
+                  </el-input>
 
+                </el-form-item>
 
+              </div>
 
+              <div class="rule-item flex">
 
+                二、运费条款:
 
+                <span style="color: #f56c6c">*</span>
 
+                <el-form-item label-width="10">
 
+                  <el-select
 
+                    v-model="form.field5"
 
+                    size="small"
 
+                    style="width: 110px"
 
+                  >
 
+                    <el-option
 
+                      v-for="(item, index) in field5_lists"
 
+                      :key="index"
 
+                      :label="item.label"
 
+                      :value="item.label"
 
+                    ></el-option>
 
+                  </el-select>
 
+                </el-form-item>
 
+              </div>
 
+            </template>
 
+            <div
 
+              v-for="(item, index) in currentServiceRule"
 
+              :key="index"
 
+              class="rule-item"
 
+            >
 
+              {{ item }}
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </el-form>
 
+      <br />
 
+    </div>
 
+    <div
 
+      class="print"
 
+      :class="{ hidden: formVisible && !loading }"
 
+    >
 
+      <div class="pdf-wrap">
 
+        <div
 
+          id="pdfElement"
 
+          ref="pdfElement"
 
+          class="preview-area"
 
+        >
 
+          <div class="company-info">
 
+            <div class="company-name">{{ computedCompany.name }}</div>
 
+            <div class="flex center">
 
+              <div class="company-addr">
 
+                地址:&nbsp;{{ computedCompany.addr }}
 
+              </div>
 
+              <div class="company-phone">
 
+                &nbsp;|&nbsp;电话:&nbsp;{{ computedCompany.phone }}
 
+              </div>
 
+              <div
 
+                v-show="computedCompany.fax"
 
+                class="company-fax"
 
+              >
 
+                &nbsp;|&nbsp;传真:&nbsp;{{ computedCompany.phone }}
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div>
 
+            <table class="pdf-title-bg">
 
+              <tr>
 
+                <td class="left">
 
+                  <div>&nbsp;</div>
 
+                </td>
 
+                <td class="center">
 
+                  <div class="pdf-title">采购合同</div>
 
+                </td>
 
+                <td class="right">
 
+                  <div>&nbsp;</div>
 
+                </td>
 
+              </tr>
 
+            </table>
 
+          </div>
 
+          <div class="form-area">
 
+            <table
 
+              border="0"
 
+              cellspacing="0"
 
+            >
 
+              <tr>
 
+                <td class="column-vendor">供应商(乙方) :</td>
 
+                <td class="column-form-label">采购订单 #:</td>
 
+                <td class="column-form-value">
 
+                  {{ longPONumber || '' }}
 
+                </td>
 
+              </tr>
 
+              <tr>
 
+                <td class="column-vendor">
 
+                  {{ computedVendor.Primary_Contact_name }}
 
+                </td>
 
+                <td class="column-form-label">订单号 # :</td>
 
+                <td class="column-form-value">
 
+                  {{ form.saleOrderId }}
 
+                </td>
 
+              </tr>
 
+              <tr>
 
+                <td class="column-vendor">
 
+                  {{ computedVendor.label }}
 
+                </td>
 
+                <td class="column-form-label">日期 :</td>
 
+                <td class="column-form-value">
 
+                  {{ form.PO_Date }}
 
+                </td>
 
+              </tr>
 
+              <tr>
 
+                <td
 
+                  class="column-vendor"
 
+                  rowspan="7"
 
+                >
 
+                  {{ computedVendor.PDF_display }}
 
+                </td>
 
+                <td class="column-form-label">付款方式 :</td>
 
+                <td class="column-form-value">
 
+                  {{
 
+                    form.Payment_Terms !== '-None-' ? form.Payment_Terms : ''
 
+                  }}
 
+                </td>
 
+              </tr>
 
+              <tr>
 
+                <td class="column-form-label">参考 :</td>
 
+                <td class="column-form-value">
 
+                  {{ form.Title }}
 
+                </td>
 
+              </tr>
 
+
 
+              <template
 
+                v-if="typeof computedCompany.taxReimbursement === 'undefined'"
 
+              >
 
+                <tr>
 
+                  <td class="column-form-label">收货详情 :</td>
 
+                  <td class="column-form-value">
 
+                    {{ form.field9 }}
 
+                  </td>
 
+                </tr>
 
+                <tr>
 
+                  <td class="column-form-label">收件人 :</td>
 
+                  <td class="column-form-value">
 
+                    {{ form.field7 }}
 
+                  </td>
 
+                </tr>
 
+                <tr>
 
+                  <td class="column-form-label">联系电话 :</td>
 
+                  <td class="column-form-value">
 
+                    {{ form.field8 }}
 
+                  </td>
 
+                </tr>
 
+              </template>
 
+
 
+              <tr>
 
+                <td class="column-form-label">工厂交货日期 :</td>
 
+                <td class="column-form-value">
 
+                  {{ form.field6 }}
 
+                </td>
 
+              </tr>
 
+            </table>
 
+          </div>
 
+          <div class="product-table-separator"></div>
 
+          <div class="product-table">
 
+            <table
 
+              border="0"
 
+              cellspacing="0"
 
+            >
 
+              <tr>
 
+                <th class="row-index">#</th>
 
+                <th>品目</th>
 
+                <th>要求</th>
 
+                <th>数量</th>
 
+                <th>价钱</th>
 
+                <th>金额</th>
 
+              </tr>
 
+              <tr
 
+                v-for="(product, index) in form.productList"
 
+                :key="index"
 
+              >
 
+                <td class="row-index">{{ index + 1 }}.</td>
 
+                <td>
 
+                  <div>{{ product.name }}</div>
 
+                  <div class="desc">{{ product.desc }}</div>
 
+                </td>
 
+                <td>
 
+                  {{ product.requirement }}
 
+                </td>
 
+                <td>
 
+                  {{ product.quantity }}
 
+                </td>
 
+                <td>
 
+                  {{ currentCurrency.country
 
+                  }}{{ currentCurrency.symbol }}&nbsp;{{
 
+                    Number(product.rate).toFixed(computedDeci)
 
+                  }}
 
+                </td>
 
+                <td>
 
+                  {{ currentCurrency.country
 
+                  }}{{ currentCurrency.symbol }}&nbsp;{{
 
+                    Number(product.amount).toFixed(computedDeci)
 
+                  }}
 
+                </td>
 
+              </tr>
 
+            </table>
 
+          </div>
 
+
 
+          <!-- <br /> -->
 
+          <div class="flex between start">
 
+            <div class="note-form-area">
 
+              <div class="sub-form-title">注意事项:</div>
 
+              <div class="">
 
+                <div class="label">印刷质量:</div>
 
+                <div class="value">{{ form.field12 }}</div>
 
+              </div>
 
+              <div class="">
 
+                <div class="label">产品质量:</div>
 
+                <div class="value">{{ form.field13 }}</div>
 
+              </div>
 
+              <div class="">
 
+                <div class="label">质量承诺:</div>
 
+                <div class="value">{{ form.field10 }}</div>
 
+              </div>
 
+              <div class="">
 
+                <div class="label">箱子箱唛:</div>
 
+                <div class="value">{{ form.field11 }}</div>
 
+              </div>
 
+            </div>
 
+            <div class="product-total-table">
 
+              <div class="total-item flex">
 
+                <div class="label">小计&nbsp;</div>
 
+                <div class="value">
 
+                  {{ currentCurrency.country
 
+                  }}{{ currentCurrency.symbol }}&nbsp;{{
 
+                    subTotal.toFixed(computedDeci)
 
+                  }}
 
+                </div>
 
+              </div>
 
+              <div class="total-item flex">
 
+                <div class="label">合计&nbsp;</div>
 
+                <div class="value">
 
+                  {{ currentCurrency.country
 
+                  }}{{ currentCurrency.symbol }}&nbsp;{{
 
+                    grandTotal.toFixed(computedDeci)
 
+                  }}
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+
 
+          <br />
 
+          <div class="sub-form-title">服务条款</div>
 
+          <template v-if="currentCompany === 'PangeaTaxReimbursement'">
 
+            <div class="rule-item">
 
+              一、合同价为含税价，税率为: {{ form.field4 }} %
 
+            </div>
 
+            <div class="rule-item">二、运费条款: {{ form.field5 }}</div>
 
+          </template>
 
+          <div
 
+            v-for="(item, index) in currentServiceRule"
 
+            :key="index"
 
+            class="rule-item"
 
+          >
 
+            {{ item }}
 
+          </div>
 
+
 
+          <br />
 
+          <div class="signature-area">
 
+            <div class="company-seal"></div>
 
+            <div class="first-party">
 
+              <div
 
+                class="flex"
 
+                style="align-items: flex-end"
 
+              >
 
+                <div v-show="!computedCompany.label.includes('Pangea')">
 
+                  甲方(盖章):
 
+                </div>
 
+                <div
 
+                  class="sign-wrap"
 
+                  :class="{ pangea: computedCompany.label.includes('Pangea') }"
 
+                >
 
+                  <img
 
+                    v-if="computedCompany.signPath"
 
+                    :src="computedCompany.signPath"
 
+                    alt=""
 
+                  />
 
+                </div>
 
+              </div>
 
+              <div class="">代表人: {{ userInfo.full_name }}</div>
 
+              <div class="">日期: {{ form.PO_Date }}</div>
 
+            </div>
 
+            <div class="second-party">
 
+              <div class="">乙方(盖章):</div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+      <div
 
+        v-if="computedCompany.taxReimbursement"
 
+        class="pdf-wrap"
 
+      >
 
+        <div
 
+          id=""
 
+          ref="pdfElement2"
 
+          class="preview-area2"
 
+        >
 
+          <div class="supplier-name">
 
+            {{ computedVendor.Suppliers_Name }}
 
+          </div>
 
+          <div class="billing-addr">
 
+            {{ computedVendor.Billing_Address || '' }}
 
+          </div>
 
+          <div class="flex around contact-info">
 
+            <div class="flex">
 
+              <div>Tel No.:</div>
 
+              <div>&nbsp;{{ computedVendor.Phone }}</div>
 
+            </div>
 
+            <div class="flex center">
 
+              <div>E-mail:</div>
 
+              <div class="">&nbsp;{{ computedVendor.Email }}</div>
 
+            </div>
 
+          </div>
 
+
 
+          <div class="base-info-area">
 
+            <div class="flex">
 
+              <div class="flex start left">
 
+                <div class="base-info-label">TO:</div>
 
+                <div
 
+                  v-if="currentCompany === 'AZYTaxReimbursement'"
 
+                  class="base-info-value"
 
+                >
 
+                  Azy Trading Pty Ltd
 
+                </div>
 
+                <div
 
+                  v-else-if="currentCompany === 'FOTTaxReimbursement'"
 
+                  class="base-info-value"
 
+                >
 
+                  Fair Ocean Trading Australia Pty Ltd
 
+                </div>
 
+              </div>
 
+
 
+              <div class="right flex">
 
+                <div class="base-info-label">Date:</div>
 
+                <div class="base-info-value">{{ form.PO_Date }}</div>
 
+              </div>
 
+            </div>
 
+
 
+            <div class="flex start">
 
+              <div class="left flex start">
 
+                <div class="base-info-label">ADD:</div>
 
+                <div>
 
+                  <div
 
+                    v-if="currentCompany === 'AZYTaxReimbursement'"
 
+                    class="base-info-value"
 
+                  >
 
+                    UNIT 12,21/F WAYSON COMM BLDG NO 28 CONNAUGHT RD WEST SHEUNG
 
+                    WAN, HK
 
+                  </div>
 
+                  <div
 
+                    v-else-if="currentCompany === 'FOTTaxReimbursement'"
 
+                    class="base-info-value"
 
+                  >
 
+                    15/10 Chilvers Road, Thornleigh, NSW 2120
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="right flex">
 
+                <div class="base-info-label">P/I. NO.</div>
 
+                <div class="base-info-value">{{ longPONumber }}</div>
 
+              </div>
 
+            </div>
 
+
 
+            <div class="flex start">
 
+              <div class="left flex">
 
+                <div class="base-info-label">ATTN:</div>
 
+                <div class="base-info-value">Accounts</div>
 
+              </div>
 
+              <div class="right flex">
 
+                <div class="base-info-label">Reference:</div>
 
+                <div class="base-info-value">{{ PONumber }}</div>
 
+              </div>
 
+            </div>
 
+
 
+            <div class="flex start">
 
+              <div class="flex left">
 
+                <template v-if="currentCompany === 'FOTTaxReimbursement'">
 
+                  <div class="base-info-label">TEL NO:</div>
 
+                  <div class="base-info-value">02 9008 1322</div>
 
+                </template>
 
+                <div v-else></div>
 
+              </div>
 
+              <div class="right flex">
 
+                <div class="base-info-label">Payment Term:</div>
 
+                <div class="base-info-value">
 
+                  {{ computedVendor.Payment_Terms }}
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+
 
+          <div class="table-title">PROFORMA INVOICE</div>
 
+          <div class="product-table">
 
+            <table cellspacing="0">
 
+              <tr>
 
+                <th>ITEM</th>
 
+                <th>DESCRIPTION</th>
 
+                <th>QTY(pcs)</th>
 
+                <th>UNIT PRICE</th>
 
+                <th>TOPTAL VALUE</th>
 
+              </tr>
 
+
 
+              <tr
 
+                v-for="(product, index) in form.productList"
 
+                :key="index"
 
+              >
 
+                <td>
 
+                  <div>{{ product.name }}</div>
 
+                </td>
 
+                <td>
 
+                  <div class="desc">{{ product.desc }}</div>
 
+                </td>
 
+                <td>
 
+                  {{ product.quantity }}
 
+                </td>
 
+                <td>
 
+                  {{ currentCurrency.country
 
+                  }}{{ currentCurrency.symbol }}&nbsp;{{
 
+                    Number(product.rate).toFixed(computedDeci)
 
+                  }}
 
+                </td>
 
+                <td>
 
+                  {{ currentCurrency.country
 
+                  }}{{ currentCurrency.symbol }}&nbsp;{{
 
+                    Number(product.amount).toFixed(computedDeci)
 
+                  }}
 
+                </td>
 
+              </tr>
 
+            </table>
 
+            <div class="flex end">
 
+              <div
 
+                class="flex"
 
+                style="margin-top: 10pt"
 
+              >
 
+                <div style="margin: 0 100pt 0 0">TOTAL</div>
 
+                <div>
 
+                  {{ currentCurrency.country
 
+                  }}{{ currentCurrency.symbol }}&nbsp;{{ subTotal }}
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <br />
 
+          <div class="bank-info-area">
 
+            <div class="flex">
 
+              <div>Bank Information</div>
 
+              <div></div>
 
+            </div>
 
+            <div class="flex">
 
+              <div class="bank-info-label">Beneficiary:</div>
 
+              <div class="bank-info-value">
 
+                {{ computedVendor.Suppliers_Name }}dd
 
+              </div>
 
+            </div>
 
+            <div class="flex">
 
+              <div class="bank-info-label">Bank:</div>
 
+              <div class="bank-info-value">
 
+                {{ computedVendor.Bank_Branch_Name }}
 
+              </div>
 
+            </div>
 
+            <div class="flex">
 
+              <div class="bank-info-label">Bank Add:</div>
 
+              <div class="bank-info-value">{{}}</div>
 
+            </div>
 
+            <div class="flex">
 
+              <div class="bank-info-label">A/C No.:</div>
 
+              <div class="bank-info-value">
 
+                {{ computedVendor.Bank_Account }}
 
+              </div>
 
+            </div>
 
+            <div class="flex">
 
+              <div class="bank-info-label">Bank Code:</div>
 
+              <div class="bank-info-value">{{}}</div>
 
+            </div>
 
+            <div class="flex">
 
+              <div class="bank-info-label">SWIFT CODE:</div>
 
+              <div class="bank-info-value">
 
+                {{ computedVendor.Swift_Code_IBAN }}
 
+              </div>
 
+            </div>
 
+            <div class="flex">
 
+              <div class="bank-info-label">Add:</div>
 
+              <div class="bank-info-value">{{}}</div>
 
+            </div>
 
+          </div>
 
+          <br />
 
+          <div class="flex between start">
 
+            <div class="">
 
+              <div class="">BUYERS' SIGNATURE</div>
 
+              <div class="sign-wrap">
 
+                <img
 
+                  v-if="computedCompany.signPath"
 
+                  :src="computedCompany.signPath"
 
+                  alt=""
 
+                />
 
+              </div>
 
+            </div>
 
+            <div class="">
 
+              <div class="">SELLER'S SIGNATURE</div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+<script lang="ts">
 
+export default defineComponent({
 
+  name: 'PurchaseOrderEdit',
 
+})
 
+</script>
 
+<script lang="ts" setup>
 
+import { computed, defineComponent, ref, unref } from 'vue'
 
+import { useRoute } from 'vue-router'
 
+import {
 
+  ElButton,
 
+  ElSelectV2,
 
+  ElSelect,
 
+  ElOption,
 
+  ElIcon,
 
+  ElInput,
 
+  ElForm,
 
+  ElFormItem,
 
+  ElDatePicker,
 
+  ElMessage,
 
+  ElNotification,
 
+} from 'element-plus'
 
+import type { FormInstance, FormRules } from 'element-plus'
 
+import { ShoppingCart, FolderAdd, Switch } from '@element-plus/icons-vue'
 
+import axios from 'axios'
 
+import dayjs from 'dayjs'
 
+import jspdf from 'jspdf'
 
+import html2canvas from 'html2canvas'
 
+import utils from '@/utils/index'
 
+import variables from '@/assets/css/var.module.scss'
 
+import {
 
+  ServiceTypeKeyEnum,
 
+  TypeService,
 
+  ISelectItem,
 
+  IProductItem,
 
+  IUser,
 
+  ICompanyItem,
 
+  IVendorItem,
 
+  IForm,
 
+} from '@/interface'
 
+
 
+computed(() => {
 
+  return variables
 
+})
 
+const formVisible = ref(true)
 
+const loading = ref(false)
 
+// 订单ID. 例如5757019000000428205, 不是串号.
 
+const POID = ref('')
 
+// po 串号. 例如 PO2025
 
+const PONumber = ref('')
 
+// po 长串号. 例如 ZCPO2025
 
+const longPONumber = ref('')
 
+const mainForm = ref<FormInstance>()
 
+const checkForm = function (formEl: FormInstance | undefined) {
 
+  if (!formEl) return
 
+
 
+  formEl.validate((valid, fields) => {
 
+    if (valid) {
 
+      submit()
 
+    } else {
 
+      console.log('check form has not pass!', fields)
 
+      ElMessage.error('请检查表单必填项')
 
+    }
 
+  })
 
+}
 
+
 
+const submit = () => {
 
+  loading.value = true
 
+  createPurchaseOrders()
 
+    .then((res) => {
 
+      console.log(res)
 
+      getPurchaseOrdersData()
 
+        .then(() => {
 
+          generatePDF()
 
+            .then(() => {
 
+              ElNotification({
 
+                type: 'success',
 
+                title: '任务已成功处理',
 
+                message: '本页面将在数秒后自动关闭',
 
+              })
 
+              setTimeout(() => {
 
+                window.close()
 
+              }, 5000)
 
+            })
 
+            .finally(() => {
 
+              loading.value = false
 
+            })
 
+        })
 
+        .catch(() => {
 
+          // loading.value = false
 
+          const msg = '获取PO详情失败, 未能正确生成PDF'
 
+          console.log(msg)
 
+          ElNotification({ duration: 0, title: msg, type: 'error' })
 
+        })
 
+    })
 
+    .catch(() => {
 
+      // loading.value = false
 
+      const msg = '创建PO失败'
 
+      console.log(msg)
 
+
 
+      ElNotification({ duration: 0, title: msg, type: 'error' })
 
+    })
 
+}
 
+
 
+const pdfElement = ref()
 
+const pdfElement2 = ref()
 
+const generatePDF = (ele = pdfElement, isFirstTime = true) => {
 
+  const A4_WIDTH = 592.28
 
+  const A4_HEIGHT = 841.89
 
+  let imageWrapper = unref(ele) // 获取DOM
 
+
 
+  // let pageHeight = (imageWrapper.scrollWidth / A4_WIDTH) * A4_HEIGHT
 
+  let pageHeight = (imageWrapper.clientWidth / A4_WIDTH) * A4_HEIGHT
 
+  let lableListID = imageWrapper.querySelectorAll('div')
 
+  // 进行分割操作，当dom内容已超出a4的高度，则将该dom前插入一个空dom，把他挤下去，分割
 
+  for (let i = 0; i < lableListID.length; i++) {
 
+    let multiple = Math.ceil(
 
+      (lableListID[i].offsetTop + lableListID[i].offsetHeight) / pageHeight,
 
+    )
 
+    if (isSplit(lableListID, i, multiple * pageHeight)) {
 
+      let divParent = lableListID[i].parentNode // 获取该div的父节点
 
+      let newNode = document.createElement('div')
 
+      newNode.className = 'empty-div'
 
+      newNode.style.background = '#fff'
 
+      let _H =
 
+        multiple * pageHeight -
 
+        (lableListID[i].offsetTop + lableListID[i].offsetHeight)
 
+      //留白
 
+      newNode.style.height = _H + 30 + 'px'
 
+      newNode.style.width = '100%'
 
+      let next = lableListID[i].nextSibling // 获取div的下一个兄弟节点
 
+      // 判断兄弟节点是否存在
 
+      if (next) {
 
+        // 存在则将新节点插入到div的下一个兄弟节点之前，即div之后
 
+        divParent.insertBefore(newNode, next)
 
+      } else {
 
+        // 不存在则直接添加到最后,appendChild默认添加到divParent的最后
 
+        divParent.appendChild(newNode)
 
+      }
 
+    }
 
+  }
 
+
 
+  return new Promise((resolve, reject) => {
 
+    html2canvas(imageWrapper, {
 
+      allowTaint: true,
 
+      useCORS: true,
 
+      backgroundColor: '#fff', //一定要设背景颜色，否则有的浏览器就会变花~，比如Edge
 
+      scale: 3, // 缩放倍率调整清晰度
 
+    }).then((canvas) => {
 
+      let pdf = new jspdf('p', 'mm', 'a4') //A4纸，纵向
 
+      let ctx = canvas.getContext('2d'),
 
+        a4ContentWidth = 190,
 
+        a4ContentHeight = 277, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
 
+        imgHeight = Math.floor(
 
+          (a4ContentHeight / a4ContentWidth) * canvas.width,
 
+        ), //按A4显示比例换算一页图像的像素高度
 
+        renderedHeight = 0
 
+
 
+      while (renderedHeight < canvas.height) {
 
+        let page = document.createElement('canvas')
 
+        page.width = canvas.width
 
+        page.height = Math.min(imgHeight, canvas.height - renderedHeight) //可能内容不足一页
 
+        //用getImageData剪裁指定区域，并画到前面创建的canvas对象中
 
+        // @ts-ignore: Object is possibly 'null'.
 
+        page
 
+          .getContext('2d')
 
+          .putImageData(
 
+            ctx!.getImageData(
 
+              0,
 
+              renderedHeight,
 
+              canvas.width,
 
+              Math.min(imgHeight, canvas.height - renderedHeight),
 
+            ),
 
+            0,
 
+            0,
 
+          )
 
+        // document.body.appendChild(page)
 
+        pdf.addImage(
 
+          page.toDataURL('image/jpeg', 0.2),
 
+          'JPEG',
 
+          10,
 
+          10,
 
+          a4ContentWidth,
 
+          Math.min(
 
+            a4ContentHeight,
 
+            a4ContentWidth * (page.height / page.width),
 
+          ),
 
+        ) //添加图像到页面，保留10mm边距
 
+        renderedHeight += imgHeight
 
+        if (renderedHeight < canvas.height) pdf.addPage() //如果后面还有内容，添加一个空页
 
+      }
 
+      const fileName = isFirstTime ? 'attachment_file' : 'attachment_file_2'
 
+
 
+      sendPDF(pdf.output('datauristring'), fileName)
 
+        .then(() => {
 
+          // 有两个退税版模版, 需要生成两个PDF.
 
+          if (computedCompany.value.taxReimbursement === true && isFirstTime) {
 
+            ElNotification({
 
+              duration: 0,
 
+              title: '正在生成附件2 PDF',
 
+              type: 'info',
 
+            })
 
+            generatePDF(pdfElement2, false).then(() => {
 
+              resolve(true)
 
+            })
 
+          } else {
 
+            resolve(true)
 
+          }
 
+        })
 
+        .catch((e) => {
 
+          reject(e)
 
+        })
 
+      // 本地备份一下
 
+      pdf.save(
 
+        `backup_${fileName}` + `_${dayjs().format('YYYYMMDD_HHmm')}` + '.pdf',
 
+      )
 
+    })
 
+  })
 
+}
 
+const isSplit = function (nodes: any, index: number, pageHeight: number) {
 
+  // 计算当前这块dom是否跨越了a4大小，以此分割
 
+  if (
 
+    nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight &&
 
+    nodes[index + 1] &&
 
+    nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight
 
+  ) {
 
+    return true
 
+  }
 
+  return false
 
+}
 
+const sendPDF = function (file: string, filename = `attachment_file`) {
 
+  const temp = file.split(',')
 
+  // @ts-ignore: Object is possibly 'null'.
 
+  const mimeType = temp[0].match(/:(.*?);/)[1]
 
+  let extName = mimeType.split('/')[1]
 
+  let bstr = window.atob(temp[1])
 
+  let n = bstr.length
 
+  let result = new Uint8Array(n)
 
+
 
+  while (n--) {
 
+    result[n] = bstr.charCodeAt(n)
 
+  }
 
+
 
+  const data = {
 
+    id: POID.value,
 
+    file: new File([result], `${filename}.${extName}`, { type: mimeType }),
 
+  }
 
+  console.log(data)
 
+  return new Promise((resolve, reject) => {
 
+    axios
 
+      .post('/api/Purchase_orders/uploadAttachmentFile', data, {
 
+        headers: {
 
+          'Content-Type': 'multipart/form-data',
 
+        },
 
+      })
 
+      .then((response) => {
 
+        if (response.data.code !== 1) {
 
+          const msg = '自动创建附件失败'
 
+
 
+          ElNotification({ duration: 0, title: msg, type: 'error' })
 
+          reject(msg)
 
+          return
 
+        }
 
+        ElNotification({
 
+          duration: 0,
 
+          title: '自动创建 PDF 成功',
 
+          type: 'success',
 
+        })
 
+
 
+        resolve(true)
 
+      })
 
+      .catch((e) => {
 
+        reject(e)
 
+      })
 
+  })
 
+}
 
+
 
+const createPurchaseOrders = function () {
 
+  const data = JSON.parse(JSON.stringify(unref(form)))
 
+
 
+  data.Status = 'Created'
 
+  data.Sub_Total = subTotal.value
 
+  data.Total_Taxes = 0
 
+  data.Total_Discount = totalDiscount.value
 
+  data.Adjustment = adjustment.value
 
+  data.Grand_Total = grandTotal.value
 
+  data.Subject = '这里不用填个p4'
 
+  data.Created_By = {
 
+    id: userInfo.value.users_id || route.query.user,
 
+    name: userInfo.value.full_name || '',
 
+  }
 
+  data.Vendor_Name = {
 
+    id: computedVendor.value.value,
 
+    name: computedVendor.value.label,
 
+  }
 
+
 
+  // console.log(data.Related_Sales_Order, 'ddd')
 
+  data.Related_Sales_Order = {
 
+    id: form.value.saleOrderId,
 
+    name: form.value.Title,
 
+  }
 
+
 
+  data.Product_Details = data.productList.map((item: any) => {
 
+    return {
 
+      quantity: item.quantity,
 
+      Discount: item.discount || 0,
 
+      list_price: item.rate,
 
+      Tax: 0,
 
+      total: item.amount,
 
+      total_after_discount: Number(item.amount) - Number(item.discount),
 
+      net_total: Number(item.amount) - Number(item.discount),
 
+      description: item.desc,
 
+      requirement: item.requirement,
 
+      // line_tax: [],
 
+      // book: '',
 
+      // id: item.id,
 
+      product: {
 
+        // name: item.name,
 
+        id: item.id,
 
+        // Product_Code: item.Product_Code,
 
+      },
 
+      // 这两个是crm有的, 但是文档没有
 
+      List_Price_Non_Currency: item.rate,
 
+      Price_Book_Name: '',
 
+    }
 
+  })
 
+  if (data.productList) delete data.productList
 
+  console.log(data, 'create po params')
 
+  return new Promise((resolve, reject) => {
 
+    axios
 
+      .post('/api/Purchase_orders/createPurchaseOrders', data, {})
 
+      .then((response) => {
 
+        if (response.data.code !== 1) return
 
+        const res = response.data.result
 
+        console.log(res, 'create po')
 
+        if (res.data && res.data.length && res.data[0].code === 'SUCCESS') {
 
+          POID.value = res.data[0].details?.id || ''
 
+          resolve(res.data[0].details?.id)
 
+
 
+          ElNotification({
 
+            duration: 0,
 
+            title: '创建 Purchase Order 成功',
 
+            type: 'success',
 
+          })
 
+        } else {
 
+          ElNotification({
 
+            duration: 0,
 
+            title: '未能成功创建PO, 请稍后重试或者联系管理员',
 
+            type: 'error',
 
+          })
 
+        }
 
+        reject('未能成功创建PO')
 
+      })
 
+      .catch((e) => {
 
+        reject(e)
 
+      })
 
+  })
 
+}
 
+const getPurchaseOrdersData = function () {
 
+  return new Promise((resolve, reject) => {
 
+    axios
 
+      .post('/api/purchase_orders/getPurchaseOrdersData', {
 
+        id: POID.value,
 
+      })
 
+      .then((response) => {
 
+        if (response.data.code !== 1) {
 
+          reject(false)
 
+          return
 
+        }
 
+        const res = response.data.result[0]
 
+
 
+        longPONumber.value = res.PO_Number || ''
 
+        PONumber.value = res.Purchase_Order_Number || ''
 
+        resolve(true)
 
+      })
 
+      .catch((e) => {
 
+        reject(e)
 
+      })
 
+  })
 
+}
 
+// getPurchaseOrdersData()
 
+
 
+const currencyList = ref([
 
+  {
 
+    label: 'AUD',
 
+    symbol: '',
 
+    country: '',
 
+  },
 
+  {
 
+    label: 'NZD',
 
+    symbol: '',
 
+    country: '',
 
+  },
 
+  {
 
+    label: 'CNY',
 
+    symbol: '¥',
 
+    country: 'CN',
 
+  },
 
+  {
 
+    label: 'GBP',
 
+    symbol: '',
 
+    country: '',
 
+  },
 
+  {
 
+    label: 'EUR',
 
+    symbol: '',
 
+    country: '',
 
+  },
 
+  {
 
+    label: 'USD',
 
+    symbol: '',
 
+    country: '',
 
+  },
 
+])
 
+const currentCurrency = computed(() => {
 
+  const temp = currencyList.value.filter((i) => i.label === form.value.Currency)
 
+  // 2是人民币
 
+  return temp.length ? temp[0] : temp[2]
 
+})
 
+
 
+let orderTypeList = ref([
 
+  {
 
+    label: '-None-',
 
+  },
 
+  {
 
+    label: '打样',
 
+  },
 
+  {
 
+    label: '大货',
 
+  },
 
+])
 
+const form = ref<IForm>({
 
+  Order_Type: '-None-',
 
+  Artwork_Link: '',
 
+  Currency: 'CNY',
 
+  // 订单号
 
+  saleOrderId: '',
 
+  // 日期
 
+  PO_Date: '',
 
+  // 付款方式
 
+  Payment_Terms: '-None-',
 
+  // 参考, so的job name
 
+  Title: '',
 
+  // 收货地址
 
+  field9: '广州市越秀区八旗二马路广东航运大厦1904室 邮编510110',
 
+  // 收件人
 
+  field7: '',
 
+  // 联系电话
 
+  field8: '18925020659',
 
+  // 工厂交货日期
 
+  field6: '',
 
+  productList: [
 
+    {
 
+      name: '',
 
+      id: '',
 
+      quantity: '',
 
+      rate: '',
 
+      requirement: '',
 
+      desc: '',
 
+      amount: 0,
 
+      discount: '',
 
+      candidate: [],
 
+    },
 
+  ] as IProductItem[],
 
+  // 印刷质量
 
+  field12: '',
 
+  // 产品质量
 
+  field13: '',
 
+  // 质量承诺
 
+  field10: '',
 
+  // 箱子箱唛
 
+  field11: '',
 
+  // 税率
 
+  field4: '0',
 
+  // 运费条款
 
+  field5: '供应商承担',
 
+  currentVendor: '',
 
+})
 
+
 
+const formRule = ref<FormRules>({
 
+  Artwork_Link: [
 
+    {
 
+      required: true,
 
+      message: '必填项',
 
+      trigger: 'blur',
 
+    },
 
+  ],
 
+  PO_Date: [
 
+    {
 
+      required: true,
 
+      message: '必填项',
 
+      trigger: 'blur',
 
+    },
 
+  ],
 
+  saleOrderId: [
 
+    {
 
+      required: true,
 
+      message: '必填项',
 
+      trigger: 'blur',
 
+    },
 
+  ],
 
+  field7: [
 
+    {
 
+      required: true,
 
+      message: '必填项',
 
+      trigger: 'blur',
 
+    },
 
+  ],
 
+  field8: [
 
+    {
 
+      required: true,
 
+      message: '必填项',
 
+      trigger: 'blur',
 
+    },
 
+  ],
 
+  field6: [
 
+    {
 
+      required: true,
 
+      message: '必填项',
 
+      trigger: 'blur',
 
+    },
 
+  ],
 
+  currentVendor: [
 
+    {
 
+      required: true,
 
+      message: '必填项',
 
+      trigger: 'change',
 
+    },
 
+  ],
 
+})
 
+
 
+const emptyProductItem = {
 
+  label: '',
 
+  value: '',
 
+  candidate: [],
 
+  name: '',
 
+  desc: '',
 
+  id: '',
 
+  quantity: '',
 
+  rate: '',
 
+  requirement: '',
 
+  // 未计算优惠(discount)之前的总额
 
+  amount: 0,
 
+  // 优惠额度
 
+  discount: '',
 
+}
 
+const addRow = function () {
 
+  form.value.productList.push(JSON.parse(JSON.stringify(emptyProductItem)))
 
+}
 
+const keyNeedCompute = ['quantity', 'rate']
 
+const onInputChange = function (e: any, obj: IProductItem, key: string) {
 
+  console.log(e, 'input value before enfore change')
 
+  if (typeof e === 'string') {
 
+    if (e.length) {
 
+      // 强制转换为数字类型
 
+      // obj[key] = Math.round(utils.multiply(Number(e))) / 100
 
+      obj[key] = Math.round(utils.multiply(Number(e), 1000)) / 1000
 
+      // 计算每行的总额
 
+      if (keyNeedCompute.includes(key)) {
 
+        obj.amount = utils.multiply(Number(obj.quantity), Number(obj.rate))
 
+      }
 
+    } else {
 
+      // obj[key] = minValue
 
+    }
 
+  }
 
+}
 
+const onProductSelect = function (e: any, product: IProductItem) {
 
+  if (e) {
 
+    const temp = product.candidate.filter((i) => i.value === e)
 
+    if (temp.length) {
 
+      product.name = temp[0].label
 
+      product.Product_Code = temp[0].Product_Code
 
+    }
 
+  } else {
 
+    product.name = ''
 
+  }
 
+}
 
+
 
+// 小计
 
+const subTotal = computed(() => {
 
+  return form.value.productList.reduce((total, current) => {
 
+    total = total + Number(current.amount)
 
+    return total
 
+  }, 0)
 
+})
 
+// 总优惠额度
 
+const totalDiscount = computed(() => {
 
+  return form.value.productList.reduce((total, current) => {
 
+    total = total + Number(current.discount)
 
+    return total
 
+  }, 0)
 
+})
 
+// 价格统计修正值
 
+const adjustment = ref(0)
 
+const formatAdjustment = function (string: string) {
 
+  adjustment.value = Number(string)
 
+}
 
+// 总计
 
+const grandTotal = computed(() => {
 
+  return subTotal.value - totalDiscount.value + adjustment.value
 
+})
 
+const productLoading = ref(false)
 
+const getProductList = utils.debounce(
 
+  (keyword: string, target: IProductItem) => {
 
+    productLoading.value = true
 
+    const data = {
 
+      keyword: keyword.trim(),
 
+      limit: 200,
 
+    }
 
+    axios
 
+      .post('/api/common/getProductsLists', data)
 
+      .then((response) => {
 
+        if (response.data.code !== 1) return
 
+        const res = response.data.result
 
+        target.candidate = res.data.map((item: any) => {
 
+          return {
 
+            ...item,
 
+            label: item.Product_Name,
 
+            value: item.products_id,
 
+          }
 
+        })
 
+      })
 
+      .finally(() => {
 
+        productLoading.value = false
 
+      })
 
+  },
 
+  1000,
 
+)
 
+
 
+const vendorList = ref<IVendorItem[]>([])
 
+const computedVendor = computed(() => {
 
+  const temp = vendorList.value.filter(
 
+    (i) => i.value === form.value.currentVendor,
 
+  )
 
+  return temp.length
 
+    ? temp[0]
 
+    : {
 
+        Primary_Contact_name: '',
 
+        PDF_display: '',
 
+        label: '',
 
+        value: '',
 
+      }
 
+})
 
+const vendorLoading = ref(false)
 
+const getSupplierLists = utils.debounce(function (string: string) {
 
+  const data = {
 
+    keyword: string.trim(),
 
+    limit: 200,
 
+  }
 
+  vendorLoading.value = true
 
+  axios
 
+    .post('/api/common/getSupplierLists', data)
 
+    .then((response) => {
 
+      if (response.data.code !== 1) return
 
+      const res = response.data.result
 
+      vendorList.value = res.data.map((i: any) => {
 
+        return {
 
+          label: i.Suppliers_Name,
 
+          value: i.supplier_id,
 
+          Primary_Contact_name: i.Primary_Contact_name || '',
 
+          PDF_display: i.PDF_display || '',
 
+        }
 
+      })
 
+
 
+      if (import.meta.env.MODE !== 'production') {
 
+        vendorList.value.unshift({
 
+          Primary_Contact_name: '彭攀巅',
 
+          PDF_display: '深圳市\n广东\nCN\n支付宝\nPay@keansilicone.com\n彭攀巅',
 
+          label: '测试供应商1',
 
+          value: '5757019000000428185',
 
+          Suppliers_Name: '测试供应商1',
 
+          Email: '2850335131@qq.com',
 
+          Phone: '135 3069 5330',
 
+          Payment_Terms: 'Prepaid',
 
+          Bank_Branch_Name: '支付宝',
 
+          Bank_Account: 'Pay@keansilicone.com',
 
+          Swift_Code_IBAN: '',
 
+        })
 
+      }
 
+    })
 
+    .finally(() => {
 
+      vendorLoading.value = false
 
+    })
 
+}, 1000)
 
+getSupplierLists('')
 
+
 
+const getPath = function (path: string) {
 
+  return new URL(path, import.meta.url).href
 
+}
 
+// 用于切换合同模版
 
+const companyList = ref<ICompanyItem[]>([
 
+  {
 
+    id: 'PC',
 
+    label: 'PC',
 
+    name: '澳之原贸易有限公司',
 
+    addr: 'UNIT 12,21/F WAYSON COMM BLDG NO 28 CONNAUGHT RD WEST SHEUNG WAN,HK',
 
+    phone: '020-81609790',
 
+    signPath: getPath('/assets/sign/AZY.png'),
 
+  },
 
+  {
 
+    id: 'Pangea',
 
+    label: 'Pangea',
 
+    name: '庞吉亚国际商务服务（广州）有限公司',
 
+    addr: '广州市越秀区八旗二马路48号内自编1号主楼自编1605、1606房',
 
+    phone: '020-81609790',
 
+    fax: '020-81519492',
 
+    signPath: getPath('/assets/sign/Pangea.png'),
 
+  },
 
+  {
 
+    id: 'PangeaTaxReimbursement',
 
+    label: 'Pangea_退税版',
 
+    name: '庞吉亚国际商务服务（广州）有限公司',
 
+    addr: '广州市越秀区八旗二马路48号内自编1号主楼自编1605、1606房',
 
+    phone: '020-81609790',
 
+    fax: '020-81519492',
 
+    // 名字叫退税版, 实际上合同没有第二份pdf. 判断是否退税版的依据是键名存在与否, 而不是这个值的真假
 
+    taxReimbursement: false,
 
+    signPath: getPath('/assets/sign/Pangea.png'),
 
+  },
 
+  {
 
+    id: 'AZYTaxReimbursement',
 
+    label: 'AZY_退税版',
 
+    name: '澳之原贸易有限公司',
 
+    addr: 'UNIT 12,21/F WAYSON COMM BLDG NO 28 CONNAUGHT RD WEST SHEUNG WAN,HK',
 
+    phone: '020-81609790',
 
+    taxReimbursement: true,
 
+    signPath: getPath('/assets/sign/AZY.png'),
 
+  },
 
+  {
 
+    id: 'FOTTaxReimbursement',
 
+    label: 'FOT_退税版',
 
+    name: 'FAIR OCEAN TRADING AUSTRALIA PTY.LTD',
 
+    addr: '15/10 Chilvers Road, Thornleigh, NSW 2120',
 
+    phone: '020-81609790',
 
+    taxReimbursement: true,
 
+    signPath: getPath('/assets/sign/FOT.png'),
 
+  },
 
+])
 
+// 切换模版后的处理
 
+const onCompanyTemplateChange = function () {
 
+  // 重置这两个字段
 
+  form.value.field5 = '供应商承担'
 
+  form.value.field4 = ''
 
+
 
+  if (typeof computedCompany.value.taxReimbursement === 'undefined') {
 
+    form.value.field7 = soOwner.value
 
+    form.value.field8 = '18925020659'
 
+    form.value.field9 = '广州市越秀区八旗二马路广东航运大厦1904室 邮编510110'
 
+  } else {
 
+    // 退税版没有这三个表单项, 直接重置值. 相应的, 非退税版要重新赋值.
 
+    form.value.field7 = ''
 
+    form.value.field8 = ''
 
+    form.value.field9 = ''
 
+  }
 
+}
 
+
 
+// 合同的服务条款
 
+const serviceRule = ref<TypeService>({
 
+  PC: [
 
+    '一、本采购订单签署原件一式两份，双方各持一份。',
 
+    '二、验收标准:按乙方所寄样板及国家出口标准作为验收标准。',
 
+    '三、交货期限:交货期限必须严格执行。',
 
+    '四、交货地点:甲方广州公司地址,如上收货地址。',
 
+    '五、付款方式:甲方通过银行转帐的方式付款,乙方账户信息如上。',
 
+    '六、如因未能按上述标准及期限交货而产生经济损失，将由乙方承担。',
 
+    '七、凡因执行本合同所发生的或与本合同有关的一切争议，如经友好协商不能解决时，交由广州当地法院进行判决。',
 
+  ],
 
+  Pangea: [
 
+    '一、本采购订单签署原件一式两份，双方各持一份。',
 
+    '二、验收标准:按乙方所寄样板及国家出口标准作为验收标准。',
 
+    '三、交货期限:交货期限必须严格执行。',
 
+    '四、交货地点:甲方广州公司地址,如上收货地址。',
 
+    '五、付款方式:甲方通过银行转帐的方式付款,乙方账户信息如上。',
 
+    '六、如因未能按上述标准及期限交货而产生经济损失，将由乙方承担。',
 
+    '七、凡因执行本合同所发生的或与本合同有关的一切争议，如经友好协商不能解决时，交由广州当地法院进行判决。',
 
+  ],
 
+  PangeaTaxReimbursement: [
 
+    '三、本采购订单签署原件一式两份，双方各持一份。',
 
+    '四、验收标准:按乙方所寄样板及国家出口标准作为验收标准。',
 
+    '五、交货期限:交货期限必须严格执行。',
 
+    '六、交货地点: 广州市越秀区八旗二马路48号航运大厦1605、1606房',
 
+    '七、付款方式:甲方通过银行转帐的方式付款,乙方账户信息如上。',
 
+    '八、如因未能按上述标准及期限交货而产生经济损失，将由乙方承担。',
 
+    '九、凡因执行本合同所发生的或与本合同有关的一切争议，如经友好协商不能解决时，交由广州当地法院进行判决。',
 
+    '十、我司开票资料:',
 
+    '账户名称:庞吉亚国际商务服务(广州)有限公司',
 
+    '统一社会代码:91440101MA9XUQNB4B',
 
+    '公司地址:广州市越秀区八旗二马路48号内自编1号主楼16楼自编1605、1606房 ',
 
+    '公司电话:81609790',
 
+    '基本账户:中国光大银行股份有限公司广州分行越秀支行',
 
+    '账户号码:77910180803936888',
 
+    '开户银行地址:广州市越秀区文德南路69号',
 
+  ],
 
+  AZYTaxReimbursement: [
 
+    '一、本采购订单签署原件一式两份，双方各持一份。',
 
+    '二、验收标准:按乙方所寄样板及国家出口标准作为验收标准。',
 
+    '三、交货期限:交货期限必须严格执行。',
 
+    '四、收货地址:澳竣元代收，广州市越秀区八旗二马路48号航运大厦1902房。',
 
+    '五、付款方式:甲方通过银行转帐的方式付款,乙方账户信息如上。',
 
+    '六、如因未能按上述标准及期限交货而产生经济损失，将由乙方承担。',
 
+    '七、凡因执行本合同所发生的或与本合同有关的一切争议，如经友好协商不能解决时，交由广州当地法院进行判决。',
 
+  ],
 
+  FOTTaxReimbursement: [
 
+    '一、本采购订单签署原件一式两份，双方各持一份。',
 
+    '二、验收标准:按乙方所寄样板及国家出口标准作为验收标准。',
 
+    '三、交货期限:交货期限必须严格执行。',
 
+    '四、收货地址:澳竣元代收，广州市越秀区八旗二马路48号航运大厦1902房。',
 
+    '五、付款方式:甲方通过银行转帐的方式付款,乙方账户信息如上。',
 
+    '六、如因未能按上述标准及期限交货而产生经济损失，将由乙方承担。',
 
+    '七、凡因执行本合同所发生的或与本合同有关的一切争议，如经友好协商不能解决时，交由广州当地法院进行判决。',
 
+  ],
 
+})
 
+const currentServiceRule = computed(() => {
 
+  return serviceRule.value[currentCompany.value as ServiceTypeKeyEnum]
 
+})
 
+
 
+const currentCompany = ref('PC')
 
+const computedCompany = computed(() => {
 
+  const result = companyList.value.filter((i) => i.id === currentCompany.value)
 
+  return result.length ? result[0] : companyList.value[0]
 
+})
 
+// 格式化输出价格的小数位数. 退税版需要显示三位小数, 其他只需要两位小数
 
+const computedDeci = computed(() => {
 
+  return typeof computedCompany.value.taxReimbursement !== 'undefined' ? 3 : 2
 
+})
 
+
 
+// 候选 收货地址
 
+let addressList = ref<ISelectItem[]>([])
 
+
 
+// 候选 运费条款. 目前只有庞吉亚退税版用到, 其他模版默认供应商承担
 
+let field5_lists = ref<ISelectItem[]>([])
 
+
 
+let supplierPaymentTermsLists = ref<ISelectItem[]>([])
 
+
 
+// 获取下拉框非动态候选数据
 
+axios
 
+  .post('/api/common/getfieldsData')
 
+  .then((response: any) => {
 
+    // console.log(response, '/common/getfieldsData')
 
+    const res = response.data.result
 
+
 
+    orderTypeList.value = res.Order_Type_lists.map((i: any) => {
 
+      return {
 
+        label: i,
 
+      }
 
+    })
 
+    addressList.value = res.field9_lists.map((i: any) => {
 
+      return {
 
+        label: i,
 
+      }
 
+    })
 
+    field5_lists.value = res.field5_lists
 
+      .filter((i: string) => !/^-?[Nn]one-?$/.test(i))
 
+      .map((i: any) => {
 
+        return {
 
+          label: i,
 
+        }
 
+      })
 
+    supplierPaymentTermsLists.value = res.Supplier_Payment_Terms_lists.map(
 
+      (i: any) => {
 
+        return {
 
+          label: i,
 
+        }
 
+      },
 
+    )
 
+  })
 
+  .catch((e) => {
 
+    console.log(e, '下拉框')
 
+    ElMessage.error('获取下拉框数据出错, 请联系管理员.')
 
+  })
 
+
 
+const route = useRoute()
 
+const productBlackList = ['4791186000046982872', '4791186000046982896']
 
+const soOwner = ref('')
 
+// 获取销售订单详情
 
+axios
 
+  .post('/api/common/getSalesOrdersData', { id: route.params.id })
 
+  .then((response) => {
 
+    const res = response.data
 
+    if (res.code !== 1) return
 
+    form.value.field7 = res.result.Owner_name || ''
 
+    soOwner.value = res.result.Owner_name || ''
 
+    form.value.Title = res.result.Sales_Order_Title_Job_Name || ''
 
+    form.value.saleOrderId = res.result.sales_orders_id || ''
 
+    form.value.PO_Date = dayjs(new Date()).format('YYYY-MM-DD')
 
+
 
+    let temp = res.result.details.filter(
 
+      (item: any) => !productBlackList.includes(item.product_id),
 
+    )
 
+
 
+    if (import.meta.env.MODE !== 'production') {
 
+      temp = [
 
+        {
 
+          product_id: '5757019000000523001',
 
+          product_name: '测试商品, 强行写的',
 
+          quantity: 3,
 
+          rate: 2,
 
+        },
 
+      ]
 
+    }
 
+    if (!temp.length) return
 
+    form.value.productList = []
 
+    temp.forEach((item: any) => {
 
+      form.value.productList.push(
 
+        Object.assign({}, emptyProductItem, {
 
+          candidate: [
 
+            {
 
+              Product_Code: item.product_Product_Code,
 
+              label: item.product_name,
 
+              value: item.product_id,
 
+            },
 
+          ],
 
+          Product_Code: item.product_Product_Code,
 
+          id: item.product_id,
 
+          name: item.product_name,
 
+          // label: `(${item.product_Product_Code})${item.product_name}`,
 
+          label: item.product_name,
 
+          value: item.product_id,
 
+          desc: item.product_description || '',
 
+          quantity: Number(item.quantity),
 
+        }),
 
+      )
 
+    })
 
+  })
 
+
 
+// 根据url传递过来的用户ID获取的用户身份信息
 
+const userInfo = ref({} as IUser)
 
+axios
 
+  .post('/api/common/getUsersData', { id: route.query.user })
 
+  .then((response) => {
 
+    const res = response.data
 
+    if (res.code !== 1) return
 
+    userInfo.value = res.result || {}
 
+  })
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+.view-window {
 
+  height: 100vh;
 
+  width: 100vw;
 
+  position: fixed;
 
+  z-index: 999;
 
+  background-color: rgba(#fff, 0.3);
 
+  left: 0;
 
+  top: 0;
 
+}
 
+.screen {
 
+  margin: 0 auto;
 
+  font-size: 12pt;
 
+  line-height: 22pt;
 
+}
 
+.page-title-wrap {
 
+  padding: 12px 36px;
 
+  border-bottom: 1px solid #eee;
 
+  margin-bottom: 24px;
 
+}
 
+.page-title {
 
+  font-size: 36px;
 
+  margin-left: 8px;
 
+}
 
+.layout-left {
 
+  width: 435px;
 
+  min-width: 435px;
 
+  padding-right: 24px;
 
+}
 
+.layout-right {
 
+  position: relative;
 
+  border-left: 1px solid #eee;
 
+  padding: 0 24px;
 
+}
 
+
 
+.rule-item {
 
+  .el-form-item {
 
+    margin-bottom: 0;
 
+  }
 
+}
 
+
 
+.sign-wrap {
 
+  width: 100pt;
 
+  &.pangea {
 
+    width: 180pt;
 
+  }
 
+  img {
 
+    width: 100%;
 
+  }
 
+}
 
+.screen {
 
+  max-width: 1600px;
 
+  margin: 0 auto;
 
+
 
+  .company-info {
 
+    text-align: center;
 
+    font-size: 10pt;
 
+    color: $subColor;
 
+    margin-bottom: 16pt;
 
+  }
 
+  .company-name {
 
+    margin-bottom: 4pt;
 
+    color: $mainColor;
 
+    font-size: 16pt;
 
+    line-height: 22pt;
 
+  }
 
+  .company-addr {
 
+    line-height: 12pt;
 
+    height: 12pt;
 
+  }
 
+  .company-phone {
 
+    line-height: 12pt;
 
+    height: 12pt;
 
+  }
 
+  .company-fax {
 
+    line-height: 12pt;
 
+    height: 12pt;
 
+  }
 
+  .form-area {
 
+    position: relative;
 
+  }
 
+  .form-area-left {
 
+    width: 30%;
 
+  }
 
+  .form-area-right {
 
+    width: 45%;
 
+    position: relative;
 
+    text-align: right;
 
+
 
+    vertical-align: top;
 
+    .label {
 
+      display: inline-block;
 
+      width: 40%;
 
+      vertical-align: top;
 
+    }
 
+    .value {
 
+      width: 60%;
 
+      word-break: break-word;
 
+      display: inline-block;
 
+    }
 
+  }
 
+
 
+  .product-table-separator {
 
+    width: 95%;
 
+  }
 
+  .product-total-table {
 
+    display: inline-block;
 
+    border: 1px solid #eee;
 
+    min-width: 220pt;
 
+    border-radius: 8pt;
 
+    position: relative;
 
+    right: 0;
 
+    top: 0;
 
+    .total-item {
 
+      & > div {
 
+        display: inline-block;
 
+        height: 26pt;
 
+        line-height: 26pt;
 
+        padding: 0 8pt;
 
+      }
 
+      &:nth-of-type(n + 1) {
 
+        border-top: 1px solid #eee;
 
+      }
 
+    }
 
+    .label {
 
+      width: 50%;
 
+      text-align: right;
 
+    }
 
+    .value {
 
+      width: 50%;
 
+      text-align: left;
 
+    }
 
+  }
 
+  .product-table {
 
+    table {
 
+      border: 1pt solid #eee;
 
+      width: 100%;
 
+    }
 
+    tr:nth-of-type(n + 3) td {
 
+      border-top: 1pt solid #eee;
 
+    }
 
+    th {
 
+      text-align: center;
 
+      background-color: $tableHeaderBgColor;
 
+    }
 
+    td {
 
+      padding: 8pt 8pt 4pt;
 
+      min-width: 30pt;
 
+      max-width: 100pt;
 
+    }
 
+    th + th,
 
+    td + td {
 
+      border-left: 1pt solid #eee;
 
+    }
 
+    .action {
 
+      text-align: center;
 
+      width: 50pt;
 
+    }
 
+    .quantity,
 
+    .rate,
 
+    .amount,
 
+    .discount {
 
+      width: 80pt;
 
+    }
 
+    .requirement {
 
+      width: 180pt;
 
+    }
 
+    .product {
 
+      width: 180pt;
 
+    }
 
+  }
 
+  .note-form-area {
 
+    width: 40%;
 
+  }
 
+  .rule-item {
 
+    color: $subColor;
 
+    line-height: 26pt;
 
+  }
 
+  .sub-form-title {
 
+    padding-left: 4pt;
 
+    border-left: 2pt solid #efefef;
 
+    margin-bottom: 8pt;
 
+  }
 
+}
 
+.preview-area {
 
+  font-size: 10pt;
 
+  line-height: 22pt;
 
+  color: $mainColor;
 
+  box-sizing: border-box;
 
+  * {
 
+    padding: 0;
 
+    margin: 0;
 
+  }
 
+
 
+  .company-info {
 
+    text-align: center;
 
+    font-size: 9pt;
 
+    color: $subColor;
 
+    margin-bottom: 16pt;
 
+  }
 
+  .company-name {
 
+    margin-bottom: 4pt;
 
+    color: $mainColor;
 
+    font-size: 16pt;
 
+    line-height: 22pt;
 
+  }
 
+  .company-addr {
 
+    line-height: 12pt;
 
+    height: 12pt;
 
+  }
 
+  .company-phone {
 
+    line-height: 12pt;
 
+    height: 12pt;
 
+  }
 
+  .company-fax {
 
+    line-height: 12pt;
 
+    height: 12pt;
 
+  }
 
+
 
+  $titleWidth: 100%;
 
+  .pdf-title {
 
+    text-align: center;
 
+    font-size: 28pt;
 
+    line-height: 36pt;
 
+    height: 36pt;
 
+    width: $titleWidth;
 
+    margin: 0 auto;
 
+    background-color: #fff;
 
+  }
 
+
 
+  .pdf-title-bg {
 
+    width: 100%;
 
+    height: 2pt;
 
+
 
+    .center {
 
+      width: 33%;
 
+      text-align: center;
 
+    }
 
+    .right,
 
+    .left {
 
+      width: 33%;
 
+      height: 3pt;
 
+      line-height: 3pt;
 
+      & > div {
 
+        width: 100%;
 
+        height: 2pt;
 
+        line-height: 2pt;
 
+        background-color: $bgColor;
 
+      }
 
+    }
 
+  }
 
+
 
+  .form-area {
 
+    padding-top: 24pt;
 
+    line-height: 14pt;
 
+    $formAreaFontSize: 10pt;
 
+    white-space: pre-wrap;
 
+    td {
 
+      font-size: $formAreaFontSize;
 
+      padding-bottom: 8pt;
 
+    }
 
+    .column-vendor {
 
+      width: 50%;
 
+      vertical-align: top;
 
+    }
 
+    .column-form-label {
 
+      vertical-align: top;
 
+      width: 20%;
 
+    }
 
+    .column-form-value {
 
+      vertical-align: top;
 
+      width: 30%;
 
+    }
 
+  }
 
+  .product-table-separator {
 
+    width: 100%;
 
+    margin: 15pt auto 10pt;
 
+    height: 2pt;
 
+    background-color: $bgColor;
 
+  }
 
+  .product-table {
 
+    table {
 
+      margin: 0 auto 6pt;
 
+      width: 100%;
 
+      border-radius: 6pt;
 
+      text-align: left;
 
+    }
 
+    tr:nth-of-type(n + 1) td {
 
+      border-top: 1pt solid #eee;
 
+    }
 
+    th {
 
+      background-color: $bgColor;
 
+      min-width: 20pt;
 
+      padding: 0 2pt;
 
+    }
 
+    td {
 
+      min-width: 20pt;
 
+      max-width: 100pt;
 
+      padding: 0 2pt;
 
+      .desc {
 
+        white-space: pre-wrap;
 
+        line-height: 16pt;
 
+        color: $subColor;
 
+      }
 
+    }
 
+    .row-index {
 
+      width: 20pt;
 
+    }
 
+  }
 
+
 
+  .note-form-area {
 
+    width: 40%;
 
+
 
+    .label {
 
+      color: $subColor;
 
+      display: inline-block;
 
+      width: 40%;
 
+      vertical-align: top;
 
+    }
 
+    .value {
 
+      color: $subColor;
 
+      width: 60%;
 
+      word-break: break-word;
 
+      white-space: pre-wrap;
 
+      display: inline-block;
 
+      line-height: 16pt;
 
+    }
 
+  }
 
+  .sub-form-title {
 
+    color: $subColor;
 
+    font-weight: bold;
 
+  }
 
+  .rule-item {
 
+    color: $subColor;
 
+    line-height: 26pt;
 
+  }
 
+  .signature-area {
 
+    color: $subColor;
 
+    .first-party {
 
+      padding: 30pt 0 0;
 
+    }
 
+    .second-party {
 
+      padding: 20pt 0 40pt;
 
+    }
 
+  }
 
+}
 
+
 
+.preview-area2 {
 
+  .supplier-name {
 
+    font-size: 22pt;
 
+    text-align: center;
 
+  }
 
+  .billing-addr {
 
+    line-height: 18pt;
 
+    min-height: 18pt;
 
+    font-size: 12pt;
 
+    text-align: center;
 
+  }
 
+  .contact-info {
 
+    margin-bottom: 12pt;
 
+    min-height: 18pt;
 
+    line-height: 18pt;
 
+    font-size: 12pt;
 
+  }
 
+  .product-table {
 
+    table {
 
+      border: 1px solid $bgColor;
 
+      border-radius: 3pt;
 
+      margin: 0 auto 6pt;
 
+      width: 100%;
 
+      font-size: 10pt;
 
+    }
 
+    th {
 
+      text-align: left;
 
+    }
 
+    td {
 
+      white-space: pre-wrap;
 
+    }
 
+    th,
 
+    td {
 
+      padding: 4pt 6pt;
 
+      &:nth-of-type(n + 2) {
 
+        border-left: 1px solid $bgColor;
 
+      }
 
+    }
 
+    tr:nth-of-type(n + 2) {
 
+      td {
 
+        border-top: 1px solid $bgColor;
 
+      }
 
+    }
 
+  }
 
+  .table-title {
 
+    text-align: center;
 
+    font-weight: bold;
 
+    font-size: 16pt;
 
+    margin: 12pt auto 8pt;
 
+  }
 
+  .base-info-area {
 
+    margin-top: 12pt;
 
+    font-size: 11pt;
 
+
 
+    .base-info-label {
 
+      min-width: 90pt;
 
+      width: 90pt;
 
+      font-family: serif;
 
+    }
 
+    .base-info-value {
 
+      white-space: pre-wrap;
 
+      vertical-align: top;
 
+      flex: auto;
 
+      text-align: left;
 
+      font-family: sans-serif;
 
+      font-weight: 400;
 
+    }
 
+    .left {
 
+      padding-right: 8pt;
 
+      .base-info-label {
 
+        min-width: 60pt;
 
+        width: 60pt;
 
+      }
 
+    }
 
+    .right {
 
+      padding-left: 8pt;
 
+    }
 
+    .left,
 
+    .right {
 
+      width: 50%;
 
+      margin-bottom: 12pt;
 
+    }
 
+  }
 
+  .bank-info-area {
 
+    font-family: sans-serif;
 
+    font-weight: bold;
 
+    font-size: 11pt;
 
+    margin-bottom: 10pt;
 
+    .bank-info-label {
 
+      font-weight: bold;
 
+      font-family: serif;
 
+      width: 160pt;
 
+      max-width: 160pt;
 
+    }
 
+    .bank-info-value {
 
+      font-family: serif;
 
+      font-weight: normal;
 
+    }
 
+  }
 
+}
 
+
 
+@media print {
 
+  .screen {
 
+    display: none;
 
+  }
 
+  .preview-area,
 
+  .preview-area2 {
 
+    border: none;
 
+    border-color: transparent;
 
+  }
 
+}
 
+@media screen {
 
+  .print.hidden {
 
+    position: fixed;
 
+    right: -10000px;
 
+    bottom: -10000px;
 
+  }
 
+  .pdf-wrap {
 
+    position: relative;
 
+    width: 21cm;
 
+    min-height: 29.69cm;
 
+    margin: 20px auto;
 
+    box-shadow: 1px 1px 2pt 0px $subColor;
 
+  }
 
+  .preview-area,
 
+  .preview-area2 {
 
+    padding: 1cm;
 
+  }
 
+}
 
+</style>

+ 13 - 0
src/pages/purchase-order/index.vue
View File 

@@ -0,0 +1,13 @@
 
+<template>
 
+  <div>
 
+    <router-view />
 
+  </div>
 
+</template>
 
+<script lang="ts">
 
+export default defineComponent({
 
+  name: 'PurchaseOrder',
 
+})
 
+</script>
 
+<script lang="ts" setup>
 
+import { defineComponent } from 'vue'
 
+</script>

+ 38 - 0
src/route.ts
View File 

@@ -0,0 +1,38 @@
 
+import { createRouter, createWebHashHistory } from 'vue-router'
 
+
 
+const router = createRouter({
 
+  history: createWebHashHistory(),
 
+  routes: [
 
+    {
 
+      path: '/',
 
+      redirect: '/purchaseOrder/create/0',
 
+    },
 
+    {
 
+      name: 'purchaseOrder',
 
+      path: '/purchaseOrder',
 
+      component: () => import('@/pages/purchase-order/index.vue'),
 
+      // redirect: 'create',
 
+      children: [
 
+        {
 
+          path: 'create/:id',
 
+          name: 'purchaseOrderEdit',
 
+          component: () => import('@/pages/purchase-order/edit.vue'),
 
+        },
 
+      ],
 
+    },
 
+    {
 
+      path: '/:pathMatch(.*)*',
 
+      name: 'pageNotFound',
 
+      component: () => import('@/pages/404.vue'),
 
+    },
 
+  ],
 
+  scrollBehavior(to, from, savedPosition) {
 
+    if (savedPosition) {
 
+      return savedPosition
 
+    } else {
 
+      return { left: 0, top: 0 }
 
+    }
 
+  },
 
+})
 
+
 
+export default router

+ 7 - 0
src/useCommon.ts
View File 

@@ -0,0 +1,7 @@
 
+
 
+
 
+export default function useCommon() {
 
+
 
+  return {
 
+  }
 
+}

+ 8 - 0
src/utils/index.ts
View File 

@@ -0,0 +1,8 @@
 
+import debounce from 'lodash/debounce'
 
+
 
+export default {
 
+  debounce,
 
+  multiply(value: number, ratio = 100) {
 
+    return parseFloat((value * ratio).toPrecision(12))
 
+  },
 
+}

+ 24 - 0
tsconfig.json
View File 

@@ -0,0 +1,24 @@
 
+{
 
+  "compilerOptions": {
 
+    "allowJs": true,
 
+    "target": "esnext",
 
+    "useDefineForClassFields": true,
 
+    "module": "esnext",
 
+    "moduleResolution": "node",
 
+    "strict": true,
 
+    "jsx": "preserve",
 
+    "sourceMap": true,
 
+    "resolveJsonModule": true,
 
+    "isolatedModules": true,
 
+    "esModuleInterop": true,
 
+    "lib": ["esnext", "dom"],
 
+    "skipLibCheck": true,
 
+    "baseUrl": "./",
 
+    "paths": {
 
+      "@/*": ["src/*"]
 
+    }
 
+  },
 
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
 
+  "exclude": ["node_modules", "dist"],
 
+  "references": [{ "path": "./tsconfig.node.json" }]
 
+}

+ 8 - 0
tsconfig.node.json
View File 

@@ -0,0 +1,8 @@
 
+{
 
+  "compilerOptions": {
 
+    "composite": true,
 
+    "module": "esnext",
 
+    "moduleResolution": "node"
 
+  },
 
+  "include": ["vite.config.ts"]
 
+}

+ 57 - 0
vite.config.ts
View File 

@@ -0,0 +1,57 @@
 
+import { defineConfig } from 'vite'
 
+import vue from '@vitejs/plugin-vue'
 
+import eslintPlugin from 'vite-plugin-eslint'
 
+
 
+// https://vitejs.dev/config/
 
+export default defineConfig(({ mode }) => {
 
+  return {
 
+    base: mode === 'production' ? '/' : '/',
 
+    server: {
 
+      host: '0.0.0.0',
 
+      port: 9527,
 
+      proxy: {
 
+        '/api': {
 
+          target: 'http://zohocrm.promocollection.com.au:9008/',
 
+          changeOrigin: true,
 
+          rewrite: (path) => path.replace(/^\/api/, ''),
 
+        },
 
+        // '/common': {
 
+        //   target: 'http://zohocrm.promocollection.com.au:9008/',
 
+        //   changeOrigin: true,
 
+        // },
 
+        // '/purchase_orders': {
 
+        //   target: 'http://zohocrm.promocollection.com.au:9008/',
 
+        //   changeOrigin: true,
 
+        // },
 
+        // '/Purchase_orders': {
 
+        //   target: 'http://zohocrm.promocollection.com.au:9008/',
 
+        //   changeOrigin: true,
 
+        // },
 
+      },
 
+    },
 
+    resolve: {
 
+      alias: {
 
+        '@': '/src/',
 
+      },
 
+    },
 
+    css: {
 
+      devSourcemap: true,
 
+      preprocessorOptions: {
 
+        scss: {
 
+          additionalData: `@import '@/assets/css/flex-custom.scss';@import '@/assets/css/var.scss';`,
 
+        },
 
+      },
 
+    },
 
+    plugins: [vue(), eslintPlugin()],
 
+    build: {
 
+      // 设置最终构建的浏览器兼容目标
 
+      target: 'es2015',
 
+      // 构建后是否生成 source map 文件
 
+      sourcemap: false,
 
+      // chunk 大小警告的限制（以 kbs 为单位）
 
+      chunkSizeWarningLimit: 1000,
 
+      // 启用/禁用 gzip 压缩大小报告
 
+      reportCompressedSize: false,
 
+    },
 
+  }
 
+})