From 55bf797dcc730b37bc691ebab2b51ff9db8ed245 Mon Sep 17 00:00:00 2001
From: zs <zhousong@weben-smart.com>
Date: 周二, 06 5月 2025 17:37:23 +0800
Subject: [PATCH] 修改代码样式
---
HIAWms/web/src/components/Radio/Radio.tsx | 217 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 217 insertions(+), 0 deletions(-)
diff --git a/HIAWms/web/src/components/Radio/Radio.tsx b/HIAWms/web/src/components/Radio/Radio.tsx
new file mode 100644
index 0000000..16c0164
--- /dev/null
+++ b/HIAWms/web/src/components/Radio/Radio.tsx
@@ -0,0 +1,217 @@
+import { defineComponent, computed, SetupContext } from 'vue'
+import styles from './Radio.module.scss'
+import Empty from '../Empty/Empty'
+import Icon from '../Icon/Icon'
+interface OptionType {
+ label: string
+ value: string
+ name: string
+}
+
+interface DataType {
+ name?: string
+ label?: string
+ value?: string
+ description?: string
+ type?: string
+}
+
+interface TagProps {
+ data: DataType[]
+ options: OptionType[]
+ modelValue: string
+ [key: string]: any
+}
+
+export default defineComponent<TagProps>({
+ // @ts-ignore
+ name: 'Tag',
+ emits: ['click', 'update:modelValue', 'change', 'update:data'],
+ props: {
+ data: {
+ type: [Array, Object],
+ default: null,
+ },
+ options: {
+ type: Array,
+ default: null,
+ },
+ modelValue: {
+ type: [String, Number],
+ default: '',
+ },
+ trigger: {
+ type: String,
+ default: 'hover',
+ },
+ showClose: {
+ type: Boolean,
+ default: false,
+ },
+ labelWidth: {
+ type: String,
+ default: '100px',
+ },
+ },
+ setup(props: TagProps, { attrs, slots, emit }: SetupContext) {
+ const modelData = computed({
+ get() {
+ return props.modelValue
+ },
+ set(value) {
+ emit('update:modelValue', value)
+ },
+ })
+ console.log('modelData', modelData.value)
+ const data = computed({
+ get() {
+ return props.data
+ },
+ set(value) {
+ emit('update:data', value)
+ },
+ })
+ /**
+ * 鏍规嵁value鏌ユ壘label
+ * @param value
+ * @returns
+ */
+ const findOptionLabelByValue = (value: string) => {
+ const item: any = props.options.find((item) => item.value === value)
+ console.log('item', item)
+ return item?.label || item?.name || ''
+ }
+ /**
+ * 閫夋嫨
+ * @param v
+ */
+ const onCommand = (v: any) => {
+ modelData.value = findOptionLabelByValue(v) || v
+ emit('change', v)
+ }
+ /**
+ * 褰搗-model:data鏃讹紝鐢熸晥
+ */
+ const onClose = (item: DataType, evt: Event) => {
+ evt?.stopPropagation()
+ data.value = data.value.filter((i) => i !== item)
+ }
+
+ /**
+ * click
+ * @param evt Event
+ */
+ const onClick = (evt: Event) => {
+ evt?.stopPropagation()
+ emit('click', evt)
+ }
+
+ console.log(props.data, props.modelValue)
+
+ return () => {
+ // 澶歵ag鎯呭喌锛屼紶data[]
+ if (Array.isArray(props.data)) {
+ return props.data.map((item: DataType, index: any) => {
+ return (
+ <div
+ class={styles.tag}
+ style="margin-right: 5px;cursor: initial;"
+ key={index}
+ onClick={onClick}
+ >
+ {item.name || item.label || item.description || item.type}
+ {props.showClose ? (
+ <Icon
+ class={styles.tagClose}
+ icon="tag_close"
+ width={8}
+ height={8}
+ onClick={(evt) => onClose(item, evt)}
+ />
+ ) : null}
+ </div>
+ )
+ })
+ }
+ // 涓嬫媺閫夋嫨hover
+ if (Array.isArray(props.options)) {
+ return (
+ <el-tooltip
+ effect="dark"
+ content={
+ modelData.value
+ ? findOptionLabelByValue(modelData.value)
+ : '璇烽�夋嫨'
+ }
+ placement="top"
+ >
+ <el-dropdown
+ trigger={props.trigger}
+ popperClass={styles.dropdown}
+ onCommand={onCommand}
+ placement="bottom-start"
+ max-height={500}
+ vSlots={{
+ dropdown: () =>
+ props.options.length ? (
+ <el-dropdown-menu>
+ {props.options.map((item: OptionType) => {
+ return (
+ <el-dropdown-item command={item.value}>
+ <div class={styles.lineTag}>
+ <div class={styles.fitTag}>
+ {' '}
+ {item.label || item.name}
+ </div>
+ </div>
+ </el-dropdown-item>
+ )
+ })}
+ </el-dropdown-menu>
+ ) : (
+ <Empty />
+ ),
+ }}
+ >
+ {modelData.value ? (
+ <div
+ class={styles.tag}
+ style={{ width: props.labelWidth }}
+ onClick={() => emit('click')}
+ >
+ {findOptionLabelByValue(modelData.value)}
+ </div>
+ ) : (
+ <div
+ class={[styles.tag, styles.pl]}
+ style={{ width: props.labelWidth }}
+ >
+ 璇烽�夋嫨
+ </div>
+ )}
+ </el-dropdown>
+ </el-tooltip>
+ )
+ }
+ // 榛樿鍙睍绀轰竴涓猼ag
+ return (
+ <div
+ class={styles.tag}
+ style={{ width: props.labelWidth }}
+ onClick={() => emit('click')}
+ >
+ {slots.default && slots.default()}
+ {/* {props.showClose ? (
+ <Icon
+ class={styles.tagClose}
+ icon="tag_close"
+ width={8}
+ height={8}
+ onClick={(evt) => onClose(item, evt)}
+ />
+ ) : null} */}
+ </div>
+ )
+ }
+ },
+})
--
Gitblit v1.9.3