zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

u+

This commit is contained in:
Pan 2019-04-03 17:10:27 +08:00
parent 8a2c4a9549
commit 22b89a29d6
2 changed files with 57 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/views/table/complexTable.vue
View File

@ -1,27 +1,27 @@
<template>
<div class="app-container">
<div class="filter-container">
<el-input v-model="listQuery.title" :placeholder="$t('table.title')" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
<el-select v-model="listQuery.importance" :placeholder="$t('table.importance')" clearable style="width: 90px" class="filter-item">
<el-input v-model="listQuery.title" placeholder="Title" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
<el-select v-model="listQuery.importance" placeholder="Imp" clearable style="width: 90px" class="filter-item">
<el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
</el-select>
<el-select v-model="listQuery.type" :placeholder="$t('table.type')" clearable class="filter-item" style="width: 130px">
<el-select v-model="listQuery.type" placeholder="Type" clearable class="filter-item" style="width: 130px">
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
</el-select>
<el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
<el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
</el-select>
<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
{{ $t('table.search') }}
Search
</el-button>
<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
{{ $t('table.add') }}
Add
</el-button>
<el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
{{ $t('table.export') }}
Export
</el-button>
<el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
{{ $t('table.reviewer') }}
reviewer
</el-checkbox>
</div>
@ -35,63 +35,63 @@
style="width: 100%;"
@sort-change="sortChange"
>
<el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="80">
<el-table-column label="ID" prop="id" sortable="custom" align="center" width="80">
<template slot-scope="scope">
<span>{{ scope.row.id }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('table.date')" width="150px" align="center">
<el-table-column label="Date" width="150px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('table.title')" min-width="150px">
<el-table-column label="Title" min-width="150px">
<template slot-scope="{row}">
<span class="link-type" @click="handleUpdate(row)">{{ row.title }}</span>
<el-tag>{{ row.type | typeFilter }}</el-tag>
</template>
</el-table-column>
<el-table-column :label="$t('table.author')" width="110px" align="center">
<el-table-column label="Author" width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.author }}</span>
</template>
</el-table-column>
<el-table-column v-if="showReviewer" :label="$t('table.reviewer')" width="110px" align="center">
<el-table-column v-if="showReviewer" label="Reviewer" width="110px" align="center">
<template slot-scope="scope">
<span style="color:red;">{{ scope.row.reviewer }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('table.importance')" width="80px">
<el-table-column label="Imp" width="80px">
<template slot-scope="scope">
<svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon" />
</template>
</el-table-column>
<el-table-column :label="$t('table.readings')" align="center" width="95">
<el-table-column label="Readings" align="center" width="95">
<template slot-scope="{row}">
<span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
<span v-else>0</span>
</template>
</el-table-column>
<el-table-column :label="$t('table.status')" class-name="status-col" width="100">
<el-table-column label="Status" class-name="status-col" width="100">
<template slot-scope="{row}">
<el-tag :type="row.status | statusFilter">
{{ row.status }}
</el-tag>
</template>
</el-table-column>
<el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
<el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
<template slot-scope="{row}">
<el-button type="primary" size="mini" @click="handleUpdate(row)">
{{ $t('table.edit') }}
Edit
</el-button>
<el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">
{{ $t('table.publish') }}
Publish
</el-button>
<el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
{{ $t('table.draft') }}
Draft
</el-button>
<el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(row,'deleted')">
{{ $t('table.delete') }}
Delete
</el-button>
</template>
</el-table-column>
@ -101,35 +101,35 @@
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
<el-form-item :label="$t('table.type')" prop="type">
<el-form-item label="Type" prop="type">
<el-select v-model="temp.type" class="filter-item" placeholder="Please select">
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
</el-select>
</el-form-item>
<el-form-item :label="$t('table.date')" prop="timestamp">
<el-form-item label="Date" prop="timestamp">
<el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date" />
</el-form-item>
<el-form-item :label="$t('table.title')" prop="title">
<el-form-item label="Title" prop="title">
<el-input v-model="temp.title" />
</el-form-item>
<el-form-item :label="$t('table.status')">
<el-form-item label="Status">
<el-select v-model="temp.status" class="filter-item" placeholder="Please select">
<el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item :label="$t('table.importance')">
<el-form-item label="Imp">
<el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />
</el-form-item>
<el-form-item :label="$t('table.remark')">
<el-form-item label="Remark">
<el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">
{{ $t('table.cancel') }}
Cancel
</el-button>
<el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
{{ $t('table.confirm') }}
Confirm
</el-button>
</div>
</el-dialog>
@ -140,7 +140,7 @@
<el-table-column prop="pv" label="Pv" />
</el-table>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogPvVisible = false">{{ $t('table.confirm') }}</el-button>
<el-button type="primary" @click="dialogPvVisible = false">Confirm</el-button>
</span>
</el-dialog>
</div>
@ -248,7 +248,7 @@ export default {
},
handleModifyStatus(row, status) {
this.$message({
message: '操作成功',
message: '操作Success',
type: 'success'
})
row.status = status
@ -295,8 +295,8 @@ export default {
this.list.unshift(this.temp)
this.dialogFormVisible = false
this.$notify({
title: '成功',
message: '创建成功',
title: 'Success',
message: 'Created Successfully',
type: 'success',
duration: 2000
})
@ -328,8 +328,8 @@ export default {
}
this.dialogFormVisible = false
this.$notify({
title: '成功',
message: '更新成功',
title: 'Success',
message: 'Update Successfully',
type: 'success',
duration: 2000
})
@ -339,8 +339,8 @@ export default {
},
handleDelete(row) {
this.$notify({
title: '成功',
message: '删除成功',
title: 'Success',
message: 'Delete Successfully',
type: 'success',
duration: 2000
})

24
src/views/table/inlineEditTable.vue
View File

@ -37,7 +37,13 @@
<template slot-scope="{row}">
<template v-if="row.edit">
<el-input v-model="row.title" class="edit-input" size="small" />
<el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(row)">
<el-button
class="cancel-btn"
size="small"
icon="el-icon-refresh"
type="warning"
@click="cancelEdit(row)"
>
cancel
</el-button>
</template>
@ -47,10 +53,22 @@
<el-table-column align="center" label="Actions" width="120">
<template slot-scope="{row}">
<el-button v-if="row.edit" type="success" size="small" icon="el-icon-circle-check-outline" @click="confirmEdit(row)">
<el-button
v-if="row.edit"
type="success"
size="small"
icon="el-icon-circle-check-outline"
@click="confirmEdit(row)"
>
Ok
</el-button>
<el-button v-else type="primary" size="small" icon="el-icon-edit" @click="row.edit=!row.edit">
<el-button
v-else
type="primary"
size="small"
icon="el-icon-edit"
@click="row.edit=!row.edit"
>
Edit
</el-button>
</template>