qimall/addons/CloudStock/backend/views/loss-amount/index.php

<?php

use common\helpers\ComponentHelper;
ComponentHelper::loadComponentView('com-list-page');
ComponentHelper::loadComponentView('com-list-table');
ComponentHelper::loadComponentView('com-export-dialog');
ComponentHelper::loadComponentView('com-user-info');

?>

<com-list-page :crumbs="crumbs" id="application">
    <com-list-table
        ref="table"
        @selection-change="handleSelectionChange"
        :search-list="searchList"
        @search="handleSearch"
        @set-action-name="setActionName"
        :active-name="activeName"
        :api-params="apiParams"
        @get-api-data="getApiData"
    >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column prop="user" align="center" min-width="180" label="会员信息">
            <template slot-scope="scope">
                <com-user-info :user="scope.row.user"></com-user-info>
            </template>
        </el-table-column>
        <el-table-column prop="type_text" label="业务类型" align="center"></el-table-column>
        <el-table-column prop="money" label="流失金额" align="center"></el-table-column>
        <el-table-column prop="order_no" label="订单编号" align="center"></el-table-column>
        <el-table-column label="来源会员信息" width="180">
            <template slot-scope="scope">
                <div class="table-info-img-text" v-if="scope.row.from_user">
                    <el-image class="table-info-img circle" :src="scope.row.from_user.avatar_url">
                        <div slot="error" class="image-slot">
                            <com-image src="/resources/img/common/default-avatar.png"></com-image>
                        </div>
                    </el-image>
                    <div class="table-info-text">
                        <div v-if="scope.row.from_user.id">ID：{{scope.row.from_user.id}}</div>
                        <div v-if="scope.row.from_user.nickname">昵称：{{scope.row.from_user.nickname}}
                        </div>
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="name" label="商品信息">
            <template slot-scope="scope">
                <div style="display: flex;align-items: center;">
                    <div style="margin-right:10px;"><img :src="scope.row.cover_pic"
                                                         style="width: 40px;height: 40px;display: block;"/></div>
                    <div>
                        <div style="text-align: left;line-height: 16px;">{{scope.row.goods_name}}</div>
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="num" label="商品数量" align="center"></el-table-column>
        <el-table-column label="创建时间"  align="center">
            <template slot-scope="scope">
                {{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}
            </template>
        </el-table-column>
        <template slot="header-left">
            <com-export-dialog
                style="margin-left: 20px "
                :field_list='exportList'
                :action_url='export_url'
                :params="searchInfo">
            </com-export-dialog>
        </template>

    </com-list-table>
</com-list-page>


<script>
    const application = new Vue({
        el: '#application',
        data: {
            crumbs: [
                {
                    title: '流失金额',
                    router: '',
                }
            ],
            searchList: [
                {
                    key: 'keyword',
                    title: '请输入用户昵称/手机号搜索',
                    type: 'text',
                },
                {
                    key: 'order_no',
                    title: '请输入订单编号',
                    type: 'text',
                },
                {
                    key: 'type',
                    title: '请选择业务类型',
                    type: 'select',
                    options: [
                        {
                            label: '请选择业务类型',
                            value: '0'
                        }, {
                            label: '上级配货',
                            value: '1'
                        },
                        {
                            label: '下级补货',
                            value: '2'
                        }, {
                            label: '会员买货',
                            value: '3'
                        },
                    ],
                    valueKey: {
                        label: 'label',
                        value: 'value',
                    },
                },
                {
                    key: 'date',
                    title: '日期',
                    type: 'date-picker',
                    valueFormat: 'yyyy-MM-dd',
                },


            ],
            btnLoad: false,
            apply_edit: false,
            id:0,
            remark:'',
            check_remark:'',
            check_status:'1',
            export_url: 'cloud-stock/loss-amount/index',     // 导出路径
            exportList: {},
            searchInfo: {
                active_name: 'settlement',
            },
            activeName: 'settlement',
            apiParams:{
                r: 'cloud-stock/loss-amount/index',
                active_name: 'settlement',
            },
            multipleSelection: []

        },
        mounted() {
            this.getExportList();
        },
        methods: {
            getExportList() {
                this.listLoading = true;
                let params = {
                    r: 'cloud-stock/loss-amount/get-export-list',
                };
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        this.exportList = e.data.data;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },


            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSearch(keyword) {
                this.searchInfo = keyword;
                this.searchInfo.active_name = this.activeName;
            },
            setActionName(val) {
                this.searchInfo.active_name = val;
                this.activeName = val
                this.$set(this.apiParams, "active_name", val)
                this.$refs.table.handleSearch();
            },
            getApiData(data) {

            },
            manualSettlement() {
                if (this.multipleSelection.length <= 0) {
                    this.$message.error('请选择要结算的平级奖');
                    return;
                }
                var ids = [];
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    ids.push(this.multipleSelection[i].id);
                }
                let self = this;
                self.$confirm('是否结算已选中数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.listLoading = true;
                    request({
                        params: {
                            r: 'cloud-stock/equal-award/manual-settlement',
                        },
                        method: 'post',
                        data: {
                            id: ids,
                        }
                    }).then(e => {
                        self.listLoading = false;
                        if (e.data.code === 0) {
                            self.$message.success(e.data.msg);
                            this.$refs.table.getList();
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                }).catch(() => {
                    self.$message.info('已取消删除')
                });
            }

        }
    })
</script>