DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/customapp/single.vue

<template>
  <view class="page">
    <!-- 渲染表单 -->
    <l-customform v-if="ready" :initFormValue="current" :editMode="editMode" :scheme="scheme" ref="form" />

    <!-- 操作区按钮 -->
    <view v-if="ready" class="padding bg-white margin-tb">
      <l-button v-if="editMode" @click="action('save')" size="lg" color="green" class="block" block>提交保存</l-button>
      <l-button v-else @click="action('edit')" size="lg" color="orange" class="block" block>编辑本页</l-button>
      <l-button
        v-if="mode !== 'create' && editMode"
        @click="action('reset')"
        class="block margin-top"
        size="lg"
        line="red"
        block
      >
        取消编辑
      </l-button>
      <l-button
        v-if="mode !== 'create' && !editMode"
        @click="action('delete')"
        class="block margin-top"
        size="lg"
        color="red"
        block
      >
        删除
      </l-button>
    </view>
  </view>
</template>

<script>
import customAppFormMixins from './customapp.js'

export default {
  mixins: [customAppFormMixins],

  data() {
    return {
      id: '',
      schemeId: '',
      mode: '',
      editMode: false,
      ready: false,

      scheme: [],
      current: {},
      origin: {}
    }
  },

  async onLoad({ type, id }) {
    await this.init(type, id)
  },

  methods: {
    // 页面初始化
    async init(type, id) {
      this.LOADING('加载数据中…')

      const schemeData = this.GET_PARAM()
      this.schemeId = schemeData.F_SchemeInfoId
      this.id = id
      this.mode = type
      this.editMode = ['create', 'edit'].includes(this.mode)

      const formData = this.mode !== 'create' ? await this.fetchFormData(this.schemeId, this.id) : null
      const keyValue = this.mode !== 'create' ? this.id : null
      const { formValue, scheme } = await this.getCustomAppForm({ schemeData, formData, keyValue })
      this.scheme = scheme
      this.origin = formValue
      this.current = this.COPY(this.origin)

      this.ready = true
      this.HIDE_LOADING()
    },

    // 拉取表单的 formData
    async fetchFormData(schemeInfoId, keyValue) {
      const result = await this.HTTP_GET('/form/data', [{ schemeInfoId, keyValue }], '加载表单失败')

      return result || {}
    },

    // 点击编辑、重置、提交保存、删除按钮
    async action(type) {
      switch (type) {
        case 'edit':
          this.editMode = true
          return

        case 'reset':
          this.editMode = false
          this.current = this.COPY(this.origin)
          this.$refs.form.setFormValue(this.current)
          return

        case 'save':
          const verifyResult = this.$refs.form.verifyValue()
          if (verifyResult.length > 0) {
            this.CONFIRM('表单验证失败', verifyResult.join('\n'))
            return
          }

          if (!(await this.CONFIRM('提交确认', '确定要提交本页表单内容吗？', true))) {
            return
          }

          this.LOADING('正在提交…')
          const formValue = this.$refs.form.getFormValue()
          const postData = await this.getPostData(formValue, this.scheme)

          this.HTTP_POST('/form/save', postData, '表单提交保存失败').then(success => {
            this.HIDE_LOADING()
            if (!success) {
              return
            }

            this.EMIT('custom-list-change')
            this.origin = this.COPY(this.current)
            this.mode = 'view'
            this.editMode = false
            this.TOAST('提交保存成功', 'success')
          })
          return

        case 'delete':
          if (!(await this.CONFIRM('删除项目', '确定要删除本项吗？'))) {
            return
          }

          this.HTTP_POST('/form/delete', { schemeInfoId: this.schemeId, keyValue: this.id }).then(success => {
            if (!success) {
              this.TOAST('删除失败')
              return
            }

            this.EMIT('custom-list-change')
            this.NAV_BACK()
            this.TOAST('删除成功', 'success')
          })
          return

        default:
          return
      }
    }
  }
}
</script>