|
@@ -1,6 +1,76 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
+ <el-form-item label="会议名称" prop="meetingName">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.meetingName"
|
|
|
+ placeholder="请输入会议名称"
|
|
|
+ clearable
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="入会人员" prop="membersId">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.membersId"
|
|
|
+ placeholder="请输入入会人员"
|
|
|
+ clearable
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="承办组织" prop="checkOrganization">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.checkOrganization"
|
|
|
+ placeholder="请输入承办组织"
|
|
|
+ clearable
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="议题标签" prop="topicId">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.topicId"
|
|
|
+ placeholder="请输入议题标签"
|
|
|
+ clearable
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="会议类型" prop="meetingType">
|
|
|
+ <el-select v-model="queryParams.meetingType" placeholder="请选择会议类型" clearable>
|
|
|
+ <el-option
|
|
|
+ v-for="dict in dict.type.meeting_type"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="会议状态" prop="meetingState">
|
|
|
+ <el-select v-model="queryParams.meetingState" placeholder="请选择会议状态" clearable>
|
|
|
+ <el-option
|
|
|
+ v-for="dict in dict.type.metting_state"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item><el-form-item label="会议时间">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="queryParams.startTime"
|
|
|
+ type="datetime"
|
|
|
+ value-format="yyyy-MM-dd HH:mm"
|
|
|
+ format="yyyy-MM-dd HH:mm"
|
|
|
+ placeholder="请选择开始时间"
|
|
|
+ style="width: 180px;"
|
|
|
+ />
|
|
|
+ <span style="margin: 0 10px;">至</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="queryParams.endTime"
|
|
|
+ type="datetime"
|
|
|
+ value-format="yyyy-MM-dd HH:mm"
|
|
|
+ format="yyyy-MM-dd HH:mm"
|
|
|
+ placeholder="请选择结束时间"
|
|
|
+ style="width: 180px;"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
@@ -112,8 +182,8 @@
|
|
|
/>
|
|
|
|
|
|
<!-- 添加或修改会议列表对话框 -->
|
|
|
- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
|
|
- <el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
|
+ <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
|
|
|
<el-form-item label="会议类型" prop="meetingType">
|
|
|
<el-select v-model="form.meetingType" placeholder="请选择会议类型">
|
|
|
<el-option
|
|
@@ -124,7 +194,7 @@
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="会议状态" prop="meetingState">
|
|
|
+ <!-- <el-form-item label="会议状态" prop="meetingState">
|
|
|
<el-select v-model="form.meetingState" placeholder="请选择会议状态">
|
|
|
<el-option
|
|
|
v-for="dict in dict.type.meeting_state"
|
|
@@ -133,7 +203,7 @@
|
|
|
:value="parseInt(dict.value)"
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
- </el-form-item>
|
|
|
+ </el-form-item> -->
|
|
|
<el-form-item label="会议名称" prop="meetingName">
|
|
|
<el-input v-model="form.meetingName" placeholder="请输入会议名称" />
|
|
|
</el-form-item>
|
|
@@ -162,32 +232,99 @@
|
|
|
<el-input v-model="form.roomDetail" type="textarea" placeholder="请输入内容" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="提前进场时间" prop="enterTime">
|
|
|
- <el-date-picker clearable
|
|
|
+ <el-time-picker clearable
|
|
|
v-model="form.enterTime"
|
|
|
- type="datetime"
|
|
|
value-format="HH:mm"
|
|
|
format="HH:mm"
|
|
|
- placeholder="请选择提前进场时间">
|
|
|
- </el-date-picker>
|
|
|
+ placeholder="任意时间点"/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="入会人员" prop="membersId">
|
|
|
- <el-input v-model="form.membersId" placeholder="请输入入会人员id" />
|
|
|
+ <el-form-item label="添加与会人员" prop="members">
|
|
|
+ <div class="attendees-container">
|
|
|
+ <div v-for="(item, index) in form.members" :key="index" class="attendee-item">
|
|
|
+ <!-- 角色选择(字典) -->
|
|
|
+ <el-select
|
|
|
+ v-model="item.role"
|
|
|
+ placeholder="请选择角色"
|
|
|
+ style="width: 120px; margin-right: 10px;"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="dict in dict.type.members"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <!-- 用户选择(树形多选) -->
|
|
|
+ <treeselect
|
|
|
+ v-model="item.userIds"
|
|
|
+ :options="deptOptions"
|
|
|
+ :normalizer="normalizer"
|
|
|
+ :multiple="true"
|
|
|
+ :disable-branch-nodes="true"
|
|
|
+ placeholder="请选择员工"
|
|
|
+ style="width: 300px; margin-right: 10px;"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 删除按钮 -->
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="removeAttendee(index)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 新增按钮 -->
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ @click="addAttendee"
|
|
|
+ style="margin-top: 10px;"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="会议签到" prop="meetingCheck">
|
|
|
- <el-input v-model="form.meetingCheck" placeholder="请输入会议签到" />
|
|
|
+ <el-radio-group v-model="form.meetingCheck">
|
|
|
+ <el-radio label="1">是</el-radio>
|
|
|
+ <el-radio label="0">否</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="签到模式" prop="checkmode" v-if="form.meetingCheck === '1'">
|
|
|
+ <el-radio-group v-model="form.checkmode">
|
|
|
+ <el-radio label="0">点击签到</el-radio>
|
|
|
+ <el-radio label="1">手写签到</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="会议通知" prop="meetingNotice">
|
|
|
+ <el-switch
|
|
|
+ v-model="form.meetingNotice"
|
|
|
+ active-value="1"
|
|
|
+ inactive-value="0"
|
|
|
+ active-text="启用"
|
|
|
+ inactive-text="禁用"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="通知内容" prop="noticeText">
|
|
|
+ <el-input v-model="form.noticeText" placeholder="请输入会议签到" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="会议维护人" prop="maintenance">
|
|
|
<el-input v-model="form.maintenance" placeholder="请输入会议维护人" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="承办组织" prop="checkOrganization">
|
|
|
- <el-input v-model="form.checkOrganization" placeholder="请输入承办组织" />
|
|
|
+ <el-cascader
|
|
|
+ v-model="form.checkOrganization"
|
|
|
+ :options="userTreeOptions"
|
|
|
+ :props="{ multiple: false, checkStrictly: true }"
|
|
|
+ placeholder="请选择承办组织"
|
|
|
+ style="width: 300px; margin-right: 10px;"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="会后查阅附件" prop="selectText">
|
|
|
<el-input v-model="form.selectText" placeholder="请输入会后查阅附件" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="议题" prop="topicId">
|
|
|
- <el-input v-model="form.topicId" placeholder="请输入议题id" />
|
|
|
- </el-form-item>
|
|
|
<el-form-item label="发布时间" prop="meetingTime">
|
|
|
<el-date-picker clearable
|
|
|
v-model="form.meetingTime"
|
|
@@ -202,6 +339,9 @@
|
|
|
<el-form-item label="备注" prop="remark">
|
|
|
<el-input v-model="form.remark" placeholder="请输入备注" />
|
|
|
</el-form-item>
|
|
|
+ <el-form-item label="议题" prop="topicId">
|
|
|
+ <el-input v-model="form.topicId" placeholder="请输入议题id" />
|
|
|
+ </el-form-item>
|
|
|
</el-form>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
@@ -213,10 +353,17 @@
|
|
|
|
|
|
<script>
|
|
|
import { listMeeting, getMeeting, delMeeting, addMeeting, updateMeeting } from "@/api/meeting/meeting";
|
|
|
+import { deptTreeSelect } from "@/api/system/user"
|
|
|
+import { listDept } from '@/api/system/dept'
|
|
|
+import Treeselect from '@riophae/vue-treeselect'
|
|
|
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
|
|
+
|
|
|
+
|
|
|
|
|
|
export default {
|
|
|
name: "Meeting",
|
|
|
- dicts: ['meeting_type', 'meeting_state'],
|
|
|
+ dicts: ['meeting_type', 'meeting_state','members'],
|
|
|
+ components: { Treeselect },
|
|
|
data() {
|
|
|
return {
|
|
|
// 遮罩层
|
|
@@ -227,12 +374,15 @@ export default {
|
|
|
single: true,
|
|
|
// 非多个禁用
|
|
|
multiple: true,
|
|
|
+ deptId: 0,
|
|
|
// 显示搜索条件
|
|
|
showSearch: true,
|
|
|
// 总条数
|
|
|
total: 0,
|
|
|
// 会议列表表格数据
|
|
|
meetingList: [],
|
|
|
+ userTreeOptions: [], // 用户树形数据,需从接口获取
|
|
|
+ deptOptions: [],
|
|
|
// 弹出层标题
|
|
|
title: "",
|
|
|
// 是否显示弹出层
|
|
@@ -241,11 +391,22 @@ export default {
|
|
|
queryParams: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
+ meetingType: null,
|
|
|
+ meetingState: null,
|
|
|
+ meetingName: null,
|
|
|
+ membersId: null,
|
|
|
+ checkOrganization: null,
|
|
|
+ topicId: null,
|
|
|
+ startTime:null,
|
|
|
+ endTime:null,
|
|
|
},
|
|
|
// 表单参数
|
|
|
form: {},
|
|
|
// 表单校验
|
|
|
rules: {
|
|
|
+ meetingType: [
|
|
|
+ { required: true, message: "会议类型不能为空", trigger: "blur" }
|
|
|
+ ],
|
|
|
meetingName: [
|
|
|
{ required: true, message: "会议名称不能为空", trigger: "blur" }
|
|
|
],
|
|
@@ -255,13 +416,76 @@ export default {
|
|
|
endTime: [
|
|
|
{ required: true, message: "会议结束时间不能为空", trigger: "blur" }
|
|
|
],
|
|
|
+ members: [
|
|
|
+ { required: true, message: "请至少添加一名与会人员", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ meetingCheck: [
|
|
|
+ { required: true, message: "请选择是否需要签到", trigger: "change" }
|
|
|
+ ],
|
|
|
+ checkmode: [
|
|
|
+ { required: true, message: "请选择签到模式", trigger: "change", validator: (rule, value, callback) => {
|
|
|
+ if (this.form.meetingCheck === '1' && !value) {
|
|
|
+ callback(new Error("请选择签到模式"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ ],
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
this.getList();
|
|
|
+ this.loadUserTree();
|
|
|
},
|
|
|
methods: {
|
|
|
+ loadUserTree() {
|
|
|
+ deptTreeSelect().then(response => {
|
|
|
+ this.userTreeOptions = response.data;
|
|
|
+ });
|
|
|
+ listDept().then(response => {
|
|
|
+ this.deptOptions = this.handleTree(response.data, 'deptId')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleTree(data, idField) {
|
|
|
+ const uniqueData = data.reduce((acc, current) => {
|
|
|
+ if (!acc.some(item => item[idField] === current[idField])) {
|
|
|
+ acc.push(current);
|
|
|
+ }
|
|
|
+ return acc;
|
|
|
+ }, []);
|
|
|
+ return this.buildTree(uniqueData, idField);
|
|
|
+ },
|
|
|
+ buildTree(data, idField = 'deptId', parentField = 'parentId', childrenField = 'children') {
|
|
|
+ const map = {};
|
|
|
+ const tree = [];
|
|
|
+
|
|
|
+ data.forEach(item => {
|
|
|
+ map[item[idField]] = { ...item };
|
|
|
+ });
|
|
|
+
|
|
|
+ data.forEach(item => {
|
|
|
+ const parentId = item[parentField];
|
|
|
+ if (parentId && map[parentId]) {
|
|
|
+ if (!map[parentId][childrenField]) {
|
|
|
+ map[parentId][childrenField] = [];
|
|
|
+ }
|
|
|
+ map[parentId][childrenField].push(map[item[idField]]);
|
|
|
+ } else if (parentId === 0 || !map[parentId]) {
|
|
|
+ tree.push(map[item[idField]]);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ return tree;
|
|
|
+ },
|
|
|
+ addAttendee() {
|
|
|
+ this.form.members.push({ role: null, userIds: [] });
|
|
|
+ },
|
|
|
+ removeAttendee(index) {
|
|
|
+ if (this.form.members.length > 1) {
|
|
|
+ this.form.members.splice(index, 1);
|
|
|
+ }
|
|
|
+ },
|
|
|
/** 查询会议列表列表 */
|
|
|
getList() {
|
|
|
this.loading = true;
|
|
@@ -288,8 +512,11 @@ export default {
|
|
|
roomId: null,
|
|
|
roomDetail: null,
|
|
|
enterTime: null,
|
|
|
- membersId: null,
|
|
|
+ members: [],
|
|
|
+ checkmode: null,
|
|
|
meetingCheck: null,
|
|
|
+ meetingNotice: "0",
|
|
|
+ noticeText: null,
|
|
|
maintenance: null,
|
|
|
checkOrganization: null,
|
|
|
selectText: null,
|
|
@@ -367,7 +594,31 @@ export default {
|
|
|
this.download('meeting/meeting/export', {
|
|
|
...this.queryParams
|
|
|
}, `meeting_${new Date().getTime()}.xlsx`)
|
|
|
+ },
|
|
|
+ normalizer(node) {
|
|
|
+ if (node.children && !node.children.length) {
|
|
|
+ delete node.children
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ id: node.deptId,
|
|
|
+ label: node.deptName,
|
|
|
+ children: node.children
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.attendees-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.attendee-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+</style>
|