input文本框无法输入问题：
对于文本框显示值是对对象的复制问题，对model的每个属性单独赋值，问题解决。
为按钮添加权限
<el-button style="float: right; padding: 3px 0;" type="text" @click="addDeviceTypeControl" v-if=hasRole('设备中心:车辆基础信息:添加')">添加</el-button>
hasRole('设备中心:车辆基础信息:添加')
hasRole('设备中心:车辆基础信息:编辑')
hasRole('设备中心:车辆基础信息:删除')
v-if="hasRole('设备中心:车辆基础信息:添加')"
v-if="hasRole('设备中心:车辆基础信息:编辑')"
v-if="hasRole('设备中心:车辆基础信息:删除')"
修改配置请求达到本地项目：
‘/portal’: {
target: ‘http://127.0.0.1:15004’,
// target: ‘http://10.10.142.129:15412’,
changeOrigin: true,
secure: false
// pathRewrite: { ‘^/cq-ocms’ : ‘/’ }
},
本地开发用户名密码：
xxx
集成环境用户名密码：
xxx
feign.FeignException$NotFound: status 404 reading AppUserManagerFeign#getUserInfoDetail(String)
@ApiOperation(value = “获取用户信息详情”, notes = “获取用户信息详情”)
@RequestMapping(value = “/getUserInfoDetail”, method = RequestMethod.POST)
public Response getUserInfoDetail(@RequestBody Map map) {
Object id = map.get(“id”);
log.info(“parameter is [{}]”, JSON.toJSONString(id));
Response response = appUserManagerFeign.getUserInfoDetail(id.toString());
之前是这样接的json数据：
@RequestBody String id
feign 调用post get两种类型接口
@RequestMapping(value = “/api/user-service/v1/user/info/getUserLists”, method = RequestMethod.POST)
Response getUserLists(@RequestBody GetUserListsParameter appUserListParameter);
@RequestMapping(value = “/api/user-service/v1/user/info/{id}/getUserInfoDetail”, method = RequestMethod.GET)
Response getUserInfoDetail(@PathVariable(“id”) String id);
vue用户头像的显示：
路由配置：
C:\Users\Administrator\Desktop\vsp\流量需求\vspportal-management-front\src\router index.js
{
path: '/vsp/deviceCenter',
component: Layout,
alwaysShow: true,
meta: {
title: '设备中心',
icon: 'css'
},
children: [
{
path: '/vsp/deviceCenter/remoteControl',
component: () => import(/* webpackChunkName: "RemoteControl" */ '@/pages/vsp/deviceCenter/remoteControlManagement'),
name: 'RemoteControl',
meta: {
title: '配置项管理'
}
},
{
path: '/vsp/deviceCenter/basicInformationEquipment',
component: () => import( '@/pages/vsp/deviceCenter/basicInformationEquipment'),
name: 'BasicInformationEquipment',
meta: {
title: '设备基础信息'
}
}
]
},
序号递增以及提醒：
unbindCar(row) {
let data = {
userId: this.task.id,
vinCode: row.vinCode
};
this.$confirm('解绑后，用户将失去对车辆的控制权，请确认是否继续？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$post(consts.VSP_API_CONTEXT + '/portal/appusermanager/carReleaseForPortal/', data, (d) => {
if (d.code != '000000') {
this.$message.error(d.description);
return false;
} else {
this.dialogEditFormVisible = false;
this.$message({ type: 'success', message: '解绑成功', showClose: true });
this.loadTask(this.task.id);
}
}, { isLoading: true, isSuccessPrompt: false })
}).catch(() => {
});
},
indexFuncs (index) {
return index + 1;
},
访问项目提示访问未授权：
F12 network查看请求链接
https://vsp-integration.reachstar.com/vspcloud-vsptrunk-portal/portal/basicInformationEquipment/deviceType/list/
https://vsp-integration.reachstar.com/vspcloud-vsptrunk-portal/portal/basicInformationEquipment/deviceModel/list/
https://vspclouduserservice.oss-cn-shanghai.aliyuncs.com/9e56a72c0ed74b63a8936c95520f3e9f_128_128.jpg?Expires=1905730035&OSSAccessKeyId=LTAIa2hLUo17VOvY&Signature=5UT%2B%2BtAdZb4blCSueqWCkRME4fc%3D
绑定车辆样式调整：
float: right;
font-size: 12px;
margin-top: 3px;
height: 28px!important;
padding: 0 10px!important;
border-color: #e41628!important;
color: #e41628!important;
background-color: #fce5e8!important;
<template>
<div v-loading="mainLoading">
<el-form class="query_form" label-width="60px" :inline="true" :model="formData">
<el-form-item label="">
<el-select v-model="formData.brandName" @change="getCarModel()" placeholder="请选择品牌名称">
<el-option
v-for="item in brandNames"
:key="item.id"
:label="item.brandName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="">
<el-select v-model="formData.carModel" @change="getDerive()" placeholder="请选择车辆型号">
<el-option
v-for="item in carModels"
:key="item.modelCode"
:label="item.modelName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="">
<el-select v-model="formData.derive" placeholder="请选择派生">
<el-option
v-for="item in derives"
:key="item.modelCode"
:label="item.modelName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">查询</el-button>
<el-button type="info" @click="reset">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="12">
<el-col :span="8">
<el-card class="box-card" >
<div slot="header" class="clearfix">
<span>车辆品牌</span>
<el-button style="float: right; padding: 3px 0;padding-right: 10px;" type="text" @click="delCarBrand">删除</el-button>
<el-button style="float: right; padding: 3px 0;padding-right: 10px;" type="text" @click="updateCarBrandModelControl">编辑</el-button>
<el-button style="float: right; padding: 3px 0;" type="text" @click="addDeviceTypeControl" >添加</el-button>
</div>
<div>
<el-table
:data="brandTableData"
ref="singleTable"
highlight-current-row
@row-click="handleCurrentChangeBrand"
border
style="width: 100%;">
<el-table-column
type="index"
label="序号"
width="52">
</el-table-column>
<el-table-column
prop="brandCode"
label="品牌编码"
sortable>
</el-table-column>
<el-table-column
prop="brandName"
sortable
label="品牌名称">
</el-table-column>
</el-table>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box-card" >
<div slot="header" class="clearfix">
<span>车辆型号</span>
<el-button style="float: right; padding: 3px 0;padding-right: 10px;" type="text" @click="delDeviceModel">删除</el-button>
<el-button style="float: right; padding: 3px 0;padding-right: 10px;" type="text" @click="updateDeviceModelControl">编辑</el-button>
<el-button style="float: right; padding: 3px 0;" type="text" @click="addDeviceModelControl">添加</el-button>
</div>
<div>
<el-table
:data="vehicleModelTableData"
highlight-current-row
@row-click="handleCurrentChangeModel"
border
style="width: 100%;">
<el-table-column
type="index"
label="序号"
width="52">
</el-table-column>
<el-table-column
prop="modelCode"
label="车辆编码"
sortable>
</el-table-column>
<el-table-column
prop="modelName"
sortable
label="车辆型号">
</el-table-column>
</el-table>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box-card" >
<div slot="header" class="clearfix">
<span>派生</span>
<el-button style="float: right; padding: 3px 0;padding-right: 10px;" type="text" @click="delDeriveModel">删除</el-button>
<el-button style="float: right; padding: 3px 0;padding-right: 10px;" type="text" @click="updateDeriveInfo">编辑</el-button>
<el-button style="float: right; padding: 3px 0;" type="text" @click="addDeriveInfo">添加</el-button>
</div>
<div>
<el-table
:data="deriveTableData"
highlight-current-row
@row-click="handleCurrentDerive"
border
style="width: 100%;">
<el-table-column
type="index"
label="序号"
width="52">
</el-table-column>
<el-table-column
prop="modelCode"
label="派生编码"
sortable>
</el-table-column>
<el-table-column
prop="modelName"
sortable
label="派生">
</el-table-column>
</el-table>
</div>
</el-card>
</el-col>
</el-row>
<el-dialog class="infor_dialog" title="编辑车辆品牌" :visible.sync="carBrandModelUpdateFormVisible" :before-close="closeDioUpdateDeviceType">
<el-form :model="updateCarBrandModel" :rules="rules" ref="carBrandModelUpdateForm" label-width="151px" class="demo-ruleForm login-container">
<el-form-item label="品牌编码:" prop="code">
<el-input v-model="updateCarBrandModel.code" placeholder="请输入品牌编码" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="品牌名称:" prop="name">
<el-input v-model="updateCarBrandModel.name" placeholder="请输入品牌名称" maxlength="32"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" :loading="createLoading" @click="updateCarBrandModelSubmit">保 存</el-button>
<el-button @click="closeDioUpdateDeviceType()">取 消</el-button>
</div>
</el-dialog>
<el-dialog class="infor_dialog" title="添加车辆品牌" :visible.sync="addCarBrandModelFormVisible" :before-close="closeDioAddDeviceType">
<el-form :model="addCarBrandModel" :rules="rules" ref="addCarBrandModelForm" label-width="151px" class="demo-ruleForm login-container">
<el-form-item label="品牌编码:" prop="code">
<el-input v-model="addCarBrandModel.code" placeholder="请输入品牌编号" @blur="blueText($event)" maxlength="20"></el-input>
</el-form-item>
<el-form-item label="品牌名称:" prop="name">
<el-input v-model="addCarBrandModel.name" placeholder="请输入品牌名称" maxlength="32"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" :loading="createLoading" @click="addCarBrand">保 存</el-button>
<el-button @click="closeDioAddDeviceType()">取 消</el-button>
</div>
</el-dialog>
<el-dialog class="infor_dialog" title="添加车辆型号" :visible.sync="addCarModelAddFormVisible" :before-close="closeDioAddDeviceModel">
<el-form :model="addCarModel" :rules="rules" ref="carModelAddForm" label-width="151px" class="demo-ruleForm login-container">
<el-form-item label="品牌名称:" prop="deviceType">
<el-select v-model="addCarModel.brandName" placeholder="请选择品牌名称">
<el-option
v-for="item in brandNames"
:key="item.id"
:label="item.brandName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="设备车型编码:" prop="code">
<el-input v-model="addCarModel.code" placeholder="请选输入设备车型编码" @blur="blueText($event)" maxlength="20"></el-input>
</el-form-item>
<el-form-item label="车辆型号:" prop="name">
<el-input v-model="addCarModel.name" placeholder="请选输入车辆型号" maxlength="32"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" :loading="createLoading" @click="addDeviceModelSubmit">保 存</el-button>
<el-button @click="closeDioAddDeviceModel()">取 消</el-button>
</div>
</el-dialog>
<el-dialog class="infor_dialog" title="编辑车辆型号" :visible.sync="carModelUpdateFormVisible" :before-close="closeDioUpdateDeviceModel">
<el-form :model="updateCarModel" :rules="rules" ref="deviceModelUpdateForm" label-width="151px" class="demo-ruleForm login-container">
<el-form-item label="设备类型:" prop="deviceType">
<el-select v-model="updateCarModel.brandName" placeholder="请选择品牌名称">
<el-option
v-for="item in brandNames"
:key="item.id"
:label="item.brandName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="设备型号编码:" prop="code">
<el-input v-model="updateCarModel.code" placeholder="请选输入设备型号编码" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="设备型号:" prop="name">
<el-input v-model="updateCarModel.name" placeholder="请选输入设备型号" maxlength="32"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" :loading="createLoading" @click="updateDeviceModelSubmit">保 存</el-button>
<el-button @click="closeDioUpdateDeviceModel()">取 消</el-button>
</div>
</el-dialog>
<!--派生-->
<el-dialog class="infor_dialog" title="添加派生" :visible.sync="addDeriveAddFormVisible" :before-close="closeDioAddDeriveModel">
<el-form :model="addDerive" :rules="rules" ref="carModelAddForm" label-width="151px" class="demo-ruleForm login-container">
<el-form-item label="品牌名称:" prop="deviceType">
<el-select v-model="addDerive.brandName" @change="getCarModelForAddDerive()" placeholder="请选择品牌名称">
<el-option
v-for="item in brandNames"
:key="item.id"
:label="item.brandName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="车辆型号:" prop="deviceType">
<el-select v-model="addDerive.carModel" placeholder="请选择车辆型号">
<el-option
v-for="item in carModels"
:key="item.id"
:label="item.modelName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="派生编码:" prop="code">
<el-input v-model="addDerive.code" placeholder="请选输入派生编码" @blur="blueText($event)" maxlength="20"></el-input>
</el-form-item>
<el-form-item label="派生车型:" prop="name">
<el-input v-model="addDerive.name" placeholder="请选输入派生车型" maxlength="32"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" :loading="createLoading" @click="addDeriveSubmit">保 存</el-button>
<el-button @click="closeDioAddDeriveModel()">取 消</el-button>
</div>
</el-dialog>
<el-dialog class="infor_dialog" title="编辑派生" :visible.sync="updateDeriveUpdateFormVisible" :before-close="closeDioUpdateDeriveModel">
<el-form :model="updateDerive" :rules="rules" ref="deviceModelUpdateForm" label-width="151px" class="demo-ruleForm login-container">
<el-form-item label="品牌名称:" prop="deviceType">
<el-select v-model="updateDerive.brandName" @change="getCarModel()" placeholder="请选择品牌名称">
<el-option
v-for="item in brandNames"
:key="item.id"
:label="item.brandName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="车辆型号:" prop="deviceType">
<el-select v-model="updateDerive.carModel" placeholder="请选择车辆型号">
<el-option
v-for="item in carModels"
:key="item.id"
:label="item.modelName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="派生编码:" prop="code">
<el-input v-model="updateDerive.code" placeholder="请选输入派生编码" @blur="blueText($event)" :disabled="true" maxlength="20"></el-input>
</el-form-item>
<el-form-item label="派生车型:" prop="name">
<el-input v-model="updateDerive.name" placeholder="请选输入派生车型" maxlength="32"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" :loading="createLoading" @click="updateDeriveModelSubmit">保 存</el-button>
<el-button @click="closeDioUpdateDeriveModel()">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
const defaultColor = '#409EFF';
import consts from '@/assets/js/const';
import ThemePicker from '~/components/common/ElementThemeSwitch';
export default {
softwareName: 'DynamicElementTheme',
components: {
ThemePicker
},
data() {
return {
// isRouterAlive: true,
typeListSelection: 0,
modeListSelection: 0,
mainLoading: false,
deviceModels: [],
brandNames: [],
carModels: [],
derives: [],
deviceTypes: [],
vehicleTypesUpdate: [],
deviceTypeUpdateFormVisible: false,
deviceTypeAddFormVisible: false,
deviceModelAddFormVisible: false,
carModelUpdateFormVisible: false,
updateDeriveUpdateFormVisible: false,
addDeriveAddFormVisible: false,
addCarBrandModelFormVisible: false,
addCarModelAddFormVisible: false,
carBrandModelUpdateFormVisible: false,
deviceModelUpdateFormVisible: false,
createLoading: false,
formData: {
derive: '',
carModel: '',
brandName: ''
},
addDeviceType: {
id: '',
name: '',
code: ''
},
addCarBrandModel: {
id: '',
name: '',
code: ''
},
updateCarBrandModel: {
id: '',
name: '',
code: ''
},
updateCarModel: {
id: '',
name: '',
code: '',
brandName: ''
},
addDerive: {
id: '',
name: '',
code: '',
carModel: '',
brandName: ''
},
updateDerive: {
id: '',
name: '',
code: '',
carModel: '',
brandName: ''
},
addDeviceModel: {
id: '',
name: '',
code: '',
deviceTypeId: ''
},
updateDeviceType: {
id: '',
name: '',
code: ''
},
updateDeviceModel: {
id: '',
name: '',
code: '',
deviceTypeId: ''
},
addCarModel: {
id: '',
name: '',
code: '',
brandName: ''
},
rowDeviceType: {
id: '',
name: '',
code: ''
},
rowCarBrand: {
id: '',
name: '',
code: ''
},
rowCarModel: {
id: '',
name: '',
code: '',
brandId: ''
},
rowDeriveModel: {
id: '',
name: '',
code: '',
brandId: '',
carModel: ''
},
rowDeviceModel: {
id: '',
name: '',
code: '',
deviceTypeId: ''
},
rules: {
code: [
{ required: true, message: '请输入3-20位字母或数字', trigger: 'blur' },
{ min: 3, max: 20, message: '请输入3-20位字母或数字', trigger: 'blur' }
],
// 任务名称
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 2, max: 32, message: '请输入2-32位个字符', trigger: 'blur' }
]
},
deviceTypeTableData: [],
deviceModelTableData: [],
brandTableData: [],
vehicleModelTableData: [],
deriveTableData: []
}
},
methods: {
blueText(e) {
let boolean = new RegExp("^[A-Za-z0-9]+$").test(e.target.value);
if (!boolean) {
this.addDeviceType.code = "";
}
},
// reload () {
// this.isRouterAlive = false
// this.$nextTick(() => (this.isRouterAlive = true))
// },
closeDioAddDeviceType() {
// this.$refs.deviceTypeAddForm.resetFields();
this.addCarBrandModelFormVisible = false;
},
closeDioUpdateDeviceType() {
// this.$refs.deviceTypeUpdateForm.resetFields();
this.carBrandModelUpdateFormVisible = false;
},
closeDioAddDeviceModel() {
// this.$refs.deviceModelAddForm.resetFields();
this.addCarModelAddFormVisible = false;
},
closeDioAddDeriveModel() {
// this.$refs.deviceModelAddForm.resetFields();
this.addDeriveAddFormVisible = false;
},
closeDioUpdateDeriveModel() {
// this.$refs.deviceModelAddForm.resetFields();
this.updateDeriveUpdateFormVisible = false;
},
closeDioUpdateDeviceModel() {
// this.$refs.deviceModelUpdateForm.resetFields();
this.carModelUpdateFormVisible = false;
},
addDeviceTypeControl(){
this.addCarBrandModel = {};
this.addCarBrandModelFormVisible = true;
},
addDeviceModelControl(){
// 添加车辆型号
if(this.rowCarBrand.id == "" || this.rowCarBrand.id == undefined){
this.rowCarModel = {};
} else {
this.getBrandName();
this.addCarModel.brandName = this.rowCarBrand.id;
}
this.addCarModelAddFormVisible = true;
},
addDeriveInfo(){
this.addDerive.brandName = this.rowCarModel.brandId;
this.formData.derive = '';
let param = { brandId: this.formData.brandName };
this.$get(consts.VSP_API_CONTEXT + '/portal/basicVehicleInformation/queryVehicleModelParent', param, data => {
this.carModels = data.responseBody;
this.mainLoading = false;
}, { isSuccessPrompt: false })
this.addDerive.carModel = this.rowCarModel.id;
this.addDeriveAddFormVisible = true;
},
updateDeviceTypeControl(){
if(this.rowDeviceType.id == "" || this.rowDeviceType.id == undefined){
this.$message({ type: 'error', message: '请选择数据再操作！', showClose: true });
} else {
this.updateDeviceType = this.rowDeviceType;
this.deviceTypeUpdateFormVisible = true;
}
},
updateCarBrandModelControl(){
if( this.rowCarBrand.id == "" || this.rowCarBrand.id == undefined ){
this.$message({ type: 'error', message: '请选择数据再操作！', showClose: true });
} else {
this.updateCarBrandModel.code = this.rowCarBrand.code;
this.updateCarBrandModel.name = this.rowCarBrand.name;
this.updateCarBrandModel.id = this.rowCarBrand.id;
this.carBrandModelUpdateFormVisible = true;
}
},
updateDeviceModelControl(){
// 编辑车辆型号
if(this.rowCarModel.id == "" || this.rowCarModel.id == undefined){
this.$message({ type: 'error', message: '请选择数据再操作！', showClose: true });
} else {
this.updateCarModel.brandName = this.rowCarModel.brandId;
this.updateCarModel.id = this.rowCarModel.id;
this.updateCarModel.code = this.rowCarModel.code;
this.updateCarModel.name = this.rowCarModel.name;
this.carModelUpdateFormVisible = true;
}
},
updateDeriveInfo(){
// 编辑派生
if(this.rowDeriveModel.id == "" || this.rowDeriveModel.id == undefined){
this.$message({ type: 'error', message: '请选择数据再操作！', showClose: true });
} else {
this.updateDerive.id = this.rowDeriveModel.id;
this.updateDerive.brandId = this.rowDeriveModel.brandId;
this.updateDerive.code = this.rowDeriveModel.code;
this.updateDerive.name = this.rowDeriveModel.name;
this.updateDerive.carModel = this.rowDeriveModel.carModel;
this.updateDerive.brandName = this.rowDeriveModel.brandId;
this.formData.derive = '';
let param = { brandId: this.rowDeriveModel.brandId };
this.$get(consts.VSP_API_CONTEXT + '/portal/basicVehicleInformation/queryVehicleModelParent', param, data => {
this.carModels = data.responseBody;
this.mainLoading = false;
}, { isSuccessPrompt: false })
this.updateDerive.carModel = this.rowDeriveModel.carModel;
this.updateDeriveUpdateFormVisible = true;
}
},
delDeviceType(){
if(this.rowDeviceType.id == "" || this.rowDeviceType.id == undefined){
this.$message({ type: 'error', message: '请选择数据再操作！', showClose: true });
} else {
let data = { id: this.rowDeviceType.id };
this.$confirm('删除后将无法恢复，是否确认删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$post( consts.VSP_API_CONTEXT + '/portal/basicInformationEquipment/deviceType/del/', data, (d) => {
if(d.code != '000000'){
this.$message({ type: 'error', message: d.description, showClose: true });
return false;
}else{
this.handleCurrentChange();
this.$message({ type: 'success', message: '删除成功', showClose: true });
}
}, { isSuccessPrompt: false })
}).catch(() => {
})
}
},
delCarBrand(){
if( this.rowCarBrand.id == "" || this.rowCarBrand.id == undefined ){
this.$message({ type: 'error', message: '请选择数据再操作！', showClose: true });
} else {
let data = { id: this.rowCarBrand.id };
this.$confirm('删除后将无法恢复，是否确认删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$delete( consts.VSP_API_CONTEXT + '/portal/basicVehicleInformation/vehicleBrand/' + this.rowCarBrand.id, {}, (d) => {
if(d.code != '000000'){
this.$message({ type: 'error', message: d.description, showClose: true });
return false;
}else{
this.handleCurrentChange();
this.$message({ type: 'success', message: '删除成功', showClose: true });
}
}, { isSuccessPrompt: false })
}).catch(() => {
})
}
},
updateDeviceTypeSubmit(){
let remoteControl = this.updateDeviceType;
this.$refs['deviceTypeUpdateForm'].validate(valid => {
if (valid) {
let data = { id: remoteControl.id, name: remoteControl.name };
this.$post( consts.VSP_API_CONTEXT + '/portal/basicInformationEquipment/deviceType/update/', data, (d) => {
if(d.code != '000000'){
this.$message({ type: 'error', message: d.description, showClose: true });
return false;
}else{
this.deviceTypeUpdateFormVisible = false;
this.handleCurrentChange();
this.getDeviceTypes();
this.$message({ type: 'success', message: '修改成功', showClose: true });
}
}, { isLoading: true, isSuccessPrompt: false })
} else {
console.log('error submit!!');
return false;
}
});
},
updateCarBrandModelSubmit(){
let remoteControl = this.updateCarBrandModel;
this.$refs['carBrandModelUpdateForm'].validate(valid => {
if (valid) {
console.log("remoteControl.id " + remoteControl.id);
console.log("remoteControl.name " + remoteControl.name);
let data = { id: remoteControl.id, brandName: remoteControl.name };
this.$put( consts.VSP_API_CONTEXT + '/portal/basicVehicleInformation/vehicleBrand', data, (d) => {
if(d.code != '000000'){
this.$message({ type: 'error', message: d.description, showClose: true });
return false;
}else{
this.carBrandModelUpdateFormVisible = false;
this.handleCurrentChange();
this.getBrandName();
this.$message({ type: 'success', message: '修改成功', showClose: true });
}
}, { isLoading: true, isSuccessPrompt: false })
} else {
console.log('error submit!!');
return false;
}
});
},
addDeviceTypeSubmit(){
let remoteControl = this.addDeviceType;
this.$refs['deviceTypeAddForm'].validate(valid => {
if (valid) {
let data = { code: remoteControl.code,
name: remoteControl.name
};
this.$post( consts.VSP_API_CONTEXT + '/portal/basicInformationEquipment/deviceType/add/', data, (d) => {
if(d.code != '000000'){
this.$message({ type: 'error', message: d.description, showClose: true });
return false;
}else{
this.deviceTypeAddFormVisible = false;
this.reset();
this.handleCurrentChange();
this.getDeviceTypes();
this.$message({ type: 'success', message: '添加成功', showClose: true });
}
}, { isLoading: true, isSuccessPrompt: false })
} else {
console.log('error submit!!');
return false;
}
});
},
addCarBrand(){
// 添加车辆品牌
let remoteControl = this.addCarBrandModel;
this.$refs['addCarBrandModelForm'].validate(valid => {
if (valid) {
let data = { brandCode: remoteControl.code,
brandName: remoteControl.name
};
this.$post( consts.VSP_API_CONTEXT + '/portal/basicVehicleInformation/vehicleBrand', data, (d) => {
if(d.code != '000000'){
this.$message({ type: 'error', message: d.description, showClose: true });
return false;
}else{
this.addCarBrandModelFormVisible = false;
this.reset();
this.handleCurrentChange();
// this.getDeviceTypes();
this.$message({ type: 'success', message: '添加成功', showClose: true });
}
}, { isLoading: true, isSuccessPrompt: false })
} else {
console.log('error submit!!');
return false;
}
});
this.getBrandName();
this.getCarModel();
this.getDerive();
// this.reload();
},
addDeviceModelSubmit(){
let remoteControl = this.addCarModel;
this.$refs['carModelAddForm'].validate(valid => {
if (valid) {
let data = { modelCode: remoteControl.code,
modelName: remoteControl.name,
brandId: remoteControl.brandName };
this.$post( consts.VSP_API_CONTEXT + '/portal/basicVehicleInformation/vehicleModelParent', data, (d) => {
if(d.code != '000000'){
this.$message({ type: 'error', message: d.description, showClose: true });
return false;
}else{
this.addCarModelAddFormVisible = false;
this.reset();
this.handleCurrentChange();
this.getDeviceTypes();
this.$message({ type: 'success', message: '添加成功', showClose: true });
}
}, { isLoading: true, isSuccessPrompt: false })
} else {
console.log('error submit!!');
return false;
}
});
this.getBrandName();
this.getCarModel();
this.getDerive();
// this.reload();
},
delDeviceModel(){
// 删除车辆型号
if(this.rowCarModel.id == "" || this.rowCarModel.id == undefined){
this.$message({ type: 'error', message: '请选择数据再操作！', showClose: true });
} else {
this.$confirm('删除后将无法恢复，是否确认删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$delete( consts.VSP_API_CONTEXT + '/portal/basicVehicleInformation/vehicleModelParent/' + this.rowCarModel.id, {}, (d) => {
if(d.code != '000000'){
this.$message({ type: 'error', message: d.description, showClose: true });
return false;
}else{
// this.handleCurrentChange();
this.handleCurrentChange();
this.getDeviceTypes();
this.$message({ type: 'success', message: '删除成功', showClose: true });
}
}, { isSuccessPrompt: false })
}).catch(() => {
})
}
},
delDeriveModel(){
// 删除派生
if(this.rowDeriveModel.id == "" || this.rowDeriveModel.id == undefined){
this.$message({ type: 'error', message: '请选择数据再操作！', showClose: true });
} else {
this.$confirm('删除后将无法恢复，是否确认删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$delete( consts.VSP_API_CONTEXT + '/portal/basicVehicleInformation/vehicleModel/' + this.rowDeriveModel.id, {}, (d) => {
if(d.code != '000000'){
this.$message({ type: 'error', message: d.description, showClose: true });
return false;
}else{
// this.handleCurrentChange();
this.handleCurrentChange();
this.getDeviceTypes();
this.$message({ type: 'success', message: '删除成功', showClose: true });
}
}, { isSuccessPrompt: false })
}).catch(() => {
})
}
},
updateDeviceModelSubmit(){
// 更新车辆型号
let remoteControl = this.updateCarModel;
this.$refs['deviceModelUpdateForm'].validate(valid => {
if (valid) {
let data = { modelName: remoteControl.name,
brandId: remoteControl.brandName,
modelCode: remoteControl.code,
id: remoteControl.id };
this.$put( consts.VSP_API_CONTEXT + '/portal/basicVehicleInformation/vehicleModelParent', data, (d) => {
if(d.code != '000000'){
this.$message({ type: 'error', message: d.description, showClose: true });
return false;
}else{
this.carModelUpdateFormVisible = false;
this.handleCurrentChange();
// this.getDeviceTypes();
this.$message({ type: 'success', message: '修改成功', showClose: true });
}
}, { isLoading: true, isSuccessPrompt: false })
} else {
console.log('error submit!!');
return false;
}
});
},
updateDeriveModelSubmit(){
// 更新派生
let remoteControl = this.updateDerive;
this.$refs['deviceModelUpdateForm'].validate(valid => {
if (valid) {
console.log("remoteControl.name" + remoteControl.name);
console.log("remoteControl.carModel" + remoteControl.carModel);
console.log("remoteControl.code" + remoteControl.code);
let data = { vehicleModel: remoteControl.name,
modelParentId: remoteControl.carModel,
modelCode: remoteControl.code,
id: remoteControl.id };
this.$put( consts.VSP_API_CONTEXT + '/portal/basicVehicleInformation/vehicleModel', data, (d) => {
if(d.code != '000000'){
this.$message({ type: 'error', message: d.description, showClose: true });
return false;
}else{
this.updateDeriveUpdateFormVisible = false;
this.handleCurrentChange();
// this.getDeviceTypes();
this.$message({ type: 'success', message: '修改成功', showClose: true });
}
}, { isLoading: true, isSuccessPrompt: false })
} else {
console.log('error submit!!');
return false;
}
});
},
addDeriveSubmit(){
// 添加派生
let remoteControl = this.addDerive;
this.$refs['carModelAddForm'].validate(valid => {
if (valid) {
let data = { vehicleModel: remoteControl.name,
modelParentId: this.addDerive.carModel,
brandId: this.addDerive.brandName,
modelCode: remoteControl.code };
this.$post( consts.VSP_API_CONTEXT + '/portal/basicVehicleInformation/vehicleModel', data, (d) => {
if(d.code != '000000'){
this.$message({ type: 'error', message: d.description, showClose: true });
return false;
}else{
this.addDeriveAddFormVisible = false;
this.handleCurrentChange();
// this.getDeviceTypes();
this.$message({ type: 'success', message: '新增成功', showClose: true });
}
}, { isLoading: true, isSuccessPrompt: false })
} else {
console.log('error submit!!');
return false;
}
});
},
reset(){
this.formData.brandName = '';
this.formData.carModel = '';
this.formData.derive = '';
this.deviceModels = [];
this.addDeviceType = {};
this.addDeviceModel = {};
},
// 获取指定页的数据
handleCurrentChange: function() {
this.rowCarBrand = {};
this.rowCarModel = {};
this.rowDeriveModel = {};
this.addDerive = {};
this.addCarModel = {};
this.addCarBrandModel = {};
this.mainLoading = true;
let brandNameParam = { id: this.formData.brandName };
this.$get(consts.VSP_API_CONTEXT + '/portal/basicVehicleInformation/queryVehicleBrand', brandNameParam, data => {
this.brandTableData = data.responseBody;
this.mainLoading = false;
}, { isSuccessPrompt: false })
let carModelParam = { id: this.formData.carModel, brandId: this.formData.brandName };
console.log("carModelParam is " + this.formData.carModel);
console.log("carModelParam is " + this.formData.brandName);
this.$get(consts.VSP_API_CONTEXT + '/portal/basicVehicleInformation/queryVehicleModelParent', carModelParam, data => {
this.vehicleModelTableData = data.responseBody;
this.mainLoading = false;
}, { isSuccessPrompt: false })
let vehicleModelParam = { brandId: this.formData.brandName, id: this.formData.derive, modelParentId: this.formData.carModel };
this.$get(consts.VSP_API_CONTEXT + '/portal/basicVehicleInformation/queryVehicleModel', vehicleModelParam, data => {
this.deriveTableData = data.responseBody;
this.mainLoading = false;
}, { isSuccessPrompt: false })
},
handleCurrentChangeType: function(val) {
if(this.rowDeviceType.id == val.id){
this.$refs.singleTable.setCurrentRow(val);
this.rowDeviceType = {};
this.handleCurrentChange();
} else {
this.rowDeviceType = val;
let deviceModelData = { deviceTypeId: val.id, id: this.formData.deviceModel };
this.$post( consts.VSP_API_CONTEXT + '/portal/basicInformationEquipment/deviceModel/list/', deviceModelData, (d) => {
this.deviceModelTableData = d.responseBody;
}, { isSuccessPrompt: false })
}
},
handleCurrentChangeModel: function(val) {
// 车辆型号
if(this.rowCarModel.id == val.id){
this.$refs.singleTable.setCurrentRow(val);
this.rowCarModel = {};
this.handleCurrentChange();
} else {
// 车辆型号
this.rowCarModel.id = val.id;
this.rowCarModel.code = val.modelCode;
this.rowCarModel.name = val.modelName;
this.rowCarModel.brandId = val.brandId;
let vehicleModelParam = { brandId: this.rowCarBrand.id, modelParentId: this.rowCarModel.id };
this.$get(consts.VSP_API_CONTEXT + '/portal/basicVehicleInformation/queryVehicleModel', vehicleModelParam, data => {
this.deriveTableData = data.responseBody;
this.mainLoading = false;
}, { isSuccessPrompt: false })
}
},
handleCurrentChangeBrand: function(val) {
// 车辆品牌
if(this.rowCarBrand.id == val.id){
this.$refs.singleTable.setCurrentRow(val);
this.rowCarBrand = {};
this.handleCurrentChange();
} else {
// 车辆品牌
this.rowCarBrand.code = val.brandCode;
this.rowCarBrand.id = val.id;
this.rowCarBrand.name = val.brandName;
let carModelParam = { brandId: this.rowCarBrand.id };
this.$get(consts.VSP_API_CONTEXT + '/portal/basicVehicleInformation/queryVehicleModelParent', carModelParam, data => {
this.vehicleModelTableData = data.responseBody;
this.mainLoading = false;
}, { isSuccessPrompt: false })
let vehicleModelParam = { brandId: this.rowCarBrand.id, modelParentId: this.formData.carModel };
this.$get(consts.VSP_API_CONTEXT + '/portal/basicVehicleInformation/queryVehicleModel', vehicleModelParam, data => {
this.deriveTableData = data.responseBody;
this.mainLoading = false;
}, { isSuccessPrompt: false })
}
},
handleCurrentDerive: function(val) {
// 派生
this.rowDeriveModel.id = val.id;
this.rowDeriveModel.code = val.modelCode;
this.rowDeriveModel.name = val.modelName;
this.rowDeriveModel.brandId = this.rowCarBrand.id;
this.rowDeriveModel.carModel = this.rowCarModel.id;
},
search() {
this.handleCurrentChange();
},
getDeviceModel() {
this.formData.deviceModel = '';
this.deviceModel = '';
let deviceTypeId = this.formData.deviceType;
let data = { deviceTypeId: deviceTypeId };
this.$post( consts.VSP_API_CONTEXT + '/portal/basicInformationEquipment/deviceModel/list/', data, (d) => {
this.$data.deviceModels = d.responseBody;
}, { isSuccessPrompt: false })
},
getDeviceTypes() {
let data = {};
this.$post( consts.VSP_API_CONTEXT + '/portal/basicInformationEquipment/deviceType/list/', data, (d) => {
this.deviceTypes = d.responseBody;
}, { isSuccessPrompt: false })
},
getCarModel() {
// 获取车辆型号下拉列表
this.formData.derive = '';
let param = { brandId: this.formData.brandName };
this.$get(consts.VSP_API_CONTEXT + '/portal/basicVehicleInformation/queryVehicleModelParent', param, data => {
this.carModels = data.responseBody;
this.mainLoading = false;
}, { isSuccessPrompt: false })
},
getCarModelForAddDerive() {
// 获取车辆型号下拉列表
this.formData.derive = '';
let param = { brandId: this.addDerive.brandName };
this.$get(consts.VSP_API_CONTEXT + '/portal/basicVehicleInformation/queryVehicleModelParent', param, data => {
this.carModels = data.responseBody;
this.mainLoading = false;
}, { isSuccessPrompt: false })
},
getDerive() {
// 获取派生下拉列表
let param = { modelParentId: this.formData.carModel };
this.$get(consts.VSP_API_CONTEXT + '/portal/basicVehicleInformation/queryVehicleModel', param, data => {
this.derives = data.responseBody;
this.mainLoading = false;
}, { isSuccessPrompt: false })
},
getBrandName() {
// 获取车辆品牌下拉列表
this.$get(consts.VSP_API_CONTEXT + '/portal/basicVehicleInformation/queryVehicleBrand', {}, data => {
console.log(data);
this.brandNames = data.responseBody;
});
},
// 将换行设置为标签
conversionLineFeed(description) {
if(description == null || description == ''){
return '';
}else{
return description.replace(/[\r\n]/g, '<br />');
}
}
},
// 页面加载就执行
created() {
// 初始化数据
this.handleCurrentChange();
this.getBrandName();
},
// 页面加载完成后执行
mounted() {
// this.search();
}
}
</script>
<style>
/* 用来设置当前页面element全局table的内间距 */
.el-table__row td{
padding: 0;
}
/* 用来设置当前页面element全局table 选中某行时的背景色*/
.el-table__body tr.current-row>td{
background-color: #FEF7F8 !important;
/* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
}
/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
.el-table--enable-row-hover .el-table__body tr:hover>td {
background-color: #FEF7F8;
/* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
}
</style>
<style>
.active input {
border: 1px solid #f00 !important;
}
</style>
<style lang="scss" scoped>
.note_image {
width: 1.4em;
height: 1.4em;
vertical-align: text-top;
}
/*.el-card /deep/ {
margin: 30px 0;
.el-card__header{
padding: 16px 20px;
span{
color: #cc0f10;
}
}
.el-card__body{
display: none;
}
}*/
.el-dialog__wrapper /deep/ .el-dialog {
.el-dialog__body{
text-align: center;
height: auto;
}
.el-dialog__footer{
text-align: center;
}
.el-color-picker{
.el-color-picker__color{
border: none;
}
}
}
.el-breadcrumb /deep/ {
margin-bottom: 25px;
*{
font-size: 12px;
}
}
.el-table /deep/ {
margin-top: 20px;
.el-table__body tr:nth-child(2n) td{
background: #fafafa;
}
td, th{
padding: 0;
height: 40px;
min-width: 0;
text-overflow: ellipsis;
vertical-align: middle;
}
}
/*卡片*/
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 95%;
}
</style>
<template>
<div v-loading="mainLoading">
<el-form class="query_form" label-width="86px" :inline="true" :model="formData">
<el-form-item>
<el-input v-model="formData.name" placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item>
<el-select v-model="userRoleSelect" clearable placeholder="请选择用户类型">
<el-option
v-for="item in userRoles"
:key="item.id"
:label="item.roleName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">查询</el-button>
<el-button type="info" @click="reset">重置</el-button>
</el-form-item>
</el-form>
<div>
</div>
<el-table
border
class="list-table"
:data="tableData"
@selection-change="handleSelectionChange">
ref="checkTable"
:default-sort = "{prop: 'failureDate', order: 'failureDate'}"
>
<el-table-column
type="index"
:index="indexFuncs"
label="序号"
width="52">
</el-table-column>
<el-table-column prop="headUrl" label="用户头像" >
<!-- 图片的显示 -->
<template slot-scope="scope">
<div>
<img :src="scope.row.headUrl" style="height: 40px;border-radius: 50%"/>
</div>
<!-- <el-image-->
<!-- style="width: 128px; height: 128px; border-radius: 50%;"-->
<!-- :src="scope.row.headUrl"-->
<!-- :fit="fits">-->
<!-- </el-image>-->
</template>
</el-table-column>
<el-table-column
prop="phoneNum"
sortable
label="手机号">
</el-table-column>
<el-table-column
prop="nickName"
label="昵称">
</el-table-column>
<el-table-column width="100" label="用户类型" align="center" >
<template slot-scope="scope">
<span v-if="scope.row.userType==0" class="">非车主</span>
<span v-if="scope.row.userType==1" class="">车主</span>
</template>
</el-table-column>
<el-table-column
prop="updateTime"
sortable
label="更新时间">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="120">
<template slot-scope="scope">
<div>
<el-button type="text" size="small" @click="createTask(scope.row)" >
详情
</el-button>
</div>
</template>
</el-table-column>
</el-table>
<div class="text_r" style="margin-top: 15px;">
<el-pagination
popper-class="el-pagination--small"
:current-page="pageNum"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="pageSizes"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
const defaultColor = '#409EFF';
import consts from '@/assets/js/const';
import { Session } from '@/assets/js/public';
import ThemePicker from '~/components/common/ElementThemeSwitch';
export default {
softwareName: 'DynamicElementTheme',
components: {
ThemePicker
},
data() {
var pwdInput = (rule, value, callback) => {
if (!this.checkPwd(value)) {
callback(new Error('密码须为8-20位字母、数字、中横线或下划线组合'));
} else {
callback();
}
};
var phoneInput = (rule, value, callback) => {
if (!this.checkPhone(value)) {
callback(new Error('手机号码不合法'));
} else {
callback();
}
};
var emailInput = (rule, value, callback) => {
if (!this.checkEmail(value)) {
callback(new Error('邮箱不合法'));
} else {
callback();
}
};
var rolesSelect = (rule, value, callback) => {
let roleIds = this.update.userRoles;
if (!roleIds || roleIds.length == 0) {
callback(new Error('请选择角色'));
} else {
callback();
}
};
var userAddRolesSelect = (rule, value, callback) => {
let roleIds = this.add.userRole1;
if (!roleIds || roleIds.length == 0) {
callback(new Error('请选择角色'));
} else {
callback();
}
};
return {
fits: "contain",
mainLoading: false,
defaultRole: [{ 'id': '', 'name': '请选择角色' }],
selectRole: [{ 'id': '', 'name': '请选择角色' }],
pwdMsg: '',
userId: JSON.parse(Session.get('uInfo')).id,
pageNum: 1,
roleId: '',
pwdActive: false,
phoneActive: false,
phoneActive1: false,
nameActive: false,
nameActive1: false,
roleSelect: false,
roleSelect1: false,
selectIds: [],
userRoleSelect: '',
userRoles: [],
userRoleId: '',
userRole1: [],
value2: [],
total: 0,
pageSize: consts.DEFAULT_PAGE_SIZE,
pageSizes: consts.PAGE_SIZES,
color: defaultColor,
color2: defaultColor,
dialogVisible: false,
dialogFormVisible: false,
dialogEditFormVisible: false,
dialogAddFormVisible: false,
createLoading: false,
formData: {
name: '',
userRoleSelect: '',
phone: ''
},
add: {
id: '',
userName: '',
pwd: '',
loginName: '',
dept: '',
mobile: '',
email: '',
userRole1: []
},
update: {
id: '',
userName: '',
loginName: '',
dept: '',
mobile: '',
email: '',
userRoles: []
},
tableData: [],
rules: {
mobile: [
{
required: true,
message: '请输入手机号',
trigger: 'blur'
},
{ validator: phoneInput, trigger: 'blur' }
],
email: [
{
required: true,
message: '请输入邮箱',
trigger: 'blur'
},
{
type: 'string',
min: 1,
max: 64,
message: '邮箱不符合字数限制',
trigger: 'blur'
},
{ validator: emailInput, trigger: 'blur' }
],
loginName: [
{
required: true,
message: '请输入用户名称',
trigger: 'blur'
},
{
type: 'string',
min: 4,
max: 20,
message: '用户名不符合字数限制',
trigger: 'blur'
}
],
pwd: [
{
required: true,
message: '请输入密码',
trigger: 'blur'
},
{
type: 'string',
min: 8,
max: 20,
message: '密码须为8-20位字母、数字、中横线或下划线组合',
trigger: 'blur'
},
{ validator: pwdInput, trigger: 'blur' }
],
userName: [
{
required: true,
message: '请输入姓名',
trigger: 'blur'
},
{
type: 'string',
min: 2,
max: 20,
message: '姓名不符合字数限制',
trigger: 'blur'
}
],
userRole: [
{ validator: rolesSelect, trigger: 'blur' }
],
userRole1: [
{ validator: userAddRolesSelect, trigger: 'blur' }
],
dept: [
{
type: 'string',
max: 20,
message: '部门不符合字数限制',
trigger: 'blur'
}
]
}
}
},
methods: {
checkPhone(str) {
let myreg = /^1[3456789]\d{9}$/;
if (!myreg.test(str)){
return false;
}
return true;
},
checkEmail(str) {
let myreg = /^[\\.a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
if (!myreg.test(str)){
return false;
}
return true;
},
replaceString(str){
if(str != '' && str != null){
return str.replace(/[_-]/g, '');
}else{
return str;
}
},
// 密码规则校验
checkPwd(pwd){
var pwdReg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{1,23}$/;
if(pwd.length != 0){
if(pwd.indexOf('-') != -1 || pwd.indexOf('_') != -1){
if(!pwdReg.test(this.replaceString(pwd))){
return false;
}else{
return true;
}
}else{
return false;
}
}else{
return true;
}
},
closeDioAdd() {
this.$refs.add.resetFields();
this.dialogAddFormVisible = false;
},
closeDioUpdate() {
this.$refs.update.resetFields();
this.dialogEditFormVisible = false;
},
// 表格选中时,把当前选中的id存在一个数组(存起来的值要保证唯一性,后面才好比较)
handleSelectionChange (val) {
this.selectIds = val.map(item => {
return item.id
})
},
// 处理表格数据,未还款的默认不能勾选
// 有两个参数返回,表格的每一行对象和当前索引
handleDisable(row, index) {
// 函数需要一个返回值,true为可选,false为不可选择
if (row.loginName === 'admin') {
return false
}
return true
},
resetPwd(){
if(this.selectIds.length == 0){
this.$message.error('请至少选择一项')
}else{
this.$confirm('密码重置会将该用户的密码更改为【user_xxxxxx】(其中“xxxxxx”为手机号后六位)，请确认是否继续？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// ajax调用实例
let data = { ids: this.selectIds.join(',')
};
this.$post( consts.VSP_API_CONTEXT + '/portal/user/resetPassword/', data, (d) => {
this.search();
this.$message({ type: 'success', message: '重置成功', showClose: true });
}, { isSuccessPrompt: false })
}).catch(() => {
})
}
},
setCurrent(row){
this.$data.nameActive1 = false;
this.update = Object.assign({}, this.update, row);
this.editRole(this.update.id);
this.roleSelect1 = false;
this.$post( consts.VSP_API_CONTEXT + '/portal/user/query/' + this.update.id, (d) => {
this.update.userRoles = [];
let roles = d.responseBody.roleId;
for (let index = 0; index < roles.length; index++) {
const element = roles[index];
this.update.userRoles.push(element);
}
}, { isSuccessPrompt: false })
if(this.update.loginName == 'admin'){
this.$message.error('系统超级管理员无法被编辑/删除/重置密码')
}else{
this.dialogEditFormVisible = true;
}
},
addPage(){
this.addRole();
this.$data.add = {};
this.$data.userRole1 = null;
this.$data.roleSelect = false;
this.$data.nameActive = false;
this.dialogAddFormVisible = true;
},
del(row){
this.update = Object.assign({}, row);
let data = { id: this.update.id };
if(this.update.loginName == 'admin'){
this.$message.error('系统超级管理员无法被编辑/删除/重置密码')
}else if(JSON.parse(Session.get('uInfo')).id == this.update.id){
this.$message.error('您没有此项操作权限')
}else{
this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$post( consts.VSP_API_CONTEXT + '/portal/user/del/' + this.update.id, data, (d) => {
this.handleCurrentChange(this.pageNum);
this.$message({ type: 'success', message: '删除成功', showClose: true });
}, { isSuccessPrompt: false })
}).catch(() => {
})
}
},
updateUser(){
this.$data.nameActive1 = false;
let user = this.update;
let { mobile } = user;
this.$refs['update'].validate(valid => {
if (valid) {
// ajax调用实例
let data = { id: user.id,
userName: user.userName,
loginName: user.loginName,
mobile: user.mobile,
email: user.email,
userRole: user.userRoles,
dept: user.dept
};
this.$post( consts.VSP_API_CONTEXT + '/portal/user/update/', data, (d) => {
if(d.code != '000000'){
// this.$data.nameActive1 = true;
this.$message.error(d.description);
return false;
}else{
this.dialogEditFormVisible = false;
this.handleCurrentChange(this.pageNum);
this.$message({ type: 'success', message: '修改成功', showClose: true });
}
}, { isLoading: true, isSuccessPrompt: false })
} else {
console.log('error submit!!');
return false;
}
});
},
addUser(){
this.$data.nameActive = false;
this.$data.roleSelect = false;
let user = this.add;
let { mobile } = user;
this.$refs['add'].validate(valid => {
if (valid) {
if(user.pwd == user.loginName){
this.$message.error('密码请勿与用户名一致')
return false;
}
let data = { userName: user.userName,
password: user.pwd,
loginName: user.loginName,
mobile: user.mobile,
email: user.email,
userRole: user.userRole1,
dept: user.dept
};
this.$post( consts.VSP_API_CONTEXT + '/portal/user/add/', data, (d) => {
if(d.code != '000000'){
// this.$data.nameActive = true;
this.$message.error(d.description);
return false;
}else{
this.dialogAddFormVisible = false;
this.$message({ type: 'success', message: '添加成功', showClose: true });
this.handleCurrentChange(this.pageNum);
}
}, { isLoading: true, isSuccessPrompt: false })
} else {
console.log('error submit!!');
return false;
}
});
},
reset(){
this.formData.name = '';
this.userRoleSelect = '';
// this.formData.phone = '';
},
// 每页条数切换
handleSizeChange: function(pageSize) {
this.pageSize = pageSize;
this.$data.pageNum = 1;
this.handleCurrentChange(this.pageNum);
},
// 获取指定页的数据
handleCurrentChange: function(currentPage) {
this.mainLoading = true;
let data = { loginName: this.formData.name,
userType: this.userRoleSelect,
phoneNum: this.formData.name,
pageNum: currentPage,
pageSize: this.pageSize
};
this.$post( consts.VSP_API_CONTEXT + '/portal/appusermanager/list/', data, (d) => {
this.$data.pageNum = currentPage;
this.$data.tableData = d.responseBody.records;
this.$data.total = d.responseBody.total;
this.mainLoading = false;
if (this.tableData.length == 0 && this.pageNum <= 1) {
this.emptyText = '暂无数据';
} else if (this.tableData.length == 0) {
// 需要跳转到第{currentPage - 1}页
this.pageNum = this.pageNum - 1;
this.handleCurrentChange(this.pageNum);
}
}, { isSuccessPrompt: false })
},
// 查询第一页
search() {
this.$data.pageNum = 1;
this.handleCurrentChange(this.pageNum);
},
// 创建任务按钮
createTask (row) {
this.$router.push({ path: '/vsp/userCenter/detail', query: { taskId: row.id, userType: row.userType } });
},
query() {
let data = { id: '' };
this.$post( consts.VSP_API_CONTEXT + '/portal/appusermanager/all/', data, (d) => {
this.$data.userRoles = d.responseBody;
}, { isSuccessPrompt: false })
},
// addRole() {
// let data = { id: '' };
// this.$post( consts.VSP_API_CONTEXT + '/portal/role/all/', data, (d) => {
// this.$data.userRoles1 = d.responseBody;
// }, { isSuccessPrompt: false })
// },
// editRole(userId) {
// let data = { id: userId };
// this.$post( consts.VSP_API_CONTEXT + '/portal/role/all/', data, (d) => {
// this.$data.userRoles2 = d.responseBody;
// }, { isSuccessPrompt: false })
// },
handleReset() {
this.color = defaultColor;
},
animateWidth(name, type) {
if (name == 'pwd') {
this.pwdActive = false;
}
if(name == 'edit'){
this.nameActive1 = false;
}
if(name == 'add'){
this.nameActive = false;
}
},
indexFuncs (index) {
return (this.pageNum - 1) * this.pageSize + index + 1;
}
},
// 页面加载就执行
created() {
// 初始化数据
this.handleCurrentChange(this.pageNum);
},
// 页面加载完成后执行
mounted() {
this.query();
}
}
</script>
<style>
.el-dialog__body{
overflow-y: scroll;
border-top: 1px solid #000;
}
.active input {
border: 1px solid #f00 !important;
}
.active1 input {
border: 1px solid #f00 !important;
}
</style>
<style lang="scss" scoped>
.el-button.is-disabled {
color: #C0C4CC;
}
.el-dialog__body{
height: 269px !important;
}
.el-card /deep/ {
margin: 30px 0;
.el-card__header{
padding: 16px 20px;
span{
color: #fff;
}
}
.el-card__body{
display: none;
}
}
.el-dialog__wrapper /deep/ .el-dialog {
.el-dialog__body{
text-align: center;
height: auto;
}
.el-color-picker{
.el-color-picker__color{
border: none;
}
}
height: auto;
}
.el-breadcrumb /deep/ {
margin-bottom: 25px;
*{
font-size: 12px;
}
}
.el-table /deep/ {
margin-top: 20px;
.el-table__body tr:nth-child(2n) td{
background: #fafafa;
}
td, th{
padding: 0;
height: 40px;
min-width: 0;
text-overflow: ellipsis;
vertical-align: middle;
}
}
element.style {
width: 150px;
height: 128px;
}
</style>
<template>
<div class="data-ota-task-detail">
<h3>基本信息</h3>
<!-- 显示任务基本信息 -->
<table class="taskInfoTable">
<tr>
<td style="width: 25%">用户头像：
<!-- <template slot-scope="scope">-->
<!-- <img :src="scope.row.headUrl" style="max-width:200px;_width:200px"/>-->
<!-- </template>-->
<!-- <img :src="this.task.headUrl" style="max-width:200px;_width:200px"/>-->
<el-image
style="width: 128px; height: 128px; border-radius: 50%;"
:src="task.headUrl"
:fit="fits">
</el-image>
</td>
</tr>
<tr>
<td>手机号：{{this.task.phoneNum}}</td>
</tr>
<tr>
<td>昵称：{{this.task.nickName}}</td>
</tr>
<tr>
<td>用户类型：
<span v-if="this.task.userType==0" class="">非车主</span>
<span v-if="this.task.userType==1" class="">车主</span>
</td>
</tr>
</table>
<h3>车辆信息
<!-- <el-button class="chgStatusBtn" @click="copy">-->
<!-- 绑定车辆-->
<!-- </el-button>-->
<el-button type="primary" size="medium" ref="bindCars2" id="bindCars2" @click="setCurrent()" style="float: right;
font-size: 12px;
margin-top: 3px;
height: 28px!important;
padding: 0 10px!important;
border-color: #e41628!important;
color: #e41628!important;
background-color: #fce5e8!important;">绑定车辆</el-button>
<!-- <el-button type="text" size="small" @click="setCurrent()" >绑定车辆</el-button>-->
</h3>
<br/>
<br/>
<div class="taskDataDiv">
<div class="taskDataTableDiv">
<el-table
border
:data="taskDataStats"
ref="checkTable"
style="width: 100%">
<el-table-column
type="index"
:index="indexFuncs"
label="序号"
width="52">
</el-table-column>
<el-table-column
prop="vinCode"
label="VIN">
</el-table-column>
<el-table-column
prop="carTypeYear"
label="派生">
</el-table-column>
<el-table-column
prop="bindTime"
label="绑定时间">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="120">
<template slot-scope="scope">
<div>
<el-button type="text" size="small" @click="unbindCar(scope.row)" >
解绑
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
<br/>
</div>
<el-dialog class="infor_dialog" title="绑定车辆" :visible.sync="dialogEditFormVisible" append-to-body center :before-close="closeDioUpdate">
<el-form :model="update" :rules="rules" ref="update" label-width="100px" class="demo-ruleForm login-container">
<el-form-item label="vin：" prop="vin">
<el-input v-model.trim="update.vin" maxlength="20" placeholder="请输入vin"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" :loading="createLoading" @click="saveVin">保 存</el-button>
<el-button @click="closeDioUpdate()">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import exportExcel from '~/components/common/ExportExcel';
import consts from '@/assets/js/const';
import qs from 'querystring';
export default {
name: 'taskDetail',
components: {
exportExcel
},
data () {
return {
fits: "contain",
task: {
'headUrl': '',
'phoneNum': '',
'userType': '',
'nickName': ''
},
taskDataStats: [],
dialogVisible: false,
dialogFormVisible: false,
dialogEditFormVisible: false,
dialogAddFormVisible: false,
createLoading: false,
update: {
id: '',
userName: '',
loginName: '',
vin: '',
mobile: '',
email: '',
userRoles: []
},
rules: {
vin: [
{
required: true,
message: '请输入vin',
trigger: 'blur'
}
]
}
}
},
mounted () {
this.task.id = this.$route.query.taskId;
this.task.userType = this.$route.query.userType;
this.loadTask(this.task.id);
// this.loadTaskTimeAxis();
// this.loadTaskDataStats();
// this.loadTaskDeviceUpdateStatusList();
// this.loadTaskDeviceUpdateStatus(1);
},
methods: {
// 加载任务信息
loadTask (id) {
let data = { id: id
};
this.$post( consts.VSP_API_CONTEXT + '/portal/appusermanager/queryUserInfoDetail/', data, (d) => {
this.$data.task.headUrl = d.responseBody.headUrl;
this.$data.task.phoneNum = d.responseBody.phoneNum;
this.$data.task.nickName = d.responseBody.nickName;
this.$data.task.userType = d.responseBody.userType;
this.$data.taskDataStats = d.responseBody.carInfoLists;
console.log(d);
}, { isSuccessPrompt: false })
},
// 加载任务时间轴
loadTaskTimeAxis () {
this.$post(consts.OTA_API_CONTEXT + '/TaskAdmin/timeAxis/' + this.task.id, {}, data => {
this.taskTimeAxis = data.rspBody;
this.taskTimeAxisCreate = this.taskTimeAxis.createDatetime;
this.taskTimeAxisStart = this.taskTimeAxis.takeEffectDatetime;
this.taskTimeAxisEnd = this.taskTimeAxis.taskEndDatetime;
this.taskTimeAxisActive = this.getTimeAxisActive();
});
},
closeDioUpdate() {
this.$refs.update.resetFields();
this.dialogEditFormVisible = false;
},
// 创建任务按钮
unbindCar(row) {
let data = {
userId: this.task.id,
vinCode: row.vinCode
};
this.$confirm('解绑后，用户将失去对车辆的控制权，请确认是否继续？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$post(consts.VSP_API_CONTEXT + '/portal/appusermanager/carReleaseForPortal/', data, (d) => {
if (d.code != '000000') {
this.$message.error(d.description);
return false;
} else {
this.dialogEditFormVisible = false;
this.$message({ type: 'success', message: '解绑成功', showClose: true });
this.loadTask(this.task.id);
}
}, { isLoading: true, isSuccessPrompt: false })
}).catch(() => {
});
},
indexFuncs (index) {
return index + 1;
},
setCurrent(){
this.dialogEditFormVisible = true;
},
saveVin() {
let data = {
userId: this.task.id,
vinCode: this.update.vin
};
this.$post(consts.VSP_API_CONTEXT + '/portal/appusermanager/carBindForPortal/', data, (d) => {
if (d.code != '000000') {
if(d.code == '300028'){
this.$message.error("VIN不存在，请确认");
return false;
}
if(d.code == '300029'){
this.$message.error("VIN与手机号不匹配，请确认");
return false;
}
if(d.code == '300021'){
this.$message.error("该车辆已存在绑定关系，请确认");
return false;
}
// this.$data.nameActive1 = true;
this.$message.error(d.description);
return false;
} else {
this.dialogEditFormVisible = false;
this.$message({ type: 'success', message: '绑定成功', showClose: true });
this.loadTask(this.task.id);
}
}, { isLoading: true, isSuccessPrompt: false })
},
getTimeAxisActive () {
if (this.taskTimeAxis.taskEndDatetime) {
return 3;
}
if (this.taskTimeAxis.takeEffectDatetime) {
return 2;
}
return 1;
},
// 加载任务统计信息
loadTaskDataStats () {
this.$post(consts.OTA_API_CONTEXT + '/TaskAdmin/taskDataStats/' + this.task.id, {}, data => {
this.taskDataStats = data.rspBody;
});
},
// 加载设备升级状态下拉列表
loadTaskDeviceUpdateStatusList () {
this.$get(consts.OTA_API_CONTEXT + '/common/firmwareUpgradeStatus', {}, data => {
this.updateStatusList = data.rspBody;
});
},
// 获取任务中设备升级状态
loadTaskDeviceUpdateStatus (page) {
this.savedSearchParams.updateStatus = this.searchParams.updateStatus;
this.savedSearchParams.vin = this.searchParams.vin;
this.savedSearchParams.firmwareId = this.searchParams.firmwareId;
this.savedSearchParams.softVersion = this.searchParams.softVersion;
this.loading = true;
this.emptyText = ' ';
this.$post(consts.OTA_API_CONTEXT + '/TaskAdmin/firmwareResults/' + this.task.id, qs.stringify({
updateStatus: this.searchParams.updateStatus,
vin: this.searchParams.vin,
firmwareId: this.searchParams.firmwareId,
softVersion: this.searchParams.softVersion,
pageNo: page,
pageSize: this.pageSize
}), data => {
this.tableData = data.rspBody.taskHisList;
this.totalRecord = data.rspBody.totalNum;
this.loading = false;
if (this.tableData.length == 0) {
this.emptyText = '暂无数据';
}
});
},
// 查询按钮
search () {
this.currentPage = 1;
this.loadTaskDeviceUpdateStatus(this.currentPage);
},
// 重置查询条件
reset () {
this.searchParams.updateStatus = '';
this.searchParams.vin = '';
this.searchParams.firmwareId = '';
this.searchParams.softVersion = '';
},
// 每页数据量变化时调用
handleSizeChange (size) {
this.pageSize = size;
this.currentPage = 1;
this.loadTaskDeviceUpdateStatus(1);
},
getTableData2 () {
this.exportFlag = true;
this.$axios.post(consts.OTA_UPLOAD_DOWNLOAD_CONTEXT + '/TaskAdmin/firmwareResults', qs.stringify({
taskId: this.$route.query.taskId,
updateStatus: this.savedSearchParams.updateStatus,
vin: this.savedSearchParams.vin,
firmwareId: this.savedSearchParams.firmwareId,
softVersion: this.savedSearchParams.softVersion
}), {
responseType: 'blob'
}).then(response => {
var blob = new Blob([response.data]);
var downloadElement = this.$refs.exportLink;
var href = window.URL.createObjectURL(blob); // 创建下载的链接
downloadElement.href = href;
downloadElement.download = 'export-excel.xlsx'; // 下载后文件名
downloadElement.click(); // 点击下载
window.URL.revokeObjectURL(href); // 释放掉blob对象
this.exportFlag = false;
}).catch(e => {
console.log(e);
this.exportFlag = false;
});
},
// 暂停任务
suspend () {
this.$confirm('任务暂停后设备将无法请求该任务，已请求该任务的设备不影响升级。可随时在任务详情恢复任务下发。', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.updateStatusx(this.task.id, 5, {
successPrompt: '暂停任务成功',
failPrompt: '暂停任务失败'
});
}).catch(() => {});
},
// 恢复任务
restart () {
this.updateStatusx(this.task.id, 2, {
successPrompt: '恢复任务成功',
failPrompt: '恢复任务失败'
});
},
// 打开结束任务窗口
openFinishDialog () {
this.dialogVisible = true;
},
// 结束任务
finish () {
this.updateStatusx(this.task.id, 3, {
successPrompt: '结束任务成功',
failPrompt: '结束任务失败'
}, () => {
this.dialogVisible = false;
// 跳转到任务列表页
this.$router.push({ path: '/ota/task/list' });
});
},
// 终止任务
terminate () {
this.updateStatusx(this.task.id, 4, {
successPrompt: '终止任务成功',
failPrompt: '终止任务失败'
}, () => {
this.dialogVisible = false;
// 跳转到任务列表页
this.$router.push({ path: '/ota/task/list' });
});
},
// 修改任务状态通用函数
updateStatusx (taskId, status, msgObj, callback) {
// 调用修改状态接口
this.$post(consts.OTA_API_CONTEXT + '/TaskAdmin/taskStatus/' + taskId, qs.stringify({
status
}), data => {
this.loadTask();
this.loadTaskTimeAxis();
this.loadTaskDataStats();
if (callback) {
callback();
}
}, e => {}, {
isSuccessPrompt: true,
successPrompt: msgObj.successPrompt,
isFailPrompt: true,
failPrompt: msgObj.failPrompt
});
},
// 复用任务
copy () {
// 去创建任务页面
this.$router.push({ path: '/ota/task/create', query: { taskId: this.task.id } });
},
getExportData () {
this.exportTask = [];
// 任务ID, 任务名称, 品牌, 车型, 派生, 设备类型, 源版本,
// 目标版本, 升级范围, 生效方式, 生效时间, 任务创建时间
var t = {
'taskId': this.task.id,
'taskName': this.task.taskName,
'brand': this.task.vehicleBrand.label,
'baseModel': this.task.baseVehicleModel.label,
'model': this.task.vehicleModel.label,
'deviceType': this.task.firmwareType.label,
'sourceVersion': '',
'targetVersion': this.task.targetVersion.label,
'upScope': this.task.upScope.desc,
'effectType': this.task.taskEffectType.desc,
'startTime': this.task.startDatetime,
'createTime': this.task.createDatetime
};
this.exportTask.push(t);
// 源版本是一个数组
var sourceVersionString = this.task.sourceVersions;
// var sourceVersionString = '1，2';
if (sourceVersionString) {
var versions = sourceVersionString.split(/，\s*/);
for (let index = 0; index < versions.length; index++) {
const v = versions[index];
if (index == 0) {
t['sourceVersion'] = v;
this.exportTask = [];
this.exportTask.push(t);
} else {
this.exportTask.push({
'taskId': '',
'taskName': '',
'brand': '',
'baseModel': '',
'model': '',
'deviceType': '',
'sourceVersion': v
});
}
}
}
let that = this;
setTimeout(function() {
that.$refs.exportBtn2.$el.click();
}, 500);
}
}
}
</script>
<style>
.data-ota-task-detail h3 {
height: 34px;
line-height: 34px;
font-size: 15px;
padding: 0 10px;
background: #f1f1f1;
color: #333;
font-weight: 600;
}
.data-ota-task-detail .el-form .el-form-item {
margin-top: 20px;
margin-bottom: 20px;
}
.taskDataDiv {
width: 100%;
text-align: right;
}
.taskDataTableDiv {
width: 100%;
border-radius: 20px;
}
.taskInfoTable, .taskDataTable {
width: 100%;
}
.taskInfoTable td {
padding: 15px 10px;
}
.taskDataTable tr:first-child {
border-bottom: 1px #F0F0F0 solid;
}
.taskDataTable td {
padding: 15px 10px;
}
.taskDataTable td {
text-align: left;
}
.taskInfoTable td.propName, .taskDataTable td.propName {
font-weight: bold;
}
.taskInfoTable td.propName1 {
text-align: right;
padding-right: 80px;
width: 100px;
}
/* .taskDataTable td.propName {
font-size: 16px;
} */
.remark {
float: left;
}
.item2 {
background-color: blue !important;
border-color: blue !important;
border-radius: 8px;
width: 16px;
height: 16px;
padding: 0px;
margin: 0px;
}
.finish-task-dialog .el-dialog__header {
border-bottom: 1px solid #cccccc;
}
.chgStatusBtn {
height: 28px !important;
color: #e41628 !important;
padding: 0 10px !important;
background-color: #fce5e8 !important;
border-color: #e41628 !important;
}
.chgStatusBtn:hover {
height: 28px !important;
color: #ffffff !important;
padding: 0 10px !important;
border-color: #e41628 !important;
background-color: #e41628 !important;
}
.export-task-button {
float: right;
font-size: 12px;
margin-top: 3px;
}
</style>
471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
