vue2-client 1.8.147 → 1.8.149

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.8.147",
+  "version": "1.8.149",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/src/base-client/components/common/XReport/XReport.vue

@@ -7,14 +7,14 @@
     <a-card v-else>
       <!--   切换菜单   -->
       <a-radio-group v-model="type" default-value="a" button-style="solid" @change="tabChanged">
-        <a-radio-button value="design">
+        <a-radio-button value="design" v-if="!onlyDisplay">
           设计
         </a-radio-button>
         <a-radio-button value="display" style="border-radius: 0">
           预览
         </a-radio-button>
       </a-radio-group>
-      <a-radio-button @click="saveConfig" style="border-radius: 0 4px 4px 0">
+      <a-radio-button @click="saveConfig" style="border-radius: 0 4px 4px 0" v-if="!onlyDisplay">
         保存
       </a-radio-button>
       <!--   主体表格   -->
@@ -90,6 +90,7 @@ export default {
       showSkeleton: true,
       config: undefined,
       type: 'design',
+      onlyDisplay: false,
       maxColSpan: 12,
       // 定义是否完成配置的扫描，未完成不要渲染子组件
       scanFinish: false,
@@ -531,21 +532,29 @@ export default {
           })
         }
       }, 100)
-    }
+    },
+    // 初始化JSON配置
+    jsonConfigInit () {
+      if (this.configData === undefined) {
+        console.error('未找到数据！')
+      } else {
+        this.originalConfig = Object.assign({}, this.localConfig)
+        this.originalConfig.data = JSON.parse(JSON.stringify(this.configData))
+        this.type = 'display'
+        this.onlyDisplay = true
+        this.showSkeleton = false
+        this.$nextTick(() => {
+          this.scanFinish = true
+        })
+      }
+    },
   },
   beforeMount () {
     if (this.localConfig) {
-      this.config = this.localConfig
-      if (this.configData !== undefined) {
-        this.config.data = this.configData
-      }
-      if (this.config.data.images === undefined) {
-        this.config.data.images = {}
-      }
-      this.configInit()
-    } else {
-      getConfigByName(this.configName, 'af-system', res => {
-        this.config = res
+      if (this.localConfig.designMode === 'json') {
+        this.jsonConfigInit()
+      } else {
+        this.config = this.localConfig
         if (this.configData !== undefined) {
           this.config.data = this.configData
         }
@@ -553,6 +562,21 @@ export default {
           this.config.data.images = {}
         }
         this.configInit()
+      }
+    } else {
+      getConfigByName(this.configName, 'af-system', res => {
+        this.config = res
+        if (this.config.designMode === 'json') {
+          this.jsonConfigInit()
+        } else {
+          if (this.configData !== undefined) {
+            this.config.data = this.configData
+          }
+          if (this.config.data.images === undefined) {
+            this.config.data.images = {}
+          }
+          this.configInit()
+        }
       })
     }
   }

package/src/base-client/components/common/XReport/XReportDesign.vue

@@ -1,113 +1,121 @@
 <template>
-  <div class="reportMain" :style="activatedConfig.width > 0 ? ('width:' + activatedConfig.width + 'px') : undefined">
-    <!--      大标题      -->
-    <h2 class="reportTitle" v-if="activatedConfig.title" v-html="activatedConfig.title"></h2>
-    <!--      小标题 / 介乎于标题与表格之间的内容      -->
-    <div class="subTitle" v-if="activatedConfig.subTitle">
-      <div class="subTitleItems" v-for="(item, itemIndex) in activatedConfig.subTitle" :key="itemIndex">
-        <template v-if="item.type === 'column'">
-          <span>{{ item.text }}</span>
-        </template>
-        <template v-else-if="item.type === 'inputs'">
-          <div class="inputsDiv">
-            <div class="inputsDivItem" v-for="(num, index) of calcFormatInputNum(item.format)" :key="index">
-              <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"/>
+  <div>
+    <template v-if="this.activatedConfig.designMode === 'json'">
+      <XReportJsonRender :config="activatedConfig"/>
+    </template>
+    <template v-else>
+      <div class="reportMain" :style="activatedConfig.width > 0 ? ('width:' + activatedConfig.width + 'px') : undefined">
+        <!--      大标题      -->
+        <h2 class="reportTitle" v-if="activatedConfig.title" v-html="activatedConfig.title"></h2>
+        <!--      小标题 / 介乎于标题与表格之间的内容      -->
+        <div class="subTitle" v-if="activatedConfig.subTitle">
+          <div class="subTitleItems" v-for="(item, itemIndex) in activatedConfig.subTitle" :key="itemIndex">
+            <template v-if="item.type === 'column'">
+              <span>{{ item.text }}</span>
+            </template>
+            <template v-else-if="item.type === 'inputs'">
+              <div class="inputsDiv">
+                <div class="inputsDivItem" v-for="(num, index) of calcFormatInputNum(item.format)" :key="index">
+                  <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 class="reportTable" v-if="render" :style="activatedConfig.style ? activatedConfig.style : undefined">
+          <tbody class="reportTable">
+            <template v-for="(row, rowIndex) in activatedConfig.columns">
+              <!--  插槽展示  -->
+              <!--        <template v-if="row[0].type === 'slot'">-->
+              <!--          <XReportSlot :config="activatedConfig" v-if="render" :slot-config-name="row[0].slotConfig" :key="rowIndex" :for-display="forDisplay"></XReportSlot>-->
+              <!--        </template>-->
+              <!--  普通行  -->
+              <template v-if="row[0].type !== 'inputColumns' && row[0].type !== 'list'">
+                <template v-if="!forDisplay">
+                  <x-report-tr-group :key="rowIndex" :columns="row" :config-data="activatedConfig.data"></x-report-tr-group>
                 </template>
                 <template v-else>
-                  <a-input v-model="data[item.dataIndex][index]" :style="'width:' + (item.inputWidth ? item.inputWidth : '100') + '%'"/>
+                  <x-report-tr-group :config="activatedConfig" :key="rowIndex" :columns="row" :config-data="activatedConfig.data" :display="true"></x-report-tr-group>
                 </template>
               </template>
+              <!--  列表  -->
+              <template v-else-if="row[0].type === 'list'" v-for="(num, listIndex) in row[0].listLength">
+                <template v-if="!forDisplay">
+                  <x-report-tr-group
+                    :key="rowIndex + listIndex"
+                    :columns="row"
+                    :config-data="activatedConfig.data"
+                    :list-index="listIndex">
+                  </x-report-tr-group>
+                </template>
+                <template v-else>
+                  <x-report-tr-group
+                    :config="activatedConfig"
+                    :key="rowIndex + listIndex"
+                    :columns="row"
+                    :config-data="activatedConfig.data"
+                    :list-index="listIndex"
+                    :display="true">
+                  </x-report-tr-group>
+                </template>
+              </template>
+              <!--  动态行  -->
               <template v-else>
-                {{ activatedConfig.data[item.dataIndex][index] }}
+                <template v-if="forDisplay">
+                  <x-report-tr-group
+                    :columns="row[0].definition"
+                    :config-data="{arr: activatedConfig.data[row[0].dataIndex]}"
+                    :input-columns="true"
+                    v-for="(item, definitionIndex) in activatedConfig.data[row[0].dataIndex]"
+                    :input-columns-definition-index="definitionIndex"
+                    :display="true"
+                    :key="row[0].dataIndex + definitionIndex + rowIndex"></x-report-tr-group>
+                </template>
+                <template v-if="!forDisplay">
+                  <x-report-tr-group
+                    :columns="row[0].definition"
+                    :config-data="{arr: activatedConfig.data[row[0].dataIndex]}"
+                    :input-columns="true"
+                    v-for="(item, definitionIndex) in activatedConfig.data[row[0].dataIndex]"
+                    :input-columns-definition-index="definitionIndex"
+                    :key="row[0].dataIndex + definitionIndex + rowIndex"></x-report-tr-group>
+                  <!--  动态行交互按钮  -->
+                  <x-report-tr-group :key="rowIndex" :columns="row" :config-data="activatedConfig.data" :input-columns-button="true" :input-columns="true"></x-report-tr-group>
+                </template>
               </template>
-              <span class="inputsDivItemLabel">{{ displayFormatText(item.format, index) }}</span>
-            </div>
-          </div>
-        </template>
-      </div>
-    </div>
-    <!--      主体表格      -->
-    <table class="reportTable" v-if="render" :style="activatedConfig.style ? activatedConfig.style : undefined">
-      <tbody class="reportTable">
-        <template v-for="(row, rowIndex) in activatedConfig.columns">
-          <!--  插槽展示  -->
-          <!--        <template v-if="row[0].type === 'slot'">-->
-          <!--          <XReportSlot :config="activatedConfig" v-if="render" :slot-config-name="row[0].slotConfig" :key="rowIndex" :for-display="forDisplay"></XReportSlot>-->
-          <!--        </template>-->
-          <!--  普通行  -->
-          <template v-if="row[0].type !== 'inputColumns' && row[0].type !== 'list'">
-            <template v-if="!forDisplay">
-              <x-report-tr-group :key="rowIndex" :columns="row" :config-data="activatedConfig.data"></x-report-tr-group>
-            </template>
-            <template v-else>
-              <x-report-tr-group :config="activatedConfig" :key="rowIndex" :columns="row" :config-data="activatedConfig.data" :display="true"></x-report-tr-group>
-            </template>
-          </template>
-          <!--  列表  -->
-          <template v-else-if="row[0].type === 'list'" v-for="(num, listIndex) in row[0].listLength">
-            <template v-if="!forDisplay">
-              <x-report-tr-group
-                :key="rowIndex + listIndex"
-                :columns="row"
-                :config-data="activatedConfig.data"
-                :list-index="listIndex">
-              </x-report-tr-group>
-            </template>
-            <template v-else>
-              <x-report-tr-group
-                :config="activatedConfig"
-                :key="rowIndex + listIndex"
-                :columns="row"
-                :config-data="activatedConfig.data"
-                :list-index="listIndex"
-                :display="true">
-              </x-report-tr-group>
-            </template>
-          </template>
-          <!--  动态行  -->
-          <template v-else>
-            <template v-if="forDisplay">
-              <x-report-tr-group
-                :columns="row[0].definition"
-                :config-data="{arr: activatedConfig.data[row[0].dataIndex]}"
-                :input-columns="true"
-                v-for="(item, definitionIndex) in activatedConfig.data[row[0].dataIndex]"
-                :input-columns-definition-index="definitionIndex"
-                :display="true"
-                :key="row[0].dataIndex + definitionIndex + rowIndex"></x-report-tr-group>
-            </template>
-            <template v-if="!forDisplay">
-              <x-report-tr-group
-                :columns="row[0].definition"
-                :config-data="{arr: activatedConfig.data[row[0].dataIndex]}"
-                :input-columns="true"
-                v-for="(item, definitionIndex) in activatedConfig.data[row[0].dataIndex]"
-                :input-columns-definition-index="definitionIndex"
-                :key="row[0].dataIndex + definitionIndex + rowIndex"></x-report-tr-group>
-              <!--  动态行交互按钮  -->
-              <x-report-tr-group :key="rowIndex" :columns="row" :config-data="activatedConfig.data" :input-columns-button="true" :input-columns="true"></x-report-tr-group>
             </template>
+          </tbody>
+        </table>
+        <div v-if="showImages" style="margin-top: 5%; display: flex;margin-bottom: 5%">
+          <p>图片：</p>
+          <template v-for="(img,imgIndex) in imageList">
+            <div :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>
           </template>
-        </template>
-      </tbody>
-    </table>
-    <div v-if="showImages" style="margin-top: 5%; display: flex;margin-bottom: 5%">
-      <p>图片：</p>
-      <template v-for="(img,imgIndex) in imageList">
-        <div :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>
-      </template>
-    </div>
+      </div>
+    </template>
   </div>
 </template>
 
 <script>
 import XReportTrGroup from '@vue2-client/base-client/components/common/XReport/XReportTrGroup.vue'
+import XReportJsonRender from '@vue2-client/base-client/components/common/XReport/XReportJsonRender.vue'
 import { getConfigByName } from '@vue2-client/services/api/common'
 
 export default {
@@ -136,7 +144,8 @@ export default {
     }
   },
   components: {
-    XReportTrGroup
+    XReportTrGroup,
+    XReportJsonRender
   },
   data () {
     return {

package/src/base-client/components/common/XReport/XReportJsonRender.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="reportMain">
+    <table class="reportTable">
+      <tbody class="reportTable">
+        <tr v-if="config.title.type && config.title.type !== ''">
+          <th class="tdWithBorder" colspan="12">
+            <template v-if="config.title.type === 'titleKey'">
+              {{ config.data[config.title.value] }}
+            </template>
+            <template v-else-if="config.title.type === 'titleValue'">
+              {{ config.title.value }}
+            </template>
+          </th>
+        </tr>
+        <template v-for="(row, rowIndex) in config.content">
+          <template v-if="row.type === 'jsonKey'">
+            <tr :key="rowIndex">
+              <!--      表头        -->
+              <td class="tdWithBorder" colspan="6">
+                <template v-if="receivedFunction[rowIndex].labelFunction(config).type === 'key'">
+                  {{ config.data[receivedFunction[rowIndex].labelFunction(config).content] }}
+                </template>
+                <template v-else-if="receivedFunction[rowIndex].labelFunction(config).type === 'value'">
+                  {{ receivedFunction[rowIndex].labelFunction(config).content }}
+                </template>
+              </td>
+              <!--      内容        -->
+              <td class="tdWithBorder" colspan="6">
+                <template v-if="receivedFunction[rowIndex].valueFunction(config).type === 'key'">
+                  {{ config.data[receivedFunction[rowIndex].valueFunction(config).content] }}
+                </template>
+                <template v-else-if="receivedFunction[rowIndex].valueFunction(config).type === 'value'">
+                  {{ receivedFunction[rowIndex].valueFunction(config).content }}
+                </template>
+                <template v-else-if="receivedFunction[rowIndex].valueFunction(config).type === 'img'">
+                  <template v-for="(img, imgIndex) in receivedFunction[rowIndex].valueFunction(config).content">
+                    <span :key="imgIndex" class="imgText">
+                      <a-icon type="link"/>
+                      <span @click="openImgModal(img)">{{ formatImgName(img) }}</span>
+                      <br/>
+                    </span>
+                  </template>
+                </template>
+              </td>
+            </tr>
+          </template>
+          <template v-else-if="row.type === 'jsonArray'">
+            <tr :key="rowIndex + '' + jsonArrayItemIndex" v-for="(item, jsonArrayItemIndex) in config.data[row.jsonArrayDataIndex]">
+              <!--      表头        -->
+              <td class="tdWithBorder" colspan="6">
+                <template v-if="receivedFunction[rowIndex].labelFunction(config).type === 'key'">
+                  {{ item[receivedFunction[rowIndex].labelFunction(config).content] }}
+                </template>
+                <template v-if="receivedFunction[rowIndex].labelFunction(config).type === 'value'">
+                  {{ receivedFunction[rowIndex].labelFunction(config).content }}
+                </template>
+              </td>
+              <!--      内容        -->
+              <td class="tdWithBorder" colspan="6">
+                <template v-if="receivedFunction[rowIndex].valueFunction(config).type === 'key'">
+                  {{ item[receivedFunction[rowIndex].valueFunction(config).content] }}
+                </template>
+                <template v-if="receivedFunction[rowIndex].valueFunction(config).type === 'value'">
+                  {{ receivedFunction[rowIndex].valueFunction(config).content }}
+                </template>
+              </td>
+            </tr>
+          </template>
+        </template>
+      </tbody>
+    </table>
+    <a-modal
+      title="图片"
+      width="80%"
+      :visible="showImgModal"
+      @ok="handleShowImgOk"
+      @cancel="handleShowImgCancel"
+      :z-index="1001"
+      :destroyOnClose="true">
+      <div style="width: 100%;display: flex;justify-content: center;align-items: center">
+        <img :src="showImageSrc" alt="图片"/>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'XReportJsonRender',
+  props: {
+    config: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      receivedFunction: [],
+      showImgModal: false,
+      showImageSrc: undefined
+    }
+  },
+  methods: {
+    handleShowImgOk () {
+      this.showImgModal = false
+      this.showImageSrc = undefined
+    },
+    handleShowImgCancel () {
+      this.showImgModal = false
+      this.showImageSrc = undefined
+    },
+    openImgModal (img) {
+      this.showImageSrc = img
+      this.showImgModal = true
+    },
+    formatImgName (imgSrc) {
+      return imgSrc.split('/').pop()
+    }
+  },
+  beforeMount () {
+    for (let i = 0; i < this.config.content.length; i++) {
+      this.receivedFunction.push({
+        // eslint-disable-next-line no-eval
+        labelFunction: eval('(' + this.config.content[i].customFunctionForLabel + ')'),
+        // eslint-disable-next-line no-eval
+        valueFunction: eval('(' + this.config.content[i].customFunctionForValue + ')')
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.reportMain {
+  text-align: center;
+  margin: 0 auto;
+  font-size: 16px;
+  color: #000;
+  background-color: #fff;
+  padding: 15px;
+  border-radius: 8px;
+}
+.reportTitle {
+  font-weight: bold;
+}
+.reportTable {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout:fixed;
+  word-break:break-all;
+}
+.tdWithBorder {
+  border: 1px solid #000;
+  padding: 8px;
+}
+.imgText:hover {
+  color: rgb( 24,144,255);
+  cursor: pointer;
+}
+</style>

package/src/base-client/components/common/XTable/XTable.vue

@@ -229,6 +229,7 @@ export default {
         }),
       }
     },
+    ...mapState('account', { currUser: 'user' }),
     ...mapState('setting', ['compatible'])
   },
   mounted () {},
@@ -294,7 +295,7 @@ export default {
         }
       }
       if (!this.isTableTemp) {
-        result = query(requestParameters, this.serviceName, this.env === 'dev')
+        result = query(Object.assign(requestParameters, { userId: this.currUser.id }), this.serviceName, this.env === 'dev')
       }
       this.clearRowKeys()
       this.$emit('afterQuery', result, requestParameters.conditionParams)
@@ -386,6 +387,7 @@ export default {
             queryParamsName: that.queryParamsName,
             queryParams: that.queryParams,
             form: conditionParams,
+            userId: this.currUser.id
           }, that.serviceName, that.env === 'dev').then(res => {
             let value = res
             if (that.compatible === 'V4') {

package/src/pages/Example/index.vue

@@ -2,8 +2,9 @@
   <div>
     <!--    <XReport :config-name="'test_tableConfig'" :activated-slot-name="'test_tableConfig_slot'"/>-->
     <!--    <XReport :config-name="'test_tableConfig'" :local-config="test_config_withoutSlot" :config-data="test_config_data"/>-->
-    <XReport :config-name="'test_tableConfig'" :local-config="test_config_list" :dont-format="true"/>
+<!--        <XReport :config-name="'test_tableConfig'" :local-config="test_config_list" :dont-format="true"/>-->
     <!--    <XReport :config-name="'test_tableConfig'" />-->
+    <XReport config-name="test_tableConfig" :local-config="test_config_json" :config-data="test_config_json_data"/>
   </div>
 </template>
 
@@ -623,6 +624,46 @@ export default {
           ]
         ],
         cardMode: false
+      },
+      test_config_json: {
+        title: {
+          type: 'titleKey',
+          value: 'f_title'
+        },
+        content: [
+          {
+            customFunctionForLabel: "function (config) {\n  return { type: 'key', content: 'f_project' }\n}",
+            customFunctionForValue: "function (config) {\n  if (config.f_content === null) {\n    return { type: 'value', content: '无' }\n  } else {\n    return { type: 'key', content: 'f_content' }\n  }\n}",
+            type: 'jsonKey'
+          },
+          {
+            customFunctionForLabel: "function (config) {\n  return { type: 'key', content: 'f_name' }\n}",
+            customFunctionForValue: "function (config) {\n  return { type: 'key', content: 'f_content' }\n}",
+            jsonArrayDataIndex: 'f_service',
+            type: 'jsonArray'
+          },
+          {
+            customFunctionForLabel: "function (config) {\n  return { type: 'value', content: '图片' }\n}",
+            customFunctionForValue: "function (config) {\n  return { type: 'img', content: ['/resource/webmeter/cs/20240419/f73770a2f84749ff82a57c5b708d6a8e.png', '/resource/webmeter/cs/20240419/c15564df1ca840ff9d285b6b240207b1.png'] }\n}",
+            type: 'jsonKey'
+          }
+        ],
+        designMode: 'json'
+      },
+      test_config_json_data: {
+        f_title: '我是标题',
+        f_project: '服务',
+        f_content: null,
+        f_service: [
+          {
+            f_name: '维修1',
+            f_content: '第一次上门维修'
+          },
+          {
+            f_name: '保养1',
+            f_content: '第一次上门保养'
+          }
+        ]
       }
     }
   },