1079 lines
32 KiB
Vue
1079 lines
32 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<!-- 搜索栏 -->
|
|
<div class="filter-container">
|
|
<!-- 归属系统 -->
|
|
<el-select
|
|
v-model="listQuery.sysOrigin"
|
|
:placeholder="$t('pages.roomProfile.filter.system')"
|
|
style="width: 150px"
|
|
class="filter-item"
|
|
@change="handleSearch"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in permissionsSysOriginPlatforms"
|
|
:key="index"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
<span style="float: left;">
|
|
<sys-origin-icon :icon="item.value" :desc="item.value"
|
|
/></span>
|
|
<span style="float: left;margin-left:10px">{{ item.label }}</span>
|
|
</el-option>
|
|
</el-select>
|
|
|
|
<!-- 注销状态 -->
|
|
<el-select
|
|
v-model="listQuery.del"
|
|
:placeholder="$t('pages.roomProfile.filter.deletedStatus')"
|
|
style="width: 150px"
|
|
class="filter-item"
|
|
@change="handleSearch"
|
|
>
|
|
<el-option :label="$t('pages.roomProfile.filter.notDeleted')" value="0" />
|
|
<el-option :label="$t('pages.roomProfile.filter.deleted')" value="1" />
|
|
</el-select>
|
|
|
|
<!-- 房间状态 -->
|
|
<el-select
|
|
v-model="listQuery.event"
|
|
:placeholder="$t('pages.roomProfile.filter.roomStatus')"
|
|
style="width: 150px"
|
|
class="filter-item"
|
|
clearable
|
|
@change="handleSearch"
|
|
>
|
|
<el-option
|
|
v-for="item in localizedRoomEvents"
|
|
:key="item.value"
|
|
:label="item.name"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
|
|
<!-- 房间ID -->
|
|
<el-input
|
|
v-model.trim="listQuery.roomId"
|
|
:placeholder="$t('pages.roomProfile.filter.roomId')"
|
|
clearable
|
|
style="width: 220px;"
|
|
class="filter-item"
|
|
/>
|
|
|
|
<!-- 房间账号 -->
|
|
<el-input
|
|
v-model.trim="listQuery.roomAccount"
|
|
:placeholder="$t('pages.roomProfile.filter.roomAccount')"
|
|
clearable
|
|
style="width: 220px;"
|
|
class="filter-item"
|
|
/>
|
|
|
|
<!-- 用户ID -->
|
|
<div class="filter-item">
|
|
<account-input
|
|
v-model="listQuery.userId"
|
|
:sys-origin="listQuery.sysOrigin"
|
|
:placeholder="$t('pages.roomProfile.filter.userId')"
|
|
/>
|
|
</div>
|
|
|
|
<!-- 搜索 -->
|
|
<el-button
|
|
class="filter-item"
|
|
type="primary"
|
|
icon="el-icon-search"
|
|
:disabled="listLoading"
|
|
@click="handleSearch"
|
|
>
|
|
{{ $t('pages.roomProfile.filter.search') }}
|
|
</el-button>
|
|
|
|
<!-- 移除/拉黑成员 -->
|
|
<el-button
|
|
class="filter-item"
|
|
type="primary"
|
|
icon="el-icon-edit"
|
|
@click="handleRemoveOrPullBlack"
|
|
>
|
|
{{ $t('pages.roomProfile.filter.removeOrBlacklist') }}
|
|
</el-button>
|
|
|
|
<!-- 权限变更 -->
|
|
<el-button
|
|
class="filter-item"
|
|
type="primary"
|
|
icon="el-icon-edit"
|
|
@click="handleChangeRole"
|
|
>
|
|
{{ $t('pages.roomProfile.filter.roleChange') }}
|
|
</el-button>
|
|
</div>
|
|
|
|
<!-- 表单 -->
|
|
<el-table
|
|
v-loading="listLoading"
|
|
:data="list"
|
|
element-loading-text="Loading"
|
|
fit
|
|
highlight-current-row
|
|
>
|
|
<!-- 封面 + 房间信息 -->
|
|
<el-table-column :label="$t('pages.roomProfile.table.cover')" align="center" min-width="200">
|
|
<template slot-scope="scope">
|
|
<div class="room-profile flex-l">
|
|
<!-- 封面 -->
|
|
<div class="avatar">
|
|
<el-image
|
|
style="width: 100%; height: 100%;"
|
|
:src="scope.row.roomCover"
|
|
:preview-src-list="[scope.row.roomCover]"
|
|
>
|
|
<div slot="error" class="image-slot">
|
|
<i class="el-icon-picture-outline" />
|
|
</div>
|
|
</el-image>
|
|
</div>
|
|
|
|
<!-- 房间信息 -->
|
|
<div class="info nowrap-ellipsis">
|
|
<div class="nickname">
|
|
<el-link
|
|
v-if="scope.row.roomName"
|
|
@click="queryRoomDetails(scope.row.id)"
|
|
>
|
|
{{ scope.row.roomName }}
|
|
</el-link>
|
|
</div>
|
|
<div class="account">{{ $t('pages.roomProfile.row.account') }}: {{ scope.row.roomAccount }}</div>
|
|
<div class="desc">
|
|
{{ scope.row.roomDesc }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<!-- 房间信息 -->
|
|
<el-table-column :label="$t('pages.roomProfile.table.roomInfo')" align="left" min-width="200">
|
|
<template slot-scope="scope">
|
|
<div style="margin: auto;">
|
|
<div>
|
|
{{ $t('pages.roomProfile.row.status') }}:
|
|
<el-tag
|
|
size="mini"
|
|
:type="getRoomStatusTagType(scope.row.event)"
|
|
>{{ getRoomStatusText(scope.row.event) }}</el-tag>
|
|
</div>
|
|
<div>ID: {{ scope.row.id }}</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<!-- 时间 -->
|
|
<el-table-column prop="event" :label="$t('pages.roomProfile.table.time')" align="center" width="200">
|
|
<template slot-scope="scope">
|
|
<div>{{ $t('pages.roomProfile.row.createdAt') }}: {{ scope.row.createTime | dateFormat }}</div>
|
|
<div>{{ $t('pages.roomProfile.row.updatedAt') }}: {{ scope.row.updateTime | dateFormat }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<!-- 操作 -->
|
|
<el-table-column fixed="right" :label="$t('pages.roomProfile.table.actions')" align="center" width="50">
|
|
<template slot-scope="scope">
|
|
<el-dropdown>
|
|
<span class="el-dropdown-link">
|
|
<i class="el-icon-more" />
|
|
</span>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<!-- 复制ID -->
|
|
<el-dropdown-item @click.native="copyContent(scope.row.id)"
|
|
>{{ $t('pages.roomProfile.action.copyId') }}</el-dropdown-item
|
|
>
|
|
|
|
<!-- 编辑资料 -->
|
|
<el-dropdown-item
|
|
v-if="buttonPermissions.includes('room:profile:table:edit')"
|
|
@click.native="handleUpdate(scope.row)"
|
|
>{{ $t('pages.roomProfile.action.editProfile') }}</el-dropdown-item
|
|
>
|
|
|
|
<!-- 成员列表 -->
|
|
<el-dropdown-item
|
|
v-if="
|
|
buttonPermissions.includes(
|
|
'room:profile:table:query:member:list'
|
|
)
|
|
"
|
|
@click.native="queryRoomUserDetails(scope.row.id)"
|
|
>{{ $t('pages.roomProfile.action.memberList') }}</el-dropdown-item
|
|
>
|
|
|
|
<!-- 访客记录 -->
|
|
<el-dropdown-item
|
|
v-if="
|
|
buttonPermissions.includes(
|
|
'room:profile:table:query:visitor:list'
|
|
)
|
|
"
|
|
@click.native="queryRoomVisitorLog(scope.row.id)"
|
|
>{{ $t('pages.roomProfile.action.visitorLog') }}</el-dropdown-item
|
|
>
|
|
|
|
<!-- 活跃指标 -->
|
|
<!-- <el-dropdown-item v-if="buttonPermissions.includes('room:profile:table:query:active:index')" @click.native="clickRoomActive(scope.row)">活跃指标</el-dropdown-item> -->
|
|
|
|
<!-- 操作日志 -->
|
|
<el-dropdown-item
|
|
v-if="buttonPermissions.includes('room:profile:table:log')"
|
|
@click.native="clickQueryRolesChangeLog(scope.row)"
|
|
>{{ $t('pages.roomProfile.action.operationLog') }}</el-dropdown-item
|
|
>
|
|
|
|
<!-- 审批房间昵称 -->
|
|
<el-dropdown-item
|
|
v-if="buttonPermissions.includes('room:profile:table:approval')"
|
|
@click.native="editApproval(scope.row, 'ROOM_NICKNAME')"
|
|
>{{ $t('pages.roomProfile.action.approveRoomNickname') }}</el-dropdown-item
|
|
>
|
|
|
|
<!-- 审批房间头像 -->
|
|
<el-dropdown-item
|
|
v-if="buttonPermissions.includes('room:profile:table:approval')"
|
|
@click.native="editApproval(scope.row, 'ROOM_AVATAR')"
|
|
>{{ $t('pages.roomProfile.action.approveRoomAvatar') }}</el-dropdown-item
|
|
>
|
|
|
|
<!-- 审批房间公告 -->
|
|
<el-dropdown-item
|
|
v-if="buttonPermissions.includes('room:profile:table:approval')"
|
|
@click.native="editApproval(scope.row, 'ROOM_NOTICE')"
|
|
>{{ $t('pages.roomProfile.action.approveRoomNotice') }}</el-dropdown-item
|
|
>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 加载按钮 -->
|
|
<div class="load-more flex-c">
|
|
<el-button
|
|
v-if="!listNotData"
|
|
type="text"
|
|
:disabled="listLoading"
|
|
@click="renderData"
|
|
>{{ $t('pages.roomProfile.action.loadMore') }}</el-button
|
|
>
|
|
<span v-else>{{ $t('pages.roomProfile.action.loadedAll') }}</span>
|
|
</div>
|
|
|
|
<!-- 房间详情组件 -->
|
|
<room-deatils-drawer
|
|
v-if="roomDeatilsDrawerVisible"
|
|
:room-id="roomId"
|
|
@close="roomDeatilsDrawerVisible = false"
|
|
/>
|
|
|
|
<!-- 成员列表组件 -->
|
|
<profile-user-drawer
|
|
v-if="roomUserDeatilsDrawerVisible"
|
|
:room-id="roomId"
|
|
:sys-origin="listQuery.sysOrigin"
|
|
@close="roomUserDeatilsDrawerVisible = false"
|
|
/>
|
|
|
|
<!-- 访客记录组件 -->
|
|
<visitor-log-drawer
|
|
v-if="roomVisitorLogVisible"
|
|
:room-id="roomId"
|
|
:sys-origin="listQuery.sysOrigin"
|
|
@close="roomVisitorLogVisible = false"
|
|
/>
|
|
|
|
<!-- 编辑资料组件 -->
|
|
<el-dialog
|
|
:title="$t('pages.roomProfile.dialog.editRoomProfile')"
|
|
:visible.sync="formVisible"
|
|
:modal-append-to-body="true"
|
|
:append-to-body="true"
|
|
:before-close="handleClose"
|
|
width="450px"
|
|
>
|
|
<div v-loading="submitLoading">
|
|
<el-form
|
|
ref="form"
|
|
class="i18n-form"
|
|
:model="form"
|
|
:rules="localizedRules"
|
|
label-width="90px"
|
|
style="margin-right: 28px"
|
|
>
|
|
<el-form-item :label="$t('pages.roomProfile.dialog.cover')" prop="roomCover">
|
|
<el-upload
|
|
class="upload-demo"
|
|
action=""
|
|
:http-request="httpRequest"
|
|
:show-file-list="false"
|
|
accept="image/png,image/jpg,image/jpeg"
|
|
>
|
|
<el-image
|
|
v-if="form.roomCover"
|
|
:src="form.roomCover"
|
|
fit="fill"
|
|
style="width: 50px; height: 50px"
|
|
/>
|
|
<el-button v-loading="uploadLoading" size="small" type="primary"
|
|
>{{ $t('pages.roomProfile.dialog.clickUpload') }}</el-button
|
|
>
|
|
</el-upload>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('pages.roomProfile.dialog.name')" prop="roomName">
|
|
<el-input
|
|
v-model.trim="form.roomName"
|
|
type="text"
|
|
:placeholder="$t('pages.roomProfile.dialog.roomName')"
|
|
show-word-limit
|
|
minlength="1"
|
|
maxlength="24"
|
|
resize="none"
|
|
rows="6"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('pages.roomProfile.dialog.notice')">
|
|
<el-input
|
|
v-model.trim="form.roomDesc"
|
|
type="textarea"
|
|
:placeholder="$t('pages.roomProfile.dialog.roomNoticePlaceholder')"
|
|
show-word-limit
|
|
maxlength="160"
|
|
resize="none"
|
|
rows="6"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('pages.roomProfile.dialog.status')">
|
|
<el-select
|
|
v-model="form.event"
|
|
:placeholder="$t('pages.roomProfile.filter.roomStatus')"
|
|
style="width:100%;"
|
|
class="filter-item"
|
|
>
|
|
<el-option
|
|
v-for="item in localizedRoomEvents"
|
|
:key="item.value"
|
|
:label="item.name"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<!-- 管理员数量 -->
|
|
<el-form-item :label="$t('pages.roomProfile.dialog.adminCount')" prop="maxAdmin">
|
|
<el-input
|
|
v-model.number="form.maxAdmin"
|
|
type="number"
|
|
:placeholder="$t('pages.roomProfile.dialog.maxAdminCount')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="submitForm()">{{ $t('pages.roomProfile.dialog.save') }}</el-button>
|
|
<el-button @click="handleClose()">{{ $t('pages.roomProfile.dialog.cancel') }}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<!-- 移除/拉黑成员组件 -->
|
|
<el-dialog
|
|
:title="textOptTitle3"
|
|
:visible.sync="formVisible3"
|
|
:modal-append-to-body="true"
|
|
:append-to-body="true"
|
|
:before-close="handleClose"
|
|
:close-on-click-modal="false"
|
|
width="400px"
|
|
>
|
|
<div v-loading="submitLoading3">
|
|
<el-form
|
|
ref="form"
|
|
class="i18n-form i18n-form--narrow"
|
|
:model="form3"
|
|
label-width="50px"
|
|
style="margin-left: 15px;"
|
|
>
|
|
<el-form-item :label="$t('pages.roomProfile.dialog.platform')">
|
|
<el-input
|
|
v-model.trim="listQuery.sysOrigin"
|
|
:disabled="true"
|
|
type="text"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('pages.roomProfile.dialog.room')" prop="roomAccount">
|
|
<el-input
|
|
v-model.trim="form3.roomAccount"
|
|
:placeholder="$t('pages.roomProfile.filter.roomAccount')"
|
|
type="text"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('pages.roomProfile.dialog.user')" prop="userAccount">
|
|
<el-input
|
|
v-model.trim="form3.userAccount"
|
|
:placeholder="$t('pages.roomProfile.filter.userId')"
|
|
type="text"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('pages.roomProfile.dialog.event')">
|
|
<el-select
|
|
v-model="form3.event"
|
|
:placeholder="$t('pages.roomProfile.dialog.event')"
|
|
style="width:100%;"
|
|
class="filter-item"
|
|
>
|
|
<el-option
|
|
v-for="item in localizedSysOperatingRoomUserEvent"
|
|
:key="item.value"
|
|
:label="item.name"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="submitRemoveOrPullBlackForm()"
|
|
>{{ $t('pages.roomProfile.dialog.save') }}</el-button
|
|
>
|
|
<el-button @click="handleClose()">{{ $t('pages.roomProfile.dialog.cancel') }}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<!-- 权限变更组件 -->
|
|
<el-dialog
|
|
:title="textOptTitle4"
|
|
:visible.sync="formVisible4"
|
|
:modal-append-to-body="true"
|
|
:append-to-body="true"
|
|
:before-close="handleClose"
|
|
:close-on-click-modal="false"
|
|
width="400px"
|
|
>
|
|
<div v-loading="submitLoading4">
|
|
<el-form
|
|
ref="form"
|
|
class="i18n-form i18n-form--narrow"
|
|
:model="form4"
|
|
label-width="50px"
|
|
style="margin-left: 15px;"
|
|
>
|
|
<el-form-item :label="$t('pages.roomProfile.dialog.platform')">
|
|
<el-input
|
|
v-model.trim="listQuery.sysOrigin"
|
|
:disabled="true"
|
|
type="text"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('pages.roomProfile.dialog.room')" prop="roomAccount">
|
|
<el-input
|
|
v-model.trim="form4.roomAccount"
|
|
:placeholder="$t('pages.roomProfile.filter.roomAccount')"
|
|
type="text"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('pages.roomProfile.dialog.user')" prop="userAccount">
|
|
<el-input
|
|
v-model.trim="form4.userAccount"
|
|
:placeholder="$t('pages.roomProfile.filter.userId')"
|
|
type="text"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('pages.roomProfile.dialog.permission')">
|
|
<el-select
|
|
v-model="form4.roles"
|
|
:placeholder="$t('pages.roomProfile.dialog.permission')"
|
|
style="width:100%;"
|
|
class="filter-item"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in localizedRoomRoles"
|
|
:key="index"
|
|
:label="item.name"
|
|
:value="item.value"
|
|
:disabled="item.value == 'HOMEOWNER'"
|
|
/>
|
|
<el-option :key="localizedRoomRoles.length" :label="$t('pages.roomProfile.dialog.tourist')" value="TOURIST" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="submitChangeRoleForm()"
|
|
>{{ $t('pages.roomProfile.dialog.save') }}</el-button
|
|
>
|
|
<el-button @click="handleClose()">{{ $t('pages.roomProfile.dialog.cancel') }}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<!-- 活跃指标 -->
|
|
<room-active-charts
|
|
v-if="roomActiveVisible"
|
|
:room-id="roomId"
|
|
@close="roomActiveVisible = false"
|
|
/>
|
|
|
|
<!-- 操作日志 -->
|
|
<room-operation-log
|
|
v-if="roomOperationLogVisible"
|
|
:room-id="roomId"
|
|
@close="roomOperationLogVisible = false"
|
|
/>
|
|
|
|
<el-dialog
|
|
:title="textOptTitle"
|
|
:visible="textOptVisible"
|
|
:modal-append-to-body="true"
|
|
:append-to-body="true"
|
|
:before-close="handleClose"
|
|
:close-on-click-modal="false"
|
|
width="500px"
|
|
top="170px"
|
|
>
|
|
<div v-loading="submitLoading">
|
|
<div class="form-contetn">
|
|
<el-form
|
|
ref="form"
|
|
class="i18n-form i18n-form--wide"
|
|
:model="form"
|
|
:rules="localizedRules"
|
|
label-width="110px"
|
|
style="text-align: center;"
|
|
>
|
|
<el-button
|
|
type="primary"
|
|
style="margin: auto 20px;"
|
|
plain
|
|
@click="pass()"
|
|
>{{ $t('pages.roomProfile.dialog.approvePass') }}</el-button
|
|
>
|
|
<el-button
|
|
type="danger"
|
|
style="margin: auto 20px;"
|
|
plain
|
|
@click="notpass()"
|
|
>{{ $t('pages.roomProfile.dialog.approveViolation') }}</el-button
|
|
>
|
|
</el-form>
|
|
</div>
|
|
<div slot="footer" style="text-align: right;">
|
|
<el-button @click="handleClose()">{{ $t('pages.roomProfile.dialog.cancel') }}</el-button>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
pofileTable,
|
|
updateProfile,
|
|
removeOrPullBlackRoomUser,
|
|
changeRole
|
|
} from "@/api/room";
|
|
import { getAccessImgUrl } from "@/api/oss";
|
|
import {
|
|
roomEvents,
|
|
sysOperatingRoomUserEvent,
|
|
roomRoles
|
|
} from "@/constant/type";
|
|
import RoomDeatilsDrawer from "@/components/data/RoomDeatilsDrawer";
|
|
import ProfileUserDrawer from "./user-drawer";
|
|
import VisitorLogDrawer from "./room-visitor-log";
|
|
import { mapGetters } from "vuex";
|
|
import RoomActiveCharts from "./room-active-charts";
|
|
import RoomOperationLog from "./room-operation-log";
|
|
import { approvalData } from "@/api/approval";
|
|
import { copyText } from "@/utils";
|
|
function getFormData() {
|
|
return {
|
|
id: "",
|
|
roomCover: "",
|
|
roomName: "",
|
|
roomDesc: "",
|
|
countryCode: "",
|
|
event: "",
|
|
maxAdmin: 0
|
|
};
|
|
}
|
|
// 权限变更
|
|
function getFormData4() {
|
|
return {
|
|
roomId: "",
|
|
userAccount: "",
|
|
roles: ""
|
|
};
|
|
}
|
|
// 移除/拉黑成员
|
|
function getFormData3() {
|
|
return {
|
|
sysOrigin: "",
|
|
roomAccount: "",
|
|
userAccount: "",
|
|
event: ""
|
|
};
|
|
}
|
|
export default {
|
|
components: {
|
|
RoomDeatilsDrawer,
|
|
ProfileUserDrawer,
|
|
VisitorLogDrawer,
|
|
RoomActiveCharts,
|
|
RoomOperationLog
|
|
},
|
|
data() {
|
|
return {
|
|
updateProfileRow: {},
|
|
roomRoles,
|
|
roomOperationLogVisible: false,
|
|
roomActiveVisible: false,
|
|
pushTextHistoryLoading: false,
|
|
pushTextHistory: [],
|
|
list: [],
|
|
listNotData: false,
|
|
roomDeatilsDrawerVisible: false,
|
|
roomUserDeatilsDrawerVisible: false,
|
|
roomVisitorLogVisible: false,
|
|
roomId: "",
|
|
roomEvents,
|
|
textOptVisible: false,
|
|
textOptTitle: "",
|
|
approveType: "",
|
|
approvalUserId: "",
|
|
approvalContent: "",
|
|
approvalRoomId: "",
|
|
sysOperatingRoomUserEvent,
|
|
listQuery: {
|
|
limit: 20,
|
|
lastId: "",
|
|
sysOrigin: "",
|
|
roomId: "",
|
|
roomAccount: "",
|
|
userId: "",
|
|
del: "0",
|
|
event: ""
|
|
},
|
|
formVisible: false,
|
|
form: getFormData(),
|
|
form4: getFormData4(),
|
|
submitLoading: false,
|
|
submitLoading3: false,
|
|
formVisible3: false,
|
|
textOptTitle3: "",
|
|
submitLoading4: false,
|
|
formVisible4: false,
|
|
textOptTitle4: "",
|
|
form3: getFormData3(),
|
|
listLoading: true,
|
|
uploadLoading: false
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(["permissionsSysOriginPlatforms", "buttonPermissions"]),
|
|
localizedRoomEvents() {
|
|
const roomEventNameMap = {
|
|
AVAILABLE: "normal",
|
|
CLOSE: "closed",
|
|
WAITING_CONFIRMED: "waitingConfirmed",
|
|
ID_CHANGE: "idChanged"
|
|
};
|
|
return this.roomEvents.map(item => ({
|
|
...item,
|
|
name: this.$t(
|
|
`pages.roomProfile.row.${roomEventNameMap[item.value] || "unknown"}`
|
|
)
|
|
}));
|
|
},
|
|
localizedRoomRoles() {
|
|
const roomRoleNameMap = {
|
|
HOMEOWNER: "homeowner",
|
|
ADMIN: "admin",
|
|
MEMBER: "member"
|
|
};
|
|
return this.roomRoles.map(item => ({
|
|
...item,
|
|
name: this.$t(
|
|
`pages.roomProfile.option.role.${roomRoleNameMap[item.value] || "member"}`
|
|
)
|
|
}));
|
|
},
|
|
localizedSysOperatingRoomUserEvent() {
|
|
const roomUserEventNameMap = {
|
|
SYS_PULL_BLACK_ROOM_USER: "blacklistUser",
|
|
SYS_REMOVE_ROOM_PULL_BLACK_USER: "removeFromBlacklist",
|
|
SYS_REMOVE_ROOM_USER: "kickOutRoom"
|
|
};
|
|
return this.sysOperatingRoomUserEvent.map(item => ({
|
|
...item,
|
|
name: this.$t(
|
|
`pages.roomProfile.option.event.${roomUserEventNameMap[item.value]}`
|
|
)
|
|
}));
|
|
},
|
|
localizedRules() {
|
|
return {
|
|
roomCover: [
|
|
{
|
|
required: true,
|
|
message: this.$t("pages.roomProfile.validation.uploadCover"),
|
|
trigger: "blur"
|
|
}
|
|
],
|
|
roomName: [
|
|
{
|
|
required: true,
|
|
message: this.$t("pages.roomProfile.validation.inputRoomName"),
|
|
trigger: "blur"
|
|
}
|
|
],
|
|
maxAdmin: [
|
|
{
|
|
required: true,
|
|
message: this.$t("pages.roomProfile.validation.inputMaxAdmin"),
|
|
trigger: "blur"
|
|
},
|
|
{
|
|
type: "number",
|
|
message: this.$t("pages.roomProfile.validation.mustBeNumber"),
|
|
trigger: "blur"
|
|
}
|
|
],
|
|
countryId: [
|
|
{
|
|
required: true,
|
|
message: this.$t("pages.roomProfile.validation.selectCountry"),
|
|
trigger: "blur"
|
|
}
|
|
]
|
|
};
|
|
}
|
|
},
|
|
created() {
|
|
const that = this;
|
|
const querySystem = this.permissionsSysOriginPlatforms[0];
|
|
if (!querySystem) {
|
|
return;
|
|
}
|
|
that.listQuery.sysOrigin = querySystem.value;
|
|
this.renderData();
|
|
},
|
|
methods: {
|
|
getRoomStatusText(event) {
|
|
const roomEventNameMap = {
|
|
AVAILABLE: "normal",
|
|
CLOSE: "closed",
|
|
WAITING_CONFIRMED: "waitingConfirmed",
|
|
ID_CHANGE: "idChanged"
|
|
};
|
|
return this.$t(
|
|
`pages.roomProfile.row.${roomEventNameMap[event] || "unknown"}`
|
|
);
|
|
},
|
|
getRoomStatusTagType(event) {
|
|
const roomEventTypeMap = {
|
|
AVAILABLE: "success",
|
|
ID_CHANGE: "info",
|
|
WAITING_CONFIRMED: "warning",
|
|
CLOSE: "danger"
|
|
};
|
|
return roomEventTypeMap[event] || "danger";
|
|
},
|
|
renderData(isClean) {
|
|
const that = this;
|
|
if (isClean === true) {
|
|
that.list = [];
|
|
that.listQuery.lastId = null;
|
|
}
|
|
that.listLoading = true;
|
|
pofileTable(that.listQuery)
|
|
.then(res => {
|
|
that.listLoading = false;
|
|
that.list = that.list.concat(res.body || []);
|
|
that.listNotData = !res.body || res.body.length <= 0;
|
|
if (that.list && that.list.length > 0) {
|
|
that.listQuery.lastId = that.list[that.list.length - 1].id;
|
|
}
|
|
})
|
|
.catch(er => {
|
|
console.error(er);
|
|
that.listLoading = false;
|
|
});
|
|
},
|
|
copyContent(conent) {
|
|
const that = this;
|
|
if (!conent) {
|
|
that.$opsMessage.fail();
|
|
return;
|
|
}
|
|
copyText(conent)
|
|
.then(res => {
|
|
that.$opsMessage.success();
|
|
})
|
|
.catch(er => {
|
|
that.$opsMessage.fail();
|
|
});
|
|
},
|
|
|
|
// 审批房间
|
|
editApproval(row, type) {
|
|
this.approveType = type;
|
|
this.approvalUserId = row.userId;
|
|
this.approvalRoomId = row.id;
|
|
if (type === "ROOM_NICKNAME") {
|
|
this.approvalContent = row.roomName;
|
|
this.textOptTitle = this.$t("pages.roomProfile.dialog.roomNicknameApproval");
|
|
}
|
|
if (type === "ROOM_AVATAR") {
|
|
this.approvalContent = row.roomCover;
|
|
this.textOptTitle = this.$t("pages.roomProfile.dialog.roomAvatarApproval");
|
|
}
|
|
if (type === "ROOM_NOTICE") {
|
|
this.textOptTitle = this.$t("pages.roomProfile.dialog.roomNoticeApproval");
|
|
this.approvalContent = row.roomDesc;
|
|
}
|
|
this.textOptVisible = true;
|
|
},
|
|
pass() {
|
|
const that = this;
|
|
that.listLoading = true;
|
|
approvalData({
|
|
approvalType: that.approveType,
|
|
approvalStatus: "PASS",
|
|
waitApprovalUser: that.getApprovalParams()
|
|
})
|
|
.then(res => {
|
|
that.listLoading = false;
|
|
that.textOptVisible = false;
|
|
that.$opsMessage.success();
|
|
that.renderData();
|
|
})
|
|
.catch(() => {
|
|
that.listLoading = false;
|
|
});
|
|
},
|
|
notpass() {
|
|
const that = this;
|
|
that.listLoading = true;
|
|
approvalData({
|
|
approvalType: that.approveType,
|
|
approvalStatus: "NOT_PASS",
|
|
waitApprovalUser: that.getApprovalParams()
|
|
})
|
|
.then(res => {
|
|
that.listLoading = false;
|
|
that.textOptVisible = false;
|
|
that.$opsMessage.success();
|
|
that.renderData();
|
|
})
|
|
.catch(() => {
|
|
that.listLoading = false;
|
|
});
|
|
},
|
|
getApprovalParams() {
|
|
const that = this;
|
|
const approvalParams = [
|
|
{
|
|
userId: that.approvalUserId,
|
|
contentId: that.approvalRoomId,
|
|
content: that.approvalContent
|
|
}
|
|
];
|
|
return approvalParams;
|
|
},
|
|
handleSearch() {
|
|
this.renderData(true);
|
|
},
|
|
renderDataSuccess() {
|
|
this.$message({
|
|
message: "Successful",
|
|
type: "success"
|
|
});
|
|
this.renderData();
|
|
},
|
|
|
|
// 移除/拉黑成员
|
|
handleRemoveOrPullBlack() {
|
|
this.textOptTitle3 = this.$t("pages.roomProfile.dialog.removeOrBlacklist");
|
|
this.formVisible3 = true;
|
|
this.form3 = {};
|
|
},
|
|
queryUserDetails(row) {
|
|
this.userDeatilsDrawer = true;
|
|
this.thatSelectedUserId = row.id;
|
|
},
|
|
|
|
// 权限变更
|
|
handleChangeRole() {
|
|
this.textOptTitle4 = this.$t("pages.roomProfile.dialog.roomPermissionChange");
|
|
this.formVisible4 = true;
|
|
this.form4 = {};
|
|
},
|
|
submitChangeRoleForm() {
|
|
const that = this;
|
|
that.submitLoading4 = true;
|
|
that.form4.sysOrigin = that.listQuery.sysOrigin;
|
|
changeRole(that.form4)
|
|
.then(res => {
|
|
if (res.status !== 200) {
|
|
that.$opsMessage.fail(res.errorMsg);
|
|
} else {
|
|
that.$opsMessage.success();
|
|
}
|
|
that.submitLoading4 = false;
|
|
that.formVisible4 = false;
|
|
this.form4 = getFormData3();
|
|
this.renderData();
|
|
})
|
|
.catch(er => {
|
|
that.submitLoading4 = false;
|
|
console.error(er);
|
|
this.$emit("fail");
|
|
});
|
|
},
|
|
httpRequest(file) {
|
|
const that = this;
|
|
that.uploadLoading = true;
|
|
this.$simpleUploadFlie(file)
|
|
.then(res => {
|
|
that.uploadLoading = false;
|
|
//console.log('2222', getAccessImgUrl(res.name))
|
|
that.form.roomCover = getAccessImgUrl(res.name);
|
|
// getAccessImgUrl(res.name).then((result) => {
|
|
// console.log('111111', result)
|
|
// that.form.roomCover = result.result
|
|
// })
|
|
})
|
|
.catch(er => {
|
|
that.uploadLoading = false;
|
|
});
|
|
},
|
|
submitForm() {
|
|
const that = this;
|
|
that.$refs.form.validate(valid => {
|
|
if (valid) {
|
|
that.submitLoading = true;
|
|
if (that.form.id) {
|
|
updateProfile(that.form)
|
|
.then(res => {
|
|
that.submitLoading = false;
|
|
that.formVisible = false;
|
|
that.updateProfileRow.roomCover = that.form.roomCover;
|
|
that.updateProfileRow.roomName = that.form.roomName;
|
|
that.updateProfileRow.roomDesc = that.form.roomDesc;
|
|
that.updateProfileRow.event = that.form.event;
|
|
that.updateProfileRow.maxAdmin = that.form.maxAdmin;
|
|
that.form = getFormData();
|
|
})
|
|
.catch(er => {
|
|
that.submitLoading = false;
|
|
that.$emit("fial", er);
|
|
});
|
|
return;
|
|
}
|
|
} else {
|
|
console.error("error submit!!");
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
|
|
// 房间资料详情
|
|
queryRoomDetails(roomId) {
|
|
this.roomDeatilsDrawerVisible = true;
|
|
this.roomId = roomId;
|
|
},
|
|
|
|
// 成员列表
|
|
queryRoomUserDetails(roomId) {
|
|
this.roomUserDeatilsDrawerVisible = true;
|
|
this.roomId = roomId;
|
|
},
|
|
handleClose() {
|
|
this.textOptVisible = false;
|
|
this.formVisible = false;
|
|
this.formVisible2 = false;
|
|
this.formVisible3 = false;
|
|
this.formVisible4 = false;
|
|
this.resetForm();
|
|
},
|
|
resetForm() {
|
|
this.form = getFormData();
|
|
this.form3 = getFormData3();
|
|
this.form4 = getFormData4();
|
|
},
|
|
submitRemoveOrPullBlackForm() {
|
|
const that = this;
|
|
that.submitLoading3 = true;
|
|
that.form3.sysOrigin = that.listQuery.sysOrigin;
|
|
removeOrPullBlackRoomUser(that.form3)
|
|
.then(res => {
|
|
that.submitLoading3 = false;
|
|
that.formVisible3 = false;
|
|
that.resetForm();
|
|
that.renderData(true);
|
|
})
|
|
.catch(er => {
|
|
that.submitLoading3 = false;
|
|
console.error(er);
|
|
this.$emit("fail");
|
|
});
|
|
},
|
|
|
|
// 编辑资料
|
|
handleUpdate(row) {
|
|
this.formVisible = true;
|
|
this.updateProfileRow = row;
|
|
this.form = Object.assign(this.form, row);
|
|
// 强制转换为 number 类型
|
|
this.form.maxAdmin = Number(row.setting.maxAdmin) || 0;
|
|
},
|
|
|
|
// 访客记录
|
|
queryRoomVisitorLog(roomId) {
|
|
this.roomVisitorLogVisible = true;
|
|
this.roomId = roomId;
|
|
},
|
|
|
|
// 活跃指标
|
|
clickRoomActive(row) {
|
|
this.roomId = row.id;
|
|
this.roomActiveVisible = true;
|
|
},
|
|
|
|
// 操作日志
|
|
clickQueryRolesChangeLog(row) {
|
|
this.roomId = row.id;
|
|
this.roomOperationLogVisible = true;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.load-more {
|
|
padding: 10px 0px;
|
|
}
|
|
.room-profile {
|
|
text-align: left;
|
|
.avatar {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
}
|
|
.info {
|
|
padding: 0px 5px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|