Merge remote-tracking branch 'origin/master'

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

@@ -8,14 +8,38 @@ const props = defineProps({
 		type: String
 	}
 })
+const visiblePopover = ref(false)
 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 rules = {
 	图标: [
 		{
@@ -64,33 +88,57 @@ defineExpose({
 </script>
 
 <template>
-	<el-tab-pane class="basic-info-wrap" :label="label" :name="name">
-		<!--		<template #label>
-			<span class="flow-name">{{ 'flowName' }}</span>
-			基础信息
-		</template>-->
-		<el-form ref="formRef" :model="form" :rules="rules" label-position="top">
-			<el-form-item label="图标" prop="图标">
-<!--				todo...-->
-<!--				<scUpload v-model="form.图标" title="图标" />-->
-			</el-form-item>
-			<el-form-item label="名称" prop="名称">
-				<el-input v-model="form.名称" clearable></el-input>
-			</el-form-item>
-			<el-form-item label="分组" prop="分组">
-				<el-input v-model="form.分组" clearable></el-input>
-			</el-form-item>
-			<el-form-item label="谁可以发起该流程（默认全员）" prop="谁可以发起该流程">
-				<el-input v-model="form.谁可以发起该流程"></el-input>
-			</el-form-item>
-			<el-form-item label="管理员" prop="管理员">
-				<el-input v-model="form.管理员"></el-input>
-			</el-form-item>
-		</el-form>
-	</el-tab-pane>
+	<div class="base-info">
+		<div class="base-info-panel">
+			<el-form ref="formRef" :model="form" :rules="rules" label-position="top">
+				<el-form-item label="图标" prop="图标">
+					<el-space>
+						<div class="icon-shower">
+							<img src="https://lf3-ea.bytetos.com/obj/goofy/ee/approval/approval-admin/image/iconLib/v5/cart.svg" alt="" />
+						</div>
+					</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 27" :key="item" class="icon-selector-item" @click="visiblePopover = !visiblePopover">
+									<img src="https://lf3-ea.bytetos.com/obj/goofy/ee/approval/approval-admin/image/iconLib/v5/cart.svg" alt="" />
+								</div>
+							</div>
+						</div>
+						<template #reference>
+							<el-link :underline="false" @click="visiblePopover = !visiblePopover">修改</el-link>
+						</template>
+					</el-popover>
+				</el-form-item>
+				<el-form-item label="名称" prop="名称">
+					<el-input v-model="form.名称" clearable></el-input>
+				</el-form-item>
+				<el-form-item label="说明" prop="说明">
+					<el-input v-model="form.说明" clearable></el-input>
+				</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-select>
+				</el-form-item>
+				<el-form-item label="谁可以发起该流程（默认全员）" prop="谁可以发起该流程">
+					<div class="add-btn">
+						<el-icon :size="18"><Plus /></el-icon>
+					</div>
+					<div></div>
+				</el-form-item>
+				<el-form-item label="管理员" prop="管理员">
+					<div class="add-btn">
+						<el-icon :size="18"><Plus /></el-icon>
+					</div>
+				</el-form-item>
+			</el-form>
+		</div>
+	</div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .basic-info-wrap {
 	//background: var(--el-color-danger);
 }
@@ -98,4 +146,81 @@ defineExpose({
 	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;
+	&-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;
+			}
+			img {
+				width: 100%;
+				height: 100%;
+				border-radius: 4px;
+				overflow: hidden;
+			}
+		}
+	}
+}
+
+.icon-shower {
+	width: 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>

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

@@ -10,7 +10,7 @@ defineProps({
 </script>
 
 <template>
-	<el-tab-pane class="extend-set-wrap" :label="label" :name="name"> 扩展设置 </el-tab-pane>
+	<h1>123</h1>
 </template>
 
 <style scoped lang="scss">

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

@@ -42,9 +42,7 @@ defineExpose({
 </script>
 
 <template>
-	<el-tab-pane class="flow-design-wrap" :label="label" :name="name">
-		<ScWorkflow v-model="form.processConfig"></ScWorkflow>
-	</el-tab-pane>
+	<ScWorkflow v-model="form.processConfig"></ScWorkflow>
 </template>
 
 <style scoped>

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

@@ -11,104 +11,7 @@ import draggable from 'vuedraggable'
 </script>
 
 <template>
-	<el-tab-pane class="form-design-wrap" :label="label" :name="name">
-<!--		<el-container>
-			<el-aside width="400px">
-				<div effect="dark" style="background-color: white; margin-top: 0px; padding-top: 20px">
-					<h4 style="text-align: center">组件库</h4>
-					<template v-for="(item, index) in oriFormList">
-						<h5 style="padding-left: 60px">{{ item.name }}</h5>
-						<draggable
-							v-model="item.formList"
-							ghost-class="ghost"
-							:force-fallback="true"
-							item-key="index"
-							:sort="false"
-							class="leftItem"
-							:animation="300"
-							:group="{ name: 'dragFormList', pull: 'clone', put: false }"
-							:clone="cloneFunc"
-							@end="dragEnd"
-							@start="drag = true"
-						>
-							<template #item="{ element }">
-								<div class="zj">
-									<el-button size="large" style="width: 100%" :icon="$icon[element.icon]">{{ element.name }} </el-button>
-								</div>
-							</template>
-						</draggable>
-					</template>
-				</div>
-			</el-aside>
-			<el-main>
-				<div style="display: flex; flex-direction: row">
-					<div class="f11">
-						<div class="drag-content">
-							<div style="text-align: center; font-size: 15px; font-weight: bold; margin-bottom: 20px">{{ flowName }}</div>
-							<div class="drag-content-inner">
-								<el-form label-position="top">
-									<draggable
-										v-model="targetList"
-										style="min-height: 600px; background-color: var(&#45;&#45;el-bg-color-page)"
-										item-key="index"
-										:sort="true"
-										effect="dark"
-										:group="{ name: 'dragFormList', pull: true, put: true }"
-									>
-										<template #item="{ element, index }">
-											<div
-												class="okcomponent border line"
-												effect="dark"
-												:class="{ 'active-component': isCurrentForm(element.id) }"
-												@click.stop="showCurrentPageConfigPanel(element.id)"
-											>
-												<el-icon v-if="element.type != 'Empty'" class="deleteIcon" @click.stop="deleteForm(element.id)">
-													<Delete />
-												</el-icon>
-												<el-form-item :label="step2Object[element.id]?.name" :required="step2Object[element.id]?.required">
-													<component
-														:is="getFormWidget(element.type)"
-														:id="element.id"
-														v-model:form="step2Object[element.id]"
-														style="width: 100%"
-														:index="index"
-														@showPanel="showPanel"
-													></component>
-												</el-form-item>
-											</div>
-										</template>
-									</draggable>
-								</el-form>
-							</div>
-						</div>
-					</div>
-					<div v-if="currentForm" class="f22">
-						<el-card class="box-card">
-							<template #header>
-								<div class="card-header">
-									{{ currentForm?.typeName }}
-								</div>
-							</template>
-							<el-form label-width="120px" label-position="top">
-								<el-form-item required label="标题">
-									<el-input v-model="currentForm.name" maxlength="10" />
-								</el-form-item>
-
-								<el-form-item label="提示" :required="currentForm.type === 'Description'">
-									<el-input v-model="currentForm.placeholder" maxlength="50" />
-								</el-form-item>
-
-								<component :is="getFormConfigWidget(currentForm.type)" :id="currentForm.id" ref="currentFormConfigRef"></component>
-								<el-form-item label="其他">
-									<el-checkbox v-model="currentForm.required" label="必填" />
-								</el-form-item>
-							</el-form>
-						</el-card>
-					</div>
-				</div>
-			</el-main>
-		</el-container>-->
-	</el-tab-pane>
+	<h1>123</h1>
 </template>
 
 <style scoped lang="scss">

src/views/flow/create/index.vue

@@ -1,29 +1,43 @@
 <template>
-	<div class="flow-create-wrap">
-		<div class="el-tabs__item submit-tab is-top">
-			<el-button type="primary" @click="submitHandler">发布</el-button>
+	<div class="create-approval">
+		<div class="create-approval-header flex flex_align-center">
+			<div class="create-approval-header-back">
+				<el-icon :size="18"><ArrowLeft /></el-icon>
+			</div>
+			<div class="create-approval-header-left-zh">
+				<div class="create-approval-header-name">请假</div>
+				<div class="create-approval-header-time">最近保存：6 分钟前</div>
+			</div>
+			<div class="create-approval-header-tab-list">
+				<div
+					v-for="(item, idx) in componentsArr"
+					:key="idx"
+					class="create-approval-header-tab-item"
+					:class="[item.label === activeName ? 'active' : '']"
+					@click="activeComponent(item)"
+				>
+					<span class="create-approval-header-tab-counter">{{ idx + 1 }}</span>
+					<span>{{ item.label }}</span>
+				</div>
+			</div>
+			<div class="create-approval-header-right">
+				<el-button type="primary" @click="submitHandler">发布</el-button>
+			</div>
+		</div>
+		<div class="create-approval-main">
+			<component :is="currentComponent" />
 		</div>
-		<el-tabs v-model="activeName">
-			<template v-for="v of components" :key="v.name">
-				<component :is="v.component" ref="tabRefs" v-bind="v" />
-			</template>
-		</el-tabs>
 	</div>
 </template>
 
 <script setup name="flow_create">
-import { ref } from 'vue'
-import { ElMessage } from 'element-plus'
+import { computed, ref } from 'vue'
 import BasicInfoTab from './components/BasicInfo.vue'
 import ExtendSetTab from './components/ExtendSet.vue'
 import FlowDesignTab from './components/FlowDesign.vue'
 import FormDesignTab from './components/FormDesign.vue'
-const tabRefs = ref()
-// const basicInfoRef = ref()
-// const formDesignRef = ref()
-// const flowDesignRef = ref()
-// const extendSetRef = ref()
-const components = [
+
+const componentsArr = [
 	{
 		component: BasicInfoTab,
 		label: '基础信息',
@@ -49,60 +63,132 @@ const components = [
 		// ref: 'extendSetRef'
 	}
 ]
-
 const activeName = ref('基础信息')
 
-window.tabRefs = tabRefs
-const submitHandler = () => {
-	Promise.all(
-		tabRefs.value.map(tabPane => {
-			if (tabPane.validate) {
-				return tabPane.validate()
-			}
-			return {}
-		})
-	)
-		.then(res => {
-			console.warn(res, 'res.......')
-		})
-		.catch(([name, errObj]) => {
-			console.warn(name, ')错误来源(', errObj)
-			ElMessage.warning(`${name} 校验失败， 请重试~`)
-			// 跳转到错误tab
-			activeName.value = name
-		})
-	// console.log(basicInfoRef.value)
-	// console.log(formDesignRef.value)
-	// console.log(flowDesignRef.value)
-	// console.log(extendSetRef.value)
+const submitHandler = () => {}
+
+const activeComponent = (item) => {
+	activeName.value = item.label
 }
+
+const currentComponent = computed(() => {
+	return componentsArr.find(item => item.label === activeName.value)?.component
+})
 </script>
 
 <style scoped lang="scss">
-.flow-create-wrap {
-	padding: 0 10px;
-	background: #fff;
-	position: relative;
+.create-approval {
 	height: 100%;
-	.submit-tab {
-		position: absolute;
-		right: 0;
-		top: 0;
-		z-index: 1;
-		height: 40px;
-		display: flex;
-		align-items: center;
-	}
-}
-:deep(.el-tabs) {
-	height: 100%;
-	.el-tabs__header {
-		margin-bottom: 10px;
+	min-width: 1200px;
+	min-height: 600px;
+	overflow: auto;
+
+	&-header {
+		justify-content: flex-start;
+		height: 64px;
+		z-index: 12;
+		position: relative;
+		box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.06);
+		padding-left: 16px;
+		padding-right: 20px;
+
+		&-back {
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			height: 100%;
+			margin-right: 15px;
+		}
+
+		&-left-zh {
+			width: calc(50% - 316.5px);
+			min-width: 248px;
+		}
+
+		&-name {
+			font-weight: 500;
+			font-size: 16px;
+			white-space: nowrap;
+			cursor: pointer;
+			width: -webkit-fit-content;
+			width: -moz-fit-content;
+			width: fit-content;
+			max-width: 100%;
+			height: 24px;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		&-time {
+			width: 100%;
+			height: 20px;
+			line-height: 20px;
+			font-size: 12px;
+			color: #8f959e;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+
+		&-tab-list {
+			margin-left: 10px;
+			flex-shrink: 0;
+			display: flex;
+			justify-content: center;
+		}
+
+		&-tab-item {
+			font-family: PingFang SC, Microsoft YaHei;
+			font-size: 18px;
+			line-height: 28px;
+			color: #646a73;
+			margin-right: 42px;
+			padding: 18px 0;
+			border-bottom: 2px solid transparent;
+			cursor: pointer;
+
+			&.active {
+				border-bottom-color: #3370ff;
+				color: #3370ff;
+				font-weight: 500;
+
+				.create-approval-header-tab-counter {
+					border-color: #3370ff;
+					background-color: #3370ff;
+					color: #fff;
+					font-weight: 400;
+				}
+			}
+		}
+
+		&-tab-counter {
+			display: inline-block;
+			margin-right: 6px;
+			width: 24px;
+			height: 24px;
+			border-radius: 50%;
+			border: 1px solid #646a73;
+			font-size: 16px;
+			line-height: 22px;
+			text-align: center;
+		}
+
+		&-right {
+			flex: 1 1;
+			flex-shrink: 0;
+			display: flex;
+			justify-content: flex-end;
+			align-items: center;
+			position: relative;
+			height: 100%;
+			width: -webkit-fit-content;
+			width: -moz-fit-content;
+			width: fit-content;
+		}
 	}
-	.el-tabs__content {
-		// 40 + 10
-		height: calc(100% - 50px);
-		overflow: auto;
+
+	&-main {
+		height: calc(100% - 64px);
 	}
 }
 </style>