Bladeren bron

Merge branch 'master' of http://124.220.187.142:3000/hezhongwen/cake

hezhongwen 1 jaar geleden
bovenliggende
commit
1c4ebb551c
4 gewijzigde bestanden met toevoegingen van 229 en 170 verwijderingen
  1. 41 46
      src/App.vue
  2. 0 0
      src/api/dataJs.js
  3. 188 76
      src/components/CenterNav.vue
  4. 0 48
      src/components/reset(默认样式).css

+ 41 - 46
src/App.vue

@@ -73,28 +73,25 @@
     </div>
     <CenterNav />
     <div class="center_bottom">
-        <div class="center_bottom_core">
-          <div class="core_list">
-              <div class="list_list">
-                <p>主办单位:贵州省人力资源和社会保障厅</p>
-                <p>地址:贵州省贵阳市延安中路20号</p>
-                <p>邮编:550001</p>
-              </div>
-              <div class="list_list">
-                <p>技术支持:创智和宇信息技术股份有限公司</p>
-                <p>地址:湖南省长沙市高新开发区欣盛路159号</p>
-                <p>邮编:410000</p>
-              </div>
-              <div class="list_list">
-                <p>业务咨询服务热线:0851-85837326</p>
-                <p>备案号:黔ICP备19004957号</p>
-                <p>&nbsp;</p>
-              </div>
-      
-
+      <div class="center_bottom_core">
+        <div class="core_list">
+          <div class="list_list">
+            <p>主办单位:贵州省人力资源和社会保障厅</p>
+            <p>地址:贵州省贵阳市延安中路20号</p>
+            <p>邮编:550001</p>
+          </div>
+          <div class="list_list">
+            <p>技术支持:创智和宇信息技术股份有限公司</p>
+            <p>地址:湖南省长沙市高新开发区欣盛路159号</p>
+            <p>邮编:410000</p>
+          </div>
+          <div class="list_list">
+            <p>业务咨询服务热线:0851-85837326</p>
+            <p>备案号:黔ICP备19004957号</p>
+            <p>&nbsp;</p>
           </div>
-
         </div>
+      </div>
     </div>
   </div>
 </template>
@@ -198,39 +195,37 @@ ul {
         // background-color: red;
       }
     }
- 
   }
