添加采购明细UI页面

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 node_modules
+dist
 
 # local env files
 .env.local

TODO.md

@@ -1,27 +1,24 @@
 # 钉钉办公系统 - 待办事项
 
+> 最好采用 NODEJS v16.0 + 版本。 最新版会报错 [nodejs 新版本引起的：digital envelope routines::unsupported](https://blog.csdn.net/fengyuyeguirenenen/article/details/128319228)
+
 ## 前端 TODO
 
-- [ ] 个人中心头像和签名图片是走钉钉功能。尚未自测
 - [ ] 路由标题配置。 通过 dingtalk Set title
 
+- [ ] 个人中心头像和签名图片是走钉钉功能。尚未自测
 - [ ] 我的出差-同行人员需要机器测试
 - [ ] 添加/修改抄送人 - 需要机器测试
 - [ ] 申请人 用车 - 需要机器测试
 - [ ] 申请人 请假 - 需要机器测试
-
 - [ ] 学校文件， 前端缺少部门选择 - 需要机器测试
 
-申购详情缺少
-
-- [ ] 采购明细
-
-  - [ ] 采购明细 - 可在明细详情页面下载
-
-- [x] 物品明细-downlaod - 交互
+- [x] 物品明细-Downlaod - 交互
 
   - [ ] 缺少获取链接接口
 
+- [ ] 采购申请单 - 采购明细 - 可在明细详情页面下载 （缺少接口)
+
 - [ ] 附件预览
 
 ## RearEnd Bugs And Todo

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "start": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {

record.md

@@ -8,3 +8,9 @@ AppKey=dingekepwoyycxfbtyvg
 AppSecret=EjM9WohvKHo3eNqZGGbQHhbjM80QzapdC_f_reYiOCyEFOtaG1qoG2KzEfpSoLWe
 sever=120.79.86.50
 ```
+
+```shell
+# 应用首页地址
+
+# https://dingding.hdlkeji.com
+```

src/main.js

@@ -14,6 +14,7 @@ import App from './App.vue'
 
 import 'amfe-flexible'
 
+new vConsole()
 if (process.env.NODE_ENV == 'development') {
   // https://www.npmjs.com/package/vconsole
   // 可以添加`options`进行配置项目

src/router/index.js

@@ -130,6 +130,15 @@ const routes = [
     component: () => import(/* webpackChunkName: "approve" */ '../views/approve/feedback-results.vue')
   },
 
+  {
+    meta: {
+      title: '采购明细'
+    },
+    path: '/approve/procure-info',
+    name: 'ProcureInfo',
+    component: () => import(/* webpackChunkName: "approve" */ '../views/approve/procure-info.vue')
+  },
+
 
   // ====== 我的页面
   {

src/utils/constant.js

@@ -31,6 +31,8 @@ export const pictureSuffix = [
   'gif','icon','jpeg','jpg', 'png'
 ]
 
-
 // 定义采购单临时存储本地字段
-export const SAVE_APPROVAL_NAME = 'TEMPORARY_APPROVAL_SAVE'
+export const SAVE_APPROVAL_NAME = 'TEMPORARY_APPROVAL_SAVE'
+
+// 定义采购单明细查看临时本地存储数据字段 
+export const SAVE_PROCURE_INFO_TEMPORARY = 'TEMPORARY_PROCURE_INFO_LIST'

src/views/approve/components/ApproveControl.vue

@@ -7,8 +7,8 @@
             flag = info 几种状态
             2处理中: 催办，撤销，下载文件
             3通过： 催办（disabled),修改（disabled), 撤销，下载
-            4已驳回：催办（disabled),修改，撤销，下载
-            5撤销：重新发起
+            4已驳回：催办（disabled),重新发起,修改，撤销，下载
+            5撤销：null
 
             TODO:
             采购通过
@@ -49,6 +49,8 @@
 
 import { putUrging, putCancel } from '@/api/approveinfo'
 
+import { SAVE_PROCURE_INFO_TEMPORARY } from '@/utils/constant'
+
 export default {
     name: 'ApproveControl',
     props: {
@@ -105,16 +107,17 @@ export default {
                     case 4:
                         temparr = [
                             { ...urging, disable: true },
-                            edit,
+                            // edit,
+                            REISSUE,
                             revoke,
                             print
                         ]
                         break;
-                    case 5:
-                        temparr = [
-                            REISSUE
-                        ]
-                        break;
+                    // case 5:
+                    //     temparr = [
+                    //         REISSUE
+                    //     ]
+                    //     break;
                 }
 
                 // 通过状态
@@ -199,8 +202,7 @@ export default {
                 {
                     title: "重新发起",
                     img: require('@/assets/approve/folder-enter.png'),
-                    // TODO: 缺失接口
-                    event: this.handleEvent
+                    event: this.handleEditEvent
                 },
                 {
                     // NOTE: 申请呈批(专属。申请呈批)
@@ -264,7 +266,7 @@ export default {
             }
         },
         // NOTE: 下载文件
-        // TODO: 下载文件尚未拥有
+        // TODO: 下载文件接口
         handleDownloadFileEvent() {
             try {
                 this.$toast('功能迭代中...')
@@ -317,7 +319,17 @@ export default {
 
 
         // NOTE: 跳转采购明细页面
-        handleSeeProcureInfo() { }
+        handleSeeProcureInfo() {
+            let arrs = this.editData.apply_goods
+            if (Array.isArray(arrs) && arrs.length) {
+                localStorage.setItem(SAVE_PROCURE_INFO_TEMPORARY, JSON.stringify(this.editData.apply_goods))
+                this.$router.push({
+                    name: 'ProcureInfo'
+                })
+            } else {
+                this.$toast('暂无采购明细！')
+            }
+        }
 
     }
 }

src/views/approve/procure-info.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="procure-info-container flex flex-col">
+    <div class="main">
+      <div class="main-title">物品明细</div>
+      <div class="projects-box-wrapper" v-for="(item, idx) in list" :key="idx">
+        <div class="projects-box">
+          <div class="projects__header flex flex-row flex-row--aic">
+            <div class="title">{{ item.goods_name }}</div>
+          </div>
+          <div class="projects__footer">
+            <div class="tags flex flex-row flex-row-aic" v-for="(stock, tagidx) in item.goods_stock" :key="tagidx">
+              <span class="category_name">
+                {{ stock.name }}
+              </span>
+              <span class="category_count">x{{ stock.stock }}</span>
+            </div>
+            <div class="money">
+              ￥{{ item.total_price }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="footer flex flex-row flex-row-aic">
+      <div class="footer__item flex flex-col" @click="handleDownloadFileEvent">
+        <img :src="require('@/assets/icons-print.png')" alt="">
+        <span>下载文件</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/**
+ * @name 采购明细详情
+ */
+
+import { SAVE_PROCURE_INFO_TEMPORARY } from '@/utils/constant'
+
+
+export default {
+  name: 'ProcureInfo',
+  data: () => ({
+    list: []
+  }),
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let arrs = localStorage.getItem(SAVE_PROCURE_INFO_TEMPORARY)
+      if (arrs) {
+        arrs = JSON.parse(arrs)
+        this.list = arrs.map(item => ({
+          ...item,
+          goods_stock: JSON.parse(item.goods_stock)
+        }))
+        console.log('%c list >>>', 'background: blue; color: #fff', this.list);
+      }
+    },
+
+    // NOTE: 下载文件
+    // TODO: 下载文件接口
+    handleDownloadFileEvent() {
+      try {
+        this.$toast('功能迭代中...')
+      } catch (error) {
+        console.log('download file err>>', error);
+      }
+    }
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import url("@/styles/variables.less");
+
+.procure-info-container {
+  padding-top: 10px;
+  height: 100%;
+  box-sizing: border-box;
+
+
+  &>.main {
+    height: 0;
+    flex: 1;
+    overflow: auto;
+    padding: 10px 12px;
+    background-color: #fff;
+  }
+
+  .main-title {
+    font-size: 16px;
+    font-weight: 400;
+    color: #727273;
+    line-height: 30px;
+  }
+
+
+  .footer {
+    padding-top: 10px;
+    padding-bottom: 20px;
+    justify-content: center;
+
+    &__item {
+      align-items: center;
+      justify-content: center;
+
+      img {
+        width: 40px;
+        height: 40px;
+      }
+
+      span {
+        font-size: 14px;
+      }
+    }
+  }
+
+  // 商品明细
+  .projects {
+    &-box-wrapper {
+      padding: 16px 12px;
+      background-color: rgba(248, 248, 248, 1);
+      border-radius: 7px;
+    }
+
+    &-box {
+
+      .title,
+      .category_name {
+        font-size: @font-size-common;
+        font-weight: 400;
+        color: #191A1E;
+        line-height: 18px;
+      }
+
+      &:last-child {
+        .projects__footer {
+          border-bottom: initial;
+          padding-bottom: initial;
+          margin-bottom: initial;
+        }
+      }
+    }
+
+    &__header {
+      justify-content: space-between;
+      padding-bottom: 10px;
+      overflow: hidden;
+    }
+
+    &__footer {
+      padding-bottom: 10px;
+      border-bottom: 1px solid #D8D8D8;
+      margin-bottom: 10px;
+      overflow: hidden;
+
+      .tags {
+        justify-content: space-between;
+        padding: 2px 0;
+
+        .category {
+          &_name {
+            font-size: 14px;
+            color: #868686;
+          }
+
+          &_count {
+            font-size: @font-size-third;
+            font-weight: 400;
+            color: #727273;
+            line-height: 18px;
+          }
+        }
+      }
+
+      .money {
+        font-size: @font-size-common;
+        font-weight: 500;
+        line-height: 18px;
+        padding: 6px 0;
+        color: rgb(244, 86, 66);
+      }
+    }
+  }
+}
+</style>