自定义报告单选显示问题修改

src/views/trials/trials-panel/reading/dicoms3D/components/customize/ReportPage.vue

@@ -4,56 +4,33 @@
       <div slot="header" class="clearfix report-header">
         <h3 style="margin:0;padding:0;">{{ $t('trials:readingReport:title:eicrf') }}</h3>
         <div style="margin-left:auto">
-          <el-button
-            v-if="readingTaskState<2"
-            type="primary"
-            size="small"
-            @click="skipTask"
-          >
+          <el-button v-if="readingTaskState < 2" type="primary" size="small" @click="skipTask">
             <!-- 跳过 -->
             {{ $t('trials:readingReport:button:skip') }}
           </el-button>
-          <el-button v-if="readingTaskState<2" type="primary" size="small" @click="getReportInfo">{{ $t('trials:readingReport:button:refresh') }}</el-button>
-          <el-button v-if="readingTaskState<2" type="primary" size="small" @click="handleSave(true)">{{ $t('common:button:save') }}</el-button>
-          <el-button v-if="readingTaskState<2" type="primary" size="small" @click="handleConfirm">{{ $t('common:button:submit') }}</el-button>
+          <el-button v-if="readingTaskState < 2" type="primary" size="small" @click="getReportInfo">{{
+            $t('trials:readingReport:button:refresh') }}</el-button>
+          <el-button v-if="readingTaskState < 2" type="primary" size="small" @click="handleSave(true)">{{
+            $t('common:button:save') }}</el-button>
+          <el-button v-if="readingTaskState < 2" type="primary" size="small" @click="handleConfirm">{{
+            $t('common:button:submit') }}</el-button>
         </div>
       </div>
       <div style="flex: 1">
-        <el-table
-          v-if="taskQuestions.length > 0"
-          ref="reportList"
-          v-adaptive="{bottomOffset:0}"
-          :data="taskQuestions"
-          row-key="Id"
-          border
-          default-expand-all
-          height="100"
-          :tree-props="{children: 'Childrens', hasChildren: 'hasChildren'}"
-          size="mini"
-        >
-          <el-table-column
-            prop=""
-            label=""
-            show-overflow-tooltip
-            width="350px"
-          >
+        <el-table v-if="taskQuestions.length > 0" ref="reportList" v-adaptive="{ bottomOffset: 0 }"
+          :data="taskQuestions" row-key="Id" border default-expand-all height="100"
+          :tree-props="{ children: 'Childrens', hasChildren: 'hasChildren' }" size="mini">
+          <el-table-column prop="" label="" show-overflow-tooltip width="350px">
             <template slot-scope="scope">
-              <span v-if="scope.row.QuestionName">{{ scope.row.BlindName ? scope.row.QuestionName : scope.row.QuestionName }}</span>
-              <span
-                v-else
-                style="font-weight: bold;font-size: 16px;color: #f44336;"
-              >
+              <span v-if="scope.row.QuestionName">{{ scope.row.BlindName ? scope.row.QuestionName :
+                scope.row.QuestionName }}</span>
+              <span v-else style="font-weight: bold;font-size: 16px;color: #f44336;">
                 {{ scope.row.GroupName }}
               </span>
             </template>
           </el-table-column>
-          <el-table-column
-            v-for="task in visitTaskList"
-            :key="task.VisitTaskId"
-            prop="date"
-            show-overflow-tooltip
-            width="200px"
-          >
+          <el-table-column v-for="task in visitTaskList" :key="task.VisitTaskId" prop="date" show-overflow-tooltip
+            width="200px">
             <template slot="header">
               <div v-if="task.IsCurrentTask">
                 {{ task.BlindName }}
@@ -68,110 +45,115 @@
               </div>
             </template>
             <template slot-scope="scope">
