hy-dispatch-ui-v3 0.2.32 → 0.2.34

package/lib/components/hyTableForm/index.js

@@ -3,9 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tableForm = require('./tableForm.vue.js');
+var batchTableForm = require('./batchTableForm.vue.js');
+var useAppTableForm = require('./js/useAppTableForm.js');
 var handler = require('../../utils/handler.js');
 
 const HyTableForm = handler.withInstall(tableForm.default);
+const HyBatchTableForm = handler.withInstall(batchTableForm.default);
 
+exports.useAppTableForm = useAppTableForm.useAppTableForm;
+exports.HyBatchTableForm = HyBatchTableForm;
 exports.HyTableForm = HyTableForm;
 exports.default = HyTableForm;

package/lib/components/hyTableForm/js/index.js

@@ -0,0 +1,127 @@
+'use strict';
+
+var XLSX = require('xlsx');
+var dayjs = require('dayjs');
+var vue = require('vue');
+var AsyncValidator = require('async-validator');
+var elementPlus = require('element-plus');
+var index = require('../../hyForm/js/index.js');
+var useApi = require('../../../hooks/useApi.js');
+var form = require('../../../utils/form.js');
+var is = require('../../../utils/is.js');
+
+const doValidate = async (target = {}, columns = [], ruleList = {}) => {
+  const data = {};
+  let rules = {};
+  const columnMap = (columns || []).reduce((columnMap2, column) => {
+    if (index.columnShowHandler({ model: data }, column)) {
+      columnMap2[column.prop] = column;
+      rules[column.prop] = column.rules || [];
+      form.setValueByProp(data, column.prop, form.getValueByProp(target, column.prop));
+    }
+    return columnMap2;
+  }, {});
+  Object.entries(ruleList || {}).forEach(([key, citem]) => {
+    if (columnMap[key]) {
+      rules[key] = [
+        ...is.isArray(citem) ? citem : [citem],
+        ...rules[key]
+      ].filter(Boolean);
+    }
+  });
+  const validator = new AsyncValidator(rules);
+  return validator.validate(data, { firstFields: true }).then((res) => {
+    return true;
+  }).catch((error) => {
+    const { errors, fields } = error;
+    if (!errors || !fields) {
+      console.error(error);
+    }
+    return Promise.reject(errors || []);
+  });
+};
+const doReadExcel = (files, props) => {
+  return new Promise((resolve2, reject) => {
+    const { formColumns, beforeDataHandle } = props;
+    const fileReader = new FileReader();
+    fileReader.onload = (ev) => {
+      try {
+        const data = ev.target.result;
+        const workbook = XLSX.read(data, {
+          type: "binary"
+        });
+        const wsname1 = workbook.SheetNames[0];
+        const ws1 = XLSX.utils.sheet_to_json(workbook.Sheets[wsname1]);
+        let content = formColumns.reduce((content2, column) => {
+          const title = column.import ? column.import.title : column.label;
+          return content2.replace(
+            new RegExp(`"${title}":`, "g"),
+            `"${column.prop}":`
+          );
+        }, JSON.stringify(ws1));
+        let dataSource = JSON.parse(content);
+        if (beforeDataHandle) {
+          dataSource = dataSource.map((item) => beforeDataHandle(item));
+        }
+        resolve2(dataSource);
+      } catch (err) {
+        reject(err);
+      }
+    };
+    fileReader.readAsBinaryString(files[0]);
+  });
+};
+const downloadTemplateHandler = async (props) => {
+  const { templateConfig } = props;
+  const { url, fileName } = templateConfig;
+  if (!url) {
+    elementPlus.ElMessage.warning("\u8BF7\u914D\u7F6E\u4E0B\u8F7D\u6A21\u677F\u5730\u5740");
+    return;
+  }
+  const { api } = useApi.useApi();
+  try {
+    const blob = await vue.unref(api).get(url, {
+      responseType: "blob"
+    });
+    blobDownloadFn(blob, fileName).then(() => {
+      resolve();
+    });
+  } catch (err) {
+    console.error(err);
+  }
+};
+function blobDownloadFn(blob, name) {
+  return new Promise((resolve2, reject) => {
+    elementPlus.ElMessage.warning("\u5F00\u59CB\u4E0B\u8F7D");
+    const today = dayjs().format("YYYY-MM-DD HH:mm:ss");
+    const reader = new FileReader();
+    reader.readAsDataURL(blob);
+    reader.onload = function(ev) {
+      let url = null;
+      try {
+        if (window.navigator.msSaveOrOpenBlob) {
+          const blobObject = new Blob([blob]);
+          window.navigator.msSaveOrOpenBlob(blobObject, `${name}_${today}.xls`);
+        } else {
+          url = URL.createObjectURL(new Blob([blob]));
+          const a = document.createElement("a");
+          document.body.appendChild(a);
+          a.href = url;
+          a.download = `${name}_${today}.xls`;
+          a.target = "_blank";
+          a.click();
+          a.remove();
+        }
+        resolve2();
+      } catch (error) {
+        reject(error);
+      } finally {
+        if (url) URL.revokeObjectURL(url);
+      }
+    };
+  });
+}
+
+exports.doReadExcel = doReadExcel;
+exports.doValidate = doValidate;
+exports.downloadTemplateHandler = downloadTemplateHandler;

