feat: 完成图像源节点表单的静态交互
parent
1e35f89481
commit
21f381bd35
@ -0,0 +1,122 @@
|
|||||||
|
/*
|
||||||
|
* @Author: donghao donghao@supervision.ltd
|
||||||
|
* @Date: 2025-07-29 10:48:37
|
||||||
|
* @LastEditors: donghao donghao@supervision.ltd
|
||||||
|
* @LastEditTime: 2025-07-30 14:32:45
|
||||||
|
* @FilePath: \Robot-Al-Platform-Web\src\renderer\src\components\Form\switch.tsx
|
||||||
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
*/
|
||||||
|
import { defineComponent, h, withDefaults, computed, normalizeClass } from 'vue'
|
||||||
|
import { ElSwitch } from 'element-plus'
|
||||||
|
import type { SwitchProps } from 'element-plus'
|
||||||
|
import { spawn } from 'child_process'
|
||||||
|
|
||||||
|
interface DsSwitchProps extends SwitchProps {
|
||||||
|
/**
|
||||||
|
* switch 前面的文案
|
||||||
|
*/
|
||||||
|
label?: string
|
||||||
|
|
||||||
|
/**
|
||||||
|
* switch 前面的文案
|
||||||
|
*/
|
||||||
|
prefixRender?: (...ags: any[]) => any // 前缀内容 render渲染
|
||||||
|
/**
|
||||||
|
* switch 后面的文案
|
||||||
|
*/
|
||||||
|
suffixRender?: (...ags: any[]) => any // 后缀内容 render渲染
|
||||||
|
|
||||||
|
/**
|
||||||
|
* container容器样式
|
||||||
|
*/
|
||||||
|
containerClassName?: string
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 整体容器样式
|
||||||
|
*/
|
||||||
|
componentClassName?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'DsSwitch',
|
||||||
|
props: {
|
||||||
|
modelValue: {
|
||||||
|
type: [Boolean, String, Number],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
suffixRender: {
|
||||||
|
type: Function as DsSwitchProps['suffixRender'],
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
containerClassName: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
componentClassName: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
...ElSwitch.props // 继承 ElSwitch 的所有 props
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'change'],
|
||||||
|
setup(props, { emit, attrs }) {
|
||||||
|
const { containerClassName, componentClassName, ...restProps } = props
|
||||||
|
// 处理自定义类名和 Vue 的 class 属性
|
||||||
|
const componentClasses = computed(() => {
|
||||||
|
const classes = ['flex items-center ds-switch-box', componentClassName]
|
||||||
|
// 处理 Vue 的 class 属性（支持字符串/数组/对象）
|
||||||
|
if (attrs.class) {
|
||||||
|
classes.push(normalizeClass(attrs.class))
|
||||||
|
}
|
||||||
|
return classes.filter((c) => c).join(' ')
|
||||||
|
})
|
||||||
|
// 处理自定义类名和 Vue 的 class 属性
|
||||||
|
const containerClasses = computed(() => {
|
||||||
|
const classes = ['flex items-center justify-between w-[136px]', containerClassName]
|
||||||
|
// 处理 Vue 的 class 属性（支持字符串/数组/对象）
|
||||||
|
if (attrs.class) {
|
||||||
|
classes.push(normalizeClass(attrs.class))
|
||||||
|
}
|
||||||
|
return classes.filter((c) => c).join(' ')
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleChange = (val: boolean | string | number) => {
|
||||||
|
emit('update:modelValue', val)
|
||||||
|
emit('change', val)
|
||||||
|
}
|
||||||
|
// 渲染自定义前缀内容
|
||||||
|
const renderPrefix = () => {
|
||||||
|
if (props.prefixRender) {
|
||||||
|
return props?.prefixRender?.()
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<span class="ds-switch-label">
|
||||||
|
{props?.label}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
// 渲染自定义后缀内容
|
||||||
|
const renderSuffix = () => {
|
||||||
|
if (props.suffixRender) {
|
||||||
|
return props?.suffixRender?.()
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => (
|
||||||
|
<div className={componentClasses.value}>
|
||||||
|
<div className={containerClasses.value}>
|
||||||
|
{/* 添加前缀插槽 */}
|
||||||
|
{renderPrefix()}
|
||||||
|
<ElSwitch {...restProps} modelValue={props.modelValue} onChange={handleChange} />
|
||||||
|
</div>
|
||||||
|
{/* 添加后缀插槽 */}
|
||||||
|
{renderSuffix()}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
})
|
||||||
@ -1,107 +0,0 @@
|
|||||||
/*
|
|
||||||
* @Author: donghao donghao@supervision.ltd
|
|
||||||
* @Date: 2025-07-29 10:49:30
|
|
||||||
* @LastEditors: donghao donghao@supervision.ltd
|
|
||||||
* @LastEditTime: 2025-07-29 10:50:25
|
|
||||||
* @FilePath: \Robot-Al-Platform-Web\src\renderer\src\components\Form\inputNumber copy.tsx
|
|
||||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
||||||
*/
|
|
||||||
import { defineComponent, ref, watch, computed } from 'vue'
|
|
||||||
import { ElInputNumber, ElButton } from 'element-plus'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'DSInputNumber',
|
|
||||||
|
|
||||||
props: {
|
|
||||||
modelValue: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
min: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
max: {
|
|
||||||
type: Number,
|
|
||||||
default: 100000
|
|
||||||
},
|
|
||||||
placeholder: {
|
|
||||||
type: String,
|
|
||||||
default: '请输入'
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
controls: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
randomValue: {
|
|
||||||
type: Number,
|
|
||||||
default: 10
|
|
||||||
},
|
|
||||||
controlsPosition: {
|
|
||||||
type: String,
|
|
||||||
default: 'top'
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
type: String || Object,
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
emits: ['update:modelValue', 'change'],
|
|
||||||
|
|
||||||
setup(props, { slots, emit }) {
|
|
||||||
const innerValue = ref(props?.modelValue || props?.min || 0)
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.modelValue,
|
|
||||||
(newVal) => {
|
|
||||||
innerValue.value = newVal
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
const handleChange = (value: number) => {
|
|
||||||
console.log('handleChange_ds_inputNumber', value)
|
|
||||||
emit('update:modelValue', value)
|
|
||||||
emit('change', value)
|
|
||||||
}
|
|
||||||
|
|
||||||
// const setRandomValue = () => {
|
|
||||||
// const randomVal = props.randomValue
|
|
||||||
// innerValue.value = randomVal
|
|
||||||
// emit('update:modelValue', randomVal)
|
|
||||||
// emit('change', randomVal)
|
|
||||||
// }
|
|
||||||
|
|
||||||
const containerClass = computed(() => [
|
|
||||||
'input-number-container',
|
|
||||||
props.disabled ? 'disabled-state' : ''
|
|
||||||
])
|
|
||||||
|
|
||||||
return () => (
|
|
||||||
<div class={props.containerClass}>
|
|
||||||
<div class="input-group flex items-center">
|
|
||||||
<ElInputNumber
|
|
||||||
modelValue={innerValue.value}
|
|
||||||
onUpdate:modelValue={(val) => (innerValue.value = val)}
|
|
||||||
min={props.min}
|
|
||||||
max={props.max}
|
|
||||||
controls-position={props.controlsPosition}
|
|
||||||
placeholder={props.placeholder}
|
|
||||||
disabled={props.disabled}
|
|
||||||
controls={props.controls}
|
|
||||||
onChange={handleChange}
|
|
||||||
/>
|
|
||||||
<ElButton type="primary" icon={props.icon} circle disabled={props.disabled} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
Loading…
Reference in New Issue