-              <template v-if="readingTaskState<2 && task.VisitTaskId === visitTaskId && (scope.row.Type==='input' || scope.row.Type==='number' || scope.row.Type==='select' || scope.row.Type==='textarea' || scope.row.Type==='radio')">
+              <template
+                v-if="readingTaskState < 2 && task.VisitTaskId === visitTaskId && (scope.row.Type === 'input' || scope.row.Type === 'number' || scope.row.Type === 'select' || scope.row.Type === 'textarea' || scope.row.Type === 'radio')">
                 <!-- 输入框 -->
                 <div>
-                  <template v-if="!((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)" />
+                  <template
+                    v-if="!((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)" />
                   <el-input
-                    v-else-if="questionForm[scope.row.QuestionId] instanceof Array && (scope.row.Type==='input' || scope.row.Type==='textarea') && !scope.row.IsShowInDicom && ((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)"
+                    v-else-if="questionForm[scope.row.QuestionId] instanceof Array && (scope.row.Type === 'input' || scope.row.Type === 'textarea') && !scope.row.IsShowInDicom && ((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)"
                     v-model="questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]"
-                    size="mini"
-                  />
-                  <span v-else-if="questionForm[scope.row.QuestionId] instanceof Array && (scope.row.Type==='input' || scope.row.Type==='textarea')">
+                    size="mini" />
+                  <span
+                    v-else-if="questionForm[scope.row.QuestionId] instanceof Array && (scope.row.Type === 'input' || scope.row.Type === 'textarea')">
                     {{ questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId] }}
                   </span>
                   <el-input
-                    v-else-if="(scope.row.Type==='input' || scope.row.Type==='textarea') && !scope.row.IsShowInDicom && ((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)"
-                    v-model="questionForm[scope.row.QuestionId]"
-                    size="mini"
-                  />
-                  <span v-else-if="scope.row.Type==='input' || scope.row.Type==='textarea'">
+                    v-else-if="(scope.row.Type === 'input' || scope.row.Type === 'textarea') && !scope.row.IsShowInDicom && ((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)"
+                    v-model="questionForm[scope.row.QuestionId]" size="mini" />
+                  <span v-else-if="scope.row.Type === 'input' || scope.row.Type === 'textarea'">
                     {{ questionForm[scope.row.QuestionId] }}
                   </span>
                   <el-select
-                    v-else-if="questionForm[scope.row.QuestionId] instanceof Array && (scope.row.Type==='select' || scope.row.Type==='radio') && !scope.row.IsShowInDicom && ((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)"
+                    v-else-if="questionForm[scope.row.QuestionId] instanceof Array && (scope.row.Type === 'select' || scope.row.Type === 'radio') && !scope.row.IsShowInDicom && ((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)"
                     v-model="questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]"
-                    size="mini"
-                    clearable
-                  >
+                    size="mini" clearable>
                     <template>
-                      <el-option
-                        v-for="val in scope.row.TypeValue.split('|')"
-                        :key="val"
-                        :label="val"
-                        :value="val"
-                      />
+                      <el-option v-for="val in scope.row.TypeValue.split('|')" :key="val" :label="val" :value="val" />
                     </template>
                   </el-select>
-                  <span v-else-if="questionForm[scope.row.QuestionId] instanceof Array && scope.row.Type==='select'">
+                  <span
+                    v-else-if="questionForm[scope.row.QuestionId] instanceof Array && (scope.row.Type === 'select' || scope.row.Type === 'radio')">
                     {{ questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId] }}
                   </span>
                   <el-select
-                    v-else-if="(scope.row.Type==='select' || scope.row.Type==='radio') && !scope.row.IsShowInDicom && ((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)"
-                    v-model="questionForm[scope.row.QuestionId]"
-                    size="mini"
-                    clearable
-                  >
+                    v-else-if="(scope.row.Type === 'select' || scope.row.Type === 'radio') && !scope.row.IsShowInDicom && ((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)"
+                    v-model="questionForm[scope.row.QuestionId]" size="mini" clearable>
                     <template>
