加密规则模块上传

src/api/ruleConfig/encryption.js

+import request from '@/utils/request'
+
+/**
+ * 加密规则 - 查询加密规则列表
+ * @param {*} query 
+ * @returns 
+ */
+export function query(query) {
+  return request({
+    url: '/core/encryption/query',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 加密规则 - 查询加密方式列表
+ * @param {*} query 
+ * @returns 
+ */
+export function initEncryptionTypeList(query) {
+  return request({
+    url: '/core/encryption/initEncryptionTypeList',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 加密规则 - 获取字典分类
+ * @param {*} query 
+ * @returns 
+ */
+export function getDictinaryTypes(query) {
+  return request({
+    url: '/core/dictionary/getDictinaryTypes',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 加密规则 - 新增加密分类
+ * @param {*} data 
+ * @returns 
+ */
+export function save(data) {
+  return request({
+    url: '/core/encryption/save',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 加密规则 - 删除加密分类
+ * @param {*} data 
+ * @returns 
+ */
+export function deleteType(data) {
+  return request({
+    url: '/core/encryption/delete',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 加密规则 - 密钥生成
+ * @param {*} query 
+ * @returns 
+ */
+export function getRandomValue(query) {
+  return request({
+    url: '/core/encryption/getRandomValue',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 加密规则 - 测试
+ * @param {*} data 
+ * @returns 
+ */
+export function testEncryption(data) {
+  return request({
+    url: '/core/encryption/testEncryption',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 加密规则 - 新增密钥
+ * @param {*} data 
+ * @returns 
+ */
+export function saveSecretKey(data) {
+  return request({
+    url: '/core/encryption/saveSecretKey',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 加密规则 - 删除密钥
+ * @param {*} data 
+ * @returns 
+ */
+export function delSecretKey(data) {
+  return request({
+    url: '/core/encryption/delSecretKey',
+    method: 'post',
+    data: data
+  })
+}

src/views/ruleConfig/Algorithm/index.vue

@@ -36,6 +36,7 @@ const modalPopShow = ref(false)
 // 获取数据
 const getCollapse = (type) => {
   query({ dataarea: searchValue.value }).then(res => {
+    rulenameList.value = []
     const { data } = res
     collapseList.value = data.map(item => {
       const list = item.ruleList.map(itemTwo => {

src/views/ruleConfig/Algorithm/modules/formModule.vue

@@ -101,7 +101,7 @@ const saveFunc = () => {
 
 // 算法名称验证
 const validateRulename = (rule, value, callback) => {
-  if (form.value.id) {
+  if (form.value.id && form.value.rulename === value) {
     callback();
     return false;
   }

src/views/ruleConfig/Discover/modules/AddDomain.vue

@@ -42,7 +42,8 @@ watch(
   () => props.itemData,
   (newVal) => {
     if (props.type === 'edit' && props.itemData) {
-      form.value = JSON.parse(JSON.stringify(props.itemData))
+      const data = JSON.parse(JSON.stringify(props.itemData));
+      form.value = { ...form.value, ...data };
     }
   },
   { deep: true, immediate: true }
@@ -51,8 +52,9 @@ watch(
 // 取消
 const cancel = () => { 
   if (props.type === 'edit') { 
-    form.value = props.itemData
     readOnly.value = true
+    const data = JSON.parse(JSON.stringify(props.itemData));
+    form.value = { ...form.value, ...data };
   } else if (props.type === 'add') { 
     emit('cancel')
     form.value = {}

src/views/ruleConfig/Encryption/index.vue

 <script setup name="Discover">
 import { onMounted, ref, toRefs } from 'vue'
 import { Split } from 'view-ui-plus';
-
+import { ElMessage } from 'element-plus'
 import CollapseView from '@/components/CollapseView/index.vue'
 import AddEncryption from './modules/AddEncryption.vue' // 加密表单
 import AddKey from './modules/AddKey.vue' // 密钥表单
 import ModalPop from "@/components/EditPop/ModalPop.vue"
 
+import { query, initEncryptionTypeList, getDictinaryTypes, deleteType, delSecretKey } from '@/api/ruleConfig/encryption'
+
 const splitNum = ref(0.31) // 左右分割比例
-const collapseList = ref([])
+const collapseList = ref([]) // 左侧列表数据
+const encryptionTypeList = ref([]) // 加密类型列表
+const dictinaryTypes = ref([]) // 字典类型列表
+const typeNameList = ref([]) // 分类名称列表
+const keyNameList = ref([]) // 分类名称列表
 
 const data = reactive({
-  editEncryptionForm: {
-    name: "",
-  },
-  addEncryptionForm: {
-    name: "",
+  encryptionForm: {},
+  keyForm: {},
+  queryParams: {
+    encryption_name: ''
   },
-  editKeyForm: {
-    name: "",
-  },
-  addKeyForm: {
-    name: "",
+  delData: {
+    id: ''
   }
 });
 
-const { editEncryptionForm, addEncryptionForm, editKeyForm, addKeyForm } = toRefs(data);
+const { encryptionForm, keyForm, queryParams, delData } = toRefs(data);
 const rightType = ref('encryption') // 右侧展示类型
 const modalData = reactive({
   show: false,
@@ -42,48 +44,40 @@ const modalPopData = reactive({
 })
 
 // 获取数据
-const getCollapse = () => {
-  const data = [
-    {
-      name: '测试加密',
-      list: [
-        {
-          name: '按混合证件号字段查询'
-        }
-      ]
-    },
-    {
-      name: '通用规则',
-      list: [
-        {
-          name: 'aaaaa'
-        },
-        {
-          name: 'bbbbb'
-        }
-      ]
-    },
-    {
-      name: '解密数据',
-      list: []
-    }
-  ]
+const getCollapse = (type) => {
+  query(queryParams.value).then(res => {
+    const { data } = res
     collapseList.value = data.map(item => {
       const list = item.list.map(itemTwo => {
         return {
           ...itemTwo,
+          name: itemTwo.secret_key_name,
           isCheck: false,
           isDelete: true,
         }
       })
       return {
         ...item,
+        dataarea: item.encryption_name,
         list: list,
         isAdd: true,
         isView: true,
         isDelete: true,
       }
     })
+    if (type === 'edit') return
+    if (collapseList.value.length <= 0) return
+    modalData.type = 'encryption'
+    encryptionForm.value = collapseList.value[0]
+  })
+}
+
+// 获取加密类型列表
+const getInitEncryptionTypeList = () => {
+  initEncryptionTypeList({}).then(res => {
+    const { data } = res
+    encryptionTypeList.value = data
+  })
 }
 
 // 新增关闭
@@ -93,78 +87,119 @@ const modalPopCancel = () => {
 
 // 新增加密
 const addDomainClick = (item) => {
-  console.log('新增加密')
+  typeNameList.value = []
+  collapseList.value.forEach(item => { 
+    typeNameList.value.push(item.encryption_name)
+  })
   modalPopData.title = '新增加密'
   modalPopData.type = 'encryption'
-  addEncryptionForm.value = {}
+  encryptionForm.value = {}
   modalPopData.show = true
 }
 
 // 新增密钥
 const collapseAdd = (item) => {
-  console.log('新增密钥', item)
+  keyNameList.value = []
+  item.list.forEach(item => {
+    keyNameList.value.push(item.secret_key_name)
+  })
+  const { encryption_name, encryption_type, id } = item
   modalPopData.title = '新增密钥'
   modalPopData.type = 'key'
-  addKeyForm.value = {}
+  keyForm.value = {
+    encryption_name: encryption_name,
+    encryption_type: encryption_type,
+    encryption_id: id
+  }
   modalPopData.show = true
 }
 
-// 删除密钥
-const collapseDelete = (item) => {
-  console.log('删除密钥', item)
-  modalData.type = 'key'
-  modalData.cancel = true
-  modalData.icon = 'error'
-  modalData.text = '删除后无法恢复，是否确认删除[' + item.name + ']?'
-  modalData.show = true
-}
-
 // 删除加密
 const collapseMainDeletion = (item) => {
-  console.log('删除加密事件', item)
+  const { encryption_name } = item
+  delData.value = item
   modalData.type = 'encryption'
   modalData.cancel = false
   modalData.icon = 'error'
-  modalData.text = '删除后无法恢复，是否确认删除[' + item.name + ']?'
+  modalData.text = '删除后无法恢复，是否确认删除[' + encryption_name + ']?'
+  modalData.show = true
+}
+
+// 删除密钥
+const collapseDelete = (item) => {
+  const { secret_key_name } = item
+  delData.value = item
+  modalData.type = 'key'
+  modalData.cancel = true
+  modalData.icon = 'error'
+  modalData.text = '删除后无法恢复，是否确认删除[' + secret_key_name + ']?'
   modalData.show = true
 }
 
 // 提示回调
 const modalConfirm = () => {
   if (modalData.type === 'encryption') {
-    console.log('删除加密确认')
+    const { id } = delData.value
+    deleteType({ encryptionId: id }).then(res => {
+      const { flag } = res
+      if (flag) {
+        ElMessage.success('删除成功')
+        getCollapse()
+      } else {
+        ElMessage.error('删除失败')
+      }
+    })
   } else if (modalData.type === 'key') {
-    console.log('删除密钥确认')
-  } else if (modalData.type === 'default') {
-    console.log('设置默认项')
+    const { id } = delData.value
+    delSecretKey({ keyId: id }).then(res => {
+      const { flag } = res
+      if (flag) {
+        ElMessage.success('删除成功')
+        getCollapse()
+      } else {
+        ElMessage.error('删除失败')
+      }
+    })
   }
   modalData.show = false
 }
 
 // 加密查看
 const collapseView = (item) => {
-  editEncryptionForm.value = item
+  typeNameList.value = []
+  collapseList.value.forEach(item => { 
+    typeNameList.value.push(item.encryption_name)
+  })
+  encryptionForm.value = item
   rightType.value = 'encryption'
 }
 
-// 规则点击监听
-const collapseChange = (item) => {
-  editKeyForm.value = item
+// 密钥点击监听
+const collapseChange = (itemData) => {
+  const { parentItem, item } = itemData
+  const { encryption_name, encryption_type } = parentItem
+  keyNameList.value = []
+  parentItem.list.forEach(itemLi => {
+    keyNameList.value.push(itemLi.secret_key_name)
+  })
+  console.log('密钥点击监听', item)
+  keyForm.value = { ...item, ...{ encryption_name: encryption_name, encryption_type: encryption_type } }
   rightType.value = 'key'
 }
 
 // 新增确认
-const AddDomainConfirm = (item) => {
+const AddFormConfirm = (item) => {
   if (modalPopData.type === 'encryption') {
-    console.log('新增加密确认', item)
+    getCollapse(item)
   } else if (modalPopData.type === 'key') {
-    console.log('新增密钥确认', item)
+    getCollapse(item)
   }
   modalPopData.show = false
 }
 
 onMounted(() => {
   getCollapse()
+  getInitEncryptionTypeList()
 })
 
 </script>
@@ -184,17 +219,17 @@ onMounted(() => {
               <el-button class="mr10" icon="Download" type="primary">备份</el-button>
             </div>
             <div class="mb20" style="display: flex;align-items: center;justify-content: space-between;">
-              <el-input class="mr20" placeholder="加密方式搜索">
+              <el-input class="mr20" v-model="queryParams.encryption_name" placeholder="加密方式搜索">
                 <template #suffix>
-                  <el-icon style="vertical-align: middle;">
+                  <el-icon style="vertical-align: middle;cursor: pointer;" @click="getCollapse">
                     <search />
                   </el-icon>
                 </template>
               </el-input>
               <el-button type="primary" icon="Plus" @click="addDomainClick">新增加密</el-button>
             </div>
-            <CollapseView :list="collapseList" @add="collapseAdd" @mainDeletion="collapseMainDeletion" @childDelete="collapseDelete"
-              @change="collapseChange" @view="collapseView" />
+            <CollapseView :list="collapseList" @add="collapseAdd" @mainDeletion="collapseMainDeletion"
+              @childDelete="collapseDelete" @change="collapseChange" @view="collapseView" />
           </div>
         </template>
         <template #right>
@@ -207,8 +242,11 @@ onMounted(() => {
                 <span style="margin-left: 5px;">{{ rightType === 'encryption' ? '加密定义' : '密钥定义' }}</span>
               </div>
               <div class="right-content">
-                <AddEncryption v-model="editEncryptionForm" type="edit" v-if="rightType === 'encryption'" />
-                <AddKey v-model="editKeyForm" type="edit" v-if="rightType === 'key'" />
+                <AddEncryption :itemData="encryptionForm" :encryptionTypeDict="encryptionTypeList"
+                  :typeNameDict="typeNameList" type="edit" v-if="rightType === 'encryption'" @cancel="modalPopCancel"
+                  @confirm="AddFormConfirm" />
+                <AddKey :itemData="keyForm" :encryptionTypeDict="encryptionTypeList" :keyNameDict="keyNameList"
+                  type="edit" v-if="rightType === 'key'" @cancel="modalPopCancel" @confirm="AddFormConfirm" />
               </div>
             </div>
           </div>
@@ -222,10 +260,10 @@ onMounted(() => {
     <!-- 新增加密 / 密钥 -->
     <ModalPop :width="'850'" v-model="modalPopData.show" :title="modalPopData.title" @cancel="modalPopCancel">
       <template #content>
-        <AddEncryption v-model="addEncryptionForm" type="add" @cancel="modalPopCancel" @confirm="AddDomainConfirm"
-          v-if="modalPopData.type === 'encryption'" />
-        <AddKey v-model="addKeyForm" type="add" @cancel="modalPopCancel" @confirm="AddDomainConfirm"
-          v-if="modalPopData.type === 'key'" />
+        <AddEncryption :itemData="encryptionForm" :encryptionTypeDict="encryptionTypeList" :typeNameDict="typeNameList"
+          type="add" @cancel="modalPopCancel" @confirm="AddFormConfirm" v-if="modalPopData.type === 'encryption'" />
+        <AddKey :itemData="keyForm" :encryptionTypeDict="encryptionTypeList" :keyNameDict="keyNameList" type="add"
+          @cancel="modalPopCancel" @confirm="AddFormConfirm" v-if="modalPopData.type === 'key'" />
       </template>
     </ModalPop>
   </div>

src/views/ruleConfig/Encryption/modules/AddEncryption.vue

 <script setup lang="ts" name="AddDomain">
-import { onMounted, reactive, ref, toRefs, watch } from "vue";
+import { onMounted, reactive, ref, toRefs, watch, computed } from "vue";
+import type { FormInstance } from "element-plus";
+import { ElMessage } from 'element-plus'
+import { save } from '@/api/ruleConfig/encryption'
 
 const props = defineProps<{
-  modelValue: boolean;
+  itemData: Object;
   type: string;
+  encryptionTypeDict: Array<any>;
+  typeNameDict: any;
 }>();
 
-const emit = defineEmits(["update:modelValue", 'cancel','confirm']);
+const emit = defineEmits(['cancel','confirm']);
 
 const data = reactive({
-  rules: {},
+  form: <any>{
+    
+  },
+  rules: {
+    encryption_type: [
+      {
+        required: true,
+        message: "请选择加密方式",
+        trigger: ["change"],
+      },
+    ],
+  },
 });
 
-const { rules } = toRefs(data);
+const { form, rules } = toRefs(data);
 
 const readOnly = ref(true);
-
-watch(
-  () => props.type,
-  (newVal) => {
-    readOnly.value = props.type  === 'edit' ? true : false;
-  },
-  { deep: true, immediate: true }
-);
+const typeNameList = ref([])
+const encryptionTypeOptions = computed(() => props.encryptionTypeDict)
+const formRef = ref<FormInstance>();
 
 // 取消
 const cancel = () => { 
   if (props.type === 'edit') { 
     readOnly.value = true
-  }else if (props.type === 'add') { 
+     const data = JSON.parse(JSON.stringify(props.itemData));
+    form.value = { ...form.value, ...data };
+  } else if (props.type === 'add') { 
     emit('cancel')
+    form.value = {}
   }
 }
 
 const confirm = () => {
+  formRef.value?.validate((valid) => {
+    if (valid) {
+      addDataFun()
+    } else {
+    }
+  });
+}
+
+// 添加加密分类
+const addDataFun = () => {
+  if (props.type === 'edit') { 
+    form.value = {...form.value,...{id: form.value.id}}
+  }
+  save(form.value).then(res => {
+    const { flag } = res
+    if (flag) {
+      ElMessage.success((props.type === "add" || !form.value.id) ? "新增成功" : "修改成功");
       if (props.type === 'edit') {
         readOnly.value = true
+      } else if (props.type === 'add') { 
+        form.value = {}
+      }
+      emit('confirm', props.type)
     }
-  emit('confirm')
+  })
 }
 
+// 分类称验证
+const validateRulename = (rule, value, callback) => {
+  const state = typeNameList.value.includes(value);
+  if (state) {
+    callback(new Error('加密名称已存在'));
+  } else {
+    callback();
+  }
+};
 
+watch(
+  () => props.type,
+  (newVal) => {
+    readOnly.value = props.type  === 'edit' ? true : false;
+  },
+  { deep: true, immediate: true }
+);
+
+watch(
+  () => props.itemData,
+  (newVal) => {
+    if (props.type === 'edit' && props.itemData) {
+      const data = JSON.parse(JSON.stringify(props.itemData));
+      form.value = { ...form.value, ...data };
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+watch(
+  () => props.typeNameDict,
+  (newVal) => {
+    typeNameList.value = props.typeNameDict
+    if (props.type === 'edit' && props.itemData) {
+      typeNameList.value = typeNameList.value.filter(item => item !== props.itemData.encryption_name)
+    }
+  },
+  { deep: true, immediate: true }
+);
 </script>
 
 <template>
   <div>
-    <el-form ref="formRef" :model="modelValue" label-width="100px" :disabled="readOnly">
-      <el-form-item label="加密名称" required>
-        <el-input v-model="modelValue.name"></el-input>
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" :disabled="readOnly">
+      <el-form-item label="加密名称" prop="encryption_name" required :rules="[{ required: true, message: '请输入加密名称', trigger:'blur' },{ required: true, validator: validateRulename, trigger:'blur' }]">
+        <el-input v-model="form.encryption_name"></el-input>
       </el-form-item>
-      <el-form-item label="加密方式" required>
+      <el-form-item label="加密方式" prop="encryption_type" required>
         <div style="width: 100%;background: #F3F5FA;">
-          <el-input v-model="modelValue.name" v-if="readOnly"></el-input>
-          <el-select v-model="modelValue.name" v-if="!readOnly">
-            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+          <el-select v-model="form.encryption_type">
+            <el-option v-for="item in encryptionTypeOptions" :key="item.value" :label="item.text" :value="item.value">
             </el-option>
           </el-select>
         </div>
       </el-form-item>
       <el-form-item label="备注">
-        <el-input type="textarea" rows="4" v-model="modelValue.name"></el-input>
+        <el-input type="textarea" rows="4" v-model="form.note"></el-input>
       </el-form-item>
     </el-form>
     <div class="btn">
@@ -76,4 +148,9 @@ const confirm = () => {
   display: flex;
   justify-content: center;
 }
+:deep(.el-form-item__error) {
+  left: auto;
+  right: 30px;
+  top: 24%;
+}
 </style>
\ No newline at end of file

src/views/ruleConfig/Encryption/modules/AddKey.vue

 <script setup lang="ts" name="AddRules">
-import { onMounted, reactive, ref, toRefs, watch } from "vue";
-import { Switch } from "view-ui-plus";
+import { onMounted, reactive, ref, toRefs, watch, computed } from "vue";
+import type { FormInstance } from "element-plus";
+import { ElMessage } from "element-plus";
+import { getRandomValue, testEncryption, saveSecretKey } from '@/api/ruleConfig/encryption'
 
 const props = defineProps<{
-  modelValue: boolean;
+  itemData: Object;
   type: string;
+  encryptionTypeDict: Array<any>;
+  keyNameDict: any;
 }>();
 
-const emit = defineEmits(["update:modelValue", "cancel", "confirm"]);
+const emit = defineEmits(['cancel','confirm']);
 
 const data = reactive({
-  rules: {},
-});
-
-const { rules } = toRefs(data);
+  form: <any>{
     
-const readOnly = ref(true);
-const radio = ref(1);
-const radioOptions = ref([
-  {
-    label: "正则表达式",
-    value: 1,
   },
+  rules: {
+    sectet_key_value: [
       {
-    label: "自定义方法",
-    value: 2,
+        required: true,
+        message: "密钥值不能为空",
+        trigger: ["change"],
       },
-  {
-    label: "字典发现",
-    value: 3,
+    ],
   },
-]);
+});
+
+const { form, rules } = toRefs(data);
+
+const readOnly = ref(true);
+const testParam = ref(""); // 测试参数
+const encryptedValue = ref(""); // 加密后的值
+const formRef = ref<FormInstance>();
+const keyNameList = ref([])
 
-watch(
-  () => props.type,
-  (newVal) => {
-    readOnly.value = props.type === "edit" ? true : false;
-  },
-  { deep: true, immediate: true }
-);
 // 取消
 const cancel = () => {
   if (props.type === "edit") {
     readOnly.value = true;
+    const data = JSON.parse(JSON.stringify(props.itemData));
+    form.value = { ...form.value, ...data };
   } else if (props.type === "add") {
     emit("cancel");
   }
 };
 
 const confirm = () => {
-  if (props.type === "edit") {
-    readOnly.value = true;
+  formRef.value?.validate((valid) => {
+    if (valid) {
+      saveSecretKeyFun()
+    } else {
+    }
+  });
+};
+
+// 添加密钥
+const saveSecretKeyFun = () => {
+  const { encryption_id, secret_key_name, sectet_key_value, id } = form.value;
+  let data = {
+    encryption_id: encryption_id,
+    secret_key_name: secret_key_name,
+    sectet_key_value: sectet_key_value,
+  }
+  if (props.type === 'edit') { 
+    data = {...data,...{id: id}}
   }
-  emit("confirm");
+  saveSecretKey(data).then(res => {
+    const { flag } = res
+    if (flag) {
+      ElMessage.success((props.type === "add" || !form.value.id) ? "新增成功" : "修改成功");
+      if (props.type === 'edit') {
+        readOnly.value = true
+      } else if (props.type === 'add') { 
+        form.value = {}
+      }
+      testParam.value = ""
+      encryptedValue.value = ""
+      emit('confirm', props.type)
+    }
+  })
+}
+
+// 密钥生成
+const getKeyGeneration = () => {
+  const { encryption_type } = form.value;
+  getRandomValue({ type: encryption_type}).then((res) => {
+    const { flag, data } = res;
+    if (flag){
+      form.value.sectet_key_value = data;
+    }
+  });
 };
+
+// 测试
+const getKeyText = () => {
+  const { encryption_type } = form.value;
+  if (!encryption_type) {
+    return ElMessage.error("密钥值不能为空！");
+  }
+  const data = {
+    param: testParam.value,
+    type: encryption_type,
+    secret_key: form.value.sectet_key_value,
+  }
+  testEncryption(data).then((res) => {
+    const { flag, data } = res;
+    if (flag){
+      encryptedValue.value = data;
+    }
+  });
+}
+
+// 分类称验证
+const validateRulename = (rule, value, callback) => {
+  const state = keyNameList.value.includes(value);
+  if (state) {
+    callback(new Error('加密名称已存在'));
+  } else {
+    callback();
+  }
+};
+
+watch(
+  () => props.type,
+  (newVal) => {
+    readOnly.value = props.type === "edit" ? true : false;
+  },
+  { deep: true, immediate: true }
+);
+
+watch(
+  () => props.itemData,
+  (newVal) => {
+    if (props.itemData) {
+      const data = JSON.parse(JSON.stringify(props.itemData));
+      form.value = { ...form.value, ...data };
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+watch(
+  () => props.keyNameDict,
+  (newVal) => {
+    keyNameList.value = props.keyNameDict
+    if (props.type === 'edit' && props.itemData) {
+      keyNameList.value = keyNameList.value.filter(item => item !== props.itemData.secret_key_name)
+    }
+  },
+  { deep: true, immediate: true }
+);
 </script>
 
 <template>
   <div>
-    <el-form ref="formRef" :model="modelValue" label-width="100px" :disabled="readOnly">
-      <el-form-item label="密钥名称" required>
-        <el-input v-model="modelValue.name"></el-input>
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" :disabled="readOnly">
+      <el-form-item label="密钥名称" prop="secret_key_name" required :rules="[{ required: true, message: '请输入加密名称', trigger:'blur' },{ required: true, validator: validateRulename, trigger:'blur' }]">
+        <el-input v-model="form.secret_key_name"></el-input>
       </el-form-item>
       <el-form-item label="加密算法">
-        <el-input v-model="modelValue.name" disabled></el-input>
+        <el-input v-model="form.encryption_name" disabled></el-input>
       </el-form-item>
-      <el-form-item label="密钥值" required>
+      <el-form-item label="密钥值" prop="sectet_key_value" required>
         <div style="width: 100%;display: flex;align-items: center;">
-          <el-input v-model="modelValue.name" style="flex: 1;"></el-input>
-          <el-button type="primary" style="margin-left: 8px;" v-if="!readOnly">密钥生成</el-button>
+          <el-input v-model="form.sectet_key_value" disabled style="flex: 1;"></el-input>
+          <el-button type="primary" style="margin-left: 8px;" @click="getKeyGeneration" v-if="!readOnly">密钥生成</el-button>
         </div>
       </el-form-item>
       <el-form-item label="测试">
         <div style="width: 100%;display: flex;align-items: center;">
-          <el-input v-model="modelValue.name" style="flex: 1;"></el-input>
-          <el-button type="primary" style="margin-left: 8px;" v-if="!readOnly">测试</el-button>
+          <el-input v-model="testParam" style="flex: 1;"></el-input>
+          <el-button type="primary" style="margin-left: 8px;" @click="getKeyText" v-if="!readOnly">测试</el-button>
         </div>
       </el-form-item>
       <el-form-item label="加密后的值">
-        <el-input v-model="modelValue.name" disabled></el-input>
+        <el-input v-model="encryptedValue" disabled></el-input>
       </el-form-item>
     </el-form>
     <div class="btn">
@@ -91,7 +189,7 @@ const confirm = () => {
 
 <style lang="scss" scoped>
 .el-form-item {
-  margin-bottom: 8px;
+  margin-bottom: 15px;
 }
 .btn {
   padding: 20px;