6 changed files with 651 additions and 32 deletions
@ -0,0 +1,593 @@ |
|||||
|
<template> |
||||
|
<div class="div_main"> |
||||
|
<div v-if="showType==='list'"> |
||||
|
<div class="div_search"> |
||||
|
<el-form :inline="true" |
||||
|
:model="formData" |
||||
|
ref="ref_searchform" |
||||
|
:label-width="'80px'"> |
||||
|
<div> |
||||
|
<el-form-item label="提醒时间" |
||||
|
prop="startTime"> |
||||
|
<el-date-picker v-model="formData.startTime" |
||||
|
class="item_width_2" |
||||
|
size="small" |
||||
|
type="date" |
||||
|
value-format="yyyyMMdd" |
||||
|
format="yyyy-MM-dd" |
||||
|
placeholder="开始时间"> |
||||
|
</el-date-picker> |
||||
|
<span class="data-tag">至</span> |
||||
|
<el-date-picker v-model="formData.endTime" |
||||
|
:picker-options="endPickerOptions" |
||||
|
class="item_width_2 data-tag" |
||||
|
size="small" |
||||
|
type="date" |
||||
|
value-format="yyyyMMdd" |
||||
|
format="yyyy-MM-dd" |
||||
|
placeholder="结束时间"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="日程标题" |
||||
|
prop="topic"> |
||||
|
<el-input v-model="formData.title" |
||||
|
class="item_width_2" |
||||
|
size="small" |
||||
|
clearable |
||||
|
placeholder="请输入"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="是否公开" |
||||
|
prop="isPublic"> |
||||
|
<el-select v-model="formData.isPublic" clearable placeholder="请选择"> |
||||
|
<el-option |
||||
|
v-for="item in isPublicList" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-button style="margin-left:30px" |
||||
|
size="small" |
||||
|
class="diy-button--search" |
||||
|
@click="handleSearch">查询</el-button> |
||||
|
<el-button style="margin-left:10px" |
||||
|
size="small" |
||||
|
class="diy-button--reset" |
||||
|
@click="resetSearch">重置</el-button> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
|
||||
|
<div class="div_table"> |
||||
|
|
||||
|
<div class="div_btn"> |
||||
|
<el-button class="diy-button--add" |
||||
|
size="small" |
||||
|
@click="handleAddSchedule">添加日程提醒</el-button> |
||||
|
<el-button style="float:left;margin-left:10px" |
||||
|
class="diy-button--delete" |
||||
|
size="small" |
||||
|
@click="deleteBatch">批量删除</el-button> |
||||
|
<!--<el-button @click="handleExport" |
||||
|
class="diy-button--reset" |
||||
|
size="small">导出</el-button>--> |
||||
|
</div> |
||||
|
|
||||
|
<el-table :data="tableData" |
||||
|
border |
||||
|
v-loading="tableLoading" |
||||
|
:header-cell-style="{background:'#2195FE',color:'#FFFFFF'}" |
||||
|
class="table" |
||||
|
style="width: 100%" |
||||
|
@select-all="selectAll" |
||||
|
@selection-change="selectionChange" |
||||
|
:height="maxTableHeight"> |
||||
|
|
||||
|
<el-table-column :selectable="checkSelf" |
||||
|
type="selection" |
||||
|
width="55"> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="序号" |
||||
|
fixed="left" |
||||
|
type="index" |
||||
|
align="center" |
||||
|
width="50" /> |
||||
|
|
||||
|
<el-table-column prop="title" |
||||
|
align="center" |
||||
|
min-width="150" |
||||
|
label="日程标题" |
||||
|
:show-overflow-tooltip="true"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="remindTime" |
||||
|
label="提醒时间" |
||||
|
align="center" |
||||
|
:show-overflow-tooltip="true"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="remark" |
||||
|
align="center" |
||||
|
width="150" |
||||
|
label="备注" |
||||
|
:show-overflow-tooltip="true"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column fixed="right" |
||||
|
label="操作" |
||||
|
align="center" |
||||
|
width="180"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button v-if="user.id===scope.row.staffId" |
||||
|
@click="handleEdit(scope.row)" |
||||
|
type="text" |
||||
|
size="small" |
||||
|
class="div-table-button--edit">修改</el-button> |
||||
|
<el-button v-if="user.id===scope.row.staffId" |
||||
|
@click="handleDel(scope.row)" |
||||
|
type="text" |
||||
|
size="small" |
||||
|
class="div-table-button--delete">删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<div> |
||||
|
<el-pagination @size-change="handleSizeChange" |
||||
|
@current-change="handleCurrentChange" |
||||
|
:current-page.sync="pageNo" |
||||
|
:page-sizes="[20, 50, 100, 200]" |
||||
|
:page-size="parseInt(pageSize)" |
||||
|
layout="sizes, prev, pager, next, total" |
||||
|
:total="total"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<el-dialog v-if="showAdd" |
||||
|
:visible.sync="showAdd" |
||||
|
:close-on-click-modal="false" |
||||
|
:close-on-press-escape="false" |
||||
|
:title="addDiaTitle" |
||||
|
width="850px" |
||||
|
top="5vh" |
||||
|
class="dialog-h" |
||||
|
@closed="showAdd = false"> |
||||
|
<add-activity ref="ref_add_form" |
||||
|
:formType="formType" |
||||
|
:icPartyActId="icPartyActId" |
||||
|
@handleOk="handleOk" |
||||
|
@handleClose="handleClose"></add-activity> |
||||
|
</el-dialog> |
||||
|
<el-dialog v-if="showSchedule" |
||||
|
:visible.sync="showSchedule" |
||||
|
:close-on-click-modal="false" |
||||
|
:close-on-press-escape="false" |
||||
|
:title="'添加日程提醒'" |
||||
|
width="850px" |
||||
|
top="5vh" |
||||
|
class="dialog-h" |
||||
|
@closed="showSchedule = false"> |
||||
|
<schedule-form ref="ref_schedule_form" |
||||
|
:formType="formType" |
||||
|
@handleOk="handleOk" |
||||
|
@handleClose="handleClose"> |
||||
|
</schedule-form> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<div v-if="showType==='yearplan'"> |
||||
|
<yearplan-list @handleOk="handleAddPlanOk" |
||||
|
@handleClose="handleAddPlanClose"></yearplan-list> |
||||
|
</div> |
||||
|
<el-dialog |
||||
|
title="修改日程提醒" |
||||
|
:visible.sync="dialogVisible" |
||||
|
width="850px" |
||||
|
top="5vh" |
||||
|
class="dialog-h" |
||||
|
:before-close="handleClose"> |
||||
|
<el-form ref="ref_form" |
||||
|
:inline="true" |
||||
|
:model="scFormData" |
||||
|
:rules="dataRule" |
||||
|
class="div_form"> |
||||
|
|
||||
|
<el-form-item label="日程标题" |
||||
|
prop="title" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<el-input class="item_width_1" |
||||
|
placeholder="请输入活动标题" |
||||
|
v-model="scFormData.title"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="提醒时间" |
||||
|
style="display: block" |
||||
|
prop="remindTime" |
||||
|
label-width="150px"> |
||||
|
<el-date-picker v-model="scFormData.remindTime" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
format="yyyy-MM-dd HH:mm:ss" |
||||
|
type="datetime" |
||||
|
placeholder="选择时间"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="是否公开" |
||||
|
label-width="150px" |
||||
|
prop="isPublic"> |
||||
|
<el-select v-model="scFormData.isPublic" |
||||
|
placeholder="请选择" |
||||
|
clearable |
||||
|
class="item_width_1"> |
||||
|
<el-option v-for="item in gongkaiArray" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="日程介绍" |
||||
|
prop="remark" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<el-input class="item_width_1" |
||||
|
type="textarea" |
||||
|
maxlength="1000" |
||||
|
show-word-limit |
||||
|
:rows="3" |
||||
|
placeholder="请输入日程介绍，不超过1000字" |
||||
|
v-model="scFormData.remark"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="editSchedule">确 定</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { requestPost, requestGet } from "@/js/dai/request"; |
||||
|
import { mapGetters } from "vuex"; |
||||
|
|
||||
|
import axios from "axios"; |
||||
|
import scheduleForm from "./scheduleForm"; |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
components: { scheduleForm }, |
||||
|
|
||||
|
data () { |
||||
|
let endDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
||||
|
let nowData = Date.now() |
||||
|
|
||||
|
if (this.formData.startTime) { |
||||
|
let startTime = new Date(this.formData.startTime) |
||||
|
return time.getTime() < startTime || time.getTime() === startTime |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
let startDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
||||
|
let nowData = Date.now() |
||||
|
return time.getTime() > nowData |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
dialogVisible: false, |
||||
|
isPublicList: [ |
||||
|
{ |
||||
|
value: '0', |
||||
|
label: '仅自己可见' |
||||
|
}, |
||||
|
{ |
||||
|
value: '1', |
||||
|
label: '组织内其他人可见' |
||||
|
} |
||||
|
], |
||||
|
tableLoading: false, |
||||
|
user: {}, |
||||
|
agencyId: '', |
||||
|
gongkaiArray: [ |
||||
|
{ |
||||
|
value: '0', |
||||
|
label: '仅自己可见' |
||||
|
}, |
||||
|
{ |
||||
|
value: '1', |
||||
|
label: '组织内其他人可见' |
||||
|
}, |
||||
|
|
||||
|
], |
||||
|
tableData: [], |
||||
|
scFormData: { |
||||
|
title: '', |
||||
|
remindTime: '', |
||||
|
remark: '', |
||||
|
scheduleId: '', |
||||
|
isPublic: '' |
||||
|
}, |
||||
|
formData: { |
||||
|
title: '', |
||||
|
startTime: '',//活动开始时间20220817 |
||||
|
endTime: '',//活动结束时间20220817 |
||||
|
isPublish: '' |
||||
|
|
||||
|
}, |
||||
|
pageNo: 1, |
||||
|
pageSize: window.localStorage.getItem("pageSize") || 20, |
||||
|
total: 1, |
||||
|
endPickerOptions: { |
||||
|
disabledDate: endDisabledDate |
||||
|
}, |
||||
|
agencyIdArray: [], |
||||
|
|
||||
|
showAdd: false, |
||||
|
formType: 'add', |
||||
|
addDiaTitle: '添加活动计划', |
||||
|
showSchedule: false, |
||||
|
showType: 'list', |
||||
|
|
||||
|
scheduleId: '', |
||||
|
selection: [], |
||||
|
scheduleDiaTitle: '', |
||||
|
isPublic: '', |
||||
|
title: '', |
||||
|
remindTime: '' |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
|
||||
|
dataRule () { |
||||
|
return { |
||||
|
|
||||
|
title: [ |
||||
|
{ required: true, message: '日程标题不能为空', trigger: 'change' }, |
||||
|
], |
||||
|
remindTime: [ |
||||
|
{ required: true, message: '提醒时间不能为空', trigger: 'change' } |
||||
|
], |
||||
|
isPublic: [ |
||||
|
{ required: true, message: '是否公开不能为空', trigger: 'change' } |
||||
|
], |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
maxTableHeight () { |
||||
|
return this.$store.state.inIframe |
||||
|
? this.clientHeight - 410 + this.iframeHeigh |
||||
|
: this.clientHeight - 410; |
||||
|
}, |
||||
|
...mapGetters(["clientHeight", "iframeHeight"]), |
||||
|
}, |
||||
|
watch: { |
||||
|
|
||||
|
}, |
||||
|
mounted () { |
||||
|
this.user = this.$store.state.user |
||||
|
this.agencyId = this.user.agencyId |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
checkSelf (row) { |
||||
|
return this.$store.state.user.id === row.staffId |
||||
|
}, |
||||
|
|
||||
|
handleAddYearPlan () { |
||||
|
this.showType = 'yearplan' |
||||
|
}, |
||||
|
|
||||
|
handleAddPlanOk () { |
||||
|
this.showType = 'list' |
||||
|
}, |
||||
|
handleAddPlanClose () { |
||||
|
this.showType = 'list' |
||||
|
}, |
||||
|
|
||||
|
handleAddSchedule () { |
||||
|
this.formType = 'schedule' |
||||
|
this.showSchedule = true; |
||||
|
}, |
||||
|
|
||||
|
handleSearch (val) { |
||||
|
this.pageNo = 1; |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
|
||||
|
async handleAdd () { |
||||
|
this.icPartyActId = '' |
||||
|
this.addDiaTitle = '新增活动计划' |
||||
|
this.formType = 'add' |
||||
|
this.showAdd = true; |
||||
|
}, |
||||
|
|
||||
|
async handlePublish (row) { |
||||
|
this.icPartyActId = row.icPartyActId |
||||
|
|
||||
|
this.$confirm("确认发布活动?", "提示", { |
||||
|
confirmButtonText: "确定", |
||||
|
cancelButtonText: "取消", |
||||
|
type: "warning" |
||||
|
}) |
||||
|
.then(() => { |
||||
|
this.publishActivity() |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
if (err == "cancel") { |
||||
|
// this.$message({ |
||||
|
// type: "info", |
||||
|
// message: "已取消发布" |
||||
|
// }); |
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
async handleEdit (row) { |
||||
|
this.scFormData = row |
||||
|
this.dialogVisible = true |
||||
|
this.scFormData.scheduleId = row.id |
||||
|
}, |
||||
|
|
||||
|
async editSchedule () { |
||||
|
const url = '/resi/partymember/icSchedule/addOrEdit' |
||||
|
// const url = 'http://yapi.elinkservice.cn/mock/245/icSchedule/addOrEdit' |
||||
|
let params = { |
||||
|
...this.scFormData |
||||
|
} |
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
if (code === 0) { |
||||
|
this.$message.success('操作成功') |
||||
|
this.$emit('handleOk') |
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
this.dialogVisible = false |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
handleClose () { |
||||
|
this.formType = '' |
||||
|
this.showAdd = false |
||||
|
this.showSchedule = false |
||||
|
this.dialogVisible = false |
||||
|
}, |
||||
|
|
||||
|
handleOk () { |
||||
|
this.handleClose() |
||||
|
this.pageNo = 1 |
||||
|
this.getTableData() |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
async handleDel (row) { |
||||
|
this.scheduleId = row.id |
||||
|
this.$confirm("活动删除后不可恢复，您确定要删除吗？", "提示", { |
||||
|
confirmButtonText: "确定", |
||||
|
cancelButtonText: "取消", |
||||
|
type: "warning" |
||||
|
}) |
||||
|
.then(() => { |
||||
|
this.deleteActBatch() |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
if (err == "cancel") { |
||||
|
// this.$message({ |
||||
|
// type: "info", |
||||
|
// message: "已取消删除" |
||||
|
// }); |
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
selectAll (selection) { |
||||
|
this.selection = selection |
||||
|
}, |
||||
|
selectionChange (selection) { |
||||
|
this.selection = selection |
||||
|
}, |
||||
|
|
||||
|
deleteBatch () { |
||||
|
if (this.selection.length > 0) { |
||||
|
this.$confirm("确认删除选择的活动?", "提示", { |
||||
|
confirmButtonText: "确定", |
||||
|
cancelButtonText: "取消", |
||||
|
type: "warning" |
||||
|
}) |
||||
|
.then(() => { |
||||
|
this.deleteActBatch() |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
if (err == "cancel") { |
||||
|
// this.$message({ |
||||
|
// type: "info", |
||||
|
// message: "已取消删除" |
||||
|
// }); |
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
} else { |
||||
|
this.$message.warning('请先选择要删除的活动') |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async deleteActBatch () { |
||||
|
let params = [] |
||||
|
this.selection.forEach(element => { |
||||
|
params.push(element.id) |
||||
|
}); |
||||
|
if (this.scheduleId !== null && this.scheduleId !== '' && this.scheduleId !== undefined){ |
||||
|
params.push(this.scheduleId) |
||||
|
} |
||||
|
const url = "/resi/partymember/icSchedule/del"; |
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.$message.success("删除成功！"); |
||||
|
this.getTableData(); |
||||
|
} else { |
||||
|
this.$message.error('操作失败！') |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async getTableData () { |
||||
|
this.tableLoading = true |
||||
|
const url = "/resi/partymember/icSchedule/list"; |
||||
|
const { pageSize, pageNo, formData } = this; |
||||
|
const { data, code, msg } = await requestPost(url, { |
||||
|
pageSize, |
||||
|
pageNo, |
||||
|
...formData, |
||||
|
}); |
||||
|
|
||||
|
this.tableLoading = false |
||||
|
if (code === 0) { |
||||
|
this.total = data.total || 0; |
||||
|
this.tableData = data.list; |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleSizeChange (val) { |
||||
|
|
||||
|
this.pageSize = val; |
||||
|
window.localStorage.setItem("pageSize", val); |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
handleCurrentChange (val) { |
||||
|
|
||||
|
this.pageNo = val; |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
|
||||
|
resetSearch () { |
||||
|
this.agencyIdArray = [] |
||||
|
this.formData = { |
||||
|
startTime: '',//活动开始时间20220817 |
||||
|
endTime: '',//活动结束时间20220817 |
||||
|
isPublish: '', |
||||
|
title: '', |
||||
|
} |
||||
|
|
||||
|
this.pageNo = 1 |
||||
|
this.getTableData() |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "@/assets/scss/buttonstyle.scss"; |
||||
|
@import "@/assets/scss/modules/management/list-main.scss"; |
||||
|
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
||||
|
</style> |
||||
Loading…
Reference in new issue