~lichunping/lims-before.git

			@@ -1,5 +1,5 @@
			<template>
			<div class="personnel-main ">
			<div class="personnel-main">
			<div class="page-header-search">
			<div class="search-bar">
			<el-form ref="form" :inline="true">
			@@ -10,74 +10,197 @@
			</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-button
			type="primary"
			icon="el-icon-plus"
			@click="dialogFormVisible = true"
			>新增人员</el-button
			>

			<el-dialog title="新增人员" :visible.sync="dialogFormVisible" width="30%">
			<el-form :model="form" :rules="rules">
			<el-form-item label="账号" :label-width="formLabelWidth" prop="account">
			<el-input v-model="form.account" autocomplete="off" />
			<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-input v-model="form.account" />
			</el-form-item>
			<el-form-item label="年龄" :label-width="formLabelWidth">
			<el-input v-model="form.age" autocomplete="off" />
			<el-input v-model="form.age" />
			</el-form-item>
			<el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
			<el-input v-model="form.email" autocomplete="off" />
			<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-input v-model="form.name" autocomplete="off" />
			<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-input v-model="form.phone" autocomplete="off" />
			<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" prop="role_id">
			<el-input v-model="form.role_id" autocomplete="off" />
			<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="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>
			</el-form>
			<div slot="footer" class="dialog-footer">
			<el-button @click="dialogFormVisible = false">取消</el-button>
			<el-button type="primary" @click="submitForm()">确定</el-button>
			<el-button type="primary" @click="submitForm()">{{
			isUpdate == true ? "更新" : "确定"
			}}</el-button>
			</div>
			</el-dialog>
			</div>
			</div>
			<div class="content-main">
			<div class="personner-table">
			<el-table ref="personnerlTable" :max-height="700" :cell-style="{ textAlign: 'center' }"
			:header-cell-style="{ border: '0px', background: '#f5f7fa', color: '#606266', boxShadow: 'inset 0 1px 0 #ebeef5', textAlign: 'center' }"
			:data="personnerlTable" style="width: 100%">
			<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%"
			>
			<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" />
			<el-table-column prop="age" label="年龄" min-width="150">
			<template scope="scope">
			{{
			scope.row.age === "" \|\|
			scope.row.age === null \|\|
			scope.row.age == undefined
			? "---"
			: scope.row.age
			}}
			</template>
			</el-table-column>
			<el-table-column prop="department" label="部门" min-width="150" />
			<el-table-column prop="createTime" label="创建时间" min-width="180" />
			<el-table-column prop="phone" label="电话" min-width="200" />
			<el-table-column prop="email" label="邮箱" min-width="200" />
			<el-table-column prop="jobState" label="在职状态" min-width="120"
			:filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]" :filter-method="filterTag"
			filter-placement="bottom-end">
			<el-table-column prop="phone" label="电话" min-width="200">
			<template scope="scope">
			{{
			scope.row.phone === "" \|\| scope.row.phone === undefined
			? "---"
			: scope.row.phone
			}}
			</template>
			</el-table-column>
			<el-table-column prop="email" label="邮箱" min-width="200">
			<template scope="scope">
			{{
			scope.row.email === "" \|\| scope.row.email === undefined
			? "---"
			: scope.row.email
			}}
			</template>
			</el-table-column>
			<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"
			>
			<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">编辑</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="[100, 200, 300, 400]" :page-size="pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="this.personnerlTable.length"
			@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>
			@@ -85,15 +208,15 @@
			</template>

			<script>
			import { get, post } from '@/api/util/requestUtil';
			import urlInfo from '../../../api/urlEnum/personnel.js'
			import { get, post, put } from "@/api/util/requestUtil";
			import urlInfo from "../../../api/urlEnum/personnel.js";
			import { getOrganizationalApi } from "@/api/laboratory/organizational";
			export default {
			data() {
			return {
			keyword: '',
			personnerlTable: [

			],
			keyword: "",
			roleList: "",
			personnerlTable: [],
			filteredpersonnerlTable: [],
			currentindex: 1,
			currentPage: 1, // 当前页码
			@@ -102,108 +225,224 @@
			personData: [], // 用来存放接口传过来的人员列表数据
			dialogFormVisible: false,
			form: {
			account: '',
			age: '',
			email: '',
			name: '',
			phone: '',
			role_id: ''
			account: "",
			age: "",
			email: "",
			name: "",
			phone: "",
			organizationId: "",
			roleId: "",
			},
			formLabelWidth: '100px',
			myProp: {
			value: "id",
			label: "department",
			checkStrictly: true, //允许选择任意一节
			},
			formLabelWidth: "100px",
			rules: {
			account: [
			{
			required: true, message: '请输入账号', trigger: 'blur'
			}
			required: true,
			message: "请输入账号",
			trigger: "blur",
			},
			],
			name: [{
			required: true, message: '请输入名字', trigger: 'blur'
			}],
			name: [
			{
			required: true,
			message: "请输入名字",
			trigger: "blur",
			},
			],
			phone: [
			// { required: true, message: '请输入11位电话号码', trigger: 'blur' },
			{ pattern: /^1[34578]\d{9}$/, message: '非法手机号码', trigger: 'blur' }
			{
			pattern: /^1[3456789]\d{9}$/,
			message: "非法手机号码",
			trigger: ["blur", "change"],
			},
			],
			email: [
			// { required: true, message: '请输入邮箱地址', trigger: 'blur' },
			{ type: 'email', message: '非法邮箱地址', trigger: ['blur', 'change'] }
			{
			type: "email",
			message: "非法邮箱地址",
			trigger: ["blur", "change"],
			},
			],
			role_id: [
			{ required: true, message: '请输入权限(0或1)', trigger: 'blur' }

			]
			}
			}
			organizationId: [
			{
			required: true,
			type: "array",
			message: "请选择部门",
			trigger: "change",
			},
			],
			roleId: [
			{ required: true, message: "请输入权限(0或1)", trigger: "blur" },
			],
			},
			options: [],
			status: "",
			isUpdate: false,
			};
			},
			mounted() {
			this.getData()
			this.getData();
			this.getTreeData();
			},
			methods: {
			// 每页条数改变时触发选择一页显示多少行
			handleSizeChange(val) {
			console.log(`每页 ${val} 条`)
			this.currentPage = 1
			this.pageSize = val
			console.log(`每页 ${val} 条`);
			this.currentPage = 1;
			this.pageSize = val;
			},
			filterTag() {
			console.log(11);
			filterTag(value) {
			this.status = "";
			this.status = value;
			return true;
			},
			// 当前页改变时触发跳转其他页
			handleCurrentChange(val) {
			console.log(`当前页: ${val}`)
			this.currentPage = val
			console.log(`当前页: ${val}`);
			this.currentPage = val;
			},
			async getData() {
			let data = {
			pageNo: 0,
			pageSize: 20,
			name: this.keyword
			}
			pageSize: 10,
			name: this.keyword,
			status: this.status,
			};
			let res = await get(urlInfo.url.list_new_personnel, data);
			this.personnerlTable=res.data.row
			this.total=res.data.total
			this.personnerlTable = res.data.row;
			this.total = res.data.total;
			},
			searchData() {
			this.filteredpersonnerlTable = this.personnerlTable.filter((item) => {
			return item.username === this.keyword
			}
			)
			this.personnerlTable = this.filteredpersonnerlTable
			return item.username === this.keyword;
			});
			this.personnerlTable = this.filteredpersonnerlTable;
			},
			resetData() {
			// console.log("111111")
			this.personnerlTable = this.personData
			this.keyword = ''
			this.personnerlTable = this.personData;
			this.keyword = "";
			this.status = "";
			this.getData();
			},
			// 提交新增人员表单
			submitForm() {
			// Handle form submission here
			// console.log(this.form);
			// POST请求
			this.$refs.form.validate((valid) => {
			if (valid) {
			this.dialogFormVisible = false
			axios.post('/user/add_new_personnel', this.form)
			.then(response => {
			console.log(response)
			// this.dialogVisible = false;
			})
			.catch(error => {
			console.error(error)
			})
			let departmentId = this.form.organizationId;
			this.form.organizationId = departmentId[departmentId.length - 1];
			if (!this.isUpdate) {
			post("/user/add_new_personnel", this.form).then((response) => {
			this.$message({
			message: response.message,
			type: "success",
			});
			this.dialogFormVisible = false;
			this.getData();
			});
			} else {
			put("/user/update_new_personnel", this.form).then((res) => {
			this.$message({
			message: res.message,
			type: "success",
			});
			this.dialogFormVisible = false;
			this.getData();
			});
			}
			} else {
			console.log('error submit!!')
			return false
			console.log("error submit!!");
			return false;
			}
			})
			});
			},
			}
			// 清空Cascader空白
			clearCascaderBlank(list) {
			list.forEach((i) => {
			if (i.children.length === 0) {
			i.children = undefined;
			} else {
			this.clearCascaderBlank(i.children);
			}
			});
			},
			fnFilterChangeInit() {
			this.personData = [];
			this.getData();
			},
			/*
			* @param list 数据列表
			* @param id 后端返回的id
			**/
			getParentsById(list, id) {
			for (let i in list) {
			if (list[i].id == id) {
			return [list[i].id];
			}
			if (list[i].children) {
			let node = this.getParentsById(list[i].children, id);
			if (node !== undefined) {
			//查询到把父节把父节点加到数组前面
			node.unshift(list[i].id);
			return node;
			}
			}
			}
			},

			}
			handleClick(row) {
			this.isUpdate = true;
			this.dialogFormVisible = true;
			this.form.name = row.username;
			this.form.roleName = row.roleName;
			this.form.phone = row.phone;
			this.form.id = row.id;
			this.form.email = row.email;
			this.form.organizationId = this.getParentsById(
			this.options,
			row.departmentId
			);
			this.form.roleId = row.roleName;
			this.form.age = row.age;
			this.form.account = row.account;
			},
			getTreeData() {
			getOrganizationalApi().then((res) => {
			this.options = res.data[0].children;
			this.clearCascaderBlank(this.options);
			});
			},
			getRoleList() {
			get("/user/list").then((res) => {
			console.log(`output->res`, res);
			this.roleList = res.data;
			});
			},
			},
			watch: {
			dialogFormVisible: {
			handler(newVal, oldVal) {
			if (newVal == false) {
			this.isUpdate = false;
			this.form = {};
			this.$refs.form.resetFields();
			} else {
			this.getRoleList();
			}
			},
			},
			},
			};
			</script>

			<style lang="scss" scoped>
			.personnel-main {

			// width: 100%;
			// height: 100%;
			.page-header-search {
			@@ -229,7 +468,7 @@
			background: #fff;
			padding: 20px 20px 10px 20px;

			>div:nth-child(2) {
			> div:nth-child(2) {
			display: flex;
			justify-content: end;
			margin: 10px 0;