Skip to content

W
web-monitor
Commit f1258b20 authored by dupengyu's avatar dupengyu
Browse files
Options

站点 检测设备等修改

parent d7a61660
Hide whitespace changes
Inline Side-by-side
Showing with 222 additions and 1511 deletions
src/utils/websocket.js
View file @ f1258b20
...@@ -20,26 +20,26 @@ export default function socket(handlerOptions) { ...@@ -20,26 +20,26 @@ export default function socket(handlerOptions) {
let heart = heartCheck(websocket) let heart = heartCheck(websocket)
websocket.onerror = function() { websocket.onerror = function () {
console.info("Websocket服务器连接错误") console.info("Websocket服务器连接错误")
} }
//连接成功建立的回调方法 //连接成功建立的回调方法
websocket.onopen = function() { websocket.onopen = function () {
console.info("Websocket连接成功") console.info("Websocket连接成功")
heart.start() heart.start()
onopen && onopen() onopen && onopen()
} }
//接收到消息的回调方法 //接收到消息的回调方法
websocket.onmessage = function(event) { websocket.onmessage = function (event) {
let message = event.data //消息内容 let message = event.data //消息内容
heart.reset() //重置心跳上传时间 heart.reset() //重置心跳上传时间
onmessage && onmessage(message) //消息业务处理 onmessage && onmessage(message) //消息业务处理
} }
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。 //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function() { window.onbeforeunload = function () {
websocket.close() websocket.close()
} }
return websocket return websocket
...@@ -48,27 +48,27 @@ function heartCheck(websocket) { ...@@ -48,27 +48,27 @@ function heartCheck(websocket) {
return { return {
timeout: 15000, timeout: 15000,
timeoutObj: null, timeoutObj: null,
reset: function() { reset: function () {
clearTimeout(this.timeoutObj) clearTimeout(this.timeoutObj)
this.start() this.start()
}, },
start: function() { start: function () {
this.timeoutObj = setInterval(function() { this.timeoutObj = setInterval(function () {
// if(websocket.readyState==1){ // if(websocket.readyState==1){
websocket.send("HeartBeat") websocket.send("HeartBeat")
console.info("Websocket发送心跳：HeartBeat") console.info("Websocket发送心跳：HeartBeat")
// } // }
}, this.timeout) }, this.timeout)
}, },
} }
} }
//消息处理 //消息处理
export function receiveMessage(message) { export function receiveMessage(message) {
// 消息接收后处理逻辑 接口访问 // 消息接收后处理逻辑 接口访问
if (message != '连接成功') { if (message != '连接成功') {
let obj = JSON.parse( JSON.parse(message)) let obj = JSON.parse(JSON.parse(message))
EventBus.$emit('dialogAlarm', obj) EventBus.$emit('dialogAlarm', obj)
EventBus.$emit('autioPlay', obj) EventBus.$emit('autioPlay', obj)
} }
} }
\ No newline at end of file
src/views/setting/add/comp/FSU.vue
View file @ f1258b20
...@@ -54,9 +54,9 @@ ...@@ -54,9 +54,9 @@
> >
<el-option <el-option
v-for="item in backupModeSelect" v-for="item in backupModeSelect"
:key="item.id" :key="item.dictValue"
:label="item.dictValue" :label="item.dictLabel"
:value="item.id" :value="item.dictValue"
></el-option ></el-option
></el-select> ></el-select>
</el-form-item> </el-form-item>
...@@ -64,9 +64,9 @@ ...@@ -64,9 +64,9 @@
<el-select v-model="FSUForm.connectMode" placeholder="请选择通信方式"> <el-select v-model="FSUForm.connectMode" placeholder="请选择通信方式">
<el-option <el-option
v-for="item in connectModeSelect" v-for="item in connectModeSelect"
:key="item.id" :key="item.dictValue"
:label="item.dictValue" :label="item.dictLabel"
:value="item.id" :value="item.dictValue"
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
...@@ -74,9 +74,9 @@ ...@@ -74,9 +74,9 @@
<el-select v-model="FSUForm.equipType" placeholder="请选择设备类型"> <el-select v-model="FSUForm.equipType" placeholder="请选择设备类型">
<el-option <el-option
v-for="item in equipTypeSelect" v-for="item in equipTypeSelect"
:key="item.id" :key="item.dictValue"
:label="item.dictValue" :label="item.dictLabel"
:value="item.id" :value="item.dictValue"
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
...@@ -87,9 +87,9 @@ ...@@ -87,9 +87,9 @@
> >
<el-option <el-option
v-for="item in equipSubTypeSelect" v-for="item in equipSubTypeSelect"
:key="item.id" :key="item.dictValue"
:label="item.dictValue" :label="item.dictLabel"
:value="item.id" :value="item.dictValue"
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
......
src/views/setting/add/comp/autoAdd.vue
View file @ f1258b20
...@@ -43,8 +43,8 @@ ...@@ -43,8 +43,8 @@
placeholder="请输入漏缆紧急告警门限" placeholder="请输入漏缆紧急告警门限"
/> />
</el-form-item> </el-form-item>
<el-form-item label="选择设备" prop="devicePortType"> <el-form-item label="选择漏缆" prop="device">
<el-select v-model="monitorForm.device" placeholder="请选择设备"> <el-select v-model="monitorForm.device" placeholder="请选择漏缆">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
...@@ -53,6 +53,15 @@ ...@@ -53,6 +53,15 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item
label="监测服务器IP地址"
prop="leakyCableImportantAlarmThreshold"
>
<el-input
v-model="monitorForm.serverIp"
placeholder="请输入监测服务器IP地址"
/>
</el-form-item>
<el-form-item label="设备端口类型" prop="devicePortType"> <el-form-item label="设备端口类型" prop="devicePortType">
<el-select v-model="monitorForm.devicePortType" placeholder="请选择"> <el-select v-model="monitorForm.devicePortType" placeholder="请选择">
<el-option <el-option
...@@ -64,129 +73,244 @@ ...@@ -64,129 +73,244 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="设备1上行方向起始位置" label="上行漏缆1起始位置"
prop="uplinkLeakyCable1StartPosition" prop="uplinkLeakyCable1StartPosition"
v-if=" v-if="
(monitorForm.devicePortType == '1' || (monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '2') && monitorForm.devicePortType == '2') &&
monitorForm.device === '1' (monitorForm.device == '0' || monitorForm.device === '1')
" "
> >
<el-input <el-input
v-model="monitorForm.uplinkLeakyCable1StartPosition" v-model="monitorForm.uplinkLeakyCable1StartPosition"
placeholder="请输入设备身份编号" placeholder="请输入"
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="设备1上行方向终止位置" label="上行漏缆1终止位置"
prop="uplinkLeakyCable1EndPosition" prop="uplinkLeakyCable1EndPosition"
v-if=" v-if="
(monitorForm.devicePortType == '1' || (monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '2') && monitorForm.devicePortType == '2') &&
monitorForm.device === '1' (monitorForm.device == '0' || monitorForm.device === '1')
" "
> >
<el-input <el-input
v-model="monitorForm.uplinkLeakyCable1EndPosition" v-model="monitorForm.uplinkLeakyCable1EndPosition"
placeholder="请输入设备身份编号" placeholder="请输入"
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="设备1下行方向起始位置" label="下行漏缆1起始位置"
prop="downlinkLeakyCable1StartPosition" prop="downlinkLeakyCable1StartPosition"
v-if=" v-if="
(monitorForm.devicePortType == '1' || (monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '3') && monitorForm.devicePortType == '3') &&
monitorForm.device === '1' (monitorForm.device == '0' || monitorForm.device === '1')
" "
> >
<el-input <el-input
v-model="monitorForm.downlinkLeakyCable1StartPosition" v-model="monitorForm.downlinkLeakyCable1StartPosition"
placeholder="请输入设备身份编号" placeholder="请输入"
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="设备1下行方向终止位置" label="下行漏缆1终止位置"
prop="downlinkLeakyCable1EndPosition" prop="downlinkLeakyCable1EndPosition"
v-if=" v-if="
(monitorForm.devicePortType == '1' || (monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '3') && monitorForm.devicePortType == '3') &&
monitorForm.device === '1' (monitorForm.device == '0' || monitorForm.device === '1')
" "
> >
<el-input <el-input
v-model="monitorForm.downlinkLeakyCable1EndPosition" v-model="monitorForm.downlinkLeakyCable1EndPosition"
placeholder="请输入设备身份编号" placeholder="请输入"
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="设备2上行方向起始位置" label="上行漏缆2起始位置"
prop="uplinkLeakyCable2StartPosition" prop="uplinkLeakyCable2StartPosition"
v-if=" v-if="
(monitorForm.devicePortType == '1' || (monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '2') && monitorForm.devicePortType == '2') &&
monitorForm.device === '2' (monitorForm.device == '0' || monitorForm.device === '2')
" "
> >
<el-input <el-input
v-model="monitorForm.uplinkLeakyCable2StartPosition" v-model="monitorForm.uplinkLeakyCable2StartPosition"
placeholder="请输入设备身份编号" placeholder="请输入"
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="设备2上行方向终止位置" label="上行漏缆2终止位置"
prop="uplinkLeakyCable2EndPosition" prop="uplinkLeakyCable2EndPosition"
v-if=" v-if="
(monitorForm.devicePortType == '1' || (monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '2') && monitorForm.devicePortType == '2') &&
monitorForm.device === '2' (monitorForm.device == '0' || monitorForm.device === '2')
" "
> >
<el-input <el-input
v-model="monitorForm.uplinkLeakyCable2EndPosition" v-model="monitorForm.uplinkLeakyCable2EndPosition"
placeholder="请输入设备身份编号" placeholder="请输入"
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="设备2下行方向起始位置" label="下行漏缆2起始位置"
prop="downlinkLeakyCable2StartPosition" prop="downlinkLeakyCable2StartPosition"
v-if=" v-if="
(monitorForm.devicePortType == '1' || (monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '3') && monitorForm.devicePortType == '3') &&
monitorForm.device === '2' (monitorForm.device == '0' || monitorForm.device === '2')
" "
> >
<el-input <el-input
v-model="monitorForm.downlinkLeakyCable2StartPosition" v-model="monitorForm.downlinkLeakyCable2StartPosition"
placeholder="请输入设备身份编号" placeholder="请输入"
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="设备2下行方向终止位置" label="下行漏缆2终止位置"
prop="downlinkLeakyCable2EndPosition" prop="downlinkLeakyCable2EndPosition"
v-if=" v-if="
(monitorForm.devicePortType == '1' || (monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '3') && monitorForm.devicePortType == '3') &&
monitorForm.device === '2' (monitorForm.device == '0' || monitorForm.device === '2')
" "
> >
<el-input <el-input
v-model="monitorForm.downlinkLeakyCable2EndPosition" v-model="monitorForm.downlinkLeakyCable2EndPosition"
placeholder="请输入设备身份编号" placeholder="请输入"
/> />
</el-form-item> </el-form-item>
<el-form-item
label="上行漏缆1百米损耗"
prop="uplinkLeakyCable1HundredMeterLoss"
v-if="
(monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '2') &&
(monitorForm.device == '0' || monitorForm.device === '1')
"
>
<el-input
v-model="monitorForm.uplinkLeakyCable1HundredMeterLoss"
placeholder="请输入"
/>
</el-form-item>
<el-form-item
label="下行漏缆1百米损耗"
prop="downlinkLeakyCable1HundredMeterLoss"
v-if="
(monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '3') &&
(monitorForm.device == '0' || monitorForm.device === '1')
"
>
<el-input
v-model="monitorForm.downlinkLeakyCable1HundredMeterLoss"
placeholder="请输入"
/>
</el-form-item>
<el-form-item
label="上行漏缆2百米损耗"
prop="uplinkLeakyCable2HundredMeterLoss"
v-if="
(monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '2') &&
(monitorForm.device == '0' || monitorForm.device === '2')
"
>
<el-input
v-model="monitorForm.uplinkLeakyCable2HundredMeterLoss"
placeholder="请输入"
/>
</el-form-item>
<el-form-item
label="下行漏缆2百米损耗"
prop="downlinkLeakyCable2HundredMeterLoss"
v-if="
(monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '3') &&
(monitorForm.device == '0' || monitorForm.device === '2')
"
>
<el-input
v-model="monitorForm.downlinkLeakyCable2HundredMeterLoss"
placeholder="请输入"
/>
</el-form-item>
<el-form-item
label="上行漏缆1相对传播速度"
prop="uplinkLeakyCable1RelativePropagationSpeed"
v-if="
(monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '2') &&
(monitorForm.device == '0' || monitorForm.device === '1')
"
>
<el-input
v-model="monitorForm.uplinkLeakyCable1RelativePropagationSpeed"
placeholder="请输入"
/>
</el-form-item>
<el-form-item
label="下行漏缆1相对传播速度"
prop="downlinkLeakyCable1RelativePropagationSpeed"
v-if="
(monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '3') &&
(monitorForm.device == '0' || monitorForm.device === '1')
"
>
<el-input
v-model="monitorForm.downlinkLeakyCable1RelativePropagationSpeed"
placeholder="请输入"
/>
</el-form-item>
<el-form-item
label="上行漏缆2相对传播速度"
prop="uplinkLeakyCable2RelativePropagationSpeed"
v-if="
(monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '2') &&
(monitorForm.device == '0' || monitorForm.device === '2')
"
>
<el-input
v-model="monitorForm.uplinkLeakyCable2RelativePropagationSpeed"
placeholder="请输入"
/>
</el-form-item>
<el-form-item
label="下行漏缆2相对传播速度"
prop="downlinkLeakyCable2RelativePropagationSpeed"
v-if="
(monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '3') &&
(monitorForm.device == '0' || monitorForm.device === '2')
"
>
<el-input
v-model="monitorForm.downlinkLeakyCable2RelativePropagationSpeed"
placeholder="请输入"
/>
</el-form-item>
<el-form-item label="设备输出功率" prop="deviceOutputPower"> <el-form-item label="设备输出功率" prop="deviceOutputPower">
<el-input <el-input
v-model="monitorForm.deviceOutputPower" v-model="monitorForm.deviceOutputPower"
placeholder="请输入设备身份编号" placeholder="请输入设备输出功率"
/> />
</el-form-item> </el-form-item>
<el-form-item label="设备的起始频率" prop="deviceStartFrequency"> <el-form-item label="设备的起始频率" prop="deviceStartFrequency">
<el-input <el-input
v-model="monitorForm.deviceStartFrequency" v-model="monitorForm.deviceStartFrequency"
placeholder="请输入设备身份编号" placeholder="请输入设备的起始频率"
/> />
</el-form-item> </el-form-item>
<el-form-item label="设备的终止频率" prop="deviceEndFrequency"> <el-form-item label="设备的终止频率" prop="deviceEndFrequency">
...@@ -208,15 +332,16 @@ export default { ...@@ -208,15 +332,16 @@ export default {
data() { data() {
return { return {
monitorForm: { monitorForm: {
device: "1", device: "0",
devicePortType: "1", devicePortType: "1",
}, },
options: [ options: [
{ value: "1", label: "设备1" }, { value: "0", label: "全部" },
{ value: "2", label: "设备2" }, { value: "1", label: "漏缆1" },
{ value: "2", label: "漏缆2" },
], ],
typeList: [ typeList: [
{ value: "1", label: "上下行" }, // { value: "1", label: "上下行" },
{ value: "2", label: "上行" }, { value: "2", label: "上行" },
{ value: "3", label: "下行" }, { value: "3", label: "下行" },
], ],
...@@ -235,7 +360,8 @@ export default { ...@@ -235,7 +360,8 @@ export default {
}, },
mounted() { mounted() {
this.monitorForm = this.paramsJson; this.monitorForm = this.paramsJson;
console.log(this.paramsJson); // this.monitorForm.device = "0";
// this.monitorForm.devicePortType = "2";
}, },
watch: { watch: {
paramsJson(val) { paramsJson(val) {
......
src/views/setting/add/comp/station.vue
View file @ f1258b20
...@@ -30,14 +30,23 @@ ...@@ -30,14 +30,23 @@
/> />
</el-form-item> </el-form-item>
<el-form-item label="站点所在局：" prop="siteArea"> <el-form-item label="站点所在局：" prop="siteArea">
<el-input <el-select v-model="stationForm.siteArea" value-key="railwayName" @change="handleSiteArea" placeholder="请选择漏缆">
<el-option
v-for="item in options"
:key="item.railwayName"
:label="item.railwayName"
:value="item"
></el-option>
</el-select>
<!-- <el-input
v-model="stationForm.siteArea" v-model="stationForm.siteArea"
placeholder="请输入站点所在局" placeholder="请输入站点所在局"
/> /> -->
</el-form-item> </el-form-item>
<el-form-item label="站点所在段号：" prop="siteSectionCode"> <el-form-item label="站点所在段号：" prop="siteSectionCode">
<el-input <el-input
v-model="stationForm.siteSectionCode" v-model="stationForm.siteSectionCode"
disabled
placeholder="请输入站点所在段号" placeholder="请输入站点所在段号"
/> />
</el-form-item> </el-form-item>
...@@ -77,7 +86,12 @@ ...@@ -77,7 +86,12 @@
</div> </div>
</template> </template>
<script> <script>
import { sitesave, railWaylist, updateSiteConf } from "../../api"; import {
sitesave,
railWaylist,
updateSiteConf,
sysRailwayBureaus,
} from "../../api";
import { successAlert, warningAlert } from "@/utils/alert"; import { successAlert, warningAlert } from "@/utils/alert";
export default { export default {
...@@ -138,12 +152,23 @@ export default { ...@@ -138,12 +152,23 @@ export default {
{ required: true, message: "请输入站点其他信息", trigger: "blur" }, { required: true, message: "请输入站点其他信息", trigger: "blur" },
], ],
}, },
options: [],
}; };
}, },
mounted() { mounted() {
this.getAllWay(); this.getAllWay();
this.handleSysRailwayBureaus();
}, },
methods: { methods: {
handleSiteArea(e){
console.log(e)
this.stationForm.siteArea = e.railwayName;
this.stationForm.siteSectionCode = e.railwayCode;
},
async handleSysRailwayBureaus() {
let res = await sysRailwayBureaus();
this.options = res;
},
// 编辑的确认 // 编辑的确认
confirm() { confirm() {
let params = { let params = {
......
src/views/setting/api.js
View file @ f1258b20
...@@ -53,6 +53,9 @@ const path = { ...@@ -53,6 +53,9 @@ const path = {
waveStatistics: '/device/sampling/waveStatistics', waveStatistics: '/device/sampling/waveStatistics',
distanceStatistics: '/device/sampling/distanceStatistics', distanceStatistics: '/device/sampling/distanceStatistics',
samplingList: '/device/sampling/selectPage', samplingList: '/device/sampling/selectPage',
sysRailwayBureaus: '/api/sysRailwayBureaus/selectAll'
} }
// 铁路线 // 铁路线
export function railWaylist() { export function railWaylist() {
...@@ -75,6 +78,10 @@ export function updateRailWay() { ...@@ -75,6 +78,10 @@ export function updateRailWay() {
} }
//站点 //站点
export function sysRailwayBureaus() {
return request.post(path.sysRailwayBureaus, ...arguments);
}
export function selectForSite() { export function selectForSite() {
return request.post(path.selectForSite, ...arguments); return request.post(path.selectForSite, ...arguments);
} }
......
src/views/system/user2/authRole.vue deleted 100644 → 0
View file @ d7a61660
<template>
<div class="app-container">
<h4 class="form-header h4">基本信息</h4>
<el-form ref="form" :model="form" label-width="80px">
<el-row>
<el-col :span="8" :offset="2">
<el-form-item label="用户昵称" prop="nickName">
<el-input v-model="form.nickName" disabled />
</el-form-item>
</el-col>
<el-col :span="8" :offset="2">
<el-form-item label="登录账号" prop="userName">
<el-input v-model="form.userName" disabled />
</el-form-item>
</el-col>
</el-row>
</el-form>
<h4 class="form-header h4">角色信息</h4>
<el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="table" @selection-change="handleSelectionChange" :data="roles.slice((pageNum-1)*pageSize,pageNum*pageSize)">
<el-table-column label="序号" type="index" align="center">
<template slot-scope="scope">
<span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
<el-table-column label="角色编号" align="center" prop="roleId" />
<el-table-column label="角色名称" align="center" prop="roleName" />
<el-table-column label="权限字符" align="center" prop="roleKey" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
<el-form label-width="100px">
<el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
<el-button type="primary" @click="submitForm()">提交</el-button>
<el-button @click="close()">返回</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { getAuthRole, updateAuthRole } from "@/api/system/user";
export default {
name: "AuthRole",
data() {
return {
// 遮罩层
loading: true,
// 分页信息
total: 0,
pageNum: 1,
pageSize: 10,
// 选中角色编号
roleIds:[],
// 角色信息
roles: [],
// 用户信息
form: {}
};
},
created() {
const userId = this.$route.params && this.$route.params.userId;
if (userId) {
this.loading = true;
getAuthRole(userId).then((response) => {
this.form = response.user;
this.roles = response.roles;
this.total = this.roles.length;
this.$nextTick(() => {
this.roles.forEach((row) => {
if (row.flag) {
this.$refs.table.toggleRowSelection(row);
}
});
});
this.loading = false;
});
}
},
methods: {
/** 单击选中行数据 */
clickRow(row) {
this.$refs.table.toggleRowSelection(row);
},
// 多选框选中数据
handleSelectionChange(selection) {
this.roleIds = selection.map((item) => item.roleId);
},
// 保存选中的数据编号
getRowKey(row) {
return row.roleId;
},
/** 提交按钮 */
submitForm() {
const userId = this.form.userId;
const roleIds = this.roleIds.join(",");
updateAuthRole({ userId: userId, roleIds: roleIds }).then((response) => {
this.$modal.msgSuccess("授权成功");
this.close();
});
},
/** 关闭按钮 */
close() {
const obj = { path: "/system/user" };
this.$tab.closeOpenPage(obj);
},
},
};
</script>
\ No newline at end of file
src/views/system/user2/index.vue deleted 100644 → 0
View file @ d7a61660
<template>
<div class="app-container">
<el-row :gutter="24">
<!--部门数据-->
<!-- <el-col :span="4" :xs="24">
<div class="head-container">
<el-input
v-model="deptName"
placeholder="请输入部门名称"
clearable
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</div>
<div class="head-container">
<el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
node-key="id"
default-expand-all
highlight-current
@node-click="handleNodeClick"
/>
</div>
</el-col> -->
<!--用户数据-->
<el-col :span="24" :xs="24">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="用户名称" prop="userName">
<el-input
v-model="queryParams.userName"
placeholder="请输入用户名称"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-input
v-model="queryParams.phonenumber"
placeholder="请输入手机号码"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="用户状态"
clearable
style="width: 240px"
>
<el-option
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:user:add']"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:user:edit']"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:user:remove']"
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-upload2"
size="mini"
@click="handleImport"
v-hasPermi="['system:user:import']"
>导入</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:user:export']"
>导出</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
:columns="columns"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="userList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="50" align="center" />
<el-table-column
label="用户编号"
align="center"
key="userId"
prop="userId"
v-if="columns[0].visible"
/>
<el-table-column
label="用户名称"
align="center"
key="userName"
prop="userName"
v-if="columns[1].visible"
:show-overflow-tooltip="true"
/>
<el-table-column
label="用户昵称"
align="center"
key="nickName"
prop="nickName"
v-if="columns[2].visible"
:show-overflow-tooltip="true"
/>
<el-table-column
label="部门"
align="center"
key="deptName"
prop="dept.deptName"
v-if="columns[3].visible"
:show-overflow-tooltip="true"
/>
<el-table-column
label="手机号码"
align="center"
key="phonenumber"
prop="phonenumber"
v-if="columns[4].visible"
width="120"
/>
<el-table-column
label="状态"
align="center"
key="status"
v-if="columns[5].visible"
>
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
active-value="0"
inactive-value="1"
@change="handleStatusChange(scope.row)"
></el-switch>
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
v-if="columns[6].visible"
width="160"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
width="160"
class-name="small-padding fixed-width"
>
<template slot-scope="scope" v-if="scope.row.userId !== 1">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:user:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:user:remove']"
>删除</el-button
>
<el-dropdown
size="mini"
@command="(command) => handleCommand(command, scope.row)"
v-hasPermi="['system:user:resetPwd', 'system:user:edit']"
>
<el-button size="mini" type="text" icon="el-icon-d-arrow-right"
>更多</el-button
>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
command="handleResetPwd"
icon="el-icon-key"
v-hasPermi="['system:user:resetPwd']"
>重置密码</el-dropdown-item
>
<el-dropdown-item
command="handleAuthRole"
icon="el-icon-circle-check"
v-hasPermi="['system:user:edit']"
>分配角色</el-dropdown-item
>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-col>
</el-row>
<!-- 添加或修改用户配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="用户昵称" prop="nickName">
<el-input
v-model="form.nickName"
placeholder="请输入用户昵称"
maxlength="30"
/>
</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="归属部门" prop="deptId">
<treeselect
v-model="form.deptId"
:options="deptOptions"
:show-count="true"
placeholder="请选择归属部门"
/>
</el-form-item>
</el-col> -->
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="手机号码" prop="phonenumber">
<el-input
v-model="form.phonenumber"
placeholder="请输入手机号码"
maxlength="11"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input
v-model="form.email"
placeholder="请输入邮箱"
maxlength="50"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
v-if="form.userId == undefined"
label="用户名称"
prop="userName"
>
<el-input
v-model="form.userName"
placeholder="请输入用户名称"
maxlength="30"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
v-if="form.userId == undefined"
label="用户密码"
prop="password"
>
<el-input
v-model="form.password"
placeholder="请输入用户密码"
type="password"
maxlength="20"
show-password
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="用户性别">
<el-select v-model="form.sex" placeholder="请选择性别">
<el-option
v-for="dict in dict.type.sys_user_sex"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}</el-radio
>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="岗位">
<el-select
v-model="form.postIds"
multiple
placeholder="请选择岗位"
>
<el-option
v-for="item in postOptions"
:key="item.postId"
:label="item.postName"
:value="item.postId"
:disabled="item.status == 1"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="角色">
<el-select
v-model="form.roleIds"
multiple
placeholder="请选择角色"
>
<el-option
v-for="item in roleOptions"
:key="item.roleId"
:label="item.roleName"
:value="item.roleId"
:disabled="item.status == 1"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<!-- <el-row>
<el-col :span="24">
<el-form-item label="党组织">
<el-select
v-model="form.orgId"
class="picker-width"
collapse-tags
placeholder="请选择所属党组织"
>
<el-option
v-for="item in organizeList"
:key="item.id"
:label="item.orgName"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row> -->
<el-row>
<el-col :span="24">
<el-form-item label="备注">
<el-input
v-model="form.remark"
type="textarea"
placeholder="请输入内容"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 用户导入对话框 -->
<el-dialog
:title="upload.title"
:visible.sync="upload.open"
width="400px"
append-to-body
>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<!-- <div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport" />
是否更新已经存在的用户数据
</div> -->
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link
type="primary"
:underline="false"
style="font-size: 12px; vertical-align: baseline"
@click="importTemplate"
>下载模板</el-link
>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listUser,
getUser,
delUser,
addUser,
updateUser,
resetUserPwd,
changeUserStatus,
deptTreeSelect,
} from "@/api/system/user";
// import * as API_cmsParty from "@/api/cmsParty";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "User",
dicts: ["sys_normal_disable", "sys_user_sex"],
components: { Treeselect },
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 用户表格数据
userList: null,
// 弹出层标题
title: "",
// 部门树选项
// deptOptions: undefined,
// 是否显示弹出层
open: false,
// 部门名称
deptName: undefined,
// 默认密码
initPassword: undefined,
// 日期范围
dateRange: [],
// 岗位选项
postOptions: [],
// 角色选项
roleOptions: [],
// 表单参数
form: {},
defaultProps: {
children: "children",
label: "label",
},
// 用户导入参数
upload: {
// 是否显示弹出层（用户导入）
open: false,
// 弹出层标题（用户导入）
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/system/user/systemImportData",
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
userName: undefined,
phonenumber: undefined,
status: undefined,
deptId: undefined,
},
// 列信息
columns: [
{ key: 0, label: `用户编号`, visible: true },
{ key: 1, label: `用户名称`, visible: true },
{ key: 2, label: `用户昵称`, visible: true },
{ key: 3, label: `部门`, visible: true },
{ key: 4, label: `手机号码`, visible: true },
{ key: 5, label: `状态`, visible: true },
{ key: 6, label: `创建时间`, visible: true },
],
// 表单校验
rules: {
userName: [
{ required: true, message: "用户名称不能为空", trigger: "blur" },
{
min: 2,
max: 20,
message: "用户名称长度必须介于 2 和 20 之间",
trigger: "blur",
},
],
nickName: [
{ required: true, message: "用户昵称不能为空", trigger: "blur" },
],
password: [
{ required: true, message: "用户密码不能为空", trigger: "blur" },
{
min: 5,
max: 20,
message: "用户密码长度必须介于 5 和 20 之间",
trigger: "blur",
},
],
email: [
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"],
},
],
phonenumber: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
},
};
},
watch: {
// 根据名称筛选部门树
deptName(val) {
this.$refs.tree.filter(val);
},
},
created() {
this.getList();
this.getDeptTree();
this.getConfigKey("sys.user.initPassword").then((response) => {
this.initPassword = response.msg;
});
// this.handleQueryOrganizationList();
},
methods: {
// 获取党组织列表
// handleQueryOrganizationList() {
// this.loading = true;
// API_cmsParty.organizationList({})
// .then((res) => {
// if (res.code == 200) {
// this.organizeList = res.data;
// }
// })
// .finally(() => {
// this.loading = false;
// });
// },
/** 查询用户列表 */
getList() {
this.loading = true;
this.queryParams.userType = "sys_user";
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
(response) => {
this.userList = response.rows;
this.total = response.total;
this.loading = false;
}
);
},
/** 查询部门下拉树结构 */
// getDeptTree() {
// deptTreeSelect().then((response) => {
// this.deptOptions = response.data;
// });
// },
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 节点单击事件
handleNodeClick(data) {
this.queryParams.deptId = data.id;
this.handleQuery();
},
// 用户状态修改
handleStatusChange(row) {
let text = row.status === "0" ? "启用" : "停用";
this.$modal
.confirm('确认要"' + text + '""' + row.userName + '"用户吗？')
.then(function () {
return changeUserStatus(row.userId, row.status);
})
.then(() => {
this.$modal.msgSuccess(text + "成功");
})
.catch(function () {
row.status = row.status === "0" ? "1" : "0";
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
userId: undefined,
deptId: undefined,
userName: undefined,
nickName: undefined,
password: undefined,
phonenumber: undefined,
email: undefined,
sex: undefined,
status: "0",
remark: undefined,
postIds: [],
roleIds: [],
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.queryParams.deptId = undefined;
this.$refs.tree.setCurrentKey(null);
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.userId);
this.single = selection.length != 1;
this.multiple = !selection.length;
},
// 更多操作触发
handleCommand(command, row) {
switch (command) {
case "handleResetPwd":
this.handleResetPwd(row);
break;
case "handleAuthRole":
this.handleAuthRole(row);
break;
default:
break;
}
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
getUser().then((response) => {
this.postOptions = response.posts;
this.roleOptions = response.roles;
this.open = true;
this.title = "添加用户";
this.form.password = this.initPassword;
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const userId = row.userId || this.ids;
getUser(userId).then((response) => {
this.form = response.data;
this.postOptions = response.posts;
this.roleOptions = response.roles;
this.$set(this.form, "postIds", response.postIds);
this.$set(this.form, "roleIds", response.roleIds);
this.open = true;
this.title = "修改用户";
this.form.password = "";
});
},
/** 重置密码按钮操作 */
handleResetPwd(row) {
this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnClickModal: false,
inputPattern: /^.{5,20}$/,
inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
})
.then(({ value }) => {
resetUserPwd(row.userId, value).then((response) => {
this.$modal.msgSuccess("修改成功，新密码是：" + value);
});
})
.catch(() => {});
},
/** 分配角色操作 */
handleAuthRole: function (row) {
const userId = row.userId;
this.$router.push("/system/user-auth/role/" + userId);
},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.userId != undefined) {
updateUser(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addUser(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
this.$router.push("/system/user-auth/role/" + userId);
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const userIds = row.userId || this.ids;
this.$modal
.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
.then(function () {
return delUser(userIds);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"system/user/export",
{
...this.queryParams,
},
`user_${new Date().getTime()}.xlsx`
);
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = "用户导入";
this.upload.open = true;
},
/** 下载模板操作 */
importTemplate() {
this.download(
"system/user/downloadTemplateSystemUser",
{},
`user_template_${new Date().getTime()}.xlsx`
);
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert(
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
response.msg +
"</div>",
"导入结果",
{ dangerouslyUseHTMLString: true }
);
this.getList();
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
},
};
</script>
\ No newline at end of file
src/views/system/user2/profile/index.vue deleted 100644 → 0
View file @ d7a61660
<template>
<div class="app-container">
<el-row :gutter="20">
<el-col :span="6" :xs="24">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>个人信息</span>
</div>
<div>
<div class="text-center">
<userAvatar />
</div>
<ul class="list-group list-group-striped">
<li class="list-group-item">
<svg-icon icon-class="user" />用户名称
<div class="pull-right">{{ user.userName }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="phone" />手机号码
<div class="pull-right">{{ user.phonenumber }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="email" />用户邮箱
<div class="pull-right">{{ user.email }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="tree" />所属部门
<div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="peoples" />所属角色
<div class="pull-right">{{ roleGroup }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="date" />创建日期
<div class="pull-right">{{ user.createTime }}</div>
</li>
</ul>
</div>
</el-card>
</el-col>
<el-col :span="18" :xs="24">
<el-card>
<div slot="header" class="clearfix">
<span>基本资料</span>
</div>
<el-tabs v-model="activeTab">
<el-tab-pane label="基本资料" name="userinfo">
<userInfo :user="user" />
</el-tab-pane>
<el-tab-pane label="修改密码" name="resetPwd">
<resetPwd />
</el-tab-pane>
</el-tabs>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import { getUserProfile } from "@/api/system/user";
export default {
name: "Profile",
components: { userAvatar, userInfo, resetPwd },
data() {
return {
user: {},
roleGroup: {},
postGroup: {},
activeTab: "userinfo"
};
},
created() {
this.getUser();
},
methods: {
getUser() {
getUserProfile().then(response => {
this.user = response.data;
this.roleGroup = response.roleGroup;
this.postGroup = response.postGroup;
});
}
}
};
</script>
src/views/system/user2/profile/resetPwd.vue deleted 100644 → 0
View file @ d7a61660
<template>
<el-form ref="form" :model="user" :rules="rules" label-width="80px">
<el-form-item label="旧密码" prop="oldPassword">
<el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password/>
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password/>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
</el-form-item>
<el-form-item>
<el-button type="primary" size="mini" @click="submit">保存</el-button>
<el-button type="danger" size="mini" @click="close">关闭</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { updateUserPwd } from "@/api/system/user";
export default {
data() {
const equalToPassword = (rule, value, callback) => {
if (this.user.newPassword !== value) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
}
};
return {
user: {
oldPassword: undefined,
newPassword: undefined,
confirmPassword: undefined
},
// 表单校验
rules: {
oldPassword: [
{ required: true, message: "旧密码不能为空", trigger: "blur" }
],
newPassword: [
{ required: true, message: "新密码不能为空", trigger: "blur" },
{ min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
],
confirmPassword: [
{ required: true, message: "确认密码不能为空", trigger: "blur" },
{ required: true, validator: equalToPassword, trigger: "blur" }
]
}
};
},
methods: {
submit() {
this.$refs["form"].validate(valid => {
if (valid) {
updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
this.$modal.msgSuccess("修改成功");
});
}
});
},
close() {
this.$tab.closePage();
}
}
};
</script>
src/views/system/user2/profile/userAvatar.vue deleted 100644 → 0
View file @ d7a61660
<template>
<div>
<div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
<el-row>
<el-col :xs="24" :md="12" :style="{height: '350px'}">
<!-- <vue-cropper
ref="cropper"
:img="options.img"
:info="true"
:autoCrop="options.autoCrop"
:autoCropWidth="options.autoCropWidth"
:autoCropHeight="options.autoCropHeight"
:fixedBox="options.fixedBox"
:outputType="options.outputType"
@realTime="realTime"
v-if="visible"
/> -->
</el-col>
<el-col :xs="24" :md="12" :style="{height: '350px'}">
<div class="avatar-upload-preview">
<img :src="previews.url" :style="previews.img" />
</div>
</el-col>
</el-row>
<br />
<el-row>
<el-col :lg="2" :sm="3" :xs="3">
<el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
<el-button size="small">
选择
<i class="el-icon-upload el-icon--right"></i>
</el-button>
</el-upload>
</el-col>
<el-col :lg="{span: 1, offset: 2}" :sm="2" :xs="2">
<el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
</el-col>
<el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
<el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
</el-col>
<el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
<el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
</el-col>
<el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
<el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
</el-col>
<el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2">
<el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
</el-col>
</el-row>
</el-dialog>
</div>
</template>
<script>
import store from "@/store";
// import { VueCropper } from "vue-cropper";
import { uploadAvatar } from "@/api/system/user";
import { debounce } from '@/utils'
export default {
// components: { VueCropper },
data() {
return {
// 是否显示弹出层
open: false,
// 是否显示cropper
visible: false,
// 弹出层标题
title: "修改头像",
options: {
img: store.getters.avatar, //裁剪图片的地址
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 200, // 默认生成截图框宽度
autoCropHeight: 200, // 默认生成截图框高度
fixedBox: true, // 固定截图框大小 不允许改变
outputType:"png", // 默认生成截图为PNG格式
filename: 'avatar' // 文件名称
},
previews: {},
resizeHandler: null
};
},
methods: {
// 编辑头像
editCropper() {
this.open = true;
},
// 打开弹出层结束时的回调
modalOpened() {
this.visible = true;
if (!this.resizeHandler) {
this.resizeHandler = debounce(() => {
this.refresh()
}, 100)
}
window.addEventListener("resize", this.resizeHandler)
},
// 刷新组件
refresh() {
this.$refs.cropper.refresh();
},
// 覆盖默认的上传行为
requestUpload() {
},
// 向左旋转
rotateLeft() {
this.$refs.cropper.rotateLeft();
},
// 向右旋转
rotateRight() {
this.$refs.cropper.rotateRight();
},
// 图片缩放
changeScale(num) {
num = num || 1;
this.$refs.cropper.changeScale(num);
},
// 上传预处理
beforeUpload(file) {
if (file.type.indexOf("image/") == -1) {
this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
} else {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
this.options.img = reader.result;
this.options.filename = file.name;
};
}
},
// 上传图片
uploadImg() {
this.$refs.cropper.getCropBlob(data => {
let formData = new FormData();
formData.append("avatarfile", data, this.options.filename);
uploadAvatar(formData).then(response => {
this.open = false;
this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
store.commit('SET_AVATAR', this.options.img);
this.$modal.msgSuccess("修改成功");
this.visible = false;
});
});
},
// 实时预览
realTime(data) {
this.previews = data;
},
// 关闭窗口
closeDialog() {
this.options.img = store.getters.avatar
this.visible = false;
window.removeEventListener("resize", this.resizeHandler)
}
}
};
</script>
<style scoped lang="scss">
.user-info-head {
position: relative;
display: inline-block;
height: 120px;
}
.user-info-head:hover:after {
content: '+';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
color: #eee;
background: rgba(0, 0, 0, 0.5);
font-size: 24px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
cursor: pointer;
line-height: 110px;
border-radius: 50%;
}
</style>
src/views/system/user2/profile/userInfo.vue deleted 100644 → 0
View file @ d7a61660
<template>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="用户昵称" prop="nickName">
<el-input v-model="form.nickName" maxlength="30" />
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-input v-model="form.phonenumber" maxlength="11" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" maxlength="50" />
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.sex">
<el-radio label="0">男</el-radio>
<el-radio label="1">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" size="mini" @click="submit">保存</el-button>
<el-button type="danger" size="mini" @click="close">关闭</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { updateUserProfile } from "@/api/system/user";
export default {
props: {
user: {
type: Object
}
},
data() {
return {
form: {},
// 表单校验
rules: {
nickName: [
{ required: true, message: "用户昵称不能为空", trigger: "blur" }
],
email: [
{ required: true, message: "邮箱地址不能为空", trigger: "blur" },
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"]
}
],
phonenumber: [
{ required: true, message: "手机号码不能为空", trigger: "blur" },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}
]
}
};
},
watch: {
user: {
handler(user) {
if (user) {
this.form = { nickName: user.nickName, phonenumber: user.phonenumber, email: user.email, sex: user.sex };
}
},
immediate: true
}
},
methods: {
submit() {
this.$refs["form"].validate(valid => {
if (valid) {
updateUserProfile(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.user.phonenumber = this.form.phonenumber;
this.user.email = this.form.email;
});
}
});
},
close() {
this.$tab.closePage();
}
}
};
</script>
vue.config.js
View file @ f1258b20
...@@ -9,8 +9,8 @@ function resolve(dir) { ...@@ -9,8 +9,8 @@ function resolve(dir) {
const name = defaultSettings.title || '漏缆故障定位监测系统' // page title const name = defaultSettings.title || '漏缆故障定位监测系统' // page title
const port = process.env.port || process.env.npm_config_port || 8890 // dev port const port = process.env.port || process.env.npm_config_port || 8890 // dev port
// const href = 'http://101.126.159.207' // const href = 'http://101.126.159.207'
const href = 'http://127.0.0.1' // const href = 'http://127.0.0.1'
// const href = 'http://192.168.0.122' const href = 'http://192.168.0.113'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment