Quellcode durchsuchen

feat: Icon样式调整

luoyali vor 11 Monaten
Ursprung
Commit
0048cad51b

+ 22 - 42
README.md

@@ -1,50 +1,30 @@
 # Vue 3 + TypeScript + Vite + element-plus
-开箱即用的 vue3 admin项目
 
-- 流程实例 
-  - 列表 ✅
-  - 实例审批流过程 ✅
-  - 详情
+#### svg 操作栏图标
+```angular2html
+操作按钮组,加上class为 ml-2,如果是单个按钮,则不用调整
+text-icon-color: 按钮颜色,正常/暗黑模式
+text-lg: 按钮大小
+```
+```
+# 查看
+<LeIcon class="text-lg text-icon-color" icon-class="icon-processInfo-icons--view-light" />
 
-- 流程任务
-  - 列表 ✅
-  - 详情
+# 分支按钮 
+<LeIcon class="text-lg ml-2 text-icon-color" icon-class="icon-processInfo-hugeicons--git-merge" /> 
 
-- 流程组
-  - 列表 ✅
-  - 新增 ✅
-  - 删除 ✅
+# 编辑
+<LeIcon class="text-lg ml-2 text-icon-color" icon-class="icon-processInfo-mage--edit" />
 
-- 流程
-  - 列表 ✅
-  - 操作按钮 编辑 复制 停用 删除  ✅
-  - 基础信息
-  - 表单设计
-  - 流程设计
-  - 扩展设置
+# 复制
+<LeIcon class="text-lg ml-2 text-icon-color" icon-class="icon-processInfo-lucide--copy" />
 
-- 流程表单
-  - 列表 ✅
-  - 新增 编辑 ✅
-  - 预览 ✅
-  - 字段 ✅
-  - 设计 ✅
+# 禁用
+<LeIcon class="text-lg ml-2 text-icon-color" icon-class="icon-processInfo-solar--forbidden-circle-broken" />
 
-- 流程模型
-  - 列表 ✅
-  - 创建审批
-  - 修改 
-  - 复制 ✅
-  - 移动 ✅
-  - 停用 ✅
-	- 删除 ✅
+# 启用
+<LeIcon class="text-lg ml-2 text-icon-color" icon-class="icon-processInfo-heroicons--lock-open" />
 
-
-11.25进度 欠缺功能
-1 流程组 - ui调整 菜单
-	a. 关键词搜索 无效 [后端排查]
-    /v1/process/list-category?keyword=123
-
-	b. 流程组里面的流程实例排序 还未做 
-	c. 创建流程时,基本信息中的说明字段没有在详情接口中返回
-    d. 编辑流程,流程表单没有把值返回来
+# 删除
+<LeIcon class="text-lg ml-2 text-rose-700" icon-class="icon-processInfo-iconoir--trash" />
+```

+ 1 - 1
src/assets/icons/processInfo/hugeicons--git-merge.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 20a2 2 0 1 0 0-4a2 2 0 0 0 0 4M7 8a2 2 0 1 0 0-4a2 2 0 0 0 0 4m10 6a2 2 0 1 0 0-4a2 2 0 0 0 0 4M7.022 8.279v7.128m7.39-3.403H10.02c-1.098 0-3.158-.88-3.001-3.224" color="currentColor"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 256 256"><path fill="currentColor" d="M208 112a32.05 32.05 0 0 0-30.69 23l-42.21-6a8 8 0 0 1-4.95-2.71L94.43 84.55A32 32 0 1 0 72 87v82a32 32 0 1 0 16 0v-67.37l30 35a24 24 0 0 0 14.83 8.14l44 6.28A32 32 0 1 0 208 112M96 200a16 16 0 1 1-16-16a16 16 0 0 1 16 16m112-40a16 16 0 1 1 16-16a16 16 0 0 1-16 16"/></svg>

+ 1 - 0
src/assets/icons/processInfo/icons--view-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24"><g fill="none" stroke="currentColor"><circle cx="12" cy="12" r="3.5"/><path d="M21 12s-1-8-9-8s-9 8-9 8"/></g></svg>

+ 1 - 1
src/assets/icons/processInfo/lucide--copy.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M20.998 10c-.012-2.175-.108-3.353-.877-4.121C19.243 5 17.828 5 15 5h-3c-2.828 0-4.243 0-5.121.879C6 6.757 6 8.172 6 11v5c0 2.828 0 4.243.879 5.121C7.757 22 9.172 22 12 22h3c2.828 0 4.243 0 5.121-.879C21 20.243 21 18.828 21 16v-1"/><path d="M3 10v6a3 3 0 0 0 3 3M18 5a3 3 0 0 0-3-3h-4C7.229 2 5.343 2 4.172 3.172C3.518 3.825 3.229 4.7 3.102 6"/></g></svg>

