feat: 部门下的用户

README.md

@@ -41,6 +41,5 @@
 
 - 搜索折叠效果优化  暂时不调整
 - 流程创建接口调整【后台】
-- 用户部门设置【前台、后台】 - 等待后台提供
 - 创建流程、指定人员选择
 - 表单设计权限设置设计

src/components/ChoosePerson/index.vue

@@ -0,0 +1,95 @@
+<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/views/flow/create/approvePersonDialog.vue

@@ -0,0 +1,39 @@
+<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,5 +1,6 @@
 <script setup name="BasicInfo">
 import { ref } from 'vue'
+import ApprovePersonDialog from '../approvePersonDialog'
 const props = defineProps({
 	label: {
 		type: String
@@ -9,6 +10,7 @@ const props = defineProps({
 	}
 })
 const visiblePopover = ref(false)
+const approvePersonDialogVisible = ref(false)
 const formRef = ref()
 const form = ref({
 	图标: '',
@@ -81,6 +83,10 @@ const validate = () => {
 		})
 	})
 }
+
+const openApprovePerson = () => {
+	approvePersonDialogVisible.value = !approvePersonDialogVisible.value
+}
 defineExpose({
 	formRef,
 	validate
@@ -122,8 +128,8 @@ defineExpose({
 						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
 					</el-select>
 				</el-form-item>
-				<el-form-item label="谁可以发起该流程（默认全员）" prop="谁可以发起该流程">
-					<div class="add-btn">
+				<el-form-item label="谁可以发起该流程（不选择，默认全员）" prop="谁可以发起该流程">
+					<div class="add-btn" @click="openApprovePerson">
 						<el-icon :size="18"><Plus /></el-icon>
 					</div>
 					<div></div>
@@ -135,6 +141,7 @@ defineExpose({
 				</el-form-item>
 			</el-form>
 		</div>
+		<approve-person-dialog :model-value="approvePersonDialogVisible"></approve-person-dialog>
 	</div>
 </template>