root
/
agri-ui
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

大棚关联用户

master
lld 2026-02-03 10:35:24 +08:00
parent 3ec8dd8ffb
commit a9635d075e
4 changed files with 277 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/api/assets/userAgri.js
View File

@ -43,10 +43,26 @@ export function delUserAgri(id) {
})
}
export function findAgriByUser(query) {
export function findAgriUser(query) {
return request({
url: '/assets/userAgri/findAgriByUser',
url: '/assets/userAgri/findAgriUser',
method: 'get',
params: query
})
}
export function findAllUser(query) {
return request({
url: '/assets/userAgri/findAllUser',
method: 'get',
params: query
})
}
export function batchAssociaUser(data) {
return request({
url: '/assets/userAgri/batchAssociaUser',
method: 'post',
data: data
})
}

119
src/views/assets/agri/associaUser.vue Normal file
View File

@ -0,0 +1,119 @@
<template>
<!-- 授权用户 -->
<el-dialog title="大棚关联用户" close-on-press-escape :close="closeDialog" :visible.sync="visible" width="700px" top="5vh" append-to-body>
<div class="transfer-center-container">
<el-transfer
filterable
:titles="['全部用户', '关联用户']"
filter-placeholder="请输入用户名称"
v-model="value"
:props="{
key: 'userId',
label: 'userName'
}"
@change="handleChange"
:data="data">
</el-transfer>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleSelectUser">确 定</el-button>
<el-button @click="visible = false">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import {batchAssociaUser, findAllUser} from "@/api/assets/userAgri";
export default {
dicts: [],
props: {
},
data() {
return {
data: [],
value: [],
// 遮罩层
visible: false,
// 选中数组值
userIds: [],
// 总条数
userList:[],
// 查询参数
queryParams: {
agriId:null,
sysUser: {
userName: undefined
}
}
}
},
methods: {
// 当前值、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组
handleChange(value, direction, movedKeys) {
console.log(value, direction, movedKeys);
this.value = value;
},
associaUser(imei) {
this.reset();
this.visible=true;
this.queryParams.agriId = imei;
findAllUser(this.queryParams).then(res => {
if (res.rows.length>0) {
for (let i = 0; i < res.rows.length; i++) {
this.data.push({
userId: res.rows[i].sysUser.userId,
userName: res.rows[i].sysUser.userName,
});
if (res.rows[i].disabled === true) {
this.value.push(res.rows[i].sysUser.userId)
}
}
}
})
},
reset() {
this.data = [];
this.value = []
this.userIds = [];
this.userList = [];
},
closeDialog() {
console.info("关闭方法执行")
this.data = [];
this.value = []
},
/** 选择授权用户操作 */
handleSelectUser() {
this.value.forEach(item => {
this.userList.push({
agriId:this.queryParams.agriId,
userId:item
})
});
this.$emit('confirm-user', this.userList); // 抛出选中的用户关联数据
this.visible = false
},
}
}
</script>
<style scoped>
.transfer-footer {
margin-left: 20px;
padding: 6px 5px;
}
.transfer-center-container {
width: 100%; /* 撑满父容器（el-dialog）宽度 */
display: flex; /* 开启 Flex 布局 */
justify-content: center; /* 水平居中 */
margin: 20px 0; /* 上下外边距，优化间距 */
}
/deep/ .el-dialog__body {
padding: 10px 10px;
}
</style>

148
src/views/assets/agri/index.vue
View File

