@utogether/udp-core 1.0.0

package/src/views/urpt/design/ReportDesign.vue

@@ -0,0 +1,249 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2021-11-27 20:34:11
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-04-29 11:59:40
+ * @Description: 模板设计器
+-->
+<template>
+  <div>
+    <ut-grid
+      v-show="!showDesign"
+      ref="xgrid"
+      :items="formItems"
+      :columns="columns"
+      :checkMethod="onCheckMethod"
+      :url="url"
+      :events="onGridEvents"
+    />
+    <design-panel v-if="showDesign" :record="record" @onClose="onClose" />
+
+    <ut-modal-form
+      v-if="showModal"
+      :record="record"
+      :items="items"
+      :width="300"
+      :height="240"
+      data-status="update"
+      title="复制模板"
+      @confirm="onConfirm"
+      @close="showModal = false"
+    />
+  </div>
+</template>
+
+<script setup lang="tsx">
+import { nextTick, ref } from 'vue';
+import { useRender, successMessage } from '@utogether/utils';
+import { useClipboard } from '@vueuse/core';
+import to from 'await-to-js';
+import DesignPanel from './DesignPanel.vue';
+import { getServiceApi } from '../../../api';
+
+defineOptions({ name: 'ReportDesign' });
+
+const xgrid = ref(null);
+const showDesign = ref(false);
+const showModal = ref(false);
+const renderHook = useRender();
+const record = ref<IRecord>({});
+const { copy } = useClipboard();
+
+// const { $printPlugin } = useGlobal();
+// const printPlugin = $printPlugin.print;
+const serviceApi = getServiceApi();
+const formItems = [
+  { field: 'templateCode', title: 'message.file.templateCode' },
+  { field: 'templateName', title: 'message.file.templateName' }
+];
+const url = '/urpt/v1/printTemplate';
+// 列字段
+const columns = [
+  { type: 'checkbox', width: 50, align: 'center' },
+  {
+    field: 'templateCode',
+    title: 'message.file.templateCode',
+    required: true,
+    width: 150,
+    editRender: renderHook.renderInput()
+  },
+  {
+    field: 'templateName',
+    title: 'message.file.templateName',
+    required: true,
+    width: 240,
+    editRender: renderHook.renderInput()
+  },
+  {
+    field: 'paperType',
+    title: 'message.file.paperType',
+    width: 120,
+    required: true,
+    editRender: renderHook.renderDict({ code: 'SU.PRINT.PAPER', defaultValue: 'A4' }),
+    formatter: ['formatDict', 'SU.PRINT.PAPER']
+  },
+  // { field: 'createdByName', width: 120 },
+  { field: 'remarks', title: 'message.remark', minWidth: 120, editRender: renderHook.renderInput() },
+  // { field: 'enabled', width: 55, formatter: ['formatDict', 'SU.ENABLE'] },
+  {
+    field: 'operate',
+    width: 200,
+    slots: {
+      default: ({ row }) => {
+        if (!row.id) return null;
+        return (
+          <>
+            <ut-button content="design" icon="ri-quill-pen-line" onTap={() => handleDesign(row)} />
+            <ut-button
+              content="copy"
+              status="warning"
+              icon="ri-file-copy-2-fill"
+              onTap={() => handleCopy(row)}
+            />
+            <ut-button
+              content="export"
+              status="u-cyan"
+              icon="ri-folder-download-fill"
+              onTap={() => handleCopyJson(row)}
+            />
+          </>
+          // <ut-button row={row} onTap={() => handleClick(row)} />
+        );
+      }
+    }
+  }
+];
+
+const items = [
+  {
+    field: 'templateCode',
+    title: 'message.templateCode',
+    required: true,
+    itemRender: { name: '$input' },
+    span: 24
+  },
+  {
+    field: 'templateName',
+    title: 'message.templateName',
+    required: true,
+    itemRender: { name: '$input' },
+    span: 24
+  },
+  {
+    field: 'paperType',
+    width: 100,
+    required: true,
+    itemRender: renderHook.renderDict({ code: 'SU.PRINT.PAPER', defaultValue: 'A4' })
+  },
+  { field: 'remarks', title: 'message.remark', required: true, itemRender: { name: '$input' }, span: 24 }
+];
+/*
+// 启用/禁用
+const handleClick = async row => {
+  const body = clone(row, true);
+  body.enabled = +body.enabled ? '0' : '1';
+  const [err] = await to(serviceApi.put(url, [body]));
+  !err && xgrid.value.refreshData();
+};
+// 打印
+const handlePreview = async row => {
+  // const data = await serviceApi('CUS003', {});
+  const data = {
+    projectCode: '610-2210-JD54_2',
+    materialName: 'CH-183B(兆生专款)',
+    designation: '6100016266',
+    packageWay: 'packageWay',
+    barcode: 'MO-1-6122102400269',
+    manufactureOrderCode: '61-MO-22102400269',
+    manufactureOrderCode1: '101J1830100-02001',
+    packageQty: '2张/箱',
+    manufactureQty: '28',
+    unitCode: 'PCS',
+    barCode: 'L-02451-45454H',
+    cargoSpaceName: '西樵成品仓货位01',
+    additionalSpecification:
+      'CH-183B(兆生专款)， 黑色&CH-183B(兆生专款)， 黑色&座。贝壳布OS-Sq是接口路径圣诞福利, 返回开始的合法尽快核实看f.fsdanjk%jdflsl阿萨水电费&；麻辣鸡丝拉德季；； 的 富士达座。贝壳布OS-Sq是接口路径圣诞福利',
+    list: [
+      {
+        materialName: '大山里的了拉离开了',
+        remark: '1',
+        seqNo: 1,
+        unitCode: 'PCS',
+        midu: 1,
+        typeSpec: `<div>dasdasdasdas</div>`,
+        param: '测试',
+        quantity: 12,
+        r1: '1',
+        sourceOrde: '6102-1234567980',
+        r2: '2'
+      },
+      {
+        remark: '22',
+        seqNo: 2,
+        typeSpec: 1.3,
+        use: 13.33,
+        param: '测试比较长的测试比较长',
+        sourceOrde: '6102-1234567980',
+        quantity: '1'
+      },
+      {
+        remark: '333',
+        seqNo: 3,
+        unitCode: 'PCS',
+        materialName: 90,
+        use: 1.3432423,
+        content: '工序1',
+        quantity: '1',
+        sourceOrde: '6102-1234567980',
+        r2: '2',
+        typeSpec:
+          '测试很长很长的文本测试很长很长的文本测试很长很长的文本测试很长很长的文本测试很长很长的文本测试很长很长的文本测试很长很长的文本'
+      }
+    ]
+  };
+  const printTemplate = new printPlugin.PrintTemplate({ template: JSON.parse(row.templateContent) });
+  printTemplate.print(data, {}, { callback: () => {} });
+};
+*/
+// 复制
+const handleCopy = row => {
+  record.value.templateContent = row.templateContent;
+  record.value.paperType = row.paperType;
+  showModal.value = true;
+};
+// 复制模板数据
+const handleCopyJson = row => {
+  copy(row.templateContent);
+  successMessage('复制成功,快试试右键粘贴吧');
+};
+const onConfirm = async () => {
+  const [err] = await to(serviceApi.post(url, [record.value]));
+  !err && xgrid.value.refreshData();
+  showModal.value = false;
+};
+// 设计
+const handleDesign = row => {
+  record.value = row;
+  nextTick(() => {
+    showDesign.value = true;
+  });
+};
+const onGridEvents = {
+  editActived({ row }) {
+    if (row.id) {
+      columns[1].editRender.props.disabled = true;
+      xgrid.value.getInstance().refreshColumn();
+    }
+  }
+};
+
+const onCheckMethod = ({ row }) => {
+  return row.enabled !== '1';
+};
+
+const onClose = () => {
+  record.value = {};
+  showDesign.value = false;
+  xgrid.value.refreshData();
+};
+</script>