TODO.md

@@ -1,22 +1,39 @@
 # 钉钉办公系统 - 待办事项
 
+## 前端TODO
+* [x] 上传文件/图片等模块
+* [x] 下载文件通过链接下载 (等待测试)
 
-### 前端TODO
+* [ ] 路由标题配置。 通过dingtalk Set title 
 
-* [ ] 上传文件/图片等模块
-* [ ] 审批详情 底部的 各种功能ICONS 需要设计师给予
-* [ ] 审批详情 顶部 ICON需要 设计切图
+* [ ] 抄送人超过三个时显示状态需要更新
 
 * [ ] 我的出差-详情页面缺少 发起人字段
 
+* [ ] 商品规格页面
+* [ ] 商品单价页面
 
-#### 个人中心页面
+### 缺少明细的页面
+* 申购1
+* 入库3
+* 领用（已添加 4
 
-* [ ] 个人中心`tag`Icons需要补充
-* [ ] 个人中心头像和签名图片是走钉钉。 尚未自测
+## About Ui
 
-### 需要后端处理 才能做的
+* [ ] 个人中心`tag`Icons需要补充
+* [ ] 个人中心头像和签名图片是走钉钉功能。 尚未自测
+* [ ] product-store icon
+* [ ] 审批详情 底部的 各种功能ICONS 需要设计师给予
+* [ ] 审批详情 顶部 ICON需要 设计切图
 
-* [x] 个人申请详情无法查看
-* [ ] 我的出差-详情页面 流程中缺少发起人数据
-* [ ] 个人中心-用户详情 缺少学校字段
+## RearEnd Bugs
+
+* [x] 我的出差-详情页面 流程中缺少发起人数据
+* [ ] 个人中心 编辑接口 - 更新失败
+* [ ] 个人中心`user_info`接口缺少学校名称字段
+* [ ] 提交申请流程中 - 各个模块审核人员始终为空
+* [ ] 批量导入接口[导入excel文件]缺失, 需要下载相对应的excel模板文件接口
+* [ ] 商品库接口。
+* [ ] 商品库分类接口(2级) (3级-带产品)
+* [ ] 根据商品id查询详情的接口
+* [ ] 商品库搜索商品接口

src/router/index.js

@@ -40,6 +40,17 @@ const routes = [
     name: 'AskForLeave',
     component: () => import(/* webpackChunkName: "type6" */ '../views/applyfor/askForLeaveType.vue')
   },
+  {
+    path: '/applyfor/product-store',
+    name: 'ProductStore',
+    component: () => import(/* webpackChunkName: "applyfor" */ '../views/applyfor/ProductStore.vue')
+  },
+
+  {
+    path: '/applyfor/goods',
+    name: 'Goods',
+    component: () => import(/* webpackChunkName: "applyfor" */ '../views/applyfor/goods.vue')
+  },
 
   // NOTE：我的审核状态
   {

src/store/modules/enum.js

@@ -17,6 +17,8 @@ const state = {
     maintainTypeList: [], // 维修类型
     contractTypeList: [], // 合同类型
 
+    timeList: [], // 请假周期列表  
+
     // 1=待审批,2=审批中,3=审批通过,4=审批拒绝  
     // NOTE: 审批信息中的审核流程枚举
     approveFlowPathEnum: [undefined, '待审核', '审核中', '已通过', '已驳回'],
@@ -97,6 +99,11 @@ const mutations = {
     // NOTE: 合同类型
     SET_CONTRACT_TYPE_LIST(state, payload) {
         state.contractTypeList = [...payload.list]
+    },
+
+    // NOTE: 请假周期列表
+    SET_TIME_LIST (state, payload) {
+        state.timeList = [...payload.list]
     }
 }
 
@@ -114,7 +121,8 @@ const actions = {
                         data5,
                         data6,
                         data8,
-                        data9
+                        data9,
+                        time_list
                     } = result.data
                     commit({
                         type: 'SET_EVECTION_TYPE_LIST',
@@ -152,6 +160,10 @@ const actions = {
                         type: 'SET_CONTRACT_TYPE_LIST',
                         list: data9
                     })
+                    commit({
+                        type: 'SET_TIME_LIST',
+                        list: time_list
+                    })
                     resolve()
                 }
             }).catch(error => reject(error))

