接下来主要是周报管理页面的主页面 Weekly.vue 和详情页面 WeeklyDetail.vue。
一、Weekly.vue(周报管理主页面)
1.1 Weekly.vue 页面html部分:
<template>
<div class="weekly-wrap">
<!-- 搜索框 start -->
<el-form class="main-search" :inline="true" :model="keywords" ref="keywords" :rules="searchRules" label-position="left" label-width="85px" size="medium">
<el-row>
<el-col :span="6">
<el-form-item label="周报ID" prop="id">
<el-input type="number" v-model.number="keywords.id" placeholder="请输入周报ID"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="周报名称" prop="title">
<el-input v-model="keywords.title" placeholder="请输入周报名称"></el-input>
</el-form-item>
</el-col>
<el-col v-if="userPower" :span="6">
<el-form-item label="创建者" prop="userId">
<el-select v-model="keywords.userId" filterable remote reserve-keyword placeholder="请选择创建者" :remote-method="queryUserList">
<el-option
v-for="item in userList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="开始时间" prop="startTime">
<el-input v-model="keywords.startTime" placeholder="请输入创建时间"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="结束时间" prop="endTime">
<el-input v-model="keywords.endTime" placeholder="请输入创建时间"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item>
<el-button type="primary" @click="onSearch">搜索</el-button>
<el-button @click="onReset('keywords')">重置</el-button>
</el-form-item>
</el-row>
</el-form>
<!-- 搜索框 end -->
<!-- 分割线 start -->
<div class="hr-10"></div>
<!-- 分割线 end -->
<div class="main-content">
<div class="content-header">
<el-button type="primary" size="medium" @click="handleAdd">新增周报</el-button>
</div>
<el-table v-loading="!this.reqFlag.search" :data="tableData" header-row-class-name="table-header" border style="width: 100%">
<el-table-column prop="id" label="ID" align="center" width="120">
</el-table-column>
<el-table-column label="周报名称" align="center">
<template slot-scope="scope">
<el-button type="text" @click="goWeeklyDetails(scope.row.id)">{{scope.row.title}}</el-button>
</template>
</el-table-column>
<el-table-column prop="startTime" label="周报开始时间" align="center"></el-table-column>
<el-table-column prop="endTime" label="周报结束时间" align="center"></el-table-column>
<el-table-column prop="userName" label="创建者" align="center"></el-table-column>
<el-table-column prop="create_time" label="创建时间" align="center"></el-table-column>
<el-table-column prop="update_time" label="更新时间" align="center"></el-table-column>
<el-table-column label="操作" align="center" width="200">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.row.id)">编辑</el-button>
<el-button
size="mini"
type="danger" plain
@click="handleDelete(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="totalCount">
</el-pagination>
</div>
</div>
</template>
1.2 Weekly.vue 页面js部分:
<script>
import { userList, weeklyList, weeklyUpdateState } from '@/config/interface'
export default {
data () {
return {
keywords: {
id: null,
title: null,
userId: null,
startTime: null,
endTime: null
},
keywordsParams: {}, // 搜索请求是的搜索入参
searchRules: {
},
reqFlag: { // 防止频繁点击,造成连续多次发请求
user: true,
search: true,
delete: true
},
userList: [],
pageNum: 1, // 请求第几页
pageSize: this.$store.state.pageSize, // 每页请求多少条
currentPage: 1, // 初始时在第几页
totalCount: 0, // 总共多少条数据
tableData: []
}
},
computed: {
userType: function () {
let userType = this.$store.state.userInfo.type
return userType
},
userPower: function () {
let userType = this.$store.state.userInfo.type
return userType == 1
}
},
created () {
this.init()
},
methods: {
// 初始化
init () {
this.queryUserList('')
this.keywordsParams = JSON.parse(JSON.stringify(this.keywords))
this.queryWeeklyList()
},
queryUserList (userName) {
const url = userList
if (this.reqFlag.user) {
this.reqFlag.user = false
let params = {
userType: this.userType,
searchName: !userName ? null : userName,
pageNum: 1,
pageSize: 20
}
this.$http(url, params)
.then(res => {
if (res.code == 1) {
let data = res.data
let list = data.list
let objList = []
if (list.length > 0) {
for (let value of list) {
let obj = {
id: value.id,
name: value.name
}
objList.push(obj)
}
}
objList.unshift({ 'id': null, 'name': '全部' })
this.userList = objList
}
this.reqFlag.user = true
})
}
},
queryWeeklyList () {
const url = weeklyList
if (this.reqFlag.search) {
this.reqFlag.search = false
let params = {
searchId: this.keywordsParams.id,
searchTitle: this.keywordsParams.title,
searchUserId: this.keywordsParams.userId,
searchStartTime: this.keywordsParams.startTime,
searchEndTime: this.keywordsParams.endTime,
userType: this.userType,
pageNum: this.pageNum,
pageSize: this.pageSize
}
this.$http(url, params)
.then(res => {
if (res.code == 1) {
let data = res.data
this.tableData = data.list
this.totalCount = data.totalCount
this.currentPage = this.pageNum
}
this.reqFlag.search = true
})
}
},
onSearch () {
this.pageNum = 1
this.keywordsParams = JSON.parse(JSON.stringify(this.keywords))
this.queryWeeklyList()
},
handleCurrentChange (val) {
this.pageNum = val
this.queryWeeklyList()
},
onReset (formName) {
this.$refs[formName].resetFields()
this.pageNum = 1
this.keywordsParams = JSON.parse(JSON.stringify(this.keywords))
this.queryWeeklyList()
this.curPage = 1
},
handleAdd () {
this.$router.push({ path: '/home/weeklyadd' })
},
goWeeklyDetails (id) {
this.$router.push({
path: '/home/weeklydetail',
query: {
id: id
}
})
},
handleEdit (id) {
this.$router.push({
path: '/home/weeklyedit',
query: {
id: id
}
})
},
handleDelete (id) {
this.$common.msgBox('confirm', '操作提示', '是否确定删除此条周报信息?', () => {
const url = weeklyUpdateState
if (this.reqFlag.delete) {
this.reqFlag.delete = false
let params = {
id: id
}
this.$http(url, params)
.then(res => {
if (res.code == 1) {
this.$common.toast('删除成功', 'success', false)
this.queryWeeklyList()
}
this.reqFlag.delete = true
})
}
})
},
// 新增管理员子组件回调
callBackAdd () {
this.onReset('keywords')
this.pageNum = 1
this.queryWeeklyList()
this.curPage = 1
},
// 编辑管理员子组件回调
callBackEdit () {
this.queryWeeklyList()
}
}
}
</script>
1.3 Weekly.vue 页面展示:
二、WeeklyDetail.vue(周报管理详情页面)
2.1 WeeklyDetail.vue 页面html部分:
<template>
<div class="weekly-main-wrap weekly-add-wrap">
<h3 class="v-line-icon">周报详情</h3>
<el-form ref="formData" :model="formData" :rules="formRules" label-width="110px">
<el-form-item label="周报时间" prop="title">
<el-col :span="12">
<el-date-picker
v-model="formData.title"
type="week"
format="yyyy 第 WW 周"
value-format="yyyy-MM-dd"
placeholder="选择周"
:picker-options="pickerOptions"
:disabled="true">
</el-date-picker>
</el-col>
<el-col class="week-time" :span="12">
<span class="title">时间范围:</span>
<span><i class="el-icon-date"></i> {{startTime}}</span>
<span class="line">-</span>
<span><i class="el-icon-date"></i> {{endTime}}</span>
</el-col>
</el-form-item>
<el-form-item label="本周工作总结" prop="thisWeekWork">
<div class="week-work-box" v-html="formData.thisWeekWork"></div>
</el-form-item>
<el-form-item label="下周工作计划" prop="nextWeekWork">
<div class="week-work-box" v-html="formData.nextWeekWork"></div>
</el-form-item>
<el-form-item label="需协调与帮助" prop="collaboration">
<el-input v-model="formData.collaboration" :disabled="true"></el-input>
</el-form-item>
<el-form-item class="dialog-footer" align="center">
<el-button @click="onCancel('formData')">返回</el-button>
</el-form-item>
</el-form>
</div>
</template>
2.2 WeeklyDetail.vue 页面js部分:
<script>
import { weeklyDetail } from '@/config/interface'
import { quillEditor } from 'vue-quill-editor'
export default {
data () {
return {
id: null, // 周报id
formData: {
title: this.$moment().format('YYYY-MM-DD'),
thisWeekWork: null,
nextWeekWork: null,
collaboration: null
},
formRules: {},
reqFlag: {
edit: true
},
pickerOptions: {
disabledDate (time) {
return time.getTime() > Date.now()
}
},
editorOption: {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
[{ 'direction': 'rtl' }]
]
}
}
}
},
computed: {
// 周报开始时间
startTime: function () {
let title = this.formData.title
let startTime = this.$moment(title).startOf('week').format('YYYY-MM-DD')
return startTime
},
// 周报结束时间
endTime: function () {
let title = this.formData.title
let endTime = this.$moment(title).endOf('week').format('YYYY-MM-DD')
return endTime
}
},
created () {
this.id = this.$route.query.id
console.log('this.id==' + this.id)
this.getUserDetail()
},
methods: {
getUserDetail () {
const url = weeklyDetail
let params = {
id: this.id
}
this.$http(url, params)
.then(res => {
if (res.code == 1) {
let data = res.data
this.formData = {
title: data.startTime,
thisWeekWork: data.thisWeekWork,
nextWeekWork: data.nextWeekWork,
collaboration: data.collaboration
}
}
})
},
// 取消
onCancel (formName) {
this.$router.push({ path: '/home/weekly' })
this.$refs[formName].resetFields()
}
}
}
</script>
2.3 WeeklyDetail.vue 页面展示:
至此这个基于Vue+Element+nodeJs+Express+MySql后台管理系统基本上已经完成啦。