|
|
@@ -1,16 +1,65 @@
|
|
|
<template lang="html">
|
|
|
<div id="register">
|
|
|
<el-row class="register">
|
|
|
- <el-col :span="24">
|
|
|
- 标题
|
|
|
+ <el-col :span="24" class="btn">
|
|
|
+ <el-col :span="20"><h3>账号注册</h3></el-col>
|
|
|
+ <el-col :span="4"><el-button type="success" icon="el-icon-plus">添加</el-button></el-col>
|
|
|
+ <el-col></el-col>
|
|
|
</el-col>
|
|
|
- <el-col :span="24">
|
|
|
- 搜索
|
|
|
+ <el-col :span="24" class="search">
|
|
|
+ <el-col :span="3" class="searchSel">
|
|
|
+ <el-select v-model="value" placeholder="请选择">
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5" class="searchInp"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
|
|
|
+ <el-col :span="2" class="searchBtn"><el-button icon="el-icon-search"></el-button></el-col>
|
|
|
</el-col>
|
|
|
- <el-col :span="24">
|
|
|
- 列表
|
|
|
+ <el-col :span="24" class="list">
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%"
|
|
|
+ row-key="id"
|
|
|
+ border
|
|
|
+ lazy
|
|
|
+ :load="load"
|
|
|
+ :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
|
+ >
|
|
|
+ <el-table-column prop="date" label="日期" width="180"> </el-table-column>
|
|
|
+ <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
|
|
|
+ <el-table-column prop="address" label="地址"> </el-table-column>
|
|
|
+ <el-table-column prop="state" label="状态">
|
|
|
+ <template v-slot="scope">
|
|
|
+ {{ scope.row.state === '0' ? '已冻结' : '使用中' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button size="mini" @click="openDialog(scope.$index)">修改</el-button>
|
|
|
+ <el-button size="mini" type="danger" @click="open">注销</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
+ <el-dialog title="编辑账号" :visible.sync="editFormVisible">
|
|
|
+ <el-form :model="editForm" label-width="80px" ref="editForm">
|
|
|
+ <el-form-item label="日期" prop="date">
|
|
|
+ <el-input v-model="editForm.date"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="名称" prop="name">
|
|
|
+ <el-input v-model="editForm.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="地址" prop="address">
|
|
|
+ <el-input v-model="editForm.address"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-table-column label="状态" prop="state"> </el-table-column>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click.native="handleCancel()">取消</el-button>
|
|
|
+ <el-button type="primary" @click.native="handleEdit()">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -19,16 +68,166 @@ export default {
|
|
|
name: 'register',
|
|
|
props: {},
|
|
|
components: {},
|
|
|
- data: () => ({}),
|
|
|
+ data: () => ({
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ value: '1',
|
|
|
+ label: '1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '2',
|
|
|
+ label: '2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '3',
|
|
|
+ label: '3',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '4',
|
|
|
+ label: '4',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '5',
|
|
|
+ label: '5',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ value: '',
|
|
|
+ input: '',
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ date: '2016-05-02',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄',
|
|
|
+ state: '0',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ date: '2016-05-04',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1517 弄',
|
|
|
+ state: '1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ date: '2016-05-01',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1519 弄',
|
|
|
+ state: '0',
|
|
|
+ hasChildren: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ date: '2016-05-03',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1516 弄',
|
|
|
+ state: '0',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ editForm: {
|
|
|
+ date: '',
|
|
|
+ name: '',
|
|
|
+ address: '',
|
|
|
+ state: '',
|
|
|
+ },
|
|
|
+ editFormVisible: false,
|
|
|
+ }),
|
|
|
created() {},
|
|
|
computed: {},
|
|
|
- methods: {},
|
|
|
+ methods: {
|
|
|
+ load(tree, treeNode, resolve) {
|
|
|
+ setTimeout(() => {
|
|
|
+ resolve([
|
|
|
+ {
|
|
|
+ id: 31,
|
|
|
+ date: '2016-05-01',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1519 弄',
|
|
|
+ state: '1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 32,
|
|
|
+ date: '2016-05-01',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1519 弄',
|
|
|
+ state: '0',
|
|
|
+ },
|
|
|
+ ]);
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ open() {
|
|
|
+ this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功!',
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消删除',
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ openDialog(index) {
|
|
|
+ this.editFormVisible = true;
|
|
|
+ let data = JSON.parse(JSON.stringify(this.tableData[index]));
|
|
|
+ data[`index`] = index;
|
|
|
+ this.$set(this, `editForm`, data);
|
|
|
+ },
|
|
|
+ handleEdit() {
|
|
|
+ let newData = this.editForm;
|
|
|
+ const { index, ...form } = newData;
|
|
|
+ console.log(index, form);
|
|
|
+ this.$set(this.tableData, `${index}`, form);
|
|
|
+ this.$message.success('修改成功');
|
|
|
+ this.handleCancel();
|
|
|
+ },
|
|
|
+ handleCancel() {
|
|
|
+ this.editForm = {};
|
|
|
+ this.editFormVisible = false;
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+h1,
|
|
|
+h2,
|
|
|
+h3,
|
|
|
+h4,
|
|
|
+h5,
|
|
|
+h6 {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
.register {
|
|
|
width: 100%;
|
|
|
padding: 20px;
|
|
|
}
|
|
|
+.btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ margin: 20px 0;
|
|
|
+}
|
|
|
+.search {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ margin: 0 0 20px 0;
|
|
|
+}
|
|
|
+.searchSel .el-select {
|
|
|
+ border-radius: 0;
|
|
|
+}
|
|
|
+/deep/.searchInp .el-input__inner {
|
|
|
+ border-radius: 0;
|
|
|
+}
|
|
|
+.searchBtn .el-button {
|
|
|
+ border-radius: 0;
|
|
|
+}
|
|
|
</style>
|
