20251113炳辰版本
This commit is contained in:
wxlong
1611
src/components/TaskManagement/manage/DataManage.vue
Normal file
1611
src/components/TaskManagement/manage/DataManage.vue
Normal file
File diff suppressed because it is too large
Load Diff
1413
src/components/TaskManagement/manage/ManualAllocate.vue
Normal file
1413
src/components/TaskManagement/manage/ManualAllocate.vue
Normal file
File diff suppressed because it is too large
Load Diff
99
src/components/TaskManagement/manage/TPManage.vue
Normal file
99
src/components/TaskManagement/manage/TPManage.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div id="TPcontainer">
|
||||
<el-container style="height: 100%">
|
||||
<el-aside class="MyAside">
|
||||
<el-menu
|
||||
background-color="#F7F8F1"
|
||||
text-color="rgb(38,70,114)"
|
||||
active-text-color="#3A87F9"
|
||||
:default-active="this.$route.path"
|
||||
router
|
||||
>
|
||||
<el-submenu index="1">
|
||||
<template slot="title">
|
||||
<i class="el-icon-folder-opened"></i>任务管理
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<el-menu-item :index="'/main'">任务管理</el-menu-item>
|
||||
<el-menu-item :index="'/datamanage'">数据管理</el-menu-item>
|
||||
<el-menu-item :index="'/taskmanage'">任务分配</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
<el-menu-item
|
||||
:index="'/usermanage'"
|
||||
style="padding-left: 10px !important"
|
||||
>
|
||||
<i class="el-icon-user-solid"></i>用户管理
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-main class="tpcontent">
|
||||
<router-view class="view" style="padding: 20px"></router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
method: {},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.MyAside {
|
||||
width: 255px !important;
|
||||
opacity: 0.9;
|
||||
background-color: #f7f8f1;
|
||||
color: #333;
|
||||
text-align: left;
|
||||
line-height: 200px;
|
||||
z-index: 10;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.tpcontent {
|
||||
position: absolute;
|
||||
left: 255px;
|
||||
right: 0px;
|
||||
width: calc(100% - 255px);
|
||||
padding: 0px;
|
||||
background: #fff;
|
||||
}
|
||||
.MyAside .usermp {
|
||||
padding-left: 10px !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) and (max-width: 1401px) {
|
||||
.tpcontent {
|
||||
position: absolute;
|
||||
left: 255px;
|
||||
width: calc(100% - 255px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 420px) and (max-width: 840px) {
|
||||
.MyAside {
|
||||
width: 160px !important;
|
||||
}
|
||||
.tpcontent {
|
||||
position: absolute;
|
||||
left: 160px;
|
||||
width: calc(100% - 160px);
|
||||
}
|
||||
}
|
||||
@media all and (max-width: 420px) {
|
||||
.MyAside {
|
||||
width: 120px !important;
|
||||
}
|
||||
.tpcontent {
|
||||
position: absolute;
|
||||
left: 120px;
|
||||
width: calc(100% - 120px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
632
src/components/TaskManagement/manage/TaskManage.vue
Normal file
632
src/components/TaskManagement/manage/TaskManage.vue
Normal file
@@ -0,0 +1,632 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 添加搜索区域 -->
|
||||
<div class="search-container">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="请输入关键词进行搜索"
|
||||
prefix-icon="el-icon-search"
|
||||
clearable
|
||||
size="small"
|
||||
style="width: 300px; margin-bottom: 20px;"
|
||||
@input="handleSearch"
|
||||
></el-input>
|
||||
</div>
|
||||
|
||||
<!-- <h2 style="text-align: left">任务</h2>
|
||||
<h5 style="text-align: left">管理任务人员</h5> -->
|
||||
<el-table
|
||||
:data="filteredData"
|
||||
max-height="720px"
|
||||
style="width: 100%;"
|
||||
:header-cell-class-name="sinClo"
|
||||
>
|
||||
<el-table-column
|
||||
prop="taskName"
|
||||
label="任务名称"
|
||||
min-width="100"
|
||||
sortable
|
||||
></el-table-column>
|
||||
<el-table-column min-width="110" filterable label="是否需要分配" sortable>
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span>是否需要分配</span>
|
||||
<el-dropdown @command="handleFilter" style="margin-left: 5px;">
|
||||
<span class="el-dropdown-link">
|
||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="all">全部</el-dropdown-item>
|
||||
<el-dropdown-item command="need">需要分配</el-dropdown-item>
|
||||
<el-dropdown-item command="notNeed">不需分配</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox
|
||||
label="需要分配"
|
||||
v-model="scope.row.isAllocationOptional"
|
||||
@change="changeisAllocationOptional(scope.row.id)"
|
||||
></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="95" filterable label="是否已分配" sortable>
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox
|
||||
label="已分配"
|
||||
v-model="scope.row.allocated"
|
||||
disabled
|
||||
></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
header-align="center"
|
||||
class-name="comClo"
|
||||
label="自动分配"
|
||||
>
|
||||
<el-table-column min-width="120" label="工作区域">
|
||||
<template slot-scope="scope">
|
||||
<el-upload
|
||||
accept=".shp"
|
||||
class="upload-demo"
|
||||
action="shp"
|
||||
:auto-upload="false"
|
||||
:limit="1"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
:on-change="
|
||||
(file, fileList) => {
|
||||
getFile(file, fileList, scope.row.id);
|
||||
}
|
||||
"
|
||||
:on-remove="
|
||||
(file, fileList) => {
|
||||
removeFile(file, fileList, scope.row.id);
|
||||
}
|
||||
"
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
plain
|
||||
:disabled="!scope.row.isAllocationOptional"
|
||||
>上传shp数据</el-button
|
||||
>
|
||||
</el-upload>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="120" filterable label="任务人员">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
size="small"
|
||||
@click.native="selectWorkers(scope.row.id)"
|
||||
:disabled="!scope.row.isAllocationOptional"
|
||||
>选择任务人员</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="100" label="划分等级">
|
||||
<template slot-scope="scope">
|
||||
<el-select
|
||||
v-model="scope.row.precision"
|
||||
size="small"
|
||||
placeholder="请选择"
|
||||
:disabled="!scope.row.isAllocationOptional"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in precisionOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="100" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click.native="submitUploadShp(scope.row.id)"
|
||||
:disabled="!scope.row.isAllocationOptional"
|
||||
>自动分配</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="100" label="手动分配">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
style="margin-left: 10px !important"
|
||||
size="small"
|
||||
@click.native="manualAllocate(scope.row.id, false)"
|
||||
:disabled="!scope.row.isAllocationOptional"
|
||||
>手动分配</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
class="taskDialog"
|
||||
title="选择任务人员"
|
||||
:visible.sync="WorkersVisible"
|
||||
:close-on-click-modal="false"
|
||||
style="position: absolute !important"
|
||||
>
|
||||
<el-table
|
||||
:data="workers"
|
||||
:height="400"
|
||||
stripe
|
||||
highlight-current-row
|
||||
class="tb-edit"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column type="index" min-width="40"></el-table-column>
|
||||
<el-table-column prop="username" label="工作人员" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-select
|
||||
v-model="scope.row.username"
|
||||
filterable
|
||||
placeholder="请选择"
|
||||
@focus="makeuername(scope.$index)"
|
||||
@change="makeId(scope.$index)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in selectworkersdata"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="role" label="工作角色" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.role" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in roleOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" min-width="80">
|
||||
<template slot="header">
|
||||
<el-button @click="addWorker()" type="primary" class="allomapBtn"
|
||||
>添加人员</el-button
|
||||
>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click.native.prevent="deleteWorker(scope.$index)"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-button type="primary" @click="UploadWorkers()" class="allomapBtn"
|
||||
>确认</el-button
|
||||
>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ajax as request } from "@/request.js";
|
||||
import axios from "axios";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
WorkersVisible: false,
|
||||
DialogVisible: false,
|
||||
workersIndex: -1,
|
||||
tasksData: [],
|
||||
filteredData: [], // 过滤后的数据
|
||||
currentFilter: 'all', // 当前筛选状态
|
||||
workers: [],
|
||||
selectworkersdata: [],
|
||||
options: [],
|
||||
roleOptions: [
|
||||
{
|
||||
value: "0",
|
||||
label: "采集人员",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "巡查人员",
|
||||
},
|
||||
],
|
||||
precisionOptions: [
|
||||
{
|
||||
value: "0",
|
||||
label: "默认",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1(2500km)",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2(630km)",
|
||||
},
|
||||
{
|
||||
value: "3",
|
||||
label: "3(78km)",
|
||||
},
|
||||
{
|
||||
value: "4",
|
||||
label: "4(20km)",
|
||||
},
|
||||
{
|
||||
value: "5",
|
||||
label: "5(2.4km)",
|
||||
},
|
||||
{
|
||||
value: "6",
|
||||
label: "6(610m)",
|
||||
},
|
||||
{
|
||||
value: "7",
|
||||
label: "7(76m)",
|
||||
},
|
||||
{
|
||||
value: "8",
|
||||
label: "8(19.11m)",
|
||||
},
|
||||
{
|
||||
value: "9",
|
||||
label: "9(4.78m)",
|
||||
},
|
||||
{
|
||||
value: "10",
|
||||
label: "10(0.5971m)",
|
||||
},
|
||||
{
|
||||
value: "11",
|
||||
label: "11(0.1492m)",
|
||||
},
|
||||
{
|
||||
value: "12",
|
||||
label: "12(0.0186m)",
|
||||
},
|
||||
],
|
||||
searchKeyword: "", // 搜索关键词
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 搜索处理方法
|
||||
handleSearch() {
|
||||
this.applyFilter();
|
||||
},
|
||||
|
||||
// 应用筛选和搜索
|
||||
applyFilter() {
|
||||
let filtered = [...this.tasksData];
|
||||
|
||||
// 先应用分配状态筛选
|
||||
if (this.currentFilter === 'need') {
|
||||
filtered = filtered.filter(item => item.isAllocationOptional === true);
|
||||
} else if (this.currentFilter === 'notNeed') {
|
||||
filtered = filtered.filter(item => item.isAllocationOptional === false);
|
||||
}
|
||||
|
||||
// 再应用搜索关键词筛选
|
||||
if (this.searchKeyword.trim()) {
|
||||
const keyword = this.searchKeyword.toLowerCase();
|
||||
filtered = filtered.filter(item => {
|
||||
return item.taskName && item.taskName.toLowerCase().includes(keyword);
|
||||
});
|
||||
}
|
||||
|
||||
this.filteredData = filtered;
|
||||
},
|
||||
|
||||
// 筛选处理方法
|
||||
handleFilter(command) {
|
||||
this.currentFilter = command;
|
||||
this.applyFilter();
|
||||
},
|
||||
|
||||
// 修改方法参数，从index改为taskId
|
||||
changeisAllocationOptional(taskId) {
|
||||
let row = this.tasksData.find(item => item.id === taskId);
|
||||
if (!row) return;
|
||||
|
||||
let that = this;
|
||||
let str = row.isAllocationOptional === true
|
||||
? "确认任务需要分配吗？"
|
||||
: "确认任务无需分配吗？";
|
||||
let res = row.isAllocationOptional === true ? 0 : 1;
|
||||
|
||||
this.$confirm(str, "提示", {})
|
||||
.then(() => {
|
||||
request({
|
||||
url: "/allocation/optional",
|
||||
method: "get",
|
||||
params: {
|
||||
taskId: taskId,
|
||||
optional: res,
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.success == true) {
|
||||
that.$message.success("设置成功");
|
||||
|
||||
// 重新获取数据以确保状态同步
|
||||
that.init();
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
} else {
|
||||
that.$message.error("设置失败");
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
// 取消操作，不需要回滚状态
|
||||
});
|
||||
},
|
||||
init() {
|
||||
let that = this;
|
||||
// 请求任务列表
|
||||
request({
|
||||
url: "/task/selectTaskHasCreated",
|
||||
method: "get",
|
||||
}).then(function (response) {
|
||||
if (response.data.success == true) {
|
||||
var jsondata = JSON.parse(response.data.data);
|
||||
that.tasksData = jsondata.data;
|
||||
//0表示需要分配
|
||||
for (var i = 0; i < that.tasksData.length; i++) {
|
||||
if (that.tasksData[i].isAllocationOptional == 0) {
|
||||
that.tasksData[i].isAllocationOptional = true;
|
||||
} else {
|
||||
that.tasksData[i].isAllocationOptional = false;
|
||||
}
|
||||
if (that.tasksData[i].allocated == "true") {
|
||||
that.tasksData[i].allocated = true;
|
||||
} else {
|
||||
that.tasksData[i].allocated = false;
|
||||
}
|
||||
}
|
||||
// 应用当前筛选和搜索
|
||||
that.applyFilter();
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
}
|
||||
});
|
||||
request({
|
||||
url: "/user/all_worker",
|
||||
method: "get",
|
||||
}).then(function (response) {
|
||||
if (response.data.success == true) {
|
||||
var worksdata = response.data.data;
|
||||
that.options = [];
|
||||
for (var i = 0; i < worksdata.length; i++) {
|
||||
that.options.push({
|
||||
value: worksdata[i].id,
|
||||
label: worksdata[i].username,
|
||||
});
|
||||
}
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
}
|
||||
});
|
||||
},
|
||||
// onchange文件改变时的钩子 可以通过参数file找到文件 filr.raw获取文件流
|
||||
getFile(file, fileList, taskId) {
|
||||
let row = this.tasksData.find(item => item.id === taskId);
|
||||
if (!row) return;
|
||||
|
||||
let fileList1 = [];
|
||||
fileList1.push(file.raw);
|
||||
row.fileList = fileList1;
|
||||
},
|
||||
submitUploadShp(taskId) {
|
||||
let row = this.tasksData.find(item => item.id === taskId);
|
||||
if (!row) return;
|
||||
|
||||
if (row.allocated) {
|
||||
let that = this;
|
||||
this.$confirm("任务已经完成自动分配，是否重新分配？", "提示", {
|
||||
cancelButtonText: "取消",
|
||||
confirmButtonText: "确定",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
that.AutoTask(taskId);
|
||||
})
|
||||
.catch(() => {});
|
||||
} else {
|
||||
this.AutoTask(taskId);
|
||||
}
|
||||
},
|
||||
AutoTask(taskId) {
|
||||
let row = this.tasksData.find(item => item.id === taskId);
|
||||
if (!row) return;
|
||||
|
||||
let that = this;
|
||||
let fd = new FormData();
|
||||
if (row.fileList && row.fileList[0]) {
|
||||
fd.append("shp", row.fileList[0]);
|
||||
} else {
|
||||
that.$alert("请上传shp文件！", "提示", { confirmButtonText: "确定" });
|
||||
return;
|
||||
}
|
||||
if (!row.workers) {
|
||||
that.$alert("请选择任务人员！", "提示", { confirmButtonText: "确定" });
|
||||
return;
|
||||
}
|
||||
fd.append("taskId", taskId);
|
||||
fd.append("workers", JSON.stringify(row.workers));
|
||||
if (row.precision) {
|
||||
fd.append("precision", row.precision);
|
||||
}
|
||||
axios({
|
||||
url: "/allocation/assignment",
|
||||
method: "post",
|
||||
data: fd,
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.success == true) {
|
||||
that.$notify.success({
|
||||
title: "提示",
|
||||
message: "自动分配完成！",
|
||||
});
|
||||
that.manualAllocate(taskId, true);
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
} else {
|
||||
that.$notify.error({
|
||||
title: "提示",
|
||||
message: response.data.message,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
beforeAvatarUpload(file) {
|
||||
if (file.type != "shp") {
|
||||
this.$message.error("只能上传shp格式数据!");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
selectWorkers(taskId) {
|
||||
let row = this.tasksData.find(item => item.id === taskId);
|
||||
if (!row) return;
|
||||
|
||||
this.workersIndex = taskId; // 存储任务ID而不是索引
|
||||
if (row.workers) {
|
||||
this.workers = row.workers;
|
||||
} else {
|
||||
this.workers = [];
|
||||
}
|
||||
this.WorkersVisible = true;
|
||||
},
|
||||
addWorker() {
|
||||
let row = this.tasksData.find(item => item.id === this.workersIndex);
|
||||
if (!row) return;
|
||||
|
||||
if (row.taskType === "0") {
|
||||
this.workers.push({
|
||||
username: "",
|
||||
role: "0",
|
||||
});
|
||||
} else {
|
||||
this.workers.push({
|
||||
username: "",
|
||||
role: "1",
|
||||
});
|
||||
}
|
||||
},
|
||||
removeFile(file, fileList, taskId) {
|
||||
let row = this.tasksData.find(item => item.id === taskId);
|
||||
if (!row) return;
|
||||
|
||||
row.fileList = [];
|
||||
},
|
||||
deleteWorker(index) {
|
||||
this.workers.splice(index, 1);
|
||||
},
|
||||
UploadWorkers() {
|
||||
for (var i = 0; i < this.workers.length; i++) {
|
||||
if (this.workers[i].username == "") {
|
||||
this.$alert("任务人员不可为空！", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
let row = this.tasksData.find(item => item.id === this.workersIndex);
|
||||
if (row) {
|
||||
row.workers = this.workers;
|
||||
}
|
||||
this.WorkersVisible = false;
|
||||
// this.$alert(this.tasksData[this.workersIndex].workers, '提示', {confirmButtonText: '确定'})
|
||||
},
|
||||
makeuername() {
|
||||
this.selectworkersdata = this.options.slice();
|
||||
for (var i = 0; i < this.workers.length; i++) {
|
||||
for (var j = 0; j < this.selectworkersdata.length; j++) {
|
||||
if (this.selectworkersdata[j].label == this.workers[i].username) {
|
||||
this.selectworkersdata.splice(j, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
makeId(index) {
|
||||
for (var j = 0; j < this.options.length; j++) {
|
||||
if (this.options[j].label == this.workers[index].username) {
|
||||
this.workers[index].id = this.options[j].value;
|
||||
}
|
||||
}
|
||||
},
|
||||
manualAllocate(taskId, isRequest) {
|
||||
let row = this.tasksData.find(item => item.id === taskId);
|
||||
if (!row) return;
|
||||
|
||||
if (isRequest) {
|
||||
this.$router.push({
|
||||
path: "/manualallocate/" + taskId + "/" + row.taskName,
|
||||
});
|
||||
} else {
|
||||
request({
|
||||
url: "/allocation/is_assigned?taskId=" + Number(taskId),
|
||||
method: "get",
|
||||
}).then((response) => {
|
||||
if (response.data.data) {
|
||||
this.$router.push({
|
||||
path: "/manualallocate/" + taskId + "/" + row.taskName,
|
||||
});
|
||||
} else if (response.data.status == "401") {
|
||||
this.$alert(response.data.message);
|
||||
this.$router.push({ path: "/login" });
|
||||
} else {
|
||||
this.$notify.error({
|
||||
title: "提示",
|
||||
message: response.data.message + "，" + "请先进行自动分配",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
sinClo({ row, column, rowIndex, columnIndex }) {
|
||||
if (!(columnIndex == 3 && rowIndex == 0)) {
|
||||
return "sinCl";
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
|
||||
background-color: rgb(89, 103, 120) !important;
|
||||
border-color: #304156 !important;
|
||||
}
|
||||
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.el-dropdown-link:hover {
|
||||
color: #66b1ff;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
547
src/components/TaskManagement/manage/UserManage.vue
Normal file
547
src/components/TaskManagement/manage/UserManage.vue
Normal file
@@ -0,0 +1,547 @@
|
||||
<template>
|
||||
<div style="height: (screenHeight-300)+'px'">
|
||||
<div id="buttomContain">
|
||||
<div class="search-container">
|
||||
<el-input
|
||||
style="width: 300px; margin-right: 15px;"
|
||||
placeholder="请输入用户名搜索"
|
||||
v-model="inputUsername"
|
||||
>
|
||||
<i
|
||||
slot="suffix"
|
||||
class="el-input__icon el-icon-search"
|
||||
@click="searchUser()"
|
||||
></i>
|
||||
<i
|
||||
slot="suffix"
|
||||
class="el-input__icon el-icon-circle-close"
|
||||
@click="cancelSearch()"
|
||||
></i>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<el-button
|
||||
id="buttonStyle"
|
||||
size="small"
|
||||
style="margin-top: 20px"
|
||||
@click="adduser1()"
|
||||
>添加用户</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
id="tableStyle"
|
||||
:data="usersData"
|
||||
style="width: 100%"
|
||||
header-cell-class-name="sinCl"
|
||||
>
|
||||
<el-table-column
|
||||
fixed="left"
|
||||
prop="username"
|
||||
label="用户名称"
|
||||
min-width="100"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
fixed="left"
|
||||
prop="realName"
|
||||
label="真实姓名"
|
||||
min-width="100"
|
||||
></el-table-column>
|
||||
<el-table-column prop="role" label="权限" min-width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-select size="small" v-model="scope.row.role" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in idenOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="280" fixed="right" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click.native="EditField(scope.$index)"
|
||||
>确认</el-button
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click.native="deleteField(scope.$index)"
|
||||
>删除</el-button
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click.native="resetPassword(scope.$index)"
|
||||
>重置密码</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="margin-top: 50px">
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:page-count="dataPageNum"
|
||||
@current-change="pageChange"
|
||||
></el-pagination>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
class="taskDialog"
|
||||
title="添加用户"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="dialogVisible"
|
||||
>
|
||||
<div style="text-align: left">
|
||||
<el-form
|
||||
ref="account"
|
||||
:model="account"
|
||||
:rules="rules"
|
||||
label-width="130px"
|
||||
style="margin-top: 20px"
|
||||
>
|
||||
<el-form-item prop="username" label="用户名：">
|
||||
<el-input
|
||||
style="width: 90%"
|
||||
type="text"
|
||||
v-model="account.username"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请输入用户名"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="realName" label="真实姓名：">
|
||||
<el-input
|
||||
style="width: 90%"
|
||||
type="text"
|
||||
v-model="account.realName"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请输入真实姓名"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" label="密码：">
|
||||
<el-input
|
||||
style="width: 90%"
|
||||
type="password"
|
||||
v-model="account.password"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请输入密码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password1" label="确认密码：">
|
||||
<el-input
|
||||
style="width: 90%"
|
||||
type="password"
|
||||
v-model="account.password1"
|
||||
auto-complete="off"
|
||||
:autofocus="true"
|
||||
placeholder="请确认密码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="role" label="权限：">
|
||||
<el-select
|
||||
style="width: 90%"
|
||||
size="small"
|
||||
v-model="account.role"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in idenOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-button id="buttonStyle" size="small" @click="addUser()"
|
||||
>确认</el-button
|
||||
>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ajax as request } from "@/request.js";
|
||||
import md5 from "js-md5";
|
||||
export default {
|
||||
data() {
|
||||
var validatePass = (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请再次输入密码"));
|
||||
} else if (value !== this.account.password) {
|
||||
callback(new Error("两次输入密码不一致!"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var validpassword = (rule, value, callback) => {
|
||||
let reg = /[0-9a-zA-Z]{6,18}/;
|
||||
if (!reg.test(value)) {
|
||||
callback(new Error("密码必须是由6-18位数字和字母组合"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
isSearch: false,
|
||||
currentSearchUser: "",
|
||||
inputUsername: "",
|
||||
dataPageNum: 1,
|
||||
currentPage: 1,
|
||||
account: {
|
||||
username: "",
|
||||
realName: "",
|
||||
password: "",
|
||||
password1: "",
|
||||
role: "Worker",
|
||||
},
|
||||
rules: {
|
||||
username: [
|
||||
{ required: true, message: "请输入用户名", trigger: "blur" },
|
||||
{ min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" },
|
||||
],
|
||||
realName: [
|
||||
{ required: true, message: "请输入真实姓名", trigger: "blur" },
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: "请输入密码", trigger: "blur" },
|
||||
{ validator: validpassword, trigger: "blur" },
|
||||
],
|
||||
password1: [
|
||||
{ required: true, message: "请再次输入密码", trigger: "blur" },
|
||||
{ validator: validatePass, trigger: "blur" },
|
||||
],
|
||||
},
|
||||
dialogVisible: false,
|
||||
screenHeight: document.documentElement.clientHeight,
|
||||
usersData: [],
|
||||
idenOptions: [
|
||||
{
|
||||
value: "Admin",
|
||||
label: "管理员",
|
||||
},
|
||||
{
|
||||
value: "Leader",
|
||||
label: "领导人员",
|
||||
},
|
||||
{
|
||||
value: "Worker",
|
||||
label: "外业人员",
|
||||
},
|
||||
{
|
||||
value: "Operator",
|
||||
label: "工作人员",
|
||||
},
|
||||
{
|
||||
value: "SuperAdmin",
|
||||
label: "超级管理员",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
let that = this;
|
||||
request({
|
||||
url: "/user/all",
|
||||
method: "get",
|
||||
params: {
|
||||
page: 1,
|
||||
},
|
||||
}).then(function (response) {
|
||||
//登录成功获取数据存入usersData
|
||||
if (response.data.success) {
|
||||
that.usersData = response.data.data.users;
|
||||
that.dataPageNum = response.data.data.totalPages;
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
}
|
||||
});
|
||||
},
|
||||
pageChange(val) {
|
||||
let that = this;
|
||||
this.usersData = [];
|
||||
this.currentPage = val;
|
||||
if (this.isSearch) {
|
||||
request({
|
||||
url: "/user/search",
|
||||
method: "post",
|
||||
params: { page: 1, username: that.currentSearchUser },
|
||||
}).then(function (response) {
|
||||
//上传成功
|
||||
if (response.data.success) {
|
||||
that.usersData = response.data.data.users;
|
||||
that.dataPageNum = response.data.data.totalPages;
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
}
|
||||
});
|
||||
} else {
|
||||
request({
|
||||
url: "/user/all",
|
||||
method: "post",
|
||||
params: {
|
||||
page: val,
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.success) {
|
||||
that.usersData = response.data.data.users;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
//重置密码
|
||||
resetPassword(index) {
|
||||
let that = this;
|
||||
this.$confirm("确认重置该用户密码？", "提示", {
|
||||
cancelButtonText: "取消",
|
||||
confirmButtonText: "确认",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
// 调用重置密码接口
|
||||
request({
|
||||
url: "/user/resetPassword",
|
||||
method: "post",
|
||||
params: {
|
||||
id: that.usersData[index].id,
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.success) {
|
||||
that.$notify.success({
|
||||
title: "提示",
|
||||
message: "密码已成功重置为默认密码！",
|
||||
});
|
||||
} else {
|
||||
that.$notify.error({
|
||||
title: "提示",
|
||||
message: response.data.message || "密码重置失败",
|
||||
});
|
||||
}
|
||||
});
|
||||
// 刷新用户列表
|
||||
request({
|
||||
url: "/user/all",
|
||||
method: "post",
|
||||
params: {
|
||||
page: that.currentPage,
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.success) {
|
||||
that.usersData = response.data.data.users;
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
that.$notify.info({
|
||||
title: "提示",
|
||||
message: "已取消操作",
|
||||
});
|
||||
});
|
||||
},
|
||||
deleteField(index) {
|
||||
let that = this;
|
||||
this.$confirm("确认删除？", "提示", {
|
||||
cancelButtonText: "取消",
|
||||
confirmButtonText: "确认",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
request({
|
||||
url: "/user/delete",
|
||||
method: "post",
|
||||
params: {
|
||||
id: that.usersData[index].id,
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.success) {
|
||||
that.$notify.success({
|
||||
title: "提示",
|
||||
message: "删除成功！",
|
||||
});
|
||||
} else {
|
||||
that.$notify.error({
|
||||
title: "提示",
|
||||
message: "删除失败",
|
||||
});
|
||||
}
|
||||
});
|
||||
request({
|
||||
url: "/user/all",
|
||||
method: "post",
|
||||
params: {
|
||||
page: that.currentPage,
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.success) {
|
||||
that.usersData = response.data.data.users;
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$notify.error({
|
||||
title: "提示",
|
||||
message: "删除失败",
|
||||
});
|
||||
});
|
||||
},
|
||||
EditField(index) {
|
||||
let that = this;
|
||||
request({
|
||||
url: "/user/role_change",
|
||||
method: "post",
|
||||
params: {
|
||||
id: that.usersData[index].id,
|
||||
role: that.usersData[index].role,
|
||||
},
|
||||
}).then(function (response) {
|
||||
//上传成功
|
||||
if (response.data.success) {
|
||||
that.$notify.success({
|
||||
title: "提示",
|
||||
message: "提交成功！",
|
||||
});
|
||||
that.init();
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
}
|
||||
});
|
||||
request({
|
||||
url: "/user/all",
|
||||
method: "post",
|
||||
params: {
|
||||
page: that.currentPage,
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.success) {
|
||||
that.usersData = response.data.data.users;
|
||||
}
|
||||
});
|
||||
},
|
||||
cancelSearch() {
|
||||
this.isSearch = false;
|
||||
this.inputUsername = "";
|
||||
},
|
||||
searchUser() {
|
||||
this.isSearch = true;
|
||||
let that = this;
|
||||
this.currentSearchUser = this.inputUsername;
|
||||
request({
|
||||
url: "/user/search",
|
||||
method: "post",
|
||||
params: { page: 1, username: that.currentSearchUser },
|
||||
}).then(function (response) {
|
||||
//上传成功
|
||||
if (response.data.success) {
|
||||
that.usersData = response.data.data.users;
|
||||
that.dataPageNum = response.data.data.totalPages;
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
} else {
|
||||
that.$notify.error({
|
||||
title: "提示",
|
||||
message: "未查找到符合条件的用户！",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
addUser() {
|
||||
let that = this;
|
||||
this.$refs.account.validate((valid) => {
|
||||
if (valid) {
|
||||
let that = this;
|
||||
request({
|
||||
url: "/user/new",
|
||||
method: "post",
|
||||
params: {
|
||||
username: that.account.username,
|
||||
realName: that.account.realName,
|
||||
password: md5(md5(that.account.password)),
|
||||
role: that.account.role,
|
||||
},
|
||||
}).then(function (response) {
|
||||
if (response.data.success) {
|
||||
that.dialogVisible = false;
|
||||
that.$notify.success({
|
||||
title: "提示",
|
||||
message: "添加成功！",
|
||||
});
|
||||
that.init();
|
||||
} else if (response.data.status == "401") {
|
||||
that.$alert(response.data.message);
|
||||
that.$router.push({ path: "/login" });
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
adduser1() {
|
||||
this.dialogVisible = true;
|
||||
this.account = {
|
||||
username: "",
|
||||
realName: "",
|
||||
password: "",
|
||||
password1: "",
|
||||
role: "Worker",
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.el-input__inner {
|
||||
>>> &::placeholder {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
}
|
||||
|
||||
#buttomContain {
|
||||
top: 5px;
|
||||
right: 25px;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.search-container {
|
||||
/* 搜索容器靠左 */
|
||||
}
|
||||
|
||||
.button-container {
|
||||
/* 按钮容器靠右 */
|
||||
}
|
||||
|
||||
#tableStyle {
|
||||
top: 50px;
|
||||
margin-bottom: 30px;
|
||||
height: 600px;
|
||||
}
|
||||
>>> .el-pager li {
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
>>> .el-pagination button {
|
||||
background: #fff !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user