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封存`