|
|
@@ -0,0 +1,310 @@
|
|
|
1
|
+<template>
|
|
|
2
|
+ <el-dialog class="gdt-dialog" v-model="dialogVisible" title="优量汇流量包" width="1000px" top="40px"
|
|
|
3
|
+ :before-close="handleClose">
|
|
|
4
|
+ <div class="container tabelListBox" v-loading="loading">
|
|
|
5
|
+ <div class="ids">
|
|
|
6
|
+ <div class="accItem" v-for="(item, idx) in accIdsList" :key="item.id" :class="item.id == accId ? 'active' : ''"
|
|
|
7
|
+ @click="accItemEvent(item)">
|
|
|
8
|
+ {{ item.name || '-' }}
|
|
|
9
|
+ <el-icon :size="14" :color="item.id == accId ? '#197afb' : '#606266'" class="lMarauto">
|
|
|
10
|
+ <CircleCheck v-if="checkTrue(item.id)" />
|
|
|
11
|
+ <i-ep-ArrowRight v-else />
|
|
|
12
|
+ </el-icon>
|
|
|
13
|
+ </div>
|
|
|
14
|
+ </div>
|
|
|
15
|
+ <div class="tabelCon">
|
|
|
16
|
+ <div class="title flex_between">
|
|
|
17
|
+ <el-radio-group v-model="typeSelect" size="default" @change="accItemEvent({ 'id': accId })">
|
|
|
18
|
+ <el-radio-button v-for="item in infoSelect" :label="item.id">{{ item.name }}</el-radio-button>
|
|
|
19
|
+ </el-radio-group>
|
|
|
20
|
+ <div>
|
|
|
21
|
+ <el-input style="width:320px;margin-right: 6px;" v-model="searchKeyWrod" clearable
|
|
|
22
|
+ :placeholder="`请输入流量包${searchSelect == '1' ? '名称' : 'ID'}查询`" class="input-with-select"
|
|
|
23
|
+ @clear="clearClick('input')">
|
|
|
24
|
+ <template #prepend>
|
|
|
25
|
+ <el-select v-model="searchSelect" placeholder="Select" style="width: 100px">
|
|
|
26
|
+ <el-option label="流量包名称" value="1" />
|
|
|
27
|
+ <el-option label="流量包ID" value="2" />
|
|
|
28
|
+ </el-select>
|
|
|
29
|
+ </template>
|
|
|
30
|
+ </el-input>
|
|
|
31
|
+ <el-button type="primary" @click="searchClick">查询</el-button>
|
|
|
32
|
+ <span class="refresh" @click="clearClick('clear')">清空</span>
|
|
|
33
|
+ <span class="refresh" @click="accItemEvent({ 'id': accId }, 'upload')">刷新</span>
|
|
|
34
|
+ </div>
|
|
|
35
|
+ </div>
|
|
|
36
|
+ <div class="conInfo">
|
|
|
37
|
+ <el-table border height="56vh" :data="tableData" style="width: 100%"
|
|
|
38
|
+ @row-click="rowClick">
|
|
|
39
|
+ <template v-slot:empty>
|
|
|
40
|
+ <span v-if="searchKeyWrod && searchKeyWrod != ''">未搜索到相关内容，请更换关键字或ID重试</span>
|
|
|
41
|
+ <span v-else>暂无流量包信息</span>
|
|
|
42
|
+ </template>
|
|
|
43
|
+ <el-table-column width="40" align="center">
|
|
|
44
|
+ <template #header="scope">
|
|
|
45
|
+ <div :class="['self_checkbox', allCheckboxValue ? 'self_checkbox_active' : false, disabled ? 'self_checkbox_disabled': '']"
|
|
|
46
|
+ @click="allCheckboxclick"></div>
|
|
|
47
|
+ </template>
|
|
|
48
|
+ <template #default="scope">
|
|
|
49
|
+ <div :class="['self_checkbox', scope.row.checkboxValue ? 'self_checkbox_active' : false]"></div>
|
|
|
50
|
+ </template>
|
|
|
51
|
+ </el-table-column>
|
|
|
52
|
+ <el-table-column property="union_package_name" label="流量包名称" show-overflow-tooltip />
|
|
|
53
|
+ <el-table-column property="union_package_id" label="流量包ID" />
|
|
|
54
|
+ <el-table-column property="last_modified_time" label="最后更新时间" show-overflow-tooltip />
|
|
|
55
|
+ </el-table>
|
|
|
56
|
+ </div>
|
|
|
57
|
+ </div>
|
|
|
58
|
+ </div>
|
|
|
59
|
+ <template #footer>
|
|
|
60
|
+ <span class="dialog-footer">
|
|
|
61
|
+ <el-button @click="handleClose"> 取 消 </el-button>
|
|
|
62
|
+ <el-button type="primary" @click="submitEvent"> 确 定 </el-button>
|
|
|
63
|
+ </span>
|
|
|
64
|
+ </template>
|
|
|
65
|
+ </el-dialog>
|
|
|
66
|
+</template>
|
|
|
67
|
+<script setup lang="ts">
|
|
|
68
|
+import { reactive, ref, watch } from 'vue';
|
|
|
69
|
+import { unionPositionPackagesGet } from './ts/basicApi'
|
|
|
70
|
+import { ElMessage } from "element-plus";
|
|
|
71
|
+const props = defineProps({
|
|
|
72
|
+ visible: {
|
|
|
73
|
+ type: Boolean,
|
|
|
74
|
+ default: false
|
|
|
75
|
+ },
|
|
|
76
|
+ dataFillBack: {
|
|
|
77
|
+ type: Object,
|
|
|
78
|
+ default: () => { }
|
|
|
79
|
+ },
|
|
|
80
|
+ accIdsList: {
|
|
|
81
|
+ type: Array<{ id: string, name: string }>,
|
|
|
82
|
+ default: () => []
|
|
|
83
|
+ },
|
|
|
84
|
+ infoSelect: {
|
|
|
85
|
+ type: Array<{ id: 1 | 2, name: string }>,
|
|
|
86
|
+ default: () => []
|
|
|
87
|
+ }
|
|
|
88
|
+})
|
|
|
89
|
+const emit = defineEmits<{
|
|
|
90
|
+ (event: "close", val?: any): void;
|
|
|
91
|
+}>();
|
|
|
92
|
+const accId = ref('')
|
|
|
93
|
+const loading = ref(false)
|
|
|
94
|
+const tableDataAll = reactive({})
|
|
|
95
|
+const tableData = ref<any[]>([]);
|
|
|
96
|
+const dialogVisible = ref(props.visible)
|
|
|
97
|
+const params = reactive({})
|
|
|
98
|
+const searchKeyWrod = ref('')
|
|
|
99
|
+const allCheckboxValue = ref(false)
|
|
|
100
|
+const searchSelect = ref('1')
|
|
|
101
|
+const disabled = ref(false)
|
|
|
102
|
+const typeSelect = ref()
|
|
|
103
|
+/**关闭弹框 */
|
|
|
104
|
+const handleClose = () => {
|
|
|
105
|
+ emit('close')
|
|
|
106
|
+}
|
|
|
107
|
+/**点击媒体账户 */
|
|
|
108
|
+const accItemEvent = (item, type?) => {
|
|
|
109
|
+ accId.value = item?.id;
|
|
|
110
|
+ if (params[accId.value][typeSelect.value] && params[accId.value][typeSelect.value].length != 0) {
|
|
|
111
|
+ allCheckboxValue.value = true
|
|
|
112
|
+ } else {
|
|
|
113
|
+ allCheckboxValue.value = false
|
|
|
114
|
+ }
|
|
|
115
|
+ if (!tableDataAll[item.id][typeSelect.value] || type == 'upload') {
|
|
|
116
|
+ loading.value = true;
|
|
|
117
|
+ accId.value && unionPositionPackagesGet({ 'account_id': accId.value, 'type': typeSelect!.value }).then((data) => {
|
|
|
118
|
+ let res = data.map((v) => {
|
|
|
119
|
+ let flag = false;
|
|
|
120
|
+ params[accId.value] && params[accId.value][typeSelect.value] && Array.isArray(params[accId.value][typeSelect.value]) && params[accId.value][typeSelect.value]?.forEach((item) => {
|
|
|
121
|
+ if(item.union_package_id == v.union_package_id){flag=true}
|
|
|
122
|
+ });
|
|
|
123
|
+ return Object.assign(v, { 'checkboxValue': flag })
|
|
|
124
|
+ })
|
|
|
125
|
+ tableData.value = res;
|
|
|
126
|
+ tableDataAll[item.id][typeSelect.value] = res;
|
|
|
127
|
+ searchClick()
|
|
|
128
|
+ loading.value = false;
|
|
|
129
|
+ }).catch(() => {
|
|
|
130
|
+ loading.value = false;
|
|
|
131
|
+ })
|
|
|
132
|
+ } else {
|
|
|
133
|
+ tableData.value = tableDataAll[item.id][typeSelect.value];
|
|
|
134
|
+ searchClick()
|
|
|
135
|
+ }
|
|
|
136
|
+}
|
|
|
137
|
+/**确定提交 */
|
|
|
138
|
+const submitEvent = () => {
|
|
|
139
|
+ let obj = {};
|
|
|
140
|
+ for (let i in params) {
|
|
|
141
|
+ for(let j in params[i]){
|
|
|
142
|
+ if(params[i][j].length == 0){
|
|
|
143
|
+ ElMessage.warning(`${i} 未选择${j=='1'?'定投':'屏蔽'}流量包`)
|
|
|
144
|
+ return
|
|
|
145
|
+ }
|
|
|
146
|
+ }
|
|
|
147
|
+ if (params[i] && params[i] != '') {
|
|
|
148
|
+ obj[i] = params[i]
|
|
|
149
|
+ }
|
|
|
150
|
+ }
|
|
|
151
|
+ emit('close', {
|
|
|
152
|
+ type: 'submit',
|
|
|
153
|
+ val: Object.keys(obj).length == 0 ? null : obj
|
|
|
154
|
+ })
|
|
|
155
|
+}
|
|
|
156
|
+/**点击单行 */
|
|
|
157
|
+const rowClick = (row) => {
|
|
|
158
|
+ row.checkboxValue = !row.checkboxValue
|
|
|
159
|
+ if (row.checkboxValue) {
|
|
|
160
|
+ allCheckboxValue.value = true
|
|
|
161
|
+ if(params[accId.value][typeSelect.value].length >= 20) {
|
|
|
162
|
+ ElMessage.warning('最多可选择20个流量包，已达上限！')
|
|
|
163
|
+ }else {
|
|
|
164
|
+ params[accId.value][typeSelect.value].push(row)
|
|
|
165
|
+ }
|
|
|
166
|
+ } else {
|
|
|
167
|
+ allCheckboxValue.value = false
|
|
|
168
|
+ params[accId.value][typeSelect.value] = params[accId.value][typeSelect.value].filter((v)=>{
|
|
|
169
|
+ return v.union_package_id != row.union_package_id
|
|
|
170
|
+ })
|
|
|
171
|
+ }
|
|
|
172
|
+}
|
|
|
173
|
+/**点击全选 */
|
|
|
174
|
+const allCheckboxclick = () => {
|
|
|
175
|
+ if(disabled.value) return;
|
|
|
176
|
+ if (allCheckboxValue.value) {
|
|
|
177
|
+ tableDataAll[accId.value][typeSelect.value].forEach((v) => {
|
|
|
178
|
+ v.checkboxValue = false
|
|
|
179
|
+ })
|
|
|
180
|
+ params[accId.value][typeSelect.value] = []
|
|
|
181
|
+ allCheckboxValue.value = false
|
|
|
182
|
+ } else if (tableData.value?.length > 0) {
|
|
|
183
|
+ tableData.value.forEach((v,index)=>{
|
|
|
184
|
+ index < 20 ? v.checkboxValue = true : ''
|
|
|
185
|
+ })
|
|
|
186
|
+ if(tableData.value.length > 20) {
|
|
|
187
|
+ ElMessage.warning('最多可选择20个流量包，已为您选择前20个流量包！')
|
|
|
188
|
+ }
|
|
|
189
|
+ params[accId.value][typeSelect.value] = tableData.value.slice(0,20)
|
|
|
190
|
+ allCheckboxValue.value = true
|
|
|
191
|
+ }
|
|
|
192
|
+}
|
|
|
193
|
+/**模糊查询 */
|
|
|
194
|
+const searchClick = () => {
|
|
|
195
|
+ if (searchKeyWrod.value == '') {
|
|
|
196
|
+ tableData.value = tableDataAll[accId.value][typeSelect.value]
|
|
|
197
|
+ }else if (searchSelect.value == '1') { //根据流量包名称搜索
|
|
|
198
|
+ tableData.value = tableDataAll[accId.value][typeSelect.value].filter((v) => {
|
|
|
199
|
+ return v.union_package_name.indexOf(searchKeyWrod.value) != -1
|
|
|
200
|
+ })
|
|
|
201
|
+ }else if (searchSelect.value == '2') { //根据流量包ID搜索
|
|
|
202
|
+ tableData.value = tableDataAll[accId.value][typeSelect.value].filter((v) => {
|
|
|
203
|
+ return String(v.union_package_id).indexOf(searchKeyWrod.value) != -1
|
|
|
204
|
+ })
|
|
|
205
|
+ }
|
|
|
206
|
+ determineAllSelect()
|
|
|
207
|
+}
|
|
|
208
|
+/**清空 */
|
|
|
209
|
+const clearClick = (type) => {
|
|
|
210
|
+ tableData.value = tableDataAll[accId.value][typeSelect.value]
|
|
|
211
|
+ searchKeyWrod.value = ''
|
|
|
212
|
+ if (type == 'clear') {
|
|
|
213
|
+ tableDataAll[accId.value][typeSelect.value].forEach((v) => {
|
|
|
214
|
+ v.checkboxValue = false
|
|
|
215
|
+ })
|
|
|
216
|
+ params[accId.value][typeSelect.value] = []
|
|
|
217
|
+ allCheckboxValue.value = false
|
|
|
218
|
+ }
|
|
|
219
|
+ determineAllSelect()
|
|
|
220
|
+}
|
|
|
221
|
+/**全选是否可用判断 */
|
|
|
222
|
+const determineAllSelect = () => {
|
|
|
223
|
+ if ( tableData.value.length > 0) {
|
|
|
224
|
+ disabled.value = false
|
|
|
225
|
+ } else {
|
|
|
226
|
+ disabled.value = true
|
|
|
227
|
+ }
|
|
|
228
|
+}
|
|
|
229
|
+/**判断媒体账户是否选择完毕 */
|
|
|
230
|
+const checkTrue = (id) => {
|
|
|
231
|
+ let flag = true
|
|
|
232
|
+ props.infoSelect.forEach((item,index)=>{
|
|
|
233
|
+ if(!params[id][item.id] || params[id][item.id].length == 0){
|
|
|
234
|
+ flag = false
|
|
|
235
|
+ }
|
|
|
236
|
+ })
|
|
|
237
|
+ return flag
|
|
|
238
|
+}
|
|
|
239
|
+/**弹框显隐监听 */
|
|
|
240
|
+watch(
|
|
|
241
|
+ () => props.visible,
|
|
|
242
|
+ (newValue, oldValue) => {
|
|
|
243
|
+ dialogVisible.value = newValue
|
|
|
244
|
+ if (newValue) {
|
|
|
245
|
+ if(!props.infoSelect[0]) return;
|
|
|
246
|
+ typeSelect.value = props.infoSelect[0].id;
|
|
|
247
|
+ props.accIdsList.forEach((item)=>{
|
|
|
248
|
+ tableDataAll[item.id] = {
|
|
|
249
|
+ [props.infoSelect[0].id]: null
|
|
|
250
|
+ }
|
|
|
251
|
+ params[item.id] = {
|
|
|
252
|
+ [props.infoSelect[0].id]: [],
|
|
|
253
|
+ }
|
|
|
254
|
+ if(props.infoSelect[1]){
|
|
|
255
|
+ tableDataAll[item.id][props.infoSelect[1].id] = null;
|
|
|
256
|
+ params[item.id][props.infoSelect[1].id] = []
|
|
|
257
|
+ }
|
|
|
258
|
+ })
|
|
|
259
|
+
|
|
|
260
|
+ accItemEvent(props.accIdsList[0])
|
|
|
261
|
+ }
|
|
|
262
|
+ }, { immediate: true })
|
|
|
263
|
+</script>
|
|
|
264
|
+<style lang="scss" scoped>
|
|
|
265
|
+@import './outer.scss';
|
|
|
266
|
+
|
|
|
267
|
+.tabelListBox {
|
|
|
268
|
+ .title {
|
|
|
269
|
+ height: 50px;
|
|
|
270
|
+ background-color: #fafafa;
|
|
|
271
|
+ }
|
|
|
272
|
+}
|
|
|
273
|
+
|
|
|
274
|
+.self_checkbox {
|
|
|
275
|
+ width: 14px;
|
|
|
276
|
+ height: 14px;
|
|
|
277
|
+ border: 1px solid #d9d9d9;
|
|
|
278
|
+ border-radius: 2px;
|
|
|
279
|
+ position: relative;
|
|
|
280
|
+ cursor: pointer;
|
|
|
281
|
+}
|
|
|
282
|
+.self_checkbox_active {
|
|
|
283
|
+ background-color: #3173FF;
|
|
|
284
|
+ border-color: #3173FF;
|
|
|
285
|
+
|
|
|
286
|
+ &::after {
|
|
|
287
|
+ box-sizing: content-box;
|
|
|
288
|
+ content: "";
|
|
|
289
|
+ border: 1px solid #ffffff;
|
|
|
290
|
+ border-left: 0;
|
|
|
291
|
+ border-top: 0;
|
|
|
292
|
+ height: 7px;
|
|
|
293
|
+ left: 4px;
|
|
|
294
|
+ position: absolute;
|
|
|
295
|
+ top: 1px;
|
|
|
296
|
+ transform: rotate(45deg) scaleY(1);
|
|
|
297
|
+ width: 3px;
|
|
|
298
|
+ transition: transform .15s ease-in 50ms;
|
|
|
299
|
+ transform-origin: center;
|
|
|
300
|
+ }
|
|
|
301
|
+}
|
|
|
302
|
+.self_checkbox_disabled{
|
|
|
303
|
+ background-color: #edf2fc;
|
|
|
304
|
+ border-color: #dcdfe6;
|
|
|
305
|
+ cursor: not-allowed;
|
|
|
306
|
+ &::after{
|
|
|
307
|
+ border: none;
|
|
|
308
|
+ }
|
|
|
309
|
+}
|
|
|
310
|
+</style>
|
xiuli.gao