A page that displays the secondary menu

<script setup>
import {onMounted, onBeforeMount, ref} from "vue";
import axios from "../http/axios";
import {ElMessage} from "element-plus";
import {useStore} from "vuex";
import defaultLogo from '../assets/logo.png'

const img = import.meta.globEager("./../assets/img/*")
const props = defineProps({
  projectId: Number,
  platform: Number,
  caseId: Number
})
const store = useStore()
const testCase = ref({
  id: null,
  name: "",
  platform: props.platform,
  projectId: props.projectId,
  module: "",
  version: "",
  designer: "",
  des: ""
})
const moduleList = ref([])
const versionList = ref([])
const moduleValue = ref([])

const getImg = (name) => {
  let result;
  if (name === 'meizu') {
    name = 'Meizu'
  }
  if (name === 'LENOVO') {
    name = 'Lenovo'
  }
  try {
    result = img['./../assets/img/' + name + '.jpg'].default
  } catch {
    result = img['./../assets/img/unName.jpg'].default
  }
  return result;
}
const platformList = [{name: "安卓", value: 1, img: "ANDROID"}
  , {name: "iOS", value: 2, img: "IOS"}]

const caseStatusList = [{name: "制作中", value: 1}, {name: "完成制作", value: 2}, {name: "验证通过", value: 3}, {name: "验证失败", value: 4}, {name: "用例失效", value: 5}]
const emit = defineEmits(['flush']);
const caseForm = ref(null);
const summit = () => {
  caseForm['value'].validate((valid) => {
    if (valid) {
      debugger
      axios.put("/controller/testCases", testCase.value).then(resp => {
        if (resp['code'] === 2000) {
          ElMessage.success({
            message: resp['message'],
          });
          emit("flush");
        }
      })
    }
  })
}
const getCaseInfo = (id) => {
  debugger
  axios.get("/controller/testCases", {params: {id}}).then(resp => {
    if (resp['code'] === 2000) {
      testCase.value = resp.data
    }
  })
}

const getModuleList = (e) => {
  if (e) {
    axios.get("/controller/modules/allList", {params: {projectId: props.projectId}}).then(resp => {
      if (resp['code'] === 2000) {
        moduleList.value = resp.data
      }
    })

    // axios.get("/controller/modules/list/detail", {params: {projectId: props.projectId}}).then(resp => {
    //   if (resp['code'] === 2000) {
    //     moduleList.value = resp.data
    //   }
    // })
  }

}
const getVersionList = (e) => {
  if (e) {
    axios.get("/controller/versions/list", {params: {projectId: props.projectId}}).then(resp => {
      if (resp['code'] === 2000) {
        versionList.value = resp.data
      }
    })
  }
}

/**
 * 获取选择的模块类型数据，父子节点以数组方式传递
 * 将获取到的数据赋值给测试用例的module属性
 * @param value
 */
const getModuleChoose = (value) => {
  if (value.length > 1){
    testCase.value.module = value[0] + "," + value[1]
  }else {
    ElMessage.error({
      message: "Illegal Data, please Contact administrator...",
    })
  }

}
/**
 * 组件挂载到节点上之前执行
 */
onBeforeMount (() => {
  getCaseInfoModule(props.caseId)

})

const getCaseInfoModule = (id) => {
  axios.get("/controller/testCases", {params: {id}}).then(resp => {
    if (resp['code'] === 2000) {
      let mValueArray = resp.data.module.split(",")
      moduleValue.value = [mValueArray[0],mValueArray[1]]
      alert("getCaseInfoModule----->"+moduleValue.value)
    }
  })
}

/**
 * 组件挂载完成后执行
 */
onMounted(() => {
  if (props.caseId !== 0) {
    getCaseInfo(props.caseId)
    getModuleList(props.projectId)
  }
})


