Newer
Older
urbanLifeline_YanAn / src / views / RongyunCommunication / UnitClass.vue
@zhangqy zhangqy on 3 Oct 11 KB first commit
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
  4. <el-form-item label="群组id" prop="groupId" v-show="false">
  5. <el-input v-model="queryParams.groupId" placeholder="请输入群组id" clearable @keyup.enter="handleQuery" />
  6. </el-form-item>
  7. <el-form-item label="群组名称" prop="groupName">
  8. <el-input v-model="queryParams.groupName" placeholder="请输入群组名称" clearable @keyup.enter="handleQuery" />
  9. </el-form-item>
  10. <el-form-item>
  11. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  12. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  13. <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['rcloud:rcloudUnitClass:add']"
  14. >新增</el-button
  15. >
  16. </el-form-item>
  17. </el-form>
  18.  
  19. <!-- <el-row :gutter="10" class="mb8">
  20. <el-col :span="1.5">
  21. <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['rcloud:rcloudUnitClass:add']"
  22. >新增</el-button
  23. >
  24. </el-col>
  25. <el-col :span="1.5">
  26. <el-button
  27. type="success"
  28. plain
  29. icon="Edit"
  30. :disabled="single"
  31. @click="handleUpdate"
  32. v-hasPermi="['rcloud:rcloudUnitClass:edit']"
  33. >修改</el-button
  34. >
  35. </el-col>
  36. <el-col :span="1.5">
  37. <el-button
  38. type="danger"
  39. plain
  40. icon="Delete"
  41. :disabled="multiple"
  42. @click="handleDelete"
  43. v-hasPermi="['rcloud:rcloudUnitClass:remove']"
  44. >删除</el-button
  45. >
  46. </el-col>
  47. <el-col :span="1.5">
  48. <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['rcloud:rcloudUnitClass:export']"
  49. >导出</el-button
  50. >
  51. </el-col>
  52. <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
  53. </el-row> -->
  54.  
  55. <el-table v-loading="loading" :data="rcloudUnitClassList" @selection-change="handleSelectionChange" height="70vh">
  56. <el-table-column type="index" label="序号" width="55" align="center" />
  57. <el-table-column label="群组名称" align="center" prop="groupName" />
  58. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  59. <template #default="scope">
  60. <el-button link type="warning" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['rcloud:rcloudUnitClass:edit']"
  61. >修改</el-button
  62. >
  63. <el-button
  64. link
  65. type="danger"
  66. icon="Delete"
  67. @click="handleDelete(scope.row)"
  68. v-hasPermi="['rcloud:rcloudUnitClass:remove']"
  69. >删除</el-button
  70. >
  71. <el-button
  72. link
  73. type="primary"
  74. icon="Edit"
  75. @click="handleAddPerson(scope.row)"
  76. v-hasPermi="['rcloud:rcloudUnitClass:remove']"
  77. >人员配置</el-button
  78. >
  79. <!-- <el-button link type="primary" icon="View" @click="handleDetail(scope.row)" v-hasPermi="['rcloud:rcloudUnitClass:view']"
  80. >详情</el-button
  81. > -->
  82. </template>
  83. </el-table-column>
  84. </el-table>
  85.  
  86. <pagination
  87. v-show="total > 0"
  88. :total="total"
  89. v-model:page="queryParams.pageNum"
  90. v-model:limit="queryParams.pageSize"
  91. @pagination="getList"
  92. />
  93.  
  94. <!-- 添加或修改融合通讯群组对话框 -->
  95. <el-dialog :title="title" v-model="open" width="500px" append-to-body>
  96. <el-form ref="rcloudUnitClassRef" :model="form" :rules="rules" label-width="80px">
  97. <el-form-item label="群组名称" prop="groupName">
  98. <el-input v-model="form.groupName" placeholder="请输入群组名称" />
  99. </el-form-item>
  100. </el-form>
  101. <template #footer>
  102. <div class="dialog-footer">
  103. <el-button type="primary" @click="submitForm">确 定</el-button>
  104. <el-button @click="cancel">取 消</el-button>
  105. </div>
  106. </template>
  107. </el-dialog>
  108.  
  109. <!-- 融合通讯群组详情 -->
  110. <el-dialog title="融合通讯群组详情" v-model="detailOpen" width="800px" append-to-body class="dialog-detail-box">
  111. <div class="dialog-form-detail flex flex-r flex-wrap">
  112. <div class="flex flex-r">
  113. <div class="detail-label flex flex-align-center">群组id</div>
  114. <div class="detail-value flex flex-align-center">
  115. {{ dialogFormDetail.groupId }}
  116. </div>
  117. </div>
  118. <div class="flex flex-r">
  119. <div class="detail-label flex flex-align-center">群组名称</div>
  120. <div class="detail-value flex flex-align-center">
  121. {{ dialogFormDetail.groupName }}
  122. </div>
  123. </div>
  124. <div class="flex flex-r">
  125. <div class="detail-label flex flex-align-center">备注</div>
  126. <div class="detail-value flex flex-align-center">
  127. {{ dialogFormDetail.remark }}
  128. </div>
  129. </div>
  130. <div class="flex flex-r">
  131. <div class="detail-label flex flex-align-center">状态</div>
  132. <div class="detail-value flex flex-align-center">
  133. {{ dialogFormDetail.status }}
  134. </div>
  135. </div>
  136. </div>
  137. <template #footer>
  138. <div class="dialog-footer">
  139. <el-button @click="cancel">关 闭</el-button>
  140. </div>
  141. </template>
  142. </el-dialog>
  143.  
  144. <!-- 添加配置人员弹窗 -->
  145. <el-dialog :title="getrow.groupName + ' 人员配置'" v-model="addConfigPerson.open" width="700px" append-to-body>
  146. <!-- <el-input v-model="addConfigPerson.queryParams.name" placeholder="搜索" clearable @keyup.enter="handleUserQuery" /> -->
  147. <el-transfer
  148. v-model="addConfigPerson.id"
  149. filterable
  150. :titles="['所有人员', '已选人员']"
  151. :filter-method="filterMethod"
  152. filter-placeholder="搜索人员"
  153. :data="addConfigPerson.data"
  154. :props="{
  155. key: 'id',
  156. label: 'name',
  157. }"
  158. style="margin-top: 20px"
  159. />
  160. <template #footer>
  161. <div class="dialog-footer">
  162. <el-button type="primary" @click="submitAddConfigPerson">保 存</el-button>
  163. <el-button @click="addConfigPerson.open = false">取 消</el-button>
  164. </div>
  165. </template>
  166. </el-dialog>
  167. </div>
  168. </template>
  169.  
  170. <script setup name="RcloudUnitClass">
  171. import {
  172. pagercloudUnitClass,
  173. getrcloudUnitClass,
  174. delrcloudUnitClass,
  175. addrcloudUnitClass,
  176. updatercloudUnitClass,
  177. queryGroupAndUserList,
  178. configGroupUser,
  179. } from '@/views/RongyunCommunication/rongyunjs/rcloudUnitClass';
  180.  
  181. import { listrcloudUnitUser } from '@/views/RongyunCommunication/rongyunjs/rcloudUnitUser';
  182.  
  183. const { proxy } = getCurrentInstance();
  184.  
  185. const rcloudUnitClassList = ref([]);
  186. const open = ref(false);
  187. const loading = ref(true);
  188. const showSearch = ref(true);
  189. const ids = ref([]);
  190. const single = ref(true);
  191. const multiple = ref(true);
  192. const total = ref(0);
  193. const title = ref('');
  194. const detailOpen = ref(false);
  195.  
  196. const data = reactive({
  197. form: {},
  198. queryParams: {
  199. pageNum: 1,
  200. pageSize: 10,
  201. groupId: null,
  202. groupName: null,
  203. status: null,
  204. },
  205. rules: {
  206. groupName: [{ required: true, message: '群组名称不能为空', trigger: 'blur' }],
  207. },
  208. dialogFormDetail: {}, //详情弹框数据
  209. });
  210.  
  211. const addConfigPerson = ref({
  212. open: false,
  213. value: [],
  214. data: [],
  215. queryParams: {},
  216. });
  217.  
  218. const getrow = ref({});
  219.  
  220. const { queryParams, form, rules, dialogFormDetail } = toRefs(data);
  221.  
  222. /** 查询融合通讯群组列表 */
  223. function getList() {
  224. loading.value = true;
  225. pagercloudUnitClass(queryParams.value).then(response => {
  226. rcloudUnitClassList.value = response.data;
  227. total.value = response.total;
  228. loading.value = false;
  229. });
  230. }
  231.  
  232. function filterMethod(query, item) {
  233. let string = item.userName + item.name;
  234. return string.indexOf(query) > -1;
  235. }
  236.  
  237. function handleAddPerson(row) {
  238. addConfigPerson.value.open = true;
  239. getrow.value = row;
  240. Getrowpeople(row);
  241. }
  242.  
  243. //获取所有人员
  244. function getListUser() {
  245. listUser(addConfigPerson.value.queryParams).then(res => {
  246. addConfigPerson.value.data = res.data;
  247. });
  248. }
  249. //搜索人员
  250. function handleUserQuery() {
  251. getListUser();
  252. }
  253.  
  254. //保存添加配置人员
  255. function submitAddConfigPerson() {
  256. let { id } = { ...addConfigPerson.value };
  257. // let patrolUserList = [];
  258. //根据选中的id过滤获取对应的数据
  259. // id.forEach(val => {
  260. // addConfigPerson.value.data.forEach(item => {
  261. // if (val == item.id) {
  262. // item.sectionId = '';
  263. // item.phoneNumber = item.phonenumber;
  264. // patrolUserList.push(item);
  265. // }
  266. // });
  267. // });
  268. console.log(id);
  269. let data = {
  270. groupId: getrow.value.groupId,
  271. userIds: id ? id.join(',') : '',
  272. createBy: localStorage.getItem('userNo'),
  273. };
  274.  
  275. console.log(data);
  276.  
  277. configGroupUser(data).then(res => {
  278. proxy.$modal.msgSuccess('保存成功');
  279.  
  280. // addConfigPerson.value.open = false;
  281. });
  282. }
  283.  
  284. // 取消按钮
  285. function cancel() {
  286. open.value = false;
  287. reset();
  288. }
  289.  
  290. // 表单重置
  291. function reset() {
  292. form.value = {
  293. id: null,
  294. groupId: null,
  295. groupName: null,
  296. remark: null,
  297. status: null,
  298. delFlag: null,
  299. createBy: null,
  300. createTime: null,
  301. updateBy: null,
  302. updateTime: null,
  303. };
  304. proxy.resetForm('rcloudUnitClassRef');
  305. }
  306.  
  307. /** 搜索按钮操作 */
  308. function handleQuery() {
  309. queryParams.value.pageNum = 1;
  310. getList();
  311. }
  312.  
  313. // 查询群组包含用户
  314. function Getrowpeople(row) {
  315. let groupId = row.groupId;
  316. addConfigPerson.value.id = [];
  317. queryGroupAndUserList({ groupId }).then(res => {
  318. console.log(res);
  319. res.data[0].userList.forEach(item => {
  320. addConfigPerson.value.id.push(item.id);
  321. });
  322. });
  323. }
  324.  
  325. //获取所有人列表
  326. function Getpeople(row) {
  327. listrcloudUnitUser().then(res => {
  328. addConfigPerson.value.data = res.data;
  329. });
  330. }
  331.  
  332. /** 重置按钮操作 */
  333. function resetQuery() {
  334. proxy.resetForm('queryRef');
  335. handleQuery();
  336. }
  337.  
  338. // 多选框选中数据
  339. function handleSelectionChange(selection) {
  340. ids.value = selection.map(item => item.id);
  341. single.value = selection.length != 1;
  342. multiple.value = !selection.length;
  343. }
  344.  
  345. /** 新增按钮操作 */
  346. function handleAdd() {
  347. reset();
  348. open.value = true;
  349. title.value = '添加融合通讯群组';
  350. }
  351.  
  352. /** 修改按钮操作 */
  353. function handleUpdate(row) {
  354. reset();
  355. const _id = row.id || ids.value;
  356. getrcloudUnitClass(_id).then(response => {
  357. form.value = response.data;
  358. open.value = true;
  359. title.value = '修改融合通讯群组';
  360. });
  361. }
  362.  
  363. /** 提交按钮 */
  364. function submitForm() {
  365. proxy.$refs['rcloudUnitClassRef'].validate(valid => {
  366. if (valid) {
  367. form.value.createBy = localStorage.getItem('userNo');
  368. form.value.groupId = new Date().getTime();
  369.  
  370. if (form.value.id != null) {
  371. updatercloudUnitClass(form.value).then(response => {
  372. proxy.$modal.msgSuccess('修改成功');
  373. open.value = false;
  374. getList();
  375. });
  376. } else {
  377. addrcloudUnitClass(form.value).then(response => {
  378. proxy.$modal.msgSuccess('新增成功');
  379. open.value = false;
  380. getList();
  381. });
  382. }
  383. }
  384. });
  385. }
  386.  
  387. /** 删除按钮操作 */
  388. function handleDelete(row) {
  389. const _ids = row.id || ids.value;
  390. proxy.$modal
  391. .confirm('是否确认删除融合通讯群组"' + row.groupName + '"的数据项?')
  392. .then(function () {
  393. return delrcloudUnitClass(_ids);
  394. })
  395. .then(() => {
  396. getList();
  397. proxy.$modal.msgSuccess('删除成功');
  398. })
  399. .catch(() => {});
  400. }
  401.  
  402. /** 导出按钮操作 */
  403. function handleExport() {
  404. proxy.download(
  405. 'rcloud/rcloudUnitClass/export',
  406. {
  407. ...queryParams.value,
  408. },
  409. `rcloudUnitClass_${new Date().getTime()}.xlsx`
  410. );
  411. }
  412. //查看详情操作
  413. function handleDetail(row) {
  414. detailOpen.value = true;
  415. dialogFormDetail.value = row;
  416. }
  417.  
  418. getList();
  419. Getpeople();
  420. </script>