init commit

.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+.git
+.gitignore
+.DS_Store

.drone.yml

@@ -0,0 +1,55 @@
+kind: pipeline
+type: docker
+# 流水线名称
+name: au_front_admin_cicd
+
+volumes:
+  - name: build_dist
+    host:
+      path: /www/wwwroot/pc_admin_auto
+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/pc_shop_admin.git /drone/src
+    when:
+      branch:
+        - develop
+      event:
+        - push
+  # - name: npm_run_build
+  #   image: node:16.14.0
+  #   volumes:
+  #     - name: build_dist
+  #       path: /drone/src/dist
+  #   commands:
+  #     - pwd
+  #     - echo "master branch web hook"
+  #   when:
+  #     branch:
+  #       - master
+  #     event:
+  #       - push
+
+  - name: npm_run_build
+    image: node:20.14.0-slim
+
+    volumes:
+      - name: build_dist
+        path: /drone/src/build
+    commands:
+      # - npm --registry=https://registry.npmmirror.com i
+      - npm i --no-audit
+      - npm run build-test
+      - rm -rf ./build/*
+      - cp -arf ./dist/* ./build
+      - ls build
+      - ls dist
+    when:
+      branch:
+        - develop
+      event:
+        - push

.editorconfig

@@ -0,0 +1,14 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

.env.development

@@ -0,0 +1,3 @@
+VITE_APP_BASE_API = '/api'
+
+VITE_APP_OSS_PREFIX = '//promocollection.s3.ap-southeast-2.amazonaws.com'

.env.production

@@ -0,0 +1,3 @@
+VITE_APP_BASE_API = '/api'
+
+VITE_APP_OSS_PREFIX = '//promocollection.s3.ap-southeast-2.amazonaws.com'

.env.test

@@ -0,0 +1,3 @@
+VITE_APP_BASE_API = '/api'
+
+VITE_APP_OSS_PREFIX = '//promocollection.s3.ap-southeast-2.amazonaws.com'

.eslintignore

@@ -0,0 +1,4 @@
+build/*.js
+src/assets
+public
+dist

.eslintrc.js

@@ -0,0 +1,45 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    allowImportExportEverywhere: true,
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  extends: ['prettier', 'plugin:vue/recommended', 'eslint:recommended'],
+  rules: {
+    'vue/html-closing-bracket-newline': 0,
+    'vue/html-self-closing': 0,
+    'vue/html-indent': 0,
+    'vue/multi-word-component-names': 0,
+    'vue/attributes-order': 0,
+    'vue/no-v-html': 0,
+    'vue/attribute-hyphenation': 0,
+    'no-console': 0,
+    'no-unused-vars': 1,
+    // 驼峰变量命名
+    camelcase: 0,
+    eqeqeq: 1,
+    'vue/no-mutating-props': 1,
+    'vue/no-unused-components': 1,
+    // vue/require-valid-default-prop 这一项其实应该是2/错误必检, 但是涉及的文件是在太多了, 怕一下子全改会爆炸
+    'vue/require-valid-default-prop': 1,
+    // 这一项真的是管得太宽了, 跟prettier严重冲突
+    "vue/singleline-html-element-content-newline": 0,
+    'no-var': 1,
+    'no-useless-escape': 1,
+    'prefer-const': 1,
+    'object-shorthand': 1,
+    'dot-notation': 1,
+    'spaced-comment': 1, // 双斜杠注释后应紧接空格
+    'no-case-declarations': 1,
+    'arrow-parens': 2,
+  }
+}

.gitignore

@@ -0,0 +1,15 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+package-lock.json
+tests/**/coverage/
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

.prettierignore

@@ -0,0 +1,99 @@
+###
+# Place your Prettier ignore content here
+
+###
+# .gitignore content is duplicated here due to https://github.com/prettier/prettier/issues/8506
+
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp
+
+.eslintrc.js
+README.md

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "singleAttributePerLine": true,
+  "bracketSameLine": true,
+  "jsxSingleQuote": true,
+  "arrowParens": "always"
+}

Dockerfile

@@ -0,0 +1,8 @@
+FROM node:20.14.0-slim
+#ENV CHOKIDAR_USEPOLLING=true
+RUN  mkdir -p  /app
+WORKDIR /app
+COPY package.json .
+RUN npm config set registry https://registry.npmmirror.com
+CMD npm i && npm run dev
+EXPOSE 3333

README.md

@@ -0,0 +1,93 @@
+## Build Setup
+
+```bash
+
+
+# install dependency
+npm install
+
+# develop
+npm run dev
+```
+
+## Build
+
+```bash
+# build for test environment
+npm run build
+
+# build for production environment
+npm run build:prod
+```
+
+## Advanced
+
+```bash
+# preview the release environment effect
+npm run preview
+
+# preview the release environment effect + static resource analysis
+npm run preview -- --report
+
+# code format check
+npm run lint
+
+# code format check and auto fix
+npm run lint -- --fix
+```
+
+## Docker 方案. add by Peter at 20221213.
+
+以上为传统开发方案.
+如果你遇到了 本地需要多个 node 环境 / 自己的项目需要新版 nodejs 又不想来回切 / 统一各平台开发差异 / 不想装 nodejs(环境洁癖) / 甚至本机装不上 nodejs 等场景, 可以考虑 Docker 开发方案.
+
+### 1 安装 Docker 并启动.自行百度/谷歌/bing
+
+### 2 拉取 nodejs 的镜像
+
+或者这步跳过也行, 反正build镜像的时候, docker会自动拉取需要的基础镜像.
+
+```bash
+docker pull node:20.14.0-slim
+```
+
+### 3 cd 到本项目的根目录, 并构建镜像
+
+```bash
+docker build -t au_admin_front:dev .
+```
+
+### 4 基于 步骤 3 构建的镜像 启动 容器
+
+```bash
+docker run -d -p 3333:3333 -v ${PWD}:/app --name au_admin_front au_admin_front:dev
+```
+
+- 后续有项目配置相关更新就重启容器即可
+- 日常开发直接启动容器就能跟传统方案一样开发了(相当于跑了 npm run dev)
+- src 目录有自动关联, 改动代码会有热更新
+
+注: 如果 win 平台跑不起来, 把`${PWD}`换成项目(从盘符起)的绝对路径.
+
+注 2: 如果 win 平台无法正确热更新, 且改完代码后手动刷新浏览器也没变化, 可以考虑把`Dockerfile`文件里面的`CHOKIDAR_USEPOLLING`环境变量行首注释解开.
+
+注 3: 用 docker 方案就不要用你本机的 node.js/npm 来操作项目里面的命令, 如 `npm i`, 要用 docker 容器里面的 npm 来操作
+
+
+## 使用的技术
+- Vue.js 主框架
+- vue-router 主路由框架
+- vuex 状态管理库
+- axios 网络请求库
+- dayjs 时间工具库
+- element-ui 主UI库
+- tailwindcss 样式工具库
+- js-cookie cookie处理工具库
+- loadsh 常用工具函数库
+- mathjs 数字运算处理库
+- vue-i18n i18n国际化语言支持
+- vuedraggable 拖拽功能集成封装库
+- html2canvas jspdf 前端处理生成pdf相关功能库
+- vite及相关工具链 前端构建打包工具
+- eslint及prettier 前端代码质量工具
+- rollup-plugin-visualizer 前端代码打包提及分析优化库

babel.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  presets: [
+    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
+    '@vue/cli-plugin-babel/preset'
+  ],
+  'env': {
+    'development': {
+      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
+      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
+      // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
+      'plugins': ['dynamic-import-node']
+    }
+  }
+}

index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="icon" href="/favicon.ico" />
+    <title>后台管理</title>
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_3200637_5qhsm8n1v2o.css">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

jsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+        "@/*": ["src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}

package.json

@@ -0,0 +1,56 @@
+{
+  "name": "shop_manager",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build-test": "vite build --mode=test",
+    "preview": "vite preview --port 4173",
+    "lint": "eslint --ext .vue,.js,.jsx,.ts,.tsx src",
+    "lint-quiet": "eslint --ext .vue,.js,.jsx,.ts,.tsx src --quiet",
+    "lint-quiet-fix": "eslint --ext .vue,.js,jsx,.ts,.tsx src --quiet --fix",
+    "lint-fix": "eslint --ext .vue,.js,jsx,.ts,.tsx src --fix"
+  },
+  "author": "Peter",
+  "description": "店铺管理后台",
+  "dependencies": {
+    "axios": "^1.7.3",
+    "dayjs": "^1.11.12",
+    "element-ui": "^2.15.14",
+    "image-conversion": "^2.1.1",
+    "js-cookie": "~3.0.5",
+    "jspdf": "^2.5.1",
+    "lodash.clonedeep": "4.5.0",
+    "lodash.debounce": "4.0.8",
+    "normalize.css": "^8.0.1",
+    "nprogress": "0.2.0",
+    "path-browserify": "^1.0.1",
+    "vue": "^2.7.16",
+    "vue-i18n": "~8.28.2",
+    "vue-router": "^3.6.5",
+    "vuedraggable": "^2.24.3",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue2": "^2.3.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-define-config": "^2.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-vue": "^9.26.0",
+    "postcss": "^8.4.41",
+    "prettier": "^3.3.1",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "sass": "^1.77.4",
+    "tailwindcss": "^3.4.8",
+    "vite": "^4.5.3",
+    "vue-eslint-parser": "^9.4.3"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}

postcss.config.js

@@ -0,0 +1,9 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  'plugins': {
+    tailwindcss: {},
+    // to edit target browsers: use "browserslist" field in package.json
+    'autoprefixer': {}
+  }
+}

src/App.vue

@@ -0,0 +1,11 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>

src/api/article.js

@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+export default {
+  getList: (p) =>
+    request({
+      url: '/recommend/list',
+      method: 'get',
+      params: p,
+    }),
+
+  addArticle: (p) =>
+    request({
+      url: '/recommend/add',
+      method: 'post',
+      data: p,
+    }),
+
+  editArticle: (p) =>
+    request({
+      url: '/recommend/edit',
+      method: 'post',
+      data: p,
+    }),
+
+  getDetails: (p) =>
+    request({
+      url: `/recommend/detail/${p.id}`,
+      method: 'get',
+      data: p,
+    }),
+
+  editStatus: (p) =>
+    request({
+      url: '/recommend/status',
+      method: 'post',
+      data: p,
+    }),
+
+  editRank: (p) =>
+    request({
+      url: '/recommend/rank',
+      method: 'post',
+      data: p,
+    }),
+
+  delArticle: (p) =>
+    request({
+      url: `/recommend/delete/${p.id}`,
+      method: 'get',
+      params: p,
+    }),
+}

src/api/common.js

@@ -0,0 +1,33 @@
+import request from '@/utils/request'
+
+export default {
+  imagesUpload: (params) => request.post(`/admin_base/imagesUpload`, params),
+
+  getList: (p) =>
+    request({
+      url: '/site/list',
+      method: 'get',
+      params: p,
+    }),
+
+  addSite: (p) =>
+    request({
+      url: '/site/add',
+      method: 'post',
+      data: p,
+    }),
+
+  editSite: (p) =>
+    request({
+      url: '/site/edit',
+      method: 'post',
+      data: p,
+    }),
+
+  delSite: (p) =>
+    request({
+      url: `/site/delete/${p.id}`,
+      method: 'get',
+      params: p,
+    }),
+}

src/api/index.js

@@ -0,0 +1,5 @@
+import common from './common'
+import user from './user'
+import article from './article'
+
+export { common, user, article }

src/api/user.js

@@ -0,0 +1,34 @@
+import request from '@/utils/request'
+
+const api_module = {
+  login(data) {
+    return request({
+      url: '/admin/login',
+      method: 'post',
+      data
+    })
+  },
+
+  getInfo(token) {
+    return request({
+      url: '/api/info',
+      method: 'get',
+      params: { token }
+    })
+  },
+
+  logout() {
+    return request({
+      url: '/api/logout',
+      method: 'post'
+    })
+  },
+
+  logClear(id) {
+    return request({
+      url: '/admin/clear/' + id,
+      method: 'GET'
+    })
+  }
+}
+export default api_module

