cloudfile-ui/src/components/historyList/index.vue

<template>
  <div>
    <el-dialog v-model="isOpen" append-to-body width="950" @close="closeOpen" class="tank">
      <template #header>
        <div class="my-header">
          <div class="title">历史版本列表 — {{ name }}</div>
        </div>
      </template>
      <div class="main-conts">
        <div
          class="main-cont-left"
          style="display: flex; flex-direction: column"
          v-if="treeData.length>0"
        >
          <div
            v-for="(item, index) in treeData"
            :key="index"
            class="list-item list-item-dot"
            :class="{
              'active-list-item list-item-dot-active': clickIndex == index,
            }"
            @click="clickList(index)"
          >
            <div>
              <span style="padding-left: 24px">{{ item.createTime }}</span>
            </div>
            <!-- 显示节点标签 -->
            <img :src="eyes" @click="previewFileClick(item)" class="eyes" />
          </div>
        </div>
        <div v-else style="text-align: center;">暂无历史版本记录</div>
      </div>

      <template #footer>
        <span class="dialog-footer" style="display: flex;align-items: center;justify-content: space-between;">
          <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="pageNum"
          v-model:limit="pageSize"
          @pagination="getList"
          style="width: 70%;"
        />
          <el-button @click="closeOpen" class="cancel-button">关闭</el-button>
        </span>
      </template>
    </el-dialog>
    <FileEdit :docId="docId" :copyRow="copyRow" :isEdit="false"></FileEdit>
  </div>
</template>
    <script setup>
import { nextTick, reactive, ref, toRaw, toRefs, watch } from "vue";
import FileEdit from "../../views/myfile/components/FileEdit.vue";
import { ElMessage } from "element-plus";
import fileImg from "@/assets/images/file-img.png";
import activeCircle from "@/assets/images/active-circle.png";
import morenCircle from "@/assets/images/moren-circle.png";
import { listVersion } from "@/api/biz/version";
import eyes from "@/assets/images/eyes.png";
import useUserStore from "@/store/modules/user";
import { defineEmits } from "vue";
const props = defineProps({
  openFile: {
    type: Boolean,
    default: false,
  },
  fileUserTreeData: {
    type: Object,
    default: () => {},
  },
  docId: {
    type: Number,
    default: 0,
  },
  historyTotal: {
    type: Number,
    default: 0,
  },
  name: {
    type: String,
    default: "",
  },
  copyRow: {
    type: Object,
    required: true,
  },
});
const opent = ref(true);
const total = ref(0);
watchEffect(() => {
  console.log('props.historyTotal', props.historyTotal)
  total.value=props.historyTotal
});

const pageNum=ref(1)
const pageSize=ref(10)
const defaultProps = {
  children: "",
  label: "createTime",
  value: "docId",
};
const isOpen = ref(props.openFile);
watch(
  () => props.openFile,
  (newValue) => {
    isOpen.value = newValue;
  }
);
// const treeData = reactive([]);
const treeData = ref([]);
watchEffect(() => {
  if(props.fileUserTreeData.length>0){
    treeData.value = props.fileUserTreeData.reverse();
  toRaw(treeData.value);
  console.log('treeData',treeData.value);
  }

});
const getList=async()=>{
  console.log('page', pageNum.value)
  try {
    const resHistory = await listVersion({ pageNum: pageNum.value, pageSize: pageSize.value, docId: props.docId });
    treeData.value = resHistory.rows;
    console.log('treeData.value', treeData.value);
    total.value = resHistory.total;
  } catch (error) {
    console.error(error);
  }
}
//树
const clickData = ref({});
const handleNodeClick = (data) => {
  clickData.value = data;
};
const clickIndex = ref("");
const emit = defineEmits(["changeMsgClose"]);
//点击预览
const previewFileClick = (item) => {
  emit("changeMsgClose", true, item);
  isOpen.value = false;
};
const clickList = (index) => {
  clickIndex.value = index;
};

const closeOpen = () => {
  console.log('first',  isOpen.value)
  isOpen.value = false;
  emit("changeMsgClose", false, "");
};
</script>
  <style lang="scss" scoped>
@import "@/assets/styles/tree-common.scss";
// .footer-main{
//   display: flex;
//   align-items: center;
// }
.main-conts {
  height: 348px;
  border: 1px solid #c1cce3;
  // display: flex;

  .main-cont-left,
  .main-cont-right {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
  .main-cont-right {
    border-left: 1px solid #c1cce3;
  }
}
.eyes {
  width: 22px;
  height: 22px;
  cursor: pointer;
}
.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  height: 46px;
  background: #fff;
}

.list-item-dot {
  position: relative;
}
.list-item-dot::before {
  content: "";
  background-image: url("@/assets/images/moren-circle.png");
  background-size: 14px;
  position: absolute;
  top: 50%;
  left: 33.5;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
}

.list-item:not(:first-child)::after {
  content: "";
  position: absolute;
  top: 1%;
  left: 1.7%;
  transform: translate(0, -50%);
  width: 1.5px;
  height: 60%;
  background-color: #c1cce3; /* 连线的颜色 */
}
.list-item-dot-active::before {
  background-image: url("@/assets/images/active-circle.png");
}

.active-list-item {
  background: #f5f7f9;
}
.cancel-button {
  background: #2e6bc8;
  color: #fff;
  border: none;
  width: 120px;
  height: 32px;
  z-index: 999;
}
.main-conts {
  border: none;
  // overflow: auto;
}
:deep(.pagination-container .el-pagination){
left:25px;
bottom: 36px;
}
</style>