|
@@ -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,99 @@
|
|
|
</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
|
|
|
+ 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.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="已设置网格员" prop="listUser">
|
|
|
+ <span v-for="item in formSetUser.listUser" :key="item.guid" class="grid-user-container">
|
|
|
+ <div class="grid-user" :title="item.name">{{item.name}}</div>
|
|
|
+ <span class="grid-user-content">
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="dark"
|
|
|
+ content="删除"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <span class="grid-user-close" @click="onRemoveUser(item.guid)">x</span>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="dark"
|
|
|
+ content="点击设置网格管理员"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <span :class="'grid-user-type' + (item.isAdmin ? ' grid-user-admin' : ' grid-user-user')" @click="onChangeIsAdmin(item.guid)">{{item.isAdmin ? '管' : '员'}}</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 { deptTreeSelect } from "@/api/system/user";
|
|
|
+import { listUser4Department } from "@/api/system/dept";
|
|
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
|
@@ -319,22 +410,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 +422,8 @@ const queryParams = ref({
|
|
|
listDangerCategory: [],
|
|
|
});
|
|
|
|
|
|
+const loadingCreate = ref(false);
|
|
|
+const dialogOpenCreate = ref(false);
|
|
|
const formCreate = ref({});
|
|
|
const rulesCreate = ref({
|
|
|
gridName: [
|
|
@@ -366,6 +443,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 +465,26 @@ 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 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 +552,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 +561,7 @@ function submitCreate() {
|
|
|
getList();
|
|
|
})
|
|
|
.finally(() => {
|
|
|
- createLoading.value = false;
|
|
|
+ loadingCreate.value = false;
|
|
|
});
|
|
|
}
|
|
|
});
|
|
@@ -489,12 +588,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 +609,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,21 +627,76 @@ 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: [
|
|
|
+ ]
|
|
|
+};
|
|
|
+}
|
|
|
+/** 设置网格员提交 */
|
|
|
+function submitSetUser() {
|
|
|
+ loadingSetUser.value = true;
|
|
|
+
|
|
|
+ modify(formSetUser.value)
|
|
|
+ .then((response) => {
|
|
|
+ proxy.$modal.msgSuccess("设置成功");
|
|
|
+ dialogOpenSetUser.value = false;
|
|
|
+ getList();
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ loadingSetUser.value = false;
|
|
|
+ });
|
|
|
+}
|
|
|
+/** 设置网格员取消 */
|
|
|
+function cancelSetUser() {
|
|
|
+ dialogOpenSetUser.value = false;
|
|
|
+}
|
|
|
+/** 设置网格员,部门选择变化 */
|
|
|
+function onSetUserDeptChange(value) {
|
|
|
+ console.log(value);
|
|
|
+ listUser4Department(value)
|
|
|
+ .then((response) => {
|
|
|
+ setUserDeptListUser.value = response.data;
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ loadingSetUser.value = false;
|
|
|
+ });
|
|
|
+}
|
|
|
+/** 设置网格员,人员选择变化 */
|
|
|
+function onSetUserChange(value) {
|
|
|
+ console.log(value);
|
|
|
+ console.log(formSetUser.value.listUser);
|
|
|
+ if (formSetUser.value.listUser.filter(c => c.guid === value).length > 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let findList = setUserDeptListUser.value.filter(c => c.value === value);
|
|
|
+ console.log(findList);
|
|
|
+ formSetUser.value.listUser.push({
|
|
|
+ guid: value,
|
|
|
+ name: findList[0].name,
|
|
|
+ isAdmin: false
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
|
|
|
|
|
|
/** 查询部门下拉树结构 */
|
|
@@ -563,6 +717,20 @@ function initListDangerCategory() {
|
|
|
dangerCategoryList.value = response.data;
|
|
|
});
|
|
|
}
|
|
|
+function onChangeIsAdmin(guid) {
|
|
|
+ let findList = formSetUser.value.listUser.filter(c => c.guid === guid);
|
|
|
+ if (!findList || findList == null || findList.length == 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ findList[0].isAdmin = !findList[0].isAdmin;
|
|
|
+}
|
|
|
+function onRemoveUser(guid) {
|
|
|
+ let findList = formSetUser.value.listUser.filter(c => c.guid === guid);
|
|
|
+ if (!findList || findList == null || findList.length == 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ formSetUser.value.listUser = formSetUser.value.listUser.filter(c => c.guid != guid);
|
|
|
+}
|
|
|
|
|
|
|
|
|
|