yh-hiprint 2.3.5 → 2.4.0

package/HiprintDesigner.vue

@@ -1,86 +1,239 @@
 <template>
   <section class="hiprint-designer">
     <header class="hiprint-designer__header">
-      <el-radio-group
-        v-model="paperType"
-        @change="setPaperHandler">
-        <el-radio-button label="A3">A3</el-radio-button>
-        <el-radio-button label="A4">A4</el-radio-button>
-        <el-radio-button label="A5">A5</el-radio-button>
-        <el-radio-button label="B3">B3</el-radio-button>
-        <el-radio-button label="B4">B4</el-radio-button>
-        <el-radio-button label="B5">B5</el-radio-button>
-        <el-radio-button label="other">自定义</el-radio-button>
-      </el-radio-group>
-      <el-form
-        inline
-        v-if="paperType === 'other'">
-        <el-form-item>
-          <el-input
-            v-model="paperWidth"
-            type="number">
-            <template #prepend>宽</template>
-            <template #append>px</template>
-          </el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-input
-            v-model="paperHeight"
-            type="number">
-            <template #prepend>高</template>
-            <template #append>px</template>
-          </el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button
-            type="primary"
-            @click="setPaperHandler('other')">
-            设置
-          </el-button>
+      <div class="hiprint-designer__header_content">
+        <el-popover
+          placement="bottom-start"
+          :width="250"
+          trigger="hover">
+          <template #reference>
+            <el-button-group>
+              <el-button
+                class="paper-setting-text"
+                type="primary"
+                plain>
+                宽高：{{ paperTypeName }}
+              </el-button>
+              <el-button
+                type="primary"
+                style="padding: 8px">
+                <i
+                  style="padding: 0"
+                  class="iconfont icon-down"></i>
+              </el-button>
+            </el-button-group>
+          </template>
+          <div class="paper-setting">
+            <div class="paper-setting_types">
+              <div
+                class="paper-setting-type-item"
+                v-for="type in paperTypesObj"
+                @click="setPaperHandler(type.value)">
+                {{ type.label }}
+              </div>
+            </div>
+            <div class="paper-setting__content">
+              <el-input
+                v-model="paperWidth"
+                type="number">
+                <template #prepend>宽</template>
+                <template #append>px</template>
+              </el-input>
+              <el-input
+                v-model="paperHeight"
+                type="number">
+                <template #prepend>高</template>
+                <template #append>px</template>
+              </el-input>
+              <el-button
+                type="primary"
+                @click="setPaperHandler('other')">
+                设置
+              </el-button>
+            </div>
+          </div>
+        </el-popover>
+        <el-dropdown>
+          <el-button-group>
+            <el-button
+              class="paper-setting-text"
+              type="primary"
+              plain>
+              缩放：{{ scalePercentage }}
+            </el-button>
+            <el-button
+              type="primary"
+              style="padding: 8px">
+              <i
+                style="padding: 0"
+                class="iconfont icon-down"></i>
+            </el-button>
+          </el-button-group>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item
+                :disabled="!canZoomIn"
+                @click="zoomIn">
+                <i class="iconfont icon-zoom-out"></i>
+                缩小
+              </el-dropdown-item>
+              <el-dropdown-item
+                :disabled="!canZoomOut"
+                @click="zoomOut">
+                <i class="iconfont icon-zoom-in"></i>
+                放大
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <el-dropdown @command="onAlign">
+          <el-button-group>
+            <el-button
+              type="primary"
+              plain>
+              对齐
+            </el-button>
+            <el-button
+              type="primary"
+              style="padding: 8px">
+              <i
+                style="padding: 0"
+                class="iconfont icon-down"></i>
+            </el-button>
+          </el-button-group>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item
+                :disabled="isLessThanTwoSelected"
+                command="top">
+                顶部对齐
+              </el-dropdown-item>
+              <el-dropdown-item
+                :disabled="isLessThanTwoSelected"
+                command="middle">
+                上下居中
+              </el-dropdown-item>
+              <el-dropdown-item
+                :disabled="isLessThanTwoSelected"
+                command="bottom">
+                底部对齐
+              </el-dropdown-item>
+              <el-dropdown-item
+                :disabled="isLessThanTwoSelected"
+                command="left">
+                左对齐
+              </el-dropdown-item>
+              <el-dropdown-item
+                :disabled="isLessThanTwoSelected"
+                command="center">
+                左右居中
+              </el-dropdown-item>
+              <el-dropdown-item
+                :disabled="isLessThanTwoSelected"
+                command="right">
+                右对齐
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <el-dropdown @command="onSplit">
+          <el-button-group>
+            <el-button
+              type="primary"
+              plain>
+              分布
+            </el-button>
+            <el-button
+              type="primary"
+              style="padding: 8px">
+              <i
+                style="padding: 0"
+                class="iconfont icon-down"></i>
+            </el-button>
+          </el-button-group>
+          <template #dropdown>
+            <el-dropdown-menu class="cna-actions-dropdown">
+              <el-dropdown-item
+                :disabled="!isMoreSelected"
+                command="horizontal">
+                水平分布
+              </el-dropdown-item>
+              <el-dropdown-item
+                :disabled="!isMoreSelected"
+                command="vertical">
+                垂直分布
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <el-dropdown @command="onSize">
+          <el-button-group>
+            <el-button
+              type="primary"
+              plain>
+              尺寸
+            </el-button>
+            <el-button
+              type="primary"
+              style="padding: 8px">
+              <i
+                style="padding: 0"
+                class="iconfont icon-down"></i>
+            </el-button>
+          </el-button-group>
+          <template #dropdown>
+            <el-dropdown-menu class="cna-actions-dropdown">
+              <el-dropdown-item
+                :disabled="isLessThanTwoSelected"
+                command="width">
+                等宽
+              </el-dropdown-item>
+              <el-dropdown-item
+                :disabled="isLessThanTwoSelected"
+                command="height">
+                等高
+              </el-dropdown-item>
+              <el-dropdown-item
+                :disabled="isLessThanTwoSelected"
+                command="both">
+                大小相等
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+      <el-form inline>
+        <el-form-item label="数据源">
+          <el-select
+            placeholder="请选择数据源"
+            multiple
+            v-model="formCode"
+            collapse-tags
+            collapse-tags-tooltip>
+            <el-option
+              v-for="d in dataSourceForm"
+              :label="d.label"
+              :value="d.value"></el-option>
+          </el-select>
         </el-form-item>
       </el-form>
