feat: change modifyed

src/utils/constant.js

@@ -0,0 +1,7 @@
+/**
+ * @项目常用且不可变更
+ */
+
+//定义文件大小全局化
+export const FileSize = 50
+export const PicSize = 10

src/utils/import-vant.js

@@ -21,10 +21,15 @@ import {
     ActionSheet,
     Switch,
     List,
-    Dialog
+    Dialog,
+    ImagePreview
 } 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)
 
+
+Vue.use(ImagePreview)
+
+Vue.$imagePreview = ImagePreview
 Vue.$toast = Toast

src/utils/util.js

@@ -28,4 +28,79 @@ export const fZero = n => (n > 9 ? `${n}` : `0${n}`)
  * @param {unknown} variable 一个不知道类型的变量
  * @returns {String} 返回变量类型(String/Number/Null/Undefined/...)
  */
-export const getStringTye = variable => (Object.prototype.toString.call(variable, variable).split(' ')[1].slice(0, -1))
+export const getStringTye = variable => (Object.prototype.toString.call(variable, variable).split(' ')[1].slice(0, -1))
+
+
+
+/**
+ * 获取静态资源基本信息
+ * @param {String} url 静态资源链接
+ * @returns 
+ *      filename: 文件名称(无后缀)
+ *      name: 文件名称 + 后缀
+ *      suffix: 后缀
+ *      path: 文件路径（不包含域名、文件名 + 后缀）
+ *      domainName: 域名
+ *      url: 输入
+ */
+export const getStaticLinkInfo = url => {
+    // https://chaoting-washing.oss-cn-zhangjiakou.aliyuncs.com/dd808164257b2fc2/a729087658ff1ef0.pdf
+    let regexp = /^(http[s]:\/\/.*\.com)(.*?)(([\w\d\s.]*?)\.(\w*))$/i;
+    console.log('%c getStaticLinkInfo url >>>', 'background: blue; color: #fff', url);
+    
+    let matchArrs = url.match(regexp);
+    
+    let name = 'unknow'
+    let suffix = 'unknow'
+    let path = ''
+    let filename = ''
+    let domainName = ''
+
+    if (Array.isArray(matchArrs) && matchArrs.length) {
+        const [, _domainName, _path, filenameAll, _filename, _suffix ] = matchArrs        
+        name = filenameAll
+        suffix = _suffix
+        path = _path
+        filename = _filename
+        domainName = _domainName
+    }
+
+    return {
+        filename,
+        name,
+        suffix,
+        path,
+        domainName,
+        url
+    }
+}
+
+export const getFileNameSuffix = filename => {
+    let regexp = /^[\w\d\s.]*?\.(\w*)$/i;
+    let matchRes = filename.match(regexp);
+    if (Array.isArray(matchRes) && matchRes.length) {
+        const [,suffix] = matchRes
+        return suffix
+    }
+    return ''
+}
+
+
+/**
+ * 获取可视化的大小
+ * @param {Number} size 字节大小
+ */
+export const getByteShowSize = size => {
+    if (!size)  return "";
+    var num = 1024.00; //byte
+    if (size < num)
+        return size + "B";
+    if (size < Math.pow(num, 2))
+        return (size / num).toFixed(2) + "KB"; //kb
+    if (size < Math.pow(num, 3))
+        return (size / Math.pow(num, 2)).toFixed(2) + "MB"; //M
+    if (size < Math.pow(num, 4))
+        return (size / Math.pow(num, 3)).toFixed(2) + "G"; //G
+    return (size / Math.pow(num, 4)).toFixed(2) + "T"; //T
+
+}

src/views/applyfor/components/CDate.vue

@@ -9,8 +9,8 @@
                 <div v-else class="default">请选择</div>
             </div>
             <div class="right">
-                <van-icon v-if="selectVal" color="#A2A3A4" name="clear" @click="handleRemoveVal"/>
-                <van-icon color="#A2A3A4" name="arrow"  @click="() => show = !show" />
+                <van-icon v-if="selectVal" :size="20" color="#A2A3A4" name="clear" @click="handleRemoveVal"/>
+                <van-icon color="#A2A3A4" :size="20" name="arrow"  @click="() => show = !show" />
             </div>
         </div>
 

src/views/applyfor/components/CFiles.vue

@@ -17,23 +17,54 @@
         </div>
 
         <!-- files show style -->