src/utils/approve-item.js

@@ -53,7 +53,7 @@ export function formatApproveItemRow(data, type) {
                 },
                 {
                     label: '同行人员',
-                    val: data.peer_user.length ? data.peer_user.map(user => (user.name)).join('、') : '暂无同行人员'
+                    val: Array.isArray(data.peer_user) && data.peer_user.length ? data.peer_user.map(user => (user.name)).join('、') : '暂无同行人员'
                 },
                 {
                     label: '出差时间',

src/utils/constant.js

@@ -8,3 +8,12 @@ export const PicSize = 10
 
 // 手机号的基础正则
 export const phoneRegexp = /^1[0-9]{10}$/i
+
+// excel suffix
+export const excelSuffix = [
+  '.xlsx',
+  '.xls',
+  '.xlsm',
+  '.xlsb',
+  '.csv',
+]

src/utils/import-vant.js

@@ -22,11 +22,12 @@ import {
     Switch,
     List,
     Dialog,
-    ImagePreview
+    ImagePreview,
+    Checkbox
 } 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(Uploader).use(Calendar).use(DatetimePicker).use(ActionSheet).use(Switch).use(List).use(Dialog).use(Checkbox)
 
 
 Vue.use(ImagePreview)

src/utils/util.js

@@ -110,4 +110,19 @@ const checkRegexp = regexp => (str) => regexp.test(str)
  * @param {String} phonenumber
  * @returns {boolean}
  */
-export const checkMobile = checkRegexp(phoneRegexp)
+export const checkMobile = checkRegexp(phoneRegexp)
+
+/**
+ * 通过A链接的方式下载文件
+ * @param {string} href 文件地址链接
+ */
+export const downloadFileUseATarget = (href) => {
+    const { name } = getStaticLinkInfo(href)
+    var link = document.createElement('a');
+    link.style.display = 'none';
+    document.body.appendChild(link);
+    link.href = href // 将下载链接替换为实际的下载链接
+    link.download = name // 将文件名替换为希望保存的文件名
+    link.click();
+    document.body.removeChild(link);
+}

src/views/Approve.vue

@@ -102,17 +102,22 @@
             </div>
             <div class="popup__rangetime__main flex flex-row flex-row-aic">
               <van-field
-                v-model="timeStart"
+                :value="timeStart"
+                :disabled="true"
                 clearable
                 placeholder="开始时间"
                 :center="true"
+                @click-input="handleClickTimeStart"
               />
               <span class="horization"></span>
+              
               <van-field
-                v-model="timeEnd"
+                :value="timeEnd"
+                :disabled="true"
                 clearable
                 placeholder="结束时间"
                 :center="true"
+                @click-input="handleClickTimeEnd"
               />
             </div>
           </div>
@@ -121,7 +126,20 @@
       <div class="btn-popup" @click="handleSubmitFilter">
         <span>提交</span>
       </div>
-      
+
+      <ChooseTime
+        ref="chooseTimeRef"
+        v-model="timeStart"
+        :min-date="minDate"
+        :max-date="maxDate"
+      />
+
+      <ChooseTime
+        ref="chooseTimeRef2"
+        v-model="timeEnd"
+        :min-date="minDate"
+        :max-date="maxDate"
+      />
         
     </van-popup>
   </div>
@@ -134,10 +152,13 @@ import ApproveItem from './approve/components/ApproveItem.vue'
 import { getApproveList } from '@/api/approve'
 import { formatApproveItemRow } from '@/utils/approve-item'
 import { mapState } from 'vuex'
+import ChooseTime from '@/components/ChooseTime'
+import dayjs from 'dayjs'
 
 export default {
   components: {
-    ApproveItem
+    ApproveItem,
+    ChooseTime
   },
   computed: {
     ...mapState('enum', {
@@ -203,9 +224,22 @@ export default {
       finished: false,
       finishedText: '暂无更多数据',
       tableData: [],
+      minDate: '',
+      maxDate: ''
     }
   },
+  created () {
+    this.__init__()
+  },
   methods: {
+    __init__ () {
+      // NOTE: 设置时间返回是前6个月 - 现在
+      let now = new Date()
+      now.setMonth(now.getMonth() - 7)
+      this.minDate = now
+      let nowMax = new Date()
+      this.maxDate = nowMax
+    },
     onLoadData () {
       this.__record_list__()
     },
@@ -288,12 +322,28 @@ export default {
     },
 
 
-    // TODO: 缺少module无法准确进入某一审批详情页面
+    // NOTE: 缺少module无法准确进入某一审批详情页面
     handleGoInfo(item) {
       console.log('%c handle Go_info  >>>', 'background: blue; color: #fff', item);
       
     },
 
+    handleClickTimeStart () {
+      const THAT = this
+      THAT.timeVal = THAT.timeStart
+      this.$refs.chooseTimeRef.openChooseTime(date => {
+          THAT.timeStart = dayjs(date).format('YYYY-MM-DD HH:mm')
+      })
+    },
+
+    handleClickTimeEnd () {
+      const THAT = this
+      THAT.timeVal = THAT.timeEnd
+      this.$refs.chooseTimeRef.openChooseTime(date => {
+          THAT.timeEnd = dayjs(date).format('YYYY-MM-DD HH:mm')
+      })
+    },
+
     goexamine () {
       this.$router.push({
         name: 'Examine',

src/views/apply-state/index.vue

@@ -425,7 +425,6 @@ export default {
     }
 }
 
-
 .popup {
     &__title {
         text-align: center;
@@ -435,7 +434,6 @@ export default {
         line-height: 22px;
         padding-bottom: 30px;
     }
-
     &__typebox {
         &__header {
             font-size: @font-size-secondery;
@@ -444,12 +442,10 @@ export default {
             line-height: 20px;
             margin-bottom: 12px;
         }
-
         &__list {
             flex-wrap: wrap;
             justify-content: space-between;
             padding-bottom: 14px;
-
             span {
                 display: inline-block;
                 width: 111px;
@@ -465,23 +461,19 @@ export default {
             }
         }
     }
-
     &__rangetime {
         &__main {
             justify-content: space-between;
         }
-
         .van-cell.van-field {
             width: 40%;
             background: #F6F6F6;
             border-radius: 8px;
             text-align: center;
-
             .van-field__control {
                 text-align: center;
             }
         }
-
         span.horization {
             display: inline-block;
             width: 30px;
@@ -490,12 +482,10 @@ export default {
         }
     }
 }
-
 .popupxx {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-
     .btn-popup {
         background: #3290C4;
         border-radius: 11px;

src/views/applyfor/ProductStore.vue

@@ -0,0 +1,426 @@
+<template>
+  <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"
+        />
+      </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>
+          </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>
+            </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>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- TEMPORARY: 临时 -->
+      <div @click=" popupVisibility = true">open the door</div>
+    </div>
+
+    <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>
+      </div>
+      <div class="popup__main">
+        <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"
+            />
+          </template>
+          <template v-else>
+            <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>
+              </div>
+            </div>
+          </template>
+        </template>
+      </div>
+      <div class="popup__footer">
+        <div class="btn-container">
+          <div class="btn-span" @click="handleConfirmInput">确认</div>
+        </div>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<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);
+        border-radius: 8px;
+      }
+    }
+    .sub-title {
+      font-size: @font-size-third;
+      font-weight: 400;
+      color: #727273;
+      line-height: 18px;
+      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;
+          }
+        }
+      }
+
+      &__main {
+        padding-left: 36px;
+      }
+
+      &__second {
+        &__header {
+          padding: 10px 12px;
+          justify-content: space-between;
+          &--b-line {
+            border-bottom: 1px solid #eee;
+          }
+          &__content {
+            font-size: @font-size-secondery;
+          }
+          &__more {
+
+          }
+        }
+        &__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;
+    padding-bottom: 10px;
+    padding-top: 8px;
+    border-bottom: 1px solid rgba(151, 151, 151, 0.3);
+    font-size: @font-size-common;
+  }
+  &__main {
+    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;
+    }
+  }
+}
+
+.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;
+    font-weight: 400;
+    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;
+        background: #EFF7FB;
+        border-radius: 8px;
+        font-size: @font-size-secondery;
+        font-weight: 400;
+        color: #727273;
+        padding: 8px 0;
+        transition-property: background-color, color;
+        transition-duration: 0.2s;
+        &.selected {
+          background: #0a83d3;
+          color: @white;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<script>
+
+import vueBus from '@/utils/vueBus';
+
+import CInput from './components/CInput.vue';
+
+export default {
+  name: "ProductStore",
+  components: {
+    CInput
+  },
+  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'
+              }
+            ]
+          }
+        ]
+      },
+    ],
+
+    // 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: ''
+      }
+    ]
+  }),
+  methods: {
+    __init__ () {
+      // TODO: 调用接口
+    },
+
+    __query_data__ () {},
+
+    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()
+    },
+    
+    // 选择类型
+    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'
+      })
+    }
+  }
+
+}
+</script>

