flow_template 转setup

admin/src/components/flow/BasicSetting/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="setting-container">
         <el-form
-            ref="elForm"
+            ref="elFormRef"
             :model="formData"
             :rules="rules"
             label-width="100px"
@@ -50,21 +50,22 @@
     </div>
 </template>
 
-<script>
+<script lang="ts" setup>
+import { onMounted, ref, shallowRef } from 'vue'
+import type { FormInstance } from 'element-plus'
 import { useDictData } from '@/hooks/useDictOptions'
-export default {
+defineOptions({
-    name: 'BasicSetting',
+    name: 'BasicSetting'
-    components: {},
+})
-    props: ['tabName', 'conf'],
+const { dictData } = useDictData(['flow_group'])
-    data() {
+const props = defineProps(['tabName', 'conf'])
-        return {
+const formData = ref({
-            formData: {
     flowName: '',
     flowImg: '',
     flowGroup: undefined,
     flowRemark: undefined
-            },
+})
-            rules: {
+const rules = {
     flowName: [
         {
             required: true,
@@ -79,37 +80,28 @@ export default {
             trigger: 'change'
         }
     ]
-            },
-
-            dictData: {
-                flow_group: []
 }
+onMounted(() => {
+    if (typeof props.conf === 'object' && props.conf !== null) {
+        Object.assign(formData.value, props.conf)
     }
-    },
+})
-
+const elFormRef = shallowRef<FormInstance>()
-    created() {
+function getData() {
-        if (typeof this.conf === 'object' && this.conf !== null) {
-            Object.assign(this.formData, this.conf)
-        }
-        const { dictData } = useDictData(['flow_group'])
-        this.dictData = dictData
-    },
-    methods: {
-        // 给父级页面提供得获取本页数据得方法
-        getData() {
     return new Promise((resolve, reject) => {
-                this.$refs['elForm'].validate((valid) => {
+        elFormRef.value.validate((valid) => {
             if (!valid) {
                 reject({ target: this.tabName })
                 return
             }
             // this.formData.flowImg = this.activeIcon
-                    resolve({ formData: { ...this.formData }, target: this.tabName }) // TODO 提交表单
+            resolve({ formData: { ...formData.value }, target: props.tabName }) // TODO 提交表单
         })
     })
 }
-    }
+defineExpose({
-}
+    getData
+})
 </script>
 
 <style lang="scss" scoped>