cip-components/cip-form-design/widgets/form-property/code-mirror-dialog.vue

<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>