yg-yygl 0.0.1

package/src/views/sys/seal/seal-manage/index.vue

@@ -0,0 +1,413 @@
+<script setup lang="ts">
+import type {
+  BusinessFilterItem,
+  IconActionItem,
+  TableColumn,
+} from '@udp/component-ui';
+
+import type { Seal, SealQueryParams } from '../../../../api/seal/types';
+
+import { computed, h, onMounted, reactive, ref } from 'vue';
+
+import {
+  BusinessFilterBar,
+  Drawer,
+  IconActionGroup,
+  IconButton,
+  Table,
+  useTable,
+} from '@udp/component-ui';
+
+import { ElMessage, ElMessageBox, ElTooltip } from 'element-plus';
+
+import { deleteSeal, getSealList } from '../../../../api/seal';
+import { SEAL_TYPE_OPTIONS, STATUS_OPTIONS } from '../../../../api/seal/types';
+import { StatusTag, Tag } from '../../../../components/custom-tags';
+import { MainContainer } from '../../../../components/main-container';
+
+import SealForm from './components/seal-form.vue';
+
+// 搜索配置
+const searchParams = ref<SealQueryParams>({});
+const filterItems: BusinessFilterItem[] = [
+  {
+    prop: 'sealName',
+    type: 'input',
+    width: 220,
+    placeholder: '请输入印章名称',
+  },
+  {
+    prop: 'sealType',
+    label: '印章类型',
+    type: 'select',
+    placeholder: '请选择印章类型',
+    options: SEAL_TYPE_OPTIONS,
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    type: 'select',
+    placeholder: '请选择状态',
+    options: STATUS_OPTIONS,
+  },
+];
+
+// 配置 API
+const api = {
+  list: (params: any) => getSealList(params),
+  delete: (id: string) => deleteSeal(Number(id)),
+};
+
+// 使用 Hook
+const {
+  loading,
+  data,
+  pagination,
+  refresh,
+  reset,
+  search,
+  batchDelete,
+  handleSizeChange,
+  handleCurrentPageChange,
+  handleSelectionChange,
+} = useTable({
+  api,
+});
+
+// 使用标准的刷新方法
+const fetchData = () => {
+  refresh();
+};
+
+// 表格操作按钮配置
+const actionBtns: IconActionItem[] = [
+  {
+    key: 'edit',
+    label: '编辑',
+    icon: 'hx-line-built-in:edit-line',
+    onClick: (row: any) => handleEdit(row as Seal),
+  },
+  {
+    key: 'delete',
+    label: '删除',
+    icon: 'hx-line-built-in:delete-bin-6-line',
+    type: 'danger',
+    onClick: (row: any) => handleDelete(row as Seal),
+  },
+];
+
+const columns = reactive<TableColumn[]>([
+  {
+    prop: 'sealName',
+    label: '印章名称',
+    minWidth: 150,
+    showOverflowTooltip: false,
+    render: ({ row }: { row: Seal }) =>
+      h(
+        ElTooltip,
+        {
+          placement: 'top-start',
+          teleported: true,
+          popperClass: 'long-text-tooltip',
+          showAfter: 200,
+        },
+        {
+          content: () =>
+            h(
+              'div',
+              {
+                class: 'long-text-tooltip-content',
+              },
+              row.sealName || '-',
+            ),
+          default: () =>
+            h(
+              'span',
+              {
+                class: 'block max-w-[240px] truncate',
+              },
+              row.sealName || '-',
+            ),
+        },
+      ),
+  },
+  {
+    prop: 'sealType',
+    label: '印章类型',
+    minWidth: 100,
+    render: ({ row }: { row: Seal }) =>
+      h(Tag, {
+        value: row.sealTypeName || '',
+        type: 'info',
+      }),
+  },
+  {
+    prop: 'sealImage',
+    label: '印章预览',
+    minWidth: 80,
+    render: ({ row }: { row: Seal }) => {
+      if (row.sealImage) {
+        return h('img', {
+          src: row.sealImage,
+          alt: row.sealName,
+          style: 'width: 40px; height: 40px; object-fit: contain;',
+        });
+      }
+      return '无';
+    },
+  },
+  {
+    prop: 'description',
+    label: '描述',
+    minWidth: 150,
+    showOverflowTooltip: false,
+    render: ({ row }: { row: Seal }) =>
+      h(
+        ElTooltip,
+        {
+          placement: 'top-start',
+          teleported: true,
+          popperClass: 'long-text-tooltip',
+          showAfter: 200,
+        },
+        {
+          content: () =>
+            h(
+              'div',
+              {
+                class: 'long-text-tooltip-content',
+              },
+              row.description || '-',
+            ),
+          default: () =>
+            h(
+              'span',
+              {
+                class: 'block max-w-[240px] truncate',
+              },
+              row.description || '-',
+            ),
+        },
+      ),
+  },
+  { prop: 'createTime', label: '创建时间', minWidth: 180 },
+  {
+    prop: 'status',
+    label: '状态',
+    minWidth: 80,
+    render: ({ row }: { row: Seal }) =>
+      h(StatusTag, {
+        value: row.status || 0,
+      }),
+  },
+  {
+    prop: 'isDefault',
+    label: '默认印章',
+    minWidth: 100,
+    render: ({ row }: { row: Seal }) =>
+      h(Tag, {
+        value: row.isDefault === 1 ? '是' : '否',
+        type: row.isDefault === 1 ? 'success' : 'info',
+      }),
+  },
+]);
+
+const cardOptions = ref({
+  title: 'sealName',
+  icon: 'mdi:stamp',
+  columns: [
+    {
+      prop: 'sealType',
+      label: '印章类型',
+      className: 'w-full truncate',
+      render: ({ row }: { row: Seal }) =>
+        h(Tag, {
+          value: row.sealTypeName || '',
+          type: 'info',
+        }),
+    },
+    { prop: 'description', label: '描述', className: 'w-full truncate' },
+    { prop: 'createTime', label: '创建时间', className: 'w-full truncate' },
+    {
+      prop: 'status',
+      label: '状态',
+      className: 'w-full truncate',
+      render: ({ row }: { row: Seal }) =>
+        h(StatusTag, {
+          value: row.status || 0,
+        }),
+    },
+    {
+      prop: 'isDefault',
+      label: '默认印章',
+      className: 'w-full truncate',
+      render: ({ row }: { row: Seal }) =>
+        h(Tag, {
+          value: row.isDefault === 1 ? '是' : '否',
+          type: row.isDefault === 1 ? 'success' : 'info',
+        }),
+    },
+  ],
+  showActions: true,
+});
+
+// 表单相关
+const drawerVisible = ref(false);
+const currentRow = ref<Seal>();
+const formType = ref<'add' | 'edit' | 'view'>('add');
+const sealFormRef = ref<typeof SealForm>();
+
+// 方法定义
+const handleCreate = () => {
+  formType.value = 'add';
+  currentRow.value = undefined;
+  drawerVisible.value = true;
+};
+
+const handleEdit = (row: Seal) => {
+  formType.value = 'edit';
+  currentRow.value = row;
+  drawerVisible.value = true;
+};
+
+const handleDelete = async (row: Seal) => {
+  try {
+    await ElMessageBox.confirm('确定要删除这条数据吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    });
+
+    await deleteSeal(row.id);
+    ElMessage.success('删除成功');
+    fetchData();
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除失败:', error);
+      ElMessage.error('删除失败');
+    }
+  }
+};
+
+const handleFilterSearch = (params: Record<string, any>) => {
+  search(params);
+};
+
+const handleFilterReset = () => {
+  reset();
+};
+
+const handleAddSuccess = async () => {
+  const flag = await sealFormRef.value?.handleSubmit();
+  if (flag) {
+    handleDrawerClosed();
+    refresh();
+  }
+};
+
+const handleDrawerClosed = () => {
+  drawerVisible.value = false;
+  currentRow.value = undefined;
+};
+
+// 计算属性
+const drawerTitle = computed(() => {
+  switch (formType.value) {
+    case 'add': {
+      return '新建印章';
+    }
+    case 'edit': {
+      return '编辑印章';
+    }
+    case 'view': {
+      return '查看印章';
+    }
+    default: {
+      return '印章管理';
+    }
+  }
+});
+
+onMounted(() => {
+  fetchData();
+});
+</script>
+
+<template>
+  <MainContainer>
+    <div class="bg-background flex h-full w-full flex-col overflow-hidden">
+      <BusinessFilterBar
+        v-model="searchParams"
+        :items="filterItems"
+        :loading="loading"
+        @search="handleFilterSearch"
+        @reset="handleFilterReset"
+      />
+
+      <Table
+        :data="data"
+        :columns="columns"
+        :card-options="cardOptions"
+        :loading="loading"
+        :pagination="pagination"
+        show-toolbar
+        show-top-actions
+        show-pagination
+        show-action
+        :show-layout="true"
+        layout-type="table"
+        action-width="90px"
+        @refresh="refresh"
+        @selection-change="handleSelectionChange"
+        @size-change="handleSizeChange"
+        @current-page-change="handleCurrentPageChange"
+        :on-batch-delete="batchDelete"
+      >
+        <template #top-actions>
+          <div class="flex flex-wrap items-center gap-2">
+            <IconButton type="primary" icon-type="add" @click="handleCreate">
+              新建印章
+            </IconButton>
+          </div>
+        </template>
+        <template #action="{ row }">
+          <IconActionGroup :actions="actionBtns" :row="row" />
+        </template>
+        <template #card-actions="{ row }">
+          <IconActionGroup :actions="actionBtns" :row="row" />
+        </template>
+      </Table>
+    </div>
+
+    <!-- 表单抽屉 -->
+    <Drawer
+      v-model="drawerVisible"
+      :title="drawerTitle"
+      :type="formType"
+      size="900px"
+      destroy-on-close
+      :show-confirm-button="formType !== 'view'"
+      :cancel-text="formType === 'view' ? '关闭' : '取消'"
+      @confirm="handleAddSuccess"
+      @closed="handleDrawerClosed"
+    >
+      <SealForm ref="sealFormRef" :type="formType" :edit-data="currentRow" />
+    </Drawer>
+  </MainContainer>
+</template>
+
+<style scoped lang="scss">
+:global(.long-text-tooltip) {
+  max-width: min(720px, calc(100vw - 32px));
+  white-space: normal;
+  word-break: break-all;
+  overflow-wrap: anywhere;
+}
+
+:global(.long-text-tooltip-content) {
+  max-width: 100%;
+  white-space: normal;
+  word-break: break-all;
+  overflow-wrap: anywhere;
+}
+</style>

