feat: 选择流程管理员和用户+模型 停用和复制

src/api/flow/process.ts

@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+import { AxiosPromise } from 'axios'
+
+// apiUrl
+const api = {
+	create: '/v1/process/create',
+	delete: '/v1/process/delete',
+	listCategory: '/v1/process/list-category',
+	clone: '/v1/process/clone'
+}
+
+function progressCreateApi(data: any): AxiosPromise {
+	return request({
+		url: api.create,
+		method: 'post',
+		data
+	})
+}
+
+function progressDeleteApi(data: any): AxiosPromise {
+	return request({
+		url: api.delete + '?id=' + data.id,
+		method: 'post'
+	})
+}
+function progressListCategoryApi(data: any): AxiosPromise {
+	return request({
+		url: api.listCategory,
+		method: 'post',
+		data
+	})
+}
+
+function progressCloneApi(data: any): AxiosPromise {
+	return request({
+		url: api.clone + '?id=' + data.id,
+		method: 'get'
+	})
+}
+
+export default {
+	progressCreateApi,
+	progressDeleteApi,
+	progressListCategoryApi,
+	progressCloneApi
+}

src/components/ChoosePerson/index.vue

@@ -1,95 +0,0 @@
-<template>
-	<div class="person-container">
-		<div class="person-container-left">
-			<div class="left-section">
-				<div class="left-tab">
-					<el-tabs v-model="activeName">
-						<el-tab-pane label="组织架构" name="first"></el-tab-pane>
-					</el-tabs>
-				</div>
-				<div class="left-tab-content">
-					<el-tree ref="treeRef" :data="data" show-checkbox default-expand-all node-key="id" highlight-current :props="defaultProps" />
-				</div>
-			</div>
-		</div>
-		<div class="person-container-right"></div>
-	</div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-const activeName = ref('first')
-
-// 左侧部门树结构
-
-const treeRef = ref()
-
-const defaultProps = {
-	children: 'children',
-	label: 'label'
-}
-
-const data = [
-	{
-		id: 1,
-		label: '集团',
-		children: [
-			{
-				id: 4,
-				label: '技术部',
-				children: [
-					{
-						id: 9,
-						label: '开发1',
-					},
-					{
-						id: 10,
-						label: '开发2'
-					}
-				]
-			},
-			{
-				id: 5,
-				label: '产品部',
-				children: [
-					{
-						id: 6,
-						label: '产品1'
-					},
-					{
-						id: 12,
-						label: '产品2'
-					}
-				]
-			}
-		]
-	}
-]
-</script>
-
-<style scoped lang="scss">
-.person-container {
-	display: flex;
-	height: 440px;
-	border: 1px solid #e4e5e7;
-	border-radius: 4px;
-	&-left {
-		width: 50%;
-		height: 100%;
-		padding: 4px 16px 0;
-		overflow: hidden;
-		border-right: 1px solid #e4e5e7;
-		.left-section {
-			box-sizing: border-box;
-			display: flex;
-			flex-direction: column;
-			.left-tab {
-				margin-bottom: 12px;
-			}
-		}
-	}
-	&-right {
-		width: 50%;
-	}
-}
-</style>

src/components/scWorkflow/select.vue

@@ -288,6 +288,7 @@ export default {
 			this.selected.map(item => {
 				this.value.push(item)
 			})
+			this.$emit('contentEv', this.value)
 			this.dialogVisible = false
 		}
 	}

src/views/flow/create/approvePersonDialog.vue

@@ -1,39 +0,0 @@
-<template>
-	<el-dialog v-model="visibleDialog" class="le-dialog" title="请选择可见范围" destroy-on-close @closed="handleCancel">
-		<choose-person></choose-person>
-		<template #footer>
-			<el-button @click="handleCancel">取 消</el-button>
-			<el-button type="primary">保 存</el-button>
-		</template>
-	</el-dialog>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import ChoosePerson from '@/components/ChoosePerson'
-
-const myProps = defineProps({
-	modelValue: {
-		type: Boolean,
-		default: false
-	}
-})
-
-const handleCancel = () => {
-	visibleDialog.value = !visibleDialog.value
-}
-
-// 同步值
-const $myEmit = defineEmits(['update:modelValue'])
-
-const visibleDialog = computed({
-	get() {
-		return myProps.modelValue
-	},
-	set(val) {
-		$myEmit('update:modelValue', val)
-	}
-})
-</script>
-
-<style scoped></style>

src/views/flow/create/components/BasicInfo.vue

@@ -1,6 +1,7 @@
 <script setup name="BasicInfo">
