SZYGM1.0/src/views/systemSettings/securityPolicy/index.vue

<template>
  <div class="airportInfo scroll-y">
    <div class="wrap">
      <!-- powerData="new_login_policy_button" -->
      <Minheader :is-auth="true" :is-statuser="true" @addForm="addForm">
        <template #header>
          <div class="status flex-wrap">
            <div class="manageTitle">登录策略</div>
          </div>
        </template>
      </Minheader>
      <div class="app-containers">
        <el-table :data="tableData" style="width: 100%" :row-style="rowStyle" :row-class-name="tableRowClassName" :cell-class-name="cellClassName" :row-key="
            props.tableProperty.rowKey
              ? props.tableProperty.rowKey
              : tablePropertyDefault.rowKey
          " :height="
            props.tableProperty.height
              ? props.tableProperty.height
              : tablePropertyDefault.height
          " :max-height="
            props.tableProperty.maxHeight
              ? props.tableProperty.maxHeight
              : tablePropertyDefault.maxHeight
          " :stripe="
            props.tableProperty.stripe
              ? props.tableProperty.stripe
              : tablePropertyDefault.stripe
          " :border="
            props.tableProperty.border
              ? props.tableProperty.border
              : tablePropertyDefault.border
          " :highlight-current-row="
            props.tableProperty.highlightCurrentRow
              ? props.tableProperty.highlightCurrentRow
              : tablePropertyDefault.highlightCurrentRow
          " :header-cell-class-name="
            props.tableProperty.headerRowClassName
              ? props.tableProperty.headerRowClassName
              : tablePropertyDefault.headerRowClassName
          " :tooltip-effect="
            props.tableProperty.tooltipEffect
              ? props.tableProperty.tooltipEffect
              : tablePropertyDefault.tooltipEffect
          " :show-summary="
            props.tableProperty.showSummary
              ? props.tableProperty.showSummary
              : tablePropertyDefault.showSummary
          ">
          <el-table-column prop="name" label="名称" class="infinite-list-item" />
          <el-table-column label="有效日期" class="infinite-list-item">
            <el-table-column prop="begindate" label="开始日期" class="infinite-list-item" />
            <el-table-column prop="enddate" label="结束日期" class="infinite-list-item" />
          </el-table-column>
          <el-table-column label="有效时间" class="infinite-list-item">
            <el-table-column prop="begintime" label="开始时间" class="infinite-list-item" />
            <el-table-column prop="endtime" label="结束时间" class="infinite-list-item" />
          </el-table-column>
          <el-table-column prop="black" label="黑名单" class="infinite-list-item" />
          <el-table-column prop="white" label="白名单" class="infinite-list-item" />
          <el-table-column prop="remark" label="描述" class="infinite-list-item" />
          <el-table-column v-if="tableBtnGroup.length" label="操作" :align="props.tableColumnProperty.align">
            <template #default="scope">
              <el-button v-for="(btn, index) in tableBtnGroup" :key="index" size="small" @click="handleClick(scope.$index, scope.row, btn.param)" :class="btn.className">{{ btn.name }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- <DataTable
          :tableHeader="state.list"
          :tableData="tableData"
          :tableBtnGroup="tableBtnGroup"
          :tableProperty="{ rowKey: 'ID' }"
          @btnClick="btnClick"
        /> -->
      </div>
      <Dialog width="628px" :flag="flag" :type="type" :msgTitle="msgTitle" :delName="tableForm.name" @submit-form="submitForm" @resetForm="resetForm" @delRest="delRest" @delRemove="delRemove">
        <div class="diacont">
          <el-form ref="securityPolicyForm" :rules="formRules" :model="tableForm">
            <el-row :gutter="24">
              <el-col>
                <el-form-item label="策略名称" prop="name" :rules="formRules.isNotNull" size="default">
                  <el-input v-model="tableForm.name" placeholder="请输入策略名称" />
                </el-form-item>
              </el-col>
              <el-col>
                <div class="flex">
                  <el-form-item label="有效日期" prop="begindate" :rules="formRules.isNotNull" size="default">
                    <el-date-picker v-model="tableForm.begindate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item prop="enddate" :rules="formRules.isNotNull" size="default">
                    <el-date-picker style="margin-left: 40px" format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="tableForm.enddate" type="date" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                </div>
              </el-col>
              <el-col>
                <el-form-item label="有效时间" size="default">
                  <el-time-select v-model="tableForm.begintime" :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30',
                    }" placeholder="选择时间">
                  </el-time-select>
                  <el-time-select style="margin-left: 40px" v-model="tableForm.endtime" :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30',
                    }" placeholder="选择时间">
                  </el-time-select>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="黑名单" size="default">
                  <div class="father_box">
                    <!-- 生成的标签 -->
                    <!-- <div v-for="(item, index) in TagsAll" :key="index" class="spanbox">
                      <span class="tagspan">{{ item }}</span>
                      <i class="span_close" @click="removeTag(index, item)"></i>
                    </div> -->
                    <!-- 输入框 -->
                    <el-input style="width: 100%; border: none" placeholder="请输入黑名单" v-model="tableForm.black" @keyup.enter="addTags" @keyup.delete="deleteTags" class="inputTag" ref="inputTag" type="text" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="白名单" size="default">
                  <div class="father_box">
                    <!-- 生成的标签 -->
                    <!-- <div v-for="(item, index) in TagsAlls" :key="index" class="spanbox">
                      <span class="tagspan">{{ item }}</span>
                      <i class="span_close" @click="removeTags(index, item)"></i>
                    </div> -->
                    <!-- 输入框 -->
                    <el-input style="width: 100%" placeholder="请输入白名单" v-model="tableForm.white" @keyup.enter="addTagss" @keyup.delete="deleteTagss" class="inputTag" ref="inputTag" type="text" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="描述" size="default">
                  <el-input type="textarea" v-model="tableForm.remark" placeholder="请输入描述" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </Dialog>
    </div>
  </div>
