全局代码格式 优化
This commit is contained in:
Pan
@@ -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, {
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
onEnd: evt => {
|
||||
const tempIndex = this.newList.splice(evt.oldIndex, 1)[0];
|
||||
this.newList.splice(evt.newIndex, 0, tempIndex);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style >
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div style='margin:0 0 5px 20px'>固定表头 按照表头顺序排序</div>
|
||||
<fixed-thead/>
|
||||
<fixed-thead></fixed-thead>
|
||||
|
||||
<div style='margin:30px 0 5px 20px'>不固定表头 按照点击顺序排序</div>
|
||||
<unfixed-thead/>
|
||||
<unfixed-thead></unfixed-thead>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
|
||||
<el-table-column width="100px" label="重要性">
|
||||
<template scope="scope">
|
||||
<icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" ></icon-svg>
|
||||
<icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n"></icon-svg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
|
||||
<el-table-column width="80px" label="重要性">
|
||||
<template scope="scope">
|
||||
<icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" ></icon-svg>
|
||||
<icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n"></icon-svg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@@ -150,199 +150,199 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchList, fetchPv } from 'api/article_table';
|
||||
import { parseTime } from 'utils';
|
||||
import { fetchList, fetchPv } from 'api/article_table';
|
||||
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
|
||||
}, {});
|
||||
// arr to obj
|
||||
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
|
||||
acc[cur.key] = cur.display_name;
|
||||
return acc
|
||||
}, {});
|
||||
|
||||
export default {
|
||||
name: 'table_demo',
|
||||
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',
|
||||
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() {
|
||||
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;
|
||||
})
|
||||
},
|
||||
handleFilter() {
|
||||
this.getList();
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'gray',
|
||||
deleted: 'danger'
|
||||
};
|
||||
return statusMap[status]
|
||||
},
|
||||
typeFilter(type) {
|
||||
return calendarTypeKeyValue[type]
|
||||
}
|
||||
handleSizeChange(val) {
|
||||
this.listQuery.limit = val;
|
||||
this.getList();
|
||||
},
|
||||
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;
|
||||
}
|
||||
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]
|
||||
}
|
||||
}))
|
||||
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);
|
||||
},
|
||||
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]
|
||||
}
|
||||
}))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user