Files
aida_front/src/views/TestClickData.vue
2024-03-08 11:19:33 +08:00

473 lines
15 KiB
Vue

<template>
<div class="trial_page">
<div class="page_content">
<img
class="page_content_bg"
src="@/assets/images/homePage/bg1.jpg"
/>
<div class="page_content_body">
<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="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
v-show="status == 0"
class="operate_item"
@click="setConsent(record, index)"
>
consent
</div>
<div
v-show="status == 0"
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 { 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 { 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 } 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: 'Email',
align: "center",
ellipsis: true,
width: 170,
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: 'State',
align: "center",
ellipsis: true,
width: 150,
dataIndex: "status",
key: "status",
customRender: (record: any) => {
let str
if(record.value == 0){
str ='pending'
}else if(record.value == 1){
str ='consent'
}else if(record.value == 2){
str ='reject'
}
return str;
},
},
{
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: 200,
// slots:{customRender:'action'}
Operations: true,
},
];
});
let state:any = ref([
{
name:'all',
value:'',
},
{
name:'unprocessed',
value:0,
},
{
name:'pending',
value:1,
},
{
name:'rejected',
value:2,
},
])
let collectionList: any = ref([]);
let status: any = ref(0);
let voluntarily: any = ref(false);
return {
rangePickerValue,
columns,
collectionList,
renameData,
status,
state,
voluntarily,
};
},
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();
},
methods: {
//改变页码
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[0]
? this.rangePickerValue[0]+' '+'00:00:00'
: "";
let endDate: any = this.rangePickerValue[1]
? this.rangePickerValue[1]+' '+'00:00:00'
: "";
let data = {
endTime:startDate,
startTime:endDate,
}
console.log(data);
console.log(this.rangePickerValue,startDate,endDate);
Https.axiosGet(Https.httpUrls.getDesignStatistic,{params:data}).then((rv: any) => {
if (rv) {
console.log(rv);
// this.workspaceItem.position = this.singleTypeList[0].label
}
})
},
setConsent(record: any, index: number){
const formData = new FormData()
formData.append('ids',record.id)
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.trialOrderApproval, {ids:record.id}).then(
(rv: any) => {
message.success('同意成功~')
}
);
},
setRefuse(record: any, index: number){
const formData = new FormData()
formData.append('ids',record.id)
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.trialOrderRefuse, formData,config).then(
(rv: any) => {
this.gettrialList();
message.success('拒绝成功~')
}
);
},
//删除分组
// 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: "",
// icon: createVNode(ExclamationCircleOutlined),
// okText: "Yes",
// cancelText: "No",
// centered: true,
// mask: false,
// onOk() {
// deleteGroupFun(record.id, index);
// },
// });
// },
},
});
</script>
<style lang="less">
.trial_page {
width: 100%;
height: 100%;
overflow: hidden;
// min-width: 1440px;
position: relative;
.page_content {
position: relative;
.page_content_bg {
position: absolute;
width: 100%;
height: 100%;
}
.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;
color: #fff;
.range_picker {
width: 36rem;
height: 4.8rem;
.ant-picker-input > input {
font-size: 1.6rem;
}
.range_picker_icon {
font-size: 2.2rem;
}
}
.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;
&::placeholder {
color: #c2c2c2;
}
}
.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_table_content {
margin-top: 2.6rem;
width: 100%;
height: calc(100% - 13.7rem);
background: rgba(255, 255, 255, 0.3);
padding-bottom: 3rem;
border-radius: 2rem;
backdrop-filter: blur(3rem);
overflow: hidden;
box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.38);
.ant-table {
background: transparent;
}
.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: #ffffff00;
color: #fff;
border-bottom: none;
backdrop-filter: blur(1rem);
}
.ant-table-tbody > tr > td {
border: none;
background: transparent;
// color: #fff;
}
.ant-table-tbody > tr {
&:hover > td {
background: #ffffff3a;
}
}
.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;
}
}
}
}
}
}
}
</style>