-      <el-input
-        class="percentage"
-        readonly
-        v-model="scalePercentage">
-        <template #prepend>
-          <el-button
-            :disabled="!canZoomIn"
-            @click="zoomIn">
-            <i class="iconfont icon-zoom-out"></i>
-          </el-button>
-        </template>
-        <template #append>
-          <el-button
-            :disabled="!canZoomOut"
-            @click="zoomOut">
-            <i class="iconfont icon-zoom-in"></i>
-          </el-button>
-        </template>
-      </el-input>
-      <el-select
-        placeholder="请选择数据源"
-        multiple
-        v-model="formCode">
-        <el-option
-          v-for="d in dataSourceForm"
-          :label="d.label"
-          :value="d.value"></el-option>
-      </el-select>
       <el-button
         type="primary"
+        text
         @click="previewPrint">
         <i class="iconfont icon-print"></i>
         预览
       </el-button>
       <el-button
         type="primary"
+        text
         @click="saveConfig">
         <i class="iconfont icon-save"></i>
         保存
       </el-button>
       <el-button
         type="danger"
+        text
         @click="clearPrint">
         <i class="iconfont icon-clear"></i>
         清空
@@ -216,7 +369,7 @@
       </section>
       <aside class="hiprint-designer__main_right">
         <div id="PrintElementOptionSetting"></div>
-        <template v-if="currentElementObjColumns.length">
+        <template v-if="selectedTableEleColumns.length">
           <div class="hiprint-designer_title">表格字段设置</div>
           <el-form
             label-position="top"
@@ -241,7 +394,7 @@
             <el-row gutter="10">
               <el-col
                 :span="12"
-                v-for="col in currentElementObjColumns">
+                v-for="col in selectedTableEleColumns">
                 <el-form-item :label="col.title">
                   <template v-if="hasDataSource">
                     <el-select v-model="col.field">
@@ -278,9 +431,10 @@
 </template>
 <script setup lang="ts">
 // @ts-nocheck
-import {onMounted, ref, onActivated, onDeactivated, computed, watch} from 'vue';
+import {onMounted, ref, onActivated, onDeactivated, computed, watch, shallowRef} from 'vue';
 import {hiprint, defaultElementTypeProvider, fontSize, scale, zIndex, panel, usePaper, useScale, useDataSource} from 'yh-hiprint';
 import {useRoute, onBeforeRouteUpdate} from 'vue-router';
+import {toValue} from '@vueuse/core';
 import {ElMessageBox, ElMessage} from 'element-plus';
 import axios from '@/libs/api.request';
 