</template>
<script setup lang="ts">
import DataTable from "@/components/tableTemp/index.vue";
import Minheader from "@/components/minheader/index.vue";
import Dialog from "@/components/dialog/index.vue";
import { onMounted } from "vue";
import { GeneralDataReception, Query } from "@/api/webApi";
import { ElMessage } from "element-plus";
const formRules = useElement().formRules;

const router = useRouter();
const props = defineProps({
  //表格参数
  tableProperty: {
    type: Object,
    default: {
      height: "100%",
      maxHeight: "100%",
      stripe: true,
      border: true,
      highlightCurrentRow: false,
      rowClassName: "rowClass",
      headerRowClassName: "headerRowClass",
      tooltipEffect: "light",
      showSummary: false,
      rowKey: "",
    },
  },
  //公共表头参数
  tableColumnProperty: {
    type: Object,
    default: {
      width: "",
      fixed: "",
      sortable: false,
      showOverflowTooltip: false,
      align: "center",
      headerAlign: "",
    },
  },
});
//表格参数
const tablePropertyDefault = {
  height: "100%",
  maxHeight: "100%",
  stripe: true,
  border: true,
  highlightCurrentRow: false,
  rowClassName: "rowClass",
  headerRowClassName: "headerRowClass",
  tooltipEffect: "light",
  showSummary: false,
  rowKey: "",
};
const flag = ref<boolean>(false); //弹窗开关
const type = ref<string>(""); //判断是否删除
const TagsAll = ref<any>([]);
const serviceId = ref<number | null>(null);
const currentval = ref<string>("");
const TagsAlls = ref<any>([]);
const currentvals = ref<string>("");
const msgTitle = ref<string>("新增登录策略"); //弹窗标题
const tableColsCopys = reactive<any>({}); //弹窗
const tableForm = reactive({
  name: "",
  begindate: "",
  enddate: "",
  begintime: "",
  endtime: "",
  black: "",
  white: "",
  remark: "",
  event: <number | string>"",
  id: <number | string>"",
  IDKey: "id",
}); //弹窗内容
//列表
const tableData = ref<any>([]);
//表头
const state = reactive({
  list: [
    { label: "名称", key: "name" },
    { label: "有效日期", key: "china" },
    { label: "有效时间", key: "englin" },
    { label: "黑名单", key: "two" },
    { label: "白名单", key: "three" },
    { label: "描述", key: "text" },
  ],
  listLoading: true,
});
const tableBtnGroup = ref([
  {
    name: "编辑",
    className: "editBtn",
    param: 2,
    is: "login_policy_edit_button",
  },
  {
    name: "删除",
    className: "delBtn",
    param: 3,
    is: "login_policy_deletion_button",
  },
]);
const btnAuthMap = [
  ,
  "new_login_policy_button",
  "login_policy_edit_button",
  "login_policy_deletion_button",
];
//新增-编辑-删除
const generalDataReception = async (data: any) => {
  try {
    const ndata = { ...data };
    const { event }: { event: any } = ndata;
    if (event == 1) {
      delete ndata.id;
    }
    const { code } = await GeneralDataReception({
      serviceId: SERVICE_ID.loginPolicyScId,
      dataContent: JSON.stringify(ndata),
      btnAuth: btnAuthMap[ndata.event],
    });
    if (code == 0) {
      ElMessage.success(`操作成功`);
      // this.$message.success("操作成功");
      resetTable();
      getQuery();
      resetForm();
      flag.value = false;
    } else {
      flag.value = false;
      ElMessage.error(`操作失败`);
      resetForm();
    }
  } catch (error) {
    flag.value = false;
    resetForm();
  }
};
const resetTable = () => {
  tableData.value = [];
};
//新增
const addForm = () => {
  msgTitle.value = "新增登录策略";
  for (const key in tableForm) {
    if (Object.prototype.hasOwnProperty.call(tableForm, key)) {
      if (key != "IDKey") {
        tableForm[key] = "";
      }
    }
  }
  tableForm.event = 1;
  flag.value = true;
  type.value = "";
};
//确认提交
const securityPolicyForm: any = ref(null);
const submitForm = () => {
  securityPolicyForm.value.validate((valid: any) => {
    if (valid) {
      generalDataReception(tableForm);
    } else {
      return false;
    }
  });
};
//取消
const resetForm = () => {
  securityPolicyForm.value?.resetFields();
  flag.value = false;
  TagsAll.value = [];
  TagsAlls.value = [];
};
//删除
const delRest = () => {
  flag.value = false;
};
const delRemove = () => {
  tableForm.event = 3;
  generalDataReception(tableForm);
};
//按钮点击index为当前行序号 row 为当前行 param按钮类型判断参数由父组件传过来
const handleClick = (index: number, row: any, param: number) => {
  if (param === 2) {
    msgTitle.value = "修改登录策略";
    flag.value = true;
    type.value = "";
    for (const key in tableForm) {
      if (Object.prototype.hasOwnProperty.call(row, key)) {
        tableForm[key] = row[key];
      }
    }
    tableForm.event = 2;
    // router.push({ path: "/systemSettings/securityPolicyedit" });
  } else if (param === 3) {
    msgTitle.value = "删除航司信息维护";
    flag.value = true;
    type.value = "del";
    for (const key in tableForm) {
      if (Object.prototype.hasOwnProperty.call(row, key)) {
        tableForm[key] = row[key];
      }
    }
  }
};
//行公共样式
const rowStyle = (row: Object, rowIndex: number) => {
  let styleJson: Object = {
    height: "50px",
    fontSize: "14px",
    color: "#101116",
  };
  return styleJson;
};
//表格行class样式 可通过父组件直接传class名称修改当前行样式
const tableRowClassName = (row: any, rowIndex: number) => {
  if (row.row.rowClass) {
    return row.row.rowClass;
  }
  return "";
};
//向父组件传参 btnClick：点击按钮后    load  触发下拉加载   cellClass 修改某一行class的触发条件
const emit = defineEmits(["btnClick", "load", "cellClass"]);
//给某一格加class
const cellClass = ref("");
const cellClassName = (row: Object) => {
  emit("cellClass", row);
  return cellClass.value;
};
const removeTag = (index) => {
  TagsAll.value.splice(index, 1);
};
const addTags = () => {
  if (currentval) {
    TagsAll.value.push(currentval.value);
    currentval.value = "";
  }
};
const deleteTags = () => {
  TagsAlls.value.pop();
};
const removeTags = (index) => {
  TagsAlls.value.splice(index, 1);
};
const addTagss = () => {
  if (currentvals) {
    TagsAlls.value.push(currentvals.value);
    currentvals.value = "";
  }
};
const deleteTagss = () => {
  TagsAlls.value.pop();
};
// const inputStyle = () => {
//   let style = {};
//   style.width = `${inputLength}px`;
//   return style;
// };
defineExpose({
  cellClass,
});
//获取列表数据
const getQuery = async () => {
  const res = await Query({
    id: DATACONTENT_ID.loginPolicyId,
    dataContent: [],
  });
  if (res.code == 0) {
    const { returnData } = res;
    tableData.value = returnData;
  } else {
    ElMessage.error(res.message);
  }
};
onMounted(() => {
  getQuery();
});
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  width: 100px;
}
.app-containers {
  height: calc(100vh - 180px);
}
.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
::v-deep.el-table .rowClass {
  height: 40px;
  font-size: 14px;
  color: #101116;
}
::v-deep.el-table .headerRowClass {
  height: 40px;
  background: #ffffff;
  font-size: 14px;
  font-weight: bold;
  color: #101116;
}
::v-deep.el-table .cell {
  text-align: center;
}
::v-deep.el-table .editBtn {
  background: #ffffff;
  border: 1px solid #f79ec6;
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #ac014d;
}

