vue2-client 1.14.97 → 1.14.99

package/src/base-client/components/layout/XPageView/XTab/XTab.vue

@@ -1,96 +1,96 @@
-<template>
-  <a-card :bordered="false" :body-style="bodyStyle">
-    <a-tabs
-      :tabBarGutter="tabBarGutter"
-      :activeKey="activeKey"
-      @change="tabPaneChange"
-      :hideAdd="true"
-      :tabBarStyle="{ display: showTabBar ? 'block' : 'none' }"
-    >
-      <slot name="extraBeforeTabs"></slot>
-      <a-tab-pane
-        :forceRender="true"
-        v-for="(tab, index) in data"
-        :key="index"
-        :tab="tab.title"
-      >
-        <component
-          :is="resolveComponentType(tab.type)"
-          :key="`xTabPaneComp${index}`"
-          :ref="`tab_comp_${index}`"
-          v-bind="tab.props || {}"
-        />
-      </a-tab-pane>
-    </a-tabs>
-  </a-card>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { resolveComponentType } from '../componentTypes'
-
-const props = defineProps({
-  // 标签页数据
-  data: {
-    type: Array,
-    required: true
-  },
-  // 是否显示标签栏
-  showTabBar: {
-    type: Boolean,
-    default: true
-  },
-  // 标签页切换时的回调函数
-  onChange: {
-    type: [String, Function],
-    default: null
-  },
-  // Tab间距
-  tabBarGutter: {
-    type: Number,
-    default: 10
-  },
-  // 卡片样式
-  bodyStyle: {
-    type: Object,
-    default: () => ({})
-  },
-  // 默认激活的标签页
-  defaultActiveKey: {
-    type: [String, Number],
-    default: 0
-  }
-})
-
-// 激活的标签页
-const activeKey = ref(0)
-
-// 切换标签页
-const tabPaneChange = (newKey) => {
-  if (activeKey.value === newKey) return
-
-  const oldKey = activeKey.value
-  activeKey.value = newKey
-
-  // 触发标签页切换事件
-  if (props.onChange) {
-    try {
-      if (props.onChange instanceof Function) {
-        props.onChange(oldKey, newKey, props.data[oldKey], props.data[newKey])
-      } else {
-        // 创建一个安全的函数执行环境
-        // eslint-disable-next-line no-new-func
-        const onChange = new Function('oldKey', 'newKey', 'oldTab', 'newTab', `return (${props.onChange})(oldKey, newKey, oldTab, newTab)`)
-        onChange(oldKey, newKey, props.data[oldKey], props.data[newKey])
-      }
-    } catch (error) {
-      console.error('执行标签页切换回调错误:', error)
-    }
-  }
-}
-
-// 生命周期
-onMounted(() => {
-  activeKey.value = props.defaultActiveKey
-})
-</script>
+<template>
+  <a-card :bordered="false" :body-style="bodyStyle">
+    <a-tabs
+      :tabBarGutter="tabBarGutter"
+      :activeKey="activeKey"
+      @change="tabPaneChange"
+      :hideAdd="true"
+      :tabBarStyle="{ display: showTabBar ? 'block' : 'none' }"
+    >
+      <slot name="extraBeforeTabs"></slot>
+      <a-tab-pane
+        :forceRender="true"
+        v-for="(tab, index) in data"
+        :key="index"
+        :tab="tab.title"
+      >
+        <component
+          :is="resolveComponentType(tab.type)"
+          :key="`xTabPaneComp${index}`"
+          :ref="`tab_comp_${index}`"
+          v-bind="tab.props || {}"
+        />
+      </a-tab-pane>
+    </a-tabs>
+  </a-card>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { resolveComponentType } from '../componentTypes'
+
+const props = defineProps({
+  // 标签页数据
+  data: {
+    type: Array,
+    required: true
+  },
+  // 是否显示标签栏
+  showTabBar: {
+    type: Boolean,
+    default: true
+  },
+  // 标签页切换时的回调函数
+  onChange: {
+    type: [String, Function],
+    default: null
+  },
+  // Tab间距
+  tabBarGutter: {
+    type: Number,
+    default: 10
+  },
+  // 卡片样式
+  bodyStyle: {
+    type: Object,
+    default: () => ({})
+  },
+  // 默认激活的标签页
+  defaultActiveKey: {
+    type: [String, Number],
+    default: 0
+  }
+})
+
+// 激活的标签页
+const activeKey = ref(0)
+
+// 切换标签页
+const tabPaneChange = (newKey) => {
+  if (activeKey.value === newKey) return
+
+  const oldKey = activeKey.value
+  activeKey.value = newKey
+
+  // 触发标签页切换事件
+  if (props.onChange) {
+    try {
+      if (props.onChange instanceof Function) {
+        props.onChange(oldKey, newKey, props.data[oldKey], props.data[newKey])
+      } else {
+        // 创建一个安全的函数执行环境
+        // eslint-disable-next-line no-new-func
+        const onChange = new Function('oldKey', 'newKey', 'oldTab', 'newTab', `return (${props.onChange})(oldKey, newKey, oldTab, newTab)`)
+        onChange(oldKey, newKey, props.data[oldKey], props.data[newKey])
+      }
+    } catch (error) {
+      console.error('执行标签页切换回调错误:', error)
+    }
+  }
+}
+
+// 生命周期
+onMounted(() => {
+  activeKey.value = props.defaultActiveKey
+})
+</script>

