centaline-data-driven 1.4.61 → 1.4.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "centaline-data-driven",
-  "version": "1.4.61",
+  "version": "1.4.63",
   "description": "ccai",
   "author": "hjc <3226136347@qq.com>",
   "private": false,
@@ -15,13 +15,13 @@
     "axios": "^0.24.0",
     "babel-polyfill": "^6.26.0",
     "compression-webpack-plugin": "^2.0.0",
-    "cropperjs": "^1.5.13",
     "element-ui": "^2.15.7",
     "module": "^1.2.5",
     "sass": "^1.34.0",
     "save": "^2.4.0",
     "v-viewer": "^1.6.4",
     "vue": "2.5.17",
+    "vue-cropper": "^0.5.8",
     "vue-ueditor-wrap": "^2.5.6",
     "vuedraggable": "^2.24.3"
   },

package/src/centaline/dynamicDetail/src/dynamicPropertyDetailOFI.vue

@@ -918,7 +918,16 @@ export default {
           else if (field.isSearchPageInTab) {// 外部框架tab页打开
             submitData = field.getActionPara(submitData).para;
             self.$common.getDataDrivenOpts().handler.openTabSearch(field, submitData);
-          } 
+          }
+          else if (field.isUrlInSystemTab) {//外部框架tab页打开URl
+            submitData = field.getActionPara(submitData).para;
+            let query = self.$common.objectToQueryStr(submitData);
+            let urlTab = field.action + query;
+            if(field.action.indexOf('?')>-1 && query.indexOf('?')>-1){
+              urlTab = field.action + '&' +query.substr(1, query.length);
+            }
+            self.$common.getDataDrivenOpts().handler.openTabUrl(urlTab,field.pageTitle||field.label);
+          }  
           else if (field.isBrowserNewTab) {// 浏览器打开
             submitData = field.getActionPara(submitData).para;
             let query = self.$common.objectToQueryStr(submitData);

package/src/centaline/dynamicDetail/src/dynamicPropertyDetailRET.vue

@@ -928,6 +928,15 @@ export default {
             submitData = field.getActionPara(submitData).para;
             self.$common.getDataDrivenOpts().handler.openTabSearch(field, submitData);
           } 
+          else if (field.isUrlInSystemTab) {//外部框架tab页打开URl
+            submitData = field.getActionPara(submitData).para;
+            let query = self.$common.objectToQueryStr(submitData);
+            let urlTab = field.action + query;
+            if(field.action.indexOf('?')>-1 && query.indexOf('?')>-1){
+              urlTab = field.action + '&' +query.substr(1, query.length);
+            }
+            self.$common.getDataDrivenOpts().handler.openTabUrl(urlTab,field.pageTitle||field.label);
+          }  
           else if (field.isBrowserNewTab) {// 浏览器打开
             submitData = field.getActionPara(submitData).para;
             let query = self.$common.objectToQueryStr(submitData);

package/src/centaline/dynamicDetail/src/dynamicPropertySimpleDetailRET.vue

@@ -438,6 +438,15 @@
               submitData = field.getActionPara(submitData).para;
               self.$common.getDataDrivenOpts().handler.openTabSearch(field, submitData);
             }
+            else if (field.isUrlInSystemTab) {//外部框架tab页打开URl
+              submitData = field.getActionPara(submitData).para;
+              let query = self.$common.objectToQueryStr(submitData);
+              let urlTab = field.action + query;
+              if(field.action.indexOf('?')>-1 && query.indexOf('?')>-1){
+                urlTab = field.action + '&' +query.substr(1, query.length);
+              }
+              self.$common.getDataDrivenOpts().handler.openTabUrl(urlTab,field.pageTitle||field.label);
+            }  
             else if (field.isBrowserNewTab) {// 浏览器打开
               submitData = field.getActionPara(submitData).para;
               let query = self.$common.objectToQueryStr(submitData);

package/src/centaline/dynamicEditPictures/src/dynamicEditPictures.vue

@@ -1,7 +1,31 @@
 <template>
   <div class="picedit-modal" style="width:100%; height:100%;background-color: #1e1e1e">
     <div class="picedit-stage">
-      <canvas id="drawCanvas" ref="canvas" style="position:absolute;"></canvas>
+      <div style="width:100%; height:100%;" v-if="croppShow">
+        <vue-cropper ref="cropper"
+                     :img="options.img"
+                     :output-size="options.size"
+                     :output-type="options.outputType"
+                     :info="options.info"
+                     :full="options.full"
+                     :canScale="options.canScale"
+                     :can-move="options.canMove"
+                     :can-move-box="options.canMoveBox"
+                     :fixed="options.fixed"
+                     :fixed-box="options.fixedBox"
+                     :original="options.original"
+                     :auto-crop="options.autoCrop"
+                     :auto-crop-width="options.autoCropWidth"
+                     :auto-crop-height="options.autoCropHeight"
+                     :center-box="options.centerBox"
+                     :high="options.high"
+                     :info-true="options.infoTrue"
+                     :max-img-size="options.maxImageSize"
+                     :enlarge="options.enlarge"
+                     :mode="options.mode"
+                     :maxImgSize="options.maxImgSize" />
+      </div>
+      <canvas v-else id="drawCanvas" ref="canvas" style="position:absolute;"></canvas>
     </div>
     <div class="picedit-Original" v-if="flagOriginal">
       <el-row>
@@ -32,12 +56,11 @@
 <script>
   import dynamicElement from "../../mixins/dynamicElement";
   import { upload, uploadByPieces } from "../../loader/src/ctl/SliceUpload";
-  import Enum from '../../loader/src/ctl/lib/Enum';
-  import Cropper from 'cropperjs'
-  import 'cropperjs/dist/cropper.min.css'
+  import { VueCropper } from "vue-cropper";
   export default {
     name: "ct-editpictures",
     mixins: [dynamicElement],
+    components: { VueCropper },
     props: {
       file: Object,
       api: String,
@@ -49,7 +72,6 @@
         flagOriginal: false,
         progressFlag: false,
         loadProgress: 0,
-        cropper: null,
         croppShow: false,
         canvas: Object,
         ctx: Object,
@@ -58,6 +80,9 @@
         canMove: false,
         PaintMove: false,
         isActive: false,
+        bodywidth: 0,
+        bodyheight: 0,
+        scale: 1,
         tx: 0,
         ty: 0,
         tl: 0,
@@ -68,23 +93,24 @@
         nt: 0,
         ratio: 0,
         cropBoxResizable: false,
-        bntindex:-1,
+        bntindex: -1,
+        canvasImg:'',
         bntList: [
           {
             name: "左旋转",
             ico: "el-icon-refresh-left",
-            key:"rotLeft",
+            key: "rotLeft",
           },
           {
             name: "右旋转",
             ico: "el-icon-refresh-right",
             key: "rotRight",
           },
-          //{
-          //  name: "裁剪",
-          //  ico: "el-icon-crop",
-          //  key: "Crop",
-          //},
+          {
+            name: "裁剪",
+            ico: "el-icon-crop",
+            key: "Crop",
+          },
           {
             name: "拖动",
             ico: "el-icon-rank",
@@ -116,6 +142,27 @@
             key: "preservation",
           },
         ],
+        options: {
+          img: '', //裁剪图片的地址
+          outputSize: 1, // 裁剪生成图片的质量
+          outputType: 'jpeg', // 裁剪生成图片的格式
+          full: false, // 是否输出原图比例的截图
+          info: true, // 图片大小信息
+          canScale: true, // 图片是否允许滚轮缩放
+          autoCrop: true, // 是否默认生成截图框
+          //autoCropWidth: 800, // 默认生成截图框宽度
+          //autoCropHeight: 600, // 默认生成截图框高度
+          canMove: true, // 上传图片是否可以移动
+          //fixedBox: true, // 固定截图框大小 不允许改变
+          fixed: false, // 是否开启截图框宽高固定比例
+          canMoveBox: true, // 截图框能否拖动
+          original: false, // 上传图片按照原始比例渲染
+          centerBox: true, // 截图框是否被限制在图片里面
+          height: true,
+          infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
+          enlarge: 1, // 图片根据截图框输出比例倍数
+          //mode: 'cover', // 图片默认渲染方式
+        },
       }
     },
     computed: {
@@ -124,7 +171,11 @@
     mounted() {
       this.progressFlag = false;
       this.loadProgress = 0;
-      if (typeof this.minWidth == 'undefined' || typeof this.minWidth == 'undefined') {
+      var width = parseInt(window.document.body.clientWidth * 0.8);
+      width = width > 1160 ? 1160 : width;
+      this.bodywidth = width;
+      this.bodyheight = parseInt(window.document.body.clientHeight * 0.8);
+      if (typeof this.minWidth !== 'undefined' && typeof this.minWidth !== 'undefined') {
         this.cropBoxResizable = true;
       }
       if (typeof this.file.originalSavedFileName !== 'undefined' && this.file.originalSavedFileName !== this.file.savedFileName) {
@@ -136,14 +187,14 @@
       drawCanv(href) {
         this.$nextTick(() => {
           let _this = this
-          _this.canvas = document.getElementById('drawCanvas');
+          _this.canvas = this.$refs.canvas;
           _this.ctx = _this.canvas.getContext("2d");
 
           _this.canvas.width = 0;
           _this.canvas.height = 0;
 
           _this.imgObj = new Image()
-          _this.imgObj.src = href||_this.file.mediaUrl;
+          _this.imgObj.src = href || _this.file.mediaUrl;
           _this.imgObj.setAttribute("crossOrigin", 'Anonymous')
           _this.imgObj.onload = function (e) {
             //获取原始宽高
@@ -153,25 +204,23 @@
             _this.canvas.width = naturalWidth;
             _this.canvas.height = naturalHeight;
             _this.ctx.drawImage(_this.imgObj, 0, 0, naturalWidth, naturalHeight)
-
-            var scale = 1;
-            var scalew = 900 / _this.imgObj.width;
-            var scaleh = window.document.body.clientHeight / _this.imgObj.height;
+            var scalew = _this.bodywidth / _this.imgObj.width;
+            var scaleh = _this.bodyheight / _this.imgObj.height;
             if (scalew < 1 && scaleh < 1) {
               if (scalew < scaleh) {
-                scale = scalew;
+                _this.scale = scalew;
               }
               else {
-                scale = scaleh;
+                _this.scale = scaleh;
               }
             }
             else if (scalew > 1 && scaleh < 1) {
-              scale = scaleh;
+              _this.scale = scaleh;
             }
             else if (scalew < 1 && scaleh > 1) {
-              scale = scalew;
+              _this.scale = scalew;
             }
-            _this.scaleDomSize(_this.canvas, scale);
+            _this.scaleDomSize(_this.canvas);
           }
           this.canvas.addEventListener("pointerdown", _this.startDraw, false);
           this.canvas.addEventListener("pointermove", _this.draw, false);
@@ -283,25 +332,15 @@
       },
       //放大缩小
       scaleDom(canvas, type) {
-        let scale = parseFloat((canvas.style.transform || `scale(1)`).replace(/[^0-9.]/gi, ''))
         if (type == "-") {
-          scale += -0.1;
-          if ((scale <= 1 && canvas.width > 900) || (scale <= 1 && canvas.height > (window.document.body.clientHeight))) {
-            canvas.style.left = - canvas.width * 0.05 * ((1 - scale) * 10) + 'px';
-            canvas.style.top = -canvas.height * 0.05 * ((1 - scale) * 10) + 'px';
-          }
+          this.scale += -0.1;
         } else if (type == "+") {
-          scale += 0.1;
-          if ((scale <= 1 && canvas.width > 900) || (scale <= 1 && canvas.height > (window.document.body.clientHeight))) {
-            canvas.style.left = - canvas.width * 0.05 * ((1 - scale) * 10) + 'px';
-            canvas.style.top = -canvas.height * 0.05 * ((1 - scale) * 10) + 'px';
-          }
+          this.scale += 0.1;
         }
         else {
-          scale = 1;
+          this.scale = 1;
         }
-        if (scale >= 0.1) canvas.style.transform = `scale(${scale})`;
-
+        this.scaleDomSize(canvas);
       },
       rotLeft() {
         this.rot -= 90;
@@ -350,51 +389,39 @@
         context.drawImage(img, 0, 0, w, h);
         context.restore();
         img.style.display = "none";
+        this.scaleDomSize(canvas);
       },
       Crop() {
-        let _this = this
-        this.drawCanv()
-        this.croppShow = true
-        var w;
-        var h;
+      
         if (typeof this.minWidth !== 'undefined' && typeof this.minWidth !== 'undefined') {
-          w = parseInt(this.minWidth)
-          h = parseInt(this.minHeight);
+          if (parseInt(this.minWidth) > this.bodywidth || parseInt(this.minHeight) > this.bodyheight) {
+            this.options.enlarge = 2;
+            this.options.autoCropWidth = parseInt(this.minWidth)/2;
+            this.options.autoCropHeight = parseInt(this.minHeight)/2;
+          }
+          else {
+            this.options.autoCropWidth = parseInt(this.minWidth);
+            this.options.autoCropHeight = parseInt(this.minHeight);
+          }
         }
-        let cropper = new Cropper(this.$refs.canvas, {
-          checkCrossOrigin: true,
-          viewMode: 1,
-          dragMode: 'move',
-          cropBoxResizable: _this.cropBoxResizable,
-          data: {
-            width: w,
-            height: h
-          },
-          zoom(e) {
-            if (_this.ratio == 0) {
-              _this.ratio = e.detail.oldRatio
-            }
-            if (e.detail.ratio > _this.ratio) {
-              e.preventDefault();
-            }
-          },
-        })
-        this.cropper = cropper
+        this.canvasImg = this.canvas.toDataURL('image/jpeg');
+        this.options.img = this.canvasImg;
+        this.options.fixedBox = this.cropBoxResizable;
+        this.croppShow = true
       },
       // 确认裁剪
       sureCropper() {
         let _this = this
-        this.cropper.getCroppedCanvas().toBlob(function (blob) {
+        this.$refs.cropper.getCropBlob(blob => {
           const href = window.URL.createObjectURL(blob)
+          _this.croppShow = false;
           _this.drawCanv(href)
-        }, 'image/jpeg')
-        this.cancelCropper()
+        });
       },
       // 销毁裁剪框
       cancelCropper() {
-        this.cropper.destroy()
         this.croppShow = false
-        this.cropper = null
+        this.drawCanv(this.canvasImg);
       },
       Original() {
         var url = this.file.mediaUrl.replace(this.file.savedFileName, this.file.originalSavedFileName);
@@ -411,8 +438,6 @@
       clear() {
         this.drawCanv();
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        this.canvas.style.left = '0px';
-        this.canvas.style.top = '0px';
         this.rot = 0;
         this.nl = 0;
         this.nt = 0;
@@ -422,12 +447,10 @@
         this.scaleDom(this.canvas, "");
         this.rotate(this.canvas, this.imgObj, this.rot);
       },
-      scaleDomSize(canvas, scale) {
-        if ((scale <= 1 && canvas.width > 900) || (scale <= 1 && canvas.height > (window.document.body.clientHeight))) {
-          canvas.style.left = - canvas.width * 0.05 * ((1 - scale) * 10) + 'px';
-          canvas.style.top = -canvas.height * 0.05 * ((1 - scale) * 10) + 'px';
-        }
-        if (scale >= 0.1) canvas.style.transform = `scale(${scale})`;
+      scaleDomSize(canvas) {
+        canvas.style.transform = `scale(${this.scale})`;
+        canvas.style.left = (- canvas.width * 0.05 * ((1 - this.scale) * 10)) + ((this.bodywidth - canvas.width * this.scale) / 2) + 'px';
+        canvas.style.top = (-canvas.height * 0.05 * ((1 - this.scale) * 10)) + ((this.bodyheight - canvas.height * this.scale) / 2) + 'px';
       },
       async preservation() {
         this.progressFlag = true;
@@ -466,6 +489,8 @@
             this.file.mediaUrl = res.content.media.mediaUrl;
             this.file.savedFileName = res.content.media.savedFileName;
             this.file.mediaDate = res.content.media.mediaDate;
+            this.file.width = this.canvas.width;
+            this.file.height = this.canvas.height;
             this.$emit('handleEditPhoto', this.file);
           }
           return true;
@@ -587,6 +612,7 @@
     color: #fff;
     z-index: 9;
   }
+
   .picedit-cropper {
     height: 50px;
     bottom: 0;
@@ -596,6 +622,7 @@
     color: #fff;
     z-index: 9;
   }
+
   .picedit-Original {
     height: 50px;
     top: 50px;
@@ -604,6 +631,7 @@
     color: #fff;
     z-index: 9;
   }
+
   .picedit-toolbar {
     display: inline-block;
     height: 50px;
@@ -624,19 +652,22 @@
       font-size: 24px;
       cursor: pointer;
     }
+
     .picedit-toolbar .active {
       background-color: #fff;
-      color:#333;
-    }
-    .rc-cropper {
-      position: relative;
+      color: #333;
     }
 
+  .rc-cropper {
+    position: relative;
+  }
+
   .rc-cropper__iconCrop1 {
     position: absolute;
     right: 4%;
     top: 0%;
   }
+
   .mask {
     position: fixed;
     z-index: 9998;
@@ -646,11 +677,11 @@
     left: 0;
     background-color: rgba(0, 0, 0, .3);
   }
+
   .stream-total-tips {
     position: fixed;
     top: 40%;
-    left: 40%;
+    left: 45%;
     z-index: 9999;
   }
- 
 </style>

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

@@ -561,6 +561,13 @@
             this.model.setByPieces(res, Progress, file);
 
             if (res.content.finished == 1) {
+              var self = this;
+              let img = new Image();
+              img.src = self.model.fileList[self.model.fileList.length - 1].mediaUrl;
+              img.onload = function () {
+                self.model.fileList[self.model.fileList.length - 1].width = img.width;
+                self.model.fileList[self.model.fileList.length - 1].height = img.height;
+              };
               this.handleChange();
             }
             return true;

package/src/centaline/dynamicForm/src/dynamicForm.vue

@@ -510,6 +510,15 @@
                 let query = self.$common.objectToQueryStr(submitData);
                 window.open(field.action + query, "_blank");
               }
+              else if (field.isUrlInSystemTab) {//外部框架tab页打开URl
+                submitData = field.getActionPara(submitData).para;
+                let query = self.$common.objectToQueryStr(submitData);
+                let urlTab = field.action + query;
+                if(field.action.indexOf('?')>-1 && query.indexOf('?')>-1){
+                  urlTab = field.action + '&' +query.substr(1, query.length);
+                }
+                self.$common.getDataDrivenOpts().handler.openTabUrl(urlTab,field.pageTitle||field.label);
+              }  
               else if (field.isSeeVoice) {//看视频
                 self.$common.browseVideo(field, submitData)
               }

package/src/centaline/dynamicSearchList/src/dynamicSearchTable.vue

@@ -886,6 +886,15 @@ export default {
             let query = self.$common.objectToQueryStr(submitData);
             window.open(action + query, "_blank");
           }
+          else if (field.isUrlInSystemTab) {//外部框架tab页打开URl
+            submitData = field.getActionPara(submitData).para;
+            let query = self.$common.objectToQueryStr(submitData);
+            let urlTab = field.action + query;
+            if(field.action.indexOf('?')>-1 && query.indexOf('?')>-1){
+              urlTab = field.action + '&' +query.substr(1, query.length);
+            }
+            self.$common.getDataDrivenOpts().handler.openTabUrl(urlTab,field.pageTitle||field.label);
+          }  
           else if (field.isSeeVoice) {//看视频
             self.$common.browseVideo(field, submitData);
           }

package/src/centaline/loader/src/ctl/File.js

@@ -334,16 +334,7 @@ const box = function (source, fileSourceList, router, optionApi,videoPlayIconUrl
         }
         rtn.fileList.push(awaitfile);
       },
-      imgFn(url) {
-        return new Promise(function (resolve, reject) {
-          let img = new Image();
-          img.src = url;
-          img.onload = function () {
-            resolve(img);
-          };
-        });
-      },
-      async setByPieces(res, Progress, file) {
+       setByPieces(res, Progress, file) {
         if (res.rtnCode === Enum.ReturnCode.Successful) {
           //下面的方式绑定，会有一些问题 todo 不强与页面关联
           var data = {};
@@ -356,9 +347,6 @@ const box = function (source, fileSourceList, router, optionApi,videoPlayIconUrl
             data = rtn.getFileData(res.content.media);
             data.progressFlag = false;
             data.loadProgress = 100;
-            const img = await this.imgFn(data.mediaUrl);
-            w = img.width;
-            h = img.height ;
             Vue.set(file, "width", w);
             Vue.set(file, "height", h);
             Vue.set(file, "url", data.url);

package/src/centaline/loader/src/ctl/Router.js

@@ -98,6 +98,9 @@ const Router = function (source) {
     get isUrlInLayer() {
       return source.pageStyle === Enum.PageStyle.UrlInLayer;
     },
+    get isUrlInSystemTab() {
+      return source.pageStyle === Enum.PageStyle.UrlInSystemTab;
+    },
     get isOpenUrlInBrowse() {
       return source.actionType === Enum.ActionType.OpenUrlInBrowse;
     },

package/src/centaline/loader/src/ctl/lib/Enum.js

@@ -563,6 +563,11 @@ const Enum = {
     /// URL页面（弹层）
     /// </summary>
     UrlInLayer: 8,
+
+    /// <summary>
+    ///  根据 Action 的Url在系统内新开Tab页面
+    /// </summary>
+    UrlInSystemTab: 9,
   },
 
   /// <summary>

package/src/main.js

@@ -40,6 +40,9 @@ Vue.use(centaline, {
     closeTab: function () {
       alert("关闭当前tab")
     },
+    openTabUrl: function (action) {
+      alert("打开tab页URL:" + action)
+    },
     // 获取请求头
     getRequestHeaders: function () {
       return {