add: 新增表单多数据部件(重复器)组件

src/app-register.ts

@@ -147,6 +147,7 @@ import AppAddressCascader from './components/app-address-cascader/app-address-ca
 import AppInputIcon from './components/app-input-icon/app-input-icon.vue';
 import AppTreeSelect from './components/app-tree-select/app-tree-select.vue'
 import AppFormMdCtrl from './components/app-form-mdctrl/app-form-mdctrl.vue';
+import AppFormMdctrlRepeater from './components/app-form-mdctrl-repeater/app-form-mdctrl-repeater.vue';
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
 // 全局挂载实体权限服务注册中心
@@ -308,5 +309,6 @@ export const AppComponents = {
         v.component('app-array-box', AppArrayBox);
         v.component('app-tree-select', AppTreeSelect);
         v.component('app-form-mdctrl', AppFormMdCtrl);
+        v.component('app-form-mdctrl-repeater', AppFormMdctrlRepeater);
     },
 };
\ No newline at end of file

src/components/app-form-mdctrl-repeater/app-form-mdctrl-repeater.less

+.app-form-mdctrl-repeater__row {
+  position: relative;
+  padding: 6px 0;
+  border-top: 1px dashed #eee;
+  &:first-child {
+    border-top: none;
+  }
+}
+.repeater-remove-default,
+.repeater-remove-style2 {
+  display: none;
+}
+.el-table__row:hover {
+  .repeater-remove-style2 {
+    display: inline-block;
+  }
+}
+.repeater-remove-default {
+  position: absolute;
+  right: 0;
+  top: 2px;
+  z-index: 3;
+}
+.app-form-mdctrl-repeater__row:hover {
+  > .repeater-remove-default {
+    display: inline-block;
+  }
+}
+.app-form-mdctrl-repeater--style2 {
+  .repeater-add {
+    padding: 7px;
+  }
+  .app-form-mdctrl-repeater__header {
+    padding-bottom: 6px;
+  }
+}
+.repeater-caption {
+  padding-right: 20px;
+  font-weight: 600;
+}
+
+@index: 1, 2, 3, 4, 5;
+each(@index, {
+  .app-form-mdctrl-repeater__level-@{value} > .app-form-mdctrl-repeater__header {
+    padding-left: @value * 20px;
+  }
+})
+
+.grid-column__localaction__remove {
+  display: none;
+}
+//  解决表格样式hover变化
+.grid-column__localaction__content {
+  height: 28px;
+}
+.el-table__row:hover {
+  .grid-column__localaction__remove {
+      display: inline-block;
+  }
+
+  .grid-column__localaction__index {
+      display: none;
+  }
+}
+// .app-form-mdctrl-repeater--default {
+//   display: flex;
+//   flex-direction: column;
+// }

src/components/app-form-mdctrl-repeater/app-form-mdctrl-repeater.vue

