feat: 关联内容稿件

src/api/all/propertyMarketing.ts

@@ -365,4 +365,9 @@ export const getMediaAccountSyncStatus = (params = {}) => {
 // 媒体账号-移除同步状态
 export const deleteSyncStatus = (id: string) => {
   return Http.delete(`/v1/media-accounts/${id}/sync-status`);
-};
+};
+
+// 内容稿件-列表
+export const getWorksList = (params = {}) => {
+  return Http.get('/v1/works/list', params);
+};

src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepFour.vue

@@ -1,12 +1,264 @@
 <template>
-    <div>步骤4</div>
+  <div class="table-wrap flex h-448px">
-  </template>
+    <div class="left flex-1 pr-12px flex flex-col">
-  
+      <div class="flex items-center mb-16px">
-  <script setup>
+        <a-input
-  const props = defineProps({
+          v-model="query.uid"
-    formQuery: {
+          class="w-160px mr-16px"
-      type: Object,
+          placeholder="搜索序号"
-      default: () => {},
+          size="medium"
+          allow-clear
+          @change="handleSearch"
+        >
+          <template #prefix>
+            <icon-search />
+          </template>
+        </a-input>
+        <a-input
+          v-model="query.title"
+          class="w-220px mr-16px"
+          placeholder="搜索内容稿件标题"
+          size="medium"
+          allow-clear
+          @change="handleSearch"
+        >
+          <template #prefix>
+            <icon-search />
+          </template>
+        </a-input>
+
+        <a-select
+          v-model="query.uploader_id"
+          size="medium"
+          placeholder="选择上传人员"
+          class="w-160px"
+          allow-clear
+          @change="handleSearch"
+        >
+          <a-option v-for="(item, index) in uploaders" :key="index" :value="item.id" :label="item.name">
+            {{ item.name }}
+          </a-option>
+        </a-select>
+      </div>
+      <a-table
+        ref="tableRef"
+        :data="dataSource"
+        column-resizable
+        row-key="id"
+        :row-selection="rowSelection"
+        :pagination="false"
+        :scroll="{ x: '100%', y: '100%' }"
+        class="flex-1 overflow-hidden"
+        :selected-keys="selectedRowKeys"
+        bordered
+        @select="handleSelect"
+        @select-all="handleSelectAll"
+      >
+        <template #empty>
+          <NoData text="暂无账户" />
+        </template>
+        <template #columns>
+          <a-table-column
+            v-for="column in TABLE_COLUMNS"
+            :key="column.dataIndex"
+            :data-index="column.dataIndex"
+            :fixed="column.fixed"
+            :width="column.width"
+            :min-width="column.minWidth"
+            :sortable="column.sortable"
+            :align="column.align"
+            ellipsis
+            tooltip
+          >
+            <template #title>
+              <div class="flex items-center">
+                <span class="cts mr-4px">{{ column.title }}</span>
+                <a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
+                  <icon-question-circle class="tooltip-icon color-#737478" size="16" />
+                </a-tooltip>
+              </div>
+            </template>
+
+            <template #cell="{ record }">
+              <template v-if="column.dataIndex === 'created_at'">
+                {{ exactFormatTime(record.created_at) }}
+              </template>
+              <template v-else>
+                {{ formatTableField(column, record, true) }}
+              </template>
+            </template>
+          </a-table-column>
+        </template>
+      </a-table>
+    </div>
+    <div class="right w-320px px-12px flex flex-col">
+      <div class="flex justify-between">
+        <p class="mb-16px s1">{{ `已选择（${selectedRows?.length ?? 0}）` }}</p>
+        <a-button type="text" @click="onClearSelect" v-if="selectedRows.length">清空</a-button>
+      </div>
+      <div class="flex-1 overflow-y-auto overflow-x-hidden">
+        <template v-if="selectedRows?.length">
+          <div class="tag-item mb-8px" v-for="item in selectedRows" :key="item.id">
+            <a-tooltip :content="item.name">
+              <p class="name mr-4px">{{ item.name || '-' }}</p>
+            </a-tooltip>
+            <icon-close size="12" class="color-#3C4043 cursor-pointer flex-shrink-0" @click="onDelete(item)" />
+          </div>
+        </template>
+        <NoData v-else text="暂无账户" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { formatTableField, exactFormatTime } from '@/utils/tools';
+
+import { getPlacementAccountOperators, getWorksList } from '@/api/all/propertyMarketing';
+import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+
+const TABLE_COLUMNS = [
+  {
+    title: '序号',
+    dataIndex: 'uid',
+    width: 80,
+  },
+  {
+    title: '内容稿件标题',
+    dataIndex: 'title',
+  },
+  {
+    title: '上传时间',
+    dataIndex: 'created_at',
+    width: 120,
+  },
+  {
+    title: '上传人员',
+    dataIndex: 'uploader.name',
+    width: 120,
+  },
+];
+const emit = defineEmits(['update:formQuery']);
+
+const props = defineProps({
+  formQuery: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const { dataSource, selectedRowKeys, selectedRows, rowSelection, handleSelect, handleSelectAll } =
+  useTableSelectionWithPagination({
+    onSelectChange: () => {
+      updateFormQuery();
     },
   });
-  </script>
+
+const query = ref({
+  uid: '',
+  uploader_id: '',
+  title: '',
+});
+const uploaders = ref([]);
+const allData = ref([]);
+
+const updateFormQuery = () => {
+  emit('update:formQuery', {
+    ...props.formQuery,
+    work_ids: selectedRowKeys.value,
+  });
+};
+const handleSearch = () => {
+  const { uid, title, uploader_id } = query.value;
+  dataSource.value = allData.value.filter((item) => {
+    const uinMatch = uid === '' ? true : item.uid.includes(uid);
+    const titleMatch = title === '' ? true : item.title === title;
+    const operatorIdMatch = uploader_id === '' ? true : item.uploader?.id === uploader_id;
+    return uinMatch && titleMatch && operatorIdMatch;
+  });
+};
+
+// const getOperators = async () => {
+//   const { code, data } = await getPlacementAccountOperators();
+//   if (code === 200) {
+//     uploaders.value = data;
+//   }
+// };
+const getTableData = async () => {
+  const { code, data } = await getWorksList();
+  if (code === 200) {
+    allData.value = data ?? [];
+    dataSource.value = data ?? [];
+    uploaders.value = data.map( v => ({
+      id: v.uploader?.id,
+      name: v.uploader?.name,
+    }))
+    initSelect();
+  }
+};
+const initSelect = () => {
+  if (props.formQuery.work_ids?.length) {
+    selectedRowKeys.value = props.formQuery.work_ids;
+    selectedRows.value = dataSource.value.filter((v) => selectedRowKeys.value.includes(v.id));
+  }
+};
+
+const onClearSelect = () => {
+  selectedRowKeys.value = [];
+  selectedRows.value = [];
+  updateFormQuery();
+};
+
+const onDelete = (item) => {
+  const { id } = item;
+  selectedRowKeys.value = selectedRowKeys.value.filter((v) => v !== id);
+  selectedRows.value = selectedRows.value.filter((v) => v.id !== id);
+  updateFormQuery();
+};
+
+onMounted(() => {
+  // getOperators();
+  getTableData();
+});
+</script>
+
+<style lang="scss" scoped>
+.table-wrap {
+  .s1 {
+    color: var(--Text-2, #3c4043);
+    font-family: font-family-regular;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+  }
+  .left {
+    border-right: 1px solid var(--Border-2, #e6e6e8);
+    :deep(.arco-table) {
+    }
+  }
+  .right {
+    .tag-item {
+      max-width: 100%;
+      width: fit-content;
+      overflow: hidden;
+      display: flex;
+      height: 24px;
+      padding: 0px 8px;
+      align-items: center;
+      border-radius: 2px;
+      background: var(--BG-200, #f2f3f5);
+      .name {
+        color: var(--Text-2, #3c4043);
+        font-family: font-family-regular;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px; /* 157.143% */
+        flex: 1;
+        @include ellipsis;
+      }
+    }
+  }
+}
+</style>

src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepThree.vue

@@ -58,7 +58,7 @@
         @select-all="handleSelectAll"
       >
         <template #empty>
-          <NoData />
+          <NoData text="暂无账户"/>
         </template>
         <template #columns>
           <a-table-column
@@ -108,7 +108,7 @@
             <icon-close size="12" class="color-#3C4043 cursor-pointer flex-shrink-0" @click="onDelete(item)" />
           </div>
         </template>
-        <NoData v-else text="暂无账号" />
+        <NoData v-else text="暂无账户" />
       </div>
     </div>
   </div>

src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepTwo.vue

@@ -58,7 +58,7 @@
         @select-all="handleSelectAll"
       >
         <template #empty>
-          <NoData />
+          <NoData text="暂无账号"/>
         </template>
         <template #columns>
           <a-table-column