From 77a041c5e9a31ad96fce404f06fe0c03f4031b1d Mon Sep 17 00:00:00 2001
From: Fixiaobai <fixiaobai@163.com>
Date: 星期一, 28 八月 2023 09:19:13 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.110.209:9001/r/lims-before

---
 src/views/laboratory/personnel/index.vue |  435 ++++++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 337 insertions(+), 98 deletions(-)

diff --git a/src/views/laboratory/personnel/index.vue b/src/views/laboratory/personnel/index.vue
index 26998b3..4259f2f 100644
--- a/src/views/laboratory/personnel/index.vue
+++ b/src/views/laboratory/personnel/index.vue
@@ -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 鍚庣杩斿洖鐨刬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;
+          }
+        }
+      }
+    },
 
-}
+    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;

--
Gitblit v1.9.3