JingTieXueTang.Web/src/views/user/userManagementList.vue

<template>
  <div class="app-container">
    <a-spin :spinning="loading">
      <div class="common-card basic-information-box">
        <div class="basic-information-title">新建账号</div>
        <div class="basic-information-form">
          <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-password
                placeholder="输入密码"
                :maxLength="50"
                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-password
                placeholder="确认密码"
                :maxLength="50"
                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 basic-information-box">
        <div class="basic-information-title">已有账号</div>
        <!-- 表单 -->
        <a-table
          :columns="columns"
          :data-source="tableData"
          :row-key="(record) => record.registerTime"
          :pagination="false"
        >
          <template slot="password" slot-scope="text, record">
            <span>{{ record.isShow ? record.password : '******' }}</span>
            <icon-font
              class="iconFont"
              :type="record.isShow ? 'ali-icon-kejian' : 'ali-icon-bukejian'"
              @click="record.isShow = !record.isShow"
            ></icon-font>
          </template>
          <template slot="action" slot-scope="text, record">
            <a @click="userDelete(record)">删除</a>
          </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 class="company-info">
      <span>
        copyright © 浮游科技有限公司出品
      </span>
    </div> -->
  </div>
</template>

<script>
export default {
  name: 'userManagementList',
  props: {},
  components: {},
  data() {
    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(); //初始化数据
  },
  mounted() {},
  beforeDestroy() {},
  watch: {},
  computed: {},
  methods: {
    //初始化数据
    initDataFun() {
      // 表单的列的配置参数
      this.columns = [
        {
          title: '账号',
          dataIndex: 'userName',
          key: 'userName',
          width: 300,
        },
        {
          title: '用户名',
          dataIndex: 'nickName',
          key: 'nickName',
          width: 300,
        },
        {
          title: '密码',
          dataIndex: 'password',
          key: 'password',
          scopedSlots: { customRender: 'password' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          scopedSlots: { customRender: 'action' },
          width: 200,
        },
      ];
      this.getAdminListFun(); // 查询：已有账号列表
    },
    // 查询：已有账号列表
    getAdminListFun() {
      this.loading = true;
      let params = {
        page: this.pagination.current - 1,
        size: this.pagination.pageSize,
      };
      this.$_http
        .get(this.$_API.INTERFACE_GET_USER_LIST, { params })
        .then((res) => {
          let resdData = res.data.content;
          resdData.forEach((item) => {
            item.isShow = false;
          });
          this.tableData = [...resdData];
          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(() => {
          this.$message.success('新建账号成功');
          // 清空表单值
          this.addAdminForm.setFieldsValue({
            userName: '',
            password: '',
            passwordSecond: '',
            nickName: '',
          });
          this.loading = false;
          this.getAdminListFun(); // 查询：已有账号列表
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 操作：删除用户
    userDelete(record) {
      let that = this;
      that.$confirm({
        title: '删除',
        content: `确认删除 ${record.userName} 吗？`,
        okText: '确认',
        cancelText: '取消',
        onOk() {
          that.loading = true;
          let params = {
            ...record,
          };
          that.$_http
            .delete(that.$_API.INTERFACE_DELETE_USER_ADMIN, { data: params })
            .then(() => {
              that.loading = false;
              that.$message.success('删除用户成功');
              that.getAdminListFun(); // 查询：已有账号列表
            })
            .catch(() => {
              that.loading = false;
            });
        },
        onCancel() {},
      });
    },
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped>
@import '~@/styles/common/variable.less';
.app-container {
  .basic-information-title {
    margin-bottom: @paddingMarginVal;
  }
  .iconFont {
    margin-left: @paddingMarginVal;
    &:hover {
      color: @mainColorBlueNormal;
    }
  }
}
</style>