|
@@ -15,8 +15,8 @@
|
|
|
v-for="(item, idx) in componentsArr"
|
|
|
:key="idx"
|
|
|
class="create-approval-header-tab-item"
|
|
|
- :class="[item.label === activeName ? 'active' : '']"
|
|
|
- @click="activeComponent(item)"
|
|
|
+ :class="[item.value === activeTab ? 'active' : '']"
|
|
|
+ @click="activeComponent(idx)"
|
|
|
>
|
|
|
<span class="create-approval-header-tab-counter">{{ idx + 1 }}</span>
|
|
|
<span>{{ item.label }}</span>
|
|
@@ -27,13 +27,13 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="create-approval-main">
|
|
|
- <component :is="currentComponent" ref="dyncComponent" />
|
|
|
+ <component :is="item.component" v-for="(item, idx) in componentsArr" v-show="item.value === activeTab" ref="compRefs" :key="idx" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup name="flow_create">
|
|
|
-import { computed, ref } from 'vue'
|
|
|
+import { computed, nextTick, ref } from 'vue'
|
|
|
import { storeToRefs } from 'pinia'
|
|
|
import useFlowStore from '@/store/modules/flow'
|
|
|
import BasicInfoTab from './components/BasicInfo.vue'
|
|
@@ -50,35 +50,37 @@ const route = useRoute()
|
|
|
const flowStore = useFlowStore()
|
|
|
const { categoryId, processId, processIcon, processKey, processName, remark, modelContent, processForm, processSetting } = storeToRefs(flowStore)
|
|
|
|
|
|
-const dyncComponent = ref() // 实例化子组件
|
|
|
+const compRefs = ref() // 实例化子组件
|
|
|
+const cache_components = ref({})
|
|
|
const componentsArr = [
|
|
|
{
|
|
|
component: BasicInfoTab,
|
|
|
label: '基础信息',
|
|
|
- name: '基础信息'
|
|
|
+ value: '基础信息'
|
|
|
// ref: 'basicInfoRef'
|
|
|
},
|
|
|
{
|
|
|
component: FormDesignTab,
|
|
|
label: '表单设计',
|
|
|
- name: '表单设计'
|
|
|
+ value: '表单设计'
|
|
|
// ref: 'formDesignRef'
|
|
|
},
|
|
|
{
|
|
|
component: FlowDesignTab,
|
|
|
label: '流程设计',
|
|
|
- name: '流程设计'
|
|
|
+ value: '流程设计'
|
|
|
// ref: 'flowDesignRef'
|
|
|
},
|
|
|
{
|
|
|
component: ExtendSetTab,
|
|
|
label: '扩展设置',
|
|
|
- name: '扩展设置'
|
|
|
+ value: '扩展设置'
|
|
|
// ref: 'extendSetRef'
|
|
|
}
|
|
|
]
|
|
|
-const activeName = ref('基础信息')
|
|
|
+const activeTab = ref('基础信息')
|
|
|
const removeCurTab = () => {
|
|
|
+ cache_components.value = {}
|
|
|
const _view = tagsView.visitedViews.find(v => v.path === '/flow_create/index')
|
|
|
if (_view)
|
|
|
tagsView.delView(_view).then(res => {
|
|
@@ -88,7 +90,7 @@ const removeCurTab = () => {
|
|
|
} else {
|
|
|
router.push('/')
|
|
|
}
|
|
|
- flowStore.$reset()
|
|
|
+ flowStore.$reset()
|
|
|
})
|
|
|
}
|
|
|
const submitHandler = async () => {
|
|
@@ -96,8 +98,8 @@ const submitHandler = async () => {
|
|
|
// 表单设计
|
|
|
// 流程设计
|
|
|
// 扩展设置
|
|
|
- const leavePageFlag = changeTab()
|
|
|
- if (leavePageFlag) return // 说明表单设计的值有重复的
|
|
|
+ const leavePageFlag = await validateTabs()
|
|
|
+ if (!leavePageFlag) return
|
|
|
const params = {
|
|
|
categoryId: categoryId.value,
|
|
|
processIcon: processIcon.value,
|
|
@@ -109,7 +111,7 @@ const submitHandler = async () => {
|
|
|
modelContent: JSON.stringify({
|
|
|
key: processKey.value,
|
|
|
name: processName.value,
|
|
|
- nodeConfig: JSON.parse(modelContent.value)
|
|
|
+ nodeConfig: JSON.parse(modelContent.value || '{}')
|
|
|
}),
|
|
|
processSetting: processSetting.value
|
|
|
}
|
|
@@ -120,37 +122,58 @@ const submitHandler = async () => {
|
|
|
}
|
|
|
|
|
|
// 切换选项卡之前,做相应的保存操作
|
|
|
-const changeTab = () => {
|
|
|
- let leavePageFlag = false
|
|
|
- if (activeName.value === '表单设计') {
|
|
|
- // 这里针对表单设计单独处理,如果不符合条件,则不允许切换
|
|
|
- dyncComponent.value.exportJsonEv()
|
|
|
- leavePageFlag = dyncComponent.value.validateOnlyEv() // FormDesign.vue中的方法
|
|
|
- if (leavePageFlag) {
|
|
|
- return ElMessage.error(`表单设计中字段ID不能重复,请确认唯一值`)
|
|
|
- }
|
|
|
- } else if (activeName.value === '流程设计') {
|
|
|
- dyncComponent.value.saveDesign()
|
|
|
+const validateTabs = async () => {
|
|
|
+ const _refs = compRefs.value
|
|
|
+ // await nextTick()
|
|
|
+ for (let i = 0; i < _refs.length; i++) {
|
|
|
+ let bool = true
|
|
|
+ /*// 若没开启过的 tab 需要尝试 进行更新数据
|
|
|
+ if (!cache_components.value[i]) {
|
|
|
+ cache_components.value[i]?.updateCompInfo()
|
|
|
+ }*/
|
|
|
+ const _validate =
|
|
|
+ _refs[i]?.validate ||
|
|
|
+ function () {
|
|
|
+ return Promise.resolve()
|
|
|
+ }
|
|
|
+ await _validate().catch(e => {
|
|
|
+ activeTab.value = componentsArr[i].label
|
|
|
+ // 表单设计 额外 弹窗
|
|
|
+ if (activeTab.value === '表单设计') {
|
|
|
+ ElMessage.error(`表单设计中字段ID不能重复,请确认唯一值`)
|
|
|
+ }
|
|
|
+ bool = false
|
|
|
+ })
|
|
|
+ if (!bool) return false
|
|
|
}
|
|
|
- return leavePageFlag
|
|
|
+ return true
|
|
|
}
|
|
|
|
|
|
-const activeComponent = item => {
|
|
|
- const leavePageFlag = changeTab()
|
|
|
- if (!leavePageFlag) {
|
|
|
- activeName.value = item.label
|
|
|
+const activeComponent = index => {
|
|
|
+ const cur = componentsArr[index]
|
|
|
+ if (activeTab.value !== cur.value) {
|
|
|
+ // 当前缓存
|
|
|
+ if (!cache_components.value[index]) {
|
|
|
+ cache_components.value[index] = true
|
|
|
+ // 更新数据
|
|
|
+ const updateCompInfo = compRefs.value[index]?.updateCompInfo
|
|
|
+ // console.error('刷新数据')
|
|
|
+ // console.error(updateCompInfo, 'updateCompInfo')
|
|
|
+ if (updateCompInfo) {
|
|
|
+ updateCompInfo()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ activeTab.value = cur.value
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-const currentComponent = computed(() => {
|
|
|
- return componentsArr.find(item => item.label === activeName.value)?.component
|
|
|
-})
|
|
|
-
|
|
|
const queryObj = computed(() => route.query)
|
|
|
|
|
|
const getCurrentProcessDetailEv = () => {
|
|
|
+ // console.error('api 请求')
|
|
|
let _id = queryObj.value.id
|
|
|
if (_id) {
|
|
|
+ cache_components.value = {}
|
|
|
process.processDetailApi(_id).then(res => {
|
|
|
processId.value = res.processId
|
|
|
categoryId.value = res.categoryId
|