-import { ref } from 'vue'
-import ApprovePersonDialog from '../approvePersonDialog'
+import { ref, nextTick, onMounted } from 'vue'
+import UseSelect from '@/components/scWorkflow/select'
+import flowDefinition from '@/api/flow/definition'
 const props = defineProps({
 	label: {
 		type: String
@@ -10,38 +11,21 @@ const props = defineProps({
 	}
 })
 const visiblePopover = ref(false)
-const approvePersonDialogVisible = ref(false)
+const selectVisible = ref(false)
+const useSelectRef = ref(null)
+const nodeRoleList = ref([])
+const nodeRoleManageList = ref([])
+const currentNode = ref('nodeRoleList')
 const formRef = ref()
 const form = ref({
 	图标: '',
 	名称: 'test@example.com',
-	分组: 'Lolowan',
+	分组: '',
 	谁可以发起该流程: '100',
 	管理员: '',
 	说明: ''
 })
-const options = [
-	{
-		value: 'Option1',
-		label: 'Option1'
-	},
-	{
-		value: 'Option2',
-		label: 'Option2'
-	},
-	{
-		value: 'Option3',
-		label: 'Option3'
-	},
-	{
-		value: 'Option4',
-		label: 'Option4'
-	},
-	{
-		value: 'Option5',
-		label: 'Option5'
-	}
-]
+const options = ref([])
 const rules = {
 	图标: [
 		{
@@ -85,8 +69,42 @@ const validate = () => {
 }
 
 const openApprovePerson = () => {
-	approvePersonDialogVisible.value = !approvePersonDialogVisible.value
+	selectVisible.value = !selectVisible.value
+}
+
+const selectHandle = (type, data, name) => {
+	currentNode.value = name
+	openApprovePerson()
+	nextTick(() => {
+		useSelectRef.value.open(type, data)
+	})
+}
+
+const selectContentEv = item => {
+	if (currentNode.value === 'nodeRoleList') {
+		nodeRoleList.value = item
+	} else {
+		nodeRoleManageList.value = item
+	}
 }
+
+const delRole = (index, itemName) => {
+	if (itemName === 'nodeRoleList') {
+		nodeRoleList.value.splice(index, 1)
+	} else {
+		nodeRoleManageList.value.splice(index, 1)
+	}
+}
+
+const getGroupList = async () => {
+	const data = await flowDefinition.flowDefinitionListCategoryApi({})
+	options.value = data || []
+}
+
+onMounted(() => {
+	getGroupList()
+})
+
 defineExpose({
 	formRef,
 	validate
@@ -125,23 +143,44 @@ defineExpose({
 				</el-form-item>
 				<el-form-item label="分组" prop="分组">
 					<el-select v-model="form.分组">
-						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+						<el-option v-for="item in options" :key="item.categoryId" :label="item.categoryName" :value="item.categoryId" />
 					</el-select>
 				</el-form-item>
 				<el-form-item label="谁可以发起该流程（不选择，默认全员）" prop="谁可以发起该流程">
-					<div class="add-btn" @click="openApprovePerson">
+					<div class="add-btn" @click="selectHandle(1, nodeRoleList, 'nodeRoleList')">
 						<el-icon :size="18"><Plus /></el-icon>
 					</div>
-					<div></div>
+					<div class="tags-list" style="margin-top: 15px; width: 100%">
+						<el-tag
+							v-for="(role, index) in nodeRoleList"
+							:key="role.id"
+							type="info"
+							closable
+							style="margin-right: 8px"
+							@close="delRole(index, 'nodeRoleList')"
+							>{{ role.name }}</el-tag
+						>
+					</div>
 				</el-form-item>
 				<el-form-item label="管理员" prop="管理员">
-					<div class="add-btn">
+					<div class="add-btn" @click="selectHandle(1, nodeRoleManageList, 'nodeRoleManageList')">
 						<el-icon :size="18"><Plus /></el-icon>
 					</div>
+					<div class="tags-list" style="margin-top: 15px; width: 100%">
+						<el-tag
+							v-for="(role, index) in nodeRoleManageList"
+							:key="role.id"
+							type="info"
+							closable
+							style="margin-right: 8px"
+							@close="delRole(index, 'nodeRoleManageList')"
+							>{{ role.name }}</el-tag
+						>
+					</div>
 				</el-form-item>
 			</el-form>
 		</div>
-		<approve-person-dialog :model-value="approvePersonDialogVisible"></approve-person-dialog>
+		<use-select v-if="selectVisible" ref="useSelectRef" @closed="selectVisible = false" @contentEv="selectContentEv"></use-select>
 	</div>
 </template>
 

src/views/flow/modal/index.vue

@@ -64,9 +64,27 @@ import { ref } from 'vue'
 const input = ref('')
 const activeNames = ref(['1'])
 import { ArrowDown } from '@element-plus/icons-vue'
+import process from '@/api/flow/definition'
 const handleChange = val => {
 	console.log(val)
 }
+
+// 停用
+const stopEv = async id => {
+	await process.progressDeleteApi({ id })
+	console.log('停用')
+}
+
+// 复制
+const copyEv = async id => {
+	await process.progressCloneApi({ id })
+	console.log('复制')
+}
+
+// 修改
+const updateEv = async () => {
+	console.log('修改')
+}
 </script>
 
 <style scoped lang="scss">