src/components/feedBack/index.vue

@@ -2,21 +2,36 @@
   <!--FEEDBACK-->
   <div v-if="visible" @click.stop="() => false" class="feedBack-box">
     <div class="feedBack-box-modal"></div>
-    <el-dialog :visible.sync="visible" v-dialogDrag width="800px" :close-on-click-modal="false" @close="cancel"
+    <el-dialog
-      :modal="false">
+      :visible.sync="visible"
+      v-dialogDrag
+      width="800px"
+      :close-on-click-modal="false"
+      @close="cancel"
+      :modal="false"
+    >
       <div slot="title">
         {{ title }}
       </div>
       <!-- 项目详情 -->
       <div class="trialsBox" v-if="visitTaskId || SubjectVisitId">
-        <el-form label-position="right" :model="form" :inline="true" class="trialsForm" v-if="type === 'detail'">
+        <el-form
+          label-position="right"
+          :model="form"
+          :inline="true"
+          class="trialsForm"
+          v-if="type === 'detail'"
+        >
           <el-form-item :label="$t('feedBack:trials:code')" style="width: 40%">
             <span>{{ form.TrialCode }}</span>
           </el-form-item>
           <el-form-item :label="$t('feedBack:trials:name')" style="width: 40%">
             <span>{{ form.ExperimentName }}</span>
           </el-form-item>
-          <el-form-item :label="$t('feedBack:trials:siteCode')" style="width: 40%">
+          <el-form-item
+            :label="$t('feedBack:trials:siteCode')"
+            style="width: 40%"
+          >
             <span>{{ form.TrialSiteCode }}</span>
           </el-form-item>
           <el-form-item :label="$t('feedBack:trials:visit')" style="width: 40%">
@@ -24,21 +39,47 @@
           </el-form-item>
         </el-form>
       </div>
-      <el-form ref="feedBackForm" label-position="right" :model="form" :rules="rules" label-width="100px">
+      <el-form
+        ref="feedBackForm"
+        label-position="right"
+        :model="form"
+        :rules="rules"
+        label-width="100px"
+      >
         <!-- 影像异常tip -->
         <p class="tip" v-if="type === 'imgfail'">
-          <i class="el-icon-warning-outline" style="color: #f56c6c; font-size: 24px"></i>
+          <i
+            class="el-icon-warning-outline"
+            style="color: #f56c6c; font-size: 24px"
+          ></i>
           <span>{{ $t('feedBack:imgfail:tip') }}</span>
         </p>
         <!-- 问题反馈 -->
-        <el-form-item :label="$t('feedBack:form:feedBack')" prop="QuestionType" v-if="type === 'feedback' && trialId">
+        <el-form-item
-          <el-select v-model="form.QuestionType" style="width: 100%" popper-class="feedBack-select-box">
+          :label="$t('feedBack:form:feedBack')"
-            <el-option v-for="item in QuestionTypeOptions" :key="item.id" :label="item.label" :value="item.value">
+          prop="QuestionType"
+          v-if="type === 'feedback' && trialId"
+        >
+          <el-select
+            v-model="form.QuestionType"
+            style="width: 100%"
+            popper-class="feedBack-select-box"
+          >
+            <el-option
+              v-for="item in QuestionTypeOptions"
+              :key="item.id"
+              :label="item.label"
+              :value="item.value"
+            >
             </el-option>
           </el-select>
         </el-form-item>
         <!-- 问题反馈 -->
