简历医院信息维护

src/views/dictionary/institutions/components/HospitalForm.vue

@@ -9,8 +9,19 @@
   >
     <div class="base-dialog-body">
       <el-form-item label="Site: ">
-        <el-select v-model="form.SiteId" style="width: 100%" clearable filterable @change="siteChange">
+        <el-select
-          <el-option v-for="item of siteList" :value="item.Id" :key="item.Id" :label="item.SiteName">
+          v-model="form.SiteId"
+          style="width: 100%"
+          clearable
+          filterable
+          @change="siteChange"
+        >
+          <el-option
+            v-for="item of siteList"
+            :value="item.Id"
+            :key="item.Id"
+            :label="item.SiteName"
+          >
           </el-option>
         </el-select>
       </el-form-item>
@@ -20,10 +31,16 @@
       <el-form-item label="Hospital EN: " prop="HospitalName">
         <el-input v-model="form.HospitalName" />
       </el-form-item>
-      <el-form-item label="Affiliated University CN: " prop="UniversityAffiliatedCN">
+      <el-form-item
+        label="Affiliated University CN: "
+        prop="UniversityAffiliatedCN"
+      >
         <el-input v-model="form.UniversityAffiliatedCN" />
       </el-form-item>
-      <el-form-item label="Affiliated University EN: " prop="UniversityAffiliated">
+      <el-form-item
+        label="Affiliated University EN: "
+        prop="UniversityAffiliated"
+      >
         <el-input v-model="form.UniversityAffiliated" />
       </el-form-item>
       <el-form-item label="Country CN: " prop="CountryCN">
@@ -45,10 +62,22 @@
         <el-input v-model="form.City" />
       </el-form-item>
     </div>
-    <div class="base-dialog-footer" style="text-align:right;margin-top:10px;">
+    <div class="base-dialog-footer" style="text-align: right; margin-top: 10px">
       <el-form-item>
-        <el-button :disabled="btnLoading" size="small" type="primary" @click="handleCancel">Cancel</el-button>
+        <el-button
-        <el-button size="small" type="primary" :loading="btnLoading" @click="handleSave">Save</el-button>
+          :disabled="btnLoading"
+          size="small"
+          type="primary"
+          @click="handleCancel"
+          >Cancel</el-button
+        >
+        <el-button
+          size="small"
+          type="primary"
+          :loading="btnLoading"
+          @click="handleSave"
+          >Save</el-button
+        >
       </el-form-item>
     </div>
   </el-form>
