centaline-data-driven 1.2.95 → 1.2.98

package/src/centaline/dynamicFile/src/dynamicFile.vue

@@ -1,380 +1,468 @@
 <template>
-  <div style="width:100%" v-if="model !== null" class="block ct-file" :class="[model.attrs.size?'ct-checkbox-'+model.attrs.size:'']">
-    <el-upload :class="disableUpload?'ct-upload-display-none':''"
-               :disabled="model.lock"
-               :accept="model.fileAccept"
-               :on-change="handleChange"
-               list-type="picture-card"
-               :file-list="model.fileList"
-               :multiple="true"
-               :auto-upload="true"
-               :action="model.action"
-               :data="model.uploadData"
-               :headers="headers"
-               :before-upload="beforeUploadProcess"
-               :on-success="handleAvatarSuccess"
-               :on-error="handleAvatarError"
-               :on-progress="uploadProcess"
-               :limit="parseInt(model.max||999)"
-               :on-exceed="handleExceed">
+  <div
+    style="width: 100%"
+    v-if="model !== null"
+    class="block ct-file"
+    :class="[model.attrs.size ? 'ct-checkbox-' + model.attrs.size : '']"
+  >
+    <el-upload
+      :class="disableUpload ? 'ct-upload-display-none' : ''"
+      :disabled="model.lock"
+      :accept="model.fileAccept"
+      :on-change="handleChange"
+      list-type="picture-card"
+      :file-list="model.fileList"
+      :multiple="true"
+      :auto-upload="true"
+      :action="model.action"
+      :data="model.uploadData"
+      :headers="headers"
+      :before-upload="beforeUploadProcess"
+      :on-success="handleAvatarSuccess"
+      :on-error="handleAvatarError"
+      :on-progress="uploadProcess"
+      :limit="parseInt(model.max || 999)"
+      :on-exceed="handleExceed"
+    >
       <i slot="default" class="el-icon-plus"></i>
       <!--<i slot="default" class="el-icon-plus" style="position: relative;"><div @click="testss($event)" class="max-ewmsc"></div></i>-->
 
-      <div slot="tip" class="el-upload__tip errorMessage" v-show="!valid">{{validMessage}}</div>
-      <div slot="file" slot-scope="{file}" :title="file.fileName">
+      <div slot="tip" class="el-upload__tip errorMessage" v-show="!valid">
+        {{ validMessage }}
+      </div>
+      <div slot="file" slot-scope="{ file }" :title="file.fileName">
         <div class="cover-list-item">
-          <el-image fit="fill" :src="file.url"
-                    style="width: 100px; height: 100px"
-                    :preview-src-list="getPreviewSrcList(file)"
-                    :z-index="previewZIndex"
-                    @click="handlePictureCardPreview(file)">
+          <el-image
+            fit="fill"
+            :src="file.url"
+            style="width: 100px; height: 100px"
+            :z-index="previewZIndex"
+            @click="viewerfile(file)"
+          >
           </el-image>
-          <span class="cover-list-item-span-delete" v-if="!model.lock && file.rightDel">
+          <span
+            class="cover-list-item-span-delete"
+            v-if="!model.lock && file.rightDel"
+          >
             <i class="el-icon-delete" @click="handleRemove(file)"></i>
           </span>
-          <span class="cover-list-item-span" v-if="model.lock||model.paramName">
+          <span
+            class="cover-list-item-span"
+            v-if="model.lock || model.paramName"
+          >
             <!--锁定-->
             <span v-if="model.lock || !file.rightEdit" class="el-dropdown-link">
-              <span style="width:80px;height:26px;display: inline-flex">&nbsp;{{file.mediaLabelName}}</span>
+              <span style="width: 80px; height: 26px; display: inline-flex"
+                >&nbsp;{{ file.mediaLabelName }}</span
+              >
             </span>
             <!--复杂分类-->
-            <span v-else-if="model.isComplexClassify" class="el-dropdown-link" @click="classifyFormClickHandle(file)">
-              <span style="width:80px;height:26px;display: inline-flex">&nbsp;{{file.mediaLabelName}}</span><i class="el-icon-arrow-down el-icon--right"></i>
+            <span
+              v-else-if="model.isComplexClassify"
+              class="el-dropdown-link"
+              @click="classifyFormClickHandle(file)"
+            >
+              <span style="width: 80px; height: 26px; display: inline-flex"
+                >&nbsp;{{ file.mediaLabelName }}</span
+              ><i class="el-icon-arrow-down el-icon--right"></i>
             </span>
             <!--简单分类-->
