页面优化

src/views/trials/trials-panel/subject/subject-list/components/patient-list.vue

@@ -4,184 +4,91 @@
       <div class="filter-container">
         <!-- 患者ID/患者姓名 -->
         <span>{{ $t("trials:uploadDicomList:table:pId") }}:</span>
-        <el-input
+        <el-input v-model="searchData.PatientIdStr" size="mini" class="mr" clearable />
-          v-model="searchData.PatientIdStr"
-          size="mini"
-          class="mr"
-          clearable
-        />
         <span>{{ $t("trials:uploadDicomList:table:patientName") }}:</span>
-        <el-input
+        <el-input v-model="searchData.PatientName" size="mini" class="mr" clearable />
-          v-model="searchData.PatientName"
-          size="mini"
-          class="mr"
-          clearable
-        />
         <!-- Called AE -->
         <span>{{ $t("trials:subject:table:CalledAE") }}</span>
-        <el-select
+        <el-select v-model="searchData.CalledAEList" clearable multiple class="mr">
-          v-model="searchData.CalledAEList"
+          <el-option v-for="(item, index) of calledAeList" :key="index" :label="item" :value="item">
-          clearable
-          multiple
-          class="mr"
-        >
-          <el-option
-            v-for="(item, index) of calledAeList"
-            :key="index"
-            :label="item"
-            :value="item"
-          >
           </el-option>
         </el-select>
         <!-- Calling AE -->
         <span>{{ $t("trials:subject:table:CallingAE") }}</span>
         <el-select v-model="searchData.callingAE" clearable class="mr">
-          <el-option
+          <el-option v-for="(item, index) of callingAeList" :key="index" :label="item" :value="item">
-            v-for="(item, index) of callingAeList"
-            :key="index"
-            :label="item"
-            :value="item"
-          >
           </el-option>
         </el-select>
         <!-- 查询 -->
-        <el-button
+        <el-button type="primary" size="mini" icon="el-icon-search" @click="handleSearch">
-          type="primary"
-          size="mini"
-          icon="el-icon-search"
-          @click="handleSearch"
-        >
           {{ $t("common:button:search") }}
         </el-button>
         <!-- 重置 -->
-        <el-button
+        <el-button size="mini" type="primary" icon="el-icon-refresh-left" @click="handleReset">
-          size="mini"
-          type="primary"
-          icon="el-icon-refresh-left"
-          @click="handleReset"
-        >
           {{ $t("common:button:reset") }}
         </el-button>
 
-        <el-button
+        <el-button type="primary" size="mini" style="margin-left: auto" :disabled="tableSelectData.length === 0"
-          type="primary"
+          :loading="btnLoading" icon="el-icon-plus" @click="handleAssign">
-          size="mini"
-          style="margin-left: auto"
-          :disabled="tableSelectData.length === 0"
-          :loading="btnLoading"
-          icon="el-icon-plus"
-          @click="handleAssign"
-        >
           {{ $t("common:button:add") }}
         </el-button>
       </div>
     </el-header>
     <el-main>
       <div class="data-table">
-        <el-table
+        <el-table ref="subjectPatientList" v-loading="loading" :data="list" stripe height="400"
-          ref="subjectPatientList"
+          @selection-change="handleSelectChange" @sort-change="handleSortByColumn"
-          v-loading="loading"
+          :default-sort="{ prop: 'LatestPushTime', order: 'descending' }">
-          :data="list"
-          stripe
-          height="400"
-          @selection-change="handleSelectChange"
-          @sort-change="handleSortByColumn"
-          :default-sort="{ prop: 'LatestPushTime', order: 'descending' }"
-        >
           <el-table-column type="selection" align="center" width="45" />
           <el-table-column type="index" width="40" />
           <!--患者ID-->
-          <el-table-column
+          <el-table-column prop="PatientIdStr" :label="$t('trials:uploadDicomList:table:pId')" show-overflow-tooltip
-            prop="PatientIdStr"
+            min-width="140" sortable="custom"></el-table-column>
-            :label="$t('trials:uploadDicomList:table:pId')"
-            show-overflow-tooltip
-            min-width="140"
-            sortable="custom"
-          ></el-table-column>
           <!--患者姓名-->
-          <el-table-column
+          <el-table-column prop="PatientName" :label="$t('trials:uploadDicomList:table:patientName')"
-            prop="PatientName"
+            show-overflow-tooltip min-width="140" sortable="custom"></el-table-column>
-            :label="$t('trials:uploadDicomList:table:patientName')"
-            show-overflow-tooltip
-            min-width="140"
-            sortable="custom"
-          ></el-table-column>
           <!--出生日期-->
