cloud-web-corejs 1.0.0

package/src/views/user/bill_setting/render.vue

@@ -0,0 +1,2028 @@
+<template>
+  <div class="h5-wrap">
+    <div class="header-box"><!--<i class="go-back el-icon-arrow-left"></i>-->{{ billJson.billDesc }}</div>
+    <el-form label-position="top" class="form-box" ref="editForm" :model="formData">
+      <div class="tab-box" style="height: 0px;">
+        <div>
+          <template v-for="(tab,index) in billJson.tabList">
+            <div :key="index" v-if="tab.enabled" class="item" :class="{'on' : activeName == index}"
+                 @click="activeName = index">{{ tab.name }}
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <template v-if="showContent">
+        <template v-for="(tab,index) in billJson.tabList">
+          <div class="c" v-if="activeName == index" :key="index">
+            <template v-for="(item,index2) in tab.itemDTOs">
+              <template v-if="getIsShowItem(item)">
+                <div class="c-item" v-if="item.type==1" :key="index2">
+                  <div class="tit"><b>{{ item.itemDesc }}</b></div>
+                  <table class="form-table">
+                    <tr v-for="(fieldGroup,index3) in getFieldDTOsGroups(item.fieldDTOs)" :key="index3">
+                      <template v-for="(fieldDTO,index4) in fieldGroup">
+                        <th :key="'0-'+index4" :class="getFormItemClass(fieldDTO)">{{ fieldDTO.fieldDesc }}</th>
+                        <td :key="'1-'+index4" :colspan="fieldDTO.fieldSize=='small'?'1':'3'"
+                            :class="getFormItemClass(fieldDTO)">
+                          <el-form-item :prop="fieldDTO.fieldName"
+                                        :rules="[{ required: fieldDTO.required, trigger: ['blur', 'change'] }]"
+                          >
+                            <compareView :isCompare="isCompare" :oldVal="formDataH[fieldDTO.fieldName]"
+                                         :newVal="formData[fieldDTO.fieldName]"
+                                         :oldLabel="getCellValue(formDataH, fieldDTO)">
+                              <template v-if="fieldDTO.fieldStyle==9">
+                                <a href="javascript:void(0);" class="a-link underLine" style="color: #2a6494;"
+                                   @click="openDetailDialog(item,fieldDTO)">{{ getCellValue(formData, fieldDTO) }}</a>
+                              </template>
+                              <template v-else-if="!billJson.showSaveButton">
+                                {{ getCellValue(formData, fieldDTO) }}
+                              </template>
+                              <template v-else-if="fieldDTO.fieldStyle==1">
+                                <el-input size="small" v-model="formData[fieldDTO.fieldName]"
+                                          maxlength="255" autocomplete="off" clearable v-bind="fieldDTO.option"/>
+                              </template>
+                              <template v-else-if="fieldDTO.fieldStyle==2">
+                                <el-date-picker
+                                  size="small"
+                                  v-model="formData[fieldDTO.fieldName]"
+                                  type="date"
+                                  placeholder="选择日期"
+                                  value-format="yyyy-MM-dd"
+                                  clearable
+                                  v-bind="fieldDTO.option"
+                                />
+                              </template>
+                              <template v-else-if="fieldDTO.fieldStyle==3">
+                                <el-radio-group v-model="formData[fieldDTO.fieldName]" v-bind="fieldDTO.option">
+                                  <el-radio v-for="(fieldStyleValue,index4) in fieldDTO.fieldStyleValue" :key="index4"
+                                            :label="fieldStyleValue.value">
+                                    {{ fieldStyleValue.label }}
+                                  </el-radio>
+                                </el-radio-group>
+                              </template>
+                              <template v-else-if="fieldDTO.fieldStyle==4">
+                                <el-checkbox-group v-model="formData[fieldDTO.fieldName]" v-bind="fieldDTO.option">
+                                  <el-checkbox v-for="(fieldStyleValue,index4) in fieldDTO.fieldStyleValue"
+                                               :key="index4"
+                                               :label="fieldStyleValue.value">{{ fieldStyleValue.label }}
+                                  </el-checkbox>
+                                </el-checkbox-group>
+                              </template>
+                              <template v-else-if="[5,7,8].includes(fieldDTO.fieldStyle)">
+                                {{ getCellValue(formData, fieldDTO) }}
+                              </template>
+                              <template v-else-if="fieldDTO.fieldStyle==6">
+                                <el-select v-model="formData[fieldDTO.fieldName]" v-bind="fieldDTO.option">
+                                  <el-option
+                                    v-for="(fieldStyleValue,index4) in fieldDTO.fieldStyleValue"
+                                    :key="index4"
+                                    :value="fieldStyleValue.value"
+                                  >
+                                    {{ fieldStyleValue.label }}
+                                  </el-option>
+                                </el-select>
+                              </template>
+                            </compareView>
+                          </el-form-item>
+                        </td>
+                      </template>
+                    </tr>
+                  </table>
+                </div>
+                <div class="c-item" v-if="item.type==2" :key="index2">
+                  <div class="tit">
+                    <b>{{ item.itemDesc }}</b>
+                    <!--                  <div class="fr">
+                                        <el-link @click="addItem(item)"><i class="el-icon-search"></i><span>选择</span></el-link>
+                                      </div>-->
+                  </div>
+                  <div class="pro-list">
+                    <div class="pro-item" v-for="(itemData,index3) in formData[item.fieldName]" :key="index3"
+                         @click="openItemViewDialog(item,itemData)">
+                      <!--                    <el-button type="danger" icon="el-icon-close" circle class="close"
+                                                     @click="removeItem(formData[item.fieldName],index3)"></el-button>-->
+                      <div class="t">
+                        <span>{{
+                            itemData[item.mainFieldName]
+                          }}<i class="el-icon-warning" v-if="isItemChange(itemData,item)"></i></span>
+                      </div>
+                      <div class="info">
+                        <table class="form-list-table">
+                          <tr v-for="(fieldGroup,index03) in getFieldDTOsGroups(item.fieldDTOs,1)" :key="index03">
+                            <template v-for="(fieldDTO,index4) in fieldGroup">
+                              <th :key="'0-'+index4" :class="getFormItemClass(fieldDTO)">{{ fieldDTO.fieldDesc }}</th>
+                              <td :key="'1-'+index4" :colspan="fieldDTO.fieldSize=='small'?'1':'3'"
+                                  :class="getFormItemClass(fieldDTO)">
+                                <el-form-item :prop="getPropIndex(item,fieldDTO,index3)"
+                                              :rules="[{ required: fieldDTO.required, trigger: ['blur', 'change'] }]"
+                                >
+                                  <compareView :isCompare="isCompare && getIsItemCompareEnabled(item)"
+                                               :oldVal="getHValue(itemData, item,fieldDTO)"
+                                               :newVal="itemData[fieldDTO.fieldName]"
+                                               :oldLabel="getCellValue(itemData.hData, fieldDTO)">
+                                    <template v-if="fieldDTO.fieldStyle==9">
+                                      <a href="javascript:void(0);" class="a-link underLine" style="color: #2a6494;"
+                                         @click.stop="openItemDetailDialog(item,fieldDTO,itemData)">{{
+                                          getCellValue(itemData, fieldDTO)
+                                        }}</a>
+                                    </template>
+                                    <template v-else-if="!billJson.showSaveButton">
+                                      {{ getCellValue(itemData, fieldDTO) }}
+                                    </template>
+                                    <template v-else-if="fieldDTO.fieldStyle==1">
+                                      <el-input size="small" v-model="itemData[fieldDTO.fieldName]"
+                                                maxlength="255" autocomplete="off" clearable v-bind="fieldDTO.option"/>
+                                    </template>
+                                    <template v-else-if="fieldDTO.fieldStyle==2">
+                                      <el-date-picker
+                                        size="small"
+                                        v-model="itemData[fieldDTO.fieldName]"
+                                        type="date"
+                                        placeholder="选择日期"
+                                        value-format="yyyy-MM-dd"
+                                        clearable
+                                        v-bind="fieldDTO.option"
+                                      />
+                                    </template>
+                                    <template v-else-if="fieldDTO.fieldStyle==3">
+                                      <el-radio-group v-model="itemData[fieldDTO.fieldName]" v-bind="fieldDTO.option">
+                                        <el-radio v-for="(fieldStyleValue,index5) in fieldDTO.fieldStyleValue"
+                                                  :key="index5"
+                                                  :label="fieldStyleValue.value">
+                                          {{ fieldStyleValue.label }}
+                                        </el-radio>
+                                      </el-radio-group>
+                                    </template>
+                                    <template v-else-if="fieldDTO.fieldStyle==4">
+                                      <el-checkbox-group v-model="itemData[fieldDTO.fieldName]"
+                                                         v-bind="fieldDTO.option">
+                                        <el-checkbox v-for="(fieldStyleValue,index5) in fieldDTO.fieldStyleValue"
+                                                     :key="index5"
+                                                     :label="fieldStyleValue.value">{{ fieldStyleValue.label }}
+                                        </el-checkbox>
+                                      </el-checkbox-group>
+                                    </template>
+                                    <template v-else-if="[5,7,8].includes(fieldDTO.fieldStyle)">
+                                      {{ getCellValue(itemData, fieldDTO) }}
+                                    </template>
+                                    <template v-else-if="fieldDTO.fieldStyle==6">
+                                      <el-select v-model="itemData[fieldDTO.fieldName]" v-bind="fieldDTO.option">
+                                        <el-option
+                                          v-for="(fieldStyleValue,index5) in fieldDTO.fieldStyleValue"
+                                          :key="index5"
+                                          :value="fieldStyleValue.value"
+                                        >
+                                          {{ fieldStyleValue.label }}
+                                        </el-option>
+                                      </el-select>
+                                    </template>
+                                  </compareView>
+
+
+                                </el-form-item>
+                              </td>
+                            </template>
+                          </tr>
+                        </table>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="c-item" v-if="item.type==3" :key="index2">
+                  <div class="tit"><b>{{ item.itemDesc }}</b></div>
+                  <div class="uploadlist-box">
+                    <div class="item" v-for="(attachment,index3) in formData[item.fieldName]" :key="index3"
+                         :title="getAttachmentName(attachment)">
+                      <el-image
+                        :src="getShowUrl(attachment)" @click="$baseFilePreview(formData[item.fieldName],index3)">
+                      </el-image>
+                      <div class="txt" v-if="item.hideInfo!==true">{{ getAttachmentName(attachment) }}</div>
+                      <el-button type="danger" icon="el-icon-close" circle class="close" v-if="isPreview || wfModify"
+                                 @click="removeFile(item,formData[item.fieldName],index3)"></el-button>
+                    </div>
+                  </div>
+                  <el-upload
+                    v-if="isPreview || wfModify"
+                    :ref="'upload'+index2"
+                    :key="'upload'+index2"
+                    action=""
+                    :http-request="(param)=>{
+                                    uploadSectionFile(param,'upload'+index2);
+                                  }"
+                    list-type="picture-card"
+                    :auto-upload="true"
+                    :show-file-list="true"
+                    :accept="item.fileConfig && item.fileConfig.accept?item.fileConfig.accept:'file'"
+                    :before-upload="handleBeforeUpload"
+                    :on-remove="handleRemove"
+                    :on-success="(response, file, fileList)=>{
+                                      handleSuccess({
+                                      response,
+                                      file,
+                                      fileList,
+                                      uploadRef:'upload'+index2,
+                                      item:item
+                                      })
+                                  }"
+                  >
+                    <i slot="default" class="el-icon-camera"></i>
+                    <div slot="file" slot-scope="{file}">
+                      <img
+                        class="el-upload-list__item-thumbnail"
+                        :src="getShowUrl(file)" alt=""
+                      >
+                      <span class="btn-close"><i class="el-icon-close"></i></span>
+                    </div>
+                  </el-upload>
+                </div>
+                <div class="c-item" v-if="item.type==4" :key="index2">
+                  <div class="tit"><b>{{ item.itemDesc }}</b></div>
+                  <div class="uploadlist-box">
+                    <template v-if="!!formData[item.fieldName]">
+                      <div class="item" v-for="(attachment,index3) in [formData[item.fieldName]]" :key="index3"
+                           :title="getAttachmentName(attachment)">
+                        <el-image
+                          :src="getShowUrl(attachment)" @click="$baseFilePreview(attachment,index3)">
+                        </el-image>
+                        <div class="txt">{{ getAttachmentName(attachment) }}</div>
+                        <el-button type="danger" icon="el-icon-close" circle class="close" v-if="isPreview || wfModify"
+                                   @click="removeFile(item,formData[item.fieldName],index3)"></el-button>
+                      </div>
+                    </template>
+                  </div>
+                  <el-upload
+                    v-show="!formData[item.fieldName]"
+                    v-if="isPreview || wfModify"
+                    :ref="'upload'+index2"
+                    :key="'upload'+index2"
+                    action=""
+                    :http-request="(param)=>{
+                                    uploadSectionFile(param,'upload'+index2);
+                                  }"
+                    list-type="picture-card"
+                    :auto-upload="true"
+                    :show-file-list="true"
+                    :accept="item.fileConfig && item.fileConfig.accept?item.fileConfig.accept:'file'"
+                    :before-upload="handleBeforeUpload"
+                    :on-remove="handleRemove"
+                    :on-success="(response, file, fileList)=>{
+                                      handleSuccess({
+                                      response,
+                                      file,
+                                      fileList,
+                                      uploadRef:'upload'+index2,
+                                      item:item
+                                      })
+                                  }"
+                  >
+                    <i slot="default" class="el-icon-camera"></i>
+                    <div slot="file" slot-scope="{file}">
+                      <img
+                        class="el-upload-list__item-thumbnail"
+                        :src="getShowUrl(file)" alt=""
+                      >
+                      <span class="btn-close"><i class="el-icon-close"></i></span>
+                    </div>
+                  </el-upload>
+                </div>
+              </template>
+            </template>
+          </div>
+        </template>
+      </template>
+      <div class="fix-bottom-btns" v-if="true || billJson.showSaveButton || !!taskParam.appBillCode">
+        <!--begin-->
+        <el-button class="btn" type="success" @click="openAgreeDialog" v-if="wfEnabled && wfInfo.toSubmit"
+                   icon="iconfont icon-tongguo">通过
+        </el-button>
+        <el-button class="btn" type="danger" @click="rejectWfTask" v-if="wfEnabled && wfInfo.toReject"
+                   icon="iconfont icon-a-bohui1">驳回
+        </el-button>
+        <el-button class="btn" type="primary" @click="openChangeWfForm"
+                   v-if="wfEnabled && ((wfInfo.toTransfer===null || wfInfo.toTransfer===undefined) ? wfInfo.toSubmit: wfInfo.toTransfer)"
+                   icon="iconfont icon-zhuanban">转办
+        </el-button>
+        <!--end-->
+
+        <el-button class="btn" type="primary" icon="el-icon-edit" @click="openModifyDialog"
+                   v-if="wfEnabled && !!taskParam.appBillCode">修改单据
+        </el-button>
+        <el-button class="btn" type="primary" icon="el-icon-check" v-if="billJson.showSaveButton" @click="saveData">
+          保存
+        </el-button>
+        <el-button class="btn" type="primary" icon="el-icon-check" @click="compare" v-if="getIsCompareEnabled()">
+          对比
+        </el-button>
+        <!--        <el-dropdown>
+                  <el-button class="btn more-btn" type="warning" plain icon="iconfont icon-guidang">
+                    更多
+                  </el-button>
+                  <el-dropdown-menu slot="dropdown" class="mobileApp_dropdown">
+                    <el-dropdown-item>
+                      <el-button class="btn" type="primary" icon="el-icon-school">按钮一</el-button>
+                    </el-dropdown-item>
+                    <el-dropdown-item>
+                      <el-button class="btn" type="primary" icon="el-icon-school">按钮一</el-button>
+                    </el-dropdown-item>
+                    <el-dropdown-item>
+                      <el-button class="btn" type="primary" icon="el-icon-school">按钮一</el-button>
+                    </el-dropdown-item>
+                    <el-dropdown-item>
+                      <el-button class="btn" type="primary" icon="el-icon-school">按钮一</el-button>
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>-->
+
+      </div>
+      <el-dialog
+        v-if="rejectDialogVisible"
+        :visible.sync="rejectDialogVisible"
+        :modal-append-to-body="false"
+        :close-on-click-modal="false"
+        :modal="false"
+        custom-class="dialog-style wf-dialog"
+        v-el-drag-dialog
+        v-el-dialog-center
+      >
+        <template #title>
+          <span class="el-dialog__title">流程驳回<span style="margin-left: 10px;margin-right: 10px;">—</span><b
+            class="f-red" style="font-size: 12px;">节点：{{
+              wfInfo.taskName
+            }}</b></span>
+        </template>
+        <el-form :model="rejectForm">
+          <div id="containt">
+            <table class="table-detail">
+              <tbody>
+              <tr>
+                <th>
+                    <span class="t">
+                      驳回节点
+                    </span>
+                </th>
+                <td>
+                  <el-form-item label="" field="nodeId">
+                    <el-select v-model="rejectForm.nodeId" placeholder="请选择驳回节点">
+                      <el-option v-for="(rejectNode,index) in rejectNodes" :label="rejectNode.nodeName"
+                                 :value="rejectNode.nodeId" :key="index"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </td>
+              </tr>
+              <tr>
+                <th>
+                    <span class="t">
+                      驳回意见
+                    </span>
+                </th>
+                <td>
+                  <el-form-item label="" field="opinion">
+                    <el-input type="textarea" :rows="8" placeholder="请输入内容"
+                              v-model="rejectForm.opinion"></el-input>
+                  </el-form-item>
+                </td>
+              </tr>
+              </tbody>
+            </table>
+          </div>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" plain class="button-sty" @click="rejectDialogVisible = false">
+            <i class="el-icon-close el-icon"></i>
+            取 消
+          </el-button>
+          <el-button type="primary" @click="subRejectForm" class="button-sty">
+            <i class="el-icon-check el-icon"></i>
+            确 定
+          </el-button>
+        </span>
+      </el-dialog>
+      <el-dialog
+        v-if="agreeDialogVisible"
+        :visible.sync="agreeDialogVisible"
+        :modal-append-to-body="false"
+        :close-on-click-modal="false"
+        :modal="false"
+        custom-class="dialog-style wf-dialog"
+        v-el-drag-dialog
+        v-el-dialog-center
+      >
+        <template #title>
+          <span class="el-dialog__title">流程通过<span style="margin-left: 10px;margin-right: 10px;">—</span><b
+            class="f-red" style="font-size: 12px;">节点：{{
+              wfInfo.taskName
+            }}</b></span>
+        </template>
+        <el-form :model="agreeForm">
+          <div id="containt">
+            <table class="table-detail">
+              <tbody>
+              <tr v-if="agreeNodes.length>0">
+                <th>
+                    <span class="t">
+                      通过节点
+                    </span>
+                </th>
+                <td>
+                  <el-form-item label="" field="nodeId">
+                    <el-select v-model="agreeForm.nodeId" placeholder="请选择通过节点">
+                      <el-option v-for="(node,index) in agreeNodes" :label="node.nodeName"
+                                 :value="node.nodeId" :key="index"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </td>
+              </tr>
+              <tr>
+                <th>
+                    <span class="t">
+                      通过意见
+                    </span>
+                </th>
+                <td>
+                  <el-form-item label="" field="opinion">
+                    <el-input type="textarea" :rows="8" placeholder="请填写您的意见~
+         注：
+         通过默认意见为“同意”
+          " v-model="agreeForm.opinion"></el-input>
+                  </el-form-item>
+                </td>
+              </tr>
+              </tbody>
+            </table>
+          </div>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" plain class="button-sty" @click="agreeDialogVisible = false">
+            <i class="el-icon-close el-icon"></i>
+            取 消
+          </el-button>
+          <el-button type="primary" @click="subAgreeForm" class="button-sty">
+            <i class="el-icon-check el-icon"></i>
+            确 定
+          </el-button>
+        </span>
+      </el-dialog>
+      <el-dialog
+        v-if="changeWfDialogVisible"
+        :visible.sync="changeWfDialogVisible"
+        :modal-append-to-body="false"
+        :close-on-click-modal="false"
+        :modal="false"
+        custom-class="dialog-style wf-dialog"
+        v-el-drag-dialog
+        v-el-dialog-center
+      >
+        <template #title>
+          <span class="el-dialog__title">流程转办<span style="margin-left: 10px;margin-right: 10px;">—</span><b
+            class="f-red" style="font-size: 12px;">节点：{{
+              wfInfo.taskName
+            }}</b></span>
+        </template>
+        <el-form :model="changeWfForm">
+          <div id="containt">
+            <table class="table-detail">
+              <tbody>
+              <tr>
+                <th>
+                    <span class="t">
+                      转办人
+                    </span>
+                </th>
+                <td>
+                  <el-form-item label="" field="nodeId">
+                    <el-input
+                      class="search-input"
+                      max="200"
+                      v-model="changeWfForm.userNickNames"
+                      @clear="
+                          changeWfForm.userIds = '';
+                          changeUserRows = [];
+                          $forceUpdate();
+                        "
+                      placeholder="请选择转办人"
+                      v-el-readonly
+                      clearable
+                    >
+                      <i slot="suffix" class="el-input__icon el-icon-search" @click="showUserDialog = true"></i>
+                    </el-input>
+                  </el-form-item>
+                </td>
+              </tr>
+              <tr>
+                <th>
+                    <span class="t">
+                      转办意见
+                    </span>
+                </th>
+                <td>
+                  <el-form-item label="" field="opinion">
+                    <el-input type="textarea" :rows="8" placeholder="请输入内容"
+                              v-model="changeWfForm.opinion"></el-input>
+                  </el-form-item>
+                </td>
+              </tr>
+              </tbody>
+            </table>
+          </div>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" plain class="button-sty" @click="changeWfDialogVisible = false">
+            <i class="el-icon-close el-icon"></i>
+            取 消
+          </el-button>
+          <el-button type="primary" @click="subChangeWfForm" class="button-sty">
+            <i class="el-icon-check el-icon"></i>
+            确认转办
+          </el-button>
+        </span>
+      </el-dialog>
+      <user-dialog v-if="showUserDialog" :visiable.sync="showUserDialog" @close="showUserDialog = false"
+                   @confirm="userConfirm" multi="true" :param.sync="wfUserParamForTransfer"
+                   :rows="changeUserRows"></user-dialog>
+      <itemViewDialog v-if="showItemViewDialog" :visiable.sync="showItemViewDialog" :billJson="billJson"
+                      :item="checkItem" :itemData="checkItemData" :itemDataH="itemDataH"
+                      :isCompare="isCompare" @openItemDetailDialog="openItemDetailDialog"></itemViewDialog>
+    </el-form>
+    <!--    <div class="fix-bottom-btns" v-if="showContent">
+          <el-button class="btn" type="primary">保存</el-button>
+          <el-button class="btn" type="success">提交</el-button>
+        </div>-->
+
+    <queryDialog v-if="showQueryDialog" :visiable.sync="showQueryDialog" :option="queryDialogOption"
+                 @confirm="confirmQueryDialog"></queryDialog>
+
+    <modifyDialog v-if="showModifyDialog" :visiable.sync="showModifyDialog" :option="modifyDialogOption"
+                  @reload="$emit('reload')"></modifyDialog>
+
+    <detailDialog v-if="showDetailDialog" :visiable.sync="showDetailDialog" :option="detailDialogOption"
+                  @reload="$emit('reload')"></detailDialog>
+
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+import queryDialog from "./queryDialog";
+import wfMixin from "./mixins/wf";
+import userDialog from "./userDialog.vue";
+import compareView from "./compareView.vue";
+
+
+// import modifyDialog from "./h5_ModifyDialog";
+
+
+export default {
+  name: "render",
+  components: {
+    queryDialog,
+    userDialog,
+    itemViewDialog: () => import("./itemViewDialog"),
+    modifyDialog: () => import("./h5_ModifyDialog"),
+    detailDialog: () => import("./h5_detailDialog"),
+    compareView
+  },
+  props: {
+    wfModify: {
+      type: Boolean,
+      default: () => false
+    },
+    isPreview: {
+      type: Boolean,
+      default: () => false
+    },
+  },
+  mixins: [wfMixin],
+  data() {
+    return {
+      activeName: 0,
+      billJson: {tabList: []},
+      template: {},
+      formData: {},
+      isEdit: false,
+      dataId: null,
+      uploadUrl: null,
+      disabled: true,
+      billSetting: {},
+      option: {},
+      showContent: false,
+      showQueryDialog: false,
+      queryDialogOption: {},
+
+      showItemViewDialog: false,
+      checkItem: null,
+      checkItemData: null,
+      wfEnabled: false,
+
+      formDataH: {},
+      isCompare: false,
+      itemDataH: {},
+
+      showModifyDialog: false,
+      showDetailDialog: false,
+      detailDialogOption: {},
+      formData2: {}
+
+    };
+  },
+  provide() {
+    return {
+      getBillJson: () => this.billJson
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+
+  },
+  methods: {
+    getFieldDTOsGroups(fieldDTOs, flag) {
+      let list = [];
+      let items = fieldDTOs.filter(fieldDTO => {
+        return fieldDTO.enabled && (flag !== 1 || fieldDTO.showForRow == true)
+      });
+      let span = 2;
+      items.forEach(item => {
+        if (item.fieldSize == 'small') {
+          if (span == 1) {
+            list[list.length - 1].push(item)
+            span = 2;
+          } else {
+            list.push([item]);
+            span = 1;
+          }
+        } else {
+          list.push([item]);
+          span = 2;
+        }
+      })
+      return list;
+    },
+    getFormItemClass(fieldDTO) {
+      let classList = [];
+      if (fieldDTO.bold === true) {
+        classList.push('bold');
+      }
+      if (fieldDTO.colorClass) {
+        classList.push(fieldDTO.colorClass);
+      }
+      return classList.join(' ');
+    },
+    getData2(billJson, reqParam, rowData, callback) {
+      let dataId = this.dataId;
+      let isEdit = this.isEdit;
+      let defaultFormData = {};
+      let pFormData = this.formData;
+      billJson.tabList.forEach(tab => {
+        if (tab.enabled) {
+          tab.itemDTOs.forEach(item => {
+            if (item.enabled) {
+              let type = item.type;
+              if (type == 1) {
+                item.fieldDTOs.forEach(fieldDTO => {
+                  if (isEdit) {
+                    defaultFormData[fieldDTO.fieldName] = null;
+                  } else {
+                    defaultFormData[fieldDTO.fieldName] = fieldDTO.defaultValue ?? null
+                  }
+                  if ([4, 8].includes(fieldDTO.fieldStyle) && defaultFormData[fieldDTO.fieldName] == null) {
+                    defaultFormData[fieldDTO.fieldName] = [];
+                  }
+                })
+              } else if (type == 2) {
+                if (isEdit) {
+                  defaultFormData[item.fieldName] = [];
+                } else {
+                  defaultFormData[item.fieldName] = item.defaultValue ?? [];
+                }
+              } else if (type == 3) {
+                if (isEdit) {
+                  defaultFormData[item.fieldName] = [];
+                } else {
+                  defaultFormData[item.fieldName] = item.defaultValue ?? [];
+                }
+              }
+            }
+          })
+        }
+      })
+      let url = billJson.getUrl;
+      let newBillJson = {...billJson};
+      if (reqParam) {
+        newBillJson.reqParam = reqParam;
+      }
+      let reqData0 = this.getReqParam(newBillJson, dataId, pFormData, rowData);
+      this.$commonHttp({
+        url: url,
+        method: `post`,
+        data: reqData0,
+        isLoading: true,
+        modalStrictly: true,
+        success: res => {
+          let formData = res.objx || {};
+          const requests = [];
+          billJson.tabList.forEach(tab => {
+            if (tab.enabled) {
+              tab.itemDTOs.forEach(item => {
+                if (item.enabled) {
+                  let type = item.type;
+                  if (type == 2 || type == 3) {
+                    let reqData = this.getReqParam(item, formData.id, formData);
+                    requests.push(this.$http({
+                      url: item.getUrl,
+                      method: `post`,
+                      data: reqData,
+                      isLoading: true,
+                      modalStrictly: true,
+                      success: res1 => {
+                        formData[item.fieldName] = res1.objx || [];
+                      }
+                    }))
+                  }
+                }
+              })
+            }
+          })
+          if (requests.length) {
+            Promise.all(requests)
+              .then(responses => {
+                // 所有请求都成功了
+                // 处理你的数据
+                /*responses.forEach(response => {
+                  console.log(response.data);
+                });*/
+                formData = Object.assign({}, defaultFormData, formData);
+                this.formData2 = formData;
+                callback && callback(formData)
+              })
+              .catch(error => {
+                // 至少一个请求失败了
+                console.error('An error occurred:', error);
+              });
+          } else {
+            formData = Object.assign({}, defaultFormData, formData);
+            this.formData2 = formData;
+            callback && callback(formData)
+          }
+        }
+      });
+
+    },
+    openDetailDialog(itemDTO, fieldDTO) {
+      if (!fieldDTO.detailDialog || !fieldDTO.detailCode) {
+        return;
+      }
+      let detailReqParam = fieldDTO.detailReqParam;
+      this.getBillSetting(fieldDTO.detailCode, {
+        success: res => {
+          let billSetting = res.objx || {};
+          let jsonStr = billSetting.data;
+          let detailJson = JSON.parse(jsonStr);
+          this.getData2(detailJson, detailReqParam, null, (formData2) => {
+            this.detailDialogOption = {
+              formData: formData2,
+              billJson: detailJson
+            };
+            this.showDetailDialog = true;
+          })
+        }
+      });
+
+    },
+    init2(option) {
+      this.formData = option.formData;
+      this.billJson = option.billJson;
+      this.billSetting = option.billSetting
+      this.option = option;
+      this.showContent = true;
+    },
+    async init(option, isPreview) {
+      this.showContent = false;
+      this.formData = {};
+      this.billJson = {tabList: []};
+      this.dataId = option.dataId || null;
+      this.isEdit = !!option.dataId;
+      this.option = option;
+
+      this.wfEnabled = option.wfEnabled === true || option.wfEnabled === "true" || this.$route.query.wfEnabled === "true";
+      await this.initTemplate(option, isPreview);
+      this.getData();
+    },
+    initTemplate(option, isPreview) {
+      let code = option.code;
+      let billSetting = option.billSetting
+      if (isPreview) {
+        this.billSetting = billSetting;
+        let jsonStr = this.billSetting.data;
+        if (jsonStr) {
+          this.billJson = JSON.parse(jsonStr)
+        }
+        return
+      }
+
+      return this.getBillSetting(code, {
+        success: res => {
+          this.billSetting = res.objx || {};
+          let jsonStr = this.billSetting.data;
+          if (jsonStr) {
+            this.billJson = JSON.parse(jsonStr)
+          }
+        }
+      });
+    },
+    getBillSetting(code, option) {
+      return this.$http({
+        url: USER_PREFIX + `/bill_setting/getByCode`,
+        method: `post`,
+        data: {
+          stringOne: code
+        },
+        isLoading: true,
+        modalStrictly: true,
+        ...option
+      });
+    },
+    getData() {
+      let dataId = this.dataId;
+      let isEdit = this.isEdit;
+      let billJson = this.billJson;
+      let defaultFormData = {};
+      billJson.tabList.forEach(tab => {
+        if (tab.enabled) {
+          tab.itemDTOs.forEach(item => {
+            if (item.enabled) {
+              let type = item.type;
+              if (type == 1) {
+                item.fieldDTOs.forEach(fieldDTO => {
+                  if (isEdit) {
+                    defaultFormData[fieldDTO.fieldName] = null;
+                  } else {
+                    defaultFormData[fieldDTO.fieldName] = fieldDTO.defaultValue ?? null
+                  }
+                  if ([4, 8].includes(fieldDTO.fieldStyle) && defaultFormData[fieldDTO.fieldName] == null) {
+                    defaultFormData[fieldDTO.fieldName] = [];
+                  }
+                })
+              } else if (type == 2) {
+                if (isEdit) {
+                  defaultFormData[item.fieldName] = [];
+                } else {
+                  defaultFormData[item.fieldName] = item.defaultValue ?? [];
+                }
+              } else if (type == 3) {
+                if (isEdit) {
+                  defaultFormData[item.fieldName] = [];
+                } else {
+                  defaultFormData[item.fieldName] = item.defaultValue ?? [];
+                }
+              }
+            }
+          })
+        }
+      })
+      if (dataId && !isNaN(dataId)) {
+        let url = billJson.getUrl;
+        let reqData0 = this.getReqParam(billJson, dataId, {id: dataId})
+        this.$commonHttp({
+          url: url,
+          method: `post`,
+          data: reqData0,
+          isLoading: true,
+          modalStrictly: true,
+          success: res => {
+            let formData = res.objx || {};
+            const requests = [];
+            billJson.tabList.forEach(tab => {
+              if (tab.enabled) {
+                tab.itemDTOs.forEach(item => {
+                  if (item.enabled) {
+                    let type = item.type;
+                    if (type == 2 || type == 3) {
+                      let reqData = this.getReqParam(item, dataId, formData);
+                      requests.push(this.$http({
+                        url: item.getUrl,
+                        method: `post`,
+                        data: reqData,
+                        isLoading: true,
+                        modalStrictly: true,
+                        success: res1 => {
+                          formData[item.fieldName] = res1.objx || [];
+                        }
+                      }))
+                    }
+                  }
+                })
+              }
+            })
+            if (requests.length) {
+              Promise.all(requests)
+                .then(responses => {
+                  // 所有请求都成功了
+                  // 处理你的数据
+                  /*responses.forEach(response => {
+                    console.log(response.data);
+                  });*/
+                  formData = Object.assign({}, defaultFormData, formData);
+                  this.formData = formData;
+                  this.showContent = true;
+                  this.createWfContent();
+                })
+                .catch(error => {
+                  // 至少一个请求失败了
+                  console.error('An error occurred:', error);
+                });
+            } else {
+              formData = Object.assign({}, defaultFormData, formData)
+              this.formData = formData;
+              this.showContent = true;
+              this.createWfContent();
+            }
+          }
+        });
+      } else {
+        this.formData = defaultFormData;
+        this.showContent = true;
+      }
+    },
+    createWfContent() {
+      let billJson = this.billJson;
+      let objId = this.dataId;
+      let wfCode = billJson.wfCode;
+      if (objId && billJson.wfEnabled && wfCode) {
+        let wfConfig = {objId: objId, wfCode: wfCode}
+        let urlArr = billJson.getUrl.split('/');
+        let opt2 = Object.assign({}, wfConfig, {
+          serviceId: urlArr[1]
+        });
+        this.initWf(opt2)
+      }
+    },
+    saveData() {
+      if (this.isPreview === true) {
+        return
+      }
+      this.$refs.editForm.$baseValidate(valid => {
+        if (valid) {
+          this.$baseConfirm('您确定要保存吗？').then(() => {
+            var url = this.billJson.saveUrl;
+            this.$http({
+              url: url,
+              method: `post`,
+              data: this.formData,
+              isLoading: true,
+              success: res => {
+                this.$message({
+                  message: res.content,
+                  type: 'success',
+                  duration: 500,
+                  onClose: t => {
+                    if (this.wfModify) {
+                      this.$emit('modifyCallback');
+                    } else {
+                      this.$emit('reload');
+                    }
+                  }
+                });
+              }
+            });
+          });
+        }
+      });
+    },
+    async handleBeforeUpload(file, uploadRef) {
+      /*let target = this.$refs[uploadRef][0];
+      let nFile = target.getFile(file);
+      if (!nFile) {
+        return false;
+      }*/
+      var mineUploadUrl = window.BASE_FILEURL;
+      await this.$http({
+        url: mineUploadUrl,
+        method: 'post',
+        data: {
+          isAuth: false
+        },
+        success: res => {
+          this.uploadUrl = res.objx;
+        }
+      });
+    },
+    //明细begin
+    getCellValue(row, fieldDTO) {
+      if (!row) return null;
+      let rowValue = row[fieldDTO.fieldName];
+      if ([1, 2, 5, 9].includes(fieldDTO.fieldStyle)) {
+        return rowValue;
+      } else if ([3, 6, 7].includes(fieldDTO.fieldStyle)) {
+        let item = fieldDTO.fieldStyleValue.find(item => rowValue === item.value)
+        return item ? item.label : null;
+      } else if ([4, 8].includes(fieldDTO.fieldStyle)) {
+        rowValue = rowValue || [];
+        let label = fieldDTO.fieldStyleValue.filter(item => rowValue.includes(item.value)).map(item => item.label).join(",");
+        return label;
+      }
+    },
+    removeItem(items, index) {
+      items.splice(index, 1);
+    },
+    openQueryDialog(itemDTO) {
+      this.queryDialogOption = {
+        itemDTO: itemDTO
+      };
+      this.showQueryDialog = true;
+    },
+    confirmQueryDialog(rows) {
+      let itemDTO = this.queryDialogOption.itemDTO;
+      this.addTableData(itemDTO, rows);
+    },
+    addItem(itemDTO) {
+      if (itemDTO.queryDialog) {
+        this.openQueryDialog(itemDTO);
+      } else {
+        this.addTableData(itemDTO);
+      }
+    },
+    addTableData(itemDTO, rows, field) {
+      let addConfig = itemDTO.addConfig;
+      field = field || addConfig.uniqueKey || null;
+      let insertDefaultJson = addConfig.insertDefaultJson || {};
+      let insertDefaultData = addConfig.insertDefaultData || {};
+      let fullData = this.formData[itemDTO.fieldName] || [];
+      let items;
+      if (field) {
+        let keys = fullData.map(item => {
+          return item[field] + "";
+        });
+        let fields = Object.keys(insertDefaultJson);
+        items = rows.map(row => {
+          let item = {};
+          fields.forEach(field => {
+            let field2 = insertDefaultJson[field];
+            if (field2 === "" || field2 === null) {
+              item[field] = field2;
+            } else {
+              item[field] = row[field2] ?? null
+            }
+          })
+          item = Object.assign({}, insertDefaultData, item)
+          return item;
+        }).filter(item => {
+          let value = item[field] + ""
+          return !keys.includes(value);
+        });
+      } else {
+        items = rows || [insertDefaultData];
+      }
+      fullData.push(...items);
+    },
+    openItemViewDialog(item, itemData) {
+      if (item.detailDialog == true && item.detailCode) {
+        this.openItemDetailDialog(item, null, itemData)
+        return
+      }
+      this.checkItem = item;
+      this.checkItemData = itemData;
+      this.itemDataH = itemData.hData || {};
+      this.showItemViewDialog = true;
+    },
+    openItemDetailDialog(itemDTO, fieldDTO, itemData) {
+      let detailCode;
+      let detailReqParam;
+      if (fieldDTO) {
+        if (!fieldDTO.detailDialog || !fieldDTO.detailCode) {
+          return;
+        }
+        detailCode = fieldDTO.detailCode;
+        detailReqParam = fieldDTO.detailReqParam;
+      } else {
+        if (!itemDTO.detailDialog || !itemDTO.detailCode) {
+          return;
+        }
+        detailCode = itemDTO.detailCode;
+        detailReqParam = itemDTO.detailReqParam;
+      }
+
+      this.getBillSetting(detailCode, {
+        success: res => {
+          let billSetting = res.objx || {};
+          let jsonStr = billSetting.data;
+          let detailJson = JSON.parse(jsonStr);
+          this.getData2(detailJson, detailReqParam, itemData, (formData2) => {
+            this.detailDialogOption = {
+              formData: formData2,
+              billJson: detailJson,
+              parentRowData: itemData
+            };
+            this.showDetailDialog = true;
+          })
+        }
+      });
+
+    },
+    getPropIndex(item, fieldDTO, index) {
+      return item.fieldName + "." + index + "." + fieldDTO.fieldName
+    },
+    //明细end
+    //附件begin
+    getReqParam(item, dataId, billData, rowData) {
+      let param = {};
+      if (item.reqParam) {
+        if (typeof item.reqParam === "string") {
+          let n = new Function('billData', "rowData", item.reqParam);
+          param = n.call(this, billData, rowData);
+        } else {
+          param = item.reqParam
+        }
+      } else {
+        param = {id: dataId}
+      }
+      return param;
+    },
+    uploadSectionFile(param, uploadRef) {
+      let that = this;
+      var fileObj = param.file;
+
+      let source;
+      var form = new FormData();
+      // 文件对象
+      form.append("file", fileObj);
+      var uploadUrl = this.uploadUrl;
+      if (uploadUrl) {
+        var abort;
+        let config = {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          },
+          cancelToken: new axios.CancelToken(function executor(c) {
+            let target = that.$refs[uploadRef][0];
+            let file = target.getFile(fileObj);
+            abort = c;
+            file.abort = c;
+          }),
+          onUploadProgress: progressEvent => {
+            let target = that.$refs[uploadRef][0];
+            let file = target.getFile(fileObj);
+
+            if (file) {
+              // progressEvent.loaded:已上传文件大小
+              // progressEvent.total:被上传文件的总大小
+              progressEvent.percent = Math.floor((progressEvent.loaded * 100) / progressEvent
+                .total);
+              param.onProgress(progressEvent, fileObj);
+            }
+          }
+        }; //添加请求头
+
+        let req = this.$http.post(uploadUrl, form, config).then(res1 => {
+          if (res1.type == "success") {
+            param.onSuccess(res1, fileObj);
+          } else {
+            param.onError(new Error(res1.content || '上传异常'));
+          }
+        }).catch(({
+                    err
+                  }) => {
+          try {
+            param.onError(err, fileObj);
+          } catch (tt) {
+          }
+        });
+        req.abort = () => {
+          abort("取消上传");
+        }
+        //return req;
+      }
+
+    },
+    handlePictureCardPreview() {
+    },
+    handleDownload() {
+    },
+    handleRemove() {
+    },
+    handleSuccess(param) {
+      let {response, file, fileList, uploadRef, item} = param
+      let target = this.$refs[uploadRef][0];
+      let fileInfo = response.objx
+      fileInfo.name = file.name;
+      target.uploadFiles.splice((target.uploadFiles.length - 1), 1);
+      if (item.type == 3) {
+        this.formData[item.fieldName].push(fileInfo)
+      } else if (item.type == 4) {
+        // this.formData[item.fieldName] = fileInfo.domain + fileInfo[item.fileConfig.dataType];
+        this.$set(this.formData, item.fieldName, (fileInfo.domain + fileInfo[item.fileConfig.dataType]));
+      }
+    },
+    getShowUrl(attachment, field) {
+      let showUrl = null;
+      let typeStr = Object.prototype.toString.call(attachment);
+      if (typeStr == '[object Object]') {
+        let showField = field ? field : 'medium';
+        let fullUrl = attachment.domain + (attachment[showField] ? attachment[showField] : attachment.url);
+        showUrl = this.$commonFileUtil.getShowUrl(fullUrl)
+      } else {
+        showUrl = this.$commonFileUtil.getShowUrl(attachment)
+      }
+      return showUrl;
+    },
+    removeFile(itemDTO, items, index) {
+      if (itemDTO.type == 3) {
+        items.splice(index, 1);
+      } else if (itemDTO.type == 4) {
+        this.formData[itemDTO.fieldName] = null;
+      }
+    },
+    getIsShowItem(item) {
+      let billData = this.formData
+      let result = true;
+      let show = item.show;
+      if (show !== null && show !== undefined) {
+        if (show == "true") {
+          result = true;
+        } else if (show == "false") {
+          result = false;
+        } else if (typeof show === "string") {
+          let n = new Function('billData', show);
+          result = n.call(this, billData);
+        } else {
+          result = show
+        }
+      }
+      return result;
+    },
+    getAttachmentName(attachment) {
+      let name = null;
+      let typeStr = Object.prototype.toString.call(attachment);
+      if (typeStr == '[object Object]') {
+        name = attachment.name;
+      } else {
+        let url = attachment;
+        if (url) {
+          var i = url.lastIndexOf("/");
+          if (i >= 0) {
+            name = url.substring(i + 1, url.length);
+          }
+        }
+      }
+      return name;
+    },
+    //附件end
+    //对比 begin
+    compare() {
+      this.getDataH(() => {
+        this.isCompare = true;
+      })
+    },
+    getDataH(callback) {
+      let dataId = this.dataId;
+      let isEdit = this.isEdit;
+      let billJson = this.billJson;
+      let defaultFormData = {};
+      billJson.tabList.forEach(tab => {
+        if (tab.enabled) {
+          tab.itemDTOs.forEach(item => {
+            if (item.enabled) {
+              let type = item.type;
+              if (type == 1) {
+                item.fieldDTOs.forEach(fieldDTO => {
+                  if (isEdit) {
+                    defaultFormData[fieldDTO.fieldName] = null;
+                  } else {
+                    defaultFormData[fieldDTO.fieldName] = fieldDTO.defaultValue ?? null
+                  }
+                  if ([4, 8].includes(fieldDTO.fieldStyle) && defaultFormData[fieldDTO.fieldName] == null) {
+                    defaultFormData[fieldDTO.fieldName] = [];
+                  }
+                })
+              } else if (type == 2) {
+                if (isEdit) {
+                  defaultFormData[item.fieldName] = [];
+                } else {
+                  defaultFormData[item.fieldName] = item.defaultValue ?? [];
+                }
+              } else if (type == 3) {
+                if (isEdit) {
+                  defaultFormData[item.fieldName] = [];
+                } else {
+                  defaultFormData[item.fieldName] = item.defaultValue ?? [];
+                }
+              }
+            }
+          })
+        }
+      })
+      if (dataId && !isNaN(dataId)) {
+        let url = billJson.getUrlH || billJson.getUrl;
+        // let url = billJson.getUrlH;
+        let reqData0 = this.getReqParamH(billJson, dataId, {id: null})
+        this.$commonHttp({
+          url: url,
+          method: `post`,
+          data: reqData0,
+          isLoading: true,
+          modalStrictly: true,
+          success: res => {
+            let formDataH = res.objx || {};
+            const requests = [];
+            billJson.tabList.forEach(tab => {
+              if (tab.enabled) {
+                tab.itemDTOs.forEach(item => {
+                  if (item.enabled) {
+                    let type = item.type;
+                    if (type == 2 || type == 3) {
+                      let reqData = this.getReqParamH(item, dataId, formDataH);
+                      requests.push(this.$http({
+                        url: item.getUrl,
+                        method: `post`,
+                        data: reqData,
+                        isLoading: true,
+                        modalStrictly: true,
+                        success: res1 => {
+                          let rows = res1.objx || [];
+                          let fieldNameH = item.fieldNameH || item.fieldName;
+                          formDataH[fieldNameH] = rows;
+                          let uniKeyName = item.uniKeyName;
+                          let uniKeyNameH = item.uniKeyNameH;
+                          this.formData[item.fieldName].forEach(item => {
+                            let row = rows.find(rowH => rowH[uniKeyNameH] == item[uniKeyName]);
+                            item.hData = row ? this.$baseLodash.cloneDeep(row) : {};
+                          })
+                        }
+                      }))
+                    }
+                  }
+                })
+              }
+            })
+            if (requests.length) {
+              Promise.all(requests)
+                .then(responses => {
+                  // 所有请求都成功了
+                  // 处理你的数据
+                  /*responses.forEach(response => {
+                    console.log(response.data);
+                  });*/
+                  formDataH = Object.assign({}, defaultFormData, formDataH);
+                  this.formDataH = formDataH;
+                  callback && callback();
+                })
+                .catch(error => {
+                  // 至少一个请求失败了
+                  console.error('An error occurred:', error);
+                });
+            } else {
+              formDataH = Object.assign({}, defaultFormData, formDataH)
+              this.formDataH = formDataH;
+              callback && callback();
+            }
+          }
+        });
+      } else {
+        this.formDataH = defaultFormData;
+        callback && callback();
+      }
+    },
+    getReqParamH(item, dataId, billDataH) {
+      let param = {};
+      let billData = this.formData;
+      let reqParamH = item.reqParamH;
+      if (reqParamH) {
+        if (typeof reqParamH === "string") {
+          let n = new Function('billData', 'billDataH', reqParamH);
+          param = n.call(this, billData, billDataH);
+        } else {
+          param = reqParamH
+        }
+      } else {
+        param = {id: dataId}
+      }
+      return param;
+    },
+    getHValue(row, itemDTO, fieldDTO) {
+      let rowH = row.hData;
+      if (rowH) {
+        return rowH[fieldDTO.fieldName];
+      } else {
+        return null;
+      }
+    },
+    isItemChange(row, itemDTO) {
+      let isChange = false;
+      let hData = row.hData;
+      if (hData && this.isCompare) {
+        isChange = itemDTO.fieldDTOs.find(fieldDTO => {
+          if (fieldDTO.enabled) {
+            return row[fieldDTO.fieldName] !== hData[fieldDTO.fieldName]
+          } else {
+            return false
+          }
+        }) != null;
+      }
+      return isChange
+    },
+    getIsCompareEnabled() {
+      let billJson = this.billJson;
+      let billData = this.formData
+      let result = false;
+      let show = billJson?.compareEnabled;
+      if (show !== null && show !== undefined) {
+        if (show == "true") {
+          result = true;
+        } else if (show == "false") {
+          result = false;
+        } else if (typeof show === "string") {
+          let n = new Function('billData', show);
+          result = n.call(this, billData);
+        } else {
+          result = show
+        }
+      }
+      return result;
+    },
+    getIsItemCompareEnabled(itemJson) {
+      let billData = this.formData
+      let result = false;
+      let show = itemJson?.compareEnabled;
+      if (show !== null && show !== undefined) {
+        if (show == "true") {
+          result = true;
+        } else if (show == "false") {
+          result = false;
+        } else if (typeof show === "string") {
+          let n = new Function('billData', show);
+          result = n.call(this, billData);
+        } else {
+          result = show
+        }
+      }
+      result = this.getIsCompareEnabled() && result
+      return result;
+    },
+    //对比 end
+  }
+};
+</script>
+<style scoped lang="scss">
+.h5-wrap {
+  max-width: 640px;
+  margin: auto;
+  background: #F1F5FB;
+
+  .header-box {
+    background-color: #FFF;
+    text-align: center;
+    line-height: 46px;
+    height: 46px;
+    font-size: 16px;
+    color: #212121;
+    position: relative;
+
+    .go-back {
+      position: absolute;
+      left: 14px;
+      top: 0;
+      line-height: 46px;
+      font-size: 20px;
+    }
+  }
+
+  .form-box {
+    background-color: transparent;
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 120px);
+
+    .c {
+      padding: 12px 16px 0;
+      overflow: auto;
+      flex: 1;
+
+      .c-item {
+        background: #FFF;
+        border-radius: 12px;
+        padding: 0 16px 6px;
+        margin-bottom: 12px;
+        overflow: hidden;
+
+        .tit {
+          margin: 0 -16px;
+          padding: 16px 16px 4px;
+          position: relative;
+
+          b {
+            font-size: 14px;
+            font-weight: 600;
+            color: #323232;
+
+            &:before {
+              content: "";
+              width: 4px;
+              height: 13px;
+              top: 18px;
+              background-color: #2A6494;
+              left: 0;
+              position: absolute;
+              border-radius: 4px;
+            }
+          }
+
+          .el-link {
+            font-size: 13px;
+            margin-left: 12px;
+            color: #2A6494;
+
+            .el-link--inner span {
+              position: relative;
+
+              &:before {
+                content: "";
+                position: absolute;
+                height: 1px;
+                left: 0;
+                right: 0;
+                bottom: -2px;
+                background: #2A6494;
+              }
+            }
+
+            &:hover:after {
+              display: none
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .tab-box {
+    border-bottom: solid 1px #EEEFF1;
+    overflow: hidden;
+    height: 36px;
+    line-height: 30px;
+    font-size: 13px;
+    background: #FFF;
+    box-shadow: 0 3px 4px rgb(0 0 0 / 2%);
+
+    > div {
+      overflow: auto;
+      height: 44px;
+      white-space: nowrap;
+
+      .item {
+        display: inline-block;
+        margin: 0 20px 0 18px;
+        color: #808080;
+        position: relative;
+
+        &.on {
+          color: #323232;
+
+          &:after {
+            content: "";
+            height: 4px;
+            width: 20px;
+            left: 50%;
+            margin-left: -10px;
+            background-color: #2A6494;
+            position: absolute;
+            bottom: 0;
+            border-radius: 4px;
+          }
+        }
+
+      }
+    }
+
+  }
+}
+
+
+.pro-list {
+  .pro-item {
+    position: relative;
+    border: solid 1px #E9E9E9;
+    padding: 12px;
+    border-radius: 12px;
+    margin: 8px 8px 14px;
+
+    .close {
+      position: absolute;
+      right: -10px;
+      top: -10px;
+      border: solid 4px #FFF;
+      background: #F56C6C;
+      opacity: 1;
+      padding: 3px;
+    }
+
+    .t {
+      font-size: 14px;
+      color: #323232;
+      margin-bottom: 5px;
+      padding-right: 28px;
+
+      span {
+        vertical-align: middle;
+      }
+
+      i.el-icon-warning {
+        float: right;
+        margin-top: 2px;
+        color: #ff731c;
+      }
+
+      &:before {
+        content: "";
+        width: 5px;
+        height: 5px;
+        background: #2A6494;
+        border-radius: 50%;
+        vertical-align: middle;
+        margin-right: 4px;
+        display: inline-block;
+        margin-top: -1px;
+      }
+
+      &:after {
+        content: "\e6e0";
+        font-family: element-icons !important;
+        background: #2a64941f;
+        border-radius: 50%;
+        position: absolute;
+        right: 12px;
+        width: 20px;
+        height: 20px;
+        text-align: center;
+        line-height: 20px;
+        font-size: 12px;
+        top: 10px;
+      }
+    }
+
+    .info {
+      font-size: 10px;
+      color: #999;
+
+      p {
+        min-width: 49%;
+        display: inline-block;
+        margin-bottom: 3px;
+        padding-right: 20px;
+      }
+
+      ::v-deep {
+        .el-form-item {
+          display: flex;
+          border-bottom: none;
+          min-width: 49%;
+          padding: 0 4px 0 0;
+          align-items: start;
+
+          .el-form-item__label {
+            display: inline;
+            width: auto;
+            vertical-align: middle;
+          }
+
+          .el-form-item__content {
+            display: inline;
+            min-height: auto;
+            line-height: 16px;
+            font-size: 12px;
+            flex: 1;
+            word-break: break-word;
+            text-align: left;
+          }
+
+          .el-input {
+            //width: 68px !important;
+
+            .el-input__inner {
+              border: solid 1px #E9E9E9;
+              border-radius: 6px;
+              height: 24px !important;
+              border-radius: 6px;
+            }
+
+            .el-input__suffix {
+              top: 0;
+
+              .el-input__suffix-inner .el-input__icon {
+                line-height: 24px !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.fix-bottom-btns {
+  background: #FFF;
+  position: static;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 0 18px;
+  display: block;
+
+  .btn {
+    flex: 1;
+    border-radius: 30px;
+    outline: none;
+    width: calc(50% - 10px);
+    margin: 6px 5px;
+
+    i {
+      margin-right: 4px;
+
+      &.icon-tongguo {
+        font-size: 18px;
+      }
+    }
+  }
+}
+
+::v-deep .el-form {
+  .el-form-item {
+    border-bottom: solid 1px #F3F3F3;
+    //display: flex;
+    padding: 6px 0;
+    //align-items: center;
+    position: relative;
+    width: 100%;
+
+    &.m2 {
+      width: 50%;
+      float: left;
+    }
+
+    .el-form-item__label {
+      padding: 0 5px 0 0;
+      margin: 0;
+      font-size: 1.25rem;
+      width: 98px;
+      line-height: 1.4;
+      height: auto;
+      overflow: hidden;
+
+      &:before {
+        position: absolute;
+        margin-left: -10px;
+        margin-top: 2px;
+      }
+    }
+
+    .el-form-item__content {
+      // line-height: 34px;
+      // min-height: 34px;
+      // text-align: right;
+      // flex: 1;
+
+      .el-input, .el-select {
+        width: 100% !important;
+
+        .el-input__inner {
+          height: 34px !important;
+          border: none;
+          text-align: right;
+        }
+
+        .el-input__suffix, .el-input__prefix {
+          .el-input__icon {
+            line-height: 34px !important
+          }
+        }
+      }
+
+      .el-textarea .el-textarea__inner {
+        border: none;
+        text-align: right;
+      }
+
+      .el-input-number {
+        width: 98px;
+
+        .el-input__inner {
+          text-align: center;
+        }
+
+        .el-input-number__increase, .el-input-number__decrease {
+          width: 24px;
+          height: 24px;
+          border-radius: 50%;
+          background: #EAEAEA;
+          margin-top: 4px;
+        }
+      }
+
+      .el-radio-group .el-radio {
+        margin-right: 0;
+        margin-bottom: 0;
+        margin-left: 8px;
+
+        .el-radio__label {
+          padding-left: 4px;
+        }
+      }
+
+      .el-checkbox-group .el-checkbox {
+        margin-right: 0;
+        margin-bottom: 0;
+        margin-left: 8px;
+
+        .el-checkbox__label {
+          padding-left: 4px;
+        }
+      }
+
+      .status {
+        text-align: right;
+        color: #2A6494;
+
+        &:before {
+          content: "";
+          width: 5px;
+          height: 5px;
+          background-color: #2A6494;
+          border-radius: 50%;
+          vertical-align: middle;
+          display: inline-block;
+          margin-right: 4px;
+        }
+      }
+    }
+
+    &:last-child {
+      border-bottom: none
+    }
+  }
+}
+
+::v-deep .el-upload-list {
+  margin: 10px 0;
+  display: inline-block;
+  vertical-align: middle;
+
+  .el-upload-list__item {
+    width: 74px;
+    height: 74px;
+    padding: 0;
+    border: none;
+    border-radius: 6px;
+    margin-bottom: 0;
+    overflow: visible;
+
+    .el-upload-list__item-thumbnail {
+      padding: 0;
+      width: 74px;
+      height: 74px;
+      border-radius: 6px;
+    }
+
+    .el-icon-close {
+      position: absolute;
+      right: -10px;
+      top: -10px;
+      border: solid 2px #FFF;
+      background: #F56C6C;
+      opacity: 1;
+      padding: 2px;
+      color: #FFF;
+      border-radius: 50%;
+      font-size: 14px;
+      display: block;
+    }
+
+    .txt {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 12px;
+      text-align: center;
+    }
+  }
+}
+
+::v-deep .el-upload--picture-card {
+  width: 74px;
+  height: 74px;
+  border: none;
+  background: #F4F6F8;
+  line-height: 85px;
+  margin: 10px 0;
+  display: inline-block;
+  vertical-align: middle;
+
+  i {
+    font-size: 22px
+  }
+}
+
+.uploadlist-box {
+  display: inline-block;
+
+  .item {
+    width: 74px;
+    height: 74px;
+    border-radius: 6px;
+    display: inline-block;
+    position: relative;
+    margin: 10px 14px 0 0;
+
+    ::v-deep .el-image {
+      border-radius: 6px;
+      height: 100%;
+    }
+
+    .close {
+      position: absolute;
+      right: -10px;
+      top: -10px;
+      border: solid 2px #FFF;
+      background: #F56C6C;
+      opacity: 1;
+      padding: 2px;
+    }
+
+    .txt {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 12px;
+      text-align: center;
+    }
+  }
+}
+
+.pop-addForm {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #FFF;
+  z-index: 999;
+  display: none;
+
+  .choose-pro-list {
+    border-top: solid 8px #f6f6f6;
+    padding: 0 16px;
+
+    .item {
+      border-bottom: solid 1px #F2F2F2;
+      padding: 12px 24px 12px 0;
+      background-size: 8px;
+      font-size: 12px;
+      position: relative;
+      overflow: hidden;
+
+      p {
+        width: 50%;
+        display: block;
+        float: left;
+        margin-bottom: 2px;
+        color: #888;
+
+        &.name {
+          color: #323232;
+          font-size: 14px;
+          width: 100%;
+          margin-bottom: 7px;
+          font-weight: 600;
+
+          &:before {
+            content: "";
+            width: 6px;
+            height: 6px;
+            background: #2A6494;
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 5px;
+            border-radius: 2px;
+          }
+
+          span {
+            vertical-align: middle;
+          }
+        }
+      }
+
+      &:after {
+        content: "\e6e0";
+        position: absolute;
+        right: 0;
+        font-family: element-icons !important;
+        margin-top: -10px;
+        font-size: 17px;
+        color: #c2c2c2;
+        top: 50%;
+      }
+    }
+  }
+}
+
+
+</style>