新增商家页面

src/views/business_ETA_manage/addBusiness.vue

@@ -1,5 +1,10 @@
 <template>
     <div class="add-business">
+        <Steps 
+            :activeStep="step"
+            :allowStepClick="false"
+            :stepsArr="stepsArr"
+        />
         <div class="first-step-form-wrap" v-show="step===1">
             <el-form 
                 :model="firstFormData" 
@@ -9,105 +14,115 @@
                 inline
                 class="first-step-form"
             >
-                <el-form-item label="所属区域" prop="areaType">
-                    <el-radio-group v-model="firstFormData.areaType">
-                        <el-radio :label="1">国内</el-radio>
-                        <el-radio :label="2">海外</el-radio>
-                    </el-radio-group>
-                </el-form-item>
-                <el-form-item label="商家名称" prop="name">
-                    <autocomplete
-						ref="auto"
-						v-model="firstFormData.name"
-						:fetch-suggestions="callbackHandle"
-						placeholder="请输入商家名称"
-						@blur="checkCompany"
-						@select="customNameSelect"
-						@focus="checkCompanyfocus"
-						:disabled='inquireSuccess'
-						clearable
-						value-key="value"
-						style="width:400px"
-						:popper-class="isCheck?'el-autocomplete-none':'el-autocomplete-suggestion-data-entry'"
-						class="autocomplete-input"
-					>
-					    <span 
-                            v-if="firstFormData.name.length > 3" 
-                            style="color:#409EFF;cursor: pointer;" slot="suffix"  
-                            @click="$refs.auto.search(firstFormData.name)"
-                        > 查询</span>
-						<template slot-scope="scope">
-						    <div v-if="scope.item.KeyNo">{{scope.item.Name}}</div>
-						    <div v-else style="text-align:center">暂无数据</div>		 
-						</template>
-				    </autocomplete>
-                    <!-- <el-input placeholder="请输入商家名称" v-model="firstFormData.name"/> -->
-                </el-form-item>
-                <el-form-item label="社会信用码" prop="creditCode">
-                    <el-input disabled placeholder="请输入社会信用码" v-model="firstFormData.creditCode"/>
-                </el-form-item>
-                <el-form-item label="商家地址" prop="city">
-                    <el-cascader 
-                        v-model="firstFormData.address"
-                        :props="locationProps"
-                        clearable 
-                        :options="locationOptions"  
-                        @change="handleChangeLocation" 
-                        placeholder="请选择客户地址" 
-                        style="width:200px;marginRight:10px;marginBottom:8px;"
-                    />
-                </el-form-item>
-                <el-form-item label="决策人" prop="decisionMaker">
-                    <el-input placeholder="请输入决策人" v-model="firstFormData.decisionMaker"/>
-                </el-form-item>
-                <el-form-item label="研究团队规模" prop="teamSize">
-                    <el-select 
-                        v-model="firstFormData.teamSize" 
-                        placeholder="请选择研究团队规模"
-                        clearable
-                    >
-                        <el-option
-                            v-for="item in teamSizeOpts"
-                            :key="item.val"
-                            :label="item.label"
-                            :value="item.val">
-                        </el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="资金规模" prop="fundsize">
-                    <el-input placeholder="请输入资金规模" v-model="firstFormData.fundsize"/>
-                </el-form-item>
-                <el-form-item label="所属行业" prop="industry">
-                    <el-select 
-                        v-model="firstFormData.industry" 
-                        placeholder="请选择行业" 
-                        clearable
-                    >
-                        <el-option
-                            v-for="item in tradeArr"
-                            :key="item.IndustryId"
-                            :label="item.IndustryName"
-                            :value="item.IndustryId">
-                        </el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="用户上限" prop="userMax">
-                    <el-input type="number" placeholder="请输入用户上限" v-model="firstFormData.userMax"/>
-                </el-form-item>
-                <el-form-item label="所属销售" prop="saller">
-                    <el-select 
-                        v-model="firstFormData.saller" 
-                        placeholder="请选择销售" 
-                        filterable
-                    >
-                        <el-option
-                            v-for="item in salesArr"
-                            :key="item.AdminId"
-                            :label="item.RealName"
-                            :value="item.AdminId"
+                <div class="form-line">
+                    <el-form-item label="所属区域" prop="areaType">
+                        <el-radio-group v-model="firstFormData.areaType">
+                            <el-radio :label="1" border>国内</el-radio>
+                            <el-radio :label="2" border>海外</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label="商家名称" prop="name">
+                        <autocomplete
+                            ref="auto"
+                            v-model="firstFormData.name"
+                            :fetch-suggestions="callbackHandle"
+                            placeholder="请输入商家名称"
+                            @blur="checkCompany"
+                            @select="customNameSelect"
+                            @focus="checkCompanyfocus"
+                            :disabled='inquireSuccess'
+                            clearable
+                            value-key="value"
+                            style="width:360px"
+                            :popper-class="isCheck?'el-autocomplete-none':'el-autocomplete-suggestion-data-entry'"
+                            class="autocomplete-input"
+                        >
+                            <span 
+                                v-if="firstFormData.name.length > 3" 
+                                style="color:#409EFF;cursor: pointer;" slot="suffix"  
+                                @click="$refs.auto.search(firstFormData.name)"
+                            > 查询</span>
+                            <template slot-scope="scope">
+                                <div v-if="scope.item.KeyNo">{{scope.item.Name}}</div>
+                                <div v-else style="text-align:center">暂无数据</div>		 
+                            </template>
+                        </autocomplete>
+                        <!-- <el-input placeholder="请输入商家名称" v-model="firstFormData.name"/> -->
+                    </el-form-item>
+                </div>
+                <div class="form-line">
+                    <el-form-item label="社会信用码" prop="creditCode">
+                        <el-input disabled placeholder="请输入社会信用码" v-model="firstFormData.creditCode"/>
+                    </el-form-item>
+                    <el-form-item label="商家地址" prop="city">
+                        <el-cascader 
+                            v-model="firstFormData.address"
+                            :props="locationProps"
+                            clearable 
+                            :options="locationOptions"  
+                            @change="handleChangeLocation" 
+                            placeholder="请选择客户地址" 
                         />
