<template>
<div class="app-container">
<el-row :gutter="20">
<!--部门数据-->
<el-col :span="4" :xs="24">
<div class="head-container">
<el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
ref="tree"
default-expand-all
highlight-current
@node-click="handleNodeClick"
/>
</div>
</el-col>
<el-col :span="20" :xs="24">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="用户姓名" prop="nickName">
<el-input
v-model="queryParams.nickName"
placeholder="请输入用户姓名"
clearable
style="width: 150px"
@keyup.enter.native="handleQuery"
/>
</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"
>绑定新用户</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
>解绑</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<!-- 绑定用户信息表格 -->
<el-table
v-loading="loading"
:data="userInfoList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="用户名称" align="center" prop="nickName" />
<el-table-column label="用户工号" align="center" prop="jobNumber" />
<el-table-column label="工号" align="center" prop="jobNumber" />
<el-table-column label="角色" align="center" prop="roles">
<template slot-scope="scope">
<span v-for="(val, index) in scope.row.roles" :key="index">
{{ val.roleName }}
</span>
</template>
</el-table-column>
<el-table-column label="IC卡卡号" align="center" prop="cardkey" />
<el-table-column label="车牌号" align="center" prop="keyBusNumber" />
<el-table-column label="部门" align="center" prop="dept.deptName" />
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>
解除绑定
</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="未绑定用户列表"
:visible.sync="userDialogVisible"
v-if="userDialogVisible"
width="60%"
append-to-body
>
<!-- 传递给子组件的值 -->
<unboundUser :msgId="msgId" ref="unboundUserRef" @handleSaveSuccess="getList"></unboundUser>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="banding()">绑定</el-button>
<el-button @click="cancel()">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { deptTreeSelect } from "@/api/system/user";
import { boundUserInfo, removeBoundUser } from "@/api/driverMsg/driverMsg";
import unboundUser from "./unboundUserInfo";
export default {
name: "boundUser",
props: ["msgId"],
components: { unboundUser },
data() {
return {
deptOptions: undefined,
defaultProps: {
children: "children",
label: "label",
},
loading: true,
ids: [],
single: true,
multiple: true,
showSearch: true,
total: 0,
userInfoList: [],
queryParams: {
pageNum: 1,
pageSize: 10,
nickName: undefined,
deptId: undefined,
msgId:null
},
userDialogVisible: false,
removeParams: {
msgId:null,
ids: [],
},
};
},
created() {
this.getList();
this.getDeptTree();
},
methods: {
getDeptTree() {
deptTreeSelect().then((response) => {
this.deptOptions = response.data;
});
},
handleNodeClick(data) {
this.queryParams.deptId = data.id;
this.getList();
},
getList() {
this.loading = true;
this.queryParams.msgId = this.msgId
boundUserInfo(this.queryParams).then((response) => {
this.userInfoList = response.rows;
this.total = response.total;
this.loading = false;
});
},
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.userId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
banding(){
this.$refs.unboundUserRef.handleAdd();
},
cancel() {
this.userDialogVisible = false;
this.getList();
},
handleAdd() {
this.userDialogVisible = true;
},
handleDelete(row) {
if (row.userId != null) {
this.ids = [];
this.ids.push(row.userId);
}
this.removeParams.ids = this.ids;
this.removeParams.msgId = this.msgId;
const removeParams = this.removeParams;
this.$modal
.confirm("是否确认解绑勾选用户?")
.then(function () {
return removeBoundUser(removeParams);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("解绑成功");
})
.catch(() => {});
},
},
};
</script>
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="消息内容" prop="message">
<el-input
v-model="queryParams.message"
placeholder="请输入消息内容"
clearable
style="width: 150px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="设备" prop="deviceId">
<el-select v-model="queryParams.deviceId" class="filter-item" clearable>
<el-option v-for="item in deviceList" :key="item.id" :label="item.deviceNumber" :value="item.id" />
</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="['driverMsg:driverMsg: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="['driverMsg:driverMsg: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="['driverMsg:driverMsg:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['driverMsg:driverMsg:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="driverMsgList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="驾驶员消息内容" align="center" prop="message" width="280"/>
<el-table-column label="设备" align="center" prop="deviceNumber" width="180"/>
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="消息生效时间" align="center" prop="startTime" width="200">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="消息失效时间" align="center" prop="endTime" width="200">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="已下发驾驶员" align="center">
<template slot-scope="scope">
<el-button
type="primary"
size="small"
@click="openUserInforDialog(scope.row)"
>查看</el-button
>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['driverMsg:driverMsg:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['driverMsg:driverMsg:remove']"
>删除</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-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="消息内容" prop="message">
<el-input v-model="form.message" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="设备" prop="deviceId">
<el-select v-model="form.deviceId" placeholder="请选择设备">
<el-option v-for="dict in deviceList"
:key="dict.deviceNumber"
:label="dict.deviceNumber"
:value="dict.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="消息生效时间" prop="startTime">
<el-date-picker clearable
v-model="form.startTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择消息生效时间">
</el-date-picker>
</el-form-item>
<el-form-item label="消息失效时间" prop="endTime">
<el-date-picker clearable
v-model="form.endTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择消息失效时间">
</el-date-picker>
</el-form-item>
</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="已绑定用户列表"
:visible.sync="userDialogVisible"
v-if="userDialogVisible"
width="60%"
append-to-body
>
<!-- 传递给子组件的值 -->
<!-- <boundUser :deviceNumber="deviceNumber"></boundUser> -->
<boundUser :msgId="msgId" :deviceId="deviceId"></boundUser>
</el-dialog>
</div>
</template>
<script>
import { listDriverMsg, getDriverMsg, delDriverMsg, addDriverMsg, updateDriverMsg,delDriverMsgAll } from "@/api/driverMsg/driverMsg";
import { listInfoD } from "@/api/system/device";
import boundUser from "./boundUserInfo";
export default {
name: "DriverMsg",
components: { boundUser },
data() {
return {
loading: true,
ids: [],
single: true,
multiple: true,
showSearch: true,
total: 0,
driverMsgList: [],
title: "",
open: false,
queryParams: {
pageNum: 1,
pageSize: 10,
message: null,
deviceId: null,
startTime: null,
endTime: null
},
deviceList: [],
form: {},
rules: {
deviceId: [
{ required: true, message: "设备ID不能为空", trigger: "blur" }
],
createTime: [
{ required: true, message: "消息的创建时间不能为空", trigger: "blur" }
],
},
userDialogVisible: false,
deviceId: null,
msgId:null
};
},
created() {
this.getList();
this.getDeviceList();
},
methods: {
getList() {
this.loading = true;
listDriverMsg(this.queryParams).then(response => {
this.driverMsgList = response.rows;
this.total = response.total;
this.loading = false;
});
},
getDeviceList() {
listInfoD().then(res => {
this.deviceList = res.data;
})
},
cancel() {
this.open = false;
this.reset();
},
reset() {
this.form = {
id: null,
message: null,
deviceId: null,
createTime: null,
updateTime: null,
startTime: null,
endTime: null
};
this.resetForm("form");
},
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
handleAdd() {
this.reset();
this.open = true;
this.title = "添加驾驶员消息";
},
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getDriverMsg(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改驾驶员消息";
});
},
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateDriverMsg(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addDriverMsg(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除驾驶员消息编号为"' + ids + '"的数据项?').then(function() {
return delDriverMsg(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
handleExport() {
this.download('driverMsg/driverMsg/export', {
...this.queryParams
}, `driverMsg_${new Date().getTime()}.xlsx`)
},
openUserInforDialog(row) {
this.userDialogVisible = true;
this.msgId = row.id;
this.deviceId = row.deviceId;
},
}
};
</script>
<template>
<div class="app-container">
<el-row :gutter="20">
<!--部门数据-->
<el-col :span="4" :xs="24">
<div class="head-container">
<el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
ref="tree"
default-expand-all
highlight-current
@node-click="handleNodeClick"
/>
</div>
</el-col>
<el-col :span="20" :xs="24">
<!--工具栏-->
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="用户姓名" prop="nickName">
<el-input
v-model="queryParams.nickName"
placeholder="请输入用户姓名"
clearable
style="width: 150px"
@keyup.enter.native="handleQuery"
/>
</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:info:add']"
>绑定</el-button
>
</el-col> -->
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<!-- 绑定用户信息表格 -->
<el-table
v-loading="loading"
:data="userInfoList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="用户名称" align="center" prop="nickName" />
<el-table-column label="用户工号" align="center" prop="jobNumber" />
<el-table-column label="工号" align="center" prop="jobNumber" />
<el-table-column label="角色" align="center" prop="roles">
<template slot-scope="scope">
<span v-for="(val, index) in scope.row.roles" :key="index">
{{ val.roleName }}
</span>
</template>
</el-table-column>
<el-table-column label="IC卡卡号" align="center" prop="cardkey" />
<el-table-column label="车牌号" align="center" prop="keyBusNumber" />
<el-table-column label="部门" align="center" prop="dept.deptName" />
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-circle-plus-outline"
@click="handleAdd(scope.row)"
>
绑定
</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>
</div>
</template>
<script>
import { deptTreeSelect } from "@/api/system/user";
import { addBoundUser, unboundUserInfo } from "@/api/driverMsg/driverMsg";
export default {
name: "unboundUserInfo",
props: ["msgId","deviceId"],
data() {
return {
deptOptions: undefined,
defaultProps: {
children: "children",
label: "label",
},
loading: true,
ids: [],
single: true,
multiple: true,
showSearch: true,
total: 0,
userInfoList: [],
queryParams: {
pageNum: 1,
pageSize: 10,
nickName: undefined,
deptId: undefined,
msgId:null,
},
addParams: {
deviceId: null,
msgId:null,
ids: [],
},
};
},
created() {
this.getList();
this.getDeptTree();
},
methods: {
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
getDeptTree() {
deptTreeSelect().then((response) => {
this.deptOptions = response.data;
});
},
handleNodeClick(data) {
this.queryParams.deptId = data.id;
this.getList();
},
getList() {
this.loading = true;
this.queryParams.msgId = this.msgId;
unboundUserInfo(this.queryParams).then((response) => {
this.userInfoList = response.rows;
this.total = response.total;
this.loading = false;
});
},
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.userId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
handleAdd(row) {
if (row != null && row.userId != null) {
this.ids = [];
this.ids.push(row.userId);
}
this.addParams.ids = this.ids;
this.addParams.msgId = this.msgId;
const addParams = this.addParams;
console.log("addParams:"+addParams);
const vm=this;
this.$modal
.confirm("是否确认绑定勾选用户?")
.then(function () {
return addBoundUser(addParams);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("绑定成功");
vm.$emit("handleSaveSuccess");
})
.catch(() => {});
},
},
};
</script>
<select id="selectBoundUserByDeviceNumber" parameterType="Map" resultMap="SysUserResult">
<include refid="selectUserVo"/>
where u.del_flag = '0'
and u.user_id in
(
SELECT sdu.user_id FROM sys_device_user sdu
LEFT JOIN sys_device_info sdi ON sdi.id=sdu.device_id
WHERE sdi.device_number=#{deviceNumber}
)
<if test="nickName != null and nickName != ''">and u.nick_name like concat('%', #{nickName}, '%')</if>
<if test="deptId != null and deptId != 0">
AND (u.dept_id = #{deptId} OR u.dept_id IN ( SELECT t.dept_id FROM sys_dept t WHERE find_in_set(#{deptId},
ancestors) ))
</if>
</select>
<select id="selectUnboundUserInfoByMsgId" parameterType="Map" resultMap="SysUserResult">
<include refid="selectUserVo"/>
where u.del_flag = '0'
and u.user_id not in
(
SELECT sdu.user_id FROM sys_driver_msg_user sdu
LEFT JOIN sys_driver_msg sdi ON sdi.id=sdu.msg_id
WHERE sdi.id=#{msgId}
)
and u.user_id != '1'
<if test="nickName != null and nickName != ''">and u.nick_name like concat('%', #{nickName}, '%')</if>
<if test="deptId != null and deptId != 0">
AND (u.dept_id = #{deptId} OR u.dept_id IN ( SELECT t.dept_id FROM sys_dept t WHERE find_in_set(#{deptId},
ancestors) ))
</if>
</select>
<insert id="addBoundUser" parameterType="Map">
insert into sys_driver_msg_user(msg_id,user_id,device_id) values
<foreach collection="ids" item="id" separator=",">
((SELECT id FROM `sys_driver_msg` WHERE id=#{msgId}), #{id},#{deviceId})
</foreach>
</insert>
<delete id="removeBoundUser" parameterType="Map">
delete from sys_driver_msg_user where msg_id=(SELECT id FROM `sys_driver_msg` WHERE id=#{msgId})
and user_id in
<foreach collection="ids" index="index" item="id" open="(" separator="," close=")">
#{id}
</foreach>
</delete>