feat: 图片新增和其他前端todolist

TODO.md

@@ -1,31 +1,28 @@
 # 钉钉办公系统 - 待办事项
 
-## Uiiiiii lack todo
-
-- [ ] 个人中心头像和签名图片是走钉钉功能。尚未自测
-
 ## 前端 TODO
 
+- [ ] 个人中心头像和签名图片是走钉钉功能。尚未自测
 - [ ] 路由标题配置。 通过 dingtalk Set title
+
 - [ ] 我的出差-同行人员需要机器测试
 - [ ] 添加/修改抄送人 - 需要机器测试
-- [ ] 明细缺少 数量修改 - 细节
+- [ ] 申请人 用车 - 需要机器测试
+- [ ] 申请人 请假 - 需要机器测试
 
-- [ ] 申请人 用车
+- [ ] 学校文件， 前端缺少部门选择 - 需要机器测试
 
-- [ ] 申请人 请假
+申购详情缺少
 
-- [ ] 学校文件， 前端缺少部门选择
+- [ ] 采购明细
 
-- [ ] 附件上传添加限制。 word/excel/pdf
+  - [ ] 采购明细 - 可在明细详情页面下载
 
-- [ ] Empty 状态 UI
+- [x] 物品明细-downlaod - 交互
 
-申购详情缺少
+  - [ ] 缺少获取链接接口
 
-- [x] 申请合同呈批
-- [ ] 采购明细
-  - [ ] 可在明细详情页面下载
+- [ ] 附件预览
 
 ## RearEnd Bugs And Todo
 
@@ -42,4 +39,16 @@
 - [ ] 详情下载文档接口
 - [ ] 合同申请添加一个关联采购单 Id 的字段
 
+--- 2023/12/25 ---
+
+- [ ] 领用申请单 - 物品明细-下载接口
+- [x] 上传 word 文件处理失败
+
 # 今日完成
+
+- [x] Empty 状态 UI
+- [x] 明细缺少 数量修改 - 细节
+- [x] 审核流程中的明细 UI
+- [x] 审核流程中的头部 ICon。 学校
+- [x] 附件上传添加限制。 word/excel/pdf/picture.
+- [x] 申请合同呈批

record.md

@@ -1,11 +1,10 @@
 # 深圳市第二特殊教育学校
 
