rzcs/src/view/generateTest.vue

<template>
  <div class="disFlex">
    <NavLeft navIf="generateTest" />
    <div class="projectManagement zdin">
      <div class="title">项目管理</div>
      <div class="search">
        <div class="searchInput">
          <el-input
            v-model="projectName"
            placeholder="请输入项目名称"
          ></el-input>
        </div>
        <div class="searchInput">
          <el-date-picker
            v-model="projectDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>

        <button type="button" @click="queryProject()" class="queryProject">
          <img src="" alt="" /> 查询
        </button>
      </div>
      <div class="projectTable">
        <div
          class="generateTestList"
          v-for="item in GenerateTestData"
          :key="item.id"
        >
          <div class="generateTestListOne">
            <div>
              <p>{{ item.name }}</p>
              <p>单位名称：{{ item.companyName }}</p>
              <p>创建时间：{{ item.createTime }}</p>
              <p>
                二维码有效期： {{ item.qrCodeUrlEndTime }}至{{
                  item.qrCodeUrlStartTime
                }}
              </p>
            </div>
            <p>
              参与人数：<span>{{ item.personCount }}</span>
            </p>
          </div>
          <div class="buttonFunction">
            <p></p>
            <p></p>
            <p></p>
            <div class="buttonFunctionMake">
              <p @click="detailsData(item)">查看结果</p>
              <p>下载二维码</p>
              <p @click="resetCode(item)">重置二维码有效期</p>
              <p @click="addIdCard(item)">配置白名单</p>
              <p>停用</p>
              <p>删除</p>
            </div>
          </div>
        </div>

        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            layout="prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <el-drawer
      v-model="drawer"
      title="重置二维码"
      :direction="direction"
      :before-close="handleClose"
    >
      <div class="generateTestCode">
        <p>测试名称：{{ codeDate.name }}</p>

        <div>
          <p>
            当前二维码有效期：{{ codeDate.qrCodeUrlEndTime }}至{{
              codeDate.qrCodeUrlStartTime
            }}
          </p>
          <el-date-picker
            v-model="resetCodeModifyData"
            type="datetimerange"
            range-separator="To"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          >
          </el-date-picker>
        </div>
        <el-button type="primary" @click="resetCodeModify()">重置</el-button>
        <el-button @click="resetForm(ruleFormRef)">取消重置</el-button>
      </div>
    </el-drawer>

    <!-- <div class="makeBer">
       

    </div> -->
    <el-drawer
      v-model="iDcrt"
      title="配置白名单"
      :direction="direction"
      :before-close="handleClosea"
    >
      <div class="generateTestCode">
        <p>测试名称：{{ codeDate.name }}</p>

        <div>
          <p>
            当前二维码有效期：{{ codeDate.qrCodeUrlEndTime }}至{{
              codeDate.qrCodeUrlStartTime
            }}
          </p>
        </div>
        <el-form
          :label-position="labelPosition"
          label-width="100px"
          :model="iDcrtData"
          style="max-width: 460px"
        >
          <el-form-item label="姓名">
            <el-input v-model="iDcrtData.name"></el-input>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="iDcrtData.idCard"></el-input>
          </el-form-item>
<el-form-item label="手机号">
            <el-input v-model="iDcrtData.phone"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addTestWhiteList()">确定</el-button>
            <el-button @click="resetForm(ruleFormRef)">取消</el-button>
          </el-form-item>
        </el-form>
        <div></div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import NavLeft from "../components/nav.vue";

