修改

src/components/WebSet/WebSiteCertificate.vue

+<style>
+  .WebSiteCertificate .el-button.is-circle {
+    padding: 6px;
+  }
+</style>
 <template>
-  <!--護照簽證資料(护照签证管理)-->
+  <!--护照签证资料-->
   <div class="WebSiteCertificate">
-    护照签证管理
+    <div class="query-box">
+      <ul>
+        <li>
+          <label>名称</label>
+          <el-input v-model="msg.name" :placeholder="$t('system.ph_in')" @keyup.native.enter="getData" class="w210">
+          </el-input>
+        </li>
+        <li>
+          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
+            @click="resetPageIndex(),getData()" />
+          <input type="button" class="normalBtn" @click="outerVisible=true" value="新增证件" />
+          <input type="button" class="normalBtn" value="浏览前台页面" />
+        </li>
+      </ul>
+    </div>
+    <div>
+      <el-table :data="dataList" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
+        <el-table-column prop="certificateName" label="证件名称" sortable>
+        </el-table-column>
+        <el-table-column prop="country" label="国家" sortable>
+        </el-table-column>
+        <el-table-column prop="DoFei" label="办件费用" sortable>
+        </el-table-column>
+        <el-table-column prop="guestFei" label="直客费用" sortable>
+        </el-table-column>
+        <el-table-column prop="validityDate" label="证件效期" sortable>
+        </el-table-column>
+        <el-table-column prop="stayDays" label="可停留天数" sortable>
+        </el-table-column>
+        <el-table-column prop="workDays" label="工作天" sortable>
+        </el-table-column>
+        <el-table-column prop="isShowBefore" label="前台显示">
+          <template slot-scope="scope">
+            <el-switch v-model="scope.row.isShowBefore" :active-value="1" :inactive-value="0" active-color="#13ce66"
+              inactive-color="#ff4949"></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column label="详情">
+          <template slot-scope="scope">
+            <el-tooltip class="item" effect="dark" content="详情" placement="top-start">
+              <el-button type="primary" icon="el-icon-search" circle>
+              </el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="noData" v-if="dataList.length==0">
+        {{$t('system.content_noData')}}
+      </div>
+      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
+        layout="total,prev, pager, next, jumper" :page-size='msg.pageSize' :total=total>
+      </el-pagination>
+    </div>
+
+    <el-dialog title="新增证件资料" :visible.sync="outerVisible" center width="800px">
+      <el-form :model="addMsg" ref="addMsg" label-width="120px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="证件名称">
+              <el-input type="text" v-model="addMsg.certificateName">
+              </el-input>
+            </el-form-item>
+            <el-form-item label="工作天">
+              <el-input type="text" v-model="addMsg.workDays">
+              </el-input>
+            </el-form-item>
+            <el-form-item label="直客费用">
+              <el-input type="text" v-model="addMsg.guestFei">
+              </el-input>
+            </el-form-item>
+            <el-form-item label="可停留天数">
+              <el-input type="text" v-model="addMsg.stayDays">
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="国家">
+                <el-input type="text" v-model="addMsg.linkUrl">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="办证费用">
+                <el-input type="text" v-model="addMsg.DoFei">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="证件效期">
+                <el-input type="text" v-model="addMsg.validityDate">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="注意事项">
+                <el-input type="textarea" v-model="addMsg.attention" :rows="4">
+                </el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button> &nbsp;
+        <button class="hollowFixedBtn"
+          @click="outerVisible = false">{{$t('pub.cancelBtn')}}</button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
   export default {
     data() {
       return {
-        obj: {}
-      };
+        msg: {
+          name: '', //名称
+          pageSize: 15,
+          pageIndex: 1,
+        },
+        total: 0,
+        currentPage: 1,
+        //弹窗
+        outerVisible: false,
+        dataList: [{
+          certificateName: '台胞卡(新办)', //证件名称
+          country: '中国', //国家
+          DoFei: '1400元', //办件费用
+          guestFei: '1500元', //直客费用
+          validityDate: '10年', //证件效期
+          stayDays: '60天', //可停留天数
+          workDays:'7天',  //工作天
+          isShowBefore:1  //前台显示
+         }],
+        addMsg:{
+          certificateName:'', //证件名称
+          country:'', //国家
+          workDays:'', //工作天
+          DoFei:'', //办证费用
+          guestFei:'', //直客费用
+          validityDate:'', // 证件效期
+          stayDays:'', //可停留天数
+          attention:'' //注意事项
+        },
+      }
     },
     mounted() {
       this.getData();
@@ -18,7 +151,29 @@
       //获取配置
       getData() {
 
-      }
+      },
+      handleCurrentChange(val) {
+        //翻页功能按钮
+        this.msg.pageIndex = val;
+        this.getData();
+      },
+      resetPageIndex() {
+        //查询初始化页码
+        this.msg.pageIndex = 1;
+        this.currentPage = 1;
+      },
+      //修改
+      updateData(index) {
+
+      },
+      //删除
+      deletelist(index) {
+
+      },
+      //新增
+      submitForm(addMsg){
+
+      },
     }
   }