diff --git a/src/api/business/study/studyFormApply.js b/src/api/business/study/studyFormApply.js
index b14d96c..8c4200b 100644
--- a/src/api/business/study/studyFormApply.js
+++ b/src/api/business/study/studyFormApply.js
@@ -24,7 +24,13 @@ export function studyFormApply_qmxx(query) {
     params: query
   })
 }
-
+export function studyFormApply_jcgjqmxxList(query) {
+  return request({
+    url: '/system/business/studyFormApply/jcgjqmxxList',
+    method: 'get',
+    params: query
+  })
+}
 //详情
 export function studyFormApply_info(query) {
   return request({
diff --git a/src/api/business/study/studyFormFill.js b/src/api/business/study/studyFormFill.js
index 14d1263..94d27bd 100644
--- a/src/api/business/study/studyFormFill.js
+++ b/src/api/business/study/studyFormFill.js
@@ -24,6 +24,13 @@ export function studyFormFill_exportDetail(query) {
     params: query
   })
 }
+export function studyFormFill_jcgjqmxxList(query) {
+  return request({
+    url: '/system/business/studyFormFill/jcgjqmxxList',
+    method: 'get',
+    params: query
+  })
+}
 
 //签名信息
 export function studyFormFill_qmxx(query) {
diff --git a/src/api/business/study/studyFormPlan.js b/src/api/business/study/studyFormPlan.js
index be88b3a..1088999 100644
--- a/src/api/business/study/studyFormPlan.js
+++ b/src/api/business/study/studyFormPlan.js
@@ -24,7 +24,13 @@ export function studyFormPlan_qmxx(query) {
     params: query
   })
 }
