dingxin_toolbox_vue/src/views/mock/index.vue

<script setup>
import {cinema_list} from '@/apis/update.js';
import {onMounted} from "vue";
import {ref, computed} from "vue";
import {InfoFilled} from "@element-plus/icons-vue";
import JsonEditorVue from "json-editor-vue3";

const mockConfigPost = ref()
let cinema_items = ref([]);
const select_ip = ref('')

const checkAll = ref(false)
const isIndeterminate = ref(false)
const checkedMockConfig = ref([])
const mockConfigItems = ['download_film_info', 'get_cinema_info', 'get_screen_info', 'report_ticket',
  'report_film_schedule', 'upload_screen_seat_info', 'get_overtime_ticket_status', 'valid_error']

const tabs_dict = [
  {label: '影片信息下载', name: 'download_film_info'},
  {label: '影院信息下载', name: 'get_cinema_info'},
  {label: '影厅信息下载', name: 'get_screen_info'},
  {label: '票房数据上报', name: 'report_ticket'},
  {label: '排片数据上报', name: 'report_film_schedule'},
  {label: '座位信息上报', name: 'upload_screen_seat_info'},
  {label: '超时票务查询', name: 'get_overtime_ticket_status'},
  {label: '数据清洗查询', name: 'valid_error'},
]
const tabs_array = computed(() => {
  const tabs = []
  tabs_dict.forEach((tab_item, index) => {
    if (checkedMockConfig.value.indexOf(tab_item.name) >= 0) {
      tabs.push(tab_item)
    }
  })
  console.log(select_ip.value)
  return tabs
})

const activeName = ref(0)

const handleClick = (tab, event) => {
  console.log(tab.paneName)
  if (tab.name === 1){
    console.log('tab', tab.label)
  }
}


const json_data = {"a": 1, "b": "c"}
const mockConfig =
    [
      {
        label: '数据下载',
        items: [{key: 'download_film_info', name: '影片信息下载接口'},
          {key: 'get_cinema_info', name: '影院信息下载接口'},
          {key: 'get_screen_info', name: '影厅信息下载接口'}]
      }, {
      label: '数据上报',
      items: [{key: 'report_ticket', name: '票房数据上报接口'},
        {key: 'report_film_schedule', name: '排片数据上报接口'},
        {key: 'upload_screen_seat_info', name: '座位信息上报接口'}]
    }, {
      label: '超时票务审核',
      items: [{key: 'get_overtime_ticket_status', name: '超时票务查询接口'},]
    }, {
      label: '数据查询',
      items: [{key: 'valid_error', name: '数据清洗查询接口'},]
    }
    ]

const handleIpChange = () => {
  checkedMockConfig.value = []
  checkAll.value = false
  isIndeterminate.value = false
}

const handleCheckAllChange = (val) => {
  if (select_ip.value === '') {
    alert('请先选择测试影院IP！')
    checkedMockConfig.value = []
    return
  }
  console.log(tabs_array.value.length)
  checkedMockConfig.value = val ? mockConfigItems : []
  isIndeterminate.value = false
}
const handleCheckedMockChange = (value) => {

  if (select_ip.value === '') {
    alert('请先选择测试影院IP！')
    checkedMockConfig.value = []
    return
  }
  console.log(tabs_array.value.length)
  console.log(tabs_array.value.length)
  const checkedCount = value.length
  checkAll.value = checkedCount === mockConfigItems.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < mockConfigItems.length
}

async function get_cinema_items() {
  cinema_items = []
  await cinema_list().then(res => {
    if (Array.isArray(res)) {
      const ip_list = res.map((item, index) => {
        return {value: item.ip, label: item.ip}
      })
      cinema_items.value = [...ip_list]
      console.log(cinema_items)
    } else {
      console.log('else')
    }
  }).catch(err => {
    console.log('err')
    console.log(err)
  })
}


onMounted(
    async () => {
      await get_cinema_items();
    }
)

</script>

<template>
  <el-form
      ref="mockConfigPost"
  >
    <el-row justify="start">
      <el-col :span="4">
        <el-select v-model="select_ip" class="m-2" placeholder="选择要模拟的影院IP" @change="handleIpChange">
          <el-option
              v-for="item in cinema_items.value"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-col>
    </el-row>
    <div class="api_desc">
      <p>接口设置
        <el-popover
            placement="top-start"
            title="接口设置说明："
            :width="400"
            trigger="hover"
            content="勾选需要测试的接口，点击‘开始’，启动对应单机的接口模拟，未勾选的接口会直接穿透到专资"
        >
          <template #reference>
            <el-icon>
              <InfoFilled/>
            </el-icon>
          </template>
        </el-popover>
      </p>
    </div>
    <el-row justify="start">
      <el-col :span="1">
        <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
        >
          全选
        </el-checkbox>
      </el-col>
    </el-row>
    <el-checkbox-group
        v-model="checkedMockConfig"
        @change="handleCheckedMockChange"
    >
      <template v-for="api_items in mockConfig">
        <el-divider content-position="left">
          <span class="api_label">{{ api_items.label }}</span>
        </el-divider>
        <el-row justify="start">
          <el-col :span=5 v-for="api in api_items.items">
            <el-checkbox
                :key="api.key"
                :label="api.key"
            >
              {{ api.name }}
            </el-checkbox>
          </el-col>
        </el-row>
      </template>
    </el-checkbox-group>
    <br>
    <el-row justify="start">
      <el-row :span="12">
        <el-button>开始</el-button>
        <el-button>停止</el-button>
      </el-row>
    </el-row>

  </el-form>
  <br>
  <div>
    <el-tabs v-model="activeName" class="api_tabs" @tab-click="handleClick">
      <el-tab-pane v-for="(tab,index) in tabs_array" :label="tab.label" :name="index">
        <div v-if="tabs_array[index].name==='get_overtime_ticket_status'">
          <el-row>
            <el-col :span="4">
              <label class="api-label">售/退</label>&nbsp
              <el-select>

              </el-select>
            </el-col>
            <el-col :span="6">
              <label class="api-label">场次</label>&nbsp
              <el-select style="width: 75%">

              </el-select>
            </el-col>
            <el-col :span="6">
              <label class="api-label">审核结果</label>&nbsp
              <el-select>

              </el-select>
            </el-col>
          </el-row>
        </div>
        <JsonEditorVue class="editor" v-model="json_data" language="zh-CN"/>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<style scoped>
span.api_label {
  font-size: 14px;
}

div.api_desc {
  text-align: left;
}

.el-divider--horizontal {
  line-height: 1;
}

.editor {
  width: 75%;
  margin-top: 10px;
}
.api-label {
  font-size: 14px;
}

</style>