cloud-web-corejs 1.0.0

package/src/components/xform/form-designer/setting-panel/form-setting.vue

@@ -0,0 +1,592 @@
+<template>
+  <div>
+    <el-form :model="formConfig" size="mini" label-position="left" label-width="120px" class="setting-form"
+             @submit.native.prevent>
+      <el-collapse v-model="formActiveCollapseNames" class="setting-collapse">
+        <el-collapse-item name="1" :title="i18nt('designer.setting.basicSetting')">
+          <el-form-item :label="i18nt('实体表')">
+            <el-input type="text" v-model="formConfig.entity"></el-input>
+          </el-form-item>
+          <el-form-item :label="i18nt('数据保存脚本编码')">
+            <el-input type="text" v-model="formConfig.saveScriptCode" placeholder="默认saveUpdatge"></el-input>
+          </el-form-item>
+          <el-form-item :label="i18nt('启用流程')">
+            <el-switch v-model="formConfig.wfEnabled"></el-switch>
+          </el-form-item>
+          <el-form-item :label="i18nt('加载详情数据')">
+            <el-switch v-model="formConfig.isLoadEntity"></el-switch>
+          </el-form-item>
+          <el-form-item :label="i18nt('详情数据脚本编码')">
+            <el-input type="text" v-model="formConfig.formScriptCode" placeholder="默认getOne"></el-input>
+          </el-form-item>
+          <el-form-item :label="i18nt('详情数据脚本参数')">
+            <a href="javascript:void(0);" class="a-link link-oneLind" @click="editFormScriptParam">
+              <span>{{ formConfig.formScriptParam }}</span>
+              <i class="el-icon-edit"></i>
+            </a>
+          </el-form-item>
+          <el-form-item :label="i18nt('详情数据脚本回调')">
+            <a href="javascript:void(0);" class="a-link link-oneLind" @click="editFormScriptSuccess">
+              <span>{{ formConfig.formScriptSuccess }}</span>
+              <i class="el-icon-edit"></i>
+            </a>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.globalFunctions')">
+            <a href="javascript:void(0);" class="a-link link-oneLind" @click="editGlobalFunctions">
+              <span>{{ formConfig.functions }}</span>
+              <i class="el-icon-edit"></i>
+            </a>
+          </el-form-item>
+          <!--
+                    <el-form-item :label="i18nt('designer.setting.formSize')">
+                      <el-select v-model="formConfig.size"><el-option v-for="item in formSizes" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select>
+                    </el-form-item>
+                    <el-form-item :label="i18nt('designer.setting.labelPosition')">
+                      <el-radio-group v-model="formConfig.labelPosition" class="radio-group-custom">
+                        <el-radio-button label="left">{{ i18nt('designer.setting.leftPosition') }}</el-radio-button>
+                        <el-radio-button label="top">{{ i18nt('designer.setting.topPosition') }}</el-radio-button>
+                      </el-radio-group>
+                    </el-form-item>
+                    <el-form-item :label="i18nt('designer.setting.labelAlign')">
+                      <el-radio-group v-model="formConfig.labelAlign" class="radio-group-custom">
+                        <el-radio-button label="label-left-align">{{ i18nt('designer.setting.leftAlign') }}</el-radio-button>
+                        <el-radio-button label="label-center-align">{{ i18nt('designer.setting.centerAlign') }}</el-radio-button>
+                        <el-radio-button label="label-right-align">{{ i18nt('designer.setting.rightAlign') }}</el-radio-button>
+                      </el-radio-group>
+                    </el-form-item>
+                    <el-form-item :label="i18nt('designer.setting.labelWidth')">
+                      <el-input-number v-model="formConfig.labelWidth" :min="0" style="width: 100%"></el-input-number>
+                    </el-form-item>-->
+                    <el-form-item :label="i18nt('designer.setting.formCss')">
+                      <el-button type="info" icon="el-icon-edit" plain round @click="editFormCss">{{ i18nt('designer.setting.addCss') }}</el-button>
+                    </el-form-item>
+                    <!--
+                    <el-form-item :label="i18nt('designer.setting.customClass')">
+                      <el-select v-model="formConfig.customClass" multiple filterable allow-create default-first-option>
+                        <el-option v-for="(item, idx) in cssClassList" :key="idx" :label="item" :value="item"></el-option>
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item :label="i18nt('designer.setting.globalFunctions')">
+                      <el-button type="info" icon="el-icon-edit" plain round @click="editGlobalFunctions">{{ i18nt('designer.setting.addEventHandler') }}</el-button>
+                    </el-form-item>
+                    <el-form-item label-width="0">
+                      <el-divider class="custom-divider">{{ i18nt('designer.setting.formSFCSetting') }}</el-divider>
+                    </el-form-item>
+                    <el-form-item :label="i18nt('designer.setting.formModelName')"><el-input type="text" v-model="formConfig.modelName"></el-input></el-form-item>
+                    <el-form-item :label="i18nt('designer.setting.formRefName')"><el-input type="text" v-model="formConfig.refName"></el-input></el-form-item>
+                    <el-form-item :label="i18nt('designer.setting.formRulesName')"><el-input type="text" v-model="formConfig.rulesName"></el-input></el-form-item>
+                  -->
+        </el-collapse-item>
+        <el-collapse-item name="3" title="详情表单信息">
+          <el-form-item :label="i18nt('表单编码')">
+            <el-input
+              class="search-input"
+              max="200"
+              v-model="formConfig.editFormCode"
+              @clear="
+                formConfig.editFormName=null;
+                $forceUpdate();
+              "
+              v-el-readonly
+              clearable
+            >
+              <i slot="suffix" class="el-input__icon el-icon-search" @click="showFormTemplateDialog = true"></i>
+            </el-input>
+          </el-form-item>
+          <el-form-item :label="i18nt('表单名称')">
+            {{ formConfig.editFormName }}
+          </el-form-item>
+        </el-collapse-item>
+        <el-collapse-item name="4" title="查询弹框展示信息">
+          <el-form-item :label="i18nt('展示字段')">
+            <el-input
+              class="search-input"
+              max="200"
+              v-model="formConfig.searchDialogNameField"
+              clearable
+            >
+            </el-input>
+          </el-form-item>
+          <el-form-item :label="i18nt('数据唯一标识')">
+            <el-input
+              class="search-input"
+              max="200"
+              v-model="formConfig.searchDialogUniqueField"
+              clearable
+            >
+            </el-input>
+          </el-form-item>
+        </el-collapse-item>
+
+        <el-collapse-item v-if="showEventCollapse()" name="2" :title="i18nt('designer.setting.eventSetting')">
+          <!--          <el-form-item label="onBeforeCreated" label-width="150px">
+                      <a href="javascript:void(0);" class="a-link link-oneLind"
+                         @click="editFormEventHandler('onBeforeCreated', ['dataId','done'])">
+                        <span>{{ formConfig.onBeforeCreated }}</span>
+                        <i class="el-icon-edit"></i>
+                      </a>
+                    </el-form-item>-->
+          <el-form-item label="onFormCreated" label-width="150px">
+            <a href="javascript:void(0);" class="a-link link-oneLind" @click="editFormEventHandler('onFormCreated')">
+              <span>{{ formConfig.onFormCreated }}</span>
+              <i class="el-icon-edit"></i>
+            </a>
+          </el-form-item>
+          <el-form-item label="onFormMounted" label-width="150px">
+            <a href="javascript:void(0);" class="a-link link-oneLind" @click="editFormEventHandler('onFormMounted')">
+              <span>{{ formConfig.onFormMounted }}</span>
+              <i class="el-icon-edit"></i>
+            </a>
+          </el-form-item>
+          <!-- -->
+          <el-form-item label="onFormDataChange" label-width="150px">
+            <a href="javascript:void(0);" class="a-link link-oneLind" @click="editFormEventHandler('onFormDataChange')">
+              <span>{{ formConfig.onFormDataChange }}</span>
+              <i class="el-icon-edit"></i>
+            </a>
+          </el-form-item>
+          <!-- -->
+          <!--
+          <el-form-item label="onFormValidate">
+            <el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormValidate')">
+              {{i18nt('designer.setting.addEventHandler')}}</el-button>
+          </el-form-item>
+          -->
+        </el-collapse-item>
+      </el-collapse>
+    </el-form>
+
+    <el-dialog
+      :title="i18nt('designer.setting.editFormEventHandler')"
+      :visible.sync="showFormEventDialogFlag"
+      v-if="showFormEventDialogFlag"
+      :show-close="true"
+      custom-class="dialog-style list-dialog"
+      v-dialog-drag
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+      top="5vh"
+    >
+      <div class="cont">
+        <el-alert type="info" :closable="false" :title="'form.' + eventParamsMap[curEventName]"></el-alert>
+        <code-editor :mode="'javascript'" :readonly="false" v-model="formEventHandlerCode" ref="ecEditor"></code-editor>
+        <el-alert type="info" :closable="false" title="}"></el-alert>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="showFormEventDialogFlag = false" class="button-sty" icon="el-icon-close">
+          {{ i18nt('designer.hint.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="saveFormEventHandler" class="button-sty" icon="el-icon-check">
+          {{ i18nt('designer.hint.confirm') }}
+        </el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      :title="i18nt('designer.setting.formCss')"
+      :visible.sync="showEditFormCssDialogFlag"
+      v-if="showEditFormCssDialogFlag"
+      :show-close="true"
+      custom-class="dialog-style list-dialog"
+      v-dialog-drag
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+    >
+      <div class="cont">
+        <code-editor :mode="'css'" :readonly="false" v-model="formCssCode"></code-editor>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="showEditFormCssDialogFlag = false" class="button-sty" icon="el-icon-close">
+          {{ i18nt('designer.hint.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="saveFormCss" class="button-sty" icon="el-icon-check">
+          {{ i18nt('designer.hint.confirm') }}
+        </el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      :title="i18nt('designer.setting.globalFunctions')"
+      :visible.sync="showEditFunctionsDialogFlag"
+      v-if="showEditFunctionsDialogFlag"
+      :show-close="true"
+      custom-class="dialog-style list-dialog"
+      v-dialog-drag
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+    >
+      <div class="cont">
+        <code-editor :mode="'javascript'" :readonly="false" v-model="functionsCode" ref="gfEditor"></code-editor>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="showEditFunctionsDialogFlag = false" class="button-sty" icon="el-icon-close">
+          {{ i18nt('designer.hint.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="saveGlobalFunctions" class="button-sty" icon="el-icon-check">
+          {{ i18nt('designer.hint.confirm') }}
+        </el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      :title="i18nt('详情数据脚本参数')"
+      :visible.sync="showFormScriptParamDialog"
+      v-if="showFormScriptParamDialog"
+      :show-close="true"
+      custom-class="dialog-style list-dialog"
+      v-dialog-drag
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+    >
+      <div class="cont">
+        <code-editor :mode="'javascript'" :readonly="false" v-model="formScriptParam" ref="gfEditor"></code-editor>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="showFormScriptParamDialog = false" class="button-sty" icon="el-icon-close">
+          {{ i18nt('designer.hint.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="saveFormScriptParam" class="button-sty" icon="el-icon-check">
+          {{ i18nt('designer.hint.confirm') }}
+        </el-button>
+      </div>
+    </el-dialog>
+    <el-dialog
+      :title="i18nt('详情数据脚本回调')"
+      :visible.sync="showFormScriptSuccessDialog"
+      v-if="showFormScriptSuccessDialog"
+      :show-close="true"
+      custom-class="dialog-style list-dialog"
+      v-dialog-drag
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+    >
+      <div class="cont">
+        <code-editor :mode="'javascript'" :readonly="false" v-model="formScriptSuccess" ref="gfEditor"></code-editor>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="showFormScriptSuccessDialog = false" class="button-sty" icon="el-icon-close">
+          {{ i18nt('designer.hint.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="saveFormScriptSuccess" class="button-sty" icon="el-icon-check">
+          {{ i18nt('designer.hint.confirm') }}
+        </el-button>
+      </div>
+    </el-dialog>
+
+    <formTemplateDialog v-if="showFormTemplateDialog" :visiable.sync="showFormTemplateDialog"
+                        @confirm="confirmFormTemplate" multi="false"/>
+  </div>
+</template>
+
+<script>
+import i18n from '../../../../components/xform/utils/i18n';
+import {deepClone, insertCustomCssToHead, insertGlobalFunctionsToHtml} from '../../../../components/xform/utils/util';
+import formTemplateDialog from '../../../../views/bd/setting/form_template/dialog.vue'
+
+export default {
+  name: 'form-setting',
+  mixins: [i18n],
+  components: {
+    formTemplateDialog
+  },
+  props: {
+    designer: Object,
+    formConfig: Object
+  },
+  inject: ['getDesignerConfig'],
+  data() {
+    return {
+      designerConfig: this.getDesignerConfig(),
+
+      formActiveCollapseNames: ['1', '2'],
+
+      formSizes: [
+        {label: 'default', value: ''},
+        {label: 'large', value: 'large'},
+        {label: 'medium', value: 'medium'},
+        {label: 'small', value: 'small'},
+        {label: 'mini', value: 'mini'}
+      ],
+
+      showEditFormCssDialogFlag: false,
+      formCssCode: '',
+      cssClassList: [],
+
+      showEditFunctionsDialogFlag: false,
+      functionsCode: '',
+
+      showFormEventDialogFlag: false,
+      formEventHandlerCode: '',
+      curEventName: '',
+
+      eventParamsMap: {
+        onBeforeCreated: 'onBeforeCreated(dataId,formCode,done) {',
+        onFormCreated: 'onFormCreated(dataId,formCode) {',
+        onFormMounted: 'onFormMounted(dataId,formCode) {',
+        onFormDataChange: 'onFormDataChange(fieldName, newValue, oldValue, formModel, subFormName, subFormRowIndex) {'
+        //'onFormValidate':     'onFormValidate() {',
+      },
+      showVabsearchConfigDialog: false,
+      vabsearchConfigType: 1,
+      showFormTemplateDialog: false,
+
+      formScriptParam:null,
+      showFormScriptParamDialog: false,
+      formScriptSuccess:null,
+      showFormScriptSuccessDialog: false
+    };
+  },
+  created() {
+    //导入表单JSON后需要重新加载自定义CSS样式！！！
+    this.designer.handleEvent('form-json-imported', () => {
+      this.formCssCode = this.formConfig.cssCode;
+      insertCustomCssToHead(this.formCssCode);
+      this.extractCssClass();
+      this.designer.emitEvent('form-css-updated', deepClone(this.cssClassList));
+    });
+  },
+  mounted() {
+    /* SettingPanel和FormWidget为兄弟组件, 在FormWidget加载formConfig时，
+         此处SettingPanel可能无法获取到formConfig.cssCode, 故加个延时函数！ */
+    setTimeout(() => {
+      this.formCssCode = this.formConfig.cssCode;
+      insertCustomCssToHead(this.formCssCode);
+      this.extractCssClass();
+      this.designer.emitEvent('form-css-updated', deepClone(this.cssClassList));
+    }, 1200);
+  },
+  methods: {
+    showEventCollapse() {
+      if (this.designerConfig['eventCollapse'] === undefined) {
+        return true;
+      }
+
+      return !!this.designerConfig['eventCollapse'];
+    },
+
+    editFormCss() {
+      this.formCssCode = this.designer.formConfig.cssCode;
+      this.showEditFormCssDialogFlag = true;
+    },
+
+    extractCssClass() {
+      let regExp = /\..*{/g;
+      let result = this.formCssCode.match(regExp);
+      let cssNameArray = [];
+
+      if (!!result && result.length > 0) {
+        result.forEach(rItem => {
+          let classArray = rItem.split(','); //切分逗号分割的多个class
+          if (classArray.length > 0) {
+            classArray.forEach(cItem => {
+              let caItem = cItem.trim();
+              if (caItem.indexOf('.', 1) !== -1) {
+                //查找第二个.位置
+                let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf('.', 1)); //仅截取第一、二个.号之间的class
+                if (!!newClass) {
+                  cssNameArray.push(newClass.trim());
+                }
+              } else if (caItem.indexOf(' ') !== -1) {
+                //查找第一个空格位置
+                let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf(' ')); //仅截取第一、二个.号之间的class
+                if (!!newClass) {
+                  cssNameArray.push(newClass.trim());
+                }
+              } else {
+                if (caItem.indexOf('{') !== -1) {
+                  //查找第一个{位置
+                  let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf('{'));
+                  cssNameArray.push(newClass.trim());
+                } else {
+                  let newClass = caItem.substring(caItem.indexOf('.') + 1);
+                  cssNameArray.push(newClass.trim());
+                }
+              }
+            });
+          }
+        });
+      }
+
+      //this.cssClassList.length = 0
+      this.cssClassList.splice(0, this.cssClassList.length); //清除数组必须用splice，length=0不会响应式更新！！
+      this.cssClassList = Array.from(new Set(cssNameArray)); //数组去重
+    },
+
+    saveFormCss() {
+      this.extractCssClass();
+      this.designer.formConfig.cssCode = this.formCssCode;
+      insertCustomCssToHead(this.formCssCode);
+      this.showEditFormCssDialogFlag = false;
+
+      this.designer.emitEvent('form-css-updated', deepClone(this.cssClassList));
+    },
+
+    editGlobalFunctions() {
+      this.functionsCode = this.designer.formConfig.functions;
+      this.showEditFunctionsDialogFlag = true;
+    },
+    editFormScriptParam(){
+      this.formScriptParam = this.designer.formConfig.formScriptParam;
+      this.showFormScriptParamDialog = true;
+    },
+
+    saveGlobalFunctions() {
+      const codeHints = this.$refs.gfEditor.getEditorAnnotations();
+      let syntaxErrorFlag = false;
+      if (!!codeHints && codeHints.length > 0) {
+        codeHints.forEach(chItem => {
+          if (chItem.type === 'error') {
+            syntaxErrorFlag = true;
+          }
+        });
+
+        if (syntaxErrorFlag) {
+          this.$message.error(this.i18nt('designer.setting.syntaxCheckWarning'));
+          return;
+        }
+      }
+
+      this.designer.formConfig.functions = this.functionsCode;
+      insertGlobalFunctionsToHtml(this.functionsCode);
+      this.showEditFunctionsDialogFlag = false;
+    },
+
+    editFormEventHandler(eventName) {
+      this.curEventName = eventName;
+      this.formEventHandlerCode = this.formConfig[eventName];
+      this.showFormEventDialogFlag = true;
+    },
+
+    saveFormEventHandler() {
+      const codeHints = this.$refs.ecEditor.getEditorAnnotations();
+      let syntaxErrorFlag = false;
+      if (!!codeHints && codeHints.length > 0) {
+        codeHints.forEach(chItem => {
+          if (chItem.type === 'error') {
+            syntaxErrorFlag = true;
+          }
+        });
+
+        if (syntaxErrorFlag) {
+          this.$message.error(this.i18nt('designer.setting.syntaxCheckWarning'));
+          return;
+        }
+      }
+
+      this.formConfig[this.curEventName] = this.formEventHandlerCode;
+      this.showFormEventDialogFlag = false;
+    },
+    confirmFormTemplate(rows) {
+      if (rows.length) {
+        let row = rows[0];
+        this.$set(this.formConfig, "editFormCode", row.formCode);
+        this.$set(this.formConfig, "editFormName", row.formName);
+      }
+    },
+    getEventButtonName(funStr) {
+      let name = this.i18nt("designer.setting.addEventHandler");
+      if (funStr) name = "已维护"
+      return name;
+    },
+    saveFormScriptParam() {
+      const codeHints = this.$refs.gfEditor.getEditorAnnotations();
+      let syntaxErrorFlag = false;
+      if (!!codeHints && codeHints.length > 0) {
+        codeHints.forEach(chItem => {
+          if (chItem.type === 'error') {
+            syntaxErrorFlag = true;
+          }
+        });
+
+        if (syntaxErrorFlag) {
+          this.$message.error(this.i18nt('designer.setting.syntaxCheckWarning'));
+          return;
+        }
+      }
+
+      this.designer.formConfig.formScriptParam = this.formScriptParam;
+      this.showFormScriptParamDialog = false;
+    },
+    editFormScriptSuccess(){
+      this.formScriptSuccess = this.designer.formConfig.formScriptSuccess;
+      this.showFormScriptSuccessDialog = true;
+    },
+    saveFormScriptSuccess() {
+      const codeHints = this.$refs.gfEditor.getEditorAnnotations();
+      let syntaxErrorFlag = false;
+      if (!!codeHints && codeHints.length > 0) {
+        codeHints.forEach(chItem => {
+          if (chItem.type === 'error') {
+            syntaxErrorFlag = true;
+          }
+        });
+
+        if (syntaxErrorFlag) {
+          this.$message.error(this.i18nt('designer.setting.syntaxCheckWarning'));
+          return;
+        }
+      }
+
+      this.designer.formConfig.formScriptSuccess = this.formScriptSuccess;
+      this.showFormScriptSuccessDialog = false;
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.setting-form {
+  ::v-deep .el-form-item__label {
+    font-size: 13px;
+    //text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  ::v-deep .el-form-item--mini.el-form-item {
+    margin-bottom: 6px;
+  }
+
+  .radio-group-custom {
+    ::v-deep .el-radio-button__inner {
+      padding-left: 12px;
+      padding-right: 12px;
+    }
+  }
+
+  .custom-divider.el-divider--horizontal {
+    margin: 10px 0;
+  }
+}
+
+.setting-collapse {
+  ::v-deep .el-collapse-item__content {
+    padding-bottom: 6px;
+  }
+
+  ::v-deep .el-collapse-item__header {
+    font-weight: bold;
+  }
+}
+
+.small-padding-dialog {
+  ::v-deep .el-dialog__body {
+    padding: 6px 15px 12px 15px;
+  }
+}
+</style>