This commit is contained in:
X1627315083
2023-12-15 16:05:53 +08:00
parent fc4403c6ca
commit 1e52104b89
95 changed files with 453 additions and 1271 deletions

View File

@@ -1,437 +1,492 @@
<template>
<div class="trial_page">
<div class="page_content">
<img
class="page_content_bg"
src="@/assets/images/homePage/bg.png"
/>
<div class="page_content_body">
<HeaderComponent></HeaderComponent>
<div class="trial_page_body">
<div class="trial_page">
<div class="page_content">
<img
class="page_content_bg"
src="@/assets/images/homePage/bg.png"
/>
<div class="page_content_body">
<HeaderComponent></HeaderComponent>
<div class="trial_page_body">
<div class="trial_table_search">
<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 class="trial_state">
<div class="trial_current" @click="setState">
{{currentState.name}}
<div
:class="['icon', 'iconfont', 'icon-xiala']"
@click.stop=""
></div>
</div>
<div class="header_user_content" :class="{active:currentState.state}">
<!-- <span class="icon iconfont icon-yuyan"></span> -->
<div class="username" v-for="item,index in state" :key="item" @click.stop="setStateItem(item)">{{ item.name }}</div>
</div>
</div>
<div class="content_search_block">
<input
class="search_input"
:placeholder="$t('HistoryPage.inputContent1')"
v-model="searchCollectionName"
@keydown.enter="searchHistoryList()"
/>
<div
class="search_icon_block"
@click="searchHistoryList()"
>
<span class="icon iconfont icon-sousuo"></span>
</div>
</div>
</div>
<div class="trial_table_search">
<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 class="trial_state">
<div>all</div>
<div class="header_user_content marLeft2">
<!-- <span class="icon iconfont icon-yuyan"></span> -->
<span class="username">123123</span>
<div
:class="[
'icon',
'iconfont',
'icon-xiala',
]"
@click.stop=""
></div>
</div>
</div>
<div class="content_search_block">
<input class="search_input" :placeholder="$t('HistoryPage.inputContent1')" v-model="searchCollectionName" @keydown.enter="searchHistoryList()">
<div class="search_icon_block" @click="searchHistoryList()"><span class="icon iconfont icon-sousuo"></span></div>
</div>
</div>
<div class="trial_table_content" ref="historyTable">
<a-table :columns="columns" :data-source="collectionList" :scroll="{ y: historyTableHeight }" @change="changePage"
:pagination="{
showSizeChanger:true,
current: currentPage,
pageSize:pageSize,
total: total,
showQuickJumper:true,
bordered: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('HistoryPage.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>
</div>
</div>
</div>
</div>
<a-modal class="rename_modal_component"
v-model:visible="renameVisivle"
:footer="null"
:title="renameData?.name"
:keyboard="false"
width="56rem"
:maskClosable="false"
:centered="true"
>
<div class="collection_rename_content">
<div class="rename_form_content">
<input class="rename_form_input" :placeholder="$t('HistoryPage.inputContent2')" v-model="newCollectionName" @keydown.enter="confrimRename()">
</div>
<div class="rename_submit_button" @click="confrimRename()">{{ $t('HistoryPage.Submit') }}</div>
</div>
</a-modal>
</div>
<div class="trial_table_content" ref="historyTable">
<a-table
:columns="columns"
:data-source="collectionList"
:scroll="{ y: historyTableHeight }"
@change="changePage"
:pagination="{
showSizeChanger: true,
current: currentPage,
pageSize: pageSize,
total: total,
showQuickJumper: true,
bordered: false,
}"
>
<template
#bodyCell="{ column, text, record, index }"
>
<div
class="operate_list"
v-if="column?.Operations"
>
<div
class="operate_item"
@click="setConsent(record, index)"
>
consent
</div>
<div
class="operate_item"
@click="setRefuse(record, index)"
>
refuse
</div>
<div
class="operate_item"
@click="deleteGroup(record, index)"
>
Delete
</div>
</div>
</template>
</a-table>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,ref,createVNode,computed} from 'vue'
import { defineComponent, ref, createVNode, computed } from "vue";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import HeaderComponent from "@/component/HomePage/Header.vue";
import HistoryDetail from "@/component/Detail/HistoryDetail.vue";
import router from '@/router/index'
import router from "@/router/index";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util"
import { Modal,message } from 'ant-design-vue';
import { formatTime } from "@/tool/util";
import { Modal, message } from "ant-design-vue";
import RobotAssist from "@/component/HomePage/RobotAssist.vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useI18n } from 'vue-i18n';
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { useI18n } from "vue-i18n";
export default defineComponent({
components: {
HeaderComponent,
HistoryDetail,
RobotAssist
},
setup() {
let rangePickerValue:any = ref([])
let renameData:any = ref({}) //修改名字选中的数据
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.SketchCounts'), align:'center', ellipsis: true, width: 150, dataIndex: 'sketchCount', key: 'sketchCounts' },
{
title: useI18n().t('HistoryPage.Operations'),
key: 'operation',
align:'center',
fixed: 'right',
width: 150,
// slots:{customRender:'action'}
Operations:true,
},
]
});
let collectionList:any = ref([])
let userInfo:any = {}
let status:any = ref(0)
return {
rangePickerValue,
columns,
collectionList,
renameData,
userInfo,
status,
}
},
data(){
return{
currentPage:1,
pageSize:10,
total:0,
historyTableHeight:0,
newCollectionName:'',
renameVisivle:false,//修改名字弹窗
collectionName:'',//选中的名字
searchCollectionName:'',
}
},
mounted(){
let historyTable:any = this.$refs.historyTable
this.historyTableHeight = historyTable.clientHeight - 130
this.gettrialList()
this.userInfo = JSON.parse((getCookie("userInfo") as any));
if(this.userInfo.userId == 83){
components: {
HeaderComponent,
HistoryDetail,
RobotAssist,
},
setup() {
let rangePickerValue: any = ref([]);
let renameData: any = ref({}); //修改名字选中的数据
const columns: any = computed(() => {
return [
{
title: 'Email',
align: "center",
ellipsis: true,
width: 200,
dataIndex: "email",
key: "email",
},
{
title: 'Create Time',
align: "center",
ellipsis: 200,
dataIndex: "updateTime",
key: "updateTime",
// customRender: (record: any) => {
// let time = formatTime(
// record.text / 1000,
// "YYYY-MM-DD hh:mm:ss"
// );
// return time;
// },
},
{
title: 'Address',
align: "center",
ellipsis: true,
width: 150,
dataIndex: "country",
key: "country",
},
{
title: 'Surname',
align: "center",
ellipsis: true,
width: 150,
dataIndex: "surname",
key: "surname",
},
{
title: 'Name',
align: "center",
ellipsis: true,
width: 150,
dataIndex: "userName",
key: "userName",
},
{
title: 'Operations',
key: "operation",
align: "center",
fixed: "right",
width: 150,
// slots:{customRender:'action'}
Operations: true,
},
];
});
let currentState = ref({
name:'all',
value:'',
state:false,
},)
let state:any = ref([
{
name:'all',
value:'',
},
{
name:'unprocessed',
value:0,
},
{
name:'pending',
value:1,
},
{
name:'rejected',
value:2,
},
])
let collectionList: any = ref([]);
let userInfo: any = {};
let status: any = ref(0);
return {
rangePickerValue,
columns,
collectionList,
renameData,
userInfo,
status,
currentState,
state,
};
},
data() {
return {
currentPage: 1,
pageSize: 10,
total: 0,
historyTableHeight: 0,
newCollectionName: "",
renameVisivle: false, //修改名字弹窗
collectionName: "", //选中的名字
searchCollectionName: "",
};
},
mounted() {
let historyTable: any = this.$refs.historyTable;
this.historyTableHeight = historyTable.clientHeight - 130;
this.gettrialList();
this.userInfo = JSON.parse(getCookie("userInfo") as any);
}else{
router.replace('/home')
}
if (this.userInfo.userId == 83) {
} else {
router.replace("/home");
}
},
methods: {
//改变页码
changePage(e: any) {
this.currentPage = e.current;
this.pageSize = e.pageSize;
this.gettrialList();
},
},
methods:{
turnToDetail(record:any){
let historyDetail:any = this.$refs.historyDetail
this.collectionName = record.name
historyDetail.changeDetailShow()
},
//查询列表
searchHistoryList() {
this.currentPage = 1;
this.gettrialList();
},
gettrialList() {
let startDate: any = this.rangePickerValue
? new Date(this.rangePickerValue[0]).getTime()
: "";
let endDate: any = this.rangePickerValue
? new Date(this.rangePickerValue[1]).getTime()
: "";
let data = {
page: this.currentPage,
size: this.pageSize,
status: this.currentState.value,
// startDate:startDate,
// endDate:endDate
};
Https.axiosPost(Https.httpUrls.trialOrderList, data).then(
(rv: any) => {
this.collectionList = rv.content;
}
);
},
setConsent(record: any, index: number){
},
setRefuse(record: any, index: number){
//改变页码
changePage(e:any){
this.currentPage = e.current
this.pageSize = e.pageSize
this.gettrialList()
},
//查询列表
searchHistoryList(){
this.currentPage = 1
this.gettrialList()
},
gettrialList(){
let startDate:any = this.rangePickerValue ? new Date(this.rangePickerValue[0]).getTime(): ''
let endDate:any = this.rangePickerValue ? new Date(this.rangePickerValue[1]).getTime(): ''
let data = {
page:this.currentPage,
size:this.pageSize,
status:0,
// startDate:startDate,
// endDate:endDate
}
Https.axiosPost( Https.httpUrls.trialOrderList, data).then(
(rv: any) => {
this.collectionList = rv.content
}
);
},
//删除分组
deleteGroup(record:any,index:number){
let deleteGroupFun = (id:any,index:number) =>{
let data = {
userGroupId:id
}
Https.axiosPost(Https.httpUrls.deleteUserGroup,data).then(
(rv: any) => {
this.collectionList.splice(index,1)
}
);
}
Modal.confirm({
title: '11',
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
centered:true,
mask:false,
onOk() {
deleteGroupFun(record.id,index)
}
});
},
//修改名字
renameCollection(record:any,index:number){
this.renameVisivle = true
this.renameData = {
...record,
index:index
}
},
//确定修改名字
confrimRename(){
let data = {
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
userGroupId: this.renameData.id,
userGroupName: this.newCollectionName
}
Https.axiosPost(Https.httpUrls.updateUserGroupName,data).then(
(rv: any) => {
// message.success(this.t('HistoryPage.jsContent3'))
this.collectionList[this.renameData.index].name = this.newCollectionName
this.collectionList[this.renameData.index].updateDate = rv.updateDate
this.renameVisivle = false
this.newCollectionName = ''
this.renameData = {}
}
);
},
retrieveHome(record:any){
this.$router.push({name:'home',params: {id:record.id}})
}
}
})
},
//删除分组
deleteGroup(record: any, index: number) {
let deleteGroupFun = (id: any, index: number) => {
let data = {
userGroupId: id,
};
Https.axiosPost(Https.httpUrls.deleteUserGroup, data).then(
(rv: any) => {
this.collectionList.splice(index, 1);
}
);
};
Modal.confirm({
title: "11",
icon: createVNode(ExclamationCircleOutlined),
okText: "Yes",
cancelText: "No",
centered: true,
mask: false,
onOk() {
deleteGroupFun(record.id, index);
},
});
},
setState(){
this.currentState.state = true
},
setStateItem(item:any){
this.currentState = item
this.currentState.state = false
},
},
});
</script>
<style lang="less">
.trial_page {
width: 100%;
height: 100%;
padding: 0 9rem;
overflow: hidden;
// min-width: 1440px;
position: relative;
.page_content {
position: relative;
width: 100%;
height: 100%;
padding: 0 9rem;
overflow: hidden;
// min-width: 1440px;
position: relative;
.page_content {
position: relative;
.page_content_bg {
position: absolute;
width: 100%;
height: 100%;
}
.page_content_bg {
position: absolute;
width: 100%;
height: 100%;
}
.page_content_body {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
.page_content_body {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
.trial_page_body{
width: 100%;
height: calc(100% - 7rem);
padding: 0 2.5rem 4rem;
box-sizing: border-box;
.trial_table_search{
display: flex;
align-items: center;
margin-top: 5rem;
.range_picker{
width: 36rem;
height: 4.8rem;
.trial_page_body {
width: 100%;
height: calc(100% - 7rem);
padding: 0 2.5rem 4rem;
box-sizing: border-box;
.trial_table_search {
display: flex;
align-items: center;
margin-top: 5rem;
.range_picker {
width: 36rem;
height: 4.8rem;
.ant-picker-input > input{
font-size: 1.6rem;
}
.ant-picker-input > input {
font-size: 1.6rem;
}
.range_picker_icon{
font-size: 2.2rem;
}
}
.range_picker_icon {
font-size: 2.2rem;
}
}
.content_search_block{
margin-left: 4rem;
display: flex;
.content_search_block {
margin-left: 4rem;
display: flex;
.search_input{
width: 32.8rem;
padding-left: 1.5rem;
height: 4.8rem;
line-height: 4.6rem;
background: #FFFFFF;
border: 0.1rem solid #F1F1F1;
font-size: 1.6rem;
font-weight: 400;
.search_input {
width: 32.8rem;
padding-left: 1.5rem;
height: 4.8rem;
line-height: 4.6rem;
background: #ffffff;
border: 0.1rem solid #f1f1f1;
font-size: 1.6rem;
font-weight: 400;
&::placeholder {
color: #C2C2C2;
}
}
&::placeholder {
color: #c2c2c2;
}
}
.search_icon_block{
width: 7.2rem;
height: 4.8rem;
line-height: 4.8rem;
text-align: center;
background: #343579;
cursor: pointer;
.search_icon_block {
width: 7.2rem;
height: 4.8rem;
line-height: 4.8rem;
text-align: center;
background: #343579;
cursor: pointer;
.icon-sousuo{
font-size: 2rem;
color: #FFFFFF;
}
}
}
.trial_state{
}
}
.icon-sousuo {
font-size: 2rem;
color: #ffffff;
}
}
}
.trial_state {
border: 0.1rem solid #f1f1f1;
position: relative;
width: 20rem;
margin: 0 2rem;
padding: 0 2rem;
cursor: pointer;
.trial_current{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.header_user_content {
position: absolute;
border: 2px solid;
border-radius: 1rem;
overflow: hidden;
top: 0;
transform: translateY(6rem);
z-index: 2;
display: none;
.username{
padding: 0 2rem;
background: #fff;
}
.username:hover{
background: #e1e1e1;
}
&.active{
display: block;
}
}
}
}
.trial_table_content{
margin-top: 2.6rem;
width: 100%;
height: calc(100% - 13.7rem);
background: rgba(255, 255, 255, 0.6);
padding-bottom: 3rem;
.trial_table_content {
margin-top: 2.6rem;
width: 100%;
height: calc(100% - 13.7rem);
background: rgba(255, 255, 255, 0.6);
padding-bottom: 3rem;
.ant-table{
background: transparent;
}
.ant-table-body{
overflow-y: auto !important;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
.ant-table {
background: transparent;
}
&::-webkit-scrollbar { width: 0 !important }
.ant-table-body {
overflow-y: auto !important;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
&::-webkit-scrollbar {
width: 0 !important;
}
}
.ant-table-thead > tr > th{
background: #FFFFFF;
}
.ant-table-thead > tr > th {
background: #ffffff;
}
.ant-table-tbody > tr > td{
border: none;
background: transparent;
.ant-table-tbody > tr > td {
border: none;
background: transparent;
}
}
.ant-table-tbody > tr {
&:hover > td {
background: #ffffff;
}
}
.ant-table-tbody > tr{
.ant-table-pagination-right {
padding-right: 3.5rem;
}
&:hover > td{
background: #FFFFFF;
}
}
.operate_list {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
.ant-table-pagination-right{
padding-right: 3.5rem;
}
.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: #343579;
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;
}
}
.operate_item {
font-size: 1.4rem;
font-family: Roboto;
font-weight: 400;
color: #343579;
cursor: pointer;
}
}
}
}
}
}
}
</style>