web-retail-admin/src/views/marketing/plantCommonweal/commonRoles.vue

895 lines
22 KiB
Vue

<template>
<div class="" style="background: #f9f9f9">
<!-- <topBar-->
<!-- v-if="topList.length > 0"-->
<!-- style="margin: 20px 0"-->
<!-- :top-list="topList"-->
<!-- :moren="moren"-->
<!-- />-->
<div class="main">
<div class="tit">{{ '规则配置' }}</div>
<div class="xian"></div>
<div class="table">
<!-- 批量操作 -->
<table>
<tr>
<th
v-if="addFlag"
colspan="5"
class="tableLeft"
>
<el-button
type="primary"
size="mini"
@click="addNewGoods"
:disabled="lookOver"
>{{'添加'}}
</el-button>
</th>
<th
colspan="7"
style="padding-bottom:0"
>
<div class="tableFlex">
<div class="tableFlex_i">
<!-- <el-input placeholder="赠送产品"
@focus="getProduct('','')"
v-model='plcz.productName'></el-input> -->
</div>
<div class="tableFlex_i">
<!-- <el-input placeholder="产品规格"
disabled
v-model='plcz.specsName'></el-input> -->
</div>
<div class="tableAdd" />
</div>
</th>
</tr>
</table>
<table
class="table_b"
>
<tr style="border-top:0">
<td colspan="4">{{'活动图片'}}</td>
<td colspan="4">{{'活动名称'}}</td>
<td colspan="4">{{'真实奖衔'}}</td>
<td colspan="4">{{ '价格' }}(¥)</td>
<td colspan="4">{{ '数量' }}</td>
</tr>
<tr
v-for="(ctem,cndex) in allData"
>
<td colspan="4" >
<div>
<imageUpload v-model="ctem.cover" />
</div>
</td>
<td colspan="4">
<el-input v-model="ctem.name" />
</td>
<td colspan="4">
<el-select
v-model="ctem.pkAwards"
clearable
>
<el-option
v-for="item in awardsList"
:key="item.pkId"
:label="item.awardsName"
:value="item.pkId"
/>
</el-select>
</td>
<td colspan="4">
<el-input v-model="ctem.price" />
</td>
<td colspan="4">
<el-input v-model="ctem.quantity" />
</td>
</tr>
</table>
</div>
<!-- <div class="footer">
<el-button size="small"
class="thebtn2"> {{ '取消' }}</el-button>
<el-button size="small"
@click="submit"
class="thebtn1"> {{ '确认' }}</el-button>
</div> -->
<el-dialog
:title="'添加'"
:visible.sync="dialogVisible"
:close-on-click-modal="false"
width="40%"
center
:before-close="handleClose"
>
<div class="cpHeight">
<el-row>
<el-col :span="22"> <el-input v-model="select.queryInfo"
clearable
:placeholder="'请输入'"
@keyup.enter.native="getDataList"
prefix-icon="el-icon-search"></el-input>
</el-col>
<el-col :span="2">
<el-button type="primary"
size="small"
@click="getDataList"> {{ '搜索' }}</el-button>
</el-col>
</el-row>
<div style="height:10px" />
<el-table
ref="multipleTable"
:data="dialogList"
style="width: 100%"
:header-cell-style="{ background: '#EEEEEE' }"
:row-class-name="tableRowClassName"
@select-all="onSelectAll"
@select="selected"
>
<el-table-column
type="selection"
width="55"
/>
<el-table-column
align="center"
prop="productName"
:label="'产品名称'"
/>
<el-table-column align="center"
prop="productCode"
:label="'产品编号'">
</el-table-column>
<el-table-column
align="center"
prop="productName"
:label="'规格'"
>
<template slot-scope="scope">
<div
v-show="scope.row.selSkuNameList==''||scope.row.selSkuNameList==undefined"
class="blueCor"
@click="selSku(scope.row.pkId,scope.$index)"
>{{'选择规格'}}</div>
<div
v-show="scope.row.selSkuNameList!=''&&scope.row.selSkuNameList!=undefined"
class="blueCor"
@click="selSku(scope.row.pkId,scope.$index)"
>{{ scope.row.selSkuNameList }}</div>
</template>
</el-table-column>
<el-table-column
align="center"
prop="productName"
:label="'商品数量'"
>
<template slot-scope="scope">
<el-input-number
v-model="scope.row.quantity"
size="mini"
:min="1"
/>
</template>
</el-table-column>
</el-table>
</div>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getDataList"
/>
<span
slot="footer"
class="dialog-footer"
>
<el-button @click="handleClose">{{'取消'}}</el-button>
<el-button
type="primary"
@click="sureProduct"
>{{'确认'}}</el-button>
</span>
</el-dialog>
<el-dialog
:title="'规格'"
:visible.sync="ggVisible"
:close-on-click-modal="false"
width="40%"
center
:before-close="handleCloseGg"
>
<div>
<el-form>
<el-form-item
v-for="item,index in skuList"
:key="index"
:label="item.typeName"
>
<el-radio-group v-model="item.pkProductSku">
<el-radio
v-for="ctem,cndex in item.specsList"
:key="ctem.pkId"
:label="ctem.pkId"
@change="getCheckBox(item.pkId,item.specsName)"
>{{ ctem.specsName }}</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</div>
<span
slot="footer"
class="dialog-footer"
>
<el-button @click="handleCloseGg">{{'取消'}}</el-button>
<el-button
type="primary"
@click="sureSku"
>{{'确认'}}</el-button>
</span>
</el-dialog>
</div>
<div class="footer">
<div style="margin: 0 auto">
<el-button
class="thebtn"
style="background: #F9F9F9;border: none "
@click="cancelCz"
> {{ '取消' }}</el-button>
<el-button
type="primary"
class="thebtn"
style="margin-left:20px"
@click="saveDate"
> {{ '确认' }}</el-button>
</div>
</div>
</div>
</template>
<script>
import * as api from '@/api/giftGoods.js'
import * as apis from '@/api/product.js'
import * as api_s from '@/api/financial.js'
import topBar from '@/components/topBar'
import ImageUpload from '@/components/ImageUpload'
import { getMemberName } from '@/api/financial'
import { getQueryString } from '@/utils'
import { pickDetail } from '@/api/manage'
import {getAwardsListChiose} from "@/api/level";
import {getToken} from "@/utils/auth";
export default {
components: {
topBar,
ImageUpload
},
data() {
return {
showImg: true, // 默认展示
noneUploadImg: false, //
uploadImgUrl: process.env.VUE_APP_BASE_API + '/system/upload', // 上传的图片服务器地址
headers: {
Authorization: getToken(),
},
dialogVisible: false,
ggVisible: false,
disableds: false,
queryParams: {
pageNum: 1,
pageSize: 50
},
total: 0,
moren: 'RechargeCardList',
topList: [
{
name: '充值提货卡',
path: 'RechargeCardList'
}
],
lookOver:false,
detailList: [], // 商品数据
allData: [], // 全部数据
areaList: [], // 全部专区
allGoods: [], // 全部商品
isArea: '',
plcz: {},
select: {}, // 产品筛选
dialogList: [], // 产品数组
selectData: [], // 选中
skuList: [], // 规格数组
selSkuList: '',
selSkuNameList: '',
selIndex: '',
showCndex: '',
showIndex: '',
pageData: {},
// 邮费模板
postMoneyList1: [],
postMoneyList2: [],
postMoneyList3: [],
flags: 0,
addFlag: true,
// 海陆空
transportTypeList: [],
awardsList: [],
postList: [
{
text: '包邮',
val: 0
},
{
text: '不包邮',
val: 1
}
]
}
},
mounted() {
// if (
// this.$route.query.type == 3
// ) {
// this.lookOver = true;
// } else {
// this.lookOver = false;
// }
// const geturl = window.location.href
// const getqyinfo = geturl.split('?')[1]
// const getqys = new URLSearchParams('?' + getqyinfo)
// const type = getqys.get('type')
// const pkId = getqys.get('pkId')
this.getPostageList()
// if (pkId) {
// this.getThDetails(pkId)
// // this.disableds = true
// // this.addFlag = false
// // this.isArea = 1
// }
},
methods: {
getPage(allData) {
console.log('%c [ allData ]-355', 'font-size:13px; background:#94c69f; color:#d8ffe3;', allData)
if (allData != '') {
this.allData = allData
}
},
// 获取提货卡详情
getThDetails(pkId) {
console.error(0)
},
// 根据会员编号查询会员姓名
checkName(data) {
api_s.getMemberName({ memberCode: data.memberCode }).then((res) => {
data.memberName = res.memberName
this.$forceUpdate()
})
},
changeGroup(ctem) {
if (ctem.pkPostage) {
ctem.pkPostage = ''
}
},
getPostageList() {
getAwardsListChiose().then((res) => {
this.awardsList = res.rows
})
// 陆运
apis.getPostageList({ tranType: 1 }).then((res) => {
this.postMoneyList1 = res.data
})
// 空运
apis.getPostageList({ tranType: 2 }).then((res) => {
this.postMoneyList2 = res.data
})
// 海运
apis.getPostageList({ tranType: 3 }).then((res) => {
this.postMoneyList3 = res.data
})
},
saveDate() {
console.error(this.allData)
},
// getPage(allData) {
// if(allData){
// console.error(allData.treeRuleConfigList)
// this.allData = allData.treeRuleConfigList
// }
// console.error(this.allData)
// this.$emit('fatherMethod',this.allData);
// },
cancelCz() {
this.$router.push({
path: 'RechargeCardList'
})
},
getData() {
api.specialArea().then((res) => {
this.areaList = res.data
// this.allData
const arr = []
this.areaList.forEach((item) => {
arr.push({
orderType: item.value,
consumeRuleConfigList: []
})
})
this.allData = arr
this.isArea = res.data[0].value
})
api.waresList().then((res) => {
this.allGoods = res.data
})
},
sureSku() {
this.$set(this.dialogList[this.selIndex], 'selSkuList', this.selSkuList)
this.$set(
this.dialogList[this.selIndex],
'selSkuNameList',
this.selSkuNameList
)
this.ggVisible = false
},
sureProduct() {
if (this.selectData.length == 0) {
this.$message({
message: '请选择产品',
type: 'warning'
})
return false
} else {
this.allData.forEach((item) => {
if (this.isArea == item.orderType) {
item.consumeRuleConfigList[this.showCndex].waresGiftConfigList[
this.showIndex
].pkProduct = this.selectData.pkId
item.consumeRuleConfigList[this.showCndex].waresGiftConfigList[
this.showIndex
].productName = this.selectData.productName
item.consumeRuleConfigList[this.showCndex].waresGiftConfigList[
this.showIndex
].specsName = this.selectData.selSkuNameList
item.consumeRuleConfigList[this.showCndex].waresGiftConfigList[
this.showIndex
].specsNameId = this.selectData.selSkuList
item.consumeRuleConfigList[this.showCndex].waresGiftConfigList[
this.showIndex
].quantity = this.selectData.quantity
}
})
// this.dialogVisible = false
this.handleClose()
this.$forceUpdate()
}
},
toPlcz() {
this.allData.forEach((item) => {
if (this.isArea == item.orderType) {
item.consumeRuleConfigList.forEach((ctem) => {
ctem.waresGiftConfigList.forEach((stem) => {
stem.quantity = this.plcz.quantity
})
})
}
})
},
reset() {
this.plcz = {}
},
getCheckBox() {
const arr1 = []
const arr2 = []
this.skuList.forEach((item) => {
item.specsList.forEach((ctem) => {
if (ctem.pkId == item.pkProductSku) {
arr1.push(ctem.pkId)
arr2.push(ctem.specsName)
}
})
})
this.selSkuList = arr1.join(',')
this.selSkuNameList = arr2.join(',')
},
setArea(val) {
this.isArea = val
},
handleClose() {
this.selectData = []
this.dialogVisible = false
},
handleCloseGg() {
this.ggVisible = false
},
getProduct(cndex, index) {
this.showCndex = cndex
this.showIndex = index
this.getDataList()
this.dialogVisible = true
},
addProduct(cndex, sndex) {
this.allData.forEach((item) => {
if (this.isArea == item.orderType) {
item.consumeRuleConfigList[cndex].waresGiftConfigList.push({
pkProduct: '',
productName: '',
specsName: '',
specsNameId: '',
quantity: ''
})
}
})
},
reduceProduct(cndex, sndex) {
this.allData.forEach((item) => {
if (this.isArea == item.orderType) {
item.consumeRuleConfigList[cndex].waresGiftConfigList.splice(sndex, 1)
}
})
},
// 图片上传成功后的回调
handlePictureSuccess(res, file) {
this.form.cover = res.data.url
},
// 图片上传删除
handleRemove(file, fileList) {
this.form.cover = ''
this.noneUploadImg = fileList.length > 0
},
cancel() {
this.$router.push({
name: 'addMenuRole'
})
},
addNewGoods() {
this.allData.push({
cover: '',
name: '',
pkAwards: '',
price: '',
quantity: '',
})
// this.allData.forEach((item) => {
// console.error(item)
// item.consumeRuleConfigList.push({
// cover: '',
// name: '',
// pkAwards: '',
// price: '',
// quantity: '',
// })
// })
console.error(this.allData)
// this.allData
console.log(
'%c [ this.allData ]-439',
'font-size:13px; background:#4e52da; color:#9296ff;',
this.allData
)
this.$emit('fatherMethod',this.allData);
},
selSku(pkId, index) {
this.selIndex = index
api
.getProductSpecs({
pkProduct: pkId
})
.then((res) => {
const arr1 = []
const arr2 = []
res.data.forEach((item) => {
item.pkProductSku = item.specsList[0].pkId
arr1.push(item.specsList[0].pkId)
arr2.push(item.specsList[0].specsName)
})
this.selSkuList = arr1.join(',')
this.selSkuNameList = arr2.join(',')
this.skuList = res.data
this.ggVisible = true
})
},
getDataList() {
api
.getProductAll(Object.assign({isPutOn:0}, this.queryParams, this.select,{isExistSpecs:1}))
.then((res) => {
res.rows.forEach((item) => {
item.quantity = 1
})
this.dialogList = res.rows
this.total = res.total
})
},
submit() {
const obj = Object.assign({}, this.pageData, {
waresConfigParam: this.allData
})
console.log(
'%c [ obj ]-445',
'font-size:13px; background:#6f1b1a; color:#b35f5e;',
obj
)
api.activitySave(obj).then((res) => {
if (res.code == 200) {
// this.$router.push({
// path: '/announcement/fbZxqc',
// query: {
// data: JSON.stringify(res.data),
// },
// })
}
})
},
onSelectAll() {
this.$refs.multipleTable.clearSelection()
},
selected(selection, row) {
// 清除 所有勾选项
this.$refs.multipleTable.clearSelection()
// 当表格数据都没有被勾选的时候 就返回
// 主要用于将当前勾选的表格状态清除
if (selection.length == 0) return
this.$refs.multipleTable.toggleRowSelection(row, true)
this.selectData = row
},
// 表格的选中 可以获得当前选中的数据
selectionChange(val) {
// 将选中的数据存储起来
this.selectData = val
},
uploadImgChange(file, fileList) {
this.noneUploadImg = fileList.length > 0
this.$refs.form.clearValidate('cover')
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 == 1) {
return 'warning-row'
} else if (rowIndex % 2 == 0) {
return 'success-row'
}
return ''
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-upload--picture-card i{
color: #c8161d;
}
::v-deep .el-upload--picture-card {
min-width: 50px!important;
min-height: 50px!important;
}
::v-deep .el-image{
width: 50px!important;
height: 50px!important;
display: flex;
justify-content: center;
align-items: center;
}
.baoyou{
text-align: center;
}
::v-deep .el-radio.is-bordered+.el-radio.is-bordered{
margin-left: 0;
}
::v-deep .el-radio.is-bordered{
padding: 0;
margin: 10px 0;
width: 100px;
text-align: center;
line-height: 34px;
}
::v-deep .el-date-editor.el-input{
width: 100%;
}
.color-style{
width: 5px;
height: 19px;
background: #c8161d;
display: block;
margin-top: 3px;
}
.app-main{
background: #f9f9f9!important;
padding: 0 20px;
}
.content{
background: #fff;
padding: 0 30px;
height: 1100px;
box-shadow: 0px 2px 20px 0px rgba(238,238,238,0.5);
border-radius: 8px 8px 8px 8px;
}
::v-deep th{
border:none !important;
}
// .page {
// padding: 20px;
// background: #f9f9f9;
// font-size: 14px;
.main_a {
// height: calc(100vh - 124px);
// display: flex;
// flex-direction: column;
// height: calc(100vh - 164px);
// height: 100%;
}
.main {
overflow: hidden;
background: #ffffff;
border-radius: 8px;
//margin: 0 20px;
height: calc(100vh - 230px);
padding-bottom: 20px;
box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
}
::v-deep .el-select {
width: 100%;
}
// }
.footer {
height: 68px;
background: #ffffff;
box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
// margin: 0 20px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0px;
width: 100%;
.thebtn1 {
background: #3181e5;
color: #ffffff;
padding: 9px 45px;
}
.thebtn2 {
background: #cccccc;
color: #ffffff;
padding: 9px 45px;
}
}
.thebtn{
width: 137px;
height: 38px;
}
.tit {
font-size: 14px;
font-weight: bold;
color: #333333;
padding: 0 20px;
border-left: 5px solid #c8161d;
margin: 20px 0 10px 0;
}
.xian {
height: 1px;
background: rgba(0, 0, 0, 0.1);
}
.demo-ruleForm {
padding: 20px 0;
}
::v-deep .el-date-editor--datetimerange {
width: auto !important;
}
.flexed {
display: flex;
}
.flexed_l {
margin-right: 20px;
}
.table {
padding: 0 40px 100px 40px;
margin-top: 1px;
margin-top: 30px;
max-height: 630px;
overflow-y: auto;
width: 800px;
}
table {
width: 100%;
background: #fff;
border-collapse: collapse;
border: 1px solid #cccccc;
border-spacing: 0;
table-layout: fixed;
border-collapse: collapse;
// 合并内外边距
// (去除表格单元格默认的2个像素内外边距*/
}
.table_b {
border-top: 0;
}
th {
padding: 10px 10px;
text-align: center;
border: 1px solid #cccccc;
overflow: hidden;
border-top: 0;
}
td {
padding: 10px 10px;
text-align: center;
border: 1px solid #cccccc;
border-top: 0;
overflow: hidden;
}
.tableFlex {
display: flex;
align-items: center;
margin-bottom: 10px;
.tableFlex_i {
flex: 1;
::v-deep .el-input__inner {
width: 90%;
}
}
}
.tableAdd {
width: 50px;
img {
width: 19px;
height: 19px;
}
}
.tableAddPro {
display: flex;
align-items: center;
justify-content: center;
img {
width: 19px;
height: 19px;
margin-left: 10px;
}
}
.tableLeft {
text-align: left;
border: 0!important;
}
.tabList {
display: flex;
align-items: center;
padding: 20px 0px 0 20px;
.tabList_i {
padding: 10px;
font-size: 14px;
font-weight: 400;
color: #999999;
cursor: pointer;
}
.tabAct {
background: #108ee9;
color: #fff;
}
}
.clearBtm {
border-bottom: 0;
}
.cpHeight {
height: 50vh;
overflow-y: auto;
}
.blueCor {
color: #589ff8;
cursor: pointer;
}
::v-deep .el-input__icon{
line-height: 33px;
}
::v-deep .el-button{
margin-top: 0;
}
</style>