-                      <el-option
-                        v-for="val in scope.row.TypeValue.split('|')"
-                        :key="val"
-                        :label="val"
-                        :value="val"
-                      />
+                      <el-option v-for="val in scope.row.TypeValue.split('|')" :key="val" :label="val" :value="val" />
                     </template>
                   </el-select>
-                  <span v-else-if="scope.row.Type==='select' || scope.row.Type==='radio'">
+                  <span v-else-if="scope.row.Type === 'select' || scope.row.Type === 'radio'">
                     {{ questionForm[scope.row.QuestionId] }}
                   </span>
                   <el-input
-                    v-else-if="scope.row.DataSource !== 1 && questionForm[scope.row.QuestionId] instanceof Array && scope.row.Type==='number' && (scope.row.xfIndex || scope.row.xfIndex === 0) && !scope.row.IsShowInDicom && ((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)"
+                    v-else-if="scope.row.DataSource !== 1 && questionForm[scope.row.QuestionId] instanceof Array && scope.row.Type === 'number' && (scope.row.xfIndex || scope.row.xfIndex === 0) && !scope.row.IsShowInDicom && ((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)"
                     v-model="questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]"
-                    :disabled="scope.row.DataSource === 1"
-                    size="mini"
+                    :disabled="scope.row.DataSource === 1" size="mini"
                     @blur="limitBlur(questionForm[scope.row.QuestionId][scope.row.xfIndex], scope.row.TableQuestionId, scope.row.ValueType)"
-                    @focus="() => {questionId = scope.row.QuestionId}"
-                  >
-                    <template v-if="scope.row.Unit !== 0" slot="append">{{ scope.row.Unit !== 4 ? $fd('ValueUnit', scope.row.Unit) : scope.row.CustomUnit }}</template>
+                    @focus="() => { questionId = scope.row.QuestionId }">
+                    <template v-if="scope.row.Unit !== 0" slot="append">{{ scope.row.Unit !== 4 ? $fd('ValueUnit',
+                      scope.row.Unit) : scope.row.CustomUnit }}</template>
                     <template v-else-if="scope.row.ValueType === 2" slot="append">%</template>
                   </el-input>
-                  <span v-else-if="questionForm[scope.row.QuestionId] instanceof Array && scope.row.Type==='number' && (scope.row.xfIndex || scope.row.xfIndex === 0)">
+                  <span
+                    v-else-if="questionForm[scope.row.QuestionId] instanceof Array && scope.row.Type === 'number' && (scope.row.xfIndex || scope.row.xfIndex === 0)">
                     <template v-if="(scope.row.ValueType === 0 || scope.row.ValueType === 1) && scope.row.Unit">
-                      {{ isNaN(parseInt(questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]))? questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]:`${questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]} ${scope.row.Unit !== 4 ? $fd('ValueUnit',scope.row.Unit) : scope.row.CustomUnit}` }}
+                      {{
+                        isNaN(parseInt(questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]))
+                          ?
+                          questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId] :
+                          `${questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]}
+                      ${scope.row.Unit !== 4 ? $fd('ValueUnit', scope.row.Unit) : scope.row.CustomUnit}` }}
                     </template>
                     <template v-else-if="scope.row.ValueType === 2">
-                      {{ isNaN(parseInt(questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId])) ? questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]:`${questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]} %` }}
+                      {{
+                        isNaN(parseInt(questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]))
+                          ?
+                          questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId] :
+                          `${questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]}
+                      %` }}
                     </template>
                     <template v-else>
-                      {{ isNaN(parseInt(questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId])) ? questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]:`${questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]}` }}
+                      {{
+                        isNaN(parseInt(questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]))
+                          ?
+                          questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId] :
+                          `${questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]}`
+                      }}
                     </template>
                   </span>
                   <el-input
