push

lib/saas/view/service/list-table.vue

@@ -0,0 +1,143 @@
+<!-- @format -->
+
+<template>
+  <div class="ns-list-table ns-view">
+    <ns-table ref="nsTableRef" v-bind="getBindValue">
+      <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+        <slot :name="item" v-bind="data"></slot>
+      </template>
+    </ns-table>
+  </div>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, ref, unref, nextTick } from 'vue';
+  import { tableProps } from '/nerv-lib/component/table/props';
+  import { PropTypes } from '/nerv-lib/util/type';
+  import { cloneDeep, get, isArray } from 'lodash-es';
+  tableProps.expand = PropTypes.bool.def(false);
+
+  export default defineComponent({
+    name: 'NsViewListTable',
+    props: {
+      ...tableProps,
+      title: PropTypes.string,
+    },
+    setup(props, { attrs }) {
+      const nsTableRef = ref();
+      const getPageParams = (dataRef, curepage?) => {
+        let pageCount = get(dataRef.value, props.pageCountField);
+
+        let pageSize = get(dataRef.value, props.sizeField);
+        let total = 0;
+        let page = 0;
+        const tableData = get(unref(dataRef), props.listField);
+        if (pageCount) {
+          let totalMax = pageCount * pageSize;
+          if (get(dataRef.value, props.totalField)) {
+            total =
+              totalMax > get(dataRef.value, props.totalField)
+                ? get(dataRef.value, props.totalField)
+                : totalMax;
+          } else {
+            total = totalMax;
+          }
+        } else {
+          total = get(dataRef.value, props.totalField);
+        }
+
+        if (isArray(tableData) ? !tableData.length : false && curepage) {
+          //后端从0开始
+          if (curepage !== 0) {
+            page =
+              curepage > pageCount - props.pageFieldOffset
+                ? pageCount - props.pageFieldOffset
+                : curepage;
+          }
+        } else {
+          page = curepage;
+        }
+
+        return { total, page };
+      };
+      const formConfig = cloneDeep(props.formConfig);
+
+      const getFormConfig = computed(() => {
+        const formConfig = cloneDeep(props.formConfig);
+
+        if (formConfig) {
+          formConfig['formLayout'] = 'flexv2';
+        }
+        return formConfig;
+      });
+      const getBindValue = computed(() => ({
+        ...attrs,
+        ...props,
+        title: props.tableTitle,
+        tableTitle: props.title,
+        getPageParams: getPageParams,
+        formConfig: getFormConfig.value,
+        sticky:
+          props.sticky === false
+            ? false
+            : { offsetHeader: props.headerActions.length === 0 && !props.title ? 0 : 89 },
+      }));
+
+      if (formConfig) {
+        nextTick(() => {
+          unref(nsTableRef)?.formElRef?.triggerSubmit();
+        });
+      }
+
+      return { getBindValue, nsTableRef };
+    },
+    //缓存界面重新调用reload
+    activated() {
+      if (unref(this.nsTableRef)) {
+        unref(this.nsTableRef).reload();
+      }
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  //关闭 sticky 模式 底部滚动条
+
+  :deep(.ns-table) {
+    .ns-table-main {
+      padding: 0px 16px;
+      border-top: 16px solid #e5ebf0;
+      // margin: 16px;
+      // background-color: #fff;
+    }
+    .ns-table-search {
+      padding: 16px 16px 0;
+      // margin: 16px;
+      background: #fff;
+      // border-width: 16px 0 16px 0px;
+      // border-color: #e5ebf0;
+      // border-style: solid;
+      border-top: 16px solid #e5ebf0;
+    }
+    .ns-table-header {
+      position: sticky;
+      z-index: 3;
+      top: 0;
+      left: 0;
+      background-color: @white;
+    }
+    .ant-table-sticky-scroll {
+      display: none !important;
+    }
+    .ns-basic-table {
+      padding-top: 16px;
+    }
+  }
+
+  :deep(.ns-form::after) {
+    background-color: #f0f2f5;
+    display: none;
+    margin: 0 16px;
+    width: calc(100% - 32px);
+  }
+</style>