From e4b17f842d7dbbeac28cd1cf058ffb192421997d Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 22 Aug 2024 18:16:15 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=87=BD=E6=95=B0?=
 =?UTF-8?q?=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/styles/app.scss                        | 17 +++++
 .../views/dataset/UploadDocumentDataset.vue   |  2 -
 .../component/FieldFormDialog.vue             |  5 +-
 .../component/FunctionFormDrawer.vue          | 67 ++++++++++++++++---
 ui/src/workflow/nodes/function-node/index.vue | 21 +-----
 5 files changed, 79 insertions(+), 33 deletions(-)

diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index f751a73b3..03ebdd8d0 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -711,3 +711,20 @@ h5 {
   background: var(--el-color-primary-light-9) !important;
 }
 
+// Codemirror 编辑器
+.function-CodemirrorEditor {
+  border: 1px solid #bbbfc4;
+  border-radius: 4px;
+  position: relative;
+  padding-bottom: 20px;
+  &__footer {
+    .magnify {
+      position: absolute;
+      bottom: 5px;
+      right: 5px;
+    }
+  }
+  .cm-gutters {
+    display: none !important;
+  }
+}
diff --git a/ui/src/views/dataset/UploadDocumentDataset.vue b/ui/src/views/dataset/UploadDocumentDataset.vue
index bbc5fa3ec..370451a54 100644
--- a/ui/src/views/dataset/UploadDocumentDataset.vue
+++ b/ui/src/views/dataset/UploadDocumentDataset.vue
@@ -39,9 +39,7 @@ import { useRouter, useRoute } from 'vue-router'
 import SetRules from './component/SetRules.vue'
 import ResultSuccess from './component/ResultSuccess.vue'
 import UploadComponent from './component/UploadComponent.vue'
-import datasetApi from '@/api/dataset'
 import documentApi from '@/api/document'
-import type { datasetData } from '@/api/type/dataset'
 import { MsgConfirm, MsgSuccess } from '@/utils/message'
 
 import useStore from '@/stores'