package/src/base-client/components/layout/XPageView/componentTypes.js

@@ -1,22 +1,22 @@
-// 支持的组件类型映射
-export const components = {
-  XTab: () => import('@vue2-client/base-client/components/layout/XPageView/XTab'),
-  XFormTable: () => import('@vue2-client/base-client/components/common/XFormTable'),
-  XAddNativeForm: () => import('@vue2-client/base-client/components/common/XAddNativeForm'),
-  XReportGrid: () => import('@vue2-client/base-client/components/common/XReportGrid/XReport.vue'),
-  XErrorView: () => import('@vue2-client/base-client/components/layout/XPageView/XErrorView'),
-  // 全局组件不需要导入，直接返回null，让Vue使用全局注册的组件
-}
-
-// 组件类型解析函数
-export const resolveComponentType = (type) => {
-  if (!type) return components.XErrorView
-
-  // 如果是Ant Design Vue组件（以'a-'开头），直接返回原名称
-  if (type.startsWith('a-')) {
-    return type
-  }
-
-  // 否则从已注册的组件集合中查找
-  return components[type] || components.XErrorView
-}
+// 支持的组件类型映射
+export const components = {
+  XTab: () => import('@vue2-client/base-client/components/layout/XPageView/XTab'),
+  XFormTable: () => import('@vue2-client/base-client/components/common/XFormTable'),
+  XAddNativeForm: () => import('@vue2-client/base-client/components/common/XAddNativeForm'),
+  XReportGrid: () => import('@vue2-client/base-client/components/common/XReportGrid/XReport.vue'),
+  XErrorView: () => import('@vue2-client/base-client/components/layout/XPageView/XErrorView'),
+  // 全局组件不需要导入，直接返回null，让Vue使用全局注册的组件
+}
+
+// 组件类型解析函数
+export const resolveComponentType = (type) => {
+  if (!type) return components.XErrorView
+
+  // 如果是Ant Design Vue组件（以'a-'开头），直接返回原名称
+  if (type.startsWith('a-')) {
+    return type
+  }
+
+  // 否则从已注册的组件集合中查找
+  return components[type] || components.XErrorView
+}

package/src/pages/WorkflowDetail/WorkFlowDemo2.vue

@@ -30,6 +30,23 @@
     >
     </WorkflowDetail>
     <address-select ref="addressSelect" @setAddress="setForm"></address-select>
+    <!--  协议作废功能  -->
+    <a-modal
+      v-model="formState"
+      :dialog-style="{ top: '5rem' }"
+      :z-index="1001"
+      title="作废"
+      :destroyOnClose="true"
+      width="55vw">
+      <x-add-native-form
+        ref="xCancelForm"
+        @onSubmit="submit"
+      />
+      <template #footer>
+        <a-button key="back" @click="formState = false">取消</a-button>
+        <a-button key="submit" type="primary" :loading="submitLoading" @click="formSubmit">确认</a-button>
+      </template>
+    </a-modal>
   </a-card>
 </template>
 
@@ -54,7 +71,10 @@ export default {
       // 查询配置文件名
       queryParamsName: 'applyCRUD',
       // 发起报建弹框控制
-      applyAddFlag: false
+      applyAddFlag: false,
+      formState: false,
+      submitLoading: false,
+      cancelRecord: {}
     }
   },
   computed: {
@@ -101,6 +121,55 @@ export default {
     },
     setForm (record) {
       this.$refs.workFlow.setFormValue({ address: record.f_address })
+    },
+    // 协议作废
+    setCancel (record) {
+      this.cancelRecord = record
+      this.formState = true
+      this.$nextTick(() => {
+        getConfigByName('setCancelForm', 'af-apply', (config) => {
+          if (this.$refs.xCancelForm) {
+            this.$refs.xCancelForm.init({
+              formItems: config.formJson,
+              title: '补充协议作废',
+              businessType: '修改',
+              showSubmitBtn: false,
+              ...config
+            })
+            if (this.$refs.xCancelForm) {
+              console.log(record)
+              // this.$refs.xCancelForm.setForm(recordData)
+            }
+          } else {
+            console.error('xCancelForm组件未加载完成')
+            // 延迟重试
+            setTimeout(() => {
+              this.setCancel(record)
+            }, 100)
+          }
+        })
+      })
+    },
+    async formSubmit () {
+      this.submitLoading = true
+      const formData = await this.$refs.xCancelForm.asyncSubmit()
+      try {
+        await this.submit(formData)
+      } catch (error) {
+        this.$message.error('表单验证失败，请检查填写内容')
+      } finally {
+        this.submitLoading = false
+      }
+    },
+    async submit (formData) {
+      const data = {
+        ...formData,
+      }
+      console.log('==formData', data)
+      await runLogic('666', data, 'af-apply').then(() => {
+        this.$message.success('操作成功')
+        this.formState = false
+      })
     }
   }
 }