@@ -292,9 +446,9 @@ interface HiprintTemplate {
 }
 
 const route = useRoute();
-const hiprintTemplate = ref<HiprintTemplate | null>(null);
+const hiprintTemplate = shallowRef<HiprintTemplate | null>(null);
 
-const {paperType, paperWidth, paperHeight, setPaper} = usePaper();
+const {paperType, paperTypeName, paperTypesObj, paperWidth, paperHeight, setPaper} = usePaper();
 function setPaperHandler(type) {
   setPaper(type, () => {
     hiprintTemplate.value?.setPaper(paperWidth.value, paperHeight.value);
@@ -384,6 +538,13 @@ function clearPrint() {
   hiprintTemplate.value?.clear();
 }
 
+function testUpdate() {
+  let els = hiprintTemplate.value.getSelectEls();
+  window.a = els[0];
+  a.options.top = a.options.top + 10;
+  hiprintJQuery(a.designTarget[0]).css('top', a.options.displayTop());
+}
+
 const {detailData, getDetail, listCode, dataSourceList, listColumns, formCode, formColumns, dataSourceForm, getDataSourceList} = useDataSource(axios);
 
 watch(
@@ -407,21 +568,199 @@ watch(
     immediate: true,
   }
 );
-let currentElementObj = ref(null);
-let currentElementObjColumns = computed(() => {
-  if (currentElementObj.value?.printElementType.type === 'table') {
-    return currentElementObj.value.options.columns[0]['columns'] || [];
+
+const selectedEle = shallowRef([]);
+
+const isLessThanTwoSelected = computed(() => {
+  return !selectedEle.value || selectedEle.value.length < 2;
+});
+
+const isMoreThanTwoSelected = computed(() => {
+  return selectedEle.value && selectedEle.value.length >= 2;
+});
+
+const isMoreSelected = computed(() => {
+  return selectedEle.value && selectedEle.value.length >= 3;
+});
+
+let selectedTableEle = ref(null);
+
+let selectedTableEleColumns = computed(() => {
+  if (selectedTableEle.value && selectedTableEle.value.printElementType.type === 'table') {
+    return selectedTableEle.value.options?.columns[0]['columns'] || [];
   } else {
     return [];
   }
 });
 
+function onAlign(e) {
+  switch (e) {
+    case 'top':
+      let tys = selectedEle.value.map((item) => item.options.top);
+      let tminY = Math.min(...tys);
+      selectedEle.value.forEach((item) => {
+        item.options.top = tminY;
+        hiprintJQuery(item.designTarget[0]).css('top', item.options.displayTop());
+      });
+      break;
+    case 'middle':
+      let mys = selectedEle.value.map((item) => item.options.top);
+      let mminY = Math.min(...mys);
+      let mbaseIndex = mys.indexOf(mminY);
+      let mbaseObj = selectedEle.value[mbaseIndex];
+      let baseY = mbaseObj.options.height / 2 + mbaseObj.options.top;
+      selectedEle.value.forEach((item, index) => {
+        if (mbaseIndex !== index) {
+          item.options.top = baseY - item.options.height / 2;
+          hiprintJQuery(item.designTarget[0]).css('top', item.options.displayTop());
+        }
+      });
+      break;
+    case 'bottom':
+      let bys = selectedEle.value.map((item) => item.options.top + item.options.height);
+      let bmaxY = Math.max(...bys);
+      selectedEle.value.forEach((item) => {
+        item.options.top = bmaxY - item.options.height;
+        hiprintJQuery(item.designTarget[0]).css('top', item.options.displayTop());
+      });
+      break;
+    case 'left':
+      let lxs = selectedEle.value.map((item) => item.options.left);
+      let lminX = Math.min(...lxs);
+      selectedEle.value.forEach((item) => {
+        item.options.left = lminX;
+        hiprintJQuery(item.designTarget[0]).css('left', item.options.displayLeft());
+      });
+      break;
+    case 'center':
+      let cxs = selectedEle.value.map((item) => item.options.left);
+      let cminX = Math.min(...cxs);
+      let cbaseIndex = cxs.indexOf(cminX);
+      let cbaseObj = selectedEle.value[cbaseIndex];
+      let baseX = cbaseObj.options.width / 2 + cbaseObj.options.left;
+      selectedEle.value.forEach((item, index) => {
+        if (cbaseIndex !== index) {
+          item.options.left = baseX - item.options.width / 2;
+          hiprintJQuery(item.designTarget[0]).css('left', item.options.displayLeft());
+        }
+      });
+      break;
+    case 'right':
+      let rxs = selectedEle.value.map((item) => item.options.left + item.options.width);
+      let rmaxX = Math.max(...rxs);
+      selectedEle.value.forEach((item) => {
+        item.options.left = rmaxX - item.options.width;
+        hiprintJQuery(item.designTarget[0]).css('left', item.options.displayLeft());
+      });
+      break;
+    default:
+      break;
+  }
+}
+
+function onSplit(key) {
+  switch (key) {
+    case 'horizontal':
+      let lxs = selectedEle.value.map((item) => item.options.left);
+      let rxs = selectedEle.value.map((item) => item.options.left + item.options.width);
+      let minlx = Math.min(...lxs);
+      let maxrx = Math.max(...rxs);
+      let minlxIndex = lxs.indexOf(minlx);
+      let maxrxIndex = rxs.indexOf(maxrx);
+      if (minlxIndex !== maxrxIndex) {
+        let sortCompos = selectedEle.value.sort((a, b) => {
+          return a.options.left - b.options.left;
+        });
+        let countWidth = 0;
+        sortCompos.forEach((item) => {
+          countWidth += item.options.width;
+        });
+        let countGap = maxrx - minlx - countWidth;
+        let gap = countGap / (sortCompos.length - 1);
+        sortCompos.forEach((item, index, arr) => {
+          if (index > 0 && index < arr.length - 1) {
+            let preItem = arr[index - 1];
+            item.options.left = preItem.options.left + preItem.options.width + gap;
+            hiprintJQuery(item.designTarget[0]).css('left', item.options.displayLeft());
+          }
+        });
+      } else {
+        // TODO 此处隐藏了操作提示，这一处提示是告知为什么不能进行操作的原因，不过措辞没有研究好。所以遇到这种情况暂时做静默处理吧。
+        // let obj = selectedEle.value[minlxIndex];
+        // this.$message.info(`[${obj.compName}]元素影响均匀分布计算了，请取消选中[${obj.compName}]`)
+      }
+      break;
+    case 'vertical':
+      let tys = selectedEle.value.map((item) => item.options.top);
+      let bys = selectedEle.value.map((item) => item.options.top + item.options.height);
+      let minly = Math.min(...tys);
+      let maxry = Math.max(...bys);
+      let minlyIndex = tys.indexOf(minly);
+      let maxryIndex = bys.indexOf(maxry);
+      if (minlyIndex !== maxryIndex) {
+        let sortCompos = selectedEle.value.sort((a, b) => {
+          return a.options.top - b.options.top;
+        });
+        let countHeight = 0;
+        sortCompos.forEach((item) => {
+          countHeight += item.options.height;
+        });
+        let countGap = maxry - minly - countHeight;
+        let gap = countGap / (sortCompos.length - 1);
+        sortCompos.forEach((item, index, arr) => {
+          if (index > 0 && index < arr.length - 1) {
+            let preItem = arr[index - 1];
+            item.options.top = preitem.options.top + preItem.options.height + gap;
+            hiprintJQuery(item.designTarget[0]).css('top', item.options.displayTop());
+          }
+        });
+      } else {
+        // TODO 此处隐藏了操作提示，这一处提示是告知为什么不能进行操作的原因，不过措辞没有研究好。所以遇到这种情况暂时做静默处理吧。
+        // let obj = selectedEle.value[minlxIndex];
+        // this.$message.info(`[${obj.compName}]元素影响均匀分布计算了，请取消选中[${obj.compName}]`)
+      }
+      break;
+    default:
+      break;
+  }
+}
+
+function onSize(key) {
+  switch (key) {
+    case 'width':
+      let width = selectedEle.value[0].options.width;
+      selectedEle.value.forEach((item) => {
+        item.options.width = width;
+        hiprintJQuery(item.designTarget[0]).css('width', item.options.displayWidth());
+      });
+      break;
+    case 'height':
+      let height = selectedEle.value[0].options.height;
+      selectedEle.value.forEach((item) => {
+        item.options.height = height;
+        hiprintJQuery(item.designTarget[0]).css('height', item.options.displayHeight());
+      });
+      break;
+    case 'both':
+      let {w, h} = selectedEle.value[0].rect;
+
+      selectedEle.value.forEach((item) => {
+        item.options.height = h;
+        item.options.width = w;
+        hiprintJQuery(item.designTarget[0]).css('height', item.options.displayHeight()).css('width', item.options.displayWidth());
+      });
+      break;
+    default:
+      break;
+  }
+}
+
 function tableFieldChange(val) {
-  currentElementObj.value.updateOption('field', val);
+  selectedTableEle.value.updateOption('field', val);
 }
 
 function tableColumnCancel() {
-  currentElementObj.value = null;
+  selectedTableEle.value = null;
 }
 
 function init() {
@@ -497,7 +836,9 @@ function init() {
     let template = JSON.parse(detailData.value.json) || panel;
     hiprintTemplate.value = new hiprint.PrintTemplate({
       template,
-      onImageChooseClick: (target) => {},
+      onImageChooseClick: (target) => {
+        console.log(target);
+      },
       fontList: [
         {title: '微软雅黑', value: 'Microsoft YaHei'},
         {title: '黑体', value: 'STHeitiSC-Light'},
@@ -530,11 +871,12 @@ function init() {
     }
     hiprintJQuery('.hiprint-designer').on('mousedown', '.hiprint-printElement', (e) => {
       let t = e.currentTarget;
+      selectedEle.value = hiprintTemplate.value?.getSelectEls() || [];
       let pes = hiprintTemplate.value?.editingPanel.printElements;
-      let index = pes.map((item) => item.designTarget[0]).indexOf(t);
+      let index = pes.map((item) => item.designTarget[0]).findIndex((item) => t === item);
       let pe = pes[index];
-      currentElementObj.value = pe;
-      if (pe.options.field) {
+      selectedTableEle.value = pe || null;
+      if (pe && pe.options.field) {
         listCode.value = pe.options.field;
       }
     });
@@ -605,8 +947,28 @@ async function updateTemplate(code) {
 const hasDataSource = computed(() => {
   return Array.isArray(formCode.value) ? formCode.value.length > 0 : formCode.value;
 });
+
+function wheelHandler(e: MouseEvent) {
+  console.log(e);
+  if (e.ctrlKey) {
+    const isZoomIn = e.wheelDelta < 0;
+    const isZoomOut = e.wheelDelta > 0;
+    if (isZoomIn && canZoomIn) {
+      e.preventDefault();
+      e.stopPropagation();
+      zoomIn();
+    }
+    if (isZoomOut && canZoomOut) {
+      e.preventDefault();
+      e.stopPropagation();
+      zoomOut();
+    }
+  }
+}
+
 onActivated(() => {
   updateTemplate(route.query.code);
+  window.addEventListener('wheel', wheelHandler, {passive: false});
 });
 
 onBeforeRouteUpdate((to) => {
@@ -615,6 +977,7 @@ onBeforeRouteUpdate((to) => {
 
 onDeactivated(() => {
   clearPrint();
+  window.removeEventListener('wheel', wheelHandler);
 });
 
 onMounted(async () => {
@@ -643,22 +1006,32 @@ onMounted(async () => {
       margin-right: 10px;
       margin-left: 0 !important;
     }
+    .paper-setting-text {
+      width: 100px;
+      .iconfont {
+        display: inline-block;
+        padding: 0 10px 0 20px;
+      }
+    }
     .percentage {
       width: 165px;
     }
     .el-select {
       --el-select-width: auto;
-      min-width: 100px;
+      width: 150px;
+    }
+    > .el-button {
+      padding: 5px;
     }
     .el-form-item {
       margin-bottom: 0;
       margin-right: 10px;
-      .el-input {
-        width: 140px;
-        .el-input-group__prepend,
-        .el-input-group__append {
-          padding: 0 9px;
-        }
+    }
+    &_content {
+      flex: 1;
+      > * {
+        margin-right: 10px;
+        margin-left: 0 !important;
       }
     }
   }
@@ -763,4 +1136,39 @@ onMounted(async () => {
     }
   }
 }
+
+.paper-setting {
+  display: flex;
+  .paper-setting_types {
+    width: 100px;
+    margin-right: 10px;
+    .paper-setting-type-item {
+      width: 100%;
+      text-align: center;
+      height: 40px;
+      line-height: 40px;
+      cursor: pointer;
+      &:hover {
+        background-color: var(--el-color-primary-light-9);
+      }
+    }
+  }
+  .paper-setting__content {
+    flex: 1;
+    .el-input {
+      width: 140px;
+      .el-input-group__prepend,
+      .el-input-group__append {
+        padding: 0 9px;
+      }
+    }
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+    > * {
+      width: 100%;
+      margin-bottom: 10px;
+    }
+  }
+}
 </style>