卡列表加入表格

src/components/Tabs/index.vue

@@ -1,21 +1,70 @@
 <template>
-  <div class="tab-buttons backgroundBox">
-    <div
-      v-for="(tab, index) in tabs"
-      :key="index"
-      :class="{ active: activeTab === index }"
-      @click="changeTab(index)"
-    >
-      {{ tab.title }}
+  <div :class="[size, 'tabs']" class="tabListBox">
+    <div class="tab-buttons backgroundBox">
+      <div v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }" @click="changeTab(index)">
+        {{ tab.title }}
+      </div>
     </div>
+    <vue-scroll class="tab-content" :class="tabClass" v-if="activeTab === 4" :style="{ height: '80vh', width:'100vw' }">
+      <div :class="[size, 'tabs_settings']" class="tabListBoxSettings">
+        <div class="tab-buttons backgroundBox" :style="{ width: 50 + '%', marginLeft: '-1.5vw' }">
+          <div v-for="(tab, index) in tabs_settings" :key="index" :class="{ active: activeTabSettings === index }"
+            @click="changeTabSettings(index)">
+            {{ tab.title }}
+          </div>
+        </div>
+        <vue-scroll class="tab-content" :class="tabClass" v-if="activeTabSettings === 0"
+          :style="{ height: '85vh', marginLeft: '-1.4vw', marginTop: '5vh' }">
+          <div class="tab-detail">
+            <my-table class="my-tab" :columns="issueColumns" :table-data="issueTableData" :handleDelete="handleDeleteCard"
+              :handleEdit="handleEditCard" :handleAdd="handleAddCard"></my-table>
+          </div>
+          <div class="item-detail">
+            <div class="detail-text">卡号配置</div>
+            <input placeholder="1" 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: '3vw', top: '10vh' }"
+              ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
+            <input placeholder="45%" v-model="valueBattery" class="text-input" :style="{ left: '2vw', top: '14vh' }"
+              ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
+            <el-button class="cancel-button" @click="clickCancel">取消</el-button>
+            <el-button class="done-button" @click="clickOK">确定</el-button>
+          </div>
+        </vue-scroll>
+      </div>
+    </vue-scroll>
   </div>
 </template>
 <script>
 
