duan
2 years ago
parent
a70b083be7
commit
45c2197fc1
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div class="form-container">
|
||||
<el-row :gutter="15">
|
||||
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="姓名" prop="姓名">
|
||||
<el-input v-model="formData.姓名" placeholder="请输入姓名" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="手机号码" prop="field101">
|
||||
<el-input v-model="formData.field101" placeholder="请输入手机号码" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="性别" prop="field103">
|
||||
<el-select v-model="formData.field103" placeholder="请选择性别" clearable :style="{width: '100%'}">
|
||||
<el-option
|
||||
v-for="(item, index) in field103Options"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:disabled="item.disabled"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="电子邮箱" prop="field104">
|
||||
<el-input v-model="formData.field104" placeholder="请输入电子邮箱" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="工号" prop="field105">
|
||||
<el-input v-model="formData.field105" placeholder="请输入工号" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="QQ号码" prop="field106">
|
||||
<el-input v-model="formData.field106" placeholder="请输入QQ号码" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="角色" prop="field107">
|
||||
<el-select v-model="formData.field107" placeholder="请选择角色" clearable :style="{width: '100%'}">
|
||||
<el-option
|
||||
v-for="(item, index) in field107Options"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:disabled="item.disabled"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否启用" prop="field108" required>
|
||||
<el-switch v-model="formData.field108" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<div style="text-align: center;margin-left: 50px">
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm">保存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'UserForm',
|
||||
components: {},
|
||||
// eslint-disable-next-line vue/require-prop-types
|
||||
props: ['handlecancel', 'propsformdata', 'handlesubmit'],
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
姓名: undefined,
|
||||
field101: undefined,
|
||||
field103: undefined,
|
||||
field104: undefined,
|
||||
field105: undefined,
|
||||
field106: undefined,
|
||||
field107: undefined,
|
||||
field108: false
|
||||
},
|
||||
rules: {
|
||||
姓名: [{
|
||||
required: true,
|
||||
message: '请输入姓名',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
field101: [{
|
||||
required: true,
|
||||
message: '请输入手机号码',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
field103: [{
|
||||
required: true,
|
||||
message: '请选择性别',
|
||||
trigger: 'change'
|
||||
}],
|
||||
field104: [],
|
||||
field105: [],
|
||||
field106: [],
|
||||
field107: [{
|
||||
required: true,
|
||||
message: '请选择角色',
|
||||
trigger: 'change'
|
||||
}]
|
||||
},
|
||||
field103Options: [{
|
||||
'label': '男',
|
||||
'value': 1
|
||||
}, {
|
||||
'label': '女',
|
||||
'value': 2
|
||||
}],
|
||||
field107Options: [{
|
||||
'label': '选项一',
|
||||
'value': 1
|
||||
}, {
|
||||
'label': '选项二',
|
||||
'value': 2
|
||||
}]
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
// handlecancel 取消时调用 propsformdata初始化form数据 handlesubmit提交表单
|
||||
watch: {
|
||||
propsformdata: {
|
||||
handler(newValue, oldValue) {
|
||||
this.formData = { ...newValue }
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
submitForm() {
|
||||
this.$refs['elForm'].validate(valid => {
|
||||
if (!valid) return
|
||||
this.$emit('handlesubmit', this.formData)
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.$refs['elForm'].resetFields()
|
||||
},
|
||||
handleCancel() {
|
||||
this.$emit('handlecancel')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.form-container{
|
||||
margin-right: 50px;
|
||||
}
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@ -1,13 +1,261 @@
|
||||
<template>
|
||||
<h1>用户根目录</h1>
|
||||
<div class="main-container">
|
||||
<div class="title">用户管理</div>
|
||||
<div class="header">
|
||||
<el-input placeholder="请输入工号" />
|
||||
<el-input placeholder="请输入姓名" />
|
||||
<el-select placeholder="请输入角色" :value="manageer" />
|
||||
<el-select placeholder="账号状态" :value="manageer" />
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
|
||||
<el-button type="primary" plain @click="handleAddUser()"><i class="el-icon-plus" />新增用户</el-button>
|
||||
<div class="header-right">
|
||||
<el-button icon="el-icon-delete" circle @click="handleDelTem" />
|
||||
<el-button icon="el-icon-refresh" circle @click="handleRefresh" />
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
:header-cell-style="headerStyle"
|
||||
height="460"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="工号"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="姓名"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="角色"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="性别"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="address"
|
||||
label="联系电话"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="address"
|
||||
label="电子邮箱"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="创建时间"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="status"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="操作"
|
||||
align="center"
|
||||
width="300"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="primary" plain @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
||||
<el-button size="mini" @click="handleFace(scope.$index, scope.row)">录入人脸</el-button>
|
||||
<el-button size="mini" @click="handleRole(scope.$index, scope.row)"><svg-icon icon-class="分配权限" />分配功能权限</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="text-align: center">
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:current-page.sync="page"
|
||||
:total="total"
|
||||
:page-size.sync="page_size"
|
||||
hide-on-single-page
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</div>
|
||||
<el-dialog
|
||||
:title="userFormTitle"
|
||||
:visible.sync="dialogVisible"
|
||||
width="38%"
|
||||
@close="userFormDialogClose"
|
||||
>
|
||||
<UserForm :propsformdata="userFormData" @handlesubmit="handleUserSubmit" @handlecancel="handleUserFormCancel" />
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="分配用户权限"
|
||||
:visible.sync="roleDialogVisible"
|
||||
width="30%"
|
||||
>
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="试剂管理" name="first">
|
||||
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
|
||||
<div style="margin: 15px 0;" />
|
||||
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
||||
<el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="标准品管理" name="second">标准品管理</el-tab-pane>
|
||||
<el-tab-pane label="耗材管理" name="third">耗材管理</el-tab-pane>
|
||||
<el-tab-pane label="仪器管理" name="fourth">仪器管理</el-tab-pane>
|
||||
</el-tabs>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<div style="text-align: center">
|
||||
<el-button @click="roleDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="roleDialogVisible = false">确 定</el-button>
|
||||
</div>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserForm from '@/components/UserForm'
|
||||
export default {
|
||||
name: 'User'
|
||||
name: 'User',
|
||||
components: { UserForm },
|
||||
data() {
|
||||
return {
|
||||
tableData: [
|
||||
{
|
||||
date: 1,
|
||||
name: 'test'
|
||||
}
|
||||
],
|
||||
manageer: null,
|
||||
headerStyle: { 'background': '#E6E6E6' },
|
||||
dialogVisible: false,
|
||||
userFormTitle: '',
|
||||
userFormData: {},
|
||||
multipleSelection: [],
|
||||
// 分配用户权限
|
||||
roleDialogVisible: false,
|
||||
activeName: 'first',
|
||||
checkAll: false,
|
||||
checkedCities: ['上海', '北京'],
|
||||
cities: ['上海', '北京', '广州', '深圳'],
|
||||
isIndeterminate: true,
|
||||
page: 1,
|
||||
page_size: 15,
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
pageChange(page) {
|
||||
this.page = page
|
||||
},
|
||||
handleCheckAllChange(val) {
|
||||
this.checkedCities = val ? this.cities : []
|
||||
this.isIndeterminate = false
|
||||
},
|
||||
handleCheckedCitiesChange(value) {
|
||||
const checkedCount = value.length
|
||||
this.checkAll = checkedCount === this.cities.length
|
||||
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val
|
||||
},
|
||||
handleUserSubmit(formdata) {
|
||||
const data = {
|
||||
...this.userFormData,
|
||||
...formdata
|
||||
}
|
||||
// TODO 提交表单
|
||||
console.log(data)
|
||||
},
|
||||
userFormDialogClose() {
|
||||
this.userFormData = {}
|
||||
},
|
||||
handleUserFormCancel() {
|
||||
this.dialogVisible = true
|
||||
this.userFormData = {}
|
||||
},
|
||||
handleAddUser() {
|
||||
this.userFormTitle = '新增用户'
|
||||
this.dialogVisible = true
|
||||
},
|
||||
handleEdit(index, row) {
|
||||
this.userFormTitle = '编辑用户'
|
||||
this.userFormData = row
|
||||
this.dialogVisible = true
|
||||
},
|
||||
handleFace(index, row) {
|
||||
|
||||
},
|
||||
handleRole(index, row) {
|
||||
this.roleDialogVisible = true
|
||||
},
|
||||
handleDelTem() {
|
||||
if (this.multipleSelection.length === 0) {
|
||||
this.$message.warning('请选择需要删除的用户')
|
||||
return
|
||||
}
|
||||
this.$confirm('确定要删除用户“陈小红”吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
})
|
||||
})
|
||||
},
|
||||
handleRefresh() {
|
||||
|
||||
},
|
||||
handleSearch() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.main-container{
|
||||
min-height:calc(100vh - 12rem) ;
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
background: white;
|
||||
.title{
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
}
|
||||
.header{
|
||||
margin: 1rem 0 1rem 0;
|
||||
.el-input{
|
||||
width: 9.375rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.el-select {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.header-right{
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in new issue