psychic_camera_school/src/components/institutionManage/InstitutionInfo.vue

<!--**lxh--学校的增删改查-->
<template>
  <div>
    <!--搜索start-->
    <el-form :inline="true" class="demo-form-inline search-center">
      <el-form-item label="请输入学校名称">
        <el-input
          v-model="searchKey"
          placeholder="请输入学校名称搜索"
          @keyup.enter.native="onSubmit"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addInstitution"
        >
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <!--搜索end-->

    <!--记录展示start-->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      class="table-padding"
    >
      <el-table-column
        prop="institutionNo"
        label="学校编号"
        min-width="2"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="institutionName"
        label="学校名称"
        min-width="2"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="最大测试次数"
        min-width="2"
        align="center"
        class="inputPa"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.testNum == null ? 0 : scope.row.testNum }}</span>&nbsp;&nbsp;&nbsp;&nbsp;
          <i
            @click="editFu(scope.row, 1)"
            class="el-icon-edit"
          />

          <!-- <div class="inputTable" v-show="scope.row.testNumLinFlag">
            <el-input-number
              v-model="scope.row.testNumLin"
              :min="0"
              label="最大测试次数"
            ></el-input-number>
            <el-button
              @click="testNumCancle(scope.row)"
              size="small"
              style="margin-top: 10px; margin-right: 40px"
              >取消</el-button
            >
            <el-button
              @click="testNumCom(scope.row)"
              type="primary"
              size="small"
              style="margin-top: 10px"
              >保存</el-button
            >
          </div> -->

          <!-- <el-button size="mini">保存</el-button> -->
          <!-- <el-input type="text" v-model="scope.row.testNum"></el-input> -->
          <!-- <span>{{scope.row.isRegistrantsNum}}</span> -->
        </template>
      </el-table-column>
      <el-table-column label="是否生效" min-width="2" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isTestNum"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="isTestNumFun(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="最大注册人数" min-width="2" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.registrantsNum == null ? 0 : scope.row.registrantsNum }}</span>&nbsp;&nbsp;&nbsp;&nbsp;
          <i
            @click="editFu(scope.row, 2)"
            class="el-icon-edit"
          />
          <!-- <el-input type="text" v-model="scope.row.registrantsNum"></el-input> -->
        </template>
      </el-table-column>
      <el-table-column label="是否生效" min-width="2" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isRegistrantsNum"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="isRegistrantsNumFun(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          prop="allRegisterNum"
          label="注册人数"
          min-width="2"
          align="center"
      >
<!--        <template slot-scope="scope">-->
<!--          {{0}}-->
<!--        </template>-->
      </el-table-column>
      <el-table-column
          prop="allTestNum"
          label="总测试次数"
          min-width="2"
          align="center"
      >
<!--        <template slot-scope="scope">-->
<!--          {{0}}-->
<!--        </template>-->
      </el-table-column>
      <el-table-column label="操作" min-width="3" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="viewDetail(scope.row)">
            查看记录
          </el-button>
          <el-button type="primary" size="small" @click="goAuthList(scope.row)">
            查看权限
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click="delInstitutionInfo(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--记录展示end-->
    <!--分页插件start-->
    <div class="txt-center mt20 pagClass">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!--分页插件end-->
    <!--添加部门-->
    <el-dialog
      title="添加学校"
      :visible.sync="dialogVisible"
      width="60%"
      top="4vh"
      :close-on-click-modal="false"
    >
      <el-form
        :model="dep"
        :rules="rules"
        ref="ruleForm"
        status-icon
        label-width="30%"
        class="demo-ruleForm"
      >
        <el-form-item label="请输入学校编号" prop="institutionNo">
          <el-input
            type="type"
            v-model.trim="dep.institutionNo"
            autocomplete="off"
            style="width: 70%"
            maxlength="50"
          />
        </el-form-item>
        <el-form-item label="请输入学校名称" prop="institutionName">
          <el-input
            type="type"
            v-model.trim="dep.institutionName"
            autocomplete="off"
            style="width: 70%"
            clearable
          />
        </el-form-item>
        <el-form-item label="超级管理员用户名" prop="loginName">
          <el-input
            type="type"
            v-model.trim="dep.loginName"
            autocomplete="off"
            style="width: 70%"
          />
        </el-form-item>
        <el-form-item label="超级管理员密码" prop="superAdminPassword">
          <el-input
            type="type"
            v-model.trim="dep.superAdminPassword"
            autocomplete="off"
            style="width: 70%"
            clearable
          />
        </el-form-item>
        <el-form-item label="是否添加管理员">
          <el-radio v-model="addAdminFlag" label="1">是</el-radio>
          <el-radio v-model="addAdminFlag" label="2">否</el-radio>
        </el-form-item>
        <el-form-item
          v-if="addAdminFlag == '1'"
          label="管理员名称"
          prop="adminPhone"
        >
          <el-input
            type="type"
            v-model.trim="dep.adminPhone"
            autocomplete="off"
            style="width: 70%"
            clearable
          />
        </el-form-item>
        <el-form-item
          v-if="addAdminFlag == '1'"
          label="管理员密码"
          prop="adminPassword"
        >
          <el-input
            type="type"
            v-model.trim="dep.adminPassword"
            autocomplete="off"
            style="width: 70%"
            clearable
          />
        </el-form-item>
        <el-form-item label="是否添加体验账号">
          <el-radio v-model="addUserFlag" label="1">是</el-radio>
          <el-radio v-model="addUserFlag" label="2">否</el-radio>
        </el-form-item>
        <el-form-item v-if="addUserFlag == '1'" label="体验账号">
          <el-input
            type="type"
            v-model.trim="dep.userPhone"
            autocomplete="off"
            style="width: 70%"
            clearable
          />
        </el-form-item>
        <el-form-item
          v-show="addUserFlag == '1'"
          label="体验账号密码"
          prop="userPassword"
        >
          <el-input
            type="type"
            v-model.trim="dep.userPassword"
            autocomplete="off"
            style="width: 70%"
            clearable
          />
        </el-form-item>
        <el-form-item label="有效测试次数是否生效" >
          <el-radio v-model="isTestNum" label="1" @input='testNumChange'>是</el-radio>
          <el-radio v-model="isTestNum" label="0" @input='testNumChange'>否</el-radio>
        </el-form-item>
        <el-form-item
          v-show="isTestNum == '1'"
          label="有效测试次数为"
          prop="testNum"
        >
          <el-input-number
            :min="0"
            v-model="dep.testNum"
            style="width: 70%"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="最大注册人数是否生效" >
          <el-radio v-model="isRegistrantsNum" label="1" @input='registrantsNumChange'>是</el-radio>
          <el-radio v-model="isRegistrantsNum" label="0" @input='registrantsNumChange'>否</el-radio>
        </el-form-item>
        <el-form-item
          v-show="isRegistrantsNum == '1'"
          label="最大注册人数为"
          prop="registrantsNum"
        >
          <el-input-number
            :min="0"
            v-model="dep.registrantsNum"
            style="width: 70%"
          ></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancelAdd">取消</el-button>
          <el-button type="primary" @click="savaInstitutionInfo()">确定</el-button>
          <el-button @click="copyText">一键复制</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="dialogClass">
      <el-dialog
        :title="dialogDes"
        :visible.sync="dialogShow"
        width="30%"
        top="40vh"
      >
        <span>
          <el-input-number
            v-model="testNum"
            :min="0"
            label="最大测试次数"
          ></el-input-number>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogShow = false">取 消</el-button>
          <el-button size="small" type="primary" @click="dialogConfirm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "InstitutionInfo",
  data() {
    return {
      //弹出框提示语
      dialogDes: "",
      //判断是最大测试人数点开了还是最大注册人数点开了
      testNumOrReg: 1,
      dialogShow: false,
      //修改的超级管理员id
      dialogShowId: "",
      //最大测试次数弹出框中的数
      testNum: 0,
      //学校编号
      orgNum: "",
      searchKey: "", //查询条件
      currentPage: 1,
      total: 200, //记录总数
      pageSize: 10,
      tableData: [],
      institutionNo: "",
      type: "1",
      // 添加部门
      dialogVisible: false,
      addAdminFlag: "1",
      addUserFlag: "1",
      isTestNum: "0", //有效次数标志位
      isRegistrantsNum: "0", //最大注册人数标志位
      dep: {
        institutionName: "",
        institutionNo: "",
        loginName: "",
        superAdminPassword: "",
        addAdminFlag: "2",
        adminPhone: "",
        adminPassword: "",
        addUserFlag: "2",
        isTestNum: 0, //有效次数标志位
        isRegistrantsNum: 0, //最大注册人数标志位
        testNum: 0, //有效次数
        registrantsNum: 0, //最大注册人数
        userPhone: "",
        userPassword: "",
      },
      rules: {
        institutionName: [
          { required: true, message: "请输入学校名称", trigger: "blur" },
        ],
        institutionNo: [
          { required: true, message: "请输入学校编号", trigger: "blur" },
        ],
        loginName: [
          {
            required: true,
            message: "请输入超级管理员用户名",
            trigger: "blur",
          },
        ],
      },
    };
  },
  // 页面初始化
  created() {
    this.getData()

    console.log('topUserInfo: ', localStorage.getItem('topUserInfo'))
  },
  methods: {
    testNumChange(){
      this.dep.testNum=0
    },
    registrantsNumChange(){
      this.dep.registrantsNum=0
    },

    dialogConfirm() {
      let list = JSON.stringify(this.tableData);
      let listData = JSON.parse(list);

      for (let i = 0; i < listData.length; i++) {
        if (listData[i].id == this.dialogShowId) {
          if (this.testNumOrReg == 1) {
            this.updataInterFaceTestNum();
          } else {
            this.updataInterFaceRegistrantsNum();
          }
        } else {
          // listData[i].testNumLinFlag = false;
        }
      }
    },
    editFu(row, val) {
      this.dialogShow = true;
      this.dialogShowId = row.id;
      this.orgNum = row.institutionNo;
      if (val == 1) {
        // this.dialogDes = "最大测试次数";
        this.dialogDes = "提示";
        this.testNumOrReg = 1;
        this.testNum = row.testNum;
      } else {
        // this.dialogDes = "最大注册人数";
        this.dialogDes = "提示";
        this.testNumOrReg = 2;
        this.testNum = row.registrantsNum;
      }
    },
    //更改状态
    updataFun(val) {

      let list = JSON.stringify(this.tableData);
      let listData = JSON.parse(list);
      for (let i = 0; i < listData.length; i++) {
        if (listData[i].id == val.id) {

          listData[i].testNumLinFlag = true;
          listData[i].testNumLin = val.testNum;
        } else {
          listData[i].testNumLinFlag = false;
        }
      }
      this.tableData = listData;
    },
    testNumCancle(val) {

      let list = JSON.stringify(this.tableData);
      let listData = JSON.parse(list);

      for (let i = 0; i < listData.length; i++) {
        if (listData[i].id == val.id) {

          listData[i].testNumLinFlag = false;
          listData[i].testNumLin = val.testNum;
        }
      }
      this.tableData = listData;
    },
    testNumCom(val) {

      let list = JSON.stringify(this.tableData);
      let listData = JSON.parse(list);

      for (let i = 0; i < listData.length; i++) {
        if (listData[i].id == val.id) {

          listData[i].testNumLinFlag = false;
          listData[i].testNum = val.testNumLin;
          this.updataInterFaceTestNum(val.institutionNo, val.testNumLin);
        } else {
          listData[i].testNumLinFlag = false;
        }
      }
      this.tableData = listData;
    },
    updataInterFaceTestNum() {
      this.$http.get(
        `/institution/updateTestNum?institutionNo=${this.orgNum}&testNum=${this.testNum}`,
        {},
        (response) => {
          if (response.code == "200") {
            this.getData();
            this.$message.success("修改成功");
            this.dialogShow = false;
          }
        }
      );
    },
    updataInterFaceIsTestNum(institutionNo, isTestNum) {
      this.$http.get(
        `/institution/updateIsTestNum?institutionNo=${institutionNo}&isTestNum=${isTestNum}`,
        {},
        (response) => {
          if (response.code == "200") {
            this.$message.success("修改成功");
          }
        }
      );
    },

    updataInterFaceIsRegistrantsNum(institutionNo, isRegistrantsNum) {

      this.$http.get(
        `/institution/updateIsRegistrantsNum?institutionNo=${institutionNo}&isRegistrantsNum=${isRegistrantsNum}`,
        {},
        (response) => {
          if (response.code == "200") {
            this.getData();
            this.$message.success("修改成功");
            this.dialogShow = false;
          }
        }
      );
    },
    updataInterFaceRegistrantsNum() {

      this.$http.get(
        `/institution/updateRegistrantsNum?institutionNo=${this.orgNum}&registrantsNum=${this.testNum}`,
        {},
        (response) => {
          if (response.code == "200") {
            this.getData();
            this.$message.success("修改成功");
            this.dialogShow = false;
          }
        }
      );
    },
    //修改状态
    isTestNumFun(val) {
      let list = JSON.stringify(this.tableData);
      let listData = JSON.parse(list);
      for (let i = 0; i < listData.length; i++) {
        if (listData[i].id == val.id) {

          listData[i].isTestNum = val.isTestNum;
          this.updataInterFaceIsTestNum(
            val.institutionNo,
            val.isTestNum ? 1 : 0
          );
        } else {
        }
      }
      this.tableData = listData;
    },
    isRegistrantsNumFun(val) {
      let list = JSON.stringify(this.tableData);
      let listData = JSON.parse(list);
      for (let i = 0; i < listData.length; i++) {
        if (listData[i].id == val.id) {
          listData[i].isRegistrantsNum = val.isRegistrantsNum;
          this.updataInterFaceIsRegistrantsNum(
            val.institutionNo,
            val.isRegistrantsNum ? 1 : 0
          );
        } else {
        }
      }
      this.tableData = listData;
    },
    // 后台get请求获得数据
    getNum() {
      let that = this;
      this.$http.get("/institution/newNumber", {}, (response) => {
        that.dep.institutionNo = response.data;
        that.dep.loginName = response.data;
        that.dep.superAdminPassword = "Admin@123";
        //管理员名称
        that.dep.adminPhone = response.data + "Admin";
        //管理员密码
        that.dep.adminPassword = "Admin@123";
        //体验账号
        that.dep.userPhone = response.data + "Test";
        //体验账号密码
        that.dep.userPassword = "111111";
        that.dep.testNum = 0;
        that.dep.registrantsNum = 0;
      });
    },
    //一键复制关键信息
    copyText() {
      let text = `
网址：https://school.jue-ming.com
学校编号:${this.dep.institutionNo}
超级管理员账号/密码：${this.dep.institutionNo}/${this.dep.superAdminPassword}
测试账号/密码：${this.dep.userPhone}/${this.dep.userPassword}`;
      navigator.clipboard.writeText(text);
      this.$message.success("已复制到粘贴板");
    },
    agreeChangeAddUserFlag(val) {


      if (val == true) {
        this.dep.addUserFlag = true;
      } else {
        this.dep.addUserFlag = false;
      }
      if (val === false) {
        this.dep = {
          userPhone: "",
          userPassword: "",
        };
      }
      if (this.addAdminFlag == "2") {
        this.dep.addAdminFlag = false;
      } else {
        this.dep.addAdminFlag = true;
      }
      if (this.addUserFlag == "2") {
        this.dep.addUserFlag = false;
      } else {
        this.dep.addUserFlag = true;
      }
    },
    agreeChangeAddAdminFlag(val) {
      if (val == true) {
        this.dep.addAdminFlag = "true";
      } else {
        this.dep.addAdminFlag = "false";
      }
      if (val === false) {
        this.dep = {
          adminPhone: "",
          adminPassword: "",
        };
      }
    },
    // 后台get请求获得数据
    getData() {
      this.$http.get(
        "/institution/getAllInstitutionList?searchKey=" +
          this.searchKey +
          "&pageNum=" +
          this.currentPage +
          "&type=" +
          this.type +
          "&pageSize=" +
          this.pageSize +
          "",
        {},
        (response) => {
          this.total = response.data.allNum;
          this.tableData = response.data.data;
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].isRegistrantsNum == 0) {
              this.tableData[i].isRegistrantsNum = false;
            } else {
              this.tableData[i].isRegistrantsNum = true;
            }
            if (this.tableData[i].isTestNum == 0) {
              this.tableData[i].isTestNum = false;
            } else {
              this.tableData[i].isTestNum = true;
            }

            //最大测试次数需要加的标志
            // testNum
            this.tableData[i].testNumLin = 0;
            this.tableData[i].testNumLinFlag = false;
          }

          console.log('this.tableData: ', this.tableData)
        }
      );
    },
    // 添加部门
    addInstitution() {
      this.dep = {
        institutionName: "",
        institutionNo: "",
        loginName: "",
        superAdminPassword: "",
        addAdminFlag: true,
        adminPhone: "",
        adminPassword: "",
        addUserFlag: true,
        userPhone: "",
        userPassword: "",
        testNum: 0, //有效次数
        registrantsNum: 0, //最大注册人数
        isTestNum: 0, //有效次数标志位
        isRegistrantsNum: 0,
      };
      this.isRegistrantsNum='0';
      this.isTestNum='0';
      this.dialogVisible = true;
      this.getNum();
    },

    // 取消添加
    cancelAdd() {
      this.dialogVisible = false;
    },

    // 关闭事件
    closeHandle() {
      this.$refs["ruleForm"].resetFields();
    },

    // 保存新增学校信息
    savaInstitutionInfo() {
      if (this.addAdminFlag == "2") {
        this.dep.addAdminFlag = false;

        this.dep.adminPhone = "";
        this.dep.adminPassword = "";
      } else {
        this.dep.addAdminFlag = true;
      }
      if (this.addUserFlag == "2") {
        this.dep.addUserFlag = false;
        this.dep.userPhone = "";
        this.dep.userPassword = "";
      } else {
        this.dep.addUserFlag = true;
      }
      if (this.isTestNum == "0") {
        this.dep.isTestNum = 0;
      } else {
        this.dep.isTestNum = 1;
      }
      if (this.isRegistrantsNum == "0") {
        this.dep.isRegistrantsNum = 0;
      } else {
        this.dep.isRegistrantsNum = 1;
      }

      console.log('this.dep: ', this.dep)

      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.$http.post(
            "institution/save",
            {
              ...this.dep,
            },
            () => {
              this.getData();
              this.dialogVisible = false;
              this.$message.success("添加成功");
            }
          )
        } else {
          return false;
        }
      })
    },

    // 删除学校信息
    delInstitutionInfo(id) {
      this.$confirm("此操作将删除该学校, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.get(`institution/del/${id}`, {}, (msg) => {
            this.$message.success("删除成功");
            this.getData();
          });
        })
        .catch(() => {});
    },

    viewDetail(row) {
      this.$confirm(`您即将切换${row.institutionName}的管理员账号使用本系统, 是否继续?`, '页面切换提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.setItem('topUserInfo', JSON.stringify({
          userType: sessionStorage.getItem("f7a42fe7211f98ac7a60a285ac3a9528"),
          institutionNo: sessionStorage.getItem("f7a42fe7211f98ac7a60a285ac3a9527"),
          institutionName: sessionStorage.getItem("f7a42fe7211f98ac7a60a285ac3a9529")
        }))

        sessionStorage.setItem("f7a42fe7211f98ac7a60a285ac3a9528", '3')
        sessionStorage.setItem("f7a42fe7211f98ac7a60a285ac3a9527", row.institutionNo)
        sessionStorage.setItem("f7a42fe7211f98ac7a60a285ac3a9529", row.institutionName)

        this.$router.push({
          path: '/ContainerSys/AdminHomeS'
        })
        location.reload()
      }).catch(() => {
      })
    },

    // 查看做该量表的所有测试者
    getSacleUserList(row) {
      this.$router.push({
        path: "CognitiveTaskUserList",
        query: {
          name: row.name,
        },
      });
    },
    // 搜索
    onSubmit() {
      this.currentPage = 1;
      this.getData();
    },
    // 分页start
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },

    // 查看学校权限
    goAuthList(row) {
      this.$router.push(
        "/ContainerSys/AuthList?institutionNo=" + row.institutionNo
      );
    },
  },
};
</script>
<style scoped>
.dialogClass >>> .el-dialog__header {
  padding: 10px 20px 10px !important;
}
.dialogClass >>> .el-dialog__headerbtn {
  top: 10px !important;
}
.dialogClass >>> .el-dialog__body {
  padding: 3px 20px !important;
}
.dialogClass >>> .el-dialog {
  border-radius: 4px;
}
</style>
<style scoped>
.inputTable {
  opacity: 0.9;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 20px;
  background-color: rgb(255, 255, 255);
  position: absolute;
  z-index: 999;
  margin-left: 0px;
  margin-top: -30px;
}
.inputPa {
  position: relative;
  z-index: 2;
}
.pagClass {
  z-index: 998;
  position: relative;
}
</style>