@arkxos/arkos-system 0.1.0

package/src/codeless/components/signature-pad/index.vue

@@ -0,0 +1,224 @@
+<script>
+import { defineComponent, h } from 'vue';
+import SignaturePad from 'signature_pad';
+
+export default defineComponent({
+  name: 'VueSignaturePad',
+  props: {
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    },
+    customStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    images: {
+      type: Array,
+      default: () => []
+    },
+    scaleToDevicePixelRatio: {
+      type: Boolean,
+      default: () => true
+    }
+  },
+
+  data: () => ({
+    signaturePad: {},
+    cacheImages: [],
+    signatureData: null,
+    onResizeHandler: null
+  }),
+
+  watch: {
+    options: function (nextOptions) {
+      Object.keys(nextOptions).forEach(option => {
+        if (this.signaturePad[option]) {
+          this.signaturePad[option] = nextOptions[option];
+        }
+      });
+    }
+  },
+
+  mounted() {
+    const { options } = this;
+    const canvas = this.$refs.signaturePadCanvas;
+    this.signaturePad = new SignaturePad(canvas, {
+      ...options
+    });
+
+    if (options.resizeHandler) {
+      this.resizeCanvas = options.resizeHandler.bind(this);
+    }
+
+    this.onResizeHandler = this.resizeCanvas.bind(this);
+
+    window.addEventListener('resize', this.onResizeHandler, false);
+
+    this.resizeCanvas();
+  },
+
+  beforeUnmount() {
+    if (this.onResizeHandler) {
+      window.removeEventListener('resize', this.onResizeHandler, false);
+    }
+  },
+
+  methods: {
+    resizeCanvas() {
+      this.$nextTick(() => {
+        const canvas = this.$refs.signaturePadCanvas;
+        const data = this.signaturePad.toData();
+        const ratio = this.scaleToDevicePixelRatio
+          ? Math.max(window.devicePixelRatio || 1, 1)
+          : 1;
+
+        canvas.width = canvas.offsetWidth * ratio;
+        canvas.height = canvas.offsetHeight * ratio;
+        canvas.getContext('2d').scale(ratio, ratio);
+
+        this.signaturePad.clear();
+        this.signaturePad.fromData(data);
+      })
+    },
+
+    saveSignature() {
+      const { signaturePad } = this;
+      const status = { isEmpty: false, data: undefined };
+
+      if (signaturePad.isEmpty()) {
+        return {
+          ...status,
+          isEmpty: true
+        };
+      } else {
+        this.signatureData = this.getDraw();
+
+        return {
+          ...status,
+          data: this.signatureData
+        };
+      }
+    },
+
+    getDraw() {
+      const canvas = this.$refs.signaturePadCanvas;
+      const ctx = canvas.getContext('2d');
+
+      // 获取画布的像素数据
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      const pixels = imageData.data;
+
+      // 找到非空白区域的边界
+      let minX = canvas.width; let minY = canvas.height;
+      let maxX = 0; let maxY = 0;
+
+      for (let y = 0; y < canvas.height; y++) {
+        for (let x = 0; x < canvas.width; x++) {
+          const index = (y * canvas.width + x) * 4;
+          if (pixels[index + 3] > 0) { // 如果像素不透明
+            if (x < minX) minX = x;
+            if (x > maxX) maxX = x;
+            if (y < minY) minY = y;
+            if (y > maxY) maxY = y;
+          }
+        }
+      }
+
+      // 如果没有找到非空白区域，直接返回
+      if (minX === canvas.width || minY === canvas.height) {
+        console.warn('没有找到绘画内容。');
+        return;
+      }
+
+      // 创建一个新的画布用于裁剪
+      const croppedCanvas = document.createElement('canvas');
+      croppedCanvas.width = maxX - minX;
+      croppedCanvas.height = maxY - minY;
+      const croppedCtx = croppedCanvas.getContext('2d');
+      croppedCtx.fillStyle = 'white';
+      croppedCtx.fillRect(0, 0, croppedCanvas.width, croppedCanvas.height);
+      // 将非空白区域绘制到新的画布上
+      croppedCtx.drawImage(canvas, minX, minY, croppedCanvas.width, croppedCanvas.height, 0, 0, croppedCanvas.width, croppedCanvas.height);
+
+      // 更新签名画布
+      return croppedCanvas.toDataURL();
+    },
+
+    undoSignature() {
+      const { signaturePad } = this;
+      const record = signaturePad.toData();
+
+      if (record) {
+        return signaturePad.fromData(record.slice(0, -1));
+      }
+    },
+
+    fromDataURL(data, options = {}, callback) {
+      return this.signaturePad.fromDataURL(data, options, callback);
+    },
+
+    fromData(data) {
+      return this.signaturePad.fromData(data);
+    },
+
+    toData() {
+      return this.signaturePad.toData();
+    },
+
+    lockSignaturePad() {
+      return this.signaturePad.off();
+    },
+
+    openSignaturePad() {
+      return this.signaturePad.on();
+    },
+
+    isEmpty() {
+      return this.signaturePad.isEmpty();
+    },
+
+    clearCacheImages() {
+      this.cacheImages = [];
+
+      return this.cacheImages;
+    },
+
+    clearSignature() {
+      return this.signaturePad.clear();
+    }
+  },
+
+  render() {
+    const { width, height, customStyle } = this;
+
+    return h(
+      'div',
+      {
+        style: {
+          width,
+          height,
+          ...customStyle
+        }
+      },
+      [
+        h('canvas', {
+          style: {
+            width: width,
+            height: height
+          },
+          ref: 'signaturePadCanvas'
+        })
+      ]
+    );
+  }
+});
+</script>

