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

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

@@ -0,0 +1,660 @@
+<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>
+      <div class="sub-form-table-button">
+        <el-button v-if="operList.includes('insert')" size="medium" type="primary" @click="openDialog('insert')">{{ i18nt('designer.setting.actions.insert') }}</el-button>
+        <el-button v-if="operList.includes('batchDelete')" size="medium" @click="batchDelete">{{ i18nt('designer.setting.actions.batchDelete') }}</el-button>
+      </div>
+      <el-table ref="draggableTable" sortable="true" :data="tableData" stripe border style="width: 100%" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" fixed="left" width="60"></el-table-column>
+        <el-table-column v-for="(item, index) in tableColumns" :key="index" :prop="item.columnName" :label="item.columnLabel" width="200">
+          <template slot-scope="scope">
+            {{ formatField(scope.row[item.columnName], item.widgetType) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="operation" label="操作" fixed="right" min-width="200px">
+          <template slot-scope="scope">
+            <el-button v-if="operList.includes('edit')" type="text" size="small" @click="openDialog('edit', scope.$index, scope.row)">{{ i18nt('designer.setting.actions.edit') }}</el-button>
+            <el-button v-if="operList.includes('copy')" type="text" size="small" @click="openDialog('copy', scope.$index, scope.row)">{{ i18nt('designer.setting.actions.copy') }}</el-button>
+            <el-button v-if="operList.includes('delete')" type="text" size="small" @click="deleteItem(scope.$index)">{{ i18nt('designer.setting.actions.delete') }}</el-button>
+            <el-button type="text" size="small" @click="openDialog('detail', scope.$index, scope.row)">{{ i18nt('designer.setting.actions.detail') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <Draggable
+          v-model="tableData"
+          :animation="150"
+          :force-fallback="true"
+          fallback-class="dragging-fallback"
+          @end="onDragEnd"
+          style="display: none"
+      >
+        <transition-group>
+          <div v-for="(item, index) in tableData" :key="item.id" :data-index="index"></div>
+        </transition-group>
+      </Draggable>
+    </div>
+    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
+      <el-form label-width="120px">
+        <el-form-item v-for="(item, index) in tableColumns" class="edit-form-item" :key="index" :label="item.columnLabel">
+          <el-input v-if="item.widgetType === 'textarea'" type="textarea" v-model="rowData[item.columnName]"></el-input>
+          <el-input-number v-else-if="item.widgetType === 'number'" v-model="rowData[item.columnName]"></el-input-number>
+          <div v-else-if="item.widgetType === 'radio'">
+            <el-radio v-model="rowData[item.columnName]" label="单选1">单选1</el-radio>
+            <el-radio v-model="rowData[item.columnName]" label="单选2">单选2</el-radio>
+            <el-radio v-model="rowData[item.columnName]" label="单选3">单选3</el-radio>
+          </div>
+          <el-checkbox-group v-else-if="item.widgetType === 'checkbox'" v-model="rowData[item.columnName]">
+            <el-checkbox label="复选框1"></el-checkbox>
+            <el-checkbox label="复选框2"></el-checkbox>
+            <el-checkbox label="复选框3"></el-checkbox>
+          </el-checkbox-group>
+          <el-select v-else-if="item.widgetType === 'select'" v-model="rowData[item.columnName]">
+            <el-option key="选项1" label="选项1" value="选项1"></el-option>
+            <el-option key="选项2" label="选项2" value="选项2"></el-option>
+            <el-option key="选项3" label="选项3" value="选项3"></el-option>
+          </el-select>
+          <el-time-select v-else-if="item.widgetType === 'time'"
+                          v-model="rowData[item.columnName]"
+                          :picker-options="{start: '08:30',step: '00:15',end: '18:30'}"
+                          placeholder="选择时间"></el-time-select>
+          <el-time-picker v-else-if="item.widgetType === 'time-range'"
+                          is-range
+                          v-model="rowData[item.columnName]"
+                          range-separator="至"
+                          start-placeholder="开始时间"
+                          end-placeholder="结束时间"
+                          placeholder="选择时间范围">
+          </el-time-picker>
+          <el-date-picker v-else-if="item.widgetType === 'date'"
+                          v-model="rowData[item.columnName]"
+                          type="date"
+                          placeholder="选择日期">
+          </el-date-picker>
+          <el-date-picker v-else-if="item.widgetType === 'date-range'"
+                          v-model="rowData[item.columnName]"
+                          type="daterange"
+                          range-separator="至"
+                          start-placeholder="开始日期"
+                          end-placeholder="结束日期">
+          </el-date-picker>
+          <el-switch v-else-if="item.widgetType === 'switch'" v-model="rowData[item.columnName]" active-value="开" inactive-value="关" active-text="开" inactive-text="关"></el-switch>
+          <el-input v-else v-model="rowData[item.columnName]"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogTableClose">取 消</el-button>
+        <el-button type="primary" @click="onOk">确 定</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 Draggable from "vuedraggable";
+import ajax from "@lambo-design/shared/utils/ajax";
+import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+export default {
+  name: "sub-form-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,
+    Draggable
+  },
+  inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel', 'getDesignerConfig'],
+  data() {
+    return {
+      operList: this.field.options.operList,
+      oldFieldValue: null,
+      fieldModel: null,
+      fieldModelName: null,
+      rules: [],
+      dialogFormVisible: false,
+
+      allColumns: [],
+      tableColumns: [],
+      tableData: [],
+      rowData: {},
+      curActionType: '',
+      currentRow: -1,
+      dialogTitle: '',
+      draggingIndex: -1,
+      isDragging: false,
+      displayFields: [],
+      // 存储事件处理函数的引用，便于后续移除
+      eventHandlers: {}
+    };
+  },
+  created() {
+    this.initFieldModel();
+    this.registerToRefList();
+    this.initEventHandler();
+    this.buildFieldRules();
+    this.handleOnCreated();
+    this.getDefaultDisplayFields();
+  },
+  mounted() {
+    this.handleOnMounted();
+    this.initDisplayFields(this.field.options.subFormId);
+    this.$nextTick(() => {
+      this.initRowDraggable();
+    });
+  },
+  beforeDestroy() {
+    this.unregisterFromRefList();
+    this.removeRowDragEvents();
+  },
+  methods: {
+    // 清除所有行的拖拽事件
+    removeRowDragEvents() {
+      const table = this.$refs.draggableTable;
+      if (!table) return;
+
+      const tbody = table.$el.querySelector('.el-table__body-wrapper tbody');
+      if (!tbody) return;
+
+      const rows = tbody.querySelectorAll('.el-table__row');
+      rows.forEach((row, index) => {
+        // 移除所有事件监听
+        if (this.eventHandlers[`dragstart-${index}`]) {
+          row.removeEventListener('dragstart', this.eventHandlers[`dragstart-${index}`]);
+        }
+        if (this.eventHandlers[`dragend-${index}`]) {
+          row.removeEventListener('dragend', this.eventHandlers[`dragend-${index}`]);
+        }
+        if (this.eventHandlers[`dragover-${index}`]) {
+          row.removeEventListener('dragover', this.eventHandlers[`dragover-${index}`]);
+        }
+        if (this.eventHandlers[`dragleave-${index}`]) {
+          row.removeEventListener('dragleave', this.eventHandlers[`dragleave-${index}`]);
+        }
+        if (this.eventHandlers[`drop-${index}`]) {
+          row.removeEventListener('drop', this.eventHandlers[`drop-${index}`]);
+        }
+
+        row.removeAttribute('draggable');
+        row.classList.remove('dragging', 'drag-over');
+        row.style.cursor = '';
+      });
+
+      // 清空事件处理函数引用
+      this.eventHandlers = {};
+    },
+
+    // 初始化行拖拽功能
+    initRowDraggable() {
+      this.removeRowDragEvents();
+      if (!this.operList.includes('draggable')) return;
+
+      const table = this.$refs.draggableTable;
+      if (!table) return;
+
+      const tbody = table.$el.querySelector('.el-table__body-wrapper tbody');
+      if (!tbody) return;
+
+      const rows = tbody.querySelectorAll('.el-table__row');
+      rows.forEach((row, index) => {
+        // 为每行创建独立的事件处理函数，确保正确的索引绑定
+        this.eventHandlers[`dragstart-${index}`] = (e) => this.handleDragStart(e, index);
+        this.eventHandlers[`dragend-${index}`] = (e) => this.handleDragEnd(e);
+        this.eventHandlers[`dragover-${index}`] = (e) => this.handleDragOver(e);
+        this.eventHandlers[`dragleave-${index}`] = (e) => this.handleDragLeave(e);
+        this.eventHandlers[`drop-${index}`] = (e) => this.handleDrop(e, index);
+
+        // 绑定事件
+        row.setAttribute('draggable', 'true');
+        row.style.cursor = 'move';
+        row.addEventListener('dragstart', this.eventHandlers[`dragstart-${index}`]);
+        row.addEventListener('dragend', this.eventHandlers[`dragend-${index}`]);
+        row.addEventListener('dragover', this.eventHandlers[`dragover-${index}`]);
+        row.addEventListener('dragleave', this.eventHandlers[`dragleave-${index}`]);
+        row.addEventListener('drop', this.eventHandlers[`drop-${index}`]);
+      });
+    },
+
+    // 拖拽开始处理
+    handleDragStart(e, index) {
+      if (this.isDragging) return;
+      this.isDragging = true;
+      this.draggingIndex = index;
+      const row = e.currentTarget;
+      row.classList.add('dragging');
+
+      // 设置拖拽数据
+      e.dataTransfer.setData('text/plain', index.toString());
+
+      // 创建自定义拖拽图像
+      // const dragImage = document.createElement('div');
+      // dragImage.textContent = `移动行 ${index + 1}`;
+      // dragImage.style.position = 'absolute';
+      // dragImage.style.left = '-9999px';
+      // dragImage.dataset.dragImage = 'true';
+      // document.body.appendChild(dragImage);
+      // e.dataTransfer.setDragImage(dragImage, 0, 0);
+    },
+
+    // 拖拽结束处理
+    handleDragEnd(e) {
+      this.isDragging = false;
+      this.draggingIndex = -1;
+      const row = e.currentTarget;
+      row.classList.remove('dragging');
+
+      // 清理拖拽图像
+      // const dragImages = document.querySelectorAll('[data-drag-image="true"]');
+      // dragImages.forEach(img => img.remove());
+    },
+
+    // 拖拽经过处理
+    handleDragOver(e) {
+      e.preventDefault();
+      if (this.isDragging) {
+        const row = e.currentTarget;
+        row.classList.add('drag-over');
+      }
+    },
+
+    // 拖拽离开处理
+    handleDragLeave(e) {
+      const row = e.currentTarget;
+      row.classList.remove('drag-over');
+    },
+
+    // 放置处理
+    handleDrop(e, toIndex) {
+      e.preventDefault();
+      const row = e.currentTarget;
+      row.classList.remove('drag-over');
+
+      if (!this.isDragging) return;
+
+      const fromIndex = parseInt(e.dataTransfer.getData('text/plain'));
+
+      if (fromIndex !== toIndex && !isNaN(fromIndex)) {
+        // 执行数据移动
+        const [movedItem] = this.tableData.splice(fromIndex, 1);
+        this.tableData.splice(toIndex, 0, movedItem);
+
+        // 触发Vue数据更新
+        this.tableData = [...this.tableData];
+
+        // 重新初始化拖拽，确保所有行（包括新位置的行）都能正常拖拽
+        this.$nextTick(() => {
+          this.initRowDraggable();
+        });
+      }
+
+      this.isDragging = false;
+    },
+
+    // 拖拽结束后重新初始化
+    onDragEnd() {
+      this.$nextTick(() => {
+        this.initRowDraggable();
+      });
+    },
+    openDialog(actionType, index, row) {
+      this.curActionType = actionType;
+      this.currentRow = index;
+      this.dialogTitle = translate(`designer.setting.actions.${actionType}`);
+      console.log(`点击了${this.dialogTitle}`);
+      // if (actionType === 'insert') {
+      //   this.rowData = this.tableColumns.reduce((acc, cur) => {
+      //     switch (cur.widgetType) {
+      //       case 'checkbox':
+      //         acc[cur.columnName] = [];
+      //         break;
+      //       case 'time':
+      //         acc[cur.columnName] = '';
+      //         break;
+      //       case 'time-range':
+      //         acc[cur.columnName] = [new Date(2025, 9, 10, 8, 40), new Date(2025, 9, 10, 9, 40)];
+      //         break;
+      //       case 'date':
+      //         acc[cur.columnName] = '';
+      //         break;
+      //       case 'date-range':
+      //         acc[cur.columnName] = [];
+      //         break;
+      //       default:
+      //         acc[cur.columnName] = '';
+      //         break;
+      //     }
+      //     return acc;
+      //   }, {});
+      // } else {
+      //   this.rowData = JSON.parse(JSON.stringify(row));
+      //   this.tableColumns.forEach(cur => {
+      //     if (cur.widgetType === 'date' && typeof this.rowData[cur.columnName] === 'string') {
+      //       this.rowData[cur.columnName] = new Date(this.rowData[cur.columnName]);
+      //     }
+      //   });
+      // }
+      //
+      // this.dialogFormVisible = true;
+    },
+    deleteItem(index) {
+      console.log('点击了删除');
+      // this.tableData.splice(index, 1);
+      // this.$nextTick(() => {
+      //   this.initRowDraggable();
+      // });
+    },
+
+    // 批量删除
+    batchDelete() {
+      console.log('点击了批量删除');
+      // if (this.multipleSelection && this.multipleSelection.length > 0) {
+      //   this.$alert(translate('designer.setting.batchDeleteConfirm'), translate('designer.setting.actions.batchDelete'), {
+      //     confirmButtonText: translate('designer.hint.confirm'),
+      //     callback: action => {
+      //       const idsToDelete = this.multipleSelection.map(item => item.id);
+      //       this.tableData = this.tableData.filter(item => !idsToDelete.includes(item.id));
+      //       this.$nextTick(() => {
+      //         this.initRowDraggable(); // 批量删除后重新初始化拖拽
+      //       });
+      //     }
+      //   });
+      // }
+    },
+
+    // 处理选择变化
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+
+    // 关闭对话框
+    dialogTableClose() {
+      this.dialogFormVisible = false;
+    },
+
+    // 格式化字段显示
+    formatField(value, type) {
+      if (!value) return '';
+
+      if (type === 'time') {
+        if (typeof value === 'string') return value;
+        const date = new Date(value);
+        return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
+      }
+
+      if (type === 'time-range') {
+        if (!Array.isArray(value) || value.length !== 2) return '';
+
+        const formatSingleTime = (time) => {
+          if (typeof time === 'string') {
+            return time;
+          }
+          const date = new Date(time);
+          return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
+        };
+
+        const formattedTimes = value.map(formatSingleTime);
+        return `[${formattedTimes[0]}, ${formattedTimes[1]}]`;
+      }
+
+      return value;
+    },
+
+    onOk() {
+      const submitData = JSON.parse(JSON.stringify(this.rowData));
+
+      this.tableColumns.forEach(column => {
+        if (column.widgetType === 'date' && submitData[column.columnName]) {
+          const date = new Date(submitData[column.columnName]);
+          submitData[column.columnName] = date.toISOString().split('T')[0];
+        }
+
+        if (column.widgetType === 'time-range' && submitData[column.columnName]) {
+          if (Array.isArray(submitData[column.columnName]) && submitData[column.columnName].length === 2) {
+            submitData[column.columnName] = submitData[column.columnName].map(time => {
+              return new Date(time);
+            });
+          }
+        }
+
+        if (column.widgetType === 'date-range' && submitData[column.columnName]) {
+          if (Array.isArray(submitData[column.columnName]) && submitData[column.columnName].length === 2) {
+            submitData[column.columnName] = submitData[column.columnName].map(time => {
+              const date = new Date(time);
+              const year = date.getFullYear();
+              const month = (date.getMonth() + 1).toString().padStart(2, '0');
+              const day = date.getDate().toString().padStart(2, '0');
+              return `${year}-${month}-${day}`;
+            });
+          }
+        }
+      });
+
+      switch (this.curActionType) {
+        case 'insert':
+          submitData.id = Date.now();
+          this.tableData.push(submitData);
+          break;
+        case 'edit':
+          this.tableData.splice(this.currentRow, 1, submitData);
+          break;
+        case 'copy':
+          submitData.id = Date.now() + Math.floor(Math.random() * 1000);
+          this.tableData.push(submitData);
+          break;
+        case 'detail':
+          this.dialogFormVisible = false;
+          return;
+      }
+
+      this.dialogFormVisible = false;
+
+      this.$nextTick(() => {
+        this.initRowDraggable();
+      });
+    },
+
+    // 获取默认显示字段
+    getDefaultDisplayFields() {
+      this.tableColumns = [
+        {
+          columnLabel: '展示字段一',
+          columnName: 'example1',
+          widgetType: 'textarea'
+        },
+        {
+          columnLabel: '展示字段二',
+          columnName: 'example2',
+          widgetType: 'number'
+        },
+        {
+          columnLabel: '展示字段三',
+          columnName: 'example3',
+          widgetType: 'radio'
+        },
+      ];
+
+      this.tableData = [
+        {
+          id: 1,
+          example1: '示例数据1',
+          example2: 100,
+          example3: '单选1'
+        },
+        {
+          id: 2,
+          example1: '示例数据2',
+          example2: 200,
+          example3: '单选2'
+        },
+        {
+          id: 3,
+          example1: '示例数据3',
+          example2: 300,
+          example3: '单选3'
+        },
+      ];
+
+      this.$nextTick(() => {
+        this.initRowDraggable();
+      });
+    },
+
+    // 获取默认数据
+    getDefaultData(tableColumns) {
+      this.tableData = [];
+      for (let i = 1; i < 4; i++) {
+        const data = { id: i };
+        tableColumns.forEach(cur => {
+          switch (cur.widgetType) {
+            case 'number':
+              data[cur.columnName] = i;
+              break;
+            case 'radio':
+              data[cur.columnName] = `单选${i}`;
+              break;
+            case 'checkbox':
+              data[cur.columnName] = [`复选框${i}`];
+              break;
+            case 'select':
+              data[cur.columnName] = `选项${i}`;
+              break;
+            case 'time':
+              data[cur.columnName] = '18:40';
+              break;
+            case 'time-range':
+              data[cur.columnName] = [new Date(2025, 9, 29, 8, 40), new Date(2025, 9, 29, 9, 40)];
+              break;
+            case 'date':
+              data[cur.columnName] = '2025-09-29';
+              break;
+            case 'date-range':
+              data[cur.columnName] = ['2025-09-29', '2025-10-07'];
+              break;
+            case 'switch':
+              data[cur.columnName] = i % 2 === 0 ? '开' : '关';
+              break;
+            default:
+              data[cur.columnName] = `示例数据${i}`;
+              break;
+          }
+        });
+        this.tableData.push(data);
+      }
+    },
+
+    // 初始化显示字段
+    initDisplayFields(subFormId) {
+      const self = this;
+      if(this.field.options.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)) {
+                self.allColumns = resp.data.data;
+                self.tableColumns = self.allColumns.filter(column => self.displayFields.includes(column.columnName)).map(item =>{
+                  return {
+                    columnName: item.columnName,
+                    columnLabel: item.columnLabel,
+                    widgetType: item.widgetType
+                  }
+                });
+                self.tableColumns.length > 0 ? self.getDefaultData(self.tableColumns) : self.getDefaultDisplayFields();
+              } else {
+                self.getDefaultDisplayFields();
+                console.error(resp.data.message);
+              }
+            })
+            .catch(err => {
+              self.getDefaultDisplayFields();
+              console.error(err);
+            });
+      } else {
+        this.getDefaultDisplayFields();
+      }
+      this.$nextTick(() => {
+        this.initRowDraggable();
+      });
+    },
+  },
+  watch: {
+    'field.options.operList'(newValue) {
+      this.operList = newValue;
+      this.initRowDraggable();
+    },
+    'field.options.displayFields'(newValue) {
+      const self = this;
+      self.displayFields = newValue;
+      if (self.field.options.displayFields && !self.allColumns){
+        this.initDisplayFields(self.field.options.subFormId);
+        return
+      }
+      self.tableColumns = self.allColumns.filter(column => self.displayFields.includes(column.columnName)).map(item =>{
+        return {
+          columnName: item.columnName,
+          columnLabel: item.columnLabel,
+          widgetType: item.widgetType
+        }
+      });
+      self.tableColumns.length > 0 ? self.getDefaultData(self.tableColumns) : self.getDefaultDisplayFields();
+    },
+    'field.options.subFormId'(newValue) {
+      this.initDisplayFields(newValue);
+    },
+    // 监听表格数据变化，确保新数据行能被正确初始化拖拽
+    'tableData': {
+      handler() {
+        this.$nextTick(() => {
+          this.initRowDraggable();
+        });
+      },
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
+
+.full-width-input {
+  width: 100% !important;
+}
+
+.sub-form-table-button {
+  float: right;
+  margin: 8px;
+}
+.edit-form-item{
+  margin-top: 16px;
+}
+
+</style>