Foshan4A4.0/src/views/systemManagement/addSystem/index.vue

<template>
  <div class="Box">
    <el-form
      :model="FormData"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div class="topBox">
        <div class="titleBtn">
          <span class="titleStyle">策略信息新增 </span>
          <el-button @click="save()">保存</el-button>
        </div>
        <!-- 第一排 -->
        <div class="fristLine">
          <div class="inputBox">
            <el-form-item label="策略名称" prop="TacName">
              <el-input
                placeholder="请输入"
                v-model="FormData.TacName"
              ></el-input>
            </el-form-item>
          </div>
          <div class="inputBox">
            <el-form-item label="IP类型" prop="IpType">
              <el-select v-model="FormData.IpType" placeholder="请选择类型">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="block inputBox1">
            <el-form-item label="登录日期" prop="Date">
              <el-date-picker
                v-model="FormData.Date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="dataChange"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="block inputBox1">
            <el-form-item label="登录时间" prop="Time">
              <el-time-picker
                is-range
                v-model="FormData.Time"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                @change="timeChange"
                value-format="HH:mm:ss"
              >
              </el-time-picker>
            </el-form-item>
          </div>
        </div>
        <!-- 第二排 -->
        <div class="fristLine" style="margin-top: 24px">
          <div class="inputBox2">
            <el-form-item label="IP段" prop="IpList">
              <el-input
                placeholder="请输入IP,并以‘；’号隔开"
                v-model="FormData.IpList"
              ></el-input>
            </el-form-item>
          </div>
          <div class="inputBox3">
            <el-form-item label="描述" prop="IpList">
              <el-input
                placeholder="请输入"
                v-model="FormData.TacDesc"
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
    <div class="centerBox">
      <div class="leftB">
        <div class="titleBtn">
          <span class="titleStyle">已分配职员 </span>
        </div>
        <div class="center-box">
          <el-row class="scCont" :gutter="16">
            <el-checkbox-group @change="UnchangeChecked" v-model="UncheckList">
              <el-col
                :span="4"
                v-for="(item, index) in FormData.UseList"
                :key="index"
              >
                <el-card class="box-card">
                  <div class="lineTop"></div>
                  <div class="text item">
                    <div class="header-top">
                      <div class="header-mid flex">
                        <span class="title">{{ item.UserName }}</span>
                        <el-checkbox checked></el-checkbox>
                      </div>
                      <!-- <el-checkbox-group v-model="UncheckList" @change="UnchangeChecked(item, index)">
                      <el-checkbox checked></el-checkbox>
                    </el-checkbox-group> -->
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-checkbox-group>
          </el-row>
          <el-empty
            v-if="FormData.UseList.length == 0"
            description="没有选取"
            style="margin: 0 auto"
          ></el-empty>
        </div>
      </div>

      <div class="rightB">
        <div class="titleBtn">
          <span class="titleStyle">选择职员 </span>
          <div class="searchBox">
            <el-input
              placeholder="请输入内容"
              clearable
              @clear="clearData"
              v-model="keyWords"
            ></el-input>
            <el-button @click="getUserData">搜索</el-button>
          </div>
        </div>
        <div class="center-box">
          <el-row
            v-infinite-scroll="load"
            :infinite-scroll-distance="20"
            infinite-scroll-disabled="disabled"
            class="scCont scrollbar"
            :gutter="16"
          >
            <el-checkbox-group @change="changeChecked" v-model="checkList">
              <el-col
                :span="6"
                v-for="(item, index) in FormData.Unuselist"
                :key="index"
              >
                <el-card class="box-card">
                  <div class="lineTop"></div>
                  <div class="text item">
                    <div class="header-top">
                      <div class="header-mid flex">
                        <span class="title">{{ item.UserName }}</span>
                        <el-checkbox :label="index"></el-checkbox>
                      </div>
                      <!-- <el-checkbox-group v-model="checkList" @change="changeChecked(item, index)">
                    <el-checkbox></el-checkbox>
                  </el-checkbox-group> -->
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-checkbox-group>
          </el-row>
          <template v-if="total > 1">
            <p class="center" v-if="loading">加载中...</p>
            <p class="center" v-if="noMore">没有更多数据了~</p>
          </template>
          <el-empty
            v-if="FormData.Unuselist.length == 0"
            description="没有内容"
            style="margin: 0 auto"
          ></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetUserList } from "@/api/apiAuthority";
