dingxin_toolbox_vue/src/components/ec_api/TabArea.vue

<script setup>
import {ref, reactive, onBeforeMount, onMounted, onUnmounted, watch} from "vue";
import {getCurrentInstance} from 'vue'
import Sortable from "sortablejs";
import {useStore, mapState} from "vuex";
import {nextTick} from "vue";
import JsonEditorVue from "json-editor-vue3";


// 注册store
const store = useStore()

// 标签相关的定义
const tabsRef = ref(null);  // tabs的Ref
const activeTab = ref(store.state.ecApiModule.first_tab_api_id); // 当前选项卡，存储的是api_id


// 表格相关的定义
const ApiTableRef = ref(null)  // 表格的Ref
// const multipleSelection = ref([])  // checkbox的处理

// 定义变量用于存储接口设置的数据
const UserApiData = ref({api: {}, base_info: {}, tab: {}})

// 表格逻辑
// 多选改变后处理逻辑
function handleParamsChange(newCheckedResult) {
  // console.log('handleParamsChange', newCheckedResult)
  // console.log('activeTab.value', activeTab.value)
  // console.log('UserApiData.value.api[activeTab.value]', UserApiData.value.api[activeTab.value])
}

// 遍历当前标签页下的参数如果勾选则标记is_checked为true
function handleParamsSelect(val) {
  UserApiData.value.api[activeTab.value].params.forEach(param => {
    param['is_checked'] = val.indexOf(param) >= 0;
  })
}

// 自动勾选行 切换标签后检查全部字段，如果字段的is_checked是true则在页面上勾选字段
function markIsChecked() {
  if (UserApiData.value.hasOwnProperty('api') || UserApiData.value.api.length > 0) {
    UserApiData.value.api[activeTab.value].params.forEach(item => {
      if (item['is_checked'] === true) {
        ApiTableRef.value[UserApiData.value.tab[activeTab.value]].toggleRowSelection(item, true)
      }
    })
  }
}

// 初始逻辑数据逻辑处理
function initApiData() {
  // 更新基础数据
  UserApiData.value['base_info'] = {
    env: store.state.ecApiModule.ec_api_data.env,
    cinema: store.state.ecApiModule.ec_api_data.cinema,
    channel: store.state.ecApiModule.ec_api_data.channel,
  }
  // 根据store.state.ecApiModule.ec_api_data.api来创建本都数据
  let api_id_array = []
  let api_tab = {}
  if (store.state.ecApiModule.ec_api_data.api) {
    store.state.ecApiModule.ec_api_data.api.forEach((item, index) => {
      api_id_array.push(item.id)
      api_tab[item.id] = index
      if (!UserApiData.value['api'].hasOwnProperty(item.id)) {
        UserApiData.value['api'][item.id] = {
          'id': item.id,
          'description': item.description,
          'path': item.path,
          'type': item.type,
          'params': store.state.ecApiModule.ec_api_data.api_params[item.id]
        }
      }
    })
    // 如果删除某接口后同步删除UserApiData中的数据
    Object.values(UserApiData.value['api']).forEach((api) => {
      if (api_id_array.indexOf(api['id']) < 0) {
        delete UserApiData.value['api'][api['id']]
      }
    })
    // 把生成的接口数据赋给UserApiData
    UserApiData.value.tab = api_tab
  }
}

// 添加新字段
function addNewParams() {
  UserApiData.value.api[activeTab.value].params.push({
    id: Date.now(),
    api_id: activeTab.value,
    param: '',
    value: '',
    is_request: false,
    is_checked: false,
    is_preset: false
  })
}

function test() {
  console.log('store.state.ecApiModule.ec_api_data.api', store.state.ecApiModule.ec_api_data.api)
  console.log('UserApiData.value', UserApiData.value)
  console.log('activeTab.value', activeTab.value)
}

// 监测ec_select_api的变化 生成新的本地数据，如果当前选中的标签被取消勾选，则选择剩下标签的第一个
watch(() => store.state.ecApiModule.ec_api_data.api, (oldValue, newValue) => {
  // 接口数据变化后初始化本地数据
  initApiData()
  // 处理空标签逻辑
  const select_api_id = store.getters['ecApiModule/ec_select_api_getter']
  if (select_api_id.indexOf(activeTab.value) < 0) {
    activeTab.value = select_api_id[0]
  }
}, {deep: true})

// 监测activeTab， 如果切换标签页，则执行自动勾选的函数
watch(activeTab, () => {
  markIsChecked()
})


/*
生命周期逻辑
*/
onBeforeMount(
    () => {
      // console.log('TabArea onBeforeMount')
      // 处理请求参数生成本地数据结构
      initApiData()
    }
)

// 挂载后
onMounted(() => {
  // console.log('TabArea onMounted')
  // 勾选is_checked选项
  markIsChecked()
  // 处理拖拽
  const elTabsHeader = tabsRef.value.$el.querySelector('.el-tabs__header .el-tabs__nav');
  const sortTabs = new Sortable(elTabsHeader, {
    animation: 150,
    ghostClass: 'dragging',
    draggable: '.el-tabs__item',
    onEnd: (evt) => {
      console.log('evt.newIndex, evt.oldIndex', evt.newIndex, evt.oldIndex)
      console.log('activeTab.value', activeTab.value)
      store.commit('ecApiModule/handle_sort_ec_select_api', {'newIndex': evt.newIndex, 'oldIndex': evt.oldIndex})
    },
  });
});
</script>

<template>
  <el-tabs ref="tabsRef" v-model="activeTab" type="border-card">
    <el-tab-pane
        v-for="(api, index) in store.state.ecApiModule.ec_api_data.api"
        :key="api['id']"
        :label="api['description']"
        :name="api['id']"
    >
      <el-table
          ref='ApiTableRef'
          :data="UserApiData.api[api['id']].params"
          @selection-change="handleParamsChange"
          @select="handleParamsSelect"
      >
        <el-table-column type="selection" width="50"/>
        <el-table-column label="字段名" width="120">
          <template v-slot="scope">
            <span v-if="scope.row.is_preset">{{ scope.row.param }}</span>
            <span v-else><el-input type="text" placeholder="输入字段名" v-model="scope.row.param"></el-input></span>
          </template>
        </el-table-column>
        <el-table-column label="字段值" width="800">
          <template v-slot="scope">
            <el-input type="textarea" placeholder="输入字段值" v-model="scope.row.value" rows="1"
                      v-if="scope.row.value === 'json' && scope.row.param === 'format'" disabled></el-input>
            <el-input type="textarea" placeholder="输入字段值" v-model="scope.row.value" rows="1" v-else></el-input>
          </template>
        </el-table-column>
        <el-table-column label="必选" width="80">
          <template v-slot="scope">
            <span>{{ scope.row.is_request ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" show-overflow-tooltip/>
      </el-table>
      <el-row class="BtnRow" style="width: 100%">
        <el-col :span="2">
          <el-button type="primary" @click="addNewParams">添加新字段</el-button>
        </el-col>
      </el-row>
      <el-row class="BtnRow" style="width: 100%" :gutter="10">
        <el-col :span="2"><span>请求地址：</span></el-col>
        <el-col :span="12">
          <el-input type="text"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="test">发送</el-button>
        </el-col>
        <el-col :span="8">
        </el-col>
      </el-row>
            <JsonEditorVue class="editor" v-model="json_data" language="zh-CN" @change="handleRunningChange"
                           style="width: 1600px"/>
    </el-tab-pane>
  </el-tabs>
</template>

<style scoped>
.BtnRow {
  margin-top: 10px;
}

.editor {
  margin-top: 20px;
}

</style>