You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
292 lines
9.7 KiB
292 lines
9.7 KiB
<!--
|
|
* @Author: your name
|
|
* @Date: 2021-10-18 10:56:38
|
|
* @LastEditTime: 2021-11-15 16:18:25
|
|
* @LastEditors: Please set LastEditors
|
|
* @Description: In User Settings Edit
|
|
* @FilePath: /data-show/src/views/EventComparison/eventRecommendationList/index.vue
|
|
-->
|
|
|
|
<template>
|
|
<div class="erl-outter">
|
|
<v-label-div title="事件推荐列表">
|
|
</v-label-div>
|
|
<div class="erl-inner">
|
|
<a-form-model layout="inline" :model="formInline">
|
|
<a-form-model-item label="品牌选择">
|
|
<a-select v-model="formInline.sBrand" :filter-option="filterOption" placeholder="品牌选择" style="width: 14rem;" show-search allowClear @change="brandChange">
|
|
<a-select-option :value="item.brandname" v-for="item in brands" :key="item.brandid">
|
|
{{item.brandname}}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-model-item>
|
|
<a-form-model-item label="车型选择">
|
|
<a-select v-model="formInline.sSeriesName" placeholder="车型选择" style="width: 14rem;" allowClear>
|
|
<a-select-option v-for="(item,index) in models" :key="index" :value="item.name">
|
|
{{item.name}}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-model-item>
|
|
<a-form-model-item label="事件类型">
|
|
<a-select v-model="formInline.sQuDao" placeholder="事件类型" style="width: 14rem;">
|
|
<a-select-option :value="item.key" v-for="(item,index) in quDaos" :key="index">
|
|
{{item.value}}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-model-item>
|
|
<a-form-model-item label="关键词语">
|
|
<a-input v-model="formInline.sTitle" placeholder="关键词" style="width: 14rem;">
|
|
</a-input>
|
|
</a-form-model-item>
|
|
<a-form-model-item>
|
|
<a-button type="primary" style="margin-left: 1.4rem" :loading="btnLoading" @click="handlerSearch">搜索</a-button>
|
|
<a-button style="margin-left: 1.2rem" @click="handlerR">重置</a-button>
|
|
</a-form-model-item>
|
|
</a-form-model>
|
|
<v-table :columns="columns" :data="tbData" table-layout='fixed' style="margin-top: 1.3rem" :pagination="pagination" :rowKey="(record,index)=>{return index}" @change="handlerPage">
|
|
<span slot="action" slot-scope="text, record">
|
|
<a-button @click="handlerAdd(record)">添加</a-button>
|
|
</span>
|
|
</v-table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getUserBrand,getUserSeriesName, getEventType } from "@/api/comm";
|
|
import {getEventList} from "@/api/EventComparison"
|
|
import {arrDup} from "@/utils/gol/dataTool"
|
|
export default {
|
|
name: "eventRecommendationList",
|
|
data() {
|
|
return {
|
|
labelCol: { span: 4 },
|
|
wrapperCol: { span: 14 },
|
|
brands: [],
|
|
models: [],
|
|
quDaos: [],
|
|
btnLoading: false,
|
|
formInline: {
|
|
sBrand: undefined,
|
|
sQuDao: undefined,
|
|
sSeriesName: undefined,
|
|
sTitle: "",
|
|
iPageIndex: 1,
|
|
iPageSize: 20,
|
|
token: "",
|
|
},
|
|
pagination: {
|
|
current: 1,
|
|
total: 0,
|
|
pageSize: 20,
|
|
"show-total": (total) => `共 ${total} 条`,
|
|
},
|
|
columns: [
|
|
{
|
|
title: "事件类型",
|
|
dataIndex: "events_type",
|
|
key: "events_type",
|
|
},
|
|
{
|
|
title: "事件标题",
|
|
width: 230,
|
|
dataIndex: "events_title",
|
|
ellipsis: true,
|
|
key: "events_title",
|
|
},
|
|
{
|
|
title: "相关品牌",
|
|
dataIndex: "events_brand",
|
|
key: "events_brand",
|
|
},
|
|
{
|
|
title: "相关车型",
|
|
dataIndex: "events_series",
|
|
key: "events_series",
|
|
},
|
|
{
|
|
title: "开始时间",
|
|
dataIndex: "minSourcetime",
|
|
width: 160,
|
|
key: "minSourcetime",
|
|
},
|
|
{
|
|
title: "文章篇数(篇)",
|
|
dataIndex: "events_count",
|
|
key: "events_count",
|
|
},
|
|
{
|
|
title: "传播周期(天)",
|
|
dataIndex: "days",
|
|
key: "days",
|
|
},
|
|
// {
|
|
// title: "信息条数(条)",
|
|
// dataIndex: "h",
|
|
// key: "h",
|
|
// },
|
|
// {
|
|
// title: "传播人数(人)",
|
|
// dataIndex: "j",
|
|
// key: "j",
|
|
// },
|
|
{
|
|
title: "操作",
|
|
key: "action",
|
|
width: 120,
|
|
scopedSlots: { customRender: "action" },
|
|
},
|
|
],
|
|
tbData: [],
|
|
chooseList: [
|
|
{
|
|
events_id: "",
|
|
events_typ: "",
|
|
events_title: "",
|
|
minSourcetime: "",
|
|
events_count: "",
|
|
isDel: false
|
|
},
|
|
{
|
|
events_id: "",
|
|
events_typ: "",
|
|
events_title: "",
|
|
minSourcetime: "",
|
|
events_count: "",
|
|
isDel: false
|
|
},
|
|
]
|
|
};
|
|
},
|
|
created() {
|
|
this.getQuDao();
|
|
this.getBrands();
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
// 获取后台数据
|
|
getData() {
|
|
this.formInline.token = this.getToken;
|
|
let obj = Object.assign({}, this.getCtime2, this.formInline);
|
|
getEventList(obj).then(res => {
|
|
let data = res.data;
|
|
this.pagination.total = res.totalNum;
|
|
this.tbData = data;
|
|
this.btnLoading = false;
|
|
})
|
|
},
|
|
// 获取品牌
|
|
getBrands() {
|
|
if (!this.getToken) return;
|
|
let obj = {};
|
|
return new Promise((resolve, reject) => {
|
|
obj.token = this.getToken;
|
|
getUserBrand(obj)
|
|
.then((res) => {
|
|
let data = res.data;
|
|
let arr = arrDup(data, 'brandname')
|
|
this.brands = arr;
|
|
resolve(true);
|
|
})
|
|
.catch(() => {
|
|
reject(false);
|
|
});
|
|
});
|
|
},
|
|
// 输入查询
|
|
filterOption(input, option) {
|
|
return (
|
|
option.componentOptions.children[0].text
|
|
.toLowerCase()
|
|
.indexOf(input.toLowerCase()) >= 0
|
|
);
|
|
},
|
|
// 选择品牌
|
|
brandChange(val) {
|
|
if(val) {
|
|
this.getUserSeriesName(val);
|
|
} else {
|
|
this.models = [];
|
|
}
|
|
|
|
},
|
|
// 获取车型
|
|
getUserSeriesName(brandName) {
|
|
let obj = {
|
|
token: this.getToken,
|
|
sBrandName: brandName
|
|
}
|
|
getUserSeriesName(obj).then(res => {
|
|
let data = res.data || [];
|
|
this.models = data;
|
|
})
|
|
},
|
|
// 获取渠道
|
|
getQuDao() {
|
|
getEventType().then(res => {
|
|
let data = res.data || [];
|
|
this.quDaos = data;
|
|
})
|
|
},
|
|
// 分页
|
|
handlerPage(p) {
|
|
let iPageIndex = p.current;
|
|
this.formInline.iPageIndex = iPageIndex;
|
|
this.pagination.current = iPageIndex;
|
|
this.getData();
|
|
},
|
|
// 查询
|
|
handlerSearch() {
|
|
this.formInline.iPageIndex = 1;
|
|
this.pagination.current = 1;
|
|
this.pagination.total = 0;
|
|
this.btnLoading = true;
|
|
this.getData();
|
|
},
|
|
// 重置
|
|
handlerR() {
|
|
let obj = {
|
|
sBrand: undefined,
|
|
sQuDao: undefined,
|
|
sSeriesName: undefined,
|
|
sTitle: "",
|
|
iPageIndex: 1,
|
|
iPageSize: 20,
|
|
}
|
|
this.formInline = {...obj};
|
|
this.handlerSearch()
|
|
},
|
|
// 添加的功能
|
|
handlerAdd(row) {
|
|
let x = this.chooseList.findIndex(ele => ele.events_id === row.events_id);
|
|
if(x != -1) return
|
|
let arr = [...this.chooseList];
|
|
let obj = Object.assign({}, row);
|
|
let n = this.chooseList.findIndex(ele => !ele.events_id);
|
|
obj.isDel = true;
|
|
arr[n] = {...obj};
|
|
this.chooseList = arr;
|
|
this.$emit('change', this.chooseList);
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.erl-outter {
|
|
width: 100%;
|
|
height: 586px;
|
|
border: 2px solid #0f2a4d;
|
|
margin-top: 16px;
|
|
.erl-inner {
|
|
width: 100%;
|
|
height: calc(100% - 48px);
|
|
padding: 16px;
|
|
}
|
|
}
|
|
/deep/ .ant-table-body {
|
|
height: 400px;
|
|
overflow: auto;
|
|
}
|
|
</style>
|