DiKongGanZhiPingTai/src/views/demo/system/mediaLibrary/modal/MoveFileModal.vue

<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="移动文件" @ok="handleSubmit">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <span v-for="(f, index) in floders" :key="f.id" class="floderTitle">
          <span v-if="f.name != '全部文件'" style="margin-right: 10px"> / </span>
          <a-tooltip placement="top">
            <template #title>
              <span>{{ f.name }}</span>
            </template>
            <span class="flodersname" @click="getChildrenByProp(f, index)"> {{ f.name }}</span>
          </a-tooltip>
        </span>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'name'">
          <FolderOpenOutlined v-if="!record.objectKey" style="font-size: 20px" />
          <span
            v-if="!record.objectKey || (record.objectKey && record.objectKey.includes('jpeg'))"
            @click="lookRecord(record)"
            @mouseover="record.isHovered = true"
            @mouseout="record.isHovered = false"
            :style="{
              textDecoration: record.isHovered ? 'underline' : 'none',
              marginLeft: '5px',
            }"
          >
            {{ record.name }}
          </span>
        </template>
      </template>
    </BasicTable>
    <!-- <a-tree v-model:selectedKeys="selectedKeys" show-line :tree-data="treeData"> </a-tree> -->
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { FolderOutlined, FolderOpenOutlined } from '@ant-design/icons-vue';
  import { GetMediaFile, UpdatePicParentKey } from '@/api/demo/mediaLibrary';
  import type { TreeProps } from 'ant-design-vue';
  import { useMessage } from '@/hooks/web/useMessage';
  const { createMessage } = useMessage();

  const emit = defineEmits(['handleSuccess']);

  // // 上级文件夹的id
  const moveDataList: any = ref([]);
  const selectedKeys: any = ref<string[]>();
  const treeData: any = ref([
    {
      title: '全部文件',
      key: '0',
      children: [],
    },
  ]);
  function funGetMediaFile() {}

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false });
    moveDataList.value = data.records;
  });

  const floders = ref([
    {
      id: '0',
      name: '全部文件',
    },
  ]);
  const nowParentKey = ref('0');
  const [
    registerTable,
    { reload, getDataSource, getSelectRows, setSelectedRows, clearSelectedRowKeys },
  ] = useTable({
    api: GetMediaFile,
    rowKey: 'id',
    columns: [
      {
        title: '文件名称',
        dataIndex: 'name',
        align: 'left',
        width: 200,
      },
    ],
    rowSelection: {
      type: 'radio',
    },
    isTreeTable: false,
    striped: false,
    bordered: false,
    inset: false,
    useSearchForm: false,
    showIndexColumn: false,
    showTableSetting: false,
    beforeFetch: (data) => {
      // 接口请求前 参数处理
      let temp = {
        ...data,
        parentKey: nowParentKey.value,
      };
      return temp;
    },
    afterFetch: (res) => {
      let result: any = [];
      res.forEach((arr, index) => {
        if (!arr.objectKey) {
          result.push(arr);
        }
      });
      return result;
    },
  });
  // 目录跳跃
  function getChildrenByProp(f, index) {
    nowParentKey.value = f.id;
    floders.value = floders.value.splice(0, index + 1);
    clearSelectedRowKeys();
    reload();
  }
  // 查看-打开这个文件夹
  async function lookRecord(record) {
    if (!record.objectKey) {
      nowParentKey.value = record.id;
      floders.value.push({
        id: nowParentKey.value,
        name: record.name,
      });
      reload();
    }
  }

  // 提交
  async function handleSubmit() {
    try {
      let selectKeys = getSelectRows();
      moveDataList.value.forEach((movedata) => {
        UpdatePicParentKey({ id: movedata.id, ParentKey: selectKeys[0].id }).then((res) => {
          console.log(res);
          // return;
        });
      });

      // if (!ids.includes(key)) {
      //   let query = {
      //     moveIds: ids,
      //     key: key,
      //   };
      //   // 调用接口
      //   const data = await orgPosGroup(query);
      //   if (data) {
      //     setModalProps({ confirmLoading: true });
      //     closeModal();
      //     emit('handleSuccess');
      //     return createMessage.success('成功');
      //   } else {
      //     return createMessage.error('失败');
      //   }
      // } else {
      //   return createMessage.warn('目标目录不能包含选择目录');
      // }
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
</script>

<style lang="less" scoped>
  .floderTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    cursor: pointer;
  }
  ::v-deep .vben-basic-table-header__toolbar {
    display: flex !important;
    justify-content: flex-start !important;
  }
  .floderOtherButton {
    position: absolute;
    right: 0px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .flodersname {
    max-width: 120px;
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出显示省略号 */
  }
  ::v-deep .ant-table-row-expand-icon {
    display: none !important;
  }
  ::v-deep .ant-table-row-expand-icon-collapsed {
    display: none !important;
  }
</style>