-                    v-else-if="scope.row.DataSource !== 1 && scope.row.Type==='number' && !scope.row.IsShowInDicom && ((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)"
-                    v-model="questionForm[scope.row.QuestionId]"
-                    :disabled="scope.row.DataSource === 1"
-                    size="mini"
+                    v-else-if="scope.row.DataSource !== 1 && scope.row.Type === 'number' && !scope.row.IsShowInDicom && ((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)"
+                    v-model="questionForm[scope.row.QuestionId]" :disabled="scope.row.DataSource === 1" size="mini"
                     @blur="limitBlur(questionForm, scope.row.QuestionId, scope.row.ValueType)"
-                    @focus="() => {questionId = scope.row.QuestionId}"
-                  >
-                    <template v-if="scope.row.Unit !== 0" slot="append">{{ scope.row.Unit !== 4 ? $fd('ValueUnit', scope.row.Unit) : scope.row.CustomUnit }}</template>
+                    @focus="() => { questionId = scope.row.QuestionId }">
+                    <template v-if="scope.row.Unit !== 0" slot="append">{{ scope.row.Unit !== 4 ? $fd('ValueUnit',
+                      scope.row.Unit) : scope.row.CustomUnit }}</template>
                     <template v-else-if="scope.row.ValueType === 2" slot="append">%</template>
                   </el-input>
-                  <span v-else-if="scope.row.Type==='number'">
+                  <span v-else-if="scope.row.Type === 'number'">
                     <template v-if="(scope.row.ValueType === 0 || scope.row.ValueType === 1) && scope.row.Unit">
-                      {{ isNaN(parseInt(questionForm[scope.row.QuestionId]))? questionForm[scope.row.QuestionId]:`${questionForm[scope.row.QuestionId]} ${scope.row.Unit !== 4 ? $fd('ValueUnit',scope.row.Unit) : scope.row.CustomUnit}` }}
+                      {{ isNaN(parseInt(questionForm[scope.row.QuestionId])) ?
+                        questionForm[scope.row.QuestionId] : `${questionForm[scope.row.QuestionId]} ${scope.row.Unit !== 4
+                          ?
+                          $fd('ValueUnit', scope.row.Unit) : scope.row.CustomUnit}` }}
                     </template>
                     <template v-else-if="scope.row.ValueType === 2">
-                      {{ isNaN(parseInt(questionForm[scope.row.QuestionId])) ? questionForm[scope.row.QuestionId]:`${questionForm[scope.row.QuestionId]} %` }}
+                      {{ isNaN(parseInt(questionForm[scope.row.QuestionId])) ?
+                        questionForm[scope.row.QuestionId] : `${questionForm[scope.row.QuestionId]} %` }}
                     </template>
                     <template v-else>
-                      {{ isNaN(parseInt(questionForm[scope.row.QuestionId])) ? questionForm[scope.row.QuestionId] : questionForm[scope.row.QuestionId] }}
+                      {{ isNaN(parseInt(questionForm[scope.row.QuestionId])) ? questionForm[scope.row.QuestionId] :
+                        questionForm[scope.row.QuestionId] }}
                     </template>
                   </span>
                 </div>
               </template>
-              <template v-else-if="scope.row.Type==='upload' && scope.row.Answers[task.VisitTaskId]">
-                <span v-for="(url,index) in scope.row.Answers[task.VisitTaskId].split('|')" :key="url" style="margin-left: 5px;">
+              <template v-else-if="scope.row.Type === 'upload' && scope.row.Answers[task.VisitTaskId]">
+                <span v-for="(url, index) in scope.row.Answers[task.VisitTaskId].split('|')" :key="url"
+                  style="margin-left: 5px;">
                   <el-button v-if="scope.row.Answers[task.VisitTaskId]" type="text" @click="preview(url)">
                     {{ `${$t('trials:noneDicom:title:attachment')}${index + 1}` }}
                   </el-button>
@@ -181,14 +163,22 @@
                 {{ $fd(scope.row.DictionaryCode, scope.row.Answers[task.VisitTaskId]) }}
               </template>
               <template v-else-if="criterionType === 10">
