【功能优化】工作流：流程模型的定义，增加谁可以发起、谁可以管理的字段 CRUD

926eb70f · YunaiV · dc0e9473 · 926eb70f · 926eb70f
Commit 926eb70f authored Oct 03, 2024 by YunaiV
Show whitespace changes
Inline Side-by-side

Showing with 82 additions and 18 deletions

src/views/bpm/model/ModelForm.vue
+46 -4

src/views/bpm/model/index.vue
+36 -14

No files found.
--- a/src/views/bpm/model/ModelForm.vue
+++ b/src/views/bpm/model/ModelForm.vue
@@ -123,6 +123,30 @@
          </el-radio>
        </el-radio-group>
      </el-form-item>
+      <el-form-item label="谁可以发起" prop="startUserIds">
+        <el-select
+          v-model="formData.startUserIds"
+          multiple
+          placeholder="请选择可发起人，默认（不选择）则所有人都可以发起"
+        >
+          <el-option
+            v-for="user in userList"
+            :key="user.id"
+            :label="user.nickname"
+            :value="user.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="流程管理员" prop="managerUserIds">
+        <el-select v-model="formData.managerUserIds" multiple placeholder="请选择流程管理员">
+          <el-option
+            v-for="user in userList"
+            :key="user.id"
+            :label="user.nickname"
+            :value="user.id"
+          />
+        </el-select>
+      </el-form-item>
    </el-form>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
@@ -137,18 +161,24 @@ import * as ModelApi from '@/api/bpm/model'
 import * as FormApi from '@/api/bpm/form'
 import { CategoryApi } from '@/api/bpm/category'
 import { BpmModelFormType, BpmModelType } from '@/utils/constants'
+import { UserVO } from '@/api/system/user'
+import * as UserApi from '@/api/system/user'
+import { useUserStoreWithOut } from '@/store/modules/user'
 defineOptions({ name: 'ModelForm' })
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
+const userStore = useUserStoreWithOut() // 用户信息缓存
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
+  id: undefined,
  name: '',
+  key: '',
  category: undefined,
  icon: undefined,
  description: '',