src/components/Breadcrumb/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <el-breadcrumb
+    class="app-breadcrumb"
+    separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item
+        v-for="(item, index) in levelList"
+        :key="item.path">
+        <span v-if="index === 0">{{ $t('bread_current') }}</span>
+        <span v-else>{{ $t(item.meta.title) }}</span>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      levelList: null,
+    }
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb()
+    },
+  },
+  created() {
+    this.getBreadcrumb()
+  },
+  methods: {
+    getBreadcrumb() {
+      // only show routes with meta.title
+      let matched = this.$route.matched.filter(
+        (item) => item.meta && item.meta.title
+      )
+      const first = matched[0]
+
+      if (!this.isDashboard(first)) {
+        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' } }].concat(
+          matched
+        )
+      }
+
+      this.levelList = matched.filter(
+        (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
+      )
+    },
+    isDashboard(route) {
+      const name = route && route.name
+      if (!name) {
+        return false
+      }
+      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.app-breadcrumb.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 50px;
+  margin-left: 8px;
+
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+}
+</style>

src/components/GlobalDialog/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <el-dialog :lock-scroll="false" :title="$t(title)" :visible.sync="visible" :before-close="handleClose" :top="top">
+      <el-form :model="formObj" :rules="rules" ref="ruleForm">
+        <el-form-item v-for="(item) in configArr" :key="item.prop" :label="$t(item.label) + ':'" :label-width="(labelWidth+($store.state.app.i18n.locale==='en-US'?50:0))+'px'" :prop="item.prop" 
+        :style="{ marginBottom: marginBottom+'px' }">
+          <span v-if="item.type === 'text'">{{ formObj[item.prop] }}</span>
+          <el-input v-if="item.type === 'input'" v-model="formObj[item.prop]" :type="item.type" clearable ></el-input>
+          <el-input v-else-if="item.type === 'textarea'" type="textarea" v-model="formObj[item.prop]" :rows="5" clearable :readonly="formObj[item.readonlyProp]"></el-input>
+          <el-select
+            v-else-if="item.type === 'select' && item.isShow"
+            clearable
+            filterable
+            v-model="formObj[item.prop]"
+            :placeholder="item.placeholder ? item.placeholder : 'Please select'">
+            <el-option
+              v-for="i in item.selectlist"
+              :key="i.id"
+              :label="i.name"
+              :value="i.name">
+            </el-option>
+          </el-select>
+          <el-checkbox-group 
+            v-else-if="item.type === 'checkbox'" v-model="formObj[item.prop]">
+            <el-checkbox v-for="(i,k) in item.selectlist" :label="k+1" :key="k">{{ i }}</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer" v-if="formObj.hasBtn">
+        <el-button type="primary"  @click="handleSend" :loading="loading">{{$t('btn_submit')}}</el-button>
+        <el-button type="info" @click="handleClose" plain>{{$t('btn_cancel')}}</el-button>
+      </div>
+   </el-dialog>
+</template>
+
+<script>
+
+export default {
+  name:'GlobalDialog',
+  props: {
+    title:{
+      type:String,
+      default: 'Send Email'
+    },
+    sendbtnCext:{
+      type:String,
+      default: 'Send Enquiry'
+    },
+    cancelbtnCext:{
+      type:String,
+      default: 'Cancel'
+    },
+    top:{
+      type:String,
+      default: '5vh'
+    },
+    formObj: {},
+    configArr: [],
+    rules: {},
+    labelWidth: {
+      type: Number,
+      default: 100
+    },
+    marginBottom: {
+      type: Number,
+      default: 20
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+  },
+  data() {
+    return {
+    }
+  },
+  methods:{
+    handleClose(){
+      this.$emit('update:visible', false)
+    },
+    handleSend(){
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+            this.$emit("handleSend");
+        } else {
+          return false;
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+$deep-blue:#004a9b;
+
+::v-deep .el-dialog__header{
+    border-bottom:1px solid #eee;
+}
+::v-deep .el-dialog__body{
+    padding: 10px 20px;
+}
+.el-form .el-select{
+  width: 100%;
+}
+textarea{
+  color:#606266;
+  font-weight: 700;
+}
+.el-dialog__wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+button {
+  background-color: $deep-blue;
+  border-color: $deep-blue;
+  &:hover{
+    background-color: #013269;
+  }
+}
+</style>

src/components/GlobalForm/index.vue

@@ -0,0 +1,617 @@
+<template>
+  <div class="form global-form">
+    <el-form
+      class="form-list"
+      :model="formData"
+      :rules="rules"
+      ref="ruleForm"
+      :label-width="labelWidth"
+      :label-position="labelPosition">
+      <el-form-item
+        v-for="item in comFormConfig"
+        :label="$t(item.label) + ':'"
+        :prop="item.prop"
+        :key="item.label">
+        <!-- 输入框 -->
+        <el-input
+          v-if="item.type === 'input'"
+          v-model="formData[item.prop]"
+          :disabled="item.disabled"
+          :style="{ width: item.width }"
+          @change="item.change && item.change(formData[item.prop])"
+          :placeholder="item.placeholder ? $t(item.placeholder) : ''"
+          clearable
+          :type="item.inputType">
+        </el-input>
+
+        <!-- 密码框 -->
+        <el-input
+          v-if="item.type === 'password'"
+          type="password"
+          v-model="formData[item.prop]"
+          autocomplete="off"
+          :style="{ width: item.width }"
+          @change="item.change && item.change(formData[item.prop])"
+          clearable
+          show-password>
+        </el-input>
+
+        <!-- 文本域 -->
+        <el-input
+          v-if="item.type === 'textarea'"
+          type="textarea"
+          v-model="formData[item.prop]"
+          :disabled="item.disabled"
+          :style="{ width: item.width }"
+          :maxlength="item.maxlength"
+          :rows="item.rows || 5"
+          :show-word-limit="item.showWordLimit"
+          @change="item.change && item.change(formData[item.prop])"
+          :placeholder="item.placeholder ? $t(item.placeholder) : ''">
+        </el-input>
+
+        <!-- 下拉框 -->
+        <el-select
+          v-if="item.type === 'select'"
+          v-model="formData[item.prop]"
+          :disabled="item.disabled"
+          :style="{ width: item.width }"
+          @change="item.change && item.change(formData[item.prop])"
+          clearable
+          filterable
+          :multiple="item.multiple">
+          <el-option
+            v-for="option in item.selectList"
+            :label="
+              option[item.opt_label] || option.name || option.product_code
+            "
+            :value="option[item.opt_value] || option.id"
+            :key="parseInt(option.id)">
+          </el-option>
+        </el-select>
+
+        <!-- 下拉框: selectList为obj类型-->
+        <el-select
+          v-if="item.type === 'selectObj'"
+          v-model="formData[item.prop]"
+          :disabled="item.disabled"
+          :style="{ width: item.width }"
+          @change="item.change && item.change(formData[item.prop])"
+          filterable
+          clearable
+          :multiple="item.multiple">
+          <el-option
+            v-for="(option, key) in item.selectList"
+            :key="parseInt(key)"
+            :label="option"
+            :value="parseInt(key)">
+          </el-option>
+        </el-select>
+
+        <!-- 单选框 -->
+        <el-radio-group
+          v-if="item.type === 'radio'"
+          v-model="formData[item.prop]"
+          :disabled="item.disabled"
+          @change="item.change && item.change(formData[item.prop])">
+          <el-radio
+            v-for="radio in item.radios"
+            :label="radio.label"
+            :key="radio.label">
+             {{ radio.name }}
+          </el-radio>
+        </el-radio-group>
+
+        <!-- 复选框 -->
+        <el-checkbox-group
+          v-if="item.type === 'checkbox'"
+          v-model="formData[item.prop]"
+          :disabled="item.disabled"
+          @change="item.change && item.change(formData[item.prop])">
+          <el-checkbox
+            v-for="checkbox in item.checkboxs"
+            :label="checkbox.label"
+            :key="checkbox.label"></el-checkbox>
+        </el-checkbox-group>
+
+        <!-- 开关 -->
+        <el-switch
+          v-if="item.type === 'switch'"
+          v-model="formData[item.prop]"
+          :disabled="item.disabled"
+          :active-value="item.valBoolean?1:true"
+          :inactive-value="item.valBoolean?0:false"
+          @change="item.change && item.change(formData[item.prop])"></el-switch>
+        <!-- 上传图片 -->
+        <el-upload
+          v-if="item.type === 'uploadImg'"
+          ref="pictureUpload"
+          action=""
+          drag
+          accept=".jpg,.png,.jpeg"
+          class="avatar-uploader"
+          :multiple="false"
+          :show-file-list="false"
+          :before-upload="beforeUpload"
+          :on-change="
+            (file, fileList) => {
+              handleUpload(file, fileList, item.prop, item)
+            }
+          ">
+          <div
+            v-if="formData[item.prop] && !imgUploadFlag"
+            class="avatar-div">
+            <el-image
+              :src="formData[item.prop]"
+              class="avatar-img"></el-image>
+          </div>
+          <el-progress
+            v-else-if="imgUploadFlag"
+            type="circle"
+            :percentage="imgUploadPercent"></el-progress>
+          <i
+            v-else
+            class="el-icon-plus avatar-uploader-icon"></i>
+        </el-upload>
+
+        <!-- 多图上传 -->
+        <el-upload
+          v-if="item.type === 'uploadLimitImg'"
+          ref="pictureUpload"
+          :limit="item.limit ? item.limit : 1"
+          action=""
+          drag
+          accept=".jpg,.png,.jpeg"
+          class="avatar-uploader"
+          list-type="picture-card"
+          :auto-upload="false"
+          :on-change="
+            (file, fileList) => {
+              handleUpload(file, fileList, item.prop, item)
+            }
+          ">
+          <i
+            slot="default"
+            class="el-icon-plus"></i>
+          <div
+            slot="file"
+            slot-scope="{ file }"
+            v-if="formData[item.prop]"
+            class="avatar-div">
+            <img
+              class="el-upload-list__item-thumbnail"
+              :src="file.url"
+              alt="" />
+            <span class="el-upload-list__item-actions">
+              <span
+                class="el-upload-list__item-preview"
+                @click="handlePictureCardPreview(file)">
+                <i class="el-icon-zoom-in"></i>
+              </span>
+              <span
+                class="el-upload-list__item-delete"
+                @click="handleRemove(file, item.prop)">
+                <i class="el-icon-delete"></i>
+              </span>
+            </span>
+          </div>
+        </el-upload>
+        <!-- 文件上传 -->
+        <el-upload
+          v-if="item.type === 'uploadFile'"
+          ref="fileUpload"
+          :limit="item.limit ? item.limit : 1"
+          action=""
+          drag
+          :accept="item.accept ? item.accept : ''"
+          :file-list="files"
+          :auto-upload="false"
+          :on-change="
+            (file, fileList) => {
+              handleUploadFile(file, fileList, item.prop, item)
+            }
+          "
+          :on-remove="
+            (file, fileList) => {
+              handleRemoveFile(file, fileList, item.prop, item)
+            }
+          ">
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">
+            将文件拖到此处，或<em>点击上传</em>
+            <p>{{ item.fileTip }}</p>
+          </div>
+        </el-upload>
+        <el-upload
+          v-if="item.type === 'fileUpload'"
+          class="uploader"
+          action
+          drag
+          :limit="item.limit ? item.limit : 1"
+          :file-list="files"
+          :accept="item.accept ? item.accept : ''"
+          :auto-upload="false"
+          :on-change="
+            (file, fileList) => {
+              handleUploadFile(file, fileList, item.prop, item)
+            }
+          "
+          :on-remove="
+            (file, fileList) => {
+              handleRemoveFile(file, fileList, item.prop, item)
+            }
+          ">
+          <el-button
+            size="small"
+            icon="el-icon-upload2"
+            class="upload-btn">
+            上传文件
+          </el-button>
+        </el-upload>
+
+        <!-- 上传视频 -->
+        <el-upload
+          v-if="item.type === 'uploadVideo'"
+          class="uploader"
+          action
+          drag
+          accept=".mp4"
+          :auto-upload="false"
+          :show-file-list="false"
+          :before-upload="beforeVideoUpload"
+          :on-change="
+            (file, fileList) => {
+              handleUploadVideo(file, fileList, item.prop, item)
+            }
+          ">
+          <div v-if="formData[item.prop] != '' && !videoFlag" class="video-container">
+            <video
+              :src="formData[item.prop]"
+              class="avatar video-avatar"
+              controls="controls">
+              您的浏览器不支持视频播放
+            </video>
+            <i
+            class="el-icon-delete video-delete-icon" @click.stop="handleDeleteVideo(item.prop)"></i>
+          </div>
+          <i
+            v-else-if="formData[item.prop] == '' && !videoFlag"
+            class="el-icon-plus avatar-uploader-icon video-icon"></i>
+          <el-progress
+            v-if="videoFlag == true"
+            type="circle"
+            :percentage="videoUploadPercent"
+            style="margin-top: 30px"></el-progress>
+
+          <div
+            slot="tip"
+            class="el-upload__tip">
+            {{ $t('text_attention') }}
+            <p>1、{{ $t('video_attention') }}</p>
+            <p>2、{{ $t('video_attention2') }}</p>
+            <p>3、{{ $t('video_attention3') }}</p>
+          </div>
+        </el-upload>
+
+        <!-- 级联 -->
+        <el-cascader
+          v-if="item.type === 'cascader'"
+          size="large"
+          v-model="formData[item.prop]"
+          :props="{ value: 'id', label: 'name', children: 'child',...item.multiple }"
+          :show-all-levels="item.showAllLevel"
+          :options="item.options"
+          :style="{ width: (item.width ? item.width : 400)+'px' }"
+          @change="item.change && item.change(formData[item.prop])"
+          clearable>
+        </el-cascader>
+
+        <!-- table -->
+        <input-table
+          v-if="item.type === 'input_table'"
+          :operateWith="'90%'"
+          :tableData="formData[item.prop]"
+          :tableColumns="item.columns"
+          :handleShow="item.handleShow">
+        </input-table>
+        <!-- 富文本 -->
+        <tinymce
+          v-if="item.type === 'tinymce'"
+          v-model="formData[item.prop]"
+          :height="item.height"
+          :width="item.width"
+          style="display: inline-block" />
+
+        <!-- 插槽 -->
+        <template v-if="item.type === 'slot'">
+          <slot :name="item.slotName"></slot>
+        </template>
+        <label
+          class="right-tip"
+          v-if="item.right_tip"
+          >{{ item.right_tip }}</label
+        >
+        <p
+          class="bottom-tip"
+          v-if="item.tip">
+          {{ $t(item.tip) }}
+        </p>
+      </el-form-item>
+      <el-form-item>
+        <slot name="status"></slot>
+      </el-form-item>
+    </el-form>
+    <div
+      :class="centerPos ? 'submit-btn' : 'rightPos'"
+      v-if="isShow">
+      <el-button
+        type="primary"
+        v-debounce="submit"
+        :loading="submitLoading">
+        {{ $t('btn_submit') }}
+      </el-button>
+      <el-button @click.native="close">{{ $t('btn_cancel') }}</el-button>
+    </div>
+    <el-dialog :visible.sync="dialogVisible">
+      <img
+        width="100%"
+        :src="dialogImageUrl"
+        alt="" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { common } from '@/api'
+import InputTable from '@/components/InputTable'
+import Tinymce from '@/components/Tinymce'
+
+export default {
+  name: 'GlobalForm',
+  components: { InputTable, Tinymce },
+  props: {
+    isShow: {
+      type: Boolean,
+      default: true,
+    },
+    // 表单域标签的宽度
+    labelWidth: {
+      type: String,
+      default: '180px',
+    },
+    // 表单域标签的位置
+    labelPosition: {
+      type: String,
+      default: 'right',
+    },
+    // 表单配置
+    formConfig: {
+      type: Array,
+      required: true,
+    },
+    // 表单数据
+    formData: {
+      type: Object,
+      required: true,
+    },
+    // 表单规则
+    rules: {
+      type: Object,
+    },
+    // 级联数据
+    options: {
+      type: Array,
+    },
+    submitLoading: {
+      type: Boolean,
+    },
+    listLoading: {
+      type: Boolean,
+    },
+    filesList: {
+      type: Array,
+    },
+    centerPos: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      files: [],
+      dialogImageUrl: '',
+      dialogVisible: false,
+      imgUploadFlag: false, // 是否显示进度条
+      imgUploadPercent: 0, // 进度条进度
+      videoFlag: false, // 是否显示进度条
+      videoUploadPercent: 0, // 进度条进度
+    }
+  },
+  computed:{
+    comFormConfig(){
+      return this.formConfig.filter(item => item.isShow === undefined || item.isShow === true)
+    }
+  },
+  watch: {
+    filesList(newValue) {
+      this.files = newValue
+    },
+  },
+  methods: {
+    beforeUpload(file) {
+      // 压缩生效，但上传没生效
+      return this.$protoImgCompress(file)
+    },
+    handleUpload(file, fileList, key, item) {
+      // 新增筛选代码
+      if (file.status !== 'ready') return
+      let interval = null
+      if (file.status === 'ready') {
+        this.imgUploadFlag = true
+        interval = setInterval(() => {
+          if (this.imgUploadPercent >= 99) {
+            clearInterval(interval)
+            return
+          }
+          this.imgUploadPercent += 1 // 进度条进度
+        }, 200)
+      }
+      const formData = new FormData()
+      formData.append('file', file.raw)
+      formData.append('type', item.paramsType?item.paramsType:1)
+      common
+        .imagesUpload(formData)
+        .then((response) => {
+          if (response.result.code === 200) {
+            // 进度条恢复到初始状态
+            this.imgUploadPercent = 100
+            setTimeout(() => {
+              this.imgUploadFlag = false
+              this.imgUploadPercent = 0
+            }, 500)
+            this.$set(this.formData, key, response.result.data)
+          } else {
+            this.$message({
+              message: response.result.message,
+              type: 'error',
+              duration: 3000,
+            })
+            return
+          }
+        })
+        .catch((error) => {
+          this.imgUploadFlag = false
+          this.imgUploadPercent = 0
+          clearInterval(interval)
+          this.$message.error(error.response.data.msg)
+        })
+    },
+    handleUploadFile(file, fileList, key, item) {
+      // 新增筛选代码
+      this.fileList = []
+      const formData = new FormData()
+      formData.append('file', file.raw)
+      formData.append('type', 3)
+      common
+        .imagesUpload(formData)
+        .then((response) => {
+          if (response.result.code === 200) {
+            this.$message({
+              message: '文件上传成功!',
+              type: 'success',
+              duration: 3000,
+            })
+            this.$set(this.formData, key, response.result.data)
+            this.$emit('changeFileList', this.files)
+            if (file.status !== 'ready') return
+            this.files.push(file)
+          } else {
+            this.$message({
+              message: response.result.message,
+              type: 'error',
+              duration: 3000,
+            })
+          }
+        })
+        .catch((error) => {
+          this.$message.error(error.response.data.msg)
+        })
+    },
+    beforeVideoUpload(file) {
+      const isMp4 = file.type === 'video/mp4'
+      // 限制文件最大不能超过 500MB
+      const isLt500M = file.size / 1024 / 1024 < 500
+
+      if (!isMp4) {
+        this.$message.error('视频只能是mp4格式!')
+        return false
+      }
+      if (!isLt500M) {
+        this.$message.error('上传头像图片大小不能超过 500MB!')
+        return false
+      }
+    },
+
+    handleUploadVideo(file, fileList, key, item) {
+      // 新增筛选代码
+      if (file.status === 'ready') {
+        this.videoFlag = true
+        this.videoUploadPercent = 0
+        const interval = setInterval(() => {
+          if (this.videoUploadPercent >= 99) {
+            clearInterval(interval)
+            return
+          }
+          this.videoUploadPercent += 1 // 进度条进度
+        }, 200)
+      }
+      const formData = new FormData()
+      formData.append('file', file.raw)
+      formData.append('type', 2)
+      common
+        .imagesUpload(formData)
+        .then((response) => {
+          if (response.result.code === 200) {
+            // 进度条恢复到初始状态
+            this.videoFlag = false
+            this.videoUploadPercent = 0
+            this.$set(this.formData, key, response.result.data)
+          } else {
+            this.$message({
+              message: response.result.message,
+              type: 'error',
+              duration: 3000,
+            })
+          }
+        })
+        .catch((error) => {
+          this.$message.error(error.response.data.msg)
+        })
+    },
+    handleRemoveFile(file, fileList, key, item) {
+      this.$set(this.formData, key, '')
+      this.files = []
+      this.$emit('changeFileList', this.files)
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    handleRemove(file, key) {
+      this.$refs.pictureUpload[0].handleRemove(file)
+      this.$set(this.formData, key, '')
+    },
+    submit() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.$emit('handleSubmit')
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    close() {
+      this.$emit('handleClose')
+      this.$refs.ruleForm.resetFields()
+    },
+    handleDeleteVideo(prop) {
+      this.formData[prop] = '';
+    }
+  },
+}
+</script>
+
+<style scoped>
+.video-container {
+  position: relative;
+  display: inline-block;
+}
+.video-delete-icon {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  color: red;
+  cursor: pointer;
+}
+</style>

src/components/GlobalTable/index.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="table-container">
+    <slot name="files"></slot>
+    <el-table
+      v-loading="listLoading"
+      :data="tableData"
+      :row-key="rowKey"
+      tooltip-effect="dark"
+      style="width: 100%"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      :header-cell-style="{
+        background: '#fafafa',
+        color: '#333',
+        'font-weight': 700,
+      }"
+      :default-sort="{ prop: 'dec_code', order: 'descending' }"
+      @selection-change="handleSelectionChange">
+      <el-table-column
+        v-if="selectionShow"
+        type="selection"
+        width="50"
+        align="center"
+        highlight-current-row
+        fixed
+        :reserve-selection="true"></el-table-column>
+      <el-table-column
+        v-if="serialShow"
+        type="index"
+        width="50"
+        :label="$t('table_index')"></el-table-column>
+      <template v-for="item in tableColumns">
+        <el-table-column
+          :align="item.align"
+          v-if="!item.type"
+          :key="item.prop"
+          :prop="item.prop"
+          :label="$t(item.label)"
+          :formatter="item.formatter"
+          :width="item.width"
+          :min-width="item.minwidth"
+          :sortable="item.sortable">
+        </el-table-column>
+        <el-table-column
+          v-else
+          :key="1 + item.prop"
+          :prop="item.prop"
+          :label="$t(item.label)"
+          :formatter="item.formatter"
+          :width="item.width"
+          :sortable="item.sortable">
+          <template slot-scope="{ row }">
+            <!-- 图片 -->
+            <el-image
+              v-if="item.type == 'img'"
+              :src="row[item.prop]"
+              style="width: 80px; height: 80px" />
+            <!-- 编辑输入框  -->
+            <template v-else-if="item.type == 'input'">
+              <el-input
+                clearable
+                v-model="row[item.prop]"
+                class="edit-input"
+                size="small"
+                v-if="row.edit" />
+              <span v-else>{{ row[item.prop] }}</span>
+              <i
+                class="iconfont icon-bianji"
+                style="cursor: pointer"
+                @click="toggleEdit(row)">
+              </i>
+            </template>
+            <!-- 开关切换 -->
+            <el-switch
+              v-else-if="item.type == 'switch'"
+              @change="toggleStatus(row)"
+              v-model="row[item.prop]"
+              active-color="#13ce66"
+              inactive-color="#ff4949"
+              active-text="ON"
+              inactive-text="OFF"
+              :active-value="1"
+              :inactive-value="0"></el-switch>
+            <!-- popover -->
+            <el-popover
+              v-else-if="item.type == 'popover'"
+              width="300"
+              trigger="hover"
+              :content="row[item.prop]">
+              <div slot="reference" class="ellipsis">{{ row[item.prop] }}</div>
+            </el-popover>
+            <template v-else-if="item.type == 'formatType'">
+              {{ row[item.prop] | formatFilters(item.filterData) }}
+            </template>
+            <template v-else-if="item.type == 'button'">
+              <slot
+                name="button"
+                :row="row"></slot>
+            </template>
+          </template>
+        </el-table-column>
+      </template>
+      <!--region 按钮操作组-->
+      <el-table-column
+        fixed="right"
+        :label="$t('table_operation')"
+        :width="operateWith"
+        v-if="handleShow">
+        <template slot-scope="{ row }">
+          <slot
+            name="operation"
+            :row="row"></slot>
+          <!-- <el-button @click="openDetail(3, row)" type="text" size="medium"
+            >{{ $t('btn_edit') }}</el-button
+          >
+          <el-button
+            type="text"
+            size="medium"
+            style="color: #ff0000"
+            @click="deleteListOpt(row.id)"
+            >{{ $t('btn_delete') }}</el-button
+          > -->
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GlobalTable',
+  filters: {
+    formatFilters(val,filterData){
+      return filterData[val];
+    }
+  },
+  props: {
+    tableData: Array,
+    tableColumns: Array,
+    listLoading: {
+      type: Boolean,
+      default: false,
+    },
+    rowKey: {
+      type: String,
+      default: 'id',
+    },
+    selectionShow: {
+      type: Boolean,
+      default: true,
+    },
+    serialShow: {
+      type: Boolean,
+      default: true,
+    },
+    handleShow: {
+      type: Boolean,
+      default: true,
+    },
+    operate: {
+      // 按钮操作组
+      type: Array,
+      default: () => [],
+    },
+    operateWith: {
+      type: String,
+      default: '160',
+    },
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    // 修改input
+    toggleEdit(row) {
+      if (row.edit) {
+        this.$emit('handleEditRank', row)
+        // category
+        //   .editRank({ id: row.id, rank: +row.rank })
+        //   .then((response) => {});
+      }
+      row.edit = !row.edit
+    },
+    // 切换开关
+    toggleStatus(row) {
+      this.$emit('handleToggleStatus', row)
+      // let status = row.status ? 1 : 0;
+      // category
+      //   .editStatus({ id: row.id, status })
+      //   .then((response) => {
+      //     this._recursiveSetStatus(row, "status", row.status);
+      //   })
+      //   .catch((err) => {
+      //     row.status = !row.status;
+      //   });
+    },
+    // 多行选中
+    handleSelectionChange(val) {
+      this.$emit('handleSelectionChange', val)
+    },
+  },
+}
+</script>
+
+<style scoped>
+.edit-input {
+  display: inline-block;
+  width: 70px;
+}
+.icon-bianji {
+  vertical-align: middle;
+  margin-left: 10px;
+}
+</style>

src/components/GlobalToolBtn/index.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="tools-bar">
+    <div class="btn-left-list">
+      <el-form :inline="true">
+        <el-form-item
+          v-for="(item, index) in fieldList"
+          :label="$t(item.label) + ':'"
+          :key="index"
+          class="btn-left-list-item">
+          <el-input
+            clearable
+            v-if="item.type === 'input'"
+            v-model="item.val"
+            :placeholder="item.placeholder ? $t(item.placeholder) : ''"
+            @keyup.enter.native="handleSearch"></el-input>
+          <el-select
+            v-else-if="item.type === 'select'"
+            clearable
+            filterable
+            v-model="item.val"
+            :placeholder="item.placeholder ? $t(item.placeholder) : ''">
+            <el-option
+              v-for="option in item.selectlist"
+              :key="option.id"
+              :label="option.name"
+              :value="option.id || option.type">
+            </el-option>
+          </el-select>
+          <el-cascader
+            v-else-if="item.type === 'cascader'"
+            v-model="item.val"
+            :options="item.options"
+            :props="defaultProps"
+            :show-all-levels="item.showAllLevel"
+            :placeholder="item.placeholder ? $t(item.placeholder) : ''"
+            :style="{ width: item.width }"
+            style="margin-right: 15px"
+            clearable></el-cascader>
+          <el-cascader
+            v-else-if="item.type === 'cascader2'"
+            v-model="item.val"
+            :options="item.options"
+            :props="defaultPropsForCascader2"
+            :show-all-levels="item.showAllLevel"
+            :style="{ width: item.width }"
+            :placeholder="item.placeholder ? $t(item.placeholder) : ''"
+            style="margin-right: 15px"
+            separator=">"
+            @change="cascader2Change(index)"
+            filterable
+            clearable></el-cascader>
+          <el-date-picker
+            v-else-if="item.type === 'date'"
+            v-model="item.val"
+            clearable
+            value-format="yyyy-MM-dd"
+            type="daterange"
+            align="center"
+            unlink-panels
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :picker-options="pickerOptions">
+          </el-date-picker>
+          <selectTree
+            v-else-if="item.type === 'selectTree'"
+            v-model="item.val"
+            :list="item.selectlist"></selectTree>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            v-if="searchBtnShow"
+            type="primary"
+            v-debounce="handleSearch">
+            {{ $t('btn_query') }}
+          </el-button>
+          <el-button
+            v-if="resetBtnShow"
+            @click.native="handleClearSearchVal">
+            {{ $t('btn_reset') }}
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <slot name="BtnOther"></slot>
+      <p>
+        <el-button
+          v-if="addBtnShow"
+          type="primary"
+          @click="handleCreate">
+          + {{ $t('btn_new') }}
+        </el-button>
+        <el-button
+          v-if="delBtnShow"
+          type="primary"
+          @click="handleDelSelection">
+          {{ $t('btn_delete_mult') }}
+        </el-button>
+        <slot name="btnList"></slot>
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+import SelectTree from '@/components/SelectTree'
+
+export default {
+  name: 'GlobalToolBtn',
+  components: {
+    SelectTree,
+  },
+  props: {
+    fieldList: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+    searchBtnShow: {
+      type: Boolean,
+      default: true,
+    },
+    resetBtnShow: {
+      type: Boolean,
+      default: true,
+    },
+    addBtnShow: {
+      type: Boolean,
+      default: true,
+    },
+    delBtnShow: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      defaultProps: {
+        value: 'id',
+        label: 'name',
+        children: 'children',
+        expandTrigger: 'hover',
+      },
+      // 类型2的级联选择参数
+      defaultPropsForCascader2: {
+        value: 'id',
+        label: 'name',
+        children: 'children',
+        expandTrigger: 'hover',
+        // emitPath: false,
+        checkStrictly: true,
+      },
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+              picker.$emit('pick', [start, end])
+            },
+          },
+          {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+              picker.$emit('pick', [start, end])
+            },
+          },
+          {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+              picker.$emit('pick', [start, end])
+            },
+          },
+        ],
+      },
+    }
+  },
+  methods: {
+    handleSearch() {
+      this.$emit('handleSearch')
+    },
+    handleClearSearchVal() {
+      this.$emit('handleClearSearchVal')
+    },
+    handleCreate() {
+      this.$emit('handleCreate')
+    },
+    handleDelSelection() {
+      this.$emit('handleDelSelection')
+    },
+    cascader2Change(index) {
+      const target = this.fieldList[index].val
+      if (!target || target.length < 2) {
+        this.$emit('resetCascader2')
+      }
+    },
+  },
+}
+</script>
+<style lang="scss"></style>

