Jeecg Boot 2.2.1 版本发布，低代码平台

ant-design-vue-jeecg/src/views/jeecg/ImagCropper.vue

@@ -0,0 +1,613 @@
+<template>
+  <div class="wrapper">
+    <div class="model" v-show="model">
+      <div class="model-show" @click="model = false">
+        <img :src="modelSrc" alt="" @click="model = false">
+      </div>
+    </div>
+    <div class="content">
+      <div class="show-info">
+        <div class="test test1">
+          <vueCropper
+            ref="cropper"
+            :img="option.img"
+            :outputSize="option.size"
+            :outputType="option.outputType"
+            :info="true"
+            :full="option.full"
+            :canMove="option.canMove"
+            :canMoveBox="option.canMoveBox"
+            :fixedBox="option.fixedBox"
+            :original="option.original"
+            :autoCrop="option.autoCrop"
+            :autoCropWidth="option.autoCropWidth"
+            :autoCropHeight="option.autoCropHeight"
+            :centerBox="option.centerBox"
+            :high="option.high"
+            :infoTrue="option.infoTrue"
+            :maxImgSize="option.maxImgSize"
+            @realTime="realTime"
+            @imgLoad="imgLoad"
+            @cropMoving="cropMoving"
+            :enlarge="option.enlarge"
+            :mode="option.mode"
+            :limitMinSize="option.limitMinSize"
+          ></vueCropper>
+        </div>
+        <div class="test-button">
+          <button @click="changeImg" class="btn">changeImg</button>
+          <label class="btn" for="uploads">upload</label>
+          <input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)" ref="uploadImg">
+          <button @click="startCrop" v-if="!crap" class="btn">start</button>
+          <button @click="stopCrop" v-else class="btn">stop</button>
+          <button @click="clearCrop" class="btn">clear</button>
+          <button @click="refreshCrop" class="btn">refresh</button>
+          <button @click="changeScale(1)" class="btn">+</button>
+          <button @click="changeScale(-1)" class="btn">-</button>
+          <button @click="rotateLeft" class="btn">rotateLeft</button>
+          <button @click="rotateRight" class="btn">rotateRight</button>
+          <button @click="finish('base64')" class="btn">preview(base64)</button>
+          <button @click="finish('blob')" class="btn">preview(blob)</button>
+          <button @click="() => option.img = ''" class="btn">清除图片</button>
+          <a @click="down('base64')" class="btn">download(base64)</a>
+          <a @click="down('blob')" class="btn">download(blob)</a>
+          <a :href="downImg" download="demo.png" ref="downloadDom"></a>
+        </div>
+
+        <div class="pre">
+          <section class="pre-item">
+            <p>截图框大小</p>
+            <div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden',
+							'margin': '5px'}">
+              <div :style="previews.div">
+                <img :src="previews.url" :style="previews.img">
+              </div>
+            </div>
+          </section>
+
+          <section class="pre-item">
+            <p>中等大小</p>
+            <div :style="previewStyle1">
+              <div :style="previews.div">
+                <img :src="previews.url" :style="previews.img">
+              </div>
+            </div>
+          </section>
+
+          <section class="pre-item">
+            <p>迷你大小</p>
+            <div :style="previewStyle2">
+              <div :style="previews.div">
+                <img :src="previews.url" :style="previews.img">
+              </div>
+            </div>
+          </section>
+
+          <section class="pre-item" title="zoom: (100 / previews.w)">
+            <p>固定为100宽度</p>
+            <div :style="previewStyle3">
+              <div :style="previews.div">
+                <img :src="previews.url" :style="previews.img">
+              </div>
+            </div>
+          </section>
+
+          <section class="pre-item" title="zoom: (100 / previews.h)">
+            <p>固定为100高度</p>
+            <div :style="previewStyle4">
+              <div :style="previews.div">
+                <img :src="previews.url" :style="previews.img">
+              </div>
+            </div>
+          </section>
+        </div>
+
+        <div style="display:block; width: 100%;">
+          <label class="c-item">
+            <span>图片默认渲染方式</span>
+            <select v-model="option.mode">
+              <option value="contain">contain</option>
+              <option value="cover">cover</option>
+              <option value="400px auto">400px auto</option>
+              <option value="auto 400px">auto 400px</option>
+              <option value="50%">50%</option>
+              <option value="auto 50%">auto 50%</option>
+            </select>
+            <section>
+              类似css background属性设置  设置不符合规范不生效， 参照文档说明
+            </section>
+          </label>
+          <label class="c-item">
+            <span>上传时图片最大大小(默认会压缩尺寸到这个大小)</span>
+            <input type="nubmer" v-model="option.maxImgSize">
+          </label>
+          <label class="c-item">
+            <span>上传图片是否显示原始宽高 (针对大图 可以铺满)</span>
+            <input type="checkbox" v-model="option.original">
+            <span>original: {{ option.original}}</span>
+          </label>
+          <label class="c-item">
+            <span>是否根据dpr生成适合屏幕的高清图片</span>
+            <input type="checkbox" v-model="option.high">
+            <span>high: {{ option.high}}</span>
+          </label>
+          <label class="c-item">
+            <span>是否输出原图比例的截图</span>
+            <input type="checkbox" v-model="option.full">
+            <span>full: {{ option.full}}</span>
+          </label>
+          <label class="c-item">
+            <span>截图信息展示是否是真实的输出宽高</span>
+            <input type="checkbox" v-model="option.infoTrue">
+            <span>infoTrue: {{ option.infoTrue}}</span>
+          </label>
+          <label class="c-item">
+            <span>能否拖动图片</span>
+            <input type="checkbox" v-model="option.canMove">
+            <span>canMove: {{ option.canMove}}</span>
+          </label>
+          <label class="c-item">
+            <span>能否拖动截图框</span>
+            <input type="checkbox" v-model="option.canMoveBox">
+            <span>canMoveBox: {{ option.canMoveBox}}</span>
+          </label>
+          <label class="c-item">
+            <span>截图框固定大小</span>
+            <input type="checkbox" v-model="option.fixedBox">
+            <span>fixedBox: {{ option.fixedBox}}</span>
+          </label>
+          <label class="c-item">
+            <span>是否自动生成截图框</span>
+            <input type="checkbox" v-model="option.autoCrop">
+            <span>autoCrop: {{ option.autoCrop}}</span>
+          </label>
+          <label class="c-item">
+            <span>自动生成截图框的宽高</span>
+            <span>宽度:  </span><input type="number" v-model="option.autoCropWidth">
+            <span>高度:  </span><input type="number" v-model="option.autoCropHeight">
+          </label>
+          <label class="c-item">
+            <span>截图框是否限制在图片里(只有在自动生成截图框时才能生效)</span>
+            <input type="checkbox" v-model="option.centerBox">
+            <span>centerBox: {{ option.centerBox}}</span>
+          </label>
+          <label class="c-item">
+            <span>是否按照截图框比例输出 默认为1 </span>
+            <input type="number" v-model="option.enlarge">
+          </label>
+          <p>输出图片格式</p>
+          <label class="c-item">
+            <label>jpg  <input type="radio" name="type" value="jpeg" v-model="option.outputType"></label>
+            <label>png  <input type="radio" name="type" value="png" v-model="option.outputType"></label>
+            <label>webp <input type="radio" name="type" value="webp" v-model="option.outputType"></label>
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { VueCropper } from 'vue-cropper'
+
+  export default {
+    name: 'ImagCropper',
+    components: {
+      VueCropper
+    },
+    data () {
+      return {
+        model: false,
+        modelSrc: "",
+        crap: false,
+        previews: {},
+        lists: [
+          {img: "https://avatars2.githubusercontent.com/u/15681693?s=460&v=4"},
+          {img: "http://cdn.xyxiao.cn/Landscape_1.jpg"},
+          {img: "http://cdn.xyxiao.cn/Landscape_2.jpg"},
+          {img: "http://cdn.xyxiao.cn/Landscape_3.jpg"},
+          {img: "http://cdn.xyxiao.cn/Landscape_4.jpg"},
+          {img: "http://cdn.xyxiao.cn/Portrait_1.jpg"},
+          {img: "http://cdn.xyxiao.cn/Portrait_2.jpg"}
+        ],
+        option: {
+          img: "",
+          size: 1,
+          full: false,
+          outputType: "png",
+          canMove: true,
+          fixedBox: false,
+          original: false,
+          canMoveBox: true,
+          autoCrop: true,
+          // 只有自动截图开启 宽度高度才生效
+          autoCropWidth: 200,
+          autoCropHeight: 150,
+          centerBox: false,
+          high: false,
+          cropData: {},
+          enlarge: 1,
+          mode: 'contain',
+          maxImgSize: 3000,
+          limitMinSize: [100, 120]
+        },
+        example2: {
+          img: "http://cdn.xyxiao.cn/Landscape_2.jpg",
+          info: true,
+          size: 1,
+          outputType: "jpeg",
+          canScale: true,
+          autoCrop: true,
+          // 只有自动截图开启 宽度高度才生效
+          autoCropWidth: 300,
+          autoCropHeight: 250,
+          fixed: true,
+          // 真实的输出宽高
+          infoTrue: true,
+          fixedNumber: [4, 3]
+        },
+        example3: {
+          img: "http://cdn.xyxiao.cn/Landscape_1.jpg",
+          autoCrop: true,
+          autoCropWidth: 200,
+          autoCropHeight: 200,
+          fixedBox: true
+        },
+        downImg: "#",
+        previewStyle1: {},
+        previewStyle2: {},
+        previewStyle3: {},
+        previewStyle4: {},
+        code0: '',
+        code1: '',
+        code2: '',
+        code3: '',
+        preview3: '',
+      };
+    },
+    methods: {
+      changeImg() {
+        this.option.img = this.lists[~~(Math.random() * this.lists.length)].img;
+      },
+      startCrop() {
+        // start
+        this.crap = true;
+        this.$refs.cropper.startCrop();
+      },
+      stopCrop() {
+        //  stop
+        this.crap = false;
+        this.$refs.cropper.stopCrop();
+      },
+      clearCrop() {
+        // clear
+        this.$refs.cropper.clearCrop();
+      },
+      refreshCrop() {
+        // clear
+        this.$refs.cropper.refresh();
+      },
+      changeScale(num) {
+        num = num || 1;
+        this.$refs.cropper.changeScale(num);
+      },
+      rotateLeft() {
+        this.$refs.cropper.rotateLeft();
+      },
+      rotateRight() {
+        this.$refs.cropper.rotateRight();
+      },
+      finish(type) {
+        if (type === "blob") {
+          this.$refs.cropper.getCropBlob(data => {
+            var img = window.URL.createObjectURL(data);
+            this.model = true;
+            this.modelSrc = img;
+          });
+        } else {
+          this.$refs.cropper.getCropData(data => {
+            this.model = true;
+            this.modelSrc = data;
+          });
+        }
+      },
+      // 实时预览函数
+      realTime(data) {
+        var previews = data;
+        var h = 0.5;
+        var w = 0.2;
+
+        this.previewStyle1 = {
+          width: previews.w + "px",
+          height: previews.h + "px",
+          overflow: "hidden",
+          margin: "0",
+          zoom: h
+        };
+
+        this.previewStyle2 = {
+          width: previews.w + "px",
+          height: previews.h + "px",
+          overflow: "hidden",
+          margin: "0",
+          zoom: w
+        };
+
+        this.previewStyle3 = {
+          width: previews.w + "px",
+          height: previews.h + "px",
+          overflow: "hidden",
+          margin: "0",
+          zoom: (100 / previews.w)
+        };
+
+        this.previewStyle4 = {
+          width: previews.w + "px",
+          height: previews.h + "px",
+          overflow: "hidden",
+          margin: "0",
+          zoom: (100 / previews.h)
+        };
+
+        this.previews = data;
+      },
+
+      finish2(type) {
+        this.$refs.cropper2.getCropData(data => {
+          this.model = true;
+          this.modelSrc = data;
+        });
+      },
+      finish3(type) {
+        this.$refs.cropper3.getCropData(data => {
+          this.model = true;
+          this.modelSrc = data;
+        });
+      },
+      down(type) {
+        // 输出
+        if (type === "blob") {
+          this.$refs.cropper.getCropBlob(data => {
+            this.downImg = window.URL.createObjectURL(data);
+            if (window.navigator.msSaveBlob) {
+              var blobObject = new Blob([data]);
+              window.navigator.msSaveBlob(blobObject, "demo.png");
+            } else {
+              this.$nextTick(() => {
+                this.$refs.downloadDom.click();
+              });
+            }
+          });
+        } else {
+          this.$refs.cropper.getCropData(data => {
+            this.downImg = data;
+            if (window.navigator.msSaveBlob) {
+              var blobObject = new Blob([data]);
+              window.navigator.msSaveBlob(blobObject, "demo.png");
+            } else {
+              this.$nextTick(() => {
+                this.$refs.downloadDom.click();
+              });
+            }
+          });
+        }
+      },
+
+      uploadImg(e, num) {
+        //上传图片
+        // this.option.img
+        var file = e.target.files[0];
+        if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
+          alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
+          return false;
+        }
+        var reader = new FileReader();
+        reader.onload = e => {
+          let data;
+          if (typeof e.target.result === "object") {
+            // 把Array Buffer转化为blob 如果是base64不需要
+            data = window.URL.createObjectURL(new Blob([e.target.result]));
+          } else {
+            data = e.target.result;
+          }
+          if (num === 1) {
+            this.option.img = data;
+          } else if (num === 2) {
+            this.example2.img = data;
+          }
+          this.$refs.uploadImg.value = ''
+        };
+        // 转化为blob
+        reader.readAsArrayBuffer(file);
+      },
+      imgLoad(msg) {
+        console.log(msg);
+      },
+
+      cropMoving(data) {
+        this.option.cropData = data;
+      }
+    },
+    components: {
+      VueCropper
+    },
+    mounted() {
+      this.changeImg();
+      var list = [].slice.call(document.querySelectorAll("pre code"));
+      list.forEach((val, index) => {
+        hljs.highlightBlock(val);
+      });
+    }
+  };
+</script>
+
+<style scoped>
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
+  .content {
+    margin: auto;
+    max-width: 1200px;
+    margin-bottom: 100px;
+  }
+
+  .test-button {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .btn {
+    display: inline-block;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #c0ccda;
+    color: #1f2d3d;
+    text-align: center;
+    box-sizing: border-box;
+    outline: none;
+    margin: 20px 10px 0px 0px;
+    padding: 9px 15px;
+    font-size: 14px;
+    border-radius: 4px;
+    color: #fff;
+    background-color: #50bfff;
+    border-color: #50bfff;
+    transition: all 0.2s ease;
+    text-decoration: none;
+    user-select: none;
+  }
+
+  .des {
+    line-height: 30px;
+  }
+
+  code.language-html {
+    padding: 10px 20px;
+    margin: 10px 0px;
+    display: block;
+    background-color: #333;
+    color: #fff;
+    overflow-x: auto;
+    font-family: Consolas, Monaco, Droid, Sans, Mono, Source, Code, Pro, Menlo,
+    Lucida, Sans, Type, Writer, Ubuntu, Mono;
+    border-radius: 5px;
+    white-space: pre;
+  }
+
+  .show-info {
+    margin-bottom: 50px;
+  }
+
+  .show-info h2 {
+    line-height: 50px;
+  }
+
+  .title {
+    display: block;
+    text-decoration: none;
+    text-align: center;
+    line-height: 1.5;
+    margin: 20px 0px;
+    background-image: -webkit-linear-gradient(
+      left,
+      #3498db,
+      #f47920 10%,
+      #d71345 20%,
+      #f7acbc 30%,
+      #ffd400 40%,
+      #3498db 50%,
+      #f47920 60%,
+      #d71345 70%,
+      #f7acbc 80%,
+      #ffd400 90%,
+      #3498db
+    );
+    color: transparent;
+    -webkit-background-clip: text;
+    background-size: 200% 100%;
+    animation: slide 5s infinite linear;
+    font-size: 40px;
+  }
+
+  .test {
+    height: 500px;
+  }
+
+  .model {
+    position: fixed;
+    z-index: 10;
+    width: 100vw;
+    height: 100vh;
+    overflow: auto;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.8);
+  }
+
+  .model-show {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+    height: 100vh;
+    text-align: center;
+  }
+
+  .model img {
+    display: block;
+    margin: auto;
+    max-width: 80%;
+    width: auto;
+    user-select: none;
+    background-position: 0px 0px, 10px 10px;
+    background-size: 20px 20px;
+    background-image: linear-gradient(
+      45deg,
+      #eee 25%,
+      transparent 25%,
+      transparent 75%,
+      #eee 75%,
+      #eee 100%
+    ),
+    linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
+  }
+
+  .c-item {
+    display: block;
+    padding: 10px 0;
+    user-select: none;
+  }
+
+  .pre {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .pre-item {
+    padding-right: 20px;
+  }
+
+  @keyframes slide {
+    0% {
+      background-position: 0 0;
+    }
+    100% {
+      background-position: -100% 0;
+    }
+  }
+
+  @media screen and (max-width: 1000px) {
+    .content {
+      max-width: 90%;
+      margin: auto;
+    }
+
+    .test {
+      height: 400px;
+    }
+  }
+</style>

ant-design-vue-jeecg/src/views/jeecg/SelectDemo.vue

@@ -374,7 +374,7 @@
           </a-col>
           <a-col :span="12">输入的值(v-model)：{{ formData.jInput }}</a-col>
         </a-row>
-       <!-- <a-row :gutter="24">
+        <a-row :gutter="24">
           <a-col :span="15">
             <a-form-item label="MarkdownEditor" style="min-height: 300px">
               <j-markdown-editor v-model="content"></j-markdown-editor>
@@ -383,7 +383,7 @@
           <a-col :span="9">
             输入的值(v-model)：{{ content }}
           </a-col>
-        </a-row>-->
+        </a-row>
 
         <!-- 省市县级联 -->
         <a-row :gutter="24">
@@ -456,12 +456,14 @@
   import JMultiSelectTag from '@comp/dict/JMultiSelectTag'
   import JInput from '@comp/jeecg/JInput'
   import JAreaLinkage from '@comp/jeecg/JAreaLinkage'
+  import JMarkdownEditor from '@/components/jeecg/JMarkdownEditor/index'
   import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
 
   export default {
     name: 'SelectDemo',
     inject:['closeCurrent'],
     components: {
+      JMarkdownEditor,
       JAreaLinkage,
       JInput,
       JCategorySelect,

ant-design-vue-jeecg/src/views/jeecg/modules/JeecgOrderMainModal.vue

@@ -268,6 +268,9 @@
       },
       delRowCustom (index) {
         console.log(index)
+        let all = this.form.getFieldsValue()
+        all['jeecgOrderCustomerList'].splice(index,1);
+        this.form.setFieldsValue(all)
         this.orderMainModel.jeecgOrderCustomerList.splice(index,1);
         this.$forceUpdate();
       },
@@ -278,6 +281,9 @@
       },
       delRowTicket (index) {
         console.log(index)
+        let all = this.form.getFieldsValue()
+        all['jeecgOrderTicketList'].splice(index,1);
+        this.form.setFieldsValue(all)
         this.orderMainModel.jeecgOrderTicketList.splice(index,1);
         this.$forceUpdate();
       },