carInsightSystem/src/views/TailInsightDetails/rearWingInformationList/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-13 18:14:01
 * @LastEditTime: 2021-12-14 18:27:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/TailInsightDetails/rearWingInformationList/index.vue
-->
<template>
    <div class="rwl-outter">
        <v-label-div title="尾翼信息列表"></v-label-div>
        <div class="rwl-inner">
            <a-form layout="inline" :form="form">
                <!-- <a-form-item label="来源选择">
                    <a-select v-model="form.sSource" style="width: 240px">
                        <a-select-option value="jack">
                            Jack
                        </a-select-option>
                        <a-select-option value="lucy">
                            Lucy
                        </a-select-option>
                        <a-select-option value="Yiminghe">
                            yiminghe
                        </a-select-option>
                    </a-select>
                </a-form-item> -->
                <a-form-item label="车型">
                    <a-select v-model="form.sSeriesName" style="width: 240px" @change="handlerChangeModel">
                        <a-select-option :value="item.name" v-for="(item,index) in models" :key="index">
                            {{item.name}}
                        </a-select-option>
                    </a-select>
                </a-form-item>
            </a-form>
            <div class="rwl-tb">
                <v-table :columns="columns" :loading="tableLoading" :data="tdata" :pagination="pagination" @change="handlerPage">
                    <template slot="titles" slot-scope="text, record">
                        <a :href="record.url" style="color: #fff" target="_blank">{{ text|doStr(100) }}</a>
                        <a-tag color="#108ee9" v-if="record.affections === 1" style="margin-left: 0.6rem;margin-right: 0px;">正面</a-tag>
                        <a-tag color="#fece42" v-if="record.affections === 3" style="margin-left: 0.6rem;margin-right: 0px">中性</a-tag>
                        <a-tag color="#cb7632" v-if="record.affections === 2" style="margin-left: 0.6rem;margin-right: 0px">负面</a-tag>
                    </template>
                </v-table>
            </div>
        </div>
    </div>
</template>

<script>
import { getUserSeriesName } from "@/api/comm";
import { getList0528 } from "@/api/TailInsightdetails";
export default {
    name: "rearWingInformationList",
    data() {
        return {
            load: false,
            tableLoading: false,
            form: {
                sSource: "",
                token: "",
                sBrand: "",
                iPageIndex: 1,
                iPageSize: 20,
                sSeriesName: "",
            },
            pagination: {
                current: 1,
                pageSize: 20,
                total: 0,
                "show-total": (total) => `共 ${total} 条`,
            },
            models: [],
            columns: [
                {
                    title: "尾翼信息",
                    key: "title",
                    dataIndex: "title",
                    scopedSlots: { customRender: "titles" },
                },
                {
                    title: "来源",
                    key: "source",
                    dataIndex: "source",
                    width: 120,
                },
                {
                    title: "作者",
                    key: "user_author",
                    dataIndex: "user_author",
                    width: 200,
                },
                {
                    title: "发布时间",
                    key: "sourcetime",
                    dataIndex: "sourcetime",
                    width: 180,
                },
                {
                    title: "车型",
                    key: "modelName",
                    dataIndex: "modelName",
                    width: 100,
                },
            ],
            tdata: [],
        };
    },
    created() {
        this.form.token = this.getToken;
        this.form.sBrand = this.getBrand.brandname || "奥迪";
        this.getSeriesName().then(() => {
           this.getData();
        }); 
        
    },
    methods: {
        // 获取车型
        getSeriesName() {
            return new Promise((resolve, reject) => {
                let obj = {
                    token: this.getToken,
                    sBrandName: this.form.sBrand,
                };
                getUserSeriesName(obj).then((res) => {
                    let data = res.data || [];
                    this.models = data;
                    if(this.models.length > 0) {
                        this.form.sSeriesName = this.models[0].name;
                    }
                    resolve(res)
                }).catch(() => {
                    reject(false)
                });
            });
        },
        // 获取列表数据
        getData() {
            let obj = Object.assign({}, this.getCtime2, this.form);
            this.tableLoading = true;
            getList0528(obj).then((res) => {
                let data = res.data || [];
                let arr = [];
                data.forEach((ele) => {
                    let o = { ...ele._source };
                    if (o.affections === 1) {
                        o.affectionstr = "正面";
                    } else if (o.affections === 2) {
                        o.affectionstr = "负面";
                    } else {
                        o.affectionstr = "中性";
                    }
                    o.modelName = this.form.sSeriesName;
                    arr.push(o);
                });
                this.tdata = arr;
                let totalNum = res.totalNum || 0;
                this.pagination.total = totalNum;
                this.tableLoading = false;
            });
        },
        // 选择车型的数据
        handlerChangeModel() {
            this.form.iPageIndex = 1;
            this.pagination.current = 1;
            this.getData();
        },
        // 改变页面的数据
        handlerPage(p) {
            let iPageIndex = p.current;
            this.form.iPageIndex = iPageIndex;
            this.pagination.current = iPageIndex;
            this.getData();
        },
    },
};
</script>

<style lang="less" scoped>
.rwl-outter {
    width: 100%;
    //height: 632px;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    .rwl-inner {
        padding: 16px;
        height: calc(100% - 48px);
    }
}
.rwl-tb {
    margin-top: 16px;
}
</style>