123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- <template>
- <div class="basic-steps__wrapper">
- <el-steps :active="stepActive" class="basic-steps" :simple="config.simple" :align-center="config.alignCenter" finish-status="success">
- <template v-for="(option,optionIndex) in options" :key="optionIndex">
- <el-step :title="option.title" :icon="option.icon"/>
- </template>
- </el-steps>
- <div class="basic-steps-content__wrapper" v-if="!outerKey">
- <template v-for="({children: step,...stepConfig},optionIndex) in options" :key="optionIndex">
- <div v-show="optionIndex === active" class="basic-step-content">
- <div class="basic-step-content__title">{{stepConfig.title}}</div>
- <slot
- name="item"
- :optionIndex="optionIndex"
- :children="step"
- :is-show="optionIndex === active"
- :addOptionChild="addOptionChild"
- :deleteOptionChild="deleteOptionChild"
- :copyOptionChild="copyOptionChild"
- :updateOptionChildren="updateOptionChildren"
- :updateOptionChild="updateOptionChild"></slot>
- </div>
- </template>
- </div>
- <div class="basic-steps__handle" v-if="!outerKey">
- <cip-table-button v-if="config.cancel && active === 0" @click="beforeCancel">{{config.cancelText || '取消'}}</cip-table-button>
- <cip-table-button @click="prevStep" v-if="active>0" :disabled="false">上一步</cip-table-button>
- <cip-table-button type="primary" @click="nextStep" v-if="active<options.length-1" :disabled="false">下一步</cip-table-button>
- <cip-table-button v-if="config.finish && active === options.length-1" @click="beforeFinish">{{config.finishText || '完成'}}</cip-table-button>
- </div>
- </div>
- </template>
- <script>
- import { computed, ref } from 'vue'
- import { ElSteps, ElStep, ElMessage } from 'element-plus'
- import CipTableButton from '@cip/components/cip-table-button'
- import { layoutProps } from '../layout-props'
- import { useFormLayoutOptions } from '../../hooks/use-form-layout'
- export default {
- name: 'BasicGrid',
- props: layoutProps,
- components: {
- ElSteps, ElStep, CipTableButton
- },
- emits: ['validate', 'submit', 'cancel'],
- setup (props, { emit }) {
- const formLayoutOptions = useFormLayoutOptions({ props, emit })
- // 内部步骤
- const active = ref(0)
- const outerKey = computed(() => {
- return props.config?.outerKey ?? ''
- })
- const stepActive = computed(() => {
- return outerKey.value ? props.model[outerKey.value] : active.value
- })
- const prevStep = () => {
- active.value--
- }
- const validate = (result, cb) => {
- if (result) {
- cb()
- } else {
- ElMessage.warning('请正确的填写表单内容')
- }
- }
- const nextStep = () => {
- if (props.config.validate) {
- emit('validate', (result) => {
- validate(result, () => {
- active.value++
- })
- })
- } else {
- active.value++
- }
- }
- const beforeFinish = () => {
- emit('validate', (result) => {
- validate(result, () => {
- emit('submit')
- })
- })
- }
- const beforeCancel = () => {
- emit('cancel')
- }
- return {
- active,
- prevStep,
- nextStep,
- beforeFinish,
- beforeCancel,
- stepActive,
- outerKey,
- ...formLayoutOptions
- }
- }
- }
- </script>
- <style lang="less">
- .basic-steps__wrapper{
- padding: 20px;
- background: transparent;
- }
- .basic-steps{
- &.el-steps--simple{
- overflow: hidden;
- background: #fff;
- border: 1px solid #ddd;
- //padding: 12px;
- }
- }
- .basic-steps-content__wrapper{
- margin-top:12px;
- background: #fff;
- padding: 20px;
- border: 1px solid #ddd;
- border-radius: 4px;
- .basic-step-content{
- &__title{
- margin-bottom: 12px;
- }
- }
- }
- .basic-steps__handle{
- text-align: center;
- margin-top:12px;
- padding: 12px;
- background: #fff;
- border: 1px solid #ddd;
- border-radius: 4px;
- }
- .form-drawing-layout{ // 仅在设计时展示的样式
- .basic-steps__handle{
- margin-bottom: 20px;
- }
- }
- </style>
|