二次封装 form-create 组件,使用项目重新封装的文件上传组件实现文件上载
This commit is contained in:
parent
cce1fadc33
commit
3820710c56
3
src/components/FormCreate/index.ts
Normal file
3
src/components/FormCreate/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import MyFormCreate from './src/MyFormCreate.vue'
|
||||
|
||||
export { MyFormCreate }
|
54
src/components/FormCreate/src/MyFormCreate.vue
Normal file
54
src/components/FormCreate/src/MyFormCreate.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<form-create v-bind="attrs">
|
||||
<!-- 保障 form-create 的原始插槽 -->
|
||||
<template v-for="(_, name) in slots" #[name]="slotData">
|
||||
<slot :name="name" v-bind="slotData || {}"></slot>
|
||||
</template>
|
||||
<!-- 使用项目重新封装的文件上传组件实现文件上载 -->
|
||||
<template #type-upload="scope">
|
||||
<!-- {{ logC(scope) }}-->
|
||||
<template v-if="scope.prop.props.uploadType === 'file'">
|
||||
<!-- TODO puhui999: 考虑是否使用属性透传直接把整个 scope.prop.props 传递给组件 -->
|
||||
<UploadFile
|
||||
:disabled="scope.prop.props.disabled"
|
||||
:limit="scope.prop.props.limit"
|
||||
:modelValue="scope.model.value || scope.prop.value"
|
||||
@update:modelValue="(val) => setValue(scope, val)"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="scope.prop.props.uploadType === 'image' && scope.prop.props.limit === 1">
|
||||
<UploadImg
|
||||
:disabled="scope.prop.props.disabled"
|
||||
:modelValue="scope.model.value || scope.prop.value"
|
||||
@update:modelValue="(val) => setValue(scope, val)"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="scope.prop.props.uploadType === 'image' && scope.prop.props.limit > 1">
|
||||
<UploadImgs
|
||||
:disabled="scope.prop.props.disabled"
|
||||
:limit="scope.prop.props.limit"
|
||||
:modelValue="scope.model.value || scope.prop.value"
|
||||
@update:modelValue="(val) => setValue(scope, val)"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</form-create>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({ name: 'MyFormCreate' })
|
||||
const attrs = useAttrs()
|
||||
const slots = useSlots()
|
||||
|
||||
// 测试使用,查看组件 scope 值
|
||||
// const logC = (s) => {
|
||||
// console.log(s)
|
||||
// }
|
||||
|
||||
// 设置表单值
|
||||
const setValue = (scope: any, value: any) => {
|
||||
const obj = {}
|
||||
obj[scope.prop.field] = value
|
||||
scope.api.setValue(obj)
|
||||
}
|
||||
</script>
|
@ -6,7 +6,9 @@
|
||||
:action="uploadUrl"
|
||||
:auto-upload="autoUpload"
|
||||
:before-upload="beforeUpload"
|
||||
:disabled="disabled"
|
||||
:drag="drag"
|
||||
:http-request="httpRequest"
|
||||
:limit="props.limit"
|
||||
:multiple="props.limit > 1"
|
||||
:on-error="excelUploadError"
|
||||
@ -15,15 +17,14 @@
|
||||
:on-remove="handleRemove"
|
||||
:on-success="handleFileSuccess"
|
||||
:show-file-list="true"
|
||||
:http-request="httpRequest"
|
||||
class="upload-file-uploader"
|
||||
name="file"
|
||||
>
|
||||
<el-button type="primary">
|
||||
<el-button v-if="!disabled" type="primary">
|
||||
<Icon icon="ep:upload-filled" />
|
||||
选取文件
|
||||
</el-button>
|
||||
<template v-if="isShowTip" #tip>
|
||||
<template v-if="isShowTip && !disabled" #tip>
|
||||
<div style="font-size: 8px">
|
||||
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
|
||||
</div>
|
||||
@ -54,7 +55,8 @@ const props = defineProps({
|
||||
limit: propTypes.number.def(5), // 数量限制
|
||||
autoUpload: propTypes.bool.def(true), // 自动上传
|
||||
drag: propTypes.bool.def(false), // 拖拽上传
|
||||
isShowTip: propTypes.bool.def(true) // 是否显示提示
|
||||
isShowTip: propTypes.bool.def(true), // 是否显示提示
|
||||
disabled: propTypes.bool.def(false) // 是否禁用上传组件 ==> 非必传(默认为 false)
|
||||
})
|
||||
|
||||
// ========== 上传相关 ==========
|
||||
|
@ -6,17 +6,18 @@
|
||||
:action="uploadUrl"
|
||||
:before-upload="beforeUpload"
|
||||
:class="['upload', drag ? 'no-border' : '']"
|
||||
:disabled="disabled"
|
||||
:drag="drag"
|
||||
:http-request="httpRequest"
|
||||
:multiple="false"
|
||||
:on-error="uploadError"
|
||||
:on-success="uploadSuccess"
|
||||
:show-file-list="false"
|
||||
:http-request="httpRequest"
|
||||
>
|
||||
<template v-if="modelValue">
|
||||
<img :src="modelValue" class="upload-image" />
|
||||
<div class="upload-handle" @click.stop>
|
||||
<div class="handle-icon" @click="editImg" v-if="!disabled">
|
||||
<div v-if="!disabled" class="handle-icon" @click="editImg">
|
||||
<Icon icon="ep:edit" />
|
||||
<span v-if="showBtnText">{{ t('action.edit') }}</span>
|
||||
</div>
|
||||
@ -77,10 +78,8 @@ const props = defineProps({
|
||||
height: propTypes.string.def('150px'), // 组件高度 ==> 非必传(默认为 150px)
|
||||
width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传(默认为 150px)
|
||||
borderradius: propTypes.string.def('8px'), // 组件边框圆角 ==> 非必传(默认为 8px)
|
||||
// 是否显示删除按钮
|
||||
showDelete: propTypes.bool.def(true),
|
||||
// 是否显示按钮文字
|
||||
showBtnText: propTypes.bool.def(true)
|
||||
showDelete: propTypes.bool.def(true), // 是否显示删除按钮
|
||||
showBtnText: propTypes.bool.def(true) // 是否显示按钮文字
|
||||
})
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
@ -6,13 +6,14 @@
|
||||
:action="uploadUrl"
|
||||
:before-upload="beforeUpload"
|
||||
:class="['upload', drag ? 'no-border' : '']"
|
||||
:disabled="disabled"
|
||||
:drag="drag"
|
||||
:http-request="httpRequest"
|
||||
:limit="limit"
|
||||
:multiple="true"
|
||||
:on-error="uploadError"
|
||||
:on-exceed="handleExceed"
|
||||
:on-success="uploadSuccess"
|
||||
:http-request="httpRequest"
|
||||
list-type="picture-card"
|
||||
>
|
||||
<div class="upload-empty">
|
||||
|
@ -40,7 +40,7 @@ export const setConfAndFields = (designerRef: object, conf: string, fields: stri
|
||||
export const setConfAndFields2 = (
|
||||
detailPreview: object,
|
||||
conf: string,
|
||||
fields: string,
|
||||
fields: string[],
|
||||
value?: object
|
||||
) => {
|
||||
// @ts-ignore
|
||||
|
@ -3,67 +3,67 @@
|
||||
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="定义编号" align="center" prop="id" width="400" />
|
||||
<el-table-column label="流程名称" align="center" prop="name" width="200">
|
||||
<el-table-column align="center" label="定义编号" prop="id" width="400" />
|
||||
<el-table-column align="center" label="流程名称" prop="name" width="200">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link @click="handleBpmnDetail(scope.row)">
|
||||
<el-button link type="primary" @click="handleBpmnDetail(scope.row)">
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="定义分类" align="center" prop="category" width="100">
|
||||
<el-table-column align="center" label="定义分类" prop="category" width="100">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="表单信息" align="center" prop="formType" width="200">
|
||||
<el-table-column align="center" label="表单信息" prop="formType" width="200">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-if="scope.row.formType === 10"
|
||||
type="primary"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleFormDetail(scope.row)"
|
||||
>
|
||||
<span>{{ scope.row.formName }}</span>
|
||||
</el-button>
|
||||
<el-button v-else type="primary" link @click="handleFormDetail(scope.row)">
|
||||
<el-button v-else link type="primary" @click="handleFormDetail(scope.row)">
|
||||
<span>{{ scope.row.formCustomCreatePath }}</span>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80">
|
||||
<el-table-column align="center" label="流程版本" prop="processDefinition.version" width="80">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row">v{{ scope.row.version }}</el-tag>
|
||||
<el-tag type="warning" v-else>未部署</el-tag>
|
||||
<el-tag v-else type="warning">未部署</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" align="center" prop="version" width="80">
|
||||
<el-table-column align="center" label="状态" prop="version" width="80">
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.suspensionState === 1">激活</el-tag>
|
||||
<el-tag type="warning" v-if="scope.row.suspensionState === 2">挂起</el-tag>
|
||||
<el-tag v-if="scope.row.suspensionState === 1" type="success">激活</el-tag>
|
||||
<el-tag v-if="scope.row.suspensionState === 2" type="warning">挂起</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="部署时间"
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="部署时间"
|
||||
prop="deploymentTime"
|
||||
width="180"
|
||||
:formatter="dateFormatter"
|
||||
/>
|
||||
<el-table-column
|
||||
label="定义描述"
|
||||
align="center"
|
||||
label="定义描述"
|
||||
prop="description"
|
||||
width="300"
|
||||
show-overflow-tooltip
|
||||
width="300"
|
||||
/>
|
||||
<el-table-column label="操作" align="center" width="150" fixed="right">
|
||||
<el-table-column align="center" fixed="right" label="操作" width="150">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-hasPermi="['bpm:task-assign-rule:query']"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleAssignRule(scope.row)"
|
||||
v-hasPermi="['bpm:task-assign-rule:query']"
|
||||
>
|
||||
分配规则
|
||||
</el-button>
|
||||
@ -72,26 +72,26 @@
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNo"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 弹窗:表单详情 -->
|
||||
<Dialog title="表单详情" v-model="formDetailVisible" width="800">
|
||||
<form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
|
||||
<Dialog v-model="formDetailVisible" title="表单详情" width="800">
|
||||
<my-form-create :option="formDetailPreview.option" :rule="formDetailPreview.rule" />
|
||||
</Dialog>
|
||||
|
||||
<!-- 弹窗:流程模型图的预览 -->
|
||||
<Dialog title="流程图" v-model="bpmnDetailVisible" width="800">
|
||||
<Dialog v-model="bpmnDetailVisible" title="流程图" width="800">
|
||||
<MyProcessViewer
|
||||
key="designer"
|
||||
v-model="bpmnXML"
|
||||
:prefix="bpmnControlForm.prefix"
|
||||
:value="bpmnXML as any"
|
||||
v-bind="bpmnControlForm"
|
||||
:prefix="bpmnControlForm.prefix"
|
||||
/>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
@ -88,7 +88,7 @@
|
||||
|
||||
<!-- 表单详情的弹窗 -->
|
||||
<Dialog v-model="detailVisible" title="表单详情" width="800">
|
||||
<form-create :option="detailData.option" :rule="detailData.rule" />
|
||||
<my-form-create :option="detailData.option" :rule="detailData.rule" />
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
|
@ -4,36 +4,36 @@
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
class="-mb-15px"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="流程标识" prop="key">
|
||||
<el-input
|
||||
v-model="queryParams.key"
|
||||
placeholder="请输入流程标识"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="请输入流程标识"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="流程名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入流程名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="请输入流程名称"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="流程分类" prop="category">
|
||||
<el-select
|
||||
v-model="queryParams.category"
|
||||
placeholder="请选择流程分类"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="请选择流程分类"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_CATEGORY)"
|
||||
@ -44,18 +44,26 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['bpm:model:create']"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 新建流程
|
||||
<el-button @click="handleQuery">
|
||||
<Icon class="mr-5px" icon="ep:search" />
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button type="success" plain @click="openImportForm" v-hasPermi="['bpm:model:import']">
|
||||
<Icon icon="ep:upload" class="mr-5px" /> 导入流程
|
||||
<el-button @click="resetQuery">
|
||||
<Icon class="mr-5px" icon="ep:refresh" />
|
||||
重置
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['bpm:model:create']"
|
||||
plain
|
||||
type="primary"
|
||||
@click="openForm('create')"
|
||||
>
|
||||
<Icon class="mr-5px" icon="ep:plus" />
|
||||
新建流程
|
||||
</el-button>
|
||||
<el-button v-hasPermi="['bpm:model:import']" plain type="success" @click="openImportForm">
|
||||
<Icon class="mr-5px" icon="ep:upload" />
|
||||
导入流程
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@ -64,33 +72,33 @@
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="流程标识" align="center" prop="key" width="200" />
|
||||
<el-table-column label="流程名称" align="center" prop="name" width="200">
|
||||
<el-table-column align="center" label="流程标识" prop="key" width="200" />
|
||||
<el-table-column align="center" label="流程名称" prop="name" width="200">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link @click="handleBpmnDetail(scope.row)">
|
||||
<el-button link type="primary" @click="handleBpmnDetail(scope.row)">
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="流程分类" align="center" prop="category" width="100">
|
||||
<el-table-column align="center" label="流程分类" prop="category" width="100">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="表单信息" align="center" prop="formType" width="200">
|
||||
<el-table-column align="center" label="表单信息" prop="formType" width="200">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-if="scope.row.formType === 10"
|
||||
type="primary"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleFormDetail(scope.row)"
|
||||
>
|
||||
<span>{{ scope.row.formName }}</span>
|
||||
</el-button>
|
||||
<el-button
|
||||
v-else-if="scope.row.formType === 20"
|
||||
type="primary"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleFormDetail(scope.row)"
|
||||
>
|
||||
<span>{{ scope.row.formCustomCreatePath }}</span>
|
||||
@ -99,16 +107,16 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="创建时间"
|
||||
prop="createTime"
|
||||
width="180"
|
||||
:formatter="dateFormatter"
|
||||
/>
|
||||
<el-table-column label="最新部署的流程定义" align="center">
|
||||
<el-table-column align="center" label="最新部署的流程定义">
|
||||
<el-table-column
|
||||
label="流程版本"
|
||||
align="center"
|
||||
label="流程版本"
|
||||
prop="processDefinition.version"
|
||||
width="100"
|
||||
>
|
||||
@ -120,8 +128,8 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="激活状态"
|
||||
align="center"
|
||||
label="激活状态"
|
||||
prop="processDefinition.version"
|
||||
width="85"
|
||||
>
|
||||
@ -135,7 +143,7 @@
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="部署时间" align="center" prop="deploymentTime" width="180">
|
||||
<el-table-column align="center" label="部署时间" prop="deploymentTime" width="180">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.processDefinition">
|
||||
{{ formatDate(scope.row.processDefinition.deploymentTime) }}
|
||||
@ -143,53 +151,53 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="240" fixed="right">
|
||||
<el-table-column align="center" fixed="right" label="操作" width="240">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-hasPermi="['bpm:model:update']"
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
v-hasPermi="['bpm:model:update']"
|
||||
>
|
||||
修改流程
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['bpm:model:update']"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleDesign(scope.row)"
|
||||
v-hasPermi="['bpm:model:update']"
|
||||
>
|
||||
设计流程
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['bpm:task-assign-rule:query']"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleAssignRule(scope.row)"
|
||||
v-hasPermi="['bpm:task-assign-rule:query']"
|
||||
>
|
||||
分配规则
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['bpm:model:deploy']"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleDeploy(scope.row)"
|
||||
v-hasPermi="['bpm:model:deploy']"
|
||||
>
|
||||
发布流程
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['bpm:process-definition:query']"
|
||||
link
|
||||
type="primary"
|
||||
v-hasPermi="['bpm:process-definition:query']"
|
||||
@click="handleDefinitionList(scope.row)"
|
||||
>
|
||||
流程定义
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['bpm:model:delete']"
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
v-hasPermi="['bpm:model:delete']"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
@ -198,9 +206,9 @@
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNo"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
@ -212,18 +220,18 @@
|
||||
<ModelImportForm ref="importFormRef" @success="getList" />
|
||||
|
||||
<!-- 弹窗:表单详情 -->
|
||||
<Dialog title="表单详情" v-model="formDetailVisible" width="800">
|
||||
<form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
|
||||
<Dialog v-model="formDetailVisible" title="表单详情" width="800">
|
||||
<my-form-create :option="formDetailPreview.option" :rule="formDetailPreview.rule" />
|
||||
</Dialog>
|
||||
|
||||
<!-- 弹窗:流程模型图的预览 -->
|
||||
<Dialog title="流程图" v-model="bpmnDetailVisible" width="800">
|
||||
<Dialog v-model="bpmnDetailVisible" title="流程图" width="800">
|
||||
<MyProcessViewer
|
||||
key="designer"
|
||||
v-model="bpmnXML"
|
||||
:prefix="bpmnControlForm.prefix"
|
||||
:value="bpmnXML as any"
|
||||
v-bind="bpmnControlForm"
|
||||
:prefix="bpmnControlForm.prefix"
|
||||
/>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
@ -2,22 +2,23 @@
|
||||
<!-- 第一步,通过流程定义的列表,选择对应的流程 -->
|
||||
<ContentWrap v-if="!selectProcessInstance">
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="流程名称" align="center" prop="name" />
|
||||
<el-table-column label="流程分类" align="center" prop="category">
|
||||
<el-table-column align="center" label="流程名称" prop="name" />
|
||||
<el-table-column align="center" label="流程分类" prop="category">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="流程版本" align="center" prop="version">
|
||||
<el-table-column align="center" label="流程版本" prop="version">
|
||||
<template #default="scope">
|
||||
<el-tag>v{{ scope.row.version }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="流程描述" align="center" prop="description" />
|
||||
<el-table-column label="操作" align="center">
|
||||
<el-table-column align="center" label="流程描述" prop="description" />
|
||||
<el-table-column align="center" label="操作">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" @click="handleSelect(scope.row)">
|
||||
<Icon icon="ep:plus" /> 选择
|
||||
<Icon icon="ep:plus" />
|
||||
选择
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@ -30,14 +31,15 @@
|
||||
<div class="clearfix">
|
||||
<span class="el-icon-document">申请信息【{{ selectProcessInstance.name }}】</span>
|
||||
<el-button style="float: right" type="primary" @click="selectProcessInstance = undefined">
|
||||
<Icon icon="ep:delete" /> 选择其它流程
|
||||
<Icon icon="ep:delete" />
|
||||
选择其它流程
|
||||
</el-button>
|
||||
</div>
|
||||
<el-col :span="16" :offset="6" style="margin-top: 20px">
|
||||
<form-create
|
||||
:rule="detailForm.rule"
|
||||
<el-col :offset="6" :span="16" style="margin-top: 20px">
|
||||
<my-form-create
|
||||
v-model:api="fApi"
|
||||
:option="detailForm.option"
|
||||
:rule="detailForm.rule"
|
||||
@submit="submitForm"
|
||||
/>
|
||||
</el-col>
|
||||
|
@ -68,9 +68,9 @@
|
||||
</template>
|
||||
<!-- 情况一:流程表单 -->
|
||||
<el-col v-if="processInstance?.processDefinition?.formType === 10" :offset="6" :span="16">
|
||||
<form-create
|
||||
ref="fApi"
|
||||
<my-form-create
|
||||
v-model="detailForm.value"
|
||||
v-model:api="fApi"
|
||||
:option="detailForm.option"
|
||||
:rule="detailForm.rule"
|
||||
/>
|
||||
@ -229,9 +229,9 @@ const getProcessInstance = async () => {
|
||||
data.formVariables
|
||||
)
|
||||
nextTick().then(() => {
|
||||
fApi.value?.fapi?.btn.show(false)
|
||||
fApi.value?.fapi?.resetBtn.show(false)
|
||||
fApi.value?.fapi?.disabled(true)
|
||||
fApi.value?.btn.show(false)
|
||||
fApi.value?.resetBtn.show(false)
|
||||
fApi.value?.disabled(true)
|
||||
})
|
||||
} else {
|
||||
// 注意:data.processDefinition.formCustomViewPath 是组件的全路径,例如说:/crm/contract/detail/index.vue
|
||||
|
@ -23,7 +23,7 @@
|
||||
</el-button>
|
||||
<el-scrollbar height="580">
|
||||
<div>
|
||||
<pre><code class="hljs" v-dompurify-html="highlightedCode(formData)"></code></pre>
|
||||
<pre><code v-dompurify-html="highlightedCode(formData)" class="hljs"></code></pre>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
@ -81,15 +81,14 @@ const makeTemplate = () => {
|
||||
const rule = designer.value.getRule()
|
||||
const opt = designer.value.getOption()
|
||||
return `<template>
|
||||
<form-create
|
||||
v-model="fapi"
|
||||
<my-form-create
|
||||
v-model:api="fApi"
|
||||
:rule="rule"
|
||||
:option="option"
|
||||
@submit="onSubmit"
|
||||
></form-create>
|
||||
></my-form-create>
|
||||
</template>
|
||||
<script setup lang=ts>
|
||||
import formCreate from "@form-create/element-ui";
|
||||
const faps = ref(null)
|
||||
const rule = ref('')
|
||||
const option = ref('')
|
||||
|
Loading…
Reference in New Issue
Block a user