feat(banner管理页面、banner编辑组件): 搜索条件、编辑弹窗新增“平台”选项
This commit is contained in:
hzj
parent
c407a6a53e
commit
41d600a12a
@ -97,6 +97,24 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 平台 -->
|
||||
<el-form-item label="平台" prop="platform">
|
||||
<el-select
|
||||
v-model="form.platform"
|
||||
placeholder="状态"
|
||||
clearable
|
||||
style="width:100%;"
|
||||
class="filter-item"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in appPlatforms"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 类型 -->
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select
|
||||
@ -252,9 +270,11 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { updateBanner, addBanner } from "@/api/banner";
|
||||
import { getElementUiUploadFile } from "@/utils";
|
||||
import { mapGetters } from "vuex";
|
||||
import { appPlatforms } from "@/constant/origin";
|
||||
import { getElementUiUploadFile } from "@/utils";
|
||||
|
||||
import { updateBanner, addBanner } from "@/api/banner";
|
||||
import { regionConfigTable } from "@/api/sys";
|
||||
export default {
|
||||
props: {
|
||||
@ -280,6 +300,7 @@ export default {
|
||||
{ name: "钱包", value: "WALLET" },
|
||||
{ name: "游戏", value: "GAME" }
|
||||
],
|
||||
appPlatforms,
|
||||
searchDisabled: false,
|
||||
alertCoverUploadLoading: false,
|
||||
alertCoverFileList: [],
|
||||
@ -296,6 +317,7 @@ export default {
|
||||
cover: "",
|
||||
smallCover: "",
|
||||
showcase: "",
|
||||
platform: "",
|
||||
type: "",
|
||||
sysOrigin: "",
|
||||
content: "",
|
||||
@ -313,6 +335,7 @@ export default {
|
||||
rules: {
|
||||
cover: commonRules,
|
||||
showcase: commonRules,
|
||||
platform: commonRules,
|
||||
type: commonRules,
|
||||
sysOrigin: commonRules,
|
||||
expiredTime: commonRules
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
|
||||
<div class="filter-container">
|
||||
<el-select
|
||||
v-model="listQuery.sysOrigin"
|
||||
@ -15,11 +14,27 @@
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<span style="float: left;"> <sys-origin-icon :icon="item.value" :desc="item.value" /></span>
|
||||
<span style="float: left;">
|
||||
<sys-origin-icon :icon="item.value" :desc="item.value"
|
||||
/></span>
|
||||
<span style="float: left;margin-left:10px">{{ item.label }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select
|
||||
v-model="listQuery.platform"
|
||||
style="width: 120px"
|
||||
class="filter-item"
|
||||
placeholder="平台"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in appPlatforms"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
|
||||
<el-select
|
||||
v-model="listQuery.showcase"
|
||||
placeholder="状态"
|
||||
@ -111,20 +126,24 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="类型" align="center" />
|
||||
<el-table-column prop="displayPositionNames" label="展示位" align="center" />
|
||||
<el-table-column
|
||||
prop="displayPositionNames"
|
||||
label="展示位"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column label="归属系统" align="center">
|
||||
<template slot-scope="scope">
|
||||
<sys-origin-icon :icon="scope.row.sysOrigin" :desc="scope.row.sysOrigin" />
|
||||
<sys-origin-icon
|
||||
:icon="scope.row.sysOrigin"
|
||||
:desc="scope.row.sysOrigin"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="regionNameStr" label="区域" align="center" />
|
||||
<el-table-column prop="sort" label="排序" align="center" />
|
||||
<el-table-column prop="content" label="内容" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-popover
|
||||
placement="top-start"
|
||||
trigger="hover"
|
||||
>
|
||||
<el-popover placement="top-start" trigger="hover">
|
||||
<div class="popover-content">
|
||||
<div><strong>内容：</strong>{{ scope.row.content }}</div>
|
||||
<div><strong>参数：</strong>{{ scope.row.params }}</div>
|
||||
@ -139,10 +158,24 @@
|
||||
<el-table-column label="状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<div>
|
||||
<el-tag v-if="scope.row.expired === true && scope.row.showcase === false" type="warning">下架+过期</el-tag>
|
||||
<el-tag v-else-if="scope.row.expired === true && scope.row.showcase === true" type="warning">上架+过期</el-tag>
|
||||
<el-tag v-else-if="scope.row.expired === true" type="warning">过期</el-tag>
|
||||
<el-tag v-else-if="scope.row.showcase === false" type="danger">下架</el-tag>
|
||||
<el-tag
|
||||
v-if="scope.row.expired === true && scope.row.showcase === false"
|
||||
type="warning"
|
||||
>下架+过期</el-tag
|
||||
>
|
||||
<el-tag
|
||||
v-else-if="
|
||||
scope.row.expired === true && scope.row.showcase === true
|
||||
"
|
||||
type="warning"
|
||||
>上架+过期</el-tag
|
||||
>
|
||||
<el-tag v-else-if="scope.row.expired === true" type="warning"
|
||||
>过期</el-tag
|
||||
>
|
||||
<el-tag v-else-if="scope.row.showcase === false" type="danger"
|
||||
>下架</el-tag
|
||||
>
|
||||
<el-tag v-else-if="scope.row.showcase === true">上架</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
@ -150,7 +183,9 @@
|
||||
<el-table-column fixed="right" label="操作" align="center" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click.native="handleUpdate()">修改</el-button>
|
||||
<el-button type="text" @click.native="handlDel(scope.row)">删除</el-button>
|
||||
<el-button type="text" @click.native="handlDel(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -174,23 +209,24 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { bannerTable, deleteBanner } from '@/api/banner'
|
||||
import Pagination from '@/components/Pagination'
|
||||
import { sysOriginPlatforms } from '@/constant/origin'
|
||||
import FormEdit from './form-edit.vue'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { regionConfigTable } from '@/api/sys'
|
||||
import { bannerTable, deleteBanner } from "@/api/banner";
|
||||
import Pagination from "@/components/Pagination";
|
||||
import { appPlatforms, sysOriginPlatforms } from "@/constant/origin";
|
||||
import FormEdit from "./form-edit.vue";
|
||||
import { mapGetters } from "vuex";
|
||||
import { regionConfigTable } from "@/api/sys";
|
||||
|
||||
export default {
|
||||
components: { Pagination, FormEdit },
|
||||
data() {
|
||||
return {
|
||||
thatRow: {},
|
||||
appPlatforms,
|
||||
sysOriginPlatforms,
|
||||
txtVal: 0,
|
||||
loading: false,
|
||||
regions: [],
|
||||
activeGiftId: '',
|
||||
activeGiftId: "",
|
||||
pushTextHistoryLoading: false,
|
||||
pushTextHistoryVisible: false,
|
||||
pushTextHistory: [],
|
||||
@ -201,104 +237,107 @@ export default {
|
||||
cursor: 1,
|
||||
limit: 20,
|
||||
showcase: 1,
|
||||
sysOrigin: 'HALAR',
|
||||
region: ''
|
||||
sysOrigin: "HALAR",
|
||||
platform: "Android",
|
||||
region: ""
|
||||
},
|
||||
formEditVisible: false,
|
||||
textOptTitle: '',
|
||||
textOptTitle: "",
|
||||
listLoading: true
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permissionsSysOriginPlatforms'])
|
||||
...mapGetters(["permissionsSysOriginPlatforms"])
|
||||
},
|
||||
created() {
|
||||
const that = this
|
||||
const querySystem = this.permissionsSysOriginPlatforms[0]
|
||||
const that = this;
|
||||
const querySystem = this.permissionsSysOriginPlatforms[0];
|
||||
if (!querySystem) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
that.listQuery.sysOrigin = querySystem.value
|
||||
this.listRegion()
|
||||
that.renderData()
|
||||
that.listQuery.sysOrigin = querySystem.value;
|
||||
this.listRegion();
|
||||
that.renderData();
|
||||
},
|
||||
methods: {
|
||||
renderData(isClean) {
|
||||
const that = this
|
||||
const that = this;
|
||||
if (isClean === true) {
|
||||
this.listQuery.cursor = 1
|
||||
this.listQuery.list = []
|
||||
this.listQuery.cursor = 1;
|
||||
this.listQuery.list = [];
|
||||
}
|
||||
that.listLoading = true
|
||||
that.listLoading = true;
|
||||
bannerTable(that.listQuery).then(res => {
|
||||
const { body } = res
|
||||
that.total = body.total || 0
|
||||
that.list = body.records
|
||||
that.listLoading = false
|
||||
})
|
||||
const { body } = res;
|
||||
that.total = body.total || 0;
|
||||
that.list = body.records;
|
||||
that.listLoading = false;
|
||||
});
|
||||
},
|
||||
listRegion() {
|
||||
const that = this
|
||||
that.loading = true
|
||||
regionConfigTable({ 'sysOrigin': that.listQuery.sysOrigin }).then(res => {
|
||||
that.regions = res.body || []
|
||||
that.loading = false
|
||||
}).catch(er => {
|
||||
that.loading = false
|
||||
})
|
||||
const that = this;
|
||||
that.loading = true;
|
||||
regionConfigTable({ sysOrigin: that.listQuery.sysOrigin })
|
||||
.then(res => {
|
||||
that.regions = res.body || [];
|
||||
that.loading = false;
|
||||
})
|
||||
.catch(er => {
|
||||
that.loading = false;
|
||||
});
|
||||
},
|
||||
handleSearch() {
|
||||
this.renderData(true)
|
||||
this.renderData(true);
|
||||
},
|
||||
renderDataSuccess() {
|
||||
this.$message({
|
||||
message: 'Successful',
|
||||
type: 'success'
|
||||
})
|
||||
this.renderData()
|
||||
message: "Successful",
|
||||
type: "success"
|
||||
});
|
||||
this.renderData();
|
||||
},
|
||||
changeSysOrigin() {
|
||||
this.listRegion()
|
||||
this.handleSearch()
|
||||
this.listRegion();
|
||||
this.handleSearch();
|
||||
},
|
||||
queryUserDetails(row) {
|
||||
this.userDeatilsDrawer = true
|
||||
this.thatSelectedUserId = row.id
|
||||
this.userDeatilsDrawer = true;
|
||||
this.thatSelectedUserId = row.id;
|
||||
},
|
||||
// 删除
|
||||
handlDel(row) {
|
||||
this.$confirm('确认删除吗？', '提示', {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
deleteBanner(row.id, row.sysOrigin).then((res) => {
|
||||
this.listLoading = false
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.renderData()
|
||||
})
|
||||
}).catch(() => {
|
||||
|
||||
this.$confirm("确认删除吗？", "提示", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
this.listLoading = true;
|
||||
deleteBanner(row.id, row.sysOrigin).then(res => {
|
||||
this.listLoading = false;
|
||||
this.$message({
|
||||
message: "删除成功",
|
||||
type: "success"
|
||||
});
|
||||
this.renderData();
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
handleCreate() {
|
||||
this.thatRow = null
|
||||
this.formEditVisible = true
|
||||
this.thatRow = null;
|
||||
this.formEditVisible = true;
|
||||
},
|
||||
handleUpdate() {
|
||||
this.formEditVisible = true
|
||||
this.formEditVisible = true;
|
||||
},
|
||||
handleMouseEnter(row) {
|
||||
this.thatRow = row
|
||||
this.thatRow = row;
|
||||
},
|
||||
formEditSuccess() {
|
||||
this.formEditVisible = false
|
||||
this.renderData()
|
||||
this.formEditVisible = false;
|
||||
this.renderData();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.popover-content {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user