@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/views/Add.vue

@@ -0,0 +1,827 @@
+<script>
+// @jsx-vue3（T33：T30 JSX 批漏掉的 6 个文件，见 .claude/codemod/codemod-jsx-vue3-tail6.mjs）
+import { ADD_META } from '@epxing/core/src/store/actions'
+import { evalWith } from '@epxing/utils/src/eval-with'
+import component from '@epxing/core/src/mixins/component'
+import { MobileActionSheet } from '@epxing/components/src/mobile'
+export default {
+  name: 'epx-add',
+  mixins: [component],
+  $componentType: 'page',
+  link: '', // 表单关联对象
+  linkAddFlag: true,
+  linkSubs: null,
+  pageType: 'ADD', // 页面模式
+  saveSuccessText: '新增成功',
+  updateSuccessText: '编辑成功',
+  subAddFlag: 'v_sublist',
+  subComponent: 'sub-list',
+  saveAction: 'save',
+  updateAction: 'update',
+  backTarget: 'list', // 提交成功返回页面
+  addPage: 'add',
+  submitParams: {}, // 提交参数
+  // 表单区域
+  formConfigs: {
+    titleFlag: true,
+    fieldGroups: [],
+    fieldConfigs: {}, // 字段配置
+    column: '2',
+    operates: [{ // 操作按钮
+      text: '保存',
+      ui: 'primary',
+      handler: 'submitForm',
+      option: 'pageType==="ADD"'
+    }, { // 操作按钮
+      text: '保存',
+      ui: 'primary',
+      handler: 'submitForm',
+      option: 'pageType==="EDIT"'
+    }, {
+      text: '编辑',
+      ui: 'primary',
+      handler: 'editEntity',
+      option: 'pageType==="DETAIL"'
+    },
+    {
+      text: '返回',
+      cls: 'btn_hollow',
+      handler: 'backPage'
+    }
+    ]
+  },
+  props: {
+    defaultValue: Object
+  },
+  data () {
+    return {
+      renderComponents: [],
+      fieldGroups: [],
+      data: {},
+      foldList: [],
+      showSubList: [],
+      activeName: 'base',
+      reload: false,
+      showPage: true,
+      showMoreOperates: false,
+      submitParams: {},
+      isRequesting: false
+    }
+  },
+  computed: {
+    formConfigs () {
+      const { formConfigs = {} } = this.pageConfig
+      return formConfigs
+    },
+    pageType () {
+      const { pageType: defaultPageType } = this.pageConfig
+      const { pageType = defaultPageType } = this.$query
+      return pageType
+    },
+    operates () {
+      const { operates = [] } = this.formConfigs
+      return operates
+    },
+    actionOperates () {
+      const { operates = [] } = this.formConfigs
+      const actionOperates = [...operates]
+      actionOperates.map(item => (item.name = item.text))
+      return actionOperates.filter(item => this.buttonFlag(item))
+    },
+    buttonFlag () {
+      return ({ option, rightCode }) => {
+        let flag = true
+        // eslint-disable-next-line no-eval
+        if (option) flag = eval(`this.${option}`)
+        return flag
+      }
+    },
+    linkAttrs () {
+      console.log(this.pageConfig)
+      const { linkSubs } = this.pageConfig
+      let linkAttrs = []
+      if (!this.meta) return linkAttrs
+      if (!linkSubs) {
+        // 获取关联sub
+        if (this.pageType === 'DETAIL') {
+          linkAttrs = this.meta.getRelatedEntitysOfDetail()
+        } else if (this.pageType === 'EDIT') {
+          linkAttrs = this.meta.getRelatedEntitysOfEdit()
+        }
+      } else {
+        // 获取每个关联关系
+        linkSubs.forEach(item => {
+          const linkAttr = this.meta.getRelationByFlag(item)
+          if (linkAttr) {
+            linkAttrs.push(linkAttr)
+          }
+        })
+      }
+      return linkAttrs
+    },
+    getMetaIdByRelation  () {
+      return (relationId) => {
+        let relation = null
+        let metaId = this.$metaId
+        const relations = relationId.split('#')
+        relations.forEach(async item => {
+          // let meta = this.metas[metaId]
+          let meta = this.getMeta(metaId)
+          if (!meta) {
+            meta = await this.$store.dispatch({
+              type: ADD_META,
+              metaId: metaId
+            })
+          }
+          relation = meta.getRelationByFlag(item)
+          metaId = relation.entityA
+        })
+        return metaId
+      }
+    },
+    parentId () {
+      return (relationId) => {
+        let subKey = this.$metaKey
+        if (relationId.includes('#')) {
+          const relations = relationId.split('#')
+          const relation = this.meta.getRelationByFlag(relations[0])
+          var linkAttri = relation.linkAttri.split('@')[0]
+          // 获取字段
+          subKey = this.meta.getAttriNameById(linkAttri)
+        }
+        const id = this.data[subKey]
+        return id
+      }
+    }
+  },
+  watch: {
+    reload (v) {
+      if (v) {
+        this.showPage = false
+        this.$nextTick(() => {
+          const timer = setTimeout(() => {
+            this.showPage = true
+            this.reload = false
+            clearTimeout(timer)
+          }, 0)
+        })
+      }
+    }
+  },
+  methods: {
+    getFieldConfig () {
+      const { fieldGroups, fieldConfigs = {} } = this.formConfigs
+      const { fieldConfigs: routeFieldConfigs = {} } = this.$query
+      if (!fieldGroups || fieldGroups.length === 0) {
+        fieldGroups.push({
+          title: '基本信息'
+        })
+      }
+      fieldGroups.forEach(async (item, index) => {
+        // 生成字段配置
+        if (item.contentType) {
+          this.fieldGroups[index] = { ...item }
+        } else {
+          this.$FieldFactory.createFields({
+            defaultFieldConfigs: { ...routeFieldConfigs, ...fieldConfigs },
+            meta: this.meta,
+            metaId: this.$metaId,
+            pageType: item.pageType || this.pageType,
+            fields: item.children
+          })
+            .then(data => {
+              this.fieldGroups[index] = { ...item, children: [...data] }
+            })
+        }
+      })
+    },
+    getData () {
+      const { id, defaultValue = {}, initData = {} } = this.$query
+      const { link, queryParams = {} } = this.pageConfig
+      const params = {
+        entityId: this.$metaId,
+        id: id
+      }
+      if (link) params.link = link
+      if (this.pageType === 'ADD') {
+        params.action = 'getDefault'
+        delete params.id
+      }
+
+      this.$http.get({ ...params, ...queryParams })
+        .then(res => {
+          if (res && res.data) {
+            this.data = { ...initData, ...this.data, ...res.data }
+          }
+          if (defaultValue && this.pageType === 'ADD') {
+            this.data = { ...defaultValue, ...this.data }
+          }
+        })
+    },
+    editEntity () {
+      // 获取当前metaId和flag
+      const { flag: defaultFlag, pageId } = this.$query
+      const { editPageFlag = defaultFlag, addPage } = this.pageConfig
+      let key = 'ID'
+      if (this.meta) {
+        key = this.meta.getKey()
+      }
+      const query = {
+        metaId: this.$metaId,
+        flag: editPageFlag,
+        pageType: 'EDIT',
+        pageId,
+        component: addPage,
+        id: this.data[key],
+        callback: this.getData
+      }
+      this.$createPage({
+        ...query
+      })
+    },
+    applyEntity (buttonConfig) {
+      const { submitParams: querySumitParams = {} } = this.$query
+      const { submitParams: pageSubmitParams = {}, saveSuccessText, processCode: pageProcessCode, startNode: pageStartNode, applyAction = 'apply' } = this.pageConfig
+      const { processCode = pageProcessCode, startNode = pageStartNode, result = '1', action = applyAction } = buttonConfig
+      const params = {
+        action,
+        entityId: this.$metaId,
+        processCode,
+        startNode,
+        result
+      }
+      // 从各自表单获取数据
+      const formParams = this.getFormData()
+      const submitParams = this.$_.assignWith(this.$formatParams(pageSubmitParams), formParams, (pageSubmitValue, formValue) => {
+        return formValue || pageSubmitValue
+      })
+      if (!formParams) return
+      this.$http.apply({
+        ...params,
+        ...this.submitParams,
+        ...querySumitParams,
+        ...submitParams
+      })
+        .then(data => {
+          this.$message.success(saveSuccessText)
+          this.backPage({ reload: true })
+        })
+        .catch(err => {
+          this.$message.error(err.message || '处理失败')
+        })
+    },
+    editApplyEntity () {
+      const { applyPageFlag = 'v_edit_apply' } = this.pageConfig
+      let key = 'ID'
+      if (this.meta) {
+        key = this.meta.getKey()
+      }
+      const query = {
+        metaId: this.$metaId,
+        flag: applyPageFlag,
+        pageType: 'EDIT',
+        component: 'entity-edit-apply',
+        id: this.data[key]
+      }
+      this.$createPage({
+        ...query
+      })
+    },
+    getFormData () {
+      let submitFlag = true
+      const params = {}
+      const { hiddenFields = [] } = this.pageConfig
+      hiddenFields.forEach(field => {
+        if (field.attriName && field.value) {
+          params[field.attriName] = field.value
+        }
+      })
+      for (let index = 0; index < this.fieldGroups.length; index++) {
+        const fieldItem = this.fieldGroups[index]
+        if (!fieldItem.contentType && fieldItem.children) {
+          const form = this.$refs[`form${index}`]
+          for (let i = 0; i < fieldItem.children.length; i++) {
+            const fieldConfig = fieldItem.children[i]
+            const field = fieldItem.children[i].attriName
+            if (this.pageType === 'ADD' || this.pageType === 'EDIT') {
+              form.validate((valid, err) => {
+                if (!valid) {
+                  for (const key in err) {
+                    const errMessgae = err[key][0]
+                    this.$message.error(errMessgae.message)
+                    submitFlag = false
+                    return
+                  }
+                }
+              })
+            }
+            if (submitFlag === false) {
+              break
+            }
+            const formValue = form.model.data[field]
+            if (!field.includes('#')) {
+              let submitValue = formValue
+              if (Array.isArray(formValue)) {
+                submitValue = formValue[formValue.length - 1]
+              }
+
+              // if (submitValue) {
+              params[fieldConfig.name || `bean.${field}`] = submitValue || ''
+              // }
+            }
+          }
+        }
+      }
+
+      return submitFlag ? params : false
+    },
+    submitForm () {
+      const { submitParams: querySumitParams = {} } = this.$query
+      const { submitParams: pageSubmitParams = {}, saveSuccessText, updateSuccessText, saveAction, updateAction } = this.pageConfig
+      const params = {
+        action: saveAction,
+        entityId: this.$metaId
+      }
+      if (this.data[this.$metaKey]) {
+        params[`bean.${this.$metaKey}`] = this.data[this.$metaKey]
+      }
+      // 获取form表单 提交
+      const formParams = this.getFormData()
+      let submitParams = this.$_.assignWith(this.$formatParams(pageSubmitParams), formParams, (pageSubmitValue, formValue) => {
+        return formValue || pageSubmitValue
+      })
+      submitParams = this.$_.assignWith(submitParams, this.submitParams, (submitValue, _submitValue) => {
+        return submitValue || _submitValue
+      })
+      if (!formParams) return
+      if (this.pageType === 'EDIT') params.action = updateAction
+      if (this.isRequesting) return
+      this.isRequesting = true
+      this.$http.save({
+        ...params,
+        ...querySumitParams,
+        ...submitParams
+      })
+        .then(data => {
+          this.isRequesting = false
+          this.$message.success(this.pageType === 'EDIT' ? updateSuccessText : saveSuccessText)
+          this.backPage()
+        })
+        .catch(err => {
+          this.isRequesting = false
+          this.$message.error(err.message || '处理失败')
+        })
+    },
+    /**
+       * 通用请求
+       * @param action 请求命令
+       * @param metaId 请求对象，默认为当前页面对象
+       * @param num 选中记录数(1,必须选中且只能选中一条记录；n：必须选中至少一条记录；0不需要选中记录)
+       * @param comfirmMsg 操作提交之前的确认信息（如果为空，就不需要确认）
+       * @param params #[列表对象的某字段名]"，(如果是选中的多条记录，将字段值拼成一个字符串，用逗号隔开) "$[当前页面的某变量名]"
+       * @param successMsg 操作成功的提示
+       * @param failMsg 操作失败的提示
+       * @param row 操作的列
+       */
+    commonAction ({ action, metaId = this.$metaId, num = 0, confirmMsg = null, params = {}, successMsg = '处理成功', failMsg = '处理失败' }, row) {
+      const that = this
+      const formatParams = {}
+      // 格式化params
+      for (const key in params) {
+        let value = params[key]
+        if (/$\[(.+)\]/.test(params[key])) {
+          value = params[key].replace(/$\[(.+)\]/, (match, key) => {
+            return evalWith(`that.${key}`, { that }) || evalWith(`that.query.${key}`, { that })
+          })
+        }
+        if (/#\[(.+)\]/.test(params[key])) {
+          value = params[key].replace(/#\[(.+)\]/, (match, key) => {
+            return this.data[key]
+          })
+        }
+        formatParams[key] = value
+      }
+
+      // 提交方法
+      const submitFn = () => {
+        const formParams = this.getFormData()
+        if (!formParams) return
+        this.$http.$request({
+          action,
+          entityId: metaId,
+          ...formatParams,
+          ...formParams
+        })
+          .then(() => {
+            this.$message.success(successMsg)
+            this.backPage()
+          })
+          .catch(err => {
+            this.$message.error(err.message || failMsg)
+          })
+      }
+      // 判断是否需要确认弹窗
+      if (confirmMsg) {
+        this.$confirm(confirmMsg, this.$t('hint'), {
+          confirmButtonText: this.$t('confirm'),
+          cancelButtonText: this.$t('cancel'),
+          type: 'warning'
+        }).then(() => {
+          submitFn()
+        })
+      } else {
+        submitFn()
+      }
+    },
+    verify () {
+      // 校验字段
+      let flag = true
+      for (let i = 0; i < this.fieldGroups.length; i++) {
+        const fields = this.fieldGroups[i]
+        if (flag === false) {
+          break
+        }
+        if (!fields.contentType) {
+          for (let j = 0; j < fields.children.length; j++) {
+            const field = fields.children[j]
+            if (field.isRequired === '1' && field.showFlag) {
+              let isShow = true
+              for (const key in field.showFlag) {
+                if (field.showFlag[key] !== (this.data[key] || this.updateData[key])) {
+                  isShow = false
+                }
+              }
+              if (isShow && !(this.data[field.attriName] || this.updateData[field.attriName])) {
+                flag = false
+                this.$message.error(`请填写${field.attriLabel}`)
+                break
+              }
+            } else if (field.isRequired === '1' && !(this.data[field.attriName] || this.updateData[field.attriName])) {
+              flag = false
+              this.$message.error(`请填写${field.attriLabel}`)
+              break
+            }
+          }
+        }
+      }
+      return flag
+    },
+    foldFn (key) {
+      const index = this.foldList.indexOf(key)
+      if (index === -1) {
+        this.foldList.push(key)
+      } else {
+        this.foldList.splice(index, 1)
+      }
+    },
+    subAddEntity (index) {
+      const subListPage = this.$refs['sublist' + index]
+      if (subListPage) {
+        const subList = subListPage.$refs.component
+        if (subList) subList.addEntity()
+      }
+    },
+    init () {
+      if (this.linkAttrs && this.linkAttrs.length > 0) {
+        // this.$bus.off('reload')
+        this.$bus.on('reload', () => {
+          this.reload = true
+        })
+      }
+      this.getFieldConfig()
+      // 获取其级联编辑页面
+      this.getData()
+    },
+    renderForm (fieldItem, index) {
+      // <epx-form ref={`form${index}`} fieldConfigs={fieldItem.children} value={this.data} column={fieldItem.column || this.formConfigs.column}></epx-form>
+      return (
+        <div>
+          <epx-table-form ref={`form${index}`} fieldsConfigs={fieldItem.children} v-model={this.data} column={fieldItem.column || this.formConfigs.column}></epx-table-form>
+        </div>
+
+      )
+    },
+    renderContent () {
+      const { subAddFlag, subComponent } = this.pageConfig
+      return (
+        <div class="form-container">
+          {
+            this.fieldGroups.map((fieldItem, index) => (
+              <div class="form-item" key={index}>
+                {
+                  fieldItem && (fieldItem.contentType !== 'sublist' || fieldItem.contentType !== 'sub' || (fieldItem.contentType.includes('sub') && this.pageType !== 'ADD')) && (
+                    <div>
+                      {
+                        fieldItem.title && this.formConfigs.titleFlag && (
+                          <p class="form-title" >
+                            <span class="form-title-border">{fieldItem.title}</span>
+                            <i class={`el-icon-caret-top ${this.foldList.includes(index) ? 'fold' : ''}`} onClick={this.foldFn.bind(this, index)}></i>
+                            {(fieldItem.contentType === 'sublist' || fieldItem.contentType === 'sub') && this.pageType !== 'DETAIL' && <span class="sub-add-btn" onClick={this.subAddEntity.bind(this, index)}>+ 新增</span>}
+                          </p>
+                        )
+                      }
+                      <div style={this.foldList.includes(index) ? { height: 0, padding: 0 } : {}} class={`form-content ${(fieldItem.contentType === 'sublist' || fieldItem.contentType === 'sub') && 'no-padding'}`}>
+                        {
+                          fieldItem.contentType === 'sublist' ? (
+                            <div>
+                              {
+                                this.data[this.$metaKey] ? (
+                                  <epx-page
+                                    ref={`sublist${index}`}
+                                    inline={true}
+                                    formSub={true}
+                                    pageType={this.pageType}
+                                    pageId={fieldItem.pageId}
+                                    parentMetaId={this.$metaId}
+                                    metaId={this.getMetaIdByRelation(fieldItem.children[0])}
+                                    flag={fieldItem.flag || subAddFlag}
+                                    relationId={fieldItem.children[0]}
+                                    parentId={this.parentId(fieldItem.children[0])}
+                                    component={subComponent}
+                                    class="sublist"
+                                  />)
+                                  : (null)
+                              }
+                            </div>
+                          ) : fieldItem.contentType === 'sub' ? (
+                            <div>
+                              {
+                                this.data[this.$metaKey] ? (
+                                  <epx-page
+                                    ref={`sublist${index}`}
+                                    type="component"
+                                    inline={true}
+                                    formSub={true}
+                                    pageType={this.pageType}
+                                    parentMetaId={this.$metaId}
+                                    metaId={this.getMetaIdByRelation(fieldItem.children[0])}
+                                    config={fieldItem.config}
+                                    relationId={fieldItem.children[0]}
+                                    parentId={this.parentId(fieldItem.children[0])}
+                                    component={subComponent}
+                                    class="sublist"
+                                  />)
+                                  : (null)
+                              }
+                            </div>
+                          )
+                            : (
+                            //  :column="formConfigs.fieldGroups[index].column||formConfigs.column"
+                            // <epx-form ref={`form${index}`} fieldConfigs={fieldItem.children} value={this.data} column={this.formConfigs.column}></epx-form>
+                              // <epx-form ref={`form${index}`} fieldConfigs={fieldItem.children} value={this.data} column={fieldItem.column || this.formConfigs.column}></epx-form>
+                              this.renderForm(fieldItem, index)
+                            )
+                        }
+                      </div>
+                    </div>
+                  )
+                }
+              </div>
+            ))
+          }
+          {
+            this.$isMobile && this.actionOperates.length > 0 && (
+              <div class="mobile-button-container">
+                <div class="mobile-button-inner">
+                  {
+
+                    this.actionOperates.length <= 2 ? this.actionOperates.map(operate => {
+                      if (this.buttonFlag(operate)) {
+                        return (
+                          <el-button size="default" key={operate.text} type={operate.ui} onClick={this.$handler.bind(this, operate)}>{operate.text}</el-button>
+                        )
+                      }
+                    })
+                      : (
+                        <div style={{ flex: 1, display: 'flex' }}>
+                          <el-button size="default" onClick={() => (this.showMoreOperates = true)}>操作</el-button>
+                          <MobileActionSheet modelValue={this.showMoreOperates} actions={this.actionOperates} cancelText="取消" closeOnClickAction onUpdate:modelValue={v => (this.showMoreOperates = v)} onSelect={operate => this.$handler(operate)} />
+                        </div>
+                      )
+                  }
+                </div>
+              </div>
+            )
+          }
+          {
+            !this.$isMobile && this.operates.length > 0 && (
+              <div class="button-container" >
+                {
+                  this.operates.map(operate => {
+                    if (this.buttonFlag(operate)) {
+                      return (
+                        <el-button size="default" key={operate.text} type={operate.ui} onClick={this.$handler.bind(this, operate)}>{operate.text}</el-button>
+                      )
+                    }
+                  })
+                }
+              </div>
+            )
+          }
+        </div>
+      )
+    },
+    renderTabs () {
+      const { subAddFlag, subComponent } = this.pageConfig
+      return (
+        <div class="tabs-container">
+          <el-tabs class="tabs" modelValue={this.activeName} type="card" lazy={true}>
+            <el-tab-pane label="基本信息" name="base" >
+              { this.renderContent() }
+            </el-tab-pane>
+            {
+              this.linkAttrs.map((linkAttr, index) => (
+                <el-tab-pane key={linkAttr.flag} lazy={true} label={linkAttr.title} name={linkAttr.flag}>
+                  {
+                    (this.activeName !== linkAttr.flag || this.showPage) && this.data[this.$metaKey] && (
+                      <epx-page
+                        ref={`subtablist${index}`}
+                        inline={true}
+                        parentMetaId={this.$metaId}
+                        metaId={this.getMetaIdByRelation(linkAttr.flag)}
+                        flag={subAddFlag}
+                        relationId={linkAttr.flag}
+                        parentId={this.parentId(linkAttr.flag)}
+                        component={subComponent}
+                        class="sublist"
+                      />
+                    )
+                  }
+                </el-tab-pane>
+              ))
+            }
+          </el-tabs>
+        </div>
+      )
+    }
+  },
+  created () {
+    if (this.linkAttrs.length > 0 && this.pageConfig.linkAddFlag) {
+      this.renderComponents.push(this.renderTabs)
+    } else {
+      this.renderComponents.push(this.renderContent)
+    }
+    this.init()
+  },
+  render () {
+    return (
+      <div class="container list">
+        { this.renderComponents.map(renderFn => renderFn()) }
+      </div>
+    )
+  },
+  beforeUnmount () {
+    // this.$bus.off('reload')
+    // this.$bus.off('subAddEntity')
+    // this.$bus.on('reload', this.reloadMenuPage)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  box-sizing: border-box;
+}
+.tabs {
+
+    :deep(.el-tabs__header) {
+      // display: none;
+      background: var(--epx-bg-card);
+      margin: 0;
+    }
+    :deep(.el-tabs__item.is-active::after) {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: -1px;
+      width: 100%;
+      height: 2px;
+      @include bg_color_primary;
+    }
+    :deep(.el-tabs__nav-wrap::after) {
+      display: none;
+    }
+    :deep(.el-tabs__content) {
+      flex: 1;
+      overflow: hidden;
+    }
+    :deep(.el-tab-pane) {
+      height: 100%;
+    }
+
+}
+.check-tabs {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+}
+.form-container {
+  flex: 1;
+  height: 100%;
+  overflow: auto;
+}
+// .form-container ::v-deep .el-form-item{
+//   margin-bottom: 12px;
+// }
+.sub-add-btn {
+  float: right;
+  width: 70px;
+  height: 36px;
+  box-sizing: border-box;
+  @include border_primary;
+  @include border_color_primary;
+  border-radius: var(--epx-radius-base);
+  @include font_color_primary;
+  font-size: var(--epx-font-size-base);
+  text-align: center;
+  line-height: 34px;
+  margin-right: 12px;
+  cursor: pointer;
+}
+.form-item {
+  background: var(--epx-bg-card);
+  // margin-bottom: 16px;
+}
+.form-title {
+  padding: 6px 24px;
+  position: relative;
+  overflow: hidden;
+  font-size: var(--epx-font-size-l);
+  line-height: 36px;
+  &::after {
+    content: '';
+    position: absolute;
+    left: -24px;
+    bottom: 0;
+    width: calc(100% + 48px);
+    height: 1px;
+    background: var(--epx-border);
+  }
+  i {
+    @include font_color_primary;
+    font-size: var(--epx-font-size-xl);
+    float: right;
+    cursor: pointer;
+    transition: all .5s;
+    line-height: 36px;
+  }
+  .fold {
+    transform: rotate(180deg);
+  }
+}
+.form-title-border{
+  border-left: 3px solid;
+  @include border_color_primary;
+  padding-left: 6px;
+}
+.form-content {
+  padding: 24px;
+  overflow: hidden;
+  &.no-padding {
+    padding: 0;
+  }
+}
+.button-container {
+  // margin-top: 10px;
+  // padding: 10px 24px;
+  margin: 12px 0;
+  text-align: center;
+
+    :deep(.el-button) {
+      padding: 12px 42px;
+      margin: 0 12px;
+    }
+
+}
+.mobile-button-container {
+  height: 46px;
+}
+.mobile-button-inner {
+ display: flex;
+  position: fixed;
+  z-index: 2;
+  bottom: 0;
+  box-shadow: 0 -1px 2px rgba(0,0,0,.1);
+  width: 100%;
+  margin: 0;
+
+  :deep(.el-button) {
+      flex: 1;
+      margin: 0;
+      border:0;
+      border-radius: 0;
+      padding: 16px 42px;
+    }
+
+}
+@media screen and (max-width: 992px) {
+  .form-content {
+    // padding: 0;
+  }
+}
+</style>