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

订单管理调试，修改模块文件夹名称

Browse Source
dev
e 3 years ago
parent 7964d2e4e1
commit 7148262b09
7 changed files with 1320 additions and 1002 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. 20
      src/router/index.js
  2. 59
      src/utils/api.js
  3. 3
      src/utils/http.js
  4. 946
      src/views/oder/AddOrder.vue
  5. 999
      src/views/order/AddOrder.vue
  6. 42
      src/views/order/Order.vue
  7. 253
      src/views/order/selectClient.vue

20
src/router/index.js
Unescape View File

@ -13,12 +13,12 @@ let router = new Router({
}, },
{ {
path: '/', path: '/',
component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue'), component: () => import('../views/Home.vue'),
meta: { title: '自述文件' }, meta: { title: '自述文件' },
children: [ children: [
{ {
path: '/customer', path: '/customer',
component: () => import(/* webpackChunkName: "dashboard" */ '../views/customer/customer.vue'), component: () => import( '../views/customer/customer.vue'),
meta: { title: '客户管理' } meta: { title: '客户管理' }
}, },
{ {
@ -38,14 +38,20 @@ let router = new Router({
}, },
{ {
path: '/order', path: '/order',
component: () => import( '../views/oder/Order.vue'), component: () => import( '../views/order/Order.vue'),
meta: { title: '订单管理' } meta: { title: '订单管理' }
}, },
{ {
path: '/addorder', path: '/addorder',
component: () => import( '../views/oder/AddOrder.vue'), component: () => import( '../views/order/AddOrder.vue'),
meta: { title: '新增订单' } meta: { title: '新增订单' }
}, },
{
path: '/selectClient',
component: () => import( '../views/order/selectClient.vue'),
meta: { title: '选择订单客户' }
},
{ {
path: '/configure', path: '/configure',
component: () => import( '../views/serve/Configure.vue'), component: () => import( '../views/serve/Configure.vue'),
@ -88,19 +94,19 @@ let router = new Router({
}, },
{ {
path: '/404', path: '/404',
component: () => import(/* webpackChunkName: "404" */ '../views/404.vue'), component: () => import('../views/404.vue'),
meta: { title: '404' } meta: { title: '404' }
}, },
{ {
path: '/403', path: '/403',
component: () => import(/* webpackChunkName: "403" */ '../views/403.vue'), component: () => import('../views/403.vue'),
meta: { title: '403' } meta: { title: '403' }
} }
] ]
}, },
{ {
path: '/login', path: '/login',
component: () => import(/* webpackChunkName: "login" */ '../views/Login.vue'), component: () => import('../views/Login.vue'),
meta: { title: '登录' } meta: { title: '登录' }
}, },
{ {

59
src/utils/api.js
Unescape View File

@ -32,40 +32,45 @@ export default {
updateOR: `${host}/liuwanr/userInfo/updateOR`, //更新用户组织架构 updateOR: `${host}/liuwanr/userInfo/updateOR`, //更新用户组织架构
// 客户管理 // 客户管理
delCustomers: `${host3}/nakadai/customer/delCustomers`, delCustomers: `${host}/nakadai/customer/delCustomers`,
updateCustomer: `${host3}/nakadai/customer/updateCustomer`, updateCustomer: `${host}/nakadai/customer/updateCustomer`,
addCustomer: `${host3}/nakadai/customer/addCustomer`, addCustomer: `${host}/nakadai/customer/addCustomer`,
queryCustomer: `${host3}/nakadai/customer/queryCustomer`, // /nakadai/customer/queryCustomerDetails
queryCustomerDetails: `${host3}/nakadai/customer/queryCustomerDetails`, queryCustomer: `${host}/nakadai/customer/queryCustomer`,
resetPwdCustomer: `${host3}/nakadai/customer/resetPwd`,
queryCustomerIsExists: `${host3}/nakadai/customer/queryCustomerIsExists`, queryCustomerDetails: `${host}/nakadai/customer/queryCustomerDetails`,
updateEnabled: `${host3}/nakadai/customer/updateEnabled`,
queryCustomerIndustryClass: `${host3}/nakadai/hrIndustryClass/queryIndustryClass`, resetPwdCustomer: `${host}/nakadai/customer/resetPwd`,
queryCustomerIndustry: `${host3}/nakadai/hrIndustry/queryIndustry`, queryCustomerIsExists: `${host}/nakadai/customer/queryCustomerIsExists`,
querySchoolData: `${host3}/nakadai/school/querySchool`, updateEnabled: `${host}/nakadai/customer/updateEnabled`,
queryCustomerIndustryClass: `${host}/nakadai/hrIndustryClass/queryIndustryClass`,
queryCustomerIndustry: `${host}/nakadai/hrIndustry/queryIndustry`,
querySchoolData: `${host}/nakadai/school/querySchool`,
queryPhone: `${host}/liuwanr/user/queryPhone`, queryPhone: `${host}/liuwanr/user/queryPhone`,
queryPlatform: `${host}/liuwanr/userInfo/queryPlatform`, queryPlatform: `${host}/liuwanr/userInfo/queryPlatform`,
// 用户管理 // 用户管理
delUserAccount: `${host3}/users/userAccount/delUserAccount`, delUserAccount: `${host}/users/userAccount/delUserAccount`,
queryUserInfoDetails: `${host3}/users/userAccount/queryUserInfoDetails`, queryUserInfoDetails: `${host}/users/userAccount/queryUserInfoDetails`,
queryUserInfoList: `${host3}/users/userAccount/queryUserInfoList`, queryUserInfoList: `${host}/users/userAccount/queryUserInfoList`,
resetPwd: `${host3}/users/userAccount/resetPwd`, resetPwd: `${host}/users/userAccount/resetPwd`,
selectAccountDetail: `${host3}/users/userAccount/selectAccountDetail`, selectAccountDetail: `${host}/users/userAccount/selectAccountDetail`,
selectUserSysBind: `${host3}/users/userAccount/selectUserSysBind`, selectUserSysBind: `${host}/users/userAccount/selectUserSysBind`,
updatePersonCenter: `${host3}/users/userAccount/updatePersonCenter`, updatePersonCenter: `${host}/users/userAccount/updatePersonCenter`,
updateUserAvatars: `${host3}/users/userAccount/updateUserAvatars`, updateUserAvatars: `${host}/users/userAccount/updateUserAvatars`,
userInfo: `${host3}/users/userAccount/userInfo`, userInfo: `${host}/users/userAccount/userInfo`,
bindPhone: `${host3}/users/userAccount/bindPhone`, bindPhone: `${host}/users/userAccount/bindPhone`,
sendPhoneCode: `${host3}/users/userAccount/sendPhoneCode`, sendPhoneCode: `${host}/users/userAccount/sendPhoneCode`,
findPasswordByPhone: `${host3}/users/userAccount/findPasswordByPhone`, findPasswordByPhone: `${host}/users/userAccount/findPasswordByPhone`,
updateAccountEnable: `${host3}/users/userAccount/updateAccountEnable`, updateAccountEnable: `${host}/users/userAccount/updateAccountEnable`,
updateAccountAllEnable: `${host3}/users/userAccount/updateAccountAllEnable`, updateAccountAllEnable: `${host}/users/userAccount/updateAccountAllEnable`,
queryOrder: `${host}/liuwanr/order/queryOrder`, //查询订单 queryOrder: `${host}/liuwanr/order/queryOrder`, //查询订单
queryOrderDetails: `${host}/liuwanr/order/queryOrderDetails`, //查询订单详情 queryOrderDetails: `${host}/liuwanr/order/queryOrderDetails`, //查询订单详情
queryOrderCustomer: `${host}/liuwanr/order/queryOrderCustomer`, //查询订单客户 queryOrderCustomer: `${host}/liuwanr/order/queryOrderCustomer`, //查询订单客户
queryOrderCustomerContact: `${host}/liuwanr/order/queryOrderCustomerContact`, //查询订单客户联系人 queryOrderCustomerContact: `${host}/liuwanr/order/queryOrderCustomerContact`, //查询订单客户联系人
addOrder: `${host}/liuwanr/order/addOrder`, //添加订单 addOrder: `${host}/liuwanr/order/addOrder`, //添加订单
updateOrder: `${host}/liuwanr/order/updateOrder`, //编辑订单 updateOrder: `${host}/liuwanr/order/updateOrder`, //编辑订单
deleteOrder: `${host}/liuwanr/order/deleteOrder`, //删除订单 deleteOrder: `${host}/liuwanr/order/deleteOrder`, //删除订单
@ -94,8 +99,8 @@ export default {
querySchool: `${host}/liuwanr/school/querySchool`, //查询学校 querySchool: `${host}/liuwanr/school/querySchool`, //查询学校
querySchoolDetails: `${host}/liuwanr/school/querySchoolDetails`, //查询学校详情 querySchoolDetails: `${host}/liuwanr/school/querySchoolDetails`, //查询学校详情
queryProvince: `${host3}/nakadai/province/queryProvince`, //查询省份 queryProvince: `${host}/nakadai/province/queryProvince`, //查询省份
queryCity: `${host3}/nakadai/city/queryCity`, //查询城市 queryCity: `${host}/nakadai/city/queryCity`, //查询城市
queryCourseDiscipline: `${host}/liuwanr/course/queryCourseDiscipline`, //查询课程学科 queryCourseDiscipline: `${host}/liuwanr/course/queryCourseDiscipline`, //查询课程学科
queryCourseProfessionalClass: `${host}/liuwanr/course/queryCourseProfessionalClass`, //查询专业类 queryCourseProfessionalClass: `${host}/liuwanr/course/queryCourseProfessionalClass`, //查询专业类

3
src/utils/http.js
Unescape View File

@ -27,7 +27,6 @@ axios.interceptors.request.use(config => {
} }
return config; return config;
}, err => { }, err => {
console.log(err,'请求拦截30');
Message.error({ Message.error({
message: '退出登陆', message: '退出登陆',
onClose: function () { onClose: function () {
@ -44,7 +43,6 @@ axios.interceptors.response.use(
return Promise.resolve(response); return Promise.resolve(response);
} else { } else {
Message.error(response.message,'res'); Message.error(response.message,'res');
console.log(response,'response',48);
return Promise.reject(response); return Promise.reject(response);
} }
}, },
@ -143,7 +141,6 @@ export function post(url, params) {
return resolve(res.data); return resolve(res.data);
}) })
.catch(err => { .catch(err => {
console.log(148,'err',err);
return reject(err.data) return reject(err.data)
}) })
}); });

946
src/views/oder/AddOrder.vue
Unescape View File

@ -1,946 +0,0 @@
<template>
<div>
<el-row :gutter="20">
<el-col :span="24">
<el-card shadow="hover" class="mgb20">
<div class="flex-between">
<div class="per_title" v-preventReClick @click="goback()">
<i class="el-icon-arrow-left"></i>
<span class="per_back">返回</span>
<span class="per_school">订单处理</span>
</div>
<el-button type="primary" size="small" round class="mag" v-preventReClick @click="saveOrder('form')">确定</el-button>
</div>
</el-card>
<el-card shadow="hover" class="mgb20">
<div>
<div class="flex-center mgb20 user_header">
<p class="addhr_tag"></p>
<span>基本信息</span>
</div>
<div>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-col :span="6" :offset="5">
<el-form-item label="订单编号">
<el-input v-model="form.orderNumber" disabled placeholder="自动生成"></el-input>
</el-form-item>
<el-form-item label="订单时间">
<el-date-picker
v-model="form.orderNumber"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item prop="provinceId" label="省份">
<el-select v-model="form.provinceId" clearable placeholder="请选择省份" @change="getCity" @clear="clearprovince()">
<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 label="联系人" prop="orderContact">
<el-input v-model="form.orderContact" disabled placeholder="请输入联系人姓名"></el-input>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="form.email" disabled placeholder="请输入邮箱地址"></el-input>
</el-form-item>
</el-col>
<el-col :span="6" :offset="2">
<el-form-item prop="customerId" label="订单客户">
<el-select v-model="form.customerId" clearable placeholder="请选择客户"
:disabled="form.cityId ? false : true" @change="getcustomer" @clear="clearcustomer()">
<el-option v-for="(item,index) in schoolList" :key="index" :label="item.customerName" :value="item.customerId"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="orderType" label="订单类型">
<el-select v-model="form.orderType" clearable placeholder="请选择订单类型">
<el-option v-for="(item,index) in orderTypeList" :key="index" :label="item.name" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="cityId" label="城市">
<el-select v-model="form.orderType" placeholder="请选择">
<el-option
v-for="(item,index) in form.city"
:key="index"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="电话">
<el-input v-model="form.phone" disabled placeholder="请输入电话号码" maxlength="11"></el-input>
</el-form-item>
<el-form-item label="订单金额" prop="orderAmount">
<el-input v-model="form.orderAmount" disabled placeholder="请输入订单金额"></el-input>
</el-form-item>
</el-col>
</el-form>
</div>
</div>
</el-card>
<el-card shadow="hover" class="mgb20">
<div>
<div class="flex-between mgb20 user_header">
<div class="flex-center">
<p class="addhr_tag"></p>
<span>课程权限</span>
</div>
<el-button type="primary" size="small" round class="mag" @click="getConfig()">添加</el-button>
</div>
<el-table :data="jurisdictionData" class="orderTable" stripe header-align="center" show-summary :summary-method="getSummaries">
<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" width="200">
<template slot-scope="scope">
<div class="course-input">
<el-input @change="deadLine($event,scope.row)" maxlength="10" oninput="value=value.replace(/[^0-9.]/g,'')" v-model="scope.row.date" placeholder="输入时间"></el-input>
<span>月</span>
</div>
</template>
</el-table-column>
<el-table-column label="起止日期" align="center" width="200">
<template slot-scope="scope">
<p v-if="!scope.row.startDate">请输入使用期限，且确认发货</p>
<div v-else style="display:flex;justify-content:center;">
<p>{{scope.row.startDate}}</p><span>&nbsp;&nbsp;-&nbsp;&nbsp;</span><p>{{scope.row.endDate}}</p>
</div>
</template>
</el-table-column>
<el-table-column label="剩余期限" align="center">
<template slot-scope="scope">
<div class="small">
<el-input v-model="scope.row.transactionPrice" placeholder="请输入"type="text"></el-input>
<span>天</span>
</div>
</template>
</el-table-column>
<el-table-column label="市场价" align="center">
<template slot-scope="scope">
<div class="small">
<el-input v-model="scope.row.transactionPrice" placeholder="请输入"type="text"></el-input>
<span>万</span>
</div>
</template>
</el-table-column>
<el-table-column label="成交价 " align="center">
<template slot-scope="scope">
<div class="small">
<el-input v-model="scope.row.transactionPrice" placeholder="请输入"type="text"></el-input>
<span>万</span>
</div>
</template>
</el-table-column>
<el-table-column label="折扣率 " align="center">
<template slot-scope="scope">
<div class="small">
<el-input v-model="scope.row.transactionPrice" placeholder="请输入"type="text"></el-input>
</div>
</template>
</el-table-column>
<el-table-column label="端口地址 " align="center">
<template slot-scope="scope">
<el-button @click="configure(scope.row)">配置</el-button>
</template>
</el-table-column>
<el-table-column label="发货" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.consignment"
:active-value="1"
:inactive-value="0"
@change="courseSwitch($event,scope.row)">
</el-switch>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
<el-card shadow="hover" class="mgb20">
<div>
<div class="flex-between mgb20 user_header">
<div class="flex-center">
<p class="addhr_tag"></p>
<span>数据平台权限</span>
</div>
<el-button type="primary" size="small" round class="mag" @click="getConfig()">添加</el-button>
</div>
<el-table :data="dataPlatform" class="orderTable" stripe header-align="center" show-summary :summary-method="getSummaries">
<el-table-column type="index" width="100" label="序号" align="center">
</el-table-column>
<el-table-column prop="name" label="产品名称" align="center">
</el-table-column>
<el-table-column label="使用期限" align="center" width="200">
<template slot-scope="scope">
<div class="course-input">
<el-input maxlength="10" oninput="value=value.replace(/[^0-9.]/g,'')" v-model="scope.row.date" placeholder="输入时间"></el-input>
<span>月</span>
</div>
</template>
</el-table-column>
<el-table-column label="起止日期" align="center" width="200">
<template slot-scope="scope">
<p v-if="!scope.row.startDate">请输入使用期限，且确认状态</p>
<div v-else style="display:flex;justify-content:center;">
<p>{{scope.row.startDate}}</p><span>&nbsp;&nbsp;-&nbsp;&nbsp;</span><p>{{scope.row.endDate}}</p>
</div>
</template>
</el-table-column>
<el-table-column label="剩余期限" align="center">
<template slot-scope="scope">
<div class="small">
<el-input v-model="scope.row.transactionPrice" placeholder="请输入"type="text"></el-input>
<span>天</span>
</div>
</template>
</el-table-column>
<el-table-column label="市场价" align="center" width="165">
<template slot-scope="scope">
<div class="small">
<el-input disabled v-model="scope.row.transactionPrice" placeholder="请输入"type="text"></el-input>
<span>元&nbsp;/&nbsp;账号</span>
</div>
</template>
</el-table-column>
<el-table-column label="成交价" align="center" width="165">
<template slot-scope="scope">
<div class="small">
<el-input @change="dealComputers($event,scope.row)" v-model="scope.row.bargain" placeholder="请输入"type="text"></el-input>
<span>元&nbsp;/&nbsp; 账号</span>
</div>
</template>
</el-table-column>
<el-table-column label="折扣率" align="center">
<template slot-scope="scope">
<div class="small">
<el-input disabled v-model="scope.row.transactionPrice" placeholder="请输入"type="text"></el-input>
</div>
</template>
</el-table-column>
<el-table-column label="账号数" align="center">
<template slot-scope="scope">
<div class="small">
<el-input @change="dealComputers($event,scope.row)" v-model="scope.row.account" placeholder="请输入"type="text"></el-input>
</div>
</template>
</el-table-column>
<!-- 金额自动计算，计算方式：账号数*成交价，且可以手动修改，保留两位小数 -->
<el-table-column label="总金额(万)" align="center">
<template slot-scope="scope">
<div class="small">
<el-input oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" v-model="scope.row.gross" placeholder="请输入"type="text"></el-input>
</div>
</template>
</el-table-column>
<el-table-column label="端口地址 " align="center">
<template slot-scope="scope">
<el-button @click="configure(scope.row)">配置</el-button>
</template>
</el-table-column>
<el-table-column label="状态" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.platformState"
:active-value="1"
:inactive-value="0"
@change="platformSwitch($event,scope.row)">
</el-switch>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
<el-card shadow="hover" class="mgb20">
<div>
<div class="flex-center mgb20 user_header">
<p class="addhr_tag"></p>
<span>合同信息</span>
</div>
<div>
<el-form ref="contractInformation" :model="contractInformation" :rules="rules" label-width="80px" class="flex-start">
<el-col :span="6" :offset="5">
<el-form-item label="合同名称">
<el-input v-model="contractInformation.contractInformationName" placeholder="请输入合同名称"></el-input>
</el-form-item>
<el-form-item label="合同金额" prop="contractInformationSum">
<el-input v-model="contractInformation.contractInformationSum"
placeholder="请输入合同金额"></el-input>
</el-form-item>
</el-col>
<el-col :span="6" :offset="2">
<el-form-item label="合同编号">
<el-input v-model="contractInformation.contractInformationNumber" placeholder="请输入合同编号"></el-input>
</el-form-item>
<el-form-item label="上传合同">
<el-upload
class="contract"
:headers="{token}"
:on-remove="handleRemove"
:on-error="uploadError"
:on-success="uploadSuccess"
:before-remove="beforeRemove"
:limit="1"
:on-exceed="handleExceed"
:action="api.uploadFiles"
:file-list="uploadList"
>
<el-button size="medium" type="plain" class="uploadTitle">上传</el-button>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="2" class="downcol">
<el-form-item>
<el-button size="medium" type="plain" class="down" @click="downLoad()">下载</el-button>
</el-form-item>
</el-col>
</el-form>
</div>
</div>
</el-card>
</el-col>
</el-row>
<!-- 添加应用 -->
<el-dialog :visible.sync="curVisible" width="50%" center>
<div class="flex-between mgb20">
<div class="flex-center">
<p class="addhr_tag"></p>
<span>课程列表</span>
</div>
<div>
<el-input placeholder="请输入课程名称" prefix-icon="el-icon-search" v-model="configSearch" @keyup.enter.native="onSearch" clearable></el-input>
</div>
</div>
<el-table :data="permissionData" stripe header-align="center" @selection-change="handleSelectionChange" :row-key="getRowKeys">
<el-table-column type="selection" width="55" align="center"></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="courseType" label="课程类型" align="center">
</el-table-column>
<el-table-column label="配置的实训应用" align="center">
<template slot-scope="scope">
<span class="ellipsis">{{scope.row.systemName}}</span>
</template>
</el-table-column>
<el-table-column prop="courseHours" label="预计课时" align="center">
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo">
</el-pagination>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="curVisible = false">取 消</el-button>
<el-button type="primary" v-preventReClick @click="addSystem()">确 定</el-button>
</span>
</el-dialog>
<!-- 选择IP -->
<el-dialog :visible.sync="ipVisible" width="70%" center>
<div class="flex-center mgb20">
<p class="hr_tag"></p>
<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>
</template>
</el-table-column>
<el-table-column label="选择" align="center">
<template slot-scope="scope">
<i class="el-icon-success radio_icon"></i>
</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>
</template>
<script>
export default {
data() {
return {
token: this.$store.state.loginToken,
form: {
orderNumber: '',
orderDate: '',
provinceId: '',
orderContact: '',
email: '',
customerId: '',
orderType: '',
cityId: '',
phone: '',
orderAmount: '',
orderId: this.$store.state.orderId,
},
contractInformation: {
contractInformationName: '',
contractInformationNumber: '',
contractInformationSum: '',
contractInformationLink: '',
contractInformationId: '',
orderId: ''
},
uploadList: [],
rules: {
orderNumber: [
{ required: true, message: '请输入订单编号', trigger: 'blur' }
],
orderAmount: [
{ required: true, message: '请输入课程成交价计算订单金额', trigger: 'blur' }
],
provinceId: [
{ required: true, message: '请选择省份', trigger: 'change' }
],
cityId: [
{ required: true, message: '请选择城市', trigger: 'change' }
],
customerId: [
{ required: true, message: '请选择客户名称', trigger: 'change' }
],
orderType: [
{ required: true, message: '请选择订单类型', trigger: 'change' }
],
// phone: [
// { required: true, message: '请选择客户获取手机号', trigger: 'blur' },
// {
// pattern: /^1[3456789]\d{9}$/,
// message: '请输入正确的手机号',
// trigger: 'blur'
// }
// ],
// contractInformationName: [
// { required: true, message: '请输入合同名称', trigger: 'blur' }
// ],
contractInformationSum: [
// { required: true, message: '请输入合同金额', trigger: 'blur' },
{ pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, message: '请输入正确金额格式,可保留两位小数' }
],
transactionPrice: [
{ required: true, message: '请输入成交价', trigger: 'blur' },
{ pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, message: '请输入正确金额格式,可保留两位小数' }
],
},
orderTypeList: [{
name: '正式',
value: 1
},
{
name: '试用',
value: 2
}],
provinceList: this.$store.state.provinceList,
cityList: [],
schoolList: [],
jurisdictionData: [
{ name:'1',
date:'',
startDate:'',
endDate:'',
consignment:false,
}
],// 课程权限
dataPlatform:[
{
name:'1',
date:'',
startDate:'',
endDate:'',
platformState:'',
bargain:'',
account:'',
gross:''
}
],// 数据平台data
permissionData: [],
curVisible: false,
configSearch: '',
yearList: [{
name: '1个月',
value: 30
},{
name: '2个月',
value: 60
},{
name: '3个月',
value: 90
},{
name: '1年',
value: 365
},
{
name: '2年',
value: 730
},
{
name: '3年',
value: 1095
}],
pageNo: 1,
pageSize: 10,
totals: 1,
ipVisible: false,
IPData: [{
id: 1,
age: '小额贷系统',
storeName: '1个月',
total: '2019.01.02 11:00',
payamount: '2019.01.02 11:00',
payamount: '700d12h1min',
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',
payamount: '700d12h1min',
swtich: true,
Intranet: '',
extranet: ''
}],
curArr: '',
test: []
};
},
mounted() {
if(this.form.orderId){
let data = {
orderId: this.form.orderId
}
this.$get(this.api.queryOrderDetails,data).then((res) => {
this.form = {
orderNumber: res.message[0].orders[0].orderNumber,
orderDate: res.message[0].orders[0].orderDate,
provinceId: res.message[0].orders[0].provinceId,
orderContact: res.message[0].orders[0].orderContact,
email: res.message[0].orders[0].email,
customerId: res.message[0].orders[0].customerId,
orderType: res.message[0].orders[0].orderType,
cityId: res.message[0].orders[0].cityId,
phone: res.message[0].orders[0].phone,
orderAmount: res.message[0].orders[0].orderAmount,
orderId: res.message[0].orders[0].orderId,
}
this.jurisdictionData = res.message[0].coursePermissionss
let arr1 = this.jurisdictionData
let result1 = arr1.map(e => e.courseId).join()
this.curArr = this.curArr.concat(result1)
if(res.message[0].contractInformations[0].contractInformationLink){
var iconImg = [];
iconImg.push({'name':'合同文件','url': res.message[0].contractInformations[0].contractInformationLink});
this.uploadList = iconImg
}
this.contractInformation = {
contractInformationName: res.message[0].contractInformations[0].contractInformationName,
contractInformationNumber: res.message[0].contractInformations[0].contractInformationNumber,
contractInformationSum: res.message[0].contractInformations[0].contractInformationSum,
contractInformationLink: res.message[0].contractInformations[0].contractInformationLink,
contractInformationId: res.message[0].contractInformations[0].contractInformationId,
orderId: res.message[0].contractInformations[0].orderId
}
this.getCityData()
this.getSchoolData()
}).catch((res) => {
})
}
},
methods: {
testfn(event){
console.log(event,'ev');
},
// 清除省份
clearprovince(){
this.form.cityId = '',
this.form.customerId = '',
this.form.orderContact = ''
this.form.phone = ''
this.form.email = ''
},
// 获取城市
getCity(){
this.clearprovince()
this.getCityData()
},
getCityData(){
let data = {
provinceId: this.form.provinceId
}
this.$get(this.api.queryCity,data).then(res => {
this.cityList = res.list
}).catch(res => {});
},
// 清除城市
clearcity(){
this.form.customerId = '',
this.form.orderContact = ''
this.form.phone = ''
this.form.email = ''
},
// 获取学校/客户名称
getSchool(){
this.clearcity()
this.getSchoolData()
},
getSchoolData(){
let data = {
provinceId: this.form.provinceId,
cityId: this.form.cityId
}
this.$get(this.api.queryOrderCustomer,data).then(res => {
this.schoolList = res.message
}).catch(res => {});
},
clearcustomer(){
this.form.orderContact = ''
this.form.phone = ''
this.form.email = ''
},
// 获取学校/客户信息
getcustomer(){
let data = {
customerId: this.form.customerId
}
this.$get(this.api.queryOrderCustomerContact,data).then(res => {
this.form.orderContact = res.message[0].adminName
this.form.phone = res.message[0].adminPhone
this.form.email = res.message[0].email
}).catch(res => {});
},
async saveOrder() {
try {
await Promise.all([
this.$refs.form.validate(),
this.$refs.contractInformation.validate()
]);
if(this.jurisdictionData.length == 0){
this.$message.error('请添加课程配置！');
}else{
function findCherries(fruit) {
return fruit.transactionPrice === '';
}
if(this.jurisdictionData.find(findCherries)){
this.$message.error('请先填写成交价！');
}else{
let data = {
order: this.form,
coursePermissionss: this.jurisdictionData,
contractInformation: this.contractInformation
}
if(this.form.orderId){
this.$post(this.api.updateOrder,data).then((res) => {
this.$message.success('编辑成功');
this.goback()
}).catch((res) => {})
} else {
this.$post(this.api.addOrder,data).then((res) => {
this.$message.success('添加成功');
this.goback()
}).catch((res) => {})
}
}
}
} catch (error) {
return;
}
},
// 获取应用配置
getConfig(rows){
this.multipleSelection = []
let data = {
courseId: this.curArr,
searchContent: this.configSearch,
pageNo: this.pageNo,
pageSize: this.pageSize,
}
this.$get(this.api.queryCourseList,data).then(res => {
res.message.rows.forEach(e => {
e.courseType = this.courseTypeStatus(e.courseType)
e.courseHours = this.hoursStatus(e.courseHours)
})
this.permissionData = res.message.rows
this.totals = res.message.total
this.curVisible = true
}).catch(res => {});
},
onSearch(){
this.getConfig()
},
getRowKeys(row) {
return row.courseId;
},
// 多选操作
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 绑定实训配置
addSystem() {
this.curVisible = false
let arr = this.multipleSelection
let result = arr.map(e => e.courseId).join()
this.curArr = this.curArr.concat(`,${result}`)
if (this.curArr.substr(0,1)==','){
this.curArr = this.curArr.substr(1);
}
let data = {
courseId: result,
}
this.getPermissions(data)
},
handleCurrentChange(val) {
this.pageNo = val;
this.getConfig();
},
// 查询应用权限
getPermissions(val){
this.$get(this.api.queryCoursePermissions,val).then(res => {
this.curVisible = false
var arritem = {
usePeriod: 30,
transactionPrice: '',
discount: '',
isDeliverGoods: 0,
portAddressId: 1,
orderId: this.form.orderId
}
let arryNew = []
res.message.map(item => {
arryNew.push(Object.assign({}, item, arritem))
})
this.jurisdictionData = this.jurisdictionData.concat(arryNew)
}).catch(res => {});
},
deljur(index,row){
this.$confirm('确定要删除该课程吗？', '提示', {
type: 'warning'
})
.then(() => {
let newArr = this.curArr.split(",")
this.removeByValue(newArr, row.courseId);
var newStr = newArr.toString();
this.curArr = newStr
this.jurisdictionData.splice(index,1);
this.$message.success('删除成功');
})
.catch(() => {});
},
discountChange(row){
let reg = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
if(!(reg.test(row.transactionPrice))){
this.$message.error('请输入正确金额格式,可保留两位小数！');
row.transactionPrice = ''
}else{
row.discount = this.Percentage(row.transactionPrice,row.marketPrice)
}
},
getSummaries(param) {
const { columns, data } = param;
var sums = 0;
data.map(e => {
sums+=Number(e.transactionPrice)
})
this.form.orderAmount = sums
return sums;
},
// 上传文件
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`
);
},
uploadSuccess(response, file, fileList) {
this.uploadList.push({ name: file.name, url: response.message.fileUrl });
this.contractInformation.contractInformationLink = response.message.fileUrl
},
uploadError(err, file, fileList) {
this.$message({
message: "上传出错，请重试！",
type: "error",
center: true
});
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`);
},
handleRemove(file, fileList) {
this.contractInformation.contractInformationLink = ''
},
downLoad(){
let downFile = this.contractInformation.contractInformationLink.replace("http://liuwanr.oss-cn-shenzhen.aliyuncs.com/","")
window.open(`${this.api.downloadFiles}?objectName=${downFile}`)
},
configure(){
this.ipVisible = true
},
IPSure(){
this.ipVisible = false
},
goback(){
this.$router.go(-1)
},
// 课程部分的switch切换
courseSwitch(e,row){
this.deadLine(row.date,row)
},
// 平台权限switch切换
platformSwitch (e,row) {
this.deadLine(row.date,row)
},
// 使用期限转换
deadLine(e,row){
console.log(row.consignment,e,'row.consignment');
if(e===''||!row.consignment) {
console.log('進入return');
row.startDate = ''
row.endDate = ''
return
}
function completeDate(value) {
return value < 10 ? "0"+value:value;
}
let char = "-";
let nowDate = new Date()
let day = nowDate.getDate();
let month = nowDate.getMonth() + 1;
let year = nowDate.getFullYear();
//补全0，并拼接当前的时间点
let nowYear = year + char + completeDate(month) + char +completeDate(day);
// 判断结束日期
let endYear = +year+parseInt(e/12) + char + completeDate(month+e%12) + char +completeDate(day);
// 待接口改
row.startDate = nowYear
row.endDate = endYear
this.$forceUpdate();
console.log(endYear,nowYear);
},
// 计算成交总额
dealComputers(e,row){
if(row.bargain&&row.account){
row.gross = row.bargain*row.account;
this.$forceUpdate();
console.log(row.gross,'row.gross');
}
}
}
};
</script>
<style lang="scss" scoped>
/deep/.course-input .el-input__inner {
width: 120px;
}
/deep/ .small .el-input__inner{
width: 70px;
}
.mag{
margin-right: 20px;
}
.uploadTitle{
width: 100%;
height: 40px;
font-size: 16px;
}
.application_input{
width: 250px;
}
.contract .el-upload{
width: 100%!important;
}
.downcol .el-form-item__content{
margin-left: 0!important;
}
.down{
margin-top: 60px;
height: 40px;
}
/* 选择IP */
.tab_temp label{
width: 60px;
}
.mar10{
margin-top: 10px;
}
.radio_icon{
font-size: 26px;
color: #9278FF;
}
.ellipsis{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>

999
src/views/order/AddOrder.vue
Unescape View File

@ -0,0 +1,999 @@
<template>
<div>
<!-- 订单详情 -->
<div v-show="!showSelectClient">
<el-row :gutter="20">
<el-col :span="24">
<el-card shadow="hover" class="mgb20">
<div class="flex-between">
<div class="per_title" v-preventReClick @click="goback()">
<i class="el-icon-arrow-left"></i>
<span class="per_back">返回</span>
<span class="per_school">订单处理</span>
</div>
<el-button type="primary" size="small" round class="mag" v-preventReClick @click="saveOrder('form')">确定</el-button>
</div>
</el-card>
<el-card shadow="hover" class="mgb20">
<div>
<div class="flex-center mgb20 user_header">
<p class="addhr_tag"></p>
<span>基本信息</span>
</div>
<div>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-col :span="6" :offset="5">
<el-form-item label="订单编号">
<el-input v-model="form.orderNumber" disabled placeholder="自动生成"></el-input>
</el-form-item>
<el-form-item label="订单时间" required>
<el-date-picker
style="width:100%"
v-model="form.createTime"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="省份">
<el-select disabled v-model="form.provinceId" clearable placeholder="请选择省份" @change="getCity" @clear="clearprovince()">
<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 label="联系人" prop="orderContact" required>
<el-input v-model="form.orderContact" placeholder="请输入联系人姓名"></el-input>
</el-form-item>
<el-form-item label="邮箱" required>
<el-input v-model="form.email" placeholder="请输入邮箱地址"></el-input>
</el-form-item>
</el-col>
<el-col :span="6" :offset="2">
<el-form-item prop="customerName" label="订单客户" required>
<div @click="gotoClient" style="cursor: pointer">
<el-input v-model="form.customerName" clearable placeholder="请选择客户"></el-input>
</div>
</el-form-item>
<el-form-item prop="orderType" label="订单类型" required>
<el-select v-model="form.orderType" clearable placeholder="请选择订单类型">
<el-option v-for="(item,index) in orderTypeList" :key="index" :label="item.name" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="城市">
<el-select disabled v-model="form.cityId" placeholder="请选择">
<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 label="电话" required>
<el-input v-model="form.phone" placeholder="请输入电话号码" maxlength="11"></el-input>
</el-form-item>
<el-form-item label="订单金额" prop="orderAmount">
<el-input type="number" v-model="form.orderAmount" placeholder="请输入订单金额"></el-input>
</el-form-item>
</el-col>
</el-form>
</div>
</div>
</el-card>
<el-card shadow="hover" class="mgb20">
<div>
<div class="flex-between mgb20 user_header">
<div class="flex-center">
<p class="addhr_tag"></p>
<span>课程权限</span>
</div>
<el-button type="primary" size="small" round class="mag" @click="getConfig()">添加</el-button>
</div>
<el-table :data="jurisdictionData" class="orderTable" stripe header-align="center" show-summary :summary-method="getSummaries">
<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" width="200">
<template slot-scope="scope">
<div class="course-input">
<el-input @change="deadLine($event,scope.row)" maxlength="10" oninput="value=value.replace(/[^0-9.]/g,'')" v-model="scope.row.date" placeholder="输入时间"></el-input>
<span>月</span>
</div>
</template>
</el-table-column>
<el-table-column label="起止日期" align="center" width="200">
<template slot-scope="scope">
<p v-if="!scope.row.startDate">请输入使用期限，且确认发货</p>
<div v-else style="display:flex;justify-content:center;">
<p>{{scope.row.startDate}}</p><span>&nbsp;&nbsp;-&nbsp;&nbsp;</span><p>{{scope.row.endDate}}</p>
</div>
</template>
</el-table-column>
<el-table-column label="剩余期限" align="center">
<template slot-scope="scope">
<div class="small">
<el-input v-model="scope.row.transactionPrice" placeholder="请输入"type="text"></el-input>
<span>天</span>
</div>
</template>
</el-table-column>
<el-table-column label="市场价" align="center">
<template slot-scope="scope">
<div class="small">
<el-input v-model="scope.row.transactionPrice" placeholder="请输入"type="text"></el-input>
<span>万</span>
</div>
</template>
</el-table-column>
<el-table-column label="成交价 " align="center">
<template slot-scope="scope">
<div class="small">
<el-input v-model="scope.row.transactionPrice" placeholder="请输入"type="text"></el-input>
<span>万</span>
</div>
</template>
</el-table-column>
<el-table-column label="折扣率 " align="center">
<template slot-scope="scope">
<div class="small">
<el-input v-model="scope.row.transactionPrice" placeholder="请输入"type="text"></el-input>
</div>
</template>
</el-table-column>
<el-table-column label="端口地址 " align="center">
<template slot-scope="scope">
<el-button @click="configure(scope.row)">配置</el-button>
</template>
</el-table-column>
<el-table-column label="发货" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.consignment"
:active-value="1"
:inactive-value="0"
@change="courseSwitch($event,scope.row)">
</el-switch>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
<el-card shadow="hover" class="mgb20">
<div>
<div class="flex-between mgb20 user_header">
<div class="flex-center">
<p class="addhr_tag"></p>
<span>数据平台权限</span>
</div>
<el-button type="primary" size="small" round class="mag" @click="getConfig()">添加</el-button>
</div>
<el-table :data="dataPlatform" class="orderTable" stripe header-align="center" show-summary :summary-method="getSummaries">
<el-table-column type="index" width="100" label="序号" align="center">
</el-table-column>
<el-table-column prop="name" label="产品名称" align="center">
</el-table-column>
<el-table-column label="使用期限" align="center" width="200">
<template slot-scope="scope">
<div class="course-input">
<el-input maxlength="10" oninput="value=value.replace(/[^0-9.]/g,'')" v-model="scope.row.date" placeholder="输入时间"></el-input>
<span>月</span>
</div>
</template>
</el-table-column>
<el-table-column label="起止日期" align="center" width="200">
<template slot-scope="scope">
<p v-if="!scope.row.startDate">请输入使用期限，且确认状态</p>
<div v-else style="display:flex;justify-content:center;">
<p>{{scope.row.startDate}}</p><span>&nbsp;&nbsp;-&nbsp;&nbsp;</span><p>{{scope.row.endDate}}</p>
</div>
</template>
</el-table-column>
<el-table-column label="剩余期限" align="center">
<template slot-scope="scope">
<div class="small">
<el-input v-model="scope.row.transactionPrice" placeholder="请输入"type="text"></el-input>
<span>天</span>
</div>
</template>
</el-table-column>
<el-table-column label="市场价" align="center" width="165">
<template slot-scope="scope">
<div class="small">
<el-input disabled v-model="scope.row.transactionPrice" placeholder="请输入"type="text"></el-input>
<span>元&nbsp;/&nbsp;账号</span>
</div>
</template>
</el-table-column>
<el-table-column label="成交价" align="center" width="165">
<template slot-scope="scope">
<div class="small">
<el-input @change="dealComputers($event,scope.row)" v-model="scope.row.bargain" placeholder="请输入"type="text"></el-input>
<span>元&nbsp;/&nbsp; 账号</span>
</div>
</template>
</el-table-column>
<el-table-column label="折扣率" align="center">
<template slot-scope="scope">
<div class="small">
<el-input disabled v-model="scope.row.transactionPrice" placeholder="请输入"type="text"></el-input>
</div>
</template>
</el-table-column>
<el-table-column label="账号数" align="center">
<template slot-scope="scope">
<div class="small">
<el-input @change="dealComputers($event,scope.row)" v-model="scope.row.account" placeholder="请输入"type="text"></el-input>
</div>
</template>
</el-table-column>
<!-- 金额自动计算，计算方式：账号数*成交价，且可以手动修改，保留两位小数 -->
<el-table-column label="总金额(万)" align="center">
<template slot-scope="scope">
<div class="small">
<el-input oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" v-model="scope.row.gross" placeholder="请输入"type="text"></el-input>
</div>
</template>
</el-table-column>
<el-table-column label="端口地址 " align="center">
<template slot-scope="scope">
<el-button @click="configure(scope.row)">配置</el-button>
</template>
</el-table-column>
<el-table-column label="状态" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.platformState"
:active-value="1"
:inactive-value="0"
@change="platformSwitch($event,scope.row)">
</el-switch>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
<el-card shadow="hover" class="mgb20">
<div>
<div class="flex-center mgb20 user_header">
<p class="addhr_tag"></p>
<span>合同信息</span>
</div>
<div>
<el-form ref="contractInformation" :model="contractInformation" :rules="rules" label-width="80px" class="flex-start">
<el-col :span="6" :offset="5">
<el-form-item label="合同名称">
<el-input v-model="contractInformation.contractInformationName" placeholder="请输入合同名称"></el-input>
</el-form-item>
<el-form-item label="合同金额" prop="contractInformationSum">
<el-input v-model="contractInformation.contractInformationSum"
placeholder="请输入合同金额"></el-input>
</el-form-item>
</el-col>
<el-col :span="6" :offset="2">
<el-form-item label="合同编号">
<el-input v-model="contractInformation.contractInformationNumber" placeholder="请输入合同编号"></el-input>
</el-form-item>
<el-form-item label="上传合同">
<el-upload
class="contract"
:headers="{token}"
:on-remove="handleRemove"
:on-error="uploadError"
:on-success="uploadSuccess"
:before-remove="beforeRemove"
:limit="1"
:on-exceed="handleExceed"
:action="api.uploadFiles"
:file-list="uploadList"
>
<el-button size="medium" type="plain" class="uploadTitle">上传</el-button>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="2" class="downcol">
<el-form-item>
<el-button size="medium" type="plain" class="down" @click="downLoad()">下载</el-button>
</el-form-item>
</el-col>
</el-form>
</div>
</div>
</el-card>
</el-col>
</el-row>
<!-- 添加应用 -->
<el-dialog :visible.sync="curVisible" width="50%" center>
<div class="flex-between mgb20">
<div class="flex-center">
<p class="addhr_tag"></p>
<span>课程列表</span>
</div>
<div>
<el-input placeholder="请输入课程名称" prefix-icon="el-icon-search" v-model="configSearch" @keyup.enter.native="onSearch" clearable></el-input>
</div>
</div>
<el-table :data="permissionData" stripe header-align="center" @selection-change="handleSelectionChange" :row-key="getRowKeys">
<el-table-column type="selection" width="55" align="center"></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="courseType" label="课程类型" align="center">
</el-table-column>
<el-table-column label="配置的实训应用" align="center">
<template slot-scope="scope">
<span class="ellipsis">{{scope.row.systemName}}</span>
</template>
</el-table-column>
<el-table-column prop="courseHours" label="预计课时" align="center">
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo">
</el-pagination>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="curVisible = false">取 消</el-button>
<el-button type="primary" v-preventReClick @click="addSystem()">确 定</el-button>
</span>
</el-dialog>
<!-- 选择IP -->
<el-dialog :visible.sync="ipVisible" width="70%" center>
<div class="flex-center mgb20">
<p class="hr_tag"></p>
<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>
</template>
</el-table-column>
<el-table-column label="选择" align="center">
<template slot-scope="scope">
<i class="el-icon-success radio_icon"></i>
</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>
<!-- 选择客户 -->
<select-client @back="backToOrder" v-show="showSelectClient"></select-client>
</div>
</template>
<script>
import selectClient from './selectClient.vue'
export default {
components:{
selectClient
},
data() {
return {
showSelectClient:false,// 切换展示选择客户页
token: this.$store.state.loginToken,
form: {
orderNumber: '',
orderDate: '',
provinceId: '',
orderContact: '',
email: '',
customerId: '',
orderType: '',
cityId: '',
phone: '',
orderAmount: '',
orderId: this.$store.state.orderId,
customerName:''
},
contractInformation: {
contractInformationName: '',
contractInformationNumber: '',
contractInformationSum: '',
contractInformationLink: '',
contractInformationId: '',
orderId: ''
},
uploadList: [],
rules: {
orderNumber: [
{ required: true, message: '请输入订单编号', trigger: 'blur' }
],
orderAmount: [
{ required: true, message: '请输入课程成交价计算订单金额', trigger: 'blur' }
],
customerName: [
{ required: true, message: '请选择订单客户', trigger: 'blur' }
],
provinceId: [
{ required: true, message: '请选择省份', trigger: 'change' }
],
cityId: [
{ required: true, message: '请选择城市', trigger: 'change' }
],
customerId: [
{ required: true, message: '请选择客户名称', trigger: 'change' }
],
orderType: [
{ required: true, message: '请选择订单类型', trigger: 'change' }
],
// phone: [
// { required: true, message: '请选择客户获取手机号', trigger: 'blur' },
// {
// pattern: /^1[3456789]\d{9}$/,
// message: '请输入正确的手机号',
// trigger: 'blur'
// }
// ],
// contractInformationName: [
// { required: true, message: '请输入合同名称', trigger: 'blur' }
// ],
contractInformationSum: [
// { required: true, message: '请输入合同金额', trigger: 'blur' },
{ pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, message: '请输入正确金额格式,可保留两位小数' }
],
transactionPrice: [
{ required: true, message: '请输入成交价', trigger: 'blur' },
{ pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, message: '请输入正确金额格式,可保留两位小数' }
],
},
orderTypeList: [{
name: '正式',
value: 1
},
{
name: '试用',
value: 2
}],
provinceList: this.$store.state.provinceList,
cityList: [],
schoolList: [],
jurisdictionData: [
{ name:'1',
date:'',
startDate:'',
endDate:'',
consignment:false,
}
],// 课程权限
dataPlatform:[
{
name:'1',
date:'',
startDate:'',
endDate:'',
platformState:'',
bargain:'',
account:'',
gross:''
}
],// 数据平台data
permissionData: [],
curVisible: false,
configSearch: '',
yearList: [{
name: '1个月',
value: 30
},{
name: '2个月',
value: 60
},{
name: '3个月',
value: 90
},{
name: '1年',
value: 365
},
{
name: '2年',
value: 730
},
{
name: '3年',
value: 1095
}],
pageNo: 1,
pageSize: 10,
totals: 1,
ipVisible: false,
IPData: [{
id: 1,
age: '小额贷系统',
storeName: '1个月',
total: '2019.01.02 11:00',
payamount: '2019.01.02 11:00',
payamount: '700d12h1min',
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',
payamount: '700d12h1min',
swtich: true,
Intranet: '',
extranet: ''
}],
curArr: '',
test: []
};
},
created(){
console.log(this.$route.query.watch,'route');
this.getCityData()
if(this.$route.query.watch){
this.getDetail(this.$route.query.watch)
}
if(this.$route.query.edit){
this.getDetail(this.$route.query.edit)
}
},
mounted() {
// if(this.form.orderId){
// let data = {
// orderId: this.form.orderId
// }
// this.$get(this.api.queryOrderDetails,data).then((res) => {
// this.form = {
// orderNumber: res.message[0].orders[0].orderNumber,
// orderDate: res.message[0].orders[0].orderDate,
// provinceId: res.message[0].orders[0].provinceId,
// orderContact: res.message[0].orders[0].orderContact,
// email: res.message[0].orders[0].email,
// customerId: res.message[0].orders[0].customerId,
// orderType: res.message[0].orders[0].orderType,
// cityId: res.message[0].orders[0].cityId,
// phone: res.message[0].orders[0].phone,
// orderAmount: res.message[0].orders[0].orderAmount,
// orderId: res.message[0].orders[0].orderId,
// }
// this.jurisdictionData = res.message[0].coursePermissionss
// let arr1 = this.jurisdictionData
// let result1 = arr1.map(e => e.courseId).join()
// this.curArr = this.curArr.concat(result1)
// if(res.message[0].contractInformations[0].contractInformationLink){
// var iconImg = [];
// iconImg.push({'name':'合同文件','url': res.message[0].contractInformations[0].contractInformationLink});
// this.uploadList = iconImg
// }
// this.contractInformation = {
// contractInformationName: res.message[0].contractInformations[0].contractInformationName,
// contractInformationNumber: res.message[0].contractInformations[0].contractInformationNumber,
// contractInformationSum: res.message[0].contractInformations[0].contractInformationSum,
// contractInformationLink: res.message[0].contractInformations[0].contractInformationLink,
// contractInformationId: res.message[0].contractInformations[0].contractInformationId,
// orderId: res.message[0].contractInformations[0].orderId
// }
// this.getCityData()
// this.getSchoolData()
// }).catch((res) => {
// })
// }
},
methods: {
// 读取页面详情
async getDetail(id){
this.$get(this.api.orderDetail,{orderId:+id}).then(res=>{
console.log(res,'请求详情');
let form = res.orderDetails.order
console.log(form.orderAmount,'amount');
this.form = {
orderNumber : form.orderNumber,
createTime:form.createTime,
provinceId:form.provinceId,
orderContact:form.orderContact,
email:form.email,
customerId:form.customerId,
customerName:form.customerName,
orderType:form.orderType,
cityId:form.cityId,
phone:form.phone,
orderAmount:form.orderAmount,
}
console.log(this.form,'amount');
})
},
// 点击订单客户框触发
gotoClient(){
// 记录当前页面数据，进入次级页面选择客户
console.log('下拉框触发A');
this.showSelectClient = !this.showSelectClient
},
// 选择客户返回传值
backToOrder(val){
console.log(val,'接受传值');
this.showSelectClient = !this.showSelectClient
if(val.id){
this.form.customerName = val.name
this.form.customerId = val.id
this.$get(this.api.queryCustomerDetails,{customerId:val.id}).then(res=>{
this.form.provinceId = res.result.customer.provinceId
this.form.cityId = res.result.customer.cityId
this.getCityData()
})
this.$forceUpdate()
}
},
// 清除省份
clearprovince(){
this.form.cityId = '',
this.form.customerId = '',
this.form.orderContact = ''
this.form.phone = ''
this.form.email = ''
},
// 获取城市
getCity(){
this.clearprovince()
this.getCityData()
},
getCityData(){
let data = {
provinceId: this.form.provinceId
}
return this.$get(this.api.queryCity,data).then(res => {
console.log(res.list,'res.list');
this.cityList = res.list
}).catch(res => {});
},
// 清除城市
clearcity(){
this.form.customerId = '',
this.form.orderContact = ''
this.form.phone = ''
this.form.email = ''
},
// 获取学校/客户名称
getSchool(){
this.clearcity()
this.getSchoolData()
},
getSchoolData(){
let data = {
provinceId: this.form.provinceId,
cityId: this.form.cityId
}
this.$get(this.api.queryOrderCustomer,data).then(res => {
this.schoolList = res.message
}).catch(res => {});
},
clearcustomer(){
this.form.orderContact = ''
this.form.phone = ''
this.form.email = ''
},
// 获取学校/客户信息
getcustomer(){
let data = {
customerId: this.form.customerId
}
this.$get(this.api.queryOrderCustomerContact,data).then(res => {
this.form.orderContact = res.message[0].adminName
this.form.phone = res.message[0].adminPhone
this.form.email = res.message[0].email
}).catch(res => {});
},
async saveOrder() {
try {
await Promise.all([
this.$refs.form.validate(),
this.$refs.contractInformation.validate()
]);
if(this.jurisdictionData.length == 0){
this.$message.error('请添加课程配置！');
}else{
function findCherries(fruit) {
return fruit.transactionPrice === '';
}
if(this.jurisdictionData.find(findCherries)){
this.$message.error('请先填写成交价！');
}else{
let data = {
order: this.form,
coursePermissionss: this.jurisdictionData,
contractInformation: this.contractInformation
}
if(this.form.orderId){
this.$post(this.api.updateOrder,data).then((res) => {
this.$message.success('编辑成功');
this.goback()
}).catch((res) => {})
} else {
this.$post(this.api.addOrder,data).then((res) => {
this.$message.success('添加成功');
this.goback()
}).catch((res) => {})
}
}
}
} catch (error) {
return;
}
},
// 获取应用配置
getConfig(rows){
this.multipleSelection = []
let data = {
courseId: this.curArr,
searchContent: this.configSearch,
pageNo: this.pageNo,
pageSize: this.pageSize,
}
this.$get(this.api.queryCourseList,data).then(res => {
res.message.rows.forEach(e => {
e.courseType = this.courseTypeStatus(e.courseType)
e.courseHours = this.hoursStatus(e.courseHours)
})
this.permissionData = res.message.rows
this.totals = res.message.total
this.curVisible = true
}).catch(res => {});
},
onSearch(){
this.getConfig()
},
getRowKeys(row) {
return row.courseId;
},
// 多选操作
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 绑定实训配置
addSystem() {
this.curVisible = false
let arr = this.multipleSelection
let result = arr.map(e => e.courseId).join()
this.curArr = this.curArr.concat(`,${result}`)
if (this.curArr.substr(0,1)==','){
this.curArr = this.curArr.substr(1);
}
let data = {
courseId: result,
}
this.getPermissions(data)
},
handleCurrentChange(val) {
this.pageNo = val;
this.getConfig();
},
// 查询应用权限
getPermissions(val){
this.$get(this.api.queryCoursePermissions,val).then(res => {
this.curVisible = false
var arritem = {
usePeriod: 30,
transactionPrice: '',
discount: '',
isDeliverGoods: 0,
portAddressId: 1,
orderId: this.form.orderId
}
let arryNew = []
res.message.map(item => {
arryNew.push(Object.assign({}, item, arritem))
})
this.jurisdictionData = this.jurisdictionData.concat(arryNew)
}).catch(res => {});
},
deljur(index,row){
this.$confirm('确定要删除该课程吗？', '提示', {
type: 'warning'
})
.then(() => {
let newArr = this.curArr.split(",")
this.removeByValue(newArr, row.courseId);
var newStr = newArr.toString();
this.curArr = newStr
this.jurisdictionData.splice(index,1);
this.$message.success('删除成功');
})
.catch(() => {});
},
discountChange(row){
let reg = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
if(!(reg.test(row.transactionPrice))){
this.$message.error('请输入正确金额格式,可保留两位小数！');
row.transactionPrice = ''
}else{
row.discount = this.Percentage(row.transactionPrice,row.marketPrice)
}
},
getSummaries(param) {
const { columns, data } = param;
var sums = 0;
data.map(e => {
sums+=Number(e.transactionPrice)
})
this.form.orderAmount = sums
return sums;
},
// 上传文件
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`
);
},
uploadSuccess(response, file, fileList) {
this.uploadList.push({ name: file.name, url: response.message.fileUrl });
this.contractInformation.contractInformationLink = response.message.fileUrl
},
uploadError(err, file, fileList) {
this.$message({
message: "上传出错，请重试！",
type: "error",
center: true
});
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`);
},
handleRemove(file, fileList) {
this.contractInformation.contractInformationLink = ''
},
downLoad(){
let downFile = this.contractInformation.contractInformationLink.replace("http://liuwanr.oss-cn-shenzhen.aliyuncs.com/","")
window.open(`${this.api.downloadFiles}?objectName=${downFile}`)
},
configure(){
this.ipVisible = true
},
IPSure(){
this.ipVisible = false
},
goback(){
this.$router.go(-1)
},
// 课程部分的switch切换
courseSwitch(e,row){
this.deadLine(row.date,row)
},
// 平台权限switch切换
platformSwitch (e,row) {
this.deadLine(row.date,row)
},
// 使用期限转换
deadLine(e,row){
console.log(row.consignment,e,'row.consignment');
if(e===''||!row.consignment) {
console.log('進入return');
row.startDate = ''
row.endDate = ''
return
}
function completeDate(value) {
return value < 10 ? "0"+value:value;
}
let char = "-";
let nowDate = new Date()
let day = nowDate.getDate();
let month = nowDate.getMonth() + 1;
let year = nowDate.getFullYear();
//补全0，并拼接当前的时间点
let nowYear = year + char + completeDate(month) + char +completeDate(day);
// 判断结束日期
let endYear = +year+parseInt(e/12) + char + completeDate(month+e%12) + char +completeDate(day);
// 待接口改
row.startDate = nowYear
row.endDate = endYear
this.$forceUpdate();
console.log(endYear,nowYear);
},
// 计算成交总额
dealComputers(e,row){
if(row.bargain&&row.account){
row.gross = row.bargain*row.account;
this.$forceUpdate();
console.log(row.gross,'row.gross');
}
},
}
};
</script>
<style lang="scss" scoped>
/deep/.course-input .el-input__inner {
width: 120px;
}
/deep/ .small .el-input__inner{
width: 70px;
}
.mag{
margin-right: 20px;
}
.uploadTitle{
width: 100%;
height: 40px;
font-size: 16px;
}
.application_input{
width: 250px;
}
.contract .el-upload{
width: 100%!important;
}
.downcol .el-form-item__content{
margin-left: 0!important;
}
.down{
margin-top: 60px;
height: 40px;
}
/* 选择IP */
.tab_temp label{
width: 60px;
}
.mar10{
margin-top: 10px;
}
.radio_icon{
font-size: 26px;
color: #9278FF;
}
.ellipsis{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>

42
src/views/oder/Order.vue → src/views/order/Order.vue
Unescape View File

@ -69,7 +69,7 @@
</el-table-column> </el-table-column>
<el-table-column prop="customerName" label="客户名称" align="center"> <el-table-column prop="customerName" label="客户名称" align="center">
</el-table-column> </el-table-column>
<el-table-column prop="orderName" label="产品内容" align="center"> <el-table-column prop="orderContent" label="订单内容" align="center">
</el-table-column> </el-table-column>
<el-table-column prop="orderAmount" label="订单金额" align="center"> <el-table-column prop="orderAmount" label="订单金额" align="center">
</el-table-column> </el-table-column>
@ -83,10 +83,10 @@
</el-table-column> </el-table-column>
<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="edit(scope.row)">编辑</el-button> <el-button type="text" @click="handle('edit',scope.row)">编辑</el-button>
<el-button type="text" @click="handle('watch',scope.row)">查看</el-button> <el-button type="text" @click="handle('watch',scope.row)">查看</el-button>
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button> <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
<el-button type="text" @click="handleRenew(scope.row)">续费</el-button> <!-- <el-button type="text" @click="handleRenew(scope.row)">续费</el-button> -->
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -156,12 +156,12 @@ export default {
} }
this.$post(this.api.orderList,data).then(res => { this.$post(this.api.orderList,data).then(res => {
console.log(res,'list'); console.log(res,'list');
res.orderPage.records.forEach(e => { res.orderPage.orders.forEach(e => {
e.orderType = this.orderTypeFn(e.orderType) e.orderType = this.orderTypeFn(e.orderType)
e.orderStatus = this.orderStatusFn(e.orderStatus) e.orderStatus = this.orderStatusFn(e.orderStatus)
e.orderNature = this.orderNatureFn(e.orderNature) e.orderNature = this.orderNatureFn(e.orderNature)
}) })
this.orderData = res.orderPage.records this.orderData = res.orderPage.orders
this.totals =res.orderPage.total this.totals =res.orderPage.total
}).catch(res => {}); }).catch(res => {});
}, },
@ -188,20 +188,18 @@ export default {
this.$store.commit("systemData", { order_id : ''}); this.$store.commit("systemData", { order_id : ''});
this.$router.push('/addorder'); this.$router.push('/addorder');
}, },
edit(row){ handle(val,row){
this.$store.commit("systemData", { order_id : row.orderId}); this.$router.push('/addorder?'+val+'='+row.orderId);
this.$router.push('/addorder');
}, },
// 删除订单
handleDelete(row) { handleDelete(row) {
this.$confirm('确定要删除吗？', '提示', { this.$confirm('确定要删除吗？', '提示', {
type: 'warning' type: 'warning'
}) })
.then(() => { .then(() => {
let result = row.orderId
var arr = [] var arr = []
arr.push(result) arr.push(row.orderId)
let data = arr this.$post(this.api.orderDelete,{ids:arr}).then(res => {
this.$post(this.api.deleteOrder,data).then(res => {
this.$message.success('删除成功'); this.$message.success('删除成功');
this.getData() this.getData()
}).catch(res => {}); }).catch(res => {});
@ -216,24 +214,26 @@ export default {
return row.orderId; return row.orderId;
}, },
handleSelectionChange(val) { handleSelectionChange(val) {
this.multipleSelection = val; console.log(val,'xuan');
if(val.length>0){
this.multipleSelection = val.map(e=>e.orderId);
}else{
this.multipleSelection = []
}
}, },
delAllSelection() { delAllSelection() {
if(this.multipleSelection.length != ''){ if(this.multipleSelection.length != ''){
let arr = this.multipleSelection
let result = arr.map(e => e.orderId)
// 批量删除 // 批量删除
this.$confirm('确定要删除吗？', '提示', { this.$confirm('确定要删除吗？', '提示', {
type: 'warning' type: 'warning'
}) })
.then(() => { .then(() => {
let data = result this.$post(this.api.orderDelete,{ids:this.multipleSelection}).then(res => {
this.$post(this.api.deleteOrder,data).then(res => {
this.multipleSelection = []; this.multipleSelection = [];
this.$message.success('删除成功'); this.$message.success('删除成功');
this.getData() this.getData()
}).catch(res => {}); }).catch(err => {});
}).catch(() => {}); }).catch(err => {});
}else{ }else{
this.$message.error('请先选择订单 ！'); this.$message.error('请先选择订单 ！');
} }
@ -245,6 +245,10 @@ export default {
handleCurrentChange(val) { handleCurrentChange(val) {
this.pageNo = val; this.pageNo = val;
this.getData(); this.getData();
},
// 选择客户触发
gotoClient(){
this.$router.push('')
} }
} }
}; };

253
src/views/order/selectClient.vue
Unescape View File

@ -0,0 +1,253 @@
<template>
<div>
<el-row :gutter="20">
<el-col :span="24">
<el-card shadow="hover" class="mgb20">
<div class="flex-between">
<div class="per_title" v-preventReClick @click="goback()">
<i class="el-icon-arrow-left"></i>
<span class="per_back">返回</span>
<span class="per_school">选择客户</span>
</div>
<el-button type="primary" size="small" round class="mag" v-preventReClick @click="goback">确定</el-button>
</div>
</el-card>
</el-col>
<el-col :span="24">
<el-card shadow="hover" class="mgb20">
<div>
<div class="flex-center mgb20">
<p class="hr_tag"></p>
<span>筛选</span>
</div>
<div>
<el-form label-width="80px">
<el-col :span="6">
<el-form-item label="国家">
<el-select v-model="form.countries" 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-col>
<el-col :span="6">
<el-form-item label="省份">
<el-select v-model="form.provinces" clearable placeholder="请选择省份" @change="getCity" @clear="clearprovince">
<el-option v-for="(item,index) in provinceList" :key="index" :label="item.provinceName" :value="item.provinceId"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="城市">
<el-select v-model="form.city" clearable placeholder="请选择城市" :disabled="form.provinces ? false : true" @change="initData">
<el-option v-for="(item,index) in cityList" :key="index" :label="item.cityName" :value="item.cityId"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item>
<el-input placeholder="请输入客户名称/管理员姓名/电话" @clear="clearSearch" @keyup.enter.native="getData" prefix-icon="el-icon-search" v-model="form.keyword" clearable></el-input>
</el-form-item>
</el-col>
</el-form>
</div>
</div>
</el-card>
</el-col>
<el-col :span="24">
<el-card shadow="hover" class="mgb20">
<div class="flex-between mgb20">
<div class="flex-center">
<p class="hr_tag"></p>
<span>客户列表</span>
</div>
<div>
</div>
</div>
<el-table :data="listData" class="table" stripe header-align="center" 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">
<template slot-scope="scope">
{{scope.$index + (page - 1) * pageSize + 1}}
</template>
</el-table-column>
<el-table-column prop="customerName" label="客户名称" align="center">
</el-table-column>
<el-table-column label="行业" align="center">
<template slot-scope="scope">
<span class="ellipsis">{{scope.row.industryName}}</span>
</template>
</el-table-column>
<el-table-column prop="countries" label="国家" align="center">
</el-table-column>
<el-table-column prop="provinceName" label="省份" align="center">
</el-table-column>
<el-table-column prop="cityName" label="城市" align="center">
</el-table-column>
<el-table-column prop="name" label="联系人" align="center">
</el-table-column>
<el-table-column prop="account" label="账号" align="center">
</el-table-column>
<el-table-column label="操作" width="270" align="center">
<template slot-scope="scope">
<el-checkbox @change="checkboxChenge(scope.row)" v-model="scope.row.checked"></el-checkbox>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="page">
</el-pagination>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
props:{
},
data(){
return{
page: 1,
pageSize: 10,
total: 1,
countryList: [{
name:'中国'
}],
listData: [],
form: {
countries:'中国',
provinces: '',
city: '',
keyword: ''
},
provinceList:[],
cityList:[],
checkedID:'',// 选中客户ID
checkedName:'',// 客户名称
}
},
created(){
this.getData()
this.getProvince()
},
methods:{
// 取得列表
getData(){
this.$post(this.api.queryCustomer,{
countries: this.form.countries,
provinceId: this.form.provinces,
cityId: this.form.city,
searchContent: this.form.keyword,
page: this.page,
size: this.pageSize
}).then(res => {
res.message.list.map(e=>{
e.checked = false
if(this.checkedID){
if(e.customerId===this.checkedID){
e.checked = true
}
}
})
this.listData = res.message.list
this.total = res.message.totalCount
}).catch(res => {})
},
// 省份
getProvince(){
this.$get(this.api.queryProvince).then(res => {
this.provinceList = res.list
this.$store.commit("provinceData", { provinceList : this.provinceList})
}).catch(res => {})
},
clearprovince(){
this.form.city = ''
},
getCity(){
this.clearprovince()
this.getCityData()
this.page = 1
this.initData()
},
getCityData(){
let data = {
provinceId: this.form.provinces
}
this.$get(this.api.queryCity,data).then(res => {
this.cityList = res.list
}).catch(res => {})
},
goback(){
console.log('确定选择');
this.$emit('back',{show:true,id:this.checkedID,name:this.checkedName})
},
initData(){
this.page = 1
this.getData()
},
handleCurrentChange(val) {
this.page = val
this.getData()
},
// checkbox交互
checkboxChenge(row){
this.listData.map(e=>{
e.checked = false
})
row.checked = true
this.checkedName = row.customerName
this.checkedID = row.customerId
},
clearSearch(){
this.getData()
}
}
}
</script>
<style lang="scss" scoped>
.mag{
margin-right: 20px;
}
/deep/ .el-checkbox__inner{
border-radius: 50%;
width: 17px;
height: 17px;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
background: #FFF;
}
/deep/ .el-checkbox__inner::after{
transform: none;
transition: all .3s ease-in;
width: 0;
height: 0;
position: relative;
top: 50%;
left: 50%;
border-radius: 50%;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner::after{
width: 13px;
height: 13px;
background: #9278FF;
position: relative;
top: 10%;
left: 10%;
transform: none;
display: block;
border-radius: 50%;
transition: all .3s ease-in;
border: 0;
}
</style>
Write Preview
Loading…
Cancel
Save