water-ldht/src/views/set/manage.vue

<template>
  <div class="manage-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户列表" name="first">
        <vab-query-form>
          <el-input v-model="input" placeholder="用户名"></el-input>
          <el-input v-model="input" placeholder="电话号码"></el-input>
          <el-input v-model="input" placeholder="用户昵称"></el-input>
          <el-button type="primary">{{ $t('defalult.cx') }}</el-button>
          <el-button type="primary" plain>
            {{ $t('defalult.chongz') }}
          </el-button>
          <el-button type="primary" @click="dialogFormVisible = true">
            新增用户
          </el-button>
          <el-dialog v-model="dialogFormVisible" title="编辑">
            <el-form :model="form">
              <el-form-item label="上级分类" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="分类名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="分类排序" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div class="dialog-footer">
              <el-button @click="dialogFormVisible = false">
                {{ $t('defalult.qx') }}
              </el-button>
              <el-button type="primary" @click="dialogFormVisible = false">
                确定
              </el-button>
            </div>
          </el-dialog>
        </vab-query-form>
        <el-table :data="tableData" border stripe style="width: 100%">
          <el-table-column
            prop="id"
            label="ID"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="code"
            :label="$t('staff.yhm')"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            :label="$t('staff.xm')"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="tel"
            label="电话号码"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="sign"
            label="最近登录时间"
            width="150"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="enroll"
            label="登录次数"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="company"
            label="公司名称"
            width="200"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="type"
            label="用户类型"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="role"
            label="角色"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="date"
            label="创建日期"
            width="150"
            align="center"
          ></el-table-column>
          <el-table-column
            fixed="right"
            :label="$t('defalult.cz')"
            width="200"
            align="center"
          >
            <el-button type="text" @click="dialogFormVisible = true">
              {{ $t('defalult.bj') }}
            </el-button>
            <el-dialog v-model="dialogFormVisible" title="编辑">
              <el-form :model="form">
                <el-form-item label="上级分类" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="分类名称" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="分类排序" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">
                  {{ $t('defalult.qx') }}
                </el-button>
                <el-button type="primary" @click="dialogFormVisible = false">
                  确 定
                </el-button>
              </div>
            </el-dialog>
            <el-button type="text" size="small">
              {{ $t('defalult.sc') }}
            </el-button>
          </el-table-column>
        </el-table>
        <vab-query-form>
          <vab-query-form-left-panel></vab-query-form-left-panel>
          <vab-query-form-right-panel>
            <el-pagination
              :current-page="currentPage4"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </vab-query-form-right-panel>
        </vab-query-form>
      </el-tab-pane>
      <el-tab-pane label="角色管理" name="second">
        <vab-query-form>
          <el-button type="primary" @click="dialogFormIp = true">
            添加角色
          </el-button>
        </vab-query-form>
        <el-table :data="roleData" border stripe style="width: 100%">
          <el-table-column
            prop="id"
            label="ID"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="角色名"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="status"
            :label="$t('dataEnquiry.zt')"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="message"
            label="备注信息"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            :label="$t('grouping.cjsj')"
            width="150"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="updateTime"
            :label="$t('grouping.gxsj')"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            fixed="right"
            :label="$t('defalult.cz')"
            align="center"
          >
            <el-button type="text" @click="dialogIpEdit = true">
              {{ $t('defalult.bj') }}
            </el-button>
            <el-button type="text" size="small">
              {{ $t('defalult.sc') }}
            </el-button>
            <el-button type="text" size="small">角色授权</el-button>
          </el-table-column>
        </el-table>
        <vab-query-form>
          <vab-query-form-right-panel>
            <el-pagination
              :background="background"
              :current-page="queryForm.pageNo"
              :layout="layout"
              :page-size="queryForm.pageSize"
              :total="total"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            ></el-pagination>
          </vab-query-form-right-panel>
        </vab-query-form>
      </el-tab-pane>
      <el-tab-pane label="部门管理" name="third">部门管理</el-tab-pane>
    </el-tabs>
    <role-edit ref="edit"></role-edit>
  </div>
</template>

<script>
import { getList, doDelete, doEdit } from '@/api/role';
export default {
  name: 'Manage',
  data() {
    return {
      roleData: [],
      lazy: true,
      activeName: 'first',
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      input: '',
      textarea: '',
      list: [],
      background: true,
      listLoading: true,
      elementLoadingText: '正在加载...',
      queryForm: {
        page: 1,
        size: 20,
        name: '',
      },
    };
  },
  computed: {
    height() {
      return 500;
    },
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.paneName == 'second') {
        this.fetchData();
      }
    },
    async menuStatus(status, id) {
      const { code, msg } = await doEdit({ status: status, id: id });
      if (code == 0) {
        this.$notify({
          title: msg,
          type: 'success',
        });
      } else {
        this.$notify.error({
          title: msg,
        });
      }
      this.fetchData();
    },
    async fetchData() {
      this.listLoading = true;
      console.log('queryForm=' + this.queryForm);
      const { data, totalCount } = await getList(this.queryForm);
      this.roleData = data;
      this.total = totalCount;
      setTimeout(() => {
        this.listLoading = false;
      }, 500);
    },
    handleAdd() {
      this.$refs['edit'].showEdit();
    },
    handleEdit(row) {
      this.$refs['edit'].showEdit(row);
    },
    handleSizeChange(val) {
      this.queryForm.size = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.queryForm.page = val;
      this.fetchData();
    },
    handleDelete(row) {
      if (row.id) {
        this.$confirm('你确定要删除当前项吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            const { msg } = doDelete({ menuId: row.id });
            this.$message({
              type: 'success',
              message: msg,
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            });
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.manage-container {
  width: 100%;
  .vab-query-form {
    margin-bottom: 30px;
    .el-input {
      width: 180px;
      margin-right: 20px;
    }
  }
}
</style>