王震
2023-08-30 e40c2d5988a9ad1afa26421bf8cfdfffba1e0ff3
src/views/laboratory/personnel/index.vue
@@ -10,91 +10,37 @@
          </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>
@@ -110,22 +56,14 @@
    </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">
@@ -159,48 +97,26 @@
              }}
            </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>
@@ -208,9 +124,15 @@
</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 {
@@ -240,20 +162,16 @@
      },
      formLabelWidth: "100px",
      rules: {
        account: [
          {
               account: [{
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
        name: [
          {
               }, ],
               name: [{
            required: true,
            message: "请输入名字",
            trigger: "blur",
          },
        ],
               }, ],
        phone: [
          // { required: true, message: '请输入11位电话号码', trigger: 'blur' },
          {
@@ -270,17 +188,17 @@
            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: "",
@@ -294,7 +212,6 @@
  methods: {
    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
@@ -305,7 +222,6 @@
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    async getData() {
@@ -357,7 +273,6 @@
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
@@ -420,7 +335,6 @@
    },
    getRoleList() {
      get("/user/list").then((res) => {
        console.log(`output->res`, res);
        this.roleList = res.data;
      });
    },
@@ -443,13 +357,14 @@
<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 {