|
|
@@ -1,7 +1,124 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
- <div class="common-card"></div>
|
|
|
- <div class="common-card a-card-margin-top"></div>
|
|
|
+ <a-spin :spinning="loading">
|
|
|
+ <div class="common-card basic-information-box">
|
|
|
+ <div class="basic-information-title">新建账号</div>
|
|
|
+ <div class="user-form-div">
|
|
|
+ <a-form
|
|
|
+ :form="addAdminForm"
|
|
|
+ autocomplete="off"
|
|
|
+ style="width: 400px;"
|
|
|
+ @submit="handleSubmitForm"
|
|
|
+ >
|
|
|
+ <a-form-item
|
|
|
+ label="账号"
|
|
|
+ :label-col="labelCol"
|
|
|
+ :wrapper-col="wrapperCol"
|
|
|
+ >
|
|
|
+ <a-input
|
|
|
+ placeholder="输入账号"
|
|
|
+ :maxLength="10"
|
|
|
+ autocomplete="off"
|
|
|
+ allow-clear
|
|
|
+ v-decorator="[
|
|
|
+ 'userName',
|
|
|
+ {
|
|
|
+ rules: [{ required: true, message: '请输入账号！' }],
|
|
|
+ initialValue: '',
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="密码"
|
|
|
+ :label-col="labelCol"
|
|
|
+ :wrapper-col="wrapperCol"
|
|
|
+ >
|
|
|
+ <a-input
|
|
|
+ placeholder="输入密码"
|
|
|
+ :maxLength="10"
|
|
|
+ autocomplete="off"
|
|
|
+ allow-clear
|
|
|
+ v-decorator="[
|
|
|
+ 'password',
|
|
|
+ {
|
|
|
+ rules: [{ required: true, message: '请输入密码！' }],
|
|
|
+ initialValue: '',
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="确认密码"
|
|
|
+ :label-col="labelCol"
|
|
|
+ :wrapper-col="wrapperCol"
|
|
|
+ >
|
|
|
+ <a-input
|
|
|
+ placeholder="确认密码"
|
|
|
+ :maxLength="10"
|
|
|
+ autocomplete="off"
|
|
|
+ allow-clear
|
|
|
+ v-decorator="[
|
|
|
+ 'passwordSecond',
|
|
|
+ {
|
|
|
+ rules: [{ required: true, message: '请输入相同的密码！' }],
|
|
|
+ initialValue: '',
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="用户名"
|
|
|
+ :label-col="labelCol"
|
|
|
+ :wrapper-col="wrapperCol"
|
|
|
+ >
|
|
|
+ <a-input
|
|
|
+ placeholder="请输入用户名"
|
|
|
+ :maxLength="10"
|
|
|
+ autocomplete="off"
|
|
|
+ allow-clear
|
|
|
+ v-decorator="[
|
|
|
+ 'nickName',
|
|
|
+ {
|
|
|
+ rules: [{ required: true, message: '请输入用户名' }],
|
|
|
+ initialValue: '',
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ :wrapper-col="{
|
|
|
+ sm: { span: 12, offset: 12 },
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <a-button type="primary" html-type="submit">提交</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="common-card a-card-margin-top">
|
|
|
+ <!-- 表单 -->
|
|
|
+ <a-table
|
|
|
+ :columns="columns"
|
|
|
+ :data-source="tableData"
|
|
|
+ :row-key="(record) => record.registerTime"
|
|
|
+ :pagination="false"
|
|
|
+ >
|
|
|
+ <!-- <template slot="action" slot-scope="text, record"></template> -->
|
|
|
+ </a-table>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <div class="a-pagination-display">
|
|
|
+ <a-pagination
|
|
|
+ v-model="pagination.current"
|
|
|
+ :pageSize="pagination.pageSize"
|
|
|
+ :total.sync="pagination.total"
|
|
|
+ show-less-items
|
|
|
+ show-quick-jumper
|
|
|
+ @change="getAdminListFun"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-spin>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -11,7 +128,21 @@ export default {
|
|
|
props: {},
|
|
|
components: {},
|
|
|
data() {
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ loading: false, // 是否显示加载动画
|
|
|
+ // 基础信息的表单
|
|
|
+ labelCol: { span: 6 }, // 表单行中label的占位
|
|
|
+ wrapperCol: { span: 18 }, // 表单行中内容的占位
|
|
|
+ addAdminForm: this.$form.createForm(this, { name: 'addAdminForm' }), // 表单
|
|
|
+ // table
|
|
|
+ columns: {}, // 表格列配置
|
|
|
+ tableData: [], // 表格数据
|
|
|
+ pagination: {
|
|
|
+ pageSize: 10,
|
|
|
+ current: 1,
|
|
|
+ total: 0,
|
|
|
+ }, // 分页参数
|
|
|
+ };
|
|
|
},
|
|
|
created() {
|
|
|
this.initDataFun(); //初始化数据
|
|
|
@@ -22,7 +153,83 @@ export default {
|
|
|
computed: {},
|
|
|
methods: {
|
|
|
//初始化数据
|
|
|
- initDataFun() {},
|
|
|
+ initDataFun() {
|
|
|
+ // 表单的列的配置参数
|
|
|
+ this.columns = [
|
|
|
+ {
|
|
|
+ title: '账号',
|
|
|
+ dataIndex: 'userName',
|
|
|
+ key: 'userName',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '用户名',
|
|
|
+ dataIndex: 'nickName',
|
|
|
+ key: 'nickName',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '密码',
|
|
|
+ dataIndex: 'password',
|
|
|
+ key: 'password',
|
|
|
+ scopedSlots: { customRender: 'password' },
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.getAdminListFun(); // 查询：已有账号列表
|
|
|
+ },
|
|
|
+ // 查询：已有账号列表
|
|
|
+ getAdminListFun() {
|
|
|
+ this.loading = true;
|
|
|
+ // let params = {
|
|
|
+ // page: this.pagination.current,
|
|
|
+ // size: this.pagination.pageSize,
|
|
|
+ // };
|
|
|
+ this.$_http
|
|
|
+ .get(this.$_API.INTERFACE_GET_USER_LIST)
|
|
|
+ .then((res) => {
|
|
|
+ this.tableData = res.data.content;
|
|
|
+ this.pagination.total = res.data.totalElements; // 总条数
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 操作：新建
|
|
|
+ handleSubmitForm(e) {
|
|
|
+ e.preventDefault();
|
|
|
+ this.addAdminForm.validateFields((err, values) => {
|
|
|
+ if (!err) {
|
|
|
+ if (values.password !== values.passwordSecond) {
|
|
|
+ this.addAdminForm.setFields({
|
|
|
+ password: {
|
|
|
+ value: values.password,
|
|
|
+ errors: [new Error('密码输入不一致')],
|
|
|
+ },
|
|
|
+ passwordSecond: {
|
|
|
+ value: values.passwordSecond,
|
|
|
+ errors: [new Error('密码输入不一致')],
|
|
|
+ },
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ this.httpLoginFun(values); // 表单提交请求：新建管理员
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 表单提交请求：新建管理员
|
|
|
+ httpLoginFun(params) {
|
|
|
+ this.loading = true;
|
|
|
+ this.$_http
|
|
|
+ .post(this.$_API.INTERFACE_POST_USER_ADMIN, params)
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ this.$message.success('新建账号成功');
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -31,4 +238,18 @@ export default {
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
@import '~@/styles/common/variable.less';
|
|
|
+.app-container {
|
|
|
+ overflow-y: auto;
|
|
|
+ .basic-information-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: @mainColorBlack85;
|
|
|
+ margin-bottom: @paddingMarginVal;
|
|
|
+ }
|
|
|
+ .user-form-div {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
yellowtaotao