-          <el-table-column
+          <el-table-column prop="PatientBirthDate" :label="$t('trials:inspection:table:birthdate')"
-            prop="PatientBirthDate"
+            show-overflow-tooltip min-width="140" sortable="custom"></el-table-column>
-            :label="$t('trials:inspection:table:birthdate')"
-            show-overflow-tooltip
-            min-width="140"
-            sortable="custom"
-          ></el-table-column>
           <!--性别-->
-          <el-table-column
+          <el-table-column prop="PatientSex" :label="$t('trials:trials-myinfo:form:gender')" show-overflow-tooltip
-            prop="PatientSex"
+            min-width="140" sortable="custom">
-            :label="$t('trials:trials-myinfo:form:gender')"
-            show-overflow-tooltip
-            min-width="140"
-            sortable="custom"
-          >
             <template slot-scope="scope">
               <span>{{ $fd("Sex", scope.row.PatientSex) }}</span>
             </template>
           </el-table-column>
           <!--Called AE-->
-          <el-table-column
+          <el-table-column prop="CalledAEList" label="Called AE" show-overflow-tooltip min-width="140">
-            prop="CalledAEList"
-            label="Called AE"
-            show-overflow-tooltip
-            min-width="140"
-          >
             <template slot-scope="scope">
-              <span
+              <span v-for="(item, index) in scope.row.CalledAEList" :key="`CalledAEList${index}`">{{
-                v-for="(item, index) in scope.row.CalledAEList"
+                index === scope.row.CalledAEList.length - 1
-                :key="`CalledAEList${index}`"
+                  ? item
-                >{{
+                  : `${item}, `
-                  index === scope.row.CalledAEList.length - 1
+              }}</span>
-                    ? item
-                    : `${item}, `
-                }}</span
-              >
             </template>
           </el-table-column>
           <!--Calling AE-->
-          <el-table-column
+          <el-table-column prop="CallingAEList" label="Calling AE" show-overflow-tooltip min-width="140">
-            prop="CallingAEList"
-            label="Calling AE"
-            show-overflow-tooltip
-            min-width="140"
-          >
             <template slot-scope="scope">
-              <span
+              <span v-for="(item, index) in scope.row.CallingAEList" :key="`CallingAEList${index}`">{{
-                v-for="(item, index) in scope.row.CallingAEList"
+                index === scope.row.CallingAEList.length - 1
-                :key="`CallingAEList${index}`"
+                  ? item
-                >{{
+                  : `${item}, `
-                  index === scope.row.CallingAEList.length - 1
+              }}</span>
-                    ? item
-                    : `${item}, `
-                }}</span
-              >
             </template>
           </el-table-column>
+          <!--检查数量-->
+          <el-table-column prop="SCPStudyCount" :label="$t('trials:inspection:table:SCPStudyCount')"
+            show-overflow-tooltip min-width="140" sortable="custom"></el-table-column>
           <!--最新接收时间-->
-          <el-table-column
+          <el-table-column prop="LatestPushTime" :label="$t('trials:inspection:table:latestReceiveTime')"
-            prop="LatestPushTime"
+            show-overflow-tooltip min-width="140" sortable="custom"></el-table-column>
-            :label="$t('trials:inspection:table:latestReceiveTime')"
-            show-overflow-tooltip
-            min-width="140"
-            sortable="custom"
-          ></el-table-column>
         </el-table>
       </div>
     </el-main>
     <div class="pagination" style="text-align: right; margin-top: 5px">
-      <pagination
+      <pagination :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize"
-        :total="total"
+        @pagination="getList" />
-        :page.sync="searchData.PageIndex"
-        :limit.sync="searchData.PageSize"
-        @pagination="getList"
-      />
     </div>
   </el-container>
 </template>
@@ -322,23 +229,28 @@ export default {
 <style lang="scss" scoped>
 .participant-container {
   height: 100%;
+
   .el-header {
     .filter-container {
       display: flex;
       align-items: center;
+
       span {
         font-size: 13px;
         margin-right: 5px;
       }
+
       .mr {
         margin-right: 5px;
         width: 120px;
       }
     }
   }
+
   .el-main {
     padding: 0px;
   }
+
   .el-footer {
     padding: 0 20px;
   }