@qqt-product/system 0.0.1

package/src/lib/components/QcustomConfigEdit/src/QcustomConfigEdit.vue

@@ -0,0 +1,1807 @@
+<template>
+  <div class="page-container">
+    <div class="edit-page">
+      <a-spin size="large" :spinning="confirmLoading">
+        <div class="page-header">
+          <a-steps :current="currentStep" size="small">
+            <a-step title="基本信息" />
+            <a-step title="分组配置" />
+            <a-step title="表头配置" />
+            <a-step title="表行配置" />
+          </a-steps>
+        </div>
+        <div class="page-content">
+          <!--step 1 -->
+          <div class="content-step-one" v-show="currentStep === 0">
+            <!--弱提示-->
+            <a-row :getterr="12" class="p-t-10-px">
+              <a-alert
+                v-if="showBusinessTips == '1'"
+                class="business-tips"
+                message="提示"
+                description="业务模板的版本升级不对历史单据产生影响，如需修改历史单据配置，请直接编辑原模板。"
+                style="margin-bottom: 10px"
+                type="info"
+                @close="alertClose"
+                closable
+                show-icon
+              />
+            </a-row>
+            <!--表格-->
+            <a-form ref="formRef" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" :model="form" class="ant-advanced-rule-form" layout="inline">
+              <a-row :getterr="12">
+                <a-col :span="20">
+                  <a-form-item name="templateNumber" label="模板编号">
+                    <a-input disabled v-model:value="form.templateNumber" placeholder="请输入模板编号" />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="20">
+                  <a-form-item name="templateName" label="模板名称" :rules="[{ required: true, message: '请输入模板名称!' }]">
+                    <a-input v-model:value="form.templateName" placeholder="请输入模板名称" />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="20">
+                  <a-form-item name="businessType" label="业务类型" :rules="[{ required: true, message: '请选择业务类型!' }]">
+                    <q-select
+                      v-model:value="form.businessType"
+                      :busAccount="busAccount"
+                      :disabled="currentEditRow.id ? true : false"
+                      dict-code="srmBusinessType"
+                      placeholder="请选择业务类型"
+                      @change="changeBusinessTypeEvent"
+                    />
+                    <!-- <a-select v-model:value="form.businessType"></a-select> -->
+                  </a-form-item>
+                </a-col>
+                <a-col :span="20">
+                  <a-form-item label="模板排序">
+                    <a-input-number style="width: 100%" v-model:value="form.sortOrder" :min="1" placeholder="按模板排序正序和创建时间倒序进行排序" />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="20">
+                  <a-form-item name=" company" label="公司代码">
+                    <q-select :busAccount="busAccount" v-model:value="form.company" :dict-code="companyCode" placeholder="请选择公司代码" />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="20">
+                  <a-form-item name="purchaseOrg" label="采购组织">
+                    <q-select :busAccount="busAccount" v-model:value="form.purchaseOrg" :dict-code="purchaseOrganization" placeholder="请选择采购组织" />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="20">
+                  <a-form-item name=" purchaseGroup" label="采购组">
+                    <q-select v-model:value="form.purchaseGroup" :dict-code="purchaseGroup" placeholder="请选择采购组" />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="20">
+                  <a-form-item name="editLayout">
+                    <template v-slot:label>
+                      编辑布局
+                      <a-tooltip title="暂business模板支持"> <exclamation-circle-outlined /> </a-tooltip>
+                    </template>
+                    <q-select v-model:value="form.editLayout" dict-code="srmLayout" placeholder="请选择布局样式" />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="20">
+                  <a-form-item name="examineLayout">
+                    <template v-slot:label>
+                      查看/审批布局
+                      <a-tooltip title="暂business模板支持">
+                        <exclamation-circle-outlined />
+                      </a-tooltip>
+                    </template>
+                    <q-select v-model:value="form.examineLayout" dict-code="srmLayout" placeholder="请选择布局样式" />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="20">
+                  <a-form-item name="templateVersion" label="版本号">
+                    <a-input disabled v-model:value="form.templateVersion" />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="20">
+                  <a-form-item name="defaultType" label="是否默认">
+                    <a-switch v-model:checked="form.defaultTypeFlag" @change="changeDefaultType" />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="20">
+                  <a-form-item name="extend" label="扩展">
+                    <q-code-editor-model v-if="currentStep === 0" :value="form.extend ? form.extend : ''" @handleSureClick="codeEditorSureClick"></q-code-editor-model>
+                  </a-form-item>
+                </a-col>
+              </a-row>
+            </a-form>
+            <!-- <a-spin class="skeleton-wrap" name="skeleton"> 正在从缓存拉取数据</a-spin> -->
+          </div>
+          <!--step 2-->
+          <div v-show="currentStep === 1" class="content-step-trow">
+            <div id="groupGrid">
+              <vxe-grid
+                border
+                :row-config="{ useKey: true }"
+                auto-resize
+                resizable
+                row-key
+                column-key
+                highlight-hover-row
+                show-overflow
+                ref="groupGrid"
+                :height="gridHeight"
+                size="mini"
+                :checkbox-config="{ highlight: true, trigger: 'row' }"
+                :columns="groupColumns"
+                :data="groupData"
+                :scrollY="{ enabled: false }"
+                :edit-config="{ trigger: 'click', mode: 'row' }"
+                :edit-rules="groupRules"
+                :toolbar-config="{ slots: { buttons: 'toolbar_buttons' }, perfect: true }"
+                header-align="center"
+                align="center"
+              >
+                <template #drag_btn_default>
+                  <span class="drag-btn" style="cursor: move">
+                    <i class="vxe-icon--menu"></i>
+                  </span>
+                </template>
+                <template #drag_btn_header>
+                  <vxe-tooltip content="按住后可以上下拖动排序" enterable>
+                    <i class="vxe-icon--question"></i>
+                  </vxe-tooltip>
+                </template>
+                <template #group_filter="{ column, $panel }">
+                  <div>
+                    <div v-for="(option, index) in column.filters" :key="index">
+                      <input type="type" v-model="option.data" @input="(evnt) => changeFilterEvent(evnt, option, $panel)" />
+                    </div>
+                  </div>
+                </template>
+                <template #extend_col_render="{ row, column }">
+                  <q-code-editor-model
+                    v-if="currentStep === 1"
+                    :value="row[column.property] ? row[column.property] : ''"
+                    @handleSureClick="
+                      (content:customConfigEdits.MapObjectNoneType) => {
+                        {
+                          row[column.property] = content
+                        }
+                      }
+                    "
+                  ></q-code-editor-model>
+                </template>
+                <template #toolbar_buttons>
+                  <a-button type="primary" @click="() => groupGridAddEvent()"> 添加 </a-button>
+                  <a-button @click="() => gridDeleteEvent('groupGridRef')"> 删除</a-button>
+                </template>
+              </vxe-grid>
+            </div>
+            <!-- <a-spin class="skeleton-wrap" slot="skeleton">{{ $srmI18n(`${$getLangAccount()}#i18n_alert_iKNSMnMWF_76e1a399`, '正在从缓存拉取数据') }}</a-spin> -->
+          </div>
+          <!--step 3-->
+          <div v-show="currentStep === 2" class="content-step-three">
+            <div id="headGrid" @after-enter="headRowDrop">
+              <vxe-grid
+                border
+                auto-resize
+                resizable
+                column-key
+                row-key
+                show-header-overflow
+                highlight-hover-row
+                show-overflow
+                ref="headGrid"
+                :height="gridHeight"
+                size="mini"
+                :checkbox-config="{ highlight: true, trigger: 'row' }"
+                :columns="headColumns"
+                :data="headData"
+                :scrollY="{ enabled: false }"
+                :edit-config="{ trigger: 'click', mode: 'cell', activeMethod: activeCellMethod }"
+                :edit-rules="headRules"
+                :sort-config="{ trigger: 'cell', remote: false }"
+                @edit-actived="editActivedEvent"
+                :toolbar-config="{ slots: { buttons: 'toolbar_buttons' }, perfect: true }"
+                align="center"
+                header-align="center"
+              >
+                <template #drag_btn_default>
+                  <span class="drag-btn" style="cursor: move">
+                    <i class="vxe-icon--menu"></i>
+                  </span>
+                </template>
+                <template #drag_btn_header>
+                  <vxe-tooltip content="按住后可以上下拖动排序" enterable>
+                    <i class="vxe-icon--question"></i>
+                  </vxe-tooltip>
+                </template>
+
+                <template #default_span="{ row, column }">
+                  <span>{{ row[column.property] }}</span>
+                </template>
+
+                <template #fieldName_edit="{ row, column }">
+                  <vxe-input v-if="busAccount == '100000'" v-model:value="row[column.property]" />
+                  <span v-else>{{ row[column.property] }}</span>
+                </template>
+
+                <template #toolbar_buttons>
+                  <a-button type="primary" @click="() => headGridAddEvent()"> 新增 </a-button>
+                  <a-button @click="() => gridDeleteEvent('headGridRef')"> 删除</a-button>
+                  <a-button @click="() => exportHeadEvent('TemplateConfigHeadList', 'head')"> 导出</a-button>
+                </template>
+                <template #custom_render="{ row }">
+                  <a @click="() => showDictModal(row)">{{ row.dictCode || '请选择' }}</a>
+                  <a-icon v-show="row.dictCode" style="margin-left: 6px" type="close-circle" @click="() => removeDictCode(row)"></a-icon>
+                </template>
+
+                <template #switch_render="{ row, column }">
+                  <vxe-switch :disabled="column.property === 'sys' && busAccount !== '100000'" close-value="0" open-value="1" v-model="row[column.property]"></vxe-switch>
+                </template>
+
+                <template #groupCode_filter="{ column, $panel }">
+                  <div>
+                    <div v-for="(option, index) in column.filters" :key="index">
+                      <input type="type" v-model="option.data" @input="(evnt) => changeFilterEvent(evnt, option, $panel)" />
+                    </div>
+                  </div>
+                </template>
+
+                <template #group_filter="{ column, $panel }">
+                  <div>
+                    <div v-for="(option, index) in column.filters" :key="index">
+                      <input type="type" v-model="option.data" @input="(evnt) => changeFilterEvent(evnt, option, $panel)" />
+                    </div>
+                  </div>
+                </template>
+
+                <template #fieldName_filter="{ column, $panel }">
+                  <div>
+                    <div v-for="(option, index) in column.filters" :key="index">
+                      <input type="type" v-model="option.data" @input="(evnt) => changeFilterEvent(evnt, option, $panel)" />
+                    </div>
+                  </div>
+                </template>
+
+                <template #fieldLabel_filter="{ column, $panel }">
+                  <div>
+                    <div v-for="(option, index) in column.filters" :key="index">
+                      <input type="type" v-model="option.data" @input="(evnt) => changeFilterEvent(evnt, option, $panel)" />
+                    </div>
+                  </div>
+                </template>
+
+                <template #extend_col_render="{ row, column }">
+                  <q-code-editor-model
+                    v-if="currentStep === 2"
+                    :value="row[column.property] ? row[column.property] : ''"
+                    @handleSureClick="
+                      (content:customConfigEdits.MapObjectNoneType) => {
+                        {
+                          row[column.property] = content
+                        }
+                      }
+                    "
+                  ></q-code-editor-model>
+                </template>
+
+                <!-- <template #calculate_col_render="{ row, column }">
+                  <q-code-editor-model
+                    :value="row[column.property] ? row[column.property] : ''"
+                    @handleSureClick="
+                      (content:customConfigEdits.MapObjectNoneType) => {
+                        {
+                          row[column.property] = content
+                        }
+                      }
+                    "
+                  ></q-code-editor-model>
+                </template> -->
+
+                <template #summary_render="params">
+                  <vxe-switch close-value="0" open-value="1" @change="rowChangeSummary(params)" v-model="params.row[params.column.property]"></vxe-switch>
+                </template>
+                <template #custom_more_property_render="params">
+                  <a-button @click="showDrawer(params)" type="primary" size="small"> 更多配置</a-button>
+                </template>
+              </vxe-grid>
+            </div>
+            <!-- <a-spin class="skeleton-wrap" slot="skeleton">{{ $srmI18n(`${$getLangAccount()}#i18n_alert_iKNSMnMWF_76e1a399`, '正在从缓存拉取数据') }}</a-spin>  -->
+            <!-- </vue-lazy-component> -->
+          </div>
+          <!--step 4-->
+          <div v-show="currentStep === 3" class="content-step-four">
+            <div id="itemGrid" @after-enter="itemRowDrop">
+              <vxe-grid
+                border
+                auto-resize
+                resizable
+                column-key
+                row-key
+                show-header-overflow
+                highlight-hover-row
+                show-overflow
+                ref="itemGrid"
+                :height="gridHeight"
+                size="mini"
+                :checkbox-config="{ highlight: true, trigger: 'row' }"
+                :columns="itemColumns"
+                :data="itemData"
+                :scrollY="{ enabled: false }"
+                :edit-config="{ trigger: 'click', mode: 'cell', activeMethod: activeCellMethod }"
+                :edit-rules="itemRules"
+                :sort-config="{ trigger: 'cell', remote: false }"
+                @edit-actived="editActivedEvent"
+                :toolbar-config="{ slots: { buttons: 'toolbar_buttons' }, perfect: true }"
+                align="center"
+                header-align="center"
+              >
+                <template #drag_btn_default>
+                  <span class="drag-btn" style="cursor: move">
+                    <i class="vxe-icon--menu"></i>
+                  </span>
+                </template>
+                <template #drag_btn_header>
+                  <vxe-tooltip content="按住后可以上下拖动排序" enterable>
+                    <i class="vxe-icon--question"></i>
+                  </vxe-tooltip>
+                </template>
+
+                <template #default_span="{ row, column }">
+                  <span>{{ row[column.property] }}</span>
+                </template>
+
+                <template #fieldName_edit="{ row, column }">
+                  <vxe-input v-if="busAccount == '100000'" v-model:value="row[column.property]" />
+                  <span v-else>{{ row[column.property] }}</span>
+                </template>
+
+                <template #toolbar_buttons>
+                  <a-button type="primary" @click="() => headGridAddEvent()"> 新增 </a-button>
+                  <a-button @click="() => gridDeleteEvent('headGridRef')"> 删除</a-button>
+                  <a-button @click="() => exportHeadEvent('TemplateConfigHeadList', 'head')"> 导出</a-button>
+                </template>
+                <template #custom_render="{ row }">
+                  <a @click="() => showDictModal(row)">{{ row.dictCode || '请选择' }}</a>
+                  <a-icon v-show="row.dictCode" style="margin-left: 6px" type="close-circle" @click="() => removeDictCode(row)"></a-icon>
+                </template>
+
+                <template #switch_render="{ row, column }">
+                  <vxe-switch :disabled="column.property === 'sys' && busAccount !== '100000'" close-value="0" open-value="1" v-model="row[column.property]"></vxe-switch>
+                </template>
+
+                <template #groupCode_filter="{ column, $panel }">
+                  <div>
+                    <div v-for="(option, index) in column.filters" :key="index">
+                      <input type="type" v-model="option.data" @input="(evnt) => changeFilterEvent(evnt, option, $panel)" />
+                    </div>
+                  </div>
+                </template>
+
+                <template #group_filter="{ column, $panel }">
+                  <div>
+                    <div v-for="(option, index) in column.filters" :key="index">
+                      <input type="type" v-model="option.data" @input="(evnt) => changeFilterEvent(evnt, option, $panel)" />
+                    </div>
+                  </div>
+                </template>
+
+                <template #fieldName_filter="{ column, $panel }">
+                  <div>
+                    <div v-for="(option, index) in column.filters" :key="index">
+                      <input type="type" v-model="option.data" @input="(evnt) => changeFilterEvent(evnt, option, $panel)" />
+                    </div>
+                  </div>
+                </template>
+
+                <template #fieldLabel_filter="{ column, $panel }">
+                  <div>
+                    <div v-for="(option, index) in column.filters" :key="index">
+                      <input type="type" v-model="option.data" @input="(evnt) => changeFilterEvent(evnt, option, $panel)" />
+                    </div>
+                  </div>
+                </template>
+
+                <template #extend_col_render="{ row, column }">
+                  <q-code-editor-model
+                    v-if="currentStep === 3"
+                    :value="row[column.property] ? row[column.property] : ''"
+                    @handleSureClick="
+                      (content:customConfigEdits.MapObjectNoneType) => {
+                        {
+                          row[column.property] = content
+                        }
+                      }
+                    "
+                  ></q-code-editor-model>
+                </template>
+
+                <!-- <template #calculate_col_render="{ row, column }">
+                  <q-code-editor-model
+                    :value="row[column.property] ? row[column.property] : ''"
+                    @handleSureClick="
+                      (content:customConfigEdits.MapObjectNoneType) => {
+                        {
+                          row[column.property] = content
+                        }
+                      }
+                    "
+                  ></q-code-editor-model>
+                </template> -->
+
+                <template #summary_render="params">
+                  <vxe-switch close-value="0" open-value="1" @change="rowChangeSummary(params)" v-model="params.row[params.column.property]"></vxe-switch>
+                </template>
+                <template #custom_more_property_render="params">
+                  <a-button @click="showDrawer(params)" type="primary" size="small"> 更多配置</a-button>
+                </template>
+              </vxe-grid>
+            </div>
+            <!-- <a-spin class="skeleton-wrap" slot="skeleton">{{ $srmI18n(`${$getLangAccount()}#i18n_alert_iKNSMnMWF_76e1a399`, '正在从缓存拉取数据') }}</a-spin>  -->
+            <!-- </vue-lazy-component> -->
+          </div>
+        </div>
+
+        <div class="page-footer">
+          <a-button v-show="currentStep > 0" @click="preSetup"> 上一步</a-button>
+          <a-button v-show="currentStep < 3" type="primary" style="margin-left: 6px" @click="currentStepEmit"> 下一步 </a-button>
+          <a-button v-show="currentStep == 3" style="margin-left: 6px" type="primary" @click="saveEvent('')">保存</a-button>
+          <a-button v-show="currentStep == 3" style="margin-left: 6px" type="primary" @click="saveEvent('publish')"> 生成配置 </a-button>
+          <!-- <a-button v-show="currentStep == 3" style="margin-left: 6px" type="primary" @click="tempaltePreview"> 预览</a-button> -->
+          <a-button type="default" style="margin-left: 6px" @click="handleReturn"> 返回</a-button>
+        </div>
+      </a-spin>
+    </div>
+    <!--新增-->
+    <vxe-modal v-model="visible" width="960" title="字段选择" type="confirm" show-footer @confirm="selectedHeadOk">
+      <vxe-grid border resizable height="350" row-id="id" size="mini" ref="selectGrid" :data="fieldData" :checkbox-config="{ highlight: true, reserve: true, trigger: 'row' }" :columns="fieldColumns">
+        <template #groupCode_filter="{ column, $panel }">
+          <div>
+            <div v-for="(option, index) in column.filters" :key="index">
+              <input type="type" v-model="option.data" @input="(evnt) => changeFilterEvent(evnt, option, $panel)" />
+            </div>
+          </div>
+        </template>
+        <template #fieldName_filter="{ column, $panel }">
+          <div>
+            <div v-for="(option, index) in column.filters" :key="index">
+              <input type="type" v-model="option.data" @input="(evnt) => changeFilterEvent(evnt, option, $panel)" />
+            </div>
+          </div>
+        </template>
+        <template #fieldLabel_filter="{ column, $panel }">
+          <div>
+            <div v-for="(option, index) in column.filters" :key="index">
+              <input type="type" v-model="option.data" @input="(evnt) => changeFilterEvent(evnt, option, $panel)" />
+            </div>
+          </div>
+        </template>
+      </vxe-grid>
+    </vxe-modal>
+    <!--数据字典弹窗-->
+    <AddDictCodeModal ref="dictCodeModal" @ok="fieldSelectOk" />
+    <!--更多配置-->
+    <a-drawer title="扩展属性" placement="right" :destroyOnClose="true" width="640" :visible="drawerVisible" @close="drawerVisible = false">
+      <a-tabs type="card">
+        <a-tab-pane class="tab-pane-business-inner" v-for="tab of commonDevelopTabs" :key="tab.field" :tab="tab.title">
+          <!-- 开发增强 -->
+          <template v-if="tab.field === 'developPlus' && tab.children.length">
+            <!-- 代码编辑器类型 -->
+            <template v-for="(tabItem, verifyIdx) of tab.children">
+              <a-row class="code-editror-flex-row" v-if="codeEditorFields.includes(tabItem.field)" :key="verifyIdx">
+                <a-row class="code-editror-flex-row" style="margin-bottom: 8px; margin-top: 8px">
+                  <span>{{ tabItem.title }}</span
+                  >:<a-button style="margin-left: 4px" size="small" @click="showSample(tabItem.field)">示例</a-button>
+                </a-row>
+                <a-row class="code-editror-flex-row">
+                  <q-code-editor-model
+                    showLabel="textarea"
+                    :value="currentDrawer[tabItem.field] ? currentDrawer[tabItem.field] : ''"
+                    @handleSureClick="
+                      (content:customConfigEdits.MapObjectNoneType) => {
+                        {
+                          currentDrawer[tabItem.field] = content
+                        }
+                      }
+                    "
+                  ></q-code-editor-model>
+                </a-row>
+              </a-row>
+              <!-- 计算公式 -->
+              <a-row class="code-editror-flex-row" v-if="tabItem.field === 'formula'" :key="verifyIdx">
+                <a-row class="verify-config code-editror-flex-ro" style="margin-bottom: 8px; margin-top: 8px">
+                  <span>{{ tabItem.title }}</span
+                  >:
+                  <a-button :disabled="currentDrawer.fieldType !== 'computed'" style="margin-left: 4px" size="small" @click="showSample('formula')">示例</a-button>
+                </a-row>
+                <a-row class="verify-config code-editror-flex-row">
+                  <q-code-editor-model
+                    showLabel="textarea"
+                    :disabled="currentDrawer.fieldType !== 'computed'"
+                    :value="currentDrawer[tabItem.field] ? currentDrawer[tabItem.field] : ''"
+                    @handleSureClick="
+                      (content:customConfigEdits.MapObjectNoneType) => {
+                        {
+                          currentDrawer[tabItem.field] = content
+                        }
+                      }
+                    "
+                  ></q-code-editor-model>
+                </a-row>
+              </a-row>
+            </template>
+          </template>
+          <!-- 开关类型 -->
+          <template v-if="tab.field === 'switchConfig' && tab.children.length">
+            <div class="switch-config" v-if="tab.children.length >= 2 && currentStep == 3">
+              <template v-for="(tabItem, index) of tab.children">
+                <div v-if="switchFields.includes(tabItem.field)" class="switch-config-item" :key="index">
+                  <div>
+                    {{ tabItem.title }}
+                    <a-tooltip v-if="tabItem.helpText" :title="tabItem.helpText">
+                      <a-icon type="question-circle-o" />
+                    </a-tooltip>
+                  </div>
+                  <q-switch :disabled="tabItem.disabled || (tabItem.field === 'sys' && busAccount !== '100000')" :configData="currentDrawer" v-model="currentDrawer[tabItem.field]" />
+                </div>
+                <div v-if="tabItem.field === 'fold' && currentStep == 3" class="switch-config-item" :key="index">
+                  <div>
+                    {{ tabItem.title }}
+                    <a-tooltip v-if="tabItem.helpText" :title="tabItem.helpText">
+                      <a-icon type="question-circle-o" />
+                    </a-tooltip>
+                  </div>
+                  <q-switch :disabled="tabItem.disabled" :configData="currentDrawer" v-model="currentDrawer[tabItem.field]" />
+                </div>
+                <div v-if="tabItem.field === 'sum'" class="switch-config-item" :key="index">
+                  <div>{{ tabItem.title }}</div>
+                  <q-switch @change="changeSummary(currentDrawer)" :configData="currentDrawer" v-model="currentDrawer[tabItem.field]" />
+                </div>
+                <div v-if="tabItem.field === 'fixType' && currentStep == 3" class="switch-config-item" :key="index">
+                  <div>{{ tabItem.title }}</div>
+                  <q-radio @change="changeFixSummary(currentDrawer)" :configData="currentDrawer" v-model="currentDrawer[tabItem.field]" dictCode="fixType" />
+                </div>
+              </template>
+            </div>
+            <div class="switch-config" v-else>
+              <template>
+                <div>暂无配置</div>
+              </template>
+            </div>
+          </template>
+          <template v-if="tab.field === 'verifyConfig' && tab.children.length">
+            <a-row v-for="(tabItem, verifyIdx) of tab.children" class="verify-config" :key="verifyIdx">
+              <template v-if="tabItem.field === 'dataFormat'">
+                <a-col :span="6" class="tab-clo-left"> {{ tabItem.title }}: </a-col>
+                <a-col :span="18">
+                  <dataFormatComponent :configData="currentDrawer" :tabInfo="tabItem" @change="(newValue) => (currentDrawer[tabItem.field] = newValue)" :value="currentDrawer[tabItem.field]" />
+                </a-col>
+              </template>
+              <template v-if="tabItem.field === 'regex'">
+                <a-col :span="6" class="tab-clo-left"> {{ tabItem.title }}: </a-col>
+                <a-col :span="18">
+                  <regexComponent
+                    :configData="currentDrawer"
+                    :tabInfo="tabItem"
+                    @updateInfo="
+                      ({ msg }) => {
+                        currentDrawer.alertMsg = msg
+                      }
+                    "
+                    :value="currentDrawer[tabItem.field]"
+                    @change="
+                      ({ msg }) => {
+                        currentDrawer[tabItem.field] = msg
+                      }
+                    "
+                  />
+                </a-col>
+              </template>
+              <template v-if="tabItem.field === 'alertMsg'">
+                <a-col :span="6" class="tab-clo-left"> {{ tabItem.title }}: </a-col>
+                <a-col :span="18">
+                  <a-input
+                    v-model:value="currentDrawer[tabItem.field]"
+                    @change="
+                      () => {
+                        currentDrawer.alertMsgI18nKey = ''
+                      }
+                    "
+                  />
+                </a-col>
+              </template>
+              <template v-if="tabItem.field === 'alertMsgI18nKey'">
+                <a-col :span="6" class="tab-clo-left"> {{ tabItem.title }}: </a-col>
+                <a-col :span="18">
+                  <a-input v-model:value="currentDrawer[tabItem.field]" />
+                </a-col>
+              </template> </a-row
+          ></template>
+        </a-tab-pane>
+      </a-tabs>
+    </a-drawer>
+    <!--更多配置实例-->
+
+    <!-- <codemirror v-if="editorModalFlag" v-model="sampleCode" :options="editorOption"> </codemirror> -->
+    <q-code-editor-model
+      zIndex="1001"
+      :isAllowToOpenMode="true"
+      v-if="editorModalFlags"
+      :value="sampleCode ? sampleCode : ''"
+      @handleSureColse="editorModalFlags = false"
+      @handleSureClick="sampleSureClick"
+    ></q-code-editor-model>
+    <!-- {{ currentRow }} -->
+    <!--预览功能-->
+    <TempalePreviewModal :currentEditRow="currentRow" v-model:openTure="perviewOpen" />
+  </div>
+</template>
+
+<script lang="ts">
+//JS引入
+import { defineComponent, reactive, inject, onMounted, toRefs, nextTick, shallowReactive } from 'vue'
+import Sortable from 'sortablejs'
+//组件
+import { message } from '@qqt-product/ui'
+import AddDictCodeModal from '../component/AddDictCodeModal.vue'
+import dataFormatComponent from '../component/dataFormatComponent'
+import regexComponent from '../component/regexComponent'
+import TempalePreviewModal from '../component/TempalePreviewModal.vue'
+//ts
+import * as customConfigEdits from './types'
+import type { VxeTableDefines, VxeGridDefines, VxeGlobalRendererHandles } from 'vxe-table'
+import { useConfigData } from './useConfigData'
+import { useConfigComputed } from './useConfigComputed'
+import { useConfigMethods, useConfigElsAccountMethods, useConigApiMethods } from './useConfigMethods'
+import { useColumnSlots } from './QcustomConfigRender'
+import { EditSample, url } from './useConstant'
+import qqtUtils from '@qqt-product/utils'
+export default defineComponent({
+  name: 'QcustomConfigEdit',
+  emits: ['handleReturn'],
+  components: {
+    AddDictCodeModal,
+    dataFormatComponent,
+    regexComponent,
+    TempalePreviewModal,
+  },
+  props: {
+    busAccount: {
+      type: String,
+      default: '100000',
+    },
+    currentEditRow: {
+      type: Object,
+      default() {
+        return {
+          id: '',
+        }
+      },
+    },
+  },
+
+  setup(props, { emit }) {
+    //inject
+    const qHttp = inject(customConfigEdits.INJECT_HTTP) as customConfigEdits.HttpClient
+    const { currentEditRow, busAccount } = toRefs(props)
+    //常量
+
+    /*
+    data
+     */
+    const {
+      switchFields,
+      nowFieldType,
+      editorModalFlags,
+      codeEditorFields,
+      drawerVisible,
+      currentDictRow,
+      dictCodeModal,
+      currentDrawer,
+      selectGrid,
+      formRef,
+      groupGrid,
+      form,
+      confirmLoading,
+      currentStep,
+      companyCode,
+      purchaseOrganization,
+      purchaseGroup,
+      groupData,
+      headGrid,
+      fieldTypeOptain,
+      fieldData,
+      visible,
+      currentItemGrid,
+      sampleCode,
+      itemGrid,
+      remoteJsFilePath,
+      perviewOpen,
+      currentRow,
+    } = useConfigData()
+
+    let { headData, itemData, headRules, itemRules } = useConfigData()
+    const { right_header, defaultValue_edit, defaultValue_header, purchaseOperation_defult, purchaseOperation_edit, saleOperation_default, saleOperation_edit, defaultValue_default } =
+      useColumnSlots(busAccount)
+    const { filterFieldNameMethod, removeDictCode, filterGroupCodeMethod, filterFieldLabelMethod, setGridValeByField, changeFilterEvent } = useConfigMethods()
+    const { activeCellMethod } = useConfigElsAccountMethods(busAccount)
+    const { handleExportXls } = useConigApiMethods(qHttp)
+    const groupColumns = reactive<VxeTableDefines.ColumnOptions[]>([
+      {
+        width: 60,
+        fixed: 'left',
+        slots: {
+          // 使用插槽模板渲染
+          default: 'drag_btn_default',
+          header: 'drag_btn_header',
+        },
+      },
+      { type: 'checkbox', width: 40 },
+      { field: 'sortOrder', title: '排序', align: 'center', width: 60 },
+      {
+        field: 'groupName',
+        title: '分组名',
+        editRender: {
+          events: {
+            change: (currentRow: object) => {
+              setGridValeByField(currentRow, 'groupNameI18nKey', '')
+            },
+          },
+          name: '$input',
+          props: { clearable: true },
+        },
+      },
+      { field: 'groupCode', title: '分组编码', editRender: { name: '$input', props: { clearable: true } } },
+      {
+        field: 'groupType',
+        title: '分组类型',
+        editRender: {
+          name: '$select',
+          props: { clearable: true },
+          options: [
+            { value: 'head', label: '头分组' },
+            { value: 'item', label: '行分组' },
+            // 主要作用于表行编辑规则，分组编码 gridEditConfig，分组名表行编辑规则
+            { value: 'gridEditConfig', label: '表行编辑规则' },
+          ],
+        },
+      },
+      { field: 'groupNameI18nKey', title: 'I18nKey' },
+      { field: 'extend', title: '扩展', slots: { default: 'extend_col_render' } },
+    ])
+
+    const filterGroupMethod = ({ option, row }: customConfigEdits.GridQConfigUnkownObj) => {
+      const groupRowData = groupData.value?.filter((item) => item.groupName.indexOf(option.data) > -1) as customConfigEdits.MapObjectNoneType[]
+      return row.groupCode.indexOf(groupRowData[0].groupCode) !== -1
+    }
+    const headColumns = reactive<VxeTableDefines.ColumnOptions[]>([
+      {
+        width: 60,
+        fixed: 'left',
+        slots: {
+          default: 'drag_btn_default',
+          header: 'drag_btn_header',
+        },
+      },
+      { type: 'checkbox', width: 40, fixed: 'left' },
+      { field: 'sortOrder', title: '排序', width: 80, fixed: 'left', editRender: { name: 'input' } },
+      {
+        field: 'groupCode',
+        title: '分组',
+        sortable: true,
+        width: 120,
+        fixed: 'left',
+        editRender: { name: '$select', props: { clearable: true }, options: [] },
+        filters: [{ data: '' }],
+        slots: {
+          filter: 'group_filter',
+        },
+        filterMethod: filterGroupMethod,
+      },
+      {
+        field: 'fieldName',
+        title: '字段编码',
+        width: 120,
+        fixed: 'left',
+        editRender: { name: '$input', props: { clearable: true } },
+        filters: [{ data: '' }],
+        slots: {
+          filter: 'fieldName_filter',
+          default: 'default_span',
+          edit: 'fieldName_edit',
+        },
+        filterMethod: filterFieldNameMethod,
+      },
+      {
+        field: 'fieldType',
+        title: '字段类型',
+        fixed: 'left',
+        width: 120,
+        editRender: {
+          name: '$select',
+          props: { clearable: true },
+          options: [...fieldTypeOptain],
+        },
+      },
+      {
+        field: 'fieldLabel',
+        title: '字段默认名称',
+        width: 120,
+        fixed: 'left',
+        editRender: {
+          events: {
+            change: (currentRow) => {
+              setGridValeByField(currentRow, 'fieldLabelI18nKey', '')
+            },
+          },
+          name: '$input',
+          props: { clearable: true },
+        },
+        filters: [{ data: '' }],
+        slots: {
+          filter: 'fieldLabel_filter',
+        },
+        filterMethod: filterFieldLabelMethod,
+      },
+      {
+        field: 'purchaseOperation',
+        title: '采购可操作',
+        width: 200,
+        editRender: {
+          enabled: true,
+        },
+        slots: {
+          default: purchaseOperation_defult,
+          edit: purchaseOperation_edit,
+        },
+      },
+      {
+        field: 'saleOperation',
+        title: '供应商可操作',
+        width: 200,
+        editRender: {
+          enabled: true,
+        },
+        slots: {
+          default: saleOperation_default,
+          edit: saleOperation_edit,
+        },
+      },
+      {
+        field: 'defaultValue',
+        width: 150,
+        editRender: {
+          enabled: true,
+        },
+        slots: {
+          default: defaultValue_default,
+          edit: defaultValue_edit,
+          header: defaultValue_header,
+        },
+      },
+      { field: 'dictCode', title: '数据字典编码', width: 180, slots: { default: 'custom_render' } },
+      { field: 'required', title: '是否必填', width: 120, slots: { default: 'switch_render' } },
+      { field: 'sys', title: '是否系统配置', width: 120, slots: { default: 'switch_render' } },
+      {
+        field: 'audit',
+        title: '是否审批页显示',
+        width: 120,
+        slots: { default: 'switch_render' },
+      },
+      {
+        field: 'mobile',
+        title: '移动端显示',
+        width: 120,
+        slots: { default: 'switch_render' },
+      },
+      {
+        field: 'sum',
+        title: '是否汇总',
+        width: 120,
+        slots: { default: 'summary_render' },
+      },
+      { field: 'helpText', title: '帮助说明', width: 120, editRender: { name: '$input', props: { clearable: true } } },
+      { field: 'fieldLabelI18nKey', title: '字段名称I18nKey', width: 200 },
+
+      {
+        width: 100,
+        fixed: 'right',
+        slots: {
+          default: 'custom_more_property_render',
+          header: right_header,
+        },
+      },
+    ])
+
+    const fieldColumns = reactive<VxeTableDefines.ColumnOptions[]>([
+      { type: 'checkbox', width: 40 },
+      { type: 'seq', width: 60 },
+      {
+        field: 'groupCode',
+        title: '分组编码',
+        filters: [{ data: '' }],
+        slots: {
+          filter: 'groupCode_filter',
+        },
+        filterMethod: filterGroupCodeMethod,
+      },
+      {
+        field: 'fieldName',
+        title: '字段名称',
+        filters: [{ data: '' }],
+        slots: {
+          filter: 'fieldName_filter',
+        },
+        filterMethod: filterFieldNameMethod,
+      },
+      {
+        field: 'fieldLabel',
+        title: '字段描述',
+        filters: [{ data: '' }],
+        slots: {
+          filter: 'fieldLabel_filter',
+        },
+        filterMethod: filterFieldLabelMethod,
+      },
+    ])
+    const itemColumns = reactive<VxeTableDefines.ColumnOptions[]>([
+      {
+        width: 60,
+        fixed: 'left',
+        slots: {
+          default: 'drag_btn_default',
+          header: 'drag_btn_header',
+        },
+      },
+      { type: 'checkbox', width: 40, fixed: 'left' },
+      { field: 'sortOrder', title: '排序', width: 80, fixed: 'left', editRender: { name: 'input' } },
+      {
+        field: 'groupCode',
+        title: '分组',
+        sortable: true,
+        width: 120,
+        fixed: 'left',
+        editRender: { name: '$select', props: { clearable: true }, options: [] },
+        filters: [{ data: '' }],
+        slots: {
+          filter: 'group_filter',
+        },
+        filterMethod: filterGroupMethod,
+      },
+      {
+        field: 'fieldName',
+        title: '字段名',
+        width: 120,
+        fixed: 'left',
+        editRender: { enabled: true },
+        slots: {
+          default: 'default_span',
+          edit: 'fieldName_edit',
+        },
+      },
+      {
+        field: 'fieldLabel',
+        title: '字段描述',
+        width: 120,
+        fixed: 'left',
+        editRender: {
+          events: {
+            change: (currentRow) => {
+              setGridValeByField(currentRow, 'fieldLabelI18nKey', '')
+            },
+          },
+          name: '$input',
+          props: { clearable: true },
+        },
+      },
+      {
+        field: 'fieldType',
+        title: '字段类型',
+        fixed: 'left',
+        width: 120,
+        editRender: {
+          name: '$select',
+          props: { clearable: true },
+          options: [...fieldTypeOptain],
+        },
+      },
+      // {
+      //   field: 'fieldLabel',
+      //   title: '字段默认名称',
+      //   width: 120,
+      //   fixed: 'left',
+      //   editRender: {
+      //     events: {
+      //       change: (currentRow) => {
+      //         setGridValeByField(currentRow, 'fieldLabelI18nKey', '')
+      //       },
+      //     },
+      //     name: '$input',
+      //     props: { clearable: true },
+      //   },
+      //   filters: [{ data: '' }],
+      //   slots: {
+      //     filter: 'fieldLabel_filter',
+      //   },
+      //   filterMethod: filterFieldLabelMethod,
+      // },
+      {
+        field: 'purchaseOperation',
+        title: '采购可操作',
+        width: 200,
+        editRender: {
+          enabled: true,
+        },
+        slots: {
+          default: purchaseOperation_defult,
+          edit: purchaseOperation_edit,
+        },
+      },
+      {
+        field: 'saleOperation',
+        title: '供应商可操作',
+        width: 200,
+        editRender: {
+          enabled: true,
+        },
+        slots: {
+          default: saleOperation_default,
+          edit: saleOperation_edit,
+        },
+      },
+      {
+        field: 'defaultValue',
+        width: 150,
+        editRender: {
+          enabled: true,
+        },
+        slots: {
+          default: defaultValue_default,
+          edit: defaultValue_edit,
+          header: defaultValue_header,
+        },
+      },
+      { field: 'dictCode', title: '数据字典编码', width: 180, slots: { default: 'custom_render' } },
+      { field: 'columnWidth', title: '宽度', width: 120, editRender: { name: '$input', props: { clearable: true } } },
+      {
+        field: 'columnAlign',
+        title: '对齐方式',
+        width: 120,
+        editRender: {
+          name: '$select',
+          props: { clearable: true },
+          options: [
+            { value: 'center', label: '居中对齐' },
+            { value: 'left', label: '左对齐' },
+            { value: 'right', label: '右对齐' },
+          ],
+        },
+      },
+      { field: 'required', title: '是否必填', width: 120, slots: { default: 'switch_render' } },
+      { field: 'sys', title: '是否系统配置', width: 120, slots: { default: 'switch_render' } },
+      {
+        field: 'audit',
+        title: '是否审批页显示',
+        width: 120,
+        slots: { default: 'switch_render' },
+      },
+      {
+        field: 'mobile',
+        title: '移动端显示',
+        width: 120,
+        slots: { default: 'switch_render' },
+      },
+      {
+        field: 'sum',
+        title: '是否汇总',
+        width: 120,
+        slots: { default: 'summary_render' },
+      },
+      { field: 'helpText', title: '帮助说明', width: 120, editRender: { name: '$input', props: { clearable: true } } },
+      { field: 'fieldLabelI18nKey', title: '字段名称I18nKey', width: 200 },
+
+      {
+        width: 100,
+        fixed: 'right',
+        slots: {
+          default: 'custom_more_property_render',
+          header: right_header,
+        },
+      },
+    ])
+
+    //computed
+    const { showBusinessTips, gridHeight, commonDevelopTabs } = useConfigComputed()
+    /*
+      method
+     */
+
+    const currentStepFrist = () => {
+      formRef.value.validate().then(() => {
+        currentStep.value++
+        nextTick(() => {
+          rowDrop(groupData)
+        })
+      })
+    }
+    const currentStepSecond = () => {
+      let { fullData } = groupGrid.value.getTableData()
+      if (!fullData.length) {
+        message.warning('请添加分组!')
+        return
+      }
+      groupGrid.value.validate(fullData, (valid: customConfigEdits.MapObjectNoneType) => {
+        if (!valid) {
+          let headGroupList = fullData.filter((item: customConfigEdits.MapObjectNoneType) => {
+            return item.groupType == 'head'
+          })
+          let itemGroupList = fullData.filter((item: customConfigEdits.MapObjectNoneType) => {
+            return item.groupType == 'item'
+          })
+          let headGroupOpts = headGroupList.map((item: customConfigEdits.MapObjectNoneType) => {
+            return {
+              value: item.groupCode,
+              label: item.groupName,
+            }
+          })
+          let itemGroupOpts = itemGroupList.map((item: customConfigEdits.MapObjectNoneType) => {
+            return {
+              value: item.groupCode,
+              label: item.groupName,
+            }
+          })
+          if (headColumns[3].editRender) headColumns[3].editRender.options = headGroupOpts
+          if (itemColumns[3].editRender) itemColumns[3].editRender.options = itemGroupOpts
+          currentStep.value++
+        }
+      })
+    }
+    const currentStepThird = () => {
+      // console.log(1)
+
+      let { fullData } = headGrid.value.getTableData()
+      // if (!fullData.length) {
+      //     this.$message.warning(this.$srmI18n(`${this.$getLangAccount()}#i18n_title_pleaseAddHeaderConfiguration`, '请添加表头配置!'))
+      //     return
+      // }
+      headGrid.value.validate(fullData, (valid: customConfigEdits.MapObjectNoneType) => {
+        if (!valid) {
+          currentStep.value++
+        }
+      })
+    }
+    const currentMethodArry = [currentStepFrist, currentStepSecond, currentStepThird]
+
+    const validateCode = (rule: customConfigEdits.MapObjectNoneType) => {
+      const xGrid = groupGrid
+      let { fullData } = xGrid.value.getTableData()
+      let { cellValue, row } = rule
+      let rowIndex = row.sortOrder - 1
+      let res: Error | null = null
+      if (fullData.length > 0) {
+        let fullNew = fullData.map((rs: customConfigEdits.MapObjectNoneType) => rs.groupCode)
+        fullNew.splice(rowIndex, 1)
+        let rep = fullNew.find((t: customConfigEdits.MapObjectNoneType) => t == cellValue)
+        if (rep) {
+          res = new Error('分组编码不能填写相同的值！')
+        }
+      }
+      return res
+    }
+    const groupRules = shallowReactive<customConfigEdits.MapObjectNoneType>({
+      sortOrder: [{ required: true, message: '请输入排序' }],
+      groupName: [{ required: true, message: '请输入分组名称' }],
+      groupCode: [{ required: true, message: '请输入分组编码' }, { validator: validateCode }],
+      groupType: [{ required: true, message: '请选择分组类型' }],
+    })
+    const alertClose = () => {
+      sessionStorage.setItem('businessTipsShow', '0')
+    }
+    const codeEditorSureClick = (contents: string) => {
+      form.extend = contents
+    }
+    const changeBusinessTypeEvent = (type: string) => {
+      qHttp
+        .get({
+          url: '/template/templateHead/querySysByBusinessType',
+          params: {
+            businessType: type,
+          },
+        })
+        .then((res) => {
+          // console.log(1)
+          if (res.success) {
+            let { templateGroupList, templateConfigHeadList, templateConfigItemList } = res.result
+            groupData.value = templateGroupList
+            headData.value = templateConfigHeadList
+            itemData.value = templateConfigItemList
+          }
+        })
+    }
+    const changeDefaultType = (flag: boolean) => {
+      form.defaultTypeFlag = flag
+    }
+
+    const ajaxFindDictItems = (postData: object) => {
+      return new Promise((resolve, reject) => {
+        qHttp
+          .post({
+            url: '/base/dict/findDictItems',
+            // params: {},
+            data: postData,
+          })
+          .then((res) => {
+            if (res.success) {
+              resolve(res.result)
+            } else {
+              reject(res)
+            }
+          })
+          .catch((err) => {
+            reject(err)
+          })
+      })
+    }
+
+    const editActivedEvent = ({ row, column }: VxeGridDefines.EditActivedEventParams) => {
+      if (column.property == 'defaultValue') {
+        if ((row.fieldType == 'select' || row.fieldType == 'multiple') && row.dictCode) {
+          let postData = {
+            busAccount: busAccount,
+            dictCode: row.dictCode,
+          }
+          ajaxFindDictItems(postData).then((res: any) => {
+            if (res.success) {
+              let options = res.result.map((item: customConfigEdits.MapObjectNoneType) => {
+                return {
+                  value: item.value,
+                  label: item.title,
+                }
+              })
+              // that.defaultValueOpts = options
+              row.defaultValueOpts = options
+            }
+          })
+        }
+      }
+    }
+
+    const getDefaultOptions = (row: customConfigEdits.MapObjectNoneType) => {
+      return new Promise<customConfigEdits.MapObjectNoneType>((resolve) => {
+        let postData = {
+          busAccount: busAccount.value,
+          dictCode: row.dictCode,
+        }
+        ajaxFindDictItems(postData).then((res: any) => {
+          if (res.success) {
+            resolve(res.result)
+          }
+        })
+      })
+    }
+
+    const defaultAddOpts = async (arr: customConfigEdits.MapObjectNoneType[]) => {
+      for (const row of arr) {
+        if ((row.fieldType == 'select' || row.fieldType == 'multiple') && row.dictCode) {
+          let options = await getDefaultOptions(row)
+          options = options.map((item: customConfigEdits.MapObjectNoneType) => {
+            return {
+              value: item.value,
+              label: item.title,
+            }
+          })
+          row.defaultValueOpts = options
+        }
+      }
+    }
+
+    const queryDetail = () => {
+      qHttp
+        .get({
+          url: url.detail,
+          params: {
+            id: currentEditRow.value.id,
+          },
+        })
+        .then((res: customConfigEdits.MapObjectNoneType) => {
+          if (res.success) {
+            currentRow.value = res.result
+            let { templateGroupList, templateConfigHeadList, templateConfigItemList } = res.result
+            Object.assign(form, res.result)
+            groupData.value = templateGroupList
+            let headDataTemp = templateConfigHeadList.map((item: customConfigEdits.MapObjectNoneType) => {
+              if (item.mobile) {
+                item.mobile += ''
+              } else {
+                item.mobile = '1'
+              }
+              return item
+            })
+            headData.value = headDataTemp
+
+            let itemDataTemp = templateConfigItemList.map((item: customConfigEdits.MapObjectNoneType) => {
+              if (item.mobile) {
+                item.mobile += ''
+              } else {
+                item.mobile = '1'
+              }
+              return item
+            })
+            itemData.value = itemDataTemp
+            nextTick(() => {
+              defaultAddOpts(headData.value as customConfigEdits.MapObjectNoneType[])
+              defaultAddOpts(itemData.value as customConfigEdits.MapObjectNoneType[])
+            })
+          }
+        })
+        .finally(() => {
+          confirmLoading.value = false
+        })
+    }
+    const preSetup = () => {
+      currentStep.value--
+    }
+    const currentStepEmit = () => {
+      currentMethodArry[currentStep.value]()
+    }
+    const rowDrop = (currentData: customConfigEdits.MapObjectNoneType) => {
+      const $table = groupGrid.value
+      Sortable.create($table.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
+        handle: '.drag-btn',
+        onEnd: (sortableEvent: customConfigEdits.MapObjectNoneType) => {
+          const newIndex = sortableEvent.newIndex as number
+          const oldIndex = sortableEvent.oldIndex as number
+          const currRow = currentData.value.splice(oldIndex, 1)[0]
+          currentData.value.splice(newIndex, 0, currRow)
+        },
+      })
+    }
+
+    const groupGridAddEvent = () => {
+      let { fullData } = groupGrid.value.getTableData()
+      let length = fullData.length
+      groupGrid.value.insertAt({ sortOrder: length + 1, groupType: 'head' }, -1)
+    }
+
+    const getAllHeadDataPromiss = () => {
+      if (form.businessType === 'costForm') {
+        let url = '/cost/costField/queryAll'
+        return qHttp.get({
+          url,
+        })
+      } else {
+        let url = '/template/templateHead/queryHeadFieldsByBusinessType'
+        return qHttp.get({
+          url,
+          params: {
+            businessType: form.businessType,
+          },
+        })
+      }
+    }
+
+    const headGridAddEvent = () => {
+      let { fullData } = headGrid.value.getTableData()
+      if (busAccount.value == '100000') {
+        let length = fullData.length
+        headGrid.value.insertAt({ sortOrder: length + 1, groupType: 'head' }, -1)
+        return
+      }
+
+      let fieldNameList = fullData.map((item: customConfigEdits.MapObjectNoneType) => {
+        return item.fieldName + '_' + item.groupCode
+      })
+      getAllHeadDataPromiss().then((res) => {
+        if (res.success) {
+          if (form.businessType === 'costForm') {
+            fieldData.value = res.result
+            visible.value = true
+          } else {
+            let fieldDatas = res.result.templateConfigHeadList.filter((item: customConfigEdits.MapObjectNoneType) => {
+              return !fieldNameList.includes(item.fieldName + '_' + item.groupCode)
+            })
+            fieldData.value = fieldDatas
+            visible.value = true
+          }
+        } else {
+          message.warning(res.message)
+        }
+      })
+    }
+
+    const gridDeleteEvent = (type: string) => {
+      const CurentGridRef = getCurentGridRef(type)
+      let checkboxRecords = CurentGridRef.value.getCheckboxRecords()
+      if (type === 'headGridRef' || type === 'itemGridRef') {
+        let flag = checkboxRecords.some((n: customConfigEdits.GridQConfigUnkownObj) => n.sys === '1')
+        if (flag) {
+          message.error('系统配置字段不允许删除')
+          return
+        }
+      }
+      if (!checkboxRecords.length) {
+        message.error('请选择数据！')
+        return
+      }
+      CurentGridRef.value.removeCheckboxRow(checkboxRecords)
+      resetSortOrder(type)
+      // this.$refs[grid].removeCheckboxRow(checkboxRecords)
+    }
+
+    const handleEpritXisCallBack = () => {
+      confirmLoading.value = !confirmLoading.value
+    }
+
+    const exportHeadEvent = (type: string, sets: string) => {
+      if (!currentEditRow.value.id) {
+        message.warning('请先保存模板配置')
+        return
+      }
+      // confirmLoading.value = true
+      handleExportXls('表头配置', currentEditRow.value.id, sets, type, '/template/templateHead/exportTemplateColumnConfig', handleEpritXisCallBack)
+    }
+
+    let getCurentGridRef = (type: string) => {
+      const curGridRefObj: customConfigEdits.GridQConfigEditRef = { groupGridRef: groupGrid, headGridRef: headGrid }
+      return curGridRefObj[type]
+    }
+    const resetSortOrder = (type: string) => {
+      const CurentGridRef = getCurentGridRef(type)
+      let { fullData } = CurentGridRef.value.getTableData()
+      fullData.forEach((item: customConfigEdits.GridQConfigUnkownObj, index: number) => {
+        item.sortOrder = index + 1
+      })
+    }
+    const selectedHeadOk = () => {
+      let checkboxRecords = selectGrid.value.getCheckboxRecords()
+      if (!checkboxRecords.length) {
+        message.warning('请选择数据！')
+        return
+      }
+
+      let { fullData } = headGrid.value.getTableData()
+      let length = fullData.length
+      checkboxRecords.forEach((item: customConfigEdits.MapObjectNoneType, index: customConfigEdits.MapObjectNoneType) => {
+        item.sortOrder = length + index + 1
+      })
+      headGrid.value?.insertAt(checkboxRecords, -1)
+
+      visible.value = false
+    }
+
+    const setDisabledByData = (field: string, value: boolean) => {
+      commonDevelopTabs.value.forEach((rs) => {
+        let d = rs.children.find((it: customConfigEdits.MapObjectNoneType) => it.field == field)
+        if (d) {
+          d.disabled = value
+        }
+      })
+    }
+
+    const handleBefore = (row: customConfigEdits.MapObjectNoneType) => {
+      // 字段类型为文本，文本域，数字，小数，日期，且为不必填时，支持折叠
+      let limitField = ['input', 'number', 'float', 'date', 'textArea']
+      if (limitField.includes(row.fieldType) && row.required == '0') {
+        setDisabledByData('fold', false)
+      } else {
+        // 重置
+        setDisabledByData('fold', true)
+        if (currentDrawer.value.fold) {
+          currentDrawer.value.fold = '0'
+        }
+      }
+    }
+
+    const rowChangeSummary = (currentDrawer: customConfigEdits.MapObjectNoneType) => {
+      // 同一个分组只能有一个汇总字段
+      handleBefore(currentDrawer.row)
+      // debugger
+      // this.currentItemGrid = currentDrawer // 当前所有列
+      let itemGridData = currentDrawer.data
+      let rowIndex = currentDrawer.$rowIndex
+      nextTick(() => {
+        itemGridData.forEach((item: customConfigEdits.MapObjectNoneType, index: number) => {
+          if (item.groupCode === currentDrawer.row.groupCode && rowIndex !== index) {
+            item.sum = 0
+            // this.$forceUpdate()
+          }
+        })
+      })
+    }
+
+    const changeSummary = (currentDrawer: customConfigEdits.MapObjectNoneType) => {
+      // 同一个分组只能有一个汇总字段
+
+      let itemGridData = currentItemGrid.value.data
+      let rowIndex = currentItemGrid.value.$rowIndex
+      nextTick(() => {
+        itemGridData.forEach((item: customConfigEdits.MapObjectNoneType, index: customConfigEdits.MapObjectNoneType) => {
+          if (item.groupCode === currentDrawer.groupCode && rowIndex !== index) {
+            item.sum = 0
+            // this.$forceUpdate()
+            // getCurrentInstance()?.$forceUpdate()
+          }
+        })
+      })
+    }
+
+    const showDictModal = (row: customConfigEdits.MapObjectNoneType) => {
+      currentDictRow.value = row
+      // alert(1)
+      console.log(dictCodeModal)
+      dictCodeModal.value.open()
+    }
+    const headRowDrop = () => {
+      console.log(1)
+    }
+
+    const itemRowDrop = () => {
+      console.log(1)
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const showDrawer = (param: any) => {
+      handleBefore(param.row)
+      currentDrawer.value = param.row
+      currentItemGrid.value = param // 当前所有列
+      drawerVisible.value = true
+    }
+
+    const fieldSelectOk = (data: customConfigEdits.MapObjectNoneType) => (currentDictRow.value.dictCode = data.dictCode)
+
+    const showSample = (field: string) => {
+      nowFieldType.value = field
+      if (field === 'callback') {
+        sampleCode.value = currentStep.value === 2 ? EditSample.bindFunctionHead : EditSample.bindFunctionRow
+      } else if (field === 'initFunction') {
+        sampleCode.value = currentStep.value === 2 ? EditSample.initFunctionHead : EditSample.initFunctionRow
+      } else if (field === 'extend') {
+        sampleCode.value = currentStep.value === 2 ? EditSample.extendHead : EditSample.extendRow
+      } else if (field === 'fieldValidator') {
+        sampleCode.value = currentStep.value === 2 ? EditSample.fieldValidatorHead : EditSample.fieldValidatorRow
+      } else if (field === 'formula') {
+        sampleCode.value = currentStep.value === 2 ? EditSample.formulaHead : EditSample.formulaRow
+      }
+      editorModalFlags.value = true
+    }
+    const sampleSureClick = (coValue: string) => {
+      let warnTips = false
+      sampleCode.value = coValue
+      if (nowFieldType.value === 'callback' && !currentDrawer.value.callback) {
+        currentDrawer.value.callback = coValue
+        warnTips = true
+      } else if (nowFieldType.value === 'initFunction' && !currentDrawer.value.initFunction) {
+        currentDrawer.value.initFunction = coValue
+        warnTips = true
+      } else if (nowFieldType.value === 'extend' && !currentDrawer.value.extend) {
+        currentDrawer.value.extend = coValue
+        warnTips = true
+      } else if (nowFieldType.value === 'fieldValidator' && !currentDrawer.value.fieldValidator) {
+        currentDrawer.value.fieldValidator = coValue
+        warnTips = true
+      } else if (nowFieldType.value === 'formula' && !currentDrawer.value.formula) {
+        currentDrawer.value.formula = coValue
+        warnTips = true
+      }
+      if (!warnTips) {
+        message.warning('函数已存在，不可导入示例')
+        return
+      }
+      editorModalFlags.value = false
+    }
+
+    const changeFixSummary = (currentDrawer: customConfigEdits.MapObjectNoneType) => {
+      // 同一个分组只能有一个汇总字段
+      let itemGridData = currentItemGrid.value.data
+      let rowIndex = currentItemGrid.value.$rowIndex //当前修改的索引
+      let temArryItemGridData = [...itemGridData]
+      temArryItemGridData.reverse()
+      let resetIndex = temArryItemGridData.findIndex((val) => val.fixType)
+      let lastFrozenIndex = resetIndex > -1 ? itemGridData.length - resetIndex - 1 : resetIndex //最好一个设置了fixtype的索引
+      // this.curLastFrozenIndex = lastFrozenIndex //打开时的最后一个设置fixtype的
+      if (lastFrozenIndex > -1) {
+        if (lastFrozenIndex <= rowIndex) {
+          for (let [idx, v] of itemGridData.entries()) {
+            if (idx <= rowIndex) {
+              v.fixType = itemGridData[rowIndex].fixType
+            } else {
+              break
+            }
+          }
+        }
+      }
+      nextTick(() => {
+        itemGridData.forEach((item: customConfigEdits.MapObjectNoneType, index: customConfigEdits.MapObjectNoneType) => {
+          if (item.groupCode === currentDrawer.groupCode && rowIndex !== index) {
+            item.sum = 0
+            // this.$forceUpdate()
+          }
+        })
+      })
+    }
+
+    const reorderData = (gird: customConfigEdits.MapObjectNoneType) => {
+      let tableData = gird.getTableData().fullData
+      tableData = qqtUtils
+        .sortBy(tableData, function (item: customConfigEdits.MapObjectNoneType) {
+          return parseInt(item.sortOrder)
+        })
+        .map((item: customConfigEdits.MapObjectNoneType, index: number) => {
+          item.sortOrder = index + 1
+          return item
+        })
+      gird.loadData(tableData)
+    }
+
+    const reorder = () => {
+      let headGridRef = headGrid.value
+      let itemGridRef = itemGrid.value
+      reorderData(headGridRef)
+      reorderData(itemGridRef)
+    }
+
+    const formatByType = (data: customConfigEdits.MapObjectNoneType, type: string) => {
+      data.forEach((rs: customConfigEdits.MapObjectNoneType) => {
+        if (rs.fieldType === type && rs.defaultValue instanceof Array) {
+          rs.defaultValue = rs.defaultValue.join(',')
+        }
+      })
+    }
+
+    const postData = (type?: string) => {
+      let curl = url.add
+      if (currentEditRow.value && currentEditRow.value.id) {
+        curl = url.edit
+      }
+
+      if (type == 'publish') {
+        curl = url.publish
+      }
+      // console.log('headGrid', headGrid)
+      // 根据序号重新排序
+      reorder()
+      let params = Object.assign({ templateGroupList: [], templateConfigHeadList: [], templateConfigItemList: [] }, form)
+
+      // 处理多选数据格式
+      let templateConfigHeadList = headGrid.value.getTableData().fullData
+
+      let templateConfigItemList = itemGrid.value.getTableData().fullData
+
+      formatByType(templateConfigItemList, 'multiple')
+      formatByType(templateConfigHeadList, 'multiple')
+
+      params.templateGroupList = groupGrid.value.getTableData().fullData
+      params.templateConfigHeadList = templateConfigHeadList
+      params.templateConfigItemList = templateConfigItemList
+
+      confirmLoading.value = true
+      qHttp.post({ url: curl, data: params }).then((res) => {
+        if (res.success) {
+          form.id = res.result ? res.result.id : ''
+          form.elsAccount = res.result ? res.result.elsAccount : ''
+          currentEditRow.value.id = form.id
+          currentRow.value = res.result
+          form.templateVersion = res.result ? res.result.templateVersion : ''
+          if (url.add == curl || type == 'publish') {
+            const resultData = res.result
+            form.templateNumber = resultData ? resultData.templateNumber : ''
+            currentEditRow.value.templateStatus = resultData ? resultData.templateStatus : ''
+            remoteJsFilePath.value = `${resultData.elsAccount}/purchase_${resultData.businessType}_${resultData.templateNumber}_${resultData.templateVersion}`
+          }
+          message.success('操作成功！')
+        } else {
+          message.warning(res.message)
+        }
+        confirmLoading.value = false
+      })
+    }
+    const saveEvent = (type = '') => {
+      let { fullData } = itemGrid.value.getTableData()
+      // if (!fullData.length) {
+      //   message.warning('请添加表行信息！')
+      //   return
+      // }
+      // console.log('save', 1)
+      itemGrid.value.validate(fullData, (valid: customConfigEdits.MapObjectNoneType) => {
+        if (!valid) {
+          postData(type)
+        }
+      })
+    }
+
+    const tempaltePreview = () => {
+      perviewOpen.value = true
+    }
+    const handleReturn = () => {
+      emit('handleReturn')
+    }
+    //生命周期
+
+    onMounted(() => {
+      if (currentEditRow.value && currentEditRow.value.id) {
+        queryDetail()
+      } else {
+        nextTick(() => {
+          confirmLoading.value = false
+        })
+      }
+    })
+
+    return {
+      confirmLoading,
+      currentStep,
+      alertClose,
+      showBusinessTips,
+      form,
+      codeEditorSureClick,
+      changeBusinessTypeEvent,
+      changeDefaultType,
+      currentStepEmit,
+      companyCode,
+      purchaseOrganization,
+      purchaseGroup,
+      formRef,
+      preSetup,
+      gridHeight,
+      groupColumns,
+      groupData,
+      groupRules,
+      changeFilterEvent,
+      groupGrid,
+      groupGridAddEvent,
+      gridDeleteEvent,
+      headRowDrop,
+      headGrid,
+      headData,
+      headColumns,
+      activeCellMethod,
+      headRules,
+      editActivedEvent,
+      headGridAddEvent,
+      visible,
+      fieldData,
+      fieldColumns,
+      selectGrid,
+      selectedHeadOk,
+      exportHeadEvent,
+      rowChangeSummary,
+      removeDictCode,
+      showDictModal,
+      dictCodeModal,
+      fieldSelectOk,
+      showDrawer,
+      drawerVisible,
+      commonDevelopTabs,
+      codeEditorFields,
+      editorModalFlags,
+      sampleCode,
+      nowFieldType,
+      showSample,
+      currentDrawer,
+      switchFields,
+      changeSummary,
+      changeFixSummary,
+      sampleSureClick,
+      itemColumns,
+      itemRowDrop,
+      itemData,
+      itemRules,
+      itemGrid,
+      saveEvent,
+      perviewOpen,
+      tempaltePreview,
+      // currentEditRow,
+      currentRow,
+      handleReturn,
+    }
+  },
+})
+</script>
+
+<style lang="less" scoped>
+@import url(../style/index.less);
+
+.content-step-one {
+  justify-content: center;
+}
+.code-editror-flex-row {
+  display: block;
+}
+</style>