|
@@ -1,102 +1,106 @@
|
|
<template lang="html">
|
|
<template lang="html">
|
|
<div id="userMes">
|
|
<div id="userMes">
|
|
- <el-row>
|
|
|
|
- <el-col :span="6" class="sizeA"><span>用户管理</span></el-col>
|
|
|
|
- </el-row>
|
|
|
|
- <el-row>
|
|
|
|
- <el-col :span="4" class="sizeA">
|
|
|
|
- <el-button type="primary" @click="dialogFormVisible = true">用户注册</el-button>
|
|
|
|
-
|
|
|
|
- <el-dialog title="用户注册" :visible.sync="dialogFormVisible">
|
|
|
|
- <el-form :model="form" label-position="left" label-width="auto" style="padding: 0 5px;">
|
|
|
|
- <el-row :gutter="20">
|
|
|
|
- <el-col :span="12">
|
|
|
|
- <el-form-item label="公民身份号码">
|
|
|
|
- <el-input v-model="form.ID_num" clearable></el-input>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="姓名">
|
|
|
|
- <el-input v-model="form.name" clearable></el-input>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="年龄">
|
|
|
|
- <el-input v-model="form.age" clearable></el-input>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="性别">
|
|
|
|
- <el-radio v-model="form.sex" label="男">男</el-radio>
|
|
|
|
- <el-radio v-model="form.sex" label="女">女</el-radio>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="民族">
|
|
|
|
- <el-select v-model="form.nation" filterable placeholder="汉族">
|
|
|
|
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
|
|
|
- </el-select>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="登录密码">
|
|
|
|
- <el-input v-model="form.password" show-password></el-input>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="确认密码">
|
|
|
|
- <el-input v-model="form.repass" show-password></el-input>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="手机号码">
|
|
|
|
- <el-input v-model="form.phone" clearable></el-input>
|
|
|
|
- </el-form-item>
|
|
|
|
- </el-col>
|
|
|
|
- <el-col :span="12">
|
|
|
|
- <el-form-item label="QQ">
|
|
|
|
- <el-input v-model="form.ID_qq" clearable></el-input>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="微信">
|
|
|
|
- <el-input v-model="form.wechat" clearable></el-input>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="家庭电话">
|
|
|
|
- <el-input v-model="form.famcall"></el-input>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="地址">
|
|
|
|
- <el-input v-model="form.address" clearable></el-input>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="电子邮箱">
|
|
|
|
- <el-input v-model="form.Email" clearable></el-input>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="备注"> <el-input type="textarea" :rows="7" placeholder="请输入内容" v-model="textarea"> </el-input> </el-form-item>
|
|
|
|
- </el-col>
|
|
|
|
- </el-row>
|
|
|
|
- </el-form>
|
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
|
- <el-button @click="dialogFormVisible = false">取 消</el-button>
|
|
|
|
- <el-button type="primary" @click="handleEdit">确 定</el-button>
|
|
|
|
- </div>
|
|
|
|
- </el-dialog>
|
|
|
|
|
|
+ <el-row class="register">
|
|
|
|
+ <el-col :span="24" class="btn">
|
|
|
|
+ <el-row :gutter="10">
|
|
|
|
+ <el-col :span="16"><h3>用户管理</h3></el-col>
|
|
|
|
+ <!-- 批量导入按钮没加 -->
|
|
|
|
+ <el-col :span="4"><el-button type="success" icon="el-icon-plus">批量导入</el-button></el-col>
|
|
|
|
+ <el-col :span="4"><el-button type="success" icon="el-icon-plus" @click="dialogFormVisible = true">用户注册</el-button></el-col>
|
|
|
|
+ </el-row>
|
|
</el-col>
|
|
</el-col>
|
|
- <el-col :span="10" style="padding: 30px 0;">
|
|
|
|
- <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
|
|
|
|
- <el-button slot="append" icon="el-icon-search"></el-button>
|
|
|
|
- </el-input>
|
|
|
|
|
|
+ <el-col :span="24" class="search">
|
|
|
|
+ <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" class="list">
|
|
|
|
+ <el-table :data="tableData" style="width: 100%" border stripe>
|
|
|
|
+ <el-table-column prop="name" align="center" label="姓名" width="100"> </el-table-column>
|
|
|
|
+ <el-table-column prop="age" align="center" label="年龄" width="100"> </el-table-column>
|
|
|
|
+ <el-table-column prop="nation" align="center" label="民族"> </el-table-column>
|
|
|
|
+ <el-table-column prop="date" align="center" label="身份证号"> </el-table-column>
|
|
|
|
+ <el-table-column prop="address" align="center" label="地址"> </el-table-column>
|
|
|
|
+ <el-table-column align="center" prop="state" label="状态" width="80">
|
|
|
|
+ <template v-slot="scoped">
|
|
|
|
+ {{ scoped.row.state === '0' ? '冻结' : '使用中' }}
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column fixed="right" align="center" label="操作" width="250">
|
|
|
|
+ <template v-slot="scoped">
|
|
|
|
+ <el-row type="flex" justify="center">
|
|
|
|
+ <el-col :span="6">
|
|
|
|
+ <el-button size="small" type="text" @click="openDialog(scoped.$index)">用户变更</el-button>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="6">
|
|
|
|
+ <el-button v-if="scoped.row.state == 1" size="small" type="text" @click="open1(scoped.$index)">注销</el-button>
|
|
|
|
+ <el-button v-if="scoped.row.state == 0" size="small" type="text" @click="open2(scoped.$index)">恢复</el-button>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ <el-col class="paging">
|
|
|
|
+ <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
|
|
|
|
+ </el-col>
|
|
</el-col>
|
|
</el-col>
|
|
- <el-col :span="4"><el-button type="success" icon="el-icon-plus">批量导入</el-button></el-col>
|
|
|
|
</el-row>
|
|
</el-row>
|
|
- <el-table :data="tableData" style="width: 100%" border stripe>
|
|
|
|
- <el-table-column prop="name" align="center" label="姓名" width="100"> </el-table-column>
|
|
|
|
- <el-table-column prop="age" align="center" label="年龄" width="100"> </el-table-column>
|
|
|
|
- <el-table-column prop="nation" align="center" label="民族"> </el-table-column>
|
|
|
|
- <el-table-column prop="date" align="center" label="身份证号"> </el-table-column>
|
|
|
|
- <el-table-column prop="address" align="center" label="地址"> </el-table-column>
|
|
|
|
- <el-table-column align="center" prop="state" label="状态" width="80">
|
|
|
|
- <template v-slot="scope">
|
|
|
|
- {{ scope.row.state === '0' ? '冻结' : '使用中' }}
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column fixed="right" align="center" label="操作" width="250">
|
|
|
|
- <template v-slot="scope">
|
|
|
|
- <el-row type="flex" justify="center">
|
|
|
|
- <el-col :span="6">
|
|
|
|
- <el-button size="small" type="text" @click="openDialog(scope.$index)">用户变更</el-button>
|
|
|
|
- </el-col>
|
|
|
|
- <el-col :span="6">
|
|
|
|
- <el-button v-if="scope.row.state == 1" size="small" type="text" @click="open1(scope.$index)">注销</el-button>
|
|
|
|
- <el-button v-if="scope.row.state == 0" size="small" type="text" @click="open2(scope.$index)">恢复</el-button>
|
|
|
|
- </el-col>
|
|
|
|
- </el-row>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- </el-table>
|
|
|
|
|
|
+ <el-dialog title="用户注册" :visible.sync="dialogFormVisible">
|
|
|
|
+ <el-form :model="form" label-position="left" label-width="auto" style="padding: 0 5px;">
|
|
|
|
+ <el-row :gutter="20">
|
|
|
|
+ <el-col :span="12">
|
|
|
|
+ <el-form-item label="公民身份号码">
|
|
|
|
+ <el-input v-model="form.ID_num" clearable></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="姓名">
|
|
|
|
+ <el-input v-model="form.name" clearable></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="年龄">
|
|
|
|
+ <el-input v-model="form.age" clearable></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="性别">
|
|
|
|
+ <el-radio v-model="form.sex" label="男">男</el-radio>
|
|
|
|
+ <el-radio v-model="form.sex" label="女">女</el-radio>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="民族">
|
|
|
|
+ <el-select v-model="form.nation" filterable placeholder="汉族">
|
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="登录密码">
|
|
|
|
+ <el-input v-model="form.password" show-password></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="确认密码">
|
|
|
|
+ <el-input v-model="form.repass" show-password></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="手机号码">
|
|
|
|
+ <el-input v-model="form.phone" clearable></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="12">
|
|
|
|
+ <el-form-item label="QQ">
|
|
|
|
+ <el-input v-model="form.ID_qq" clearable></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="微信">
|
|
|
|
+ <el-input v-model="form.wechat" clearable></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="家庭电话">
|
|
|
|
+ <el-input v-model="form.famcall"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="地址">
|
|
|
|
+ <el-input v-model="form.address" clearable></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="电子邮箱">
|
|
|
|
+ <el-input v-model="form.Email" clearable></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="备注"> <el-input type="textarea" :rows="7" placeholder="请输入内容" v-model="textarea"> </el-input> </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </el-form>
|
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
|
+ <el-button @click="dialogFormVisible = false">取 消</el-button>
|
|
|
|
+ <el-button type="primary" @click="handleEdit">确 定</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -192,6 +196,7 @@ export default {
|
|
handleEdit() {
|
|
handleEdit() {
|
|
let chData = this.form;
|
|
let chData = this.form;
|
|
const { index, ...form } = chData;
|
|
const { index, ...form } = chData;
|
|
|
|
+ form['state'] = 1;
|
|
console.log(index, form);
|
|
console.log(index, form);
|
|
if (index !== undefined) {
|
|
if (index !== undefined) {
|
|
this.$set(this.tableData, `${index}`, form);
|
|
this.$set(this.tableData, `${index}`, form);
|
|
@@ -219,13 +224,15 @@ export default {
|
|
})
|
|
})
|
|
.catch(_ => {});
|
|
.catch(_ => {});
|
|
},
|
|
},
|
|
- open1() {
|
|
|
|
- this.$confirm('此操作将永久注销该账号, 是否继续?', '提示', {
|
|
|
|
|
|
+ open1(num) {
|
|
|
|
+ console.log(num);
|
|
|
|
+ this.$confirm('确认注销此用户吗?', '提示', {
|
|
confirmButtonText: '确定',
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
type: 'warning',
|
|
})
|
|
})
|
|
.then(() => {
|
|
.then(() => {
|
|
|
|
+ this.$set(this.tableData[num], `state`, '0');
|
|
this.$message({
|
|
this.$message({
|
|
type: 'success',
|
|
type: 'success',
|
|
message: '注销成功!',
|
|
message: '注销成功!',
|
|
@@ -234,7 +241,7 @@ export default {
|
|
.catch(() => {
|
|
.catch(() => {
|
|
this.$message({
|
|
this.$message({
|
|
type: 'info',
|
|
type: 'info',
|
|
- message: '已取消注销',
|
|
|
|
|
|
+ message: '已取消',
|
|
});
|
|
});
|
|
});
|
|
});
|
|
},
|
|
},
|
|
@@ -264,7 +271,48 @@ export default {
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<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;
|
|
|
|
+}
|
|
|
|
+.paging {
|
|
|
|
+ text-align: right;
|
|
|
|
+ margin: 10px 0;
|
|
|
|
+}
|
|
.sizeA {
|
|
.sizeA {
|
|
padding: 30px;
|
|
padding: 30px;
|
|
}
|
|
}
|
|
|
|
+.paging {
|
|
|
|
+ text-align: right;
|
|
|
|
+ margin: 10px 0;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|