el-plus2 0.0.0

package/lib/components/searchListPage/src/use-search-list-page.js

@@ -0,0 +1,179 @@
+'use strict';
+
+var vue = require('vue');
+
+const useSearchListPage = (props) => {
+  const { calcTableHeight, tableProps, tableRef } = useTable(props);
+  const { formProps, validate, resetFields, formRef } = useForm(props, {
+    calcTableHeight
+  });
+  const { buttonsProps, searchButtons, search, reset } = useButtons(props, {
+    validate,
+    resetFields,
+    tableRef
+  });
+  return {
+    formProps,
+    tableProps,
+    buttonsProps,
+    searchButtons,
+    search,
+    reset,
+    tableRef,
+    formRef
+  };
+};
+const useTable = (props) => {
+  const instanceName = "tableRef";
+  const tableRef = vue.useTemplateRef(instanceName);
+  const tableHeight = vue.ref(window.innerHeight);
+  const tableProps = vue.computed(() => {
+    return {
+      ref: instanceName,
+      columns: props.columns,
+      showPagination: true,
+      height: tableHeight.value,
+      showIndexCol: props.showIndexCol,
+      showSelectionCol: props.showSelectionCol,
+      actionButtons: props.actionButtons,
+      linkProps: props.linkProps,
+      api: props.api,
+      reqData: props.formData,
+      ...props.tableProps
+    };
+  });
+  const calcTableHeight = () => {
+    const topHeight = document.getElementById("top").offsetHeight;
+    const middleHeight = document.getElementById("middle").offsetHeight;
+    let paginationHeight = 0;
+    if (tableProps.value.showPagination) {
+      paginationHeight = document.querySelector(".el-pagination").offsetHeight + 12;
+    }
+    const frameDistance = 40;
+    tableHeight.value = window.innerHeight - topHeight - middleHeight - paginationHeight - frameDistance - props.offsetTop;
+  };
+  vue.onMounted(calcTableHeight);
+  return {
+    tableRef,
+    tableProps,
+    calcTableHeight
+  };
+};
+const useForm = (props, { calcTableHeight }) => {
+  const instanceName = "formRef";
+  const formRef = vue.useTemplateRef(instanceName);
+  const formProps = vue.computed(() => {
+    return {
+      ref: instanceName,
+      formItemList: props.formItemList,
+      isShowFold: true,
+      modelValue: props.formData,
+      ...props.formProps,
+      onToggleStatus: () => {
+        setTimeout(() => {
+          calcTableHeight();
+        }, 0);
+      }
+    };
+  });
+  const validate = () => {
+    return formRef.value.validate();
+  };
+  const resetFields = (props2) => {
+    return formRef.value.resetFields(props2);
+  };
+  const clearValidate = (props2) => {
+    return formRef.value.clearValidate(props2);
+  };
+  return {
+    formProps,
+    formRef,
+    validate,
+    resetFields,
+    clearValidate
+  };
+};
+const useButtons = (props, { validate, resetFields, tableRef }) => {
+  const defaultButtons = [
+    {
+      name: "\u65B0\u589E",
+      prop: "add",
+      show: () => {
+        return !!props.add;
+      },
+      onClick: () => {
+        props.add?.();
+      }
+    },
+    {
+      name: "\u6A21\u7248\u4E0B\u8F7D",
+      prop: "templateDownload",
+      show: !!props.templateDownloadApi
+    },
+    {
+      name: "\u5BFC\u5165",
+      prop: "import",
+      show: !!props.importApi
+    },
+    {
+      name: "\u5BFC\u51FA",
+      prop: "export",
+      show: !!props.exportApi
+    }
+  ];
+  props.leftButtons?.forEach((item) => {
+    const defaultIndex = defaultButtons.findIndex(
+      (item1) => item1.prop === item.prop
+    );
+    if (defaultIndex !== -1) {
+      defaultButtons[defaultIndex] = {
+        ...defaultButtons[defaultIndex],
+        ...item
+      };
+    }
+  });
+  const list = defaultButtons.concat(props.leftButtons);
+  list.forEach((item) => {
+    if (item.onClick) {
+      const clickFn = item.onClick;
+      item.onClick = () => {
+        const rows = tableRef.value.elTableRef.getSelectionRows();
+        clickFn(rows);
+      };
+    }
+  });
+  const buttonsProps = vue.computed(() => {
+    return {
+      list,
+      ...props.buttonsProps
+    };
+  });
+  const search = async () => {
+    await validate();
+    tableRef.value.search(true);
+  };
+  const reset = async () => {
+    resetFields();
+    search();
+  };
+  const searchButtons = [
+    {
+      name: "\u641C\u7D22",
+      type: "primary",
+      onClick: search
+    },
+    {
+      name: "\u6E05\u7A7A",
+      onClick: reset
+    }
+  ];
+  return {
+    buttonsProps,
+    searchButtons,
+    search,
+    reset
+  };
+};
+
+exports.useSearchListPage = useSearchListPage;
+//# sourceMappingURL=use-search-list-page.js.map

package/lib/components/searchListPage/src/use-search-list-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-search-list-page.js","sources":["../../../../../../packages/components/searchListPage/src/use-search-list-page.ts"],"sourcesContent":["import { ref, onMounted, computed, useTemplateRef } from 'vue'\nimport type { SearchListPageProps } from './searchListPage'\nimport type { ButtonsProps } from '@el-plus/components/buttons'\nimport type { FormInstance } from '@el-plus/components/form'\nimport type { TableInstance } from '@el-plus/components/table'\nimport type { FormItemProp } from 'element-plus'\nexport const useSearchListPage = (props: SearchListPageProps) => {\n  const { calcTableHeight, tableProps, tableRef } = useTable(props)\n  const { formProps, validate, resetFields, formRef } = useForm(props, {\n    calcTableHeight,\n  })\n  const { buttonsProps, searchButtons, search, reset } = useButtons(props, {\n    validate,\n    resetFields,\n    tableRef,\n  })\n  return {\n    formProps,\n    tableProps,\n    buttonsProps,\n    searchButtons,\n    search,\n    reset,\n    tableRef,\n    formRef,\n  }\n}\nconst useTable = (props: SearchListPageProps) => {\n  const instanceName = 'tableRef'\n  const tableRef = useTemplateRef<TableInstance>(instanceName)\n  const tableHeight = ref(window.innerHeight)\n  const tableProps = computed(() => {\n    return {\n      ref: instanceName,\n      columns: props.columns,\n      showPagination: true,\n      height: tableHeight.value,\n      showIndexCol: props.showIndexCol,\n      showSelectionCol: props.showSelectionCol,\n      actionButtons: props.actionButtons,\n      linkProps: props.linkProps,\n      api: props.api,\n      reqData: props.formData,\n      ...props.tableProps,\n    }\n  })\n  const calcTableHeight = () => {\n    const topHeight = (document.getElementById('top') as HTMLElement)\n      .offsetHeight\n    const middleHeight = (document.getElementById('middle') as HTMLElement)\n      .offsetHeight\n    let paginationHeight = 0\n    if (tableProps.value.showPagination) {\n      paginationHeight =\n        (document.querySelector('.el-pagination') as HTMLElement).offsetHeight +\n        12\n    }\n    const frameDistance = 40\n    tableHeight.value =\n      window.innerHeight -\n      topHeight -\n      middleHeight -\n      paginationHeight -\n      frameDistance -\n      props.offsetTop!\n  }\n\n  onMounted(calcTableHeight)\n  return {\n    tableRef,\n    tableProps,\n    calcTableHeight,\n  }\n}\nconst useForm = (props: SearchListPageProps, { calcTableHeight }) => {\n  const instanceName = 'formRef'\n  const formRef = useTemplateRef<FormInstance>(instanceName)\n  const formProps = computed(() => {\n    return {\n      ref: instanceName,\n      formItemList: props.formItemList,\n      isShowFold: true,\n      modelValue: props.formData,\n      ...props.formProps,\n      onToggleStatus: () => {\n        setTimeout(() => {\n          calcTableHeight()\n        }, 0) // 等展开后计算表格高度\n      },\n    }\n  })\n  // 校验\n  const validate = () => {\n    return formRef.value!.validate()\n  }\n  // 重置校验\n  const resetFields = (props: FormItemProp) => {\n    return formRef.value!.resetFields(props)\n  }\n  // 清理某个字段的表单验证信息\n  const clearValidate = (props: FormItemProp) => {\n    return formRef.value!.clearValidate(props)\n  }\n  return {\n    formProps,\n    formRef,\n    validate,\n    resetFields,\n    clearValidate,\n  }\n}\nconst useButtons = (\n  props: SearchListPageProps,\n  { validate, resetFields, tableRef },\n) => {\n  const defaultButtons: ButtonsProps['list'] = [\n    {\n      name: '新增',\n      prop: 'add',\n      show: () => {\n        return !!props.add\n      },\n      onClick: () => {\n        props.add?.()\n      },\n    },\n    {\n      name: '模版下载',\n      prop: 'templateDownload',\n      show: !!props.templateDownloadApi,\n    },\n    {\n      name: '导入',\n      prop: 'import',\n      show: !!props.importApi,\n    },\n    {\n      name: '导出',\n      prop: 'export',\n      show: !!props.exportApi,\n    },\n  ]\n  props.leftButtons?.forEach((item) => {\n    const defaultIndex = defaultButtons.findIndex(\n      (item1) => item1.prop === item.prop,\n    )\n    if (defaultIndex !== -1) {\n      defaultButtons[defaultIndex] = {\n        ...defaultButtons[defaultIndex],\n        ...item,\n      }\n    }\n  })\n  const list = defaultButtons.concat(props.leftButtons!)\n  list.forEach((item) => {\n    if (item.onClick) {\n      const clickFn = item.onClick\n      item.onClick = () => {\n        // 增加选中项\n        const rows = tableRef.value.elTableRef.getSelectionRows()\n        clickFn(rows)\n      }\n    }\n  })\n\n  const buttonsProps = computed(() => {\n    return {\n      list,\n      ...props.buttonsProps,\n    }\n  })\n  // 搜索\n  const search = async () => {\n    await validate()\n    tableRef.value.search(true)\n  }\n  // 清空\n  const reset = async () => {\n    resetFields()\n    search()\n  }\n  const searchButtons: ButtonsProps['list'] = [\n    {\n      name: '搜索',\n      type: 'primary',\n      onClick: search,\n    },\n    {\n      name: '清空',\n      onClick: reset,\n    },\n  ]\n  return {\n    buttonsProps,\n    searchButtons,\n    search,\n    reset,\n  }\n}\n"],"names":["useTemplateRef","ref","computed","onMounted","props"],"mappings":";;;;AAMO,MAAM,iBAAA,GAAoB,CAAC,KAAA,KAA+B;AAC/D,EAAA,MAAM,EAAE,eAAA,EAAiB,UAAA,EAAY,QAAA,EAAS,GAAI,SAAS,KAAK,CAAA;AAChE,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,aAAa,OAAA,EAAQ,GAAI,QAAQ,KAAA,EAAO;AAAA,IACnE;AAAA,GACD,CAAA;AACD,EAAA,MAAM,EAAE,YAAA,EAAc,aAAA,EAAe,QAAQ,KAAA,EAAM,GAAI,WAAW,KAAA,EAAO;AAAA,IACvE,QAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACD,CAAA;AACD,EAAA,OAAO;AAAA,IACL,SAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACF;AACF;AACA,MAAM,QAAA,GAAW,CAAC,KAAA,KAA+B;AAC/C,EAAA,MAAM,YAAA,GAAe,UAAA;AACrB,EAAA,MAAM,QAAA,GAAWA,mBAA8B,YAAY,CAAA;AAC3D,EAAA,MAAM,WAAA,GAAcC,OAAA,CAAI,MAAA,CAAO,WAAW,CAAA;AAC1C,EAAA,MAAM,UAAA,GAAaC,aAAS,MAAM;AAChC,IAAA,OAAO;AAAA,MACL,GAAA,EAAK,YAAA;AAAA,MACL,SAAS,KAAA,CAAM,OAAA;AAAA,MACf,cAAA,EAAgB,IAAA;AAAA,MAChB,QAAQ,WAAA,CAAY,KAAA;AAAA,MACpB,cAAc,KAAA,CAAM,YAAA;AAAA,MACpB,kBAAkB,KAAA,CAAM,gBAAA;AAAA,MACxB,eAAe,KAAA,CAAM,aAAA;AAAA,MACrB,WAAW,KAAA,CAAM,SAAA;AAAA,MACjB,KAAK,KAAA,CAAM,GAAA;AAAA,MACX,SAAS,KAAA,CAAM,QAAA;AAAA,MACf,GAAG,KAAA,CAAM;AAAA,KACX;AAAA,EACF,CAAC,CAAA;AACD,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,MAAM,SAAA,GAAa,QAAA,CAAS,cAAA,CAAe,KAAK,CAAA,CAC7C,YAAA;AACH,IAAA,MAAM,YAAA,GAAgB,QAAA,CAAS,cAAA,CAAe,QAAQ,CAAA,CACnD,YAAA;AACH,IAAA,IAAI,gBAAA,GAAmB,CAAA;AACvB,IAAA,IAAI,UAAA,CAAW,MAAM,cAAA,EAAgB;AACnC,MAAA,gBAAA,GACG,QAAA,CAAS,aAAA,CAAc,gBAAgB,CAAA,CAAkB,YAAA,GAC1D,EAAA;AAAA,IACJ;AACA,IAAA,MAAM,aAAA,GAAgB,EAAA;AACtB,IAAA,WAAA,CAAY,QACV,MAAA,CAAO,WAAA,GACP,YACA,YAAA,GACA,gBAAA,GACA,gBACA,KAAA,CAAM,SAAA;AAAA,EACV,CAAA;AAEA,EAAAC,aAAA,CAAU,eAAe,CAAA;AACzB,EAAA,OAAO;AAAA,IACL,QAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF;AACF,CAAA;AACA,MAAM,OAAA,GAAU,CAAC,KAAA,EAA4B,EAAE,iBAAgB,KAAM;AACnE,EAAA,MAAM,YAAA,GAAe,SAAA;AACrB,EAAA,MAAM,OAAA,GAAUH,mBAA6B,YAAY,CAAA;AACzD,EAAA,MAAM,SAAA,GAAYE,aAAS,MAAM;AAC/B,IAAA,OAAO;AAAA,MACL,GAAA,EAAK,YAAA;AAAA,MACL,cAAc,KAAA,CAAM,YAAA;AAAA,MACpB,UAAA,EAAY,IAAA;AAAA,MACZ,YAAY,KAAA,CAAM,QAAA;AAAA,MAClB,GAAG,KAAA,CAAM,SAAA;AAAA,MACT,gBAAgB,MAAM;AACpB,QAAA,UAAA,CAAW,MAAM;AACf,UAAA,eAAA,EAAgB;AAAA,QAClB,GAAG,CAAC,CAAA;AAAA,MACN;AAAA,KACF;AAAA,EACF,CAAC,CAAA;AAED,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,OAAO,OAAA,CAAQ,MAAO,QAAA,EAAS;AAAA,EACjC,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAACE,MAAAA,KAAwB;AAC3C,IAAA,OAAO,OAAA,CAAQ,KAAA,CAAO,WAAA,CAAYA,MAAK,CAAA;AAAA,EACzC,CAAA;AAEA,EAAA,MAAM,aAAA,GAAgB,CAACA,MAAAA,KAAwB;AAC7C,IAAA,OAAO,OAAA,CAAQ,KAAA,CAAO,aAAA,CAAcA,MAAK,CAAA;AAAA,EAC3C,CAAA;AACA,EAAA,OAAO;AAAA,IACL,SAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACF;AACF,CAAA;AACA,MAAM,aAAa,CACjB,KAAA,EACA,EAAE,QAAA,EAAU,WAAA,EAAa,UAAS,KAC/B;AACH,EAAA,MAAM,cAAA,GAAuC;AAAA,IAC3C;AAAA,MACE,IAAA,EAAM,cAAA;AAAA,MACN,IAAA,EAAM,KAAA;AAAA,MACN,MAAM,MAAM;AACV,QAAA,OAAO,CAAC,CAAC,KAAA,CAAM,GAAA;AAAA,MACjB,CAAA;AAAA,MACA,SAAS,MAAM;AACb,QAAA,KAAA,CAAM,GAAA,IAAM;AAAA,MACd;AAAA,KACF;AAAA,IACA;AAAA,MACE,IAAA,EAAM,0BAAA;AAAA,MACN,IAAA,EAAM,kBAAA;AAAA,MACN,IAAA,EAAM,CAAC,CAAC,KAAA,CAAM;AAAA,KAChB;AAAA,IACA;AAAA,MACE,IAAA,EAAM,cAAA;AAAA,MACN,IAAA,EAAM,QAAA;AAAA,MACN,IAAA,EAAM,CAAC,CAAC,KAAA,CAAM;AAAA,KAChB;AAAA,IACA;AAAA,MACE,IAAA,EAAM,cAAA;AAAA,MACN,IAAA,EAAM,QAAA;AAAA,MACN,IAAA,EAAM,CAAC,CAAC,KAAA,CAAM;AAAA;AAChB,GACF;AACA,EAAA,KAAA,CAAM,WAAA,EAAa,OAAA,CAAQ,CAAC,IAAA,KAAS;AACnC,IAAA,MAAM,eAAe,cAAA,CAAe,SAAA;AAAA,MAClC,CAAC,KAAA,KAAU,KAAA,CAAM,IAAA,KAAS,IAAA,CAAK;AAAA,KACjC;AACA,IAAA,IAAI,iBAAiB,EAAA,EAAI;AACvB,MAAA,cAAA,CAAe,YAAY,CAAA,GAAI;AAAA,QAC7B,GAAG,eAAe,YAAY,CAAA;AAAA,QAC9B,GAAG;AAAA,OACL;AAAA,IACF;AAAA,EACF,CAAC,CAAA;AACD,EAAA,MAAM,IAAA,GAAO,cAAA,CAAe,MAAA,CAAO,KAAA,CAAM,WAAY,CAAA;AACrD,EAAA,IAAA,CAAK,OAAA,CAAQ,CAAC,IAAA,KAAS;AACrB,IAAA,IAAI,KAAK,OAAA,EAAS;AAChB,MAAA,MAAM,UAAU,IAAA,CAAK,OAAA;AACrB,MAAA,IAAA,CAAK,UAAU,MAAM;AAEnB,QAAA,MAAM,IAAA,GAAO,QAAA,CAAS,KAAA,CAAM,UAAA,CAAW,gBAAA,EAAiB;AACxD,QAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,MACd,CAAA;AAAA,IACF;AAAA,EACF,CAAC,CAAA;AAED,EAAA,MAAM,YAAA,GAAeF,aAAS,MAAM;AAClC,IAAA,OAAO;AAAA,MACL,IAAA;AAAA,MACA,GAAG,KAAA,CAAM;AAAA,KACX;AAAA,EACF,CAAC,CAAA;AAED,EAAA,MAAM,SAAS,YAAY;AACzB,IAAA,MAAM,QAAA,EAAS;AACf,IAAA,QAAA,CAAS,KAAA,CAAM,OAAO,IAAI,CAAA;AAAA,EAC5B,CAAA;AAEA,EAAA,MAAM,QAAQ,YAAY;AACxB,IAAA,WAAA,EAAY;AACZ,IAAA,MAAA,EAAO;AAAA,EACT,CAAA;AACA,EAAA,MAAM,aAAA,GAAsC;AAAA,IAC1C;AAAA,MACE,IAAA,EAAM,cAAA;AAAA,MACN,IAAA,EAAM,SAAA;AAAA,MACN,OAAA,EAAS;AAAA,KACX;AAAA,IACA;AAAA,MACE,IAAA,EAAM,cAAA;AAAA,MACN,OAAA,EAAS;AAAA;AACX,GACF;AACA,EAAA,OAAO;AAAA,IACL,YAAA;AAAA,IACA,aAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACF;AACF,CAAA;;;;"}