vue2-client 1.13.25 → 1.13.27

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

@@ -1,166 +1,166 @@
-<template>
-  <div>
-    <a-row type="flex" justfy="space-around">
-      <template v-for="(item, index) in config">
-        <!--    展示项    -->
-        <a-col :key="'col' + index" :span="Math.floor(24 / config.length)">
-          <div class="item">
-            <!--    标题    -->
-            <p class="label">{{ item.label }}</p>
-            <!--    内容 - 进度条    -->
-            <template v-if="item.type === 'percent'">
-              <p class="value" :style="'color: ' + determineColor(data[item.key])">{{ data[item.key] }}%</p>
-            </template>
-            <!--    内容 - 非进度条    -->
-            <template v-else>
-              <p class="value" :style="item.style ? item.style : ''">{{ data[item.key] }}</p>
-            </template>
-          </div>
-        </a-col>
-        <!--    分割线    -->
-        <a-col :key="'col' + index + 'after'" :span="1" v-if="index !== config.length - 1" class="divider-col">
-          <a-divider type="vertical" class="divider"/>
-        </a-col>
-      </template>
-    </a-row>
-  </div>
-</template>
-
-<script>
-
-import { getConfigByName } from '@vue2-client/services/api/common'
-
-export default {
-  name: 'XSimpleDescriptions',
-  props: {
-    // 配置
-    dataConfig: {
-      type: Array,
-      default: undefined
-    },
-    // 数据
-    dataContent: {
-      type: Object,
-      default: undefined
-    },
-    // 配置名
-    dataConfigName: {
-      type: String,
-      default: undefined
-    },
-    // 服务名
-    serviceName: {
-      type: String,
-      default: process.env.VUE_APP_SYSTEM_NAME
-    }
-  },
-  data () {
-    return {
-      // 配置
-      config: [],
-      // 数据
-      data: {},
-    }
-  },
-  mounted () {
-    // 初始化配置
-    if (this.dataConfig) {
-      this.config = this.dataConfig
-    } else if (this.dataConfigName) {
-      getConfigByName(this.dataConfigName, this.serviceName, (res) => {
-        this.config = res.config
-      })
-    } else {
-      this.config = [
-        {
-          label: '未能正确获取配置',
-          key: 'totalUser'
-        },
-        {
-          label: '未能正确获取配置',
-          key: 'totalResidentArea'
-        },
-        {
-          label: '未能正确获取配置',
-          key: 'doneNum'
-        },
-        {
-          label: '未能正确获取配置',
-          key: 'todoNum'
-        },
-        {
-          label: '未能正确获取配置',
-          key: 'ratio',
-          type: 'percent'
-        }
-      ]
-    }
-
-    // 初始化数据
-    if (this.dataContent) {
-      this.data = this.dataContent
-    } else {
-      this.data = {
-        totalUser: 0,
-        totalResidentArea: 0,
-        doneNum: 0,
-        todoNum: 0,
-        ratio: 20
-      }
-    }
-  },
-  methods: {
-    // 根据完成率决定颜色
-    determineColor (ratio) {
-      let result
-      if (ratio >= 90) {
-        result = 'rgb(   1,245, 38 )'
-      } else if (ratio >= 75) {
-        result = 'rgb( 139,245,  0)'
-      } else if (ratio >= 40) {
-        result = 'rgb(245,163,  0)'
-      } else if (ratio >= 20) {
-        result = 'rgb(244, 96,  0)'
-      } else {
-        result = 'rgb(255,  0,  0)'
-      }
-      return result
-    }
-  },
-  watch: {
-    dataContent: {
-      handler (newValue) {
-        this.data = newValue
-      },
-      deep: true
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.item {
-  padding: 5%;
-
-  .label {
-    color: rgba(117, 117, 117, 0.8);
-    text-align: center;
-  }
-
-  .value {
-    color: rgb( 51,157,255 );
-    font-size: 1.6em;
-    text-align: center;
-  }
-}
-
-.divider-col {
-  display: flex;
-  justify-content: center;
-
-  .divider {
-    margin-top: 35%;
-    height: 40px;
-  }
-}
-</style>
+<template>
+  <div>
+    <a-row type="flex" justfy="space-around">
+      <template v-for="(item, index) in config">
+        <!--    展示项    -->
+        <a-col :key="'col' + index" :span="Math.floor(24 / config.length)">
+          <div class="item">
+            <!--    标题    -->
+            <p class="label">{{ item.label }}</p>
+            <!--    内容 - 进度条    -->
+            <template v-if="item.type === 'percent'">
+              <p class="value" :style="'color: ' + determineColor(data[item.key])">{{ data[item.key] }}%</p>
+            </template>
+            <!--    内容 - 非进度条    -->
+            <template v-else>
+              <p class="value" :style="item.style ? item.style : ''">{{ data[item.key] }}</p>
+            </template>
+          </div>
+        </a-col>
+        <!--    分割线    -->
+        <a-col :key="'col' + index + 'after'" :span="1" v-if="index !== config.length - 1" class="divider-col">
+          <a-divider type="vertical" class="divider"/>
+        </a-col>
+      </template>
+    </a-row>
+  </div>
+</template>
+
+<script>
+
+import { getConfigByName } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XSimpleDescriptions',
+  props: {
+    // 配置
+    dataConfig: {
+      type: Array,
+      default: undefined
+    },
+    // 数据
+    dataContent: {
+      type: Object,
+      default: undefined
+    },
+    // 配置名
+    dataConfigName: {
+      type: String,
+      default: undefined
+    },
+    // 服务名
+    serviceName: {
+      type: String,
+      default: process.env.VUE_APP_SYSTEM_NAME
+    }
+  },
+  data () {
+    return {
+      // 配置
+      config: [],
+      // 数据
+      data: {},
+    }
+  },
+  mounted () {
+    // 初始化配置
+    if (this.dataConfig) {
+      this.config = this.dataConfig
+    } else if (this.dataConfigName) {
+      getConfigByName(this.dataConfigName, this.serviceName, (res) => {
+        this.config = res.config
+      })
+    } else {
+      this.config = [
+        {
+          label: '未能正确获取配置',
+          key: 'totalUser'
+        },
+        {
+          label: '未能正确获取配置',
+          key: 'totalResidentArea'
+        },
+        {
+          label: '未能正确获取配置',
+          key: 'doneNum'
+        },
+        {
+          label: '未能正确获取配置',
+          key: 'todoNum'
+        },
+        {
+          label: '未能正确获取配置',
+          key: 'ratio',
+          type: 'percent'
+        }
+      ]
+    }
+
+    // 初始化数据
+    if (this.dataContent) {
+      this.data = this.dataContent
+    } else {
+      this.data = {
+        totalUser: 0,
+        totalResidentArea: 0,
+        doneNum: 0,
+        todoNum: 0,
+        ratio: 20
+      }
+    }
+  },
+  methods: {
+    // 根据完成率决定颜色
+    determineColor (ratio) {
+      let result
+      if (ratio >= 90) {
+        result = 'rgb(   1,245, 38 )'
+      } else if (ratio >= 75) {
+        result = 'rgb( 139,245,  0)'
+      } else if (ratio >= 40) {
+        result = 'rgb(245,163,  0)'
+      } else if (ratio >= 20) {
+        result = 'rgb(244, 96,  0)'
+      } else {
+        result = 'rgb(255,  0,  0)'
+      }
+      return result
+    }
+  },
+  watch: {
+    dataContent: {
+      handler (newValue) {
+        this.data = newValue
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.item {
+  padding: 5%;
+
+  .label {
+    color: rgba(117, 117, 117, 0.8);
+    text-align: center;
+  }
+
+  .value {
+    color: rgb( 51,157,255 );
+    font-size: 1.6em;
+    text-align: center;
+  }
+}
+
+.divider-col {
+  display: flex;
+  justify-content: center;
+
+  .divider {
+    margin-top: 35%;
+    height: 40px;
+  }
+}
+</style>

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

@@ -149,7 +149,21 @@
     </a-row>
     <!--  如果当前是表格模式  -->
     <template v-if="isTableMode">
-      <x-table-wrapper ref="table" @rowClick="handleRowClick">
+      <x-table-wrapper ref="table">
+        <template slot="expandedRowRender">
+          <!-- 列扩展栅格 -->
+          <x-report
+            v-if="expandedGrid"
+            :env="env"
+            :isWidget="true"
+            :use-oss-for-img="false"
+            :config-name="expandedGrid"
+            :show-img-in-cell="true"
+            :display-only="true"
+            :edit-mode="false"
+            :show-save-button="false"
+            :dont-format="true"/>
+        </template>
         <template slot="footer">
           <slot
             name="footer"
@@ -309,6 +323,8 @@ export default {
       allowSelectRowNum: 0,
       // 头部附件的栅格配置名
       attachGrid: '',
+      // 表格行扩展区域的栅格配置名
+      expandedGrid: '',
       // 是否展示右侧工具栏
       showRightTools: true,
       // 是否展示左边按钮栏
@@ -634,6 +650,7 @@ export default {
         queryParams,
         tableColumns,
         attachGrid,
+        expandedGrid,
         buttonState,
         eventState = {},
         buttonPermissions,
@@ -695,6 +712,7 @@ export default {
         return
       }
       this.attachGrid = attachGrid
+      this.expandedGrid = expandedGrid
       this.viewMode = viewMode
       this.localEditMode = localEditMode
       this.formSubmitTypeInLocalEditMode = formSubmitTypeInLocalEditMode

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

@@ -1,6 +1,8 @@
 <template>
+  <!-- 当expandedGrid存在时渲染带有expandedRowRender的表格 -->
   <s-table
-    ref="table"
+    v-if="tableContext.expandedGrid"
+    ref="expandableTable"
     :id="tableContext.uniqueId"
     :alert="true"
     :columns="tableContext.tableColumns"
@@ -54,7 +56,138 @@
         :record="text"
         :index="index"
         :item="item"
-        :localDataSource="$refs.table.localDataSource"
+        :localDataSource="activeTable?.localDataSource"
+        v-else-if="item.slotCustomFunction"
+        :key="'customJs-' + c_index"></CustomFuncCel>
+      <span v-else-if="item.slotType === 'link'" :key="'link-' + c_index">
+        <a @click="tableContext.columnClick(item.dataIndex,text,record)">{{ text }}</a>
+      </span>
+      <span v-else-if="item.slotType === 'gotoUserDetail'" :key="'gotoUserDetail-' + c_index">
+        <a @click="tableContext.gotoUserDetail(item.dataIndex,text,record)">{{ text }}</a>
+      </span>
+      <span v-else-if="item.slotType === 'ellipsis'" :key="'ellipsis-' + c_index">
+        <ellipsis :length="item.slotValue" tooltip>{{ text === '' ? '--' : text }}</ellipsis>
+      </span>
+      <span v-else-if="item.slotType === 'badge'" :key="'badge-' + c_index">
+        <x-badge
+          :service-name="tableContext.serviceName"
+          :env="tableContext.env"
+          v-if="text !== null && text !== undefined"
+          :badge-key="item.slotKeyMap"
+          :value="text"/>
+      </span>
+      <span v-else-if="item.slotType === 'date'" :key="'date-' + c_index">
+        {{ format(text, 'yyyy-MM-dd') }}
+      </span>
+      <span v-else-if="item.slotType === 'dateTime'" :key="'dateTime-' + c_index">
+        {{ format(text, 'yyyy-MM-dd hh:mm:ss') }}
+      </span>
+      <span v-else-if="item.slotType === 'towDecimal'" :key="'towDecimal-' + c_index">
+        {{ numberFormat(text, 2) }}
+      </span>
+      <span v-else-if="item.slotType === 'fourDecimal'" :key="'fourDecimal-' + c_index">
+        {{ numberFormat(text, 4) }}
+      </span>
+      <span v-else-if="item.slotType === 'int'" :key="'int-' + c_index">
+        {{ numberFormat(text, 0) }}
+      </span>
+      <span v-else-if="item.slotType === 'action'" :key="'action-' + c_index">
+        <template v-if="item.actionArr && item.actionArr.length > 0">
+          <a-dropdown :getPopupContainer=" triggerNode => { return triggerNode.parentNode } ">
+            <a class="ant-dropdown-link" @click="e => e.preventDefault()">
+              {{ item.scopedSlots?.customRender || item.slotValue }} <a-icon type="down"/>
+            </a>
+            <a-menu slot="overlay" style="min-width: 60px">
+              <a-menu-item
+                v-for="(action_item, actionIndex) in item.actionArr"
+                :key="actionIndex"
+                v-show="!action_item.customFunction || tableContext.customFunctionShow(action_item.customFunction,record,c_index)">
+                <a
+                  style="text-align: center"
+                  @click="tableContext.action(record, item.dataIndex, action_item.func)"
+                >{{ action_item.text }}</a>
+              </a-menu-item>
+            </a-menu>
+          </a-dropdown>
+        </template>
+        <template v-if="!item.actionArr || item.actionArr.length === 0">
+          <a @click="tableContext.action(record, item.dataIndex,'action', index)">{{ item.slotValue }}</a>
+        </template>
+      </span>
+    </template>
+    <template slot="expandedRowRender" slot-scope="record">
+      <slot
+        name="expandedRowRender"
+        :selectedRowKeys="tableContext.selectedRowKeys"
+        :selectedRows="tableContext.selectedRows"
+        :record="record"
+      ></slot>
+    </template>
+    <template slot="footer">
+      <slot
+        name="footer"
+        :selectedRowKeys="tableContext.selectedRowKeys"
+        :selectedRows="tableContext.selectedRows"></slot>
+    </template>
+  </s-table>
+
+  <!-- 当expandedGrid不存在时渲染不带expandedRowRender的表格 -->
+  <s-table
+    v-else
+    ref="simpleTable"
+    :id="tableContext.uniqueId"
+    :alert="true"
+    :columns="tableContext.tableColumns"
+    :data="loadData()"
+    :rowKey="tableContext.rowKey"
+    :showSummary="tableContext.showSummary"
+    :rowSelection="tableContext.rowSelection"
+    :scroll="{ x: tableContext.scrollXWidth, y: tableContext.scrollYHeight }"
+    :showPagination="tableContext.showPagination"
+    :hidePagination="tableContext.simpleMode"
+    :showSelected="!tableContext.simpleMode"
+    :pageSize="tableContext.simpleMode ? 1000 : undefined"
+    :setScrollYHeight="tableContext.setScrollYHeight"
+    :selectRowMode="tableContext.selectRowMode"
+    :size="tableContext.tableSize"
+  >
+    <template
+      v-for="(item, c_index) in tableContext.tableColumns"
+      :slot="item.dataIndex"
+      slot-scope="text, record, index">
+      <template v-if="tableContext.isEditMode && getFromItem(item.dataIndex,text, record, index)">
+        <x-form-item
+          class="innerTable"
+          :style="{ paddingTop: 0, paddingBottom: 0, paddingLeft: 0, paddingRight: 0 }"
+          :form="record"
+          :attr="getFromItem(item.dataIndex,text, record, index)"
+          :service-name="tableContext.serviceName"
+          mode="新增/修改"
+          :env="tableContext.env"
+          :setForm="(obj)=>tableContext.setForm(record,obj)"
+          @rowChoose="(row, attr, callback) => tableContext.rowChoose(row, attr, callback, record)"
+          :showLabel="false"
+          :key="'editRow-' + c_index"
+        />
+      </template>
+      <span v-else-if="item.slotType === 'rate'" :key="'rate-' + c_index">
+        <x-rate
+          :value="text"
+          :disabled="true"
+          :allow-half="item.allowHalf"
+          :icon="item.rateIcon"
+          :max-count="item.maxCount"
+          style="zoom:0.9"/>
+      </span>
+      <span v-else-if="item.slotType === 'index'" :key="'index-' + c_index">
+        {{ index + 1 }}
+      </span>
+      <CustomFuncCel
+        :text="text"
+        :record="text"
+        :index="index"
+        :item="item"
+        :localDataSource="activeTable?.localDataSource"
         v-else-if="item.slotCustomFunction"
         :key="'customJs-' + c_index"></CustomFuncCel>
       <span v-else-if="item.slotType === 'link'" :key="'link-' + c_index">
@@ -143,7 +276,11 @@ export default {
   },
   computed: {
     localDataSource () {
-      return this.$refs?.table?.localDataSource
+      return this.activeTable?.localDataSource
+    },
+    // 获取当前活动的表格实例
+    activeTable () {
+      return this.tableContext.expandedGrid ? this.$refs.expandableTable : this.$refs.simpleTable
     }
   },
   props: {
@@ -159,7 +296,7 @@ export default {
       this.$emit('rowClick', record)
     },
     setLocalDataSource (data) {
-      this.$refs.table.setLocalDataSource(data)
+      this.activeTable?.setLocalDataSource(data)
     },
     loadData () {
       if (this.loadSelectedData) {
@@ -190,13 +327,13 @@ export default {
       })
     },
     updateSelect (selectedRowKeys, selectedRows) {
-      this.$refs.table.updateSelect(selectedRowKeys, selectedRows)
+      this.activeTable?.updateSelect(selectedRowKeys, selectedRows)
     },
     clearSelected () {
-      this.$refs.table.clearSelected()
+      this.activeTable?.clearSelected()
     },
     refresh (bool) {
-      this.$refs.table.refresh(bool)
+      this.activeTable?.refresh(bool)
     },
 
     /**

package/src/base-client/components/his/XSidebar/XSidebar.vue

@@ -3,6 +3,7 @@
     class="drawer"
     :class="{ 'drawer-collapsed': !isOpen }">
     <div
+      v-show="!isFrameConfig"
       class="drawer-toggle"
       :class="{ 'toggle-collapsed': !isOpen }"
       @click="toggleDrawer">
@@ -48,7 +49,7 @@ export default {
   },
   data () {
     return {
-      isOpen: false,
+      isOpen: this.queryParamsName?.endsWith('Frame') || false,
       // 定义主内容区域的最大和最小宽度百分比
       mainWithData: [{ max: 80, min: 50 }]
     }
@@ -165,11 +166,23 @@ export default {
     }
   },
   watch: {
-    configData: {
-      handler (newValue) {
-        console.log('configData changed:', newValue)
-      },
-      immediate: true
+    queryParamsName: {
+      immediate: true,
+      handler (newVal) {
+        if (newVal?.endsWith('Frame')) {
+          this.isOpen = true
+          // 确保布局更新
+          this.$nextTick(() => {
+            this.updateLayout(true)
+            this.updateCardBodyPadding()
+          })
+        }
+      }
+    }
+  },
+  computed: {
+    isFrameConfig () {
+      return this.queryParamsName?.endsWith('Frame') || false
     }
   }
 }