vue2-client 1.15.11 → 1.15.12

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/WorkFlowDemo.vue

@@ -1,211 +1,47 @@
-<template>
-  <a-card :bordered="false">
-    <x-form-table
-      title="我的工单"
-      ref="xFormTable"
-      :queryParamsName="queryParamsName"
-      :fixed-query-form="{
-        users_f_handler_id: currUser.id,
-      }"
-      @action="toDetail">
-      <template slot="button">
-        <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>
-    <!--  协议作废功能  -->
-    <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>
-
 <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'
 
 export default {
-  name: 'Apply',
-  components: {
-    XFormTable,
-    XAddNativeForm,
-    WorkflowDetail,
-    AddressSelect
-  },
-  provide () {
-    return {
-      generalFunction: {
-        setCancel: this.setCancel,
-        updateFormData: this.updateFormData,
-      }
-    }
-  },
-  data () {
-    return {
-      // 查询配置文件名
-      queryParamsName: 'ApplyProcessCRUD',
-      // 发起报建弹框控制
-      applyAddFlag: false,
-      formState: false,
-      submitLoading: false,
-      cancelRecord: {}
-    }
-  },
-  computed: {
-    ...mapState('account', { currUser: 'user' }),
+  name: 'WorkFlowDemo',
+  components: { WorkflowDetail },
+  mounted () {
+    this.$refs.workFlow.init({
+      workflowId: '58'
+    })
   },
   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) {
-      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('暂时没有实现的logic', data, 'af-apply').then(() => {
-        this.$message.success('操作成功')
-        this.formState = false
-      })
-    },
-    updateFormData (workflowId) {
-      runLogic('queryAgreementAmount', { workflowId: workflowId }, 'af-apply').then((res) => {
-        console.log('>>>> res==', res)
-        this.$refs.workFlow.$refs.workflowHandle.$refs.xAddForm.setForm({ add_amount: 1200 })
-      })
-      console.log()
+    /**
+     * 流程详情页成功
+     * @param note 备注信息
+     * @param form 表单信息
+     * @param workflowId
+     */
+    success ({ note, form, workflowId }) {
+      console.log('success', note, form, workflowId)
+    },
+    /**
+     * 流程详情页成功
+     * @param note 备注信息
+     * @param form 表单信息
+     * @param workflowId 工作流id
+     * @param fromStepId 起ID
+     * @param toStepId 往ID
+     * @param successStepId 完成步骤id
+     * @param successStep 完成步骤名称
+     * @param fromStep 起步骤名称
+     * @param toStep 往步骤名称
+     */
+    nextClick ({ note, form, workflowId, fromStepId, toStepId, fromStep, toStep, successStepId, successStep }) {
+      console.log('success', note, form, workflowId, fromStepId, toStepId, fromStep, toStep, successStepId, successStep)
     }
   }
 }
 </script>
+
+<template>
+  <WorkflowDetail ref="workFlow" @success="success" @nextClick="nextClick"></WorkflowDetail>
+</template>
+
+<style scoped lang="less">
+
+</style>