-
+export function studyFormPlan_jcgjqmxxList(query) {
+  return request({
+    url: '/system/business/studyFormPlan/jcgjqmxxList',
+    method: 'get',
+    params: query
+  })
+}
 //详情
 export function studyFormPlan_info(query) {
   return request({
diff --git a/src/api/business/systemLog/systemLog.js b/src/api/business/systemLog/systemLog.js
new file mode 100644
index 0000000..4526380
--- /dev/null
+++ b/src/api/business/systemLog/systemLog.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function systemLog_list(query) {
+  return request({
+    url: '/system/business/systemLog/list',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/lang/en.js b/src/lang/en.js
index b545326..9b1cc45 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -59,6 +59,8 @@ import sj from './en/business/resource/sj'
 import gsp from './en/business/resource/gsp'
 //档案记录
 import archive from './en/business/archive/archive'
+//日志管理
+import systemLog from './en/system/systemLog'
 
 export default {
   system: {
@@ -104,8 +106,8 @@ export default {
     reason: 'Reason',
     modify: 'Modify',
     modifyRecord: 'Change Data',
-    hqz:'Get the value',
-    xztp:'选择天平',
+    hqz: 'Get the value',
+    xztp: '选择天平',
 
     lengthLimit: '长度不能超过',
     notEmpty: '不能为空',
@@ -147,7 +149,8 @@ export default {
       role,
       dept,
       user,
-      template
+      template,
+      systemLog
     },
     business: {
       home: home,
diff --git a/src/lang/en/system/systemLog.js b/src/lang/en/system/systemLog.js
new file mode 100644
index 0000000..3c8012e
--- /dev/null
+++ b/src/lang/en/system/systemLog.js
@@ -0,0 +1,10 @@
+export default {
+  //日志管理
+  czrz: 'User Action Log',
+  dlrz: 'User Login Log',
+  dc: 'Export Excel',
+  czr: 'User',
+  czlx: 'Action',
+  czxq: 'Detail',
+  czsj: 'Datetime'
+}
diff --git a/src/lang/zh.js b/src/lang/zh.js
index 1bca591..c070ccb 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -58,6 +58,8 @@ import sj from './zh/business/resource/sj'
 import gsp from './zh/business/resource/gsp'
 //档案记录
 import archive from './zh/business/archive/archive'
+//日志管理
+import systemLog from './zh/system/systemLog'
 
 export default {
   system: {
@@ -100,8 +102,8 @@ export default {
     reason: '原因',
     modify: '修改',
     modifyRecord: '修改记录',
-    hqz:'获取值',
-    xztp:'选择天平',
+    hqz: '获取值',
+    xztp: '选择天平',
     lengthLimit: '长度不能超过',
     notEmpty: '不能为空',
     operationSuccess: '操作成功',
@@ -142,7 +144,8 @@ export default {
       role,
       dept,
       user,
-      template
+      template,
+      systemLog
     },
     business: {
       home: home,
diff --git a/src/lang/zh/system/systemLog.js b/src/lang/zh/system/systemLog.js
new file mode 100644
index 0000000..4eeca86
--- /dev/null
+++ b/src/lang/zh/system/systemLog.js
@@ -0,0 +1,10 @@
+export default {
+  //日志管理
+  czrz: '操作日志',
+  dlrz: '登录日志',
+  dc: '导出Excel',
+  czr: '操作人',
+  czlx: '操作类型',
+  czxq: '操作详情',
+  czsj: '操作时间'
+}
diff --git a/src/views/business/comps/common/JcgjList.vue b/src/views/business/comps/common/JcgjList.vue
index e915d51..ff1ac26 100644
--- a/src/views/business/comps/common/JcgjList.vue
+++ b/src/views/business/comps/common/JcgjList.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="jcgjList">
-    <div class="jcgjList-keywords">
+    <div class="jcgjList-keywords" v-if="!readonly">
       <el-input v-model="queryParams.jcmc" clearable :placeholder="$t('form.placeholderInput')" @keyup.enter.native="handleQuery">
         <el-button slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
       </el-input>
     </div>
-    <div class="jcgjList-jcgjlx">
+    <div class="jcgjList-jcgjlx"  v-if="!readonly">
       <el-radio-group v-model="queryParams.jcgjlx" @change="handleQuery">
         <el-radio-button :label="-1">{{ $t('page.business.study.study.qb') }}</el-radio-button>
         <el-radio-button :label="1" v-if="showLc">{{ $t('page.business.study.study.lc') }}</el-radio-button>
@@ -81,6 +81,10 @@ export default {
       type:Boolean,
       default:false
     },
+    readonly: {
+      type:Boolean,
+      default:false
+    },
   },
   data() {
     return {
diff --git a/src/views/business/comps/template/comps/gsp/SYWZPZJHB.vue b/src/views/business/comps/template/comps/gsp/SYWZPZJHB.vue
index b899488..949c8bc 100644
--- a/src/views/business/comps/template/comps/gsp/SYWZPZJHB.vue
+++ b/src/views/business/comps/template/comps/gsp/SYWZPZJHB.vue
@@ -149,7 +149,7 @@ export default {
 					width: 280,
 					headerSelectKey: "preparationConcentrationUnit",
 					fillType: "actFill",
-					headerOptions: this.$store.state.template.volumeOptions,
+					headerOptions: this.getDictOptions('business_nddw'),
 					defaultValue: "mg",
 					bodyType: "inputNumber",
 					bodyFillType: "actFill",
@@ -161,7 +161,7 @@ export default {
 					width: 280,
 					headerSelectKey: "preparationVolumeUnit",
 					fillType: "actFill",
-					headerOptions: this.$store.state.template.volumeOptions,
+					headerOptions: this.getDictOptions('business_tjdw'),
 					bodyType: "inputNumber",
 					bodyFillType: "actFill",
 					bodyMaxlength: 10,
diff --git a/src/views/business/form/drug/comp/enter.vue b/src/views/business/form/drug/comp/enter.vue
index c046eba..a03c591 100644
--- a/src/views/business/form/drug/comp/enter.vue
+++ b/src/views/business/form/drug/comp/enter.vue
@@ -9,10 +9,10 @@
       </div>
 
       <div class="content-box" v-if="study.id!='' && study.id!=undefined">
-        <ytbd v-if="active === 'ytbd'" :study="study" @showDetail="showDetailCallback" />
-        <tbbd v-if="active === 'tbbd'" :study="study" @showDetail="showDetailCallback"/>
-        <sqbd v-if="active === 'sqbd'" :study="study" @showDetail="showDetailCallback"/>
-        <wzlb v-if="active === 'wzlb'" :study="study" @showDetail="showDetailCallback"/>
+        <ytbd v-if="active === 'ytbd'" :study="study" @showDetail="showDetailCallback" @changeTab="changeTab" />
+        <tbbd v-if="active === 'tbbd'" :study="study" @showDetail="showDetailCallback" @changeTab="changeTab"/>
+        <sqbd v-if="active === 'sqbd'" :study="study" @showDetail="showDetailCallback" @changeTab="changeTab"/>
+        <wzlb v-if="active === 'wzlb'" :study="study" @showDetail="showDetailCallback" @changeTab="changeTab"/>
       </div>
     </div>
   </div>
diff --git a/src/views/business/form/nonTrial/comp/enter.vue b/src/views/business/form/nonTrial/comp/enter.vue
index 1366156..984d362 100644
--- a/src/views/business/form/nonTrial/comp/enter.vue
+++ b/src/views/business/form/nonTrial/comp/enter.vue
@@ -9,10 +9,10 @@
       </div>
 
       <div class="content-box" v-if="study.id!='' && study.id!=undefined">
-        <ytbd v-if="active === 'ytbd'" :study="study" @showDetail="showDetailCallback" />
-        <tbbd v-if="active === 'tbbd'" :study="study" @showDetail="showDetailCallback"/>
-        <syff v-if="active === 'syff'" :study="study" @showDetail="showDetailCallback"/>
-        <wzlb v-if="active === 'wzlb'" :study="study" @showDetail="showDetailCallback"/>
+        <ytbd v-if="active === 'ytbd'" :study="study" @showDetail="showDetailCallback" @changeTab="changeTab" />
+        <tbbd v-if="active === 'tbbd'" :study="study" @showDetail="showDetailCallback" @changeTab="changeTab"/>
+        <syff v-if="active === 'syff'" :study="study" @showDetail="showDetailCallback" @changeTab="changeTab"/>
+        <wzlb v-if="active === 'wzlb'" :study="study" @showDetail="showDetailCallback" @changeTab="changeTab"/>
       </div>
     </div>
   </div>
diff --git a/src/views/business/form/nonTrial/comp/tbbd.vue b/src/views/business/form/nonTrial/comp/tbbd.vue
index 5cc5edf..4edce1a 100644
--- a/src/views/business/form/nonTrial/comp/tbbd.vue
+++ b/src/views/business/form/nonTrial/comp/tbbd.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="study-tbbd">
     <div class="tbbd-right" v-if="studyInfo.id&&studyInfo.id!=''">
-      <tbbdList :study="studyInfo" @showDetail="showDetailCallback"/>
+      <tbbdList :study="studyInfo" @showDetail="showDetailCallback" @changeTab="changeTab"/>
     </div>
   </div>
 </template>
@@ -41,6 +41,9 @@ export default {
   methods: {
     showDetailCallback(val){
       this.$emit('showDetail',val)
+    },
+    changeTab(val){
+      this.$emit('changeTab',val)
     }
   }
 }
diff --git a/src/views/business/form/nonTrial/comp/tbbdList.vue b/src/views/business/form/nonTrial/comp/tbbdList.vue
index 0340557..91e33f3 100644
--- a/src/views/business/form/nonTrial/comp/tbbdList.vue
+++ b/src/views/business/form/nonTrial/comp/tbbdList.vue
@@ -335,7 +335,11 @@ export default {
       this.$alert(data.ffmc, '', {
         confirmButtonText: this.$t('page.business.study.studyMethod.qyd'),
         callback: action => {
-          this.$tab.openPage("loading", data.toUrl)
+          if(this.$route.path===data.toUrl){
+            this.$emit('changeTab',{key:'syff'})
+          }else{
+            this.$tab.openPage("loading", data.toUrl)
+          }
         }
       });
     },
diff --git a/src/views/business/form/nonTrial/comp/ytbd.vue b/src/views/business/form/nonTrial/comp/ytbd.vue
index 2b4fa26..ed6b693 100644
--- a/src/views/business/form/nonTrial/comp/ytbd.vue
+++ b/src/views/business/form/nonTrial/comp/ytbd.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="study-ytbd">
     <div class="ytbd-right" v-if="studyInfo.id&&studyInfo.id!=''">
-      <ytbdList :study="studyInfo" @showDetail="showDetailCallback"/>
+      <ytbdList :study="studyInfo" @showDetail="showDetailCallback" @changeTab="changeTab"/>
     </div>
   </div>
 </template>
@@ -41,6 +41,9 @@ export default {
   methods: {
     showDetailCallback(val){
       this.$emit('showDetail',val)
+    },
+    changeTab(val){
+      this.$emit('changeTab',val)
     }
   }
 }
diff --git a/src/views/business/form/nonTrial/comp/ytbdList.vue b/src/views/business/form/nonTrial/comp/ytbdList.vue
index db7b7fc..924760c 100644
--- a/src/views/business/form/nonTrial/comp/ytbdList.vue
+++ b/src/views/business/form/nonTrial/comp/ytbdList.vue
@@ -370,7 +370,11 @@ export default {
       this.$alert(data.ffmc, '', {
         confirmButtonText: this.$t('page.business.study.studyMethod.qyd'),
         callback: action => {
-          this.$tab.openPage("loading", data.toUrl)
+          if(this.$route.path===data.toUrl){
+            this.$emit('changeTab',{key:'syff'})
+          }else{
+            this.$tab.openPage("loading", data.toUrl)
+          }
         }
       });
     },
diff --git a/src/views/business/resource/gsp/comps/ffjl/Jq.vue b/src/views/business/resource/gsp/comps/ffjl/Jq.vue
index 56fde7f..3c77bc0 100644
--- a/src/views/business/resource/gsp/comps/ffjl/Jq.vue
+++ b/src/views/business/resource/gsp/comps/ffjl/Jq.vue
@@ -3,7 +3,6 @@
     <!-- 加签弹窗 -->
     <el-dialog :title="$t('page.business.resource.mjy.jiaqian')" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
-        <div class="sbzdtcma"> <input type="text"> <input  type="password" show-password> </div>
           <!-- <el-row>
             <el-col :span="24">
               <el-form-item :label="$t('page.business.resource.mjy.mc')" prop="mc">
diff --git a/src/views/business/resource/gsp/comps/gsp/Xgkc.vue b/src/views/business/resource/gsp/comps/gsp/Xgkc.vue
index dc53a00..638762a 100644
--- a/src/views/business/resource/gsp/comps/gsp/Xgkc.vue
+++ b/src/views/business/resource/gsp/comps/gsp/Xgkc.vue
@@ -111,7 +111,7 @@ export default {
         mc: null,
         bh: null,
         qmyy: this.$t('page.business.resource.gsp.xgkc'),
-        sdrmm: null,
+        qmrmm: null,
         kc: '',
         kcdw: '',
       }
diff --git a/src/views/business/resource/sj/comps/Bj.vue b/src/views/business/resource/sj/comps/Bj.vue
index e9c2e3a..c578680 100644
--- a/src/views/business/resource/sj/comps/Bj.vue
+++ b/src/views/business/resource/sj/comps/Bj.vue
@@ -71,7 +71,8 @@
         <el-row>
           <el-col :span="24">
             <el-form-item :label="$t('form.password')" prop="qmrmm">
-              <el-input type="text" v-model="form.qmrmm"  autocomplete="off" auto-complete="new-password" show-password maxlength="20" :placeholder="$t('form.placeholderInput')" />
+              <div class="sbzdtcma"> <input type="text"></div>
+              <el-input type="password" v-model="form.qmrmm"  autocomplete="off" auto-complete="new-password" show-password maxlength="20" :placeholder="$t('form.placeholderInput')" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -143,7 +144,7 @@ export default {
         mc: null,
         bh: null,
         qmyy: this.$t('form.edit'),
-        sdrmm: null
+        qmrmm: null
       }
       this.resetForm("form")
     },
diff --git a/src/views/business/resource/sj/comps/Gd.vue b/src/views/business/resource/sj/comps/Gd.vue
index e42add3..5516cb1 100644
--- a/src/views/business/resource/sj/comps/Gd.vue
+++ b/src/views/business/resource/sj/comps/Gd.vue
@@ -94,7 +94,7 @@ export default {
         mc: null,
         bh: null,
         qmyy: this.$t('page.business.resource.sj.sqgd'),
-        sdrmm: null
+        qmrmm: null
       }
       this.resetForm("form")
     },
diff --git a/src/views/business/resource/sj/comps/Jd.vue b/src/views/business/resource/sj/comps/Jd.vue
index 5bd2549..7071f2d 100644
--- a/src/views/business/resource/sj/comps/Jd.vue
+++ b/src/views/business/resource/sj/comps/Jd.vue
@@ -31,7 +31,7 @@
         <el-row>
           <el-col :span="24">
             <el-form-item :label="$t('form.password')" prop="qmrmm">
-              <el-input type="text" v-model="form.qmrmm"  autocomplete="off" auto-complete="new-password" show-password maxlength="20" :placeholder="$t('form.placeholderInput')" />
+              <el-input type="password" v-model="form.qmrmm"  autocomplete="off" auto-complete="new-password" show-password maxlength="20" :placeholder="$t('form.placeholderInput')" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -93,7 +93,7 @@ export default {
         mc: null,
         bh: null,
         qmyy: this.$t('page.business.resource.sj.sqjd'),
-        sdrmm: null
+        qmrmm: null
       }
       this.resetForm("form")
     },
diff --git a/src/views/business/resource/sj/comps/Js.vue b/src/views/business/resource/sj/comps/Js.vue
index ad44a37..2a5fc7a 100644
--- a/src/views/business/resource/sj/comps/Js.vue
+++ b/src/views/business/resource/sj/comps/Js.vue
@@ -31,7 +31,7 @@
         <el-row>
           <el-col :span="24">
             <el-form-item :label="$t('form.password')" prop="qmrmm">
-              <el-input type="text" v-model="form.qmrmm"  autocomplete="off" auto-complete="new-password" show-password maxlength="20" :placeholder="$t('form.placeholderInput')" />
+              <el-input type="password" v-model="form.qmrmm"  autocomplete="off" auto-complete="new-password" show-password maxlength="20" :placeholder="$t('form.placeholderInput')" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -81,7 +81,7 @@ export default {
         mc: null,
         bh: null,
         qmyy: this.$t('page.business.resource.sj.jssj'),
-        sdrmm: null
+        qmrmm: null
       }
       this.resetForm("form")
     },
diff --git a/src/views/business/resource/sj/comps/Jy.vue b/src/views/business/resource/sj/comps/Jy.vue
index 00a80ad..24debd7 100644
--- a/src/views/business/resource/sj/comps/Jy.vue
+++ b/src/views/business/resource/sj/comps/Jy.vue
@@ -3,7 +3,7 @@
     <!-- 借阅弹窗 -->
     <el-dialog :title="$t('page.business.resource.sj.jieyue')" :visible.sync="open" width="500px" append-to-body
       :close-on-click-modal="false">
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-show="open">
         <el-row>
           <el-col :span="24">
             <el-form-item :label="$t('page.business.resource.sj.jieyuesj')" prop="qmyy">
@@ -107,7 +107,7 @@ export default {
         mc: null,
         bh: null,
         qmyy: this.$t('page.business.resource.sj.sqjy'),
-        sdrmm: null
+        qmrmm: null
       }
       this.resetForm("form")
     },
@@ -119,6 +119,7 @@ export default {
       this.form.id = row.id
       this.form.mc = row.mc
       this.form.bh = row.bh
+      this.daterange = []
       this.open = true
     },
     save() {
diff --git a/src/views/business/resource/sj/comps/Sd.vue b/src/views/business/resource/sj/comps/Sd.vue
index 7d6e654..fbc2842 100644
--- a/src/views/business/resource/sj/comps/Sd.vue
+++ b/src/views/business/resource/sj/comps/Sd.vue
@@ -31,7 +31,8 @@
         <el-row>
           <el-col :span="24">
             <el-form-item :label="$t('form.password')" prop="qmrmm">
-              <el-input type="text" v-model="form.qmrmm"  autocomplete="off" auto-complete="new-password" show-password maxlength="20" :placeholder="$t('form.placeholderInput')" />
+              <div class="sbzdtcma"> <input type="text"></div>
+              <el-input type="password" v-model="form.qmrmm"  autocomplete="off" auto-complete="new-password" show-password maxlength="20" :placeholder="$t('form.placeholderInput')" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -93,7 +94,7 @@ export default {
         mc: null,
         bh: null,
         qmyy: this.$t('page.business.resource.sj.sdsj'),
-        sdrmm: null
+        qmrmm: null
       }
       this.resetForm("form")
     },
diff --git a/src/views/business/resource/sj/comps/Xgkc.vue b/src/views/business/resource/sj/comps/Xgkc.vue
index 99354df..9d841bf 100644
--- a/src/views/business/resource/sj/comps/Xgkc.vue
+++ b/src/views/business/resource/sj/comps/Xgkc.vue
@@ -42,7 +42,8 @@
         <el-row>
           <el-col :span="24">
             <el-form-item :label="$t('form.password')" prop="qmrmm">
-              <el-input type="text" v-model="form.qmrmm"  autocomplete="off" auto-complete="new-password" show-password maxlength="20" :placeholder="$t('form.placeholderInput')" />
+              <div class="sbzdtcma"> <input type="text"></div>
+              <el-input type="password" v-model="form.qmrmm"  autocomplete="off" auto-complete="new-password" show-password maxlength="20" :placeholder="$t('form.placeholderInput')" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -109,7 +110,7 @@ export default {
         mc: null,
         bh: null,
         qmyy: this.$t('page.business.resource.sj.xgkc'),
-        sdrmm: null,
+        qmrmm: null,
         kc: '',
         kcdw: '',
       }
diff --git a/src/views/business/study/comp/enter.vue b/src/views/business/study/comp/enter.vue
index 2aeedba..cda9a1e 100644
--- a/src/views/business/study/comp/enter.vue
+++ b/src/views/business/study/comp/enter.vue
@@ -9,12 +9,12 @@
       </div>
 
       <div class="content-box" v-if="study.id!='' && study.id!=undefined">
-        <ytbd v-if="active === 'ytbd'" :study="study" @showDetail="showDetailCallback" />
-        <tbbd v-if="active === 'tbbd'" :study="study" @showDetail="showDetailCallback"/>
-        <syxx v-if="active === 'syxx'" :study="study" @showDetail="showDetailCallback"/>
-        <syff v-if="active === 'syff'" :study="study" @showDetail="showDetailCallback"/>
-        <wzlb v-if="active === 'wzlb'" :study="study" @showDetail="showDetailCallback"/>
-        <syj v-if="active === 'syj'" :study="study" @showDetail="showDetailCallback"/>
+        <ytbd v-if="active === 'ytbd'" :study="study" @showDetail="showDetailCallback" @changeTab="changeTab" />
+        <tbbd v-if="active === 'tbbd'" :study="study" @showDetail="showDetailCallback" @changeTab="changeTab"/>
+        <syxx v-if="active === 'syxx'" :study="study" @showDetail="showDetailCallback" @changeTab="changeTab"/>
+        <syff v-if="active === 'syff'" :study="study" @showDetail="showDetailCallback" @changeTab="changeTab"/>
+        <wzlb v-if="active === 'wzlb'" :study="study" @showDetail="showDetailCallback" @changeTab="changeTab"/>
+        <syj v-if="active === 'syj'" :study="study" @showDetail="showDetailCallback" @changeTab="changeTab"/>
       </div>
     </div>
   </div>
diff --git a/src/views/business/study/comp/jhbd/Xq.vue b/src/views/business/study/comp/jhbd/Xq.vue
index e1924d5..cb9c841 100644
--- a/src/views/business/study/comp/jhbd/Xq.vue
+++ b/src/views/business/study/comp/jhbd/Xq.vue
@@ -10,73 +10,181 @@
         </div>
         <div class="right-top">
           <el-button @click="cancel()">{{ $t('form.close') }}</el-button>
+          <el-button type="primary" v-if="form.bdzt === 5 && form.tbzt === 1" @click="openApprove = true">{{
+            $t('page.business.study.studyFormPlan.tb') }}</el-button>
         </div>
       </div>
-      <div class="edit-content ">
-        <div class="content">
-          <!-- 1:流程；3：编辑；5：人员；7：修改；9：补充说明 -->
-          <el-button type="primary" @click="exportExcel(-1)">{{ $t('page.business.study.studyFormPlan.dcqbjcgj') }}
-          </el-button>
-          <el-button type="primary" @click="exportExcel(1)">{{ $t('page.business.study.studyFormPlan.dclcjcgj') }}
-          </el-button>
-          <el-button type="primary" @click="exportExcel(3)">{{ $t('page.business.study.studyFormPlan.dcbjjcgj') }}
-          </el-button>
-          <el-button type="primary" @click="exportExcel(7)">{{ $t('page.business.study.studyFormPlan.dcxgjcgj') }}
-          </el-button>
-          <el-button type="primary" @click="exportExcel(999)">{{ $t('page.business.study.studyFormPlan.dcbhsjgj') }}
-          </el-button>
-          <TemplateTable ref="templateTable" :sn="form.templateSn" fillType="audit" :templateData="form" />
-          <div class="content-title">
-            <div class="line"></div>
-            <div class="subtitle"> {{ $t('page.business.study.studyFormPlan.qmxx') }}</div>
-          </div>
-          <div class="pal">
-            <el-table :data="qmxxList" v-loading="loadingQmxx">
-              <el-table-column :label="$t('page.business.study.studyFormPlan.qmr')" align="center" prop="qmrMc"
-                width="150px" />
-              <el-table-column :label="$t('page.business.study.studyFormPlan.qmyy')" align="center"
-                :prop="$i18n.locale === 'zh_CN' ? 'qmyy' : 'qmyyEn'" width="150px" />
-              <el-table-column :label="$t('page.business.study.studyFormPlan.qmsj')" align="center" prop="createTime"
-                width="150px" />
-              <el-table-column :label="$t('page.business.study.studyFormPlan.bzyy')" align="center" prop="remark"
-                :show-overflow-tooltip="true" />
-            </el-table>
-          </div>
-          <div class="pal">
-            <pagination v-show="totalQmxx > 0" :total="totalQmxx" :page.sync="queryParamsQmxx.pageNum"
+      <!-- 1:流程；3：编辑；5：人员；7：修改；9：补充说明 -->
+      <el-button type="primary" @click="exportExcel(-1)">{{ $t('page.business.study.studyFormPlan.dcqbjcgj') }}
+      </el-button>
+      <el-button type="primary" @click="exportExcel(1)">{{ $t('page.business.study.studyFormPlan.dclcjcgj') }}
+      </el-button>
+      <el-button type="primary" @click="exportExcel(3)">{{ $t('page.business.study.studyFormPlan.dcbjjcgj') }}
+      </el-button>
+      <el-button type="primary" @click="exportExcel(7)">{{ $t('page.business.study.studyFormPlan.dcxgjcgj') }}
+      </el-button>
+      <el-button type="primary" @click="exportExcel(999)">{{ $t('page.business.study.studyFormPlan.dcbhsjgj') }}
+      </el-button>
+      <div class="edit-content">
+        <div class="detail-content" style="width: 100%; height: 100%;">
+          <vue-html2pdf :show-layout="true" pdf-content-width="100%" :pdf-format="form.templatePdfSize" :pdf-quality="2"
+            :float-layout="false" pdf-orientation="landscape" :paginate-elements-by-height="0" :enable-download="true"
+            :preview-modal="false" :filename="form.bdmc" @beforeDownload="addDynamicWatermark" ref="html2Pdf"
+            @progress="onProgress">
+            <section slot="pdf-content">
+              <div class="pdf-content">
+                <TemplateTable ref="templateTable" :sn="form.templateSn" :templateData="form" fillType="detail" />
+                <div v-if="showExport" style="width: 100%; padding: 0px 30px ;">
+                  <div class="content-title" style="margin-bottom: 10px;">
+                    <div class="line"></div>
+                    <div class="subtitle"> {{ $t('page.business.study.studyFormPlan.qmxx') }}</div>
+                  </div>
+                  <table class="datatable">
+                    <thead>
+                      <tr>
+                        <th style="width: 20%;">{{ $t('page.business.study.studyFormPlan.qmr') }}</th>
+                        <th style="width: 20%;">{{ $t('page.business.study.studyFormPlan.qmyy') }}</th>
+                        <th style="width: 20%;">{{ $t('page.business.study.studyFormPlan.qmsj') }}</th>
+                        <th style="width: 40%;">{{ $t('page.business.study.studyFormPlan.bzyy') }}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr v-for="(item, index) in qmxxExportList" :key="index">
+                        <td>{{ item.qmrMc }}</td>
+                        <td>{{ $i18n.locale === 'zh_CN' ? item.qmyy : item.qmyyEn }}</td>
+                        <td>{{ item.createTime }}</td>
+                        <td>{{ item.remark }}</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                  <div class="content-title" style="margin-top: 10px;" v-show="jcgjlxExport != 999">
+                    <div class="line"></div>
+                    <div class="subtitle"> {{ $t('page.business.study.studyFormPlan.jcgj') }}</div>
+                  </div>
+                  <JcgjList ref="jcgjExportList" :readonly="true" v-show="jcgjlxExport != 999" />
+                </div>
+              </div>
+              <div v-if="showExport" id="watermark-overlay"  ref="watermarkContainer" :style="{
+                '--watermark-text': `'${watermarkText}'`,
+                '--watermark-opacity': opacity,
+                '--watermark-size': '14px',
+                '--watermark-color': 'red'
+              }"></div>
+            </section>
+          </vue-html2pdf>
+          <div style="padding: 0px 20px 0px 30px;margin-left: 10px;">
+            <div class="content-title">
+              <div class="line"></div>
+              <div class="subtitle"> {{ $t('page.business.study.studyFormPlan.qmxx') }}</div>
+            </div>
+            <div class="pal">
+              <el-table :data="qmxxList" v-loading="loadingQmxx" style="width: 100%;">
+                <el-table-column :label="$t('page.business.study.studyFormPlan.qmr')" align="center" prop="qmrMc" />
+                <el-table-column :label="$t('page.business.study.studyFormPlan.qmyy')" align="center"
+                  :prop="$i18n.locale === 'zh_CN' ? 'qmyy' : 'qmyyEn'" />
+                <el-table-column :label="$t('page.business.study.studyFormPlan.qmsj')" align="center"
+                  prop="createTime" />
+                <el-table-column :label="$t('page.business.study.studyFormPlan.bzyy')" align="center" prop="remark" />
+              </el-table>
+            </div>
+            <pagination v small layout="prev, pager, next" :total="totalQmxx" :page.sync="queryParamsQmxx.pageNum"
               :limit.sync="queryParamsQmxx.pageSize" @pagination="getQmxxList" />
+            <div class="content-title" style="margin-top: 10px;">
+              <div class="line"></div>
+              <div class="subtitle"> {{ $t('page.business.study.studyFormPlan.jcgj') }}</div>
+            </div>
+            <JcgjList ref="jcgjList" @handleQuery="getJjcgjList" :showXg="true" />
+            <pagination v small layout="prev, pager, next" :total="jcgjTotal" @pagination="getJjcgjList" />
           </div>
-          <div class="content-title">
-            <div class="line"></div>
-            <div class="subtitle"> {{ $t('page.business.study.studyFormPlan.jcgj') }}</div>
-          </div>
-          <JcgjList ref="jcgjList" @handleQuery="getJjcgjList" :showXg="true" />
-          <pagination v-show="jcgjTotal > 0" small layout="prev, pager, next" :total="jcgjTotal"
-            @pagination="getJjcgjList" />
         </div>
       </div>
     </div>
+
+    <!-- 填报 -->
+    <el-dialog :title="$t('page.business.study.studyFormPlan.cjjl')" :visible.sync="openApprove" width="500px"
+      append-to-body :close-on-click-modal="false">
+      <el-form ref="formApprove" :model="formApprove" :rules="rulesApprove" label-width="120px" v-if="openApprove">
+        <el-alert :title="$t('page.business.study.studyFormPlan.ts')" :closable="false" type="success">
+        </el-alert>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('form.qmyy')" prop="qmyy">
+              <el-input type="text" :value="formApprove.qmyy" maxlength="50" disabled
+                :placeholder="$t('form.placeholderInput')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('form.remark')" prop="remark">
+              <el-input type="textarea" v-model="formApprove.remark" :rows="5" maxlength="500"
+                :placeholder="$t('form.placeholderInput')">
+              </el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('form.signer')">
+              <el-input type="text" v-model="nickName" maxlength="50" disabled
+                :placeholder="$t('form.placeholderInput')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('form.password')" prop="qmrmm">
+              <el-input type="password" show-password v-model="formApprove.qmrmm" maxlength="20"
+                :placeholder="$t('form.placeholderInput')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="approve">{{ $t('form.confirm') }}</el-button>
+        <el-button @click="openApprove = false">{{ $t('form.cancel') }}</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { studyFormPlan_info, studyFormPlan_jcgj, studyFormPlan_qmxx, studyFormPlan_exportDetail } from "@/api/business/study/studyFormPlan"
+import { studyFormPlan_jcgjqmxxList, studyFormPlan_tb, studyFormPlan_info, studyFormPlan_jcgj, studyFormPlan_qmxx, studyFormPlan_exportDetail } from "@/api/business/study/studyFormPlan"
 import { mapGetters } from 'vuex'
 import JcgjList from "@/views/business/comps/common/JcgjList";
 import TemplateTable from '@/views/business/comps/template/TemplateTable';
-
+import moment from "moment";
+import VueHtml2pdf from 'vue-html2pdf'
 export default {
   name: "Xq",
-  components: { JcgjList, TemplateTable },
+  components: { JcgjList, TemplateTable, VueHtml2pdf },
   data() {
     return {
+      watermarkText:'',
+      opacity: 0.8,
+      watermarkOpacity: 0.8,
+      watermarkSize: 40,
+      openApprove: false,
+      formApprove: {
+        id: null,
+        qmyy: this.$t('page.business.study.studyFormPlan.cjjl'),
+        remark: '',
+        qmrmm: '',
+      },
+      rulesApprove: {
+        qmrmm: [{
+          required: true,
+          message: ' ',
+          trigger: 'blur'
+        }]
+      },
       qmxxList: [],
       totalQmxx: 0,
       loadingQmxx: true,
       queryParamsQmxx: {
         formId: null,
         pageNum: 1,
-        pageSize: 9999
+        pageSize: 5
       },
       open: false,
       showIndex: 1,
@@ -99,8 +207,12 @@ export default {
       queryParamsJcgj: {
         pageNum: 1,
         formId: null,
-        pageSize: 9999,
-      }
+        pageSize: 5,
+      },
+      showExport: false,
+      qmxxExportList: [],
+      jcgjExportList: [],
+      jcgjlxExport: 0
     }
   },
   computed: {
@@ -111,8 +223,120 @@ export default {
   created() {
   },
   methods: {
+    updateWatermark() {
+      // 创建水印背景
+      const text = this.nickName +' '+ moment().format("YYYY-MM-DD HH:mm:ss");
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+
+      // 设置canvas尺寸
+      canvas.width = 300;
+      canvas.height = 300;
+
+      // 绘制水印
+      ctx.fillStyle = `rgba(255, 0, 0,  ${this.opacity})`;
+      ctx.font = '12px Arial';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+
+      // 旋转45度
+      ctx.translate(canvas.width / 2, canvas.height / 2);
+      ctx.rotate(-45 * Math.PI / 180);
+      ctx.fillText(text, 0, 0);
+
+      // 设置为背景
+      const container = this.$refs.watermarkContainer;
+      container.style.backgroundImage = `url(${canvas.toDataURL()})`;
+      container.style.backgroundRepeat = 'repeat';
+    },
+    onProgress(progress) {
+      console.log(`生成进度: ${progress}%`)
+      this.removePageBreak()
+      if (progress == 100) {
+        this.showExport = false
+        this.$modal.closeLoading()
+      }
+    },
     exportExcel(jcgjlx) {
       this.$modal.loading()
+      this.jcgjlxExport = jcgjlx
+      this.showExport = true
+      studyFormPlan_jcgjqmxxList({ jcgjlx: jcgjlx, id: this.form.id }).then(response => {
+        this.jcgjExportList = response.data.jcgj
+        this.qmxxExportList = response.data.qmxx
+        this.updateWatermark()
+        this.$refs.jcgjExportList.init(this.jcgjExportList)
+        setTimeout(() => {
+          this.$refs.html2Pdf.generatePdf()
+        }, 200);
+      })
+    },
+    //添加水印
+    async addDynamicWatermark({ pdfContent }) {
+      return new Promise((resolve) => {
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+
+        // 获取内容区域尺寸
+        const rect = this.$refs.contentArea.getBoundingClientRect()
+        canvas.width = rect.width
+        canvas.height = rect.height
+
+        // 绘制动态水印
+        ctx.fillStyle = `rgba(100, 100, 100, ${this.watermarkOpacity})`
+        ctx.font = `${this.watermarkSize}px Arial`
+        ctx.textAlign = 'center'
+        ctx.textBaseline = 'middle'
+
+        // 计算水印密度
+        const stepX = 300
+        const stepY = 200
+
+        // 绘制倾斜水印
+        ctx.save()
+        ctx.translate(canvas.width / 2, canvas.height / 2)
+        ctx.rotate(-Math.PI / 4) // 45度倾斜
+
+        for (let x = -canvas.width; x < canvas.width * 2; x += stepX) {
+          for (let y = -canvas.height; y < canvas.height * 2; y += stepY) {
+            // 动态水印内容
+            const dynamicText = `${this.watermarkText} - ${this.getCurrentTime()}`
+            ctx.fillText(dynamicText, x, y)
+          }
+        }
+        ctx.restore()
+
+        // 创建水印层
+        const watermarkLayer = document.createElement('div')
+        watermarkLayer.className = 'watermark-layer'
+        watermarkLayer.style.cssText = `
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          background-image: url(${canvas.toDataURL('image/png')});
+          background-repeat: repeat;
+          z-index: 9999;
+        `
+
+        // 插入水印
+        this.$refs.contentArea.style.position = 'relative'
+        this.$refs.contentArea.appendChild(watermarkLayer)
+
+        // 等待渲染
+        setTimeout(() => resolve(), 100)
+      })
+    },
+    //移除分页空白
+    removePageBreak() {
+      document.querySelectorAll('.html2pdf__page-break').forEach(el => {
+        el.remove()
+      })
+    },
+    exportExcel_bak(jcgjlx) {
+      this.$modal.loading()
       studyFormPlan_exportDetail(_.merge({}, this.queryParamsJcgj, { jcgjlx: jcgjlx, lang: this.$store.getters.language.split("_")[0] })).then(response => {
         window.open(process.env.VUE_APP_FILE_DOMAIN + response.msg)
       }).finally(() => {
@@ -157,6 +381,7 @@ export default {
     show(row) {
       this.reset()
       this.$modal.loading()
+      this.formApprove.id = row.id
       this.queryParamsJcgj.formId = row.id
       this.queryParamsQmxx.formId = row.id
       studyFormPlan_info({ id: row.id }).then(response => {
@@ -167,7 +392,164 @@ export default {
       }).finally(() => {
         this.$modal.closeLoading()
       })
+    },
+    approve() {
+      this.$refs["formApprove"].validate(valid => {
+        if (valid) {
+          this.$modal.loading()
+          studyFormPlan_tb(this.formApprove).then(response => {
+            this.openApprove = false
+            this.$emit('close')
+            this.open = false
+          }).finally(() => {
+            this.$modal.closeLoading()
+          })
+        }
+      })
     }
   }
 }
 </script>
+<style scoped>
+.content-title {
+  width: 100%;
+  background: #f9f9ff;
+  font-size: 0.96rem;
+  font-weight: bold;
+  padding-left: 10px;
+  height: 40px;
+  line-height: 40px;
+  display: flex;
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.line {
+  width: 2px;
+  float: left;
+  height: 16px;
+  margin-top: 12px;
+  margin-right: 8px;
+  border-left: #3178ff 3px solid;
+}
+
+.subtitle {
+  height: 40px;
+  line-height: 40px;
+  color: #464647 !important;
+}
+
+
+.pdf-content {
+  padding: 20px;
+  font-family: Arial, sans-serif;
+
+  
+}
+#watermark-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.6;
+  font-size: 12px;
+  pointer-events: none;
+  z-index: 10;
+  color: red;
+}
+
+.pdf-content h1 {
+  color: #333;
+  border-bottom: 2px solid #4CAF50;
+  padding-bottom: 10px;
+}
+
+.pdf-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 20px;
+}
+
+.pdf-content th,
+.pdf-content td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+
+.pdf-content th {
+  background-color: #f2f2f2;
+}
+
+.datatable {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.upload-file-list .el-upload-list__item {
+  margin-bottom: 0px !important;
+}
+
+.datatable thead {
+  border-left: 1px solid #d0d0d0;
+}
+
+.datatable th {
+  padding: 5px 5px 4px 5px;
+  max-width: 200px;
+  line-height: 35px;
+  text-align: center;
+  color: #414753;
+  background: #F5F7FA;
+  border: 1px solid #d0d0d0;
+}
+
+.el-dialog__body {
+  padding: 10px 20px !important;
+}
+
+.datatable th.operate {
+  padding: 5px 5px 4px 5px;
+  width: 100px;
+  line-height: 35px;
+  background: #F5F7FA;
+  border: 1px solid #d0d0d0;
+  text-align: center;
+}
+
+.datatable .rowAlt td,
+.datatable tbody tr:nth-child(2n) td {
+  background: #F5F7FA;
+}
+
+.datatable td {
+  border: solid 1px #d0d0d0;
+  padding: 3px 5px 4px 5px;
+  max-width: 100px;
+  color: #414753;
+  line-height: 35px;
+  text-align: center;
+}
+
+.html2pdf__page-break {
+  display: none !important;
+}
+
+
+.content {
+  position: relative;
+  z-index: 1;
+}
+
+.controls {
+  margin-bottom: 20px;
+  padding: 10px;
+  background: #f5f5f5;
+}
+
+input {
+  margin: 0 10px;
+  padding: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/business/study/comp/jhbdList.vue b/src/views/business/study/comp/jhbdList.vue
index 3f07ada..ed077d8 100644
--- a/src/views/business/study/comp/jhbdList.vue
+++ b/src/views/business/study/comp/jhbdList.vue
@@ -191,7 +191,11 @@ export default {
       this.$alert(data.ffmc, '', {
         confirmButtonText: this.$t('page.business.study.studyMethod.qyd'),
         callback: action => {
-          this.$tab.openPage("loading", data.toUrl)
+          if(this.$route.path===data.toUrl){
+            this.$emit('changeTab',{key:'syff'})
+          }else{
+            this.$tab.openPage("loading", data.toUrl)
+          }
         }
       });
     },
diff --git a/src/views/business/study/comp/sqbd/Xq.vue b/src/views/business/study/comp/sqbd/Xq.vue
index e1e8b98..975e963 100644
--- a/src/views/business/study/comp/sqbd/Xq.vue
+++ b/src/views/business/study/comp/sqbd/Xq.vue
@@ -14,52 +14,89 @@
             $t('page.business.study.studyFormApply.tb') }}</el-button>
         </div>
       </div>
-      <div class="edit-content ">
-        <div class="content">
-          <div>
-            <!-- 1:流程；3：编辑；5：人员；7：修改；9：补充说明 -->
-            <el-button type="primary" @click="exportExcel(-1)">{{ $t('page.business.study.studyFormApply.dcqbjcgj') }}
-            </el-button>
-            <el-button type="primary" @click="exportExcel(1)">{{ $t('page.business.study.studyFormApply.dclcjcgj') }}
-            </el-button>
-            <el-button type="primary" @click="exportExcel(3)">{{ $t('page.business.study.studyFormApply.dcbjjcgj') }}
-            </el-button>
-            <el-button type="primary" @click="exportExcel(7)">{{ $t('page.business.study.studyFormApply.dcxgjcgj') }}
-            </el-button>
-            <el-button type="primary" @click="exportExcel(999)">{{ $t('page.business.study.studyFormApply.dcbhsjgj') }}
-            </el-button>
-          </div>
-          <TemplateTable ref="templateTable" :sn="form.templateSn" :templateData="form" fillType="audit" />
-          <div class="content-title">
-            <div class="line"></div>
-            <div class="subtitle"> {{ $t('page.business.study.studyFormApply.qmxx') }}</div>
-          </div>
-          <div class="pal">
-            <el-table :data="qmxxList" v-loading="loadingQmxx">
-              <el-table-column :label="$t('page.business.study.studyFormApply.qmr')" align="center" prop="qmrMc"
-                width="150px" />
-              <el-table-column :label="$t('page.business.study.studyFormApply.qmyy')" align="center"
-                :prop="$i18n.locale === 'zh_CN' ? 'qmyy' : 'qmyyEn'" width="150px" />
-              <el-table-column :label="$t('page.business.study.studyFormApply.qmsj')" align="center" prop="createTime"
-                width="150px" />
-              <el-table-column :label="$t('page.business.study.studyFormApply.bzyy')" align="center" prop="remark"
-                :show-overflow-tooltip="true" />
-            </el-table>
-          </div>
-          <div class="pal">
-            <pagination v-show="totalQmxx > 0" :total="totalQmxx" :page.sync="queryParamsQmxx.pageNum"
+      <!-- 1:流程；3：编辑；5：人员；7：修改；9：补充说明 -->
+      <el-button type="primary" @click="exportExcel(-1)">{{ $t('page.business.study.studyFormApply.dcqbjcgj') }}
+      </el-button>
+      <el-button type="primary" @click="exportExcel(1)">{{ $t('page.business.study.studyFormApply.dclcjcgj') }}
+      </el-button>
+      <el-button type="primary" @click="exportExcel(3)">{{ $t('page.business.study.studyFormApply.dcbjjcgj') }}
+      </el-button>
+      <el-button type="primary" @click="exportExcel(7)">{{ $t('page.business.study.studyFormApply.dcxgjcgj') }}
+      </el-button>
+      <el-button type="primary" @click="exportExcel(999)">{{ $t('page.business.study.studyFormApply.dcbhsjgj') }}
+      </el-button>
+      <div class="edit-content">
+        <div class="detail-content" style="width: 100%; height: 100%;">
+          <vue-html2pdf :show-layout="true" pdf-content-width="100%" :pdf-format="form.templatePdfSize" :pdf-quality="2"
+            :float-layout="false" pdf-orientation="landscape" :paginate-elements-by-height="0" :enable-download="true"
+            :preview-modal="false" :filename="form.bdmc" @beforeDownload="addDynamicWatermark" ref="html2Pdf"
+            @progress="onProgress">
+            <section slot="pdf-content">
+              <div class="pdf-content">
+                <TemplateTable ref="templateTable" :sn="form.templateSn" :templateData="form" fillType="detail" />
+                <div v-if="showExport" style="width: 100%; padding: 0px 30px ;">
+                  <div class="content-title" style="margin-bottom: 10px;">
+                    <div class="line"></div>
+                    <div class="subtitle"> {{ $t('page.business.study.studyFormApply.qmxx') }}</div>
+                  </div>
+                  <table class="datatable">
+                    <thead>
+                      <tr>
+                        <th style="width: 20%;">{{ $t('page.business.study.studyFormApply.qmr') }}</th>
+                        <th style="width: 20%;">{{ $t('page.business.study.studyFormApply.qmyy') }}</th>
+                        <th style="width: 20%;">{{ $t('page.business.study.studyFormApply.qmsj') }}</th>
+                        <th style="width: 40%;">{{ $t('page.business.study.studyFormApply.bzyy') }}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr v-for="(item, index) in qmxxExportList" :key="index">
+                        <td>{{ item.qmrMc }}</td>
+                        <td>{{ $i18n.locale === 'zh_CN' ? item.qmyy : item.qmyyEn }}</td>
+                        <td>{{ item.createTime }}</td>
+                        <td>{{ item.remark }}</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                  <div class="content-title" style="margin-top: 10px;" v-show="jcgjlxExport != 999">
+                    <div class="line"></div>
+                    <div class="subtitle"> {{ $t('page.business.study.studyFormApply.jcgj') }}</div>
+                  </div>
+                  <JcgjList ref="jcgjExportList" :readonly="true" v-show="jcgjlxExport != 999" />
+                </div>
+              </div>
+              <div v-if="showExport" id="watermark-overlay"  ref="watermarkContainer" :style="{
+                '--watermark-text': `'${watermarkText}'`,
+                '--watermark-opacity': opacity,
+                '--watermark-size': '14px',
+                '--watermark-color': 'red'
+              }"></div>
+            </section>
+          </vue-html2pdf>
+          <div style="padding: 0px 20px 0px 30px;margin-left: 10px;">
+            <div class="content-title">
+              <div class="line"></div>
+              <div class="subtitle"> {{ $t('page.business.study.studyFormApply.qmxx') }}</div>
+            </div>
+            <div class="pal">
+              <el-table :data="qmxxList" v-loading="loadingQmxx" style="width: 100%;">
+                <el-table-column :label="$t('page.business.study.studyFormApply.qmr')" align="center" prop="qmrMc" />
+                <el-table-column :label="$t('page.business.study.studyFormApply.qmyy')" align="center"
+                  :prop="$i18n.locale === 'zh_CN' ? 'qmyy' : 'qmyyEn'" />
+                <el-table-column :label="$t('page.business.study.studyFormApply.qmsj')" align="center"
+                  prop="createTime" />
+                <el-table-column :label="$t('page.business.study.studyFormApply.bzyy')" align="center" prop="remark" />
+              </el-table>
+            </div>
+            <pagination v small layout="prev, pager, next" :total="totalQmxx" :page.sync="queryParamsQmxx.pageNum"
               :limit.sync="queryParamsQmxx.pageSize" @pagination="getQmxxList" />
+            <div class="content-title" style="margin-top: 10px;">
+              <div class="line"></div>
+              <div class="subtitle"> {{ $t('page.business.study.studyFormApply.jcgj') }}</div>
+            </div>
+            <JcgjList ref="jcgjList" @handleQuery="getJjcgjList" :showXg="true" />
+            <pagination v small layout="prev, pager, next" :total="jcgjTotal" @pagination="getJjcgjList" />
           </div>
-          <div class="content-title">
-            <div class="line"></div>
-            <div class="subtitle"> {{ $t('page.business.study.studyFormApply.jcgj') }}</div>
-          </div>
-          <JcgjList ref="jcgjList" @handleQuery="getJjcgjList" :showXg="true" />
-
-          <pagination v-show="jcgjTotal > 0" small layout="prev, pager, next" :total="jcgjTotal"
-            @pagination="getJjcgjList" />
         </div>
-
       </div>
     </div>
 
@@ -97,8 +134,7 @@
         <el-row>
           <el-col :span="24">
             <el-form-item :label="$t('form.password')" prop="qmrmm">
-              <div class="sbzdtcma"> <input type="text"></div>
-              <el-input type="password" show-password  v-model="formApprove.qmrmm" maxlength="20"
+              <el-input type="password" show-password v-model="formApprove.qmrmm" maxlength="20"
                 :placeholder="$t('form.placeholderInput')" />
             </el-form-item>
           </el-col>
@@ -113,18 +149,22 @@
 </template>
 
 <script>
-import { studyFormApply_tb, studyFormApply_info, studyFormApply_jcgj, studyFormApply_qmxx, studyFormApply_exportDetail } from "@/api/business/study/studyFormApply"
+import { studyFormApply_jcgjqmxxList, studyFormApply_tb, studyFormApply_info, studyFormApply_jcgj, studyFormApply_qmxx, studyFormApply_exportDetail } from "@/api/business/study/studyFormApply"
 import { mapGetters } from 'vuex'
 import JcgjList from "@/views/business/comps/common/JcgjList";
 import TemplateTable from '@/views/business/comps/template/TemplateTable';
-
+import moment from "moment";
+import VueHtml2pdf from 'vue-html2pdf'
 export default {
   name: "Xq",
-  components: { JcgjList, TemplateTable },
+  components: { JcgjList, TemplateTable, VueHtml2pdf },
   data() {
     return {
+      watermarkText:'',
+      opacity: 0.8,
+      watermarkOpacity: 0.8,
+      watermarkSize: 40,
       openApprove: false,
-      open: false,
       formApprove: {
         id: null,
         qmyy: this.$t('page.business.study.studyFormApply.cjjl'),
@@ -144,7 +184,7 @@ export default {
       queryParamsQmxx: {
         formId: null,
         pageNum: 1,
-        pageSize: 9999
+        pageSize: 5
       },
       open: false,
       showIndex: 1,
@@ -167,8 +207,12 @@ export default {
       queryParamsJcgj: {
         pageNum: 1,
         formId: null,
-        pageSize: 9999,
-      }
+        pageSize: 5,
+      },
+      showExport: false,
+      qmxxExportList: [],
+      jcgjExportList: [],
+      jcgjlxExport: 0
     }
   },
   computed: {
@@ -179,11 +223,122 @@ export default {
   created() {
   },
   methods: {
+    updateWatermark() {
+      // 创建水印背景
+      const text = this.nickName +' '+ moment().format("YYYY-MM-DD HH:mm:ss");
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+
+      // 设置canvas尺寸
+      canvas.width = 300;
+      canvas.height = 300;
+
+      // 绘制水印
+      ctx.fillStyle = `rgba(255, 0, 0,  ${this.opacity})`;
+      ctx.font = '12px Arial';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+
+      // 旋转45度
+      ctx.translate(canvas.width / 2, canvas.height / 2);
+      ctx.rotate(-45 * Math.PI / 180);
+      ctx.fillText(text, 0, 0);
+
+      // 设置为背景
+      const container = this.$refs.watermarkContainer;
+      container.style.backgroundImage = `url(${canvas.toDataURL()})`;
+      container.style.backgroundRepeat = 'repeat';
+    },
+    onProgress(progress) {
+      console.log(`生成进度: ${progress}%`)
+      this.removePageBreak()
+      if (progress == 100) {
+        this.showExport = false
+        this.$modal.closeLoading()
+      }
+    },
     exportExcel(jcgjlx) {
       this.$modal.loading()
+      this.jcgjlxExport = jcgjlx
+      this.showExport = true
+      studyFormApply_jcgjqmxxList({ jcgjlx: jcgjlx, id: this.form.id }).then(response => {
+        this.jcgjExportList = response.data.jcgj
+        this.qmxxExportList = response.data.qmxx
+        this.updateWatermark()
+        this.$refs.jcgjExportList.init(this.jcgjExportList)
+        setTimeout(() => {
+          this.$refs.html2Pdf.generatePdf()
+        }, 200);
+      })
+    },
+    //添加水印
+    async addDynamicWatermark({ pdfContent }) {
+      return new Promise((resolve) => {
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+
+        // 获取内容区域尺寸
+        const rect = this.$refs.contentArea.getBoundingClientRect()
+        canvas.width = rect.width
+        canvas.height = rect.height
+
+        // 绘制动态水印
+        ctx.fillStyle = `rgba(100, 100, 100, ${this.watermarkOpacity})`
+        ctx.font = `${this.watermarkSize}px Arial`
+        ctx.textAlign = 'center'
+        ctx.textBaseline = 'middle'
+
+        // 计算水印密度
+        const stepX = 300
+        const stepY = 200
+
+        // 绘制倾斜水印
+        ctx.save()
+        ctx.translate(canvas.width / 2, canvas.height / 2)
+        ctx.rotate(-Math.PI / 4) // 45度倾斜
+
+        for (let x = -canvas.width; x < canvas.width * 2; x += stepX) {
+          for (let y = -canvas.height; y < canvas.height * 2; y += stepY) {
+            // 动态水印内容
+            const dynamicText = `${this.watermarkText} - ${this.getCurrentTime()}`
+            ctx.fillText(dynamicText, x, y)
+          }
+        }
+        ctx.restore()
+
+        // 创建水印层
+        const watermarkLayer = document.createElement('div')
+        watermarkLayer.className = 'watermark-layer'
+        watermarkLayer.style.cssText = `
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          background-image: url(${canvas.toDataURL('image/png')});
+          background-repeat: repeat;
+          z-index: 9999;
+        `
+
+        // 插入水印
+        this.$refs.contentArea.style.position = 'relative'
+        this.$refs.contentArea.appendChild(watermarkLayer)
+
+        // 等待渲染
+        setTimeout(() => resolve(), 100)
+      })
+    },
+    //移除分页空白
+    removePageBreak() {
+      document.querySelectorAll('.html2pdf__page-break').forEach(el => {
+        el.remove()
+      })
+    },
+    exportExcel_bak(jcgjlx) {
+      this.$modal.loading()
       studyFormApply_exportDetail(_.merge({}, this.queryParamsJcgj, { jcgjlx: jcgjlx, lang: this.$store.getters.language.split("_")[0] })).then(response => {
         window.open(process.env.VUE_APP_FILE_DOMAIN + response.msg)
-        this.$modal.closeLoading()
       }).finally(() => {
         this.$modal.closeLoading()
       })
@@ -194,7 +349,6 @@ export default {
         this.jcgjList = response.rows
         this.jcgjTotal = response.total
         this.$refs.jcgjList.init(this.jcgjList)
-        this.$modal.closeLoading()
       }).finally(() => {
         this.$modal.closeLoading()
       })
@@ -256,3 +410,146 @@ export default {
   }
 }
 </script>
+<style scoped>
+.content-title {
+  width: 100%;
+  background: #f9f9ff;
+  font-size: 0.96rem;
+  font-weight: bold;
+  padding-left: 10px;
+  height: 40px;
+  line-height: 40px;
+  display: flex;
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.line {
+  width: 2px;
+  float: left;
+  height: 16px;
+  margin-top: 12px;
+  margin-right: 8px;
+  border-left: #3178ff 3px solid;
+}
+
+.subtitle {
+  height: 40px;
+  line-height: 40px;
+  color: #464647 !important;
+}
+
+
+.pdf-content {
+  padding: 20px;
+  font-family: Arial, sans-serif;
+
+  
+}
+#watermark-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.6;
+  font-size: 12px;
+  pointer-events: none;
+  z-index: 10;
+  color: red;
+}
+
+.pdf-content h1 {
+  color: #333;
+  border-bottom: 2px solid #4CAF50;
+  padding-bottom: 10px;
+}
+
+.pdf-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 20px;
+}
+
+.pdf-content th,
+.pdf-content td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+
+.pdf-content th {
+  background-color: #f2f2f2;
+}
+
+.datatable {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.upload-file-list .el-upload-list__item {
+  margin-bottom: 0px !important;
+}
+
+.datatable thead {
+  border-left: 1px solid #d0d0d0;
+}
+
+.datatable th {
+  padding: 5px 5px 4px 5px;
+  max-width: 200px;
+  line-height: 35px;
+  text-align: center;
+  color: #414753;
+  background: #F5F7FA;
+  border: 1px solid #d0d0d0;
+}
+
+.el-dialog__body {
+  padding: 10px 20px !important;
+}
+
+.datatable th.operate {
+  padding: 5px 5px 4px 5px;
+  width: 100px;
+  line-height: 35px;
+  background: #F5F7FA;
+  border: 1px solid #d0d0d0;
+  text-align: center;
+}
+
+.datatable .rowAlt td,
+.datatable tbody tr:nth-child(2n) td {
+  background: #F5F7FA;
+}
+
+.datatable td {
+  border: solid 1px #d0d0d0;
+  padding: 3px 5px 4px 5px;
+  max-width: 100px;
+  color: #414753;
+  line-height: 35px;
+  text-align: center;
+}
+
+.html2pdf__page-break {
+  display: none !important;
+}
+
+
+.content {
+  position: relative;
+  z-index: 1;
+}
+
+.controls {
+  margin-bottom: 20px;
+  padding: 10px;
+  background: #f5f5f5;
+}
+
+input {
+  margin: 0 10px;
+  padding: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/business/study/comp/syxx.vue b/src/views/business/study/comp/syxx.vue
index ac1edb7..0816e04 100644
--- a/src/views/business/study/comp/syxx.vue
+++ b/src/views/business/study/comp/syxx.vue
@@ -50,7 +50,7 @@
       </div>
     </div>
     <div class="syxx-content" v-if="studyInfo.id&&studyInfo.id!=''">
-      <jhbdList :study="studyInfo" @showDetail="showDetailCallback" />
+      <jhbdList :study="studyInfo" @showDetail="showDetailCallback" @changeTab="changeTab" />
     </div>
 
     <Sign ref="syxxSignRef" @callback="doSign" />
@@ -147,6 +147,9 @@ export default {
     showDetailCallback(val) {
       this.showDetail = val
       this.$emit('showDetail', val)
+    },
+    changeTab(val){
+      this.$emit('changeTab',val)
     }
   }
 }
diff --git a/src/views/business/study/comp/tbbd.vue b/src/views/business/study/comp/tbbd.vue
index 811394e..bf0a3aa 100644
--- a/src/views/business/study/comp/tbbd.vue
+++ b/src/views/business/study/comp/tbbd.vue
@@ -4,7 +4,7 @@
       <sbject :study="study" @change="changeSubject" />
     </div>
     <div class="tbbd-right" v-if="studyInfo.studySubjectId!='' && studyInfo.studySubjectId!=undefined">
-      <tbbdList :study="studyInfo" @showDetail="showDetailCallback"/>
+      <tbbdList :study="studyInfo" @showDetail="showDetailCallback" @changeTab="changeTab"/>
     </div>
   </div>
 </template>
@@ -50,6 +50,9 @@ export default {
     showDetailCallback(val){
       this.showDetail=val
       this.$emit('showDetail',val)
+    },
+    changeTab(val){
+      this.$emit('changeTab',val)
     }
   }
 }
diff --git a/src/views/business/study/comp/tbbd/Xq.vue b/src/views/business/study/comp/tbbd/Xq.vue
index 5918421..8bc6428 100644
--- a/src/views/business/study/comp/tbbd/Xq.vue
+++ b/src/views/business/study/comp/tbbd/Xq.vue
@@ -25,48 +25,77 @@
       </el-button>
       <el-button type="primary" @click="exportExcel(999)">{{ $t('page.business.study.studyFormFill.dcbhsjgj') }}
       </el-button>
-      <div class="edit-content ">
-        <div class="content" style="width: 100%; height: 100%;">
-          <vue-html2pdf :show-layout="false" pdf-content-width="100%" :pdf-format="form.templatePdfSize"
-            :pdf-quality="2" :float-layout="false" pdf-orientation="landscape" :paginate-elements-by-height="794"
-            :enable-download="true" :preview-modal="true" ref="html2Pdf" @progress="onProgress">
+      <div class="edit-content">
+        <div class="detail-content" style="width: 100%; height: 100%;">
+          <vue-html2pdf :show-layout="true" pdf-content-width="100%" :pdf-format="form.templatePdfSize" :pdf-quality="2"
+            :float-layout="false" pdf-orientation="landscape" :paginate-elements-by-height="0" :enable-download="true"
+            :preview-modal="false" :filename="form.bdmc" @beforeDownload="addDynamicWatermark" ref="html2Pdf"
+            @progress="onProgress">
             <section slot="pdf-content">
               <div class="pdf-content">
                 <TemplateTable ref="templateTable" :sn="form.templateSn" :templateData="form" fillType="detail" />
-                <div class="content-title">
-                  <div class="line"></div>
-                  <div class="subtitle"> {{ $t('page.business.study.studyFormFill.qmxx') }}</div>
-                </div>
-                <template v-if="!showExport">
-                  <div class="pal">
-                    <el-table :data="qmxxList" v-loading="loadingQmxx">
-                      <el-table-column :label="$t('page.business.study.studyFormFill.qmr')" align="center" prop="qmrMc"
-                        width="150px" />
-                      <el-table-column :label="$t('page.business.study.studyFormFill.qmyy')" align="center"
-                        :prop="$i18n.locale === 'zh_CN' ? 'qmyy' : 'qmyyEn'" width="150px" />
-                      <el-table-column :label="$t('page.business.study.studyFormFill.qmsj')" align="center"
-                        prop="createTime" width="150px" />
-                      <el-table-column :label="$t('page.business.study.studyFormFill.bzyy')" align="center"
-                        prop="remark" :show-overflow-tooltip="true" />
-                    </el-table>
+                <div v-if="showExport" style="width: 100%; padding: 0px 30px ;">
+                  <div class="content-title" style="margin-bottom: 10px;">
+                    <div class="line"></div>
+                    <div class="subtitle"> {{ $t('page.business.study.studyFormFill.qmxx') }}</div>
                   </div>
-                  <div class="pal" v-if="showExport">
-                    <pagination v-show="totalQmxx > 0" :total="totalQmxx" :page.sync="queryParamsQmxx.pageNum"
-                      :limit.sync="queryParamsQmxx.pageSize" @pagination="getQmxxList" />
+                  <table class="datatable">
+                    <thead>
+                      <tr>
+                        <th style="width: 20%;">{{ $t('page.business.study.studyFormFill.qmr') }}</th>
+                        <th style="width: 20%;">{{ $t('page.business.study.studyFormFill.qmyy') }}</th>
+                        <th style="width: 20%;">{{ $t('page.business.study.studyFormFill.qmsj') }}</th>
+                        <th style="width: 40%;">{{ $t('page.business.study.studyFormFill.bzyy') }}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr v-for="(item, index) in qmxxExportList" :key="index">
+                        <td>{{ item.qmrMc }}</td>
+                        <td>{{ $i18n.locale === 'zh_CN' ? item.qmyy : item.qmyyEn }}</td>
+                        <td>{{ item.createTime }}</td>
+                        <td>{{ item.remark }}</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                  <div class="content-title" style="margin-top: 10px;" v-show="jcgjlxExport != 999">
+                    <div class="line"></div>
+                    <div class="subtitle"> {{ $t('page.business.study.studyFormFill.jcgj') }}</div>
                   </div>
-                </template>
-                <div class="content-title">
-                  <div class="line"></div>
-                  <div class="subtitle"> {{ $t('page.business.study.studyFormFill.jcgj') }}</div>
+                  <JcgjList ref="jcgjExportList" :readonly="true" v-show="jcgjlxExport != 999" />
                 </div>
-                <template v-if="!showExport">
-                  <JcgjList ref="jcgjList" @handleQuery="getJjcgjList" :showXg="true" />
-                  <pagination v-show="jcgjTotal > 0" small layout="prev, pager, next" :total="jcgjTotal"
-                    @pagination="getJjcgjList" />
-                </template>
               </div>
+              <div v-if="showExport" id="watermark-overlay"  ref="watermarkContainer" :style="{
+                '--watermark-text': `'${watermarkText}'`,
+                '--watermark-opacity': opacity,
+                '--watermark-size': '14px',
+                '--watermark-color': 'red'
+              }"></div>
             </section>
           </vue-html2pdf>
+          <div style="padding: 0px 20px 0px 30px;margin-left: 10px;">
+            <div class="content-title">
+              <div class="line"></div>
+              <div class="subtitle"> {{ $t('page.business.study.studyFormFill.qmxx') }}</div>
+            </div>
+            <div class="pal">
+              <el-table :data="qmxxList" v-loading="loadingQmxx" style="width: 100%;">
+                <el-table-column :label="$t('page.business.study.studyFormFill.qmr')" align="center" prop="qmrMc" />
+                <el-table-column :label="$t('page.business.study.studyFormFill.qmyy')" align="center"
+                  :prop="$i18n.locale === 'zh_CN' ? 'qmyy' : 'qmyyEn'" />
+                <el-table-column :label="$t('page.business.study.studyFormFill.qmsj')" align="center"
+                  prop="createTime" />
+                <el-table-column :label="$t('page.business.study.studyFormFill.bzyy')" align="center" prop="remark" />
+              </el-table>
+            </div>
+            <pagination v small layout="prev, pager, next" :total="totalQmxx" :page.sync="queryParamsQmxx.pageNum"
+              :limit.sync="queryParamsQmxx.pageSize" @pagination="getQmxxList" />
+            <div class="content-title" style="margin-top: 10px;">
+              <div class="line"></div>
+              <div class="subtitle"> {{ $t('page.business.study.studyFormFill.jcgj') }}</div>
+            </div>
+            <JcgjList ref="jcgjList" @handleQuery="getJjcgjList" :showXg="true" />
+            <pagination v small layout="prev, pager, next" :total="jcgjTotal" @pagination="getJjcgjList" />
+          </div>
         </div>
       </div>
     </div>
@@ -120,16 +149,21 @@
 </template>
 
 <script>
-import { studyFormFill_tb, studyFormFill_info, studyFormFill_jcgj, studyFormFill_qmxx, studyFormFill_exportDetail } from "@/api/business/study/studyFormFill"
+import { studyFormFill_jcgjqmxxList, studyFormFill_tb, studyFormFill_info, studyFormFill_jcgj, studyFormFill_qmxx, studyFormFill_exportDetail } from "@/api/business/study/studyFormFill"
 import { mapGetters } from 'vuex'
 import JcgjList from "@/views/business/comps/common/JcgjList";
 import TemplateTable from '@/views/business/comps/template/TemplateTable';
+import moment from "moment";
 import VueHtml2pdf from 'vue-html2pdf'
 export default {
   name: "Xq",
   components: { JcgjList, TemplateTable, VueHtml2pdf },
   data() {
     return {
+      watermarkText:'',
+      opacity: 0.8,
+      watermarkOpacity: 0.8,
+      watermarkSize: 40,
       openApprove: false,
       formApprove: {
         id: null,
@@ -150,7 +184,7 @@ export default {
       queryParamsQmxx: {
         formId: null,
         pageNum: 1,
-        pageSize: 9999
+        pageSize: 5
       },
       open: false,
       showIndex: 1,
@@ -173,9 +207,12 @@ export default {
       queryParamsJcgj: {
         pageNum: 1,
         formId: null,
-        pageSize: 9999,
+        pageSize: 5,
       },
       showExport: false,
+      qmxxExportList: [],
+      jcgjExportList: [],
+      jcgjlxExport: 0
     }
   },
   computed: {
@@ -186,18 +223,117 @@ export default {
   created() {
   },
   methods: {
+    updateWatermark() {
+      // 创建水印背景
+      const text = this.nickName +' '+ moment().format("YYYY-MM-DD HH:mm:ss");
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+
+      // 设置canvas尺寸
+      canvas.width = 300;
+      canvas.height = 300;
+
+      // 绘制水印
+      ctx.fillStyle = `rgba(255, 0, 0,  ${this.opacity})`;
+      ctx.font = '12px Arial';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+
+      // 旋转45度
+      ctx.translate(canvas.width / 2, canvas.height / 2);
+      ctx.rotate(-45 * Math.PI / 180);
+      ctx.fillText(text, 0, 0);
+
+      // 设置为背景
+      const container = this.$refs.watermarkContainer;
+      container.style.backgroundImage = `url(${canvas.toDataURL()})`;
+      container.style.backgroundRepeat = 'repeat';
+    },
     onProgress(progress) {
       console.log(`生成进度: ${progress}%`)
+      this.removePageBreak()
       if (progress == 100) {
+        this.showExport = false
         this.$modal.closeLoading()
       }
     },
     exportExcel(jcgjlx) {
       this.$modal.loading()
+      this.jcgjlxExport = jcgjlx
       this.showExport = true
-      setTimeout(() => {
-        this.$refs.html2Pdf.generatePdf()
-      }, 200);
+      studyFormFill_jcgjqmxxList({ jcgjlx: jcgjlx, id: this.form.id }).then(response => {
+        this.jcgjExportList = response.data.jcgj
+        this.qmxxExportList = response.data.qmxx
+        this.updateWatermark()
+        this.$refs.jcgjExportList.init(this.jcgjExportList)
+        setTimeout(() => {
+          this.$refs.html2Pdf.generatePdf()
+        }, 200);
+      })
+    },
+    //添加水印
+    async addDynamicWatermark({ pdfContent }) {
+      return new Promise((resolve) => {
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+
+        // 获取内容区域尺寸
+        const rect = this.$refs.contentArea.getBoundingClientRect()
+        canvas.width = rect.width
+        canvas.height = rect.height
+
+        // 绘制动态水印
+        ctx.fillStyle = `rgba(100, 100, 100, ${this.watermarkOpacity})`
+        ctx.font = `${this.watermarkSize}px Arial`
+        ctx.textAlign = 'center'
+        ctx.textBaseline = 'middle'
+
+        // 计算水印密度
+        const stepX = 300
+        const stepY = 200
+
+        // 绘制倾斜水印
+        ctx.save()
+        ctx.translate(canvas.width / 2, canvas.height / 2)
+        ctx.rotate(-Math.PI / 4) // 45度倾斜
+
+        for (let x = -canvas.width; x < canvas.width * 2; x += stepX) {
+          for (let y = -canvas.height; y < canvas.height * 2; y += stepY) {
+            // 动态水印内容
+            const dynamicText = `${this.watermarkText} - ${this.getCurrentTime()}`
+            ctx.fillText(dynamicText, x, y)
+          }
+        }
+        ctx.restore()
+
+        // 创建水印层
+        const watermarkLayer = document.createElement('div')
+        watermarkLayer.className = 'watermark-layer'
+        watermarkLayer.style.cssText = `
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          background-image: url(${canvas.toDataURL('image/png')});
+          background-repeat: repeat;
+          z-index: 9999;
+        `
+
+        // 插入水印
+        this.$refs.contentArea.style.position = 'relative'
+        this.$refs.contentArea.appendChild(watermarkLayer)
+
+        // 等待渲染
+        setTimeout(() => resolve(), 100)
+      })
+    },
+    //移除分页空白
+    removePageBreak() {
+      document.querySelectorAll('.html2pdf__page-break').forEach(el => {
+        el.remove()
+      })
     },
     exportExcel_bak(jcgjlx) {
       this.$modal.loading()
@@ -275,9 +411,52 @@ export default {
 }
 </script>
 <style scoped>
+.content-title {
+  width: 100%;
+  background: #f9f9ff;
+  font-size: 0.96rem;
+  font-weight: bold;
+  padding-left: 10px;
+  height: 40px;
+  line-height: 40px;
+  display: flex;
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.line {
+  width: 2px;
+  float: left;
+  height: 16px;
+  margin-top: 12px;
+  margin-right: 8px;
+  border-left: #3178ff 3px solid;
+}
+
+.subtitle {
+  height: 40px;
+  line-height: 40px;
+  color: #464647 !important;
+}
+
+
 .pdf-content {
   padding: 20px;
   font-family: Arial, sans-serif;
+
+  
+}
+#watermark-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.6;
+  font-size: 12px;
+  pointer-events: none;
+  z-index: 10;
+  color: red;
 }
 
 .pdf-content h1 {
@@ -302,4 +481,75 @@ export default {
 .pdf-content th {
   background-color: #f2f2f2;
 }
+
+.datatable {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.upload-file-list .el-upload-list__item {
+  margin-bottom: 0px !important;
+}
+
+.datatable thead {
+  border-left: 1px solid #d0d0d0;
+}
+
+.datatable th {
+  padding: 5px 5px 4px 5px;
+  max-width: 200px;
+  line-height: 35px;
+  text-align: center;
+  color: #414753;
+  background: #F5F7FA;
+  border: 1px solid #d0d0d0;
+}
+
+.el-dialog__body {
+  padding: 10px 20px !important;
+}
+
+.datatable th.operate {
+  padding: 5px 5px 4px 5px;
+  width: 100px;
+  line-height: 35px;
+  background: #F5F7FA;
+  border: 1px solid #d0d0d0;
+  text-align: center;
+}
+
+.datatable .rowAlt td,
+.datatable tbody tr:nth-child(2n) td {
+  background: #F5F7FA;
+}
+
+.datatable td {
+  border: solid 1px #d0d0d0;
+  padding: 3px 5px 4px 5px;
+  max-width: 100px;
+  color: #414753;
+  line-height: 35px;
+  text-align: center;
+}
+
+.html2pdf__page-break {
+  display: none !important;
+}
+
+
+.content {
+  position: relative;
+  z-index: 1;
+}
+
+.controls {
+  margin-bottom: 20px;
+  padding: 10px;
+  background: #f5f5f5;
+}
+
+input {
+  margin: 0 10px;
+  padding: 8px;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/business/study/comp/tbbdList.vue b/src/views/business/study/comp/tbbdList.vue
index 80f13e5..80e6cef 100644
--- a/src/views/business/study/comp/tbbdList.vue
+++ b/src/views/business/study/comp/tbbdList.vue
@@ -386,7 +386,11 @@ export default {
       this.$alert(data.ffmc, '', {
         confirmButtonText: this.$t('page.business.study.studyMethod.qyd'),
         callback: action => {
-          this.$tab.openPage("loading", data.toUrl)
+          if(this.$route.path===data.toUrl){
+            this.$emit('changeTab',{key:'syff'})
+          }else{
+            this.$tab.openPage("loading", data.toUrl)
+          }
         }
       });
     },
diff --git a/src/views/business/study/comp/ytbd.vue b/src/views/business/study/comp/ytbd.vue
index b24978f..509b3b6 100644
--- a/src/views/business/study/comp/ytbd.vue
+++ b/src/views/business/study/comp/ytbd.vue
@@ -4,7 +4,7 @@
       <sbject :study="study" :operate="true" @change="changeSubject" />
     </div>
     <div class="ytbd-right" v-if="studyInfo.studySubjectId!='' && studyInfo.studySubjectId!=undefined">
-      <ytbdList :study="studyInfo" @showDetail="showDetailCallback"/>
+      <ytbdList :study="studyInfo" @showDetail="showDetailCallback" @changeTab="changeTab"/>
     </div>
   </div>
 </template>
@@ -50,6 +50,9 @@ export default {
     showDetailCallback(val){
       this.showDetail=val
       this.$emit('showDetail',val)
+    },
+    changeTab(val){
+      this.$emit('changeTab',val)
     }
   }
 }
diff --git a/src/views/business/study/comp/ytbd/Bj.vue b/src/views/business/study/comp/ytbd/Bj.vue
index fea8fb0..3b12144 100644
--- a/src/views/business/study/comp/ytbd/Bj.vue
+++ b/src/views/business/study/comp/ytbd/Bj.vue
@@ -166,11 +166,11 @@ export default {
           message: this.$t('form.placeholderSelect'),
           trigger: 'blur'
         }],
-        shryId: [{
-          required: true,
-          message: ' ',
-          trigger: 'blur'
-        }]
+        // shryId: [{
+        //   required: true,
+        //   message: ' ',
+        //   trigger: 'blur'
+        // }]
       },
       rules: {
         bdmc: [{
diff --git a/src/views/business/study/comp/ytbdList.vue b/src/views/business/study/comp/ytbdList.vue
index 0dceee1..0200a03 100644
--- a/src/views/business/study/comp/ytbdList.vue
+++ b/src/views/business/study/comp/ytbdList.vue
@@ -369,7 +369,12 @@ export default {
       this.$alert(data.ffmc, '', {
         confirmButtonText: this.$t('page.business.study.studyMethod.qyd'),
         callback: action => {
-          this.$tab.openPage("loading", data.toUrl)
+          debugger
+          if(this.$route.path===data.toUrl){
+            this.$emit('changeTab',{key:'syff'})
+          }else{
+            this.$tab.openPage("loading", data.toUrl)
+          }
         }
       });
     },
diff --git a/src/views/business/systemLog/comp/czrz.vue b/src/views/business/systemLog/comp/czrz.vue
new file mode 100644
index 0000000..dc2589b
--- /dev/null
+++ b/src/views/business/systemLog/comp/czrz.vue
@@ -0,0 +1,187 @@
+<template>
+<div class="system-log-list">
+  <div class="ytbd-search">
+    <el-form :model="searchForm" ref="searchForm" :inline="true" label-width="80px">
+      <el-form-item :label="$t('page.system.systemLog.czr')" prop="qmrMc">
+        <el-input v-model="searchForm.qmrMc" :placeholder="$t('form.placeholderInput')" clearable
+          style="width: 150px" />
+      </el-form-item>
+      <el-form-item :label="$t('page.system.systemLog.czsj')">
+          <el-date-picker v-model="daterange" clearable type="daterange" range-separator="-" :start-placeholder="$t('page.business.study.study.startDate')"
+            :end-placeholder="$t('page.business.study.study.endDate')" value-format="yyyy-MM-dd" @change="search" style="width: 200px" />
+        </el-form-item>
+      <el-form-item prop="jcmc" :label="$t('page.system.systemLog.czlx')">
+        <el-select
+          v-model="searchForm.jcmc"
+          :placeholder="$t('form.placeholderSelect')"
+          clearable
+          style="width: 150px"
+          @change="search"
+        >
+          <el-option :label="$t('page.business.study.study.sqgd')" :value="$t('page.business.study.study.sqgd')" />
+          <el-option :label="$t('page.business.study.study.tygd')" :value="$t('page.business.study.study.tygd')" />
+          <el-option :label="$t('page.business.study.study.jjgd')" :value="$t('page.business.study.study.jjgd')" />
+          <el-option :label="$t('page.business.study.study.sqjd')" :value="$t('page.business.study.study.sqjd')" />
+          <el-option :label="$t('page.business.study.study.tyjd')" :value="$t('page.business.study.study.tyjd')" />
+          <el-option :label="$t('page.business.study.study.jjjd')" :value="$t('page.business.study.study.jjjd')" />
+          <el-option :label="$t('page.business.study.study.sqjy')" :value="$t('page.business.study.study.sqjy')" />
+          <el-option :label="$t('page.business.study.study.tyjy')" :value="$t('page.business.study.study.tyjy')" />
+          <el-option :label="$t('page.business.study.study.jjjy')" :value="$t('page.business.study.study.jjjy')" />
+          <el-option :label="$t('page.business.study.study.qrgh')" :value="$t('page.business.study.study.qrgh')" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item :label="$t('page.system.systemLog.czxq')" prop="jcnr">
+        <el-input v-model="searchForm.jcnr" :placeholder="$t('form.placeholderInput')" clearable
+          style="width: 200px" />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="search">{{ $t('page.business.study.study.search') }}</el-button>
+        <el-button icon="el-icon-refresh" @click="reset">{{ $t('form.reset') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+  <div class="ytbd-content">
+    <el-table v-loading="loading" :data="list">
+      <el-table-column :label="$t('page.system.systemLog.czr')" prop="qmrMc" width="200" />
+      <el-table-column :label="$t('page.system.systemLog.czlx')" :prop="$i18n.locale === 'zh_CN'?'jcmc':'jcmcEn'" width="200" />
+      <el-table-column :label="$t('page.system.systemLog.czxq')" align="center">
+        <template slot-scope="scope">
+          <span>{{initNr(scope.row)}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('page.business.archive.czsj')" align="center" prop="createTime" width="200" />
+    </el-table>
+    <pagination v-show="total > 0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
+      @pagination="getList" />
+  </div>
+</div>
+
+</template>
+
+<script>
+import { systemLog_list } from "@/api/business/systemLog/systemLog"
+export default {
+  name: 'Czrz',
+  props: {
+  },
+  computed: {
+  },
+  data() {
+    return {
+      daterange:[],
+      searchForm: {
+        pageNum: 1,
+        pageSize: 10,
+        qmrMc: '',
+        jcmc: '',
+        jcnr: '',
+        startDate:'',
+        endDate:'',
+      },
+      loading: false,
+      total: 0,
+      list: [],
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    search() {
+      this.searchForm.pageNum = 1
+      this.getList()
+    },
+    reset() {
+      this.searchForm.qmrMc = ''
+      this.searchForm.jcmc = ''
+      this.searchForm.jcnr = ''
+      this.searchForm.startDate = ''
+      this.searchForm.endDate = ''
+      
+      this.daterange = []
+      this.search()
+    },
+    getList() {
+      this.loading = true
+      this.searchForm.startDate = this.daterange && this.daterange.length > 0 ? this.daterange[0] : ''
+      this.searchForm.endDate = this.daterange && this.daterange.length > 1 ? this.daterange[1] : ''
+
+      systemLog_list(this.searchForm).then(response => {
+        this.list = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    initNr(row){
+      if(this.$i18n.locale === 'zh_CN'){
+        debugger
+        if(this.isJSON(row.jcnr)){
+          let nr = ''
+          _.forEach(JSON.parse(row.jcnr),(o)=>{
+            nr+=o.name+':'+o.value+' '
+          })
+          if(nr!==''){
+            nr+='、'
+          }
+          return nr
+        }else{
+          return row.jcnr
+        }
+      }else{
+        if(this.isJSON(row.jcnrEn)){
+          let nr = ''
+          _.forEach(JSON.parse(row.jcnrEn),(o)=>{
+            nr+=o.name+':'+o.name+' '
+          })
+          if(nr!==''){
+            nr+='、'
+          }
+          return nr
+        }else{
+          return row.jcnrEn
+        }
+      }
+    },
+    isJSON(str) {
+      if (typeof str !== 'string') {
+        return false;
+      }
+      
+      try {
+        const result = JSON.parse(str);
+        
+        // 可选：确保解析后是对象或数组，而不是简单类型
+        const type = Object.prototype.toString.call(result);
+        return type === '[object Object]' || type === '[object Array]';
+      } catch (e) {
+        return false;
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.system-log-list {
+  .ytbd-search {
+    background: #fff;
+    padding: 20px;
+    padding-bottom: 0;
+    margin-bottom: 10px;
+
+    .right-btn {
+      text-align: right
+    }
+  }
+
+  .ytbd-content {
+    padding: 20px;
+    background: #fff;
+
+    .add-box {
+      margin-bottom: 10px;
+    }
+  }
+}
+</style>
diff --git a/src/views/business/systemLog/comp/dlrz.vue b/src/views/business/systemLog/comp/dlrz.vue
new file mode 100644
index 0000000..945fb0e
--- /dev/null
+++ b/src/views/business/systemLog/comp/dlrz.vue
@@ -0,0 +1,138 @@
+<template>
+<div class="system-log-list">
+  <div class="ytbd-search">
+    <el-form :model="searchForm" ref="searchForm" :inline="true" label-width="110px">
+      <el-form-item :label="$t('page.system.systemLog.czr')" prop="qmrMc">
+        <el-input v-model="searchForm.qmrMc" :placeholder="$t('form.placeholderInput')" clearable
+          style="width: 200px" />
+      </el-form-item>
+      <el-form-item :label="$t('page.system.systemLog.czsj')">
+          <el-date-picker v-model="daterange" clearable type="daterange" range-separator="-" :start-placeholder="$t('page.business.study.study.startDate')"
+            :end-placeholder="$t('page.business.study.study.endDate')" value-format="yyyy-MM-dd" @change="search" style="width: 220px" />
+        </el-form-item>
+      <el-form-item prop="jcmc" :label="$t('page.system.systemLog.czlx')">
+        <el-select
+          v-model="searchForm.jcmc"
+          :placeholder="$t('form.placeholderSelect')"
+          clearable
+          style="width: 200px"
+          @change="search"
+        >
+          <el-option :label="$t('page.business.study.study.sqgd')" :value="$t('page.business.study.study.sqgd')" />
+          <el-option :label="$t('page.business.study.study.tygd')" :value="$t('page.business.study.study.tygd')" />
+          <el-option :label="$t('page.business.study.study.jjgd')" :value="$t('page.business.study.study.jjgd')" />
+          <el-option :label="$t('page.business.study.study.sqjd')" :value="$t('page.business.study.study.sqjd')" />
+          <el-option :label="$t('page.business.study.study.tyjd')" :value="$t('page.business.study.study.tyjd')" />
+          <el-option :label="$t('page.business.study.study.jjjd')" :value="$t('page.business.study.study.jjjd')" />
+          <el-option :label="$t('page.business.study.study.sqjy')" :value="$t('page.business.study.study.sqjy')" />
+          <el-option :label="$t('page.business.study.study.tyjy')" :value="$t('page.business.study.study.tyjy')" />
+          <el-option :label="$t('page.business.study.study.jjjy')" :value="$t('page.business.study.study.jjjy')" />
+          <el-option :label="$t('page.business.study.study.qrgh')" :value="$t('page.business.study.study.qrgh')" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item :label="$t('page.system.systemLog.czxq')" prop="jcnr">
+        <el-input v-model="searchForm.jcnr" :placeholder="$t('form.placeholderInput')" clearable
+          style="width: 200px" />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="search">{{ $t('page.business.study.study.search') }}</el-button>
+        <el-button icon="el-icon-refresh" @click="reset">{{ $t('form.reset') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+  <div class="ytbd-content">
+    <el-table v-loading="loading" :data="list">
+      <el-table-column :label="$t('page.system.systemLog.czr')" :prop="$i18n.locale === 'zh_CN'?'qmcMc':'qmcMc'" />
+      <el-table-column :label="$t('page.system.systemLog.czlx')" :prop="$i18n.locale === 'zh_CN'?'jcmc':'jcmcEn'" />
+      <el-table-column :label="$t('page.system.systemLog.czxq')" align="center" :prop="$i18n.locale === 'zh_CN'?'jcnr':'jcnrEn'" width="150" />
+      <el-table-column :label="$t('page.business.archive.czsj')" align="center" prop="createTime" width="200" />
+    </el-table>
+    <pagination v-show="total > 0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
+      @pagination="getList" />
+  </div>
+</div>
+
+</template>
+
+<script>
+import { systemLog_list } from "@/api/business/systemLog/systemLog"
+export default {
+  name: 'Czrz',
+  props: {
+  },
+  computed: {
+  },
+  data() {
+    return {
+      daterange:[],
+      searchForm: {
+        pageNum: 1,
+        pageSize: 10,
+        qmrMc: '',
+        jcmc: '',
+        jcnr: '',
+        startDate:'',
+        endDate:'',
+      },
+      loading: false,
+      total: 0,
+      list: [],
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    search() {
+      this.searchForm.pageNum = 1
+      this.getList()
+    },
+    reset() {
+      this.searchForm.qmrMc = ''
+      this.searchForm.jcmc = ''
+      this.searchForm.jcnr = ''
+      this.searchForm.startDate = ''
+      this.searchForm.endDate = ''
+      
+      this.daterange = []
+      this.search()
+    },
+    getList() {
+      this.loading = true
+      this.searchForm.startDate = this.daterange && this.daterange.length > 0 ? this.daterange[0] : ''
+      this.searchForm.endDate = this.daterange && this.daterange.length > 1 ? this.daterange[1] : ''
+
+      systemLog_list(this.searchForm).then(response => {
+        this.list = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.system-log-list {
+  .ytbd-search {
+    background: #fff;
+    padding: 20px;
+    padding-bottom: 0;
+    margin-bottom: 10px;
+
+    .right-btn {
+      text-align: right
+    }
+  }
+
+  .ytbd-content {
+    padding: 20px;
+    background: #fff;
+
+    .add-box {
+      margin-bottom: 10px;
+    }
+  }
+}
+</style>
diff --git a/src/views/business/systemLog/list.vue b/src/views/business/systemLog/list.vue
new file mode 100644
index 0000000..a0701c0
--- /dev/null
+++ b/src/views/business/systemLog/list.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="study-enter">
+    <div class="content-list">
+      <div class="search-box">
+        <div class="search-item" :class="active === item.key ? 'active' : ''" v-for="(item, index) in tabList"
+          :key="index" @click="changeTab(item)">
+          {{ $t(item.name) }}
+        </div>
+      </div>
+
+      <div class="content-box">
+        <czrz v-if="active === 'czrz'" />
+        <dlrz v-if="active === 'dlrz'" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { checkPermi } from "@/utils/permission";
+import czrz from './comp/czrz.vue'
+import dlrz from './comp/dlrz.vue'
+export default {
+  name: 'SystemLogList',
+  props: {},
+  components: { czrz,dlrz},
+  computed: {},
+  filters: {},
+  data() {
+    return {
+      tabList: [],
+      active: '',
+
+      study: {},
+    }
+  },
+  created() {
+    this.initTab()
+  },
+  methods: {
+    checkPermi,
+    initTab(){
+      this.tabList = []
+      if(this.checkPermi(['business:systemLog:operate'])){
+        this.tabList.push({ key: 'czrz', name: 'page.system.systemLog.czrz' })
+      }
+      if(this.checkPermi(['business:archive:record:gspdaTab'])){
+        this.tabList.push({ key: 'dlrz', name: 'page.system.systemLog.dlrz' })
+      }
+      this.active = this.$route.params.tab && _.findIndex(this.tabList,(o)=>{return o.key===this.$route.params.tab})>-1 ? this.$route.params.tab: this.tabList.length>0 ? this.tabList[0].key :''
+    },
+    changeTab(item) {
+      if (this.active !== item.key) {
+        this.active = item.key
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.study-enter {
+  margin: 10px 10px;
+  .search-box {
+    background: #fff;
+    padding: 0;
+    border-radius: 3px;
+    margin-bottom: 10px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .search-item {
+      padding: 10px 20px;
+      font-size: 14px;
+      cursor: pointer;
+
+      &.active {
+        background: #1890ff;
+        color: #fff;
+      }
+
+      &:hover {
+        background: #46a6ff;
+        color: #fff;
+      }
+
+      &:first-child {
+        border-top-left-radius: 3px;
+        border-bottom-left-radius: 3px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 3px;
+        border-bottom-right-radius: 3px;
+      }
+    }
+  }
+
+  .content-box {}
+}
+</style>