aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
X1627315083
2024-03-22 12:01:11 +08:00
parent c8f6884e7d
commit 84674c63fd
14 changed files with 475 additions and 623 deletions
Download Patch File Download Diff File Expand all files Collapse all files

259
src/component/HomePage/TaskDetailPage.vue
View File

@@ -1,6 +1,6 @@
<template>
<a-modal
class="modal_component TaskDetail_modal payOrder_modal"
class="modal_component generalModel_modal"
v-model:visible="showPayOrder"
:footer="null"
width="78%"
@@ -10,22 +10,43 @@
wrapClassName="#app"
:keyboard="false"
>
<div class="payOrder_page ">
<div class="generalModel_page ">
<div class="closeIcon">
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
</div>
<div class="creditsDetail_table_search allOrder_table_search">
<div class="creditsDetail_state allOrder_state">
<div class="creditsDetail_state_item allOrder_state_item">
<div class="creditsDetail_table_search generalModel_table_search">
<div class="creditsDetail_state generalModel_state">
<div class="generalModel_state_item">
<span>Time:</span>
<a-range-picker
class="range_picker"
v-model:value="rangePickerValue"
style="width:35rem"
:placeholder="[
$t('HistoryPage.StartDate'),
$t('HistoryPage.EndDate'),
]"
:show-time="{ format: 'HH:mm:ss' }"
format="YYYY-MM-DD HH:mm:ss"
valueFormat="YYYY-MM-DD HH:mm:ss"
>
<template #suffixIcon>
<span
class="icon iconfont range_picker_icon icon-rili"
></span>
</template>
</a-range-picker>
</div>
<div class="creditsDetail_state_item generalModel_state_item">
<span>State:</span>
<a-select style="width:25rem" v-model:value="currentState.value" size="large" optionFilterProp="label" :options="state" placeholder="Please select" allowClear show-search></a-select>
</div>
</div>
<div class="creditsDetail_search allOrder_search">
<div class="creditsDetail_search generalModel_search">
<div
class="creditsDetail_search_item allOrder_search_item"
class="creditsDetail_search_item generalModel_search_item"
@click="searchcreditsDetailList()"
>
<span
@@ -34,7 +55,7 @@
</div>
</div>
</div>
<div class="TaskDetail_page" ref="historyTable">
<div class="generalModel_table_content" ref="historyTable">
<a-table
:columns="columns"
:data-source="collectionList"
@@ -49,7 +70,21 @@
bordered: false,
}"
>
<template
<template #bodyCell="{ column, text, record, index }">
<template v-if="column.inputImage">
<img :src="text.inputImage" :title="column.title">
</template>
<template v-else-if="column.outputImage">
<img :src="text.outputImage" :title="column.title">
</template>
<template v-else-if="column.Operations">
<div class="operate_list">
<div class="operate_item" @click="openExport(text)">下载</div>
</div>
<!-- <div v-else class="operate_item">/</div> -->
</template>
</template>
<!-- <template
#bodyCell="{ column, text, record, index }"
>
<div
@@ -58,7 +93,7 @@
>
<div class="operate_item">{{ $t('HistoryPage.Delete') }}</div>
</div>
</template>
</template> -->
</a-table>
</div>
</div>
@@ -72,7 +107,7 @@
<script lang="ts">
import { defineComponent, ref, createVNode, computed, nextTick } from "vue";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util";
import { downloadIamge } from "@/tool/util";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { useI18n } from "vue-i18n";
@@ -87,65 +122,69 @@ export default defineComponent({
const columns: any = computed(() => {
return [
{
title: "Serial",
title: "Input",
align: "center",
ellipsis: true,
dataIndex: "orderNo",
key: "orderNo",
// dataIndex: "inputImage",
key: "inputImage",
inputImage:true,
},
{
title: "Output",
align: "center",
ellipsis: true,
// dataIndex: "outputImage",
key: "outputImage",
outputImage:true,
},
{
title: "Title",
title: "Name",
align: "center",
ellipsis: true,
dataIndex: "title",
key: "title",
dataIndex: "imageName",
key: "imageName",
},
{
title: "CreateDate",
align: "center",
ellipsis: true,
dataIndex: "createDate",
key: "createDate",
},
{
title: "Money",
title: "Scale",
align: "center",
ellipsis: true,
dataIndex: "totalFee",
key: "totalFee",
},
{
title: "Payment",
align: "center",
ellipsis: true,
dataIndex: "paymentType",
key: "paymentType",
},
{
title: "State",
align: "center",
ellipsis: true,
dataIndex: "orderStatus",
key: "orderStatus",
dataIndex: "otherInput",
key: "otherInput",
},
// {
// title: useI18n().t("HistoryPage.Operations"),
// key: "operation",
// align: "center",
// // slots:{customRender:'action'}
// Operations: true,
// },
{
title: useI18n().t("HistoryPage.Operations"),
key: "operation",
align: "center",
// slots:{customRender:'action'}
Operations: true,
},
];
});
let currentState = ref({
value:'income',
value:'SR',
})
let state:any = ref([
{
label:'Income',
value:'income',
},
{
label:'Expend',
value:'expend',
label:'SR',
value:'SR',
},
// {
// label:'Expend',
// value:'expend',
// },
])
let collectionList: any = ref([]);
let rangePickerValue: any = ref([]);
return {
presentState,
showPayOrder,
@@ -155,6 +194,7 @@ export default defineComponent({
currentState,
state,
collectionList,
rangePickerValue,
};
},
data() {
@@ -166,15 +206,18 @@ export default defineComponent({
};
},
mounted() {
// let historyTable: any = this.$refs.historyTable;
// this.historyTableHeight = historyTable.clientHeight - 130;
// console.log(historyTable);
},
methods: {
init() {
this.showPayOrder = true;
this.currentPage = 1
this.pageSize = 10
nextTick().then(()=>{
let historyTable: any = this.$refs.historyTable;
this.historyTableHeight = historyTable.clientHeight - 130;
})
this.getTaskDetail()
},
//改变页码
@@ -189,17 +232,18 @@ export default defineComponent({
this.getTaskDetail();
},
getTaskDetail() {
let startDate: any = this.rangePickerValue[0]?this.rangePickerValue[0] : "";
let endDate: any = this.rangePickerValue[1]?this.rangePickerValue[1] : "";
let data = {
isIncome: this.currentState.value == 'income'?true:false,
page:this.currentPage,
size:this.pageSize,
size:this.pageSize,
page: this.currentPage,
type:this.currentState.value,
endTime: endDate,
startTime: startDate,
}
console.log(data);
// getCreditsDetail
// orderInfoList
Https.axiosPost(Https.httpUrls.getCreditsDetail,data).then((rv: any) => {
this.total = rv.length;
this.collectionList = rv
Https.axiosPost(Https.httpUrls.getTasksHistory,data).then((rv: any) => {
if(this.currentPage > 1 && rv.content.length == 0){
this.currentPage = 1
this.getTaskDetail()
@@ -210,6 +254,9 @@ export default defineComponent({
});
},
openExport(exportObj:any){
downloadIamge(exportObj.outputImage,exportObj.imageName)
},
cancelDsign(){
this.showPayOrder = false
}
@@ -217,23 +264,20 @@ export default defineComponent({
});
</script>
<style lang="less">
.TaskDetail_modal {
}
</style>
<style lang="less">
.payOrder_modal {
// .generalModel_modal {
.closeIcon {
z-index: 2;
}
.payOrder_page {
.generalModel_page {
width: 100%;
height: 100%;
padding: 9rem;
overflow: hidden;
// min-width: 1440px;
position: relative;
.allOrder_table_search {
display: flex;
flex-direction: column;
.generalModel_table_search {
display: flex;
margin-top: 2rem;
padding: 2rem 3.5rem 5rem 2.8rem;
@@ -242,9 +286,9 @@ export default defineComponent({
justify-content: flex-start;
align-items: center;
.allOrder_search{
width: 20%;
.allOrder_search_item{
.generalModel_search{
width: auto;
.generalModel_search_item{
background: #343579;
border-color: #343579;
height: 4rem;
@@ -256,12 +300,13 @@ export default defineComponent({
cursor: pointer;
}
}
.allOrder_state {
.generalModel_state {
position: relative;
display: flex;
align-items: center;
width: 80%;
.allOrder_state_item{
width: auto;
flex-wrap: wrap;
.generalModel_state_item{
display: flex;
align-items: center;
margin-right: 5rem;
@@ -292,7 +337,7 @@ export default defineComponent({
}
}
}
.allOrder_current{
.generalModel_current{
background: #fff;
width: 100%;
display: flex;
@@ -322,6 +367,68 @@ export default defineComponent({
}
}
}
}
// }
}
.generalModel_table_content {
width: 100%;
// height: 100%;
height: 100%;
flex: 1;
padding-bottom: 3rem;
background: #fff;
border-radius: 2rem;
overflow: hidden;
.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;
border-bottom: none;
backdrop-filter: blur(1rem);
}
.ant-table-tbody > tr > td {
border: none;
background: transparent;
// color: #fff;
img{
max-width: 100%;
max-height: 10rem;
object-fit: contain;
}
}
.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;
justify-content: center;
.operate_item {
font-size: 1.4rem;
font-family: Roboto;
font-weight: 400;
color: #343579;
cursor: pointer;
}
}
}
</style>