From 4d620ac9470a0764bcfcaecf86d4f866b05eb7bd Mon Sep 17 00:00:00 2001
From: "luoJunYong.123" <you@example.com>
Date: Wed, 20 Apr 2022 17:15:35 +0800
Subject: [PATCH] update

---
 src/components/checkPhoto/index.vue  | 28 +++++++------
 src/components/dialog/index.vue      |  1 +
 src/mixins/saveData/index.js         |  8 ++++
 src/mixins/saveSystemModule/index.js |  3 ++
 src/mixins/tipsBefore/index.js       |  7 ++++
 src/pages/counter/list/index.vue     | 62 +++++++++++++++++++++++-----
 src/store/modules/system.js          |  4 ++
 7 files changed, 90 insertions(+), 23 deletions(-)

diff --git a/src/components/checkPhoto/index.vue b/src/components/checkPhoto/index.vue
index 0294869..c94ace3 100644
--- a/src/components/checkPhoto/index.vue
+++ b/src/components/checkPhoto/index.vue
@@ -1,12 +1,21 @@
 <template>
+
+    <!-- 这个是图片查看器组件，装上后可以通过双击传进来展示的信息进行不同图片的展示（图片上有文字，如你所见，文字是通过style定位上去的。）template中的if判断不同证件id码上不同文字 -->
+
     <div class="relative -translate-y-2/4 overflow-hidden" style="margin-top: 10px;color: black;" id="checkPhoto" v-drag>
-        <!-- <div class="bg-gray-400" @click="closeIt">关闭</div> -->
+        
+
+        <!-- 这个部分调整关闭按钮的位置，因为有些图片关闭按钮会覆盖到一些东西 -->
         <template v-if="imgSrcId==413">
             <img class="absolute cursor-pointer hover:bg-red-700" src="@/assets/svg/close.svg" alt="" @click="closeIt"  style="right: 20px; top: 10px;" />
         </template>
         <template v-else>
             <img class="absolute cursor-pointer hover:bg-red-700" src="@/assets/svg/close.svg" alt="" @click="closeIt"  style="right: 50px; top: 30px;" />
         </template>
+
+
+
+        <!-- 这个部分就是将文字码上去 -->
         <template v-if="imgSrcId==14">
             <h3 class="text-xl" style="left: 105px;top: 120px;">{{ dataFlow.userName }}</h3>
             <h3 class="text-xl" v-if="dataFlow.sex==1" style="left: 446px;top: 110px;">√</h3>
@@ -132,6 +141,8 @@
             <h3 class="text-md" style="left: 450px;top: 235px;">郭平安</h3>
             <h3 class="text-md" style="left: 116px;top: 306px;letter-spacing: 3.3px">{{ ('' + dataFlow.transMoney).padStart(8, 0).padEnd(10, 0) }}</h3>
         </template>
+
+        <!-- 这里就是要展示的图片 dia-header让它可以带动整个组件被拖拽 因为这里的v-drag会去搜这个组件内的dia-header -->
         <img :src="imgSrc" class="imgPop imgIndex min-w-full dia-header" :alt="imgSrcName" :title="imgSrcName" ref="showPage">
         <slot />
     </div>
