|
|
|
<template>
|
|
|
|
<section class="todoapp">
|
|
|
|
<!-- header -->
|
|
|
|
<header class="header">
|
|
|
|
<input class="new-todo" autocomplete="off" placeholder="今日申报" @keyup.enter="addTodo">
|
|
|
|
</header>
|
|
|
|
<!-- main section -->
|
|
|
|
<section v-show="todos.length" class="main">
|
|
|
|
<input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })">
|
|
|
|
<label for="toggle-all" />
|
|
|
|
<ul class="todo-list">
|
|
|
|
<todo
|
|
|
|
v-for="(todo, index) in filteredTodos"
|
|
|
|
:key="index"
|
|
|
|
:todo="todo"
|
|
|
|
@toggleTodo="toggleTodo"
|
|
|
|
@editTodo="editTodo"
|
|
|
|
@deleteTodo="deleteTodo"
|
|
|
|
/>
|
|
|
|
</ul>
|
|
|
|
</section>
|
|
|
|
<!-- footer -->
|
|
|
|
<footer v-show="todos.length" class="footer">
|
|
|
|
<span class="todo-count">
|
|
|
|
<strong>{{ remaining }}</strong>
|
|
|
|
{{ remaining | pluralize('个转关运抵申请') }} 未申报
|
|
|
|
</span>
|
|
|
|
<ul class="filters">
|
|
|
|
<li v-for="(val, key) in filters" :key="key">
|
|
|
|
<a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
|
|
|
|
Clear completed
|
|
|
|
</button> -->
|
|
|
|
</footer>
|
|
|
|
</section>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import Todo from '@/views/dashboard/components/TodoList/Todo.vue'
|
|
|
|
import {selectTrans} from "@/api/trn";
|
|
|
|
|
|
|
|
const STORAGE_KEY = 'todos'
|
|
|
|
const filters = {
|
|
|
|
all: todos => todos,
|
|
|
|
active: todos => todos.filter(todo => !todo.done),
|
|
|
|
completed: todos => todos.filter(todo => todo.done)
|
|
|
|
}
|
|
|
|
const defalutList = [
|
|
|
|
{ text: '78406346432', done: false },
|
|
|
|
{ text: '78406305165_JHJ42194', done: false },
|
|
|
|
{ text: '78406347272', done: false },
|
|
|
|
{ text: '78406346782_DIM896002168', done: true },
|
|
|
|
{ text: 'vue', done: true },
|
|
|
|
{ text: 'element-ui', done: true },
|
|
|
|
{ text: 'axios', done: true },
|
|
|
|
{ text: 'webpack', done: true }
|
|
|
|
]
|
|
|
|
export default {
|
|
|
|
components: { Todo },
|
|
|
|
filters: {
|
|
|
|
pluralize: (n, w) => n === 1 ? w : w + ' ',
|
|
|
|
capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
visibility: 'all',
|
|
|
|
filters,
|
|
|
|
// todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
|
|
|
|
todos: []
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
allChecked() {
|
|
|
|
return this.todos.every(todo => todo.done)
|
|
|
|
},
|
|
|
|
filteredTodos() {
|
|
|
|
return filters[this.visibility](this.todos)
|
|
|
|
},
|
|
|
|
remaining() {
|
|
|
|
return this.todos.filter(todo => !todo.done).length
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted:function () {
|
|
|
|
this.trnList();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
setLocalStorage() {
|
|
|
|
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
|
|
|
|
},
|
|
|
|
addTodo(e) {
|
|
|
|
const text = e.target.value
|
|
|
|
if (text.trim()) {
|
|
|
|
this.todos.push({
|
|
|
|
text,
|
|
|
|
done: false
|
|
|
|
})
|
|
|
|
this.setLocalStorage()
|
|
|
|
}
|
|
|
|
e.target.value = ''
|
|
|
|
},
|
|
|
|
toggleTodo(val) {
|
|
|
|
val.done = !val.done
|
|
|
|
this.setLocalStorage()
|
|
|
|
},
|
|
|
|
deleteTodo(todo) {
|
|
|
|
this.todos.splice(this.todos.indexOf(todo), 1)
|
|
|
|
this.setLocalStorage()
|
|
|
|
},
|
|
|
|
editTodo({ todo, value }) {
|
|
|
|
todo.text = value
|
|
|
|
this.setLocalStorage()
|
|
|
|
},
|
|
|
|
clearCompleted() {
|
|
|
|
this.todos = this.todos.filter(todo => !todo.done)
|
|
|
|
this.setLocalStorage()
|
|
|
|
},
|
|
|
|
toggleAll({ done }) {
|
|
|
|
this.todos.forEach(todo => {
|
|
|
|
todo.done = done
|
|
|
|
this.setLocalStorage()
|
|
|
|
})
|
|
|
|
},
|
|
|
|
// 获取消息标签列表
|
|
|
|
trnList() {
|
|
|
|
const loading = this.$loading({
|
|
|
|
lock: true,
|
|
|
|
text: 'Loading',
|
|
|
|
spinner: 'el-icon-loading',
|
|
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
|
|
});
|
|
|
|
const _this = this
|
|
|
|
let para = {
|
|
|
|
billno: '',
|
|
|
|
customscode:'',
|
|
|
|
username:'',
|
|
|
|
trnmode:'',
|
|
|
|
unloadcode:'',
|
|
|
|
creattime:'',
|
|
|
|
startDate:'',
|
|
|
|
endDate:'',
|
|
|
|
pageNum: 1,
|
|
|
|
pageSize: 10
|
|
|
|
}
|
|
|
|
selectTrans(para).then((response) => {
|
|
|
|
const res = response.data
|
|
|
|
if (res.code !== '200') {
|
|
|
|
return _this.$message.error('获取消息收发记录，失败！')
|
|
|
|
}
|
|
|
|
// // 获取列表数据
|
|
|
|
let tableData = res.data.list
|
|
|
|
if (tableData){
|
|
|
|
for (let item of tableData) {
|
|
|
|
let todoListItem = {text: item.billno, done: false}
|
|
|
|
if (item.dstatus === '001') {
|
|
|
|
todoListItem.done = true;
|
|
|
|
}else{
|
|
|
|
todoListItem.done = false;
|
|
|
|
}
|
|
|
|
_this.todos.push(todoListItem)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// // 获取列表的总记录数
|
|
|
|
// _this.total = res.data.total
|
|
|
|
_this.$message.success('获取消息收发记录，成功！')
|
|
|
|
}).catch(error => {
|
|
|
|
// 关闭加载
|
|
|
|
_this.$message.error(error.toString())
|
|
|
|
}).finally(()=>{
|
|
|
|
loading.close();
|
|
|
|
})
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
@import '~@/views/dashboard/components/TodoList/index.scss';
|
|
|
|
</style> |
...
|
...
|
|