package/lib/components/hyTableForm/js/useAppTableForm.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var useAppTable = require('../../hyTable/js/useAppTable.js');
+var useAppForm = require('../../hyForm/js/useAppForm.js');
+var is = require('../../../utils/is.js');
+
+const useAppTableForm = (config = {}) => {
+  let { columns } = config || {};
+  columns = [
+    {
+      type: "expand",
+      slot: "expand",
+      expandType: "expand",
+      width: 48
+    },
+    ...columns.filter(
+      (column) => !["expand", "operator"].includes(column.type)
+    ),
+    {
+      label: "\u5BFC\u5165\u72B6\u6001",
+      prop: "validateStatus",
+      slot: "validateStatus"
+    }
+  ];
+  const { tableColumns } = useAppTable.useAppTable({ columns });
+  const { formModel, formColumns } = useAppForm.useAppForm(
+    config.formColumns,
+    config.formModel
+  );
+  formColumns.value.forEach((item) => {
+    if (is.isString(item.import)) {
+      item.import = {
+        title: item.import
+      };
+    } else {
+      item.import = {
+        title: item.label,
+        ...is.isObject(item.import) ? item.import : {}
+      };
+    }
+  });
+  return {
+    tableColumns,
+    formModel,
+    formColumns
+  };
+};
+
+exports.useAppTableForm = useAppTableForm;

package/lib/components/hyTableForm/style/batchTableForm.scss

@@ -0,0 +1,127 @@
+.hy-batch-table-form {
+  position: relative;
+  height: 100%;
+  max-height: 100vh;
+  overflow: hidden;
+  .hy-batch-table-form-upload-box {
+    height: 340px;
+    position: relative;
+    border-radius: 8px;
+    border: 1px dashed rgba(var(--hy-auxiliary));
+    box-sizing: border-box;
+    &:hover {
+      border-color: rgba(var(--hy-theme));
+    }
+    .upload-bg {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      perspective: 800px;
+      pointer-events: none;
+      overflow: hidden;
+      &::before {
+        display: block;
+        content: '';
+        position: absolute;
+        top: -50%;
+        left: -50%;
+        width: 200%;
+        height: 200%;
+        /* 绘制网格线：使用青色，透明度调低，让它融合在 #14273a 背景里 */
+        background-image:
+          /* 纵向线 */ linear-gradient(
+                90deg,
+                rgba(0, 229, 255, 0.1) 1px,
+                transparent 1px
+        ),
+          /* 横向线 */
+        linear-gradient(rgba(0, 229, 255, 0.1) 1px, transparent 1px);
+  
+        /* 网格尺寸 40px */
+        background-size: 40px 40px;
+  
+        /* 3D 倒伏效果 */
+        transform: rotateX(60deg);
+  
+        /* 动效：无限流动 */
+        animation: grid-flow 20s linear infinite;
+  
+        /* 遮罩：四周渐隐，让网格不那么生硬 */
+        mask-image: radial-gradient(
+                circle at 50% 50%,
+                black 10%,
+                transparent 80%
+        );
+        -webkit-mask-image: radial-gradient(
+                circle at 50% 50%,
+                black 10%,
+                transparent 80%
+        );
+      }
+      &::after {
+        display: block;
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: radial-gradient(
+                circle at 50% 50%,
+                rgba(0, 229, 255, 0.05) 0%,
+                transparent 70%
+        );
+      }
+    }
+  
+    .hy-el-upload {
+      width: 100%;
+      height: 100%;
+      .hy-el-upload-dragger {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        border: none;
+        &:hover {
+          border-color: var(--theme);
+          .type-icon-box {
+            transform: translateY(-10px);
+          }
+        }
+      }
+    }
+  }
+  
+  .hy-batch-table-form-step-box {
+    width: 100%;
+    height: 260px;
+    font-size: 14px;
+    margin-top: 16px;
+    padding-top: 24px;
+    border-radius: 8px;
+    background-color: rgba(var(--hy-background-2), 0.5);
+    .hy-el-step {
+      .hy-el-step__description {
+        padding-left: 0px !important;
+        padding-right: 0px !important;
+      }
+    }
+  }
+
+  .hy-batch-table-form-template-box {
+    width: 100%;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 12px;
+    padding: 0 16px 0 18px;
+    border: 1px dashed rgba(var(--hy-auxiliary), 0.5);
+    border-radius: 4px;
+    background: rgba(var(--hy-background-2), 0.5);
+  }
+}
+

package/lib/components/hyTableForm/style/tableForm.scss

@@ -0,0 +1,42 @@
+.hy-table-form {
+  display: flex;
+  flex-direction: column;
+
+  .hy-el-table-v2__row.hy-el-table-v2__row-error,
+  .hy-el-table-v2__row.hy-el-table-v2__row-error:hover {
+    outline: 1px solid rgba(var(--hy-danger-2));
+    outline-offset: -1px;
+    box-shadow: inset 0px 0px 19px 0px rgba(var(--hy-danger-2), 0.5);
+  }
+
+  .hy-table-form-tabs {
+    height: 1.875rem;
+    display: flex;
+    gap: 2px;
+    font-size: 0.875rem;
+    color: rgba(var(--hy-auxiliary));
+    border: 1px solid rgba(var(--hy-border));
+    border-radius: 4px;
+    padding: 2px;
+    font-size: 0.75rem;
+    .hy-table-form-tab-button {
+      display: flex;
+      align-items: center;
+      font-weight: bold;
+      padding: 0 0.75rem;
+      border: 1px solid transparent;
+      border-radius: 2px;
+      cursor: pointer;
+      transition: all 0.3s linear;
+      &:hover {
+        color: rgba(var(--hy-main));
+      }
+      &.is-select {
+        color: rgba(var(--hy-main));
+        background: linear-gradient(180deg, rgba(var(--hy-theme)) 0%, #2A4968 100%);
+        border-image: linear-gradient(180deg, rgba(var(--hy-theme)) 80%, rgba(var(--hy-auxiliary))) 1 1;
+      }
+    }
+  }
+}
+