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

)

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
+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
+)
 
-      this.$emit(FORM_CHANGE_EVENT_KEY, {
-        key,
-        value
-      })
+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 {

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 {

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>

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>

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 {