part code yestday

TODO.md

@@ -37,6 +37,11 @@
 - [ ] 根据商品 id 查询详情的接口
 - [ ] 商品库搜索商品接口
 
+-- 2023/12/12 --
+
+- [ ] 分类接口需要根据字段 展示全部分类数据或者 展示有商品的数据
+- [ ] 分类规格数据
+
 ## Warning
 
 - [ ] 申请详情中的 发起人流程 状态是否需要？

src/App.vue

@@ -1,6 +1,25 @@
 <template>
   <div id="app">
-    <router-view />
+    <!-- <router-view v-slot="{ Component }">
+      <keep-alive :includes="['Applyfor']">
+        <component :is="Component" />
+      </keep-alive>
+    </router-view> -->
+
+    <!-- <keep-alive :includes="['Applyfor']">
+      <router-view></router-view>
+    </keep-alive> -->
+
+    <keep-alive>
+      <router-view v-if="$route.meta.keepAlive">
+        <!-- 这里是会被缓存的视图组件，比如 Home！ -->
+      </router-view>
+    </keep-alive>
+
+    <router-view v-if="!$route.meta.keepAlive">
+      <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
+    </router-view>
+
     <!-- <nav-bar v-show="!isShowtabbar"></nav-bar> -->
     <tab-bar v-show="isShowtabbar"></tab-bar>
   </div>
@@ -13,7 +32,6 @@ import TabBar from '@/components/TabBar'
 
 import { platform } from '@/utils/dingtalk.js'
 
-
 export default {
   components: {
     TabBar,
@@ -45,8 +63,9 @@ export default {
       tabbarActive: 0,
     };
   },
+
   computed: {
-    isShowtabbar () {
+    isShowtabbar() {
       const { path } = this.$route
       return this.allowPath.includes(path)
     }
@@ -66,8 +85,8 @@ export default {
         this.$store.dispatch('user/login')
       }
 
-      
-    } catch (e) {} /* eslint-disable-line */
+
+    } catch (e) { } /* eslint-disable-line */
 
   }
 }

src/api/goods.js

@@ -0,0 +1,18 @@
+/**
+ * @description 商品类接口
+ */
+import request from '@/utils/request'
+
+// 获取商品列表
+// data = { category_id: '' }
+export const list = data => (request({
+  method: "POST",
+  url: "goods/get_list",
+  data
+}))
+
+// 获取商品分类
+export const category = () => (request({
+  method: "POST",
+  url: "goodscategory/get_list"
+}))

src/components/TabBar/index.vue

@@ -1,18 +1,13 @@
 <template>
     <van-tabbar :value="tabbarActive" @change="handleTabbarChange" route>
-            <van-tabbar-item
-                v-for="(item, idx) in tabbarList"
-                :key="idx"
-                :to="item.to"
-                replace
-            >
+        <van-tabbar-item v-for="(item, idx) in tabbarList" :key="idx" :to="item.to" replace>
             <span>{{ item.title }}</span>
             <template #icon="props">
                 <img v-if="props.active" :src="item.iconSel" />
                 <img v-else :src="item.icon" />
             </template>
-            </van-tabbar-item>
-        </van-tabbar>
+        </van-tabbar-item>
+    </van-tabbar>
 </template>
 
 <script>
