step-demo案例模板

components

firstStep.vue

<template>
  <div>
    <el-form
      ref="el_form"
      label-width="100px"
      :model="formData"
      @submit.native.prevent
    >
      <el-row>
        <el-col :span="6">
          <el-form-item
            label="用户姓名："
            prop="name"
            :rules="[
              { required: true, message: '必填', trigger: 'blur' }
            ]"
          >
            <el-input
              v-model.trim="formData.name"
              clearable
              placeholder="请输入用户姓名"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="手机号："
            prop="phone"
            :rules="[
              { required: true, message: '必填', trigger: 'blur' }
            ]"
          >
            <el-input
              v-model.trim="formData.phone"
              clearable
              placeholder="请输入角色名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="账号："
            prop="account"
            :rules="[
              { required: true, message: '必填', trigger: 'blur' }
            ]"
          >
            <el-input
              v-model.trim="formData.account"
              clearable
              placeholder="请输入角色名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            prop="status"
            label="状态："
            :rules="[
              { required: true, message: '必填', trigger: 'change' }
            ]"
          >
            <el-select
              v-model="formData.status"
              clearable
            >
              <el-option
                v-for="item in $getDicList('maintainOrderStatus')"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <nx-base-table
      v-bind="tableConfig"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <component
      :is="dialog.name"
      :ref="dialog.name"
      v-model="dialog.visible"
      v-bind="dialog.args"
    />
  </div>
</template>
<script>
import mixins from '../mixins'
import tableColum from '../config/table-colum.js'
export default {
  mixins: mixins,
  data() {
    return {
      // 上一步数据
      prevData: {},
      formData: {
        // 姓名
        name: '',
        // 手机号
        phone: '',
        // 账号
        account: '',
        // 状态
        status: ''
      },
      tableConfig: {
        theadData: {
          needIndex: true,
          data: tableColum(this)
        },
        tableData: [],
        border: false,
        totalCount: 0,
        pageSize: 10,
        currentPage: 1,
        needPagination: true,
        needPapinationOPs: true,
        operationBtns: [
          {
            isShow: ({ row, $index }) => {
              return true
            },
            isDisabled: ({ row, $index }) => {
              return false
            },
            handleClick: (row, index) => {
            },
            btnTxt: '编辑'
          }
        ]
      }
    }
  },
  methods: {
    getData() {
      console.log('first');
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    handleValidate() {
      return new Promise((resolve, reject) => {
        this.$refs.el_form.validate((valid) => {
          if (valid) {
            resolve({ ...this.formData })
          } else {
            this.$message.warning('firstTab必填')
            reject()
          }
        });
      })
    }
  }
}
</script>

secondStep.vue

<template>
  <div>
    <el-form
      ref="el_form"
      label-width="100px"
      :model="formData"
      @submit.native.prevent
    >
      <el-row>
        <el-col :span="6">
          <el-form-item
            label="用户姓名："
            prop="name"
            :rules="[
              { required: true, message: '必填', trigger: 'blur' }
            ]"
          >
            <el-input
              v-model.trim="formData.name"
              clearable
              placeholder="请输入用户姓名"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="手机号："
            prop="phone"
            :rules="[
              { required: true, message: '必填', trigger: 'blur' }
            ]"
          >
            <el-input
              v-model.trim="formData.phone"
              clearable
              placeholder="请输入角色名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="账号："
            prop="account"
            :rules="[
              { required: true, message: '必填', trigger: 'blur' }
            ]"
          >
            <el-input
              v-model.trim="formData.account"
              clearable
              placeholder="请输入角色名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            prop="status"
            label="状态："
            :rules="[
              { required: true, message: '必填', trigger: 'change' }
            ]"
          >
            <el-select
              v-model="formData.status"
              clearable
            >
              <el-option
                v-for="item in $getDicList('maintainOrderStatus')"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <component
      :is="dialog.name"
      :ref="dialog.name"
      v-model="dialog.visible"
      v-bind="dialog.args"
    />
  </div>
</template>
<script>
import mixins from '../mixins'
export default {
  mixins: mixins,
  data() {
    return {
      formData: {
        // 姓名
        name: '',
        // 手机号
        phone: '',
        // 账号
        account: '',
        // 状态
        status: ''
      },
      // 上一步数据
      prevData: {}
    }
  },
  methods: {
    getData() {
      console.log('second');
    },
    handleValidate() {
      return new Promise((resolve, reject) => {
        this.$refs.el_form.validate((valid) => {
          if (valid) {
            resolve({ ...this.formData })
          } else {
            this.$message.warning('secondTab必填')
            reject()
          }
        });
      })
    }
  }
}
</script>

