---
# System prepended metadata

title: backend-foundation-domain-wallet
tags: [W0封存]

---

backend-foundation-domain-wallet
==

[TOC]

1.依賴套件項目
===

<details>

```js
  "dependencies": {
    "apexcharts": "^3.35.5",
    "axios": "^0.27.2",
    "chart.js": "^3.9.1",
    "core-js": "^3.8.3",
    "git-describe": "^4.0.4",
    "group-by-with-sum": "^2.0.0",
    "js-file-download": "^0.4.12",
    "json-bigint": "^1.0.0",
    "json2csv": "^5.0.7",
    "lodash": "^4.17.21",
    "mathjs": "^11.3.3",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.39",
    "register-service-worker": "^1.7.2",
    "sortablejs": "^1.15.0",
    "vue": "^2.6.14",
    "vue-apexcharts": "^1.5.3",
    "vue-chartjs": "^4.1.1",
    "vue-cli-plugin-git-describe": "~1.0.0",
    "vue-i18n": "^8.26.3",
    "vue-router": "^3.5.1",
    "vuedraggable": "^2.24.3",
    "vuetify": "^2.6.0",
    "vuetify-datetime-picker": "^2.1.1",
    "vuex": "^3.6.2"
  },
```

> 修改日期 2022/12/30

</details>

2.環境設定
===

<details>

```js
"devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-pwa": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "csv-parse": "^4.14.2",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "flag-icon-css": "^3.4.6",
    "prettier": "^2.4.1",
    "sass": "~1.32.0",
    "sass-loader": "^10.0.0",
    "vue-cli-plugin-i18n": "~2.3.1",
    "vue-cli-plugin-pug": "~2.0.0",
    "vue-cli-plugin-vuetify": "~2.5.1",
    "vue-template-compiler": "^2.6.14",
    "vuetify-loader": "^1.7.0"
  },
  "prettier": {
    "endOfLine": "auto"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "plugin:prettier/recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser",
      "requireConfigFile": false
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "_id": "@",
  "readme": "ERROR: No README data found!"
```

> 修改日期 2022/12/30

</details>

3.專案建置
===

1. 安裝專案所有依賴套件

```shell
yarn  | yarn install
```

2. 連接git lab

```shell
git submodule init
git submodule update
```

需要確認終端機有無取得 key 值

```shell
git submodule
```
>  ea19470dce4e94b61aaef8bd10da5b525d4b5830 backend-foundation (heads/develop)

如果沒有登入，則會跳出視窗提供登入

3. 開啟專案

```shell
yarn serve
```

4.專案路徑介紹/各檔案位置
===

以 w0-cms 專案為例

