a

src/components/AuditState/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <el-tag 
+    v-if="currentOption"
+    :type="currentOption.type" 
+    :class="{ 'audit-state-tag': showIcon && currentOption.icon }"
+  >
+    <i v-if="showIcon && currentOption.icon" :class="currentOption.icon" style="margin-right: 4px;"></i>
+    {{ currentOption.label }}
+  </el-tag>
+  <span v-else>{{ emptyText }}</span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export interface StateOption {
+  value: string | number;
+  label: string;
+  type: 'success' | 'danger' | 'warning' | 'info' | '';
+  icon?: string;
+}
+
+interface Props {
+  state?: string | number;
+  options?: StateOption[];
+  showIcon?: boolean;
+  emptyText?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  state: '',
+  options: () => [
+    { value: '1', label: '通过', type: 'success', icon: 'fa-solid fa-circle-check' },
+    { value: '-2', label: '驳回', type: 'danger', icon: 'fa-solid fa-circle-xmark' },
+    { value: '0', label: '待审核', type: 'warning', icon: 'fa-regular fa-clock' }
+  ],
+  showIcon: true,
+  emptyText: '-'
+})
+
+// 根据 state 值查找对应的配置
+const currentOption = computed(() => {
+  if (!props.state && props.state !== 0 && props.state !== '0') {
+    return null
+  }
+  return props.options.find(option => {
+    return String(option.value) === String(props.state)
+  }) || null
+})
+</script>
+
+<style scoped>
+.audit-state-tag {
+  display: inline-flex;
+  align-items: center;
+}
+</style>
+