@@ -63,14 +92,14 @@ export default {
       type: Object,
       default() {
         return {}
-      }
+      },
     },
     model: {
       type: Object,
       default() {
         return {}
-      }
+      },
-    }
+    },
   },
   data() {
     return {
@@ -87,23 +116,36 @@ export default {
         Province: '',
         ProvinceCN: '',
         City: '',
-        CityCN: ''
+        CityCN: '',
       },
       siteList: [],
       rules: {
-        HospitalNameCN: [{ required: true, message: 'Please specify', trigger: 'blur' }, { max: 50, message: 'The maximum length is 50' }],
+        HospitalNameCN: [
-        UniversityAffiliated: [{ max: 100, message: 'The maximum length is 100' }],
+          { required: true, message: 'Please specify', trigger: 'blur' },
-        UniversityAffiliatedCN: [{ max: 100, message: 'The maximum length is 100' }],
+          { max: 50, message: 'The maximum length is 50' },
-        Country: [{ required: true, message: 'Please specify', trigger: 'blur' },
+        ],
-          { max: 50, message: 'The maximum length is 50' }],
+        UniversityAffiliated: [
-        CountryCN: [{ max: 50, message: 'The maximum length is 50' }],
+          { max: 100, message: 'The maximum length is 100' },
-        Province: [{ required: true, message: 'Please specify', trigger: 'blur' },
+        ],
-          { max: 50, message: 'The maximum length is 50' }],
+        UniversityAffiliatedCN: [
-        ProvinceCN: [{ max: 50, message: 'The maximum length is 50' }],
+          { max: 100, message: 'The maximum length is 100' },
-        City: [{ required: true, message: 'Please specify', trigger: 'blur' },
+        ],
-          { max: 50, message: 'The maximum length is 50' }],
+        Country: [{ max: 50, message: 'The maximum length is 50' }],
-        CityCN: [{ max: 50, message: 'The maximum length is 50' }]
+        CountryCN: [
-      }
+          { required: true, message: 'Please specify', trigger: 'blur' },
+          { max: 50, message: 'The maximum length is 50' },
+        ],
+        Province: [{ max: 50, message: 'The maximum length is 50' }],
+        ProvinceCN: [
+          { required: true, message: 'Please specify', trigger: 'blur' },
+          { max: 50, message: 'The maximum length is 50' },
+        ],
+        City: [{ max: 50, message: 'The maximum length is 50' }],
+        CityCN: [
+          { required: true, message: 'Please specify', trigger: 'blur' },
+          { max: 50, message: 'The maximum length is 50' },
+        ],
+      },
     }
   },
   mounted() {
@@ -114,7 +156,7 @@ export default {
   },
   methods: {
     siteChange(v) {
-      this.siteList.forEach(o => {
+      this.siteList.forEach((o) => {
         if (o.Id === v) {
           this.form.CityCN = o.City
           this.form.HospitalNameCN = o.SiteNameCN
@@ -125,34 +167,37 @@ export default {
       })
     },
     getAllSiteList() {
-      getAllSiteList().then(res => {
+      getAllSiteList()
-        this.siteList = res.Result
+        .then((res) => {
-        console.log(this.siteList)
+          this.siteList = res.Result
-      }).catch(() => {
+          console.log(this.siteList)
-        reject()
+        })
-      })
+        .catch(() => {
+          reject()
+        })
     },
     handleSave() {
-      this.$refs.hospitalForm.validate(valid => {
+      this.$refs.hospitalForm.validate((valid) => {
         if (!valid) return
         this.btnLoading = true
-        addOrUpdateHospital(this.form).then(res => {
+        addOrUpdateHospital(this.form)
-          this.btnLoading = false
+          .then((res) => {
-          if (res.IsSuccess) {
+            this.btnLoading = false
-            this.$message.success('Saved successfully')
+            if (res.IsSuccess) {
-            this.$refs['hospitalForm'].resetFields()
+              this.$message.success('Saved successfully')
-            this.$emit('getList')
+              this.$refs['hospitalForm'].resetFields()
-            this.$emit('close')
+              this.$emit('getList')
-          }
+              this.$emit('close')
-        }).catch(() => {
+            }
-          this.btnLoading = false
+          })
-        })
+          .catch(() => {
+            this.btnLoading = false
+          })
       })
     },
     handleCancel() {
       this.$emit('close')
-    }
+    },
-  }
+  },
-
 }
 </script>

src/views/reviewers/components/EducationTraining.vue

@@ -569,22 +569,30 @@
           :label="$t('system:EducationTraining:table:Hospital')"
           prop="Hospital"
         >
-          <el-select
+          <el-row type="flex" justify="space-between">
-            v-model="postgraduateForm.HospitalId"
+            <el-col :span="11">
-            filterable
+              <el-autocomplete
-            placeholder=""
+                clearable
-          >
+                class="inline-input"
-            <el-option
+                style="width: 100%"
-              v-for="(item, index) in hospitalList"
+                v-model="postgraduateForm.Hospital"
-              :key="index"
+                :fetch-suggestions="querySearch"
-              :label="isEN ? item.HospitalName : item.HospitalNameCN"
+                @select="handleSelect"
-              :value="item.Id"
+                placeholder="Please specify in English"
-            >
+              ></el-autocomplete>
-              <span>
+            </el-col>
-                {{ isEN ? item.HospitalName : item.HospitalNameCN }}
+            <el-col :span="11">
-              </span>
+              <el-autocomplete
-            </el-option>
+                clearable
-          </el-select>
+                class="inline-input"
+                style="width: 100%"
+                v-model="postgraduateForm.HospitalCN"
+                :fetch-suggestions="querySearchCN"
+                @select="handleSelect"
+                placeholder="请用中文注明"
+              ></el-autocomplete>
+            </el-col>
+          </el-row>
         </el-form-item>
         <el-form-item
           :label="$t('system:EducationTraining:table:University')"
@@ -1043,6 +1051,8 @@ export default {
       },
       isDisabled: false,
       loading: false,
+      hospitalSelectList: [],
+      hospitalSelectListCN: [],
     }
   },
   computed: {
@@ -1051,11 +1061,71 @@ export default {
       return this.$i18n.locale !== 'zh'
     },
   },
+  watch: {
+    hospitalList: {
+      handler() {
+        if (!Array.isArray(this.hospitalList) || this.hospitalList.length <= 0)
+          return false
+        this.hospitalSelectList = []
+        this.hospitalList.forEach((item) => {
+          this.hospitalSelectList.push({
+            value: item.HospitalName,
+            ...item,
+          })
+          this.hospitalSelectListCN.push({
+            value: item.HospitalNameCN,
+            ...item,
+          })
+        })
+      },
+      deep: true,
+    },
+  },
   mounted() {
     this.initPage()
     store.dispatch('global/getHospital')
   },
   methods: {
+    handleSelect(value) {
+      const item = value
+      if (item) {
+        this.postgraduateForm.Hospital = item.HospitalName
+        this.postgraduateForm.HospitalCN = item.HospitalNameCN
+      }
+    },
+    querySearch(queryString, cb) {
+      var hospitalList = this.hospitalSelectList
+      var results = queryString
+        ? hospitalList.filter(this.createFilter(queryString))
+        : hospitalList
+      // 调用 callback 返回建议列表的数据
+      cb(results)
+    },
+    querySearchCN(queryString, cb) {
+      var hospitalList = this.hospitalSelectListCN
+      var results = queryString
+        ? hospitalList.filter(this.createFilter(queryString, false))
+        : hospitalList
+      // 调用 callback 返回建议列表的数据
+      cb(results)
+    },
+    createFilter(queryString, isEN = true) {
+      return (hospitalList) => {
+        if (isEN) {
+          return (
+            hospitalList.HospitalName.toLowerCase().indexOf(
+              queryString.toLowerCase()
+            ) >= 0
+          )
+        } else {
+          return (
+            hospitalList.HospitalNameCN.toLowerCase().indexOf(
+              queryString.toLowerCase()
+            ) >= 0
+          )
+        }
+      }
+    },
     initPage() {
       const id = this.$route.query.Id || this.reviewerId
       if (id) {

src/views/reviewers/components/Employment.vue

@@ -14,27 +14,32 @@
             <el-col :span="14">
               <el-form-item
                 :label="$t('system:reviewer:label:Hospital')"
-                prop="HospitalId"
+                prop="HospitalName"
               >
-                <el-select
+                <el-autocomplete
-                  v-model="employmentForm.HospitalId"
+                  clearable
-                  placeholder="select"
+                  class="inline-input"
-                  :disabled="$route.query.ReviewStatus === '1'"
                   style="width: 100%"
-                  size="small"
+                  v-model="employmentForm.HospitalName"
-                  @change="handleHospitalChange"
+                  :fetch-suggestions="querySearch"
-                >
+                  @select="handleSelect"
-                  <el-option
+                  placeholder="Please specify in English"
-                    v-for="(item, index) in hospitalList"
+                  @change="handleChange"
-                    :key="index"
+                ></el-autocomplete>
-                    :label="isEN ? item.HospitalName : item.HospitalNameCN"
+              </el-form-item>
-                    :value="item.Id"
+            </el-col>
-                  >
+            <el-col :span="14">
-                    <span>
+              <el-form-item prop="HospitalNameCN">
-                      {{ isEN ? item.HospitalName : item.HospitalNameCN }}
+                <el-autocomplete
-                    </span>
+                  clearable
-                  </el-option>
+                  class="inline-input"
-                </el-select>
+                  style="width: 100%"
+                  v-model="employmentForm.HospitalNameCN"
+                  :fetch-suggestions="querySearchCN"
+                  @select="handleSelect"
+                  placeholder="请用中文注明"
+                  @change="handleChange"
+                ></el-autocomplete>
               </el-form-item>
             </el-col>
           </el-row>
@@ -43,12 +48,25 @@
             <el-col :span="14">
               <el-form-item
                 :label="$t('system:reviewer:label:AffiliatedUniversity')"
+                prop="UniversityAffiliated"
               >
                 <el-input
-                  disabled
+                  v-model="employmentForm.UniversityAffiliated"
-                  v-model="UniversityAffiliated"
                   type="textarea"
                   autosize
+                  placeholder="Please specify in English"
+                  size="small"
+                  :maxlength="4000"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="14">
+              <el-form-item prop="UniversityAffiliated">
+                <el-input
+                  v-model="employmentForm.UniversityAffiliatedCN"
+                  type="textarea"
+                  autosize
+                  placeholder="请用中文注明"
                   size="small"
                   :maxlength="4000"
                 />
@@ -59,15 +77,23 @@
             <el-col :span="14">
               <el-form-item :label="$t('system:reviewer:label:City')">
                 <el-input
-                  disabled
+                  v-model="employmentForm.City"
-                  v-model="City"
                   size="small"
-                  :maxlength="400"
+                  placeholder="Please specify in English"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="14">
+              <el-form-item>
+                <el-input
+                  v-model="employmentForm.CityCN"
+                  size="small"
+                  placeholder="请用中文注明"
                 />
               </el-form-item>
             </el-col>
           </el-row>
-          <el-row>
+          <!-- <el-row>
             <el-col :span="14">
               <el-form-item :label="$t('system:reviewer:label:State/Province')">
                 <el-input
@@ -90,7 +116,7 @@
                 />
               </el-form-item>
             </el-col>
-          </el-row>
+          </el-row> -->
 
           <el-row>
             <el-col :span="14">
@@ -321,14 +347,34 @@ export default {
         Physician: '',
         PhysicianCN: '',
         PhysicianOriginal: null,
+        HospitalName: '',
+        HospitalNameCN: '',
         WorkPartTime: null,
         WorkPartTimeEn: null,
+        UniversityAffiliated: null,
+        UniversityAffiliatedCN: null,
+        City: null,
+        CityCN: null,
       },
       UniversityAffiliated: '',
       City: '',
       Province: '',
       Country: '',
       employmentRules: {
+        HospitalName: [
+          {
+            required: true,
+            message: this.$t('common:ruleMessage:specify'),
+            trigger: ['blur', 'change'],
+          },
+        ],
+        HospitalNameCN: [
+          {
+            required: true,
+            message: this.$t('common:ruleMessage:specify'),
+            trigger: ['blur', 'change'],
+          },
+        ],
         DepartmentId: [
           {
             required: true,
@@ -435,6 +481,8 @@ export default {
       otherId: 'ef84e9cb-f1a6-49d7-b6da-34be2c12abd5',
       loading: false,
       dictionaryList: {},
+      hospitalSelectList: [],
+      hospitalSelectListCN: [],
     }
   },
   computed: {
@@ -446,7 +494,83 @@ export default {
   mounted() {
     this.initEmployment()
   },
+  watch: {
+    hospitalList: {
+      handler() {
+        if (!Array.isArray(this.hospitalList) || this.hospitalList.length <= 0)
+          return false
+        this.hospitalSelectList = []
+        this.hospitalList.forEach((item) => {
+          this.hospitalSelectList.push({
+            value: item.HospitalName,
+            ...item,
+          })
+          this.hospitalSelectListCN.push({
+            value: item.HospitalNameCN,
+            ...item,
+          })
+        })
+      },
+      deep: true,
+    },
+  },
   methods: {
+    handleSelect(value) {
+      const item = value
+      if (item) {
+        this.employmentForm.HospitalName = item.HospitalName
+        this.employmentForm.HospitalNameCN = item.HospitalNameCN
+        this.employmentForm.UniversityAffiliated = item.UniversityAffiliated
+        this.employmentForm.City = item.City
+        this.employmentForm.UniversityAffiliatedCN = item.UniversityAffiliatedCN
+        this.employmentForm.CityCN = item.CityCN
+      } else {
+        this.employmentForm.UniversityAffiliated = null
+        this.employmentForm.City = null
+        this.employmentForm.UniversityAffiliatedCN = null
+        this.employmentForm.CityCN = null
+      }
+    },
+    handleChange(v) {
+      if (v) return
+      this.employmentForm.UniversityAffiliated = null
+      this.employmentForm.City = null
+      this.employmentForm.UniversityAffiliatedCN = null
+      this.employmentForm.CityCN = null
+    },
+    querySearch(queryString, cb) {
+      var hospitalList = this.hospitalSelectList
+      var results = queryString
+        ? hospitalList.filter(this.createFilter(queryString))
+        : hospitalList
+      // 调用 callback 返回建议列表的数据
+      cb(results)
+    },
+    querySearchCN(queryString, cb) {
+      var hospitalList = this.hospitalSelectListCN
+      var results = queryString
+        ? hospitalList.filter(this.createFilter(queryString, false))
+        : hospitalList
+      // 调用 callback 返回建议列表的数据
+      cb(results)
+    },
+    createFilter(queryString, isEN = true) {
+      return (hospitalList) => {
+        if (isEN) {
+          return (
+            hospitalList.HospitalName.toLowerCase().indexOf(
+              queryString.toLowerCase()
+            ) >= 0
+          )
+        } else {
+          return (
+            hospitalList.HospitalNameCN.toLowerCase().indexOf(
+              queryString.toLowerCase()
+            ) >= 0
+          )
+        }
+      }
+    },
     RankChange(val) {
       var o = this.$d.Rank.find((v) => {
         return v.id === val
@@ -515,6 +639,14 @@ export default {
               : ''
           param.HospitalId = this.employmentForm.HospitalId
 
+          param.HospitalName = this.employmentForm.HospitalName
+          param.HospitalNameCN = this.employmentForm.HospitalNameCN
+          param.UniversityAffiliated = this.employmentForm.UniversityAffiliated
+          param.UniversityAffiliatedCN =
+            this.employmentForm.UniversityAffiliatedCN
+          param.City = this.employmentForm.City
+          param.CityCN = this.employmentForm.CityCN
+
           updateEmploymentInfo(param)
             .then((res) => {
               this.isDisabled = false
@@ -551,9 +683,22 @@ export default {
               PositionOther,
               PositionOtherCN,
               HospitalId,
+              HospitalName,
+              HospitalNameCN,
               WorkPartTime,
               WorkPartTimeEn,
+              UniversityAffiliated,
+              UniversityAffiliatedCN,
+              City,
+              CityCN,
             } = res.Result
+            this.employmentForm.HospitalName = HospitalName
+            this.employmentForm.HospitalNameCN = HospitalNameCN
+            this.employmentForm.UniversityAffiliated = UniversityAffiliated
+            this.employmentForm.UniversityAffiliatedCN = UniversityAffiliatedCN
+            this.employmentForm.City = City
+            this.employmentForm.CityCN = CityCN
+
             this.employmentForm.WorkPartTime = WorkPartTime
             this.employmentForm.WorkPartTimeEn = WorkPartTimeEn
             this.employmentForm.Id = id

src/views/reviewers/curriculumVitae/components/info/continuingTraining.vue

@@ -150,20 +150,32 @@
           </el-form-item>
           <el-form-item
             :label="$t('curriculumVitae:continuingTraining:form:hospital')"
-            prop="HospitalId"
+            prop="Hospital"
+            v-if="isEN"
           >
-            <el-select v-model="form.HospitalId" filterable placeholder="">
+            <el-autocomplete
-              <el-option
+              clearable
-                v-for="(item, index) in hospitalList"
+              class="inline-input"
-                :key="index"
+              style="width: 100%"
-                :label="isEN ? item.HospitalName : item.HospitalNameCN"
+              v-model="form.Hospital"
-                :value="item.Id"
+              :fetch-suggestions="querySearch"
-              >
+              @select="handleSelect"
-                <span>
+              placeholder=""
-                  {{ isEN ? item.HospitalName : item.HospitalNameCN }}
+            ></el-autocomplete>
-                </span>
+          </el-form-item>
-              </el-option>
+          <el-form-item
-            </el-select>
+            :label="$t('curriculumVitae:continuingTraining:form:hospital')"
+            prop="Hospital"
+            v-else
+          >
+            <el-autocomplete
+              clearable
+              class="inline-input"
+              style="width: 100%"
+              v-model="form.HospitalCN"
+              :fetch-suggestions="querySearch"
+              placeholder=""
+            ></el-autocomplete>
           </el-form-item>
           <el-form-item
             :label="$t('curriculumVitae:continuingTraining:form:school')"
@@ -283,6 +295,8 @@ const defaultForm = () => {
     Major: '',
     MajorCN: '',
     HospitalId: null,
+    HospitalCN: null,
+    Hospital: null,
     School: '',
     SchoolCN: '',
     City: '',
@@ -418,6 +432,7 @@ export default {
       },
       loading: false,
       daterange: [],
+      hospitalSelectList: [],
     }
   },
   computed: {
@@ -426,7 +441,55 @@ export default {
   mounted() {
     store.dispatch('global/getHospital')
   },
+  watch: {
+    hospitalList: {
+      handler() {
+        if (!Array.isArray(this.hospitalList) || this.hospitalList.length <= 0)
+          return false
+        this.hospitalSelectList = []
+        this.hospitalList.forEach((item) => {
+          if (this.isEN) {
+            this.hospitalSelectList.push({
+              value: item.HospitalName,
+              ...item,
+            })
+          } else {
+            this.hospitalSelectList.push({
+              value: item.HospitalNameCN,
+              ...item,
+            })
+          }
+        })
+      },
+      deep: true,
+    },
+  },
   methods: {
+    querySearch(queryString, cb) {
+      var hospitalList = this.hospitalSelectList
+      var results = queryString
+        ? hospitalList.filter(this.createFilter(queryString))
+        : hospitalList
+      // 调用 callback 返回建议列表的数据
+      cb(results)
+    },
+    createFilter(queryString) {
+      return (hospitalList) => {
+        if (this.isEN) {
+          return (
+            hospitalList.HospitalName.toLowerCase().indexOf(
+              queryString.toLowerCase()
+            ) >= 0
+          )
+        } else {
+          return (
+            hospitalList.HospitalNameCN.toLowerCase().indexOf(
+              queryString.toLowerCase()
+            ) >= 0
+          )
+        }
+      }
+    },
     openEdit(row) {
       this.form = defaultForm()
       this.daterange = []
@@ -458,6 +521,11 @@ export default {
         if (this.reviewerId) {
           this.form.DoctorId = this.reviewerId
         }
+        let data = Object.assign({}, this.form)
+        if (!this.hospitalList.find((item) => item.Id === data.HospitalId)) {
+          data.Hospital = data.HospitalId
+          data.HospitalId = null
+        }
         this.loading = true
         let res = await addOrUpdatePostgraduateInfo(this.form)
         this.loading = false

src/views/reviewers/curriculumVitae/components/info/info.vue

@@ -209,25 +209,35 @@
           </div>
           <el-form-item
             :label="$t('curriculumVitae:info:form:hospital')"
-            prop="HospitalId"
+            prop="HospitalName"
+            v-if="isEN"
           >
-            <el-select
+            <el-autocomplete
-              v-model="form.HospitalId"
+              clearable
-              filterable
+              class="inline-input"
+              style="width: 100%"
+              v-model="form.HospitalName"
+              :fetch-suggestions="querySearch"
+              @select="handleSelect"
               placeholder=""
-              @change="handleHospitalChange"
+              @change="handleChange"
-            >
+            ></el-autocomplete>
-              <el-option
+          </el-form-item>
-                v-for="(item, index) in hospitalList"
+          <el-form-item
-                :key="index"
+            :label="$t('curriculumVitae:info:form:hospital')"
-                :label="isEN ? item.HospitalName : item.HospitalNameCN"
+            prop="HospitalNameCN"
-                :value="item.Id"
+            v-else
-              >
+          >
-                <span>
+            <el-autocomplete
-                  {{ isEN ? item.HospitalName : item.HospitalNameCN }}
+              clearable
-                </span>
+              class="inline-input"
-              </el-option>
+              style="width: 100%"
-            </el-select>
+              v-model="form.HospitalNameCN"
+              :fetch-suggestions="querySearch"
+              @select="handleSelect"
+              placeholder=""
+              @change="handleChange"
+            ></el-autocomplete>
           </el-form-item>
           <el-form-item
             :label="$t('curriculumVitae:info:form:AffiliatedUniversity')"
@@ -235,7 +245,6 @@
             v-if="isEN"
           >
             <el-input
-              disabled
               v-model="form.UniversityAffiliated"
               type="textarea"
               autosize
@@ -249,7 +258,6 @@
             v-else
           >
             <el-input
-              disabled
               v-model="form.UniversityAffiliatedCN"
               type="textarea"
               autosize
@@ -261,10 +269,16 @@
             :label="$t('curriculumVitae:info:form:City')"
             v-if="isEN"
           >
-            <el-input disabled v-model="form.City" size="small" />
+            <el-input
+              v-model="form.City"
+              size="small"
+            />
           </el-form-item>
           <el-form-item :label="$t('curriculumVitae:info:form:City')" v-else>
-            <el-input disabled v-model="form.CityCN" size="small" />
+            <el-input
+              v-model="form.CityCN"
+              size="small"
+            />
           </el-form-item>
           <el-form-item
             :label="$t('curriculumVitae:info:form:department')"
@@ -433,6 +447,8 @@ const defaultForm = () => {
     RankOther: '',
     RankOtherCN: '',
     HospitalId: '',
+    HospitalName: null,
+    HospitalNameCN: null,
     WorkPartTime: null,
     WorkPartTimeEn: null,
     UniversityAffiliated: null,
@@ -616,11 +632,18 @@ export default {
             trigger: 'blur',
           },
         ],
-        HospitalId: [
+        HospitalName: [
           {
             required: true,
-            message: this.$t('common:ruleMessage:select'),
+            message: this.$t('common:ruleMessage:specify'),
-            trigger: 'blur',
+            trigger: ['blur', 'change'],
+          },
+        ],
+        HospitalNameCN: [
+          {
+            required: true,
+            message: this.$t('common:ruleMessage:specify'),
+            trigger: ['blur', 'change'],
           },
         ],
         UniversityAffiliated: [
@@ -648,16 +671,72 @@ export default {
       loading: false,
       dictionaryList: {},
       otherId: 'ef84e9cb-f1a6-49d7-b6da-34be2c12abd5',
+      hospitalSelectList: [],
     }
   },
   computed: {
     ...mapGetters(['hospitalList']),
   },
+  watch: {
+    hospitalList: {
+      handler() {
+        if (!Array.isArray(this.hospitalList) || this.hospitalList.length <= 0)
+          return false
+        this.hospitalSelectList = []
+        this.hospitalList.forEach((item) => {
+          if (this.isEN) {
+            this.hospitalSelectList.push({
+              value: item.HospitalName,
+              ...item,
+            })
+          } else {
+            this.hospitalSelectList.push({
+              value: item.HospitalNameCN,
+              ...item,
+            })
+          }
+        })
+      },
+      deep: true,
+    },
+  },
   mounted() {
     this.getDicData()
     store.dispatch('global/getHospital')
   },
   methods: {
+    handleChange(v) {
+      if (v) return
+      this.form.UniversityAffiliated = null
+      this.form.City = null
+      this.form.UniversityAffiliatedCN = null
+      this.form.CityCN = null
+    },
+    querySearch(queryString, cb) {
+      var hospitalList = this.hospitalSelectList
+      var results = queryString
+        ? hospitalList.filter(this.createFilter(queryString))
+        : hospitalList
+      // 调用 callback 返回建议列表的数据
+      cb(results)
+    },
+    createFilter(queryString) {
+      return (hospitalList) => {
+        if (this.isEN) {
+          return (
+            hospitalList.HospitalName.toLowerCase().indexOf(
+              queryString.toLowerCase()
+            ) >= 0
+          )
+        } else {
+          return (
+            hospitalList.HospitalNameCN.toLowerCase().indexOf(
+              queryString.toLowerCase()
+            ) >= 0
+          )
+        }
+      }
+    },
     openEdit() {
       this.form = defaultForm()
       Object.keys(this.form).forEach((key) => {
@@ -666,8 +745,6 @@ export default {
         }
       })
       this.model_cfg.visible = true
-      console.log(this.form)
-      console.log(this.DATA)
     },
     handleCancle() {
       this.form = defaultForm()
@@ -680,8 +757,13 @@ export default {
         if (this.reviewerId) {
           this.form.Id = this.reviewerId
         }
+        let data = Object.assign({}, this.form)
+        if (!this.hospitalList.find((item) => item.Id === data.HospitalId)) {
+          data.HospitalName = data.HospitalId
+          data.HospitalId = null
+        }
         this.loading = true
-        let res = await addOrUpdateDoctorBasicInfoAndEmployment(this.form)
+        let res = await addOrUpdateDoctorBasicInfoAndEmployment(data)
         this.loading = false
         if (res.IsSuccess) {
           this.$emit('update:reviewerId', res.Result.Id)
@@ -701,13 +783,18 @@ export default {
         })
         .catch(() => {})
     },
-    handleHospitalChange(value) {
+    handleSelect(value) {
-      const item = this.hospitalList.filter((item) => item.Id === value)
+      const item = value
-      if (item.length) {
+      if (item) {
-        this.form.UniversityAffiliated = item[0].UniversityAffiliated
+        this.form.UniversityAffiliated = item.UniversityAffiliated
-        this.form.City = item[0].City
+        this.form.City = item.City
-        this.form.UniversityAffiliatedCN = item[0].UniversityAffiliatedCN
+        this.form.UniversityAffiliatedCN = item.UniversityAffiliatedCN
-        this.form.CityCN = item[0].CityCN
+        this.form.CityCN = item.CityCN
+      } else {
+        this.form.UniversityAffiliated = null
+        this.form.City = null
+        this.form.UniversityAffiliatedCN = null
+        this.form.CityCN = null
       }
     },
   },