微型消防站表单修改

src/api/miniFirestation/index.js

@@ -0,0 +1,22 @@
+import request from "@/utils/request";
+
+export function getAllPeople(data) {
+    return request({
+        url: "/backend/micro-station-emp/page",
+        method: "get",
+        params: data, 
+    });
+}
+export function delFirePeople(data) {
+    return request({
+        url: `/backend/micro-station-emp/delete?id=${data}`,
+        method: "post",
+    });
+}
+export function editFirePeople(data) {
+    return request({
+        url: "/backend/micro-station-emp/update",
+        method: "post",
+        data, 
+    });
+}

src/views/unitorg/microStation/index.vue

@@ -75,12 +75,13 @@
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column> -->
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="140">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
         <template v-slot="scope">
           <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
             v-hasPermi="['backend:micro-station:update']">修改</el-button>
           <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
             v-hasPermi="['backend:micro-station:delete']">删除</el-button>
+          <el-button type="text" size="mini" @click="searchAllPeople(scope.row)">查看现有人员</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -118,18 +119,18 @@
               <el-input v-model="form.charger" placeholder="请输入负责人（站长）" />
             </el-form-item>
           </el-col>
-            <el-col :span="5">
-              <el-button type="primary" size="small" @click="addNewPeople">新增人员</el-button>
-              <el-button type="primary" size="small" @click="submitFormBut">提交新人员</el-button>
-            </el-col>
+          <el-col :span="5">
+            <!-- <el-button type="primary" size="small" @click="addNewPeople">新增人员</el-button> -->
+            <!-- <el-button type="primary" size="small" @click="submitFormBut">提交新人员</el-button> -->
+          </el-col>
           <el-col :span="9">
             <el-form-item label="报警电话" prop="alarmTel">
               <el-input v-model="form.alarmTel" placeholder="请输入报警电话" />
             </el-form-item></el-col>
         </el-row>
-        <el-row v-for="(item, index) in formItems" :key="index" :gutter="20" >
-          <el-col :span="11" >
-            <el-form-item :label="item.label" :prop="item.prop" >
+        <el-row v-for="(item, index) in formItems" :key="index" :gutter="20">
+          <el-col :span="11">
+            <el-form-item :label="item.label" :prop="item.prop">
               <el-input v-model="item.value" :placeholder="item.placeholder" />
             </el-form-item>
           </el-col>
@@ -184,12 +185,66 @@
     <el-dialog :visible.sync="opentabs" width="85vw" append-to-body v-if="opentabs" :title="`单位名称:${opentabsTitle}`">
       <microStationEvent :microId="microId"></microStationEvent>
     </el-dialog>
+    <!-- 查看人员的模态框 -->
+    <el-dialog title="现有人员" :visible.sync="lookFirePeople" width="50%">
+      <el-table :data="firePeople" border style="width: 100%">
+        <el-table-column prop="empName" label="姓名" width="120">
+        </el-table-column>
+        <el-table-column label="人员类型" width="120">
+          <template scope="scope">
+            <!-- <span>{{ scope.row.empType }}</span> -->
+            <span>{{ countType || scope.row.empType }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="idcardno" label="身份证" width="120">
+        </el-table-column>
+        <el-table-column prop="mobile" label="电话号" width="300">
+        </el-table-column>
+        <el-table-column fixed="right" label="操作" width="100">
+          <template slot-scope="scope">
+            <el-button @click="editPeople(scope.row)" type="text" size="small">编辑</el-button>
+            <el-button type="text" size="small" @click="delPeople(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="lookFirePeople = false">取 消</el-button>
+        <el-button type="primary" @click="makeSureFire">确 定</el-button>
+      </span>
+    </el-dialog>
+    <!-- 内层修改模态框 -->
+    <el-dialog title="编辑人员" :visible.sync="insideModal" width="50%">
+      <el-form ref="form" :model="insideForm" label-width="80px">
+        <el-form-item label="姓名">
+          <el-input v-model="insideForm.name"></el-input>
+        </el-form-item>
+        <el-form-item label="人员类型">
+          <!-- <el-input v-model="insideForm.type"></el-input> -->
+          <el-select v-model="insideForm.type" placeholder="请选择">
+            <el-option key="0" label="普通人员" value="0"/>
+            <el-option key="1" label="值班人员" value="1"/>
+            <el-option key="2" label="站长" value="2"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="身份证">
+          <el-input v-model="insideForm.idcard"></el-input>
+        </el-form-item>
+        <el-form-item label="电话号">
+          <el-input v-model="insideForm.phone"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="insideModal = false">取 消</el-button>
+        <el-button type="primary" @click="insideSure">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { createMicroStation, updateMicroStation, deleteMicroStation, getMicroStation, getMicroStationPage, exportMicroStationExcel } from "@/api/backend/microStation"
 import { getTableHeight } from "@/utils/ruoyi.js";
+import { getAllPeople, delFirePeople, editFirePeople } from '@/api/miniFirestation/index'
 import microStationEvent from "@/views/backend/microStationEvent/index";
 export default {
   name: "MicroStation",
@@ -235,7 +290,17 @@ export default {
         status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
       },
       tableHeight: "",
-      formItems: [] // 存储表单项的数据
+      formItems: [], // 存储表单项的数据
+      lookFirePeople: false,
+      firePeople: [],
+      insideModal: false,
+      insideForm: {
+        name: "",
+        type: "",
+        idcard: "",
+        phone: ""
+      },
+      insideUpdateId:'',
     }
   },
   props: ["orgId"],