-                {{ isNaN(parseInt(scope.row.Answers[task.VisitTaskId]))?scope.row.Answers[task.VisitTaskId]:`${scope.row.Answers[task.VisitTaskId]}` }}
+                {{
+                  isNaN(parseInt(scope.row.Answers[task.VisitTaskId])) ? scope.row.Answers[task.VisitTaskId] :
+                    `${scope.row.Answers[task.VisitTaskId]}`
+                }}
               </template>
-              <template v-else-if="!((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)" />
+              <template
+                v-else-if="!((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)" />
               <template v-else-if="(scope.row.ValueType === 0 || scope.row.ValueType === 1) && scope.row.Unit">
-                {{ isNaN(parseInt(scope.row.Answers[task.VisitTaskId]))?scope.row.Answers[task.VisitTaskId]:`${scope.row.Answers[task.VisitTaskId]} ${scope.row.Unit !== 4 ? $fd('ValueUnit',scope.row.Unit) : scope.row.CustomUnit}` }}
+                {{
+                  isNaN(parseInt(scope.row.Answers[task.VisitTaskId])) ? scope.row.Answers[task.VisitTaskId] :
+                    `${scope.row.Answers[task.VisitTaskId]}
+                ${scope.row.Unit !== 4 ? $fd('ValueUnit', scope.row.Unit) : scope.row.CustomUnit}` }}
               </template>
               <template v-else-if="scope.row.ValueType === 2">
-                {{ isNaN(parseInt(scope.row.Answers[task.VisitTaskId])) ? scope.row.Answers[task.VisitTaskId]:`${scope.row.Answers[task.VisitTaskId]} %` }}
+                {{ isNaN(parseInt(scope.row.Answers[task.VisitTaskId])) ?
+                  scope.row.Answers[task.VisitTaskId] : `${scope.row.Answers[task.VisitTaskId]} %` }}
               </template>
               <template v-else-if="scope.row.Answers && scope.row.Answers.hasOwnProperty(task.VisitTaskId)">
                 {{ scope.row.Answers[task.VisitTaskId] }}
@@ -200,38 +190,20 @@
     </el-card>
 
     <!-- 签名框 -->
-    <el-dialog
-      v-if="signVisible"
-      :visible.sync="signVisible"
-      :close-on-click-modal="false"
-      width="600px"
-      custom-class="base-dialog-wrapper"
-    >
+    <el-dialog v-if="signVisible" :visible.sync="signVisible" :close-on-click-modal="false" width="600px"
+      custom-class="base-dialog-wrapper">
       <div slot="title">
         <span style="font-size:18px;">{{ $t('common:dialogTitle:sign') }}</span>
-        <span style="font-size:12px;margin-left:5px">{{ `(${$t('common:label:sign')}${ currentUser })` }}</span>
+        <span style="font-size:12px;margin-left:5px">{{ `(${$t('common:label:sign')}${currentUser})` }}</span>
       </div>
       <SignForm ref="signForm" :sign-code-enum="signCode" @closeDialog="closeSignDialog" />
     </el-dialog>
 
     <!-- 预览文件 -->
-    <el-dialog
-      v-if="previewVisible"
-      :visible.sync="previewVisible"
-      :title="$t('common:button:preview')"
-      :fullscreen="true"
-      append-to-body
-      custom-class="base-dialog-wrapper"
-    >
-      <div
-        class="base-modal-body"
-        style="border: 2px solid #ccc; padding: 10px"
-      >
-        <PreviewFile
-          v-if="previewVisible"
-          :file-path="currentPath"
-          :file-type="currentType"
-        />
+    <el-dialog v-if="previewVisible" :visible.sync="previewVisible" :title="$t('common:button:preview')"
+      :fullscreen="true" append-to-body custom-class="base-dialog-wrapper">
+      <div class="base-modal-body" style="border: 2px solid #ccc; padding: 10px">
+        <PreviewFile v-if="previewVisible" :file-path="currentPath" :file-type="currentType" />
       </div>
     </el-dialog>
   </div>