package/src/codeless/components/switch/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <span v-if="props.showText">{{formData[prop + '_name'] || ''}}</span>
+  <el-switch
+    v-else-if="options.length > 1"
+    v-model="formData[prop]"
+    class="cc-switch"
+    inline-prompt
+    :active-text="options[0].value"
+    :active-value="options[0].key"
+    :inactive-text="options[1].value"
+    :inactive-value="options[1].key"
+    @change="handleChange"
+  ></el-switch>
+</template>
+
+<script setup>
+import { inject, ref, watch, onMounted } from 'vue';
+
+const emit = defineEmits(['change']);
+const props = defineProps({
+  prop: {
+    type: String,
+    default: ''
+  },
+  options: [Array, String],
+  showText: Boolean,
+});
+const formData = inject('formData');
+const options = ref([]);
+
+const init = (data) => {
+  if (data.options) {
+    if (Array.isArray(data.options)) {
+      options.value = data.options;
+    } else if (typeof data.options === 'string') {
+      const optionList = [];
+      data.options.split(',').forEach(item => {
+        optionList.push({ key: item, value: item });
+      });
+      options.value = optionList;
+    }
+  }
+};
+
+const handleChange = () => {
+  emit('change');
+};
+
+watch(() => props, (data) => {
+  init(data);
+}, { deep: 1 });
+
+onMounted(() => {
+  init(props);
+});
+</script>

package/src/codeless/components/textarea/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <span v-if="props.showText">{{formData[prop] || ''}}</span>
+  <el-input
+    v-else
+    v-model="formData[prop]"
+    type="textarea"
+    :rows="rowLine || 5"
+    @change="handleChange"
+    @blur="handleBlur"
+  />
+</template>
+
+<script setup>
+import { inject } from 'vue';
+
+const emit = defineEmits(['change', 'blur']);
+const props = defineProps({
+  prop: {
+    type: String,
+    default: ''
+  },
+  showText: Boolean,
+  rowLine: {
+    type: Number,
+    default: 5
+  }
+});
+const formData = inject('formData');
+
+const handleChange = () => {
+  emit('change');
+};
+
+const handleBlur = () => {
+  emit('blur');
+};
+</script>

package/src/codeless/components/tree/index.vue

