✨ feat: 设备管理-添加用户-前端

ruoyi-ui/src/views/deviceManage/bound/index.vue

@@ -1,44 +1,97 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      label-width="100px"
+    >
       <el-form-item label="部门" prop="deptId">
-        <treeselect style="width:300px" v-model="queryParams.deptId" :multiple="false" :options="deptList"
+        <treeselect
-          :normalizer="normalizer" placeholder="请选择组织部门" />
+          style="width: 300px"
+          v-model="queryParams.deptId"
+          :multiple="false"
+          :options="deptList"
+          :normalizer="normalizer"
+          placeholder="请选择组织部门"
+        />
       </el-form-item>
       <el-form-item label="设备编号" prop="monitorNo">
-        <el-input v-model="queryParams.monitorNo" placeholder="请输入设备编号"></el-input>
+        <el-input
+          v-model="queryParams.monitorNo"
+          placeholder="请输入设备编号"
+        ></el-input>
       </el-form-item>
       <el-form-item label="设备名称" prop="monitorName">
-        <el-input v-model="queryParams.monitorName" placeholder="请输入设备名称"></el-input>
+        <el-input
+          v-model="queryParams.monitorName"
+          placeholder="请输入设备名称"
+        ></el-input>
       </el-form-item>
       <el-form-item label="设备状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择设备状态" style="width: 150px;">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择设备状态"
+          style="width: 150px"
+        >
           <el-option label="运行" value="1"></el-option>
           <el-option label="停运" value="0"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item>
-        
+        <el-button
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          type="primary"
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          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-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" v-hasRole="['admin', 'epa', 'factory']" plain icon="el-icon-delete" size="mini"
+        <el-button
-          :disabled="multiple" @click="handleDelete">删除</el-button>
+          type="danger"
+          v-hasRole="['admin', 'epa', 'factory']"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          >删除</el-button
+        >
       </el-col>
     </el-row>
-    <el-table v-loading="loading" :data="monitorList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="monitorList"
+      @selection-change="handleSelectionChange"
+    >
       <el-table-column label="设备编号" align="center" prop="monitorNo" />
       <el-table-column label="设备名称" align="center" prop="monitorName" />
       <el-table-column label="安装部门" align="center" prop="deptName" />
       <el-table-column label="安装位置" align="center" prop="address" />
-      <el-table-column label="系统编码（原有）" align="center" prop="systemNo" />
+      <el-table-column label="负责人" align="center" prop="userName" />
+      <el-table-column
+        label="系统编码（原有）"
+        align="center"
+        prop="systemNo"
+      />
       <el-table-column label="唯一编码（原有）" align="center" prop="unitNo" />
       <el-table-column prop="status" label="设备状态" align="center">
         <!-- 使用 scoped slot 来自定义显示 -->
@@ -48,7 +101,12 @@
         </template>
       </el-table-column>
       <el-table-column label="上传时间" align="center" prop="createTime" />
-      <el-table-column label="设备图片" align="center" prop="fileUrl" width="100">
+      <el-table-column
+        label="设备图片"
+        align="center"
+        prop="fileUrl"
+        width="100"
+      >
         <template slot-scope="scope">
           <image-preview :src="scope.row.fileUrl" :width="50" :height="50" />
         </template>
@@ -56,35 +114,86 @@
       <el-table-column label="经度" align="center" prop="longitude" />
       <el-table-column label="纬度" align="center" prop="latitude" />
       <el-table-column label="报警阈值" align="center" prop="bjyz" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
-          <el-button v-hasRole="['admin', 'epa', 'factory']" size="mini" type="text" icon="el-icon-edit"
+          <el-button
-            @click="handleUpdate(scope.row)">修改</el-button>
+            v-hasRole="['admin', 'epa', 'factory']"
-          <el-button v-hasRole="['admin', 'epa', 'factory']" size="mini" type="text" icon="el-icon-delete"
+            size="mini"
-            @click="handleDelete(scope.row)">删除</el-button>
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            >修改</el-button
+          >
+          <el-button
+            v-hasRole="['admin', 'epa', 'factory']"
+            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
-      @pagination="getList" />
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
 
     <!-- 添加或修改密封点群组对话框 -->
-    <el-dialog :title="title" :visible.sync="isOpenAdd" width="500px" append-to-body>
+    <el-dialog
+      :title="title"
+      :visible.sync="isOpenAdd"
+      width="500px"
+      append-to-body
+    >
       <el-form ref="form" :model="form" :rules="rules" label-width="140px">
         <el-form-item label="设备编号" prop="monitorNo">
