diff --git a/src/components/FormCreate/index.ts b/src/components/FormCreate/index.ts new file mode 100644 index 00000000..df750822 --- /dev/null +++ b/src/components/FormCreate/index.ts @@ -0,0 +1,3 @@ +import MyFormCreate from './src/MyFormCreate.vue' + +export { MyFormCreate } diff --git a/src/components/FormCreate/src/MyFormCreate.vue b/src/components/FormCreate/src/MyFormCreate.vue new file mode 100644 index 00000000..e72144b6 --- /dev/null +++ b/src/components/FormCreate/src/MyFormCreate.vue @@ -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> diff --git a/src/components/UploadFile/src/UploadFile.vue b/src/components/UploadFile/src/UploadFile.vue index c91f977a..71f944ed 100644 --- a/src/components/UploadFile/src/UploadFile.vue +++ b/src/components/UploadFile/src/UploadFile.vue @@ -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) }) // ========== 上传相关 ========== diff --git a/src/components/UploadFile/src/UploadImg.vue b/src/components/UploadFile/src/UploadImg.vue index 34566dda..ac0c162d 100644 --- a/src/components/UploadFile/src/UploadImg.vue +++ b/src/components/UploadFile/src/UploadImg.vue @@ -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() // 消息弹窗 diff --git a/src/components/UploadFile/src/UploadImgs.vue b/src/components/UploadFile/src/UploadImgs.vue index bd19ebbe..85da64c0 100644 --- a/src/components/UploadFile/src/UploadImgs.vue +++ b/src/components/UploadFile/src/UploadImgs.vue @@ -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"> diff --git a/src/utils/formCreate.ts b/src/utils/formCreate.ts index 6d7dbc7f..c4899d7d 100644 --- a/src/utils/formCreate.ts +++ b/src/utils/formCreate.ts @@ -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 diff --git a/src/views/bpm/definition/index.vue b/src/views/bpm/definition/index.vue index 31ed8413..dcaa10d3 100644 --- a/src/views/bpm/definition/index.vue +++ b/src/views/bpm/definition/index.vue @@ -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> diff --git a/src/views/bpm/form/index.vue b/src/views/bpm/form/index.vue index 4cf37777..e1bef7a5 100644 --- a/src/views/bpm/form/index.vue +++ b/src/views/bpm/form/index.vue @@ -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> diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue index c7318891..72e3f6b9 100644 --- a/src/views/bpm/model/index.vue +++ b/src/views/bpm/model/index.vue @@ -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> diff --git a/src/views/bpm/processInstance/create/index.vue b/src/views/bpm/processInstance/create/index.vue index a10e0208..988004c4 100644 --- a/src/views/bpm/processInstance/create/index.vue +++ b/src/views/bpm/processInstance/create/index.vue @@ -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> diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue index 074d1329..5b16a558 100644 --- a/src/views/bpm/processInstance/detail/index.vue +++ b/src/views/bpm/processInstance/detail/index.vue @@ -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 diff --git a/src/views/infra/build/index.vue b/src/views/infra/build/index.vue index 11bfc999..4f509986 100644 --- a/src/views/infra/build/index.vue +++ b/src/views/infra/build/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('')