Browse Source

chore: svg LeIcon 替换 <img src=path/>

lanceJiang 1 year ago
parent
commit
083cf69795

+ 0 - 0
src/assets/flow/approval.svg → src/assets/icons/flow/approval.svg


+ 0 - 0
src/assets/flow/bank-card.svg → src/assets/icons/flow/bank-card.svg


+ 0 - 0
src/assets/flow/bell.svg → src/assets/icons/flow/bell.svg


+ 0 - 0
src/assets/flow/box.svg → src/assets/icons/flow/box.svg


+ 0 - 0
src/assets/flow/calendar.svg → src/assets/icons/flow/calendar.svg


+ 0 - 0
src/assets/flow/car.svg → src/assets/icons/flow/car.svg


+ 0 - 0
src/assets/flow/cart.svg → src/assets/icons/flow/cart.svg


+ 0 - 0
src/assets/flow/cash.svg → src/assets/icons/flow/cash.svg


+ 0 - 0
src/assets/flow/checklist.svg → src/assets/icons/flow/checklist.svg


+ 0 - 0
src/assets/flow/clock.svg → src/assets/icons/flow/clock.svg


+ 0 - 0
src/assets/flow/coin.svg → src/assets/icons/flow/coin.svg


+ 0 - 0
src/assets/flow/contract.svg → src/assets/icons/flow/contract.svg


+ 0 - 0
src/assets/flow/dimission.svg → src/assets/icons/flow/dimission.svg


+ 0 - 0
src/assets/flow/exchange.svg → src/assets/icons/flow/exchange.svg


+ 0 - 0
src/assets/flow/lightning.svg → src/assets/icons/flow/lightning.svg


+ 0 - 0
src/assets/flow/location.svg → src/assets/icons/flow/location.svg


+ 0 - 0
src/assets/flow/male.svg → src/assets/icons/flow/male.svg


+ 0 - 0
src/assets/flow/manager.svg → src/assets/icons/flow/manager.svg


+ 0 - 0
src/assets/flow/offboarding.svg → src/assets/icons/flow/offboarding.svg


+ 0 - 0
src/assets/flow/onboarding.svg → src/assets/icons/flow/onboarding.svg


+ 0 - 0
src/assets/flow/plane.svg → src/assets/icons/flow/plane.svg


+ 0 - 0
src/assets/flow/presentation.svg → src/assets/icons/flow/presentation.svg


+ 0 - 0
src/assets/flow/propotion.svg → src/assets/icons/flow/propotion.svg


+ 0 - 0
src/assets/flow/regular.svg → src/assets/icons/flow/regular.svg


+ 0 - 0
src/assets/flow/relation.svg → src/assets/icons/flow/relation.svg


+ 0 - 0
src/assets/flow/ticket.svg → src/assets/icons/flow/ticket.svg


+ 0 - 0
src/assets/flow/toolbox.svg → src/assets/icons/flow/toolbox.svg


+ 0 - 0
src/assets/flow/transfer.svg → src/assets/icons/flow/transfer.svg


+ 0 - 0
src/assets/flow/wallet.svg → src/assets/icons/flow/wallet.svg


+ 3 - 1
src/utils/index.ts

@@ -193,7 +193,9 @@ export function updateNewColumns(localColumns: LeTableColumnProps[], targetColum
 }
 */
 
-// 获取assets静态资源
+// 获取assets静态资源(暂->已不再使用)
 export function getAssetsFile(url: string) {
 	return new URL(`../assets/flow/${url}`, import.meta.url).href
 }
+
+export const flowIconPrefix = 'icon-flow-'

+ 10 - 15
src/views/approve/launch/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="pageWrap">
+	<div class="flex-column-page-wrap pageWrap">
 		<div style="padding: 10px">
 			<el-card class="box-card">
 				<el-collapse v-model="activeNames" @change="handleChange">
@@ -7,13 +7,15 @@
 						<el-row>
 							<el-col
 								v-for="i_children in item.processList"
+								:key="i_children.processId"
 								:span="6"
 								style="padding-left: 8px; padding-right: 8px; margin-bottom: 12px; cursor: pointer"
 							>
 								<div class="card-in" @click="testEv">
-									<div class="flow-icon">
+									<LeIcon class="flow-icon" :icon-class="`${flowIconPrefix}${i_children.processIcon}`" />
+									<!--									<div class="flow-icon">
 										<img :src="getAssetsFile(i_children.processIcon + '.svg')" />
-									</div>
+									</div>-->
 									<div class="space space-vertical">
 										<div class="space-item">
 											<div class="first-edit">
@@ -42,7 +44,7 @@ import { ref, onMounted } from 'vue'
 const input = ref('')
 const activeNames = ref(['1'])
 import model from '@/api/flow/process'
