cloud-web-corejs 1.1.0-dev.6 → 1.1.0-dev.60

package/src/components/xform/form-render/container-item/data-table-item.vue

@@ -1,347 +1,352 @@
-<template>
-  <vxe-grid
-    :ref="widget.id"
-    v-bind="vxeOption"
-    :auto-resize="true"
-    v-show="!widget.options.hidden"
-    @resizable-change="$vxeTableUtil.onColumnWitchChange"
-    @custom="$vxeTableUtil.customHandle"
-    @checkbox-change="handleCheckboxChange"
-    @checkbox-all="handleCheckboxAll"
-    @cell-dblclick="handleCellDblclick"
-    :class="dataTableConfig.class"
-    :data="fieldModel"
-    v-on="eventConfig"
-  >
-    <template #form>
-      <tableForm
-        v-if="widget.options.isQueryTable"
-        :formData.sync="formModel"
-        :xform="true"
-        @searchEvent="searchEvent"
-        @resetEvent="resetEvent"
-        @advancedClear="advancedClear"
-        @settingConfirm="tableFormSettingConfirm"
-      >
-        <template #buttonLeft>
-          <template v-if="!!widget.buttons && widget.buttons.length > 0">
-            <template v-for="(subWidget, swIdx) in widget.buttons">
-              <template v-if="'container' === subWidget.category">
-                <component
-                  :is="subWidget.type + '-item'"
-                  :widget="subWidget"
-                  :key="swIdx"
-                  :parent-list="widget.buttons"
-                  :index-of-parent-list="swIdx"
-                  :parent-widget="widget"
-                >
-                  <!-- 递归传递插槽！！！ -->
-                  <template
-                    v-for="slot in Object.keys($scopedSlots)"
-                    v-slot:[slot]="scope"
-                  >
-                    <slot :name="slot" v-bind="scope" />
-                  </template>
-                </component>
-              </template>
-              <template v-else>
-                <component
-                  :is="subWidget.type + '-widget'"
-                  :field="subWidget"
-                  :designer="null"
-                  :key="swIdx"
-                  :parent-list="widget.buttons"
-                  :index-of-parent-list="swIdx"
-                  :parent-widget="widget"
-                >
-                  <!-- 递归传递插槽！！！ -->
-                  <template
-                    v-for="slot in Object.keys($scopedSlots)"
-                    v-slot:[slot]="scope"
-                  >
-                    <slot :name="slot" v-bind="scope" />
-                  </template>
-                </component>
-              </template>
-            </template>
-          </template>
-        </template>
-        <template #buttonRight>
-          <vxe-button
-            icon="el-icon-brush"
-            class="button-sty"
-            @click="handleResetClick"
-            type="text"
-            status="primary"
-            plain
-            >{{ $t1("刷新") }}
-          </vxe-button>
-          <vxe-button
-            status="warning"
-            icon="el-icon-search"
-            class="button-sty"
-            @click="handleSearchClick"
-          >
-            {{ $t2("搜索") }}
-          </vxe-button>
-        </template>
-
-        <template
-          v-for="(subWidget, swIdx) in widget.widgetList"
-          v-slot:[subWidget.options.name]
-        >
-          <component
-            v-if="'container' !== subWidget.category"
-            :key="swIdx"
-            :is="subWidget.type + '-widget'"
-            :field="subWidget"
-            :designer="null"
-            :parent-list="subWidget.widgetList"
-            :parent-widget="widget"
-          >
-            <!-- 递归传递插槽！！！ -->
-            <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
-              <slot :name="slot" v-bind="scope" />
-            </template>
-          </component>
-        </template>
-
-        <template #searchWidget="{ searchColumn }">
-          <component
-            :is="searchColumn.widget.type + '-widget'"
-            :field="searchColumn.widget"
-            :designer="null"
-            :parent-list="searchColumn.widget.widgetList"
-            :parent-widget="searchColumn.widget"
-            formItemType="vxe-form-item"
-          >
-            <!-- 递归传递插槽！！！ -->
-            <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
-              <slot :name="slot" v-bind="scope" />
-            </template>
-          </component>
-        </template>
-      </tableForm>
-      <treeMoveDialog
-        v-if="showTreeMoveDialog"
-        :visiable.sync="showTreeMoveDialog"
-        :rows.sync="sortRows"
-        :parent-target="_self"
-        @confirm="confirmTreeMoveDialog"
-      ></treeMoveDialog>
-    </template>
-    <template #widget="obj">
-      <template v-if="!!getTableColumnWidget(obj)">
-        <template v-if="obj.column.params.widget.type == 'status'">
-          <template
-            v-for="(item, index) in getTableColumnWidget(obj).options.statusParam"
-          >
-            <template v-if="isShowColumnStatusWidget(obj, item)">
-              <span
-                v-if="
-                  getTableColumnWidget(obj).options.formScriptEnabled ||
-                  getTableColumnWidget(obj).options.commonAttributeEnabled
-                "
-                :key="getTableColumnWidget(obj).id + '-' + index"
-                >{{ getI18nLabel(item[getTableColumnStatusWidgetLabelKey(obj)]) }}</span
-              >
-              <span
-                v-else
-                :key="getTableColumnWidget(obj).id + '-' + index"
-                class="list-tag"
-                :class="item.type"
-                >{{ getI18nLabel(item[getTableColumnStatusWidgetLabelKey(obj)]) }}</span
-              >
-            </template>
-          </template>
-        </template>
-        <component
-          v-else
-          :is="getColumnWidgetName(obj.column.params.widget)"
-          :field="getTableColumnWidget(obj)"
-          :form-model="globalModel.formModel"
-          :designer="null"
-          :key="
-            obj.rowIndex +
-            '-' +
-            (getTableColumnWidget(obj) && getTableColumnWidget(obj).id)
-          "
-          :parent-widget="widget"
-          :columnConfig="obj.column.params.columnConfig"
-          :subFormRowIndex="obj.rowIndex"
-          :formItemProp="getColumnProp(obj)"
-          :subFormRowId="obj.row._X_ROW_KEY"
-          :tableParam="obj"
-        >
-          <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
-            <slot :name="slot" v-bind="scope" />
-          </template>
-        </component>
-      </template>
-    </template>
-    <template #widgetList="obj">
-      <div>
-        <template v-for="(fieldWidget, index) in obj.column.params.widgetList">
-          <component
-            v-if="!!fieldSchemaMap[obj.row._X_ROW_KEY] && !!obj.row._X_ROW_KEY"
-            :is="getColumnWidgetName(fieldWidget)"
-            v-bind="getRowWidgetOption(obj, fieldWidget)"
-            :form-model="globalModel.formModel"
-            :designer="null"
-            :key="obj.rowIndex + '-' + getRowWidgetKey(obj, fieldWidget)"
-            :parent-widget="widget"
-            :columnConfig="obj.column.params.columnConfig"
-            :subFormRowIndex="obj.rowIndex"
-            :subFormRowId="obj.row._X_ROW_KEY"
-            :formItemProp="getColumnProp2(fieldWidget, obj)"
-            :tableParam="obj"
-          >
-            <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
-              <slot :name="slot" v-bind="scope" :tableParam="obj" />
-            </template>
-          </component>
-        </template>
-      </div>
-    </template>
-    <template #editWidget="obj">
-      <component
-        v-if="!!fieldSchemaMap[obj.row._X_ROW_KEY]"
-        :is="getColumnWidgetName(obj.column.params.editWidget)"
-        :field="fieldSchemaMap[obj.row._X_ROW_KEY][obj.column.params.editWidget.id]"
-        :form-model="globalModel.formModel"
-        :designer="null"
-        :key="
-          obj.rowIndex +
-          '-' +
-          fieldSchemaMap[obj.row._X_ROW_KEY][obj.column.params.editWidget.id].id
-        "
-        :parent-widget="widget"
-        :columnConfig="obj.column.params.columnConfig"
-        :subFormRowIndex="obj.rowIndex"
-        :subFormRowId="obj.row._X_ROW_KEY"
-        :formItemProp="getColumnProp(obj, true)"
-        :tableParam="obj"
-      >
-        <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
-          <slot :name="slot" v-bind="scope" />
-        </template>
-      </component>
-    </template>
-    <template #editTreeButtonGroup="obj">
-      <div class="cell-operate">
-        <template v-if="getGridTable().isActiveByRow(obj.row)">
-          <a @click="saveEditRow(obj)" class="a-link" data-tit="保存">
-            <el-tooltip
-              :enterable="false"
-              effect="dark"
-              content="保存"
-              placement="top"
-              popper-class="tooltip-skin"
-              ><i class="el-icon-circle-check"></i
-            ></el-tooltip>
-          </a>
-          <a
-            @click="cancleRowEvent(obj)"
-            class="a-link"
-            data-tit="取消行编辑"
-            v-if="hasSaveRow(obj.row)"
-          >
-            <el-tooltip
-              :enterable="false"
-              effect="dark"
-              content="取消行编辑"
-              placement="top"
-              popper-class="tooltip-skin"
-              ><i class="el-icon-circle-close"></i
-            ></el-tooltip>
-          </a>
-          <a
-            @click="removeEditRow(obj)"
-            class="a-link"
-            data-tit="删除"
-            v-if="!hasSaveRow(obj.row)"
-          >
-            <el-tooltip
-              :enterable="false"
-              effect="dark"
-              content="删除"
-              placement="top"
-              popper-class="tooltip-skin"
-              ><i class="el-icon-delete"></i
-            ></el-tooltip>
-          </a>
-        </template>
-        <template v-else>
-          <a
-            class="a-link"
-            data-tit="新增"
-            @click="addEditRow(null, obj)"
-            v-if="widget.options.isTreeTable && canShowRowAdd(obj)"
-          >
-            <el-tooltip
-              :enterable="false"
-              effect="dark"
-              content="新增"
-              placement="top"
-              popper-class="tooltip-skin"
-              ><i class="el-icon-circle-plus-outline"></i
-            ></el-tooltip>
-          </a>
-          <a
-            @click="editRowEvent(obj)"
-            class="a-link"
-            data-tit="行编辑"
-            v-if="canShowRowEdit(obj)"
-          >
-            <el-tooltip
-              :enterable="false"
-              effect="dark"
-              content="行编辑"
-              placement="top"
-              popper-class="tooltip-skin"
-              ><i class="el-icon-edit-outline"></i
-            ></el-tooltip>
-          </a>
-        </template>
-      </div>
-    </template>
-  </vxe-grid>
-</template>
-
-<script>
-import FieldComponents from "../../../../components/xform/form-designer/form-widget/field-widget/index";
-import dataTableMixin from "./data-table-mixin.js";
-import tableForm from "../../../../components/table/tableForm.vue";
-import treeMoveDialog from "../../../../components/xform/form-designer/form-widget/dialog/treeMoveDialog.vue";
-
-export default {
-  name: "DataTableItem",
-  components: {
-    tableForm,
-    treeMoveDialog,
-    ...FieldComponents,
-  },
-  mixins: [dataTableMixin],
-};
-</script>
-
-<style lang="scss" scoped>
-.field-wrapper {
-  display: inline-block;
-}
-/* 对比：变更行/新增行整行高亮（vxe 行加 rowClassName） */
-::v-deep .vxe-body--row.xform-compare-row-changed,
-::v-deep .vxe-body--row.xform-compare-row-changed td {
-  background-color: #fdf2e3; /* 橙 - 变更 */
-}
-::v-deep .vxe-body--row.xform-compare-row-changed td:first-child {
-  box-shadow: inset 3px 0 0 #e6a23c;
-}
-::v-deep .vxe-body--row.xform-compare-row-new,
-::v-deep .vxe-body--row.xform-compare-row-new td {
-  background-color: #eef8e3; /* 绿 - 新增 */
-}
-::v-deep .vxe-body--row.xform-compare-row-new td:first-child {
-  box-shadow: inset 3px 0 0 #67c23a;
-}
-</style>
+<template>
+  <vxe-grid
+    :ref="widget.id"
+    v-bind="vxeOption"
+    :style="dataTableStyle"
+    :auto-resize="tableAutoResize"
+    v-show="!widget.options.hidden"
+    @resizable-change="$vxeTableUtil.onColumnWitchChange"
+    @custom="$vxeTableUtil.customHandle"
+    @checkbox-change="handleCheckboxChange"
+    @checkbox-all="handleCheckboxAll"
+    @cell-dblclick="handleCellDblclick"
+    :class="dataTableConfig.class"
+    :data="fieldModel"
+    v-on="eventConfig"
+  >
+    <template #form>
+      <tableForm
+        v-if="widget.options.isQueryTable"
+        :formData.sync="formModel"
+        :xform="true"
+        @searchEvent="searchEvent"
+        @resetEvent="resetEvent"
+        @advancedClear="advancedClear"
+        @settingConfirm="tableFormSettingConfirm"
+      >
+        <template #buttonLeft>
+          <template v-if="!!widget.buttons && widget.buttons.length > 0">
+            <template v-for="(subWidget, swIdx) in widget.buttons">
+              <template v-if="'container' === subWidget.category">
+                <component
+                  :is="subWidget.type + '-item'"
+                  :widget="subWidget"
+                  :key="swIdx"
+                  :parent-list="widget.buttons"
+                  :index-of-parent-list="swIdx"
+                  :parent-widget="widget"
+                >
+                  <!-- 递归传递插槽！！！ -->
+                  <template
+                    v-for="slot in Object.keys($scopedSlots)"
+                    v-slot:[slot]="scope"
+                  >
+                    <slot :name="slot" v-bind="scope" />
+                  </template>
+                </component>
+              </template>
+              <template v-else>
+                <component
+                  :is="subWidget.type + '-widget'"
+                  :field="subWidget"
+                  :designer="null"
+                  :key="swIdx"
+                  :parent-list="widget.buttons"
+                  :index-of-parent-list="swIdx"
+                  :parent-widget="widget"
+                >
+                  <!-- 递归传递插槽！！！ -->
+                  <template
+                    v-for="slot in Object.keys($scopedSlots)"
+                    v-slot:[slot]="scope"
+                  >
+                    <slot :name="slot" v-bind="scope" />
+                  </template>
+                </component>
+              </template>
+            </template>
+          </template>
+        </template>
+        <template #buttonRight>
+          <vxe-button
+            icon="el-icon-brush"
+            class="button-sty"
+            @click="handleResetClick"
+            type="text"
+            status="primary"
+            plain
+            >{{ $t1("刷新") }}
+          </vxe-button>
+          <vxe-button
+            v-if="!widget.options.isNotShowQueryButton"
+            status="warning"
+            icon="el-icon-search"
+            class="button-sty"
+            @click="handleSearchClick"
+          >
+            {{ $t2("搜索") }}
+          </vxe-button>
+        </template>
+
+        <template
+          v-for="(subWidget, swIdx) in widget.widgetList"
+          v-slot:[subWidget.options.name]
+        >
+          <component
+            v-if="'container' !== subWidget.category"
+            :key="swIdx"
+            :is="subWidget.type + '-widget'"
+            :field="subWidget"
+            :designer="null"
+            :parent-list="subWidget.widgetList"
+            :parent-widget="widget"
+          >
+            <!-- 递归传递插槽！！！ -->
+            <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+              <slot :name="slot" v-bind="scope" />
+            </template>
+          </component>
+        </template>
+
+        <template #searchWidget="{ searchColumn }">
+          <component
+            :is="searchColumn.widget.type + '-widget'"
+            :field="searchColumn.widget"
+            :designer="null"
+            :parent-list="searchColumn.widget.widgetList"
+            :parent-widget="searchColumn.widget"
+            formItemType="vxe-form-item"
+          >
+            <!-- 递归传递插槽！！！ -->
+            <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+              <slot :name="slot" v-bind="scope" />
+            </template>
+          </component>
+        </template>
+      </tableForm>
+      <treeMoveDialog
+        v-if="showTreeMoveDialog"
+        :visiable.sync="showTreeMoveDialog"
+        :rows.sync="sortRows"
+        :parent-target="_self"
+        @confirm="confirmTreeMoveDialog"
+      ></treeMoveDialog>
+    </template>
+    <template #widget="obj">
+      <template v-if="!!getTableColumnWidget(obj)">
+        <template v-if="obj.column.params.widget.type == 'status'">
+          <template
+            v-for="(item, index) in getTableColumnWidget(obj).options.statusParam"
+          >
+            <template v-if="isShowColumnStatusWidget(obj, item)">
+              <span
+                v-if="
+                  getTableColumnWidget(obj).options.formScriptEnabled ||
+                  getTableColumnWidget(obj).options.commonAttributeEnabled
+                "
+                :key="getTableColumnWidget(obj).id + '-' + index"
+                >{{ getI18nLabel(item[getTableColumnStatusWidgetLabelKey(obj)]) }}</span
+              >
+              <span
+                v-else
+                :key="getTableColumnWidget(obj).id + '-' + index"
+                class="list-tag"
+                :class="item.type"
+                >{{ getI18nLabel(item[getTableColumnStatusWidgetLabelKey(obj)]) }}</span
+              >
+            </template>
+          </template>
+        </template>
+        <component
+          v-else
+          :is="getColumnWidgetName(obj.column.params.widget)"
+          :field="getTableColumnWidget(obj)"
+          :form-model="globalModel.formModel"
+          :designer="null"
+          :key="
+            obj.rowIndex +
+            '-' +
+            (getTableColumnWidget(obj) && getTableColumnWidget(obj).id)
+          "
+          :parent-widget="widget"
+          :columnConfig="obj.column.params.columnConfig"
+          :subFormRowIndex="obj.rowIndex"
+          :formItemProp="getColumnProp(obj)"
+          :subFormRowId="obj.row._X_ROW_KEY"
+          :tableParam="obj"
+        >
+          <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+            <slot :name="slot" v-bind="scope" />
+          </template>
+        </component>
+      </template>
+    </template>
+    <template #widgetList="obj">
+      <div>
+        <template v-for="(fieldWidget, index) in obj.column.params.widgetList">
+          <component
+            v-if="
+              !!obj.row._X_ROW_KEY &&
+              (!!getRowFieldSchema(obj.row) || !!obj.row._X_EXPORT_ROW)
+            "
+            :is="getColumnWidgetName(fieldWidget)"
+            v-bind="getRowWidgetOption(obj, fieldWidget)"
+            :form-model="globalModel.formModel"
+            :designer="null"
+            :key="obj.rowIndex + '-' + getRowWidgetKey(obj, fieldWidget)"
+            :parent-widget="widget"
+            :columnConfig="obj.column.params.columnConfig"
+            :subFormRowIndex="obj.rowIndex"
+            :subFormRowId="obj.row._X_ROW_KEY"
+            :formItemProp="getColumnProp2(fieldWidget, obj)"
+            :tableParam="obj"
+          >
+            <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+              <slot :name="slot" v-bind="scope" :tableParam="obj" />
+            </template>
+          </component>
+        </template>
+      </div>
+    </template>
+    <template #editWidget="obj">
+      <component
+        v-if="!!getRowFieldSchema(obj.row)"
+        :is="getColumnWidgetName(obj.column.params.editWidget)"
+        :field="getRowFieldSchema(obj.row)[obj.column.params.editWidget.id]"
+        :form-model="globalModel.formModel"
+        :designer="null"
+        :key="
+          obj.rowIndex +
+          '-' +
+          getRowFieldSchema(obj.row)[obj.column.params.editWidget.id].id
+        "
+        :parent-widget="widget"
+        :columnConfig="obj.column.params.columnConfig"
+        :subFormRowIndex="obj.rowIndex"
+        :subFormRowId="obj.row._X_ROW_KEY"
+        :formItemProp="getColumnProp(obj, true)"
+        :tableParam="obj"
+      >
+        <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+          <slot :name="slot" v-bind="scope" />
+        </template>
+      </component>
+    </template>
+    <template #editTreeButtonGroup="obj">
+      <div class="cell-operate">
+        <template v-if="getGridTable().isActiveByRow(obj.row)">
+          <a @click="saveEditRow(obj)" class="a-link" data-tit="保存">
+            <el-tooltip
+              :enterable="false"
+              effect="dark"
+              content="保存"
+              placement="top"
+              popper-class="tooltip-skin"
+              ><i class="el-icon-circle-check"></i
+            ></el-tooltip>
+          </a>
+          <a
+            @click="cancleRowEvent(obj)"
+            class="a-link"
+            data-tit="取消行编辑"
+            v-if="hasSaveRow(obj.row)"
+          >
+            <el-tooltip
+              :enterable="false"
+              effect="dark"
+              content="取消行编辑"
+              placement="top"
+              popper-class="tooltip-skin"
+              ><i class="el-icon-circle-close"></i
+            ></el-tooltip>
+          </a>
+          <a
+            @click="removeEditRow(obj)"
+            class="a-link"
+            data-tit="删除"
+            v-if="!hasSaveRow(obj.row) && canDeleteTableRow(obj)"
+          >
+            <el-tooltip
+              :enterable="false"
+              effect="dark"
+              content="删除"
+              placement="top"
+              popper-class="tooltip-skin"
+              ><i class="el-icon-delete"></i
+            ></el-tooltip>
+          </a>
+        </template>
+        <template v-else>
+          <a
+            class="a-link"
+            data-tit="新增"
+            @click="addEditRow(null, obj)"
+            v-if="widget.options.isTreeTable && canShowRowAdd(obj)"
+          >
+            <el-tooltip
+              :enterable="false"
+              effect="dark"
+              content="新增"
+              placement="top"
+              popper-class="tooltip-skin"
+              ><i class="el-icon-circle-plus-outline"></i
+            ></el-tooltip>
+          </a>
+          <a
+            @click="editRowEvent(obj)"
+            class="a-link"
+            data-tit="行编辑"
+            v-if="canShowRowEdit(obj)"
+          >
+            <el-tooltip
+              :enterable="false"
+              effect="dark"
+              content="行编辑"
+              placement="top"
+              popper-class="tooltip-skin"
+              ><i class="el-icon-edit-outline"></i
+            ></el-tooltip>
+          </a>
+        </template>
+      </div>
+    </template>
+  </vxe-grid>
+</template>
+
+<script>
+import FieldComponents from "../../../../components/xform/form-designer/form-widget/field-widget/index";
+import dataTableMixin from "./data-table-mixin.js";
+import tableForm from "../../../../components/table/tableForm.vue";
+import treeMoveDialog from "../../../../components/xform/form-designer/form-widget/dialog/treeMoveDialog.vue";
+
+export default {
+  name: "DataTableItem",
+  components: {
+    tableForm,
+    treeMoveDialog,
+    ...FieldComponents,
+  },
+  mixins: [dataTableMixin],
+};
+</script>
+
+<style lang="scss" scoped>
+.field-wrapper {
+  display: inline-block;
+}
+/* 对比：变更行/新增行整行高亮（vxe 行加 rowClassName） */
+::v-deep .vxe-body--row.xform-compare-row-changed,
+::v-deep .vxe-body--row.xform-compare-row-changed td {
+  background-color: #fdf2e3; /* 橙 - 变更 */
+}
+::v-deep .vxe-body--row.xform-compare-row-changed td:first-child {
+  box-shadow: inset 3px 0 0 #e6a23c;
+}
+::v-deep .vxe-body--row.xform-compare-row-new,
+::v-deep .vxe-body--row.xform-compare-row-new td {
+  background-color: #eef8e3; /* 绿 - 新增 */
+}
+::v-deep .vxe-body--row.xform-compare-row-new td:first-child {
+  box-shadow: inset 3px 0 0 #67c23a;
+}
+</style>