dvcp_v2_webapp/packages/2.0.5/AppForm/components/Add.vue

<template>
  <ai-detail class="form-add" :class="[currIndex === 1 ? 'form-add__active' : '']">
    <ai-title title="表单配置" slot="title" isShowBottomBorder isShowBack  @onBackClick="cancel(false)"></ai-title>
    <template #content>
      <div class="ai-step">
        <div class="ai-step__item"
          :class="[currIndex >= index ? 'ai-step__item--active' : '']"
          v-for="(item, index) in statusList"
          :key="index">
          <div class="ai-step__item--icon" v-if="currIndex <= index">
            <i v-if="currIndex === index"></i>
          </div>
          <div class="el-icon-success" v-if="currIndex > index">
          </div>
          <span>{{ item }}</span>
        </div>
      </div>
      <basic-info ref="basicInfo" v-model="basicInfo" v-show="currIndex === 0" :dict="dict" :instance="instance"></basic-info>
      <form-layout class="form-config__wrapper" v-model="tableInfos" ref="form" v-show="currIndex === 1" :dict="dict" :instance="instance"></form-layout>
      <form-config
        ref="config"
        :showListFields="showListFields"
        :btns="btns"
        :fuzzyQueryFields="fuzzyQueryFields"
        :tableInfos="tableInfos"
        :orderFields="orderFields"
        v-if="currIndex === 2">
      </form-config>
    </template>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button @click="back" v-if="currIndex > 0">上一步</el-button>
      <el-button @click="next" type="primary">{{ currIndex === 2 ? '完成' : '下一步' }}</el-button>
    </template>
  </ai-detail>
</template>

<script>
  import BasicInfo from './BasicInfo.vue'
  import FormLayout from './FormLayout.vue'
  import FormConfig from './FormConfig.vue'
  export default {
    name: 'add',

    props: {
      instance: Function,
      dict: Object,
      params: Object,
      type: String
    },

    components: {
      FormLayout,
      BasicInfo,
      FormConfig
    },

    data () {
      return {
        currIndex: 0,
        basicInfo: {
          saasPlatformId: '',
          menuLeve1Style: '',
          saasPlatformName: '',
          menuLevel1Name: '',
          menuLevel2Lable: '',
          menuLevel2Name: '',
          appType: ''
        },
        orderFields: [],
        showListFields: [],
        fuzzyQueryFields: [],
        btns: [],
        btnKeys: ['insertEnable', 'importEnable', 'exportEnalbe', 'editEnable', 'deleteEnable', 'batchDelEnable'],
        configInfo: {
          btns: [],
          orderType: '0',
          fieldName: ''
        },
        info: {},
        tableInfos: [],
        statusList: ['基础设置', '表单设计', '列表设计']
      }
    },

    mounted () {
      if (this.params.id) {
        this.getInfo()
      }
    },

    methods: {
      cancel (isRefresh) {
        this.$emit('change', {
          type: 'list',
          isRefresh: isRefresh ? true : false,
          isQuote: this.params.isQuote ? true : false
        })
      },

      confirm () {

      },

      back () {
        this.currIndex = this.currIndex - 1
      },

      confirmBasicInfo () {
        return this.$refs.basicInfo.validate()
      },

      getInfo () {
        this.instance.post(`/app/appapplicationinfo/queryDetailById?id=${this.params.id}`).then(res => {
          if (res.code === 0) {
            this.info = res.data
            this.basicInfo = {
              saasPlatformId: res.data.saasPlatformId,
              menuLeve1Style: res.data.menuLeve1Style,
              saasPlatformName: res.data.saasPlatformName,
              menuLevel1Name: res.data.menuLevel1Name,
              menuLevel2Lable: res.data.menuLevel2Lable,
              menuLevel2Name: res.data.menuLevel2Name,
              appType: res.data.appType
            }
            this.fuzzyQueryFields = res.data.fuzzyQueryFields
            this.tableInfos = res.data.tableInfos
            this.showListFields = res.data.showListFields
            this.orderFields = res.data.orderFields
            this.btns = Object.keys(res.data).filter(v => {
              return this.btnKeys.indexOf(v) > -1 && res.data[v] === '1'
            })
          }
        })
      },

      submit (info) {
        this.instance.post(`/app/appapplicationinfo/addOrUpdate`, {
          ...this.info,
          ...this.basicInfo,
          tableInfos: this.tableInfos,
          ...info.btns,
          id: this.params.id,
          applicationName: this.basicInfo.menuLevel2Lable,
          fuzzyQueryFields: info.fuzzyQueryFields,
          orderType: info.orderType,
          orderFields: info.orderFields,
          showListFields: info.showListFields
        }).then(res => {
          if (res.code === 0) {
            this.$message.success(this.params.id ? '编辑成功' : '添加成功')
            this.cancel(true)
          }
        })
      },

      next () {
        if (this.currIndex === 0) {
          if (!this.$refs.basicInfo.validate()) return
        }

        if (this.currIndex === 1) {
          this.$refs.form.onConfirm()
        }

        if (this.currIndex === 2) {
          const info = this.$refs.config.validate()
          if (!info) return

          this.submit(info)

          return false
        }

        this.currIndex = this.currIndex + 1
      }
    }
  }
</script>

<style lang="scss" scoped>
  .form-add {
    &.form-add__active {
      ::v-deep .ai-detail__content--wrapper {
        max-width: 100%!important;
        height: 100%!important;
        background: #F5F6F9;
      }

      .form-config__wrapper {
        height: calc(100% - 52px);
        overflow-y: hidden;
      }

      ::v-deep .ai-detail__content {
        height: calc(100% - 114px)!important;
        padding: 0!important;
        overflow: hidden!important;
      }
    }

    .ai-step {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 4px;
      margin-bottom: 24px;

      .ai-step__item {
        display: flex;
        position: relative;
        align-items: center;
        margin-right: 216px;

        &.ai-step__item--active {
          span {
            color: #2266FF;
          }

          .ai-step__item--icon {
            display: flex;
            align-items: center;
            justify-content: center;
            border-color: #2266FF;

            i {
              width: 12px;
              height: 12px;
              border-radius: 50%;
              background: #2266FF;
            }
          }
        }

        &:after {
          position: absolute;
          top: 50%;
          right: -208px;
          width: 200px;
          height: 2px;
          background: #D0D4DC;
          content: ' ';
          transform: translateY(-50%);
        }

        &:last-child {
          margin-right: 0;

          &::after {
            display: none;
          }
        }

        .ai-step__item--icon {
          width: 24px;
          height: 24px;
          margin-right: 8px;
          border-radius: 50%;
          background: #FFFFFF;
          border: 2px solid #D0D4DC;
        }

        .el-icon-success {
          width: 24px;
          height: 24px;
          font-size: 24px;
          margin-right: 8px;
          color: #2266FF;
          border-radius: 50%;
        }

        span {
          color: #666666;
          font-size: 14px;
        }
      }
    }
  }
</style>