export default {
  components: {
    NavLeft,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      total: "1",
      codeDate: "",
      resetCodeModifyData: "",
      drawer: false,
      direction: "rtl",
      iDcrt: false,
      iDcrtData: {
        idCard: "",
        name: "",
        phone: "",
        testId: 0,
      },
      generateData: {
        current: 1,
        endTime: "",
        name: "",
        size: 10,
        startTime: "",
      },
      GenerateTestData: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              picker.$emit("pick", [new Date(), new Date()]);
            },
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  deleteProject() {},
  mounted() {
    // 初始化获取数据
    this.getGenerateTest();
  },
  methods: {
    addIdCard(data) {
      this.codeDate = data;
 this.iDcrt= true
    },

     addTestWhiteList() {
      this.iDcrtData.testId=this.codeDate.id
          console.log(  this.iDcrtData);
      this.axios
        .post("/hysc/test/addTestWhiteList",   this.iDcrtData,)
        .then(function (data) {
          console.log(data);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //删除项目
    projectDelete(id) {
      let that = this;
      this.axios
        .post("/hysc/project/delProject", {
          id: id,
        })
        .then(function () {
          that.getProject();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    projectDisable(data) {
      let that = this;
      this.axios
        .post("/hysc/project/updProject", data)
        .then(function () {
          that.getProject();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    handleCurrentChange(data) {
      this.generateData.current = data;
      this.getProject();
    },
    handleClose() {
      this.drawer = false;
    },
        handleClosea() {
      this.iDcrt = false;
    },
    detailsData(data) {
      localStorage.detailsData= JSON.stringify(data) 
           this.$router.push("/details");
    },
    // 时间格式转换
    newDate(data) {
      let yy = new Date(data).getFullYear();
      let mm = new Date(data).getMonth() + 1;
      let dd = new Date(data).getDate();
      let hh = new Date(data).getHours();
      let mf = new Date(data).getMinutes();
      let ss = new Date(data).getSeconds();
      if (mm < 10) {
        mm = "0" + mm;
      }
      if (dd < 10) {
        dd = "0" + dd;
      }
      if (hh < 10) {
        hh = "0" + hh;
      }
      if (mf < 10) {
        mf = "0" + mf;
      }

      if (ss < 10) {
        ss = "0" + ss;
      }

      return yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
    },
    // 重置二维码
    resetCode(data) {
      this.drawer = true;
      this.codeDate = data;
    },
    resetCodeModify() {
      let data = [];
      if (this.resetCodeModifyData[0]) {
        data.push(this.newDate(this.resetCodeModifyData[0]));
        data.push(this.newDate(this.resetCodeModifyData[1]));
      }
      this.axios
        .post("/hysc/test/updTest", {
          id: this.codeDate.id,
          qrCodeUrlStartTime: data[0],
          qrCodeUrlEndTime: data[1],
        })
        .then(function (response) {
          console.log(response.data);
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    // 查询
    queryProject() {
      this.generateData.name = this.projectName;
      this.getProject();
    },
    // 获取列表数据
    getGenerateTest() {
      let param = new URLSearchParams();
      let that = this;
      param.append("current", that.generateData.current);
      param.append("endTime", that.generateData.endTime);
      param.append("name", that.generateData.name);
      param.append("size", that.generateData.size);
      param.append("startTime", that.generateData.startTime);
      this.axios
        .get("/hysc/test/getTestPage", {
          params: param,
        })
        .then(function (response) {
          console.log(response.data);
          that.total = response.data.data.total;
          that.GenerateTestData = response.data.data.records;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>


<style >
.buttonFunctionMake {
  display: none;
  width: 200px;
  background-color: #fff;
  position: absolute;
  left: -80px;
  box-shadow: 5px 5px 10px rgba(120, 137, 149, 0.25);
  height: 300px;
  z-index: 30;
}
.generateTestCode p {
  font-size: 16px;
}
.zdin > .el-overlay {
  z-index: 5 !important;
}
.zdin > .el-teleport {
  z-index: 8 !important;
}
.generateTestCode > p {
  margin-bottom: 20px;
}
.generateTestCode > div {
  margin-bottom: 20px;
}
.generateTestCode > div > p {
  margin-bottom: 20px;
}
.buttonFunction {
  position: relative;
  cursor: pointer;
}
.buttonFunction:hover .buttonFunctionMake {
  display: block;
}
.buttonFunctionMake > p {
  color: #0544a4;
  text-align: center;
  padding-top: 20px;
  font-size: 14px;
}
.buttonFunction > p {
  width: 30px;
  height: 4px;
  border-radius: 3px;
  margin-bottom: 4px;
  background-color: #0544a4;
}
.generateTestListOne {
  display: flex;
  align-items: flex-end;
}
.generateTestListOne > div {
  margin-right: 100px;
}
.generateTestListOne > div > :nth-child(1) {
  font-size: 30px;
  margin-bottom: 30px;
}
.generateTestListOne p {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #515151;
  margin-bottom: 20px;
  line-height: 20px;
}
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 120px;
}
.disFlex {
  display: flex;
}
.projectManagement {
  flex: 1;
  box-sizing: border-box;
  padding: 60px;
}
.generateTestList {
  width: 100%;
  padding: 30px;
  margin-bottom: 30px;
  padding-bottom: 10px;
  background: #f8fafb;
  display: flex;
  padding-right: 100px;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  border-radius: 3px;
  border: 1px solid #dde3e8;
}
.title {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #454d67;
  line-height: 22px;
  padding-left: 23px;
  border-bottom: 1px solid #e4eaee;
  padding-bottom: 7px;
  margin-bottom: 60px;
}
</style>