1156 lines
34 KiB
Vue
1156 lines
34 KiB
Vue
<template>
|
||
<ai-detail class="addThreeMeeting detail-content details-page no-content-border">
|
||
<ai-title slot="title" title="补录三会一课" isShowBack @onBackClick="$parent.goBack()" isShowBottomBorder/>
|
||
<template #content>
|
||
<ai-card title="基本信息">
|
||
<template #content>
|
||
<el-form :model="form.basic" label-width="100px" ref="basicForm" :rules="fromRules">
|
||
<div class="areaList" style="width:100%">
|
||
<el-form-item label="会议分类：" style="width:100%;" prop="meetingClassification">
|
||
<el-checkbox-group v-model="form.basic.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>
|
||
</div>
|
||
<div class="el-form-p">
|
||
<el-form-item prop="meetingAgenda" label="会议名称：" ref="fromTitle">
|
||
<el-input
|
||
v-model="form.basic.meetingAgenda"
|
||
size="small"
|
||
placeholder="限30字"
|
||
clearable
|
||
:maxLength="30"
|
||
></el-input>
|
||
</el-form-item>
|
||
<div class="el-form-p" style="margin-top:5px">
|
||
<el-form-item
|
||
prop="appThreeMeetingOrganizationList"
|
||
label="与会组织："
|
||
ref="appThreeMeetingOrganizationList"
|
||
>
|
||
<div class="organ" @click="showDialogVisible()">
|
||
<span v-if="form.basic.appThreeMeetingOrganizationList.length">
|
||
<span
|
||
v-for="(item,i) in form.basic.appThreeMeetingOrganizationList"
|
||
:key="i"
|
||
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>
|
||
</div>
|
||
<el-form-item prop="isOnline" label="举办方式：">
|
||
<el-radio label="1" v-model="form.basic.isOnline">线上举办</el-radio>
|
||
<el-radio label="0" v-model="form.basic.isOnline">线下举办</el-radio>
|
||
</el-form-item>
|
||
<el-form-item prop="meetingAddress" label="会议地点：" v-if="form.basic.isOnline==0">
|
||
<el-input
|
||
v-model="form.basic.meetingAddress"
|
||
size="small"
|
||
placeholder="限60字"
|
||
clearable
|
||
:maxLength="60"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-row type="flex" justify="space-between">
|
||
<el-form-item prop="startTime" label="开始时间：" ref="startTime">
|
||
<el-date-picker @change="dateChage()"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
size="small"
|
||
type="datetime"
|
||
v-model="form.basic.startTime"
|
||
placeholder="请选择..."
|
||
></el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item prop="endTime" label="结束时间：" ref="endTime">
|
||
<el-date-picker @change="dateChage()"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
size="small"
|
||
type="datetime"
|
||
v-model="form.basic.endTime"
|
||
placeholder="请选择..."
|
||
:disabled="!Boolean(form.basic.startTime)"
|
||
></el-date-picker>
|
||
</el-form-item>
|
||
</el-row>
|
||
<el-form-item label="会议说明：" prop="meetingDescription" calss="uedtor" style="margin-top: 20px;">
|
||
<ai-editor v-model="form.basic.meetingDescription" :instance="instance" :limit="3000"/>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form>
|
||
<el-form label-width="100px" ref="fileForm" :rules="fromRules">
|
||
<div class="el-form-p">
|
||
<el-form-item label="附件：">
|
||
<ai-uploader :instance="instance" v-model="fileList" fileType="file" :limit="10"></ai-uploader>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form>
|
||
</template>
|
||
</ai-card>
|
||
<ai-card title="人员设置">
|
||
<template #content>
|
||
<el-form
|
||
:model="form.meetingUser"
|
||
label-width="100px"
|
||
ref="meetingUserForm"
|
||
:rules="fromRules">
|
||
|
||
<div class="person">
|
||
<el-form-item label="与会人员：" prop="participantList" label-width="106px"
|
||
style="width:100%;margin-bottom: 10px;"
|
||
ref="participantList">
|
||
<div class="select-person" v-for="(item,index) in form.meetingUser.participantList"
|
||
:key="item+index" style="margin-bottom: 34px;">
|
||
<div class="person-pictrue" style="cursor: pointer;" @click="selectHost(index)">
|
||
<img :src="item.avatarUrl" v-if="item.avatarUrl">
|
||
<div
|
||
style="overflow: hidden;width:40px;white-space: nowrap;background-color:#2266FF;border-radius:50%;"
|
||
v-else>{{ item.name }}
|
||
</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.meetingUser.participantList"
|
||
:area-id="areaId"
|
||
:disable="participantDisable"
|
||
customOrg
|
||
:partyOrgList="form.basic.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-top: 20px;margin-bottom: 0;"
|
||
ref="recorderList">
|
||
<ai-person-select :customClicker="true" customRightText :instance="instance"
|
||
url="/admin/user/pageForWeb" headerTitle="人员列表" dialogTitle="选择"
|
||
@selectPerson="changeRecorderList">
|
||
<template v-slot:option="{ item }">
|
||
<span class="iconfont iconProlife">{{ item.name }}</span>
|
||
<ai-id mode="show" :show-eyes="false" :value="item.idNumber"/>
|
||
</template>
|
||
</ai-person-select>
|
||
</el-form-item>
|
||
<span class="tips">*从系统用户中选择，拥有签到管理权限</span>
|
||
</div>
|
||
</el-form>
|
||
</template>
|
||
</ai-card>
|
||
<ai-card title="会议纪要">
|
||
<template #content>
|
||
<el-form
|
||
:model="form.summary"
|
||
label-width="100px"
|
||
ref="summaryForm"
|
||
:rules="summaryRules"
|
||
>
|
||
<div class="el-form-p">
|
||
<el-form-item prop="content" label="纪要内容：">
|
||
<el-input
|
||
type="textarea"
|
||
:rows="6"
|
||
placeholder="请输入内容"
|
||
v-model="form.summary.content"
|
||
></el-input>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="el-form-p">
|
||
<el-form-item label="图片附件：">
|
||
<el-upload
|
||
class="upload-demo upload-list"
|
||
ref="upload"
|
||
multiple
|
||
action
|
||
list-type="picture-card"
|
||
:file-list="form.summary.images"
|
||
:http-request="uploadFilePhoto"
|
||
:on-remove="handleRemoveFilePhoto"
|
||
:on-change="fileChangePhoto"
|
||
accept=".jpeg, .jpg, .png">
|
||
<div class="upload-img">
|
||
<div class="iconfont iconPhoto"></div>
|
||
<div class="upload-text">上传照片</div>
|
||
</div>
|
||
</el-upload>
|
||
<div style="color: #999;font-size: 12px">最多上传50张图片,单个文件最大10MB，支持jpg、jpeg、png格式</div>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form>
|
||
</template>
|
||
</ai-card>
|
||
</template>
|
||
<template #footer>
|
||
<el-button size="small" @click="toList()">取消</el-button>
|
||
<el-button type="primary" size="small" @click="confirm()">保存</el-button>
|
||
</template>
|
||
<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"
|
||
@node-click="handleNodeClick"
|
||
: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="i"
|
||
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>
|
||
</ai-detail>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapState} from "vuex";
|
||
import moment from 'dayjs';
|
||
|
||
export default {
|
||
name: "supplement",
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
permissions: Function
|
||
},
|
||
computed: {
|
||
isEdit() {
|
||
return this.detail ? Boolean(this.detail.id) : false;
|
||
},
|
||
...mapState(["user"]),
|
||
|
||
participantDisable() {
|
||
if (!this.form.meetingUser) return []
|
||
|
||
const list = [
|
||
...this.form.meetingUser.recorderList,
|
||
...this.form.meetingUser.hostList
|
||
]
|
||
|
||
return list || []
|
||
}
|
||
},
|
||
data() {
|
||
let endTimePass = (rule, value, callback) => {
|
||
if (value) {
|
||
if (
|
||
moment(value).unix() - moment(this.form.basic.startTime).unix() > 0
|
||
) {
|
||
callback();
|
||
} else {
|
||
callback(new Error("结束时间要大于开始时间"));
|
||
}
|
||
} else {
|
||
callback(new Error("请填写结束时间"));
|
||
}
|
||
};
|
||
let startTimePass = (rule, value, callback) => {
|
||
if (value) {
|
||
callback();
|
||
} else {
|
||
callback(new Error("请填写开始时间"));
|
||
}
|
||
};
|
||
let meetingBeforePass = (rule, value, callback) => {
|
||
if (value) {
|
||
if (this.form.basic.meetingAfter) {
|
||
callback();
|
||
} else {
|
||
callback(new Error("请填写签到时间"));
|
||
}
|
||
} else {
|
||
callback(new Error("请填写签到时间"));
|
||
}
|
||
};
|
||
return {
|
||
dictList: [
|
||
"meetingClassification",
|
||
"feminderMethod",
|
||
"addSignMethod"
|
||
],
|
||
form: {
|
||
basic: {
|
||
editable: false,
|
||
id: "",
|
||
meetingClassification: [], //会议分类
|
||
meetingAgenda: "",
|
||
meetingAddress: "", //会议地址
|
||
meetingDescription: "", //补充说明
|
||
meetingBefore: "",
|
||
meetingAfter: "",
|
||
startTime: "", //开始时间
|
||
endTime: "", //结束时间
|
||
appThreeMeetingOrganizationList: [], //组织
|
||
isOnline: "0"
|
||
},
|
||
file: {
|
||
annex: [], //附件
|
||
editable: false
|
||
},
|
||
meetingUser: {
|
||
editable: false,
|
||
hostList: [], //主持人
|
||
recorderList: [], //记录人
|
||
participantList: [] //参与人
|
||
},
|
||
summary: {
|
||
createUserId: "",
|
||
editable: false,
|
||
content: "",
|
||
images: [],
|
||
meetingId: ""
|
||
}
|
||
},
|
||
signStart: "",
|
||
signEnd: "",
|
||
areaId: "",
|
||
fromRules: {
|
||
meetingClassification: [
|
||
{required: true, message: "请选择会议分类", trigger: "change"}
|
||
],
|
||
meetingAgenda: [{required: true, message: "请输入会议标题", trigger: "change"}],
|
||
isOnline: [{required: true, message: "请选择举办方式", trigger: "change"}],
|
||
meetingAddress: [
|
||
{required: true, message: "请输入会议地点", trigger: "change"}
|
||
],
|
||
meetingDescription: [
|
||
{required: true, message: "请输入补充说明", trigger: "change"}
|
||
],
|
||
meetingBefore: [
|
||
{required: true, validator: meetingBeforePass, trigger: "change"}
|
||
],
|
||
startTime: [
|
||
{required: true, validator: startTimePass, trigger: "change"}
|
||
],
|
||
endTime: [
|
||
{required: true, validator: endTimePass, trigger: "change"}
|
||
],
|
||
hostList: [
|
||
{required: true, message: "请选择主持人", trigger: "change"}
|
||
],
|
||
recorderList: [
|
||
{required: true, message: "请选择记录人", trigger: "change"}
|
||
],
|
||
participantList: [
|
||
{required: true, message: "请选择参与人", trigger: "change"}
|
||
],
|
||
appThreeMeetingOrganizationList: [
|
||
{required: true, message: "请选择党组织", trigger: "change"}
|
||
]
|
||
},
|
||
summaryRules: {
|
||
content: [{required: true, message: "请输入正文内容", trigger: "change"}],
|
||
},
|
||
defaultProps: {
|
||
children: "children",
|
||
label: "name"
|
||
},
|
||
treeData: [], //tree
|
||
dialogVisible: false, //弹窗
|
||
filterText: "", //tree模糊搜索
|
||
selectParty: [], //选中的党组织
|
||
fileList: [],
|
||
}
|
||
},
|
||
watch: {
|
||
filterText(val) {
|
||
this.$refs.partyTree.filter(val);
|
||
},
|
||
form: {
|
||
handler(newVal) {
|
||
if (newVal.basic.startTime && newVal.basic.meetingBefore) {
|
||
let d = new Date(newVal.basic.startTime);
|
||
let time = d.getTime();
|
||
let min = Number(newVal.basic.meetingBefore) * 60000;
|
||
let total = time - min;
|
||
this.signStart = this.countTime(total);
|
||
}
|
||
if (newVal.basic.startTime && newVal.basic.meetingAfter) {
|
||
let d = new Date(newVal.basic.startTime);
|
||
let time = d.getTime();
|
||
let min = Number(newVal.basic.meetingAfter) * 60000;
|
||
let total = time + min;
|
||
this.signEnd = this.countTime(total);
|
||
}
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
deletePerson(index) {
|
||
if (this.form.meetingUser.participantList[index].isHost) {
|
||
this.form.meetingUser.participantList.map(e => {
|
||
this.$set(e, "isHost", false);
|
||
})
|
||
}
|
||
this.form.meetingUser.participantList.splice(index, 1);
|
||
},
|
||
selectHost(index) {
|
||
this.form.meetingUser.participantList.map(e => {
|
||
e.isHost = false;
|
||
})
|
||
this.form.meetingUser.participantList[index].isHost = true;
|
||
},
|
||
toList() {
|
||
this.$parent.goBack();
|
||
},
|
||
//开始时间，结束时间验证
|
||
dateChage() {
|
||
this.$refs.startTime.$emit("el.form.change");
|
||
this.$refs.endTime.$emit("el.form.change");
|
||
},
|
||
// 上传照片
|
||
uploadFilePhoto(file) {
|
||
let isPng = file.file.type == "image/jpeg" ||
|
||
file.file.type == "image/png" ||
|
||
file.file.type == "image/jpg";
|
||
|
||
if (!isPng) {
|
||
this.$message.warning("上传图片信息必须是jpeg/png/jpg格式!");
|
||
for (let i = 0; i < this.form.summary.images.length; i++) {
|
||
if (this.form.summary.images[i].uid == file.file.uid) {
|
||
this.form.summary.images.splice(i, 1);
|
||
}
|
||
}
|
||
return;
|
||
}
|
||
const isLt10M = file.file.size / 1024 / 1024 < 10;
|
||
if (!isLt10M) {
|
||
this.$message.warning("图片大小不能超过 10MB!");
|
||
for (let i = 0; i < this.form.summary.images.length; i++) {
|
||
if (this.form.summary.images[i].uid == file.file.uid) {
|
||
this.form.summary.images.splice(i, 1);
|
||
}
|
||
}
|
||
return;
|
||
}
|
||
if (this.form.summary.images.length > 50) {
|
||
this.$message.error("图片信息不能超过50张");
|
||
this.form.summary.images.map((item, index) => {
|
||
if (item.uid == file.file.uid) {
|
||
this.form.summary.images.splice(index, 1);
|
||
}
|
||
return this.form.summary.images;
|
||
});
|
||
return;
|
||
}
|
||
let formData = new FormData();
|
||
formData.append("file", file.file);
|
||
this.instance.post(`/admin/file/add`, formData).then(res => {
|
||
if (res.msg == "success") {
|
||
this.$message({message: "图片上传成功", type: "success"});
|
||
let imgInfo = res.data[0].split(";");
|
||
let img = {
|
||
fileId: imgInfo[1],
|
||
accessUrl: imgInfo[0]
|
||
};
|
||
this.form.summary.images.map((item, index) => {
|
||
if (item.uid == file.file.uid) {
|
||
this.form.summary.images[index].fileId = img.fileId;
|
||
this.form.summary.images[index].accessUrl = img.accessUrl;
|
||
this.form.summary.images[index].url = img.accessUrl;
|
||
}
|
||
return this.form.summary.images;
|
||
});
|
||
}
|
||
});
|
||
},
|
||
handleRemoveFilePhoto(file, fileList) {
|
||
this.form.summary.images = fileList;
|
||
},
|
||
fileChangePhoto(file, fileList) {
|
||
this.form.summary.images = fileList;
|
||
},
|
||
//会议签到时间计算
|
||
countTime(total) {
|
||
let now = new Date(total);
|
||
let y = now.getFullYear();
|
||
let m = now.getMonth() + 1;
|
||
m = m < 10 ? "0" + m : m;
|
||
let da = now.getDate();
|
||
da = da < 10 ? "0" + da : da;
|
||
let h = now.getHours();
|
||
h = h < 10 ? "0" + h : h;
|
||
let minute = now.getMinutes();
|
||
minute = minute < 10 ? "0" + minute : minute;
|
||
let seconds = now.getSeconds();
|
||
seconds = seconds < 10 ? "0" + seconds : seconds;
|
||
return y + "-" + m + "-" + da + " " + h + ":" + minute + ":" + seconds;
|
||
},
|
||
|
||
//纪要负责人
|
||
changeRecorderList(val) {
|
||
if (val) {
|
||
this.$set(val, "meetingUserRole", "1");
|
||
this.$set(val, "userName", val.name);
|
||
this.form.meetingUser.recorderList.splice(0, 1, val);
|
||
} else {
|
||
this.form.meetingUser.recorderList = [];
|
||
}
|
||
},
|
||
|
||
//与会人员
|
||
handleSelectParty() {
|
||
this.form.meetingUser.participantList.map(e => {
|
||
e.meetingUserRole = "3";
|
||
e.userName = e.name;
|
||
this.$set(e, "isHost", false);
|
||
})
|
||
},
|
||
|
||
//保存提交表单验证
|
||
confirm() {
|
||
this.$refs.basicForm.validate(validate => {
|
||
let flag = validate;
|
||
for (let k in this.form) {
|
||
if (this.$refs[k + "Form"])
|
||
this.$refs[k + "Form"].validate(v => {
|
||
flag = flag && v;
|
||
});
|
||
}
|
||
if (flag) {
|
||
this.addUpdate();
|
||
}
|
||
});
|
||
},
|
||
//新增
|
||
addUpdate() {
|
||
let hasHost = false;
|
||
this.form.meetingUser.participantList.map(e => {
|
||
if (e.isHost) {
|
||
hasHost = true;
|
||
this.form.meetingUser.hostList.push({
|
||
...e,
|
||
meetingUserRole: "0"
|
||
})
|
||
}
|
||
})
|
||
|
||
if (!hasHost) {
|
||
return this.$message.error("请选择主持人");
|
||
}
|
||
|
||
//会议分类
|
||
this.form.basic.meetingClassification = this.form.basic.meetingClassification.join(",");
|
||
|
||
//发布状态
|
||
let postStatus = 0;
|
||
|
||
let appThreeMeetingUserList = [];
|
||
let meetingList = [];
|
||
|
||
//选择人员
|
||
meetingList = [
|
||
...this.form.meetingUser.hostList,
|
||
...this.form.meetingUser.recorderList,
|
||
...this.form.meetingUser.participantList
|
||
];
|
||
meetingList.forEach(i => {
|
||
appThreeMeetingUserList.push({
|
||
meetingUserId: i.id,
|
||
meetingUserName: i.userName,
|
||
meetingUserRole: i.meetingUserRole,
|
||
organizationId: i.partyOrgId,
|
||
organizationName: i.partyOrgName
|
||
});
|
||
});
|
||
|
||
// this.form.summary.images = JSON.stringify(this.form.summary.images);
|
||
let imgs = this.form.summary.images.map(e => {
|
||
return {
|
||
url: e.url
|
||
}
|
||
})
|
||
this.instance
|
||
.post(`/app/appthreemeetinginfo/makeup`, {
|
||
...this.form.basic,
|
||
...this.form.file,
|
||
...this.form.meetingUser,
|
||
...this.form.summary,
|
||
annex: JSON.stringify(this.fileList),
|
||
images: JSON.stringify(imgs),
|
||
appThreeMeetingUserList,
|
||
postStatus
|
||
}).then(res => {
|
||
if (res && res.code == 0) {
|
||
this.$message.success("会议补录成功");
|
||
this.$parent.goBack();
|
||
}
|
||
});
|
||
},
|
||
//显示树结构
|
||
showDialogVisible() {
|
||
this.dialogVisible = true;
|
||
this.$nextTick(() => {
|
||
this.$refs.partyTree.setCheckedNodes(
|
||
this.form.basic.appThreeMeetingOrganizationList
|
||
);
|
||
});
|
||
},
|
||
// 查询所有党组织 树形结构
|
||
searchSysAll() {
|
||
this.instance
|
||
.post("/admin/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;
|
||
},
|
||
//点击节点
|
||
handleNodeClick() {
|
||
},
|
||
//选中的数据
|
||
handleCheckChange() {
|
||
this.selectParty = this.$refs.partyTree.getCheckedNodes();
|
||
},
|
||
//取消选择
|
||
cancelSelect(index) {
|
||
this.selectParty.splice(index, 1);
|
||
this.$refs.partyTree.setCheckedNodes(this.selectParty);
|
||
},
|
||
//删除选择
|
||
delate(index) {
|
||
this.form.basic.appThreeMeetingOrganizationList.splice(index, 1);
|
||
this.form.meetingUser.hostList = [];
|
||
this.form.meetingUser.recorderList = [];
|
||
this.form.meetingUser.participantList = [];
|
||
},
|
||
//清空
|
||
clearSelect() {
|
||
this.$refs.partyTree.setCheckedKeys([]);
|
||
this.selectParty = [];
|
||
this.form.meetingUser.hostList = [];
|
||
this.form.meetingUser.recorderList = [];
|
||
this.form.meetingUser.participantList = [];
|
||
},
|
||
//确认选择
|
||
confirmSelect() {
|
||
this.form.basic.appThreeMeetingOrganizationList = this.selectParty;
|
||
},
|
||
},
|
||
mounted() {
|
||
this.dict.load(this.dictList);
|
||
if (!this.isEdit) {
|
||
this.form.basic.editable = true;
|
||
this.form.file.editable = true;
|
||
this.form.meetingUser.editable = true;
|
||
this.form.summary.editable = true;
|
||
this.searchSysAll();
|
||
} else {
|
||
if (this.copy) {
|
||
for (let k in this.form) {
|
||
this.form[k].editable = true;
|
||
}
|
||
}
|
||
this.getDetailInfo();
|
||
}
|
||
this.areaId = this.user.info.areaId;
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.addThreeMeeting {
|
||
|
||
::v-deep .el-upload-list--picture-card {
|
||
.el-upload-list__item-actions {
|
||
width: 84px !important;
|
||
height: 84px !important;
|
||
}
|
||
}
|
||
|
||
.host {
|
||
font-size: 12px;
|
||
width: 40px;
|
||
height: 40px;
|
||
display: inline-block;
|
||
position: absolute;
|
||
left: 6px;
|
||
top: 6px;
|
||
color: #ffffff;
|
||
background-color: transparent;
|
||
border-radius: 50%;
|
||
opacity: 0;
|
||
|
||
&:hover {
|
||
opacity: 1;
|
||
background-color: #AAAAAA;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-upload-list__item {
|
||
margin-right: 16px;
|
||
}
|
||
|
||
::v-deep .el-date-editor--datetime {
|
||
width: 100% !important;
|
||
}
|
||
|
||
::v-deep .el-upload-list__item:nth-of-type(7) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
::v-deep .el-upload-list__item,
|
||
.el-upload-list__item {
|
||
img {
|
||
width: 84px !important;
|
||
height: 84px !important;
|
||
border-radius: 2px !important;
|
||
}
|
||
}
|
||
|
||
.upload-list {
|
||
// padding-bottom: 100px;
|
||
|
||
::v-deep .el-upload-list__item {
|
||
width: 84px !important;
|
||
height: 84px !important;
|
||
border-radius: 2px !important;
|
||
}
|
||
}
|
||
|
||
.upload-img {
|
||
width: 84px;
|
||
height: 84px;
|
||
background: rgba(245, 245, 245, 1);
|
||
border-radius: 2px;
|
||
border: 1px solid rgba(208, 212, 220, 1);
|
||
|
||
.iconPhoto {
|
||
margin-top: 20px;
|
||
font-size: 32px;
|
||
color: #8b9cb6;
|
||
}
|
||
}
|
||
|
||
.upload-demo {
|
||
// padding: 0 15px;
|
||
}
|
||
|
||
.upload-text {
|
||
color: rgba(102, 102, 102, 1);
|
||
font-size: 12px;
|
||
height: 16px;
|
||
line-height: 16px;
|
||
}
|
||
|
||
::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;
|
||
}
|
||
|
||
.content-left {
|
||
width: 160px;
|
||
height: 100%;
|
||
// float:left;
|
||
position: absolute;
|
||
left: -224px;
|
||
|
||
.content-left-nav {
|
||
width: 158px;
|
||
background-color: #ffffff;
|
||
border-radius: 4px;
|
||
border: solid 1px #eeeeee;
|
||
margin-top: 56px;
|
||
overflow: hidden;
|
||
|
||
li {
|
||
height: 48px;
|
||
line-height: 48px;
|
||
padding-left: 24px;
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0;
|
||
color: #666666;
|
||
cursor: pointer;
|
||
border-left: 3px solid transparent;
|
||
|
||
&:hover {
|
||
border-left: 3px solid #5088ff;
|
||
}
|
||
|
||
a {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.navActive {
|
||
border-left: 3px solid #5088ff;
|
||
color: #5088ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.flie {
|
||
width: 100%;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
padding: 0 8px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
color: rgba(51, 51, 51, 1);
|
||
background: rgba(255, 255, 255, 1);
|
||
border-radius: 4px;
|
||
border: 1px solid rgba(208, 212, 220, 1);
|
||
margin-bottom: 16px;
|
||
cursor: pointer;
|
||
|
||
p {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
|
||
.iconDelete {
|
||
color: #8899bb;
|
||
margin-left: 4px;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.flie:hover {
|
||
background-color: #f3f6f9;
|
||
border: none;
|
||
}
|
||
|
||
.flie:hover .iconDelete {
|
||
color: #ff4466;
|
||
}
|
||
|
||
.person {
|
||
width: 100%;
|
||
|
||
.tips {
|
||
box-sizing: border-box;
|
||
padding: 0 106px;
|
||
font-size: 12px;
|
||
color: #999999;
|
||
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 {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.del-icon {
|
||
position: absolute;
|
||
top: -12px;
|
||
right: -4px;
|
||
font-size: 20px;
|
||
color: #333;
|
||
width: 20px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.time-input {
|
||
width: 48px;
|
||
height: 32px;
|
||
margin: 0 8px;
|
||
|
||
::v-deep .el-input__inner {
|
||
line-height: 32px;
|
||
height: 32px;
|
||
padding: 0 10px;
|
||
}
|
||
}
|
||
|
||
.select-party {
|
||
::v-deep .el-dialog__header {
|
||
padding: 13px 16px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
::v-deep .el-dialog__body {
|
||
padding: 24px 40px 48px;
|
||
}
|
||
|
||
::v-deep .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;
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.el-checkbox {
|
||
width: 20%;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
|
||
|