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 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 v-if="scope.row.isComplete == '0'" style="color: #ff7800">
                      未开始
                    </div>

                    <div v-if="scope.row.isComplete == '1'" style="color: #333333">
                      已完成
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="orgName"
                  label="所属组织架构"
                  align="center"
                  width=""
                >
                </el-table-column>
                <!-- <el-table-column label="操作" width="510px" align="center">
                  <template slot-scope="scope">
                    <div class="detail_button_out">
                      <div class="detail_button" @click="deleteUser(scope.row)">
                        <img style="width: 20px" src="../assets/img/table/delete.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>
    </div>
  </div>
</template>
<script>
// import { oSessionStorage } from "../../utils/utils";
import { oSessionStorage } from "../utils/utils";
import md5 from "md5";
export default {
  data() {
    return {
      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: [],
    };
  },
  mounted() {
    this.userInfo = JSON.parse(oSessionStorage.getItem("userInfo"));

    //获取渠道信息

    // this.ruleForm.type = "3";
  },
  methods: {
    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 = `/planUser/findUserProgressByPage?pageSize=${this.pageSize}&pageNum=${this.pageNum}&planId=${this.proDataLin.id}`;
      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;
  }
}
</style>