feat: add page

TODO.md

@@ -1,25 +1,31 @@
 # 钉钉办公系统 - 待办事项
 
+## 前端TODO
+* [x] 上传文件/图片等模块
+* [x] 下载文件通过链接下载 (等待测试)
 
-### 前端TODO
-
-* [ ] 下载文件通过链接下载
 * [ ] 抄送人超过三个时显示状态需要更新
 
-* [x] 上传文件/图片等模块
 * [ ] 审批详情 底部的 各种功能ICONS 需要设计师给予
 * [ ] 审批详情 顶部 ICON需要 设计切图
 
 * [ ] 我的出差-详情页面缺少 发起人字段
 
-#### (Front end)个人中心页面
+* [ ] 商品规格页面
+* [ ] 商品单价页面
+
+### 缺少明细的页面
+* 申购1
+* 入库3
+* 领用（已添加 4
+
+## About Ui
 
 * [ ] 个人中心`tag`Icons需要补充
-* [ ] 个人中心头像和签名图片是走钉钉。 尚未自测
+* [ ] 个人中心头像和签名图片是走钉钉功能。 尚未自测
 
-### 需要后端处理 才能做的
+## RearEnd Bugs
 
-* [x] 个人申请详情无法查看
 * [ ] 我的出差-详情页面 流程中缺少发起人数据
 * [ ] 个人中心-用户详情 缺少学校字段
 * [ ] 个人中心 编辑接口 - 更新失败

src/router/index.js

@@ -46,6 +46,12 @@ const routes = [
     component: () => import(/* webpackChunkName: "applyfor" */ '../views/applyfor/ProductStore.vue')
   },
 
+  {
+    path: '/applyfor/goods',
+    name: 'Goods',
+    component: () => import(/* webpackChunkName: "applyfor" */ '../views/applyfor/goods.vue')
+  },
+
   // NOTE：我的审核状态
   {
     path: '/apply-state',

src/views/apply-state/index.vue

@@ -434,7 +434,6 @@ export default {
         line-height: 22px;
         padding-bottom: 30px;
     }
-
     &__typebox {
         &__header {
             font-size: @font-size-secondery;
@@ -443,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;
@@ -464,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;
@@ -489,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

@@ -62,23 +62,62 @@
           </div>
         </div>
       </div>
+
+      <!-- TEMPORARY: 临时 -->
+      <div @click=" popupVisibility = true">open the door</div>
     </div>
-    
+
     <van-popup
-      class="popupxx"
+      class="popup flex flex-col"
       v-model="popupVisibility"
       position="bottom"
       :style="{ height: '60%' }"
       closeable
       close-icon-position="top-right"
     >
-      <div class="popup__header">全部筛选</div>
+      <div class="popup__header">
+        <span class="product__title">校服</span>
+        <span class="product__inventory">库存剩余：20件</span>
+      </div>
       <div class="popup__main">
-        123
+        <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">
-          <span class="btn-span">submit</span>
+          <div class="btn-span" @click="handleConfirmInput">确认</div>
         </div>
       </div>
     </van-popup>
@@ -171,27 +210,98 @@
       }
     }
   }
-
 }
-
 .popup {
-  &__title {
-    text-align: center;
+  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;
-    font-weight: 600;
-    color: #0A1629;
-    line-height: 46px;
-    padding-bottom: 30px;
   }
-  &__main {}
-  &__footer {}
+  &__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>
-// vueBus.$emit('updateProductList', [])
+
+import vueBus from '@/utils/vueBus';
+
+import CInput from './components/CInput.vue';
+
 export default {
   name: "ProductStore",
+  components: {
+    CInput
+  },
   data: () => ({
     searchVal: '',
     tableData: [
@@ -241,19 +351,74 @@ export default {
         ]
       },
     ],
-    popupVisibility: true
+
+    // 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'
+      })
     }
   }
 

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

@@ -2,16 +2,55 @@
   <div class="product-store-container">
     <div class="product-store__header flex flex-row flex-row-aic">
       <div class="left-title">
-        <span>领用明细</span>
+        <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>
@@ -42,7 +81,7 @@
       </div>
     </van-action-sheet>
 
-    <div class="tip" style="font-size: 14px;" @click="handleTips">tishi</div>
+    <div class="tip" style="font-size: 14px;" @click="handleTips">导入提示</div>
 
     <input
       ref="importTemlate"
@@ -126,6 +165,63 @@
     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>
@@ -136,14 +232,43 @@ 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: []
+    list: [1, 2, 3]
   }),
 
   created () {
@@ -233,11 +358,44 @@ export default {
         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 () {

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,7 +5,9 @@
             v-model="reason"
         />
 
-        <c-product-store />
+        <c-product-store
+            type="4"
+        />
 
         <c-files
             ctype="files"

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/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>