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,
    }
)


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)
  })
}

const handle_download_all_Change = (val) => {
  if (mock_config.value.download_film_info && mock_config.value.get_cinema_info && mock_config.value.get_screen_info) {
    mock_config.value.data_download_check_all = true
    mock_config.value.data_download_indeterminate = false
  } else if (mock_config.value.download_film_info || mock_config.value.get_cinema_info || mock_config.value.get_screen_info){
    mock_config.value.data_download_check_all = false
    mock_config.value.data_download_indeterminate = true
  }
  else{
    mock_config.value.data_download_check_all = false
    mock_config.value.data_download_indeterminate = false
  }
  // if (mock_config.value.data_download_check_all === true && mock_config.value.data_download_indeterminate === false) {
  //   mock_config.value.download_film_info = true
  //   mock_config.value.get_cinema_info = true
  //   mock_config.value.get_screen_info = true
  // }
  // else {
  //   mock_config.value.download_film_info = false
  //   mock_config.value.get_cinema_info = false
  //   mock_config.value.get_screen_info = false
  // }
}

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>
      </p>
    </div>
    <el-divider content-position="left">
      <el-checkbox
          v-model="mock_config.data_download_check_all"
          :indeterminate="mock_config.data_download_indeterminate"
          @change="handle_download_all_Change"
      >
        <span class="api_class">数据下载</span>
      </el-checkbox>
    </el-divider>
<!--    <el-checkbox-group>-->
      <el-row :gutter="0">
        <el-col :span="8">
          <el-checkbox
              v-model="mock_config.download_film_info"
              key="download_film_info"
              label="download_film_info"
              @change="handle_download_all_Change"
          >
            影片信息下载接口
          </el-checkbox>
        </el-col>
        <el-col :span="8">
          <el-checkbox
              v-model="mock_config.get_cinema_info"
              key="get_cinema_info"
              label="get_cinema_info"
              @change="handle_download_all_Change">
            影院信息下载接口
          </el-checkbox>
        </el-col>
        <el-col :span="8">
          <el-checkbox
              v-model="mock_config.get_screen_info"
              key="get_screen_info"
              label="get_screen_info"
              @change="handle_download_all_Change">
            影厅信息下载接口
          </el-checkbox>
        </el-col>
      </el-row>
<!--    </el-checkbox-group>-->


  </el-form>
</template>

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

div.api_desc {
  text-align: left;
}

</style>