@@ -178,7 +189,7 @@ export default {
         
     },
     created() {
-        // dataFlow.transMoney 表示要从钱箱中取出多少钱
+        // 获取现在的时间
         this.nowDate = (() => {
             const date = new Date()
             var y = date.getFullYear();  
@@ -189,16 +200,6 @@ export default {
             return y + '-' + m + '-' + d; 
         })()
     },
-    watch: {
-        showImg: {
-            handler(newVal) {
-                if(newVal) {
-                    
-                }
-            },
-            immediate: true
-        }
-    },
     methods: {
         closeIt() {
             this.$emit('update:showImg', false)
@@ -215,6 +216,7 @@ export default {
                 return this.nowDate.split('-')[index]
             }
         },
+        // 业务需求将钱币显示为大写，比如 千 -> 仟 这个方法可以做到 这里是要连起来的 具体看用在哪
         transMoney() {
             return (str) => {
                 var num = parseFloat(str);
@@ -243,6 +245,8 @@ export default {
                 
             }
         },
+
+        // 业务需求将数字转化为大写 比如 2022.4.20 -> 贰零贰贰 肆 贰拾
         mapNumber() {
             // 通过map映射将相应的数字对应上
             const myMap = new Map([
diff --git a/src/components/dialog/index.vue b/src/components/dialog/index.vue
index 26c5547..c7e002b 100644
--- a/src/components/dialog/index.vue
+++ b/src/components/dialog/index.vue
@@ -490,6 +490,7 @@ export default {
         -webkit-box-shadow:0;
         box-shadow: 0 0 0 0!important;
         border: 0!important;
+        // display: none;
     }
     /deep/.el-form-item {
         label {
diff --git a/src/mixins/saveData/index.js b/src/mixins/saveData/index.js
index adb965a..81ecdcf 100644
--- a/src/mixins/saveData/index.js
+++ b/src/mixins/saveData/index.js
@@ -1,4 +1,8 @@
 export const saveData = {
+
+    // 通过混入的方式可以保存数据 由于混入函数的created是先于引入混入的组件的created执行的，所以可以先拿到上次推出时的数据直接先一步渲染。
+    // 其实这个函数我写再tipsBefore里了 不过有些页面是不需要依赖前一个页面的，所以区分开了。
+
     created() {
         if(sessionStorage.getItem(this.moduleName)) {
             const getBeforeData = JSON.parse(sessionStorage.getItem(this.moduleName))
@@ -8,10 +12,14 @@ export const saveData = {
         }
     },
     methods: {
+        // 清空这个组件所保存的数据
         clearSaveData() {
             sessionStorage.removeItem(this.moduleName)
         }
     },
+
+
+    // 销毁组件之前将该组件中的数据保存起来
     beforeDestroy() {
         let tmpForm = {}
         for(const key in this.form) {
diff --git a/src/mixins/saveSystemModule/index.js b/src/mixins/saveSystemModule/index.js
index dca838a..4bbdfd7 100644
--- a/src/mixins/saveSystemModule/index.js
+++ b/src/mixins/saveSystemModule/index.js
@@ -1,4 +1,7 @@
 export default {
+    
+    // 保存vuex中的数据
+
     created() {
         if(sessionStorage.getItem('businessSelect')) {
             // 调试时注释掉
diff --git a/src/mixins/tipsBefore/index.js b/src/mixins/tipsBefore/index.js
index aa0bd0b..6a9de9f 100644
--- a/src/mixins/tipsBefore/index.js
+++ b/src/mixins/tipsBefore/index.js
@@ -1,3 +1,6 @@
+// 如果正在做的业务中，当前模块需要先完成前一个模块，那就会提示。
+
+
 const obj = {
     // 'consumerClient': '/counter/list/manage/consumerClient',
     // 'currentAccount/openAccount': '/counter/list/manage/currentAccount',
@@ -30,12 +33,16 @@ export default {
         
     },
     created() {
+
+        // 将上次保存的这个模块的数据写上页面，因为上次退出时保存了这个模块的数据 因为现在不用拦截,所以我写在saveData函数里了
         if(sessionStorage.getItem(this.moduleName)) {
             const getBeforeData = JSON.parse(sessionStorage.getItem(this.moduleName))
             for(const key in getBeforeData) {
                 this.form[key] = Number(getBeforeData[key])? Number(getBeforeData[key]): getBeforeData[key]
             }
         }
+
+        // 如果所选业务需要
         if(this.inMyWork(this.moduleName)) {
             if(this.needsModule(this.moduleName)) {
                 this.isNeedBefore = true
diff --git a/src/pages/counter/list/index.vue b/src/pages/counter/list/index.vue
index 832a51f..1be3f05 100644
--- a/src/pages/counter/list/index.vue
+++ b/src/pages/counter/list/index.vue
@@ -455,9 +455,9 @@
             :visible.sync="tipsDialog"
             custom-class="bgNone"
             center>
-                <div class="data-dia tipsDialog" ref="dataDia2" v-drag>
-                    <div class="dia-header h-1/6">
-                        <div class="data-title">提示</div>
+                <div class="data-dia tipsDialog" ref="dataDia2">
+                    <div class="dia-header h-2/6" >
+                        <div class="data-title2">提示</div>
                         <img class="close" v-lazy="lazyImg[28]" alt="" @click="changeTipsDialog(false)" />
                     </div>
                     <h3>您已选择:</h3>
@@ -602,7 +602,7 @@ export default {
                 {name:'现金', src:require('@/assets/img/goods/cash-sm.png'), id:15},
                 {name:'身份证复印件', src:require('@/assets/img/idCard-copy-sm.png'), id:23},
             ],
-            // id乱配
+            // 这里id只是起到v-key避免重复的作用 因为后台只需要判断值的和是否等于判分点
             cashboxGoodsShelf2: [
                 {name:'100元', src:require('@/assets/img/cash/100元.png'), id:15, num: ''},
                 {name:'50元', src:require('@/assets/img/cash/50元.png'), id:4399, num: ''},
@@ -683,6 +683,7 @@ export default {
                 {name:'业务收费凭证回单',src:require('@/assets/img/goods/ywsfpz.png'),id:481},
                 {name:'业务收费凭证凭证联',src:require('@/assets/img/goods/ywsfpz.png'),id:482},
             ],
+            // 这个是临时展示的
             receptionList:[
 
             ],
@@ -725,6 +726,8 @@ export default {
             //     { src: require('@/assets/img/logos/账户服务.svg') },
             //     { src: require('@/assets/img/logos/重空现金.svg') }
             // ],
+
+            // 用来展示完成Logo,后来说不需要
             finishPng: require('@/assets/img/finish.png'),
             finishGoods: {
                 moneyBox: false,
@@ -802,6 +805,7 @@ export default {
         };
     },
     computed: {
+        // 印章盒的印章id与名字对应，其他地方有用，易于操作
         isSeal() {
             const stampMap2 = {
                 429: '业务专用章',
@@ -849,9 +853,13 @@ export default {
                 }
             }
         },
+
+        // 将拿了多少钱渲染上页面，依赖于cashboxGoodsShelf2
         backMoneyArr() {
             return this.cashboxGoodsShelf2.filter(item => item.num>0)
         },
+
+        // 计算一共拿了多少钱
         backMoneyTotal() {
             return this.cashboxGoodsShelf2.reduce((total, item) => {
                 if(item.name.includes('元')) {
@@ -863,6 +871,8 @@ export default {
             }, 0)
             // return 666
         },
+
+        // 这些id是需要输入确认密码的 然后needPasswordAgain属性可以拿去执行一些判断
         needPasswordAgain() {
             if(this.id == '62,1' || this.id == '62,2' || this.id == '62,3' || this.id == '129' || this.id == '167' || this.id == '301') {
                 return true
@@ -890,13 +900,18 @@ export default {
             }
             return arr
         },
+
+        // 依赖于当前选中了哪个业务
         businessKey() {
             return this.$store.state.system.businessKey
         },
-        full: function () {// 全屏
+        // 依赖于vuex中的全屏，让后一些方法可以改变它的值。
+        full: function () {
             return this.$store.state.system.fullScreen;
         },
-        showPop:function(){/* 展示弹框 */
+
+        // 展示弹框
+        showPop:function(){
             const dataDia = this.$refs.dataDia
             // 每次显示弹框时重置方位
             if (dataDia) {
@@ -921,7 +936,8 @@ export default {
         showGoods:function() {
             return this.$store.state.system.showGoods
         },
-        myMap() { // 用做对照表 相应的popText对应相应的数组名字
+        // 用做对照表 相应的popText对应相应的数组名字 这个和vuex中的businessSelect中的信息是耦合的，要确保名称抄对，便于物品的交互
+        myMap() { 
             if(this.popText === '钱箱') {
                 return 'moneyBox'
             }else if(this.popText === '客户签字'){
@@ -958,6 +974,8 @@ export default {
         })
     },
     watch: {
+
+        // 如果图片放大器被关了，则重置信息
         showImg(newVal) {
             if(!newVal) {
                 this.imgSrc = ''
@@ -967,8 +985,6 @@ export default {
                 
                 
             }
-            
-            
         },
         '$route.path': function (val) {
             // 控制弹框显隐
@@ -979,11 +995,15 @@ export default {
                 this.manageVisible = false;
             }
         },
+
+        // 打开电脑录入的时候关闭物品栏
         manageVisible(newVal) {
             if(newVal === false) {
                 this.changeShowGoods(false)
             }
         },
+
+        // 展开交互的物品栏
         showPop(newVal) {
             if(newVal) {
                 if(this.popText === '重要空白凭证箱') {
@@ -1139,8 +1159,9 @@ export default {
                         if(that.$refs.popUp) {
                             if(that.myMap) {
                                 const id = that.goodsShelfTotalData[evt.oldIndex].id
-                                
+                                // 将物品从物品栏中取出
                                 that.outThingsGoods([id])
+                                // 将物品放入物品栏
                                 that.pushThings({ idArr: [id], name: that.myMap})
                             }else{
                                 for(var i=0;i<that.popArr.length;i++){
@@ -2610,6 +2631,22 @@ export default {
             // background: url(../../../assets/img/dia-title.png);
             background-size: 250px 50px;
         }
+        .data-title2 {
+            height:72px;
+            width: 300px;
+            margin: 0 auto;
+            font-size: 24px;
+            line-height: 72px;
+            font-weight: 600;
+            letter-spacing: 0.29px;
+            font-family: PingFangBold;
+            text-align: center;
+            color: #fff;
+            background: url(../../../assets/img/dia-title.png) 0 0 / cover no-repeat;
+            // background-position-x: 25px;
+            // background: url(../../../assets/img/dia-title.png);
+            background-size: 300px 72px;
+        }
         .close {
             position: absolute;
             top: 15px;
@@ -3065,6 +3102,7 @@ color: #fff;
     box-shadow: 0 0 0 0!important;
     .peopleDialog {
         width: 580px;
+        min-height: 466px;
         height: 466px;
         background: #FFFFFF;
         border-radius: 16px;
@@ -3098,7 +3136,9 @@ color: #fff;
     }
     .tipsDialog {
         width: 580px;
-        height: 520px;
+        // height: 520px;
+        min-height: 300px;
+        padding-bottom: 50px;
         background: #FFFFFF;
         border-radius: 16px;
         box-shadow: 0 0 0 0!important;
diff --git a/src/store/modules/system.js b/src/store/modules/system.js
index 30e4a69..4d28521 100644
--- a/src/store/modules/system.js
+++ b/src/store/modules/system.js
@@ -115,6 +115,8 @@ const sex = 2 // 1为男,2为女。
     通过不同的键值对表示不同的业务。其实更优秀的做法是将业务抽离成一个对象class，业务选择对象也抽离成一个class当成全局游戏对象。因为一开始没这样写后面改着麻烦所以就没改了。
 */
 
+
+// 因为要求是在任何业务中，电脑中所有其他业务的信息也要正常显示，
 const allDataFlow = {
     peopleNumber,
     userName,
@@ -156,6 +158,8 @@ const allDataFlow = {
     'corporateClient': false,
 }
 
+// 因为vuex中的数据是缓存在sessionStorage中的，所以重新开始业务需要刷新所有的业务，所以一刷新我们就将这个初始状态替换到vuex中去。
+// 实际上vuex中的数据是做缓存效果，可以有效减少请求服务器的次数，提高性能,容错性也非常好，因为一些地方后端是没缓存的，比如物品栏，资料，印章盒，就算需求变动前端很容易改。
 const myInitState =  {
     '业务一': {
         id: 489,