Merge pull request '✨ fix(g-sys-dict): 修复字典组件部分已知bug，并增加radio-button渲染模式' (#400) from jasondom/Admin.NET.Pro:v2-3 into v2

Reviewed-on: https://code.adminnet.top/Admin.NET/Admin.NET.Pro/pulls/400

Web/src/components/sysDict/sysDict.vue

@@ -3,6 +3,8 @@
 import { reactive, watch, PropType } from 'vue';
 import { useUserInfo } from '/@/stores/userInfo';
 
+const renderTypeArray = ['tag', 'select', 'radio', 'checkbox', 'radio-button'] as const;
+type RenderType = typeof renderTypeArray[number];
 type DictItem = {
 	[key: string]: any;
 	tagType?: string;
@@ -77,14 +79,14 @@ const props = defineProps({
 	},
 	/**
 	 * 组件渲染方式
-	 * @values 'tag', 'select', 'radio', 'checkbox'
+	 * @values 'tag', 'select', 'radio', 'checkbox', 'radio-button'
 	 * @default 'tag'
 	 */
 	renderAs: {
-		type: String as PropType<'tag' | 'select' | 'radio' | 'checkbox'>,
+		type: String as PropType<RenderType>,
-		default: 'tag',
+		default: renderTypeArray[0],
-		validator(value: string) {
+		validator(value: any) {
-			return ['tag', 'select', 'radio', 'checkbox'].includes(value);
+			return renderTypeArray.includes(value);
 		},
 	},
 	/**
@@ -146,7 +148,7 @@ const trySetMultipleValue = (value: any) => {
 				console.warn('[g-sys-dict]解析多选值失败, 异常信息:', error);
 			}
 		}
-	} else if (props.multiple && !value) {
+	} else if ((props.renderAs === 'checkbox' || props.multiple) && !value) {
 		newValue = [];
 	}
 	if (newValue != value) updateValue(newValue);
@@ -191,6 +193,18 @@ watch(
 	(newValue) => setDictValue(newValue),
 	{ immediate: true }
 );
+
+watch(
+    () => userStore.dictList,
+    () => setDictValue(state.value),
+    { immediate: true }
+);
+
+watch(
+    () => userStore.constList,
+    () => setDictValue(state.value),
+    { immediate: true }
+);
 </script>
 
 <template>
@@ -233,5 +247,14 @@ watch(
 			</el-radio>
 		</el-radio-group>
 	</template>
+
+  <!-- 渲染单选框按钮 -->
+  <template v-if="props.renderAs === 'radio-button'">
+    <el-radio-group v-model="state.value" v-bind="$attrs" @change="updateValue">
+      <el-radio-button v-for="(item, index) in state.dictData" :key="index" :value="item[propValue]">
+        {{ getDisplayText(item) }}
+      </el-radio-button>
+    </el-radio-group>
+  </template>
 </template>
 <style scoped lang="scss"></style>