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

<template>
  <div class="airportInfo scroll-y">
    <div class="wrap">
      <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="china"
              label="开始日期"
              class="infinite-list-item"
            />
            <el-table-column
              prop="englin"
              label="结束日期"
              class="infinite-list-item"
            />
          </el-table-column>
          <el-table-column label="有效时间" class="infinite-list-item">
            <el-table-column
              prop="china"
              label="开始时间"
              class="infinite-list-item"
            />
            <el-table-column
              prop="englin"
              label="结束时间"
              class="infinite-list-item"
            />
          </el-table-column>
          <el-table-column
            prop="name"
            label="黑名单"
            class="infinite-list-item"
          />
          <el-table-column
            prop="name"
            label="白名单"
            class="infinite-list-item"
          />
          <el-table-column
            prop="name"
            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"
        @resetForm="resetForm"
        @delRest="delRest"
      >
        <div class="diacont">
          <el-form :model="tableForm">
            <el-row :gutter="24">
              <el-col>
                <el-form-item label="策略名称" size="default">
                  <el-input
                    v-model="tableForm.name"
                    placeholder="请输入策略名称"
                  />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="有效日期" size="default">
                  <el-date-picker
                    v-model="tableForm.china"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                  <el-date-picker
                    style="margin-left: 40px"
                    v-model="tableForm.englin"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="有效时间" size="default">
                  <el-time-select
                    v-model="tableForm.two"
                    :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30',
                    }"
                    placeholder="选择时间"
                  >
                  </el-time-select>
                  <el-time-select
                    style="margin-left: 8px"
                    v-model="tableForm.three"
                    :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%"
                      placeholder="请输入黑名单"
                      v-model="currentval"
                      @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="currentvals"
                      @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.text"
                    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";
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<Array>([]);
const currentval = ref<String>("");
const TagsAlls = ref<Array>([]);
const currentvals = ref<String>("");
const msgTitle = ref<String>("新增登录策略"); //弹窗标题
const tableColsCopys = reactive<Object>({}); //弹窗
const tableForm = reactive({
  name: "",
  china: "",
  englin: "",
  two: "",
  three: "",
  text: "",
}); //弹窗内容
//列表
const tableData = ref([
  {
    name: "中国国际航空",
    china: "国航",
    englin: "AIRCHINA",
    two: "CA",
    three: "CCA",
    text: "CA国航",
  },
  {
    name: "中国国际航空",
    china: "国航",
    englin: "AIRCHINA",
    two: "CA",
    three: "CCA",
    text: "CA国航",
  },
  {
    name: "中国国际航空",
    china: "国航",
    englin: "AIRCHINA",
    two: "CA",
    three: "CCA",
    text: "CA国航",
  },
]);
//表头
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,
  },
  {
    name: "删除",
    className: "delBtn",
    param: 3,
  },
]);
//新增
const addForm = () => {
  msgTitle.value = "新增登录策略";
  flag.value = true;
  type.value = "";
};
//取消
const resetForm = () => {
  flag.value = false;
  tableForm.name = "";
  tableForm.china = "";
  tableForm.englin = "";
  tableForm.two = "";
  tableForm.three = "";
  tableForm.text = "";
  TagsAll.value = [];
  TagsAlls.value = [];
};
//编辑
// const editDialog = (data) => {
//   msgTitle.value = "编辑航司信息维护";
//   flag.value = true;
//   type.value = "";
//   tableForm.name = data.name;
//   tableForm.china = data.china;
//   tableForm.englin = data.englin;
//   tableForm.two = data.two;
//   tableForm.three = data.three;
//   tableForm.text = data.text;
// };
//编辑-删除
const btnClick = (row, index, param) => {
  if (param === 2) {
    router.push({ path: "/systemSettings/securityPolicyedit" });
    // msgTitle.value = "编辑登录策略";
    // flag.value = true;
    // type.value = "";
    // tableForm.name = index.name;
    // tableForm.china = index.china;
    // tableForm.englin = index.englin;
    // tableForm.two = index.two;
    // tableForm.three = index.three;
    // tableForm.text = index.text;
  } else if (param === 3) {
    msgTitle.value = "删除航司信息维护";
    flag.value = true;
    type.value = "del";
  } else if (param === 4) {
  }
};
//删除
const eleDialog = () => {
  msgTitle.value = "删除登录策略";
  flag.value = true;
  type.value = "del";
};
//删除
const delRest = () => {
  flag.value = false;
};
//按钮点击index为当前行序号 row 为当前行 param按钮类型判断参数由父组件传过来
const handleClick = (index: number, row: Object, param: number) => {
  if (param === 2) {
    router.push({ path: "/systemSettings/securityPolicyedit" });
  } else if (param === 3) {
    msgTitle.value = "删除航司信息维护";
    flag.value = true;
    type.value = "del";
  }
};
//行公共样式
const rowStyle = (row: Object, rowIndex: number) => {
  let styleJson: Object = {
    height: "50px",
    fontSize: "14px",
    color: "#101116",
  };
  return styleJson;
};
//表格行class样式 可通过父组件直接传class名称修改当前行样式
const tableRowClassName = (row: Object, 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,
});
</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 .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-color: rgb(229, 229, 229);
  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;
}
</style>