smart-bus-portal/src/views/base/billInfo-list.vue

<template>
    <div>
        <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="#">系统管理</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/billInfo">账单推送管理</a>
        </el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-form
        ref="queryForm"
        :model="queryModel"
        inline
        class="demo-form-inline"
        >
        <el-form-item label="账单名称" prop="billName">
            <el-input
            type="text"
            size="mini"
            v-model="queryModel.billName"
            ></el-input>
        </el-form-item>
        <el-form-item>
            <el-button
            type="primary"
            size="mini"
            icon="ios-search"
            @click="changePage(1)"
            :loading="loading"
            >查询</el-button
            >&nbsp;
            <el-button
            type="info"
            size="mini"
            style="margin-left: 8px"
            @click="handleReset('queryForm')"
            >重置</el-button
            >&nbsp;
        </el-form-item>
    </el-form>
        <el-divider></el-divider>
        <el-row class="button-group">
        <el-button
            type="primary"
            size="small"
            plain
            icon="el-icon-circle-plus"
            @click="handleAdd"
            >新增</el-button
        >
        <el-button
            type="primary"
            size="small"
            plain
            icon="el-icon-circle-plus"
            :disabled="multipleSelection.length == 0"
            @click="handleBatchDelete"
            >删除选中项</el-button
        >
        </el-row>
        <el-table
        :data="tableData"
        style="min-height: 400px"
        v-loading="loading"
        stripe
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
        >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
            type="index"
            label="序号"
            :index="indexMethod"
        ></el-table-column>
        <el-table-column
            prop="billName"
            label="账单名称"
        ></el-table-column>
        <el-table-column
            prop="billRemark"
            label="账单备注"
        ></el-table-column>
        <el-table-column prop="wxShow"  label="手机端会费公示">
            <template slot-scope="{ row }">
                <span v-if="row.wxShow">是</span>
                <span v-else>否</span>
            </template>
        </el-table-column>
        <el-table-column prop="picUrl" label="图片">
            <template slot-scope="{ row }">
                <a :href="row.picUrl" target="_blank" v-if="row.picUrl">
                    <el-avatar
                    :size="48"
                    shape="circle"
                    :src="
                        row.picUrl +
                        '?x-oss-process=image/resize,m_fill,w_64,h_64'
                    "
                    :key="row.id"
                    ></el-avatar>
                </a> 
            </template>
        </el-table-column>
        <el-table-column prop="status" label="推送状态">
            <template slot-scope="{ row }">
                <span v-if="row.status=='0'">未推送</span>
                <span v-if="row.status=='1'">已推送</span>
            </template>
        </el-table-column>
        <el-table-column label="操作"  width="200">
            <template slot-scope="{ row }">
                <el-col :span="12">
                    <el-link size="mini" type="primary" @click="handleBillDetail(row)"
                        >子账单</el-link
                    >
                </el-col>
                <el-col :span="12">
                    <el-link size="mini" type="success" @click="pushMessage(row)"
                        >推送账单消息</el-link
                    >
                </el-col>
                <el-col :span="12">
                    <el-link size="mini" type="warning" @click="handleEdit(row)"
                        >编辑</el-link
                    >
                </el-col>
                <el-col :span="12">
                    <el-link size="mini" type="danger" @click="handleDelete(row)"
                        >删除</el-link
                    >
                </el-col>
            </template>
        </el-table-column>
        </el-table>
        <el-pagination
        :current-page.sync="pageIndex"
        :total="totalElements"
        :page-sizes="pageSizeList"
        @current-change="changePage"
        @size-change="pageSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
        <billInfo-detail
        v-if="showModal"
        :businessKey="businessKey"
        :title="modalTitle"
        @close="onDetailModalClose"
        ></billInfo-detail>
        <billDetail-list
        v-if="showModal2"
        :businessKey="businessKey"
        :title="modalTitle2"
        @close="onDetailModalClose2"
        ></billDetail-list>
    </div>
