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

<template>
  <el-form
    ref="form"
    :model="modelValue"
    :rules="rules"
    :label-width="labelWidth + 'px'"
  >
    <el-row>
      <el-col :span="24">
        <el-form-item label="所属领域:">
          <el-row type="flex" justify="space-between">
            <el-col :span="7">
              <el-form-item prop="industrys">
                <el-select
                  v-model="modelValue.industrys[0]"
                  value-key="id"
                  placeholder="请选择"
                  @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]"
                value-key="id"
                placeholder="请选择"
                @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]"
                value-key="id"
                placeholder="请选择"
              >
                <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/config";
// import { watch } from "fs";
import {reactive, ref, 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;
};

// watch(
//   modelValue,
//   (val) => {
//     if (val.industrys[1]) {
//       // delete val.industrys[2];
//       levelIII.value = levelII.value.find((el) => el.id === item).children;
//     }
//     if (val.industrys[0]) {
//       // delete val.industrys[1];
//       // delete val.industrys[2];
//       // levelII.value = levelI.value.find((el) => {
//       //   return el.id === item;
//       // }).children;
//       console.log(123);
//     }
//   },
//   { deep: true, immediate: true }
// );

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) => {
      // console.log(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>
<!-- <script>
// import { industry } from "@/api/config";
export default {
  props: {
    modelValue: Object,
    labelWidth: {
      type: Number,
      default: 120,
    },
  },
  data() {
    return {
      levelI: [], // I级数据
      levelII: [], // II级数据
      levelIII: [], // III级数据
      rules: {
        industrys: [
          {
            type: "array",
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
      },
    };
  },
  watch: {
    // modelValue(newVal, oldVal) {
    //   let _key = [];
    //   let _value = [];
    //   for (let i = 0; i < newVal.industrys.length; i++) {
    //     const item = newVal.industrys[i];
    //     _key.push(item.key);
    //     _value.push(item.value);
    //   }
    //   newVal.industrys = _key;
    // },
  },
  methods: {
    getFieldByParent(id) {
      return new Promise((resolve, reject) => {
        industry({ parent_id: id })
          .then(({ code, msg, data }) => {
            if (code == 200) {
              resolve(data);
            } else {
              this.$modal.msgError(msg);
              reject({ msg, code });
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    async levelIChange(id) {
      delete this.modelValue.industrys[1];
      delete this.modelValue.industrys[2];
      this.levelII = await this.getFieldByParent(id);
    },
    async levelIIChange(id) {
      delete this.modelValue.industrys[2];
      this.levelIII = await this.getFieldByParent(id);
    },
    submitForm() {
      let flag = false;
      this.$refs["form"].validate((valid) => {
        flag = valid;
      });
      return flag;
    },
  },
  created() {
    industry().then((res) => {
      this.levelI = res.data;
    });
  },
};
</script> -->