-import { getAssetsFile } from '@/utils/index'
+import { flowIconPrefix/*, getAssetsFile*/ } from '@/utils/index'
 const startList = ref([])
 const handleChange = val => {
 	console.log(val)
@@ -52,7 +54,7 @@ const handleChange = val => {
 const listEv = async () => {
 	const res = await model.launchProcessListApi()
 	startList.value = res || []
-	activeNames.value = res.length ? [res[0].categoryName] : ['']
+	activeNames.value = startList.value.map(v => v.categoryName)
 }
 
 const testEv = () => {
@@ -66,7 +68,7 @@ onMounted(() => {
 <style scoped lang="scss">
 .pageWrap {
 	//height: 100%;
-	overflow-x: scroll;
+	//overflow-x: scroll;
 	//background: #fff;
 }
 .card-in {
@@ -105,15 +107,8 @@ onMounted(() => {
 		}
 	}
 	.flow-icon {
-		flex: 0 0 66px;
-
-		img {
-			flex: 0 0 auto;
-			height: 100%;
-			border-radius: 8px;
-			vertical-align: middle;
-			border-style: none;
-		}
+		font-size: 66px;
+		flex-shrink: 0;
 	}
 	.space {
 		display: inline-flex;

+ 17 - 10
src/views/flow/create/components/BasicInfo.vue

@@ -6,7 +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'
+import { flowIconPrefix /*, getAssetsFile*/ } from '@/utils/index'
 const route = useRoute()
 
 // 缓存 start
@@ -281,7 +281,7 @@ const getCurrentProcessDetailEv = id => {
 // icon图标点击保存
 const chooseIconEv = item => {
 	// flowStore.setKeysBasicInfo('processIcon', item)
-  flowInfo.value.processIcon = item
+	flowInfo.value.processIcon = item
 	visiblePopover.value = !visiblePopover.value
 }
 
@@ -358,16 +358,18 @@ defineExpose({
 			<el-form ref="formRef" :model="flowInfo" :rules="rules" label-position="top">
 				<el-form-item label="图标" prop="processIcon">
 					<el-space>
-						<div class="icon-shower">
+						<LeIcon class="icon-shower" :icon-class="`${flowIconPrefix}${flowInfo.processIcon}`" />
+						<!--						<div class="icon-shower">
 							<img :src="getAssetsFile(flowInfo.processIcon + '.svg')" :alt="flowInfo.processIcon" />
-						</div>
+						</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 imgsArr" :key="item" class="icon-selector-item" @click="chooseIconEv(item)">
-									<img :src="getAssetsFile(item + '.svg')" />
+									<LeIcon class="icon" :icon-class="`${flowIconPrefix}${item}`" />
+									<!--                  <img :src="getAssetsFile(item + '.svg')" />-->
 								</div>
 							</div>
 						</div>
@@ -479,26 +481,31 @@ defineExpose({
 			&:hover {
 				border-color: #3370ff;
 			}
-			img {
+			.icon {
+				border-radius: 4px;
+				font-size: 46px;
+			}
+			/*img {
 				width: 100%;
 				height: 100%;
 				border-radius: 4px;
 				overflow: hidden;
-			}
+			}*/
 		}
 	}
 }
 
 .icon-shower {
 	width: 48px;
-	height: 48px;
+	font-size: 48px;
+	//height: 48px;
 	border-radius: 50%;
 	overflow: hidden;
-	img {
+	/*img {
 		width: 100%;
 		height: 100%;
 		object-fit: cover;
-	}
+	}*/
 }
 
 .add-btn {

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

@@ -38,9 +38,10 @@
 						<template #item="{ element }">
 							<div>
 								<li class="group_item flex flex-align-center">
-									<div class="group_itemIcon">
+									<LeIcon class="group_itemIcon" :icon-class="`${flowIconPrefix}${element.processIcon}`" />
+									<!--									<div class="group_itemIcon">
                     <img :src="getAssetsFile(element.processIcon + '.svg')" />
-									</div>
+									</div>-->
 									<div class="group_itemLeft">
 										<div class="group_itemNameWrapper flex flex-align-center" style="margin-bottom: 5px">
 											<div class="group_itemName">
@@ -93,7 +94,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'
+import { flowIconPrefix /*, getAssetsFile*/ } from '@/utils/index'
 const myArray = ref([])
 const hideAddInput = ref(true)
 const listGroupName = ref('')
@@ -286,11 +287,12 @@ defineExpose({
 				width: 42px;
 				border-radius: 50%;
 				overflow: hidden;
-				img {
+				font-size: 42px;
+				/*img {
 					width: 100%;
 					height: 100%;
 					object-fit: cover;
-				}
+				}*/
 			}
 			.group_itemLeft {
 				width: 426px;