医院搜素

src/assets/site/dropdown_chose_ic.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><g><g></g><g><path d="M13.5732,5.315390953125Q13.6985,5.197082953125,13.7668,5.0388329531250005Q13.835,4.880582953125,13.835,4.708251953125Q13.835,4.626011653125,13.819,4.545351953125Q13.8029,4.464691953125,13.7714,4.388710953125Q13.74,4.3127309531249995,13.6943,4.244350953125Q13.6486,4.175970953125,13.5904,4.117817953125Q13.5323,4.059664953125,13.4639,4.013974953125Q13.3955,3.968284953125,13.3195,3.936812953125Q13.2436,3.905340953125,13.1629,3.889295953125Q13.0822,3.873251953125,13,3.873251953125Q12.90746,3.873251953125,12.81716,3.8935169531250002Q12.72686,3.913781953125,12.64319,3.953328953125Q12.55951,3.992875953125,12.48654,4.049783953125Q12.41356,4.106692953125,12.35481,4.178200953125L7.06803,9.842611953125001L3.542182,7.198221953125Q3.428807,7.101421953125,3.288942,7.049841953125Q3.149076,6.998251953125,3,6.998251953125Q2.9177597,6.998251953125,2.8371,7.014291953124999Q2.75644,7.030341953125,2.680459,7.061811953125Q2.604479,7.093281953125,2.536099,7.138971953125Q2.4677189999999998,7.184661953125,2.409566,7.242821953125Q2.351413,7.300971953125,2.305723,7.369351953124999Q2.260033,7.437731953125001,2.228561,7.513711953125Q2.197089,7.589691953125,2.181044,7.6703519531249995Q2.165,7.7510119531249995,2.165,7.833251953125Q2.165,7.937161953125,2.190469,8.037911953125Q2.215938,8.138651953125,2.265322,8.230081953125Q2.314706,8.321511953125,2.384993,8.398041953125Q2.45528,8.474581953125,2.542182,8.531551953125L6.66667,11.624921953125Q6.72781,11.670781953125001,6.796279999999999,11.704751953125001Q6.864739999999999,11.738721953125001,6.93825,11.759671953125Q7.01175,11.780621953125,7.08784,11.787851953125Q7.16393,11.795081953124999,7.24006,11.788351953125Q7.31619,11.781621953125,7.38983,11.761151953125001Q7.46347,11.740681953125,7.53216,11.707161953125Q7.60084,11.673641953125,7.66229,11.628181953125Q7.72373,11.582721953124999,7.77588,11.526851953125L13.5732,5.315390953125Z" fill-rule="evenodd" fill="#006AFF" fill-opacity="1"/></g></g></svg>

src/views/HosInformation.vue

@@ -9,23 +9,36 @@
                         <GuipFormItem column="column" class="mb24" label="出诊医院省市" :required="true">
                             <div class="flex-between" slot="formDom">
                                 <div class="short-width">
-                                    <GuipSelect width="100%" v-model="form.province" multiple :options="options_province"
+                                    <GuipSelect width="100%" v-model="form.province" :options="options_province"
                                         placeholder="选择省份" @change="provinceChange">
                                     </GuipSelect>
                                 </div>
                                 <div class="short-width">
-                                    <GuipSelect width="100%" v-model="form.city" multiple :options="options_city"
+                                    <GuipSelect width="100%" v-model="form.city" :options="options_city"
-                                        placeholder="选择城市" @change="cityChange">
+                                        placeholder="选择城市">
                                     </GuipSelect>
                                 </div>
                             </div>
                         </GuipFormItem>
-                        <GuipFormItem column="column" class="mb24" label="出诊医院名称" :required="true">
+                        <GuipFormItem column="column" class="mb24" label="出诊医院名称" :required="true" style="margin-bottom: 0px;">
-                            <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="form.company_name"
+                            <!-- <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="form.company_name"
                                 prop="company_name" placeholder="请输入">
                                 <img src="@/assets/input_search_ic.svg" slot="suffix" @click="handleClear" />
-                            </GuipInput>
+                            </GuipInput> -->
+                            <!-- <GuipSelectFilter :options="hosipitalList"></GuipSelectFilter> -->
                         </GuipFormItem>
+
+                        <div class="mb24" style="margin-top:-24px;">
+                            <el-autocomplete
+                            v-model="state"
+                            :fetch-suggestions="queryHospital"
+                            placeholder="请输入医院名称或地址"
+                            @select="handleSelect"
+                            ></el-autocomplete>
+
+                            <!-- <GuipSelectFilter v-model="hospitalName" :options="hosipitalList" :searchable="true" placeholder="请选择" :filter-method="hosipitalFilter" search-placeholder="搜索..." /> -->
+                        </div>
+
                         <GuipFormItem column="column" class="mb24" label="医院简称">
                             <span slot="formRight" class="desc">方便患者记忆，非必填</span>
                             <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="form.h_name"
