centaline-data-driven 1.3.57 → 1.3.60

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

@@ -1,24 +1,22 @@
 <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"
-    >
+    <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>-->
 
@@ -29,6 +27,11 @@
         <div class="cover-list-item">
           <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-Default" v-if="model.rightDefault&&model.rightDefault==1">
+            <i>
+              <el-radio v-model="file.flagDefault" :label="true" @change="handleDefault($event,file)" :disabled="model.lock" title="设为封面">&nbsp;</el-radio>
+            </i>
+          </span>
           <span class="cover-list-item-span-delete" v-if="!model.lock && file.rightDel">
             <i class="el-icon-delete" @click="handleRemove(file)"></i>
           </span>
@@ -43,7 +46,7 @@
               <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>
@@ -56,366 +59,403 @@
             </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" :width="96" :height="96" class="file-cirle"></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,
-  },
-  data() {
-    return {
-      disableUpload: false,
-    };
-  },
-  computed: {
-    headers: function () {
-      return this.$common.getDataDrivenOpts().handler.getRequestHeaders();
+  import dynamicElement from "../../mixins/dynamicElement";
+  export default {
+    name: "ct-file",
+    mixins: [dynamicElement],
+    props: {
+      vmodel: Object,
+      api: String,
     },
-    previewZIndex: function () {
-      return this.$common.getDataDrivenOpts().zindex + 100;
+    data() {
+      return {
+        disableUpload: false,
+      };
     },
-  },
-  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;
-	    this.classifyClickHandle()
+    computed: {
+      headers: function () {
+        return this.$common.getDataDrivenOpts().handler.getRequestHeaders();
+      },
+      previewZIndex: function () {
+        return this.$common.getDataDrivenOpts().zindex + 100;
+      },
     },
-    handleExceed() {
-      this.validMessage = "附件数量最多" + this.model.max + "张";
-      this.valid = false;
-      this.$message.error(this.validMessage);
+    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;
+      });
     },
-    //删除
-    handleRemove(file) {
-      this.$common.confirm("确定删除该附件？", "提示", {
+    methods: {
+      load(data) {
+        this.model = data;
+        this.classifyClickHandle();
+
+      },
+      handleExceed() {
+        this.validMessage = "附件数量最多" + this.model.max + "张";
+        this.valid = false;
+        this.$message.error(this.validMessage);
+      },
+      //删除
+      handleRemove(file) {
+        this.$common.confirm("确定删除该附件？", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           //type: 'warning'
         }).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");
+        }).catch(() => { });
+      },
+      handlePictureCardPreview(file) {
+        if (this.$common.isAssetTypeAnImage(this.getSuffix(file))) {
+          // this.$openPreview([file.mediaUrl]);
+        } else {
+          if (file.rightDownload) {
+            window.open(file.mediaUrl, "_blank");
+          }
+          return [];
         }
-        return [];
-      }
-    },
-    viewerfile(file) {
-      var self = this;
-      var MediaAlbum = [{ albumName: this.model.label || "媒体", medias: [] }];
+      },
+      viewerfile(file) {
+        var self = this;
+        var MediaAlbum = [{ albumName: this.model.label || "媒体", 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 === file.source)
-      );
-      
-      var width = parseInt(window.document.body.clientWidth * 0.8);
-      var height = parseInt(window.document.body.clientHeight * 0.8);
-      width = width > 1160 ? 1160 : width;
-      var dialogOption = {
-        title: this.model.label || "预览媒体",
-        //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: width + "px",
-              height: height + "px",
-            },
-            on: {
-              handlePhoto(photoList) {},
+        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 === file.source)
+        );
+
+        var width = parseInt(window.document.body.clientWidth * 0.8);
+        var height = parseInt(window.document.body.clientHeight * 0.8);
+        width = width > 1160 ? 1160 : width;
+        var dialogOption = {
+          title: this.model.label || "预览媒体",
+          //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: width + "px",
+                height: height + "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;
-          });
+          ],
+        };
+        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];
+          //让看起来有序
+          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 [];
         }
-        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) {
-    },
-    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);
+      },
+      getSuffix(file) {
+        if (file.fileExtension) {
+          return file.fileExtension;
         }
-      }
-    },
-    //不能共用的数据校验
-    selfValidExcute: function (eventName) {
-      if (this.model.required) {
-        if (this.model.getfileListLength() === 0) {
-          this.validMessage = "必须上传附件";
-          this.valid = false;
-          return false;
+        if (file.name) {
+          let nameArr = file.name.split(".");
+          return nameArr[nameArr.length - 1];
         }
-      }
+        return "";
+      },
+      handleDownload(file) {
+      },
+      handleChange(file, fileList) {
+        this.changeHandler(this.model.value);
+      },
+      //上传之前的钩子
+      beforeUploadProcess(files) {
+        let that = this;
 
-      if (this.model.max) {
-        if (this.model.getfileListLength() >= this.model.max) {
-          this.disableUpload = true;
-        } 
-        else {
-          this.disableUpload = false;
+        // 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); // 一秒后关闭进度条
         }
-      }
-      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()) + "张";
+      },
+      //上传完成钩子
+      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);
+          }
+        }
+      },
+      //不能共用的数据校验
+      selfValidExcute: function (eventName) {
+        if (this.model.required) {
+          if (this.model.getfileListLength() === 0) {
+            this.validMessage = "必须上传附件";
             this.valid = false;
-          } 
-          else if (eventName == "remove") {
-            this.valid = true;
+            return false;
           }
-          return false;
         }
-      }
-      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) {
+
+        if (this.model.max && this.model.max > 0) {
+          if (this.model.getfileListLength() >= this.model.max) {
+            this.disableUpload = true;
+          }
+          else {
+            this.disableUpload = 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;
+            } 
             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 {
+        if (this.model.rightDefault && this.model.rightDefault==1&& eventName == "valid") {
+          if (this.model.getfileDefault()<=0) {
+            this.validMessage = "请设置默认封面";
+            this.valid = false;
+            return false; 
+          }
+        }
+        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;
+            }
+          }
+        }
+        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;
+        }
+      },
+      handleDefault: function (event, file) {
+        this.model.setDefault(file);
+        // this.selfValidExcute("remove");
       }
     },
-  },
-};
+  };
 </script>
 <style>
-.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;
-}
+  .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;
+  }
+
+  .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-Default {
+    position: inherit;
+    bottom: 160px;
+    left: 0px;
+    text-align: center;
+  }
+
+  .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;
+  }
 
-.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;
-}
+  .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;
-}
+  .file-cirle .el-progress-circle {
+    margin-left: 15px;
+  }
 </style>