1.员工管理

master
panqihua 2 years ago
parent 4552ee1a80
commit 653deca63c
  1. 107
      src/views/components/staff_management/employee_list.vue
  2. 108
      src/views/components/staff_management/role_management.vue

@ -0,0 +1,107 @@
<template>
<div class="app-container">
<el-form ref="form" :model="queryParams" label-width="80px" inline>
<el-form-item>
<el-input placeholder="请输入员工名称"></el-input>
</el-form-item>
<el-form-item>
<el-select v-model="queryParams.status" placeholder="全部" clearable style="width: 240px">
<el-option v-for="dict in dict.type.employee_status" :key="dict.value" :label="dict.label"
:value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
<el-button>重置</el-button>
</el-form-item>
<br/>
<el-button type="primary" @click="open=true">新增员工</el-button>
<el-button>批量锁定</el-button>
<el-button>批量开启</el-button>
<el-button>批量删除</el-button>
<el-table :data="dataList" border class="table">
<el-table-column type="selection"></el-table-column>
<el-table-column label="ID">1</el-table-column>
<el-table-column label="员工姓名">张三</el-table-column>
<el-table-column label="手机号">1888888888888</el-table-column>
<el-table-column label="角色">角色1角色2</el-table-column>
<el-table-column label="状态">
<el-switch/>
</el-table-column>
<el-table-column label="操作">
<el-button type="text">编辑</el-button>
<el-button type="text">删除</el-button>
</el-table-column>
</el-table>
</el-form>
<el-dialog :visible.sync="open" title="新增员工">
<el-form :model="addForm" inline label-width="100px">
<el-form-item label="员工名称">
<el-input placeholder="请输入"/>
</el-form-item>
<br/>
<el-form-item label="手机号">
<el-input placeholder="请输入"/>
</el-form-item>
<br/>
<el-form-item label="登陆密码">
<el-input placeholder="不填默认123456" type="password" show-password/>
</el-form-item>
<br/>
<el-form-item label="角色">
<template v-for="(item,index) in addForm.roles">
<br v-if="index>0"/>
<el-select placeholder="选择角色" v-model="addForm.roles[index]" :class="{'mt':index>0}"/>
<i class="el-icon-plus" @click="addForm.roles.push(undefined)"/>
<i class="el-icon-minus" v-if="index>0" @click="addForm.roles.splice(index,1)"/>
</template>
</el-form-item>
</el-form>
<div class="text-center">
<el-button type="primary" @click="save">保存</el-button>
<el-button>重置</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'EmployeeList',
dicts: ['employee_status'],
data() {
return {
open: false,
dataList: [{}],
addForm: {
roles: [undefined]
},
queryParams: {
status: undefined
}
}
},
methods: {
save() {
this.$modal.msgSuccess('保存成功')
this.open = false
}
}
}
</script>
<style scoped lang="scss">
.table {
margin-top: 10px;
}
.mt {
margin-top: 10px;
}
i {
color: #1684FC;
margin-left: 10px;
}
</style>

@ -0,0 +1,108 @@
<template>
<div class="app-container">
<el-form :model="queryParams" inline>
<el-form-item>
<el-input placeholder="请输入角色名称"/>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入角色ID"/>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
<el-button>重置</el-button>
</el-form-item>
</el-form>
<el-button type="primary" @click="open=true"> 新增角色</el-button>
<el-button>批量锁定</el-button>
<el-button>批量开启</el-button>
<el-button>批量删除</el-button>
<el-table :data="dataList" border class="table">
<el-table-column type="selection" align="center"></el-table-column>
<el-table-column type="index" align="center" label="序号"></el-table-column>
<el-table-column align="center" label="角色名称">财务主管</el-table-column>
<el-table-column align="center" label="权限">首页财务管理</el-table-column>
<el-table-column align="center" label="备注"></el-table-column>
<el-table-column align="center" label="创建时间">2022-12-31 12:31</el-table-column>
<el-table-column align="center" label="状态">
<el-switch/>
</el-table-column>
<el-table-column align="center" label="操作">
<el-button type="text">编辑</el-button>
<el-button type="text">删除</el-button>
</el-table-column>
</el-table>
<el-dialog :visible.sync="open" title="新增角色">
<el-form inline label-width="100px">
<el-form-item label="角色名称">
<el-input placeholder="请输入"></el-input>
</el-form-item>
<br/>
<el-form-item label="序号">
<el-input placeholder="数字越小排名越靠前"></el-input>
</el-form-item>
<br/>
<el-form-item label="是否禁用">
<el-switch/>
</el-form-item>
<br/>
<el-form-item label="备注">
<el-input type="textarea" :autosize="{minRows:3}" placeholder="请输入"></el-input>
</el-form-item>
<br/>
<el-form-item label="选择权限">
<el-button type="text">全选</el-button>
</el-form-item>
<br/>
<el-form-item>
<el-tree :data="permissions" show-checkbox node-key="id"/>
</el-form-item>
</el-form>
<div class="text-center">
<el-button type="primary" @click="save">保存</el-button>
<el-button>重置</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'RoleManagement',
data() {
return {
permissions: [{ id: 33, label: '首页' }, {
id: 1,
label: '用户管理',
children: [{
id: 4,
label: '编辑'
}, {
id: 5,
label: '查看'
}, {
id: 6,
label: '删除'
}]
}],
open: false,
dataList: [{}],
queryParams: {}
}
},
methods: {
save() {
this.$modal.msgSuccess('保存成功')
this.open = false
}
}
}
</script>
<style scoped lang="scss">
.table {
margin-top: 10px;
}
</style>
Loading…
Cancel
Save