huoran
/
FE_middlePlatform_server
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 14 Wiki Activity

编辑订单修改

Browse Source
dev_2022-05-11
yujialong 3 years ago
parent 82c791bc2d
commit ad92cd3e3b
1 changed files with 261 additions and 252 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 513
      src/views/customer/AddCustomer.vue

513
src/views/customer/AddCustomer.vue
Unescape View File

@ -12,254 +12,219 @@
</el-card>
<el-card shadow="hover" :class="customerId ? 'mgb20' : 'card'">
<div>
<div class="flex-center mgb20">
<p class="addhr_tag"></p>
<span>基本信息</span>
</div>
<div>
<el-form :model="form" :rules="rules" ref="form" label-width="120px" class="flex-start-around" :disabled="isDetail">
<el-col :span="6" style="margin-right: 60px;">
<el-form-item prop="countries" label="国家">
<el-select v-model="form.countries" clearable placeholder="请选择国家">
<el-option v-for="(item,index) in countryList" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="schoolId" label="客户名称">
<el-select v-model="form.schoolId" filterable clearable placeholder="请选择学校" @change="SchoolChange" @clear="clearSchool">
<el-option v-for="(item,index) in schoolList" :key="index" :label="item.schoolName" :value="item.schoolId"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="cityId" label="城市">
<el-select v-model="form.cityId" placeholder="" disabled>
<el-option v-for="(item,index) in cityList" :key="index" :label="item.cityName" :value="item.cityId"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="industryId" label="行业">
<el-select v-model="form.industryId" clearable placeholder="请选择行业" :disabled="form.industryClassId ? false : true">
<el-option v-for="(item,index) in industryList" :key="index" :label="item.industryName" :value="item.industryId"></el-option>
</el-select>
</el-form-item>
<div class="tabs">
<a class="item" v-for="(item, i) in tabs" :key="i" :class="{active: i == curTab}" @click="tabChange(i)">{{ item }}</a>
</div>
<el-form-item prop="account" label="账号">
<el-input placeholder="请输入账号" v-model="form.account"></el-input>
</el-form-item>
<el-form-item label="职务">
<el-input placeholder="请输入职务名称" v-model="form.position" maxlength="11"></el-input>
</el-form-item>
<el-form-item label="产品到期时间">
<el-date-picker type="date" disabled v-model="form.expireDate" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
</el-col>
<el-form v-show="curTab === 'tab1'" :model="form" :rules="rules" ref="form" label-width="120px" class="flex-start-around" :disabled="isDetail">
<el-col :span="6" style="margin-right: 60px;">
<el-form-item prop="countries" label="国家">
<el-select v-model="form.countries" clearable placeholder="请选择国家">
<el-option v-for="(item,index) in countryList" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="schoolId" label="客户名称">
<el-select v-model="form.schoolId" filterable clearable placeholder="请选择学校" @change="SchoolChange" @clear="clearSchool">
<el-option v-for="(item,index) in schoolList" :key="index" :label="item.schoolName" :value="item.schoolId"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="cityId" label="城市">
<el-select v-model="form.cityId" placeholder="" disabled>
<el-option v-for="(item,index) in cityList" :key="index" :label="item.cityName" :value="item.cityId"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="industryId" label="行业">
<el-select v-model="form.industryId" clearable placeholder="请选择行业" :disabled="form.industryClassId ? false : true">
<el-option v-for="(item,index) in industryList" :key="index" :label="item.industryName" :value="item.industryId"></el-option>
</el-select>
</el-form-item>
<el-col :span="6" style="margin-left: 60px;">
<el-form-item label="客户类型">
<el-select v-model="form.customerType" placeholder="下单后客户类型自动补充" disabled>
<el-option v-for="(item,index) in customerTypeList" :key="index" :label="item.name" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="provinceId" label="省份">
<el-select v-model="form.provinceId" placeholder="" disabled>
<el-option v-for="(item,index) in provinceList" :key="index" :label="item.provinceName" :value="item.provinceId"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="industryClassId" label="行业类型">
<el-select v-model="form.industryClassId" clearable placeholder="请选择行业类型" @change="changIndustry" @clear="clearIndustry()">
<el-option v-for="(item,index) in IndustryClassList" :key="index" :label="item.industryClassName" :value="item.industryClassId"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="name" label="联系人姓名">
<el-input placeholder="请输入联系人姓名" v-model="form.name"></el-input>
</el-form-item>
<el-form-item prop="phone" label="手机号">
<el-input placeholder="请输入联系人手机号" v-model="form.phone" maxlength="11"></el-input>
</el-form-item>
<el-form-item prop="email" label="邮箱">
<el-input placeholder="请输入邮箱" v-model="form.email"></el-input>
</el-form-item>
</el-col>
</el-form>
</div>
</div>
</el-card>
<el-form-item prop="account" label="账号">
<el-input placeholder="请输入账号" v-model="form.account"></el-input>
</el-form-item>
<el-form-item label="职务">
<el-input placeholder="请输入职务名称" v-model="form.position" maxlength="11"></el-input>
</el-form-item>
<el-form-item label="产品到期时间">
<el-date-picker type="date" disabled v-model="form.expireDate" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
</el-col>
<el-card shadow="hover" class="mgb20" v-show="customerId">
<div class="flex-center mgb20 user_header">
<p class="addhr_tag"></p>
<span>课程权限</span>
</div>
<div>
<el-table :data="coursePermissionss" class="orderTable" stripe header-align="center">
<el-table-column type="index" width="100" label="序号" align="center">
</el-table-column>
<el-table-column prop="courseName" label="课程名称" align="center">
</el-table-column>
<el-table-column label="使用期限" align="center">
<template slot-scope="scope">
{{scope.row.periodOfUse}}&nbsp;&nbsp;
<span v-if='scope.row.options == 0'>日</span>
<span v-if='scope.row.options == 1'>月</span>
<span v-if='scope.row.options == 2'>年</span>
</template>
</el-table-column>
<el-table-column label="起止日期" align="center">
<template slot-scope="scope">
{{scope.row.startTime}}~{{scope.row.endTime}}
</template>
</el-table-column>
<el-table-column label="剩余期限" align="center">
<template slot-scope="scope">
{{scope.row.remainingPeriod}}&nbsp;&nbsp;天
</template>
</el-table-column>
<el-table-column label="端口地址" align="center">
<template slot-scope="scope">
<el-button @click="configure(scope.row)" :disabled="isDetail">配置</el-button>
</template>
</el-table-column>
<el-table-column label="状态" align="center">
<template slot-scope="scope">
<el-switch v-if="scope.row.ship" v-model="scope.row.isEnable" :active-value="1" :inactive-value="0" :active-text="scope.row.isEnable ? '启用' : '禁用'" :disabled="isDetail" @change="switchOff($event,scope.row,scope.$index)"></el-switch>
<span v-else>未发货</span>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
<el-col :span="6" style="margin-left: 60px;">
<el-form-item label="客户类型">
<el-select v-model="form.customerType" placeholder="下单后客户类型自动补充" disabled>
<el-option v-for="(item,index) in customerTypeList" :key="index" :label="item.name" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="provinceId" label="省份">
<el-select v-model="form.provinceId" placeholder="" disabled>
<el-option v-for="(item,index) in provinceList" :key="index" :label="item.provinceName" :value="item.provinceId"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="industryClassId" label="行业类型">
<el-select v-model="form.industryClassId" clearable placeholder="请选择行业类型" @change="changIndustry" @clear="clearIndustry()">
<el-option v-for="(item,index) in IndustryClassList" :key="index" :label="item.industryClassName" :value="item.industryClassId"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="name" label="联系人姓名">
<el-input placeholder="请输入联系人姓名" v-model="form.name"></el-input>
</el-form-item>
<el-form-item prop="phone" label="手机号">
<el-input placeholder="请输入联系人手机号" v-model="form.phone" maxlength="11"></el-input>
</el-form-item>
<el-form-item prop="email" label="邮箱">
<el-input placeholder="请输入邮箱" v-model="form.email"></el-input>
</el-form-item>
</el-col>
</el-form>
<el-card shadow="hover" class="mgb20" v-show="customerId">
<div class="flex-center mgb20 user_header">
<p class="addhr_tag"></p>
<span>数据平台权限</span>
<div v-show="curTab === 'tab2'">
<div class="tool">
<ul class="filter">
<li>
<label>产品类型</label>
<el-select v-model="form.provinces" clearable placeholder="请选择产品类型" @change="getCity">
<el-option v-for="(item,index) in orderTypeList" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</li>
<li>
<label>订阅状态</label>
<el-select v-model="form.provinces" clearable placeholder="请选择订阅状态" @change="getCity">
<el-option v-for="(item,index) in subStatusList" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</li>
<li>
<el-input style="width: 250px;" placeholder="请输入产品名称" prefix-icon="el-icon-search" v-model="keyWord" clearable></el-input>
</li>
</ul>
<div>
<el-button type="primary" @click="batchImport">导出列表</el-button>
</div>
</div>
<div>
<el-table :data="dataPermissionss" class="orderTable" stripe header-align="center">
<el-table-column type="index" width="100" label="序号" align="center">
</el-table-column>
<el-table-column prop="productName" label="产品名称" align="center"></el-table-column>
<el-table-column prop="periodOfUse" label="使用期限" align="center">
<template slot-scope="scope">
{{scope.row.periodOfUse}}&nbsp;&nbsp;
<span v-if='scope.row.options == 0'>日</span>
<span v-if='scope.row.options == 1'>月</span>
<span v-if='scope.row.options == 2'>年</span>
</template>
</el-table-column>
<el-table-column prop="usePeriod" label="起止日期" align="center">
<template slot-scope="scope">
{{scope.row.startTime}}&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;{{scope.row.endTime}}
</template>
</el-table-column>
<el-table-column prop="remainingPeriod" label="剩余期限" align="center">
<template slot-scope="scope">
{{scope.row.remainingPeriod}}&nbsp;&nbsp;天
</template>
</el-table-column>
<el-table-column prop="accountNum" label="账号数" align="center">
<template slot-scope="scope">
{{scope.row.accountNum}}&nbsp;&nbsp;个
</template>
</el-table-column>
<el-table-column label="端口地址" align="center">
<template slot-scope="scope">
<el-button @click="configure(scope.row)" :disabled="isDetail">配置</el-button>
</template>
</el-table-column>
<el-table-column label="状态" align="center">
<template slot-scope="scope">
<el-switch v-if="scope.row.ship" v-model="scope.row.isEnable" :active-value="1" :inactive-value="0" :active-text="scope.row.isEnable ? '启用' : '禁用'" :disabled="isDetail" @change="switchOff($event,scope.row,scope.$index)"></el-switch>
<span v-else>未发货</span>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
<el-table :data="coursePermissionss" class="orderTable" stripe header-align="center" @selection-change="handleSelectionChange" row-key="customerId">
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
<el-table-column type="index" width="100" label="序号" align="center">
</el-table-column>
<el-table-column prop="courseName" label="产品名称" align="center"></el-table-column>
<el-table-column prop="courseName" label="产品类型" align="center"></el-table-column>
<el-table-column label="起止日期" align="center">
<template slot-scope="scope">
{{scope.row.startTime}}~{{scope.row.endTime}}
</template>
</el-table-column>
<el-table-column label="剩余期限" align="center">
<template slot-scope="scope">
{{scope.row.remainingPeriod}}&nbsp;&nbsp;天
</template>
</el-table-column>
<el-table-column prop="courseName" label="订阅状态" align="center"></el-table-column>
<el-table-column label="产品状态" align="center">
<template slot-scope="scope">
<el-switch v-if="scope.row.ship" v-model="scope.row.isEnable" :active-value="1" :inactive-value="0" :active-text="scope.row.isEnable ? '启用' : '禁用'" :disabled="isDetail" @change="switchOff($event,scope.row,scope.$index)"></el-switch>
<span v-else>未发货</span>
</template>
</el-table-column>
</el-table>
</div>
<el-card shadow="hover" class="mgb20" v-show="customerId">
<div class="flex-center mgb20 user_header">
<p class="addhr_tag"></p>
<span>合同信息</span>
<div v-show="curTab === 'tab3'">
<div class="tool">
<ul class="filter">
<li>
<label>订单类型</label>
<el-select v-model="form.provinces" clearable placeholder="请选择订单类型" @change="getCity">
<el-option v-for="(item,index) in productTypeList" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</li>
<li>
<label>订单状态</label>
<el-select v-model="form.provinces" clearable placeholder="请选择订单状态" @change="getCity">
<el-option v-for="(item,index) in orderStatusList" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</li>
<li>
</li>
</ul>
<div>
<el-input style="width: 250px;" placeholder="请输入订单编号、内容" prefix-icon="el-icon-search" v-model="keyWord" clearable></el-input>
</div>
</div>
<div>
<el-table :data="contractInformations" class="table" stripe header-align="center">
<el-table-column type="index" width="100" label="序号" align="center">
</el-table-column>
<el-table-column prop="contractNumber" label="合同编号" align="center">
</el-table-column>
<el-table-column prop="contractName" label="合同名称" align="center">
</el-table-column>
<el-table-column prop="endTime" label="合同期限" align="center">
<template slot-scope="scope">
{{scope.row.startTime?scope.row.startTime.split(' ').shift():''}}&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;{{scope.row.endTime?scope.row.endTime.split(' ').shift():''}}
</template>
</el-table-column>
<el-table-column prop="dataOrCourseName" label="产品内容" align="center">
</el-table-column>
<el-table-column prop="contractMoney" label="合同金额" align="center">
<template slot-scope="scope">
{{scope.row.contractMoney}}&nbsp;&nbsp;元
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="text" @click="showContract(scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
<el-table :data="coursePermissionss" class="orderTable" stripe header-align="center" @selection-change="handleSelectionChange" row-key="customerId">
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
<el-table-column type="index" width="100" label="序号" align="center">
</el-table-column>
<el-table-column prop="courseName" label="订单编号" align="center"></el-table-column>
<el-table-column prop="courseName" label="订单内容" align="center"></el-table-column>
<el-table-column prop="courseName" label="订单金额（元）" align="center"></el-table-column>
<el-table-column prop="courseName" label="订单日期" align="center"></el-table-column>
<el-table-column prop="courseName" label="订单类型" align="center"></el-table-column>
<el-table-column prop="courseName" label="订单状态" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="text" @click="edit(scope.row)">订单详情</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 选择IP -->
<el-dialog :visible.sync="ipVisible" width="70%" center>
<div class="flex-center mgb20">
<p class="hr_tag"></p>
<span>客户列表</span>
<div v-show="curTab === 'tab4'">
<div class="tool">
<div>
<el-input style="width: 350px;" placeholder="请输入订单编号、合同名称、合同编号、产品内容" prefix-icon="el-icon-search" v-model="keyWord" clearable></el-input>
</div>
</div>
<el-table :data="IPData" stripe header-align="center">
<el-table :data="contractInformations" class="table" stripe header-align="center">
<el-table-column type="index" width="100" label="序号" align="center">
</el-table-column>
<el-table-column prop="age" label="服务器名称" align="center">
<el-table-column prop="contractNumber" label="订单号" align="center"></el-table-column>
<el-table-column prop="contractNumber" label="合同编号" align="center"></el-table-column>
<el-table-column prop="contractName" label="合同名称" align="center">
</el-table-column>
<el-table-column label="IP" align="center">
<el-table-column prop="endTime" label="合同期限" align="center">
<template slot-scope="scope">
<div class="tab_temp">
<div class="flex-center">
<label>内网:</label>
<el-input v-model="scope.row.Intranet" placeholder="请输入IP地址"></el-input>
</div>
<div class="flex-center mar10">
<label>外网:</label>
<el-input v-model="scope.row.extranet" placeholder="请输入端口号"></el-input>
</div>
</div>
{{scope.row.startTime?scope.row.startTime.split(' ').shift():''}}&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;{{scope.row.endTime?scope.row.endTime.split(' ').shift():''}}
</template>
</el-table-column>
<el-table-column label="端口" align="center">
<el-table-column prop="dataOrCourseName" label="产品内容" align="center">
</el-table-column>
<el-table-column prop="contractMoney" label="合同金额" align="center">
<template slot-scope="scope">
<div class="tab_temp">
<div class="flex-center">
<label>内网:</label>
<el-input v-model="scope.row.Intranet" placeholder="请输入内网IP地址"></el-input>
</div>
<div class="flex-center mar10">
<label>外网:</label>
<el-input v-model="scope.row.extranet" placeholder="请输入外网IP地址"></el-input>
</div>
</div>
{{scope.row.contractMoney}}&nbsp;&nbsp;元
</template>
</el-table-column>
<el-table-column label="选择" align="center">
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<i class="el-icon-success radio_icon"></i>
<el-button type="text" @click="showContract(scope.row)">查看</el-button>
<el-button type="text" @click="showContract(scope.row)">下载</el-button>
</template>
</el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button @click="ipVisible = false">取 消</el-button>
<el-button type="primary" @click="IPSure()">确 定</el-button>
</span>
</el-dialog>
</div>
<div v-show="curTab === 'tab5'">
<div class="tool">
<div>
<el-input style="width: 300px;" placeholder="请输入商务经理、手机号" prefix-icon="el-icon-search" v-model="keyWord" clearable></el-input>
</div>
</div>
<el-table :data="contractInformations" class="table" stripe header-align="center">
<el-table-column type="index" width="100" label="序号" align="center">
</el-table-column>
<el-table-column prop="contractNumber" label="姓名" align="center"></el-table-column>
<el-table-column prop="contractNumber" label="手机号" align="center"></el-table-column>
<el-table-column prop="contractName" label="所属团队" align="center"></el-table-column>
<el-table-column prop="contractName" label="订单数量" align="center"></el-table-column>
<el-table-column prop="contractName" label="最近下单时间" align="center"></el-table-column>
<el-table-column prop="contractName" label="产品" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="text" @click="showContract(scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
<el-dialog :visible.sync="showImg" width="70%" center>
<img :src="fileSrc" width="100%" alt="">
@ -276,6 +241,14 @@ export default {
return {
customerId : this.$route.query.id,
isDetail : Boolean(this.$route.query.show),
curTab: 'tab1',
tabs: {
tab1: '基本信息',
tab2: '已订阅产品',
tab3: '订单记录',
tab4: '合同信息',
tab5: '商务经理',
},
customerData: [],
showFile:false,
pdfVisible:false,
@ -360,6 +333,59 @@ export default {
name: '到期',
value: 3
}],
// 产品类型
productTypeList: [
{
id: '',
name: '全部'
},
{
id: 1,
name: '实训课程产品'
},
{
id: 2,
name: '理论课程产品'
},
{
id: 3,
name: '数据产品'
}
],
// 订阅状态
subStatusList: [
{
id: '',
name: '全部'
},
{
id: 1,
name: '生效中'
},
{
id: 2,
name: '已过期'
},
{
id: 3,
name: '待生效'
}
],
// 订单状态
orderStatusList: [
{
id: '',
name: '全部'
},
{
id: 1,
name: '已完成'
},
{
id: 2,
name: '待发货'
}
],
countryList: [{
name:'中国'
}],
@ -371,27 +397,7 @@ export default {
contractInformations: [],
coursePermissionss: [],
dataPermissionss: [],
ipVisible: false,
IPData: [{
id: 1,
age: '小额贷系统',
storeName: '1个月',
total: '2019.01.02 11:00',
payamount: '2019.01.02 11:00',
swtich: true,
Intranet: '10.20.202.1',
extranet: '10.20.202.1'
},
{
id: 2,
age: '小额贷系统',
storeName: '1个月',
total: '2019.01.02 11:00',
payamount: '2019.01.02 11:00',
swtich: true,
Intranet: '',
extranet: ''
}],
multipleSelection: [],
NoAdd: true,
phoneRepeat: false,
emailRepeat: false,
@ -433,6 +439,9 @@ export default {
}
},
methods: {
tabChange(index) {
this.curTab = index
},
// 获取城市
getCityData(){
let data = {
@ -627,11 +636,8 @@ export default {
}
})
},
configure(){
this.ipVisible = true
},
IPSure(){
this.ipVisible = false
handleSelectionChange(val) {
this.multipleSelection = val
},
showContract(row){
if(!row.contractFile) return this.$message.warning('文件链接无效')
@ -656,6 +662,9 @@ export default {
</script>
<style lang="scss" scoped>
.tabs {
margin-bottom: 30px;
}
.card {
min-height: calc(100vh - 260px);
}

Write Preview
Loading…
Cancel
Save