cloud-web-corejs 1.0.54-dev.687 → 1.0.54-dev.689

package/src/components/xform/form-designer/form-widget/field-widget/script-input-widget.vue

@@ -0,0 +1,143 @@
+<template>
+  <form-item-wrapper
+    :designer="designer"
+    :field="field"
+    :rules="rules"
+    :design-state="designState"
+    :parent-widget="parentWidget"
+    :parent-list="parentList"
+    :index-of-parent-list="indexOfParentList"
+    :sub-form-row-index="subFormRowIndex"
+    :sub-form-col-index="subFormColIndex"
+    :sub-form-row-id="subFormRowId"
+  >
+    <div v-if="designState" class="script-input-design-placeholder">
+      {{ getI18nLabel(field.options.placeholder) || "脚本输入框" }}
+      <span class="script-input-mode">({{ editorMode }})</span>
+    </div>
+    <template v-else-if="isReadMode">
+      <pre class="readonly-mode-field script-input-readonly">{{ fieldModel }}</pre>
+    </template>
+    <code-editor
+      v-else
+      v-model="fieldModel"
+      :mode="editorMode"
+      :readonly="field.options.readonly || field.options.disabled"
+      :height="editorHeight"
+      :min-lines="editorMinLines"
+      :max-lines="editorMaxLines"
+      :user-worker="userWorker"
+      :resize="!field.options.disabled && !field.options.readonly"
+      @input="onEditorInput"
+    />
+  </form-item-wrapper>
+</template>
+
+<script>
+import FormItemWrapper from "./form-item-wrapper";
+import emitter from "../../../utils/emitter";
+import i18n from "../../../utils/i18n";
+import fieldMixin from "./fieldMixin";
+
+export default {
+  name: "script-input-widget",
+  componentName: "FieldWidget",
+  mixins: [emitter, fieldMixin, i18n],
+  props: {
+    field: Object,
+    parentWidget: Object,
+    parentList: Array,
+    indexOfParentList: Number,
+    designer: Object,
+    designState: {
+      type: Boolean,
+      default: false,
+    },
+    subFormRowIndex: {
+      type: Number,
+      default: -1,
+    },
+    subFormColIndex: {
+      type: Number,
+      default: -1,
+    },
+    subFormRowId: {
+      type: String,
+      default: "",
+    },
+  },
+  components: {
+    FormItemWrapper,
+  },
+  inject: ["refList", "globalOptionData", "globalModel"],
+  data() {
+    return {
+      oldFieldValue: null,
+      fieldModel: null,
+      rules: [],
+    };
+  },
+  computed: {
+    editorMode() {
+      return this.field.options.editorMode || "javascript";
+    },
+    editorHeight() {
+      return this.field.options.editorHeight || "200px";
+    },
+    editorMinLines() {
+      return this.field.options.editorMinLines || 8;
+    },
+    editorMaxLines() {
+      return this.field.options.editorMaxLines || 30;
+    },
+    userWorker() {
+      return this.field.options.userWorker === true;
+    },
+  },
+  created() {
+    this.initFieldModel();
+    this.registerToRefList();
+    this.initEventHandler();
+    this.buildFieldRules();
+    this.handleOnCreated();
+  },
+  mounted() {
+    this.handleOnMounted();
+  },
+  beforeDestroy() {
+    this.unregisterFromRefList();
+  },
+  methods: {
+    onEditorInput(val) {
+      this.handleInputCustomEvent(val);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/global.scss";
+
+.script-input-design-placeholder {
+  min-height: 120px;
+  padding: 12px;
+  border: 1px dashed #c0c4cc;
+  border-radius: 4px;
+  color: #909399;
+  font-size: 13px;
+  background: #fafafa;
+}
+
+.script-input-mode {
+  margin-left: 6px;
+  color: #336699;
+}
+
+.script-input-readonly {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-family: Consolas, Monaco, monospace;
+  font-size: 12px;
+}
+</style>