二次封装 form-create 组件，使用项目重新封装的文件上传组件实现文件上载

3820710c · puhui999 · cce1fadc · 3820710c · 3820710c · 3820710c
Commit 3820710c authored Mar 26, 2024 by puhui999
12 changed files
--- a/src/components/FormCreate/index.ts
+++ b/src/components/FormCreate/index.ts
+import MyFormCreate from './src/MyFormCreate.vue'
+export { MyFormCreate }
--- a/src/components/FormCreate/src/MyFormCreate.vue
+++ b/src/components/FormCreate/src/MyFormCreate.vue
+<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>
--- 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）
 })
 // ========== 上传相关 ==========

--- 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), // 是否显示删除按钮
-  showDelete: propTypes.bool.def(true),
+  showBtnText: propTypes.bool.def(true) // 是否显示按钮文字
-  // 是否显示按钮文字
-  showBtnText: propTypes.bool.def(true)
 })
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗

--- 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">

--- 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

--- 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 align="center" label="定义编号" prop="id" width="400" />
-      <el-table-column label="流程名称" align="center" prop="name" 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 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 v-if="scope.row.suspensionState === 1" type="success">激活</el-tag>
-          <el-tag type="warning" v-if="scope.row.suspensionState === 2">挂起</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">
+  <Dialog v-model="formDetailVisible" title="表单详情" width="800">
-    <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
+    <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>

--- 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>

--- 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="请输入流程标识"
+          class="!w-240px"
          clearable
+          placeholder="请输入流程标识"
          @keyup.enter="handleQuery"
-          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="流程名称" prop="name">
        <el-input
          v-model="queryParams.name"
-          placeholder="请输入流程名称"
+          class="!w-240px"
          clearable
+          placeholder="请输入流程名称"
          @keyup.enter="handleQuery"
-          class="!w-240px"
        />
      </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="handleQuery">
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
        <el-button
-          type="primary"
+          v-hasPermi="['bpm:model:create']"
          plain
+          type="primary"
          @click="openForm('create')"
-          v-hasPermi="['bpm:model:create']"
        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新建流程
+          <Icon class="mr-5px" icon="ep:plus" />
+          新建流程
        </el-button>
-        <el-button type="success" plain @click="openImportForm" v-hasPermi="['bpm:model:import']">
+        <el-button v-hasPermi="['bpm:model:import']" plain type="success" @click="openImportForm">
-          <Icon icon="ep:upload" class="mr-5px" /> 导入流程
+          <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 align="center" label="流程标识" prop="key" width="200" />
-      <el-table-column label="流程名称" align="center" prop="name" 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">
+  <Dialog v-model="formDetailVisible" title="表单详情" width="800">
-    <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
+    <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>

--- 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 align="center" label="流程名称" prop="name" />
-      <el-table-column label="流程分类" align="center" prop="category">
+      <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 align="center" label="流程描述" prop="description" />
-      <el-table-column label="操作" align="center">
+      <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">
+      <el-col :offset="6" :span="16" style="margin-top: 20px">
-        <form-create
+        <my-form-create
-          :rule="detailForm.rule"
          v-model:api="fApi"
          :option="detailForm.option"
+          :rule="detailForm.rule"
          @submit="submitForm"
        />
      </el-col>

--- 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
+        <my-form-create
-          ref="fApi"
          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?.btn.show(false)
-        fApi.value?.fapi?.resetBtn.show(false)
+        fApi.value?.resetBtn.show(false)
-        fApi.value?.fapi?.disabled(true)
+        fApi.value?.disabled(true)
      })
    } else {
      // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue

--- 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
+    <my-form-create
-      v-model="fapi"
+      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('')