aizuda-web-vue3/src/views/flow/create/components/BasicInfo.vue

<script setup name="BasicInfo">
import useFlowStore from '@/store/modules/flow'
import { ref, nextTick, onMounted } from 'vue'
import UseSelect from '@/components/scWorkflow/select'
import group from '@/api/flow/group'
import { useRoute } from 'vue-router'
import { flowIconPrefix, ImageArr } from '@/utils/index'
const route = useRoute()
const flowInfo = useFlowStore()
const visiblePopover = ref(false)
const selectVisible = ref(false)
const useSelectRef = ref(null)
const nodeRoleList = ref([])
const currentNode = ref('nodeRoleList')
const formRef = ref()
const options = ref([])
const imgArr = ref(ImageArr)

// 表单规则
const rules = {
	processKey: [
		{
			required: true,
			// message: '请输入唯一标识',
			validator(rule, value, callback) {
				if (!value) callback('请输入唯一标识')
				if (!/^[a-zA-Z0-9]+$/g.test(value)) callback('仅支持字母和数字')
				callback()
			},
			trigger: 'blur'
		}
	],
	processName: [
		{
			required: true,
			message: '请输入名称',
			trigger: 'blur'
		}
	],
	categoryId: [
		{
			required: true,
			message: '请选择分组',
			trigger: 'change'
		}
	]
}

// 基础信息表单提交校验
const validate = () => {
	return new Promise((resolve, reject) => {
		formRef.value.validate((valid, errObj) => {
			// console.error(valid, 'valid errObj', errObj)
			if (valid) {
				// cb?.(form.value)
				resolve()
				// return form.value
				return
			}
			return reject(errObj)
		})
	})
}

// 弹窗显示隐藏
const openApprovePerson = () => {
	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
		const flag = !item.length
		flowInfo.useScope = flag ? 0 : 1
		let processActorList = []
		for (let i in item) {
			processActorList.push({
				actorId: item[i].id,
				actorName: item[i].name,
				actorType: 0
			})
		}
		flowInfo.processActorList = processActorList
	} else {
		let processPermissionList = []
		for (let i in item) {
			processPermissionList.push({
				userId: item[i].id,
				userName: item[i].name,
				operateApproval: 0,
				operateOwner: 0,
				operateData: 0,
				id: item[i].id,
				name: item[i].name
			})
		}
		flowInfo.processPermissionList = processPermissionList
	}
}

const delRole = (index, itemName) => {
	if (itemName === 'nodeRoleList') {
		nodeRoleList.value.splice(index, 1)
	} else {
		flowInfo.processPermissionList.splice(index, 1)
	}
}

const getGroupList = async () => {
	const data = await group.flowGroupListAllApi({})
	options.value = data || []
}

// icon图标点击保存
const chooseIconEv = item => {
	flowInfo.processIcon = item
	visiblePopover.value = !visiblePopover.value
}

onMounted(() => {
	getGroupList()
})

defineExpose({
	formRef,
	validate
})
</script>

<template>
	<div class="base-info">
		<div class="base-info-panel" style="position: relative">
			<el-form ref="formRef" :model="flowInfo" :rules="rules" label-position="top">
				<el-form-item label="图标" prop="flowInfo.processIcon">
					<el-space>
						<LeIcon class="icon-shower" :icon-class="`${flowIconPrefix}${flowInfo.processIcon}`" />
					</el-space>

					<el-popover placement="right-end" :width="450" trigger="focus" class="base-popover" :visible="visiblePopover">
						<div class="icon-selector__dialog__content">
							<div class="icon-selector-list">
								<div v-for="item in imgArr" :key="item" class="icon-selector-item" @click="chooseIconEv(item)">
									<LeIcon class="icon" :icon-class="`${flowIconPrefix}${item}`" />
								</div>
							</div>
						</div>
						<template #reference>
							<el-link :underline="false" @click="visiblePopover = !visiblePopover">修改</el-link>
						</template>
					</el-popover>
				</el-form-item>
				<el-form-item label="唯一标识 key" prop="processKey">
					<el-input v-model="flowInfo.processKey" clearable maxlength="100"></el-input>
				</el-form-item>
				<el-form-item label="名称" prop="processName">
					<el-input v-model="flowInfo.processName" clearable maxlength="15"></el-input>
				</el-form-item>
				<el-form-item label="说明" prop="remark">
					<el-input v-model="flowInfo.remark" type="textarea" clearable></el-input>
				</el-form-item>
				<el-form-item label="分组" prop="categoryId">
					<el-select v-model="flowInfo.categoryId">
						<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item v-if="false" label="谁可以发起该流程（不选择，默认全员）" prop="谁可以发起该流程">
					<div class="add-btn" @click="selectHandle(1, nodeRoleList, 'nodeRoleList')">
						<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 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" @click="selectHandle(1, flowInfo.processPermissionList, 'nodeRoleManageList')">
						<el-icon :size="18"><Plus /></el-icon>
					</div>
					<div class="tags-list" style="margin-top: 15px; width: 100%">
						<el-tag
							v-for="(user, index) in flowInfo.processPermissionList"
							:key="user.userId"
							type="info"
							closable
							style="margin-right: 8px"
							@close="delRole(index, 'nodeRoleManageList')"
							>{{ user.userName }}
						</el-tag>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<use-select v-if="selectVisible" ref="useSelectRef" @closed="selectVisible = false" @update:selected="selectContentEv"></use-select>
	</div>
</template>

<style scoped lang="scss">
.basic-info-wrap {
	//background: var(--el-color-danger);
}
.flow-name {
	padding-right: 4px;
	color: var(--el-color-danger);
}

.base-info {
	margin: 0 auto;
	padding: 24px 0;
	height: 100%;
	text-align: center;
	overflow-y: auto;
	background-color: var(--el-color-info-light-9);
	position: relative;
	&-panel {
		display: inline-block;
		width: 1128px;
		padding: 24px 288px;
		background-color: var(--el-bg-color);
		text-align: left;
	}
}

.icon-selector__dialog__content {
	height: 384px;
	overflow-x: visible;
	overflow-y: scroll;
	scrollbar-width: none;
	-ms-overflow-style: none;
	.icon-selector-list {
		display: grid;
		grid-template-columns: repeat(5, 64px);
		grid-template-rows: repeat(auto, 64px);
		grid-gap: 16px;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		.icon-selector-item {
			width: 64px;
			height: 64px;
			padding: 8px;
			border: 1px solid #d0d3d6;
			box-sizing: border-box;
			border-radius: 6px;
			cursor: pointer;
			&:hover {
				border-color: #3370ff;
			}
			.icon {
				border-radius: 4px;
				font-size: 46px;
			}
			/*img {
				width: 100%;
				height: 100%;
				border-radius: 4px;
				overflow: hidden;
			}*/
		}
	}
}

.icon-shower {
	width: 48px;
	font-size: 48px;
	//height: 48px;
	border-radius: 50%;
	overflow: hidden;
	/*img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}*/
}

.add-btn {
	width: 48px;
	height: 48px;
	font-family: PingFang SC, Microsoft YaHei;
	font-size: 14px;
	line-height: 20px;
	background-color: var(--el-fill-color);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>