cuiqian2004
2025-06-19 619b47962e41f506baf7ce2b535b2de1fecc719e
pages/index/index.vue
@@ -1,143 +1,180 @@
<template>
   <view class="uni-page-index">
      <view class="v-area" v-for="(area,index) in data">
         <p :data-key="area.ID?area.ID:area.id">{{ area.Name?area.Name:area.name }}</p>
         <ul class="areaList">
            <!-- Mobox2 -->
            <li v-for="(app,key) in area.App">
               <a @tap="appCreate(app)" class="logo" :style="{'background-color':app.BkColor,'color':app.BkColor}">
                  <i :class="app.ImgFontStyle" :style="{'color':app.TxtColor}"></i>
               </a>
               <p :data-key="app.ID">{{ app.Name }}</p>
            </li>
            <!-- Mobox3 -->
            <li v-for="(app,key) in area.app_list">
               <a @tap="appCreate(app)" class="logo"
                  :style="{'background-color':app.bk_color,'color':app.bk_color}">
                  <i :class="app.img_font_style" :style="{'color':app.txt_color}"></i>
               </a>
               <p :data-key="app.id">{{ app.list_name||  app.name}}</p>
            </li>
   <view class="uni-page-index" :class="largeMode?'large-mode':''">
      <view class="area-list" v-if="isMobox3">
         <view class="v-area" v-for="(area,index) in data">
            <view class="area-name">{{ area.name }}</view>
            <view class="app-list">
               <view class="app" v-for="(app,key) in area.app_list" :key="key">
                  <a @click="onClickApp(app)" class="logo"
                     :style="{'background-color':app.bk_color,'color':app.bk_color}">
                     <text class="ico" :class="app.img_font_style" :style="{'color':app.txt_color}"></text>
                  </a>
                  <view @click="onClickApp(app)" class="app-name">{{app.name}}</view>
               </view>
            </view>
         </view>
         </ul>
      </view>
      <view class="area-list" v-else>
         <view class="v-area" v-for="(area,index) in data">
            <view class="area-name">{{ area.Name }}</view>
            <view class="app-list">
               <view class="app" v-for="(app,key) in area.App" :key="key">
                  <a @click="onClickApp(app)" class="logo"
                     :style="{'background-color':app.BkColor,'color':app.BkColor}">
                     <text class="ico" :class="app.ImgFontStyle" :style="{'color':app.TxtColor}"></text>
                  </a>
                  <view @click="onClickApp(app)" class="app-name">{{app.Name}}</view>
               </view>
            </view>
         </view>
      </view>
   </view>
