cloud-web-corejs 1.0.0

package/src/components/xform/form-render/container-item/list-h5-item2.vue

@@ -0,0 +1,1348 @@
+<template>
+  <container-item-wrapper :widget="widget" :class="widget.options.isFullscreen ? 'full-height':''">
+    <div class="h5-header">{{ widget.options.label }}</div>
+    <div class="h5-search-box">
+      <el-input
+        v-model="keyword"
+        placeholder="请选择" class="txt">
+        <i slot="suffix" class="el-input__icon el-icon-search"></i>
+        <el-button slot="append" class="btn" @click="searchEvent">搜索</el-button>
+      </el-input>
+      <div class="icon-screen" @click="openAdvancedSearchDialog"><i class="iconfont icon-chaxuntiaojianshezhi"></i>筛选
+      </div>
+    </div>
+    <div v-if="widget.options.isQueryTable" class="h5-fixed-top-btns" title-width="92px" title-align="right">
+      <el-form label-position="top">
+        <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>
+      </el-form>
+    </div>
+    <div class="h5-list-box">
+      <div v-for="(row,rowIndex) in fieldModel" :key="rowIndex" class="item" @click="itemCheck(row)"
+           :class="{checked:checkItemIds.includes(row.id)}">
+        <div v-if="!widget.options.isQueryTable" class="del-btn" @click.stop="deleteRow(row,rowIndex)"><i
+          class="el-icon-delete"></i></div>
+        <template v-if="vxeOption.columns.length>0">
+          <div class="t1" v-if="widget.options.isQueryTable">
+            <template v-for="(column,columnIndex) in vxeOption.columns.filter((item,index)=>item.isMainFiled)">
+              <b>{{ column.title }}：</b>
+              <span>
+                  <template v-if="!column.params.formatS">
+                    {{ row[column.field] }}
+                  </template>
+                  <template v-else-if="column.params.formatS == 'render'">
+                    {{ column.slots.default({column: column, rowIndex: rowIndex, row: row, items: fieldModel}) }}
+                  </template>
+                  <template v-else-if="column.slots && column.slots.default=='widget'">
+                    <component
+                      :is="getColumnWidgetName(column.params.widget)"
+                      :field="column.params.widget"
+                      :form-model="globalModel.formModel"
+                      :designer="null"
+                      :key="rowIndex"
+                      :parent-widget="widget"
+                      :columnConfig="column.params.columnConfig"
+                      :subFormRowIndex="rowIndex"
+                      :formItemProp="getColumnProp(widget,{column:column,rowIndex:rowIndex,row:row,items:fieldModel})"
+                      :tableParam="{column:column,rowIndex:rowIndex,row:row,items:fieldModel}"
+                    ></component>
+                </template>
+                <template v-else-if="column.params.formatS=='editDelete'">
+                  <a
+                    href="javascript:void(0);"
+                    class="a-link"
+                    @click="deleteRow(row,rowIndex)"
+                  >
+                    <el-tooltip :enterable="false" effect="dark" content="删除" placement="top"
+                                popper-class="tooltip-skin">
+                      <i class="el-icon-delete"/>
+                    </el-tooltip>
+                  </a>
+                </template>
+                <template v-else-if="column.params.formatS=='editButton'">
+                  <a
+                    href="javascript:void(0);"
+                    class="a-link"
+                    @click.stop="openEditDialog(obj.row)"
+                  >
+                    <el-tooltip :enterable="false" effect="dark" content="查看" placement="top"
+                                popper-class="tooltip-skin">
+                      <i class="el-icon-edit"/>
+                    </el-tooltip>
+                  </a>
+                </template>
+                <template v-else>
+                  {{
+                    column.formatter({
+                      cellValue: row[column.field],
+                      column: column,
+                      rowIndex: rowIndex,
+                      row: row,
+                      items: fieldModel
+                    })
+                  }}
+                </template>
+                </span>
+              <!--              <div class="status">未审核</div>-->
+            </template>
+          </div>
+          <div class="t2">
+            <template v-if="!widget.options.isQueryTable || vxeOption.columns.length>1">
+              <template v-for="(column,columnIndex) in vxeOption.columns">
+                <template v-if="(!widget.options.isQueryTable || !column.isMainFiled) && column.showForRow">
+                  <dl>
+                    <div>
+                      <dt>{{ column.title }}：</dt>
+                      <dd>
+                        <template v-if="!column.params.formatS">
+                          {{ row[column.field] }}
+                        </template>
+                        <template v-else-if="column.params.formatS == 'render'">
+                          {{ column.slots.default({column: column, rowIndex: rowIndex, row: row, items: fieldModel}) }}
+                        </template>
+
+                        <template v-else-if="column.slots && column.slots.default=='widget'">
+                          <component
+                            :is="getColumnWidgetName(column.params.widget)"
+                            :field="column.params.widget"
+                            :form-model="globalModel.formModel"
+                            :designer="null"
+                            :key="rowIndex+'-'+columnIndex"
+                            :parent-widget="widget"
+                            :columnConfig="column.params.columnConfig"
+                            :subFormRowIndex="rowIndex"
+                            :formItemProp="getColumnProp(widget,{column:column,rowIndex:rowIndex,row:row,items:fieldModel})"
+                            :tableParam="{column:column,rowIndex:rowIndex,row:row,items:fieldModel}"
+                          ></component>
+                        </template>
+                        <template v-else-if="column.params.formatS=='editDelete'">
+                          <a
+                            href="javascript:void(0);"
+                            class="a-link"
+                            @click.stop="deleteRow(row,rowIndex)"
+                          >
+                            <el-tooltip :enterable="false" effect="dark" content="删除" placement="top"
+                                        popper-class="tooltip-skin">
+                              <i class="el-icon-delete"/>
+                            </el-tooltip>
+                          </a>
+                        </template>
+                        <template v-else-if="column.params.formatS=='editButton'">
+                          <a
+                            href="javascript:void(0);"
+                            class="a-link"
+                            @click.stop="openEditDialog(row)"
+                          >
+                            <el-tooltip :enterable="false" effect="dark" content="查看" placement="top"
+                                        popper-class="tooltip-skin">
+                              <i class="el-icon-edit"/>
+                            </el-tooltip>
+                          </a>
+                        </template>
+                        <template v-else>
+                          {{
+                            column.formatter({
+                              cellValue: row[column.field],
+                              column: column,
+                              rowIndex: rowIndex,
+                              row: row,
+                              items: fieldModel
+                            })
+                          }}
+                        </template>
+                      </dd>
+                    </div>
+                  </dl>
+                </template>
+              </template>
+            </template>
+          </div>
+          <div class="btns">
+            <!-- <div class="checkbox_fl">
+              <el-checkbox></el-checkbox>
+            </div> -->
+            <!--            <a class="btn"><i class="el-icon-delete"/><span>删除</span></a>
+                        <a class="btn"><i class="el-icon-edit"/><span>查看</span></a>-->
+            <template v-if="!!widget.lineButtons && widget.lineButtons.length > 0">
+              <template v-for="(subWidget, swIdx) in widget.lineButtons">
+                <template v-if="'container' === subWidget.category">
+                  <component
+                    :is="subWidget.type + '-item'"
+                    :widget="subWidget"
+                    :key="swIdx"
+                    :parent-list="widget.lineButtons"
+                    :index-of-parent-list="swIdx"
+                    :parent-widget="widget"
+                    :subFormRowIndex="rowIndex"
+                    :tableParam="{rowIndex:rowIndex,row:row,items:fieldModel}"
+                  >
+                    <!-- 递归传递插槽！！！ -->
+                    <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.lineButtons"
+                    :index-of-parent-list="swIdx"
+                    :parent-widget="widget"
+                    :subFormRowIndex="rowIndex"
+                    :tableParam="{rowIndex:rowIndex,row:row,items:fieldModel}"
+                  >
+                    <!-- 递归传递插槽！！！ -->
+                    <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+                      <slot :name="slot" v-bind="scope"/>
+                    </template>
+                  </component>
+                </template>
+              </template>
+            </template>
+          </div>
+        </template>
+
+        <!--        <div class="t1">
+                  <b>订单号：21533666</b>
+                  <div class="status">未审核</div>
+                </div>
+                <div class="t2">
+                  <p>产地：广东佛山</p>
+                  <p>产地：广东佛山</p>
+                  <p>产地：广东佛山</p>
+                </div>-->
+      </div>
+    </div>
+    <div class="vxe-grid" v-if="widget.options.isQueryTable">
+      <div class="vxe-grid&#45;&#45;pager-wrapper">
+        <vxe-pager
+          class="pages-box"
+          :current-page.sync="page.current"
+          :page-size.sync="page.size"
+          :total="page.total"
+          :layouts="['PrevPage', 'Number', 'NextPage']"
+          @page-change="changePageNew"
+        >
+          <template #right>
+                    <span>
+                      <span>当前记录</span>
+                      <span class="f-red"> {{ page.records.length }} </span>
+                      <span>/</span>
+                      <span class="f-red"> {{ page.total }}</span>
+                    </span>
+          </template>
+        </vxe-pager>
+      </div>
+    </div>
+
+
+    <advancedSearchDialog v-if="showAdvancedSearch" :visiable.sync="showAdvancedSearch" class="adSearchForm_all"
+                          :formData="advancedFormData" @confirm="confirmAdvancedSearchDialog" @clear="advancedClear">
+      <template #form>
+        <vxe-form :model="formModel" title-width="102px" :inline="true" class="adSearchForm">
+          <template v-for="(searchColumn,index) in vxeOption.searchColumns">
+            <vxe-form-item>
+              <component
+                :is="getColumnWidgetName(searchColumn.widget)"
+                :field="searchColumn.widget"
+                :form-model="globalModel.formModel"
+                :designer="null"
+                :key="index"
+                :parent-widget="widget"
+              ></component>
+            </vxe-form-item>
+          </template>
+        </vxe-form>
+      </template>
+    </advancedSearchDialog>
+    <el-dialog
+      title="明细详情"
+      :modal-append-to-body="false"
+      :close-on-click-modal="false"
+      :visible.sync="showRowDetailDialog"
+      :modal="false"
+      custom-class="dialog-style h5view-dialog"
+      width="100%"
+      top="0px"
+      v-el-drag-dialog
+      v-el-dialog-center
+      :destroy-on-close="true"
+    >
+      <div class="cont" style="height: calc(100vh - 73px);">
+        <div class="h5-list-box">
+          <div v-for="(row,rowIndex) in [editRow]" :key="rowIndex" class="item">
+            <!--            <div class="del-btn"><i class="el-icon-delete"></i></div>-->
+            <template v-if="vxeOption.columns.length>0">
+              <div class="t1" v-if="widget.options.isQueryTable">
+                <template v-for="(column,columnIndex) in vxeOption.columns.filter((item,index)=>item.isMainFiled)">
+                    <b>{{ column.title }}：</b>
+                    <span>
+                  <template v-if="!column.params.formatS">
+                    {{ row[column.field] }}
+                  </template>
+                  <template v-else-if="column.params.formatS == 'render'">
+                    {{ column.slots.default({column: column, rowIndex: rowIndex, row: row, items: fieldModel}) }}
+                  </template>
+                  <template v-else-if="column.slots && column.slots.default=='widget'">
+                    <component
+                      :is="getColumnWidgetName(column.params.widget)"
+                      :field="column.params.widget"
+                      :form-model="globalModel.formModel"
+                      :designer="null"
+                      :key="rowIndex"
+                      :parent-widget="widget"
+                      :columnConfig="column.params.columnConfig"
+                      :subFormRowIndex="rowIndex"
+                      :formItemProp="getColumnProp(widget,{column:column,rowIndex:rowIndex,row:row,items:fieldModel})"
+                      :tableParam="{column:column,rowIndex:rowIndex,row:row,items:fieldModel}"
+                    ></component>
+                </template>
+                <template v-else-if="column.params.formatS=='editDelete'">
+                  <a
+                    href="javascript:void(0);"
+                    class="a-link"
+                    @click.stop="deleteRow(row,rowIndex)"
+                  >
+                    <el-tooltip :enterable="false" effect="dark" content="删除" placement="top"
+                                popper-class="tooltip-skin">
+                      <i class="el-icon-delete"/>
+                    </el-tooltip>
+                  </a>
+                </template>
+                <template v-else-if="column.params.formatS=='editButton'">
+                  <a
+                    href="javascript:void(0);"
+                    class="a-link"
+                    @click.stop="openEditDialog(obj.row)"
+                  >
+                    <el-tooltip :enterable="false" effect="dark" content="查看" placement="top"
+                                popper-class="tooltip-skin">
+                      <i class="el-icon-edit"/>
+                    </el-tooltip>
+                  </a>
+                </template>
+                <template v-else>
+                  {{
+                    column.formatter({
+                      cellValue: row[column.field],
+                      column: column,
+                      rowIndex: rowIndex,
+                      row: row,
+                      items: fieldModel
+                    })
+                  }}
+                </template>
+                </span>
+                  <!--              <div class="status">未审核</div>-->
+                </template>
+              </div>
+              <div class="t2">
+                <template v-if="!widget.options.isQueryTable || vxeOption.columns.length>1">
+                  <template v-for="(column,columnIndex) in vxeOption.columns">
+                    <template v-if="!widget.options.isQueryTable || !column.isMainFiled">
+                      <dl>
+                        <div>
+                          <dt>{{ column.title }}：</dt>
+                          <dd>
+                            <template v-if="!column.params.formatS">
+                              {{ row[column.field] }}
+                            </template>
+                            <template v-else-if="column.params.formatS == 'render'">
+                              {{
+                                column.slots.default({column: column, rowIndex: rowIndex, row: row, items: fieldModel})
+                              }}
+                            </template>
+
+                            <template v-else-if="column.slots && column.slots.default=='widget'">
+                              <component
+                                :is="getColumnWidgetName(column.params.widget)"
+                                :field="column.params.widget"
+                                :form-model="globalModel.formModel"
+                                :designer="null"
+                                :key="rowIndex+'-'+columnIndex"
+                                :parent-widget="widget"
+                                :columnConfig="column.params.columnConfig"
+                                :subFormRowIndex="rowIndex"
+                                :formItemProp="getColumnProp(widget,{column:column,rowIndex:rowIndex,row:row,items:fieldModel})"
+                                :tableParam="{column:column,rowIndex:rowIndex,row:row,items:fieldModel}"
+                              ></component>
+                            </template>
+                            <template v-else-if="column.params.formatS=='editDelete'">
+                              <a
+                                href="javascript:void(0);"
+                                class="a-link"
+                                @click="deleteRow(row,rowIndex)"
+                              >
+                                <el-tooltip :enterable="false" effect="dark" content="删除" placement="top"
+                                            popper-class="tooltip-skin">
+                                  <i class="el-icon-delete"/>
+                                </el-tooltip>
+                              </a>
+                            </template>
+                            <template v-else-if="column.params.formatS=='editButton'">
+                              <a
+                                href="javascript:void(0);"
+                                class="a-link"
+                                @click="openEditDialog(obj.row)"
+                              >
+                                <el-tooltip :enterable="false" effect="dark" content="查看" placement="top"
+                                            popper-class="tooltip-skin">
+                                  <i class="el-icon-edit"/>
+                                </el-tooltip>
+                              </a>
+                            </template>
+                            <template v-else>
+                              {{
+                                column.formatter({
+                                  cellValue: row[column.field],
+                                  column: column,
+                                  rowIndex: rowIndex,
+                                  row: row,
+                                  items: fieldModel
+                                })
+                              }}
+                            </template>
+                          </dd>
+                        </div>
+                      </dl>
+                    </template>
+                  </template>
+                </template>
+              </div>
+              <div class="btns">
+                <template v-if="!!widget.lineButtons && widget.lineButtons.length > 0">
+                  <template v-for="(subWidget, swIdx) in widget.lineButtons">
+                    <template v-if="'container' === subWidget.category">
+                      <component
+                        :is="subWidget.type + '-item'"
+                        :widget="subWidget"
+                        :key="swIdx"
+                        :parent-list="widget.lineButtons"
+                        :index-of-parent-list="swIdx"
+                        :parent-widget="widget"
+                        :subFormRowIndex="rowIndex"
+                        :tableParam="{rowIndex:rowIndex,row:row,items:fieldModel}"
+                      >
+                        <!-- 递归传递插槽！！！ -->
+                        <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.lineButtons"
+                        :index-of-parent-list="swIdx"
+                        :parent-widget="widget"
+                        :subFormRowIndex="rowIndex"
+                        :tableParam="{rowIndex:rowIndex,row:row,items:fieldModel}"
+                      >
+                        <!-- 递归传递插槽！！！ -->
+                        <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+                          <slot :name="slot" v-bind="scope"/>
+                        </template>
+                      </component>
+                    </template>
+                  </template>
+                </template>
+              </div>
+            </template>
+
+            <!--        <div class="t1">
+                      <b>订单号：21533666</b>
+                      <div class="status">未审核</div>
+                    </div>
+                    <div class="t2">
+                      <p>产地：广东佛山</p>
+                      <p>产地：广东佛山</p>
+                      <p>产地：广东佛山</p>
+                    </div>-->
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </container-item-wrapper>
+</template>
+
+<script>
+import emitter from '../../../../components/xform/utils/emitter';
+import i18n from '../../../../components/xform/utils/i18n';
+import refMixin from '../../../../components/xform/form-render/refMixin';
+import ContainerItemWrapper from './container-item-wrapper';
+import containerItemMixin from './containerItemMixin';
+import FieldComponents from '../../../../components/xform/form-designer/form-widget/field-widget/index';
+import {assembleAxiosConfig, generateId, getReportGlobalMap} from "../../../../components/xform/utils/util";
+import * as formatUtil from "../../../../components/xform/utils/format";
+import render from "../../../../views/user/bill_setting/render.vue";
+
+const baseRefUtil = {
+  emitter,
+  i18n,
+  refMixin,
+  containerItemMixin,
+  formatUtil,
+  assembleAxiosConfig,
+  getReportGlobalMap
+};
+
+export default {
+  name: 'list-h5-item',
+  components: {
+    ...FieldComponents
+  },
+  mixins: [emitter, i18n, refMixin, containerItemMixin],
+  componentName: 'ContainerItem',
+  props: {
+    widget: Object,
+    parentWidget: Object,
+    parentList: Array,
+    indexOfParentList: Number,
+    subFormRowIndex: {
+      type: Number,
+      default: -1
+    },
+    subFormColIndex: {
+      type: Number,
+      default: -1
+    },
+    subFormRowId: {
+      type: String,
+      default: ''
+    }
+  },
+  inject: ['refList', 'sfRefList', 'globalModel', 'getFormConfig', 'getGlobalDsv'],
+  data: function () {
+    let that = this;
+    let pageSize = 2;
+    return {
+      showAdvancedSearch: false,
+      showRowDetailDialog: false,
+      editRow: {},
+      fieldModel: [],
+      selectedIndices: [],
+      /*pageSize: this.widget.options.pagination.pageSize,
+      pageSizes: this.widget.options.pagination.pageSizes,
+      currentPage: this.widget.options.pagination.currentPage,
+      total: this.widget.options.pagination.total,*/
+      formData: {
+        saleOrgName: '',
+        loginAccount: '',
+        mobile: '',
+        enabled: 1
+      },
+      vxeOption: {columns: []},
+      requestAccess: null,
+      columnFormatMap: {
+        editInput: 'input',
+        editNumber: 'number',
+        editDate: 'date',
+        editSelect: 'select',
+        editSearch: 'vabsearch',
+        button: 'button'
+      },
+      dataTableConfig: {},
+      advancedFormData: {},
+
+      pageSize: pageSize,
+      page: {
+        current: 1,
+        size: pageSize,
+        total: 0,
+        records: [],
+      },
+      keyword: null,
+
+      checkItemIds: []
+    };
+  },
+  watch: {
+    fieldModel(val) {
+      this.formModel[this.fieldKeyName] = val || [];
+    }
+  },
+  computed: {
+    formConfig: function () {
+      return this.getFormConfig();
+    },
+    paginationLayout: function () {
+      return this.widget.options.smallPagination ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper';
+    },
+    customClass: function () {
+      return this.widget.options.customClass || '';
+    },
+    singleRowSelectFlag: function () {
+      return !this.widget.options.showCheckBox;
+    },
+    buttonsColumnFixed: function () {
+      return void 0 === this.widget.options.buttonsColumnFixed ? 'right' : !!this.widget.options
+        .buttonsColumnFixed && this.widget.options.buttonsColumnFixed;
+    },
+    columns() {
+      let tableColumns = this.widget.options.tableColumns;
+      let newColumns = [];
+      /*newColumns.push({
+        type: 'checkbox',
+        width: 48,
+        resizable: false,
+        fixed: 'left'
+      });*/
+
+      let firstColumn = tableColumns.find(column => {
+        return !!column.prop && !!column.showForRow;
+      });
+      let mainFiled = firstColumn?.prop;
+
+      let formRef = this.getFormRef();
+      let dateConfig = this.$baseLodash.cloneDeep(formRef.getFieldWidgetByType('date').options)
+      tableColumns.forEach(t => {
+        let columnOption;
+        let widget;
+        let columnWidgetConfig = this.getColumnWidgetConfig(t);
+        let {columnSelectedWidget, columnEditFields} = columnWidgetConfig;
+        if (columnSelectedWidget) {
+          widget = columnSelectedWidget
+          columnOption = widget.options;
+        } else {
+          columnOption = {}
+        }
+
+        let col = {
+          fixed: !!t.fixed && t.fixed,
+          field: t.prop,
+          title: t.label,
+          witdh: t.width,
+          sortable: t.sortable,
+          align: t.align ? t.align : 'center',
+          formatter: this.formatterValue,
+          isMainFiled: mainFiled == t.prop,
+          showForRow: t.showForRow,
+          params: {
+            ...columnOption,
+            widget: widget,
+            formatS: t.formatS,
+            required: t.required || false,
+            columnConfig: t
+          },
+          visible: t.show
+        };
+
+        if (t.formatS == 'render') {
+          let r = t.render ? new Function('params', 'h', t.render) : null;
+          col.slots = {
+            default: (params, h) => {
+              return r ? r.call(this, params, h) : '';
+            }
+          };
+        } else if (columnSelectedWidget) {
+          col.slots = {
+            default: 'widget'
+          };
+        } else if (['editDelete', 'editButton'].includes(t.formatS)) {
+          col.slots = {
+            default: t.formatS
+          };
+        }
+
+        newColumns.push(col);
+      });
+
+      /*if (baseRefUtil.tableConfig && baseRefUtil.tableConfig.className == "list-table") {
+        if (tableColumns.length) {
+          let tableColumn = [tableColumns.length - 1];
+          if (tableColumn.fixed != "right") {
+            newColumns.push({
+              width: 47,
+              title: '',
+              fixed: 'right',
+              sortable: false,
+            });
+          }
+        }
+      }*/
+      return newColumns;
+    },
+    formModel: {
+      cache: !1,
+      get: function () {
+        return this.globalModel.formModel;
+      }
+    },
+    formDataId() {
+      let formRef = this.getFormRef();
+      return formRef.dataId;
+    }
+  },
+  created: function () {
+    if (!this.formModel[this.fieldKeyName]) this.formModel[this.fieldKeyName] = [];
+    this.initRefList();
+    this.handleOnCreated();
+  },
+  mounted: async function () {
+    this.handleOnMounted();
+    this.initTableList();
+  },
+  beforeDestroy: function () {
+    this.unregisterFromRefList();
+  },
+  methods: {
+    openAdvancedSearchDialog() {
+      /*let formData = this.formModel;
+      let advancedFormData = {};
+      this.vxeOption.searchColumns.forEach(form1Field => {
+          let value = formData[form1Field.field];
+          if (value !== null && value !== undefined) {
+            advancedFormData[form1Field.field] = value
+          } else {
+            advancedFormData[form1Field.field] = null
+          }
+      });
+      this.advancedFormData = advancedFormData;*/
+      this.showAdvancedSearch = true;
+    },
+    confirmAdvancedSearchDialog() {
+      let formModel = this.formModel;
+      let advancedFormData = this.advancedFormData;
+      this.vxeOption.searchColumns.forEach(form1Field => {
+        let value = formModel[form1Field.field];
+        if (value !== null && value !== undefined) {
+          advancedFormData[form1Field.field] = value
+        } else {
+          advancedFormData[form1Field.field] = null
+        }
+      });
+      this.searchEvent();
+    },
+    advancedClear() {
+      this.vxeOption.searchColumns.forEach(form1Field => {
+        let widgetRef = this.getWidgetRef(form1Field.widget.options.name)
+        if (widgetRef && widgetRef.setValue) widgetRef.setValue(null);
+      });
+    },
+    setValue(val) {
+      let rows = val || []
+      this.formModel[this.fieldKeyName] = rows;
+      this.fieldModel = rows;
+    },
+    getValue() {
+      return this.formModel[this.fieldKeyName];
+    },
+    getFieldKeyName(widget) {
+      let o = widget.options.name;
+      return (
+        (widget.options.keyNameEnabled
+          && widget.options.keyName)
+        || o
+      );
+    },
+    formatterValue: function ({cellValue, row, column}) {
+      if (cellValue === null || cellValue === undefined) return cellValue;
+
+      if (column.params && column.params.formatS)
+        switch (column.params.formatS) {
+          case 'd1':
+            return baseRefUtil.formatUtil.formatDate1(cellValue);
+          case 'd2':
+            return baseRefUtil.formatUtil.formatDate2(cellValue);
+          case 'd3':
+            return baseRefUtil.formatUtil.formatDate3(cellValue);
+          case 'd4':
+            return baseRefUtil.formatUtil.formatDate4(cellValue);
+          case 'd5':
+            return baseRefUtil.formatUtil.formatDate4(cellValue);
+          case 'n1':
+            return baseRefUtil.formatUtil.formatNumber1(cellValue);
+          case 'n2':
+            return baseRefUtil.formatUtil.formatNumber2(cellValue);
+          case 'n3':
+            return baseRefUtil.formatUtil.formatNumber3(cellValue);
+          case 'n4':
+            return baseRefUtil.formatUtil.formatNumber4(cellValue);
+          case 'n5':
+            return baseRefUtil.formatUtil.formatNumber5(cellValue);
+          case 'n6':
+            return baseRefUtil.formatUtil.formatNumber6(cellValue);
+          case 'n7':
+            return baseRefUtil.formatUtil.formatNumber7(cellValue);
+        }
+      return cellValue;
+    },
+    searchEvent() {
+      // this.getGridTable().commitProxy('reload');
+      this.loadAccessData();
+    },
+    async resetEvent() {
+      let formData = this.formModel;
+      this.keyword = null;
+      this.widget.widgetList && this.widget.widgetList.forEach(subWidget => {
+        let widgetRef = this.getWidgetRef(subWidget.options.name)
+        let fieldKeyName = this.getFieldKeyName(subWidget);
+        formData[fieldKeyName] = null;
+        this.advancedFormData[fieldKeyName] = null;
+        if (widgetRef && widgetRef.setValue) widgetRef.setValue(null);
+      });
+      // this.getGridTable().commitProxy('reload');
+      this.loadAccessData();
+    },
+    openEditDialog(row) {
+      let formRef = this.getFormRef();
+      let parentTarget = formRef.$attrs["parent-target"];
+      parentTarget && parentTarget.$attrs.openEditDialog && parentTarget.$attrs.openEditDialog(row);
+    },
+    initTableList() {
+      let that = this;
+      let path = null;
+      let paramFun = null;
+      // let mainDataSetDTO = null;
+      let requestAccess = this.requestAccess;
+      let tableRef = this.getTableRef();
+      let formDataModel = this.getFormRef().formDataModel;
+      let isQueryTable = this.widget.options.isQueryTable || false;
+      let isDataPage = this.widget.options.accessReturnType == "2";
+      let formCode = this.getFormRef().reportTemplate.formCode;
+      let dataId = this.formDataId;
+      let accessScript = this.widget.options.accessScript;
+      let searchColumns = null;
+      if (isQueryTable) {
+        path = this.getUrl();
+        paramFun = () => {
+          // let conditions = this.getSearchCondition();
+          let conditions = {keyword: this.keyword, ...this.advancedFormData};
+          if (this.widget.options.showPagination) {
+            let searchCount = true;
+            /*let isQueryAllPage = $grid.isQueryAllPage;
+            if (isQueryAllPage == false) {
+              searchCount = false;
+            }*/
+            /*let pager = proxyInfo ? proxyInfo.pager : null;
+            if (pager) {
+              conditions.current = pager.currentPage;
+              conditions.size = pager.pageSize;
+              conditions.searchCount = searchCount;
+            }*/
+          }
+
+          /*let formData = {
+            accessCode: requestAccess.accessCode,
+            conditions: conditions
+          };*/
+          let formData = conditions;
+          return formData;
+        };
+
+        searchColumns = [];
+        let widgetList = this.widget.widgetList;
+        let typeMap = {
+          "input": "input",
+          "number": "number",
+          "inputBatch": "inputBatch",
+          "date": "date"
+        }
+
+        widgetList.forEach(widget => {
+          if ('container' !== widget.category) {
+            let options = widget.options;
+            let type = typeMap[widget.type] || null;
+            searchColumns.push({
+              title: options.label,
+              field: this.getFieldKeyName(widget),
+              type: type,
+              common: true,
+              disabled: options.disabled,
+              defaultValueEnabled: !!type,
+              slot: options.name,
+              widget: widget,
+              formItem: false
+            });
+          }
+        });
+      }
+
+      let formRef = this.getFormRef();
+      let dataTableConfig = formRef.$attrs.dataTableOption || {}
+      this.dataTableConfig = dataTableConfig;
+
+      let tableOption = {
+        vue: this,
+        tableRef: tableRef,
+        tableName: this.widget.options.name,
+        param: paramFun,
+        columns: this.columns,
+        searchColumns: searchColumns,
+        vform: true,
+        config: {
+          height: isQueryTable ? "550px" : this.widget.options.tableHeight,
+          /*pagerConfig: {
+            autoHidden: !this.widget.options.showPagination
+          },*/
+          ...dataTableConfig.config
+        },
+        exportAjax: (param) => {
+          let $grid = this.getGridTable();
+          let pageSize = param.size;
+          let currentPage = param.current;
+          let page = {pageSize, currentPage};
+          return this.vxeOption.config.proxyConfig.ajax.query.call(this, {page, param})
+        }
+      };
+
+      if (isQueryTable) {
+        tableOption.path = path;
+        tableOption.config.proxyConfig = {
+          props: {
+            result: isDataPage ? 'objx.records' : 'objx', // 配置响应结果列表字段
+            total: isDataPage ? 'objx.total' : 'objx.length' // 配置响应结果总页数字段
+          },
+          ajax: {
+            // 接收 Promise 对象
+            query: ({page, sorts, filters, form, param}) => {
+              if (!path) {
+                return;
+              }
+
+              let formData = tableOption.param ? tableOption.param() || {} : {};
+              const queryParams = Object.assign({}, formData);
+
+              // 处理排序条件
+              if (sorts) {
+                const firstSort = sorts[0];
+                if (firstSort) {
+                  queryParams.sort = firstSort.property;
+                  queryParams.order = firstSort.order;
+                }
+              }
+
+              // 处理筛选条件
+              if (filters) {
+                filters.forEach(({property, values}) => {
+                  queryParams[property] = values.join(",");
+                });
+              }
+
+              if (page.pageSize !== undefined) {
+                queryParams["size"] = `${page.pageSize}`;
+                queryParams["current"] = `${page.currentPage}`;
+              }
+
+              /*let $grid = this.getGridTable();
+              let isQueryAllPage = $grid.isQueryAllPage;
+              let pathStr1 = "";
+              if (isQueryAllPage === false) {
+                queryParams.searchCount = false;
+              }*/
+              Object.assign(queryParams, param)
+
+              var reqPath = typeof path == "function" ? path() : path;
+
+              return new Promise((resolve, reject) => {
+                let reqData = {
+                  formCode: formCode,
+                  ...queryParams
+                }
+                if (accessScript) {
+                  let index = 0;
+                  let toDo = () => {
+                    let f = new Function("dataId", "formCode", "param", "done", accessScript);
+                    let done = (res) => {
+                      resolve(res);
+                      if (res.type == "success") {
+                        let rows = res.objx ? res.objx.records || res.objx || [] : [];
+                        this.setValue(rows);
+                        if (res.objx && res.objx.records) {
+                          this.page = res.objx || {};
+                        }
+                        if (tableOption.callback) {
+                          that.$nextTick(() => {
+                            setTimeout(function () {
+                              tableOption.callback(rows);
+                            }, 0);
+                          });
+                        }
+                      } else {
+                        this.setValue([]);
+                      }
+                    }
+                    let r = f.call(that, dataId, formCode, reqData, done);
+                    if (r) {
+                      r.catch(error => {
+                        reject(error);
+                      });
+                    }
+                  };
+                  let loopHandle = () => {
+                    /*if (index < 500 && $grid.tableFormStop === true) {
+                      //阻塞列表查询，或者次数达到500时，自动释放
+                      index++
+                      setTimeout(() => {
+                        loopHandle();
+                      }, 10)
+                    } else {
+                      if ($grid.tableFormStop) $grid.tableFormStop = false;
+                      toDo();
+                    }*/
+                    toDo();
+                  }
+                  loopHandle();
+                } else {
+                  resolve();
+                }
+                /*that.scriptHttp({
+                  options: this.widget.options,
+                  params: queryParams,
+                  callback: (res) => {
+                    resolve(res);
+                    if (res.type == "success") {
+                      let rows = res.objx ? res.objx.records || res.objx || [] : [];
+                      /!*if (tableOption.treeNodeUrl) {
+                        if (rows.length > 0) {
+                          let $t = this.$refs[tableRef];
+                          var treeConditions = $t.originOption.treeConditions || [
+                            "enabled",
+                          ];
+                          let treeFiled = Object.keys(formData).some((key) => {
+                            return (
+                              !treeConditions.includes(key) && formData[key] != null && formData[key] != ""
+                            );
+                          });
+                          if (treeFiled) {
+                            that.$nextTick(() => {
+                              setTimeout(function () {
+                                let isLazy = $t.treeConfig.lazy;
+                                $t.treeConfig.lazy = false;
+                                $t.setAllTreeExpand(true).then(() => {
+                                  let fullAllDataRowMap = $t.$refs.xTable.fullAllDataRowMap;
+                                  let fullData = $t.getTableData().fullData;
+                                  fullData.forEach((lineData) => {
+                                    if (
+                                      $t.$refs.xTable.isTreeExpandByRow(lineData)
+                                    ) {
+                                      var rest = fullAllDataRowMap.get(lineData);
+                                      rest.treeLoaded = true;
+                                    }
+                                  });
+                                  $t.treeConfig.lazy = isLazy;
+                                });
+                              }, 0);
+                            });
+                          } else {
+                            let row = rows[0];
+                            if (row[result.treeConfig.hasChild]) {
+                              that.$nextTick(() => {
+                                setTimeout(function () {
+                                  $t.setTreeExpand(row, true);
+                                }, 0);
+                              });
+                            }
+                          }
+                        }
+                      }*!/
+                      if (tableOption.callback) {
+                        that.$nextTick(() => {
+                          setTimeout(function () {
+                            tableOption.callback(rows);
+                          }, 0);
+                        });
+                      }
+                    }
+                  },
+                  httpConfig: {
+                    error: (error) => {
+                      reject(error);
+                    }
+                  }
+                });*/
+              });
+            }
+          }
+        };
+        tableOption.callback = (rows) => {
+          // this.fieldModel = rows;
+          this.formModel[this.fieldKeyName] = rows
+        }
+      }
+      this.vxeOption = tableOption;
+      this.loadAccessData();
+
+      /*this.$vxeTableUtil.initVxeTable(tableOption).then(opts => {
+        this.vxeOption = opts;
+        /!*if (!isQueryTable) {
+          this.$nextTick(() => {
+            this.loadAccessData();
+          });
+        }*!/
+      });
+      if (!isQueryTable) {
+        this.loadAccessData();
+      }*/
+    },
+    getSearchFormData() {
+      let map = {};
+      let formData = this.globalModel.formModel;
+      let widgetList = this.widget.widgetList;
+      if (!!widgetList && widgetList.length > 0) {
+        let loop = (wItem) => {
+          if (wItem.category === 'container') {
+            loop(wItem);
+          } else {
+            let formField = this.getFieldKeyName(wItem);
+            let vaule = formData[formField];
+            if (vaule !== null && vaule !== undefined && vaule !== '') {
+              map[formField] = vaule;
+            }
+          }
+        };
+        widgetList.forEach(wItem => {
+          loop(wItem);
+        });
+      }
+      return map;
+    },
+    loadTableData(param) {
+      if (this.dataTableConfig?.queryFormDialog !== true) {
+        this.checkItemIds = [];
+      }
+      param = param || {};
+      let pageSize = param.size || this.pageSize;
+      let currentPage = param.current || 1;
+      let page = {pageSize, currentPage};
+      return this.vxeOption.config.proxyConfig.ajax.query.call(this, {page, param})
+    },
+    loadAccessData() {
+      let isQueryTable = this.widget.options.isQueryTable || false;
+      if (isQueryTable) {
+        this.loadTableData({})
+        return;
+      }
+      if (!isQueryTable && !this.formDataId) return;
+
+      let accessScript = this.widget.options.accessScript;
+      let formCode = this.getFormRef().reportTemplate.formCode;
+      if (accessScript) {
+        let f = new Function("dataId", "formCode", "param", "done", accessScript);
+        let toDo = (res) => {
+          let rows = res.objx ? res.objx.records || res.objx || [] : [];
+          // this.fieldModel = rows;
+          this.formModel[this.fieldKeyName] = rows
+          this.fieldModel = rows;
+        }
+
+        f.call(this, this.formDataId, formCode, null, toDo)
+      }
+
+      /*this.scriptHttp({
+        options: this.widget.options,
+        params: {},
+        success: (res) => {
+          let rows = res.objx ? res.objx.records || res.objx || [] : [];
+          this.fieldModel = rows;
+        }
+      });*/
+    },
+    getReqParam(item, dataId, billData) {
+      let param = {};
+      if (item.accessParam) {
+        if (typeof item.accessParam === "string") {
+          let n = new Function('billData', item.accessParam);
+          param = n.call(this, billData);
+        } else {
+          param = item.accessParam
+        }
+      } else {
+        param = {id: dataId}
+      }
+      return param;
+    },
+    async deleteRow(row, rowIndex) {
+      this.fieldModel.splice(rowIndex, 1);
+    },
+    createNewTableData() {
+      let vailColumns = this.widget.options.tableColumns.filter(item => item.prop && item.label);
+      let newData = {};
+      vailColumns.forEach(item => {
+        if (item.formatS == 'editSearch') {
+          newData[item.prop] = null;
+          let vabSearchName = item?.columnOption?.vabSearchName;
+          if (vabSearchName) newData[vabSearchName] = null;
+        } else {
+          newData[item.prop] = null;
+        }
+      });
+      return newData;
+    },
+    addTableData(rows, field) {
+      let formDataModel = this.formModel;
+      let tableRows = this.fieldModel;
+      let fullData = this.fieldModel;
+      let items;
+      if (field) {
+        let keys = fullData.map(item => {
+          return item[field] + "";
+        });
+        items = rows.filter(item => {
+          let value = item[field] + ""
+          return !keys.includes(value);
+        });
+      } else {
+        items = rows;
+      }
+      if (items) {
+        if (items.length) {
+          items.forEach(row => {
+            let newData = this.createNewTableData();
+            Object.assign(newData, row);
+
+            tableRows.push(newData);
+          })
+        }
+      } else {
+        let newData = this.createNewTableData();
+        tableRows.push(newData);
+      }
+      // this.formModel[this.fieldKeyName] = this.$baseLodash(this.fieldModel)
+      // this.fieldModel = tableRows
+      // $grid.loadData(tableRows);
+    },
+    getColumnWidgetConfig(row) {
+      let formRef = this.getFormRef();
+      let formatS = row.formatS
+      let columnSelectedWidget = null;
+      let columnEditFields = null;
+
+      let type = this.columnFormatMap[row.formatS];
+      /*if (type == 'date') {
+        columnEditFields = ['type', 'format', 'valueFormat']
+      } else if (type == 'select') {
+
+      }
+      if (type == 'vabsearch') {
+        columnEditFields = ['vabSearchField', 'formCode', 'formVersion', 'required', 'showFormField', 'onSearchConfirm', 'onSearchClear']
+      }*/
+
+      if (type) {
+        columnSelectedWidget = this.$baseLodash.cloneDeep(formRef.getFieldWidgetByType(type));
+        let tmpId = generateId();
+        let idVal = row.prop ? row.prop : (type + tmpId);
+        columnSelectedWidget.id = idVal;
+        columnSelectedWidget.options.name = idVal;
+        if (row.columnOption && Object.keys(row.columnOption).length) {
+          row.columnOption.required = row.required || false;
+          columnSelectedWidget.options = row.columnOption;
+        } else {
+          columnSelectedWidget.options.required = row.required || false;
+          row.columnOption = columnSelectedWidget.options;
+        }
+        columnSelectedWidget.options.name = row.prop;
+        columnSelectedWidget.options.label = row.label;
+        columnSelectedWidget.options.labelHidden = true;
+      }
+      return {columnSelectedWidget, columnEditFields};
+    },
+    getColumnProp(widget, obj) {
+      let isQueryTable = this.widget.options.isQueryTable || false;
+      if (isQueryTable) {
+        return "false";
+      } else {
+        let propName = this.getFieldKeyName(widget) + '.' + obj.rowIndex + '.' + obj.column.field
+        if (obj.column.params.widget == 'vabsearch') {
+          let vabSearchName = obj.column.params.widget.options.vabSearchName;
+          propName = this.getFieldKeyName(widget) + '.' + obj.rowIndex + '.' + vabSearchName;
+        }
+        return propName;
+      }
+    },
+    getColumnWidgetName(e) {
+      if (e && e.type) {
+        return e.type + '-widget';
+      }
+    },
+    getGridTable() {
+      let $grid = this.$refs[this.getTableRef()];
+      return $grid;
+    },
+    getTableRef() {
+      let tableRef = this.widget.id;
+      return tableRef;
+    },
+    getUrl() {
+      let accessUrl = this.widget.options.accessUrl
+      return accessUrl || (USER_PREFIX + `/form_ins/getFormInsData`);
+    },
+    openRowDetailDialog(row) {
+      /*let isQueryTable = this.widget.options.isQueryTable || false;
+      if(isQueryTable)return;*/
+      this.editRow = row;
+      this.showRowDetailDialog = true;
+    },
+    changePageNew({type, currentPage, pageSize, $event}) {
+      this.loadTableData({
+        size: pageSize + "",
+        current: currentPage + ""
+      })
+    },
+    exportData(option) {
+      let tableRef = this.getTableRef();
+      let serverName = this.getFormRef().reportTemplate.serverName;
+      option.prefix = option.prefix || serverName;
+      this.$excelExport({targetRef: tableRef, ...option})
+    },
+    itemCheck(row) {
+      let dataTableConfig = this.dataTableConfig;
+      if (dataTableConfig) {
+        let checkItemIds = this.checkItemIds;
+        let checked;
+        if (checkItemIds.includes(row.id)) {
+          checked = false;
+          checkItemIds.splice(checkItemIds.indexOf(row.id), 1);
+        } else {
+          checked = true;
+          checkItemIds.push(row.id)
+        }
+        let param = {row, checked};
+        dataTableConfig.onCheckboxChange && dataTableConfig.onCheckboxChange(param);
+      }
+
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>