全局lint优化
This commit is contained in:
@@ -60,64 +60,64 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchList } from 'api/article_table';
|
||||
import Sortable from 'sortablejs'
|
||||
import { fetchList } from 'api/article_table'
|
||||
import Sortable from 'sortablejs'
|
||||
|
||||
export default {
|
||||
name: 'drag-table_demo',
|
||||
data() {
|
||||
return {
|
||||
list: null,
|
||||
total: null,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 10
|
||||
},
|
||||
sortable: null,
|
||||
olderList: [],
|
||||
newList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'gray',
|
||||
deleted: 'danger'
|
||||
};
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.listLoading = true;
|
||||
fetchList(this.listQuery).then(response => {
|
||||
this.list = response.data.items;
|
||||
this.total = response.data.total;
|
||||
this.listLoading = false;
|
||||
this.olderList = this.list.map(v => v.id);
|
||||
this.newList = this.olderList.slice();
|
||||
this.$nextTick(() => {
|
||||
this.setSort()
|
||||
})
|
||||
})
|
||||
export default {
|
||||
name: 'drag-table_demo',
|
||||
data() {
|
||||
return {
|
||||
list: null,
|
||||
total: null,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 10
|
||||
},
|
||||
setSort() {
|
||||
const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];
|
||||
this.sortable = Sortable.create(el, {
|
||||
// handle: '.drag-handler',
|
||||
onEnd: evt => {
|
||||
const tempIndex = this.newList.splice(evt.oldIndex, 1)[0];
|
||||
this.newList.splice(evt.newIndex, 0, tempIndex);
|
||||
}
|
||||
});
|
||||
sortable: null,
|
||||
olderList: [],
|
||||
newList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'gray',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
fetchList(this.listQuery).then(response => {
|
||||
this.list = response.data.items
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
this.olderList = this.list.map(v => v.id)
|
||||
this.newList = this.olderList.slice()
|
||||
this.$nextTick(() => {
|
||||
this.setSort()
|
||||
})
|
||||
})
|
||||
},
|
||||
setSort() {
|
||||
const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
|
||||
this.sortable = Sortable.create(el, {
|
||||
// handle: '.drag-handler',
|
||||
onEnd: evt => {
|
||||
const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
|
||||
this.newList.splice(evt.newIndex, 0, tempIndex)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style >
|
||||
|
@@ -9,11 +9,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import fixedThead from './dynamictable/fixedThead'
|
||||
import unfixedThead from './dynamictable/unfixedThead'
|
||||
import fixedThead from './dynamictable/fixedThead'
|
||||
import unfixedThead from './dynamictable/unfixedThead'
|
||||
|
||||
export default {
|
||||
components: { fixedThead, unfixedThead }
|
||||
};
|
||||
export default {
|
||||
components: { fixedThead, unfixedThead }
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@@ -22,36 +22,37 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const defaultFormThead = ['apple', 'banana']; // 默认选中项
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [
|
||||
{
|
||||
name: 'fruit-1',
|
||||
apple: 'apple-10',
|
||||
banana: 'banana-10',
|
||||
orange: 'orange-10'
|
||||
},
|
||||
{
|
||||
name: 'fruit-2',
|
||||
apple: 'apple-20',
|
||||
banana: 'banana-20',
|
||||
orange: 'orange-20'
|
||||
}
|
||||
],
|
||||
key: 1, // table key
|
||||
formTheadOptions: ['apple', 'banana', 'orange'], // 可选择表头
|
||||
checkboxVal: defaultFormThead, // checkboxVal
|
||||
formThead: defaultFormThead // 默认表头
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
checkboxVal(valArr) {
|
||||
this.formThead = this.formTheadOptions.filter(i => valArr.indexOf(i) >= 0);
|
||||
this.key = this.key + 1;// 为了保证table 每次都会重渲 (牺牲性能保证效果,当然也可以不用)
|
||||
}
|
||||
const defaultFormThead = ['apple', 'banana'] // 默认选中项
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [
|
||||
{
|
||||
name: 'fruit-1',
|
||||
apple: 'apple-10',
|
||||
banana: 'banana-10',
|
||||
orange: 'orange-10'
|
||||
},
|
||||
{
|
||||
name: 'fruit-2',
|
||||
apple: 'apple-20',
|
||||
banana: 'banana-20',
|
||||
orange: 'orange-20'
|
||||
}
|
||||
],
|
||||
key: 1, // table key
|
||||
formTheadOptions: ['apple', 'banana', 'orange'], // 可选择表头
|
||||
checkboxVal: defaultFormThead, // checkboxVal
|
||||
formThead: defaultFormThead // 默认表头
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
checkboxVal(valArr) {
|
||||
this.formThead = this.formTheadOptions.filter(i => valArr.indexOf(i) >= 0)
|
||||
this.key = this.key + 1// 为了保证table 每次都会重渲 (牺牲性能保证效果,当然也可以不用)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@@ -23,25 +23,25 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [
|
||||
{
|
||||
name: 'fruit-1',
|
||||
apple: 'apple-10',
|
||||
banana: 'banana-10',
|
||||
orange: 'orange-10'
|
||||
},
|
||||
{
|
||||
name: 'fruit-2',
|
||||
apple: 'apple-20',
|
||||
banana: 'banana-20',
|
||||
orange: 'orange-20'
|
||||
}
|
||||
],
|
||||
formThead: ['apple', 'banana']
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [
|
||||
{
|
||||
name: 'fruit-1',
|
||||
apple: 'apple-10',
|
||||
banana: 'banana-10',
|
||||
orange: 'orange-10'
|
||||
},
|
||||
{
|
||||
name: 'fruit-2',
|
||||
apple: 'apple-20',
|
||||
banana: 'banana-20',
|
||||
orange: 'orange-20'
|
||||
}
|
||||
],
|
||||
formThead: ['apple', 'banana']
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@@ -52,44 +52,44 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchList } from 'api/article_table';
|
||||
import { fetchList } from 'api/article_table'
|
||||
|
||||
export default {
|
||||
name: 'inline_edit-table_demo',
|
||||
data() {
|
||||
return {
|
||||
list: null,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'gray',
|
||||
deleted: 'danger'
|
||||
};
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.listLoading = true;
|
||||
fetchList(this.listQuery).then(response => {
|
||||
this.list = response.data.items.map(v => {
|
||||
v.edit = false;
|
||||
return v
|
||||
});
|
||||
this.listLoading = false;
|
||||
})
|
||||
export default {
|
||||
name: 'inline_edit-table_demo',
|
||||
data() {
|
||||
return {
|
||||
list: null,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'gray',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
fetchList(this.listQuery).then(response => {
|
||||
this.list = response.data.items.map(v => {
|
||||
v.edit = false
|
||||
return v
|
||||
})
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@@ -150,203 +150,203 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchList, fetchPv } from 'api/article_table';
|
||||
import waves from '@/directive/waves.js';// 水波纹指令
|
||||
import { parseTime } from 'utils';
|
||||
import { fetchList, fetchPv } from 'api/article_table'
|
||||
import waves from '@/directive/waves.js'// 水波纹指令
|
||||
import { parseTime } from 'utils'
|
||||
|
||||
const calendarTypeOptions = [
|
||||
const calendarTypeOptions = [
|
||||
{ key: 'CN', display_name: '中国' },
|
||||
{ key: 'US', display_name: '美国' },
|
||||
{ key: 'JP', display_name: '日本' },
|
||||
{ key: 'EU', display_name: '欧元区' }
|
||||
];
|
||||
]
|
||||
|
||||
// arr to obj
|
||||
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
|
||||
acc[cur.key] = cur.display_name;
|
||||
return acc
|
||||
}, {});
|
||||
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
|
||||
acc[cur.key] = cur.display_name
|
||||
return acc
|
||||
}, {})
|
||||
|
||||
export default {
|
||||
name: 'table_demo',
|
||||
directives: {
|
||||
waves
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: null,
|
||||
total: null,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20,
|
||||
importance: undefined,
|
||||
title: undefined,
|
||||
type: undefined,
|
||||
sort: '+id'
|
||||
},
|
||||
temp: {
|
||||
id: undefined,
|
||||
importance: 0,
|
||||
remark: '',
|
||||
timestamp: 0,
|
||||
title: '',
|
||||
type: '',
|
||||
status: 'published'
|
||||
},
|
||||
importanceOptions: [1, 2, 3],
|
||||
calendarTypeOptions,
|
||||
sortOptions: [{ label: '按ID升序列', key: '+id' }, { label: '按ID降序', key: '-id' }],
|
||||
statusOptions: ['published', 'draft', 'deleted'],
|
||||
dialogFormVisible: false,
|
||||
dialogStatus: '',
|
||||
textMap: {
|
||||
update: '编辑',
|
||||
create: '创建'
|
||||
},
|
||||
dialogPvVisible: false,
|
||||
pvData: [],
|
||||
showAuditor: false,
|
||||
tableKey: 0
|
||||
export default {
|
||||
name: 'table_demo',
|
||||
directives: {
|
||||
waves
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: null,
|
||||
total: null,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20,
|
||||
importance: undefined,
|
||||
title: undefined,
|
||||
type: undefined,
|
||||
sort: '+id'
|
||||
},
|
||||
temp: {
|
||||
id: undefined,
|
||||
importance: 0,
|
||||
remark: '',
|
||||
timestamp: 0,
|
||||
title: '',
|
||||
type: '',
|
||||
status: 'published'
|
||||
},
|
||||
importanceOptions: [1, 2, 3],
|
||||
calendarTypeOptions,
|
||||
sortOptions: [{ label: '按ID升序列', key: '+id' }, { label: '按ID降序', key: '-id' }],
|
||||
statusOptions: ['published', 'draft', 'deleted'],
|
||||
dialogFormVisible: false,
|
||||
dialogStatus: '',
|
||||
textMap: {
|
||||
update: '编辑',
|
||||
create: '创建'
|
||||
},
|
||||
dialogPvVisible: false,
|
||||
pvData: [],
|
||||
showAuditor: false,
|
||||
tableKey: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'gray',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
typeFilter(type) {
|
||||
return calendarTypeKeyValue[type]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
fetchList(this.listQuery).then(response => {
|
||||
this.list = response.data.items
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'gray',
|
||||
deleted: 'danger'
|
||||
};
|
||||
return statusMap[status]
|
||||
},
|
||||
typeFilter(type) {
|
||||
return calendarTypeKeyValue[type]
|
||||
handleFilter() {
|
||||
this.getList()
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.listQuery.limit = val
|
||||
this.getList()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.listQuery.page = val
|
||||
this.getList()
|
||||
},
|
||||
timeFilter(time) {
|
||||
if (!time[0]) {
|
||||
this.listQuery.start = undefined
|
||||
this.listQuery.end = undefined
|
||||
return
|
||||
}
|
||||
this.listQuery.start = parseInt(+time[0] / 1000)
|
||||
this.listQuery.end = parseInt((+time[1] + 3600 * 1000 * 24) / 1000)
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.listLoading = true;
|
||||
fetchList(this.listQuery).then(response => {
|
||||
this.list = response.data.items;
|
||||
this.total = response.data.total;
|
||||
this.listLoading = false;
|
||||
})
|
||||
},
|
||||
handleFilter() {
|
||||
this.getList();
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.listQuery.limit = val;
|
||||
this.getList();
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.listQuery.page = val;
|
||||
this.getList();
|
||||
},
|
||||
timeFilter(time) {
|
||||
if (!time[0]) {
|
||||
this.listQuery.start = undefined;
|
||||
this.listQuery.end = undefined;
|
||||
return;
|
||||
handleModifyStatus(row, status) {
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
})
|
||||
row.status = status
|
||||
},
|
||||
handleCreate() {
|
||||
this.resetTemp()
|
||||
this.dialogStatus = 'create'
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
handleUpdate(row) {
|
||||
this.temp = Object.assign({}, row)
|
||||
this.dialogStatus = 'update'
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
handleDelete(row) {
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
const index = this.list.indexOf(row)
|
||||
this.list.splice(index, 1)
|
||||
},
|
||||
create() {
|
||||
this.temp.id = parseInt(Math.random() * 100) + 1024
|
||||
this.temp.timestamp = +new Date()
|
||||
this.temp.author = '原创作者'
|
||||
this.list.unshift(this.temp)
|
||||
this.dialogFormVisible = false
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '创建成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
},
|
||||
update() {
|
||||
this.temp.timestamp = +this.temp.timestamp
|
||||
for (const v of this.list) {
|
||||
if (v.id === this.temp.id) {
|
||||
const index = this.list.indexOf(v)
|
||||
this.list.splice(index, 1, this.temp)
|
||||
break
|
||||
}
|
||||
this.listQuery.start = parseInt(+time[0] / 1000);
|
||||
this.listQuery.end = parseInt((+time[1] + 3600 * 1000 * 24) / 1000);
|
||||
},
|
||||
handleModifyStatus(row, status) {
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
row.status = status;
|
||||
},
|
||||
handleCreate() {
|
||||
this.resetTemp();
|
||||
this.dialogStatus = 'create';
|
||||
this.dialogFormVisible = true;
|
||||
},
|
||||
handleUpdate(row) {
|
||||
this.temp = Object.assign({}, row);
|
||||
this.dialogStatus = 'update';
|
||||
this.dialogFormVisible = true;
|
||||
},
|
||||
handleDelete(row) {
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
const index = this.list.indexOf(row);
|
||||
this.list.splice(index, 1);
|
||||
},
|
||||
create() {
|
||||
this.temp.id = parseInt(Math.random() * 100) + 1024;
|
||||
this.temp.timestamp = +new Date();
|
||||
this.temp.author = '原创作者';
|
||||
this.list.unshift(this.temp);
|
||||
this.dialogFormVisible = false;
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '创建成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
},
|
||||
update() {
|
||||
this.temp.timestamp = +this.temp.timestamp;
|
||||
for (const v of this.list) {
|
||||
if (v.id === this.temp.id) {
|
||||
const index = this.list.indexOf(v);
|
||||
this.list.splice(index, 1, this.temp);
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.dialogFormVisible = false;
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '更新成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
},
|
||||
resetTemp() {
|
||||
this.temp = {
|
||||
id: undefined,
|
||||
importance: 0,
|
||||
remark: '',
|
||||
timestamp: 0,
|
||||
title: '',
|
||||
status: 'published',
|
||||
type: ''
|
||||
};
|
||||
},
|
||||
handleFetchPv(pv) {
|
||||
fetchPv(pv).then(response => {
|
||||
this.pvData = response.data.pvData;
|
||||
this.dialogPvVisible = true;
|
||||
})
|
||||
},
|
||||
handleDownload() {
|
||||
require.ensure([], () => {
|
||||
const { export_json_to_excel } = require('vendor/Export2Excel');
|
||||
const tHeader = ['时间', '地区', '类型', '标题', '重要性'];
|
||||
const filterVal = ['timestamp', 'province', 'type', 'title', 'importance'];
|
||||
const data = this.formatJson(filterVal, this.list);
|
||||
export_json_to_excel(tHeader, data, 'table数据');
|
||||
})
|
||||
},
|
||||
formatJson(filterVal, jsonData) {
|
||||
return jsonData.map(v => filterVal.map(j => {
|
||||
if (j === 'timestamp') {
|
||||
return parseTime(v[j])
|
||||
} else {
|
||||
return v[j]
|
||||
}
|
||||
}))
|
||||
}
|
||||
this.dialogFormVisible = false
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '更新成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
},
|
||||
resetTemp() {
|
||||
this.temp = {
|
||||
id: undefined,
|
||||
importance: 0,
|
||||
remark: '',
|
||||
timestamp: 0,
|
||||
title: '',
|
||||
status: 'published',
|
||||
type: ''
|
||||
}
|
||||
},
|
||||
handleFetchPv(pv) {
|
||||
fetchPv(pv).then(response => {
|
||||
this.pvData = response.data.pvData
|
||||
this.dialogPvVisible = true
|
||||
})
|
||||
},
|
||||
handleDownload() {
|
||||
require.ensure([], () => {
|
||||
const { export_json_to_excel } = require('vendor/Export2Excel')
|
||||
const tHeader = ['时间', '地区', '类型', '标题', '重要性']
|
||||
const filterVal = ['timestamp', 'province', 'type', 'title', 'importance']
|
||||
const data = this.formatJson(filterVal, this.list)
|
||||
export_json_to_excel(tHeader, data, 'table数据')
|
||||
})
|
||||
},
|
||||
formatJson(filterVal, jsonData) {
|
||||
return jsonData.map(v => filterVal.map(j => {
|
||||
if (j === 'timestamp') {
|
||||
return parseTime(v[j])
|
||||
} else {
|
||||
return v[j]
|
||||
}
|
||||
}))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
Reference in New Issue
Block a user