中心调研添加排序

src/views/trials/trials-panel/attachments/site-research/index.vue

@@ -96,7 +96,7 @@
         </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
@@ -104,7 +104,7 @@
           icon="el-icon-refresh-left"
           @click="handleReset"
         >
-          {{ $t("common:button:reset") }}
+          {{ $t('common:button:reset') }}
         </el-button>
         <!-- 中心人员 -->
         <el-button
@@ -115,7 +115,7 @@
           icon="el-icon-info"
           @click="showResearchUser"
         >
-          {{ $t("trials:researchRecord:button:questionStaffs") }}
+          {{ $t('trials:researchRecord:button:questionStaffs') }}
         </el-button>
         <!-- 调查表链接 -->
         <el-button
@@ -126,7 +126,7 @@
           icon="el-icon-link"
           @click="showResearchLink"
         >
-          {{ $t("trials:researchRecord:button:questionLink") }}
+          {{ $t('trials:researchRecord:button:questionLink') }}
         </el-button>
       </el-form>
     </template>
@@ -148,6 +148,7 @@
           prop="TrialSiteCode"
           :label="$t('trials:researchRecord:table:siteId')"
           min-width="100"
+          sortable="custom"
           show-overflow-tooltip
         />
         <!-- 中心名称 -->
@@ -189,7 +190,7 @@
             {{
               scope.row.PreliminaryUser
                 ? scope.row.PreliminaryUser.RealName
-                : ""
+                : ''
             }}
           </template>
         </el-table-column>
@@ -201,7 +202,7 @@
           show-overflow-tooltip
         >
           <template slot-scope="scope">
-            {{ scope.row.ReviewerUser ? scope.row.ReviewerUser.RealName : "" }}
+            {{ scope.row.ReviewerUser ? scope.row.ReviewerUser.RealName : '' }}
           </template>
         </el-table-column>
         <!-- 状态 -->
@@ -213,16 +214,16 @@
         >
           <template slot-scope="scope">
             <el-tag v-if="scope.row.State === 0" type="primary">{{
-              $fd("ResearchRecord", scope.row.State)
+              $fd('ResearchRecord', scope.row.State)
             }}</el-tag>
             <el-tag v-if="scope.row.State === 1" type="info">{{
-              $fd("ResearchRecord", scope.row.State)
+              $fd('ResearchRecord', scope.row.State)
             }}</el-tag>
             <el-tag v-if="scope.row.State === 2" type="warning">{{
-              $fd("ResearchRecord", scope.row.State)
+              $fd('ResearchRecord', scope.row.State)
             }}</el-tag>
             <el-tag v-if="scope.row.State === 3" type="danger">{{
-              $fd("ResearchRecord", scope.row.State)
+              $fd('ResearchRecord', scope.row.State)
             }}</el-tag>
           </template>
         </el-table-column>
@@ -235,10 +236,10 @@
         >
           <template slot-scope="scope">
             <el-tag v-if="scope.row.IsDeleted" type="danger">{{
-              $fd("YesOrNo", scope.row.IsDeleted)
+              $fd('YesOrNo', scope.row.IsDeleted)
             }}</el-tag>
             <el-tag v-else type="primary">{{
-              $fd("YesOrNo", scope.row.IsDeleted)
+              $fd('YesOrNo', scope.row.IsDeleted)
             }}</el-tag>
           </template>
         </el-table-column>
@@ -248,6 +249,7 @@
           :label="$t('trials:researchRecord:table:updateTime')"
           min-width="150"
           show-overflow-tooltip
+          sortable="custom"
         />
         <el-table-column width="150">
           <template slot-scope="scope">
@@ -330,12 +332,12 @@
               <i style="color: #428bca" class="el-icon-success" />
               <!-- 成功创建调查表链接 -->
               <span>{{
-                $t("trials:researchRecord:message:createLinkSuccessfully")
+                $t('trials:researchRecord:message:createLinkSuccessfully')
               }}</span>
             </div>
             <div style="margin: 10px 0">
               <!-- 链接： -->
