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";

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 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 handleCheckAllChange = (val) => {
  checkedMockConfig.value = val ? mockConfigItems : []
  isIndeterminate.value = false
}

const handleCheckedMockChange = (value) => {
  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">
          <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>
  </el-form>
</template>

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

div.api_desc {
  text-align: left;
}

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


</style>