hz_crm_web/src/views/business_ETA_manage/businessDetail.vue

<template>
    <div class="business-detail-wrap">
        <div class="business-detail">
            <Steps 
                :activeStep="step"
                :stepsArr="stepsArr"
                @changeActiveStep="changeActiveStep"
            />
            <div class="first-step-form-wrap" v-show="step===1">
                <el-form 
                    :model="firstFormData" 
                    ref="firstFormEl" 
                    label-width="120px"
                    inline
                    :rules="rules"
                    :disabled="true"
                    class="first-step-form"
                >
                    <div class="form-line">
                        <el-form-item label="商家名称" prop="BusinessName">
                            <el-input disabled placeholder="请输入商家名称" v-model="firstFormData.BusinessName"/>
                        </el-form-item>
                        <el-form-item label="商家ID" prop="BusinessCode">
                            <el-input disabled placeholder="请输入商家ID" v-model="firstFormData.BusinessCode"/>
                        </el-form-item>
                    </div>
                    <div class="form-line">
                        <el-form-item label="所属区域" prop="RegionType">
                            <el-radio-group v-model="firstFormData.RegionType" disabled>
                                <el-radio label="国内" border>国内</el-radio>
                                <el-radio label="海外" border>海外</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="商家地址" prop="address">
                            <el-cascader 
                                v-model="firstFormData.address"
                                :props="locationProps"
                                clearable 
                                :options="locationOptions"  
                                @change="selectRegion" 
                                placeholder="请选择客户地址" 
                            />
                        </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="ResearchTeamSize">
                            <el-select 
                                v-model="firstFormData.ResearchTeamSize" 
                                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="Leader">
                            <el-input placeholder="请输入决策人" v-model="firstFormData.Leader"/>
                        </el-form-item>
                        <el-form-item label="所属行业" prop="IndustryId">
                            <el-select 
                                v-model="firstFormData.IndustryId" 
                                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="CapitalScale">
                            <el-input placeholder="请输入资金规模" v-model="firstFormData.CapitalScale"/>
                        </el-form-item>
                        <el-form-item label="用户上限" prop="UserMax">
                            <el-input type="number" placeholder="请输入用户上限" v-model="firstFormData.UserMax"/>
                        </el-form-item>
                    </div>
                    <div class="form-line">
                        <el-form-item label="所属销售" prop="SellerName">
                            <el-input disabled placeholder="请输入销售" v-model="firstFormData.SellerName"/>
                        </el-form-item>
                    </div>
                    
                </el-form>
            </div>
            <div class="second-step-form-wrap" v-show="step===2">
                <el-table :data="recordData" border>
                    <el-table-column
                        v-for="item in tableColOpts"
                        :key="item.key"
                        :prop="item.key"
                        :label="item.label"
                        align="center"
                    >
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="business-other">
            <div class="btn-wrap">
                    <el-button type="primary" @click="$router.push({
                        path:'/editETABusiness',
                        query:{
                            id:firstFormData.EtaBusinessId
                        }
                    })">编辑</el-button>
            </div>
            <div class="time-line-wrap">
                <el-timeline>
                    <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index"
                        color="#409EFF" 
                        :timestamp="activity.CreateTime">
                        <template slot="dot">
                            <div class="dot-wrap">
                                <div class="dot-inner"></div>
                            </div>
                        </template>
                        {{activity.OperationRemark}}
                    </el-timeline-item>
                </el-timeline>
            </div>
        </div>

        <!-- 添加续约 -->
        <el-dialog
            title="添加续约"
            :visible.sync="showRenewal"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            @closed="showRenewal=false"
            width="580px"
        >
            <AddRenewal 
                @addRenewal="handleAddRenewal"
                @close="showRenewal=false"/>
        </el-dialog>
    </div>
</template>

