mirror of
https://github.com/FatttSnake/Pinnacle-OA.git
synced 2026-04-05 23:11:24 +08:00
ggb commit first progress in 2023/5/1 02:53
This commit is contained in:
GGB
32
ui/src/assets/css/work/work.css
Normal file
32
ui/src/assets/css/work/work.css
Normal file
@@ -0,0 +1,32 @@
|
||||
:root {
|
||||
--main-color: #00d4ff;
|
||||
}
|
||||
.main {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
width: 98vw;
|
||||
min-width: 600px;
|
||||
min-height: 600px;
|
||||
text-align: center;
|
||||
}
|
||||
.main-table {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.main-add-content {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
bottom: 10vh;
|
||||
justify-content: center;
|
||||
}
|
||||
.main-add-box {
|
||||
display: flex;
|
||||
padding: 16px 20px;
|
||||
width: 80%;
|
||||
left: 50%;
|
||||
justify-content: center;
|
||||
}
|
||||
38
ui/src/components/Detail.vue
Normal file
38
ui/src/components/Detail.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<el-descriptions
|
||||
title="Vertical list with border"
|
||||
direction="vertical"
|
||||
:column="4"
|
||||
:size="size"
|
||||
:data="taskData"
|
||||
border
|
||||
>
|
||||
<el-descriptions-item label="创建者ID">{{ taskData.publisher_id }}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">{{ taskData.createTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="结束时间">{{ taskData.deadLine }}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">
|
||||
<template #default> {{}} </template>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="负责员工" property="worker" />
|
||||
<el-descriptions-item label="工作信息">{{ taskData.taskContent }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
taskData: {
|
||||
publisher_id: '1',
|
||||
createTime: '1',
|
||||
deadLine: '1',
|
||||
taskStatus: false,
|
||||
worker: '',
|
||||
taskContent: '213'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
135
ui/src/components/EditWork.vue
Normal file
135
ui/src/components/EditWork.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<el-form :model="form" :rules="rules" label-width="120px" ref="ruleForm">
|
||||
<el-form-item label="工作人员" prop="worker">
|
||||
<el-select
|
||||
v-model="form.worker"
|
||||
multiple
|
||||
filterable
|
||||
:reserve-keyword="false"
|
||||
value-key="userID"
|
||||
placeholder="选择相对应的工作人员"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in workers"
|
||||
:key="item.userID"
|
||||
:label="item.userName"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终止时间" prop="deadLine">
|
||||
<el-col :span="11">
|
||||
<el-date-picker
|
||||
v-model="form.deadLine"
|
||||
type="datetime"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
placeholder="请选择时间"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="工作内容" prop="taskContent">
|
||||
<el-input v-model="form.taskContent" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit(form)">创建</el-button>
|
||||
<el-button @click="reset">重置</el-button>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
publisher_id: '',
|
||||
createTime: '',
|
||||
deadLine: '',
|
||||
taskContent: '',
|
||||
worker: []
|
||||
},
|
||||
workers: [
|
||||
{
|
||||
userID: '',
|
||||
userName: ''
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
worker: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择相应的工作人员'
|
||||
}
|
||||
],
|
||||
deadLine: [
|
||||
{
|
||||
type: 'date',
|
||||
required: true,
|
||||
message: '请输入终止日期'
|
||||
}
|
||||
],
|
||||
taskContent: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入工作内容'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getFormData() {
|
||||
axios
|
||||
.get('http://localhost:8080/user')
|
||||
.then((response) => {
|
||||
console.log(response.data)
|
||||
this.workers = response.data
|
||||
console.log(this.workers)
|
||||
})
|
||||
.catch((reportError) => {
|
||||
console.log(reportError)
|
||||
})
|
||||
},
|
||||
addWork(form) {
|
||||
console.log(form)
|
||||
axios
|
||||
.post('http://localhost:8080/work', form)
|
||||
.then((response) => {
|
||||
console.log(response.data)
|
||||
})
|
||||
.catch((reportError) => {
|
||||
console.log(reportError)
|
||||
})
|
||||
},
|
||||
onSubmit(form) {
|
||||
//表单校验
|
||||
this.$refs.ruleForm.validate((value) => {
|
||||
if (value) {
|
||||
form.createTime = new Date().getTime().toString()
|
||||
console.log(form)
|
||||
form.publisher_id = String(1)
|
||||
this.addWork(form)
|
||||
this.$emit('setDialogVisible', false)
|
||||
console.log('submit!')
|
||||
} else {
|
||||
console.log('fault!')
|
||||
}
|
||||
})
|
||||
},
|
||||
reset() {
|
||||
this.$refs.ruleForm.resetFields()
|
||||
},
|
||||
cancel() {
|
||||
this.$emit('setDialogVisible', false)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getFormData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
147
ui/src/pages/work/AllTask.vue
Normal file
147
ui/src/pages/work/AllTask.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="main-table">
|
||||
<el-table :data="tableData" style="width: 100%">
|
||||
<el-table-column fixed prop="id" label="工作事项ID" width="150" />
|
||||
<el-table-column prop="publisher_id" label="发布者ID" width="120" />
|
||||
<el-table-column prop="taskContent" label="内容" width="800" />
|
||||
<el-table-column prop="worker" label="工作人员" width="200">
|
||||
<template #default="{ row }">
|
||||
<span v-for="item in row.worker" :key="item.userID">
|
||||
{{ item.userName }},
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="deadLine" label="结束时间" width="200">
|
||||
<template #default="scope">
|
||||
{{ formatDate(scope.row.deadLine) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="taskStatus" label="状态" width="150" />
|
||||
<el-table-column prop="progress" label="进度" width="250">
|
||||
<template #default>
|
||||
<el-progress :text-inside="true" :stroke-width="20" :percentage="70" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="240">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" size="large" @click="handleClick"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-popconfirm
|
||||
width="220"
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
:icon="InfoFilled"
|
||||
icon-color="#00d4ff"
|
||||
title="是否确定删除？"
|
||||
@confirm="deleteConfirmEvent(scope.row)"
|
||||
@cancel="deleteCancelEvent"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button link type="primary" size="default">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-popconfirm
|
||||
width="220"
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
:icon="InfoFilled"
|
||||
icon-color="#00d4ff"
|
||||
title="是否确认完成？"
|
||||
@confirm="completeConfirmEvent"
|
||||
@cancel="completeCancelEvent"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button link type="primary" size="default">完成</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="main-add-content">
|
||||
<div class="main-add-box">
|
||||
<el-button @click="dialogFormVisible = true">添加</el-button>
|
||||
</div>
|
||||
<el-dialog v-model="dialogFormVisible" width="60%">
|
||||
<edit-work @setDialogVisible="setDialogVisible"></edit-work>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import EditWork from '@/components/EditWork.vue'
|
||||
|
||||
export default {
|
||||
name: 'AllTaskPage',
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
dialogFormVisible: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatDate(deadLine) {
|
||||
console.log(new Date(deadLine).toLocaleString())
|
||||
return new Date(deadLine).toLocaleString()
|
||||
},
|
||||
handleClick() {
|
||||
console.log('click')
|
||||
},
|
||||
deleteConfirmEvent(row) {
|
||||
this.deleteTableData(row)
|
||||
location.reload()
|
||||
console.log('delete confirm!')
|
||||
},
|
||||
deleteCancelEvent() {
|
||||
console.log('delete cancel!')
|
||||
},
|
||||
completeConfirmEvent() {
|
||||
console.log('complete confirm!')
|
||||
},
|
||||
completeCancelEvent() {
|
||||
console.log('complete cancel!')
|
||||
},
|
||||
getTableData() {
|
||||
axios
|
||||
.get('http://localhost:8080/work')
|
||||
.then((response) => {
|
||||
console.log(response.data)
|
||||
this.tableData = response.data
|
||||
console.log(this.tableData)
|
||||
})
|
||||
.catch((reportError) => {
|
||||
console.log(reportError)
|
||||
})
|
||||
},
|
||||
deleteTableData(row) {
|
||||
axios
|
||||
.delete('http://localhost:8080/work/' + row.id)
|
||||
.then((response) => {
|
||||
console.log(response.data)
|
||||
})
|
||||
.catch((reportError) => {
|
||||
console.log(reportError)
|
||||
})
|
||||
},
|
||||
setDialogVisible(dialogVisible) {
|
||||
console.log(dialogVisible)
|
||||
this.dialogFormVisible = dialogVisible
|
||||
location.reload()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTableData()
|
||||
},
|
||||
components: {
|
||||
EditWork
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import '@/assets/css/work/work.css';
|
||||
</style>
|
||||
102
ui/src/pages/work/Complete.vue
Normal file
102
ui/src/pages/work/Complete.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="main-table">
|
||||
<el-table :data="tableData" style="width: 100%">
|
||||
<el-table-column fixed prop="id" label="工作事项ID" width="150" />
|
||||
<el-table-column prop="publisher_id" label="发布者ID" width="120" />
|
||||
<el-table-column prop="taskContent" label="内容" width="800" />
|
||||
<el-table-column prop="worker" label="工作人员" width="200">
|
||||
<template #default="{ row }">
|
||||
<span v-for="item in row.worker" :key="item.userID">
|
||||
{{ item.userName }},
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="deadLine" label="结束时间" width="200">
|
||||
<template #default="scope">
|
||||
{{ formatDate(scope.row.deadLine) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="240">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" size="large">查看</el-button>
|
||||
<el-popconfirm
|
||||
width="220"
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
:icon="InfoFilled"
|
||||
icon-color="#00d4ff"
|
||||
title="是否确认完成？"
|
||||
@confirm="todoConfirmEvent(scope.row)"
|
||||
@cancel="todoCancelEvent"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button link type="primary" size="default">未完成</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'CompletePage',
|
||||
data() {
|
||||
return {
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatDate(deadLine) {
|
||||
console.log(new Date(deadLine).toLocaleString())
|
||||
return new Date(deadLine).toLocaleString()
|
||||
},
|
||||
todoConfirmEvent(row) {
|
||||
console.log(row)
|
||||
this.setTaskTodo(row)
|
||||
console.log('complete confirm!')
|
||||
location.reload()
|
||||
},
|
||||
todoCancelEvent() {
|
||||
console.log('complete cancel!')
|
||||
},
|
||||
getTableData() {
|
||||
axios
|
||||
.get('http://localhost:8080/work/complete')
|
||||
.then((response) => {
|
||||
console.log(response.data)
|
||||
this.tableData = response.data
|
||||
console.log(this.tableData)
|
||||
})
|
||||
.catch((reportError) => {
|
||||
console.log(reportError)
|
||||
})
|
||||
},
|
||||
setTaskTodo(row) {
|
||||
var workDo = new Object()
|
||||
workDo.id = row.id
|
||||
workDo.taskStatus = false
|
||||
axios
|
||||
.put('http://localhost:8080/work', workDo)
|
||||
.then((response) => {
|
||||
console.log(response.data)
|
||||
})
|
||||
.catch((reportError) => {
|
||||
console.log(reportError)
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTableData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import '@/assets/css/work/work.css';
|
||||
</style>
|
||||
29
ui/src/pages/work/Task.vue
Normal file
29
ui/src/pages/work/Task.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
|
||||
<el-menu-item index="1"
|
||||
><router-link to="/todo" style="text-decoration: none"
|
||||
>待办工作</router-link
|
||||
></el-menu-item
|
||||
>
|
||||
<el-menu-item index="2"
|
||||
><router-link to="complete" style="text-decoration: none"
|
||||
>已办工作</router-link
|
||||
></el-menu-item
|
||||
>
|
||||
</el-menu>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TaskPage',
|
||||
data() {
|
||||
return {
|
||||
activeIndex: '1'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$router.push('/todo')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,9 +1,101 @@
|
||||
<template><div></div></template>
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="main-table">
|
||||
<el-table :data="tableData" style="width: 100%">
|
||||
<el-table-column fixed prop="id" label="工作事项ID" width="150" />
|
||||
<el-table-column prop="publisher_id" label="发布者ID" width="120" />
|
||||
<el-table-column prop="taskContent" label="内容" width="800" />
|
||||
<el-table-column prop="worker" label="工作人员" width="200">
|
||||
<template #default="{ row }">
|
||||
<span v-for="item in row.worker" :key="item.userID">
|
||||
{{ item.userName }},
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="deadLine" label="结束时间" width="200">
|
||||
<template #default="scope">
|
||||
{{ formatDate(scope.row.deadLine) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="240">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" size="large">查看</el-button>
|
||||
<el-popconfirm
|
||||
width="220"
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
:icon="InfoFilled"
|
||||
icon-color="#00d4ff"
|
||||
title="是否确认完成？"
|
||||
@confirm="completeConfirmEvent(scope.row)"
|
||||
@cancel="completeCancelEvent"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button link type="primary" size="default">完成</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
export default {
|
||||
name: 'TodoPage'
|
||||
name: 'TodoPage',
|
||||
data() {
|
||||
return {
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatDate(deadLine) {
|
||||
console.log(new Date(deadLine).toLocaleString())
|
||||
return new Date(deadLine).toLocaleString()
|
||||
},
|
||||
completeConfirmEvent(row) {
|
||||
console.log(row)
|
||||
this.setTaskComplete(row)
|
||||
console.log('complete confirm!')
|
||||
location.reload()
|
||||
},
|
||||
completeCancelEvent() {
|
||||
console.log('complete cancel!')
|
||||
},
|
||||
getTableData() {
|
||||
axios
|
||||
.get('http://localhost:8080/work/todo')
|
||||
.then((response) => {
|
||||
console.log(response.data)
|
||||
this.tableData = response.data
|
||||
console.log(this.tableData)
|
||||
})
|
||||
.catch((reportError) => {
|
||||
console.log(reportError)
|
||||
})
|
||||
},
|
||||
setTaskComplete(row) {
|
||||
var workDo = new Object()
|
||||
workDo.id = row.id
|
||||
workDo.taskStatus = true
|
||||
axios
|
||||
.put('http://localhost:8080/work', workDo)
|
||||
.then((response) => {
|
||||
console.log(response.data)
|
||||
})
|
||||
.catch((reportError) => {
|
||||
console.log(reportError)
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTableData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
@import '@/assets/css/work/work.css';
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user