Foshan4A4.0/src/views/systemManagement/EditSystem/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>
          <div>
            <el-button @click="save()">保存</el-button>
          </div>
        </div>
        <!-- 第一排 -->
        <div class="fristLine">
          <div class="inputBox">
            <el-form-item label="策略名称" prop="TacName">
              <el-input
                placeholder="请输入"
                v-model.trim="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.trim="FormData.IpList"
              ></el-input>
            </el-form-item>
          </div>
          <div class="inputBox3">
            <el-form-item label="描述" prop="TacDesc">
              <el-input
                placeholder="请输入"
                v-model.trim="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 class="searchBox">
            <el-input
              placeholder="请输入内容"
              clearable
              v-model.trim="keyWordsUp"
              @keyup.enter.native="queryDatas"
            ></el-input>
            <el-button @click="queryDatas">搜索</el-button>
          </div>
        </div>
        <div class="center-box fpBox">
          <el-row class="scCont" :gutter="16">
            <el-col
              :span="4"
              v-for="item in FormData.UseList"
              :key="item.UserId"
            >
              <el-card class="box-card">
                <div class="lineTop"></div>
                <div class="text item">
                  <div class="header-top">
                    <div class="header-mid">
                      <span :title="item.UserName" class="titles">{{
                        item.UserName
                      }}</span>
                    </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-row>
          <el-empty
            v-if="FormData.UseList && 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
              v-model.trim="keyWords"
              @keyup.enter.native="queryData"
            ></el-input>
            <el-button @click="queryData">搜索</el-button>
          </div>
        </div>
        <div class="center-box">
          <el-row class="scCont" :gutter="16">
            <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">
                      <span :title="item.UserName" class="title">{{
                        item.UserName
                      }}</span>
                    </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-row>
          <el-empty
            v-if="FormData.Unuselist && FormData.Unuselist.length == 0"
            description="没有内容"
            style="margin: 0 auto"
          ></el-empty>
        </div>
      </div>
    </div>
    <!--删除弹框-->
    <Dialog :flag="flag">
      <div class="airportInfoDialog">
        <div class="title1">删除策略</div>
        <div class="content">是否确认删除该策略？</div>
        <div class="foot right t30">
          <el-button
            size="medium"
            @click="remove(item, index)"
            type="danger"
            class="r24"
            >删除</el-button
          >
          <el-button size="medium" @click="flag = false">取消</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import { EditTac, GetTacDetails, DeleteTac } from "@/api/systemConfiguration";
