centaline-data-driven 1.1.54 → 1.1.55

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

@@ -1,283 +1,288 @@
-<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="model.lock?'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-progress="uploadProcess">
-      <i slot="default" class="el-icon-plus"></i>
-      <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>
-          <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">
-            <!--锁定-->
-            <span v-if="model.lock || !file.rightEdit" class="el-dropdown-link">
-              &nbsp;{{file.mediaLabelName}}
-            </span>
-            <!--复杂分类-->
-            <span v-else-if="model.isComplexClassify" class="el-dropdown-link" @click="classifyFormClickHandle(file)">
-              &nbsp;{{file.mediaLabelName}}<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">
-              <span class="el-dropdown-link" @click="classifyClickHandle">
-                &nbsp;{{file.mediaLabelName}}<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-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </span>
-        </div>
-        <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
-    },
-    data() {
-      return {
-      };
-    },
-    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);
-          });
-        }
-      });
-    },
-    methods: {
-      load(data) {
-        this.model = data;
-      },
-      //删除
-      handleRemove(file) {
-        this.$common.confirm("确定删除该附件？", "提示", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          //type: 'warning'
-        }).then(() => {
-          this.model.deleteFile(file, false);
-        }).catch(() => {
-        });
-      },
-      handlePictureCardPreview(file) {
-        if (this.$common.isAssetTypeAnImage(this.getSuffix(file))) {
-          //this.$openPreview([file.mediaUrl]);
-        }
-        else {
-          if (file.rightDownload) {
-            window.open(file.mediaUrl, "_blank");
-          }
-          return [];
-        }
-      },
-      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 [];
-        }
-      },
-      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) {
-        if (this.model.max) {
-          if (this.model.getfileListLength() >= this.model.max) {
-            this.validMessage = "附件最多" + this.model.max + "个";
-            this.valid = false;
-            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);
-      },
-      //不能共用的数据校验
-      selfValidExcute: function (eventName) {
-        if (this.model.required) {
-          if (this.model.getfileListLength() === 0) {
-            this.validMessage = "必须上传附件";
-            this.valid = false;
-            return false;
-          }
-        }
-
-        if (this.model.max) {
-          if (this.model.getfileListLength() > this.model.max) {
-            this.validMessage = "附件最多" + this.model.max+ "个";
-            this.valid = false;
-            return false;
-          }
-        }
-        if (this.model.min) {
-          if (this.model.getfileListLength() < this.model.min) {
-            this.validMessage = "附件最少" + this.model.min + "个";
-            this.valid = false;
-            return false;
-          }
-        }
-
-        this.valid = true;
-        return this.valid;
-      },
-
-      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);
-      },
-      classifyFormClickHandle: function (file) {
-        var self = this;
-        this.model.updateClassify(file, () => {
-          //self.$forceUpdate();
-        });
-      },
-    }
-  }
-</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-file .cover-list-item-span {
-    position: inherit;
-    bottom: 0px;
-    left: 0px;
-    display: block;
-    background-color: #544f48;
-    opacity: 0.8;
-  }
-  .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;
-  }
-</style>
+<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="model.lock?'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-progress="uploadProcess">
+      <i slot="default" class="el-icon-plus"></i>
+      <div slot="tip" class="el-upload__tip errorMessage" v-show="!imgValid">{{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>
+          <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.paramName">
+            <!--锁定-->
+            <span v-if="model.lock || !file.rightEdit" class="el-dropdown-link">
+              &nbsp;{{file.mediaLabelName}}
+            </span>
+            <!--复杂分类-->
+            <span v-else-if="model.isComplexClassify" class="el-dropdown-link" @click="classifyFormClickHandle(file)">
+              &nbsp;{{file.mediaLabelName}}<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">
+              <span class="el-dropdown-link" @click="classifyClickHandle">
+                &nbsp;{{file.mediaLabelName}}<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-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </span>
+        </div>
+        <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
+    },
+    data() {
+      return {
+        imgValid:true,
+      };
+    },
+    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);
+          });
+        }
+      });
+    },
+    methods: {
+      load(data) {
+        this.model = data;
+      },
+      //删除
+      handleRemove(file) {
+        this.$common.confirm("确定删除该附件？", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          //type: 'warning'
+        }).then(() => {
+          this.model.deleteFile(file, false);
+        }).catch(() => {
+        });
+      },
+      handlePictureCardPreview(file) {
+        if (this.$common.isAssetTypeAnImage(this.getSuffix(file))) {
+          this.$openPreview([file.mediaUrl]);
+        }
+        else {
+          if (file.rightDownload) {
+            window.open(file.mediaUrl, "_blank");
+          }
+          return [];
+        }
+      },
+      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 [];
+        }
+      },
+      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) {
+          if (this.model.getfileListLength() >= this.model.max) {
+            this.validMessage = "附件最多" + this.model.max + "个";
+            this.imgValid = false;
+            setTimeout(() => {
+              that.imgValid = 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);
+      },
+      //不能共用的数据校验
+      selfValidExcute: function (eventName) {
+        if (this.model.required) {
+          if (this.model.getfileListLength() === 0) {
+            this.validMessage = "必须上传附件";
+            this.valid = false;
+            return false;
+          }
+        }
+
+        if (this.model.max) {
+          if (this.model.getfileListLength() > this.model.max) {
+            this.validMessage = "附件最多" + this.model.max+ "个";
+            this.valid = false;
+            return false;
+          }
+        }
+        if (this.model.min) {
+          if (this.model.getfileListLength() < this.model.min) {
+            this.validMessage = "附件最少" + this.model.min + "个";
+            this.valid = false;
+            return false;
+          }
+        }
+
+        this.valid = true;
+        return this.valid;
+      },
+
+      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);
+      },
+      classifyFormClickHandle: function (file) {
+        var self = this;
+        this.model.updateClassify(file, () => {
+          //self.$forceUpdate();
+        });
+      },
+    }
+  }
+</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-file .cover-list-item-span {
+    position: inherit;
+    bottom: 0px;
+    left: 0px;
+    display: block;
+    background-color: #544f48;
+    opacity: 0.8;
+  }
+  .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;
+  }
+</style>

