feat: 新增字典组件封装和示例

Former-commit-id: bb4ce3c0504987d8f33dbd09c93f685e5ca3b9df

src/api/dict/index.ts

@@ -1,13 +1,13 @@
-import request from '@/utils/request';
+import request from "@/utils/request";
-import { AxiosPromise } from 'axios';
+import { AxiosPromise } from "axios";
 import {
   DictTypeQuery,
   DictTypePageResult,
   DictTypeForm,
   DictQuery,
   DictForm,
-  DictPageResult
+  DictPageResult,
-} from './types';
+} from "./types";
 
 /**
  * 字典类型分页列表
@@ -18,9 +18,9 @@ export function getDictTypePage(
   queryParams: DictTypeQuery
 ): AxiosPromise<DictTypePageResult> {
   return request({
-    url: '/api/v1/dict/types/page',
+    url: "/api/v1/dict/types/page",
-    method: 'get',
+    method: "get",
-    params: queryParams
+    params: queryParams,
   });
 }
 
@@ -31,8 +31,8 @@ export function getDictTypePage(
  */
 export function getDictTypeForm(id: number): AxiosPromise<DictTypeForm> {
   return request({
-    url: '/api/v1/dict/types/' + id + '/form',
+    url: "/api/v1/dict/types/" + id + "/form",
-    method: 'get'
+    method: "get",
   });
 }
 
@@ -43,9 +43,9 @@ export function getDictTypeForm(id: number): AxiosPromise<DictTypeForm> {
  */
 export function addDictType(data: DictTypeForm) {
   return request({
-    url: '/api/v1/dict/types',
+    url: "/api/v1/dict/types",
-    method: 'post',
+    method: "post",
-    data: data
+    data: data,
   });
 }
 
@@ -57,9 +57,9 @@ export function addDictType(data: DictTypeForm) {
  */
 export function updateDictType(id: number, data: DictTypeForm) {
   return request({
-    url: '/api/v1/dict/types/' + id,
+    url: "/api/v1/dict/types/" + id,
-    method: 'put',
+    method: "put",
-    data: data
+    data: data,
   });
 }
 
@@ -68,8 +68,8 @@ export function updateDictType(id: number, data: DictTypeForm) {
  */
 export function deleteDictTypes(ids: string) {
   return request({
-    url: '/api/v1/dict/types/' + ids,
+    url: "/api/v1/dict/types/" + ids,
-    method: 'delete'
+    method: "delete",
   });
 }
 
@@ -80,8 +80,8 @@ export function deleteDictTypes(ids: string) {
  */
 export function getDictOptions(typeCode: string): AxiosPromise<OptionType[]> {
   return request({
-    url: '/api/v1/dict/types/' + typeCode + '/items',
+    url: "/api/v1/dict/" + typeCode + "/options",
-    method: 'get'
+    method: "get",
   });
 }
 
@@ -92,9 +92,9 @@ export function getDictPage(
   queryParams: DictQuery
 ): AxiosPromise<DictPageResult> {
   return request({
-    url: '/api/v1/dict/page',
+    url: "/api/v1/dict/page",
-    method: 'get',
+    method: "get",
-    params: queryParams
+    params: queryParams,
   });
 }
 
@@ -105,8 +105,8 @@ export function getDictPage(
  */
 export function getDictFormData(id: number): AxiosPromise<DictForm> {
   return request({
-    url: '/api/v1/dict/' + id + '/form',
+    url: "/api/v1/dict/" + id + "/form",
-    method: 'get'
+    method: "get",
   });
 }
 
@@ -117,9 +117,9 @@ export function getDictFormData(id: number): AxiosPromise<DictForm> {
  */
 export function addDict(data: DictForm) {
   return request({
-    url: '/api/v1/dict',
+    url: "/api/v1/dict",
-    method: 'post',
+    method: "post",
-    data: data
+    data: data,
   });
 }
 
@@ -131,9 +131,9 @@ export function addDict(data: DictForm) {
  */
 export function updateDict(id: number, data: DictForm) {
   return request({
-    url: '/api/v1/dict/' + id,
+    url: "/api/v1/dict/" + id,
-    method: 'put',
+    method: "put",
-    data: data
+    data: data,
   });
 }
 
@@ -144,7 +144,7 @@ export function updateDict(id: number, data: DictForm) {
  */
 export function deleteDict(ids: string) {
   return request({
-    url: '/api/v1/dict/' + ids,
+    url: "/api/v1/dict/" + ids,
-    method: 'delete'
+    method: "delete",
   });
 }

src/components/Dictionary/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <el-select
+      v-model="selectedValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      clearable
+    >
+      <el-option
+        v-for="option in options"
+        :key="option.value"
+        :label="option.label"
+        :value="option.value"
+      ></el-option>
+    </el-select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getDictOptions } from "@/api/dict";
+
+const props = defineProps({
+  typeCode: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: String,
+    default: "",
+  },
+  placeholder: {
+    type: String,
+    default: "请选择",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emits = defineEmits(["update:modelValue"]);
+
+const selectedValue = useVModel(props, "modelValue", emits);
+
+const options: Ref<OptionType[]> = ref([]);
+
+onBeforeMount(() => {
+  // 根据字典类型编码(typeCode)获取字典选项
+  getDictOptions(props.typeCode).then((response) => {
+    options.value = response.data;
+  });
+});
+</script>

src/types/components.d.ts

@@ -91,6 +91,7 @@ declare module "@vue/runtime-core" {
     TagInput: typeof import("./../components/TagInput/index.vue")["default"];
     TagsView: typeof import("./../layout/components/TagsView/index.vue")["default"];
     WangEditor: typeof import("./../components/WangEditor/index.vue")["default"];
+    Dictionary: typeof import("./../components/Dictionary/index.vue")["default"];
   }
   export interface ComponentCustomProperties {
     vLoading: typeof import("element-plus/es")["ElLoadingDirective"];

src/views/demo/dict.vue

@@ -0,0 +1,21 @@
+<!-- 字典组件示例 -->
+<script setup lang="ts">
+const genderDefaultValue = ref("1"); // 性别默认
+</script>
+
+<template>
+  <div class="app-container">
+    <el-link
+      href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/dict.vue"
+      type="primary"
+      target="_blank"
+      class="mb-[20px]"
+      >示例源码 请点击>>>></el-link
+    >
+    <el-form>
+      <el-form-item label="性别">
+        <dictionary v-model="genderDefaultValue" type-code="gender" />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>