centaline-data-driven 1.2.18 → 1.2.21

package/src/centaline/dynamicPhotoSelect/src/dynamicPhotoSelect.vue

@@ -1,237 +1,309 @@
 <template>
-  <div style="width:100%" class="ct-photoSelect">
-
+  <div style="width: 100%" class="ct-photoSelect">
     <ul class="el-upload-list el-upload-list--picture-card">
-      <draggable v-model="fileList" v-bind="dragOptions" @end="onEnd" class="card">
-        <li class="el-upload-list__item is-success" v-for="(item, index) in fileList">
+      <draggable
+        v-model="photoList"
+        v-bind="dragOptions"
+        @end="onEnd"
+        class="card"
+        ><li
+          class="el-upload-list__item is-success"
+          v-bind:key="index"
+          v-for="(item, index) in photoList"
+        >
           <div class="cover-list-item">
-            <el-image fit="fill" :src="item.mediaUrl"
-                      style="width: 100px; height: 100px"
-                      :z-index="previewZIndex"
-                      @click="viewerOpen(fileList,index)">
+            <el-image
+              fit="fill"
+              :src="item.thumbnailUrl"
+              style="width: 100px; height: 100px"
+              :z-index="previewZIndex"
+              @click="viewerOpen(photoList, index)"
+            >
             </el-image>
             <span class="cover-list-item-span-delete">
               <i class="el-icon-delete" @click="handleRemove(index)"></i>
             </span>
             <span class="cover-list-item-span" v-if="item.mediaLabelName">
               <span class="el-dropdown-link">
-                &nbsp;{{item.mediaLabelName}}
+                &nbsp;{{ item.mediaLabelName }}
               </span>
             </span>
           </div>
         </li>
       </draggable>
     </ul>
-    <div class="el-upload el-upload--picture-card" v-if="!modelPhotoselect.lock" @click="handleOpen()">
+    <div 
+      class="el-upload el-upload--picture-card"
+      v-if="!modelPhotoselect.lock&&photoList.length<max"
+      @click="handleOpen()"
+    >
       <i class="el-icon-plus"></i>
     </div>
-
+    <div slot="tip" class="el-upload__tip errorMessage" v-show="!valid">
+      {{ validMessage }}
+    </div>
     <ct-viewer ref="photoSelectViewer" />
   </div>
-
 </template>
 
 <script>
