Commit e88d106d authored by yangkaiyi's avatar yangkaiyi

改页面报错、预留有害生物管理页面

parent 84859b65
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="4"> <el-col :span="4">
<el-input <el-input
placeholder="请输入搜索的重要有害植物名称" placeholder="请输入重要有害植物名称"
v-model="filterDeviceName" v-model="filterDeviceName"
> >
</el-input> </el-input>
......
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
<svg-icon icon-class="device" class-name="card-panel-icon" /> <svg-icon icon-class="device" class-name="card-panel-icon" />
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text">在线/重要有害植物总数</div> <div class="card-panel-text">在线/植物总数</div>
<count-to <count-to
class="card-panel-num" class="card-panel-num"
:startVal="0" :startVal="0"
......
...@@ -3,146 +3,279 @@ ...@@ -3,146 +3,279 @@
<el-row class="toolbar"> <el-row class="toolbar">
<el-col :span="24"> <el-col :span="24">
<el-form :inline="true" :model="filters"> <el-form :inline="true" :model="filters">
<el-select v-model="filters.column" placeholder="请选择"> <el-select v-model="filters.column" placeholder="请选择">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value"
</el-option> >
</el-select> </el-option>
<el-select v-model="filters.type" placeholder="请选择"> </el-select>
<el-option <el-select v-model="filters.type" placeholder="请选择">
v-for="item in selectTypeOptions" <el-option
:key="item.value" v-for="item in selectTypeOptions"
:label="item.label" :key="item.value"
:value="item.value"> :label="item.label"
</el-option> :value="item.value"
</el-select> >
<el-form-item> </el-option>
<el-input :type="filters.type==0?'text':'textarea'" v-model="filters.keyword" :placeholder="filters.type==0?'关键字':'多值用英文逗,号分开'"></el-input> </el-select>
</el-form-item> <el-form-item>
<el-form-item> <el-input
<el-button type="primary" v-on:click="init">查询</el-button> :type="filters.type == 0 ? 'text' : 'textarea'"
</el-form-item> v-model="filters.keyword"
<el-form-item> :placeholder="
<el-button type="primary" :disabled="!hasPermission('system:device:upload')" @click="inDeviceVisible=true">导入</el-button> filters.type == 0 ? '关键字' : '多值用英文逗,号分开'
</el-form-item> "
<el-form-item> ></el-input>
<el-button type="primary" v-on:click="showTransferDeviceDialog" :disabled="!hasPermission('system:device:upload')||selectDevices.length==0">转移</el-button> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item> <el-button type="primary" v-on:click="init">查询</el-button>
<el-button type="primary" v-on:click="downLoad" :disabled="selectDevices.length==0">导出</el-button> </el-form-item>
</el-form-item> <el-form-item>
</el-form> <el-button type="primary" @click="handlerAdd">添加</el-button>
</el-form-item>
<el-form-item>
<el-button
type="primary"
:disabled="!hasPermission('system:device:upload')"
@click="inDeviceVisible = true"
>导入</el-button
>
</el-form-item>
<el-form-item>
<el-button
type="primary"
v-on:click="showTransferDeviceDialog"
:disabled="
!hasPermission('system:device:upload') ||
selectDevices.length == 0
"
>转移</el-button
>
</el-form-item>
<el-form-item>
<el-button
type="primary"
v-on:click="downLoad"
:disabled="selectDevices.length == 0"
>导出</el-button
>
</el-form-item>
</el-form>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-table :data="data.list" @selection-change="selectionRowsChange" element-loading-text="Loading" fit highlight-current-row> <el-table
<el-table-column type="selection" width="55"></el-table-column> :data="data.list"
<el-table-column label="重要有害植物名称" prop="name"> @selection-change="selectionRowsChange"
element-loading-text="Loading"
fit
highlight-current-row
>
<el-table-column type="selection" width="55"></el-table-column>
<!-- prop都改字段名 -->
<el-table-column label="重要有害植物名称" prop="name" width="200">
</el-table-column> </el-table-column>
<el-table-column label="IMEI" width="160" prop="imei"> <el-table-column label="报关号222" width="160" prop="报关号">
</el-table-column> </el-table-column>
<el-table-column label="SIM" width="160" prop="sim"> <el-table-column label="来源国" width="100" prop="来源国">
</el-table-column> </el-table-column>
<el-table-column label="类型" prop="typeName"> <el-table-column label="携带有害生物" prop="typeName">
</el-table-column> </el-table-column>
<el-table-column width="160" label="添加时间"> <el-table-column width="160" label="添加时间">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.time/1000|moment("YYYY-MM-DD HH:mm:ss")}} {{ (scope.row.time / 1000) | moment("YYYY-MM-DD HH:mm:ss") }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="160" label="最后更新时间"> <el-table-column width="160" label="最后更新时间">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.lastUpdate/1000|moment("YYYY-MM-DD HH:mm:ss")}} {{
(scope.row.lastUpdate / 1000) | moment("YYYY-MM-DD HH:mm:ss")
}}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="状态"> <el-table-column label="操作" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag size="small" :type="scope.row.status===1?'success':scope.row.status===0?'danger':'info'">{{scope.row.status===1?'在线':scope.row.status===0?'离线':'未激活'}}</el-tag> <!-- 带权限判断demo -->
<!-- <el-button
size="small"
type="primary"
@click="handleEdit(scope.row)"
v-if="hasPermission('system:user:update')"
>编辑</el-button
> -->
<el-button
size="small"
type="primary"
@click="handleEdit(scope.row)"
>编辑</el-button
>
<el-button
size="small"
type="danger"
@click="handleDelete(scope.row)"
>删除</el-button
>
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column label="当日/总里程(km)" width="130">
<template slot-scope="scope">
{{scope.row.todayTrip+"/"+scope.row.trip}}
</template>
</el-table-column> -->
<el-table-column label="所属账号" prop="account">
<template slot-scope="scope">
<el-button type="primary" size="mini">{{scope.row.account}}</el-button>
</template>
</el-table-column>
</el-table> </el-table>
</el-col> </el-col>
</el-row> </el-row>
<el-row class="toolbar"> <el-row class="toolbar">
<el-col :span="24"> <el-col :span="24">
<el-pagination <el-pagination
layout="total, sizes, prev, pager, next" layout="total, sizes, prev, pager, next"
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:page-sizes="this.$store.state.common.pageSizes" :page-sizes="this.$store.state.common.pageSizes"
:page-size="this.$store.state.common.pageSize" :page-size="this.$store.state.common.pageSize"
:total="data.total" :total="data.total"
style="float:right;"> style="float: right"
>
</el-pagination> </el-pagination>
</el-col> </el-col>
</el-col>
</el-row> </el-row>
<InDevice :visible="inDeviceVisible" @visible="closeDialog"></InDevice> <InDevice :visible="inDeviceVisible" @visible="closeDialog"></InDevice>
<TransferDevice :visible="transferDeviceVisible" :devices="selectDevices" @visible="closeDialog"></TransferDevice> <TransferDevice
</div> :visible="transferDeviceVisible"
:devices="selectDevices"
@visible="closeDialog"
></TransferDevice>
<!-- 编辑 -->
<el-dialog
:title="`${isEdit ? '编辑' : '添加'}重要有害植物`"
:visible.sync="editDialogVisible"
width="40%"
>
<el-form
:model="editForm"
ref="editValidateForm"
label-width="100px"
class="demo-ruleForm"
>
<!-- TODO:改弹窗内容 -->
<el-form-item label="名称" prop="account">
<el-input
v-model.number="editForm.account"
auto-complete="off"
:disabled="true"
></el-input>
</el-form-item>
<el-form-item
label="邮箱"
prop="email"
:rules="[
{
type: 'email',
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change'],
},
]"
>
<el-input v-model="editForm.email" auto-complete="off"></el-input>
</el-form-item>
<el-form-item
label="电话"
prop="phone"
:rules="[
{
min: 11,
max: 11,
message: '请输入正确的手机号码',
trigger: 'blur',
},
]"
>
<el-input v-model="editForm.phone" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="角色" prop="parentId">
<el-checkbox-group v-model="editForm.roleIds">
<el-checkbox
v-for="(role, index) in roles"
:key="index"
:label="role.id"
:disabled="role.roleKey === 'root'"
>{{ role.name }}</el-checkbox
>
</el-checkbox-group>
</el-form-item>
<el-form-item label="禁用" prop="disabled">
<el-switch
v-model="editForm.disabled"
active-color="#ff4949"
inactive-color="#13ce66"
active-text="是"
inactive-text="否"
>
</el-switch>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editSubmit">确 定</el-button>
</span>
</el-dialog>
</div>
</template> </template>
<script> <script>
import util from '@/utils/util'; import util from "@/utils/util";
import InDevice from './components/InDevice' import InDevice from "./components/InDevice";
import TransferDevice from './components/TransferDevice' import TransferDevice from "./components/TransferDevice";
import { getAllDevices} from '@/api/api' import { getAllDevices } from "@/api/api";
export default { export default {
data() { data() {
return { return {
page: 1, page: 1,
data:{}, data: {},
filters: { filters: {
column:'imei', column: "报关号",
keyword:'', keyword: "",
type:0 type: 0,
}, },
options: [{ // value改字段名
value: 'name', options: [
label: '重要有害植物名称' {
}, { value: "name",
value: 'imei', label: "重要有害植物名称",
label: 'IMEI号' },
}, { {
value: 'sim', value: "报关号",
label: 'SIM号码' label: "报关号",
}, { },
value: 'account', {
label: '所属账号' value: "来源国",
}], label: "来源国",
selectTypeOptions:[{ },
value: 0, {
label: '模糊搜索' value: "account",
}, { label: "所属账号",
value: 1, },
label: '精确查询' ],
}], selectTypeOptions: [
inDeviceVisible:false, {
transferDeviceVisible:false, value: 0,
selectDevices:[] label: "模糊搜索",
},
} {
value: 1,
label: "精确查询",
},
],
inDeviceVisible: false,
transferDeviceVisible: false,
selectDevices: [],
editDialogVisible: false,
editForm: {
roleIds: [],
},
isEdit: false,
};
}, },
created() { created() {
this.init(); this.init();
...@@ -151,110 +284,133 @@ export default { ...@@ -151,110 +284,133 @@ export default {
init() { init() {
let para = { let para = {
page: this.page, page: this.page,
pageSize:this.$store.state.common.pageSize, pageSize: this.$store.state.common.pageSize,
column:this.filters.column, column: this.filters.column,
keyword:this.filters.keyword, keyword: this.filters.keyword,
type:this.filters.type type: this.filters.type,
}; };
getAllDevices(para).then(data => { getAllDevices(para).then((data) => {
this.data = data this.data = data;
}) });
}, },
handleDelete(row){ handlerAdd() {
this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', { this.isEdit = false;
confirmButtonText: '确定', this.editForm = {};
cancelButtonText: '取消', this.editDialogVisible = true;
type: 'warning' },
}).then(() => { handleEdit(row) {
deleteUser(row.id).then(data => { this.isEdit = true;
this.$message({ this.editForm = row;
type: 'success', this.editDialogVisible = true;
message: '删除成功!' },
}); handleDelete(row) {
this.init() this.$confirm("是否确定删除该有害植物?", "提示", {
}) confirmButtonText: "确定",
}); cancelButtonText: "取消",
type: "warning",
}).then(() => {
// TODO:删除接口
// deleteUser(row.id).then((data) => {
// this.$message({
// type: "success",
// message: "删除成功!",
// });
// this.init();
// });
});
}, },
handleSizeChange(val) { handleSizeChange(val) {
this.$store.dispatch('updatePageSize',val); this.$store.dispatch("updatePageSize", val);
this.init(); this.init();
},
}, handleCurrentChange(val) {
handleCurrentChange(val) { this.page = val;
this.page = val; this.init();
this.init(); },
}, selectionRowsChange(val) {
selectionRowsChange(val){ this.selectDevices = val;
this.selectDevices = val; },
}, showTransferDeviceDialog() {
showTransferDeviceDialog(){ if (this.selectDevices.length == 0) {
if(this.selectDevices.length==0){ this.$message({
this.$message({ type: "warning",
type: 'warning', message: "请选择需要转移的重要有害植物",
message: '请选择需要转移的重要有害植物' });
}); return;
return; }
} this.transferDeviceVisible = true;
this.transferDeviceVisible=true; },
}, closeDialog(data) {
closeDialog(data){ for (var key in data) {
for (var key in data) { this[key] = data[key];
this[key] = data[key]; }
} if (data.refresh) {
if(data.refresh){ this.init();
this.init(); }
} },
}, downLoad() {
downLoad(){ if (this.selectDevices.length == 0) {
if(this.selectDevices.length==0){ this.$message({
this.$message({ type: "warning",
type: 'warning', message: "请选择需要导出的重要有害植物",
message: '请选择需要导出的重要有害植物' });
}); return;
return; }
} import("@/vendor/Export2Excel").then((excel) => {
import('@/vendor/Export2Excel').then(excel => { const tHeader = [
const tHeader = ['IMEI','名称','SIM','备注','重要有害植物类型','分组','添加时间'] "报关号",
const filterVal = ['imei','name','sim','remarks','typeId','groupId','time'] "重要有害植物名称",
const list = this.selectDevices "来源国",
const data = this.formatJson(filterVal, list) "备注",
excel.export_json_to_excel({ "重要有害植物类型",
header: tHeader, "分组",
data, "添加时间",
filename: '重要有害植物', ];
autoWidth:true, // TODO:字段名
bookType: 'xlsx' const filterVal = [
}) "报关号",
"name",
"来源国",
"remarks",
"typeId",
"groupId",
"time",
];
const list = this.selectDevices;
const data = this.formatJson(filterVal, list);
excel.export_json_to_excel({
header: tHeader,
data,
filename: "重要有害植物",
autoWidth: true,
bookType: "xlsx",
});
});
},
formatJson(filterVal, jsonData) {
return jsonData.map((v) =>
filterVal.map((j) => {
if (j === "time") {
return util.dateFormat(v[j], "YYYY-MM-DD HH:mm:ss");
} else {
return v[j];
}
}) })
}, );
formatJson(filterVal, jsonData) { },
return jsonData.map(v => filterVal.map(j => {
if (j==='time') {
return util.dateFormat(v[j],'YYYY-MM-DD HH:mm:ss')
}else{
return v[j]
}
}))
}
}, },
components: { components: {
InDevice, InDevice,
TransferDevice TransferDevice,
} },
} };
</script> </script>
<style> <style lang="scss">
.el-row { .el-row {
margin-bottom: 20px; margin-bottom: 20px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
</style> </style>
...@@ -5,38 +5,48 @@ ...@@ -5,38 +5,48 @@
<el-form :inline="true" :model="filters"> <el-form :inline="true" :model="filters">
<el-select v-model="filters.status" placeholder="状态"> <el-select v-model="filters.status" placeholder="状态">
<el-option <el-option
v-for="(item,index) in optionStatus" v-for="item in optionStatus"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value"
>
</el-option> </el-option>
</el-select> </el-select>
<el-select v-model="filters.column" placeholder="请选择"> <el-select v-model="filters.column" placeholder="请选择">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value"
</el-option> >
</el-select> </el-option>
<el-form-item> </el-select>
<el-input v-model="filters.keyword" placeholder="关键字"></el-input> <el-form-item>
</el-form-item> <el-input v-model="filters.keyword" placeholder="关键字"></el-input>
<el-form-item> </el-form-item>
<el-button type="primary" v-on:click="init">查询</el-button> <el-form-item>
</el-form-item> <el-button type="primary" v-on:click="init">查询</el-button>
<el-form-item> </el-form-item>
<el-button type="primary" @click="addDialogVisible=true" v-if="hasPermission('system:user:add')">创建用户</el-button> <el-form-item>
</el-form-item> <el-button
</el-form> type="primary"
@click="addDialogVisible = true"
v-if="hasPermission('system:user:add')"
>创建用户</el-button
>
</el-form-item>
</el-form>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-table :data="data.list" element-loading-text="Loading" @sort-change="sortChange" fit highlight-current-row> <el-table
:data="data.list"
element-loading-text="Loading"
@sort-change="sortChange"
fit
highlight-current-row
>
<el-table-column label="帐号" prop="account" width="120"> <el-table-column label="帐号" prop="account" width="120">
</el-table-column> </el-table-column>
<el-table-column label="邮箱" prop="email" width="220"> <el-table-column label="邮箱" prop="email" width="220">
...@@ -45,180 +55,280 @@ ...@@ -45,180 +55,280 @@
</el-table-column> </el-table-column>
<el-table-column label="角色" width="160"> <el-table-column label="角色" width="160">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag size="mini" v-for="(roleKey,index) in scope.row.roleKeys.split(',')" :key="index">{{getRole(roleKey)}}</el-tag> <el-tag
size="mini"
v-for="(roleKey, index) in scope.row.roleKeys.split(',')"
:key="index"
>{{ getRole(roleKey) }}</el-tag
>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="注册时间" width="160"> <el-table-column label="注册时间" width="160">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.time/1000|moment("YYYY-MM-DD HH:mm:ss")}} {{ (scope.row.time / 1000) | moment("YYYY-MM-DD HH:mm:ss") }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="重要有害植物" prop="deviceCount" width="80" sortable="custom"> <el-table-column
label="重要有害植物数"
prop="deviceCount"
width="100"
sortable="custom"
>
<!-- <template slot-scope="scope"> <!-- <template slot-scope="scope">
<el-switch disabled v-model="scope.row.disabled" active-color="#ff4949" inactive-color="#13ce66"> </el-switch> <el-switch disabled v-model="scope.row.disabled" active-color="#ff4949" inactive-color="#13ce66"> </el-switch>
</template> --> </template> -->
</el-table-column> </el-table-column>
<el-table-column label="状态" width="60"> <el-table-column label="状态" width="60">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag size="mini" :type="scope.row.status===1?'success':'info'">{{scope.row.status===1?'在线':'离线'}}</el-tag> <el-tag
size="mini"
:type="scope.row.status === 1 ? 'success' : 'info'"
>{{ scope.row.status === 1 ? "在线" : "离线" }}</el-tag
>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center"> <el-table-column label="操作" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="small" type="success" @click="goTrack(scope.row)">监控</el-button> <el-button size="small" type="success" @click="goTrack(scope.row)"
<el-button size="small" type="primary" @click="handleEdit(scope.row)" v-if="hasPermission('system:user:update')">编辑</el-button> >监控</el-button
<el-button size="small" type="danger" @click="handleDelete(scope.row)" v-if="hasPermission('system:user:delete')">删除</el-button> >
<el-button
size="small"
type="primary"
@click="handleEdit(scope.row)"
v-if="hasPermission('system:user:update')"
>编辑</el-button
>
<el-button
size="small"
type="danger"
@click="handleDelete(scope.row)"
v-if="hasPermission('system:user:delete')"
>删除</el-button
>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-col> </el-col>
</el-row> </el-row>
<el-row class="toolbar"> <el-row class="toolbar">
<el-col :span="24"> <el-col :span="24">
<el-pagination <el-pagination
layout="total, sizes, prev, pager, next" layout="total, sizes, prev, pager, next"
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:page-sizes="this.$store.state.common.pageSizes" :page-sizes="this.$store.state.common.pageSizes"
:page-size="this.$store.state.common.pageSize" :page-size="this.$store.state.common.pageSize"
:total="data.total" :total="data.total"
style="float:right;"> style="float: right"
>
</el-pagination> </el-pagination>
</el-col> </el-col>
</el-col>
</el-row> </el-row>
<el-dialog title="创建用户" :visible.sync="addDialogVisible" width="40%">
<el-dialog <el-form
title="创建用户" :model="addForm"
:visible.sync="addDialogVisible" ref="addValidateForm"
width="40%" label-width="100px"
> class="demo-ruleForm"
<el-form :model="addForm" ref="addValidateForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="帐号" prop="account" :rules="[{ required: true, message: '帐号不能为空'}]" >
<el-input v-model="addForm.account" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email" :rules="[{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}]">
<el-input v-model="addForm.email" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone" :rules="[{ min: 11, max: 11, message: '请输入正确的手机号码', trigger: 'blur'}]">
<el-input v-model="addForm.phone" auto-complete="off"></el-input>
</el-form-item>
<el-form-item
label="密码"
prop="password"
:rules="[{ required: true, message: '密码不能为空'}]"
> >
<el-input v-model="addForm.password" auto-complete="off"></el-input> <el-form-item
</el-form-item> label="帐号"
<el-form-item label="角色" prop="roleIds" :rules="[{ required: true, message: '请选择角色'}]"> prop="account"
<el-checkbox-group v-model="addForm.roleIds"> :rules="[{ required: true, message: '帐号不能为空' }]"
<el-checkbox v-for="(role,index) in roles" :key="index" :label="role.id" :disabled="role.roleKey==='root'">{{role.name}}</el-checkbox> >
<el-input v-model="addForm.account" auto-complete="off"></el-input>
</el-checkbox-group> </el-form-item>
</el-form-item> <el-form-item
</el-form> label="邮箱"
prop="email"
<span slot="footer" class="dialog-footer"> :rules="[
<el-button @click="addDialogVisible = false">取 消</el-button> {
<el-button type="primary" @click="addSubmit">确 定</el-button> type: 'email',
</span> message: '请输入正确的邮箱地址',
</el-dialog> trigger: ['blur', 'change'],
},
]"
>
<el-input v-model="addForm.email" auto-complete="off"></el-input>
</el-form-item>
<el-form-item
label="电话"
prop="phone"
:rules="[
{
min: 11,
max: 11,
message: '请输入正确的手机号码',
trigger: 'blur',
},
]"
>
<el-input v-model="addForm.phone" auto-complete="off"></el-input>
</el-form-item>
<el-form-item
label="密码"
prop="password"
:rules="[{ required: true, message: '密码不能为空' }]"
>
<el-input v-model="addForm.password" auto-complete="off"></el-input>
</el-form-item>
<el-form-item
label="角色"
prop="roleIds"
:rules="[{ required: true, message: '请选择角色' }]"
>
<el-checkbox-group v-model="addForm.roleIds">
<el-checkbox
v-for="(role, index) in roles"
:key="index"
:label="role.id"
:disabled="role.roleKey === 'root'"
>{{ role.name }}</el-checkbox
>
</el-checkbox-group>
</el-form-item>
</el-form>
<el-dialog <span slot="footer" class="dialog-footer">
title="修改用户" <el-button @click="addDialogVisible = false">取 消</el-button>
:visible.sync="editDialogVisible" <el-button type="primary" @click="addSubmit">确 定</el-button>
width="40%" </span>
> </el-dialog>
<el-form :model="editForm" ref="editValidateForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="帐号" prop="account">
<el-input v-model.number="editForm.account" auto-complete="off" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email" :rules="[{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}]">
<el-input v-model="editForm.email" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone" :rules="[{ min: 11, max: 11, message: '请输入正确的手机号码', trigger: 'blur'}]">
<el-input v-model="editForm.phone" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="角色" prop="parentId">
<el-checkbox-group v-model="editForm.roleIds">
<el-checkbox v-for="(role,index) in roles" :key="index" :label="role.id" :disabled="role.roleKey==='root'">{{role.name}}</el-checkbox>
</el-checkbox-group> <el-dialog title="修改用户" :visible.sync="editDialogVisible" width="40%">
</el-form-item> <el-form
<el-form-item label="禁用" prop="disabled"> :model="editForm"
<el-switch ref="editValidateForm"
v-model="editForm.disabled" label-width="100px"
active-color="#ff4949" class="demo-ruleForm"
inactive-color="#13ce66"
active-text="是"
inactive-text="否"
> >
</el-switch> <el-form-item label="帐号" prop="account">
</el-form-item> <el-input
</el-form> v-model.number="editForm.account"
auto-complete="off"
<span slot="footer" class="dialog-footer"> :disabled="true"
<el-button @click="editDialogVisible = false">取 消</el-button> ></el-input>
<el-button type="primary" @click="editSubmit">确 定</el-button> </el-form-item>
</span> <el-form-item
</el-dialog> label="邮箱"
prop="email"
:rules="[
{
type: 'email',
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change'],
},
]"
>
<el-input v-model="editForm.email" auto-complete="off"></el-input>
</el-form-item>
<el-form-item
label="电话"
prop="phone"
:rules="[
{
min: 11,
max: 11,
message: '请输入正确的手机号码',
trigger: 'blur',
},
]"
>
<el-input v-model="editForm.phone" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="角色" prop="parentId">
<el-checkbox-group v-model="editForm.roleIds">
<el-checkbox
v-for="(role, index) in roles"
:key="index"
:label="role.id"
:disabled="role.roleKey === 'root'"
>{{ role.name }}</el-checkbox
>
</el-checkbox-group>
</el-form-item>
<el-form-item label="禁用" prop="disabled">
<el-switch
v-model="editForm.disabled"
active-color="#ff4949"
inactive-color="#13ce66"
active-text="是"
inactive-text="否"
>
</el-switch>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editSubmit">确 定</el-button>
</span>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { getUserList,deleteUser,getRoles,updateUser,userAdd,generateToken } from '@/api/api' import {
getUserList,
deleteUser,
getRoles,
updateUser,
userAdd,
generateToken,
} from "@/api/api";
export default { export default {
data() { data() {
return { return {
page: 1, page: 1,
data:{}, data: {},
optionStatus:[ optionStatus: [
{ {
value: -1, value: -1,
label: '全部' label: "全部",
}, },
{ {
value: 1, value: 1,
label: '在线' label: "在线",
},{ },
{
value: 0, value: 0,
label: '离线' label: "离线",
} },
], ],
filters: { filters: {
column:'', column: "",
keyword:'', keyword: "",
status:-1, status: -1,
prop:'id', prop: "id",
order:'desc', order: "desc",
},
options: [
{
value: "account",
label: "账号",
}, },
options: [{ {
value: 'account', value: "email",
label: '账号' label: "邮箱",
}, { },
value: 'email', {
label: '邮箱' value: "phone",
}, { label: "电话",
value: 'phone', },
label: '电话' ],
}], editDialogVisible: false,
editDialogVisible:false, addDialogVisible: false,
addDialogVisible:false, editForm: {
editForm:{ roleIds: [],
roleIds:[]
}, },
addForm:{ addForm: {
roleIds:[] roleIds: [],
}, },
roles:[] roles: [],
} };
}, },
created() { created() {
this.init(); this.init();
...@@ -229,106 +339,102 @@ export default { ...@@ -229,106 +339,102 @@ export default {
init() { init() {
let para = { let para = {
page: this.page, page: this.page,
pageSize:this.$store.state.common.pageSize, pageSize: this.$store.state.common.pageSize,
column:this.filters.column, column: this.filters.column,
keyword:this.filters.keyword, keyword: this.filters.keyword,
status:this.filters.status, status: this.filters.status,
prop:this.filters.prop, prop: this.filters.prop,
order:this.filters.order, order: this.filters.order,
}; };
getUserList(para).then(data => { getUserList(para).then((data) => {
this.data = data this.data = data;
}) });
}, },
handleDelete(row){ handleDelete(row) {
deleteUser(row.id).then(data => { deleteUser(row.id).then((data) => {
this.init() this.init();
}) });
}, },
handleEdit(row){ handleEdit(row) {
this.editForm=row; this.editForm = row;
if(row.roleIds instanceof Array){ if (row.roleIds instanceof Array) {
} else {
}else{ let arrs = row.roleIds.split(",");
let arrs = row.roleIds.split(',');
let roles = []; let roles = [];
for(var i=0;i<arrs.length;i++){ for (var i = 0; i < arrs.length; i++) {
roles.push(parseInt(arrs[i])) roles.push(parseInt(arrs[i]));
} }
this.editForm.roleIds=roles; this.editForm.roleIds = roles;
} }
this.editDialogVisible=true; this.editDialogVisible = true;
}, },
editSubmit(){ editSubmit() {
this.$refs.editValidateForm.validate((valid) => { this.$refs.editValidateForm.validate((valid) => {
if (valid) { if (valid) {
this.editDialogVisible=false; this.editDialogVisible = false;
updateUser(this.editForm).then(data => { updateUser(this.editForm).then((data) => {
this.init() this.init();
}) });
} }
}); });
}, },
getRoles(){ getRoles() {
getRoles().then(data => { getRoles().then((data) => {
this.roles = data this.roles = data;
}) });
}, },
addSubmit(){ addSubmit() {
this.$refs.addValidateForm.validate((valid) => { this.$refs.addValidateForm.validate((valid) => {
if (valid) { if (valid) {
userAdd(this.addForm).then(data => { userAdd(this.addForm).then((data) => {
this.addDialogVisible=false; this.addDialogVisible = false;
this.init(); this.init();
}) });
}else{ } else {
return false; return false;
} }
}); });
}, },
handleSizeChange(val) { handleSizeChange(val) {
this.$store.dispatch('updatePageSize',val); this.$store.dispatch("updatePageSize", val);
this.init(); this.init();
},
}, handleCurrentChange(val) {
handleCurrentChange(val) { this.page = val;
this.page = val;
this.init();
},
goTrack(row){
generateToken(row.id).then(data => {
let monitorUser = {account:row.account,token:data}
localStorage.monitorUser = JSON.stringify(monitorUser);
window.open('#/map');
})
},
sortChange(column, prop, order){
if(column.order=='ascending'){
this.filters.order = 'asc'
}else if(column.order=='descending'){
this.filters.order = 'desc'
}
this.filters.prop = column.prop;
this.init(); this.init();
}, },
getRole(roleKey){ goTrack(row) {
for(var i=0;i<this.$store.state.common.roles.length;i++){ generateToken(row.id).then((data) => {
if(roleKey == this.$store.state.common.roles[i].roleKey){ let monitorUser = { account: row.account, token: data };
return this.$store.state.common.roles[i].name localStorage.monitorUser = JSON.stringify(monitorUser);
} window.open("#/map");
} });
} },
} sortChange(column, prop, order) {
} if (column.order == "ascending") {
this.filters.order = "asc";
} else if (column.order == "descending") {
this.filters.order = "desc";
}
this.filters.prop = column.prop;
this.init();
},
getRole(roleKey) {
for (var i = 0; i < this.$store.state.common.roles.length; i++) {
if (roleKey == this.$store.state.common.roles[i].roleKey) {
return this.$store.state.common.roles[i].name;
}
}
},
},
};
</script> </script>
<style> <style lang="scss">
.el-row { .el-row {
margin-bottom: 20px; margin-bottom: 20px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
</style> </style>
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