城市组件封装

src/components/process/Contract.vue

@@ -63,17 +63,37 @@
                 </el-form-item>
               </el-col>
               <el-col :span="6">
+                <el-form-item label=" " prop="provinceId">
+                  <selectCity 
+                    placeholder="省/洲"
+                    @change="(val) => getCityData(val, '30', true)"
+                    addressId="provinceId"
+                    addressName="provinceName"
+                    v-model="formData.data"
+                    :data="provinceData"
+                  >
+                  </selectCity>
+                </el-form-item>
+                
+              </el-col>
+              <!-- <el-col :span="6">
                 <el-form-item label=" " prop="buyProvinceId">
                   <el-select v-model="formData.data.buyProvinceId" filterable allow-create placeholder="省/洲" @change="(val) => getCityData(val, '30', true)">
                     <el-option v-for="item in provinceData" :label="item.name" :value="item.id"> </el-option>
                   </el-select>
                 </el-form-item>
-              </el-col>
+              </el-col> -->
               <el-col :span="6">
                 <el-form-item label=" " prop="buyCityId">
-                  <el-select v-model="formData.data.buyCityId" filterable allow-create placeholder="城市">
-                    <el-option v-for="item in cityData" :label="item.name" :value="item.id"> </el-option>
-                  </el-select>
+                  <selectCity 
+                    placeholder="城市"
+                    @change="(val) => getCityData(val, '30', true)"
+                    addressId="cityId"
+                    addressName="cityName"
+                    v-model="formData.data"
+                    :data="cityData"
+                  >
+                  </selectCity>
                 </el-form-item>
               </el-col>
               <el-col :span="6">
@@ -450,7 +470,7 @@ import byForm from "@/components/byForm/index";
 import SelectGoods from "@/components/product/SelectGoods";
 import { ElMessage } from "element-plus";
 import Editor from "@/components/Editor/index.vue";
-
+import selectCity from "@/components/selectCity/index.vue";
 const { proxy } = getCurrentInstance();
 const contractType = ref([]);
 const accountCurrency = ref([]);
