dataDetail.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <template>
  2. <!-- 流程表单详情抽屉 -->
  3. <div class="flow-flowForm-detail">
  4. <el-drawer v-model="isShowDialog" size="80%" direction="ltr">
  5. <template #header>
  6. <h4>{{ t('message.flowForm.detailTitleWithName', { name: state.formData.name || '' }) }}</h4>
  7. </template>
  8. <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="margin: 8px">
  9. <el-tab-pane :label="t('message.flowForm.tabFormDetail')" name="0">
  10. <div class="form-create-show">
  11. <FormCreate :option="detailData.option" :rule="detailData.rule" :disabled="true" v-model="formData" />
  12. </div>
  13. </el-tab-pane>
  14. <el-tab-pane :label="t('message.flowForm.tabApproveLog')" name="1">
  15. <FlowLog ref="flowLogRef" :form-id="formId" :form-table="formTable" :key="formId" />
  16. </el-tab-pane>
  17. <el-tab-pane :label="t('message.flowForm.tabFlowChart')" name="2">
  18. <ShowFlowDesign ref="showFlowCheckRef" />
  19. </el-tab-pane>
  20. </el-tabs>
  21. </el-drawer>
  22. </div>
  23. </template>
  24. <script lang="ts" setup>
  25. // 引入 form-create
  26. import formCreate from '@form-create/element-ui'
  27. // 引入 form-create-edit
  28. import FcEditor from '@form-create/component-wangeditor'
  29. import { reactive, ref, getCurrentInstance, toRefs } from 'vue'
  30. import { getFlowForm, getFlowFormData } from '/@/api/flow/flowForm'
  31. import { FlowFormEditState, FlowFormTableColumns } from '/@/views/flow/flowForm/list/component/model'
  32. import { setConfAndFields2 } from '/@/utils/formCreate'
  33. import FlowLog from '/@/components/gFlow/flowLog.vue'
  34. import ShowFlowDesign from '/@/components/gFlow/showDesign.vue'
  35. import { TabsPaneContext } from 'element-plus'
  36. import { getRunStep } from '/@/api/flow/flowModel'
  37. import { useI18n } from 'vue-i18n'
  38. formCreate.component(FcEditor)
  39. //获取 formCreate 组件
  40. const FormCreate = formCreate.$form()
  41. const props = defineProps({
  42. statusOptions: {
  43. type: Array,
  44. default: () => [],
  45. },
  46. })
  47. const flowLogRef = ref()
  48. const showFlowCheckRef = ref()
  49. const formId = ref(0)
  50. const formTable = ref('')
  51. const activeName = ref('0')
  52. const handleClick = (tab: TabsPaneContext) => {
  53. if (tab.index == '1') {
  54. flowLogRef.value.getLogList()
  55. } else if (tab.index == '2') {
  56. getRunStep({ formTable: formTable.value, formId: formId.value }).then((res: any) => {
  57. showFlowCheckRef.value.showDesign({ flowId: res.data?.runFlow || '0', processId: res.data?.runFlowNode || '' })
  58. })
  59. }
  60. }
  61. const { proxy } = <any>getCurrentInstance()
  62. const { t } = useI18n()
  63. const dataId = ref(0)
  64. const formData = ref({})
  65. const detailData = ref({
  66. rule: [],
  67. option: {} as any,
  68. })
  69. const state = reactive<FlowFormEditState>({
  70. loading: false,
  71. isShowDialog: false,
  72. formData: {
  73. id: undefined,
  74. name: undefined,
  75. status: false,
  76. remark: undefined,
  77. createdAt: undefined,
  78. updatedAt: undefined,
  79. deletedAt: undefined,
  80. createdBy: undefined,
  81. updatedBy: undefined,
  82. conf: undefined,
  83. fields: undefined,
  84. },
  85. // 表单校验
  86. rules: {
  87. name: [{ required: true, message: '表单名不能为空', trigger: 'blur' }],
  88. status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
  89. },
  90. })
  91. const { isShowDialog } = toRefs(state)
  92. // 打开弹窗
  93. const openDialog = async (row?: FlowFormTableColumns) => {
  94. resetForm()
  95. if (row) {
  96. formId.value = row.actionBtn.wfFid
  97. formTable.value = row.actionBtn.wfType
  98. await getFlowForm(row.id!).then((res: any) => {
  99. const data = res
  100. data.createdBy = data.createdUser?.userNickname
  101. data.updatedBy = data.updatedUser?.userNickname
  102. state.formData = data
  103. setConfAndFields2(detailData, data.conf, data.fields)
  104. detailData.value.option.submitBtn = false //隐藏提交按钮
  105. detailData.value.option.resetBtn = false //隐藏重置按钮
  106. })
  107. if (row.dataId && row.dataId != 0) {
  108. dataId.value = row.dataId
  109. //获取表单数据
  110. getFlowFormData({ formId: row.id, dataId: row.dataId }).then((res: any) => {
  111. formData.value = res.data
  112. })
  113. }
  114. }
  115. state.isShowDialog = true
  116. }
  117. // 关闭弹窗
  118. const closeDialog = () => {
  119. state.isShowDialog = false
  120. }
  121. // 取消
  122. const onCancel = () => {
  123. closeDialog()
  124. }
  125. const resetForm = () => {
  126. state.formData = {
  127. id: undefined,
  128. name: undefined,
  129. status: false,
  130. remark: undefined,
  131. createdAt: undefined,
  132. updatedAt: undefined,
  133. deletedAt: undefined,
  134. createdBy: undefined,
  135. updatedBy: undefined,
  136. conf: undefined,
  137. fields: undefined,
  138. }
  139. dataId.value = 0
  140. formData.value = {}
  141. activeName.value = '0'
  142. }
  143. defineExpose({ openDialog })
  144. </script>
  145. <style scoped>
  146. /*.flow-flowForm-detail :deep(.el-form-item__content ._fc-submit-btn),
  147. .flow-flowForm-detail :deep(.el-form-item__content ._fc-reset-btn){
  148. display: none;
  149. }*/
  150. .flow-flowForm-detail :deep(.el-form-item__label) {
  151. font-weight: bolder;
  152. }
  153. .pic-block {
  154. margin-right: 8px;
  155. }
  156. .file-block {
  157. width: 100%;
  158. border: 1px solid var(--el-border-color);
  159. border-radius: 6px;
  160. cursor: pointer;
  161. position: relative;
  162. overflow: hidden;
  163. transition: var(--el-transition-duration-fast);
  164. margin-bottom: 5px;
  165. padding: 3px 6px;
  166. }
  167. .ml-2 {
  168. margin-right: 5px;
  169. }
  170. .form-create-show {
  171. width: 100%;
  172. padding: 16px;
  173. }
  174. </style>