From f9e62fe21b8c73f9dc4188bf7b32804e7fd38e01 Mon Sep 17 00:00:00 2001
From: wangxiaoshuang <825034831@qq.com>
Date: Thu, 6 Jun 2024 18:05:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=BA=E5=91=98=E4=B8=AD=E5=BF=83=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E6=B7=BB=E5=8A=A0=E4=B8=AD=E5=BF=83=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/trials.js                             |   8 +
 src/views/dictionary/checkConfig/index.vue    |  22 +-
 .../personnel-manage/components/site.vue      | 765 +++++++++++-------
 3 files changed, 508 insertions(+), 287 deletions(-)

diff --git a/src/api/trials.js b/src/api/trials.js
index 1cdb1ff0..9be364c8 100644
--- a/src/api/trials.js
+++ b/src/api/trials.js
@@ -3667,3 +3667,11 @@ export function getDicomSeriesInfo(param) {
     data: param
   })
 }
+
+export function getTrialSiteSelectList(params) {
+  return request({
+    url: `/trialMaintenance/getTrialSiteSelectList`,
+    method: 'get',
+    params
+  })
+}
diff --git a/src/views/dictionary/checkConfig/index.vue b/src/views/dictionary/checkConfig/index.vue
index 0b6d8a1c..000b017e 100644
--- a/src/views/dictionary/checkConfig/index.vue
+++ b/src/views/dictionary/checkConfig/index.vue
@@ -773,17 +773,17 @@ export default {
     this.getDictionaryCodeList();
   },
   methods: {
-      querySearch(queryString, cb) {
-        var DictionaryCodeList = this.DictionaryCodeList;
-        var results = queryString ? DictionaryCodeList.filter(this.createFilter(queryString)) : DictionaryCodeList;
-        // 调用 callback 返回建议列表的数据
-        cb(results);
-      },
-      createFilter(queryString) {
-        return (DictionaryCodeList) => {
-          return (DictionaryCodeList.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
-        };
-      },
+    querySearch(queryString, cb) {
+      var DictionaryCodeList = this.DictionaryCodeList;
+      var results = queryString ? DictionaryCodeList.filter(this.createFilter(queryString)) : DictionaryCodeList;
+      // 调用 callback 返回建议列表的数据
+      cb(results);
+    },
+    createFilter(queryString) {
+      return (DictionaryCodeList) => {
+        return (DictionaryCodeList.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+      };
+    },
     // 获取字典表名
     async getDictionaryCodeList(){
       try{
diff --git a/src/views/trials/trials-panel/setting/personnel-manage/components/site.vue b/src/views/trials/trials-panel/setting/personnel-manage/components/site.vue
index e6194d32..7bce0b16 100644
--- a/src/views/trials/trials-panel/setting/personnel-manage/components/site.vue
+++ b/src/views/trials/trials-panel/setting/personnel-manage/components/site.vue
@@ -8,7 +8,7 @@
         </el-form-item>
         <!-- 中心名称 -->
         <el-form-item :label="$t('trials:sitesList:table:siteName')">
-          <el-input v-model="listQuery.Site" class="mr" clearable />
+          <el-input v-model="listQuery.TrialSiteName" class="mr" clearable />
         </el-form-item>
         <!-- 中心别名 -->
         <!-- <el-form-item :label="$t('trials:sitesList:table:siteAliasName')">
@@ -18,7 +18,7 @@
         <el-form-item :label="$t('trials:sitesList:form:keyWord')">
           <el-input
             v-model="listQuery.UserKeyInfo"
-            style="width:200px"
+            style="width: 200px"
             class="mr"
             clearable
             :placeholder="$t('trials:sitesList:formPlaceholder:keyWord')"
@@ -27,35 +27,48 @@
         <!-- 状态 -->
         <el-form-item :label="$t('trials:sitesList:table:status')">
           <el-select v-model="listQuery.IsDeleted" clearable class="mr">
-            <el-option v-for="item of $d.IsSiteDisable" :key="item.label" :label="item.label" :value="item.value" />
+            <el-option
+              v-for="item of $d.IsSiteDisable"
+              :key="item.label"
+              :label="item.label"
+              :value="item.value"
+            />
           </el-select>
         </el-form-item>
         <el-form-item>
           <!-- 查询 -->
           <el-button type="primary" icon="el-icon-search" @click="handleSearch">
-            {{ $t('common:button:search') }}
+            {{ $t("common:button:search") }}
           </el-button>
           <!-- 重置 -->
-          <el-button type="primary" icon="el-icon-refresh-left" @click="handleReset">
-            {{ $t('common:button:reset') }}
+          <el-button
+            type="primary"
+            icon="el-icon-refresh-left"
+            @click="handleReset"
+          >
+            {{ $t("common:button:reset") }}
           </el-button>
           <!-- 中心调研 -->
           <el-button
-            v-hasPermi="['trials:trials-panel:setting:personnel-manage:questionnaire-record']"
+            v-hasPermi="[
+              'trials:trials-panel:setting:personnel-manage:questionnaire-record',
+            ]"
             type="primary"
             icon="el-icon-info"
             @click="handleResearchList"
           >
-            {{ $t('trials:sitesList:button:siteResearch') }}
+            {{ $t("trials:sitesList:button:siteResearch") }}
           </el-button>
           <!-- 添加中心 -->
           <el-button
-            v-hasPermi="['trials:trials-panel:setting:personnel-manage:add-site']"
+            v-hasPermi="[
+              'trials:trials-panel:setting:personnel-manage:add-site',
+            ]"
             type="primary"
             icon="el-icon-plus"
             @click="handleAdd"
           >
-            {{ $t('trials:sitesList:dialogTitle:assignSite') }}
+            {{ $t("trials:sitesList:dialogTitle:assignSite") }}
           </el-button>
           <el-button
             type="primary"
@@ -63,7 +76,7 @@
             :disabled="list.length === 0"
             @click="handleResearchListExport"
           >
-            {{ $t('common:button:export') }}
+            {{ $t("common:button:export") }}
           </el-button>
           <!-- 下载模板 -->
           <el-button
@@ -71,15 +84,17 @@
             icon="el-icon-download"
             @click="handleDownload"
           >
-            {{ $t('common:button:downloadTpl') }}
+            {{ $t("common:button:downloadTpl") }}
           </el-button>
           <el-button
-            v-hasPermi="['trials:trials-panel:setting:personnel-manage:add-site']"
+            v-hasPermi="[
+              'trials:trials-panel:setting:personnel-manage:add-site',
+            ]"
             type="primary"
             icon="el-icon-upload2"
             @click="handleUpload"
           >
-            {{ $t('common:button:upload') }}
+            {{ $t("common:button:upload") }}
           </el-button>
         </el-form-item>
       </el-form>
@@ -100,18 +115,19 @@
         width="120"
       >
         <template slot-scope="scope">
-          <span v-if="!!scope.row.TrialSiteCode">{{ scope.row.TrialSiteCode }}</span>
+          <span v-if="!!scope.row.TrialSiteCode">{{
+            scope.row.TrialSiteCode
+          }}</span>
           <i
             v-else
             class="el-icon-warning"
-            style="color: #f44336;font-size: 14px;"
+            style="color: #f44336; font-size: 14px"
           />
-
         </template>
       </el-table-column>
       <!-- 中心名称 -->
       <el-table-column
-        prop="Site"
+        prop="TrialSiteName"
         :label="$t('trials:sitesList:table:siteName')"
         show-overflow-tooltip
         sortable="custom"
@@ -125,22 +141,6 @@
         sortable="custom"
         min-width="120"
       />
-      <!-- 城市 -->
-      <!-- <el-table-column
-        prop="City"
-        :label="$t('trials:sitesList:table:city')"
-        sortable="custom"
-        show-overflow-tooltip
-        width="100"
-      /> -->
-      <!-- 国家 -->
-      <!-- <el-table-column
-        prop="Country"
-        :label="$t('trials:sitesList:table:country')"
-        show-overflow-tooltip
-        sortable="custom"
-        width="120"
-      /> -->
       <!-- 参与者 -->
       <el-table-column
         prop="UserNameList"
@@ -149,27 +149,36 @@
         min-width="100"
       >
         <template slot-scope="scope">
-          <el-button v-if="scope.row.UserCount > 0" size="small" type="text" @click="getCrcList(scope.row)">
-            {{ scope.row.UserNameList.length>0 ? scope.row.UserNameList.join(', ') :'' }}
+          <el-button
+            v-if="scope.row.UserCount > 0"
+            size="small"
+            type="text"
+            @click="getCrcList(scope.row)"
+          >
+            {{
+              scope.row.UserNameList.length > 0
+                ? scope.row.UserNameList.join(", ")
+                : ""
+            }}
           </el-button>
         </template>
       </el-table-column>
       <!-- Subjects -->
-        <el-table-column
-          prop="SubjectCount"
-          min-width="100"
-          :label="$t('trials:site:table:subjects')"
-          show-overflow-tooltip
-          sortable="custom"
-        />
-        <!-- Visits -->
-        <el-table-column
-          prop="VisitCount"
-          min-width="100"
-          :label="$t('trials:site:table:visits')"
-          show-overflow-tooltip
-          sortable="custom"
-        />
+      <el-table-column
+        prop="SubjectCount"
+        min-width="100"
+        :label="$t('trials:site:table:subjects')"
+        show-overflow-tooltip
+        sortable="custom"
+      />
+      <!-- Visits -->
+      <el-table-column
+        prop="VisitCount"
+        min-width="100"
+        :label="$t('trials:site:table:visits')"
+        show-overflow-tooltip
+        sortable="custom"
+      />
       <!-- 状态 -->
       <el-table-column
         prop="IsDeleted"
@@ -179,8 +188,12 @@
         min-width="100"
       >
         <template slot-scope="scope">
-          <el-tag v-if="scope.row.IsDeleted" type="danger">{{ $fd('IsSiteDisable', scope.row.IsDeleted) }}</el-tag>
-          <el-tag v-else>{{ $fd('IsSiteDisable', scope.row.IsDeleted) }}</el-tag>
+          <el-tag v-if="scope.row.IsDeleted" type="danger">{{
+            $fd("IsSiteDisable", scope.row.IsDeleted)
+          }}</el-tag>
+          <el-tag v-else>{{
+            $fd("IsSiteDisable", scope.row.IsDeleted)
+          }}</el-tag>
         </template>
       </el-table-column>
       <!-- 授权时间 -->
@@ -191,46 +204,18 @@
         sortable
         min-width="150"
       />
-      <!-- 禁用时间 -->
-      <!-- <el-table-column
-        prop="DeletedTime"
-        :label="$t('trials:sitesList:table:timeDeleted')"
-        show-overflow-tooltip
-        sortable
-        width="210"
-      /> -->
-      <!-- <el-table-column
-        prop="CreateTime"
-        :label="$t('trials:internalStaff:table:CreateTime')"
-        show-overflow-tooltip
-        sortable
-        width="210"
-      /> -->
       <el-table-column
-        v-if="hasPermi(['trials:trials-panel:setting:personnel-manage:edit-site','trials:trials-panel:setting:personnel-manage:remove-site'])"
+        v-if="
+          hasPermi([
+            'trials:trials-panel:setting:personnel-manage:edit-site',
+            'trials:trials-panel:setting:personnel-manage:remove-site',
+          ])
+        "
         :label="$t('common:action:action')"
         min-width="120"
       >
         <template slot-scope="scope">
-          <!-- Assign -->
-          <!-- <el-button
-            v-hasPermi="['trials:trials-panel:setting:personnel-manage:assign-staff']"
-            circle
-            :title="$t('trials:sitesList:action:assign')"
-            icon="el-icon-user"
-            :disabled="scope.row.IsDeleted"
-            @click="handleAssignCRC(scope.row)"
-          />
           <el-button
-            v-hasPermi="['trials:trials-panel:setting:personnel-manage:assign-staff']"
-            circle
-            :title="$t('common:button:edit')"
-            icon="el-icon-minus"
-            :disabled="scope.row.UserCount === 0"
-            @click="getCrcList(scope.row)"
-          /> -->
-          <el-button
-
             circle
             :title="$t('trials:sitesList:action:assign')"
             icon="el-icon-user"
@@ -240,7 +225,9 @@
 
           <!-- Edit -->
           <el-button
-            v-hasPermi="['trials:trials-panel:setting:personnel-manage:edit-site']"
+            v-hasPermi="[
+              'trials:trials-panel:setting:personnel-manage:edit-site',
+            ]"
             circle
             :title="$t('common:button:edit')"
             icon="el-icon-edit-outline"
@@ -249,17 +236,15 @@
         </template>
       </el-table-column>
     </el-table>
-    <div class="pagination" style="text-align:right">
-      <pagination :total="total" :page.sync="listQuery.PageIndex" :limit.sync="listQuery.PageSize" @pagination="getList" />
+    <div class="pagination" style="text-align: right">
+      <pagination
+        :total="total"
+        :page.sync="listQuery.PageIndex"
+        :limit.sync="listQuery.PageSize"
+        @pagination="getList"
+      />
     </div>
 
-    <!-- 给项目分配site -->
-    <base-model v-if="site_model.visible" :config="site_model">
-      <template slot="dialog-body">
-        <SiteForm @closeDialog="closeSiteDialog" />
-      </template>
-    </base-model>
-
     <!-- 给site分配crc -->
     <base-model v-if="crc_model.visible" :config="crc_model">
       <template slot="dialog-body">
@@ -270,59 +255,96 @@
     <!-- 修改site信息 -->
     <base-model v-if="edit_model.visible" :config="edit_model">
       <template slot="dialog-body">
-        <el-form ref="editForm" :model="form" label-width="100px" :rules="rules">
+        <el-form
+          ref="editForm"
+          :model="form"
+          label-width="100px"
+          :rules="rules"
+        >
           <!-- 中心编号 -->
-          <el-form-item :label="$t('trials:sitesList:table:siteId')" prop="TrialSiteCode">
+          <el-form-item
+            :label="$t('trials:sitesList:table:siteId')"
+            prop="TrialSiteCode"
+          >
             <el-input v-model="form.TrialSiteCode" />
           </el-form-item>
           <!-- 中心名称 -->
-          <el-form-item :label="$t('trials:sitesList:table:siteName')">
-            <el-input v-model="form.Site" disabled />
+          <el-form-item
+            :label="$t('trials:sitesList:table:siteName')"
+            prop="TrialSiteName"
+          >
+            <el-autocomplete
+              clearable
+              class="inline-input"
+              style="width: 100%"
+              v-model="form.TrialSiteName"
+              :fetch-suggestions="querySearch"
+              @select="handleSelect"
+              placeholder=""
+            ></el-autocomplete>
           </el-form-item>
           <!-- 中心别称 -->
-          <el-form-item :label="$t('trials:sitesList:table:siteAliasName')" prop="TrialSiteAliasName">
+          <el-form-item
+            :label="$t('trials:sitesList:table:siteAliasName')"
+            prop="TrialSiteAliasName"
+          >
             <el-input v-model="form.TrialSiteAliasName" />
           </el-form-item>
-          <!-- 城市 -->
-          <el-form-item :label="$t('trials:sitesList:table:city')">
-            <el-input v-model="form.City" disabled />
-          </el-form-item>
-          <!-- 国家 -->
-          <el-form-item :label="$t('trials:sitesList:table:country')">
-            <el-input v-model="form.Country" disabled />
-          </el-form-item>
           <!-- 状态 -->
           <el-form-item :label="$t('trials:sitesList:table:status')">
-            <el-switch v-model="form.IsDeleted" :active-value="false" :inactive-value="true" />
+            <el-switch v-model="form.IsDeleted" />
           </el-form-item>
-
         </el-form>
       </template>
       <template slot="dialog-footer">
-        <el-button type="primary" size="small" :disabled="saveBtnLoading" @click="edit_model.visible = false">
-          {{ $t('common:button:cancel') }}
+        <el-button
+          type="primary"
+          size="small"
+          :disabled="saveBtnLoading"
+          @click="edit_model.visible = false"
+        >
+          {{ $t("common:button:cancel") }}
         </el-button>
-        <el-button type="primary" size="small" :loading="saveBtnLoading" @click="handleUpdateSiteID">
-          {{ $t('common:button:save') }}
+        <el-button
+          type="primary"
+          size="small"
+          :loading="saveBtnLoading"
+          @click="handleUpdateSiteID"
+        >
+          {{ $t("common:button:save") }}
         </el-button>
-
       </template>
     </base-model>
 
     <!-- 修改参与者人员状态 -->
     <base-model v-if="status_model.visible" :config="status_model">
       <template slot="dialog-body">
-        <span>{{ $t('trials:internalStaff:table:status') }}:</span>
+        <span>{{ $t("trials:internalStaff:table:status") }}:</span>
         <el-radio-group v-model="staffStatus">
-          <el-radio v-for="item of $d.IsUserExitTrial" :key="item.label" :label="item.value">{{ item.label }}</el-radio>
+          <el-radio
+            v-for="item of $d.IsUserExitTrial"
+            :key="item.label"
+            :label="item.value"
+            >{{ item.label }}</el-radio
+          >
         </el-radio-group>
       </template>
       <template slot="dialog-footer">
-        <el-button :disabled="btnLoading" size="small" type="primary" @click="status_model.visible = false">
-          {{ $t('common:button:cancel') }}
+        <el-button
+          :disabled="btnLoading"
+          size="small"
+          type="primary"
+          @click="status_model.visible = false"
+        >
+          {{ $t("common:button:cancel") }}
         </el-button>
-        <el-button size="small" type="primary" :loading="btnLoading" @click="saveStatus">
-          {{ $t('common:button:save') }}
+        <el-button
+          size="small"
+          type="primary"
+          :loading="btnLoading"
+          @click="saveStatus"
+        >
+          {{ $t("common:button:save") }}
         </el-button>
       </template>
     </base-model>
@@ -330,18 +352,25 @@
     <!-- site下的crc/cra -->
     <base-model v-if="siteOfcrc_model.visible" :config="siteOfcrc_model">
       <template slot="dialog-body">
-        <div style="text-align:right;">
+        <div style="text-align: right">
           <el-button
-            v-hasPermi="['trials:trials-panel:setting:personnel-manage:assign-staff']"
+            v-hasPermi="[
+              'trials:trials-panel:setting:personnel-manage:assign-staff',
+            ]"
             type="primary"
             icon="el-icon-plus"
             size="small"
             @click="crc_model.visible = true"
           >