@@ -0,0 +1,244 @@
+<template>
+  <div
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+    style="width: 100%"
+  >
+    <el-input
+      v-if="inputDisabled || disabled"
+      disabled
+      v-model="message"
+    />
+    <el-input
+      v-else
+      ref="messageRef"
+      v-model="message"
+      :placeholder="messageHolder"
+      @click="messageClick"
+      @input="messageChange"
+    >
+      <template #suffix>
+        <cc-icon
+          v-if="hovering"
+          style="cursor: pointer;color: #c0c4cc"
+          @click.stop="clearInput"
+          iconId="018dca412c4ebd53fd1d"
+        />
+      </template>
+    </el-input>
+    <el-popover
+      ref="popoverRef"
+      width="—"
+      placement="bottom-start"
+      :fallback-placements="['bottom', 'right', 'left', 'top']"
+      :visible-arrow="true"
+      :visible="popoverVisible"
+      trigger="click"
+      :virtual-ref="messageRef"
+      virtual-triggering
+      @hide="popoverHide"
+    >
+      <el-scrollbar
+        wrap-class="popover-scrollbar"
+        wrap-style="min-height:0px;max-height: 400px;min-width: 300px"
+        view-style="height:100%;"
+        v-click-outside="clickOutside"
+        v-loading="loading"
+        element-loading-text="数据加载中..."
+        :noresize="false"
+      >
+        <el-row class="tree-row">
+          <el-tree
+            style="width: 100%"
+            ref="tree"
+            node-key="id"
+            :data="treeData"
+            :props="treeProps"
+            :default-expanded-keys="expandedData"
+            :check-strictly="true"
+            :filter-node-method="filterNode"
+            :expand-on-click-node="leafSelect"
+            @node-expand="nodeExpand"
+            @node-click="nodeClick"
+          ></el-tree>
+        </el-row>
+      </el-scrollbar>
+    </el-popover>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, inject, nextTick } from 'vue';
+import { useDisabled, ClickOutside as vClickOutside } from 'element-plus';
+import api from '@/http/api'
+
+const emit = defineEmits(['change'])
+const props = defineProps({
+  prop: String,
+  dataFieldId: String,
+  placeholder: {
+    type: String,
+    default: '--请选择--'
+  },
+  leafSelect: {
+    type: Boolean,
+    default: false,
+  },
+  typeSelect: {
+    type: String,
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+const formData = inject('formData');
+
+const initializing = ref(false);
+const tree = ref();
+const popoverRef = ref();
+const popoverVisible = ref(false);
+const messageHolder = ref(props.placeholder);
+const messageRef = ref();
+const message = ref('');
+const loading = ref(false);
+const selectedId = ref('');
+const selectedValue = ref('');
+const expandedData = ref([]);
+const inputDisabled = useDisabled();
+const treeData = ref([]);
+const treeProps = ref({
+  children: 'children',
+  isLeaf: 'leaf',
+  label: 'text'
+});
+const hovering = ref(false);
+
+const clearInput = () => {
+  changeValue('', '');
+};
+
+const messageClick = () => {
+  messageHolder.value = selectedValue.value || props.placeholder;
+  popoverVisible.value = true;
+  message.value = '';
+  tree.value.filter('');
+  return false;
+};
+
+const messageChange = () => {
+  tree.value.filter(message.value);
+};
+
+const clickOutside = () => {
+  popoverVisible.value = false;
+};
+
+const popoverHide = () => {
+  if (selectedValue.value !== message.value) {
+    message.value = selectedValue.value;
+  }
+};
+
+const changeValue = (id, value) => {
+  initializing.value = true;
+  formData.value[props.prop] = id;
+  selectedId.value = id;
+  selectedValue.value = value;
+  message.value = value;
+  messageHolder.value = message.value || props.placeholder;
+  emit('change');
+
+  nextTick(() => {
+    popoverVisible.value = false;
+    initializing.value = false;
+  });
+};
+
+const filterNode = (value, data) => {
+  if (!value) return true;
+  return data.text.indexOf(value) >= 0;
+};
+
+const nodeExpand = () => {
+  setTimeout(() => {
+    popoverRef.value && popoverRef.value.popperRef.popperInstanceRef.forceUpdate();
+  }, 300);
+};
+
+const nodeClick = (data, node) => {
+  if (data.disabled === true) {
+    changeValue('', '');
+    return;
+  }
+
+  if (props.typeSelect !== '' && props.typeSelect !== data.type) {
+    return;
+  }
+
+  if (!props.leafSelect || (props.leafSelect && node.isLeaf)) {
+    changeValue(data.id || '', data.text || '');
+  }
+};
+
+const loadTree = async() => {
+  const url = '/business/data-field/' + props.dataFieldId + '/tree';
+  api.post(url, props.query || {}).then(res => {
+    treeData.value = res.data.children || [];
+    expandedData.value = ['0'];
+    if (formData.value[props.prop]) {
+      expandedData.value.push(formData.value[props.prop]);
+    }
+    calcValue();
+  });
+};
+
+const calcValue = () => {
+  if (treeData.value == null || treeData.value.length <= 0) {
+    message.value = selectedId.value;
+  } else {
+    const list = findData(treeData.value, selectedId.value);
+    if (list && list.length > 0) {
+      for (let i = 0; i < list.length; i++) {
+        message.value = list[i].text;
+      }
+    } else {
+      message.value = '';
+    }
+  }
+  selectedValue.value = message.value;
+};
+
+const findData = (list, ids) => {
+  let results = [];
+  if (list === undefined || list == null || ids === undefined || ids == null) {
+    return results;
+  }
+
+  for (let i = 0; i < list.length; i++) {
+    const id = list[i].id + '';
+    if (id !== '0' && ids.indexOf(id) >= 0) {
+      results.push(list[i]);
+    }
+
+    if (list[i].children !== undefined && list[i].children != null) {
+      results = results.concat(findData(list[i].children, ids));
+    }
+  }
+
+  return results;
+};
+
+watch(() => formData.value[props.prop], (newVal) => {
+  if (initializing.value) return;
+
+  selectedId.value = newVal || '';
+  calcValue();
+});
+
+onMounted(() => {
+  selectedId.value = formData.value[props.prop] || '';
+  loadTree();
+});
+</script>