|
@@ -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>
|