zxc
3 years ago
1 changed files with 593 additions and 0 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