<template>
|
<j-modal
|
:fullscreen='true'
|
:okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
|
:switchFullscreen='false'
|
:title='title'
|
:visible='visible'
|
:width='900'
|
cancelText='关闭'
|
@cancel='handleCancel'
|
@ok='handleOk'
|
>
|
<a-row :gutter='0' type='flex'>
|
<a-col :md='4' :sm='0'>
|
<tree-left @insertTextAtCursor='insertTextAtCursor' />
|
</a-col>
|
<a-col :md='20' :sm='0'>
|
<a-row :gutter='0'>
|
<a-col :span='24'>
|
<div>
|
<a-row>
|
<a-col :span='24'>
|
<j-code-editor
|
ref='editorRef'
|
v-model='code'
|
:fullScreen='true'
|
:height='100'
|
background-color='#f0f0f0'
|
language='C#'
|
/>
|
</a-col>
|
</a-row>
|
<a-row>
|
<a-col :span='24' style='border: 1px solid #e8e8e8;'>
|
<span
|
style='background-color: rgb(247, 247, 247); text-align: center; line-height: 31px;'
|
>
|
|
<a-icon style='color: #1890FF;' theme='filled' type='read' />
|
编译信息
|
</span>
|
<p>{{ compileInformation }}</p>
|
</a-col>
|
</a-row>
|
</div>
|
</a-col>
|
</a-row>
|
</a-col>
|
</a-row>
|
<!-- 自定义标题栏 -->
|
<template #title>
|
<div class='custom-title'>
|
<span>脚本编辑器</span>
|
<div class='title-buttons'>
|
<a-button
|
:style="{ marginRight: '25px', height: '26px' }"
|
icon='redo'
|
type='primary'
|
@click='handleEmpty'
|
>
|
清空
|
</a-button>
|
<a-button
|
:style="{ marginRight: '25px', height: '26px' }"
|
icon='cloud-sync'
|
type='primary'
|
@click='handleCompile'
|
>
|
编译
|
</a-button>
|
<a-button
|
:style="{ marginRight: '25px', height: '26px' }"
|
icon='table'
|
type='primary'
|
@click='handleVariable'
|
>
|
变量
|
</a-button>
|
<a-button
|
:style="{ marginRight: '25px', height: '26px' }"
|
icon='gold'
|
type='primary'
|
@click='handleFunction'
|
>
|
函数
|
</a-button>
|
</div>
|
</div>
|
</template>
|
<!-- 实时数据 -->
|
<parameter-address ref='modalAddress' :server-id='serverId' @ok='selectAttribute' />
|
<script-function ref='modalScriptFunction' :server-id='serverId' @ok='scriptFunction' />
|
</j-modal>
|
</template>
|
|
<script>
|
import TreeLeft from './TreeLeft'
|
import JCodeEditor from '@/components/jeecg/JCodeEditor'
|
import { httpAction } from '@/api/manage'
|
import ParameterAddress from './variable/ParameterAddress'
|
import ScriptFunction from './variable/ScriptFunction'
|
|
export default {
|
components: {
|
JCodeEditor,
|
TreeLeft,
|
ParameterAddress,
|
ScriptFunction
|
},
|
name: 'ScriptModel',
|
data() {
|
return {
|
compileInformation: '',
|
serverId: '',
|
currentTheme: 'default',
|
editor: null,
|
code: '',
|
indexStyle: false,
|
systemDataType: '',
|
readWriteType: '只读',
|
title: '脚本编辑器',
|
visible: false,
|
model: {},
|
confirmLoading: false,
|
form: this.$form.createForm(this),
|
url: {
|
preserveScript: '/empty/parameter/preserveScript',
|
handleCompile: '/empty/parameter/handleCompile',
|
edit: '/empty/parameter/edit',
|
systemDataType: '/equipment/querySystemDataType'
|
},
|
disableSubmit: false
|
}
|
},
|
methods: {
|
setTheme(theme) {
|
this.currentTheme = theme
|
},
|
// 插入内容
|
insertTextAtCursor(value) {
|
this.$nextTick(() => {
|
const editorRef = this.$refs.editorRef
|
if (editorRef) {
|
const editor = editorRef.coder
|
if (editor) {
|
const cursor = editor.getCursor()
|
editor.replaceRange(value, cursor)
|
}
|
}
|
})
|
},
|
onSearch() {
|
// this.$refs.modalAddress.visible1 = true
|
},
|
add() {
|
this.edit({})
|
},
|
modalFormOk(record) {
|
// let model = Object.assign({}, record)
|
// this.$nextTick(() => {
|
// this.form.setFieldsValue({
|
// parameterDescribe: model.describe,
|
// address: model.default1
|
// })
|
// })
|
// this.systemDataType = model.dataType
|
},
|
selectAttribute(record) {
|
// 1.赋值
|
this.insertTextAtCursor(record.code)
|
},
|
scriptFunction(record) {
|
// 1.赋值
|
this.insertTextAtCursor(record)
|
},
|
edit(record) {
|
this.visible = true
|
|
// 查询系统类型
|
this.form.resetFields()
|
this.model = Object.assign({}, record)
|
if (!record.scriptContent) {
|
this.handleEmpty()
|
} else {
|
this.code = this.model.scriptContent
|
const editor = this.$refs.editorRef
|
if (editor) {
|
// 调用 setValue 方法将内容设置为空字符串
|
editor.coder.setValue(this.code)
|
}
|
}
|
},
|
close() {
|
this.$emit('close')
|
this.visible = false
|
},
|
handleOk() {
|
this.compileInformation = ''
|
const that = this
|
that.confirmLoading = true
|
let formData = Object.assign(this.model)
|
formData.script = this.code
|
httpAction(this.url.preserveScript, formData, 'post').then((res) => {
|
if (res.code !== 500) {
|
that.$message.success('保存成功')
|
this.$emit('ok', res.result)
|
that.close()
|
} else {
|
that.$message.warning('保存失败')
|
this.compileInformation = res.message
|
}
|
}).finally(() => {
|
that.confirmLoading = false
|
})
|
},
|
// 清空脚本
|
handleEmpty() {
|
this.compileInformation = ''
|
// 通过 ref 获取 JCodeEditor 实例
|
const editor = this.$refs.editorRef
|
if (editor) {
|
// 调用 setValue 方法将内容设置为空字符串
|
editor.coder.setValue('')
|
}
|
},
|
// 编译脚本
|
handleCompile() {
|
this.compileInformation = ''
|
const that = this
|
that.confirmLoading = true
|
let formData = Object.assign(this.model)
|
formData.script = this.code
|
httpAction(this.url.handleCompile, formData, 'post').then((res) => {
|
if (res.code !== 500) {
|
that.$message.success('编译成功')
|
} else {
|
that.$message.warning('编译失败')
|
this.compileInformation = res.message
|
}
|
}).finally(() => {
|
that.confirmLoading = false
|
})
|
},
|
// 变量
|
handleVariable() {
|
let formData = Object.assign(this.model)
|
this.serverId = formData.serveId
|
this.$refs.modalAddress.openMqtt()
|
},
|
// 函数
|
handleFunction() {
|
let formData = Object.assign(this.model)
|
this.serverId = formData.serveId
|
this.$refs.modalScriptFunction.openMqtt()
|
},
|
handleCancel() {
|
this.close()
|
}
|
},
|
}
|
</script>
|
|
<style>
|
/* 标题栏按钮样式 */
|
.custom-title {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
width: 100%;
|
}
|
|
.title-buttons {
|
margin-right: -80px; /* 与关闭按钮对齐 */
|
}
|
|
.full-screen-parent.auto-height .full-screen-child {
|
min-height: 500px;
|
height: unset;
|
overflow: hidden;
|
}
|
|
.j-code-editor {
|
background-color: #f0f0f0;
|
}
|
|
.light {
|
background-color: #f0f0f0;
|
color: #333;
|
}
|
</style>
|
