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

package/src/components/form-designer/form-widget/field-widget/relation-form-widget.vue

@@ -0,0 +1,397 @@
+<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">
+    <el-select ref="fieldEditor" v-model="fieldModel" class="full-width-input" v-if="!field.options.relationType || field.options.relationType=='select'"
+               :disabled="field.options.disabled"
+               :size="field.options.size"
+               :clearable="field.options.clearable"
+               :filterable="field.options.filterable"
+               :allow-create="field.options.allowCreate"
+               :default-first-option="allowDefaultFirstOption"
+               :automatic-dropdown="field.options.automaticDropdown"
+               :multiple="field.options.multiple" :multiple-limit="field.options.multipleLimit"
+               :placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')"
+               :remote="field.options.remote" :remote-method="remoteMethod"
+               @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
+               @change="handleChangeEvent">
+      <el-option v-for="item in optionItems" :key="item.value" :label="item.label"
+                 :value="item.value" :disabled="item.disabled">
+      </el-option>
+      <!--      field.options.optionItems-->
+    </el-select>
+    <el-checkbox-group ref="fieldEditor" v-model="fieldModel" v-if="field.options.relationType=='list' && field.options.multiple"
+                       :disabled="field.options.disabled" :size="field.options.size" :max="field.options.multipleLimit>0?field.options.multipleLimit:65535"
+                       @change="handleChangeEvent">
+      <template v-if="!!field.options.buttonStyle">
+        <el-checkbox-button v-for="(item, index) in optionItems" :key="index" :label="item.value"
+                            :disabled="item.disabled" :border="field.options.border"
+                            :style="{display: field.options.displayStyle}">{{item.label}}</el-checkbox-button>
+        <!--        field.options.optionItems-->
+      </template>
+      <template v-else>
+        <el-checkbox v-for="(item, index) in optionItems" :key="index" :label="item.value"
+                     :disabled="item.disabled" :border="field.options.border"
+                     :style="{display: field.options.displayStyle}">{{item.label}}</el-checkbox>
+        <!--        field.options.optionItems-->
+      </template>
+    </el-checkbox-group>
+    <el-radio-group ref="fieldEditor" v-model="fieldModel" v-if="field.options.relationType=='list' && !field.options.multiple"
+                    :disabled="field.options.disabled" :size="field.options.size"
+                    @change="handleChangeEvent">
+      <template v-if="!!field.options.buttonStyle">
+        <el-radio-button v-for="(item, index) in optionItems" :key="index" :label="item.value"
+                         :disabled="item.disabled" :border="field.options.border"
+                         :style="{display: field.options.displayStyle}">{{item.label}}</el-radio-button>
+        <!--        field.options.optionItems-->
+      </template>
+      <template v-else>
+        <el-radio v-for="(item, index) in optionItems" :key="index" :label="item.value"
+                  :disabled="item.disabled" :border="field.options.border"
+                  :style="{display: field.options.displayStyle}">{{item.label}}</el-radio>
+        <!--        field.options.optionItems-->
+      </template>
+    </el-radio-group>
+    <el-input ref="fieldEditor" v-model="fieldModelName" v-if="field.options.relationType=='help'"
+              :disabled="field.options.disabled" :readonly="field.options.readonly"
+              :size="field.options.size" class="hide-spin-button"
+              type="text"
+              :placeholder="field.options.placeholder"
+              :clearable="field.options.clearable"
+              @focus="handleFocusCustomEventA" @blur="handleBlurCustomEvent" @input="handleInputCustomEvent"
+              @change="handleChangeEvent" @clear="handleClear">
+      <!--              :show-password="field.options.showPassword"-->
+      <!--              :show-word-limit="field.options.showWordLimit"-->
+      <!--              :minlength="field.options.minLength" :maxlength="field.options.maxLength"-->
+      <!--              :prefix-icon="field.options.prefixIcon" :suffix-icon="field.options.suffixIcon"-->
+      <el-button slot="append" class="el-icon-connection" :disabled="field.options.disabled" @click.native="emitAppendButtonClickA"></el-button>
+    </el-input>
+<!--    v-model="fieldModel"-->
+<!--    <div v-if="field.options.relationType=='help'">{{fieldModelName}}</div>-->
+    <el-dialog title="关联表数据" :visible.sync="dialogTableVisible">
+      <el-table ref="selectionTable" :data="optionItems" height="300" @current-change="handleCurrentChange" @selection-change="handleSelectionChange"
+                border stripe show-overflow-tooltip :highlight-selection-row="field.options.multiple" :highlight-current-row="!field.options.multiple">
+        <el-table-column type="selection" width="100" align="center" v-if="field.options.multiple"></el-table-column>
+        <el-table-column property="value" :label="i18nt('designer.setting.relationValue')" min-width="200"></el-table-column>
+        <el-table-column property="label" :label="i18nt('designer.setting.relationLabel')" min-width="360"></el-table-column>
+      </el-table>
+      <!--        field.options.optionItems-->
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogTableClose">取 消</el-button>
+        <el-button type="primary" @click="dialogTableOk">确 定</el-button>
+      </div>
+    </el-dialog>
+  </form-item-wrapper>
+</template>
+
+<script>
+  import FormItemWrapper from './form-item-wrapper'
+  import emitter from '@/utils/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  // import axios from "axios"
+  import ajax from "@lambo-design/shared/utils/ajax";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  export default {
+    name: "relation-form-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      FormItemWrapper,
+    },
+    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel', 'getDesignerConfig'],
+    data() {
+      return {
+        oldFieldValue: null, //field组件change之前的值
+        fieldModel: null,
+        fieldModelName: null,
+        rules: [],
+        dialogTableVisible: false,
+
+        optionItems: [],
+      }
+    },
+    computed: {
+      allowDefaultFirstOption() {
+        return (!!this.field.options.filterable && !!this.field.options.allowCreate)
+      },
+
+      remoteMethod() {
+        if (!!this.field.options.remote && !!this.field.options.onRemoteQuery) {
+          return this.remoteQuery
+        } else {
+          return undefined
+        }
+      },
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      // this.initOptionItems()
+      this.initFieldModel()
+      this.registerToRefList()
+      this.initEventHandler()
+      this.buildFieldRules()
+
+      this.handleOnCreated()
+
+      this.initOptionItemsA(this.field.options.relationItems)
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+      handleFocusCustomEventA(event) {
+        this.handleFocusCustomEvent(event);
+        //
+        this.dialogTableOpen();
+      },
+      emitAppendButtonClickA() {
+        this.emitAppendButtonClick();
+        //
+        this.dialogTableOpen();
+      },
+      dialogTableOpen() {
+        this.dialogTableVisible = true;
+        //
+        if(this.field.options.multiple) {
+          let rows = [];
+          if(this.fieldModel) {
+            for(let v of this.fieldModel) {
+              for(let n of this.optionItems) {
+                if(v == n.value) {
+                  rows.push(n);
+                  break;
+                }
+              }
+              // field.options.optionItems
+            }
+          }
+          this.dialogTableSelectionRows(rows);
+        } else {
+          let row = null;
+          if(this.fieldModel) {
+            for(let n of this.optionItems) {
+              if(this.fieldModel == n.value) {
+                row = n;
+                break;
+              }
+            }
+            // field.options.optionItems
+          }
+          this.dialogTableSelectionRow(row);
+        }
+      },
+      dialogTableSelectionRows(rows) {
+        let table = this.$refs.selectionTable;
+        if(table) {
+          table.clearSelection();
+          for(let row of rows) {
+            table.toggleRowSelection(row);
+          }
+        } else {
+          setTimeout(() => {
+            this.dialogTableSelectionRows(rows);
+          }, 100);
+        }
+      },
+      dialogTableSelectionRow(row) {
+        let table = this.$refs.selectionTable;
+        if(table) {
+          table.setCurrentRow(row);
+        } else {
+          setTimeout(() => {
+            this.dialogTableSelectionRow(row);
+          }, 100);
+        }
+      },
+      handleSelectionChange(val) {
+        this.multipleSelection = val;
+      },
+      handleCurrentChange(val) {
+        this.currentRow = val;
+      },
+      dialogTableClose() {
+        this.dialogTableVisible = false;
+      },
+      dialogTableOk() {
+        this.oldFieldValue = this.fieldModel;
+        if(this.field.options.multiple) {
+          let values = [];
+          let names = [];
+          if(this.multipleSelection) {
+            for(let row of this.multipleSelection) {
+              values.push(row.value);
+              names.push(row.label);
+            }
+          }
+          this.fieldModel = values;
+          this.fieldModelName = names.join();
+        } else {
+          if(this.currentRow) {
+            this.fieldModel = this.currentRow.value;
+            this.fieldModelName = this.currentRow.label;
+          } else {
+            this.fieldModel = null;
+            this.fieldModelName = null;
+          }
+        }
+        //
+        this.dialogTableClose();
+      },
+      handleClear() {
+        this.oldFieldValue = this.fieldModel;
+        if(this.field.options.multiple) {
+          this.fieldModel = [];
+        } else {
+          this.fieldModel = null;
+        }
+      },
+      initOptionItemsA(relationItems) {
+        // let projectId = this.getDesignerConfig().projectId;
+        // if(!projectId) {
+        //   console.log("get designer config projectId is null");
+        //   projectId = 'ZhaoyxTP';
+        // }
+        // if(projectId && this.field.options.relationForm && relationItems) {
+        //   let url = "/dida-manage-server/manage/form-materialization-table-data/getFormDatas?projectId="+projectId+"&formId="+this.field.options.relationForm+"&relationItems="+relationItems;
+        //   ajax.get(url)
+        //           .then(resp => {
+        //             if (resp.data && (resp.data.code == 1 || resp.data.code == 200)) {
+        //               this.optionItems = resp.data.data;
+        //               // field.options.optionItems
+        //             } else {
+        //               this.resetDefaultOptionItems();
+        //               // this.$Message.error('查询表单列表失败');
+        //               console.error(resp.data.message);
+        //             }
+        //           })
+        //           .catch(err => {
+        //             this.resetDefaultOptionItems();
+        //             // this.$Message.error('获取表单列表失败');
+        //             console.error(err);
+        //           });
+        // } else {
+        //   this.resetDefaultOptionItems();
+        // }
+        this.resetDefaultOptionItems(relationItems);
+      },
+      resetDefaultOptionItems() {
+        this.optionItems = [
+          {label: '示例数据一', value: 1},
+          {label: '示例数据二', value: 2},
+          {label: '示例数据三', value: 3},
+        ];
+        // field.options.optionItems
+      }
+
+    },
+    watch:{
+      'field.options.multiple':function (newValue) {//, oldValue
+        if(newValue) {
+          if(this.oldFieldValue) {
+            this.oldFieldValue = [this.oldFieldValue];
+          }
+          if(this.fieldModel) {
+            this.fieldModel = [this.fieldModel];
+          }
+        } else {
+          if(this.oldFieldValue && this.oldFieldValue.length>0) {
+            this.oldFieldValue = this.oldFieldValue[0];
+          }
+          if(this.fieldModel && this.fieldModel.length>0) {
+            this.fieldModel = this.fieldModel[0];
+          }
+        }
+      },
+      'field.options.multipleLimit':function (newValue, oldValue) {
+        let oldV = oldValue>0?oldValue:65535;
+        if(this.field.options.multiple && newValue>0 && newValue<oldV && this.fieldModel && this.fieldModel.length>newValue) {
+          this.oldFieldValue = this.fieldModel.slice();
+          this.fieldModel.splice(newValue);
+        }
+      },
+      'fieldModel':function (newValue) {//, oldValue
+        if(this.field.options.multiple) {
+          if (newValue) {
+            let names = [];
+            for(let v of newValue) {
+              for(let n of this.optionItems) {
+                if(v == n.value) {
+                  names.push(n.label);
+                  break;
+                }
+              }
+              // field.options.optionItems
+            }
+            this.fieldModelName = names.join();
+          } else {
+            this.fieldModelName = null;
+          }
+        } else {
+          if(newValue) {
+            for(let n of this.optionItems) {
+              if(newValue == n.value) {
+                this.fieldModelName = n.label;
+                break;
+              }
+            }
+            // field.options.optionItems
+          } else {
+            this.fieldModelName = null;
+          }
+        }
+      },
+      'field.options.relationItems':function (newValue) {//, oldValue
+        this.initOptionItemsA(newValue);
+      },
+      deep:true
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
+
+  .full-width-input {
+    width: 100% !important;
+  }
+
+</style>