修改数据字段双语、整体页面样式调整

jero-web/src/components/tableDate/index.vue

@@ -1,39 +1,29 @@
 <template>
   <div style="height: 100%">
     <div class="box">
-      <table class="box-table" cellpadding="0" cellspacing="0">
-        <thead>
-        <tr id="table_thead_tr">
-          <th class="checkbox" style="margin-top: 24px;display: inline-block">
-            <a-checkbox :checked="tableAll" :indeterminate="indeterminate" @change="checkboxAll($event)"></a-checkbox>
-          </th>
-        </tr>
-        </thead>
-        <tbody id="table_tbody_tr">
-        <a-checkbox-group @change="checkboxChange" style="display: contents" v-model="checkboxList">
-          <tr v-for="item in jsonBody">
-            <td class="checkbox">
-              <a-checkbox :value="item.id"></a-checkbox>
-            </td>
-            <td v-for="val in Object.keys(item)" v-if="val != 'id'" class="box-td" :title="item[val]">
-              {{item[val]}}
-            </td>
-            <td class="box-td box-th-po" v-if="isOperation">
-              <a class="text" v-for="(ol,index) in OperationList" @click="OperationClick(ol,item)">{{ol.text}}</a>
-            </td>
-          </tr>
-        </a-checkbox-group>
-        </tbody>
-      </table>
+      <a-table
+        class="table"
+        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        :columns="columns"
+        :pagination="false"
+        :data-source="dataSource"
+        :loading="loading"
+      >
+        <span slot="operation" slot-scope="record" class="table-operation">
+               <a class="text" v-for="(ol,index) in OperationList"
+                  @click="OperationClick(ol,record)">{{ol.text}}</a>
+        </span>
+      </a-table>
     </div>
-    <div class="page" v-if="jsonBody.length > 0">
+    <div class="page" v-if="dataSource.length > 0">
       <a-pagination
         :show-total="total => `共 ${total} 条`"
         show-quick-jumper
         show-size-changer
         :page-size.sync="pageSize"
-        :total="500"
+        :total="total"
         @change="onChange"
+        @showSizeChange="SizeChange"
       />
     </div>
   </div>
@@ -68,18 +58,27 @@
     },
     data() {
       return {
-        pageSize: 20,
         jsonBody: [],
         checkboxList: [],
         tableAll: false,
         indeterminate: false,
+        columns: [],
+        selectedRowKeys: [],
+        dataSource: [],
+        pageNo: 1,
+        pageSize: 10,
+        total: 0,
+        searchParmes: {},
+        loading:false,
       }
     },
     mounted() {
       eventBUs.$on('searchQuery', search => {
+        this.searchParmes = search
         this.getTableList(search)
       })
       eventBUs.$on('searchReset', target => {
+        this.searchParmes = {}
         this.getTableList()
       })
       this.getData()
@@ -93,42 +92,46 @@
         getAction(this.url.tableHeader, params).then((res) => {
           if (res.success) {
             var jsonHead = res.result
-            for (var i = 0; i < jsonHead.length; i++) {
-              $('#table_thead_tr').append('<th class="box-th">' + jsonHead[i].db_field_en_name + '</br>' + jsonHead[i].db_field_txt + '</th>')
-            }
-            if (this.isOperation) {
-              let th = '<th class="box-th box-th-po">' + 'Operation ' + '</br>' + '操作' + '</th>'
-              $('#table_thead_tr').append(th)
-            }
-          }
-        })
-      },
-      checkboxChange(checkedList) {
-        this.indeterminate = !!checkedList.length && checkedList.length < this.jsonBody.length
-        this.tableAll = checkedList.length === this.jsonBody.length
-      },
-      checkboxAll(event) {
-        this.tableAll = event.target.checked
-        this.checkboxList = []
-        if (this.tableAll) {
-          if (this.jsonBody.length > 0){
-            this.jsonBody.forEach(res => {
-              this.checkboxList.push(res.id)
+            jsonHead.forEach(res => {
+              this.columns.push({
+                title: res.db_field_txt,
+                dataIndex: res.db_field_name,
+                align: 'center'
+              })
+            })
+            this.columns.push({
+              title: '操作',
+              align: 'center',
+              fixed: 'right',
+              scopedSlots: { customRender: 'operation' }
             })
           }
-        }
+        })
       },
-      getTableList(search) {
+      getTableList() {
         let params = {
-             ...search,
+          ...this.searchParmes,
+          pageNo: this.pageNo,
+          pageSize: this.pageSize
         }
+        this.loading = true
         getAction(this.url.tableList, params).then((res) => {
           if (res.success) {
-            this.jsonBody = res.result.records
+            this.dataSource = res.result.records
+            this.total = res.result.total
+            this.loading = false
           }
         })
       },
-      onChange() {
+      onChange(page, pageSize) {
+        this.pageNo = page
+        this.getTableList()
+      },
+      SizeChange(page, pageSize) {
+        this.pageSize = pageSize
+        this.getTableList()
+      },
+      onSelectChange() {
 
       },
       OperationClick(ol, item) {
@@ -137,7 +140,11 @@
     }
   }
 </script>
-
+<style>
+  .table .ant-table-column-title {
+    font-weight: bold;
+  }
+</style>
 <style scoped>
   .box {
     width: 100%;