package/src/views/sys/seal/signature/components/signature-editor.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import { nextTick, onMounted, ref } from 'vue';
+
+import { ElButton } from 'element-plus';
+
+interface Props {
+  width?: number;
+  height?: number;
+  readonly?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: 400,
+  height: 150,
+  readonly: false,
+});
+
+const emits = defineEmits<{
+  change: [data: { svgData: string }];
+}>();
+
+// 组件状态
+const canvasRef = ref<HTMLCanvasElement>();
+const isDrawing = ref(false);
+const paths = ref<Array<{ type: 'move' | 'start'; x: number; y: number }>>([]);
+
+// 初始化画布
+const initCanvas = () => {
+  if (!canvasRef.value) return;
+
+  const canvas = canvasRef.value;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+
+  // 设置画布样式
+  ctx.strokeStyle = '#000000';
+  ctx.lineWidth = 2;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+};
+
+// 开始绘制
+const startDrawing = (event: MouseEvent) => {
+  if (props.readonly) return;
+
+  isDrawing.value = true;
+  const rect = canvasRef.value?.getBoundingClientRect();
+  if (!rect) return;
+
+  const x = event.clientX - rect.left;
+  const y = event.clientY - rect.top;
+
+  paths.value.push({ x, y, type: 'start' });
+  drawOnCanvas();
+};
+
+// 绘制过程
+const draw = (event: MouseEvent) => {
+  if (!isDrawing.value || props.readonly) return;
+
+  const rect = canvasRef.value?.getBoundingClientRect();
+  if (!rect) return;
+
+  const x = event.clientX - rect.left;
+  const y = event.clientY - rect.top;
+
+  paths.value.push({ x, y, type: 'move' });
+  drawOnCanvas();
+};
+
+// 结束绘制
+const stopDrawing = () => {
+  if (!isDrawing.value) return;
+
+  isDrawing.value = false;
+  generateSVG();
+};
+
+// 在画布上绘制
+const drawOnCanvas = () => {
+  const canvas = canvasRef.value;
+  const ctx = canvas?.getContext('2d');
+  if (!canvas || !ctx) return;
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  let isNewPath = true;
+  paths.value.forEach((point, index) => {
+    if (point.type === 'start' || isNewPath) {
+      ctx.beginPath();
+      ctx.moveTo(point.x, point.y);
+      isNewPath = false;
+    } else {
+      ctx.lineTo(point.x, point.y);
+      ctx.stroke();
+    }
+
+    // 检查下一个点是否是新路径的开始
+    const nextPoint = paths.value[index + 1];
+    if (nextPoint && nextPoint.type === 'start') {
+      isNewPath = true;
+    }
+  });
+};
+
+// 生成SVG
+const generateSVG = () => {
+  if (paths.value.length === 0) {
+    emits('change', { svgData: '' });
+    return;
+  }
+
+  let pathData = '';
+  let isNewPath = true;
+
+  paths.value.forEach((point, index) => {
+    if (point.type === 'start' || isNewPath) {
+      pathData += `M ${point.x} ${point.y} `;
+      isNewPath = false;
+    } else {
+      pathData += `L ${point.x} ${point.y} `;
+    }
+
+    // 检查下一个点是否是新路径的开始
+    const nextPoint = paths.value[index + 1];
+    if (nextPoint && nextPoint.type === 'start') {
+      isNewPath = true;
+    }
+  });
+
+  const svgData = `<svg width="${props.width}" height="${props.height}" xmlns="http://www.w3.org/2000/svg">
+    <path d="${pathData}" stroke="#000000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>`;
+
+  emits('change', { svgData });
+};
+
+// 清空画布
+const clearCanvas = () => {
+  if (props.readonly) return;
+
+  paths.value = [];
+  const canvas = canvasRef.value;
+  const ctx = canvas?.getContext('2d');
+  if (canvas && ctx) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+  }
+  emits('change', { svgData: '' });
+};
+
+// 从SVG加载
+const loadFromSVG = (svgData: string) => {
+  console.log('loadFromSVG 被调用:', svgData);
+
+  if (!svgData) {
+    console.log('SVG数据为空，清空画布');
+    clearCanvas();
+    return;
+  }
+
+  // 简单的SVG解析，提取path数据
+  const pathMatch = svgData.match(/d="([^"]+)"/);
+  if (!pathMatch) {
+    console.log('SVG格式错误，没有找到path数据');
+    return;
+  }
+
+  const pathData = pathMatch[1];
+  if (!pathData) {
+    console.log('路径数据为空');
+    return;
+  }
+
+  const commands = pathData.trim().split(/(?=[ML])/);
+
+  paths.value = [];
+
+  commands.forEach((command) => {
+    const cmd = command.trim();
+    if (cmd.startsWith('M')) {
+      const coords = cmd.slice(1).trim().split(' ');
+      const x = Number.parseFloat(coords[0] || '0');
+      const y = Number.parseFloat(coords[1] || '0');
+      paths.value.push({ x, y, type: 'start' });
+    } else if (cmd.startsWith('L')) {
+      const coords = cmd.slice(1).trim().split(' ');
+      const x = Number.parseFloat(coords[0] || '0');
+      const y = Number.parseFloat(coords[1] || '0');
+      paths.value.push({ x, y, type: 'move' });
+    }
+  });
+
+  console.log('解析的路径数据:', paths.value);
+
+  nextTick(() => {
+    drawOnCanvas();
+    console.log('画布重绘完成');
+  });
+};
+
+// 检查是否为空
+const isEmpty = () => {
+  return paths.value.length === 0;
+};
+
+// 组件挂载后初始化
+onMounted(() => {
+  initCanvas();
+});
+
+// 暴露方法
+defineExpose({
+  loadFromSVG,
+  isEmpty,
+  clearCanvas,
+});
+</script>
+
+<template>
+  <div>
+    <div class="relative inline-block">
+      <canvas
+        ref="canvasRef"
+        :width="width"
+        :height="height"
+        class="rounded border border-gray-300 bg-white transition-colors duration-200"
+        :class="[
+          readonly
+            ? 'cursor-default bg-gray-50'
+            : 'cursor-crosshair hover:border-blue-500',
+        ]"
+        @mousedown="startDrawing"
+        @mousemove="draw"
+        @mouseup="stopDrawing"
+        @mouseleave="stopDrawing"
+      ></canvas>
+      <div class="flex w-full items-center justify-between py-2">
+        <div class="text-xs text-gray-500">请在上方区域手写您的签名</div>
+        <ElButton v-if="!readonly" @click="clearCanvas"> 清空 </ElButton>
+      </div>
+    </div>
+  </div>
+</template>