**
## 本篇文章一般人看的会乱的
**
<template>
<div class="about">
<el-row>
<el-col :span="16">
<!-- 搜索框的界面 -->
<el-form :inline="true" :model="searchFormModel">
<el-form-item label="请输入商品名称">
<el-input v-model="searchFormModel.mohu" placeholder="商品名称"></el-input>
</el-form-item>
<el-form-item label="请输入价格">
<el-input v-model="searchFormModel.start" placeholder="价格"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="searchFormModel.end" placeholder="价格"></el-input>
</el-form-item>
<el-form-item>
<el-button type="danger" icon="el-icon-search" @click="searchDate">查询</el-button>
</el-form-item>
</el-form>
</el-col>
<el-col :span="5">
<el-button type="success" icon="el-icon-search" @click="roleDialog=true">添加</el-button>
<el-button type="success" icon="el-icon-search" @click="del">批删</el-button>
</el-col>
</el-row>
<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
<!--全选配置-->
<el-table-column type="selection"></el-table-column>
<el-table-column prop="id" label="ID" width="180">
</el-table-column>
<el-table-column prop="name" label="名称" width="180">
</el-table-column>
<el-table-column label="图片">
<template slot-scope="scope">
<el-avatar :src="scope.row.pic"></el-avatar>
</template>
</el-table-column>
<el-table-column prop="price" label="日期" width="180">
</el-table-column>
<!--省市县-->
<el-table-column label="产地">
<template slot-scope="scope">
{{scope.row.provinceName.name}}-{{scope.row.cityName.name}}-{{scope.row.countyName.name}}
</template>
</el-table-column>
<el-table-column label="传销">
<template slot-scope="scope">
<template v-for="ch in scope.row.chuanList">
{{ch.name}}
</template>
</template>
</el-table-column>
<el-table-column prop="created" label="创建时间">
</el-table-column>
<!-- 操作 -->
<el-table-column label="操作" width="300">
<template slot-scope="scope">
<el-button type="danger" size="small" @click="doUpdate(scope.row)">修改</el-button>
<el-button type="success" size="small" @click="chaStudent(scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-row>
<el-col :span="24">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total" :current-page="current"
:page-sizes="sizes" :page-size="size" layout="total, sizes, prev, pager, next, jumper" background>
</el-pagination>
</el-col>
</el-row>
<!-- 添加的对话框 -->
<el-dialog :visible.sync="roleDialog" title="添加商品" width="60%" center>
<el-form :inline="true" :model="insertFormModel" label-width="80px">
<el-form-item label="名称" prop="name">
<el-input v-model="insertFormModel.name" placeholder="名称"></el-input>
</el-form-item><br />
<el-form-item label="图片">
<!--action 上传的地址 name的名称默认是file 就是上传到控制层的参数名称-->
<!--on-success 成功/before-uploud 上传前处理是上传组件的钩子函数-->
<el-upload class="avatar-uploader" :show-file-list="false" name="file" action="http://localhost:8100/api/shop/upload"
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
<!--img 是用来显示上传图片的本地效果-->
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item><br />
<el-form-item label="价格" prop="price">
<el-input v-model="insertFormModel.price" placeholder="价格"></el-input>
</el-form-item><br />
<el-form-item label="产地">
<el-cascader v-model="value" :options="nations" :props="props" @change="flushpc">
</el-cascader>
</el-form-item><br />
<el-checkbox-group label="促销" v-model="checkedShop" @change="handleCheckedShopChange">
<!--遍历角色{{role.nameZh}}名称 ：label是value值-->
<el-checkbox v-for="role in treeDate" :label="role.id">{{role.name}}</el-checkbox>
</el-checkbox-group><br />
<el-form-item>
<el-button type="danger" @click="addsaveRole">添加</el-button>
<el-button @click="roleDialog= false">取 消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<el-dialog :visible.sync="updateModel" title="修改商品" width="60%" center>
<el-form :inline="true" :model="updateFormModel" label-width="80px">
<el-form-item label="名称" prop="name">
<el-input v-model="updateFormModel.name" placeholder="名称"></el-input>
</el-form-item><br />
<el-form-item label="图片">
<!--action 上传的地址 name的名称默认是file 就是上传到控制层的参数名称-->
<!--on-success 成功/before-uploud 上传前处理是上传组件的钩子函数-->
<el-upload class="avatar-uploader" :show-file-list="false" name="file" action="http://localhost:8100/api/shop/upload"
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
<!--img 是用来显示上传图片的本地效果-->
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item><br />
<el-form-item label="价格" prop="price">
<el-input v-model="updateFormModel.price" placeholder="价格"></el-input>
</el-form-item><br />
<el-form-item label="产地">
<el-cascader v-model="value" :options="nations" :props="props" @change="flushpc">
</el-cascader>
</el-form-item><br />
<el-checkbox-group label="促销" v-model="checkedShop" @change="handleCheckedShopChange">
<el-checkbox v-for="role in treeDate" :label="role.id">{{role.name}}</el-checkbox>
</el-checkbox-group><br />
<el-form-item>
<el-button type="danger" @click="updateShop">修改</el-button>
<el-button @click="updateModel= false">取 消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<el-dialog :visible.sync="xiangqing" title="商品详情" width="80%" center>
<el-row v-for="data in tableData1" >
<hr />
<el-container>
<el-aside width="200px">
<el-image :src="data.pic"></el-image>
</el-aside>
<el-container>
<el-main>
<span>
<h3>名称：{{data.name}}</h3>
</span> <br>
<span style="color: red;">
<h4>价格：￥{{data.price}}</h4>
</span><br>
<span>产地：{{data.provinceName.name}}-{{data.cityName.name}}-{{data.countyName.name}}</span><br>
<span>
促销：
<template v-for="ch in data.chuanList">
{{ch.name}}
</template>
</span><br>
</el-main>
</el-container>
</el-container>
</el-row>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
checkedCities: [],
total: 0,
size: 3,
sizes: [3, 5, 8],
current: 1,
tableData: [],
tableData1: [],
value: [],
options: [],
props: {
value: 'id',
label: 'name',
children: 'list',
},
imageUrl: '', //上传的头像路径
check: [],
searchFormModel: {
mohu: '',
start: '',
end: '',
},
roleDialog: false,
insertFormModel: {
name: '',
pic: '',
price: '',
province: '',
city: '',
county: '',
},
treeDate: [],
nations:[],
checkedShop: [],
updateModel:false,
updateFormModel:{
id:'',
name: '',
pic: '',
price: '',
province: '',
city: '',
county: '',
},
xiangqing:false,
}
},
created() {
this.initData();
this.initCascader();
this.initTree();
},
methods: {
initTree() {
//查询数据
this.axios.get('http://localhost:8100/api/shop/tree').then((res) => {
//返回数据赋值
this.treeDate = res.data;
console.log(this.treeDate)
});
},
initCascader() {
this.axios.get('http://localhost:8100/api/shop/list1').then((res) => {
console.log(res.data);
this.nations = res.data;
})
},
initData() {
this.axios.get('http://localhost:8100/api/shop/list', {
params: {
pageNum: this.current,
pageSize: this.size,
name:this.searchFormModel.mohu,
start:this.searchFormModel.start,
end:this.searchFormModel.end
}
}).then((res) => {
this.tableData = res.data.content;
this.total = res.data.totalElements;
console.log(this.tableData)
});
},
handleSizeChange(val) {
this.size = val;
this.initData();
},
handleCurrentChange(val) {
this.current = val;
this.initData();
},
searchDate() {
this.current = 1;
this.initData();
},
flushpc(value) {
//判断是否是null ，是否是数组
if (value != null && Array.isArray(value)) {
if (this.roleDialog) {
this.insertFormModel.province = this.value[0];
this.insertFormModel.city = this.value[1];
this.insertFormModel.county = this.value[2];
}
else if (this.updateModel) {
this.updateFormModel.province = this.value[0];
this.updateFormModel.city = this.value[1];
this.updateFormModel.county = this.value[2];
}
}
},
handleAvatarSuccess(res, file) {
//判断上传的结果是否成功
if (res.code == 1001) {
if (this.roleDialog) {
//记录上传头的地址
this.insertFormModel.pic = res.data;
} else if (this.updateModel) {
this.updateFormModel.pic = res.data;
}
//本地回显的代码
this.imageUrl = URL.createObjectURL(file.raw);
} else {
alert("上传失败");
}
},
beforeAvatarUpload(file) {
},
handleCheckedShopChange(val) {
this.checkedShop = val;
},
addsaveRole(){
let cid = [];
for (let i in this.checkedShop) {
cid.push(this.checkedShop[i])
}
console.log("11111111111")
console.log(this.insertFormModel)
console.log(cid.join())
this.axios.post("http://localhost:8100/api/shop/add", this.insertFormModel, {
params: {
cid: cid.join(),
}
}).then((res) => {
alert("添加成功");
this.roleDialog = false;
this.initData();
})
},
doUpdate(row) {
//还原三级联动
this.value = [];
//还原图片
this.imageUrl = '',
Object.assign(this.updateFormModel, row);
//图片回显
this.imageUrl = row.pic;
//判断省存在否
if (row.province != null) {
this.value.push(row.province);
this.value.push(row.city);
this.value.push(row.county);
}
console.log("@@@@@")
console.log(row)
//初始化原有数据
this.checkedShop = [];
//用户本身的 角色数据
let cids = '';
for(let j=0;j<row.chuanList.length;j++){
cids+=row.chuanList[j].id+",";
}
console.log(cids)
//判断
if (cids != null) {
//拆分数组
let array = cids.split(",");
//遍历数组
for (let i = 0; i < array.length; i++) {
//设疑
this.checkedShop.push(parseInt(array[i]));
}
}
//打开对话框
this.updateModel = true;
},
updateShop(){
let cid = [];
for (let i in this.checkedShop) {
if(this.checkedShop[i]>0){
cid.push(this.checkedShop[i])
}
}
console.log("11111111111")
console.log(this.updateFormModel);
console.log(cid)
this.axios.post("http://localhost:8100/api/shop/update1",this.updateFormModel, {
params: {
cid: cid.join()
}
}).then((res) => {
alert("修改成功");
this.updateModel = false;
this.initData();
})
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
del(){
console.log("@@@@@@@@@@@@@555555555")
console.log(this.multipleSelection )
let sid = [];
for (let i in this.multipleSelection) {
sid.push(this.multipleSelection[i].id)
}
if (confirm("确定进行删除id为" + sid + "的数据")) {
this.axios.get("http://localhost:8100/api/shop/dell", {
params: {
sid: sid.join(),
}
}).then((res) => {
alert("删除成功");
this.initData();
})
}
},
chaStudent(row){
console.log(row.id)
this.axios.get('http://localhost:8100/api/shop/list2', {
params: {
id:row.id,
}
}).then((res) => {
this.tableData1 = res.data;
console.log("%%%%%%%%%%%%%%%%%")
console.log(this.tableData1)
});
this.xiangqing=true;
}
}
}
</script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
.avatar {
width: 100px;
height: 100px;
display: block;
}
</style>
扫一扫
570
11-22
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
