黑马vue实战项目-(五)参数列表组件的开发

一,创建组件,配置路由,实现基本布局:

在这里插入图片描述

<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
		  <el-breadcrumb-item>参数列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card>
			<!-- 警告提示框 -->
			 <el-alert
			    title="注意:只允许为第三级分类设置相关参数!"
			    type="warning" 
				:closable="false" 
				show-icon>
			  </el-alert>
			  <!-- 选择商品分类区域 -->
			  <el-row class="cat_opt">
				  <el-col>
					  <span>选择商品分类:</span>
					  <!-- 选择商品分类的级联选择框 -->
					  
				  </el-col>
			  </el-row>
		</el-card>
	</div>
</template>

二,发送请求,获取所有列表的数据

在这里插入图片描述

created(){
			this.getCateList()
		},
		methods:{
			//获取所有的分类的数据列表
			async getCateList(){
				const{data:res}=await this.$http.get('categories')
				if(res.meta.status!==200)return this.$message.error(res.meta.msg)
				this.$message.sucess(res.meta.msg)
				this.cateList=res.data
			},
		}

三,创建选择商品分类的级联选择框

 <!-- 选择商品分类的级联选择框 -->
					  <el-cascader
					      v-model="selectedKeys"
					      :options="cateList"
					      :props="cascaderProps"
					      @change="handleChange"
						 ></el-cascader>
//选中级联选择框时发生
			handleChange(){
				//它只能选中第三级
				this.addcatForm.cat_pid=this.selectedKeys[this.selectedKeys.length-1]
				this.addcatForm.cat_level=3
			}

实现的效果:
在这里插入图片描述

四,实现tabs导航栏

<!-- tabs导航栏 -->
			  <el-tabs v-model="activeName" @tab-click="handleTabClick">
				  <!-- 添加动态参数的面板 -->
			      <el-tab-pane label="动态参数" name="first">
					  <el-button type="primary" size="mini" :disabled="isBtnDisables">添加参数</el-button>
				  </el-tab-pane>
				  <!-- 添加静态属性的面板 -->
			      <el-tab-pane label="静态属性" name="second">
					  <el-button type="primary" size="mini" :disabled="isBtnDisables">静态属性</el-button>
				  </el-tab-pane>
			  </el-tabs>
computed:{
			//因为要么不选中,要么选中三级,所以:
			isBtnDisables(){
				if(this.selectedKeys.length!==3)return true
				return false
			}
		}

五,获取参数列表

对应的接口文档:
在这里插入图片描述

			//选中级联选择框时发生
			handleChange(){
				this.getParamsData()
			},
			//tab便签点击事件
		  handleTabClick(tab, event) {
			  this.getParamsData()
		  },
		  //获取对应参数的列表数据(静态/动态)
		  async getParamsData(){
			  //它只能选中第三级
			  this.addcatForm.cat_pid=this.selectedKeys[this.selectedKeys.length-1]
			  this.addcatForm.cat_level=3
			  //根据所选分类的id,和当前所处的面板,获取对应的参数
			  const {data:res}=await this.$http.get(`categories/${this.cateId}/attributes`,{
			  	params:{sel:this.activeName}
			  })
			  if(res.meta.status!==200)return this.$message.error(res.meta.msg)
		  }

然后渲染参数列表:

<!-- tabs导航栏 -->
			  <el-tabs v-model="activeName" @tab-click="handleTabClick">
				  <!-- 添加动态参数的面板 -->
			      <el-tab-pane label="动态参数" name="many">
					  <el-button type="primary" size="mini" :disabled="isBtnDisables">添加参数</el-button>
				<!-- 动态表格区域 -->
					   <el-table
						  :data="manyTableData"
						  border
						  stripe
						  style="width: 100%">
					  <el-table-column type="expand"></el-table-column>
					  <el-table-column type="index"></el-table-column>
					  <el-table-column
					     prop="attr_name"
					     label="参数名称">
				        </el-table-column>
				         <el-table-column
						label="操作">
						<template slot-scope="scope">
							<el-button type="primary" icon="el-icon-edit" size="mini">搜索</el-button>
							<el-button type="danger" icon="el-icon-delete" size="mini">s删除</el-button>
						</template>
						</el-table-column>
				</el-table>
				  </el-tab-pane>
				  <!-- 添加静态属性的面板 -->
				  <el-tab-pane label="静态属性" name="only">
					  <el-button type="primary" size="mini" :disabled="isBtnDisables">添加属性</el-button>
				   <!-- 静态表格区域 -->
					   <el-table
						  :data="onlyTableData"
						  border
						  stripe
						  style="width: 100%">
						  <el-table-column type="expand"></el-table-column>
						  <el-table-column type="index"></el-table-column>
						  <el-table-column
							prop="attr_name"
							label="属性名称">
						  </el-table-column>
						  <el-table-column
							label="操作">
							<template slot-scope="scope">
								<el-button type="primary" icon="el-icon-edit" size="mini">搜索</el-button>
								<el-button type="danger" icon="el-icon-delete" size="mini">s删除</el-button>
							</template>
						  </el-table-column>
						</el-table>
				  </el-tab-pane>
			  </el-tabs>

