vue2-client 1.15.102 → 1.15.103

package/.history/src/base-client/components/common/XReportGrid/XReportTrGroup_20250612092804.vue

@@ -0,0 +1,731 @@
+<template>
+  <a-row id="has_row" type="flex" :gutter="gutter" :style="isWidget ? {margin: '0px'} : {'margin-bottom': '.5rem'}">
+    <template v-for="(cell, cellIndex) in columns">
+      <a-col
+        name="trGroup"
+        v-if="Array.isArray(cell) || !cell.dontShowRow"
+        :key="cellIndex"
+        :ref="`trGroup_${ cell.slotRef || cellIndex}`"
+        @hook:mounted="(h)=>applyAllStyles(cell,cellIndex)"
+        :span="calculateColSpan(cell)">
+        <div id="report_widget" v-if="isWidget">
+          <!-- 插槽渲染 -->
+          <template v-if="Array.isArray(cell)">
+            <!-- 处理 cell 是数组的情况 -->
+            <div v-for="(item, index) in cell" :key="index">
+              <x-report-tr-group
+                :env="env"
+                :key="index"
+                :columns="recalculateItem(item)"
+                :config-data="configData"
+                :config="config"
+                :display="true">
+              </x-report-tr-group>
+            </div>
+          </template>
+          <template v-else-if="cell.type === 'slot'">
+            <template
+              v-if="['x-form-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse','x-h-descriptions', 'x-sidebar', 'x-list','x-input','x-time-line', 'x-radio','x-calendar', 'x-time-select' ,'x-checkbox', 'x-title', 'x-select', 'x-tree-rows', 'x-three-test-orders', 'x-shift-schedule','x-charge','x-questionnaire'].includes(cell.slotType)">
+              <component
+                :is="getComponentName(cell.slotConfig, cell.serviceName, cell.slotType)"
+                :key="cellIndex"
+                :ref="`dynamicComponent_${ cell.slotRef || cellIndex}`"
+                :serviceName="cell.serviceName"
+                :serverName="cell.serviceName"
+                v-on="getEventHandlers(cell)"
+                @hook:mounted="(h)=>onComponentMounted(h,cell,cellIndex)"
+                @beforeDataChange="beforeDataChange"
+                @rowClick="handleRowClick"
+                @onExpand="onExpand"
+                :queryParamsName="cell.slotConfig"
+                :configName="cell.slotConfig"
+                :countVisible="false"
+                :env="env"
+              />
+            </template>
+          </template>
+        </div>
+        <a-card v-else class="flexItem" :bordered="false">
+          <!-- 插槽渲染 -->
+          <template v-if="Array.isArray(cell)">
+            <!-- 处理 cell 是数组的情况 -->
+            <div v-for="(item, index) in cell" :key="index">
+              <x-report-tr-group
+                :server-name="serverName"
+                :env="env"
+                :key="index"
+                :columns="recalculateItem(item)"
+                :config-data="configData"
+                :config="config"
+                :display="true">
+              </x-report-tr-group>
+            </div>
+          </template>
+          <template v-else-if="cell.type === 'slot'">
+            <template
+              v-if="['x-form-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse', 'x-h-descriptions', 'x-sidebar', 'x-list','x-input','x-time-line', 'x-radio','x-calendar', 'x-time-select','x-checkbox', 'x-title', 'x-select', 'x-tree-rows', 'x-three-test-orders', 'x-shift-schedule','x-charge','x-questionnaire'].includes(cell.slotType)">
+              <component
+                :is="getComponentName(cell.slotConfig, cell.serviceName, cell.slotType)"
+                :key="cellIndex"
+                :ref="`dynamicComponent_${ cell.slotRef || cellIndex}`"
+                :serviceName="cell.serviceName"
+                :serverName="cell.serviceName"
+                v-on="getEventHandlers(cell)"
+                @hook:mounted="(h)=>onComponentMounted(h,cell,cellIndex)"
+                @beforeDataChange="beforeDataChange"
+                @rowClick="handleRowClick"
+                @onExpand="onExpand"
+                :queryParamsName="cell.slotConfig"
+                :configName="cell.slotConfig"
+                :countVisible="false"
+                :env="env"
+              />
+            </template>
+          </template>
+        </a-card>
+      </a-col>
+    </template>
+  </a-row>
+</template>
+
+<script>
+import Upload from '@vue2-client/base-client/components/common/Upload'
+import { getRealKeyData } from '@vue2-client/utils/util'
+import { executeStrFunctionByContext } from '@vue2-client/utils/runEvalFunction'
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+import { getMicroData, getWindow, isMicroAppEnv, microDispatch } from '@vue2-client/utils/microAppUtils'
+
+export default {
+  name: 'XReportTrGroup',
+  components: {
+    Upload,
+    XFormTable: () => import('@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'),
+    XAddNativeForm: () => import('@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'),
+    XFormGroup: () => import('@vue2-client/base-client/components/common/XFormGroup/XFormGroup.vue'),
+    XTreePro: () => import('@vue2-client/base-client/components/common/XTree/XTreePro.vue'),
+    XHisEditor: () => import('@vue2-client/base-client/components/his/XHisEditor/XHisEditor.vue'),
+    XTab: () => import('@vue2-client/base-client/components/common/XTab/XTab.vue'),
+    XReport: () => import('@vue2-client/base-client/components/common/XReport/XReport.vue'),
+    XButtons: () => import('@vue2-client/base-client/components/common/XButtons/XButtons.vue'),
+    XLabelSelect: () => import('@vue2-client/base-client/components/common/XLabelSelect/XLabelSelect.vue'),
+    XConversation: () => import('@vue2-client/base-client/components/common/XConversation/XConversation.vue'),
+    XCheckList: () => import('@vue2-client/base-client/components/common/XCheckList/XCheckList.vue'),
+    XCardSet: () => import('@vue2-client/base-client/components/common/XCardSet/XCardSet.vue'),
+    XCollapse: () => import('@vue2-client/base-client/components/common/XCollapse/XCollapse.vue'),
+    XHDescriptions: () => import('@vue2-client/base-client/components/his/XHDescriptions/XHDescriptions.vue'),
+    XSidebar: () => import('@vue2-client/base-client/components/his/XSidebar/XSidebar.vue'),
+    XList: () => import('@vue2-client/base-client/components/his/XList/XList.vue'),
+    XInput: () => import('@vue2-client/base-client/components/common/XInput/XInput.vue'),
+    XTimeLine: () => import('@vue2-client/base-client/components/common/XTimeline/XTimeline.vue'),
+    XRadio: () => import('@vue2-client/base-client/components/his/XRadio/XRadio.vue'),
+    XCalendar: () => import('@vue2-client/base-client/components/common/XCalendar/XCalendar.vue'),
+    XTimeSelect: () => import('@vue2-client/base-client/components/his/XTimeSelect/XTimeSelect.vue'),
+    XCheckbox: () => import('@vue2-client/base-client/components/his/XCheckbox/XCheckbox.vue'),
+    XTitle: () => import('@vue2-client/base-client/components/his/XTitle/XTitle.vue'),
+    XSelect: () => import('@vue2-client/base-client/components/his/XSelect/XSelect.vue'),
+    XTreeRows: () => import('@vue2-client/base-client/components/his/XTreeRows/XTreeRows.vue'),
+    XThreeTestOrders: () => import('@vue2-client/base-client/components/his/threeTestOrders/threeTestOrders.vue'),
+    XShiftSchedule: () => import('@vue2-client/base-client/components/his/XShiftSchedule/XShiftSchedule.vue'),
+    XCharge: () => import('@vue2-client/base-client/components/his/XCharge/XCharge.vue'),
+    XQuestionnaire: () => import('@vue2-client/base-client/components/his/XQuestionnaire/XQuestionnaire.vue')
+  },
+  props: {
+    // 每一行的配置
+    columns: {
+      type: Array,
+      required: true
+    },
+    showImgInCell: {
+      type: Boolean,
+      default: false
+    },
+    config: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    // 命名空间
+    serverName: {
+      type: String,
+      default: 'af-system'
+    },
+    // 环境
+    env: {
+      type: String,
+      default: 'prod'
+    },
+    // 原始配置
+    configData: {
+      type: Object,
+      required: true
+    },
+    // 是否为展示行
+    display: {
+      type: Boolean,
+      default: false
+    },
+  },
+  computed: {
+    allSlotSum () {
+      // 计算总共有多少个Slot
+      let sum = 0
+      this.columns.forEach((item) => {
+        console.log('item', item)
+        if (Array.isArray(item)) {
+          item.forEach((cell) => {
+            if (cell.type === 'slot') {
+              sum++
+            }
+          })
+        } else if (item.type && item.type === 'slot') {
+          sum++
+        }
+      })
+      console.log(`=总共有 ${sum} 个插槽栅格`)
+      return sum
+    }
+  },
+  data () {
+    return {
+      gutter: [8, { xs: 8, sm: 16, md: 24, lg: 32 }], // 设置水槽大小
+      maxColSpan: 12,
+      uploadParams: {
+        type: 'image',
+        accept: ['*'],
+        resUploadStock: 1,
+        pathKey: 'cs'
+      },
+      mixinData: {},
+      flexItemBodyState: {},
+      // 已经渲染得插槽得数量
+      slotRendered: 0,
+      // tableConfig: {}
+    }
+  },
+  watch: {
+    columns: {
+      deep: true,
+      immediate: true,
+      handler (newVal) {
+        console.log('columns变化:', JSON.parse(JSON.stringify(newVal)))
+        // 使用nextTick确保DOM更新
+        this.$nextTick(() => {
+          this.$forceUpdate()
+        })
+      }
+    }
+  },
+  inject: ['openDialog', 'emitEvent', 'registerComponent', 'setColSpanByName', 'setGlobalData', 'getGlobalData', 'getComponentByName', 'runLogic', 'getMixinData', 'getSelectedId', 'isInAModal', 'getConfigByName', 'getSelectedData', 'getOutEnv', 'currUser', 'isWidget', 'findComponentByName', 'closeAddReport'],
+  methods: {
+    getWindow,
+    isMicroAppEnv,
+    microDispatch,
+    getMicroData,
+    getRealKeyData,
+    handleRowClick (record) {
+      this.$emit('rowClick', record)
+    },
+    beforeDataChange (record) {
+      this.$emit('beforeDataChange', record)
+    },
+    onExpand (expanded, record) {
+      this.$emit('expand', expanded, record)
+    },
+    listClick (data) {
+      this.$emit('listClick', data)
+    },
+    calculateColSpan (cell) {
+      return Array.isArray(cell)
+        ? cell[0][0]?.colSpan * 2
+        : (cell?.colSpan ?? cell?.def?.colSpan ?? 1) * 2
+    },
+    applyAllStyles (cell, cellIndex) {
+      // 应用组件样式
+      const component = this.$refs[`trGroup_${ cell.slotRef || cellIndex}`][0]
+      // 确保组件已经完全挂载
+      this.$nextTick(() => {
+        this.applyComponentStyles(component, cell, cellIndex)
+      })
+    },
+    onComponentMounted (h, cell, cellIndex) {
+      this.slotRendered += 1
+      if (this.slotRendered >= this.allSlotSum) {
+        this.$emit('slotRendered')
+      }
+      if (this.getMixinData && this.getMixinData()) {
+        this.mixinData = this.getMixinData()
+      }
+      if (cell.slotRef) {
+        this.registerComponent(cell.slotRef, this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0])
+      }
+      // 传递给祖先组件
+      console.log(`插槽组件已经初始化 slotType ${cell.slotType}，ref= dynamicComponent_${cell.slotRef || cellIndex} ， serviceName = ${cell.serviceName}`)
+      const shouldInit = cell.shouldInit == null ? true : cell.shouldInit
+      if (shouldInit) {
+        if (cell.slotType === 'x-add-native-form') {
+          // 简易表单需要主动调用初始化方法
+          getConfigByName(cell.slotConfig, cell.serviceName, async (res) => {
+            // 如果配置了 表单初始化logic
+            // 调用 logic 获取参数
+            let param = { ...this.mixinData }
+            let selectedId
+            if (res.paramLogicName) {
+              if (!!this.getSelectedId) {
+                selectedId = this.getSelectedId()
+                if (typeof selectedId !== 'object') {
+                  selectedId = { selectedId: selectedId }
+                }
+              }
+              param = Object.assign(param, await runLogic(res.paramLogicName, selectedId, cell.serviceName))
+            }
+            console.info('给表单赋值', res)
+            this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0].init({
+              serviceName: cell.serviceName,
+              configName: cell.slotConfig,
+              formItems: res.formJson,
+              showSubmitBtn: !this.isInAModal,
+              businessType: param.businessType || '新增',
+              layout: res.xAddFormLayout,
+              primaryKey: res.primaryKey,
+              ...res,
+              fixedAddForm: param,
+              modifyModelData: {
+                files: param.files,
+                images: param.images
+              }
+            })
+          }, this.env === 'dev')
+        } else if (cell.slotType === 'x-form-group') {
+          // 简易表单需要主动调用初始化方法
+          getConfigByName(cell.slotConfig, cell.serviceName, (res) => {
+            // 如果配置了 表单初始化logic
+            // 调用 logic 获取参数
+            const param = { ...this.mixinData }
+            this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0].init({
+              ...res,
+              serviceName: cell.serviceName,
+              showSubmitBtn: !this.isInAModal,
+              businessType: param.businessType || '新增',
+              modifyModelData: param,
+              showLeftTab: true,
+            })
+          }, this.env === 'dev')
+        } else if (cell.slotType === 'x-buttons') {
+          // 按钮组需要主动调用初始化方法
+          getConfigByName(cell.slotConfig, cell.serviceName, (res) => {
+            this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0].init({
+              ...res,
+              serviceName: cell.serviceName,
+            })
+          }, this.env === 'dev')
+        } else if (cell.slotType === 'x-label-select') {
+          // 按钮组需要主动调用初始化方法
+          getConfigByName(cell.slotConfig, cell.serviceName, (res) => {
+            this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0].init({
+              ...res,
+              serviceName: cell.serviceName,
+            })
+          }, this.env === 'dev')
+        }
+      }
+      if (cell.slotType === 'x-report') {
+        const param = { ...this.mixinData }
+        this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0].init(param)
+      }
+      if (cell.slotType === 'x-conversation') {
+        getConfigByName(cell.slotConfig, cell.serviceName, (res) => {
+          this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0].init({
+            serviceName: cell.serviceName,
+            ...res,
+          })
+        }, this.env === 'dev')
+      }
+      if (cell.slotType === 'x-check-list') {
+        getConfigByName(cell.slotConfig, cell.serviceName, (res) => {
+          this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0].init({
+            serviceName: cell.serviceName,
+            ...res,
+          })
+        }, this.env === 'dev')
+      }
+    },
+    recalculateItem (item) {
+      const totalColSpan = item.reduce((sum, cell) => {
+        // 保留手动设置的colSpan
+        return sum + (cell._isManualColSpan ? 0 : (cell.colSpan || 1))
+      }, 0)
+      return item.map(cell => {
+        // 跳过已手动设置的单元格
+        if (cell._isManualColSpan) return cell
+        const newColSpan = Math.round((cell.colSpan || 1) / totalColSpan * 12)
+        return {
+          ...cell,
+          colSpan: newColSpan,
+          // 标记自动计算的单元格
+          _isAutoCalculated: true
+        }
+      })
+    },
+
+    getEventHandlers (cell) {
+      const handlers = {}
+      if (!cell?.events || cell?.events?.length === 0) {
+        return handlers
+      }
+      cell.events.forEach(event => {
+        handlers[event.type] = async (...args) => {
+          console.info('Event handled:', event.type, args)
+          let func = event.customFunction
+          if (func && func.startsWith('function')) {
+            func = func.replace('function', 'async function')
+          }
+          const result = await executeStrFunctionByContext(this, func, args)
+          if (result instanceof Promise) {
+            result.then((res) => {
+              if (!res) return
+              let messageType = 'success'
+              // 如果传递了组件名字 自动调用刷新
+              if (res?.name) {
+                const waitRefreshRef = this.getComponentByName(res.name)
+                if (waitRefreshRef) {
+                  waitRefreshRef.refresh()
+                } else {
+                  console.warn(`未找到组件${res.name}无法刷新`)
+                }
+              }
+              // 如果传递消息类型 自动调用消息
+              if (res?.messageType) {
+                messageType = res.messageType
+              }
+              // 如果传递了提示信息自动调用提示
+              if (res?.message) {
+                this.$message[messageType](res?.message)
+              }
+            })
+          }
+        }
+      })
+      return handlers
+    },
+    getComponentName (queryParamsName, serviceName, componentName) {
+      return componentName
+    },
+    // 判断单元格样式
+    determineCellStyle (cell, color = '#000', borderWidth = '1px') {
+      // 如果声明了borderColor
+      if (this.config.style.borderColor) {
+        color = this.config.style.borderColor
+      }
+      let result = {}
+      // 如果表格也声明了样式，用表格样式将样式覆盖
+      if (cell.style) {
+        if (cell.noBorder) {
+          result = { ...cell.style }
+        } else {
+          if (this.noTopBorder) {
+            result = { ...cell.style }
+          } else {
+            result = { ...cell.style }
+          }
+        }
+        return result
+      }
+      return result
+    },
+    // 把用户定义的组件，传递到整个杉格中，方便调用
+    passComponentNamesToAncestor (refs) {
+      console.log('组件的keys', Object.entries(refs), refs)
+      // 遍历所有 refs
+      Object.entries(refs).forEach(([refKey, refValue]) => {
+        // 检查 ref 是否以 dynamicComponent_ 开头
+        if (refKey.startsWith('dynamicComponent_')) {
+          console.log('组件名存在')
+          const componentRef = refValue[0]
+          if (componentRef) {
+            // 去掉前缀并获取组件名字
+            const index = refKey.replace('dynamicComponent_', '') // 去掉前缀
+            console.log('注册组件', index)
+            // 传递给祖先组件
+            this.registerComponent(index, componentRef)
+          }
+        }
+      })
+    },
+    // 获取组件样式配置
+    async getComponentStyleConfig (componentType) {
+      try {
+        // 从配置中获取样式定义
+        const styleConfig = this.$appdata.getStylesByKey(componentType)
+        return styleConfig || {}
+      } catch (error) {
+        console.error('获取组件样式配置失败:', error)
+        return {}
+      }
+    },
+
+    // 解析组件样式配置
+    async parseComponentStyles (cell) {
+      if (!cell.class) return { rootStyles: {}, childStyles: {} }
+
+      const styleConfig = await this.getComponentStyleConfig(cell.slotType)
+      if (!styleConfig) return { rootStyles: {}, childStyles: {} }
+
+      const rootStyles = {}
+      const childStyles = new Map()
+
+      // 处理每个class配置
+      cell.class.split(' ').forEach(className => {
+        const classConfig = styleConfig[className]
+        if (!classConfig) return
+
+        // 处理根节点样式
+        Object.entries(classConfig).forEach(([key, value]) => {
+          if (!key.startsWith('*') && typeof key !== 'object') {
+            rootStyles[key] = value
+          }
+        })
+
+        // 处理子节点样式
+        this.parseNestedStyles(classConfig, childStyles)
+      })
+
+      console.warn('样式配置', rootStyles, childStyles)
+      return {
+        rootStyles,
+        childStyles
+      }
+    },
+
+    // 递归解析嵌套的样式配置
+    parseNestedStyles (config, styleMap, parentKey = '') {
+      Object.entries(config).forEach(([key, value]) => {
+        if (!key.startsWith('*')) return
+
+        const className = key.replace('*', '.')
+
+        // 如果值是对象，检查是否包含样式和子节点
+        if (typeof value === 'object') {
+          const { style = {}, children = {} } = this.separateStyleAndChildren(value)
+
+          // 创建或获取当前节点的样式配置
+          if (!styleMap.has(className)) {
+            styleMap.set(className, {
+              styles: {},
+              children: new Map()
+            })
+          }
+
+          const nodeData = styleMap.get(className)
+
+          // 合并样式
+          Object.assign(nodeData.styles, style)
+
+          // 递归处理子节点
+          this.parseNestedStyles(children, nodeData.children, className)
+        }
+      })
+    },
+
+    // 分离样式属性和子节点配置
+    separateStyleAndChildren (obj) {
+      const style = {}
+      const children = {}
+
+      Object.entries(obj).forEach(([key, value]) => {
+        if (key.startsWith('*')) {
+          // 子节点配置
+          children[key] = value
+        } else {
+          // 样式属性
+          style[key] = value
+        }
+      })
+
+      return { style, children }
+    },
+
+    // 应用组件样式
+    async applyComponentStyles (component, cell, cellIndex) {
+      if (!component || !component.$el) return
+
+      const { rootStyles, childStyles } = await this.parseComponentStyles(cell)
+
+      // 应用根节点样式
+      if (Object.keys(rootStyles).length > 0) {
+        Object.entries(rootStyles).forEach(([property, value]) => {
+          component.$el.style.setProperty(property, value, 'important')
+        })
+      }
+
+      // 如果没有子节点样式,直接返回
+      if (childStyles.size === 0) return
+
+      let retryCount = 0
+      const maxRetries = 5
+      const retryInterval = 100 // 100ms
+
+      const applyStyles = () => {
+        this.applyChildStylesOptimized(component.$el, childStyles)
+      }
+
+      // 首次应用样式
+      applyStyles()
+
+      // 创建重试机制
+      const retryApplyStyles = () => {
+        if (retryCount >= maxRetries) return
+
+        setTimeout(() => {
+          applyStyles()
+          retryCount++
+          retryApplyStyles()
+        }, retryInterval)
+      }
+
+      // 开始重试
+      retryApplyStyles()
+
+      // 创建 MutationObserver 用于动态内容
+      const observer = new MutationObserver((mutations) => {
+        // 检查是否有新增节点
+        const hasNewNodes = mutations.some(mutation =>
+          mutation.type === 'childList' && mutation.addedNodes.length > 0
+        )
+
+        if (hasNewNodes) {
+          applyStyles()
+        }
+      })
+
+      // 配置 observer
+      observer.observe(component.$el, {
+        childList: true,
+        subtree: true,
+        attributes: false
+      })
+
+      // 3秒后停止观察
+      // setTimeout(() => {
+      //   observer.disconnect()
+      // }, 3000)
+
+      // 组件销毁时清理
+      this.$once('hook:beforeDestroy', () => {
+        observer.disconnect()
+      })
+    },
+
+    // 优化后的子节点样式应用方法
+    applyChildStylesOptimized (rootElement, styleMap, parentSelector = '') {
+      if (!rootElement) return
+
+      // 处理样式映射
+      for (const [selector, data] of styleMap.entries()) {
+        const currentSelector = parentSelector ? `${parentSelector} ${selector}` : selector
+
+        try {
+          // 查找匹配的元素
+          const elements = Array.from(rootElement.querySelectorAll(currentSelector))
+
+          if (!elements.length) continue
+
+          // 应用当前层级样式
+          if (data.styles) {
+            elements.forEach(element => {
+              if (!element) return
+
+              // 应用每个样式属性
+              Object.entries(data.styles).forEach(([property, value]) => {
+                try {
+                  element.style.setProperty(property, value, 'important')
+                } catch (err) {
+                  console.warn(`设置样式失败: ${property}=${value}`, err)
+                }
+              })
+            })
+          }
+
+          // 处理子层级
+          if (data.children && data.children.size > 0) {
+            elements.forEach(element => {
+              if (element) {
+                this.applyChildStylesOptimized(element, data.children, currentSelector)
+              }
+            })
+          }
+        } catch (err) {
+          console.warn(`处理选择器失败: ${currentSelector}`, err)
+          continue
+        }
+      }
+    }
+  },
+  beforeMount () {
+    if (this.useOssForImg) {
+      this.uploadParams.resUploadMode = 'oss'
+    }
+  },
+  mounted () {
+  },
+}
+
+</script>
+
+<style scoped lang="less">
+.inputsDiv {
+  display: flex;
+  justify-content: space-between;
+
+  .inputsDivItem {
+    display: flex;
+    align-items: center;
+    padding: 0 4px;
+    white-space: nowrap;
+
+    .inputsDivItemLabel {
+      padding: 0 4px;
+    }
+  }
+}
+
+.tdNoBorder {
+  border-left: 1px solid #000;
+  border-right: 1px solid #000;
+  padding: 8px;
+}
+
+.tdWithBorder {
+  border: 1px solid #000;
+  padding: 8px;
+}
+
+.tdWithNoTopBorder {
+  border-top-style: none;
+  border-left: 1px solid #000;
+  border-right: 1px solid #000;
+  border-bottom: 1px solid #000;
+  padding: 8px;
+}
+
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+  text-align: center;
+  color: #fff;
+  background-color: #606266;
+}
+
+.bg-purple {
+  background: #9254de;
+}
+
+.bg-purple-light {
+  background: #b37feb;
+}
+
+.flexItem {
+  border-radius: 8px;
+  height: 100%;
+}
+</style>