SiteOptions

src/store/modules/data.js

@@ -0,0 +1,20 @@
+import { defineStore } from "pinia";
+
+const useDataStore = defineStore("data", {
+  state: () => ({
+    siteList: [],
+  }),
+  getters: {
+    getSiteName: (state) => {
+      return (siteId) =>
+        state.siteList.find((el) => el.id === siteId)?.name || "无";
+    },
+  },
+  actions: {
+    setSiteList(list) {
+      this.siteList = list;
+    },
+  },
+});
+
+export default useDataStore;

src/utils/parameter.js

@@ -29,9 +29,9 @@ export const educationOptions = [
 ];
 // 企业类型
 export const enterpriseOptions = [
-  { key: 101, value: "上市企业" },
+  { key: "101", value: "上市企业" },
-  { key: 102, value: "优质企业" },
+  { key: "102", value: "优质企业" },
-  { key: 103, value: "普通企业" },
+  { key: "103", value: "普通企业" },
 ];
 // 成果成熟度  技术
 export const maturityOptions = [

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 {
+import { ElMessage } from "element-plus";
-  props: {
+import { toRefs, watch } from "vue";
-    value: Object,
+
-    labelWidth: {
+const props = defineProps({
-      type: Number,
+  modelValue: Object,
-      default: 120,
+  labelWidth: {
-    },
+    type: Number,
-    disabled: {
+    default: 120,
-      type: Boolean,
-      default: false,
-    },
   },
-  data() {
+  disabled: {
-    return {
+    type: Boolean,
-      levelI: [], // I级数据
+    default: false,
-      levelII: [], // II级数据
+  },
-      levelIII: [], // III级数据
+});
-      fields: [], // 当前下拉框选中的集合
+const { modelValue, labelWidth, disabled } = toRefs(props);
-      industrysTags: [], // 点击添加按钮后临时存储的数据集合
+const formRef = ref(null);
-      rules: {
+const levelI = ref([]); // I级数据
-        industrys: [
+const levelII = ref([]); // II级数据
-          {
+const levelIII = ref([]); // III级数据
-            type: "array",
+const fields = ref([]); // 当前下拉框选中的集合
-            required: true,
+const industrysTags = ref([]); // 点击添加按钮后临时存储的数据集合
-            message: "请选择并添加",
+
-            trigger: "change",
+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>

src/views/platform/industry/index.vue

@@ -87,7 +87,7 @@ import {
   sysIndustryEdit,
   industryDelete,
 } from "@/api/platform/industry.js";
-import { computed, reactive, ref, toRefs } from "vue";
+import { reactive, ref, toRefs } from "vue";
 import TreeSelect from "@/components/TreeSelect";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { cloneDeep } from "lodash";

src/views/website/solution/service/index.vue

@@ -12,14 +12,14 @@
           v-model="queryParams.title"
           placeholder="请输入关键字"
           clearable
-          size="small"
+          size="default"
           style="width: 240px"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
       <el-form-item label="归属导航:" prop="mode">
         <el-select
-          size="small"
+          size="default"
           style="width: 240px"
           v-model="queryParams.mode"
           placeholder="请选择"
@@ -36,10 +36,10 @@
         </el-select>
       </el-form-item>
       <el-form-item label="所属站点" prop="tenantId">
-        <el-select
+        <!-- <el-select
           v-model="queryParams.tenantId"
           placeholder="请选择，支持搜索"
-          size="small"
+          size="default"
           filterable
         >
           <el-option
@@ -48,18 +48,18 @@
             :label="item.name"
             :value="item.id"
           />
-        </el-select>
+        </el-select> -->
-        <!-- <SiteOptions v-model="queryParams" /> -->
+        <SiteOptions v-model="queryParams.tenantId" />
       </el-form-item>
       <el-form-item>
         <el-button
           type="primary"
           icon="search"
-          size="small"
+          size="default"
           @click="handleQuery"
           >搜索</el-button
         >
-        <el-button icon="refresh" size="small" @click="resetQuery"
+        <el-button icon="refresh" size="default" @click="resetQuery"
           >重置</el-button
         >
       </el-form-item>
@@ -71,7 +71,7 @@
           type="primary"
           plain
           icon="plus"
-          size="small"
+          size="default"
           @click="handleAdd"
           >新增</el-button
         >
@@ -98,7 +98,7 @@
       </el-table-column>
       <el-table-column label="所属站点" align="center">
         <template #default="{ row }">
-          {{ siteList.find((el) => el.id === row.tenantId)?.name || "无" }}
+          {{ dataStore.getSiteName(row.tenantId) }}
         </template>
       </el-table-column>
 
@@ -151,7 +151,7 @@
           <el-input v-model="form.title" placeholder="请输入数据名称" />
         </el-form-item>
         <el-form-item label="所属站点:" prop="tenantId">
-          <SiteOptions v-model="form" />
+          <SiteOptions v-model="form.tenantId" />
         </el-form-item>
         <el-form-item label="归属导航:" prop="mode">
           <el-select v-model="form.mode" placeholder="请选择">
@@ -202,15 +202,17 @@ import {
   serviceEdit,
   serviceDelete,
 } from "@/api/website/solution";
-import { tenantSelect } from "@/api/subPlatform/tenant";
+// import { tenantSelect } from "@/api/subPlatform/tenant";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { cloneDeep } from "lodash";
-import SiteOptions from "@/components/SiteOptions";
+import SiteOptions from "@/views/components/SiteOptions";
+import useDataStore from "../../../../store/modules/data";
+const dataStore = useDataStore();
 const dataList = ref([]);
 // TODO:isSuper
 // const is_super = this.$store.getters.is_super;
 const loading = ref(true);
-const siteList = ref([]); // 站点列表
+// const siteList = ref([]); // 站点列表
 const showSearch = ref(true);
 const showEditDialog = ref(false); // 是否显示新增、修改弹窗
 const title = ref(""); // 弹窗标题
@@ -294,16 +296,11 @@ const getList = async () => {
   loading.value = false;
 };
 
-const getSiteList = async () => {
+// const getSiteList = async () => {
-  const resp = await tenantSelect();
+//   const resp = await tenantSelect();
-  siteList.value = resp.rows;
+//   siteList.value = resp.rows;
-};
-// const getSiteName = (tenantId) => {
-//   const item = siteList.value.find((el) => {
-//     return el.id === tenantId;
-//   });
-//   return item ? item.name : "无";
 // };
+
 // 取消按钮
 const cancel = () => {
   showEditDialog.value = false;
@@ -363,5 +360,5 @@ const handleDelete = (row) => {
     .catch(() => {});
 };
 getList();
-getSiteList();
+// getSiteList();
 </script>

src/views/website/solution/serviceCase/index.vue

@@ -12,14 +12,15 @@
           v-model="queryParams.title"
           placeholder="请输入关键字"
           clearable
-          size="small"
+          size="default"
           style="width: 240px"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
 
       <el-form-item label="所属站点" prop="tenantId">
-        <el-select
+        <SiteOptions v-model="queryParams.tenantId" />
+        <!-- <el-select
           v-model="queryParams.tenantId"
           placeholder="请选择，支持搜索"
           size="small"
@@ -31,17 +32,17 @@
             :label="item.name"
             :value="item.id"
           />
-        </el-select>
+        </el-select> -->
       </el-form-item>
       <el-form-item>
         <el-button
           type="primary"
           icon="search"
-          size="small"
+          size="default"
           @click="handleQuery"
           >搜索</el-button
         >
-        <el-button icon="refresh" size="small" @click="resetQuery"
+        <el-button icon="refresh" size="default" @click="resetQuery"
           >重置</el-button
         >
       </el-form-item>
@@ -53,7 +54,7 @@
           type="primary"
           plain
           icon="plus"
-          size="small"
+          size="default"
           @click="handleAdd"
           >新增</el-button
         >
@@ -80,10 +81,11 @@
       </el-table-column>
       <el-table-column label="所属站点" align="center">
         <template #default="{ row }">
-          {{
+          <!-- {{
             siteList.find((el) => el.id === row.tenantId)?.name || "无"
-          }}</template
+          }} -->
-        >
+          {{ dataStore.getSiteName(row.tenantId) }}
+        </template>
       </el-table-column>
       <el-table-column
         label="描述"
@@ -145,8 +147,8 @@
           <ImageUpload v-model="form.image" :isShowTip="false" :limit="1" />
         </el-form-item>
         <el-form-item label="所属站点:" prop="tenantId">
-          <!-- <SiteOptions v-model="form" /> -->
+          <SiteOptions v-model="form.tenantId" />
-          <el-select
+          <!-- <el-select
             v-model="form.tenantId"
             placeholder="请选择，支持搜索"
             size="small"
@@ -158,7 +160,7 @@
               :label="item.name"
               :value="item.id"
             />
-          </el-select>
+          </el-select> -->
         </el-form-item>
         <el-form-item label="所属服务:" prop="kindId">
           <el-cascader
@@ -200,6 +202,10 @@ import {
   serviceCaseKindSelect,
 } from "@/api/website/solution";
 import WangEditor from "@/components/WangEditor/index.vue";
+import useDataStore from "@/store/modules/data";
+import SiteOptions from "@/views/components/SiteOptions";
+// import SiteOptions from "../../../components/SiteOptions/index.vue";
+const dataStore = useDataStore();
 // import SiteOptions from "@/components/SiteOptions";
 const dataList = ref([]);
 const loading = ref(true);
@@ -273,10 +279,10 @@ const getList = async () => {
   loading.value = false;
 };
 
-const getSiteList = async () => {
+// const getSiteList = async () => {
-  const resp = await tenantSelect();
+//   const resp = await tenantSelect();
-  siteList.value = resp.rows;
+//   siteList.value = resp.rows;
-};
+// };
 
 const getCaseKindList = async () => {
   const resp = await serviceCaseKindSelect();
@@ -322,7 +328,6 @@ const handleAdd = () => {
 const handleUpdate = async (row) => {
   reset();
   const resp = await serviceCaseDetail(row.id);
-  console.log(resp);
   form.value = resp.data;
   showEditDialog.value = true;
   title.value = "修改";
@@ -354,6 +359,6 @@ const handleDelete = (row) => {
 };
 
 getList();
-getSiteList();
+// getSiteList();
 getCaseKindList();
 </script>