-        <div class="source-listbox">
-            <render-dom :vnode="vnodecom" />
+        <div class="source-listbox" v-if="isFs">
+            <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>
+                    </div>
+                    <div class="files-row__info">
+                        <div class="files-name ellipsis">{{ 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>
+                                <div class="review" @click="handleReviewFiles(file)">预览</div>
+                            </div>
+                            <van-icon
+                                :size="20"
+                                color="#A2A3A4"
+                                name="clear"
+                                @click="handleRemoveFile(file, index)"
+                            />
+                        </div>
+                    </div>
+                </li>
+            </ul>
         </div>
-        
+
         <van-uploader
             v-show="filelist.length && !isFs"
             ref="uploadFileRef"
             v-model="filelist"
-            :after-read="afterRead"
+            preview-size="48px"
             :max-count="$attrs.maxCount"
-            :before-read="beforeRead"
-            @oversize="onOversize"
+            :max-size="maxSizeComp"
             :show-upload="false"
             :accept="acceptHandle"
             :preview-image="!isFs"
-            preview-size="48px"
-        ></van-uploader>
+            :before-read="beforeRead"
+            :after-read="afterRead"
+            @oversize="onOversize"
+        >
+        </van-uploader>
     </div>
 </template>
 
@@ -72,9 +103,11 @@
             }
             &__info {
                 flex: 1;
+                width: 0;
             }
         }
         &-name {
+            width: 88%;
             font-size: @font-size-common;
             font-weight: 400;
             color: #191A1E;
@@ -102,7 +135,17 @@
 </style>
 
 <script>
+import { ImagePreview } from 'vant';
 import uploadFile from '@/utils/upload'
+import {
+    getStaticLinkInfo,
+    getByteShowSize
+} from '@/utils/util'
+
+import {
+    FileSize,
+    PicSize
+} from "@/utils/constant"
 
 export default {
     name: 'CFiles',
@@ -119,15 +162,19 @@ export default {
         acceptHandle () { // 图片上传文件限制
             return this.isFs ? "*" : "image/*"
         },
-        vnodecom () {
-            return this.isFs ? this.handleRenderFiles() : null
-        },
         headerTitle () {
             return this.isFs ? '附件' : '图片'
+        },
+        // 文件大小
+        maxSizeComp () {
+            let mb = 1 * 1024 * 1024;
+            return this.isFs ? FileSize * mb : PicSize * mb
         }
     },
+
     data () {
         return {
+            toastInstance: null,
             filelist: []
         }
     },
@@ -135,92 +182,83 @@ export default {
     methods: {
         // 启动上传组件
         handleLaunchUploadBox() {
-            // console.log(this.$refs.uploadFileRef);
             this.$refs.uploadFileRef.chooseFile()
         },
 
-        // 渲染文件
-        handleRenderFiles() {
-            let files = this.filelist
-            return (
-                <ul class="files-container">
-                    {
-                        files.map((file, index) => (
-                            <li class="files-row flex flex-row flex-row-aic">
-                                <div class="icon">
-                                    <img src={file.url} ></img>
-                                </div>
-                                <div class="files-row__info">
-                                    <div class="files-name">{ file.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.file.size }</div>
-                                            <div class="review" onClick={this.handleReviewFiles.bind(this, file.file)}>预览</div>
-                                        </div>
-                                        <van-icon
-                                            size={20}
-                                            color="#A2A3A4"
-                                            name="clear"
-                                            onClick={this.handleRemoveFile.bind(this, file, index)}
-                                        />
-                                    </div>
-                                </div>
-                            </li>
-                        ))
-                    }
-                </ul>
-            )
-        },
-
-        // 渲染图片 采用组件自带图片渲染
-        // handleRenderImages() {},
-
         // @returns Boolean {true/false}
-        beforeRead (file) {
-            if ([].includes(file.ctype)) {
-                console.log('before read', file);
-            }
+        beforeRead () {
+            this.toastInstance = this.$toast.loading({
+                duration: 0,
+                message: '上传中'
+            })
+            // NOTE: 上传前的控制
+            // console.log('before read func>>', file);
+            // if ([].includes(file.ctype)) {
+            //     console.log('before read', file);
+            // }
             return true
         },
 
         // 自行上传文件
         async afterRead (file, detail) {
-            // 通过 status 属性可以标识上传状态，uploading 表示上传中，failed 表示上传失败，done 表示上传完成。
-            // file.status = 'uploading';
-            // file.message = '上传中...';
-
-            // setTimeout(() => {
-            //     file.status = 'failed';
-            //     file.message = '上传失败';
-            // }, 1000);
             console.log('after read', file, detail)
             try {
                 const url = await uploadFile(file.file)
-
-                console.log('%c url >>>', 'background: blue; color: #fff', url);
+                const { suffix } = getStaticLinkInfo(url)
+                file.name = file.file.name
+                file.type = suffix
                 file.url = url
+                file.size = getByteShowSize(file.file.size)
                 file.status = 'success'
-
-               return file
+                this.$forceUpdate() // 强制更新渲染视图
             } catch (error) {
-                console.log('upload catch', error);
+                file.status = 'failed'
+                file.message = error.message
+            } finally {
+                this.toastInstance.clear()
             }
         },
+        
         // 超出文件大小
-        onOversize (file) {
-            console.log('超出大小', file);
+        onOversize () {
+            let desc = this.isFs ? `文件超过${FileSize}MB` : `图片超过${PicSize}MB`
+            this.$toast(desc)
         },
+
         // 预览文件
-        handleReviewFiles(file, p2, p3) {
+        handleReviewFiles(file) {
             // TODO: 如果是图片直接预览。 非图片其他方式预览（下载、或者插件）
-            console.log('func', file, p2, p3);
-            console.log('ref', this.$refs.uploadFileRef);
-            this.$refs.uploadFileRef.onPreviewImage()
+            // NOTE: 可进行图片预览类型
+            if (['png', 'jpg', 'jpeg'].includes(file.type)) {
+                ImagePreview([file.url])
+            } else {
+                this.$toast(file.type + '预览开发中...')
+            }
         },
         handleRemoveFile (file, index) {
-            // console.log('f>>>>', file, index);
             this.filelist.splice(index, 1)
         }
+    },
+    watch: {
+        // NOTE: 判断是否有新添加。 新添加赋值
+        filelist: {
+            handler(arrs) {
+                let hasAdd = arrs.some(image => (image.content))
+                if (hasAdd) {
+                    this.$listeners['input'] && this.$emit('input', arrs)   
+                }
+            }
+        },
+        value: {
+            handler (arrs) {
+                if (Array.isArray(arrs) && arrs.length) {
+                    this.filelist = [
+                        ...arrs
+                    ]
+                }
+            },
+            immediate: true
+        }
     }
 }
 

src/views/applyfor/components/CFlowPath.vue

@@ -32,7 +32,7 @@
                         </div>
                     </div>
                     <div v-if="approveSelList.length < 3" class="empty-box" @click="handleOpenContacts">
-                        <van-icon color="#979797" name="plus" />
+                        <van-icon :size="20" color="#979797" name="plus" />
                     </div>
                 </div>
                 <div class="rows-line"></div>
@@ -68,7 +68,7 @@
                         </div>
                     </div>
                     <div v-if="copySelList.length < 3" class="empty-box" @click="handleOpenContactsCopy">
-                        <van-icon color="#979797" name="plus" />
+                        <van-icon :size="20" color="#979797" name="plus" />
                     </div>
                 </div>
             </div>
@@ -130,17 +130,17 @@
             }
 
             .empty-box {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
                 width: 31px;
                 height: 31px;
-                text-align: center;
-                line-height: 31px;
                 background: #FFFFFF;
                 border-radius: 5px;
                 border: 1px solid #EEEEEF;
             }
-            .right {
-
-            }
+            // .right {}
             &:last-child {
                 .rows-line {
                     width: 0;

src/views/applyfor/components/CSelect.vue

@@ -9,8 +9,8 @@
                 <div v-else class="default">请选择</div>
             </div>
             <div class="right">
-                <van-icon v-if="selectVal" color="#A2A3A4" name="clear" @click="handleRemoveVal"/>
-                <van-icon color="#A2A3A4" name="arrow"  @click="() => show = !show" />
+                <van-icon v-if="selectVal" :size="20" color="#A2A3A4" name="clear" @click="handleRemoveVal"/>
+                <van-icon color="#A2A3A4" :size="20" name="arrow"  @click="() => show = !show" />
             </div>
         </div>
 

src/views/applyfor/components/IndexType5.vue

@@ -26,9 +26,13 @@
             v-model="end_time"
         />
 
-        <c-files />
+        <c-files
+            v-model="document"
+        />
 
-        <c-files ctype="images" />
+        <c-files ctype="images"
+            v-model="images"
+        />
 
         <c-select 
             title="类型"
@@ -167,6 +171,8 @@ export default {
             this.remark = remark
             this.is_who = is_who
         },
+
+        // NOTE: 设置标题等
         navigationSetting () {
             settingNavigationTitle({
                 title: '出差申请'
@@ -268,6 +274,19 @@ export default {
                 approve_user: this.approvePeople.map(user => (user.userid || user.emplId)).join(','),
                 copy_user: this.copyPeople.map(user => (user.userid || user.emplId)).join(',')
             }
+
+            let images = this.images
+            if (Array.isArray(images) && images.length) {
+                console.log('%c add images? >>>', 'background: blue; color: #fff', images);
+                params.images = images.map(image => image.url).join(',')
+                
+            }
+
+            let documents = this.document
+            if (Array.isArray(documents) && documents.length) {
+                params.document = documents.map(document => document.url).join(',')
+            }
+
             if (this.id) params.id = this.id
             return params
         },