Merge branch 'master' of https://github.com/youlaitech/vue3-element-admin

Former-commit-id: ef52f59717bcaddabd61386caaa18dc4aee7fbae

src/components/Dictionary/index.vue

@@ -1,20 +1,18 @@
 <template>
-  <div>
+  <el-select
-    <el-select
+    v-model="selectedValue"
-      v-model="selectedValue"
+    :placeholder="placeholder"
-      :placeholder="placeholder"
+    :disabled="disabled"
-      :disabled="disabled"
+    clearable
-      clearable
+    @change="handleChange"
-      @change="handleChange"
+  >
-    >
+    <el-option
-      <el-option
+      v-for="option in options"
-        v-for="option in options"
+      :key="option.value"
-        :key="option.value"
+      :label="option.label"
-        :label="option.label"
+      :value="option.value"
-        :value="option.value"
+    />
-      />
+  </el-select>
-    </el-select>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -29,8 +27,7 @@ const props = defineProps({
     required: true,
   },
   modelValue: {
-    type: String,
+    type: [String, Number],
-    default: "",
   },
   placeholder: {
     type: String,
@@ -46,9 +43,24 @@ const emits = defineEmits(["update:modelValue"]); // 父组件监听事件，同
 
 const options: Ref<OptionType[]> = ref([]); // 字典下拉数据源
 
-const selectedValue = computed(() => props.modelValue.toString()); // 将父组件的值统一转化String和下拉数据源进行比较，避免值的类型不一致导致回显失败
+const selectedValue = ref<string | number | undefined>();
 
-function handleChange(val?: string) {
+watch([options, () => props.modelValue], ([newOptions, newModelValue]) => {
+  if (newOptions.length === 0) return; // 下拉数据源加载未完成不回显
+  if (newModelValue == undefined) {
+    selectedValue.value = undefined;
+    return;
+  }
+  if (typeof newOptions[0].value === "number") {
+    selectedValue.value = Number(newModelValue);
+  } else if (typeof newOptions[0].value === "string") {
+    selectedValue.value = String(newModelValue);
+  } else {
+    selectedValue.value = newModelValue;
+  }
+});
+
+function handleChange(val?: string | number | undefined) {
   emits("update:modelValue", val);
 }
 

src/components/Upload/SingleUpload.vue

@@ -8,8 +8,8 @@
     :before-upload="handleBeforeUpload"
     :http-request="uploadFile"
   >
-    <img v-if="imgUrl" :src="imgUrl" class="single" />
+    <img v-if="imgUrl" :src="imgUrl" class="single-uploader__image" />
-    <el-icon v-else class="single-uploader-icon"><i-ep-plus /></el-icon>
+    <el-icon v-else class="single-uploader__icon"><i-ep-plus /></el-icon>
   </el-upload>
 </template>
 
@@ -49,33 +49,29 @@ function handleBeforeUpload(file: UploadRawFile) {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
-.single-uploader .single {
+.single-uploader {
-  display: block;
-  width: 178px;
-  height: 178px;
-}
-</style>
-
-<style>
-.single-uploader .el-upload {
-  position: relative;
   overflow: hidden;
   cursor: pointer;
-  border: 1px dashed var(--el-border-color);
+  border: 1px var(--el-border-color) solid;
   border-radius: 6px;
-  transition: var(--el-transition-duration-fast);
-}
 
-.single-uploader .el-upload:hover {
+  &:hover {
-  border-color: var(--el-color-primary);
+    border-color: var(--el-color-primary);
-}
+  }
 
-.el-icon.single-uploader-icon {
+  &__image {
-  width: 178px;
+    display: block;
-  height: 178px;
+    width: 178px;
-  font-size: 28px;
+    height: 178px;
-  color: #8c939d;
+  }
-  text-align: center;
+
+  &___icon {
+    width: 178px;
+    height: 178px;
+    font-size: 28px;
+    color: #8c939d;
+    text-align: center;
+  }
 }
 </style>

src/layout/components/NavBar/index.vue

@@ -7,7 +7,7 @@ const appStore = useAppStore();
  * 左侧菜单栏显示/隐藏
  */
 function toggleSideBar() {
-  appStore.toggleSidebar(true);
+  appStore.toggleSidebar();
 }
 </script>
 

src/layout/index.vue

@@ -72,7 +72,7 @@ function handleOutsideClick() {
 }
 
 function toggleSideBar() {
-  appStore.toggleSidebar(true);
+  appStore.toggleSidebar();
 }
 </script>
 

src/store/modules/app.ts

@@ -32,9 +32,9 @@ export const useAppStore = defineStore("app", () => {
   });
 
   // actions
-  function toggleSidebar(withoutAnimation: boolean) {
+  function toggleSidebar() {
     sidebar.opened = !sidebar.opened;
-    sidebar.withoutAnimation = withoutAnimation;
+    sidebar.withoutAnimation = false;
     if (sidebar.opened) {
       sidebarStatus.value = "opened";
     } else {

src/views/demo/dict.vue

@@ -1,7 +1,7 @@
 <!-- 字典组件示例 -->
 <script setup lang="ts">
 const stringValue = ref("1"); // 性别(值为String)
-const nmberValue = ref(1); // 性别(值为Number)
+const numberValue = ref(1); // 性别(值为Number)
 </script>
 
 <template>
@@ -22,7 +22,7 @@ const nmberValue = ref(1); // 性别(值为Number)
       </el-form-item>
 
       <el-form-item label="性别">
-        <dictionary v-model="nmberValue" type-code="gender" />
+        <dictionary v-model="numberValue" type-code="gender" />
         <el-link :underline="false" type="success" class="ml-5"
           >值为Number: const value = ref(1);
         </el-link>