index.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541
  1. <template>
  2. <div class="app-container">
  3. <div ref="sousuH">
  4. <!-- 搜索工作栏 -->
  5. <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
  6. <el-form-item label="会议名称" prop="meetingName">
  7. <el-input v-model="queryParams.meetingName" placeholder="请输入会议名称" clearable @keyup.enter.native="handleQuery" />
  8. </el-form-item>
  9. <el-form-item label="会议时间" prop="meetingStartTimes">
  10. <!-- <el-date-picker clearable v-model="queryParams.meetingStartTime" type="datetime" key="one" value-format="yyyy-MM-dd HH:mm:ss"
  11. placeholder="选择开始时间" style="width: 100%;" /> -->
  12. <el-date-picker v-model="queryParams.meetingStartTimes" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
  13. type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
  14. :default-time="['00:00:00', '23:59:59']" />
  15. </el-form-item>
  16. <!-- <el-form-item label="结束时间" prop="meetingEndTime"> -->
  17. <!-- <el-date-picker clearable v-model="queryParams.meetingEndTime" type="datetime" key="two" value-format="yyyy-MM-dd HH:mm:ss"
  18. placeholder="选择结束时间" style="width: 100%;" /> -->
  19. <!-- <el-date-picker v-model="queryParams.meetingEndTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
  20. type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
  21. :default-time="['00:00:00', '23:59:59']" /> -->
  22. <!-- </el-form-item> -->
  23. <!-- <el-form-item label="会议主题" prop="meetingSubject">
  24. <el-input v-model="queryParams.meetingSubject" placeholder="请输入会议主题" clearable
  25. @keyup.enter.native="handleQuery" />
  26. </el-form-item> -->
  27. <el-form-item label="会议类型" prop="meetingType">
  28. <el-select v-model="queryParams.meetingType" placeholder="请选择会议类型" clearable size="small">
  29. <el-option v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_CONFIG_TYPE)" :key="dict.value"
  30. :label="dict.label" :value="dict.value" />
  31. </el-select>
  32. </el-form-item>
  33. <!-- <el-form-item label="状态" prop="status">
  34. <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
  35. <el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)" :key="dict.value" :label="dict.label"
  36. :value="dict.value" />
  37. </el-select>
  38. </el-form-item> -->
  39. <el-form-item>
  40. <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
  41. <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
  42. </el-form-item>
  43. </el-form>
  44. <!-- 操作工具栏 -->
  45. <el-row :gutter="10" class="mb8">
  46. <el-col :span="1.5">
  47. <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
  48. v-hasPermi="['backend:meeting:create']">新增</el-button>
  49. </el-col>
  50. <el-col :span="1.5">
  51. <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
  52. :loading="exportLoading" v-hasPermi="['backend:meeting:export']">导出</el-button>
  53. </el-col>
  54. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  55. </el-row>
  56. </div>
  57. <!-- 列表 -->
  58. <el-table v-loading="loading" :data="list" :height="list.length ? tableHeight : 'auto'">
  59. <el-table-column label="ID" align="center" prop="id" />
  60. <el-table-column label="会议名称" align="center" prop="meetingName" />
  61. <el-table-column label="开始时间" align="center" prop="meetingStartTime" width="180">
  62. <template v-slot="scope">
  63. <span>{{ scope.row.meetingStartTime }}</span>
  64. </template>
  65. </el-table-column>
  66. <el-table-column label="结束时间" align="center" prop="meetingEndTime" width="180">
  67. <template v-slot="scope">
  68. <span>{{ scope.row.meetingEndTime }}</span>
  69. </template>
  70. </el-table-column>
  71. <el-table-column label="会议主题" align="center" prop="meetingSubject" />
  72. <el-table-column label="会议类型" align="center" prop="meetingType">
  73. <template v-slot="scope">
  74. <dict-tag :type="DICT_TYPE.INFRA_CONFIG_TYPE" :value="scope.row.meetingType" />
  75. </template>
  76. </el-table-column>
  77. <!-- <el-table-column label="状态" align="center" prop="status">
  78. <template v-slot="scope">
  79. <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
  80. </template>
  81. </el-table-column> -->
  82. <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
  83. <template v-slot="scope">
  84. <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
  85. v-hasPermi="['backend:meeting:update']">修改</el-button>
  86. <!-- <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
  87. v-hasPermi="['backend:meeting:delete']">删除</el-button> -->
  88. <el-dropdown @command="(command) => handleCommand(command, scope.$index, scope.row)">
  89. <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
  90. <el-dropdown-menu slot="dropdown">
  91. <el-dropdown-item command="handleDelete" size="mini" type="text" icon="el-icon-delete"
  92. v-hasPermi="['backend:meeting:delete']">删除</el-dropdown-item>
  93. <el-dropdown-item command="handleSelectedOrg" size="mini" type="text"
  94. icon="el-icon-circle-check">已分配单位列表</el-dropdown-item>
  95. <el-dropdown-item command="handleOrg" size="mini" type="text"
  96. icon="el-icon-circle-check">分配单位</el-dropdown-item>
  97. <el-dropdown-item command="handPublish" size="mini" type="text"
  98. icon="el-icon-circle-check">发布</el-dropdown-item>
  99. </el-dropdown-menu>
  100. </el-dropdown>
  101. <el-button size="mini" type="text" icon="el-icon-d-arrow-right" @click="lookMes(scope.row)">查看详情</el-button>
  102. </template>
  103. </el-table-column>
  104. </el-table>
  105. <!-- 分页组件 -->
  106. <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
  107. @pagination="getList" />
  108. <!-- 对话框(添加 / 修改) -->
  109. <el-dialog :title="title" :visible.sync="open" width="800px" v-dialogDrag append-to-body>
  110. <el-form ref="form" :model="form" :rules="rules" label-width="100px">
  111. <el-form-item label="会议名称" prop="meetingName">
  112. <el-input v-model="form.meetingName" placeholder="请输入会议名称" />
  113. </el-form-item>
  114. <el-form-item label="会议编号" prop="meetingCode">
  115. <el-input v-model="form.meetingCode" placeholder="请输入会议编号" />
  116. </el-form-item>
  117. <el-form-item label="会议时间" prop="meetingStartTimes">
  118. <el-date-picker v-model="form.meetingStartTimes" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
  119. type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
  120. :default-time="['00:00:00', '23:59:59']" />
  121. </el-form-item>
  122. <!-- <el-form-item label="结束时间" prop="meetingEndTime">-->
  123. <!-- <el-date-picker clearable v-model="form.meetingEndTime" type="datetime" value-format="timestamp"-->
  124. <!-- placeholder="选择结束时间" style="width: 100%;" />-->
  125. <!-- </el-form-item>-->
  126. <el-form-item label="会议主题" prop="meetingSubject">
  127. <el-input v-model="form.meetingSubject" placeholder="请输入会议主题" />
  128. </el-form-item>
  129. <el-form-item label="会议类型" prop="meetingType">
  130. <el-select v-model="form.meetingType" placeholder="请选择会议类型" style="width: 100%;">
  131. <el-option v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_CONFIG_TYPE)" :key="dict.value"
  132. :label="dict.label" :value="dict.value" />
  133. </el-select>
  134. </el-form-item>
  135. <!-- <el-form-item label="状态" prop="status">
  136. <el-radio-group v-model="form.status" style="width: 100%;">
  137. <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)" :key="dict.value"
  138. :label="parseInt(dict.value)">{{ dict.label }}</el-radio>
  139. </el-radio-group>
  140. </el-form-item> -->
  141. <!-- <el-form-item label="单位类别">
  142. <el-select v-model="form.orgType" multiple placeholder="请选择单位类别">
  143. <el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMPANY_inspectitem_kind)" :key="dict.value"
  144. :label="dict.label" :value="dict.value" />
  145. </el-select>
  146. </el-form-item> -->
  147. <!-- <el-form-item label="单位">
  148. <el-input clear @focus="handleFocus" @clear="handleClear" placeholder="请选择单位" v-model="orgList" clearable>
  149. <template slot="append">
  150. <i title="选择" @click="handleChoice" style="cursor:pointer;" class="el-icon-plus"></i>
  151. </template>
  152. </el-input>
  153. </el-form-item> -->
  154. </el-form>
  155. <div slot="footer" class="dialog-footer">
  156. <el-button type="primary" @click="submitForm">确 定</el-button>
  157. <el-button @click="cancel">取 消</el-button>
  158. </div>
  159. </el-dialog>
  160. <!-- 分配分管单位 -->
  161. <el-dialog title="分配分管单位" :visible.sync="openOrg" width="85vw" append-to-body v-if="openOrg">
  162. <choiceSelect ref="choiceSelect" :userId="form.id" :type="'meeting'"></choiceSelect>
  163. <div slot="footer" class="dialog-footer">
  164. <el-button type="primary" @click="submitOrg">确 定</el-button>
  165. <el-button @click="cancelOrg">取 消</el-button>
  166. </div>
  167. </el-dialog>
  168. <!-- 已选择分管单位 -->
  169. <el-dialog title="已选择分管单位" :visible.sync="openSelectedOrg" width="85vw" append-to-body v-if="openSelectedOrg">
  170. <handleSelectedOrg ref="choiceSelect" :userId="form.id" :type="'meeting'"></handleSelectedOrg>
  171. <div slot="footer" class="dialog-footer">
  172. <el-button type="primary" @click="openSelectedOrg = false">关 闭</el-button>
  173. </div>
  174. </el-dialog>
  175. <!-- 查看会议人员 -->
  176. <el-dialog title="提示" :visible.sync="meetPeopleModal" width="30%">
  177. <el-table :data="meetPeople" style="width: 100%">
  178. <el-table-column prop="ppName" label="姓名" width="180">
  179. </el-table-column>
  180. <el-table-column prop="ppTel" label="电话号">
  181. </el-table-column>
  182. <el-table-column prop="ppTel" label="电话号">
  183. <template scope="scope">
  184. <span>{{ dutyComputed || scope.row.ppDuty }}</span>
  185. </template>
  186. </el-table-column>
  187. </el-table>
  188. <span slot="footer" class="dialog-footer">
  189. <el-button @click="meetPeopleModal = false">取 消</el-button>
  190. <el-button type="primary" @click="meetPeopleModal = false">确 定</el-button>
  191. </span>
  192. </el-dialog>
  193. </div>
  194. </template>
  195. <script>
  196. import { createMeeting, updateMeeting, deleteMeeting, getMeeting, getMeetingPage, exportMeetingExcel, getmeetingorg, broadMeeting, setupMeetingOrg, getMeetPeople } from "@/api/backend/meeting"
  197. import choiceSelect from '@/components/choiceSelect';
  198. import handleSelectedOrg from '@/components/handleSelectedOrg';
  199. import { getTableHeight } from "@/utils/ruoyi.js";
  200. export default {
  201. name: "Meeting",
  202. components: {
  203. choiceSelect, handleSelectedOrg
  204. },
  205. data() {
  206. return {
  207. // 遮罩层
  208. loading: true,
  209. // 导出遮罩层
  210. exportLoading: false,
  211. // 显示搜索条件
  212. showSearch: true,
  213. // 总条数
  214. total: 0,
  215. // 会议信息列表
  216. list: [],
  217. // 弹出层标题
  218. title: "",
  219. // 是否显示弹出层
  220. open: false,
  221. // 查询参数
  222. queryParams: {
  223. pageNo: 1,
  224. pageSize: 10,
  225. meetingName: null,
  226. // meetingStartTime: [],
  227. // meetingEndTime: [],
  228. meetingStartTime: '',
  229. meetingEndTime: '',
  230. meetingStartTimes: [],
  231. meetingSubject: null,
  232. meetingType: null,
  233. status: null,
  234. },
  235. // 表单参数
  236. form: {
  237. meetingStartTimes: [],
  238. meetingStartTime: '',
  239. meetingEndTime: '',
  240. status: 0
  241. },
  242. // 表单校验
  243. rules: {
  244. meetingName: [{ required: true, message: "会议名称不能为空", trigger: "blur" }],
  245. meetingStartTimes: [{ required: true, message: "开始时间不能为空", trigger: "blur" }],
  246. status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
  247. },
  248. // =======单位信息==========================
  249. // 是否显示弹出层(分管单位)
  250. openOrg: false,
  251. // 最终选择的单位信息列表
  252. alreadySelectedOrgList: [],
  253. orgList: '',
  254. tableHeight: "",
  255. // 已选择单位
  256. openSelectedOrg: false,
  257. meetPeople: [],//会议所属人员
  258. meetPeopleModal: false
  259. }
  260. },
  261. mounted() {
  262. //挂载window.onresize事件(动态设置table高度)
  263. window.addEventListener('resize', () => {
  264. this.$nextTick(() => {
  265. if (this.$refs['sousuH']) {
  266. this.tableHeight = getTableHeight(this.$refs['sousuH'].clientHeight + 200)
  267. }
  268. })
  269. })
  270. },
  271. created() {
  272. this.getList()
  273. this.$nextTick(() => {
  274. this.tableHeight = getTableHeight(this.$refs['sousuH'].clientHeight + 200)
  275. })
  276. },
  277. methods: {
  278. // 更多操作
  279. handleCommand(command, index, row) {
  280. const id = row.id
  281. getMeeting(id).then(response => {
  282. this.form = response.data
  283. })
  284. switch (command) {
  285. case 'handleUpdate':
  286. this.handleUpdate(row);//修改客户信息
  287. break;
  288. case 'handleDelete':
  289. this.handleDelete(row);//红号变更
  290. break;
  291. case 'handleOrg':
  292. this.handleOrg(row);
  293. break;
  294. case 'handleSelectedOrg':
  295. this.handleSelectedOrg(row);
  296. break;
  297. case 'handPublish':
  298. this.handPublish(row);
  299. break;
  300. default:
  301. break;
  302. }
  303. },
  304. /** 查询列表 */
  305. getList() {
  306. this.loading = true
  307. // 执行查询
  308. getMeetingPage(this.queryParams).then(response => {
  309. this.list = response.data.list
  310. this.total = response.data.total
  311. this.loading = false
  312. })
  313. },
  314. /** 取消按钮 */
  315. cancel() {
  316. this.open = false
  317. this.reset()
  318. },
  319. /** 表单重置 */
  320. reset() {
  321. this.form = {
  322. id: undefined,
  323. meetingName: undefined,
  324. meetingCode: undefined,
  325. meetingStartTime: undefined,
  326. meetingEndTime: undefined,
  327. meetingSubject: undefined,
  328. meetingType: undefined,
  329. status: 0,
  330. // orgType: undefined,
  331. orgIds: [],
  332. }
  333. this.resetForm("form")
  334. this.orgList = ''
  335. },
  336. /** 搜索按钮操作 */
  337. handleQuery() {
  338. this.queryParams.meetingStartTime = this.queryParams.meetingStartTimes[0]
  339. this.queryParams.meetingEndTime = this.queryParams.meetingStartTimes[1]
  340. this.queryParams.pageNo = 1
  341. this.getList()
  342. },
  343. /** 重置按钮操作 */
  344. resetQuery() {
  345. this.resetForm("queryForm")
  346. this.handleQuery()
  347. },
  348. /** 新增按钮操作 */
  349. handleAdd() {
  350. this.reset()
  351. this.open = true
  352. this.title = "添加会议信息"
  353. },
  354. /** 修改按钮操作 */
  355. handleUpdate(row) {
  356. this.reset()
  357. const id = row.id
  358. getMeeting({ id: id, pageNo: 1, pageSize: 10 }).then(response => {
  359. this.form = response.data
  360. const arr = []
  361. arr.push(this.form.meetingStartTime, this.form.meetingEndTime)
  362. //this.form.meetingStartTimes=[...arr]
  363. this.$set(this.form, 'meetingStartTimes', arr)
  364. console.log(this.form.meetingStartTimes, 'this.form.meetingStartTimes arr arr');
  365. this.open = true
  366. this.title = "修改会议信息"
  367. })
  368. },
  369. /** 提交按钮 */
  370. submitForm() {
  371. this.$refs["form"].validate((valid) => {
  372. if (!valid) {
  373. return
  374. }
  375. this.form.meetingStartTime = this.form.meetingStartTimes[0]
  376. this.form.meetingEndTime = this.form.meetingStartTimes[1]
  377. // 修改的提交
  378. if (this.form.id !== undefined) {
  379. updateMeeting(this.form).then((response) => {
  380. this.$modal.msgSuccess("修改成功")
  381. this.open = false
  382. this.getList()
  383. })
  384. return
  385. }
  386. // 添加的提交
  387. createMeeting(this.form).then((response) => {
  388. this.$modal.msgSuccess("新增成功")
  389. this.open = false
  390. this.getList()
  391. })
  392. })
  393. },
  394. /** 删除按钮操作 */
  395. handleDelete(row) {
  396. const id = row.id
  397. this.$modal
  398. .confirm('是否确认删除会议名称为"' + row.meetingName + '"的数据项?')
  399. .then(function () {
  400. return deleteMeeting(id)
  401. })
  402. .then(() => {
  403. this.getList()
  404. this.$modal.msgSuccess("删除成功")
  405. })
  406. .catch(() => { })
  407. },
  408. /** 导出按钮操作 */
  409. handleExport() {
  410. // 处理查询参数
  411. let params = { ...this.queryParams }
  412. params.pageNo = undefined
  413. params.pageSize = undefined
  414. // 执行导出
  415. this.$modal
  416. .confirm("是否确认导出?")
  417. .then(() => {
  418. this.exportLoading = true
  419. return exportMeetingExcel(params)
  420. })
  421. .then((response) => {
  422. this.$download.excel(response, "会议信息.xls")
  423. this.exportLoading = false
  424. })
  425. .catch(() => { })
  426. },
  427. /**
  428. * 选单位
  429. */
  430. // ========获取已选单位信息=============================================================
  431. // -========================================================
  432. // =========表单添加时选单位=================================================
  433. handleClear() {
  434. this.form.orgIds = [];
  435. },
  436. handleFocus() {
  437. this.handleChoice();
  438. },
  439. handleChoice() {
  440. // 打开弹窗
  441. this.openOrg = true;
  442. },
  443. // ============操作区修改单位=====================================================
  444. // 单位信息表单重置
  445. Orgreset() {
  446. this.alreadySelectedOrgList = []
  447. },
  448. // 打开单位信息v弹窗
  449. handleOrg(row) {
  450. this.Orgreset()
  451. if (row.id) {
  452. this.form.id = row.id
  453. }
  454. // 打开弹窗
  455. this.openOrg = true;
  456. },
  457. // /============单位弹窗功能====================================================
  458. /** 单位信息确认按钮 */
  459. submitOrg() {
  460. this.alreadySelectedOrgList = this.$refs["choiceSelect"].confirmMSg()
  461. // this.orgType = this.$refs["choiceSelect"].confirmoOrgTypeMSg()
  462. console.log('this.$refs["choiceSelect"] :>> ', this.alreadySelectedOrgList);
  463. // 关闭弹窗
  464. this.openOrg = false;
  465. this.submitFormOrg(this.$refs["choiceSelect"].confirmMSg(), this.$refs["choiceSelect"].confirmoOrgTypeMSg())
  466. },
  467. // =======取消按钮=与=信息保存=========================================================
  468. // 取消按钮(分管单位)
  469. // 取消按钮(分管单位)
  470. cancelOrg() {
  471. this.openOrg = false;
  472. },
  473. // ========用于form表单已存在alreadySelectedOrgList单位信息时保存============================
  474. submitFormOrg(alreadySelectedOrgList, orgType) {
  475. var orgIds = []
  476. alreadySelectedOrgList.map(i => {
  477. orgIds.push(i.dwid)
  478. })
  479. this.form.orgType = orgType
  480. this.form.orgIds = orgIds
  481. // this.form.taskId = this.form.id
  482. console.log('this.form :>> ', this.form);
  483. // =====================
  484. setupMeetingOrg(this.form).then(response => {
  485. // this.$modal.msgSuccess("分配角色成功");
  486. });
  487. },
  488. // ===============已分配单位列表========================
  489. handleSelectedOrg(row) {
  490. if (row.id) {
  491. this.form.id = row.id
  492. }
  493. // 打开弹窗
  494. this.openSelectedOrg = true;
  495. },
  496. // -==========发布======================
  497. handPublish(row) {
  498. if (row.id) {
  499. broadMeeting({ mid: row.id }).then(response => {
  500. // this.$modal.msgSuccess("分配角色成功");
  501. this.getList()
  502. });
  503. }
  504. },
  505. lookMes(row) {
  506. // console.log(row,'5');s
  507. getMeetPeople({
  508. meetingId: row.id,
  509. pageNo: 1,
  510. pageSize: 10
  511. }).then(res => {
  512. console.log(res, 'resddd');
  513. this.meetPeople = res.data.list
  514. this.meetPeopleModal = true
  515. })
  516. }
  517. },
  518. computed: {
  519. dutyComputed(id) {
  520. if (id === '1') {
  521. return '值班人员'
  522. } else if (id === '2') {
  523. return '负责人'
  524. } else {
  525. return '普通人员'
  526. }
  527. }
  528. }
  529. }
  530. </script>