标签：index vue 拓扑图 el text refs pager click

<template>
    <div class="container">
        <div class="title">拓扑图管理</div>
        
        //<el-row><el-col>标签是属于element的Layout布局控件
        //布局的一行(el-row)的宽度分为24等份，无论一个el-row中有几个el-col，总值加起来等24
        
        <el-form class="el-row query-form" ref="form" :model="form" label-width="100px">
            <el-form-item  class="el-col el-col-6" label="拓扑图名称" prop="name" style="margin-left: 50px;">
                <el-input placeholder="请输入拓扑图名称" v-model="form.name" />
            </el-form-item>
            <el-form-item class="el-col el-col-6" label="类型" prop="type">
                <el-select v-model="form.type">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="物理拓扑图" value=""></el-option>
                    <el-option label="业务拓扑图" value=""></el-option>
                </el-select>
            </el-form-item>
            <el-form-item class="el-col el-col-6" label="状态" prop="status">
                <el-select v-model="form.status">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="已发布" value=""></el-option>
                    <el-option label="未发布" value=""></el-option>
                </el-select>
            </el-form-item>
            <el-button type="primary" size="small" @click="search">查询</el-button>
            <el-button size="small" @click="resetForm">重置</el-button>
        </el-form>
        <pager
            ref="pager"
            :tableConfig="tableConfig"  //列配置
            @add="add"
            @edit="edit"
            @delete="batchDelete"
        ></pager>
            
         <EditTopology ref="dialog" :callback="refresh"></EditTopology>
    </div>  
</template>

<script>
import pager from '@/components/pager/pager'
import { getList, batchDelete } from '@/api/modules/topology'
import EditTopology from './EditTopology.vue'

export default ({
    components: {
        pager,
        EditTopology,
    },
    data() {
        return {
            form:{
                name:undefined,
                type:undefined,
                status:undefined
            },

            tableConfig: {
                boxType: 'checkbox',
                request: getList,
                title: {
                btns: {
                    type: 'primary',
                    icon: 'el-icon-plus',
                    text: '新增',
                    click: 'add',
                },
            },
            columns: [
                {
                    prop: 'name',
                    label: '拓扑图名称',
                    width: 130,
                },
                {
                    prop: 'type',
                    label: '类型',
                    width: 120,
                    align: 'center',
                    render: () => {
                    return '<span>物理拓扑图</span>'
                    },
                },
                {
                    prop: 'des',
                    label: '描述信息',
                    width: 280,
                },
                {
                    prop: 'order',
                    label: '排序号',
                    width: 70 ,
                    align: 'center',
                },
                {
                    prop:'status',
                    label: '状态',
                    width: 80
                },
                {
                    prop: 'operate',
                    width: 220,
                    label: '操作',
                    align: 'center',
                    items: [
                    {
                        text: '详情',
                        click: '',
                    },
                    {
                        text: '编辑',
                        click: 'edit',
                    },
                    {
                        text: '绘制',
                        click: '',
                    },
                    {
                        text: '预览',
                        click: '',
                    },
                    {
                        text: '发布',
                        click: '',
                    }
                    ],
                },
            ],
            btns: {
                type: 'primary',
                text: '删除',
                click: 'delete',
            },
            },
            refresh:()=>{
                this.$refs.pager.query()
            }
        }
    },
    methods: {
        search() {
            this.$refs.pager.setParams(this.form)
            this.$refs.pager.query()
        },
        resetForm() {
            this.$refs.form.resetFields()
            this.$refs.pager.setParams(this.form)
            this.$refs.pager.query()
        },
        batchDelete() {
            let selectList = this.$refs.pager.getSelectList()
            if (!selectList || selectList.length === 0) {
                this.$message.error('请选中拓扑图后进行删除')
                return
            }
            var nameStr = Array.from(selectList, (item) => item.name).join('、')
            this.$confirm(`确定删除拓扑图 [ ${nameStr} ] 吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
            .then(() => {
            var ids = Array.from(selectList, (item) => item.id)
            batchDelete({ ids: ids }).then((result) => {
                if (result.returnCode === '0') {
                this.$message.success('删除成功')
                this.$refs.pager.query()
                }
            })
            })
            .catch(() => {})
        },
        add() {
        this.$refs.dialog.open()
        },
        edit(item) {
        this.$refs.dialog.open(item)
        },
    },
})
</script>
<style scoped>
    /deep/ .el-table  .el-table_1_column_6 .cell{
        text-align: center;
    }
    /deep/ .el-table_1_column_7 .cell{
        text-align: left;
    }
    /deep/ .el-table_1_column_7 .cell{
        padding: 0;
    }
</style>

标签：index,vue,拓扑图,el,text,refs,pager,click
来源： https://blog.csdn.net/weixin_45609659/article/details/121157628

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。