cas_cloud_admin/src/views/components/FieldSingle/index.vue

<template>
  <el-form
      ref="form"
      :label-width="labelWidth + 'px'"
      :model="modelValue"
      :rules="rules"
  >
    <el-row>
      <el-col :span="24">
        <el-form-item label="所属领域:">
          <el-row justify="space-between" type="flex">
            <el-col :span="7">
              <el-form-item prop="industrys">
                <el-select
                    v-model="modelValue.industrys[0]"
                    placeholder="请选择"
                    value-key="id"
                    @change="levelIChange"
                >
                  <el-option
                      v-for="item in levelI"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-select
                  v-model="modelValue.industrys[1]"
                  placeholder="请选择"
                  value-key="id"
                  @change="levelIIChange"
              >
                <el-option
                    v-for="item in levelII"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="7">
              <el-select
                  v-model="modelValue.industrys[2]"
                  placeholder="请选择"
                  value-key="id"
              >
                <el-option
                    v-for="item in levelIII"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup>
import {listSysIndustry} from "@/api/platform/industry";
// import { watch } from "fs";
import {reactive, toRefs, watch} from "vue";

const props = defineProps({
  modelValue: Object,
  labelWidth: {
    type: Number,
    default: 120,
  },
});
const {modelValue, labelWidth} = toRefs(props);
const data = reactive({
  rules: {
    industrys: [
      {
        type: "array",
        required: true,
        message: "请选择",
        trigger: "change",
      },
    ],
  },
});

const {rules} = toRefs(data);
const levelI = ref([]);
const levelII = ref([]);
const levelIII = ref([]);

// 获取领域树形列表
const getIndustryTreeData = async () => {
  const {data} = await listSysIndustry();
  levelI.value = data;
};

const levelIChange = async (item) => {
  delete modelValue.value.industrys[1];
  delete modelValue.value.industrys[2];
  // levelII.value = levelI.value.find((el) => {
  //   return el.id === item;
  // }).children;
};

const levelIIChange = async (item) => {
  delete modelValue.value.industrys[2];
  // levelIII.value = levelII.value.find((el) => el.id === item).children;
};
getIndustryTreeData().then(() => {
  watch(
      () => modelValue.value.industrys[0],
      (val) => {
        levelII.value =
            levelI.value.find((el) => {
              return el.id == val;
            })?.children ?? [];
      },
      {immediate: true}
  );
  watch(
      () => modelValue.value.industrys[1],
      (val) => {
        levelIII.value =
            levelII.value.find((el) => {
              return el.id == val;
            })?.children ?? [];
      },
      {immediate: true}
  );
});
</script>