|
|
@@ -0,0 +1,242 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-table
|
|
|
+ :key="tableKey"
|
|
|
+ v-loading="listLoading"
|
|
|
+ :data="list"
|
|
|
+ border
|
|
|
+ fit
|
|
|
+ highlight-current-row
|
|
|
+ style="width: 100%;"
|
|
|
+ >
|
|
|
+ <el-table-column :label="$t('ad.adTitle')" prop="id" align="center" :class-name="getSortClass('id')">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.TITLE }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column :label="$t('ad.adLocation')" prop="id" align="center" :class-name="getSortClass('id')">
|
|
|
+ <template :value="{allLocation}">
|
|
|
+ <span>{{ allLocation.LOCATION_NAME }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column :label="$t('ad.type')" align="center"> <!-- 类型 -->
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <template v-if="row.TYPE === '1'">
|
|
|
+ <el-tag type="success">External Links</el-tag> <!-- 外链 -->
|
|
|
+ </template>
|
|
|
+ <template v-else-if="row.TYPE === '2'">
|
|
|
+ <el-tag>Article</el-tag> <!-- 文章 -->
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column :label="$t('ad.content')" prop="id" align="center" :class-name="getSortClass('id')">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <div v-if="row.TYPE === '1'">
|
|
|
+ <el-link type="primary" target="_blank" :href="getHref(row.CONTENT)">{{ row.CONTENT }}</el-link>
|
|
|
+ </div><!-- 链接 -->
|
|
|
+ <div v-else-if="row.TYPE === '2'">
|
|
|
+ <router-link :to="`/article/detail/${row.CONTENT}`" target="_blank" style="cursor: pointer;">{{ getContent(row.CONTENT) }}</router-link>
|
|
|
+ </div><!-- 文章 -->
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column :label="$t('ad.sort')" prop="id" align="center" :class-name="getSortClass('id')">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-input
|
|
|
+ v-model="row.SORT"
|
|
|
+ min="0"
|
|
|
+ max="99"
|
|
|
+ @change="handleChangeSort(row.ID, row.SORT)"
|
|
|
+ @click.native.stop=""
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column :label="$t('ad.creator')" prop="id" align="center" :class-name="getSortClass('id')">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.CREATE_ADMIN_NAME }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column :label="$t('ad.createTime')" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.CREATED_AT | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column :label="$t('ad.modifiedBy')" prop="id" align="center" width="80" :class-name="getSortClass('id')">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.UPDATE_ADMIN_NAME }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column :label="$t('ad.modifiedTime')" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.UPDATED_AT | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column :label="$t('ad.status')" align="center"> <!-- 类型 -->
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <template v-if="row.STATUS === '1'">
|
|
|
+ <el-tag type="success">show</el-tag> <!-- 外链 -->
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <el-tag>hide</el-tag> <!-- 文章 -->
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column :label="$t('ad.action')" align="center" class-name="small-padding fixed-width" />
|
|
|
+ </el-table>
|
|
|
+ <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { fetchAdList, fetchChangeSort } from '@/api/ad'
|
|
|
+import waves from '@/directive/waves' // waves directive
|
|
|
+import { parseTime } from '@/utils'
|
|
|
+import Pagination from '@/components/Pagination' // secondary package based on el-pagination
|
|
|
+
|
|
|
+const calendarTypeOptions = [
|
|
|
+ { key: 'CN', display_name: 'China' },
|
|
|
+ { key: 'US', display_name: 'USA' }
|
|
|
+]
|
|
|
+
|
|
|
+// arr to obj, such as { CN : "China", US : "USA" }
|
|
|
+const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
|
|
|
+ acc[cur.key] = cur.display_name
|
|
|
+ return acc
|
|
|
+}, {})
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'ComplexTable',
|
|
|
+ components: { Pagination },
|
|
|
+ directives: { waves },
|
|
|
+ filters: {
|
|
|
+ statusFilter(status) {
|
|
|
+ const statusMap = {
|
|
|
+ published: 'success',
|
|
|
+ draft: 'info',
|
|
|
+ deleted: 'danger'
|
|
|
+ }
|
|
|
+ return statusMap[status]
|
|
|
+ },
|
|
|
+ typeFilter(type) {
|
|
|
+ return calendarTypeKeyValue[type]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableKey: 0,
|
|
|
+ list: null,
|
|
|
+ total: 0,
|
|
|
+ listLoading: true,
|
|
|
+ listQuery: {
|
|
|
+ page: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ adId: null
|
|
|
+ },
|
|
|
+ changeSort: {
|
|
|
+ id: null,
|
|
|
+ sort: null
|
|
|
+ },
|
|
|
+ sort: '',
|
|
|
+ importanceOptions: [1, 2, 3],
|
|
|
+ calendarTypeOptions,
|
|
|
+ sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
|
|
|
+ statusOptions: ['published', 'draft', 'deleted'],
|
|
|
+ showReviewer: false,
|
|
|
+ temp: {
|
|
|
+ id: undefined,
|
|
|
+ importance: 1,
|
|
|
+ remark: '',
|
|
|
+ timestamp: new Date(),
|
|
|
+ title: '',
|
|
|
+ type: '',
|
|
|
+ status: 'published'
|
|
|
+ },
|
|
|
+ dialogFormVisible: false,
|
|
|
+ dialogStatus: '',
|
|
|
+ textMap: {
|
|
|
+ update: 'Edit',
|
|
|
+ create: 'Create'
|
|
|
+ },
|
|
|
+ dialogPvVisible: false,
|
|
|
+ pvData: [],
|
|
|
+ rules: {
|
|
|
+ type: [{ required: true, message: 'type is required', trigger: 'change' }],
|
|
|
+ timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
|
|
|
+ title: [{ required: true, message: 'title is required', trigger: 'blur' }]
|
|
|
+ },
|
|
|
+ downloadLoading: false,
|
|
|
+ allArticle: [],
|
|
|
+ allLocation: {
|
|
|
+ LOCATION_NAME: null
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getList() {
|
|
|
+ this.listLoading = true
|
|
|
+ this.listQuery.adId = this.$route.params
|
|
|
+ fetchAdList(this.listQuery).then(response => {
|
|
|
+ this.list = response.data.list
|
|
|
+ this.total = response.data.totalCount
|
|
|
+ this.allArticle = response.data.allArticle
|
|
|
+ const ad_id = this.listQuery.adId.ID
|
|
|
+ this.allLocation = response.data.allLocation[ad_id]
|
|
|
+ // Just to simulate the time of the request
|
|
|
+ setTimeout(() => {
|
|
|
+ this.listLoading = false
|
|
|
+ }, 1.5 * 1000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleFilter() {
|
|
|
+ this.listQuery.page = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ resetTemp() {
|
|
|
+ this.temp = {
|
|
|
+ id: undefined,
|
|
|
+ importance: 1,
|
|
|
+ remark: '',
|
|
|
+ timestamp: new Date(),
|
|
|
+ title: '',
|
|
|
+ status: 'published',
|
|
|
+ type: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleView(row) {
|
|
|
+ this.$router.push(`/ad/list/${row.ID}`)
|
|
|
+ },
|
|
|
+ formatJson(filterVal) {
|
|
|
+ return this.list.map(v => filterVal.map(j => {
|
|
|
+ if (j === 'timestamp') {
|
|
|
+ return parseTime(v[j])
|
|
|
+ } else {
|
|
|
+ return v[j]
|
|
|
+ }
|
|
|
+ }))
|
|
|
+ },
|
|
|
+ getSortClass: function(key) {
|
|
|
+ const sort = this.listQuery.sort
|
|
|
+ return sort === `+${key}` ? 'ascending' : 'descending'
|
|
|
+ },
|
|
|
+ handleChangeSort(id, sort) {
|
|
|
+ this.changeSort.id = id
|
|
|
+ this.changeSort.sort = sort
|
|
|
+ fetchChangeSort(this.changeSort).then(response => {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.listLoading = false
|
|
|
+ }, 1.5 * 1000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getContent(aid) {
|
|
|
+ const titles = this.allArticle.filter(article => article.ID === aid).map(article => article.TITLE)
|
|
|
+ console.log(titles)
|
|
|
+ return titles.length > 0 ? titles[0] : aid
|
|
|
+ },
|
|
|
+ getHref(link) {
|
|
|
+ return link.indexOf('http') > -1 ? link : 'http://' + link
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
joway