diff --git a/ui/src/views/function-lib/component/FieldFormDialog.vue b/ui/src/views/function-lib/component/FieldFormDialog.vue
index 7267ef1e7..44c0bdf0a 100644
--- a/ui/src/views/function-lib/component/FieldFormDialog.vue
+++ b/ui/src/views/function-lib/component/FieldFormDialog.vue
@@ -65,7 +65,7 @@ const form = ref<any>({
   name: '',
   type: typeOptions[0],
   source: 'reference',
-  is_required: false
+  is_required: true
 })
 
 const rules = reactive({
@@ -80,7 +80,7 @@ watch(dialogVisible, (bool) => {
       name: '',
       type: typeOptions[0],
       source: 'reference',
-      is_required: false
+      is_required: true
     }
     isEdit.value = false
   }
@@ -95,6 +95,7 @@ const open = (row: any) => {
   dialogVisible.value = true
 }
 
+
 const submit = async (formEl: FormInstance | undefined) => {
   if (!formEl) return
   await formEl.validate((valid) => {
diff --git a/ui/src/views/function-lib/component/FunctionFormDrawer.vue b/ui/src/views/function-lib/component/FunctionFormDrawer.vue
index 3ce0561d7..dd79eb96e 100644
--- a/ui/src/views/function-lib/component/FunctionFormDrawer.vue
+++ b/ui/src/views/function-lib/component/FunctionFormDrawer.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-drawer v-model="visible" size="60%">
+  <el-drawer v-model="visible" size="60%" :before-close="close">
     <template #header>
       <h4>{{ title }}</h4>
     </template>
@@ -85,8 +85,13 @@
         Python 代码 <el-text type="info" class="color-secondary"> 使用函数时不显示 </el-text>
       </h4>
 
-      <div class="function-CodemirrorEditor" v-if="showEditor">
+      <div class="function-CodemirrorEditor mb-8" v-if="showEditor">
         <CodemirrorEditor v-model="form.code" />
+        <div class="function-CodemirrorEditor__footer">
+          <el-button text type="info" @click="openCodemirrorDialog" class="magnify">
+            <AppIcon iconName="app-magnify" style="font-size: 16px"></AppIcon>
+          </el-button>
+        </div>
       </div>
       <h4 class="title-decoration-1 mb-16 mt-16">
         输出变量 <el-text type="info" class="color-secondary"> 使用函数时显示 </el-text>
@@ -105,6 +110,19 @@
         >
       </div>
     </template>
+
+    <!-- Codemirror 弹出层 -->
+    <el-dialog v-model="dialogVisible" title="Python 代码" append-to-body>
+      <CodemirrorEditor
+        v-model="cloneContent"
+        style="height: 300px !important; border: 1px solid #bbbfc4; border-radius: 4px"
+      />
+      <template #footer>
+        <div class="dialog-footer mt-24">
+          <el-button type="primary" @click="submitDialog"> 确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
     <FunctionDebugDrawer ref="FunctionDebugDrawerRef" />
     <FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList" />
   </el-drawer>
@@ -117,7 +135,7 @@ import FunctionDebugDrawer from './FunctionDebugDrawer.vue'
 import type { functionLibData } from '@/api/type/function-lib'
 import functionLibApi from '@/api/function-lib'
 import type { FormInstance } from 'element-plus'
-import { MsgSuccess, MsgError } from '@/utils/message'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import { cloneDeep } from 'lodash'
 
 const props = defineProps({
@@ -143,6 +161,9 @@ const form = ref<functionLibData>({
   input_field_list: []
 })
 
+const dialogVisible = ref(false)
+const cloneContent = ref<any>('')
+
 watch(visible, (bool) => {
   if (!bool) {
     isEdit.value = false
@@ -161,6 +182,39 @@ const rules = reactive({
   name: [{ required: true, message: '请输入函数名称', trigger: 'blur' }]
 })
 
+function openCodemirrorDialog() {
+  cloneContent.value = form.value.code
+  dialogVisible.value = true
+}
+
+function submitDialog() {
+  form.value.code = cloneContent.value
+  dialogVisible.value = false
+}
+
+function close() {
+  if (!areAllValuesNonEmpty(form.value)) {
+    visible.value = false
+  } else {
+    MsgConfirm(`提示`, `当前的更改尚未保存，确认退出吗?`, {
+      confirmButtonText: '确认',
+      type: 'warning'
+    })
+      .then(() => {
+        visible.value = false
+      })
+      .catch(() => {})
+  }
+}
+
+function areAllValuesNonEmpty(obj: any) {
+  return Object.values(obj).some((value) => {
+    return Array.isArray(value)
+      ? value.length !== 0
+      : value !== null && value !== undefined && value !== ''
+  })
+}
+
 function openDebug() {
   FunctionDebugDrawerRef.value.open(form.value)
 }
@@ -222,9 +276,4 @@ defineExpose({
   open
 })
 </script>
-<style lang="scss" scoped>
-.function-CodemirrorEditor {
-  border: 1px solid #bbbfc4;
-  border-radius: 4px;
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/workflow/nodes/function-node/index.vue b/ui/src/workflow/nodes/function-node/index.vue
index 0af679888..d011b0ee1 100644
--- a/ui/src/workflow/nodes/function-node/index.vue
+++ b/ui/src/workflow/nodes/function-node/index.vue
@@ -174,10 +174,6 @@ const validate = () => {
   })
 }
 
-// function changeCode(value: string) {
-//   set(props.nodeModel.properties.node_data, 'code', value)
-// }
-
 const dialogVisible = ref(false)
 const cloneContent = ref('')
 
@@ -233,20 +229,5 @@ onMounted(() => {
 })
 </script>
 <style lang="scss">
-.workflow-CodemirrorEditor {
-  border: 1px solid #bbbfc4;
-  border-radius: 4px;
-  position: relative;
-  padding-bottom: 20px;
-  &__footer {
-    .magnify {
-      position: absolute;
-      bottom: 5px;
-      right: 5px;
-    }
-  }
-  .cm-gutters {
-    display: none !important;
-  }
-}
+
 </style>