</template>
<script>
import Constant from "@/constant";
import billInfoDetail from "./billInfo-detail";
import billDetailList from "./billDetail-list";
import billInfoApi from "@/api/base/billInfo";
import billDetailApi from "@/api/base/billDetail";
export default {
    name: "BaseBillInfoList",
    data() {
        return{
            queryModel: {
                billName:"",
            },
            loading: false,
            tableData: [],
            pageIndex: 1,
            pageSize: 10,
            totalPages: 0,
            totalElements: 0,
            field: "",
            direction: "",
            pageSizeList: [10, 20, 30],
            multipleSelection: [],
            showModal: false,
            showModal2: false,
        }
    },
    methods:{
        indexMethod(index) {
            return (this.pageIndex - 1) * this.pageSize + (index + 1);
        },
        changePage(pageIndex) {
            var self = this;

            self.loading = true;

            self.pageIndex = pageIndex;
            var formData = new FormData();

            formData.append("pageIndex", self.pageIndex);
            formData.append("pageSize", self.pageSize);
            formData.append("billName", self.queryModel.billName);

            billInfoApi
                .pageList(formData)
                .then(function (response) {
                self.loading = false;

                var jsonData = response.data.data;

                self.tableData = jsonData.data;
                self.totalPages = jsonData.totalPages;
                self.totalElements = jsonData.recordsTotal;
                })
                .catch((error) => {
                self.loading = false;
                // self.$message.error(error + "");
                });
        },
        pageSizeChange(pageSize) {
            this.pageSize = pageSize;

            this.$nextTick(() => {
                this.changePage(this.pageIndex);
            });
        },
        sortChange(data) {
            this.field = data.column.field;
            this.direction = data.order;

            this.changePage(this.pageIndex);
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleReset(name) {
            this.$refs[name].resetFields();
        },
        handleAdd() {
            this.modalTitle = "新增";
            this.businessKey = "";
            this.showModal = true;
        },
        handleEdit(record) {
            this.modalTitle = "编辑";
            this.businessKey = record.id;
            this.showModal = true;
        },
        handleBillDetail(record){
            this.modalTitle2 = "子账单";
            this.businessKey = record.id;
            this.showModal2 = true;
        },
        handleDelete(record) {
            var self = this;

            self
                .$confirm("是否确认删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                })
                .then(() => {
                billInfoApi.remove(record.id).then(function (response) {
                    var jsonData = response.data;

                    if (jsonData.result) {
                    // var index = self.tableData.indexOf(record);
                    // self.tableData.splice(index, 1);
                    self.changePage(self.pageIndex);

                    self.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                    }
                });
                });
        },
        handleBatchDelete() {
            var self = this;

            var idList = this.multipleSelection.map((record) => {
                return record.id;
            });

            this.$confirm("是否确认删除选中项？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                billInfoApi.batchRemove(idList).then(function (response) {
                var jsonData = response.data;

                if (jsonData.result) {
                    self.changePage(self.pageIndex);

                    self.$message({
                    type: "success",
                    message: "删除成功!",
                    });
                }
                });
            });
        },
        onDetailModalClose(refreshed) {
            //保存成功后回调
            this.showModal = false;

            if (refreshed) {
                this.changePage(this.pageIndex);
            }
        },
        onDetailModalClose2(refreshed) {
            //保存成功后回调
            this.showModal2 = false;

            if (refreshed) {
                this.changePage(this.pageIndex);
            }
        },
        pushMessage(record){
            var self = this;
            var billId = record.id

            self.$confirm("是否确认推送消息?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                })
                .then(() => {

                billDetailApi.pushMessage(billId).then(function (response) {
                    var jsonData = response.data;

                    if (jsonData.result) {
                        // var index = self.tableData.indexOf(record);
                        // self.tableData.splice(index, 1);
                        self.changePage(self.pageIndex);

                        self.$message({
                            type: "success",
                            message: "推送消息成功!",
                        });
                    }
                });
            });
        }
    },
    mounted: function () {
        this.changePage(1);
    },
    components: {
        "billInfo-detail": billInfoDetail,
        "billDetail-list":billDetailList,
    },
}
</script>
<style scoped>
.el-breadcrumb {
  margin: 10px;
  line-height: 20px;
}

.el-divider {
  margin: 5px 0;
}

.demo-form-inline {
  margin-left: 10px;
  text-align: left;
}

.button-group {
  margin-left: 10px;
  text-align: left;
}
</style>