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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 305
      src/views/customer/AddCustomer.vue

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

@ -12,14 +12,11 @@
</el-card> </el-card>
<el-card shadow="hover" :class="customerId ? 'mgb20' : 'card'"> <el-card shadow="hover" :class="customerId ? 'mgb20' : 'card'">
<div> <div class="tabs">
<div class="flex-center mgb20"> <a class="item" v-for="(item, i) in tabs" :key="i" :class="{active: i == curTab}" @click="tabChange(i)">{{ item }}</a>
<p class="addhr_tag"></p>
<span>基本信息</span>
</div> </div>
<div> <el-form v-show="curTab === 'tab1'" :model="form" :rules="rules" ref="form" label-width="120px" class="flex-start-around" :disabled="isDetail">
<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-col :span="6" style="margin-right: 60px;">
<el-form-item prop="countries" label="国家"> <el-form-item prop="countries" label="国家">
<el-select v-model="form.countries" clearable placeholder="请选择国家"> <el-select v-model="form.countries" clearable placeholder="请选择国家">
@ -80,29 +77,36 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-form> </el-form>
</div>
</div>
</el-card>
<el-card shadow="hover" class="mgb20" v-show="customerId"> <div v-show="curTab === 'tab2'">
<div class="flex-center mgb20 user_header"> <div class="tool">
<p class="addhr_tag"></p> <ul class="filter">
<span>课程权限</span> <li>
</div> <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> <div>
<el-table :data="coursePermissionss" class="orderTable" stripe header-align="center"> <el-button type="primary" @click="batchImport">导出列表</el-button>
</div>
</div>
<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 type="index" width="100" label="序号" align="center">
</el-table-column> </el-table-column>
<el-table-column prop="courseName" label="课程名称" align="center"> <el-table-column prop="courseName" label="产品名称" align="center"></el-table-column>
</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"> <el-table-column label="起止日期" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.startTime}}~{{scope.row.endTime}} {{scope.row.startTime}}~{{scope.row.endTime}}
@ -113,12 +117,8 @@
{{scope.row.remainingPeriod}}&nbsp;&nbsp;天 {{scope.row.remainingPeriod}}&nbsp;&nbsp;天
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="端口地址" align="center"> <el-table-column prop="courseName" label="订阅状态" align="center"></el-table-column>
<template slot-scope="scope"> <el-table-column label="产品状态" align="center">
<el-button @click="configure(scope.row)" :disabled="isDetail">配置</el-button>
</template>
</el-table-column>
<el-table-column label="状态" align="center">
<template slot-scope="scope"> <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> <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> <span v-else>未发货</span>
@ -126,67 +126,59 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
</el-card>
<el-card shadow="hover" class="mgb20" v-show="customerId"> <div v-show="curTab === 'tab3'">
<div class="flex-center mgb20 user_header"> <div class="tool">
<p class="addhr_tag"></p> <ul class="filter">
<span>数据平台权限</span> <li>
</div> <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> <div>
<el-table :data="dataPermissionss" class="orderTable" stripe header-align="center"> <el-input style="width: 250px;" placeholder="请输入订单编号、内容" prefix-icon="el-icon-search" v-model="keyWord" clearable></el-input>
</div>
</div>
<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 type="index" width="100" label="序号" align="center">
</el-table-column> </el-table-column>
<el-table-column prop="productName" label="产品名称" align="center"></el-table-column> <el-table-column prop="courseName" label="订单编号" align="center"></el-table-column>
<el-table-column prop="periodOfUse" label="使用期限" align="center"> <el-table-column prop="courseName" label="订单内容" align="center"></el-table-column>
<template slot-scope="scope"> <el-table-column prop="courseName" label="订单金额（元）" align="center"></el-table-column>
{{scope.row.periodOfUse}}&nbsp;&nbsp; <el-table-column prop="courseName" label="订单日期" align="center"></el-table-column>
<span v-if='scope.row.options == 0'>日</span> <el-table-column prop="courseName" label="订单类型" align="center"></el-table-column>
<span v-if='scope.row.options == 1'>月</span> <el-table-column prop="courseName" label="订单状态" align="center"></el-table-column>
<span v-if='scope.row.options == 2'>年</span> <el-table-column label="操作" align="center">
</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"> <template slot-scope="scope">
<el-button @click="configure(scope.row)" :disabled="isDetail">配置</el-button> <el-button type="text" @click="edit(scope.row)">订单详情</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> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
</el-card>
<el-card shadow="hover" class="mgb20" v-show="customerId"> <div v-show="curTab === 'tab4'">
<div class="flex-center mgb20 user_header"> <div class="tool">
<p class="addhr_tag"></p>
<span>合同信息</span>
</div>
<div> <div>
<el-input style="width: 350px;" 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 :data="contractInformations" class="table" stripe header-align="center">
<el-table-column type="index" width="100" label="序号" align="center"> <el-table-column type="index" width="100" label="序号" align="center">
</el-table-column> </el-table-column>
<el-table-column prop="contractNumber" label="合同编号" align="center"> <el-table-column prop="contractNumber" label="订单号" align="center"></el-table-column>
</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 prop="contractName" label="合同名称" align="center">
</el-table-column> </el-table-column>
<el-table-column prop="endTime" label="合同期限" align="center"> <el-table-column prop="endTime" label="合同期限" align="center">
@ -204,62 +196,35 @@
<el-table-column label="操作" align="center"> <el-table-column label="操作" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" @click="showContract(scope.row)">查看</el-button> <el-button type="text" @click="showContract(scope.row)">查看</el-button>
<el-button type="text" @click="showContract(scope.row)">下载</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
</el-card>
<!-- 选择IP --> <div v-show="curTab === 'tab5'">
<el-dialog :visible.sync="ipVisible" width="70%" center> <div class="tool">
<div class="flex-center mgb20"> <div>
<p class="hr_tag"></p> <el-input style="width: 300px;" placeholder="请输入商务经理、手机号" prefix-icon="el-icon-search" v-model="keyWord" clearable></el-input>
<span>客户列表</span>
</div>
<el-table :data="IPData" 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>
<el-table-column label="IP" 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>
</template>
</el-table-column>
<el-table-column 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>
</div> </div>
</template> <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>
<el-table-column 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 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"> <template slot-scope="scope">
<i class="el-icon-success radio_icon"></i> <el-button type="text" @click="showContract(scope.row)">查看</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<span slot="footer" class="dialog-footer"> </div>
<el-button @click="ipVisible = false">取 消</el-button> </el-card>
<el-button type="primary" @click="IPSure()">确 定</el-button>
</span>
</el-dialog>
<el-dialog :visible.sync="showImg" width="70%" center> <el-dialog :visible.sync="showImg" width="70%" center>
<img :src="fileSrc" width="100%" alt=""> <img :src="fileSrc" width="100%" alt="">
@ -276,6 +241,14 @@ export default {
return { return {
customerId : this.$route.query.id, customerId : this.$route.query.id,
isDetail : Boolean(this.$route.query.show), isDetail : Boolean(this.$route.query.show),
curTab: 'tab1',
tabs: {
tab1: '基本信息',
tab2: '已订阅产品',
tab3: '订单记录',
tab4: '合同信息',
tab5: '商务经理',
},
customerData: [], customerData: [],
showFile:false, showFile:false,
pdfVisible:false, pdfVisible:false,
@ -360,6 +333,59 @@ export default {
name: '到期', name: '到期',
value: 3 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: [{ countryList: [{
name:'中国' name:'中国'
}], }],
@ -371,27 +397,7 @@ export default {
contractInformations: [], contractInformations: [],
coursePermissionss: [], coursePermissionss: [],
dataPermissionss: [], dataPermissionss: [],
ipVisible: false, multipleSelection: [],
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: ''
}],
NoAdd: true, NoAdd: true,
phoneRepeat: false, phoneRepeat: false,
emailRepeat: false, emailRepeat: false,
@ -433,6 +439,9 @@ export default {
} }
}, },
methods: { methods: {
tabChange(index) {
this.curTab = index
},
// 获取城市 // 获取城市
getCityData(){ getCityData(){
let data = { let data = {
@ -627,11 +636,8 @@ export default {
} }
}) })
}, },
configure(){ handleSelectionChange(val) {
this.ipVisible = true this.multipleSelection = val
},
IPSure(){
this.ipVisible = false
}, },
showContract(row){ showContract(row){
if(!row.contractFile) return this.$message.warning('文件链接无效') if(!row.contractFile) return this.$message.warning('文件链接无效')
@ -656,6 +662,9 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tabs {
margin-bottom: 30px;
}
.card { .card {
min-height: calc(100vh - 260px); min-height: calc(100vh - 260px);
} }

Write Preview
Loading…
Cancel
Save