-          <el-input v-model="form.monitorNo" placeholder="请输入设备编号" :disabled="disAdd" />
+          <el-input
+            v-model="form.monitorNo"
+            placeholder="请输入设备编号"
+            :disabled="disAdd"
+          />
         </el-form-item>
         <el-form-item label="设备名称" prop="monitorName">
           <el-input v-model="form.monitorName" placeholder="请输入设备名称" />
         </el-form-item>
         <el-form-item label="安装部门" prop="deptId">
-          <treeselect v-model="form.deptId" :multiple="false" :options="deptList" :normalizer="normalizer"
+          <treeselect
-            placeholder="请选择组织部门" />
+            v-model="form.deptId"
+            :multiple="false"
+            :options="deptList"
+            :normalizer="normalizer"
+            placeholder="请选择组织部门"
+          />
         </el-form-item>
         <el-form-item label="安装地址">
           <el-input v-model="form.address" placeholder="请输入安装地址" />
         </el-form-item>
+        <el-form-item label="负责人">
+          <el-input
+            v-model="form.userName"
+            placeholder="请选择负责人"
+            readonly
+            @click.native="isShowUser = true"
+          />
+          <user-select
+            v-if="isShowUser"
+            :isShowUser="isShowUser"
+            :multiple="false"
+            :selectedList="userList"
+            @closeUser="closeUser"
+            @chooseUser="chooseUser"
+          />
+        </el-form-item>
         <el-form-item label="经度">
           <el-input v-model="form.longitude" placeholder="请输入经度" />
         </el-form-item>
@@ -101,7 +210,11 @@
           <el-input v-model="form.unitNo" placeholder="唯一编码（原有）" />
         </el-form-item>
         <el-form-item label="设备状态" prop="status">
-        <el-select v-model="form.status" placeholder="请选择设备状态" style="width: 150px;">
+          <el-select
+            v-model="form.status"
+            placeholder="请选择设备状态"
+            style="width: 150px"
+          >
             <el-option label="运行" value="1"></el-option>
             <el-option label="停运" value="0"></el-option>
           </el-select>
@@ -118,21 +231,25 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
-
-
   </div>
 </template>
 
 <script>
 import store from "@/store";
-import bus from '@/utils/bus.js'
+import bus from "@/utils/bus.js";
-import { updateMonitor, addMonitor, delMonitor, listMonitor } from "@/api/demostrate/monitor";
+import {
+  updateMonitor,
+  addMonitor,
+  delMonitor,
+  listMonitor,
+} from "@/api/demostrate/monitor";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import { listDept } from "@/api/system/dept";
+import UserSelect from "@/views/home/components/UserSelect.vue";
 export default {
   name: "MonitorDetail",
-  components: { Treeselect },
+  components: { Treeselect, UserSelect },
   dicts: [],
   data() {
     return {
@@ -141,7 +258,7 @@ export default {
           id: node.deptId,
           label: node.deptName,
           children: node.children,
-        }
+        };
       },
       deptList: [],
       disAdd: true,
@@ -149,23 +266,21 @@ export default {
       multiple: true,
       rules: {
         monitorName: [
-          { required: true, message: "设备名称不能为空", trigger: "blur" }
+          { required: true, message: "设备名称不能为空", trigger: "blur" },
         ],
         monitorNo: [
-          { required: true, message: "设备编号不能为空", trigger: "blur" }
+          { required: true, message: "设备编号不能为空", trigger: "blur" },
-        ],
-        deptId: [
-          { required: true, message: "部门不能为空", trigger: "blur" }
         ],
+        deptId: [{ required: true, message: "部门不能为空", trigger: "blur" }],
         status: [
-          { required: true, message: "设备状态不能为空", trigger: "blur" }
+          { required: true, message: "设备状态不能为空", trigger: "blur" },
-        ]
+        ],
       },
-      title: '',
+      title: "",
       monitorList: [], //设备列表
       loading: false,
       total: 0,
-      isOpenAdd: false,//是否打开新增窗口
+      isOpenAdd: false, //是否打开新增窗口
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -174,79 +289,79 @@ export default {
         monitorName: null,
         id: null,
         deptId: null,
-        status:null,
+        status: null,
-
       },
       ids: [],
       form: {},
-
+      isShowUser: false,
+      userList: [],
     };
   },
   created() {
-    this.queryParams.factoryId = store.getters.user.factoryId
+    // this.queryParams.factoryId = store.getters.user.factoryId;
-    bus.$on('toMonitorDetail', (val) => {
+    bus.$on("toMonitorDetail", (val) => {
-
+      this.queryParams.monitorNo = val.monitorNo;
-      this.queryParams.monitorNo = val.monitorNo
+      this.queryParams.id = val.id;
-      this.queryParams.id = val.id
+      this.queryParams.monitorName = val.monitorName;
-      this.queryParams.monitorName = val.monitorName
       // this.getList()
-
+    });
-    })
-
   },
   mounted() {
-    this.getOrganizeTree()
+    this.getOrganizeTree();
   },
   methods: {
     getOrganizeTree() {
       listDept({
         deptName: undefined,
-
+      }).then((response) => {
-      }).then(response => {
         if (response.code === 200) {
           this.deptList = this.handleTree(response.data, "deptId");
-          this.getList()
+          this.getList();
         } else {
           console.error(response);
           this.$message.error(response.msg);
         }
-
       });
     },
 
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
+      this.ids = selection.map((item) => item.id);
-      this.multiple = !selection.length
+      this.multiple = !selection.length;
     },
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除？').then(function () {
+      this.$modal
+        .confirm("是否确认删除？")
+        .then(function () {
           return delMonitor(ids);
-      }).then((res) => {
+        })
+        .then((res) => {
           this.getList();
           this.$modal.msgSuccess("删除成功");
-      }).catch(() => { });
+        })
+        .catch(() => {});
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.disAdd = true
+      this.disAdd = true;
-      this.form = row
+      this.form = row;
       this.isOpenAdd = true;
