Merge branch 'master' of https://code.palacesun.com/wuchao/nse-ui

src/api/project/index.js

@@ -12,3 +12,59 @@ export function selectDataProject(data) {
     data: data
   })
 }
+
+export function checkProjectNum(data) {
+  return request({
+    url: '/core/tdataproject/checkProjectNum',
+    method: 'post',
+    data: data
+  })
+}
+export function getdatascopeprojectlist(data) {
+  return request({
+    url: '/core/datascopeproject/getdatascopeprojectlist',
+    method: 'post',
+    data: data
+  })
+}
+export function checkDatasystemName(data) {
+  return request({
+    url: '/core/tdataproject/checkDatasystemName',
+    method: 'post',
+    data: data
+  })
+}
+
+export function checkDatasystem(data) {
+  return request({
+    url: '/core/tdataproject/checkDatasystem',
+    method: 'post',
+    data: data
+  })
+}
+
+
+export function queryByEditSort(data) {
+  return request({
+    url: '/core/tdatasource/queryByEditSort',
+    method: 'post',
+    data: data
+  })
+}
+export function selectProDataSource(data) {
+  return request({
+    url: '/core/tdatasource/selectProDataSource',
+    method: 'post',
+    data: data
+  })
+}
+
+export function queryShemas(data) {
+  return request({
+    url: '/core/searchsensitivedata/queryShemas',
+    method: 'post',
+    data: data
+  })
+}
+
+

src/api/ruleConfig/algorithm.js

@@ -12,3 +12,55 @@ export function query(query) {
     params: query
   })
 }
+
+/**
+ * 脱敏算法 - 新增算法
+ * @param {*} data 
+ * @returns 
+ */
+export function save(data) {
+  return request({
+    url: '/core/desensitizationrule/save',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 脱敏算法 - 获取函数列表
+ * @param {*} query 
+ * @returns 
+ */
+export function queryFunctionList(query) {
+  return request({
+    url: '/core/desensitizationAlgorithm/queryFunctionList',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 脱敏算法 - 删除算法
+ * @param {*} data 
+ * @returns 
+ */
+export function del(data) {
+  return request({
+    url: '/core/desensitizationrule/delete',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 脱敏算法 - 测试算法
+ * @param {*} data 
+ * @returns 
+ */
+export function test(data) {
+  return request({
+    url: '/core/desensitizationrule/test',
+    method: 'post',
+    data: data
+  })
+}
\ No newline at end of file

src/api/ruleConfig/dictionary.js

@@ -104,3 +104,32 @@ export function delValue(data) {
   })
 }
 
+/**
+ * 知识库 - 导出excel
+ * @param {*} data 
+ * @returns 
+ */
+export function exportExcel(data) {
+  return request({
+    url: '/core/dictionaryexcel/export',
+    method: 'post',
+    data: data,
+    responseType: 'blob'
+  })
+}
+
+/**
+ * 知识库 - 导入
+ * @param {*} data 
+ * @returns 
+ */
+export function importfile(data) {
+  return request({
+    url: '/core/dictionaryexcel/importfile',
+    method: 'post',
+    data: data,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
\ No newline at end of file

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/components/EditPop/ExpressionEditor.vue

 <script setup lang="ts" name="ExpressionEditor">
-import { ref, onMounted, toRefs } from "vue";
-import ModalPop from "./ModalPop.vue"
+import { ref, onMounted, toRefs, watch, reactive } from "vue";
+import ModalPop from "./ModalPop.vue";
+import { queryFunctionList, test } from "@/api/ruleConfig/algorithm";
 
 const props = defineProps<{
   modelValue: boolean;
-  data?: Object;
+  rulename?: String;
 }>();
 
 const emit = defineEmits(["update:modelValue", "confirm", "cancel"]);
 
+const editorName = ref("");
 const editorValue = ref("");
-const infoText = ref('')
-const listData = ref([
-  {
-    name: 'convert_base1()'
-  },
-  {
-    name: 'convert_base2()'
-  }
-])
+const infoText = ref("");
+const listData = ref([]);
+const testVisible = ref(false);
+const testResult = ref(""); // 执行结果
+const testData = reactive({
+  expression: "",
+  param: "",
+});
 
 // 确认
 const confirm = () => {
   emit("confirm", editorValue.value);
 };
 
-// 测试
-const test = () => {
-  console.log("test");
-};
-
 const cancel = () => {
+  editorValue.value = JSON.parse(JSON.stringify(props.rulename));
+  editorName.value = JSON.parse(JSON.stringify(props.rulename));
   emit("cancel");
-}
+};
 
 // 划过事件
 const hoverFunc = (item) => {
-  infoText.value = item;
-}
+  infoText.value = item.remark;
+};
+
+// 获取函数列表
+const getQueryFuncList = () => {
+  queryFunctionList({}).then((res) => {
+    const { data } = res;
+    listData.value = data;
+  });
+};
 
-const change = (val) => {
-  if(!val) return;
-  console.log(props.data)
-  editorValue.value = props.data.name;
+// 执行测试
+const executeTest = () => {
+  testData.expression = editorValue.value;
+  test(testData).then((res) => {
+    const { flag, data } = res;
+    if (flag) {
+      testResult.value = data;
+    }
+  });
+};
+// 测试关闭
+const testCancel = () => { 
+  testVisible.value = false;
+  testData.param = ''
+  testResult.value = "";
 }
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (props.modelValue) {
+      getQueryFuncList();
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+watch(
+  () => props.rulename,
+  (newVal) => {
+    editorValue.value = JSON.parse(JSON.stringify(props.rulename));
+    editorName.value = JSON.parse(JSON.stringify(props.rulename));
+  },
+  { deep: true, immediate: true }
+);
 </script>
 
 <template>
-  <ModalPop v-model="props.modelValue" title="编辑器" @cancel="cancel" @change="change">
+  <div>
+    <ModalPop v-model="props.modelValue" title="编辑器" @cancel="cancel">
       <template #content>
-      <div class="title">算法名称 :</div>
+        <div class="title">算法名称 : {{ editorName }}</div>
         <div class="content">
           <div class="content_left">
             <div class="content_left_tap">函数</div>
             <div class="content_left_list">
               <el-scrollbar height="362px">
-              <div class="function__item" @mouseover="hoverFunc(item)" v-for="(item,index) in listData" :key="index">{{ item.name }}</div>
+                <div class="function__item" @mouseover="hoverFunc(item)" v-for="(item,index) in listData" :key="index">
+                  {{ item.name }}</div>
               </el-scrollbar>
             </div>
           </div>
@@ -65,39 +103,55 @@ const change = (val) => {
               <div class="content_right_info_content">定义：{{ infoText }}</div>
             </div>
             <div class="content_right_editor">
-            <el-input
-              type="textarea"
-              placeholder="请输入内容"
-              v-model="editorValue"
-            />
+              <el-input type="textarea" placeholder="请输入内容" v-model="editorValue" />
             </div>
           </div>
         </div>
         <div style="display: flex; justify-content: center; padding-top: 20px;">
-        <el-button type="primary" style="width: 150px;" @click="test">测试</el-button>
+          <el-button type="primary" style="width: 150px;" @click="testVisible = true">测试</el-button>
           <el-button type="info" style="width: 150px;" @click="cancel">取消</el-button>
           <el-button type="primary" style="width: 150px;" @click="confirm">确认</el-button>
         </div>
       </template>
     </ModalPop>
+
+    <!-- 测试 -->
+    <ModalPop v-model="testVisible" width="800px" title="测试" @cancel="testCancel">
+      <template #content>
+        <el-form-item label="输入参数$value的值:" label-width="180px" prop="expression">
+          <div style="width: 100%;display: flex; justify-content: center;">
+            <el-input placeholder="输入参数$value的值" v-model="testData.param" />
+            <el-button type="primary" style="margin-left: 10px;" @click="executeTest">执行</el-button>
+          </div>
+        </el-form-item>
+        <el-form-item label="执行结果:" label-width="180px">
+          <div>{{ testResult }}</div>
+        </el-form-item>
+        <div style="display: flex; justify-content: center; padding-top: 20px;">
+          <el-button type="primary" style="width: 150px;" @click="testCancel">关闭</el-button>
+        </div>
+      </template>
+    </ModalPop>
+  </div>
 </template>
 
 <style lang="scss" scoped>
-.title{
-  height: 32px; line-height: 32px;
+.title {
+  height: 32px;
+  line-height: 32px;
 }
-.content{
+.content {
   display: flex;
   height: 400px;
   width: 100%;
-  &_left{
+  &_left {
     height: 100%;
     width: 322px;
     border-width: 1px;
     border-style: solid;
     border-color: rgb(220, 229, 235);
     border-image: initial;
-    &_tap{
+    &_tap {
       height: 36px;
       line-height: 36px;
       font-size: 14px;
@@ -106,46 +160,46 @@ const change = (val) => {
       padding-left: 20px;
       color: rgb(44, 158, 247);
     }
-    &_list{
+    &_list {
       height: 100%;
-      .function__item{
+      .function__item {
         padding-left: 20px;
         cursor: pointer;
-        color: #7A8596;
+        color: #7a8596;
       }
-      .function__item:hover{
+      .function__item:hover {
         background: rgb(243, 245, 250);
       }
     }
   }
-  &_right{
+  &_right {
     margin-left: 10px;
     height: 100%;
     flex: 1;
-    &_info{
+    &_info {
       height: 146px;
       border-style: solid;
       border-color: rgb(220, 229, 235);
       border-image: initial;
       border-width: 1px 1px 0px;
       padding: 0px 20px;
-      &_title{
+      &_title {
         height: 42px;
         line-height: 42px;
         color: rgb(122, 132, 149);
         font-size: 14px;
         font-weight: 700;
       }
-      &_content{
+      &_content {
         margin-top: -4px;
         color: rgb(122, 132, 149);
         font-size: 12px;
         word-break: break-all;
       }
     }
-    &_editor{
+    &_editor {
       width: 100%;
-      :deep(.el-textarea__inner){
+      :deep(.el-textarea__inner) {
         box-sizing: border-box !important;
         height: 254px !important;
         min-height: 254px !important;

src/views/assetLibrary/modules/formGroup.vue

@@ -223,6 +223,8 @@ const getTestConnect = () => {
 // 检测
 const detection = () => {
   // console.log('检测')
+  form.value.dbtype = titleName.value;
+  
   checkVersion(form.value).then((res) => {
     const { flag, data, msg } = res
     if (flag) {

src/views/project/Project/list.vue

@@ -8,7 +8,9 @@ import ExportDialog from './ExportDialog.vue'
 import { useRouter } from 'vue-router'
 import {changeRoute}  from '@/utils/switchRoute'
 import {
-  selectDataProject
+  selectDataProject,
+  checkProjectNum,
+  getdatascopeprojectlist
 } from '@/api/project'
 
 import useAppStore from '@/store/modules/app'
@@ -139,12 +141,34 @@ function getList() {
 const dialogVisible = ref(false)
 const dialogMode = ref('add')
 const currentProject = ref(null)
-
+const addLoading = ref(false)
 // 显示新增对话框
 const showAddDialog = () => {
-  dialogMode.value = 'add'
+
+
+    addLoading.value = true
+    checkProjectNum().then(res=>{
+      console.log('checkProjectNum',res)
+      if(res.flag){
         currentProject.value = null
         dialogVisible.value = true
+        // getdatascopeprojectlist().then(res=>{
+        //    currentProject.value = null
+        // dialogVisible.value = true
+        // })
+        addLoading.value = false
+      }else{
+        addLoading.value = false
+      }
+    }).catch(err=>{
+      addLoading.value = false
+    })
+  // 
+
+
+
+
+
 }
 
 // 处理项目操作
@@ -177,6 +201,7 @@ const handleCommandProject = (command, project) => {
 const handleEnterProject = (project) => {
   console.log('进入项目:', project)
   changeRoute()
+  sessionStorage.setItem('projectId',project.id)
   router.push({ path:'/indexManage/ItemManage',query: { projectId: project.id } })
 
 
@@ -280,6 +305,7 @@ onMounted(()=>{
       </template>
       <template #buttons>
         <el-button
+          :loading="addLoading"
           type="primary"
           icon="Plus"
           @click="showAddDialog"

src/views/ruleConfig/Algorithm/index.vue

 <script setup name="Algorithm">
 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 formModule from './modules/formModule.vue'
 import ModalPop from "@/components/EditPop/ModalPop.vue"
 
-import { query } from '@/api/ruleConfig/algorithm.js'
+import { query, del } from '@/api/ruleConfig/algorithm.js'
 
 const splitNum = ref(0.31) // 左右分割比例
 const collapseList = ref([])
+const rulenameList = ref([]) // 规则名称列表
 const searchValue = ref('')
 
 const data = reactive({
-  formEdit: {
-    name: "",
-  },
-  formAdd: {
-    name: "",
+  addForm: {},
+  editForm: {},
+  delData: {
+    id: ''
   }
 });
 
-const { formEdit, formAdd } = toRefs(data);
+const { addForm, editForm, delData } = toRefs(data);
 
 const modalData = reactive({
   show: false,
@@ -33,26 +34,41 @@ const modalData = reactive({
 const modalPopShow = ref(false)
 
 // 获取数据
-const getCollapse = () => {
-  query({dataarea: searchValue.value}).then(res => {
+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 => {
+        rulenameList.value.push(itemTwo.rulename)
+        return {
+          ...itemTwo,
+          name: itemTwo.rulename,
+          defaulttype: itemTwo.defaluttype,
+          isCheck: false,
+          isDelete: true,
+        }
+      })
+      return {
+        ...item,
+        list: list,
+        isAdd: true,
+        isView: false,
+        isDelete: false,
+      }
+    })
+    if (type === 'edit') return
+    if (collapseList.value.length <= 0) return
+    if (collapseList.value[0].ruleList.length > 0) {
+      editForm.value = collapseList.value[0].ruleList[0]
+    } else {
+      const { id } = collapseList.value[0]
+      editForm.value = {
+        dataarea_id: id
+      }
+    }
 
   })
-  // collapseList.value = data.map(item => {
-  //   const list = item.list.map(itemTwo => {
-  //     return {
-  //       ...itemTwo,
-  //       isCheck: false,
-  //       isDelete: true,
-  //     }
-  //   })
-  //   return {
-  //     ...item,
-  //     list: list,
-  //     isAdd: true,
-  //     isView: false,
-  //     isDelete: false,
-  //   }
-  // })
 }
 
 // 新增算法关闭
@@ -62,32 +78,50 @@ const modalPopCancel = () => {
 
 // 新增算法
 const collapseAdd = (item) => {
-  console.log('添加事件', item)
-  formAdd.value = {}
+  // console.log('添加事件', item)
+  const { id } = item
+  addForm.value = {
+    dataarea_id: id
+  }
   modalPopShow.value = true
 }
 
 // 删除事件
 const collapseDelete = (item) => {
-  console.log('删除事件', item)
+  // console.log('删除事件', item)
+  const { rulename } = item
+  delData.value = item
   modalData.show = true
   modalData.icon = 'error'
-  modalData.text = '删除后无法恢复，是否确认删除[' + item.name + ']?'
+  modalData.text = '删除后无法恢复，是否确认删除[' + rulename + ']?'
 }
 
 // 删除回调
 const modalConfirm = () => {
+  const { id } = delData.value
+  const data = {
+    ruleId: id
+  }
+  del(data).then(res => {
+    const { flag } = res
+    if (flag) {
+      ElMessage.success('删除成功')
+      getCollapse()
       modalData.show = false
+    } else {
+      ElMessage.error('删除失败')
+    }
+  })
 }
 
 // 点击监听
 const collapseChange = (item) => {
-  formEdit.value = item
+  editForm.value = item.item
 }
 
 // 算法确认
-const formModuleConfirm = (item) => {
-  console.log('新增算法', item)
+const formModuleConfirm = (val) => {
+  getCollapse(val)
   modalPopShow.value = false
 }
 
@@ -106,7 +140,7 @@ onMounted(() => {
     <div class="app-container__body">
       <Split v-model="splitNum">
         <template #left>
-          <div class="demo-split-pane" style="padding: 0 38px 10px 0;width: 100%;overflow: auto;height: 100%;">
+          <div class="demo-split-pane" style="padding: 0 38px 10px 0;width: 100%;overflow: auto;height: 100%;display: flex;flex-direction: column;">
             <el-input class="mb20" v-model="searchValue" placeholder="脱敏规则搜索">
               <template #suffix>
                 <el-icon style="vertical-align: middle;cursor: pointer;" @click="getCollapse">
@@ -114,7 +148,10 @@ onMounted(() => {
                 </el-icon>
               </template>
             </el-input>
-            <CollapseView :list="collapseList" @add="collapseAdd" @childDelete="collapseDelete" @change="collapseChange" />
+            <el-scrollbar style="width: 100%;flex: 1;padding-right: 38px;">
+              <CollapseView :list="collapseList" @add="collapseAdd" @childDelete="collapseDelete"
+              @change="collapseChange" />
+            </el-scrollbar>
           </div>
         </template>
         <template #right>
@@ -127,7 +164,7 @@ onMounted(() => {
                 <span style="margin-left: 5px;">脱敏规则</span>
               </div>
               <div class="right-content">
-                <formModule v-model="formEdit" type="edit" />
+                <formModule :itemData="editForm" :nameList="rulenameList" type="edit" @confirm="formModuleConfirm" />
               </div>
             </div>
           </div>
@@ -139,9 +176,10 @@ onMounted(() => {
       @confirm="modalConfirm"></Modal>
 
     <!-- 新增算法 -->
-    <ModalPop v-model="modalPopShow" title="编辑器" @cancel="modalPopCancel">
+    <ModalPop v-model="modalPopShow" title="新增算法" @cancel="modalPopCancel">
       <template #content>
-        <formModule v-model="formAdd" type="add" @cancel="modalPopCancel" @confirm="formModuleConfirm" />
+        <formModule :itemData="addForm" :nameList="rulenameList" type="add" @cancel="modalPopCancel"
+          @confirm="formModuleConfirm" />
       </template>
     </ModalPop>
   </div>

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

 <script setup lang="ts" name="Form">
 import { onMounted, reactive, ref, toRefs, watch } from "vue";
 import { Switch } from "view-ui-plus";
-import ExpressionEditor from '@/components/EditPop/ExpressionEditor.vue'
+import type { FormInstance } from "element-plus";
+import { ElMessage } from "element-plus";
+import ExpressionEditor from "@/components/EditPop/ExpressionEditor.vue";
+import { save } from "@/api/ruleConfig/algorithm";
 
 const props = defineProps<{
-  modelValue: boolean;
+  itemData: Object;
   type: string;
+  nameList: any;
 }>();
 
-const emit = defineEmits(["update:modelValue", 'cancel','confirm']);
+const emit = defineEmits(["cancel", "confirm"]);
 
 const data = reactive({
-  rules: {},
+  form: <any>{
+    dataarea_id: "",
+    defaluttype: "0",
+    expression: "",
+    id: "",
+    rulename: "",
+    rulesource: "",
+  },
+  rules: {
+    expression: [
+      {
+        required: true,
+        message: "请输入表达式",
+        trigger: ["blur"],
+      },
+    ],
+  },
 });
 
-const { rules } = toRefs(data);
+const { form, rules } = toRefs(data);
 
 const editorShow = ref(false);
 const readOnly = ref(true);
 const editor = ref({});
+const rulenameList = ref([])
+const formRef = ref<FormInstance>();
 
-watch(
-  () => props.type,
-  (newVal) => {
-    readOnly.value = props.type  === 'edit' ? true : false;
-  },
-  { deep: true, immediate: true }
-);
+// 重置
+const reset = () => {
+  form.value = {
+    dataarea_id: "",
+    defaulttype: "0",
+    enc_name: "",
+    encryption_id: "",
+    secretkey_id: "",
+  };
+};
 
 // 打开编辑器
 const openEditor = () => {
-  editorShow.value = true
-  editor.value = props.modelValue
-}
+  editorShow.value = true;
+  editor.value = form.value.expression;
+};
 
 // 取消
 const cancel = () => {
-  if (props.type === 'edit') { 
-    readOnly.value = true
-  }else if (props.type === 'add') { 
-    emit('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) {
+      saveFunc();
+    } else {
     }
-  emit('confirm')
-}
+  });
+};
+
+const saveFunc = () => {
+  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") {
+        reset();
+      }
+      emit("confirm", props.type);
+    }
+  });
+};
+
+// 算法名称验证
+const validateRulename = (rule, value, callback) => {
+  if (form.value.id && form.value.rulename === value) {
+    callback();
+    return false;
+  }
+  const state = rulenameList.value.includes(value);
+  if (state) {
+    callback(new Error('算法名称已存在'));
+  } else {
+    callback();
+  }
+};
 
 // 编辑器确认
 const formConfirm = (val) => {
-  editorShow.value = false
-  props.modelValue.name = val
-}
+  editorShow.value = false;
+  form.value.expression = val;
+};
 
+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 };
+      if (props.type === 'edit') {
+        rulenameList.value = rulenameList.value.filter(item => item !== data.rulename)
+      }
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+watch(
+  () => props.nameList,
+  (newVal) => {
+    rulenameList.value = props.nameList;
+    const data = JSON.parse(JSON.stringify(props.itemData));
+    if (props.type === 'edit' && data) {
+      rulenameList.value = rulenameList.value.filter(item => item !== data.rulename)
+    }
+  },
+  { 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="rulename" required 
+      :rules="[{ required: true, message: '请输入算法名称', trigger:'blur' },{ required: true, validator: validateRulename, trigger:'blur' }]">
+        <el-input v-model="form.rulename"></el-input>
       </el-form-item>
-      <el-form-item label="表达式" required>
-        <el-input type="textarea" rows="8" v-model="modelValue.name"></el-input>
+      <el-form-item label="表达式" prop="expression" required>
+        <el-input type="textarea" rows="8" v-model="form.expression"></el-input>
         <el-button class="openEditor" type="primary" @click="openEditor">打开编辑器</el-button>
       </el-form-item>
       <el-form-item label="默认规则">
-        <Switch :disabled="readOnly">
+        <Switch true-value="1" false-value="0" v-model="form.defaluttype" :disabled="readOnly">
           <template #open>
             <span>是</span>
           </template>
@@ -86,7 +182,7 @@ const formConfirm = (val) => {
       <el-button type="primary" style="width: 150px;" @click="confirm" v-if="!readOnly">确认</el-button>
     </div>
 
-    <ExpressionEditor v-model="editorShow" :data="editor" @cancel=" editorShow = false" @confirm="formConfirm" />
+    <ExpressionEditor v-model="editorShow" :rulename="editor" @cancel=" editorShow = false" @confirm="formConfirm" />
   </div>
 </template>
 

src/views/ruleConfig/CalculationMethod/index.vue

@@ -14,9 +14,8 @@ const collapseList = ref([])
 const encryptionList = ref([]) // 加密规则列表
 
 const data = reactive({
-  formData: {
-    name: "",
-  },
+  addForm: {},
+  editForm: {},
   queryParams: {
     dataarea: ''
   },
@@ -25,7 +24,7 @@ const data = reactive({
   }
 });
 
-const { formData, queryParams, delData } = toRefs(data);
+const { addForm, editForm, queryParams, delData } = toRefs(data);
 
 const modalData = reactive({
   show: false,
@@ -37,7 +36,7 @@ const modalData = reactive({
 const modalPopShow = ref(false)
 
 // 获取数据
-const getCollapse = () => {
+const getCollapse = (type) => {
   query(queryParams.value).then(res => {
     const { data } = res
     collapseList.value = data.map(item => {
@@ -57,14 +56,15 @@ const getCollapse = () => {
         isDelete: false,
       }
     })
+    if (type === 'edit') return
     if (collapseList.value.length <= 0) return
     if (collapseList.value[0].secretkeyList.length > 0) {
-      formData.value = {
+      editForm.value = {
         dataarea_id: collapseList.value[0].id,
         ...collapseList.value[0].secretkeyList[0]
       }
     } else {
-      formData.value = {
+      editForm.value = {
         dataarea_id: collapseList.value[0].id
       }
     }
@@ -80,7 +80,7 @@ const modalPopCancel = () => {
 const collapseAdd = (item) => {
   // console.log('添加事件', item)
   const { id } = item
-  formData.value = {
+  addForm.value = {
     dataarea_id: id
   }
   modalPopShow.value = true
@@ -88,7 +88,7 @@ const collapseAdd = (item) => {
 
 // 删除事件
 const collapseDelete = (item) => {
-  console.log('删除事件', item)
+  // console.log('删除事件', item)
   const { name } = item
   delData.value = item
   modalData.show = true
@@ -112,21 +112,20 @@ const modalConfirm = () => {
       ElMessage.error('删除失败')
     }
   })
-
 }
 
 // 点击监听
 const collapseChange = (item) => {
-  console.log('修改事件', item)
-  formData.value = {
+  // console.log('修改事件', item)
+  editForm.value = {
     ...item.item
   }
 }
 
 // 算法确认
-const formModuleConfirm = (item) => {
-  console.log('新增算法', item)
-  getCollapse()
+const formModuleConfirm = (val) => {
+  // console.log('新增算法', val)
+  getCollapse(val)
   modalPopShow.value = false
 }
 
@@ -183,7 +182,7 @@ onMounted(() => {
                 <span style="margin-left: 5px;">加密算法</span>
               </div>
               <div class="right-content">
-                <formModule :itemData="formData" :encryptionDict="encryptionList" type="edit" @cancel="modalPopCancel"
+                <formModule :itemData="editForm" :encryptionDict="encryptionList" type="edit" @cancel="modalPopCancel"
                   @confirm="formModuleConfirm" />
               </div>
             </div>
@@ -196,9 +195,9 @@ onMounted(() => {
       @confirm="modalConfirm"></Modal>
 
     <!-- 新增加密算法 -->
-    <ModalPop v-model="modalPopShow" title="编辑器" @cancel="modalPopCancel">
+    <ModalPop v-model="modalPopShow" width="800px" title="新增加密算法" @cancel="modalPopCancel">
       <template #content>
-        <formModule :itemData="formData" :encryptionDict="encryptionList" type="add" @cancel="modalPopCancel"
+        <formModule :itemData="addForm" :encryptionDict="encryptionList" type="add" @cancel="modalPopCancel"
           @confirm="formModuleConfirm" />
       </template>
     </ModalPop>

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

 <script setup lang="ts" name="Form">
-import { onMounted, reactive, ref, toRefs, watch } from "vue";
+import { onMounted, reactive, ref, toRefs, watch, computed } from "vue";
 import { Switch } from "view-ui-plus";
 import type { FormInstance } from "element-plus";
 import { ElMessage } from "element-plus";
@@ -47,10 +47,10 @@ const data = reactive({
 });
 
 const { form, rules } = toRefs(data);
-const encryptionList = ref<any[]>([]); // 加密规则选项列表
 const secretkeyList = ref<any[]>([]); // 密钥选项列表
 const readOnly = ref(true);
 const formRef = ref<FormInstance>();
+const encryptionList = computed(() => props.encryptionDict); // 加密规则选项列表
 
 // 重置
 const reset = () => { 
@@ -85,7 +85,7 @@ const confirm = () => {
 };
 
 const saveFunc = () => {
-  console.log(form.value)
+  // console.log(form.value)
   if (props.type === "edit") {
     form.value = { ...form.value, ...{ id: form.value.id } }
   }
@@ -135,9 +135,6 @@ watch(
   () => props.itemData,
   (newVal) => {
     if (props.itemData) {
-      if (!props.itemData.enc_name) {
-        reset()
-      }
       const data = JSON.parse(JSON.stringify(props.itemData));
       form.value = { ...form.value, ...data };
       if (props.type === "edit" && form.value.secretkey_id) {
@@ -148,13 +145,6 @@ watch(
   { deep: true, immediate: true }
 );
 
-watch(
-  () => props.encryptionDict,
-  (newVal) => {
-    encryptionList.value = props.encryptionDict;
-  },
-  { deep: true, immediate: true }
-);
 </script>
 
 <template>

src/views/ruleConfig/Dictionary/index.vue

@@ -8,7 +8,7 @@ import AddClass from './modules/AddClass.vue' // 分类
 import AddValue from './modules/AddValue.vue' // 值
 import uploadModule from './modules/uploadModule.vue' // 上传模块
 
-import { dictinaryTypes, query, delDictionaryType, delValue } from '@/api/ruleConfig/dictionary'
+import { dictinaryTypes, query, delDictionaryType, delValue, exportExcel } from '@/api/ruleConfig/dictionary'
 
 const splitNum = ref(0.31) // 左右分割比例
 
@@ -118,7 +118,7 @@ const modalConfirm = () => {
       }
       if (value === queryParams.value.typecode) {
         getData()
-      }else{
+      } else {
         getData('class')
       }
     })
@@ -143,7 +143,7 @@ const modalConfirm = () => {
 
 // 分类查看
 const classView = (item) => {
-  if(queryParams.value.typecode === item.value) return
+  if (queryParams.value.typecode === item.value) return
   queryParams.value.typecode = item.value
   queryParams.value.typename = item.text
   getTableData()
@@ -159,6 +159,7 @@ const AddDomainConfirm = (item) => {
     console.log('导入', item)
     getTableData()
   }
+  modalPopData.type = ''
   modalPopData.show = false
 }
 
@@ -172,7 +173,7 @@ const importClick = () => {
 // 获取分类名称
 const getClassName = (value) => {
   const item = classList.value.find(item => item.value === value)
-  return item? item.text : ''
+  return item ? item.text : ''
 }
 
 // 获取列表数据
@@ -183,7 +184,7 @@ const getData = (type) => {
     if (classList.value.length <= 0) return
     if (type === 'class') {
       getTableData()
-    }else {
+    } else {
       queryParams.value.typecode = classList.value[0].value
       queryParams.value.typename = classList.value[0].text
       getTableData()
@@ -200,6 +201,21 @@ const getTableData = () => {
   })
 }
 
+// 导出excel
+const exportExcelFunc = () => {
+  exportExcel({ typecode: queryParams.value.typecode }).then(response => {
+    const { data } = response;
+    const blob = new Blob([response], { type: 'application/vnd.ms-excel,charset=utf-8' });
+    const link = document.createElement('a')
+    link.href = URL.createObjectURL(blob)
+    link.download = `${queryParams.value.typename}知识库.xlsx`
+    link.click()
+    URL.revokeObjectURL(link.href)
+    ElMessage.success('导出成功')
+  })
+}
+
+
 onMounted(() => {
   getData()
 })
@@ -249,7 +265,7 @@ onMounted(() => {
               </el-form-item>
               <div style="display: flex;">
                 <el-button icon="Upload" type="primary" @click="importClick">导入</el-button>
-                <el-button icon="Download" type="success">导出</el-button>
+                <el-button icon="Download" type="success" @click="exportExcelFunc">导出</el-button>
                 <el-button icon="Plus" type="primary" @click="addValueClick('add')">新增值</el-button>
               </div>
             </div>
@@ -287,8 +303,8 @@ onMounted(() => {
       <template #content>
         <AddClass :itemData="addClassForm" :type="modalPopData.operation" @cancel="modalPopCancel"
           @confirm="AddDomainConfirm" v-if="modalPopData.type === 'class'" />
-        <AddValue :itemData="addValueForm" :type="modalPopData.operation" :classDict="classList" @cancel="modalPopCancel"
-          @confirm="AddDomainConfirm" v-if="modalPopData.type === 'value'" />
+        <AddValue :itemData="addValueForm" :type="modalPopData.operation" :classDict="classList"
+          @cancel="modalPopCancel" @confirm="AddDomainConfirm" v-if="modalPopData.type === 'value'" />
         <uploadModule @cancel="modalPopCancel" @confirm="AddDomainConfirm" v-if="modalPopData.type === 'upload'" />
       </template>
     </ModalPop>

src/views/ruleConfig/Dictionary/modules/AddValue.vue

 <script setup lang="ts" name="AddValue">
-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";
 
@@ -36,7 +36,7 @@ const data = reactive({
 
 const { form, rules } = toRefs(data);
 const formRef = ref<FormInstance>();
-const classDictList = ref<any[]>([]);
+const classDictList = computed(() => props.classDict);
 
 // 重置
 const reset = () => {
@@ -81,20 +81,12 @@ watch(
   () => props.itemData,
   (newVal) => {
     if (props.itemData) {
-      const data = JSON.parse(JSON.stringify(props.itemData))
-      form.value = {...form.value, ...data}
+      const data = JSON.parse(JSON.stringify(props.itemData));
+      form.value = { ...form.value, ...data };
     }
   },
   { deep: true, immediate: true }
 );
-
-watch(
-  () => props.classDict,
-  (newVal) => {
-    classDictList.value = props.classDict;
-  },
-  { deep: true, immediate: true }
-);
 </script>
 
 <template>

src/views/ruleConfig/Dictionary/modules/UploadModule.vue

 <script setup lang="ts" name="AddClass">
-import { ref } from "vue";
-import CustomUpload from "@/components/CustomUpload/index.vue"
+import { ref, reactive } from "vue";
+import { ElMessage } from "element-plus";
+import CustomUpload from "@/components/CustomUpload/index.vue";
+import { importfile } from "@/api/ruleConfig/dictionary";
 
-const emit = defineEmits(["update:modelValue", "cancel", "confirm"]);
+const emit = defineEmits(["cancel", "confirm"]);
 
-const radioValue = ref(1);
-const fileList = ref<File[]>([]);
+const uploadLoading = ref(false);
+const uploadFile = ref({});
+const smart = ref(1)
 
 // 取消
 const cancel = () => {
@@ -14,32 +17,45 @@ const cancel = () => {
 
 // 确认
 const confirm = () => {
-  console.log(fileList.value);
   // emit("confirm");
+  if (!uploadFile.value.name) {
+    ElMessage.error("请先选择文件");
+    return;
+  }
+  uploadLoading.value = true;
+  const formData = new FormData();
+  formData.append('fileUpload', uploadFile.value.raw);
+  formData.append('smart', smart.value.toString());
+  importfile(formData).then((res) => {
+    const { flag } = res;
+    if (flag) {
+      uploadLoading.value = false;
+      ElMessage.success('导入成功');
+      emit("confirm");
+    }
+  });
 };
 
-const handleUpload = (file: File) => {
-  console.log(file);
-  // 上传文件
-  // 处理上传结果
-  // 更新modelValue
+const handleFileChange = (file) => {
+  uploadFile.value = file;
 };
 </script>
 
 <template>
   <div>
     <div class="mb20">
-      <CustomUpload v-model:file-list="fileList" :limit="1" :needType="false" :needSize="false"  :listShow="false"  prompt='点击或拖拽文件到此处上传' />
+      <CustomUpload :prompt='uploadFile ? uploadFile.name : ""' :loading="uploadLoading"
+        @file-change="handleFileChange" />
     </div>
     <el-form-item label="上传方式" label-width="200px">
-      <el-radio-group v-model="radioValue">
+      <el-radio-group v-model="smart">
         <el-radio :label="1">覆盖原数据</el-radio>
-        <el-radio :label="2">追加数据</el-radio>
+        <el-radio :label="0">追加数据</el-radio>
       </el-radio-group>
     </el-form-item>
     <div class="btn">
       <el-button type="info" style="width: 150px;" @click="cancel">取消</el-button>
-      <el-button type="primary" style="width: 150px;" @click="confirm">确认</el-button>
+      <el-button type="primary" :loading="uploadLoading" style="width: 150px;" @click="confirm">确认</el-button>
     </div>
   </div>
 </template>

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

@@ -30,29 +30,12 @@ const { form, rules } = toRefs(data);
 const readOnly = ref(true);
 const formRef = ref<FormInstance>();
 
-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) {
-      form.value = JSON.parse(JSON.stringify(props.itemData))
-    }
-  },
-  { deep: true, immediate: true }
-);
-
 // 取消
 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 = {}
@@ -107,6 +90,24 @@ const addDataAreaFun = () => {
   })
 }
 
+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 }
+);
 
 </script>
 

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')
+      emit('confirm', props.type)
+    }
+  })
 }
 
+// 分类称验证
+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 };
+      if (props.type === 'edit') {
+        typeNameList.value = typeNameList.value.filter(item => item !== data.encryption_name)
+      }
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+watch(
+  () => props.typeNameDict,
+  (newVal) => {
+    typeNameList.value = props.typeNameDict
+    const data = JSON.parse(JSON.stringify(props.itemData));
+    if (props.type === 'edit' && data) {
+      typeNameList.value = typeNameList.value.filter(item => item !== data.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 +152,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}}
+  }
+  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();
   }
-  emit("confirm");
 };
+
+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 };
+      if (props.type === 'edit' && data) {
+        keyNameList.value = keyNameList.value.filter(item => item !== data.secret_key_name)
+      }
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+watch(
+  () => props.keyNameDict,
+  (newVal) => {
+    keyNameList.value = props.keyNameDict
+    const data = JSON.parse(JSON.stringify(props.itemData));
+    if (props.type === 'edit' && data) {
+      keyNameList.value = keyNameList.value.filter(item => item !== data.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 +193,7 @@ const confirm = () => {
 
 <style lang="scss" scoped>
 .el-form-item {
-  margin-bottom: 8px;
+  margin-bottom: 15px;
 }
 .btn {
   padding: 20px;