panxiaohe
2 years ago
7 changed files with 1005 additions and 1 deletions
-
94src/api/shopSys.js
-
2src/views/commodity/commoditySystem/addCommodity.vue
-
52src/views/commodity/commoditySystem/addComponent.vue
-
187src/views/system/shopCrossDetail/edit.vue
-
136src/views/system/shopCrossDetail/index.vue
-
318src/views/system/storehouse/Edit.vue
-
217src/views/system/storehouse/index.vue
@ -0,0 +1,187 @@ |
|||||
|
<!-- --> |
||||
|
<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" placeholder="请输入店铺名称" /> |
||||
|
</div> |
||||
|
<div class="common"> |
||||
|
<div class="span_1">发货地址：</div> |
||||
|
<el-input v-model="shopObj.address" placeholder="请输入发货地址" /> |
||||
|
</div> |
||||
|
<div class="common"> |
||||
|
<div class="span_1">店铺简介：</div> |
||||
|
<el-input v-model="shopObj.det" placeholder="请输入店铺简介" /> |
||||
|
</div> |
||||
|
<div class="common"> |
||||
|
<div class="span_1">注册手机号：</div> |
||||
|
<el-input v-model="shopObj.phone" 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" placeholder="请输入退货地址" /> |
||||
|
</div> |
||||
|
<div class="common"> |
||||
|
<div class="span_1">联系人</div> |
||||
|
<el-input v-model="shopObj.phone" placeholder="请输入联系人" /> |
||||
|
</div> |
||||
|
<div class="common"> |
||||
|
<div class="span_1">联系电话</div> |
||||
|
<el-input v-model="shopObj.phone" 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> |
||||
@ -0,0 +1,136 @@ |
|||||
|
<template> |
||||
|
<div class="setting-shop-page"> |
||||
|
<el-form ref="ruleForm" :model="crossDetail" :rules="rules" label-width="150px"> |
||||
|
<div class="h5"> |
||||
|
<div class="title">店铺跨境信息</div> |
||||
|
<el-button |
||||
|
v-if="!disabled1" |
||||
|
type="text" |
||||
|
@click="editDisabled1()" |
||||
|
>取消</el-button> |
||||
|
<el-button v-else type="text" @click="editDisabled1()">编辑</el-button> |
||||
|
<el-button |
||||
|
v-if="!disabled1" |
||||
|
type="text" |
||||
|
@click="updateCross('ruleForm')" |
||||
|
>保存</el-button> |
||||
|
</div> |
||||
|
<div class="shop-details"> |
||||
|
<el-form-item label="电商平台名称" prop="ebpname"> |
||||
|
<el-input v-model="crossDetail.ebpname" :disabled="disabled1" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="电商平台代码" prop="ebpcode"> |
||||
|
<el-input v-model="crossDetail.ebpcode" :disabled="disabled1" /> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { shopcrossdetailGetAll, shopcrossdetailAdd, shopcrossdetailUpdate } from '@/api/shopSys'; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
disabled1: true, |
||||
|
crossDetail: { |
||||
|
crossDetailId:'', |
||||
|
ebpname:'', |
||||
|
ebpcode:'' |
||||
|
}, |
||||
|
rules: { |
||||
|
ebpname: [ |
||||
|
{ required: true, message: '请输入电商平台名称', trigger: 'blur' }, |
||||
|
{ min:1, max:100, message: '长度不超过100个字符', trigger: 'blur'} |
||||
|
], |
||||
|
ebpcode: [ |
||||
|
{ required: true, message: '请输入电商平台代码', trigger: 'blur' }, |
||||
|
{ min:1, max:10, message: '长度不超过10个字符', trigger: 'blur'} |
||||
|
], |
||||
|
} |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.getCrossDetails(); |
||||
|
}, |
||||
|
methods: { |
||||
|
async getCrossDetails() { |
||||
|
const res = await shopcrossdetailGetAll({ page: 1, |
||||
|
pageSize: 10}); |
||||
|
if (res.code === '' && res.data && res.data.total > 0) { |
||||
|
this.crossDetail = res.data.list[0]; |
||||
|
} |
||||
|
}, |
||||
|
// 编辑取消 |
||||
|
editDisabled1() { |
||||
|
this.disabled1 = !this.disabled1; |
||||
|
}, |
||||
|
async updateCross(ruleForm) { |
||||
|
this.$refs[ruleForm].validate(valid => { |
||||
|
if (valid) { |
||||
|
if(this.crossDetail.crossDetailId && this.crossDetail.crossDetailId.length > 0){ |
||||
|
shopcrossdetailUpdate(this.crossDetail).then(res => { |
||||
|
if (res.code === '') { |
||||
|
this.getCrossDetails() |
||||
|
this.disabled1 = true; |
||||
|
this.$message({ |
||||
|
message: '修改成功', |
||||
|
type: 'success', |
||||
|
}); |
||||
|
} |
||||
|
}) |
||||
|
}else { |
||||
|
shopcrossdetailAdd(this.crossDetail).then(res => { |
||||
|
if (res.code === '') { |
||||
|
this.getCrossDetails() |
||||
|
this.disabled1 = true; |
||||
|
this.$message({ |
||||
|
message: '修改成功', |
||||
|
type: 'success', |
||||
|
}); |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
@import url("../../../styles/elDialog.scss"); |
||||
|
.setting-shop-page { |
||||
|
margin-top: 20px; |
||||
|
min-height: calc(100% - 20px); |
||||
|
background-color: #ffffff; |
||||
|
padding: 15px 20px; |
||||
|
.h5 { |
||||
|
max-width: 1000px; |
||||
|
display: flex; |
||||
|
font-size: 20px; |
||||
|
margin: 20px auto; |
||||
|
padding-left: 10px; |
||||
|
padding-right: 200px; |
||||
|
|
||||
|
flex-wrap: 800; |
||||
|
.title { |
||||
|
flex: 1; |
||||
|
} |
||||
|
} |
||||
|
.shop-details { |
||||
|
max-width: 800px; |
||||
|
margin: auto; |
||||
|
.el-input, |
||||
|
.el-textarea { |
||||
|
width: 300px; |
||||
|
} |
||||
|
// 不能编辑样式 |
||||
|
.el-input.is-disabled .el-input__inner, |
||||
|
.el-textarea.is-disabled .el-textarea__inner { |
||||
|
cursor: inherit; |
||||
|
background-color: #f8f8f8; |
||||
|
border: 1px solid #f8f8f8; |
||||
|
color: #606266; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,318 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
:close-on-click-modal="false" |
||||
|
:title="title" |
||||
|
:type="type" |
||||
|
:visible.sync="isVisible" |
||||
|
:modal-append-to-body="false" |
||||
|
:center="true" |
||||
|
width="80%" |
||||
|
top="50px" |
||||
|
class="dialog-wrap" |
||||
|
> |
||||
|
<el-form class="dialog-from" :model="params" label-width="150px"> |
||||
|
<el-form-item label="仓库名称"> |
||||
|
<el-input |
||||
|
v-model="params.storehouseName" |
||||
|
maxlength="20" |
||||
|
:readonly="isDisabled" |
||||
|
onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="仓库类型"> |
||||
|
<el-radio-group v-model="params.type"> |
||||
|
<el-radio :disabled="isDisabled" :label="1">自营仓</el-radio> |
||||
|
<el-radio :disabled="isDisabled" :label="2">委外仓</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="仓库种类"> |
||||
|
<el-radio-group v-model="params.kind"> |
||||
|
<el-radio :disabled="isDisabled" :label="1">国内仓</el-radio> |
||||
|
<el-radio :disabled="isDisabled" :label="2">保税仓</el-radio> |
||||
|
<el-radio :disabled="isDisabled" :label="3">海外仓</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="订单金额限制" v-if="params.kind==2"> |
||||
|
<div class="form-item-row"> |
||||
|
<div class="el-row" style="margin-bottom: 10px;"> |
||||
|
订单只有一个商品时，订单金额(即订单实付金额)不超过 |
||||
|
<el-input |
||||
|
v-model="params.oneProductOrderPriceLimit" |
||||
|
maxlength="20" |
||||
|
:readonly="isDisabled" |
||||
|
onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')" |
||||
|
/>元 |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="form-item-row"> |
||||
|
<div class="el-row" style="margin-bottom: 10px;"> |
||||
|
订单包含多个商品时，订单金额(即订单实付金额)不超过 |
||||
|
<el-input |
||||
|
v-model="params.moreProductOrderPriceLimit" |
||||
|
maxlength="20" |
||||
|
:readonly="isDisabled" |
||||
|
onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')" |
||||
|
/>元 |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="订单商品数量限制" v-if="params.kind==2"> |
||||
|
<div class="form-item-row"> |
||||
|
<div class="el-row" style="margin-bottom: 10px;"> |
||||
|
订单中每个商品数量不超过 |
||||
|
<el-input |
||||
|
v-model="params.oneProductNumLimit" |
||||
|
maxlength="20" |
||||
|
:readonly="isDisabled" |
||||
|
onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')" |
||||
|
/>件 |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="form-item-row"> |
||||
|
<div class="el-row" style="margin-bottom: 10px;"> |
||||
|
订单中总商品数量不超过 |
||||
|
<el-input |
||||
|
v-model="params.moreProductNumLimit" |
||||
|
maxlength="20" |
||||
|
:readonly="isDisabled" |
||||
|
onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')" |
||||
|
/>件 |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="订单次数限制" v-if="params.kind==2"> |
||||
|
<div class="form-item-row"> |
||||
|
<div class="el-row" style="margin-bottom: 10px;"> |
||||
|
每个身份证每日下单次数不超过 |
||||
|
<el-input |
||||
|
v-model="params.orderNumberLimit" |
||||
|
maxlength="20" |
||||
|
:readonly="isDisabled" |
||||
|
onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')" |
||||
|
/>次 |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="是否收银台"> |
||||
|
<el-radio-group v-model="params.ifCashier"> |
||||
|
<el-radio :disabled="isDisabled" :label="1">是</el-radio> |
||||
|
<el-radio :disabled="isDisabled" :label="0">否</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="btn-wrap"> |
||||
|
<el-button type="primary" @click="onSubmit">确定</el-button> |
||||
|
<el-button @click="isVisible = false">取消</el-button> |
||||
|
</div> |
||||
|
<el-dialog |
||||
|
width="60%" |
||||
|
title="选择配送区域" |
||||
|
class="address-dialog" |
||||
|
:visible.sync="areaVisible" |
||||
|
append-to-body |
||||
|
> |
||||
|
<div class="area-dialog"> |
||||
|
<el-row> |
||||
|
<template v-for="(province, index) in areaList"> |
||||
|
<el-col v-if="province.list.length > 0" :key="index" class="province-wrap" :span="8"> |
||||
|
<el-checkbox-group |
||||
|
v-model="province.selected" |
||||
|
@change="checkboxChange(province.keyId, province.selected)" |
||||
|
> |
||||
|
<el-checkbox>{{ province.provinceName }}</el-checkbox> |
||||
|
</el-checkbox-group> |
||||
|
<el-cascader |
||||
|
v-model="province.selectCity" |
||||
|
:options="province.list" |
||||
|
:props="{ |
||||
|
multiple: true, |
||||
|
children: 'list', |
||||
|
label: 'city', |
||||
|
value: 'city' |
||||
|
}" |
||||
|
collapse-tags |
||||
|
filterable |
||||
|
@change="changeCity(province)" |
||||
|
/> |
||||
|
</el-col> |
||||
|
</template> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="areaVisible = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="getSelectData">确 定</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
<script> |
||||
|
|
||||
|
import { storehouseGetById, storehouseAdd, storehouseUpdate } from '@/api/shopSys' |
||||
|
|
||||
|
export default { |
||||
|
props: { |
||||
|
dialogVisible: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
type: { |
||||
|
type: String, |
||||
|
default: 'add' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
sizeForm: {}, |
||||
|
headers: { |
||||
|
Authorization: '' |
||||
|
}, |
||||
|
dataObj: { |
||||
|
folderId: 1 |
||||
|
}, |
||||
|
params: { |
||||
|
storehouseName: '', |
||||
|
type: 1, |
||||
|
kind: 1, |
||||
|
ifCashier : 1, |
||||
|
oneProductOrderPriceLimit: 5000, |
||||
|
moreProductOrderPriceLimit: 5000, |
||||
|
oneProductNumLimit: 0, |
||||
|
moreProductNumLimit: 0, |
||||
|
orderNumberLimit: 10 |
||||
|
}, |
||||
|
checkId: null |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
isVisible: { |
||||
|
get() { |
||||
|
return this.dialogVisible |
||||
|
}, |
||||
|
set() { |
||||
|
this.close() |
||||
|
this.reset() |
||||
|
} |
||||
|
}, |
||||
|
isDisabled() { |
||||
|
return this.type === 'check' |
||||
|
}, |
||||
|
title() { |
||||
|
const titleMap = { |
||||
|
add: '新建仓库', |
||||
|
check: '查看仓库', |
||||
|
edit: '修改仓库' |
||||
|
} |
||||
|
return titleMap[this.type] |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
methods: { |
||||
|
close() { |
||||
|
this.$emit('close') |
||||
|
}, |
||||
|
reset() { |
||||
|
this.params = { |
||||
|
storehouseName: '', |
||||
|
type: 1, |
||||
|
kind: 1, |
||||
|
ifCashier : 1, |
||||
|
oneProductOrderPriceLimit: 5000, |
||||
|
moreProductOrderPriceLimit: 5000, |
||||
|
oneProductNumLimit: 0, |
||||
|
moreProductNumLimit: 0, |
||||
|
orderNumberLimit: 10 |
||||
|
} |
||||
|
}, |
||||
|
// 查看详情 |
||||
|
async getDetails() { |
||||
|
const res = await storehouseGetById({ storehouseId: this.checkId }) |
||||
|
if (res.code === '') { |
||||
|
this.params = res.data |
||||
|
} |
||||
|
}, |
||||
|
async onSubmit() { |
||||
|
if (this.params.storehouseName === '') { |
||||
|
this.$message.error('请输入仓库名称') |
||||
|
} else if (this.type === 'add') { |
||||
|
this.add() |
||||
|
} else if (this.type === 'edit') { |
||||
|
this.update() |
||||
|
} else { |
||||
|
this.isVisible = false |
||||
|
} |
||||
|
}, |
||||
|
async add() { |
||||
|
const res = await storehouseAdd(this.params) |
||||
|
if (res.code === '') { |
||||
|
this.isVisible = false |
||||
|
this.$message({ |
||||
|
message: '成功添加', |
||||
|
type: 'success' |
||||
|
}) |
||||
|
this.$emit('success') |
||||
|
} |
||||
|
}, |
||||
|
async update() { |
||||
|
const res = await storehouseUpdate(this.params) |
||||
|
if (res.code === '') { |
||||
|
this.isVisible = false |
||||
|
this.$message({ |
||||
|
message: '成功', |
||||
|
type: 'success' |
||||
|
}); |
||||
|
this.$emit('success') |
||||
|
} |
||||
|
}, |
||||
|
setParams(val = {}) { |
||||
|
if (val['params']) { |
||||
|
this.params = val['params'] |
||||
|
} |
||||
|
if (val['checkId']) { |
||||
|
this.checkId = val['checkId'] |
||||
|
this.getDetails() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.dialog-wrap { |
||||
|
::v-deep .el-dialog { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
max-height: 80vh; |
||||
|
max-width: 900px; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
.el-dialog__body { |
||||
|
flex: 1; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.dialog-from { |
||||
|
width: 90%; |
||||
|
margin: auto; |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
.btn-wrap { |
||||
|
margin: 45px auto 0; |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
.form-item-row { |
||||
|
// padding-top: 40px; |
||||
|
::v-deep .el-input { |
||||
|
width: 80px; |
||||
|
margin: 0 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,217 @@ |
|||||
|
<!-- --> |
||||
|
<template> |
||||
|
<div> |
||||
|
<div class="pending"> |
||||
|
<!-- 搜索 --> |
||||
|
<div class="formSearch"> |
||||
|
<el-form :inline="true" :model="formParams" class="demo-form-inline"> |
||||
|
<el-form-item label="仓库名称"> |
||||
|
<el-input v-model="formParams.logisticsName" placeholder="请输入仓库名称" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="success" plain @click="add">新增仓库</el-button> |
||||
|
<el-button type="primary" plain @click="search">查询</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="220"> |
||||
|
<template slot-scope="scope">{{ scope.row.storehouseName }}</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="type" label="仓库类型" width="220" > |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.type == 1">自营仓</span> |
||||
|
<span v-if="scope.row.type == 2">委外仓</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="kind" label="仓库种类" width="220"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.kind == 1">国内仓</span> |
||||
|
<span v-if="scope.row.kind == 2">保税仓</span> |
||||
|
<span v-if="scope.row.kind == 3">海外仓</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" show-overflow-tooltip> |
||||
|
<template slot-scope="scope"> |
||||
|
<div class="btnList"> |
||||
|
<el-button type="text" @click="seeMore(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="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> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 方案组件 --> |
||||
|
<grope-edit |
||||
|
ref="edit" |
||||
|
:dialog-visible="dialog.isVisible" |
||||
|
:type="dialog.type" |
||||
|
@close="editClose" |
||||
|
@success="getLists" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） |
||||
|
// 例如：import 《组件名称》 from '《组件路径》'; |
||||
|
import { getBtnList } from '@/utils/auth' |
||||
|
import { storehouseGetAll, storehouseDelete } from '@/api/shopSys' |
||||
|
import GropeEdit from './Edit' |
||||
|
export default { |
||||
|
components: { |
||||
|
GropeEdit |
||||
|
}, |
||||
|
data() { |
||||
|
// 这里存放数据 |
||||
|
return { |
||||
|
btnList: '', |
||||
|
formParams: { |
||||
|
storehouseName: '', |
||||
|
page: 1, |
||||
|
pageSize: 10 |
||||
|
}, |
||||
|
total: 1, |
||||
|
tableData: [], |
||||
|
currentPage: 1, |
||||
|
dialog: { |
||||
|
type: 'add', |
||||
|
isVisible: false |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 监听属性 类似于data概念 |
||||
|
computed: {}, |
||||
|
// 监控data中的数据变化 |
||||
|
watch: {}, |
||||
|
// 生命周期 - 创建完成（可以访问当前this实例） |
||||
|
created() {}, |
||||
|
// 生命周期 - 挂载完成（可以访问DOM元素） |
||||
|
mounted() { |
||||
|
this.getList(this.formParams) |
||||
|
this.btnList = getBtnList() |
||||
|
console.log(this.btnList, 'btnList') |
||||
|
}, |
||||
|
// 方法集合 |
||||
|
methods: { |
||||
|
btnClick(id) { |
||||
|
console.log(id) |
||||
|
if (id.permissionName === '新建仓库') { |
||||
|
this.add() |
||||
|
} |
||||
|
}, |
||||
|
handleSizeChange(val) { |
||||
|
this.formParams.pageSize = val |
||||
|
this.getList(this.formParams) |
||||
|
}, |
||||
|
handleCurrentChange(val) { |
||||
|
this.formParams.page = val |
||||
|
this.getList(this.formParams) |
||||
|
}, |
||||
|
getLists() { |
||||
|
console.log(111) |
||||
|
this.getList(this.formParams) |
||||
|
}, |
||||
|
// 查询 |
||||
|
search() { |
||||
|
this.total = 1 |
||||
|
this.formParams.page = 1 |
||||
|
this.getList(this.formParams) |
||||
|
}, |
||||
|
// 新建方案 |
||||
|
add() { |
||||
|
this.dialog = { |
||||
|
type: 'add', |
||||
|
isVisible: true |
||||
|
} |
||||
|
}, |
||||
|
// 查看 |
||||
|
seeMore(row) { |
||||
|
const { storehouseId } = row |
||||
|
this.dialog = { |
||||
|
type: 'check', |
||||
|
isVisible: true |
||||
|
} |
||||
|
this.$refs.edit.setParams({ |
||||
|
checkId: storehouseId |
||||
|
}) |
||||
|
}, |
||||
|
// 编辑 |
||||
|
edit(row) { |
||||
|
const { storehouseId } = row |
||||
|
this.dialog = { |
||||
|
type: 'edit', |
||||
|
isVisible: true |
||||
|
} |
||||
|
this.$refs.edit.setParams({ |
||||
|
checkId: storehouseId |
||||
|
}) |
||||
|
}, |
||||
|
// 关闭弹框 |
||||
|
editClose() { |
||||
|
this.dialog.isVisible = false |
||||
|
}, |
||||
|
// 删除 |
||||
|
del(row) { |
||||
|
this.$confirm('选中数据将被永久删除, 是否继续？', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
.then(() => { |
||||
|
storehouseDelete({ storehouseId: row.storehouseId }).then(res => { |
||||
|
if (res.code === '') { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '删除成功!' |
||||
|
}) |
||||
|
} |
||||
|
this.getList(this.formParams) |
||||
|
}) |
||||
|
}) |
||||
|
.catch(() => {}) |
||||
|
}, |
||||
|
// 初始化查询所有数据 |
||||
|
async getList(formParams) { |
||||
|
const res = await storehouseGetAll(formParams) |
||||
|
this.tableData = res.data.list |
||||
|
this.total = res.data.total |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang='scss' scoped> |
||||
|
//@import url(); 引入公共css类 |
||||
|
@import url("../../../styles/elDialog.scss"); |
||||
|
.pending { |
||||
|
padding: 30px; |
||||
|
} |
||||
|
.fenye { |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue