admin-cms-1/src/views/userManage/user/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="info">
        <el-col :span="24" class="top">
          <topInfo :topTitle="topTitle"></topInfo>
        </el-col>
        <el-col :span="24" class="search">
          <el-col :span="8" class="left">
            <span>查询身份证：</span>
            <el-input v-model="input" placeholder="请输入身份证"></el-input>
          </el-col>
          <el-col :span="8" class="left">
            <span>查询名称：</span>
            <el-input v-model="input" placeholder="请输入名称"></el-input>
          </el-col>
          <el-col :span="8" class="right">
            <el-button size="mini" type="primary" icon="el-icon-search">查询</el-button>
            <el-button size="mini" type="success" icon="el-icon-check" @click="addData()">添加用户</el-button>
          </el-col>
        </el-col>
        <el-col :span="24" class="main">
          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column label="序号" type="index" width="50" align="left"> </el-table-column>
            <el-table-column prop="name" label="名称" width="80" align="left"> </el-table-column>
            <el-table-column prop="sfzh" label="身份证号" width="180" align="left"> </el-table-column>
            <el-table-column prop="loginName" label="登录名称" width="80" align="left"> </el-table-column>
            <el-table-column prop="tel" label="联系电话" width="120" align="left"> </el-table-column>
            <el-table-column prop="email" label="电子邮箱" width="205" align="left"> </el-table-column>
            <el-table-column prop="date" label="创建时间" width="100" align="left"> </el-table-column>
            <el-table-column label="操作" width="180" 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-col>
    </el-row>
    <el-dialog title="详细信息" :visible.sync="dialog">
      <el-col :span="24" class="dataInfo">
        <el-col :span="24"> 姓名：{{ info.name }} </el-col>
        <el-col :span="24"> 身份证号：{{ info.sfzh }} </el-col>
        <el-col :span="24"> 登录名称：{{ info.loginName }} </el-col>
        <el-col :span="24"> 联系电话：{{ info.tel }} </el-col>
        <el-col :span="24"> 邮箱：{{ info.email }} </el-col>
        <el-col :span="24"> 创建时间：{{ info.date }} </el-col>
      </el-col>
    </el-dialog>
  </div>
</template>

<script>
import topInfo from '@/layout/top.vue';
export default {
  name: 'index',
  props: {},
  components: {
    topInfo, //头部标题
  },
  data: () => ({
    topTitle: '用户管理',
    input: '',
    tableData: [
      {
        name: '测试人员',
        sfzh: '220182199603257019',
        loginName: '测试人员',
        tel: '17319450324',
        email: '17319450324@163.com',
        date: '2019-01-10',
      },
      {
        name: '十条数据',
        sfzh: '220182199603257019',
        loginName: '测试人员',
        tel: '17319450324',
        email: '17319450324@163.com',
        date: '2019-01-10',
      },
    ],
    currentPage: 1,
    dialog: false,
    info: {},
  }),
  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>
.top {
  height: 40px;
  background-color: #f5f5f5;
}
.search {
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
}
.search .left span {
  font-size: 13px;
  color: #393939;
}
.search .left .el-input {
  width: 50%;
}
/deep/.search .left .el-input .el-input__inner {
  height: 28px;
}
.main {
  width: 97%;
  margin: 0 15px;
}
/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;
}
/deep/ .el-dialog__body {
  min-height: 300px;
}
.dataInfo .el-col {
  font-size: 18px;
  padding: 0 0 20px 0;
}
</style>