askbot-dragon 1.2.9 → 1.3.11

package/src/components/fielListView.vue

@@ -1,345 +1,345 @@
-<template>
-    <div id="attachment-upload">
-        <div v-if="attachmentList.length != 0" class="image-list">
-            <template>
-                <div v-for="(item, index) in attachmentList" class="attch-item" :key="index"
-                   >
-                    <span @click.stop="deleteAttch(index)"><i class="iconfont guoran-a-16-09"></i></span>
-                    <div class="attch-item-left" @click="lookAttach(item.url)">
-                        <i v-if="item.url == ''" class="el-icon-loading" style="color:#366AFF;margin: 5px;"></i>
-                        <img src="../assets/image/video.png"
-                            v-else-if="setSrc(item) == 'video'"/>
-                        <img src="../assets/image/img.png"
-                            v-else-if="setSrc(item) == 'image'" />
-                        <img src="../assets/image/txt.png"
-                            v-else-if="setSrc(item) == 'txt'" />
-                        <img src="../assets/image/doc.png"
-                            v-else-if="setSrc(item) == 'word'" />
-                        <img src="../assets/image/pdf.png"
-                            v-else-if="setSrc(item) == 'pdf'" />
-                        <img src="../assets/image/ppt.png"
-                            v-else-if="setSrc(item) == 'ppt'" />
-                        <img src="../assets/image/xls.png"
-                            v-else-if="setSrc(item) == 'excel'" />
-                        <img src="../assets/image/weizhi.png"
-                             v-else />
-                        <div class="fileName" v-if="item">
-                            <template v-if="typeof item === 'string'">
-                                <template v-if="item.indexOf('[') !== -1">
-                                    {{ JSON.parse(item)[index] }}
-                                </template>
-                            </template>
-                            <template v-else>
-                              {{ item.name ? item.name : (item.url ? item.url : '') }}
-                            </template>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </div>
-        <!-- <el-dialog :visible.sync="dialogVisible" width="800px"  :close-on-click-modal="false"
-            custom-class="look-dialog">
-            <template v-if="fieldType === 'VIDEO'">
-                <video :src="dialogUrl" controls></video>
-            </template>
-            <template v-else-if="fieldType === 'IMAGE'">
-                <img :src="dialogUrl" />
-            </template>
-            <div v-else-if="fieldType === 'txt' || fieldType === 'doc'" style="height: 60vh">
-                <embed :src="dialogUrl" width="100%" height="100%" />
-            </div>
-        </el-dialog> -->
-      <van-popup v-model="previewShowPopup" position="bottom" :style="{ height: '90%', background:'#FFFFFF'}">
-        <previewDoc ref="previewDoc" :url="previewHref" @close="close" v-if="previewShowPopup"></previewDoc>
-      </van-popup>
-      <el-drawer
-          title="我是标题"
-          :visible.sync="drawer"
-          :with-header="false"
-          size="65%"
-      >
-        <previewDoc ref="previewDoc" :url="previewHref" @close="close" v-if="drawer"></previewDoc>
-      </el-drawer>
-    </div>
-</template>
-
-<script>
-import previewDoc from './previewDoc.vue';
-import { isMobile } from "../assets/js/common";
-export default {
-    name: "customUpload",
-    components: {previewDoc},
-    data () {
-        return {
-            dialogVisible: false,
-            previewHref:"",
-          previewShowPopup:false,
-          drawer:false
-        }
-    },
-    props: ["attachmentList"],
-    methods: {
-        //查看视频
-        openDialog (item) {
-            let url = typeof item == 'object' ? item.url : item
-            this.previewHref = url
-            this.$refs.previewDoc.previewShowPopup = true
-        },
-        deleteAttch (index) {
-            this.$emit('attachDeleteAttch', index)
-        },
-        //根据上传类型设置图标
-        setSrc (item) {
-            let file = "";
-            let fileName = ''
-            if (typeof item === 'object'){
-              fileName = item.name ? item.name : (item.url ? item.url : '')
-            } else {
-              fileName = item
-            }
-            if (!fileName){
-              return file
-            }
-            const fileType = fileName.substring(fileName.lastIndexOf('.'));
-            if (fileType === '.mp4' || fileType === '.MP4' || fileType === '.mov' || fileType === '.MOV' || fileType === 'avi' || fileType === 'flv') {
-                file = 'video'
-            }
-            else if (fileType === '.jpg' || fileType === '.png' || fileType === '.JPG' || fileType === '.PNG' || fileType === '.jpeg' || fileType === '.JPEG' || fileType === 'gif') {
-                file = 'image'
-            }
-            else if (fileType == '.txt') {
-                file = 'txt'
-            }
-            else if (fileType == '.ppt' || fileType == '.pptx') {
-                file = 'ppt'
-            }
-            else if (fileType == '.doc' || fileType == '.docx') {
-                file = 'word'
-            }
-            else if (fileType == '.xls' || fileType == '.xlsx') {
-                file = 'excel'
-            }
-            else if (fileType == '.pdf') {
-                file = 'pdf'
-            }
-            return file
-        },
-        lookAttach(url){
-          if(url !== '') {
-            this.previewHref = url;
-            if (isMobile()){
-              this.previewShowPopup = true
-            } else {
-              this.drawer = true;
-            }
-            // const fileType = url.substring(url.lastIndexOf('.'));
-            // if (fileType === '.jpg' || fileType === '.png' || fileType === '.JPG' || fileType === '.PNG'){
-            //   this.previewHref = url
-            //   this.$refs.previewDoc.previewShowPopup = true
-            // }
-          }
-        },
-      close(){
-          this.previewShowPopup = false;
-          this.drawer = false
-      }
-    }
-};
-</script>
-
-<style scoped lang="less">
-.custom-upload-o {
-    display: flex;
-    align-items: center;
-}
-
-#attachment-upload {
-    .image-list {
-        display: flex;
-        flex-wrap: wrap;
-        padding: 0 8px;
-    }
-
-    .image-item {
-        margin: 0 6px;
-        position: relative;
-
-        .delete {
-            // width: 20px;
-            // height: 22px;
-            position: absolute;
-            top: 0px;
-            right: 0px;
-            // border-radius: 30px;
-            background: #ffffff;
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
-        }
-
-        .guoran-tongyichicun-16-09-shanchu2 {
-            color: #366aff;
-            // position: absolute;
-            // top: 0px;
-            // right: 0px;
-            // cursor: pointer;
-        }
-    }
-
-    .guoran-tongyichicun-16-09-shanchu2 {
-        display: none;
-    }
-
-    .image-item:hover {
-        .delete {
-            width: 18px;
-            height: 20px;
-        }
-
-        .guoran-tongyichicun-16-09-shanchu2 {
-            display: block;
-        }
-    }
-
-    .attch-item {
-        margin: 10px 0 0 0;
-        color: #606266;
-        font-size: 13px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-
-        .guoran-a-16-09 {
-            color: #366aff;
-        }
-
-        .attch-item-left {
-            display: flex;
-            align-items: center;
-            flex: none;
-            width: 97%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          margin-left: 6px;
-            img {
-                margin-right: 4px;
-            }
-        }
-    }
-
-    .video-item {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: #f0f4fc;
-        width: 60px;
-        height: 60px;
-        border-radius: 5px;
-        margin: 0 6px;
-        position: relative;
-        overflow: hidden;
-
-        img {
-            cursor: pointer;
-        }
-
-        .delete {
-            // width: 20px;
-            // height: 22px;
-            position: absolute;
-            top: 0px;
-            right: 0px;
-            // border-radius: 30px;
-            background: #ffffff;
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
-
-        }
-
-        .guoran-tongyichicun-16-09-shanchu2 {
-            color: #366aff;
-            cursor: pointer;
-        }
-    }
-
-    .video-item:hover {
-        .delete {
-            width: 20px;
-            height: 22px;
-        }
-
-        .guoran-tongyichicun-16-09-shanchu2 {
-            display: block;
-        }
-    }
-
-    /deep/.attachment-upload {
-        .el-upload {
-            width: 100%;
-        }
-
-        .el-upload-dragger {
-            width: 100%;
-        }
-    }
-
-    .fileName {
-        max-width: 80%;
-        flex: none;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    /deep/ .el-upload--picture-card {
-        width: 60px;
-        height: 60px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex: none;
-    }
-
-    /deep/.el-upload-dragger {
-        height: 60px;
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-
-        .el-icon-upload {
-            margin: 5px 10px 8px;
-            line-height: 30px;
-            font-size: 25px;
-        }
-
-        .el-upload__text {
-            display: flex;
-            // flex-direction: column;
-            flex-wrap: wrap;
-            flex: 1;
-        }
-    }
-
-    .el-upload-dragger>div {
-        display: flex;
-        align-items: center;
-    }
-}
-
-.look-dialog {
-    video {
-        height: 500px;
-        object-fit: contain;
-        width: 100%;
-    }
-
-    img {
-        height: 500px;
-        width: 100%;
-        object-fit: contain;
-    }
-}
+<template>
+    <div id="attachment-upload">
+        <div v-if="attachmentList.length != 0" class="image-list">
+            <template>
+                <div v-for="(item, index) in attachmentList" class="attch-item" :key="index"
+                   >
+                    <span @click.stop="deleteAttch(index)"><i class="iconfont guoran-a-16-09"></i></span>
+                    <div class="attch-item-left" @click="lookAttach(item.url)">
+                        <i v-if="item.url == ''" class="el-icon-loading" style="color:#366AFF;margin: 5px;"></i>
+                        <img src="../assets/image/video.png"
+                            v-else-if="setSrc(item) == 'video'"/>
+                        <img src="../assets/image/img.png"
+                            v-else-if="setSrc(item) == 'image'" />
+                        <img src="../assets/image/txt.png"
+                            v-else-if="setSrc(item) == 'txt'" />
+                        <img src="../assets/image/doc.png"
+                            v-else-if="setSrc(item) == 'word'" />
+                        <img src="../assets/image/pdf.png"
+                            v-else-if="setSrc(item) == 'pdf'" />
+                        <img src="../assets/image/ppt.png"
+                            v-else-if="setSrc(item) == 'ppt'" />
+                        <img src="../assets/image/xls.png"
+                            v-else-if="setSrc(item) == 'excel'" />
+                        <img src="../assets/image/weizhi.png"
+                             v-else />
+                        <div class="fileName" v-if="item">
+                            <template v-if="typeof item === 'string'">
+                                <template v-if="item.indexOf('[') !== -1">
+                                    {{ JSON.parse(item)[index] }}
+                                </template>
+                            </template>
+                            <template v-else>
+                              {{ item.name ? item.name : (item.url ? item.url : '') }}
+                            </template>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </div>
+        <!-- <el-dialog :visible.sync="dialogVisible" width="800px"  :close-on-click-modal="false"
+            custom-class="look-dialog">
+            <template v-if="fieldType === 'VIDEO'">
+                <video :src="dialogUrl" controls></video>
+            </template>
+            <template v-else-if="fieldType === 'IMAGE'">
+                <img :src="dialogUrl" />
+            </template>
+            <div v-else-if="fieldType === 'txt' || fieldType === 'doc'" style="height: 60vh">
+                <embed :src="dialogUrl" width="100%" height="100%" />
+            </div>
+        </el-dialog> -->
+      <van-popup v-model="previewShowPopup" position="bottom" :style="{ height: '90%', background:'#FFFFFF'}">
+        <previewDoc ref="previewDoc" :url="previewHref" @close="close"></previewDoc>
+      </van-popup>
+      <el-drawer
+          title="我是标题"
+          :visible.sync="drawer"
+          :with-header="false"
+          size="65%"
+      >
+        <previewDoc ref="previewDoc" :url="previewHref" @close="close"></previewDoc>
+      </el-drawer>
+    </div>
+</template>
+
+<script>
+import previewDoc from './previewDoc.vue';
+import { isMobile } from "../assets/js/common";
+export default {
+    name: "customUpload",
+    components: {previewDoc},
+    data () {
+        return {
+            dialogVisible: false,
+            previewHref:"",
+          previewShowPopup:false,
+          drawer:false
+        }
+    },
+    props: ["attachmentList"],
+    methods: {
+        //查看视频
+        openDialog (item) {
+            let url = typeof item == 'object' ? item.url : item
+            this.previewHref = url
+            this.$refs.previewDoc.previewShowPopup = true
+        },
+        deleteAttch (index) {
+            this.$emit('attachDeleteAttch', index)
+        },
+        //根据上传类型设置图标
+        setSrc (item) {
+            let file = "";
+            let fileName = ''
+            if (typeof item === 'object'){
+              fileName = item.name ? item.name : (item.url ? item.url : '')
+            } else {
+              fileName = item
+            }
+            if (!fileName){
+              return file
+            }
+            const fileType = fileName.substring(fileName.lastIndexOf('.'));
+            if (fileType === '.mp4' || fileType === '.MP4' || fileType === '.mov' || fileType === '.MOV' || fileType === 'avi' || fileType === 'flv') {
+                file = 'video'
+            }
+            else if (fileType === '.jpg' || fileType === '.png' || fileType === '.JPG' || fileType === '.PNG' || fileType === '.jpeg' || fileType === '.JPEG' || fileType === 'gif') {
+                file = 'image'
+            }
+            else if (fileType == '.txt') {
+                file = 'txt'
+            }
+            else if (fileType == '.ppt' || fileType == '.pptx') {
+                file = 'ppt'
+            }
+            else if (fileType == '.doc' || fileType == '.docx') {
+                file = 'word'
+            }
+            else if (fileType == '.xls' || fileType == '.xlsx') {
+                file = 'excel'
+            }
+            else if (fileType == '.pdf') {
+                file = 'pdf'
+            }
+            return file
+        },
+        lookAttach(url){
+          if(url !== '') {
+            this.previewHref = url;
+            if (isMobile()){
+              this.previewShowPopup = true
+            } else {
+              this.drawer = true;
+            }
+            // const fileType = url.substring(url.lastIndexOf('.'));
+            // if (fileType === '.jpg' || fileType === '.png' || fileType === '.JPG' || fileType === '.PNG'){
+            //   this.previewHref = url
+            //   this.$refs.previewDoc.previewShowPopup = true
+            // }
+          }
+        },
+      close(){
+          this.previewShowPopup = false;
+          this.drawer = false
+      }
+    }
+};
+</script>
+
+<style scoped lang="less">
+.custom-upload-o {
+    display: flex;
+    align-items: center;
+}
+
+#attachment-upload {
+    .image-list {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 0 8px;
+    }
+
+    .image-item {
+        margin: 0 6px;
+        position: relative;
+
+        .delete {
+            // width: 20px;
+            // height: 22px;
+            position: absolute;
+            top: 0px;
+            right: 0px;
+            // border-radius: 30px;
+            background: #ffffff;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+        }
+
+        .guoran-tongyichicun-16-09-shanchu2 {
+            color: #366aff;
+            // position: absolute;
+            // top: 0px;
+            // right: 0px;
+            // cursor: pointer;
+        }
+    }
+
+    .guoran-tongyichicun-16-09-shanchu2 {
+        display: none;
+    }
+
+    .image-item:hover {
+        .delete {
+            width: 18px;
+            height: 20px;
+        }
+
+        .guoran-tongyichicun-16-09-shanchu2 {
+            display: block;
+        }
+    }
+
+    .attch-item {
+        margin: 10px 0 0 0;
+        color: #606266;
+        font-size: 13px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+
+        .guoran-a-16-09 {
+            color: #366aff;
+        }
+
+        .attch-item-left {
+            display: flex;
+            align-items: center;
+            flex: none;
+            width: 97%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          margin-left: 6px;
+            img {
+                margin-right: 4px;
+            }
+        }
+    }
+
+    .video-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #f0f4fc;
+        width: 60px;
+        height: 60px;
+        border-radius: 5px;
+        margin: 0 6px;
+        position: relative;
+        overflow: hidden;
+
+        img {
+            cursor: pointer;
+        }
+
+        .delete {
+            // width: 20px;
+            // height: 22px;
+            position: absolute;
+            top: 0px;
+            right: 0px;
+            // border-radius: 30px;
+            background: #ffffff;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+
+        }
+
+        .guoran-tongyichicun-16-09-shanchu2 {
+            color: #366aff;
+            cursor: pointer;
+        }
+    }
+
+    .video-item:hover {
+        .delete {
+            width: 20px;
+            height: 22px;
+        }
+
+        .guoran-tongyichicun-16-09-shanchu2 {
+            display: block;
+        }
+    }
+
+    /deep/.attachment-upload {
+        .el-upload {
+            width: 100%;
+        }
+
+        .el-upload-dragger {
+            width: 100%;
+        }
+    }
+
+    .fileName {
+        max-width: 80%;
+        flex: none;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    /deep/ .el-upload--picture-card {
+        width: 60px;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: none;
+    }
+
+    /deep/.el-upload-dragger {
+        height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+
+        .el-icon-upload {
+            margin: 5px 10px 8px;
+            line-height: 30px;
+            font-size: 25px;
+        }
+
+        .el-upload__text {
+            display: flex;
+            // flex-direction: column;
+            flex-wrap: wrap;
+            flex: 1;
+        }
+    }
+
+    .el-upload-dragger>div {
+        display: flex;
+        align-items: center;
+    }
+}
+
+.look-dialog {
+    video {
+        height: 500px;
+        object-fit: contain;
+        width: 100%;
+    }
+
+    img {
+        height: 500px;
+        width: 100%;
+        object-fit: contain;
+    }
+}
 </style>