feat: 审批流程的ICON图标替换成svg

src/store/modules/flow.ts

@@ -7,7 +7,7 @@ interface BasicInfoIndex {
 const basicInfo: BasicInfoIndex = {
 	processKey: '', // 唯一标识
 	processName: '', // 流程定义名称
-	processIcon: 'https://lf3-ea.bytetos.com/obj/goofy/ee/approval/approval-admin/image/iconLib/v5/cart.svg', // 流程图标
+	processIcon: 'approval', // 流程图标
 	categoryId: '', // 流程组分类ID
 	remark: '', // 备注说明
 	useScope: 0, // 使用范围 0，全员 1，指定人员（业务关联） 2，均不可提交

src/utils/index.ts

@@ -192,3 +192,8 @@ export function updateNewColumns(localColumns: LeTableColumnProps[], targetColum
 		.filter(Boolean)
 }
 */
+
+// 获取assets静态资源
+export function getAssetsFile(url: string) {
+	return new URL(`../assets/flow/${url}`, import.meta.url).href
+}

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

@@ -6,6 +6,7 @@ import UseSelect from '@/components/scWorkflow/select'
 import flowDefinition from '@/api/flow/definition'
 import process from '@/api/flow/process'
 import { useRoute } from 'vue-router'
+import { getAssetsFile } from '@/utils/index'
 const route = useRoute()
 
 // 缓存 start
@@ -30,7 +31,7 @@ const options = ref([])
 const flowInfo = ref({
 	processKey: '', // 流程唯一标识 key
 	processName: '', // 流程定义名称
-	processIcon: 'https://lf3-ea.bytetos.com/obj/goofy/ee/approval/approval-admin/image/iconLib/v5/cart.svg', // 流程图标
+	processIcon: 'approval', // 流程图标
 	categoryId: '', // 流程组分类ID
 	useScope: 0, // 使用范围 0，全员 1，指定人员（业务关联） 2，均不可提交
 	processActorList: [
@@ -76,6 +77,37 @@ const rules = {
 		}
 	]
 }
+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) => {
@@ -153,7 +185,7 @@ const initBaseicInfEv = item => {
 	// 		'[{"type":"input","field":"userName","title":"输入框","info":"","$required":false,"_fc_drag_tag":"input","hidden":false,"display":true}]',
 	// 	processKey: '003key',
 	// 	processName: '003名称',
-	// 	processIcon: 'https://lf3-ea.bytetos.com/obj/goofy/ee/approval/approval-admin/image/iconLib/v5/cart.svg',
+	// 	processIcon: 'https://lf3-ea.bytetos.com/obj/goofy/ee/approval/approval-admin/image/iconLib/v5/cart',
 	// 	categoryId: '1725778939021541378',
 	// 	remark: '003说明',
 	// 	useScope: 1,
@@ -246,6 +278,13 @@ const getCurrentProcessDetailEv = id => {
 	})
 }
 
+// icon图标点击保存
+const chooseIconEv = item => {
+	// flowStore.setKeysBasicInfo('processIcon', item)
+  flowInfo.value.processIcon = item
+	visiblePopover.value = !visiblePopover.value
+}
+
 // ----- 缓存相关 start ------
 const flowBaseInfoWatcher = computed(() => {
 	const { processKey, processName, processIcon, categoryId, remark, useScope, processActorList, processPermissionList } = flowInfo.value
@@ -320,15 +359,15 @@ defineExpose({
 				<el-form-item label="图标" prop="processIcon">
 					<el-space>
 						<div class="icon-shower">
-							<img :src="flowInfo.processIcon" alt="" />
+							<img :src="getAssetsFile(flowInfo.processIcon + '.svg')" :alt="flowInfo.processIcon" />
 						</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 v-for="item in imgsArr" :key="item" class="icon-selector-item" @click="chooseIconEv(item)">
+									<img :src="getAssetsFile(item + '.svg')" />
 								</div>
 							</div>
 						</div>

src/views/flow/group/components/listGroup.vue

@@ -39,7 +39,7 @@
 							<div>
 								<li class="group_item flex flex-align-center">
 									<div class="group_itemIcon">
-										<img :src="element.processIcon" />
+                    <img :src="getAssetsFile(element.processIcon + '.svg')" />
 									</div>
 									<div class="group_itemLeft">
 										<div class="group_itemNameWrapper flex flex-align-center" style="margin-bottom: 5px">
@@ -93,7 +93,7 @@ import flowDefinition from '@/api/flow/definition'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import process from '@/api/flow/process'
 import router from '@/router'
-
+import { getAssetsFile } from '@/utils/index'
 const myArray = ref([])
 const hideAddInput = ref(true)
 const listGroupName = ref('')