* <i class="fa fa-folder-open"></i>  為資料夾
* <i class="fa fa-file-code-o"></i>  為程式碼
* <i class="fa fa-html5"></i>  為 html
* <i class="fa fa-cog"></i> 為 env 設定檔
* <i class="fa fa-git-square"></i> 為 git 相關文件
* <i class="fa fa-gitlab"></i> 為 gitlab-ci.yml
* <i class="fa fa-info-circle"></i> 為 README
* <i class="fa fa-file-text-o"></i> 為 json
* <i class="fa fa-wrench"></i> 部分設定檔
* <i class="fa fa-file-excel-o"></i> 為 csv
* <i class="fa fa-picture-o"></i> 為 圖像檔案



 
> <details><summary><i class="fa fa-folder-open"></i>  backend-foundation</summary>
> 
> > <details><summary><i class="fa fa-folder-open"></i> public</summary>
> >
> > > <details><summary><i class="fa fa-folder-open"></i> img</summary>
> > > 
> > > > <details><summary><i class="fa fa-folder-open"></i> icons</summary>
> > > > 
> > > > > <i class="fa fa-picture-o"></i> android-chrome-192x192.png\
> > > > > <i class="fa fa-picture-o"></i> android-chrome-512x512.png\
> > > > > <i class="fa fa-picture-o"></i> android-chrome-maskable-192x192.png\
> > > > > <i class="fa fa-picture-o"></i> android-chrome-maskable-512x512.png\
> > > > > <i class="fa fa-picture-o"></i> apple-touch-icon-60x60.png\
> > > > > <i class="fa fa-picture-o"></i> apple-touch-icon-76x76.png\
> > > > > <i class="fa fa-picture-o"></i> apple-touch-icon-120x120.png\
> > > > > <i class="fa fa-picture-o"></i> apple-touch-icon-152x152.png\
> > > > > <i class="fa fa-picture-o"></i> apple-touch-icon-180x180.png\
> > > > > <i class="fa fa-picture-o"></i> apple-touch-icon.png\
> > > > > <i class="fa fa-picture-o"></i> favicon-16x16.png\
> > > > > <i class="fa fa-picture-o"></i> favicon-32x32.png\
> > > > > <i class="fa fa-picture-o"></i> msapplication-icon-144x144.png\
> > > > > <i class="fa fa-picture-o"></i> mstile-150x150.png\
> > > > > <i class="fa fa-picture-o"></i> safari-pinned-tab.png
> > > > </details>
> > > </details>
> > >
> > > <i class="fa fa-star"></i> favicon.ico\
> > > <i class="fa fa-html5"></i> index.html\
> > > <i class="fa fa-align-left"></i> robots.txt
> > </details>
> > <details><summary><i class="fa fa-folder-open"></i> src</summary>
> > 
> > > <details><summary><i class="fa fa-folder-open"></i> app</summary>
> > >
> > > > <details><summary><i class="fa fa-folder-open"></i> todo</summary>
> > > > 
> > > > ><details><summary><i class="fa fa-folder-open"></i> components</summary>
> > > > > 
> > > > > > <i class="fa fa-file-code-o"></i>  TodoCompose.vue\
> > > > > > <i class="fa fa-file-code-o"></i>  TodoList.vue\
> > > > > > <i class="fa fa-file-code-o"></i>  TodoMenu.vue
> > > > ></details>
> > > > ><details><summary><i class="fa fa-folder-open"></i> pages</summary>
> > > > >
> > > > > > <i class="fa fa-file-code-o"></i>  CompletedPage.vue\
> > > > > > <i class="fa fa-file-code-o"></i>  LabelPage.vue\
> > > > > > <i class="fa fa-file-code-o"></i>  TasksPage.vue
> > > > ></details>
> > > > ><details><summary><i class="fa fa-folder-open"></i> routes</summary>
> > > > >
> > > > > > <i class="fa fa-file-code-o"></i>  index.js
> > > > ></details>
> > > > ><details><summary><i class="fa fa-folder-open"></i> store</summary>
> > > > >
> > > > > > <details><summary><i class="fa fa-folder-open"></i> content</summary>
> > > > > > 
> > > > > > > <i class="fa fa-file-code-o"></i>  tasks.js
> > > > > > </details>
> > > > > >
> > > > > > <i class="fa fa-file-code-o"></i>  getters.js\
> > > > > > <i class="fa fa-file-code-o"></i>  index.js\
> > > > > > <i class="fa fa-file-code-o"></i>  mutations.js\
> > > > > > <i class="fa fa-file-code-o"></i>  state.js
> > > > ></details>
> > > > > <i class="fa fa-file-code-o"></i>  TodoApp
> > > > </details>
> > > </details>
> > > <details><summary><i class="fa fa-folder-open"></i> assets</summary>
> > > 
> > > > <details><summary><i class="fa fa-folder-open"></i> scss</summary>
> > > > 
> > > > > <details><summary><i class="fa fa-folder-open"></i> vuetify</summary>
> > > > > 
> > > > > > <details><summary><i class="fa fa-folder-open"></i> variables</summary>
> > > > > >
> > > > > > > <i class="fa fa-file-code-o"></i>  _colors.sass\
> > > > > > > <i class="fa fa-file-code-o"></i>  _dark.sass\
> > > > > > > <i class="fa fa-file-code-o"></i>  _elevations.sass\
> > > > > > > <i class="fa fa-file-code-o"></i>  _font.sass\
> > > > > > > <i class="fa fa-file-code-o"></i>  _global.sass\
> > > > > > > <i class="fa fa-file-code-o"></i>  _index.sass\
> > > > > > > <i class="fa fa-file-code-o"></i>  _light.sass\
> > > > > > > <i class="fa fa-file-code-o"></i>  _mixins.sass\
> > > > > > > <i class="fa fa-file-code-o"></i>  _utilities.sass
> > > > > > </details>
> > > > > > <i class="fa fa-file-code-o"></i>  overrides.sass
> > > > > </details>
> > > > > <i class="fa fa-file-code-o"></i>  theme.sass
> > > > </details>
> > > >
> > > > <i class="fa fa-picture-o"></i> logo.png\
> > > > <i class="fa fa-picture-o"></i> logo.svg
> > > </details>
> > > <details><summary><i class="fa fa-folder-open"></i> components</summary>
> > > 
> > > > <details><summary><i class="fa fa-folder-open"></i> common</summary>
> > > >
> > > > > <i class="fa fa-picture-o"></i> FlagIcon.vue\
> > > > > <i class="fa fa-picture-o"></i> TrendPercent.vue
> > > > </details>
> > > > <details><summary><i class="fa fa-folder-open"></i> dashboard</summary>
> > > > 
> > > > > <i class="fa fa-file-code-o"></i>  ActivityCard.vue\
> > > > > <i class="fa fa-file-code-o"></i>  InboxCard.vue\
> > > > > <i class="fa fa-file-code-o"></i>  SalesCard.vue\
> > > > > <i class="fa fa-file-code-o"></i>  SourcesCard.vue\
> > > > > <i class="fa fa-file-code-o"></i>  TableCard.vue\
> > > > > <i class="fa fa-file-code-o"></i>  TicketsCard.vue\
> > > > > <i class="fa fa-file-code-o"></i>  TodoCard.vue\
> > > > > <i class="fa fa-file-code-o"></i>  TrackCard.vue
> > > > </details>
> > > > <details><summary><i class="fa fa-folder-open"></i> navigation</summary>
> > > >
> > > > > <i class="fa fa-file-code-o"></i>  MainMenu.vue\
> > > > > <i class="fa fa-file-code-o"></i>  MainMenuFake.vue\
> > > > > <i class="fa fa-file-code-o"></i>  NavMenu.vue\
> > > > > <i class="fa fa-file-code-o"></i>  NavMenuFake.vue\
> > > > > <i class="fa fa-file-code-o"></i>  NavMenuItem.vue\
> > > > > <i class="fa fa-file-code-o"></i>  NavMenuItemFake.vue
> > > > </details>
> > > > <details><summary><i class="fa fa-folder-open"></i> toolbar</summary>
> > > >
> > > > > <i class="fa fa-file-code-o"></i>  ToolbarApps.vue\
> > > > > <i class="fa fa-file-code-o"></i>  ToolbarCurrency.vue\
> > > > > <i class="fa fa-file-code-o"></i>  ToolbarLanguage.vue\
> > > > > <i class="fa fa-file-code-o"></i>  ToolbarNotifications.vue\
> > > > > <i class="fa fa-file-code-o"></i>  ToolbarTimezone.vue\
> > > > > <i class="fa fa-file-code-o"></i>  ToolbarUser.vue
> > > > </details>
> > > >
> > > > <i class="fa fa-file-code-o"></i>  c-btn-toggle.vue\
> > > > <i class="fa fa-file-code-o"></i>  c-checkboxforGameServerId.vue\
> > > > <i class="fa fa-file-code-o"></i>  c-checkbox-group.vue\
> > > > <i class="fa fa-file-code-o"></i>  c-checkbox-subform.vue\
> > > > <i class="fa fa-file-code-o"></i>  c-condition.vue\
> > > > <i class="fa fa-file-code-o"></i>  c-date-picker.vue\
> > > > <i class="fa fa-file-code-o"></i>  c-date-pickerstartdate.vue\
> > > > <i class="fa fa-file-code-o"></i>  c-datetimeforonedate.vue\
> > > > <i class="fa fa-file-code-o"></i>  c-form.vue\
> > > > <i class="fa fa-file-code-o"></i>  c-login.vue\
> > > > <i class="fa fa-file-code-o"></i>  c-minorsetting.vue\
> > > > <i class="fa fa-file-code-o"></i>  c-panel.vue\
> > > > <i class="fa fa-file-code-o"></i>  c-qrcode.vue\
> > > > <i class="fa fa-file-code-o"></i>  c-radio.vue\
> > > > <i class="fa fa-file-code-o"></i>  c-select.vue\
> > > > <i class="fa fa-file-code-o"></i>  c-settings.vue\
> > > > <i class="fa fa-file-code-o"></i>  c-signin.vue\
> > > > <i class="fa fa-file-code-o"></i>  c-span.vue\
> > > > <i class="fa fa-file-code-o"></i>  c-spantwofield.vue\
> > > > <i class="fa fa-file-code-o"></i>  c-switch.vue\
> > > > <i class="fa fa-file-code-o"></i>  c-table.vue\
> > > > <i class="fa fa-file-code-o"></i>  c-text-area.vue\
> > > > <i class="fa fa-file-code-o"></i>  c-text-field.vue\
> > > > <i class="fa fa-file-code-o"></i>  c-time-picker.vue
> > > </details>
> > > <details><summary><i class="fa fa-folder-open"></i> config</summary>
> > >
> > > > <details><summary><i class="fa fa-folder-open"></i> menus</summary>
> > > > 
> > > > > <i class="fa fa-file-code-o"></i>  apps.menu.js\
> > > > > <i class="fa fa-file-code-o"></i>  pages.menu.js\
> > > > > <i class="fa fa-file-code-o"></i>  ui.menu.js
> > > > </details>
> > > >
> > > > <i class="fa fa-file-code-o"></i>  index.js\
> > > > <i class="fa fa-file-code-o"></i>  locales.js\
> > > > <i class="fa fa-file-code-o"></i>  navigation.js\
> > > > <i class="fa fa-file-code-o"></i>  theme.js\
> > > > <i class="fa fa-file-code-o"></i>  toolbar.js
> > > </details>
> > > <details><summary><i class="fa fa-folder-open"></i> layouts</summary>
> > > 
> > > > <i class="fa fa-file-code-o"></i>  AuthLayout.vue\
> > > > <i class="fa fa-file-code-o"></i>  DefaultLayout.vue
> > > </details>
> > > <details><summary><i class="fa fa-folder-open"></i> plugins</summary>
> > > 
> > > > <i class="fa fa-file-code-o"></i>  apexcharts.js\
> > > > <i class="fa fa-file-code-o"></i>  timezone.js\
> > > > <i class="fa fa-file-code-o"></i>  vuetify.js
> > > </details>
> > > <details><summary><i class="fa fa-folder-open"></i> router</summary>
> > > 
> > > > <i class="fa fa-file-code-o"></i>  submodule.js
> > > </details>
> > > <details><summary><i class="fa fa-folder-open"></i> store</summary>
> > >
> > > > <i class="fa fa-file-code-o"></i>  index.js 
> > > </details>
> > > <details><summary><i class="fa fa-folder-open"></i> views</summary>
> > >
> > > > <i class="fa fa-file-code-o"></i>  v-betrecord.vue\
> > > > <i class="fa fa-file-code-o"></i>  v-cms.vue\
> > > > <i class="fa fa-file-code-o"></i>  v-dashboard-wallet.vue\
> > > > <i class="fa fa-file-code-o"></i>  v-dashboard.vue\
> > > > <i class="fa fa-file-code-o"></i>  v-record-hierarchy.vue\
> > > > <i class="fa fa-file-code-o"></i>  v-reportgeneral-v2.vue\
> > > > <i class="fa fa-file-code-o"></i>  v-signin.vue
> > > </details>
> > > <i class="fa fa-file-code-o"></i>  App.vue
> > </details>
> > <details><summary><i class="fa fa-folder-open"></i> template-project</summary>
> > 
> > > <details><summary><i class="fa fa-folder-open"></i> src</summary>
> > > 
> > > > <details><summary><i class="fa fa-folder-open"></i> assets</summary>
> > > > 
> > > > > <i class="fa fa-file-text-o"></i> app-drawer.json\
> > > > > <i class="fa fa-picture-o"></i> background.jpg\
> > > > > <i class="fa fa-picture-o"></i> logo.png
> > > > </details>
> > > > <details><summary><i class="fa fa-folder-open"></i> locales</summary>
> > > > 
> > > > > <i class="fa fa-file-text-o"></i> zh-TW.json
> > > > </details>
> > > > <details><summary><i class="fa fa-folder-open"></i> routes</summary>
> > > > 
> > > > > <i class="fa fa-file-code-o"></i> index.js
> > > > </details>
> > > > <details><summary><i class="fa fa-folder-open"></i> store</summary>
> > > > 
> > > > > <details><summary><i class="fa fa-folder-open"></i> module</summary>
> > > > >
> > > > > >  <details><summary><i class="fa fa-folder-open"></i> api</summary>
> > > > > > 
> > > > > > > <i class="fa fa-file-code-o"></i> all.js\
> > > > > > > <i class="fa fa-file-code-o"></i> bet-record.js\
> > > > > > > <i class="fa fa-file-code-o"></i> config.js\
> > > > > > > <i class="fa fa-file-code-o"></i> schedule.js\
> > > > > > > <i class="fa fa-file-code-o"></i> user-wallet.js
> > > > > >  </details>
> > > > > >  <details><summary><i class="fa fa-folder-open"></i> condition</summary>
> > > > > > 
> > > > > > > <i class="fa fa-file-code-o"></i> all.js\
> > > > > > > <i class="fa fa-file-code-o"></i> bet-record.js\
> > > > > > > <i class="fa fa-file-code-o"></i> user-wallet.js
> > > > > >  </details>
> > > > > >  <details><summary><i class="fa fa-folder-open"></i> header</summary>
> > > > > > 
> > > > > > > <i class="fa fa-file-code-o"></i> all.js\
> > > > > > > <i class="fa fa-file-code-o"></i> bet-record.js\
> > > > > > > <i class="fa fa-file-code-o"></i> config.js\
> > > > > > > <i class="fa fa-file-code-o"></i> schedule.js\
> > > > > > > <i class="fa fa-file-code-o"></i> user-wallet.js
> > > > > >  </details>
> > > > > >
> > > > > > <i class="fa fa-file-code-o"></i> admin.js\
> > > > > > <i class="fa fa-file-code-o"></i> index.js
> > > > > </details>
> > > > > <i class="fa fa-file-code-o"></i> index.js
> > > > </details>
> > > > <i class="fa fa-file-code-o"></i>  i18n.js
> > >
> > > <i class="fa fa-cog"></i> .env \
> > > <i class="fa fa-cog"></i> .env.production.dev\
> > > <i class="fa fa-cog"></i> .env.production.uat\
> > > <i class="fa fa-git-square"></i> .gitignore\
> > > <i class="fa fa-gitlab"></i> .gitlab-ci.yml\
> > > <i class="fa fa-git-square"></i> .gitmodules\
> > > <i class="fa fa-wrench"></i>  .docker-compose.yml\
> > > <i class="fa fa-wrench"></i> Dockerfile\
> > > <i class="fa fa-wrench"></i> Dockerfile.node_module\
> > > <i class="fa fa-file-text-o"></i> jsconfig.json\
> > > <i class="fa fa-file-text-o"></i> package.json\
> > > <i class="fa fa-info-circle"></i> README.md\
> > > <i class="fa fa-file-code-o"></i> vue.config.js
> > </details>
> >
> > <i class="fa fa-wrench"></i>  .docker-compose.yml\
> > <i class="fa fa-wrench"></i> Dockerfile\
> > <i class="fa fa-wrench"></i> Dockerfile.node_module\
> > <i class="fa fa-file-text-o"></i> jsconfig.json\
> > <i class="fa fa-file-text-o"></i> package.json\
> > <i class="fa fa-info-circle"></i> README.md\
> > <i class="fa fa-file-code-o"></i> vue.config.js
> </details>
> <details><summary><i class="fa fa-folder-open"></i> public</summary>
>
> > <details><summary><i class="fa fa-folder-open"></i> mock</summary>
> > 
> > ><i class="fa fa-file-text-o"></i> 注單明細資料.json\
> > ><i class="fa fa-file-text-o"></i> agent.json\
> > ><i class="fa fa-file-text-o"></i> all-game-list.json\
> > ><i class="fa fa-file-text-o"></i> all-game-provider.json\
> > ><i class="fa fa-file-text-o"></i> apisetting.json\
> > ><i class="fa fa-file-text-o"></i> balance-history.json\
> > ><i class="fa fa-file-text-o"></i> bet-record-detail.json\
> > ><i class="fa fa-file-text-o"></i> by-member.json\
> > ><i class="fa fa-file-text-o"></i> by-txn.json\
> > ><i class="fa fa-file-text-o"></i> company-report.json\
> > ><i class="fa fa-file-text-o"></i> company.json\
> > ><i class="fa fa-file-text-o"></i> franchiser.json\
> > ><i class="fa fa-file-text-o"></i> game-statistics.json\
> > ><i class="fa fa-file-text-o"></i> member.json\
> > ><i class="fa fa-file-text-o"></i> platform-report.json\
> > ><i class="fa fa-file-text-o"></i> platform.json\
> > ><i class="fa fa-file-text-o"></i> record.json\
> > ><i class="fa fa-file-text-o"></i> white-list.json
> > </details>
> </details>
> 
> <details><summary><i class="fa fa-folder-open"></i> src</summary>
>
> > <details><summary><i class="fa fa-folder-open"></i> assets</summary>
> > 
> > > <i class="fa fa-file-text-o"></i> app-drawer.json \
> > > <i class="fa fa-picture-o"></i> background.jpg\
> > > <i class="fa fa-picture-o"></i> logo.png \
> > > <i class="fa fa-picture-o"></i> logoLoading.png\
> > > <i class="fa fa-file-text-o"></i> sidebar-extensions.json 
> > </details>
> > <details><summary><i class="fa fa-folder-open"></i> components</summary>
> > 
> > > <i class="fa fa-file-code-o"></i> c-dateTime-picker.vue\
> > > <i class="fa fa-file-code-o"></i> c-detail-iframe.vue\
> > > <i class="fa fa-file-code-o"></i> c-detail.vue\
> > > <i class="fa fa-file-code-o"></i> c-profile.vue\
> > > <i class="fa fa-file-code-o"></i> c-start-end-date.vue\
> > > <i class="fa fa-file-code-o"></i> c-text-field-v2.vue\
> > > <i class="fa fa-file-code-o"></i> w0-BetRecord_Search.vue\
> > > <i class="fa fa-file-code-o"></i> w0-signin.vue
> > </details>
> > <details><summary><i class="fa fa-folder-open"></i> locales</summary>
> > 
> > > <i class="fa fa-file-text-o"></i> en-US.json\
> > > <i class="fa fa-file-text-o"></i> id-ID.json\
> > > <i class="fa fa-file-text-o"></i> ja-JP.json\
> > > <i class="fa fa-file-text-o"></i> ko-KR.json\
> > > <i class="fa fa-file-text-o"></i> my-MM.json\
> > > <i class="fa fa-file-text-o"></i> th-TH.json\
> > > <i class="fa fa-file-text-o"></i> vi-VN.json\
> > > <i class="fa fa-file-text-o"></i> zh-CN.json\
> > > <i class="fa fa-file-text-o"></i> zh-TW.json
> > </details>
> > <details><summary><i class="fa fa-folder-open"></i> routes</summary>
> >
> > > <i class="fa fa-file-code-o"></i> index.js\
> > > <i class="fa fa-file-code-o"></i> submodule.js
> > </details>
> > <details><summary><i class="fa fa-folder-open"></i> store</summary>
> >
> > > <details><summary><i class="fa fa-folder-open"></i> module</summary>
> > > 
> > > > <details><summary><i class="fa fa-folder-open"></i> api</summary>
> > > > 
> > > > > <i class="fa fa-file-code-o"></i> agent.js\
> > > > > <i class="fa fa-file-code-o"></i> all-game-list.js\
> > > > > <i class="fa fa-file-code-o"></i> all-game-provider.js\
> > > > > <i class="fa fa-file-code-o"></i> all.js\
> > > > > <i class="fa fa-file-code-o"></i> apisetting.js\
> > > > > <i class="fa fa-file-code-o"></i> balance-history.js\
> > > > > <i class="fa fa-file-code-o"></i> bet-record.js\
> > > > > <i class="fa fa-file-code-o"></i> BetRecord_Index_L1.js \
> > > > > <i class="fa fa-file-code-o"></i> BetRecordDetail.js\
> > > > > <i class="fa fa-file-code-o"></i> by-member.js\
> > > > > <i class="fa fa-file-code-o"></i> by-txn.js\
> > > > > <i class="fa fa-file-code-o"></i> config.js\
> > > > > <i class="fa fa-file-code-o"></i> conversionrecord.js\
> > > > > <i class="fa fa-file-code-o"></i> franchiser.js\
> > > > > <i class="fa fa-file-code-o"></i> game-statistics.js\
> > > > > <i class="fa fa-file-code-o"></i> gamelist.js\
> > > > > <i class="fa fa-file-code-o"></i> gamereport.js\
> > > > > <i class="fa fa-file-code-o"></i> groupmanage.js\
> > > > > <i class="fa fa-file-code-o"></i> memberlist.js\
> > > > > <i class="fa fa-file-code-o"></i> schedule.js\
> > > > > <i class="fa fa-file-code-o"></i> user-wallet.js\
> > > > > <i class="fa fa-file-code-o"></i> usermanage.js\
> > > > > <i class="fa fa-file-code-o"></i> white-list.js
> > > > </details>
> > > > <details><summary><i class="fa fa-folder-open"></i> btn</summary>
> > > > 
> > > > > <i class="fa fa-file-code-o"></i> gamelist.js
> > > > </details>
> > > > <details><summary><i class="fa fa-folder-open"></i> condition</summary>
> > > > 
> > > > > <i class="fa fa-file-code-o"></i> agent.js\
> > > > > <i class="fa fa-file-code-o"></i> all-game-list.js\
> > > > > <i class="fa fa-file-code-o"></i> all-game-provider.js\
> > > > > <i class="fa fa-file-code-o"></i> all.js\
> > > > > <i class="fa fa-file-code-o"></i> apisetting.js\
> > > > > <i class="fa fa-file-code-o"></i> balance-history.js\
> > > > > <i class="fa fa-file-code-o"></i> bet-record.js\
> > > > > <i class="fa fa-file-code-o"></i> BetRecord_Index_L1.js \
> > > > > <i class="fa fa-file-code-o"></i> BetRecordDetail.js\
> > > > > <i class="fa fa-file-code-o"></i> by-member.js\
> > > > > <i class="fa fa-file-code-o"></i> by-txn.js\
> > > > > <i class="fa fa-file-code-o"></i> config.js\
> > > > > <i class="fa fa-file-code-o"></i> conversionrecord.js\
> > > > > <i class="fa fa-file-code-o"></i> franchiser.js\
> > > > > <i class="fa fa-file-code-o"></i> game-statistics.js\
> > > > > <i class="fa fa-file-code-o"></i> gamelist.js\
> > > > > <i class="fa fa-file-code-o"></i> gamereport.js\
> > > > > <i class="fa fa-file-code-o"></i> groupmanage.js\
> > > > > <i class="fa fa-file-code-o"></i> memberlist.js\
> > > > > <i class="fa fa-file-code-o"></i> schedule.js\
> > > > > <i class="fa fa-file-code-o"></i> user-wallet.js\
> > > > > <i class="fa fa-file-code-o"></i> usermanage.js\
> > > > > <i class="fa fa-file-code-o"></i> white-list.js
> > > > </details>
> > > > <details><summary><i class="fa fa-folder-open"></i> header</summary>
> > > > 
> > > > > <details><summary><i class="fa fa-folder-open"></i> headeritems</summary>
> > > > > 
> > > > > > <i class="fa fa-file-code-o"></i> BetRecordDetail.js\
> > > > > > <i class="fa fa-file-code-o"></i> conversionrecord.js\
> > > > > > <i class="fa fa-file-code-o"></i> groupmanage.js\
> > > > > > <i class="fa fa-file-code-o"></i> memberlist.js\
> > > > > > <i class="fa fa-file-code-o"></i> usermanage.js
> > > > > </details>
> > > > >
> > > > > <i class="fa fa-file-code-o"></i> agent.js\
> > > > > <i class="fa fa-file-code-o"></i> all-game-list.js\
> > > > > <i class="fa fa-file-code-o"></i> all-game-provider.js\
> > > > > <i class="fa fa-file-code-o"></i> all.js\
> > > > > <i class="fa fa-file-code-o"></i> apisetting.js\
> > > > > <i class="fa fa-file-code-o"></i> balance-history.js\
> > > > > <i class="fa fa-file-code-o"></i> bet-record.js\
> > > > > <i class="fa fa-file-code-o"></i> BetRecord_Index_L1.js \
> > > > > <i class="fa fa-file-code-o"></i> BetRecordDetail.js\
> > > > > <i class="fa fa-file-code-o"></i> by-member.js\
> > > > > <i class="fa fa-file-code-o"></i> by-txn.js\
> > > > > <i class="fa fa-file-code-o"></i> config.js\
> > > > > <i class="fa fa-file-code-o"></i> conversionrecord.js\
> > > > > <i class="fa fa-file-code-o"></i> franchiser.js\
> > > > > <i class="fa fa-file-code-o"></i> game-statistics.js\
> > > > > <i class="fa fa-file-code-o"></i> gamelist.js\
> > > > > <i class="fa fa-file-code-o"></i> gamereport.js\
> > > > > <i class="fa fa-file-code-o"></i> groupmanage.js\
> > > > > <i class="fa fa-file-code-o"></i> memberlist.js\
> > > > > <i class="fa fa-file-code-o"></i> schedule.js\
> > > > > <i class="fa fa-file-code-o"></i> user-wallet.js\
> > > > > <i class="fa fa-file-code-o"></i> usermanage.js\
> > > > > <i class="fa fa-file-code-o"></i> white-list.js
> > > > </details>
> > > > <details><summary><i class="fa fa-folder-open"></i> item</summary>
> > > > 
> > > > > <i class="fa fa-file-code-o"></i> agent.js\
> > > > > <i class="fa fa-file-code-o"></i> all-game-list.js\
> > > > > <i class="fa fa-file-code-o"></i> all-game-provider.js\
> > > > > <i class="fa fa-file-code-o"></i> all.js\
> > > > > <i class="fa fa-file-code-o"></i> apisetting.js\
> > > > > <i class="fa fa-file-code-o"></i> balance-history.js\
> > > > > <i class="fa fa-file-code-o"></i> bet-record.js\
> > > > > <i class="fa fa-file-code-o"></i> BetRecord_Index_L1.js \
> > > > > <i class="fa fa-file-code-o"></i> BetRecordDetail.js\
> > > > > <i class="fa fa-file-code-o"></i> by-member.js\
> > > > > <i class="fa fa-file-code-o"></i> by-txn.js\
> > > > > <i class="fa fa-file-code-o"></i> config.js\
> > > > > <i class="fa fa-file-code-o"></i> conversionrecord.js\
> > > > > <i class="fa fa-file-code-o"></i> franchiser.js\
> > > > > <i class="fa fa-file-code-o"></i> game-statistics.js\
> > > > > <i class="fa fa-file-code-o"></i> gamelist.js\
> > > > > <i class="fa fa-file-code-o"></i> gamereport.js\
> > > > > <i class="fa fa-file-code-o"></i> groupmanage.js\
> > > > > <i class="fa fa-file-code-o"></i> memberlist.js\
> > > > > <i class="fa fa-file-code-o"></i> schedule.js\
> > > > > <i class="fa fa-file-code-o"></i> user-wallet.js\
> > > > > <i class="fa fa-file-code-o"></i> usermanage.js\
> > > > > <i class="fa fa-file-code-o"></i> white-list.js
> > > > </details>
> > > >
> > > > <i class="fa fa-file-code-o"></i> admin.js\
> > > > <i class="fa fa-file-code-o"></i> index.js
> > > </details>
> > >
> > > <i class="fa fa-file-code-o"></i> dialog.js\
> > > <i class="fa fa-file-code-o"></i> index.js
> > </details>
> > <details><summary><i class="fa fa-folder-open"></i> views</summary>
> > 
> > > <i class="fa fa-file-code-o"></i> c-apexChart.vue\
> > > <i class="fa fa-file-code-o"></i> v-apiProduction.vue\
> > > <i class="fa fa-file-code-o"></i> v-BetRecord_Index_L1.vue\
> > > <i class="fa fa-file-code-o"></i> v-BetRecord_Index_L2.vue\
> > > <i class="fa fa-file-code-o"></i> v-BetRecord_Index_L3.vue\
> > > <i class="fa fa-file-code-o"></i> v-BetRecord_Index_RAW.vue\
> > > <i class="fa fa-file-code-o"></i> v-BetRecord_Index.vue\
> > > <i class="fa fa-file-code-o"></i> v-component_test.vue\
> > > <i class="fa fa-file-code-o"></i> v-conversionrecord.vue\
> > > <i class="fa fa-file-code-o"></i> v-editgroup.vue\
> > > <i class="fa fa-file-code-o"></i> v-edituser.vue\
> > > <i class="fa fa-file-code-o"></i> v-groupmanage.vue\
> > > <i class="fa fa-file-code-o"></i> v-headerProduction.vue\
> > > <i class="fa fa-file-code-o"></i> v-index.vue\
> > > <i class="fa fa-file-code-o"></i> v-memberlist.vue\
> > > <i class="fa fa-file-code-o"></i> v-Production.vue\
> > > <i class="fa fa-file-code-o"></i> v-record-hierarchy.vue\
> > > <i class="fa fa-file-code-o"></i> v-signin.vue\
> > > <i class="fa fa-file-code-o"></i> v-usermanage.vue
> > </details>
> >
> >  <i class="fa fa-file-code-o"></i>  i18n.js\
> >  <i class="fa fa-file-code-o"></i>  plugin.js
> </details>
> 
> <details><summary><i class="fa fa-folder-open"></i> tools</summary>
>
> ><i class="fa fa-file-code-o"></i> lang.js\
> ><i class="fa fa-file-excel-o"></i> langs.csv
> </details>
>
> <i class="fa fa-cog"></i> .env \
> <i class="fa fa-cog"></i> .env.production.dev\
> <i class="fa fa-cog"></i> .env.production.uat\
> <i class="fa fa-git-square"></i> .gitignore\
> <i class="fa fa-gitlab"></i> .gitlab-ci.yml\
> <i class="fa fa-git-square"></i> .gitmodules\
> <i class="fa fa-wrench"></i>  .docker-compose.yml\
> <i class="fa fa-wrench"></i> Dockerfile\
> <i class="fa fa-wrench"></i> Dockerfile.node_module\
> <i class="fa fa-file-text-o"></i> jsconfig.json\
> <i class="fa fa-file-text-o"></i> package.json\
> <i class="fa fa-info-circle"></i> README.md\
> <i class="fa fa-file-code-o"></i> vue.config.js\
> <i class="fa fa-wrench"></i> yarn.lock








> 修改日期 2023/01/03

5.組件介紹
==

* c-btn-toggle
     -> 按鈕組件
* c-checkbox-group
     -> 勾選按鈕群組
* c-checkbox-subform
    *-> w0特殊需求獨立設計用*
* c-condition
     -> 目前無使用
* c-date-picker
     -> 日期選擇器 目前無使用
* c-date-pickerstartdate
     -> 日期時間選擇 ， 包含常用日期
* c-form
     -> 驗證型表單
* c-qrcode
     -> QRCODE
* c-radio
     -> 單選選項
* c-select
     -> 下拉選單
* c-signin
     -> 登入組件
* c-switch
     -> 切換開關
* c-text-area
     ->  多行文字輸入框
* c-text-field
     -> 文字輸入框
* c-time-picker
     -> 時間選擇器

> 修改日期 2022/11/4

6.頁面設定
==

### 左上方導覽列標題設定

設定檔案位置：backend-foundation/src/layouts/AuthLayouts.vue

```javascript=
.d-flex.text-center.flex-column.flex-md-row.flex-grow-1
  .pa-2.pa-md-4.flex-grow-1.align-center.justify-center.d-flex.flex-column
    .layout-content.ma-auto.w-full
      slot
    .overline.mt-4 (檔案名稱位置)- {{version}}

```

---

### 左側導覽列設定

左側導覽列可以依照專案情況使用不同方式設置

1. 後端api回傳參數
2. 使用json檔案

w0 當前版本sideBar設置 會在w0-signin做處理，會跟後端api請求登入帳號所可以檢視的sideBar清單，並回傳功能權限。

請求完資料，會執行 this.sidebarCompose() ，並檢查回傳資料是否存在，如果順利取得資料，則會進入與sidebar-extensions.json mapping的步驟。


> 以下為後端回傳api 部分內容
```json
{
   "success":true,
   "message":"登入成功!",
   "data":{
      "token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImN0eSI6IkpXVCJ9...",
      "sideBars":[
         {
            "id":"99a1f879-1007-4a5e-a63d-f145a90aec7f",
            "name":"管理者帳號",
            "code":"manager",
            "authCode":null,
            "status":1,
            "uri":null,
            "parentId":null
         },
         {
            "id":"009de7fd-0d8f-4ac1-98f1-6d83cc3d0cb9",
            "name":"子帳號列表",
            "code":"account",
            "authCode":30,
            "status":1,
            "uri":"Backend/Manager/Index",
            "parentId":"99a1f879-1007-4a5e-a63d-f145a90aec7f"
         }
      ],
      "userName":"mao"
   }
}
```

