數據服務-API數據安全-执行记录

src/views/dataService/APIDataSecurity/sensitiveRecognition/executionRecord.vue

+<template>
+  <div class="sensitiveRecognition_executionRecord">
+    <div class="title">
+      <div class="title_left">
+        <div>
+          <Icon icon="ant-design:branches-outlined" :size="32" :color="'#3787f3'" />
+        </div>
+        <div style="padding-left: 10px">
+          <div class="name">执行记录</div>
+          <div style="color: darkgray">敏感识别 / 高级工作区 / sql_api / 执行记录</div>
+        </div>
+      </div>
+    </div>
+    <div class="search">
+      <BasicForm @register="registerForm" />
+    </div>
+    <div class="executionRecord_container">
+      <div class="container_left">
+        <List :pagination="pagination">
+          <template v-for="item in executionList" :key="item.id">
+            <List.Item class="list">
+              <List.Item.Meta  style="display: flex !important; align-items: center !important">
+                <template #avatar>
+                  <Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" />
+                </template>
+                <template #title>
+                  <span>{{ item.executionDate }}</span>
+                </template>
+                <template #description>
+                  <div class="info">
+                    <div>{{ item.sensitiveState }}</div>
+                  </div>
+                </template>
+              </List.Item.Meta>
+            </List.Item>
+          </template>
+        </List>
+      </div>
+      <div class="container_right">
+        <div class="container_right_top"
+          ><img style="width: 100%" src="../../../../assets/images/executionRecord.png"
+        /></div>
+        <div class="container_right_bottom">
+          <div class="container_right_bottom_left">
+            <div class="container_right_bottom_title">请求详情</div>
+            <textarea class="container_right_bottom_textarea" v-model="requestDetails"></textarea>
+          </div>
+          <div class="container_right_bottom_right">
+            <div class="container_right_bottom_title">返回详情</div>
+            <textarea class="container_right_bottom_textarea" v-model="returnDetails"></textarea>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import Icon from '@/components/Icon/Icon.vue';
+  import BasicForm from '@/components/Form/src/BasicForm.vue';
+  import { List } from 'ant-design-vue';
+  import { useForm } from '@/components/Form';
+  import { executionFormSchema } from '@/views/dataService/APIDataSecurity/sensitiveRecognition/sensitiveRecognition.data';
+  import { cardList } from '@/views/dataService/APIDataSecurity/sensitiveRecognition/mock';
+
+  const executionDateParam = ref();
+  const sensitiveTypeParam = ref();
+  const executionList = ref(cardList);
+  const requestDetails = ref('{\n' + '    "ss_sold_date_sk": "1"\n' + '}');
+  const returnDetails = ref(
+    '{\n' +
+      '    "code": 200,\n' +
+      '    "data": {\n' +
+      '        "columnNames": [\n' +
+      '            "avg_ss_list_price",\n' +
+      '            "avg_ss_ext_tax",\n' +
+      '            "avg_ss_ext_discount_amt"\n' +
+      '        ]\n' +
+      '    }\n' +
+      '}',
+  );
+
+  // const pagination = {
+  //   show: false,
+  //   pageSize: 3,
+  // };
+
+  const [registerForm, { setFieldsValue, updateSchema, resetFields }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 24, md: 24 },
+    schemas: executionFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+</script>
+
+<style scoped lang="scss">
+  .sensitiveRecognition_executionRecord {
+    background-color: white;
+    height: 100%;
+    padding: 20px;
+
+    .title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .title_left {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .name {
+          font-weight: 600;
+          font-size: 17px;
+          padding-bottom: 5px;
+        }
+      }
+    }
+
+    .search {
+      margin-top: 20px;
+    }
+
+    .executionRecord_container {
+      display: flex;
+      height: 100%;
+
+      .container_left {
+        width: 20%;
+        flex-shrink: 0;
+        .icon {
+          font-size: 30px !important;
+        }
+      }
+
+      .container_right {
+        width: 80%;
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+
+        .container_right_top {
+          height: 60%;
+          flex-shrink: 0;
+        }
+
+        .container_right_bottom {
+          //height: 40%;
+          display: flex;
+          .container_right_bottom_left,
+          .container_right_bottom_right {
+            background-color: gainsboro;
+            width: 50%;
+            flex-shrink: 0;
+            display: flex;
+            flex-direction: column;
+
+            .container_right_bottom_title {
+              margin-bottom: 2px;
+              padding: 5px;
+              font-weight: bold;
+            }
+            .container_right_bottom_textarea {
+              flex-grow: 1;
+              resize: none;
+              border: 1px solid #ccc;
+              padding: 5px;
+              height: 145px;
+              box-sizing: border-box;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/dataService/APIDataSecurity/sensitiveRecognition/mock.ts

@@ -373,3 +373,17 @@ export const ruleTtableList: any[] = [
     updateDate: '2024-10-24 10:04:04',
   },
 ];
+
+export const cardList = (() => {
+  const result: any[] = [];
+  for (let i = 0; i < 6; i++) {
+    result.push({
+      id: i,
+      sensitiveState: Math.random() <= 0.4 ? '敏感' : '非敏感',
+      executionDate: '2020-11-26 17:39',
+      icon: 'ant-design:clock-circle-outlined',
+      color: '#1890ff',
+    });
+  }
+  return result;
+})();

src/views/dataService/APIDataSecurity/sensitiveRecognition/sensitiveRecognition.data.ts

@@ -255,3 +255,35 @@ export const rulerFormSchema2: any[] = [
     },
   },
 ];
+
+/** 新增编辑表单字段*/
+export const executionFormSchema: any[] = [
+  {
+    field: 'executionDate',
+    label: '执行时间',
+    colProps: { lg: 5, md: 5 },
+    component: 'DatePicker',
+  },
+  {
+    field: 'sensitiveState',
+    label: '敏感状态',
+    component: 'Select',
+    colProps: { lg: 6, md: 6 },
+    componentProps: {
+      placeholder: '敏感状态',
+      options: [
+        { label: '全部', value: '' },
+        { label: '敏感', value: '敏感' },
+        { label: '非敏感', value: '非敏感' },
+      ],
+    },
+  },
+];
+
+export const executionColumns: BasicColumn[] = [
+  {
+    title: '执行记录',
+    dataIndex: 'name',
+    width: 120,
+  },
+];