1

src/views/systemSettings/securityPolicy/index.vue

@@ -1,11 +1,291 @@
 <template>
-  <div></div>
+  <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%">
+          <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>
+          <el-table-column label="有效时间">
+            <el-table-column prop="china" label="开始时间" />
+            <el-table-column prop="englin" label="结束时间" />
+          </el-table-column>
+          <el-table-column prop="name" label="黑名单" />
+          <el-table-column prop="name" label="白名单" />
+          <el-table-column prop="name" label="描述" />
+        </el-table> -->
+        <DataTable
+          :tableHeader="state.list"
+          :tableData="tableData"
+          :tableBtnGroup="tableBtnGroup"
+          :tableProperty="{ rowKey: 'ID' }"
+          @btnClick="btnClick"
+        />
+      </div>
+      <Dialog
+        :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-input
+                    v-model="tableForm.china"
+                    placeholder="请输入中文简称"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col>
+                <el-form-item label="英文简称" size="default">
+                  <el-input
+                    v-model="tableForm.englin"
+                    placeholder="请输入英文简称"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col>
+                <el-form-item label="航司二字码" size="default">
+                  <el-input
+                    v-model="tableForm.two"
+                    placeholder="请输入航司二字码"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col>
+                <el-form-item label="航司三字码" size="default">
+                  <el-input
+                    v-model="tableForm.three"
+                    placeholder="请输入航司三字码"
+                  />
+                </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 lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  setup() {},
+<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 flag = ref<Boolean>(false); //弹窗开关
+const type = 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 = "";
+};
+//编辑
+// 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) {
+    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;
+};
 </script>
-<style lang="scss" scoped></style>
+<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;
+}
+</style>