| | |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="getData()">查询</el-button> |
| | | <el-button type="primary" plain @click="resetData()" |
| | | >重置</el-button |
| | | > |
| | | <el-button type="primary" plain @click="resetData()">重置</el-button> |
| | | <!-- <el-button type="text">高级搜索<i class="el-icon-arrow-down el-icon--right" /></el-button> --> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <div class="serve-btn"> |
| | | <el-button |
| | | type="primary" |
| | | icon="el-icon-plus" |
| | | @click="dialogFormVisible = true" |
| | | >新增人员</el-button |
| | | > |
| | | |
| | | <el-dialog |
| | | :title="isUpdate == true ? '更新人员信息' : '新增人员'" |
| | | :visible.sync="dialogFormVisible" |
| | | width="30%" |
| | | > |
| | | <el-form :model="form" ref="form" :rules="rules"> |
| | | <el-form-item |
| | | label="账号" |
| | | :label-width="formLabelWidth" |
| | | prop="account" |
| | | > |
| | | <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">新增人员</el-button> |
| | | <el-dialog :title="isUpdate == true ? '更新人员信息' : '新增人员'" :visible.sync="dialogFormVisible" width="30%"> |
| | | <el-form :model="form" ref="form" :rules="rules" style="padding-right: 50px;"> |
| | | <el-form-item label="账号" :label-width="formLabelWidth" prop="account"> |
| | | <el-input v-model="form.account" /> |
| | | </el-form-item> |
| | | <el-form-item label="年龄" :label-width="formLabelWidth"> |
| | | <el-input v-model="form.age" /> |
| | | </el-form-item> |
| | | <el-form-item |
| | | label="邮箱" |
| | | :label-width="formLabelWidth" |
| | | prop="email" |
| | | > |
| | | <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email"> |
| | | <el-input v-model="form.email" /> |
| | | </el-form-item> |
| | | <el-form-item |
| | | label="名字" |
| | | :label-width="formLabelWidth" |
| | | prop="name" |
| | | > |
| | | <el-form-item label="名字" :label-width="formLabelWidth" prop="name"> |
| | | <el-input v-model="form.name" /> |
| | | </el-form-item> |
| | | <el-form-item |
| | | label="电话" |
| | | :label-width="formLabelWidth" |
| | | prop="phone" |
| | | > |
| | | <el-form-item label="电话" :label-width="formLabelWidth" prop="phone"> |
| | | <el-input v-model="form.phone" /> |
| | | </el-form-item> |
| | | |
| | | <el-form-item |
| | | label="部门" |
| | | :label-width="formLabelWidth" |
| | | required |
| | | prop="organizationId" |
| | | > |
| | | <el-cascader |
| | | style="width: 100%" |
| | | :options="options" |
| | | :props="myProp" |
| | | v-model="form.organizationId" |
| | | clearable |
| | | ></el-cascader> |
| | | <el-form-item label="部门" :label-width="formLabelWidth" required prop="organizationId"> |
| | | <el-cascader style="width: 100%" :options="options" :props="myProp" v-model="form.organizationId" |
| | | clearable></el-cascader> |
| | | </el-form-item> |
| | | |
| | | <el-form-item |
| | | label="权限" |
| | | :label-width="formLabelWidth" |
| | | prop="roleId" |
| | | > |
| | | <el-select |
| | | v-model="form.roleId" |
| | | clearable |
| | | style="width: 100%" |
| | | placeholder="请选择权限" |
| | | > |
| | | <el-option |
| | | v-for="item in roleList" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="item.id" |
| | | > |
| | | <el-form-item label="权限" :label-width="formLabelWidth" prop="roleId"> |
| | | <el-select v-model="form.roleId" clearable style="width: 100%" placeholder="请选择权限"> |
| | | <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | |
| | | </div> |
| | | <div class="content-main"> |
| | | <div class="personner-table"> |
| | | <el-table |
| | | ref="personnerlTable" |
| | | height="calc(100vh - 240px)" |
| | | border |
| | | :cell-style="{ textAlign: 'center' }" |
| | | <el-table ref="personnerlTable" height="calc(100vh - 240px)" border :cell-style="{ textAlign: 'center' }" |
| | | :header-cell-style="{ |
| | | border: '0px', |
| | | background: '#f5f7fa', |
| | | color: '#606266', |
| | | boxShadow: 'inset 0 1px 0 #ebeef5', |
| | | textAlign: 'center', |
| | | }" |
| | | @filter-change="fnFilterChangeInit" |
| | | :data="personnerlTable" |
| | | style="width: 100%" |
| | | > |
| | | }" @filter-change="fnFilterChangeInit" :data="personnerlTable" style="width: 100%"> |
| | | <el-table-column prop="username" label="角色名称" min-width="120" /> |
| | | <el-table-column prop="roleName" label="角色权限" min-width="120" /> |
| | | <el-table-column prop="age" label="年龄" min-width="150"> |
| | |
| | | }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="jobState" |
| | | label="在职状态" |
| | | min-width="120" |
| | | :filters="[ |
| | | <el-table-column prop="jobState" label="在职状态" min-width="120" :filters="[ |
| | | { text: '在职', value: 1 }, |
| | | { text: '离岗', value: 0 }, |
| | | ]" |
| | | column-key="status" |
| | | :filter-method="filterTag" |
| | | filter-placement="bottom-end" |
| | | > |
| | | ]" column-key="status" :filter-method="filterTag" filter-placement="bottom-end"> |
| | | <template slot-scope="scope"> |
| | | <el-tag |
| | | :type="scope.row.jobState === 0 ? 'danger' : 'success'" |
| | | disable-transitions |
| | | >{{ scope.row.jobState === 0 ? "离岗" : "在职" }}</el-tag |
| | | > |
| | | <el-tag :type="scope.row.jobState === 0 ? 'danger' : 'success'" |
| | | disable-transitions>{{ scope.row.jobState === 0 ? "离岗" : "在职" }}</el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" min-width="120"> |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | type="text" |
| | | size="small" |
| | | @click="handleClick(scope.row)" |
| | | >编辑</el-button |
| | | > |
| | | <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <div> |
| | | <!-- 分页器 --> |
| | | <el-pagination |
| | | :current-page="currentPage" |
| | | :page-sizes="[10, 15, 20, 25]" |
| | | :page-size="pageSize" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="total" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | /> |
| | | <el-pagination :current-page="currentPage" :page-sizes="[10, 15, 20, 25]" :page-size="pageSize" |
| | | layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { get, post, put } from "@/api/util/requestUtil"; |
| | | import { |
| | | get, |
| | | post, |
| | | put |
| | | } from "@/api/util/requestUtil"; |
| | | import urlInfo from "../../../api/urlEnum/personnel.js"; |
| | | import { getOrganizationalApi } from "@/api/laboratory/organizational"; |
| | | import { |
| | | getOrganizationalApi |
| | | } from "@/api/laboratory/organizational"; |
| | | export default { |
| | | data() { |
| | | return { |
| | |
| | | }, |
| | | formLabelWidth: "100px", |
| | | rules: { |
| | | account: [ |
| | | { |
| | | account: [{ |
| | | required: true, |
| | | message: "请输入账号", |
| | | trigger: "blur", |
| | | }, |
| | | ], |
| | | name: [ |
| | | { |
| | | }, ], |
| | | name: [{ |
| | | required: true, |
| | | message: "请输入名字", |
| | | trigger: "blur", |
| | | }, |
| | | ], |
| | | }, ], |
| | | phone: [ |
| | | // { required: true, message: '请输入11位电话号码', trigger: 'blur' }, |
| | | { |
| | |
| | | trigger: ["blur", "change"], |
| | | }, |
| | | ], |
| | | organizationId: [ |
| | | { |
| | | organizationId: [{ |
| | | required: true, |
| | | type: "array", |
| | | message: "请选择部门", |
| | | trigger: "change", |
| | | }, |
| | | ], |
| | | roleId: [ |
| | | { required: true, message: "请输入权限(0或1)", trigger: "blur" }, |
| | | ], |
| | | }, ], |
| | | roleId: [{ |
| | | required: true, |
| | | message: "请输入权限(0或1)", |
| | | trigger: "blur" |
| | | }, ], |
| | | }, |
| | | options: [], |
| | | status: "", |
| | |
| | | methods: { |
| | | // 每页条数改变时触发 选择一页显示多少行 |
| | | handleSizeChange(val) { |
| | | console.log(`每页 ${val} 条`); |
| | | this.currentPage = 1; |
| | | this.pageSize = val; |
| | | }, |
| | |
| | | }, |
| | | // 当前页改变时触发 跳转其他页 |
| | | handleCurrentChange(val) { |
| | | console.log(`当前页: ${val}`); |
| | | this.currentPage = val; |
| | | }, |
| | | async getData() { |
| | |
| | | }); |
| | | } |
| | | } else { |
| | | console.log("error submit!!"); |
| | | return false; |
| | | } |
| | | }); |
| | |
| | | }, |
| | | getRoleList() { |
| | | get("/user/list").then((res) => { |
| | | console.log(`output->res`, res); |
| | | this.roleList = res.data; |
| | | }); |
| | | }, |
| | |
| | | |
| | | <style lang="scss" scoped> |
| | | .personnel-main { |
| | | |
| | | // width: 100%; |
| | | // height: 100%; |
| | | .page-header-search { |
| | | background: #fff; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | padding: 0 24px 12px 24px; |
| | | padding: 20px 24px 12px 24px; |
| | | |
| | | .search-bar { |
| | | .el-form { |