push

2024-05-15 17:29:42 +08:00
commit d0155dbe3c
7296 changed files with 1832517 additions and 0 deletions
--- a/lib/saas/view/service/detail.vue
+++ b/lib/saas/view/service/detail.vue
@@ -0,0 +1,577 @@
+<template>
+  <div class="ns-view">
+    <ns-page-header class="ns-page-header">
+      <template #title>
+        <div class="title" @click="onBack">
+          <!-- <left-outlined style="color: rgba(0, 0, 0, 0.4)" /> {{ title }} -->
+          <ns-icon name="left" /> <div class="text">{{ title }}</div>
+        </div>
+      </template>
+      <template #extra>
+        <template v-for="item in getActions" :key="item.name">
+          <template v-if="item.children">
+            <template v-if="getDropdownActions(item.children).length > 0">
+              <a-dropdown :trigger="['hover']" :dropMenuList="item.children">
+                <a class="ant-dropdown-link" @click.prevent>
+                  {{ item.label }}
+                  <CaretDownOutlined />
+                </a>
+                <template #overlay>
+                  <a-menu>
+                    <a-menu-item
+                      style="padding: 2px 5px"
+                      v-for="itemChild in getDropdownActions(item.children)"
+                      :key="itemChild.name"
+                      @click="itemChild.finalHandle(data, itemChild.name)">
+                      <a-button type="link" :disabled="itemChild.dynamicDisabled">
+                        {{ itemChild.label }}
+                      </a-button>
+                    </a-menu-item>
+                  </a-menu>
+                </template>
+              </a-dropdown>
+            </template>
+          </template>
+          <template v-else>
+            <ns-button
+              :type="item.type || 'default'"
+              :danger="item.danger"
+              :disabled="item.dynamicDisabled"
+              @click="item.finalHandle(data, item.name)">
+              <ns-v-node :content="item.label" />
+            </ns-button>
+          </template>
+        </template>
+      </template>
+    </ns-page-header>
+    <div class="ns-detail-content">
+      <Skeleton
+        active
+        v-for="(detailGroup, index) in getDetail"
+        :key="index"
+        :loading="loading"
+        :paragraph="detailGroup.SkeletonParagraphProps"
+        :title="SkeletonTitleProps">
+        <div class="ns-detail">
+          <a-descriptions>
+            <template #title>
+              <div class="descriptions-title" v-if="detailGroup.title">
+                <span>{{ detailGroup.title }}</span>
+                <div class="titleFloor"></div>
+              </div>
+            </template>
+            <template v-if="detailGroup.items">
+              <template v-for="(item, index) in detailGroup.items" :key="index">
+                <a-descriptions-item v-bind="item" v-if="item.ifShow">
+                  <!--默认-->
+
+                  <template v-if="!item.type">
+                    <span class="ns-detail-text">{{ item.value ? item.value : '-' }}</span>
+                  </template>
+                  <!--富文本-->
+                  <template v-if="item.type == 'html'">
+                    <div class="ns-detail-html" v-html="item.value"></div>
+                  </template>
+                  <!--链接-->
+
+                  <template v-if="item.type == 'link'">
+                    <a class="ns-detail-link" target="_blank" :href="item.value">发票链接 </a>
+                  </template>
+                  <!--图片 值为数组则为图片列表 可继续扩展-->
+
+                  <template v-if="item.type === 'image'">
+                    <template v-if="typeof item.value == 'object'">
+                      <div
+                        class="ns-detail-image-list"
+                        v-for="src in item.value"
+                        :key="src"
+                        style="display: inline-block; margin: 0 5px 5px 0">
+                        <a-image
+                          :width="100"
+                          v-if="src"
+                          :src="src"
+                          fallback="data:image/png;base64,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" />
+                      </div>
+                    </template>
+                    <template v-else>
+                      <a-image
+                        class="ns-detail-image"
+                        :width="64"
+                        v-if="item.value"
+                        :src="item.value"
+                        fallback="data:image/png;base64,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" />
+                    </template>
+                  </template>
+
+                  <!--表格-->
+                  <template v-else-if="item.type === 'table'">
+                    <ns-basic-table
+                      :scroll="{ x: '100%' }"
+                      class="ns-detail-table"
+                      :dataSource="dataRef[item.props.listField]"
+                      :columns="item.props.columns"
+                      :pagination="false"
+                      :rowKey="item.props.rowKey">
+                      <template #bodyCell="data" v-if="!Object.keys($slots).includes('bodyCell')">
+                        <template v-if="data.column.textEllipsis">
+                          <!-- :style="{ width: `${data.column.width}px` }" -->
+                          <span class="tool-tips">
+                            <ns-tooltip
+                              placement="top"
+                              v-if="
+                                data.column.customRender
+                                  ? data.column.customRender(data)
+                                  : data.record[data.column.dataIndex]
+                              ">
+                              <template #title>
+                                <span>{{
+                                  data.column.customRender
+                                    ? data.column.customRender(data)
+                                    : data.record[data.column.dataIndex] || '-'
+                                }}</span>
+                              </template>
+                              <span class="text-ellipsis">{{
+                                data.column.customRender
+                                  ? data.column.customRender(data)
+                                  : data.record[data.column.dataIndex] || '-'
+                              }}</span>
+                            </ns-tooltip>
+                            <span class="text-ellipsis" v-else> - </span>
+                          </span>
+                        </template>
+                        <template v-if="data.column.edit">
+                          <ns-table-cell
+                            :value="data.text"
+                            :record="data.record"
+                            :column="data.column"
+                            :index="data.index" />
+                        </template>
+                      </template>
+                    </ns-basic-table>
+                  </template>
+
+                  <!--表格-->
+                  <template v-else-if="item.type === 'NsViewListTable'">
+                    <NsViewListTable
+                      class="ns-detail-NsViewListTable"
+                      v-bind="item.props.tableConfig" />
+                  </template>
+
+                  <template v-else-if="item.type === 'map'">
+                    <NsMapV2 :value="item['value']" :viewOnly="true" />
+                  </template>
+
+                  <template v-for="slot in Object.keys($slots)" :key="slot">
+                    <div v-if="item.type === slot" :style="item.style" :class="`ns-detail-${slot}`">
+                      <slot :name="slot" v-bind="item || {}"> </slot>
+                    </div>
+                  </template>
+                </a-descriptions-item>
+              </template>
+            </template>
+          </a-descriptions>
+        </div>
+      </Skeleton>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, ref, watch, PropType, reactive } from 'vue';
+  import { http } from '/nerv-lib/util/http';
+  import { useRoute } from 'vue-router';
+  import { cloneDeep, get, isFunction, isUndefined } from 'lodash-es';
+  import { Skeleton } from 'ant-design-vue';
+  import { LeftOutlined } from '@ant-design/icons-vue';
+  import { Action, useAction } from '/nerv-lib/use';
+  import { useNavigate } from '/nerv-lib/use/use-navigate';
+  import { any } from 'vue-types';
+  export interface DetailItem {
+    label: string;
+    name: string;
+    value?: string;
+    ifShow?: Boolean | Function;
+    format?: Function;
+    type?: string; // 现支持image
+    class?: string;
+  }
+
+  export interface DetailGroup {
+    title: string;
+    items: Array<DetailItem>;
+  }
+  interface ColumnActions {
+    back: Boolean;
+    actions: Action[];
+  }
+  export default defineComponent({
+    name: 'NsViewDetail',
+    props: {
+      title: {
+        type: String,
+        default: '查看',
+      },
+      detail: {
+        type: Array as PropType<DetailGroup[]>,
+        default: () => [],
+      },
+      api: {
+        type: String,
+        require: true,
+      },
+      headActions: {
+        type: Object as PropType<ColumnActions>,
+        default: () => ({
+          actions: [],
+        }),
+      },
+      dataHandle: Function,
+      customDataApi: {
+        type: Function,
+      },
+      requersConfig: {
+        type: any,
+      },
+      customBack: {
+        type: String || Function,
+      },
+    },
+    components: { Skeleton, LeftOutlined },
+    setup(props) {
+      const { navigateBackV2: navigateBack } = useNavigate();
+      const SkeletonTitleProps = ref({
+        width: 150,
+      });
+      const route = useRoute();
+      const dataRef = ref();
+      const getData = computed(() => {
+        return {
+          ...route.query,
+          ...route.params,
+          dataRef: dataRef,
+        };
+      });
+
+      let loading = ref<boolean>(true);
+
+      function request() {
+        const { query } = route;
+
+        if (props.customDataApi) {
+          props.customDataApi(props.api, query).then((res) => {
+            dataRef.value = res.data;
+            loading.value = false;
+          });
+        } else {
+          http.get(props.api, query, props.requersConfig).then((res) => {
+            dataRef.value = props.dataHandle ? props.dataHandle(res.data) : res.data;
+            loading.value = false;
+          });
+        }
+      }
+
+      request();
+
+      const getDetail = computed(() => {
+        const detail = cloneDeep(props.detail);
+        return (detail as Array<DetailGroup>).map((group: DetailGroup) => {
+          const SkeletonWidth = [];
+          for (let i = 0; i < group.items.length; i++) {
+            if (group.items[i].type === 'table') {
+              SkeletonWidth.push('80%');
+            } else {
+              SkeletonWidth.push('30%');
+            }
+          }
+          const { title, items } = group;
+          return {
+            title: title,
+            items: items.map((item) => {
+              if (!loading.value) {
+                const { ifShow } = item;
+                item.value = get(dataRef.value, item.name);
+                item.ifShow = isFunction(ifShow)
+                  ? ifShow(dataRef.value)
+                  : isUndefined(ifShow)
+                  ? true
+                  : ifShow;
+                if (item.format) {
+                  item.value = item.format(item.value, dataRef.value);
+                }
+              }
+              return item;
+            }),
+            SkeletonParagraphProps: {
+              rows: items.length,
+              width: SkeletonWidth,
+            },
+            SkeletonTitleProps: {
+              width: 150,
+            },
+          };
+        });
+      });
+
+      //支持自定义按钮
+      const { transformAction, filterActionNoAuth } = useAction();
+      const getActions = computed(() => {
+        let actions = cloneDeep(props.headActions.actions);
+        actions = actions
+          .filter((action: Action) => {
+            return filterActionNoAuth(action, getData.value);
+          })
+          .map((action) => {
+            return transformAction(action, getData.value);
+          });
+        return actions;
+      });
+      const getDropdownActions = (actions) => {
+        actions = actions.map((action) => {
+          return transformAction(action, getData.value);
+        });
+        return actions;
+      };
+      return {
+        getDetail,
+        loading,
+        dataRef,
+        SkeletonTitleProps,
+        getActions,
+        getDropdownActions,
+        navigateBack,
+      };
+    },
+
+    methods: {
+      onBack() {
+        //debugger;
+
+        if (this.customBack) {
+          this.customBack();
+        } else {
+          this.navigateBack();
+        }
+        // this.$router.go(-1);
+      },
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .ns-view {
+    min-height: 100%;
+    height: 100%;
+    background: #e5ebf0;
+  }
+  .ns-detail-content {
+    border-top: 16px solid #e5ebf0;
+    padding: 16px 21px;
+    background: #fff;
+    height: calc(100% - 50px);
+  }
+
+  :deep(.ant-skeleton-paragraph) {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  :deep(.ant-skeleton-paragraph li:nth-child(n)) {
+    display: block;
+    margin-right: 4%;
+    margin-top: 16px;
+    margin-bottom: 4px;
+  }
+
+  :deep(.ant-skeleton-paragraph li:nth-child(3n + 3)) {
+    margin-right: 0;
+  }
+
+  :deep(.ant-skeleton-content) {
+    padding: 0 8px 10px 10px;
+  }
+
+  :deep(.ant-descriptions-item-label) {
+    color: rgba(0, 0, 0, 0.5);
+  }
+
+  :deep(.ant-descriptions-item-label),
+  :deep(.ant-descriptions-item-content) {
+    line-height: 22px;
+  }
+
+  :deep(.ant-descriptions-view) {
+    padding-bottom: 8px;
+  }
+
+  :deep(.ant-descriptions-item) {
+    padding-right: 20px;
+
+    &:nth-child(2n) {
+      padding-left: 20px;
+    }
+
+    &:nth-child(3n) {
+      padding-left: 20px;
+      padding-right: 0;
+    }
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+
+  .descriptions-title {
+    &:after {
+      content: '';
+      width: 75px;
+      height: 7px;
+      display: block;
+      background: linear-gradient(90deg, @primary-color 0%, #fff 82.67%);
+      margin-left: 2px;
+      margin-top: -2px;
+    }
+  }
+
+  .ns-page-header {
+    margin-bottom: 0 !important;
+    padding: 7px 16px !important;
+    width: calc(100% + 32px);
+    margin-left: -16px;
+    .title {
+      cursor: pointer;
+      font-size: 18px !important;
+      display: flex;
+      align-items: center;
+      .text {
+        margin-left: 6px;
+      }
+    }
+  }
+
+  .ns-detail {
+    border-bottom: 1px solid #ecedef;
+
+    &:last-child {
+      border-bottom-width: 0;
+    }
+    &:first-child {
+      :deep(.ant-descriptions-header) {
+        margin-top: 0;
+      }
+    }
+
+    :deep(.ant-descriptions-header) {
+      margin-top: 12px;
+      margin-bottom: 12px;
+
+      .ant-descriptions-title {
+        line-height: 16px;
+        font-size: 16px;
+      }
+    }
+  }
+
+  :deep(.ant-image) {
+    width: 64px;
+    height: 64px;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .ns-detail-html {
+    :deep(table) {
+      border-top: 1px solid #ffffff;
+      border-left: 1px solid #ffffff;
+
+      :deep(p) {
+        font-size: 12px;
+        color: #898e91;
+      }
+    }
+
+    :deep(th) {
+      border-right: 1px solid #ffffff;
+      font-size: 13px;
+      padding-top: 5px;
+      padding-bottom: 5px;
+      font-weight: normal;
+      background: #eff0f2;
+    }
+
+    :deep(td) {
+      border-top: 1px solid #ffffff;
+      border-right: 1px solid #ffffff;
+      padding-top: 5px;
+      padding-bottom: 5px;
+      font-size: 12px;
+      color: #606060;
+      text-align: center;
+
+      :deep(text) {
+        border-bottom: 1px solid #ffffff;
+      }
+
+      background: rgba(240, 242, 245, 0.5);
+    }
+  }
+
+  .ns-detail-content {
+    .ns-detail-table {
+      :deep(.ns-basic-table) {
+        padding-top: 0;
+        .ant-table-wrapper {
+          width: 100%;
+        }
+      }
+    }
+    .ns-detail-NsViewListTable {
+      background-color: #fff !important;
+      :deep(.ns-table-search) {
+        border-top: 0;
+        padding-top: 0;
+      }
+      :deep(.ns-table-header) {
+        // margin-bottom: 16px;
+        padding-top: 0;
+        height: auto;
+      }
+      :deep(.ns-table-main) {
+        border-top: 0;
+      }
+    }
+
+    :deep(.ns-detail-tableConfig) {
+      width: 100%;
+    }
+  }
+
+  :deep(.ant-descriptions-row > td) {
+    padding-bottom: 8px !important;
+  }
+
+  :deep(.ns-detail-tablefullcontent) {
+    .ant-descriptions-item-content {
+      width: 100%;
+      display: block;
+    }
+  }
+
+  .text-ellipsis {
+    display: inline-block;
+    vertical-align: top;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+  .tool-tips {
+    display: inline-block;
+    vertical-align: top;
+    padding: 0;
+    word-wrap: break-word;
+    word-break: break-word;
+    width: 100%;
+  }
+</style>