From 6c9044b457bf6941b62c5837a9701b90bce44a77 Mon Sep 17 00:00:00 2001
From: alwayrun <minge23@live.cn>
Date: Tue, 21 May 2024 19:28:42 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=20materials/sett?=
 =?UTF-8?q?ers/widgets=20=E7=9B=AE=E5=BD=95=E4=B8=8B=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6,=20=E4=BD=BF=E7=94=A8=20Vue3=20=E7=BB=84?=
 =?UTF-8?q?=E5=90=88=E5=BC=8F=20API=20=E5=86=99=E6=B3=95=20(#146)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../materials/setters/widgets/CheckBox.vue    | 144 ++++++++---------
 .../setters/widgets/CheckboxGroup.vue         |  73 +++++----
 .../materials/setters/widgets/ColorInput.vue  |  43 ++---
 .../materials/setters/widgets/ColorPicker.vue |  39 ++---
 .../materials/setters/widgets/FormItem.vue    |  18 +--
 .../setters/widgets/FormdataBackFill.vue      | 121 +++++++-------
 .../setters/widgets/FreqAndNumberLimit.vue    |  53 +++----
 .../materials/setters/widgets/InputNumber.vue | 149 ++++++++----------
 .../setters/widgets/InputPercent.vue          |  88 ++++-------
 .../materials/setters/widgets/InputSetter.vue |  86 +++++-----
 .../materials/setters/widgets/MultiInput.vue  |  51 +++---
 .../materials/setters/widgets/MultiSelect.vue |  67 ++++----
 .../setters/widgets/QuestionTime.vue          | 135 ++++++++--------
 .../setters/widgets/QuestionTimeHour.vue      | 122 +++++++-------
 .../materials/setters/widgets/RadioGroup.vue  |  95 +++++------
 .../materials/setters/widgets/RadioSetter.vue | 104 +++++-------
 .../materials/setters/widgets/RangeSetter.vue | 130 ++++++++-------
 .../materials/setters/widgets/RichText.vue    |  51 +++---
 .../setters/widgets/SelectSetter.vue          | 126 ++++++++-------
 .../setters/widgets/SliderSetter.vue          |  44 +++---
 20 files changed, 798 insertions(+), 941 deletions(-)

diff --git a/web/src/materials/setters/widgets/CheckBox.vue b/web/src/materials/setters/widgets/CheckBox.vue
index 8d0e7ff1..87efa774 100644
--- a/web/src/materials/setters/widgets/CheckBox.vue
+++ b/web/src/materials/setters/widgets/CheckBox.vue
@@ -1,92 +1,78 @@
 <template>
   <el-checkbox
-    v-model="validValue"
-    @change="changeData"
+    v-model="modelValue"
+    @change="handleCheckboxChange"
     :disabled="checkBoxDis"
     :class="{ inline: !!formConfig?.inline }"
   >
   </el-checkbox>
 </template>
-<script>
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
 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: {
-    changeData(value) {
-      const key = this.formConfig.key
-
-      this.$emit(FORM_CHANGE_EVENT_KEY, {
-        key,
-        value
-      })
-    }
-  }
+interface Props {
+  formConfig: any
+  moduleConfig: any
 }
+
+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>
 <style lang="scss" scoped>
 .inline {
diff --git a/web/src/materials/setters/widgets/CheckboxGroup.vue b/web/src/materials/setters/widgets/CheckboxGroup.vue
index 54beb0f9..d041efa7 100644
--- a/web/src/materials/setters/widgets/CheckboxGroup.vue
+++ b/web/src/materials/setters/widgets/CheckboxGroup.vue
@@ -1,10 +1,10 @@
 <template>
   <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
-        v-model="values[item.key]"
+        v-model="optionsValue[item.key]"
         :label="item.label"
-        @change="onChange(item.key, $event)"
+        @change="handleCheckboxChange(item.key, $event)"
       >
       </el-checkbox>
       <el-tooltip v-if="item.tip" class="tooltip" effect="dark" placement="right">
@@ -16,44 +16,43 @@
     </div>
   </div>
 </template>
-<script>
+<script setup lang="ts">
+import { watch, reactive } from 'vue'
 import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
-export default {
-  name: 'CheckboxGroup',
-  props: {
-    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]
-          }
-        }
+
+interface Props {
+  formConfig: any
+}
+
+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]
       }
     }
   },
