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

<!--[1.8.32]-->
<div id="industryApp">
    <div style="display: flex;padding-bottom: 10px;flex-wrap: wrap;">
        <el-input v-model="searchForm.name" clearable
                  @keydown.enter.exact.native.prevent="searchData"
                  style="width:200px;margin-right: 10px" size="small"
                  placeholder="行业名称"></el-input>
        <el-button type="primary" @click="searchData" size="small">查询</el-button>
        <el-button v-if="operate.addStoreIndustry"
                   type="primary" plain
                   @click="ruleForm.id='';showAddIndustry=true"
                   size="small">新增
        </el-button>
    </div>
    <div>
        <template>
            <el-table :data="dataList" :header-cell-style="{background:'#F5F7FA',color:'#606266'}"
                      :highlight-current-row="true"
                      border size="small" max-height="500">
                <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                <el-table-column prop="name" align="center" label="行业名称" min-width="150"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column prop="store_num" align="center" label="门店数量" show-overflow-tooltip
                                 min-width="80"></el-table-column>
                <el-table-column prop="add_time" align="center" label="添加时间" show-overflow-tooltip
                                 min-width="150"></el-table-column>
                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini"
                                   v-if="operate.editStoreIndustry"
                                   @click="editIndustry(scope.row)">编辑
                        </el-button>
                        <el-button type="text" size="mini" style="color:#999"
                                   v-if="operate.delStoreIndustry"
                                   @click="delIndustry(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="sizeChange"
                    @current-change="currentChange"
                    layout="total, sizes, prev, pager, next, jumper"
                    :pager-count="5"
                    :page-sizes="[10,20,30,40,50,60,70,80,90]"
                    :page-size="10"
                    :total="count">
            </el-pagination>
        </template>
    </div>
    <el-dialog :title="ruleForm.id?'编辑行业':'新增行业'" :append-to-body="true"
               :visible.sync="showAddIndustry" :before-close="closeEditIndustry"
               width="400px">
        <el-form size="small" label-width="80px" ref="ruleForm" :rules="rules" :model="ruleForm" @submit.native.prevent>
            <el-form-item label="行业名称" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入行业名称" maxLength="20"></el-input>
            </el-form-item>
        </el-form>
        <div style="text-align: center;margin-top: 50px">
            <el-button type="primary" size="medium" @click="saveIndustry">保存</el-button>
        </div>
    </el-dialog>
</div>
<script>
    var industryApp = new Vue({
        el: '#industryApp',
        data() {
            return {
                dataList: [],                      // 数据
                searchForm: {
                    add_time: '',
                    name: '',
                    page: 1,                            // 分页
                    limit: 10,                          // 每页显示条数
                },//搜索表单
                count: 0,                           // 总条数
                showAddIndustry: false,                //是否显示添加
                operate: {},                     //权限
                ruleForm: {
                    id: 0,
                    name: '',
                },//新增、编辑表单
                rules: {
                    name: [{message: '请输入行业名称', required: true, trigger: 'change'}],
                },
            };
        },
        methods: {
            //编辑行业
            editIndustry(item) {
                this.ruleForm = {
                    id: item.id,
                    name: item.name,
                };
                this.showAddIndustry = true;
            },
            closeEditIndustry() {
                this.$refs.ruleForm.resetFields();
                this.showAddIndustry = false;
            },
            /* 获取数据 */
            getIndustryList() {
                this.dataList = [];
                this.loading = true;
                this.sendRequest('Retail/StoreIndustry/getIndustryList', {
                    data: {
                        ...this.searchForm,
                    },
                    success: (res) => {
                        this.loading = false;
                        if (res.status == 1) {
                            this.count = res.data.count;
                            this.dataList = res.data.list;
                        }
                    },
                })
            },

            //查询
            searchData() {
                this.searchForm.page = 1;
                this.getIndustryList();
            },
            /* 切换每页数量 */
            sizeChange(val) {
                this.searchForm.limit = val;
                this.searchForm.page = 1;
                this.getIndustryList();
            },

            /* 切换页数 */
            currentChange(val) {
                this.searchForm.page = val;
                this.getIndustryList();
            },
            //保存行业
            saveIndustry() {
                this.$refs.ruleForm.validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    this.$confirm("确认要保存该行业吗?", "温馨提示", {
                        confirmButtonText: '保存',
                        cancelButtonText: '取消',
                        type: 'info'
                    }).then(() => {
                        this.$loading({
                            lock: true,
                            text: '保存中，请等待',
                            spinner: 'el-icon-loading',
                            background: 'rgba(255, 255, 255, 0.7)'
                        });
                        this.sendRequest('Retail/StoreIndustry/' + (this.ruleForm.id ? 'editStoreIndustry' : 'addStoreIndustry'), {
                            data: this.ruleForm,
                            success: (res) => {
                                this.$loading().close();
                                if (res.status == 1) {
                                    this.closeEditIndustry();
                                    this.$message.success(res.message);

                                    this.getIndustryList();
                                } else {
                                    this.$message.error(res.message)
                                }
                            },
                        })
                    }).catch(() => {
                    })
                })
            },
            //删除行业
            delIndustry(id) {
                this.$confirm("确认要删除该行业吗?", "温馨提示", {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(() => {
                    this.$loading({
                        lock: true,
                        text: '删除中，请等待',
                        spinner: 'el-icon-loading',
                        background: 'rgba(255, 255, 255, 0.7)'
                    });
                    this.sendRequest('Retail/StoreIndustry/delStoreIndustry', {
                        data: {
                            id: id
                        },
                        success: (res) => {
                            this.$loading().close();
                            if (res.status == 1) {
                                this.$message.success(res.message);
                                this.getIndustryList();
                            } else {
                                this.$message.error(res.message)
                            }
                        },
                    })
                }).catch(() => {
                })
            },
            //获取用户权限
            getOperate() {
                this.checkOperateAuth({
                    addStoreIndustry: '/index.php/Retail/StoreIndustry/addStoreIndustry',
                    editStoreIndustry: '/index.php/Retail/StoreIndustry/editStoreIndustry',
                    delStoreIndustry: '/index.php/Retail/StoreIndustry/delStoreIndustry',
                }, (data) => {
                    this.operate = data;
                })
            }
        },
        created() {
            this.getOperate();
            this.getIndustryList();
        },
    })
</script>