-            <el-dropdown v-else class="el-upload-list__item-preview" trigger="click" placement="top" @command="classifySelectedClickHandle">
+            <el-dropdown
+              v-else
+              class="el-upload-list__item-preview"
+              trigger="click"
+              placement="top"
+              @command="classifySelectedClickHandle"
+            >
               <span class="el-dropdown-link" @click="classifyClickHandle">
-                <span style="width:80px;height:26px;display: inline-flex">&nbsp;{{file.mediaLabelName}}</span><i class="el-icon-arrow-down el-icon--right"></i>
+                <span style="width: 80px; height: 26px; display: inline-flex"
+                  >&nbsp;{{ file.mediaLabelName }}</span
+                ><i class="el-icon-arrow-down el-icon--right"></i>
               </span>
-              <el-dropdown-menu slot="dropdown" class="el-upload-list__item-preview">
-                <el-dropdown-item v-for="(option, index) in model.optionModel.options" :key="index" :command="{option:option,file:file}">
-                  {{option[model.optionModel.optionAttrs.label]}}
+              <el-dropdown-menu
+                slot="dropdown"
+                class="el-upload-list__item-preview"
+              >
+                <el-dropdown-item
+                  v-for="(option, index) in model.optionModel.options"
+                  :key="index"
+                  :command="{ option: option, file: file }"
+                >
+                  {{ option[model.optionModel.optionAttrs.label] }}
                 </el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </span>
         </div>
-        <el-progress type="circle" v-if="file.progressFlag" :percentage="file.loadProgress"></el-progress>
+        <el-progress
+          type="circle"
+          v-if="file.progressFlag"
+          :percentage="file.loadProgress"
+        ></el-progress>
       </div>
     </el-upload>
   </div>
 </template>
 <script>