@@ -655,7 +627,7 @@ export default {
                 window.location.reload()
               })
               .catch(action => {
-              // changeURLStatic('visitTaskId', this.visitTaskId)
+                // changeURLStatic('visitTaskId', this.visitTaskId)
               })
           }
         }
@@ -760,94 +732,116 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.report-wrapper{
+.report-wrapper {
 
   height: 100%;
   // background-color: #fff;
   background-color: #000;
+
   ::-webkit-scrollbar {
     width: 7px;
     height: 7px;
   }
+
   ::-webkit-scrollbar-thumb {
     border-radius: 10px;
     // background: #d0d0d0;
   }
-  .report-header{
+
+  .report-header {
     display: flex;
   }
-  .el-card{
+
+  .el-card {
     background-color: #000;
     color: #ffffff;
-    border:none;
-  }
-  ::v-deep .el-table--border th.gutter:last-of-type{
     border: none;
   }
-  ::v-deep .el-table, .el-table__expanded-cell {
-    background-color: #000;
-    color: #fff;
-    border-color:#444444;
-  }
 
-  ::v-deep .el-table th, .el-table tr {
-    background-color: #000;
-    color: #fff;
-    border-color:#444444;
-  }
-  ::v-deep .el-table__body tr > td{
-    background-color:#000 !important;
-    color: #fff;
-    border-color:#444444;
-  }
-  ::v-deep .el-table__body tr:hover > td{
-    background-color:#858282 !important;
-    color: #fff;
-    border-color:#444444;
-  }
-  ::v-deep .el-table--border th.gutter:last-of-type{
+  ::v-deep .el-table--border th.gutter:last-of-type {
     border: none;
   }
-  ::v-deep .el-card__header{
+
+  ::v-deep .el-table,
+  .el-table__expanded-cell {
+    background-color: #000;
+    color: #fff;
+    border-color: #444444;
+  }
+
+  ::v-deep .el-table th,
+  .el-table tr {
+    background-color: #000;
+    color: #fff;
+    border-color: #444444;
+  }
+
+  ::v-deep .el-table__body tr>td {
+    background-color: #000 !important;
+    color: #fff;
+    border-color: #444444;
+  }
+
+  ::v-deep .el-table__body tr:hover>td {
+    background-color: #858282 !important;
+    color: #fff;
+    border-color: #444444;
+  }
+
+  ::v-deep .el-table--border th.gutter:last-of-type {
+    border: none;
+  }
+
+  ::v-deep .el-card__header {
     border: none;
     padding: 10px;
   }
-  ::v-deep .el-upload-list--picture-card .el-upload-list__item{
+
+  ::v-deep .el-upload-list--picture-card .el-upload-list__item {
     width: 30px;
     height: 30px;
   }
-  ::v-deep .el-upload--picture-card{
+
+  ::v-deep .el-upload--picture-card {
     width: 30px;
     height: 30px;
     line-height: 40px;
   }
-  ::v-deep .el-dialog{
+
+  ::v-deep .el-dialog {
     background: #1e1e1e;
     border: 1px solid #ddd;
     color: #ddd;
-    .el-dialog__title{
-      color:#fff;
+
+    .el-dialog__title {
+      color: #fff;
     }
-    .el-input .el-input__inner{
+
+    .el-input .el-input__inner {
       background-color: transparent;
       color: #ddd;
       border: 1px solid #5e5e5e;
     }
-    .el-input.is-disabled .el-input__inner{
+
+    .el-input.is-disabled .el-input__inner {
       background-color: #646464a1;
     }
-    .el-form-item__label{
+
+    .el-form-item__label {
       color: #dfdfdf
     }
   }
 }
-::v-deep .el-switch__label{
-  color:#fff;
+
+::v-deep .el-switch__label {
+  color: #fff;
 }
-::v-deep .el-switch__label.is-active{
+
+::v-deep .el-switch__label.is-active {
   color: #428bca;
 }
-.uploadWrapper{
+
+.uploadWrapper {
   display: flex;
   flex-direction: column;
   align-items: flex-start;