From 4aeb79927aab9874ae13bda09f85e5d560d8ca70 Mon Sep 17 00:00:00 2001
From: Fixiaobai <fixiaobai@163.com>
Date: 星期一, 04 九月 2023 15:19:42 +0800
Subject: [PATCH] 修改bug
---
src/views/laboratory/personnel/index.vue | 661 ++++++++++++++++++++++++++++++++-----------------------
1 files changed, 385 insertions(+), 276 deletions(-)
diff --git a/src/views/laboratory/personnel/index.vue b/src/views/laboratory/personnel/index.vue
index 3312928..f469fa9 100644
--- a/src/views/laboratory/personnel/index.vue
+++ b/src/views/laboratory/personnel/index.vue
@@ -1,284 +1,393 @@
<template>
- <div class="personnel-main ">
- <div class="page-header-search">
- <div class="search-bar">
- <el-form ref="form" inline="true" :model="searchData">
- <el-form-item>
- <el-input
- v-model="keyword"
- placeholder="璇疯緭鍏ヤ汉鍛樺悕绉�"
- >
- <i slot="prefix" class="el-input__icon el-icon-search" />
- </el-input>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="searchData()">鏌ヨ</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="鏂板浜哄憳" :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-form-item>
- <el-form-item label="骞撮緞" :label-width="formLabelWidth">
- <el-input v-model="form.age" autocomplete="off" />
- </el-form-item>
- <el-form-item label="閭" :label-width="formLabelWidth" prop="email">
- <el-input v-model="form.email" autocomplete="off" />
- </el-form-item>
- <el-form-item label="鍚嶅瓧" :label-width="formLabelWidth" prop="name">
- <el-input v-model="form.name" autocomplete="off" />
- </el-form-item>
- <el-form-item label="鐢佃瘽" :label-width="formLabelWidth" prop="phone">
- <el-input v-model="form.phone" autocomplete="off" />
- </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>
- </el-form>
- <div slot="footer" class="dialog-footer">
- <el-button @click="dialogFormVisible = false">鍙� 娑�</el-button>
- <el-button type="primary" @click="submitForm()">纭� 瀹�</el-button>
- </div>
- </el-dialog>
- </div>
- </div>
- <div class="content-main">
- <div class="personner-table">
- <el-table
- ref="personnerlTable"
- :height="700"
- :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-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="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"
- >
- <template slot-scope="scope">
- <el-tag
- :type="scope.row.businessStatus === 0 ? 'primary' : 'success'"
- disable-transitions
- >{{ scope.row.businessStatus === 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> -->
- </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"
- />
- </div>
- </div>
- </div>
- </div>
+ <div class="personnel-main">
+ <div class="page-header-search">
+ <div class="search-bar">
+ <el-form ref="form" :inline="true">
+ <el-form-item>
+ <el-input v-model="keyword" placeholder="璇疯緭鍏ヤ汉鍛樺悕绉�">
+ <i slot="prefix" class="el-input__icon el-icon-search" />
+ </el-input>
+ </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="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" 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-input v-model="form.email" />
+ </el-form-item>
+ <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" />
+ </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>
+ <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>
+ </el-form>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="dialogFormVisible = false">鍙� 娑�</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" 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">
+ <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">
+ <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>
+ </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>
+ </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" />
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script>
-import axios from 'axios'
-axios.defaults.baseURL = 'http://192.168.110.167:1234'
-export default {
- data() {
- return {
- keyword: '',
- personnerlTable: [
+ 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: "",
+ roleList: "",
+ personnerlTable: [],
+ filteredpersonnerlTable: [],
+ currentindex: 1,
+ currentPage: 1, // 褰撳墠椤电爜
+ total: 0, // 鎬绘潯鏁�
+ pageSize: 100, // 姣忛〉鐨勬暟鎹潯鏁�
+ personData: [], // 鐢ㄦ潵瀛樻斁鎺ュ彛浼犺繃鏉ョ殑浜哄憳鍒楄〃鏁版嵁
+ dialogFormVisible: false,
+ form: {
+ account: "",
+ age: "",
+ email: "",
+ name: "",
+ phone: "",
+ organizationId: "",
+ roleId: "",
+ },
+ myProp: {
+ value: "id",
+ label: "department",
+ checkStrictly: true, //鍏佽閫夋嫨浠绘剰涓�鑺�
+ },
+ formLabelWidth: "100px",
+ rules: {
+ account: [{
+ required: true,
+ message: "璇疯緭鍏ヨ处鍙�",
+ trigger: "blur",
+ }, ],
+ name: [{
+ required: true,
+ message: "璇疯緭鍏ュ悕瀛�",
+ trigger: "blur",
+ }, ],
+ phone: [
+ // { required: true, message: '璇疯緭鍏�11浣嶇數璇濆彿鐮�', trigger: 'blur' },
+ {
+ pattern: /^1[3456789]\d{9}$/,
+ message: "闈炴硶鎵嬫満鍙风爜",
+ trigger: ["blur", "change"],
+ },
+ ],
+ email: [
+ // { required: true, message: '璇疯緭鍏ラ偖绠卞湴鍧�', trigger: 'blur' },
+ {
+ type: "email",
+ message: "闈炴硶閭鍦板潃",
+ trigger: ["blur", "change"],
+ },
+ ],
+ organizationId: [{
+ required: true,
+ type: "array",
+ message: "璇烽�夋嫨閮ㄩ棬",
+ trigger: "change",
+ }, ],
+ roleId: [{
+ required: true,
+ message: "璇疯緭鍏ユ潈闄�(0鎴�1)",
+ trigger: "blur"
+ }, ],
+ },
+ options: [],
+ status: "",
+ isUpdate: false,
+ };
+ },
+ mounted() {
+ this.getData();
+ this.getTreeData();
+ },
+ methods: {
+ // 姣忛〉鏉℃暟鏀瑰彉鏃惰Е鍙� 閫夋嫨涓�椤垫樉绀哄灏戣
+ handleSizeChange(val) {
+ this.currentPage = 1;
+ this.pageSize = val;
+ },
+ filterTag(value) {
+ this.status = "";
+ this.status = value;
+ return true;
+ },
+ // 褰撳墠椤垫敼鍙樻椂瑙﹀彂 璺宠浆鍏朵粬椤�
+ handleCurrentChange(val) {
+ this.currentPage = val;
+ },
+ async getData() {
+ let data = {
+ pageNo: 0,
+ 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;
+ },
+ searchData() {
+ this.filteredpersonnerlTable = this.personnerlTable.filter((item) => {
+ return item.username === this.keyword;
+ });
+ this.personnerlTable = this.filteredpersonnerlTable;
+ },
+ resetData() {
+ this.personnerlTable = this.personData;
+ this.keyword = "";
+ this.status = "";
+ this.getData();
+ },
+ // 鎻愪氦鏂板浜哄憳琛ㄥ崟
+ submitForm() {
+ this.$refs.form.validate((valid) => {
+ if (valid) {
+ 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 {
+ 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 鍚庣杩斿洖鐨刬d
+ **/
+ 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;
+ }
+ }
+ }
+ },
- ],
- filteredpersonnerlTable: [],
- currentindex: 1,
- currentPage: 1, // 褰撳墠椤电爜
- total: 20, // 鎬绘潯鏁�
- pageSize: 100, // 姣忛〉鐨勬暟鎹潯鏁�
- personData: [], // 鐢ㄦ潵瀛樻斁鎺ュ彛浼犺繃鏉ョ殑浜哄憳鍒楄〃鏁版嵁
- dialogFormVisible: false,
- form: {
- account: '',
- age: '',
- email: '',
- name: '',
- phone: '',
- role_id: ''
- },
- formLabelWidth: '100px',
- rules: {
- account: [
- {
- 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' }
- ],
- email: [
- // { required: true, message: '璇疯緭鍏ラ偖绠卞湴鍧�', trigger: 'blur' },
- { type: 'email', message: '闈炴硶閭鍦板潃', trigger: ['blur', 'change'] }
- ],
- role_id: [
- { required: true, message: '璇疯緭鍏ユ潈闄�(0鎴�1)', trigger: 'blur' }
-
- ]
- }
- }
- },
- mounted() {
- this.getData()
- },
- methods: {
- // 姣忛〉鏉℃暟鏀瑰彉鏃惰Е鍙� 閫夋嫨涓�椤垫樉绀哄灏戣
- handleSizeChange(val) {
- console.log(`姣忛〉 ${val} 鏉)
- this.currentPage = 1
- this.pageSize = val
- },
- // 褰撳墠椤垫敼鍙樻椂瑙﹀彂 璺宠浆鍏朵粬椤�
- handleCurrentChange(val) {
- console.log(`褰撳墠椤�: ${val}`)
- this.currentPage = val
- },
- getData() {
- axios.get('/user/list_new_personnel', {
- params: {
- pageNo: 0,
- pageSize: 20
- }
- }).then(res => {
- // console.log(res)
- this.personData = res.data.data.row
- this.personnerlTable = this.personData
- }).catch(res => {
- console.log('error')
- })
- },
- searchData() {
- this.filteredpersonnerlTable = this.personnerlTable.filter((item) => {
- return item.username === this.keyword
- }
- )
- this.personnerlTable = this.filteredpersonnerlTable
- },
- resetData() {
- // console.log("111111")
- this.personnerlTable = this.personData
- this.keyword = ''
- },
- // 鎻愪氦鏂板浜哄憳琛ㄥ崟
- 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)
- })
- } else {
- console.log('error submit!!')
- return false
- }
- })
- }
- }
-
-}
+ 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) => {
+ 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{
- background: #fff;
- display: flex;
- justify-content: space-between;
- padding: 0 24px 12px 24px;
- .search-bar{
- .el-form{
- .el-form-item{
- margin-bottom: 0px !important;
- .el-input{
- width: 360px;
- }
- }
- }
- }
- }
- .personner-table{
- background: #fff;
- padding: 20px 20px 10px 20px;
- >div:nth-child(2){
- display: flex;
- justify-content: end;
- margin: 10px 0;
- }
- }
-}
-</style>
+ .personnel-main {
+
+ // width: 100%;
+ // height: 100%;
+ .page-header-search {
+ background: #fff;
+ display: flex;
+ justify-content: space-between;
+ padding: 20px 24px 12px 24px;
+
+ .search-bar {
+ .el-form {
+ .el-form-item {
+ margin-bottom: 0px !important;
+
+ .el-input {
+ width: 360px;
+ }
+ }
+ }
+ }
+ }
+
+ .personner-table {
+ background: #fff;
+ padding: 20px 20px 10px 20px;
+
+ >div:nth-child(2) {
+ display: flex;
+ justify-content: end;
+ margin: 10px 0;
+ }
+ }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3