dingxin_toolbox_vue/src/components/ec_api/BasicConfig.vue

<script setup>
import {
  get_ec_api_env,
  get_ec_api_cinema,
  get_ec_api_channel,
  get_ec_api_api,
  get_ec_api_api_group,
  get_ec_api_api_params,
  get_ec_api_api_params_by_type
} from "@/apis/ec_api.js";
import {ref, reactive, toRefs} from "vue";
import {onMounted} from "vue";
import {useStore} from "vuex";
import {change_cinema_user} from "@/apis/update.js";


// 注册store
const store = useStore()

// 定义环境相关变量
const Env = ref({})
const EnvArray = []
const SelectEnv = ref('')

// 定义影院相关变量
const Cinema = ref({})
let CinemaByEnv = []
const SelectCinema = ref('')

// 定义接口类型
const ApiType = [{name: "非会员", value: "nonmember"}, {name: "会员", value: "member"}]
const SelectType = ref('')

// 定义渠道相关变量
const Channel = ref({})
let ChannelByType = []
const SelectChannel = ref('')

// 定义接口相关变量
const Api = ref([])  // 存储接口数据
const SelectApiId = ref([])  // 存储选择的接口
const SelectApi = ref([])  // 存储选择的接口

// 定义接口组相关变量
const ApiGroup = ref({})
const SelectApiGroup = ref([])

// 定义接口参数
const ApiParams = ref({})
const SelectApiParams = ref({})


// 通过环境计算影院
function env_on_change() {
  // 初始化值
  CinemaByEnv = []
  SelectCinema.value = ''
  SelectType.value = ''
  SelectChannel.value = ''
  // 处理计算逻辑
  Cinema.value.forEach(data => {
    if (data.env === SelectEnv.value) {
      CinemaByEnv.push(data)
    }
  })
}

// 通过类型和环境计算渠道
function type_on_change() {
  // 重置数据
  ChannelByType = []
  SelectChannel.value = ''
  SelectApiId.value = []
  SelectApiGroup.value = []
  // 计算渠道
  Channel.value.forEach(data => {
    if (data.type === SelectType.value && data.env === SelectEnv.value) {
      ChannelByType.push(data)
    }
  })
  // 获取接口组数据
  get_api_group_by_type(SelectType.value)
  // 获取接口数据
  get_api_by_type(SelectType.value)
  // 获取接口参数
  get_api_params_by_type(SelectType.value)
}

function basic_info_change() {
  store_data()
}

// 获取接口
async function get_api_by_type(api_type) {
  await get_ec_api_api(api_type).then(res => {
    Api.value = res
  })
}

// 获取 接口组
async function get_api_group_by_type(api_type) {
  await get_ec_api_api_group(api_type).then(res => {
    ApiGroup.value = res
  })
}

// 获取 接口参数
async function get_api_params_by_type(api_type) {
  await get_ec_api_api_params_by_type(api_type).then(res => {
    ApiParams.value = res
  })
}

// OnChange相关
// 选择接口组后自动勾选接口
function api_group_on_change() {
  SelectApiId.value = JSON.parse(String(SelectApiGroup.value))
  handle_api_data()
  store_data()

}

// 修改了接口后，取消选择接口组
function api_on_change() {
  SelectApiGroup.value = []
  handle_api_data()
  store_data()
}

function handle_api_data() {
  // 生成被选择的api的数组
  SelectApi.value = []
  SelectApiId.value.forEach(api_id => {
    Api.value.forEach(api => {
      if (api.id === api_id) {
        SelectApi.value.push(api)
      }
    })
  })
  // 生成被选择的api参数对象
  SelectApiId.value.forEach(api_id => {
    if (ApiParams.value.hasOwnProperty(api_id)) {
      SelectApiParams.value[api_id] = ApiParams.value[api_id]
      SelectApiParams.value[api_id].forEach(item => item['is_preset'] = true)
    }
  })
}

// 生成共享数据
function store_data() {
  let select_data = ref({
    env: SelectEnv.value,
    cinema: SelectCinema.value,
    channel: SelectChannel.value,
    select_api_id: SelectApiId.value,
    api: SelectApi.value,
    api_params: SelectApiParams.value
  })
  console.log('select_data.value', select_data.value)
  // 写入store
  store.commit('ecApiModule/add_ec_api_data', select_data.value)
  store.commit('ecApiModule/change_ec_select_api', SelectApi.value)
  console.log('store.state.ecApiModule.ec_api_data', store.state.ecApiModule.ec_api_data)
}


onMounted(() => {
  // 获取环境
  get_ec_api_env().then(res => {
    Env.value = res
    Env.value.forEach(data => {
      if (!EnvArray.some(item => item.name === data.name)) {
        EnvArray.push({name: data.name, code: data.code})
      }
    })
  });

  // 获取影院
  get_ec_api_cinema().then(res => {
    Cinema.value = res
  })

  // 获取渠道
  get_ec_api_channel().then(res => {
    Channel.value = res
  })
})


</script>

<template>
  <div class="row-container">
    <el-row justify="start">
      <el-col :span="6">
        <label class="name-label">环境：</label>
        <el-select v-model="SelectEnv" placeholder="请选择" style="width: 240px" size="default"
                   @change="env_on_change">
          <el-option
              v-for="item in EnvArray"
              :key="item.code"
              :label="item.name"
              :value="item.code"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <label class="name-label">影院：</label>
        <el-select v-model="SelectCinema" placeholder="请选择" style="width: 160px" size="default" @change="basic_info_change">
          <el-option
              v-for="item in CinemaByEnv"
              :key="item.id"
              :label="item.cinema_name"
              :value="item.cid"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <label class="name-label">接口类型：</label>
        <el-select v-model="SelectType" placeholder="请选择" style="width: 120px" size="default"
                   @change="type_on_change">
          <el-option
              v-for="item in ApiType"
              :key="item.value"
              :label="item.name"
              :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <label class="name-label">渠道：</label>
        <el-select v-model="SelectChannel" placeholder="请选择" style="width: 160px" size="default" @change="basic_info_change">
          <el-option
              v-for="item in ChannelByType"
              :key="item.id"
              :label="item.name"
              :value="item.pid"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-row>
  </div>
  <div class="row-container">
    <el-row justify="start">
      <el-col :span="6">
        <label class="name-label">常用场景：</label>
        <el-select v-model="SelectApiGroup" placeholder="请选择" style="width: 240px" size="default"
                   @change="api_group_on_change">
          <el-option
              v-for="item in ApiGroup"
              :key="item.group_id"
              :label="item.name"
              :value="item.api_id"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-row>
  </div>
  <div class="row-container">
    <el-row justify="start">
      <el-col :span="6">
        <label class="name-label">接口：</label>

        <el-select v-model="SelectApiId" placeholder="请选择" style="width: 240px" size="default" multiple collapse-tags
                   collapse-tags-tooltip :clearable="true" @change="api_on_change">
          <el-option
              v-for="item in Api"
              :key="item.id"
              :label="item.description"
              :value="item.id"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.row-container {
  margin-bottom: 20px;
}

.name-label {
  width: 80px;
  display: inline-block;
  text-align: right;
}
</style>