123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- <template>
- <div class="code-mirror-item">
- <el-alert :closable="false" @click="visible = true">
- 编辑{{ fnName }}函数
- </el-alert>
- <cip-code-mirror
- readonly="nocursor"
- type="javascript"
- theme="default"
- :model-value="getCompleteFun(itemConfig[fieldKey])"
- @click="visible = true"></cip-code-mirror>
- <cip-dialog v-model="visible" title="函数编辑" :show-only="true">
- <el-alert :closable="false">
- function {{ fnName }}{{ paramsStr }} {
- </el-alert>
- <cip-code-mirror
- type="javascript"
- theme="default"
- :model-value="itemConfig[fieldKey]"
- @update:model-value="updateModel"></cip-code-mirror>
- <el-alert :closable="false">}</el-alert>
- </cip-dialog>
- </div>
- </template>
- <script>
- import { defineComponent, ref, computed } from 'vue'
- import CipCodeMirror from '@cip/components/cip-code-mirror/index.vue'
- import CipDialog from '@cip/components/cip-dialog'
- import { ElAlert } from 'element-plus'
- export default defineComponent({
- components: { CipCodeMirror, CipDialog, ElAlert },
- props: {
- fnName: {},
- updateModel: {},
- itemConfig: {},
- fieldKey: {}
- },
- setup(props) {
- const visible = ref(false)
- const paramsStr = computed(() => {
- const paramsStrMap = {
- changeConfig: '(config, dependOnValues, outDependOnValues)',
- changeValue: '(dependOnValues, outDependOnValues)'
- }
- return paramsStrMap[props.fnName] ?? ''
- })
- const getCompleteFun = (funcBody) => {
- return `function ${props.fnName}${paramsStr.value} {
- ${funcBody ?? ''}
- }`
- }
- return {
- visible,
- getCompleteFun,
- paramsStr
- }
- }
- })
- </script>
- <style lang="less">
- .code-mirror-item {
- display: flex;
- flex-direction: column;
- flex: 1;
- overflow: auto;
- }
- .CodeMirror-hints {
- z-index: 99999;
- }
- </style>
|