-        <el-form-item :label="$t('feedBack:form:feedBack')" prop="QuestionType" v-if="type === 'detail'">
+        <el-form-item
+          :label="$t('feedBack:form:feedBack')"
+          prop="QuestionType"
+          v-if="type === 'detail'"
+        >
           <span>{{
             QuestionTypeOptions.filter(
               (item) => item.value === form.QuestionType
@@ -46,22 +87,43 @@
           }}</span>
         </el-form-item>
         <!-- 问题描述 -->
-        <el-form-item :label="$t('feedBack:form:description')" prop="QuestionDescription">
+        <el-form-item
-          <el-input v-model="form.QuestionDescription" type="textarea" :rows="4" :maxlength="500"
+          :label="$t('feedBack:form:description')"
-            :disabled="type === 'detail'" />
+          prop="QuestionDescription"
+        >
+          <el-input
+            v-model="form.QuestionDescription"
+            type="textarea"
+            :rows="4"
+            :maxlength="500"
+            :disabled="type === 'detail'"
+          />
         </el-form-item>
         <!-- 截图 -->
         <el-form-item :label="$t('feedBack:form:screenshot')" prop="screenshot">
-          <uploadImage :path.sync="form.ScreenshotList" :isUpload.sync="loading" :trialId="trialId"
+          <uploadImage
-            :disabled="type === 'detail'" ref="uploadImage" />
+            :path.sync="form.ScreenshotList"
+            :isUpload.sync="loading"
+            :trialId="trialId"
+            :disabled="type === 'detail'"
+            ref="uploadImage"
+          />
         </el-form-item>
         <!-- 反馈时间 -->
-        <el-form-item :label="$t('feedBack:form:time')" prop="screenshot" v-if="type === 'detail'">
+        <el-form-item
+          :label="$t('feedBack:form:time')"
+          prop="screenshot"
+          v-if="type === 'detail'"
+        >
           <span>{{ form.CreateTime }}</span>
         </el-form-item>
         <!-- 状态 -->
-        <el-form-item :label="$t('feedBack:form:status')" prop="screenshot" v-if="type === 'detail' && level >= 7">
+        <el-form-item
-          <!-- <el-switch
+          :label="$t('feedBack:form:status')"
+          prop="screenshot"
+          v-if="type === 'detail' && level > 7"
+        >
+          <el-switch
             v-model="form.State"
             active-color="#13ce66"
             inactive-color="#ff4949"
@@ -72,26 +134,21 @@
             :disabled="level < 8 || !isStateChange"
             @change="changeState"
           >
-          </el-switch> -->
+          </el-switch>
-          <el-select v-model="form.State" :popper-append-to-body="false" :disabled="level < 8">
-            <el-option v-for="item in $d.FeedBackStatus" :key="item.id" :label="item.label"
-              :value="item.value"></el-option>
-          </el-select>
-        </el-form-item>
-        <!-- 无法解决原因 -->
-        <el-form-item :label="$t('feedBack:form:Reason')" prop="Reason"
-          v-if="type === 'detail' && level >= 7 && form.State === 2">
-          <el-input v-model="form.Reason" type="textarea" :rows="4" :maxlength="500" :disabled="level < 8" />
         </el-form-item>
       </el-form>
-      <!--type !== 'detail'-->
+      <div slot="footer" v-if="type !== 'detail' || isImgfail">
-      <div slot="footer" v-if="level >= 8 || isImgfail">
         <!-- 取消 -->
         <el-button size="small" @click.stop="cancel">
           {{ $t('feedBack:button:cancel') }}
         </el-button>
         <!-- 保存 -->
-        <el-button type="primary" size="small" @click.stop="save" :loading="loading">
+        <el-button
+          type="primary"
+          size="small"
+          @click.stop="save"
+          :loading="loading"
+        >
           {{ $t('feedBack:button:save') }}
         </el-button>
       </div>
@@ -133,7 +190,6 @@ export default {
         SubjectVisitId: null,
         ScreenshotList: [],
         ScreenshotListStr: null,
-        Reason: null
       },
       rules: {
         QuestionType: [
@@ -251,7 +307,6 @@ export default {
     // 修改状态
     async changeState() {
       if (this.isImgfail) return
-      if (this.form.State !== 1 && this.form.State !== 0) return false
       try {
         let data = {
           IdList: [this.Id],
@@ -326,10 +381,6 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-::v-deep.el-popper {
-  z-index: 4000 !important;
-}
-
 .tip {
   width: 86%;
   margin: auto;
@@ -338,14 +389,12 @@ export default {
   padding: 0 10px;
   display: flex;
   align-items: center;
-
   // border-radius: 5px;
   // background-color: #eee;
   i {
     margin-right: 5px;
   }
 }
-
 .trialsBox {
   margin: auto;
   margin-bottom: 20px;
@@ -356,13 +405,11 @@ export default {
   border-radius: 5px;
   background-color: #eee;
 }
-
 .trialsForm {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
-
   .el-form-item {
     margin-bottom: 10px;
   }

src/styles/index.scss

@@ -239,15 +239,21 @@ body .el-table th.gutter {
   line-height: 1.5;
 }
 
-.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell.is-left {
+.el-descriptions__body
+  .el-descriptions__table
+  .el-descriptions-item__cell.is-left {
   text-align: left;
 }
 
-.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell.is-center {
+.el-descriptions__body
+  .el-descriptions__table
+  .el-descriptions-item__cell.is-center {
   text-align: center;
 }
 
-.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell.is-right {
+.el-descriptions__body
+  .el-descriptions__table
+  .el-descriptions-item__cell.is-right {
   text-align: right;
 }
 
@@ -339,10 +345,6 @@ body .el-table th.gutter {
   .el-dialog__wrapper {
     z-index: 3999 !important;
   }
-
-  .el-popper {
-    z-index: 4000 !important;
-  }
 }
 
 .feedBack-select-box {
@@ -376,4 +378,4 @@ body .el-table th.gutter {
   height: 20px !important;
   vertical-align: -0.4em !important;
   cursor: pointer;
-}
+}

src/views/feedBack/index.vue

@@ -4,57 +4,122 @@
       <el-form :inline="true">
         <!--项目编号/实验名称-->
         <el-form-item :label="$t('feedBack:search:trials')" v-if="level > 8">
-          <el-input v-model="searchData.TrialKeyInfo" clearable style="width: 150px"></el-input>
+          <el-input
+            v-model="searchData.TrialKeyInfo"
+            clearable
+            style="width: 150px"
+          ></el-input>
         </el-form-item>
         <!--中心-->
         <el-form-item :label="$t('feedBack:search:site')" v-if="level > 7">
-          <el-input v-model="searchData.TrialSiteCode" clearable style="width: 150px"></el-input>
+          <el-input
+            v-model="searchData.TrialSiteCode"
+            clearable
+            style="width: 150px"
+          ></el-input>
         </el-form-item>
         <!--受试者访视-->
-        <el-form-item :label="$t('feedBack:search:subjectVisit')" v-if="level > 7">
+        <el-form-item
-          <el-input v-model="searchData.SubejctAndVisitKeyInfo" clearable style="width: 150px"></el-input>
+          :label="$t('feedBack:search:subjectVisit')"
+          v-if="level > 7"
+        >
+          <el-input
+            v-model="searchData.SubejctAndVisitKeyInfo"
+            clearable
+            style="width: 150px"
+          ></el-input>
         </el-form-item>
         <!--角色-->
         <el-form-item :label="$t('feedBack:search:role')" v-if="level > 7">
-          <el-select v-model="searchData.UserTypeEnum" clearable style="width: 150px"
+          <el-select
-            popper-class="feedBack-select-box">
+            v-model="searchData.UserTypeEnum"
-            <el-option v-for="item of UserTypeOptins" :key="item.value" :label="item.label" :value="item.value" />
+            clearable
+            style="width: 150px"
+            popper-class="feedBack-select-box"
+          >
+            <el-option
+              v-for="item of UserTypeOptins"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
           </el-select>
         </el-form-item>
         <!--反馈人-->
         <el-form-item :label="$t('feedBack:search:user')" v-if="level > 7">
-          <el-input v-model="searchData.FeedBackUserKeyInfo" clearable style="width: 150px"></el-input>
+          <el-input
+            v-model="searchData.FeedBackUserKeyInfo"
+            clearable
+            style="width: 150px"
+          ></el-input>
         </el-form-item>
         <!--问题类型-->
         <el-form-item :label="$t('feedBack:search:questionType')">
-          <el-select v-model="searchData.QuestionType" clearable style="width: 150px"
+          <el-select
-            popper-class="feedBack-select-box">
+            v-model="searchData.QuestionType"
-            <el-option v-for="item of QuestionTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+            clearable
+            style="width: 150px"
+            popper-class="feedBack-select-box"
+          >
+            <el-option
+              v-for="item of QuestionTypeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
           </el-select>
         </el-form-item>
         <!--问题描述-->
         <el-form-item :label="$t('feedBack:search:description')">
-          <el-input v-model="searchData.QuestionDescription" clearable style="width: 150px"></el-input>
+          <el-input
+            v-model="searchData.QuestionDescription"
+            clearable
+            style="width: 150px"
+          ></el-input>
         </el-form-item>
         <!--状态-->
         <el-form-item :label="$t('feedBack:search:status')" v-if="level > 7">
-          <el-select v-model="searchData.State" clearable style="width: 150px" popper-class="feedBack-select-box">
+          <el-select
-            <el-option v-for="item of $d.FeedBackStatus" :key="item.value" :label="item.label" :value="item.value" />
+            v-model="searchData.State"
+            clearable
+            style="width: 150px"
+            popper-class="feedBack-select-box"
+          >
+            <el-option
+              v-for="item of $d.FeedBackStatus"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
           </el-select>
         </el-form-item>
         <!--反馈日期-->
         <el-form-item :label="$t('feedBack:search:time')">
-          <el-date-picker v-model="datetimerange" type="datetimerange" :default-time="['00:00:00', '23:59:59']"
+          <el-date-picker
-            :start-placeholder="$t('feedBack:search:beginTime')" :end-placeholder="$t('feedBack:search:endTime')"
+            v-model="datetimerange"
-            value-format="yyyy-MM-dd HH:mm:ss" @change="handleDatetimeChange" style="width: 250px"
+            type="datetimerange"
-            popper-class="feedBack-select-box" />
+            :default-time="['00:00:00', '23:59:59']"
+            :start-placeholder="$t('feedBack:search:beginTime')"
+            :end-placeholder="$t('feedBack:search:endTime')"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            @change="handleDatetimeChange"
+            style="width: 250px"
+            popper-class="feedBack-select-box"
+          />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" icon="el-icon-search" @click="getList">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            @click="getList"
+          >
             {{ $t('common:button:search') }}
           </el-button>
           <!-- 重置 -->
-          <el-button icon="el-icon-refresh-left" @click="handleReset">
+          <el-button
+            icon="el-icon-refresh-left"
+            @click="handleReset"
+          >
             {{ $t('common:button:reset') }}
           </el-button>
           <!-- <el-button
@@ -66,32 +131,97 @@
             {{ $t("common:button:export") }}
           </el-button> -->
         </el-form-item>
-        <el-button type="primary" @click="resolve" style="float: right" v-if="level > 7"
+        <el-button
-          :disabled="tableSelectData.length <= 0">
+          type="primary"
+          @click="resolve"
+          style="float: right"
+          v-if="level > 7"
+          :disabled="tableSelectData.length <= 0"
+        >
           {{ $t('feedBack:button:resolve') }}
         </el-button>
       </el-form>
-      <el-table v-loading="loading" v-adaptive="{ bottomOffset: 45 }" height="100" :data="list" class="table"
+      <el-table
-        @selection-change="handleSelectChange" @sort-change="handleSortByColumn"
+        v-loading="loading"
-        :default-sort="{ prop: 'CreateTime', order: 'descending' }">
+        v-adaptive="{ bottomOffset: 45 }"
-        <el-table-column type="selection" align="center" width="45" v-if="level > 7" :selectable="handleSelectTable" />
+        height="100"
+        :data="list"
+        class="table"
+        @selection-change="handleSelectChange"
+        @sort-change="handleSortByColumn"
+        :default-sort="{ prop: 'CreateTime', order: 'descending' }"
+      >
+        <el-table-column
+          type="selection"
+          align="center"
+          width="45"
+          v-if="level > 7"
+          :selectable="handleSelectTable"
+        />
         <el-table-column type="index" width="50" />
-        <el-table-column :label="$t('feedBack:form:trialCode')" prop="TrialCode" min-width="100" show-overflow-tooltip
+        <el-table-column
-          sortable="custom" v-if="level > 8" />
+          :label="$t('feedBack:form:trialCode')"
-        <el-table-column :label="$t('feedBack:form:study')" prop="ExperimentName" min-width="140" show-overflow-tooltip
+          prop="TrialCode"
-          sortable="custom" v-if="level > 8" />
+          min-width="100"
-        <el-table-column :label="$t('feedBack:form:siteCode')" prop="TrialSiteCode" min-width="100"
+          show-overflow-tooltip
-          show-overflow-tooltip sortable="custom" v-if="level > 7" />
+          sortable="custom"
-        <el-table-column :label="$t('feedBack:form:SubjectCode')" prop="SubjectCode" min-width="120"
+          v-if="level > 8"
-          show-overflow-tooltip sortable="custom" v-if="level > 7" />
+        />
-        <el-table-column :label="$t('feedBack:form:subjectVisit')" prop="SubjectVisitName" min-width="120"
+        <el-table-column
-          show-overflow-tooltip sortable="custom" v-if="level > 7" />
+          :label="$t('feedBack:form:study')"
-        <el-table-column :label="$t('feedBack:form:role')" prop="FeedBackUserName" min-width="100" show-overflow-tooltip
+          prop="ExperimentName"
-          sortable="custom" v-if="level > 7" />
+          min-width="140"
-        <el-table-column :label="$t('feedBack:form:user')" prop="FeedBackFullName" min-width="140" show-overflow-tooltip
+          show-overflow-tooltip
-          sortable="custom" v-if="level > 7" />
+          sortable="custom"
-        <el-table-column :label="$t('feedBack:form:questionType')" prop="QuestionType" min-width="180"
+          v-if="level > 8"
-          show-overflow-tooltip sortable="custom">
+        />
+        <el-table-column
+          :label="$t('feedBack:form:siteCode')"
+          prop="TrialSiteCode"
+          min-width="100"
+          show-overflow-tooltip
+          sortable="custom"
+          v-if="level > 7"
+        />
+        <el-table-column
+          :label="$t('feedBack:form:SubjectCode')"
+          prop="SubjectCode"
+          min-width="120"
+          show-overflow-tooltip
+          sortable="custom"
+          v-if="level > 7"
+        />
+        <el-table-column
+          :label="$t('feedBack:form:subjectVisit')"
+          prop="SubjectVisitName"
+          min-width="120"
+          show-overflow-tooltip
+          sortable="custom"
+          v-if="level > 7"
+        />
+        <el-table-column
+          :label="$t('feedBack:form:role')"
+          prop="FeedBackUserName"
+          min-width="100"
+          show-overflow-tooltip
+          sortable="custom"
+          v-if="level > 7"
+        />
+        <el-table-column
+          :label="$t('feedBack:form:user')"
+          prop="FeedBackFullName"
+          min-width="140"
+          show-overflow-tooltip
+          sortable="custom"
+          v-if="level > 7"
+        />
+        <el-table-column
+          :label="$t('feedBack:form:questionType')"
+          prop="QuestionType"
+          min-width="180"
+          show-overflow-tooltip
+          sortable="custom"
+        >
           <template slot-scope="scope">
             <span>{{
               QuestionTypeOptions.filter(
@@ -100,22 +230,49 @@
             }}</span>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('feedBack:form:description')" prop="QuestionDescription" min-width="200"
+        <el-table-column
-          show-overflow-tooltip sortable="custom" />
+          :label="$t('feedBack:form:description')"
-        <el-table-column :label="$t('feedBack:form:time')" prop="CreateTime" min-width="180" show-overflow-tooltip
+          prop="QuestionDescription"
-          sortable="custom" />
+          min-width="200"
-        <el-table-column :label="$t('feedBack:form:status')" prop="State" min-width="120" show-overflow-tooltip
+          show-overflow-tooltip
-          sortable="custom" v-if="level > 7">
+          sortable="custom"
+        />
+        <el-table-column
+          :label="$t('feedBack:form:time')"
+          prop="CreateTime"
+          min-width="180"
+          show-overflow-tooltip
+          sortable="custom"
+        />
+        <el-table-column
+          :label="$t('feedBack:form:status')"
+          prop="State"
+          min-width="120"
+          show-overflow-tooltip
+          sortable="custom"
+          v-if="level > 7"
+        >
           <template slot-scope="scope">
-            <el-tag :type="['danger', 'success', 'danger'][scope.row.State]">{{
+            <el-tag :type="['danger', 'success'][scope.row.State]">{{
               $fd('FeedBackStatus', scope.row.State)
             }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('feedBack:form:uploadTime')" prop="UpdateTime" min-width="180" show-overflow-tooltip
+        <el-table-column
-          sortable="custom" v-if="level > 7" />
+          :label="$t('feedBack:form:uploadTime')"
-        <el-table-column :label="$t('common:action:action')" fixed="right" prop="UserTypeShortName" width="100"
+          prop="UpdateTime"
-          show-overflow-tooltip>
+          min-width="180"
+          show-overflow-tooltip
+          sortable="custom"
+          v-if="level > 7"
+        />
+        <el-table-column
+          :label="$t('common:action:action')"
+          fixed="right"
+          prop="UserTypeShortName"
+          width="100"
+          show-overflow-tooltip
+        >
           <template slot-scope="scope">
             <el-button type="text" @click="getDetail(scope.row)">
               {{ $t('common:button:view') }}
@@ -124,8 +281,12 @@
         </el-table-column>
       </el-table>
       <div class="pagination" style="text-align: right; margin-top: 5px">
-        <pagination :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize"
+        <pagination
-          @pagination="getList" />
+          :total="total"
+          :page.sync="searchData.PageIndex"
+          :limit.sync="searchData.PageSize"
+          @pagination="getList"
+        />
       </div>
     </div>
   </div>
@@ -273,7 +434,7 @@ export default {
       }
     },
     // 导出
-    report() { },
+    report() {},
     // 表格选择
     handleSelectChange(selection) {
       // console.log(selection, "handleSelectChange");
@@ -311,37 +472,31 @@ export default {
   display: flex;
   padding: 10px;
   border-radius: 5px;
-
   .left {
     display: flex;
     flex-direction: column;
     width: 0;
     flex-grow: 4;
-
     // border-right: 1px solid #ccc;
     .filter-container {
       display: flex;
       align-items: center;
       margin: 5px;
     }
-
     .data-table {
       flex: 1;
       padding: 5px 0px;
     }
-
     .pagination-container {
       text-align: right;
     }
   }
-
   .right {
     width: 0;
     flex-grow: 6;
     overflow-y: auto;
     border-right: 1px solid #ccc;
   }
-
   .selected-row {
     background-color: cadetblue;
   }