<script>
import { customInterence , businessCustomInterence} from '@/api/api.js'
import Steps from "./components/Steps.vue";
import AddRenewal from "./components/AddRenewal";
import {locationOptions} from "@/views/custom_manage/customList/location"
export default {
    components: {Steps,AddRenewal},
    data() {
        return {
            locationOptions,
            locationProps:{
                value:'name',
                children:'city',
                label:'name'
            },

            step:1,//第几步
            teamSizeOpts:[
                {
                    val:'50人及以下',
                    label:'50人及以下'
                },
                {
                    val:'200人及以下',
                    label:'200人及以下'
                },
                {
                    val:'超过200人',
                    label:'超过200人'
                }
            ],
            tradeArr:[],
            firstFormData:{
                RegionType:'',//1国内 2国外
                BusinessName:'',
                CreditCode:'',
                Address:'',
                Leader:'',
                ResearchTeamSize:'',
                CapitalScale:'',
                IndustryId:'',
                UserMax:'',
                SellerId:'',
            },
            rules:{
                address:[{ required: true, message: '请选择商家地址', trigger: 'change' },],
                decisionMaker:[{required: true, message: '请输入决策人', trigger: 'blur' },],
                teamSize:[{required: true, message: '请选择研究团队规模', trigger: 'change' },],
                industry:[{required: true, message: '请选择所属行业', trigger: 'change' },],
                userMax:[{required: true, message: '请输入用户上限', trigger: 'blur' },],
                saller:[{required: true, message: '请选择所属销售', trigger: 'change' },],
            },
            recordData:[],
            tableColOpts:[
                {
                    label:'签约时间',
                    key:'SigningTime'
                },{
                    label:'到期时间',
                    key:'ExpiredTime'
                },{
                    label:'到期天数',
                    key:'ExpireDay'
                }
            ],
            activities:[],
        }
    },
    created() {
        this.getIndustry()
        this.getBusinessDetail()
    },
    methods: {
        selectRegion(e){
            this.firstFormData.province=e[0]
            this.firstFormData.city=e[1]
        },
        /* 根据类型获取行业 */
		getIndustry() {
			customInterence.getindustry({
				Classify:'ficc'
			}).then(res => {
				if(res.Ret === 200) {
					this.tradeArr = res.Data.List || [];
				}
			})
		},
        changeActiveStep(index){
            this.step = index + 1
        },
        // 获取商家详情
        getBusinessDetail(){
            //query id
            businessCustomInterence.getBusinessDetail({
                EtaBusinessId:Number(this.$route.query.id)
            }).then(res=>{
                if(res.Ret !== 200)return 
                this.firstFormData = res.Data||{}
                this.firstFormData.address = [res.Data.Province||'',res.Data.City||'']
            })
            //获取签约详情
            this.getTableData(Number(this.$route.query.id))
            //获取操作日志列表
            this.getTimeLineData(Number(this.$route.query.id))
        },
        // 获取签约详情
        getTableData(id){
            businessCustomInterence.getContractList({
                EtaBusinessId:id
            }).then(res=>{
                if(res.Ret !== 200) return 
                this.recordData = res.Data||[]
            })
        },

        // 获取操作日志详情
        getTimeLineData(id){
            businessCustomInterence.getTimeLineList({
                EtaBusinessId:id
            }).then(res=>{
                if(res.Ret!==200) return 
                this.activities = res.Data||[]
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.business-detail-wrap{
    display: flex;
    background-color: #fff;
    min-width: 1100px;
    min-height: calc(100vh - 120px);
    padding:30px;
    box-sizing: border-box;
    gap:10%;
    .business-detail{
        width:70%;
        .first-step-form-wrap,.second-step-form-wrap{
            margin-top:60px;
            border-top: 1px solid #DCDCDC;
        }
        .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;
                    }
                }
            }
        }
        .el-table{
            margin-top: 30px;
        }
    }
    .business-other{
        flex: 1;
        .btn-wrap{
            display: flex;
            gap:30px;
            .el-button{
                flex:1;
            }
        }
        .time-line-wrap{
            margin-top:30px;
            border:1px solid #DCDFE6;
            border-radius: 4px;
            box-sizing: border-box;
            padding: 30px;
            max-height: calc(100vh - 250px);
            overflow-y: auto;
            .dot-wrap{
                width:12px;
                height:12px;
                border:6px solid #fff;
                background-color: #3385FF;
                position: absolute;
                left:-6px;
                top:0;
                border-radius: 50%;
                .dot-inner{
                    position: absolute;
                    left:3px;
                    top:3px;
                    width:6px;
                    height: 6px;
                    border-radius: 50%;
                    background-color: #fff;
                }
            }
        }
    }
}

</style>