mine/src/components/Tabs/index.vue

<template>
  <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-card" :class="tabClass" v-if="activeTabSettings === 0"
          :style="{ height: '60vh', marginLeft: '-1.4vw', marginTop: '0vh' }">
          <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>
              <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" />
            </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>
</template>
<script>

import MyTable from '../MyTable'
export default {
  components: { MyTable },
  data() {
    return {
      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: {
    tabs: {
      type: Array,
      // required: true,
    },
    tabs_settings: {
      type: Array,
      // required: true,
    },
    tabIndex:{
      type: Number,
    },
    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;
      this.tabIndex = index;
      this.$emit('tabIndexChanged', this.tabIndex);
    },
    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>

<style scoped lang="less">
.tabs {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.tab-buttons {
  width: 100%;
  height: 5.7vh;
  padding-left: 1.56vw;
  padding-right: 1.56vw;
  padding-top: 1.48vh;
  padding-bottom: 1.48vh;
  margin-bottom: 2.13vh;
  // background: linear-gradient(179deg, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0) 100%);
  // background-image: url(../../images/tab-buttons.png);
  background-size: 100% 100%;
  border-radius: 79px 79px 79px 79px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tab-buttons>div {
  width: 6.87vw;
  height: 4.44vh;
  line-height: 4.44vh;
  text-align: center;
  cursor: pointer;
  color: #f8f8f8;
}

.tab-buttons div.active {
  background-image: url(../../images/tab-button.png);
  background-size: 100% 100%;
  /* 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;
}
.tab-detail {
  position: absolute;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 70vw;
  height: 60vh;
  z-index: 3;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 2.08vw;
}
.item-detail {
  position: absolute;
  z-index: 9999;
  top: 0;
  left: 72vw;
  width: 25vw;
  height: 60vh;
  z-index: 3;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 2.08vw;
}
.my-tab {
  width: 70vw;
  height: 60wh;
}

.tabListBoxSettings {
  padding-top: 0vh;
}
.tabListBox {
  // padding-top: 11.29vh;
  padding-top: 2vh;
}
.done-button {
  width: 11.6vw;
  height: 4.25vh;
  line-height: 4.25vh;
  background: linear-gradient(180deg, #83cbfb 0%, #2e74b2 100%);
  border-radius: 67px 67px 67px 67px;
  opacity: 1;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  right: 0.93vw;
}

.cancel-button {
  width: 11.6vw;
  height: 4.25vh;
  line-height: 4.25vh;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 67px 67px 67px 67px;
  opacity: 1;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  left: 0.93vw;
}
</style>