cpdm_manage/src/views/manage/channelInfo/invite.vue

<template>
  <div class="record-warp">
    <div class="record-main">
      <el-row>
        <el-col :span="24">
          <div class="search-head">
            <div class="invite">
              <el-input v-model="planName" clearable placeholder="请输入名称"></el-input
              >&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <el-select v-model="planStatus" clearable placeholder="请选择状态">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
            <el-button type="primary" round icon="el-icon-search" @click="searchTarget"
              >搜索</el-button
            >
            <el-button type="info" round @click="clearSearch">清空</el-button>

            <el-button
            v-show="userInfo.roleType=='4'||userInfo.roleType=='3'"
              type="success"
              round
              class="add_class"
              icon="el-icon-plus"
              @click="addPlan"
              >新增计划</el-button
            >
          </div>
        </el-col>
      </el-row>
      <el-row class="add_user_class">
        <el-col :span="24">
          <div class="search-head"></div>
        </el-col>
      </el-row>

      <div class="table-content">
        <el-table
          height="100%"
          :data="tableData"
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '5px' }"
          :header-cell-style="{ background: '#F8F8F8', color: '#606266' }"
        >
          <!-- <el-table-column prop="name" label="姓名" align="center" width=""  show-overflow-tooltip>
          </el-table-column> -->
          <el-table-column
            show-overflow-tooltip
            prop="planName"
            label="计划名称"
            align="center"
            
            width="300px"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            :show-overflow-tooltip="true"
            align="center"
            width=""
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="planEndTime"
            label="结束时间"
            align="center"
            width=""
          ></el-table-column>
          <el-table-column
            prop="createUserName"
            label="创建人"
            align="center"
            width=""
          ></el-table-column>
          <el-table-column
            prop="planStatus"
            label="状态"
            align="center"
            width=""
            :formatter="planStatusFun"
          >
            <template slot-scope="scope">
              <!-- <div v-if="scope.row.planStatus == '1'" style="color: #ff7800">未开始</div>
              <div v-if="scope.row.planStatus == '2'" style="color: #2342ff">进行中</div>
              <div v-if="scope.row.planStatus == '3'" style="color: #333333">已完成</div> -->

              <div
                style="display: flex; justify-content: center; align-items: center"
                v-if="scope.row.planStatus == '3'"
              >
                <img
                  style="width: 16px"
                  src="../../../assets/img/home/isCom.png"
                  alt=""
                />&nbsp;&nbsp;
                <div style="color: #00955e">已完成</div>
              </div>
              <div
                style="display: flex; justify-content: center; align-items: center"
                v-if="scope.row.planStatus == '2'"
              >
                <img
                  style="width: 16px"
                  src="../../../assets/img/home/isRun.png"
                  alt=""
                />&nbsp;&nbsp;
                <div style="color: #f6cb00">进行中</div>
              </div>
              <div
                style="display: flex; justify-content: center; align-items: center"
                v-if="scope.row.planStatus == '1'"
              >
                <img
                  style="width: 16px"
                  src="../../../assets/img/home/isNo.png"
                  alt=""
                />&nbsp;&nbsp;
                <div style="color: #d52121">未开始</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="450px" align="center">
            <template slot-scope="scope">
              <div class="detail_button_out">
                <div class="detail_button" @click="viewPlan(scope.row)">
                  <img src="../../../assets/img/table/search.png" />
                  <span> 查看 </span>
                </div>
                <div
                  class="detail_button"
                  v-show="scope.row.planStatus == '1'"
                  @click="editUser(scope.row)"
                >
                  <img src="../../../assets/img/table/edit.png" />
                  <span> 编辑 </span>
                </div>
                <div
                  class="detail_button"
                  v-show="scope.row.planStatus == '1'"
                  @click="resetPlan('1', scope.row)"
                >
                  <img src="../../../assets/img/table/xiafa.png" />
                  <span> 下发 </span>
                </div>
                <div
                  class="detail_button"
                  v-show="
                    scope.row.planStatus == '3' &&
                    userInfo.roleType == '5' &&
                    scope.row.enable != 1
                  "
                  @click="resetPlan('3', scope.row)"
                >
                  <img src="../../../assets/img/table/accredit.png" />
                  <span> 授权 </span>
                </div>
                <!-- <div class="detail_button" @click="userOp(scope.row)">
                  <img src="../../../assets/img/table/people.png" />
                  <span> 人员配置 </span>
                </div> -->
                <div class="detail_button" @click="userPlanStatusFun(scope.row)">
                  <img src="../../../assets/img/table/pro.png" />
                  <span> 进度查看 </span>
                </div>
                <div
                  class="detail_button"
                  v-show="scope.row.planStatus == '1'"
                  @click="resetPlan('2', scope.row)"
                >
                  <img src="../../../assets/img/table/delete.png" />
                  <span> 删除 </span>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- small -->
      <el-pagination
        class="pag_class"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNum"
        layout="total, sizes, prev, pager, next"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
      >
      </el-pagination>
      <!-- <el-pagination small background layout="total prev, pager, next" :total="36">
      </el-pagination> -->
    </div>
    <PlanRegister ref="register" @search="searchTarget" @configuration="userOp" />
    <PlanUser ref="planUserAdd" />
    <PlanUserStatus ref="userStatus" />
    <el-dialog
      class="dig_update"
      :visible.sync="centerDialogVisible"
      width="40%"
      center
      style="border-radius: 40px"
    >
      <div slot="title">
        <div class="demo-ruleForm">
          <p class="dig_title">详情</p>
          <div class="user_out">
            <div class="user_out_sub">计划名称</div>
            <div class="user_out_subNext">
              {{ view.planName }}
            </div>
          </div>
          <div class="user_out">
            <div class="user_out_sub">创建时间</div>
            <div class="user_out_subNext">
              {{ view.creatTime }}
            </div>
          </div>
          <div class="user_out">
            <div class="user_out_sub">结束时间</div>
            <div class="user_out_subNext">
              {{ view.endTime }}
            </div>
          </div>
          <div class="user_out">
            <div class="user_out_sub">创建人</div>
            <div class="user_out_subNext">
              {{ view.creatUser }}
            </div>
          </div>
          <div class="user_out">
            <div class="user_out_sub">状态</div>
            <div class="user_out_subNext">
              <!-- <span v-if=" view.status=='进行中'" style="color: #2342ff"> {{ view.status }}</span>

              <span  v-if=" view.status=='未开始'" style="color: #ff7800"> {{ view.status }}</span>
              <span  v-if=" view.status=='已完成'" style="color: #333333"> {{ view.status }}</span> -->
              <div
                style="display: flex; justify-content: start; align-items: center"
                v-if="view.status == '已完成'"
              >
                <img
                  style="width: 16px"
                  src="../../../assets/img/home/isCom.png"
                  alt=""
                />&nbsp;&nbsp;
                <div style="color: #00955e">已完成</div>
              </div>
              <div
                style="display: flex; justify-content: start; align-items: center"
                v-if="view.status == '进行中'"
              >
                <img
                  style="width: 16px"
                  src="../../../assets/img/home/isRun.png"
                  alt=""
                />&nbsp;&nbsp;
                <div style="color: #f6cb00">进行中</div>
              </div>
              <div
                style="display: flex; justify-content: start; align-items: center"
                v-if="view.status == '未开始'"
              >
                <img
                  style="width: 16px"
                  src="../../../assets/img/home/isNo.png"
                  alt=""
                />&nbsp;&nbsp;
                <div style="color: #d52121">未开始</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      class="dig_update"
      :visible.sync="resetVisible"
      width="30%"
      center
      style="border-radius: 40px"
    >
      <div slot="title">
        <div class="demo-ruleForm">
          <p v-show="isDelete == '1'" class="dig_title">下发计划</p>
          <p v-show="isDelete == '2'" class="dig_title">删除计划</p>
          <p v-show="isDelete == '3'" class="dig_title">授权</p>
          <p v-show="isDelete == '1'">将下发{{ opPlanName }}计划吗?</p>
          <p v-show="isDelete == '2'">确认将删除{{ opPlanName }}计划?</p>
          <p v-show="isDelete == '3'">确认将授权{{ opPlanName }}计划的报告允许下载吗?</p>
          <div class="dig_button">
            <el-button type="info" round @click="cancle()">取消</el-button>
            <!-- <el-button type="success" round @click="submitForm('ruleForm')"
                >提交</el-button
              > -->
            <el-button type="success" round @click="submitCom()">确定</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      class="dig_update"
      :visible.sync="fileVisible"
      width="40%"
      center
      style="border-radius: 40px"
    >
      <div slot="title">
        <div class="demo-ruleForm">
          <p v-show="!isDelete" class="dig_title">批量导入</p>

          <el-upload
            class="upload-demo"
            drag
            :action="basePath + '/user/userImport'"
            :on-success="fileSuccess"
            :on-error="fileError"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">建议文件不超过500kb</div>
          </el-upload>
          <a
            style="
              display: flex;
              margin-top: 20px;
              margin-bottom: 20px;
              color: #409eff;
              cursor: pointer;
            "
            :href="basePath + '/user/templateDownload'"
          >
            下载模版
          </a>
          <!-- <div class="dig_button">
            <el-button type="info" round @click="cancle()">取消</el-button>
     
            <el-button type="success" round @click="submitCom()">确定</el-button>
          </div> -->
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { oSessionStorage } from "../../../utils/utils";
import planRegister from "../../../components/PlanRegister.vue";
import planUser from "../../../components/PlanUser.vue";
import planUserStatus from "../../../components/PlanUserStatus.vue";
import { basePath } from "../../../utils/http";
export default {
  name: "userManage",
  components: {
    PlanRegister: planRegister,
    PlanUser: planUser,
    PlanUserStatus: planUserStatus,
  },
  data() {
    return {
      basePath: basePath,
      //上传文件的弹出款的标志
      fileVisible: false,
      //判断点击的是重置密码还是点击删除
      isDelete: false,
      //重置密码需要调用个userId
      userId: "",
      //充值密码使用userName
      userName: "",
      //重置密码弹出框
      resetVisible: false,
      //根据名称搜索
      name: "",
      //搜索的用户编号
      studentNumber: "",
      //搜索的组织架构
      // 搜索需要的性别
      sex: "",

      group: "",
      ppData: [],
      groupData: [],

      centerDialogVisible: false,
      editUserFlag: false,
      startTime: "",
      endTime: "",
      value1: null,
      total: 0,
      pageSize: 10,
      pageNum: 1,
      keyword: "",
      tableData: [],
      userInfo: {}, //用户信息

      invitationCode: "",
      roleType: "0",
      type: 0,
      view: {
        planName: "",
        creatTime: "",
        endTime: "",
        creatUser: "",
        status: "",
      },
      channel: "",
      channelList: [{ name: "渠道天成", id: "1" }],
      options: [
        {
          value: "1",
          label: "未开始",
        },
        {
          value: "2",
          label: "进行中",
        },
        {
          value: "3",
          label: "已完成",
        },
      ],
      planStatus: "",
      planName: "",

      //删除时用的planId
      opPlanId: "",
      //删除时用的planName
      opPlanName: "",
    };
  },
  created() {},
  mounted() {
    this.userInfo = JSON.parse(oSessionStorage.getItem("userInfo"));

    this.getChannel();
    if (!this.userInfo) {
      //如果用户信息不存在跳转登陆页
      this.$router.push({ path: "/" });
    }
    this.searchTarget();
  },
  methods: {
    //打开用户列表弹出框
    userOp(val) {
      this.$refs.planUserAdd.open(val);
    },
    userPlanStatusFun(val) {
      this.$refs.userStatus.open(val);
    },
    //文件上传成功
    fileSuccess(res) {
      if (res.code == 200) {
        this.searchTarget();
        this.$message({
          message: res.msg,
          type: "success",
        });
      } else {
        this.$message({
          message: res.msg,
          type: "error",
        });
      }
      //查询列表
    },
    //文件上传失败
    fileError() {
      this.$message({
        message: "上传失败",
        type: "error",
      });
    },
    cancle() {
      this.resetVisible = false;
    },
    //提交文本
    submitCom() {
      //判断当前是否是
      if (this.isDelete == "2") {
        this.deletePlan();
        //调用删除方法
      } else if (this.isDelete == "1") {
        this.resetFun();
        // 调用重置密码方法
      } else if (this.isDelete == "3") {
        //调用授权 方法进行授权
        this.accreditFun();
      }
    },
    accreditFun() {
      this.$http.get(`/plan/empowerPlan?id=${this.opPlanId}`, {}, (res) => {
        //  this.$toast.success({message:'成功'});
        if (res && res.code == 200) {
          this.resetVisible = false;
          this.$message.success("授权成功");
          this.searchTarget();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //性别---
    planStatusFun(val) {
      let planStatus = val.planStatus;
      if (planStatus == "1") {
        return `未开始`;
        // return "未开始";
      } else if (planStatus == "2") {
        return "进行中";
      } else if (planStatus == "3") {
        return "已完成";
      } else {
        return "";
      }
    },
    //每页多少条
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchTarget();
      // console.log(`每页 ${val} 条`);
      //将首页重置为1时---且总条数变化
      //设置为当前总条数
    },
    //获取组织架构方法--------------------开始-----------------------
    getChannel() {
      this.$http.get(`/org/findAllOrgByPOrgNo`, {}, (res) => {
        //  this.$toast.success({message:'成功'});
        if (res && res.code == 200) {
          //将值赋值给list
          if (res.data.length > 0) {
            let resAdd = this.addPro(res.data);
            this.ppData = JSON.parse(JSON.stringify(resAdd));
            let forRes = this.arrToTree(resAdd);
            // console.log('格式化的结构')
            // console.log(forRes)
            let resultRes = this.deleteChildren(forRes);
            this.groupData = resultRes;
          } else {
            this.groupData = [];
          }
          // this.channelList = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //z增加
    addPro(val) {
      let data = JSON.parse(JSON.stringify(val));
      for (let i = 0; i < val.length; i++) {
        data[i].value = val[i].orgNo;
        data[i].label = val[i].orgName;
      }
      return data;
    },
    //非递归方式：将平铺数据转换为树形结构数据
    arrToTree(arr) {
      let data = arr.filter((item) => {
        item.children = arr.filter((e) => {
          return item.orgNo === e.parentOrgNo;
        });
        return !item.parentOrgNo;
      });
      return data;
    },
    //去除转换树形结构数据后存在的空children
    deleteChildren(arr) {
      let childs = arr;
      for (let i = childs.length; i--; i > 0) {
        if (childs[i].children) {
          if (childs[i].children.length) {
            this.deleteChildren(childs[i].children);
          } else {
            delete childs[i].children;
          }
        }
      }
      return arr;
    },
    //获取组织架构方法--------------------结束-----------------------
    formatterDelete(row) {
      if (row.state == 0) {
        return "已删除";
      } else {
        return "正常";
      }
    },
    resetPlan(flag, val) {
      //下发----flag为1
      //删除----flag为2
      //授权----flag为3
      this.isDelete = flag;
      this.resetVisible = true;
      this.opPlanId = val.id;
      this.opPlanName = val.planName;

      //当前用户id

      //重置密码
    },
    editUser(row) {
      this.editRegisterUser(row);
    },
    viewPlan(row) {
      this.view.planName = row.planName;
      this.view.creatTime = row.createTime;
      this.view.endTime = row.planEndTime;
      this.view.creatUser = row.createUserName;
      let st = "";
      if (row.planStatus == "1") {
        st = "未开始";
      } else if (row.planStatus == "2") {
        st = "进行中";
      } else if (row.planStatus == "3") {
        st = "已完成";
      }
      this.view.status = st;
      this.centerDialogVisible = true;
    },
    addPlan() {
      this.addRegisterUser(true);
    },
    clearSearch() {
      this.planName = "";
      //搜索的用户编号
      this.planStatus = "";
      this.searchTarget();
    },

    addRegisterUser(val) {
      this.$refs.register.open(val);
    },
    editRegisterUser(val) {
      this.$refs.register.edit(val);
    },
    resetFun() {
      this.$http.get(`/plan/issuedPlanById?id=${this.opPlanId}`, {}, (res) => {
        //  this.$toast.success({message:'成功'});
        if (res && res.code == 200) {
          this.resetVisible = false;
          this.$message.success("下发成功");
          this.searchTarget();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    deletePlan() {
      this.$http.get(`/plan/deletePlanById?id=${this.opPlanId}`, {}, (res) => {
        //  this.$toast.success({message:'成功'});
        if (res && res.code == 200) {
          this.$message.success("删除成功");
          this.resetVisible = false;
          this.searchTarget();
        } else {
          this.$message.error("删除失败");
        }
      });
    },

    handleCurrentChange(val) {
      this.pageNum = val;
      this.searchList();
    },
    //根据现有情况进行搜索
    searchList() {
      let url = `/plan/findListByPage?pageSize=${this.pageSize}&pageNum=${
        this.pageNum
      }&orgNo=${this.userInfo.orgNo}${
        this.planName == "" ? "" : `&planName=${this.planName}`
      }${this.planStatus == "" ? "" : `&planStatus=${this.planStatus}`}`;
      this.$http.get(url, {}, (res) => {
        if (res && res.code == 200) {
          this.tableData = res.data.content;
          this.total = res.data.totalElements;
        } else {
          // this.$toast.fail(res.msg);
          this.$message.error(res.msg);
        }
      });
    },
    searchTarget() {
      this.pageNum = 1;
      this.searchList();
    },
    //跳转首页
    goHome() {
      this.$router.push({ path: "/home" });
    },
    //跳转记录页
    goRecord() {
      this.$router.push({ path: "/record" });
    },
    //退出登陆
    logout() {
      oSessionStorage.removeItem("userInfo");
      oSessionStorage.removeItem("token");
      this.$router.push({ path: "/" });
    },

    //点击获取月出勤次数
    getTimes(param) {
      this.monthTimes = param;
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../../styles/theme.less";

.pag_class {
  text-align: end;
}

.pag_class /deep/.el-input__inner {
  width: 100% !important;
}
.pag_class /deep/.el-pagination--small span:not([class*="suffix"]) {
  height: 22px;
  line-height: 28px !important;
}
.invite /deep/ .el-input {
  width: 300px;
}
.invite /deep/ .el-input__inner {
  width: 300px;
}

.record-warp {
  width: 100%;
  height: 80vh;
  //background: url(../../assets/img/index/19.png) no-repeat center;
  //background-size: 100% 100%;
  position: relative;

  .record-main {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    // overflow-y: auto;
    display: flex;
    flex-direction: column;

    .search-head {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;

      .zc-title {
        color: #606266;
        font-size: 14px;
      }
    }

    .table-content {
      margin: 10px 0;
      flex: 1;
      overflow: auto;
    }
  }
}

.add_user_class {
  margin-top: 10px;
}

.user_out {
  display: flex;
  width: 100%;
  align-items: center;
  border: 1px solid #eeeeef;
  // line-height: 50px;
  height: 100%;
  margin-top: 10px;
}

.user_out_sub {
  padding: 20px 0px;
  flex: 1;
  text-align: center;
  height: 100%;
  background-color: #fafafa;
  // color:#ffffff
}

.user_out_subNext {
  text-align: left;
  padding-left: 10px;
  flex: 3;
}
.detail_button_out {
  display: flex;
  justify-content: center;
  .detail_button {
    display: flex;
    margin-left: 20px;
    align-items: center;
    cursor: pointer;
    letter-spacing: 2px;
    img {
      width: 15px;
      margin-right: 5px;
    }
    span {
      color: #00bf78;
      // font-weight: 600;
    }
  }
}

//弹出框样式

.dig_update /deep/.el-cascader {
  position: relative;
  font-size: 14px;
  line-height: 40px;
  width: 100%;
}
.dig_update /deep/.el-dialog {
  box-shadow: none !important;
  background: transparent !important;
}
.demo-ruleForm /deep/ .el-form-item {
  margin-right: 10px;
  vertical-align: top;
  display: flex !important;
  flex-direction: column;
}
.demo-ruleForm /deep/.el-dialog__header {
  background-color: #ffffff;
  padding-left: 140px !important;
}
.demo-ruleForm /deep/.el-form-item__label {
  text-align: left;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.demo-ruleForm /deep/.el-input {
  width: 100% !important;
}

.demo-ruleForm /deep/.el-input__inner {
  width: 100% !important;
  background-color: #f7f7f7;
  border: 0px;
}

.dig_button {
  margin-top: 40px;
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.demo-ruleForm {
  background-color: #ffffff;
  // border-radius: 20px;
  margin-right: -10px;
  margin-top: -10px;
  padding-right: 100px;
  padding-left: 100px;
  border-radius: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  .dig_title {
    margin-bottom: 30px;
    text-align: center;
    font-weight: 700;
  }
}
</style>