Merge branch 'feature/code'

package.json

@@ -20,6 +20,11 @@
     "lint:lint-staged": "lint-staged"
   },
   "dependencies": {
+    "@codemirror/lang-cpp": "^6.0.2",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-python": "^6.1.6",
+    "@codemirror/theme-one-dark": "^6.1.2",
     "@element-plus/icons-vue": "^2.3.1",
     "@logicflow/core": "^1.2.26",
     "@logicflow/extension": "^1.2.26",
@@ -33,6 +38,7 @@
     "async": "^3.2.4",
     "axios": "^1.4.0",
     "canvas": "^2.11.2",
+    "codemirror": "^6.0.1",
     "colord": "^2.9.3",
     "dayjs": "^1.11.7",
     "echarts": "^5.4.2",
@@ -40,6 +46,7 @@
     "everright-filter": "^1.1.1",
     "js-md5": "^0.7.3",
     "json-editor-vue3": "^1.0.8",
+    "json-lint": "^0.1.0",
     "jss": "^10.9.2",
     "jss-preset-default": "^10.9.2",
     "lodash-es": "^4.17.21",
@@ -58,6 +65,7 @@
     "vite-svg-loader": "^4.0.0",
     "vue": "^3.4.26",
     "vue-clipboard3": "^2.0.0",
+    "vue-codemirror": "^6.1.1",
     "vue-i18n": "^9.2.2",
     "vue-ls": "^4.2.0",
     "vue-router": "^4.2.1",
@@ -72,6 +80,7 @@
     "@ckeditor/ckeditor5-build-decoupled-document": "^35.4.0",
     "@ckeditor/ckeditor5-build-inline": "^35.4.0",
     "@ckeditor/ckeditor5-vue": "^4.0.1",
+    "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@types/js-md5": "^0.7.0",
     "@types/nprogress": "^0.2.0",
     "@types/path-browserify": "^1.0.0",
@@ -85,7 +94,6 @@
     "@vue/test-utils": "^2.3.2",
     "autoprefixer": "^10.4.16",
     "better-sqlite3": "^8.2.0",
-    "codemirror": "^5.60.0",
     "connect-multiparty": "^2.2.0",
     "conventional-changelog-cli": "^4.1.0",
     "eslint": "^8.40.0",
@@ -110,9 +118,8 @@
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vue-tsc": "^1.6.5",
-		"@originjs/vite-plugin-commonjs": "^1.0.3"
-	},
+    "vue-tsc": "^1.6.5"
+  },
   "engines": {
     "node": ">=16.0.0"
   }

src/components/CodeMirrorEditor/index.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { watch, ref, toRefs, computed } from 'vue'
+import { Codemirror } from 'vue-codemirror'
+import { javascript } from '@codemirror/lang-javascript'
+import { python } from '@codemirror/lang-python'
+import { json } from '@codemirror/lang-json'
+// import { oneDark } from '@codemirror/theme-one-dark'
+const code = ref('')
+const props = defineProps({
+	modelValue: {
+		type: String,
+		required: false,
+		default: ''
+	},
+	language: {
+		type: String,
+		default: 'javascript'
+	},
+	disabled: {
+		type: [String, Boolean],
+		default: false
+	},
+	style: {
+		type: [Object],
+		default: () => ({
+			height: '400px'
+		})
+	}
+})
+const emit = defineEmits(['update:modelValue'])
+const { modelValue, language, disabled, style } = toRefs(props)
+const fullScreen = ref(false)
+const lang = json()
+// const extensions = [lang(), oneDark]
+const extensions = [lang]
+watch(
+	() => modelValue.value,
+	val => {
+		code.value = val
+	},
+	{
+		immediate: true,
+		deep: true
+	}
+)
+watch(
+	() => code.value,
+	val => {
+		emit('update:modelValue', val)
+	}
+)
+const comStyle = computed(() => ({ ...style.value, ...{ height: fullScreen.value ? '100%' : '400px' } }))
+</script>
+<template>
+	<Codemirror
+		v-model="code"
+		:mode="'application/json'"
+		:disabled="disabled"
+		placeholder="暂无数据..."
+		:style="comStyle"
+		:autofocus="true"
+		:indent-with-tab="true"
+		:tab-size="2"
+		:full-screen="true"
+		:extensions="extensions"
+		@ready="() => {}"
+		@change="() => {}"
+		@focus="() => {}"
+		@blur="() => {}"
+	></Codemirror>
+</template>

src/components/CodeMirrorEditor/json.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { watch, ref, toRefs, computed, onMounted } from 'vue'
+import * as jsonlint from 'json-lint'
+window['jsonlint'] = jsonlint
+import CodeMirror from 'codemirror'
+import 'codemirror/addon/lint/lint.css'
+import 'codemirror/addon/fold/foldgutter.css'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/rubyblue.css'
+import 'codemirror/mode/javascript/javascript'
+import 'codemirror/addon/lint/lint'
+import 'codemirror/addon/lint/json-lint'
+
+// 折叠
+import 'codemirror/addon/fold/foldgutter.css'
+import 'codemirror/addon/fold/foldcode'
+import 'codemirror/addon/fold/foldgutter'
+import 'codemirror/addon/fold/brace-fold'
+import 'codemirror/addon/fold/comment-fold'
+
+const code = ref('')
+const jsonEditor = ref()
+const myCodeRef = ref()
+const props = defineProps({
+	modelValue: {
+		type: String,
+		required: false,
+		default: ''
+	}
+})
+
+const emit = defineEmits(['update:modelValue'])
+const { modelValue } = toRefs(props)
+
+watch(
+	() => modelValue.value,
+	val => {
+		code.value = val
+		const editorValue = jsonEditor.value.getValue()
+		if (val !== editorValue) {
+			jsonEditor.value.setValue(JSON.stringify(this.value, null, 2))
+		}
+	},
+	{
+		immediate: true,
+		deep: true
+	}
+)
+
+watch(
+	() => code.value,
+	val => {
+		emit('update:modelValue', val)
+	}
+)
+
+onMounted(() => {
+	jsonEditor.value = CodeMirror.fromTextArea(myCodeRef.value, {
+		lineNumbers: true, // 是否显示行数
+		mode: 'application/json', // 接受的类型，json xml....
+		gutters: ['CodeMirror-lint-markers'], // 样式的宽度
+		theme: 'rubyblue', // 主题
+		lint: true
+	})
+	jsonEditor.value.setValue(JSON.stringify(this.value, null, 2))
+	jsonEditor.value.on('change', fm => {
+		const test1 = fm.getValue()
+		console.log(test1)
+	})
+})
+</script>
+
+<template>
+	<div class="json-editor">
+		<textarea ref="myCode" class="textarea"></textarea>
+	</div>
+</template>
+
+<style lang="scss">
+.CodeMirror {
+	height: 100vh;
+	overflow: hidden;
+}
+</style>

