Skip to content

S
shop-new
提交 0f62f25a authored 作者: 王天霸's avatar 王天霸
浏览文件
操作

Merge branch 'dev_hxz' into test 

# Conflicts:
#	src/utils/request.js
#	src/views/system/asset/withdraw/index.vue
#	src/views/system/order/index.vue
上级 609e5683 d9b05ecf
隐藏空白字符变更
内嵌 并排
正在显示 包含 4366 行增加 和 917 行删除
src/api/module/bankcard.js
浏览文件 @ 0f62f25a
...@@ -49,6 +49,6 @@ export function delBankcard(ids) { ...@@ -49,6 +49,6 @@ export function delBankcard(ids) {
return request({ return request({
url: '/system/bankcard/delete', url: '/system/bankcard/delete',
method: 'delete', method: 'delete',
data:{ids:ids} data:{id:ids}
}) })
} }
src/assets/styles/index.scss
浏览文件 @ 0f62f25a
...@@ -73,6 +73,10 @@ div:focus { ...@@ -73,6 +73,10 @@ div:focus {
padding-left: 5px; padding-left: 5px;
} }
.ml20 {
margin-left: 20px;
}
.block { .block {
display: block; display: block;
} }
......
src/assets/styles/ruoyi.scss
浏览文件 @ 0f62f25a
...@@ -142,6 +142,10 @@ ...@@ -142,6 +142,10 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
.el-input.is-disabled .el-input__inner {
color: #666;
}
/* text color */ /* text color */
.text-navy { .text-navy {
color: #1ab394; color: #1ab394;
...@@ -198,3 +202,31 @@ ...@@ -198,3 +202,31 @@
color: #fff!important; color: #fff!important;
background: #42b983!important; background: #42b983!important;
} }
/* 上传图片 */
.upload-img {
display: inline-block;
}
.el-upload--picture-card{
width: 98px;
height: 98px;
}
.el-upload{
width: 98px;
height: 98px;
line-height: 98px;
}
.el-upload-list--picture-card .el-upload-list__item{
width: 98px;
height: 98px;
line-height: 98px;
}
.el-upload-list--picture-card .el-upload-list__item-thumbnail{
width: 98px;
height: 98px;
line-height: 98px;
}
.avatar{
width: 98px;
height: 98px;
}
src/views/entry/fillMainInf.vue
浏览文件 @ 0f62f25a
...@@ -326,7 +326,7 @@ ...@@ -326,7 +326,7 @@
upLoadImg(data).then((res) => { upLoadImg(data).then((res) => {
if(res && res.data.code == 1){ if(res && res.data.code == 1){
this.licenseImgFileList.push({'url':res.data.data.imageUrl}); this.licenseImgFileList.push({'url':res.data.data.imageUrl});
this.$message('上传成功'); this.$message({type: 'success',message:'上传成功'});
this.$refs.mainForm.clearValidate('license'); this.$refs.mainForm.clearValidate('license');
} }
}); });
......
src/views/system/asset/balance/index.vue
浏览文件 @ 0f62f25a
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
return { return {
fullHeight: 0, fullHeight: 0,
tableHeight: 0, tableHeight: 0,
loading: true, // 遮罩层 loading: false, // 遮罩层
ids: [], // 选中数组 ids: [], // 选中数组
total: 0, // 总条数 total: 0, // 总条数
assetList: [], // 商户余额变动日志表格数据 assetList: [], // 商户余额变动日志表格数据
...@@ -93,12 +93,9 @@ ...@@ -93,12 +93,9 @@
}, },
/** 查询商户余额变动日志列表 */ /** 查询商户余额变动日志列表 */
getList() { getList() {
this.loading = true; listAsset(this.queryParams).then(res => {
//console.log("重点注意shopid", this.queryParams) this.assetList = res.data.list;
listAsset(this.queryParams).then(response => { this.total = res.data.total;
this.assetList = response.data.list;
this.total = response.data.total;
this.loading = false;
}); });
}, },
// 取消按钮 // 取消按钮
......
src/views/system/asset/bankcard/index.vue
浏览文件 @ 0f62f25a
<template> <template>
<div class="app-container"> <div class="app-container" v-loading="loading">
<el-card class="box-card"> <el-card class="box-card">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<el-row :span="24" type="flex" align="middle" justify="space-between"> <el-row :span="24" type="flex" align="middle" justify="space-between">
...@@ -20,18 +20,17 @@ ...@@ -20,18 +20,17 @@
</el-row> </el-row>
</div> </div>
<el-table v-loading="loading" :height="tableHeight" :data="bankcardList" <el-table :height="tableHeight" :data="bankcardList"
@selection-change="handleSelectionChange"> @selection-change="handleSelectionChange">
<el-table-column label="商户ID" align="center" prop="Id"/> <el-table-column label="商户ID" align="center" prop="id"/>
<el-table-column label="开户名" align="center" prop="BankAccountName"/> <el-table-column label="开户名" align="center" prop="bank_account_name"/>
<el-table-column label="城市名" align="center" prop="ProvinceCity"/> <!-- <el-table-column label="城市名" align="center" prop="ProvinceCity"/>-->
<el-table-column label="银行名称" align="center" prop="BankName"/> <el-table-column label="银行名称" align="center" prop="bank_name"/>
<el-table-column label="开户行" align="center" prop="Kaihuhang"/> <el-table-column label="开户行" align="center" prop="bank_branch_name"/>
<el-table-column label="户名" align="center" prop="BankAccountName"/> <el-table-column label="账号" align="center" prop="bank_account_sn"/>
<el-table-column label="账号" align="center" prop="BankAccountNo"/>
<!-- <el-table-column label="支付宝账户名称" align="center" prop="ZfbAccountName" />--> <!-- <el-table-column label="支付宝账户名称" align="center" prop="ZfbAccountName" />-->
<!-- <el-table-column label="支付宝账户" align="center" prop="ZfbAccount" />--> <!-- <el-table-column label="支付宝账户" align="center" prop="ZfbAccount" />-->
<el-table-column label="类型" :formatter="btypa" align="center" prop="State"/> <!-- <el-table-column label="类型" :formatter="btypa" align="center" prop="State"/>-->
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
...@@ -67,19 +66,19 @@ ...@@ -67,19 +66,19 @@
<!-- </el-dialog>--> <!-- </el-dialog>-->
<el-dialog :visible.sync="bank" :title="banktitle"> <el-dialog :visible.sync="bank" :title="banktitle">
<el-form ref="form" :model="form" :rules="rules" label-width="90px"> <el-form ref="form" :model="form" :rules="rules" label-width="90px" size="small">
<el-row> <!-- <el-row>-->
<el-col :span="16" :offset="3"> <!-- <el-col :span="16" :offset="3">-->
<el-form-item label="开户城市" prop="ProvinceCity"> <!-- <el-form-item label="开户城市" prop="ProvinceCity">-->
<el-input v-model="form.ProvinceCity" placeholder="请输入城市名和商户提交时一致"/> <!-- <el-input v-model="form.ProvinceCity" placeholder="请输入城市名和商户提交时一致"/>-->
</el-form-item> <!-- </el-form-item>-->
</el-col> <!-- </el-col>-->
</el-row> <!-- </el-row>-->
<el-row> <el-row>
<el-col :span="16" :offset="3"> <el-col :span="16" :offset="3">
<el-form-item label="银行名称"> <el-form-item label="银行名称">
<el-select v-model="form.BankName" placeholder="状态" style="width: 100%"> <el-select v-model="form.bankName" placeholder="状态" style="width: 100%">
<el-option v-for="item in bankList" :key="item.value" :label="item.value" <el-option v-for="item in bankList" :key="item.value" :label="item.value"
:value="item.value"></el-option> :value="item.value"></el-option>
</el-select> </el-select>
...@@ -89,32 +88,32 @@ ...@@ -89,32 +88,32 @@
<el-row> <el-row>
<el-col :span="16" :offset="3"> <el-col :span="16" :offset="3">
<el-form-item label="开户行" prop="kaihuhang"> <el-form-item label="开户行" prop="bank_branch_name">
<el-input v-model="form.kaihuhang" placeholder="请输入开户行"/> <el-input v-model="form.bank_branch_name" placeholder="请输入开户行"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="16" :offset="3"> <el-col :span="16" :offset="3">
<el-form-item label="户名" prop="BankAccountName"> <el-form-item label="户名" prop="bankAccountName">
<el-input v-model="form.BankAccountName" placeholder="请输入户名"/> <el-input v-model="form.bankAccountName" placeholder="请输入户名"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="16" :offset="3"> <el-col :span="16" :offset="3">
<el-form-item label="账号" prop="BankAccountNo"> <el-form-item label="账号" prop="BankAccountSn">
<el-input v-model="form.BankAccountNo" placeholder="请输入账号"/> <el-input v-model="form.BankAccountSn" placeholder="请输入账号"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel" size="small">取 消</el-button>
<el-button @click="cancel">取 消</el-button> <el-button type="primary" @click="submitForm" size="small">确 定</el-button>
</div> </div>
</el-dialog> </el-dialog>
...@@ -152,7 +151,7 @@ ...@@ -152,7 +151,7 @@
//银行 //银行
bankList: [], bankList: [],
// 遮罩层 // 遮罩层
loading: true, loading: false,
// 选中数组 // 选中数组
ids: [], ids: [],
// 非单个禁用 // 非单个禁用
...@@ -216,8 +215,10 @@ ...@@ -216,8 +215,10 @@
methods: { methods: {
//获取银行名称列表 //获取银行名称列表
getBankNameList() { getBankNameList() {
listBankname().then(response => { listBankname().then(res => {
this.bankList = response.data if(res.data) {
this.bankList = res.data
}
}); });
}, },
//类型改变 //类型改变
...@@ -245,17 +246,15 @@ ...@@ -245,17 +246,15 @@
}, },
/** 查询商户银行卡列表 */ /** 查询商户银行卡列表 */
getList() { getList() {
this.loading = true;
listBankcard(this.queryParams).then(response => { listBankcard(this.queryParams).then(response => {
this.bankcardList = response.data.list; this.bankcardList = response.data.data;
//console.log(this.bankcardList) // debugger
this.total = response.data.total; this.total = response.data.count;
if (this.total >= 3) { if (this.total >= 3) {
this.isAddbank = true; this.isAddbank = true;
}else { }else {
this.isAddbank = false; this.isAddbank = false;
} }
this.loading = false;
}); });
}, },
// 取消按钮 // 取消按钮
...@@ -307,10 +306,12 @@ ...@@ -307,10 +306,12 @@
this.$refs["form"].validate(valid => { this.$refs["form"].validate(valid => {
if (valid) { if (valid) {
this.form.sellerId = this.queryParams.sellerId; this.form.sellerId = this.queryParams.sellerId;
this.form.TxType = 1; // this.form.TxType = 1;
this.loading = true;
addBankcard(this.form).then(response => { addBankcard(this.form).then(response => {
if (response.code === 0) { if (response.code === 1) {
this.msgSuccess("新增成功"); this.msgSuccess("新增成功");
this.loading = false;
this.open = false; this.open = false;
this.bank = false; this.bank = false;
this.zfb = false; this.zfb = false;
...@@ -323,18 +324,20 @@ ...@@ -323,18 +324,20 @@
}, },
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
const ids = row.Id const ids = row.id
this.$confirm('是否确认删除商户银行卡编号为"' + ids + '"的数据项?', "警告", { this.$confirm('是否确认删除商户银行卡编号为"' + ids + '"的数据项?', "警告", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning"
}).then(function () { }).then(async() => {
return delBankcard(ids); this.loading = true;
}).then(() => { let result = await delBankcard(ids);
this.getList(); if(result.code === 1) {
this.msgSuccess("删除成功"); this.$message({type:'success',message:'删除成功'});
}).catch(function () { this.getList()
}); }
this.loading = false;
}).catch(()=> {});
}, },
} //methods结束 } //methods结束
}; };
......
src/views/system/asset/verifyrecord/index.vue
浏览文件 @ 0f62f25a
...@@ -65,8 +65,8 @@ ...@@ -65,8 +65,8 @@
<pagination <pagination
v-show="total>0" v-show="total>0"
:total="total" :total="total"
:page.sync="queryParams.pageNum" :page.sync="queryParams.page"
:limit.sync="queryParams.pageSize" :limit.sync="queryParams.limit"
@pagination="getList" @pagination="getList"
/> />
<!-- 添加或修改商户账单对话框 --> <!-- 添加或修改商户账单对话框 -->
...@@ -122,7 +122,7 @@ ...@@ -122,7 +122,7 @@
isBlance: true, isBlance: true,
billId: 0, billId: 0,
// 遮罩层 // 遮罩层
loading: true, loading: false,
// 选中数组 // 选中数组
ids: [], ids: [],
// 非单个禁用 // 非单个禁用
...@@ -142,8 +142,8 @@ ...@@ -142,8 +142,8 @@
sellerId: 0, sellerId: 0,
// 查询参数 // 查询参数
queryParams: { queryParams: {
pageNum: 1, page: 1,
pageSize: 10, limit: 10,
shopId: 0, shopId: 0,
money: null, money: null,
org_money: null, org_money: null,
...@@ -209,11 +209,9 @@ ...@@ -209,11 +209,9 @@
}, },
/** 查询商户账单列表 */ /** 查询商户账单列表 */
getList() { getList() {
this.loading = true;
listVerifyrecord(this.queryParams).then(response => { listVerifyrecord(this.queryParams).then(response => {
this.verifyrecordList = response.data.list; this.verifyrecordList = response.data.data;
this.total = response.data.total; this.total = response.data.count;
this.loading = false;
}); });
}, },
// 取消按钮 // 取消按钮
...@@ -244,7 +242,7 @@ ...@@ -244,7 +242,7 @@
}, },
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { handleQuery() {
this.queryParams.pageNum = 1; this.queryParams.page = 1;
this.getList(); this.getList();
}, },
/** 重置按钮操作 */ /** 重置按钮操作 */
......
src/views/system/asset/withdrawlog/index.vue
浏览文件 @ 0f62f25a
...@@ -23,8 +23,8 @@ ...@@ -23,8 +23,8 @@
<pagination <pagination
v-show="total>0" v-show="total>0"
:total="total" :total="total"
:page.sync="queryParams.pageNum" :page.sync="queryParams.page"
:limit.sync="queryParams.pageSize" :limit.sync="queryParams.limit"
@pagination="getList" @pagination="getList"
/> />
</el-card> </el-card>
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
fullHeight: 0, fullHeight: 0,
tableHeight: 0, tableHeight: 0,
// 遮罩层 // 遮罩层
loading: true, loading: false,
// 选中数组 // 选中数组
ids: [], ids: [],
// 非单个禁用 // 非单个禁用
...@@ -67,8 +67,8 @@ ...@@ -67,8 +67,8 @@
open: false, open: false,
// 查询参数 // 查询参数
queryParams: { queryParams: {
pageNum: 1, page: 1,
pageSize: 10, limit: 10,
sellerId: 0, sellerId: 0,
}, },
// 表单参数 // 表单参数
...@@ -128,18 +128,14 @@ ...@@ -128,18 +128,14 @@
}, },
/** 查询商户提现列表 */ /** 查询商户提现列表 */
getList() { getList() {
this.loading = true;
this.queryParams.sellerId = this.sellerId; this.queryParams.sellerId = this.sellerId;
//console.log(127, this.queryParams);
listWithdrawlog(this.queryParams).then(response => { listWithdrawlog(this.queryParams).then(response => {
if (response) { if (response) {
this.withdrawlogList = response.data.list; this.withdrawlogList = response.data.data;
this.total = response.data.total; this.total = response.data.count;
} else { } else {
this.$message({message: '数据出错啦！', type: 'error'}); this.$message({message: '数据出错啦！', type: 'error'});
} }
this.loading = false;
}); });
}, },
// 取消按钮 // 取消按钮
......
src/views/system/freight/freight_list/index.vue
浏览文件 @ 0f62f25a
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
fullHeight: 0, fullHeight: 0,
tableHeight: 0, tableHeight: 0,
// 遮罩层 // 遮罩层
loading: true, loading: false,
// 选中数组 // 选中数组
ids: [], ids: [],
// 非单个禁用 // 非单个禁用
...@@ -192,11 +192,11 @@ ...@@ -192,11 +192,11 @@
}, },
/** 查询freight列表 */ /** 查询freight列表 */
getList() { getList() {
this.loading = true; listFreight(this.queryParams).then(res => {
listFreight(this.queryParams).then(response => { if(res.data) {
this.freightList = response.data.data.list; this.freightList = res.data.list;
this.total = response.data.data.count; this.total = res.data.count;
this.loading = false; }
}); });
}, },
// 取消按钮 // 取消按钮
...@@ -317,13 +317,14 @@ ...@@ -317,13 +317,14 @@
}).then(async()=> { }).then(async()=> {
this.loading = true; this.loading = true;
let delResult = await delFreight(ids); let delResult = await delFreight(ids);
this.loading = false;
if(delResult.code === 1) { if(delResult.code === 1) {
this.$message({type: 'success',message: delResult.msg}); this.$message({type: 'success',message: delResult.msg});
this.getList();
} }
if(delResult.code === 0) { if(delResult.code === 0) {
this.$message({type: 'error',message: delResult.msg}); this.$message({type: 'error',message: delResult.msg});
} }
this.loading = false;
}).catch(()=> {}); }).catch(()=> {});
}, },
} //methods结束 } //methods结束
......
src/views/system/freight/freight_list/indexbtn.vue
浏览文件 @ 0f62f25a
...@@ -271,9 +271,10 @@ export default { ...@@ -271,9 +271,10 @@ export default {
item.fp= Number(item.fp*100).toFixed(); item.fp= Number(item.fp*100).toFixed();
item.np = Number(item.np*100).toFixed(); item.np = Number(item.np*100).toFixed();
}) })
//console.log(275,this.goodsDate); this.loading = true
addFreight(this.goodsDate).then(response => { addFreight(this.goodsDate).then(res => {
if(response.data.code === 1) { //console.log(275,res);
if(res.code === 1) {
this.$emit("closeIndexbtn",false); this.$emit("closeIndexbtn",false);
if(this.goodsDate.Id === 0) { if(this.goodsDate.Id === 0) {
this.$message({ message: '新增成功', type: 'success'}); this.$message({ message: '新增成功', type: 'success'});
......
src/views/system/goods-wfl/add/components/goodsimg.vue 0 → 100644
浏览文件 @ 0f62f25a
<template>
<div class="app-container" v-loading="loading">
<div style="margin: auto">
<p><span class="tipH4">商品主图</span><span class="tipText"><i class="el-icon-question tipIcon"></i>要求上传高清图片，大小在2M以内，支持png、jpg格式，尺寸要求为正方形。</span>
</p>
<el-upload
class="uploadData"
action="#"
list-type="picture-card"
:file-list="ruleFormdialogImageUrlplus"
:http-request="uploadGoodsMain"
:limit="1"
:on-exceed="limitCount1"
:before-upload = "beforeUpGoodsMainImg"
:before-remove = "beforeRemoveMainImg"
:on-remove="removeMainImg"
:on-preview="handleMainImgPreview"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisibleplus">
<img width="100%" :src="dialogImageUrlplus" alt=""/>
</el-dialog>
</div>
<div>
<p><span class="tipH4">商品轮播图</span><span class="tipText"><i class="el-icon-question tipIcon"></i>要求上传高清图片，大小在2M以内，支持png、jpg格式，尺寸要求为正方形。</span>
</p>
<el-upload
class="uploadData"
action="#"
list-type="picture-card"
:file-list="ruleFormdialogImageUrl"
:http-request="uploadSectionFile"
:limit="5"
:on-exceed="limitCount5"
:before-upload = "beforeUpCarouselImg"
:before-remove="beforeRemoveCarouselImg"
:on-remove="removeCarouseImg"
:on-preview="handlePictureCardPreview"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt=""/>
</el-dialog>
</div>
<div>
<el-button style="margin: 20px 0;" @click="resetGoodsImgForm">重置</el-button>
</div>
</div>
</template>
<script>
import {UploadImg} from '@/api/module/goods'
export default {
name: "goodsimg",
props: {
imgdata: {
type: Object,
required: true
}
},
data() {
return {
loading: false, // 全屏加载
picall: {
ruleFormdialogImageUrl: [],
ruleFormdialogImageUrlplus: [], //主图
},
ruleFormdialogImageUrl: [], //多图
dialogImageUrl: "",
dialogVisible: false,
ruleFormdialogImageUrlplus: [], //主图
dialogImageUrlplus: "",
dialogVisibleplus: false,
};
},
components: {},
mounted() {
},
watch: {
imgdata(curVal, oldVal) {
console.log(84,curVal);
if (curVal) {
if(curVal.ruleFormdialogImageUrl) {
curVal.ruleFormdialogImageUrl.forEach((itemName, nindex) => {
this.ruleFormdialogImageUrl.push({'url': itemName.thumbnailM})
})
}
if(this.ruleFormdialogImageUrlplus) {
this.ruleFormdialogImageUrlplus.push({'url': curVal.ruleFormdialogImageUrlplus});
}
}
},
picall: {
handler(val, oldVal) {
this.$emit('imgclicks', val)
},
deep: true
},
ruleFormdialogImageUrl: {
handler(val, oldVal) {
this.$set(this.picall, 'ruleFormdialogImageUrl', val)
},
deep: true
},
ruleFormdialogImageUrlplus: {
handler(val, oldVal) {
this.$set(this.picall, 'ruleFormdialogImageUrlplus', val)
},
deep: true
},
},
methods: {
// 商品主图 数量限制
limitCount1(files,fileList){
this.$message({message: '最多上传1张图片', type: 'warning'});
},
// 商品主图 大小格式样式校验
beforeUpGoodsMainImg(file,fileList){
if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") {
this.$message({
message: '上传图片格式只支持png/png格式',
type: "warning"
});
return false;
}
let isImgSize = (file.size / 1024 / 1024 ) > 2;
if(isImgSize) {
this.$message({
message: '上传图片大小不能超过2MB',
type: "warning"
});
return false;
}
// 图片宽高尺寸限制
return new Promise(function(resolve, reject){
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function(){
// 图片是否是正方形 宽高比为 1
let valid = img.width / img.height === 1;
valid ? resolve() : reject();
}
img.src = _URL.createObjectURL(file);
}).then(()=>{
return file;
}, ()=>{
this.$message({
message:'商品主图必须为正方形，请重新选择!',
type: 'warning'
});
return Promise.reject();
});
},
// 上传商品主图
uploadGoodsMain(param) {
this.loading = true;
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"image": this.Base64img}
UploadImg(data).then(res => {
this.loading = false;
if (res && res.data.code == 1) {
this.ruleFormdialogImageUrlplus.push({'url': res.data.data.imageUrl})
this.$message({ message:'上传成功',type:'success'});
}else {
this.ruleFormdialogImageUrlplus = [];
this.$message({ message:'上传失败，请重新上传',type:'error'});
}
})
});
},
// 商品主图 删除移除前
beforeRemoveMainImg(file,fileList) {
if(file.status === "success") {
return new Promise((res, rej) => {
this.$confirm(`是否删除此图片`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return res();
}).catch(() => {
this.$message({
type: 'success',
message: '取消删除!'
});
return rej();
});
});
}
},
// 主图删除
removeMainImg(file) {
if(file.status === "success") {
for(let i = 0; i < this.ruleFormdialogImageUrlplus.length; i++) {
if(file.uid === this.ruleFormdialogImageUrlplus[i].uid) {
this.ruleFormdialogImageUrlplus.splice(i,1);
}
}
this.$message({
type: 'success',
message: '删除成功!'
});
}
},
// 商品主图 预览
handleMainImgPreview(file) {
this.dialogImageUrlplus = file.url;
this.dialogVisibleplus = true;
},
// 轮播图 数量限制
limitCount5(files,fileList){
this.$message({message: '最多上传5张图片', type: 'warning'});
},
// 轮播图 大小格式样式校验
beforeUpCarouselImg(file) {
if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") {
this.$message({
message: '上传图片格式只支持png/png格式',
type: "warning"
});
return false;
}
let isImgSize = (file.size / 1024 / 1024 ) > 2;
if(isImgSize) {
this.$message({
message: '上传图片大小不能超过2MB',
type: "warning"
});
return false;
}
// 图片宽高尺寸限制
return new Promise(function(resolve, reject){
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function(){
// 图片是否是正方形 宽高比为 1
let valid = img.width / img.height === 1;
valid ? resolve() : reject();
}
img.src = _URL.createObjectURL(file);
}).then(()=>{
return file;
}, ()=>{
this.$message({
message:'轮播图图必须为正方形，请重新选择!',
type: 'warning'
});
return Promise.reject();
});
},
// 轮播图上传
uploadSectionFile(param) {
this.loading = true;
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"image": this.Base64img}
UploadImg(data).then(res => {
if (res && res.data.code == 1) {
this.ruleFormdialogImageUrl.push({'url': res.data.data.imageUrl});
this.$message({ message:'上传成功',type:'success'});
}else {
this.$message({ message:'上传失败，请重新上传',type:'error'});
}
this.loading = false;
})
});
},
// 轮播图 删除前
beforeRemoveCarouselImg(file,fileList) {
if(file.status === "success") {
return new Promise((res, rej) => {
this.$confirm(`是否删除此图片`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return res();
}).catch(() => {
this.$message({
type: 'success',
message: '取消删除!'
});
return rej();
});
});
}
},
// 商品轮播图删除
removeCarouseImg(file){
if(file.status === "success") {
for(let i = 0; i < this.ruleFormdialogImageUrl.length; i++) {
if(file.uid === this.ruleFormdialogImageUrl[i].uid) {
this.ruleFormdialogImageUrl.splice(i,1);
}
}
this.$message({
type: 'success',
message: '删除成功!'
});
}
},
// 轮播图预览
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleinfomationclick() {
let pic = {
ruleFormdialogImageUrlplus: this.ruleFormdialogImageUrlplus,
ruleFormdialogImageUrl: this.ruleFormdialogImageUrl
}
this.$emit('imgclicks', pic)
},
// 重置
resetGoodsImgForm() {
this.ruleFormdialogImageUrl = [];
this.ruleFormdialogImageUrlplus = [];
},
// -------------------------通用
// 图片转换为 base64
getBase64(file) {
return new Promise(function (resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function () {
imgResult = reader.result;
};
reader.onerror = function (error) {
reject(error);
};
reader.onloadend = function () {
resolve(imgResult);
};
});
},
},
};
</script>
<style lang="scss" type="text/stylus" scoped>
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
.tipH4{
font-size: 18px;
font-weight : 600;
}
.tipText {
font-size : 14px;
color: #c9c9c9;
}
.tipIcon {
color: #e3c300;
font-size:16px;
padding: 0 8px;
}
.ullist {
border: 1px solid #e7eaec;
padding: 10px;
margin-bottom: 10px;
}
.el-input-group {
width: calc(100% - 60px);
}
// 上传图片样式重置 start
.uploadData {
display: inline-block;
/deep/ .el-upload--picture-card {
width: 100px;
height: 100px;
}
/deep/ .el-upload {
width: 100px;
height: 100px;
line-height: 100px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item {
width: 100px;
height: 100px;
line-height: 100px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
width: 100px;
height: 100px;
line-height: 100px;
}
/deep/ .avatar {
width: 100px;
height: 100px;
}
}
// 上传图片样式 重置 end
/deep/.el-upload-list__item .el-icon-close-tip {
display :none!important;
}
</style>
src/views/system/goods-wfl/add/components/goodsinfomation.vue 0 → 100644
浏览文件 @ 0f62f25a
<template>
<div class="app-container">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="商品名称" prop="goodsName">
<el-input v-model="ruleForm.goodsName" style="width:400px;"></el-input>
<el-popover
placement="top-start" width="300" trigger="hover" content="最多允许输入30个汉字（60字符），建议标题内包含与商品相关的关键词">
<i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
</el-popover>
</el-form-item>
<el-form-item label="商品分类" prop="categoryId">
<el-cascader v-model="ruleForm.categoryId" :props='propsaddress' :options="options1" @change="handleChange"
style="width:400px;"></el-cascader>
</el-form-item>
<el-form-item label="市场原价" prop="scPrice">
<el-input v-model="ruleForm.scPrice" style="width:400px;"></el-input>
元
<el-popover
placement="top-start" width="300" trigger="hover" content="市场原价起到参考的作用">
<i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
</el-popover>
</el-form-item>
<el-form-item label="指导售价" prop="price">
<el-input v-model="ruleForm.price" style="width:400px;"></el-input>
元
<el-popover
placement="top-start" width="300" trigger="hover" content="您建议下游商家售卖的价格">
<i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
</el-popover>
</el-form-item>
<el-form-item label="结算价格" prop="jsPrice">
<el-input v-model="ruleForm.jsPrice" style="width:400px;"></el-input>
元
<el-popover
placement="top-start" width="300" trigger="hover" content="您与云仓平台最终结算的价格">
<i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
</el-popover>
</el-form-item>
<el-form-item label="运费模板" prop="freightId">
<el-radio-group v-model="ruleForm.resource" @change="freightIdTypeChange">
<el-radio label='1'>运费模板</el-radio>
<el-radio label='0'>单独运费</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="统一运费" v-if="ruleForm.resource==0" prop="wlPrice">
<el-input v-model="ruleForm.wlPrice" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="运费模板" v-if="ruleForm.resource==1">
<el-select v-model="ruleForm.freightId" placeholder="请选择运费模板" style="width:400px;" @change="selectTm">
<el-option v-for="item in freightList" :key="item.Id" :label="item.Name" :value="item.Id"
style="text-align:center;"></el-option>
</el-select>
</el-form-item>
<el-form-item label="发货时效" prop="Delayompensate">
<el-select v-model="ruleForm.Delayompensate" style="width:400px;" placeholder="请选择发货时效">
<el-option label="24小时" value="24" ></el-option>
<el-option label="48小时" value="48" ></el-option>
<el-option label="72小时" value="72" ></el-option>
</el-select>
</el-form-item>
<el-form-item label="售后时长" prop="aftersaleTime">
<el-select v-model="ruleForm.aftersaleTime" style="width:400px;" placeholder="请选择售后时长">
<el-option label="7天" value="7" style="text-align:center;"></el-option>
<el-option label="15天" value="15" style="text-align:center;"></el-option>
<el-option label="30天" value="30" style="text-align:center;"></el-option>
</el-select>
</el-form-item>
</el-col>
<!-- right -->
<el-col :span="12">
<el-form-item label="商品库存" prop="goodsNowStock">
<el-input v-model.number="ruleForm.goodsNowStock" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="商品产地" prop="producingArea">
<el-input v-model="ruleForm.producingArea " style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="商品重量" prop="weight">
<el-input v-model="ruleForm.weight" style="width:400px;"></el-input>
克（g）
</el-form-item>
<el-form-item label="商品单位" prop="unit">
<el-input v-model="ruleForm.unit" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="商品品牌" prop="goodsBrand">
<el-select v-model="ruleForm.goodsBrand" style="width:400px;" filterable @change="goodsBrandChange" placeholder="请选择品牌">
<el-option
v-for="item in brandOtions"
:key="item.id"
:label="item.brand_cn"
:value="item.id">
</el-option>
</el-select>
<el-link type="primary" @click="toBrand" :underline="false">添加品牌</el-link>
</el-form-item>
<el-form-item label="三方编号" prop="outGoodsId">
<el-input v-model="ruleForm.outGoodsId" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="附加运费" prop="pywlPrice" v-if="ruleForm.resource==0">
<el-input v-model="ruleForm.pywlPrice" style="width:400px;" placeholder="偏远地区六省"></el-input>
元
</el-form-item>
</el-col>
</el-row>
<el-form-item label="商品备注" prop="mark">
<el-input type="textarea" v-model="ruleForm.mark"></el-input>
</el-form-item>
<el-form-item label="服务标签" prop="serviceagsTags">
<el-checkbox-group v-model="serviceagsTags">
<el-checkbox v-for="item in tags" :label="item.id" true-label :key="item.id" :disabled="item.isdc" @change="serviceSingleChange(item.id)">{{item.tag}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="详情描述" style="height:550px;" prop="description" v-loading="quillUpdateImg">
<el-upload
class="avatar-uploader2"
action="#"
auto-upload
:http-request="uploadSectionFile"
name="file"
multiple
:show-file-list="false"
:file-list="ruleFormdialogImageUrl"
:before-upload="beforeUploadEdit">
</el-upload>
<input class="uploadImg" style="display: none;" type="file" ref="file" accept="image/*" @change="fileChange($event)" name="file" multiple id="file">
<quill-editor ref="myTextEditor" v-model="content" :options="editorOption" @change="onEditorChange" style="height:500px;margin-top:-30px;"></quill-editor>
</el-form-item>
<el-form-item style="margin-bottom: 0;">
<el-button @click="resetGoodsInfForm('ruleForm')">重 置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
// 工具栏配置
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}], // custom button values
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}], // superscript/subscript
[{'indent': '-1'}, {'indent': '+1'}], // outdent/indent
[{'direction': 'rtl'}], // text direction
// [{'size': ['small', false, 'large', 'huge']}], // custom dropdown
// [{'header': [1, 2, 3, 4, 5, 6, false]}],
// [{'color': []}, {'background': []}], // dropdown with defaults from theme
// [{'font': []}],
// [{'align': []}],
['image', 'video'],
['clean'] // remove formatting button
]
import {
GetCategory,
GetFreight,
UploadImg
} from '@/api/module/goods'
import {getBrandsInf} from '@/api/module/brand/brand'
export default {
name: 'goods',
props: {
infomationdatas: {
type: Object,
required: true
}
},
data() {
let categoryIdCheck = (rule, value, callback) => {
if (this.ruleForm.categoryId == 0 || !this.ruleForm.categoryId) {
callback(new Error("请选择商品分类"));
} else {
callback();
}
};
return {
tags: [
{id: 2, tag: "假一赔十", isdc: false},
{id: 3, tag: "7天退换", isdc: false},
{id: 4, tag: "不可退还", isdc: false},
{id: 5, tag: "厂家直供", isdc: false},
{id: 6, tag: "售后无忧", isdc: false}
],
propsaddress: {
label: 'label',
value: 'id',
},
content: '',
// editorOption: {
// placeholder: '编辑内容'
// },
brandOtions: [],
serviceagsTags: [],
ruleForm: {
outGoodsId: '',
value: [],
goodsId: 0,
goodsName: '',
scPrice: '',
price: "", //市场价 单位分
goodsNowStock: "",
producingArea: '',
weight: '',
unit: '', //单位
goodsBrand: '', //品牌
resource: '1',
categoryId: 0,
freightId: 310, //运费模板ID
wlPrice: '',
pywlPrice: '',
jsPrice: '', //协议价
Delayompensate: "",
aftersaleTime: '7',
mark: '',
serviceagsTags: [],
description: ''
},
rules: {
goodsName: [
{required: true, message: '请输入商品名称', trigger: 'blur'},
{min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
],
categoryId: [{required: true, message: '请选择商品分类', validator: categoryIdCheck}],
price: [{required: true, message: '请填写指导售价', trigger: 'blur'}],
jsPrice: [{required: true, message: '请填写结算售价', trigger: 'blur'}],
scPrice: [{required: true, message: '请填写市场原价', trigger: 'blur'}],
goodsNowStock: [
{required: true, message: '商品库存不能为空', trigger: 'blur'},
{type: 'number', message: '商品库存要填写数字'},
],
unit: [{required: true, message: '商品单位不能为空', trigger: 'blur'}],
goodsBrand: [{required: true, message: '商品品牌不能为空', trigger: 'change'}]
},
// 运费模板列表
freightList: [],
options1: [],
/*8888888888888*/
index:0,
indexall:0,
editorOption: {
placeholder: '',
theme: 'snow', // or 'bubble'
modules: {
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
'image': function (value) {
if (value) {
// 触发input框选择图片文件
document.querySelector('#file').click()
} else {
this.quill.format('image', false);
}
}
}
}
}
},
quillUpdateImg:false,
ruleFormdialogImageUrl:[]
}
},
components: {},
watch: {
serviceagsTags: {
handler(val, oldVal) {
this.$set(this.ruleForm, 'serviceagsTags', val)
},
deep: true
},
content: {
handler(val, oldVal) {
this.$set(this.ruleForm, 'description', val)
},
deep: true
},
ruleForm: {
handler(val, oldVal) {
val.description = this.content;
val.serviceagsTags = this.serviceagsTags;
this.$emit('infomationclick', val);
},
deep: true
},
infomationdatas(curVal, oldVal) {
console.log("商品信息子组件：",curVal);
if (curVal) {
this.ruleForm = curVal;
if(curVal.freightId == 0) {
this.ruleForm.resource = '0';
}else {
this.ruleForm.resource = '1';
}
this.content = this.ruleForm.description;
// 初始化
this.serviceagsTags = [];
if(this.ruleForm.serviceagsTags) {
this.ruleForm.serviceagsTags.forEach((val) => {
if (val) {
let nid = parseInt(val);
this.serviceagsTags.push(nid);
}
})
}
}
}
},
created() {
},
mounted() {
this.getCategory();
this.getFreight();
this.getBrands();
},
methods: {
fileChange(e){
const list = this.$refs.file.files;
console.log(list)
this.indexall = list.length
this.uplonds()
},
uplonds(){
this.getBase64(this.$refs.file.files[this.index]).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"image": this.Base64img}
this.quillUpdateImg = true;
UploadImg(data).then(res => {
if (res && res.data.code == 1) {
this.index++
this.ruleFormdialogImageUrl.push({'url': res.data.data.imageUrl});
this.$message({ message:'上传成功',type:'success'});
// 获取富文本组件实例
let quill = this.$refs.myTextEditor.quill;
let length = quill.getSelection().index;
// 插入图片 res.data.url为服务器返回的图片地址
quill.insertEmbed(length, 'image', res.data.data.imageUrl)
// 调整光标到最后
quill.setSelection(length + 1)
if(this.index<this.indexall){
this.uplonds()
}else{
this.index = 0
this.quillUpdateImg = false;
}
}else {
this.$message({ message:'上传失败，请重新上传',type:'error'});
this.quillUpdateImg = false;
}
})
});
},
/*************************/
// 上传图片前
beforeUploadEdit(res, file) {
// 显示loading动画
this.quillUpdateImg = true
},
// 上传图片成功
uploadSectionFile(param, file, fileList) {
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"image": this.Base64img}
this.quillUpdateImg = true;
UploadImg(data).then(res => {
if (res && res.data.code == 1) {
this.ruleFormdialogImageUrl.push({'url': res.data.data.imageUrl});
this.$message({ message:'上传成功',type:'success'});
// 获取富文本组件实例
let quill = this.$refs.myTextEditor.quill;
let length = quill.getSelection().index;
// 插入图片 res.data.url为服务器返回的图片地址
quill.insertEmbed(length, 'image', res.data.data.imageUrl)
// 调整光标到最后
quill.setSelection(length + 1)
}else {
this.$message({ message:'上传失败，请重新上传',type:'error'});
}
this.quillUpdateImg = false;
})
});
/*-----*/
},
// 图片转换为 base64
getBase64(file) {
return new Promise(function (resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function () {
imgResult = reader.result;
};
reader.onerror = function (error) {
reject(error);
};
reader.onloadend = function () {
resolve(imgResult);
};
});
},
/*************************/
// 服务标签 中，7天退换和不可退换只能2选一
serviceSingleChange(id) {
let index4 = this.serviceagsTags.indexOf(4);
let index3 = this.serviceagsTags.indexOf(3);
if(id == 3) {
if( index4 > -1) {
this.serviceagsTags.splice(index4,1)
}
}
if(id == 4) {
if( index3 > -1) {
this.serviceagsTags.splice(index3,1)
}
}
},
// 运费模板类型，change事件
freightIdTypeChange(val) {
// 0 单独运费 1 是运费模板
if(val === '1') {
if(this.ruleForm.freightId == 0) {
this.ruleForm.freightId = "全国包邮通用模板";
}
}
},
// 获取品牌信息
getBrands() {
getBrandsInf().then(res => {
if (res.data.data) {
this.brandOtions = res.data.data;
}
});
},
// 获取 商品分类 信息
getCategory() {
GetCategory({}).then(response => {
this.options1 = response.data.data;
});
},
// 运费模板
getFreight() {
GetFreight(this.queryParams).then(response => {
this.freightList = response.data
});
},
handleChange(value) {
this.ruleForm.categoryId = value[value.length - 1]
},
setTreeData(arr) {
// 删除所有 children,以防止多次调用
arr.forEach(function (item) {
delete item.children;
});
let map = {}; // 构建map
arr.forEach(i => {
map[i.third_id] = i; // 构建以third_id为键 当前数据为值
});
let treeData = [];
arr.forEach(child => {
const mapItem = map[child.parent_id]; // 判断当前数据的parent_id是否存在map中
if (mapItem) { // 存在则表示当前数据不是最顶层数据
// 注意: 这里的map中的数据是引用了arr的它的指向还是arr，当mapItem改变时arr也会改变,踩坑点
(mapItem.children || (mapItem.children = [])).push(child); // 这里判断mapItem中是否存在children, 存在则插入当前数据, 不存在则赋值children为[]然后再插入当前数据
} else { // 不存在则是组顶层数据
treeData.push(child);
}
});
return treeData;
},
onEditorChange({editor, html, text}) {
this.content = html;
//console.log(315,this.content);
},
// 商品品牌 向后台传入 name
goodsBrandChange(indexId) {
let obj = {};
obj = this.brandOtions.find((item)=>{//这里的userList就是上面遍历的数据源
return item.id === indexId;//筛选出匹配数据
});
this.ruleForm.goodsBrand = obj.brand_cn;
},
// 维护品牌
toBrand() {
this.$router.push({path: '/system/shop/brand'});
},
resetGoodsInfForm(formName) {
this.$refs[formName].resetFields();
// 详情描述，重置
this.content = '';
// 服务标签
this.serviceagsTags = [];
//console.log("重置后的数据：",this.ruleForm);
},
// 商品信息 子组件 form表单校验
validateGoodsInfForm () {
let flag = null
this.$refs['ruleForm'].validate(valid => {
if (valid) {
flag = true
} else {
flag = false
}
})
return flag
},
selectTm(indexId) {
},
}
}
</script>
<style scoped>
ul, li {
list-style: none;
/*margin: 0;*/
/*padding: 0;*/
}
.el-input-group {
width: calc(100% - 60px);
}
</style>
src/views/system/goods-wfl/add/components/goodsinfomationhxz.vue 0 → 100644
浏览文件 @ 0f62f25a
<template>
<div class="app-container">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="商品名称" prop="goodsName">
<el-input v-model="ruleForm.goodsName" style="width:400px;"></el-input>
<el-popover
placement="top-start" width="300" trigger="hover" content="最多允许输入30个汉字（60字符），建议标题内包含与商品相关的关键词">
<i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
</el-popover>
</el-form-item>
<el-form-item label="商品分类" prop="categoryId">
<el-cascader v-model="ruleForm.categoryId" :props='propsaddress' :options="options1" @change="handleChange"
style="width:400px;"></el-cascader>
</el-form-item>
<el-form-item label="市场原价" prop="scPrice">
<el-input v-model="ruleForm.scPrice" style="width:400px;"></el-input>
元
<el-popover
placement="top-start" width="300" trigger="hover" content="市场原价起到参考的作用">
<i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
</el-popover>
</el-form-item>
<el-form-item label="指导售价" prop="price">
<el-input v-model="ruleForm.price" style="width:400px;"></el-input>
元
<el-popover
placement="top-start" width="300" trigger="hover" content="您建议下游商家售卖的价格">
<i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
</el-popover>
</el-form-item>
<el-form-item label="结算价格" prop="jsPrice">
<el-input v-model="ruleForm.jsPrice" style="width:400px;"></el-input>
元
<el-popover
placement="top-start" width="300" trigger="hover" content="您与云仓平台最终结算的价格">
<i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
</el-popover>
</el-form-item>
<el-form-item label="运费模板" prop="freightId">
<el-radio-group v-model="ruleForm.resource" @change="freightIdTypeChange">
<el-radio label='1'>运费模板</el-radio>
<el-radio label='0'>单独运费</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="统一运费" v-if="ruleForm.resource==0" prop="wlPrice">
<el-input v-model="ruleForm.wlPrice" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="运费模板" v-if="ruleForm.resource==1">
<el-select v-model="ruleForm.freightId" placeholder="请选择运费模板" style="width:400px;" @change="selectTm">
<el-option v-for="item in freightList" :key="item.Id" :label="item.Name" :value="item.Id"
style="text-align:center;"></el-option>
</el-select>
</el-form-item>
<el-form-item label="发货时效" prop="Delayompensate">
<el-select v-model="ruleForm.Delayompensate" style="width:400px;" placeholder="请选择发货时效">
<el-option label="24小时" value="24" ></el-option>
<el-option label="48小时" value="48" ></el-option>
<el-option label="72小时" value="72" ></el-option>
</el-select>
</el-form-item>
<el-form-item label="售后时长" prop="aftersaleTime">
<el-select v-model="ruleForm.aftersaleTime" style="width:400px;" placeholder="请选择售后时长">
<el-option label="7天" value="7" style="text-align:center;"></el-option>
<el-option label="15天" value="15" style="text-align:center;"></el-option>
<el-option label="30天" value="30" style="text-align:center;"></el-option>
</el-select>
</el-form-item>
</el-col>
<!-- right -->
<el-col :span="12">
<el-form-item label="商品库存" prop="goodsNowStock">
<el-input v-model.number="ruleForm.goodsNowStock" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="商品产地" prop="producingArea">
<el-input v-model="ruleForm.producingArea " style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="商品重量" prop="weight">
<el-input v-model="ruleForm.weight" style="width:400px;"></el-input>
克（g）
</el-form-item>
<el-form-item label="商品单位" prop="unit">
<el-input v-model="ruleForm.unit" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="商品品牌" prop="goodsBrand">
<el-select v-model="ruleForm.goodsBrand" style="width:400px;" filterable @change="goodsBrandChange" placeholder="请选择品牌">
<el-option
v-for="item in brandOtions"
:key="item.id"
:label="item.brand_cn"
:value="item.id">
</el-option>
</el-select>
<el-link type="primary" @click="toBrand" :underline="false">添加品牌</el-link>
</el-form-item>
<el-form-item label="三方编号" prop="outGoodsId">
<el-input v-model="ruleForm.outGoodsId" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="附加运费" prop="pywlPrice" v-if="ruleForm.resource==0">
<el-input v-model="ruleForm.pywlPrice" style="width:400px;" placeholder="偏远地区六省"></el-input>
元
</el-form-item>
</el-col>
</el-row>
<el-form-item label="商品备注" prop="mark">
<el-input type="textarea" v-model="ruleForm.mark"></el-input>
</el-form-item>
<el-form-item label="服务标签" prop="serviceagsTags">
<el-checkbox-group v-model="serviceagsTags">
<el-checkbox v-for="item in tags" :label="item.id" true-label :key="item.id" :disabled="item.isdc" @change="serviceSingleChange(item.id)">{{item.tag}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="详情描述" style="height:550px;" prop="description" v-loading="quillUpdateImg">
<el-upload
class="avatar-uploader2"
action="#"
:http-request="uploadSectionFile"
name="file"
:show-file-list="false"
:file-list="ruleFormdialogImageUrl"
:before-upload="beforeUploadEdit">
</el-upload>
<quill-editor ref="myTextEditor" v-model="content" :options="editorOption" @change="onEditorChange" style="height:500px;margin-top:-30px;"></quill-editor>
</el-form-item>
<el-form-item style="margin-bottom: 0;">
<el-button @click="resetGoodsInfForm('ruleForm')">重 置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
// 工具栏配置
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}], // custom button values
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}], // superscript/subscript
[{'indent': '-1'}, {'indent': '+1'}], // outdent/indent
[{'direction': 'rtl'}], // text direction
// [{'size': ['small', false, 'large', 'huge']}], // custom dropdown
// [{'header': [1, 2, 3, 4, 5, 6, false]}],
// [{'color': []}, {'background': []}], // dropdown with defaults from theme
// [{'font': []}],
// [{'align': []}],
['image', 'video'],
['clean'] // remove formatting button
]
import {
GetCategory,
GetFreight,
UploadImg
} from '@/api/module/goods'
import {getBrandsInf} from '@/api/module/brand/brand'
export default {
name: 'goods',
props: {
infomationdatas: {
type: Object,
required: true
}
},
data() {
let categoryIdCheck = (rule, value, callback) => {
if (this.ruleForm.categoryId == 0 || !this.ruleForm.categoryId) {
callback(new Error("请选择商品分类"));
} else {
callback();
}
};
return {
tags: [
{id: 2, tag: "假一赔十", isdc: false},
{id: 3, tag: "7天退换", isdc: false},
{id: 4, tag: "不可退还", isdc: false},
{id: 5, tag: "厂家直供", isdc: false},
{id: 6, tag: "售后无忧", isdc: false}
],
propsaddress: {
label: 'label',
value: 'id',
},
content: '',
// editorOption: {
// placeholder: '编辑内容'
// },
brandOtions: [],
serviceagsTags: [],
ruleForm: {
outGoodsId: '',
value: [],
goodsId: 0,
goodsName: '',
scPrice: '',
price: "", //市场价 单位分
goodsNowStock: "",
producingArea: '',
weight: '',
unit: '', //单位
goodsBrand: '', //品牌
resource: '1',
categoryId: 0,
freightId: 310, //运费模板ID
wlPrice: '',
pywlPrice: '',
jsPrice: '', //协议价
Delayompensate: "",
aftersaleTime: '7',
mark: '',
serviceagsTags: [],
description: ''
},
rules: {
goodsName: [
{required: true, message: '请输入商品名称', trigger: 'blur'},
{min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
],
categoryId: [{required: true, message: '请选择商品分类', validator: categoryIdCheck}],
price: [{required: true, message: '请填写指导售价', trigger: 'blur'}],
jsPrice: [{required: true, message: '请填写结算售价', trigger: 'blur'}],
scPrice: [{required: true, message: '请填写市场原价', trigger: 'blur'}],
goodsNowStock: [
{required: true, message: '商品库存不能为空', trigger: 'blur'},
{type: 'number', message: '商品库存要填写数字'},
],
unit: [{required: true, message: '商品单位不能为空', trigger: 'blur'}],
goodsBrand: [{required: true, message: '商品品牌不能为空', trigger: 'change'}]
},
// 运费模板列表
freightList: [],
options1: [],
/*8888888888888*/
editorOption: {
placeholder: '',
theme: 'snow', // or 'bubble'
modules: {
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
'image': function (value) {
if (value) {
// 触发input框选择图片文件
document.querySelector('.avatar-uploader2 input').click()
} else {
this.quill.format('image', false);
}
}
}
}
}
},
quillUpdateImg:false,
ruleFormdialogImageUrl:[]
}
},
components: {},
watch: {
serviceagsTags: {
handler(val, oldVal) {
this.$set(this.ruleForm, 'serviceagsTags', val)
},
deep: true
},
content: {
handler(val, oldVal) {
this.$set(this.ruleForm, 'description', val)
},
deep: true
},
ruleForm: {
handler(val, oldVal) {
val.description = this.content;
val.serviceagsTags = this.serviceagsTags;
this.$emit('infomationclick', val);
},
deep: true
},
infomationdatas(curVal, oldVal) {
console.log("商品信息子组件：",curVal);
if (curVal) {
this.ruleForm = curVal;
if(curVal.freightId == 0) {
this.ruleForm.resource = '0';
}else {
this.ruleForm.resource = '1';
}
this.content = this.ruleForm.description;
// 初始化
this.serviceagsTags = [];
if(this.ruleForm.serviceagsTags) {
this.ruleForm.serviceagsTags.forEach((val) => {
if (val) {
let nid = parseInt(val);
this.serviceagsTags.push(nid);
}
})
}
}
}
},
created() {
},
mounted() {
this.getCategory();
this.getFreight();
this.getBrands();
},
methods: {
/*************************/
// 上传图片前
beforeUploadEdit(res, file) {
// 显示loading动画
this.quillUpdateImg = true
},
// 上传图片成功
uploadSectionFile(param) {
this.quillUpdateImg = true;
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"image": this.Base64img}
UploadImg(data).then(res => {
if (res && res.data.code == 1) {
this.ruleFormdialogImageUrl.push({'url': res.data.data.imageUrl});
this.$message({ message:'上传成功',type:'success'});
// 获取富文本组件实例
let quill = this.$refs.myTextEditor.quill;
let length = quill.getSelection().index;
// 插入图片 res.data.url为服务器返回的图片地址
quill.insertEmbed(length, 'image', res.data.data.imageUrl)
// 调整光标到最后
quill.setSelection(length + 1)
}else {
this.$message({ message:'上传失败，请重新上传',type:'error'});
}
this.quillUpdateImg = false;
})
});
/*-----*/
},
// 图片转换为 base64
getBase64(file) {
return new Promise(function (resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function () {
imgResult = reader.result;
};
reader.onerror = function (error) {
reject(error);
};
reader.onloadend = function () {
resolve(imgResult);
};
});
},
/*************************/
// 服务标签 中，7天退换和不可退换只能2选一
serviceSingleChange(id) {
let index4 = this.serviceagsTags.indexOf(4);
let index3 = this.serviceagsTags.indexOf(3);
if(id == 3) {
if( index4 > -1) {
this.serviceagsTags.splice(index4,1)
}
}
if(id == 4) {
if( index3 > -1) {
this.serviceagsTags.splice(index3,1)
}
}
},
// 运费模板类型，change事件
freightIdTypeChange(val) {
// 0 单独运费 1 是运费模板
if(val === '1') {
if(this.ruleForm.freightId == 0) {
this.ruleForm.freightId = "全国包邮通用模板";
}
}
},
// 获取品牌信息
getBrands() {
getBrandsInf().then(res => {
if (res.data.data) {
this.brandOtions = res.data.data;
}
});
},
// 获取 商品分类 信息
getCategory() {
GetCategory({}).then(response => {
this.options1 = response.data.data;
});
},
// 运费模板
getFreight() {
GetFreight(this.queryParams).then(response => {
this.freightList = response.data
});
},
handleChange(value) {
this.ruleForm.categoryId = value[value.length - 1]
},
setTreeData(arr) {
// 删除所有 children,以防止多次调用
arr.forEach(function (item) {
delete item.children;
});
let map = {}; // 构建map
arr.forEach(i => {
map[i.third_id] = i; // 构建以third_id为键 当前数据为值
});
let treeData = [];
arr.forEach(child => {
const mapItem = map[child.parent_id]; // 判断当前数据的parent_id是否存在map中
if (mapItem) { // 存在则表示当前数据不是最顶层数据
// 注意: 这里的map中的数据是引用了arr的它的指向还是arr，当mapItem改变时arr也会改变,踩坑点
(mapItem.children || (mapItem.children = [])).push(child); // 这里判断mapItem中是否存在children, 存在则插入当前数据, 不存在则赋值children为[]然后再插入当前数据
} else { // 不存在则是组顶层数据
treeData.push(child);
}
});
return treeData;
},
onEditorChange({editor, html, text}) {
this.content = html;
//console.log(315,this.content);
},
// 商品品牌 向后台传入 name
goodsBrandChange(indexId) {
let obj = {};
obj = this.brandOtions.find((item)=>{//这里的userList就是上面遍历的数据源
return item.id === indexId;//筛选出匹配数据
});
this.ruleForm.goodsBrand = obj.brand_cn;
},
// 维护品牌
toBrand() {
this.$router.push({path: '/system/shop/brand'});
},
resetGoodsInfForm(formName) {
this.$refs[formName].resetFields();
// 详情描述，重置
this.content = '';
// 服务标签
this.serviceagsTags = [];
//console.log("重置后的数据：",this.ruleForm);
},
// 商品信息 子组件 form表单校验
validateGoodsInfForm () {
let flag = null
this.$refs['ruleForm'].validate(valid => {
if (valid) {
flag = true
} else {
flag = false
}
})
return flag
},
selectTm(indexId) {
},
}
}
</script>
<style scoped>
ul, li {
list-style: none;
/*margin: 0;*/
/*padding: 0;*/
}
.el-input-group {
width: calc(100% - 60px);
}
</style>
src/views/system/goods-wfl/add/components/goodsparameter.vue 0 → 100644
浏览文件 @ 0f62f25a
<template>
<div class="app-container">
<el-row :gutter="20">
<el-col :span="4" >
<div class="grid-content bg-purple">
<p>参数</p>
<p style="font-size:12px;">根据商品特性设置相符的商品参数</p>
</div>
</el-col>
<el-col :span="20" style="border-left:2px solid #fff;">
<div class='tablessst'>
<p class="col_p">参数名称</p>
<p class='col_pr'>参数值 拖动行可进行排序</p>
</div>
<div v-for="(item,index) in goodsPram" :key="index" v-dragging="{ list: goodsPram, item: item, group: 'knowTab' }" class='tablesss'>
<p class="col_p"><el-input v-model="item.title" placeholder="如尺码,颜色等" style="width:calc(100% - 20px)"></el-input></p>
<p class='col_pr'>
<el-input v-model="item.value" placeholder="根据参数进行设置, 如 S/M/L/XL/XXl, 或红/黄/蓝" style="width:calc(100% - 200px)"></el-input>
<el-button icon="el-icon-close" style="margin-left:10px;" @click="deletearrinput(index)"></el-button>
<el-button style="margin-left:10px;">拖动排序</el-button>
</p>
</div>
<el-button @click="addguild()" icon="el-icon-plus" style="margin-top:20px;"> 添加参数</el-button>
</el-col>
</el-row>
<!-- <el-button type="primary" @click="handleinfomationclick('ruleForm')">下一步</el-button>-->
<el-button >重置</el-button>
</div>
</template>
<script>
export default {
name: 'goodsmeter',
props: {
parameterdata: {
type: Object,
required: true
}
},
data() {
return {
goodsPram:[{
id:0,
title:'',
value:''
}]
}
},
components:{
'hello':{
render:function(createElement){
return createElement(
'h'+this.level,
this.$se
)
}
}
},
mounted() {
// this.driver = new Driver()
this.$dragging.$on('dragged', (value) => {
//因为我这在排序的时候不需要做处理，所以空着就行
// debugger
})
},
watch:{
goodsPram:{
handler(val, oldVal){
this.$emit('parameterclicks',val)
},
deep:true
},
parameterdata(curVal,oldVal){
if(curVal){
this.goodsPram= curVal
}
}
},
methods: {
handleinfomationclick(formName) {
this.$emit('parameterclicks',this.goodsPram)
},
addguild(){
let arrchild={
id:0,
title:'',
value:''
}
this.$set(this.goodsPram, this.goodsPram.length,arrchild)
},
deletearrinput(index){
this.goodsPram.splice(index,1)
},
}
}
</script>
<style scoped>
.app-container{
width:100%;
height:100%;
background: #f8f8f8;
}
ul,li{
list-style: none;
margin: 0;
padding:0;
}
.ullist{
border: 1px solid #e7eaec;
padding: 10px;
margin-bottom: 10px;
}
.el-input-group{
width:calc(100% - 60px);
}
.col_p{
width:30%;
float:left;
}
.col_pr{
width:70%;
float:left;
}
.tablesss{
height:70px;
border-bottom: 1px solid #e6ebf5;
}
.tablessst{
height:50px;
border-bottom: 1px solid #e6ebf5;
}
</style>
src/views/system/goods-wfl/add/components/guide.vue 0 → 100644
浏览文件 @ 0f62f25a
<template>
<div class="app-container">
<div>
<!-- <div slot="header" class="clearfix">
<span>商品规格</span>
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
</div> -->
<el-checkbox v-model="checked">启用商品规格</el-checkbox>
<p style='font-size:14px;'>启用商品规格后，商品的价格及库存以商品规格为准</p>
<p style='font-size:14px;'>
操作顺序：添加新规格 (<span style="color: red">必填</span>) -&gt;
添加规格项 (<span style="color: red">必填</span>) -&gt; 生成产品规格表
-&gt; 修改数值 -&gt; 保存商品规格
<span style="color: red">注意：商品价格金额必须小于指导价格</span>
</p>
<ul class="tab_list" v-if="checked">
<li
class="ullist"
v-for="(item, index) in shopType"
:key="index"
v-dragging="{ list: shopType, item: item, group: 'knowTab' }"
>
<div class="tab_list_left">
<div style="margin-top: 15px">
<el-input placeholder="请输入内容" v-model="item.specName" >
<template slot="append">
<el-button
type="primary"
class="addbtn"
@click="addlistguied(index)"
><i class="el-icon-plus"></i>添加规格项</el-button
>
</template>
</el-input>
<el-button
type="danger"
icon="el-icon-delete"
class="eldelbtn"
@click="deletearrinput(index)"
></el-button>
</div>
<el-row :gutter="20" class="tab_list childlist">
<el-col
:span="4"
v-for="(items, indexs) in item.specValue"
:key="indexs"
v-dragging="{
list: item.specValue,
item: items,
group: 'itemchild',
}"
style="margin: 5px 0; min-width: 205px"
>
<el-input
placeholder=""
v-model="items.value"
@input="guidInput"
style="
width: 100%;
min-width: 200px;
padding: 0;
text-align: center;
"
>
<template slot="append">
<!-- <img :src="nopeimg" alt="" style="width:29px;height:29px;display:inline-block;"/> -->
<!-- -->
<el-button
type="primary"
class="dfbtn"
icon="el-icon-delete"
>
<input
style="
display: none;
width: 29px;
height: 29px;
position: absolute;
left: 0;
top: 0;
"
@change="inputimg()"
accept="image/*"
:id="imagesid(index, indexs)"
type="file"
/>
<img
v-if="!items.img"
:src="nopeimg"
alt=""
style="
width: 25px;
height: 25px;
position: absolute;
left: 2px;
top: 2px;
"
@click="updateimg(index, indexs)"
/>
<img
v-if="items.img"
:src="items.img"
alt=""
style="
width: 33px;
height: 33px;
position: absolute;
left: 0;
top: 0;
"
/>
</el-button>
<el-button
type="primary"
icon="el-icon-delete"
@click="deleteinput(index, indexs)"
></el-button>
<el-button type="primary" icon="el-icon-rank"></el-button>
</template>
</el-input>
</el-col>
</el-row>
</div>
</li>
</ul>
<el-button
type="primary"
v-if="checked"
icon="el-icon-search"
@click="addguild()"
>添加新规格</el-button
>
<el-button
type="primary"
v-if="checked"
icon="el-icon-search"
@click="processing()"
>生成产品规格表</el-button
>
<div class="table_box" v-if="checked">
<!-- <div class="mark">
操作顺序：添加新规格 (<span style="color: red">必填</span>) -&gt;
添加规格项 (<span style="color: red">必填</span>) -&gt; 生成产品规格表
-&gt; 修改数值 -&gt; 保存商品规格
<span style="color: red">注意：商品价格金额必须小于指导价格</span>
</div> -->
<!-- 我记得有个scope属性的 -->
<el-table
:data="tableData7"
:span-method="objectSpanMethod1"
border
style="width: 100%; margin-top: 20px"
>
<el-table-column
header-align="center"
align="center"
v-for="(item, index) in tablearr"
:key="index"
:prop="item"
:label="item"
></el-table-column>
<el-table-column prop="moany" label="市场价" align="center">
<template slot="header" slot-scope="scope">
<p class="table_p">市场价</p>
<el-input placeholder="" v-model="scPrice"
><el-button
slot="append"
@click="scPriceall"
icon="el-icon-bottom"
></el-button
></el-input>
</template>
<template slot-scope="scope" align="center">
<el-input placeholder="" v-model="scope.row.scPrice"></el-input>
</template>
</el-table-column>
<el-table-column prop="moany" label="指导价" align="center">
<template slot="header" slot-scope="scope">
<p class="table_p">指导价</p>
<el-input placeholder="" v-model="price"
><el-button
slot="append"
@click="priceall"
icon="el-icon-bottom"
></el-button
></el-input>
</template>
<template slot-scope="scope" align="center">
<el-input placeholder="" v-model="scope.row.price"></el-input>
</template>
</el-table-column>
<el-table-column prop="moany" label="结算价" align="center">
<template slot="header" slot-scope="scope">
<p class="table_p">结算价</p>
<el-input placeholder="" v-model="jsPrice"
><el-button
slot="append"
@click="jsPriceall"
icon="el-icon-bottom"
></el-button
></el-input>
</template>
<template slot-scope="scope" align="center">
<el-input placeholder="" v-model="scope.row.jsPrice"></el-input>
</template>
</el-table-column>
<el-table-column prop="kucun" label="库存" align="center">
<template slot="header" slot-scope="scope">
<p class="table_p">库存</p>
<el-input placeholder="" v-model="goodsNowStock"
><el-button
slot="append"
@click="goodsNowStockall"
icon="el-icon-bottom"
></el-button
></el-input>
</template>
<template slot-scope="scope" align="center">
<el-input
placeholder=""
v-model="scope.row.goodsNowStock"
></el-input>
</template>
</el-table-column>
<el-table-column prop="moany" label="重量（克）" align="center">
<template slot="header" slot-scope="scope">
<p class="table_p">重量（克）</p>
<el-input placeholder="" v-model="weight"
><el-button
slot="append"
@click="weightall"
icon="el-icon-bottom"
></el-button
></el-input>
</template>
<template slot-scope="scope" align="center">
<el-input placeholder="" v-model="scope.row.weight"></el-input>
</template>
</el-table-column>
</el-table>
<el-button style="margin-top: 20px;">重 置</el-button>
</div>
</div>
</div>
</template>
<script>
import descartes from "@/utils/dikaerjs.js";
// import { onlodaimg } from "@/api/date";
import { UploadImg } from '@/api/module/goods'
export default {
name: "goods",
props: {
guidedata: {
type: Object,
required: true
}
},
data() {
return {
arrtdall:[],
nopeimg: require("@/assets/image/nopic100.jpg"),
checked: false,
type: "",
imgname: "",
indeximg: "",
indexsimg: "",
shopType: [],
shopTypes: [],
newList: [],
newData: [],
tableData7: [], // 规格列表表格
goodsNowStock: "",
jsPrice: "", //协议价
price: "", //指导价
scPrice: "", //市场价
weight: "",
spanArr: [],
pos: "",
spanArr1: [],
pos1: "",
tablearr: [],
spanArrS: {
spanArr0: [],
spanArr1: [],
},
posS: {
pos0: "",
pos1: "",
},
};
},
components: {
hello: {
render: function (createElement) {
return createElement("h" + this.level, this.$se);
},
},
},
mounted() {
// this.driver = new Driver()
this.$dragging.$on("dragged", (value) => {
//因为我这在排序的时候不需要做处理，所以空着就行
});
},
watch:{
tableData7:{
handler(val, oldVal){
let arrlist = JSON.stringify(val);
let listarr = JSON.parse(arrlist);
this.processguidelist(listarr);
this.$emit('guideclicks',this.arrtdall,this.shopType)
// this.$emit('parameterclicks',val)
},
deep:true
},
// 父组件传给 子组件的 值
guidedata(curVal,oldVal){
if(curVal){
if(curVal.goodsSpec){
this.checked = true;
}else {
this.checked = false;
}
if(curVal.specName && curVal.specName.length > 0) {
this.shopType = curVal.specName;
this.shopType.forEach((item, index) => {
this.shopType[index]['specValue'] = []
if(curVal.specValue) {
curVal.specValue.forEach((itemName, nindex) => {
if(itemName.specNameId == item.id){
this.shopType[index]['specValue'].push(itemName)
}
})
}
})
this.clgoodspace(curVal);
//笛卡尔积值
this.tableData7 = curVal.specOption;
}
}
},
},
methods: {
guidInput(val){
this.$forceUpdate()
},
// 处理回显数据
clgoodspace(goodsspace){
this.shopTypes = JSON.parse(JSON.stringify(this.shopType));
let specName = goodsspace.specName;
let specValue = goodsspace.specValue;
let specOption = goodsspace.specOption;
if(specName) {
specName.forEach((item)=>{
this.tablearr.push(item.specName)
specValue.forEach((itemchild)=>{
if(item.id ==itemchild.specNameId){
itemchild['specName'] =item.specName
}
})
})
}
if(specOption) {
specOption.forEach(item=>{
let goodsarr = item.specValueIds.split('_')
goodsarr.forEach(itemchild=>{
specValue.forEach(itemgoodschild=>{
if(itemchild == itemgoodschild.id){
item[itemgoodschild.specName] = itemgoodschild.value
}
})
})
})
}
this.tableData7 = specOption;
this.getSpanArr(this.tableData7);
},
// 不能删
descartes,
processguidelist(obj) {
let arrtdall = []
if(obj) {
obj.forEach((item, index) => {
let objtd = {}
let arrtd = []
for(let key in item){
if(key=='goodsNowStock'||key=='jsPrice'||key=='price'||key=='scPrice'||key=='wlPrice'||key=='pywlPrice'||key=='weight'){
objtd[key] = item[key]
}else{
arrtd.push(item[key])
objtd['specValues'] = arrtd
}
}
arrtdall.push(objtd)
});
}
this.arrtdall = arrtdall
},
deletearrinput(index) {
this.shopType.splice(index, 1);
},
jsPriceall() {
this.tableData7.forEach((element, index) => {
this.tableData7[index].jsPrice = this.jsPrice;
});
},
priceall() {
this.tableData7.forEach((element, index) => {
this.tableData7[index].price = this.price;
});
},
scPriceall() {
this.tableData7.forEach((element, index) => {
this.tableData7[index].scPrice = this.scPrice;
});
},
// 一键 库存
goodsNowStockall() {
this.tableData7.forEach((element, index) => {
this.tableData7[index].goodsNowStock = this.goodsNowStock;
});
},
// 一键 重量
weightall() {
this.tableData7.forEach((element, index) => {
this.tableData7[index].weight = this.weight;
});
},
//删除规格项
deleteinput(index, indexs) {
this.shopType[index].specValue.splice(indexs, 1);
this.$forceUpdate()
},
//添加规格项
addlistguied(index) {
let childlist = {
value: "",
img: "",
};
this.$set(this.shopType[index].specValue,this.shopType[index].specValue.length,childlist);
this.$forceUpdate()
},
// 添加新规格
addguild() {
let arrchild = {
specName: "",
score: "",
specValue: [],
};
this.$set(this.shopType, this.shopType.length, arrchild);
},
guide() {
this.driver.defineSteps(steps);
this.driver.start();
},
imagesid(index, indexs) {
return index.toString() + indexs.toString() + "ss";
},
updateimg(index, indexs) {
let id = index.toString() + indexs.toString() + "ss";
this.imgname = id;
this.indeximg = index;
this.indexsimg = indexs;
document.getElementById(id).value = "";
document.getElementById(id).click();
},
inputimg() {
let file = document.getElementById(this.imgname).files[0];
// let formdata=new FormData()
if (file.size > 1024 * 1024 * 3) {
return false;
} else {
// formdata.append("file", file);
}
// var image = new Image();
// image.src = window.URL.createObjectURL(file);
// console.log(image);
// image.onload = () => {
// console.log(this.getBase64Img(image));
// //this.getBase64Img(image)即为转换为base64格式的图片形式
// let date={
// imgData:this.getBase64Img(image)
// }
// onlodaimg(date).then(res=>{
// })
// };
this.getBase64(file).then((res) => {
var result = res.split(",");
let Base64img = result[1];
let data = {"image": Base64img}
UploadImg(data).then((res) => {
if (res.data.code == 1) {
this.shopType[this.indeximg].specValue[this.indexsimg].img =
res.data.data.imageUrl
this.$forceUpdate()
}
});
});
},
getBase64(file) {
return new Promise(function(resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function() {
imgResult = reader.result;
};
reader.onerror = function(error) {
reject(error);
};
reader.onloadend = function() {
resolve(imgResult);
};
});
},
getBase64Img(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
var dataURL = canvas.toDataURL("image/" + ext);
return dataURL;
},
//返回所属规格名字
retName(index) {
// if (index == 1) {
// if (this.shopType.length > 1) {
// return this.shopType[0].name;
// }
// } else if (index == 2) {
// if (this.shopType.length > 1) {
// return this.shopType[1].name;
// }
// } else if (index == 3) {
// if (this.shopType.length > 1) {
// return this.shopType[2].name;
// }
// } else {
// return "";
// }
},
//处理数据
processing() {
this.newData = [];
this.tablearr = [];
this.shopTypes = JSON.parse(JSON.stringify(this.shopType));
if(this.shopTypes && this.shopTypes.length > 0) {
for (let i = 0; i < this.shopTypes.length; i++) {
var newlist = [];
for (
let index = 0;
index < this.shopTypes[i].specValue.length;
index++
) {
newlist.push(this.shopTypes[i].specValue[index].value);
}
this.newData.push(newlist);
}
}
this.getList();
},
//转换数据
getList() {
this.tableData7 = [];
this.newList = this.descartes(this.newData);
if(this.shopTypes && this.shopTypes.length > 0) {
for (let i = 0; i < this.shopTypes.length; i++) {
this.tablearr.push(this.shopTypes[i].specName);
}
}
for (let index = 0; index < this.newList.length; index++) {
var listobj = {};
for (let i = 0; i < this.shopTypes.length; i++) {
if(this.shopTypes.length>1){
listobj[this.shopTypes[i].specName] = this.newList[index][i];
}
if(this.shopTypes.length==1){
listobj[this.shopTypes[i].specName] = this.newList[index];
}
listobj["goodsNowStock"] = "";
listobj["jsPrice"] = "";
listobj["price"] = "";
listobj["scPrice"] = "";
listobj["weight"] = "";
}
this.tableData7.push(listobj);
}
this.getSpanArr(this.tableData7);
let arrlist = JSON.stringify(this.tableData7); //可以将json对象转换成json对符串
let listarr = JSON.parse(arrlist); //可以将json字符串转换成json对象
this.processguidelist(listarr);
},
//计算位置的方法
getSpanArr(data) {
this.spanArrS = {};
this.spanArr = [];
this.pos = "";
this.spanArr1 = [];
this.pos1 = "";
if(this.shopTypes && this.shopTypes.length > 0) {
for (let s = 0; s < this.shopTypes.length; s++) {
this.spanArrS["spanArr" + s] = [];
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArrS["spanArr" + s].push(1);
this.posS["pos" + s] = 0;
} else {
// 判断当前元素与上一个元素是否相同
if (
data[i][this.shopTypes[s].specName] ==
data[i - 1][this.shopTypes[s].specName]
) {
this.spanArrS["spanArr" + s][this.posS["pos" + s]] += 1;
this.spanArrS["spanArr" + s].push(0);
} else {
this.spanArrS["spanArr" + s].push(1);
this.posS["pos" + s] = i;
}
}
}
}
}
// for (var i = 0; i < data.length; i++) {
// if (i === 0) {
// this.spanArr1.push(1);
// this.pos1 = 0;
// } else {
// //如果笛卡尔积一直递增下去的话 这是一个很蠢的方法 由于我的要求层数是已知的 这里偷懒了 不然应该用for循环
// if (data[i].cailiao === data[i - 1].cailiao) {
// this.spanArr1[this.pos1] += 1;
// this.spanArr1.push(0);
// } else {
// this.spanArr1.push(1);
// this.pos1 = i;
// }
// }
// }
},
// 合并行数
objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
if(this.shopTypes && this.shopTypes.length > 0) {
for (let s = 0; s < this.shopTypes.length; s++) {
if (columnIndex == s) {
const _row = this.spanArrS["spanArr" + s][rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
// columnIndex === 1 找到第二列，合并他的列数
}
}
}
// columnIndex === 0 找到第一列，实现合并随机出现的行数
// if (columnIndex === 0) {
// const _row = this.spanArr[rowIndex];
// const _col = _row > 0 ? 1 : 0;
// return {
// rowspan: _row,
// colspan: _col
// };
// // columnIndex === 1 找到第二列，合并他的列数
// } else if (columnIndex === 1) {
// const _row = this.spanArr1[rowIndex];
// const _col = _row > 0 ? 1 : 0;
// return {
// rowspan: _row,
// colspan: _col
// };
// }
},
},
};
</script>
<style scoped>
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
.ullist {
border: 1px solid #e7eaec;
padding: 10px;
margin-bottom: 10px;
}
.el-input-group {
width: calc(100% - 60px);
}
.table_box .el-input-group {
width: 100%;
}
.addbtn {
background-color: #5bc0de !important;
color: #fff !important;
border-radius: 0 4px 4px 0;
}
.eldelbtn {
height: 30px;
padding: 5px 20px !important;
margin-left: -3px;
}
.childlist {
margin-top: 10px;
}
.childlist .el-input-group--append .el-input__inner {
padding: 0;
}
.el-button--medium {
padding: 10px 12px;
}
.dfbtn {
position: relative;
}
.table_p {
margin: 0;
text-align: center;
}
.mark {
background-color: #fcf8e3;
padding: 5px;
/* font-size: 12px; */
margin-top: 20px;
}
</style>
src/views/system/goods-wfl/add/index.vue 0 → 100644
浏览文件 @ 0f62f25a
<template>
<div class="app-container goods" v-loading="loading">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span style="font-size: 18px; float:left;margin-top: 4px;">{{title}}</span>
<el-button style="float: right; margin: 0 10px 0 20px;" size="mini" type="info" plain @click="submitForm(0)">保 存 草 稿
</el-button>
<el-button style="float: right;" size="mini" type="primary" @click="submitForm(1)">提 交 上 架
</el-button>
</div>
<el-tabs type="border-card">
<el-tab-pane label="商品信息">
<Goodsinfomation ref="childGoodsInf" :infomationdatas='infomationdata' @infomationclick='infomationclick'/>
</el-tab-pane>
<el-tab-pane label="商品图片">
<Goodsimg :imgdata='imgdate' @imgclicks='imgclick'/>
</el-tab-pane>
<el-tab-pane label="商品规格">
<Guide :guidedata='guidedate' @guideclicks='guideclick'/>
</el-tab-pane>
<el-tab-pane label="商品参数">
<Goodsparameter :parameterdata='parameterdata' @parameterclicks='parameterclick'/>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</template>
<script>
import {getGoods,GetFreight} from '@/api/module/goods'
import descartes from "@/utils/dikaerjs.js";
import Guide from './components/guide'
import Goodsinfomation from './components/goodsinfomation'
import Goodsimg from './components/goodsimg'
import Goodsparameter from './components/goodsparameter'
import {addGoods} from '@/api/module/goods'
export default {
name: 'goods',
data() {
return {
infomationdata: {},
parameterdata: {},
goodsOnsale: 0,
loading: false,
applyStatus: '',
title: "添加新商品",
imgdate: {},
guidedate: {},
parameterdate: {},
params: {
applyStatus: 0
},
expressTemplateIdList: [], //'原来绑定的运费模板已经被删除',
expressTemplateList: [],
}
},
components: {
Guide,
Goodsinfomation,
Goodsimg,
Goodsparameter
},
created() {
this.getFreight();//运费模板数据，回显匹配专用
this.getParams();
},
methods: {
// 运费模板
getFreight() {
GetFreight(this.queryParams).then(res => {
this.expressTemplateList = res.data;
this.expressTemplateIdList = this.expressTemplateList.filter(function(item) {
return item.Id;
})
});
},
getParams() {
let goodsId = this.$route.query.goodsId;
if (goodsId > 0) {
this.title = "编辑商品信息";
this.genGoodsInfo(goodsId);
}
},
// 获取商品详情
genGoodsInfo(goodsId) {
this.loading = true;
const goods_id = goodsId;
getGoods(goods_id).then(res => {
console.log(9999,res);
if(res.code === 1 && res.data) {
this.goodsOnsale = res.data.isOnsale;
// 对发货时效单独处理
if(res.data.Delayompensate == 0) {
res.data.Delayompensate = '';
}
//res.data.freightId 返回的值类型有 0（string/number）|| ‘全国包邮通用模板’（string）|| 310(number)
let resourceType = '1'; // 为了单元框正常显示，先给一个默认值，// 字符串 ‘0’,代表 数据为单独运费
let serviceagsTagsVal = [];
if(res.data.ServiceagsTags) {
serviceagsTagsVal = JSON.parse(res.data.ServiceagsTags);
}
// 库存，后台返回字段更换，提前处理 specOption
if( res.data.goodsSpecs.specOption && res.data.goodsSpecs.specOption.length > 0) {
res.data.goodsSpecs.specOption.forEach(function(item){
if(item.stock) {
item['goodsNowStock'] = item.stock;
}
});
}
this.infomationdata = {
goodsId: res.data.goodsId,
goodsName: res.data.goodsName,
categoryId: res.data.categoryId,
scPrice: res.data.scPrice / 100,
price: res.data.price / 100,
jsPrice: res.data.jsPrice / 100,
goodsNowStock: res.data.goodsNowStock,
producingArea: res.data.producingArea,
weight: res.data.weight,
unit: res.data.unit,
goodsBrand: res.data.goodsBrand,
wlPrice: res.data.wlPrice,
pywlPrice: res.data.pywlPrice,
resource: resourceType,
Delayompensate: res.data.Delayompensate,
aftersaleTime: res.data.aftersaleTime,
mark: res.data.mark,
serviceagsTags: serviceagsTagsVal,
description: res.data.description,
freightId: res.data.freightId,
outGoodsId: res.data.outGoodsId,
};
this.guidedate = res.data.goodsSpecs;
this.guidedate["goodsSpec"] = res.data.goodsSpec;
this.parameterdata = res.data.Params ? res.data.Params : {};
this.imgdate = {
"ruleFormdialogImageUrl": res.data.image,
"ruleFormdialogImageUrlplus": res.data.defaultImage
};
}else if(res.code === 0) {
if(res.msg) {
this.$message({type:'error',message: res.msg});
}else {
this.$message({type:'error',message: '数据出错啦'});
}
}
this.loading = false;
});
},
info() {
addgoods(this.listQuery).then(res => {
this.list = res.data.items
this.total = res.data.total
this.listLoading = false
})
},
//商品信息
infomationclick(type) {
Object.assign(this.params, type);
},
//商品图片
imgclick(type) {
let img = [];
type.ruleFormdialogImageUrl.forEach((res, index) => {
img.push(res.url)
})
this.params["imgs"] = img;
this.params["defaultImg"] = ''
if(type.ruleFormdialogImageUrlplus.length > 0) {
this.params["defaultImg"] = type.ruleFormdialogImageUrlplus[0].url;
}
},
//规格
guideclick(type, specsGroup) {
this.params["specs"] = type;
this.params["specsGroup"] = specsGroup;
// 浮点处理
if(this.params.specs && this.params.specs.length > 0) {
for(let i = 0; i < this.params.specs.length; i++) {
if(this.params.specs[i].jsPrice ) {
this.params.specs[i].jsPrice = parseInt(this.params.specs[i].jsPrice * 100);
}
if(this.params.specs[i].price ) {
this.params.specs[i].price = parseInt(this.params.specs[i].price * 100);
}
if(this.params.specs[i].scPrice ) {
this.params.specs[i].scPrice = parseInt(this.params.specs[i].scPrice * 100);
}
}
}
},
//参数
parameterclick(type) {
this.params["goodsPram"] = type;
},
/** 确定按钮 */
submitForm(status) {
this.params.applyStatus = 0;
this.params.isOnsale = this.goodsOnsale;
if(status === 1) {
this.params.applyStatus = 1;
}
if(this.params.resource == 0) {
this.params.freightId = 0;
}else if(this.params.resource == 1) {
this.params.wlPrice = 0;
this.params.pywlPrice = 0;
// 运费模板字段单独处理,兼容老数据
if(this.params.freightId === '全国包邮通用模板' || this.params.freightId == 0) {
this.params.freightId = 310;
}
}
console.log("gogogogog",this.params);
//return ;
// 商品信息 表单字段校验
let isGoodInfMsg = this.$refs['childGoodsInf'].validateGoodsInfForm();
// 商品图片 校验
let isGoodSImgMsg = 'defaultImg' in this.params;
if(!isGoodInfMsg) {
if(!('goodsName' in this.params)) {
this.$message({type: 'error',message: '[ 商品信息 ] 未填写完整！'});
return;
}
if('goodsName' in this.params) {
if(this.params.goodsName === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 商品名称未填写！'});
return;
}
if(this.params.categoryId === 0) {
this.$message({type: 'error',message: '[ 商品信息 ] 中 商品分类未填写！'});
return;
}
if(this.params.scPrice === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 市场原价未填写！'});
return;
}
if(this.params.price === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 指导售价未填写！'});
return;
}
if(this.params.jsPrice === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 结算价格未填写！'});
return;
}
if(this.params.goodsNowStock === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 商品库存未填写！'});
return;
}
if(this.params.unit === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 商品单位未填写！'});
return;
}
if(this.params.goodsBrand === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 商品名称未填写！'});
return;
}
}
}
if(!isGoodSImgMsg) {
this.$message({type: 'error',message: '[ 商品图片 ] 未上传图片！'});
return;
}else {
if('defaultImg' in this.params) {
if(this.params.defaultImg === '') {
this.$message({type: 'error',message: '[ 商品图片 ] 中 商品主图未上传！'});
return;
}
if(this.params.imgs.length === 0) {
this.$message({type: 'error',message: '[ 商品图片 ] 中 商品轮播图未上传！'});
return;
}
}
}
this.loading = true;
addGoods(this.params).then(res => {
if (res.code === 1) {
this.$message({
message: res.msg,
type: 'success'
});
this.$emit('closeDialog',false);
if (this.goodsOnsale) {
var redUrl = '/system/goods/onsale';
} else {
var redUrl = '/system/goods/offsale';
}
this.$router.push({
path: redUrl
});
} else if(res.code === 0) {
if(res.msg) {
this.$message.error(res.msg);
}else {
this.$message.error("操作失败！");
}
}
this.loading = false;
});
},
//------ 通用方法 -----
verifiesForm(type,fieldName,obj) {
// 先判断类型，字符串类型type === text, 下拉形式字段 select
if(type === 'text') {
// 没有这个属性，肯定没有填写，抛出提示
if(!(fieldName in obj)) {
return 1;
}
}
if(type === 'select') {
}
// 如果有这个属性，那么进一步判断，这个必填值是否填写
// if(fieldName in obj && !obj[fieldName]) {
// return 2
// }
}
}
}
</script>
<style scoped lang="scss" type="text/stylus">
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
.ullist {
border: 1px solid #e7eaec;
padding: 10px;
margin-bottom: 10px;
}
.el-input-group {
width: calc(100% - 60px);
}
.addbtn {
background-color: #5bc0de !important;
color: #fff !important;
border-radius: 0 4px 4px 0;
}
/deep/.el-card__body {
height: calc(100% - 50px);
overflow: hidden;
}
.el-tabs {
height: 100%;
overflow: hidden;
/deep/.el-tabs__content {
height: calc(100% - 50px);
overflow-y: scroll;
}
}
.eldelbtn {
height: 30px;
padding: 5px 20px !important;
margin-left: -3px;
}
.childlist {
margin-top: 10px;
}
.el-button--medium {
padding: 10px 12px;
}
.dfbtn {
position: relative;
}
.goods .el-tabs__content {
height: 100%;
overflow-y: scroll;
}
</style>
src/views/system/goods-wfl/offsale/index.vue 0 → 100644
浏览文件 @ 0f62f25a
<template>
<div class="app-container">
<el-card class="box-card">
<div slot="header" class="clearfix">
<el-form :inline="true" class="queryFormInline">
<el-row :span="24" type="flex" align="middle" justify="space-between">
<el-col :span="18">
<p style="font-size: 18px; float:left;">下架商品列表</p>
</el-col>
<el-col :span="6">
<el-form-item style="float: right">
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增
</el-button>
<el-button
type="success"
icon="el-icon-edit"
size="mini"
@click="handleOnsale"
>申请上架
</el-button>
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
>删除
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<!-- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="商品ID" prop="goods_id">
<el-input
v-model="queryParams.goods_id"
placeholder="请输入商品ID"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form> -->
<el-table v-loading="loading" :data="goodsList" :height="tableHeight" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="商品主图" align="center" width="100" prop="defaultImage">
<template slot-scope="scope">
<el-image
style="width: 60px; height: 50px"
:src="scope.row.defaultImage"
></el-image>
</template>
</el-table-column>
<el-table-column label="商品ID" align="center" prop="goodsId"/>
<el-table-column label="商品名称" align="center" prop="goodsName"/>
<el-table-column label="协议价" align="center" :formatter="formatePrice" prop="jsPrice"/>
<el-table-column label="物流运费" align="center" :formatter="formatePrice" prop="wlPrice"/>
<el-table-column label="市场售价" align="center" :formatter="formatePrice" prop="scPrice"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="handleUpdate(scope.row)"
>编辑
</el-button>
<el-divider direction="vertical"></el-divider>
<el-button
size="mini"
type="text"
@click="handleDelete(scope.row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改goods对话框 -->
<el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
<IndexBtn :option="form" @closeDialog="closeDialog"/>
</el-dialog>
</el-card>
</div>
</template>
<script>
import IndexBtn from '../add'
import {listGoods, getGoods, delGoods, addGoods, updateGoods, OffSaleList, Onsale} from '@/api/module/goods'
export default {
name: "goods",
data() {
return {
fullHeight: 0,
tableHeight: 0,
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// goods表格数据
goodsList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
isOnsale: 0
},
// 表单参数
form: {},
// 表单校验
rules: {
goods_name: [
{required: true, message: "商品名称不能为空", trigger: "blur"}
],
}
};
},
components: {
IndexBtn
},
created() {
this.getList();
this.$nextTick(() => {
this.fullHeight = document.getElementsByClassName('box-card')[0].clientHeight
})
},
watch: {
fullHeight(val) {
let formHeight = document.getElementsByClassName('clearfix')[0].clientHeight
this.tableHeight = val - formHeight - 100;
}
},
methods: {
//格式化价格
formatePrice(row, s, value, i) {
var nm = 0
var money = value
if (money > 0) {
nm = money / 100
}
return nm
},
/** 查询goods列表 */
getList() {
this.loading = true;
listGoods(this.queryParams).then(res => {
if(res.code === 1 && res.data) {
this.goodsList = res.data.list;
this.total = res.data.count;
}else if(res.code === 0) {
if(res.msg) {
this.$message({type: 'error',message: res.msg});
}else {
this.$message({type: 'error',message: '数据出错啦！'});
}
}
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.goodsId)
this.single = true
this.multiple = !selection.length
},
/** 上架操作 */
handleOnsale(row) {
const rowIds = row.goodsId || this.ids;
let params = {"ids": rowIds, "status": 1};
if(!rowIds || rowIds.length === 0) {
this.$message({message: '请先选择要上架的商品数据', type: 'warning'});
return;
}
Onsale(params).then(res => {
this.msgSuccess("成功申请" + res.length + "个商品");
});
},
/** 新增按钮操作 */
handleAdd() {
this.$router.push({
path: '/system/goods/add'
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const goods_id = row.goodsId
this.$router.push({
path: '/system/goods/add', query: {goodsId: goods_id}
});
// getGoods(goods_id).then(response => {
// this.form = response.data;
// this.open = true;
// this.title = "修改goods";
// });
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.goods_id != null) {
updateGoods(this.form).then(response => {
if (response.code === 0) {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
}
});
} else {
addGoods(this.form).then(response => {
if (response.code === 0) {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
}
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const goods_ids = row.goodsId || this.ids;
this.$confirm('是否确认删除商品ID为"' + goods_ids + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return delGoods(goods_ids);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
}).catch(function () {
});
},
// 子组件关闭父组件对话框
closeDialog(params) {
this.open = params;
}
} //methods结束
};
</script>
<style scoped>
.app-container {
height: 100%;
}
.box-card {
height: 100%;
}
.box-card /deep/ .el-card__body {
height: 100%;
overflow: hidden;
}
.el-table {
height: calc(100% - 120px);
}
/deep/ .el-dialog {
height: 90%;
overflow: hidden;
}
/deep/ .el-dialog__body {
height: 100%;
//height: calc(100% - 20px);
overflow-x: hidden;
overflow-y: scroll;
}
</style>
src/views/system/goods-wfl/onsale/index.vue 0 → 100644
浏览文件 @ 0f62f25a
<template>
<div class="app-container">
<el-card class="box-card">
<div slot="header" class="clearfix">
<el-form :model="queryParams" ref="queryForm" :inline="true" class="queryFormInline">
<el-row :span="24" type="flex" align="middle" justify="space-between">
<el-col :span="20">
<el-form-item label="商品Id" prop="goodsId">
<el-input
size="small"
placeholder="请输入商品Id"
v-model="queryParams.goodsId"
></el-input>
</el-form-item>
<el-form-item label="商品名称" prop="goodsName">
<el-input
size="small"
placeholder="请输入商品名称"
v-model="queryParams.goodsName"
></el-input>
</el-form-item>
<el-form-item>
<el-button
size="mini"
type="primary"
icon="el-icon-search"
@click="handleQuery"
>搜索</el-button>
<el-button
size="mini"
icon="el-icon-refresh"
@click="resetQuery('queryForm')"
>重置</el-button>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item style="float: right">
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增
</el-button>
<el-button
type="success"
icon=""
size="mini"
@click="handleOffGoods"
>商品下架
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<el-table v-loading="loading" :data="goodsList" :height="tableHeight" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="商品主图" align="center" width="100" prop="defaultImage">
<template slot-scope="scope">
<el-image
style="width: 60px; height: 50px"
:src="scope.row.defaultImage"
></el-image>
</template>
</el-table-column>
<el-table-column label="商品ID" align="center" prop="goodsId"/>
<el-table-column label="商品名称" align="center" prop="goodsName"/>
<el-table-column label="协议价" align="center" :formatter="formatePrice" prop="jsPrice"/>
<el-table-column label="物流运费" align="center" :formatter="formatePrice" prop="wlPrice"/>
<el-table-column label="市场售价" align="center" :formatter="formatePrice" prop="scPrice"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="handleOffGoods(scope.row)"
>下架
</el-button>
<el-divider direction="vertical"></el-divider>
<el-button
size="mini"
type="text"
@click="handleUpdate(scope.row)"
>编辑
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改goods对话框 -->
<el-dialog :title="title" :visible.sync="open" :modal-append-to-body="false" width="90%"
style="height:90%;overflow:hidden;" append-to-body>
<IndexBtn :option="form"/>
</el-dialog>
</el-card>
</div>
</template>
<script>
import IndexBtn from '../add'
import {listGoods, getGoods, delGoods, addGoods, updateGoods, Onsale} from '@/api/module/goods'
export default {
name: "goods",
data() {
return {
fullHeight: 0,
tableHeight: 0,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// goods表格数据
goodsList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
isOnsale: 1,
goodsId: '',
goodsName: ''
},
// 表单参数
form: {},
// 表单校验
rules: {
goods_name: [
{required: true, message: "商品名称不能为空", trigger: "blur"}
],
}
};
},
components: {
IndexBtn
},
created() {
this.getList();
this.$nextTick(() => {
this.fullHeight = document.getElementsByClassName('box-card')[0].clientHeight
})
},
watch: {
fullHeight(val) {
let formHeight = document.getElementsByClassName('clearfix')[0].clientHeight
this.tableHeight = val - formHeight - 100;
}
},
methods: {
/*商品下架*/
handleOffGoods(row) {
const rowIds = row.goodsId || this.ids;
let params = {"ids": rowIds, "status": 0};
if (!rowIds || rowIds.length === 0) {
this.$message({message: '请先选择要下架的商品数据', type: 'warning'});
return;
}
this.$confirm('是否确认下架商品ID为"' + rowIds + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return Onsale(params);
}).then(() => {
this.getList();
this.msgSuccess("下架成功");
}).catch(() => {
});
},
//格式化价格
formatePrice(row, s, value, i) {
var nm = 0
var money = value
if (money > 0) {
nm = money / 100
}
return nm
},
/** 查询goods列表 */
getList() {
this.loading = true;
listGoods(this.queryParams).then(res => {
if(res.code === 1 && res.data) {
this.goodsList = res.data.list;
this.total = res.data.count;
}else if(res.code === 0) {
if(res.msg) {
this.$message({type: 'error',message: res.msg});
}else {
this.$message({type: 'error',message: '数据出错啦！'});
}
}
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.goodsId)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 下架操作 */
handleOnsale() {
Onsale({"ids": this.ids, "status": 0}).then(response => {
this.msgSuccess("成功申请" + response.data.length + "个商品");
});
},
/** 新增按钮操作 */
handleAdd() {
this.$router.push({
path: '/system/goods/add'
});
},
/** 详情按钮操作 */
handleUpdate(row) {
const goods_id = row.goodsId
this.$router.push({
path: '/system/goods/add', query: {goodsId: goods_id}
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.goodsId != null) {
updateGoods(this.form).then(response => {
if (response.code === 0) {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
}
});
} else {
addGoods(this.form).then(response => {
if (response.code === 0) {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
}
});
}
}
});
},
// 重置
resetQuery(form) {
this.resetForm("queryForm");
this.handleQuery();
},
} //methods结束
};
</script>
<style scoped>
.app-container {
height: 100%;
}
/deep/ .el-dialog {
height: 100%;
}
/deep/ .el-dialog__body {
height: 80%;
overflow-y: scroll;
}
.box-card {
height: 100%;
}
.box-card /deep/ .el-card__body {
height: 100%;
overflow: hidden;
}
.el-table {
height: calc(100% - 120px);
}
</style>
src/views/system/goods/add/components/goodsaftersale.vue 0 → 100644
浏览文件 @ 0f62f25a
<template>
<div class="goods-after-sale">
<el-form ref="goodsAfterSaleForm" :model="goodsAfterSaleForm" :rules="goodsAfterSaleRules" label-width="150px" size="small">
<el-form-item label="服务标签：" prop="fwbq">
<el-checkbox-group v-model="goodsAfterSaleForm.fwbq">
<el-checkbox v-for="item in tagOptions" :label="item.id" true-label :key="item.id">{{item.tag}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="邮费模板：" prop="freightId">
<el-select v-model="goodsAfterSaleForm.freightId" placeholder="请选择邮费模板" style="width:400px;">
<el-option v-for="item in freightOptions" :key="item.Id" :label="item.Name" :value="item.Id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="发货时效：" prop="Delayompensate">
<el-select v-model="goodsAfterSaleForm.Delayompensate" style="width:400px;" placeholder="请选择发货时效">
<el-option label="24小时" :value="24"></el-option>
<el-option label="48小时" :value="48"></el-option>
<el-option label="72小时" :value="72"></el-option>
</el-select>
</el-form-item>
<el-form-item label="售后时长：" prop="aftersaleTime">
<el-select v-model="goodsAfterSaleForm.aftersaleTime" style="width:400px;" placeholder="请选择售后时长">
<el-option label="7天" :value="7"></el-option>
<el-option label="15天" :value="15"></el-option>
<el-option label="30天" :value="30"></el-option>
</el-select>
</el-form-item>
<!-- <div style="width: 100%;height: 1000px;">我很高</div>-->
</el-form>
</div>
</template>
<script>
import { GetFreight } from '@/api/module/goods'
export default {
name: "goodsaftersale",
props: {
goodsaftersale: {
type: Object,
required: true
}
},
data() {
let checkFwbq = (rule, value, callback) => {
if (this.goodsAfterSaleForm.fwbq.length === 0) {
callback(new Error("请选择服务类型"));
} else {
callback();
}
};
return {
goodsAfterSaleForm: {
fwbq: [],
freightId: 310,
Delayompensate: 24,
aftersaleTime: 7
},
goodsAfterSaleRules: {
fwbq: [{required: true, validator: checkFwbq}],
freightId: [{required: true, message: '请选择邮费模板', trigger: 'change'}],
Delayompensate: [{required: true, message: '请选择发货时效', trigger: 'change'}],
aftersaleTime: [{required: true, message: '请选择售后时长', trigger: 'change'}]
},
tagOptions: [
{id: 2, tag: "假一赔十"},
{id: 4, tag: "不可退还"},
{id: 5, tag: "厂家直供"}
],
freightOptions: []
} // return end
},
mounted() {
this.getFreightData();
},
methods: {
// 运费模板
getFreightData() {
GetFreight().then(res => {
if(res.data) {
this.freightOptions = res.data
}else {
this.freightOptions = ''
}
});
},
// 商品信息 子组件 form表单校验, 在父组件中被调用
validateGoodsAfterSaleForm () {
let flag = null
this.$refs['goodsAfterSaleForm'].validate(valid => {
if (valid) {
flag = true
} else {
flag = false
}
})
return flag
},
} // methods end
}
</script>
<style lang="scss" type="text/stylus" scoped>
.goods-after-sale {
padding: 15px 0px;
margin-top: 18px;
}
</style>
src/views/system/goods/add/components/goodsinfomation.vue
浏览文件 @ 0f62f25a
<template> <template>
<div class="app-container"> <div class="goods-info">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form :model="goodsInfoForm" :rules="goodsInfoRules" ref="goodsInfoForm" label-width="150px" class="demo-goodsInfoForm" size="small">
<el-row> <el-form-item label="商品分类：" prop="categoryStr">
<el-col :span="12"> <el-input style="width:400px;" v-model="goodsInfoForm.categoryStr" :disabled="true"></el-input>
<!-- <span class="type-text-span">{{ goodsInfoForm.categoryStr }}</span>-->
<el-form-item label="商品名称" prop="goodsName"> <el-link class="edit-type-span el-icon-edit" type="primary" :underline="false" @click="editType">修改所在类目</el-link>
<el-input v-model="ruleForm.goodsName" style="width:400px;"></el-input> <span class="tip-span">该商品所在类目须支持七天无理由退货</span>
<el-popover </el-form-item>
placement="top-start" width="300" trigger="hover" content="最多允许输入30个汉字（60字符），建议标题内包含与商品相关的关键词">
<i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
</el-popover>
</el-form-item>
<el-form-item label="商品分类" prop="categoryId">
<el-cascader v-model="ruleForm.categoryId" :props='propsaddress' :options="options1" @change="handleChange"
style="width:400px;"></el-cascader>
</el-form-item>
<el-form-item label="市场原价" prop="scPrice">
<el-input v-model="ruleForm.scPrice" style="width:400px;"></el-input>
元
<el-popover
placement="top-start" width="300" trigger="hover" content="市场原价起到参考的作用">
<i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
</el-popover>
</el-form-item>
<el-form-item label="指导售价" prop="price">
<el-input v-model="ruleForm.price" style="width:400px;"></el-input>
元
<el-popover
placement="top-start" width="300" trigger="hover" content="您建议下游商家售卖的价格">
<i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
</el-popover>
</el-form-item>
<el-form-item label="结算价格" prop="jsPrice">
<el-input v-model="ruleForm.jsPrice" style="width:400px;"></el-input>
元
<el-popover
placement="top-start" width="300" trigger="hover" content="您与云仓平台最终结算的价格">
<i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
</el-popover>
</el-form-item>
<el-form-item label="运费模板" prop="freightId">
<el-radio-group v-model="ruleForm.resource" @change="freightIdTypeChange">
<el-radio label='1'>运费模板</el-radio>
<el-radio label='0'>单独运费</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="统一运费" v-if="ruleForm.resource==0" prop="wlPrice">
<el-input v-model="ruleForm.wlPrice" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="运费模板" v-if="ruleForm.resource==1">
<el-select v-model="ruleForm.freightId" placeholder="请选择运费模板" style="width:400px;" @change="selectTm">
<el-option v-for="item in freightList" :key="item.Id" :label="item.Name" :value="item.Id"
style="text-align:center;"></el-option>
</el-select>
</el-form-item>
<el-form-item label="发货时效" prop="Delayompensate">
<el-select v-model="ruleForm.Delayompensate" style="width:400px;" placeholder="请选择发货时效">
<el-option label="24小时" value="24" ></el-option>
<el-option label="48小时" value="48" ></el-option>
<el-option label="72小时" value="72" ></el-option>
</el-select>
</el-form-item>
<el-form-item label="售后时长" prop="aftersaleTime">
<el-select v-model="ruleForm.aftersaleTime" style="width:400px;" placeholder="请选择售后时长">
<el-option label="7天" value="7" style="text-align:center;"></el-option>
<el-option label="15天" value="15" style="text-align:center;"></el-option>
<el-option label="30天" value="30" style="text-align:center;"></el-option>
</el-select>
</el-form-item>
</el-col>
<!-- right -->
<el-col :span="12">
<el-form-item label="商品库存" prop="goodsNowStock">
<el-input v-model.number="ruleForm.goodsNowStock" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="商品产地" prop="producingArea"> <el-form-item label='商品标题：' prop="goodsName">
<el-input v-model="ruleForm.producingArea " style="width:400px;"></el-input> <el-input v-model="goodsInfoForm.goodsName" placeholder="请输入商品标题" style="width:400px;"></el-input>
</el-form-item> <span class="tip-span ml20">商品名称限制在30字以内，不要填写与商品无关的词</span>
</el-form-item>
<el-form-item label="商品重量" prop="weight"> <el-form-item label="商品产地：" prop="producingArea">
<el-input v-model="ruleForm.weight" style="width:400px;"></el-input> <el-select v-model="goodsInfoForm.producingArea" placeholder="请选择商品产地" style="width: 400px;">
克（g） <el-option
</el-form-item> v-for="item in areaOptions"
<el-form-item label="商品单位" prop="unit"> :key="item.id"
<el-input v-model="ruleForm.unit" style="width:400px;"></el-input> :label="item.name"
</el-form-item> :value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="商品品牌" prop="goodsBrand"> <el-form-item label="商品发货地：" prop="fhd">
<el-select v-model="ruleForm.goodsBrand" style="width:400px;" filterable @change="goodsBrandChange" placeholder="请选择品牌"> <el-select v-model="goodsInfoForm.fhd" placeholder="请选择商品发货地" style="width: 400px;">
<el-option <el-option
v-for="item in brandOtions" v-for="item in areaOptions"
:key="item.id" :key="item.id"
:label="item.brand_cn" :label="item.name"
:value="item.id"> :value="item.id"
</el-option> ></el-option>
</el-select> </el-select>
<el-link type="primary" @click="toBrand" :underline="false">添加品牌</el-link> </el-form-item>
</el-form-item>
<el-form-item label="三方编号" prop="outGoodsId"> <el-form-item label="所属品牌：" prop="goodsBrand">
<el-input v-model="ruleForm.outGoodsId" style="width:400px;"></el-input> <el-select v-model="goodsInfoForm.goodsBrand" placeholder="请选择商品品牌" style="width: 400px;">
</el-form-item> <el-option
v-for="item in brandOptions"
:key="item.id"
:label="item.brand_cn"
:value="item.id"
></el-option>
</el-select>
<el-link class="edit-type-span el-icon-plus" type="primary" :underline="false" @click="toBrand">新增品牌</el-link>
</el-form-item>
<el-form-item label="附加运费" prop="pywlPrice" v-if="ruleForm.resource==0"> <el-form-item label='市场参考价链接：'>
<el-input v-model="ruleForm.pywlPrice" style="width:400px;" placeholder="偏远地区六省"></el-input> <el-input v-model="goodsInfoForm.lj" placeholder="请输入京东或者淘宝的商品链接" style="width:400px;"></el-input>
元
</el-form-item>
</el-col>
</el-row>
<el-form-item label="商品备注" prop="mark">
<el-input type="textarea" v-model="ruleForm.mark"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="服务标签" prop="serviceagsTags">
<el-checkbox-group v-model="serviceagsTags"> <el-form-item label='商品编码：'>
<el-checkbox v-for="item in tags" :label="item.id" true-label :key="item.id" :disabled="item.isdc" @change="serviceSingleChange(item.id)">{{item.tag}}</el-checkbox> <el-input v-model="goodsInfoForm.spbm" placeholder="请输入商品编码（非必须）" style="width:400px;"></el-input>
</el-checkbox-group>
</el-form-item> </el-form-item>
<el-form-item label="详情描述" style="height:550px;" prop="description" v-loading="quillUpdateImg">
<el-form-item label="商品图片：" prop="sptp">
<span class="tip-span" style="display: block;line-height: 34px;">商品图片最多上传9张，默认第一张为主图 <span>单张图片需限制在2M以内，可上传png、jpg格式，尺寸要求为正方形</span></span>
<el-upload <el-upload
class="avatar-uploader2" class="upload-img"
list-type="picture-card"
action="#" action="#"
auto-upload :limit="1"
:http-request="uploadSectionFile" :on-exceed="limitImg9"
name="file" :http-request="uploadGoodsImg"
multiple :on-preview="handlePictureCardPreview"
:show-file-list="false" :on-remove="handleRemove"
:file-list="ruleFormdialogImageUrl" :file-list="goodsImgFileList"
:before-upload="beforeUploadEdit"> ><i class="el-icon-plus" />
</el-upload> </el-upload>
<input class="uploadImg" style="display: none;" type="file" ref="file" accept="image/*" @change="fileChange($event)" name="file" multiple id="file"> <el-dialog :visible.sync="goodsImgVisible">
<quill-editor ref="myTextEditor" v-model="content" :options="editorOption" @change="onEditorChange" style="height:500px;margin-top:-30px;"></quill-editor> <img width="100%" :src="goodsImgUrlDialog" alt="">
</el-form-item> </el-dialog>
<el-form-item style="margin-bottom: 0;">
<el-button @click="resetGoodsInfForm('ruleForm')">重 置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 修改 商品分类目录 -->
<el-dialog
v-loading="loadingSSQ"
class="add-workorder-dialog"
title="修改商品分类"
:visible.sync="editGoodsTypeDialog"
:destroy-on-close="true"
:before-close="cancelType"
width="60%"
center
>
<!-- <p>当前所选类目：<span></span></p>-->
<el-cascader-panel v-show="editGoodsTypeDialog" v-model="SSQGoodsList" :props='goodsprops' @change="SSQGoodsChange" ref="ssqGoodsCascader"></el-cascader-panel>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelType" size="mini">取 消</el-button>
<el-button type="primary" @click="saveType" size="mini">确 定</el-button>
</span>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
// 工具栏配置 import { GetCategory, GetFreight, UploadImg } from '@/api/module/goods'
const toolbarOptions = [ import { getAreaList } from '@/api/module/retreat/address';
['bold', 'italic', 'underline', 'strike'], // toggled buttons import { getBrandsInf } from '@/api/module/brand/brand'
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}], // custom button values
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}], // superscript/subscript
[{'indent': '-1'}, {'indent': '+1'}], // outdent/indent
[{'direction': 'rtl'}], // text direction
// [{'size': ['small', false, 'large', 'huge']}], // custom dropdown
// [{'header': [1, 2, 3, 4, 5, 6, false]}],
// [{'color': []}, {'background': []}], // dropdown with defaults from theme
// [{'font': []}],
// [{'align': []}],
['image', 'video'],
['clean'] // remove formatting button
]
import {
GetCategory,
GetFreight,
UploadImg
} from '@/api/module/goods'
import {getBrandsInf} from '@/api/module/brand/brand'
export default { export default {
name: 'goods', name: 'goods',
props: { props: {
infomationdatas: { goodsinfodata: {
type: Object, type: Object,
required: true required: true
} }
}, },
data() { data() {
let categoryIdCheck = (rule, value, callback) => { let categoryIdCheck = (rule, value, callback) => {
if (this.ruleForm.categoryId == 0 || !this.ruleForm.categoryId) { if (this.goodsImgFileList.length < 1) {
callback(new Error("请选择商品分类")); callback(new Error("请上传商品图片"));
} else { } else {
callback(); callback();
} }
}; };
return { return {
tags: [ //loading: false,
{id: 2, tag: "假一赔十", isdc: false}, // categoryStr: '',
{id: 3, tag: "7天退换", isdc: false}, goodsInfoDataClone: {},
{id: 4, tag: "不可退还", isdc: false}, areaOptions: [], // 地址 省
{id: 5, tag: "厂家直供", isdc: false}, brandOptions: [], // 商品品牌
{id: 6, tag: "售后无忧", isdc: false} goodsInfoForm: {
], categoryStr: '', // 商品分类 地址拼接
propsaddress: { categoryList: [],
label: 'label',
value: 'id',
},
content: '',
// editorOption: {
// placeholder: '编辑内容'
// },
brandOtions: [],
serviceagsTags: [],
ruleForm: {
outGoodsId: '',
value: [],
goodsId: 0,
goodsName: '', goodsName: '',
scPrice: '', producingArea: [], // 产地
price: "", //市场价 单位分 fhd: [], // 发货地
goodsNowStock: "", goodsBrand: [], // 品牌
producingArea: '', sptp: '' // 商品图片
weight: '',
unit: '', //单位
goodsBrand: '', //品牌
resource: '1',
categoryId: 0,
freightId: 310, //运费模板ID
wlPrice: '',
pywlPrice: '',
jsPrice: '', //协议价
Delayompensate: "",
aftersaleTime: '7',
mark: '',
serviceagsTags: [],
description: ''
}, },
rules: { goodsInfoRules: {
categoryStr: [{required: true, message: '商品分类不能为空', trigger: 'blur'},],
goodsName: [ goodsName: [
{required: true, message: '请输入商品名称', trigger: 'blur'}, {required: true, message: '请输入商品名称', trigger: 'blur'},
{min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'} {min: 3, max: 30, message: '商品标题限制在30字以内', trigger: 'blur'}
], ],
categoryId: [{required: true, message: '请选择商品分类', validator: categoryIdCheck}], producingArea:[{required: true, message: '请选择商品产地', trigger: 'change'}],
price: [{required: true, message: '请填写指导售价', trigger: 'blur'}], fhd: [{required: true, message: '请选择商品发货地', trigger: 'change'}],
jsPrice: [{required: true, message: '请填写结算售价', trigger: 'blur'}], goodsBrand: [{required: true, message: '请选择商品品牌', trigger: 'change'}],
scPrice: [{required: true, message: '请填写市场原价', trigger: 'blur'}], sptp: [{required: true, message: '请上传商品图片', validator: categoryIdCheck}]
goodsNowStock: [
{required: true, message: '商品库存不能为空', trigger: 'blur'},
{type: 'number', message: '商品库存要填写数字'},
],
unit: [{required: true, message: '商品单位不能为空', trigger: 'blur'}],
goodsBrand: [{required: true, message: '商品品牌不能为空', trigger: 'change'}]
}, },
// 运费模板列表 goodsImgFileList: [], // 商品图片地址 集合list
freightList: [], goodsImgVisible: false, // 图片能否预览
options1: [], goodsImgUrlDialog: '',
/*8888888888888*/
index:0, /* 修改 商品分类 */
indexall:0, loadingSSQ: false,
editorOption: { editGoodsTypeDialog: false,
placeholder: '', SSQGoodsList: [], // 省市区 子组件goods的
theme: 'snow', // or 'bubble' goodsprops: {
modules: { expandTrigger: 'click',
toolbar: { lazy: true,
container: toolbarOptions, // 工具栏 lazyLoad: this.lazyLoad,
handlers: { value: "id",
'image': function (value) { label: 'name',
if (value) { leaf: 'leaf'
// 触发input框选择图片文件
document.querySelector('#file').click()
} else {
this.quill.format('image', false);
}
}
}
}
}
}, },
quillUpdateImg:false,
ruleFormdialogImageUrl:[] } // return end
}
}, },
components: {}, components: {},
watch: { watch: {
serviceagsTags: { // serviceagsTags: {
handler(val, oldVal) { // handler(val, oldVal) {
this.$set(this.ruleForm, 'serviceagsTags', val) // this.$set(this.goodsInfoForm, 'serviceagsTags', val)
}, // },
deep: true // deep: true
}, // },
content: {
handler(val, oldVal) {
this.$set(this.ruleForm, 'description', val)
},
deep: true
},
ruleForm: {
handler(val, oldVal) {
val.description = this.content;
val.serviceagsTags = this.serviceagsTags;
this.$emit('infomationclick', val);
},
deep: true
},
infomationdatas(curVal, oldVal) {
console.log("商品信息子组件：",curVal);
if (curVal) {
this.ruleForm = curVal;
if(curVal.freightId == 0) {
this.ruleForm.resource = '0';
}else {
this.ruleForm.resource = '1';
}
this.content = this.ruleForm.description;
// 初始化
this.serviceagsTags = [];
if(this.ruleForm.serviceagsTags) {
this.ruleForm.serviceagsTags.forEach((val) => {
if (val) {
let nid = parseInt(val);
this.serviceagsTags.push(nid);
}
})
}
}
}
}, },
created() { created() {
// 深拷贝一份最开始的数据，为初始化准备
this.goodsInfoDataClone = this.deepClone(this.goodsinfodata);
this.goodsInfoForm = this.goodsinfodata
// console.log("父组件传过来的",this.goodsinfodata)
// console.log("1111",this.goodsInfoForm)
// 获取 省
this.getArea();
// 获取 商品品牌
this.getBrands();
}, },
mounted() { mounted() {
this.getCategory(); // this.getCategory();
this.getFreight(); // this.getFreight();
this.getBrands(); // this.getBrands();
}, },
methods: { methods: {
fileChange(e){ // 获取 省
const list = this.$refs.file.files; getArea() {
console.log(list) let limboNode = {
this.indexall = list.length pid: 0
this.uplonds() };
}, getAreaList(limboNode).then( res=> {
uplonds(){ if(res.data) {
this.getBase64(this.$refs.file.files[this.index]).then((res) => { this.areaOptions = res.data;
let result = res.split(","); }else {
this.Base64img = result[1]; this.areaOptions = [];
let data = {"image": this.Base64img} }
this.quillUpdateImg = true;
UploadImg(data).then(res => {
if (res && res.data.code == 1) {
this.index++
this.ruleFormdialogImageUrl.push({'url': res.data.data.imageUrl});
this.$message({ message:'上传成功',type:'success'});
// 获取富文本组件实例
let quill = this.$refs.myTextEditor.quill;
let length = quill.getSelection().index;
// 插入图片 res.data.url为服务器返回的图片地址
quill.insertEmbed(length, 'image', res.data.data.imageUrl)
// 调整光标到最后
quill.setSelection(length + 1)
if(this.index<this.indexall){
this.uplonds()
}else{
this.index = 0
this.quillUpdateImg = false;
}
}else {
this.$message({ message:'上传失败，请重新上传',type:'error'});
this.quillUpdateImg = false;
}
})
}); });
}, },
/*************************/ // 获取 商品品牌
// 上传图片前 getBrands() {
beforeUploadEdit(res, file) { getBrandsInf().then( res => {
// 显示loading动画 if(res.data) {
this.quillUpdateImg = true this.brandOptions = res.data.data;
}, }else {
// 上传图片成功 this.brandOptions = [];
uploadSectionFile(param, file, fileList) { }
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"image": this.Base64img}
this.quillUpdateImg = true;
UploadImg(data).then(res => {
if (res && res.data.code == 1) {
this.ruleFormdialogImageUrl.push({'url': res.data.data.imageUrl});
this.$message({ message:'上传成功',type:'success'});
// 获取富文本组件实例
let quill = this.$refs.myTextEditor.quill;
let length = quill.getSelection().index;
// 插入图片 res.data.url为服务器返回的图片地址
quill.insertEmbed(length, 'image', res.data.data.imageUrl)
// 调整光标到最后
quill.setSelection(length + 1)
}else {
this.$message({ message:'上传失败，请重新上传',type:'error'});
}
this.quillUpdateImg = false;
})
}); });
/*-----*/
}, },
// 图片转换为 base64 /* 修改 商品分类 类目 */
getBase64(file) { editType() {
return new Promise(function (resolve, reject) { this.SSQGoodsList = [];
let reader = new FileReader(); this.editGoodsTypeDialog = true;
let imgResult = ""; this.SSQGoodsList = this.goodsInfoForm.categoryList
reader.readAsDataURL(file); console.log(222,this.SSQGoodsList);
reader.onload = function () {
imgResult = reader.result;
};
reader.onerror = function (error) {
reject(error);
};
reader.onloadend = function () {
resolve(imgResult);
};
});
}, },
/*************************/ lazyLoad(node, resolve) {
// 服务标签 中，7天退换和不可退换只能2选一 this.getSSQArea(node, resolve);
serviceSingleChange(id) { },
let index4 = this.serviceagsTags.indexOf(4); getSSQArea(node, resolve) {
let index3 = this.serviceagsTags.indexOf(3); const level = node.level;
if(id == 3) { let limboNode = {};
if( index4 > -1) { if(level === 0) {
this.serviceagsTags.splice(index4,1) //debugger
} limboNode = {pid: 0}
} }
if(id == 4) { if(level === 1) {
if( index3 > -1) { //debugger
this.serviceagsTags.splice(index3,1) limboNode = { pid: node.value };
}
} }
}, if(level === 2) {
// 运费模板类型，change事件 limboNode = { pid: node.value };
freightIdTypeChange(val) {
// 0 单独运费 1 是运费模板
if(val === '1') {
if(this.ruleForm.freightId == 0) {
this.ruleForm.freightId = "全国包邮通用模板";
}
} }
}, //this.loadingSSQ = true;
// 获取品牌信息 getAreaList(limboNode).then(res => {
getBrands() { let result = {};
getBrandsInf().then(res => { if (level === 0) {
if (res.data.data) { result = res.data
this.brandOtions = res.data.data; result.forEach(item => {
item.value = item.id;
item.label = item.name;
item.children=[];
item.leaf = 0; // 可以控制 是否有下级 值为true都不行，必须等于0
})
} }
}); if (level === 1) {
}, result = res.data
// 获取 商品分类 信息 result.forEach(item => {
getCategory() { item.value = item.id;
GetCategory({}).then(response => { item.label = item.name
this.options1 = response.data.data; item.children=[];
}); //这句代码表示当点击最后一级的时候 label后面不会转圈圈 并把相关值赋值到选择器上
}, item.leaf = 0
// 运费模板 })
getFreight() { }
GetFreight(this.queryParams).then(response => { if (level === 2) {
this.freightList = response.data result = res.data
}); result.forEach(item => {
}, item.value = item.id;
handleChange(value) { item.label = item.name
this.ruleForm.categoryId = value[value.length - 1] item.leaf = 1;
}, })
setTreeData(arr) {
// 删除所有 children,以防止多次调用
arr.forEach(function (item) {
delete item.children;
});
let map = {}; // 构建map
arr.forEach(i => {
map[i.third_id] = i; // 构建以third_id为键 当前数据为值
});
let treeData = [];
arr.forEach(child => {
const mapItem = map[child.parent_id]; // 判断当前数据的parent_id是否存在map中
if (mapItem) { // 存在则表示当前数据不是最顶层数据
// 注意: 这里的map中的数据是引用了arr的它的指向还是arr，当mapItem改变时arr也会改变,踩坑点
(mapItem.children || (mapItem.children = [])).push(child); // 这里判断mapItem中是否存在children, 存在则插入当前数据, 不存在则赋值children为[]然后再插入当前数据
} else { // 不存在则是组顶层数据
treeData.push(child);
} }
resolve(result)
//this.loadingSSQ = false;
}); });
return treeData;
}, },
onEditorChange({editor, html, text}) { SSQGoodsChange(value) {
this.content = html; //this.SSQGoodsList = value;
//console.log(315,this.content);
}, },
// 商品品牌 向后台传入 name // 确认 修改 商品分类
goodsBrandChange(indexId) { saveType() {
let obj = {};
obj = this.brandOtions.find((item)=>{//这里的userList就是上面遍历的数据源
return item.id === indexId;//筛选出匹配数据
});
this.ruleForm.goodsBrand = obj.brand_cn;
}, },
// 维护品牌 // 取消 修改 商品分类
toBrand() { cancelType() {
this.$router.push({path: '/system/shop/brand'}); this.editGoodsTypeDialog = false;
}, },
resetGoodsInfForm(formName) {
this.$refs[formName].resetFields(); // 上传 商品图片，限制 9 张
// 详情描述，重置 limitImg9() {
this.content = ''; this.$message({ message: '最多上传9张图片', type: 'warning' })
// 服务标签
this.serviceagsTags = [];
//console.log("重置后的数据：",this.ruleForm);
}, },
// 商品信息 子组件 form表单校验 // 上传 商品图片
validateGoodsInfForm () { uploadGoodsImg(param) {
this.getBase64(param.file).then( res => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"image":this.Base64img};
//console.log(213,data);
UploadImg(data).then( res=> {
console.log(217,res);
let urlObj = {'url': ''};
if(res.data) {
urlObj.url = res.data.data.imageUrl;
this.goodsImgFileList.push(urlObj);
this.$message({type:'success',message:'图片上传成功'});
// 只清除一次，不浪费哦
if(this.goodsImgFileList.length === 1) {
this.$refs.goodsInfoForm.clearValidate('sptp');
}
}
});
});
},
// 商品信息 子组件 form表单校验, 在父组件中被调用
validateGoodsInfoForm () {
let flag = null let flag = null
this.$refs['ruleForm'].validate(valid => { this.$refs['goodsInfoForm'].validate(valid => {
if (valid) { if (valid) {
flag = true flag = true
} else { } else {
...@@ -525,23 +323,78 @@ ...@@ -525,23 +323,78 @@
}) })
return flag return flag
}, },
// 商品图片 预览
handlePictureCardPreview(file) {
this.goodsImgUrlDialog = file.url;
this.goodsImgVisible = true;
},
// 删除 商品图片
handleRemove(file) {
for (let i = 0; i < this.goodsImgFileList.length; i++) {
if (file.uid === this.goodsImgFileList[i].uid) {
this.goodsImgFileList.splice(i, 1)
}
}
if(this.goodsImgFileList.length === 0) {
this.$refs.goodsInfoForm.validateField('sptp')
}else {
this.$refs.goodsInfoForm.clearValidate('sptp');
}
},
// 维护品牌
toBrand() {
this.$router.push({path: '/system/shop/brand'});
},
selectTm(indexId) { // 通用 方法
// 图片转换为 base64
getBase64(file) {
return new Promise(function (resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function () {
imgResult = reader.result;
};
reader.onerror = function (error) {
reject(error);
};
reader.onloadend = function () {
resolve(imgResult);
};
});
}, },
}
} // methods end
} }
</script> </script>
<style scoped> <style scoped>
ul, li { ul {
list-style: none; padding: 0;
/*margin: 0;*/
/*padding: 0;*/
} }
.goods-info {
.el-input-group { padding: 15px 0px;
width: calc(100% - 60px); margin-top: 18px;
}
.type-text-span {
display: inline-block;
width: 400px;
/*margin: 0 20px 0;*/
}
.edit-type-span {
display: inline-block;
cursor: pointer;
margin: 0 20px;
}
/* 一般提示性文字 */
.tip-span {
color: #909399;
font-size: 12px;
}
/deep/.el-form-item {
margin-bottom: 20px;
} }
</style> </style>
src/views/system/goods/add/index.vue
浏览文件 @ 0f62f25a
<template> <template>
<div class="app-container goods" v-loading="loading"> <div class="app-container">
<el-card class="box-card"> <!-- 选择商品类目 start -->
<el-card class="box-card" v-if="!isShowGoodsDetails">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span style="font-size: 18px; float:left;margin-top: 4px;">{{title}}</span> <p class="card-header-title"><span class="blue-block-goods"></span>确认商品所在目录</p>
<el-button style="float: right; margin: 0 10px 0 20px;" size="mini" type="info" plain @click="submitForm(0)">保 存 草 稿 </div>
</el-button> <div>
<el-button style="float: right;" size="mini" type="primary" @click="submitForm(1)">提 交 上 架 <div>
</el-button> <p class="goods-type-tip">为商品设置正确的类目，能让商品快速的被搜索到</p>
</div>
<div class="goods-type-options" v-loading="loading">
<el-cascader-panel v-model="SSQList" :props='props' @change="SSQChange" ref="ssqCascader"></el-cascader-panel>
</div>
<el-button type="primary" class="next-step" :disabled="isNextStep" @click="nextStep">下一步</el-button>
</div>
</el-card>
<!-- 选择商品类目 end -->
<!-- 添加商品 start -->
<el-card class="box-card good-details-body" v-if="isShowGoodsDetails">
<div class="floor-nav" id="floorNavList">
<ul class="nav-list">
<li class="nav-list-item" :class="{'floor-item-active': isFIActive === index}" v-for="(item, index) in floorNav" :key="item.id" @click="setFloorNavMountClick(index)">{{ item.name }}</li>
</ul>
</div>
<div class="floor-cont" ref="scrollview">
<div class="floor-item">
<div class="floor-item-box">
<p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品信息</p>
<Goodsinfomation ref="goodsInfo" :goodsinfodata='goodsinfodata'/>
</div>
</div>
<div class="floor-item">
<div class="floor-item-box">
<p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品规格</p>
</div>
</div>
<div class="floor-item">
<div class="floor-item-box">
<p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品售价</p>
</div>
</div>
<div class="floor-item">
<div class="floor-item-box">
<p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品详情</p>
</div>
</div>
<div class="floor-item">
<div class="floor-item-box">
<p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>售后及服务</p>
<Goodsaftersale ref="goodsaftersale" :goodsaftersale="goodsaftersale" />
<div class="submit-type-con">
<el-radio-group v-model="submitType" size="small">
<el-radio :label="1" border>放入仓库</el-radio>
<el-radio :label="2" border>立即上架</el-radio>
</el-radio-group>
</div>
</div>
</div>
</div>
<div class="submit-cont">
<el-button type="primary" style="padding: 10px 30px;" @click="save">提 交</el-button>
</div> </div>
<el-tabs type="border-card">
<el-tab-pane label="商品信息">
<Goodsinfomation ref="childGoodsInf" :infomationdatas='infomationdata' @infomationclick='infomationclick'/>
</el-tab-pane>
<el-tab-pane label="商品图片">
<Goodsimg :imgdata='imgdate' @imgclicks='imgclick'/>
</el-tab-pane>
<el-tab-pane label="商品规格">
<Guide :guidedata='guidedate' @guideclicks='guideclick'/>
</el-tab-pane>
<el-tab-pane label="商品参数">
<Goodsparameter :parameterdata='parameterdata' @parameterclicks='parameterclick'/>
</el-tab-pane>
</el-tabs>
</el-card> </el-card>
<!-- 添加商品 end -->
</div> </div>
</template> </template>
<script> <script>
import {getGoods,GetFreight} from '@/api/module/goods' import { getAreaList } from '@/api/module/retreat/address';
import descartes from "@/utils/dikaerjs.js";
import Guide from './components/guide'
import Goodsinfomation from './components/goodsinfomation' import Goodsinfomation from './components/goodsinfomation'
import Goodsimg from './components/goodsimg' import Goodsaftersale from './components/goodsaftersale'
import Goodsparameter from './components/goodsparameter' // let TIMER = null;
import {addGoods} from '@/api/module/goods'
export default { export default {
name: 'goods',
data() { data() {
return { return {
infomationdata: {},
parameterdata: {},
goodsOnsale: 0,
loading: false, loading: false,
applyStatus: '', SSQList: [], // 省市区
title: "添加新商品", SSQStr: '', // 省市区 拼接
imgdate: {}, props: {
guidedate: {}, expandTrigger: 'click',
parameterdate: {}, lazy: true,
params: { lazyLoad: this.lazyLoad,
applyStatus: 0 value: "id",
label: 'name',
leaf: 'leaf'
}, },
expressTemplateIdList: [], //'原来绑定的运费模板已经被删除', isNextStep: true,
expressTemplateList: [], isShowGoodsDetails: false,
} isFIActive: 0,
/**/
floorNav: [
{ id: 1, name: '商品信息' },
{ id: 2, name: '商品规格' },
{ id: 3, name: '商品售价' },
{ id: 4, name: '商品详情' },
{ id: 5, name: '售后及服务' },
],
/* 商品信息 */
goodsinfodata: {
categoryList: [],
categoryStr: ''
},
/* 售后及服务 */
goodsaftersale: {
},
submitType: 1,
TIMER: null,
} // return end
}, },
components: { components: {
Guide,
Goodsinfomation, Goodsinfomation,
Goodsimg, Goodsaftersale
Goodsparameter
}, },
created() { created() {
this.getFreight();//运费模板数据，回显匹配专用
this.getParams();
},
methods: {
// 运费模板
getFreight() {
GetFreight(this.queryParams).then(res => {
this.expressTemplateList = res.data;
this.expressTemplateIdList = this.expressTemplateList.filter(function(item) {
return item.Id;
})
});
},
getParams() {
let goodsId = this.$route.query.goodsId;
if (goodsId > 0) {
this.title = "编辑商品信息";
this.genGoodsInfo(goodsId);
}
},
// 获取商品详情
genGoodsInfo(goodsId) {
this.loading = true;
const goods_id = goodsId;
getGoods(goods_id).then(res => {
console.log(9999,res);
if(res.code === 1 && res.data) {
this.goodsOnsale = res.data.isOnsale;
// 对发货时效单独处理
if(res.data.Delayompensate == 0) {
res.data.Delayompensate = '';
}
//res.data.freightId 返回的值类型有 0（string/number）|| ‘全国包邮通用模板’（string）|| 310(number)
let resourceType = '1'; // 为了单元框正常显示，先给一个默认值，// 字符串 ‘0’,代表 数据为单独运费
let serviceagsTagsVal = [];
if(res.data.ServiceagsTags) {
serviceagsTagsVal = JSON.parse(res.data.ServiceagsTags);
}
// 库存，后台返回字段更换，提前处理 specOption },
if( res.data.goodsSpecs.specOption && res.data.goodsSpecs.specOption.length > 0) { mounted() {
res.data.goodsSpecs.specOption.forEach(function(item){
if(item.stock) {
item['goodsNowStock'] = item.stock;
}
});
}
this.infomationdata = { },
goodsId: res.data.goodsId,
goodsName: res.data.goodsName,
categoryId: res.data.categoryId,
scPrice: res.data.scPrice / 100,
price: res.data.price / 100,
jsPrice: res.data.jsPrice / 100,
goodsNowStock: res.data.goodsNowStock,
producingArea: res.data.producingArea,
weight: res.data.weight,
unit: res.data.unit,
goodsBrand: res.data.goodsBrand,
wlPrice: res.data.wlPrice,
pywlPrice: res.data.pywlPrice,
resource: resourceType,
Delayompensate: res.data.Delayompensate,
aftersaleTime: res.data.aftersaleTime,
mark: res.data.mark,
serviceagsTags: serviceagsTagsVal,
description: res.data.description,
freightId: res.data.freightId,
outGoodsId: res.data.outGoodsId,
};
this.guidedate = res.data.goodsSpecs;
this.guidedate["goodsSpec"] = res.data.goodsSpec;
this.parameterdata = res.data.Params ? res.data.Params : {};
this.imgdate = {
"ruleFormdialogImageUrl": res.data.image,
"ruleFormdialogImageUrlplus": res.data.defaultImage
};
}else if(res.code === 0) {
if(res.msg) {
this.$message({type:'error',message: res.msg});
}else {
this.$message({type:'error',message: '数据出错啦'});
}
}
this.loading = false; methods: {
}); // 只有点击完最后一级，才会有值
}, SSQChange() {
info() { if(this.SSQList && this.SSQList.length > 0) {
addgoods(this.listQuery).then(res => { this.isNextStep = false
this.list = res.data.items }else {
this.total = res.data.total this.SSQList = []
this.listLoading = false this.isNextStep = true
})
},
//商品信息
infomationclick(type) {
Object.assign(this.params, type);
},
//商品图片
imgclick(type) {
let img = [];
type.ruleFormdialogImageUrl.forEach((res, index) => {
img.push(res.url)
})
this.params["imgs"] = img;
this.params["defaultImg"] = ''
if(type.ruleFormdialogImageUrlplus.length > 0) {
this.params["defaultImg"] = type.ruleFormdialogImageUrlplus[0].url;
} }
}, },
//规格 lazyLoad(node, resolve) {
guideclick(type, specsGroup) { this.SSQList = [];
this.params["specs"] = type; this.SSQStr = '';
this.params["specsGroup"] = specsGroup; this.getArea(node, resolve);
// 浮点处理 if(this.SSQList && this.SSQList.length > 0) {
if(this.params.specs && this.params.specs.length > 0) { this.isNextStep = false
for(let i = 0; i < this.params.specs.length; i++) { }else {
if(this.params.specs[i].jsPrice ) { this.isNextStep = true
this.params.specs[i].jsPrice = parseInt(this.params.specs[i].jsPrice * 100);
}
if(this.params.specs[i].price ) {
this.params.specs[i].price = parseInt(this.params.specs[i].price * 100);
}
if(this.params.specs[i].scPrice ) {
this.params.specs[i].scPrice = parseInt(this.params.specs[i].scPrice * 100);
}
}
} }
}, },
//参数 getArea(node, resolve) {
parameterclick(type) { const level = node.level;
this.params["goodsPram"] = type; let limboNode = {};
}, if(level === 0) {
limboNode = {pid: 0}
/** 确定按钮 */
submitForm(status) {
this.params.applyStatus = 0;
this.params.isOnsale = this.goodsOnsale;
if(status === 1) {
this.params.applyStatus = 1;
} }
if(level === 1) {
if(this.params.resource == 0) { limboNode = { pid: node.value };
this.params.freightId = 0;
}else if(this.params.resource == 1) {
this.params.wlPrice = 0;
this.params.pywlPrice = 0;
// 运费模板字段单独处理,兼容老数据
if(this.params.freightId === '全国包邮通用模板' || this.params.freightId == 0) {
this.params.freightId = 310;
}
} }
if(level === 2) {
console.log("gogogogog",this.params); limboNode = { pid: node.value };
//return ; }
this.loading = true;
// 商品信息 表单字段校验 getAreaList(limboNode).then(res => {
let isGoodInfMsg = this.$refs['childGoodsInf'].validateGoodsInfForm();
// 商品图片 校验 let result = {};
let isGoodSImgMsg = 'defaultImg' in this.params; // debugger
if (level === 0) {
if(!isGoodInfMsg) { result = res.data
if(!('goodsName' in this.params)) { result.forEach(item => {
this.$message({type: 'error',message: '[ 商品信息 ] 未填写完整！'}); item.value = item.id;
return; item.label = item.name;
item.children=[];
item.leaf = 0; // 可以控制 是否有下级 值为true都不行，必须等于0
})
} }
if('goodsName' in this.params) { if (level === 1) {
if(this.params.goodsName === '') { result = res.data
this.$message({type: 'error',message: '[ 商品信息 ] 中 商品名称未填写！'}); result.forEach(item => {
return; item.value = item.id;
} item.label = item.name
item.children=[];
if(this.params.categoryId === 0) { //这句代码表示当点击最后一级的时候 label后面不会转圈圈 并把相关值赋值到选择器上
this.$message({type: 'error',message: '[ 商品信息 ] 中 商品分类未填写！'}); item.leaf = 0
return; })
}
if(this.params.scPrice === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 市场原价未填写！'});
return;
}
if(this.params.price === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 指导售价未填写！'});
return;
}
if(this.params.jsPrice === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 结算价格未填写！'});
return;
}
if(this.params.goodsNowStock === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 商品库存未填写！'});
return;
}
if(this.params.unit === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 商品单位未填写！'});
return;
}
if(this.params.goodsBrand === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 商品名称未填写！'});
return;
}
} }
}
if(!isGoodSImgMsg) { if (level === 2) {
this.$message({type: 'error',message: '[ 商品图片 ] 未上传图片！'}); result = res.data
return; result.forEach(item => {
}else { item.value = item.id;
if('defaultImg' in this.params) { item.label = item.name
if(this.params.defaultImg === '') { item.leaf = 1;
this.$message({type: 'error',message: '[ 商品图片 ] 中 商品主图未上传！'}); })
return;
}
if(this.params.imgs.length === 0) {
this.$message({type: 'error',message: '[ 商品图片 ] 中 商品轮播图未上传！'});
return;
}
} }
}
this.loading = true;
addGoods(this.params).then(res => {
if (res.code === 1) {
this.$message({
message: res.msg,
type: 'success'
});
this.$emit('closeDialog',false);
if (this.goodsOnsale) {
var redUrl = '/system/goods/onsale';
} else {
var redUrl = '/system/goods/offsale';
}
this.$router.push({
path: redUrl
});
} else if(res.code === 0) {
if(res.msg) {
this.$message.error(res.msg);
}else {
this.$message.error("操作失败！");
}
} // result = []
resolve(result)
this.loading = false; this.loading = false;
}); });
}, },
//------ 通用方法 ----- // 添加商品后，下一步 操作
verifiesForm(type,fieldName,obj) { nextStep() {
// 先判断类型，字符串类型type === text, 下拉形式字段 select // 注意数据格式 [1,2,3] 数组，且里面是数字类型
if(type === 'text') { let ssqLabelList = this.$refs['ssqCascader'].getCheckedNodes()[0].pathLabels;
// 没有这个属性，肯定没有填写，抛出提示 this.goodsinfodata.categoryList = this.SSQList;
if(!(fieldName in obj)) { this.goodsinfodata.categoryStr = ssqLabelList[0] + '/' + ssqLabelList[1] + '/' + ssqLabelList[2];
return 1; this.isShowGoodsDetails = true;
} },
}
if(type === 'select') {
//
// getGoodsAfterSaleData(data) {
// console.log("售后子组件给的：",data);
// },
//
save() {
// 此处变量 有顺序 校验时，电梯至某处
// 商品信息 是否填写完整
let isGoodsInfoMsg = this.$refs['goodsInfo'].validateGoodsInfoForm();
// 售后服务 是否填写完整
let isGoodsAfterSaleMsg = this.$refs['goodsaftersale'].validateGoodsAfterSaleForm();
//console.log(212,this.$refs.goodsaftersale.goodsAfterSaleForm) // 主动获取子组件数据
//console.log(2222,isGoodsAfterSaleMsg,isGoodsInfoMsg);
if(!isGoodsInfoMsg) {
this.$message({type:'error',message:'商品信息未填写完整'});
this.setFloorNavMountClick(0);
return
} }
if(!isGoodsAfterSaleMsg) {
this.$message({type:'error',message:'售后及服务未填写完整'});
this.setFloorNavMountClick(4);
return
}
},
// 如果有这个属性，那么进一步判断，这个必填值是否填写 /* 添加商品详细 */
// if(fieldName in obj && !obj[fieldName]) { /* 设置楼层导航事件驱动方法* @params Number index 楼层下标 */
// return 2 setFloorNavMountClick(index) {
let _this = this
_this.isFIActive = index;
//debugger
clearInterval(_this.TIMER)
let floor_item = document.getElementsByClassName('floor-item'),
floor_offsetTop = floor_item[index].offsetTop - floor_item[0].offsetTop,
window_scrollTop = _this.$refs.scrollview.scrollTop,
timer = { step: 45, times: 20, FLOOR_OFFSETTOP: floor_offsetTop };
console.log(3333,floor_item[0].offsetTop,floor_item[1].offsetTop,floor_item[2].offsetTop,floor_item[3].offsetTop,floor_item[4].offsetTop,document.body.scrollTop,document.documentElement.scrollTop);
//debugger
if (window_scrollTop > floor_offsetTop) {
_this.setFloorScrollArrowUp(timer)
} else if (window_scrollTop === floor_offsetTop) {
return false
} else {
_this.setFloorScrollArrowDown(timer)
}
},
/* 设置楼层向上滚动* @params Object timer 定时器配置 */
setFloorScrollArrowUp(timer) {
//debugger
let _this = this
clearInterval(_this.TIMER)
_this.TIMER = setInterval(() => {
const window_scrollTop = _this.$refs.scrollview.scrollTop
if (window_scrollTop <= timer.FLOOR_OFFSETTOP) {
_this.$refs.scrollview.scrollTop = timer.FLOOR_OFFSETTOP
clearInterval(_this.TIMER)
} else {
_this.$refs.scrollview.scrollTop = window_scrollTop - timer.step
}
}, timer.times)
},
/* 设置楼层向下滚动@params Object timer 定时器配置 */
setFloorScrollArrowDown(timer) {
let floor_item = document.getElementsByClassName('floor-cont');
let fuck = 0;
let _this = this
clearInterval(_this.TIMER)
fuck = timer.FLOOR_OFFSETTOP
/**/
// if(_this.isFIActive === 4) {
// console.log(280,_this.$refs.scrollview.scrollTop);
// timer.FLOOR_OFFSETTOP = timer.FLOOR_OFFSETTOP - 333;
// } // }
console.log(999,floor_item[0].offsetHeight); //offsetHeight
/**/
_this.TIMER = setInterval(() => {
const window_scrollTop = _this.$refs.scrollview.scrollTop
if (window_scrollTop >= timer.FLOOR_OFFSETTOP) {
_this.$refs.scrollview.scrollTop = timer.FLOOR_OFFSETTOP
clearInterval(_this.TIMER)
} else {
_this.$refs.scrollview.scrollTop = window_scrollTop + timer.step
}
}, timer.times)
},
} } // methods end
}
} }
</script> </script>
<style scoped lang="scss" type="text/stylus">
ul, li { <style scoped lang="scss" type="text/css">
list-style: none; p {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
/* el-card title hxz 样式统一 */
.ullist { .card-header-title {
border: 1px solid #e7eaec; display: flex;
padding: 10px; flex-direction: row;
margin-bottom: 10px; justify-content: start;
align-items: center;
font-size: 18px;
color: #333;
font-weight: 400;
height: 24px;
} }
.blue-block-goods {
.el-input-group { width: 5px;
width: calc(100% - 60px); height: 24px;
background: #3A84FF;
margin: 0 7px 0 0;
border-radius: 2px;
} }
/* el-card title hxz 样式统一 end */
.addbtn { .goods-type-tip {
background-color: #5bc0de !important; width: 100%;
color: #fff !important; background: #F1F7FD;
border-radius: 0 4px 4px 0; border: 1px solid #3A84FF;
font-size: 14px;
font-weight: 400;
color: #3A84FF;
line-height: 1em;
padding: 14px 15px;
} }
.goods-type-options {
/deep/.el-card__body { margin: 25px 0;
height: calc(100% - 50px);
overflow: hidden;
} }
/*------------ 联级面板样式重置 start ------------*/
.el-tabs { /deep/.el-cascader-panel.is-bordered {
height: 100%; border: none;
}
/deep/.el-cascader-menu {
min-width: 280px;
border: none;
box-shadow: 0px 4px 9px 1px rgba(51, 51, 51, 0.09);
border-radius: 2px;
overflow: hidden; overflow: hidden;
/deep/.el-tabs__content {
height: calc(100% - 50px);
overflow-y: scroll;
}
} }
/deep/.el-cascader-menu__wrap {
.eldelbtn { width: 280px;
height: 30px; height: 500px;
padding: 5px 20px !important; overflow: auto;
margin-left: -3px; margin: 5px 0!important;
}
/* 很重要,不要问我为什么 */
/deep/.el-scrollbar:hover>.el-scrollbar__bar, /deep/.el-scrollbar:active>.el-scrollbar__bar, /deep/.el-scrollbar:focus>.el-scrollbar__bar {
opacity: 0;
}
/*------------ 联级面板样式重置 end ---------------*/
.next-step {
padding: 10px 25px;
margin: 0 auto;
display: block;
} }
.childlist { /* 电梯效果 样式 */
margin-top: 10px; .floor-nav {
width: 100%;
}
.floor-nav .nav-list {
padding: 0;
margin:0;
display: flex;
justify-content: start;
flex-direction: row;
border-bottom:1px solid #eee;
}
.floor-nav .nav-list .nav-list-item {
font-size: 18px;
font-weight: 400;
color: #333333;
padding: 0 25px 15px;
list-style: none;
vertical-align: middle;
align-self: center;
border-bottom: 2px solid #fff;
cursor: pointer;
}
.floor-nav .nav-list .floor-item-active,
.floor-nav .nav-list .nav-list-item:hover {
color: #3A84FF;
font-weight: bold;
border-bottom: 2px solid #3A84FF;
} }
.el-button--medium { .floor-item-box-title {
padding: 10px 12px; background: #F1F1F6;
height: 45px;
}
.blue-block-goods-title {
margin: 0 20px 0 0;
}
/deep/.good-details-body .el-card__body {
height: 100%;
padding: 15px 20px 0px 20px;
overflow: hidden;
} }
.dfbtn { .floor-cont{
position: relative; height: calc(100% - 98px);
overflow: auto;
} }
.goods .el-tabs__content { .floor-item {
height: 100%; padding: 0 20px 0 0;
overflow-y: scroll; margin: 15px auto;
min-height: 300px;
color: #333;
}
.submit-type-con {
width: 236px;
margin: 0 auto 20px;
}
.submit-cont {
width: calc(100% + 40px);
padding: 12px 0 8px;
margin-left: -20px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
/*align-content: center;*/
box-shadow: 0px -8px 9px 1px rgba(51, 51, 51, 0.06);
} }
</style> </style>
src/views/system/retreat/address.vue
浏览文件 @ 0f62f25a
...@@ -175,12 +175,10 @@ ...@@ -175,12 +175,10 @@
methods: { methods: {
// 获取列表 // 获取列表
getList() { getList() {
this.loading = true;
getAddressList(this.queryParams).then(res => { getAddressList(this.queryParams).then(res => {
if(res.code === 1 && res.data.data) { if(res.data.data) {
this.addressList = res.data.data; this.addressList = res.data.data;
this.total = res.data.count; this.total = res.data.count;
this.loading = false;
} }
}); });
}, },
...@@ -261,26 +259,26 @@ ...@@ -261,26 +259,26 @@
// 修改 // 修改
handleUpdate(row) { handleUpdate(row) {
this.isOpen = true;
this.areaList = []; this.areaList = [];
const roleIds = row.id || this.ids; const roleIds = row.id || this.ids;
//this.loading = true; this.loading = true;
getAddressDetails(roleIds).then(res => { getAddressDetails(roleIds).then(res => {
if(res && res.data) { if(res.data) {
this.isOpen = true;
// 处理 三级联动回显 // 处理 三级联动回显
let areaListAry = res.data.address_ids.split(","); let areaListAry = res.data.address_ids ? res.data.address_ids.split(",") : [];
for(let i = 0; i < areaListAry.length; i++) { for(let i = 0; i < areaListAry.length; i++) {
this.areaList.push(Number(areaListAry[i])); this.areaList.push(Number(areaListAry[i]));
} }
this.addressForm = res.data; this.addressForm = res.data;
} }
this.loading = false;
}); });
}, },
cancel() { cancel() {
this.areaList = []; this.areaList = [];
this.resetForm('addressForm'); this.resetForm('addressForm');
this.isOpen = false; this.isOpen = false;
}, },
save(form) { save(form) {
if(typeof this.addressForm.address_ids === "string") { if(typeof this.addressForm.address_ids === "string") {
......
src/views/system/retreat/retreat/index.vue
浏览文件 @ 0f62f25a
...@@ -86,8 +86,8 @@ ...@@ -86,8 +86,8 @@
<pagination <pagination
v-show="total>0" v-show="total>0"
:total="total" :total="total"
:page.sync="queryParams.pageNum" :page.sync="queryParams.page"
:limit.sync="queryParams.pageSize" :limit.sync="queryParams.limit"
@pagination="getList" @pagination="getList"
/> />
<!-- 售后申请信息对话框 --> <!-- 售后申请信息对话框 -->
...@@ -337,9 +337,10 @@ ...@@ -337,9 +337,10 @@
export default { export default {
name: "retreat", name: "retreat",
data() { data() {
return { return {
// 遮罩层
loading: false,
fullHeight: 0, fullHeight: 0,
tableHeight: 0, tableHeight: 0,
//退货地址 //退货地址
...@@ -404,8 +405,6 @@ ...@@ -404,8 +405,6 @@
reject: false, reject: false,
//退货地址 //退货地址
reback: false, reback: false,
// 遮罩层
loading: true,
// 选中数组 // 选中数组
ids: [], ids: [],
// 非单个禁用 // 非单个禁用
...@@ -424,11 +423,11 @@ ...@@ -424,11 +423,11 @@
open: false, open: false,
// 查询参数 // 查询参数
queryParams: { queryParams: {
pageNum: 1, page: 1,
pageSize: 10, limit: 10,
applyTime: [], applyTime: [],
beginTime: 0, beginTime: '',
endTime: 0, endTime: '',
goodsId: null, goodsId: null,
goodsName: null, goodsName: null,
userNeed: null, userNeed: null,
...@@ -487,8 +486,8 @@ ...@@ -487,8 +486,8 @@
// select组件，clear的时候，将addTimeInterval的值，初始化为null，判断当其值为null时，赋值为数组 // select组件，clear的时候，将addTimeInterval的值，初始化为null，判断当其值为null时，赋值为数组
if(!this.queryParams.applyTime && typeof(this.queryParams.applyTime) !== "undefined") { if(!this.queryParams.applyTime && typeof(this.queryParams.applyTime) !== "undefined") {
this.queryParams.applyTime = []; this.queryParams.applyTime = [];
this.queryParams.beginTime = 0; this.queryParams.beginTime = '';
this.queryParams.endTime = 0; this.queryParams.endTime = '';
} }
} }
}, },
...@@ -612,13 +611,11 @@ ...@@ -612,13 +611,11 @@
/** 查询售后申请信息列表 */ /** 查询售后申请信息列表 */
getList() { getList() {
this.loading = true; listRetreat(this.queryParams).then(res => {
listRetreat(this.queryParams).then(response => { if(res.data) {
//console.log(response.data) this.retreatList = res.data.data;
this.retreatList = response.data.list; this.total = res.data.count;
this.total = response.data.total; }
this.loading = false;
}); });
}, },
// 取消按钮 // 取消按钮
...@@ -641,14 +638,14 @@ ...@@ -641,14 +638,14 @@
this.queryParams.beginTime = new Date(this.queryParams.applyTime[0]).getTime() / 1000; this.queryParams.beginTime = new Date(this.queryParams.applyTime[0]).getTime() / 1000;
this.queryParams.endTime = new Date(this.queryParams.applyTime[1]).getTime() / 1000; this.queryParams.endTime = new Date(this.queryParams.applyTime[1]).getTime() / 1000;
} }
this.queryParams.pageNum = 1; this.queryParams.page = 1;
this.getList(); this.getList();
}, },
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { resetQuery() {
this.resetForm("queryForm"); this.resetForm("queryForm");
this.queryParams.beginTime = 0; this.queryParams.beginTime = '';
this.queryParams.endTime = 0; this.queryParams.endTime = '';
this.handleQuery(); this.handleQuery();
}, },
//同意申请并发货 //同意申请并发货
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论