feat: form组件替换

2025-09-03 16:28:19 +08:00
parent 64a5b41a4e
commit a29580ff1e
42 changed files with 394 additions and 453 deletions
--- a/src/views/material-center/components/finished-products/manuscript/check/components/content-card/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/check/components/content-card/index.vue
@ -1,20 +1,9 @@
 <script lang="jsx">
 import axios from 'axios';
 import { Swiper, SwiperSlide } from 'swiper/vue';
-import { Button } from 'ant-design-vue';
+import { Button, Form, FormItem } from 'ant-design-vue';
 import { IconLoading } from '@arco-design/web-vue/es/icon';
-import {
-  Image,
-  Form,
-  FormItem,
-  Input,
-  Textarea,
-  Tabs,
-  Upload,
-  TabPane,
-  Spin,
-  Message as AMessage,
-} from '@arco-design/web-vue';
+import { Image, Input, Textarea, Tabs, Upload, TabPane, Spin, Message as AMessage } from '@arco-design/web-vue';
 import TextOverTips from '@/components/text-over-tips';
 import HighlightTextarea from './highlight-textarea';

@ -99,15 +88,7 @@ export default {
      activeTab.value = key;
    };
    const validate = () => {
-      return new Promise((resolve, reject) => {
-        formRef.value?.validate((errors) => {
-          if (errors) {
-            reject();
-          } else {
-            resolve();
-          }
-        });
-      });
+      return formRef.value?.validate();
    };
    const reset = () => {
      formRef.value?.resetFields?.();
@ -223,7 +204,7 @@ export default {
    const renderTextForm = () => {
      return (
        <Form ref={formRef} model={props.modelValue} rules={FORM_RULES} layout="vertical" auto-label-width>
-          <FormItem label="标题" field="title" required>
+          <FormItem label="标题" name="title" required>
            <Input
              v-model={props.modelValue.title}
              placeholder="请输入标题"
@ -233,7 +214,7 @@ export default {
              disabled={isDisabled.value}
            />
          </FormItem>
-          <FormItem label="作品描述" field="content" class="flex-1 content-form-item">
+          <FormItem label="作品描述" name="content" class="flex-1 content-form-item">
            <HighlightTextarea
              v-model={props.modelValue.content}
              disabled={isDisabled.value}
--- a/src/views/material-center/components/finished-products/manuscript/check/components/content-card/style.scss
+++ b/src/views/material-center/components/finished-products/manuscript/check/components/content-card/style.scss
@ -38,28 +38,32 @@
        display: none;
      }
    }
-    :deep(.arco-form) {
+    :deep(.ant-form) {
      height: 100%;
      display: flex;
      flex-direction: column;
-      .arco-form-item {
+      .ant-form-item {
        margin-bottom: 24px;
-        .arco-form-item-label-col {
-          .arco-form-item-label {
+        .ant-form-item-label-col {
+          .ant-form-item-label {
            color: #939499;
          }
        }
      }
      .content-form-item {
        margin-bottom: 0;
-        display: flex;
-        flex-direction: column;
-        .arco-form-item-wrapper-col {
-          flex: 1;
-          .arco-form-item-content-wrapper,
-          .arco-form-item-content,
-          .arco-textarea-wrapper {
-            height: 100%;
+
+        .ant-row {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          .ant-form-item-control-input {
+            flex: 1;
+            .ant-form-item-control-input-content,
+            .ant-form-item-control-input-content,
+            .ant-textarea-wrapper {
+              height: 100%;
+            }
          }
        }
      }
--- a/src/views/material-center/components/finished-products/manuscript/components/edit-form/img-box.vue
+++ b/src/views/material-center/components/finished-products/manuscript/components/edit-form/img-box.vue
@ -1,5 +1,5 @@
 <template>
-  <a-form-item field="files">
+  <FormItem name="files">
    <template #label>
      <div class="flex items-center">
        <span class="cts !color-#211F24 mr-4px">图片</span>
@ -44,11 +44,12 @@
        </a-upload>
      </VueDraggable>
    </div>
-  </a-form-item>
+  </FormItem>
 </template>

 <script setup>
 import { VueDraggable } from 'vue-draggable-plus';
+import { FormItem} from 'ant-design-vue';

 const props = defineProps({
  files: {
--- a/src/views/material-center/components/finished-products/manuscript/components/edit-form/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/components/edit-form/index.vue
@ -1,7 +1,7 @@
 <script lang="jsx">
 import axios from 'axios';
-import { Button } from 'ant-design-vue';
-import { Form, FormItem, Input, Textarea, Upload, Message as AMessage } from '@arco-design/web-vue';
+import { Button, Form, FormItem } from 'ant-design-vue';
+import { Input, Textarea, Upload, Message as AMessage } from '@arco-design/web-vue';
 // import CommonSelect from '@/components/common-select';
 // import { VueDraggable } from 'vue-draggable-plus';
 import TextOverTips from '@/components/text-over-tips';
@ -190,15 +190,7 @@ export default {
    };

    const validate = () => {
-      return new Promise((resolve, reject) => {
-        formRef.value?.validate((errors) => {
-          if (errors) {
-            reject(formData.value);
-          } else {
-            resolve();
-          }
-        });
-      });
+      return formRef.value?.validate();
    };

    const resetForm = () => {
@ -239,7 +231,7 @@ export default {
      const isEnd = formData.value.videoInfo.uploadStatus === ENUM_UPLOAD_STATUS.END;
      return (
        <FormItem
-          field="files"
+          name="files"
          v-slots={{
            label: () => (
              <div class="flex items-center">
@ -316,10 +308,11 @@ export default {

    return () => (
      <Form ref={formRef} model={formData.value} rules={props.rules} layout="vertical" auto-label-width>
-        <FormItem label="标题" field="title" required>
+        <FormItem label="标题" name="title" required>
          <Input
            v-model={formData.value.title}
            onInput={() => {
+              console.log('onInput')
              onChange();
              emit('reValidate');
            }}
@ -331,7 +324,7 @@ export default {
          />
        </FormItem>

-        <FormItem label="作品描述" field="content">
+        <FormItem label="作品描述" name="content">
          <Textarea
            v-model={formData.value.content}
            onInput={onChange}
@ -353,7 +346,7 @@ export default {
          />
        )}

-        {/* <FormItem label="所属项目" field="project_ids">
+        {/* <FormItem label="所属项目" name="project_ids">
          <CommonSelect
            v-model={formData.value.project_ids}
            onChange={() => emit('change')}
--- a/src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/index.vue
@ -1,6 +1,6 @@
 <script lang="jsx">
-import { Button } from 'ant-design-vue';
-import { Table, TableColumn, Pagination, Tooltip, Modal } from '@arco-design/web-vue';
+import { Button, Modal } from 'ant-design-vue';
+import { Table, TableColumn, Pagination, Tooltip,  } from '@arco-design/web-vue';
 import CommonSelect from '@/components/common-select';
 import TextOverTips from '@/components/text-over-tips';
 import ShareModal from '@/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal';
@ -132,7 +132,7 @@ export default {
          onCancel={onClose}
          centered
          destroyOnClose
-          modalClass="share-manuscript-modal"
+          wrapClassName="share-manuscript-modal"
          v-slots={{
            footer: () => (
              <div class="flex justify-between w-full items-center">
--- a/src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal.vue
+++ b/src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal.vue
@ -1,6 +1,6 @@
 <script lang="jsx">
-import { Button, Modal } from 'ant-design-vue';
-import { Form, FormItem, Input, Message as AMessage } from '@arco-design/web-vue';
+import { Button, Modal, Form, FormItem } from 'ant-design-vue';
+import { Input, Message as AMessage } from '@arco-design/web-vue';
 import CommonSelect from '@/components/common-select';

 import { useClipboard } from '@vueuse/core';
@ -66,24 +66,22 @@ export default {
    };

    const onGenerateLink = () => {
-      formRef.value.validate().then(async (errors) => {
-        if (!errors) {
-          try {
-            loading.value = true;
-            const { code, data } = await postShareLinksGenerate(formData.value);
-            if (code === 200) {
-              onClose();
+      formRef.value.validate().then(async () => {
+        try {
+          loading.value = true;
+          const { code, data } = await postShareLinksGenerate(formData.value);
+          if (code === 200) {
+            onClose();

-              const url = router.resolve({
-                path: `/explore/list/${data.code}`,
-              }).href;
-              copy(generateFullUrl(url));
-              AMessage.success('链接已复制！');
-              emit('close');
-            }
-          } finally {
-            loading.value = false;
+            const url = router.resolve({
+              path: `/explore/list/${data.code}`,
+            }).href;
+            copy(generateFullUrl(url));
+            AMessage.success('链接已复制！');
+            emit('close');
          }
+        } finally {
+          loading.value = false;
        }
      });
    };
@ -115,8 +113,15 @@ export default {
          ),
        }}
      >
-        <Form ref={formRef} rules={rules} model={formData.value} auto-label-width>
-          <FormItem label="有效期" prop="days" row-class="!items-center">
+        <Form
+          ref={formRef}
+          rules={rules}
+          model={formData.value}
+          labelAlign="right"
+          labelCol={{ span: 4 }}
+          wrapperCol={{ span: 20 }}
+        >
+          <FormItem label="有效期" name="days" row-class="!items-center">
            <CommonSelect
              v-model={formData.value.days}
              options={OPTIONS}
@ -129,7 +134,7 @@ export default {
          </FormItem>
          <FormItem
            label="分享对象"
-            prop="receiver"
+            name="receiver"
            row-class="!items-center"
            v-slots={{
              label: () => (
--- a/src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/style.scss
+++ b/src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/style.scss
@ -18,7 +18,7 @@
      font-size: 14px;
    }
  }
-  .arco-modal-body {
+  .ant-modal-body {
    height: 464px;
    display: flex;
    flex-direction: column;
--- a/src/views/material-center/components/finished-products/manuscript/components/upload-manuscript-modal/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/components/upload-manuscript-modal/index.vue
@ -1,6 +1,6 @@
 <script lang="jsx">
-import { Modal, Button } from 'ant-design-vue';
-import { Form, FormItem, Input, RadioGroup, Radio, Upload, Message as AMessage, Textarea } from '@arco-design/web-vue';
+import { Modal, Button, Form, FormItem } from 'ant-design-vue';
+import { Input, RadioGroup, Radio, Upload, Message as AMessage, Textarea } from '@arco-design/web-vue';
 import { useClipboard } from '@vueuse/core';
 import { getWriterLinksGenerate, getTemplateUrl, postWorksByLink, postWorksByFile } from '@/api/all/generationWorkshop';
 import { generateFullUrl } from '@/utils/tools';
@ -109,15 +109,13 @@ export default {
        handleHandwriteSubmit();
        return;
      }
-      formRef.value?.validate(async (errors) => {
-        if (!errors) {
-          taskStatus.value = TASK_STATUS.LOADING;
-          const { link } = form.value;
-          const { code, data } = await postWorksByLink({ link });
-          if (code === 200) {
-            taskStatus.value = TASK_STATUS.SUCCESS;
-            works.value = data ? [data] : [];
-          }
+      formRef.value?.validate().then(async () => {
+        taskStatus.value = TASK_STATUS.LOADING;
+        const { link } = form.value;
+        const { code, data } = await postWorksByLink({ link });
+        if (code === 200) {
+          taskStatus.value = TASK_STATUS.SUCCESS;
+          works.value = data ? [data] : [];
        }
      });
    }, 300);
@ -212,7 +210,7 @@ export default {

    // 渲染链接上传表单
    const renderLinkForm = () => (
-      <FormItem label="链接地址" field="link" required>
+      <FormItem label="链接地址" name="link" required>
        <Textarea
          v-model={form.value.link}
          size="large"
@ -224,7 +222,7 @@ export default {

    // 渲染手写上传表单
    const renderHandwriteForm = () => (
-      <FormItem label="上传链接" field="writerLink">
+      <FormItem label="上传链接" name="writerLink">
        <Input v-model={form.value.writerLink} placeholder="请输入上传链接" disabled size="large" />
      </FormItem>
    );
@ -368,10 +366,7 @@ export default {
        destroyOnClose
        centered
        onCancel={onClose}
-        footer={!(isDefault.value && isLocal.value)}
-        v-slots={{
-          footer: () => renderFooterButtons(),
-        }}
+        footer={(isDefault.value && isLocal.value) ? null : renderFooterButtons()}
      >
        <Form
          ref={formRef}