xh-pan1
2 years ago
18 changed files with 2096 additions and 246 deletions
-
2canvas-container/components/toolBar/toolModule/product-select.vue
-
57src/api/commodity.js
-
3src/layout/components/Navbar.vue
-
1src/utils/request.js
-
4src/views/active/getActive.vue
-
541src/views/commodity/commdityClass/Edit.vue
-
174src/views/commodity/commdityClass/index.vue
-
779src/views/commodity/commodityList copy/commodityGroup.vue
-
312src/views/commodity/commodityList copy/index.vue
-
2src/views/commodity/commodityList/commodityGroup.vue
-
4src/views/commodity/commodityList/index.vue
-
37src/views/commodity/commoditySystem/addCommodity.vue
-
7src/views/commodity/commoditySystem/index.vue
-
130src/views/shop/myshop/index.vue
-
8src/views/stock/stocknote/index.vue
-
187src/views/system/shopSys/edit.vue
-
90src/views/system/shopSys/index.vue
-
4src/views/system/storehouse/Edit.vue
@ -0,0 +1,541 @@ |
|||
<template> |
|||
<el-dialog |
|||
:close-on-click-modal="false" |
|||
:title="title" |
|||
:type="type" |
|||
:visible.sync="isVisible" |
|||
center |
|||
width="48%" |
|||
top="50px" |
|||
class="group-dialog" |
|||
> |
|||
<div class="add-dialog-component"> |
|||
<el-alert |
|||
:style="{ backgroundColor: '#fff' }" |
|||
title="保存后将生效在移动端的分类里" |
|||
type="info" |
|||
:closable="false" |
|||
/> |
|||
<el-tree |
|||
class="tree-box" |
|||
:data="treeData" |
|||
:props="{ children: 'childs' }" |
|||
node-key="id" |
|||
default-expand-all |
|||
:expand-on-click-node="false" |
|||
> |
|||
<div |
|||
slot-scope="{ node, data }" |
|||
class="custom-tree-node" |
|||
> |
|||
<div class="content"> |
|||
<el-input |
|||
|
|||
v-model="data.classifyName" |
|||
class="input" |
|||
:disabled="isCheck" |
|||
maxlength="6" |
|||
size="mini" |
|||
:placeholder="data.classifyLevel | placeholderTips" |
|||
/> |
|||
<el-upload |
|||
class="upload-uploader" |
|||
:headers="headers" |
|||
:on-success="handleImageSuccess" |
|||
:multiple="false" |
|||
:show-file-list="false" |
|||
:action="action" |
|||
:file-list="data.classifyImageArray" |
|||
> |
|||
<img |
|||
v-if="data.classifyImageArray.length && data.classifyImageArray[0].url" |
|||
width="80" |
|||
height="80" |
|||
:src="data.classifyImageArray.length && data.classifyImageArray[0].url" |
|||
> |
|||
<div v-else> |
|||
<i class="el-icon-plus" /> <span style="display:none; font-size: 10px; color: #909399 !important;">建议尺寸:1252*356</span> |
|||
</div> |
|||
|
|||
</el-upload> |
|||
<!-- <template v-if="data.classifyLevel < 3"> |
|||
|
|||
</template> |
|||
<template v-else> |
|||
<div |
|||
class="content" |
|||
:class="isCheck ? 'disabled' : ''" |
|||
> |
|||
<el-input |
|||
v-model="data.classifyName" |
|||
class="input" |
|||
:disabled="isCheck" |
|||
size="mini" |
|||
maxlength="6" |
|||
placeholder="输入三级类别名称（最大6个字符）" |
|||
/> |
|||
<el-upload |
|||
:headers="headers" |
|||
:data="dataObj" |
|||
:multiple="false" |
|||
:show-file-list="false" |
|||
:file-list="data.classifyImageArray" |
|||
:on-success="handleImageSuccess" |
|||
class="upload-uploader" |
|||
:action="action" |
|||
> |
|||
<img |
|||
v-if=" |
|||
data.classifyImageArray && data.classifyImageArray[0].url |
|||
" |
|||
width="80" |
|||
height="80" |
|||
:src=" |
|||
data.classifyImageArray && data.classifyImageArray[0].url |
|||
" |
|||
> |
|||
<i |
|||
v-else |
|||
class="el-icon-plus" |
|||
/> |
|||
</el-upload> |
|||
</div> |
|||
</template> --> |
|||
</div> |
|||
<div |
|||
v-if="!isCheck" |
|||
class="setting-box" |
|||
> |
|||
<el-button |
|||
v-if="data.classifyLevel != 3" |
|||
type="text" |
|||
size="mini" |
|||
@click="() => append(data)"> |
|||
{{ data.classifyLevel | addTips }} |
|||
</el-button> |
|||
<el-button |
|||
type="text" |
|||
size="mini" |
|||
@click="() => remove(node, data)" |
|||
>删除 |
|||
</el-button> |
|||
</div> |
|||
</div> |
|||
</el-tree> |
|||
<div class="add-btn-wrap"> |
|||
<template v-if="isCheck"> |
|||
<el-button |
|||
class="add" |
|||
type="primary" |
|||
size="small" |
|||
@click="close" |
|||
>确定 |
|||
</el-button> |
|||
</template> |
|||
<template v-else> |
|||
<el-button |
|||
v-if="type === 'add'" |
|||
class="add" |
|||
type="primary" |
|||
size="small" |
|||
@click="addClassification" |
|||
>添加一级类别名称 |
|||
</el-button> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
@click="onSubmit" |
|||
>保存 |
|||
</el-button> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
import { uploadUrl } from '@/utils/request' |
|||
import { getToken,getBusinessId } from '@/utils/auth' |
|||
import { |
|||
commdityClassAdd, |
|||
commdityClassgetById, |
|||
commdityClassUpdate |
|||
} from '@/api/commodity' |
|||
|
|||
let idx = 1000 |
|||
export default { |
|||
filters: { |
|||
addTips (classifyLevel) { |
|||
classifyLevel = classifyLevel + '' |
|||
const tipsMp = { |
|||
1: '添加二级类别名称', |
|||
2: '添加三级类别名称', |
|||
3: '' |
|||
} |
|||
return tipsMp[classifyLevel] |
|||
}, |
|||
placeholderTips (classifyLevel) { |
|||
classifyLevel = classifyLevel + '' |
|||
const tipsMp = { |
|||
1: '输入一级类别名称（最大6个字符）', |
|||
2: '输入二级类别名称（最大6个字符）', |
|||
3: '输入三级类别名称（最大6个字符）' |
|||
} |
|||
return tipsMp[classifyLevel] |
|||
} |
|||
}, |
|||
props: { |
|||
dialogVisible: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
type: { |
|||
type: String, |
|||
default: 'add' |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
params: { |
|||
classifyName: '' |
|||
}, |
|||
file: this.image ? this.image : '', |
|||
imgList: [], |
|||
customParams: { |
|||
current: 1, |
|||
map: {}, |
|||
model: { |
|||
config: '', |
|||
isCustom: true, |
|||
isDelete: 0, |
|||
name: '' |
|||
}, |
|||
order: 'descending', |
|||
size: 100, |
|||
sort: 'id' |
|||
}, |
|||
treeData: [], |
|||
headers: { |
|||
'Authorization-business': getToken() |
|||
}, |
|||
action: uploadUrl, |
|||
dataObj: { |
|||
folderId: 1 |
|||
}, |
|||
deleteArr: [] |
|||
} |
|||
}, |
|||
computed: { |
|||
isVisible: { |
|||
get () { |
|||
return this.dialogVisible |
|||
}, |
|||
set () { |
|||
this.close() |
|||
this.reset() |
|||
} |
|||
}, |
|||
title () { |
|||
const stateMap = { |
|||
add: '新建类别', |
|||
edit: '修改类别', |
|||
check: '查看类别' |
|||
} |
|||
return stateMap[this.type] |
|||
}, |
|||
isCheck () { |
|||
return this.type === 'check' |
|||
} |
|||
}, |
|||
async created () { |
|||
/* |
|||
const res = await getSelect({ |
|||
dictName: '商品类别链接' |
|||
}) |
|||
console.log(res) |
|||
this.dictList = res.data |
|||
*/ |
|||
}, |
|||
methods: { |
|||
async queryOneCategory (oneClassifyId) { |
|||
console.log(oneClassifyId) |
|||
if (oneClassifyId === undefined) { |
|||
this.treeData = [] |
|||
return |
|||
} |
|||
const res = await commdityClassgetById({ |
|||
oneClassifyId |
|||
}) |
|||
const resData = res.data |
|||
this.initImageArray(resData) |
|||
if (resData) { |
|||
this.treeData = [resData] |
|||
} else { |
|||
this.treeData = [] |
|||
} |
|||
console.log(this.treeData) |
|||
}, |
|||
initImageArray(treeData){ |
|||
if(treeData){ |
|||
treeData.classifyImageArray = [ |
|||
{ |
|||
url: treeData.classifyImage |
|||
} |
|||
] |
|||
treeData.idx = idx++ |
|||
if(treeData.childs && treeData.childs.length){ |
|||
for (const index in treeData.childs) { |
|||
this.initImageArray(treeData.childs[index]) |
|||
} |
|||
}else{ |
|||
treeData.childs = [] |
|||
} |
|||
} |
|||
}, |
|||
handleImageSuccess (response, file, fileList) { |
|||
console.log(response) |
|||
const url = response.data.url |
|||
fileList[0].url = url |
|||
}, |
|||
close () { |
|||
this.$emit('close') |
|||
}, |
|||
reset () { |
|||
this.treeData = [] |
|||
}, |
|||
addClassification () { |
|||
this.treeData.push({ |
|||
idx: idx++, |
|||
classifyId: 0, |
|||
classifyPid: 0, |
|||
classifyName: '', |
|||
classifyImage: '', |
|||
classifyLevel: 1, |
|||
link: '', |
|||
classifyImageArray: [ |
|||
{ |
|||
url: '' |
|||
} |
|||
], |
|||
childs: [] |
|||
}) |
|||
}, |
|||
append (data) { |
|||
const classifyLevel = data.classifyLevel + 1 |
|||
console.log(data) |
|||
let newChild |
|||
if (!data.childs) { |
|||
this.$set(data, 'childs', []) |
|||
} |
|||
console.log(data) |
|||
newChild = { |
|||
idx: idx++, |
|||
classifyId: 0, |
|||
classifyPid: 0, |
|||
classifyName: '', |
|||
classifyImage: '', |
|||
classifyLevel: classifyLevel, |
|||
link: '', |
|||
classifyImageArray: [ |
|||
{ |
|||
url: '' |
|||
} |
|||
], |
|||
childs: [] |
|||
} |
|||
data.childs.push(newChild) |
|||
console.log(data) |
|||
}, |
|||
remove (node, data) { |
|||
const parent = node.parent |
|||
const children = parent.data.childs || parent.data |
|||
const index = children.findIndex(d => d.idx === data.idx) |
|||
if (index !== -1) { |
|||
children.splice(index, 1) |
|||
if (data.classifyId && data.classifyId > 0) { |
|||
this.deleteArr.push(data.classifyId) |
|||
} |
|||
} else { |
|||
this.$message.warning('数据错误，请重试') |
|||
} |
|||
}, |
|||
onSubmit () { |
|||
if (this.type === 'add') { |
|||
this.addGroup() |
|||
} else { |
|||
this.updateGroup() |
|||
} |
|||
}, |
|||
resetImage(treeData){ |
|||
console.log(treeData) |
|||
if(treeData){ |
|||
treeData.classifyImage = '' |
|||
if(treeData.classifyImageArray && treeData.classifyImageArray.length){ |
|||
treeData.classifyImage = treeData.classifyImageArray[0].url |
|||
} |
|||
if (!treeData.classifyImage) { |
|||
this.$message.error('分类\"' + treeData.classifyName + '\"请上传分类图片') |
|||
throw new Error('未上传分类图片') |
|||
} |
|||
if(treeData.childs && treeData.childs.length){ |
|||
for (const index in treeData.childs) { |
|||
this.resetImage(treeData.childs[index]) |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
async addGroup () { |
|||
const params = this.treeData |
|||
if (params.length === 0) { |
|||
this.$message.error('请添加分类') |
|||
return |
|||
} |
|||
this.resetImage(this.treeData[0]) |
|||
const obj = { |
|||
classifies: params |
|||
} |
|||
const res = await commdityClassAdd(obj, {project: getBusinessId()}) |
|||
if (res.code === '') { |
|||
this.isVisible = false |
|||
this.$message({ |
|||
message: '新增成功', |
|||
type: 'success' |
|||
}) |
|||
this.$emit('success') |
|||
this.deleteArr = [] |
|||
} |
|||
}, |
|||
async updateGroup () { |
|||
const params = this.treeData |
|||
if (params.length === 0) { |
|||
this.$message.error('请选择分类') |
|||
return |
|||
} |
|||
this.resetImage(this.treeData[0]) |
|||
const obj = { |
|||
classifies: params, |
|||
deleteIds: this.deleteArr |
|||
} |
|||
const res = await commdityClassUpdate(obj, {project: getBusinessId()}) |
|||
if (res.code === '') { |
|||
this.isVisible = false |
|||
this.$message({ |
|||
message: '成功', |
|||
type: 'success' |
|||
}) |
|||
this.$emit('success') |
|||
this.deleteArr = [] |
|||
} |
|||
}, |
|||
setParams ({ id }) { |
|||
console.log(id) |
|||
this.queryOneCategory(id) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
.add-dialog-component { |
|||
.tree-box { |
|||
.el-tree-node__content { |
|||
margin-bottom: 15px; |
|||
height: auto; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<style |
|||
lang="scss" |
|||
scoped |
|||
> |
|||
@import url("../../../styles/elDialog.scss"); |
|||
|
|||
.group-dialog { |
|||
.el-dialog { |
|||
min-width: 500px; |
|||
max-width: 600px; |
|||
} |
|||
} |
|||
|
|||
.add-dialog-component { |
|||
padding: 15px 20px; |
|||
max-height: 60vh; |
|||
overflow: auto; |
|||
|
|||
.el-tree-node__content { |
|||
&:hover { |
|||
background-color: #fff; |
|||
} |
|||
} |
|||
|
|||
.tree-box { |
|||
margin: 15px 0; |
|||
|
|||
.custom-tree-node { |
|||
display: flex; |
|||
width: 100%; |
|||
text-align: left; |
|||
|
|||
.content { |
|||
flex: 1; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.input { |
|||
width: 60%; |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.textarea-input { |
|||
width: 100%; |
|||
margin-left: 15px; |
|||
|
|||
textarea { |
|||
height: 80px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.level-3-wrap { |
|||
display: flex; |
|||
width: 300px; |
|||
|
|||
.upload-wrap { |
|||
position: relative; |
|||
|
|||
&.disabled::after { |
|||
content: ""; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
z-index: 999; |
|||
background-color: #f5f7fa; |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
.el-upload { |
|||
border: 1px dashed #d9d9d9; |
|||
} |
|||
|
|||
i { |
|||
} |
|||
|
|||
img { |
|||
width: 80px; |
|||
height: 80px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.add-btn-wrap { |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.upload-uploader { |
|||
margin-left: 30px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,174 @@ |
|||
<template> |
|||
<div class="classification-page"> |
|||
<div class="toolbar"> |
|||
<el-button type="success" @click="addBar">添加一级类别</el-button> |
|||
</div> |
|||
<el-table |
|||
:data="tableData" |
|||
style="width: 100%" |
|||
border |
|||
row-key="id" |
|||
:header-cell-style="{ background: '#EEF3FF', color: '#333333' }" |
|||
:tree-props="{ children: 'childs' }" |
|||
> |
|||
<el-table-column prop="classifyName" label="商品类别" /> |
|||
<el-table-column prop="status" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text" @click.native.prevent="checkRow(scope.row)">查看</el-button> |
|||
<el-button type="text" @click.native.prevent="updateRow(scope.row)">编辑</el-button> |
|||
<el-button type="text" @click.native.prevent="deleteRow(scope.row)">删除</el-button> |
|||
<!-- <el-button type="text" @click.native.prevent="setShareSetting(scope.row)">设置分配比例</el-button> --> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="fenye"> |
|||
<el-pagination |
|||
:current-page="currentPage" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="10" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
/> |
|||
</div> |
|||
<edit-dialog |
|||
ref="edit" |
|||
:dialog-visible="dialog.isVisible" |
|||
:type="dialog.type" |
|||
@close="editClose" |
|||
@success="getProductCategory" |
|||
/> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { |
|||
commdityClassGetAll, |
|||
commdityClassDelete |
|||
} from '@/api/commodity' |
|||
import EditDialog from './Edit' |
|||
import { getBusinessId } from '@/utils/auth' |
|||
export default { |
|||
components: { |
|||
EditDialog |
|||
}, |
|||
data() { |
|||
return { |
|||
dialogVisible: false, |
|||
formParams: { |
|||
page: 1, |
|||
pageSize: 10 |
|||
}, |
|||
total: 1, |
|||
tableData: [], |
|||
currentPage: 1, |
|||
dialog: { |
|||
type: 'add', |
|||
isVisible: false |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
this.getProductCategory() |
|||
this.getAll(this.formParams) |
|||
}, |
|||
methods: { |
|||
setShareSetting(row) { |
|||
this.$refs.shareSettingDialog.showSetting(1, row.classifyId) |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.formParams.pageSize = val |
|||
this.getAll(this.formParams) |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.formParams.page = val |
|||
this.getAll(this.formParams) |
|||
}, |
|||
fetch(config) { |
|||
const { limit, page } = config |
|||
this.formParams.pageIndex = page || 1 |
|||
this.formParams.pageSize = limit || 10 |
|||
this.getProductCategory() |
|||
}, |
|||
addBar() { |
|||
this.dialog = { |
|||
type: 'add', |
|||
isVisible: true |
|||
} |
|||
this.$refs.edit.setParams({ treeData: [] }) |
|||
}, |
|||
editClose() { |
|||
this.dialog.isVisible = false |
|||
}, |
|||
// 编辑 |
|||
updateRow(row) { |
|||
const id = row.classifyId |
|||
this.dialog = { |
|||
type: 'edit', |
|||
isVisible: true |
|||
} |
|||
this.$refs.edit.setParams({ |
|||
id: id |
|||
}) |
|||
}, |
|||
// 查看 |
|||
checkRow(row) { |
|||
const id = row.classifyId |
|||
this.dialog = { |
|||
type: 'check', |
|||
isVisible: true |
|||
} |
|||
this.$refs.edit.setParams({ |
|||
id |
|||
}) |
|||
}, |
|||
// 删除 |
|||
async deleteRow(row) { |
|||
this.$confirm('此操作将永久删除该类别, 是否继续?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}) |
|||
.then(() => { |
|||
commdityClassDelete({ oneClassifyId: row.classifyId }).then(res => { |
|||
if (res.code === '') { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '删除成功!' |
|||
}) |
|||
} |
|||
this.getAll(this.formParams) |
|||
}) |
|||
}) |
|||
.catch(() => { |
|||
this.$message({ |
|||
type: 'info', |
|||
message: '已取消删除' |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
async getProductCategory() { |
|||
this.getAll(this.formParams) |
|||
}, |
|||
async getAll(formParams) { |
|||
const res = await commdityClassGetAll(formParams, {project: getBusinessId()}) |
|||
this.tableData = res.data.list |
|||
this.total = res.data.total |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import url("../../../styles/elDialog.scss"); |
|||
|
|||
.classification-page { |
|||
padding: 15px 20px; |
|||
background: #FFFFFF; |
|||
border-radius: 10px; |
|||
.toolbar { |
|||
margin-bottom: 15px; |
|||
text-align: right; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,779 @@ |
|||
<template> |
|||
<div class="commodityGroup"> |
|||
<div class="commodityBox"> |
|||
<div class="groupTit">{{ groupData.shopGroupId ? '修改分组' : '新建分组' }}</div> |
|||
<div class="newGroupBox"> |
|||
<el-form class="formBox" :model="groupData" label-width="150px" :rules="groupBuyRules"> |
|||
<el-form-item label="分组名称" prop="groupName"> |
|||
<el-input v-model="groupData.groupName" maxlength="20" placeholder="请输入分组名称" onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')" /> |
|||
</el-form-item> |
|||
<el-form-item label="分组描述"> |
|||
<el-input |
|||
v-model="groupData.groupDescribe" |
|||
maxlength="200" |
|||
type="textarea" |
|||
:rows="4" |
|||
placeholder="请输入分组描述" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="分组商品"> |
|||
<div class="btnBox"> |
|||
<el-radio v-model="selectGroup" label="1" /><span @click="manualAdd">手动添加</span> |
|||
<el-radio v-model="selectGroup" label="2" /> <span @click="intelligentAdd">智能添加</span> |
|||
</div> |
|||
</el-form-item> |
|||
<div v-if="groupData.conditions.length !== 0 && selectGroup === '2'" class="intelDataBox"> |
|||
<div class="intelTit">智能添加已选条件</div> |
|||
<div class="intelList"> |
|||
<div v-for="(item, index) of groupData.conditions" :key="index" class="intelItem"> |
|||
<div class="itemBox"> |
|||
<span v-if="item.type === 1">库存</span> |
|||
<span v-if="item.type === 2">价格</span> |
|||
<span v-if="item.type === 3">重量</span> |
|||
<span v-if="item.type === 4">销量</span> |
|||
<span v-if="item.calculation === 1">大于</span> |
|||
<span v-if="item.calculation === 2">等于</span> |
|||
<span v-if="item.calculation === 3">小于</span> |
|||
<span>{{ item.number }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
<div v-if="selectConditions.length === 0 && selectGroup === '1'" class="isSelectList"> |
|||
<h3 class="isSelectTit">已选商品</h3> |
|||
<div class="tableBox"> |
|||
<el-table |
|||
ref="multipleTable" |
|||
:data="products" |
|||
border |
|||
:header-cell-style="{ background: '#EEF3FF', color: '#333333' }" |
|||
tooltip-effect="dark" |
|||
style="width: 100%" |
|||
max-height="400" |
|||
> |
|||
<el-table-column label="产品主图" width="220" align="center"> |
|||
<template slot-scope="scope"> |
|||
<img height="80" width="80" :src="scope.row.image " alt srcset> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="productName" label="产品名称" width="220" align="center" /> |
|||
<el-table-column prop="originalPrice" label="价格（元）" align="center" show-overflow-tooltip /> |
|||
<el-table-column prop="stockNumber" label="库存（件）" align="center" show-overflow-tooltip /> |
|||
</el-table> |
|||
<div class="fenye"> |
|||
<el-pagination |
|||
:current-page="productsPage" |
|||
:page-sizes="[5, 10, 20, 50, 100]" |
|||
:page-size="productsPageSize" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="products.length" |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="submitBox"> |
|||
<el-button type="primary" @click="addGroup('ruleForm')">提 交</el-button> |
|||
<el-button @click="closeAddGroup">取 消</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 手动添加弹框 --> |
|||
<el-dialog |
|||
title="手动添加商品" |
|||
:visible.sync="isShowManualAdd" |
|||
width="65%" |
|||
top="50px" |
|||
class="group-dialog" |
|||
:close-on-click-modal="false" |
|||
:modal-append-to-body="false" |
|||
:modal="false" |
|||
> |
|||
<!-- 搜索 --> |
|||
<div class="formSearch"> |
|||
<el-form :inline="true" :model="formInline" class="demo-form-inline"> |
|||
<el-form-item label="商品名称"> |
|||
<el-input v-model="formInline.search" maxlength="20" placeholder="搜索商品名称或商品ID" /> |
|||
</el-form-item> |
|||
<el-form-item class="tagCustomer" label="库存数量"> |
|||
<el-input v-model="formInline.minStock" maxlength="9" /><span>至</span><el-input v-model="formInline.maxStock" maxlength="9" /> |
|||
</el-form-item> |
|||
<el-form-item class="tagCustomer" label="价格"> |
|||
<el-input v-model="formInline.minPrice" maxlength="9" /><span>至</span><el-input v-model="formInline.maxPrice" maxlength="9" /> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" plain @click="search">查询</el-button> |
|||
<el-button type="info" plain @click="clearData">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div class="tableBox"> |
|||
<el-table |
|||
ref="multipleTable" |
|||
:data="shopListData" |
|||
border |
|||
:header-cell-style="{ background: '#EEF3FF', color: '#333333' }" |
|||
tooltip-effect="dark" |
|||
style="width: 100%" |
|||
max-height="550" |
|||
@selection-change="handleSelectionChange" |
|||
> |
|||
<el-table-column |
|||
type="selection" |
|||
width="55" |
|||
/> |
|||
<el-table-column label="产品主图" width="220" align="center"> |
|||
<template slot-scope="scope"> |
|||
<img height="80" width="80" :src="scope.row.image " alt srcset> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="productName" label="产品名称" width="220" align="center" /> |
|||
<el-table-column prop="originalPrice" label="价格（元）" align="center" show-overflow-tooltip /> |
|||
<el-table-column prop="stockNumber" label="库存（件）" align="center" show-overflow-tooltip /> |
|||
</el-table> |
|||
<div class="fenye"> |
|||
<el-pagination |
|||
:current-page="formInline.page" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="formInline.pageSize" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="shopTotal" |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
/> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="saveIdList">确 定</el-button> |
|||
<el-button @click="closeSelect">取 消</el-button> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
<!-- 智能添加弹框 --> |
|||
<el-dialog |
|||
title="智能添加商品" |
|||
:visible.sync="isIntelligentAdd" |
|||
width="50%" |
|||
top="50px" |
|||
class="group-dialog" |
|||
:close-on-click-modal="false" |
|||
:modal-append-to-body="false" |
|||
:modal="false" |
|||
> |
|||
<div class="znAddBox"> |
|||
<div class="conditionBox"> |
|||
<span class="anAddTit">满足条件</span> |
|||
<el-radio v-model="condition" label="1">全部满足</el-radio> |
|||
<el-radio v-model="condition" label="2">任意满足</el-radio> |
|||
</div> |
|||
<div class="screenBox"> |
|||
<span class="anAddTit">筛选条件</span> |
|||
<div class="crowdOptions"> |
|||
<div v-for="(item, index) of selectConditions" :key="item.type" class="condition"> |
|||
<div class="flexBox"> |
|||
<div class="rightInfo"> |
|||
<el-select v-model="item.type" placeholder="请选择" @change="changeType(item, index)"> |
|||
<el-option |
|||
v-for="typeItem in options" |
|||
v-show="!types.includes(typeItem.type)" |
|||
:key="typeItem.type" |
|||
:label="typeItem.name" |
|||
:value="typeItem.type" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
<div class="purchase"> |
|||
<el-select v-model="item.calculation" placeholder="请选择"> |
|||
<el-option |
|||
v-for="calculationItem in calculationList" |
|||
:key="calculationItem.value" |
|||
:label="calculationItem.label" |
|||
:value="calculationItem.value" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
<div class="valueBox"> |
|||
<el-input v-model="item.number" maxlength="9" /> |
|||
</div> |
|||
<div v-if="selectConditions.length !== 1" class="deleteIcon" @click="deleteOptions(item, index)"><i class="el-icon-remove" /></div> |
|||
</div> |
|||
</div> |
|||
<div v-if="groupData.conditions.length !== 4" class="addCondition" @click="addCondition"> |
|||
<i class="el-icon-circle-plus" /> |
|||
<span>添加筛选条件</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="fenye"> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="saveOptions">确 定</el-button> |
|||
<el-button @click="closeOptions">取 消</el-button> |
|||
</span> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
function GroupData() { |
|||
this.condition = null // 满足条件 1-全部满足 2-任意满足 |
|||
this.conditions = [ // 筛选条件数组 |
|||
// { |
|||
// calculation: 1, // 运算符 1-大于 2-等于 3-小于 |
|||
// ids: [], // 已满足部分条件的商品id数组 |
|||
// number: null, // 数值 |
|||
// type: 1 // 类型 1-库存 2-价格 3-重量 4-销量 |
|||
// } |
|||
] |
|||
this.groupDescribe = '' // 分组描述 |
|||
this.groupImage = '' // 分组封面图片地址 |
|||
this.groupName = '' // 分组名称 |
|||
this.ids = [] // 商品id数组 |
|||
this.shopGroupId = null // 商品分组id |
|||
} |
|||
import { commodityListAdd, commodityListUpdate, getGroupList, commodityListGetById } from '@/api/commodity' |
|||
import { getBusinessId } from '@/utils/auth' |
|||
export default { |
|||
name: 'CommodityGroup', |
|||
props: { |
|||
groupId: { |
|||
type: Number, |
|||
default: 0 |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
formInline: { |
|||
maxPrice: null, // 价格最大值 |
|||
maxStock: null, // 库存数量最大值 |
|||
minPrice: null, // 价格最小值 |
|||
minStock: null, // 库存数量最小值 |
|||
page: 1, // 当前页 |
|||
pageSize: 10, // 每页记录数 |
|||
search: '' // 搜索字段 |
|||
}, |
|||
groupData: new GroupData(), |
|||
isShowManualAdd: false, // 手动添加弹窗 |
|||
isIntelligentAdd: false, // 自动添加弹窗 |
|||
shopListData: [], |
|||
shopTotal: 1, |
|||
tableData: [], |
|||
multipleSelection: [], |
|||
// 智能添加 |
|||
condition: '1', |
|||
types: [1], |
|||
options: [ |
|||
{ |
|||
type: 1, |
|||
name: '库存' |
|||
}, |
|||
{ |
|||
type: 2, |
|||
name: '价格' |
|||
}, |
|||
{ |
|||
type: 3, |
|||
name: '重量' |
|||
}, |
|||
{ |
|||
type: 4, |
|||
name: '销量' |
|||
} |
|||
], |
|||
calculationList: [ |
|||
{ |
|||
label: '大于', |
|||
value: 1 |
|||
}, |
|||
{ |
|||
label: '等于', |
|||
value: 2 |
|||
}, |
|||
{ |
|||
label: '小于', |
|||
value: 3 |
|||
} |
|||
], |
|||
groupBuyRules: { |
|||
groupName: [ |
|||
{ required: true, message: '请输入分组名称', trigger: 'blur' } |
|||
] |
|||
}, |
|||
products: [], // 确定已选商品 |
|||
productsPage: 1, |
|||
productsPageSize: 5, |
|||
selectConditions: [], // 当前选择筛选条件 |
|||
// 分组选择 |
|||
selectGroup: '1', |
|||
// 已选智能筛选条件 |
|||
intelData: [] |
|||
} |
|||
}, |
|||
watch: { |
|||
groupId: { |
|||
handler(nVal, oVal) { |
|||
if (!nVal) { |
|||
this.groupData = new GroupData() |
|||
this.products = [] |
|||
this.multipleSelection = [] |
|||
} else { |
|||
this.groupData.shopGroupId = nVal |
|||
this.getDetailFn() |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
console.log(this.groupId) |
|||
// if (this.$route.query.shopGroupId) { |
|||
// this.groupData.shopGroupId = this.$route.query.shopGroupId |
|||
// this.getDetailFn() |
|||
// } |
|||
if (this.groupId) { |
|||
this.groupData.shopGroupId = this.groupId |
|||
this.getDetailFn() |
|||
} |
|||
this.getAll(this.formInline) |
|||
}, |
|||
methods: { |
|||
// 初始化查询所有数据 |
|||
async getAll(formInline) { |
|||
const res = await getGroupList(formInline) |
|||
this.shopTotal = res.data.total |
|||
this.shopListData = res.data.list |
|||
}, |
|||
// 获取详情 |
|||
getDetailFn() { |
|||
commodityListGetById({ shopGroupId: this.groupData.shopGroupId }).then(res => { |
|||
if (res.code === '') { |
|||
this.groupData.groupDescribe = res.data.groupDescribe |
|||
this.groupData.groupName = res.data.groupName |
|||
this.multipleSelection = res.data.products |
|||
this.products = res.data.products |
|||
const shopList = [] |
|||
this.products.forEach(i => { |
|||
shopList.push(i.productId) |
|||
}) |
|||
this.groupData.ids = shopList |
|||
this.groupData.shopGroupId = res.data.shopGroupId |
|||
} else { |
|||
this.$message({ |
|||
message: res.message, |
|||
type: 'error' |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
manualAdd() { |
|||
this.selectGroup = '1' |
|||
// this.groupData.conditions = [] |
|||
// this.groupData.condition = null |
|||
this.isShowManualAdd = true |
|||
}, |
|||
// 商品表格多选 |
|||
handleSelectionChange(val) { |
|||
this.multipleSelection = val |
|||
this.groupData.ids = [] |
|||
}, |
|||
// 分页大小 |
|||
handleSizeChange(val) { |
|||
this.formInline.pageSize = val |
|||
this.getAll(this.formInline) |
|||
}, |
|||
// 分页 |
|||
handleCurrentChange(val) { |
|||
this.formInline.page = val |
|||
this.getAll(this.formInline) |
|||
}, |
|||
intelligentAdd() { |
|||
this.selectGroup = '2' |
|||
if (this.selectConditions.length === 0) { |
|||
this.selectConditions.push({ |
|||
calculation: 1, // 运算符 1-大于 2-等于 3-小于 |
|||
ids: [], // 已满足部分条件的商品id数组 |
|||
number: null, // 数值 |
|||
type: 1 // 类型 1-库存 2-价格 3-重量 4-销量 |
|||
}) |
|||
} |
|||
// this.groupData.ids = [] |
|||
// if (this.multipleSelection.length) { |
|||
// this.$refs.multipleTable.clearSelection() // 清空已手动添加的商品 |
|||
// } |
|||
// this.products = [] |
|||
// this.multipleSelection = [] |
|||
this.groupData.condition = 1 |
|||
this.isIntelligentAdd = true |
|||
}, |
|||
// 保存手动选择商品 |
|||
saveIdList() { |
|||
if (this.multipleSelection.length === 0) { |
|||
this.groupData.ids = [] |
|||
} |
|||
const shopList = [] |
|||
this.products = this.multipleSelection |
|||
this.multipleSelection.forEach(i => { |
|||
shopList.push(i.productId) |
|||
}) |
|||
this.groupData.ids = shopList |
|||
this.isShowManualAdd = false |
|||
}, |
|||
// 取消手动选择商品 |
|||
closeSelect() { |
|||
this.isShowManualAdd = false |
|||
}, |
|||
// 更改当前选项 |
|||
changeType(item, index) { |
|||
var crowdData = this.groupData.conditions |
|||
this.types = [] |
|||
crowdData.forEach(i => { |
|||
this.types.push(i.type) |
|||
}) |
|||
if (item.type === 9 || item.type === 10) { |
|||
this.groupData.conditions[index].calculation = 1 |
|||
} |
|||
}, |
|||
// 删除当前筛选 |
|||
deleteOptions(item, index) { |
|||
this.types.splice(index, 1) |
|||
this.selectConditions.splice(index, 1) |
|||
}, |
|||
// 保存智能匹配配置 |
|||
saveOptions() { |
|||
var self = this |
|||
var groupCond = self.selectConditions |
|||
var options = self.options |
|||
for (let i = 0; i < groupCond.length; i++) { |
|||
if (groupCond[i].number === null || groupCond[i].number === '') { |
|||
for (let j = 0; j < options.length; j++) { |
|||
if (groupCond[i].type === options[j].type) { |
|||
self.$message({ |
|||
message: `选项为${options[j].name}的内容不能为空!`, |
|||
type: 'warning' |
|||
}) |
|||
return false |
|||
} |
|||
} |
|||
} |
|||
} |
|||
self.groupData.conditions = self.deepClone(self.selectConditions) |
|||
self.isIntelligentAdd = false |
|||
}, |
|||
// 保存提交 |
|||
addGroup() { |
|||
var self = this |
|||
if (self.groupData.groupName === '') { |
|||
self.$message({ |
|||
message: '分组名称不能为空', |
|||
type: 'warning' |
|||
}) |
|||
return false |
|||
} |
|||
// if (self.selectGroup === '1') { |
|||
// if (self.groupData.ids.length === 0) { |
|||
// self.$message({ |
|||
// message: '请选择手动添加分组商品', |
|||
// type: 'warning' |
|||
// }) |
|||
// return false |
|||
// } |
|||
// } |
|||
// if (self.selectGroup === '2') { |
|||
// if (self.groupData.conditions.length === 0) { |
|||
// self.$message({ |
|||
// message: '请添加智能筛选条件', |
|||
// type: 'warning' |
|||
// }) |
|||
// } |
|||
// } |
|||
if (self.selectGroup === '1') { |
|||
self.groupData.conditions = [] |
|||
self.groupData.condition = null |
|||
} else { |
|||
self.groupData.ids = [] |
|||
self.products = [] |
|||
self.multipleSelection = [] |
|||
} |
|||
if (self.groupData.shopGroupId !== '' && self.groupData.shopGroupId !== null) { |
|||
// 修改人群 |
|||
commodityListUpdate(self.groupData).then(res => { |
|||
if (res.code === '') { |
|||
this.closeAddGroup() |
|||
self.$message({ |
|||
message: '修改成功', |
|||
type: 'success' |
|||
}) |
|||
self.$emit('reload') |
|||
} else { |
|||
self.$message({ |
|||
message: res.message, |
|||
type: 'error' |
|||
}) |
|||
} |
|||
}) |
|||
} else { |
|||
// 新增人群 |
|||
commodityListAdd(self.groupData, {project:'0'}).then(res => { |
|||
if (res.code === '') { |
|||
this.closeAddGroup() |
|||
self.$message({ |
|||
message: '添加成功', |
|||
type: 'success' |
|||
}) |
|||
self.$emit('reload') |
|||
} else { |
|||
self.$message({ |
|||
message: res.message, |
|||
type: 'error' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
// 取消提交 |
|||
closeAddGroup() { |
|||
this.$emit('cancel') |
|||
}, |
|||
// 取消智能匹配配置 |
|||
closeOptions() { |
|||
this.isIntelligentAdd = false |
|||
this.selectConditions = [] |
|||
}, |
|||
// 添加筛选 |
|||
addCondition() { |
|||
for (let i = 1; i <= this.options.length; i++) { |
|||
if (!this.types.includes(i)) { |
|||
this.selectConditions.push( |
|||
{ |
|||
calculation: 1, // 运算符 1-大于 2-等于 3-小于 |
|||
ids: [], // 已满足部分条件的商品id数组 |
|||
number: null, // 数值 |
|||
type: i // 类型 1-库存 2-价格 3-重量 4-销量 |
|||
} |
|||
) |
|||
this.types.push(i) |
|||
break |
|||
} |
|||
} |
|||
}, |
|||
// 手动查询商品 |
|||
search() { |
|||
this.getAll(this.formInline) |
|||
}, |
|||
clearData() { |
|||
this.formInline = { |
|||
maxPrice: null, // 价格最大值 |
|||
maxStock: null, // 库存数量最大值 |
|||
minPrice: null, // 价格最小值 |
|||
minStock: null, // 库存数量最小值 |
|||
page: 1, // 当前页 |
|||
pageSize: 10, // 每页记录数 |
|||
search: '' // 搜索字段 |
|||
} |
|||
this.getAll(this.formInline) |
|||
}, |
|||
deepClone(obj) { |
|||
var _obj = JSON.stringify(obj) |
|||
var objClone = JSON.parse(_obj) |
|||
return objClone |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.commodityGroup { |
|||
.commodityBox { |
|||
background: #FFFFFF; |
|||
.groupTit { |
|||
font-size: 22px; |
|||
color: #333333; |
|||
font-weight: 500; |
|||
} |
|||
.newGroupBox { |
|||
width: 800px; |
|||
margin: 20px; |
|||
.btnBox { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-left: 10px; |
|||
span { |
|||
display: block; |
|||
width: 80px; |
|||
height: 35px; |
|||
line-height: 35px; |
|||
background: #409EFF; |
|||
color: #FFFFFF; |
|||
font-size: 12px; |
|||
text-align: center; |
|||
border-radius: 4px; |
|||
margin-right: 20px; |
|||
cursor: pointer; |
|||
position: relative; |
|||
} |
|||
i { |
|||
display: block; |
|||
font-style: normal; |
|||
font-size: 12px; |
|||
color: #409EFF; |
|||
width: 30px; |
|||
height: 30px; |
|||
text-align: center; |
|||
line-height: 30px; |
|||
border: 1px solid #409EFF; |
|||
border-radius: 50%; |
|||
position: absolute; |
|||
right: -10px; |
|||
top: -10px; |
|||
z-index: 999; |
|||
background: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.submitBox { |
|||
width: 100%; |
|||
margin: 20px 0; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
} |
|||
.isSelectList { |
|||
h3 { |
|||
font-size: 14px; |
|||
color: #666666; |
|||
font-weight: 500; |
|||
margin: 30px 0 20px 0; |
|||
} |
|||
} |
|||
} |
|||
.znAddBox { |
|||
padding: 30px 30px 0 30px; |
|||
.screenBox { |
|||
display: flex; |
|||
margin-top: 30px; |
|||
.crowdOptions { |
|||
margin-left: 20px; |
|||
} |
|||
} |
|||
.condition { |
|||
margin-bottom: 20px; |
|||
p { |
|||
font-size: 14px; |
|||
color: #666666; |
|||
margin-left: 100px; |
|||
} |
|||
.flexBox { |
|||
display: flex; |
|||
align-items: center; |
|||
.leftTit { |
|||
width: 100px; |
|||
text-align: right; |
|||
font-size: 14px; |
|||
color: #606260; |
|||
font-weight: 700; |
|||
padding-right: 12px; |
|||
} |
|||
.purchase { |
|||
margin-left: 30px; |
|||
} |
|||
.tagList { |
|||
margin-left: 30px; |
|||
} |
|||
.valueBox { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-left: 30px; |
|||
} |
|||
.deleteIcon { |
|||
margin-left: 30px; |
|||
.el-icon-remove:before { |
|||
color: #ff5c5c; |
|||
font-size: 22px; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.addCondition { |
|||
margin: 50px 0 0 0; |
|||
display: flex; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
width: 160px; |
|||
.el-icon-circle-plus:before { |
|||
font-size: 24px; |
|||
color: #999999; |
|||
} |
|||
span { |
|||
margin-left: 10px; |
|||
} |
|||
} |
|||
.intelDataBox { |
|||
width: 200px; |
|||
margin: 60px 0 0 150px; |
|||
.intelTit { |
|||
font-size: 14px; |
|||
color: #666666; |
|||
font-weight: 500; |
|||
} |
|||
.intelList { |
|||
margin-top: 20px; |
|||
border: 1px solid #eeeeee; |
|||
.intelItem { |
|||
display: flex; |
|||
align-items: center; |
|||
background: #fdfdfd; |
|||
height: 35px; |
|||
line-height: 35px; |
|||
border-bottom: 1px solid #eeeeee; |
|||
padding-left: 20px; |
|||
span { |
|||
font-size: 13px; |
|||
color: #666666; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<style scoped> |
|||
.newGroupBox /deep/ .formBox { |
|||
width: 500px; |
|||
} |
|||
.fenye { |
|||
margin-top: 30px; |
|||
} |
|||
.fenye /deep/ .dialog-footer { |
|||
margin: 30px auto 0 auto; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
.znAddBox /deep/ .conditionBox { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.znAddBox /deep/ .conditionBox .anAddTit { |
|||
margin-right: 20px; |
|||
} |
|||
.tagCustomer /deep/ .el-form-item__content { |
|||
display: flex; |
|||
width: 260px; |
|||
} |
|||
.tagCustomer { |
|||
display: flex !important; |
|||
} |
|||
.tagCustomer /deep/ .el-form-item__content span { |
|||
margin: 0 5px; |
|||
} |
|||
.formSearch /deep/ .el-form { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
} |
|||
.btnBox /deep/ .el-radio { |
|||
margin-right: 8px; |
|||
} |
|||
.btnBox /deep/ .el-radio__label { |
|||
display: none; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,312 @@ |
|||
<!-- 商品分组 --> |
|||
<template> |
|||
<div> |
|||
<div class="pending"> |
|||
<!-- 搜索 --> |
|||
<div class="formSearch"> |
|||
<el-form :inline="true" :model="formInline" class="demo-form-inline"> |
|||
<el-form-item label="分组名称"> |
|||
<el-input v-model="formInline.search" maxlength="20" placeholder="请输入分组名称" /> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" plain @click="search">查询</el-button> |
|||
<el-button type="primary" plain @click="addNewGroup">新增分组</el-button> |
|||
<!-- <span v-for="(item,index) in btnList" :key="index" class="promissStyle"> |
|||
<el-button type="success" plain @click="btnClick(item)">{{ item.permissionName }}</el-button> |
|||
</span> --> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<!-- 表格 --> |
|||
<div class="tableBox"> |
|||
<el-table |
|||
ref="multipleTable" |
|||
:data="tableData" |
|||
border |
|||
:header-cell-style="{ background: '#EEF3FF', color: '#333333' }" |
|||
tooltip-effect="dark" |
|||
style="width: 100%" |
|||
> |
|||
<el-table-column label="分组名称" width="300"> |
|||
<template slot-scope="scope">{{ scope.row.groupName }}</template> |
|||
</el-table-column> |
|||
<el-table-column label="分组描述" width="300"> |
|||
<template slot-scope="scope">{{ scope.row.groupDescribe }}</template> |
|||
</el-table-column> |
|||
<el-table-column label="商品数量" width="150"> |
|||
<template slot-scope="scope">{{ scope.row.number }}</template> |
|||
</el-table-column> |
|||
<el-table-column prop="updateTime" label="修改时间" width="220" /> |
|||
<el-table-column label="操作" show-overflow-tooltip> |
|||
<template slot-scope="scope"> |
|||
<div class="btnList"> |
|||
<el-button type="text" @click="edit(scope.row)">编辑</el-button> |
|||
<!-- <el-button type="text" @click="edit(scope.row)">详情</el-button>--> |
|||
<el-button type="text" @click="del(scope.row)">删除</el-button> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="fenye"> |
|||
<el-pagination |
|||
:current-page="formInline.page" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="10" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 新建分组弹框 --> |
|||
<el-dialog |
|||
:close-on-click-modal="false" |
|||
:title="title" |
|||
:type="type" |
|||
:visible.sync="isVisible" |
|||
width="45%" |
|||
top="50px" |
|||
class="group-dialog" |
|||
> |
|||
<el-form :model="sizeForm"> |
|||
<el-form-item label="分组封面" prop="fileLength" /> |
|||
<div class="upload-wrap"> |
|||
<el-upload |
|||
ref="upload" |
|||
:headers="headers" |
|||
:action="action" |
|||
:on-success="handleImageSuccess" |
|||
list-type="picture-card" |
|||
:limit="1" |
|||
:file-list="imgList" |
|||
> |
|||
<i class="el-icon-plus" /> |
|||
</el-upload> |
|||
</div> |
|||
|
|||
<el-form-item label="分组名称"> |
|||
<el-input v-model="params.groupName" maxlength="20" /> |
|||
</el-form-item> |
|||
<el-form-item size="large" class="btn-wrap"> |
|||
<el-button type="primary" @click="onSubmit">确定</el-button> |
|||
<el-button @click="isVisible = false">取消</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-dialog> |
|||
|
|||
<el-dialog |
|||
title="活动报名" |
|||
:visible.sync="commidyVisible" |
|||
width="900px" |
|||
center |
|||
:close-on-click-modal="false" |
|||
> |
|||
<CommGroup |
|||
:group-id="shopGroupId" |
|||
@cancel="commidyVisible = false" |
|||
@reload="search" |
|||
/> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import CommGroup from '@/views/commodity/commodityList/commodityGroup.vue' |
|||
import { |
|||
commodityListGetAll, |
|||
commodityListDelete, |
|||
commodityListUpdate, |
|||
commodityListAdd |
|||
} from '@/api/commodity' |
|||
import { getBtnList, getToken, getBusinessId } from '@/utils/auth' |
|||
import { uploadUrl } from '@/utils/request' |
|||
export default { |
|||
components: { |
|||
CommGroup |
|||
}, |
|||
data() { |
|||
// 这里存放数据 |
|||
return { |
|||
btnList: '', |
|||
activeName: 'first', |
|||
formInline: { |
|||
search: '', |
|||
page: 1, |
|||
pageSize: 10, |
|||
}, |
|||
params: { |
|||
groupImage: '', |
|||
groupName: '', |
|||
}, |
|||
total: 1, |
|||
tableData: [], |
|||
isVisible: false, |
|||
type: 'add', |
|||
sizeForm: {}, |
|||
imgList: [], |
|||
commidyVisible: false, |
|||
shopGroupId: 0, |
|||
action: uploadUrl, |
|||
headers: { |
|||
'Authorization-business': getToken() |
|||
}, |
|||
} |
|||
}, |
|||
// 监听属性 类似于data概念 |
|||
computed: { |
|||
title() { |
|||
return this.type === 'add' ? '新建分组' : '查看分组' |
|||
} |
|||
}, |
|||
// 监控data中的数据变化 |
|||
watch: {}, |
|||
// 生命周期 - 创建完成（可以访问当前this实例） |
|||
created() {}, |
|||
// 生命周期 - 挂载完成（可以访问DOM元素） |
|||
mounted() { |
|||
this.getAll(this.formInline) |
|||
this.btnList = getBtnList() |
|||
}, |
|||
// 方法集合 |
|||
methods: { |
|||
btnClick(id) { |
|||
console.log(id) |
|||
if (id.permissionName === '新增分组') { |
|||
this.add() |
|||
} |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.formInline.pageSize = val |
|||
this.getAll(this.formInline) |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.formInline.page = val |
|||
this.getAll(this.formInline) |
|||
}, |
|||
handleImageSuccess(response) { |
|||
const url = response.data.url |
|||
this.params.groupImage = url |
|||
}, |
|||
// 查询 |
|||
search() { |
|||
this.total = 1 |
|||
this.formInline.page = 1 |
|||
this.getAll(this.formInline) |
|||
}, |
|||
// 新建分组 |
|||
add() { |
|||
this.type = 'add' |
|||
this.isVisible = true |
|||
this.params = { |
|||
groupImage: '', |
|||
groupName: '' |
|||
} |
|||
this.$refs.upload.clearFiles() |
|||
}, |
|||
// 编辑分组 |
|||
edit(row) { |
|||
this.commidyVisible = true |
|||
this.shopGroupId = row.shopGroupId |
|||
}, |
|||
async onSubmit() { |
|||
if (this.type === 'add') { |
|||
this.addGroup() |
|||
} else { |
|||
this.updateGroup() |
|||
} |
|||
}, |
|||
async addGroup() { |
|||
if (this.params.groupName === '') { |
|||
this.$message.error('请输入分组名称') |
|||
return |
|||
} |
|||
const res = await commodityListAdd(this.params, {project:'0'}) |
|||
if (res.code === '') { |
|||
this.isVisible = false |
|||
this.$message({ |
|||
message: '新增成功', |
|||
type: 'success' |
|||
}) |
|||
this.getAll(this.formInline) |
|||
} |
|||
}, |
|||
async updateGroup() { |
|||
const res = await commodityListUpdate(this.params) |
|||
if (res.code === '') { |
|||
this.isVisible = false |
|||
this.$message({ |
|||
message: '修改成功', |
|||
type: 'success' |
|||
}) |
|||
this.getAll(this.formInline) |
|||
} |
|||
}, |
|||
// 删除分组 |
|||
del(row) { |
|||
this.$confirm('选中数据将被永久删除, 是否继续？', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}) |
|||
.then(() => { |
|||
commodityListDelete({ shopGroupId: row.shopGroupId }).then(res => { |
|||
if (res.code === '') { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '删除成功!' |
|||
}) |
|||
this.getAll(this.formInline) |
|||
} |
|||
}) |
|||
}) |
|||
.catch(() => {}) |
|||
}, |
|||
// 初始化查询所有数据 |
|||
async getAll(formInline) { |
|||
const res = await commodityListGetAll(formInline, {project:'0'}) |
|||
this.total = res.data.total |
|||
this.tableData = res.data.list |
|||
}, |
|||
// 1.4 |
|||
// 新增分组 |
|||
addNewGroup() { |
|||
this.shopGroupId = 0 |
|||
this.commidyVisible = true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang='scss' scoped> |
|||
//@import url(); 引入公共css类 |
|||
@import url("../../../styles/elDialog.scss"); |
|||
.pending { |
|||
padding: 30px; |
|||
background: #FFFFFF; |
|||
border-radius: 10px; |
|||
} |
|||
.group-dialog { |
|||
.btn-wrap { |
|||
text-align: center; |
|||
} |
|||
.upload-wrap { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
.image-wrap { |
|||
width: 120px; |
|||
height: 120px; |
|||
line-height: 120px; |
|||
margin-right: 15px; |
|||
margin-bottom: 15px; |
|||
text-align: center; |
|||
border: 1px dashed #d9d9d9; |
|||
img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,187 +0,0 @@ |
|||
<!-- --> |
|||
<template> |
|||
<div> |
|||
<!-- 卡片栏 --> |
|||
<div class="cardStyle"> |
|||
<el-card class="box-card"> |
|||
<div slot="header" class="clearfix"> |
|||
<span class="card_span">商家设置</span> |
|||
<el-button class="btnShop" type="text" @click="save">保存</el-button> |
|||
<el-button |
|||
class="resBtn" |
|||
type="text" |
|||
@click=" |
|||
{ |
|||
} |
|||
" |
|||
>取消</el-button> |
|||
</div> |
|||
<!-- 详情 --> |
|||
<div class="shopDetail"> |
|||
<div class="shopDetail_l"> |
|||
<div class="shopMsg">商家信息</div> |
|||
<div class="logo">商家logo</div> |
|||
<div class="shopLogon"> |
|||
<!-- 上传图片 --> |
|||
<div class="uploadWidth"> |
|||
<el-upload |
|||
:headers="headers" |
|||
:action="upload" |
|||
list-type="picture-card" |
|||
:on-preview="handlePictureCardPreview" |
|||
:on-remove="handleRemove" |
|||
> |
|||
<i class="el-icon-plus" /> |
|||
</el-upload> |
|||
<el-dialog :visible.sync="dialogVisible"> |
|||
<img width="100%" :src="dialogImageUrl" alt> |
|||
</el-dialog> |
|||
</div> |
|||
</div> |
|||
<div class="common"> |
|||
<div class="span_1">商家名称：</div> |
|||
<el-input v-model="shopObj.name" maxlength="20" placeholder="请输入商家名称" /> |
|||
</div> |
|||
<div class="common"> |
|||
<div class="span_1">发货地址：</div> |
|||
<el-input v-model="shopObj.address" maxlength="60" placeholder="请输入发货地址" /> |
|||
</div> |
|||
<div class="common"> |
|||
<div class="span_1">商家简介：</div> |
|||
<el-input v-model="shopObj.det" maxlength="50" placeholder="请输入商家简介" /> |
|||
</div> |
|||
<div class="common"> |
|||
<div class="span_1">注册手机号：</div> |
|||
<el-input v-model="shopObj.phone" maxlength="11" placeholder="请输入注册手机号" /> |
|||
</div> |
|||
</div> |
|||
<div class="shopDetail_r"> |
|||
<div class="shopMsg">退货地址</div> |
|||
<div class="common"> |
|||
<div class="span_1">退货地址：</div> |
|||
<el-input v-model="shopObj.phone" maxlength="60" placeholder="请输入退货地址" /> |
|||
</div> |
|||
<div class="common"> |
|||
<div class="span_1">联系人</div> |
|||
<el-input v-model="shopObj.phone" maxlength="20" placeholder="请输入联系人" /> |
|||
</div> |
|||
<div class="common"> |
|||
<div class="span_1">联系电话</div> |
|||
<el-input v-model="shopObj.phone" maxlength="11" placeholder="请输入联系电话" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { uploadUrl } from '@/utils/request' |
|||
import { getToken } from '@/utils/auth' |
|||
export default { |
|||
components: {}, |
|||
data() { |
|||
// 这里存放数据 |
|||
return { |
|||
dialogImageUrl: '', |
|||
upload: uploadUrl, |
|||
headers: { |
|||
'Authorization-business': getToken() |
|||
}, |
|||
dialogVisible: false, |
|||
shopObj: { |
|||
name: '', |
|||
address: '', |
|||
det: '', |
|||
phone: '' |
|||
} |
|||
} |
|||
}, |
|||
// 方法集合 |
|||
methods: { |
|||
handleRemove(file, fileList) { |
|||
console.log(file, fileList) |
|||
}, |
|||
handlePictureCardPreview(file) { |
|||
console.log(file) |
|||
this.dialogImageUrl = file.data.url |
|||
this.dialogVisible = true |
|||
}, |
|||
// 保存 |
|||
save() { |
|||
this.$router.push({ name: 'editShopSys', params: { id: '1' }}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang='scss' scoped> |
|||
//@import url(); 引入公共css类 |
|||
@import url("../../../styles/elDialog.scss"); |
|||
.shopDetail { |
|||
display: flex; |
|||
margin: 50px 50px; |
|||
} |
|||
.shopDetail_l { |
|||
width: 49%; |
|||
} |
|||
.shopDetail_r { |
|||
width: 49%; |
|||
} |
|||
.resBtn { |
|||
float: right; |
|||
width: 100px; |
|||
height: 48px; |
|||
background: #ffffff; |
|||
border-radius: 4px; |
|||
color: #333333; |
|||
border: 1px solid #e0e5eb; |
|||
margin-right: 20px; |
|||
} |
|||
.btnShop { |
|||
float: right; |
|||
width: 100px; |
|||
height: 48px; |
|||
background: #409eff; |
|||
border-radius: 4px; |
|||
color: #ffffff; |
|||
} |
|||
.common { |
|||
padding: 10px; |
|||
} |
|||
.span_f { |
|||
display: flex; |
|||
} |
|||
.card_span { |
|||
font-size: 24px; |
|||
color: #333333; |
|||
} |
|||
.shopMsg { |
|||
font-size: 24px; |
|||
color: #333333; |
|||
padding: 10px; |
|||
} |
|||
.logo { |
|||
font-size: 16px; |
|||
color: #333333; |
|||
padding: 10px; |
|||
} |
|||
.shopLogon { |
|||
padding: 10px; |
|||
img { |
|||
width: 100px; |
|||
height: 100px; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
.span_1 { |
|||
font-size: 16px; |
|||
color: #333333; |
|||
margin-bottom: 20px; |
|||
} |
|||
.span_2 { |
|||
font-size: 16px; |
|||
color: #666666; |
|||
width: 500px; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue