1007 lines
34 KiB
Vue
1007 lines
34 KiB
Vue
<template>
|
||
<div class="addThreeMeeting">
|
||
<ai-detail>
|
||
<ai-title slot="title" :title="`${form.id?'编辑':'添加'}三会一课`" isShowBack @onBackClick="$parent.goBack()"
|
||
isShowBottomBorder/>
|
||
<template #content>
|
||
<ai-card>
|
||
<template #content>
|
||
<el-form :model="form" label-width="100px" ref="basicForm" :rules="fromRules" size="small">
|
||
<ai-title title="基本信息" isShowBottomBorder/>
|
||
<el-form-item label="会议分类：" prop="meetingClassification">
|
||
<el-checkbox-group v-model="form.meetingClassification">
|
||
<el-checkbox :label="op.dictValue" v-for="(op,j) in dict.getDict('meetingClassification')" :key="j">
|
||
{{ op.dictName }}
|
||
</el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
<el-form-item prop="meetingAgenda" label="会议名称：" ref="fromTitle">
|
||
<el-input
|
||
v-model="form.meetingAgenda"
|
||
placeholder="限30字"
|
||
clearable
|
||
:maxLength="30"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item prop="appThreeMeetingOrganizationList" label="与会组织："
|
||
ref="appThreeMeetingOrganizationList">
|
||
<div class="organ" @click="showDialogVisible()">
|
||
<span v-if="form.appThreeMeetingOrganizationList.length">
|
||
<span v-for="(item,i) in form.appThreeMeetingOrganizationList" :key="item.id"
|
||
class="organzation">{{ item.name || item.organizationName }}
|
||
<span class="iconfont iconOverrule" @click.stop="delate(i)"></span>
|
||
</span>
|
||
</span>
|
||
<span v-else>请选择</span>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item prop="isOnline" label="举办方式">
|
||
<!-- <el-radio label="1" v-model="form.isOnline">线上举办</el-radio>-->
|
||
<el-radio label="0" v-model="form.isOnline">线下举办</el-radio>
|
||
</el-form-item>
|
||
<el-form-item prop="meetingAddress" label="会议地点：" v-if="form.isOnline==0">
|
||
<el-input
|
||
v-model="form.meetingAddress"
|
||
placeholder="限60字"
|
||
clearable
|
||
:maxLength="60"
|
||
/>
|
||
</el-form-item>
|
||
<el-row type="flex" justify="space-between">
|
||
<el-form-item prop="startTime" label="开始时间：" ref="startTime">
|
||
<el-date-picker @change="dataChange()"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
type="datetime"
|
||
v-model="form.startTime"
|
||
placeholder="请选择..."
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item prop="endTime" label="结束时间：" ref="endTime">
|
||
<el-date-picker @change="dataChange()"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
type="datetime"
|
||
v-model="form.endTime"
|
||
placeholder="请选择..."
|
||
:disabled="!Boolean(form.startTime)"
|
||
></el-date-picker>
|
||
</el-form-item>
|
||
</el-row>
|
||
<el-form-item label="会议说明：" prop="meetingDescription" calss="uedtor" style="margin-top: 16px;">
|
||
<ai-editor v-model="form.meetingDescription" :instance="instance"/>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="附件：">-->
|
||
<!-- <ai-uploader :instance="instance" v-model="form.fileList" fileType="file"-->
|
||
<!-- :limit="9"></ai-uploader>-->
|
||
<!-- </el-form-item>-->
|
||
<ai-title title="人员设置" isShowBottomBorder/>
|
||
<div class="person">
|
||
<el-form-item label="与会人员：" prop="participantList" label-width="106px" ref="participantList">
|
||
<div class="select-person" v-for="(item,index) in form.participantList" :key="item.name"
|
||
style="margin-bottom: 36px;">
|
||
<div class="person-pictrue" style="cursor: pointer;" @click="selectHost(index)">
|
||
<img :src="item.avatarUrl" alt="" v-if="item.avatarUrl"
|
||
style="position: absolute;left: 0;top:0;">
|
||
<div
|
||
style="overflow: hidden;width:40px;height: 40px;white-space: nowrap;background-color:#2266FF;border-radius:50%;"
|
||
v-else>{{ item.name ? item.name.substr(item.name.length - 2, 2) : '' }}
|
||
</div>
|
||
<span class="host">主持人</span>
|
||
<span class="iconfont del-icon iconOverrule" @click.stop="deletePerson(index)"></span>
|
||
</div>
|
||
<span class="person-name">{{ item.name }}</span>
|
||
<span style="position: absolute;left: 0;top: 60px;color: #2266FF;" v-if="item.isHost">
|
||
<span class="iconfont iconzxjyzdls" style="color: #8899BB;"></span>
|
||
<span style="font-size: 12px;">主持人</span>
|
||
</span>
|
||
</div>
|
||
<ai-party-member
|
||
:instance="instance"
|
||
customCliker
|
||
dialogTitle="添加人员"
|
||
v-model="form.participantList"
|
||
:key="partyKey"
|
||
customOrg
|
||
v-if="isShowChooseUser"
|
||
:disable="hostDisable"
|
||
:area-id="areaId"
|
||
:partyOrgList="form.appThreeMeetingOrganizationList"
|
||
@change="handleSelectParty">
|
||
<div class="select-person add-person">
|
||
<div class="add-icon"><span class="el-icon-plus icon-add"></span></div>
|
||
<span class="person-name">选择</span>
|
||
</div>
|
||
</ai-party-member>
|
||
</el-form-item>
|
||
<span class="tips">*从党员用户中选择，必须设置一名主持人(点击与会人员头像设置或变更主持人)</span>
|
||
</div>
|
||
<div class="person">
|
||
<el-form-item label="纪要负责人：" label-width="106px" style="width:100%;margin-bottom: 0;"
|
||
ref="recorderList">
|
||
<ai-person-select :customClicker="true" :chooseUserList="form.recorderList" customRightText
|
||
:instance="instance" url="/admin/user/pageForWeb" headerTitle="人员列表"
|
||
dialogTitle="选择" @selectPerson="changeRecorderList">
|
||
<template v-slot:option="{ item }">
|
||
<span class="iconfont iconProlife">{{ item.name }}</span>
|
||
<span>{{ item.phone }}</span>
|
||
</template>
|
||
</ai-person-select>
|
||
</el-form-item>
|
||
<span class="tips">*从系统用户中选择，拥有签到管理权限</span>
|
||
</div>
|
||
<ai-title title="会议投票设置" isShowBottomBorder/>
|
||
<el-form-item label="是否投票：">
|
||
<el-radio v-for="op in dict.getDict('yesOrNo')"
|
||
:key="op.dictValue" :label="op.dictValue" v-model="form.isVote">
|
||
{{ op.dictName }}
|
||
</el-radio>
|
||
</el-form-item>
|
||
<template v-if="form.isVote==1">
|
||
<el-form-item label="投票主题：" prop="voteTopic">
|
||
<el-input type="textarea" v-model="form.voteTopic" maxlength="80" show-word-limit rows="4"/>
|
||
</el-form-item>
|
||
<el-form-item label="投票选项：" required>
|
||
<el-radio label="1" v-model="voteOps">同意/不同意</el-radio>
|
||
</el-form-item>
|
||
<el-form-item label="投票形式：" prop="anonymous">
|
||
<ai-select v-model="form.anonymous" :selectList="dict.getDict('ThreeMeetingAnonymous')"/>
|
||
</el-form-item>
|
||
<el-form-item label="截止时间：" prop="voteDeadline">
|
||
<el-date-picker v-model="form.voteDeadline" type="datetime" placeholder="请选择"
|
||
value-format="yyyy-MM-dd HH:mm:ss"/>
|
||
</el-form-item>
|
||
</template>
|
||
<ai-title title="其他设置" isShowBottomBorder/>
|
||
<el-form-item v-if="form.isOnline==0" label="签到方式：" prop="signMethod">
|
||
<el-radio-group v-model="form.signMethod">
|
||
<el-radio label="1">签到</el-radio>
|
||
<el-radio label="0">不签到</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<div class="person" v-if="form.signMethod=='1'">
|
||
<el-form-item label="签到负责人：" label-width="106px" style="width:100%" ref="chargeOfSignInList">
|
||
<ai-person-select :customClicker="true" :chooseUserList="form.chargeOfSignInList"
|
||
:instance="instance" customRightText url="/admin/user/pageForWeb"
|
||
headerTitle="人员列表" dialogTitle="选择" :isMultiple="true"
|
||
@selectPerson="changeCharge">
|
||
<template v-slot:option="{ item }">
|
||
<span class="iconfont iconProlife">{{ item.name }}</span>
|
||
<span>{{ item.phone }}</span>
|
||
</template>
|
||
</ai-person-select>
|
||
</el-form-item>
|
||
<span class="tips">*从系统用户中选择，拥有签到管理权限</span>
|
||
</div>
|
||
<div class="areaList" v-if="form.signMethod=='1'">
|
||
<el-form-item label="签到时间：" style="width:100%;"
|
||
:prop="form.signMethod=='1'?'meetingBefore':'meetingBeforeCo'">
|
||
会议开始时间前
|
||
<el-input v-model="form.meetingBefore" class="time-input"
|
||
oninput="value=value.replace(/[^\d]/g,'')"></el-input>
|
||
分钟，至会议开始时间后
|
||
<el-input v-model="form.meetingAfter" class="time-input"
|
||
oninput="value=value.replace(/[^\d]/g,'')"></el-input>
|
||
分钟，可进行签到。
|
||
<P>
|
||
可签到时间为
|
||
<span style="color:#5088FF"
|
||
v-if="form.meetingBefore&&form.meetingAfter&&form.startTime">({{ signStart }} ~ {{
|
||
signEnd
|
||
}})</span>
|
||
<span style="color:#5088FF" v-else>-</span>
|
||
</P>
|
||
</el-form-item>
|
||
</div>
|
||
<el-form-item label="提醒方式：" style="width:100%;" prop="reminderMethod">
|
||
<el-checkbox-group v-model="form.reminderMethod">
|
||
<el-checkbox label="5" style="width: 100%;"
|
||
:disabled="form.reminderMethod.indexOf('0')>-1 || form.reminderMethod.indexOf('1')>-1||form.reminderMethod.indexOf('2')>-1||form.reminderMethod.indexOf('3')>-1 || form.reminderMethod.indexOf('4')>-1">
|
||
不提醒
|
||
</el-checkbox>
|
||
<el-checkbox label="0" style="width: 16%;" :disabled="form.reminderMethod.indexOf('5') > -1">立即通知
|
||
</el-checkbox>
|
||
<el-checkbox label="1" style="width: 16%;" :disabled="form.reminderMethod.indexOf('5') > -1">提前10分钟
|
||
</el-checkbox>
|
||
<el-checkbox label="2" style="width: 16%;" :disabled="form.reminderMethod.indexOf('5') > -1">提前30分钟
|
||
</el-checkbox>
|
||
<el-checkbox label="3" style="width: 16%;" :disabled="form.reminderMethod.indexOf('5') > -1">提前1小时
|
||
</el-checkbox>
|
||
<el-checkbox label="4" style="width: 16%;" :disabled="form.reminderMethod.indexOf('5') > -1">提前2小时
|
||
</el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
</el-form>
|
||
</template>
|
||
</ai-card>
|
||
</template>
|
||
<template #footer>
|
||
<el-button size="small" @click="confirm()">取消</el-button>
|
||
<el-button type="primary" size="small" @click="confirm('1')">立即发布</el-button>
|
||
<el-button size="small" @click="confirm('0')">保存</el-button>
|
||
</template>
|
||
</ai-detail>
|
||
<el-dialog width="644px" title="选择党组织" :visible.sync="dialogVisible" class="select-party">
|
||
<div>
|
||
<el-row type="flex" justify="space-between">
|
||
<el-row class="search-panel" type="flex" justify="space-between">
|
||
<div class="add-item" style="padding-bottom:3px;overflow-x: hidden">
|
||
<p class="add_top">
|
||
<span>党组织</span>
|
||
<el-input placeholder="党组织名称" size="small" style="width:166px;" clearable
|
||
suffix-icon="el-icon-search"
|
||
v-model="filterText"></el-input>
|
||
</p>
|
||
<div class="tree_list">
|
||
<el-tree
|
||
:data="treeData"
|
||
show-checkbox
|
||
node-key="id"
|
||
ref="partyTree"
|
||
:filter-node-method="filterNode"
|
||
@check-change="handleCheckChange"
|
||
:highlight-current="true"
|
||
:props="defaultProps">
|
||
</el-tree>
|
||
</div>
|
||
</div>
|
||
</el-row>
|
||
<div class="selected-people add-item">
|
||
<p class="add_top">
|
||
<span>已选择</span>
|
||
<el-button icon="iconfont iconDelete" size="mini"
|
||
@click="clearSelect()">清空
|
||
</el-button>
|
||
</p>
|
||
<div class="add_tag" v-if="selectParty.length" style="width:100%;">
|
||
<el-tag v-for="(item,i) in selectParty" :disable-transitions="true" :key="item.id" type="info">
|
||
{{ item.name }}
|
||
<span class="iconfont iconOverrule icon-color89B" style="float: right;"
|
||
@click.stop="cancelSelect(i)"></span>
|
||
</el-tag>
|
||
</div>
|
||
<div class="add_tag" v-else
|
||
style="display:flex;align-items:center;justify-content:center;width:100%;">
|
||
<span>暂无数据</span>
|
||
</div>
|
||
</div>
|
||
</el-row>
|
||
</div>
|
||
<div slot="footer" style="text-align: center;">
|
||
<el-button style="width:92px" size="small" class="delete-btn" @click="dialogVisible=false">取消
|
||
</el-button>
|
||
<el-button style="width:92px" size="small" type="primary"
|
||
@click="dialogVisible=false,confirmSelect()">确认
|
||
</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapState} from "vuex";
|
||
import moment from 'dayjs';
|
||
|
||
export default {
|
||
name: "add",
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
permissions: Function,
|
||
detail: Object,
|
||
},
|
||
computed: {
|
||
...mapState(["user"]),
|
||
hostDisable() {
|
||
if (!this.form.meetingUser) return []
|
||
const list = [
|
||
...this.form.chargeOfSignInList,
|
||
...this.form.participantList,
|
||
...this.form.recorderList
|
||
]
|
||
return list || []
|
||
},
|
||
color() {
|
||
return ["#FF4466", "#2EA222", "#2266FF", "#FF8822", "#333333"]
|
||
},
|
||
},
|
||
data() {
|
||
const endTimePass = (rule, value, callback) => {
|
||
if (value) {
|
||
if (moment(value).unix() - moment(this.form.startTime).unix() > 0) {
|
||
callback()
|
||
} else {
|
||
callback(new Error('结束时间要大于开始时间'));
|
||
}
|
||
} else {
|
||
callback(new Error('请填写结束时间'));
|
||
}
|
||
}
|
||
const startTimePass = (rule, value, callback) => {
|
||
if (value) {
|
||
if (moment(value).unix() - moment(new Date()).unix() > 0) {
|
||
callback()
|
||
} else {
|
||
callback(new Error('开始时间要大于当前时间'));
|
||
}
|
||
} else {
|
||
callback(new Error('请填写开始时间'));
|
||
}
|
||
}
|
||
return {
|
||
form: {
|
||
meetingClassification: [], //会议分类
|
||
meetingAgenda: "", //会议名称
|
||
meetingAddress: "",//会议地点
|
||
meetingDescription: "",//会议说明
|
||
hostList: [], //主持人
|
||
meetingBefore: "",
|
||
meetingAfter: "",
|
||
startTime: "",//开始时间
|
||
endTime: "",//结束时间
|
||
reminderMethod: ["5"],//提醒方式,默认不签到
|
||
signMethod: "0",//签到方式 默认不签到
|
||
appThreeMeetingOrganizationList: [],//组织
|
||
participantList: [],//与会人员
|
||
recorderList: [],//纪要负责人
|
||
chargeOfSignInList: [],//签到负责人
|
||
annex: "",
|
||
fileList: [],
|
||
isOnline: "0",
|
||
isVote: "0"
|
||
},
|
||
signStart: "",
|
||
signEnd: "",
|
||
areaId: "",
|
||
voteOps: '1',
|
||
fromRules: {
|
||
meetingClassification: [{required: true, message: "请选择会议分类", trigger: "change"}],
|
||
meetingAgenda: [{required: true, message: "请输入会议名称", trigger: "change"}],
|
||
meetingAddress: [{required: true, message: "请输入会议地点", trigger: "change"}],
|
||
isOnline: [{required: true, message: "请选择举办方式", trigger: "change"}],
|
||
voteTopic: [{required: true, message: "请输入投票主题", trigger: "change"}],
|
||
anonymous: [{required: true, message: "请选择投票形式", trigger: "change"}],
|
||
voteDeadline: [{required: true, message: "请选择截止时间", trigger: "change"}],
|
||
meetingDescription: [{required: true, message: "请输入会议说明", trigger: "change"}],
|
||
meetingBefore: [{required: true, message: '请填写签到时间', trigger: "change"}],
|
||
meetingBeforeCo: [{required: false, message: '请填写签到时间', trigger: "change"}],
|
||
startTime: [{required: true, validator: startTimePass, trigger: "change"}],
|
||
endTime: [{required: true, validator: endTimePass, trigger: "change"}],
|
||
signMethod: [{required: true, message: "请选择签到方式", trigger: "change"}],
|
||
reminderMethod: [{required: true, message: "请选择提醒方式", trigger: "change"}],
|
||
hostList: [{required: true, message: "请选择主持人", trigger: "change"}],
|
||
recorderList: [{required: true, message: "请选择纪要负责人", trigger: "change"}],
|
||
chargeOfSignInList: [{required: true, message: "请选择签到负责人", trigger: "change"}],
|
||
participantList: [{required: true, message: "请选择与会人员", trigger: "change"}],
|
||
appThreeMeetingOrganizationList: [{required: true, message: "请选择党组织", trigger: "change"}]
|
||
},
|
||
defaultProps: {
|
||
children: 'children',
|
||
label: 'name'
|
||
},
|
||
treeData: [],//tree
|
||
dialogVisible: false,//弹窗
|
||
filterText: "",//tree模糊搜索
|
||
selectParty: [],//选中的党组织
|
||
partyKey: 1,
|
||
isShowChooseUser: true,
|
||
search: {
|
||
postStatus: "",
|
||
meetingUserName: "",
|
||
},
|
||
};
|
||
|
||
},
|
||
watch: {
|
||
filterText(val) {
|
||
this.$refs.partyTree.filter(val);
|
||
},
|
||
selectParty(newVal) {
|
||
++this.partyKey
|
||
|
||
if (!newVal.length) {
|
||
this.isShowChooseUser = false
|
||
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
|
||
this.isShowChooseUser = true
|
||
}, 1000)
|
||
})
|
||
}
|
||
this.$set(this.form, 'hostList', [])
|
||
this.$set(this.form, 'recorderList', [])
|
||
this.$set(this.form, 'chargeOfSignInList', [])
|
||
this.$set(this.form, 'participantList', [])
|
||
},
|
||
form: {
|
||
handler(newVal) {
|
||
if (newVal.startTime && newVal.meetingBefore) {
|
||
let d = new Date(newVal.startTime);
|
||
let time = d.getTime();
|
||
let min = (Number(newVal.meetingBefore)) * 60000
|
||
let total = time - min;
|
||
this.signStart = this.$moment(total).format('YYYY-MM-DD HH:mm:ss');
|
||
}
|
||
if (newVal.startTime && newVal.meetingAfter) {
|
||
let d = new Date(newVal.startTime);
|
||
let time = d.getTime();
|
||
let min = (Number(newVal.meetingAfter)) * 60000
|
||
let total = time + min;
|
||
this.signEnd = this.$moment(total).format('YYYY-MM-DD HH:mm:ss');
|
||
}
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
deletePerson(index) {
|
||
if (this.form.participantList[index].isHost) {
|
||
this.form.participantList.map(e => {
|
||
this.$set(e, "isHost", false);
|
||
})
|
||
}
|
||
this.form.participantList.splice(index, 1);
|
||
},
|
||
//选择主持人
|
||
selectHost(index) {
|
||
this.form.participantList.map(e => {
|
||
e.isHost = false;
|
||
})
|
||
this.form.participantList[index].isHost = true;
|
||
},
|
||
|
||
//开始时间，结束时间验证
|
||
dataChange() {
|
||
this.$refs.startTime.$emit('el.form.change');
|
||
this.$refs.endTime.$emit('el.form.change');
|
||
if (!this.form.startTime) {
|
||
this.form.endTime = null
|
||
}
|
||
},
|
||
|
||
//与会人员
|
||
handleSelectParty() {
|
||
this.form.participantList.map(e => {
|
||
e.meetingUserRole = "3";
|
||
e.userName = e.name;
|
||
this.$set(e, "isHost", false);
|
||
})
|
||
},
|
||
//纪要负责人
|
||
changeRecorderList(val) {
|
||
if (val) {
|
||
this.$set(val, "meetingUserRole", "1");
|
||
this.$set(val, "userName", val.name);
|
||
this.form.recorderList.splice(0, 1, val);
|
||
} else {
|
||
this.form.recorderList = [];
|
||
}
|
||
},
|
||
//签到负责人
|
||
changeCharge(val) {
|
||
val.map((e) => {
|
||
this.$set(e, "meetingUserRole", "2");
|
||
this.$set(e, "userName", e.name);
|
||
})
|
||
this.form.chargeOfSignInList = val;
|
||
},
|
||
|
||
//参与人
|
||
changeParticipantList(val) {
|
||
this.$set(val, "meetingUserRole", "3");
|
||
this.$set(val, "userName", val.name);
|
||
this.form.participantList.push(val);
|
||
},
|
||
|
||
//保存提交表单验证
|
||
confirm(status) {
|
||
if (status == '1') {
|
||
this.$refs.basicForm.validate(validate => {
|
||
if (validate) {
|
||
this.addUpdate(status);
|
||
}
|
||
});
|
||
} else if (status == '0') {
|
||
if (this.form.meetingAgenda == "") {
|
||
return this.$message.error("请填写会议名称");
|
||
} else if (!this.form.appThreeMeetingOrganizationList.length) {
|
||
return this.$message.error("请选择与会组织");
|
||
} else {
|
||
this.addUpdate(status);
|
||
}
|
||
} else { //取消返回主页
|
||
this.$confirm('是否放弃编辑内容').then(() => {
|
||
this.$parent.goBack();
|
||
});
|
||
}
|
||
},
|
||
|
||
//新增
|
||
addUpdate(status) {
|
||
let hasHost = false;
|
||
this.form.participantList.map(e => {
|
||
if (e.isHost) {
|
||
hasHost = true;
|
||
this.form.hostList.push({
|
||
...e,
|
||
meetingUserRole: "0"
|
||
})
|
||
}
|
||
})
|
||
|
||
if (!hasHost && status == '1') {
|
||
return this.$message.error("请选择主持人");
|
||
}
|
||
|
||
if (this.form.signMethod == '0') {
|
||
this.form.chargeOfSignInList = [];
|
||
this.form.meetingBefore = "";
|
||
this.form.meetingAfter = "";
|
||
}
|
||
|
||
//会议分类
|
||
this.form.meetingClassification = this.form.meetingClassification.join(",");
|
||
|
||
//提醒方式
|
||
this.form.reminderMethod = this.form.reminderMethod.join(",");
|
||
|
||
//发布状态
|
||
let postStatus = status;
|
||
|
||
let appThreeMeetingUserList = [];
|
||
|
||
let meetingList = [];
|
||
|
||
//选择人员
|
||
meetingList = [...this.form.hostList, ...this.form.recorderList, ...this.form.chargeOfSignInList, ...this.form.participantList]
|
||
meetingList.forEach(i => {
|
||
appThreeMeetingUserList.push({
|
||
"meetingUserId": i.id,
|
||
"meetingUserName": i.name,
|
||
"meetingUserRole": i.meetingUserRole,
|
||
"avatarUrl": i.avatarUrl ? i.avatarUrl : ""
|
||
})
|
||
})
|
||
//附件
|
||
this.form.annex = JSON.stringify(this.form.fileList);
|
||
|
||
if (this.form.meetingBefore === '' && this.form.signMethod != 0) {
|
||
this.form.meetingBefore = 60
|
||
}
|
||
if (this.form.meetingAfter === '' && this.form.signMethod != 0) {
|
||
this.form.meetingAfter = 60
|
||
}
|
||
|
||
this.instance.post(`/app/appthreemeetinginfo/addOrUpdate`, {
|
||
...this.form,
|
||
...this.form.file,
|
||
...this.form.meetingUser,
|
||
appThreeMeetingUserList,
|
||
postStatus,
|
||
id: this.detail.id
|
||
}).then(res => {
|
||
if (res && res.code == 0) {
|
||
this.$message.success(status == '1' ? "会议新增成功" : "保存成功");
|
||
this.$parent.goBack();
|
||
}
|
||
})
|
||
},
|
||
|
||
//获取会议详请
|
||
getDetailInfo() {
|
||
this.detail.id && this.instance.post(`/app/appthreemeetinginfo/queryDetailById?id=${this.detail.id}`).then(res => {
|
||
if (res && res.data) {
|
||
this.form = res.data
|
||
this.form.meetingClassification = res.data.meetingClassification.split(",");
|
||
this.form.meetingAgenda = res.data.meetingAgenda;
|
||
this.form.meetingAddress = res.data.meetingAddress;
|
||
this.form.startTime = res.data.startTime;
|
||
this.form.endTime = res.data.endTime;
|
||
this.form.appThreeMeetingOrganizationList = res.data.appThreeMeetingOrganizationList;
|
||
this.form.meetingDescription = res.data.meetingDescription;
|
||
this.form.fileList = JSON.parse(res.data.annex || '[]');
|
||
this.form.participantList = res.data.participantList.map(e => {
|
||
return {
|
||
...e,
|
||
name: e.meetingUserName,
|
||
isHost: res.data.hostList.length ? (e.id == res.data.hostList[0].id) : false
|
||
}
|
||
});
|
||
this.form.recorderList = res.data.recorderList.map(e => {
|
||
return {...e, name: e.meetingUserName}
|
||
});
|
||
this.form.chargeOfSignInList = res.data.chargeOfSignInList.map(e => {
|
||
return {...e, name: e.meetingUserName}
|
||
});
|
||
this.form.signMethod = res.data.signMethod;
|
||
this.form.reminderMethod = res.data.reminderMethod.split(",");
|
||
this.form.meetingBefore = res.data.meetingBefore;
|
||
this.form.meetingAfter = res.data.meetingAfter;
|
||
}
|
||
});
|
||
},
|
||
|
||
//显示树结构
|
||
showDialogVisible() {
|
||
this.dialogVisible = true;
|
||
this.$nextTick(() => {
|
||
this.$refs.partyTree.setCheckedNodes(
|
||
this.form.appThreeMeetingOrganizationList
|
||
);
|
||
});
|
||
},
|
||
// 查询所有党组织 树形结构
|
||
searchSysAll() {
|
||
this.instance
|
||
.post("/app/partyOrganization/queryAllChildren", null, {
|
||
params: {id: this.user.info.organizationId}
|
||
})
|
||
.then(res => {
|
||
if (res && res.code == 0) {
|
||
res.data = res.data.map(a => {
|
||
return {...a};
|
||
});
|
||
this.treeData = res.data.filter(
|
||
e => e.id == this.user.info.organizationId
|
||
);
|
||
this.treeData.map(t => this.addChild(t, res.data));
|
||
if (this.filterText) {
|
||
this.$nextTick(() => {
|
||
this.$refs.partyTree.filter(this.filterText);
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//节点过滤/搜索
|
||
filterNode(value, data) {
|
||
if (!value) return true;
|
||
return data.name.indexOf(value) !== -1;
|
||
},
|
||
//选中的数据
|
||
handleCheckChange() {
|
||
this.selectParty = this.$refs.partyTree.getCheckedNodes()
|
||
},
|
||
//取消选择
|
||
cancelSelect(index) {
|
||
this.selectParty.splice(index, 1)
|
||
this.$refs.partyTree.setCheckedNodes(this.selectParty);
|
||
},
|
||
//删除选择
|
||
delate(index) {
|
||
let parentId = this.form.appThreeMeetingOrganizationList[index].parentId
|
||
this.form.appThreeMeetingOrganizationList.splice(index, 1);
|
||
this.form.appThreeMeetingOrganizationList.map((item, i) => {
|
||
if (item.id == parentId) {
|
||
this.delate(i)
|
||
}
|
||
})
|
||
|
||
this.form.hostList = []
|
||
this.form.recorderList = []
|
||
this.form.chargeOfSignInList = []
|
||
this.form.participantList = []
|
||
},
|
||
//清空
|
||
clearSelect() {
|
||
this.$refs.partyTree.setCheckedKeys([]);
|
||
this.selectParty = [];
|
||
this.form.hostList = []
|
||
this.form.recorderList = []
|
||
this.form.chargeOfSignInList = []
|
||
this.form.participantList = []
|
||
},
|
||
//确认选择
|
||
confirmSelect() {
|
||
this.form.appThreeMeetingOrganizationList = this.selectParty;
|
||
},
|
||
},
|
||
created() {
|
||
this.areaId = this.user.info.areaId;
|
||
this.dict.load('yesOrNo', 'ThreeMeetingAnonymous', "meetingClassification", "feminderMethod", "addSignMethod", "postStatus").then(() => {
|
||
this.searchSysAll();
|
||
if (this.detail && this.detail.id) {
|
||
this.getDetailInfo();
|
||
}
|
||
});
|
||
},
|
||
filters: {
|
||
formatTime(time) {
|
||
return moment(time).format("YYYY-MM-DD HH:mm");
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.addThreeMeeting {
|
||
height: 100%;
|
||
|
||
::v-deep .el-form {
|
||
.ailist-title {
|
||
padding-left: 0;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.el-form-item {
|
||
.el-date-editor {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .el-dialog__body {
|
||
padding-top: 16px !important;
|
||
}
|
||
|
||
.host {
|
||
font-size: 12px;
|
||
width: 40px;
|
||
height: 40px;
|
||
display: inline-block;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
color: #ffffff;
|
||
background-color: transparent;
|
||
border-radius: 50%;
|
||
opacity: 0;
|
||
|
||
&:hover {
|
||
opacity: 1;
|
||
background-color: #AAAAAA;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-upload--picture-card {
|
||
width: 84px !important;
|
||
height: 84px !important;
|
||
line-height: 30px !important;
|
||
background: rgba(245, 245, 245, 1) !important;
|
||
border-radius: 2px !important;
|
||
border: none !important;
|
||
}
|
||
|
||
.tips {
|
||
box-sizing: border-box;
|
||
padding: 0 106px;
|
||
font-size: 12px;
|
||
color: #999999;
|
||
line-height: 16px;
|
||
}
|
||
|
||
.person {
|
||
width: 100%;
|
||
margin-top: 16px;
|
||
|
||
.emcee {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
color: #2266FF;
|
||
padding: 0 106px;
|
||
font-size: 12px;
|
||
line-height: 16px;
|
||
}
|
||
|
||
.select-person {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
// width:70px;
|
||
margin: 0 15px;
|
||
height: 70px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.person-pictrue {
|
||
width: 54px;
|
||
height: 54px;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
position: relative;
|
||
|
||
img, div {
|
||
width: 40px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.del-icon {
|
||
position: absolute;
|
||
top: -12px;
|
||
right: -4px;
|
||
font-size: 16px;
|
||
color: #333;
|
||
width: 20px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.host {
|
||
top: 50%;
|
||
left: 50%;
|
||
line-height: 40px;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
|
||
.person-name {
|
||
font-size: 14px;
|
||
color: #666;
|
||
line-height: normal;
|
||
}
|
||
|
||
}
|
||
|
||
::v-deep .el-form-item__content {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.add-person {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
// width:70px;
|
||
margin: 0 15px;
|
||
height: 70px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.add-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
margin: 0 auto 4px;
|
||
text-align: center;
|
||
font-size: 20px;
|
||
color: #2266FF;
|
||
border: 1px dashed #2266ff;
|
||
border-radius: 50%;
|
||
box-sizing: border-box;
|
||
|
||
.icon-add {
|
||
color: #2266FF;
|
||
font-size: 20px;
|
||
margin-top: 5px;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
::v-deep p.add_top {
|
||
margin: 0;
|
||
}
|
||
|
||
.time-input {
|
||
width: 48px;
|
||
height: 32px;
|
||
margin: 0 8px;
|
||
|
||
::v-deep .el-input__inner {
|
||
line-height: 32px;
|
||
height: 32px;
|
||
padding: 0 10px;
|
||
}
|
||
}
|
||
|
||
::v-deep .select-party {
|
||
.el-dialog__header {
|
||
padding: 13px 16px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.el-dialog__body {
|
||
padding: 24px 40px 48px;
|
||
}
|
||
|
||
.el-tree {
|
||
background-color: #fcfcfc;
|
||
height: calc(100% - 40px);
|
||
width: 350px;
|
||
}
|
||
|
||
.add-item {
|
||
width: 274px;
|
||
height: 360px;
|
||
background: rgba(252, 252, 252, 1);
|
||
border-radius: 2px;
|
||
border: 1px solid rgba(208, 212, 220, 1);
|
||
position: relative;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
|
||
.add_top {
|
||
width: 100%;
|
||
height: 40px;
|
||
background: rgba(245, 245, 245, 1);
|
||
border-bottom: 1px solid rgba(208, 212, 220, 1);
|
||
padding: 0 8px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.tree_list {
|
||
width: 100%;
|
||
overflow: auto;
|
||
height: calc(100% - 40px);
|
||
|
||
|
||
}
|
||
|
||
.add_buttom {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
font-size: 12px;
|
||
width: 310px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
z-index: 10000;
|
||
background: rgba(245, 246, 247, 1);
|
||
color: rgba(51, 51, 51, 1);
|
||
box-shadow: 0 1px 0 0 rgba(216, 220, 227, 1);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.add_tag {
|
||
width: 310px;
|
||
height: calc(100% - 40px);
|
||
overflow-y: auto;
|
||
|
||
.el-tag {
|
||
margin: 8px 8px 0 8px;
|
||
background: rgba(238, 238, 238, 1);
|
||
border: none;
|
||
color: #666;
|
||
max-width: calc(100% - 16px);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
}
|
||
|
||
::v-deep .el-tag .el-icon-close {
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.organ {
|
||
width: auto;
|
||
height: auto;
|
||
padding: 0 10px;
|
||
line-height: 32px;
|
||
border: 1px solid #D0D4DC;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
box-sizing: border-box;
|
||
color: #666;
|
||
|
||
.organzation {
|
||
background-color: #eee;
|
||
margin-right: 4px;
|
||
padding: 4px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|
||
|
||
|