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>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import UserForm from '@/components/UserForm'
|
||||||
export default {
|
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>
|
</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>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in new issue