src/views/applyfor/askForLeaveType.vue

@@ -8,6 +8,7 @@
             <div class="rows__item flex flex-row flex-row-aic"
                 v-for="(row, idx) in list"
                 :key="row.id"
+                @click="handleClickRows(row)"
             >
                 <div class="content flex flex-row flex-row-aic">
                     <div class="left">
@@ -18,9 +19,8 @@
                 </div>
                 <div class="right">
                     <span>按照半天请假</span>
-                    <!-- life 剩余多少假期等等 -->
                 </div>
-                <van-icon name="arrow" :size="20" />
+                <van-icon name="arrow" :size="20" color="rgba(114, 114, 115, .6)" />
             </div>
         </div>
     </div>
@@ -32,13 +32,11 @@
         font-size: 12px;
         font-weight: 400;
         color: #727273;
-        line-height: 24px;
+        line-height: 28px;
+        text-indent: 1em;
     }
-
     .rows {
-        &-container {
-        }
-        
+        // &-container {}
         &__item {
             justify-content: space-between;
             padding: 8px 18px;
@@ -57,10 +55,10 @@
                     height: 7px;
                     margin-right: 6px;
                     border-radius: 7px;
+                    background: #FA9340;
                     &--0 {
                         background: #FA9340;
                     }
-                    
                     &--1 {
                         background: #008BFF;
                     }
@@ -103,7 +101,6 @@
                     font-weight: 400;
                     color: #191A1E;
                 }
-                
             }
             .midd-line {
                 width: 1px;
@@ -114,7 +111,7 @@
             .right {
                 font-size: 14px;
                 font-weight: 400;
-                color: #727273;
+                color: rgba(114, 114, 115, .6);
                 line-height: 20px;
             }
         }