-              {{ $t("trials:researchRecord:label:link") }}
+              {{ $t('trials:researchRecord:label:link') }}
               <el-input
                 ref="shareLink"
                 v-model="shareLink"
@@ -352,7 +354,7 @@
                 @click="copyLink"
                 class="shareLinkBtn"
               >
-                {{ $t("trials:researchRecord:button:copyLink") }}
+                {{ $t('trials:researchRecord:button:copyLink') }}
               </el-button>
             </div>
           </div>
@@ -362,10 +364,10 @@
             </div>
             <div class="codeBtnBox">
               <el-button @click="handleCopyImg" type="primary" round>{{
-                $t("trials:researchRecord:button:copyCode")
+                $t('trials:researchRecord:button:copyCode')
               }}</el-button>
               <el-button @click="savePic" round>{{
-                $t("trials:researchRecord:button:savePic")
+                $t('trials:researchRecord:button:savePic')
               }}</el-button>
             </div>
           </div>
@@ -379,32 +381,32 @@ import {
   getTrialSiteSurveyList,
   getTrialSiteSelect,
   abandonSiteSurvey,
-} from "@/api/trials";
-import { changeURLStatic } from "@/utils/history.js";
-import BaseContainer from "@/components/BaseContainer";
-import Pagination from "@/components/Pagination";
-import Users from "./components/users";
-import ResearchForm from "@/views/research/form";
-import BaseModel from "@/components/BaseModel";
-import QRCode from "qrcodejs2";
+} from '@/api/trials'
+import { changeURLStatic } from '@/utils/history.js'
+import BaseContainer from '@/components/BaseContainer'
+import Pagination from '@/components/Pagination'
+import Users from './components/users'
+import ResearchForm from '@/views/research/form'
+import BaseModel from '@/components/BaseModel'
+import QRCode from 'qrcodejs2'
 
 const searchDataDefault = () => {
   return {
-    SortField: "",
+    SortField: '',
     Asc: true,
     PageIndex: 1,
     PageSize: 20,
-    TrialSiteId: "",
-    UserKeyInfo: "",
+    TrialSiteId: '',
+    UserKeyInfo: '',
     State: null,
-    IsDeleted: "",
+    IsDeleted: '',
     DateRange: [],
     PreliminaryUserName: null,
     ReviewerUserName: null,
-  };
-};
+  }
+}
 export default {
-  name: "SiteResearchList",
+  name: 'SiteResearchList',
   components: { BaseContainer, Pagination, Users, ResearchForm, BaseModel },
   data() {
     return {
@@ -418,195 +420,195 @@ export default {
       researchInfoVisible: false,
       share_model: {
         visible: false,
-        title: this.$t("trials:researchRecord:title:shark"),
-        width: "800px",
+        title: this.$t('trials:researchRecord:title:shark'),
+        width: '800px',
       },
-      shareLink: "",
+      shareLink: '',
       researchState: this.$d.ResearchRecord,
       qrcode: null,
-    };
+    }
   },
   mounted() {
-    this.getList();
-    this.getSite();
+    this.getList()
+    this.getSite()
   },
   methods: {
     // 获取系统文件数据
     getList() {
-      this.loading = true;
-      this.searchData.TrialId = this.trialId;
+      this.loading = true
+      this.searchData.TrialId = this.trialId
       if (this.searchData.DateRange && this.searchData.DateRange.length === 2) {
-        this.searchData.UpdateTimeBegin = this.searchData.DateRange[0];
-        this.searchData.updateTimeEnd = this.searchData.DateRange[1];
+        this.searchData.UpdateTimeBegin = this.searchData.DateRange[0]
+        this.searchData.updateTimeEnd = this.searchData.DateRange[1]
       } else {
-        this.searchData.UpdateTimeBegin = "";
-        this.searchData.updateTimeEnd = "";
+        this.searchData.UpdateTimeBegin = ''
+        this.searchData.updateTimeEnd = ''
       }
       getTrialSiteSurveyList(this.searchData)
         .then((res) => {
-          this.loading = false;
-          this.list = res.Result.CurrentPageData;
-          this.total = res.Result.TotalCount;
+          this.loading = false
+          this.list = res.Result.CurrentPageData
+          this.total = res.Result.TotalCount
         })
         .catch(() => {
-          this.loading = false;
-        });
+          this.loading = false
+        })
     },
     // 查看调查表记录详情
     handleViewResearchList(row) {
-      changeURLStatic("trialSiteSurveyId", row.Id);
-      this.researchInfoVisible = true;
+      changeURLStatic('trialSiteSurveyId', row.Id)
+      this.researchInfoVisible = true
     },
     // 废除待提交的调查表
     handleRepealResearch(row) {
       // 是否确认废除？
-      this.$confirm(this.$t("trials:researchRecord:message:abolish"), {
-        type: "warning",
+      this.$confirm(this.$t('trials:researchRecord:message:abolish'), {
+        type: 'warning',
         distinguishCancelAndClose: true,
       }).then(() => {
         abandonSiteSurvey(this.trialId, row.Id).then((res) => {
           if (res.IsSuccess) {
-            this.getList();
+            this.getList()
             // 废除成功
             this.$message.success(
-              this.$t("trials:researchRecord:message:abolishSuccessfully")
-            );
+              this.$t('trials:researchRecord:message:abolishSuccessfully')
+            )
           }
-        });
-      });
+        })
+      })
     },
     // 展示当前项目下所有调查表需生成账户的用户信息
     showResearchUser() {
-      this.researchUserVisible = true;
+      this.researchUserVisible = true
     },
     // 复制链接
     copyLink() {
       // 中心调研表链接
       this.$copyText(
-        `${this.$t("trials:researchRecord:message:researchFormLink")}: ${
+        `${this.$t('trials:researchRecord:message:researchFormLink')}: ${
           this.shareLink
         }`
       )
         .then((res) => {
           // 复制成功
           this.$message.success(
-            this.$t("trials:researchRecord:message:copySuccessfully")
-          );
+            this.$t('trials:researchRecord:message:copySuccessfully')
+          )
         })
         .catch(() => {
           // 复制失败
-          this.$alert(this.$t("trials:researchRecord:message:copyFailed"));
-        });
+          this.$alert(this.$t('trials:researchRecord:message:copyFailed'))
+        })
     },
     // 创建二维码
     creatQrCode() {
-      this.$refs.qrcode.innerHTML = ""; //清除二维码方法一
-      let text = this.shareLink;
+      this.$refs.qrcode.innerHTML = '' //清除二维码方法一
+      let text = this.shareLink
       this.qrcode = new QRCode(this.$refs.qrcode, {
         text: text, //页面地址 ,如果页面需要参数传递请注意哈希模式#
         width: 200,
         height: 200,
-        colorDark: "#000000",
-        colorLight: "#ffffff",
+        colorDark: '#000000',
+        colorLight: '#ffffff',
         correctLevel: QRCode.CorrectLevel.H,
-      });
+      })
       // qrcode.clear(); // 清除二维码方法二
     },
     // 下载二维码
     savePic() {
       let qrCodeCanvas = document
-        .getElementById("qrcode")
-        .getElementsByTagName("canvas");
-      let a = document.createElement("a");
-      a.href = qrCodeCanvas[0].toDataURL("image/url");
-      a.download = `${this.$t("trials:researchRecord:title:code")}.png`;
-      a.click();
+        .getElementById('qrcode')
+        .getElementsByTagName('canvas')
+      let a = document.createElement('a')
+      a.href = qrCodeCanvas[0].toDataURL('image/url')
+      a.download = `${this.$t('trials:researchRecord:title:code')}.png`
+      a.click()
     },
     // 复制二维码
     handleCopyImg() {
       let qrCodeCanvas = document
-        .getElementById("qrcode")
-        .getElementsByTagName("canvas");
+        .getElementById('qrcode')
+        .getElementsByTagName('canvas')
       qrCodeCanvas[0].toBlob(async (blob) => {
-        console.log(blob);
+        console.log(blob)
         const data = [
           new ClipboardItem({
             [blob.type]: blob,
           }),
-        ]; // https://w3c.github.io/clipboard-apis/#dom-clipboard-write
+        ] // https://w3c.github.io/clipboard-apis/#dom-clipboard-write
         await navigator.clipboard.write(data).then(
           () => {
             this.$message.success(
-              this.$t("trials:researchRecord:message:copySuccess")
-            );
+              this.$t('trials:researchRecord:message:copySuccess')
+            )
           },
           () => {
             this.$message.error(
-              this.$t("trials:researchRecord:message:UnableWrite")
-            );
+              this.$t('trials:researchRecord:message:UnableWrite')
+            )
           }
-        );
-      });
+        )
+      })
     },
     // 获取site下拉框数据
     getSite() {
       getTrialSiteSelect(this.trialId).then((res) => {
-        this.siteOptions = res.Result;
-      });
+        this.siteOptions = res.Result
+      })
     },
     // 展示调查表链接
     showResearchLink() {
-      const trialId = this.trialId;
-      this.shareLink = `${location.protocol}//${location.host}/researchLogin?trialId=${trialId}&lang=${this.$i18n.locale}`;
-      this.share_model.visible = true;
+      const trialId = this.trialId
+      this.shareLink = `${location.protocol}//${location.host}/researchLogin?trialId=${trialId}&lang=${this.$i18n.locale}`
+      this.share_model.visible = true
       this.$nextTick(() => {
-        this.creatQrCode();
-      });
+        this.creatQrCode()
+      })
     },
     // 重置
     handleReset() {
-      this.searchData = searchDataDefault();
-      this.searchData.DateRange = [];
+      this.searchData = searchDataDefault()
+      this.searchData.DateRange = []
       if (this.searchData.DateRange && this.searchData.DateRange.length === 2) {
-        this.searchData.UpdateTimeBegin = this.searchData.DateRange[0];
-        this.searchData.updateTimeEnd = this.searchData.DateRange[1];
+        this.searchData.UpdateTimeBegin = this.searchData.DateRange[0]
+        this.searchData.updateTimeEnd = this.searchData.DateRange[1]
       } else {
-        this.searchData.UpdateTimeBegin = "";
-        this.searchData.updateTimeEnd = "";
+        this.searchData.UpdateTimeBegin = ''
+        this.searchData.updateTimeEnd = ''
       }
-      this.getList();
+      this.getList()
       this.$nextTick(() => {
-        this.$refs.siteResearchList.clearSort();
-      });
+        this.$refs.siteResearchList.clearSort()
+      })
     },
     // 查询
     handleSearch() {
-      this.getList();
+      this.getList()
     },
     // 排序
     handleSortByColumn(column) {
-      if (column.order === "ascending") {
-        this.searchData.Asc = true;
+      if (column.order === 'ascending') {
+        this.searchData.Asc = true
       } else {
-        this.searchData.Asc = false;
+        this.searchData.Asc = false
       }
-      this.searchData.SortField = column.prop;
-      this.getList();
+      this.searchData.SortField = column.prop
+      this.getList()
     },
   },
   beforeDestroy() {
     if (this.qrcode) {
-      this.qrcode = null;
+      this.qrcode = null
     }
   },
-};
+}
 </script>
 <style lang="scss" scoped>
 .shareLink {
   padding-right: 20px;
   width: 50%;
   position: relative;
-  .shareLinkBtn{
+  .shareLinkBtn {
     position: absolute;
     bottom: 0px;
     left: 0px;