+<template>
+  <div :class="classNames">
+    <template v-if="mode === 'STYLE2'">
+      <div class="app-form-mdctrl-repeater__content">
+        <el-table :show-header="true" border :data="data">
+          <el-table-column
+            align="center"
+            class-name="grid-column__localaction"
+            width="64"
+          >
+            <template #header>
+              <el-button
+                type="primary"
+                class="repeater-add"
+                icon="el-icon-plus"
+                size="mini"
+                circle
+                @click="handleAdd"
+              ></el-button>
+            </template>
+            <template #default="{ row, column, $index }">
+              <div class="repeater-grid-column">
+                <span class="grid-column__localaction__index">{{
+                  $index + 1
+                }}</span>
+                <el-button
+                  class="repeater-remove-style2"
+                  type="danger"
+                  size="mini"
+                  icon="el-icon-delete"
+                  circle
+                  @click="handleRemove(row, $index)"
+                ></el-button>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            :prop="key"
+            :align="columnAlign"
+            v-for="key of Object.keys(children)"
+            :key="key"
+          >
+            <template #header>
+              {{ children[key].caption }}
+            </template>
+            <template #default="{ row, column, $index }">
+              <slot
+                :name="key"
+                :data="row"
+                :context="context"
+                :viewparams="viewparams"
+                :onFormItemValueChange="
+                  ($event) => onFormItemValueChange($index, $event)
+                "
+              ></slot>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </template>
+    <template v-else>
+      <div
+        class="app-form-mdctrl-repeater__header"
+        v-show="!(mode === 'STYLE3' && data.length >= 1)"
+      >
+        <span class="repeater-caption" v-if="showCaption && caption">{{
+          caption
+        }}</span>
+        <el-button
+          type="primary"
+          class="repeater-add"
+          icon="el-icon-plus"
+          size="mini"
+          circle
+          @click="handleAdd"
+        ></el-button>
+      </div>
+      <div class="app-form-mdctrl-repeater__content">
+        <template v-for="(item, vIndex) of data">
+          <row class="app-form-mdctrl-repeater__row">
+            <el-button
+              class="repeater-remove-default"
+              type="danger"
+              size="mini"
+              circle
+              icon="el-icon-delete"
+              @click="handleRemove(item, vIndex)"
+            >
+            </el-button>
+            <slot
+              :context="context"
+              :viewparams="viewparams"
+              :data="item"
+              :onFormItemValueChange="
+                ($event) => onFormItemValueChange(vIndex, $event)
+              "
+            ></slot>
+          </row>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { Subject } from "rxjs";
+import { Vue, Component, Prop, Model } from "vue-property-decorator";
+
+@Component({})
+export default class AppFormMdCtrlRepeater extends Vue {
+  /**
+   * 应用上下文
+   * 
+   * @type {*}
+   * @memberof AppFormMdCtrlRepeater
+   */
+  @Prop() public context: any;
+
+  /**
+   * 视图参数
+   * 
+   * @type {*}
+   * @memberof AppFormMdCtrlRepeater
+   */
+  @Prop() public viewparams: any;
+
+  /**
+   * 表单通讯状态
+   * 
+   * @type {Subject<any>}
+   * @memberof AppFormMdCtrlRepeater
+   */
+  @Prop() public formState!: Subject<any>;
+
+  /**
+   * 项名称
+   * 
+   * @type {string}
+   * @memberof AppFormMdCtrlRepeater
+   */
+  @Prop() public name!: string;
+
+  /**
+   * 层级
+   * 
+   * @type {number}
+   * @memberof AppFormMdCtrlRepeater
+   */
+  @Prop({ default: 0 }) public level?: number;
+
+  /**
+   * 数据
+   * 
+   * @type {any[]}
+   * @memberof AppFormMdCtrlRepeater
+   */
+  @Model() public data!: any[];
+
+  /**
+   * 模式
+   * 
+   * @type {string}
+   * @memberof AppFormMdCtrlRepeater
+   */
+  @Prop({ default: "DEFAULT" }) public mode?:
+    | "DEFAULT"
+    | "STYLE2"
+    | "STYLE3"
+    | string;
+
+  /**
+   * 是否显示标题
+   * 
+   * @type {boolean}
+   * @memberof AppFormMdCtrlRepeater
+   */
+  @Prop({ default: true }) public showCaption?: boolean;
+
+  /**
+   * 标题
+   * 
+   * @type {string}
+   * @memberof AppFormMdCtrlRepeater
+   */
+  @Prop() public caption!: string;
+
+  /**
+   * 子集合
+   * 
+   * @type {*}
+   * @memberof AppFormMdCtrlRepeater
+   */
+  @Prop({
+    default: () => {
+      return {};
+    },
+  })
+  public children: any;
+
+  /**
+   * 应用上下文
+   * 
+   * @type {"center" | "left" | "right"}
+   * @memberof AppFormMdCtrlRepeater
+   */
+  @Prop({ default: "center" }) public columnAlign?: "center" | "left" | "right";
+
+  /**
+   * 样式表
+   * 
+   * @type {*}
+   * @memberof AppFormMdCtrlRepeater
+   */
+  get classNames() {
+    return {
+      "app-form-mdctrl-repeater": true,
+      [`app-form-mdctrl-repeater--${this.name.toLowerCase()}`]: true,
+      [`app-form-mdctrl-repeater--${(this.mode || "DEFAULT").toLowerCase()}`]:
+        true,
+      [`app-form-mdctrl-repeater__level-${this.level}`]: true,
+    };
+  }
+
+  /**
+   * 处理数据增加
+   * 
+   * @memberof AppFormMdCtrlRepeater
+   */
+  public handleAdd() {
+    const item = {};
+    Object.keys(this.children).forEach((key: string) => {
+      Object.assign(item, {
+        [key]: this.children[key].type === "MDCTRL" ? [] : null,
+      });
+    });
+    if (!this.data) {
+      this.data = [];
+    }
+    if (this.mode === "STYLE2") {
+      this.data.unshift(item);
+    } else {
+      this.data.push(item);
+    }
+  }
+
+  /**
+   * 处理数据删除
+   * 
+   * @memberof AppFormMdCtrlRepeater
+   */
+  public handleRemove(data: any, index: number) {
+    this.data.splice(index, 1);
+  }
+
+  /**
+   * 处理数据项变化
+   * 
+   * @memberof AppFormMdCtrlRepeater
+   */
+  public onFormItemValueChange(
+    index: number,
+    { name, value }: { name: string; value: any }
+  ) {
+    if (!name) {
+      return;
+    }
+    this.data[index][name] = value;
+  }
+}
+</script>
+<style lang="less">
+@import "./app-form-mdctrl-repeater.less";
+</style>