feat: 分享内容稿件

src/components/common-select/index.vue

@@ -8,7 +8,7 @@
     :multiple="multiple"
     size="medium"
     :placeholder="placeholder"
-    allow-clear
+    :allow-clear="allClear"
     :max-tag-count="maxTagCount"
     @change="handleChange"
   >
@@ -42,6 +42,10 @@ const props = defineProps({
     type: Number,
     default: 3,
   },  
+  allClear: {
+    type: Boolean,
+    default: true,
+  }
 });
 
 const emits = defineEmits(['update:modelValue', 'change']);

src/views/creative-generation-workshop/manuscript/components/share-manuscript-modal/index.vue

@@ -12,6 +12,7 @@ import {
 } from '@arco-design/web-vue';
 import CommonSelect from '@/components/common-select';
 import TextOverTips from '@/components/text-over-tips';
+import ShareModal from './share-modal';
 
 import { INITIAL_FORM, TABLE_COLUMNS } from './constants';
 import { formatTableField, exactFormatTime } from '@/utils/tools';
@@ -46,6 +47,7 @@ export default {
     const visible = ref(false);
     const query = ref(cloneDeep(INITIAL_FORM));
     const tableRef = ref(null);
+    const shareModalRef = ref(null);
 
     const reset = () => {
       query.value = cloneDeep(INITIAL_FORM);
@@ -67,7 +69,8 @@ export default {
         pageInfo.value.total = data.total;
       }
     };
-    const handleSearch = () => {
+    const handleSearch = (value) => {
+      query.value.audit_status = value;
       reload();
     };
     const reload = () => {
@@ -113,7 +116,7 @@ export default {
     };
 
     const onShare = () => {
-      console.log('onShare');
+      shareModalRef.value?.open();
     };
     const handleSorterChange = (column, order) => {
       query.value.sort_column = column;
@@ -127,46 +130,60 @@ export default {
       open,
     });
     return () => (
+      <>
         <Modal
           v-model:visible={visible.value}
           title="分享内容稿件"
           width="920px"
           onClose={onClose}
+          unmount-on-close
           modal-class="share-manuscript-modal"
           v-slots={{
             footer: () => (
-            <>
+              <div class="flex justify-between w-full items-center">
+                <p class="cts color-#737478">
+                  已选择 <span class="cts color-#211F24 bold">{selectedRows.value.length}</span> 个
+                </p>
+                <div class="flex items-center">
                   <Button size="large" onClick={onClose}>
                     取消
                   </Button>
-              <Button type="primary" class="ml-16px" size="large" onClick={onShare}>
+                  <Button
+                    type="primary"
+                    class="ml-16px"
+                    size="large"
+                    onClick={onShare}
+                    disabled={!selectedRows.value.length}
+                  >
                     分享
                   </Button>
-            </>
+                </div>
+              </div>
             ),
           }}
         >
+          <div class="flex flex-col h-100%">
             <div class="filter-row-item mb-16px">
-          <span class="label mr-12px">审核状态</span>
+              <span class="cts text-#211f24 !text-14px mr-12px">审核状态</span>
               <CommonSelect
                 placeholder="全部"
                 options={CHECK_STATUS}
                 v-model={query.value.audit_status}
                 class="!w-200px"
                 multiple={false}
-            onchange={handleSearch}
+                onChange={handleSearch}
               />
             </div>
             <Table
-          ref={tableRef.value}
+              ref={tableRef}
               data={dataSource.value}
               row-key="id"
               column-resizable
               row-selection={rowSelection.value}
               selected-keys={selectedRowKeys.value}
               pagination={false}
-          scroll={{ x: '100%' }}
+              scroll={{ x: '100%', y: '100%' }}
-          class="flex-1 w-100% overflow-hidden"
+              class="overflow-hidden"
               bordered
               onSorterChange={handleSorterChange}
               onSelect={handleSelect}
@@ -222,14 +239,20 @@ export default {
                                   />
                                   <span
                                     class="cts"
-                                class={record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'}
+                                    class={
+                                      record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'
+                                    }
                                   >
                                     {record.type === EnumManuscriptType.Image ? '图文' : '视频'}
                                   </span>
                                 </div>
                               );
                             } else if (column.dataIndex === 'last_modified_at') {
-                          return exactFormatTime(record.last_modified_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
+                              return exactFormatTime(
+                                record.last_modified_at,
+                                'YYYY-MM-DD HH:mm:ss',
+                                'YYYY-MM-DD HH:mm:ss',
+                              );
                             } else {
                               return formatTableField(column, record, true);
                             }
@@ -256,7 +279,10 @@ export default {
                 />
               </div>
             )}
+          </div>
         </Modal>
+        <ShareModal ref={shareModalRef} onClose={onClose} />
+      </>
     );
   },
 };

src/views/creative-generation-workshop/manuscript/components/share-manuscript-modal/share-modal.vue

@@ -0,0 +1,115 @@
+<script lang="jsx">
+import { Modal, Form, FormItem, Input, Button, Message as AMessage } from '@arco-design/web-vue';
+import CommonSelect from '@/components/common-select';
+
+import { useClipboard } from '@vueuse/core';
+
+const INITIAL_FORM = {
+  link: '',
+  data: 1,
+  target: '',
+};
+const OPTIONS = [
+  {
+    id: 1,
+    name: '1天',
+  },
+  {
+    id: 2,
+    name: '3天',
+  },
+  {
+    id: 3,
+    name: '7天',
+  },
+  {
+    id: 4,
+    name: '15天',
+  },
+  {
+    id: 5,
+    name: '30天',
+  },
+  {
+    id: 6,
+    name: '60天',
+  },
+];
+
+export default {
+  emits: ['close'],
+  setup(props, { emit, expose }) {
+    const visible = ref(false);
+    const formRef = ref(null);
+    const formData = ref(cloneDeep(INITIAL_FORM));
+
+    const { copy } = useClipboard({ source: formData.value.link });
+
+    const reset = () => {
+      formData.value = cloneDeep(INITIAL_FORM);
+      formRef.value?.resetFields?.();
+      formRef.value?.clearValidate?.();
+    };
+
+    const onClose = () => {
+      visible.value = false;
+      reset();
+    };
+
+    const onCopy = () => {
+      onClose();
+      copy(formData.value.link);
+      AMessage.success('复制成功！');
+      emit('close');
+    };
+    const open = () => {
+      visible.value = true;
+    };
+
+    expose({
+      open,
+    });
+    return () => (
+      <Modal
+        v-model:visible={visible.value}
+        title="分享内容稿件"
+        width="480px"
+        onClose={onClose}
+        unmount-on-close
+        v-slots={{
+          footer: () => (
+            <>
+              <Button size="large" onClick={onClose}>
+                取消
+              </Button>
+              <Button type="primary" class="ml-16px" size="large" onClick={onCopy}>
+                复制链接
+              </Button>
+            </>
+          ),
+        }}
+      >
+        <Form ref={formRef} model={formData.value} auto-label-width>
+          <FormItem label="分享地址" prop="link">
+            <Input v-model={formData.value.link} size="large" placeholder="请输入分享地址" />
+          </FormItem>
+          <FormItem label="有效期" prop="data">
+            <CommonSelect
+              v-model={formData.value.data}
+              options={OPTIONS}
+              multiple={false}
+              placeholder="请选择有效期"
+              size="large"
+              class="!w-240px"
+              allClear={false}
+            />
+          </FormItem>
+          <FormItem label="分享对象" prop="target">
+            <Input v-model={formData.value.target} class="!w-240px" size="large" placeholder="请输入分享对象" />
+          </FormItem>
+        </Form>
+      </Modal>
+    );
+  },
+};
+</script>

src/views/creative-generation-workshop/manuscript/components/share-manuscript-modal/style.scss

@@ -1,17 +1,27 @@
 .share-manuscript-modal {
+  .cts {
+    font-family: $font-family-regular;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    &.bold {
+        font-family: $font-family-medium;
+    }
+  }
   .filter-row-item {
     .label {
       color: var(--Text-1, #211f24);
-      font-family: $font-family-regular;
       font-size: 14px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 22px;
     }
   }
   .arco-modal-body {
     height: 464px;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    .arco-scrollbar-track {
+      display: none !important;
+    }
   }
 }

src/views/creative-generation-workshop/manuscript/list/components/upload-manuscript-modal/index.vue

@@ -11,6 +11,7 @@ import {
   Message as AMessage,
   Textarea,
 } from '@arco-design/web-vue';
+import { useClipboard } from '@vueuse/core';
 
 import TextOverTips from '@/components/text-over-tips';
 import icon1 from '@/assets/img/media-account/icon-feedback-fail.png';