|
@@ -1,15 +1,392 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- business-detail
|
|
|
+ <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="!isEditModel"
|
|
|
+ class="first-step-form"
|
|
|
+ >
|
|
|
+ <div class="form-line">
|
|
|
+ <el-form-item label="商家名称" prop="name">
|
|
|
+ <el-input disabled placeholder="请输入商家名称" v-model="firstFormData.name"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="商家ID" prop="id">
|
|
|
+ <el-input disabled placeholder="请输入商家ID" v-model="firstFormData.id"/>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="form-line">
|
|
|
+ <el-form-item label="所属区域" prop="areaType">
|
|
|
+ <el-radio-group v-model="firstFormData.areaType" disabled>
|
|
|
+ <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="city">
|
|
|
+ <el-cascader
|
|
|
+ v-model="firstFormData.address"
|
|
|
+ :props="locationProps"
|
|
|
+ clearable
|
|
|
+ :options="locationOptions"
|
|
|
+ @change="handleChangeLocation"
|
|
|
+ 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="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="decisionMaker">
|
|
|
+ <el-input placeholder="请输入决策人" v-model="firstFormData.decisionMaker"/>
|
|
|
+ </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="fundsize">
|
|
|
+ <el-input placeholder="请输入资金规模" v-model="firstFormData.fundsize"/>
|
|
|
+ </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="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">
|
|
|
+ <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>
|
|
|
+ <el-button v-if="isEditModel" type="text">添加续约</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="business-other">
|
|
|
+ <div class="btn-wrap"></div>
|
|
|
+ <div class="time-line-wrap">
|
|
|
+ <el-timeline>
|
|
|
+ <el-timeline-item
|
|
|
+ v-for="(activity, index) in activities"
|
|
|
+ :key="index"
|
|
|
+ :timestamp="activity.CreateTime">
|
|
|
+ {{activity.OperationRemark}}
|
|
|
+ </el-timeline-item>
|
|
|
+ </el-timeline>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<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,Steps},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ stepsArr:[{
|
|
|
+ finished:false,
|
|
|
+ text:'基础信息'
|
|
|
+ },{
|
|
|
+ finished:false,
|
|
|
+ text:'签约信息'
|
|
|
+ }],
|
|
|
+ locationOptions,
|
|
|
+ locationProps:{
|
|
|
+ value:'name',
|
|
|
+ children:'city',
|
|
|
+ label:'name'
|
|
|
+ },
|
|
|
|
|
|
+ isCheckCompanyInfo:false, //
|
|
|
+ checkCompanyfocusIs:false, //
|
|
|
+ inquireSuccess:false,
|
|
|
+ nameRepeat:false,
|
|
|
+ codeRepeat:false,
|
|
|
+ isCheck:false,//检查客户弹窗
|
|
|
+ repeatId:'',//重复公司id
|
|
|
+ repeatName:'',//重复公司类型
|
|
|
+
|
|
|
+ salesArr:[],
|
|
|
+
|
|
|
+ step:1,//第几步
|
|
|
+ teamSizeOpts:[
|
|
|
+ {
|
|
|
+ val:'50人及以下',
|
|
|
+ label:'50人及以下'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val:'200人及以下',
|
|
|
+ label:'200人及以下'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val:'超过200人',
|
|
|
+ label:'超过200人'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tradeArr:[],
|
|
|
+ firstFormData:{
|
|
|
+ areaType:1,//1国内 2国外
|
|
|
+ name:'',
|
|
|
+ creditCode:'',
|
|
|
+ address:'',
|
|
|
+ decisionMaker:'',
|
|
|
+ teamSize:'',
|
|
|
+ fundsize:'',
|
|
|
+ industry:'',
|
|
|
+ userMax:'',
|
|
|
+ saller:''
|
|
|
+ },
|
|
|
+ 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:[],
|
|
|
+ isEditModel:false,
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getIndustry()
|
|
|
+ this.getSale()
|
|
|
+ this.getBusinessDetail()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async callbackHandle(data,cb) {
|
|
|
+ if (data) {
|
|
|
+ this.isCheckCompanyInfo =true
|
|
|
+ cb([]);
|
|
|
+ let res = await customInterence.companyQccSearch({ KeyWord: data});
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ this.isCheckCompanyInfo =false;
|
|
|
+ if (res.Data && res.Data.length > 0) {
|
|
|
+ let arr = res.Data.map((item) => {
|
|
|
+ return { value:item.Name, ...item };
|
|
|
+ });
|
|
|
+ cb(arr);
|
|
|
+ }else{
|
|
|
+ cb([{}]);
|
|
|
+ // this.checkCompany()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ checkCompanyfocus(){
|
|
|
+ this.checkCompanyfocusIs =true;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.checkCompanyfocusIs =false;
|
|
|
+ },500)
|
|
|
+ },
|
|
|
+
|
|
|
+ //选中后增加社会信用码
|
|
|
+ customNameSelect(value) {
|
|
|
+ this.firstFormData.creditCode = value.CreditCode
|
|
|
+ this.inquireSuccess = true;
|
|
|
+ setTimeout(async()=>{
|
|
|
+ this.checkCompany()
|
|
|
+ },10)
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 客户名称/信用码失焦时校验客户名称是否存在 存在就提示 */
|
|
|
+ checkCompany() {
|
|
|
+ setTimeout(()=>{
|
|
|
+ if(this.checkCompanyfocusIs) return
|
|
|
+ if((!this.firstFormData.name && !this.firstFormData.creditCode) || (this.isCheckCompanyInfo && this.firstFormData.name)) return
|
|
|
+ customInterence.checkCompanyInfo({
|
|
|
+ CompanyName:this.firstFormData.name,
|
|
|
+ CreditCode:this.firstFormData.creditCode
|
|
|
+ }).then(res =>{
|
|
|
+ if(res.Ret === 200){
|
|
|
+ if(res.Data.RepeatStatus > 0) {
|
|
|
+ this.repeatId = res.Data.CompanyId;
|
|
|
+ this.repeatName = res.Data.ProductName;
|
|
|
+ this.nameRepeat = res.Data.RepeatStatus
|
|
|
+ this.codeRepeat = res.Data.Status
|
|
|
+ this.isCheck = true;
|
|
|
+ }else {
|
|
|
+ this.nameRepeat = 0
|
|
|
+ this.isCheck = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },500)
|
|
|
+ },
|
|
|
+
|
|
|
+ selectRegion(e){
|
|
|
+ this.firstFormData.province=e.province.value
|
|
|
+ this.firstFormData.city=e.city.value =='市'?'':e.city.value;
|
|
|
+ },
|
|
|
+ /* 根据类型获取行业 */
|
|
|
+ getIndustry() {
|
|
|
+ customInterence.getindustry({
|
|
|
+ Classify:'ficc'
|
|
|
+ }).then(res => {
|
|
|
+ if(res.Ret === 200) {
|
|
|
+ this.tradeArr = res.Data.List || [];
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /* 获取销售 */
|
|
|
+ getSale() {
|
|
|
+ customInterence.saleslist().then(res => {
|
|
|
+ if(res.Ret === 200) {
|
|
|
+ this.salesArr = res.Data.List;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ changeActiveStep(index){
|
|
|
+ this.step = index + 1
|
|
|
+ },
|
|
|
+ //获取商家详情
|
|
|
+ getBusinessDetail(){
|
|
|
+ if(this.$route.path==='/editETABusiness'){
|
|
|
+ this.isEditModel = true
|
|
|
+ }
|
|
|
+ //query id
|
|
|
+ this.firstFormData={
|
|
|
+ id:'11111',
|
|
|
+ areaType:1,
|
|
|
+ name:'我是商家我是商家',
|
|
|
+ creditCode:'123456',
|
|
|
+ address:['浙江省','杭州市'],
|
|
|
+ decisionMaker:'aaa',
|
|
|
+ teamSize:'200人及以下',
|
|
|
+ fundsize:'100w',
|
|
|
+ industry:1,
|
|
|
+ userMax:100,
|
|
|
+ saller:578
|
|
|
+ }
|
|
|
+ //获取签约详情
|
|
|
+ this.getTableData()
|
|
|
+ //获取操作日志列表
|
|
|
+ this.getTimeLineData()
|
|
|
+ },
|
|
|
+ getTableData(){
|
|
|
+ this.recordData = [
|
|
|
+ {
|
|
|
+ SigningTime:'2023/7/26',
|
|
|
+ ExpiredTime:'2023/7/26',
|
|
|
+ ExpireDay:20
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ getTimeLineData(){}
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
-
|
|
|
+<style lang="scss" scoped>
|
|
|
+.business-detail{
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-table{
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|