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