src/components/Hamburger/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <div
+    style="padding: 0 15px"
+    @click="toggleClick">
+    <svg
+      :class="{ 'is-active': isActive }"
+      class="hamburger"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width="64"
+      height="64">
+      <path
+        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Hamburger',
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    toggleClick() {
+      this.$emit('toggleClick')
+    },
+  },
+}
+</script>
+
+<style scoped>
+.hamburger {
+  display: inline-block;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
+}
+
+.hamburger.is-active {
+  transform: rotate(180deg);
+}
+</style>

src/components/ImageUpload/index.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="com-image-upload">
+    <draggable
+      v-model="imageList"
+      draggable=".image-item"
+      @end="end"
+      class="flex items-start flex-wrap">
+      <div
+        v-for="(item, index) in imageList"
+        :key="item.uid || index"
+        class="image-item flex items-center"
+        :style="{ width: width, height: height }">
+        <img
+          :src="item.url"
+          alt=""
+          class="" />
+        <div class="action-area flex items-center justify-center">
+          <!-- 预览 -->
+          <span
+            v-if="!disablePreview"
+            class="action-icon"
+            @click="handlePictureCardPreview(item)">
+            <i class="el-icon-zoom-in"></i>
+          </span>
+          <!-- 删除 -->
+          <span
+            class="action-icon"
+            @click="handleRemove(index)">
+            <i class="el-icon-delete"></i>
+          </span>
+        </div>
+      </div>
+      <el-progress
+        v-show="loading"
+        type="circle"
+        :percentage="uploadPercent"
+        :width="Number(width.slice(0, width.length - 2))"
+        style="margin: 8px"></el-progress>
+      <div
+        class="upload-wrap"
+        :class="{ hide: loading || imageList.length >= max }"
+        :style="{ width: width, height: height }">
+        <el-upload
+          ref="pictureUpload"
+          :multiple="true"
+          :limit="max"
+          action=""
+          drag
+          accept=".jpg,.png,.jpeg"
+          class="custom-upload-item"
+          list-type="picture-card"
+          :file-list="imageList"
+          :show-file-list="false"
+          :auto-upload="false"
+          :on-remove="handleRemove"
+          :on-preview="handlePictureCardPreview"
+          :on-change="
+            (file, fileList) => {
+              handleUpload(file, fileList)
+            }
+          ">
+          <i class="el-icon-plus avatar-uploader-icon"></i>
+        </el-upload>
+      </div>
+    </draggable>
+
+    <el-dialog :visible.sync="imageDialogVisible">
+      <img
+        width="100%"
+        :src="imageUrl"
+        alt="" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import { common } from '@/api'
+
+export default {
+  name: 'ImageUpload',
+  components: {
+    draggable,
+  },
+  props: {
+    list: {
+      type: Array,
+      default: () => [],
+    },
+    max: {
+      type: Number,
+      default: 16,
+    },
+    disablePreview: {
+      type: Boolean,
+      default: false,
+    },
+    width: {
+      type: String,
+      default: '150px',
+    },
+    height: {
+      type: String,
+      default: '150px',
+    },
+  },
+  data() {
+    return {
+      // 组件内部数据.
+      imageList: [],
+      loading: false,
+      uploadPercent: 0,
+      imageDialogVisible: false,
+      // 预览大图的url, 每次点击都会更新
+      imageUrl: '',
+    }
+  },
+  computed: {
+    fulled() {
+      return 0
+    },
+  },
+  watch: {
+    list: {
+      deep: true,
+      handler() {
+        this.imageList = JSON.parse(JSON.stringify(this.list))
+      },
+    },
+  },
+  methods: {
+    handleUpload(file, fileList) {
+      this.fileList = []
+
+      if (file.status === 'ready') {
+        this.loading = true
+        const interval = setInterval(() => {
+          if (this.uploadPercent >= 99) {
+            clearInterval(interval)
+            return
+          }
+          this.uploadPercent += 1 // 进度条进度
+        }, 100)
+      }
+
+      const formData = new FormData()
+      fileList.forEach((file) => {
+        formData.append('file', file.raw)
+      })
+      formData.append('type', 1)
+      common
+        .imagesUpload(formData)
+        .then((response) => {
+          if (response.result.code === 200) {
+            this.imageList.push({
+              url: response.result.data,
+              uid: file.uid,
+            })
+
+            this.updateList()
+            return
+          }
+          this.$message({
+            message: response.result.message,
+            type: 'warning',
+          })
+        })
+        .catch((error) => {
+          console.log(error, 'component upload image error')
+          this.$message.error(error.response.data.msg)
+        })
+        .finally(() => {
+          this.loading = false
+          // 进度条恢复到初始状态
+          this.uploadPercent = 0
+        })
+    },
+    handleRemove(index) {
+      this.imageList.splice(index, 1)
+      this.updateList()
+    },
+    handlePictureCardPreview(file) {
+      this.imageUrl = file.url
+      this.imageDialogVisible = true
+    },
+    // 每次更新imageList后手动更新父组件的数据, 不能用watch自动更新, 因为同时要watch prop值更新iamgeList, 同时watch会死循环.
+    // 直接把prop数据绑定到dragable 和 el-upload的话vue和eslint会报错, 也可能造成调试困难
+    updateList() {
+      this.$emit('update:list', JSON.parse(JSON.stringify(this.imageList)))
+    },
+    end() {
+      this.updateList()
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-upload {
+  border-style: solid;
+  width: 100%;
+  height: 100%;
+}
+::v-deep .el-upload-dragger {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.com-image-upload {
+  vertical-align: top;
+}
+.image-item {
+  overflow: hidden;
+  position: relative;
+  border: 1px solid #c0ccda;
+  border-radius: 6px;
+  margin-right: 8px;
+  margin-bottom: 2px;
+  img {
+    width: 100%;
+  }
+  &:hover {
+    .action-area {
+      display: flex;
+    }
+  }
+  .action-area {
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    display: none;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: #fff;
+    font-size: 32px;
+  }
+  .action-icon {
+    cursor: pointer;
+    & + .action-icon {
+      margin-left: 16px;
+    }
+  }
+}
+.upload-wrap {
+  display: inline-block;
+  position: relative;
+  margin-bottom: 2px;
+  &.hide {
+    display: none;
+  }
+}
+.custom-upload-item {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/InputTable/index.vue

@@ -0,0 +1,377 @@
+<template>
+  <div class="component-input-table">
+    <el-table
+      ref="el-table"
+      :data="tableData"
+      tooltip-effect="dark"
+      :style="{ width: operateWith }"
+      row-key="id"
+      :class="{ moveCss: isRowSort }"
+      border
+      :header-cell-style="{ color: '#333' }">
+      <el-table-column
+        align="center"
+        v-if="serialShow"
+        type="index"
+        width="50"
+        label="#">
+      </el-table-column>
+      <template v-for="item in tableColumns">
+        <el-table-column
+          align="center"
+          v-if="!item.type"
+          :key="item.prop"
+          :prop="item.prop"
+          :label="$t(item.label)"
+          :formatter="item.formatter"
+          :width="item.width"
+          :sortable="item.sortable"
+          show-overflow-tooltip></el-table-column>
+        <el-table-column
+          align="center"
+          v-else-if="item.type === 'setupPrice'"
+          :key="item.prop[0]"
+          :prop="item.prop[0]"
+          :label="$t(item.label)"
+          :formatter="item.formatter"
+          :width="item.width"
+          :sortable="item.sortable">
+          <template #default="{ row }">
+            <el-input
+              @blur="(e) => convertInputNumber(e, row, item.prop, 0)"
+              v-model="row[item.prop[0]]"
+              type="number"
+              :placeholder="$t('text_please_input')"
+              size="mini"
+              min="0"
+              :style="`width:${
+                parseInt(item.width) - 140
+              }px;margin-right: 9px`"></el-input>
+
+            <el-select
+              size="mini"
+              style="width: 110px"
+              :placeholder="$t('text_please_select')"
+              v-model="row[item.prop[1]]">
+              <el-option
+                v-for="option in setupList"
+                :key="option.id"
+                :label="option.name"
+                :value="option.id">
+                {{ option.name }}
+              </el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          v-else-if="item.type"
+          :key="item.prop"
+          :prop="item.prop"
+          :label="$t(item.label)"
+          :formatter="item.formatter"
+          :width="item.width"
+          :sortable="item.sortable">
+          <template #default="{ row, $index }">
+            <!-- 编辑输入框  -->
+            <el-input
+              :disabled="item.disabledCondition && item.disabledCondition(row)"
+              v-if="item.type == 'input'"
+              v-model="row[item.prop]"
+              class="edit-input"
+              size="mini"
+              :placeholder="$t('text_please_input')"
+              :oninput="item.oninput" />
+            <!-- 编辑输入框组  -->
+            <el-form
+              label-width="auto"
+              v-if="item.type == 'inputArr'">
+              <el-form-item
+                v-for="i in row[item.prop]"
+                :key="i.id">
+                <el-input
+                  v-model="i.stock"
+                  class="edit-input"
+                  size="mini"
+                  :placeholder="$t('text_please_input')"
+                  :oninput="item.oninput"
+                  :disabled="
+                    item.disabledCondition && item.disabledCondition(row)
+                  " />
+              </el-form-item>
+            </el-form>
+
+            <!-- 下拉框 -->
+            <el-select
+              v-if="item.type === 'select'"
+              v-model="row[item.prop]"
+              :style="{ width: item.width }"
+              @change="item.change && item.change(row[item.prop])"
+              filterable
+              clearable
+              size="mini"
+              :multiple="item.multiple">
+              <el-option
+                v-for="option in item.selectList"
+                :label="option[item.opt_label]"
+                :value="option[item.opt_value]"
+                :key="parseInt(option.id)">
+                <template #default>
+                  <div style="display: flex; align-items: center;">
+                    <img
+                    v-if="option.img"
+                    :src="option.img"
+                    style="width: 20px; height: 20px; margin-right: 8px;">
+                    {{ option[item.opt_label] }}
+                  </div>
+                </template>
+              </el-option>
+            </el-select>
+            <!-- 下拉对象框 -->
+            <el-select
+              v-if="item.type === 'selectObj'"
+              v-model="row[item.prop]"
+              :style="{ width: item.width }"
+              @change="item.change && item.change(row[item.prop])"
+              filterable
+              clearable
+              size="mini"
+              :multiple="item.multiple">
+              <el-option
+                v-for="(i, key) in item.selectList"
+                :key="parseInt(key)"
+                :label="i"
+                :value="parseInt(key)">
+              </el-option>
+            </el-select>
+            <!-- 时间输入框  -->
+            <el-date-picker
+              v-if="item.type == 'date'"
+              v-model="row[item.prop]"
+              class="date-input"
+              type="date"
+              placeholder="选择日期"
+              size="mini"
+              :disabled="item.disabledCondition && item.disabledCondition(row)">
+            </el-date-picker>
+            <!-- 图片上传 -->
+            <el-upload
+              v-if="item.type === 'uploadImg'"
+              ref="pictureUpload"
+              action=""
+              drag
+              :accept="item.accept ? item.accept : '.jpg,.png,.jpeg'"
+              class="avatar-uploader uploadImg flex items-center justify-center"
+              :auto-upload="false"
+              :multiple="false"
+              :show-file-list="false"
+              :on-change="
+                (file, fileList) =>
+                  handleUpload(file, fileList, item.prop, item, $index,item.uploadType)
+              ">
+              <div
+                v-if="row[item.prop]"
+                class="avatar-div flex items-center justify-center">
+                <p v-if="item.showUrl">{{ row[item.prop] }}</p>
+                <el-image 
+                  v-else
+                  style="width: 100px; height: 100px;padding:0;"
+                  :src="row[item.prop]"
+                  class="avatar-img"></el-image>
+              </div>
+              <i
+                v-else
+                class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+            <!-- 价格输入框 -->
+            <el-input
+              @blur="(e) => convertInputNumber(e, row, item.prop)"
+              v-if="item.type === 'price'"
+              v-model="row[item.prop]"
+              type="number"
+              :placeholder="$t('text_please_input')"
+              size="mini"
+              min="0.01"
+              :style="
+                `width:${parseInt(item.width) - 21}px` || 'width:79px;'
+              "></el-input>
+          </template>
+        </el-table-column>
+      </template>
+      <el-table-column
+        align="center"
+        fixed="right"
+        :label="$t('table_status')"
+        v-if="switchArrShow">
+        <template #default="scope">
+          <slot
+            name="switchArr"
+            :row="scope.row"
+            :index="scope.$index"></slot>
+        </template>
+      </el-table-column>
+      <!--region 按钮操作组-->
+      <el-table-column
+        align="center"
+        fixed="right"
+        :label="$t('table_operation')"
+        v-if="handleShow">
+        <template #default="scope">
+          <slot
+            name="operation"
+            :row="scope.row"
+            :index="scope.$index"></slot>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { common } from '@/api'
+import Sortable from 'sortablejs'
+export default {
+  props: {
+    tableData: {
+      type: Array,
+      default: () => [],
+    },
+    tableColumns: {
+      type: Array,
+      default: () => [],
+    },
+    operateWith: {
+      type: String,
+      default: '100%',
+    },
+    serialShow: {
+      type: Boolean,
+      default: false,
+    },
+    handleShow: {
+      type: Boolean,
+      default: true,
+    },
+    switchArrShow: {
+      type: Boolean,
+      default: false,
+    },
+    setupPriceConfigList: {
+      type: Array,
+      default: () => {
+        return [{}]
+      },
+    },
+    isRowSort: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      initData:[]
+    }
+  },
+  computed: {
+    setupList() {
+      return this.setupPriceConfigList
+    },
+  },
+  watch: {
+    tableData: {
+      handler(val) {
+        this.initData = val
+      },
+      deep: true // 深度监听
+    }
+  },
+  mounted() {
+    if (this.isRowSort){
+      this.initSort()
+    }
+  },
+  methods: {
+    handleUpload(file, fileList, key, item, index, uploadType=3) {
+      // 新增筛选代码
+      if (file.status !== 'ready') return
+      const formData = new FormData()
+      formData.append('file', file.raw)
+      formData.append('type', uploadType)
+      common
+        .imagesUpload(formData)
+        .then((response) => {
+          if (response.result.code === 200) {
+            this.$emit('getTableData', response.result.data, index)
+          } else {
+            this.$message({
+              message: response.result.message,
+              type: 'warning',
+              duration: 4000,
+            })
+          }
+        })
+        .catch((error) => {
+          this.$message.error(error.response.data.msg)
+        })
+    },
+    convertInputNumber(e, obj, key, minValue = 0) {
+      // 允许留空, 无视空字符串
+      if (e.target.value === '') return
+      let value = Number(e.target.value) || minValue
+
+      // 价格不会有负数
+      value = value > 0 ? value : 0
+
+      const result = Math.round((value * 100).toPrecision(12)) / 100
+
+      obj[key] = result
+      e.target.value = result
+    },
+    initSort() {
+        const el = this.$refs['el-table'].$el.querySelector('.el-table__body-wrapper > table > tbody')
+        new Sortable(el, {
+          animation: 150, // 动画
+          onEnd: (evt) => {
+            const curRow = this.initData.splice(evt.oldIndex, 1)[0]
+            this.initData.splice(evt.newIndex, 0, curRow)
+            // this.$emit('rowSort', this.initData)
+          }
+        })
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+.component-input-table {
+  input[type='number'] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+    &:hover {
+      -moz-appearance: textfield;
+      appearance: textfield;
+      &::-webkit-inner-spin-button,
+      &::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+    }
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+  .el-form-item {
+    margin-bottom: 0;
+  }
+  .avatar-uploader-icon{
+    width: 100px;
+    height: 100px;
+    line-height: 100px;
+  }
+}
+.moveCss{
+  cursor: move;
+}
+</style>

src/components/MultipleSelectTree/index.vue

@@ -0,0 +1,312 @@
+<template>
+  <div>
+    <div
+      v-show="isShowSelect"
+      class="mask"
+      @click="isShowSelect = !isShowSelect" />
+    <el-popover
+      v-model="isShowSelect"
+      placement="bottom-start"
+      :width="width"
+      trigger="manual"
+      style="padding: 12px 0"
+      @hide="popoverHide">
+      <el-tree
+        ref="tree"
+        class="common-tree"
+        :style="style"
+        :data="data"
+        :props="defaultProps"
+        :show-checkbox="multiple"
+        :node-key="nodeKey"
+        :check-strictly="checkStrictly"
+        :expand-on-click-node="true"
+        :check-on-click-node="multiple"
+        :highlight-current="true"
+        @node-click="handleNodeClick"
+        @check-change="handleCheckChange" />
+      <el-select
+        slot="reference"
+        ref="select"
+        v-model="selectedData"
+        :style="selectStyle"
+        :size="size"
+        :multiple="multiple"
+        :clearable="clearable"
+        :collapse-tags="collapseTags"
+        class="tree-select"
+        @click.native="isShowSelect = !isShowSelect"
+        @remove-tag="removeSelectedNodes"
+        @clear="removeSelectedNode"
+        @change="changeSelectedNodes">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value" />
+      </el-select>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    // 树结构数据
+    data: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+    defaultProps: {
+      type: Object,
+      default() {
+        return {
+          children: 'children',
+          label: 'name',
+        }
+      },
+    },
+    // 配置是否可多选
+    multiple: {
+      type: Boolean,
+      default() {
+        return false
+      },
+    },
+    // 配置是否可清空选择
+    clearable: {
+      type: Boolean,
+      default() {
+        return false
+      },
+    },
+    // 配置多选时是否将选中值按文字的形式展示
+    collapseTags: {
+      type: Boolean,
+      default() {
+        return false
+      },
+    },
+    nodeKey: {
+      type: String,
+      default() {
+        return 'id'
+      },
+    },
+    // 显示复选框情况下，是否严格遵循父子不互相关联
+    checkStrictly: {
+      type: Boolean,
+      default() {
+        return false
+      },
+    },
+    // 默认选中的节点key数组
+    checkedKeys: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+    size: {
+      type: String,
+      default() {
+        return ''
+      },
+    },
+    width: {
+      type: Number,
+      default() {
+        return 500
+      },
+    },
+    height: {
+      type: Number,
+      default() {
+        return 300
+      },
+    },
+  },
+  data() {
+    return {
+      isShowSelect: false, // 是否显示树状选择器
+      options: [],
+      selectedData: [], // 选中的节点
+      style:
+        'width:' + (this.width - 24) + 'px;' + 'height:' + this.height + 'px;',
+      selectStyle: 'width:' + (this.width + 24) + 'px;',
+      checkedIds: [],
+      checkedData: [],
+    }
+  },
+  watch: {
+    isShowSelect(val) {
+      // 隐藏select自带的下拉框
+      this.$refs.select.blur()
+    },
+    checkedKeys: {
+      handler(val) {
+        // console.log('checkedKeys', val)
+        if (!val) return
+        this.checkedKeys = val
+        this.initCheckedData()
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.initCheckedData()
+  },
+  methods: {
+    // 单选时点击tree节点，设置select选项
+    setSelectOption(node) {
+      const tmpMap = {}
+      tmpMap.value = node.key
+      tmpMap.label = node.label
+      this.options = []
+      this.options.push(tmpMap)
+      this.selectedData = node.key
+    },
+    // 单选，选中传进来的节点
+    checkSelectedNode(checkedKeys) {
+      // console.log("checkedKeys",checkedKeys);
+      const item = checkedKeys[0]
+      this.$refs.tree.setCurrentKey(item)
+      const node = this.$refs.tree.getNode(item)
+      this.setSelectOption(node)
+    },
+    // 多选，勾选上传进来的节点
+    checkSelectedNodes(checkedKeys) {
+      // console.log("checkedKeys", checkedKeys);
+      // 优化select回显显示 有个延迟的效果
+      const that = this
+      setTimeout(function () {
+        that.$refs.tree.setCheckedKeys(checkedKeys)
+      }, 10)
+    },
+    // 单选，清空选中
+    clearSelectedNode() {
+      this.selectedData = []
+      this.$refs.tree.setCurrentKey(null)
+    },
+    // 多选，清空所有勾选
+    clearSelectedNodes() {
+      const checkedKeys = this.$refs.tree.getCheckedKeys() // 所有被选中的节点的 key 所组成的数组数据
+      for (let i = 0; i < checkedKeys.length; i++) {
+        this.$refs.tree.setChecked(checkedKeys[i], false)
+      }
+    },
+    initCheckedData() {
+      if (this.multiple) {
+        // 多选
+        if (this.checkedKeys.length > 0) {
+          this.checkSelectedNodes(this.checkedKeys)
+        } else {
+          this.clearSelectedNodes()
+        }
+      } else {
+        // 单选
+        if (this.checkedKeys.length > 0) {
+          this.checkSelectedNode(this.checkedKeys)
+        } else {
+          this.clearSelectedNode()
+        }
+      }
+    },
+    popoverHide() {
+      if (this.multiple) {
+        this.checkedIds = this.$refs.tree.getCheckedKeys() // 所有被选中的节点的 key 所组成的数组数据
+        this.checkedData = this.$refs.tree.getCheckedNodes() // 所有被选中的节点所组成的数组数据
+      } else {
+        this.checkedIds = this.$refs.tree.getCurrentKey()
+        this.checkedData = this.$refs.tree.getCurrentNode()
+      }
+      this.$emit('popoverHide', this.checkedIds, this.checkedData)
+    },
+    // 单选，节点被点击时的回调,返回被点击的节点数据
+    handleNodeClick(data, node) {
+      if (!this.multiple) {
+        this.setSelectOption(node)
+        this.isShowSelect = !this.isShowSelect
+        this.$emit('change', this.selectedData)
+      }
+    },
+    // 多选，节点勾选状态发生变化时的回调
+    handleCheckChange() {
+      const checkedKeys = this.$refs.tree.getCheckedKeys() // 所有被选中的节点的 key 所组成的数组数据
+      this.options = checkedKeys.map((item) => {
+        const node = this.$refs.tree.getNode(item) // 所有被选中的节点对应的node
+        const tmpMap = {}
+        tmpMap.value = node.key
+        tmpMap.label = node.label
+        return tmpMap
+      })
+      this.selectedData = this.options.map((item) => {
+        return item.value
+      })
+      this.$emit('change', this.selectedData)
+    },
+    // 多选,删除任一select选项的回调
+    removeSelectedNodes(val) {
+      this.$refs.tree.setChecked(val, false)
+      const node = this.$refs.tree.getNode(val)
+      if (!this.checkStrictly && node.childNodes.length > 0) {
+        this.treeToList(node).map((item) => {
+          if (item.childNodes.length <= 0) {
+            this.$refs.tree.setChecked(item, false)
+          }
+        })
+        this.handleCheckChange()
+      }
+      this.$emit('change', this.selectedData)
+    },
+    treeToList(tree) {
+      let queen = []
+      const out = []
+      queen = queen.concat(tree)
+      while (queen.length) {
+        const first = queen.shift()
+        if (first.childNodes) {
+          queen = queen.concat(first.childNodes)
+        }
+        out.push(first)
+      }
+      return out
+    },
+    // 单选,清空select输入框的回调
+    removeSelectedNode() {
+      this.clearSelectedNode()
+      this.$emit('change', this.selectedData)
+    },
+    // 选中的select选项改变的回调
+    changeSelectedNodes(selectedData) {
+      // 多选,清空select输入框时，清除树勾选
+      if (this.multiple && selectedData.length <= 0) {
+        this.clearSelectedNodes()
+      }
+      this.$emit('change', this.selectedData)
+    },
+  },
+}
+</script>
+
+<style scoped>
+.mask {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  z-index: 11;
+}
+
+.common-tree {
+  overflow: auto;
+}
+
+.tree-select {
+  z-index: 111;
+}
+</style>

src/components/Pagination/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div
+    :class="{ hidden: hidden }"
+    class="pagination-container">
+    <slot name="slot"></slot>
+    <el-pagination
+      :background="background"
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :total="total"
+      v-bind="$attrs"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Pagination',
+  props: {
+    total: {
+      required: true,
+      type: Number,
+    },
+    page: {
+      type: Number,
+      default: 0,
+    },
+    limit: {
+      type: Number,
+      default: 10,
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 50, 100]
+      },
+    },
+    layout: {
+      type: String,
+      default: 'total, sizes, prev, pager, next, jumper',
+    },
+    background: {
+      type: Boolean,
+      default: true,
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true,
+    },
+    hidden: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      },
+    },
+    pageSize: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      },
+    },
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.$emit('pagination', { page: this.currentPage, limit: val })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    },
+    handleCurrentChange(val) {
+      this.$emit('pagination', { page: val, limit: this.pageSize })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.pagination-container {
+  background: #fff;
+  display: flex;
+  justify-content: flex-end;
+  border: $_border;
+  padding: 10px;
+}
+.pagination-container.hidden {
+  display: none;
+}
+</style>

src/components/PrintTable/index.vue

@@ -0,0 +1,234 @@
+<template>
+  <div>
+    <table class="el-table">
+      <!-- 表首行标题 -->
+      <tr>
+        <th
+          class="el-table__cell is-center"
+          v-for="i in tableColumns"
+          :key="i.label">
+          {{ $t(i.label) }}
+        </th>
+        <th class="el-table__cell is-center">{{ $t('table_operation') }}</th>
+      </tr>
+      <tr 
+        v-for="(item, key) in tableData"
+        :key="key">
+          <td
+            class="el-table__cell is-center cell"
+            v-for="(option, k) in tableColumns"
+            :key="k">
+            <span v-if="option.prop === 'index'">{{ key+1 }}</span>
+            <el-cascader
+              v-model="item[option.prop]"
+              size="mini"
+              v-else-if="option.type === 'cascader'"
+              :options="typeSelect"
+              :props="{ value: 'id', label: 'name', emitPath: false }"
+              :show-all-levels="false"
+              filterable
+              @change="handleChangeCascader($event, item)" />
+            <el-cascader
+                v-model="item[option.prop]"
+                size="mini"
+                v-else-if="option.type=='multiplecascader'"
+                :options="typeAdditionSelect"
+                :props="{ value: 'id', label: 'name', emitPath: false,multiple: true,checkStrictly:false }"
+                :show-all-levels="false"
+                filterable />
+            <div v-else-if="option.label === 'setup' && scence === 'au'">
+              <el-input
+                v-model="item['website_setup'][0]"
+                style="width: 100%"
+                size="mini"
+                disabled />
+              <el-select
+                v-model="item['website_setup'][1]"
+                size="mini"
+                style="margin-top: 4px"
+                disabled>
+                <el-option
+                  v-for="i in setupList"
+                  :key="i.id"
+                  :label="i.name"
+                  :value="i.id">
+                  {{ i.name }}
+                </el-option>
+              </el-select>
+            </div>
+            <el-input
+              v-model="item[option.prop]"
+              size="mini"
+              v-else-if="option.type=='write'" />
+            <el-input
+              v-model="item[option.prop]"
+              size="mini"
+              disabled
+              v-else />
+          </td>
+
+          <td class="el-table__cell is-center">
+            <el-button
+              type="text"
+              size="medium"
+              style="color: #ff0000"
+              @click="deleteOpt(tableData, key)">
+              {{ $t('btn_delete') }}
+            </el-button>
+          </td>
+      </tr>
+      <tr>
+        <td
+          class="el-table__cell is-center"
+          :colspan="tableColumns.length + 1">
+          <el-button
+            type="text"
+            @click="handleAddPrintRowIn(tableData)">
+            + {{ $t('btn_add') }}
+          </el-button>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+import { decoration, addition } from '@/api'
+import { resetSetupID } from '@/utils/price'
+
+export default {
+  props: {
+    tableData: {
+      type: Array,
+      default: () => {
+        return [{}]
+      },
+    },
+    tableColumns: {
+      type: Array,
+      default: () => {
+        return [{}]
+      },
+    },
+    typeSelect: {
+      type: Array,
+      default: () => {
+        return [{}]
+      },
+    },
+    typeAdditionSelect: {
+      type: Array,
+      default: () => {
+        return [{}]
+      },
+    },
+    isPrintTable: {
+      type: Boolean,
+      default: true,
+    },
+    setupPriceConfigList: {
+      type: Array,
+      default: () => {
+        return [{}]
+      },
+    },
+    scence: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      part_config_obj: {
+        website_setup: ['',null],
+        website_qty1: '',
+        website_qty2: '',
+        website_qty3: '',
+        website_qty4: '',
+        website_qty5: '',
+        website_qty6: '',
+        website_qty7: '',
+        website_qty8: '',
+      },
+    }
+  },
+  computed: {
+    setupList() {
+      return this.setupPriceConfigList
+    }
+  },
+  created() {
+    if (this.scence === 'au') {
+      this.part_config_obj.website_setup = ['', 7]
+    }
+  },
+  methods: {
+    handleAddPrintRow() {
+      this.$emit('handleAddPrintRow')
+    },
+    setItem(i, response) {
+      if (this.scence === 'au') {
+        // 打印code中的max_color传值过来
+        response.result.max_color_count && this.$set(i, 'max_color', response.result.max_color_count);
+        i.website_setup = [
+          response.result.website_setup,
+          resetSetupID(response.result.website_setup_id),
+        ]
+      } else {
+        i.website_setup = response.result.website_setup
+      }
+      i.website_qty1 = response.result.website_qty1
+      i.website_qty2 = response.result.website_qty2
+      i.website_qty3 = response.result.website_qty3
+      i.website_qty4 = response.result.website_qty4
+      i.website_qty5 = response.result.website_qty5
+      i.website_qty6 = response.result.website_qty6
+      i.website_qty7 = response.result.website_qty7
+      i.website_qty8 = response.result.website_qty8
+    },
+    handleChangeCascader(id, i) {
+      if (this.isPrintTable) {
+        decoration.getDetails({ id }).then((response) => {
+          this.setItem(i, response)
+        })
+      } else {
+        addition.getDetails({ id }).then((response) => {
+          this.setItem(i, response)
+        })
+      }
+    },
+    handleAddPrintRowIn(arr) {
+      const tempObj = {
+        id: '',
+        ...JSON.parse(JSON.stringify(this.part_config_obj)),
+      }
+      arr.push(tempObj)
+    },
+    deleteOpt(arr, key) {
+      if (arr.length === 1) {
+        this.$message({
+          message: '无法删除，至少保留一条数据',
+          type: 'error',
+          duration: 3000,
+        })
+        return
+      }
+      arr.splice(key, 1)
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+table {
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+
+tr,
+td,
+th {
+  border: 1px solid #ebeef5;
+  text-align: center;
+}
+</style>

src/components/QrCode/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <el-dialog :visible="dialogVisible" width="30%" :title="title" @update:visible="updateVisible">
+    <div class="qrcode">
+      <canvas ref="qrcodeCanvas"></canvas>
+      <div>
+        <el-button @click="copyQRCode">
+          {{ $t('btn_copy') }}
+        </el-button>
+        <el-button type="primary" @click="downloadQRCode">
+          {{ $t('btn_download') }}
+        </el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import QRcode from "qrcode";
+import html2canvas from 'html2canvas'
+
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    name: {
+      type: String,
+      default: 'qrcode'
+    },
+    info: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      dialogVisible: this.visible
+    };
+  },
+  watch: {
+    visible(newValue) {
+      this.dialogVisible = newValue;
+      if(newValue){
+        this.generateQRCode();
+      }
+    }
+  },
+  methods: {
+    generateQRCode() {
+      this.$nextTick(() => {
+        QRcode.toCanvas(
+          this.$refs.qrcodeCanvas,
+          this.info,
+          {
+            width: 200,
+          },
+          (error) => {
+            if (error) console.error(error);
+          }
+        );
+      });
+    },
+    copyQRCode() {
+      html2canvas(this.$refs.qrcodeCanvas).then(canvas => {
+        canvas.toBlob(blob => {
+          const item = new ClipboardItem({ 'image/png': blob });
+          navigator.clipboard.write([item]).then(() => {
+            this.$notify({
+              title: 'Success',
+              message: 'QR code copied successfully',
+              type: 'success',
+              duration: 3000,
+            });
+          }).catch(() => {
+            alert('Copy failed. Please copy the image manually.');
+          });
+        }, 'image/png');
+      });
+    },
+    downloadQRCode() {
+      html2canvas(this.$refs.qrcodeCanvas).then(canvas => {
+        const link = document.createElement('a');
+        link.href = canvas.toDataURL('image/png');
+        link.download = `${this.name}.png`;
+        link.click();
+      });
+    },
+    updateVisible(newValue) {
+      this.$emit('update:visible', newValue);
+    }
+  }
+};
+</script>
+
+<style scoped>
+::v-deep .el-dialog__body {
+  padding-top: 0;
+}
+.qrcode {
+  text-align: center;
+}
+</style>

src/components/SIdentify/index.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="s-canvas">
+    <canvas
+      id="s-canvas"
+      :width="contentWidth"
+      :height="contentHeight"></canvas>
+  </div>
+</template>
+<script>
+export default {
+  name: 'SIdentify',
+  props: {
+    identifyCode: {
+      type: String,
+      default: '56h3',
+    },
+    fontSizeMin: {
+      type: Number,
+      default: 35,
+    },
+    fontSizeMax: {
+      type: Number,
+      default: 35,
+    },
+    backgroundColorMin: {
+      type: Number,
+      default: 180,
+    },
+    backgroundColorMax: {
+      type: Number,
+      default: 240,
+    },
+    colorMin: {
+      type: Number,
+      default: 50,
+    },
+    colorMax: {
+      type: Number,
+      default: 160,
+    },
+    lineColorMin: {
+      type: Number,
+      default: 100,
+    },
+    lineColorMax: {
+      type: Number,
+      default: 200,
+    },
+    dotColorMin: {
+      type: Number,
+      default: 0,
+    },
+    dotColorMax: {
+      type: Number,
+      default: 255,
+    },
+    contentWidth: {
+      type: Number,
+      default: 120,
+    },
+    contentHeight: {
+      type: Number,
+      default: 50,
+    },
+  },
+  watch: {
+    identifyCode() {
+      this.drawPic()
+    },
+  },
+  mounted() {
+    this.drawPic()
+  },
+  methods: {
+    // 生成一个随机数
+    randomNum(min, max) {
+      return Math.floor(Math.random() * (max - min) + min)
+    },
+    // 生成一个随机的颜色
+    randomColor(min, max) {
+      const r = this.randomNum(min, max)
+      const g = this.randomNum(min, max)
+      const b = this.randomNum(min, max)
+      return 'rgb(' + r + ',' + g + ',' + b + ')'
+    },
+    transparent() {
+      return 'rgb(255,255,255)'
+    },
+    drawPic() {
+      const canvas = document.getElementById('s-canvas')
+      const ctx = canvas.getContext('2d')
+      ctx.textBaseline = 'bottom'
+      // 绘制背景
+      // ctx.fillStyle = this.randomColor(
+      // this.backgroundColorMin,
+      // this.backgroundColorMax
+      // );
+      ctx.fillStyle = this.transparent()
+      ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
+      // 绘制文字
+      for (let i = 0; i < this.identifyCode.length; i++) {
+        this.drawText(ctx, this.identifyCode[i], i)
+      }
+      // 绘制背景
+      // this.drawLine(ctx)
+      // this.drawDot(ctx)
+    },
+    drawText(ctx, txt, i) {
+      ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
+      ctx.font =
+        this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
+      const x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
+      const y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
+      const deg = this.randomNum(-10, 10)
+      // 修改坐标原点和旋转角度
+      ctx.translate(x, y)
+      ctx.rotate((deg * Math.PI) / 180)
+      ctx.fillText(txt, 0, 0)
+      // 恢复坐标原点和旋转角度
+      ctx.rotate((-deg * Math.PI) / 180)
+      ctx.translate(-x, -y)
+    },
+    drawLine(ctx) {
+      // 绘制干扰线
+      for (let i = 0; i < 8; i++) {
+        ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)
+        ctx.beginPath()
+        ctx.moveTo(
+          this.randomNum(0, this.contentWidth),
+          this.randomNum(0, this.contentHeight)
+        )
+        ctx.lineTo(
+          this.randomNum(0, this.contentWidth),
+          this.randomNum(0, this.contentHeight)
+        )
+        ctx.stroke()
+      }
+    },
+    drawDot(ctx) {
+      // 绘制干扰点
+      for (let i = 0; i < 100; i++) {
+        ctx.fillStyle = this.randomColor(0, 255)
+        ctx.beginPath()
+        ctx.arc(
+          this.randomNum(0, this.contentWidth),
+          this.randomNum(0, this.contentHeight),
+          1,
+          0,
+          2 * Math.PI
+        )
+        ctx.fill()
+      }
+    },
+  },
+}
+</script>

src/components/SelectTree/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <div style="display: inline-block">
+    <!-- {{ typeof selectVal }}{{ selectVal }} -->
+    <el-select
+      :style="{ width: width + 'px' }"
+      clearable
+      @clear="handleClear"
+      v-model="selectVal"
+      :disabled="disabledFlag"
+      :placeholder="$t('text_please_select')"
+      ref="select">
+      <!-- 设置一个input框用作模糊搜索选项功能 -->
+      <el-input
+        clearable
+        style="padding: 0 5px"
+        class="input"
+        placeholder=""
+        prefix-icon="el-icon-search"
+        v-model="treeFilter"></el-input>
+      <!-- 隐藏的下拉选项，选项显示的是汉字label，值是value -->
+      <el-option
+        hidden
+        :key="selectVal"
+        :value="selectVal"
+        :label="selectName">
+      </el-option>
+      <!-- 设置树形控件 -->
+      <el-tree
+        :data="list"
+        :props="defaultProps"
+        @node-click="handleNodeClick"
+        :expand-on-click-node="false"
+        ref="tree"
+        node-key="id"
+        :default-expand-all="true"
+        :filter-node-method="filterNode">
+      </el-tree>
+    </el-select>
+  </div>
+</template>
+<script>
+import { findItemNested } from '@/utils/index'
+
+export default {
+  props: {
+    value: Number, // v-model绑定值
+    width: Number,
+    list: Array,
+    disabledFlag: Boolean,
+  },
+  data() {
+    return {
+      //   selectVal: null,
+      selectName: null, // select框显示的name
+      treeFilter: '', // 搜索框绑定值，用作过滤
+      defaultProps: {
+        children: 'children',
+        label: 'name',
+      },
+    }
+  },
+  computed: {
+    selectVal: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      },
+    },
+  },
+  watch: {
+    // 搜索过滤，监听input搜索框绑定的treeFilter
+    treeFilter(val) {
+      this.$refs.tree.filter(val)
+      // 当搜索框键入值改变时，将该值作为入参执行树形控件的过滤事件filterNode
+    },
+  },
+  mounted() {
+    // selectName初始化，新增时为null，编辑时为匹配name
+    if (this.value >= 0 && this.disabledFlag) {
+      const data = findItemNested(this.list, this.value)
+      this.selectName = data?.name || '无'
+    }
+  },
+  methods: {
+    //  select 清空
+    handleClear() {
+      this.selectVal = null
+      this.selectName = ''
+    },
+    // 结构树点击事件
+    handleNodeClick(data) {
+      this.selectVal = data.id // select绑定值为点击的选项的value
+      this.selectName = data.name // input中显示值为label
+      this.treeFilter = '' // 点击后搜索框清空
+      this.$refs.select.blur() // 点击后关闭下拉框，因为点击树形控件后select不会自动折叠
+    },
+    // 模糊查询（搜索过滤），实质为筛选出树形控件中符合输入条件的选项，过滤掉其他选项
+    filterNode(value, data) {
+      if (!value) return true
+      const filterRes = data.name.indexOf(value) !== -1
+      return filterRes
+    },
+  },
+}
+</script>
+<style lang=""></style>

src/components/ServerTable/index.vue

@@ -0,0 +1,195 @@
+<template>
+  <div>
+    <table class="el-table">
+      <tr>
+        <th
+          class="el-table__cell is-center"
+          v-for="item in tableColumns"
+          :key="item.label">
+          {{ $t(item.label) }}
+        </th>
+        <th class="el-table__cell is-center">{{ $t('table_operation') }}</th>
+      </tr>
+
+      <tr
+        v-for="(item, key) in tableData.map((i) => {
+          const temp = { ...i }
+          delete temp.pid
+          return temp
+        })"
+        :key="key">
+        <td class="el-table__cell is-center">{{ key + 1 }}</td>
+        <td
+          class="el-table__cell is-center cell"
+          v-for="(option, name, index) in item"
+          :key="name">
+          <el-cascader
+            v-model="tableData[key][name]"
+            size="mini"
+            v-if="!index"
+            :options="typeSelect"
+            :props="{ value: 'id', label: 'name', emitPath: false }"
+            :show-all-levels="false"
+            filterable
+            @change="handleChangeCascader($event, tableData[key])" />
+          <div v-else-if="name === 'website_setup' && scence === 'au'">
+            <el-input
+              v-model="item[name][0]"
+              style="width: 100%"
+              size="mini"
+              disabled />
+
+            <el-select
+              v-model="item[name][1]"
+              size="mini"
+              style="margin-top: 4px"
+              disabled>
+              <el-option
+                v-for="i in setupList"
+                :key="i.id"
+                :label="i.name"
+                :value="i.id">
+                {{ i.name }}
+              </el-option>
+            </el-select>
+          </div>
+          <el-input
+            v-model="item[name]"
+            size="mini"
+            disabled
+            v-else />
+        </td>
+        <td class="el-table__cell is-center">
+          <el-button
+            type="text"
+            size="medium"
+            style="color: #ff0000"
+            @click="deleteOpt(tableData, key)">
+            {{ $t('btn_delete') }}
+          </el-button>
+        </td>
+      </tr>
+
+      <tr>
+        <td
+          class="el-table__cell is-center"
+          :colspan="tableColumns.length + 1">
+          <el-button
+            type="text"
+            @click="handleAddPrintRow">
+            + {{ $t('btn_add') }}
+          </el-button>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+import { addition } from '@/api'
+import { resetSetupID } from '@/utils/price'
+
+export default {
+  props: {
+    tableData: {
+      type: Array,
+      default: () => {
+        return [{}]
+      },
+    },
+    tableColumns: {
+      type: Array,
+      default: () => {
+        return [{}]
+      },
+    },
+    typeSelect: {
+      type: Array,
+      default: () => {
+        return [{}]
+      },
+    },
+    setupPriceConfigList: {
+      type: Array,
+      default: () => {
+        return [{}]
+      },
+    },
+    scence: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      part_config_obj: {
+        website_setup: '',
+        website_qty1: '',
+        website_qty2: '',
+        website_qty3: '',
+        website_qty4: '',
+        website_qty5: '',
+        website_qty6: '',
+        website_qty7: '',
+        website_qty8: '',
+      },
+    }
+  },
+  computed: {
+    setupList() {
+      return this.setupPriceConfigList
+    },
+  },
+  created() {
+    if (this.scence === 'au') {
+      this.part_config_obj.website_setup = ['', 7]
+    }
+  },
+  methods: {
+    handleAddPrintRow() {
+      this.$emit('handleAddPrintRow')
+    },
+    setItem(i, response) {
+      if (this.scence === 'au') {
+        i.website_setup = [
+          response.result.website_setup,
+          resetSetupID(response.result.website_setup_id),
+        ]
+      } else {
+        i.website_setup = response.result.website_setup
+      }
+      i.website_qty1 = response.result.website_qty1
+      i.website_qty2 = response.result.website_qty2
+      i.website_qty3 = response.result.website_qty3
+      i.website_qty4 = response.result.website_qty4
+      i.website_qty5 = response.result.website_qty5
+      i.website_qty6 = response.result.website_qty6
+      i.website_qty7 = response.result.website_qty7
+      i.website_qty8 = response.result.website_qty8
+    },
+    handleChangeCascader(id, i) {
+      addition.getDetails({ id }).then((response) => {
+        this.setItem(i, response)
+      })
+    },
+    deleteOpt(arr, key) {
+      arr.splice(key, 1)
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+table {
+  table-layout: fixed;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+tr,
+td,
+th {
+  border: 1px solid #ebeef5;
+  text-align: center;
+}
+</style>

src/components/SiteNav/index.vue

@@ -0,0 +1,113 @@
+<template>
+  <div
+    class="tabs"
+    :style="{ marginTop: marginTop + 'px', marginBottom: marginBottom + 'px' }">
+    <ul>
+      <li
+        :class="{ active: index === currTab }"
+        v-for="(item, index) in navList"
+        :key="item.name"
+        @click="selTab(index)">
+        <div v-if="item.prefix">
+          {{ $t(item.name, { prefix: item.prefix }) }}
+        </div>
+        <div v-else>{{ $t(item.name) }}</div>
+        <!-- <i class="el-icon-close"></i> -->
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    marginTop: {
+      type: Number,
+    },
+    marginBottom: {
+      type: Number,
+    },
+    currTab: {
+      type: Number,
+      default: 0,
+    },
+    navList: {
+      type: Array,
+      default: () => {
+        return [
+          {
+            name: 'AU站',
+            list: [],
+            total: 0,
+            pageNo: 1,
+            isLoaded: false,
+          },
+          //  {
+          //   name: "UK站",
+          //   list: [],
+          //   total: 0,
+          //   pageNo: 1,
+          //   isLoaded: false,
+          // },
+          //  {
+          //   name: "NZ站",
+          //   list: [],
+          //   total: 0,
+          //   pageNo: 1,
+          //   isLoaded: false,
+          // },
+        ]
+      },
+    },
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    selTab(index) {
+      this.$emit('update:currTab', index)
+      this.$emit('handle')
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.tabs {
+  // padding-bottom: 20px;
+  ul {
+    margin: 0;
+    list-style: none;
+    border-bottom: 1px solid #ebebeb;
+    font-size: 14px;
+    li {
+      user-select: none;
+      display: inline-flex;
+      flex-direction: row;
+      align-items: center;
+      color: #4a4d4d;
+      min-width: 120px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      border-radius: 4px 4px 0 0;
+      margin: 0 20px -1px 0;
+      cursor: pointer;
+      transition: all 0.2s;
+      background-color: #f8f8f9;
+      border: 1px solid #ebebeb;
+      border-bottom: none;
+      div {
+        flex: 1;
+        display: inline-block;
+        margin: 0 15px;
+      }
+      i {
+        margin-right: 15px;
+      }
+      &.active {
+        color: #3498db;
+        background-color: #fff;
+      }
+    }
+  }
+}
+</style>

src/components/Tinymce/components/EditorImage.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="upload-container">
+    <el-button
+      :style="{ background: color, borderColor: color }"
+      icon="el-icon-upload"
+      size="mini"
+      type="primary"
+      @click="dialogVisible = true">
+      upload
+    </el-button>
+    <el-dialog :visible.sync="dialogVisible">
+      <el-upload
+        :multiple="true"
+        :file-list="fileList"
+        :show-file-list="true"
+        :on-remove="handleRemove"
+        :on-success="handleSuccess"
+        :before-upload="beforeUpload"
+        class="editor-slide-upload"
+        action="https://httpbin.org/post"
+        list-type="picture-card">
+        <el-button
+          size="small"
+          type="primary">
+          Click upload
+        </el-button>
+      </el-upload>
+      <el-button @click="dialogVisible = false"> Cancel </el-button>
+      <el-button
+        type="primary"
+        @click="handleSubmit">
+        Confirm
+      </el-button>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// import { getToken } from 'api/qiniu'
+
+export default {
+  name: 'EditorSlideUpload',
+  props: {
+    color: {
+      type: String,
+      default: '#1890ff',
+    },
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      listObj: {},
+      fileList: [],
+    }
+  },
+  methods: {
+    checkAllSuccess() {
+      return Object.keys(this.listObj).every(
+        (item) => this.listObj[item].hasSuccess
+      )
+    },
+    handleSubmit() {
+      const arr = Object.keys(this.listObj).map((v) => this.listObj[v])
+      if (!this.checkAllSuccess()) {
+        this.$message(
+          'Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!'
+        )
+        return
+      }
+      this.$emit('successCBK', arr)
+      this.listObj = {}
+      this.fileList = []
+      this.dialogVisible = false
+    },
+    handleSuccess(response, file) {
+      const uid = file.uid
+      const objKeyArr = Object.keys(this.listObj)
+      for (let i = 0, len = objKeyArr.length; i < len; i++) {
+        if (this.listObj[objKeyArr[i]].uid === uid) {
+          this.listObj[objKeyArr[i]].url = response.files.file
+          this.listObj[objKeyArr[i]].hasSuccess = true
+          return
+        }
+      }
+    },
+    handleRemove(file) {
+      const uid = file.uid
+      const objKeyArr = Object.keys(this.listObj)
+      for (let i = 0, len = objKeyArr.length; i < len; i++) {
+        if (this.listObj[objKeyArr[i]].uid === uid) {
+          delete this.listObj[objKeyArr[i]]
+          return
+        }
+      }
+    },
+    beforeUpload(file) {
+      const _self = this
+      const _URL = window.URL || window.webkitURL
+      const fileName = file.uid
+      this.listObj[fileName] = {}
+      return new Promise((resolve) => {
+        const img = new Image()
+        img.src = _URL.createObjectURL(file)
+        img.onload = function () {
+          _self.listObj[fileName] = {
+            hasSuccess: false,
+            uid: file.uid,
+            width: this.width,
+            height: this.height,
+          }
+        }
+        resolve(true)
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.editor-slide-upload {
+  margin-bottom: 20px;
+  ::v-deep .el-upload--picture-card {
+    width: 100%;
+  }
+}
+</style>

src/components/Tinymce/dynamicLoadScript.js

@@ -0,0 +1,59 @@
+let callbacks = []
+
+function loadedTinymce() {
+  // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144
+  // check is successfully downloaded script
+  return window.tinymce
+}
+
+const dynamicLoadScript = (src, callback) => {
+  const existingScript = document.getElementById(src)
+  const cb = callback || function() {}
+
+  if (!existingScript) {
+    const script = document.createElement('script')
+    script.src = src // src url for the third-party library being loaded.
+    script.id = src
+    document.body.appendChild(script)
+    callbacks.push(cb)
+    const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd
+    onEnd(script)
+  }
+
+  if (existingScript && cb) {
+    if (loadedTinymce()) {
+      cb(null, existingScript)
+    } else {
+      callbacks.push(cb)
+    }
+  }
+
+  function stdOnEnd(script) {
+    script.onload = function() {
+      // this.onload = null here is necessary
+      // because even IE9 works not like others
+      this.onerror = this.onload = null
+      for (const cb of callbacks) {
+        cb(null, script)
+      }
+      callbacks = null
+    }
+    script.onerror = function() {
+      this.onerror = this.onload = null
+      cb(new Error('Failed to load ' + src), script)
+    }
+  }
+
+  function ieOnEnd(script) {
+    script.onreadystatechange = function() {
+      if (this.readyState !== 'complete' && this.readyState !== 'loaded') return
+      this.onreadystatechange = null
+      for (const cb of callbacks) {
+        cb(null, script) // there is no way to catch loading errors in IE8
+      }
+      callbacks = null
+    }
+  }
+}
+
+export default dynamicLoadScript

src/components/Tinymce/index.vue

@@ -0,0 +1,301 @@
+<template>
+  <div
+    :class="{ fullscreen: fullscreen }"
+    class="tinymce-container"
+    :style="{ minWidth: containerWidth }">
+    <textarea
+      :id="tinymceId"
+      class="tinymce-textarea" />
+    <div class="editor-custom-btn-container">
+      <editorImage
+        color="#1890ff"
+        class="editor-upload-btn"
+        @successCBK="imageSuccessCBK" />
+    </div>
+  </div>
+</template>
+
+<script>
+/**
+ * docs:
+ * https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html#tinymce
+ */
+import editorImage from './components/EditorImage'
+import plugins from './plugins'
+import toolbar from './toolbar'
+import load from './dynamicLoadScript'
+import { common } from '@/api'
+
+// why use this cdn, detail see https://github.com/PanJiaChen/tinymce-all-in-one
+const tinymceCDN =
+  '//cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js'
+
+export default {
+  name: 'Tinymce',
+  components: { editorImage },
+  props: {
+    id: {
+      type: String,
+      default() {
+        return (
+          'vue-tinymce-' +
+          +new Date() +
+          ((Math.random() * 1000).toFixed(0) + '')
+        )
+      },
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    toolbar: {
+      type: Array,
+      required: false,
+      default() {
+        return []
+      },
+    },
+    menubar: {
+      type: String,
+      default: 'file edit insert view format table',
+    },
+    height: {
+      type: [Number, String],
+      required: false,
+      default: 500,
+    },
+    width: {
+      type: [Number, String],
+      required: false,
+      default: '980',
+    },
+  },
+  data() {
+    return {
+      hasChange: false,
+      hasInit: false,
+      tinymceId: this.id,
+      fullscreen: false,
+      languageTypeList: {
+        en: 'en',
+        zh: 'zh_CN',
+        es: 'es_MX',
+        ja: 'ja',
+      },
+    }
+  },
+  computed: {
+    language() {
+      return this.languageTypeList[this.$store.getters.language]
+    },
+    containerWidth() {
+      const width = this.width
+      if (/^[\d]+(\.[\d]+)?$/.test(width)) {
+        // matches `100`, `'100'`
+        return `${width}px`
+      }
+      return width
+    },
+  },
+  watch: {
+    value(val) {
+      if (!this.hasChange && this.hasInit) {
+        this.$nextTick(() =>
+          window.tinymce.get(this.tinymceId).setContent(val || '')
+        )
+      }
+    },
+    language() {
+      this.destroyTinymce()
+      this.$nextTick(() => this.initTinymce())
+    },
+  },
+  mounted() {
+    this.init()
+  },
+  activated() {
+    if (window.tinymce) {
+      this.initTinymce()
+    }
+  },
+  deactivated() {
+    this.destroyTinymce()
+  },
+  destroyed() {
+    this.destroyTinymce()
+  },
+  methods: {
+    init() {
+      // dynamic load tinymce from cdn
+      load(tinymceCDN, (err) => {
+        if (err) {
+          this.$message.error(err.message)
+          return
+        }
+        this.initTinymce()
+      })
+    },
+    initTinymce() {
+      const _this = this
+      window.tinymce.init({
+        language: this.language,
+        selector: `#${this.tinymceId}`,
+        height: this.height,
+        body_class: 'panel-body ',
+        object_resizing: false,
+        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
+        menubar: this.menubar,
+        plugins,
+        paste_data_images: true, // 允许粘贴图片
+        end_container_on_empty_block: true,
+        resize: 'both',
+        powerpaste_word_import: 'clean',
+        code_dialog_height: 450,
+        code_dialog_width: 1000,
+        advlist_bullet_styles: 'square',
+        advlist_number_styles: 'default',
+        imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
+        default_link_target: '_blank',
+        link_title: false,
+        nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
+        init_instance_callback: (editor) => {
+          if (_this.value) {
+            editor.setContent(_this.value)
+          }
+          _this.hasInit = true
+          editor.on('NodeChange Change KeyUp SetContent', () => {
+            this.hasChange = true
+            this.$emit('input', editor.getContent())
+          })
+        },
+        setup(editor) {
+          editor.on('FullscreenStateChanged', (e) => {
+            _this.fullscreen = e.state
+          })
+        },
+        // it will try to keep these URLs intact
+        // https://www.tiny.cloud/docs-3x/reference/configuration/Configuration3x@convert_urls/
+        // https://stackoverflow.com/questions/5196205/disable-tinymce-absolute-to-relative-url-conversions
+        convert_urls: false,
+        images_upload_handler: (blobInfo, success, failure) => {
+          const filename =  Date.now() + '_' + blobInfo.filename();
+          const form = new FormData();
+          form.append('file', blobInfo.blob(), filename);
+          form.append('type', 3)
+          
+          const handleUpload = async (form) => {
+            try {
+              const response = await common.imagesUpload(form);
+              if (response.result.code === 200) {
+                success(response.result.cdn_url);
+              } else {
+                this.$message({
+                  message: response.result.message,
+                  type: 'warning',
+                })
+              }
+            } catch (error) {
+              console.error('Upload failed:', error);
+              failure('Upload failed');
+            }
+          };
+
+          handleUpload(form);
+        },
+        // 整合七牛上传
+        // images_dataimg_filter(img) {
+        //   setTimeout(() => {
+        //     const $image = $(img);
+        //     $image.removeAttr('width');
+        //     $image.removeAttr('height');
+        //     if ($image[0].height && $image[0].width) {
+        //       $image.attr('data-wscntype', 'image');
+        //       $image.attr('data-wscnh', $image[0].height);
+        //       $image.attr('data-wscnw', $image[0].width);
+        //       $image.addClass('wscnph');
+        //     }
+        //   }, 0);
+        //   return img
+        // },
+        // images_upload_handler(blobInfo, success, failure, progress) {
+        //   progress(0);
+        //   const token = _this.$store.getters.token;
+        //   getToken(token).then(response => {
+        //     const url = response.data.qiniu_url;
+        //     const formData = new FormData();
+        //     formData.append('token', response.data.qiniu_token);
+        //     formData.append('key', response.data.qiniu_key);
+        //     formData.append('file', blobInfo.blob(), url);
+        //     upload(formData).then(() => {
+        //       success(url);
+        //       progress(100);
+        //     })
+        //   }).catch(err => {
+        //     failure('出现未知问题，刷新页面，或者联系程序员')
+        //     console.log(err);
+        //   });
+        // },
+      })
+    },
+    destroyTinymce() {
+      const tinymce = window.tinymce.get(this.tinymceId)
+      if (this.fullscreen) {
+        tinymce.execCommand('mceFullScreen')
+      }
+
+      if (tinymce) {
+        tinymce.destroy()
+      }
+    },
+    setContent(value) {
+      window.tinymce.get(this.tinymceId).setContent(value)
+    },
+    getContent() {
+      window.tinymce.get(this.tinymceId).getContent()
+    },
+    imageSuccessCBK(arr) {
+      arr.forEach((v) =>
+        window.tinymce
+          .get(this.tinymceId)
+          .insertContent(`<img class="wscnph" src="${v.url}" >`)
+      )
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.tinymce-container {
+  position: relative;
+  line-height: normal;
+}
+
+.tinymce-container {
+  ::v-deep {
+    .mce-fullscreen {
+      z-index: 10000;
+    }
+  }
+}
+
+.tinymce-textarea {
+  visibility: hidden;
+  z-index: -1;
+}
+
+.editor-custom-btn-container {
+  position: absolute;
+  right: 4px;
+  top: 4px;
+  /*z-index: 2005;*/
+}
+
+.fullscreen .editor-custom-btn-container {
+  z-index: 10000;
+  position: fixed;
+}
+
+.editor-upload-btn {
+  display: inline-block;
+}
+</style>

src/components/Tinymce/plugins.js

@@ -0,0 +1,7 @@
+// Any plugins you want to use has to be imported
+// Detail plugins list see https://www.tinymce.com/docs/plugins/
+// Custom builds see https://www.tinymce.com/download/custom-builds/
+
+const plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']
+
+export default plugins

src/components/Tinymce/toolbar.js

@@ -0,0 +1,6 @@
+// Here is a list of the toolbar
+// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
+
+const toolbar = ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen']
+
+export default toolbar

src/components/index.js

@@ -0,0 +1,21 @@
+import GlobalDialog from './GlobalDialog/index.vue'
+import GlobalForm from './GlobalForm/index.vue'
+import GlobalToolBtn from './GlobalToolBtn/index.vue'
+import GlobalTable from './GlobalTable/index.vue'
+import Pagination from './Pagination/index.vue'
+
+const components = [GlobalDialog,GlobalForm,GlobalToolBtn,GlobalTable,Pagination]
+
+const install = (Vue) => {
+  components.map((component) => {
+    Vue.component(component.name, component)
+  })
+}
+
+if (typeof Window !== 'undefined' && window.Vue) {
+  install(Window.Vue)
+}
+
+export default {
+  install
+}

src/directive/btnPermission.js

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+import store from '@/store'
+
+Vue.directive('permission', {
+  inserted (el, binding) {
+    const {action,effect} = binding.value
+    if(!store.getters.authButtons.includes(action)){
+        if(effect === 'disabled'){
+            // 如果是禁用添加'disable'样式
+            el.disabled = true
+            el.classList.add('is-disabled')
+        } else {
+            // 否则就移除节点
+            el.parentNode.removeChild(el)
+        }
+    }
+  }
+})
+
+ 

src/directive/debounce/debounce.js

@@ -0,0 +1,15 @@
+import _debounce from 'lodash.debounce'
+let fn = null
+const debounce = {
+  inserted(el, binding) {
+    fn = _debounce(binding.value, 1000, {
+      leading: true,
+      trailing: false,
+    })
+    el.addEventListener('click', fn)
+  },
+  unbind(el) {
+    fn && el.removeEventListener('click', fn)
+  },
+}
+export default debounce

src/directive/debounce/index.js

@@ -0,0 +1,13 @@
+import debounce from './debounce'
+
+const install = function (Vue) {
+  Vue.directive('debounce', debounce)
+}
+
+if (window.Vue) {
+  window.debounce = debounce
+  Vue.use(install) // eslint-disable-line
+}
+
+debounce.install = install
+export default debounce

src/directive/defaultImg/index.js

@@ -0,0 +1,14 @@
+import Vue from 'vue'
+
+Vue.directive('default-img', {
+  bind(el, binding) {
+    el.onerror = function () {
+      const arg = new URL('/assets/default.png', import.meta.url).href
+
+      if (arg) {
+        el.onerror = null
+        el.src = arg
+      }
+    }
+  },
+})

src/filters/index.js

@@ -0,0 +1,73 @@
+// import parseTime, formatTime and set to filter
+export { parseTime, formatTime } from '@/utils'
+
+/**
+ * Show plural label if time is plural number
+ * @param {number} time
+ * @param {string} label
+ * @return {string}
+ */
+function pluralize(time, label) {
+  if (time === 1) {
+    return time + label
+  }
+  return time + label + 's'
+}
+
+/**
+ * @param {number} time
+ */
+export function timeAgo(time) {
+  const between = Date.now() / 1000 - Number(time)
+  if (between < 3600) {
+    return pluralize(~~(between / 60), ' minute')
+  } else if (between < 86400) {
+    return pluralize(~~(between / 3600), ' hour')
+  } else {
+    return pluralize(~~(between / 86400), ' day')
+  }
+}
+
+/**
+ * Number formatting
+ * like 10000 => 10k
+ * @param {number} num
+ * @param {number} digits
+ */
+export function numberFormatter(num, digits) {
+  const si = [
+    { value: 1E18, symbol: 'E' },
+    { value: 1E15, symbol: 'P' },
+    { value: 1E12, symbol: 'T' },
+    { value: 1E9, symbol: 'G' },
+    { value: 1E6, symbol: 'M' },
+    { value: 1E3, symbol: 'k' }
+  ]
+  for (let i = 0; i < si.length; i++) {
+    if (num >= si[i].value) {
+      return (num / si[i].value).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
+    }
+  }
+  return num.toString()
+}
+
+/**
+ * 10000 => "10,000"
+ * @param {number} num
+ */
+export function toThousandFilter(num) {
+  return (+num || 0).toString().replace(/^-?\d+/g, (m) => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
+}
+
+/**
+ * Upper case first char
+ * @param {String} string
+ */
+export function uppercaseFirst(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+export function statusFilter(level,obj) {
+  return obj[level]
+}
+

src/i18n/en-us/common.js

@@ -0,0 +1,41 @@
+export default {
+  btn_add: 'Add',
+  btn_new: 'New',
+  btn_create: 'Create',
+  btn_save: 'Save',
+  btn_edit: 'Edit',
+  btn_copy: 'Copy',
+  btn_submit: 'Submit',
+  btn_reset: 'Reset',
+  btn_query: 'Query',
+  btn_search: 'Search',
+  btn_close: 'Close',
+  btn_cancel: 'Cancel',
+  btn_delete: 'Delete',
+  btn_delete_mult: 'Delete...',
+  btn_import: 'Import',
+  btn_export: 'Export',
+  btn_audit: 'Audit',
+  btn_upload: 'Upload',
+  btn_download: 'Download',
+  btn_process: 'To Process',
+  btn_details: 'Processing Details',
+  table_index: '#',
+  table_status: 'status',
+  table_rank: 'rank',
+  table_operation: 'Operation',
+  table_operator: 'Operator',
+  table_operated_time: 'Operated Time',
+  table_updated_time: 'Updated Time',
+  table_created_time: 'Created Time',
+  bread_current: 'Position',
+  text_please_select: 'Please select an item',
+  text_please_search: 'Please enter search',
+  text_please_input: 'Please enter this value',
+  text_desc: 'Description',
+  text_separate: 'Please separate multiple keywords with ","',
+  text_attention: 'Attention:',
+  video_attention: 'time limit: 0.5-15 minute',
+  video_attention2: 'video Format must be .mp4',
+  video_attention3: 'video file size must less then 500MB',
+}

src/i18n/en-us/index.js

@@ -0,0 +1,147 @@
+import common from './common'
+import productAndMember from './product-and-member'
+import system from './system/index'
+import order from './order/index'
+
+export default {
+  ...common,
+  top_bar: {
+    product_and_member: 'Product & Member',
+    system: 'System',
+    order: 'Order',
+  },
+  slider_member: {
+    member: {
+      index: 'Member',
+      manage: {
+        index: 'Member Manage',
+        au_manage: 'AU Member',
+        level: 'Member Level',
+      },
+    },
+
+    product: {
+      index: 'Product',
+      manage: {
+        index: 'Product Manage',
+        list: 'Product List',
+        au_price: 'AU Price',
+        stock: 'Stock Manage',
+        warehouse: 'Warehouse Manage',
+      },
+      search: {
+        index: 'Search Setting',
+        keyword: 'Keyword',
+        report: 'Report Form',
+      },
+    },
+    property: {
+      index: 'Property',
+      product: {
+        index: 'Product Property',
+        decoration: 'Decoration Price',
+        addition: 'Additionl Service',
+        cycle: 'Cycle',
+        // attribute: 'Tiered Pricing',
+        attribute: 'stage price',
+        decoration_type: 'Decoration Type',
+        category: 'Category Manage',
+        appa_category: 'APPA Category',
+        filter: 'Filter Manage',
+        icon: 'Product Icon',
+        freight: 'Freight Manage',
+        weight: 'Weight Manage',
+        tag: 'Attribute Tag',
+      },
+    },
+    batch: {
+      index: 'Batch',
+      action: {
+        index: 'Batch Operate',
+        price: 'Price Batch Operate',
+        common: 'Common Operate',
+        au_action: 'AU Operate',
+        history: 'Operation History',
+      },
+    },
+    work_order: {
+      index: 'Work Order',
+      work_order_manage: {
+        index: 'Work Order Manage',
+        work_order_list: 'Work Order List',
+      },
+    },
+    supplier: {
+      index: 'Supplier',
+      manage: {
+        index: 'Supplier Manage',
+        list: 'Supplier List',
+        product: 'Supplier Product',
+        accessory: 'Supply Item',
+      },
+    },
+    article: {
+      index: 'Article',
+      article_setting: {
+        index: 'Article Setting',
+        home_page_setting: 'Home Page',
+        download: 'Download Center',
+        contact: 'Contact US',
+        article_manage: 'Article Manage',
+        catalogue: 'Catalogue',
+        newsletter: 'Newsletter',
+        video: 'Video Manage',
+        question: 'Question',
+        privacy_policy: 'Privacy Policy',
+        refund_and_return: 'Refund & Return',
+        terms_and_conditions: 'Terms & Conditions',
+        site_info: 'Site Info',
+      },
+    },
+    resource: {
+      index: 'Resource',
+      manage: {
+        index: 'Resource Manage',
+        edm_manage: 'EDM Manage',
+        edm_resource: 'EDM Resource',
+        showcase: 'Showcase',
+        data_tag: 'Data Tag',
+        data: 'Data',
+      },
+    },
+  },
+  slider_authority: {
+    authority: {
+      index: 'Authority',
+      authority_manage: {
+        index: 'Authority Manage',
+        member: 'Member Manage',
+        role: 'Role Manage',
+        department: 'Department',
+      },
+    },
+  },
+  slider_order: {
+    indent: {
+      index: 'Indent',
+      indent_manage: {
+        index: 'Indent',
+        list: 'Indent List',
+      },
+      product_manage: {
+        index: 'Product Manage',
+        list: 'Product List',
+        category: 'Product Category',
+      },
+    },
+  },
+  product_and_member: {
+    ...productAndMember,
+  },
+  system: {
+    ...system,
+  },
+  order: {
+    ...order,
+  },
+}

src/i18n/en-us/order/category.js

@@ -0,0 +1,8 @@
+export default {
+  label_name: 'Category Name',
+  label_show: 'show',
+  label_hidden: 'hide',
+  label_father_category: 'Upper Level',
+  dialog_title_create: 'Create Category',
+  dialog_title_edit: 'Edit Category',
+}

src/i18n/en-us/order/indent/calc.js

@@ -0,0 +1,10 @@
+export default {
+  label_product_info: 'Product Info',
+  label_purchase_info: 'Purchase Info',
+  label_transport_size: 'Transport Size',
+  label_transport_info: 'Transport Info',
+  label_cost_list: 'Cost List',
+  label_other_cost: 'Other Cost',
+  label_charge: 'Charge',
+  label_analysis: 'Analysis',
+}

src/i18n/en-us/order/indent/edit-info.js

@@ -0,0 +1,36 @@
+export default {
+  label_supplier: 'Supplier',
+  label_company_name: 'Company Name',
+  label_supplier_type: 'Supplier Type',
+  label_wangwang_year: 'WangWang Year',
+  label_contact: 'Conatact',
+  label_phone: 'Phone',
+  label_factory_price: 'Factory Price',
+  label_product_info: 'Product Info',
+  label_product_name: 'Product Name',
+  label_product_url: 'Product URL',
+  label_product_image: 'Product Image',
+  label_size: 'Size',
+  label_product_hd: 'Thickness',
+  label_capacity: 'Capacity',
+  label_material: 'Material',
+  label_battery: 'Has Battery',
+  label_print_require: 'Print Require',
+  label_color: 'Color',
+  label_color_require: 'Color Require',
+  label_other: 'Other',
+  label_number_table: 'Number & Price',
+  label_extra_fee: 'Extra Cost',
+  label_package_info: 'Package Info',
+  label_package: 'Package',
+  label_gross_weight: 'Gross Weight',
+  label_package_size: 'Package Size',
+  label_pcs: 'PCS',
+  label_example: 'Example',
+  label_example_days: 'Example Days',
+  label_example_cost: 'Example Cost',
+  label_can_refund: 'Refund',
+  label_cert: 'Cert',
+  label_comment: 'Comment',
+  btn_add_info: 'Add Info',
+}

src/i18n/en-us/order/indent/edit.js

@@ -0,0 +1,15 @@
+export default {
+  label_number: 'Number',
+  label_print_require: 'Require Print',
+  label_deliver_date: 'Deliver Date',
+  label_ref_dimension: 'Ref Dimension',
+  label_ref_url: 'Ref URL',
+  label_comment: 'Comment',
+  label_ref_image: 'Ref Image',
+  col_product_image: 'Product Image',
+  col_supplier: 'Supplier',
+  btn_add_info: 'Add Info',
+  btn_submit_and_next: 'Submit & Next',
+  title_edit: 'Edit Indent',
+  title_add: 'Add Indent',
+}

src/i18n/en-us/order/indent/index.js

@@ -0,0 +1,29 @@
+export default {
+  label_project_name: 'Project Name',
+  label_customer_name: 'Customer Name',
+  label_product_name: 'Product Name',
+  label_supplier_product: 'Product(supplier)',
+  label_category: 'Category',
+  label_supplier: 'Supplier',
+  label_print_method: 'Print Method',
+  label_require_material: 'Require Material',
+  label_number: 'Number',
+  label_status: 'Status',
+  label_quoter: 'Quoter',
+  ph_quoter: 'Type or Select',
+  ph_time_start: 'Start',
+  ph_time_end: 'End',
+  table_image: 'Image',
+  table_supplier: 'Supplier',
+  table_url: 'URL',
+  table_price: 'Price',
+  table_creator: 'Creator',
+  table_indent_name: 'Indent',
+  table_days: 'Days',
+  btn_new_indent: 'New Indent',
+  btn_quote: 'Quote',
+  btn_set_freight: 'Set Freight Params',
+  btn_calc_price: 'Calcuate',
+  btn_adopt: 'Adopt',
+  btn_adopted: 'Adopted',
+}

src/i18n/en-us/order/index.js

@@ -0,0 +1,15 @@
+import category from './category'
+import indent from './indent/index'
+import indentEdit from './indent/edit'
+import indentEditInfo from './indent/edit-info'
+import indentCalc from './indent/calc'
+import product from './product'
+
+export default {
+  indent,
+  product,
+  category,
+  indent_edit_info: indentEditInfo,
+  indent_edit: indentEdit,
+  indent_calc: indentCalc,
+}

src/i18n/en-us/order/product.js

@@ -0,0 +1,21 @@
+export default {
+  label_project_name: 'Project Name',
+  label_category: 'Category',
+  label_status: 'Audit Status',
+  label_img: 'Main Image',
+  label_product_code: 'Product Code',
+  label_name: 'Product Name',
+  label_audit_detail: 'Audit Detail',
+  label_audit: 'Audit',
+  label_feedback: 'Feedback',
+  dialog_title_audit: 'Aduit',
+  dialog_title_record: 'Audit Record',
+  dialog_title_edit: 'Edit Product',
+  dialog_title_add: 'New Product',
+  label_audit_time: 'Time',
+  label_audit_operator: 'Operator',
+  label_audit_result: 'Audit Result',
+  label_name_cn: 'Name_cn',
+  label_name_en: 'Name_en',
+  lable_image_list: 'Image',
+}

src/i18n/en-us/product-and-member/article/catalogue.js

@@ -0,0 +1,10 @@
+export default {
+  label_title: 'Catalogue Title',
+  ph_title: 'Catalogue Title',
+  label_status: 'Status',
+  label_sort: 'Sort',
+  ph_sort: 'Blank means sort at the end',
+  label_image: 'Image',
+  label_upload: 'Upload File',
+  ph_upload: 'Upload Catalogue File',
+}

src/i18n/en-us/product-and-member/article/contact-us.js

@@ -0,0 +1,14 @@
+export default {
+  label_contact: 'Contact',
+  ph_contact: 'Contact Name',
+  label_team: 'Team',
+  label_name: 'Name',
+  label_image: 'Image',
+  label_title: 'Title',
+  label_tel: 'TEL',
+  label_phone: 'Phone',
+  label_email: 'Email',
+  label_desc: 'Desc',
+  label_sort: 'Sort',
+  tip_sort: 'blank mean sort at the last',
+}

src/i18n/en-us/product-and-member/article/download.js

@@ -0,0 +1,8 @@
+export default {
+  label_title: 'Title',
+  label_icon: 'Icon',
+  label_status: 'Status',
+  label_file: 'Upload File',
+  label_url: 'URL',
+  label_desc: 'Desc',
+}

src/i18n/en-us/product-and-member/article/home.js

@@ -0,0 +1,12 @@
+export default {
+  label_position: 'Position',
+  label_type: 'Type',
+  label_url: 'URL',
+  label_image: 'Image',
+  label_status: 'Status',
+  label_wap_url: 'WAP URL',
+  lable_wap_carousel: 'WAP Carousel',
+  label_sort: 'Sort',
+  label_title: 'Title',
+  label_desc: 'Desc',
+}

src/i18n/en-us/product-and-member/article/info.js

@@ -0,0 +1,20 @@
+export default {
+  label_site_name: 'Site Name',
+  ph_site_name: 'It will displayed in wellcome info and other places',
+  label_domain: 'Website Domain',
+  label_member_mail: 'Email For Member Info',
+  label_enquiry_mail: 'Email For Make Enquiry',
+  label_quote_mail: 'Email For Quick Quote',
+  label_home_title: 'Home Title',
+  label_meta_keyword: 'Meta Keyword',
+  ph_meta_keyword: 'Use for SEO. Split with ",".',
+  label_meta_desc: 'Meta Desc',
+  label_company_desc: 'Company Desc',
+  label_sign_image: 'Signature Image',
+  label_link: 'URL',
+  label_copyright: 'Copyright',
+  label_freight_rate_aae: 'Freight Floating',
+  label_freight_rate_sre: 'Freight Floating',
+  label_fule_rate: 'Fule Rate',
+  label_free_freight_cost: 'Cost Of Free Transportation',
+}

src/i18n/en-us/product-and-member/article/manage.js

@@ -0,0 +1,10 @@
+export default {
+  label_title: 'Title',
+  ph_title: 'Article Title',
+  label_type: 'Type',
+  ph_type: 'Article Type',
+  label_description: 'Description',
+  label_rank: 'Rank',
+  label_status: 'Status',
+  label_content: 'Content',
+}

src/i18n/en-us/product-and-member/article/news-letter.js

@@ -0,0 +1,11 @@
+export default {
+  label_title: 'Newsletter Title',
+  ph_title: 'Newsletter Title',
+  label_status: 'Status',
+  label_sort: 'Sort',
+  ph_sort: 'Blank means sort at the end',
+  label_image: 'Image',
+  label_upload: 'Upload File',
+  ph_upload: 'Upload Newsletter File',
+  label_content: 'Content',
+}

src/i18n/en-us/product-and-member/article/question.js

@@ -0,0 +1,9 @@
+export default {
+  label_question_type: 'Question Type',
+  label_question: 'Question',
+  ph_question: 'Question',
+  label_answer: 'Answer',
+  label_status: 'Status',
+  label_sort: 'Sort',
+  ph_sort: 'Blank means sort at the end',
+}

src/i18n/en-us/product-and-member/article/video.js

@@ -0,0 +1,8 @@
+export default {
+  label_title: 'Video Title',
+  ph_title: 'Video Title',
+  label_status: 'Status',
+  label_sort: 'Sort',
+  ph_sort: 'Blank means sort at the end',
+  label_content: 'Video',
+}

src/i18n/en-us/product-and-member/batch/common.js

@@ -0,0 +1,10 @@
+export default {
+  label_update_data: 'Update Data',
+  btn_update_data: 'Update Data',
+  btn_upload: 'Upload File',
+  label_note: 'note',
+  table_operate_record: 'Operate Record',
+  label_file_name: 'File Name',
+  label_size: 'Size',
+  label_status: 'Status',
+}

src/i18n/en-us/product-and-member/batch/price.js

@@ -0,0 +1,6 @@
+export default {
+  label_site: 'Site',
+  label_product_code: 'Product Code',
+  label_cycle: 'Cycle',
+  label_range: 'Range',
+}

src/i18n/en-us/product-and-member/index.js

@@ -0,0 +1,95 @@
+import auPrice from './product/au-price'
+import stock from './product/stock'
+import list from './product/list'
+import productEdit from './product/product-edit'
+import warehouse from './product/warehouse'
+
+import keyword from './search/keyword'
+import reportForm from './search/report-form'
+
+import decorationPrice from './property/decoration-price'
+import additionalService from './property/additional-service'
+import cycle from './property/cycle'
+import stagePrice from './property/stage-price'
+import decorationType from './property/decoration-type'
+import category from './property/category'
+import appaCategory from './property/appa-category'
+import filter from './property/filter'
+import icon from './property/icon'
+import freight from './property/freight'
+import weight from './property/weight'
+import tag from './property/tag'
+
+import member from './member/'
+import level from './member/level'
+
+import workOrderList from './work-order/work-order-list'
+
+import batchPrice from './batch/price'
+import batchCommon from './batch/common'
+
+import supplier from './supplier/supplier'
+import supplierProduct from './supplier/product'
+import supplierAccessory from './supplier/accessory'
+
+import articleHome from './article/home'
+import articleDownload from './article/download'
+import articleContactUs from './article/contact-us'
+import articleManage from './article/manage'
+import articleCatalogue from './article/catalogue'
+import articleNewsLetter from './article/news-letter'
+import articleVideo from './article/video'
+import articleQuestion from './article/question'
+import articleInfo from './article/info'
+
+import resourceEDMManage from './resource/edm-manage'
+import resourceEDMResource from './resource/edm-resource'
+import resourceShowcase from './resource/showcase'
+import resourceLineArt from './resource/line-art'
+import resourceDataTag from './resource/data-tag'
+import resourceData from './resource/data'
+
+export default {
+  au_price: auPrice,
+  stock,
+  warehouse,
+  list,
+  edit: productEdit,
+  keyword,
+  report_form: reportForm,
+  decoration_price: decorationPrice,
+  additional_service: additionalService,
+  cycle,
+  stage_price: stagePrice,
+  decoration_type: decorationType,
+  category,
+  appa_category: appaCategory,
+  filter,
+  icon,
+  freight,
+  weight,
+  tag,
+  member,
+  member_level: level,
+  work_order_list: workOrderList,
+  batch_price: batchPrice,
+  batch_common: batchCommon,
+  supplier,
+  supplier_product: supplierProduct,
+  supplier_accessory: supplierAccessory,
+  article_home: articleHome,
+  article_download: articleDownload,
+  article_contact_us: articleContactUs,
+  article_manage: articleManage,
+  article_catalogue: articleCatalogue,
+  article_news_letter: articleNewsLetter,
+  article_video: articleVideo,
+  article_question: articleQuestion,
+  article_info: articleInfo,
+  resource_edm_manage: resourceEDMManage,
+  resource_edm_resource: resourceEDMResource,
+  resource_showcase: resourceShowcase,
+  resource_line_art: resourceLineArt,
+  resource_data_tag: resourceDataTag,
+  resource_data: resourceData,
+}

src/i18n/en-us/product-and-member/member/index.js

@@ -0,0 +1,18 @@
+export default {
+  label_contact: 'Contact',
+  ph_contact: 'Email / Company Name / Contact',
+  label_member_level: 'Level',
+  label_aduit_status: 'Audit Status',
+  label_status: 'Status',
+  label_email: 'Email',
+  label_phone: 'Phone',
+  label_company: 'Company Name',
+  label_password: 'Password',
+  label_address: 'Address',
+  label_state: 'State',
+  label_postcode: 'PostCode',
+  label_website: 'WebSite',
+  label_manager: 'Exclusive Account Manager',
+  label_crm: 'Bind CRM company',
+  label_inventory: 'Bind inventory company',
+}

src/i18n/en-us/product-and-member/member/level.js

@@ -0,0 +1,5 @@
+export default {
+  label_member_level: 'Member Level',
+  label_member_expiration: 'Expiration',
+  label_discount_rate: 'Discount Rate',
+}

src/i18n/en-us/product-and-member/product/au-price.js

@@ -0,0 +1,20 @@
+export default {
+  table_cycle: 'Cycle',
+  table_name: 'Product Name',
+  table_code: 'Product Code',
+  label_keyword: 'Keyword',
+  ph_keyword: 'code / name / keyword',
+  btn_default_value: 'Default_value',
+  label_stage_price: 'Stage Price',
+  table_column_print_range: 'Print Range',
+  table_column_print_way: 'Print Way',
+  table_column_print_position: 'Print Position',
+  table_column_position: 'position',
+  table_column_addition_services: 'Additional services',
+  label_base_price: 'Base Price',
+  label_decoration_price: 'Decoration Price',
+  label_addition_price: 'Additional Price',
+  label_sync: 'Synchronize with other cycles',
+  btn_add_model: 'Add Model',
+  help_text_model: 'Please use * to separate multiple models',
+}

src/i18n/en-us/product-and-member/product/list.js

@@ -0,0 +1,11 @@
+export default {
+  btn_edit_record: 'Change_log',
+  btn_dev_record: 'Dev_log',
+  label_keyword: 'Keyword',
+  ph_keyword: 'code / name / keyword',
+  label_category: 'category',
+  label_site: 'site',
+  table_main_image: 'Image',
+  table_code: 'Code',
+  table_name: 'Name',
+}

src/i18n/en-us/product-and-member/product/product-edit.js

@@ -0,0 +1,57 @@
+export default {
+  tab_common: 'Common',
+  tab_au: 'AU Manage',
+  common: {
+    tab_product: 'Product Info',
+    tab_print: 'Print Info',
+    tab_feature: 'Feature Info',
+    label_category: 'Product Category',
+    label_appa_category: 'APPA Category',
+    label_name: 'Product Name',
+    label_code: 'Product Code',
+    label_image: 'Product Image',
+    help_text_image:
+      'The first image will serve as the main image of the product, supporting multiple images, and the position of multiple images can be adjusted freely; Recommand format: jpg, png, and jpeg. Recommended images size: at least 800x800 pixels , file size at least 1M byte. You can upload up to 16 images.',
+    label_polychromatic: 'Polychromatic graphs',
+    label_color_desc: 'Colour Description',
+    label_video: 'Product Video',
+    help_text_video: 'The video format must be mp4.',
+    label_box: 'Bao Xiao He',
+    label_tag: 'Attribute tag',
+    label_keyword: 'Product Keyowrd',
+    desc_of_keyword:
+      'You must separate multiple product keywords with ",". Keywords can be used as a keyword query on our website to find a product. And it can use for SEO.',
+    label_notes: 'Product Notes',
+    label_supplier: 'Preferred Supplier',
+    label_supplier_second: 'Secondary Supplier',
+    label_desc: 'Product Description',
+    label_multi_decoration: 'Multi sided decoration',
+    btn_extend_category: 'Add Extend Category',
+    btn_upload_product_instruction: 'Upload File',
+    btn_upload_line_artwork: 'Upload File',
+  },
+  site: {
+    label_on_sale: 'On Sale',
+    label_sort: 'Sort',
+    desc_of_sort: 'The biggest Weight is',
+    label_icon: 'Icon',
+    label_features: 'Product Features',
+    label_reason: 'Reason of Develop',
+    label_name: 'Product Name',
+    label_code: 'Product Code',
+    label_sketch_map: 'Sketch Map',
+    label_size: 'Size',
+    label_material: 'Material',
+    label_color: 'Color',
+    label_print: 'Print',
+    label_packaging: 'Packaging',
+    label_cycle: 'Cycle',
+    label_competitor: 'Competitor',
+    label_competitor_url: 'Competitor URL',
+    label_competitor_image: 'Competitor Image',
+    label_sea_freight: 'Sea Freight',
+    label_sea_freight_image: 'Sea Freight Image',
+    label_air_freight: 'Air Freight',
+    label_air_freight_image: 'Air Freight Image',
+  },
+}

src/i18n/en-us/product-and-member/product/stock.js

@@ -0,0 +1,12 @@
+export default {
+  table_name: 'Product Name',
+  table_code: 'Product Code',
+  label_keyword: 'Keyword',
+  ph_keyword: 'code / name / keyword',
+  table_Product_type: 'Product Type',
+  table_available_stock: 'Available Stock',
+  table_next_date: 'Next Date',
+  table_next_qty: 'Next QTY',
+  table_availability: 'Shelf',
+  table_display: 'Inventory',
+}