refactor: Vue3 组合式 API 写法重构 (#165)

web/src/management/pages/create/CreatePage.vue

@@ -5,26 +5,15 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref } from 'vue'
 import TypeList from './components/TypeList.vue'
 import CreateForm from './components/CreateForm.vue'
 
-export default {
+const selectType = ref<string>('normal')
-  name: 'CreatePage',
+
-  components: {
+const onSelectTypeChange = (type: string) => {
-    TypeList,
+  selectType.value = type
-    CreateForm
-  },
-  data() {
-    return {
-      selectType: 'normal'
-    }
-  },
-  methods: {
-    onSelectTypeChange(selectType) {
-      this.selectType = selectType
-    }
-  }
 }
 </script>
 

web/src/management/pages/create/components/CreateForm.vue

@@ -35,7 +35,9 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref, reactive, computed, toRefs } from 'vue'
+import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import 'element-plus/theme-chalk/src/message.scss'
 
@@ -43,70 +45,67 @@ import { createSurvey } from '@/management/api/survey'
 
 import { SURVEY_TYPE_LIST } from '../types'
 
-export default {
+interface Props {
-  name: 'CreateForm',
+  selectType?: string
-  props: {
+}
-    selectType: {
-      type: String,
-      default: 'normal'
-    }
-  },
-  data() {
-    return {
-      rules: {
-        title: [{ required: true, message: '请输入问卷标题', trigger: 'blur' }]
-      },
-      canSubmit: true,
-      form: {
-        title: '问卷调研',
-        remark: '问卷调研'
-      }
-    }
-  },
-  computed: {
-    SURVEY_TYPE_LIST() {
-      return SURVEY_TYPE_LIST
-    },
-    title() {
-      return this.SURVEY_TYPE_LIST.find((item) => item.type === this.selectType)?.title
-    }
-  },
-  methods: {
-    checkForm(fn) {
-      this.$refs.ruleForm.validate((valid) => {
-        valid && typeof fn === 'function' && fn()
-      })
-    },
-    submit() {
-      if (!this.canSubmit) {
-        return
-      }
-      this.checkForm(async () => {
-        const { selectType } = this
-        if (!this.canSubmit) {
-          return
-        }
-        this.canSubmit = false
-        const res = await createSurvey({
-          surveyType: selectType,
-          ...this.form
-        })
-        if (res.code === 200 && res?.data?.id) {
-          const id = res.data.id
-          this.$router.push({
-            name: 'QuestionEditIndex',
-            params: {
-              id
-            }
-          })
-        } else {
-          ElMessage.error(res.errmsg || '创建失败')
-        }
 
-        this.canSubmit = true
+const props = withDefaults(defineProps<Props>(), {
-      })
+  selectType: 'normal'
-    }
+})
+
+const ruleForm = ref<any>(null)
+
+const state = reactive({
+  rules: {
+    title: [{ required: true, message: '请输入问卷标题', trigger: 'blur' }]
+  },
+  canSubmit: true,
+  form: {
+    title: '问卷调研',
+    remark: '问卷调研'
   }
+})
+const { rules, canSubmit, form } = toRefs(state)
+
+const title = computed(() => {
+  return SURVEY_TYPE_LIST.find((item) => item.type === props.selectType)?.title
+})
+
+const checkForm = (fn: Function) => {
+  ruleForm.value?.validate?.((valid: boolean) => {
+    valid && typeof fn === 'function' && fn()
+  })
+}
+
+const router = useRouter()
+
+const submit = () => {
+  if (!state.canSubmit) {
+    return
+  }
+  checkForm(async () => {
+    const { selectType } = props
+    if (!state.canSubmit) {
+      return
+    }
+    state.canSubmit = false
+    const res:any = await createSurvey({
+      surveyType: selectType,
+      ...state.form
+    })
+    if (res?.code === 200 && res?.data?.id) {
+      const id = res.data.id
+      router.push({
+        name: 'QuestionEditIndex',
+        params: {
+          id
+        }
+      })
+    } else {
+      ElMessage.error(res?.errmsg || '创建失败')
+    }
+    state.canSubmit = true
+  })
 }
 </script>
 

web/src/management/pages/create/components/NavHeader.vue

@@ -2,37 +2,36 @@
   <div :class="['nav-header', `${boxShadow ? 'box-shadow' : null}`]">
     <div class="left">
       <div class="logo">
-        <img class="logoImg" :src="img" alt @click="toHomePage" />
+        <img class="logoImg" :src="img" @click="toHomePage" />
       </div>
       <div class="return no-logo-return icon-fanhui" @click="onBack">返回</div>
     </div>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { useRouter } from 'vue-router'
-  props: {
+
-    boxShadow: {
+interface Props {
-      type: Boolean,
+  boxShadow?: boolean
-      default: true
+}
-    }
+
-  },
+withDefaults(defineProps<Props>(), {
-  name: 'NavHeader',
+  boxShadow: true
-  data() {
+})
-    return {
+
-      img: '/imgs/s-logo.webp'
+const img = '/imgs/s-logo.webp'
-    }
+
-  },
+const router = useRouter()
-  methods: {
+
-    toHomePage() {
+const onBack = () => {
-      this.$router.replace({
+  router.go(-1)
-        name: 'survey'
+}
-      })
+
-    },
+const toHomePage = () => {
-    onBack() {
+  router.push({
-      this.$router.go(-1)
+    name: 'Home'
-    }
+  })
-  }
 }
 </script>
 

web/src/management/pages/create/components/TypeList.vue

@@ -8,7 +8,7 @@
           v-for="item in renderData"
           class="list-item"
           :key="item.type"
-          @click="handleSelectType('selectType', item)"
+          @click="handleSelectType(item.type)"
         >
           <div class="selected-border" v-if="selectType === item.type" />
           <img class="img" :src="item.img" alt="类别图片" />
@@ -24,34 +24,27 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import NavHeader from './NavHeader.vue'
 
 import { SURVEY_TYPE_LIST } from '../types'
+import { computed } from 'vue'
 
-export default {
+interface Props {
-  name: 'LeftSide',
+  selectType?: string
-  components: {
-    NavHeader
-  },
-  props: {
-    selectType: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    renderData() {
-      return SURVEY_TYPE_LIST
-    }
-  },
-  methods: {
-    handleSelectType(key, value) {
-      const { type } = value
-      this.$emit('selectTypeChange', type)
-    }
-  }
 }
+
+withDefaults(defineProps<Props>(), {
+  selectType: ''
+})
+
+const emit = defineEmits(['selectTypeChange'])
+
+const handleSelectType = (selectType: string) => {
+  emit('selectTypeChange', selectType)
+}
+
+const renderData = computed(() => SURVEY_TYPE_LIST)
 </script>
 
 <style lang="scss" scoped>