ZERO_CODE/ZeroCodeProject/project_template/user/user.vue

<template>
  <div class="main_box">
    <h2>用户管理</h2>
    <el-button class="user_add" @click="dialogVisible3 = true">角色新建</el-button>
    <el-table :data="tableData"
              style="width: 100%;height: 604px"
              @selection-change="handleSelectionChange"
              :header-cell-style="{'text-align':'center','background-color':'#389F37','height':'60px','color':'#ffffff','font-size':'15px','font-weight':'400'}"
              :cell-style="{'text-align':'center'}"
              :cell-class-name="cellStyle"
              @select="handleSelection"
              :row-class-name="tableRowClassName"
    >
      <el-table-column fixed label="Operations" width="200">
        <template #default="scope">
          <el-button link class="table_operation_button" @click="handleClick(scope.row)"
          >编辑
          </el-button
          >
          <el-button link class="table_operation_button">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column fixed prop="user_name" label="用户名"/>
      <el-table-column prop="user_number" label="用户编号"/>
      <el-table-column label="用户组">
        <template #default="scope">
          <el-tag v-for="(gp,index) in scope.row.grope" :key="index" class="ml-2 tag" type="success">{{ gp }}</el-tag>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
        v-model="dialogVisible"
        title="编辑"
        width="70%"
    >
      <el-form :model="form" ref="form" :inline="true" class="demo-form-inline" style="" label-width="80px">
        <el-form-item label="用户名称">
          <el-input v-model="form.user_name" class="input"/>
        </el-form-item>
        <el-form-item label="用户编号">
          <el-input v-model="form.user_number" class="input"/>
        </el-form-item>
        <el-form-item label="用户组群">
          <el-tag v-for="(gp,index) in form.grope" :key="index" class="ml-2 tag" type="success">{{ gp }}</el-tag>
          <el-button @click="Add_group" class="Add_group">修改</el-button>
        </el-form-item>
      </el-form>
      <div class="button_box" style="">
        <el-button class="save_button" @click="Edit_Submit">提交</el-button>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false" class="dialog_button">取 消</el-button>
        <el-button class="dialog_button" @click="dialogVisible = false">
          确 定
        </el-button>
      </span>
      </template>
    </el-dialog>

    <el-dialog
        v-model="dialogVisible1"
        title="选择权限"
        width="50%"
    >
      <el-table :data="user_group" ref="user_group_table" style="width: 100%;height: 604px"
                @selection-change="handleSelectionChange"
                :header-cell-style="{'text-align':'center','background-color':'#389F37','height':'60px','color':'#ffffff','font-size':'15px','font-weight':'400'}"
                :cell-style="{'text-align':'center'}"
                :cell-class-name="cellStyle"
                @select="handleSelection"
                :row-class-name="tableRowClassName"
                :row-key="(row) => { return row.uuid }">
        <el-table-column type="selection"/>
        <el-table-column fixed prop="user_group_name" label="用户组名"/>
        <el-table-column prop="user_group_number" label="用户组编号"/>
      </el-table>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible1 = false" class="dialog_button">取 消</el-button>
        <el-button class="dialog_button" @click="conform_add">
          确 定
        </el-button>
      </span>
      </template>
    </el-dialog>

    <el-dialog
        v-model="dialogVisible3"
        title="新建用户"
        width="50%"
    >
      <el-form :model="add_form" ref="form" :inline="true" class="demo-form-inline" style="" label-width="100px">
        <el-form-item label="员工名称" style="">
          <el-input v-model="add_form.user_name" placeholder="员工名称" class="input"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="员工密码" style="">
          <el-input v-model="add_form.user_password" placeholder="输入密码" class="input"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="重复员工密码" style="">
          <el-input v-model="add_form.repass_password" placeholder="重复输入密码" class="input"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible3 = false" class="dialog_button">取 消</el-button>
        <el-button class="dialog_button" @click="add_user">
          确 定
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script src="./user.js"></script>

<style scoped src="./user.css"></style>