::v-deep.el-table .delBtn {
  background: #eb2f3b;
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
  border: none;
}
::v-deep.el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background-color: #f0f3f7;
}
::v-deep.el-table thead.is-group th.el-table__cell {
  background: #fff;
}
.father_box {
  width: 100%;
  /* width: 300px; */
  box-sizing: border-box;
  background-color: white;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  font-size: 12px;
  text-align: left;
  padding-left: 5px;
  word-wrap: break-word;
  overflow: hidden;
}
/* 标签 */
.spanbox {
  display: inline-block;
  font-size: 14px;
  margin: 0px 4px 0px 0;
  background: #dfe3ea;
  border: 1px solid #e8eaec;
  border-radius: 3px;
}
.tagspan {
  height: 24px;
  line-height: 22px;
  max-width: 99%;
  position: relative;
  display: inline-block;
  padding-left: 8px;
  color: #495060;
  font-size: 14px;
  cursor: pointer;
  opacity: 1;
  vertical-align: middle;
  overflow: hidden;
  transition: 0.25s linear;
  color: rgb(26, 26, 26);
  font-weight: 600;
}
.span_close {
  padding: 0 4px 0 4px;
  opacity: 1;
  -webkit-filter: none;
  filter: none;
  color: rgb(26, 26, 26);
  font-weight: 600;
}
.span_close:after {
  content: "\00D7";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* line-height: 27px; */
  transition: 0.3s, color 0s;
}
/* input */
.inputTag {
  font-size: 16px;
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0;
  width: auto;
  min-width: 250px;
  vertical-align: top;
  height: 32px;
  color: #495060;
  line-height: 32px;
}
.father_box {
  ::v-deep .el-input__wrapper:hover {
    box-shadow: 0 0 0 0;
  }
  ::v-deep .el-input__wrapper {
    box-shadow: 0 0 0 0;
  }
}
</style>