@@ -157,7 +187,9 @@ const formData = ref({
  formId: '',
  formCustomCreatePath: '',
  formCustomViewPath: '',
-  visible: true
+  visible: true,
+  startUserIds: [],
+  managerUserIds: []
 })
 const formRules = reactive({
  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
@@ -169,14 +201,16 @@ const formRules = reactive({
  formId: [{ required: true, message: '流程表单不能为空', trigger: 'blur' }],
  formCustomCreatePath: [{ required: true, message: '表单提交路由不能为空', trigger: 'blur' }],
  formCustomViewPath: [{ required: true, message: '表单查看地址不能为空', trigger: 'blur' }],
-  visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }]
+  visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
+  managerUserIds: [{ required: true, message: '流程管理员不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 const formList = ref([]) // 流程表单的下拉框的数据
 const categoryList = ref([]) // 流程分类列表
+const userList = ref<UserVO[]>([]) // 用户列表
 /** 打开弹窗 */
-const open = async (type: string, id?: number) => {
+const open = async (type: string, id?: string) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
@@ -189,11 +223,15 @@ const open = async (type: string, id?: number) => {
    } finally {
      formLoading.value = false
    }
+  } else {
+    formData.value.managerUserIds.push(userStore.getUser.id)
  }
  // 获得流程表单的下拉框的数据
  formList.value = await FormApi.getFormSimpleList()
  // 查询流程分类列表
  categoryList.value = await CategoryApi.getCategorySimpleList()
+  // 查询用户列表
+  userList.value = await UserApi.getSimpleUserList()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
@@ -237,7 +275,9 @@ const submitForm = async () => {
 /** 重置表单 */
 const resetForm = () => {
  formData.value = {
+    id: undefined,
    name: '',
+    key: '',
    category: undefined,
    icon: undefined,
    description: '',
@@ -246,7 +286,9 @@ const resetForm = () => {
    formId: '',
    formCustomCreatePath: '',
    formCustomViewPath: '',
-    visible: true
+    visible: true,
+    startUserIds: [],
+    managerUserIds: []
  }
  formRef.value?.resetFields()
 }

--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -73,6 +73,26 @@
          <el-image :src="scope.row.icon" class="h-32px w-32px" />
        </template>
      </el-table-column>
+      <el-table-column label="可见范围" align="center" prop="startUserIds" min-width="100">
+        <template #default="scope">
+          <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
+            全部可见
+          </el-text>
+          <el-text v-else-if="scope.row.startUsers.length == 1">
+            {{ scope.row.startUsers[0].nickname }}
+          </el-text>
+          <el-text v-else>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              placement="top"
+              :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
+            >
+              {{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
+            </el-tooltip>
+          </el-text>
+        </template>
+      </el-table-column>
      <el-table-column label="流程分类" align="center" prop="categoryName" min-width="100" />
      <el-table-column label="表单信息" align="center" prop="formType" min-width="200">
        <template #default="scope">
@@ -95,17 +115,6 @@
          <label v-else>暂无表单</label>
        </template>
      </el-table-column>
-      <!--      <el-table-column label="激活状态" align="center" prop="processDefinition.version" width="85">-->
-      <!--        <template #default="scope">-->
-      <!--          <el-switch-->
-      <!--            v-if="scope.row.processDefinition"-->
-      <!--            v-model="scope.row.processDefinition.suspensionState"-->
-      <!--            :active-value="1"-->
-      <!--            :inactive-value="2"-->
-      <!--            @change="handleChangeState(scope.row)"-->
-      <!--          />-->
-      <!--        </template>-->
-      <!--      </el-table-column>-->
      <el-table-column label="最后发布" align="center" prop="deploymentTime" min-width="250">
        <template #default="scope">
          <span v-if="scope.row.processDefinition">
@@ -131,6 +140,7 @@
            type="primary"
            @click="openForm('update', scope.row.id)"
            v-hasPermi="['bpm:model:update']"
+            :disabled="!isManagerUser(scope.row)"
          >
            修改
          </el-button>
@@ -140,6 +150,7 @@
            type="primary"
            @click="handleDesign(scope.row)"
            v-hasPermi="['bpm:model:update']"
+            :disabled="!isManagerUser(scope.row)"
          >
            设计
          </el-button>
@@ -149,6 +160,7 @@
            type="primary"
            @click="handleDeploy(scope.row)"
            v-hasPermi="['bpm:model:deploy']"
+            :disabled="!isManagerUser(scope.row)"
          >
            发布
          </el-button>
@@ -169,6 +181,7 @@
                <el-dropdown-item
                  command="handleChangeState"
                  v-if="checkPermi(['bpm:model:update'])"
+                  :disabled="!isManagerUser(scope.row)"
                >
                  {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
                </el-dropdown-item>
@@ -176,6 +189,7 @@
                  type="danger"
                  command="handleDelete"
                  v-if="checkPermi(['bpm:model:delete'])"
+                  :disabled="!isManagerUser(scope.row)"
                >
                  删除
                </el-dropdown-item>
@@ -212,12 +226,14 @@ import { setConfAndFields2 } from '@/utils/formCreate'
 import { CategoryApi } from '@/api/bpm/category'
 import { BpmModelType } from '@/utils/constants'
 import { checkPermi } from '@/utils/permission'
+import { useUserStoreWithOut } from '@/store/modules/user'
 defineOptions({ name: 'BpmModel' })
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 const { push } = useRouter() // 路由
+const userStore = useUserStoreWithOut() // 用户信息缓存
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
@@ -312,7 +328,7 @@ const handleChangeState = async (row: any) => {
 }
 /** 设计流程 */
-const handleDesign = (row) => {
+const handleDesign = (row: any) => {
  if (row.type == BpmModelType.BPMN) {
    push({
      name: 'BpmModelEditor',
@@ -331,7 +347,7 @@ const handleDesign = (row) => {
 }
 /** 发布流程 */
-const handleDeploy = async (row) => {
+const handleDeploy = async (row: any) => {
  try {
    // 删除的二次确认
    await message.confirm('是否部署该流程！！')
@@ -359,7 +375,7 @@ const formDetailPreview = ref({
  rule: [],
  option: {}
 })
-const handleFormDetail = async (row) => {
+const handleFormDetail = async (row: any) => {
  if (row.formType == 10) {
    // 设置表单
    const data = await FormApi.getForm(row.formId)
@@ -373,6 +389,12 @@ const handleFormDetail = async (row) => {
  }
 }
+/** 判断是否可以操作 */
+const isManagerUser = (row: any) => {
+  const userId = userStore.getUser.id
+  return row.managerUserIds && row.managerUserIds.includes(userId)
+}
 /** 初始化 **/
 onMounted(async () => {
  await getList()