import { SaveTac } from "@/api/systemConfiguration";
export default {
  data() {
    return {
      keyWords: "",
      checkList: [],
      UncheckList: true,
      options: [
        {
          value: 0,
          label: "黑名单",
        },
        {
          value: 1,
          label: "白名单",
        },
      ],
      boxArr: [],
      boxArr1: [],
      FormData: {
        TacName: "",
        TacDesc: "",
        DateBegin: "",
        DateEnd: "",
        TimeBegin: "",
        TimeEnd: "",
        IpType: 1,
        IpList: "",
        UseList: [],
        Unuselist: [],
        Date: null,
        Time: null,
      },
      rules: {
        TacName: [
          { required: true, message: "请输入策略名称", trigger: "blur" },
          {
            min: 1,
            max: 16,
            message: "长度在 1 到 16 个字符",
            trigger: "blur",
          },
        ],
        Date: [
          { required: true, message: "请选择登录日期", trigger: "change" },
        ],
        Time: [
          { required: true, message: "请选择登录时间", trigger: "change" },
        ],
      },
      pageNum: 1,
      PageSize: 50,
      loading: false,
      total: null,
      arrList: [],
      dataList: [],
      checkData: [],
    };
  },
  created: function () {
    this.getUserList({
      QueryName: this.keyWords,
      PageSize: this.PageSize,
      PageIndex: this.pageNum,
    });
  },
  computed: {
    noMore() {
      return this.pageNum >= this.total;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  methods: {
    isValidIP: function (ip) {
      let reg =
        /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
      return reg.test(ip);
    },
    save() {
      let that = this;
      let ipArr = this.FormData.IpList.split(";");
      let isSave = true;
      if (ipArr.length >= 2) {
        ipArr.forEach((item) => {
          if (this.isValidIP(item) == false) {
            this.$message.error("请输入正确IP段，并以;号隔开");
            isSave = false;
          }
        });
      }
      this.$refs["ruleForm"].validate((valid) => {
        if (valid && isSave) {
          return new Promise((resolve, reject) => {
            SaveTac(this.FormData)
              .then((response) => {
                if (response.code === 0) {
                  this.FormData = {
                    TacName: "",
                    TacDesc: "",
                    DateBegin: "",
                    DateEnd: "",
                    TimeBegin: "",
                    TimeEnd: "",
                    IpType: 1,
                    IpList: "",
                    UseList: [],
                    Unuselist: [],
                    Date: null,
                    Time: null,
                  };
                  this.$message.success("新增成功");
                  this.$store.dispatch("tagsView/delView", this.$route);
                  that.$router.push("/LoginPolicy");
                }
                resolve();
              })
              .catch((error) => {
                reject(error);
              });
          });
        } else {
          return false;
        }
      });
    },
    getUserList(obj) {
      return new Promise((resolve, reject) => {
        this.loading = true;
        GetUserList(obj)
          .then((res) => {
            if (res.code === 0) {
              const datas = res.returnData.records;
              const num = res.returnData.pages;
              this.arrList.push(datas);
              const arrs = this.arrList.flat();
              const msgs = _.unionBy(arrs, "UserId");
              this.FormData.Unuselist = msgs;
              this.dataList = msgs;
              this.total = num;
              this.loading = false;
            }
            resolve();
          })
          .catch((error) => {
            reject(error);
            this.loading = false;
          });
      });
    },
    changeChecked(arr) {
      const datas = this.dataList;
      datas.forEach((item, index) => {
        arr.forEach((p) => {
          if (index == p) {
            this.checkData.push(item);
            this.FormData.Unuselist.splice(index, 1);
          }
        });
      });
      this.FormData.UseList = this.checkData;
      this.checkList = [];
    },
    UnchangeChecked(val, index) {
      this.UncheckList = true;
      this.FormData.Unuselist.push(val);
      this.FormData.UseList.splice(index, 1);
    },
    dataChange: function (data) {
      this.FormData.DateBegin = data[0];
      this.FormData.DateEnd = data[1];
    },
    timeChange: function (data) {
      this.FormData.TimeBegin = data[0];
      this.FormData.TimeEnd = data[1];
    },
    load() {
      this.pageNum += 1;
      this.getUserList({
        QueryName: this.keyWords,
        PageSize: this.PageSize,
        PageIndex: this.pageNum,
      });
    },
    getUserData() {
      this.arrList = [];
      this.FormData.Unuselist = [];
      this.pageNum = 1;
      this.getUserList({
        QueryName: this.keyWords,
        PageSize: this.PageSize,
        PageIndex: this.pageNum,
      });
    },
    clearData() {
      this.arrList = [];
      this.FormData.Unuselist = [];
      this.pageNum = 1;
      this.getUserList({
        QueryName: "",
        PageSize: this.PageSize,
        PageIndex: this.pageNum,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.Box {
  width: 100%;
  height: 100%;
  padding: 0 64px;
  padding-top: 32px;
}
.topBox {
  width: 100%;
  height: 240px;
  background: #ffffff;
  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
  border-radius: 16px;
}
.fristLine {
  display: flex;
  margin-left: 33px;
}
.inputBox {
  display: flex;
  height: 32px;
  line-height: 32px;
}
.inputBox1 {
  display: flex;
  height: 32px;
  line-height: 32px;
}
.inputBox2 {
  display: flex;
  height: 32px;
  line-height: 32px;
}
.inputBox3 {
  display: flex;
  height: 32px;
  line-height: 32px;
}
.SystemName {
  width: 108px;
  height: 14px;
  font-size: 14px;
  font-weight: 400;
  color: #303133;
}
.SystemName1 {
  width: 70px;
  text-align: right;
  margin-left: -10px;
  height: 14px;
  font-size: 14px;
  font-weight: 400;
  color: #303133;
  cursor: pointer;
}
::v-deep .topBox {
  .el-button--default {
    width: 80px;
    height: 40px;
    background: #6e81bc;
    color: #ffffff;
    border-radius: 6px;
    border: none;
  }
  .inputBox .el-input__inner {
    width: 184px;
    height: 32px;
    background: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
  }
  .el-select__caret {
    text-align: center;
    height: 32px;
    line-height: 32px;
  }
  .inputBox1 .el-date-editor {
    width: 322px;
    height: 32px;
    line-height: 32px;
    background: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    .el-range-separator {
      height: 32px;
      line-height: 32px;
    }
    .el-range-input {
      background: #f5f7fa;
    }
  }
  .inputBox2 .el-input__inner {
    width: 480px;
    height: 32px;
    background: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
  }
  .inputBox3 .el-input__inner {
    width: 500px;
    height: 32px;
    background: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
  }
}
.titleBtn {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.titleStyle {
  width: 200px;
  height: 24px;
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-left: 10px;
}
.centerBox {
  display: flex;
  margin-top: 23px;
  position: relative;
}
.leftB {
  width: 1242px;
  height: 760px;
  background: #ffffff;
  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  overflow: auto;
}
.center-box {
  // max-height: calc(100% - 105px);
  // margin-top: 12px;
  padding: 0 24px 24px 24px;
  // overflow: auto;
}
.colorTitle {
  margin-top: 20px;
  width: 195px;
  height: 20px;
  display: flex;
  justify-content: space-between;
  float: left;
}
::v-deep .box-card {
  margin-top: 16px;
  height: 80px;
  background: #f5f7fa;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  .el-checkbox__label {
    display: none;
  }
}

// .center-box :hover {
//   box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);
//   transform: translate(0, -5px);
//   transition-delay: 0s !important;
// }

.title {
  max-width: 60px;
  height: 16px;
  font-size: 16px;
  font-weight: 400;
  color: #303133;
  margin-right: 20px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
// .box-card :hover {
//   box-shadow: none;
//   transform: none;
// }
.rightB {
  width: 670px;
  height: 760px;
  background: #ffffff;
  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  margin-left: 40px;
  overflow: auto;
  // position: relative;
  > .titleBtn {
    width: 610px;
    position: absolute;
    z-index: 99;
    top: 0;
    right: 0;
    background: #ffffff;
  }
  > .center-box {
    margin-top: 72px;
  }
  .searchBox {
    display: flex;
  }
}
::v-deep .rightB {
  .el-input__inner {
    width: 200px;
    height: 32px;
    background: #f5f7fa;
    border: 1px solid #c0c4cc;
    border-radius: 6px;
  }
  .el-button--default {
    width: 64px;
    height: 32px;
    line-height: 8px;
    background: linear-gradient(0deg, #6983be, #777dba);
    border-radius: 6px;
    color: #ffffff;
    border: none;
    margin-left: 10px;
  }
}
::-webkit-scrollbar-track-piece {
  background: #d3dce6;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background: #99a9bf;
  border-radius: 20px;
}
</style>