MusicRoadUI/src/layout/components/User/index.vue

<template>
  <div class="userBox">
    <el-form :inline="true" :model="queryParams" ref="queryForm" class="el-form2">
      <el-form-item label="角色" prop="roleType">
        <el-select
          class="input2"
          v-model="queryParams.roleType"
          placeholder="角色类型"
          clearable
          size="mini"
          style="width: 200px"
        >
          <el-option
            class="option1"
            v-for="dict in roleTypeArr"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="姓名" prop="roleName">
        <el-input v-model="queryParams.roleName" placeholder class="input2" size="mini"></el-input>
      </el-form-item>

      <el-button
        icon="el-icon-search"
        class="searchButton"
        type="primary"
        size="mini"
        @click="handleQuery"
      >查询</el-button>
      <el-button icon="el-icon-refresh" type="primary" size="mini" @click="resetQuery">重置</el-button>
      <el-button
        class="addButton"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="editRole"
      >新增</el-button>
    </el-form>
    <div class="roleListBox">
      <el-table :data="roleList" style="width: 100%">
        <el-table-column prop="number" type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="roleName" label="用户姓名" align="center"></el-table-column>
        <el-table-column prop="roleType" label="角色" align="center"></el-table-column>
        <el-table-column prop="roleStatus" type="用户状态" width="100" label="序号" align="center"></el-table-column>
        <el-table-column prop="createBy" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="action" label="操作" width="250" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="revise(scope.row)">修改</el-button>
            <el-button size="mini" type="primary" @click="stopStatus(scope.row)">停用</el-button>
            <el-button size="mini" type="primary" @click="revisePassword(scope.row)">重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
     <!-- 新增用户对话框 -->
    <el-dialog title :visible.sync="roleHandle" width="20%" style="top:20vh" center>
      <el-form ref="roleForm" :model="roleForm"  label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="姓名" prop="roleName">
              <el-input placeholder="" v-model="roleForm.roleName" class="el-input1" size="mini"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="角色" prop="roleType">
             <el-select
          class="input2"
          v-model="roleForm.roleType"
          placeholder="角色类型"
          clearable
          size="mini"
          style="width: 200px"
        >
          <el-option
            class="option1"
            v-for="dict in roleTypeArr"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
           </el-select>
            </el-form-item>
          </el-col>
        </el-row>
       
       
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="roleHandle = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style  scoped>
.roleListBox{
  margin-top: 20px;
}
.addButton {
  display: block;
  margin-top: -5px;
  margin-left: 0px;
}
.searchButton {
  margin-top: 5px;
  margin-left: 25px;
}
.userBox {
  width: 100%;
  height: 100%;
}
::v-deep .el-form2 input::-webkit-input-placeholder {
  color: gray !important ;
}
::v-deep .input2 .el-input__suffix {
  right: 10px !important;
}
::v-deep .input2 .el-popper[x-placement^="bottom"] .popper__arrow {
  left: 100px !important;
}
::v-deep .input2 .el-input__inner {
  background: #1c257f !important;
  border: 1px solid rgba(25, 186, 139, 0.17) !important;
  color: white !important;
  text-align: left !important;
  letter-spacing: 0px !important;
}
::v-deep .input2 .el-input--mini {
  font-size: 14px !important;
  color: gray !important;
}

</style>
<script>
import flexible from "@/layout/flexible.js";
export default {
  data() {
    return {

      //查询参数
      queryParams: {
        roleType: null,
        roleName: null,
      },
      roleHandle:false,
      roleForm:{
        roleName:null,
        roleType:null,
      },
      roleList: [
        {
          roleName: "admin",
          roleType: "管理员",
          roleStatus: "正常",
          createBy: "2020.22.22"
        },
         {
          roleName: "小张",
          roleType: "操作员",
          roleStatus: "正常",
          createBy: "2020.22.22"
        },
        {
          roleName: "小王",
          roleType: "操作员",
          roleStatus: "正常",
          createBy: "2020.22.22"
        },
      ],
      roleTypeArr: [
        {
          value: 1,
          label: "管理员"
        },
        {
          value: 2,
          label: "操作员"
        },
      ],
        
    };
  },

  methods: {
    //修改操作
    revise() {},
    //停用状态操作
    stopStatus() {},
    //重置密码操作
    revisePassword() {},
    //查询操作
    handleQuery() {},
    //重置操作
    resetQuery() {},
    //新增操作
    editRole() {
      this.roleHandle=true;
    },
    //确定按钮操作
    submitForm(){
       this.roleHandle=false;
    },
  }
};
</script>