-  .center_bottom{
+  .center_bottom {
     display: relative;
-      width: 100%;
+    width: 100%;
+    height: 200px;
+    background-color: #0e1d43;
+    .center_bottom_core {
+      width: 1182px;
       height: 200px;
-      background-color: #0e1d43;
-      .center_bottom_core{
-       width: 1182px;
-        height: 200px;
-        position: absolute;
-        left: 0;right: 0;
-        margin: 0 auto;
-        // background-color: yellow;
-        .core_list{
+      position: absolute;
+      left: 0;
+      right: 0;
+      margin: 0 auto;
+      // background-color: yellow;
+      .core_list {
+        display: flex;
+        justify-content: space-between;
+        .list_list {
           display: flex;
-          justify-content: space-between;
-          .list_list{
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            width: 320px;
-            height: 200px;
-            // padding-top: 50px;
-            // background-color: red;
-            p{
-              padding:4px 0;
-              font-size: 16px;
-              color:#fff;
-            }
+          flex-direction: column;
+          justify-content: center;
+          width: 320px;
+          height: 200px;
+          p {
+            padding: 4px 0;
+            font-size: 16px;
+            color: hsla(0, 0%, 100%, 0.8);
           }
         }
       }
     }
+  }
 }
 </style>

+ 0 - 0
src/api/dataJs.js


+ 188 - 76
src/components/CenterNav.vue

@@ -13,9 +13,10 @@
             <el-form
               :inline="true"
               :model="formInline"
+              ref="formInline"
               class="demo-form-inline"
             >
-              <el-form-item label="姓名" size="small "   >
+              <el-form-item label="姓名" size="small " prop="name">
                 <el-input
                   v-model="formInline.name"
                   clearable
@@ -23,114 +24,206 @@
                   style="width: 90%"
                 ></el-input>
               </el-form-item>
-              <el-form-item label="证件号码" size="small " style="margin-left:-20px">
+              <el-form-item
+                label="证件号码"
+                size="small "
+                style="margin-left: -20px"
+                prop="idNumber"
+              >
                 <el-input
-                  v-model="formInline.number"
+                  v-model="formInline.idNumber"
                   clearable
                   placeholder="请输入"
                   style="width: 90%"
                 ></el-input>
               </el-form-item>
-              <el-form-item label="证件编号" size="small" style="margin-left:63px">
+              <el-form-item
+                label="证件编号"
+                size="small"
+                style="margin-left: 63px"
+                prop="certificateNumber"
+              >
                 <el-input
-                  v-model="formInline.code"
+                  v-model="formInline.certificateNumber"
                   clearable
                   placeholder="请输入"
                   style="width: 90%"
                 ></el-input>
               </el-form-item>
-              <el-form-item style="margin-left:50px">
-                <el-button
-                  type="primary"
-                  @click="onSubmit"
-                  round
-                  size="medium"
-                  >搜  索</el-button
+              <el-form-item style="margin-left: 50px">
+                <el-button type="primary" @click="onSubmit" round size="medium"
+                  >搜 索</el-button
+                >
+                <el-button @click="resetForm('formInline')" size="medium" round
+                  >重 置</el-button
                 >
-                <el-button  @click="onSubmit" size="medium" round >重  置</el-button>
               </el-form-item>
             </el-form>
           </div>
           <div class="describe">
-                <el-divider content-position="left">提示:请提供姓名+证件号码或姓名+证书编号进行查询。</el-divider>
+            <el-divider content-position="left"
+              >提示:请提供姓名+证件号码或姓名+证书编号进行查询。</el-divider
+            >
           </div>
-             <div class="core_all_top">
+          <div class="core_all_top">
             <span>证书信息</span>
           </div>
           <div class="form">
             <el-table
-             class="exporttable"
-                :data="tableData"
-                border
-                :header-cell-style="{background:'#f0f2f5',color:'#101010'}"
-                style="width: 100%">
-                <template slot="empty">
-                    <el-empty :image="require('../assets/download3.png')" image-size="140"></el-empty>
+              class="exporttable"
+              :data="tableData"
+              border
+              v-loading="listLoading"
+              :header-cell-style="{ background: '#f0f2f5', color: '#101010' }"
+              style="width: 100%"
+              max-height="285px"
+            >
+              <template slot="empty">
+                <el-empty
+                  :image="require('../assets/download3.png')"
+                  :image-size="140"
+                ></el-empty>
               </template>
-                <el-table-column
-                  prop="date"
-                  align="center"
-                  label="证书系列"
-                  >
-                </el-table-column>
-                <el-table-column
-                  prop="name"
-                  align="center"
-                  label="职称名称"
-                 >
-                </el-table-column>
-                <el-table-column
-                  prop="address"
-                  align="center"
-
-                  label="证书编号">
-                </el-table-column>
-                <el-table-column
-                  fixed="right"
-                  label="操作"
-                  align="center"
+              <el-table-column
+                prop="professionalTitleSeries"
+                align="center"
+                label="证书系列"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="qualification"
+                align="center"
+                label="职称名称"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="certificateNumber"
+                align="center"
+                label="证书编号"
+              >
+              </el-table-column>
+              <el-table-column fixed="right" label="操作" align="center">
+                <template slot-scope="scope">
+                  <el-button
+                    @click="handleClick(scope.row)"
+                    type="text"
+                    size="small"
+                    >查看</el-button
                   >
-                  <template slot-scope="scope">
-                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
+                </template>
+              </el-table-column>
+            </el-table>
           </div>
         </div>
       </div>
- 
     </div>
+    <!-- <el-dialog
+      title="证书详细信息"
+      :visible.sync="dialogFormVisible"
+      :width="tbWidth"
+      :close-on-click-modal="false"
+      :before-close="handleClose"
+    >
+      <div></div>
+    </el-dialog> -->
+    <el-dialog
+      title="证书详细信息"
+      :visible.sync="dialogFormVisible"
+      width="60%"
+      center
+    >
+      <span>需要注意的是内容是默认不居中的</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button
+          @click="dialogFormVisible = false"
+          size="small"
+          round
+          type="primary"
+          >关 闭</el-button
+        >
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+var axios = require("axios");
+
 export default {
   name: "App",
   data() {
     return {
+      tableData: [
+        // {
+        //   name: "",
+        //   idNumber: "",
+        //   certificateNumber: null,
+        //   professionalTitleSeries: null,
+        //   professionalTitle: null,
+        //   qualification: null,
+        //   level: "",
+        //   qualificationTime: null,
+        //   issueTime: "",
+        //   reviewOrganization: "",
+        //   issuingAuthority: "",
+        //   declarationUnit: "",
+        //   remark: null,
+        //   idType: "",
+        //   imgUrl: null,
+        // },
+      ],
+      dialogFormVisible: false,
+      listLoading: false,
       formInline: {
-        name: "",
-        number:"",
-        code:""
-
+        name: "冉培松",
+        idNumber: "",
+        certificateNumber: "黔高1830053000002",
       },
-      tableData:[
-        // {
-        //   date: '2016-05-02',
-        //   name: '王小虎',
-        //   province: '上海',
-        //   city: '普陀区',
-        //   address: '上海市普陀区金沙江路 1518 弄',
-        //   zip: 200333
-        // }
-        ]
     };
   },
-  methods:{
-    handleClick(){
-
-    }
-  }
+  methods: {
+    // 查看
+    handleClick() {
+      this.dialogFormVisible = true;
+    },
+    // 搜索
+    onSubmit() {
+      this.listLoading = true;
+      // this.$notify.error({
+      //   title: "提示",
+      //   message: "请提供姓名+证件号码或姓名+证书编号进行查询",
+      //   position: "right",
+      // });
+      //接口初始化
+      var config = {
+        method: "post",
+        url: "http://122.51.110.133:8888/api/Certificate/GetCertificate",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        data: JSON.stringify(this.formInline),
+      };
+      //数据接口
+      let _this = this;
+      axios(config)
+        .then(function (response) {
+          _this.listLoading = false;
+          _this.tableData = response.data;
+        })
+        .catch(function (error) {
+          _this.listLoading = false;
+        });
+    },
+    // 重置
+    resetForm(formName) {
+      console.log("13123");
+      this.$refs[formName].resetFields();
+    },
+    // 关闭弹窗
+    handleClose() {
+      this.dialogFormVisible = false;
+    },
+  },
 };
 </script>
 
@@ -138,9 +231,27 @@ export default {
 .el-table th {
   background-color: blue;
 }
-// .el-table th .cell{
-//   color: #101010;
-// }
+/deep/ .el-empty__description p {
+  font-size: 14px;
+  color: #909399;
+  margin-top: -50px;
+}
+
+.el-dialog__header {
+  background: #f2f3f5;
+  text-align: center;
+  height: 14px;
+}
+.el-dialog .el-dialog__header span.el-dialog__title {
+  position: relative;
+  display: inline-block;
+  height: 14px;
+  line-height: 14px;  
+  font-weight: 700;
+  font-size: 14px;
+  margin-top: -20px;
+}
+
 #app {
   position: relative;
   min-width: 516px;
@@ -148,7 +259,7 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-    height: 760px;
+  height: 730px;
   .warp_center {
     position: absolute;
     top: 40px;
@@ -175,7 +286,9 @@ export default {
     .center_down {
       display: relative;
       width: 100%;
-      height: 610px;
+      height: auto !important;
+      height: 580px;
+      min-height: 580px;
       background-color: #fff;
       border-radius: 7px;
       .core_all {
@@ -211,11 +324,10 @@ export default {
           }
         }
         .exporttable {
-            border: solid 1px #e5e3e3;
+          border: solid 1px #e5e3e3;
         }
       }
     }
-
   }
 }
 </style>

+ 0 - 48
src/components/reset(默认样式).css

@@ -1,48 +0,0 @@
-html {
-    font-family: "Microsoft YaHei", serif;
-    font-size: 14px;
-}
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-p,
-blockquote,
-dl,
-dt,
-dd,
-ul,
-ol,
-li,
-pre,
-fieldset,
-button,
-input,
-textarea,
-th,
-td {
-    margin: 0;
-    padding: 0;
-}
-ul,
-ol {
-    list-style: none;
-}
-/* 閲嶇疆鏂囨湰鏍煎紡鍏冪礌 */
-a {
-    text-decoration: none;
-    color: inherit;
-}
-/* 閲嶇疆琛ㄦ牸鍏冪礌 */
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-/*鍥剧墖鍧楀寲涓庡幓鎺塱e杈规*/
-img {
-    border: 0;
-}