import Dialog from "@/layout/components/Dialog";
import { findarrays } from "@/utils/validate";
import { lengthValidator } from "@/utils/validate";
export default {
  data() {
    return {
      flag: false,
      checkList: false,
      UncheckList: true,
      Unuselist: [],
      keyWords: "",
      keyWordsUp: "",
      options: [
        {
          value: 0,
          label: "黑名单",
        },
        {
          value: 1,
          label: "白名单",
        },
      ],
      boxArr: [],
      boxArr1: [],
      FormData: {
        TacName: "",
        TacDesc: "",
        DateBegin: "",
        DateEnd: "",
        TimeBegin: "",
        TimeEnd: "",
        IpType: 1,
        IpList: "",
        UseList: [],
        UseLists: [],
        Unuselist: [],
        Unuselists: [],
        Date: [],
        Time: [],
      },
      rules: {
        TacName: [
          { required: true, message: "请输入策略名称", trigger: "blur" },
          {
            validator: lengthValidator,
            max: 128,
            message: "长度在 1 到 128 个字符",
            trigger: ["change", "blur"],
          },
        ],
        Date: [
          { required: true, message: "请选择登录日期", trigger: "change" },
        ],
        Time: [
          { required: true, message: "请选择登录时间", trigger: "change" },
        ],
        TacDesc: [
          {
            validator: lengthValidator,
            max: 256,
            message: "长度在 1 到 256 个字符",
            trigger: ["change", "blur"],
          },
        ],
        IpList: [
          {
            validator: lengthValidator,
            max: 256,
            message: "长度在 1 到 256 个字符",
            trigger: ["change", "blur"],
          },
        ],
      },
      editId: null,
    };
  },
  created: function () {
    this.editId = this.$route.query.TacId;
    this.getDetial(this.editId);
  },
  components: { Dialog },
  watch: {
    keyWords: {
      handler(val) {
        if (val.length == 0) {
          const res = this.FormData.Unuselists;
          this.FormData.Unuselist = res;
        }
      },
    },
    keyWordsUp: {
      handler(val) {
        if (val.length == 0) {
          const res = this.FormData.UseLists;
          this.FormData.UseList = res;
        }
      },
    },
  },
  methods: {
    compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
      };
    },
    queryDatas() {
      this.keyWordsUp = this.keyWordsUp.replace(/\s+/g, "");
      const search = this.keyWordsUp;
      if (search) {
        let res = this.FormData.UseLists;
        this.FormData.UseList = res;
        this.FormData.UseList = findarrays(
          this.FormData.UseList,
          "UserName",
          search
        );
      } else {
        this.FormData.UseList = this.FormData.UseLists;
      }
    },
    queryData() {
      this.keyWords = this.keyWords.replace(/\s+/g, "");
      const search = this.keyWords;
      if (search) {
        let res = this.FormData.Unuselists;
        this.FormData.Unuselist = res;
        this.FormData.Unuselist = findarrays(
          this.FormData.Unuselist,
          "UserName",
          search
        );
      } else {
        this.getDetial(this.editId);
        // this.getWarningList();
      }
      // const datas = this.FormData.Unuselist;
      // this.FormData.Unuselist = datas.filter(
      //   (data) =>
      //     !search || data.UserName.toLowerCase().includes(search.toLowerCase())
      // );
    },
    isValidseg(ip) {
      let reg =
        /^((?:(?:[01]?\d?\d|2(?:[0-4]\d|5[0-5]))\.){2}(?:[01]?\d?\d|2(?:[0-4]\d|5[0-5])))(?:(?:\.(?:[01]?\d?\d|2(?:[0-4]\d|5[0-5])))(\/(?:(?:[01]?\d?\d|2(?:[0-4]\d|5[0-5]))))?|(\/(?:(?:[01]?\d?\d|2(?:[0-4]\d|5[0-5])))\.(?:(?:[01]?\d?\d|2(?:[0-4]\d|5[0-5])))))$/;
      return reg.test(ip);
    },
    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 = [];
      if (this.FormData.IpList) {
        ipArr = this.FormData.IpList.split(";");
      }
      let isSave = true;
      if (ipArr.length >= 2) {
        ipArr.forEach((item) => {
          if (this.isValidIP(item) == true || this.isValidseg(item) == true) {
            // this.$message.error("请输入正确IP段，并以;号隔开");
            isSave = true;
          } else {
            this.$message.error("请输入正确IP段，并以;号隔开");
            isSave = false;
          }
        });
      } else {
        if (
          this.isValidIP(ipArr[0]) == true ||
          this.isValidseg(ipArr[0]) == true
        ) {
          isSave = true;
        } else {
          this.$message.error("请输入正确IP段，并以;号隔开");
          isSave = false;
        }
      }

      this.$refs["ruleForm"].validate((valid) => {
        if (valid && isSave) {
          return new Promise((resolve, reject) => {
            EditTac(this.FormData)
              .then((response) => {
                if (response.code === 0) {
                  this.FormData = {
                    TacName: "",
                    TacDesc: "",
                    DateBegin: "",
                    DateEnd: "",
                    TimeBegin: "",
                    TimeEnd: "",
                    IpType: 1,
                    IpList: "",
                    UseList: [],
                    Unuselist: [],
                    Date: [],
                    Time: [],
                  };
                  this.$message.success("编辑成功");
                  this.$store.dispatch("tagsView/delView", this.$route);
                  that.$router.push("/LoginPolicy");
                } else {
                  this.$message.error(response.message);
                }
                resolve();
              })
              .catch((error) => {
                reject(error);
              });
          });
        } else {
          return false;
        }
      });
    },
    getDetial(id) {
      let that = this;
      return new Promise((resolve, reject) => {
        GetTacDetails({ TacId: id })
          .then((response) => {
            if (response.code === 0) {
              const { returnData } = response;
              returnData["Date"] = new Array();
              returnData["Time"] = new Array();
              that.FormData = returnData;
              that.FormData["Date"].push(returnData.DateBegin.split(" ")[0]);
              that.FormData["Date"].push(returnData.DateEnd.split(" ")[0]);
              that.FormData["DateBegin"] = returnData.DateBegin.split(" ")[0];
              that.FormData["DateEnd"] = returnData.DateEnd.split(" ")[0];
              that.FormData["Time"].push(returnData.TimeBegin);
              that.FormData["Time"].push(returnData.TimeEnd);
              if (that.FormData.UseList == null) {
                that.FormData.UseList = [];
              }
              if (that.FormData.Unuselist == null) {
                that.FormData.Unuselist = [];
              }
              that.FormData.Unuselist.forEach((res, index) => {
                res.indexname = index;
              });
              that.FormData.UseLists = that.FormData.UseList;
              that.FormData.Unuselists = that.FormData.Unuselist;
              that.Unuselist = that.FormData.Unuselist;
              that.boxArr = _.cloneDeep(that.FormData.Unuselist);
            }
            resolve();
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    changeChecked(val, index) {
      this.checkList = false;
      this.FormData.UseList.push(val);
      const res = this.FormData.UseList;
      this.FormData.UseLists = res;
      this.FormData.Unuselist.splice(index, 1);
      this.FormData.Unuselists = this.FormData.Unuselists.filter(
        (i) => i.UserId !== val.UserId
      );
    },

    UnchangeChecked(val, index) {
      this.UncheckList = true;
      this.FormData.Unuselist.push(val);
      this.FormData.Unuselist = this.FormData.Unuselist.sort(
        this.compare("indexname")
      );
      this.FormData.Unuselists.push(val);
      this.FormData.Unuselists = this.FormData.Unuselists.sort(
        this.compare("indexname")
      );
      this.FormData.UseList.splice(index, 1);
      // this.FormData.UseLists.splice(index, 1);
      this.FormData.UseLists = this.FormData.UseLists.filter(
        (i) => i.UserId !== val.UserId
      );
    },
    dataChange: function (data) {
      if (data && data.length > 1) {
        this.FormData.DateBegin = data[0];
        this.FormData.DateEnd = data[1];
      }
    },
    timeChange: function (data) {
      if (data && data.length > 1) {
        this.FormData.TimeBegin = data[0];
        this.FormData.TimeEnd = data[1];
      }
    },
    //删除
    remove() {
      let that = this;
      return new Promise((resolve, reject) => {
        DeleteTac({ TacId: this.FormData.TacId })
          .then((response) => {
            if (response.code === 0) {
              this.delItem = null;
              this.$message.success("删除成功");
              this.flag = false;
              setTimeout(function () {
                that.$router.push("/LoginPolicy");
              }, 2000);
            }
            resolve();
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    clearData() {
      this.FormData.Unuselist = this.boxArr;
    },
  },
};
</script>

<style lang="scss" scoped>
.title1 {
  width: 150px;
  height: 26px;
  font-size: 26px;
  margin-bottom: 30px;
  font-weight: bold;
  color: #303133;
}
::v-deep .el-row {
  width: 100%;
}
.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: 40px;
    line-height: 40px;
  }
  .inputBox1 .el-date-editor {
    width: 322px;
    height: 32px;
    line-height: 40px;
    background: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    .el-range-separator {
      height: 40px;
      line-height: 40px;
    }
    .el-range-input {
      background: #f5f7fa;
    }
  }
  .inputBox2 .el-input__inner {
    width: 468px;
    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;
  > .titleBtn {
    width: 63%;
    position: absolute;
    z-index: 99;
    top: 0;
    left: 0;
    background: #ffffff;
  }
  > .center-box {
    margin-top: 70px;
  }
  .searchBox {
    display: flex;
  }
}
.center-box {
  // max-height: calc(100% - 105px);
  margin-top: 12px;
  padding: 24px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  // overflow: auto;
}
.fpBox {
  display: block;
}
.colorTitle {
  margin-top: 20px;
  width: 195px;
  height: 20px;
  display: flex;
  justify-content: space-between;
  float: left;
}
.box-card {
  margin-top: 16px;
  height: 80px;
  background: #f5f7fa;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

// .center-box :hover {
//   box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);
//   transform: translate(0, -5px);
//   transition-delay: 0s !important;
// }
.header-top {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.title {
  max-width: 60px;
  min-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;
  cursor: pointer;
}
.titles {
  max-width: 101px;
  min-width: 101px;
  height: 16px;
  font-size: 16px;
  font-weight: 400;
  color: #303133;
  // margin-right: 20px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
// .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;
  > .titleBtn {
    width: 34%;
    position: absolute;
    z-index: 99;
    top: 0;
    right: 0;
    background: #ffffff;
  }
  > .center-box {
    margin-top: 41px;
  }
  .searchBox {
    display: flex;
  }
}
::v-deep .leftB {
  .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;
  }
}
::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>