123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175 |
- <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>
- </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 { useI18n } from 'vue-i18n'
- formCreate.component(FcEditor)
- //获取 formCreate 组件
- const FormCreate = formCreate.$form()
- const props = defineProps({
- statusOptions: {
- type: Array,
- default: () => [],
- },
- })
- const flowLogRef = ref()
- const showFlowCheckRef = ref()
- 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 || '' })
- })
- }
- }
- const { proxy } = <any>getCurrentInstance()
- const { t } = useI18n()
- const dataId = ref(0)
- const formData = ref({})
- const detailData = ref({
- 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)
- // 打开弹窗
- 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
- }
- // 关闭弹窗
- const closeDialog = () => {
- 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 })
- </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;
- }
- .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;
- }
- .ml-2 {
- margin-right: 5px;
- }
- .form-create-show {
- width: 100%;
- padding: 16px;
- }
- </style>
|