| key      | 說明         | 型別     | 備註                                     |
| -------- | ------------ | -------- | ---------------------------------------- |
| id       | 唯一值       | (String) |                                          |
| name     | 功能名稱     | (String) |                                          |
| code     | 程式名稱     | (String) | 需與前端sideBar-extensions相符合         |
| authCode | 功能權限     | (Int)    |                                          |
| status   | 狀態         | (Int)    |                                          |
| uri      | 後端提供路由 | (String) | 可與前端協議，路徑由前端設置或是後端提供 |
| parentId | 父層唯一值   | (String) |                                          |


> 以下為 sidebar-extensions.json 部分內容 
```json
[
  {
    "name": "管理者帳號",
    "code": "manager",
    "icon": "mdi-account-details",
    "order": 1,
    "agents": [""]
  },
  {
    "name": "子帳號列表",
    "code": "account",
    "icon": "mdi-account",
    "to": "/report/usermanage",
    "agents": [""]
  },
  {
    "name": "組件開發",
    "authCode": 30,
    "code": "component",
    "icon": "mdi-wrench",
    "order": 9999,
    "id": "9999"
  },
  {
    "name": "畫面產生器",
    "code": "Production",
    "to": "/tool/Production",
    "parentId": 9999
  },
]

```

| key      | 說明               | 型別     | 備註                                     |
| -------- | ------------------ | -------- | ---------------------------------------- |
| name     | sideBar 名稱       | (String) | 與後端名稱為主                           |
| code     | 程式名稱           | (String) | 需與 api 回傳 code值一致                 |
| icon     | 使用圖標           | (String) | 後端沒回傳值的情況下 ，需自行設置        |
| to       | 前往路徑           | (String) | 可與後端協議，路徑由前端設置或是後端提供 |
| order    | 排序順序           | (Int)    |                                          |
| agents   | 可使用此頁面代理商 | (Array)  |                                          |
| authCode | 使用權限           | (Int)    |                                          |
| id       | 功能唯一值         | (String) |                                          |
| parentId | 父層唯一值        | (String) |                                          |



