up

src/views/bigScreen/home/components/alertRectify.vue

@@ -7,6 +7,7 @@
     size="100%"
     :visible.sync="dialogVisible"
   >
+    <div slot="title" class="alertRectify-title">告警整改</div>
     <div class="alertRectify-wrap">
       <el-table
         :data="tableData"
@@ -34,14 +35,30 @@
       </el-table>
       <div class="form">
         <el-form ref="ruleForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
-          <el-form-item label="整改部门" prop="groupId">
-            <group-selector v-model="formData.groupId" style="width: 300px;" />
-          </el-form-item>
-          <el-form-item label="整改人员" prop="accountId">
-            <user-selector :default-val="formData.accountId" style="width: 300px;" @setUserInfo="handleSelectUser" />
-          </el-form-item>
+          <div class="flex">
+            <el-form-item label="整改部门" prop="groupId">
+              <el-select v-model="formData.groupId" placeholder="请选择" @change="changeGroup">
+                <el-option
+                  v-for="item in groupList"
+                  :key="item.groupId"
+                  :label="item.groupName"
+                  :value="item.groupId"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="整改人员" prop="accountId">
+              <el-select v-model="formData.accountId" placeholder="请选择">
+                <el-option
+                  v-for="item in userList"
+                  :key="item.accountId"
+                  :label="item.accountName"
+                  :value="item.accountId"
+                />
+              </el-select>
+            </el-form-item>
+          </div>
           <el-form-item label="整改意见">
-            <el-input v-model="formData.goafSensorAlarmHandle" type="textarea" :rows="4" style="width: 300px;" />
+            <el-input v-model="formData.goafSensorAlarmHandle" type="textarea" :rows="4" style="width: 75%;" />
           </el-form-item>
         </el-form>
         <div class="btn-group">
@@ -53,21 +70,17 @@
   </el-drawer>
 </template>
 <script>
-import { GroupSelector } from '@/components'
-import UserSelector from '@/components/UserSelector/index'
 import { getGroupByList } from '@/api/system/groupApi'
+import { getUserByPage } from '@/api/system/userApi'
 import { AddSensorAlarm } from '@/api/iiot/alertRectify'
 export default {
   name: 'AlertRectify',
-  components: {
-    GroupSelector,
-    UserSelector
-  },
   data() {
     return {
       dialogVisible: false,
       tableData: [],
       groupList: [],
+      userList: [],
       formData: {
         goafSensorAlarmId: undefined,
         accountId: undefined,
@@ -103,15 +116,21 @@ export default {
       this.tableData = [data]
       this.dialogVisible = true
     },
-    // 执行人选择
-    handleSelectUser(item) {
-      this.formData.accountId = item.accountId
-      this.formData.accountName = item.accountName
+    changeGroup(groupId) {
+      this.formData.accountId = ''
+      getUserByPage({
+        page: 1,
+        limit: 999999,
+        groupId
+      }).then((res) => {
+        this.userList = res.data
+      })
     },
     submitForm() {
       this.$refs['ruleForm'].validate((valid) => {
         if (valid) {
           this.formData.groupName = this.groupList.filter((item) => item.groupId === this.formData.groupId)[0]?.groupName
+          this.formData.accountName = this.userList.filter((item) => item.accountId === this.formData.accountId)[0]?.accountName
           AddSensorAlarm(this.formData).then((res) => {
             this.$message.success('整改成功！')
             this.dialogVisible = false
@@ -123,10 +142,26 @@ export default {
 }
 </script>
   <style lang="scss" scoped>
+  .alertRectify-title{
+    text-align: center;
+  }
   .alertRectify-wrap{
-    padding: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+    box-shadow: 2px 4px 8px rgba(48, 99 ,121,0.6);
+    border-radius: 10px;
+    box-sizing: border-box;
       .form{
         margin-top: 30px;
+        .flex{
+          display: flex;
+          align-items: center;
+          flex-wrap: wrap;
+        }
+      }
+      .btn-group{
+        padding-top: 30px;
+        text-align: center;
       }
   }
   </style>