aida_front/src/views/HomeView/history111.vue

<template>
  <div class="history_page">
    <div class="page_content">
      <div class="page_content_body">
        <!-- <HeaderComponent></HeaderComponent> -->
        <div class="history_page_body flex">
          <!-- <div class="history_table_search">
            <div class="content_search_block generalModel_state">
              <div class="generalModel_state_item">
                <a-range-picker
                  class="range_picker"
                  v-model:value="rangePickerValue"
                  :placeholder="[$t('HistoryPage.StartDate'), $t('HistoryPage.EndDate')]"
                  valueFormat="YYYY-MM-DD"
                >
                  <template #suffixIcon>
                    <span class="icon iconfont range_picker_icon icon-rili"></span>
                  </template>
                </a-range-picker>
              </div>
              <div class="generalModel_state_item">
                <input
                  class="search_input"
                  :placeholder="$t('LibraryPage.inputContent1')"
                  v-model="searchCollectionName"
                  @keydown.enter="searchHistoryList()"
                />
              </div>
              <div class="generalModel_state_item">
                <el-cascader
                  :options="options"
                  filterable
                  v-model="value.labelValue"
                  :collapse-tags="true"
                  :show-all-levels="false"
                  :clearable="true"
                  :placeholder="$t('LibraryPage.Select')"
                  :max-collapse-tags="3"
                  :props="props"
                  :collapse-tags-tooltip="true"
                  ref="cascader"
                  popper-class="libraryPageCascader"
                  @visible-change="dropdownVisibleChange"
                >
                  <template #empty>
                    <div>
                      {{ $t('LibraryPage.Select') }}
                    </div>
                  </template>
                </el-cascader>
              </div>
              <div class="intersection">
                <div
                  :title="$t('LibraryPage.unionSet')"
                  @click="() => (intersection = 1)"
                  v-show="intersection == 0"
                  :class="['icon', 'iconfont', 'icon-bingji']"
                ></div>
                <div
                  :title="$t('LibraryPage.intersection')"
                  @click="() => (intersection = 0)"
                  v-show="intersection == 1"
                  :class="['icon', 'iconfont', 'icon-bingji1']"
                ></div>
              </div>
              <div
                class="gallery_btn"
                style="padding: 2rem; line-height: 1"
                @click="searchHistoryList('')"
              >
                <span class="icon iconfont icon-sousuo"></span>
              </div>
            </div>
          </div> -->
          <div class="history_table_search flex flex-justify-between">
            <div class="search_preset flex flex-1">
              <div
                class="preset_item started_btn"
                v-for="item in presetList"
                :class="{ active: currentPreset === item.value }"
                :key="item.value"
                @click="handleChangePreset(item.value)"
              >
                {{ t(item.label) }}
              </div>
            </div>
            <div class="search_input flex flex-align-center">
              <input
                class="search_input_inner flex-1"
                v-model="searchParam.text"
                :bordered="false"
                @keydown.enter="searchHistoryList"
                :placeholder="t('batchGeneration.Search')"
              />
              <search-outlined @click="searchHistoryList" />
            </div>
          </div>
          <div class="history_table_content flex-1" ref="historyTable">
            <a-config-provider :locale="tableLocale">
              <a-table
                row-class-name="history_table_row"
                :columns="columns"
                :data-source="collectionList"
                :scroll="{ y: historyTableHeight }"
                @change="changePage"
                :pagination="{
                  current: currentPage,
                  pageSize: pageSize,
                  total: total,
                  bordered: false,
                  showQuickJumper: true,
                  showSizeChanger: false
                }"
              >
                <template #bodyCell="{ column, text, record, index }">
                  <div class="operate_list" v-if="column?.Operations">
                    <div class="operate_item" @click="turnToDetail(record)">
                      {{ $t('HistoryPage.Detail') }}
                    </div>
                    <div class="operate_item" @click="renameCollection(record, index)">
                      {{ $t('LibraryPage.Rename') }}
                    </div>
                    <div class="operate_item" @click="retrieveHome(record)">
                      {{ $t('HistoryPage.Retrieve') }}
                    </div>
                    <div class="operate_item" @click="deleteGroup(record, index)">
                      {{ $t('HistoryPage.Delete') }}
                    </div>
                  </div>
                </template>
              </a-table>
            </a-config-provider>
          </div>
        </div>
      </div>
    </div>
    <HistoryDetail
      ref="historyDetail"
      :groupDetails="groupDetails"
      :collectionName="collectionName"
    ></HistoryDetail>
    <setLabel ref="setLabel"></setLabel>
    <!-- <RobotAssist></RobotAssist> -->
    <searchLabel ref="searchLabel" isHistory></searchLabel>
    <div class="history_loading" v-show="isShowMark">
      <a-spin size="large" />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, createVNode, computed, nextTick, provide } from 'vue'
