Newer
Older
DH_Apicture / src / views / RongyunCommunication / rcloudUnitUser.vue
@zhangqy zhangqy on 29 Nov 10 KB first commit
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="88px">
  4. <el-form-item label="包含平台" prop="includingPlatform">
  5. <!-- <el-input v-model="queryParams.includingPlatform" placeholder="请输入包含平台" clearable @keyup.enter="handleQuery" /> -->
  6.  
  7. <el-select
  8. v-model="queryParams.includingPlatform"
  9. clearable
  10. multipleg
  11. style="width: 100%"
  12. placeholder="请选择包含平台"
  13. @change="handleQuery"
  14. >
  15. <el-option v-for="item in platformOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
  16. </el-select>
  17. </el-form-item>
  18. <el-form-item label="用户手机号" prop="phone">
  19. <el-input v-model="queryParams.phone" placeholder="请输入用户手机号" clearable @keyup.enter="handleQuery" />
  20. </el-form-item>
  21. <el-form-item label="用户名称" prop="name">
  22. <el-input v-model="queryParams.name" placeholder="请输入用户名称" clearable @keyup.enter="handleQuery" />
  23. </el-form-item>
  24. <el-form-item>
  25. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  26. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  27. <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['rcloud:rcloudUnitUser:add']">新增</el-button>
  28. </el-form-item>
  29. </el-form>
  30.  
  31. <el-table v-loading="loading" :data="rcloudUnitUserList" @selection-change="handleSelectionChange" height="70vh">
  32. <el-table-column type="index" width="55" label="序号" align="center" />
  33. <el-table-column label="包含平台" align="center" prop="includingPlatform" />
  34. <el-table-column label="用户手机号" align="center" prop="phone" />
  35. <el-table-column label="用户名称" align="center" prop="name" />
  36. <!-- <el-table-column label="启用状态" align="center" prop="isPostRy">
  37. <template #default="scope">
  38. <div>
  39. {{ scope.row.isPostRy == 1 ? '是' : '否' }}
  40. </div>
  41. </template>
  42. </el-table-column> -->
  43. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  44. <template #default="scope">
  45. <el-button link type="warning" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['rcloud:rcloudUnitUser:edit']"
  46. >修改</el-button
  47. >
  48. <el-button
  49. link
  50. type="danger"
  51. icon="Delete"
  52. @click="handleDelete(scope.row)"
  53. v-hasPermi="['rcloud:rcloudUnitUser:remove']"
  54. >删除</el-button
  55. >
  56. </template>
  57. </el-table-column>
  58. </el-table>
  59.  
  60. <pagination
  61. v-show="total > 0"
  62. :total="total"
  63. v-model:page="queryParams.pageNum"
  64. v-model:limit="queryParams.pageSize"
  65. @pagination="getList"
  66. />
  67.  
  68. <!-- 添加或修改融合通讯用户对话框 -->
  69. <el-dialog :title="title" v-model="open" width="500px" append-to-body>
  70. <el-form ref="rcloudUnitUserRef" :model="form" :rules="rules" label-width="120px">
  71. <el-form-item label="包含平台" prop="includingPlatform">
  72. <el-select multiple v-model="form.includingPlatform" clearable style="width: 100%" placeholder="请选择包含平台">
  73. <el-option v-for="item in platformOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
  74. </el-select>
  75. </el-form-item>
  76. <el-form-item label="用户名称" prop="name">
  77. <el-input v-model="form.name" placeholder="请输入用户名称" />
  78. </el-form-item>
  79. <el-form-item label="用户手机号" prop="phone">
  80. <el-input v-model="form.phone" placeholder="请输入用户手机号" />
  81. </el-form-item>
  82. <!-- <el-form-item label="用户头像url" prop="portraitUrl">
  83. <el-input v-model="form.portraitUrl" placeholder="请输入用户头像url" />
  84. </el-form-item> -->
  85. <!-- <el-form-item label="启用状态" prop="isPostRy">
  86. <el-select v-model="form.isPostRy" clearable style="width: 100%" placeholder="请选择是否">
  87. <el-option v-for="item in dataScopeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
  88. </el-select>
  89. </el-form-item> -->
  90. </el-form>
  91. <template #footer>
  92. <div class="dialog-footer">
  93. <el-button type="primary" @click="submitForm">确 定</el-button>
  94. <el-button @click="cancel">取 消</el-button>
  95. </div>
  96. </template>
  97. </el-dialog>
  98.  
  99. <!-- 融合通讯用户详情 -->
  100. <el-dialog title="融合通讯用户详情" v-model="detailOpen" width="800px" append-to-body class="dialog-detail-box">
  101. <div class="dialog-form-detail flex flex-r flex-wrap">
  102. <div class="flex flex-r">
  103. <div class="detail-label flex flex-align-center">包含平台</div>
  104. <div class="detail-value flex flex-align-center">
  105. {{ dialogFormDetail.includingPlatform }}
  106. </div>
  107. </div>
  108. <div class="flex flex-r">
  109. <div class="detail-label flex flex-align-center">用户手机号</div>
  110. <div class="detail-value flex flex-align-center">
  111. {{ dialogFormDetail.phone }}
  112. </div>
  113. </div>
  114. <div class="flex flex-r">
  115. <div class="detail-label flex flex-align-center">用户名称</div>
  116. <div class="detail-value flex flex-align-center">
  117. {{ dialogFormDetail.name }}
  118. </div>
  119. </div>
  120. <!-- <div class="flex flex-r">
  121. <div class="detail-label flex flex-align-center">用户头像url</div>
  122. <div class="detail-value flex flex-align-center">
  123. {{ dialogFormDetail.portraitUrl }}
  124. </div>
  125. </div> -->
  126. <!-- <div class="flex flex-r">
  127. <div class="detail-label flex flex-align-center">启用状态</div>
  128. <div class="detail-value flex flex-align-center">
  129. {{ dialogFormDetail.isPostRy }}
  130. </div>
  131. </div> -->
  132. </div>
  133. <template #footer>
  134. <div class="dialog-footer">
  135. <el-button @click="cancel">关 闭</el-button>
  136. </div>
  137. </template>
  138. </el-dialog>
  139. </div>
  140. </template>
  141.  
  142. <script setup name="RcloudUnitUser">
  143. import {
  144. pagercloudUnitUser,
  145. getrcloudUnitUser,
  146. delrcloudUnitUser,
  147. addrcloudUnitUser,
  148. updatercloudUnitUser,
  149. } from '@/views/RongyunCommunication/rongyunjs/rcloudUnitUser';
  150.  
  151. const { proxy } = getCurrentInstance();
  152.  
  153. const dataScopeOptions = ref([
  154. { value: 0, label: '否' },
  155. { value: 1, label: '是' },
  156. ]);
  157.  
  158. const platformOptions = ref([
  159. { value: 'web', label: 'web' },
  160. { value: 'app', label: 'app' },
  161. ]);
  162. const rcloudUnitUserList = ref([]);
  163. const open = ref(false);
  164. const loading = ref(true);
  165. const showSearch = ref(true);
  166. const ids = ref([]);
  167. const single = ref(true);
  168. const multiple = ref(true);
  169. const total = ref(0);
  170. const title = ref('');
  171. const detailOpen = ref(false);
  172.  
  173. const data = reactive({
  174. form: {},
  175. queryParams: {
  176. pageNum: 1,
  177. pageSize: 10,
  178. includingPlatform: null,
  179. phone: null,
  180. name: null,
  181. portraitUrl: null,
  182. isPostRy: null,
  183. status: null,
  184. },
  185. rules: {
  186. name: [{ required: true, message: '用户姓名不能为空', trigger: 'blur' }],
  187. includingPlatform: [{ required: true, message: '包含平台不能为空', trigger: 'blur' }],
  188. phone: [
  189. {
  190. pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
  191. message: '请输入正确的手机号码',
  192. trigger: 'blur',
  193. required: true,
  194. },
  195. ],
  196. },
  197. dialogFormDetail: {}, //详情弹框数据
  198. });
  199.  
  200. const { queryParams, form, rules, dialogFormDetail } = toRefs(data);
  201.  
  202. /** 查询融合通讯用户列表 */
  203. function getList() {
  204. let prams = {};
  205. if (queryParams.value.includingPlatform) {
  206. prams = {
  207. includingPlatform: queryParams.value.includingPlatform.join(','),
  208. };
  209. }
  210.  
  211. prams = { ...queryParams.value, ...prams };
  212.  
  213. loading.value = true;
  214. pagercloudUnitUser(prams).then(response => {
  215. rcloudUnitUserList.value = response.data;
  216. total.value = response.total;
  217. loading.value = false;
  218. });
  219. }
  220.  
  221. // 取消按钮
  222. function cancel() {
  223. open.value = false;
  224. reset();
  225. }
  226.  
  227. // 表单重置
  228. function reset() {
  229. form.value = {
  230. id: null,
  231. includingPlatform: null,
  232. phone: null,
  233. name: null,
  234. portraitUrl: null,
  235. isPostRy: 1,
  236. remark: null,
  237. status: null,
  238. delFlag: null,
  239. createBy: null,
  240. createTime: null,
  241. updateBy: null,
  242. updateTime: null,
  243. };
  244. proxy.resetForm('rcloudUnitUserRef');
  245. }
  246.  
  247. /** 搜索按钮操作 */
  248. function handleQuery() {
  249. queryParams.value.pageNum = 1;
  250. getList();
  251. }
  252.  
  253. /** 重置按钮操作 */
  254. function resetQuery() {
  255. proxy.resetForm('queryRef');
  256. handleQuery();
  257. }
  258.  
  259. // 多选框选中数据
  260. function handleSelectionChange(selection) {
  261. ids.value = selection.map(item => item.id);
  262. single.value = selection.length != 1;
  263. multiple.value = !selection.length;
  264. }
  265.  
  266. /** 新增按钮操作 */
  267. function handleAdd() {
  268. reset();
  269. open.value = true;
  270. title.value = '添加融合通讯用户';
  271. }
  272.  
  273. /** 修改按钮操作 */
  274. function handleUpdate(row) {
  275. reset();
  276. const _id = row.id || ids.value;
  277. getrcloudUnitUser(_id).then(response => {
  278. form.value = response.data;
  279. if (form.value.includingPlatform) {
  280. form.value.includingPlatform = form.value.includingPlatform.split(',');
  281. }
  282. open.value = true;
  283. title.value = '修改融合通讯用户';
  284. });
  285. }
  286.  
  287. /** 提交按钮 */
  288. function submitForm() {
  289. proxy.$refs['rcloudUnitUserRef'].validate(valid => {
  290. if (valid) {
  291. form.value.createBy = localStorage.getItem('userNo');
  292.  
  293. let prams = {};
  294. if (form.value.includingPlatform) {
  295. prams = {
  296. includingPlatform: form.value.includingPlatform.join(','),
  297. };
  298. }
  299. prams = { ...form.value, ...prams };
  300.  
  301. if (form.value.id != null) {
  302. addrcloudUnitUser(prams).then(response => {
  303. proxy.$modal.msgSuccess('修改成功');
  304. open.value = false;
  305. getList();
  306. });
  307. } else {
  308. addrcloudUnitUser(prams).then(response => {
  309. proxy.$modal.msgSuccess('新增成功');
  310. open.value = false;
  311. getList();
  312. });
  313. }
  314. }
  315. });
  316. }
  317.  
  318. /** 删除按钮操作 */
  319. function handleDelete(row) {
  320. const _ids = row.id || ids.value;
  321. proxy.$modal
  322. .confirm('是否确认删除融合通讯用户"' + row.name + '"的数据项?')
  323. .then(function () {
  324. return delrcloudUnitUser(_ids);
  325. })
  326. .then(() => {
  327. getList();
  328. proxy.$modal.msgSuccess('删除成功');
  329. })
  330. .catch(() => {});
  331. }
  332.  
  333. /** 导出按钮操作 */
  334. function handleExport() {
  335. proxy.download(
  336. 'rcloud/rcloudUnitUser/export',
  337. {
  338. ...queryParams.value,
  339. },
  340. `rcloudUnitUser_${new Date().getTime()}.xlsx`
  341. );
  342. }
  343. //查看详情操作
  344. function handleDetail(row) {
  345. detailOpen.value = true;
  346. dialogFormDetail.value = row;
  347. }
  348. getList();
  349. </script>