|
|
@@ -1,15 +1,102 @@
|
|
|
<template lang="html">
|
|
|
<div id="userMes">
|
|
|
- <template>
|
|
|
- <el-row>
|
|
|
- <el-col :span="6" class="sizeA"><span>用户管理</span></el-col>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-col :span="4" class="sizeA"><span>1</span></el-col>
|
|
|
- <el-col :span="4" class="sizeA"><span>2</span></el-col>
|
|
|
- <el-col :span="4" class="sizeA"><span>3</span></el-col>
|
|
|
- </el-row>
|
|
|
- </template>
|
|
|
+ <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-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>
|
|
|
+ <el-col :span="4"><el-button type="success" icon="el-icon-plus">批量导入</el-button></el-col>
|
|
|
+ </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>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -18,10 +105,161 @@ export default {
|
|
|
name: 'userMes',
|
|
|
props: {},
|
|
|
components: {},
|
|
|
- data: () => ({}),
|
|
|
+ data: () => ({
|
|
|
+ input: '',
|
|
|
+ textarea: '',
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ date: '5xxxx5xxxxxxxxxxxx',
|
|
|
+ age: '39',
|
|
|
+ sex: '男',
|
|
|
+ nation: '汉族',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄',
|
|
|
+ state: '0',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2xxxxx2xxxxxxxxxxx',
|
|
|
+ age: '40',
|
|
|
+ sex: '女',
|
|
|
+ nation: '维吾尔族',
|
|
|
+ name: '王',
|
|
|
+ address: '上海市普陀区金沙江路 1517 弄',
|
|
|
+ state: '1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '*****************X',
|
|
|
+ age: '35',
|
|
|
+ sex: '男',
|
|
|
+ nation: '汉族',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1519 弄',
|
|
|
+ state: '1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '##################',
|
|
|
+ age: '45',
|
|
|
+ sex: '男',
|
|
|
+ nation: '回族',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1516 弄',
|
|
|
+ state: '0',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ value: '汉族',
|
|
|
+ label: '汉族',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '回族',
|
|
|
+ label: '回族',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '维吾尔族',
|
|
|
+ label: '维吾尔族',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '白族',
|
|
|
+ label: '白族',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '藏族',
|
|
|
+ label: '藏族',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ value: '',
|
|
|
+ dialogFormVisible: false,
|
|
|
+ form: {
|
|
|
+ ID_num: '',
|
|
|
+ name: '',
|
|
|
+ age: '',
|
|
|
+ password: '',
|
|
|
+ repass: '',
|
|
|
+ phone: '',
|
|
|
+ address: '',
|
|
|
+ Email: '',
|
|
|
+ ID_qq: '',
|
|
|
+ wechat: '',
|
|
|
+ famcall: '',
|
|
|
+ other: '',
|
|
|
+ },
|
|
|
+ sex: '1',
|
|
|
+ }),
|
|
|
created() {},
|
|
|
computed: {},
|
|
|
- methods: {},
|
|
|
+ methods: {
|
|
|
+ handleEdit() {
|
|
|
+ let chData = this.form;
|
|
|
+ const { index, ...form } = chData;
|
|
|
+ console.log(index, form);
|
|
|
+ if (index !== undefined) {
|
|
|
+ this.$set(this.tableData, `${index}`, form);
|
|
|
+ this.$message.success('修改成功');
|
|
|
+ } else {
|
|
|
+ this.tableData.push(form);
|
|
|
+ }
|
|
|
+
|
|
|
+ this.handleCancel();
|
|
|
+ },
|
|
|
+ handleCancel() {
|
|
|
+ this.form = {};
|
|
|
+ this.dialogFormVisible = false;
|
|
|
+ },
|
|
|
+ openDialog(index) {
|
|
|
+ this.dialogFormVisible = true;
|
|
|
+ let data = JSON.parse(JSON.stringify(this.tableData[index]));
|
|
|
+ data[`index`] = index;
|
|
|
+ this.$set(this, `form`, data);
|
|
|
+ },
|
|
|
+ handleClose(done) {
|
|
|
+ this.$confirm('确认关闭？')
|
|
|
+ .then(_ => {
|
|
|
+ done();
|
|
|
+ })
|
|
|
+ .catch(_ => {});
|
|
|
+ },
|
|
|
+ open1() {
|
|
|
+ this.$confirm('此操作将永久注销该账号, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '注销成功!',
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消注销',
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ open2(num) {
|
|
|
+ console.log(num);
|
|
|
+ this.$confirm('确认恢复此用户吗?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.$set(this.tableData[num], `state`, '1');
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '恢复成功!',
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消',
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