-            {{ $t('common:button:add') }}
+            {{ $t("common:button:add") }}
           </el-button>
         </div>
-        <el-table v-loading="userListLoading" :data="userList" height="400" size="small">
+        <el-table
+          v-loading="userListLoading"
+          :data="userList"
+          height="400"
+          size="small"
+        >
           <!-- 姓名 -->
           <el-table-column
             prop="UserRealName"
@@ -391,8 +420,12 @@
             width="100"
           >
             <template slot-scope="scope">
-              <el-tag v-if="scope.row.IsDeleted" type="danger">{{ $fd('IsUserExitTrial', scope.row.IsDeleted) }}</el-tag>
-              <el-tag v-else>{{ $fd('IsUserExitTrial', scope.row.IsDeleted) }}</el-tag>
+              <el-tag v-if="scope.row.IsDeleted" type="danger">{{
+                $fd("IsUserExitTrial", scope.row.IsDeleted)
+              }}</el-tag>
+              <el-tag v-else>{{
+                $fd("IsUserExitTrial", scope.row.IsDeleted)
+              }}</el-tag>
             </template>
           </el-table-column>
           <el-table-column
@@ -410,13 +443,17 @@
             width="210"
           />
           <el-table-column
-            v-hasPermi="['trials:trials-panel:setting:personnel-manage:assign-staff']"
+            v-hasPermi="[
+              'trials:trials-panel:setting:personnel-manage:assign-staff',
+            ]"
             :label="$t('common:action:action')"
             width="100"
           >
             <template slot-scope="scope">
               <el-button
