zc_saas_admin/src/views/systemManagement/auditManagement/assignReviewers/index.vue

<template>
  <div id="assignReviewers">
    <div class="floatSty">
      <div class="headsty">资料审核管理</div>
      <div class="dis_sty">
        <div class="btnSty" @click="getInfo(1)">填写资料审核</div>
        <div class="btnSty" @click="getInfo(2)">盖章资料审核</div>
      </div>
    </div>
    <div class="floatSty">
      <div class="headsty">班级管理</div>
      <div class="dis_sty">
        <div class="btnSty" @click="getInfo(3)">学时审核</div>
      </div>
    </div>
    <div style="clear: both"></div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="610px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">{{ getName(statePop) }}</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="dialogVisible = false"
          />
        </div>
      </div>
      <div>
        <el-row :gutter="20">
          <el-col :span="12" class="leftBox">
            <div
              v-for="(item, index) in educationType"
              :key="index"
              style="margin-bottom: 6px"
            >
              <div
                @click="getFist(item.id)"
                style="cursor: pointer; margin-bottom: 6px"
              >
                <i
                  :class="
                    item.id === activeFist
                      ? 'el-icon-caret-bottom'
                      : 'el-icon-caret-right'
                  "
                ></i>
                {{ item.onlyName }}
              </div>
              <ul
                v-if="item.id === activeFist"
                style="margin: 0px; padding-left: 18px"
              >
                <li
                  v-for="(items, indexs) in item.children"
                  :key="indexs"
                  style="margin-bottom: 4px; cursor: pointer"
                  :style="
                    activeBusList.businessId === items.id ? 'color:red;' : ''
                  "
                  @click="getapiUserList(items)"
                >
                  {{ items.onlyName }}
                </li>
                <li v-if="!item.children.length" style="color: blue">
                  暂无选项
                </li>
              </ul>
            </div>
          </el-col>
          <el-col :span="12" v-if="activeBusList.businessId">
            <el-select
              v-model="activeUserid"
              placeholder="请选择审核人"
              @change="editUserList"
            >
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.nickName"
                :value="item.userId"
                :disabled="userList1.indexOf(item.userId) !== -1"
              >
              </el-option>
            </el-select>
            <ul style="max-height: 300px; overflow: auto">
              <li
                v-for="(item, index) in userList1"
                :key="index"
                class="userName"
              >
                {{ getuserName(item) }}
                <i
                  class="el-icon-error clearSty"
                  @click="userList1.splice(index, 1)"
                ></i>
                <div style="clear: both"></div>
              </li>
            </ul>
            <el-select
              v-model="activeUserid"
              placeholder="请选择复审人"
              @change="editUserLists"
            >
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.nickName"
                :value="item.userId"
                :disabled="userList2.indexOf(item.userId) !== -1"
              >
              </el-option>
            </el-select>
            <ul style="max-height: 300px; overflow: auto">
              <li
                v-for="(item, index) in userList2"
                :key="index"
                class="userName"
              >
                {{ getuserName(item) }}
                <i
                  class="el-icon-error clearSty"
                  @click="userList2.splice(index, 1)"
                ></i>
                <div style="clear: both"></div>
              </li>
            </ul>
            <div style="text-align: center">
              <el-button size="mini" @click="submits">确定</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      statePop: "",
      educationType: [],
      options: [], //审核人列表
      activeUserid: "", //select的v-model绑定值
      activeFist: "", //当前选中教育类型ID
      activeBusList: {},
      userList1: [],
      userList2: [],
    };
  },
  mounted() {
    this.getTypes();
  },
  methods: {
    getFist(int) {
      if (this.activeFist === int) {
        this.activeFist = "";
      } else {
        this.activeFist = int;
      }
    },
    submits() {
      if (!this.userList1.length) {
        this.$message.warning("请选择指派审核人");
        return;
      }
      if (!this.userList2.length) {
        this.$message.warning("请选择指派复审人");
        return;
      }
      /**
       * 提交api
       */
      let ays = {
        ...this.activeBusList,
        userList1: this.userList1,
        userList2: this.userList2,
      };

      console.log(ays, "数据");
      this.$message.success("指派成功");
    },
    editUserList(int) {
      this.userList1.push(int);
      this.activeUserid = "";
    },
    editUserLists(int) {
      this.userList2.push(int);
      this.activeUserid = "";
    },
    /**
     * 点击业务层次获取对应审核人
     */
    getapiUserList(item) {
      this.activeBusList = {
        educationId: item.educationId,
        projectId: item.projectId,
        businessId: item.id,
      };
      /**
       * 模拟数据
       */
      this.userList1 = [];
      this.userList2 = [];
    },
    /**
     * 获取教育类型及业务层次
     */
    getTypes() {
      this.$api.inquireCourseEducationType({ status: 1 }).then((res) => {
        this.$api.inquirebusinessList({ status: 1 }).then((result) => {
          result.rows.forEach((items) => {
            items.onlyName = items.projectName + "-" + items.businessName;
            res.rows.forEach((ite, ide) => {
              ite.onlyName = ite.educationName;
              ite.checked = false;
              if (!ite.children) {
                ite.children = [];
              }
              if (items.educationId === ite.id) {
                ite.children.push(items);
              }
            });
          });
          this.educationType = res.rows;
        });
      });
      this.$api.obtainUserList({ status: 1 }).then((res) => {
        this.options = res.rows;
      });
    },
    /**
     * 获取标题
     */
    getName(int) {
      var ast = "";
      switch (int) {
        case 1:
          ast = "填写资料审核-指派审核人";
          break;
        case 2:
          ast = "盖章资料审核-指派审核人";
          break;
        case 3:
          ast = "学时审核-指派审核人";
          break;
        default:
          break;
      }
      return ast;
    },
    /**
     * 转换审核人名字
     */
    getuserName(int) {
      var ast = "";
      for (let i = 0; i < this.options.length; i++) {
        if (this.options[i].userId === int) {
          return this.options[i].nickName;
        }
      }
    },
    getInfo(int) {
      this.statePop = int;
      this.activeFist = "";
      this.activeUserid = "";
      this.userList1 = [];
      this.userList2 = [];
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="less" scoped>
.leftBox {
  border: 1px solid #999;
  border-radius: 4px;
  overflow-y: auto;
  max-height: 400px;
  padding: 10px;
}
.floatSty {
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #999;
  .headsty {
    height: 30px;
    line-height: 30px;
    background-color: #eee;
    color: #333;
    text-align: center;
    font-size: 14px;
  }
  .dis_sty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    .btnSty {
      padding: 0px 10px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      border-radius: 4px;
      border: 1px solid #999;
      font-size: 14px;
      margin-bottom: 10px;
      cursor: pointer;
      transition: all 0.2s;
      &:hover {
        background-color: #f4f4f4;
      }
    }
  }
}
/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.imgBox {
  width: 100%;
  // height: 210px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 8px 8px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgLabel {
    flex: 1;
    width: 100%;
    border: 1px dotted #e2e2e2;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    .msPhoto {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      max-height: 270px;
      img {
        max-width: 100%;
        max-height: 270px;
      }
    }
    .imgbbx {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      i {
        font-weight: bold;
        margin: 14px 0;
        font-size: 24px;
      }
    }
  }
  p {
    margin: 5px 0px;
  }
}
.userName {
  display: table;
  border-radius: 4px;
  border: 1px solid #999;
  margin: 0px 6px 6px 0px;
  padding: 0px 8px;
  height: 26px;
  line-height: 26px;
  font-size: 14px;
  .clearSty {
    color: red;
    cursor: pointer;
    font-size: 14px;
  }
}
</style>