From 2f2d61385c9abb87890b89170524cf1721640dfb Mon Sep 17 00:00:00 2001
From: cxc <quantulr@outlook.com>
Date: Tue, 26 Jul 2022 14:35:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=81=E4=B8=9A=E6=B7=BB=E5=8A=A0=E4=B8=8E?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/CityOptions/index.vue |  44 ++++++-
 src/views/components/ExpertForm/index.vue  | 142 +++++++++++++--------
 src/views/components/InputBoxAdd/index.vue | 108 ++++++++--------
 src/views/dataList/enterprise/add.vue      |  34 ++---
 src/views/dataList/enterprise/index.vue    |   6 +-
 src/views/website/siteSet/banner/index.vue |   4 +-
 6 files changed, 211 insertions(+), 127 deletions(-)

diff --git a/src/views/components/CityOptions/index.vue b/src/views/components/CityOptions/index.vue
index 5561177..1dcc947 100644
--- a/src/views/components/CityOptions/index.vue
+++ b/src/views/components/CityOptions/index.vue
@@ -3,7 +3,7 @@
     ref="formRef"
     :model="modelValue"
     :rules="rules"
-    :label-width="labelWidth + 'px'"
+    :label-width="`${labelWidth}px`"
   >
     <el-row>
       <el-col :span="24">
@@ -14,7 +14,9 @@
                 <el-select
                   v-model="modelValue.province"
                   clearable
+                  filterable
                   placeholder="请选择"
+                  :disabled="provinceSelectList.length === 0"
                   @change="provinceChanged"
                 >
                   <el-option
@@ -32,6 +34,8 @@
                 <el-select
                   v-model="modelValue.city"
                   clearable
+                  filterable
+                  :disabled="citySelectList.length === 0"
                   placeholder="请选择"
                   @change="cityChanged"
                 >
@@ -50,6 +54,8 @@
                 <el-select
                   v-model="modelValue.district"
                   clearable
+                  filterable
+                  :disabled="districtSelectList.length === 0"
                   placeholder="请选择"
                 >
                   <el-option
