Skip to content

V
VueElementTemplate
Commit 72fad2c9 authored by 胡小根's avatar 胡小根
Browse files
Options

add lodash support

parent 05639637
Hide whitespace changes
Inline Side-by-side
Showing with 16 additions and 114 deletions
package.json
View file @ 72fad2c9
...@@ -26,6 +26,7 @@ ...@@ -26,6 +26,7 @@
"js-cookie": "2.2.0", "js-cookie": "2.2.0",
"jsonlint": "1.6.2", "jsonlint": "1.6.2",
"jszip": "3.1.5", "jszip": "3.1.5",
"lodash": "^4.17.5",
"mockjs": "1.0.1-beta3", "mockjs": "1.0.1-beta3",
"normalize.css": "7.0.0", "normalize.css": "7.0.0",
"nprogress": "0.2.0", "nprogress": "0.2.0",
......
src/views/haomo/components/tables/HmComplexTable.vue
View file @ 72fad2c9
...@@ -2,146 +2,39 @@ ...@@ -2,146 +2,39 @@
<div class="app-container calendar-list-container"> <div class="app-container calendar-list-container">
<!-- 过滤 --> <!-- 过滤 -->
<div class="filter-container"> <div class="filter-container">
<el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" :placeholder="$t('table.title')" v-model="listQuery.title">
</el-input>
<el-select clearable style="width: 90px" class="filter-item" v-model="listQuery.importance" :placeholder="$t('table.importance')">
<el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item">
</el-option>
</el-select>
<el-select clearable class="filter-item" style="width: 130px" v-model="listQuery.type" :placeholder="$t('table.type')">
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key">
</el-option>
</el-select>
<el-select @change='handleFilter' style="width: 140px" class="filter-item" v-model="listQuery.sort">
<el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key">
</el-option>
</el-select>
<el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('table.search')}}</el-button> <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('table.search')}}</el-button>
<el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">{{$t('table.add')}}</el-button>
<el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download" @click="handleDownload">{{$t('table.export')}}</el-button> <el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download" @click="handleDownload">{{$t('table.export')}}</el-button>
<el-checkbox class="filter-item" style='margin-left:15px;' @change='tableKey=tableKey+1' v-model="showReviewer">{{$t('table.reviewer')}}</el-checkbox>
</div> </div>
<!-- end 过滤 --> <!-- end 过滤 -->
<!-- 表格 --> <!-- 表格 -->
<el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
style="width: 100%"> style="width: 100%">
<el-table-column align="center" :label="$t('table.id')" width="65"> <el-table-column v-for="" align="center" :label="$t('table.id')" width="65">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.id}}</span> <span>{{scope.row.id}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="150px" align="center" :label="$t('table.date')">
<template slot-scope="scope">
<span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
</template>
</el-table-column>
<el-table-column min-width="150px" :label="$t('table.title')">
<template slot-scope="scope">
<span class="link-type" @click="handleUpdate(scope.row)">{{scope.row.title}}</span>
<el-tag>{{scope.row.type | typeFilter}}</el-tag>
</template>
</el-table-column>
<el-table-column width="110px" align="center" :label="$t('table.author')">
<template slot-scope="scope">
<span>{{scope.row.author}}</span>
</template>
</el-table-column>
<el-table-column width="110px" v-if='showReviewer' align="center" :label="$t('table.reviewer')">
<template slot-scope="scope">
<span style='color:red;'>{{scope.row.reviewer}}</span>
</template>
</el-table-column>
<el-table-column width="80px" :label="$t('table.importance')">
<template slot-scope="scope">
<svg-icon v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></svg-icon>
</template>
</el-table-column>
<el-table-column align="center" :label="$t('table.readings')" width="95">
<template slot-scope="scope">
<span v-if="scope.row.pageviews" class="link-type" @click='handleFetchPv(scope.row.pageviews)'>{{scope.row.pageviews}}</span>
<span v-else>0</span>
</template>
</el-table-column>
<el-table-column class-name="status-col" :label="$t('table.status')" width="100">
<template slot-scope="scope">
<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
</template>
</el-table-column>
<el-table-column align="center" :label="$t('table.actions')" width="230" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{$t('table.edit')}}</el-button>
<el-button v-if="scope.row.status!='published'" size="mini" type="success" @click="handleModifyStatus(scope.row,'published')">{{$t('table.publish')}}
</el-button>
<el-button v-if="scope.row.status!='draft'" size="mini" @click="handleModifyStatus(scope.row,'draft')">{{$t('table.draft')}}
</el-button>
<el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">{{$t('table.delete')}}
</el-button>
</template>
</el-table-column>
</el-table> </el-table>
<!-- end 表格 --> <!-- end 表格 -->
<!-- 翻页 --> <!-- 翻页 -->
<div class="pagination-container"> <div class="pagination-container">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
:page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> :page-sizes="[10,20,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination> </el-pagination>
</div> </div>
<!-- end翻页 --> <!-- end翻页 -->
<!-- 弹窗 --> <!-- 弹窗 -->
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible"> <!-- @TODO 补充弹窗 -->
<el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
<el-form-item :label="$t('table.type')" prop="type">
<el-select class="filter-item" v-model="temp.type" placeholder="Please select">
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key">
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('table.date')" prop="timestamp">
<el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date">
</el-date-picker>
</el-form-item>
<el-form-item :label="$t('table.title')" prop="title">
<el-input v-model="temp.title"></el-input>
</el-form-item>
<el-form-item :label="$t('table.status')">
<el-select class="filter-item" v-model="temp.status" placeholder="Please select">
<el-option v-for="item in statusOptions" :key="item" :label="item" :value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('table.importance')">
<el-rate style="margin-top:8px;" v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max='3'></el-rate>
</el-form-item>
<el-form-item :label="$t('table.remark')">
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="Please input" v-model="temp.remark">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">{{$t('table.cancel')}}</el-button>
<el-button v-if="dialogStatus=='create'" type="primary" @click="createData">{{$t('table.confirm')}}</el-button>
<el-button v-else type="primary" @click="updateData">{{$t('table.confirm')}}</el-button>
</div>
</el-dialog>
<!-- end 弹窗 --> <!-- end 弹窗 -->
<el-dialog title="Reading statistics" :visible.sync="dialogPvVisible">
<el-table :data="pvData" border fit highlight-current-row style="width: 100%">
<el-table-column prop="key" label="Channel"> </el-table-column>
<el-table-column prop="pv" label="Pv"> </el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogPvVisible = false">{{$t('table.confirm')}}</el-button>
</span>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import _ from 'lodash'
import request from '@/utils/request' import request from '@/utils/request'
import waves from '@/directive/waves' // 水波纹指令 import waves from '@/directive/waves' // 水波纹指令
...@@ -224,16 +117,24 @@ ...@@ -224,16 +117,24 @@
} }
}, },
created() { created() {
// @TODO init
this.getList() this.getList()
}, },
methods: { methods: {
init() {
let self = this
if(!self.columns || !self.columns.length){
self.columns =
}
},
getList() { getList() {
const self = this const self = this
self.listLoading = true self.listLoading = true
request(self.schema.modelUnderscorePlural).then(resp => { request(self.schema.modelUnderscorePlural).then(resp => {
console.log(resp) console.log(resp)
self.list = resp.data.data self.list = resp.data
self.total = resp.data.total self.total = resp.headers.total
self.listLoading = false self.listLoading = false
}) })
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment