优化

src/components/piDictText/index.vue

@@ -0,0 +1,69 @@
+<template>
+	<el-text v-if="!defaultValue[dictConfig.props.style] || defaultValue[dictConfig.props.style] === 'default'">
+		{{ defaultValue[dictConfig.props.label] }}
+	</el-text>
+	<el-tag v-else :type="defaultValue[dictConfig.props.style]">{{ defaultValue[dictConfig.props.label] }}</el-tag>
+</template>
+
+<script setup>
+import {ref, onMounted} from 'vue'
+import tools from "@/utils/tools"
+import dictConfig from "@/config/dict"
+
+const props = defineProps({
+	value: null,
+	type: {type: String, default: null},
+	cacheKey: {type: String, default: ""}
+})
+
+let loading = ref(false)
+let tableData = ref([])
+let defaultValue = ref({})
+
+onMounted(() => {
+	getData()
+	getDictLabel()
+})
+
+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()
+	if (cacheKey) {
+		const data = tools.data.get(cacheKey)
+		if (data) {
+			tableData.value = data;
+			loading.value = false;
+			return;
+		}
+	}
+	const res = await dictConfig.api({key: props.type});
+	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 || dictConfig.api.name}:` + tools.crypto.MD5(`${stableStringify({key: props.type})}`).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>

src/config/dict.ts

@@ -0,0 +1,11 @@
+import API from "@/api";
+
+export default {
+	api: API.system.dict_data.option,
+	successCode: 0,
+	props: {
+		label: 'dict_label',
+		value: 'dict_value',
+		style: 'show_style'
+	}
+}