af-mobile-client-vue3 1.0.84 → 1.0.86

package/src/components/data/XReportGrid/XReportDemo.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import XReport from './XReport.vue'
+
+const mainRef = ref()
+
+onMounted(() => {
+  // 初始化逻辑
+})
+</script>
+
+<template>
+  <div id="test">
+    <van-card :bordered="false">
+      <XReport
+        ref="mainRef"
+        :use-oss-for-img="false"
+        config-name="nurseWorkstationCover"
+        server-name="af-his"
+        :show-img-in-cell="true"
+        :display-only="true"
+        :edit-mode="false"
+        :show-save-button="false"
+        :no-padding="true"
+        :dont-format="true"
+      />
+    </van-card>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/data/XReportGrid/XReportDesign.vue

@@ -0,0 +1,597 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+
+import { getConfigByName } from '@af-mobile-client-vue3/services/api/common'
+import XReportTrGroup from './XReportTrGroup.vue'
+import XReportJsonRender from './XReportJsonRender.vue'
+
+// Props 类型定义
+interface Props {
+  config: {
+    data: Record<string, any>
+    designMode?: string
+    width?: number
+    title?: string
+    style?: Record<string, string>
+    columns?: any[][]
+    subTitle?: Array<{
+      type: string
+      text?: string
+      format?: string
+      dataIndex?: string
+      inputWidth?: number
+      inputReadOnly?: boolean
+    }>
+  }
+  showImgInCell?: boolean
+  forDisplay?: boolean
+  serverName?: string
+  env?: string
+  displayOnly?: boolean
+  slotConfigName?: string
+  showImages?: boolean
+  imageList?: any[]
+  noPadding?: boolean
+  noTopBorder?: boolean
+  showTitle?: boolean
+  useOssForImg?: boolean
+  imgPrefix?: string
+}
+
+// Props
+const props = withDefaults(defineProps<Props>(), {
+  serverName: 'af-system',
+  env: 'prod',
+  displayOnly: false,
+  noPadding: true,
+  noTopBorder: false,
+  showTitle: true,
+  useOssForImg: true,
+})
+
+// Emits
+const emit = defineEmits(['updateImg', 'selectRow', 'slotRendered'])
+
+// 注入
+const isWidget = false // inject('isWidget', false)
+
+// 状态
+const data = ref(props.config.data || {})
+const slotConfig = ref<any>()
+const render = ref(false)
+const activatedConfig = ref<any>({})
+
+// 计算属性
+const flexItemBodyState = computed(() => ({
+  padding: isWidget ? '0px' : '24px',
+}))
+
+// 方法
+function slotRendered() {
+  emit('slotRendered')
+}
+
+function updateImg(data: any) {
+  emit('updateImg', data)
+}
+
+function selectRow(selectedRowKeys: any[], selectedRows: any[]) {
+  console.log('XReportDesign')
+  emit('selectRow', selectedRowKeys, selectedRows)
+}
+
+// 格式化相关方法
+function calcFormatInputNum(formatStr: string) {
+  let count = 0
+  for (let i = 0; i < formatStr.length; i++) {
+    if (formatStr[i] === '{')
+      count++
+  }
+  return count
+}
+
+function displayFormatText(formatStr: string, num: number) {
+  let start = 0
+  let count = 0
+  num++
+  for (let i = 0; i < formatStr.length; i++) {
+    if (formatStr[i] === '}') {
+      start = i
+      count++
+    }
+    if (count === num) {
+      for (let j = start + 1; j < formatStr.length; j++) {
+        if (formatStr[j] === '{')
+          return formatStr.slice(start + 1, j)
+
+        if (j === formatStr.length - 1 && formatStr[j] !== '}')
+          return formatStr[j]
+      }
+    }
+  }
+}
+
+function displayFormatStartText(formatStr: string) {
+  let count = 0
+  for (let i = 0; i < formatStr.length; i++) {
+    if (formatStr[i] === '{')
+      break
+    count++
+  }
+  return formatStr.slice(0, count)
+}
+
+// 生命周期
+onMounted(() => {
+  console.log('>>>> xreportdesign 渲染')
+  if (props.slotConfigName) {
+    getConfigByName(props.slotConfigName, (res: any) => {
+      slotConfig.value = res
+      res.data = { ...res.data, ...data.value }
+      props.config.data = res.data
+      activatedConfig.value = res
+      render.value = true
+    }, props.serverName)
+  }
+  else {
+    activatedConfig.value = props.config
+    render.value = true
+  }
+
+  if (activatedConfig.value.designMode !== 'json') {
+    activatedConfig.value.columns?.forEach((row: any[]) => {
+      if (row[0]?.type === 'list' && row[0]?.listLength === 1) {
+        row.forEach((cell) => {
+          cell.listLength = activatedConfig.value.data[cell.dataIndex].length
+        })
+      }
+    })
+  }
+})
+
+// 监听
+watch(() => props.config, (newVal) => {
+  // 配置变化时的处理
+}, { deep: true })
+
+watch(() => activatedConfig.value, (val) => {
+  console.log('>>>> activatedConfig: ', val)
+})
+</script>
+
+<template>
+  <div id="xreportdesign">
+    <template v-if="activatedConfig.designMode === 'json'">
+      <XReportJsonRender
+        :img-prefix="imgPrefix"
+        :server-name="serverName"
+        :display-only="displayOnly"
+        :show-title="showTitle"
+        :no-padding="noPadding"
+        :no-top-border="noTopBorder"
+        :config="activatedConfig"
+        @update-img="updateImg"
+        @select-row="selectRow"
+      />
+    </template>
+    <template v-else-if="isWidget">
+      <template v-for="(row, rowIndex) in activatedConfig.columns">
+        <!--  插槽展示  -->
+        <template v-if="row[0].type === 'slot'">
+          <XReportTrGroup
+            :show-img-in-cell="showImgInCell"
+            :img-prefix="imgPrefix"
+            :server-name="serverName"
+            :env="env"
+            :key="rowIndex"
+            :use-oss-for-img="useOssForImg"
+            :columns="row"
+            @update-img="updateImg"
+            :no-top-border="noTopBorder"
+            @selectRow="selectRow"
+            :config-data="activatedConfig.data"
+            :config="activatedConfig"
+            :display="true"
+          />
+        </template>
+        <!--  普通行  -->
+        <template v-else>
+          <template v-if="!forDisplay">
+            <XReportTrGroup
+              :show-img-in-cell="showImgInCell"
+              :img-prefix="imgPrefix"
+              :server-name="serverName"
+              :env="env"
+              :key="rowIndex"
+              :use-oss-for-img="useOssForImg"
+              :columns="row"
+              @update-img="updateImg"
+              :no-top-border="noTopBorder"
+              @selectRow="selectRow"
+              :config-data="activatedConfig.data"
+              :config="activatedConfig"
+            />
+          </template>
+          <template v-else>
+            <XReportTrGroup
+              :show-img-in-cell="showImgInCell"
+              :img-prefix="imgPrefix"
+              :server-name="serverName"
+              :env="env"
+              :use-oss-for-img="useOssForImg"
+              :config="activatedConfig"
+              :key="rowIndex"
+              @update-img="updateImg"
+              :columns="row"
+              @selectRow="selectRow"
+              :no-top-border="noTopBorder"
+              :config-data="activatedConfig.data"
+              :display="true"
+            />
+          </template>
+        </template>
+      </template>
+    </template>
+    <template v-else>
+      <div :class=" noPadding ? 'reportMainNoPadding' : 'reportMain'" :style="activatedConfig.width > 0 ? (`width:${activatedConfig.width}px`) : undefined">
+        <!--      大标题      -->
+        <h2 v-if="showTitle && activatedConfig.title" class="reportTitle" v-html="activatedConfig.title" />
+        <!--      小标题 / 介乎于标题与表格之间的内容      -->
+        <div v-if="activatedConfig.subTitle && activatedConfig.subTitle.length" class="subTitle">
+          <div v-for="(item, itemIndex) in activatedConfig.subTitle" :key="itemIndex" class="subTitleItems">
+            <template v-if="item.type === 'column'">
+              <span>{{ item.text }}</span>
+            </template>
+            <template v-else-if="item.type === 'inputs'">
+              <div class="inputsDiv">
+                <div v-for="(num, index) of calcFormatInputNum(item.format)" :key="index" class="inputsDivItem">
+                  <span class="inputsDivItemLabel">{{ displayFormatStartText(item.format) }}</span>
+                  <template v-if="!forDisplay">
+                    <template v-if="item.inputReadOnly === true">
+                      <a-input v-model="data[item.dataIndex][index]" :style="`width:${item.inputWidth ? item.inputWidth : '100'}%`" :disabled="true" />
+                    </template>
+                    <template v-else>
+                      <a-input v-model="data[item.dataIndex][index]" :style="`width:${item.inputWidth ? item.inputWidth : '100'}%`" />
+                    </template>
+                  </template>
+                  <template v-else>
+                    {{ activatedConfig.data[item.dataIndex][index] }}
+                  </template>
+                  <span class="inputsDivItemLabel">{{ displayFormatText(item.format, index) }}</span>
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+        <!--      主体表格      -->
+        <table v-if="render" class="reportTable" :style="activatedConfig.style ? activatedConfig.style : undefined">
+          <tbody class="reportTable">
+            <template v-for="(row, rowIndex) in activatedConfig.columns">
+              <!--  插槽展示  -->
+              <template v-if="row[0].type === 'slot'">
+                <XReportTrGroup
+                  :show-img-in-cell="showImgInCell"
+                  :img-prefix="imgPrefix"
+                  :server-name="serverName"
+                  :env="env"
+                  :use-oss-for-img="useOssForImg"
+                  @update-img="updateImg"
+                  :key="rowIndex"
+                  @select-row="selectRow"
+                  :columns="row"
+                  @slot-rendered="slotRendered"
+                  :no-top-border="noTopBorder"
+                  :config-data="activatedConfig.data"
+                  :config="activatedConfig"
+                  :display="true"
+                />
+              </template>
+              <!--  列表 list -->
+              <template v-else-if="row[0].type === 'list'">
+                <template v-for="(num, listIndex) in row[0].listLength + 1">
+                  <template v-if="!forDisplay">
+                    <XReportTrGroup
+                      :show-img-in-cell="showImgInCell"
+                      :img-prefix="imgPrefix"
+                      :server-name="serverName"
+                      :env="env"
+                      :use-oss-for-img="useOssForImg"
+                      @slot-rendered="slotRendered"
+                      :config="activatedConfig"
+                      @update-img="updateImg"
+                      :key="rowIndex + listIndex"
+                      @select-row="selectRow"
+                      :columns="row"
+                      :no-top-border="noTopBorder"
+                      :config-data="activatedConfig.data"
+                      :list-index="listIndex"
+                    />
+                  </template>
+                  <template v-else>
+                    <XReportTrGroup
+                      :show-img-in-cell="showImgInCell"
+                      :img-prefix="imgPrefix"
+                      :server-name="serverName"
+                      :env="env"
+                      :use-oss-for-img="useOssForImg"
+                      @slot-rendered="slotRendered"
+                      :config="activatedConfig"
+                      @update-img="updateImg"
+                      :key="rowIndex + listIndex"
+                      @select-row="selectRow"
+                      :columns="row"
+                      :no-top-border="noTopBorder"
+                      :config-data="activatedConfig.data"
+                      :list-index="listIndex"
+                      :display="true"
+                    />
+                  </template>
+                </template>
+              </template>
+              <!--  动态行 inputColumns -->
+              <template v-else-if="row[0].type === 'inputColumns'">
+                <template v-if="forDisplay">
+                  <XReportTrGroup
+                    :show-img-in-cell="showImgInCell"
+                    :img-prefix="imgPrefix"
+                    :server-name="serverName"
+                    :env="env"
+                    :use-oss-for-img="useOssForImg"
+                    @slot-rendered="slotRendered"
+                    :config="activatedConfig"
+                    @update-img="updateImg"
+                    :columns="row[0].definition"
+                    @select-row="selectRow"
+                    :config-data="{ arr: activatedConfig.data[row[0].dataIndex] }"
+                    :input-columns="true"
+                    :no-top-border="noTopBorder"
+                    v-for="(item, definitionIndex) in activatedConfig.data[row[0].dataIndex]"
+                    :input-columns-definition-index="definitionIndex"
+                    :display="true"
+                    :key="row[0].dataIndex + definitionIndex + rowIndex"
+                  />
+                </template>
+                <template v-if="!forDisplay">
+                  <XReportTrGroup
+                    :show-img-in-cell="showImgInCell"
+                    :img-prefix="imgPrefix"
+                    :server-name="serverName"
+                    :env="env"
+                    :use-oss-for-img="useOssForImg"
+                    @slot-rendered="slotRendered"
+                    :config="activatedConfig"
+                    @update-img="updateImg"
+                    :columns="row[0].definition"
+                    @select-row="selectRow"
+                    :config-data="{ arr: activatedConfig.data[row[0].dataIndex] }"
+                    :input-columns="true"
+                    :no-top-border="noTopBorder"
+                    v-for="(item, definitionIndex) in activatedConfig.data[row[0].dataIndex]"
+                    :input-columns-definition-index="definitionIndex"
+                    :key="row[0].dataIndex + definitionIndex + rowIndex"
+                  />
+                  <!--  动态行交互按钮  -->
+                  <XReportTrGroup
+                    :show-img-in-cell="showImgInCell"
+                    :img-prefix="imgPrefix"
+                    :server-name="serverName"
+                    :env="env"
+                    :use-oss-for-img="useOssForImg"
+                    @slot-rendered="slotRendered"
+                    :config="activatedConfig"
+                    @update-img="updateImg"
+                    :key="rowIndex"
+                    @select-row="selectRow"
+                    :columns="row"
+                    :no-top-border="noTopBorder"
+                    :config-data="activatedConfig.data"
+                    :input-columns-button="true"
+                    :input-columns="true"
+                  />
+                </template>
+              </template>
+              <!--  普通行  -->
+              <template v-else>
+                <template v-if="!forDisplay">
+                  <XReportTrGroup
+                    :show-img-in-cell="showImgInCell"
+                    :img-prefix="imgPrefix"
+                    :server-name="serverName"
+                    :env="env"
+                    :use-oss-for-img="useOssForImg"
+                    @slot-rendered="slotRendered"
+                    :key="rowIndex"
+                    @update-img="updateImg"
+                    :columns="row"
+                    @select-row="selectRow"
+                    :no-top-border="noTopBorder"
+                    :config-data="activatedConfig.data"
+                    :config="activatedConfig"
+                  />
+                </template>
+                <template v-else>
+                  <XReportTrGroup
+                    :show-img-in-cell="showImgInCell"
+                    :img-prefix="imgPrefix"
+                    :server-name="serverName"
+                    :env="env"
+                    :use-oss-for-img="useOssForImg"
+                    @slot-rendered="slotRendered"
+                    :config="activatedConfig"
+                    @update-img="updateImg"
+                    :key="rowIndex"
+                    @select-row="selectRow"
+                    :columns="row"
+                    :no-top-border="noTopBorder"
+                    :config-data="activatedConfig.data"
+                    :display="true"
+                  />
+                </template>
+              </template>
+            </template>
+          </tbody>
+        </table>
+        <div v-if="showImages" style="margin-top: 5%; display: flex;margin-bottom: 5%">
+          <p>图片：</p>
+          <div v-for="(img, imgIndex) in imageList" :key="imgIndex" style="margin-left: 3%;width: 200px">
+            <img :src="img.url" class="img" :alt="img.name">
+            <p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;">
+              {{ img.name }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.img{
+  width: 95%;
+  height: 180px;
+  object-fit: cover;
+}
+.reportMain {
+  text-align: center;
+  margin: 0 auto;
+  font-size: 16px;
+  color: #000;
+  background-color: #fff;
+  border-radius: 8px;
+
+  .reportTitle {
+    font-weight: bold;
+  }
+
+  .subTitle {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1%;
+
+    .subTitleItems {
+      max-width: 30%;
+    }
+  }
+
+  .inputsDiv {
+    display: flex;
+    justify-content: space-between;
+    .inputsDivItem {
+      display: flex;
+      align-items: center;
+      padding: 0 4px;
+      white-space: nowrap;
+      .inputsDivItemLabel {
+        padding: 0 4px;
+      }
+    }
+  }
+
+  .reportTable {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout:fixed;
+    word-break:break-all;
+  }
+}
+.reportMainForDisplay {
+  text-align: center;
+  margin: 10% auto;
+  font-size: 16px;
+  color: #000;
+  background-color: #fff;
+  border-radius: 8px;
+
+  .reportTitle {
+    font-weight: bold;
+  }
+
+  .subTitle {
+    display: flex;
+    justify-content: space-between;
+
+    .subTitleItems {
+      max-width: 30%;
+    }
+  }
+
+  .inputsDiv {
+    display: flex;
+    justify-content: space-around;
+    .inputsDivItem {
+      display: flex;
+      align-items: center;
+      padding: 0 4px;
+      white-space: nowrap;
+      .inputsDivItemLabel {
+        padding: 0 4px;
+      }
+    }
+  }
+
+  .reportTable {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout:fixed;
+    word-break:break-all;
+  }
+}
+.reportMainNoPadding {
+  // text-align: center;
+  margin: 0 auto;
+  font-size: 16px;
+  color: #000;
+  // background-color: #fff;
+  border-radius: 8px;
+  height: auto;
+  min-height : 20vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  .reportTitle {
+    font-weight: bold;
+  }
+
+  .subTitle {
+    display: flex;
+    justify-content: space-between;
+
+    .subTitleItems {
+      max-width: 30%;
+    }
+  }
+
+  .inputsDiv {
+    display: flex;
+    justify-content: space-between;
+    .inputsDivItem {
+      display: flex;
+      align-items: center;
+      padding: 0 4px;
+      white-space: nowrap;
+      .inputsDivItemLabel {
+        padding: 0 4px;
+      }
+    }
+  }
+
+  .reportTable {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout:fixed;
+    word-break:break-all;
+  }
+}
+.tools{
+  position: fixed;
+  right: 2%;
+  text-align: right;
+  width: 60%;
+  cursor: pointer;
+  .toolsItem{
+    width: 15%;
+    margin-right: 3%;
+    display: inline-block;
+  }
+}
+</style>