|
|
@@ -1,50 +1,49 @@
|
|
|
<template>
|
|
|
- <!-- 流程表单详情抽屉 -->
|
|
|
- <div class="flow-flowForm-detail">
|
|
|
- <el-drawer v-model="isShowDialog" size="80%" direction="ltr">
|
|
|
- <template #header>
|
|
|
- <h4>{{ t('message.flowForm.detailTitleWithName', { name: state.formData.name||'' }) }}</h4>
|
|
|
- </template>
|
|
|
- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="margin: 8px;">
|
|
|
- <el-tab-pane :label="t('message.flowForm.tabFormDetail')" name="0">
|
|
|
- <div class="form-create-show">
|
|
|
- <FormCreate :option="detailData.option" :rule="detailData.rule" :disabled="true" v-model="formData" />
|
|
|
- </div>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane :label="t('message.flowForm.tabApproveLog')" name="1">
|
|
|
- <FlowLog ref="flowLogRef" :form-id="formId" :form-table="formTable" :key="formId"/>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane :label="t('message.flowForm.tabFlowChart')" name="2">
|
|
|
- <ShowFlowDesign ref="showFlowCheckRef" />
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- </el-drawer>
|
|
|
- </div>
|
|
|
+ <!-- 流程表单详情抽屉 -->
|
|
|
+ <div class="flow-flowForm-detail">
|
|
|
+ <el-drawer v-model="isShowDialog" size="80%" direction="ltr">
|
|
|
+ <template #header>
|
|
|
+ <h4>{{ t('message.flowForm.detailTitleWithName', { name: state.formData.name || '' }) }}</h4>
|
|
|
+ </template>
|
|
|
+ <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="margin: 8px">
|
|
|
+ <el-tab-pane :label="t('message.flowForm.tabFormDetail')" name="0">
|
|
|
+ <div class="form-create-show">
|
|
|
+ <FormCreate :option="detailData.option" :rule="detailData.rule" :disabled="true" v-model="formData" />
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane :label="t('message.flowForm.tabApproveLog')" name="1">
|
|
|
+ <FlowLog ref="flowLogRef" :form-id="formId" :form-table="formTable" :key="formId" />
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane :label="t('message.flowForm.tabFlowChart')" name="2">
|
|
|
+ <ShowFlowDesign ref="showFlowCheckRef" />
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </el-drawer>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
// 引入 form-create
|
|
|
import formCreate from '@form-create/element-ui'
|
|
|
// 引入 form-create-edit
|
|
|
-import FcEditor from "@form-create/component-wangeditor";
|
|
|
-import {reactive, ref, getCurrentInstance, toRefs} from 'vue';
|
|
|
-import {getFlowForm, getFlowFormData} from "/@/api/flow/flowForm";
|
|
|
-import {
|
|
|
- FlowFormEditState, FlowFormTableColumns
|
|
|
-} from "/@/views/flow/flowForm/list/component/model"
|
|
|
-import {setConfAndFields2} from "/@/utils/formCreate";
|
|
|
-import FlowLog from "/@/components/gFlow/flowLog.vue";
|
|
|
-import ShowFlowDesign from "/@/components/gFlow/showDesign.vue";
|
|
|
-import {TabsPaneContext} from "element-plus";
|
|
|
-import {getRunStep} from "/@/api/flow/flowModel";
|
|
|
+import FcEditor from '@form-create/component-wangeditor'
|
|
|
+import { reactive, ref, getCurrentInstance, toRefs } from 'vue'
|
|
|
+import { getFlowForm, getFlowFormData } from '/@/api/flow/flowForm'
|
|
|
+import { FlowFormEditState, FlowFormTableColumns } from '/@/views/flow/flowForm/list/component/model'
|
|
|
+import { setConfAndFields2 } from '/@/utils/formCreate'
|
|
|
+import FlowLog from '/@/components/gFlow/flowLog.vue'
|
|
|
+import ShowFlowDesign from '/@/components/gFlow/showDesign.vue'
|
|
|
+import { TabsPaneContext } from 'element-plus'
|
|
|
+import { getRunStep } from '/@/api/flow/flowModel'
|
|
|
+import { useI18n } from 'vue-i18n'
|
|
|
formCreate.component(FcEditor)
|
|
|
//获取 formCreate 组件
|
|
|
-const FormCreate = formCreate.$form();
|
|
|
+const FormCreate = formCreate.$form()
|
|
|
|
|
|
const props = defineProps({
|
|
|
- statusOptions:{
|
|
|
- type:Array,
|
|
|
- default:()=>[]
|
|
|
- },
|
|
|
+ statusOptions: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
})
|
|
|
const flowLogRef = ref()
|
|
|
const showFlowCheckRef = ref()
|
|
|
@@ -52,126 +51,125 @@ const formId = ref(0)
|
|
|
const formTable = ref('')
|
|
|
const activeName = ref('0')
|
|
|
const handleClick = (tab: TabsPaneContext) => {
|
|
|
- if(tab.index=="1"){
|
|
|
- flowLogRef.value.getLogList()
|
|
|
- }else if(tab.index=="2"){
|
|
|
- getRunStep({formTable:formTable.value,formId:formId.value}).then((res:any)=>{
|
|
|
- showFlowCheckRef.value.showDesign({flowId:res.data?.runFlow||'0',processId:res.data?.runFlowNode||''})
|
|
|
- })
|
|
|
- }
|
|
|
+ if (tab.index == '1') {
|
|
|
+ flowLogRef.value.getLogList()
|
|
|
+ } else if (tab.index == '2') {
|
|
|
+ getRunStep({ formTable: formTable.value, formId: formId.value }).then((res: any) => {
|
|
|
+ showFlowCheckRef.value.showDesign({ flowId: res.data?.runFlow || '0', processId: res.data?.runFlowNode || '' })
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
-const {proxy} = <any>getCurrentInstance()
|
|
|
+const { proxy } = <any>getCurrentInstance()
|
|
|
+const { t } = useI18n()
|
|
|
const dataId = ref(0)
|
|
|
-const formData = ref({});
|
|
|
+const formData = ref({})
|
|
|
const detailData = ref({
|
|
|
- rule: [],
|
|
|
- option: {} as any,
|
|
|
+ rule: [],
|
|
|
+ option: {} as any,
|
|
|
})
|
|
|
const state = reactive<FlowFormEditState>({
|
|
|
- loading:false,
|
|
|
- isShowDialog: false,
|
|
|
- formData: {
|
|
|
- id: undefined,
|
|
|
- name: undefined,
|
|
|
- status: false ,
|
|
|
- remark: undefined,
|
|
|
- createdAt: undefined,
|
|
|
- updatedAt: undefined,
|
|
|
- deletedAt: undefined,
|
|
|
- createdBy: undefined,
|
|
|
- updatedBy: undefined,
|
|
|
- conf: undefined,
|
|
|
- fields: undefined,
|
|
|
- },
|
|
|
- // 表单校验
|
|
|
- rules: {
|
|
|
- name : [
|
|
|
- { required: true, message: "表单名不能为空", trigger: "blur" }
|
|
|
- ],
|
|
|
- status : [
|
|
|
- { required: true, message: "状态不能为空", trigger: "blur" }
|
|
|
- ],
|
|
|
- }
|
|
|
-});
|
|
|
-const {isShowDialog} = toRefs(state);
|
|
|
+ loading: false,
|
|
|
+ isShowDialog: false,
|
|
|
+ formData: {
|
|
|
+ id: undefined,
|
|
|
+ name: undefined,
|
|
|
+ status: false,
|
|
|
+ remark: undefined,
|
|
|
+ createdAt: undefined,
|
|
|
+ updatedAt: undefined,
|
|
|
+ deletedAt: undefined,
|
|
|
+ createdBy: undefined,
|
|
|
+ updatedBy: undefined,
|
|
|
+ conf: undefined,
|
|
|
+ fields: undefined,
|
|
|
+ },
|
|
|
+ // 表单校验
|
|
|
+ rules: {
|
|
|
+ name: [{ required: true, message: '表单名不能为空', trigger: 'blur' }],
|
|
|
+ status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
|
|
|
+ },
|
|
|
+})
|
|
|
+const { isShowDialog } = toRefs(state)
|
|
|
// 打开弹窗
|
|
|
const openDialog = async (row?: FlowFormTableColumns) => {
|
|
|
- resetForm();
|
|
|
- if(row) {
|
|
|
- formId.value = row.actionBtn.wfFid
|
|
|
- formTable.value = row.actionBtn.wfType
|
|
|
- await getFlowForm(row.id!).then((res:any)=>{
|
|
|
- const data = res;
|
|
|
- data.createdBy = data.createdUser?.userNickname
|
|
|
- data.updatedBy = data.updatedUser?.userNickname
|
|
|
- state.formData = data;
|
|
|
- setConfAndFields2(detailData, data.conf, data.fields)
|
|
|
- detailData.value.option.submitBtn = false //隐藏提交按钮
|
|
|
- detailData.value.option.resetBtn = false //隐藏重置按钮
|
|
|
- })
|
|
|
- if(row.dataId && row.dataId!=0){
|
|
|
- dataId.value = row.dataId
|
|
|
- //获取表单数据
|
|
|
- getFlowFormData({formId:row.id,dataId:row.dataId}).then((res:any)=>{
|
|
|
- formData.value = res.data
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- state.isShowDialog = true;
|
|
|
-};
|
|
|
+ resetForm()
|
|
|
+ if (row) {
|
|
|
+ formId.value = row.actionBtn.wfFid
|
|
|
+ formTable.value = row.actionBtn.wfType
|
|
|
+ await getFlowForm(row.id!).then((res: any) => {
|
|
|
+ const data = res
|
|
|
+ data.createdBy = data.createdUser?.userNickname
|
|
|
+ data.updatedBy = data.updatedUser?.userNickname
|
|
|
+ state.formData = data
|
|
|
+ setConfAndFields2(detailData, data.conf, data.fields)
|
|
|
+ detailData.value.option.submitBtn = false //隐藏提交按钮
|
|
|
+ detailData.value.option.resetBtn = false //隐藏重置按钮
|
|
|
+ })
|
|
|
+ if (row.dataId && row.dataId != 0) {
|
|
|
+ dataId.value = row.dataId
|
|
|
+ //获取表单数据
|
|
|
+ getFlowFormData({ formId: row.id, dataId: row.dataId }).then((res: any) => {
|
|
|
+ formData.value = res.data
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ state.isShowDialog = true
|
|
|
+}
|
|
|
// 关闭弹窗
|
|
|
const closeDialog = () => {
|
|
|
- state.isShowDialog = false;
|
|
|
-};
|
|
|
+ state.isShowDialog = false
|
|
|
+}
|
|
|
// 取消
|
|
|
const onCancel = () => {
|
|
|
- closeDialog();
|
|
|
-};
|
|
|
-const resetForm = ()=>{
|
|
|
- state.formData = {
|
|
|
- id: undefined,
|
|
|
- name: undefined,
|
|
|
- status: false ,
|
|
|
- remark: undefined,
|
|
|
- createdAt: undefined,
|
|
|
- updatedAt: undefined,
|
|
|
- deletedAt: undefined,
|
|
|
- createdBy: undefined,
|
|
|
- updatedBy: undefined,
|
|
|
- conf: undefined,
|
|
|
- fields: undefined,
|
|
|
- }
|
|
|
- dataId.value = 0
|
|
|
- formData.value = {};
|
|
|
- activeName.value = '0'
|
|
|
-};
|
|
|
-defineExpose({openDialog})
|
|
|
+ closeDialog()
|
|
|
+}
|
|
|
+const resetForm = () => {
|
|
|
+ state.formData = {
|
|
|
+ id: undefined,
|
|
|
+ name: undefined,
|
|
|
+ status: false,
|
|
|
+ remark: undefined,
|
|
|
+ createdAt: undefined,
|
|
|
+ updatedAt: undefined,
|
|
|
+ deletedAt: undefined,
|
|
|
+ createdBy: undefined,
|
|
|
+ updatedBy: undefined,
|
|
|
+ conf: undefined,
|
|
|
+ fields: undefined,
|
|
|
+ }
|
|
|
+ dataId.value = 0
|
|
|
+ formData.value = {}
|
|
|
+ activeName.value = '0'
|
|
|
+}
|
|
|
+defineExpose({ openDialog })
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
/*.flow-flowForm-detail :deep(.el-form-item__content ._fc-submit-btn),
|
|
|
.flow-flowForm-detail :deep(.el-form-item__content ._fc-reset-btn){
|
|
|
display: none;
|
|
|
}*/
|
|
|
-.flow-flowForm-detail :deep(.el-form-item__label){
|
|
|
- font-weight: bolder;
|
|
|
+.flow-flowForm-detail :deep(.el-form-item__label) {
|
|
|
+ font-weight: bolder;
|
|
|
+}
|
|
|
+.pic-block {
|
|
|
+ margin-right: 8px;
|
|
|
}
|
|
|
-.pic-block{
|
|
|
- margin-right: 8px;
|
|
|
+.file-block {
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid var(--el-border-color);
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: var(--el-transition-duration-fast);
|
|
|
+ margin-bottom: 5px;
|
|
|
+ padding: 3px 6px;
|
|
|
}
|
|
|
-.file-block{
|
|
|
- width: 100%;
|
|
|
- border: 1px solid var(--el-border-color);
|
|
|
- border-radius: 6px;
|
|
|
- cursor: pointer;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- transition: var(--el-transition-duration-fast);
|
|
|
- margin-bottom: 5px;
|
|
|
- padding: 3px 6px;
|
|
|
+.ml-2 {
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
-.ml-2{margin-right: 5px;}
|
|
|
-.form-create-show{
|
|
|
- width: 100%;
|
|
|
- padding: 16px;
|
|
|
+.form-create-show {
|
|
|
+ width: 100%;
|
|
|
+ padding: 16px;
|
|
|
}
|
|
|
</style>
|
