From ca98bc278ce0b721bed304194e339166664dba7a Mon Sep 17 00:00:00 2001
From: "DESKTOP-6C3NK6N\\WXS" <815034831@qq.com>
Date: Mon, 29 Jul 2024 17:15:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=84=8F=E8=A7=81=E5=8F=8D=E9=A6=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/feedBack/fun.js                |  24 ++
 src/components/feedBack/index.js              |   7 +
 src/components/feedBack/index.vue             | 203 +++++++++++
 src/components/feedBack/uploadImage.vue       | 223 ++++++++++++
 src/components/feedBackTable/index.vue        |   0
 src/main.js                                   |   4 +-
 src/views/feedBack/index.vue                  | 329 ++++++++++++++++++
 .../trials-layout/components/feedBack.vue     |  21 +-
 src/views/trials/trials-layout/index.vue      |  23 +-
 9 files changed, 818 insertions(+), 16 deletions(-)
 create mode 100644 src/components/feedBack/fun.js
 create mode 100644 src/components/feedBack/index.js
 create mode 100644 src/components/feedBack/index.vue
 create mode 100644 src/components/feedBack/uploadImage.vue
 create mode 100644 src/components/feedBackTable/index.vue
 create mode 100644 src/views/feedBack/index.vue

diff --git a/src/components/feedBack/fun.js b/src/components/feedBack/fun.js
new file mode 100644
index 00000000..ddaa9b9c
--- /dev/null
+++ b/src/components/feedBack/fun.js
@@ -0,0 +1,24 @@
+import Vue from "vue";
+import FEEDBACKCOMP from "./index.vue";
+const FBConstructor = Vue.extend(FEEDBACKCOMP);
+
+const FB = options => {
+    const { cancelBack } = options;
+    // if (!UserId) throw `UserId is requred.but ${UserId}`
+    const id = `FB${new Date().getTime()}`;
+    const instance = new FBConstructor();
+    instance.id = id;
+    instance.vm = instance.$mount();
+    if (instance.vm.visible) return;
+    document.body.appendChild(instance.vm.$el);
+    instance.vm.open();
+    instance.vm.$on("success", (Id) => {
+    });
+    instance.vm.$on("closed", () => {
+        document.body.removeChild(instance.vm.$el);
+        instance.vm.$destroy();
+        if (cancelBack) cancelBack()
+    });
+    return instance.vm;
+}
+export default FB;
\ No newline at end of file
diff --git a/src/components/feedBack/index.js b/src/components/feedBack/index.js
new file mode 100644
index 00000000..e801c731
--- /dev/null
+++ b/src/components/feedBack/index.js
@@ -0,0 +1,7 @@
+import FEEDBACKCOMP from "./index.vue";
+import FB from "./fun";
+
+export default Vue => {
+    Vue.component(FEEDBACKCOMP.name, FEEDBACKCOMP);
+    Vue.prototype.$FB = FB;
+};
\ No newline at end of file
diff --git a/src/components/feedBack/index.vue b/src/components/feedBack/index.vue
new file mode 100644
index 00000000..a624ad71
--- /dev/null
+++ b/src/components/feedBack/index.vue
@@ -0,0 +1,203 @@
+<template>
+  <!--MFA-->
+  <el-dialog
+    v-if="visible"
+    :visible.sync="visible"
+    v-dialogDrag
+    width="540px"
+    :close-on-click-modal="false"
+    append-to-body
+    @close="cancel"
+  >
+    <div slot="title">
+      {{ title }}
+    </div>
+    <!-- 项目详情 -->
+    <div class="trialsBox">
+      <el-form
+        label-position="right"
+        :model="form"
+        :inline="true"
+        class="trialsForm"
+      >
+        <el-form-item :label="$t('feedBack:trials:code')">
+          <span>2024-06-28 15:00</span>
+        </el-form-item>
+        <el-form-item :label="$t('feedBack:trials:name')">
+          <span>2024-06-28 15:00</span>
+        </el-form-item>
+        <el-form-item :label="$t('feedBack:trials:siteCode')">
+          <span>2024-06-28 15:00</span>
+        </el-form-item>
+        <el-form-item :label="$t('feedBack:trials:visit')">
+          <span>2024-06-28 15:00</span>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-form
+      ref="mfaForm"
+      label-position="right"
+      :model="form"
+      :rules="rules"
+      label-width="100px"
+    >
+      <!-- 影像异常tip -->
+      <p class="tip">
+        <i
+          class="el-icon-warning-outline"
+          style="color: #f56c6c; font-size: 24px"
+        ></i>
+        <span> 影像异常导致无法阅片</span>
+      </p>
+      <!-- 问题反馈 -->
+      <el-form-item :label="$t('feedBack:form:feedBack')" prop="feedBack">
+        <el-select v-model="form.value" style="width: 100%">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+        <span>影像异常导致无法阅片</span>
+      </el-form-item>
+      <!-- 问题描述 -->
+      <el-form-item :label="$t('feedBack:form:description')" prop="description">
+        <el-input v-model="form.Code" type="textarea" :rows="4" />
+      </el-form-item>
+      <!-- 截图 -->
+      <el-form-item :label="$t('feedBack:form:screenshot')" prop="screenshot">
+        <uploadImage :path.sync="form.HospitalLogoPath" :disabled="disabled" />
+      </el-form-item>
+      <!-- 反馈时间 -->
+      <el-form-item :label="$t('feedBack:form:time')" prop="screenshot">
+        <span>2024-06-28 15:00</span>
+      </el-form-item>
+      <!-- 状态 -->
+      <el-form-item :label="$t('feedBack:form:status')" prop="screenshot">
+        <el-switch
+          v-model="form.status"
+          active-color="#13ce66"
+          inactive-color="#ff4949"
+          :active-value="true"
+          :inactive-value="false"
+          :active-text="$fd('FeedBackStatus', true)"
+          :inactive-text="$fd('FeedBackStatus', false)"
+        >
+        </el-switch>
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <!-- 取消 -->
+      <el-button size="small" @click.stop="cancel">
+        {{ $t("feedBack:button:cancel") }}
+      </el-button>
+      <!-- 保存 -->
+      <el-button
+        type="primary"
+        size="small"
+        @click.stop="save"
+        :loading="loading"
+      >
+        {{ $t("feedBack:button:save") }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import uploadImage from "./uploadImage.vue";
+export default {
+  name: "FB",
+  components: { uploadImage },
+  data() {
+    return {
+      title: null,
+      visible: false,
+      loading: false,
+      options: [],
+      form: {
+        Code: null,
+        UserId: null,
+        EMail: null,
+        username: null,
+      },
+      rules: {
+        Code: [
+          {
+            required: true,
+            message: this.$t("common:ruleMessage:specify"),
+            trigger: "blur",
+          },
+        ],
+        EMail: [
+          {
+            required: true,
+            message: this.$t("common:ruleMessage:specify"),
+            trigger: "blur",
+          },
+        ],
+        username: [
+          {
+            required: true,
+            message: this.$t("common:ruleMessage:specify"),
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    disabled() {
+      return false;
+    },
+  },
+  methods: {
+    open(data) {
+      this.visible = true;
+    },
+    cancel() {
+      this.visible = false;
+      this.$emit("closed");
+    },
+    async save() {
+      this.cancel();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.tip {
+  width: 86%;
+  margin: auto;
+  margin-bottom: 20px;
+  text-align: left;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  // border-radius: 5px;
+  // background-color: #eee;
+  i {
+    margin-right: 5px;
+  }
+}
+.trialsBox {
+  margin: auto;
+  margin-bottom: 20px;
+  text-align: left;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  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;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/feedBack/uploadImage.vue b/src/components/feedBack/uploadImage.vue
new file mode 100644
index 00000000..41bef0df
--- /dev/null
+++ b/src/components/feedBack/uploadImage.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="upload-container">
+    <el-upload
+      class="upload-demo"
+      :class="{ uploadDisabled: disabled ? true : false }"
+      action
+      :http-request="uploadFile"
+      :before-upload="beforeUpload"
+      :file-list="fileList"
+      :on-preview="handlePreview"
+      :on-remove="remove"
+      :on-exceed="handleExceed"
+      accept=".png,.jpg,.jpeg"
+      v-if="!disabled"
+      list-type="picture-card"
+    >
+      <i slot="default" class="el-icon-plus"></i>
+      <div slot="file" slot-scope="{ file }">
+        <template>
+          <img
+            class="el-upload-list__item-thumbnail"
+            :src="`${file.url}`"
+            alt=""
+            crossorigin="anonymous"
+          />
+          <span class="el-upload-list__item-actions">
+            <span
+              class="el-upload-list__item-preview"
+              @click="handlePictureCardPreview(file)"
+            >
+              <i class="el-icon-zoom-in"></i>
+            </span>
+            <span
+              class="el-upload-list__item-delete"
+              v-if="!disabled"
+              @click="handleRemove(file)"
+            >
+              <i class="el-icon-delete"></i>
+            </span>
+          </span>
+        </template>
+      </div>
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible" :modal="false">
+      <div class="showImg">
+        <img
+          width="70%"
+          :src="`${dialogImageUrl}`"
+          crossorigin="anonymous"
+          alt=""
+        />
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+const type = "Statement of Work";
+export default {
+  name: "UploadImage",
+  props: {
+    path: {
+      required: true,
+      default: () => {
+        return [];
+      },
+    },
+    disabled: {
+      required: true,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      fileList: [],
+      btnDisabled: false,
+      dialogVisible: false,
+      dialogImageUrl: "",
+    };
+  },
+  mounted() {
+    this.initFileList();
+  },
+  methods: {
+    remove(file, fileList) {
+      this.$emit("update:path", null);
+    },
+    fileToBlob(file) {
+      // 创建 FileReader 对象
+      const reader = new FileReader();
+      return new Promise((resolve) => {
+        // FileReader 添加 load 事件
+        reader.addEventListener("load", (e) => {
+          let blob;
+          if (typeof e.target.result === "object") {
+            blob = new Blob([e.target.result]);
+          } else {
+            blob = e.target.result;
+          }
+          resolve(blob);
+        });
+        // FileReader 以 ArrayBuffer 格式 读取 File 对象中数据
+        reader.readAsArrayBuffer(file);
+      });
+    },
+    // 上传oss
+    async uploadToOSS(name, file) {
+      try {
+        let res = await this.OSSclient.put(
+          `/System/GeneralDocuments/${name}`,
+          file
+        );
+        return res;
+      } catch (err) {
+        console.log(err);
+        return false;
+      }
+    },
+    initFileList() {
+      if (this.path && this.path.length > 0) {
+        this.fileList = [];
+        this.path.forEach((item, index) => {
+          let name = item.split("/");
+          this.fileList.push({
+            name: name[name.length - 1],
+            path: item,
+            fullPath: this.OSSclientConfig.basePath + item,
+            url: this.OSSclientConfig.basePath + item,
+            uid: `${name[name.length - 1]}${index}`,
+          });
+        });
+      }
+    },
+    async uploadFile(param) {
+      var fileName = param.file.name;
+      this.btnDisabled = true;
+      let file = await this.fileToBlob(param.file);
+      let res = await this.uploadToOSS(fileName, file);
+      this.btnDisabled = false;
+      if (!res) return;
+      this.$emit("update:path", [...this.path, res.name]);
+      return false;
+    },
+    beforeUpload(file, fileList) {
+      const isValidFile = this.fileValid(file.name, ["png", "jpg", "jpeg"]);
+      if (isValidFile) {
+        // this.fileList = [];
+      } else {
+        this.$alert("请上传PNG/JPG/JPEG文件");
+        return false;
+      }
+    },
+    handlePreview(file) {
+      file.fullPath ? window.open(file.fullPath, "_blank") : "";
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(`Upload is currently limited to 1 file`);
+    },
+    fileValid(fileName, typeArr) {
+      var extendName = fileName
+        .substring(fileName.lastIndexOf(".") + 1)
+        .toLocaleLowerCase();
+      if (typeArr.indexOf(extendName) > -1) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    handleRemove(file) {
+      let index = this.fileList.findIndex((item) => item.uid === file.uid);
+      this.fileList.splice(index, 1);
+      let arr = this.fileList.map((item) => item.name);
+      this.$emit("update:path", arr);
+    },
+  },
+};
+</script>
+<style>
+.upload-container .el-upload--text {
+  border: none;
+  width: 80px;
+  height: 30px;
+}
+.upload-container .el-form-item__label {
+  font-size: 12px;
+}
+.upload-container .el-upload-list__item {
+  font-size: 12px;
+}
+.logoAMessage {
+  font-size: 12px;
+  cursor: pointer;
+}
+.upload-container .uploadDisabled .el-upload--picture-card {
+  display: none;
+}
+.upload-container .el-upload--picture-card {
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+}
+.upload-container .el-upload-list--picture-card .el-upload-list__item {
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+}
+</style>
+<style lang="scss" scoped>
+.showImg {
+  width: 100%;
+  max-height: 500px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  img {
+    max-height: 100%;
+    max-width: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/feedBackTable/index.vue b/src/components/feedBackTable/index.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/src/main.js b/src/main.js
index d4bdb191..42a18202 100644
--- a/src/main.js
+++ b/src/main.js
@@ -60,6 +60,8 @@ import Preview from '@/components/Preview/index'
 Vue.use(Preview)
 import MFA from '@/components/MFA/index'
 Vue.use(MFA)
+import FB from '@/components/feedBack/index'
+Vue.use(FB)
 import adaptive from '@/directive/adaptive/index'
 // 表格自适应指令
 Vue.use(adaptive)
@@ -374,7 +376,7 @@ async function VueInit() {
     }
     _vm.$store.dispatch('user/logout').then(res => {
       // window.location.href = `/login`
-      if(_vm.$msgbox){
+      if (_vm.$msgbox) {
         _vm.$msgbox.close();
       }
       isOpen = false
diff --git a/src/views/feedBack/index.vue b/src/views/feedBack/index.vue
new file mode 100644
index 00000000..5f37c455
--- /dev/null
+++ b/src/views/feedBack/index.vue
@@ -0,0 +1,329 @@
+<template>
+  <div class="role">
+    <div ref="leftContainer" class="left">
+      <el-form :inline="true">
+        <!--项目编号/实验名称-->
+        <el-form-item :label="$t('feedBack:search:trials')">
+          <el-input v-model="searchData.a" clearable></el-input>
+        </el-form-item>
+        <!--受试者访视-->
+        <el-form-item :label="$t('feedBack:search:subjectVisit')">
+          <el-input v-model="searchData.a" clearable></el-input>
+        </el-form-item>
+        <!--角色-->
+        <el-form-item :label="$t('feedBack:search:role')">
+          <el-select v-model="searchData.NoticeTypeEnum" clearable size="small">
+            <el-option
+              v-for="item of $d.NoteType"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <!--反馈人-->
+        <el-form-item :label="$t('feedBack:search:user')">
+          <el-input v-model="searchData.a" clearable></el-input>
+        </el-form-item>
+        <!--问题类型-->
+        <el-form-item :label="$t('feedBack:search:questionType')">
+          <el-select v-model="searchData.NoticeTypeEnum" clearable size="small">
+            <el-option
+              v-for="item of $d.NoteType"
+              :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.a" clearable></el-input>
+        </el-form-item>
+        <!--状态-->
+        <el-form-item :label="$t('feedBack:search:status')">
+          <el-select v-model="searchData.NoticeTypeEnum" clearable size="small">
+            <el-option
+              v-for="item of $d.NoteType"
+              :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']"
+            :start-placeholder="$t('feedBack:search:beginTime')"
+            :end-placeholder="$t('feedBack:search:endTime')"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            @change="handleDatetimeChange"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            size="mini"
+            @click="getList"
+          >
+            {{ $t("common:button:search") }}
+          </el-button>
+          <!-- 重置 -->
+          <el-button
+            size="mini"
+            icon="el-icon-refresh-left"
+            @click="handleReset"
+          >
+            {{ $t("common:button:reset") }}
+          </el-button>
+          <el-button type="primary" size="mini" @click="report">
+            {{ $t("common:button:export") }}
+          </el-button>
+        </el-form-item>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="resolve"
+          style="float: right"
+        >
+          {{ $t("feedBack:button:resolve") }}
+        </el-button>
+      </el-form>
+      <el-table
+        v-loading="loading"
+        v-adaptive="{ bottomOffset: 45 }"
+        height="100"
+        :data="list"
+        class="table"
+        @selection-change="handleSelectChange"
+        @sort-change="handleSortByColumn"
+        :default-sort="{ prop: 'StudyTime', order: 'descending' }"
+      >
+        <el-table-column type="selection" align="center" width="45" />
+        <el-table-column
+          :label="$t('feedBack:form:trialCode')"
+          prop="NoticeLevelEnum"
+          min-width="120"
+          show-overflow-tooltip
+          sortable="custom"
+        />
+        <el-table-column
+          :label="$t('feedBack:form:study')"
+          prop="NoticeTypeEnum"
+          min-width="100"
+          show-overflow-tooltip
+          sortable="custom"
+        />
+        <el-table-column
+          :label="$t('feedBack:form:siteCode')"
+          prop="NoticeContent"
+          min-width="100"
+          show-overflow-tooltip
+          sortable="custom"
+        />
+        <el-table-column
+          :label="$t('feedBack:form:subjectVisit')"
+          prop="NoticeStateEnum"
+          min-width="100"
+          show-overflow-tooltip
+          sortable="custom"
+        />
+        <el-table-column
+          :label="$t('feedBack:form:role')"
+          prop="ApplicableProjectEnum"
+          min-width="100"
+          show-overflow-tooltip
+          sortable="custom"
+        />
+        <el-table-column
+          :label="$t('feedBack:form:user')"
+          prop="ApplicableProjectEnum"
+          min-width="100"
+          show-overflow-tooltip
+          sortable="custom"
+        />
+        <el-table-column
+          :label="$t('feedBack:form:questionType')"
+          prop="NoticeUserTypeList"
+          min-width="80"
+          show-overflow-tooltip
+          sortable="custom"
+        />
+        <el-table-column
+          :label="$t('feedBack:form:description')"
+          prop="NoticeModeEnum"
+          min-width="100"
+          show-overflow-tooltip
+          sortable="custom"
+        />
+        <el-table-column
+          :label="$t('feedBack:form:time')"
+          prop="StartDate"
+          min-width="100"
+          show-overflow-tooltip
+          sortable="custom"
+        />
+        <el-table-column
+          :label="$t('feedBack:form:status')"
+          prop="PublishUserName"
+          min-width="100"
+          show-overflow-tooltip
+          sortable="custom"
+        />
+        <el-table-column
+          :label="$t('feedBack:form:uploadTime')"
+          prop="PublishedTime"
+          min-width="100"
+          show-overflow-tooltip
+          sortable="custom"
+        />
+        <el-table-column
+          :label="$t('common:action:action')"
+          fixed="right"
+          prop="UserTypeShortName"
+          min-width="200"
+          show-overflow-tooltip
+        >
+          <template slot-scope="scope">
+            <el-button size="mini" type="text" @click="handleEdit(scope.row)">
+              {{ $t("common:button:view") }}
+            </el-button>
+          </template>
+        </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="getList"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  getSystemNoticeList,
+  addOrUpdateSystemNotice,
+} from "@/api/system/notice";
+import { getUserTypeRoleList } from "@/api/admin";
+import Pagination from "@/components/Pagination";
+const searchDataDefault = () => {
+  return {
+    Asc: true,
+    SortField: "",
+    NoticeContent: null,
+    FileName: null,
+    NoticeTypeEnum: null,
+    NoticeLevelEnum: null,
+    ApplicableProjectEnum: null,
+    NoticeModeEnum: null,
+    NoticeStateEnum: null,
+    PageIndex: 1,
+    PageSize: 20,
+  };
+};
+export default {
+  components: { Pagination },
+  dicts: [
+    "NoticeApplicableTrial",
+    "NoteLevel",
+    "NoteType",
+    "NoticeState",
+    "NoticeMode",
+  ],
+  data() {
+    return {
+      list: [],
+      total: 0,
+      loading: false,
+      datetimerange: [],
+      // 查询参数
+      searchData: searchDataDefault(),
+      tableSelectData: [],
+    };
+  },
+  mounted() {},
+  methods: {
+    getList() {},
+    handleDatetimeChange(val) {
+      if (val) {
+        this.searchData.StartTime = val[0];
+        this.searchData.EndTime = val[1];
+      } else {
+        this.searchData.StartTime = "";
+        this.searchData.EndTime = "";
+      }
+    },
+    // 重置列表查询
+    handleReset() {
+      this.datetimerange = null;
+      this.handleDatetimeChange();
+      this.searchData = searchDataDefault();
+      this.getList();
+    },
+    // 设为解决
+    resolve() {},
+    // 导出
+    report() {},
+    // 表格选择
+    handleSelectChange(selection) {
+      // console.log(selection, "handleSelectChange");
+      this.tableSelectData = selection;
+    },
+    // 排序
+    handleSortByColumn(column) {
+      if (column.order === "ascending") {
+        this.searchData.Asc = true;
+      } else {
+        this.searchData.Asc = false;
+      }
+      this.searchData.SortField = column.prop;
+      this.searchData.PageIndex = 1;
+      this.getList();
+    },
+  },
+};
+</script>
+<style lang="scss">
+.role {
+  height: 100%;
+  box-sizing: border-box;
+  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;
+  }
+}
+</style>
diff --git a/src/views/trials/trials-layout/components/feedBack.vue b/src/views/trials/trials-layout/components/feedBack.vue
index c35b81b8..feb1ded7 100644
--- a/src/views/trials/trials-layout/components/feedBack.vue
+++ b/src/views/trials/trials-layout/components/feedBack.vue
@@ -10,7 +10,9 @@
     <i class="el-icon-chat-dot-square icon"></i>
     <transition name="fade">
       <div class="checkBox" v-show="visible" @click.stop="false">
-        <span>{{ $t("triials:feedBack:botton:opinion") }}</span>
+        <span @click.stop="openFeedBack">{{
+          $t("triials:feedBack:botton:opinion")
+        }}</span>
         <span>{{ $t("triials:feedBack:botton:mine") }}</span>
       </div>
     </transition>
@@ -23,12 +25,16 @@ export default {
     return {
       visible: false,
       show: null,
+      lock: false,
     };
   },
   mounted() {
     document.getElementsByTagName("body")[0].addEventListener("click", () => {
+      if (this.lock) return;
       this.visible = false;
-      this.show = false;
+      if (this.show) {
+        this.show = false;
+      }
     });
   },
   methods: {
@@ -38,6 +44,15 @@ export default {
       }
       this.show = true;
     },
+    // 打开意见反馈
+    openFeedBack() {
+      this.lock = true;
+      this.$FB({
+        cancelBack: () => {
+          this.lock = false;
+        },
+      });
+    },
   },
 };
 </script>
@@ -46,7 +61,7 @@ export default {
   position: fixed;
   bottom: 50px;
   right: -25px;
-  z-index: 100000;
+  z-index: 1000;
   width: 50px;
   height: 50px;
   background: rgba(64, 158, 255, 0.533);
diff --git a/src/views/trials/trials-layout/index.vue b/src/views/trials/trials-layout/index.vue
index 38ec453d..5596bc22 100644
--- a/src/views/trials/trials-layout/index.vue
+++ b/src/views/trials/trials-layout/index.vue
@@ -6,26 +6,25 @@
       </div>
       <trialsMain />
     </div>
-    <!-- <feedBack/> -->
+    <!-- <feedBack /> -->
   </div>
 </template>
 
 <script>
-import trialsMain from './components/trialsMain'
-import trialsNavbar from './components/trialsNavbar'
-import feedBack from "./components/feedBack"
+import trialsMain from "./components/trialsMain";
+import trialsNavbar from "./components/trialsNavbar";
+import feedBack from "./components/feedBack";
 // import ResizeMixin from './mixin/ResizeHandler'
 
 export default {
-  name: 'Layout',
+  name: "Layout",
   components: {
     trialsMain,
     trialsNavbar,
-    feedBack
-  }
+    feedBack,
+  },
   // mixins: [ResizeMixin]
-
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -37,13 +36,13 @@ export default {
   position: relative;
   height: 100%;
   width: 100%;
-  .trials-container{
+  .trials-container {
     padding: 10px;
     height: 100%;
-    /deep/ .el-tag{
+    /deep/ .el-tag {
       background-color: transparent;
     }
-    /deep/ .el-tag--danger{
+    /deep/ .el-tag--danger {
       color: #f56c6c;
     }
   }