-  import draggable from 'vuedraggable';
-  import dynamicElement from '../../mixins/dynamicElement';
-  import Enum from '../../loader/src/ctl/lib/Enum';
-  import dynamicViewer from '../../dynamicViewer/src/dynamicViewer.vue';
-
-
-  export default {
-    name: 'ct-photoselect',
-    mixins: [dynamicElement],
-    components: {
-      'draggable': draggable,
-      'ct-viewer': dynamicViewer,
-    },
-    props: {
-      vmodel: Object,
-      api: String
+import draggable from "vuedraggable";
+import dynamicElement from "../../mixins/dynamicElement";
+import Enum from "../../loader/src/ctl/lib/Enum";
+import dynamicViewer from "../../dynamicViewer/src/dynamicViewer.vue";
+
+export default {
+  name: "ct-photoselect",
+  mixins: [dynamicElement],
+  components: {
+    draggable: draggable,
+    "ct-viewer": dynamicViewer,
+  },
+  props: {
+    vmodel: Object,
+    api: String,
+  },
+  data() {
+    return {
+      max:99999, 
+      validMessage: "",
+      photoList: [],
+      modelPhotoselect: {},
+    };
+  },
+  computed: {
+    previewZIndex: function () {
+      return this.$common.getDataDrivenOpts().zindex + 100;
     },
-    data() {
+    dragOptions() {
       return {
-        fileList: [],
-        modelPhotoselect: {}
-      }
+        animation: 200,
+        group: "description",
+        disabled: false,
+        ghostClass: "ghost",
+        dragClass: "drag",
+        chosenClass: "chosen",
+        forceFallback: true,
+      };
     },
-    computed: {
-      previewZIndex: function () {
-        return this.$common.getDataDrivenOpts().zindex + 100;
-      },
-      dragOptions() {
-        return {
-          animation: 200,
-          group: "description",
-          disabled: false,
-          ghostClass: "ghost",
-          dragClass: "drag",
-          chosenClass: "chosen",
-          forceFallback: true
-        };
+  },
+  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.PhotoSelect(self.source, (data) => {
+          self.load(data);
+        });
       }
+    });
+  },
+  methods: {
+    load(data) {
+      this.model = data;
+      this.max=data.max?data.max:99999;
+      this.modelPhotoselect = data;
+      this.photoList = data.fileList;
+    },
+    handleRemove(index) {
+      this.modelPhotoselect.delete(index);
+      this.photoList.splice(index, 1);
     },
-    created() {
+    handleOpen() {
       var self = this;
-      this.$nextTick(function () {
-        if (self.vmodel) {
-          self.load(self.vmodel);
-          self.$emit('loaded');
-        }
-        else if (typeof self.source !== 'undefined') {
-          self.loaderObj.PhotoSelect(self.source, (data) => {
-            self.load(data);
-          });
-        }
+      var chooseList = new Array();
+      if (self.modelPhotoselect.action == "") {
+        self.$message.warning("请配置parameterAction！");
+        return;
+      }
+      var params = {
+        paramName: self.modelPhotoselect.paramName,
+        parentValue: self.modelPhotoselect.getFormParentFieldPara(),
+      };
+      self.photoList.forEach((n) => {
+        chooseList.push(n);
       });
-    },
-    methods: {
-      load(data) {
-        this.modelPhotoselect = data;
-        this.fileList = data.fileList;
-      },
-      handleRemove(index) {
-        this.modelPhotoselect.delete(index);
-      },
-      handleOpen() {
-        var self = this;
-        if (self.modelPhotoselect.action == "") {
-          self.$message.warning("请配置选择图片路由！");
-          return;
-        }
-        var params = {
-          paramName: self.modelPhotoselect.paramName,
-          parentValue: self.modelPhotoselect.getFormParentFieldPara(),
-        };
-        var dialogOption = {
-          title: "选择图片",
-          pane: self.$common.getParentPane(self),
-          content: [{
-            component: 'ct-photoSelectList',
+
+      var dialogOption = {
+        title: "选择图片",
+        pane: self.$common.getParentPane(self),
+        content: [
+          {
+            component: "ct-photoSelectList",
             attrs: {
-              api: self.modelPhotoselect.action,//  self.api,//source.xx
+              api: self.modelPhotoselect.action, //  self.api,//source.xx
               showTitle: false,
-              Selected: self.$common.deepClone(self.modelPhotoselect.fileList),
-              width: self.modelPhotoselect.router.pageWidth + 'px',
-              height: self.modelPhotoselect.router.pageHeight+'px',
-              para: params
-
+              Selected: chooseList,
+              // width: self.modelPhotoselect.router.pageWidth + 'px',
+              // height: self.modelPhotoselect.router.pageHeight+'px',
+              width: "772px",
+              height: "550px",
+              para: params,
             },
             on: {
-              handlePhoto(fileList) {
-                self.modelPhotoselect.setFileList(fileList);
-                self.$common.closeDialog(dialogOption.dialog);
-
-              }
-            }
-          }]
-        };
-        self.$common.openDialog(dialogOption);
-
-      }, 
-      viewerOpen(list, index) {
-        var showList = [];
-        var viewerList = [];
-        list.forEach((v) => {
-          showList.push(v.mediaUrl);
-          viewerList.push({ url: v.mediaUrl, title: v.mediaLabelName });
-        });
-        this.$refs.photoSelectViewer.open(showList, index, viewerList); 
-      },
-      onEnd(a, b) {
-        var self = this;
-        self.modelPhotoselect.setFileList(self.fileList);
-      }
+              handlePhoto(photoList) {
+                self.$nextTick(function () {
+                  if (this.modelPhotoselect.max) {
+                    if (photoList.length > this.modelPhotoselect.max) {
+                      self.$message.warning(
+                        "图片最多" + this.modelPhotoselect.max + "张"
+                      );
+                      self.valid = false;
+                      setTimeout(() => {
+                        self.valid = true;
+                      }, 3000);
+                      photoList = photoList.slice(0, this.modelPhotoselect.max);
+                    }
+                  } 
+                  self.modelPhotoselect.setFileList(photoList);
+                  self.photoList = photoList;
+
+                  self.$common.closeDialog(dialogOption.dialog);
+                });
+              },
+            },
+          },
+        ],
+      };
+      self.$common.openDialog(dialogOption);
     },
-    mounted() {
+    viewerOpen(list, index) {
+      var showList = [];
+      var viewerList = [];
+      list.forEach((v) => {
+        showList.push(v.mediaUrl);
+        viewerList.push({ url: v.mediaUrl, title: v.mediaLabelName });
+      });
+      this.$refs.photoSelectViewer.open(showList, index, viewerList);
+    },
+    onEnd(a, b) {
+      var self = this;
+      self.$nextTick(function () {
+        self.modelPhotoselect.setFileList(self.photoList);
+      });
+    }, 
+    //不能共用的数据校验
+    selfValidExcute: function (eventName) {
+      if (this.modelPhotoselect.required) {
+        if (this.modelPhotoselect.getfileListLength() === 0) {
+          this.validMessage = "必须选择图片";
+          this.valid = false;
+          return false;
+        }
+      }
+
+      if (this.modelPhotoselect.max) {
+        if (
+          this.modelPhotoselect.getfileListLength() > this.modelPhotoselect.max
+        ) {
+          this.validMessage = "图片最多" + this.modelPhotoselect.max + "张";
+          this.valid = false;
+          return false;
+        }
+      }
+      if (this.modelPhotoselect.min) {
+        if (
+          this.modelPhotoselect.getfileListLength() < this.modelPhotoselect.min
+        ) {
+          this.validMessage = "图片最少" + this.modelPhotoselect.min + "张";
+          this.valid = false;
+          return false;
+        }
+      }
 
-    }
-  }
+      this.valid = true;
+      return this.valid;
+    },
+  },
+  mounted() {},
+};
 </script>
 <style>
-  .ghost {
-    border: 1px red solid !important;
-  }
-  .drag {
-    background: #eee;
-    border: 3px #ddd dashed !important;
-  }
-  .chosen {
-  }
-
-  .flip-list-move {
-    transition: transform 0.5s;
-  }
-
-  .no-move {
-    transition: transform 0s;
-  }
-
-  .ct-upload-display-none .el-upload--picture-card {
-    display: none;
-  }
-
-  .el-upload-list__item .is-ready {
-    width: 100px;
-    height: 100px;
-  }
-
-  .ct-photoSelect .cover-list-item {
-    position: sticky;
-  }
-
-  .ct-photoSelect .cover-list-item-span {
-    position: inherit;
-    bottom: 0px;
-    left: 0px;
-    display: block;
-    background-color: #544f48;
-    opacity: 0.8;
-  }
-
-  .ct-photoSelect .cover-list-item-span-delete {
-    position: inherit;
-    bottom: 160px;
-    left: 130px;
-    color: #000000;
-    text-align: center;
-  }
-
-  .cover-list-item-span-delete i {
-    cursor: pointer;
-    vertical-align: sub;
-    margin-right: 4px;
-  }
-
-  .ct-photoSelect .el-dropdown-link {
-    cursor: pointer;
-    color: #fff;
-  }
-
-  .ct-photoSelect .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;
-  }
-  .card{
-    display: inline-block;
-  }
+.ghost {
+  border: 1px red solid !important;
+}
+.drag {
+  background: #eee;
+  border: 3px #ddd dashed !important;
+}
+.chosen {
+}
+
+.flip-list-move {
+  transition: transform 0.5s;
+}
+
+.no-move {
+  transition: transform 0s;
+}
+
+.ct-upload-display-none .el-upload--picture-card {
+  display: none;
+}
+
+.el-upload-list__item .is-ready {
+  width: 100px;
+  height: 100px;
+}
+
+.ct-photoSelect .cover-list-item {
+  position: sticky;
+}
+
+.ct-photoSelect .cover-list-item-span {
+  position: inherit;
+  bottom: 0px;
+  left: 0px;
+  display: block;
+  background-color: #544f48;
+  opacity: 0.8;
+}
+
+.ct-photoSelect .cover-list-item-span-delete {
+  position: inherit;
+  bottom: 160px;
+  left: 130px;
+  color: #000000;
+  text-align: center;
+}
+
+.cover-list-item-span-delete i {
+  cursor: pointer;
+  vertical-align: sub;
+  margin-right: 4px;
+}
+
+.ct-photoSelect .el-dropdown-link {
+  cursor: pointer;
+  color: #fff;
+}
+
+.ct-photoSelect .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;
+}
+.card {
+  display: inline-block;
+}
 </style>