@@ -22,33 +17,33 @@ export default {
     computed: {
         ...mapGetters(['tabbarIdx'])
     },
-    data () {
+    data() {
         return {
             tabbarActive: this.tabbarIdx,
             tabbarList: [
                 {
-                title: '首页',
-                to: '/',
-                icon: require("@/assets/icons-index.png"),
-                iconSel: require("@/assets/icons-index-sel.png"),
+                    title: '首页',
+                    to: '/',
+                    icon: require("@/assets/icons-index.png"),
+                    iconSel: require("@/assets/icons-index-sel.png"),
                 },
                 {
-                title: '审批',
-                to: '/approve',
-                icon: require("@/assets/icons-approve.png"),
-                iconSel: require("@/assets/icons-approve-sel.png"),
+                    title: '审批',
+                    to: '/approve',
+                    icon: require("@/assets/icons-approve.png"),
+                    iconSel: require("@/assets/icons-approve-sel.png"),
                 },
                 {
-                title: '我的',
-                to: '/my',
-                icon: require("@/assets/icons-my.png"),
-                iconSel: require("@/assets/icons-my-sel.png"),
+                    title: '我的',
+                    to: '/my',
+                    icon: require("@/assets/icons-my.png"),
+                    iconSel: require("@/assets/icons-my-sel.png"),
                 },
             ]
         }
     },
     methods: {
-        handleTabbarChange (index) {
+        handleTabbarChange(index) {
             this.tabbarActive = index
             this.$store.commit({
                 type: 'app/SET_TABBAR',

src/router/index.js

@@ -25,6 +25,9 @@ const routes = [
   {
     path: '/applyfor',
     name: 'Applyfor',
+    meta: {
+      keepAlive: true
+    },
     component: () => import(/* webpackChunkName: "index" */ '../views/applyfor/index.vue')
   },
 
@@ -34,7 +37,6 @@ const routes = [
     name: 'PeersOutForm',
     component: () => import(/* webpackChunkName: "index" */ '../views/applyfor/peersOutForm.vue')
   },
-
   {
     path: '/applyfor/type6-before',
     name: 'AskForLeave',
@@ -131,6 +133,12 @@ const router = new VueRouter({
 })
 
 router.beforeEach((to, from, next) => {
+  // TODO: 如果去往的页面不属于applyfor就可以重新恢复他的 keep-alive
+  if (!to.path.includes('applyfor')) {
+    console.log('%c ==============执行 >>>', 'background: blue; color: #fff', routes[1]);
+    routes[1].meta.keepAlive = true
+  }
+  
   // console.log('>>>>> beforeEach >>>>>');
   // console.log('to', to);
   // console.log('form', from);

src/store/modules/app.js

@@ -1,13 +1,24 @@
 const state = {
-    tabbarIdx: 0
+    tabbarIdx: 0,
+    catchRoutes: [],
 }
 
-
 const mutations = {
-    SET_TABBAR (state, poylad) {
-        state.tabbarIdx = poylad.tabbarIdx
+    SET_TABBAR (state, payload) {
+        state.tabbarIdx = payload.tabbarIdx
         // window.localStorage.setItem('tabbarIdx', poylad.tabbarIdx)
+    },
+
+    ROUTE_ADD (state, payload){
+        state.catchRoutes.push(payload.value)
+    },
+    ROUTE_REMOVE (state, payload){
+        state.catchRoutes = state.catchRoutes.filter(route => route !== payload.value)
+    },
+    ROUTE_CLEAN (state) {
+        state.catchRoutes = []
     }
+
 }
 
 export default {

src/utils/applyfor-item.js

@@ -54,7 +54,7 @@ export const formatApplyforRows = (data) => {
       arrs = getModule8(data)
       break
   }
-
-  // TODO: 过滤为undefined字段
+  
+  // NOTE: 过滤为undefined字段
   return arrs.filter(item => (item))
 }

src/utils/import-vant.js

@@ -23,11 +23,13 @@ import {
     List,
     Dialog,
     ImagePreview,
-    Checkbox
+    Checkbox,
+    Radio,
+    RadioGroup
 } from 'vant'
 
 Vue.use(Tab).use(Tabs).use(Popup).use(Toast).use(Field).use(Button).use(NavBar).use(Icon).use(Tabbar).use(TabbarItem).use(Picker)
-.use(Uploader).use(Calendar).use(DatetimePicker).use(ActionSheet).use(Switch).use(List).use(Dialog).use(Checkbox)
+.use(Uploader).use(Calendar).use(DatetimePicker).use(ActionSheet).use(Switch).use(List).use(Dialog).use(Checkbox).use(Radio).use(RadioGroup)
 
 
 Vue.use(ImagePreview)

src/views/applyfor/ProductStore.vue

@@ -2,114 +2,77 @@
   <div class="product-store-container flex flex-col">
     <div class="product-store__header">
       <div class="search-box">
-        <van-field
-          v-model="searchVal"
-          clearable
-          placeholder="搜索"
-          left-icon="search"
-          @click="handleClickSearchBox"
-        />
+        <van-field v-model="searchVal" clearable placeholder="搜索" left-icon="search" @click="handleClickSearchBox" />
       </div>
       <div class="sub-title">
         <span>商品库</span>
       </div>
     </div>
 
-
     <!-- 展示内容 -->
     <div class="product-store__main">
-      <div class="row"
-        v-for="(item, idx) in tableData"
-        :key="idx"
-      >
-        <div class="row__header row__header--b-line flex flex-row flex-row-aic">
-          <div class="row__header__content">
-            {{ item.label }}
-          </div>
-          <div class="row__header__more flex flex-row flex-row-aic" @click="handleClickRow(item, idx)">
-            <van-icon name="cluster-o" :size="26" color="#3290C4" />
-            <span class="txt">下级</span>
+      <van-radio-group v-model="radioCategory">
+        <div class="row" v-for="(item, idx) in tableData" :key="idx">
+          <div class="row__header row__header--b-line flex flex-row flex-row-aic">
+            <div class="row__header__content">
+              {{ item.name }}
+            </div>
+            <div class="row__header__more flex flex-row flex-row-aic" @click="handleClickRow(item, idx)">
+              <van-icon name="cluster-o" :size="26" color="#3290C4" />
+              <span class="txt">下级</span>
+            </div>
           </div>
-        </div>
-        <div class="row__main" v-if="item.expand">
-          <div class="row__second"
-            v-for="(second, idx2) in item.children"
-            :key="idx2"
-          >
-            <div class="row__second__header row__second__header--b-line flex flex-row flex-row-aic" @click="handleClickSecondRow(second, idx2)">
-              <div class="row__second__header__content">
-                {{ second.label }}
-              </div>
-              <div class="row__second__header__more">
-                <!-- <van-icon name="arrow-up" /> -->
-                <van-icon v-if="second.expand" name="arrow-up" :size="24" color="rgba(162, 163, 164, 1)" />
-                <van-icon v-else name="arrow-down" :size="24" color="rgba(162, 163, 164, 1)" />
+          <div class="row__main" v-if="item.expand">
+            <div class="row__second" v-for="(second, idx2) in item.childlist" :key="idx2">
+              <div class="row__second__header row__second__header--b-line flex flex-row flex-row-aic"
+                @click="type === '1' ? handleClickSecondRow(second, idx2) : null">
+                <!-- NOTE: Radio. 单选组件 -->
+                <div class="radio-box" v-if="type === '2'">
+                  <van-radio :name="second.id">{{ second.name }}</van-radio>
+                </div>
+                <div v-else class="row__second__header__content">
+                  {{ second.name }}
+                </div>
+
+                <!-- NOTE: 只存在于选择商品 -->
+                <div class="row__second__header__more" v-if="type === '1'">
+                  <van-icon v-if="second.expand" name="arrow-up" :size="24" color="rgba(162, 163, 164, 1)" />
+                  <van-icon v-else name="arrow-down" :size="24" color="rgba(162, 163, 164, 1)" />
+                </div>
               </div>
-            </div>
-            <div class="row__second__main" v-if="second.expand">
-              <div class="row__third-item flex flex-row flex-row-aic"
-                v-for="(third, idx3) in second.children"
-                :key="idx3"
-              >
-                <van-checkbox
-                  v-model="third.checked"
-                  for="c1"
-                >
-                  <span id="c1" class="content">{{ third.label }}</span>
-                </van-checkbox>
+              <div class="row__second__main" v-if="second.expand && second.childlist">
+                <div class="row__third-item flex flex-row flex-row-aic" v-for="(third, idx3) in second.childlist"
+                  :key="idx3" @click="handleSelectedGoods(third, idx3)">
+                  <span id="c1">{{ third.goods_name }}</span>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-
-      <!-- TEMPORARY: 临时 -->
-      <div @click=" popupVisibility = true">open the door</div>
+      </van-radio-group>
     </div>
 
-    <van-popup
-      class="popup flex flex-col"
-      v-model="popupVisibility"
-      position="bottom"
-      :style="{ height: '60%' }"
-      closeable
-      close-icon-position="top-right"
-    >
+    <van-popup class="popup flex flex-col" v-model="popupVisibility" position="bottom" :style="{ height: '60%' }"
+      closeable close-icon-position="top-right">
       <div class="popup__header">
-        <span class="product__title">校服</span>
-        <span class="product__inventory">库存剩余：20件</span>
+        <span class="product__title" v-if="choosedStock">{{ choosedStock.goods_name }}</span>
+
+        <span class="product__inventory">{{ leftStockComp }}</span>
       </div>
       <div class="popup__main">
-        <template
-          v-for="(item, idx) in productData"
-        >
+        <template v-for="(item, idx) in productData">
           <template v-if="item.type === 'total'">
-            <c-input
-              title="物品数量"
-              placeholder="请输入物品数量"
-              :maxlength="5"
-              :showWordLimit="false"
-              input-type="number"
-              v-model="item.val"
-              :key="idx"
-            />
+            <c-input :title="item.label" :placeholder="`请输入${item.label}`" :maxlength="5" :showWordLimit="false"
+              input-type="digit" v-model="item.val" :key="idx" />
           </template>
           <template v-else>
-            <div
-              :key="idx"
-              class="product__row"
-            >
+            <div :key="idx" class="product__row">
               <div class="product__row__header">
                 {{ item.label }}
               </div>
               <div class="product__row__main">
-                <span
-                  v-for="(type, idx) in item.list"
-                  :key="idx"
-                  :data-id="type.id"
-                  :class="{'selected': item.val == type.id}"
-                  @click="handleClickItem(item, type)"
-                >{{ type.name }}</span>
+                <span v-for="(type, idx) in item.list" :key="idx" :data-id="type.id"
+                  :class="{ 'selected': item.val == type.id }" @click="handleClickItem(item, type)">{{ type.name }}</span>
               </div>
             </div>
           </template>
@@ -126,20 +89,24 @@
 
 <style lang="less" scoped>
 @import url('@/styles/variables.less');
+
 .product-store {
   &-container {
     height: 100vh;
     justify-content: space-between;
   }
+
   &__header {
     padding: 10px 12px 0;
     background-color: @white;
+
     .search-box {
       .van-cell.van-field {
-        background: rgba(118,118,128,0.12);
+        background: rgba(118, 118, 128, 0.12);
         border-radius: 8px;
       }
     }
+
     .sub-title {
       font-size: @font-size-third;
       font-weight: 400;
@@ -148,26 +115,33 @@
       padding: 10px 0;
     }
   }
+
   &__main {
     padding: 10px 0;
     height: 0;
     flex: 1;
+
     .row {
       margin-bottom: 10px;
       background-color: @white;
+
       &__header {
         padding: 10px 12px;
         justify-content: space-between;
+
         &--b-line {
           border-bottom: 1px solid #eee;
         }
+
         &__content {
           font-size: @font-size-secondery;
         }
+
         &__more {
           font-size: 16px;
           border-left: 1px solid rgba(151, 151, 151, 0.4);
           padding: 3px 10px 3px 20px;
+
           span.txt {
             padding-left: 6px;
             color: #3290c4;
@@ -183,38 +157,52 @@
         &__header {
           padding: 10px 12px;
           justify-content: space-between;
+
           &--b-line {
             border-bottom: 1px solid #eee;
           }
+
           &__content {
             font-size: @font-size-secondery;
           }
-          &__more {
 
+          &__more {}
+
+          /deep/.van-radio__label {
+            font-size: 14px;
+          }
+
+          // .van-radio__icon--checked .van-icon
+          /deep/.van-radio__icon--checked .van-icon {
+            background-color: @main-color;
+            border-color: @main-color;
           }
         }
+
         &__main {
           padding-left: 30px;
         }
       }
+
       &__third-item {
         padding: 10px 12px;
         font-size: @font-size-third;
         border-bottom: 1px solid #eee;
+
         &:last-child {
           border-bottom-color: transparent;
         }
-        .content {
-          padding-left: 10px;
-        }
+
       }
     }
   }
 }
+
 .popup {
   justify-content: space-between;
   padding: 8px 0 0;
   box-sizing: border-box;
+
   &__header {
     margin: 0 12px;
     padding-right: 30px;
@@ -223,17 +211,24 @@
     border-bottom: 1px solid rgba(151, 151, 151, 0.3);
     font-size: @font-size-common;
   }
+
   &__main {
+    margin: 18px 0;
+    height: 0;
+    flex: 1;
     overflow: auto;
+
     .layout-container {
       padding-top: 12px;
     }
   }
+
   &__footer {
     position: relative;
     z-index: 9;
     border-top: 12px solid rgba(248, 248, 248, 1);
     box-shadow: 0 -2px 16px 1px rgba(0, 0, 0, 0.2);
+
     .btn-container {
       margin-top: initial;
     }
@@ -243,15 +238,18 @@
 .product {
   &__row {
     padding: 6px 12px 16px;
+
     &:nth-last-of-type(2) {
       border-bottom: 1px solid rgba(151, 151, 151, 0.3);
     }
   }
+
   &__title {
     font-size: 16px;
     font-weight: 500;
     color: #191A1E;
   }
+
   &__inventory {
     padding-left: 10px;
     font-size: 12px;
@@ -259,17 +257,20 @@
     color: #727273;
     vertical-align: bottom;
   }
+
   &__row {
     &__header {
       font-size: @font-size-common;
       padding: 8px 0 10px;
       color: #191A1E;
     }
+
     &__main {
       display: grid;
       grid-template-columns: repeat(2, 49%);
       column-gap: 2%;
       row-gap: 10px;
+
       span {
         display: inline-block;
         text-align: center;
@@ -281,6 +282,7 @@
         padding: 8px 0;
         transition-property: background-color, color;
         transition-duration: 0.2s;
+
         &.selected {
           background: #0a83d3;
           color: @white;
@@ -292,134 +294,200 @@
 </style>
 
 <script>
-
+/**
+ * @description 当前页面处理为多种展示格式。 
+ *  - 商品单选
+ *  - 分类选择
+ */
 import vueBus from '@/utils/vueBus';
-
 import CInput from './components/CInput.vue';
 
+import * as goodsApi from '@/api/goods'
+
 export default {
   name: "ProductStore",
   components: {
     CInput
   },
+  computed: {
+    leftStockComp() {
+      if (!this.choosedStock) return ''
+      const [{ val, list }] = this.productData
+      let currentData = list.filter(item => item.id === val)
+      if (currentData.length) {
+        let len = currentData[0].stock
+        return len > 0 ? `库存剩余：${len}件` : `暂无库存`
+      } else return ''
+    }
+  },
   data: () => ({
-    searchVal: '',
-    tableData: [
-      {
-        label: '卫生用品',
-        children: [
-          {
-            label: '服装用品',
-            children: [
-              {
-                label: '防护服'
-              },
-              {
-                label: '防护服222'
-              }
-            ]
-          },
-          {
-            label: '生活用品',
-            children: [
-              {
-                label: '鞋刷子'
-              }
-            ]
-          }
-        ]
-      },
-      {
-        label: '卫生用品2',
-        children: [
-          {
-            label: '服装用品2-1',
-            children: [
-              {
-                label: '防护服2-1-1'
-              }
-            ]
-          },
-          {
-            label: '生活用品2-2',
-            children: [
-              {
-                label: '鞋刷子2-2-1'
-              }
-            ]
-          }
-        ]
-      },
-    ],
-
+    type: "1", // 页面状态。 默认1：商品选择。 可选项2：选择分类
+    radioCategory: '', // 二级分类Id
+    searchVal: '', // 搜索商品?
+    tableData: [], // 分类数据
     // NOTE: Popup data and context data
     popupVisibility: false,
-    productData: [
-      {
-        label: '颜色',
-        val: 1,
-        list: [
-          { id: 1, name: 'black' },
-          { id: 2, name: 'white' },
-          { id: 3, name: 'yellow' },
-          { id: 4, name: 'yellow' },
-          { id: 5, name: 'blue' },
-        ]
-      },
-      {
-        label: '长度',
-        val: '',
-        list: [
-          { id: 1, name: '150cm' },
-          { id: 2, name: '160cm' },
-          { id: 3, name: '170cm' },
-          { id: 4, name: '180cm' },
-        ]
-      },
-      {
-        label: '数量',
-        type: 'total',
-        val: ''
-      }
-    ]
+    productData: [], // 弹出选择商品的数量等。
+    choosedStock: null,
   }),
+
+  created() {
+    this.__init__()
+  },
   methods: {
-    __init__ () {
-      // TODO: 调用接口
+    async __init__() {
+      try {
+        let query = this.$route.query
+        if (query) {
+          // type = 1 // 页面类型。1 => 选择商品。 2 => 选择分类
+          if (query.type) this.type = query.type
+        }
+
+        await this.__queryCategoay__() // initalization query categray
+      } catch (error) {
+        console.log('ProductStore __init__ error', error);
+      }
     },
 
-    __query_data__ () {},
+    __query_data__() { },
 
-    handleClickSearchBox(){},
+    handleClickSearchBox() { },
 
     // 点击一级
     handleClickRow(row) {
-      console.log('%c printlog >>>', 'background: blue; color: #fff', row);
-      
       row.expand = !row.expand
       this.$forceUpdate()
     },
 
     // 点击二级
-    handleClickSecondRow (row) {
-      row.expand = !row.expand
-      this.$forceUpdate()
+    async handleClickSecondRow(row) {
+      try {
+        if (!row.expand && !row.childlist) { // NOTE: 只有打开时&无子级别查询
+          const toastInstance = this.$toast({
+            type: 'loading',
+            message: '加载数据中',
+            duration: 0
+          })
+          const list = await this.__queryStoreData__(row.id)
+          row.childlist = [...list]
+
+          toastInstance.clear()
+        }
+        row.expand = !row.expand
+        this.$forceUpdate()
+      } catch (error) {
+        this.$toast(error.message)
+      }
     },
-    
+
     // 选择类型
-    handleClickItem (row, item) {
+    handleClickItem(row, item) {
       row.val = item.id
     },
 
     // 弹窗确认
-    handleConfirmInput () {
-      let isAllInput = this.productData.every(item => item.val)
-      if (!isAllInput) return this.$toast('检查选择填写情况')
-      this.$toast(this.productData.map(item => item.val).join(','))
-      vueBus.$emit('updateProductList', {
-        name: 'xiaofu'
+    handleConfirmInput() {
+      try {
+        let _list = this.productData
+        let isAllInput = _list.every(item => item.val)
+        if (!isAllInput) return this.$toast('检查填写情况')
+
+        const [choosedGoodsId, customCount, GoodsPrice] = _list.map(item => item.val)
+
+        // 选中的类别对象
+        let choosedGoodsS = _list[0].list.filter(item => item.id === choosedGoodsId)[0]
+        let ChoosedGoodsStock = 0
+        if (choosedGoodsS) {
+          ChoosedGoodsStock = choosedGoodsS.stock
+        }
+
+        // 判断输入的数量是否大于库存
+        if (customCount > ChoosedGoodsStock) {
+          return this.$toast('当前商品规格数量不足')
+        }
+
+        if (GoodsPrice <= 0) {
+          return this.$toast('当前商品价格不对')
+        }
+
+        // if (this.type === '1') {}
+        vueBus.$emit('updateProductList', {
+          item: this.choosedStock,
+          goodsStock: choosedGoodsS,
+          customCount,
+          GoodsPrice
+        })
+        this.$router.go(-1);
+      } catch (error) {
+        console.log(error);
+      }
+
+    },
+
+    // NOTE: 选中某商品进行业务
+    handleSelectedGoods(item) {
+      const { goods_stock } = item
+      this.choosedStock = item
+      this.productData = [
+        {
+          label: '规格',
+          val: '',
+          list: goods_stock
+        },
+        {
+          label: '物品数量',
+          type: 'total',
+          val: ''
+        },
+        {
+          label: '物品单价',
+          type: 'total',
+          val: ''
+        }
+      ]
+      this.popupVisibility = true
+    },
+
+    // NOTE: 查询分类数据
+    __queryCategoay__() {
+      return new Promise((resolve, reject) => {
+        goodsApi.category().then(result => {
+          if (result.code === 1) {
+            this.tableData = result.data
+            resolve()
+          } else {
+            reject()
+          }
+        }).catch(error => {
+          console.log('%c error >>>', 'background: blue; color: #fff', error);
+          reject()
+        })
+      })
+    },
+
+    // NOTE: 查询商品数据
+    // @returns [] | throw error
+    __queryStoreData__(category_id) {
+      return new Promise((resolve, reject) => {
+        goodsApi.list({
+          category_id
+        }).then(result => {
+          if (result.code === 1) {
+            resolve(result.data || [])
+          }
+        }).catch(error => {
+          reject(error)
+        })
       })
     }
+  },
+
+
+  watch: {
+    radio(val) {
+      console.log('%c radio value watch? >>>', 'background: blue; color: #fff', val);
+
+    }
   }
 
 }

src/views/applyfor/components/CProductStore.vue

@@ -7,15 +7,16 @@
       </div>
       <div class="right-content flex flex-row flex-row-aic">
         <template v-if="['1', '3'].includes(type)">
-          <span @click="handleAddGoods" >添加新商品</span>
+          <span @click="handleAddGoods">添加新商品</span>
           <span class="divider"></span>
         </template>
-        <span @click="productStoreActionsheetVisibility = true" >批量导入</span>
+        <span @click="productStoreActionsheetVisibility = true">批量导入</span>
         <span class="divider"></span>
         <span @click="handleGoPStore">商品库选择</span>
       </div>
     </div>
-    <template v-if="list.length">
+
+    <template v-if="showList">
       <div class="product-list-container">
         <div class="product-list__header flex flex-row flex-row-aic" v-show="list.length > 2">
           <div class="left">领用物品</div>
@@ -30,29 +31,27 @@
         </div>
         <div class="product-list__rows">
           <!-- TODO: 数据结构未知暂不修改 -->
-          <div class="prow"
-            v-for="(item, idx) in renderInfoList"
-            :key="idx"
-          >
+          <div class="prow" v-for="(item, idx) in list" :key="idx">
             <div class="prow-header flex flex-row flex-row-aic">
               <div class="prow-header__left">
-                校服
+                {{ item.goods_name }}
               </div>
               <div class="prow-header__right">
                 <span class="update" @click="handleUpdateRow">更改</span>
                 <span class="remove" @click="handleRemoveRow">删除</span>
               </div>
             </div>
-            <div class="prow-middle flex flex-row flex-row-aic">
-              <div class="tags">蓝色；165cm</div>
-              <div class="count">x40</div>
-            </div>
+            <template v-for="(goodsStock, idx) in item.goods_stock">
+              <div class="prow-middle flex flex-row flex-row-aic" :key="idx">
+                <div class="tags">{{ goodsStock.name }}</div>
+                <div class="count">x40</div>
+              </div>
+            </template>
           </div>
-  
+
         </div>
       </div>
     </template>
-
     <template v-else>
       <div class="product-store__empty">
         还未添加领用物品
@@ -61,18 +60,9 @@
 
 
     <!-- NOTE: 弹窗提示批量导入 -->
-    <van-action-sheet
-      v-model="productStoreActionsheetVisibility"
-      :actions="actions"
-      cancel-text="取消"
-      close-on-click-action
-      @cancel="onCancel"
-      @select="handleSelectSheet"
-    >
-      <div
-        class="action-sheet-container"
-        slot="description"
-        @click="handleDownloadHelp">
+    <van-action-sheet v-model="productStoreActionsheetVisibility" :actions="actions" cancel-text="取消"
+      close-on-click-action @cancel="onCancel" @select="handleSelectSheet">
+      <div class="action-sheet-container" slot="description" @click="handleDownloadHelp">
         <div class="icon">
           <img src="" alt="">
         </div>
@@ -82,20 +72,15 @@
     </van-action-sheet>
 
     <div class="tip" style="font-size: 14px;" @click="handleTips">导入提示</div>
+    <div class="tip" style="font-size: 14px;" @click="handleTest">tips</div>
 
-    <input
-      ref="importTemlate"
-      :accept="excelSuffix"
-      type="file"
-      name="file"
-      id="file"
-      @change="handleInputFileChange"
-    />
+    <input ref="importTemlate" :accept="excelSuffix" type="file" name="file" id="file" @change="handleInputFileChange" />
   </div>
 </template>
 
 <style lang="less" scoped>
 @import url('@/styles/variables.less');
+
 .product-store {
   &-container {
     margin-top: 10px;
@@ -111,21 +96,27 @@
       position: absolute;
     }
   }
+
   &__header {
     padding: 4px 12px 8px;
     justify-content: space-between;
+
     .left-title {
       font-size: @font-size-common;
       color: #727273;
+
       .required {
         color: red;
       }
     }
+
     .right-content {
       font-size: @font-size-third;
+
       span {
         color: @link-color;
       }
+
       .divider {
         display: inline-block;
         width: 1px;
@@ -135,6 +126,7 @@
       }
     }
   }
+
   &__empty {
     font-size: @font-size-secondery;
     font-weight: 400;
@@ -144,6 +136,7 @@
     background-color: @white;
   }
 }
+
 .action-sheet-container {
   .icon {
     img {
@@ -152,12 +145,14 @@
       background: #DFECFD;
     }
   }
+
   .title {
     font-size: 12px;
     font-weight: 400;
     color: #191A1E;
     line-height: 18px;
   }
+
   .sub-title {
     font-size: 12px;
     font-weight: 400;
@@ -165,53 +160,66 @@
     line-height: 18px;
   }
 }
+
 .product-list {
   &-container {
     background-color: @white;
     padding: 8px 12px;
   }
+
   &__header {
     padding: 12px 0;
     justify-content: space-between;
     border-bottom: 1px solid rgba(151, 151, 151, 0.3);
+
     .left {
       font-size: 14px;
       font-weight: 400;
       color: #191A1E;
     }
+
     .right {
       font-size: 14px;
       font-weight: 400;
       color: #3290C4;
     }
   }
+
   &__rows {
     transition: height .8s;
+
     .prow {
       padding: 12px 0 10px;
       border-bottom: 1px solid rgba(151, 151, 151, 0.3);
+
       &:last-child {
         border-bottom: initial;
       }
+
       &-header {
         padding-bottom: 6px;
         justify-content: space-between;
+
         &__left {
           font-size: @font-size-secondery;
           font-weight: 400;
           color: #191A1E;
         }
+
         &__right {
           font-size: 14px;
+
           .update {
             color: #3290C4;
           }
+
           .remove {
             margin-left: 16px;
             color: #F45642;
           }
         }
       }
+
       &-middle {
         padding: 3px 0;
         justify-content: space-between;
@@ -233,16 +241,23 @@ import vueBus from '@/utils/vueBus';
 export default {
   name: 'CProductStore',
   props: {
+    value: {
+      type: Array,
+      default: () => ([])
+    },
     type: {
       validator: t => (['1', '3', '4'].includes(t)),
       required: true
     }
   },
   computed: {
-    title () {
+    showList() {
+      return Boolean(this.list.length)
+    },
+    title() {
       let type = this.type
       let title = ''
-      switch(type) {
+      switch (type) {
         case '1':
           title = '采购明细'
           break
@@ -255,7 +270,9 @@ export default {
       }
       return title
     },
-    renderInfoList () {
+    renderInfoList() {
+      console.log('--- renderInfoList??');
+      // if (this.list.length < 2) return this.list
       if (this.showMore) return this.list
       return this.list.slice(0, 2)
     }
@@ -268,23 +285,61 @@ export default {
       { name: '下载模板', color: 'rgba(0, 122, 255, 1)' },
       { name: '导入模板', color: 'rgba(0, 122, 255, 1)' },
     ],
-    list: [1, 2, 3]
+    list: []
   }),
 
-  created () {
+  created() {
     vueBus.$on('updateProductList', this.handleUpdateList)
   },
+
+  deactivated() {
+    console.log('页面隐藏？');
+  },
+
   methods: {
+
+    handleTest() {
+      this.list.push({ name: 1 })
+    },
+    // NOTE: 商品库选择数据
     handleUpdateList(data) {
-      console.log('emit', data);
+      const { customCount, goodsStock, item, GoodsPrice } = data
+      console.log('handleUpdateList', customCount, goodsStock, item, GoodsPrice);
+
+      let isHasGoods = this.list.some(goods => goods.id === item.id)
+
+      // TODO: 优先判断是否存在该商品。不存在新增。 存在添加到商品`goos_stock`中
+      if (isHasGoods) {
+        let idx = this.list.findIndex(goods => goods.id === item.id)
+        console.log('%c query idx >>>', 'background: blue; color: #fff', idx);
+      } else {
+        const _template_ = {
+          flag: 3,
+          id: item.id,
+          goods_category_first: item.goods_category_first,
+          goods_category_id: item.goods_category_id,
+          goods_no: item.goods_no,
+          goods_name: item.goods_name,
+          goods_brand: item.goods_brand,
+          goods_stock: [
+            {
+              id: goodsStock.goods_id,
+              name: goodsStock.name,
+              price: GoodsPrice,
+              stock: customCount
+            }
+          ]
+        }
+        this.list = [...this.list, _template_]
+      }
     },
     onCancel() {
       this.$toast('取消')
       // Toast('取消');
     },
 
-    handleSelectSheet (action, idx) {
-      switch(idx) {
+    handleSelectSheet(action, idx) {
+      switch (idx) {
         case 0:
           this.handleDownloadTemplate()
           break
@@ -297,13 +352,13 @@ export default {
     /**
      * @description 下载文件模板
      */
-    handleDownloadTemplate () {
+    handleDownloadTemplate() {
       this.$toast('通过a链接下载文件')
       // downloadFileUseATarget
     },
 
     // listener input:file change
-    handleInputFileChange (event) {
+    handleInputFileChange(event) {
       let files = event.target.files
       if (files.length) {
         let file = files[0]
@@ -315,7 +370,7 @@ export default {
     },
 
     // import file
-    async handleImportFile (file) {
+    async handleImportFile(file) {
       try {
         const fileHref = await upload(file)
         console.log('%c fileHref >>>', 'background: blue; color: #fff', fileHref);
@@ -329,18 +384,18 @@ export default {
         // }
       } catch (error) {
         console.log('%c handleImportFileError >>>', 'background: blue; color: #fff', error);
-        
+
       }
 
     },
     // 下载批量导入说明
-    handleDownloadHelp () {
+    handleDownloadHelp() {
       this.$toast('下载批量导入说明')
-      console.log('%c printlog >>>', 'background: blue; color: #fff', );
+      console.log('%c printlog >>>', 'background: blue; color: #fff',);
       // downloadFileUseATarget
     },
 
-    handleTips () {
+    handleTips() {
       this.$dialog.confirm({
         message: `
         1、导入的物品-学生秋季校服商品库不存在
@@ -376,7 +431,7 @@ export default {
 
 
     // TODO: 更新领用数据时，是重新选择还是弹出弹框
-    handleUpdateRow () {
+    handleUpdateRow() {
       // this.$router.push({
       //   name: 'ProductStore',
       //   query
@@ -385,21 +440,22 @@ export default {
     },
 
     // 前往商品库列表
-    handleGoPStore () {
+    handleGoPStore() {
       this.$router.push({
         name: 'ProductStore'
       })
     },
     // NOTE: 添加新商品
-    handleAddGoods () {
+    handleAddGoods() {
       this.$toast('添加商品页面')
       this.$router.push({
         name: 'Goods'
       })
     }
   },
-  beforeDestroy () {
-    vueBus.$off('updateProductList', this.handleUpdateList)
-  }
+  beforeDestroy() {
+    console.log('%c destory $off updateProductList >>>', 'background: blue; color: #fff',);
+    vueBus.$off('updateProductList')
+  },
 }
 </script>

src/views/applyfor/components/IndexType1.vue

@@ -1,69 +1,34 @@
 <template>
     <div class="type6-container">
-        <c-input
-            title="申请事由"
-            :required="true"
-            input-type="textarea"
-            :maxlength="800"
-            v-model="reason"
-        />
-
-        <c-select
-            title="采购类型"
-            :required="true"
-            v-model="type"
-            :list="applyTypeList"
-            pickerValueKey="name"
-            pickerValueId="id"
-        />
+        <c-input title="申请事由" :required="true" input-type="textarea" :maxlength="800" v-model="reason" />
+
+        <c-select title="采购类型" :required="true" v-model="type" :list="applyTypeList" pickerValueKey="name"
+            pickerValueId="id" />
 
         <!-- NOTE: 只有货物采购才有 采购明细 -->
         <template v-if="type == '1'">
-            <c-product-store
-                type="1"
-            />
+            <c-product-store v-model="apply_goods" type="1" />
         </template>
-                
-        <c-input
-            title="总金额（元）"
-            :required="true"
-            v-model="total_amount"
-        />
-
-        <c-date
-            title="预计申购完成日期"
-            v-model="apply_date"
-        />
-
-        <c-files
-            v-model="document"
-        />
-
-        <c-files
-            ctype="images"
-            v-model="images"
-        />
-
-        <c-select
-            title="支付方式"
-            :required="true"
-            :list="applyPayTypeList"
-            v-model="pay_type"
-            pickerValueKey="name"
-            pickerValueId="id"
-        />
-
-        <c-flow-path
-            :approve="approvePeople"
-            :copy="copyPeople"
-            :isAllowCopy="isCopy"
-        />
+
+        <c-input title="总金额（元）" :required="true" v-model="total_amount" />
+
+        <c-date title="预计申购完成日期" v-model="apply_date" />
+
+        <c-files v-model="document" />
+
+        <c-files ctype="images" v-model="images" />
+
+        <c-select title="支付方式" :required="true" :list="applyPayTypeList" v-model="pay_type" pickerValueKey="name"
+            pickerValueId="id" />
+
+        <c-flow-path :approve="approvePeople" :copy="copyPeople" :isAllowCopy="isCopy" />
     </div>
 </template>
 
 <style lang="less" scoped></style>
 
 <script>
+
 /**
  * @description 申购申请页面
  */
@@ -74,7 +39,6 @@ import { editApprove } from '@/api/approve'
 import CProductStore from './CProductStore.vue'
 
 
-
 export default {
     name: 'IndexType1',
     mixins: [
@@ -83,7 +47,7 @@ export default {
     components: {
         CProductStore
     },
-    data () {
+    data() {
         return {
             postApi: null,
             degreeList: this.$store.state.enum.degreeList,
@@ -91,38 +55,37 @@ export default {
             applyPayTypeList: this.$store.state.enum.applyPayTypeList,
 
             // TODO: 缺少拟稿部门、落款选择数据列表
-
             // formData start
             id: '',
             module: 1,
             reason: '', // 申购事由
-            type: '', // 采购类型
+            type: '1', // 采购类型
             document: [], // 附件
             images: [],
             total_amount: '', // 总金额
             pay_type: '',  // 支付方式
             apply_date: '', // 预计申购完成日期(日期)
-
+            apply_goods: [],
             approve_user: [],
             copy_user: []
             // formData end
         }
     },
 
-    created () {
+    created() {
         this.getCommonFlowPathData()
         this.postApi = this.flag === 'approve' ? editApprove : postCreateInfo
     },
 
     methods: {
         // 获取编辑数据
-        handleFormatEditData (data) {
+        handleFormatEditData(data) {
             console.log('%c edit data type6 >>>', 'background: blue; color: #fff', data);
         },
         /**
          * @description 提交数据默认函数
          */
-         handleSubmitData () {
+        handleSubmitData() {
             let formData = this.__format_data__()
             console.log('format data>>>', formData);
             let bol = this.validate(formData)
@@ -131,7 +94,7 @@ export default {
             this.__post__(formData)
         },
 
-        __format_data__ () {
+        __format_data__() {
             let templateObj = {
                 module: this.module,
                 reason: this.reason,
@@ -151,8 +114,8 @@ export default {
             if (this.id) templateObj.id = this.id
             return templateObj
         },
-        
-        validate (data) {
+
+        validate(data) {
             let mapTxt = {
                 'reason': '申购事由',
                 'type': '采购类型',
@@ -174,7 +137,7 @@ export default {
             })
         },
 
-        async __post__ (data) {
+        async __post__(data) {
             try {
                 const res = await this.postApi(data)
                 if (res.code === 1) {
@@ -191,7 +154,7 @@ export default {
                     */
 
                 }
-            } catch(e) {
+            } catch (e) {
                 console.log('it5, __post__', e);
             }
         },

src/views/applyfor/index.vue

@@ -7,8 +7,6 @@
         <div class="btnbox">
             <div class="btn" @click="handleSubmitData">{{ flag === 'approve' ? '更新内容' : '提交' }}</div>
         </div>
-
-        <!-- <bizCont /> -->
     </div>
 </template>
 
@@ -86,6 +84,25 @@ import * as approveInfoApi from '@/api/approveinfo'
 import * as approveApi from '@/api/approve'
 
 export default {
+    beforeRouteEnter(to, from, next) {
+        // if (to.name === 'Applyfor') {
+        //     if (!to.meta.keepAlive) {
+        //         to.meta.keepAlive = true
+        //     }
+        // }
+        console.log(' beforeRouteEnter >>>', to.name, to.meta, from.name);
+        next()
+    },
+    // NOTE: 只有退出applyfor/xxx页面时才清除缓存
+    beforeRouteLeave(to, from, next) {
+        if (!to.path.includes('applyfor')) {
+            from.meta.keepAlive = false
+        } else {
+            from.meta.keepAlive = true
+        }
+        console.log('%c beforeRouteLeave >>>', 'background: blue; color: #fff', to, from);
+        next()
+    },
     name: 'Applyfor',
     components: {
         IndexType1,
@@ -110,8 +127,6 @@ export default {
     },
 
     created() {
-        console.log('%c Apply for crated >>>', 'background: blue; color: #fff', this.$route.query);
-
         if (this.$route.query.type) this.formType = Number(this.$route.query.type)
 
         // check is edit

src/views/applyfor/indexMixins.js

@@ -4,7 +4,6 @@ import { getStringTye } from '@/utils/util'
 import indexComponentsMixins from './js/IndexComponentsMixins'
 import { getApproveFlowPath } from '@/api/approveflow'
 
-
 export default {
     mixins: [
         indexComponentsMixins
@@ -44,9 +43,6 @@ export default {
 
                 // NOTE: moduel = [5, 6]时，需要填写 `flow_item`字段。 取值 `options.flow_item`; 获取审批流程
                 if ([5, 6].includes(module) && options.flow_item) params['flow_item'] = options.flow_item
-
-                console.log('%c getCommonFlowPathData Params >>>', 'background: blue; color: #fff', params);
-                
                 const res = await getApproveFlowPath(params)
 
                 if (res.code === 1) {