-  methods: {
-    onChange(key, value) {
-      this.$emit(FORM_CHANGE_EVENT_KEY, {
-        key,
-        value
-      })
-    }
-  }
-}
+  { immediate: true, deep: true }
+)
 </script>
 <style lang="scss" scoped>
 .customed-checkbox {
diff --git a/web/src/materials/setters/widgets/ColorInput.vue b/web/src/materials/setters/widgets/ColorInput.vue
index 0495409a..8c846d00 100644
--- a/web/src/materials/setters/widgets/ColorInput.vue
+++ b/web/src/materials/setters/widgets/ColorInput.vue
@@ -1,33 +1,34 @@
 <template>
   <el-form-item>
     <el-input
+      v-model="modelValue"
       :placeholder="formConfig.placeholder"
-      :value="formConfig.value"
-      :maxLength="formConfig.maxlength"
-      @change="changeData"
+      :maxlength="formConfig.maxlength"
+      @change="handleInputChange"
     >
       <template #prepend>#</template>
     </el-input>
   </el-form-item>
 </template>
-<script>
+<script setup lang="ts">
+import { ref } from 'vue'
 import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
-export default {
-  name: 'ColorInput',
-  props: {
-    formConfig: {
-      type: Object,
-      required: true
-    }
-  },
-  methods: {
-    changeData(value) {
-      const key = this.formConfig.key
-      this.$emit(FORM_CHANGE_EVENT_KEY, {
-        key,
-        value
-      })
-    }
-  }
+
+interface Props {
+  formConfig: any
+}
+
+interface Emit {
+  (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emit>()
+const modelValue = ref(props.formConfig.value)
+
+const handleInputChange = (value: string) => {
+  const key = props.formConfig.key
+
+  emit(FORM_CHANGE_EVENT_KEY, { key, value })
 }
 </script>
diff --git a/web/src/materials/setters/widgets/ColorPicker.vue b/web/src/materials/setters/widgets/ColorPicker.vue
index 406a4332..4fa8b061 100644
--- a/web/src/materials/setters/widgets/ColorPicker.vue
+++ b/web/src/materials/setters/widgets/ColorPicker.vue
@@ -1,27 +1,28 @@
 <template>
   <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>
 </template>
-<script>
+<script setup lang="ts">
 import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
-export default {
-  name: 'ColorPicker',
-  props: {
-    formConfig: {
-      type: Object,
-      required: true
-    }
-  },
-  methods: {
-    changeData(value) {
-      const key = this.formConfig.key
-      this.$emit(FORM_CHANGE_EVENT_KEY, {
-        key,
-        value
-      })
-    }
-  }
+
+interface Props {
+  formConfig: any
+}
+
+interface Emit {
+  (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emit>()
+
+const handleColorPickerChange = (value: string) => {
+  const key = props.formConfig.key
+  emit(FORM_CHANGE_EVENT_KEY, { key, value })
 }
 </script>
 <style lang="scss" scoped>
diff --git a/web/src/materials/setters/widgets/FormItem.vue b/web/src/materials/setters/widgets/FormItem.vue
index e1b44e05..6e66207f 100644
--- a/web/src/materials/setters/widgets/FormItem.vue
+++ b/web/src/materials/setters/widgets/FormItem.vue
@@ -17,20 +17,12 @@
     <slot></slot>
   </el-form-item>
 </template>
-<script>
-export default {
-  name: 'FormItem',
-  components: {},
-  props: {
-    formConfig: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {}
-  }
+<script setup lang="ts">
+interface Props {
+  formConfig: any
 }
+
+defineProps<Props>()
 </script>
 <style lang="scss" scoped>
 .item-label {
diff --git a/web/src/materials/setters/widgets/FormdataBackFill.vue b/web/src/materials/setters/widgets/FormdataBackFill.vue
index 98ce77d2..ce48c7e4 100644
--- a/web/src/materials/setters/widgets/FormdataBackFill.vue
+++ b/web/src/materials/setters/widgets/FormdataBackFill.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-row class="row">
-      <el-select :modelValue="backfillSelect" @change="onSelectChange">
+      <el-select :modelValue="selectModelValue" @change="handleSelectChange">
         <el-option
           v-for="item in options"
           :label="`${item.label}`"
@@ -13,83 +13,68 @@
     <el-row v-show="showFormdataBackfillHour">
       <el-switch
         :inactive-text="formConfig.labels['baseConf.formdataBackfillHour']"
-        :value="hourSwitch"
-        @change="onSwitchChange"
+        :value="switchModelValue"
+        @change="handleSwitchChange"
       ></el-switch>
     </el-row>
   </div>
 </template>
-<script>
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
 import { cleanRichText } from '@/common/xss'
 import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
+
 const formdataBackfillKey = 'baseConf.formdataBackfill'
 const formdataBackfillHourKey = 'baseConf.formdataBackfillHour'
 
-export default {
-  name: 'FormDataBackFill',
-  data() {
-    return {
-      backfillSelect: this.formConfig.value[formdataBackfillKey],
-      hourSwitch: !!this.formConfig.value[formdataBackfillHourKey]
-    }
-  },
-  props: {
-    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)
-        return item
-      })
-    }
-  },
-  methods: {
-    onSelectChange(newVal) {
-      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
-      })
-    }
-  }
+interface Props {
+  formConfig: any
 }
+
+interface Emit {
+  (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 []
+  }
+
+  return props.formConfig?.options.map((item: any) => {
+    item.label = cleanRichText(item.label)
+    return item
+  })
+})
+
+const handleSelectChange = (value: string) => {
+  emit(FORM_CHANGE_EVENT_KEY, { key: formdataBackfillKey, 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>
 <style lang="scss" scoped>
 .row {
diff --git a/web/src/materials/setters/widgets/FreqAndNumberLimit.vue b/web/src/materials/setters/widgets/FreqAndNumberLimit.vue
index 719e9c27..590451e9 100644
--- a/web/src/materials/setters/widgets/FreqAndNumberLimit.vue
+++ b/web/src/materials/setters/widgets/FreqAndNumberLimit.vue
@@ -4,7 +4,7 @@
       class="option-select"
       placeholder="请选择"
       :value="formConfig.value[formConfig.selectKey]"
-      @change="onChange($event, formConfig.selectKey)"
+      @change="handleInputChange($event, formConfig.selectKey)"
     >
       <el-option
         v-for="item in formConfig.options"
@@ -16,42 +16,35 @@
     <template v-if="isShowNumberFn">
       <span class="option-txt">提交</span>
       <el-input-number
-        v-model="numberValue"
-        @change="onChange($event, formConfig.numberKey)"
+        v-model="modelValue"
+        @change="handleInputChange($event, formConfig.numberKey)"
       ></el-input-number>
       <span class="option-txt">次</span>
     </template>
   </el-form-item>
 </template>
-<script>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
 import { get as _get } from 'lodash-es'
+
 import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
-export default {
-  name: 'FreqAndNumberLimit',
-  props: {
-    formConfig: {
-      type: Object,
-      required: true
-    }
-  },
-  computed: {
-    isShowNumberFn() {
-      return !!this.formConfig.value[this.formConfig.selectKey]
-    }
-  },
-  data() {
-    return {
-      numberValue: Number(_get(this.formConfig.value, this.formConfig.numberKey, 0))
-    }
-  },
-  methods: {
-    onChange(e, key) {
-      this.$emit(FORM_CHANGE_EVENT_KEY, {
-        key,
-        value: e
-      })
-    }
-  }
+
+interface Props {
+  formConfig: any
+}
+
+interface Emit {
+  (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
+}
+
+const emit = defineEmits<Emit>()
+const props = defineProps<Props>()
+
+const modelValue = ref(Number(_get(props.formConfig.value, props.formConfig.numberKey, 0)))
+const isShowNumberFn = computed(() => !!props.formConfig.value[props.formConfig.selectKey])
+
+const handleInputChange = (value: string, key: string) => {
+  emit(FORM_CHANGE_EVENT_KEY, { key, value })
 }
 </script>
 <style lang="scss" scoped>
diff --git a/web/src/materials/setters/widgets/InputNumber.vue b/web/src/materials/setters/widgets/InputNumber.vue
index 2129b1b3..44b08611 100644
--- a/web/src/materials/setters/widgets/InputNumber.vue
+++ b/web/src/materials/setters/widgets/InputNumber.vue
@@ -1,100 +1,81 @@
 <template>
   <el-input-number
     :placeholder="formConfig.placeholder"
-    :modelValue="numberValue"
-    @change="changeData"
-    :min="min"
-    :max="max"
+    :modelValue="modelValue"
+    @change="handleInputChange"
+    :min="minModelValue"
+    :max="maxModelValue"
   />
 </template>
-<script>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
 import { ElMessage } from 'element-plus'
 import 'element-plus/theme-chalk/src/message.scss'
 
 import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 
-export default {
-  name: 'InputNumber',
-  props: {
-    formConfig: {
-      type: Object,
-      required: true
-    },
-    moduleConfig: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      numberValue: 0
-    }
-  },
-  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 (typeof min === 'string') {
-          return this.judgeType(type)
-            ? Number(this.moduleConfig[min])
-            : Number(Number(this.moduleConfig[min]) + 1)
-        } else if (typeof this.formConfig.min === 'function') {
-          return min(this.moduleConfig)
-        } else {
-          return Number(min)
-        }
-      }
-      return -Infinity
-    },
-    max() {
-      const { type } = this.moduleConfig
-      const { max, min } = this.formConfig
+interface Props {
+  formConfig: any
+  moduleConfig: any
+}
 
-      if (max) {
-        if (typeof max === 'string') {
-          return this.judgeType(type) ? Number(this.moduleConfig[max]) : this.moduleConfig[max] - 1
-        } else if (typeof max === 'function') {
-          return max(this.moduleConfig)
-        }
-        return Number(max)
-      } else if (min !== undefined && Array.isArray(this.moduleConfig?.options)) {
-        // inputNumber 配置了最小值，没有配置最大值（checkbox, vote, matrix-checkbox, 最大选择数 ）
-        return this.moduleConfig.options.length
-      } else {
-        return Infinity
-      }
-    }
-  },
-  methods: {
-    judgeType(type) {
-      return ['checkbox', 'vote'].includes(type)
-    },
-    changeData(value) {
-      const reg = /^(-)?[0-9]+$/
-      if (!reg.test(value)) {
-        ElMessage.warning('只能输入整数')
-      }
-      this.numberValue = value
-      const key = this.formConfig.key
-      this.$emit(FORM_CHANGE_EVENT_KEY, {
-        key,
-        value
-      })
+interface Emit {
+  (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: number }): void
+}
+
+const emit = defineEmits<Emit>()
+const props = defineProps<Props>()
+const setterTypes = ['checkbox', 'vote']
+const modelValue = ref(props.formConfig.value || 0)
+const minModelValue = computed(() => {
+  const { min } = props.formConfig
+  const { type } = props.moduleConfig
+
+  if (min !== undefined) {
+    if (typeof min === 'string') {
+      return setterTypes.includes(type)
+        ? Number(props.moduleConfig[min])
+        : Number(Number(props.moduleConfig[min]) + 1)
+    } else if (typeof props.formConfig.min === 'function') {
+      return min(props.moduleConfig)
+    } else {
+      return Number(min)
     }
   }
+  return -Infinity
+})
+
+const maxModelValue = computed(() => {
+  const { type } = props.moduleConfig
+  const { max, min } = props.formConfig
+
+  if (max) {
+    if (typeof max === 'string') {
+      return setterTypes.includes(type)
+        ? Number(props.moduleConfig[max])
+        : props.moduleConfig[max] - 1
+    } else if (typeof max === 'function') {
+      return max(props.moduleConfig)
+    }
+    return Number(max)
+  } else if (min !== undefined && Array.isArray(props.moduleConfig?.options)) {
+    return props.moduleConfig.options.length
+  } else {
+    return Infinity
+  }
+})
+
+const handleInputChange = (value: number) => {
+  const key = props.formConfig.key
+  const reg = /^(-)?[0-9]+$/
+
+  if (!reg.test(String(value))) {
+    ElMessage.warning('只能输入整数')
+  }
+
+  modelValue.value = value
+
+  emit(FORM_CHANGE_EVENT_KEY, { key, value })
 }
 </script>
 <style lang="scss" scoped>
diff --git a/web/src/materials/setters/widgets/InputPercent.vue b/web/src/materials/setters/widgets/InputPercent.vue
index a3270fc7..76489b19 100644
--- a/web/src/materials/setters/widgets/InputPercent.vue
+++ b/web/src/materials/setters/widgets/InputPercent.vue
@@ -2,70 +2,44 @@
   <el-input
     class="custom-input"
     :placeholder="formConfig.placeholder"
-    v-model="value"
-    @input="changeData"
-    :min="min"
-    :max="max"
+    v-model="modelValue"
+    @change="handleInputChange"
+    :min="minModelValue"
+    :max="maxModelValue"
     type="number"
   >
     <template #append>%</template>
   </el-input>
 </template>
-<script>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
 import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
-export default {
-  name: 'InputPercent',
-  props: {
-    formConfig: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      value: ''
-    }
-  },
-  watch: {
-    'formConfig.value': {
-      immediate: true,
-      handler(newVal) {
-        let val = parseFloat(newVal)
-        if (val === this.value) {
-          return
-        }
-        this.value = val
-      }
-    }
-  },
-  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}%`
-      })
-    }
+
+interface Props {
+  formConfig: any
+}
+
+interface Emit {
+  (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
+}
+
+const emit = defineEmits<Emit>()
+const props = defineProps<Props>()
+
+const modelValue = ref(parseFloat(props.formConfig.value))
+const maxModelValue = computed(() => parseFloat(props.formConfig.max) || 100)
+const minModelValue = computed(() => parseFloat(props.formConfig.min) || 0)
+
+const handleInputChange = (val: string) => {
+  const key = props.formConfig.key
+  const value = Math.min(Math.max(parseFloat(val), minModelValue.value), maxModelValue.value)
+  let percent = ''
+
+  if (Number.isInteger(value)) {
+    percent = `${value}%`
   }
+
+  emit(FORM_CHANGE_EVENT_KEY, { key, value: percent })
 }
 </script>
 <style lang="scss" scoped>
diff --git a/web/src/materials/setters/widgets/InputSetter.vue b/web/src/materials/setters/widgets/InputSetter.vue
index 283d9626..06124cf5 100644
--- a/web/src/materials/setters/widgets/InputSetter.vue
+++ b/web/src/materials/setters/widgets/InputSetter.vue
@@ -1,54 +1,48 @@
 <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>
-<script>
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
 import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 
-export default {
-  name: 'InputSetter',
-  props: {
-    formConfig: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      inputData: this.formConfig.value || ''
-    }
-  },
-  watch: {
-    'formConfig.value': {
-      handler(newVal) {
-        if (newVal === this.inputData) {
-          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
-      })
+interface Props {
+  formConfig: any
+}
+
+interface Emit {
+  (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
+}
+
+const emit = defineEmits<Emit>()
+const props = defineProps<Props>()
+
+const modelValue = ref(props.formConfig.value || '')
+const lazyValue = computed(() => props.formConfig.value)
+
+const handleInputBlur = () => {
+  const { key, validate, value } = props.formConfig
+  const preValue = value || ''
+
+  if (validate && typeof validate == 'function') {
+    const validateResult: boolean = validate(modelValue.value)
+
+    if (!validateResult) {
+      return
     }
   }
+
+  if (preValue !== modelValue.value) {
+    emit(FORM_CHANGE_EVENT_KEY, { key, value: modelValue.value })
+  }
 }
+
+watch(lazyValue, (value) => {
+  if (value !== modelValue.value) {
+    modelValue.value = value
+  }
+})
 </script>
-<style lang="scss" scoped></style>
diff --git a/web/src/materials/setters/widgets/MultiInput.vue b/web/src/materials/setters/widgets/MultiInput.vue
index 41c3feff..7b65b346 100644
--- a/web/src/materials/setters/widgets/MultiInput.vue
+++ b/web/src/materials/setters/widgets/MultiInput.vue
@@ -9,44 +9,31 @@
       </label>
       <el-input
         :value="formConfig.value[item.key]"
-        @change="(val) => changeData(item.key, val)"
-        @input="(val) => changeData(item.key, val)"
+        @onchge="handleInputChange(item.key, $event)"
         :placeholder="item.placeholder"
       />
     </el-form-item>
   </div>
 </template>
-<script>
+<script setup lang="ts">
 import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
-export default {
-  name: 'MultiInput',
-  props: {
-    formConfig: {
-      type: Object,
-      required: true
-    },
-    moduleConfig: {
-      type: Object,
-      required: true
-    }
-  },
-  methods: {
-    changeData(key, value) {
-      if (this.formConfig.key) {
-        this.$emit(FORM_CHANGE_EVENT_KEY, {
-          key: this.formConfig.key + '.' + key,
-          value
-        })
-      } else if (this.formConfig.keys) {
-        this.$emit(FORM_CHANGE_EVENT_KEY, {
-          key,
-          value
-        })
-      } else {
-        // todo
-      }
-    }
-  }
+
+interface Props {
+  formConfig: any
+  moduleConfig: any
+}
+
+interface Emit {
+  (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emit>()
+
+const handleInputChange = (itemKey: string, value: string) => {
+  const key = props.formConfig.key
+
+  emit(FORM_CHANGE_EVENT_KEY, { key: `${key}.${itemKey}`, value })
 }
 </script>
 <style lang="scss" scoped>
diff --git a/web/src/materials/setters/widgets/MultiSelect.vue b/web/src/materials/setters/widgets/MultiSelect.vue
index 8a9d6e53..c2df35a8 100644
--- a/web/src/materials/setters/widgets/MultiSelect.vue
+++ b/web/src/materials/setters/widgets/MultiSelect.vue
@@ -1,8 +1,8 @@
 <template>
   <el-select
-    :placeholder="formConfig.placeholder || formConfig.label"
-    :value="formConfig.value"
-    @input="changeData"
+    :placeholder="placeholder"
+    :value="modelValue"
+    @change="handleSelectChange"
     multiple
     popper-class="option-list-width"
     :disabled="formConfig.disabled"
@@ -17,42 +17,39 @@
   </el-select>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
 import { cleanRichText } from '@/common/xss'
 import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 
-export default {
-  name: 'SelectSetter',
-  props: {
-    formConfig: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    options() {
-      let options = []
-      if (Array.isArray(this.formConfig?.options)) {
-        options = this.formConfig?.options
-      }
-      return options.map((item) => {
-        item.label = cleanRichText(item.label)
-        return item
-      })
-    }
-  },
-  methods: {
-    changeData(value) {
-      const key = this.formConfig.key
-      this.$emit(FORM_CHANGE_EVENT_KEY, {
-        key,
-        value
-      })
-    }
+interface Props {
+  formConfig: any
+}
+
+interface Emit {
+  (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 []
   }
+
+  return props.formConfig?.options.map((item: any) => {
+    item.label = cleanRichText(item.label)
+    return item
+  })
+})
+
+const handleSelectChange = (value: Array<string>) => {
+  const key = props.formConfig.key
+
+  emit(FORM_CHANGE_EVENT_KEY, { key, value })
 }
 </script>
 <style lang="scss" scoped>
diff --git a/web/src/materials/setters/widgets/QuestionTime.vue b/web/src/materials/setters/widgets/QuestionTime.vue
index f2786b57..bcf7d32b 100644
--- a/web/src/materials/setters/widgets/QuestionTime.vue
+++ b/web/src/materials/setters/widgets/QuestionTime.vue
@@ -1,79 +1,78 @@
 <template>
   <div class="custom-time-range">
-    <el-date-picker
-      v-model="begTime"
-      type="datetime"
-      placeholder="开始日期"
-      format="YYYY-MM-DD HH:mm:ss"
-      @change="changeData(formConfig.keys[0], $event)"
-    >
-    </el-date-picker>
-    <span class="seporator">至</span>
-    <el-date-picker
-      v-model="endTime"
-      type="datetime"
-      placeholder="结束日期"
-      format="YYYY-MM-DD HH:mm:ss"
-      @change="changeData(formConfig.keys[1], $event)"
-    >
-    </el-date-picker>
+    <el-config-provider :locale="locale">
+      <el-date-picker
+        v-model="begModelTime"
+        type="datetime"
+        placeholder="开始日期"
+        format="YYYY-MM-DD HH:mm:ss"
+        @change="handleDatePickerChange(formConfig.keys[0], $event)"
+      />
+      <span class="seporator">至</span>
+      <el-date-picker
+        v-model="endModelTime"
+        type="datetime"
+        placeholder="结束日期"
+        format="YYYY-MM-DD HH:mm:ss"
+        @change="handleDatePickerChange(formConfig.keys[1], $event)"
+      />
+    </el-config-provider>
   </div>
 </template>
-<script>
-// 要注意，element的format和moment的format的是不同的
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
 import moment from 'moment'
-// 引入中文
 import 'moment/locale/zh-cn'
-import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
-// 设置中文
-moment.locale('zh-cn')
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
-export default {
-  name: 'QuestionTime',
-  data() {
-    const defaultBeginTime = new Date()
-    const defaultEndTime = moment(defaultBeginTime).add(10, 'year').toDate()
-    const format = 'yyyy-MM-DD HH:mm:ss'
-    return {
-      begTime: defaultBeginTime,
-      endTime: new Date(defaultEndTime),
-      format,
-      zhCn,
-      begTimeStr: moment(defaultBeginTime).format(format),
-      endTimeStr: moment(defaultEndTime).format(format)
-    }
-  },
-  props: {
-    formConfig: {
-      type: Object,
-      required: true
-    }
-  },
-  watch: {
-    'formConfig.value': {
-      handler([begTime, endTime]) {
-        if (!!begTime && begTime !== this.begTimeStr) {
-          this.begTimeStr = begTime
-          this.begTime = new Date(begTime)
-        }
-        if (!!endTime && endTime !== this.endTimeStr) {
-          this.endTimeStr = endTime
-          this.endTime = new Date(endTime)
-        }
-      },
-      immediate: true,
-      deep: true
-    }
-  },
-  methods: {
-    async changeData(key, value) {
-      this.$emit(FORM_CHANGE_EVENT_KEY, {
-        key,
-        value: moment(value).format(this.format)
-      })
-    }
-  }
+moment.locale('zh-cn')
+
+interface Props {
+  formConfig: any
 }
+
+interface Emit {
+  (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
+}
+
+const emit = defineEmits<Emit>()
+const props = defineProps<Props>()
+
+const format = 'yyyy-MM-DD HH:mm:ss'
+const defaultBeginTime = new Date()
+const defaultEndTime = moment(defaultBeginTime).add(10, 'year').toDate()
+
+const locale = ref(zhCn)
+const begModelTime = ref(defaultBeginTime)
+const endModelTime = ref(defaultEndTime)
+const begTimeStr = ref(moment(defaultBeginTime).format(format))
+const endTimeStr = ref(moment(defaultEndTime).format(format))
+
+const handleDatePickerChange = (key: string, value: string) => {
+  console.log(key, value)
+  emit(FORM_CHANGE_EVENT_KEY, { key, value })
+}
+
+const watchValue = computed(() => props.formConfig.value)
+
+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,
+    deep: true
+  }
+)
 </script>
 <style lang="scss" scoped>
 .custom-time-range {
diff --git a/web/src/materials/setters/widgets/QuestionTimeHour.vue b/web/src/materials/setters/widgets/QuestionTimeHour.vue
index b4f1053a..89049a51 100644
--- a/web/src/materials/setters/widgets/QuestionTimeHour.vue
+++ b/web/src/materials/setters/widgets/QuestionTimeHour.vue
@@ -1,74 +1,74 @@
 <template>
-  <el-time-picker
-    is-range
-    v-model="value"
-    range-separator="-"
-    start-placeholder="开始时间"
-    end-placeholder="结束时间"
-    placeholder="选择时间范围"
-    format="HH:mm:ss"
-    @change="onTimeChange"
-    popper-class="timeRange"
-  >
-  </el-time-picker>
+  <div>
+    <el-config-provider :locale="locale">
+      <el-time-picker
+        is-range
+        v-model="modelValue"
+        range-separator="-"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        placeholder="选择时间范围"
+        format="HH:mm:ss"
+        @change="handleTimePickerChange"
+        popper-class="timeRange"
+      >
+      </el-time-picker>
+    </el-config-provider>
+  </div>
 </template>
-<script>
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
 import moment from 'moment'
-// 引入中文
 import 'moment/locale/zh-cn'
-// 设置中文
-moment.locale('zh-cn')
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 
-export default {
-  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]
+moment.locale('zh-cn')
 
-          const ymd = '2023-01-01'
-          const time = []
-          time.push(`${ymd} ${answerBeginTime}`)
-          time.push(`${ymd} ${answerEndTime}`)
-          this.value = time
-        }
-      },
-      immediate: true,
-      deep: true
+interface Props {
+  formConfig: any
+}
+
+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
     }
   },
-  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
-      })
-    }
+  {
+    immediate: true,
+    deep: true
   }
-}
+)
 </script>
 <style lang="scss" scoped>
 .star-question-begAndEndHour {
diff --git a/web/src/materials/setters/widgets/RadioGroup.vue b/web/src/materials/setters/widgets/RadioGroup.vue
index d6481070..39c62cb5 100644
--- a/web/src/materials/setters/widgets/RadioGroup.vue
+++ b/web/src/materials/setters/widgets/RadioGroup.vue
@@ -1,5 +1,9 @@
 <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-tooltip v-if="item.tip" class="item right" effect="dark">
         <template #content>
@@ -11,60 +15,47 @@
     </el-radio>
   </el-radio-group>
 </template>
-<script>
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
 import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 
-export default {
-  name: 'RadioGroup',
-  computed: {
-    options() {
-      let options = []
-      if (Array.isArray(this.formConfig?.options)) {
-        options = this.formConfig?.options
-      }
-      return options.map((item) => {
-        return item
-      })
-    }
-  },
-  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,
-      deep: true
-    }
-  },
-  methods: {
-    changeData(value) {
-      const key = this.formConfig.key
-      this.$emit(FORM_CHANGE_EVENT_KEY, {
-        key,
-        value
-      })
-    }
-  }
+interface Props {
+  formConfig: any
 }
+
+interface Emit {
+  (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
+}
+
+const emit = defineEmits<Emit>()
+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
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
 </script>
 <style lang="scss" scoped>
 .customed-radio {
diff --git a/web/src/materials/setters/widgets/RadioSetter.vue b/web/src/materials/setters/widgets/RadioSetter.vue
index 934dbf35..c4c0a5a9 100644
--- a/web/src/materials/setters/widgets/RadioSetter.vue
+++ b/web/src/materials/setters/widgets/RadioSetter.vue
@@ -1,18 +1,13 @@
 <template>
   <el-radio-group
-    v-model="validValue"
-    @change="changeData"
+    v-model="modelValue"
+    @change="handleRadioGroupChange"
     class="radio-group"
     popper-class="option-list-width"
     :disabled="formConfig.disabled"
   >
     <el-radio v-for="item in options" :key="item.value" :value="item.value">
-      <el-tooltip
-        v-if="item.tip"
-        class="item right"
-        effect="dark"
-        :placement="setTipPosition(item)"
-      >
+      <el-tooltip v-if="item.tip" class="item right" effect="dark" placement="top">
         <template #content>
           <div v-html="item.tip"></div>
         </template>
@@ -31,66 +26,47 @@
     </el-radio>
   </el-radio-group>
 </template>
-<script>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
 import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
-const tipPosition = {
-  前置限制条件: 'top'
+
+interface Props {
+  formConfig: any
 }
 
-export default {
-  name: 'RadioSetter',
-  computed: {
-    options() {
-      let options = []
-      if (Array.isArray(this.formConfig?.options)) {
-        options = this.formConfig?.options
-      }
-      return options.map((item) => {
-        return item
-      })
-    }
-  },
-  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,
-      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'
-    }
-  }
+interface Emit {
+  (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
 }
+
+const emit = defineEmits<Emit>()
+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
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
 </script>
 <style lang="scss" scoped>
 .star-radio-wrapper {
diff --git a/web/src/materials/setters/widgets/RangeSetter.vue b/web/src/materials/setters/widgets/RangeSetter.vue
index eaa87896..352a2eb5 100644
--- a/web/src/materials/setters/widgets/RangeSetter.vue
+++ b/web/src/materials/setters/widgets/RangeSetter.vue
@@ -1,73 +1,81 @@
 <template>
   <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>
-    <el-input-number :modelValue="maxValue" @change="changeDataMax" :min="0" />
+    <el-input-number
+      :modelValue="maxModelValue"
+      @change="handleRangeChange('max', $event)"
+      :min="0"
+    />
   </div>
 </template>
-<script>
-import { ElMessage } from 'element-plus'
-import 'element-plus/theme-chalk/src/message.scss'
+<script setup lang="ts">
+import { computed } from 'vue'
 
+import { ElMessage } from 'element-plus'
 import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 
-export default {
-  name: 'RangeSetter',
-  props: {
-    formConfig: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    minValue() {
-      if (this.formConfig.key === 'textRange') {
-        return parseInt(this.formConfig?.value?.min?.value)
-      } else {
-        return this.formConfig?.value?.min?.value || 1
-      }
-    },
-    maxValue() {
-      if (this.formConfig.key === 'textRange') {
-        return parseInt(this.formConfig?.value?.max?.value)
-      } else {
-        return this.formConfig?.value?.max?.value || 1
-      }
-    }
-  },
-  methods: {
-    changeDataMin(value) {
-      const key = this.formConfig.key
-      if (value > this.formConfig.value.max.value) {
-        ElMessage({
-          type: 'info',
-          message: '最小值大于最大值，请重新输入！'
-        })
-      } else {
-        this.$emit(FORM_CHANGE_EVENT_KEY, {
-          key: key + '.min.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
-        })
-      }
-    }
+import 'element-plus/theme-chalk/src/message.scss'
+
+interface Props {
+  formConfig: any
+}
+
+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)
   }
+
+  return minValue || 1
+})
+
+const maxModelValue = computed(() => {
+  const key = props.formConfig.key
+  const maxValue = props.formConfig?.value?.max?.value
+
+  if (key === 'textRange') {
+    return parseInt(maxValue)
+  }
+
+  return maxValue || 1
+})
+
+const handleRangeChange = (eventType: 'max' | 'min', value: number) => {
+  const key = props.formConfig.key
+  const initMinValue = props.formConfig.value.min.value
+  const initMaxValue = props.formConfig.value.max.value
+
+  if (
+    (eventType === 'max' && value < initMinValue) ||
+    (eventType === 'min' && value > initMaxValue)
+  ) {
+    ElMessage({
+      type: 'info',
+      message:
+        eventType === 'min' ? '最小值大于最大值，请重新输入！' : '最大值小于最小值，请重新输入！'
+    })
+
+    return
+  }
+
+  emit(FORM_CHANGE_EVENT_KEY, {
+    key: `${key}.${eventType}.value`,
+    value
+  })
 }
 </script>
 <style lang="scss" scoped>
diff --git a/web/src/materials/setters/widgets/RichText.vue b/web/src/materials/setters/widgets/RichText.vue
index 959da520..80160930 100644
--- a/web/src/materials/setters/widgets/RichText.vue
+++ b/web/src/materials/setters/widgets/RichText.vue
@@ -1,44 +1,33 @@
 <template>
   <RichEditor
     :modelValue="formConfig.value"
-    @change="onChange"
+    @change="handleEditorValueChange('change', $event)"
     :staticToolBar="true"
-    @input="onInput"
+    @input="handleEditorValueChange('input', $event)"
   />
 </template>
 
-<script>
-import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
+<script setup lang="ts">
 import RichEditor from '@/common/Editor/RichEditor.vue'
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 
-export default {
-  name: 'RichText',
-  components: {
-    RichEditor
-  },
-  props: {
-    formConfig: {
-      type: Object,
-      default: () => ({})
-    }
-  }, // value 用于自定义 v-model
+interface Props {
+  formConfig: any
+}
 
-  methods: {
-    onChange(newHtml) {
-      this.$emit(FORM_CHANGE_EVENT_KEY, {
-        key: this.formConfig.key,
-        value: newHtml
-      })
-      this.$emit('change', newHtml)
-    },
-    onInput(newHtml) {
-      this.$emit(FORM_CHANGE_EVENT_KEY, {
-        key: this.formConfig.key,
-        value: newHtml
-      })
-      this.$emit('input', newHtml)
-    }
-  }
+interface Emit {
+  (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
+  (ev: 'change' | 'input', value: string): void
+}
+
+const emit = defineEmits<Emit>()
+const props = withDefaults(defineProps<Props>(), { formConfig: {} })
+
+const handleEditorValueChange = (eventType: 'change' | 'input', value: string) => {
+  const key = props.formConfig.key
+
+  emit(FORM_CHANGE_EVENT_KEY, { key, value })
+  emit(eventType, value)
 }
 </script>
 <style lang="scss" scoped>
diff --git a/web/src/materials/setters/widgets/SelectSetter.vue b/web/src/materials/setters/widgets/SelectSetter.vue
index b33d02f4..63fd00a5 100644
--- a/web/src/materials/setters/widgets/SelectSetter.vue
+++ b/web/src/materials/setters/widgets/SelectSetter.vue
@@ -1,11 +1,9 @@
 <template>
   <el-select
-    :placeholder="
-      ['matrixOptionsRely', 'optionOrigin'].includes(formConfig.key) ? '请选择' : formConfig.label
-    "
-    v-model="validValue"
+    :placeholder="placeholder"
+    v-model="modelValue"
     :empty-values="[null, undefined]"
-    @change="changeData"
+    @change="handleSelectChange"
     popper-class="option-list-width"
     :disabled="formConfig.disabled"
     :class="formConfig.contentClass"
@@ -19,64 +17,74 @@
     />
   </el-select>
 </template>
-<script>
+<script setup lang="ts">
+import { computed, watch, ref } from 'vue'
+
 import { cleanRichText } from '@/common/xss'
 import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
-export default {
-  name: 'SelectSetter',
-  data() {
-    return {
-      validValue: !this.formConfig.value && this.formConfig.value != 0 ? '' : this.formConfig.value
-    }
-  },
-  props: {
-    formConfig: {
-      type: Object,
-      required: true
-    },
-    moduleConfig: {
-      type: Object,
-      required: true
-    }
-  },
-  watch: {
-    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)
-        return item
-      })
-    }
-  },
-  methods: {
-    changeData(value) {
-      const { key, valueSetter } = this.formConfig
 
-      if (valueSetter && typeof valueSetter == 'function') {
-        let status = valueSetter(value, this.moduleConfig)
-        if (status) {
-          this.validValue = this.moduleConfig[key]
-          return
-        }
-      }
-      this.$emit(FORM_CHANGE_EVENT_KEY, {
-        key,
-        value
-      })
-    }
-  }
+interface Props {
+  formConfig: any
+  moduleConfig: any
 }
+
+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
+  }
+
+  return defaultValue
+})
+
+const options = computed(() => {
+  if (!Array.isArray(props.formConfig?.options)) {
+    return []
+  }
+
+  return props.formConfig?.options.map((item: any) => {
+    item.label = cleanRichText(item.label)
+    return item
+  })
+})
+
+const modelValue = ref(
+  !props.formConfig.value && props.formConfig.value != 0 ? '' : props.formConfig.value
+)
+
+const handleSelectChange = (value: string) => {
+  const { key, valueSetter } = props.formConfig
+
+  if (valueSetter && typeof valueSetter == 'function') {
+    let verification: boolean = valueSetter(value, props.moduleConfig)
+
+    if (!verification) {
+      return
+    }
+
+    modelValue.value = props.moduleConfig[key]
+  }
+
+  emit(FORM_CHANGE_EVENT_KEY, { key, value })
+}
+
+watch(
+  props.formConfig,
+  (newValue) => {
+    if (modelValue.value != newValue.value) {
+      modelValue.value = newValue.value
+    }
+  },
+  { deep: true }
+)
 </script>
 <style lang="scss" scoped>
 .option-list-width {
diff --git a/web/src/materials/setters/widgets/SliderSetter.vue b/web/src/materials/setters/widgets/SliderSetter.vue
index 07113b06..b9b11b29 100644
--- a/web/src/materials/setters/widgets/SliderSetter.vue
+++ b/web/src/materials/setters/widgets/SliderSetter.vue
@@ -2,40 +2,36 @@
   <el-form-item class="slider-wrap">
     <el-slider
       :modelValue="formConfig.value"
-      @input="changeData"
+      @input="handleSliderChange"
       :format-tooltip="formatTooltip"
     ></el-slider>
-    <!-- <span>{{ formConfig.value + '%'  }}</span> -->
   </el-form-item>
 </template>
-<script>
+<script setup lang="ts">
 import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
-export default {
-  name: 'SliderSetter',
-  props: {
-    formConfig: {
-      type: Object,
-      required: true
-    }
-  },
-  methods: {
-    formatTooltip(val) {
-      return val + '%'
-    },
-    changeData(value) {
-      const key = this.formConfig.key
-      this.$emit(FORM_CHANGE_EVENT_KEY, {
-        key,
-        value
-      })
-    }
-  }
+
+interface Props {
+  formConfig: any
+}
+
+interface Emit {
+  (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: number }): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emit>()
+
+const formatTooltip = (val: string) => val + '%'
+
+const handleSliderChange = (value: number) => {
+  const key = props.formConfig.key
+
+  emit(FORM_CHANGE_EVENT_KEY, { key, value })
 }
 </script>
 <style>
 .slider-wrap {
   flex: 1;
-  /* display: flex; */
   padding: 0 20px;
 }
 </style>