914 lines
27 KiB
Vue
914 lines
27 KiB
Vue
<template>
|
||
<div class="history_page">
|
||
<div class="page_content">
|
||
<div class="page_content_body">
|
||
<div class="history_page_body">
|
||
<TableSearchBar
|
||
ref="tableSearchBar"
|
||
:button-list="presetList"
|
||
:placeholder="t('batchGeneration.Search')"
|
||
@search="searchHistoryList"
|
||
/>
|
||
<div class="history_table_content" ref="historyTable" @click.stop>
|
||
<a-config-provider :locale="tableLocale">
|
||
<a-table
|
||
row-class-name="history_table_row"
|
||
:columns="columns"
|
||
:customRow="customTableRow"
|
||
:data-source="collectionList"
|
||
@change="changePage"
|
||
:pagination="{
|
||
current: currentPage,
|
||
pageSize: pageSize,
|
||
total: total,
|
||
bordered: false,
|
||
showQuickJumper: true,
|
||
showSizeChanger: false,
|
||
size: 'small'
|
||
}"
|
||
>
|
||
<template #bodyCell="{ column, text, record, index }">
|
||
<div class="update_name" v-if="column?.key === 'collectionName'">
|
||
<div v-if="updateName.selectIndex === index">
|
||
<input type="text" v-model="updateName.currentName">
|
||
</div>
|
||
<div v-show="updateName.selectIndex !== index">{{ record.name }}</div>
|
||
<i @click="setUpdateName(record.name,index)" v-show="updateName.selectIndex !== index" class="fi fi-rr-edit"></i>
|
||
<i @click="submitUpdateName" v-show="updateName.selectIndex === index" class="fi fi-sr-check-circle"></i>
|
||
</div>
|
||
<div class="operate_list" v-if="column?.Operations">
|
||
<div
|
||
class="operate_item"
|
||
:class="{
|
||
operate_item_hidden: !(
|
||
record.process === 'SERIES_DESIGN' ||
|
||
record.process === 'SINGLE_DESIGN'
|
||
)
|
||
}"
|
||
@click="turnToDetail(record)"
|
||
>
|
||
{{ $t('HistoryPage.Detail') }}
|
||
</div>
|
||
<div
|
||
class="operate_item"
|
||
:class="{
|
||
operate_item_hidden: !(
|
||
record.process === 'SERIES_DESIGN' ||
|
||
record.process === 'SINGLE_DESIGN'
|
||
)
|
||
}"
|
||
@click="renameCollection(record, index)"
|
||
>
|
||
{{ $t('HistoryPage.Edit') }}
|
||
</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> -->
|
||
<projectSetting ref="projectSetting" @getHistory="handleConfirmEdit"></projectSetting>
|
||
<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 TableSearchBar from '@/component/common/TableSearchBar.vue'
|
||
// import setLabel from '@/component/LibraryPage/setLabel.vue'
|
||
// import searchLabel from '@/component/LibraryPage/searchLabel.vue'
|
||
import projectSetting from '@/component/home/newProject/setting.vue'
|
||
import { useStore } from 'vuex'
|
||
import router from '@/router'
|
||
import MyEvent from '@/tool/myEvents'
|
||
|
||
export default defineComponent({
|
||
components: {
|
||
// HeaderComponent,
|
||
HistoryDetail,
|
||
// RobotAssist,
|
||
// setLabel,
|
||
ElCascader,
|
||
// searchLabel,
|
||
SearchOutlined,
|
||
ConfigProvider,
|
||
TableSearchBar,
|
||
projectSetting
|
||
},
|
||
setup() {
|
||
const store = useStore()
|
||
let rangePickerValue: any = ref([])
|
||
const projectSetting: any = ref(null)
|
||
let renameData: any = ref({}) //修改名字选中的数据
|
||
let isShowMark: any = ref(false)
|
||
const tableSearchBar: any = ref(null)
|
||
|
||
const currentProjectPath = computed(() => {
|
||
return store.state.Workspace.projectPath
|
||
})
|
||
|
||
// 根据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: 'left',
|
||
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: ''
|
||
}
|
||
const updateName = ref({
|
||
currentName:'',
|
||
selectIndex:-1,
|
||
})
|
||
const clearUpdateName = () => {
|
||
updateName.value.currentName = ''
|
||
updateName.value.selectIndex = -1
|
||
document.removeEventListener('click',clearUpdateName)
|
||
}
|
||
const setUpdateName = (name,index) => {
|
||
updateName.value.currentName = name
|
||
updateName.value.selectIndex = index
|
||
document.addEventListener('click',clearUpdateName)
|
||
}
|
||
const submitUpdateName = ()=>{
|
||
if(updateName.value.currentName === collectionList.value[updateName.value.selectIndex].name){
|
||
clearUpdateName()
|
||
return
|
||
}
|
||
if(updateName.value.selectIndex != -1){
|
||
if(!updateName.value.currentName)return message.info(t('HistoryPage.jsContent8'))
|
||
let data = {
|
||
id: collectionList.value[updateName.value.selectIndex].id, //library名字
|
||
name: updateName.value.currentName //history id
|
||
}
|
||
Https.axiosPost(Https.httpUrls.projectSaveOrUpdate, data)
|
||
.then(rv => {
|
||
collectionList.value[updateName.value.selectIndex].name = updateName.value.currentName
|
||
clearUpdateName()
|
||
})
|
||
.catch(res => {})
|
||
}
|
||
}
|
||
provide('type', type)
|
||
return {
|
||
store,
|
||
rangePickerValue,
|
||
columns,
|
||
collectionList,
|
||
renameData,
|
||
t,
|
||
options,
|
||
value,
|
||
props,
|
||
intersection,
|
||
selectCode,
|
||
isShowMark,
|
||
enUS,
|
||
zhCN,
|
||
tableLocale,
|
||
projectSetting,
|
||
tableSearchBar,
|
||
currentProjectPath,
|
||
updateName,
|
||
setUpdateName,
|
||
submitUpdateName,
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
currentPage: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
presetList: [
|
||
{ label: this.t('Header.All'), value: '' },
|
||
{ label: this.t('newProjectg.series'), value: 'SERIES_DESIGN' },
|
||
{ label: this.t('newProjectg.single'), value: 'SINGLE_DESIGN' },
|
||
{ label: this.t('Header.Product'), value: 'TO_PRODUCT_IMAGE' },
|
||
{ label: this.t('Header.POSE_TRANSFER'), value: 'POSE_TRANSFER' }
|
||
],
|
||
searchParam: {
|
||
text: '',
|
||
type: '',
|
||
current: 1,
|
||
pageSize: 10,
|
||
total: 0
|
||
},
|
||
historyTableHeight: 0,
|
||
newCollectionName: '',
|
||
groupDetails: {}, //每个collection的详情
|
||
collectionName: '', //选中的名字
|
||
searchCollectionName: '',
|
||
resizeObserver: null, // ResizeObserver 实例
|
||
resizeTimeout: null, // 防抖定时器
|
||
scrolled: true
|
||
}
|
||
},
|
||
async mounted() {
|
||
MyEvent.add('remChange', this.setPageSize)
|
||
this.setPageSize()
|
||
await this.getHistoryList()
|
||
this.$nextTick(() => {
|
||
this.calcScrollHeight()
|
||
this.setupResizeObserver()
|
||
})
|
||
this.getClass()
|
||
},
|
||
beforeUnmount() {
|
||
MyEvent.remove('remChange', this.setPageSize)
|
||
if (this.resizeObserver) {
|
||
this.resizeObserver.disconnect()
|
||
this.resizeObserver = null
|
||
}
|
||
},
|
||
methods: {
|
||
setPageSize(rem) {
|
||
const historyTable = this.$refs.historyTable
|
||
const height = historyTable.offsetHeight
|
||
const itemHeight = historyTable.getElementsByClassName("ant-table-thead")[0]?.offsetHeight || 54;
|
||
const size = Math.trunc((height - 60 - itemHeight) / itemHeight)
|
||
this.pageSize = Math.max(1, size)
|
||
if (rem) {
|
||
this.currentPage = 1
|
||
this.getHistoryList()
|
||
}
|
||
},
|
||
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(value: any) {
|
||
// console.log('value', value)
|
||
this.currentPage = 1
|
||
const process =
|
||
value.currentPreset === ''
|
||
? []
|
||
: value.currentPreset === 'TO_PRODUCT_IMAGE'
|
||
? ['TO_PRODUCT_IMAGE', 'RELIGHT']
|
||
: [value.currentPreset]
|
||
this.getHistoryList({
|
||
process,
|
||
projectName: value.searchText
|
||
})
|
||
},
|
||
|
||
async getHistoryList(param: object = {}) {
|
||
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,
|
||
...param
|
||
}
|
||
|
||
await 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
|
||
|
||
// 数据加载完成后重新计算滚动高度
|
||
this.$nextTick(() => {
|
||
this.calcScrollHeight()
|
||
})
|
||
}
|
||
)
|
||
.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.projectDetail,
|
||
{},
|
||
{ params: { projectId: id } }
|
||
).then((rv: any) => {
|
||
message.success(this.t('HistoryPage.jsContent1'))
|
||
this.collectionList.splice(index, 1)
|
||
this.getHistoryList()
|
||
|
||
// 对比 currentProjectPath 中携带的参数 id
|
||
const currentPath = this.currentProjectPath
|
||
if (currentPath) {
|
||
// 从路径中提取 id，路径格式为 /home/history/6784
|
||
const pathMatch = currentPath.match(/\/history\/(\d+)/)
|
||
if (pathMatch && pathMatch[1]) {
|
||
const currentPathId = pathMatch[1]
|
||
// 对比删除的 id 和当前路径中的 id
|
||
if (String(id) === String(currentPathId)) {
|
||
// 如果匹配，执行清理操作
|
||
this.store.commit('createProjectPath', '')
|
||
this.store.state.Workspace.cachedRoutes = []
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
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)
|
||
this.$refs.projectSetting.init(record, 'edit')
|
||
},
|
||
handleConfirmEdit({ data }) {
|
||
// router.push(`/home?history=${data.id}`)
|
||
// if(data.id)
|
||
if(data.id === this.store.state.Workspace.probjects.id){
|
||
this.store.commit('createProjectPath','')
|
||
}
|
||
// this.getHistoryList()
|
||
},
|
||
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}`)
|
||
|
||
this.store.state.Workspace.cachedRoutes = [];
|
||
this.store.commit('setProjectPath','')
|
||
if (record.process == 'SERIES_DESIGN' || record.process == 'SINGLE_DESIGN') {
|
||
this.$router.push(`/home/history/${record?.id}`)
|
||
// 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')
|
||
}
|
||
},
|
||
setupResizeObserver() {
|
||
// 清理之前的观察器
|
||
if (this.resizeObserver) {
|
||
this.resizeObserver.disconnect()
|
||
}
|
||
|
||
// 创建ResizeObserver来监听容器尺寸变化
|
||
this.resizeObserver = new ResizeObserver(entries => {
|
||
// 使用防抖来避免频繁调用
|
||
clearTimeout(this.resizeTimeout)
|
||
this.resizeTimeout = setTimeout(() => {
|
||
this.calcScrollHeight()
|
||
}, 100)
|
||
})
|
||
|
||
// 观察history_page容器
|
||
const historyPage = document.querySelector('.history_page')
|
||
if (historyPage) {
|
||
this.resizeObserver.observe(historyPage)
|
||
}
|
||
|
||
// 观察表格容器
|
||
const table = document.querySelector('.ant-table-wrapper')
|
||
if (table) {
|
||
this.resizeObserver.observe(table)
|
||
}
|
||
},
|
||
calcScrollHeight() {
|
||
// 表格可滚动距离=页面总高度-表格上方高度-表头高度-分页器高度
|
||
const historyPage = document.querySelector('.history_page')
|
||
const historyPageTop = historyPage?.offsetTop
|
||
const historyPageHeight = historyPage?.clientHeight
|
||
|
||
const table = document.querySelector('.ant-table-wrapper')
|
||
const tableTop = table?.offsetTop
|
||
const tableHeight = historyPageHeight - tableTop - 64
|
||
|
||
const tableHead = document.querySelector('.ant-table-thead')
|
||
const tableHeadHeight = tableHead?.clientHeight
|
||
|
||
// 计算表格内容区域的最大高度
|
||
const maxTableBodyHeight = tableHeight - tableHeadHeight
|
||
|
||
// 获取表格内容区域
|
||
const tableBody = document.querySelector('.ant-table-tbody')
|
||
if (tableBody) {
|
||
// 计算所有行的高度
|
||
const rows = tableBody.querySelectorAll('.ant-table-row')
|
||
let totalContentHeight = 0
|
||
|
||
rows.forEach(row => {
|
||
totalContentHeight += row.offsetHeight
|
||
})
|
||
|
||
if (totalContentHeight <= maxTableBodyHeight) {
|
||
this.scrolled = 'inherit'
|
||
} else {
|
||
this.scrolled = 'scroll'
|
||
}
|
||
this.historyTableHeight = maxTableBodyHeight + 'px'
|
||
} else {
|
||
// 如果表格内容还没渲染，先设置一个默认值
|
||
this.historyTableHeight = maxTableBodyHeight + 'px'
|
||
}
|
||
},
|
||
customTableRow(record: any) {
|
||
return {
|
||
onDblclick: () => {
|
||
if(this.updateName.selectIndex !== -1)return
|
||
this.retrieveHome(record)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
})
|
||
</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: #F9FAFA;
|
||
// 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 0;
|
||
box-sizing: border-box;
|
||
flex-direction: column;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.history_table_content {
|
||
margin-top: 2.6rem;
|
||
width: 100%;
|
||
background: #F9FAFA;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
// height: calc(100% - 4rem);
|
||
// padding-bottom: 3rem;
|
||
|
||
:deep(.ant-table-wrapper) {
|
||
height: 100%;
|
||
.ant-spin-nested-loading {
|
||
&,
|
||
.ant-spin-container {
|
||
height: 100%;
|
||
.ant-table {
|
||
flex: 1;
|
||
// .ant-table-container,
|
||
// .ant-table-content,
|
||
// table {
|
||
// height: 100%;
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.ant-spin-container) {
|
||
display: flex;
|
||
flex-direction: column;
|
||
.ant-table {
|
||
background: transparent;
|
||
// flex: 1;
|
||
}
|
||
}
|
||
|
||
.ant-table-body {
|
||
overflow-y: auto !important;
|
||
-ms-overflow-style: none;
|
||
overflow: -moz-scrollbars-none;
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 0 !important;
|
||
}
|
||
}
|
||
// :deep(.ant-table-content) {
|
||
// max-height: v-bind(historyTableHeight);
|
||
// overflow-y: v-bind(scrolled);
|
||
// }
|
||
|
||
:deep(.ant-table-thead > tr > th) {
|
||
// background: #ffffff;
|
||
background: transparent;
|
||
}
|
||
:deep(.ant-table-tbody > tr:hover) {
|
||
background: #ededed;
|
||
.update_name{
|
||
> .fi-rr-edit{
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
:deep(.ant-table-tbody > tr > td) {
|
||
border: none;
|
||
background: transparent;
|
||
}
|
||
.ant-table-pagination-right {
|
||
justify-content: center;
|
||
}
|
||
:deep(.ant-pagination-prev),
|
||
:deep(.ant-pagination-next),
|
||
:deep(.ant-pagination-jump-prev),
|
||
:deep(.ant-pagination-jump-next),
|
||
:deep(.ant-pagination-item) {
|
||
width: 4rem;
|
||
height: 4rem;
|
||
min-width: 4rem;
|
||
line-height: 4rem;
|
||
margin-right: 0.8rem;
|
||
}
|
||
:deep(.ant-pagination-options-quick-jumper) {
|
||
height: 4rem;
|
||
line-height: 4rem;
|
||
margin-left: 0.8rem;
|
||
font-size: 1.6rem;
|
||
> input {
|
||
width: 7rem;
|
||
height: 4rem;
|
||
font-size: 1.6rem;
|
||
}
|
||
}
|
||
.ant-table-pagination-right {
|
||
padding-right: 3.5rem;
|
||
}
|
||
|
||
:deep(.ant-table-placeholder) {
|
||
&,
|
||
.ant-table-cell {
|
||
background-color: #F9FAFA;
|
||
}
|
||
}
|
||
|
||
:deep(.ant-pagination-item) {
|
||
background: none;
|
||
border: none;
|
||
a {
|
||
color: rgba(0, 0, 0, 0.3);
|
||
}
|
||
&-active a {
|
||
color: #000;
|
||
}
|
||
a:hover {
|
||
color: #000;
|
||
}
|
||
}
|
||
.update_name{
|
||
display: flex;
|
||
align-items: center;
|
||
> div{
|
||
> input{
|
||
width: 12rem;
|
||
border-radius: .8rem;
|
||
padding-left: 1.5rem;
|
||
}
|
||
}
|
||
> i{
|
||
margin-left: 1.5rem;
|
||
cursor: pointer;
|
||
font-size: 2rem;
|
||
display: flex;
|
||
}
|
||
> .fi-rr-edit{
|
||
display: none;
|
||
}
|
||
}
|
||
.operate_list {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 1rem;
|
||
|
||
.operate_item {
|
||
font-size: 1.6rem;
|
||
font-family: Roboto;
|
||
font-weight: 400;
|
||
color: #007ee5;
|
||
cursor: pointer;
|
||
|
||
&.operate_item_hidden {
|
||
visibility: hidden;
|
||
pointer-events: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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>
|