mapping 會將api回傳項目，依照對應的code 來做組合。


若出現 api回傳項目沒有的項目，則會檢查是否有id跟parentId，若是有id與parentId，則會加入要顯示的sideBar內容，即可自訂義需顯示內容






---


### 右上 profile設定

設定檔案位置：backend-foundation/src/components/toolbar/ToolbarUser.vue

```xml=
<template>
  <v-menu offset-y left transition="slide-y-transition">
    <template v-slot:activator="{ on }">
      <v-icon v-on="on">mdi-account-circle</v-icon>
      <!-- <v-btn icon class="elevation-2" v-on="on">
        <v-badge color="success" dot bordered offset-x="10" offset-y="10">
          
        </v-badge>
      </v-btn> -->
    </template>

    <!-- user menu list -->
    <v-list dense nav>
      <v-list-item
        v-for="(item, index) in menu"
        :key="index"
        :to="item.link"
        :exact="item.exact"
        :disabled="item.disabled"
        link
      >
        <v-list-item-icon>
          <v-icon small :class="{ 'grey--text': item.disabled }">{{
            item.icon
          }}</v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>{{
            item.key ? $t(item.key) : item.text
          }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>

      <!-- 顯示使用者名稱 -->
      <v-list-item>
        Hello
        {{
          $store.state.userInfo.userName == ""
            ? "user"
            : $store.state.userInfo.userName
        }}</v-list-item
      >

      <v-divider class="my-1"></v-divider>

      <v-list-item @click="signOut">
        <v-list-item-icon>
          <v-icon small>mdi-logout-variant</v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>{{ $t("logout") }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-menu>
</template>
```

---

### api 設定

設定檔案位置：store/module/api

1. 檔案命名方式： 對應網頁.js
2. 檔案內容格式：

```javascript=
export default {
  list: { uri: "/w1api/GetBetSummary", method: "get" },
};

```

#### key值說明

* api名稱/(對應觸發事件名稱) : { uri: api呼叫位置 (String) , method : 呼叫方法 (String)  }

---

### condition設定

設定檔案位置：store/module/condition

1. 檔案命名方式： 對應網頁.js
2. 檔案內容格式：

```js


//----------------------------------------
// #1
import item from "../item/usermanage";
import btn from "../btn/gamelist";


//----------------------------------------
//#2
const [account, status, roleId, addstatus, name, password, addRole, qrcode] =
  item;
const [add, edit, deletes, close] = btn;

//----------------------------------------
//#3
export default {
  //#3.1  
  list: [...item],
  //#3.2
  search: [account, roleId, status],
  //#3.3
  update: [
    account,
    name,
    {
      ...password,
      // bind: {
      //   rule: [
      //     (v) => (v && v.length <= 16) || "密碼上限長度16字元",
      //     (v) => (v && v.length >= 6) || "密碼最少需要6字元",
      //   ],
      // },
    },
    addstatus,
    addRole,
    qrcode,
  ],
  //#3.4
  add: [
    {
      ...account,
      bind: {
        label: "xaccount",
        rule: [
          (v) => !!v || "xaccountrequired",
          (v) => (v && v.length <= 16) || "xaccountlength",
          (v) => (v && v.length >= 2) || "xaccountmin",
          (v) => (v && /^[A-Za-z0-9_]{2,16}$/.test(v)) || "xaccountrule",
        ],
      },
    },
    {
      ...password,
      bind: {
        label: "password",
        rule: [
          (v) => !!v || "passwordrequired",
          (v) => (v && v.length <= 16) || "passwordmax",
          (v) => (v && v.length >= 2) || "passwordmin",
          (v) => (v && /^[A-Za-z0-9]{2,16}$/.test(v)) || " passwordrequired",
        ],
      },
    },
    {
      ...name,
      bind: {
        label: "name",
        rule: [
          (v) => !!v || "namerequired",
          (v) => (v && v.length <= 16) || "namemax",
          (v) => (v && v.length >= 2) || "namelength",
          (v) =>
            (v && /^[\u3400-\u9FA5A-Za-z0-9_]{2,16}$/.test(v)) || "namerule",
        ],
      },
    },
    addstatus,
    addRole,
  ],
  //#3.5
  btn: {
    add: {
      title: "adddata",
      item: [add, close],
    },
    update: {
      title: "editdata",
      item: [edit, close],
    },
    delete: {
      title: "delemsg",
      item: [deletes, close],
    },
  },
};





```

#### 程式碼解釋

以usermanage.js為範例，

1. import item、btn 來引用通用設定檔
2. 將要使用的通用變數 宣告出來
3. 開始設定頁面
    1. 在list部分 展開 item 裡面的通用設定
    2. 在 search部分 提供 查詢所需要的 變數 [ account, roleId, status ]
    3. 在 update部分 提供 更新所需要變數 [account,name,password,addstatus,addRole,qrcode]，並且將password部分直接展開
    4. 在add部分 依照各個不同變數，有不同的檢查條件，展開通用變數，然後綁定指定的條件與label名稱
    5. 宣告 頁面上使用到的按鈕，給予對應的title跟對應的事件

#### key值說明

| key   | 說明                  | 型別     |
|:----- | --------------------- | -------- |
| name  | 物件名稱              | (String) |
| is    | 對應 vuetify 組件名稱 | (String) |
| field | 對應組件 id           | (String) |
| alert | 對應組件提示訊息      | (String) |
| bind  | 組件對應參數設定      | (String) |

---

### dataTable HeaderItems 設定

用於設定dataTable的title，依照頁面不同需求，設定不同功能

1. 檔案命名方式： 對應網頁.js
2. 檔案內容格式：

```javascript=

//#1
const account = {
  value: "account",
  sortable: true,
  i18n: "xaccount",
};
const name = {
  value: "name",
  sortable: true,
  i18n: "xName",
};
const roles = {
  value: "roles",
  sortable: false,
  i18n: "group",
};
//#2
const status = {
  value: "status",
  sortable: false,
  i18n: "status",
  enable_icon: "mdi-account-check",
  disable_icon: "mdi-account-cancel",
};
//#3
const action = {
  value: "operate",
  sortable: false,
  i18n: "action",
  btns: [
    {
      icon: "mdi-pencil",
      action: "update",
      rules: (v) => {
        console.log("update", v);
        return true;
      },
    },
    {
      icon: "mdi-trash-can",
      action: "delete",
      rules: (v) => {
        console.log("delete", v);
        let bool = false;
        for (let i = 0; i < v.item.roles.length; i++) {
          if (
            //暫時寫死
            v.item.roles[i].id == "79d56654-6676-4edc-880a-ad5b961fcdc0"
          ) {
            bool = true;
          }
        }
        return !bool;
      },
    },
  ],
};

export { account, name, roles, status, action };

```

#### 程式碼解釋

1. 宣告title ，以object方式來記錄設定，基本預設為 value,sortable,i18n
    value為對應api回傳資料對應key值，sortable為是否能夠以此欄位來做排序設定，i18n為多語系對應文字

2. 宣告title，另外多出兩個不同key值，分別為 enable_icon、disable_icon，
    主要用來判別欄位狀態，是否啟用，啟用的話則使用enable_icon做為顯示，不啟用則使用disable_icon

3. 宣告titel， 多出btns這個key值，用來 觸發指定事件， 像是編輯此資料相關等，
    btns為陣列型別，接收object物件 ， 物件內格式:{ icon:對應的icon,action:對應觸發事件,rules:型別為         function，用於判斷是否顯示在當前的dataTable上，必需回傳Boolean值}
    ==btns陣列中的物件 {icon,action,rules} 皆為必填參數==

