SiteOptions

src/views/components/FieldOptions/index.vue

@@ -1,6 +1,6 @@
 <template>
   <el-form
-    ref="form"
+    ref="formRef"
     :model="value"
     :rules="rules"
     :label-width="labelWidth + 'px'"
@@ -86,39 +86,144 @@
     </el-row>
   </el-form>
 </template>
-<script>
+<script setup name="FieldOptions">
 import { industry } from "@/api/config";
-export default {
-  props: {
-    value: Object,
-    labelWidth: {
-      type: Number,
-      default: 120,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+import { ElMessage } from "element-plus";
+import { toRefs, watch } from "vue";
+
+const props = defineProps({
+  modelValue: Object,
+  labelWidth: {
+    type: Number,
+    default: 120,
   },
-  data() {
-    return {
-      levelI: [], // I级数据
-      levelII: [], // II级数据
-      levelIII: [], // III级数据
-      fields: [], // 当前下拉框选中的集合
-      industrysTags: [], // 点击添加按钮后临时存储的数据集合
-      rules: {
-        industrys: [
-          {
-            type: "array",
-            required: true,
-            message: "请选择并添加",
-            trigger: "change",
-          },
-        ],
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+const { modelValue, labelWidth, disabled } = toRefs(props);
+const formRef = ref(null);
+const levelI = ref([]); // I级数据
+const levelII = ref([]); // II级数据
+const levelIII = ref([]); // III级数据
+const fields = ref([]); // 当前下拉框选中的集合
+const industrysTags = ref([]); // 点击添加按钮后临时存储的数据集合
+
+const data = reactive({
+  rules: {
+    industrys: [
+      {
+        type: "array",
+        required: true,
+        message: "请选择并添加",
+        trigger: "change",
       },
-    };
+    ],
   },
+});
+const { rules } = toRefs(data);
+
+const getFieldByParent = (id) => {
+  return new Promise((resolve, reject) => {
+    industry({ parent_id: id })
+      .then(({ code, msg, data }) => {
+        if (code == 200) {
+          resolve(data);
+        } else {
+          ElMessage.error(msg);
+          reject({ msg, code });
+        }
+      })
+      .catch((error) => {
+        reject(error);
+      });
+  });
+};
+const levelIChange = async (item) => {
+  delete fields.value[1];
+  delete fields.value[2];
+  levelII.value = await getFieldByParent(item.id);
+};
+const levelIIChange = async (item) => {
+  delete fields.value[2];
+  levelIII.value = await getFieldByParent(item.id);
+};
+// 所属领域添加按钮
+const fieldAdd = () => {
+  if (!fields.value.length) return ElMessage.error("请选择领域类型");
+  modelValue.value.industrys = [];
+  industrysTags.value.push(fields.value);
+  for (let i = 0; i < industrysTags.value.length; i++) {
+    modelValue.value.industrys.push("");
+    const item = industrysTags.value[i];
+    for (let j = 0; j < item.length; j++) {
+      const item2 = item[j];
+      if (modelValue.value.industrys[i] == "") {
+        modelValue.value.industrys[i] = item2.id;
+      } else {
+        modelValue.value.industrys[i] =
+          modelValue.value.industrys[i] + "-" + item2.id;
+      }
+    }
+  }
+  fields.value = [];
+  levelII.value = [];
+  levelIII.value = [];
+};
+
+const handleFieldClose = (index) => {
+  industrysTags.value.splice(index, 1);
+  modelValue.value.industrys.splice(index, 1);
+};
+
+const validateForm = async () => {
+  try {
+    return await formRef.value.validateForm();
+  } catch (error) {
+    return false;
+  }
+};
+
+industry().then((res) => {
+  levelI.value = res.data;
+});
+
+watch(modelValue, (newVal) => {
+  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;
+
+  let keyObj = [];
+  for (let i = 0; i < _key.length; i++) {
+    keyObj.push([]);
+    let array = _key[i].split("-");
+    for (let j = 0; j < array.length; j++) {
+      keyObj[i].push({
+        id: array[j],
+      });
+    }
+  }
+  for (let i = 0; i < _value.length; i++) {
+    let array = _value[i].split(">");
+    for (let j = 0; j < array.length; j++) {
+      keyObj[i][j]["name"] = array[j];
+    }
+  }
+  industrysTags.value = keyObj;
+});
+defineExpose({
+  validateForm,
+});
+</script>
+
+<!-- <script>
+export default {
   watch: {
     value(newVal, oldVal) {
       let _key = [];
@@ -146,79 +251,15 @@ export default {
           keyObj[i][j]["name"] = array[j];
         }
       }
-      this.industrysTags = keyObj;
+      industrysTags.value = keyObj;
     },
   },
-  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(item) {
-      delete this.fields[1];
-      delete this.fields[2];
-      this.levelII = await this.getFieldByParent(item.id);
-    },
-    async levelIIChange(item) {
-      delete this.fields[2];
-      this.levelIII = await this.getFieldByParent(item.id);
-    },
-    // 所属领域添加按钮
-    fieldAdd() {
-      if (!this.fields.length) return this.$modal.msgError("请选择领域类型");
-      this.value.industrys = [];
-      this.industrysTags.push(this.fields);
-      for (let i = 0; i < this.industrysTags.length; i++) {
-        this.value.industrys.push("");
-        const item = this.industrysTags[i];
-        for (let j = 0; j < item.length; j++) {
-          const item2 = item[j];
-          if (this.value.industrys[i] == "") {
-            this.value.industrys[i] = item2.id;
-          } else {
-            this.value.industrys[i] = this.value.industrys[i] + "-" + item2.id;
-          }
-        }
-      }
-      this.fields = [];
-      this.levelII = [];
-      this.levelIII = [];
-    },
-    handleFieldClose(index) {
-      this.industrysTags.splice(index, 1);
-      this.value.industrys.splice(index, 1);
-    },
-    submitForm() {
-      let flag = false;
-      this.$refs["form"].validate((valid) => {
-        flag = valid;
-      });
-      return flag;
-    },
-  },
-  created() {
-    industry().then((res) => {
-      this.levelI = res.data;
-    });
-  },
 };
-</script>
+</script> -->
 <style lang="scss" scoped>
 .e_tag {
   .el-tag {
     margin-right: 10px;
   }
 }
-</style>
+</style>

src/views/components/SiteOptions/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <el-select
+    :model-value="modelValue"
+    placeholder="请选择，支持搜索"
+    size="default"
+    :loading="siteList.length === 0"
+    @change="valueChanged"
+    filterable
+    clearable
+  >
+    <el-option
+      v-for="item in siteList"
+      :key="item.id"
+      :label="item.name"
+      :value="item.id"
+    />
+  </el-select>
+</template>
+<script setup name="SiteOptions">
+import { tenantSelect } from "@/api/subPlatform/tenant";
+import useDataStore from "@/store/modules/data";
+import { ref, toRefs } from "vue";
+const props = defineProps({
+  modelValue: {
+    type: [Number, String],
+  },
+});
+
+const { modelValue } = toRefs(props);
+const dataStore = useDataStore();
+const siteList = ref([]);
+
+const emit = defineEmits(["update:modelValue"]);
+
+// 获取站点列表
+const getSiteList = async () => {
+  const { rows } = await tenantSelect();
+  siteList.value = rows;
+  dataStore.setSiteList(rows);
+};
+
+const valueChanged = (val) => {
+  console.log("changed");
+  emit("update:modelValue", val);
+};
+
+getSiteList();
+</script>