@@ -296,6 +309,8 @@ import GuipSelect from '@/components/GuipSelect.vue';
 import GuipSwitch from '@/components/GuipSwitch.vue';
 import GuipTable from '@/components/GuipTable.vue';
 import GuipDialog from '@/components/GuipDialog.vue';
+import GuipSelectFilter from '@/components/GuipSelectFilter.vue';
+
 import { mapState } from 'vuex';
 import { Object } from 'core-js';
 
@@ -315,6 +330,7 @@ export default {
         GuipSelect,
         GuipTextarea,
         GroupFormBtns,
+        GuipSelectFilter,
     },
     data() {
         return {
@@ -322,6 +338,7 @@ export default {
             dialogType: '1',
             tableKey:Date.now(),
             tableKey1:Date.now(),
+            hospitalName:'',
             dialogVisible: false,
             dialogVisible1: false,
             form1: {
@@ -341,6 +358,11 @@ export default {
             isIndeterminate1: false,
             projectSearchId: 'all',
             projectSearchName: '',
+
+            hospitalRestaurants: [],
+            hospitalSearchState: '',
+            hospitalSearchTimeout:  null,
+
             projectList: [
                 {
                     name: '针灸',
@@ -397,8 +419,8 @@ export default {
                     { required: true, message: '请输入', trigger: 'blur' }
                 ],
             },
-            options_province: false,
+            options_province: [],
-            options_city:false,
+            options_city:[],
             weekPlan: {
                 '周一': '',
                 '周二': '',
@@ -488,25 +510,33 @@ export default {
                     { required: true, message: '请输入站点简称', trigger: 'blur' }
                 ]
             },
+
+            // hosipitalList:[]
+
+            hosipitalList: [
+                { label: '选项1', value: '1' },
+                { label: '选项2', value: '2' },
+                { label: '选项3', value: '3' },
+                // 更多选项...
+            ],
         }
     },
     created(){
         store.commit('SET_CUSTOMIZE', true);
         store.commit('SET_SLIDER_MENU','hosMenuData');
     },
-    mounted() {
+    async mounted() {
         const { depart_id, doctor_id } = this.$route.query; // 获取 doctorId 参数
         if (doctor_id && depart_id) {
             // 请求医生信息
             this.depart_id = depart_id;
             this.doctor_id = doctor_id;
+            await this.getAreaData()
             this.fetchDoctorData()
             this.fetchPackData()
             this.fetchProjectData()
             this.geHosAdress()
         }
-
-        this.getAreaData()
     },
     computed: {
         selectedCount() {
@@ -515,18 +545,47 @@ export default {
         ...mapState(['hosMenuData']) // 从Vuex映射showSidebar状态到组件的计算属性中
     },
     methods: {
+        queryHospital(queryString, cb) {
+            this.$http('POST', '/api/admin/search_hoispital', {
+                keyword: queryString,
+                province: this.form.province,
+                city: this.form.city,
+            }).then(response => {
+                if(response.code == 0) {
+                    this.hospitalRestaurants = response.data
+                }else{
+                    this.$message.error(response.msg);
+                }
+            }).catch(error => {
+                console.error(error, 'error')
+            })
+
+            var restaurants = this.restaurants;
+            var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
+
+            clearTimeout(this.timeout);
+            this.timeout = setTimeout(() => {
+            cb(results);
+            }, 3000 * Math.random());
+        },
+        hosipitalFilter(keyword, options) {
+            if (!keyword) return options
+            return options.filter(item => {
+                // 自定义筛选逻辑
+                return item.label.includes(keyword) || item.value.includes(keyword)
+            })
+        },
         random() {
             var randomNumber = Math.random();
             return randomNumber
         },
         provinceChange(e) {
-            console.log(e[0])
+            this.options_city = []
-        },
+            this.form.city = ''
-        cityChange(e) {
+            this.getAreaData(e)
-            console.log(e[0])
         },
-        getAreaData(province = '') {
+        async getAreaData(province = '') {
-            if (province != '') this.options_city = false
+            if (province != '') this.options_city = []
             this.$http('POST', '/api/admin/get_areas_data', {
                 province: province,
             }).then(response => {
@@ -550,6 +609,7 @@ export default {
                     'afternoon_worktime':response.data.afternoon_worktime.split('-')
                  }
 
+                 this.getAreaData(this.form.province)
             }).catch(error => {
                 console.error(error, 'error')
             })