### dataTable Header顯示設定

設定檔案位置：store/module/header

1. 檔案命名方式： 對應網頁.js
2. 檔案內容格式：

```javascript=
import {
  account,
  name,
  roles,
  status,
  action,
} from "@/store/module/header/headeritems/usermanage";

export default [
  {
    bk: "xl",
    items: [account, name, roles, status, action],
  },
  {
    bk: "lg",
    items: [account, name, roles, status, action],
  },
  {
    bk: "md",
    items: [account, roles, status, action],
  },
  {
    bk: "sm",
    items: [account, status, action],
  },
  {
    bk: "xs",
    items: [account, status, action],
  },
];


```

#### 程式碼解釋

依照不同解析度(bk)，來決定dataTable上要顯示多少欄位(items)

#### key值說明

| key   | 說明          | 型別      |
| ----- | ------------- |:--------- |
| bk    | 解析度斷點    | (String)  |
| items | 對應欄位key值 | Array [ ] |

---

### button設定

設定檔案位置：store/module/btn

1. 檔案內容格式：

```javascript=
export default [
  {
    id: "add",
    text: "confirm",
    action: "add",
    color: "primary",
  },
  {
    id: "edit",
    text: "confirm",
    action: "edit",
    color: "primary",
  },
  {
    id: "delete",
    text: "confirm",
    action: "delete",
    color: "primary",
  },
  {
    id: "close",
    text: "closed",
    action: "close",
    color: "error",
  },
];

```

#### key值說明

| key    | 說明         | 型別     |
|:------ | ------------ | -------- |
| id     | 按鈕id       | (String) |
| text   | 按鈕顯示文字 | (String) |
| action | 按鈕對應事件 | (String) |
| color  | 按鈕顏色     | (String) |

---

### item設定

設定檔案位置：store/module/header

1. 檔案命名方式： 對應網頁.js
2. 檔案內容格式：

```javascript=
//#1
const account = {
  name: "account",
  is: "text-field",
  field: "account",
  bind: {
    label: "xaccount",
    hint: "帳號為英文、數字、底線，長度為 2~16 字元",
  },
};

const status = {
  name: "status",
  is: "radio",
  field: "status",
  defaultValue: null,
  bind: {
    label: "status",
    multiple: false,
    mandatory: true,
    items: [
      { value: null, title: "showAll" },
      { value: 1, title: "showEnabledXOnly" },
      { value: 0, title: "showDisabledXOnly" },
    ],
  },
};

const addstatus = {
  name: "status",
  field: "status",
  is: "switch",
  bind: {
    label: "status",
  },
};

const addRole = {
  name: "roles",
  field: "roles",
  is: "checkbox-group",
  text: "roles",
  childselectfirstid: true,
  lazyLoad: {
    uri: "/api/Role",
    payload: {
      pageSize: 10,
      pageIndex: 1,
      SortColumnName: "name",
      IsAscending: null,
    },

    method: "get",
    label: "name",
    value: "id",
  },
  bind: {
    label: "group",
  },
};

const name = {
  name: "name",
  is: "text-field",
  field: "name",
  bind: {
    label: "name",
    hint: "暱稱為中文、英文、數字、底線組成，長度為 16 字元",
    rule: [
      (v) => !!v || "暱稱為必填項目",
      (v) => (v && v.length <= 16) || "暱稱上限長度為16字元",
      (v) => (v && v.length >= 2) || "暱稱長度為2~16字元",
    ],
  },
};

const password = {
  name: "password",
  is: "text-field",
  field: "password",
  bind: {
    password: true,
    label: "password",
    hint: "密碼為為英文、數字共16字元，最少需要6字元",
  },
};

const qrcode = {
  name: "qrcode",
  is: "qrcode",
  field: "qrcode",
  bind: {
    label: "qrcode",
  },
};

const roleId = {
  name: "roleId",
  is: "select",
  field: "roleId",
  text: "roleId",
  Searchclasslist: true,
  Searchapi: "Searchclasslist",
  defaultValue: "",
  lazyLoad: {
    uri: "/api/Role",
    payload: {
      pageSize: 100,
      pageIndex: 1,
      SortColumnName: "name",
      IsAscending: true,
    },
    method: "get",
    label: "game_name_en",
    value: "id",
    selectval: "id",
    selectlabel: "name",
  },
  bind: {
    label: "group",
    defaultall: true,
    // items: [
    //   { label: "add", value: "add", appendIcon: "mdi-database" },
    //   { label: "reme ", value: "100" },
    //   { label: "edit ", value: "200" },
    //   { divider: true },
    //   { label: "get ", value: "300" },
    //   { label: "suspend", value: "400" },
    // ],
  },
};

export default [
  account,
  status,
  roleId,
  addstatus,
  name,
  password,
  addRole,
  qrcode,
];

```

#### 程式碼解釋

1. 依照所需顯示在畫面上的物件，宣告變數，並設置對應的組件、對應名稱、對應組件的細項設定等

#### key值說明

| key                | 說明                                                       | 型別     |
| ------------------ | ---------------------------------------------------------- |:-------- |
| name               | 物件名稱                                                   | (String) |
| is                 | 對應component                                              | (String) |
| field              | 對應變數名稱                                               | (String) |
| bind               | 對應 component 設定 (object) 對應項目可前往 [vuetify] 查詢 | (Object) |
| text               | 對應名稱                                                   | (String) |
| childselectfirstid | dialog設定變數                                             | (String) |
| defaultValue       | 預設值                                                     |          |
| `*` lazyLoad       | 需要加載項目                                               | (Object) |

`*` lazyLoad 物件格式 :

```javascript=
lazyLoad: {
    uri: "/api/Role",
    payload: {
      pageSize: 10,
      pageIndex: 1,
      SortColumnName: "name",
      IsAscending: null,
    },

    method: "get",
    label: "name",
    value: "id",
  },
```

##### payload key值說明

| key     | 說明          | 型別     |
|:------- |:------------- |:-------- |
| uri     | API位置       | (String) |
| payload | 請求資料/條件 | (Object) |
| method  | API 方法      | (String) |
| label   | 名稱          | (String) |
| value   | 對應欄位      | (String) |

---

7.使用者資料設定
===

