vue2-client 1.16.62 → 1.16.64

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

@@ -104,6 +104,43 @@ export default {
     }
   },
   methods: {
+    // 通用的样式保护方法
+    protectElementStyles (element, stylesToProtect = ['padding', 'padding-left', 'padding-right', 'padding-top', 'padding-bottom', 'margin', 'background-color', 'color', 'font-size', 'border']) {
+      const protectedStyles = {}
+
+      // 保存需要保护的样式
+      stylesToProtect.forEach(style => {
+        const value = element.style.getPropertyValue(style)
+        if (value) {
+          protectedStyles[style] = value
+        }
+      })
+
+      return protectedStyles
+    },
+
+    // 恢复保护的样式
+    restoreElementStyles (element, protectedStyles) {
+      Object.entries(protectedStyles).forEach(([property, value]) => {
+        if (value) {
+          element.style.setProperty(property, value, 'important')
+        }
+      })
+    },
+
+    // 安全地设置布局样式，保护其他样式
+    safeSetLayoutStyles (element, layoutStyles) {
+      // 保护所有可能的样式配置
+      const protectedStyles = this.protectElementStyles(element)
+
+      // 设置布局样式
+      Object.entries(layoutStyles).forEach(([property, value]) => {
+        element.style.setProperty(property, value)
+      })
+
+      // 恢复保护的样式
+      this.restoreElementStyles(element, protectedStyles)
+    },
     toggleDrawer () {
       this.isOpen = !this.isOpen
       this.$emit('on-drawer-change', this.isOpen)
@@ -144,7 +181,7 @@ export default {
       })
     },
     // 获取同级的其他所有a-col元素
