feat: 原料库

src/api/all/generationWorkshop.ts

@@ -150,3 +150,23 @@ export const deleteShareWorksComments = (id: string, commentId: string, shareCod
     headers: { 'share-code': shareCode },
   });
 };
+
+// 原料库-分页
+export const getRawMaterialsPage = (params = {}) => {
+  return Http.get('/v1/raw-materials', params);
+};
+
+// 原料库-删除
+export const deleteRawMaterial = (id: string) => {
+  return Http.delete(`/v1/raw-materials/${id}`);
+};
+
+// 原料库-批量删除
+export const batchDeleteRawMaterials = (params = {}) => {
+  return Http.delete(`/v1/raw-materials/batch`, { data: params });
+};
+
+// 原料库-AI添加
+export const postRawMaterialsAI = (params = {}) => {
+  return Http.post('/v1/raw-materials/ai', params);
+};

src/utils/tools.ts

@@ -115,7 +115,7 @@ export function formatFileSize(bytes: number): string {
   if (bytes === 0) return '0 Bytes';
 
   const k = 1024;
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  const sizes = ['Bytes', 'kb', 'mB', 'gB', 'tB'];
   const i = Math.floor(Math.log(bytes) / Math.log(k));
 
   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];

src/views/material-center/components/raw-material/components/filter-block/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="common-filter-wrap">
+    <div class="filter-row">
+      <div class="filter-row-item">
+        <span class="label">文件名称</span>
+        <a-input
+          v-model="query.name"
+          class="!w-240px"
+          placeholder="请输入文件名称"
+          size="medium"
+          allow-clear
+          @change="handleSearch"
+        >
+          <template #prefix>
+            <icon-search />
+          </template>
+        </a-input>
+      </div>
+      <div class="filter-row-item">
+        <span class="label">序号</span>
+        <a-space size="medium">
+          <a-input
+            v-model="query.uid"
+            class="!w-160px"
+            placeholder="请输入序号"
+            size="medium"
+            allow-clear
+            @change="handleSearch"
+          >
+            <template #prefix>
+              <icon-search />
+            </template>
+          </a-input>
+        </a-space>
+      </div>
+      <!-- <div class="filter-row-item">
+        <span class="label">来源</span>
+        <CommonSelect
+          placeholder="请选择所属项目"
+          :options="CHECK_STATUS"
+          v-model="query.audit_status"
+          class="!w-160px"
+          :multiple="false"
+          @change="handleSearch"
+        />
+      </div> -->
+      <div class="filter-row-item">
+        <span class="label">上传时间</span>
+        <a-range-picker
+          v-model="created_at"
+          size="medium"
+          allow-clear
+          format="YYYY-MM-DD"
+          class="w-280px"
+          @change="onDateChange"
+        />
+      </div>
+      <div class="filter-row-item">
+        <a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
+          <template #icon>
+            <icon-search />
+          </template>
+          <template #default>搜索</template>
+        </a-button>
+        <a-button size="medium" @click="handleReset">
+          <template #icon>
+            <icon-refresh />
+          </template>
+          <template #default>重置</template>
+        </a-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineEmits, defineProps } from 'vue';
+// import CommonSelect from '@/components/common-select';
+
+const props = defineProps({
+  query: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emits = defineEmits('search', 'reset', 'update:query');
+
+const created_at = ref([]);
+
+const handleSearch = () => {
+  emits('update:query', props.query);
+  nextTick(() => {
+    emits('search');
+  });
+};
+
+const onDateChange = (value) => {
+  if (!value) {
+    props.query.created_at = [];
+    handleSearch();
+    return;
+  }
+
+  const [start, end] = value;
+  const FORMAT_DATE = 'YYYY-MM-DD HH:mm:ss';
+  props.query.created_at = [
+    dayjs(start).startOf('day').format(FORMAT_DATE),
+    dayjs(end).endOf('day').format(FORMAT_DATE),
+  ];
+
+  handleSearch();
+};
+
+
+const handleReset = () => {
+  created_at.value = [];
+  emits('reset');
+};
+
+</script>

src/views/material-center/components/raw-material/components/table/delete-file-modal.vue

@@ -0,0 +1,54 @@
+<template>
+  <a-modal v-model:visible="visible" title="删除文件" width="480px" @close="onClose">
+    <div class="flex items-center">
+      <img :src="icon1" width="20" height="20" class="mr-12px" />
+      <span>确认删除 {{ fileName }} 文件吗？</span>
+    </div>
+    <template #footer>
+      <a-button size="medium" @click="onClose">取消</a-button>
+      <a-button type="primary" class="ml-16px" status="danger" size="medium" @click="onDelete">确认删除</a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { deleteRawMaterial, batchDeleteRawMaterials } from '@/api/all/generationWorkshop';
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const update = inject('update');
+
+const visible = ref(false);
+const fileId = ref(null);
+const fileName = ref('');
+
+const isBatch = computed(() => Array.isArray(fileId.value));
+
+function onClose() {
+  visible.value = false;
+  fileId.value = null;
+  fileName.value = '';
+}
+
+const open = (record) => {
+  const { id = null, name = '' } = record;
+  fileId.value = id;
+  fileName.value = name;
+
+  visible.value = true;
+};
+
+async function onDelete() {
+  const _fn = isBatch.value ? batchDeleteRawMaterials : deleteRawMaterial;
+  const _params = isBatch.value ? { ids: fileId.value } : fileId.value;
+  const { code } = await _fn(_params);
+  if (code === 200) {
+    AMessage.success('删除成功');
+    isBatch.value ? emits('batchUpdate') : emits('update');
+
+    onClose();
+  }
+}
+
+defineExpose({ open });
+</script>

src/views/material-center/components/raw-material/components/table/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <a-table
+    ref="tableRef"
+    :data="dataSource"
+    row-key="id"
+    column-resizable
+    :pagination="false"
+    :scroll="{ x: '100%' }"
+    class="flex-1 manuscript-table w-100%"
+    bordered
+    :row-selection="rowSelection"
+    :selected-row-keys="selectedRowKeys"
+    @sorter-change="handleSorterChange"
+    @select="(selectedKeys, rowKeyValue, record) => emits('select', selectedKeys, rowKeyValue, record)"
+    @select-all="(check) => emits('selectAll', check)"
+  >
+    <template #empty>
+      <NoData text="暂无稿件" />
+    </template>
+    <template #columns>
+      <a-table-column
+        v-for="column in tableColumns"
+        :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 v-if="column.dataIndex === 'name'" #cell="{ record }">
+          <div class="flex items-center">
+            <HoverImagePreview :src="record.cover">
+              <a-image :width="64" :height="64" :src="record.cover" class="!rounded-8px mr-16px" fit="cover">
+                <template #error>
+                  <img :src="icon4" class="w-full h-full" />
+                </template>
+              </a-image>
+            </HoverImagePreview>
+            <div class="flex-1 flex flex-col overflow-hidden">
+              <TextOverTips :context="record.name" :line="1" class="cts mb-4px regular" />
+              <TextOverTips :context="`序号：${record.uid}`" :line="1" class="cts !color-#737478 regular" />
+            </div>
+          </div>
+        </template>
+        <template v-else-if="column.dataIndex === 'type'" #cell="{ record }">
+          {{ TABS_LIST.find((item) => item.value === record.type)?.label ?? '-' }}
+        </template>
+        <template v-else-if="column.dataIndex === 'size'" #cell="{ record }">
+          <span class="cts num">{{ formatFileSize(record.size) }}</span>
+        </template>
+        <template v-else-if="column.dataIndex === 'origin'" #cell="{ record }">
+          {{ ORIGIN_LIST.find((item) => item.value === record.origin)?.label ?? '-' }}
+        </template>
+        <template v-else-if="['uploader', 'last_modifier'].includes(column.dataIndex)" #cell="{ record }">
+          {{ record[column.dataIndex].name || record[column.dataIndex].mobile }}
+        </template>
+        <template #cell="{ record }" v-else-if="['created_at'].includes(column.dataIndex)">
+          <span class="cts num">{{ exactFormatTime(record[column.dataIndex]) }}</span>
+        </template>
+        <template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
+          <div class="flex items-center">
+            <img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" />
+            <a-button type="outline" size="mini" @click="onDownload(record)">下载</a-button>
+          </div>
+        </template>
+        <template v-else #cell="{ record }">
+          {{ formatTableField(column, record, true) }}
+        </template>
+      </a-table-column>
+    </template>
+  </a-table>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { formatTableField, exactFormatTime, formatFileSize, downloadByUrl } from '@/utils/tools';
+import { slsWithCatch } from '@/utils/stroage.ts';
+import { TABS_LIST, ORIGIN_LIST } from '../../constants';
+
+import TextOverTips from '@/components/text-over-tips';
+import ShareModal from '@/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal.vue';
+import HoverImagePreview from '@/components/hover-image-preview';
+
+import icon1 from '@/assets/img/media-account/icon-delete.png';
+import icon2 from '@/assets/img/creative-generation-workshop/icon-photo.png';
+import icon3 from '@/assets/img/creative-generation-workshop/icon-video.png';
+import icon4 from '@/assets/img/error-img.png';
+
+const emits = defineEmits(['sorterChange', 'delete', 'select', 'selectAll']);
+const router = useRouter();
+
+const props = defineProps({
+  dataSource: {
+    type: Array,
+    default: () => [],
+  },
+  tableColumns: {
+    type: Array,
+    default: () => [],
+  },
+  rowSelection: {
+    type: Array,
+    default: () => [],
+  },
+  selectedRowKeys: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const tableRef = ref(null);
+
+const handleSorterChange = (column, order) => {
+  emits('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
+};
+const onDelete = (item) => {
+  emits('delete', item);
+};
+const onDownload = (item) => {
+  downloadByUrl(item.file);
+};
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>

src/views/material-center/components/raw-material/components/table/style.scss

@@ -0,0 +1,16 @@
+.manuscript-table {
+  .cts {
+    color: var(--Text-1, #211f24);
+    font-family: $font-family-medium;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+    &.num {
+      font-family: $font-family-manrope-regular;
+    }
+    &.regular {
+      font-family: $font-family-regular;
+    }
+  }
+}

src/views/material-center/components/raw-material/constants.ts

@@ -0,0 +1,87 @@
+export enum RawMaterialType {
+  All = '',
+  Image = 0,
+  Video = 1,
+  Text = 2,
+}
+
+export const TABS_LIST = [
+  {
+    label: '全部',
+    value: RawMaterialType.All,
+  },
+  {
+    label: '图片',
+    value: RawMaterialType.Image,
+  },
+  {
+    label: '视频',
+    value: RawMaterialType.Video,
+  },
+  {
+    label: '文本',
+    value: RawMaterialType.Text,
+  },
+];
+
+export const ORIGIN_LIST = [
+  {
+    label: '本地上传',
+    value: 0,
+  },
+  {
+    label: 'AI生成',
+    value: 1,
+  },
+]
+
+export const INITIAL_QUERY = {
+  name: '',
+  uid: '',
+  type: RawMaterialType.All,
+  created_at: [],
+  sort_column: undefined,
+  sort_order: undefined,
+};
+
+export const TABLE_COLUMNS = [
+  {
+    title: '文件名称',
+    dataIndex: 'name',
+    width: 400,
+  },
+  {
+    title: '类型',
+    dataIndex: 'type',
+    width: 80,
+  },
+  {
+    title: '来源',
+    dataIndex: 'origin',
+    width: 120,
+  },
+  {
+    title: '大小',
+    dataIndex: 'size',
+    width: 120,
+  },
+  {
+    title: '上传时间',
+    dataIndex: 'created_at',
+    width: 180,
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '上传人员',
+    dataIndex: 'uploader',
+    width: 180,
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    width: 100,
+    fixed: 'right',
+  }
+]

src/views/material-center/components/raw-material/index.vue

@@ -1,10 +1,143 @@
 <script lang="tsx">
+import { provide } from 'vue';
+import { Tabs, TabPane } from 'ant-design-vue';
+import { TABS_LIST, RawMaterialType, INITIAL_QUERY, TABLE_COLUMNS } from './constants';
+import FilterBlock from './components/filter-block/index.vue';
+import RawMaterialTable from './components/table/index.vue';
+import DeleteRawMaterialModal from './components/table/delete-file-modal.vue';
+
+import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+import { getRawMaterialsPage } from '@/api/all/generationWorkshop';
+
 export default defineComponent({
   setup(_, { attrs, slots, expose }) {
+    const {
+      dataSource,
+      pageInfo,
+      rowSelection,
+      onPageChange,
+      onPageSizeChange,
+      selectedRowKeys,
+      selectedRows,
+      handleSelect,
+      handleSelectAll,
+      resetPageInfo,
+    } = useTableSelectionWithPagination({
+      onPageChange: () => {
+        getData();
+      },
+      onPageSizeChange: () => {
+        getData();
+      },
+    });
+
+    const deleteRawMaterialModalRef = ref(null);
+    const query = ref(cloneDeep(INITIAL_QUERY));
+    const handleSearch = () => {
+      getData();
+    };
+    const getData = async () => {
+      const { page, page_size } = pageInfo.value;
+      const { code, data } = await getRawMaterialsPage({
+        ...query.value,
+        page,
+        page_size,
+      });
+      if (code === 200) {
+        dataSource.value = data?.data ?? [];
+        pageInfo.value.total = data.total;
+      }
+    };
+    const reload = () => {
+      pageInfo.value.page = 1;
+      getData();
+    };
+    const handleReset = () => {
+      resetPageInfo();
+      query.value = cloneDeep(INITIAL_QUERY);
+      reload();
+    };
+    const handleSorterChange = (column, order) => {
+      query.value.sort_column = column;
+      query.value.sort_order = order;
+      reload();
+    };
+
+    const handleBatchDelete = () => {
+      const ids = selectedRows.value.map((item) => item.id);
+      const names = selectedRows.value.map((item) => `"${item.name || '-'}` + '"').join('，');
+
+      deleteRawMaterialModalRef.value?.open({ id: ids, name: names });
+    };
+
+    const handleDelete = (item) => {
+      const { id, name } = item;
+      deleteRawMaterialModalRef.value?.open({ id, name: `“${name}”` });
+    };
+
+    const handleTabClick = (key) => {
+      query.value.type = key;
+      reload();
+    };
+
+    const onBatchSuccess = () => {
+      selectedRows.value = [];
+      selectedRowKeys.value = [];
+      getData();
+    };
+
+    onMounted(() => {
+      getData();
+    });
 
     return () => (
       <div class="raw-material-wrap h-full flex flex-col">
-      原材料库
+        <div class="bg-white rounded-t-8px">
+          <Tabs v-model:activeKey={query.value.type} onTabClick={handleTabClick}>
+            {TABS_LIST.map((item) => (
+              <TabPane key={item.value} tab={item.label}>
+                {item.label}
+              </TabPane>
+            ))}
+          </Tabs>
+        </div>
+        <div class="filter-wrap bg-#fff rounded-b-8px  mb-16px">
+          <FilterBlock v-model:query={query.value} onSearch={handleSearch} onReset={handleReset} />
+        </div>
+        <div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
+          <div class="flex justify-end mb-12px">
+            <a-button type="outline" class="w-fit" size="medium" onClick={handleBatchDelete}>
+              批量删除
+            </a-button>
+          </div>
+
+          <RawMaterialTable
+            tableColumns={TABLE_COLUMNS}
+            rowSelection={rowSelection}
+            selectedRowKeys={selectedRowKeys.value}
+            dataSource={dataSource.value}
+            onSorterChange={handleSorterChange}
+            onDelete={handleDelete}
+            onSelect={handleSelect}
+            onSelectAll={handleSelectAll}
+          />
+          {pageInfo.value.total > 0 && (
+            <div class="pagination-row">
+              <a-pagination
+                total={pageInfo.value.total}
+                size="mini"
+                show-total
+                show-jumper
+                show-page-size
+                current={pageInfo.value.page}
+                pageSize={pageInfo.value.page_size}
+                onChange={onPageChange}
+                onPageSizeChange={onPageSizeChange}
+              />
+            </div>
+          )}
+        </div>
+        <DeleteRawMaterialModal ref={deleteRawMaterialModalRef} onBatchUpdate={onBatchSuccess} onUpdate={getData} />
       </div>
     );
   },

src/views/material-center/components/raw-material/style.scss

@@ -1,3 +1,37 @@
 .raw-material-wrap {
-    
+  :deep(.ant-tabs) {
-}
+    .ant-tabs-nav {
+      margin-bottom: 0;
+      padding: 0 24px;
+      .ant-tabs-nav-wrap {
+        height: 56px;
+        .ant-tabs-nav-list {
+          .ant-tabs-tab {
+            .ant-tabs-tab-btn {
+              color: var(--Text-2, #55585f);
+              font-family: $font-family-regular;
+              font-size: 16px;
+              font-style: normal;
+              font-weight: 400;
+              line-height: 24px;
+            }
+            &.ant-tabs-tab-active {
+              .ant-tabs-tab-btn {
+                color: var(--Brand-6, #6d4cfe);
+                font-weight: 500;
+                font-family: $font-family-medium;
+                text-shadow: none;
+              }
+            }
+          }
+          .ant-tabs-ink-bar {
+            background: #6D4CFE;
+          }
+        }
+      }
+    }
+    .ant-tabs-content-holder {
+      display: none;
+    }
+  }
+}

src/views/writer-material-center/components/raw-material/constants.ts

@@ -0,0 +1,26 @@
+export enum RawMaterialType {
+  All = '0',
+  Image = '0',
+  Video = '1',
+  Text = '2',
+}
+
+export const TABS_LIST = [
+  {
+    label: '全部',
+    value: RawMaterialType.All,
+  },
+  {
+    label: '图片',
+    value: RawMaterialType.Image,
+  },
+  {
+    label: '视频',
+    value: RawMaterialType.Video,
+  },
+  {
+    label: '文本',
+    value: RawMaterialType.Text,
+  },
+];
+

src/views/writer-material-center/components/raw-material/index.vue

@@ -1,10 +1,23 @@
 <script lang="tsx">
+import { Tabs, TabPane } from 'ant-design-vue';
+import { TABS_LIST, RawMaterialType } from './constants';
+
 export default defineComponent({
   setup(_, { attrs, slots, expose }) {
-
+    const rawMaterialType = ref(RawMaterialType.All);
     return () => (
       <div class="raw-material-wrap h-full flex flex-col">
-      原材料库
+        <div class="bg-white rounded-t-8px">
+          <Tabs
+            v-model:activeKey={rawMaterialType.value}
+          >
+            {TABS_LIST.map((item) => (
+              <TabPane key={item.value} tab={item.label}>
+                {item.label}
+              </TabPane>
+            ))}
+          </Tabs>
+        </div>
       </div>
     );
   },