Skip to content

N
nse-ui
Commit 6e9c88e4 by wanglizhen
Options

加密算法

parent 3b1a3bbc
正在显示 包含 189 行增加 和 98 行删除
src/views/ruleConfig/Algorithm/index.vue
...@@ -170,11 +170,13 @@ onMounted(() => { ...@@ -170,11 +170,13 @@ onMounted(() => {
</div> </div>
<div class="right"> <div class="right">
<div class="line"></div> <div class="line"></div>
<div style="padding: 26px 28px 0 28px;"> <div style="padding: 26px 28px 0 28px;position: relative;flex: 1;">
<DividerTitle title-name="脱敏规则" /> <DividerTitle title-name="脱敏规则" />
<div class="right-content"> <div class="right-content" v-if="collapseList.length > 0">
<formModule :itemData="editForm" :nameList="rulenameList" type="edit" @confirm="formModuleConfirm" /> <formModule :itemData="editForm" :nameList="rulenameList" type="edit" @confirm="formModuleConfirm" />
</div> </div>
<el-empty description="暂无数据" v-if="collapseList.length <= 0"
style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"></el-empty>
</div> </div>
</div> </div>
</div> </div>
...@@ -236,6 +238,8 @@ onMounted(() => { ...@@ -236,6 +238,8 @@ onMounted(() => {
} }
} }
.right { .right {
display: flex;
flex-direction: column;
flex: 1; flex: 1;
height: 100%; height: 100%;
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
......
src/views/ruleConfig/CalculationMethod/index.vue
<script setup name="CalculationMethod"> <script setup name="CalculationMethod">
import { onMounted, ref, toRefs } from 'vue' import { onMounted, ref, toRefs } from 'vue'
import { Split } from 'view-ui-plus';
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import CollapseView from '@/components/CollapseView/index.vue' import CollapseView from '@/components/CollapseView/index.vue'
...@@ -9,7 +8,7 @@ import ModalPop from "@/components/EditPop/ModalPop.vue" ...@@ -9,7 +8,7 @@ import ModalPop from "@/components/EditPop/ModalPop.vue"
import { query, queryenc, del } from '@/api/ruleConfig/calculationMethod' import { query, queryenc, del } from '@/api/ruleConfig/calculationMethod'
const splitNum = ref(0.31) // 左右分割比例 const fatherIndex = ref(0) // 父级索引
const collapseList = ref([]) const collapseList = ref([])
const encryptionList = ref([]) // 加密规则列表 const encryptionList = ref([]) // 加密规则列表
...@@ -59,11 +58,13 @@ const getCollapse = (type) => { ...@@ -59,11 +58,13 @@ const getCollapse = (type) => {
if (type === 'edit') return if (type === 'edit') return
if (collapseList.value.length <= 0) return if (collapseList.value.length <= 0) return
if (collapseList.value[0].secretkeyList.length > 0) { if (collapseList.value[0].secretkeyList.length > 0) {
fatherIndex.value = 0
editForm.value = { editForm.value = {
dataarea_id: collapseList.value[0].id, dataarea_id: collapseList.value[0].id,
...collapseList.value[0].secretkeyList[0] ...collapseList.value[0].secretkeyList[0]
} }
} else { } else {
fatherIndex.value = null
editForm.value = { editForm.value = {
dataarea_id: collapseList.value[0].id dataarea_id: collapseList.value[0].id
} }
...@@ -113,6 +114,11 @@ const modalConfirm = () => { ...@@ -113,6 +114,11 @@ const modalConfirm = () => {
} }
}) })
} }
// 一级点击
const collapseView = (index) => {
console.log(index)
fatherIndex.value = index
}
// 点击监听 // 点击监听
const collapseChange = (item) => { const collapseChange = (item) => {
...@@ -152,89 +158,168 @@ onMounted(() => { ...@@ -152,89 +158,168 @@ onMounted(() => {
</script> </script>
<template> <template>
<div class="app-container scroller"> <div class="app-container scroller">
<PageTitle>
<template #title>
加密算法
</template>
</PageTitle>
<div class="app-container__body"> <div class="app-container__body">
<Split v-model="splitNum"> <div class="pageTitle">
<template #left> <img class="icon" src="@/assets/images/ruleConfig/algorithmPage.png" alt="">
<div class="demo-split-pane" style="padding: 0 38px 10px 0;width: 100%;overflow: auto;height: 100%;display: flex;flex-direction: column;"> <span>加密算法</span>
<el-input class="mb20" v-model="queryParams.dataarea" placeholder="加密算法搜索"> </div>
<template #suffix> <div class="box">
<el-icon style="vertical-align: middle;cursor: pointer;" @click="getCollapse"> <div class="left">
<search /> <el-input v-model="queryParams.dataarea" placeholder="加密算法搜索" style="width: 369px;margin-bottom: 15px;">
</el-icon> <template #prefix>
</template> <el-icon>
</el-input> <search />
<el-scrollbar style="width: 100%;flex: 1;padding-right: 38px;"> </el-icon>
<CollapseView :list="collapseList" @add="collapseAdd" @childDelete="collapseDelete" </template>
@change="collapseChange" /> <template #append>
</el-scrollbar> <el-button icon="search" class="searchBut" @click="getCollapse">搜索</el-button>
</template>
</el-input>
<div class="collapseView">
<CollapseView :list="collapseList" :fatherIndex="fatherIndex" :currentId="editForm.id" @add="collapseAdd" @childDelete="collapseDelete"
@change="collapseChange" @view="collapseView" />
</div> </div>
</template> </div>
<template #right> <div class="right">
<div class="demo-split-pane"> <div class="line"></div>
<div class="right"> <div style="padding: 26px 28px 0 28px;position: relative;flex: 1;">
<div class="right-title"> <DividerTitle title-name="加密算法" />
<el-icon> <div class="right-content" v-if="collapseList.length > 0">
<info-filled /> <formModule :itemData="editForm" :encryptionDict="encryptionList" type="edit" @cancel="modalPopCancel"
</el-icon>
<span style="margin-left: 5px;">加密算法</span>
</div>
<div class="right-content">
<formModule :itemData="editForm" :encryptionDict="encryptionList" type="edit" @cancel="modalPopCancel"
@confirm="formModuleConfirm" /> @confirm="formModuleConfirm" />
</div>
</div> </div>
<el-empty description="暂无数据" v-if="collapseList.length <= 0"
style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"></el-empty>
</div> </div>
</template> </div>
</Split> </div>
</div> </div>
<!-- 提示框 --> <!-- 提示框 -->
<Modal v-model="modalData.show" :icon="modalData.icon" :cancel="modalData.cancel" :text="modalData.text" <Modal v-model="modalData.show" :icon="modalData.icon" :cancel="modalData.cancel" :text="modalData.text"
@confirm="modalConfirm"></Modal> @confirm="modalConfirm"></Modal>
<!-- 新增加密算法 --> <!-- 新增加密算法 -->
<ModalPop v-model="modalPopShow" width="800px" title="新增加密算法" @cancel="modalPopCancel"> <el-dialog title="新增加密算法" v-model="modalPopShow" :before-close="modalPopCancel" width="800">
<template #content> <div style="padding: 30px;">
<formModule v-if="modalPopShow" :itemData="addForm" :encryptionDict="encryptionList" type="add" @cancel="modalPopCancel" <formModule v-if="modalPopShow" :itemData="addForm" :encryptionDict="encryptionList" type="add" @cancel="modalPopCancel"
@confirm="formModuleConfirm" /> @confirm="formModuleConfirm" />
</template> </div>
</ModalPop> </el-dialog>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-container__body { .app-container__body {
height: calc( padding: 20px 0 0 0;
100vh - var(--navbar-height) - var(--container-pd) - var(--container-pd) .pageTitle {
) !important; margin-bottom: 20px;
.right { display: flex;
padding: 6px 10px 10px; align-items: center;
height: 100%; font-size: 16px;
&-title { font-weight: 500;
padding: 0px 0px 10px 10px; letter-spacing: 0px;
display: flex; line-height: 22px;
align-items: center; color: rgba(53, 64, 79, 1);
font-weight: 700;
color: #515a6e; .icon {
margin-right: 6px;
width: 16px;
height: 16px;
} }
&-content { }
padding: 10px 0px; .box {
width: 80%; display: flex;
margin: 20px auto; flex: 1;
.openEditor { overflow: hidden;
position: absolute; .left {
bottom: 0; margin-right: 30px;
right: 0; width: 565px;
overflow: auto;
height: 100%;
display: flex;
flex-direction: column;
.searchBut {
height: 40px;
background: var(--el-color-primary);
color: var(--el-color-white);
border-radius: 0px 5px 5px 0px;
}
.collapseView {
width: 100%;
flex: 1;
overflow: hidden;
} }
} }
&-btn { .right {
padding: 20px 20px 20px 100px;
display: flex; display: flex;
justify-content: center; flex-direction: column;
flex: 1;
height: 100%;
background: rgba(255, 255, 255, 1);
.line {
width: 100%;
height: 2px;
border-radius: 5px 5px 0px 0px;
background: linear-gradient(
90deg,
rgba(33, 103, 217, 1) 0%,
rgba(17, 200, 250, 1) 34.03%,
rgba(33, 103, 217, 1) 64.58%,
rgba(48, 128, 255, 1) 100%
);
}
&-content {
width: 100%;
.openEditor {
position: absolute;
bottom: 0;
right: 0;
}
:deep(.formBox) {
border-radius: 5px;
background: #ebebeb;
border: 1px solid rgba(29, 178, 245, 1);
overflow: hidden;
.el-form-item__content {
margin-left: 1px;
background: #f5fcff;
}
.el-form-item__label {
height: 40px;
line-height: 40px;
background: #f5fcff;
color: rgba(148, 148, 148, 1);
}
.el-form-item {
margin-bottom: 1px;
}
.el-input {
height: 40px;
line-height: 40px;
}
.is-disabled {
background: #f5fcff;
.el-input__wrapper {
background: #f5fcff;
box-shadow: none;
border-radius: 0;
}
.el-input__inner {
-webkit-text-fill-color: rgba(53, 64, 79, 1);
}
}
.el-form-item__error {
top: 30% !important;
left: auto !important;
right: 89px !important;
}
}
}
&-btn {
padding: 20px 20px 20px 100px;
display: flex;
justify-content: center;
}
} }
} }
} }
......
src/views/ruleConfig/CalculationMethod/modules/formModule.vue
<script setup lang="ts" name="Form"> <script setup lang="ts" name="Form">
import { onMounted, reactive, ref, toRefs, watch, computed } from "vue"; import { onMounted, reactive, ref, toRefs, watch, computed } from "vue";
import { Switch } from "view-ui-plus";
import type { FormInstance } from "element-plus"; import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { querysec, save } from "@/api/ruleConfig/calculationMethod"; import { querysec, save } from "@/api/ruleConfig/calculationMethod";
...@@ -153,40 +152,43 @@ watch( ...@@ -153,40 +152,43 @@ watch(
<template> <template>
<div> <div>
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px" :disabled="readOnly"> <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" :disabled="readOnly">
<el-form-item label="算法名称" prop="enc_name" required> <div class="formBox">
<el-input v-model="form.enc_name" placeholder="请输入算法名称"></el-input> <el-form-item label="算法名称" prop="enc_name" required>
</el-form-item> <el-input v-model="form.enc_name" placeholder="请输入算法名称"></el-input>
<el-form-item label="加密规则" prop="encryption_id" required> </el-form-item>
<div style="width: 100%;background: #F3F5FA;"> <el-form-item label="加密规则" prop="encryption_id" required>
<el-select v-model="form.encryption_id" @change="encryptionChange"> <div style="width: 100%;background: #F3F5FA;">
<el-option v-for="item in encryptionList" :key="item.value" :label="item.label" :value="item.value"> <el-select v-model="form.encryption_id" @change="encryptionChange" v-if="!readOnly">
</el-option> <el-option v-for="item in encryptionList" :key="item.value" :label="item.label" :value="item.value">
</el-select> </el-option>
</div> </el-select>
</el-form-item> <el-input v-model="form.encryption_id" v-if="readOnly"></el-input>
<el-form-item label="密钥" prop="secretkey_id" required> </div>
<div style="width: 100%;background: #F3F5FA;"> </el-form-item>
<el-select v-model="form.secretkey_id"> <el-form-item label="密钥" prop="secretkey_id" required>
<el-option v-for="item in secretkeyList" :key="item.value" :label="item.label" :value="item.value"> <div style="width: 100%;background: #F3F5FA;">
</el-option> <el-select v-model="form.secretkey_id" v-if="!readOnly">
</el-select> <el-option v-for="item in secretkeyList" :key="item.value" :label="item.label" :value="item.value">
</div> </el-option>
</el-form-item> </el-select>
<el-form-item label="默认规则"> <el-input v-model="form.secretkey_id" v-if="readOnly"></el-input>
<Switch true-value="1" false-value="0" v-model="form.defaulttype" :disabled="readOnly"> </div>
<template #open> </el-form-item>
<span>是</span> <el-form-item label="默认规则">
</template> <div class="is-disabled" v-if="readOnly" style="width: 100%;height: 100%;">
<template #close> <div class="el-input__wrapper" style="height: 100%;">{{ form.defaulttype === '1' ? '是':'否' }}</div>
<span>否</span> </div>
</template> <el-radio-group v-model="form.defaulttype" v-if="!readOnly" style="margin-left: 10px;">
</Switch> <el-radio label="0">否</el-radio>
</el-form-item> <el-radio label="1">是</el-radio>
</el-radio-group>
</el-form-item>
</div>
</el-form> </el-form>
<div class="btn"> <div class="btn">
<el-button type="primary" style="width: 150px;" @click="readOnly = false" v-if="readOnly">编辑</el-button> <el-button type="primary" style="width: 80px;" @click="readOnly = false" v-if="readOnly">编辑</el-button>
<el-button type="info" style="width: 150px;" @click="cancel" v-if="!readOnly">取消</el-button> <el-button type="primary" style="width: 80px;" @click="confirm" v-if="!readOnly">确认</el-button>
<el-button type="primary" style="width: 150px;" @click="confirm" v-if="!readOnly">确认</el-button> <el-button style="width: 80px;" @click="cancel" v-if="!readOnly">取消</el-button>
</div> </div>
</div> </div>
</template> </template>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论