Browse Source

feat: 调整流程组样式

luoyali 1 year ago
parent
commit
9ac886d2ad

+ 8 - 2
src/router/index.ts

@@ -152,11 +152,17 @@ export const constantRoutes: Array<AppRouteRecordRaw> = [
 		redirect: '/flow/group',
 		children: [
 			{
-				path: 'group',
+				path: 'group1',
 				component: () => import('@/views/flow/group/index1.vue'),
-				name: 'group',
+				name: 'group1',
 				meta: { title: '流程组', icon: '' }
 			},
+			{
+				path: 'group',
+				component: () => import('@/views/flow/group/index.vue'),
+				name: 'group',
+				meta: { title: '流程组 - ui调整', icon: '' }
+			},
 			{
 				path: 'form',
 				component: () => import('@/views/flow/form/index.vue'),

+ 7 - 0
src/views/flow/group/components/listGroup.vue

@@ -0,0 +1,7 @@
+<template>
+	<h4>你好啊</h4>
+</template>
+
+<script lang="tsx" setup></script>
+
+<style scoped></style>

+ 87 - 0
src/views/flow/group/components/sortGroup.vue

@@ -0,0 +1,87 @@
+<template>
+	<div>
+		<draggable :list="myArray" item-key="id" chosen-class="chosen" style="height: 100%" @start="dragging = true" @end="endDraggableEv">
+			<template #item="{ element }">
+				<div class="group_list">
+					<div class="group_header flex flex-pack-justify flex-align-center">
+						<div class="group_header_title">{{ element.name }}</div>
+						<div class="group_header_nameOperate">
+							<el-tooltip effect="dark" content="删除" placement="top">
+								<el-icon><Delete @click="deleteItem" /></el-icon>
+							</el-tooltip>
+						</div>
+					</div>
+				</div>
+			</template>
+		</draggable>
+	</div>
+</template>
+
+<script lang="tsx" setup>
+import Draggable from 'vuedraggable'
+import { Delete } from '@element-plus/icons-vue'
+import { ref } from 'vue'
+import { ElMessageBox } from 'element-plus'
+const dragging = ref(false)
+const myArray = ref([
+	{ name: '考勤', id: 1 },
+	{ name: '人事', id: 2 },
+	{ name: '财务', id: 3 },
+	{ name: '行政', id: 4 }
+])
+
+const endDraggableEv = () => {
+	dragging.value = false
+	console.log(myArray.value)
+}
+
+const deleteItem = () => {
+	ElMessageBox.confirm('无法删除,请先删除组内的审批', '删除', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'error'
+	}).then(() => {})
+}
+</script>
+
+<style scoped lang="scss">
+.group_list {
+	border-radius: 4px;
+	box-shadow: rgb(238, 238, 238) 0px 0px 3px 1px;
+	background-color: rgb(255, 255, 255);
+	font-family: PingFangSC-Regular;
+	margin-bottom: 16px;
+	cursor: move;
+	.group_header {
+		height: 54px;
+		padding: 0px 16px 0px 12px;
+		font-size: 16px;
+		line-height: 24px;
+		color: rgb(37, 40, 52);
+		background-color: rgba(244, 245, 246, 0.5);
+		&_title {
+			position: relative;
+			font-family: PingFangSC-Medium;
+			display: flex;
+			align-items: center;
+			color: rgba(0, 0, 0, 0.25);
+		}
+		&_nameOperate {
+			cursor: pointer;
+		}
+	}
+}
+
+/*被拖拽对象的样式*/
+.item {
+	padding: 6px;
+	background-color: #fdfdfd;
+	border: solid 1px #eee;
+	margin-bottom: 10px;
+	cursor: move;
+}
+/*选中样式*/
+.chosen {
+	// border: solid 1px #3089dc !important;
+}
+</style>

+ 54 - 7
src/views/flow/group/index.vue

@@ -1,19 +1,66 @@
 <template>
 	<div class="pageWrap">
-		<el-container>
-			<el-header>
-				<el-input placeholder="输入关键字进行过滤" clearable style="margin-top: 10px" />
-			</el-header>
-			<el-main> </el-main>
+		<el-container class="flex flex-v flex-align-center">
+			<div class="ApprovalList">
+				<el-header class="flex flex-align-center" style="width: 100%">
+					<div style="width: 100%">
+						<el-row style="width: 100%" justify="space-between">
+							<el-col span="6"><el-input placeholder="搜索" clearable /></el-col>
+							<el-col span="6">
+								<template v-if="!sortFlag">
+									<el-space wrap><el-button>新建分组</el-button></el-space>
+									<el-space wrap><el-button @click="changeComponent">分组排序</el-button></el-space>
+								</template>
+								<template v-else>
+									<el-space wrap><el-button type="primary" plain :icon="CircleCheck" @click="changeComponent">完 成</el-button></el-space>
+									<el-space wrap><el-button type="info" plain @click="changeComponent">取 消</el-button></el-space>
+								</template>
+								<el-space wrap><el-button :type="sortFlag ? 'info' : 'primary'" :icon="Plus" :disabled="sortFlag">创建审批</el-button></el-space>
+							</el-col>
+						</el-row>
+					</div>
+				</el-header>
+				<el-main>
+					<component :is="typeComponentMap[pageType]"></component>
+				</el-main>
+			</div>
 		</el-container>
 	</div>
 </template>
-<script lang="tsx" setup></script>
+<script lang="tsx" setup>
+import { ref } from 'vue'
+import { Plus, CircleCheck } from '@element-plus/icons-vue'
+import SortGroup from './components/sortGroup'
+import ListGroup from './components/listGroup'
+
+const sortFlag = ref(false)
+const typeComponentMap = {
+	1: ListGroup,
+	2: SortGroup
+}
+const pageType = ref(1)
+
+const changeComponent: () => void = () => {
+	sortFlag.value = !sortFlag.value
+	if (pageType.value === 1) {
+		pageType.value = 2
+		return
+	}
+	if (pageType.value === 2) {
+		pageType.value = 1
+	}
+}
+</script>
 <style scoped lang="scss">
 .pageWrap {
 	flex: 1;
 	display: flex;
 	height: 100%;
-	//background: #fff;
+	background: #fff;
+}
+.ApprovalList {
+	width: 100%;
+	max-width: 1000px;
+	height: 100%;
 }
 </style>