|
|
@@ -1,9 +1,59 @@
|
|
|
<template>
|
|
|
- <MForm ref="form" :items="formItems" v-model="formValues"></MForm>
|
|
|
+ <div>
|
|
|
+ <MForm ref="form" :items="formItems" v-model="formValues">
|
|
|
+ <template #tips>
|
|
|
+ <v-alert color="primary accent-4" elevation="1" colored-border border="left">
|
|
|
+ <span style="color: #777; font-size: 14px;">
|
|
|
+ 在需求描述框内点击鼠标右键，选择“插入业务域”，即可插入业务域。(提示：鼠标右键仅在需求描述框内有效，插入位置为光标所在位置)
|
|
|
+ </span>
|
|
|
+ </v-alert>
|
|
|
+ </template>
|
|
|
+ </MForm>
|
|
|
+ <v-menu
|
|
|
+ v-model="contextMenuVisible"
|
|
|
+ attach
|
|
|
+ :position-x="contextMenuX"
|
|
|
+ :position-y="contextMenuY"
|
|
|
+ absolute
|
|
|
+ offset-y
|
|
|
+ nudge-top="8"
|
|
|
+ >
|
|
|
+ <v-list dense>
|
|
|
+ <v-list-item @click="handleInsertBusinessDomainClick">
|
|
|
+ <v-list-item-title>插入业务域</v-list-item-title>
|
|
|
+ </v-list-item>
|
|
|
+ </v-list>
|
|
|
+ </v-menu>
|
|
|
+ <v-dialog v-model="insertDialogVisible" max-width="400" persistent>
|
|
|
+ <v-card>
|
|
|
+ <v-card-title>选择要插入的业务域</v-card-title>
|
|
|
+ <v-card-text>
|
|
|
+ <v-autocomplete
|
|
|
+ v-model="insertDialogSelected"
|
|
|
+ :items="businessDomain"
|
|
|
+ item-text="name_zh"
|
|
|
+ item-value="name_zh"
|
|
|
+ label="请选择业务域"
|
|
|
+ outlined
|
|
|
+ dense
|
|
|
+ hide-details
|
|
|
+ clearable
|
|
|
+ @change="handleInsertDialogSelect"
|
|
|
+ />
|
|
|
+ </v-card-text>
|
|
|
+ <v-card-actions>
|
|
|
+ <v-spacer />
|
|
|
+ <v-btn text @click="insertDialogVisible = false">取消</v-btn>
|
|
|
+ <v-btn color="primary" text @click="handleInsertDialogConfirm">插入</v-btn>
|
|
|
+ </v-card-actions>
|
|
|
+ </v-card>
|
|
|
+ </v-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import MForm from '@/components/MForm'
|
|
|
+import { api } from '@/api/dataGovernance'
|
|
|
import { getDatasourceList } from '@/api/dataOrigin'
|
|
|
|
|
|
export default {
|
|
|
@@ -28,7 +78,15 @@ export default {
|
|
|
extracted_fields: [],
|
|
|
extraction_purpose: ''
|
|
|
},
|
|
|
- dataSourceItems: []
|
|
|
+ dataSourceItems: [],
|
|
|
+ businessDomain: [],
|
|
|
+ descriptionCursor: { start: 0, end: 0 },
|
|
|
+ descriptionCursorTouched: false,
|
|
|
+ contextMenuVisible: false,
|
|
|
+ contextMenuX: 0,
|
|
|
+ contextMenuY: 0,
|
|
|
+ insertDialogVisible: false,
|
|
|
+ insertDialogSelected: null
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -58,6 +116,13 @@ export default {
|
|
|
itemValue: 'id',
|
|
|
items: this.dataSourceItems
|
|
|
},
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ key: 'created_by',
|
|
|
+ label: '创建人',
|
|
|
+ outlined: true,
|
|
|
+ dense: true
|
|
|
+ },
|
|
|
{
|
|
|
type: 'textarea',
|
|
|
key: 'description',
|
|
|
@@ -71,21 +136,20 @@ export default {
|
|
|
counter: true,
|
|
|
outlined: true,
|
|
|
rows: 8,
|
|
|
- hideDetails: 'auto'
|
|
|
+ hideDetails: 'auto',
|
|
|
+ cursorRef: this.descriptionCursor,
|
|
|
+ onCursorSync: () => { this.descriptionCursorTouched = true },
|
|
|
+ onContextMenu: this.handleDescriptionContextMenu
|
|
|
},
|
|
|
{
|
|
|
- type: 'text',
|
|
|
- key: 'created_by',
|
|
|
- label: '创建人',
|
|
|
- outlined: true,
|
|
|
- dense: true,
|
|
|
- hideDetails: 'auto'
|
|
|
+ slotName: 'tips'
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
created () {
|
|
|
this.init()
|
|
|
+ this.getBusinessDomainList()
|
|
|
if (this.itemData && this.itemData.id) {
|
|
|
this.formValues = {
|
|
|
title: this.itemData.title || '',
|
|
|
@@ -106,6 +170,55 @@ export default {
|
|
|
this.$snackbar.error(error)
|
|
|
}
|
|
|
},
|
|
|
+ // 获取业务域列表
|
|
|
+ async getBusinessDomainList () {
|
|
|
+ try {
|
|
|
+ const { data } = await api.getBusinessDomainList2()
|
|
|
+ if (!data || !data?.length) {
|
|
|
+ this.businessDomain = []
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.businessDomain = data
|
|
|
+ } catch (error) {
|
|
|
+ this.$snackbar.error(error)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 插入业务域
|
|
|
+ handleDescriptionContextMenu (item, event) {
|
|
|
+ if (!event) return
|
|
|
+ const rect = this.$el.getBoundingClientRect()
|
|
|
+ this.contextMenuX = event.clientX - rect.left
|
|
|
+ this.contextMenuY = event.clientY - rect.top + 110
|
|
|
+ this.contextMenuVisible = true
|
|
|
+ },
|
|
|
+ handleInsertBusinessDomainClick () {
|
|
|
+ this.contextMenuVisible = false
|
|
|
+ this.insertDialogSelected = null
|
|
|
+ this.insertDialogVisible = true
|
|
|
+ },
|
|
|
+ handleInsertDialogSelect (val) {
|
|
|
+ if (val != null && val !== '') {
|
|
|
+ this.handleBusinessDomainInsert(val)
|
|
|
+ this.insertDialogVisible = false
|
|
|
+ this.insertDialogSelected = null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleInsertDialogConfirm () {
|
|
|
+ if (this.insertDialogSelected != null && this.insertDialogSelected !== '') {
|
|
|
+ this.handleBusinessDomainInsert(this.insertDialogSelected)
|
|
|
+ }
|
|
|
+ this.insertDialogVisible = false
|
|
|
+ this.insertDialogSelected = null
|
|
|
+ },
|
|
|
+ handleBusinessDomainInsert (val) {
|
|
|
+ const { start, end } = this.descriptionCursor
|
|
|
+ const desc = this.formValues.description || ''
|
|
|
+ const useAppend = !this.descriptionCursorTouched && desc.length > 0
|
|
|
+ const insertStart = useAppend ? desc.length : start
|
|
|
+ const insertEnd = useAppend ? desc.length : end
|
|
|
+ this.formValues.description = desc.slice(0, insertStart) + val + desc.slice(insertEnd)
|
|
|
+ this.descriptionCursor.start = this.descriptionCursor.end = insertStart + val.length
|
|
|
+ },
|
|
|
getValue () {
|
|
|
if (!this.$refs.form.validate()) {
|
|
|
return
|
Xiao_123