</script>
<template>
  <el-form
      label-position="left"
      class="demo-table-expand"
      label-width="90px"
      ref="caseForm"
      :model="testCase"
      size="small"
  >
    <el-form-item
        prop="name"
        label="用例名称"
        :rules="{
            required: true,
            message: '请填写用例名称',
            trigger: 'blur',
          }"
    >
      <el-input v-model="testCase.name" size="mini" placeholder="输入用例名称"/>
    </el-form-item>
    <el-form-item
        prop="projectId"
        label="所属项目"
        :rules="{
            required: true,
            message: '请选择项目',
            trigger: 'change',
          }"
    >
      <el-select
          v-model="testCase.projectId"
          placeholder="请选择项目"
      >
        <el-option
            v-for="item in store.state.projectList"
            :key="item.id"
            :value="item.id"
            :label="item['projectName']"
        >
          <div style=" display: flex;align-items: center;">
            <el-avatar
                style="margin-right: 10px"
                :size="32"
                :src="item['projectImg'].length>0?item['projectImg']:defaultLogo"
                shape="square"
            ></el-avatar
            >
            {
   
   { item['projectName'] }}
          </div>
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item
        prop="platform"
        label="平台"
        :rules="{
            required: true,
            message: '请选择平台',
            trigger: 'change',
          }"
    >
      <el-select
          v-model="testCase.platform"
          placeholder="请选择平台"
      >
        <el-option
            v-for="item in platformList"
            :key="item.name"
            :value="item.value"
            :label="item.name"
            :disabled="item.disabled"
        >
          <div style="display: flex;align-items: center;justify-content: center">
            <el-avatar
                style="margin-right: 10px"
                :size="32"
                :src="getImg(item.img)"
                shape="square"
            ></el-avatar
            >
            {
   
   { item.name }}
          </div>
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item
        prop="testCaseStatus"
        label="用例状态"
        :rules="{
            required: true,
            message: '请选择测试用例状态',
            trigger: 'change',
          }"
    >
      <el-select
          v-model="testCase.testCaseStatus"
          placeholder="请选择用例状态"
      >
        <el-option
            v-for="item in caseStatusList"
            :key="item.name"
            :value="item.value"
            :label="item.name"
            :disabled="item.disabled"
        >
          <div style="display: flex;align-items: center;justify-content: center">
            {
   
   { item.name }}
          </div>
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item
        label="模块"
    >
<!--      留着备用-->
      <el-cascader :options="moduleList"
                   v-model="moduleValue"
                   @visible-change="getModuleList"
                   :props="{ checkStrictly: false , label: 'label', value: 'value', children: 'children'}"
                   placeholder="请选择模快"
                   @change="getModuleChoose"
                   :show-all-levels="false">





      </el-cascader>


<!--      <el-select-->
<!--          v-model="testCase.module"-->
<!--          placeholder="请选择模块"-->
<!--          @visible-change="getModuleList"-->
<!--      >-->
<!--        <el-option-->
<!--            v-for="item in moduleList"-->
<!--            :key="item.name"-->
<!--            :value="item.name"-->
<!--            :label="item.name"-->
<!--        >-->
<!--        </el-option>-->
<!--      </el-select>-->
    </el-form-item>
    <el-form-item
        label="版本"
    >
      <el-select
          v-model="testCase.version"
          placeholder="请选择版本"
          @visible-change="getVersionList"
      >
        <el-option
            v-for="item in versionList"
            :key="item['versionName']"
            :value="item['versionName']"
            :label="item['versionName']"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item
        label="用例描述"
    >
      <el-input v-model="testCase.des"
                :autosize="{ minRows: 3, maxRows: 7 }"
                :maxlength="240"
                show-word-limit
                type="textarea" size="mini" placeholder="输入用例描述"/>
    </el-form-item>
  </el-form>
  <div style="text-align: center;margin-top: 20px">
    <el-button @click="summit" size="small" type="primary">提交</el-button>
  </div>
</template>