index.vue

<template>
  <div class="container-wrapper">
    <div class="step_box">
      <el-steps
        :active="activeIndex"
        align-center
        finish-status="success"
      >
        <template v-for="(item, index) in stepList">
          <el-step
            :key="item.activeName"
            :title="item.title"
            @click.native="handleStep({activeName: item.activeName, activeIndex: index})"
          />
        </template>
      </el-steps>
    </div>
    <div>
      <first-step
        v-show="['firstStep'].includes(activeName)"
        ref="firstStep"
      />
      <second-step
        v-show="['secondStep'].includes(activeName)"
        ref="secondStep"
      />
    </div>
    <el-row
      type="flex"
      justify="center"
      style="padding-top: 16px;"
    >
      <el-button
        v-show="activeIndex != 0"
        type="primary"
        size="medium"
        @click="handlePrev"
      >
        上一步
      </el-button>
      <el-button
        v-show="activeIndex != stepList.length - 1"
        type="primary"
        size="medium"
        @click="handleNext"
      >
        下一步
      </el-button>
      <el-button
        v-show="activeIndex === stepList.length - 1"
        type="primary"
        size="medium"
        @click="handleSubmit"
      >
        提交
      </el-button>
    </el-row>
  </div>
</template>
<script>
import FirstStep from './components/firstStep'
import SecondStep from './components/secondStep'
import mixins from './mixins'
import { cloneDeep } from 'lodash'
export default {
  components: {
    FirstStep,
    SecondStep
  },
  mixins: mixins,
  data() {
    return {
      activeIndex: 0,
      activeName: 'firstStep',
      // 进度配置
      stepConfig: [
        {
          show: () => {
            return true
          },
          title: '办理退租',
          activeName: 'firstStep'
        },
        {
          show: () => {
            return true
          },
          title: '费用结算',
          activeName: 'secondStep'
        }
      ]
    }
  },
  computed: {
    stepList() {
      return this.stepConfig.filter(item => item.show())
    },
    activeList() {
      return this.stepList.map(item => item.activeName)
    }
  },
  mounted() {
  },
  methods: {
    handleStep({ activeName = this.activeName, activeIndex = this.activeIndex } = {}) {
      console.log('activeName', activeName);
      this.activeIndex = activeIndex
      this.activeName = activeName
    },
    // 提交
    async handleSubmit() {
      const [firstData, secondData] = await Promise.all([
        this.$refs.firstStep.handleValidate(),
        this.$refs.secondStep.handleValidate()
      ])
      console.log({
        firstData, secondData
      }
      );
    },
    // 取消
    handleCancel() {
    },
    // 上一步
    handlePrev() {
      this.activeIndex -= 1
      this.activeName = this.activeList[this.activeIndex]
    },
    // 下一步
    async handleNext() {
      const [formData] = await Promise.all([
        this.$refs[this.activeName].handleValidate()
      ])
      this.activeIndex += 1
      // 把上一个组件的数据 传递给下一个组件
      this.activeName = this.activeList[this.activeIndex]
      this.$refs[this.activeName].prevData = cloneDeep(formData)
    }
  }
}
</script>
<style lang="scss" scoped>
.container-wrapper {
  .step_box {
    background: #fff;
    padding: 24px 24px 24px 16px;

    /deep/.el-steps {
      width: 30%;
      margin: 0 auto;

      .el-step.is-center {
        .is-wait {
          .el-step__icon {
            background: none;
            color: #c2c3c4;
            border-color: #c2c3c4;
          }
        }

        .el-step__title.is-wait {
          font-weight: normal;
          color: #c2c3c4;
        }

        .is-success {
          .el-step__icon {
            background: none;
            color: #797979;
            border-color: #797979;

            .el-step__icon-inner::before {
              content: "1";
            }
          }
        }

        .el-step__title.is-success {
          font-weight: normal;
          color: #797979;
        }

        .el-step__title.is-process {
          color: #007cc8;
          font-weight: normal;
        }

        .el-step__line {
          left: 62%;
          right: -38%;
          top: 15px;
          height: 1px;

          .el-step__line-inner {
            background: #abacad;
            border: none;
            height: 1px;
          }
        }

        .el-step__icon {
          width: 32px;
          height: 32px;
          border-width: 1px;
          background: #007cc8;
          border-color: #007cc8;
          color: #fff;
          cursor: pointer;

          .el-step__icon-inner {
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>