@toolspack/ttd-common 0.3.1 → 0.4.3

package/src/packages/make-label/LabelMake.vue

@@ -1,631 +0,0 @@
-<template>
-  <div class="label-view" ref="labelView" @click="getCoordinates">
-    <!--用于显示当前标签-->
-    <component
-      :is="currentView"
-      class="tag"
-      ref="currentTag"
-      :showName="activeTagObj.name"
-      :tagStyle="activeTagObj"
-      :labelId="activeTagObj.labelId"
-    ></component>
-    <!--用于渲染已打的标签( 在模板中使用es6的结构，sass 端无法加载)-->
-    <template v-for="(item,index) in singleTagData">
-      <labelItem
-        v-if="page===item.pageIndex && filterType == 0 ? true:(filterType==item.labelType)"
-        v-move="handlerMove"
-        :style="getStyleCom(item)"
-        @click.native.prevent.right="deTag(item, index, $event)"
-        :tagStyle="item"
-        :index="index"
-        :showName="item.showName"
-        :key="index"
-      >
-        <i class="labelCon" :style="getStyleCon(item)">
-          <span class="span-text">{{item.showName}}</span>
-        </i>
-        <i v-if="isclose" class="close" @click="deleteTag(item, index)">+</i>
-        <div v-if="item.labelType===1 && issize" v-size="handlerResize" class="resize-tag"></div>
-      </labelItem>
-    </template>
-    <LabelProterty ref="proterty" @change="onChange"></LabelProterty>
-  </div>
-</template>
-<script>
-// 引入标签组件
-import labelItem from './commontag.vue';
-import LabelProterty from './labelProterty.vue'
-// 引入标签组件指令
-import directive from './directive';
-// 引入标签配置（其中包含各类标签的类型（type）；标签名称（name）；标签形状（shape））
-import { labelConfig } from './config/label_config'
-import getShapSize from './config/label_size'
-
-export default {
-  name: 'TtdLabelMake',
-  props: {
-    // 是否可删除标签
-    isclose: {
-      type: [Boolean],
-      default: true,
-    },
-    // 是否可移动标签
-    ismove: {
-      type: [Boolean],
-      default: true,
-    },
-    // 是否可缩放标签
-    issize: {
-      type: [Boolean],
-      default: true,
-    },
-    // 是否可以设置属性
-    isset: {
-      type: [Boolean],
-      default: true,
-    },
-    // 当前选中标签数据对象
-    labelCurrent: {
-      type: [Object],
-    },
-    // 当前合同页码（会根据当前页码显示对应当前页码的标签）
-    page: {
-      type: [Number, String],
-      default: 1,
-    },
-    // 当前要预览的标签类型（根据需求已移除预览功能，根据需要可再添加该功能）
-    filterType: {
-      type: [Number, String],
-      default: 0,
-    },
-    // 传入已有的标签数据（如需要查看合同时，要求还能看到合同上的标签，则可传入该合同的标签数据，用于显示，并可在该合同上修改或其他编辑）
-    labelViewData: {
-      type: [Array],
-      default: () => [],
-    },
-  },
-  components: {
-    labelItem,
-    LabelProterty,
-  },
-  data() {
-    return {
-      labelConfig,
-      showLabel: {
-        showName: '',
-        labelId: '',
-      },
-      currentView: '',
-      labelData: [], // 将要提交的所有标签数据
-      activeTagObj: { // 当前的标签数据
-        name: '',
-        labelId: '',
-      },
-      mousemoveFn: null,
-      mousedownEl: null,
-      mousedonwType: '', //  size 修改大小 move 移动
-    };
-  },
-  created() {
-    this.labelData = this.labelViewData; // 组件内部维持一个标签数据（labelData）,用于显示
-    this.$emit('getLabelData', this.labelData); // 将传入的标签数据（即单独请求的该合同的标签数据）传到外部的标签数据（该数据为要提交的数据）
-  },
-  mounted() {
-    // 此动作用于点击其他区域时清除标签内动态生成的删除按钮
-    const vm = this;
-    document.onclick = () => {
-      vm.removeElementsByClass('mouse-right-el');
-    };
-    const box = this.$refs.labelView
-    const me = this
-    box.onmousemove = function (event) {
-      if (me.mousemoveFn) {
-        // 计算鼠标相对于容器的偏移量，需要递归计算
-        const lacations = me.getFollowOffset(box, event.target, {
-          left: event.offsetX,
-          top: event.offsetY,
-        })
-        me.mousemoveFn(event, lacations)
-      } else if (me.activeTagObj && me.activeTagObj.name) {
-        // 判断是否选择了标签
-        // 让当前标签跟着鼠标跑
-        // 计算鼠标相对于容器的便宜量，需要递归计算
-        const lacations = me.getFollowOffset(box, event.target, {
-          left: event.offsetX,
-          top: event.offsetY,
-        })
-        const nodeTag = me.$refs.currentTag.$el
-        if (nodeTag) {
-          box.style.cursor = 'none' // 隐藏鼠标
-          nodeTag.style.display = 'block' // 恢复拖动标签
-          nodeTag.style.left = `${lacations.left}px`
-          nodeTag.style.top = `${lacations.top}px`
-        }
-      }
-    }
-    box.onmouseup = function () {
-      // 根据mousedown的target执行不同的方法
-      console.log('box --onmouseup')
-      if (me.mousedownEl) {
-        if (me.mousedownEl.className === 'resize-tag') {
-          // 修改labelData 中的数据
-          const target = me.mousedownEl.parentNode
-          // 返回字符串的 index
-          const index = target.getAttribute('index')
-
-          console.log(`resize${index}`, `${target.offsetWidth}--${target.offsetHeight}`)
-
-          if (index) {
-            // 需要转换成Number
-            const targetLabel = me.labelData[Number(index)]
-            // 如果找到对应的labelData的值，则修改
-            if (targetLabel) {
-              targetLabel.labelWidth = target.offsetWidth;
-              targetLabel.labelHigh = target.offsetHeight;
-              if (targetLabel.styleObj) {
-                targetLabel.styleObj.width = `${target.offsetWidth}px`;
-                targetLabel.styleObj.height = `${target.offsetHeight}px`;
-              }
-            }
-          }
-        } else {
-          // 返回字符串的 index
-          const index = me.mousedownEl.getAttribute('index')
-          // console.log(`move${index}`, me.mousedownEl.offsetTop)
-          if (index) {
-            // 需要转换成Number
-            const targetLabel = me.labelData[Number(index)]
-            // 如果找到对应的labelData的值，则修改
-            if (targetLabel) {
-              targetLabel.xAxis = me.mousedownEl.offsetLeft
-
-              let yAxis = ''
-              if (targetLabel.labelType === 1) {
-                yAxis = me.mousedownEl.offsetTop + 7
-              } else {
-                yAxis = me.mousedownEl.offsetTop + targetLabel.labelHigh
-              }
-
-              targetLabel.yAxis = yAxis
-              if (targetLabel.styleObj) {
-                targetLabel.styleObj.top = `${me.mousedownEl.offsetTop}px`
-                targetLabel.styleObj.left = `${me.mousedownEl.offsetLeft}px`
-              }
-            }
-          }
-        }
-      }
-      me.mousemoveFn = null
-      me.mousedownEl = null
-    }
-  },
-  directives: directive,
-  watch: {
-    // 异步请求标签数据时（防止数据未请求完成时，渲染不了标签），并监听数据变化，整合到待提交标签数据中
-    labelViewData() {
-      this.labelData = this.labelViewData;
-      this.$emit('getLabelData', this.labelData);
-    },
-    labelCurrent(nItem) {
-      // 单标签，类型为number
-      // 查找 标签的形状shape
-      if (nItem) {
-        // console.log('ttd-bamboo LabelMake', nItem)
-        if (nItem.type == null) {
-        // alert('标签类型位置，请联系管理员')
-          nItem.type = 1
-        }
-        const configFilter = this.labelConfig.filter((item) => item.type === nItem.type)
-        const itemConfig = configFilter && configFilter.length ? configFilter[0] : null
-
-        if (nItem.type === 1) {
-        // 通用文本标签
-          this.activeTagObj = {
-            ...itemConfig,
-            name: nItem.optionName,
-            titleName: nItem.labelName,
-            labelId: nItem.labelId ? nItem.labelId : '',
-            ...nItem,
-          }
-        } else if (nItem.type === 2 || nItem.type === 3) {
-        // 选项标签，暂时没有
-          this.activeTagObj = {
-            ...itemConfig,
-            name: nItem.optionName,
-            titleName: nItem.labelName,
-            labelCode: nItem.labelCode,
-            labelId: nItem.labelId ? nItem.labelId : '',
-            code: nItem.code,
-          }
-        } else {
-        // 其他定义的签章标签 和文本标签
-          this.activeTagObj = {
-            ...itemConfig,
-            ...nItem,
-          }
-        }
-        this.currentView = 'labelItem';
-      }
-    },
-  },
-  computed: {
-    singleTagData() {
-      const options = [];
-      this.labelData.forEach((item) => {
-        // labelType === 2  是选项标签
-        if (item.labelType === 2) {
-          // item.labelContent.forEach((i) => {
-          //   options.push(i);
-          // });
-          // 选项标签 没有用，但为了兼容已打选项标签的数据，push第一个选项
-          // 保证singleTagData 和labelData 对应
-          options.push(item.labelContent[0]);
-        } else {
-          if (item.labelType === 1) {
-            // 文本标签的位置，修复一下，兼容历史数据
-            item.yAxis = parseInt(item.styleObj.top, 10) + 7
-          }
-          options.push(item);
-        }
-      });
-      return options;
-    },
-  },
-  methods: {
-    handlerResize(e, el) {
-      // 如果配置不能缩放，
-      if (!this.issize) {
-        return false
-      }
-      // 需要调整大小的元素
-      const sizeTarget = el.parentNode
-      this.mousedownEl = el
-      // 指定最外层容器的mousemove执行的方法
-      console.log('size mousemoveFn')
-      this.mousemoveFn = (event, locations) => {
-        if (locations.left - sizeTarget.offsetLeft > 40) {
-          sizeTarget.style.width = `${locations.left - sizeTarget.offsetLeft}px`
-        }
-        if (locations.top - sizeTarget.offsetTop > 20) {
-          sizeTarget.style.height = `${locations.top - sizeTarget.offsetTop}px`
-        }
-      }
-    },
-    handlerMove(e, el) {
-      // 如果配置不能移动，
-      if (!this.ismove) {
-        return false
-      }
-      // 拖动标签位置
-      // 指定最外层容器的mousemove执行的方法
-      this.mousedownEl = el
-      this.mousedonwType = 'move'
-      // console.log('move mousemoveFn', e.target.className)
-      if (e.target.className === 'close' || e.target.className === 'resize-tag') {
-        return
-      }
-      this.mousemoveFn = (event, locations) => {
-        el.style.left = `${locations.left - e.offsetX}px`
-        el.style.top = `${locations.top - e.offsetY}px`
-      }
-    },
-    getStyleCom(item) {
-      let width = item.labelWidth || item.labelwidth;
-      let height = item.labelHigh || item.labelheight;
-
-      if (height && String(height).indexOf('px') === -1) {
-        height += 'px'
-      }
-      if (width && String(width).indexOf('px') === -1) {
-        width += 'px'
-      }
-      item.styleObj.height = height;
-      item.styleObj.width = width;
-      return item.styleObj;
-    },
-    getStyleCon(item) {
-      const style = {}
-      if (item.fontSize) {
-        style.fontSize = `${item.fontSize}px`
-      }
-      let alginValue = 'center'
-      switch (item.alignment) {
-        case 0:
-          alginValue = 'left'
-          break;
-        case 2:
-          alginValue = 'right'
-          break;
-        default:
-          alginValue = 'center'
-      }
-      style.textAlign = alginValue
-      if (item.isMultiline) {
-        style.whiteSpace = 'normal';
-      }
-      return style
-    },
-    setLabelProperty(item, index, element) {
-      this.$refs.proterty.openDialog(item, index, element);
-    },
-    onChange(proertys, labelNode) {
-      // 将属性值，保存在 labelData中，以方便提交
-      Object.assign(labelNode.labelData, proertys)
-      // 将属性写入labelCon  的style
-      let labelCon = labelNode.element
-      if (labelCon.className !== 'labelCon') {
-        labelCon = labelNode.element.parentNode
-        if (labelCon.className !== 'labelCon') {
-          alert('系统错误，请联系管理员')
-          return false
-        }
-      }
-
-      labelCon.style.fontSize = `${proertys.fontSize < 12 ? 12 : proertys.fontSize}px`;
-      let alginValue = 'center'
-      switch (proertys.alignment) {
-        case 0:
-          alginValue = 'left'
-          break;
-        case 2:
-          alginValue = 'right'
-          break;
-        default:
-          alginValue = 'center'
-      }
-      labelCon.style.textAlign = alginValue;
-      if (proertys.isMultiline) {
-        labelCon.style.whiteSpace = 'normal';
-      }
-    },
-    getFollowOffset(root, target, offset) {
-      // console.log(offset, target.className)
-      if (root === target) {
-        return offset
-      }
-      // console.log(target.offsetLeft, target.offsetTop)
-      return this.getFollowOffset(root, target.parentNode, {
-        left: offset.left + target.offsetLeft,
-        top: offset.top + target.offsetTop,
-      })
-    },
-    removeElementsByClass(className) {
-      const elements = document.getElementsByClassName(className);
-      while (elements.length > 0) {
-        elements[0].parentNode.removeChild(elements[0]);
-      }
-    },
-
-    deTag(item, index, e) {
-      if (!this.isclose && !this.isset) {
-        return;
-      }
-      this.removeElementsByClass('mouse-right-el');
-      const x = e.offsetX;
-      const y = e.offsetY;
-      const oEm = document.createElement('ul');
-      oEm.setAttribute('class', 'mouse-right-el')
-      if (this.isclose) {
-        const elLi = document.createElement('li')
-        elLi.innerHTML = '<div class="right-dele">删 除</div>'
-        oEm.appendChild(elLi)
-      }
-      if (this.isset && item.labelType === 1) {
-        const elLi = document.createElement('li')
-        elLi.innerHTML = '<div class="right-property">属 性</div>'
-        oEm.appendChild(elLi)
-      }
-      oEm.onclick = (event) => {
-        const { className } = event.target
-        if (className === 'right-dele') {
-          this.deleteTag(item, index);
-        } else if (className === 'right-property') {
-          this.setLabelProperty(item, index, e.target)
-        }
-        // 点击后清除元素
-        e.target.removeChild(oEm);
-      };
-      oEm.style.left = `${x}px`
-      oEm.style.top = `${y}px;`
-      e.target.appendChild(oEm);
-    },
-    formatLabelValue(el, tagData) {
-      const shapeSize = getShapSize(tagData.shape)
-
-      /* *
-        前端使用的坐标系统为，左上角为零点， 后台合标签使用的是左下角为零点；
-        所以X坐标不变，Y坐标的需要计算（页面高度- y 再加上 标签的高度 ）
-        后端忽略了 标签的高度，所以我给他修复一下 yAxis= Y坐标 + 标签高度
-        文本标签不做修改
-      */
-      let yAxis = ''
-      if (tagData.type === 1) {
-        yAxis = el.offsetTop + 7
-      } else {
-        yAxis = el.offsetTop + parseInt(shapeSize.height, 10)
-      }
-
-      return {
-        xAxis: el.offsetLeft, // 距离合同区域左边的距离（xAxis）
-        yAxis, // 距离合同区域顶边的距离（yAxis）
-        labelWidth: parseInt(shapeSize.width, 10), // 标签宽度  这个后台接口要使用，必须是Number
-        labelHigh: parseInt(shapeSize.height, 10), // 标签高度  必须是Number
-        labelType: tagData.type, // 标签类型
-        labelId: tagData.labelId || '', // 标签id（仅文本标签需要，也只有文本标签会带有该字段，没有则为空）
-        showName: tagData.name, // 标签名称
-        shape: tagData.shape, // 标签形状（前端回填编辑时本地需要用于渲染，后台不需要）
-        titleName: tagData.titleName || '', // 选项标签名（如性别、爱好等多选类型），其他类型标签为空
-        labelCode: tagData.labelCode || '', // 标签编码，仅选项标签需要（前端本地逻辑需要）
-        code: tagData.code || '', // 标签编码，仅选项标签需要（后台需要）
-        sealTag: tagData.sealTag || tagData.sealDiyCode, //  仅 自定义标签（后台需要）
-        labelAlias: tagData.labelAlias, // 自定义签约用
-        stampType: tagData.stampType, // 自定义签约用
-        styleObj: { // 样式对象，用于前端本地渲染
-          position: 'absolute',
-          width: shapeSize.width,
-          height: shapeSize.height,
-          top: `${el.offsetTop}px`,
-          left: `${el.offsetLeft}px`,
-        },
-      }
-    },
-    //  点击label-view后click 的回调句柄中event.e
-    getCoordinates(event) {
-      // 清除右键按钮
-      const boxEl = this.$refs.labelView
-      const rightNnode = boxEl.querySelector('.mouse-right-el')
-      if (rightNnode) {
-        rightNnode.parentNode.removeChild(rightNnode)
-      }
-      if (this.activeTagObj && this.activeTagObj.name) {
-        const nodeTag = this.$refs.currentTag.$el
-        const labelData = this.formatLabelValue(nodeTag, this.activeTagObj)
-
-        // 恢复 容器的 鼠标指针
-        boxEl.style.cursor = 'default'
-        // 恢复currentTag的状态，
-        nodeTag.style.display = 'none'
-
-        labelData.pageIndex = this.page;
-
-        // labelType === 2  选项标签
-        if (labelData.labelType === 2) {
-          const hasCodeVal = this.labelData.find((item) => item.labelCode && (item.labelCode === labelData.labelCode));
-          if (hasCodeVal) {
-            delete labelData.labelId;
-            delete labelData.titleName;
-            hasCodeVal.labelContent.push(labelData);
-          } else {
-            const item = {};
-            item.labelCode = labelData.labelCode;
-            item.pageIndex = labelData.pageIndex;
-            item.showName = labelData.titleName;
-            item.labelType = labelData.labelType;
-            delete labelData.labelId;
-            delete labelData.titleName;
-            item.labelContent = [labelData];
-            this.labelData.push(item);
-          }
-        } else if (labelData.labelType === 1) {
-          // labelType === 1  文本标签
-          // 默认设置标签居左
-          labelData.alignment = 0
-          this.labelData.push(labelData);
-        } else {
-          this.labelData.push(labelData);
-        }
-        this.$emit('getLabelData', this.labelData);
-        // 打完一个标签后，清空当前标签的数据，为了实现每次选的标签，只能使用一次
-        this.activeTagObj = {
-          name: '',
-          labelId: '',
-        }
-      }
-    },
-
-    // 删除标签
-    deleteTag(item, index) {
-      // 删除前，再确认下
-      if (this.labelData[index]) {
-        this.labelData.splice(index, 1);
-        this.$emit('getLabelData', this.labelData);
-      }
-    },
-  },
-};
-</script>
-<style>
-.mouse-right-el {
-  position: absolute;
-  display: inline-block;
-  width: 40px;
-  text-align: center;
-  line-height: 20px;
-  font-size: 12px;
-  background: #6495ed;
-  border: 1px solid #fff;
-  border-radius: 2px;
-  cursor: pointer;
-}
-.label-shape2 .close {
-  top: 0px !important;
-  right: 0px !important;
-}
-</style>
-<style scoped>
-.label-view {
-  position: relative;
-  float: left;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.label-view .tag {
-  position: absolute;
-  z-index: 999;
-  top: 0;
-  display: none;
-}
-
-.labelCon {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  text-align: center;
-  color: #fff;
-  font-size: 12px;
-  display: table;
-  white-space: nowrap;
-}
-.labelCon .span-text {
-  display: table-cell;
-  vertical-align: middle;
-  white-space: normal;
-}
-.label-proterty {
-  position: absolute;
-  bottom: 0;
-  right: 10px;
-  color: rgb(32, 106, 212);
-  font-size: 14px;
-}
-.resize-tag {
-  width: 10px;
-  height: 10px;
-  overflow: hidden;
-  position: absolute;
-  cursor: se-resize;
-  right: 0;
-  bottom: 0;
-}
-.resize-tag:after {
-  content: "";
-  display: inline-block;
-  width: 15px;
-  height: 3px;
-  border: 1px solid #666;
-  transform-origin: center;
-  transform: rotate(135deg) translate(-2px, 5px);
-}
-.close {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  position: absolute;
-  top: -10px;
-  right: -10px;
-  background: coral;
-  color: #fff;
-  transform: rotateZ(45deg);
-  text-align: center;
-  line-height: 20px;
-  cursor: pointer;
-}
-
-i {
-  font-style: normal;
-}
-</style>

package/src/packages/make-label/commontag.vue

@@ -1,55 +0,0 @@
-<template lang="html">
-  <div :style="style" :class="className" class="label-item-box">
-    <slot></slot>
-    <div class="label-style"></div>
-  </div>
-</template>
-
-<script>
-import getShapSize from './config/label_size'
-
-export default {
-  props: {
-    // 传入当前标签的样式数据
-    tagStyle: {
-      type: [String, Object],
-      required: true,
-    },
-  },
-  data() {
-    return {
-    }
-  },
-  computed: {
-    // 根据切换的当前标签数据来设置标签样式
-    style() {
-      const sizeSttyle = getShapSize(this.tagStyle.shape)
-      return sizeSttyle
-    },
-    className() {
-      const data = (this.tagStyle)
-      return `label-shape${data.shape}`
-    },
-  },
-  methods: {
-  },
-}
-</script>
-<style lang="css" scoped>
-.label-style {
-  width: 100%;
-  height: 100%;
-  /*border-radius: 50%;*/
-  background: darkorange;
-  text-align: center;
-}
-.label-style i {
-  display: inline-block;
-  margin-top: 60px;
-  font-size: 14px;
-  color: #fff;
-}
-.label-shape2 .label-style {
-  border-radius: 50%;
-}
-</style>