247 lines
7.4 KiB
Vue
247 lines
7.4 KiB
Vue
<template>
|
|
<div>
|
|
<ai-list>
|
|
<template #content>
|
|
<ai-search-bar>
|
|
<template #left>
|
|
<el-button type="primary" icon="iconfont iconAdd" @click="handleAdd">评选任务</el-button>
|
|
<ai-search label="开始时间">
|
|
<el-date-picker
|
|
v-model="search.startTimeStr"
|
|
type="date"
|
|
size="small"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="选择开始日期"
|
|
@change="search.current = 1, getList()">
|
|
</el-date-picker>
|
|
</ai-search>
|
|
<ai-search label="结束时间">
|
|
<el-date-picker
|
|
v-model="search.endTimeStr"
|
|
type="date"
|
|
size="small"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="选择结束日期"
|
|
@change="search.current = 1, getList()">
|
|
</el-date-picker>
|
|
</ai-search>
|
|
</template>
|
|
<template #right>
|
|
<el-input
|
|
v-model="search.taskName"
|
|
class="search-input"
|
|
size="small"
|
|
v-throttle="() => {search.current = 1, getList()}"
|
|
placeholder="请输入任务名称"
|
|
clearable
|
|
@clear="search.current = 1, search.taskName = '', getList()"
|
|
suffix-icon="iconfont iconSearch">
|
|
</el-input>
|
|
</template>
|
|
</ai-search-bar>
|
|
<ai-table
|
|
:tableData="tableData"
|
|
:col-configs="colConfigs"
|
|
:total="total"
|
|
style="margin-top: 6px;"
|
|
:current.sync="search.current"
|
|
:size.sync="search.size"
|
|
@getList="getList">
|
|
|
|
<el-table-column slot="options" width="180px" fixed="right" label="操作" align="center">
|
|
<template slot-scope="{ row }">
|
|
<div class="table-options">
|
|
<el-button type="text" @click="handleDetail(row)">详情</el-button>
|
|
<el-button type="text" @click="handleDelete(row)">删除</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</ai-table>
|
|
</template>
|
|
</ai-list>
|
|
<ai-dialog title="评选任务" :visible.sync="dialog" width="800px" @closed="onClosed" @confirm="onConfirm">
|
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
|
|
<el-form-item label="任务名称：" prop="taskName">
|
|
<el-input v-model="form.taskName" clearable placeholder="请输入任务名称" size="small"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="任务开始时间：" prop="startTime">
|
|
<el-date-picker
|
|
v-model="form.startTime"
|
|
type="date"
|
|
size="small"
|
|
clearable
|
|
style="width: 100%"
|
|
value-format="yyyy-MM-dd"
|
|
@change="startChange"
|
|
placeholder="选择开始日期">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="任务结束时间：" prop="endTime">
|
|
<el-date-picker
|
|
v-model="form.endTime"
|
|
type="date"
|
|
size="small"
|
|
style="width: 100%"
|
|
clearable
|
|
@change="endChange"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="选择结束日期">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="发布人：">{{user.info && user.info.name}}</el-form-item>
|
|
<el-form-item label="任务描述：" prop="taskDescription">
|
|
<el-input v-model="form.taskDescription" clearable placeholder="请输入任务描述" type="textarea" :rows="3" show-word-limit :maxlength="200"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</ai-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import dayjs from 'dayjs'
|
|
import {mapState} from 'vuex'
|
|
export default {
|
|
name: "AppraiseTask",
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
permissions: Function
|
|
},
|
|
data() {
|
|
return {
|
|
search:{
|
|
taskName:'',
|
|
startTimeStr:'',
|
|
endTimeStr:'',
|
|
current: 1,
|
|
size: 10,
|
|
},
|
|
total: 10,
|
|
colConfigs: [
|
|
{type: "selection"},
|
|
{ prop: 'taskName', label: '任务名称', align: 'center' },
|
|
{ prop: 'userName', label: '发布人', align: 'center' },
|
|
{ prop: 'releaswTime', label: '发布时间', align: 'center' },
|
|
{ prop: 'startTime', label: '任务开始时间', align: 'center' },
|
|
{ prop: 'endTime', label: '任务结束时间', align: 'center' },
|
|
],
|
|
tableData: [],
|
|
dialog:false,
|
|
form:{
|
|
startTime:'',
|
|
endTime:''
|
|
},
|
|
rules:{
|
|
taskName:[ { required: true, message: '请输入任务名称', trigger: 'blur' }],
|
|
startTime:[ { required: true, message: '请选择开始时间', trigger: 'change' }],
|
|
endTime:[ { required: true, message: '请选择结束时间', trigger: 'change' }],
|
|
taskDescription:[ { required: true, message: '请输入任务描述', trigger: 'blur' }],
|
|
}
|
|
}
|
|
},
|
|
|
|
computed:{
|
|
...mapState(['user'])
|
|
},
|
|
|
|
created() {
|
|
this.getList()
|
|
},
|
|
|
|
methods: {
|
|
startChange(e){
|
|
if(e){
|
|
const time = new Date(e).getTime();
|
|
const now = new Date(dayjs(Date.now()).format("YYYY-MM-DD")).getTime()
|
|
if(time < now){
|
|
this.$set(this.form,'startTime','')
|
|
this.$message.error('开始时间不能小于当前时间')
|
|
}
|
|
}
|
|
},
|
|
|
|
endChange(e){
|
|
if(e){
|
|
const endTime = new Date(e).getTime();
|
|
const startTime = new Date(this.form.startTime).getTime()
|
|
if(endTime < startTime){
|
|
this.$set(this.form,'endTime','')
|
|
this.$message.error('结束时间不能小于开始时间')
|
|
}
|
|
}
|
|
},
|
|
|
|
onConfirm(){
|
|
this.$refs['formRef'].validate(async valid=>{
|
|
if(valid){
|
|
try {
|
|
const {code} = await this.instance.post('/app/apptaskmanage/addOrUpdate',{
|
|
...this.form,
|
|
startTime:`${this.form.startTime} 00:00:00`,
|
|
endTime:`${this.form.endTime} 23:59:59`,
|
|
})
|
|
if(code===0){
|
|
this.$message.success('保存成功')
|
|
this.dialog = false
|
|
this.getList()
|
|
}
|
|
}catch (e) {
|
|
console.log(e)
|
|
}
|
|
}
|
|
})
|
|
|
|
},
|
|
|
|
onClosed(){
|
|
this.form = {}
|
|
this.$refs['formRef'].resetFields()
|
|
},
|
|
|
|
handleDetail(row){
|
|
this.form = {...row}
|
|
this.dialog = true
|
|
},
|
|
|
|
handleDelete({id}){
|
|
this.$confirm("是否确定要删除此数据？").then(async ()=>{
|
|
try {
|
|
const {code} = await this.instance.post('/app/apptaskmanage/delete',null,{
|
|
params:{ids:id}
|
|
})
|
|
if(code===0){
|
|
this.$message.success('删除成功')
|
|
this.getList()
|
|
}
|
|
}catch (e) {
|
|
console.error(e)
|
|
}
|
|
})
|
|
},
|
|
|
|
async getList(){
|
|
try {
|
|
const {code,data} = await this.instance.post('/app/apptaskmanage/list',null,{
|
|
params:{
|
|
...this.search
|
|
}
|
|
})
|
|
if(code===0){
|
|
this.tableData = data.records
|
|
this.total = data.total
|
|
}
|
|
}catch (e) {
|
|
console.error(e)
|
|
}
|
|
},
|
|
handleAdd() {
|
|
this.dialog = true
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|