商品分类列表

商品分类列表，添加分类，删除分类，编辑分类

 

 

 

 html代码

	<div class="pl-4 pt-4 w-full">
		<h1 class="text-left">
			<p>
				<el-button type="primary" @click="handlAdd()">添加分类<i class="el-icon-plus el-icon--right"></i></el-button>
			</p>
		</h1>
		<div class="text-left">
			<div class="list-dev">
				<div class="bg-white">
					<el-table class="shop-list-table" :data="tableData" border style="width: 100%">
						<el-table-column prop="cat_id" label="ID" width="180"></el-table-column>
						<el-table-column prop="cat_name" label="商品分类" width="180"></el-table-column>
						<el-table-column prop="sort_order" label="排序"></el-table-column>
						<el-table-column prop="is_show" label="是否展示" width="180"></el-table-column>
						<el-table-column prop="is_del" label="是否删除" width="180"></el-table-column>
						<el-table-column prop="add_time" label="添加时间" width="180"></el-table-column>
						<el-table-column prop="address" label="操作">
							<template slot-scope="scope">
								<!-- <el-button type="success" icon="el-icon-view">查看</el-button> -->
								<el-button type="primary" icon="el-icon-edit"
									@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
								<el-button type="danger" icon="el-icon-delete"
									@click="handleDel(scope.row.cat_id)">删除</el-button>
									
							</template>
						</el-table-column>
					</el-table>
					<!-- 添加弹出框 -->
					<el-dialog title="添加" :visible.sync="addVisible" width="30%">
					    <el-form ref="formadd" :model="formadd" label-width="110px">
					        <el-form-item label="分类名称">
					            <el-input v-model="formadd.cat_name"></el-input>
					        </el-form-item>
									<el-form-item label="排序">
					            <el-input v-model="formadd.sort_order"></el-input>
					        </el-form-item>
					        <el-form-item label="是否展示">
					          <el-radio-group v-model="formadd.is_show">
					              <el-radio label="是"></el-radio>
					              <el-radio label="否"></el-radio>
					          </el-radio-group>
					        </el-form-item>
					    </el-form>
					    <span slot="footer" class="dialog-footer">
					        <el-button @click="addVisible = false">取 消</el-button>
					        <el-button type="primary" @click="saveadd">确 定</el-button>
					    </span>
					</el-dialog>
					<!-- 编辑弹出框 -->
					<el-dialog title="编辑" :visible.sync="editVisible" width="30%">
					    <el-form ref="form" :model="form" label-width="110px">
					        <el-form-item  label="分类ID">
					            <el-input v-model="form.cat_id"></el-input>
					        </el-form-item>
									<el-form-item label="分类名称">
					            <el-input v-model="form.cat_name"></el-input>
					        </el-form-item>
									<el-form-item label="排序">
									    <el-input v-model="form.sort_order"></el-input>
									</el-form-item>
					        <el-form-item label="是否展示">
					          <el-radio-group v-model="form.is_show">
					              <el-radio label="是"></el-radio>
					              <el-radio label="否"></el-radio>
					          </el-radio-group>
					        </el-form-item>
					    </el-form>
					    <span slot="footer" class="dialog-footer">
								<el-button type="primary" @click="saveEdit">确 定</el-button>
					      <el-button @click="editVisible = false">取 消</el-button>
					    </span>
					</el-dialog>
				</div>
			</div>
		</div>
	</div>

js代码：

<script>
	import {
		shopClassList,
		shopClassEdit,
		shopClassAdd
	} from "../../network/shop.js";
	export default {
		data() {
			return {
				tableData: [],
				show:false,
				editVisible: false,
				addVisible: false,
				form: {
				  cat_id: '',
				  cat_name: '',
				  sort_order: '',
				  is_show: '',
				},
				formadd: {
					is_show: '是',
				},
			};
		},
		created() {
			this.getShopList()
		},
		methods: {
			getShopList() {
				shopClassList().then(res => {
					if (res.status == 1) {
						this.tableData = res.msg
						// console.log(this.tableData[0].is_show = '是')
						for (let i = 0; i < this.tableData.length; i++) {
							if (this.tableData[i].is_show == 1) {
								this.tableData[i].is_show = '是'
							} else {
								this.tableData[i].is_show = '否'
							}
						}
					}
				})
			},
			// 添加操作
      handlAdd() {
        this.addVisible = true;
			},
      // 保存添加
      saveadd() {
      	let formData = {}
      	for(var key in this.formadd){
      		if(this.formadd[key] == '') {
      			this.$message.error(`$[key]不能为空`)
      			return false;
      		}else if(key == 'is_show' && this.formadd[key] == '是') {
      			formData[key] = 1
      		}else if(key == 'is_show' && this.formadd[key] == '否') {
      			formData[key] = 0
      		}else{
      			formData[key] = this.formadd[key];
      		}
      	}
      	shopClassAdd(formData).then(res => {
      		if(res.status == 1) {
      			this.addVisible = false;
      			this.$message.success(`添加成功`);
            this.formadd.is_show = 1;
            this.formadd.cat_name = '';
            this.formadd.sort_order = '';
      			this.getShopList()
            // this.$router.go(0);
      		}else{
      			this.$message.error(res.msg)
      		}
      	})
      },
      // 删除
      handleDel(id) {
				// let data.cat_id = id
				let data={
					cat_id:id,
					is_del:1
				}
          // 二次确认删除
          this.$confirm('确定要删除吗？', '提示', {
              type: 'warning'
          })
          .then(() => {
            shopClassEdit(data).then(res => {
            	if(res.status == 1) {
            		this.$message.success('删除成功');
                this.getShopList()
              	// this.tableData.splice(index, 1);
            	}else{
            		this.$message.error(res.msg)
            	}
            })
          })
          .catch(() => {});
      },
			handleEdit(index, row) {
					this.idx = index;
					this.form = row;
					if(row.is_sex == 1) {
						this.$set(this.form, 'is_show', '是')
					}else if(row.is_sex == 0) {
						this.$set(this.form, 'is_show', '否')
					}
			    this.editVisible = true;
			},
			// 保存编辑
			saveEdit() {
				let formData = {}
				for(var key in this.form){
					if(key == 'is_show' && this.form[key] == '是') {
						formData[key] = 1
					}else if(key == 'is_show' && this.form[key] == '否') {
						formData[key] = 0
					}else{
						formData[key] = this.form[key];
					}
				}
				shopClassEdit(formData,'edit').then(res => {
					if(res.status == 1) {
						this.editVisible = false;
						this.$message.success(`修改成功`);
						this.getShopList()
					}else{
						this.$message.error(res.msg)
					}
				})
			},
		}
	}
</script>