@@ -125,7 +122,6 @@
 <script>
 import { mapState } from 'vuex';
 
-
 export default {
     name: 'AskForLeave',
     computed: {
@@ -133,13 +129,17 @@ export default {
             list: state => state.leaveTypeList || []
         })
     },
-    data () {
-        return {
-
-        }
-    },
     methods: {
-
+        handleClickRows (row) {
+            const { id } = row
+            this.$router.push({
+                name: 'Applyfor',
+                query: {
+                    type: 6,
+                    asktype: id
+                }
+            })
+        }
     }
 }
 </script>

src/views/applyfor/components/CInput.vue

@@ -13,7 +13,7 @@
                 @clear="() => $emit('input', '')"
                 clearable
                 :maxlength="$attrs.maxlength || undefined"
-                show-word-limit
+                :show-word-limit="typeof $attrs.showWordLimit === 'undefined' ? true : $attrs.showWordLimit"
                 rows="3"
                 autosize
             />

src/views/applyfor/components/CProductStore.vue

@@ -0,0 +1,405 @@
+<template>
+  <div class="product-store-container">
+    <div class="product-store__header flex flex-row flex-row-aic">
+      <div class="left-title">
+        <span>{{ title }}</span>
+        <span class="required">*</span>
+      </div>
+      <div class="right-content flex flex-row flex-row-aic">
+        <template v-if="['1', '3'].includes(type)">
+          <span @click="handleAddGoods" >添加新商品</span>
+          <span class="divider"></span>
+        </template>
+        <span @click="productStoreActionsheetVisibility = true" >批量导入</span>
+        <span class="divider"></span>
+        <span @click="handleGoPStore">商品库选择</span>
+      </div>
+    </div>
+    <template v-if="list.length">
+      <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>
+          <div class="right" @click="showMore = !showMore">
+            <template v-if="!showMore">
+              展开<van-icon name="arrow-down" />
+            </template>
+            <template v-else>
+              收起<van-icon name="arrow-up" />
+            </template>
+          </div>
+        </div>
+        <div class="product-list__rows">
+          <!-- TODO: 数据结构未知暂不修改 -->
+          <div class="prow"
+            v-for="(item, idx) in renderInfoList"
+            :key="idx"
+          >
+            <div class="prow-header flex flex-row flex-row-aic">
+              <div class="prow-header__left">
+                校服
+              </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>
+          </div>
+  
+        </div>
+      </div>
+    </template>
+
+    <template v-else>
+      <div class="product-store__empty">
+        还未添加领用物品
+      </div>
+    </template>
+
+
+    <!-- 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">
+        <div class="icon">
+          <img src="" alt="">
+        </div>
+        <div class="title">批量导入方法说明.Excel</div>
+        <div class="sub-title">264.45 KB</div>
+      </div>
+    </van-action-sheet>
+
+    <div class="tip" style="font-size: 14px;" @click="handleTips">导入提示</div>
+
+    <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;
+
+    #file {
+      font-size: 0;
+      width: 0;
+      height: 0;
+      visibility: hidden;
+      line-height: 0;
+      padding-block: 0;
+      padding-inline: 0;
+      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;
+        height: 10px;
+        margin: 0 8px;
+        background-color: rgba(151, 151, 151, 0.5);
+      }
+    }
+  }
+  &__empty {
+    font-size: @font-size-secondery;
+    font-weight: 400;
+    color: #191A1E;
+    line-height: 20px;
+    padding: 15px 12px;
+    background-color: @white;
+  }
+}
+.action-sheet-container {
+  .icon {
+    img {
+      width: 35px;
+      height: 42px;
+      background: #DFECFD;
+    }
+  }
+  .title {
+    font-size: 12px;
+    font-weight: 400;
+    color: #191A1E;
+    line-height: 18px;
+  }
+  .sub-title {
+    font-size: 12px;
+    font-weight: 400;
+    color: #9A9A9A;
+    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;
+        font-size: @font-size-common;
+        font-weight: 400;
+        color: #727273;
+      }
+    }
+  }
+}
+</style>
+
+<script>
+
+import { excelSuffix } from '@/utils/constant'
+import upload from '@/utils/upload';
+import vueBus from '@/utils/vueBus';
+
+export default {
+  name: 'CProductStore',
+  props: {
+    type: {
+      validator: t => (['1', '3', '4'].includes(t)),
+      required: true
+    }
+  },
+  computed: {
+    title () {
+      let type = this.type
+      let title = ''
+      switch(type) {
+        case '1':
+          title = '采购明细'
+          break
+        case '3':
+          title = '入库明细'
+          break
+        case '4':
+          title = '领用明细'
+          break
+      }
+      return title
+    },
+    renderInfoList () {
+      if (this.showMore) return this.list
+      return this.list.slice(0, 2)
+    }
+  },
+  data: () => ({
+    showMore: false,
+    excelSuffix: excelSuffix.join(','),
+    productStoreActionsheetVisibility: false,
+    actions: [
+      { name: '下载模板', color: 'rgba(0, 122, 255, 1)' },
+      { name: '导入模板', color: 'rgba(0, 122, 255, 1)' },
+    ],
+    list: [1, 2, 3]
+  }),
+
+  created () {
+    vueBus.$on('updateProductList', this.handleUpdateList)
+  },
+  methods: {
+    handleUpdateList(data) {
+      console.log('emit', data);
+    },
+    onCancel() {
+      this.$toast('取消')
+      // Toast('取消');
+    },
+
+    handleSelectSheet (action, idx) {
+      switch(idx) {
+        case 0:
+          this.handleDownloadTemplate()
+          break
+        case 1:
+          // this.handleImportFile()
+          this.$refs.importTemlate.click()
+          break
+      }
+    },
+    /**
+     * @description 下载文件模板
+     */
+    handleDownloadTemplate () {
+      this.$toast('通过a链接下载文件')
+      // downloadFileUseATarget
+    },
+
+    // listener input:file change
+    handleInputFileChange (event) {
+      let files = event.target.files
+      if (files.length) {
+        let file = files[0]
+        console.log('%c change file >>>', 'background: blue; color: #fff', file);
+        this.handleImportFile(file)
+      } else {
+        this.$refs.importTemlate.value = ''
+      }
+    },
+
+    // import file
+    async handleImportFile (file) {
+      try {
+        const fileHref = await upload(file)
+        console.log('%c fileHref >>>', 'background: blue; color: #fff', fileHref);
+
+        // TODO: 导入模板Api
+        // const result = await postFileTemplate({
+        //   href: fileHref
+        // })
+        // if (result.code === 1) {
+        //   console.log('%c handleImportFile >>>', 'background: blue; color: #fff', result.data);
+        // }
+      } catch (error) {
+        console.log('%c handleImportFileError >>>', 'background: blue; color: #fff', error);
+        
+      }
+
+    },
+    // 下载批量导入说明
+    handleDownloadHelp () {
+      this.$toast('下载批量导入说明')
+      console.log('%c printlog >>>', 'background: blue; color: #fff', );
+      // downloadFileUseATarget
+    },
+
+    handleTips () {
+      this.$dialog.confirm({
+        message: `
+        1、导入的物品-学生秋季校服商品库不存在
+        2、导入的物品-老师办公用品A4纸商品库不存在
+        3、导入的物品-库存不足，缺少5件
+        `,
+        confirmButtonText: '取消申领',
+        confirmButtonColor: 'rgba(0, 122, 255, 1)',
+        cancelButtonText: '按已有的库存申领'
+      }).then(res => {
+        // TODO: 取消申请
+        console.log(res);
+      }).catch(err => {
+        // TODO: 继续领取
+        console.log(err);
+      })
+    },
+
+    handleRemoveRow() {
+      let article = '学生秋冬季节校服样式二'
+      this.$dialog.confirm({
+        title: '删除领用物品',
+        message: `请确认是否删除“${article}”的信息`,
+        confirmButtonText: '否',
+        confirmButtonColor: '#576B95',
+        cancelButtonText: '是'
+      }).then(res => {
+        this.$toast(res)
+      }).catch(err => {
+        this.$toast(err)
+      })
+    },
+
+
+    // TODO: 更新领用数据时，是重新选择还是弹出弹框
+    handleUpdateRow () {
+      // this.$router.push({
+      //   name: 'ProductStore',
+      //   query
+      // })
+
+    },
+
+    // 前往商品库列表
+    handleGoPStore () {
+      this.$router.push({
+        name: 'ProductStore'
+      })
+    },
+    // NOTE: 添加新商品
+    handleAddGoods () {
+      this.$toast('添加商品页面')
+      this.$router.push({
+        name: 'Goods'
+      })
+    }
+  },
+  beforeDestroy () {
+    vueBus.$off('updateProductList', this.handleUpdateList)
+  }
+}
+</script>

