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

<script setup name="BasicInfo">
import useFlowStore from '@/store/modules/flow'
import { ref, nextTick, onMounted, computed, watch } from 'vue'
import UseSelect from '@/components/scWorkflow/select'
import group from '@/api/flow/group'
import { useRoute } from 'vue-router'
import { flowIconPrefix } 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 nodeRoleManageList = ref([])
const currentNode = ref('nodeRoleList')
const formRef = ref()
const options = ref([])

const rules = {
	processIcon: [
		{
			required: true,
			message: '请选择图标'
		}
	],
	processKey: [
		{
			required: true,
			message: '请输入唯一标识'
		}
	],
	processName: [
		{
			required: true,
			message: '请输入名称'
		}
	],
	categoryId: [
		{
			required: true,
			message: '请选择分组'
		}
	]
}
const imgsArr = ref([
	'approval',
	'bank-card',
	'bell',
	'box',
	'calendar',
	'car',
	'cash',
	'checklist',
	'clock',
	'coin',
	'contract',
	'dimission',
	'exchange',
	'lightning',
	'location',
	'male',
	'manager',
	'offboarding',
	'onboarding',
	'plane',
	'presentation',
	'propotion',
	'regular',
	'relation',
	'ticket',
	'toolbox',
	'transfer',
	'wallet'
])

const validate = () => {
	return new Promise((resolve, reject) => {
		formRef.value.validate((valid, errObj) => {
			if (valid) {
				console.error('valid 成功')
				// cb?.(form.value)
				resolve(form.value)
				// 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.value.useScope = flag ? 0 : 1
		let processActorList = []
		for (let i in item) {
			processActorList.push({
				actorId: item[i].id,
				actorName: item[i].name,
				actorType: 0
			})
		}
		flowInfo.value.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
			})
		}
		nodeRoleManageList.value = item
		flowInfo.processPermissionList = processPermissionList
	}
}

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

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

const initBaseicInfEv = item => {
	const { processForm, modelContent, ...rest } = item
	flowInfo.value = rest
	flowStore.setProcessForm(processForm)
	flowStore.setModelContent(modelContent)
	flowProcessId.value = queryObj.value.id // 赋值流程id

	if (item.processPermissionList && item.processPermissionList.length) {
		nodeRoleManageList.value = item.processPermissionList.map(item => {
			return {
				id: item.userId,
				name: item.userName,
				operateApproval: 0,
				operateOwner: 0,
				operateData: 0
			}
		})
	}
}

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

// 当前是否是编辑
const queryObj = computed(() => route.query)

// 流程名称变化
// watch(
// 	() => flowInfo.value.processName,
// 	newVal => {
// 		flowName.value = newVal
// 	}
// )

// ----- 缓存相关 end ------

onMounted(() => {
	getGroupList()
	// flowStore.$reset() // 重置缓存
})

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

<template>
	<div class="base-info">
		<div class="base-info-panel" style="position: relative">
			<el-form ref="formRef" :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 imgsArr" :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="flowInfo.processKey">
					<el-input v-model="flowInfo.processKey" clearable></el-input>
				</el-form-item>
				<el-form-item label="名称" prop="flowInfo.processName">
					<el-input v-model="flowInfo.processName" clearable></el-input>
				</el-form-item>
				<el-form-item label="说明" prop="flowInfo.remark">
					<el-input v-model="flowInfo.remark" type="textarea" clearable></el-input>
				</el-form-item>
				<el-form-item label="分组" prop="flowInfo.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, 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>
		<use-select v-if="selectVisible" ref="useSelectRef" @closed="selectVisible = false" @content-ev="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: #eff0f1;
	position: relative;
	&-panel {
		display: inline-block;
		width: 1128px;
		padding: 24px 288px;
		background-color: #fff;
		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: #eff0f1;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>