Vue3 重构：REVIEW 表单构建

src/views/infra/build/index.vue

@@ -3,89 +3,71 @@
     <el-row>
     <el-row>
       <el-col>
       <el-col>
         <div class="mb-2 float-right">
         <div class="mb-2 float-right">
-          <el-button size="small" @click="setJson"> 导入JSON</el-button>
-          <el-button size="small" @click="setOption"> 导入Options</el-button>
-          <el-button size="small" type="primary" @click="showJson">生成JSON</el-button>
-          <el-button size="small" type="success" @click="showOption">生成Options</el-button>
+          <el-button size="small" type="primary" @click="showJson">生成 JSON</el-button>
+          <el-button size="small" type="success" @click="showOption">生成O ptions</el-button>
           <el-button size="small" type="danger" @click="showTemplate">生成组件</el-button>
           <el-button size="small" type="danger" @click="showTemplate">生成组件</el-button>
-          <!-- <el-button size="small" @click="changeLocale">中英切换</el-button> -->
         </div>
         </div>
       </el-col>
       </el-col>
+      <!-- 表单设计器 -->
       <el-col>
       <el-col>
         <fc-designer ref="designer" height="780px" />
         <fc-designer ref="designer" height="780px" />
       </el-col>
       </el-col>
     </el-row>
     </el-row>
-    <Dialog :title="dialogTitle" v-model="dialogVisible" maxHeight="600">
+  </ContentWrap>
+
+  <!-- 弹窗：表单预览 -->
+  <Dialog :title="dialogTitle" v-model="dialogVisible" max-height="600">
     <div ref="editor" v-if="dialogVisible">
     <div ref="editor" v-if="dialogVisible">
-        <XTextButton style="float: right" :title="t('common.copy')" @click="copy(formValue)" />
+      <el-button style="float: right" @click="copy(formData)">
+        {{ t('common.copy') }}
+      </el-button>
       <el-scrollbar height="580">
       <el-scrollbar height="580">
         <div v-highlight>
         <div v-highlight>
           <code class="hljs">
           <code class="hljs">
-              {{ formValue }}
+            {{ formData }}
           </code>
           </code>
         </div>
         </div>
       </el-scrollbar>
       </el-scrollbar>
     </div>
     </div>
-      <span style="color: red" v-if="err">输入内容格式有误!</span>
   </Dialog>
   </Dialog>
-  </ContentWrap>
 </template>
 </template>
 <script setup lang="ts" name="Build">
 <script setup lang="ts" name="Build">
 import formCreate from '@form-create/element-ui'
 import formCreate from '@form-create/element-ui'
 import { useClipboard } from '@vueuse/core'
 import { useClipboard } from '@vueuse/core'
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息
 
 
-const { t } = useI18n()
-const message = useMessage()
-
-const designer = ref()
-
-const dialogVisible = ref(false)
-const dialogTitle = ref('')
-const err = ref(false)
-const type = ref(-1)
-const formValue = ref('')
+const designer = ref() // 表单设计器
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formType = ref(-1) // 表单的类型：0 - 生成 JSON；1 - 生成 Options；2 - 生成组件
+const formData = ref('') // 表单数据
 
 
+/** 打开弹窗 */
 const openModel = (title: string) => {
 const openModel = (title: string) => {
   dialogVisible.value = true
   dialogVisible.value = true
   dialogTitle.value = title
   dialogTitle.value = title
 }
 }
 
 
-const setJson = () => {
-  openModel('导入JSON--未实现')
-}
-const setOption = () => {
-  openModel('导入Options--未实现')
-}
+/** 生成 JSON */
 const showJson = () => {
 const showJson = () => {
-  openModel('生成JSON')
-  type.value = 0
-  formValue.value = designer.value.getRule()
+  openModel('生成 JSON')
+  formType.value = 0
+  formData.value = designer.value.getRule()
 }
 }
+
+/** 生成 Options */
 const showOption = () => {
 const showOption = () => {
-  openModel('生成Options')
-  type.value = 1
-  formValue.value = designer.value.getOption()
+  openModel('生成 Options')
+  formType.value = 1
+  formData.value = designer.value.getOption()
 }
 }
+
+/** 生成组件 */
 const showTemplate = () => {
 const showTemplate = () => {
   openModel('生成组件')
   openModel('生成组件')
-  type.value = 2
-  formValue.value = makeTemplate()
-}
-// const changeLocale = () => {
-//   console.info('changeLocale')
-// }
-
-/** 复制 **/
-const copy = async (text: string) => {
-  const { copy, copied, isSupported } = useClipboard({ source: text })
-  if (!isSupported) {
-    message.error(t('common.copyError'))
-  } else {
-    await copy()
-    if (unref(copied)) {
-      message.success(t('common.copySuccess'))
-    }
-  }
+  formType.value = 2
+  formData.value = makeTemplate()
 }
 }
 
 
 const makeTemplate = () => {
 const makeTemplate = () => {
@@ -98,8 +80,8 @@ const makeTemplate = () => {
       :option="option"
       :option="option"
       @submit="onSubmit"
       @submit="onSubmit"
     ></form-create>
     ></form-create>
-</template>
-<script setup lang=ts>
+  </template>
+  <script setup lang=ts>
     import formCreate from "@form-create/element-ui";
     import formCreate from "@form-create/element-ui";
     const faps = ref(null)
     const faps = ref(null)
     const rule = ref('')
     const rule = ref('')
@@ -112,6 +94,19 @@ const makeTemplate = () => {
       //todo 提交表单
       //todo 提交表单
     }
     }
     init()
     init()
-<\/script>`
+  <\/script>`
+}
+
+/** 复制 **/
+const copy = async (text: string) => {
+  const { copy, copied, isSupported } = useClipboard({ source: text })
+  if (!isSupported) {
+    message.error(t('common.copyError'))
+  } else {
+    await copy()
+    if (unref(copied)) {
+      message.success(t('common.copySuccess'))
+    }
+  }
 }
 }
 </script>
 </script>