使用者從login登入後，會取得token，sideBars
![](https://i.imgur.com/XHm35VH.png)

當前w0專案會將 sideBar 另外拆解成兩個部分 (w0-sigin執行)

1. 路徑位置
    * 路徑部分會分成父層與子層關係
![](https://i.imgur.com/IF9glSI.png)

#### key值解釋

| Key      | 說明         | 型別   |
|:-------- |:------------ |:------ |
| *children | 子層路徑項目 | Array  |
| code     | 功能代碼     | String |
| i18n     | 多語系       | String |
| icon     | icon圖示     | String |
| id       | 路徑唯一值   | String |
| name     | 路徑名稱     | String |

*children 展開後裡面項目也一樣
![](https://i.imgur.com/SYh1nQ2.png)

2. 功能權限
    * 紀錄每個頁面所擁有權限，僅記錄子層
    ![](https://i.imgur.com/fxkWjuw.png)

#### key值解釋

| key       | 說明         | 型別   |
|:--------- | ------------ |:------ |
| *authCode | CRUD權限加總 | Int    |
| code      | 功能代碼     | String |
| id        | 路徑唯一值   | String |
| name      | 路徑名稱     | String |
| status    | 狀態         | Int    |

*authCode 需要經過二進制轉換

``` javascript
/// 無權限
None = 0,
/// 搜尋權限
Read = 2,
/// 新增權限
Add = 4,
/// 編輯權限
Edit = 8,
/// 刪除權限
Delete = 16,
/// CRUD 權限 
All = Read | Add | Edit | Delete
```

當這些資料切分完成後，需存入vuex state userinfo裡面
以w0為例

程式會去呼叫 src/store/index.js裡面的 w0procAfterSignin

```javascript=
 this.$store.dispatch("domain/w0procAfterSignin", d);
```

![](https://i.imgur.com/opNHbVO.png)

會需要將四個值傳入
token,sideBars,path,authCode 可依照專案需求另外增加

另外也需要去
backend-foundation/src/store/index.js
![](https://i.imgur.com/BskK8KX.png)

還有需要設定
backend-foundation/src/router/submodule.js
![](https://i.imgur.com/dVelSf4.png)

vuex 的 userinfo 才會正常紀錄使用者所需要資訊

---

8.環境檔.env
===

```=
VUE_APP_I18N_LOCALE=zh-TW
VUE_APP_I18N_FALLBACK_LOCALE=zhHant
VUE_APP_AGENT=

```

| key                          | 解釋             |
|:---------------------------- |:---------------- |
| VUE_APP_I18N_LOCALE          | 多語系本地預設   |
| VUE_APP_I18N_FALLBACK_LOCALE | 多語系本地預設   |
| VUE_APP_AGENT                | 固定公司選項設定 |

---

9.協助建立設定檔
===

此功能僅限於 開發環境中顯示

:::warning
此項目目前還在測試中，部分功能尚未完全完成
:::

### 1. api設定檔生產器

頁面路徑 :  /tool/apiProduction

![](https://i.imgur.com/6HW0qVl.png)



欄位解釋 : 

| 欄位           | 說明                                  |
| ------------- | ------------------------------------- |
| name           | API 對應 action                       |
| uri            | API 位置                              |
| method         | API 請求方式，GET、POST、PUT、DELETE  |
| param          | 預設帶入欄位資料                      |
| IsAscending    | 使用排序功能(需要API有開啟此功能才有用作) |
| SoreColumnName | 排序欄位(需要IsAscending 功能開啟，且API有開啟此功能才有用作) |



#### 操作說明 :
依照順訊填寫左側欄位
  1. 填寫name 
  2. 填寫uri
  3. 選擇method
  4. 是否有需要預先帶入指定欄位資料，如果是則填寫對應欄位名稱
  5. 是否有需要排序欄位
  6. 如果選取第五點，則需要提供須排序的欄位名稱
  7. 填寫完畢後按下加入即可
  8. 若填寫完畢，可點選輸出按鈕
  ![](https://i.imgur.com/b4l2AkY.png)
  9. 點選複製
  10. 貼到js程式碼
  


### 2. header設定檔生產器

![](https://i.imgur.com/7cJcpXr.png)



欄位說明 : 
| 欄位         | 說明                      |
| ------------ | ------------------------- |
| label / i18n | table 的 th 欄位 顯示文字 |
| value        | 對應傳入資料的欄位        |
| sortable     | 是否可以啟用排序功能      |
| use Icon     | 是否替換為icon            |
| icon         | 使用的 *icon樣式 與顏色     |

* icon樣式可由此頁面查詢 https://materialdesignicons.com/


#### 操作說明 :
依照順訊填寫左側欄位
1. 填寫 label/i18n (若使用多語系項目，則需填入對應多語系名詞)
2. 填寫 value 
3. 選擇是否啟用排序功能
4. 選擇是否替換為 icon
5. 若第四點有開啟，請點選右側 + 符號進行新增icon操作
![](https://i.imgur.com/exvL5Fz.png)
6. icon圖示僅需填寫圖示名稱即可，程式會自動轉換為vuetify可以讀取模式
7. icon顏色可依照需求帶入
8. 按下加入按鍵

![](https://i.imgur.com/Z2kxlMH.png)

備註: table 項目皆可使用拖曳方式排列順序



### 3. 組件介面設定檔生產器

![](https://i.imgur.com/krnI5i1.png)

組件可選擇項目:


1. 文字輸入 (text-field)

![](https://i.imgur.com/t8eavD1.png)

欄位解釋 : 

| 欄位         | 說明           |
| ------------ | -------------- |
| field        | 組件唯一值     |
| name         | 組件名稱       |
| defalutValue | 預設值         |
| label        | 組件顯示標題   |
| hint         | 組件提示訊息   |
| isPassword   | 是否為密碼輸入 |
| uesRule      | 使用規則(點選使用後，勾選需使用的預設規則) |

2. 單選按鈕 (radio button)

![](https://i.imgur.com/TWgDVka.png)
欄位解釋 : 

| 欄位         | 說明         |
| ------------ | ------------ |
| field        | 組件唯一值   |
| name         | 組件名稱     |
| defalutValue | 預設值       |
| label        | 組件顯示標題 |
| items        | 單選按鈕選項 |


3. 切換開關 (switch button)

![](https://i.imgur.com/8NfWMKS.png)

欄位解釋 : 

| 欄位         | 說明         |
| ------------ | ------------ |
| field        | 組件唯一值   |
| name         | 組件名稱     |
| defalutValue | 預設值       |
| label        | 組件顯示標題 |



4. 下拉選單 (select)

![](https://i.imgur.com/ma2pg7Z.png)
![](https://i.imgur.com/JZ2crAR.png)



欄位解釋 : 

| 欄位         | 說明                                           |
| ------------ | ---------------------------------------------- |
| field        | 組件唯一值                                     |
| name         | 組件名稱                                       |
| defalutValue | 預設值                                         |
| label        | 組件顯示標題                                   |
| defaultAll   | 使用全部選項                                   |
| items        | 下拉選單項目                                   |
| lazyload     | 組件api設定                                    |
| uri          | api路徑                                        |
| method       | API 請求方式，GET、POST、PUT、DELETE           |
| selectVal    | 從api回傳中取出 select項目值 需填入對應key值   |
| selectLabel  | 從api回傳中取出 select項目標題 需填入對應key值 |
| payload      | api預設帶入資料                                |
| pageSize     | 回傳筆數                                       |
| pageIndex    | 回傳頁數                                       |






5. QrCode

![](https://i.imgur.com/3stINn2.png)

欄位解釋 : 

| 欄位         | 說明                                           |
| ------------ | ---------------------------------------------- |
| field        | 組件唯一值                                     |
| label        | 組件顯示標題                                   |

6. 切換按鈕 (button-toggle)

![](https://i.imgur.com/XcyfgiB.png)
![](https://i.imgur.com/0MVcGDR.png)

欄位解釋 : 

| 欄位         | 說明                                           |
| ------------ | ---------------------------------------------- |
| field        | 組件唯一值                                     |
| name         | 組件名稱                                       |
| defalutValue | 預設值                                         |
| label        | 組件顯示標題                                   |
| lazyload     | 組件api設定                                    |
| uri          | api路徑                                        |
| method       | API 請求方式，GET、POST、PUT、DELETE           |
| payload      | api預設帶入資料                                |
| pageSize     | 回傳筆數                                       |
| pageIndex    | 回傳頁數                                       |



7. 時間選單 (dateTime-picker)

![](https://i.imgur.com/I0eOrgE.png)
![](https://i.imgur.com/tmKmpbC.png)

欄位解釋 : 

| 欄位        | 說明                                 |
| ----------- | ------------------------------------ |
| field       | 組件唯一值                           |
| name        | 組件名稱                             |
| startTime   | 對應開始時間參數                     |
| endTime     | 對應結束時間參數                     |
| prependIcon | 顯示Icon                             |
| 常用時間    | 提供快速選取日期項目 |
| lazyload    | 提供給常用時間 來請求api                          |
| uri         | api路徑                              |
| method      | API 請求方式，GET、POST、PUT、DELETE |
| payload     | api預設帶入資料                      |
| pageSize    | 回傳筆數                             |
| pageIndex   | 回傳頁數                             |





---
.**假資料建立**
===

先建立一個public資料夾，再建立一個資料夾來存放假資料
![](https://i.imgur.com/jjD6lpI.png)

將uri直接指向假資料位置
![](https://i.imgur.com/2rn7A3T.png)

[vuetify]:https://vuetifyjs.com/zh-Hans/components/text-fields/



###### tags `W0封存` 