+import MyTable from '../MyTable'
 export default {
+  components: { MyTable },
   data() {
     return {
-      activeTab: 0
+      value: "",
+      valueCardId: "",
+      valueCardType: "",
+      valueBattery: "",
+      activeTab: 0,
+      activeTabSettings: 0,
+      issueColumns: [
+        { label: '卡号', prop: 'card_id', width: '200px' },
+        { label: '卡类型', prop: 'card_type' },
+        { label: '卡电量', prop: 'battery' },
+        { label: '删除', prop: 'operationDelete', width: '70px' },
+        { label: '编辑', prop: 'operationEdit', width: '70px' },
+        // 其他列配置...
+      ],
+      issueTableData: [
+        { card_id: 1, card_type: '人卡', battery: '45%', operation: '删除' },
+        { card_id: 2, card_type: '人卡', battery: '35%', operation: '删除' },
+        { card_id: 3, card_type: '人卡', battery: '42%', operation: '删除' },
+        { card_id: 4, card_type: '人卡', battery: '45%', operation: '删除' },
+        { card_id: 5, card_type: '人卡', battery: '45%', operation: '删除' },
+        { card_id: 6, card_type: '人卡', battery: '45%', operation: '删除' },
+        // 其他数据...
+      ],
     }
   },
   props: {
@@ -23,12 +72,123 @@ export default {
       type: Array,
       // required: true,
     },
+    tabs_settings: {
+      type: Array,
+      // required: true,
+    },
+    tabClass: {
+      type: String,
+    },
+    size: {
+      type: String,
+    },
+  },
+  mounted() {
+  this.showCardList();
   },
   methods: {
+    handleDeleteCard(card_id) {
+      // Your delete logic here
+      console.log('Deleting card', card_id);
+      var strSql = 'delete from dat_card where card_id=' + card_id;
+      console.log(strSql);
+      var Promise1 = this.exesql(strSql);
+      console.log('sql result cards', Promise1);
+      this.showCardList();
+    },
+    handleAddCard() {
+      console.log('add');
+      this.valueCardId = '0010000000001'
+      this.valueCardType = '人卡'
+      this.valueBattery = '45%'
+    },
+    handleEditCard(card) {
+      // Your delete logic here
+      console.log('Editing card', card, card.card_id, card.card_type, card.battery);
+      this.valueCardId = card.card_id
+      this.valueCardType = card.card_type
+      this.valueBattery = card.battery
+    },
+    clickCancel: function () {
+      console.log('Cancel button clicked');
+      // Add any cancellation logic here
+    },
+    clickOK: function () {
+      console.log('OK button clicked');
+      var strSql = 'REPLACE INTO dat_card(card_id, card_type_id, ident, state_id, freq_id, bench_id, lastUpdate) VALUES(' + this.valueCardId + ',' + (this.valueCardType == '人卡' ? '1' : '2') + ',' + "3,0,-1,0,'2024/01/01')"
+      console.log(strSql);
+      var Promise1 = this.exesql(strSql);
+      console.log('sql result cards', Promise1);
+      this.showCardList();
+
+      // Add any cancellation logic here
+    },
+    onFocus() {
+      this.show = true;
+      this.$emit("focus");
+    },
+    onInput(event) {
+      this.value = event.target.value;
+      this.$emit("input", this.value);
+    },
+    onBlur(e) {
+      // this.show = false;
+      // console.log('=======-------======', e.currentTarget.classList)
+      // this.$emit("blur");
+    },
     changeTab(index) {
       console.log("tab 切换 index", index);
       this.activeTab = index;
     },
+    changeTabSettings(index) {
+      console.log("tab 切换 index", index);
+      this.activeTabSettings = index;
+    },
+    exesql(sqlstr) {
+      return new Promise((resolve, reject) => {
+        console.log(sqlstr);
+
+        let msg = {
+          cmd: "query",
+          data: {
+            name: "name",
+            sql: sqlstr,
+          },
+        };
+
+        window.vm.$socket.emit("REPT", msg, (datas) => {
+          if (datas.error) {
+            reject(datas.error);
+          } else {
+            resolve(datas.data);
+          }
+        });
+      });
+    },
+    showCardList() {
+      var Promise1 = this.exesql('SELECT * FROM `dat_card`');
+      console.log('sql result cards', Promise1);
+      this.issueTableData = [];
+
+      let promises = [Promise1];
+
+      Promise.all(promises)
+        .then((results) => {
+          results.forEach((result) => {
+            console.log(result);
+            result.forEach((item) => {
+              this.issueTableData.push(
+                { card_id: item.card_id, card_type: item.card_type_id == '1' ? '人卡' : '车卡', battery: '45%', operationDelete: item.card_id, operationEdit: item.card_id }
+              )
+            })
+            // Process result here
+          });
+        })
+        .catch((err) => {
+          // Handle error here
+          console.error(err);
+        });
+    },
   }
 }
 </script>
@@ -58,7 +218,7 @@ export default {
   align-items: center;
 }
 
-.tab-buttons > div {
+.tab-buttons>div {
   width: 6.87vw;
   height: 4.44vh;
   line-height: 4.44vh;
@@ -73,4 +233,44 @@ export default {
   /* background: rgba(248,248,258, 0.68); */
   border-radius: 74px 74px 74px 74px;
 }
+
+
+.tab-content {
+  width: 100%;
+  background-size: 100% 100%;
+  border-radius: 2.08vw;
+  // background: rgba(255, 255, 255, 0.36);
+}
+
+
+.tab-content:before {
+  // background: linear-gradient(
+  //   322deg,
+  //   rgba(255, 255, 255, 0.63) 0%,
+  //   rgba(255, 255, 255, 0) 73%,
+  //   rgba(84, 84, 84, 0) 100%
+  // );
+  border-radius: 2.08vw;
+  opacity: 0.55;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.my-tab {
+  width: 70vw;
+  height: 70vh;
+}
+
+.tabListBoxSettings {
+  padding-top: 0vh;
+}
+.tabListBox {
+  // padding-top: 11.29vh;
+  padding-top: 2vh;
+}
 </style>

src/views/ordinaryPage/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="main-title">矿井井下人员定位系统</div>
-    <Tabs :tabs="tabs" class="main-tab"/>
+    <Tabs :tabs="tabs" :tabs_settings="tabs_settings" class="main-tab"/>
     <!-- <SearchBarMain /> -->
     <SearchBar
       class="search-container"