102.(前端)分类管理增加窗口显示——dialog弹窗的基本使用与在form表单显示变量

1.概述

在我们参数展示中，构建了一个增加参数的按钮，本次博客要实现前端发送请求到后端实现增加数据的请求的弹窗搭建。

2.流程

1. 实现点击按钮，给出一个弹窗
2. 完成的内容展示，需要给一个输入框，并对内容验证
3. 通过computed创建函数计算，在静态参数的弹窗中显示静态页面标题，动态参数的弹窗中显示动态页面标题；使用一个弹窗，去给两种添加参数使用
4. 关闭再打开时，重置弹窗内容

3.效果展示

4.代码展示

<!-- src/components/goods/Attribute.vue -->
<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>分类管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 具体显示内容的地方 -->
        <el-card>
            <!-- 提示信息 -->
            <el-alert title="注意：只允许为第三级的分类设置相关参数！！！" type="warning" close-text="知道了">
            </el-alert>
            <el-row>
                <el-col>
                    <span>选择商品分类：</span>
                    <el-cascader 
                        v-model="selectKeys"
                        :options="cateIdList"
                        :props="{ expandTrigger: 'hover', label:'name', value:'id'}" 
                        clearable 
                        separator=" > "
                        @change="changeSelector">
                    </el-cascader>
                </el-col>
            </el-row>
            <!-- Tags展示内容 -->
            <el-row>
                <el-col>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="静态参数" name="static">
                            <el-button type="primary" size="mini" @click="addDialogVisible=true">增加参数</el-button>
                            <el-table :data="staticAttr">
                                <el-table-column type="index"></el-table-column>
                                <el-table-column label="参数名称" prop="name"></el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button type="success" size="mini">编辑</el-button>
                                        <el-button type="danger" size="mini">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>

                        <el-tab-pane label="动态参数" name="dynamic">
                            <el-button type="primary" size="mini" @click="addDialogVisible=true">增加参数</el-button>
                            <el-table :data="dynamicAttr">
                                <el-table-column type="index"></el-table-column>
                                <el-table-column label="参数名称" prop="name"></el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button type="success" size="mini">编辑</el-button>
                                        <el-button type="danger" size="mini">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </el-col>
            </el-row>
        </el-card>
        <el-dialog :title="'添加'+titleText" :visible.sync="addDialogVisible" width="30%" @close="addDialogClose">
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="80px">
                <el-form-item :label="titleText" prop="name">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default{
    data() {
        return {
            cateIdList: [],
            selectKeys:[],
            activeName: 'static',
            staticAttr:[],
            dynamicAttr:[],
            dynamicFlag: false,
            staticFlag: false,
            addDialogVisible: false,
            addForm: {
                name: ''
            },
            addFormRules: {
                name: [{ required: true, message: '请填写参数名称', tigger:'blur'}]
            }
        }
    },
    created() {
        this.getCateIDList()
    },
    methods:{
        // 获取整个列表
        async getCateIDList(){
            const { data: resp } = await this.$axios.get('/api/category_list')
            this.cateIdList = resp.data.data
        },
        // 发送变化时触发此函数
        changeSelector(){
            // console.log(this.selectKeys);
            this.dynamicFlag = true
            this.staticFlag = true
            this.getAttribute()
        },
        handleClick(tab, event) {
            // console.log(tab, event);
            
            if (!this.staticFlag && this.activeName === 'static') return
            if (!this.dynamicFlag && this.activeName === 'dynamic') return
            if (this.selectKeys.length < 3) return
            // console.log(this.selectKeys[2]);
            console.log(this.activeName);
            this.getAttribute()
        },
        async getAttribute() {
            const { data: resp } = await this.$axios.get('/api/category/attr_list', {
                params: { cid: this.selectKeys[2], _type: this.activeName}
            })
            if (resp.status !== 200) return this.$msg.error(resp.msg)
            console.log(resp.data);
            if (this.activeName === 'static'){
                this.staticAttr = resp.data
                this.staticFlag = false
            }else{
                this.dynamicAttr = resp.data
                this.dynamicFlag = false
            }
        },
        addDialogClose() {
            this.$refs.addFormRef.resetFields()
        }


    },
    computed:{
        titleText(){
            if (this.activeName === 'static') return '静态参数'
            else return '动态参数'
        }
    }
}
</script>

<style lang="less" scoped>
    .el-tabs{
        margin-top: 5px;
    }
    .el-cascader{
        width: 300px;
        margin-top: 10px;
    }
</style>