-				    </el-select>
-                </el-form-item>
+                    </el-form-item>
+                </div>
+                <div class="form-line">
+                    <el-form-item label="决策人" prop="decisionMaker">
+                        <el-input placeholder="请输入决策人" v-model="firstFormData.decisionMaker"/>
+                    </el-form-item>
+                    <el-form-item label="研究团队规模" prop="teamSize">
+                        <el-select 
+                            v-model="firstFormData.teamSize" 
+                            placeholder="请选择研究团队规模"
+                            clearable
+                        >
+                            <el-option
+                                v-for="item in teamSizeOpts"
+                                :key="item.val"
+                                :label="item.label"
+                                :value="item.val">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </div>
+                <div class="form-line">
+                    <el-form-item label="资金规模" prop="fundsize">
+                        <el-input placeholder="请输入资金规模" v-model="firstFormData.fundsize"/>
+                    </el-form-item>
+                    <el-form-item label="所属行业" prop="industry">
+                        <el-select 
+                            v-model="firstFormData.industry" 
+                            placeholder="请选择行业" 
+                            clearable
+                        >
+                            <el-option
+                                v-for="item in tradeArr"
+                                :key="item.IndustryId"
+                                :label="item.IndustryName"
+                                :value="item.IndustryId">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </div>
+                <div class="form-line">
+                    <el-form-item label="用户上限" prop="userMax">
+                        <el-input type="number" placeholder="请输入用户上限" v-model="firstFormData.userMax"/>
+                    </el-form-item>
+                    <el-form-item label="所属销售" prop="saller">
+                        <el-select 
+                            v-model="firstFormData.saller" 
+                            placeholder="请选择销售" 
+                            filterable
+                        >
+                            <el-option
+                                v-for="item in salesArr"
+                                :key="item.AdminId"
+                                :label="item.RealName"
+                                :value="item.AdminId"
+                            />
+                        </el-select>
+                    </el-form-item>
+                </div>
+                
             </el-form>
         </div>
         <div class="second-step-form-wrap" v-show="step===2">
@@ -119,22 +134,25 @@
                 inline
                 class="second-step-form"
             >
