|
|
@@ -137,11 +137,11 @@
|
|
|
<el-table-column label="隐患分类" align="center" prop="dangerCategoryTxt" />
|
|
|
<el-table-column label="创建时间" align="center" prop="createTimeView" />
|
|
|
<el-table-column label="数据创建人" align="center" prop="createByName" />
|
|
|
- <el-table-column label="操作" align="center" width="150" fixed="right" class-name="small-padding fixed-width">
|
|
|
+ <el-table-column label="操作" align="center" width="235" fixed="right" class-name="small-padding fixed-width">
|
|
|
<template #default="scope">
|
|
|
<el-button
|
|
|
link
|
|
|
- type="primary"
|
|
|
+ type="info"
|
|
|
@click="handleDetail(scope.row)"
|
|
|
>详情</el-button>
|
|
|
<el-button
|
|
|
@@ -150,6 +150,12 @@
|
|
|
icon="Edit"
|
|
|
@click="handleUpdate(scope.row)"
|
|
|
>修改</el-button>
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="warning"
|
|
|
+ icon="User"
|
|
|
+ @click="onSetUser(scope.row)"
|
|
|
+ >设置网格员</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
@@ -222,7 +228,7 @@
|
|
|
<template #footer>
|
|
|
<div class="dialog-footer">
|
|
|
<el-button
|
|
|
- :loading="createLoading"
|
|
|
+ :loading="loadingCreate"
|
|
|
type="primary"
|
|
|
@click="submitCreate"
|
|
|
>确 定</el-button>
|
|
|
@@ -294,9 +300,9 @@
|
|
|
<div class="dialog-footer">
|
|
|
<el-button
|
|
|
v-if="isDetail === false"
|
|
|
- :loading="modifyLoading"
|
|
|
+ :loading="loadingSetUser"
|
|
|
type="primary"
|
|
|
- @click="submitModify"
|
|
|
+ @click="submitSetUser"
|
|
|
>确 定</el-button
|
|
|
>
|
|
|
<el-button @click="cancelModify">{{ cancelModifyTxt }}</el-button>
|
|
|
@@ -304,14 +310,100 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 设置网格员对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ :title="title"
|
|
|
+ v-model="dialogOpenSetUser"
|
|
|
+ width="750px"
|
|
|
+ append-to-body
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="formSetUserRef"
|
|
|
+ :model="formSetUser"
|
|
|
+ label-width="100px"
|
|
|
+ >
|
|
|
+ <el-form-item label="部门人员" prop="listUser">
|
|
|
+ <el-tree-select
|
|
|
+ :loading="loadingSetUserDeptListUser"
|
|
|
+ v-model="setUserDeptId"
|
|
|
+ :data="deptOptions"
|
|
|
+ @change="onSetUserDeptChange"
|
|
|
+ :props="{checkStrictly:true,value:'id',label:'label'}"
|
|
|
+ check-strictly
|
|
|
+ :render-after-expand="false"
|
|
|
+ />
|
|
|
+ <el-select
|
|
|
+ v-if="setUserDeptId"
|
|
|
+ v-model="setUserDeptListSelect"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width:120px;margin-left:10px;"
|
|
|
+ @change="onSetUserChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in setUserDeptListUser"
|
|
|
+ :key="item.guid"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.guid"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="已设置网格员" prop="listUser">
|
|
|
+ <span v-for="item in formSetUser.listUser" :key="item.userGuid" class="grid-user-container">
|
|
|
+ <div class="grid-user" :title="item.userealNamerName">{{item.realName}}</div>
|
|
|
+ <span class="grid-user-content">
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="dark"
|
|
|
+ content="删除"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <span class="grid-user-close" @click="onRemoveUser(item.userGuid)">x</span>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="dark"
|
|
|
+ content="点击设置网格管理员"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <span :class="'grid-user-type' + (item.isAdmin===1 ? ' grid-user-admin' : ' grid-user-user')" @click="onChangeIsAdmin(item.userGuid)">{{item.isAdmin===1 ? '管' : '员'}}</span>
|
|
|
+ </el-tooltip>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button
|
|
|
+ :loading="loadingSetUser"
|
|
|
+ type="primary"
|
|
|
+ @click="submitSetUser"
|
|
|
+ >确 定</el-button>
|
|
|
+ <el-button @click="cancelSetUser">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
+<style scoped>
|
|
|
+ .grid-user-container{display:flex;line-height:25px;margin-right:10px;}
|
|
|
+ .grid-user{text-align:center;border:1px solid #53a7ff;color:#000;border-right:none;width:70px;height:25px;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;white-space:nowrap;font-size:12px;line-height:25px;border-top-left-radius:5px;border-bottom-left-radius:5px;}
|
|
|
+ .grid-user-content{min-width:35px;}
|
|
|
+ .grid-user-type{position:absolute;height:25px;width:35px;font-size:11px;padding:0 5px 0 10px;border-top-right-radius:5px;border-bottom-right-radius:5px;color:#fff;cursor:pointer;}
|
|
|
+ .grid-user-close{height:10px;line-height:10px;position:absolute;top:4px;margin-left:25px;z-index:999;color:#fff;cursor:pointer;}
|
|
|
+ .grid-user-admin{background-color:orangered;}
|
|
|
+ .grid-user-user{background-color:#53a7ff;}
|
|
|
+</style>
|
|
|
+
|
|
|
<script setup name="GridIndex">
|
|
|
import { listAllGridCategory } from "@/api/grid/GridCategory";
|
|
|
import { listAllDangerCategory } from "@/api/danger/DangerCategory";
|
|
|
-import { detail, modify, create, search } from "@/api/grid/GridIndex";
|
|
|
+import { detail, modify, create, search, setListPerson, getListPerson } from "@/api/grid/GridIndex";
|
|
|
import { deptTreeSelect } from "@/api/system/user";
|
|
|
+import { listUser4Department } from "@/api/system/dept";
|
|
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
|
|
@@ -319,22 +411,6 @@ const deptOptions = ref(undefined);
|
|
|
const gridCategoryList = ref([]);
|
|
|
const dangerCategoryList = ref([]);
|
|
|
const dataList = ref([]);
|
|
|
-
|
|
|
-const createLoading = ref(false);
|
|
|
-const dialogOpenCreate = ref(false);
|
|
|
-
|
|
|
-const modifyLoading = ref(false);
|
|
|
-const dialogOpenModify = ref(false);
|
|
|
-
|
|
|
-const total = ref(0);
|
|
|
-const dateRangeCreateTime = ref([]);
|
|
|
-const ids = ref([]);
|
|
|
-const single = ref(true);
|
|
|
-const multiple = ref(true);
|
|
|
-const title = ref("");
|
|
|
-const cancelModifyTxt = ref("取 消");
|
|
|
-const isDetail = ref(false);
|
|
|
-
|
|
|
const queryParams = ref({
|
|
|
page: 1,
|
|
|
limit: 10,
|
|
|
@@ -347,6 +423,8 @@ const queryParams = ref({
|
|
|
listDangerCategory: [],
|
|
|
});
|
|
|
|
|
|
+const loadingCreate = ref(false);
|
|
|
+const dialogOpenCreate = ref(false);
|
|
|
const formCreate = ref({});
|
|
|
const rulesCreate = ref({
|
|
|
gridName: [
|
|
|
@@ -366,6 +444,8 @@ const rulesCreate = ref({
|
|
|
gridPersonDuty: [{ max: 500, message: "网格员职责字符长度不能超过500", trigger: "blur" }],
|
|
|
});
|
|
|
|
|
|
+const loadingModify = ref(false);
|
|
|
+const dialogOpenModify = ref(false);
|
|
|
const formModify = ref({});
|
|
|
const rulesModify = ref({
|
|
|
gridName: [
|
|
|
@@ -386,6 +466,27 @@ const rulesModify = ref({
|
|
|
status: [{ required: true, message: "状态", trigger: "blur" }],
|
|
|
});
|
|
|
|
|
|
+const loadingSetUser = ref(false);
|
|
|
+const dialogOpenSetUser = ref(false);
|
|
|
+const formSetUser = ref({
|
|
|
+ id: 0,
|
|
|
+ deptId: undefined,
|
|
|
+ listUser: []
|
|
|
+});
|
|
|
+const setUserDeptId = ref(undefined);
|
|
|
+const loadingSetUserDeptListUser = ref(false);
|
|
|
+const setUserDeptListUser = ref([]);
|
|
|
+const setUserDeptListSelect = ref([]);
|
|
|
+
|
|
|
+const total = ref(0);
|
|
|
+const dateRangeCreateTime = ref([]);
|
|
|
+const ids = ref([]);
|
|
|
+const single = ref(true);
|
|
|
+const multiple = ref(true);
|
|
|
+const title = ref("");
|
|
|
+const cancelModifyTxt = ref("取 消");
|
|
|
+const isDetail = ref(false);
|
|
|
+
|
|
|
|
|
|
|
|
|
/** 查询列表 */
|
|
|
@@ -453,7 +554,7 @@ function handleAdd() {
|
|
|
function submitCreate() {
|
|
|
proxy.$refs["formCrateRef"].validate((valid) => {
|
|
|
if (valid) {
|
|
|
- createLoading.value = true;
|
|
|
+ loadingCreate.value = true;
|
|
|
|
|
|
create(formCreate.value)
|
|
|
.then((response) => {
|
|
|
@@ -462,7 +563,7 @@ function submitCreate() {
|
|
|
getList();
|
|
|
})
|
|
|
.finally(() => {
|
|
|
- createLoading.value = false;
|
|
|
+ loadingCreate.value = false;
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
@@ -489,12 +590,12 @@ function resetModify() {
|
|
|
}
|
|
|
/** 详情按钮 */
|
|
|
function handleDetail(row) {
|
|
|
- modifyLoading.value = true;
|
|
|
+ loadingModify.value = true;
|
|
|
resetModify();
|
|
|
const id = row.id || ids.value[0];
|
|
|
detail(id).then((response) => {
|
|
|
isDetail.value = true;
|
|
|
- modifyLoading.value = false;
|
|
|
+ loadingModify.value = false;
|
|
|
|
|
|
formModify.value = response.data;
|
|
|
|
|
|
@@ -510,12 +611,12 @@ function changeModify() {
|
|
|
}
|
|
|
/** 修改按钮 */
|
|
|
function handleUpdate(row) {
|
|
|
- modifyLoading.value = true;
|
|
|
+ loadingModify.value = true;
|
|
|
resetModify();
|
|
|
const id = row.id || ids.value[0];
|
|
|
detail(id).then((response) => {
|
|
|
isDetail.value = false;
|
|
|
- modifyLoading.value = false;
|
|
|
+ loadingModify.value = false;
|
|
|
|
|
|
formModify.value = response.data;
|
|
|
|
|
|
@@ -528,23 +629,94 @@ function handleUpdate(row) {
|
|
|
function submitModify() {
|
|
|
proxy.$refs["formModifyRef"].validate((valid) => {
|
|
|
if (valid) {
|
|
|
- modifyLoading.value = true;
|
|
|
+ loadingModify.value = true;
|
|
|
|
|
|
modify(formModify.value)
|
|
|
- .then((response) => {
|
|
|
- proxy.$modal.msgSuccess("修改成功");
|
|
|
- dialogOpenModify.value = false;
|
|
|
- getList();
|
|
|
- })
|
|
|
- .finally(() => {
|
|
|
- modifyLoading.value = false;
|
|
|
- });
|
|
|
+ .then((response) => {
|
|
|
+ proxy.$modal.msgSuccess("修改成功");
|
|
|
+ dialogOpenModify.value = false;
|
|
|
+ getList();
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ loadingModify.value = false;
|
|
|
+ });
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
+/** 设置网格员按钮 */
|
|
|
+function onSetUser(row) {
|
|
|
+ dialogOpenSetUser.value = true;
|
|
|
+ formSetUser.value = {
|
|
|
+ id: row.id,
|
|
|
+ deptId: undefined,
|
|
|
+ listUser: [
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ // 获取现有网格员列表
|
|
|
+ getListPerson(row.id)
|
|
|
+ .then((response) => {
|
|
|
+ formSetUser.value.listUser = response.data;
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ loadingSetUser.value = false;
|
|
|
+ });
|
|
|
+}
|
|
|
+/** 设置网格员提交 */
|
|
|
+function submitSetUser() {
|
|
|
+ loadingSetUser.value = true;
|
|
|
+
|
|
|
+ setListPerson(formSetUser.value)
|
|
|
+ .then((response) => {
|
|
|
+ proxy.$modal.msgSuccess("设置成功");
|
|
|
+ dialogOpenSetUser.value = false;
|
|
|
+ getList();
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ loadingSetUser.value = false;
|
|
|
+ });
|
|
|
+}
|
|
|
+/** 设置网格员取消 */
|
|
|
+function cancelSetUser() {
|
|
|
+ dialogOpenSetUser.value = false;
|
|
|
+}
|
|
|
+/** 设置网格员，部门选择变化 */
|
|
|
+function onSetUserDeptChange(value) {
|
|
|
+ loadingSetUserDeptListUser.value = true;
|
|
|
+ loadingSetUser.value = true;
|
|
|
+
|
|
|
+ listUser4Department(value)
|
|
|
+ .then((response) => {
|
|
|
+ setUserDeptListUser.value = response.data;
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ loadingSetUserDeptListUser.value = false;
|
|
|
+ loadingSetUser.value = false;
|
|
|
+ });
|
|
|
+}
|
|
|
+/** 设置网格员，人员选择变化 */
|
|
|
+function onSetUserChange(value) {
|
|
|
+ console.log('listUser: ' + JSON.stringify(formSetUser.value.listUser));
|
|
|
+ if (formSetUser.value.listUser.filter(c => c.userGuid === value).length > 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ console.log('allUser: ' + JSON.stringify(setUserDeptListUser.value));
|
|
|
+ let findList = setUserDeptListUser.value.filter(c => c.guid === value);
|
|
|
+ formSetUser.value.listUser.push({
|
|
|
+ userGuid: value,
|
|
|
+ realName: findList[0].name,
|
|
|
+ isAdmin: 0,
|
|
|
+ deptId: findList[0].deptId,
|
|
|
+ deptGuid: findList[0].deptGuid,
|
|
|
+ deptName: findList[0].deptName,
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
/** 查询部门下拉树结构 */
|
|
|
function getDeptTree() {
|
|
|
deptTreeSelect().then(response => {
|
|
|
@@ -563,6 +735,20 @@ function initListDangerCategory() {
|
|
|
dangerCategoryList.value = response.data;
|
|
|
});
|
|
|
}
|
|
|
+function onChangeIsAdmin(guid) {
|
|
|
+ let findList = formSetUser.value.listUser.filter(c => c.userGuid === guid);
|
|
|
+ if (!findList || findList == null || findList.length == 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ findList[0].isAdmin = (findList[0].isAdmin === 1 ? 0 : 1);
|
|
|
+}
|
|
|
+function onRemoveUser(guid) {
|
|
|
+ let findList = formSetUser.value.listUser.filter(c => c.userGuid === guid);
|
|
|
+ if (!findList || findList == null || findList.length == 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ formSetUser.value.listUser = formSetUser.value.listUser.filter(c => c.userGuid != guid);
|
|
|
+}
|
|
|
|
|
|
|
|
|
|
lin.liu