cpdm_manage/src/components/PlanUserStatus.vue

<template>
  <div>
    <!---lxh-修改密码-->
    <div class="dig_update">
      <el-dialog
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="80%"
        style="border-radius: 40px"
      >
        <div slot="title">
          <div label-width="150px" class="demo-ruleForm">
            <p v-if="isView" class="dig_title">进度查看</p>
            <p v-if="!isView" class="dig_title">编辑计划</p>
            <div slot=""></div>
            <div slot="footer"></div>
            <div style="margin-bottom: 20px;">
              <el-input v-model="studentName" clearable placeholder="请输入姓名" style="width: 200px;"></el-input
                >&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>
            </div>
          
            <div class="table-content">
              <el-table
                :data="tableData"
                :row-style="{ height: '0px' }"
                :cell-style="{ padding: '5px' }"
                :header-cell-style="{ background: '#F8F8F8', color: '#606266' }"
              >
                <el-table-column
                  show-overflow-tooltip
                  prop="userName"
                  label="姓名"
                  align="center"
                  width=""
                >
                </el-table-column>
                <el-table-column prop="userNo" label="学号" align="center" width="">
                </el-table-column>
                <el-table-column
                  prop="isComplete"
                  label="是否已完成"
                  :formatter="formaCom"
                  align="center"
                  width=""
                >
                  <template slot-scope="scope">
                    <div
                      style="display: flex; justify-content: center; align-items: center"
                      v-if="scope.row.isComplete == '1'"
                    >
                      <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="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: center; align-items: center"
                      v-if="scope.row.isComplete == '0'"
                    >
                      <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
                  prop="orgName"
                  label="所属组织架构"
                  align="center"
                  width=""
                >
                </el-table-column>
                <el-table-column label="操作" width="" align="center" v-if="proDataLin.planStatus=='2'">
                  <template slot-scope="scope">
                    <div class="detail_button_out" v-show="scope.row.isComplete == '1'&&proDataLin.planStatus=='2'&&scope.row.isReset=='0'">
                      <div class="detail_button" @click="anewStart(scope.row)">
                        <img style="width: 18px" src="../assets/img/table/pro.png" />
                        <span> 重新测试 </span>
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <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>

            <div class="dig_button"></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  class="dig_title">重新测试</p>
         
            <p style="margin-bottom: 40px;text-align: center;">确认重新测试吗?</p>
            <div class="dig_button">
              <el-button type="info" round @click="cancleReset()">取消</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>
    </div>
  </div>
