feat 角色选择组件, 流程节点处理人选择

src/components/Bootx/RoleSelectModal/BRoleSelectModal.vue

@@ -0,0 +1,188 @@
+<template>
+  <basic-modal
+    destroyOnClose
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="loading"
+    :maskClosable="false"
+    @cancel="handleCancel"
+    @ok="handleOk"
+  >
+    <vxe-toolbar>
+      <template #buttons>
+        <b-query
+          :query-params="model.queryParam"
+          :fields="fields"
+          :default-item-md="8"
+          @query="queryPage"
+          @reset="() => (model.queryParam = {})"
+        />
+      </template>
+    </vxe-toolbar>
+    <vxe-table
+      :height="350"
+      ref="xTable"
+      :checkbox-config="checkboxConfig"
+      :radio-config="radioConfig"
+      :loading="loading"
+      :data="pagination.records"
+    >
+      <vxe-column v-if="multiple" type="checkbox" width="40" />
+      <vxe-column v-if="!multiple" type="radio" width="40" />
+      <vxe-column field="name" title="角色名称" />
+      <vxe-column field="code" title="角色编码" />
+    </vxe-table>
+    <vxe-pager
+      border
+      row-id="id"
+      size="medium"
+      :height="350"
+      :loading="loading"
+      :current-page="pagination.current"
+      :page-size="pagination.size"
+      :total="pagination.total"
+      @page-change="handleTableChange"
+    />
+    <template #footer>
+      <a-button key="cancel" @click="handleCancel">取消</a-button>
+      <a-button key="forward" type="primary" @click="handleOk">选择</a-button>
+    </template>
+  </basic-modal>
+</template>
+
+<script lang="ts" setup>
+  import useTablePage from '/@/hooks/bootx/useTablePage'
+  import BasicModal from '/@/components/Modal/src/BasicModal.vue'
+  import { $ref } from 'vue/macros'
+  import { STRING } from '/@/components/Bootx/Query/Query'
+  import { computed } from 'vue'
+  import { page } from '/@/views/modules/system/role/Role.api'
+  import BQuery from '/@/components/Bootx/Query/BQuery.vue'
+
+  const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
+
+  interface Props {
+    // 名称
+    title: string
+    // 是否是查询看状态
+    multiple: boolean
+    // 宽度
+    width: number | string
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    title: '选择角色',
+    multiple: false,
+    width: 640,
+  })
+  const emits = defineEmits(['ok'])
+
+  let visible = $ref(false)
+  let selectRoleIds = $ref<string[]>([])
+  let selectRoleId = $ref<string>()
+  let xTable = $ref<any>()
+  const fields = [
+    { field: 'name', type: STRING, name: '名称', placeholder: '请输入角色名称' },
+    { field: 'code', type: STRING, name: '编号', placeholder: '请输入角色编号' },
+  ]
+  const checkboxConfig = computed(() => {
+    return props.multiple
+      ? {
+          reserve: true,
+          checkMethod: banCheckbox,
+        }
+      : {}
+  })
+  const radioConfig = computed(() => {
+    return !props.multiple
+      ? {
+          reserve: true,
+          checkRowKey: selectRoleId,
+        }
+      : {}
+  })
+
+  /**
+   * 调用 初始化
+   * @param param 已经选中的用户ID或ID集合
+   */
+  function init(param) {
+    visible = true
+    if (props.multiple) {
+      selectRoleIds = param || selectRoleId
+    } else {
+      selectRoleId = param || selectRoleId
+    }
+    queryPage()
+  }
+
+  /**
+   * 查询
+   */
+  function queryPage() {
+    loading.value = true
+    page({
+      ...model.queryParam,
+      ...pages,
+    }).then(({ data }) => {
+      pageQueryResHandel(data)
+    })
+  }
+  /**
+   * 选中确定回调
+   */
+  function handleOk() {
+    if (props.multiple) {
+      checkboxCallback()
+    } else {
+      radioCallback()
+    }
+    visible = false
+  }
+
+  /**
+   * 复选回调
+   * @return userIds 选中的用户id集合
+   * @return users 选中的用户集合
+   */
+  function checkboxCallback() {
+    // 非本页选中的
+    const reserveUsers = xTable.getCheckboxReserveRecords()
+    // 本页选中的
+    const checkUsers = xTable.getCheckboxRecords()
+    const users = reserveUsers.concat(checkUsers)
+    const userIds = users.map((res) => res.id)
+    emits('ok', userIds, users)
+  }
+
+  /**
+   * 单选回调
+   * @return userId 选中的用户id
+   * @return user 选中的用户
+   */
+  function radioCallback() {
+    const user = xTable.getRadioRecord()
+    const userId = user?.id
+    emits('ok', userId, user)
+  }
+  /**
+   * 关闭
+   */
+  function handleCancel() {
+    visible = false
+  }
+  /**
+   * 禁止选中的行 复选
+   */
+  function banCheckbox({ row }) {
+    return !selectUserIds.includes(row.id)
+  }
+  defineExpose({ init })
+</script>
+<script lang="ts">
+  import { defineComponent } from 'vue'
+  export default defineComponent({
+    name: 'BUserSelectModal',
+  })
+</script>
+<style scoped></style>

