|
@@ -29,15 +29,16 @@
|
29
|
29
|
:min-width="item.key_value != 'advertiser_status' && item.key_value != 'advertiser_nick' && item.label.length <= 4 ? '120px' : item.label.length <= 8 ? '150px' : '200px'">
|
30
|
30
|
<template #header>
|
31
|
31
|
<div class="flex"
|
32
|
|
- :class="[tableInfo.sortKey == item.key_value ? 'active_css' : '', item.if_sort == 1 ? 'pointer' : '']"
|
33
|
|
- @click="item.if_sort == 1 && sortEvent(item.key_value)">
|
34
|
|
- {{ item.label }}
|
|
32
|
+ :class="[tableInfo.sortKey == item.key_value ? 'active_css' : '']">
|
|
33
|
+ <span :style="{color:tableInfo.sortKey == item.key_value ? '#3173FF' : ''}">{{ item.label }}</span>
|
35
|
34
|
<el-tooltip v-if="item.tooltip && item.tooltip != item.label" placement="top" effect="dark"
|
36
|
35
|
:content="item.tooltip"><i-ep-QuestionFilled class="lMar5 c-999 f14 pointer" /></el-tooltip>
|
37
|
|
- <div v-if="item.if_sort == 1">
|
38
|
|
- <div class="sortItem">
|
39
|
|
- <el-icon class="f14" :color="tableInfo.sortKey == item.key_value ? '#3173FF' : '#a8abb2'" style="margin-bottom: -8px;"><CaretTop /></el-icon>
|
40
|
|
- <el-icon class="f14" :color="tableInfo.sortKey == item.key_value ? '#3173FF' : '#a8abb2'"><i-ep-CaretBottom /></el-icon>
|
|
36
|
+ <div v-if="item.if_sort == 1" class="sortBox lMar5 pointer">
|
|
37
|
+ <div class="sortItem" @click="sortEvent(item.key_value,'desc')">
|
|
38
|
+ <el-icon :color="(tableInfo.sortType == 'desc' && tableInfo.sortKey == item.key_value) ? '#3173FF' : ''"><i-ep-CaretTop /></el-icon>
|
|
39
|
+ </div>
|
|
40
|
+ <div class="sortItem" @click="sortEvent(item.key_value,'asc')">
|
|
41
|
+ <el-icon :color="(tableInfo.sortType == 'asc' && tableInfo.sortKey == item.key_value) ? '#3173FF' : ''"><i-ep-CaretBottom /></el-icon>
|
41
|
42
|
</div>
|
42
|
43
|
</div>
|
43
|
44
|
</div>
|
|
@@ -45,7 +46,7 @@
|
45
|
46
|
<template #default="scope">
|
46
|
47
|
<!-- 账户ID -->
|
47
|
48
|
<div v-if="item.key_value == 'advertiser_id'">
|
48
|
|
- <span style="color: #3173FF" class="pointer">{{ scope.row[item.key_value] }}</span>
|
|
49
|
+ <span style="color: #3173FF" class="pointer" @click="goPlanEvent(scope.row[item.key_value])">{{ scope.row[item.key_value] }}</span>
|
49
|
50
|
</div>
|
50
|
51
|
<!-- 账户状态 -->
|
51
|
52
|
<div v-else-if="item.key_value == 'advertiser_status'" class="flex">
|
|
@@ -95,9 +96,12 @@ const router = useRouter();
|
95
|
96
|
const { proxy } = getCurrentInstance() as any;
|
96
|
97
|
|
97
|
98
|
const emit = defineEmits<{
|
|
99
|
+ (event: "goPlan", advertiser_id: any[]): void;
|
98
|
100
|
(event: "goNewPlan"): void;
|
99
|
|
- (event: "goAdvert", campaign_id: any): void;
|
100
|
101
|
}>();
|
|
102
|
+const goPlanEvent = (advertiser_id) => {
|
|
103
|
+ emit('goPlan', [advertiser_id])
|
|
104
|
+}
|
101
|
105
|
const goNewPlanEvent = () => {
|
102
|
106
|
emit('goNewPlan')
|
103
|
107
|
}
|
|
@@ -119,6 +123,7 @@ const tableInfo = reactive<reactiveTableAndAny>({
|
119
|
123
|
pageSize: 20,
|
120
|
124
|
total: 0,
|
121
|
125
|
totalPages: 0,//共多少页
|
|
126
|
+ sortType: 'desc'
|
122
|
127
|
})
|
123
|
128
|
|
124
|
129
|
const ModifyDailyBudgetRef = ref()
|
|
@@ -132,11 +137,10 @@ const dropdownEvent = (val: string | number | object) => {
|
132
|
137
|
|
133
|
138
|
|
134
|
139
|
//排序
|
135
|
|
-const sortEvent = (row: any) => {
|
136
|
|
- if (row != tableInfo.sortKey) {
|
137
|
|
- tableInfo.sortKey = row
|
138
|
|
- init()
|
139
|
|
- }
|
|
140
|
+const sortEvent = (row: any, order: string) => {
|
|
141
|
+ tableInfo.sortType = order;
|
|
142
|
+ tableInfo.sortKey = row
|
|
143
|
+ init()
|
140
|
144
|
}
|
141
|
145
|
|
142
|
146
|
//列表
|
|
@@ -149,7 +153,7 @@ const init = async () => {
|
149
|
153
|
}
|
150
|
154
|
if (tableInfo.sortKey) {
|
151
|
155
|
params['field'] = tableInfo.sortKey
|
152
|
|
- params['order'] = 'desc'
|
|
156
|
+ params['order'] = tableInfo.sortType
|
153
|
157
|
}
|
154
|
158
|
const paramsModel = reactive<batchAccount_list>(params)
|
155
|
159
|
let res: any = await proxy.$http.get(Api.batchGdt_accountList_list, paramsModel)
|
|
@@ -201,10 +205,7 @@ onMounted(() => {
|
201
|
205
|
})
|
202
|
206
|
</script>
|
203
|
207
|
<style lang="scss" scoped>
|
204
|
|
-.sortItem{
|
205
|
|
- display: flex;
|
206
|
|
- flex-direction: column;
|
207
|
|
-}
|
|
208
|
+@import "./index.scss";
|
208
|
209
|
.dot {
|
209
|
210
|
width: 6px;
|
210
|
211
|
height: 6px;
|
|
@@ -216,7 +217,13 @@ onMounted(() => {
|
216
|
217
|
:deep(.el-table__body-wrapper) {
|
217
|
218
|
order: 1;
|
218
|
219
|
}
|
219
|
|
-
|
|
220
|
+:deep(.el-table__footer-wrapper){
|
|
221
|
+ border-bottom: var(--el-table-border);
|
|
222
|
+ border-top: none;
|
|
223
|
+}
|
|
224
|
+:deep(.el-table__footer-wrapper tbody td.el-table__cell){
|
|
225
|
+ background-color: #fafafa;
|
|
226
|
+}
|
220
|
227
|
.el-table th div.cell {
|
221
|
228
|
white-space: nowrap;
|
222
|
229
|
text-overflow: ellipsis;
|