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

1.概述

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

2.流程

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

3.效果展示

4.代码展示

<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>
            
            <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160