-                v-hasPermi="['trials:trials-panel:setting:personnel-manage:assign-staff']"
+                v-hasPermi="[
+                  'trials:trials-panel:setting:personnel-manage:assign-staff',
+                ]"
                 circle
                 :title="$t('trials:internalStaff:action:status')"
                 icon="el-icon-edit-outline"
@@ -424,57 +461,96 @@
               />
             </template>
           </el-table-column>
-
         </el-table>
       </template>
     </base-model>
     <!-- 导入 -->
     <base-model v-if="upload_model.visible" :config="upload_model">
       <template slot="dialog-body">
-        <UploadExcel @closeDialog="upload_model.visible = false" @getList="getList" />
+        <UploadExcel
+          @closeDialog="upload_model.visible = false"
+          @getList="getList"
+        />
       </template>
     </base-model>
-
   </div>
 </template>
 <script>
-import { getSiteCRCSimpleList, deleteTrialSite, deleteSiteCRC, editTrialSite, getTrialSiteCRCList, trialSiteUserListExport } from '@/api/trials'
-import { DownloadCommonDoc } from '@/api/dictionary'
-import Pagination from '@/components/Pagination'
-import SiteForm from './siteForm'
-import CRCForm from './crcForm'
-import BaseModel from '@/components/BaseModel'
-import UploadExcel from './uploadExcel'
-import moment from 'moment'
+import {
+  getSiteCRCSimpleList,
+  deleteTrialSite,
+  deleteSiteCRC,
+  editTrialSite,
+  getTrialSiteCRCList,
+  trialSiteUserListExport,
+  addTrialSites,
+  getTrialSiteSelectList,
+} from "@/api/trials";
+import { DownloadCommonDoc } from "@/api/dictionary";
+import Pagination from "@/components/Pagination";
+import CRCForm from "./crcForm";
+import BaseModel from "@/components/BaseModel";
+import UploadExcel from "./uploadExcel";
+import moment from "moment";
 const getListQueryDefault = () => {
   return {
-    UserKeyInfo: '',
-    TrialSiteCode: '',
-    TrialSiteAliasName: '',
+    UserKeyInfo: "",
+    TrialSiteCode: "",
+    TrialSiteAliasName: "",
+    TrialSiteName: null,
     IsDeleted: null,
-    SortField: 'TrialSiteCode',
+    SortField: "TrialSiteCode",
     Asc: true,
     PageIndex: 1,
-    PageSize: 20
-  }
-}
+    PageSize: 20,
+  };
+};
 export default {
-  name: 'Participant',
-  components: { Pagination, SiteForm, CRCForm, BaseModel, UploadExcel },
+  name: "Participant",
+  components: { Pagination, CRCForm, BaseModel, UploadExcel },
   data() {
     return {
       list: [],
       listQuery: getListQueryDefault(),
       listLoading: false,
       total: 0,
-      currentSiteId: '',
-      site_model: { visible: false, title: this.$t('trials:sitesList:dialogTitle:assignSite'), width: '60%' },
-      crc_model: { visible: false, title: this.$t('trials:sitesList:dialogTitle:assignStaff').replace('xxx', this.$route.query.trialCode), width: '60%' },
-      edit_model: { visible: false, title: this.$t('trials:sitesList:dialogTitle:editSite'), width: '600px' },
-      status_model: { visible: false, title: this.$t('trials:sitesList:dialogTitle:editStaffStauts'), width: '500px' },
-      siteOfcrc_model: { visible: false, title: '', width: '70%' },
-      form: { TrialSiteCode: '', Site: '', City: '', Country: '', IsDeleted: false },
-      upload_model: { visible: false, title: this.$t('common:button:upload'), width: '500px' },
+      currentSiteId: "",
+      site_model: {
+        visible: false,
+        title: this.$t("trials:sitesList:dialogTitle:assignSite"),
+        width: "60%",
+      },
+      crc_model: {
+        visible: false,
+        title: this.$t("trials:sitesList:dialogTitle:assignStaff").replace(
+          "xxx",
+          this.$route.query.trialCode
+        ),
+        width: "60%",
+      },
+      edit_model: {
+        visible: false,
+        title: this.$t("trials:sitesList:dialogTitle:editSite"),
+        width: "600px",
+        model_type: "add",
+      },
+      status_model: {
+        visible: false,
+        title: this.$t("trials:sitesList:dialogTitle:editStaffStauts"),
+        width: "500px",
+      },
+      siteOfcrc_model: { visible: false, title: "", width: "70%" },
+      form: {
+        TrialSiteCode: "",
+        TrialSiteName: "",
+        TrialSiteAliasName: "",
+        IsDeleted: true,
+      },
+      upload_model: {
+        visible: false,
+        title: this.$t("common:button:upload"),
+        width: "500px",
+      },
       saveBtnLoading: false,
       staffStatus: null,
       currentRow: {},
@@ -484,211 +560,348 @@ export default {
       moment,
       rules: {
         TrialSiteCode: [
-          { required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' },
-          { max: 100, message: `${this.$t('common:ruleMessage:maxLength')} 100`, trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("common:ruleMessage:specify"),
+            trigger: "blur",
+          },
+          {
+            max: 100,
+            message: `${this.$t("common:ruleMessage:maxLength")} 100`,
+            trigger: "blur",
+          },
+        ],
+        TrialSiteName: [
+          {
+            required: true,
+            message: this.$t("common:ruleMessage:specify"),
+            trigger: ["blur", "change"],
+          },
+          {
+            max: 500,
+            message: `${this.$t("common:ruleMessage:maxLength")} 500`,
+            trigger: "blur",
+          },
         ],
         TrialSiteAliasName: [
-          { required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' }
-        ]
+          {
+            required: true,
+            message: this.$t("common:ruleMessage:specify"),
+            trigger: "blur",
+          },
+          {
+            max: 500,
+            message: `${this.$t("common:ruleMessage:maxLength")} 500`,
+            trigger: "blur",
+          },
+        ],
       },
-      trialId: ''
-    }
+      trialId: "",
+      TrialSiteSelectList: [],
+    };
   },
   mounted() {
-    this.trialId = this.$route.query.trialId
-    this.getList()
+    this.trialId = this.$route.query.trialId;
+    this.getList();
+    this.getTrialSiteSelectList();
   },
   methods: {
+    handleSelect(item) {
+      this.form.TrialSiteName = item.SiteName;
+      this.form.TrialSiteAliasName = item.AliasName
+        ? item.AliasName
+        : this.form.TrialSiteAliasName;
+      this.form.SiteId = item.SiteId;
+    },
+    querySearch(queryString, cb) {
+      var TrialSiteSelectList = this.TrialSiteSelectList;
+      var results = queryString
+        ? TrialSiteSelectList.filter(this.createFilter(queryString))
+        : TrialSiteSelectList;
+      // 调用 callback 返回建议列表的数据
+      cb(results);
+    },
+    createFilter(queryString) {
+      return (TrialSiteSelectList) => {
+        return (
+          TrialSiteSelectList.SiteName.toLowerCase().indexOf(
+            queryString.toLowerCase()
+          ) === 0 ||
+          TrialSiteSelectList.AliasName.toLowerCase().indexOf(
+            queryString.toLowerCase()
+          ) === 0
+        );
+      };
+    },
+    // 获取site可选列表
+    async getTrialSiteSelectList() {
+      try {
+        let res = await getTrialSiteSelectList();
+        if (res.IsSuccess) {
+          this.TrialSiteSelectList = res.Result.map((item) => {
+            return {
+              value: item.SiteName + " " + item.AliasName,
+              ...item,
+            };
+          });
+        }
+      } catch (err) {
+        console.log(err);
+      }
+    },
     // 获取site列表
     getList() {
-      this.listLoading = true
-      this.listQuery.TrialId = this.trialId
-      getSiteCRCSimpleList(this.listQuery).then(res => {
-        this.listLoading = false
-        this.list = res.Result.CurrentPageData
-        this.total = res.Result.TotalCount
-      }).catch(() => { this.listLoading = false })
+      this.listLoading = true;
+      this.listQuery.TrialId = this.trialId;
+      getSiteCRCSimpleList(this.listQuery)
+        .then((res) => {
+          this.listLoading = false;
+          this.list = res.Result.CurrentPageData;
+          this.total = res.Result.TotalCount;
+        })
+        .catch(() => {
+          this.listLoading = false;
+        });
     },
     // 打开添加site弹窗
     handleAdd() {
-      this.site_model.visible = true
+      this.edit_model.title = this.$t(
+        "trials:sitesList:dialogTitle:assignSite"
+      );
+      this.edit_model.model_type = "add";
+      Object.keys(this.form).forEach((key) => {
+        this.form[key] = "";
+        if (key === "IsDeleted") {
+          this.form[key] = true;
+        }
+      });
+      this.edit_model.visible = true;
     },
     // 给site分配CRC
     handleAssignCRC(row) {
       if (!row.TrialSiteCode) {
-        this.$alert(this.$t('trials:sitesList:message:setSiteId'))
-        return
+        this.$alert(this.$t("trials:sitesList:message:setSiteId"));
+        return;
       }
-      this.currentSiteId = row.TrialSiteId
-      var title = this.$t('trials:sitesList:dialogTitle:assignStaff')
-      console.log(title)
-      this.crc_model.title = title.replace('xxx', this.$route.query.trialCode)
-      this.crc_model.visible = true
+      this.currentSiteId = row.TrialSiteId;
+      var title = this.$t("trials:sitesList:dialogTitle:assignStaff");
+      console.log(title);
+      this.crc_model.title = title.replace("xxx", this.$route.query.trialCode);
+      this.crc_model.visible = true;
     },
     // 编辑site信息
     handleEdit(row) {
       if (Object.keys(row).length) {
-        this.form = { ...row }
+        this.form = { ...row };
       }
-      this.edit_model.visible = true
+      this.edit_model.title = this.$t("trials:sitesList:dialogTitle:editSite");
+      this.edit_model.model_type = "edit";
+      this.edit_model.visible = true;
     },
     // 更新site信息
     handleUpdateSiteID() {
-      this.$refs['editForm'].validate(valid => {
-        if (!valid) return
-        this.saveBtnLoading = true
+      this.$refs["editForm"].validate((valid) => {
+        if (!valid) return;
+        this.saveBtnLoading = true;
         const param = {
           trialId: this.trialId,
           id: this.form.Id,
+          SiteId: this.form.SiteId,
+          TrialSiteName: this.form.TrialSiteName,
           trialSiteCode: this.form.TrialSiteCode,
           trialSiteAliasName: this.form.TrialSiteAliasName,
-          isDeleted: this.form.IsDeleted
+          isDeleted: this.form.IsDeleted,
+        };
+        if (this.edit_model.model_type === "add") {
+          addTrialSites([param])
+            .then((res) => {
+              this.saveBtnLoading = false;
+              if (res.IsSuccess) {
+                this.edit_model.visible = false;
+                this.$message.success(
+                  this.$t("common:message:savedSuccessfully")
+                );
+                this.getList();
+                this.getTrialSiteSelectList();
+              }
+            })
+            .catch(() => {
+              this.saveBtnLoading = false;
+            });
+        } else {
+          editTrialSite(param)
+            .then((res) => {
+              this.saveBtnLoading = false;
+              if (res.IsSuccess) {
+                this.edit_model.visible = false;
+                this.$message.success(
+                  this.$t("common:message:savedSuccessfully")
+                );
+                this.getList();
+                this.getTrialSiteSelectList();
+              }
+            })
+            .catch(() => {
+              this.saveBtnLoading = false;
+            });
         }
-        editTrialSite(param).then(res => {
-          this.saveBtnLoading = false
-          if (res.IsSuccess) {
-            this.edit_model.visible = false
-            this.$message.success(this.$t('common:message:savedSuccessfully'))
-            this.getList()
-          }
-        }).catch(() => { this.saveBtnLoading = false })
-      })
+      });
     },
     // 移除site
     handleDelete(row) {
-      this.$confirm(this.$t('trials:sitesList:message:removeSite'), {
-        type: 'warning',
-        distinguishCancelAndClose: true
-      })
-        .then(() => {
-          deleteTrialSite(row.Id, this.trialId)
-            .then(res => {
-              if (res.IsSuccess) {
-                this.list.splice(this.list.findIndex(item => item.Id === row.Id), 1)
-                this.$message.success(this.$t('trials:sitesList:message:removedSuccessfully'))
-              }
-            })
-        })
+      this.$confirm(this.$t("trials:sitesList:message:removeSite"), {
+        type: "warning",
+        distinguishCancelAndClose: true,
+      }).then(() => {
+        deleteTrialSite(row.Id, this.trialId).then((res) => {
+          if (res.IsSuccess) {
+            this.list.splice(
+              this.list.findIndex((item) => item.Id === row.Id),
+              1
+            );
+            this.$message.success(
+              this.$t("trials:sitesList:message:removedSuccessfully")
+            );
+          }
+        });
+      });
     },
     handleStatus(row) {
-      const { IsDeleted } = { ...row }
-      this.currentRow = { ...row }
-      this.staffStatus = IsDeleted
-      this.status_model.visible = true
+      const { IsDeleted } = { ...row };
+      this.currentRow = { ...row };
+      this.staffStatus = IsDeleted;
+      this.status_model.visible = true;
     },
     // 修改某个site下的CRC状态
     saveStatus() {
-      this.btnLoading = true
+      this.btnLoading = true;
       deleteSiteCRC(this.currentRow.Id, this.trialId, this.staffStatus)
-        .then(res => {
-          this.btnLoading = false
+        .then((res) => {
+          this.btnLoading = false;
           if (res.IsSuccess) {
-            this.status_model.visible = false
-            this.getTrialSiteCRCList()
-            this.getList()
-            this.$message.success(this.$t('common:message:savedSuccessfully'))
+            this.status_model.visible = false;
+            this.getTrialSiteCRCList();
+            this.getList();
+            this.$message.success(this.$t("common:message:savedSuccessfully"));
           }
-        }).catch(() => {
-          this.btnLoading = false
         })
+        .catch(() => {
+          this.btnLoading = false;
+        });
     },
     // 获取某个site下的crc列表
     getCrcList(row) {
-      this.currentRow = { ...row }
-      this.currentSiteId = row.TrialSiteId
-      var title = this.$t('trials:sitesList:dialogTitle:staff')
-      this.siteOfcrc_model.title = title.replace('xxx', row.TrialSiteCode)
-      this.siteOfcrc_model.visible = true
-      this.getTrialSiteCRCList()
+      this.currentRow = { ...row };
+      this.currentSiteId = row.TrialSiteId;
+      var title = this.$t("trials:sitesList:dialogTitle:staff");
+      this.siteOfcrc_model.title = title.replace("xxx", row.TrialSiteCode);
+      this.siteOfcrc_model.visible = true;
+      this.getTrialSiteCRCList();
     },
     getTrialSiteCRCList() {
-      this.userListLoading = true
-      getTrialSiteCRCList(this.trialId, this.currentRow.TrialSiteId).then(res => {
-        this.userListLoading = false
-        this.userList = res.Result
-      }).catch(() => { this.userListLoading = false })
+      this.userListLoading = true;
+      getTrialSiteCRCList(this.trialId, this.currentRow.TrialSiteId)
+        .then((res) => {
+          this.userListLoading = false;
+          this.userList = res.Result;
+        })
+        .catch(() => {
+          this.userListLoading = false;
+        });
     },
     // 导出
     handleResearchListExport() {
-      this.listQuery.TrialId = this.trialId
-      this.listLoading = true
+      this.listQuery.TrialId = this.trialId;
+      this.listLoading = true;
       // eslint-disable-next-line no-unused-vars
-      const { SortField, Asc, PageIndex, PageSize, ...param } = { ...this.listQuery }
-      trialSiteUserListExport({ ...param }).then(data => {
-        this.listLoading = false
-      }).catch(() => { this.listLoading = false })
+      const { SortField, Asc, PageIndex, PageSize, ...param } = {
+        ...this.listQuery,
+      };
+      trialSiteUserListExport({ ...param })
+        .then((data) => {
+          this.listLoading = false;
+        })
+        .catch(() => {
+          this.listLoading = false;
+        });
     },
     handleResearchList() {
-      this.$router.push({ path: `/trials/trials-panel/attachments/site-research?trialId=${this.$route.query.trialId}&trialCode=${this.$route.query.trialCode}&researchProgramNo=${this.$route.query.researchProgramNo}` })
+      this.$router.push({
+        path: `/trials/trials-panel/attachments/site-research?trialId=${this.$route.query.trialId}&trialCode=${this.$route.query.trialCode}&researchProgramNo=${this.$route.query.researchProgramNo}`,
+      });
     },
     handleUpload() {
-      this.upload_model.visible = true
+      this.upload_model.visible = true;
     },
     handleDownload() {
-      this.loading = true
-      DownloadCommonDoc('TrialSiteSurveyImportUser_Template').then(data => {
-        this.loading = false
-      }).catch(() => { this.loading = false })
+      this.loading = true;
+      DownloadCommonDoc("TrialSiteSurveyImportUser_Template")
+        .then((data) => {
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
     },
     // site列表排序
     handleSortByColumn(column) {
-      if (column.order === 'ascending') {
-        this.listQuery.Asc = true
+      if (column.order === "ascending") {
+        this.listQuery.Asc = true;
       } else {
-        this.listQuery.Asc = false
+        this.listQuery.Asc = false;
       }
-      this.listQuery.SortField = column.prop
-      this.listQuery.PageIndex = 1
-      this.getList()
+      this.listQuery.SortField = column.prop;
+      this.listQuery.PageIndex = 1;
+      this.getList();
     },
     // 查询
     handleSearch() {
-      this.listQuery.PageIndex = 1
-      this.getList()
+      this.listQuery.PageIndex = 1;
+      this.getList();
     },
     // 重置
     handleReset() {
-      this.listQuery = getListQueryDefault()
-      this.getList()
+      this.listQuery = getListQueryDefault();
+      this.getList();
     },
     // 关闭添加分配crc模态框
     closeDialog(isReresh) {
-      this.crc_model.visible = false
+      this.crc_model.visible = false;
       if (isReresh) {
-        this.listQuery = getListQueryDefault()
-        this.getList()
-        this.getTrialSiteCRCList()
+        this.listQuery = getListQueryDefault();
+        this.getList();
+        this.getTrialSiteCRCList();
       }
     },
     // 关闭添加site模态框
     closeSiteDialog() {
-      this.site_model.visible = false
-      this.listQuery = getListQueryDefault()
-      this.getList()
-    }
-  }
-}
+      this.site_model.visible = false;
+      this.listQuery = getListQueryDefault();
+      this.getList();
+    },
+  },
+};
 </script>
 <style lang="scss">
-.assign-site{
-  .filter-box{
+.assign-site {
+  .filter-box {
     display: flex;
     padding: 5px;
-    .base-search-form{
-      .el-form-item{
+    .base-search-form {
+      .el-form-item {
         margin-bottom: 0px;
       }
     }
-    .mr{
+    .mr {
       margin-right: 5px;
-        width: 120px;
+      width: 120px;
     }
   }
-  .el-dialog__header{
-    padding:10px;
+  .el-dialog__header {
+    padding: 10px;
   }
-  .el-dialog__body{
-    padding:10px;
+  .el-dialog__body {
+    padding: 10px;
   }
 }
 </style>