233 lines
7.2 KiB
Vue
233 lines
7.2 KiB
Vue
<template>
|
||
<div class="divBox">
|
||
<el-card class="box-card">
|
||
<div slot="header" class="clearfix">
|
||
<div class="container">
|
||
<el-form ref="form" inline :model="dataForm" size="small">
|
||
<el-form-item label="标题：">
|
||
<el-input v-model="dataForm.name" placeholder="请输入名称/标题" class="selWidth" clearable>
|
||
<el-button slot="append" icon="el-icon-search" @click="handleSearch" />
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="acea-row">
|
||
<el-button v-hasPermi="['admin:home:save']" size="mini" type="primary" @click="addHandle()">新增数据</el-button>
|
||
<el-button v-hasPermi="['admin:home:delete']" size="mini" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
|
||
</div>
|
||
</div>
|
||
<el-table
|
||
ref="table"
|
||
v-loading="dataListLoading"
|
||
:data="dataList"
|
||
style="width: 100%"
|
||
size="mini"
|
||
highlight-current-row
|
||
@selection-change="selectionChangeHandle"
|
||
>
|
||
<el-table-column type="expand">
|
||
<template slot-scope="props">
|
||
<el-form label-position="left" inline class="demo-table-expand">
|
||
<el-form-item label="跳转参数解析： " style="width: 100%">
|
||
<span v-for="(value, key) in props.row.jumpIdsMap" class="mr10"> {{ key }} ：{{ value }} <br/></span>
|
||
</el-form-item>
|
||
</el-form>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
type="selection"
|
||
header-align="center"
|
||
align="center"
|
||
width="50">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="name"
|
||
header-align="center"
|
||
align="center"
|
||
label="名称">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="title"
|
||
header-align="center"
|
||
align="center"
|
||
label="标题">
|
||
</el-table-column>
|
||
<el-table-column label="封面图" min-width="80" header-align="center">
|
||
<template slot-scope="scope">
|
||
<div class="demo-image__preview" style="text-align: center">
|
||
<el-image v-if="scope.row.imgUrl"
|
||
style="width: 36px; height: 36px;"
|
||
:src="scope.row.imgUrl"
|
||
:preview-src-list="[scope.row.imgUrl]"
|
||
/>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="jumpType"
|
||
header-align="center"
|
||
align="center"
|
||
label="跳转类型">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.jumpType == 0">无</span>
|
||
<span v-else-if="scope.row.jumpType == 1">商品详情</span>
|
||
<span v-else-if="scope.row.jumpType == 2">分类列表</span>
|
||
<span v-else-if="scope.row.jumpType == 3">商品列表</span>
|
||
<!-- <span v-else-if="scope.row.jumpType == 4">活动栏目</span>-->
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="jumpIds"
|
||
header-align="center"
|
||
align="center"
|
||
label="跳转参数">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="type"
|
||
header-align="center"
|
||
align="center"
|
||
label="类型">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.type == 0">商品</span>
|
||
<span v-else-if="scope.row.type == 1">轮播图</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="orderNo"
|
||
header-align="center"
|
||
align="center"
|
||
label="排序">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="status"
|
||
header-align="center"
|
||
align="center"
|
||
label="状态">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.delFlag == 0">无效</span>
|
||
<span v-else-if="scope.row.delFlag == 1">有效</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
fixed="right"
|
||
header-align="center"
|
||
align="center"
|
||
width="250"
|
||
label="操作">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" size="small" @click="updateHandle(scope.row.id)">修改</el-button>
|
||
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
@size-change="sizeChangeHandle"
|
||
@current-change="currentChangeHandle"
|
||
:current-page="pageIndex"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
:page-size="pageSize"
|
||
:total="totalPage"
|
||
layout="total, sizes, prev, pager, next, jumper">
|
||
</el-pagination>
|
||
<!-- 新增数据 -->
|
||
<save v-if="addVisible" ref="save" @refreshDataList="getDataList"></save>
|
||
<!-- 修改数据 -->
|
||
<update v-if="updateVisible" ref="update" @refreshDataList="getDataList"></update>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import Update from './update-item'
|
||
import Save from './add-item'
|
||
import * as api from '@/api/homeItem.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
dataForm: {
|
||
homeId: 0,
|
||
name: '',
|
||
},
|
||
dataList: [],
|
||
pageIndex: 1,
|
||
pageSize: 10,
|
||
totalPage: 0,
|
||
dataListLoading: false,
|
||
dataListSelections: [],
|
||
updateVisible: false,
|
||
addVisible: false,
|
||
}
|
||
},
|
||
components: {
|
||
Update, Save
|
||
},
|
||
mounted() {
|
||
this.dataForm.homeId = this.$route.params.id
|
||
this.getDataList()
|
||
},
|
||
methods: {
|
||
// 获取数据列表
|
||
getDataList() {
|
||
this.dataListLoading = true
|
||
api.listApi(this.dataForm).then(res => {
|
||
this.dataList = res.list
|
||
this.totalPage = res.total
|
||
this.dataListLoading = false
|
||
}).catch(res => {
|
||
this.dataListLoading = false
|
||
this.$message.error(res.message)
|
||
})
|
||
},
|
||
handleSearch() {
|
||
this.page = 1
|
||
this.getDataList()
|
||
},
|
||
// 每页数
|
||
sizeChangeHandle(val) {
|
||
this.pageSize = val
|
||
this.pageIndex = 1
|
||
this.getDataList()
|
||
},
|
||
// 当前页
|
||
currentChangeHandle(val) {
|
||
this.pageIndex = val
|
||
this.getDataList()
|
||
},
|
||
// 多选
|
||
selectionChangeHandle(val) {
|
||
this.dataListSelections = val
|
||
},
|
||
// 修改
|
||
updateHandle(id) {
|
||
this.updateVisible = true
|
||
this.$nextTick(() => {
|
||
this.$refs.update.init(id)
|
||
})
|
||
},
|
||
// 添加
|
||
addHandle() {
|
||
this.addVisible = true
|
||
this.$nextTick(() => {
|
||
this.$refs.save.init(this.dataForm.homeId)
|
||
})
|
||
},
|
||
// 删除
|
||
deleteHandle(id) {
|
||
var ids = id ? [id] : this.dataListSelections.map(item => {
|
||
return item.id
|
||
})
|
||
this.$confirm(`您确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
api.deleteApi({ids : ids.join(',')}).then(res => {
|
||
this.$message.success('操作成功')
|
||
this.getDataList()
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|