优化

src/components/piAsset/index.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="pi-asset">
 		<div class="file-item" v-for="(item, index) in value" :key="index" :style="style">
-			<el-image v-if="obj.isImg(item)" :src="item" :style="style" :preview-src-list="[item]" fit="cover"
-					  preview-teleported :z-index="9999"></el-image>
+			<pi-image v-if="obj.isImg(item)" :src="item" :style="style" :preview-src-list="[item]" fit="cover"
+					  preview-teleported :z-index="9999"/>
 			<pi-player v-else-if="obj.isVideo(item)" :src="item" :options="videoOptions"></pi-player>
 			<el-icon v-else :style="style" style="color: #409eff;" :size="32">
 				<component :is="'pi-icon-task'"/>

src/components/piDictText/index.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script setup>
-import {ref, onMounted} from 'vue'
+import {ref, onMounted, computed} from 'vue'
 import tools from "@/utils/tools"
 import dictConfig from "@/config/dict"
 
@@ -18,17 +18,17 @@ const props = defineProps({
 
 let loading = ref(false)
 let tableData = ref([])
-let defaultValue = ref({})
+
+const defaultValue = computed(() => {
+	return tableData.value.find(
+		item => item[dictConfig.props.value] === props.value
+	) || {}
+})
 
 onMounted(() => {
 	getData()
 })
 
-function getDictLabel() {
-	const val = tableData.value.find(item => item[dictConfig.props.value] === props.value)
-	return defaultValue.value = val || {}
-}
-
 async function getData() {
 	loading.value = true;
 	const cacheKey = genCacheKey()
@@ -37,17 +37,15 @@ async function getData() {
 		if (data) {
 			tableData.value = data
 			loading.value = false
-			getDictLabel()
 			return
 		}
 	}
 	const res = await dictConfig.api({key: props.type});
 	tableData.value = res.data;
-	if (cacheKey) {
+	if (cacheKey && tableData.value.length > 0) {
 		tools.data.set(cacheKey, res.data, 7200)
 	}
 	loading.value = false
-	getDictLabel()
 }
 
 function genCacheKey() {

src/components/piSelect/index.vue

@@ -10,19 +10,14 @@
 <script setup>
 import config from '@/config/select'
 import {ref, watch, onMounted} from 'vue'
+import tools from "@/utils/tools"
 
 const emit = defineEmits(['update:modelValue', 'change'])
 
 const props = defineProps({
 	modelValue: null,
-	api: {
-		type: Function, default: () => {
-		}
-	},
-	params: {
-		type: Object, default: () => {
-		}
-	},
+	api: {type: Function, default: undefined},
+	params: {type: Object, default: null},
 	placeholder: {type: String, default: "请选择"},
 	size: {type: String, default: "default"},
 	clearable: {type: Boolean, default: false},
@@ -34,7 +29,8 @@ const props = defineProps({
 	props: {
 		type: Object, default: () => {
 		}
-	}
+	},
+	cacheKey: {type: String, default: ""}
 })
 
 const selectRef = ref(null)
@@ -62,11 +58,42 @@ onMounted(() => {
 })
 
 async function getData() {
+	if (!props.api) return;
 	loading.value = true;
+	const cacheKey = genCacheKey()
+	if (cacheKey) {
+		const data = tools.data.get(cacheKey)
+		if (data) {
+			tableData.value = data;
+			loading.value = false;
+			return;
+		}
+	}
 	const res = await props.api(props.params);
 	tableData.value = res.data;
+	if (cacheKey) {
+		tools.data.set(cacheKey, res.data, 7200)
+	}
 	loading.value = false;
 }
+
+function genCacheKey() {
+	if (!props.cacheKey) {
+		return null;
+	}
+	return `${props.cacheKey || props.api.name}:` + tools.crypto.MD5(`${stableStringify(props.params)}`).slice(0, 8).toUpperCase()
+}
+
+function stableStringify(obj) {
+	if (obj === null || typeof obj !== 'object') return String(obj)
+	if (Array.isArray(obj)) {
+		return `[${obj.map(stableStringify).join(',')}]`
+	}
+	return `{${Object.keys(obj)
+		.sort()
+		.map(k => `"${k}":${stableStringify(obj[k])}`)
+		.join(',')}}`
+}
 </script>
 
 <style scoped>

src/components/piTable/index.vue

@@ -202,8 +202,8 @@ onMounted(() => {
 	//判断是否静态数据
 	if (props.api) {
 		getData()
-	} else if (data.value) {
-		tableData.value = data.value
+	} else if (props.data) {
+		tableData.value = props.data
 		total.value = tableData.value.length
 	}
 	// 拖拽排序

src/components/piTableCard/index.vue

@@ -0,0 +1,291 @@
+<template>
+	<el-container>
+		<div v-if="(hasSearchSlot || hasExtendSearchSlot) && show" class="extend">
+			<el-collapse-transition>
+				<div class="extend-panel">
+					<slot name="extend"></slot>
+				</div>
+			</el-collapse-transition>
+		</div>
+		<el-header v-if="hasSearchSlot || hasExtendSearchSlot || hasDoSlot">
+			<div class="left-panel">
+				<slot name="do"></slot>
+			</div>
+			<div class="right-panel">
+				<slot name="search"></slot>
+				<el-button v-if="hasExtendSearchSlot" type="primary" icon="el-icon-filter" @click="show = !show"
+						   :plain="show"/>
+			</div>
+		</el-header>
+		<el-main class="nopadding">
+			<div :style="{'height':_height}" v-loading="loading">
+				<el-scrollbar :view-style="{ 'overflow-x': 'hidden' }" class="pi-table-card"
+							  :style="{'height':_table_height}">
+					<el-empty v-if="total===0" :description="emptyText" :image-size="100"></el-empty>
+					<el-row :gutter="20">
+						<el-col :sm="24" :md="12" :lg="8" v-for="(row, index) in tableData" :key="index"
+								style="position: relative">
+							<div class="index">#{{ index + 1 }}</div>
+							<div class="check">
+								<el-checkbox v-model="checkedIds[index]"
+											 @change="(val) => checkChange(val, row, index)"/>
+							</div>
+							<slot name="default" :row="row" :index="index"></slot>
+						</el-col>
+					</el-row>
+				</el-scrollbar>
+				<div class="pi-table-page" v-if="!hidePagination || !hideDo">
+					<div class="pi-table-pagination">
+						<el-pagination v-if="!hidePagination" background size="small" :layout="paginationLayout"
+									   :total="total" :page-size="piPageSize" :page-sizes="pageSizes"
+									   v-model:currentPage="currentPage" @current-change="paginationChange"
+									   @update:page-size="pageSizeChange"></el-pagination>
+					</div>
+					<div class="pi-table-do" v-if="!hideDo">
+						<el-button v-if="!hideRefresh" @click="refresh" icon="el-icon-refresh" circle
+								   style="margin-left:15px"></el-button>
+					</div>
+				</div>
+			</div>
+		</el-main>
+	</el-container>
+</template>
+
+<script setup>
+import tools from "@/utils/tools"
+import config from "@/config/tableCard"
+import {ref, watch, computed, onMounted, onDeactivated, useSlots} from "vue"
+
+defineOptions({
+	name: 'piTableCard'
+})
+
+defineExpose({
+	refresh,
+	upData,
+	reload
+})
+
+const emit = defineEmits(['dataChange', 'selectionChange'])
+const slots = useSlots()
+
+const hasSearchSlot = computed(() => !!slots.search)
+const hasExtendSearchSlot = computed(() => !!slots.extend)
+const hasDoSlot = computed(() => !!slots.do)
+
+const props = defineProps({
+	tableName: {type: String, default: ""},
+	api: {
+		type: Function, default: () => {
+		}
+	},
+	workbench: {type: Boolean, default: false},
+	params: {type: Object, default: () => ({})},
+	data: {
+		type: Object, default: () => {
+		}
+	},
+	height: {type: [String, Number], default: "100%"},
+	pageSize: {type: Number, default: config.pageSize},
+	pageSizes: {type: Array, default: config.pageSizes},
+	hidePagination: {type: Boolean, default: false},
+	hideDo: {type: Boolean, default: false},
+	hideRefresh: {type: Boolean, default: false},
+	paginationLayout: {type: String, default: config.paginationLayout}
+})
+
+let piPageSize = ref(props.pageSize)
+let isActive = ref(true)
+let emptyText = ref("暂无数据")
+let tableData = ref([])
+let total = ref(0)
+let currentPage = ref(1)
+let prop = ref(null)
+let order = ref(null)
+let loading = ref(false)
+let tableParams = ref(props.params)
+let show = ref(false)
+let checkedIds = ref({})
+
+watch(() => props.data, () => {
+	tableData.value = props.data;
+	total.value = tableData.value.length;
+})
+
+watch(() => props.api, () => {
+	tableParams.value = props.params;
+	refresh();
+})
+
+const _height = computed(() => {
+	return Number(props.height) ? Number(props.height) + 'px' : props.height
+})
+
+const _table_height = computed(() => {
+	return props.hidePagination && props.hideDo ? "100%" : "calc(100% - 50px)"
+})
+
+onMounted(() => {
+	//判断是否静态数据
+	if (props.api) {
+		getData()
+	} else if (props.data) {
+		tableData.value = props.data
+		total.value = tableData.value.length
+	}
+})
+
+onDeactivated(() => {
+	isActive.value = false
+})
+
+async function getData() {
+	loading.value = true;
+	var reqData = {
+		[config.request.page]: currentPage.value,
+		[config.request.pageSize]: piPageSize.value,
+		[config.request.prop]: prop.value,
+		[config.request.order]: order.value
+	}
+	if (props.hidePagination) {
+		delete reqData[config.request.page]
+		delete reqData[config.request.pageSize]
+	}
+	Object.assign(reqData, tableParams.value)
+	try {
+		var res = await props.api(reqData)
+	} catch (error) {
+		loading.value = false;
+		emptyText.value = error.statusText;
+		return false;
+	}
+	try {
+		var response = config.parseData(res);
+	} catch (error) {
+		loading.value = false;
+		emptyText.value = "数据格式错误";
+		return false;
+	}
+	if (response.code !== config.successCode) {
+		loading.value = false;
+		emptyText.value = response.msg;
+	} else {
+		emptyText.value = "暂无数据";
+		if (props.hidePagination) {
+			tableData.value = response.data || [];
+		} else {
+			tableData.value = response.rows || [];
+		}
+		if (props.rowKey) {
+			tableData.value = tools.makeTreeData(tableData.value, 0, props.rowKey)
+		}
+		total.value = response.total || 0;
+		loading.value = false;
+	}
+	emit('dataChange', res, tableData.value)
+}
+
+//分页点击
+function paginationChange() {
+	getData();
+}
+
+//条数变化
+function pageSizeChange(size) {
+	piPageSize.value = size
+	getData()
+}
+
+//刷新数据
+function refresh() {
+	clearSelection()
+	getData()
+}
+
+//更新数据 合并上一次params
+function upData(params, page = 1) {
+	currentPage.value = page;
+	clearSelection();
+	Object.assign(tableParams.value, params || {})
+	getData()
+}
+
+//重载数据 替换params
+function reload(params, page = 1) {
+	currentPage.value = page;
+	tableParams.value = params || {}
+	clearSelection()
+	getData()
+}
+
+function checkChange(e, item, index) {
+	if (e) {
+		checkedIds.value[index] = true
+	} else {
+		checkedIds.value[index] = false
+	}
+	// 获取选中项
+	const indexes = Object.keys(checkedIds.value).filter(key => checkedIds.value[key]).map(Number)
+	emit("selectionChange", tableData.value.filter((_, index) => indexes.includes(index)))
+}
+
+function clearSelection() {
+	Object.keys(checkedIds.value).map(i => {
+		checkedIds.value[i] = false
+	})
+	emit("selectionChange", [])
+}
+
+</script>
+
+<style lang="scss" scoped>
+.pi-table-card {
+	overflow: hidden;
+	padding: 13px 15px;
+
+	.index {
+		top: 24px;
+		right: 55px;
+		position: absolute;
+		color: var(--el-text-color-primary);
+	}
+
+	.check {
+		top: 18px;
+		right: 30px;
+		position: absolute;
+	}
+}
+
+.pi-table-page {
+	height: 50px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 15px;
+}
+
+.pi-extend {
+	background: var(--el-bg-color-overlay);
+	border-color: var(--el-border-color-light);
+	display: flex;
+	flex-wrap: wrap;
+	max-width: 100%;
+}
+
+::v-deep(.el-header) {
+	height: auto !important;
+}
+
+.extend {
+	background: var(--el-bg-color-overlay);
+	border-color: var(--el-border-color-light);
+	padding: 15px 15px 0 15px;
+}
+
+.extend-panel {
+	display: inline-flex;
+	flex-wrap: wrap;
+	gap: 10px;
+}
+</style>

src/components/piUpload/file.vue

@@ -40,7 +40,7 @@ const props = defineProps({
 	name: { type: String, default: config.filename },
 	data: { type: Object, default: () => {} },
 	accept: { type: String, default: "" },
-	maxSize: { type: Number, default: config.maxSiz },
+	maxSize: { type: Number, default: config.maxSize },
 	limit: { type: Number, default: 0 },
 	autoUpload: { type: Boolean, default: true },
 	showFileList: { type: Boolean, default: true },

src/components/piUpload/index.vue

@@ -75,7 +75,7 @@ const props = defineProps({
 	name: { type: String, default: config.filename },
 	data: { type: Object, default: () => {} },
 	accept: { type: String, default: "image/gif, image/jpeg, image/png" },
-	maxSize: { type: Number, default: config.maxSiz },
+	maxSize: { type: Number, default: config.maxSize },
 	limit: { type: Number, default: 1 },
 	autoUpload: { type: Boolean, default: true },
 	showFileList: { type: Boolean, default: false },

src/components/piUpload/multiple.vue

@@ -62,7 +62,7 @@ const props = defineProps({
 	name: { type: String, default: config.filename },
 	data: { type: Object, default: () => {} },
 	accept: { type: String, default: "image/gif, image/jpeg, image/png" },
-	maxSize: { type: Number, default: config.maxSiz },
+	maxSize: { type: Number, default: config.maxSize },
 	limit: { type: Number, default: 0 },
 	autoUpload: { type: Boolean, default: true },
 	showFileList: { type: Boolean, default: true },

src/config/tableCard.ts

@@ -0,0 +1,23 @@
+import tools from '@/utils/tools'
+
+export default {
+	successCode: 0,												    //请求完成代码
+	pageSize: 12,													//表格每一页条数
+	pageSizes: [12, 24, 48, 72, 96, 120],								//表格可设置的一页条数
+	paginationLayout: "total, sizes, prev, pager, next, jumper",	//表格分页布局，可设置"total, sizes, prev, pager, next, jumper"
+	parseData: function (res) {										//数据分析
+		return {
+			data: res.data,		//分析无分页的数据字段结构
+			rows: res.data,		//分析行数据字段结构
+			total: res.count,		//分析总数字段结构
+			msg: res.msg,			    //分析描述字段结构
+			code: res.code				//分析状态字段结构
+		}
+	},
+	request: {							//请求规定字段
+		page: 'page',					//规定当前分页字段
+		pageSize: 'limit',			    //规定一页条数字段
+		prop: 'prop',					//规定排序字段名字段
+		order: 'order'					//规定排序规格字段
+	}
+}

src/config/upload.ts

@@ -1,7 +1,5 @@
 import API from "@/api";
 
-//上传配置
-
 export default {
 	api: API.system.upload,			//上传请求API对象
 	filename: "file",					//form请求时文件的key

src/layout/components/tags.vue

@@ -22,33 +22,54 @@
 				<el-icon>
 					<el-icon-refresh/>
 				</el-icon>
-				{{t('menu.refresh')}}
+				{{ t('menu.refresh') }}
 			</li>
 			<hr>
 			<li @click="closeTabs()" :class="contextMenuItem.meta.affix?'disabled':''">
 				<el-icon>
 					<el-icon-close/>
 				</el-icon>
-				{{t('menu.closeTab')}}
+				{{ t('menu.closeTab') }}
 			</li>
 			<li @click="closeOtherTabs()">
 				<el-icon>
 					<el-icon-folder-delete/>
 				</el-icon>
-				{{t('menu.closeOtherTabs')}}
+				{{ t('menu.closeOtherTabs') }}
+			</li>
+
+			<li v-if="showLeft" @click="closeLeft()">
+				<el-icon>
+					<el-icon-back/>
+				</el-icon>
+				{{ t('menu.closeLeft') }}
+			</li>
+
+			<li v-if="showRight" @click="closeRight()">
+				<el-icon>
+					<el-icon-right/>
+				</el-icon>
+				{{ t('menu.closeRight') }}
+			</li>
+
+			<li @click="closeAll()">
+				<el-icon>
+					<el-icon-circle-close/>
+				</el-icon>
+				{{ t('menu.closeAll') }}
 			</li>
 			<hr>
 			<li @click="maximize()">
 				<el-icon>
 					<el-icon-full-screen/>
 				</el-icon>
-				{{t('menu.maximize')}}
+				{{ t('menu.maximize') }}
 			</li>
 			<li @click="openWindow()">
 				<el-icon>
 					<el-icon-copy-document/>
 				</el-icon>
-				{{t('menu.openInNewWindow')}}
+				{{ t('menu.openInNewWindow') }}
 			</li>
 		</ul>
 	</transition>
@@ -82,8 +103,9 @@ let contextMenuItem = ref(null)
 let left = ref(0)
 let top = ref(0)
 let tagList = viewTags.viewTags
-
 let tipDisplayed = ref(false)
+let showLeft = ref(true)
+let showRight = ref(true)
 
 if (dashboardRoute) {
 	dashboardRoute.fullPath = dashboardRoute.path
@@ -172,7 +194,7 @@ function isActive(r) {
 
 //关闭tag
 function closeSelectedTag(tag, autoPushLatestView = true) {
-	const nowTagIndex = tagList.findIndex(item => item.fullPath == tag.fullPath)
+	const nowTagIndex = tagList.findIndex(item => item.fullPath === tag.fullPath)
 	viewTags.removeViewTags(tag)
 	iframe.removeIframeList(tag)
 	keepAlive.removeKeepLive(tag.name)
@@ -188,6 +210,17 @@ function closeSelectedTag(tag, autoPushLatestView = true) {
 
 //tag右键
 function openContextMenu(e, tag) {
+	// 关闭左侧，关闭右侧处理
+	showLeft.value = true
+	showRight.value = true
+	const index = tagList.findIndex(i => i.fullPath === tag.fullPath);
+	if (index === 0) {
+		showLeft.value = false
+	}
+	if (index + 1 === tagList.length) {
+		showRight.value = false
+	}
+	// 后续处理
 	contextMenuItem = tag;
 	contextMenuVisible.value = true;
 	left.value = e.clientX + 1;
@@ -214,7 +247,7 @@ function refreshTab() {
 	const nowTag = contextMenuItem;
 	contextMenuVisible.value = false
 	//判断是否当前路由，否的话跳转
-	if (route.fullPath != nowTag.fullPath) {
+	if (route.fullPath !== nowTag.fullPath) {
 		router.push({
 			path: nowTag.fullPath,
 			query: nowTag.query
@@ -244,7 +277,7 @@ function closeTabs() {
 function closeOtherTabs() {
 	var nowTag = contextMenuItem;
 	//判断是否当前路由，否的话跳转
-	if (route.fullPath != nowTag.fullPath) {
+	if (route.fullPath !== nowTag.fullPath) {
 		router.push({
 			path: nowTag.fullPath,
 			query: nowTag.query
@@ -252,7 +285,7 @@ function closeOtherTabs() {
 	}
 	var tags = [...tagList];
 	tags.forEach(tag => {
-		if (tag.meta && tag.meta.affix || nowTag.fullPath == tag.fullPath) {
+		if (tag.meta && tag.meta.affix || nowTag.fullPath === tag.fullPath) {
 			return true
 		} else {
 			closeSelectedTag(tag, false)
@@ -261,6 +294,74 @@ function closeOtherTabs() {
 	contextMenuVisible.value = false
 }
 
+// 关闭左侧
+function closeLeft() {
+	const nowTag = contextMenuItem;
+	//判断是否当前路由，否的话跳转
+	if (route.fullPath !== nowTag.fullPath) {
+		router.push({
+			path: nowTag.fullPath,
+			query: nowTag.query
+		})
+	}
+	const tags = [...tagList];
+	let flag = true;
+	tags.forEach(tag => {
+		if (nowTag.fullPath === tag.fullPath) {
+			flag = false
+		}
+		if ((tag.meta && tag.meta.affix) || !flag) {
+			return true
+		} else {
+			closeSelectedTag(tag, false)
+		}
+	})
+	contextMenuVisible.value = false
+}
+
+// 关闭右侧
+function closeRight() {
+	const nowTag = contextMenuItem;
+	//判断是否当前路由，否的话跳转
+	if (route.fullPath !== nowTag.fullPath) {
+		router.push({
+			path: nowTag.fullPath,
+			query: nowTag.query
+		})
+	}
+	const tags = [...tagList];
+	let flag = false;
+	tags.forEach(tag => {
+		if (nowTag.fullPath === tag.fullPath) {
+			flag = true
+		}
+		if ((tag.meta && tag.meta.affix) || !flag) {
+			return true
+		} else {
+			closeSelectedTag(tag, false)
+		}
+	})
+	contextMenuVisible.value = false
+}
+
+// 关闭所有
+function closeAll() {
+	const tags = [...tagList];
+	tags.forEach(tag => {
+		if (tag.meta && tag.meta.affix) {
+			return true
+		} else {
+			closeSelectedTag(tag, false)
+		}
+	})
+	// 跳转到后台首页
+	router.push({
+		path: dashboardRoute.fullPath,
+		query: dashboardRoute.query
+	})
+	contextMenuVisible.value = false
+}
+
 //TAB 最大化
 function maximize() {
 	var nowTag = contextMenuItem;

src/pi.ts

@@ -37,7 +37,7 @@ export default {
 			app.component(`ElIcon${icon}`, elIcons[icon])
 		}
 		//统一注册sc-icon图标
-		for(let icon in piIcons.default){
+		for (let icon in piIcons.default) {
 			app.component(`PiIcon${icon}`, piIcons.default[icon])
 		}
 

src/views/system/dict/index.vue

@@ -17,7 +17,7 @@
 		<el-table-column label="字典名称" prop="dict_name"></el-table-column>
 		<el-table-column label="字典类型" prop="dict_type">
 			<template #default="scope">
-				<el-link type="primary" :underline="'never'" :href="`#/system/dict_data?id=${scope.row.dict_id}`">{{scope.row.dict_type}}</el-link>
+				<el-link type="primary" :underline="'never'" :href="`#/system/dict_data/${scope.row.dict_id}`">{{scope.row.dict_type}}</el-link>
 			</template>
 		</el-table-column>
 		<el-table-column label="备注" prop="remark"></el-table-column>

src/views/system/dict_data/index.vue

@@ -75,11 +75,14 @@ const {proxy} = getCurrentInstance()
 const tableRef = ref(null)
 const dialogRef = ref(null)
 const route = useRoute()
+const props = defineProps({
+	id: {type: String}
+})
 
 let dialogShow = ref(false)
 let selection = ref([])
 let search = ref({
-	dict_id: route.query.id ? parseInt(route.query.id) : null,
+	dict_id: parseInt(props.id),
 	dict_label: null,
 	status: null,
 })