PointsMall_Admin/src/views/product/productAdd/components/OilStationSelection.vue

<template>
    <div>
        <el-form ref="artFrom" :model="page" label-width="80px" label-position="right" class="tabform"
            @submit.native.prevent inline>
            <el-form-item label="输入搜索">
                <el-input clearable v-model="page.params.siteName" placeholder="请输入油站名称"
                    class="form_content_width"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="userSearchs">查询</el-button>
                <el-button type="primary" @click="submit">确定选择</el-button>
            </el-form-item>
        </el-form>
        <el-table max-height="500" @selection-change="selectionChange" v-loading="loading" ref="table" :data="tableList"
            highlight-current-row empty-text="暂无数据" class="mt14">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="油站名称" prop="siteName"> </el-table-column>
            <el-table-column label="渠道" prop="channel"> </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="page.currentPage" :page-sizes="[10, 15, 20, 30]" :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" />
    </div>
</template> 
<script>
import productApi from '@/api/product/productAttr.js';
export default {
    name: "OilStationSelection",
    props: {
        OilStationSelectionList: {
            type: Array,
            default: () => []
        },
        selectAttrId: {
            type: String,
            default: () => ""
        }
    },
    data() {
        return {
            selectionList: [],
            loading: false,
            tableList: [],
            page: {
                "currentPage": 1,
                "pageSize": 10,
                "totalCount": 0,
                "params": {
                    "siteName": ""
                },
            }
        }
    },
    watch: {
        OilStationSelectionList:{
            handler(n,o){
                this.$refs.table.clearSelection();
                n.forEach(element => {
                this.$refs.table.toggleRowSelection(element);
                });
            },
            deep:true
        }
    },
    created() {
        this.init()
    },
    methods: {
        submit() {
            this.$emit('submit', this.getSelectionList())
        },
        getSelectionList() {
            return this.selectionList
        },
        selectionChange(e) {
            this.selectionList = e
        },
        userSearchs() {
            this.getByPage()
        },
        isStrictPromise(value) {
            return !!value
                && typeof value === 'object'
                && typeof value.then === 'function'
                && typeof value.finally === 'function';
        },
        loadingFn(callback) {
            this.loading = true;
            if (this.isStrictPromise(callback)) {
                callback.finally(() => {
                    this.loading = false;
                })
            };
        },
        getByPage() {
            this.loadingFn(productApi.getAllSites(this.page).then(res => {
                // ({
                //     data: this.tableList = [],
                //     currentPage: this.page.currentPage,
                //     pageSize: this.page.pageSize,
                //     totalCount: this.page.totalCount
                // } = res.data);
                this.tableList = res.data
                console.log(res)
            }));
        },
        handleCurrentChange(val) {
            this.page.currentPage = val
            this.getByPage()
        },
        handleSizeChange(val) {
            this.page.pageSize = val
            this.getByPage()
        },
        del(e) {
            productApi.delete(e).then(res => {
                if (res.code == 20000) {
                    this.$message.success('操作成功')
                    this.handleCurrentChange();
                }
            })
        },
        edit(row) {
            let data = Object.assign({}, row, {
                name: this.selectAttrId.split("/")[1] || "",
                spec: [{
                    value: row.attributeName,
                    detail: row.attributeContent.split(",")
                }],
            })
            this.$parent.$parent.selection = [data];
            this.$parent.$parent.addAttr('typeUpdate');
        },
        init() {
            // this.getByPage();

            // if (this.selectAttrId && this.selectAttrId.indexOf("/") !== -1) {
            //     this.page.params.typeId = this.selectAttrId.split("/")[0] || "";
            //     this.getByPage();
            // } else {
            //     this.$message.warning("初始化出错")
            // }
        }
    }
}
</script>

<style></style>