-    getSiblingCols () {
+    getSiblingCols (className) {
       try {
         // 找到当前组件所在的a-col
         let currentCol = this.$el.parentNode
@@ -162,10 +199,8 @@ export default {
           return []
         }
 
-        // 修改这里：只获取直接子元素中的.ant-col-12
-        const allCols = Array.from(row.children).filter(child =>
-          child.className.includes('ant-col-12')
-        )
+        // 修改这里 如果没有指定className 则获取全部
+        const allCols = Array.from(row.children).filter(child => !className || child.className.includes(className))
 
         // 过滤掉当前a-col，返回其他所有a-col
         return allCols.filter(col => col !== currentCol)
@@ -174,10 +209,48 @@ export default {
         return []
       }
     },
+
+    computeRemainingWidth (allElements, mainCol, currentCol) {
+      if (!allElements || allElements.length === 0) {
+        return '0px'
+      }
+
+      // 排除 mainCol 和 currentCol
+      const filteredElements = allElements.filter(element =>
+        element !== mainCol && element !== currentCol
+      )
+
+      if (filteredElements.length === 0) {
+        return '0px'
+      }
+
+      let totalWidth = 0
+
+      filteredElements.forEach(element => {
+        if (element && element.style) {
+          // 获取元素的计算样式
+          const computedStyle = window.getComputedStyle(element)
+
+          // 获取宽度（包括padding和border）
+          const width = parseFloat(computedStyle.width) || 0
+
+          // 获取左右margin
+          const marginLeft = parseFloat(computedStyle.marginLeft) || 0
+          const marginRight = parseFloat(computedStyle.marginRight) || 0
+
+          // 累加总宽度（宽度 + 左右margin）
+          totalWidth += width + marginLeft + marginRight
+        }
+      })
+
+      // 返回计算出的宽度，如果计算失败则返回默认值
+      return totalWidth > 0 ? `${totalWidth}px` : '0px'
+    },
+
     updateLayout (isOpen) {
       this.$nextTick(() => {
         try {
-          const otherCols = this.getSiblingCols()
+          const otherCols = this.getSiblingCols('ant-col-12')
           if (otherCols.length > 0) {
             let currentCol = this.$el.parentNode
             while (currentCol && !currentCol.className.includes('ant-col')) {
@@ -197,28 +270,42 @@ export default {
               if (isOpen) {
                 if (this.affectLayout) {
                   if (this.widthMode === 'px') {
-                    const drawerWidth = this.expandedWidth || 584
-                    // 使用 style 对象逐个设置属性，保留其他样式
-                    currentCol.style.flex = `0 0 ${drawerWidth}px`
-                    currentCol.style.maxWidth = `${drawerWidth}px`
-                    currentCol.style.transition = 'all 0.3s'
+                    const drawerWidth = this.expandedWidth || 602
+                    // 使用安全的方式设置布局样式
+                    this.safeSetLayoutStyles(currentCol, {
+                      flex: `0 0 ${drawerWidth}px`,
+                      maxWidth: `${drawerWidth}px`,
+                      transition: 'all 0.3s'
+                    })
                     if (otherCols.length === 1) {
                       const mainCol = otherCols[0]
-                      mainCol.style.flex = '1 1 auto'
-                      mainCol.style.maxWidth = `calc(${this.totalWidth} - ${drawerWidth}px)`
-                      mainCol.style.transition = 'all 0.3s'
+                      const remainingWidth = this.computeRemainingWidth(this.getSiblingCols(undefined), mainCol, currentCol)
+
+                      // 使用安全的方式设置布局样式
+                      this.safeSetLayoutStyles(mainCol, {
+                        flex: '1 1 auto',
+                        maxWidth: `calc(100% - ${remainingWidth} - ${drawerWidth}px)`,
+                        transition: 'all 0.3s'
+                      })
                     }
                   } else {
                     const drawerWidth = (this.expandedWidthPercent || 33.3)
-                    currentCol.style.flex = `0 0 ${drawerWidth}%`
-                    currentCol.style.maxWidth = `${drawerWidth}%`
-                    currentCol.style.transition = 'all 0.3s'
+                    // 使用安全的方式设置布局样式
+                    this.safeSetLayoutStyles(currentCol, {
+                      flex: `0 0 ${drawerWidth}%`,
+                      maxWidth: `${drawerWidth}%`,
+                      transition: 'all 0.3s'
+                    })
                     if (otherCols.length === 1) {
                       const mainCol = otherCols[0]
-                      const mainWidth = Math.max(0, Math.min(this.totalWidth, 100) - drawerWidth)
-                      mainCol.style.flex = `0 0 ${mainWidth}%`
-                      mainCol.style.maxWidth = `${mainWidth}%`
-                      mainCol.style.transition = 'all 0.3s'
+                      const remainingWidth = this.computeRemainingWidth(this.getSiblingCols(undefined), mainCol, currentCol)
+
+                      // 使用安全的方式设置布局样式
+                      this.safeSetLayoutStyles(mainCol, {
+                        flex: `0 0 calc(100% - ${remainingWidth} - ${drawerWidth}%)`,
+                        maxWidth: `calc(100% - ${remainingWidth} - ${drawerWidth}%)`,
+                        transition: 'all 0.3s'
+                      })
                     }
                   }
                 } else {
@@ -234,14 +321,23 @@ export default {
                 triggerResize()
               } else {
                 // 收缩状态
-                currentCol.style.flex = '0 0 26px'
-                currentCol.style.maxWidth = '26px'
-                currentCol.style.transition = 'all 0.3s'
+                const width = this.widthMode === 'px' ? this.collapsedWidth + 'px' : this.collapsedWidthPercent + '%'
+                // 使用安全的方式设置布局样式
+                this.safeSetLayoutStyles(currentCol, {
+                  flex: '0 0 ' + width,
+                  maxWidth: width,
+                  transition: 'all 0.3s'
+                })
                 if (otherCols.length === 1) {
                   const mainCol = otherCols[0]
-                  mainCol.style.flex = '1 1 auto'
-                  mainCol.style.maxWidth = 'calc(100% - 26px)'
-                  mainCol.style.transition = 'all 0.3s'
+                  const remainingWidth = this.computeRemainingWidth(this.getSiblingCols(undefined), mainCol, currentCol)
+
+                  // 使用安全的方式设置布局样式
+                  this.safeSetLayoutStyles(mainCol, {
+                    flex: '1 1 auto',
+                    maxWth: `calc(100% - ${remainingWidth} - ${width})`,
+                    transition: 'all 0.3s'
+                  })
                 }
                 triggerResize()
               }

package/src/pages/WorkflowDetail/WorkFlowDemo3.vue

@@ -1,203 +1,203 @@
-<template>
-  <div id="beingProcessed">
-    <x-form-table
-      title="我的工单"
-      ref="xFormTable"
-      :queryParamsName="queryParamsName"
-      :fixed-query-form="{
-        users_f_handler_id: currUser.id,
-      }"
-      @action="toDetail">
-      <template #leftButton>
-        <a-button @click="addApply">
-          <a-icon type="plus"/>
-          发起报建
-        </a-button>
-      </template>
-    </x-form-table>
-    <a-modal
-      v-model="applyAddFlag"
-      :footer="null"
-      :dialog-style="{ top: '5rem' }"
-      :z-index="1001"
-      title="发起报建"
-      :destroyOnClose="true">
-      <x-add-native-form ref="xForm" @onSubmit="applySubmit"/>
-    </a-modal>
-    <WorkflowDetail
-      ref="workFlow"
-      @success="success"
-      @nextClick="nextClick"
-      @x-form-item-emit-func="handleFormItemEvent"
-    >
-    </WorkflowDetail>
-    <!--  地址选择器  -->
-    <address-select ref="addressSelect" @setAddress="setForm"></address-select>
-  </div>
-</template>
-
-<script>
-import WorkflowDetail from '@vue2-client/pages/WorkflowDetail/WorkflowDetail.vue'
-import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
-import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
-import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
-import { mapState } from 'vuex'
-import AddressSelect from '@vue2-client/pages/addressSelect/index.vue'
-import XFormGroup from '@vue2-client/base-client/components/common/XFormGroup'
-
-export default {
-  name: 'Apply',
-  components: {
-    XFormTable,
-    XAddNativeForm,
-    WorkflowDetail,
-    AddressSelect,
-    XFormGroup,
-  },
-  // 透传给子组件的方法（目前XFormTable接了）
-  provide () {
-    return {
-      generalFunction: {
-        setCancel: this.setCancel,
-        chargeAdd: this.chargeAdd,
-        addUser: this.addUser,
-        editUser: this.editUser,
-        addContract: this.addContract,
-        addcharge: this.addcharge,
-        updateFormData: this.updateFormData,
-        chargeCancel: this.chargeCancel,
-        chargeBatchRefund: this.chargeBatchRefund,
-      }
-    }
-  },
-  data () {
-    return {
-      // 查询配置文件名
-      queryParamsName: 'ApplyProcessCRUD',
-      // 发起报建弹框控制
-      applyAddFlag: false,
-      // 提交加载动画
-      confirmLoading: false,
-      refreshFn: null,
-      chargeVisible: false
-    }
-  },
-  computed: {
-    ...mapState('account', { currUser: 'user' }),
-  },
-  methods: {
-    addApply () {
-      console.log('打开了吗')
-      this.applyAddFlag = true
-      this.$nextTick(
-        () => {
-          getConfigByName('addApplyForm', 'af-apply', (res) => {
-            this.$refs.xForm.init({
-              businessType: '新增',
-              title: '发起报建',
-              ...res
-            })
-          })
-        }
-      )
-    },
-    applySubmit (formData) {
-      runLogic('addApply', formData).then(
-        res => {
-          this.$message.success('发起报建成功')
-          this.$refs.xFormTable.refreshTable(true)
-          this.applyAddFlag = false
-        }
-      ).catch(() => {
-        this.applyAddFlag = false
-      })
-    },
-    success () {
-      console.log('完工')
-    },
-    toDetail (record, id) {
-      this.$refs.workFlow.init({
-        workflowId: record.ab_f_workflow_id
-      })
-    },
-    handleFormItemEvent (func, data, value) {
-      console.log('打印一下：', func, data, value)
-      if (func === 'selectAddress') {
-        this.$refs.addressSelect.setFormShow()
-      }
-    },
-    setForm (record) {
-      this.$refs.workFlow.setFormValue({ address: record.f_address, address_id: record.f_address_id })
-    },
-    nextClick ({ form, formStep, workflowId }) {
-      console.log('success', form, formStep, workflowId)
-      const data = {
-        workflowId,
-        form,
-        formStep
-      }
-      runLogic('applySubmitAfter', data, 'af-apply').then(
-        res => {
-          if (res) {
-            // this.$message.success('提交成功！')
-            this.$refs.xFormTable.refreshTable(true)
-          }
-        }
-      )
-    },
-    // 协议作废
-    setCancel (record, refreshFn) {
-      this.$refs.cancelContract.setCancel(record, refreshFn)
-    },
-    // 增值收费新增
-    chargeAdd (refreshFn) {
-      this.$refs.addCharge.chargeAdd(this.$refs.workFlow.workflowId, refreshFn)
-    },
-    // 协议新增
-    addContract (refreshFn) {
-      this.$refs.addContract.addContract(this.$refs.workFlow.workflowId, refreshFn)
-    },
-    // 新增用户
-    addUser (refreshFn) {
-      if (this.$refs.workFlow.$refs.baseInformation.details.f_workflow_define_name != '团购报建流程') {
-        this.$message.success('只有团购报建流程才可以新增用户信息!')
-        return
-      }
-      this.$refs.addUser.addUser(this.$refs.workFlow.workflowId, refreshFn)
-    },
-    // 编辑用户
-    editUser (record, refreshFn) {
-      this.$refs.addUser.editUser(record, refreshFn)
-    },
-    // 新增收费
-    addcharge (refreshFn) {
-      this.$refs.addApplyCharge.addcharge(this.$refs.workFlow.workflowId, refreshFn)
-    },
-    // 报装缴费页面初始化
-    updateFormData (workflowId) {
-      if (this.$refs.workFlow.$refs.baseInformation.details.f_sub_state == '报装缴费') {
-        runLogic('getApplyBusinessrecode', { f_workflow_id: workflowId }, 'af-apply').then((res) => {
-          this.$refs.workFlow.$refs.workflowHandle.$refs.xAddForm.setForm(res)
-        })
-      } else if (this.$refs.workFlow.$refs.baseInformation.details.f_sub_state == '合同签订') {
-        runLogic('queryAgreementAmount', { workflowId: workflowId }, 'af-apply').then((res) => {
-          this.$refs.workFlow.$refs.workflowHandle.$refs.xAddForm.setForm({ add_amount: res[0].f_contract_money })
-        })
-      }
-    },
-    // 增值收费单个数据的撤销功能
-    chargeCancel (record, refreshFn) {
-      this.$refs.cancel.chargeCancel(record, refreshFn)
-    },
-    // 批量撤销(退费)
-    chargeBatchRefund (selectedRowKeys, selectedRows, refreshFn) {
-      if (selectedRowKeys.length === 0 || selectedRows.length === 0) {
-        this.$message.warn('请选择要退费的记录', 5)
-        return
-      }
-      const workflowId = this.$refs.workFlow.workflowId
-      this.$refs.batchRefund.selectRow(selectedRowKeys, selectedRows, refreshFn, workflowId)
-    }
-  }
-}
-</script>
+<template>
+  <div id="beingProcessed">
+    <x-form-table
+      title="我的工单"
+      ref="xFormTable"
+      :queryParamsName="queryParamsName"
+      :fixed-query-form="{
+        users_f_handler_id: currUser.id,
+      }"
+      @action="toDetail">
+      <template #leftButton>
+        <a-button @click="addApply">
+          <a-icon type="plus"/>
+          发起报建
+        </a-button>
+      </template>
+    </x-form-table>
+    <a-modal
+      v-model="applyAddFlag"
+      :footer="null"
+      :dialog-style="{ top: '5rem' }"
+      :z-index="1001"
+      title="发起报建"
+      :destroyOnClose="true">
+      <x-add-native-form ref="xForm" @onSubmit="applySubmit"/>
+    </a-modal>
+    <WorkflowDetail
+      ref="workFlow"
+      @success="success"
+      @nextClick="nextClick"
+      @x-form-item-emit-func="handleFormItemEvent"
+    >
+    </WorkflowDetail>
+    <!--  地址选择器  -->
+    <address-select ref="addressSelect" @setAddress="setForm"></address-select>
+  </div>
+</template>
+
+<script>
+import WorkflowDetail from '@vue2-client/pages/WorkflowDetail/WorkflowDetail.vue'
+import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
+import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+import { mapState } from 'vuex'
+import AddressSelect from '@vue2-client/pages/addressSelect/index.vue'
+import XFormGroup from '@vue2-client/base-client/components/common/XFormGroup'
+
+export default {
+  name: 'Apply',
+  components: {
+    XFormTable,
+    XAddNativeForm,
+    WorkflowDetail,
+    AddressSelect,
+    XFormGroup,
+  },
+  // 透传给子组件的方法（目前XFormTable接了）
+  provide () {
+    return {
+      generalFunction: {
+        setCancel: this.setCancel,
+        chargeAdd: this.chargeAdd,
+        addUser: this.addUser,
+        editUser: this.editUser,
+        addContract: this.addContract,
+        addcharge: this.addcharge,
+        updateFormData: this.updateFormData,
+        chargeCancel: this.chargeCancel,
+        chargeBatchRefund: this.chargeBatchRefund,
+      }
+    }
+  },
+  data () {
+    return {
+      // 查询配置文件名
+      queryParamsName: 'ApplyProcessCRUD',
+      // 发起报建弹框控制
+      applyAddFlag: false,
+      // 提交加载动画
+      confirmLoading: false,
+      refreshFn: null,
+      chargeVisible: false
+    }
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' }),
+  },
+  methods: {
+    addApply () {
+      console.log('打开了吗')
+      this.applyAddFlag = true
+      this.$nextTick(
+        () => {
+          getConfigByName('addApplyForm', 'af-apply', (res) => {
+            this.$refs.xForm.init({
+              businessType: '新增',
+              title: '发起报建',
+              ...res
+            })
+          })
+        }
+      )
+    },
+    applySubmit (formData) {
+      runLogic('addApply', formData).then(
+        res => {
+          this.$message.success('发起报建成功')
+          this.$refs.xFormTable.refreshTable(true)
+          this.applyAddFlag = false
+        }
+      ).catch(() => {
+        this.applyAddFlag = false
+      })
+    },
+    success () {
+      console.log('完工')
+    },
+    toDetail (record, id) {
+      this.$refs.workFlow.init({
+        workflowId: record.ab_f_workflow_id
+      })
+    },
+    handleFormItemEvent (func, data, value) {
+      console.log('打印一下：', func, data, value)
+      if (func === 'selectAddress') {
+        this.$refs.addressSelect.setFormShow()
+      }
+    },
+    setForm (record) {
+      this.$refs.workFlow.setFormValue({ address: record.f_address, address_id: record.f_address_id })
+    },
+    nextClick ({ form, formStep, workflowId }) {
+      console.log('success', form, formStep, workflowId)
+      const data = {
+        workflowId,
+        form,
+        formStep
+      }
+      runLogic('applySubmitAfter', data, 'af-apply').then(
+        res => {
+          if (res) {
+            // this.$message.success('提交成功！')
+            this.$refs.xFormTable.refreshTable(true)
+          }
+        }
+      )
+    },
+    // 协议作废
+    setCancel (record, refreshFn) {
+      this.$refs.cancelContract.setCancel(record, refreshFn)
+    },
+    // 增值收费新增
+    chargeAdd (refreshFn) {
+      this.$refs.addCharge.chargeAdd(this.$refs.workFlow.workflowId, refreshFn)
+    },
+    // 协议新增
+    addContract (refreshFn) {
+      this.$refs.addContract.addContract(this.$refs.workFlow.workflowId, refreshFn)
+    },
+    // 新增用户
+    addUser (refreshFn) {
+      if (this.$refs.workFlow.$refs.baseInformation.details.f_workflow_define_name != '团购报建流程') {
+        this.$message.success('只有团购报建流程才可以新增用户信息!')
+        return
+      }
+      this.$refs.addUser.addUser(this.$refs.workFlow.workflowId, refreshFn)
+    },
+    // 编辑用户
+    editUser (record, refreshFn) {
+      this.$refs.addUser.editUser(record, refreshFn)
+    },
+    // 新增收费
+    addcharge (refreshFn) {
+      this.$refs.addApplyCharge.addcharge(this.$refs.workFlow.workflowId, refreshFn)
+    },
+    // 报装缴费页面初始化
+    updateFormData (workflowId) {
+      if (this.$refs.workFlow.$refs.baseInformation.details.f_sub_state == '报装缴费') {
+        runLogic('getApplyBusinessrecode', { f_workflow_id: workflowId }, 'af-apply').then((res) => {
+          this.$refs.workFlow.$refs.workflowHandle.$refs.xAddForm.setForm(res)
+        })
+      } else if (this.$refs.workFlow.$refs.baseInformation.details.f_sub_state == '合同签订') {
+        runLogic('queryAgreementAmount', { workflowId: workflowId }, 'af-apply').then((res) => {
+          this.$refs.workFlow.$refs.workflowHandle.$refs.xAddForm.setForm({ add_amount: res[0].f_contract_money })
+        })
+      }
+    },
+    // 增值收费单个数据的撤销功能
+    chargeCancel (record, refreshFn) {
+      this.$refs.cancel.chargeCancel(record, refreshFn)
+    },
+    // 批量撤销(退费)
+    chargeBatchRefund (selectedRowKeys, selectedRows, refreshFn) {
+      if (selectedRowKeys.length === 0 || selectedRows.length === 0) {
+        this.$message.warn('请选择要退费的记录', 5)
+        return
+      }
+      const workflowId = this.$refs.workFlow.workflowId
+      this.$refs.batchRefund.selectRow(selectedRowKeys, selectedRows, refreshFn, workflowId)
+    }
+  }
+}
+</script>

package/src/router/async/router.map.js

@@ -66,6 +66,7 @@ path: 'example',
   // component: () => import('@vue2-client/base-client/components/common/XRate/demo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XForm/demo.vue'),
   // component: () => import('@vue2-client/base-client/components/his/XTimeSelect/XTimeSelectDemo.vue'),
+  // component: () => import('@vue2-client/base-client/components/his/XCharge/XChargeDemo.vue'),
   // component: () => import('@vue2-client/base-client/components/his/XImportExcelButton/XFrontImportExcelDemo.vue'),
   // component: () => import('@vue2-client/pages/WorkflowDetail/WorkFlowDemo.vue'),
   // component: () => import('@vue2-client/pages/WorkflowDetail/WorkFlowDemo.vue'),