-  import dynamicElement from '../../mixins/dynamicElement';
-  export default {
-    name: 'ct-file',
-    mixins: [dynamicElement],
-    props: {
-      vmodel: Object,
-      api: String
+import dynamicElement from "../../mixins/dynamicElement";
+export default {
+  name: "ct-file",
+  mixins: [dynamicElement],
+  props: {
+    vmodel: Object,
+    api: String,
+  },
+  data() {
+    return {
+      disableUpload: false,
+    };
+  },
+  computed: {
+    headers: function () {
+      return this.$common.getDataDrivenOpts().handler.getRequestHeaders();
     },
-    data() {
-      return {
-        disableUpload:false,
-      };
+    previewZIndex: function () {
+      return this.$common.getDataDrivenOpts().zindex + 100;
     },
-    computed: {
-      headers: function () {
-        return this.$common.getDataDrivenOpts().handler.getRequestHeaders();
-      },
-      previewZIndex: function () {
-        return this.$common.getDataDrivenOpts().zindex + 100;
+  },
+  created() {
+    var self = this;
+    this.$nextTick(function () {
+      if (self.vmodel) {
+        self.load(self.vmodel);
+        self.$emit("loaded");
+      } else if (typeof self.source !== "undefined") {
+        self.loaderObj.File(self.source, (data) => {
+          self.load(data);
+        });
       }
+      this.disableUpload = this.model.lock;
+    });
+  },
+  methods: {
+    load(data) {
+      this.model = data;
     },
-    created() {
-      var self = this;
-      this.$nextTick(function () {
-
-        if (self.vmodel) {
-          self.load(self.vmodel);
-          self.$emit('loaded');
-        }
-        else if (typeof self.source !== 'undefined') {
-          self.loaderObj.File(self.source, (data) => {
-            self.load(data);
-          });
-        }
-        this.disableUpload=this.model.lock;
-      });
+    handleExceed() {
+      this.validMessage = "附件数量最多" + this.model.max + "张";
+      this.valid = false;
     },
-    methods: {
-      load(data) {
-        this.model = data;
-      },
-      handleExceed()
-      {
-         this.validMessage = "附件数量最多" + this.model.max+ "张";
-         this.valid = false;
-      },
-      //删除
-      handleRemove(file) {
-        this.$common.confirm("确定删除该附件？", "提示", {
+    //删除
+    handleRemove(file) {
+      this.$common
+        .confirm("确定删除该附件？", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           //type: 'warning'
-        }).then(() => {
+        })
+        .then(() => {
           this.model.deleteFile(file, false);
-          this.selfValidExcute('remove');
-        }).catch(() => {
-        });
-      },
-      handlePictureCardPreview(file) {
-        if (this.$common.isAssetTypeAnImage(this.getSuffix(file))) {
-          // this.$openPreview([file.mediaUrl]);
-        }
-        else {
-          if (file.rightDownload) {
-            window.open(file.mediaUrl, "_blank");
-          }
-          return [];
+          this.selfValidExcute("remove");
+        })
+        .catch(() => {});
+    },
+    handlePictureCardPreview(file) {
+      if (this.$common.isAssetTypeAnImage(this.getSuffix(file))) {
+        // this.$openPreview([file.mediaUrl]);
+      } else {
+        if (file.rightDownload) {
+          window.open(file.mediaUrl, "_blank");
         }
-      },
-      getPreviewSrcList(file) {
-        if (this.$common.isAssetTypeAnImage(this.getSuffix(file))) {
-          let arr = this.model.fileList.filter(at => this.$common.isAssetTypeAnImage(this.getSuffix(at))).map(attach => {
+        return [];
+      }
+    },
+    viewerfile(file) { 
+      var self = this;
+      var MediaAlbum = [{ albumName: "媒体", medias: [] }];
+     
+      let fileList = this.model.sourceList.filter((item) => {
+        return item.flagDeleted !== true;
+      });
+      fileList.forEach((v) => {
+        MediaAlbum[0].medias.push(v);
+      });
+       var index = MediaAlbum[0].medias.findIndex(
+        (v) => v.mediaID === file.source.mediaID
+      );
+      var dialogOption = {
+        title: "预览媒体",
+        pane: self.$common.getParentPane(self),
+        content: [
+          {
+            component: "ct-viewerfile",
+            attrs: {
+              showTitle: false,
+              MediaAlbum: MediaAlbum,
+              groupIndex: 0,
+              index: index,
+              // width: self.modelPhotoselect.router.pageWidth + 'px',
+              // height: self.modelPhotoselect.router.pageHeight+'px',
+              width:
+                parseInt(window.document.body.clientWidth * 0.8).toString() +
+                "px",
+              height:
+                parseInt(window.document.body.clientHeight * 0.8).toString() +
+                "px",
+            },
+            on: {
+              handlePhoto(photoList) {},
+            },
+          },
+        ],
+      };
+      self.$common.openDialog(dialogOption);
+    },
+    getPreviewSrcList(file) {
+      if (this.$common.isAssetTypeAnImage(this.getSuffix(file))) {
+        let arr = this.model.fileList
+          .filter((at) => this.$common.isAssetTypeAnImage(this.getSuffix(at)))
+          .map((attach) => {
             return attach.mediaUrl;
-          })
+          });
 
-          //让看起来有序
-          let nowIndex = arr.findIndex(photo => photo === file.mediaUrl)
-          if (nowIndex > -1) {
-            let start = arr.slice(0, nowIndex)
-            let end = arr.slice(nowIndex)
-            arr = [...end, ...start]
-          }
-          return arr;
-        }
-        else {
-          return [];
+        //让看起来有序
+        let nowIndex = arr.findIndex((photo) => photo === file.mediaUrl);
+        if (nowIndex > -1) {
+          let start = arr.slice(0, nowIndex);
+          let end = arr.slice(nowIndex);
+          arr = [...end, ...start];
         }
-      },
-      getSuffix(file) {
-        if (file.fileExtension) {
-          return file.fileExtension;
-        }
-        if (file.name) {
-          let nameArr = file.name.split('.');
-          return nameArr[nameArr.length - 1];
+        return arr;
+      } else {
+        return [];
+      }
+    },
+    getSuffix(file) {
+      if (file.fileExtension) {
+        return file.fileExtension;
+      }
+      if (file.name) {
+        let nameArr = file.name.split(".");
+        return nameArr[nameArr.length - 1];
+      }
+      return "";
+    },
+    handleDownload(file) {
+      console.log(file);
+    },
+    handleChange(file, fileList) {
+      this.changeHandler(this.model.value);
+    },
+    //上传之前的钩子
+    beforeUploadProcess(files) {
+      let that = this;
+
+      // if (this.model.max) {
+      //    console.log('beforeUploadProcess')
+      //   console.log(this.model.fileList)
+      //   if (this.model.getfileListLength() >= this.model.max) {
+      //     this.validMessage = "附件最多" + this.model.max + "个";
+      //     this.valid = false;
+      //     setTimeout(() => {
+      //       that.valid = true;
+      //      }, 3000)
+      //     return false;
+      //   }
+      // }
+      return true;
+    },
+    //文件上传时的钩子
+    uploadProcess(event, file, fileList) {
+      file.progressFlag = true; // 显示进度条
+      file.loadProgress = parseInt(event.percent); // 动态获取文件上传进度
+      if (file.loadProgress >= 100) {
+        file.loadProgress = 100;
+        setTimeout(() => {
+          file.progressFlag = false;
+        }, 1000); // 一秒后关闭进度条
+      }
+    },
+    //上传完成钩子
+    handleAvatarSuccess(res, file, fileList) {
+      this.model.handleAvatarSuccess(res, file, fileList);
+    },
+    handleAvatarError(res, file, fileList) {
+      if (res.status === 404) {
+        let m = JSON.parse(res.message);
+        if (m.error) {
+          this.$message.warning("path(" + m.path + ") " + m.error);
         }
-        return '';
-      },
-      handleDownload(file) {
-        console.log(file);
-      },
-      handleChange(file, fileList) {
-        this.changeHandler(this.model.value);
-      },
-      //上传之前的钩子
-      beforeUploadProcess(files) {
-        let that=this;
-      
-        // if (this.model.max) {
-        //    console.log('beforeUploadProcess') 
-        //   console.log(this.model.fileList) 
-        //   if (this.model.getfileListLength() >= this.model.max) {
-        //     this.validMessage = "附件最多" + this.model.max + "个";
-        //     this.valid = false;
-        //     setTimeout(() => {
-        //       that.valid = true;
-        //      }, 3000) 
-        //     return false;
-        //   }
-        // }
-        return true;
-      },
-      //文件上传时的钩子
-      uploadProcess(event, file, fileList) {
-        file.progressFlag = true; // 显示进度条
-        file.loadProgress = parseInt(event.percent); // 动态获取文件上传进度
-        if (file.loadProgress >= 100) {
-          file.loadProgress = 100
-          setTimeout(() => {
-            file.progressFlag = false
-          }, 1000) // 一秒后关闭进度条
+      }
+    },
+    //不能共用的数据校验
+    selfValidExcute: function (eventName) {
+      if (this.model.required) {
+        if (this.model.getfileListLength() === 0) {
+          this.validMessage = "必须上传附件";
+          this.valid = false;
+          return false;
         }
-      },
-      //上传完成钩子
-      handleAvatarSuccess(res, file, fileList) {
-        this.model.handleAvatarSuccess(res, file, fileList);
-      },
-      handleAvatarError(res, file, fileList) {
-        if(res.status===404){
-          let m=JSON.parse(res.message);
-          if(m.error){
-            this.$message.warning('path('+m.path+') '+m.error);
-          }
+      }
+
+      if (this.model.max) {
+        if (this.model.getfileListLength() >= this.model.max) {
+          this.disableUpload = true;
+        } else {
+          this.disableUpload = false;
         }
-      },
-      //不能共用的数据校验
-      selfValidExcute: function (eventName) {
-        if (this.model.required) {
-          if (this.model.getfileListLength() === 0) {
-            this.validMessage = "必须上传附件";
+      }
+      if (this.model.min) {
+        if (this.model.getfileListLength() < this.model.min) {
+          //change时需要判断有没有上传图片如果没有图片则不提示
+          if (eventName == "change" && this.model.getfileListLength() > 0) {
+            this.validMessage =
+              "附件数量还差" +
+              (parseInt(this.model.min) - this.model.getfileListLength()) +
+              "张";
             this.valid = false;
-            return false;
-          }
-        }
-
-        if (this.model.max) {
-          if(this.model.getfileListLength() >= this.model.max){
-            this.disableUpload=true;
-          }
-          else{
-            this.disableUpload=false;
+          } else if (eventName == "valid") {
+            this.validMessage =
+              "附件数量还差" +
+              (parseInt(this.model.min) - this.model.getfileListLength()) +
+              "张";
+            this.valid = false;
+          } else if (eventName == "remove") {
+            this.valid = true;
           }
+          return false;
         }
-        if (this.model.min) {
-          if (this.model.getfileListLength() < this.model.min) {
-            //change时需要判断有没有上传图片如果没有图片则不提示
-            if(eventName=='change' && this.model.getfileListLength()>0){
-               this.validMessage = "附件数量还差" + (parseInt(this.model.min)-this.model.getfileListLength()) + "张";
-               this.valid = false;
-            }
-            else if(eventName=='valid'){
-               this.validMessage = "附件数量还差" + (parseInt(this.model.min)-this.model.getfileListLength()) + "张";
-               this.valid = false;
-            }
-            else if(eventName=='remove'){
-              this.valid = true;
-            }          
+      }
+      if (eventName == "valid" && !this.validFileClass()) {
+        this.validMessage = "请选择附件分类";
+        this.valid = false;
+        return false;
+      }
+      this.valid = true;
+      return this.valid;
+    },
+    //验证附件分类是否必填
+    validFileClass() {
+      if (this.model.paramName) {
+        if (this.model.sourceList && this.model.sourceList.length > 0) {
+          let notClass = this.model.sourceList.filter((item) => {
+            return (
+              (item.mediaLabelID == undefined || item.mediaLabelID == "") &&
+              item.flagDeleted !== true
+            );
+          });
+          if (notClass.length > 0) {
             return false;
           }
         }
-        if(eventName=='valid'&&!this.validFileClass()){
-          this.validMessage="请选择附件分类";
-          this.valid = false;
-          return false;
-        }
+      }
+      return true;
+    },
+    classifyClickHandle: function () {
+      var self = this;
+      this.model.getOptions(() => {
+        self.$forceUpdate();
+      });
+    },
+    classifySelectedClickHandle: function (classify) {
+      classify.file.mediaLabelName =
+        classify.option[this.model.optionModel.optionAttrs.label];
+      classify.file.mediaLabelID =
+        classify.option[this.model.optionModel.optionAttrs.value];
+      this.model.setClassify(classify);
+      if (!this.validFileClass()) {
+        this.validMessage = "请选择附件分类";
+        this.valid = false;
+      } else {
         this.valid = true;
-        return this.valid;
-      },
-      //验证附件分类是否必填
-      validFileClass(){
-        if(this.model.paramName){
-          if(this.model.sourceList&&this.model.sourceList.length>0){
-            let notClass= this.model.sourceList.filter(item=>{
-              return (item.mediaLabelID==undefined||item.mediaLabelID=="") && item.flagDeleted !== true;
-            })
-            if(notClass.length>0){
-              return false
-            }
-          }
-        }
-        return true;
-      },
-      classifyClickHandle: function () {
-        var self = this;
-        this.model.getOptions(() => {
-          self.$forceUpdate();
-        });
-      },
-      classifySelectedClickHandle: function (classify) {
-        classify.file.mediaLabelName = classify.option[this.model.optionModel.optionAttrs.label];
-        classify.file.mediaLabelID = classify.option[this.model.optionModel.optionAttrs.value];
-        this.model.setClassify(classify);
-        if(!this.validFileClass())
-        {
-          this.validMessage="请选择附件分类";
-          this.valid = false;
-        }else
-        {
-           this.valid = true;
-        }
-      },
-      classifyFormClickHandle: function (file) {
-        var self = this;
-        this.model.updateClassify(file, () => {
-          //self.$forceUpdate();
-        });
-         if(!this.validFileClass())
-        {
-          this.validMessage="请选择附件分类";
-          this.valid = false;
-        }else
-        {
-           this.valid = true;
-        }
-      },
-    }
-  }
+      }
+    },
+    classifyFormClickHandle: function (file) {
+      var self = this;
+      this.model.updateClassify(file, () => {
+        //self.$forceUpdate();
+      });
+      if (!this.validFileClass()) {
+        this.validMessage = "请选择附件分类";
+        this.valid = false;
+      } else {
+        this.valid = true;
+      }
+    },
+  },
+};
 </script>
 <style>
-  .ct-upload-display-none .el-upload--picture-card {
-    display: none; 
-     
-  }
-.el-upload-list__item .is-ready{
+.ct-upload-display-none .el-upload--picture-card {
+  display: none;
+}
+.el-upload-list__item .is-ready {
   width: 100px;
-    height: 100px;
-}  .ct-file .cover-list-item {
-    position: sticky;
-  }
+  height: 100px;
+}
+.ct-file .cover-list-item {
+  position: sticky;
+}
 
-  .ct-file .cover-list-item-span {
-    position: inherit;
-    bottom: 0px;
-    left: 0px;
-    display: block;
-    background-color: #544f48;
-    opacity: 0.8;
-  }
-  .ct-file .el-dropdown-link{
-    cursor: pointer;
-    color: #fff;
-    position: relative;
-    width: 100px;
-    height: 26px;
-    display: inline-block;
-  }
-  .el-icon--right {
-      position: absolute;
-      right: 5px;
-      top: 6px;
-  }
-  .ct-file .cover-list-item-span-delete {
-    position: inherit;
-    bottom: 160px;
-    left: 130px;
-    color: #000000;
-    text-align: center;
-  }
-  .cover-list-item-span-delete i {
-    cursor: pointer;
-  }
-    .ct-file .el-dropdown-link {
-    cursor: pointer;
-    color: #fff;
-  }
+.ct-file .cover-list-item-span {
+  position: inherit;
+  bottom: 0px;
+  left: 0px;
+  display: block;
+  background-color: #544f48;
+  opacity: 0.8;
+}
+.ct-file .el-dropdown-link {
+  cursor: pointer;
+  color: #fff;
+  position: relative;
+  width: 100px;
+  height: 26px;
+  display: inline-block;
+}
+.el-icon--right {
+  position: absolute;
+  right: 5px;
+  top: 6px;
+}
+.ct-file .cover-list-item-span-delete {
+  position: inherit;
+  bottom: 160px;
+  left: 130px;
+  color: #000000;
+  text-align: center;
+}
+.cover-list-item-span-delete i {
+  cursor: pointer;
+}
+.ct-file .el-dropdown-link {
+  cursor: pointer;
+  color: #fff;
+}
 
-  .ct-file .el-icon-arrow-down {
-    font-size: 12px;
-  }
-  .el-collapse-item__content{
-    padding-bottom: 18px;
-  }
-  .el-upload--picture-card{
-    width: 100px;
-    height: 100px;
-    line-height:initial;
-    padding: 34px;
-  }
-  .el-upload--picture-card i{
-    font-size: 30px;
-  }
-  .el-upload-list--picture-card .el-upload-list__item{
-    width: 100px;
-    height: 100px;
-  }
-  .el-upload .max-ewmsc {
-    background: url("../../../assets/ewm.png") no-repeat;
-    content: '';
-    display: block;
-    width: 30px;
-    height: 30px;
-    font-size: 30px;
-    background-size: 30px;
-    position: absolute;
-    top: -35px;
-    left: 35px;
-  }
+.ct-file .el-icon-arrow-down {
+  font-size: 12px;
+}
+.el-collapse-item__content {
+  padding-bottom: 18px;
+}
+.el-upload--picture-card {
+  width: 100px;
+  height: 100px;
+  line-height: initial;
+  padding: 34px;
+}
+.el-upload--picture-card i {
+  font-size: 30px;
+}
+.el-upload-list--picture-card .el-upload-list__item {
+  width: 100px;
+  height: 100px;
+}
+.el-upload .max-ewmsc {
+  background: url("../../../assets/ewm.png") no-repeat;
+  content: "";
+  display: block;
+  width: 30px;
+  height: 30px;
+  font-size: 30px;
+  background-size: 30px;
+  position: absolute;
+  top: -35px;
+  left: 35px;
+}
 </style>