@@ -263,6 +328,18 @@ export default {
       this.tableHeight = getTableHeight(this.$refs['sousuH'].clientHeight + 200)
     })
   },
+  computed: {
+    countType(num) {
+      // return '456'
+      if (num === '1') {
+        return '值班人员'
+      } else if (num === '2') {
+        return '站长'
+      } else {
+        return '普通人员'
+      }
+    }
+  },
   methods: {
     showOpentabs(micro) {
       this.microId = micro.id
@@ -391,33 +468,33 @@ export default {
     },
     addNewPeople() {
       // if (this.formItems.length < 24) {
-        const newItem = [
-          {
-            label: `名字`,
-            prop: `custom_${this.formItems.length + 1}`,
-            value: '',
-            placeholder: '请输入名字',
-          },
-          {
-            label: '身份证号',
-            prop: `custom_${this.formItems.length + 1}`,
-            value: '',
-            placeholder: '请输入身份证号',
-          },
-          {
-            label: '电话',
-            prop: `custom_${this.formItems.length + 1}`,
-            value: '',
-            placeholder: '请输入电话号码',
-          },
-          {
-            label: '职务',
-            prop: `custom_${this.formItems.length + 1}`,
-            value: '',
-            placeholder: '请输入职务',
-          },
-        ];
-        this.formItems = this.formItems.concat(newItem);
+      const newItem = [
+        {
+          label: `名字`,
+          prop: `custom_${this.formItems.length + 1}`,
+          value: '',
+          placeholder: '请输入名字',
+        },
+        {
+          label: '身份证号',
+          prop: `custom_${this.formItems.length + 1}`,
+          value: '',
+          placeholder: '请输入身份证号',
+        },
+        {
+          label: '电话',
+          prop: `custom_${this.formItems.length + 1}`,
+          value: '',
+          placeholder: '请输入电话号码',
+        },
+        {
+          label: '职务',
+          prop: `custom_${this.formItems.length + 1}`,
+          value: '',
+          placeholder: '请输入职务',
+        },
+      ];
+      this.formItems = this.formItems.concat(newItem);
       // } else {
       //   // 达到最大数量，给出提示或执行其他操作
       //   console.log('已达到最大数量');
@@ -430,6 +507,38 @@ export default {
       console.log(values);
       // 执行其他操作，如提交表单
     },
+    searchAllPeople(row) {
+      getAllPeople({ pageNo: 1, pageSize: 10, microstationid: row.id }).then(res => {
+        this.firePeople = res.data.list
+      })
+      this.lookFirePeople = true
+    },
+    makeSureFire() {
+
+    },
+    delPeople(row) {
+      delFirePeople(row.id).then(res => {
+        if (res.data) {
+          this.$message({
+            message: '删除成功',
+            type: 'success'
+          });
+        }
+      })
+      this.lookFirePeople = false
+    },
+    editPeople(row) {
+      console.log(row, 'inside');
+      this.insideForm.name = row.empName
+      this.insideForm.idcard = row.idcardno
+      this.insideForm.phone = row.mobile
+      this.insideForm.type = row.empType
+      this.insideUpdateId = row.id
+      this.insideModal = true
+    },
+    insideSure() {
+      // editFirePeople({id:this.insideUpdateId,empName:this.insideForm.name})
+    }
   }
 }
 </script>