完成配置功能

src/components/Tabs/index.vue

@@ -80,10 +80,84 @@
             </div>
           </div>
           </vue-scroll>
+          <vue-scroll class="tab-content-device" :class="tabClass" v-if="activeTabSettings === 3"
+          :style="{ height: '60vh', marginLeft: '-1.4vw', marginTop: '0vh' }">
+          <div class="tab-detail">
+            <my-table class="my-tab" :columns="issueColumnsDevice" :table-data="issueTableDataDevice" :handleDelete="handleDeleteCard"
+              :handleEdit="handleEditCard" :handleAdd="handleAddCard"></my-table>
+          </div>
+          <div class="item-detail">
+            <div>
+              <div class="detail-text">设备配置</div>
+              <input placeholder="设备id" 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="X坐标" v-model="valueBattery" class="text-input" :style="{ left: '13vw', top: '6.4vh' }"
+              ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
+              <input placeholder="Y坐标" v-model="valueBattery" class="text-input" :style="{ left: '2vw', top: '10vh' }"
+              ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
+              <input placeholder="Z坐标" v-model="valueBattery" class="text-input" :style="{ left: '13vw', top: '6.4vh' }"
+              ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
+              <input placeholder="IP" v-model="valueBattery" class="text-input" :style="{ left: '2vw', top: '10vh' }"
+              ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
+            </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>
           </vue-scroll>
+          <vue-scroll class="tab-content-user" :class="tabClass" v-if="activeTabSettings === 5"
+          :style="{ height: '60vh', marginLeft: '-1.4vw', marginTop: '0vh' }">
+          <div class="tab-detail">
+            <my-table class="my-tab" :columns="issueColumnsUser" :table-data="issueTableDataUser" :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" />
+            </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-role" :class="tabClass" v-if="activeTabSettings === 6"
+          :style="{ height: '60vh', marginLeft: '-1.4vw', marginTop: '0vh' }">
+          <div class="tab-detail">
+            <my-table class="my-tab" :columns="issueColumnsRole" :table-data="issueTableDataRole" :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" />
+            </div>
+            <div>
+              <el-button class="cancel-button" @click="clickCancel">取消</el-button>
+              <el-button class="done-button" @click="clickOK">确定</el-button>
+            </div>
+          </div>
+          </vue-scroll>
       </div>
     </vue-scroll>
   </div>
@@ -161,6 +235,34 @@ export default {
         { label: '编辑', prop: 'operationEdit', width: '70px' },
       ],
       issueTableDataDept: [],
+      issueColumnsDevice: [
+        { label: '设备id', prop: 'reader_id' },
+        { label: '设备类型', prop: 'reader_type_id' },
+        { label: '设备名称', prop: 'name' },
+        { label: 'X坐标', prop: 'x' },
+        { label: 'Y坐标', prop: 'y' },
+        { label: 'Z坐标', prop: 'z' },
+        { label: 'IP', prop: 'ip' },
+        { label: '删除', prop: 'operationDelete', width: '70px' },
+        { label: '编辑', prop: 'operationEdit', width: '70px' },
+      ],
+      issueTableDataDevice: [],
+      issueColumnsUser: [
+        { label: '用户名', prop: 'user_id' },
+        { label: '用户密码', prop: 'pwd' },
+        { label: '用户角色', prop: 'role_name' },
+        { label: '删除', prop: 'operationDelete', width: '70px' },
+        { label: '编辑', prop: 'operationEdit', width: '70px' },
+      ],
+      issueTableDataUser: [],
+      issueColumnsRole: [
+        { label: '用户角色', prop: 'name' },
+        { label: '角色权限可管理的页面', prop: 'menus' },
+        { label: '该角色用户列表', prop: 'user_list' },
+        { label: '删除', prop: 'operationDelete', width: '70px' },
+        { label: '编辑', prop: 'operationEdit', width: '70px' },
+      ],
+      issueTableDataRole: [],
       issueTableDataTopo: [
       ],
     }
@@ -185,6 +287,9 @@ export default {
   this.showCardList();
   this.showStaffList();
   this.showDeptList();
+  this.showDeviceList();
+  this.showUserList();
+  this.showRoleList();
   this.fetchData();
   },
   methods: {
@@ -563,6 +668,100 @@ export default {
           console.error(err);
         });
     },
+    showDeviceList() {
+      var Promise1 = this.exesql('SELECT * FROM `dat_reader`');
+      console.log('sql result readers', Promise1);
+      this.issueTableDataDevice = [];
+
+      let promises = [Promise1];
+
+      Promise.all(promises)
+        .then((results) => {
+          results.forEach((result) => {
+            console.log(result);
+            result.forEach((item) => {
+              this.issueTableDataDevice.push(
+                { 
+                  reader_id:item.reader_id,
+                  reader_type_id:item.reader_type_id,
+                  name:item.name,
+                  x:item.x,
+                  y:item.y,
+                  z:item.z,
+                  ip:item.ip,
+                  operationDelete:item.staff_id,
+                  operationEdit:item.staff_id,
+                }
+              )
+            })
+            // Process result here
+          });
+        })
+        .catch((err) => {
+          // Handle error here
+          console.error(err);
+        });
+    },
+    showRoleList() {
+      var Promise1 = this.exesql('SELECT * FROM `dat_role`');
+      console.log('sql result role', Promise1);
+      this.issueTableDataRole = [];
+
+      let promises = [Promise1];
+
+      Promise.all(promises)
+        .then((results) => {
+          results.forEach((result) => {
+            console.log(result);
+            result.forEach((item) => {
+              this.issueTableDataRole.push(
+                { 
+                  name:item.name,
+                  menus:item.menus,
+                  user_list:item.user_list,
+                  operationDelete:item.name,
+                  operationEdit:item.name,
+                }
+              )
+            })
+            // Process result here
+          });
+        })
+        .catch((err) => {
+          // Handle error here
+          console.error(err);
+        });
+    },
+    showUserList() {
+      var Promise1 = this.exesql('SELECT dat_user.*, dat_role.`name` as role_name FROM `dat_user` JOIN dat_role ON dat_user.role_id = dat_role.role_id');
+      console.log('sql result users', Promise1);
+      this.issueTableDataUser = [];
+
+      let promises = [Promise1];
+
+      Promise.all(promises)
+        .then((results) => {
+          results.forEach((result) => {
+            console.log(result);
+            result.forEach((item) => {
+              this.issueTableDataUser.push(
+                { 
+                  user_id:item.user_id,
+                  pwd:item.pwd,
+                  role_name:item.role_name,
+                  operationDelete:item.staff_id,
+                  operationEdit:item.staff_id,
+                }
+              )
+            })
+            // Process result here
+          });
+        })
+        .catch((err) => {
+          // Handle error here
+          console.error(err);
+        });
+    },
     showDeptList() {
       var Promise1 = this.exesql('SELECT * FROM `dat_dept`');
       console.log('sql result dept', Promise1);