296 lines
11 KiB
Vue
296 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<!-- 基于 Element UI 新增和修改弹窗 -->
|
|
<el-dialog
|
|
:title="'楼层子项调整'"
|
|
:close-on-click-modal="false"
|
|
:visible.sync="visible"
|
|
:before-close="handleClose"
|
|
>
|
|
<el-form :model="itemForm" :rules="dataRule" ref="itemForm">
|
|
<el-form-item>
|
|
<el-button type="primary" size="mini" icon="el-icon-edit" @click="addRow()">
|
|
添加行
|
|
</el-button>
|
|
</el-form-item>
|
|
<el-form-item prop="region">
|
|
<el-table :data="itemForm.region" border style="width: 100%" size="mini" class="tempBox">
|
|
<el-table-column min-width="120px" align="center" :label="'名称'" prop="name">
|
|
<template slot-scope="scope">
|
|
<el-form-item :rules="dataRule.name" :prop="'region.'+scope.$index+'.name'">
|
|
<el-input v-model="scope.row.name" placeholder="名称"></el-input>
|
|
</el-form-item>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column min-width="120px" align="center" :label="'标题'" prop="title">
|
|
<template slot-scope="scope">
|
|
<el-form-item :rules="dataRule.title" :prop="'region.'+scope.$index+'.title'">
|
|
<el-input v-model="scope.row.title" placeholder="标题"></el-input>
|
|
</el-form-item>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column min-width="50px" align="center" :label="'楼层图'" prop="imgUrl">
|
|
<template slot-scope="scope">
|
|
<el-form-item :rules="dataRule.imgUrl" :prop="'region.'+scope.$index+'.imgUrl'">
|
|
<div class="upLoadPicBox" @click="modalPicTap('1', scope.$index)" :disabled="isDisabled">
|
|
<div v-if="scope.row.imgUrl" class="pictrue"><img :src="scope.row.imgUrl"></div>
|
|
<div v-else class="upLoad"><i class="el-icon-camera cameraIconfont" /></div>
|
|
</div>
|
|
</el-form-item>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column min-width="120px" align="center" :label="'跳转类型'" prop="jumpType">
|
|
<template slot-scope="scope">
|
|
<el-form-item :rules="dataRule.jumpType" :prop="'region.'+scope.$index+'.jumpType'">
|
|
<el-select v-model="scope.row.jumpType" placeholder="请选择" class="selWidthd" style="width: 220px" @change="jumpTypeChange(scope.$index)">
|
|
<el-option :value="item.id" v-for="(item, index) in jumpTypeList" :key="index" :label="item.name"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column min-width="120px" align="center" :label="'跳转类型'" prop="jumpIds">
|
|
<template slot-scope="scope">
|
|
<el-form-item :rules="dataRule.jumpIds" :prop="'region.'+scope.$index+'.jumpIds'">
|
|
<el-input v-if="scope.row.jumpType === 1" v-model="scope.row.jumpIdsText" placeholder="选商品" @click.native="selectProductSwitch(1, 1, scope.$index)"></el-input>
|
|
<!-- <el-input v-if="scope.row.jumpType === 1 || scope.row.jumpType === 3" v-model="scope.row.jumpIds" type="hidden"></el-input>-->
|
|
|
|
<el-select v-if="scope.row.jumpType === 2" v-model="scope.row.jumpIds" placeholder="选分类" class="selWidthd" style="width: 220px" @click.native="selectCate">
|
|
<el-option :value="item.id" v-for="(item, index) in productCateList" :key="index" :label="item.name"></el-option>
|
|
</el-select>
|
|
|
|
<el-input v-if="scope.row.jumpType === 3" v-model="scope.row.jumpIdsText" placeholder="选商品" @click.native="selectProductSwitch(1, 0, scope.$index)"></el-input>
|
|
</el-form-item>
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column min-width="120px" align="center" :label="'跳转地址'" prop="jumpIds">-->
|
|
<!-- <template slot-scope="scope">-->
|
|
<!-- <el-form-item :rules="dataRule.jumpUrl" :prop="'region.'+scope.$index+'.jumpUrl'">-->
|
|
<!-- <el-input v-model="scope.row.jumpUrl" placeholder="跳转地址"></el-input>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- </template>-->
|
|
<!-- </el-table-column>-->
|
|
<el-table-column align="center" :label="'排序'" prop="orderNo">
|
|
<template slot-scope="scope">
|
|
<el-form-item :rules="dataRule.orderNo" :prop="'region.'+scope.$index+'.orderNo'">
|
|
<el-input-number v-model="scope.row.orderNo" placeholder="排序" controls-position="right" :min="0" style="width: 100px"/>
|
|
</el-form-item>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="操作" min-width="80">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
type="text"
|
|
size="small"
|
|
@click="delRow(scope.$index)"
|
|
>
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="visible = false">取消</el-button>
|
|
<el-button type="primary" @click="dataSubmit()">确定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<el-dialog
|
|
title="选择商品"
|
|
:close-on-click-modal="false"
|
|
:visible.sync="selectProductVisible"
|
|
@close="selectProductSwitch(0)">
|
|
<!-- 选择商品 -->
|
|
<selectProductWindow v-if="selectProductShow" ref="select_product_window"/>
|
|
<el-button type="primary" @click="selectProductOk()" style="margin-left: 90%">确定</el-button>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as api from '@/api/homeItem.js'
|
|
import {listCategroy} from "@/api/categoryApi";
|
|
import selectProductWindow from "@/views/home/selectProduct";
|
|
|
|
const defaultRole = {
|
|
region: [{
|
|
name: '',
|
|
title: '',
|
|
homeId: '',
|
|
imgUrl: '',
|
|
jumpType: '',
|
|
jumpUrl: '',
|
|
jumpIds: '',
|
|
jumpIdsText: '',
|
|
business: '',
|
|
delFlag: '',
|
|
orderNo: '',
|
|
}],
|
|
}
|
|
export default {
|
|
components: {selectProductWindow},
|
|
data() {
|
|
return {
|
|
isDisabled: false,
|
|
visible: false,
|
|
jumpTypeList: [
|
|
{id: 0, name: '无跳转'},
|
|
{id: 1, name: '商品详情'},
|
|
{id: 2, name: '分类列表'},
|
|
{id: 3, name: '商品列表'},
|
|
// {id: 4, name: '活动栏目'},
|
|
],
|
|
homeId: '',
|
|
productCateList: [],
|
|
itemForm: Object.assign({}, defaultRole),
|
|
selectProductVisible: false,
|
|
selectProductShow: false,
|
|
selectProductNum: 0,
|
|
selectProductIndex: 0,
|
|
dataForm: {
|
|
id: 0,
|
|
name: '',
|
|
title: '',
|
|
homeId: '',
|
|
imgUrl: '',
|
|
jumpType: '',
|
|
jumpUrl: '',
|
|
jumpIds: '',
|
|
jumpIdsText: '',
|
|
business: '',
|
|
delFlag: '',
|
|
orderNo: '',
|
|
},
|
|
dataRule: {
|
|
name: [
|
|
{required: true, message: '名称 为必填项', trigger: 'blur'}
|
|
],
|
|
title: [
|
|
{required: true, message: '标题 为必填项', trigger: 'blur'}
|
|
],
|
|
jumpType: [
|
|
{required: true, message: '跳转类型 为必填项', trigger: 'blur'}
|
|
],
|
|
orderNo: [
|
|
{required: true, message: '排序 为必填项', trigger: 'blur'}
|
|
],
|
|
delFlag: [
|
|
{required: true, message: '是否有效 为必填项', trigger: 'blur'}
|
|
],
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
init(homeId) { // 初始化表单验证规则
|
|
this.homeId = homeId
|
|
this.visible = true
|
|
document.querySelector('.el-dialog__wrapper .el-dialog').style.width = '75%'
|
|
},
|
|
// 添加行
|
|
addRow() {
|
|
this.itemForm.region.push(Object.assign({}, {
|
|
name: '',
|
|
title: '',
|
|
homeId: '',
|
|
imgUrl: '',
|
|
jumpType: '',
|
|
jumpUrl: '',
|
|
jumpIds: '',
|
|
jumpIdsText: '',
|
|
business: '',
|
|
delFlag: '',
|
|
orderNo: '',
|
|
}))
|
|
},
|
|
delRow(index) {
|
|
this.itemForm.region.splice(index, 1)
|
|
},
|
|
// 表单数据提交
|
|
dataSubmit() {
|
|
this.$refs['itemForm'].validate((valid) => {
|
|
if (valid) {
|
|
this.loading = true;
|
|
this.itemForm.region.forEach((el, index) => {
|
|
el.homeId = this.homeId
|
|
})
|
|
const itemList = this.itemForm.region
|
|
api.createApi(itemList).then(res => {
|
|
this.$message.success('操作成功')
|
|
this.handleClose()
|
|
this.$nextTick(() => {
|
|
this.dialogVisible = false
|
|
})
|
|
setTimeout(() => {
|
|
this.$emit('refreshDataList')
|
|
}, 600)
|
|
this.loading = false;
|
|
})
|
|
} else {
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
jumpTypeChange(index) {
|
|
this.itemForm.region[index].jumpIds = '';
|
|
this.itemForm.region[index].jumpIdsText = '';
|
|
},
|
|
selectProductOk() {
|
|
let products = this.$refs['select_product_window'].dataListSelections;
|
|
if (products.length <= 0) {
|
|
this.$message.error('请选择商品');
|
|
return;
|
|
}
|
|
if (this.selectProductNum !== 0 && this.selectProductNum < products.length) {
|
|
this.$message.error('只能选择' + this.selectProductNum + '件商品');
|
|
return;
|
|
}
|
|
let ids = products.map(item => { return item.id })
|
|
let storeName = products.map(item => { return item.storeName })
|
|
this.itemForm.region[this.selectProductIndex].jumpIds = ids + "";
|
|
this.itemForm.region[this.selectProductIndex].jumpIdsText = storeName + "";
|
|
this.selectProductSwitch(0);
|
|
},
|
|
selectProductSwitch(flag, num, index) {
|
|
this.selectProductVisible = (flag === 1 ? true : false);
|
|
this.selectProductShow = (flag === 1 ? true : false);
|
|
this.selectProductNum = (flag === 1 ? num : 0);
|
|
this.selectProductIndex = (flag === 1 ? index : 0);
|
|
},
|
|
selectCate() {
|
|
listCategroy({limit: 999, page: '1', status: 1, type: 1}).then(res => {
|
|
this.productCateList = res.list;
|
|
})
|
|
},
|
|
handleClose() {
|
|
this.visible = false
|
|
this.itemForm = {
|
|
region: [{
|
|
name: '',
|
|
title: '',
|
|
homeId: '',
|
|
imgUrl: '',
|
|
jumpType: '',
|
|
jumpUrl: '',
|
|
jumpIds: '',
|
|
jumpIdsText: '',
|
|
business: '',
|
|
delFlag: '',
|
|
orderNo: '',
|
|
}],
|
|
};
|
|
},
|
|
// 点击商品图
|
|
modalPicTap(tit, index) {
|
|
let _this = this.itemForm.region[index];
|
|
this.$modalUpload(function (img) {
|
|
if (tit === '1') {
|
|
_this.imgUrl = img[0].sattDir
|
|
}
|
|
}, tit, 'content')
|
|
},
|
|
}
|
|
}
|
|
</script>
|