完成人员管理

src/components/Tabs/index.vue

@@ -35,6 +35,33 @@
             </div>
           </div>
           </vue-scroll>
+          <vue-scroll class="tab-content-staff" :class="tabClass" v-if="activeTabSettings === 1"
+          :style="{ height: '60vh', marginLeft: '-1.4vw', marginTop: '0vh' }">
+          <div class="tab-detail">
+            <my-table class="my-tab" :columns="issueColumnsStaff" :table-data="issueTableDataStaff" :handleDelete="handleDeleteCard"
+              :handleEdit="handleEditCard" :handleAdd="handleAddCard"></my-table>
+          </div>
+          <div class="item-detail">
+            <div>
+              <div class="detail-text">人员配置</div>
+              <input placeholder="员工号" v-model="valueCardId" class="text-input" :style="{ left: '2vw', top: '10vh' }"
+                ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
+              <input placeholder="姓名" v-model="valueCardType" class="text-input" :style="{ left: '13vw', top: '6.4vh' }"
+                ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
+              <input placeholder="身份证号" v-model="valueBattery" class="text-input" :style="{ left: '2vw', top: '10vh' }"
+                ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
+              <input placeholder="卡号" v-model="valueBattery" class="text-input" :style="{ left: '13vw', top: '6.4vh' }"
+              ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
+              <input placeholder="部门" v-model="valueBattery" class="text-input" :style="{ left: '2vw', top: '10vh' }"
+              ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
+              <div class="imgStaff"></div>
+            </div>
+            <div>
+              <el-button class="cancel-button" @click="clickCancel">取消</el-button>
+              <el-button class="done-button" @click="clickOK">确定</el-button>
+            </div>
+          </div>
+          </vue-scroll>
           <vue-scroll class="tab-content-card" :class="tabClass" v-if="activeTabSettings === 4"
             :style="{ height: '60vh', marginLeft: '-1.4vw', marginTop: '0vh' }">
             <div><example-table :data="appTopoData" /></div>
@@ -90,6 +117,26 @@ export default {
         { card_id: 6, card_type: '人卡', battery: '45%', operation: '删除' },
         // 其他数据...
       ],
+      issueColumnsStaff: [
+        { label: '员工号', prop: 'staff_id', width: '200px' },
+        { label: '姓名', prop: 'name' },
+        { label: '身份证号', prop: 'certification' },
+        { label: '卡号', prop: 'card_id' },
+        { label: '部门', prop: 'dept' },
+        { label: '照片', prop: 'pic' },
+        { label: '删除', prop: 'operationDelete', width: '70px' },
+        { label: '编辑', prop: 'operationEdit', width: '70px' },
+        // 其他列配置...
+      ],
+      issueTableDataStaff: [
+        { staff_id: 1, name: '张三', certification: '45333333333', operationDelete: '删除' },
+        { staff_id: 2, name: '李四', certification: '45333333333', operationDelete: '删除' },
+        { staff_id: 3, name: '王五', certification: '45333333333', operationDelete: '删除' },
+        { staff_id: 4, name: '张三', certification: '45333333333', operationDelete: '删除' },
+        { staff_id: 5, name: '李四', certification: '45333333333', operationDelete: '删除' },
+        { staff_id: 6, name: '王五', certification: '45333333333', operationDelete: '删除' },
+        // 其他数据...
+      ],
       issueTableDataTopo: [
       ],
     }
@@ -112,6 +159,7 @@ export default {
   },
   mounted() {
   this.showCardList();
+  this.showStaffList();
   this.fetchData();
   },
   methods: {
@@ -457,6 +505,39 @@ export default {
           console.error(err);
         });
     },
+    showStaffList() {
+      var Promise1 = this.exesql('SELECT * FROM `dat_staff`');
+      console.log('sql result staffs', Promise1);
+      this.issueTableDataStaff = [];
+
+      let promises = [Promise1];
+
+      Promise.all(promises)
+        .then((results) => {
+          results.forEach((result) => {
+            console.log(result);
+            result.forEach((item) => {
+              this.issueTableDataStaff.push(
+                { 
+                  staff_id:item.staff_id,
+                  name:item.name,
+                  certification:item.certification,
+                  card_id:item.card_id,
+                  dept:item.dept,
+                  pic:item.pic,
+                  operationDelete:item.staff_id,
+                  operationEdit:item.staff_id,
+                }
+              )
+            })
+            // Process result here
+          });
+        })
+        .catch((err) => {
+          // Handle error here
+          console.error(err);
+        });
+    },
   }
 }
 </script>
@@ -590,4 +671,19 @@ export default {
   color: #fff;
   left: 0.93vw;
 }
+.imgStaff{
+  background-image: url(../../assets/staff.png);
+  background-color:transparent;
+  background-repeat: no-repeat;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-size: 100% 100%;
+  height: 160px;
+  width: 160px;
+  display: block;
+  margin-left: auto;
+  margin-top: 6.7vh;
+  margin-right: 1.5vw;
+}
 </style>