mashangyoujiu/Application/Retail/View/SSupplier/index.html

<!--[1.6.48]-->
<style>
    .content-search {
        margin-bottom: 10px;
    }
</style>
<div id="supplierApp">
    <div class="content-search">
        <el-input placeholder="供货商编码/名称"
                  type="text"
                  style="width: 190px"
                  size="small"
                  v-model="searchForm.text"
                  oninput="value=this.value.trim(' ')"
                  clearable
                  @keydown.enter.exact.native.prevent="searchData"></el-input>
        <el-button type="primary" plain @click="searchData"  size="small">搜索</el-button>
        <el-button @click="supplierSet()" size="small">添加供货商</el-button>
        <el-button @click="exportSupplier()" size="small">导出</el-button>
    </div>

    <!--供应商列表-->
    <div style="width: 100%;">
        <el-table border :data="supplierList"
                  style="width: 100%;"
                  size="small">
            <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
            <el-table-column align="center" prop="code" label="编码" min-width="80"></el-table-column>
            <el-table-column align="center" prop="supplier_name" label="供货商名称" min-width="100"
                             show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="linkman" label="联系人" min-width="80"
                             show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="phone" label="联系方式" min-width="100"
                             show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="place" label="地址信息" min-width="100"
                             show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="operation_mode" label="经营方式" min-width="80"
                             show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="settlement_method" label="结算方式" min-width="80"
                             show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="settlement_days" label="结算天数" min-width="80"
                             show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="bank_card" label="银行卡号" min-width="100"
                             show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="操作" width="100px">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="supplierSet(scope.row.id)">编辑
                    </el-button>
                    <el-button type="text"
                               size="mini"
                               style="color: #999"
                               @click="del(scope.row.id)">删除
                    </el-button>
                </template>
            </el-table-column>
            <div slot="empty" v-if="!loading">暂无数据</div>
            <div slot="empty" v-else><span class="el-icon-loading"></span></div>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchForm.page"
                :page-sizes="[1, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="currentLen">
        </el-pagination>
    </div>
</div>
<script>
    new Vue({
        el: '#supplierApp',
        data: {
            searchForm: {
                text: '',
                page: 1,
                limit: 10
            },
            loading: false,
            currentLen: 0,
            supplierList: [],
            operate: {
                add: "{$authArr['add']}",
                del: "{$authArr['deleteOperation']}",
                export: "{$global_store_jurisdiction['data_export']}" != 2 ? true : false,
            }
        },
        methods: {
            //编辑、新增
            supplierSet(id) {
                MenuApp.pathData.push({
                    name: id ? '编辑供应商' : '新增供应商',
                    path: "{:U('supplierSet')}?id=" + id,
                    onClose: () => {
                        this.getData();
                    }
                })
            },
            //删除
            del(id) {
                this.$confirm("确定要删除该供应商吗？", "温馨提示", {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(() => {
                    $.ajax({
                        url: "{:U('delete')}",
                        type: 'post',
                        data: {
                            id: id,
                        },
                        success: (res) => {
                            if (res.status == 1) {
                                this.getData();
                                this.$message({
                                    message: res.msg,
                                    type: 'success',
                                    duration: 1000,
                                });
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: 'error',
                                    duration: 1000
                                });
                            }
                        },
                        error: (data) => {
                            console.log(data);
                            this.$alert('请求发生错误，请稍后重试！', '错误提示', {
                                confirmButtonText: '确定',
                                callback: action => {

                                }
                            });
                        }
                    })
                }).catch(() => {
                })
            },
            //准备搜索
            searchData() {
                this.searchForm.page = 1;
                this.getData();
            },
            //切换每页数量
            handleSizeChange(val) {
                this.searchForm.limit = val;
                this.searchForm.page = 1;
                this.getData();
            },
            //切换页数
            handleCurrentChange(val) {
                this.searchForm.page = val;
                this.getData();
            },
            //获取分销商品列表
            getData() {
                this.supplierList = [];
                this.loading = true;
                $.ajax({
                    url: "{:U('supplierList')}",
                    type: 'post',
                    data: {
                        ...this.searchForm,
                    },
                    success: (res) => {
                        this.loading = false;
                        if (res.status == 1) {
                            this.supplierList = res.data;
                            this.currentLen = res.count * 1;
                        }
                    },
                    error: (data) => {
                        console.log(data);
                        this.loading = false;
                        this.$alert('请求发生错误，请稍后重试！', '错误提示', {
                            confirmButtonText: '确定',
                            callback: action => {

                            }
                        });
                    }
                })
            },
            //导出
            exportSupplier() {
                this.$confirm("确定要导出当前列表供应信息吗？", "温馨提示", {
                    confirmButtonText: '导出',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(() => {
                    window.location.href = "{:U('exportList')}?text=" + this.searchForm.text;
                }).catch(() => {
                })
            }

        },
        created() {
            this.getData();
        }
    });
</script>