六,添加动态参数对话框

要实现的效果如下:
在这里插入图片描述
第一步:先把对话框建立出来,点击添加参数,则会弹出这个对话框:
为了让添加属性和添加参数都复用这个对话框。就需要使用到计算属性:
在这里插入图片描述
相关数据:
在这里插入图片描述

计算属性:
在这里插入图片描述

七,发起请求,完成参数/属性的添加

具体的接口文档如下:
在这里插入图片描述
在这里插入图片描述

八,修改参数的对话框

对话框写好的效果:
在这里插入图片描述
但是还需要把对应的数据填充到这个对话框中,这个时候,就需要利用作用域插槽获取对应的数据,然后绑定到这里来。
再发起请求,完成参数的更改,对应的接口文档是:
在这里插入图片描述
在这里插入图片描述
对应函数:
在这里插入图片描述

九,删除参数

在这里插入图片描述

		  //删除属性/参数
		  async removeParaById(id){
		  	//弹窗询问是否删除数据
		  	const confirmResult=await this.$confirm('此操作将永久删除该参数, 是否继续?', '提示', {
		  	          confirmButtonText: '确定',
		  	          cancelButtonText: '取消',
		  	          type: 'warning'
		  	        }).catch(err=>err)
		  	//如果用户确认删除,则返回字符串confirm
		  	//如果用户确认取消,则返回字符串cancel
		  	if(confirmResult!=='confirm')return this.$message.info("已经取消了删除")
		  	const{data:res}=await this.$http.delete(`categories/${this.cateId}/attributes/${id}`)
		  	if(res.meta.status!==200)return this.$message.error(res.meta.msg)
		  	this.$message.success(res.meta.msg)
		  	this.getParamsData()
		  }

十,参数的展开标签 绘制

在这里插入图片描述
在这里插入图片描述
可以看到,每行的数据存在这里面,并且是通过空格分开的。
想要使用,则需要用空格做一次分割。得到一个数组:
在这里插入图片描述
然后把这里的数据渲染到页面上:

//  //tag标签的事件显示input
		  showInput(val) {
		  	val.inputVisible = true;
			//$nextTick方法的作用.当页面上的元素被重新渲染之后,才执行这里面回调函数的代码
			//在这里,是变成input函数之后,再获取焦点
		  	this.$nextTick(_ => {
			//文本框自动获得焦点
		  	  this.$refs.saveTagInput.$refs.input.focus();
		  	});
		    },
		  //tag标签的事件,把添加的标签显示出来,并保存到数据库
		   async handleInputConfirm(val) {
				//如果输入的字符串全是字符,则清空输入框
				if(val.inputValue.trim().length ===0){
					val.inputValue=''
					val.inputVisible=false
					return
				}
				//如果没有return,则需要做后续处理
				let inputValue = val.inputValue;
				if (inputValue) {
				 //发起请求,添加新的标签
				  val.attr_vals.push(val.inputValue.trim())
				  val.inputValue=''
				  val.inputVisible=false
				  //发起请求,保存本次参数到数据库
				  const{data:res}=await this.$http.put(`categories/${this.cateId}/attributes/${val.attr_id}`,{
				  	attr_name:val.attr_name,
				  	attr_sel:val.attr_sel,
					attr_vals:val.attr_vals.join(' ')
				  })
				 if(res.meta.status!==200)return this.$message.error(res.meta.msg)
				 this.$message.success(res.meta.msg)
				 //这里不需要重新刷新,一旦重新刷新,下拉菜单就会收起来
				}
			},
			//删除对应的tag标签
			async closeTag(i,val){
				//这个splice会修改原数组,所以修改完成之后,发起请求,就可以完成删除了.
				val.attr_vals.splice(i,1)
				//发起请求:将对attr_vals的操作保存到数据库中
				const{data:res}=await this.$http.put(`categories/${this.cateId}/attributes/${val.attr_id}`,{
				 	attr_name:val.attr_name,
				 	attr_sel:val.attr_sel,
					attr_vals:val.attr_vals.join(' ')
				 })
				 if(res.meta.status!==200)return this.$message.error(res.meta.msg)
				 this.$message.success('删除标签成功')
			}

对应的html结构:

 <el-table-column type="expand">
						<template slot-scope="scope">
						  		<el-tag closable v-for="(item,i) in scope.row.attr_vals" :kye="i"
								@close="closeTag(i,scope.row)"
								> {{item}} </el-tag>
								<el-input
								  class="input-new-tag"
								  v-if="scope.row.inputVisible"
								  v-model="scope.row.inputValue"
								  ref="saveTagInput"
								  size="small"
								  @keyup.enter.native="handleInputConfirm(scope.row)"
								  @blur="handleInputConfirm(scope.row)"
								>
								</el-input>
								<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
						  </template>
					  </el-table-column>

十一,参数列表功能完成,提交到远程仓库

©️2020 CSDN 皮肤主题: 我行我“速” 设计师:Amelia_0503 返回首页