@@ -99,17 +105,29 @@ const { rules } = toRefs(data);
 // 获取 省列表
 const getProvinceList = async () => {
   const resp = await provinceList();
-  provinceSelectList.value = resp.data;
+  provinceSelectList.value = resp.data.map((el) => {
+    return { ...el, provinceCode: el.provinceCode.toString() };
+  });
 };
 // 获取市列表
 const getCityListByProvinceId = async (provinceId) => {
   const { data } = await cityList(provinceId);
-  citySelectList.value = data;
+  citySelectList.value = data.map((el) => {
+    return {
+      ...el,
+      cityCode: el.cityCode.toString(),
+    };
+  });
 };
 // 根据市id获取县区列表
 const getAreaListByCityId = async (cityId) => {
   const { data } = await districtList(cityId);
-  districtSelectList.value = data;
+  districtSelectList.value = data.map((el) => {
+    return {
+      ...el,
+      areaCode: el.areaCode.toString(),
+    };
+  });
 };
 // 当省改变时
 const provinceChanged = () => {
@@ -132,9 +150,25 @@ const cityChanged = () => {
 };
 
 const validateForm = async () => {
-  return await formRef.value.validate();
+  try {
+    return await formRef.value.validate();
+  } catch (error) {
+    return false;
+  }
 };
+// watch(modelValue, (val) => {
+//   console.log(val);
+// });
+
 getProvinceList();
+watch(modelValue, (val) => {
+  if (val.province) {
+    getCityListByProvinceId(val.province);
+  }
+  if (val.city) {
+    getAreaListByCityId(val.city);
+  }
+});
 
 defineExpose({
   validateForm,
diff --git a/src/views/components/ExpertForm/index.vue b/src/views/components/ExpertForm/index.vue
index e16b341..13070a3 100644
--- a/src/views/components/ExpertForm/index.vue
+++ b/src/views/components/ExpertForm/index.vue
@@ -1,5 +1,4 @@
 <template>
-  <el-button @click="check">验证</el-button>
   <el-form
     ref="formRef"
     :model="modelValue"
@@ -220,40 +219,40 @@
 
     <!-- <FieldOptions v-model="value" :labelWidth="labelWidth" ref="fieldForm" /> -->
 
-    <!-- <InputBoxAdd
+    <InputBoxAdd
       :labelWidth="labelWidth"
-      v-model="value"
+      v-model="modelValue"
       title="关键词"
       placeholder="应用场景关键词+技术产品关键词"
       fieldKey="keywords"
-      ref="keywordsForm"
+      ref="keywordsFormRef"
     />
 
     <InputBoxAdd
       v-if="formType != 2"
       :labelWidth="labelWidth"
-      v-model="value"
+      v-model="modelValue"
       title="研究方向"
       placeholder="请输入研究方向"
       fieldKey="researchs"
-      ref="researchsForm"
+      ref="researchsFormRef"
     />
 
     <InputBoxAdd
       v-if="formType == 2"
       :labelWidth="labelWidth"
-      v-model="value"
+      v-model="modelValue"
       title="生产方向"
       placeholder="请输入生产方向"
       fieldKey="directions"
-      ref="directionsForm"
-    /> -->
+      ref="directionsFormRef"
+    />
 
     <el-row v-if="formType == 2">
       <el-col :span="24">
         <el-form-item label="邀请码:">
           <el-input
-            v-model="modelValue.inviter_code"
+            v-model="modelValue.inviterCode"
             :disabled="!isAdd"
           ></el-input>
         </el-form-item>
@@ -285,7 +284,7 @@
             type="textarea"
             :autosize="{ minRows: 2, maxRows: 6 }"
           />
-          <WangEditor v-model="modelValue.introduce" minHeight="150px" />
+          <WangEditor v-else v-model="modelValue.introduce" minHeight="150px" />
           <!-- <Editor
             v-else
             v-model="modelValue.introduce"
@@ -301,7 +300,7 @@
 <script setup name="ExpertForm">
 import CityOptions from "@/views/components/CityOptions";
 // import FieldOptions from "@/views/components/FieldOptions";
-// import InputBoxAdd from "@/views/components/InputBoxAdd";
+import InputBoxAdd from "@/views/components/InputBoxAdd";
 import { researchSelect } from "@/api/dataList/research";
 import { laboratorySelect } from "@/api/dataList/laboratory";
 import { tenantSelect } from "@/api/subPlatform/tenant";
@@ -328,8 +327,12 @@ const props = defineProps({
     default: 120,
   },
 });
-const { formType, modelValue } = toRefs(props);
+const { formType, modelValue, labelWidth, showTitle, isAdd } = toRefs(props);
 const cityFormRef = ref(null);
+const formRef = ref(null);
+const keywordsFormRef = ref(null);
+const researchsFormRef = ref(null);
+const directionsFormRef = ref([]);
 const researchOptions = ref([]);
 const options = ref([]);
 const siteList = ref([]);
@@ -413,40 +416,77 @@ const getSiteList = async () => {
 const check = async () => {
   // console.log(cityFormRef.value);
   // console.log(cityFormRef.value.formRef.value.validate());
-  cityFormRef.value
-    .validateForm()
-    .then((re) => {
-      console.log(re);
-    })
-    .catch((error) => {
-      console.log(error);
-    });
+  // cityFormRef.value
+  //   .validateForm()
+  //   .then((re) => {
+  //     console.log(re);
+  //   })
+  //   .catch((error) => {
+  //     console.log(error);
+  //   });
+  // console.log(await keywordsFormRef.value.validateForm());
+  const res = await validateForm();
+  console.log(res);
 };
-const submitForm = () => {
-  let flag = false;
-  if (this.formType == 1) {
-    this.$refs["form"].validate((valid) => {
-      const cityForm = this.$refs.cityForm.submitForm(); // 城市
-      const fieldForm = this.$refs.fieldForm.submitForm(); // 所属领域
-      const keywordsForm = this.$refs.keywordsForm.submitForm(); // 关键词
-      const researchsForm = this.$refs.researchsForm.submitForm(); // 研究方向
-      if (valid && cityForm && fieldForm && keywordsForm && researchsForm) {
-        flag = !flag;
-      }
-    });
-  } else if (this.formType == 2) {
-    this.$refs["form"].validate((valid) => {
-      const cityForm = this.$refs.cityForm.submitForm();
-      const fieldForm = this.$refs.fieldForm.submitForm();
-      const keywordsForm = this.$refs.keywordsForm.submitForm();
-      const directionsForm = this.$refs.directionsForm.submitForm();
-      if (valid && cityForm && fieldForm && keywordsForm && directionsForm) {
-        flag = !flag;
-      }
-    });
+const validate1 = async () => {
+  try {
+    return await formRef.value.validate();
+  } catch (error) {
+    return false;
   }
-  return flag;
 };
+const validateForm = async () => {
+  let formValid;
+  try {
+    formValid = await formRef.value.validate();
+  } catch (error) {
+    formValid = false;
+  }
+  const cityFormValid = await cityFormRef.value.validateForm();
+
+  const keywordsFormValid = await keywordsFormRef.value.validateForm();
+  if (formType.value == 1) {
+    const researchsFormValid = await researchsFormRef.value.validateForm();
+    return (
+      formValid && cityFormValid && keywordsFormValid && researchsFormValid
+    );
+  } else if (formType.value == 2) {
+    const directionsFormValid = await directionsFormRef.value.validateForm();
+    return (
+      formValid && cityFormValid && keywordsFormValid && directionsFormValid
+    );
+  } else {
+    throw "未知的formType";
+  }
+};
+defineExpose({
+  validateForm,
+});
+// const submitForm = () => {
+//   let flag = false;
+//   if (this.formType == 1) {
+//     this.$refs["form"].validate((valid) => {
+//       const cityForm = this.$refs.cityForm.submitForm(); // 城市
+//       const fieldForm = this.$refs.fieldForm.submitForm(); // 所属领域
+//       const keywordsForm = this.$refs.keywordsForm.submitForm(); // 关键词
+//       const researchsForm = this.$refs.researchsForm.submitForm(); // 研究方向
+//       if (valid && cityForm && fieldForm && keywordsForm && researchsForm) {
+//         flag = !flag;
+//       }
+//     });
+//   } else if (this.formType == 2) {
+//     this.$refs["form"].validate((valid) => {
+//       const cityForm = this.$refs.cityForm.submitForm();
+//       const fieldForm = this.$refs.fieldForm.submitForm();
+//       const keywordsForm = this.$refs.keywordsForm.submitForm();
+//       const directionsForm = this.$refs.directionsForm.submitForm();
+//       if (valid && cityForm && fieldForm && keywordsForm && directionsForm) {
+//         flag = !flag;
+//       }
+//     });
+//   }
+//   return flag;
+// };
 getSiteList();
 </script>
 
@@ -494,7 +534,7 @@ export default {
     },
   },
 };
-</script>
+</script> -->
 <style lang="scss" scoped>
 .form_title {
   font-weight: 700;
@@ -506,9 +546,9 @@ export default {
 //   height: 120px;
 //   line-height: 120px;
 // }
-.el-select,
-.el-date-editor {
-  display: block;
-  width: 100%;
-}
-</style> -->
+// .el-select,
+// .el-date-editor {
+//   display: block;
+//   width: 100%;
+// }
+</style>
diff --git a/src/views/components/InputBoxAdd/index.vue b/src/views/components/InputBoxAdd/index.vue
index b19815f..79d9e37 100644
--- a/src/views/components/InputBoxAdd/index.vue
+++ b/src/views/components/InputBoxAdd/index.vue
@@ -1,14 +1,14 @@
 <template>
   <el-form
-    ref="form"
-    :model="value"
-    :label-width="labelWidth + 'px'"
+    ref="formRef"
+    :model="modelValue"
+    :label-width="`${labelWidth}px`"
     :disabled="disabled"
   >
     <el-row>
       <el-col :span="24">
         <el-form-item
-          :label="title + ':'"
+          :label="`${title}:`"
           :prop="fieldKey"
           :rules="[
             {
@@ -27,9 +27,10 @@
               <el-button type="primary" @click="keyWordAdd">添加</el-button>
             </el-col>
           </el-row>
+
           <div class="e_tag">
             <el-tag
-              v-for="(tag, index) in this.value[fieldKey]"
+              v-for="(tag, index) in modelValue[fieldKey]"
               :key="index"
               closable
               @close="handleFieldClose(fieldKey, index)"
@@ -42,61 +43,66 @@
     </el-row>
   </el-form>
 </template>
-<script>
+<script setup name="InputBoxAdd">
 import { industry } from "@/api/config";
-export default {
-  props: {
-    value: Object,
-    labelWidth: {
-      type: Number,
-      default: 120,
-    },
-    title: {
-      type: String,
-      default: "",
-    },
-    placeholder: {
-      type: String,
-      default: "",
-    },
-    fieldKey: {
-      require: true,
-      type: String,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+import { ElMessage } from "element-plus";
+import { ref, toRefs } from "vue";
+
+const props = defineProps({
+  modelValue: Object,
+  labelWidth: {
+    type: Number,
+    default: 120,
   },
-  data() {
-    return {
-      dataVal: "",
-    };
+  title: {
+    type: String,
+    default: "",
   },
-  methods: {
-    keyWordAdd() {
-      if (!this.dataVal.length)
-        return this.$message.error("请输入" + this.title);
-      this.value[this.fieldKey].push(this.dataVal);
-      this.dataVal = "";
-    },
-    handleFieldClose(val, index) {
-      this.value[val].splice(index, 1);
-    },
-    submitForm() {
-      let flag = false;
-      this.$refs["form"].validate((valid) => {
-        flag = valid;
-      });
-      return flag;
-    },
+  placeholder: {
+    type: String,
+    default: "",
   },
+  fieldKey: {
+    require: true,
+    type: String,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { modelValue, title, fieldKey, placeholder, disabled, labelWidth } =
+  toRefs(props);
+const dataVal = ref("");
+const formRef = ref(null);
+const keyWordAdd = () => {
+  if (!dataVal.value.length) return ElMessage.error(`请输入${title.value}`);
+  modelValue.value[fieldKey.value].push(dataVal.value);
+  dataVal.value = "";
 };
+const handleFieldClose = (val, index) => {
+  modelValue.value[val].splice(index, 1);
+};
+
+const validateForm = async () => {
+  try {
+    return await formRef.value.validate();
+  } catch (error) {
+    return false;
+  }
+};
+
+defineExpose({
+  validateForm,
+});
 </script>
+
 <style lang="scss" scoped>
 .e_tag {
+  width: 100%;
   .el-tag {
     margin-right: 10px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dataList/enterprise/add.vue b/src/views/dataList/enterprise/add.vue
index 17fba40..9c8822e 100644
--- a/src/views/dataList/enterprise/add.vue
+++ b/src/views/dataList/enterprise/add.vue
@@ -23,9 +23,10 @@ import {
   companyEdit,
 } from "@/api/dataList/enterprise";
 import { reactive, toRefs } from "vue";
-import { useRouter } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
 const router = useRouter();
+const route = useRoute();
 const formType = ref(2);
 const expertFormRef = ref(null);
 const data = reactive({
@@ -54,27 +55,30 @@ const cancel = () => {
   router.back();
   tab.closeOpenPage();
 };
-const submitForm = () => {
-  if (this.$refs.expertForm.submitForm()) {
-    console.log(form.value);
-    // todo...  提交出错
+const submitForm = async () => {
+  const valid = await expertFormRef.value.validateForm();
+  if (valid) {
     if (form.value.id != undefined) {
-      companyEdit(form.value).then((response) => {
-        this.$store.dispatch("tagsView/delView", this.$route);
-        router.go(-1);
-        ElMessage.success("修改成功");
-      });
+      await companyEdit(form.value);
+      cancel();
+      ElMessage.success("修改成功");
     } else {
-      companyAdd(form.value).then((res) => {
-        this.$store.dispatch("tagsView/delView", this.$route);
-        router.go(-1);
-        ElMessage.success("新增成功");
-      });
+      await companyAdd(form.value);
+      cancel();
+      ElMessage.success("新增成功");
     }
   } else {
     console.log("校验未通过");
   }
 };
+
+const getDetailById = async () => {
+  if (route.query.id) {
+    const { data } = await companyDetail(route.query.id);
+    form.value = data;
+  }
+};
+getDetailById();
 </script>
 
 <!-- <script>
diff --git a/src/views/dataList/enterprise/index.vue b/src/views/dataList/enterprise/index.vue
index 3be8b51..10def9f 100644
--- a/src/views/dataList/enterprise/index.vue
+++ b/src/views/dataList/enterprise/index.vue
@@ -85,7 +85,7 @@
       <el-table-column label="数据编号" align="center" prop="id" />
       <el-table-column label="企业名称" align="center" prop="name" />
       <el-table-column label="统一社会信用代码" align="center" prop="code" />
-      <el-table-column
+      <!-- <el-table-column
         label="所属领域"
         align="center"
         prop="industrys"
@@ -94,7 +94,7 @@
         <template #default="{ row }">
           <div>{{ row.industrys[row.industrys.length - 1] }}</div>
         </template>
-      </el-table-column>
+      </el-table-column> -->
       <el-table-column label="站点" align="center">
         <template #default="{ row }">
           {{ siteList.find((el) => el.id === row.tenantId)?.name || "无" }}
@@ -195,7 +195,7 @@ const handleAdd = () => {
 };
 const handleDetail = (id) => {
   router.push({
-    path: "/dataList/enterpriseAdd",
+    path: "/dataList/enterprise/add",
     query: { id },
   });
 };
diff --git a/src/views/website/siteSet/banner/index.vue b/src/views/website/siteSet/banner/index.vue
index 23cd853..2a86d0f 100644
--- a/src/views/website/siteSet/banner/index.vue
+++ b/src/views/website/siteSet/banner/index.vue
@@ -203,8 +203,8 @@
           <ImageUpload v-model="form.images" :isShowTip="false" :limit="2" />
         </el-form-item>
         <el-form-item label="显示多张:" prop="multipleFlag">
-          <el-radio v-model="form.multipleFlag" :label="1">是</el-radio>
-          <el-radio v-model="form.multipleFlag" :label="0">否</el-radio>
+          <el-radio v-model="form.multipleFlag" label="1">是</el-radio>
+          <el-radio v-model="form.multipleFlag" label="0">否</el-radio>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">