dootask/resources/assets/js/pages/manage/components/ReportReceive.vue

<template>
    <div class="report-list-wrap">
        <Row class="reportmy-row report-row-header">
            <Col  span="2"><p class="reportmy-titles">{{ $L("汇报人") }}</p></Col>
            <Col span="4">
                <Input style="width:100%" v-model="username" :placeholder="$L('请输入用户名')"/>
            </Col>
            <Col  span="1"></Col>
            <Col  span="2"><p class="reportmy-titles">{{ $L("汇报类型") }}</p></Col>
            <Col span="4">
                <Select
                    v-model="reportType"
                    style="width:100%"
                    :placeholder="this.$L('全部')"
                    @on-change="typePick"
                >
                    <Option v-for="item in reportTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </Col>
            <Col  span="1"></Col>
            <Col  span="2"><p class="reportmy-titles">{{ $L("汇报时间") }}</p></Col>
            <Col span='4'>
                <DatePicker
                    type="daterange"
                    split-panels
                    :placeholder="this.$L('请选择时间')"
                    style="width: 100%;"
                    @on-change="timePick"
                ></DatePicker>
            </Col>
            <Col  span="1"></Col>
            <Col  span="3"><Button type="primary" icon="ios-search" @click="searchTab">{{ $L("搜索") }}</Button></Col>
        </Row>
        <Table class="tableFill report-row-content" ref="tableRef"
               :columns="columns" :data="lists"
               :loading="loadIng > 0"
               :no-data-text="$L(noDataText)" stripe></Table>
        <Page class="page-box report-row-foot" :total="listTotal" :current="listPage" :disabled="loadIng > 0"
              @on-change="setPage" @on-page-size-change="setPageSize" :page-size-opts="[10,20,30,50,100]"
              placement="top" show-elevator show-sizer show-total transfer />
    </div>
</template>

<script>
export default {
    name: "ReportReceive",
    data() {
        return {
            loadIng: 0,
            columns: [],
            lists: [],
            listPage: 1,
            listTotal: 0,
            listPageSize: 10,
            noDataText: "",

            username:'',
            reportType:'',
            createAt: [],
            reportTypeList:[
                {value:"",label:'全部' },
                {value:"weekly",label:'周报' },
                {value:"daily",label:'日报' },
            ],
        }
    },
    mounted() {
        this.getLists();
    },
    methods: {
        initLanguage() {
            this.noDataText = this.noDataText || "数据加载中.....";
            this.columns = [{
                "title": this.$L("标题"),
                "key": 'title',
                "sortable": true,
                "minWidth": 120,
                render: (h, params) => {
                    let arr = []
                    if(params.row.receives_user[0].pivot.read==0){
                        arr.push(
                            h('Tag', {
                                props: {   //传递参数
                                    color: "orange",
                                }
                            },  this.$L("未读")),
                            h('span',params.row.title)
                        )
                    }else {
                        arr.push(
                            h('span',params.row.title)
                        )
                    }

                    return h('div',arr)
                }
            }, {
                "title": this.$L("类型"),
                "key": 'type',
                "align": 'center',
                "sortable": true,
                "maxWidth": 80,
            }, {
                "title": this.$L("接收时间"),
                "key": 'receive_time',
                "align": 'center',
                "sortable": true,
                "maxWidth": 180,
            }, {
                "title": " ",
                "key": 'action',
                "align": 'right',
                "width": 40,
                render: (h, params) => {
                    if (!params.row.id) {
                        return null;
                    }
                    let arr = [
                        h('ETooltip', {
                            props: { content: this.$L('查看'), transfer: true, delay: 600 },
                            style: { position: 'relative' },
                        }, [h('Icon', {
                            props: { type: 'md-eye', size: 16 },
                            style: { margin: '0 3px', cursor: 'pointer' },
                            on: {
                                click: () => {
                                    this.$emit("detail", params.row)
                                    this.lists[params.index].receives_user[0].pivot.read = 1
                                }
                            }
                        })])
                    ];
                    return h('div', arr);
                },
            }];
        },

        getLists() {
            this.loadIng = 1;
            this.$store.dispatch("call", {
                url: 'report/receive',
                data: {
                    page: this.listPage,
                    pagesize: this.listPageSize,
                    username: this.username,
                    created_at: this.createAt,
                    type: this.reportType
                },
                method: 'get',
            }).then(({data, msg}) => {
                // data 结果数据
                this.lists = data.data;
                this.listTotal = data.total;
                if ( this.lists.length <= 0 ) {
                    this.noDataText = this.$L("无数据");
                }
                // msg 结果描述
            }).catch(({msg}) => {
                // msg 错误原因
                $A.messageError(msg);
            }).finally( () => {
                this.loadIng = 0;
            } );
        },
        setPage(page) {
            this.listPage = page;
            this.getLists();
        },
        setPageSize(size) {
            if (Math.max($A.runNum(this.listPageSize), 10) !== size) {
                this.listPageSize = size;
                this.getLists();
            }
        },

        timePick(e){
            this.createAt = e;
        },
        typePick(e){
            // console.log(e)
        },
        searchTab() {
            this.getLists();
        },
    }
}
</script>

<style scoped>

</style>