@lambo-design/variant-form 2.2.9-beta.0 → 2.2.9-beta.1

package/src/components/form-designer/setting-panel/property-editor/displayFields-editor.vue

@@ -0,0 +1,91 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.displayFields')">
+    <el-select v-model="optionModel.displayFields" multiple>
+      <el-option v-for="item in relationItems" :key="item.columnName" :label="item.columnLabel" :value="item.columnName">
+      </el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  // import axios from "axios"
+  import ajax from "@lambo-design/shared/utils/ajax";
+
+  export default {
+    name: "displayFields-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    inject: ['getDesignerConfig'],
+    data() {
+      return {
+        relationItems: [],
+      }
+    },
+
+    created() {
+      this.initRelationItems(this.optionModel.subFormId);
+    },
+    mounted() {
+    },
+    methods: {
+      initRelationItems(subFormId) {
+        let projectId = this.getDesignerConfig().projectId;
+        if(!projectId) {
+          console.log("get designer config projectId is null");
+          projectId = 'ZhaoyxTP';
+        }
+        if(projectId && subFormId) {
+          let url = "/dida-manage-server/manage/form-materialization-table-meta-info/getSpecificTypeMetaInfos?formId="+subFormId;
+          ajax.get(url)
+                  .then(resp => {
+                    if (resp.data && (resp.data.code == 1 || resp.data.code == 200)) {
+                      this.relationItems = resp.data.data;
+                      //
+                      if(this.optionModel.relationItems && this.optionModel.relationItems.length>0) {
+                        let isFind = false;
+                        for(let n of this.relationItems) {
+                          if(this.optionModel.relationItems.includes(n.columnName)) {
+                            isFind = true;
+                            break;
+                          }
+                        }
+                        if(!isFind) {
+                          this.optionModel.relationItems = [];
+                        }
+                      }
+                    } else {
+                      this.relationItems = [];
+                      this.optionModel.relationItems = [];
+                      // this.$Message.error('查询表单列表失败');
+                      console.error(resp.data.message);
+                    }
+                  })
+                  .catch(err => {
+                    this.relationItems = [];
+                    this.optionModel.relationItems = [];
+                    // this.$Message.error('获取表单列表失败');
+                    console.error(err);
+                  });
+        } else {
+          this.relationItems = [];
+          this.optionModel.relationItems = [];
+        }
+      }
+    },
+    watch:{
+      'optionModel.subFormId':function (newValue) {//, oldValue
+        this.initRelationItems(newValue);
+      },
+      deep:true
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/displayStyle-editor.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form-item :label="i18nt('designer.setting.displayStyle')">
+  <el-form-item :label="i18nt('designer.setting.displayStyle')" v-if="!optionModel.relationType || optionModel.relationType=='list'">
     <el-radio-group v-model="optionModel.displayStyle">
       <el-radio label="inline">{{i18nt('designer.setting.inlineLayout')}}</el-radio>
       <el-radio label="block">{{i18nt('designer.setting.blockLayout')}}</el-radio>

package/src/components/form-designer/setting-panel/property-editor/field-relation-form/relation-form-defaultValue-editor.vue

@@ -0,0 +1,18 @@
+<template>
+  <div style="display: none"></div>
+</template>
+
+<script>
+  export default {
+    name: "relation-form-defaultValue-editor",
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/filterable-editor.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form-item :label="i18nt('designer.setting.filterable')">
+  <el-form-item :label="i18nt('designer.setting.filterable')" v-if="!optionModel.relationType || optionModel.relationType=='select'">
     <el-switch v-model="optionModel.filterable"></el-switch>
   </el-form-item>
 </template>

package/src/components/form-designer/setting-panel/property-editor/multipleLimit-editor.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form-item :label="i18nt('designer.setting.multipleLimit')">
+  <el-form-item :label="i18nt('designer.setting.multipleLimit')" v-if="!optionModel.relationType || optionModel.relationType=='select' || optionModel.relationType=='list'">
     <el-input-number v-model="optionModel.multipleLimit" :min="0"
                      class="hide-spin-button" style="width: 100%"></el-input-number>
   </el-form-item>

package/src/components/form-designer/setting-panel/property-editor/name-editor.vue

@@ -1,8 +1,8 @@
 <template>
   <el-form-item prop="name" :rules="nameRequiredRule">
     <span slot="label">{{i18nt('designer.setting.uniqueName')}}
-      <el-tooltip effect="light" :content="i18nt('designer.setting.editNameHelp')">
-        <i class="el-icon-info"></i></el-tooltip>
+<!--      <el-tooltip effect="light" :content="i18nt('designer.setting.editNameHelp')">-->
+<!--        <i class="el-icon-info"></i></el-tooltip>-->
     </span>
     <template v-if="(!!selectedWidget.category && (selectedWidget.type !== 'sub-form')) || noFieldList">
       <el-input type="text" v-model="optionModel.name" :readonly="widgetNameReadonly" @change="updateWidgetNameAndRef"></el-input>

package/src/components/form-designer/setting-panel/property-editor/operList-editor.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.operList')">
+    <el-checkbox-group v-model="optionModel.operList">
+      <el-checkbox v-for="action in actions" :label="action.type" :key="action.type">
+        {{action.name}}
+        <el-tooltip v-if="action.type === 'draggable'" effect="light" content="是否开启拖拽调整行顺序" placement="top">
+          <i class="el-icon-question"></i>
+        </el-tooltip>
+      </el-checkbox>
+    </el-checkbox-group>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "operList-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    inject: ['getDesignerConfig'],
+    data() {
+      return {
+        actions: [
+          {
+            name: this.i18nt('designer.setting.actions.insert'),
+            type: 'insert'
+          },
+          {
+            name: this.i18nt('designer.setting.actions.edit'),
+            type: 'edit'
+          },
+          {
+            name: this.i18nt('designer.setting.actions.delete'),
+            type: 'delete'
+          },
+          {
+            name: this.i18nt('designer.setting.actions.copy'),
+            type: 'copy'
+          },
+          {
+            name: this.i18nt('designer.setting.actions.draggable'),
+            type: 'draggable'
+          },
+          {
+            name: this.i18nt('designer.setting.actions.batchDelete'),
+            type: 'batchDelete'
+          },
+        ],
+      }
+    },
+
+    methods: {
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/placeholder-editor.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form-item :label="i18nt('designer.setting.placeholder')">
+  <el-form-item :label="i18nt('designer.setting.placeholder')" v-if="!optionModel.relationType || optionModel.relationType=='select' || optionModel.relationType=='help'">
     <el-input type="text" v-model="optionModel.placeholder"></el-input>
   </el-form-item>
 </template>

package/src/components/form-designer/setting-panel/property-editor/relationForm-editor.vue

@@ -0,0 +1,74 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.relationForm')">
+    <el-select v-model="optionModel.relationForm">
+      <el-option v-for="item in relationForms" :key="item.formId" :label="item.formName" :value="item.formId">
+      </el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  // import axios from "axios"
+  import ajax from "@lambo-design/shared/utils/ajax";
+
+  export default {
+    name: "relationForm-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    inject: ['getDesignerConfig'],
+    data() {
+      return {
+        relationForms: [],
+      }
+    },
+
+    created() {
+      this.initRelationForms();
+    },
+    mounted() {
+    },
+    methods: {
+      initRelationForms() {
+        let projectId = this.getDesignerConfig().projectId;
+        let formId = this.getDesignerConfig().formId;
+        if(!projectId || !formId) {
+          console.log("get designer config projectId & formId is null", projectId, formId);
+          projectId = 'ZhaoyxTP';
+          formId = 'ZhaoyxTF';
+        }
+        if(projectId && formId) {
+          let url = "/dida-manage-server/manage/form-materialization-table-relation/listOthers?projectId="+projectId+"&formId="+formId;
+          ajax.get(url)
+                  .then(resp => {
+                    if (resp.data && (resp.data.code == 1 || resp.data.code == 200)) {
+                      this.relationForms = resp.data.data;
+                    } else {
+                      this.relationForms = [];
+                      // this.$Message.error('查询表单列表失败');
+                      console.error(resp.data.message);
+                    }
+                  })
+                  .catch(err => {
+                    this.relationForms = [];
+                    // this.$Message.error('获取表单列表失败');
+                    console.error(err);
+                  });
+        } else {
+          this.relationForms = [];
+        }
+      }
+    },
+    watch:{
+      // deep:true
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/relationItems-editor.vue

@@ -0,0 +1,91 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.relationItems')">
+    <el-select v-model="optionModel.relationItems" multiple>
+      <el-option v-for="item in relationItems" :key="item.columnName" :label="item.columnLabel" :value="item.columnName">
+      </el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  // import axios from "axios"
+  import ajax from "@lambo-design/shared/utils/ajax";
+
+  export default {
+    name: "relationItems-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    inject: ['getDesignerConfig'],
+    data() {
+      return {
+        relationItems: [],
+      }
+    },
+
+    created() {
+      this.initRelationItems(this.optionModel.relationForm);
+    },
+    mounted() {
+    },
+    methods: {
+      initRelationItems(relationForm) {
+        let projectId = this.getDesignerConfig().projectId;
+        if(!projectId) {
+          console.log("get designer config projectId is null");
+          projectId = 'ZhaoyxTP';
+        }
+        if(projectId && relationForm) {
+          let url = "/dida-manage-server/manage/form-materialization-table-meta-info/getSpecificTypeMetaInfos?projectId="+projectId+"&formId="+relationForm;
+          ajax.get(url)
+                  .then(resp => {
+                    if (resp.data && (resp.data.code == 1 || resp.data.code == 200)) {
+                      this.relationItems = resp.data.data;
+                      //
+                      if(this.optionModel.relationItems && this.optionModel.relationItems.length>0) {
+                        let isFind = false;
+                        for(let n of this.relationItems) {
+                          if(this.optionModel.relationItems.includes(n.columnName)) {
+                            isFind = true;
+                            break;
+                          }
+                        }
+                        if(!isFind) {
+                          this.optionModel.relationItems = [];
+                        }
+                      }
+                    } else {
+                      this.relationItems = [];
+                      this.optionModel.relationItems = [];
+                      // this.$Message.error('查询表单列表失败');
+                      console.error(resp.data.message);
+                    }
+                  })
+                  .catch(err => {
+                    this.relationItems = [];
+                    this.optionModel.relationItems = [];
+                    // this.$Message.error('获取表单列表失败');
+                    console.error(err);
+                  });
+        } else {
+          this.relationItems = [];
+          this.optionModel.relationItems = [];
+        }
+      }
+    },
+    watch:{
+      'optionModel.relationForm':function (newValue) {//, oldValue
+        this.initRelationItems(newValue);
+      },
+      deep:true
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/relationType-editor.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.relationType')">
+    <el-select v-model="optionModel.relationType">
+<!--      @change="changeType"-->
+      <el-option v-for="item in relationTypes" :key="item.value" :label="item.label" :value="item.value">
+      </el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "relationType-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        relationTypes: [
+          {value: 'select', label: this.i18nt('designer.setting.relationSelect')},
+          {value: 'list', label: this.i18nt('designer.setting.relationList')},
+          {value: 'help', label: this.i18nt('designer.setting.relationHelp')},
+        ],
+      }
+    },
+    methods: {
+      // changeType (value) {
+      //   console.log(value);
+      //   // console.log(this.optionModel.relationType);
+      //   // if(value=='select') {
+      //   //   this.optionModel.optionItems = [
+      //   //     {label: 'select 1', value: 1},
+      //   //     {label: 'select 2', value: 2},
+      //   //     {label: 'select 3', value: 3},
+      //   //   ];
+      //   //   delete this.optionModel.displayStyle;
+      //   //   delete this.optionModel.buttonStyle;
+      //   // } else if (value=='checkbox') {
+      //   //   this.optionModel.optionItems = [
+      //   //     {label: 'check 1', value: 1},
+      //   //     {label: 'check 2', value: 2},
+      //   //     {label: 'check 3', value: 3},
+      //   //   ];
+      //   //   delete this.optionModel.placeholder;
+      //   // } else if (value=='radio') {
+      //   //   this.optionModel.optionItems = [
+      //   //     {label: 'radio 1', value: 1},
+      //   //     {label: 'radio 2', value: 2},
+      //   //     {label: 'radio 3', value: 3},
+      //   //   ];
+      //   //   delete this.optionModel.placeholder;
+      //   // } else {
+      //   //   delete this.optionModel.optionItems;
+      //   // }
+      // }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>