epic-designer-gold 1.0.1 → 1.0.2

package/packages/ui/elementPlus/sign/sign.vue

@@ -1,348 +0,0 @@
-<script setup>
-import { computed, nextTick, onMounted, onUnmounted, ref, watch, inject } from "vue";
-import { pluginManager } from "@epic-designer/utils";
-import { ElMessage, ElMessageBox } from "element-plus";
-import axios from "axios";
-import Cookies from "js-cookie";
-const Button = pluginManager.getComponent("button");
-const Dialog = pluginManager.getComponent("Dialog");
-const emits = defineEmits(["update:modelValue"]);
-const props = defineProps({
-  componentSchema: {
-    type: Object,
-    require: true,
-    default: () => ({}),
-  },
-  modelValue: {
-    type: String,
-    default: "",
-  },
-});
-const disabled = inject("disabled", { value: false });
-watch(
-  () => props.componentSchema,
-  () => {
-    nextTick(() => {
-      // init();
-      url.value = props.modelValue;
-    });
-  },
-  { deep: true, immediate: true }
-);
-
-// const resizeObserver = new ResizeObserver((entries) => {
-//   // 处理大小变化的回调函数
-//   for (const entry of entries) {
-//     // console.log("元素大小已变化", entry.target.clientWidth);
-//     if (entry.target && entry.target.clientWidth && entry.target.clientHeight) {
-//       init();
-//     }
-//     // 在这里执行你想要的操作，比如更新数据或触发其他事件
-//   }
-// });
-const canvas = ref(null);
-const canvasWrap = ref(null);
-const context = ref();
-const stageInfo = ref("");
-
-function init() {
-  if (canvasWrap.value && canvasWrap.value?.clientHeight && canvasWrap.value?.clientWidth) {
-    canvas.value = document.getElementById(`canvas${props.componentSchema.field}`);
-    canvas.value.height = canvasWrap.value?.clientHeight || 600;
-    canvas.value.width = canvasWrap.value?.clientWidth;
-    context.value = canvas.value.getContext("2d");
-    if (props.modelValue) {
-      let image = new Image();
-      image.src = props.modelValue;
-      image.setAttribute("crossOrigin", "anonymous"); //关键
-      image.onload = () => {
-        context.value.fillStyle = context.value.createPattern(image, "repeat");
-        context.value.fillRect(0, 0, 1000, 550);
-      };
-
-      // ctx.fillStyle = ctx.createPattern(image, 'repeat') // 性质相当于css中的background-image
-      // ctx.fillRect(0, 0, 1000, 550) // 最终渲染的位置
-    }
-    context.value.lineWidth = props.componentSchema.componentProps.lineWidth || 4;
-    if (
-      props.componentSchema &&
-      props.componentSchema.componentProps &&
-      props.componentSchema.componentProps.style &&
-      props.componentSchema.componentProps.style.color
-    ) {
-      context.value.strokeStyle = props.componentSchema.componentProps.style.color;
-    }
-
-    stageInfo.value = canvas.value.getBoundingClientRect();
-  }
-}
-
-const startX = ref("");
-const startY = ref("");
-const moveX = ref("");
-const moveY = ref("");
-const points = ref([]);
-const isDown = ref(false);
-function mouseDown(ev) {
-  if (
-    disabled.value ||
-    props.componentSchema.componentProps.readonly ||
-    props.componentSchema.componentProps.disabled
-  ) {
-    return;
-  }
-  ev = ev || event;
-  ev.preventDefault();
-  let obj = {
-    x: ev.offsetX,
-    y: ev.offsetY,
-  };
-  startX.value = obj.x;
-  startY.value = obj.y;
-  // 起始一条线
-  context.value.beginPath();
-  // 把路径移动到画布中的指定点，不创建线条
-  context.value.moveTo(obj.x, obj.y);
-  // 添加一个新点，然后在画布中创建从该点到最后指定点的线条
-  context.value.lineTo(obj.x, obj.y);
-  // 绘制已定义的路径
-  context.value.stroke();
-  // 创建从当前点回到起始点的路径
-  context.value.closePath();
-  points.value.push(obj);
-  isDown.value = true;
-}
-function mouseMove(ev) {
-  if (
-    disabled.value ||
-    props.componentSchema.componentProps.readonly ||
-    props.componentSchema.componentProps.disabled
-  ) {
-    return;
-  }
-  ev = ev || event;
-  ev.preventDefault();
-  if (isDown.value) {
-    let obj = {
-      x: ev.offsetX,
-      y: ev.offsetY,
-    };
-    moveX.value = obj.x;
-    moveY.value = obj.y;
-    context.value.beginPath();
-    context.value.moveTo(startX.value, startY.value);
-    context.value.lineTo(obj.x, obj.y);
-    context.value.stroke();
-    context.value.closePath();
-    startX.value = obj.x;
-    startY.value = obj.y;
-    points.value.push(obj);
-  }
-}
-
-function mouseUp(ev) {
-  if (
-    disabled.value ||
-    props.componentSchema.componentProps.readonly ||
-    props.componentSchema.componentProps.disabled
-  ) {
-    return;
-  }
-  ev = ev || event;
-  ev.preventDefault();
-  let obj = {
-    x: ev.offsetX,
-    y: ev.offsetY,
-  };
-  context.value.beginPath();
-  context.value.moveTo(startX.value, startY.value);
-  context.value.lineTo(obj.x, obj.y);
-  context.value.stroke();
-  context.value.closePath();
-  points.value.push(obj);
-  points.value.push({ x: -1, y: -1 });
-  isDown.value = false;
-}
-
-// 清空画板
-function overwrite() {
-  ElMessageBox.confirm("重写将清空画布，请确定是否重写？", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  })
-    .then(() => {
-      context.value.clearRect(0, 0, canvas.value.width, canvas.value.height);
-      points.value = [];
-      ElMessage({
-        type: "info",
-        message: "清空成功",
-      });
-    })
-    .catch(() => {});
-}
-const url = ref("");
-async function surewrite() {
-  let urls = await uploadFile(canvas.value.toDataURL(`image/png`));
-  url.value = urls;
-  emits("update:modelValue", urls);
-  //   return canvas.value.toDataURL(`image/png`);
-}
-async function uploadFile(base64String) {
-  try {
-    let bytes = atob(base64String.split(",")[1]);
-    let ab = new ArrayBuffer(bytes.length);
-    let ia = new Uint8Array(ab);
-    for (let i = 0; i < bytes.length; i++) {
-      ia[i] = bytes.charCodeAt(i);
-    }
-    let blob = new Blob([ab], { type: "image/png" });
-    let fd = new FormData();
-    fd.append("file", blob, Date.now() + "png");
-    let res = await axios({
-      method: "post",
-      url: "https://ess-ds.com/prod-api/center-file/file/upload",
-      data: fd,
-      headers: {
-        "Content-Type": "multipart/form-data",
-        Authorization: "Bearer " + Cookies.get("Admin-Token"),
-      },
-    });
-    ElMessage({
-      type: "success",
-      message: "上传成功",
-    });
-
-    return res.data.data.url;
-  } catch (e) {
-    ElMessage({
-      type: "warning",
-      message: "上传失败",
-    });
-    dataVisible.value = false;
-  } finally {
-    dataVisible.value = false;
-  }
-}
-const dataVisible = ref(false);
-function handleCloseData() {
-  ElMessageBox.confirm("是否放弃本次签字？", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  })
-    .then(() => {
-      context.value.clearRect(0, 0, canvas.value.width, canvas.value.height);
-      points.value = [];
-      dataVisible.value = false;
-    })
-    .catch(() => {
-      return false;
-    });
-}
-function openSign() {
-  if (
-    disabled.value ||
-    props.componentSchema.componentProps.readonly ||
-    props.componentSchema.componentProps.disabled
-  ) {
-    return;
-  }
-  dataVisible.value = true;
-  if (context.value) {
-    context.value.clearRect(0, 0, canvas.value.width, canvas.value.height);
-    points.value = [];
-  }
-  nextTick(() => {
-    init();
-  });
-}
-onMounted(() => {
-  // init();
-  // resizeObserver.observe(canvasWrap.value);
-});
-onUnmounted(() => {
-  // resizeObserver.unobserve(canvasWrap.value);
-});
-defineExpose({
-  surewrite,
-});
-</script>
-
-<template>
-  <div class="sign-main">
-    <div v-if="!url" class="sign-board" @click="openSign">签字板</div>
-    <img class="sign-board" v-else :src="url" alt="" @click="openSign" />
-    <!-- 表单数据 start -->
-    <Dialog
-      v-model="dataVisible"
-      title="签字板"
-      class="w-860px"
-      width="860px"
-      style="height: 600px"
-      :before-close="handleCloseData"
-      :draggable="false"
-      modal
-    >
-      <div
-        class="sign"
-        :style="{
-          height: '100%',
-          width: '100%',
-        }"
-      >
-        <div class="canvas" ref="canvasWrap">
-          <canvas
-            :id="`canvas${props.componentSchema.field}`"
-            @mousedown="mouseDown"
-            @mousemove="mouseMove"
-            @mouseup="mouseUp"
-          ></canvas>
-        </div>
-        <div class="btn">
-          <div class="remark">
-            <!-- <span>提示：</span>
-        <span>1. 请在画板上签名</span>
-        <span>2. 签名完成后请点击确认</span>-->
-          </div>
-          <div class="btns">
-            <Button type="info" size="mini" @click="overwrite" @touch="overwrite">重写</Button>
-            <Button type="primary" size="mini" @click="surewrite" @touch="surewrite">确定</Button>
-          </div>
-        </div>
-      </div>
-    </Dialog>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.sign-board {
-  width: 300px;
-  height: 160px;
-  border: 1px dashed #999;
-  display: flex;
-  border-radius: 8px;
-  align-items: center;
-  justify-content: center;
-}
-.sign {
-  width: 100%;
-  height: calc(100%);
-  .canvas {
-    width: 100%;
-    height: calc(100% - 40px);
-    border: 1.5px solid #dcdfe6;
-    // box-shadow: 0 0 0 1px #dcdfe6;
-    border-radius: 4px;
-  }
-  .btn {
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-}
-::v-deep .el-dialog__body {
-  height: calc(100% - 48px);
-}
-</style>

package/packages/ui/elementPlus/slider/index.ts

@@ -1,234 +0,0 @@
-import { type ComponentConfigModel } from "@epic-designer/utils";
-export default {
-  component: async () => (await import("element-plus")).ElSlider,
-  groupName: "表单",
-  icon: "icon--epic--switches",
-  sort: 930,
-  defaultSchema: {
-    label: "滑块",
-    type: "slider",
-    field: "slider",
-    input: true,
-    componentProps: {
-      placement: "top-start",
-      showTooltip: true,
-    },
-  },
-  config: {
-    attribute: [
-      {
-        label: "字段名",
-        type: "input",
-        field: "field",
-      },
-      {
-        label: "标题",
-        type: "input",
-        field: "label",
-      },
-
-      {
-        label: "默认值",
-        type: "slider",
-        field: "componentProps.defaultValue",
-      },
-      {
-        label: "尺寸",
-        type: "select",
-        componentProps: {
-          placeholder: "请选择",
-          clearable: true,
-          options: [
-            {
-              label: "大号",
-              value: "large",
-            },
-            {
-              label: "中等",
-              value: "default",
-            },
-            {
-              label: "小型",
-              value: "small",
-            },
-          ],
-        },
-        field: "componentProps.size",
-      },
-      {
-        label: "最小值",
-        type: "number",
-        field: "componentProps.min",
-        componentProps: {
-          placeholder: "请输入",
-        },
-        onChange: ({ value, values, componentAttributes }) => {
-          const componentIndex = componentAttributes.value.findIndex((item) => item.field === "componentProps.max");
-          const componentConfig = componentAttributes.value[componentIndex];
-          componentConfig.componentProps = {
-            min: value,
-          };
-          if ((values.componentProps.max ?? 0) < value) {
-            values.componentProps.max = value;
-          }
-        },
-      },
-      {
-        label: "最大值",
-        type: "number",
-        field: "componentProps.max",
-        componentProps: {
-          placeholder: "请输入",
-        },
-        onChange: ({ value, values, componentAttributes }) => {
-          const componentIndex = componentAttributes.value.findIndex((item) => item.field === "componentProps.min");
-          const componentConfig = componentAttributes.value[componentIndex];
-          componentConfig.componentProps = {
-            max: value,
-          };
-          if ((values.componentProps.min ?? 0) > value) {
-            values.componentProps.min = value;
-          }
-        },
-      },
-      {
-        label: "步长",
-        type: "number",
-        field: "componentProps.step",
-        componentProps: {
-          placeholder: "请输入",
-        },
-      },
-      {
-        label: "显示间断点",
-        type: "switch",
-        field: "componentProps.showStops",
-      },
-      {
-        label: "提示信息",
-        type: "switch",
-        field: "componentProps.showTooltip",
-      },
-      {
-        label: "开启选择范围",
-        type: "switch",
-        field: "componentProps.range",
-      },
-      {
-        label: "垂直模式",
-        type: "switch",
-        field: "componentProps.vertical",
-      },
-      {
-        label: "高度",
-        type: "EInputSize",
-        field: "componentProps.height",
-        show: ({ values }) => {
-          return values.componentProps.vertical;
-        },
-      },
-      {
-        label: "显示数字框",
-        type: "switch",
-        field: "componentProps.showInput",
-        onChange: ({ value, values }) => {
-          value ? (values.componentProps.showInputControls = true) : null;
-        },
-      },
-      {
-        label: "控制按钮",
-        type: "switch",
-        field: "componentProps.showInputControls",
-        show: ({ values }) => values.componentProps.showInput,
-      },
-      {
-        label: "提示框位置",
-        type: "select",
-        defaultValue: "bottom-start",
-        componentProps: {
-          options: [
-            {
-              label: "top",
-              value: "top",
-            },
-            {
-              label: "top-start",
-              value: "top-start",
-            },
-            {
-              label: "top-end",
-              value: "top-end",
-            },
-            {
-              label: "bottom",
-              value: "bottom",
-            },
-            {
-              label: "bottom-start",
-              value: "bottom-start",
-            },
-            {
-              label: "bottom-end",
-              value: "bottom-end",
-            },
-            {
-              label: "left",
-              value: "left",
-            },
-            {
-              label: "left-start",
-              value: "left-start",
-            },
-            {
-              label: "left-end",
-              value: "left-end",
-            },
-            {
-              label: "right",
-              value: "right",
-            },
-            {
-              label: "right-start",
-              value: "right-start",
-            },
-            {
-              label: "right-end",
-              value: "right-end",
-            },
-          ],
-        },
-        field: "componentProps.placement",
-      },
-      // {
-      //   label: "禁用",
-      //   type: "switch",
-      //   field: "componentProps.disabled",
-      // },
-      // {
-      //   label: "隐藏",
-      //   type: "switch",
-      //   field: "componentProps.hidden",
-      // },
-      {
-        label: "表单校验",
-        type: "ERuleEditor",
-        layout: "vertical",
-        field: "rules",
-        describe: "校验规则需要配合表单使用",
-        componentProps: {
-          ruleType: "number",
-        },
-      },
-    ],
-    event: [
-      {
-        type: "input",
-        describe: "拖拽实时触发",
-      },
-      {
-        type: "change",
-        describe: "拖拽结束改变值时",
-      },
-    ],
-  },
-} as ComponentConfigModel;