@@ -1011,15 +1031,6 @@ const clickDelete = (index) => {
 };
 
 const handleSubmit = async () => {
-  //判断buyCityId是否为number类型
-  if(isNaN(parseFloat(formData.data.buyCityId)) && !isFinite(formData.data.buyCityId)){
-    formData.data.cityName = formData.data.buyCityId
-  }
-  //判断buyProvinceId是否为number类型
-  if(isNaN(parseFloat(formData.data.buyProvinceId)) && !isFinite(formData.data.buyProvinceId)){
-    formData.data.provinceName = formData.data.buyProvinceId
-  }
-  
   console.log(formData.data)
   let status = await submit.value.handleSubmit(() => {});
   if (status) {

src/components/process/EHSD/Contract.vue

@@ -57,21 +57,21 @@
             <el-row style="margin-top: 20px; width: 100%">
               <el-col :span="6">
                 <el-form-item label="地址" prop="buyCountryId">
-                  <el-select v-model="formData.data.buyCountryId" placeholder="国家" @change="(val) => getCityData(val, '20', true)">
+                  <el-select v-model="formData.data.buyCountryId" placeholder="国家"  filterable allow-create @change="(val) => getCityData(val, '20', true)">
                     <el-option v-for="item in countryData" :label="item.chineseName" :value="item.id"> </el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="6">
                 <el-form-item label=" " prop="buyProvinceId">
-                  <el-select v-model="formData.data.buyProvinceId" placeholder="省/洲" @change="(val) => getCityData(val, '30', true)">
+                  <el-select v-model="formData.data.buyProvinceId" placeholder="省/洲"  filterable allow-create @change="(val) => getCityData(val, '30', true)">
                     <el-option v-for="item in provinceData" :label="item.name" :value="item.id"> </el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="6">
                 <el-form-item label=" " prop="buyCityId">
-                  <el-select v-model="formData.data.buyCityId" placeholder="城市">
+                  <el-select v-model="formData.data.buyCityId"  filterable allow-create placeholder="城市">
                     <el-option v-for="item in cityData" :label="item.name" :value="item.id"> </el-option>
                   </el-select>
                 </el-form-item>
@@ -966,6 +966,10 @@ const querySearch = (queryString, callback) => {
   });
 };
 const handleSubmit = async () => {
+  //判断buyProvinceId是否为number类型
+  if(isNaN(parseFloat(formData.data.buyProvinceId)) && !isFinite(formData.data.buyProvinceId)){
+    formData.data.provinceName = formData.data.buyProvinceId
+  }
   let status = await submit.value.handleSubmit(() => {});
   if (status) {
     if (!(formData.data.contractProductList && formData.data.contractProductList.length > 0)) {

src/components/process/EHSD/PriceSheet.vue

@@ -64,14 +64,14 @@
               </el-col>
               <el-col :span="6">
                 <el-form-item label=" " prop="buyProvinceId">
-                  <el-select v-model="formData.data.buyProvinceId" placeholder="省/洲" @change="(val) => getCityData(val, '30', true)">
+                  <el-select v-model="formData.data.buyProvinceId"  filterable allow-create placeholder="省/洲" @change="(val) => getCityData(val, '30', true)">
                     <el-option v-for="item in provinceData" :label="item.name" :value="item.id"> </el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="6">
                 <el-form-item label=" " prop="buyCityId">
-                  <el-select v-model="formData.data.buyCityId" placeholder="城市">
+                  <el-select v-model="formData.data.buyCityId"  filterable allow-create placeholder="城市">
                     <el-option v-for="item in cityData" :label="item.name" :value="item.id"> </el-option>
                   </el-select>
                 </el-form-item>

src/components/process/EHSD/Sample.vue

@@ -64,14 +64,14 @@
               </el-col>
               <el-col :span="6">
                 <el-form-item label=" " prop="buyProvinceId">
-                  <el-select v-model="formData.data.buyProvinceId" placeholder="省/洲" @change="(val) => getCityData(val, '30', true)">
+                  <el-select v-model="formData.data.buyProvinceId" filterable allow-create placeholder="省/洲" @change="(val) => getCityData(val, '30', true)">
                     <el-option v-for="item in provinceData" :label="item.name" :value="item.id"> </el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="6">
                 <el-form-item label=" " prop="buyCityId">
-                  <el-select v-model="formData.data.buyCityId" placeholder="城市">
+                  <el-select v-model="formData.data.buyCityId" filterable allow-create placeholder="城市">
                     <el-option v-for="item in cityData" :label="item.name" :value="item.id"> </el-option>
                   </el-select>
                 </el-form-item>

src/components/process/PriceSheet.vue

@@ -718,19 +718,6 @@ const querySearch = (queryString, callback) => {
   });
 };
 const handleSubmit = async () => {
-  //判断是否为创建的省份和城市
-  formData.data.cityName = formData.data.buyCityId
-  formData.data.provinceName = formData.data.buyProvinceId
-  cityData.value.map(item=>{
-    if(item.id == formData.data.buyCityId){
-      formData.data.cityName = null
-    }
-  })
-  provinceData.value.map(item=>{
-    if(item.id == formData.data.buyProvinceId){
-      formData.data.provinceName = null
-    }
-  })
   let status = await submit.value.handleSubmit(() => {});
   if (status) {
     if (!(formData.data.quotationProductList && formData.data.quotationProductList.length > 0)) {

src/components/process/ServiceContract.vue

@@ -64,14 +64,14 @@
               </el-col>
               <el-col :span="6">
                 <el-form-item label=" " prop="buyProvinceId">
-                  <el-select v-model="formData.data.buyProvinceId" placeholder="省/洲" @change="(val) => getCityData(val, '30', true)">
+                  <el-select v-model="formData.data.buyProvinceId"  filterable allow-create placeholder="省/洲" @change="(val) => getCityData(val, '30', true)">
                     <el-option v-for="item in provinceData" :label="item.name" :value="item.id"> </el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="6">
                 <el-form-item label=" " prop="buyCityId">
-                  <el-select v-model="formData.data.buyCityId" placeholder="城市">
+                  <el-select v-model="formData.data.buyCityId"  filterable allow-create placeholder="城市">
                     <el-option v-for="item in cityData" :label="item.name" :value="item.id"> </el-option>
                   </el-select>
                 </el-form-item>

src/components/selectCity/index.vue

@@ -0,0 +1,68 @@
+<template>
+	<div class="select-city">
+		<el-select
+			filterable
+			allow-create
+			:placeholder="placeholder"
+			@change="getCityData"
+            v-model="showModel"
+		>
+			<el-option v-for="item in data" :label="item.name" :value="item.id">
+			</el-option>
+		</el-select>
+	</div>
+</template>
+<script setup>
+import { reactive, ref } from 'vue'
+const { proxy } = getCurrentInstance()
+const showModel = ref('')
+const emit = defineEmits(["update:modelValue",'change']);
+const formData = computed(() => {
+  return proxy.modelValue;
+});
+defineProps({
+	placeholder: {
+		type: String,
+		default: false,
+	},
+	addressId: {
+        type: String,
+        default: false,
+    },
+    addressName: {
+        type: String,
+        default: false,
+    },
+	modelValue: {
+		type: String,
+		default: false,
+	},
+	data: {
+		type: Array,
+		default: false,
+	},
+})
+const getCityData = (val) => {
+    let isAddCity = true
+	//判断val是否在data里面
+	proxy.data.forEach((item) => {
+		if (item.id == val) {
+            isAddCity = false
+            formData.value[proxy.addressId || 'provinceId'] = item.id
+            formData.value[proxy.addressName || 'provinceName'] = item.name
+            console.log(formData.value)
+			emit('update:modelValue', formData.value)
+            showModel.value = item.id
+            emit('change', item.id)
+		}
+	})
+    if (isAddCity) {
+        formData.value[proxy.addressId || 'provinceId'] = null
+        formData.value[proxy.addressName || 'provinceName'] = val
+        showModel.value = val
+        emit('update:modelValue', formData.value)
+        emit('change', val)
+    }
+    
+}
+</script>

src/views/WDLY/basic/supplier/index.vue

@@ -68,6 +68,7 @@
                   v-model="formData.data.provinceId"
                   placeholder="省/洲"
                   @change="(val) => getCityData(val, '30', true)"
+                   filterable allow-create
                 >
                   <el-option
                     v-for="item in provinceData"
@@ -81,7 +82,7 @@
             </el-col>
             <el-col :span="8">
               <el-form-item prop="cityId">
-                <el-select v-model="formData.data.cityId" placeholder="城市">
+                <el-select v-model="formData.data.cityId" placeholder="城市"  filterable allow-create>
                   <el-option
                     v-for="item in cityData"
                     :label="item.name"

src/views/WDLY/outInBound/jdOrderReceive/index.vue

@@ -68,6 +68,7 @@
                   placeholder="国家"
                   @change="(val) => getCityData(val, '20', true)"
                   :disabled="true"
+                  filterable allow-create
                 >
                   <el-option
                     v-for="item in countryData"
@@ -85,6 +86,7 @@
                   placeholder="省/洲"
                   @change="(val) => getCityData(val, '30', true)"
                   :disabled="true"
+                   filterable allow-create
                 >
                   <el-option
                     v-for="item in provinceData"
@@ -101,6 +103,7 @@
                   v-model="formData.data.cityId"
                   placeholder="城市"
                   :disabled="true"
+                   filterable allow-create
                 >
                   <el-option
                     v-for="item in cityData"

src/views/WDLY/salesMange/afterSale/index.vue

@@ -66,6 +66,7 @@
                   v-model="formData.data.provinceId"
                   placeholder="省/洲"
                   @change="(val) => getCityData(val, '30', true)"
+                   filterable allow-create
                 >
                   <el-option
                     v-for="item in provinceData"
@@ -78,7 +79,7 @@
             </el-col>
             <el-col :span="8">
               <el-form-item prop="cityId">
-                <el-select v-model="formData.data.cityId" placeholder="城市">
+                <el-select v-model="formData.data.cityId" placeholder="城市" filterable allow-create>
                   <el-option
                     v-for="item in cityData"
                     :label="item.name"

src/views/WDLY/salesMange/jdOrder/index.vue

@@ -92,6 +92,7 @@
                   v-model="formData.data.provinceId"
                   placeholder="省/洲"
                   @change="(val) => getCityData(val, '30', true)"
+                   filterable allow-create
                 >
                   <el-option
                     v-for="item in provinceData"
@@ -104,7 +105,7 @@
             </el-col>
             <el-col :span="8">
               <el-form-item prop="cityId">
-                <el-select v-model="formData.data.cityId" placeholder="城市">
+                <el-select v-model="formData.data.cityId" placeholder="城市" filterable allow-create>
                   <el-option
                     v-for="item in cityData"
                     :label="item.name"
@@ -588,6 +589,7 @@ const getList = async (req) => {
       loading.value = false;
     }, 200);
   });
+  
 };
 const openModal = () => {
   dialogVisible.value = true;

src/views/WDLY/salesMange/order/index.vue

@@ -74,6 +74,7 @@
                   v-model="formData.data.provinceId"
                   placeholder="省/洲"
                   @change="(val) => getCityData(val, '30', true)"
+                   filterable allow-create
                 >
                   <el-option
                     v-for="item in provinceData"
@@ -86,7 +87,7 @@
             </el-col>
             <el-col :span="8">
               <el-form-item prop="cityId">
-                <el-select v-model="formData.data.cityId" placeholder="城市">
+                <el-select v-model="formData.data.cityId" placeholder="城市"  filterable allow-create>
                   <el-option
                     v-for="item in cityData"
                     :label="item.name"

src/views/customer/file/index.vue

@@ -173,14 +173,14 @@
             </el-col>
             <el-col :span="8">
               <el-form-item prop="provinceId">
-                <el-select v-model="formData.data.provinceId" placeholder="省/洲" @change="(val) => getCityData(val, '30', true)">
+                <el-select v-model="formData.data.provinceId" placeholder="省/洲" filterable allow-create @change="(val) => getCityData(val, '30', true)">
                   <el-option v-for="item in provinceData" :label="item.name" :value="item.id"> </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item prop="cityId">
-                <el-select v-model="formData.data.cityId" placeholder="城市">
+                <el-select v-model="formData.data.cityId" filterable allow-create placeholder="城市">
                   <el-option v-for="item in cityData" :label="item.name" :value="item.id"> </el-option>
                 </el-select>
               </el-form-item>

src/views/customer/highseas/index.vue

@@ -173,14 +173,14 @@
             </el-col>
             <el-col :span="8">
               <el-form-item prop="provinceId">
-                <el-select v-model="formData.data.provinceId" placeholder="省/洲" @change="(val) => getCityData(val, '30', true)">
+                <el-select v-model="formData.data.provinceId" placeholder="省/洲" filterable allow-create @change="(val) => getCityData(val, '30', true)">
                   <el-option v-for="item in provinceData" :label="item.name" :value="item.id"> </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item prop="cityId">
-                <el-select v-model="formData.data.cityId" placeholder="城市">
+                <el-select v-model="formData.data.cityId" filterable allow-create placeholder="城市">
                   <el-option v-for="item in cityData" :label="item.name" :value="item.id"> </el-option>
                 </el-select>
               </el-form-item>

src/views/customer/privatesea/index.vue

@@ -173,14 +173,14 @@
             </el-col>
             <el-col :span="8">
               <el-form-item prop="provinceId">
-                <el-select v-model="formData.data.provinceId" placeholder="省/洲" @change="(val) => getCityData(val, '30', true)">
+                <el-select v-model="formData.data.provinceId" placeholder="省/洲"  filterable allow-create @change="(val) => getCityData(val, '30', true)">
                   <el-option v-for="item in provinceData" :label="item.name" :value="item.id"> </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item prop="cityId">
-                <el-select v-model="formData.data.cityId" placeholder="城市">
+                <el-select v-model="formData.data.cityId"  filterable allow-create placeholder="城市">
                   <el-option v-for="item in cityData" :label="item.name" :value="item.id"> </el-option>
                 </el-select>
               </el-form-item>

src/views/publicModule/contractTemplate/index.vue

@@ -31,14 +31,14 @@
             </el-col>
             <el-col :span="8">
               <el-form-item prop="provinceId">
-                <el-select v-model="formData.data.provinceId" placeholder="省/洲" @change="(val) => getCityData(val, '30', true)">
+                <el-select v-model="formData.data.provinceId" placeholder="省/洲" filterable allow-create @change="(val) => getCityData(val, '30', true)">
                   <el-option v-for="item in provinceData" :label="item.name" :value="item.id"> </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item prop="cityId">
-                <el-select v-model="formData.data.cityId" placeholder="城市">
+                <el-select v-model="formData.data.cityId" filterable allow-create placeholder="城市">
                   <el-option v-for="item in cityData" :label="item.name" :value="item.id"> </el-option>
                 </el-select>
               </el-form-item>

src/views/purchaseManage/supplier/supplier/index.vue

@@ -36,14 +36,14 @@
             </el-col>
             <el-col :span="8">
               <el-form-item prop="provinceId">
-                <el-select v-model="formData.data.provinceId" placeholder="省/洲" @change="(val) => getCityData(val, '30', true)">
+                <el-select v-model="formData.data.provinceId"  filterable allow-create placeholder="省/洲" @change="(val) => getCityData(val, '30', true)">
                   <el-option v-for="item in provinceData" :label="item.name" :value="item.id"> </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item prop="cityId">
-                <el-select v-model="formData.data.cityId" placeholder="城市">
+                <el-select v-model="formData.data.cityId" filterable allow-create placeholder="城市">
                   <el-option v-for="item in cityData" :label="item.name" :value="item.id"> </el-option>
                 </el-select>
               </el-form-item>