elink-star
/
epmet-apartment-pc
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

居住评价、审核弹框页面搭建

wyx
wangyx 5 months ago
parent
4adaeaf7d0
commit
cb3e31e9c5
3 changed files with 1723 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 0
      src/api/residence/checkout.js
  2. 850
      src/views/evaluation/index.vue
  3. 873
      src/views/records/roomview/index.vue

0
src/api/residence/checkout.js
View File

850
src/views/evaluation/index.vue
View File

@ -0,0 +1,850 @@
<template>
<div class="app-container">
<el-row :gutter="20">
<!--居住评价数据-->
<el-col :span="24" :xs="24">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<!-- 小区公寓 下拉选择框-->
<el-form-item label="小区公寓" prop="community">
<el-select
v-model="queryParams.community"
placeholder="请选择小区公寓"
style="width: 220px"
@keyup.enter.native="handleQuery"
>
<el-option
v-for="item in communityOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<!-- 楼栋 -->
<el-form-item label="楼栋" prop="building">
<el-select
v-model="queryParams.building"
placeholder="请选择楼栋"
style="width: 220px"
@keyup.enter.native="handleQuery"
>
<el-option
v-for="item in buildingOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<!-- 单元 -->
<el-form-item label="单元" prop="unit">
<el-select
v-model="queryParams.unit"
placeholder="请选择单元"
style="width: 220px"
@keyup.enter.native="handleQuery"
>
<el-option
v-for="item in unitOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<!-- 房屋 -->
<el-form-item label="房屋" prop="house">
<el-select
v-model="queryParams.house"
placeholder="请选择房屋"
style="width: 220px"
@keyup.enter.native="handleQuery"
>
<el-option
v-for="item in houseOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<!-- 房间 -->
<el-form-item label="房间" prop="room">
<el-select
v-model="queryParams.room"
placeholder="请选择房间"
style="width: 220px"
@keyup.enter.native="handleQuery"
>
<el-option
v-for="item in roomOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="评价类型" prop="evaluation">
<el-select
v-model="queryParams.evaluation"
placeholder="请选择入住评价"
style="width: 220px"
@keyup.enter.native="handleQuery"
>
<el-option
v-for="item in evaluationOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<!-- <el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:user:add']"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:user:edit']"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:user:remove']"
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-upload2"
size="mini"
@click="handleImport"
v-hasPermi="['system:user:import']"
>导入</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:user:export']"
>导出</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
:columns="columns"
></right-toolbar>
</el-row> -->
<el-table
v-loading="loading"
:data="userList"
@selection-change="handleSelectionChange"
>
<!-- <el-table-column type="selection" width="50" align="center" /> -->
<el-table-column
label="序号"
align="center"
key="buildId"
prop="buildId"
v-if="columns[0].visible"
/>
<el-table-column
label="小区/公寓"
align="center"
key="buildName"
prop="buildName"
v-if="columns[1].visible"
:show-overflow-tooltip="true"
/>
<!-- 楼号 -->
<el-table-column
label="楼号"
align="center"
key="floor"
prop="floor"
v-if="columns[2].visible"
/>
<!-- 单元 -->
<el-table-column
label="单元"
align="center"
key="unit"
prop="unit"
v-if="columns[3].visible"
/>
<!-- 门牌号 -->
<el-table-column
label="房屋"
align="center"
key="doorplate"
prop="doorplate"
v-if="columns[4].visible"
/>
<!-- 房间 -->
<el-table-column
label="房间"
align="center"
key="room"
prop="room"
v-if="columns[5].visible"
/>
<!-- 入住人 -->
<el-table-column
label="居住人"
align="center"
key="name"
prop="name"
v-if="columns[6].visible"
/>
<!-- 性别 -->
<el-table-column
label="性别"
align="center"
key="sex"
prop="sex"
v-if="columns[7].visible"
:formatter="formatSex"
/>
<el-table-column
label="手机号"
align="center"
key="phonenumber"
prop="phonenumber"
v-if="columns[8].visible"
/>
<!-- 评价类型 -->
<el-table-column
label="评价类型"
align="center"
key="evaluation"
prop="evaluation"
v-if="columns[9].visible"
:formatter="formatEvaluation"
/>
<el-table-column
label="操作"
align="center"
width="160"
class-name="small-padding fixed-width"
fixed="right"
>
<template slot-scope="scope" v-if="scope.row.buildId !== 1">
<!-- 审核 -->
<el-button
size="mini"
type="text"
icon="el-icon-check"
@click="handleCheck(scope.row)"
v-hasPermi="['system:user:check']"
>审核</el-button
>
<!-- 查看 -->
<el-button
size="mini"
type="text"
icon="el-icon-zoom-in"
@click="handleView(scope.row)"
v-hasPermi="['system:user:view']"
>查看</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-col>
</el-row>
<!-- 审核查看对话框 -->
<el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-descriptions title="">
<el-descriptions-item label="所在区域"
>青岛市/李沧区</el-descriptions-item
>
<el-descriptions-item label="小区/公寓"
>青大学校园</el-descriptions-item
>
<el-descriptions-item label="楼号">1号楼</el-descriptions-item>
<el-descriptions-item label="单元">1单元</el-descriptions-item>
<el-descriptions-item label="房屋">101</el-descriptions-item>
<el-descriptions-item label="房间">北卧</el-descriptions-item>
<el-descriptions-item label="居住人">王女士</el-descriptions-item>
<el-descriptions-item label="性别">女</el-descriptions-item>
<el-descriptions-item label="手机号"
>18888888888</el-descriptions-item
>
</el-descriptions>
<el-descriptions column="3">
<el-descriptions-item label="评价类型">
<el-tag size="small">满意</el-tag>
</el-descriptions-item>
<el-descriptions-item label="评价日期"
>2023-05-10</el-descriptions-item
>
</el-descriptions>
<el-descriptions column="1">
<el-descriptions-item label="评价内容">
1. 居住环境舒适，设施齐全，交通方便。 2.
房间布局合理，空间利用率高。 3. 服务态度好，工作人员耐心。
</el-descriptions-item>
<el-descriptions-item label="图片/视频">
<el-image
style="width: 100px; height: 100px"
:src="form.avatar"
:preview-src-list="[form.avatar]"
></el-image>
</el-descriptions-item>
<!-- 发布方式 -->
<el-descriptions-item label="发布方式"> 匿名 </el-descriptions-item>
<!-- 审核结果 -->
<el-descriptions-item label="审核结果">
<el-radio-group v-model="form.auditResult">
<el-radio label="pass">通过</el-radio>
<el-radio label="fail">不通过</el-radio>
</el-radio-group>
</el-descriptions-item>
<el-descriptions-item label="不通过原因">
<el-input v-model="form.auditOpinion" type="textarea" placeholder="请输入不通过原因" />
</el-descriptions-item>
</el-descriptions>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 公寓导入对话框 -->
<el-dialog
:title="upload.title"
:visible.sync="upload.open"
width="400px"
append-to-body
>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport" />
是否更新已经存在的公寓数据
</div>
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link
type="primary"
:underline="false"
style="font-size: 12px; vertical-align: baseline"
@click="importTemplate"
>下载模板</el-link
>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listUser,
getUser,
delUser,
addUser,
updateUser,
resetUserPwd,
changeUserStatus,
deptTreeSelect,
} from "@/api/system/user";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "User",
dicts: ["sys_normal_disable", "sys_user_sex"],
components: { Treeselect },
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 公寓表格数据
userList: null,
// 弹出层标题
title: "",
// 公寓树选项
deptOptions: undefined,
// 是否显示弹出层
open: false,
// 公寓名称
deptName: undefined,
// 默认密码
initPassword: undefined,
// 日期范围
dateRange: [],
// 岗位选项
postOptions: [],
// 角色选项
roleOptions: [],
// 标签
tagsList: ["停车场", "商业街", "写字楼", "公寓", "酒店", "学校", "政府"],
// 表单参数
form: {
tags: [],
},
defaultProps: {
children: "children",
label: "label",
},
// 公寓导入参数
upload: {
// 是否显示弹出层（公寓导入）
open: false,
// 弹出层标题（公寓导入）
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的公寓数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/system/user/importData",
},
// 楼栋
buildingOptions: [
{ value: "1", label: "1号楼" },
{ value: "2", label: "2号楼" },
],
// 单元
unitOptions: [
{ value: "1", label: "1单元" },
{ value: "2", label: "2单元" },
{ value: "3", label: "3单元" },
],
// 入住状态
statusOptions: [
{ value: "0", label: "未入住" },
{ value: "1", label: "入住中" },
{ value: "2", label: "已退房" },
],
// 入住评价
evaluationOptions: [
{ value: "0", label: "未评价" },
{ value: "1", label: "好评" },
{ value: "2", label: "中评" },
{ value: "3", label: "差评" },
],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
buildName: undefined,
phonenumber: undefined,
status: undefined,
deptId: undefined,
},
// 列信息
columns: [
{ key: 0, label: `序号`, visible: true },
{ key: 1, label: `所在区域`, visible: true },
{ key: 2, label: `小区/公寓`, visible: true },
{ key: 3, label: `楼号`, visible: true },
{ key: 4, label: `单元`, visible: true },
{ key: 5, label: `房屋`, visible: true },
{ key: 6, label: `房间`, visible: true },
{ key: 7, label: `居住人`, visible: true },
{ key: 8, label: `性别`, visible: true },
{ key: 9, label: `居住状态`, visible: true },
{ key: 10, label: `入住时间`, visible: true },
{ key: 11, label: `退房时间`, visible: true },
{ key: 12, label: `入住评价`, visible: true },
{ key: 13, label: `操作`, visible: true },
],
// 表单校验
rules: {
buildName: [
{ required: true, message: "公寓名称不能为空", trigger: "blur" },
{
min: 2,
max: 20,
message: "公寓名称长度必须介于 2 和 20 之间",
trigger: "blur",
},
],
nickName: [
{ required: true, message: "公寓昵称不能为空", trigger: "blur" },
],
password: [
{ required: true, message: "公寓密码不能为空", trigger: "blur" },
{
min: 5,
max: 20,
message: "公寓密码长度必须介于 5 和 20 之间",
trigger: "blur",
},
{
pattern: /^[^<>"'|\\]+$/,
message: "不能包含非法字符：< > \" ' \\\ |",
trigger: "blur",
},
],
email: [
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"],
},
],
phonenumber: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
},
};
},
watch: {
// 根据名称筛选公寓树
deptName(val) {
this.$refs.tree.filter(val);
},
},
created() {
this.getList();
this.getDeptTree();
this.getConfigKey("sys.user.initPassword").then((response) => {
this.initPassword = response.msg;
});
},
methods: {
/** 查询公寓列表 */
getList() {
this.loading = true;
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
(response) => {
this.userList = response.rows;
this.total = response.total;
this.loading = false;
}
);
},
/** 查询公寓下拉树结构 */
getDeptTree() {
deptTreeSelect().then((response) => {
this.deptOptions = response.data;
});
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 节点单击事件
handleNodeClick(data) {
this.queryParams.deptId = data.id;
this.handleQuery();
},
// 公寓状态修改
handleStatusChange(row) {
let text = row.status === "0" ? "启用" : "停用";
this.$modal
.confirm('确认要"' + text + '""' + row.buildName + '"公寓吗？')
.then(function () {
return changeUserStatus(row.buildId, row.status);
})
.then(() => {
this.$modal.msgSuccess(text + "成功");
})
.catch(function () {
row.status = row.status === "0" ? "1" : "0";
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
buildId: undefined,
deptId: undefined,
buildName: undefined,
nickName: undefined,
password: undefined,
phonenumber: undefined,
email: undefined,
sex: undefined,
status: "0",
remark: undefined,
postIds: [],
roleIds: [],
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.queryParams.deptId = undefined;
this.$refs.tree.setCurrentKey(null);
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.buildId);
this.single = selection.length != 1;
this.multiple = !selection.length;
},
// 更多操作触发
handleCommand(command, row) {
switch (command) {
case "handleResetPwd":
this.handleResetPwd(row);
break;
case "handleAuthRole":
this.handleAuthRole(row);
break;
default:
break;
}
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
getUser().then((response) => {
this.postOptions = response.posts;
this.roleOptions = response.roles;
this.open = true;
this.title = "添加公寓";
this.form.password = this.initPassword;
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const buildId = row.buildId || this.ids;
getUser(buildId).then((response) => {
this.form = response.data;
this.postOptions = response.posts;
this.roleOptions = response.roles;
this.$set(this.form, "postIds", response.postIds);
this.$set(this.form, "roleIds", response.roleIds);
this.open = true;
this.title = "修改公寓";
this.form.password = "";
});
},
// 审核按钮操作
handleCheck(row) {
this.reset();
const buildId = row.buildId || this.ids;
this.title = "审核";
this.open = true;
},
/** 重置密码按钮操作 */
handleResetPwd(row) {
this.$prompt('请输入"' + row.buildName + '"的新密码', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnClickModal: false,
inputPattern: /^.{5,20}$/,
inputErrorMessage: "公寓密码长度必须介于 5 和 20 之间",
inputValidator: (value) => {
if (/<|>|"|'|\||\\/.test(value)) {
return "不能包含非法字符：< > \" ' \\\ |";
}
},
})
.then(({ value }) => {
resetUserPwd(row.buildId, value).then((response) => {
this.$modal.msgSuccess("修改成功，新密码是：" + value);
});
})
.catch(() => {});
},
/** 分配角色操作 */
handleAuthRole: function (row) {
const buildId = row.buildId;
this.$router.push("/system/user-auth/role/" + buildId);
},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.buildId != undefined) {
updateUser(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addUser(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const buildIds = row.buildId || this.ids;
this.$modal
.confirm('是否确认删除公寓编号为"' + buildIds + '"的数据项？')
.then(function () {
return delUser(buildIds);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"system/user/export",
{
...this.queryParams,
},
`user_${new Date().getTime()}.xlsx`
);
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = "公寓导入";
this.upload.open = true;
},
/** 下载模板操作 */
importTemplate() {
this.download(
"system/user/importTemplate",
{},
`user_template_${new Date().getTime()}.xlsx`
);
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert(
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
response.msg +
"</div>",
"导入结果",
{ dangerouslyUseHTMLString: true }
);
this.getList();
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
},
};
</script>

873
src/views/records/roomview/index.vue
View File

@ -0,0 +1,873 @@
<template>
<div class="app-container">
<el-row :gutter="20">
<!--记录数据-->
<el-col :span="24" :xs="24">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="所属区划" prop="area">
<treeselect
v-model="queryParams.deptId"
:options="deptOptions"
:show-count="true"
placeholder="请选择所属区划"
style="width: 220px"
/>
</el-form-item>
<!-- 所属公寓-->
<el-form-item label="所属公寓" prop="community">
<el-select
v-model="queryParams.community"
placeholder="请选择所属公寓"
style="width: 220px"
@keyup.enter.native="handleQuery"
>
<el-option
v-for="item in communityOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="房屋名称" prop="houseName">
<el-input
v-model="queryParams.houseName"
placeholder="请输入房屋名称"
clearable
style="width: 220px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="预约人姓名" prop="name" label-width="90px">
<el-input
v-model="queryParams.name"
placeholder="请输入姓名"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item
label="预约人电话"
prop="phonenumber"
label-width="90px"
>
<el-input
v-model="queryParams.phonenumber"
placeholder="请输入预约人电话"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<!-- 看房状态 -->
<el-form-item label="看房状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="请选择看房状态"
style="width: 220px"
@keyup.enter.native="handleQuery"
>
<el-option
v-for="item in statusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<!-- <el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:user:add']"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:user:edit']"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:user:remove']"
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-upload2"
size="mini"
@click="handleImport"
v-hasPermi="['system:user:import']"
>导入</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:user:export']"
>导出</el-button
>
</el-col> -->
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
:columns="columns"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="userList"
@selection-change="handleSelectionChange"
>
<!-- <el-table-column type="selection" width="50" align="center" /> -->
<el-table-column
label="序号"
align="center"
key="buildId"
prop="buildId"
v-if="columns[0].visible"
/>
<!-- 所在区域 -->
<el-table-column
label="所属区划"
align="center"
key="address"
prop="address"
v-if="columns[1].visible"
:show-overflow-tooltip="true"
/>
<el-table-column
label="所属公寓"
align="center"
key="buildName"
prop="buildName"
v-if="columns[2].visible"
:show-overflow-tooltip="true"
/>
<!-- 楼号 -->
<el-table-column
label="房屋名称"
align="center"
key="floor"
prop="floor"
v-if="columns[3].visible"
/>
<!-- 入住人 -->
<el-table-column
label="预约人姓名"
align="center"
key="name"
prop="name"
v-if="columns[4].visible"
/>
<el-table-column
label="预约人电话"
align="center"
key="phonenumber"
prop="phonenumber"
v-if="columns[5].visible"
/>
<!-- 预约人证件号 -->
<el-table-column
label="预约人证件号"
align="center"
key="idCard"
prop="idCard"
v-if="columns[6].visible"
/>
<!-- 预约时间 -->
<el-table-column
label="预约时间"
align="center"
key="createTime"
prop="createTime"
v-if="columns[7].visible"
:formatter="formatDate"
/>
<!-- 审核结果 -->
<el-table-column
label="审核结果"
align="center"
key="status"
prop="status"
v-if="columns[8].visible"
:formatter="formatStatus"
/>
<el-table-column
label="操作"
align="center"
width="160"
class-name="small-padding fixed-width"
fixed="right"
>
<template slot-scope="scope" v-if="scope.row.buildId !== 1">
<!-- 查看 -->
<el-button
type="text"
size="mini"
icon="el-icon-view"
@click="handleView(scope.row)"
v-hasPermi="['system:user:query']"
>
查看
</el-button>
<!-- degnji -->
<el-button
type="text"
size="mini"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:user:edit']"
>
登记
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-col>
</el-row>
<!-- 添加或修改公寓配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="所在区域" prop="deptId">
<treeselect
v-model="form.deptId"
:options="deptOptions"
:show-count="true"
placeholder="请选择所在区域"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="公寓名称" prop="nickName">
<el-input
v-model="form.nickName"
placeholder="请输入公寓名称"
maxlength="30"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
label="公寓联系电话"
prop="phonenumber"
label-width="100px"
>
<el-input
v-model="form.phonenumber"
placeholder="请输入联系电话，多个电话用‘、’隔开"
maxlength="36"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="关联物业" prop="email">
<el-select
v-model="form.postIds"
multiple
placeholder="请选择关联物业"
>
<el-option
v-for="item in postOptions"
:key="item.postId"
:label="item.postName"
:value="item.postId"
:disabled="item.status == 1"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<!-- 标签 多选框 -->
<el-col :span="24">
<el-form-item label="标签" prop="tags">
<el-checkbox
v-for="tag in tagsList"
:label="tag"
:key="tag"
v-model="form.tags"
>{{ tag }}</el-checkbox
>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="详细介绍">
<el-input
v-model="form.remark"
type="textarea"
placeholder="请输入内容"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<!-- 上传图片 -->
<el-col :span="24">
<el-form-item label="上传图片">
<el-upload
action="#"
:on-change="handleAvatarSuccess"
:on-remove="handleAvatarRemove"
:auto-upload="false"
:file-list="avatarList"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:limit="3"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row>
<!-- 地图 -->
<!-- 公寓详细地址及周边设施 -->
<el-col :span="24"> </el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 公寓导入对话框 -->
<el-dialog
:title="upload.title"
:visible.sync="upload.open"
width="400px"
append-to-body
>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport" />
是否更新已经存在的公寓数据
</div>
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link
type="primary"
:underline="false"
style="font-size: 12px; vertical-align: baseline"
@click="importTemplate"
>下载模板</el-link
>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listUser,
getUser,
delUser,
addUser,
updateUser,
resetUserPwd,
changeUserStatus,
deptTreeSelect,
} from "@/api/system/user";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "User",
dicts: ["sys_normal_disable", "sys_user_sex"],
components: { Treeselect },
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 公寓表格数据
userList: null,
// 弹出层标题
title: "",
// 公寓树选项
deptOptions: undefined,
// 是否显示弹出层
open: false,
// 公寓名称
deptName: undefined,
// 默认密码
initPassword: undefined,
// 日期范围
dateRange: [],
// 岗位选项
postOptions: [],
// 角色选项
roleOptions: [],
// 标签
tagsList: ["停车场", "商业街", "写字楼", "公寓", "酒店", "学校", "政府"],
// 表单参数
form: {
tags: [],
},
defaultProps: {
children: "children",
label: "label",
},
// 公寓导入参数
upload: {
// 是否显示弹出层（公寓导入）
open: false,
// 弹出层标题（公寓导入）
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的公寓数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/system/user/importData",
},
// 楼栋
buildingOptions: [
{ value: "1", label: "1号楼" },
{ value: "2", label: "2号楼" },
],
// 单元
unitOptions: [
{ value: "1", label: "1单元" },
{ value: "2", label: "2单元" },
{ value: "3", label: "3单元" },
],
// 入住状态
statusOptions: [
{ value: "0", label: "未入住" },
{ value: "1", label: "入住中" },
{ value: "2", label: "已退房" },
],
// 入住评价
evaluationOptions: [
{ value: "0", label: "未评价" },
{ value: "1", label: "好评" },
{ value: "2", label: "中评" },
{ value: "3", label: "差评" },
],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
buildName: undefined,
phonenumber: undefined,
status: undefined,
deptId: undefined,
},
// 列信息
columns: [
{ key: 0, label: `序号`, visible: true },
{ key: 1, label: `所在区域`, visible: true },
{ key: 2, label: `小区/公寓`, visible: true },
{ key: 3, label: `楼号`, visible: true },
{ key: 4, label: `单元`, visible: true },
{ key: 5, label: `房屋`, visible: true },
{ key: 6, label: `房间`, visible: true },
{ key: 7, label: `居住人`, visible: true },
{ key: 8, label: `性别`, visible: true },
{ key: 9, label: `居住状态`, visible: true },
{ key: 10, label: `入住时间`, visible: true },
{ key: 11, label: `退房时间`, visible: true },
{ key: 12, label: `入住评价`, visible: true },
{ key: 13, label: `操作`, visible: true },
],
// 表单校验
rules: {
buildName: [
{ required: true, message: "公寓名称不能为空", trigger: "blur" },
{
min: 2,
max: 20,
message: "公寓名称长度必须介于 2 和 20 之间",
trigger: "blur",
},
],
nickName: [
{ required: true, message: "公寓昵称不能为空", trigger: "blur" },
],
password: [
{ required: true, message: "公寓密码不能为空", trigger: "blur" },
{
min: 5,
max: 20,
message: "公寓密码长度必须介于 5 和 20 之间",
trigger: "blur",
},
{
pattern: /^[^<>"'|\\]+$/,
message: "不能包含非法字符：< > \" ' \\\ |",
trigger: "blur",
},
],
email: [
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"],
},
],
phonenumber: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
},
};
},
watch: {
// 根据名称筛选公寓树
deptName(val) {
this.$refs.tree.filter(val);
},
},
created() {
this.getList();
this.getDeptTree();
this.getConfigKey("sys.user.initPassword").then((response) => {
this.initPassword = response.msg;
});
},
methods: {
/** 查询公寓列表 */
getList() {
this.loading = true;
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
(response) => {
this.userList = response.rows;
this.total = response.total;
this.loading = false;
}
);
},
/** 查询公寓下拉树结构 */
getDeptTree() {
deptTreeSelect().then((response) => {
this.deptOptions = response.data;
});
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 节点单击事件
handleNodeClick(data) {
this.queryParams.deptId = data.id;
this.handleQuery();
},
// 公寓状态修改
handleStatusChange(row) {
let text = row.status === "0" ? "启用" : "停用";
this.$modal
.confirm('确认要"' + text + '""' + row.buildName + '"公寓吗？')
.then(function () {
return changeUserStatus(row.buildId, row.status);
})
.then(() => {
this.$modal.msgSuccess(text + "成功");
})
.catch(function () {
row.status = row.status === "0" ? "1" : "0";
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
buildId: undefined,
deptId: undefined,
buildName: undefined,
nickName: undefined,
password: undefined,
phonenumber: undefined,
email: undefined,
sex: undefined,
status: "0",
remark: undefined,
postIds: [],
roleIds: [],
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.queryParams.deptId = undefined;
this.$refs.tree.setCurrentKey(null);
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.buildId);
this.single = selection.length != 1;
this.multiple = !selection.length;
},
// 更多操作触发
handleCommand(command, row) {
switch (command) {
case "handleResetPwd":
this.handleResetPwd(row);
break;
case "handleAuthRole":
this.handleAuthRole(row);
break;
default:
break;
}
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
getUser().then((response) => {
this.postOptions = response.posts;
this.roleOptions = response.roles;
this.open = true;
this.title = "添加公寓";
this.form.password = this.initPassword;
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const buildId = row.buildId || this.ids;
getUser(buildId).then((response) => {
this.form = response.data;
this.postOptions = response.posts;
this.roleOptions = response.roles;
this.$set(this.form, "postIds", response.postIds);
this.$set(this.form, "roleIds", response.roleIds);
this.open = true;
this.title = "修改公寓";
this.form.password = "";
});
},
/** 重置密码按钮操作 */
handleResetPwd(row) {
this.$prompt('请输入"' + row.buildName + '"的新密码', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnClickModal: false,
inputPattern: /^.{5,20}$/,
inputErrorMessage: "公寓密码长度必须介于 5 和 20 之间",
inputValidator: (value) => {
if (/<|>|"|'|\||\\/.test(value)) {
return "不能包含非法字符：< > \" ' \\\ |";
}
},
})
.then(({ value }) => {
resetUserPwd(row.buildId, value).then((response) => {
this.$modal.msgSuccess("修改成功，新密码是：" + value);
});
})
.catch(() => {});
},
/** 分配角色操作 */
handleAuthRole: function (row) {
const buildId = row.buildId;
this.$router.push("/system/user-auth/role/" + buildId);
},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.buildId != undefined) {
updateUser(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addUser(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const buildIds = row.buildId || this.ids;
this.$modal
.confirm('是否确认删除公寓编号为"' + buildIds + '"的数据项？')
.then(function () {
return delUser(buildIds);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"system/user/export",
{
...this.queryParams,
},
`user_${new Date().getTime()}.xlsx`
);
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = "公寓导入";
this.upload.open = true;
},
/** 下载模板操作 */
importTemplate() {
this.download(
"system/user/importTemplate",
{},
`user_template_${new Date().getTime()}.xlsx`
);
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert(
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
response.msg +
"</div>",
"导入结果",
{ dangerouslyUseHTMLString: true }
);
this.getList();
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
handleCheckboxChange(checkedType) {
if (checkedType === "isPass") {
if (this.form.isPass) {
this.form.isFail = false;
}
} else if (checkedType === "isFail") {
if (this.form.isFail) {
this.form.isPass = false;
}
}
},
},
};
</script>
Write Preview
Loading…
Cancel
Save