src/views/applyfor/components/CSelect.vue

@@ -125,7 +125,8 @@ export default {
                         if (fidx >= 0) this.selectVal = this.list[fidx][this.pickerValueKey]
                     }
                 }
-            }
+            },
+            immediate: true
         }
     }
 }

src/views/applyfor/components/IndexType1.vue

@@ -17,7 +17,12 @@
             pickerValueId="id"
         />
 
-        {/* 根据采购类型。这个地方 渲染不同的采购明细框 */}
+        <!-- NOTE: 只有货物采购才有 采购明细 -->
+        <template v-if="type == '1'">
+            <c-product-store
+                type="1"
+            />
+        </template>
                 
         <c-input
             title="总金额（元）"
@@ -66,6 +71,8 @@
 import indexMixin from '../indexMixins'
 import { postCreateInfo } from '@/api/approveinfo'
 import { editApprove } from '@/api/approve'
+import CProductStore from './CProductStore.vue'
+
 
 
 export default {
@@ -73,6 +80,9 @@ export default {
     mixins: [
         indexMixin
     ],
+    components: {
+        CProductStore
+    },
     data () {
         return {
             postApi: null,

src/views/applyfor/components/IndexType3.vue

@@ -1,14 +1,15 @@
 <template>
     <div class="type6-container">
 
-        <!-- 关联单子 -->
+        <!-- TODO: 关联采购审批单 -->
+        <!-- 需要新增页面 -->
         <c-select
             title="采购审批单"
         />
                 
-        <div>
-            <span>入库明细组件</span>
-        </div>
+        <c-product-store
+            type="3"
+        />
 
         <c-files
             v-model="document"
@@ -46,11 +47,17 @@ import { postCreateInfo } from '@/api/approveinfo'
 import { editApprove } from '@/api/approve'
 
 
+import CProductStore from './CProductStore.vue'
+
+
 export default {
     name: 'IndexType3',
     mixins: [
         indexMixin
     ],
+    components: {
+        CProductStore
+    },
     data () {
         return {
             postApi: null,

src/views/applyfor/components/IndexType4.vue

@@ -5,8 +5,9 @@
             v-model="reason"
         />
 
-
-        <!-- TODO: 领用明细 -->
+        <c-product-store
+            type="4"
+        />
 
         <c-files
             ctype="files"
@@ -39,12 +40,17 @@ import indexMixin from '../indexMixins'
 import { postCreateInfo } from '@/api/approveinfo'
 import { editApprove } from '@/api/approve'
 
+import CProductStore from './CProductStore.vue'
+
 
 export default {
     name: 'IndexType4',
     mixins: [
         indexMixin
     ],
+    components: {
+        CProductStore
+    },
     data () {
         return {
             postApi: null,

src/views/applyfor/components/IndexType6.vue

@@ -24,7 +24,7 @@
         />
 
         <c-input 
-            title="请假时长"
+            title="请假时长(时)"
             input-type="number"
             v-model="time"
         />
@@ -72,17 +72,22 @@
 import indexMixin from '../indexMixins'
 import { postCreateInfo } from '@/api/approveinfo'
 import { editApprove } from '@/api/approve'
-
+import { mapState } from 'vuex'
 
 export default {
     name: 'IndexType6',
     mixins: [
         indexMixin
     ],
+    computed: {
+        ...mapState("enum", {
+            "askForleaveTypeList": "leaveTypeList",  // 请假类型
+            "timeList": "timeList"
+        })
+    },
     data () {
         return {
             postApi: null,
-            askForleaveTypeList: this.$store.state.enum.leaveTypeList, // 请假类型
 
             // formData start
             id: '',
@@ -98,24 +103,38 @@ export default {
             end_am: '', // 结束时间段（上午/下午）
             time: '', // 请假时长
             approve_user: [],
-            copy_user: []
+            copy_user: [],
             // formData end
+
+            flow_item: '',
         }
     },
 
     created () {
-        console.log('%c type6 main >>>', 'background: blue; color: #fff', this.$route);
-        // TODO: 判断是否有请假类型。 无请假类型router.replace到请假类型上
-
-        this.getCommonFlowPathData()
-        this.postApi = this.flag === 'approve' ? editApprove : postCreateInfo
+        // NOTE: 判断是否有请假类型。 无请假类型router.replace到请假类型上
+        let type = this.$route.query.asktype
+        if (!type) {
+            this.$router.replace({
+                name: 'AskForLeave'
+            })
+        } else this.type = type
     },
 
     methods: {
+        init () {
+            this.getCommonFlowPathData()
+            this.postApi = this.flag === 'approve' ? editApprove : postCreateInfo
+        },
+
+        handleGetAskLeaveTykpe(type) {
+            console.log('%c get type value >>>', 'background: blue; color: #fff', type);
+        },
+
         // 获取编辑数据
         handleFormatEditData (data) {
             console.log('%c edit data type6 >>>', 'background: blue; color: #fff', data);
         },
+
         /**
          * @description 提交数据默认函数
          */
@@ -127,6 +146,7 @@ export default {
             console.log('execute handleSubmitData', formData);
             this.__post__(formData)
         },
+
         __format_data__ () {
             let templateObj = {
                 module: this.module,
@@ -147,9 +167,11 @@ export default {
                 templateObj.end_time = date
                 templateObj.end_am = amOrPm
             }
+
             // TODO: 格式化尚未完成
             // document
             // images
+
             return templateObj
         },
         validate (data) {
@@ -186,16 +208,49 @@ export default {
                         }
                     })
                     */
-
                 }
             } catch(e) {
                 console.log('it5, __post__', e);
             }
         },
+
+        // NOTE: 检查时间并且查询流程数据
+        checkTimeAndGetFlow () {
+            let start_time = this.start_time
+            let end_time = this.end_time
+
+            if (!(start_time && end_time)) return
+
+            let label = ''
+            if (start_time === end_time) {
+                label = '半天'
+            } else if (start_time.split(' ')[0] === end_time.split(' ')[0]) {
+                label = '一天'
+            } else {
+                label = '一天以上'
+            }
+            let target = this.timeList.filter(timeItem => timeItem.name === label)
+            let id = undefined
+            if (target.length) {
+                id = target[0].id
+                this.flow_item = id
+                this.getCommonFlowPathData({
+                    flow_item: id
+                })
+            }
+        },
     },
+
     watch: {
         type (val, valo) {
             if (val && val !== valo) this.getCommonFlowPathData()
+        },
+
+        start_time () {
+            this.checkTimeAndGetFlow()
+        },
+        end_time () {
+            this.checkTimeAndGetFlow()
         }
     }
 }

src/views/applyfor/components/IndexType8.vue

@@ -2,7 +2,7 @@
     <div class="type6-container">
 
         <div class="group-box">
-            <div class="group__title">保修信息</div>
+            <div class="group__title">报修信息</div>
             <c-select
                 title="维修分类"
                 :required="true"

src/views/applyfor/components/Layout.vue

@@ -17,7 +17,6 @@
         .require {
             font-size: 14px;
             font-weight: 400;
-
         }
         .title {
             color: #191A1E;
@@ -30,6 +29,9 @@
             margin-left: 2px;
         }
     }
+    &__title {
+        font-size: 14px;
+    }
 }
 </style>
 

src/views/applyfor/goods-specifications.vue

@@ -0,0 +1,5 @@
+<script>
+/**
+ * @description 商品规格页面
+ */
+</script>

src/views/applyfor/goods-unit-price.vue

@@ -0,0 +1,5 @@
+<script>
+/**
+ * @description 商品单价和数量
+ */
+</script>

src/views/applyfor/goods.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="goods-container flex flex-col">
+    <div class="goods__main">
+
+      <!-- TODO: 商品分类是否可以采用数据多级别联动。 不跳转页面 -->
+      <c-select
+        title="商品分类"
+      />
+
+      <c-input
+        title="商品编号"
+      />
+
+      <c-input
+        title="商品名称"
+      ></c-input>
+
+      <c-input
+        title="商品品牌"
+      ></c-input>
+
+      <c-select
+        title="商品规格"
+      />
+
+      <c-select
+        title="单价及数量设置"
+      />
+    </div>
+
+    <div class="goods__footer">
+      <div class="btn-container">
+        <div class="btn-span">提交</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.goods {
+  &-container {
+    height: 100vh;
+    justify-content: space-between;
+    .layout-container {
+      margin-top: 10px;
+    }
+    .btn-container {
+      margin-top: initial;
+    }
+  }
+  &__main {
+    height: 0;
+    flex: 1;
+  }
+}
+</style>
+
+<script>
+
+/**
+ * @description 添加商品/修改商品页
+ * @date 2023/11/30
+ * @param flag = edit 表示修改
+ * @param goodsId = xxx 商品Id
+ */
+
+import CInput from './components/CInput.vue';
+import CSelect from './components/CSelect.vue';
+
+export default {
+  name: 'Goods',
+  name_cn: '商品', // 新增或修改商品单项时存在
+  components: {
+    CInput,
+    CSelect
+  },
+  data: () => ({
+    flag: 'new', // 默认是新增
+    goodsId: undefined, // 商品id
+  }),
+  methods: {
+  }
+}
+</script>

src/views/applyfor/indexMixins.js

@@ -35,19 +35,17 @@ export default {
         /**
          * @description 普通申请人获取的默认审核流程数据
          *  */
-        async getCommonFlowPathData () {
+        async getCommonFlowPathData (options = {}) {
             try {
                 let module = this.module
                 const params = {
                     module
                 }
 
-                // NOTE: moduel = [5, 6]时，需要填写 `flow_item`字段。 取值 `type`; 获取审批流程
-                if ([5, 6].includes(module)) {
-                    params['flow_item'] = this.type
-                }
+                // 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 >>>', 'background: blue; color: #fff', params);
+                console.log('%c getCommonFlowPathData Params >>>', 'background: blue; color: #fff', params);
                 
                 const res = await getApproveFlowPath(params)