-                <el-form-item label="签约日期" prop="signDate">
-                    <el-date-picker
-                        v-model="secondFormData.signDate"
-                        type="date"
-                        placeholder="选择日期"
-                        value-format="YYYY-MM-DD"
-                    />
-                </el-form-item>
-                <el-form-item label="到期日期" prop="expirationDate">
-                    <el-date-picker
-                        v-model="secondFormData.expirationDate"
-                        type="date"
-                        placeholder="选择日期"
-                        value-format="YYYY-MM-DD"
-                    />
-                </el-form-item>
+                <div class="form-line">
+                    <el-form-item label="签约日期" prop="signDate">
+                        <el-date-picker
+                            v-model="secondFormData.signDate"
+                            type="date"
+                            placeholder="选择日期"
+                            value-format="YYYY-MM-DD"
+                        />
+                    </el-form-item>
+                    <el-form-item label="到期日期" prop="expirationDate">
+                        <el-date-picker
+                            v-model="secondFormData.expirationDate"
+                            type="date"
+                            placeholder="选择日期"
+                            value-format="YYYY-MM-DD"
+                        />
+                    </el-form-item>
+                </div>
+                
             </el-form>
         </div>
 
@@ -150,11 +168,19 @@
 <script>
 import { customInterence } from '@/api/api.js'
 import autocomplete from "@/components/autocomplete.vue";
+import Steps from "./components/Steps.vue";
 import {locationOptions} from "@/views/custom_manage/customList/location"
 export default {
-    components: {autocomplete},
+    components: {autocomplete,Steps},
     data() {
         return {
+            stepsArr:[{
+                finished:false,
+                text:'基础信息'
+            },{
+                finished:false,
+                text:'签约信息'
+            }],
             locationOptions,
             locationProps:{
                 value:'name',
@@ -322,6 +348,35 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.add-business{
+    padding:30px;
+    box-sizing: border-box;
+    background-color: #fff;
+    min-width: 1100px;
+    height: calc(100vh - 120px);
+    .first-step-form-wrap,.second-step-form-wrap{
+        margin-top:60px;
+        border-top: 1px solid #DCDCDC;
+        width:70%;
+    }
+    .el-form{
+        .form-line{
+            margin:30px 0;
+            border-bottom: 1px solid #DCDCDC;
+            .el-input,.el-select,.el-cascader,.el-radio-group{
+                width:360px;
+            }
+            .el-radio-group{
+                display: flex;
+                justify-content: space-between;
+                .el-radio{
+                    width: 165px;
+                    text-align: center;
+                }
+            }
+        }
+    }
+}
 .btns-box{
     position: fixed;
     left: 50%;

src/views/business_ETA_manage/components/Steps.vue

@@ -0,0 +1,106 @@
+<template>
+    <div class="step-wrap">
+        <div class="step-item" :class="{'active':activeStep===index+1}"
+            v-for="(step,index) in stepsArr" :key="index"
+            @click="changeActiveStep(index)">
+            <div class="step-line"></div>
+            <div class="step-icon" v-if="activeStep<=index+1">{{index+1}}</div>
+            <div class="step-icon finished" v-else><i class="el-icon-check"></i></div>
+            <div class="step-text">{{step.text}}</div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props:{
+        allowStepClick:{
+            type:Boolean,
+            default:true
+        },
+        activeStep:{
+            type:Number,
+            default:0
+        },
+        stepsArr:{
+            type:Array,
+            default:()=>{
+                return [
+                    {
+                        text:'基础信息'
+                    },{
+                        text:'签约信息'
+                    }
+                ]
+            }
+        }
+    },
+    data() {
+        return {
+
+        };
+    },
+    methods: {
+        changeActiveStep(index){
+            if(!this.allowStepClick) return 
+            this.$emit('changeActiveStep',index)
+        }
+    },
+};
+</script>
+
+<style scoped lang="scss">
+.step-wrap{
+    display: flex;
+    .step-item{
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap:16px;
+        color:rgba(0, 0, 0, 0.4);
+        cursor: pointer;
+        .step-line{
+            flex: 1;
+            height:2px;
+            background-color: #DCDCDC;
+            min-width: 270px;
+        }
+        .step-icon{
+            width:24px;
+            height:24px;
+            border-radius: 50%;
+            border:2px solid rgba(0, 0, 0, 0.4);
+            text-align: center;
+            line-height: 24px;
+            font-size: 16px;
+            &.finished{
+                border-color: #3385FF;
+                i{
+                    color:#3385FF;
+                    font-weight: bold;
+                }
+            }
+        }
+        .step-text{
+            margin-right: 16px;
+        }
+        &:first-child{
+            .step-line{
+                display: none;
+            }
+        }
+
+        &.active{
+            color:#3385FF;
+            .step-icon{
+                background-color: #3385FF;
+                color:#fff;
+                border-color: transparent;
+            }
+            .step-line{
+                background-color: #3385FF;
+            }
+        }
+    }
+}
+</style>