- <template>
- <div class="app-container">
- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="88px">
- <el-form-item label="包含平台" prop="includingPlatform">
- <!-- <el-input v-model="queryParams.includingPlatform" placeholder="请输入包含平台" clearable @keyup.enter="handleQuery" /> -->
-
- <el-select
- v-model="queryParams.includingPlatform"
- clearable
- multipleg
- style="width: 100%"
- placeholder="请选择包含平台"
- @change="handleQuery"
- >
- <el-option v-for="item in platformOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="用户手机号" prop="phone">
- <el-input v-model="queryParams.phone" placeholder="请输入用户手机号" clearable @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item label="用户名称" prop="name">
- <el-input v-model="queryParams.name" placeholder="请输入用户名称" clearable @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item>
- <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
- <el-button icon="Refresh" @click="resetQuery">重置</el-button>
- <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['rcloud:rcloudUnitUser:add']">新增</el-button>
- </el-form-item>
- </el-form>
-
- <el-table v-loading="loading" :data="rcloudUnitUserList" @selection-change="handleSelectionChange" height="70vh">
- <el-table-column type="index" width="55" label="序号" align="center" />
- <el-table-column label="包含平台" align="center" prop="includingPlatform" />
- <el-table-column label="用户手机号" align="center" prop="phone" />
- <el-table-column label="用户名称" align="center" prop="name" />
- <!-- <el-table-column label="启用状态" align="center" prop="isPostRy">
- <template #default="scope">
- <div>
- {{ scope.row.isPostRy == 1 ? '是' : '否' }}
- </div>
- </template>
- </el-table-column> -->
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
- <template #default="scope">
- <el-button link type="warning" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['rcloud:rcloudUnitUser:edit']"
- >修改</el-button
- >
- <el-button
- link
- type="danger"
- icon="Delete"
- @click="handleDelete(scope.row)"
- v-hasPermi="['rcloud:rcloudUnitUser:remove']"
- >删除</el-button
- >
- </template>
- </el-table-column>
- </el-table>
-
- <pagination
- v-show="total > 0"
- :total="total"
- v-model:page="queryParams.pageNum"
- v-model:limit="queryParams.pageSize"
- @pagination="getList"
- />
-
- <!-- 添加或修改融合通讯用户对话框 -->
- <el-dialog :title="title" v-model="open" width="500px" append-to-body>
- <el-form ref="rcloudUnitUserRef" :model="form" :rules="rules" label-width="120px">
- <el-form-item label="包含平台" prop="includingPlatform">
- <el-select multiple v-model="form.includingPlatform" clearable style="width: 100%" placeholder="请选择包含平台">
- <el-option v-for="item in platformOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="用户名称" prop="name">
- <el-input v-model="form.name" placeholder="请输入用户名称" />
- </el-form-item>
- <el-form-item label="用户手机号" prop="phone">
- <el-input v-model="form.phone" placeholder="请输入用户手机号" />
- </el-form-item>
- <!-- <el-form-item label="用户头像url" prop="portraitUrl">
- <el-input v-model="form.portraitUrl" placeholder="请输入用户头像url" />
- </el-form-item> -->
- <!-- <el-form-item label="启用状态" prop="isPostRy">
- <el-select v-model="form.isPostRy" clearable style="width: 100%" placeholder="请选择是否">
- <el-option v-for="item in dataScopeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
- </el-select>
- </el-form-item> -->
- </el-form>
- <template #footer>
- <div class="dialog-footer">
- <el-button type="primary" @click="submitForm">确 定</el-button>
- <el-button @click="cancel">取 消</el-button>
- </div>
- </template>
- </el-dialog>
-
- <!-- 融合通讯用户详情 -->
- <el-dialog title="融合通讯用户详情" v-model="detailOpen" width="800px" append-to-body class="dialog-detail-box">
- <div class="dialog-form-detail flex flex-r flex-wrap">
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">包含平台</div>
- <div class="detail-value flex flex-align-center">
- {{ dialogFormDetail.includingPlatform }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">用户手机号</div>
- <div class="detail-value flex flex-align-center">
- {{ dialogFormDetail.phone }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">用户名称</div>
- <div class="detail-value flex flex-align-center">
- {{ dialogFormDetail.name }}
- </div>
- </div>
- <!-- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">用户头像url</div>
- <div class="detail-value flex flex-align-center">
- {{ dialogFormDetail.portraitUrl }}
- </div>
- </div> -->
- <!-- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">启用状态</div>
- <div class="detail-value flex flex-align-center">
- {{ dialogFormDetail.isPostRy }}
- </div>
- </div> -->
- </div>
- <template #footer>
- <div class="dialog-footer">
- <el-button @click="cancel">关 闭</el-button>
- </div>
- </template>
- </el-dialog>
- </div>
- </template>
-
- <script setup name="RcloudUnitUser">
- import {
- pagercloudUnitUser,
- getrcloudUnitUser,
- delrcloudUnitUser,
- addrcloudUnitUser,
- updatercloudUnitUser,
- } from '@/views/RongyunCommunication/rongyunjs/rcloudUnitUser';
-
- const { proxy } = getCurrentInstance();
-
- const dataScopeOptions = ref([
- { value: 0, label: '否' },
- { value: 1, label: '是' },
- ]);
-
- const platformOptions = ref([
- { value: 'web', label: 'web' },
- { value: 'app', label: 'app' },
- ]);
- const rcloudUnitUserList = ref([]);
- const open = ref(false);
- const loading = ref(true);
- const showSearch = ref(true);
- const ids = ref([]);
- const single = ref(true);
- const multiple = ref(true);
- const total = ref(0);
- const title = ref('');
- const detailOpen = ref(false);
-
- const data = reactive({
- form: {},
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- includingPlatform: null,
- phone: null,
- name: null,
- portraitUrl: null,
- isPostRy: null,
- status: null,
- },
- rules: {
- name: [{ required: true, message: '用户姓名不能为空', trigger: 'blur' }],
- includingPlatform: [{ required: true, message: '包含平台不能为空', trigger: 'blur' }],
- phone: [
- {
- pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
- message: '请输入正确的手机号码',
- trigger: 'blur',
- required: true,
- },
- ],
- },
- dialogFormDetail: {}, //详情弹框数据
- });
-
- const { queryParams, form, rules, dialogFormDetail } = toRefs(data);
-
- /** 查询融合通讯用户列表 */
- function getList() {
- let prams = {};
- if (queryParams.value.includingPlatform) {
- prams = {
- includingPlatform: queryParams.value.includingPlatform.join(','),
- };
- }
-
- prams = { ...queryParams.value, ...prams };
-
- loading.value = true;
- pagercloudUnitUser(prams).then(response => {
- rcloudUnitUserList.value = response.data;
- total.value = response.total;
- loading.value = false;
- });
- }
-
- // 取消按钮
- function cancel() {
- open.value = false;
- reset();
- }
-
- // 表单重置
- function reset() {
- form.value = {
- id: null,
- includingPlatform: null,
- phone: null,
- name: null,
- portraitUrl: null,
- isPostRy: 1,
- remark: null,
- status: null,
- delFlag: null,
- createBy: null,
- createTime: null,
- updateBy: null,
- updateTime: null,
- };
- proxy.resetForm('rcloudUnitUserRef');
- }
-
- /** 搜索按钮操作 */
- function handleQuery() {
- queryParams.value.pageNum = 1;
- getList();
- }
-
- /** 重置按钮操作 */
- function resetQuery() {
- proxy.resetForm('queryRef');
- handleQuery();
- }
-
- // 多选框选中数据
- function handleSelectionChange(selection) {
- ids.value = selection.map(item => item.id);
- single.value = selection.length != 1;
- multiple.value = !selection.length;
- }
-
- /** 新增按钮操作 */
- function handleAdd() {
- reset();
- open.value = true;
- title.value = '添加融合通讯用户';
- }
-
- /** 修改按钮操作 */
- function handleUpdate(row) {
- reset();
- const _id = row.id || ids.value;
- getrcloudUnitUser(_id).then(response => {
- form.value = response.data;
- if (form.value.includingPlatform) {
- form.value.includingPlatform = form.value.includingPlatform.split(',');
- }
- open.value = true;
- title.value = '修改融合通讯用户';
- });
- }
-
- /** 提交按钮 */
- function submitForm() {
- proxy.$refs['rcloudUnitUserRef'].validate(valid => {
- if (valid) {
- form.value.createBy = localStorage.getItem('userNo');
-
- let prams = {};
- if (form.value.includingPlatform) {
- prams = {
- includingPlatform: form.value.includingPlatform.join(','),
- };
- }
- prams = { ...form.value, ...prams };
-
- if (form.value.id != null) {
- addrcloudUnitUser(prams).then(response => {
- proxy.$modal.msgSuccess('修改成功');
- open.value = false;
- getList();
- });
- } else {
- addrcloudUnitUser(prams).then(response => {
- proxy.$modal.msgSuccess('新增成功');
- open.value = false;
- getList();
- });
- }
- }
- });
- }
-
- /** 删除按钮操作 */
- function handleDelete(row) {
- const _ids = row.id || ids.value;
- proxy.$modal
- .confirm('是否确认删除融合通讯用户"' + row.name + '"的数据项?')
- .then(function () {
- return delrcloudUnitUser(_ids);
- })
- .then(() => {
- getList();
- proxy.$modal.msgSuccess('删除成功');
- })
- .catch(() => {});
- }
-
- /** 导出按钮操作 */
- function handleExport() {
- proxy.download(
- 'rcloud/rcloudUnitUser/export',
- {
- ...queryParams.value,
- },
- `rcloudUnitUser_${new Date().getTime()}.xlsx`
- );
- }
- //查看详情操作
- function handleDetail(row) {
- detailOpen.value = true;
- dialogFormDetail.value = row;
- }
- getList();
- </script>