</template>
<script>
   import Base64 from '../../components/js-base64/base64.js'
   import {
      Base64
   } from '@/js/Base64.js';
   import utils from "@/js/utils.js"
   import {
      areaFunc
   } from "@/api/index.js"
   import {
      getFuncTree
   } from "@/api/mobox.js"
   import buttonClickMixin from '@/mixins/button-click.js';
   export default {
      modules: {
         Base64,
      },
      mixins: [buttonClickMixin],
      onNavigationBarButtonTap(e) {
         // console.log(e.text);
         // console.log(e.fontSize);
         this.$store.state.areaFunc = '';
         this.$store.commit("classAttrList", null);
         this.$store.commit("classGridStyleInfo", null);
         this.$store.commit("dicValueInfo", null);
         this.$store.commit("subClassAttrList", null);
         this.$store.commit("subClassGridStyleInfo", null);
         //刷新当前页面
         // location.reload();
         uni.redirectTo({
            url: '../index/index?args=9999999999'
         });
         this.loadData()
      },
      data() {
         return {
            largeMode: getApp().globalData.largeMode || false,
            title: 'Hello',
            data: []
            data: [],
            isMobox3: getApp().globalData.isMobox3,
         }
      },
      onLoad(options) {
         console.log(options);
         // 获取所有AppType="MES",ClientType="2"(PDA)的引用领域功能点信息
         if (this.$store.state.areaFunc)
            this.data = this.$store.state.areaFunc.data;
         else {
            const appType = utils.session.getValue('app_type') || "MES";
            this.$store.dispatch('areaFunc', {
               app_type: appType
            }).then(success => {
               // console.log(success);
               if (success.code == '00000' || success.err_code == 0) {
                  this.data = success.data;
                  if (success.err_code != undefined) { //判断是否是Mobox3
                     success.result.forEach(async (area, index) => {
                        if (area.client_type == 2) { //判断类型是否是PDA类型
                        area.app_type= appType
                           await this.GetFuncTree(index, area);
                        }
                     });
                  }
               } else {
                  uni.showModal({
                     title: this.translateSys("error"),
                     content: success.msg,
                     showCancel: false,
                     confirmText: this.translateSys("cancel")
                  });
               }
            }).catch(ex => {
               // console.log(ex);
               uni.showModal({
                  title: this.translateSys("error"),
                  content: ex.errMsg,
                  showCancel: false,
                  confirmText: this.translateSys("cancel")
               });
            });
         }
         this.loadData()
      },
      methods: {
         async GetFuncTree(index, area) { //Mobox3获取应用领域的功能点
            this.data = [];
            var $this = this;
         setData: function(obj) {
            let that = this;
            let keys = [];
            let val, data;
            var json = {
               app_type: area.app_type,
               area_id: area.id,
               area_client_type: area.client_type,
               need_ace: '0',
            };
            this.$store.dispatch('GetFuncTree', json).then(success => {
               // console.log(success);
               if (success.err_code == 0) {
                  if ((success.result || []).length > 0) {
                     $this.data.push(success.result[0]);
                     console.log("onLoad", $this.data)
                     this.$store.commit("areaFunc", $this.data);
            Object.keys(obj).forEach(function(key) {
               keys = key.split(".");
               val = obj[key];
               data = that.$data;
               keys.forEach(function(key2, index) {
                  if (index + 1 == keys.length) {
                     that.$set(data, key2, val);
                  } else {
                     if (!data[key2]) {
                        that.$set(data, key2, {});
                     }
                  }
               } else {
                  uni.showModal({
                     title: this.translateSys("error"),
                     content: success.msg,
                     showCancel: false,
                     confirmText: this.translateSys("cancel")
                  });
               }
            }).catch(ex => {
               // console.log(ex);
               uni.showModal({
                  title: this.translateSys("error"),
                  content: ex.errMsg,
                  showCancel: false,
                  confirmText: this.translateSys("cancel")
                  data = data[key2];
               });
            });
         },
         appCreate(app) { //点击功能点跳转页面
            console.log(app);
            var paramStr = this.$store.state.OIMoboxSAPI ? app.param : app.Param;
            var appName = this.$store.state.OIMoboxSAPI ? (app.list_name || app.name) : app.Name;
            var defCode = this.$store.state.OIMoboxSAPI ? app.def_code : app.DefCode;
         async loadData() {
            try {
               this.setData({
                  data: []
               })
               const appType = utils.session.getValue('app_type') || "MES";
               const list = await areaFunc(appType, 1) || []
               const app = getApp()
               if (this.isMobox3) {
                  const list2 = []
                  for (let i in list) {
                     const area = list[i]
                     area.app_type = appType
                     const areaApp = await this.GetFuncTree(i, area)
                     console.log(areaApp)
                     if (areaApp) {
                        list2.push(areaApp)
                     }
                  }
                  this.setData({
                     data: list2
                  })
               } else {
                  this.setData({
                     data: list
                  })
               }
            } catch (ex) {
               console.log(ex);
               let exStr = JSON.stringify(ex)
               if (exStr == "{}")
                  exStr = ex
               let tip = typeof ex.errMsg == "string" ? ex.errMsg : exStr
               uni.showModal({
                  title: this.translateSys("error"),
                  content: tip,
                  showCancel: false,
                  confirmText: this.translateSys('close')
               });
            }
         },
         async GetFuncTree(index, area) { //Mobox3获取应用领域的功能点
            try {
               var param = {
                  app_type: area.app_type,
                  area_id: area.id,
                  area_client_type: area.client_type,
                  need_ace: 1,
               };
               const res = await getFuncTree(param) || []
               if (res.length > 0)
                  return res[0]
               else
                  return undefined
            } catch (ex) {
               console.log(ex);
               let exStr = JSON.stringify(ex)
               if (exStr == "{}")
                  exStr = ex
               let tip = typeof ex.errMsg == "string" ? ex.errMsg : exStr
               uni.showModal({
                  title: this.translateSys("error"),
                  content: tip,
                  showCancel: false,
                  confirmText: this.translateSys('close')
               });
               return undefined
            }
         },
         onClickApp(appInfo) {
            this.handleButtonClick((done) => {
               this.appCreate(appInfo)
               setTimeout(() => {
                  done(); // 重置状态
               }, 1000);
            });
         },
         appCreate(appInfo) { //点击功能点跳转页面
            console.log(appInfo);
            const app = getApp()
            var paramStr = this.isMobox3 ? appInfo.param : appInfo.Param;
            var appName = this.isMobox3 ? (appInfo.list_name || appInfo.name) : appInfo.Name;
            var defCode = this.isMobox3 ? appInfo.def_code : appInfo.DefCode;
            var param = "";
            if (paramStr) {
               //mobox2的param是json字符串
@@ -151,12 +188,12 @@
                  title: this.translateSys("tip"),
                  content: this.translate('tip_no_app_param'),
                  showCancel: false,
                  confirmText: this.translateSys("cancel")
                  confirmText: this.translateSys('close')
               });
               return;
            }
            if (defCode == '3018') {
               if (this.$store.state.OIMoboxSAPI) { //Mobox3
               if (this.isMobox3) { //Mobox3
                  uni.navigateTo({
                     // url:'../modal/3018?param='+param+"&titlename="+appName
                     url: '../modal/3018_2?param=' + param + "&titlename=" + appName
@@ -167,7 +204,7 @@
                  });
               }
            } else if (defCode == '3037') {
               if (this.$store.state.OIMoboxSAPI) { //Mobox3
               if (this.isMobox3) { //Mobox3
                  uni.navigateTo({
                     // url:'../modal/3037?param='+param+"&titlename="+appName
                     url: '../modal/3037_2?param=' + param + "&titlename=" + appName
@@ -178,31 +215,37 @@
                  });
               }
            } else if (defCode == '3200') {
               if (this.$store.state.OIMoboxSAPI) { //Mobox3
               if (this.isMobox3) { //Mobox3
                  uni.navigateTo({
                     url: '../modal/3200?param=' + param + "&titlename=" + appName
                  });
               }
            } else if (defCode == '3201') {
               if (this.$store.state.OIMoboxSAPI) { //Mobox3
               if (this.isMobox3) { //Mobox3
                  uni.navigateTo({
                     url: '../modal/3201?param=' + param + "&titlename=" + appName
                  });
               }
            } else if (defCode == '3202') {
               if (this.isMobox3) { //Mobox3
                  uni.navigateTo({
                     url: '../modal/3202?param=' + param + "&titlename=" + appName
                  });
               }
            } else if (defCode == '5600') { //码盘
               if (this.$store.state.OIMoboxSAPI) { //Mobox3
               if (this.isMobox3) { //Mobox3
                  uni.navigateTo({
                     url: '../modal/5600?param=' + param + "&titlename=" + appName
                  });
               }
            } else if (defCode == '5601') { //码盘
               if (this.$store.state.OIMoboxSAPI) { //Mobox3
               if (this.isMobox3) { //Mobox3
                  uni.navigateTo({
                     url: '../modal/5601?param=' + param + "&titlename=" + appName
                  });
               }
            } else if (defCode == '5602') { //分拣
               if (this.$store.state.OIMoboxSAPI) { //Mobox3
               if (this.isMobox3) { //Mobox3
                  uni.navigateTo({
                     url: '../modal/5602?param=' + param + "&titlename=" + appName
                  });
@@ -212,13 +255,6 @@
            // uni.redirectTo({
            //    url:'../index/index?args=9999999999'
            // });
         },
         ontap(e) { //扫码功能
            // console.log(e.target)
            getApp().onScan((result) => {
               // console.log(result.decodedata);
               this.$data.data[e.target.dataset['key']] = result.decodedata;
            })
         },
         translate(t) {
            if (typeof this.$t == "function") return this.$t(`page.${t}`)
@@ -234,35 +270,71 @@
<style lang="scss">
   .uni-page-index {
      width: 100vw;
      min-height: 100vh;
      width: 750rpx;
      height: 100vh;
      background: #EAEAEA;
      padding: 1rpx 0rpx;
      display: flex;
      .area-list {
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
         overflow-y: auto;
      .v-area {
         border-radius: 12rpx;
         margin: 30rpx;
         padding: 10rpx;
         background: #FFFFFF;
         .v-area {
            border-radius: 12rpx;
            margin: 10rpx;
            padding: 10rpx;
            background: #FFFFFF;
            display: flex;
            flex-direction: column;
            width: calc(100% - 40rpx);
            .area-name {
               width: 100%;
               padding: 10rpx;
            }
            .app-list {
               width: 100%;
               padding: 0;
               display: flex;
               flex-direction: row;
               flex-wrap: wrap;
               .app {
                  padding: 20rpx 25rpx 15rpx 25rpx;
                  text-align: center;
                  width: 125rpx;
                  display: flex;
                  flex-direction: column;
                  .logo {
                     height: 105rpx;
                     width: 105rpx;
                     border-radius: 20rpx;
                     padding: 10rpx;
                     color: #000000;
                     border: 0px solid rgb(221, 221, 221);
                     .ico {
                        color: #000000;
                        line-height: 105rpx;
                        font-size: 24px;
                     }
                  }
                  .app-name {
                     padding-top: 10rpx;
                  }
               }
            }
         }
      }
      .areaList {
         padding: 0;
      }
      .areaList li {
         /* border: 1px solid #0062CC; */
         list-style: none;
         /* width: 120rpx; */
         display: inline-block;
         padding: 30rpx 10rpx 16rpx 10rpx;
         text-align: center;
         font-size: 14px;
         width: 100px;
         vertical-align: text-top;
      }
      .logo {
         height: 120rpx;
@@ -275,10 +347,31 @@
         border: 0px solid rgb(221, 221, 221);
      }
      .logo i {
         color: #000000;
         font-size: 40px;
         line-height: 53px;
   }
   .uni-page-index.large-mode {
      .area-name {
         font-size: 30px;
      }
      .app {
         padding: 20rpx 25rpx 15rpx 25rpx;
         width: 175rpx  !important;
         .logo {
            height: 150rpx  !important;
            width: 150rpx  !important;
            .ico {
               line-height: 150rpx  !important;
               font-size: 30px  !important;
            }
         }
         .app-name {
            padding-top: 10rpx !important;
         }
      }
   }
</style>