</template>
<script>
// import { oSessionStorage } from "../../utils/utils";
import { oSessionStorage } from "../utils/utils";
import md5 from "md5";
export default {
  data() {
    return {
      //学生名字
      studentName:'',
      //重新测试弹出确认框
      resetVisible:false,

      userVisible: false,
      //编辑返回的值
      userDetailData: {},
      //组织架构名字
      groupName: "",

      disableFlag: false,
      phoneFlag: false,
      flag: 3,
      dialogVisible: false,
      //渠道列表

      isView: true,
      //当前计划ID
      planId: "",
      userInfo: {},

      proDataLin: [],

      total: 0,
      pageSize: 10,
      pageNum: 1,
      tableData: [],

      userTotal: 0,
      userpageSize: 10,
      userPageNum: 1,
      userTableData: [],
      multipleSelection: [],
      userNo:''
    };
  },
  mounted() {
    this.userInfo = JSON.parse(oSessionStorage.getItem("userInfo"));

    //获取渠道信息

    // this.ruleForm.type = "3";
  },
  methods: {
    clearSearch() {
      this.studentName = "";
      //搜索的用户编号
      this.searchTarget();
    },
    //取消关闭重新测试框
    cancleReset(){
      //关闭弹出框
      this.resetVisible=false;
    },
    //提交确认框
    submitCom(){
      //提交进行重新测试
      //然后重新查询页面列表
      let url = `/record/resetUserRecord?planId=${this.proDataLin.id}&userNo=${this.userNo}`;
      this.$http.get(url, {}, (res) => {
        this.resetVisible=false;
        if (res && res.code == 200) {
          //关闭弹出框
          //调用列表刷线接口
          //
          this.$message.success('设置重新测试成功');
          this.searchList();
        } else {
          // this.$toast.fail(res.msg);
          this.$message.error(res.msg);
        }
      });

    },
    anewStart(val){
      this.userNo=val.userNo
      //保存选择个人的信息
      this.resetVisible=true;
    },
    formaCom(val) {
      if (val.isComplete == "0") {
        return "未完成";
      } else {
        return "已完成";
      }
    },
    deleteUser(val) {
      let data = [val.id];
      //调用接口开始添加
      let url = `/planUser/deletePlanUsers`;
      this.$http.post(url, data, (res) => {
        if (res && res.code == 200) {
          this.searchTarget();
          this.tableData = res.data.content;
          this.total = res.data.totalElements;
        } else {
          // this.$toast.fail(res.msg);
          this.$message.error(res.msg);
        }
      });
    },
    addUser() {
      this.userVisible = true;
      //调用待添加的用户
      this.userSearchTarget();
    },
    isComUser(val, row) {
      //添加已选用户
      let data = [];
      if (val == 1) {
        for (let i = 0; i < this.multipleSelection.length; i++) {
          //
          let obj = {
            orgName: this.multipleSelection[i].orgName,
            orgNo: this.multipleSelection[i].orgNo,
            planId: this.proDataLin.id,
            userName: this.multipleSelection[i].userName,
            userNo: this.multipleSelection[i].userNo,
          };
          data.push(obj);
        }
      } else {
        let obj = {
          orgName: row.orgName,
          orgNo: row.orgNo,
          planId: this.proDataLin.id,
          userName: row.userName,
          userNo: row.userNo,
        };
        data.push(obj);
      }

      //调用接口开始添加
      let url = `/planUser/savePlanUsers`;
      this.$http.post(url, data, (res) => {
        if (res && res.code == 200) {
          this.searchTarget();
          this.userSearchTarget();
          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();
    },
    userSearchTarget() {
      this.userPageNum = 1;
      this.userSearchList();
    },
    //进来调用已选列表接口
    searchList() {
      //
      let url=''
      if(this.studentName==''){
        url = `/planUser/findUserProgressByPage?pageSize=${this.pageSize}&pageNum=${this.pageNum}&planId=${this.proDataLin.id}`;
      }else{
        url = `/planUser/findUserProgressByPage?pageSize=${this.pageSize}&pageNum=${this.pageNum}&planId=${this.proDataLin.id}&userName=${this.studentName}`;
      }
    
      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);
        }
      });
    },

    userSearchList() {
      let url = `/plan/planAddUser?pageSize=${this.userpageSize}&pageNum=${this.userPageNum}&planId=${this.proDataLin.id}&orgNo=${this.proDataLin.planOrgNo}`;
      this.$http.get(url, {}, (res) => {
        if (res && res.code == 200) {
          this.userTableData = res.data.content;
          this.userTotalotal = res.data.totalElements;
        } else {
          // this.$toast.fail(res.msg);
          this.$message.error(res.msg);
        }
      });
    },
    //每页多少条
    handleSizeChange(val) {
      //将首页重置为1时---且总条数变化
      //设置为当前总条数
      this.pageSize = val;
      this.searchList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.searchList();
    },
    //已选选项
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    resetForm(val) {
      this.cancle();
    },

    formatterTime(val) {
      let date = new Date(val);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      month = this.formatterMon(month);
      let day = date.getDate();
      day = this.formatterMon(day);
      return year + "-" + month + "-" + day;
    },
    formatterMon(val) {
      if (val < 10) {
        return "0" + val;
      } else {
        return val;
      }
    },
    open(val) {
      // this.searchTarget();
      this.proDataLin = val;
      this.dialogVisible = true;
      this.searchTarget();
    },
    edit(val) {
      this.dialogVisible = true;
      this.isView = false;

      this.userDetailData = val;
      //调用查询详情的接口
    },
    //调用查询详情的接口

    disableFlagStatus() {
      setTimeout(() => {
        this.disableFlag = false;
      }, 1500);
    },

    register() {
      let that = this;
      this.$http.post(`/plan/addOrUpdate`, {}, (res) => {
        this.disableFlagStatus();
        // this.disableFlag = false;
        if (res && res.code == 200) {
          this.dialogVisible = false;

          // this.$toast.success({ message: "成功" });
          //调用父组件的查询方法
          that.$emit("search");
        } else {
          // this.$toast.fail({ message: res.msg });
          this.$message.error(res.msg);
        }
        //清空缓存
        this.cancle();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.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-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 {
  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: 40px;
  .dig_title {
    margin-bottom: 30px;
    text-align: center;
    font-weight: 700;
  }
}

.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;
    }
  }
}
</style>