java-mall-admin/src/views/store/activity/discountbase/index.vue
2024-11-01 16:24:11 +08:00

167 lines
4.5 KiB
Vue

<template>
<div class="store-activity-base-container">
<vab-query-form>
<vab-query-form-right-panel :span="24">
<el-form :inline="true" :model="queryForm" @submit.native.prevent>
<el-form-item>
<el-input
v-model.trim="queryForm.activity_name"
clearable
:placeholder="__('请输入活动标题')"
style="margin-right: 10px"
/>
</el-form-item>
<el-form-item>
<el-select
v-model="queryForm.activity_state"
clearable
:placeholder="__('请选择活动状态')"
>
<el-option :label="__('未开启')" :value="0" /><el-option :label="__('正常')" :value="1" /><el-option :label="__('已结束')" :value="2" /><el-option :label="__('商家关闭')" :value="3" /><el-option :label="__('管理员关闭')" :value="4" />
</el-select>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-search" type="primary" @click="queryData">
{{ __('查询') }}
</el-button>
</el-form-item>
</el-form>
</vab-query-form-right-panel>
</vab-query-form>
<el-table
v-loading="listLoading"
border
:data="list"
:height="tableConfig.height"
>
<el-table-column
align="center"
:label="__('店铺编号')"
prop="store_id"
show-overflow-tooltip
/>
<el-table-column
align="center"
:label="__('店铺名称')"
prop="store_name"
show-overflow-tooltip
/>
<el-table-column
align="center"
:label="__('活动标题')"
prop="activity_title"
show-overflow-tooltip
/>
<el-table-column
align="center"
:formatter="formatStarttime"
:label="__('活动开始时间')"
prop="activity_starttime"
show-overflow-tooltip
/>
<el-table-column
align="center"
:formatter="formatEndtime"
:label="__('活动结束时间')"
prop="activity_endtime"
show-overflow-tooltip
/>
<el-table-column
align="center"
:label="__('活动状态')"
prop="activity_state"
show-overflow-tooltip
/>
<el-table-column
align="center"
:label="__('活动商品')"
prop="activity_rule.product_name"
show-overflow-tooltip
/>
<el-table-column
align="center"
:label="__('活动规则')"
prop="item_id"
show-overflow-tooltip
width="250"
>
<template slot-scope="scope">
<div v-if="scope.row.item">
<el-row v-for="item in scope.row.item" :key="item.item_id">
{{ item.product_item_name }}
</el-row>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination
background
:current-page="queryForm.pageNum"
:layout="layout"
:page-size="queryForm.pageSize"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</div>
</template>
<script>
import { translateTitle as __ } from '@/utils/i18n'
import { getList } from '@/api/store/activity/base'
import { renderTime } from '@/utils/date'
export default {
name: 'StoreActivityBase',
components: {},
data() {
return {
tableConfig: {
height: window.innerHeight - 220 - 90,
},
list: [],
listLoading: true,
layout: 'total, sizes, prev, pager, next, jumper',
total: 0,
selectRows: '',
queryForm: {
pageNum: 1,
pageSize: 20,
activity_type_id: 1126,
},
}
},
created() {
this.fetchData()
},
methods: {
__,
formatStarttime(row) {
return renderTime(row.activity_starttime)
},
formatEndtime(row) {
return renderTime(row.activity_endtime)
},
handleSizeChange(val) {
this.queryForm.pageSize = val
this.fetchData()
},
handleCurrentChange(val) {
this.queryForm.pageNum = val
this.fetchData()
},
queryData() {
this.queryForm.pageNum = 1
this.fetchData()
},
async fetchData() {
this.listLoading = true
const { data } = await getList(this.queryForm)
this.list = data.items
this.total = data.records
this.listLoading = false
},
},
}
</script>