+ 1 - 1
src/assets/icons/processInfo/mage--edit.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M19.09 14.441v4.44a2.37 2.37 0 0 1-2.369 2.369H5.12a2.37 2.37 0 0 1-2.369-2.383V7.279a2.356 2.356 0 0 1 2.37-2.37H9.56"/><path d="M6.835 15.803v-2.165c.002-.357.144-.7.395-.953l9.532-9.532a1.362 1.362 0 0 1 1.934 0l2.151 2.151a1.36 1.36 0 0 1 0 1.934l-9.532 9.532a1.361 1.361 0 0 1-.953.395H8.197a1.362 1.362 0 0 1-1.362-1.362M19.09 8.995l-4.085-4.086"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24"><path fill="currentColor" d="M3.548 20.938h16.9a.5.5 0 0 0 0-1h-16.9a.5.5 0 0 0 0 1M9.71 17.18a2.6 2.6 0 0 0 1.12-.65l9.54-9.54a1.75 1.75 0 0 0 0-2.47l-.94-.93a1.79 1.79 0 0 0-2.47 0l-9.54 9.53a2.5 2.5 0 0 0-.64 1.12L6.04 17a.74.74 0 0 0 .19.72a.77.77 0 0 0 .53.22Zm.41-1.36a1.47 1.47 0 0 1-.67.39l-.97.26l-1-1l.26-.97a1.5 1.5 0 0 1 .39-.67l.38-.37l1.99 1.99Zm1.09-1.08l-1.99-1.99l6.73-6.73l1.99 1.99Zm8.45-8.45L18.65 7.3l-1.99-1.99l1.01-1.02a.75.75 0 0 1 1.06 0l.93.94a.754.754 0 0 1 0 1.06"/></svg>

+ 5 - 0
src/styles/index.scss

@@ -152,6 +152,11 @@ div:focus {
 	}
 }
 
