|
@@ -0,0 +1,114 @@
|
|
|
+<template>
|
|
|
+ <div id="mainType">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="mainType">
|
|
|
+ <el-table :data="tableData" style="width: 100%" border>
|
|
|
+ <el-table-column prop="title" label="类别名称" width="209px;" align="left"> </el-table-column>
|
|
|
+ <el-table-column prop="bianma" label="类别编码" width="209px;" align="left"> </el-table-column>
|
|
|
+ <el-table-column prop="fuBianma" label="父类编码" width="209px;" align="left"> </el-table-column>
|
|
|
+ <el-table-column prop="date" label="创建时间" width="209px;" align="left"> </el-table-column>
|
|
|
+ <el-table-column label="操作" width="209px;" align="left">
|
|
|
+ <template slot-scope="scoped">
|
|
|
+ <el-button size="mini" type="primary" icon="el-icon-view" @click="openDialog(scoped.$index)"></el-button>
|
|
|
+ <el-button size="mini" type="primary" icon="el-icon-edit" @click="addData(scoped.$index)"></el-button>
|
|
|
+ <el-button size="mini" type="danger" icon="el-icon-delete" @click.native.prevent="deleteRow(scoped.$index, tableData)"></el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-col :span="24" class="page">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :total="1"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-dialog title="详细信息" :visible.sync="dialog">
|
|
|
+ <p class="text">创建用户名称:{{ info.title }}</p>
|
|
|
+ <p class="text">类别编码:{{ info.bianma }}</p>
|
|
|
+ <p class="text">父类编码:{{ info.fuBianma }}</p>
|
|
|
+ <p class="text">创建时间:{{ info.date }}</p>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'mainType',
|
|
|
+ props: {
|
|
|
+ tableData: null,
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ data: () => ({
|
|
|
+ currentPage: 1,
|
|
|
+ dialog: false,
|
|
|
+ info: {},
|
|
|
+ pic: require('@/assets/logo.png'),
|
|
|
+ }),
|
|
|
+ created() {},
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ handleSizeChange(val) {
|
|
|
+ console.log(`每页 ${val} 条`);
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ console.log(`当前页: ${val}`);
|
|
|
+ },
|
|
|
+ addData(index) {
|
|
|
+ if (index !== undefined) {
|
|
|
+ let data = this.tableData[index];
|
|
|
+ } else {
|
|
|
+ this.form = {};
|
|
|
+ }
|
|
|
+ this.$router.push({ path: './detail' });
|
|
|
+ },
|
|
|
+ deleteRow(index, rows) {
|
|
|
+ rows.splice(index, 1);
|
|
|
+ },
|
|
|
+ openDialog(index) {
|
|
|
+ if (index !== undefined) {
|
|
|
+ let data = JSON.parse(JSON.stringify(this.tableData[index]));
|
|
|
+ data[`index`] = index;
|
|
|
+ this.$set(this, `info`, data);
|
|
|
+ }
|
|
|
+ this.dialog = true;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+p {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+/deep/.el-table th {
|
|
|
+ padding: 5px 0;
|
|
|
+ background: #f2f2f2;
|
|
|
+}
|
|
|
+/deep/.el-table td {
|
|
|
+ padding: 5px 0;
|
|
|
+}
|
|
|
+/deep/.el-table tr {
|
|
|
+ background: #f9f9f9;
|
|
|
+}
|
|
|
+/deep/.el-table tr:nth-child(2n) {
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+.page {
|
|
|
+ text-align: center;
|
|
|
+ padding: 30px 0;
|
|
|
+}
|
|
|
+.text {
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 0 0 10px 0;
|
|
|
+}
|
|
|
+.text span {
|
|
|
+ display: inherit;
|
|
|
+ text-indent: 1rem;
|
|
|
+}
|
|
|
+</style>
|