package/src/centaline/dynamicForm/index.js

@@ -1,24 +1,24 @@
-import dynamicForm from './src/dynamicForm'
-import dynamicInput from '../dynamicInput/index'
-import dynamicLabel from '../dynamicLabel/index'
-import dynamicLs from '../dynamicLs/index'
-import api from '../api/index'
-import common from '../common/index'
-import validate from '../validate/index'
-
-dynamicForm.install = function (Vue) {
-  Vue.component(dynamicForm.name, dynamicForm);
-  Vue.component(dynamicInput.name, dynamicInput);
-  Vue.component(dynamicLabel.name, dynamicLabel);
-  Vue.component(dynamicLs.name, dynamicLs);
-
-  Vue.use(api);
-  Vue.use(common);
-  Vue.use(validate);
-}
-
-if (typeof window !== 'undefined' && window.Vue) {
-  window.Vue.use(dynamicForm);
-}
-
-export default dynamicForm;
+import dynamicForm from './src/dynamicForm'
+import dynamicInput from '../dynamicInput/index'
+import dynamicLabel from '../dynamicLabel/index'
+import dynamicLs from '../dynamicLs/index'
+import api from '../api/index'
+import common from '../common/index'
+import validate from '../validate/index'
+
+dynamicForm.install = function (Vue) {
+  Vue.component(dynamicForm.name, dynamicForm);
+  Vue.component(dynamicInput.name, dynamicInput);
+  Vue.component(dynamicLabel.name, dynamicLabel);
+  Vue.component(dynamicLs.name, dynamicLs);
+
+  Vue.use(api);
+  Vue.use(common);
+  Vue.use(validate);
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+  window.Vue.use(dynamicForm);
+}
+
+export default dynamicForm;