dingxin_toolbox_vue/src/views/mock/index.vue

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

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

// let mock_config = ref(
//     {
//       // 数据下载
//       download_film_info: false,
//       get_cinema_info: false,
//       get_screen_info: false,
//       // 数据上报
//       report_ticket: false,
//       report_film_schedule: false,
//       upload_screen_seat_info: false,
//       // 超时票务审核
//       get_overtime_ticket_status: false,
//       // 数据查询
//       valid_error: false,
//
//       data_download_check_all: false,
//       data_download_indeterminate: false,
//     }
// )
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 mockConfig = ref(
    [
      {
        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: '数据清洗错误查询接口'},]
    }
    ])

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="mockConfig"
  >
    <el-row justify="start">
      <el-col :span="5">
        <el-select v-model="select_ip" class="m-2" placeholder="选择要模拟的影院IP">
          <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>
        <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change=""
        >
          全选
        </el-checkbox>
      </p>
    </div>
    <el-checkbox-group
        v-model="checkedMockConfig"
        @change=""
    >
      <div 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=24/api_items.items.length v-for="api in api_items">
            <el-checkbox
                :key="api.key"
                :label="api.key"
            >
              {{ api.name }}
            </el-checkbox>
          </el-col>
        </el-row>
      </div>
    </el-checkbox-group>
  </el-form>
</template>

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

div.api_desc {
  text-align: left;
}

</style>