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/writer-material-center/components/finished-products/manuscript/check/components/content-card/index.vue
+++ b/src/views/writer-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 'swiper/css';
@ -98,15 +87,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?.();
@ -222,7 +203,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="请输入标题"
@ -232,7 +213,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">
            <Textarea
              v-model={props.modelValue.content}
              placeholder="请输入作品描述"
--- a/src/views/writer-material-center/components/finished-products/manuscript/check/components/content-card/style.scss
+++ b/src/views/writer-material-center/components/finished-products/manuscript/check/components/content-card/style.scss
@ -37,28 +37,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/writer-material-center/components/finished-products/manuscript/components/edit-form/img-box.vue
+++ b/src/views/writer-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/writer-material-center/components/finished-products/manuscript/components/edit-form/index.vue
+++ b/src/views/writer-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';
@ -192,15 +192,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 = () => {
@ -241,7 +233,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">
@ -318,7 +310,7 @@ 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={() => {
@ -333,7 +325,7 @@ export default {
          />
        </FormItem>

-        <FormItem label="作品描述" field="content">
+        <FormItem label="作品描述" name="content">
          <Textarea
            v-model={formData.value.content}
            onInput={onChange}
@ -356,7 +348,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/writer-material-center/components/finished-products/manuscript/components/upload-manuscript-modal/index.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/components/upload-manuscript-modal/index.vue
@ -1,6 +1,6 @@
 <script lang="jsx">
-import { Button, Modal } from 'ant-design-vue';
-import { Form, FormItem, Upload, Message as AMessage, Textarea } from '@arco-design/web-vue';
+import { Modal, Button, Form, FormItem } from 'ant-design-vue';
+import { Upload, Message as AMessage, Textarea } from '@arco-design/web-vue';
 import {
  getTemplateUrlWriter,
  postWorksByLinkWriter,
@ -95,15 +95,13 @@ export default {

    // 防抖提交
    const debouncedSubmit = debounce(async () => {
-      formRef.value?.validate(async (errors) => {
-        if (!errors) {
-          taskStatus.value = TASK_STATUS.LOADING;
-          const { link } = form.value;
-          const { code, data } = await postWorksByLinkWriter(writerCode.value, { 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 postWorksByLinkWriter(writerCode.value, { link });
+        if (code === 200) {
+          taskStatus.value = TASK_STATUS.SUCCESS;
+          works.value = data ? [data] : [];
        }
      });
    }, 300);
@ -189,7 +187,7 @@ export default {

    // 渲染链接上传表单
    const renderLinkForm = () => (
-      <FormItem label="链接地址" field="link" required>
+      <FormItem label="链接地址" name="link" required>
        <Textarea
          v-model={form.value.link}
          size="large"
@ -335,10 +333,7 @@ export default {
        maskClosable={false}
        unmount-on-close
        onCancel={onClose}
-        footer={!(isDefault.value && isLocal.value)}
-        v-slots={{
-          footer: () => renderFooterButtons(),
-        }}
+        footer={isDefault.value && isLocal.value ? null : renderFooterButtons()}
      >
        <Form ref={formRef} model={form.value} layout="horizontal" auto-label-width>
          {/* {isDefault.value && (