Merge remote-tracking branch 'origin/master'

value

2023-09-07 523d7a54fb07fdf756fbc4faa5eb7fef7263a556

 src/views/laboratory/personnel/index.vue

@@ -1,239 +1,427 @@
<template>
  <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="新增人员" :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" :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.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> -->
            </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 size="small" v-model="keyword" placeholder="请输入人员名称">
                     <i slot="prefix" class="el-input__icon el-icon-search" />
                  </el-input>
               </el-form-item>
               <el-form-item>
                  <el-button size="small" type="primary" @click="getData()">查询</el-button>
                  <el-button size="small" 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 size="small" 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-item label="在职状态" v-if="isUpdate" :label-width="formLabelWidth" prop="jobState">
                     <el-select v-model="form.jobState" clearable style="width: 100%" placeholder="请选择在职状态">
                        <el-option v-for="(item,index) in jobList" :key="index" :label="item.label" :value="item.value">
                        </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: 'left' }"
               :header-cell-style="{
            border: '0px',
            background: '#f5f7fa',
            color: '#606266',
            boxShadow: 'inset 0 1px 0 #ebeef5',
            textAlign: 'left',
          }" @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 { get, post } from '@/api/util/requestUtil';
import urlInfo from '../../../api/urlEnum/personnel.js'
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: {
               id: "",
               account: "",
               age: "",
               email: "",
               name: "",
               phone: "",
               organizationId: "",
               roleId: "",
               jobState: "",
            },
            jobList:[{ label: '在职', value: 1 },{ label: '离岗', value: 0 }],
            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: "请选择人员权限",
                  trigger: "blur"
               }, ],
            },
            options: [],
            status: "",
            isUpdate: false,
         };
      },
      mounted() {
         this.getData();
         this.getTreeData();
      },
      methods: {
         // 每页条数改变时触发 选择一页显示多少行
         handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
         },
         filterTag(value,row) {
            // console.log("filterTag--",value);
            // this.status = "";
            // this.status = value;
            return row.jobState === value;
         },
         // 当前页改变时触发 跳转其他页
         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;
                  let form = {
                     id: this.form.id,
                     account: this.form.account,
                     age: this.form.age,
                     email: this.form.email,
                     name: this.form.name,
                     phone: this.form.phone,
                     organizationId: departmentId[departmentId.length - 1],
                     roleId: this.form.roleId,
                     jobState: this.form.jobState
                  }
                  if (!this.isUpdate) {
                     post("/user/add_new_personnel", form).then((response) => {
                        this.$message({
                           message: response.message,
                           type: "success",
                        });
                        this.dialogFormVisible = false;
                        this.getData();
                     }).catch((error)=>{
                        this.$message.error(error.message);
                     });
                  } else {
                     put("/user/update_new_personnel", form).then((res) => {
                        this.$message({
                           message: res.message,
                           type: "success",
                        });
                        this.dialogFormVisible = false;
                        this.getData();
                     }).catch((error)=>{
                        this.$message.error(error.message);
                     });
                  }
               } 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 后端返回的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;
                  }
               }
            }
         },

      ],
      filteredpersonnerlTable: [],
      currentindex: 1,
      currentPage: 1, // 当前页码
      total: 0, // 总条数
      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
    },
    filterTag() {
      console.log(11);
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    },
    async getData() {
      let data = {
        pageNo: 0,
        pageSize: 20,
        name: this.keyword
      }
      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() {
      // 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) {
            console.log(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.jobState = row.jobState;
            this.form.organizationId = this.getParentsById(
               this.options,
               row.departmentId
            );
            this.form.roleId = row.roleId;
            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 = {
                     id: "",
                     account: "",
                     age: "",
                     email: "",
                     name: "",
                     phone: "",
                     organizationId: "",
                     roleId: "",
                     jobState: "",
                  };
                  this.$refs.form.resetFields();
               } else {
                  this.getRoleList();
               }
            },
         },
      },
   };
</script>

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

  // width: 100%;
  // height: 100%;
  .page-header-search {
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0 24px 12px 24px;
      // 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;
         .search-bar {
            .el-form {
               .el-form-item {
                  margin-bottom: 0px !important;

          .el-input {
            width: 360px;
          }
        }
      }
    }
  }
                  .el-input {
                     width: 360px;
                  }
               }
            }
         }
      }

  .personner-table {
    background: #fff;
    padding: 20px 20px 10px 20px;
      .personner-table {
         background: #fff;
         padding: 20px 20px 10px 20px;

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