-> h5微应用
+> h5 微应用
 
 ```shell
 AgentId=2062807790
 AppKey=dingekepwoyycxfbtyvg
 AppSecret=EjM9WohvKHo3eNqZGGbQHhbjM80QzapdC_f_reYiOCyEFOtaG1qoG2KzEfpSoLWe
 sever=120.79.86.50
-
-```
+```

src/components/Empty/index.vue

@@ -1,9 +1,14 @@
 <template>
     <div class="empty-container flex flex-col flex-col-aic flex-col-jcc">
         <div class="iconbox">
-            <van-icon :name="iconName" color="rgba(50, 144, 196, 1)" :size="iconSize"/>
+            <template v-if="inIconMap">
+                <van-icon :name="iconNam" color="rgba(50, 144, 196, 1)" :size="iconSize" />
+            </template>
+            <template v-else>
+                <img class="img" :src="require(`../../assets/${iconType}.png`)">
+            </template>
         </div>
-        <div class="tips">{{  tip  }}</div>
+        <div class="tips">{{ tip }}</div>
     </div>
 </template>
 
@@ -11,7 +16,7 @@
 
 // Icon类型枚举
 const TypeIconMap = {
-    'common': 'shrink'
+    'common': 'orders-o'
 }
 
 export default {
@@ -22,7 +27,7 @@ export default {
         },
         iconType: {
             type: String,
-            default: 'common'
+            default: 'approve_empty'
         },
         iconSize: {
             type: Number,
@@ -30,11 +35,15 @@ export default {
         }
     },
     computed: {
-        iconName () {
-            return TypeIconMap[this.iconType] || 'smile'
+        inIconMap() {
+            let keys = Object.keys(TypeIconMap)
+            return keys.includes(this.iconType)
+        },
+        iconNam() {
+            return TypeIconMap[this.iconType]
         }
     },
-    data () {
+    data() {
         return {
         }
     }
@@ -47,9 +56,16 @@ export default {
         height: 100%;
         padding-bottom: 50px;
         box-sizing: border-box;
+
         .iconbox {
+            text-align: center;
             margin-top: -46%;
         }
+
+        .img {
+            width: 80%;
+        }
+
         .tips {
             font-size: 14px;
             font-weight: 400;

src/store/modules/user.js

@@ -8,6 +8,7 @@ const signatureStateEnum = ['待审核', '已通过', '已驳回']
 const state = {
     name: '',
     schoolName: '深圳市第二特殊教育学校',
+    subjectLogo: '',
     mobile: '',
     userinfo: {},
     signatureStateText: '', // 个签
@@ -62,11 +63,12 @@ const getters = {
 
 const mutations = {
     UPDATE_USER_DATA: (state, payload) => {
-        const { mobile, name, subject } = payload.data
+        const { mobile, name, subject, subject_image } = payload.data
         state.userinfo = payload.data
         state.mobile = mobile
         state.name = name
         state.schoolName = subject
+        state.subjectLogo = subject_image
         state.signatureStateText = signatureStateEnum[payload.data.signature_status] || ''
     },
     // 更新用户Token

src/utils/applyfor-item.js

@@ -107,6 +107,7 @@ const getContractTypeList = store.getters["enum/getContractTypeList"]
 const formatList = arrs => (arrs.map(item => ({...item, goods_stock: JSON.parse(item.goods_stock)})))
 
 // 申购审批详情
+// TODO: 合同编号
 function getModule1(data){ /* eslint-disable-line */
   const { order_no, department_data, create_at, module_info, apply_user, apply_goods } = data
   console.log('%c ----- >>>', 'background: blue; color: #fff', formatList(apply_goods));
@@ -138,13 +139,12 @@ function getModule1(data){ /* eslint-disable-line */
       title: '申购类型',
       value: getapplyTypeText(module_info.type)
     },
-    // TODO: 待办
-    // 申购明细
-    {
-      type: 'product',
+    Array.isArray(apply_goods) ? {
+      module: 1,
+      type: 'projects',
       title: '申购明细',
       value: formatList(apply_goods)
-    },
+    } : undefined,
     {
       title: '总金额',
       value: module_info.total_amount || '-'
@@ -230,7 +230,7 @@ function getModule2(data){ /* eslint-disable-line */
 
 // 入库申请
 function getModule3(data) { /* eslint-disable-line */
-  const { order_no, department_data, module_info, apply_user } = data
+  const { order_no, department_data, module_info, apply_user, stock_goods } = data
   return [
     {
       title: '审批编号',
@@ -248,8 +248,11 @@ function getModule3(data) { /* eslint-disable-line */
       title: '申请人',
       value: apply_user.name
     },
-    // TODO: 物品明细
-    // 物品明细
+    Array.isArray(stock_goods) ? {
+      type: 'projects',
+      title: '物品明细',
+      value: formatList(stock_goods)
+    } : undefined,
     module_info.document_text.length ? {
       type: 'files',
       title: '附件材料',
@@ -273,7 +276,7 @@ function getModule3(data) { /* eslint-disable-line */
 
 // 领用申请
 function getModule4(data) { /* eslint-disable-line */
-  const { order_no, department_data, module_info, apply_user } = data
+  const { order_no, department_data, module_info, apply_user, use_goods } = data
   return [
     {
       title: '审批编号',
@@ -291,7 +294,13 @@ function getModule4(data) { /* eslint-disable-line */
       title: '申请人',
       value: apply_user.name
     },
-    // TODO: 物品明细
+    Array.isArray(use_goods) ? {
+      id: data.id,
+      module: 4,
+      type: 'projects',
+      title: '物品明细',
+      value: formatList(use_goods)
+    } : undefined,
     module_info.document_text.length ? {
       type: 'files',
       title: '附件材料',
@@ -299,10 +308,10 @@ function getModule4(data) { /* eslint-disable-line */
         url: doc
       }))
     } : undefined,
-    {
+    module_info.remark ? {
       title: '其他补充说明',
       value: module_info.remark
-    }
+    } : undefined
   ]
 }
 
@@ -661,7 +670,7 @@ function getModule11(data) { /* eslint-disable-line */
       title: '申请人',
       value: apply_user.name
     },
-    // TODO:
+    // TODO: 拟稿部门
     {
       title: '拟稿部门',
       value: apply_user.name
@@ -670,7 +679,7 @@ function getModule11(data) { /* eslint-disable-line */
       title: '文件名称',
       value: apply_user.reason
     },
-    // TODO:
+    // TODO: 落款
     {
       title: '落款',
       value: apply_user.name

src/utils/constant.js

@@ -2,22 +2,35 @@
  * @项目常用且不可变更
  */
 
-//定义文件大小全局化
-export const FileSize = 50
-export const PicSize = 10
+//定义文件大小全局化(MB)
+export const FileSize = 80
+
+export const PicSize = 15
 
 // 手机号的基础正则
 export const phoneRegexp = /^1[0-9]{10}$/i
 
 // excel suffix
 export const excelSuffix = [
-  '.xlsx',
-  '.xls',
-  // '.xlsm',
-  // '.xlsb',
-  // '.csv',
+  'xlsx',
+  'xls'
 ]
 
-// 定义采购单临时存储本地字段
+// word suffix
+export const wordSuffix = [
+  'word','doc','docx'
+]
+
+// pdf suffix
+export const pdfSuffix = [
+  'pdf','ppt','pptx'
+]
 
+// pic suffix
+export const pictureSuffix = [
+  'gif','icon','jpeg','jpg', 'png'
+]
+
+
+// 定义采购单临时存储本地字段
 export const SAVE_APPROVAL_NAME = 'TEMPORARY_APPROVAL_SAVE'

src/utils/upload.js

@@ -18,9 +18,8 @@ export default function upload (file, options) {
 
         uploadFile(formData).then(result => {
             if (result.code === 1) resolve(result.data)
-            else reject(new Error(result.msg))
         }).catch(error => {
-            reject(new Error(error.msg))
+            reject(new Error(error.message))
         })
     })
 }

src/views/Approve.vue

@@ -21,7 +21,7 @@
           :person="tabVal != 3 ? item.approve_one && item.approve_one.user.name : ''" flag="approve"
           :flag-state="Number(tabVal)" @click="handleGoInfo(item)" />
       </van-list>
-      <my-empty v-show="showEmpty" tip="暂无数据" />
+      <my-empty v-show="showEmpty" icon-type="approve_empty" tip="暂无待处理的" />
     </div>
 
     <!-- 弹窗 全部筛选 -->

src/views/applyfor/components/CFiles.vue

@@ -15,15 +15,10 @@
             <ul class="files-container">
                 <li class="files-row flex flex-row flex-row-aic" v-for="(file, index) in filelist" :key="index">
                     <div class="icon">
-                        <template v-if="['png', 'jpg', 'jpeg'].includes(file.type)">
-                            <span>pic</span>
-                        </template>
-                        <span v-else-if="file.type === 'word'">word</span>
-                        <span v-else-if="file.type === 'pdf'">pdf</span>
-                        <span v-else-if="['xsl'].includes(file.type)">表格</span>
+                        <img :src="handleGetFileImgPath(file.type)" alt="">
                     </div>
                     <div class="files-row__info">
-                        <div class="files-name ellipsis">{{ file.name }}</div>
+                        <div class="files-name ellipsis">{{ file.type }}{{ file.name }}</div>
                         <div class="files-other-info flex flex-row flex-row-aic">
                             <div class="files-other-info__div flex flex-row">
                                 <div class="size">{{ file.size }}</div>
@@ -78,10 +73,13 @@
             }
 
             .icon {
-                width: 35px;
-                height: 42px;
-                background: #FFCF95;
+                width: 40px;
+                height: 40px;
                 margin-right: 12px;
+
+                img {
+                    width: 100%;
+                }
             }
 
             &__info {
@@ -131,7 +129,8 @@ import {
 
 import {
     FileSize,
-    PicSize
+    PicSize,
+    excelSuffix, wordSuffix, pdfSuffix, pictureSuffix
 } from "@/utils/constant"
 
 export default {
@@ -150,11 +149,14 @@ export default {
             return this.ctype === 'files'
         },
         acceptHandle() { // 图片上传文件限制
-            return this.isFs ? "*" : "image/*"
+            return this.isFs ?
+                [...wordSuffix, ...pdfSuffix, ...excelSuffix, ...pictureSuffix].map(s => (`.${s}`)).join(',')
+                : pictureSuffix.map(s => (`.${s}`)).join(',')
         },
         headerTitle() {
             return this.isFs ? '附件' : '图片'
         },
+
         // 文件大小
         maxSizeComp() {
             let mb = 1 * 1024 * 1024;
@@ -164,6 +166,10 @@ export default {
 
     data() {
         return {
+            excelSuffix,
+            wordSuffix,
+            pdfSuffix,
+            pictureSuffix,
             toastInstance: null,
             filelist: []
         }
@@ -174,22 +180,40 @@ export default {
     },
 
     methods: {
+        // NOTE: 根据类型获取图片链接
+        handleGetFileImgPath(type) {
+            if (pictureSuffix.includes(type)) return require("../../../assets/icon-pic.png")
+            else if (wordSuffix.includes(type)) return require("../../../assets/icon-word.png")
+            else if (pdfSuffix.includes(type)) return require("../../../assets/icon-pdf.png")
+            else if (excelSuffix.includes(type)) return require("../../../assets/icon-excel.png")
+            return ""
+        },
+
         handleUpdateValues() {
             const arrs = this.value
             if (Array.isArray(arrs) && arrs.length) this.filelist = [...arrs]
         },
+
         // 启动上传组件
         handleLaunchUploadBox() {
             this.$refs.uploadFileRef.chooseFile()
         },
 
         // @returns Boolean {true/false}
-        beforeRead() {
+        beforeRead(file) {
             this.toastInstance = this.$toast.loading({
                 duration: 0,
                 message: '上传中'
             })
+
             // NOTE: 上传前的控制
+
+            // 文件大小 = 0 禁止上传
+            if (file.size <= 0) {
+                this.$toast('上传文件，文件尚未编辑！')
+                return false
+            }
+
             return true
         },
 
@@ -203,14 +227,20 @@ export default {
                 file.type = suffix
                 file.url = url
                 file.size = getByteShowSize(file.file.size)
-                file.status = 'success'
+                file.status = 'done'
                 this.$forceUpdate() // 强制更新渲染视图
+
+                this.toastInstance.clear()
             } catch (error) {
+
                 file.status = 'failed'
                 file.message = error.message
-            } finally {
+
+                this.filelist.splice(detail.index, 1)
                 this.toastInstance.clear()
+                this.$toast(error.message)
             }
+
         },
 
         // 超出文件大小

src/views/applyfor/components/IndexType3.vue

@@ -1,8 +1,9 @@
 <template>
     <div class="type6-container">
+        <div class="btn-container" @click="handleNavRightBack">
+            <div class="btn-span">我的</div>
+        </div>
 
-        <!-- TODO: 关联采购审批单 -->
-        <!-- 需要新增页面 -->
         <!-- <c-select title="采购审批单" /> -->
         <c-select-imitate title="采购审批单" :value="selOrd_text" @click="handleClickSelOrdRow" @clear="handleCloseSelOrd" />
 
@@ -76,6 +77,28 @@ export default {
     },
 
     methods: {
+        // NOTE: 设置标题等
+        navigationSetting() {
+            // settingNavigationTitle({
+            //     title: '维修申请'
+            // })
+
+            // settingNavigationRight({
+            //     show: true,
+            //     control: true,
+            //     text: '我的出差',
+            //     callback: this.handleNavRightBack
+            // })
+        },
+        handleNavRightBack(result) {
+            console.log('result', result);
+            this.$router.push({
+                name: 'ApplyState',
+                query: {
+                    type: this.module
+                }
+            })
+        },
         // 监听 `vueBus.$on` `listenApprovalFormList`
         handleApprovalFormList(arrs) {
             // NOTE: 新增商品时 需要定义一个 `__id__` 字段

src/views/applyfor/components/IndexType4.vue

@@ -1,5 +1,9 @@
 <template>
     <div class="type6-container">
+        <div class="btn-container" @click="handleNavRightBack">
+            <div class="btn-span">我的</div>
+        </div>
+
         <c-input title="物品用途" v-model="reason" />
 
         <c-product-store type="4" v-model="use_goods" />
@@ -62,6 +66,28 @@ export default {
     },
 
     methods: {
+        // NOTE: 设置标题等
+        navigationSetting() {
+            // settingNavigationTitle({
+            //     title: '维修申请'
+            // })
+
+            // settingNavigationRight({
+            //     show: true,
+            //     control: true,
+            //     text: '我的出差',
+            //     callback: this.handleNavRightBack
+            // })
+        },
+        handleNavRightBack(result) {
+            console.log('result', result);
+            this.$router.push({
+                name: 'ApplyState',
+                query: {
+                    type: this.module
+                }
+            })
+        },
         // 获取编辑数据
         handleFormatEditData(data) {
             console.log('%c edit data type6 >>>', 'background: blue; color: #fff', data);

src/views/applyfor/index.vue

@@ -160,8 +160,6 @@ export default {
             if (this.isEdit) this.__detail__()
         },
 
-        // NOTE: 因为是编辑 需要判断接口
-        // TODO: 缺少
         async __detail__() {
             try {
                 const func = this.flag === 'info' ? approveInfoApi.getInfo : approveApi.getInfo

src/views/approve/components/ApproveControl.vue

@@ -118,21 +118,27 @@ export default {
                 }
 
                 // 通过状态
-                if (state === 3 && [1, 2].includes(this.module)) {
+                if (state === 3 && [1].includes(this.module)) {
                     // 采购申请
                     if (this.module === 1) {
-                        temparr.splice(0, 2, ...[
+                        let arrs = [
                             {
                                 title: "申请合同呈批",
                                 img: require('@/assets/approve/folder-up.png'),
                                 event: this.handleJump2Contract
-                            },
-                            {
+                            }
+                        ]
+
+                        // NOTE: 只有 `type === 1` 时才有数据
+                        if (this.editData.type == 1) {
+                            arrs.push({
                                 title: "采购明细",
                                 img: require('@/assets/approve/procure.png'),
-                                event: this.handleEvent
-                            }
-                        ])
+                                event: this.handleSeeProcureInfo
+                            })
+                        }
+
+                        temparr.splice(0, 2, ...arrs)
                     }
                 }
             } else if (flag === 'approve') {
@@ -223,15 +229,14 @@ export default {
                 }
             })
         },
-        // NOTE: 提醒
-        // TODO: 申请提醒/审批提醒
+
+        // NOTE: 催办
         async handleDingEvent() {
             try {
-                const func = this.flag === 'info' ? putUrging : () => { }
                 const params = {
                     id: this.id
                 }
-                const result = await func(params)
+                const result = await putUrging(params)
                 if (result.code === 1) {
                     this.$toast(result.msg)
                 }
@@ -239,6 +244,7 @@ export default {
                 console.log('ding err>', error);
             }
         },
+
         // NOTE: 驳回
         async handleRevokeEvent() {
             try {
@@ -309,6 +315,10 @@ export default {
             })
         },
 
+
+        // NOTE: 跳转采购明细页面
+        handleSeeProcureInfo() { }
+
     }
 }
 </script>

src/views/approve/components/DetailRows.vue

@@ -3,11 +3,14 @@
         <div class="detail-rows-container__title flex flex-row flex-aic">
             <div>
                 <span>{{ title }}</span>
-                <!-- TODO: 物品明细 - 下载按钮 -->
+                <span v-if="$attrs.module === 4 && type === 'projects'" class="download-info"
+                    @click="handleDownloadInfo($attrs.id)">
+                    <img src="../../../assets/approve/download.png" alt="">
+                    下载
+                </span>
             </div>
 
-            <!-- TODO: 采购明细 展开&收起 -->
-            <div class="more-box" v-if="type === 'projects'" @click="() => more = !more">
+            <div class="more-box" v-if="type === 'projects' && value.length > 2" @click="() => more = !more">
                 <span>{{ moreText }}</span>
                 <van-icon v-if="more" name="arrow-up" />
                 <van-icon v-else name="arrow-down" />
@@ -17,43 +20,44 @@
         <div v-if="[undefined, ''].includes(type)" class="value value--common">{{ value }}</div>
         <div class="value value--link" v-else-if="type === 'link'">{{ value }}</div>
 
-        <!-- TODO: 后期添加 filter -->
         <div class="value value--common" v-else-if="type === 'date'">{{ value }}</div>
 
-        <!-- TODO: 类型枚举 -->
         <div class="value value--common" v-else-if="type === 'type'">{{ value }}</div>
 
-        <!-- TODO: 明细 后期会有更加细致的划分。 因为有11种模块 -->
+        <!-- : 明细 后期会有更加细致的划分 -->
         <template v-else-if="type === 'projects'">
             <!-- 采购商品明细 -->
+            <!-- 领用明细 -->
+            <!-- 入库明细 -->
+
             <div class="projects-box-wrapper">
-                <div class="projects-box" v-for="(item, idx) in value" :key="idx">
+                <div class="projects-box" v-for="(item, idx) in handleListenMore(value)" :key="idx">
                     <div class="projects__header flex flex-row flex-row--aic">
-                        <div class="title">{{ item.projectName }}</div>
-                        <div class="count">x{{ item.count }}</div>
+                        <div class="title">{{ item.goods_name }}</div>
                     </div>
-                    <div class="projects__footer flex flex-row flex-row-aic">
-                        <div class="tags">
-                            <span v-for="(tag, tagidx) in item.tags" :key="tagidx">
-                                {{ tag }} {{ item.tags.length - 1 !== tagidx ? '；' : '' }}
+                    <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.money }}
+                        <div class="money" v-if="$attrs.module === 1">
+                            ￥{{ item.total_price }}
                         </div>
                     </div>
                 </div>
             </div>
-
         </template>
 
-
         <!-- NOTE: 附件材料 -->
         <template v-else-if="type === 'files'">
             <div class="files-container">
-                <div class="files-row flex flex-row flex-row-aic" v-for="(file, idx) in value" :key="idx">
+                <div class="files-row flex flex-row flex-row-aic" v-for="(file, idx) in handleFormatFiles(value)"
+                    :key="idx">
                     <div class="icon">
-                        <!-- NOTE: 根据文件类型放置Icon -->
+                        <img :src="handleGetFileImgPath(file.type)" alt="">
                     </div>
                     <div class="files-row__info">
                         <div class="files-name">{{ file.name }}</div>
@@ -63,7 +67,6 @@
                         </div>
                     </div>
                 </div>
-
             </div>
         </template>
 
@@ -82,6 +85,12 @@
 <script>
 import { ImagePreview } from 'vant'
 
+import { getStaticLinkInfo } from '@/utils/util'
+
+import { excelSuffix, wordSuffix, pdfSuffix, pictureSuffix } from '@/utils/constant'
+
+// import { downloadFileUseATarget } from '@/utils/util';
+
 export default {
     props: {
         title: {
@@ -112,22 +121,82 @@ export default {
     },
     data() {
         return {
-            more: true, // 展开与收起的`more`key
+            excelSuffix,
+            wordSuffix,
+            pdfSuffix,
+            pictureSuffix,
+            more: false, // 展开与收起的`more`keyword
         }
     },
     methods: {
+        // NOTE: 根据类型获取图片链接
+        handleGetFileImgPath(type) {
+            if (pictureSuffix.includes(type)) return require("../../../assets/icon-pic.png")
+            else if (wordSuffix.includes(type)) return require("../../../assets/icon-word.png")
+            else if (pdfSuffix.includes(type)) return require("../../../assets/icon-pdf.png")
+            else if (excelSuffix.includes(type)) return require("../../../assets/icon-excel.png")
+            return ""
+        },
         // TODO: Review files
         handleReviewFiles(file, index) {
-            console.log('handleReviewFile', file, index);
+            if (pictureSuffix.includes(file.type)) {
+                ImagePreview({
+                    images: [file.url],
+                    startPosition: 0
+                })
+            } else {
+                console.log('handleReviewFile, 等待开发', file, index);
+            }
         },
 
-        // NOTE: Review images
+        // Review images
         handleReviewImages(files, idx) {
             ImagePreview({
                 images: files.map(file => file.url),
                 startPosition: idx
             })
+        },
+
+        // NOTE: 根据 `more` 字段展示数据内容
+        handleListenMore(list) {
+            let more = this.more
+            let len = list.length
+            if (len > 2 && !more) return list.slice(0, 2)
+            return list
+        },
+
+        // NOTE: 加工 files 数组
+        handleFormatFiles(files) {
+            return files.map(file => {
+                const { name, suffix, url } = getStaticLinkInfo(file.url)
+                return {
+                    url,
+                    type: suffix,
+                    name
+                }
+            })
+        },
+
+        // TODO: Download goods info 
+        // TODO: 缺少接口
+        async handleDownloadInfo(id) {
+            try {
+                console.log('%c info-id >>>', 'background: blue; color: #fff', id);
+                // const formData = {
+                //     module: this.type
+                // }
+                // const result = await getImportTemplate(formData)
+                // if (result.code === 1) {
+                //     const { url } = result.data
+                //     if (url) { // url 存在下载
+                //         downloadFileUseATarget(url)
+                //     } else this.$toast('请联系网络管理员')
+                // }
+            } catch (error) {
+                console.log('%c handleDownloadTemplate >>>', 'background: blue; color: #fff', error);
+            }
         }
+
     }
 
 }
@@ -155,6 +224,16 @@ export default {
                     margin-left: 2px;
                 }
             }
+
+            .download-info {
+                margin-left: 10px;
+                color: @link-color;
+
+                img {
+                    width: 12px;
+                    height: 12px;
+                }
+            }
         }
 
         .value {
@@ -183,20 +262,13 @@ export default {
             &-box {
 
                 .title,
-                .tags {
+                .category_name {
                     font-size: @font-size-common;
                     font-weight: 400;
                     color: #191A1E;
                     line-height: 18px;
                 }
 
-                .count {
-                    font-size: @font-size-third;
-                    font-weight: 400;
-                    color: #727273;
-                    line-height: 18px;
-                }
-
                 &:last-child {
                     .projects__footer {
                         border-bottom: initial;
@@ -213,17 +285,36 @@ export default {
             }
 
             &__footer {
-                justify-content: space-between;
                 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;
-                    color: rgb(244, 86, 66);
                     line-height: 18px;
+                    padding: 6px 0;
+                    color: rgb(244, 86, 66);
                 }
             }
         }
@@ -238,15 +329,14 @@ export default {
 
             &-row {
                 .icon {
-                    width: 35px;
-                    height: 42px;
-                    background: #FFCF95;
+                    width: 40px;
+                    height: 40px;
                     margin-right: 12px;
-                    border-radius: 6px;
-                    overflow: hidden;
-                }
 
-                // &__info {}
+                    img {
+                        width: 100%;
+                    }
+                }
             }
 
             &-name {

src/views/approve/detail.vue

@@ -4,12 +4,13 @@
             <div class="title">
                 <span>{{ title }}</span>
             </div>
+
             <div class="location flex flex-row flex-row-cic">
-                <van-icon name="chat-o" />
+                <img v-show="subjectLogo" :src="subjectLogo" :alt="schoolName">
                 <span>{{ schoolName }}</span>
             </div>
 
-            <!-- TODO: 审核样式 -->
+            <!-- 审核样式 -->
             <div :class="[
                 'status-bar',
                 renderStatusBarClass
@@ -17,7 +18,7 @@
                 <span>{{ approveStatusMap }}</span>
             </div>
 
-            <!-- TODO: 配置审核通过/撤销/拒绝 -->
+            <!-- 配置审核通过/撤销/拒绝 -->
             <div class="float-status" v-if="dataDetail && [3, 4, 5].includes(dataDetail.status)">
                 <img v-if="dataDetail.status == 3" src="../../assets/approve/yitongguo.png" alt="">
                 <img v-else-if="dataDetail.status == 4" src="../../assets/approve/yibohui.png" alt="">
@@ -158,8 +159,6 @@ export default {
         title() {
             if (!this.dataDetail) return ''
             const { create_user } = this.dataDetail
-            console.log('%c name???? >>>', 'background: blue; color: #fff', create_user);
-
             if (create_user.name) return `${create_user.name}提交的申请单`
             else return ''
         },
@@ -167,7 +166,8 @@ export default {
             'evectionTypeList',
         ]),
         ...mapState('user', [
-            'schoolName'
+            'schoolName',
+            'subjectLogo'
         ]),
         approveStatusMap() {
             if (!this.dataDetail) return ''
@@ -454,14 +454,20 @@ export default {
         }
 
         .location {
+            font-size: 0;
+            vertical-align: middle;
+
+            img {
+                width: 20px;
+                height: 20px;
+                vertical-align: middle;
+            }
+
             span {
-                width: 137px;
-                height: 18px;
-                font-size: 12px;
+                font-size: 14px;
                 font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #727273;
-                line-height: 18px;
                 margin-left: 6px;
             }
         }