大棚关联用户

src/api/assets/userAgri.js

@@ -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
+  })
+}

src/views/assets/agri/associaUser.vue

@@ -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>

src/views/assets/agri/index.vue

@@ -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,24 +435,24 @@ export default {
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
-          if (this.form.id != null) {
+          batchAssociaUser(this.userList).then((res) => {
-            updateAgri(this.form).then(response => {
+            // 提取公共文案前缀，减少冗余
-              this.$modal.msgSuccess("修改成功")
+            const msg = res.code === 200 ? "成功" : "失败";
-              this.open = false
+            this.$modal[res.code === 200 ? "msgSuccess" : "msgError"](`关联用户${msg}`);
-              this.getList()
           })
-          } else {
+          this.open=false;
-            addAgri(this.form).then(response => {
-                if (response.code===200) {
-                  this.$modal.msgSuccess("新增成功")
-                } else {
-                  this.$modal.msgError("新增失败")
         }
-              this.open = false
-              this.getList()
       })
+      this.reset();
+    },
+    // 查询表数据
+    getUserList(agriId) {
+      var param = {
+        agriId:agriId
       }
-        }
+      findAgriUser(param).then(res => {
+        this.userList = res.rows
+        this.total = res.total
       })
     },
     /** 删除按钮操作 */
@@ -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>

src/views/assets/agri/showUser.vue

@@ -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="sysUser.userName" :show-overflow-tooltip="true" />
-        <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
+        <el-table-column label="用户昵称" prop="sysUser.nickName" :show-overflow-tooltip="true" />
-        <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
+        <el-table-column label="邮箱" prop="sysUser.email" :show-overflow-tooltip="true" />
-        <el-table-column label="手机" prop="phonenumber" :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
-      }
     }
   }
 }