一个后台管理系统的界面样式和前端代码增删查改
2023-09-14 09:04:07 时间
如图：
代码：
<template>
<div class="goods">
<el-dialog title="上下架分配" :visible.sync="centerDialogVisible" width="80%" center
style="margin-top: -10vh !important;">
<!-- 按门店查询,可以选择一个或者多个门店 -->
<div class="mendan-change">
<p>门店筛选</p>
<div class="left-box">
<el-input placeholder="请输入门店名称\编号\门店联系人" prefix-icon="el-icon-search" v-model="valueSearch">
</el-input>
</div>
<div class="rightBtn">
<el-button type="primary" @click="getSomeStore(valueSearch)">查询</el-button>
<el-button @click="clearData()">重置</el-button>
</div>
</div>
<el-table ref="multipleTable" @row-click="clickRow" :data="storeTableData" tooltip-effect="dark"
style="width: 100%" @selection-change="handleSelectionChange" :row-style="{height: '0'}"
:cell-style="{padding: '0'}">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column prop="storeId" label="门店编号">
</el-table-column>
<el-table-column prop="storeName" label="门店名称" width="150">
</el-table-column>
<el-table-column prop="storeDirectorName" label="联系人">
</el-table-column>
<el-table-column prop="price" label="价格">
<template slot-scope="scope">
<el-input v-model="scope.row.price" @change="editSinglePrice(scope.$index, scope.row)"
placeholder="请输入价格"></el-input>
</template>
</el-table-column>
<el-table-column prop="goodsState" label="状态">
<template slot-scope="scope">
<span>{{scope.row.goodsState=='1'?'已上架':'未上架'}}</span>
</template>
</el-table-column>
<el-table-column prop="goodsState" label="操作" width="200">
<template slot-scope="scope">
<el-button :type="scope.row.goodsState=='1'?'info':'primary'" size='mini'
@click="scope.row.goodsState='1'">上架</el-button>
<el-button :type="scope.row.goodsState=='1'?'danger':'info'" size='mini'
@click="scope.row.goodsState='0'">下架</el-button>
<!-- <el-button
v-if="scope.row.goodsState=='1'"
type="info"
disabled
size='mini'@click="toggleSelection()">上架</el-button>
<el-button
v-else
type="primary"
size='mini'@click="toggleSelection()">上架</el-button>
<el-button
v-if="scope.row.goodsState=='1'"
type="danger"
size='mini'@click="toggleSelection()">下架</el-button>
<el-button
v-else
type="info"
disabled
size='mini'@click="toggleSelection()">下架</el-button> -->
</template>
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button> -->
<!-- <el-button @click="toggleSelection()">全选</el-button> -->
<el-button @click="toggleSelection()">取消选择</el-button>
<!-- <el-button @click="getAllChecked()">获取选中数据</el-button> -->
<el-button type="primary" @click="goodsOnShelves()">上架</el-button>
<el-button type="danger" @click="goodsOffShelves()">下架</el-button>
<span style="margin-left: 100px;">统一修改门店价格：</span>
<el-input placeholder="请输入价格" v-model="inputAllPrice" @blur="editAllPrice(inputAllPrice)"
@change="editAllPrice(inputAllPrice)" style="width: 200px;">
</el-input>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false">取 消</el-button>
<!-- <el-button type="primary" @click="centerDialogVisible = false;saveAllCheckedPrice()">确 定</el-button> -->
<el-button type="primary" @click="saveAllCheckedPrice()">确 定</el-button>
</span>
</el-dialog>
<!-- 主体 -->
<searchBtn :tableData="tableData" :tableArr="tableArr" :fname="Myname">
<template v-slot:btn2="slotProps">
<!-- 新增 暂时注释 -->
<el-button type="primary" @click="hadleAddGoods(slotProps)">新增</el-button>
<el-button type="primary" @click="undercarriagelist()">批量下架</el-button>
<!-- <el-button type="primary" @click="classifyChange()" > 分类 </el-button> -->
</template>
<!-- 商品图片 -->
<template v-slot:goodsImge="data">
<div class="imgBox">
<!-- <img :src="$imgUrl+(data.data.goodsImg).split(',')[0] "> -->
<img style="width:100px;height:100px;" :src="upImg(data.data.goodsImge)" />
</div>
</template>
<template v-slot:update="data">
<!-- 编辑 -->
<el-link type="primary" @click="hadleEdit1(data)">{{ "编辑 "+'/' }}</el-link>
<!-- 查看 -->
<el-link type="primary" @click="undercarriage(data)">下架</el-link>
<!-- <el-link type="primary" @click="hadleEdit2(data,2)">查看</el-link> -->
<!-- <el-link type="primary" @click="goGoodsDetails(data)">查看</el-link> -->
<el-link type="primary" @click="storeDistribution(data)">门店分配</el-link>
<!-- 删除 -->
<!-- <div class="USERDElete">
<el-link type="primary" @click="handleDelate(data)">删除</el-link>
</div> -->
</template>
</searchBtn>
<!-- 分页 -->
<Pagination :tableData="tableData" @changeData="changeData" ref="cpage"></Pagination>
<poplog ref="cpops" :_type="heigth" :cpopsName="cpopsName" :popWidth="popWidth">
<template v-slot:footer>
<div class="Goodsbox">
<childWater ref="cformS" @handleSuccess="handleClose"></childWater>
</div>
</template>
</poplog>
</div>
</template>
<script>
import {
validUsername
} from "@/utils/validate";
import {
setSession,
setCookie,
getSession,
delSession
} from "@/utils/cc";
import {
setToken
} from "@/utils/auth";
import {
common
} from "../../utils/person";
// 中部数据表
import searchBtn from "../../components/SearchBtn2/SearchBtn";
//分页
import Pagination from "../../components/Pagination2/Pagination";
import childWater from "./childCom/childWater";
// 弹框 引入弹框 点击编辑 或者 新增 时候出现
import poplog from "../../components/dialog/index";
// import { setSession, getSession, delSession } from "../../utils/cc";
export default {
data() {
return {
// 商品数据
tableData: [],
Myname: "goods",
placeMsg: "请输入商品名或者条形码",
lables: "商品名称",
options: [{
value: "",
label: "请选择商品类别"
},
{
value: 2,
label: "线上"
},
{
value: 1,
label: "线下"
}
],
//表格数据
tableArr: [{
prop: "goodsImge",
label: "商品图片"
},
{
prop: "goodsName",
label: "商品名称"
},
{
prop: "goodsPrice",
label: "零售价"
},
{
prop: "goodsSpecifications",
label: "商品规格"
},
{
prop: "goodsUnit",
label: "商品单位"
},
{
prop: "goodsCode",
label: "商品码"
},
{
prop: "goodsType",
label: "商品类别"
},
{
prop: "goodsStore",
label: "商品库存"
},
{
prop: "update",
label: "操作"
}
],
pageNum: this.$page.pageNum,
pageSize: this.$page.pageSize,
cpopsName: "", //弹窗名
heigth: "5vh", //弹框距离顶部距离
popWidth: "40%", // 弹框宽度
centerDialogVisible: false, //上下架弹框显示
goodsIdChecked:'',//选中的商品id
storeTableData: [
// {
// storeId: '1000003',
// storeDirectorName: '张三',
// price: '1010',
// storeName: '锦江区春熙路1号店',
// goodsState: '1'
// }, {
// storeId: '1000002',
// storeDirectorName: '张三',
// price: '1020',
// storeName: '锦江区春熙路2号店',
// goodsState: '0'
// }, {
// storeId: '1000004',
// storeDirectorName: '张三',
// price: '1200',
// storeName: '锦江区春熙路3号店',
// goodsState: '1'
// }, {
// storeId: '1000001',
// storeDirectorName: '张三',
// price: '1300',
// storeName: '锦江区春熙路4号店',
// goodsState: '0'
// }, {
// storeId: '1000008',
// storeDirectorName: '张三',
// price: '1040',
// storeName: '锦江区春熙路5号店',
// goodsState: '1'
// }, {
// storeId: '1000006',
// storeDirectorName: '王二',
// price: '1060',
// storeName: '锦江区春熙路6号店',
// goodsState: '1'
// }, {
// storeId: '1000007',
// storeDirectorName: '张三',
// price: '10330',
// storeName: '锦江区春熙路7号店',
// goodsState: '1'
// },
// {
// storeId: '1000008',
// storeDirectorName: '李四',
// price: '10090',
// storeName: '锦江区春熙路8号店',
// goodsState: '1'
// },
// {
// storeId: '1000009',
// storeDirectorName: '张三',
// price: '10660',
// storeName: '锦江区春熙路9号店',
// goodsState: '1'
// },
// {
// storeId: '10000010',
// storeDirectorName: '张三',
// price: '1500',
// storeName: '锦江区春熙路10号店',
// goodsState: '1'
// },
],
multipleSelection: [], //选中的所有值
multipleSelectionId: [], //选中的所有id
multipleSelectionPrice: [], //选中的所有价格
valueSearch: '', //门店搜索内容
inputAllPrice: '', //修改统一价格
goodsIds: '', //本页的所有商品id
};
},
created() {
this.request();
this.getGoodscalss();
},
destroyed() {
delSession("pageNum");
delSession("pageIndex");
delSession("goodsName");
delSession("goodsType");
},
methods: {
// 获取商品类别
async getGoodscalss() {
let res = await common({
that: this,
api: "goodscalssFindlist",
params: {
}
});
if (res) {
console.log("商品类别", res)
this.updataData(res.data);
}
},
//修改数据
updataData(data) {
console.log(data, '修改数据');
for (let val of data) {
val.value = val.classId;
val.label = val.calssName;
}
this.options = data;
},
// 新增商品
hadleAddGoods() {
this.cpopsName = "新增商品";
this.$refs.cpops.hidden(); // 打开弹窗
let obj = {
port: "water",
opt: "0",
cateList: {
...this.cateList
}
}; // port:water ===> 买水那个端 opt:0 ===> 新增商品
setTimeout(() => {
this.$refs.cformS.handleUpdate({
type: obj
});
}, 200);
},
//修改商品
hadleEdit1(val) {
this.cpopsName = '修改商品';
this.$refs.cpops.hidden(); // 打开弹窗
let obj = {
port: 'water',
opt: '1',
value: val.data.scope,
cateList: {
...this.cateList
}
}; // port:water ===> 买水那个端 opt:0 ===> 新增商品
setTimeout(() => {
this.$refs.cformS.handleUpdate({
type: obj
});
}, 200);
},
async request() {
let res = await common({
that: this,
api: "goodSearchlist",
params: {
pageIndex: Number(getSession("pageIndex")) || 1,
pageSize: 20,
goodsName: getSession("goodsName") || "",
goodsCalssId: getSession("goodsType") || ""
}
});
if (res) {
console.log("商品列表", res);
this.goodsIds=res.data.list.map(item=>item.goodsId)
console.log(this.goodsIds);
this.$refs.cpage.currentPage3 = Number(getSession("pageIndex")) || 1;
this.$refs.cpage.handleChangeTotal(res.data.total);
this.handleUp(res.data.list);
}
},
handleUp(data) {
// for (let val of data) {
// console.log("商品状态", val.goodsState);
// val.goodsState == 1
// ? (val.goodsState = "上架")
// : (val.goodsState = "下架");
// val.originalPrice =val.originalPrice
// val.goodsPrice =val.goodsPrice
// }
// console.log("修改后的商品", data);
this.tableData = data;
},
//下架一个
async undercarriage(data) {
// console.log("删除", data.data);
// console.log("删除", data.data.scope);
// console.log("删除", data.data.scope.goodsId);
let id = data.data.scope.goodsId;
console.log(id);
let res = await common({
that: this,
api: "undercarriage",
params: {
goodsId: id
}
});
if (res) {
console.log("下架成功一个商品");
this.request();
}
},
//批量下架一个
async undercarriagelist() {
console.log("批量下架");
// console.log("批量下架", data.data.scope);
// console.log("批量下架", data.data.scope.goodsId);
let ids = this.goodsIds;
console.log(ids);
let res = await common({
that: this,
api: "undercarriagelist",
params: {
goodsIds: ids
}
});
if (res) {
console.log("批量下架成功");
this.request();
}
},
async changeData(val) {
setSession("pageNum", val);
setSession("pageIndex", val);
this.request();
},
upImg(val) {
// 处理图片
// let imgArr = val.split(",");
// let img = imgArr[imgArr.length - 1]; // 截取最后一张图片
// return this.$imgUrl + img; // 返回图片路径
return val;
},
//查询
handleSearch(val) {
console.log("查询---", val);
setSession("goodsName", val.data.number);
setSession("goodsType", val.orderState);
setSession("pageIndex", 1);
// 筛选 查询
this.request("查询");
},
handleClose() {
// 新增或添加成功则关闭窗口 刷新页面
setTimeout(() => {
this.request();
}, 400);
this.$refs.cpops.hidden();
},
goGoodsDetails(data) {
console.log(data, '跳转去商品详情页');
let orderNo = data.orderNo;
this.$router.push({
name: 'goodsDetails',
params: {
orderNo: orderNo
}
});
},
storeDistribution(data) {
console.log(data, '打开门店分配弹窗');
this.goodsIdChecked=data.data.scope.goodsId
let orderNo = data.orderNo;
this.centerDialogVisible = true;
},
mendianSearch(valueSearch) {
},
// 查询门店
async getSomeStore(valueSearch) {
console.log(valueSearch);
let res = await common({
that: this,
api: "getSomeStore",
params: {
like: valueSearch||''
},
});
if (res) {
console.log("获取门店", res);
this.storeTableData = res.data;
}
},
// 重置
clearData() {
this.valueSearch = '';
this.storeTableData = [];
},
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
console.log(val, 'val');
this.multipleSelection = val;
console.log(val, '选中的所有值');
this.multipleSelectionId = val.map(item => item.id)
console.log(this.multipleSelectionId, '所有id');
this.multipleSelectionPrice = val.map(item => item.price)
console.log(this.multipleSelectionPrice, '所有price');
},
getAllChecked() {
// console.log(this.multipleSelection, '所有值');
// console.log(this.multipleSelectionId);
// console.log(this.multipleSelectionPrice, '所有价格');
},
editSinglePrice(index, row) {
// console.log(index);
// console.log(row);
// console.log(row.price);
// console.log(row.price, "修改单个价格");
},
editAllPrice(price) {
console.log(price);
console.log(price, "修改统一价格");
console.log(this.multipleSelection);
for (let i of this.multipleSelection) {
i.price = price
}
},
saveAllCheckedPrice() {
console.log(this.multipleSelection);
console.log(this.multipleSelection, "保存所有选中值的修改后的值");
let storelist=this.multipleSelection.map(item=>{
return{
storeId:item.storeId,
storePrice:item.price
}
})
console.log(storelist);
this.updategoods(storelist)
},
async updategoods(storelist) {
// "storelist": [
// {
// "storeId": 0,
// "storePrice": 0
// }
// ]
let res = await common({
that: this,
api: "updategoods",
params: {
goodsId:this.goodsIdChecked,
storelist:storelist
}
});
if (res) {
const {
code,
data
} = res;
this.dialogVisible = false;
this.orderTempFindlist();
}
},
clickRow(row) {
// 点击选中当前行的复选框被勾选
console.log(row, '点击了！row是什么');
this.$refs.multipleTable.toggleRowSelection(row)
},
goodsOnShelves() {
console.log("上架");
// /admin/updategoods
// 修改商品
// 传门店id "storelist": [0]
for (let i of this.multipleSelection) {
i.goodsState = "1"
}
console.log(this.multipleSelection);
},
goodsOffShelves() {
console.log("下架");
for (let i of this.multipleSelection) {
i.goodsState = "0"
}
console.log(this.multipleSelection);
},
},
components: {
searchBtn,
Pagination,
poplog,
childWater
}
};
</script>
<style lang="scss" scoped>
.goods {
background-color: white;
.goodsCodeGruop {
display: inline-block;
}
.mendan-change {
background-color: white;
margin: 10px 20px;
p {
margin: 0;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 8px 0 0;
font-weight: 700;
}
.left-box {
float: left;
width: 50%;
}
.rightBtn {
float: right;
width: 30%;
margin-right: 10px;
margin-bottom: 22px;
}
}
}
</style>
子组件弹框：
代码：
<template>
<div class="cgoodsBox">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
<el-form-item label="商品名称" prop="goodsName">
<el-input v-model="ruleForm.goodsName"></el-input>
</el-form-item>
<el-form-item label="零售价" prop="goodsPrice">
<el-input v-model="ruleForm.goodsPrice"></el-input>
</el-form-item>
<el-form-item label="商品规格" prop="goodsSpecifications">
<el-input v-model="ruleForm.goodsSpecifications"></el-input>
</el-form-item>
<el-form-item label="商品单位" prop="goodsUnit">
<el-input v-model="ruleForm.goodsUnit"></el-input>
</el-form-item>
<el-form-item label="商品码" prop="goodsCode">
<el-input v-model="ruleForm.goodsCode"></el-input>
</el-form-item>
<el-form-item label="商品类别" prop="goodsType">
<el-select v-model="ruleForm.goodsType" clearable placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.calssName" :value="item.classId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="商品库存" prop="goodsStore">
<el-input v-model="ruleForm.goodsStore"></el-input>
</el-form-item>
<!-- 商品列表页展示用 -->
<el-form-item label="商品单显图片">
<div class="img-box" v-show="dialogImageUrl">
<img :src="dialogImageUrl" width="146">
<i class="el-icon-delete" @click="deleteImg('goodsImge',dialogImageUrl)"></i>
</div>
<el-upload :action="upImg" list-type="picture-card" :limit="1" :on-preview="handlePictureCardPreview"
:before-upload="beforeUpload" :on-success="successUp" :file-list="fileList">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>
</el-form-item>
<!-- 顶部主图不超过5张 pptimgs-->
<el-form-item label="商品详情页和顶部图片">
<div class="img-box" v-for="(item,index) in dialogImageUrlPpt" :key="index">
<img :src="item" width="146">
<i class="el-icon-delete" @click="deleteImg('pptimgs',item)"></i>
</div>
<el-upload :action="upImgPpt" list-type="picture-card" :limit="5" :on-preview="handlePictureCardPreview"
:before-upload="beforeUpload" :on-success="goodsPptimgSuccessUp" :file-list="fileListPpt">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrlPpt" alt />
</el-dialog>
</el-form-item>
<!-- 图文详情infoimgs -->
<el-form-item label="图文详情图片">
<div class="img-box" v-for="(item,index) in dialogImageUrlInfo" :key="index">
<img :src="item" width="146">
<i class="el-icon-delete" @click="deleteImg('infoimgs',item)"></i>
</div>
<el-upload :action="upImgInfo" list-type="picture-card" :on-preview="handlePictureCardPreview"
:before-upload="beforeUpload" :on-success="infoImgsSuccessUp" :file-list="fileListInfo">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrlInfo" alt />
</el-dialog>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">{{ButtonType}}</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {
mixin
} from "../../../utils/mixins/minxin";
import {
setSession,
getSession,
delSession
} from "@/utils/cc";
import {
common
} from "@/utils/person";
import commonBase from "@/api/commonBase";
export default {
mixins: [mixin],
data() {
return {
ruleForm: {
goodsId: "", //商品id
goodsImge: "", //商品单显图片
pptimgs: "", //ppt图片
infoimgs: "", //图文详情图片
goodsName: "", //商品名称
goodsPrice: "", //零售价
goodsStore: "", //库存
goodsCode: "", //商品码
goodsUnit: "", //商品单位
goodsSpecifications: "", //商品规格
goodsType: "", //上下架
},
rules: {
originalPrice: [{
required: true,
message: "请输入活动名称",
trigger: "blur"
}],
goodsName: [{
required: true,
message: "请输入活动名称",
trigger: "blur"
}],
vipDiscount: [{
required: true,
message: "请输入会员折扣",
trigger: "blur"
}],
categoryId: [{
required: true,
message: "请选择商品分类",
trigger: "blur"
}],
goodsPrice: [{
required: true,
message: "请输入商品实际单价",
trigger: "blur"
}],
goodsDesc: [{
required: true,
message: "请输入商品描述",
trigger: "blur"
}],
goodsState: [{
required: true,
message: "请选择商品状态",
trigger: "blur"
}],
deliveryFee: [{
required: true,
message: "请输入配送费",
trigger: "blur"
}],
goodsUnit: [{
required: true,
message: "请输入商品单位",
trigger: "blur"
}],
goodsSpecifications: [{
required: true,
message: "请输入商品规格",
trigger: "blur"
}],
goodsImge: [{
required: true,
message: "请选择图片",
trigger: "blur"
}],
pptimgs: [{
required: true,
message: "请选择图片",
trigger: "blur"
}],
infoimgs: [{
required: true,
message: "请选择图片",
trigger: "blur"
}],
},
options: [], // 商品类别
cateoptions: [{
categoryId: 1,
categoryName: "水"
},
{
categoryId: 0,
categoryName: "小吃"
}
], // 商品状态状态
options4: [{
value: 1,
label: "需要"
}, {
value: 0,
label: "不需要"
}], // 押金购买
options2: [], // 获取门店
dialogImageUrl: "", // 预览图片的
dialogImageUrlPpt: "", // 预览图片的
dialogImageUrlInfo: "", // 预览图片的
dialogVisible: false,
fileList: [], // 展示单显图片的
fileListPpt: [], // 展示单显图片的
fileListInfo: [], // 展示单显图片的
picArr: [], // 存放单显商品图片,
picArrPpt: [], // 存放ppt图片,
picArrInfo: [], // 存放图文详情页图片,
isSwactch: true, // 控制 商品种类是否打开 买水要打开,卖鸡蛋不打开,
ButtonType: "",
goodsType: ""
};
},
computed: {
upImg() {
// 上传图片地址
// return 'http://192.168.0.233:8082/fileserver/upload' // 线下
return commonBase.defaultUrl + "/fileserver/upload"; // 线上
},
upImgPpt() {
// 上传图片地址
// return 'http://192.168.0.233:8082/fileserver/upload' // 线下
return commonBase.defaultUrl + "/fileserver/upload"; //
},
upImgInfo() {
// 上传图片地址
// return 'http://192.168.0.233:8082/fileserver/upload' // 线下
return commonBase.defaultUrl + "/fileserver/upload"; // 线上
},
specification() {
// 商品规格 蛋显示个 水显示痛
let arr1 = [{
value: "个",
label: "个"
}];
let arr2 = [{
value: "桶",
label: "桶"
}];
let list = arr1; // 默认等于 arr1
this.isSwactch ? (list = arr2) : null; // 如果 isSwactch === true 表示添加水, 否则是添加蛋;;
return list;
},
},
created() {
this.getGoodscalss();
this.getfindstore();
},
destroyed() {
delSession("api");
},
methods: {
//获取门店
async getfindstore() {
let res = await common({
that: this,
api: "getfindstore",
params: {
}
});
if (res) {
console.log("获取门店", res);
this.options2 = res.data;
}
},
// 获取商品类别
async getGoodscalss() {
let res = await common({
that: this,
api: "goodscalssFindlist",
params: {
}
});
if (res) {
console.log("商品类别", res);
this.options = res.data;
}
},
submitForm(formName) {
this.$refs[formName].validate(valid => {
console.log("验证通过", valid)
if (valid) {
this.handleDealWith();
console.log("验证通过后？");
} else {
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
async addOrUpdateGoods(params) {
// 请求
console.log("传过去的信息", params)
console.log(params)
console.log("getSession(api)====")
console.log(getSession(api));
let api = getSession("api");
let res = await common({
that: this,
api: api,
params,
_type: "操作"
});
// let res = await common({
// that: this,
// api: getSession('api'),
// params
// });
console.log('res11111111111');
console.log(res);
if (res) {
this.$emit("handleSuccess");
}
},
handleDealWith() {
// 提交请求前处理 再发送
let params = {
...this.ruleForm
};
// params.goodsUnit=this.input1+'/'+this.input2
// params.goodsPrice *= 100;
// params.originalPrice *= 100;
// params.goodsState === "上架" ? (params.goodsState = "1") : null;
// params.goodsState === "下架" ? (params.goodsState = "0") : null;
params.goodsId = this.ruleForm.goodsId; // 处理图片
params.goodsImge = this.dialogImageUrl; // 处理图片
params.pptimgs = this.dialogImageUrlPpt; // 处理图片
params.infoimgs = this.dialogImageUrlInfo; // 处理图片
console.log('看看参数：');
console.log(params);
// if (!params.goodsImge) {
// this.$message.error("请添加单显商品图片");
// return;
// }
// if (!params.pptimgs) {
// this.$message.error("请添加ppt图片");
// return;
// }
// if (!params.infoimgs) {
// this.$message.error("请添加图文详情图片");
// return;
// }
console.log("要提交的参数？？？？？？？？？");
console.log(params);
this.addOrUpdateGoods(params);
},
// 点开页面之后第一步：
//判断操作类型？如果是新增就只有类型。如果是修改就会收到传过来的值value
handleUpdate(data) {
console.log("dddddd", data)
// 处理来自父组件的 数据
console.log('商品id',data.type.value.goodsId);
this.ruleForm.goodsId = data.type.value.goodsId
let {
port,
opt
} = data.type; // opt:0 ===> 新增 opt:1 ===> 修改
opt == 0 ?
(this.ButtonType = "立即创建") :
(this.ButtonType = "确认修改");
let mymap = new Map([
["water_0", this.handleUPdateWater_A], // 卖蛋 新增
["water_1", this.handleUPdateWater_U], // 卖蛋 修改
["egg_0", this.handleUPdateEgg_A], // 买水 新增
["egg_1", this.handleUPdateEgg_U] // 买水 修改
]);
let action = mymap.get(`${port}_${opt}`);
try {
action(data);
} catch (error) {
console.log(error);
this.$message.error("系统异常");
}
},
// 点开页面之后第2步：如果是新增，完了之后就是验证
handleUPdateWater_A(data) {
// 卖水 新增
console.log("修改------");
this.resetForm("ruleForm");
this.isSwactch = true; // 并且把 商品分类 输入框给打开
this.cateoptions = data.type.cateList; // 买水的才需要 商品分类
this.ruleForm["id"] = ""; // 规格对应的数量
this.fileList = []; // 不需要 清空;
this.fileListPpt = []; // 不需要 清空;
this.fileListInfo = []; // 不需要 清空;
this.ruleForm.goodsImge = ""
this.ruleForm.pptimgs = ""
this.ruleForm.infoimgs = ""
this.picArr = []
this.picArrPpt = []
this.picArrInfo = []
setSession("api", "addProductList");
},
// 点开页面之后第2步：如果是修改，完了之后就是验证
handleUPdateWater_U(data) {
// 卖水 修改
console.log("确认修改");
console.log(data);
// console.log("返回图片地址", this.$imgUrl);
this.cateoptions = data.type.cateList; // 买水的才需要 商品分类
this.isSwactch = true; // 并且把 商品分类 输入框给打开
console.log("这里给val赋值的===");
let val = data.type.value;
for (const key in this.ruleForm) {
this.ruleForm[key] = val[key];
}
this.ruleForm["id"] = val["id"]; // 规格对应的数量
this.ruleForm["goodsSpecifications"] = val["goodsSpecifications"]; // 规格对应的数量
// console.log(this.$imgUrl);
// console.log(data.type);
console.log('data.type.value的值=====');
console.log(data.type.value);
console.log('goodsImge=======');
console.log(data.type.value.goodsImge);
console.log('pptlists==========');
console.log(data.type.value.pptlists);
console.log('infoImglists====');
console.log(data.type.value.infoImglists);
this.fileList = []; // 目前只对一张图片做处理;
// this.fileListPpt = data.type.value.pptlists; // 目前只对5张图片做处理;
// this.fileListInfo = data.type.value.infoImglists; // 目前做处理;
this.fileListPpt = []; // 目前只对5张图片做处理;
this.fileListInfo = []; // 目前做处理;
let obj = {
name: val.goodsImge,
url: `${val.goodsImge}`
};
let objPpt = {
name: val.pptimgs,
url: val.pptlists.map(item => item.goodsPptImg)
};
console.log("map得到的：objPptUrl", objPpt.url);
let objInfo = {
name: val.infoimgs,
url: val.infoImglists.map(item => item.goodsInfoImg)
};
console.log("map得到的：objInfoUrl", objInfo.url);
// this.fileList.push(obj);
// this.fileListPpt.push(objPpt);
// this.fileListInfo.push(objInfo);
// this.picArr = val.goodsImge; // 图片没有赋值上去 picArr 给赋值一遍;
// this.picArrPpt = objPpt.url; // 图片没有赋值上去 picArr 给赋值一遍;
// this.picArrInfo = objInfo.url; // 图片没有赋值上去 picArr 给赋值一遍;
this.dialogImageUrl = val.goodsImge;
this.dialogImageUrlPpt = objPpt.url;
this.dialogImageUrlInfo = objInfo.url;
// dialogImageUrl
// dialogImageUrlPpt
// dialogImageUrlInfo
console.log("this.picArrPpt的值：");
console.log(this.picArrPpt);
console.log("this.dialogImageUrlPpt的值：");
console.log(this.dialogImageUrlPpt);
console.log("this.picArrInfo的值：");
console.log(this.picArrInfo);
setSession("api", "updategoods");
},
handleUPdateEgg_A(data) {
// 卖蛋 新增
this.resetForm("ruleForm"); // 重置表单
this.isSwactch = false; // 并且把 商品分类输入框 关闭;
delete this.ruleForm.categoryId; // 卖蛋 要把商品种类给去掉 所以把 categoryId 这个字段给删除掉;
this.ruleForm["goodsId"] = ""; // 新增 不需要 goodsId = "";
this.fileList = []; // 不需要 清空;
this.fileListPpt = []; // 不需要 清空;
this.fileListInfo = []; // 不需要 清空;
console.log(this.ruleForm);
console.log("在这里操作卖蛋");
setSession("api", "addProductList");
},
handleUPdateEgg_U(data) {
// 卖蛋 修改
console.log("返回图片-----", this.$imgUrl)
delete this.ruleForm.categoryId; // 卖蛋 要把商品种类给去掉 所以把 categoryId 这个字段给删除掉;
this.isSwactch = false; // 并且把 商品分类输入框 关闭;
let val = data.type.value; // 获取父组件传来的值
for (const key in this.ruleForm) {
// 把从父组件传来的值 赋值到 表单上
this.ruleForm[key] = val[key];
}
this.ruleForm["goodsSpecifications"] = val["goodsSpecifications"]; // 规格对应的数量
this.fileList = []; // 目前只对一张图片做处理;
this.fileListPpt = []; // 目前只对一张图片做处理;
this.fileListInfo = []; // 目前只对一张图片做处理;
let obj = {
name: val.goodsImge,
url: `${this.$ImgUrl}${val.goodsImge}`
};
let objPpt = {
name: val.pptimgs,
url: `${this.$ImgUrl}${val.pptimgs}`
};
let objInfo = {
name: val.infoimgs,
url: `${this.$ImgUrl}${val.infoimgs}`
};
this.fileList.push(obj);
this.fileListPpt.push(objPpt);
this.fileListInfo.push(objInfo);
this.picArr = val.goodsImge; // 图片没有赋值上去 picArr 给赋值一遍;
this.picArrPpt = val.pptimgs; // 图片没有赋值上去 picArr 给赋值一遍;
this.picArrInfo = val.infoimgs; // 图片没有赋值上去 picArr 给赋值一遍;
setSession("api", "addOrUpdGoods");
},
/* 处理图片 */
beforeUpload(file) {
// 上传之前压缩图片
let _this = this;
return new Promise((resolve, reject) => {
let isLt2M = file.size / 1024 / 1024 < 10; // 判定图片大小是否小于10MB
if (!isLt2M) {
_this.$message.error("图片尺寸过大");
reject({
msg: "失败"
});
}
let image = new Image(),
resultBlob = "";
image.src = URL.createObjectURL(file);
image.onload = () => {
// 调用方法获取blob格式，方法写在下边
resultBlob = _this.compressUpload(image, file);
resolve(resultBlob);
};
image.onerror = () => {
reject({
msg: "格式转换失败"
});
};
});
},
successUp(res) {
// 图片上传成功
this.picArr = res.data; // 目前限制 只传一张
console.log(res.data, '目前限制 只传一张');
},
goodsPptimgSuccessUp(res) {
// 图片上传成功picArrPpt: null, // 存放ppt图片,
// dialogImageUrl
// dialogImageUrlPpt
// dialogImageUrlInfo
console.log("上传ppt");
console.log(res);
console.log(res.data); //只会得到一张图片的地址
if (res.data) {
console.log("之前的this.dialogImageUrlPpt");
console.log(this.dialogImageUrlPpt);
this.picArrPpt = []
this.picArrPpt.push(res.data)
if (this.dialogImageUrlPpt) {
this.dialogImageUrlPpt.push(res.data)
} else {
this.dialogImageUrlPpt = []
this.dialogImageUrlPpt.push(res.data)
}
console.log("之后的this.dialogImageUrlPpt");
console.log(this.dialogImageUrlPpt);
}
},
infoImgsSuccessUp(res) {
// 图片上传成功picArrInfo: null, // 存放图文详情页图片,
console.log("上传Info");
console.log(res);
console.log(res.data); //只会得到一张图片的地址
if (res.data) {
this.picArrInfo = []
this.picArrInfo.push(res.data)
if (this.dialogImageUrlInfo) {
this.dialogImageUrlInfo.push(res.data)
} else {
this.dialogImageUrlInfo = []
this.dialogImageUrlInfo.push(res.data)
}
}
},
handlePictureCardPreview(file) {
// 放大预览图片
this.dialogImageUrl = file.url;
this.dialogImageUrlPpt = file.url;
this.dialogImageUrlInfo = file.url;
this.dialogVisible = true;
},
// 删除图片
deleteImg(type, src) {
console.log("这个图片的类型", type);
console.log("这个图片的地址", src);
if (type == 'goodsImge') {
this.dialogImageUrl = ''
console.log("清空第一个单选图片");
console.log(this.dialogImageUrl);
}
if (type == 'pptimgs') {
console.log("之前", this.dialogImageUrlPpt);
let arr = this.dialogImageUrlPpt.filter(item => item !== src)
this.dialogImageUrlPpt = arr
console.log("之后", this.dialogImageUrlPpt);
}
if (type == 'infoimgs') {
console.log("之前", this.dialogImageUrlInfo);
let arr = this.dialogImageUrlInfo.filter(item => item !== src)
this.dialogImageUrlInfo = arr
console.log("之后", this.dialogImageUrlInfo);
}
}
}
};
</script>
<style lang="scss" scoped>
.cgoodsBox {
width: 450px;
.img-box {
width: 100%;
height: 146px;
float: left;
margin-bottom: 10px;
margin-right: 10px;
img {
border: 1px solid gray;
position: absolute;
margin-right: 10px;
width: 146px;
height: 146px;
}
img:hover {
border: 1px solid #409EFF;
opacity: 0.9;
}
.el-icon-delete {
position: relative;
font-size: 30px;
margin-left: 58px;
margin-top: 58px;
}
.zhezhao {
width: 146px;
height: 146px;
float: left;
left: 0;
background-color: #000000;
opacity: 0.5;
}
}
}
</style>
相关文章
- TP-admin即基于ThinkPHP5拿来即用高性能后台管理系统
- Android实例-程序切换到后台及从后台切换到前台
- java后台json如何传递到jsp中解析
- 权限管理系统之SpringBoot集成LayUI实现后台管理首页
- 新闻发布项目——后台JSP界面adminManage/modifyNews.jsp
- Oracle进程结构及后台进程简介
- 160. 如何根据 SAP Fiori UI 界面上的错误消息，找到后台 ABAP 对应的消息 ID
- SAP Gateway 后台模型的缓存设置
- SAP CRM WebClient UI recent object的后台存储实现
- 【分享】博客美化(1)基本后台设置与样式设置
- 如何找出 SAP Fiori Launchpad 里点击 tile 之后，读取业务数据调用的是哪个 SAP 后台系统的 OData 服务试读版
- IT：前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/中后台/体验管理等)之详细攻略
- Java项目练习:后台管理系统——管理员管理模块(附源码下载地址)
- 基于bootstrap的后台管理系统
- 使用Struts 2框架、ajax提交中文数据在后台乱码的问题
- 2022全网最全的腾讯后台自动化测试与持续部署实践【万字长文】
- 一个后台管理系统的界面样式和前端代码增删查改