src/components/scWorkflow/select.vue

@@ -12,7 +12,7 @@
 			<div class="sc-user-select">
 				<div class="sc-user-select__left">
 					<div class="sc-user-select__search">
-						<el-input v-model="keyword" prefix-icon="Search" placeholder="搜索成员">
+						<el-input v-model="username" prefix-icon="Search" placeholder="搜索成员">
 							<template #append>
 								<el-button icon="Search" @click="search"></el-button>
 							</template>
@@ -259,6 +259,7 @@ export default {
 			showGrouploading: false,
 			showUserloading: false,
 			keyword: '',
+      username: '',
 			groupId: '',
 			pageSize: config.user.pageSize,
 			total: 0,
@@ -323,7 +324,7 @@ export default {
 			this.showUserloading = true
 			var params = {
 				data: {
-					keyword: this.keyword || null,
+					username: this.username || null,
 					departmentId: this.groupId || null
 				},
 				page: this.currentPage,

src/views/flow/create/components/FlowDesign.vue

@@ -1,10 +1,12 @@
 <script setup name="FlowDesign">
 import { onMounted, ref, watch } from 'vue'
-import JsonEditorVue from 'json-editor-vue3'
+import CodeMirrorEditor from '@/components/CodeMirrorEditor/index.vue'
+
 import ScWorkflow from '@/components/scWorkflow'
 import useFlowStore from '@/store/modules/flow'
 import useClipboard from 'vue-clipboard3'
 import { storeToRefs } from 'pinia'
+import { ElMessage } from 'element-plus'
 
 const flowStore = useFlowStore()
 const { modelContent } = storeToRefs(flowStore)
@@ -34,24 +36,22 @@ const updateCompInfo = () => {
 	}
 }
 
-const copyParseJson = async () => {
-	await toClipboard(JSON.stringify(jsonFormat.value, null, '  '))
-}
+// const copyParseJson = async () => {
+// 	await toClipboard(JSON.stringify(jsonFormat.value, null, '  '))
+// }
 
 const copyJson = async () => {
-	await toClipboard(JSON.stringify(jsonFormat.value))
-}
-
-watch(
-	() => form.value.processConfig,
-	value => {
-		jsonFormat.value = form.value.processConfig
-	},
-	{
-		// 初始化立即执行
-		immediate: true
+	if (!jsonFormat.value) {
+		return ElMessage.warning('当前没有数据噢')
 	}
-)
+	const json = JSON.parse(jsonFormat.value || {})
+	try {
+		await toClipboard(JSON.stringify(json))
+		ElMessage.success('复制成功')
+	} catch (e) {
+		ElMessage.warning('复制失败')
+	}
+}
 
 const validate = () => {
 	// 保存表单设计
@@ -62,6 +62,11 @@ const validate = () => {
 	})
 }
 
+const openDrawerEv = () => {
+	jsonFormat.value = JSON.stringify(form.value.processConfig, null, '  ')
+	drawer.value = !drawer.value
+}
+
 onMounted(() => {
 	updateCompInfo()
 })
@@ -77,20 +82,18 @@ defineExpose({
 <template>
 	<div>
 		<div style="z-index: 999" class="fixed top-44 right-48">
-			<el-button type="primary" @click="() => (drawer = true)"> 查看 JSON </el-button>
+			<el-button type="primary" @click="openDrawerEv"> 查看 JSON </el-button>
 		</div>
 
 		<ScWorkflow v-model="form.processConfig"></ScWorkflow>
 
-		<el-drawer v-model="drawer" size="500px" class="drawer" :append-to-body="true" :modal="false" :with-header="false">
-			<div style="height: 100vh">
-				<div style="padding: 1px; background-color: #3883fa">
-					<el-button type="primary" plain @click="copyParseJson"> 复制 JSON </el-button>
-					<el-button type="primary" plain @click="drawer = false"> 关闭弹窗 </el-button>
-				</div>
-				<json-editor-vue v-model="form.processConfig" class="editor" language="zh-CN" current-mode="view" />
-			</div>
-		</el-drawer>
+		<el-dialog v-if="drawer" v-model="drawer" class="le-dialog" size="600px" :append-to-body="true" title="查看JSON" destroy-on-close>
+			<code-mirror-editor v-model="jsonFormat"></code-mirror-editor>
+			<template #footer>
+				<el-button type="primary" @click="copyJson">复制 JSON</el-button>
+				<el-button @click="() => (drawer = false)">关 闭</el-button>
+			</template>
+		</el-dialog>
 	</div>
 </template>