+      this.userList = [row];
       this.title = "修改监控装置";
     },
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.id != null) {
-            updateMonitor(this.form).then(response => {
+            updateMonitor(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.isOpenAdd = false;
               this.getList();
             });
           } else {
-            addMonitor(this.form).then(response => {
+            addMonitor(this.form).then((response) => {
               if (response.code === 200) {
                 this.$modal.msgSuccess("新增成功");
               } else {
@@ -260,36 +375,55 @@ export default {
         }
       });
     },
+    cancel() {
+      this.isOpenAdd = false;
+    },
     //新增密封点
     handleAdd() {
-
+      this.disAdd = false;
-      this.disAdd = false
+      this.form = {};
-      this.form = {}
+      this.isOpenAdd = true;
-      this.isOpenAdd = true
+      this.selectedList = [];
-      this.title = '新增监控装置'
+      this.title = "新增监控装置";
     },
     //获取图片信息
     getImage(data) {
-      this.form.fileUrl = data
+      this.form.fileUrl = data;
     },
     resetQuery() {
-      this.queryParams.pageNum = 1
+      this.queryParams.pageNum = 1;
-      this.queryParams.monitorName = null
+      this.queryParams.monitorName = null;
-      this.queryParams.monitorNo = null
+      this.queryParams.monitorNo = null;
-      this.getList()
+      this.getList();
     },
     handleQuery() {
-      this.getList()
+      this.getList();
     },
     /** 查询密封点群组列表 */
     getList() {
       this.loading = true;
-      listMonitor(this.queryParams).then(response => {
+      listMonitor(this.queryParams).then((response) => {
         this.monitorList = response.rows;
         this.total = response.total;
         this.loading = false;
       });
     },
+    closeUser(val) {
+      this.isShowUser = val;
+    },
+    //选择完用户
+    chooseUser(val) {
+      if (val && val.length < 1) {
+        this.$message.error("请至少选择一名处理人员！");
+        this.isShowUser = false;
+      } else {
+        this.userList = val;
+        this.form.userName = val[0].userName;
+        this.form.userId = val[0].userId;
+        this.isShowUser = false;
       }
+      console.log(this.userList);
+    },
+  },
 };
 </script>

ruoyi-ui/src/views/home/components/UserSelect.vue

@@ -70,7 +70,11 @@ export default {
     },
     selectedList: {
       type: Array,
-      default: [],
+      default: () => [],
+    },
+    multiple: {
+      type: Boolean,
+      default: true,
     },
   },
   watch: {
@@ -114,8 +118,15 @@ export default {
         this.$emit("chooseUser", this.selectList);
       }
     },
-    handleSelectionChange(val) {
+    handleSelectionChange(selection) {
-      this.selectList = val;
+      this.selectList = selection;
+      if (!this.multiple && selection.length > 1) {
+        selection.forEach((item,index) => {
+          if (index != selection.length - 1) {
+            this.$refs.userTable.toggleRowSelection(item, false)
+          }
+        })
+      }
     },
     quetyList() {
       listUser(this.userParams).then((response) => {