@ -95,7 +95,7 @@
</el-row>
<el-table v-loading="loading" border :data="agriList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="selection" width="55" align="center" :disabled="true"/>
<el-table-column label="ID" width="180" align="center" prop="id" />
<el-table-column label="IMEI" width="150" align="center" prop="imei" />
<el-table-column label="大棚名称" align="center" prop="agriName" />
@ -160,7 +160,7 @@
size="mini"
type="text"
icon="el-icon-user"
@click="getUserInfo(form.agriId)"
@click="getUserInfo(form.imei)"
>点击查看</el-button>
</el-form-item>
<el-form-item label="安装时间" prop="installTime">
@ -178,6 +178,52 @@
<el-input id="remark" v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
<el-row>
<el-table ref="table" :data="userList" @selection-change="handleSelectionChange" height="260px">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="imei" prop="agriId" :show-overflow-tooltip="true" />
<el-table-column label="用户id" prop="userId" :show-overflow-tooltip="true" />
<!-- <el-table-column label="用户昵称" prop="userName" :show-overflow-tooltip="true" />-->
<el-table-column label="角色" prop="role" align="center" >
<template slot-scope="scope">
<el-select id="isLockSuc" v-model="scope.row.role" size="mini"
@change="handleSaveEdit(scope.row, 'role')"
@blur="handleSaveEdit(scope.row, 'role')">
<el-option
v-for="dict in dict.type.sys_user_agri_role"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
<!-- 非编辑状态：显示文本，点击激活编辑 -->
<span v-if="false">
<dict-tag :options="dict.type.sys_user_agri_role" :value="scope.row.role"/>
</span>
</template>
</el-table-column>
<el-table-column label="权限位" prop="permMask" :show-overflow-tooltip="true" />
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
2
</template>
</el-table-column>
<el-table-column label="邀请人ID" prop="inviteBy" :show-overflow-tooltip="true" />
<el-table-column label="邀请人ID" prop="inviteName" :show-overflow-tooltip="true" />
<el-table-column label="邀请时间" prop="inviteTime" :show-overflow-tooltip="true" />
<el-table-column label="接受时间" prop="acceptTime" :show-overflow-tooltip="true" />
<el-table-column label="备注" prop="remark" :show-overflow-tooltip="true" />
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
@ -185,16 +231,40 @@
</el-dialog>
<show-user ref="show"/>
<associa-user ref="associa" @confirm-user="handleReceiveUserData"/>
</div>
</template>
<script>
import { listAgri, getAgri, delAgri, addAgri, updateAgri } from "@/api/assets/agri"
import ShowUser from "./showUser.vue";
import alarm from "@/views/assets/alarm/index.vue";
import AssociaUser from "@/views/assets/agri/associaUser.vue";
import {batchAssociaUser, findAgriUser} from "@/api/assets/userAgri";
import store from "@/store";
import {formatDate} from "@/utils";
export default {
dicts:['sys_user_agri_role'],
directives: {
// 自定义指令：激活编辑时自动聚焦输入框
focus: {
inserted(el) {
// 找到 el-input 内部的 input 标签并聚焦
const input = el.querySelector('input');
if (input) input.focus();
}
}
},
name: "Agri",
components: {ShowUser},
computed: {
alarm() {
return alarm
}
},
components: {ShowUser,AssociaUser},
data() {
return {
// 遮罩层
@ -211,6 +281,7 @@ export default {
total: 0,
// 大棚管理表格数据
agriList: [],
userList:[],
// 弹出层标题
title: "",
// 是否显示弹出层
@ -269,6 +340,18 @@ export default {
this.getList()
},
methods: {
// 保存编辑数据，退出编辑状态
handleSaveEdit(row, field) {
// 2. 后续业务处理：如接口提交修改后的数据
console.log(`保存${field}：`, row);
// 示例：调用接口更新数据
// updateTableData(row.id, { [field]: row[field] }).then(res => {
// this.$modal.msgSuccess('修改成功');
// });
},
/** 查询大棚管理列表 */
getList() {
this.loading = true
@ -279,11 +362,11 @@ export default {
})
},
showUser(row) {
this.$refs.show.showUser(row.agriId,0)
this.$refs.show.showUser(row.imei)
},
getUserInfo(agriId) {
this.$refs.show.associaUser(agriId,1)
this.userList = []
this.$refs.associa.associaUser(agriId)
},
// 取消按钮
cancel() {
@ -313,6 +396,7 @@ export default {
isDeleted: null
}
this.resetForm("form")
this.userList=[]
},
/** 搜索按钮操作 */
handleQuery() {
@ -342,6 +426,7 @@ export default {
const id = row.id || this.ids
getAgri(id).then(response => {
this.form = response.data
this.getUserList(this.form.imei)
this.open = true
this.title = "修改大棚管理"
})
@ -350,25 +435,25 @@ export default {
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateAgri(this.form).then(response => {
this.$modal.msgSuccess("修改成功")
this.open = false
this.getList()
})
} else {
addAgri(this.form).then(response => {
if (response.code===200) {
this.$modal.msgSuccess("新增成功")
} else {
this.$modal.msgError("新增失败")
}
this.open = false
this.getList()
})
}
batchAssociaUser(this.userList).then((res) => {
// 提取公共文案前缀，减少冗余
const msg = res.code === 200 ? "成功" : "失败";
this.$modal[res.code === 200 ? "msgSuccess" : "msgError"](`关联用户${msg}`);
})
this.open=false;
}
})
this.reset();
},
// 查询表数据
getUserList(agriId) {
var param = {
agriId:agriId
}
findAgriUser(param).then(res => {
this.userList = res.rows
this.total = res.total
})
},
/** 删除按钮操作 */
handleDelete(row) {
@ -385,7 +470,24 @@ export default {
this.download('assets/agri/export', {
...this.queryParams
}, `agri_${new Date().getTime()}.xlsx`)
},
handleReceiveUserData(userList) {
userList.forEach(item => {
item.role = 0;
item.status=2;
item.inviteBy=store.getters&&store.getters.id;
item.inviteName=store.getters&&store.getters.name;
item.inviteTime=formatDate(new Date())
this.userList.push(item)
})
}
}
}
</script>
<style scoped>
/* 优化编辑框样式，贴合单元格 */
.el-input {
width: 70px;
}
</style>

37
src/views/assets/agri/showUser.vue
View File

@ -26,16 +26,16 @@
<el-row>
<el-table @row-click="clickRow" ref="table" :data="userList" @selection-change="handleSelectionChange" height="260px">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
<el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
<el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
<el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
<el-table-column label="用户名称" prop="sysUser.userName" :show-overflow-tooltip="true" />
<el-table-column label="用户昵称" prop="sysUser.nickName" :show-overflow-tooltip="true" />
<el-table-column label="邮箱" prop="sysUser.email" :show-overflow-tooltip="true" />
<el-table-column label="手机" prop="sysUser.phonenumber" :show-overflow-tooltip="true" />
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<el-table-column label="创建时间" align="center" prop="sysUser.createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
@ -50,14 +50,13 @@
/>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleSelectUser">确 定</el-button>
<el-button @click="visible = false">取 消</el-button>
<el-button @click="visible = false">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
import {findAgriByUser} from "@/api/assets/userAgri";
import {findAgriUser} from "@/api/assets/userAgri";
export default {
dicts: ['sys_normal_disable'],
@ -78,7 +77,13 @@ export default {
queryParams: {
pageNum: 1,
pageSize: 10,
userId: undefined,
agriId:null,
sysUser: {
userName: undefined,
phonenumber: undefined,
status: undefined,
deptId: undefined
}
}
}
},
@ -98,13 +103,10 @@ export default {
},
// 查询表数据
getList() {
findAgriByUser(this.queryParams).then(res => {
findAgriUser(this.queryParams).then(res => {
this.userList = res.rows
this.total = res.total
})
},
associaUser() {
},
/** 搜索按钮操作 */
handleQuery() {
@ -115,15 +117,6 @@ export default {
resetQuery() {
this.resetForm("queryForm")
this.handleQuery()
},
/** 选择授权用户操作 */
handleSelectUser() {
const roleId = this.queryParams.roleId
const userIds = this.userIds.join(",")
if (userIds == "") {
this.$modal.msgError("请选择要分配的用户")
return
}
}
}
}