策略

src/router/routes/routes-file-four.ts

@@ -15,6 +15,14 @@ const HomeRoutes = {
       component: () =>
         import("@/views/systemSettings/securityPolicy/index.vue"),
     },
+    {
+      path: "/systemSettings/securityPolicyedit",
+      name: "SecurityPolicyedit",
+      hidden: true,
+      meta: { title: "安全策略编辑", elSvgIcon: "Fold", icon: "table" },
+      component: () =>
+        import("@/views/systemSettings/securityPolicy/securityPolicyedit.vue"),
+    },
     {
       path: "/systemSettings/warningSet",
       name: "WarningSet",

src/views/systemSettings/securityPolicy/index.vue

@@ -9,33 +9,129 @@
         </template></Minheader
       >
       <div class="app-containers">
-        <!-- <el-table :data="tableData" style="width: 100%">
+        <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="有效日期">
-            <el-table-column prop="china" label="开始日期" />
-            <el-table-column prop="englin" label="结束日期" />
+          <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="有效时间">
-            <el-table-column prop="china" label="开始时间" />
-            <el-table-column prop="englin" label="结束时间" />
+          <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="黑名单" />
-          <el-table-column prop="name" label="白名单" />
-          <el-table-column prop="name" label="描述" />
-        </el-table> -->
-        <DataTable
+          <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"
@@ -46,51 +142,116 @@
           <el-form :model="tableForm">
             <el-row :gutter="24">
               <el-col>
-                <el-form-item label="航司名称" size="default">
+                <el-form-item label="策略名称" size="default">
                   <el-input
                     v-model="tableForm.name"
-                    placeholder="请输入航司名称"
+                    placeholder="请输入策略名称"
                   />
                 </el-form-item>
               </el-col>
               <el-col>
-                <el-form-item label="中文简称" size="default">
-                  <el-input
+                <el-form-item label="有效日期" size="default">
+                  <el-date-picker
                     v-model="tableForm.china"
-                    placeholder="请输入中文简称"
-                  />
+                    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-input
-                    v-model="tableForm.englin"
-                    placeholder="请输入英文简称"
-                  />
+                <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">
-                  <el-input
-                    v-model="tableForm.two"
-                    placeholder="请输入航司二字码"
-                  />
+                <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">
-                  <el-input
-                    v-model="tableForm.three"
-                    placeholder="请输入航司三字码"
-                  />
+                <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-form-item label="描述" size="default">
                   <el-input
                     type="textarea"
                     v-model="tableForm.text"
-                    placeholder="请输入备注"
+                    placeholder="请输入描述"
                   />
                 </el-form-item>
               </el-col>
@@ -105,8 +266,56 @@
 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({
@@ -183,6 +392,8 @@ const resetForm = () => {
   tableForm.two = "";
   tableForm.three = "";
   tableForm.text = "";
+  TagsAll.value = [];
+  TagsAlls.value = [];
 };
 //编辑
 // const editDialog = (data) => {
@@ -199,15 +410,16 @@ const resetForm = () => {
 //编辑-删除
 const btnClick = (row, index, param) => {
   if (param === 2) {
-    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;
+    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;
@@ -225,6 +437,72 @@ const eleDialog = () => {
 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 {
@@ -288,4 +566,76 @@ const delRest = () => {
   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>

src/views/systemSettings/securityPolicy/securityPolicyedit.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="airportInfo">
+    <el-row :gutter="24">
+      <el-col :span="8">
+        <div class="dos">
+          <Minheader :is-Preser="true" :is-statuser="true">
+            <template #header>
+              <div class="status flex-wrap">
+                <div class="manageTitle">验证码策略</div>
+              </div>
+            </template></Minheader
+          >
+          <el-form :model="tableForm">
+            <el-row :gutter="24">
+              <el-col :span="12">
+                <el-form-item label="验证码长度" size="default">
+                  <el-input
+                    v-model="tableForm.name"
+                    placeholder="请输入验证码长度"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="验证码类型" size="default">
+                  <el-select
+                    style="width: 100%"
+                    v-model="tableForm.china"
+                    class="input-shadow"
+                    filterable
+                    default-first-option
+                    clearable
+                    placeholder="请选择"
+                  >
+                    <el-option
+                      v-for="item in tableOptionser"
+                      :key="item.v ? item.v : item.planDepartureApt"
+                      :label="item.k ? item.k : item.planDepartureApt"
+                      :value="item.v ? item.v : item.planDepartureApt"
+                    >
+                    </el-option>
+                  </el-select> </el-form-item
+              ></el-col>
+              <el-col :span="12">
+                <el-form-item label="大小写选择" size="default">
+                  <el-select
+                    style="width: 100%"
+                    v-model="tableForm.englin"
+                    class="input-shadow"
+                    filterable
+                    default-first-option
+                    clearable
+                    placeholder="请选择"
+                  >
+                    <el-option
+                      v-for="item in tableOptionser"
+                      :key="item.v ? item.v : item.planDepartureApt"
+                      :label="item.k ? item.k : item.planDepartureApt"
+                      :value="item.v ? item.v : item.planDepartureApt"
+                    >
+                    </el-option>
+                  </el-select> </el-form-item
+              ></el-col>
+              <el-col :span="12">
+                <el-form-item label="是否开启" prop="roleStatus">
+                  <el-radio-group v-model="tableForm.two">
+                    <el-radio label="1">是</el-radio>
+                    <el-radio label="2"> 否</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+              </el-col></el-row
+            ></el-form
+          >
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="dos">
+          <Minheader :is-Preser="true" :is-statuser="true">
+            <template #header>
+              <div class="status flex-wrap">
+                <div class="manageTitle">密码策略</div>
+              </div>
+            </template></Minheader
+          >
+          <el-form :model="tableForm1">
+            <el-row :gutter="24">
+              <el-col :span="12">
+                <el-form-item label="密码长度" size="default">
+                  <el-input
+                    v-model="tableForm1.name"
+                    placeholder="请输入密码长度"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="密码类型" size="default">
+                  <el-select
+                    style="width: 100%"
+                    v-model="tableForm1.china"
+                    class="input-shadow"
+                    filterable
+                    default-first-option
+                    clearable
+                    placeholder="请选择"
+                  >
+                    <el-option
+                      v-for="item in tableOptionser"
+                      :key="item.v ? item.v : item.planDepartureApt"
+                      :label="item.k ? item.k : item.planDepartureApt"
+                      :value="item.v ? item.v : item.planDepartureApt"
+                    >
+                    </el-option>
+                  </el-select>
+                </el-form-item> </el-col
+              ><el-col :span="12">
+                <el-form-item label="大小写选择" size="default">
+                  <el-select
+                    style="width: 100%"
+                    v-model="tableForm1.englin"
+                    class="input-shadow"
+                    filterable
+                    default-first-option
+                    clearable
+                    placeholder="请选择"
+                  >
+                    <el-option
+                      v-for="item in tableOptionser"
+                      :key="item.v ? item.v : item.planDepartureApt"
+                      :label="item.k ? item.k : item.planDepartureApt"
+                      :value="item.v ? item.v : item.planDepartureApt"
+                    >
+                    </el-option>
+                  </el-select>
+                </el-form-item> </el-col></el-row
+          ></el-form></div
+      ></el-col>
+      <el-col :span="8">
+        <div class="dos">
+          <Minheader :is-Preser="true" :is-statuser="true">
+            <template #header>
+              <div class="status flex-wrap">
+                <div class="manageTitle">多点登录</div>
+              </div>
+            </template></Minheader
+          >
+          <el-form :model="tableForm2">
+            <el-row :gutter="24">
+              <el-col :span="12">
+                <el-form-item label="是否开启" prop="roleStatus">
+                  <el-radio-group v-model="tableForm2.name">
+                    <el-radio label="1">是</el-radio>
+                    <el-radio label="2"> 否</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div></el-col
+      >
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Minheader from "@/components/minheader/index.vue";
+const tableOptionser = ref<Array>([]); //弹窗下拉
+const tableForm = reactive({
+  name: "",
+  china: "",
+  englin: "",
+  two: "1",
+  three: "",
+  text: "",
+}); //弹窗内容
+const tableForm1 = reactive({
+  name: "",
+  china: "",
+  englin: "",
+  two: "",
+  three: "",
+  text: "",
+}); //弹窗内容
+const tableForm2 = reactive({
+  name: "1",
+  china: "",
+  englin: "",
+  two: "",
+  three: "",
+  text: "",
+}); //弹窗内容
+</script>
+
+<style lang="scss" scoped>
+.airportInfo {
+  height: 100%;
+  .dos {
+    width: 100%;
+    height: 240px;
+    background: #fafcff;
+    padding: 24px;
+  }
+}
+::v-deep .el-form-item__label {
+  width: 90px;
+}
+</style>