refactor: 重构 materials/setters/widgets 目录下部分组件, 使用 Vue3 组合式 API 写法 (#146)

This commit is contained in:
alwayrun 2024-05-21 19:28:42 +08:00 committed by sudoooooo
parent e9b85f7878
commit 6c9044b457
20 changed files with 798 additions and 941 deletions

View File

@ -1,92 +1,78 @@
<template> <template>
<el-checkbox <el-checkbox
v-model="validValue" v-model="modelValue"
@change="changeData" @change="handleCheckboxChange"
:disabled="checkBoxDis" :disabled="checkBoxDis"
:class="{ inline: !!formConfig?.inline }" :class="{ inline: !!formConfig?.inline }"
> >
</el-checkbox> </el-checkbox>
</template> </template>
<script> <script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant' import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
export default {
name: 'CheckBox',
data() {
return {
validValue: this.formConfig.value
}
},
props: {
formConfig: {
type: Object,
required: true
},
moduleConfig: {
type: Object,
required: true
}
},
computed: {
checkBoxDis() {
return (
this.formConfig.key === 'randomSort' &&
this.moduleConfig?.optionOrigin?.length > 0 &&
this.moduleConfig?.extraOptions &&
this.moduleConfig?.extraOptions.length === 0
)
},
optionOrigin() {
return this.moduleConfig.optionOrigin
},
extraOptionsLength() {
return this.moduleConfig?.extraOptions?.length || []
}
},
watch: {
optionOrigin(newVal) {
if (
this.formConfig.key === 'randomSort' &&
newVal &&
this.moduleConfig?.extraOptions.length === 0
) {
this.$emit(FORM_CHANGE_EVENT_KEY, {
key: 'randomSort',
value: false
})
this.validValue = false
}
},
extraOptionsLength(newVal) {
if (this.formConfig.key === 'randomSort' && this.moduleConfig?.optionOrigin && newVal === 0) {
this.$emit(FORM_CHANGE_EVENT_KEY, {
key: 'randomSort',
value: false
})
this.validValue = false
}
},
'formConfig.value': {
immediate: true,
handler(newVal) {
if (newVal === this.validValue) {
return
}
this.validValue = !!newVal
}
}
},
methods: { interface Props {
changeData(value) { formConfig: any
const key = this.formConfig.key moduleConfig: any
this.$emit(FORM_CHANGE_EVENT_KEY, {
key,
value
})
}
}
} }
interface Emit {
(ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: boolean }): void
}
const emit = defineEmits<Emit>()
const props = defineProps<Props>()
const modelValue = ref(props.formConfig.value)
const checkBoxDis = computed(
() =>
props.formConfig.key === 'randomSort' &&
props.moduleConfig?.optionOrigin?.length > 0 &&
props.moduleConfig?.extraOptions &&
props.moduleConfig?.extraOptions?.length === 0
)
const handleCheckboxChange = (value: boolean) => {
const key = props.formConfig.key
emit(FORM_CHANGE_EVENT_KEY, { key, value })
}
const watchOptionOrigin = computed(() => props.moduleConfig.optionOrigin)
const watchExtraOptions = computed(() => props.moduleConfig?.extraOptions?.length || [])
const watchValue = computed(() => props.formConfig.value)
watch(watchOptionOrigin, (newVal) => {
const key = props.formConfig.key
const extraLen = props.moduleConfig?.extraOptions.length
if (key === 'randomSort' && newVal && extraLen === 0) {
emit(FORM_CHANGE_EVENT_KEY, { key: 'randomSort', value: false })
modelValue.value = false
}
})
watch(watchExtraOptions, (newVal) => {
const key = props.formConfig.key
const origin = props.moduleConfig?.optionOrigin
if (key === 'randomSort' && origin && newVal === 0) {
emit(FORM_CHANGE_EVENT_KEY, { key: 'randomSort', value: false })
modelValue.value = false
}
})
watch(
watchValue,
(newVal: boolean) => {
if (newVal !== modelValue.value) {
modelValue.value == !!newVal
}
},
{
immediate: true
}
)
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.inline { .inline {

View File

@ -1,10 +1,10 @@
<template> <template>
<div class="checkbox-group"> <div class="checkbox-group">
<div class="customed-checkbox" v-for="item in this.formConfig.options" :key="item.key"> <div class="customed-checkbox" v-for="item in formConfig.options" :key="item.key">
<el-checkbox <el-checkbox
v-model="values[item.key]" v-model="optionsValue[item.key]"
:label="item.label" :label="item.label"
@change="onChange(item.key, $event)" @change="handleCheckboxChange(item.key, $event)"
> >
</el-checkbox> </el-checkbox>
<el-tooltip v-if="item.tip" class="tooltip" effect="dark" placement="right"> <el-tooltip v-if="item.tip" class="tooltip" effect="dark" placement="right">
@ -16,44 +16,43 @@
</div> </div>
</div> </div>
</template> </template>
<script> <script setup lang="ts">
import { watch, reactive } from 'vue'
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant' import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
export default {
name: 'CheckboxGroup', interface Props {
props: { formConfig: any
formConfig: {
type: Object,
default: () => ({})
}
},
data() {
return {
values: this.formConfig.value
}
},
watch: {
'formConfig.value': {
immediate: true,
deep: true,
handler(newVal) {
const keys = Object.keys(newVal)
for (const key of keys) {
if (newVal[key] !== this.values[key]) {
this.values[key] = newVal[key]
}
}
}
}
},
methods: {
onChange(key, value) {
this.$emit(FORM_CHANGE_EVENT_KEY, {
key,
value
})
}
}
} }
interface Emit {
(ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: boolean }): void
}
const props = withDefaults(defineProps<Props>(), {
formConfig: {}
})
const emit = defineEmits<Emit>()
const handleCheckboxChange = (key: string, value: boolean) => {
emit(FORM_CHANGE_EVENT_KEY, { key, value })
}
const optionsValue = reactive<any>(props.formConfig?.value)
watch(
props.formConfig.value,
(val) => {
const keys = Object.keys(val)
for (const key of keys) {
if (val[key] !== optionsValue[key]) {
optionsValue[key] = val[key]
}
}
},
{ immediate: true, deep: true }
)
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.customed-checkbox { .customed-checkbox {

View File

@ -1,33 +1,34 @@
<template> <template>
<el-form-item> <el-form-item>
<el-input <el-input
v-model="modelValue"
:placeholder="formConfig.placeholder" :placeholder="formConfig.placeholder"
:value="formConfig.value" :maxlength="formConfig.maxlength"
:maxLength="formConfig.maxlength" @change="handleInputChange"
@change="changeData"
> >
<template #prepend>#</template> <template #prepend>#</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
</template> </template>
<script> <script setup lang="ts">
import { ref } from 'vue'
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant' import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
export default {
name: 'ColorInput', interface Props {
props: { formConfig: any
formConfig: { }
type: Object,
required: true interface Emit {
} (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
}, }
methods: {
changeData(value) { const props = defineProps<Props>()
const key = this.formConfig.key const emit = defineEmits<Emit>()
this.$emit(FORM_CHANGE_EVENT_KEY, { const modelValue = ref(props.formConfig.value)
key,
value const handleInputChange = (value: string) => {
}) const key = props.formConfig.key
}
} emit(FORM_CHANGE_EVENT_KEY, { key, value })
} }
</script> </script>

View File

@ -1,27 +1,28 @@
<template> <template>
<el-form-item class="pick-wrap"> <el-form-item class="pick-wrap">
<el-color-picker :modelValue="formConfig.value" @change="changeData"></el-color-picker> <el-color-picker
:modelValue="formConfig.value"
@change="handleColorPickerChange"
></el-color-picker>
</el-form-item> </el-form-item>
</template> </template>
<script> <script setup lang="ts">
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant' import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
export default {
name: 'ColorPicker', interface Props {
props: { formConfig: any
formConfig: { }
type: Object,
required: true interface Emit {
} (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
}, }
methods: {
changeData(value) { const props = defineProps<Props>()
const key = this.formConfig.key const emit = defineEmits<Emit>()
this.$emit(FORM_CHANGE_EVENT_KEY, {
key, const handleColorPickerChange = (value: string) => {
value const key = props.formConfig.key
}) emit(FORM_CHANGE_EVENT_KEY, { key, value })
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -17,20 +17,12 @@
<slot></slot> <slot></slot>
</el-form-item> </el-form-item>
</template> </template>
<script> <script setup lang="ts">
export default { interface Props {
name: 'FormItem', formConfig: any
components: {},
props: {
formConfig: {
type: Object,
required: true
}
},
data() {
return {}
}
} }
defineProps<Props>()
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.item-label { .item-label {

View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<el-row class="row"> <el-row class="row">
<el-select :modelValue="backfillSelect" @change="onSelectChange"> <el-select :modelValue="selectModelValue" @change="handleSelectChange">
<el-option <el-option
v-for="item in options" v-for="item in options"
:label="`${item.label}`" :label="`${item.label}`"
@ -13,83 +13,68 @@
<el-row v-show="showFormdataBackfillHour"> <el-row v-show="showFormdataBackfillHour">
<el-switch <el-switch
:inactive-text="formConfig.labels['baseConf.formdataBackfillHour']" :inactive-text="formConfig.labels['baseConf.formdataBackfillHour']"
:value="hourSwitch" :value="switchModelValue"
@change="onSwitchChange" @change="handleSwitchChange"
></el-switch> ></el-switch>
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { cleanRichText } from '@/common/xss' import { cleanRichText } from '@/common/xss'
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant' import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
const formdataBackfillKey = 'baseConf.formdataBackfill' const formdataBackfillKey = 'baseConf.formdataBackfill'
const formdataBackfillHourKey = 'baseConf.formdataBackfillHour' const formdataBackfillHourKey = 'baseConf.formdataBackfillHour'
export default { interface Props {
name: 'FormDataBackFill', formConfig: any
data() { }
return {
backfillSelect: this.formConfig.value[formdataBackfillKey], interface Emit {
hourSwitch: !!this.formConfig.value[formdataBackfillHourKey] (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
}
const emit = defineEmits<Emit>()
const props = defineProps<Props>()
const selectModelValue = ref(props.formConfig.value[formdataBackfillKey])
const switchModelValue = ref(props.formConfig.value[formdataBackfillHourKey])
const showFormdataBackfillHour = computed(() =>
selectModelValue.value !== 'notallow' ? true : false
)
const options = computed(() => {
if (!Array.isArray(props.formConfig?.options)) {
return []
} }
},
props: { return props.formConfig?.options.map((item: any) => {
formConfig: {
type: Object,
required: true
}
},
watch: {
'formConfig.value': {
deep: true,
handler(newVal) {
const formdataBackfill = newVal[formdataBackfillKey]
const formdataBackfillHour = !!newVal[formdataBackfillHourKey]
if (formdataBackfill !== this.backfillSelect) {
this.backfillSelect = formdataBackfill
}
if (formdataBackfillHour !== this.hourSwitch) {
this.hourSwitch = formdataBackfillHour
}
}
}
},
computed: {
showFormdataBackfillHour() {
if (this.backfillSelect === 'notallow') {
return false
}
return true
},
options() {
let options = []
if (Array.isArray(this.formConfig?.options)) {
options = this.formConfig?.options
}
return options.map((item) => {
item.label = cleanRichText(item.label) item.label = cleanRichText(item.label)
return item return item
}) })
} })
},
methods: { const handleSelectChange = (value: string) => {
onSelectChange(newVal) { emit(FORM_CHANGE_EVENT_KEY, { key: formdataBackfillKey, value })
this.changeData({ key: formdataBackfillKey, value: newVal })
},
onSwitchChange(newVal) {
this.changeData({
key: formdataBackfillHourKey,
value: newVal ? 24 : null
})
},
changeData({ key, value }) {
this.$emit(FORM_CHANGE_EVENT_KEY, {
key,
value
})
}
}
} }
const handleSwitchChange = (value: string) => {
emit(FORM_CHANGE_EVENT_KEY, { key: formdataBackfillHourKey, value: value ? 24 : null })
}
const watchValue = computed(() => props.formConfig.value)
watch(watchValue, (config) => {
const formdataBackfill = config[formdataBackfillKey]
const formdataBackfillHour = !!config[formdataBackfillHourKey]
if (formdataBackfill !== selectModelValue.value) {
selectModelValue.value = formdataBackfill
}
if (formdataBackfillHour !== switchModelValue.value) {
switchModelValue.value = formdataBackfillHour
}
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.row { .row {

View File

@ -4,7 +4,7 @@
class="option-select" class="option-select"
placeholder="请选择" placeholder="请选择"
:value="formConfig.value[formConfig.selectKey]" :value="formConfig.value[formConfig.selectKey]"
@change="onChange($event, formConfig.selectKey)" @change="handleInputChange($event, formConfig.selectKey)"
> >
<el-option <el-option
v-for="item in formConfig.options" v-for="item in formConfig.options"
@ -16,42 +16,35 @@
<template v-if="isShowNumberFn"> <template v-if="isShowNumberFn">
<span class="option-txt">提交</span> <span class="option-txt">提交</span>
<el-input-number <el-input-number
v-model="numberValue" v-model="modelValue"
@change="onChange($event, formConfig.numberKey)" @change="handleInputChange($event, formConfig.numberKey)"
></el-input-number> ></el-input-number>
<span class="option-txt"></span> <span class="option-txt"></span>
</template> </template>
</el-form-item> </el-form-item>
</template> </template>
<script> <script setup lang="ts">
import { ref, computed } from 'vue'
import { get as _get } from 'lodash-es' import { get as _get } from 'lodash-es'
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant' import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
export default {
name: 'FreqAndNumberLimit', interface Props {
props: { formConfig: any
formConfig: { }
type: Object,
required: true interface Emit {
} (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
}, }
computed: {
isShowNumberFn() { const emit = defineEmits<Emit>()
return !!this.formConfig.value[this.formConfig.selectKey] const props = defineProps<Props>()
}
}, const modelValue = ref(Number(_get(props.formConfig.value, props.formConfig.numberKey, 0)))
data() { const isShowNumberFn = computed(() => !!props.formConfig.value[props.formConfig.selectKey])
return {
numberValue: Number(_get(this.formConfig.value, this.formConfig.numberKey, 0)) const handleInputChange = (value: string, key: string) => {
} emit(FORM_CHANGE_EVENT_KEY, { key, value })
},
methods: {
onChange(e, key) {
this.$emit(FORM_CHANGE_EVENT_KEY, {
key,
value: e
})
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -1,100 +1,81 @@
<template> <template>
<el-input-number <el-input-number
:placeholder="formConfig.placeholder" :placeholder="formConfig.placeholder"
:modelValue="numberValue" :modelValue="modelValue"
@change="changeData" @change="handleInputChange"
:min="min" :min="minModelValue"
:max="max" :max="maxModelValue"
/> />
</template> </template>
<script> <script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/src/message.scss' import 'element-plus/theme-chalk/src/message.scss'
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant' import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
export default { interface Props {
name: 'InputNumber', formConfig: any
props: { moduleConfig: any
formConfig: { }
type: Object,
required: true interface Emit {
}, (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: number }): void
moduleConfig: { }
type: Object,
required: true const emit = defineEmits<Emit>()
} const props = defineProps<Props>()
}, const setterTypes = ['checkbox', 'vote']
data() { const modelValue = ref(props.formConfig.value || 0)
return { const minModelValue = computed(() => {
numberValue: 0 const { min } = props.formConfig
} const { type } = props.moduleConfig
},
watch: {
'formConfig.value': {
immediate: true,
handler(newVal) {
const val = parseInt(newVal || '0')
if (val === this.numberValue) {
return
}
this.numberValue = val
}
}
},
computed: {
min() {
const { min } = this.formConfig
const { type } = this.moduleConfig
if (min !== undefined) { if (min !== undefined) {
if (typeof min === 'string') { if (typeof min === 'string') {
return this.judgeType(type) return setterTypes.includes(type)
? Number(this.moduleConfig[min]) ? Number(props.moduleConfig[min])
: Number(Number(this.moduleConfig[min]) + 1) : Number(Number(props.moduleConfig[min]) + 1)
} else if (typeof this.formConfig.min === 'function') { } else if (typeof props.formConfig.min === 'function') {
return min(this.moduleConfig) return min(props.moduleConfig)
} else { } else {
return Number(min) return Number(min)
} }
} }
return -Infinity return -Infinity
}, })
max() {
const { type } = this.moduleConfig const maxModelValue = computed(() => {
const { max, min } = this.formConfig const { type } = props.moduleConfig
const { max, min } = props.formConfig
if (max) { if (max) {
if (typeof max === 'string') { if (typeof max === 'string') {
return this.judgeType(type) ? Number(this.moduleConfig[max]) : this.moduleConfig[max] - 1 return setterTypes.includes(type)
? Number(props.moduleConfig[max])
: props.moduleConfig[max] - 1
} else if (typeof max === 'function') { } else if (typeof max === 'function') {
return max(this.moduleConfig) return max(props.moduleConfig)
} }
return Number(max) return Number(max)
} else if (min !== undefined && Array.isArray(this.moduleConfig?.options)) { } else if (min !== undefined && Array.isArray(props.moduleConfig?.options)) {
// inputNumber checkbox, vote, matrix-checkbox, return props.moduleConfig.options.length
return this.moduleConfig.options.length
} else { } else {
return Infinity return Infinity
} }
} })
},
methods: { const handleInputChange = (value: number) => {
judgeType(type) { const key = props.formConfig.key
return ['checkbox', 'vote'].includes(type)
},
changeData(value) {
const reg = /^(-)?[0-9]+$/ const reg = /^(-)?[0-9]+$/
if (!reg.test(value)) {
if (!reg.test(String(value))) {
ElMessage.warning('只能输入整数') ElMessage.warning('只能输入整数')
} }
this.numberValue = value
const key = this.formConfig.key modelValue.value = value
this.$emit(FORM_CHANGE_EVENT_KEY, {
key, emit(FORM_CHANGE_EVENT_KEY, { key, value })
value
})
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -2,70 +2,44 @@
<el-input <el-input
class="custom-input" class="custom-input"
:placeholder="formConfig.placeholder" :placeholder="formConfig.placeholder"
v-model="value" v-model="modelValue"
@input="changeData" @change="handleInputChange"
:min="min" :min="minModelValue"
:max="max" :max="maxModelValue"
type="number" type="number"
> >
<template #append>%</template> <template #append>%</template>
</el-input> </el-input>
</template> </template>
<script> <script setup lang="ts">
import { ref, computed } from 'vue'
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant' import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
export default {
name: 'InputPercent', interface Props {
props: { formConfig: any
formConfig: { }
type: Object,
required: true interface Emit {
} (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
}, }
data() {
return { const emit = defineEmits<Emit>()
value: '' const props = defineProps<Props>()
}
}, const modelValue = ref(parseFloat(props.formConfig.value))
watch: { const maxModelValue = computed(() => parseFloat(props.formConfig.max) || 100)
'formConfig.value': { const minModelValue = computed(() => parseFloat(props.formConfig.min) || 0)
immediate: true,
handler(newVal) { const handleInputChange = (val: string) => {
let val = parseFloat(newVal) const key = props.formConfig.key
if (val === this.value) { const value = Math.min(Math.max(parseFloat(val), minModelValue.value), maxModelValue.value)
return let percent = ''
}
this.value = val if (Number.isInteger(value)) {
} percent = `${value}%`
}
},
computed: {
max() {
let max = parseFloat(this.formConfig.max)
if (isNaN(max)) {
max = 100
}
return max
},
min() {
let min = parseFloat(this.formConfig.min)
if (isNaN(min)) {
min = 0
}
return min
}
},
methods: {
changeData() {
const key = this.formConfig.key
let value = parseFloat(this.value)
value = Math.max(value, this.min)
value = Math.min(value, this.max)
this.$emit(FORM_CHANGE_EVENT_KEY, {
key,
value: `${value}%`
})
}
} }
emit(FORM_CHANGE_EVENT_KEY, { key, value: percent })
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -1,54 +1,48 @@
<template> <template>
<el-input :placeholder="formConfig.placeholder" v-model="inputData" @blur="changeData"></el-input> <el-input
:placeholder="formConfig.placeholder"
v-model="modelValue"
@blur="handleInputBlur"
></el-input>
</template> </template>
<script> <script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant' import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
export default { interface Props {
name: 'InputSetter', formConfig: any
props: { }
formConfig: {
type: Object, interface Emit {
required: true (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
} }
},
data() { const emit = defineEmits<Emit>()
return { const props = defineProps<Props>()
inputData: this.formConfig.value || ''
} const modelValue = ref(props.formConfig.value || '')
}, const lazyValue = computed(() => props.formConfig.value)
watch: {
'formConfig.value': { const handleInputBlur = () => {
handler(newVal) { const { key, validate, value } = props.formConfig
if (newVal === this.inputData) { const preValue = value || ''
if (validate && typeof validate == 'function') {
const validateResult: boolean = validate(modelValue.value)
if (!validateResult) {
return return
} }
this.inputData = newVal
}
}
},
methods: {
saveData(val) {
this.inputData = val
},
changeData: function () {
let key = this.formConfig.key
if (this.formConfig.validate) {
const validateResult = this.formConfig.validate(this.inputData)
if (!validateResult) {
return false
}
}
const preValue = this.formConfig.value || ''
if (this.inputData === preValue) {
return false
}
this.$emit(FORM_CHANGE_EVENT_KEY, {
key,
value: this.inputData
})
} }
if (preValue !== modelValue.value) {
emit(FORM_CHANGE_EVENT_KEY, { key, value: modelValue.value })
} }
} }
watch(lazyValue, (value) => {
if (value !== modelValue.value) {
modelValue.value = value
}
})
</script> </script>
<style lang="scss" scoped></style>

View File

@ -9,44 +9,31 @@
</label> </label>
<el-input <el-input
:value="formConfig.value[item.key]" :value="formConfig.value[item.key]"
@change="(val) => changeData(item.key, val)" @onchge="handleInputChange(item.key, $event)"
@input="(val) => changeData(item.key, val)"
:placeholder="item.placeholder" :placeholder="item.placeholder"
/> />
</el-form-item> </el-form-item>
</div> </div>
</template> </template>
<script> <script setup lang="ts">
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant' import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
export default {
name: 'MultiInput', interface Props {
props: { formConfig: any
formConfig: { moduleConfig: any
type: Object, }
required: true
}, interface Emit {
moduleConfig: { (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
type: Object, }
required: true
} const props = defineProps<Props>()
}, const emit = defineEmits<Emit>()
methods: {
changeData(key, value) { const handleInputChange = (itemKey: string, value: string) => {
if (this.formConfig.key) { const key = props.formConfig.key
this.$emit(FORM_CHANGE_EVENT_KEY, {
key: this.formConfig.key + '.' + key, emit(FORM_CHANGE_EVENT_KEY, { key: `${key}.${itemKey}`, value })
value
})
} else if (this.formConfig.keys) {
this.$emit(FORM_CHANGE_EVENT_KEY, {
key,
value
})
} else {
// todo
}
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -1,8 +1,8 @@
<template> <template>
<el-select <el-select
:placeholder="formConfig.placeholder || formConfig.label" :placeholder="placeholder"
:value="formConfig.value" :value="modelValue"
@input="changeData" @change="handleSelectChange"
multiple multiple
popper-class="option-list-width" popper-class="option-list-width"
:disabled="formConfig.disabled" :disabled="formConfig.disabled"
@ -17,42 +17,39 @@
</el-select> </el-select>
</template> </template>
<script> <script setup lang="ts">
import { computed, ref } from 'vue'
import { cleanRichText } from '@/common/xss' import { cleanRichText } from '@/common/xss'
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant' import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
export default { interface Props {
name: 'SelectSetter', formConfig: any
props: { }
formConfig: {
type: Object, interface Emit {
required: true (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: Array<string> }): void
}
const emit = defineEmits<Emit>()
const props = defineProps<Props>()
const modelValue = ref([])
const placeholder = computed(() => props.formConfig.placeholder || props.formConfig.label)
const options = computed(() => {
if (!Array.isArray(props.formConfig?.options)) {
return []
} }
},
data() { return props.formConfig?.options.map((item: any) => {
return {}
},
computed: {
options() {
let options = []
if (Array.isArray(this.formConfig?.options)) {
options = this.formConfig?.options
}
return options.map((item) => {
item.label = cleanRichText(item.label) item.label = cleanRichText(item.label)
return item return item
}) })
} })
},
methods: { const handleSelectChange = (value: Array<string>) => {
changeData(value) { const key = props.formConfig.key
const key = this.formConfig.key
this.$emit(FORM_CHANGE_EVENT_KEY, { emit(FORM_CHANGE_EVENT_KEY, { key, value })
key,
value
})
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -1,79 +1,78 @@
<template> <template>
<div class="custom-time-range"> <div class="custom-time-range">
<el-config-provider :locale="locale">
<el-date-picker <el-date-picker
v-model="begTime" v-model="begModelTime"
type="datetime" type="datetime"
placeholder="开始日期" placeholder="开始日期"
format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
@change="changeData(formConfig.keys[0], $event)" @change="handleDatePickerChange(formConfig.keys[0], $event)"
> />
</el-date-picker>
<span class="seporator"></span> <span class="seporator"></span>
<el-date-picker <el-date-picker
v-model="endTime" v-model="endModelTime"
type="datetime" type="datetime"
placeholder="结束日期" placeholder="结束日期"
format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
@change="changeData(formConfig.keys[1], $event)" @change="handleDatePickerChange(formConfig.keys[1], $event)"
> />
</el-date-picker> </el-config-provider>
</div> </div>
</template> </template>
<script> <script setup lang="ts">
// elementformatmomentformat import { computed, ref, watch } from 'vue'
import moment from 'moment' import moment from 'moment'
//
import 'moment/locale/zh-cn' import 'moment/locale/zh-cn'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs' import zhCn from 'element-plus/es/locale/lang/zh-cn'
//
moment.locale('zh-cn')
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant' import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
export default { moment.locale('zh-cn')
name: 'QuestionTime',
data() { interface Props {
const defaultBeginTime = new Date() formConfig: any
const defaultEndTime = moment(defaultBeginTime).add(10, 'year').toDate() }
const format = 'yyyy-MM-DD HH:mm:ss'
return { interface Emit {
begTime: defaultBeginTime, (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
endTime: new Date(defaultEndTime), }
format,
zhCn, const emit = defineEmits<Emit>()
begTimeStr: moment(defaultBeginTime).format(format), const props = defineProps<Props>()
endTimeStr: moment(defaultEndTime).format(format)
} const format = 'yyyy-MM-DD HH:mm:ss'
}, const defaultBeginTime = new Date()
props: { const defaultEndTime = moment(defaultBeginTime).add(10, 'year').toDate()
formConfig: {
type: Object, const locale = ref(zhCn)
required: true const begModelTime = ref(defaultBeginTime)
} const endModelTime = ref(defaultEndTime)
}, const begTimeStr = ref(moment(defaultBeginTime).format(format))
watch: { const endTimeStr = ref(moment(defaultEndTime).format(format))
'formConfig.value': {
handler([begTime, endTime]) { const handleDatePickerChange = (key: string, value: string) => {
if (!!begTime && begTime !== this.begTimeStr) { console.log(key, value)
this.begTimeStr = begTime emit(FORM_CHANGE_EVENT_KEY, { key, value })
this.begTime = new Date(begTime) }
}
if (!!endTime && endTime !== this.endTimeStr) { const watchValue = computed(() => props.formConfig.value)
this.endTimeStr = endTime
this.endTime = new Date(endTime) watch(
watchValue,
([begTime, endTime]: any) => {
if (!!begTime && begTime !== begTimeStr.value) {
begTimeStr.value = begTime
begModelTime.value = new Date(begTime)
}
if (!!endTime && endTime !== endTimeStr.value) {
endTimeStr.value = endTime
endModelTime.value = new Date(endTime)
} }
}, },
{
immediate: true, immediate: true,
deep: true deep: true
} }
}, )
methods: {
async changeData(key, value) {
this.$emit(FORM_CHANGE_EVENT_KEY, {
key,
value: moment(value).format(this.format)
})
}
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.custom-time-range { .custom-time-range {

View File

@ -1,74 +1,74 @@
<template> <template>
<div>
<el-config-provider :locale="locale">
<el-time-picker <el-time-picker
is-range is-range
v-model="value" v-model="modelValue"
range-separator="-" range-separator="-"
start-placeholder="开始时间" start-placeholder="开始时间"
end-placeholder="结束时间" end-placeholder="结束时间"
placeholder="选择时间范围" placeholder="选择时间范围"
format="HH:mm:ss" format="HH:mm:ss"
@change="onTimeChange" @change="handleTimePickerChange"
popper-class="timeRange" popper-class="timeRange"
> >
</el-time-picker> </el-time-picker>
</el-config-provider>
</div>
</template> </template>
<script> <script setup lang="ts">
import { ref, computed, watch } from 'vue'
import moment from 'moment' import moment from 'moment'
//
import 'moment/locale/zh-cn' import 'moment/locale/zh-cn'
// import zhCn from 'element-plus/es/locale/lang/zh-cn'
moment.locale('zh-cn')
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant' import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
export default { moment.locale('zh-cn')
name: 'QuestionTimeHour',
props: {
formConfig: {
type: Object,
required: true
}
},
data() {
return {
value: [],
timeValue: []
}
},
watch: {
'formConfig.value': {
handler([answerBeginTime = '00:00:00', answerEndTime = '23:59:59']) {
if (answerBeginTime !== this.timeValue[0] || answerEndTime !== this.timeValue[1]) {
this.timeValue = [answerBeginTime, answerEndTime]
const ymd = '2023-01-01' interface Props {
const time = [] formConfig: any
time.push(`${ymd} ${answerBeginTime}`) }
time.push(`${ymd} ${answerEndTime}`)
this.value = time interface Emit {
(ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
}
const emit = defineEmits<Emit>()
const props = defineProps<Props>()
const locale = ref(zhCn)
const modelValue = ref<any>([])
const timeValue = ref<any>([])
const handleTimePickerChange = (values: Array<string>) => {
if (!values) {
return
}
const keys = props.formConfig.keys
const times = values.map((item) => moment(item).format('HH:mm:ss'))
timeValue.value = times
times.forEach((value, idx) => emit(FORM_CHANGE_EVENT_KEY, { key: keys[idx], value }))
}
const watchValue = computed(() => props.formConfig.value)
watch(
watchValue,
([startTime = '00:00:00', endTime = '23:59:59']: Array<string>) => {
if (startTime !== timeValue.value[0] || endTime !== timeValue.value[1]) {
const times = [startTime, endTime]
const currentDate = moment(Date.now()).format('yyyy-MM-DD')
modelValue.value = times.map((time) => `${currentDate} ${time}`)
timeValue.value = times
} }
}, },
{
immediate: true, immediate: true,
deep: true deep: true
} }
}, )
methods: {
onTimeChange(data) {
if (!data) {
return
}
this.timeValue = data.map((item) => moment(item).format('HH:mm:ss'))
this.timeValue.forEach((item, i) => {
this.changeData(this.formConfig.keys[i], item)
})
},
changeData(key, value) {
this.$emit(FORM_CHANGE_EVENT_KEY, {
key,
value
})
}
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.star-question-begAndEndHour { .star-question-begAndEndHour {

View File

@ -1,5 +1,9 @@
<template> <template>
<el-radio-group v-model="validValue" @change="changeData" :disabled="formConfig.disabled"> <el-radio-group
v-model="modelValue"
@change="handleRadioGroupChange"
:disabled="formConfig.disabled"
>
<el-radio v-for="item in options" :key="item.value" :value="item.value" class="customed-radio"> <el-radio v-for="item in options" :key="item.value" :value="item.value" class="customed-radio">
<el-tooltip v-if="item.tip" class="item right" effect="dark"> <el-tooltip v-if="item.tip" class="item right" effect="dark">
<template #content> <template #content>
@ -11,60 +15,47 @@
</el-radio> </el-radio>
</el-radio-group> </el-radio-group>
</template> </template>
<script> <script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant' import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
export default { interface Props {
name: 'RadioGroup', formConfig: any
computed: { }
options() {
let options = [] interface Emit {
if (Array.isArray(this.formConfig?.options)) { (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
options = this.formConfig?.options }
}
return options.map((item) => { const emit = defineEmits<Emit>()
return item const props = defineProps<Props>()
})
const modelValue = ref(props.formConfig.value || props.formConfig.defaultValue)
const options = computed(
() => (Array.isArray(props.formConfig?.options) && props.formConfig?.options) || []
)
const handleRadioGroupChange = (value: string) => {
const key = props.formConfig.key
emit(FORM_CHANGE_EVENT_KEY, { key, value })
}
watch(
props.formConfig,
(config) => {
if (config.value == null || config.value == undefined) {
modelValue.value = config.defaultValue
return
} }
modelValue.value = config.value
}, },
data() { {
let value
if (this.formConfig.value === undefined || this.formConfig.value === null) {
value = this.formConfig.defaultValue
} else {
value = this.formConfig.value
}
return {
validValue: value,
noMargin: this.formConfig.noMargin,
isActive: {}
}
},
props: {
formConfig: {
type: Object
}
},
watch: {
formConfig: {
handler(val) {
this.validValue =
val.value === undefined || val.value === null ? val.defaultValue : val.value
},
immediate: true, immediate: true,
deep: true deep: true
} }
}, )
methods: {
changeData(value) {
const key = this.formConfig.key
this.$emit(FORM_CHANGE_EVENT_KEY, {
key,
value
})
}
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.customed-radio { .customed-radio {

View File

@ -1,18 +1,13 @@
<template> <template>
<el-radio-group <el-radio-group
v-model="validValue" v-model="modelValue"
@change="changeData" @change="handleRadioGroupChange"
class="radio-group" class="radio-group"
popper-class="option-list-width" popper-class="option-list-width"
:disabled="formConfig.disabled" :disabled="formConfig.disabled"
> >
<el-radio v-for="item in options" :key="item.value" :value="item.value"> <el-radio v-for="item in options" :key="item.value" :value="item.value">
<el-tooltip <el-tooltip v-if="item.tip" class="item right" effect="dark" placement="top">
v-if="item.tip"
class="item right"
effect="dark"
:placement="setTipPosition(item)"
>
<template #content> <template #content>
<div v-html="item.tip"></div> <div v-html="item.tip"></div>
</template> </template>
@ -31,66 +26,47 @@
</el-radio> </el-radio>
</el-radio-group> </el-radio-group>
</template> </template>
<script> <script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant' import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
const tipPosition = {
前置限制条件: 'top' interface Props {
formConfig: any
} }
export default { interface Emit {
name: 'RadioSetter', (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
computed: { }
options() {
let options = [] const emit = defineEmits<Emit>()
if (Array.isArray(this.formConfig?.options)) { const props = defineProps<Props>()
options = this.formConfig?.options
} const modelValue = ref(props.formConfig.value || props.formConfig.defaultValue)
return options.map((item) => { const options = computed(
return item () => (Array.isArray(props.formConfig?.options) && props.formConfig?.options) || []
}) )
const handleRadioGroupChange = (value: string) => {
const key = props.formConfig.key
emit(FORM_CHANGE_EVENT_KEY, { key, value })
}
watch(
props.formConfig,
(config) => {
if (config.value == null || config.value == undefined) {
modelValue.value = config.defaultValue
return
} }
modelValue.value = config.value
}, },
data() { {
let value
if (this.formConfig.value === undefined || this.formConfig.value === null) {
value = this.formConfig.defaultValue
} else {
value = this.formConfig.value
}
return {
validValue: value,
noMargin: this.formConfig.noMargin,
isActive: {}
}
},
props: {
formConfig: {
type: Object
}
},
watch: {
formConfig: {
handler(val) {
this.validValue =
val.value === undefined || val.value === null ? val.defaultValue : val.value
},
immediate: true, immediate: true,
deep: true deep: true
} }
}, )
methods: {
changeData(value) {
const key = this.formConfig.key
this.$emit(FORM_CHANGE_EVENT_KEY, {
key,
value
})
},
setTipPosition(item) {
return tipPosition[item.label] || 'right'
}
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.star-radio-wrapper { .star-radio-wrapper {

View File

@ -1,73 +1,81 @@
<template> <template>
<div class="range-wrapper"> <div class="range-wrapper">
<el-input-number :modelValue="minValue" @change="changeDataMin" :min="0" /> <el-input-number
:modelValue="minModelValue"
@change="handleRangeChange('min', $event)"
:min="0"
/>
<span class="split-text"></span> <span class="split-text"></span>
<el-input-number :modelValue="maxValue" @change="changeDataMax" :min="0" /> <el-input-number
:modelValue="maxModelValue"
@change="handleRangeChange('max', $event)"
:min="0"
/>
</div> </div>
</template> </template>
<script> <script setup lang="ts">
import { ElMessage } from 'element-plus' import { computed } from 'vue'
import 'element-plus/theme-chalk/src/message.scss'
import { ElMessage } from 'element-plus'
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant' import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
export default { import 'element-plus/theme-chalk/src/message.scss'
name: 'RangeSetter',
props: { interface Props {
formConfig: { formConfig: any
type: Object, }
required: true
interface Emit {
(ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: number }): void
}
const emit = defineEmits<Emit>()
const props = defineProps<Props>()
const minModelValue = computed(() => {
const key = props.formConfig.key
const minValue = props.formConfig?.value?.min?.value
if (key === 'textRange') {
return parseInt(minValue)
} }
},
data() { return minValue || 1
return {} })
},
computed: { const maxModelValue = computed(() => {
minValue() { const key = props.formConfig.key
if (this.formConfig.key === 'textRange') { const maxValue = props.formConfig?.value?.max?.value
return parseInt(this.formConfig?.value?.min?.value)
} else { if (key === 'textRange') {
return this.formConfig?.value?.min?.value || 1 return parseInt(maxValue)
} }
},
maxValue() { return maxValue || 1
if (this.formConfig.key === 'textRange') { })
return parseInt(this.formConfig?.value?.max?.value)
} else { const handleRangeChange = (eventType: 'max' | 'min', value: number) => {
return this.formConfig?.value?.max?.value || 1 const key = props.formConfig.key
} const initMinValue = props.formConfig.value.min.value
} const initMaxValue = props.formConfig.value.max.value
},
methods: { if (
changeDataMin(value) { (eventType === 'max' && value < initMinValue) ||
const key = this.formConfig.key (eventType === 'min' && value > initMaxValue)
if (value > this.formConfig.value.max.value) { ) {
ElMessage({ ElMessage({
type: 'info', type: 'info',
message: '最小值大于最大值,请重新输入!' message:
eventType === 'min' ? '最小值大于最大值,请重新输入!' : '最大值小于最小值,请重新输入!'
}) })
} else {
this.$emit(FORM_CHANGE_EVENT_KEY, { return
key: key + '.min.value', }
emit(FORM_CHANGE_EVENT_KEY, {
key: `${key}.${eventType}.value`,
value value
}) })
}
},
changeDataMax(value) {
const key = this.formConfig.key
if (value < this.formConfig.value.min.value) {
ElMessage({
type: 'info',
message: '最大值小于最小值,请重新输入!'
})
} else {
this.$emit(FORM_CHANGE_EVENT_KEY, {
key: key + '.max.value',
value
})
}
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -1,44 +1,33 @@
<template> <template>
<RichEditor <RichEditor
:modelValue="formConfig.value" :modelValue="formConfig.value"
@change="onChange" @change="handleEditorValueChange('change', $event)"
:staticToolBar="true" :staticToolBar="true"
@input="onInput" @input="handleEditorValueChange('input', $event)"
/> />
</template> </template>
<script> <script setup lang="ts">
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
import RichEditor from '@/common/Editor/RichEditor.vue' import RichEditor from '@/common/Editor/RichEditor.vue'
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
export default { interface Props {
name: 'RichText', formConfig: any
components: { }
RichEditor
},
props: {
formConfig: {
type: Object,
default: () => ({})
}
}, // value v-model
methods: { interface Emit {
onChange(newHtml) { (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
this.$emit(FORM_CHANGE_EVENT_KEY, { (ev: 'change' | 'input', value: string): void
key: this.formConfig.key, }
value: newHtml
}) const emit = defineEmits<Emit>()
this.$emit('change', newHtml) const props = withDefaults(defineProps<Props>(), { formConfig: {} })
},
onInput(newHtml) { const handleEditorValueChange = (eventType: 'change' | 'input', value: string) => {
this.$emit(FORM_CHANGE_EVENT_KEY, { const key = props.formConfig.key
key: this.formConfig.key,
value: newHtml emit(FORM_CHANGE_EVENT_KEY, { key, value })
}) emit(eventType, value)
this.$emit('input', newHtml)
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -1,11 +1,9 @@
<template> <template>
<el-select <el-select
:placeholder=" :placeholder="placeholder"
['matrixOptionsRely', 'optionOrigin'].includes(formConfig.key) ? '请选择' : formConfig.label v-model="modelValue"
"
v-model="validValue"
:empty-values="[null, undefined]" :empty-values="[null, undefined]"
@change="changeData" @change="handleSelectChange"
popper-class="option-list-width" popper-class="option-list-width"
:disabled="formConfig.disabled" :disabled="formConfig.disabled"
:class="formConfig.contentClass" :class="formConfig.contentClass"
@ -19,64 +17,74 @@
/> />
</el-select> </el-select>
</template> </template>
<script> <script setup lang="ts">
import { computed, watch, ref } from 'vue'
import { cleanRichText } from '@/common/xss' import { cleanRichText } from '@/common/xss'
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant' import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
export default {
name: 'SelectSetter', interface Props {
data() { formConfig: any
return { moduleConfig: any
validValue: !this.formConfig.value && this.formConfig.value != 0 ? '' : this.formConfig.value }
interface Emit {
(ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
}
const props = defineProps<Props>()
const emit = defineEmits<Emit>()
const placeholder = computed(() => {
const defaultValue = '请选择'
if (!['matrixOptionsRely', 'optionOrigin'].includes(props.formConfig.key)) {
return props.formConfig.label
} }
},
props: { return defaultValue
formConfig: { })
type: Object,
required: true const options = computed(() => {
}, if (!Array.isArray(props.formConfig?.options)) {
moduleConfig: { return []
type: Object,
required: true
} }
},
watch: { return props.formConfig?.options.map((item: any) => {
formConfig: {
handler(v) {
this.validValue = v.value
},
deep: true
}
},
computed: {
options() {
let options = []
if (Array.isArray(this.formConfig?.options)) {
options = this.formConfig?.options
}
return options.map((item) => {
item.label = cleanRichText(item.label) item.label = cleanRichText(item.label)
return item return item
}) })
} })
},
methods: { const modelValue = ref(
changeData(value) { !props.formConfig.value && props.formConfig.value != 0 ? '' : props.formConfig.value
const { key, valueSetter } = this.formConfig )
const handleSelectChange = (value: string) => {
const { key, valueSetter } = props.formConfig
if (valueSetter && typeof valueSetter == 'function') { if (valueSetter && typeof valueSetter == 'function') {
let status = valueSetter(value, this.moduleConfig) let verification: boolean = valueSetter(value, props.moduleConfig)
if (status) {
this.validValue = this.moduleConfig[key] if (!verification) {
return return
} }
modelValue.value = props.moduleConfig[key]
} }
this.$emit(FORM_CHANGE_EVENT_KEY, {
key, emit(FORM_CHANGE_EVENT_KEY, { key, value })
value
})
}
}
} }
watch(
props.formConfig,
(newValue) => {
if (modelValue.value != newValue.value) {
modelValue.value = newValue.value
}
},
{ deep: true }
)
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.option-list-width { .option-list-width {

View File

@ -2,40 +2,36 @@
<el-form-item class="slider-wrap"> <el-form-item class="slider-wrap">
<el-slider <el-slider
:modelValue="formConfig.value" :modelValue="formConfig.value"
@input="changeData" @input="handleSliderChange"
:format-tooltip="formatTooltip" :format-tooltip="formatTooltip"
></el-slider> ></el-slider>
<!-- <span>{{ formConfig.value + '%' }}</span> -->
</el-form-item> </el-form-item>
</template> </template>
<script> <script setup lang="ts">
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant' import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
export default {
name: 'SliderSetter', interface Props {
props: { formConfig: any
formConfig: { }
type: Object,
required: true interface Emit {
} (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: number }): void
}, }
methods: {
formatTooltip(val) { const props = defineProps<Props>()
return val + '%' const emit = defineEmits<Emit>()
},
changeData(value) { const formatTooltip = (val: string) => val + '%'
const key = this.formConfig.key
this.$emit(FORM_CHANGE_EVENT_KEY, { const handleSliderChange = (value: number) => {
key, const key = props.formConfig.key
value
}) emit(FORM_CHANGE_EVENT_KEY, { key, value })
}
}
} }
</script> </script>
<style> <style>
.slider-wrap { .slider-wrap {
flex: 1; flex: 1;
/* display: flex; */
padding: 0 20px; padding: 0 20px;
} }
</style> </style>