[Update] 修改标签列表组件

src/views/assets/LabelList.vue

@@ -1,118 +1,57 @@
 <template>
-  <IBox :title="$t('route.AdminUserList')">
+  <Page>
-    <ListTables
+    <template slot="content">
-      :tablebutton="$t('assets.AdminUserCreate')"
+      <el-alert type="success"> 这里是一个成功的文案 </el-alert>
-      tableroute="UserEdit"
+      <el-card>
-      @SizeChange="handleSizeChange"
+        <tables v-bind="tableConfig" />
-      @CurrentChange="handleCurrentChange"
+      </el-card>
-    >
-      <el-table
-        v-loading="listLoading"
-        :data="tableData"
-        stripe
-        border
-        class="userTable"
-      >
-        <el-table-column
-          type="selection"
-          width="55"
-          align="center"
-          header-align="center"
-        />
-        <el-table-column
-          :label="this.$t('assets.name')"
-          sortable
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <el-button type="text" size="small" style="font-size:14px" @click="handleDetail(scope.$index, scope.row)">{{ scope.row.name }}</el-button>
     </template>
-        </el-table-column>
+  </Page>
-        <el-table-column
-          :label="this.$t('assets.value')"
-          sortable
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <span>{{ scope.row.value }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="this.$t('assets.asset')"
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <span>{{ scope.row.asset_count }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="this.$t('assets.action')"
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              type="primary"
-              @click="handleEdit(scope.$index, scope.row)"
-            >{{ $t('assets.update') }}</el-button>
-            <el-button
-              size="mini"
-              type="danger"
-              @click="handleDelete(scope.$index, scope.row)"
-            >{{ $t('assets.delete') }}</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </ListTables>
-  </IBox>
 </template>
 
 <script>
-import { ListTables, IBox } from '@/layout/components'
+import { Page } from '@/layout/components'
+import Tables from '@/components/ListTables/table'
 import { getLabelList } from '@/api/asset'
-import Tables from '@/layout/mixin/ListTables'
 export default {
   components: {
-    IBox,
+    Page,
-    ListTables
+    Tables
   },
-  mixins: [Tables],
   data() {
     return {
-      tableData: [],
+      tableConfig: {
-      listLoading: true
+        getData: getLabelList,
+        hasSelect: true,
+        columns: [
+          {
+            prop: 'name',
+            label: this.$t('common.name'),
+            key: 'name',
+            link: 'LabelDetail',
+            sortable: true
+          },
+          {
+            prop: 'value',
+            label: this.$t('assets.value'),
+            key: 'value'
+          },
+          {
+            prop: 'asset',
+            label: this.$t('assets.asset'),
+            key: 'asset_count'
+          },
+          {
+            prop: 'comment',
+            label: this.$t('assets.comment'),
+            key: 'comment'
+          }
+        ],
+        action: {
+          hasEdit: 'LabelEdit',
+          newClick: 'LabelEdit'
+        }
       }
-  },
-  created() {
-    this.getLabel(this.current_page, this.page_size, this.offset)
-  },
-  methods: {
-    handleDetail: function(index, row) {
-      this.$router.push({ name: 'LabelDetail', params: { id: row.id }})
-    },
-    handleSizeChange(val) {
-      // 当每页数量改变触发
-      this.offset = (this.current_page - 1) * val
-      this.page_size = val
-      this.getLabel(this.current_page, val, this.offset)
-    },
-    handleCurrentChange(val) {
-      // 当页码改变触发
-      this.offset = (val - 1) * this.page_size
-      this.current_page = val
-      this.getLabel(val, this.page_size, this.offset)
-    },
-    getLabel(draw, limit, offset) {
-      this.listLoading = true
-      getLabelList({ draw, limit, offset }).then(response => {
-        this.tableData = response.results
-        this.total = response.count
-        this.listLoading = false
-      })
     }
   }
 }