// import HeaderComponent from "@/component/HomePage/Header.vue";
import HistoryDetail from '@/component/Detail/historyDetail/index.vue'
import { Https } from '@/tool/https'
import { formatTime } from '@/tool/util'
import { Modal, message } from 'ant-design-vue'
// import RobotAssist from "@/component/HomePage/RobotAssist.vue";
import { ExclamationCircleOutlined, SearchOutlined } from '@ant-design/icons-vue'
import { ElCascader } from 'element-plus'
import { useI18n } from 'vue-i18n'
import enUS from 'ant-design-vue/es/locale/en_US'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import { ConfigProvider } from 'ant-design-vue'
import setLabel from '@/component/LibraryPage/setLabel.vue'
import searchLabel from '@/component/LibraryPage/searchLabel.vue'
import { useStore } from 'vuex'

export default defineComponent({
  components: {
    // HeaderComponent,
    HistoryDetail,
    // RobotAssist,
    setLabel,
    ElCascader,
    searchLabel,
    SearchOutlined,
    ConfigProvider
  },
  setup() {
    const store = useStore()
    let rangePickerValue: any = ref([])

    let renameData: any = ref({}) //修改名字选中的数据
    let isShowMark: any = ref(false)
    
    // 根据store中的语言设置返回对应的ant-design-vue语言包
    const tableLocale = computed(() => {
      const language = store.state.UserHabit?.userDetail?.language
      return language === 'ENGLISH' ? enUS : zhCN
    })
    const columns: any = computed(() => {
      return [
        {
          title: useI18n().t('HistoryPage.CollectionsName'),
          align: 'center',
          ellipsis: true,
          width: 150,
          dataIndex: 'name',
          key: 'collectionName'
        },
        {
          title: useI18n().t('HistoryPage.UptateTime'),
          align: 'center',
          ellipsis: true,
          width: 150,
          dataIndex: 'updateDate',
          key: 'updateTime',
          customRender: (record: any) => {
            let time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
            return time
          }
        },
        {
          title: useI18n().t('HistoryPage.source'),
          align: 'center',
          ellipsis: true,
          width: 150,
          dataIndex: 'original',
          key: 'original',
          customRender: (record: any) => {
            let str = ''
            if (record.text == 1) {
              str = useI18n().t('newScaleImage.Original')
            } else {
              str = `@${record.record.originalAccountName}/${record.record.originalPortfolioName}`
            }
            // let time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
            return str
          }
        },
        {
          title: useI18n().t('HistoryPage.SketchCounts'),
          align: 'center',
          ellipsis: true,
          width: 120,
          dataIndex: 'sketchCount',
          key: 'sketchCounts'
        },
        {
          title: useI18n().t('HistoryPage.Operations'),
          key: 'operation',
          align: 'center',
          fixed: 'right',
          width: 180,
          // slots:{customRender:'action'}
          Operations: true
        }
      ]
    })
    let collectionList: any = ref([])
    let { t } = useI18n()
    const options: any = ref([])
    let value = ref({
      labelValue: [],
      editLabelValue: []
    })
    let props = {
      multiple: true,
      checkStrictly: true,
      emitPath: true,
      children: 'childList',
      value: 'id',
      label: 'classificationName'
    }
    let intersection = ref(1)
    let selectCode = ref('History')
    let type: any = {
      selectCode: selectCode,
      designType: ''
    }
    provide('type', type)
    return {
      store,
      rangePickerValue,
      columns,
      collectionList,
      renameData,
      t,
      options,
      value,
      props,
      intersection,
      selectCode,
      isShowMark,
      enUS,
      zhCN,
      tableLocale
    }
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      presetList: [
        { label: 'Header.All', value: 'all' },
        { label: 'newProjectg.series', value: 'series' },
        { label: 'newProjectg.single', value: 'single' },
        { label: 'Header.Product', value: 'product' },
        { label: 'Header.POSE_TRANSFER', value: 'video' }
      ],
      currentPreset: 'all',
      searchParam: {
        text: '',
        type: '',
        current: 1,
        pageSize: 10,
        total: 0
      },
      historyTableHeight: 0,
      newCollectionName: '',
      groupDetails: {}, //每个collection的详情
      collectionName: '', //选中的名字
      searchCollectionName: '',
      resizeObserver: null // ResizeObserver 实例
    }
  },
  mounted() {
    let historyTable: any = this.$refs.historyTable

    this.historyTableHeight = historyTable.clientHeight - 130

    // 创建 ResizeObserver 监听 historyTable 高度变化
    this.resizeObserver = new ResizeObserver(entries => {
      for (let entry of entries) {
        const newHeight = entry.contentRect.height - 130
        this.historyTableHeight = newHeight
      }
    })

    // 开始观察 historyTable 元素
    this.resizeObserver.observe(historyTable)

    this.getHistoryList()
    this.getClass()
  },
  beforeUnmount() {
    // 清理 ResizeObserver
    if (this.resizeObserver) {
      this.resizeObserver.disconnect()
      this.resizeObserver = null
    }
  },
  methods: {
    getClass() {
      let data = {
        classificationIdList: [],
        classificationName: '',
        createTime: '',
        deleteConfirm: '',
        id: '',
        libraryId: '',
        parentId: '',
        type: this.selectCode,
        updateTime: '',
        userId: ''
      }

      Https.axiosPost(Https.httpUrls.queryClassification, data)
        .then((rv: any) => {
          this.options = rv
          rv.forEach((rvItem: any, rvIndex: number) => {
            this.options[rvIndex].value = rvItem.id
            this.options[rvIndex].label = rvItem.classificationName
            rvItem.childList.forEach((childItem: any, index: number) => {
              this.options[rvIndex].childList[index].value = childItem.id
              this.options[rvIndex].childList[index].label = childItem.classificationName
            })
          })
        })
        .catch(res => {})
    },
    turnToDetail(record: any) {
      this.groupDetails = record.groupDetails

      let historyDetail: any = this.$refs.historyDetail
      this.collectionName = record.name
      historyDetail.changeDetailShow(record)
    },

    //改变页码
    changePage(e: any) {
      this.currentPage = e.current
      this.pageSize = e.pageSize
      this.getHistoryList()
    },

    //查询列表
    searchHistoryList() {
      this.currentPage = 1
      this.getHistoryList()
    },

    // 点击预设
    handleChangePreset(value) {
      this.currentPreset = value
    },

    getHistoryList() {
      this.isShowMark = true
      let startDate: any = this.rangePickerValue
        ? new Date(this.rangePickerValue[0]).getTime()
        : ''
      let endDate: any = this.rangePickerValue
        ? new Date(this.rangePickerValue[1]).getTime()
        : ''

      let labelArr: any = []
      this.value.labelValue.forEach((item: any) => {
        labelArr.push(item[item.length - 1])
      })
      let data = {
        classificationIdList: labelArr,
        page: this.currentPage,
        size: this.pageSize,
        collectionName: this.searchCollectionName,
        startDate: startDate,
        endDate: endDate,
        intersection: this.intersection
      }

      Https.axiosPost(Https.httpUrls.historyProject, data)
        .then(
          // Https.axiosPost( Https.httpUrls.queryUserGroup, data).then(
          (rv: any) => {
            if (this.currentPage > 1 && rv.content.length == 0) {
              this.currentPage = 1
              this.getHistoryList()
            } else {
              this.collectionList = rv.content.map(el => {
                const object = {
                  ...el,
                  sketchCount: el.userLikeGroupVO?.sketchCount,
                  groupDetails: el.userLikeGroupVO?.groupDetails
                }
                return object
              })
              this.total = rv.total
            }
            this.isShowMark = false
          }
        )
        .catch(res => {
          this.isShowMark = false
        })
    },

    //删除分组
    deleteGroup(record: any, index: number) {
      console.log('record', record)

      let deleteGroupFun = (id: any, index: number) => {
        let data = {
          userGroupId: id
        }
        Https.axiosPost(Https.httpUrls.deleteUserGroup, data).then((rv: any) => {
          message.success(this.t('HistoryPage.jsContent1'))
          this.collectionList.splice(index, 1)
          // let userGroupId: any = computed(() => {
          // 	return
          // });
          if (record.id == this.store.state.HomeStoreModule.userGroupId) {
            this.store.commit('deleteUserGroupId')
            this.store.commit('setLikeDesignCollectionList', [])
            this.store.commit('clearAllData')
            this.store.commit('clearAllCollection')
            this.store.commit('setAllBoardDataChoose', {})
            this.store.commit('clearShowSketchboard', {})
          }
        })
      }
      Modal.confirm({
        title: this.t('HistoryPage.jsContent2'),
        icon: createVNode(ExclamationCircleOutlined),
        okText: 'Yes',
        cancelText: 'No',
        centered: true,
        mask: false,
        onOk() {
          deleteGroupFun(record.id, index)
        }
      })
    },

    //修改名字
    renameCollection(record: any, index: number) {
      let searchLabel: any = this.$refs.searchLabel
      searchLabel.init(record, index)
    },

    retrieveHome(record: any) {
      // let num = true
      // if (record.original == 0) {
      //   num = false
      // }
      // this.$router.push({ name: 'homePage', params: { id: record.id, type: 'History' } })
      // this.store.commit('setChooseIsDesign', num)
      // router.push(`/home/tools?tools=toProduct&id=${childItem.id}`)

      if (record.process == 'SERIES_DESIGN' || record.process == 'SINGLE_DESIGN') {
        this.$router.push(`/home?history=${record?.id}`)
      } else {
        let processList = {
          toProduct: 'TO_PRODUCT_IMAGE',
          relight: 'RELIGHT',
          poseTransfer: 'POSE_TRANSFER',
          deReconstruction: 'DE_RECONSTRUCTION',
          patternMaking3D: 'THREE_D_PLATE_MAKING',
          canvasUpload: 'CANVAS'
        }
        let process = ''
        for (const key in processList) {
          if (processList[key] == record.process) {
            process = key
            break
          }
        }
        this.$router.push(`/home/tools?tools=${process}&id=${record.id}`)
      }
    },
    removeLabel() {
      let setLabel: any = this.$refs.setLabel
      let cascader: any = this.$refs.cascader
      cascader.togglePopperVisible()
      let event = new Event('click', { bubbles: true, cancelable: true })
      document.dispatchEvent(event)
      setLabel.init('add', this.options)
    },
    dropdownVisibleChange() {
      let element: any = this.$refs.cascader
      nextTick().then(() => {
        let cascader = document.getElementsByClassName('libraryPageCascader')[0]
        let cascaderChild = cascader
        let element: any = this.$refs.cascader
        if (cascader.children.length > 3) {
        } else {
          let button1: any = document.createElement('span')
          button1.classList.add('started_btn', 'cascader_btn1')
          let button2: any = document.createElement('span')
          button2.classList.add('started_btn', 'cascader_btn2')
          let divMax: any = document.createElement('div')
          divMax.classList.add('cascader_btn_max')
          button1.textContent = 'Edit'
          // button2.textContent = '删除'
          button1.addEventListener('click', this.removeLabel, false)
          divMax.appendChild(button1)
          // divMax.appendChild(button2)
          cascaderChild?.insertAdjacentElement('afterbegin', divMax)

          // cascader.addEventListener('click',this.cascaderClick)
        }
      })
      let el = element.contentRef?.getElementsByClassName(
        'el-cascader-menu__empty-text'
      )?.[0]
      if (el) {
        el.innerHTML = this.t('LibraryPage.NoLabel')
      }
    }
  }
})
</script>
<style lang="less" scoped>
.flex {
  display: flex;
}
.flex-1 {
  flex: 1;
}
.flex-justify-between {
  justify-content: space-between;
}
.flex-align-center {
  align-items: center;
}
.history_page {
  width: 100%;
  height: 100%;
  padding: 0 6rem;
  overflow: hidden;
  background-color: #f5f5f5;
  // min-width: 1440px;
  position: relative;
  .history_loading {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    left: 0;
    top: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-direction: column;
  }
  .page_content {
    position: relative;
    .el-cascader .el-input .icon-arrow-down {
      font-size: 2.4rem;
    }
    .page_content_body {
      position: absolute;
      width: 100%;
      height: 100%;
      box-sizing: border-box;

      .history_page_body {
        width: 100%;
        height: 100%;
        padding: 3rem 0;
        box-sizing: border-box;
        flex-direction: column;

        .history_header {
          font-size: 1.8rem;
          height: 6.3rem;
          line-height: 6.3rem;
          font-weight: 500;
          color: #333333;
        }

        // .history_table_search {
        //   display: flex;
        //   align-items: center;

        //   .ant-picker:hover,
        //   .ant-picker-focused {
        //     border-color: #d5d8df;
        //   }
        //   .content_search_block {
        //     display: flex;
        //     align-items: center;
        //     width: 140rem;

        //     .search_icon_block {
        //       width: 5.2rem;
        //       height: 2.8rem;
        //       line-height: 2.8rem;
        //       text-align: center;
        //       background: #343579;
        //       background-color: #39215b;
        //       cursor: pointer;
        //       border-radius: 2rem;
        //       margin-left: 3rem;
        //       .icon-sousuo {
        //         font-size: 1.6rem;
        //         color: #ffffff;
        //       }
        //     }
        //     .intersection {
        //       cursor: pointer;
        //       margin-right: 3rem;
        //       > div {
        //         font-size: 3rem;
        //         font-weight: 900;
        //       }
        //     }
        //   }
        // }
        .history_table_search {
          .search_preset {
            column-gap: 2rem;
            .preset_item {
              // cursor: pointer;
              // box-sizing: border-box;
              // height: 6rem;
              // line-height: 6rem;
              // padding: 0 5rem;
              border: 0.1rem solid #000;
              // border-radius: 5rem;
              color: #000;
              background-color: #fff;
              &.active {
                color: #fff;
                background-color: #000;
              }
            }
          }
          .search_input {
            background-color: #fff;
            border: 0.1rem solid #000;
            border-radius: 3rem;
            // column-gap: 3rem;
            padding-right: 1rem;
            .search_input_inner {
              border: none;
              height: 100%;
              padding-left: 3rem;
              border-radius: 3rem;
            }
            :deep(.ant-input) {
              border: none;
            }
          }
        }

        .history_table_content {
          margin-top: 2.6rem;
          width: 100%;
          // height: calc(100% - 13.7rem);
          // background: rgba(255, 255, 255, 0.6);
          background: #f5f5f5;
          padding-bottom: 3rem;

          :deep(.ant-table) {
            background: transparent;
          }

          .ant-table-body {
            overflow-y: auto !important;
            -ms-overflow-style: none;
            overflow: -moz-scrollbars-none;

            &::-webkit-scrollbar {
              width: 0 !important;
            }
          }

          :deep(.ant-table-thead > tr > th) {
            // background: #ffffff;
            background: transparent;
          }
          :deep(.ant-table-tbody > tr:hover) {
            background: #ededed;
          }
          :deep(.ant-table-tbody > tr > td) {
            border: none;
            background: transparent;
          }
          .ant-table-pagination-right {
            justify-content: center;
          }

          .ant-table-pagination-right {
            padding-right: 3.5rem;
          }

          :deep(.ant-table-placeholder) {
            &,
            .ant-table-cell {
              background-color: #f5f5f5;
            }
          }

          :deep(.ant-pagination-item) {
            background: none;
            border: none;
            a {
              color: rgba(0, 0, 0, 0.3);
            }
            &-active a {
              color: #000;
            }
            a:hover {
              color: #000;
            }
          }

          .operate_list {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 1rem;

            .operate_item {
              font-size: 1.4rem;
              font-family: Roboto;
              font-weight: 400;
              color: #007ee5;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}

.rename_modal_component {
  .collection_rename_content {
    padding: 2rem 9.2rem 3rem;

    .rename_form_content {
      .rename_form_input {
        width: 100%;
        height: 4.6rem;
        margin-top: 1rem;
        border: 0.1rem solid #b4bed7;
        padding-left: 2.1rem;
        line-height: 4.6rem;
        font-size: 1.8rem;
        box-sizing: border-box;

        &::placeholder {
          color: #a5b0c2;
        }
      }
    }

    .rename_submit_button {
      height: 4.8rem;
      line-height: 4.8rem;
      background: #343579;
      font-size: 2.4rem;
      font-weight: 500;
      color: #ffffff;
      width: 16rem;
      text-align: center;
      cursor: pointer;
      margin: 4.5rem auto 0;
    }
  }
}
</style>