update 标准法规入库/变更流程

src/assets/less/common.less

@@ -794,6 +794,7 @@
   color: #1D2129;
   padding-left: 12px;
   position: relative;
+  margin-top: 32px;
 }
 
 .process-part-title::before {
@@ -807,4 +808,8 @@
   top: 2px;
 }
 
+.process-part-title:first-child{
+  margin-top: 0;
+}
+
 /*流程表单样式end*/

src/components/dict/JDictSelectTag.vue

@@ -40,6 +40,13 @@ export default {
     getPopupContainer: {
       type: Function,
       default: (node) => node.parentNode
+    },
+    options: {
+      type: Array,
+      required: false,
+      default: () => {
+        return []
+      }
     }
   },
   data () {
@@ -54,6 +61,8 @@ export default {
       handler () {
         if (this.dictCode) {
           this.initDictData()
+        } else {
+          this.dictOptions = this.options
         }
       }
     }

src/components/selection/StandardSelectionModal.vue

@@ -17,7 +17,7 @@
                 <j-dict-select-tag style="width: 100%" v-model="queryParam.source"
                                    :disabled="disabledSourceSearch"
                                    :placeholder="$t('pleaseSelect')+$t('standardSelect.source')"
-                                   :triggerChange="false" dictCode="standard_source"/>
+                                   :triggerChange="false" dictCode="standard_source" />
               </a-form-item>
             </a-col>
             <a-col :sm="8">
@@ -27,8 +27,8 @@
               </a-form-item>
             </a-col>
             <div style="float: right;overflow: hidden;margin-right: 41px;margin-bottom: 20px" class="table-page-search-submitButtons">
-              <a-button class="box-button" style="margin-left: 8px" @click="searchReset">{{$t('reset')}}</a-button>
+              <a-button class="box-button" style="margin-left: 8px" @click="searchReset">{{ $t('reset') }}</a-button>
-              <a-button class="box-button" style="margin-left: 8px" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
+              <a-button class="box-button" style="margin-left: 8px" type="primary" @click="searchQuery">{{ $t('query') }}</a-button>
             </div>
           </a-row>
         </a-form>
@@ -39,15 +39,15 @@
         :scroll="{x: 900}"
         :data-source="dataList"
         :pagination="ipagination"
-        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        :row-selection="{ type: type, selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
         :loading="loading">
 
       </a-table>
     </div>
 
     <div class="custom-drawer-style-bottom-btn">
-      <a-button @click="handleCancel" >{{$t('cancel')}}</a-button>
+      <a-button @click="handleCancel">{{ $t('cancel') }}</a-button>
-      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">{{$t('submit')}}</a-button>
+      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">{{ $t('submit') }}</a-button>
     </div>
   </a-drawer>
 </template>
@@ -72,6 +72,11 @@ export default {
     disabledSourceSearch: {
       type: Boolean,
       default: false
+    },
+    type: {
+      type: String,
+      required: false,
+      default: 'checkbox'
     }
   },
   data () {

src/enums/commonEnums.js

@@ -69,3 +69,9 @@ export const DynamicCataloging = {
   FOREIGN_TRENDS: { text: '国外动态', value: '7' },
   OTHER: { text: '其他', value: '8' }
 }
+
+// 标准法规入库/变更流程-操作类型
+export const OperationType = {
+  ENTRY: { text: '标准法规入库', value: '1' },
+  CHANGE: { text: '标准法规变更', value: '2' }
+}

src/views/workCenter/standardEntryOrChangeProcess/StandardEntryOrChangeProcess.vue

@@ -1,38 +1,278 @@
 <template>
-  <internal-detail-page :title="pageTitle">
+  <internal-detail-page :title="pageTitle" :content-padding="0">
-    <div class="process-part-title">流程信息</div>
+    <div class="scroll-content">
-    <a-form :form="form">
+      <div class="process-part-title">流程信息</div>
-      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('standardRegulationLibrary.nodeName')">
+      <a-form :form="processInfoForm">
-        <a-input :placeholder="$t('pleaseEnter') + $t('standardRegulationLibrary.nodeName')"
+        <a-row>
-                 @change="event => event.target.value = event.target.value.trim()"
+          <a-col :span="12">
-                 :maxLength="50"
+            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('standardRegulationLibrary.nodeName')">
-                 v-decorator="['nodeName']" />
+              <a-input :placeholder="$t('pleaseEnter') + $t('standardRegulationLibrary.nodeName')"
-      </a-form-item>
+                       @change="event => event.target.value = event.target.value.trim()"
-    </a-form>
+                       :maxLength="50"
+                       v-decorator="['nodeName']" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('standardRegulationLibrary.nodeName')">
+              <a-date-picker class="box-input"
+                             :placeholder="$t('pleaseSelect')"
+                             :getCalendarContainer="(trigger) => trigger.parentNode"
+                             format="YYYY-MM-DD"
+                             value-format="YYYY-MM-DD"
+                             style="width: 100%" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('standardRegulationLibrary.nodeName')">
+          <a-input :placeholder="$t('pleaseEnter') + $t('standardRegulationLibrary.nodeName')"
+                   @change="event => event.target.value = event.target.value.trim()"
+                   :maxLength="500"
+                   type="textarea"
+                   v-decorator="['nodeName']" />
+        </a-form-item>
+      </a-form>
 
-    <div class="process-part-title">业务基本信息</div>
+      <div class="process-part-title">业务基本信息</div>
-    <collapsible-panel-form ref="addForm"
+      <a-form-model :model="basicFormInfo" v-if="isFormInline" class="form-add" :rules="rules" ref="ruleForm">
-                            :flag="StandardSource.DOMESTIC.value"
+        <template v-for="(val,index) in formList">
-                            :get-form-func="getFormFunc"
+          <div :key="index"
-                            :get-document-info-func="getDocumentInfoFunc"
+               class="collapsible-panel-form"
-                            :special-placeholder="specialPlaceholder"
+               v-if="(val && val.length > 0) || ((!val || val.length === 0) && formPartList.indexOf(index) === 0)">
-                            :default-value="defaultValue"
+            <div class="collapsible-panel-form-header">
-                            :disabled-field-list="disabledField"
+              <span>{{ index }}</span>
-                            @submitFormData="submitFormData" />
+              <div class="retractable-btn" @click="handleChangeRetractable(index)">
+                <a-icon type="double-right" :class="retractableFlag[index] ? 'pack-up-btn' : 'unfold-btn'" />
+                {{ retractableFlag[index] ? '收起' : '展开' }}
+              </div>
+            </div>
+            <div class="form-flex-box collapsible-panel-form-content" v-show="retractableFlag[index]">
+              <template v-if="formPartList.indexOf(index) === 0">
+                <!--来源-->
+                <div class="box-title-text form-flex-item">
+                  <div class="title-text">
+                    <span class="required">*</span>
+                    <span class="title-text-text" :title="$t('standardSelect.source')">{{ $t('standardSelect.source') }}</span>
+                  </div>
+                  <a-form-model-item class="item-model" prop="source">
+                    <j-dict-select-tag class="box-input"
+                                       v-model="basicFormInfo.source"
+                                       :disabled="disabled || disabledFieldList.includes('source')"
+                                       :placeholder="$t('pleaseSelect')+$t('standardSelect.source')"
+                                       :type="'select'"
+                                       :triggerChange="false"
+                                       :options="sourceOptions"
+                                       @change="handleSourceChange" />
+                  </a-form-model-item>
+                </div>
+                <!--操作类型-->
+                <div class="box-title-text form-flex-item">
+                  <div class="title-text">
+                    <span class="required">*</span>
+                    <span class="title-text-text" :title="$t('log.operationType')">{{ $t('log.operationType') }}</span>
+                  </div>
+                  <a-form-model-item class="item-model" prop="operationType">
+                    <j-dict-select-tag class="box-input"
+                                       v-model="basicFormInfo.operationType"
+                                       :disabled="disabled || disabledFieldList.includes('operationType')"
+                                       :placeholder="$t('pleaseSelect')+$t('log.operationType')"
+                                       :type="'select'"
+                                       :triggerChange="false"
+                                       dict-code="operation_type"
+                                       @change="handleOperationTypeChange" />
+                  </a-form-model-item>
+                </div>
+              </template>
+              <template v-for="(item, index) in val">
+                <div :key="index"
+                     class="box-title-text form-flex-item"
+                     :class="{'form-flex-item-line': item.fieldShowType === FieldType.STANDARD_MORE.value}"
+                     v-if="!hiddenFieldList.includes(item.dbFieldName)">
+                  <div class="title-text">
+                    <span class="required" v-if="item.fieldMustInput === '1'">*</span>
+                    <span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
+                  </div>
+                  <a-form-model-item class="item-model" :prop="item.dbFieldName" v-if="item.dbFieldName === 'standard_number_temp'">
+                    <!--标准单选-->
+                    <standard-selection v-if="basicFormInfo.operationType === OperationType.CHANGE.value"
+                                        :source="basicFormInfo.source"
+                                        :disabledSourceSearch="true"
+                                        :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                                        type="radio"
+                                        :placeholder="$t('pleaseEnter')+item.dbFieldTxt"
+                                        v-model="basicFormInfo[item.dbFieldName]" />
+                    <!--文本框-->
+                    <a-input v-else
+                             class="box-input"
+                             :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                             v-model="basicFormInfo[item.dbFieldName]"
+                             :maxLength="50"
+                             :placeholder="specialPlaceholder[item.dbFieldName] || $t('pleaseEnter')+item.dbFieldTxt" />
+                  </a-form-model-item>
+                  <a-form-model-item class="item-model" :prop="item.dbFieldName" v-else>
+                    <!--   1, 日期单选  -->
+                    <a-date-picker v-if="item.fieldShowType === FieldType.DATE_SINGLE.value"
+                                   class="box-input"
+                                   :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                                   :getCalendarContainer="(trigger) => trigger.parentNode"
+                                   format="YYYY-MM-DD"
+                                   value-format="YYYY-MM-DD"
+                                   v-model="basicFormInfo[item.dbFieldName]"
+                                   :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                                   style="width: 100%" />
+                    <!--   2, 单选用户  -->
+                    <user-selection v-else-if="item.fieldShowType === FieldType.USER_SINGLE.value"
+                                    :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                                    v-model="basicFormInfo[item.dbFieldName]"
+                                    :filedName="item.dbFieldName"
+                                    @nameChange="userSelectNameChange"
+                                    :nameStr="basicFormInfo[item.dbFieldName + '_dictText']"
+                                    type="radio"
+                                    :disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
+                    <!--   3, 单选组织机构  -->
+                    <j-select-depart v-else-if="item.fieldShowType === FieldType.ORGAN_SINGLE.value"
+                                     v-model="basicFormInfo[item.dbFieldName]"
+                                     :backDepart="true" />
+                    <!--   4, 日期多选  -->
+                    <j-multiple-date-picker v-else-if="item.fieldShowType === FieldType.DATE_MORE.value"
+                                            class="box-input"
+                                            v-model="basicFormInfo[item.dbFieldName]"
+                                            :fieldName="item.dbFieldName"
+                                            :disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
+                    <!--   5, 多行文本  -->
+                    <a-textarea v-else-if="item.fieldShowType === FieldType.TEXTAREA.value"
+                                :placeholder="$t('pleaseEnter')+item.dbFieldTxt"
+                                :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                                :maxLength="500"
+                                v-model="basicFormInfo[item.dbFieldName]" :rows="4" />
+                    <!--   6, 标准多选  -->
+                    <standard-selection v-else-if="item.fieldShowType === FieldType.STANDARD_MORE.value"
+                                        :source="basicFormInfo.source"
+                                        :disabledSourceSearch="true"
+                                        :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                                        v-model="basicFormInfo[item.dbFieldName]" />
+                    <!--   7, 多选组织机构  -->
+                    <j-select-depart v-else-if="item.fieldShowType === FieldType.ORGAN_MORE.value"
+                                     v-model="basicFormInfo[item.dbFieldName]"
+                                     :multi="true"
+                                     :backDepart="true"
+                                     :treeOpera="true" />
+                    <!--   8, 上传文件  -->
+                    <a-button v-else-if="item.fieldShowType === FieldType.FILE_UP.value" type="primary" class="button-text"
+                              @click="clickButtonToUpload(item)">
+                      {{
+                        (basicFormInfo[item.dbFieldName] === 'null' || basicFormInfo[item.dbFieldName] === ''
+                          || basicFormInfo[item.dbFieldName] === null || basicFormInfo[item.dbFieldName] === undefined)
+                          ? $t('uploadFile.clickUpload')
+                          : $t('uploadFile.viewUploadedFiles')
+                      }}
+                    </a-button>
+                    <!--   9, 文本框  -->
+                    <a-input v-else-if="item.fieldShowType === FieldType.TEXT_BOX.value"
+                             class="box-input"
+                             :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                             v-model="basicFormInfo[item.dbFieldName]"
+                             :maxLength="50"
+                             :placeholder="specialPlaceholder[item.dbFieldName] || $t('pleaseEnter')+item.dbFieldTxt" />
+                    <!--   10, 下拉单选（数据字典）  -->
+                    <j-dict-select-tag v-else-if="item.fieldShowType === FieldType.OPTION_SINGLE.value"
+                                       class="box-input"
+                                       v-model="basicFormInfo[item.dbFieldName]"
+                                       :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                                       :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                                       :type="'select'"
+                                       :triggerChange="false"
+                                       :dictCode="item.dictField" />
+                    <!--   11, 下拉多选（数据字典）  -->
+                    <j-multi-select-tag v-else-if="item.fieldShowType === FieldType.OPTION_MORE.value"
+                                        class="box-input"
+                                        v-model="basicFormInfo[item.dbFieldName]"
+                                        :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                                        :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                                        :type="'select'"
+                                        :triggerChange="false"
+                                        :dictCode="item.dictField" />
+                    <!--   12, 树选择       -->
+                    <a-tree-select
+                      v-else-if="item.fieldShowType === FieldType.TREE.value"
+                      v-model="basicFormInfo[item.dbFieldName]"
+                      :getPopupContainer="triggerNode=> triggerNode.parentNode"
+                      style="width: 100%"
+                      :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                      :tree-data="optionsData[item.dbFieldName]"
+                      tree-checkable
+                      treeCheckStrictly
+                      :label-in-value="false"
+                      :placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
+                    <!--  14, 年份选择 -->
+                    <j-date v-else-if="item.fieldShowType === FieldType.YEAR_PICKER.value"
+                            show-type="year"
+                            :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                            v-model="basicFormInfo[item.dbFieldName]"
+                            :default-value="defaultValue[item.dbFieldName]"
+                            date-format="YYYY"
+                            :placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
+                    <!--   15, 树选择（单选）       -->
+                    <a-tree-select v-else-if="item.fieldShowType === FieldType.TREE_SINGLE.value"
+                                   v-model="basicFormInfo[item.dbFieldName]"
+                                   :getPopupContainer="triggerNode=> triggerNode.parentNode"
+                                   style="width: 100%"
+                                   :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                                   :tree-data="optionsData[item.dbFieldName]"
+                                   :label-in-value="false"
+                                   :placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
+                  </a-form-model-item>
+                </div>
+              </template>
+            </div>
+          </div>
+        </template>
+      </a-form-model>
+
+      <div class="process-part-title">流程审批信息</div>
+      <a-form :form="approvalInfoForm">
+        <!--备注-->
+        <a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('remarks')">
+          <a-input :placeholder="$t('pleaseEnter') + $t('remarks')"
+                   @change="event => event.target.value = event.target.value.trim()"
+                   :maxLength="500"
+                   type="textarea"
+                   v-decorator="['remarks']" />
+        </a-form-item>
+        <!--附件-->
+        <a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('businessSupport.questionAnswer.attach')">
+          <j-upload v-decorator="['file']" return-id />
+        </a-form-item>
+      </a-form>
+    </div>
+    <div class="bottom-operate-box">
+      <!--保存-->
+      <a-button type="primary" :loading="loading" @click="handleSave">{{ $t('preservation') }}</a-button>
+      <!--提交-->
+      <a-button type="primary" :loading="loading" @click="handleSubmit">{{ $t('submit') }}</a-button>
+    </div>
+
+    <upload-file ref="uploadFile" @change="uploadFileChange" :return-url="false"></upload-file>
   </internal-detail-page>
 </template>
 
 <script>
 import InternalDetailPage from '../../../components/InternalDetailPage.vue'
-import CollapsiblePanelForm from '../../../components/CollapsiblePanelForm.vue'
+import { FieldType, StandardSource, OperationType } from '../../../enums/commonEnums.js'
-import { StandardSource } from '../../../enums/commonEnums.js'
+import { getDomesticStandardDocumentInfo, getDomesticStandardFormModal, getOverseasStandardForm } from '../../../api/standardRegulationLibraryApi.js'
-import { getDomesticStandardDocumentInfo, getDomesticStandardFormModal } from '../../../api/standardRegulationLibraryApi.js'
+import { getAction } from '../../../api/manage.js'
+import { ajaxGetDictItems, getFormDictTreeList } from '../../../api/api.js'
+import JMultipleDatePicker from '../../../components/JMultipleDatePicker.vue'
+import UserSelection from '../../../components/selection/UserSelection.vue'
+import StandardSelection from '../../../components/selection/StandardSelection.vue'
+import UploadFile from '../../../components/UploadFile.vue'
 
 export default {
   name: 'StandardEntryOrChangeProcess',
-  components: { InternalDetailPage, CollapsiblePanelForm },
+  components: { UploadFile, StandardSelection, UserSelection, JMultipleDatePicker, InternalDetailPage },
   data () {
     return {
+      FieldType,
+      OperationType,
       labelCol: {
         xs: { span: 24 },
         sm: { span: 4 }
@@ -41,7 +281,16 @@ export default {
         xs: { span: 24 },
         sm: { span: 20 }
       },
-      StandardSource,
+      longLabelCol: {
+        xs: { span: 24 },
+        sm: { span: 2 }
+      },
+      longWrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 22 }
+      },
+      // 流程信息表单
+      processInfoForm: this.$form.createForm(this),
       getFormFunc: getDomesticStandardFormModal,
       getDocumentInfoFunc: getDomesticStandardDocumentInfo,
       // 特殊的placeholder
@@ -50,15 +299,33 @@ export default {
       },
       defaultValue: {
         year_number: new Date().getFullYear() + ''
-      }
+      },
+      // 业务基本信息的字段
+      formList: {},
+      // 业务基本信息有几个部分
+      formPartList: [],
+      formListArr: [], // 所有的字段
+      optionsData: {}, // 用接口获取到的下拉数据
+      retractableFlag: {}, // 面板展开收起的标识
+      isFormInline: false,
+      rules: {},
+      // 业务基本信息表单
+      basicFormInfo: {},
+      // 需要隐藏的字段
+      hiddenFieldList: [],
+      disabled: false,
+      uploadName: '',
+      sourceOptions: [],
+      approvalInfoForm: this.$form.createForm(this),
+      loading: false
     }
   },
   computed: {
     pageTitle () {
-      return `流程中心——${this.$route.meta.title}（法规工程师发起）`
+      return `${this.$t('flowCenter')}${this.$route.meta.title}（法规工程师发起）`
     },
     // 不可编辑的字段
-    disabledField () {
+    disabledFieldList () {
       if (this.isEdit) {
         // 标准编号，被代替标准号，被引用标准号，标准类别，年代号
         return ['standard_number_temp', 'replaced_by_standard_number', 'referenced_standard', 'standard_class', 'year_number']
@@ -66,15 +333,278 @@ export default {
       return ['replaced_by_standard_number', 'referenced_standard']
     }
   },
+  created () {
+    if (this.$route.query.id) {
+      this.disabled = true
+    }
+    this.getSourceOptions()
+    // 默认选中国内
+    this.initDomesticStandardForm()
+  },
   methods: {
-    // 表单提交的回调，获取表单数据
+    getSourceOptions () {
-    submitFormData (formInline) {
+      ajaxGetDictItems('standard_source').then(res => {
-      console.log(formInline)
+        if (res.success) {
+          this.sourceOptions = (res.result || []).filter(tt => tt.value === StandardSource.DOMESTIC.value || tt.value === StandardSource.OVERSEAS.value)
+        }
+      })
+    },
+    /**
+     * 获取国内标准的表单
+     */
+    initDomesticStandardForm () {
+      const params = {
+        module: StandardSource.DOMESTIC.value,
+        type: 2 // 2是新增；1是详情
+      }
+      this.basicFormInfo = {}
+      getDomesticStandardFormModal(params).then(res => {
+        if (res.success) {
+          this.formList = res.result || {}
+          this.formListArr = Object.values(this.formList).reduce((acc, cur) => acc.concat(cur), [])
+          this.formPartList = Object.keys(this.formList)
+          this.basicFormInfo.source = StandardSource.DOMESTIC.value
+          this.getOptionsData() // 处理通过接口获取的下拉数据
+          this.integrateData() // 处理表单验证
+          this.initRetractableFlag() // 处理面板展开
+        }
+      })
+    },
+    initOverseasStandardForm () {
+      const params = {
+        module: StandardSource.OVERSEAS.value,
+        type: 2 // 2是新增；1是详情
+      }
+      this.basicFormInfo = {}
+      getOverseasStandardForm(params).then(res => {
+        if (res.success) {
+          this.formList = res.result || {}
+          this.formListArr = Object.values(this.formList).reduce((acc, cur) => acc.concat(cur), [])
+          this.formPartList = Object.keys(this.formList)
+          this.basicFormInfo.source = StandardSource.OVERSEAS.value
+          this.getOptionsData() // 处理通过接口获取的下拉数据
+          this.integrateData() // 处理表单验证
+          this.initRetractableFlag() // 处理面板展开
+        }
+      })
+    },
+    /**
+     * 默认所有面板都是展开状态
+     */
+    initRetractableFlag () {
+      this.retractableFlag = {}
+      this.formPartList.forEach(key => {
+        this.retractableFlag[key] = true
+      })
+      this.$forceUpdate()
+    },
+    /**
+     * 处理需要通过接口获取的下拉数据
+     */
+    getOptionsData () {
+      this.formListArr.forEach(item => {
+        if (item.fieldShowType === FieldType.TREE.value || item.fieldShowType === FieldType.TREE_SINGLE.value) {
+          // 展示类型是树选择，且有接口的
+          if (item.fieldHref) {
+            getAction(item.fieldHref).then(res => {
+              if (res.success) {
+                this.$set(this.optionsData, item.dbFieldName, res.result)
+              }
+            })
+          } else if (item.dictId) {
+            getFormDictTreeList({ dictId: item.dictId }).then(res => {
+              if (res.success) {
+                this.$set(this.optionsData, item.dbFieldName, res.result)
+              }
+            })
+          }
+        }
+      })
+    },
+    /**
+     * 处理表单验证
+     */
+    integrateData () {
+      this.isFormInline = false
+      const rules = {}
+      this.formListArr.forEach((res, index) => {
+        const rule = []
+        if (res.fieldMustInput === '1') {
+          if ([FieldType.TEXT_BOX.value, FieldType.TEXTAREA.value, FieldType.TEXT_LINK.value].includes(res.fieldShowType)) {
+            rule.push({
+              required: true,
+              message: res.dbFieldTxt + this.$t('cannotEmpty'),
+              trigger: 'blur'
+            })
+          } else if (res.fieldShowType === FieldType.DATE_SINGLE.value) {
+            // 解决第一次校验不消失的问题
+            rule.push({
+              required: true,
+              message: res.dbFieldTxt + this.$t('cannotEmpty'),
+              trigger: ['change', 'blur']
+            })
+          } else {
+            rule.push({
+              required: true,
+              message: res.dbFieldTxt + this.$t('cannotEmpty'),
+              trigger: 'change'
+            })
+          }
+        }
+        if (rule.length > 0) {
+          rules[res.dbFieldName] = rule
+        }
+      })
+      this.rules = rules
+      this.isFormInline = true
+    },
+    /**
+     * 面板展开收起
+     * @param key
+     */
+    handleChangeRetractable (key) {
+      this.$set(this.retractableFlag, key, !this.retractableFlag[key])
+      this.$forceUpdate()
+    },
+    /**
+     * 选择用户得到用户名
+     * @param value
+     * @param fieldName
+     */
+    userSelectNameChange (value, fieldName) {
+      this.basicFormInfo[fieldName + '_dictText'] = value
+    },
+    /**
+     * 点击点击上传按钮
+     * @param item
+     */
+    clickButtonToUpload (item) {
+      this.$refs.uploadFile.open(this.basicFormInfo[item.dbFieldName])
+      this.uploadName = item.dbFieldName
+    },
+    /**
+     * 文件上传改变后的回调
+     * @param data
+     */
+    uploadFileChange (data) {
+      const attIdList = []
+      if (data && data.length > 0) {
+        data.map(item => {
+          attIdList.push(item.id)
+        })
+      }
+      /** 赋值给当前对应的表单文件 */
+      this.basicFormInfo[this.uploadName] = attIdList.join(',')
+      this.basicFormInfo = { ...this.basicFormInfo }
+    },
+    /**
+     * 来源变更，重新获取表单
+     */
+    handleSourceChange () {
+      switch (this.basicFormInfo.source) {
+        case StandardSource.DOMESTIC.value:
+          this.initDomesticStandardForm()
+          break
+        case StandardSource.OVERSEAS.value:
+          this.initOverseasStandardForm()
+          break
+        default:
+          this.basicFormInfo.source = StandardSource.DOMESTIC.value
+          this.initDomesticStandardForm()
+          break
+      }
+    },
+    handleOperationTypeChange () {
+      console.log(this.basicFormInfo.operationType)
+    },
+    handleSave () {
+
+    },
+    handleSubmit () {
+
     }
   }
 }
 </script>
 
 <style scoped lang="less">
+/deep/ .ant-form-item-children {
+  width: 100%;
+  display: inline-block;
+}
 
+.form-flex-box {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.form-flex-item-line {
+  width: 100%;
+}
+
+.collapsible-panel-form {
+  margin-top: 20px;
+
+  &-header {
+    height: 56px;
+    line-height: 56px;
+    background: rgba(245, 245, 245, 0.6);
+    border-radius: 8px 8px 0 0;
+    border: 1px solid #E5E6EB;
+    padding: 0 20px;
+    font-size: 16px;
+    font-family: PingFang SC-Medium, PingFang SC, sans-serif;
+    font-weight: 600;
+    color: #1D2129;
+    display: flex;
+    justify-content: space-between;
+
+    .retractable-btn {
+      cursor: pointer;
+      font-size: 14px;
+      font-family: PingFang SC-Regular, PingFang SC, sans-serif;
+      color: #D52C26;
+    }
+
+    .anticon {
+      margin-right: 8px;
+    }
+
+    .pack-up-btn {
+      transform: rotate(-90deg);
+    }
+
+    .unfold-btn {
+      transform: rotate(90deg);
+    }
+  }
+
+  &-content {
+    border: 1px solid #E5E6EB;
+    border-top: none;
+    border-radius: 0 0 8px 8px;
+    padding: 20px;
+  }
+}
+
+.form-flex-item {
+  width: calc(100% / 3);
+}
+
+.bottom-operate-box {
+  height: 52px;
+  padding: 10px 32px;
+  text-align: right;
+
+  .ant-btn {
+    margin-left: 15px;
+  }
+}
+
+.scroll-content {
+  height: calc(100% - 52px);
+  box-sizing: border-box;
+  overflow: auto;
+  padding: 32px;
+}
 </style>