+// svg 操作图标样式
+.text-icon-color {
+	color: var(--el-button-text-color);
+}
+
 // 普通列表增删改的通用样式表
 .pageWrap {
 	flex: 1;

+ 41 - 25
src/views/flow/group/components/listGroup.vue

@@ -30,9 +30,9 @@
 							</span>
 						</div>
 						<div class="group_header_nameOperate">
-							<LeIcon class="text-lg" icon-class="icon-processInfo-mage--edit" @click="editFlowGroup('edit', item, index)"/>
+							<LeIcon class="text-lg text-icon-color" icon-class="icon-processInfo-mage--edit" @click="editFlowGroup('edit', item, index)" />
 							<el-tooltip effect="dark" content="删除" placement="top">
-								<LeIcon class="text-lg ml-2 text-rose-700" icon-class="icon-processInfo-iconoir--trash" @click="deleteFlowGroup(item)"/>
+								<LeIcon class="text-lg ml-2 text-rose-700" icon-class="icon-processInfo-iconoir--trash" @click="deleteFlowGroup(item)" />
 							</el-tooltip>
 						</div>
 					</div>
@@ -87,38 +87,38 @@
 												<el-tooltip effect="dark" content="版本控制" placement="top">
 													<LeIcon
 														v-if="element.processVersion > 1"
-														class="text-lg ml-2"
+														class="text-lg ml-2 text-icon-color"
 														icon-class="icon-processInfo-hugeicons--git-merge"
 														@click="historyEv(element)"
 													/>
 												</el-tooltip>
 
 												<el-tooltip effect="dark" content="编辑" placement="top">
-													<LeIcon class="text-lg ml-2" icon-class="icon-processInfo-mage--edit" @click="updateEv(element)" />
+													<LeIcon class="text-lg ml-2 text-icon-color" icon-class="icon-processInfo-mage--edit" @click="updateEv(element)" />
 												</el-tooltip>
 
-												<el-popconfirm title="确定复制 ?" @confirm="copyEv(element.processId)">
-													<template #reference>
-														<LeIcon class="text-lg ml-2" icon-class="icon-processInfo-lucide--copy" />
-													</template>
-												</el-popconfirm>
+												<el-tooltip content="复制" placement="top" effect="dark">
+													<LeIcon class="text-lg ml-2 text-icon-color" icon-class="icon-processInfo-lucide--copy" @click="copyEv(element)" />
+												</el-tooltip>
 
 												<el-tooltip v-if="element.processState === 1" effect="dark" content="禁用" placement="top">
 													<LeIcon
-														class="text-lg ml-2"
+														class="text-lg ml-2 text-icon-color"
 														icon-class="icon-processInfo-solar--forbidden-circle-broken"
 														@click="enabledEv(element.processId, 0)"
 													/>
 												</el-tooltip>
 												<el-tooltip v-if="element.processState === 0" effect="dark" content="启用" placement="top">
-													<LeIcon class="text-lg ml-2" icon-class="icon-processInfo-heroicons--lock-open" @click="enabledEv(element.processId, 1)" />
+													<LeIcon
+														class="text-lg ml-2 text-icon-color"
+														icon-class="icon-processInfo-heroicons--lock-open"
+														@click="enabledEv(element.processId, 1)"
+													/>
 												</el-tooltip>
 
-												<el-popconfirm title="确定删除 ?" @confirm="stopEv(element.processId)">
-													<template #reference>
-														<LeIcon class="text-lg ml-2 text-rose-700" icon-class="icon-processInfo-iconoir--trash" />
-													</template>
-												</el-popconfirm>
+												<el-tooltip content="删除" placement="top" effect="dark">
+													<LeIcon class="text-lg ml-2 text-rose-700" icon-class="icon-processInfo-iconoir--trash" @click="stopEv(element)" />
+												</el-tooltip>
 											</div>
 										</el-col>
 									</el-row>
@@ -274,9 +274,15 @@ const editFlowGroup = async (type, item, idx) => {
 }
 
 // 删除
-const stopEv = async (id: any) => {
-	await process.progressDeleteApi({ id })
-	flowGroupListAll()
+const stopEv = (ele: any) => {
+	ElMessageBox.confirm(`确认删除「${ele.processName}」流程?`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'error'
+	}).then(async () => {
+		await process.progressDeleteApi({ id: ele.processId })
+		flowGroupListAll()
+	})
 }
 
 /**
@@ -287,19 +293,29 @@ const stopEv = async (id: any) => {
  * @returns 无返回值,执行异步操作
  */
 const enabledEv = async (id: any, state: number) => {
-	await process.processUpdateStateApi({ id, state: state })
-	flowGroupListAll()
+	try {
+		await process.processUpdateStateApi({ id, state: state })
+		ElMessage.success('操作成功')
+		flowGroupListAll()
+	} catch (e) {
+		console.log(e)
+	}
 }
 
 /**
  * 复制事件处理函数
  *
- * @param id 要复制的元素的ID
  * @returns 无返回值,执行异步操作
  */
-const copyEv = async (id: any) => {
-	await process.progressCloneApi({ id })
-	flowGroupListAll()
+const copyEv = (ele: any) => {
+	ElMessageBox.confirm(`您即将复制「${ele.processName}」流程,是否确认?`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'info'
+	}).then(async () => {
+		await process.progressCloneApi({ id: ele.processId })
+		flowGroupListAll()
+	})
 }
 
 // 修改

+ 14 - 15
src/views/message/list/index.vue

@@ -28,19 +28,11 @@
 			</template>
 
 			<template #actionSlot="scope">
-				<el-tooltip content="查看" placement="bottom" effect="light">
-					<el-icon class="ibt0" @click="openDetail(scope.row)">
-						<View />
-					</el-icon>
-				</el-tooltip>
-				<el-divider direction="vertical"></el-divider>
-				<el-popconfirm title="确定删除吗?" @confirm="table_del(scope.row)">
-					<template #reference>
-						<el-icon class="ibt0">
-							<Delete />
-						</el-icon>
-					</template>
-				</el-popconfirm>
+				<div class="flex flex-align-pack-center">
+					<LeIcon class="text-lg text-icon-color" icon-class="icon-processInfo-icons--view-light" @click="openDetail(scope.row)" />
+
+					<LeIcon class="text-lg ml-2 text-rose-700" icon-class="icon-processInfo-iconoir--trash" @click="table_del(scope)" />
+				</div>
 			</template>
 		</LeTable>
 
@@ -122,6 +114,7 @@ const columns = [
 	{
 		prop: 'action',
 		label: '操作',
+		align: 'center',
 		width: 100,
 		fixed: 'right',
 		slots: {
@@ -161,8 +154,14 @@ const deleteItem = async ids => {
 }
 
 // 单个删除
-const table_del = row => {
-	deleteItem([row.id])
+const table_del = (scope: any) => {
+	ElMessageBox.confirm(`确认删除「${scope.row.title}」这条数据?`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'error'
+	}).then(async () => {
+		deleteItem([scope.row.id])
+	})
 }
 
 //批量删除