src/components/Bootx/RoleSelectModal/index.ts

@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils'
+import roleSelectModal from './BRoleSelectModal.vue'
+
+export const BRoleSelectModal = withInstall(roleSelectModal)

src/components/Bootx/UserSelectModal/BUserSelectModal.vue

@@ -2,7 +2,7 @@
   <basic-modal
     destroyOnClose
     :title="title"
-    :width="640"
+    :width="width"
     :visible="visible"
     :confirmLoading="loading"
     :maskClosable="false"
@@ -63,14 +63,17 @@
   const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
 
   interface Props {
-    // 菜单信息
+    // 名称
     title: string
     // 是否是查询看状态
     multiple: boolean
+    // 宽度
+    width: number | string
   }
   const props = withDefaults(defineProps<Props>(), {
     title: '选择用户',
     multiple: false,
+    width: 640,
   })
   const emits = defineEmits(['ok'])
 
@@ -122,7 +125,6 @@
       ...pages,
     }).then(({ data }) => {
       pageQueryResHandel(data)
-      console.log(pagination.records)
     })
   }
   /**

src/views/modules/bpm/model/BpmModelList.vue

@@ -58,7 +58,7 @@
                     <a-link :disabled="row.publish !== UNPUBLISHED" @click="publishModel(row)">发布</a-link>
                   </a-menu-item>
                   <a-menu-item>
-                    <a @click="copy(row)">复制</a>
+                    <a-link @click="copyModel(row)">复制</a-link>
                   </a-menu-item>
                   <a-menu-item>
                     <a-link danger :disabled="row.publish === PUBLISHED" @click="remove(row)">删除</a-link>

src/views/modules/bpm/model/BpmModelNodeEdit.vue

@@ -63,7 +63,23 @@
       <a-form-item label="分配用户" name="assignShow" v-if="[USER_GROUP, USER].includes(form.assignType)">
         <a-input v-model:value="form.assignShow" placeholder="请选择用户" disabled>
           <template #addonAfter>
-            <a href="javascript:" :disabled="showable" @click="selectUserShow">选择用户</a>
+            <a-link :disabled="showable" @click="selectUserShow">选择用户</a-link>
+          </template>
+        </a-input>
+      </a-form-item>
+      <a-form-item label="分配角色" prop="assignShow" v-if="[ROLE].includes(form.assignType)">
+        <template #label>
+          <apan>
+            分配角色
+            <a-tooltip v-if="!form.multi">
+              <template #title>如果角色关联多个用户只会从中随机抽选一个</template>
+              <icon icon="ant-design:question-circle-outlined" />
+            </a-tooltip>
+          </apan>
+        </template>
+        <a-input v-model:value="form.assignShow" placeholder="请选择角色" disabled>
+          <template #addonAfter>
+            <a-link :disabled="showable" @click="selectRoleShow">选择角色</a-link>
           </template>
         </a-input>
       </a-form-item>
@@ -99,8 +115,10 @@
     USER_OPTION,
     USER_GROUP,
     USER,
+    ROLE,
   } from '/@/views/modules/bpm/model/BpmModelNodeCode'
   import BUserSelectModal from '/@/components/Bootx/UserSelectModal/BUserSelectModal.vue'
+  import BRoleSelectModal from '/@/components/Bootx/RoleSelectModal/BRoleSelectModal.vue'
   const {
     initFormEditType,
     handleCancel,
@@ -126,24 +144,17 @@
   const formRef = $ref<FormInstance>()
   let form = $ref({
     id: null,
-    modelId: null,
-    defId: null,
-    defKey: null,
-    nodeId: null,
-    nodeName: null,
-    multi: null,
-    sequential: null,
-    orSign: null,
-    ratioPass: null,
-    passRatio: null,
-    reject: null,
-    back: null,
-    retrieve: null,
-    skip: null,
-    formId: null,
-    assignType: null,
-    assignRaw: null,
-    assignShow: null,
+    nodeId: '',
+    nodeName: '',
+    multi: false,
+    sequential: false,
+    orSign: undefined,
+    ratioPass: undefined,
+    passRatio: undefined,
+    skip: false,
+    assignType: undefined,
+    assignRaw: '',
+    assignShow: '',
   } as BpmModelNode)
   // 校验
   const rules = computed(() => {

src/views/modules/bpm/model/BpmModelNodeList.vue

@@ -25,7 +25,7 @@
           <template v-else> 无 </template>
         </template>
       </vxe-column>
-      <vxe-column field="assignType" title="跳过当前节点">
+      <vxe-column field="skip" title="跳过当前节点">
         <template #default="{ row }">{{ row.skip ? '是' : '否' }}</template>
       </vxe-column>
       <vxe-column field="assignType" title="人员分配类型">
@@ -79,6 +79,7 @@
   }
 
   function query() {
+    loading = true
     listByModelId(model.id).then(({ data }) => {
       tableData = data
       loading = false

src/views/modules/bpm/model/ModelNode.api.ts

@@ -87,39 +87,39 @@ export function getNextNodes(defId, nodeId) {
  */
 export interface BpmModelNode extends BaseEntity {
   // 关联模型id
-  modelId: string
+  modelId?: string
   // 流程定义id
-  defId: string
+  defId?: string
   // 流程key
-  defKey: string
+  defKey?: string
   // 任务节点id
-  nodeId: string
+  nodeId?: string
   // 任务节点名称
-  nodeName: string
+  nodeName?: string
   // 是否多任务
-  multi: boolean
+  multi?: boolean
   // 是否串签
-  sequential: boolean
+  sequential?: boolean
   // 是否是或签
-  orSign: boolean
+  orSign?: boolean
   // 是否比例通过
-  ratioPass: boolean
+  ratioPass?: boolean
   // 通过比例
-  passRatio: number
+  passRatio?: number
   // 是否允许驳回
-  reject: boolean
+  reject?: boolean
   // 是否允许回退
-  back: boolean
+  back?: boolean
   // 是否允许取回
-  retrieve: boolean
+  retrieve?: boolean
   // 是否跳过当前节点
-  skip: boolean
+  skip?: boolean
   // 关联表单
-  formId: string
+  formId?: string
   // 分配类型
-  assignType: string
+  assignType?: string
   // 分配的原始数据
-  assignRaw: string
+  assignRaw?: string
   // 分配的数据的展示
-  assignShow: string
+  assignShow?: string
 }