|
@@ -0,0 +1,546 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-form :model="queryParams" ref="queryRef" :inline="true">
|
|
|
+ <el-form-item label="关键字" prop="keywords">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.keywords"
|
|
|
+ placeholder="请输入关键字"
|
|
|
+ clearable
|
|
|
+ style="width: 200px"
|
|
|
+ @keyup.enter="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所属部门" prop="department">
|
|
|
+ <el-tree-select
|
|
|
+ v-model="queryParams.department"
|
|
|
+ :data="deptOptions"
|
|
|
+ :props="{ value: 'id', label: 'label', children: 'children' }"
|
|
|
+ value-key="id"
|
|
|
+ placeholder="请选择所属部门"
|
|
|
+ check-strictly
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="网格类型" prop="listGridCategory">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.listGridCategory"
|
|
|
+ multiple
|
|
|
+ collapse-tags
|
|
|
+ collapse-tags-tooltip
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 240px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in gridCategoryList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="隐患分类" prop="listDangerCategory">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.listDangerCategory"
|
|
|
+ multiple
|
|
|
+ collapse-tags
|
|
|
+ collapse-tags-tooltip
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 240px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in dangerCategoryList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="创建时间">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="dateRangeCreateTime"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ :default-time="[
|
|
|
+ new Date(2000, 1, 1, 0, 0, 0),
|
|
|
+ new Date(2000, 1, 1, 23, 59, 59),
|
|
|
+ ]"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="search" @click="handleQuery"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
+ <el-button icon="Refresh" @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="Plus"
|
|
|
+ @click="handleAdd"
|
|
|
+ >新增</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="success"
|
|
|
+ plain
|
|
|
+ icon="Edit"
|
|
|
+ :disabled="single"
|
|
|
+ @click="handleUpdate"
|
|
|
+ >修改</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ :data="dataList"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ @row-dblclick="handleDetail"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column label="网格名称" align="center" prop="gridName" />
|
|
|
+ <el-table-column label="所属部门" align="center" prop="departmentName" />
|
|
|
+ <el-table-column label="网格类型" align="center" prop="gridCategoryTxt" />
|
|
|
+ <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">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ @click="handleDetail(scope.row)"
|
|
|
+ >详情</el-button>
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ icon="Edit"
|
|
|
+ @click="handleUpdate(scope.row)"
|
|
|
+ >修改</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ v-model:page="queryParams.page"
|
|
|
+ v-model:limit="queryParams.limit"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 添加对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ :title="title"
|
|
|
+ v-model="dialogOpenCreate"
|
|
|
+ width="750px"
|
|
|
+ append-to-body
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="formCrateRef"
|
|
|
+ :model="formCreate"
|
|
|
+ :rules="rulesCreate"
|
|
|
+ label-width="85px"
|
|
|
+ >
|
|
|
+ <el-form-item label="网格名称" prop="gridName">
|
|
|
+ <el-input v-model="formCreate.gridName" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所属部门" prop="listDepartment">
|
|
|
+ <el-cascader
|
|
|
+ v-model="formCreate.listDepartment"
|
|
|
+ :options="deptOptions"
|
|
|
+ :props="{checkStrictly:true,value:'id'}"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="网格类型" prop="gridCategory">
|
|
|
+ <el-select
|
|
|
+ v-model="formCreate.gridCategory"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 240px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in gridCategoryList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="隐患分类" prop="dangerCategory">
|
|
|
+ <el-select
|
|
|
+ v-model="formCreate.dangerCategory"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 240px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in dangerCategoryList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="网格员职责" prop="gridPersonDuty">
|
|
|
+ <el-input v-model="formCreate.gridPersonDuty" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button
|
|
|
+ :loading="createLoading"
|
|
|
+ type="primary"
|
|
|
+ @click="submitCreate"
|
|
|
+ >确 定</el-button>
|
|
|
+ <el-button @click="cancelCreate">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 修改对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ :title="title"
|
|
|
+ v-model="dialogOpenModify"
|
|
|
+ width="750px"
|
|
|
+ append-to-body
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ :disabled="isDetail"
|
|
|
+ ref="formModifyRef"
|
|
|
+ :model="formModify"
|
|
|
+ :rules="rulesModify"
|
|
|
+ label-width="85px"
|
|
|
+ >
|
|
|
+ <el-form-item label="网格名称" prop="gridName">
|
|
|
+ <el-input v-model="formModify.gridName" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所属部门" prop="listDepartment">
|
|
|
+ <el-cascader
|
|
|
+ v-model="formModify.listDepartment"
|
|
|
+ :options="deptOptions"
|
|
|
+ :props="{checkStrictly:true,value:'id'}"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="网格类型" prop="gridCategory">
|
|
|
+ <el-select
|
|
|
+ v-model="formModify.gridCategory"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 240px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in gridCategoryList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="隐患分类" prop="dangerCategory">
|
|
|
+ <el-select
|
|
|
+ v-model="formModify.dangerCategory"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 240px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in dangerCategoryList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态" prop="status">
|
|
|
+ <el-switch v-model="formModify.status" :active-value="1" :inactive-value="0" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="网格员职责" prop="gridPersonDuty">
|
|
|
+ <el-input v-model="formModify.gridPersonDuty" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button
|
|
|
+ v-if="isDetail === false"
|
|
|
+ :loading="modifyLoading"
|
|
|
+ type="primary"
|
|
|
+ @click="submitModify"
|
|
|
+ >确 定</el-button
|
|
|
+ >
|
|
|
+ <el-button @click="cancelModify">{{ cancelModifyTxt }}</el-button>
|
|
|
+ <el-button type="primary" v-if="isDetail" @click="changeModify">编 辑</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<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";
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+
|
|
|
+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,
|
|
|
+ createTimeRange: "",
|
|
|
+ keywords: undefined,
|
|
|
+ listStatus: undefined,
|
|
|
+ createTime: undefined,
|
|
|
+ listGridCategory: [],
|
|
|
+ listDangerCategory: [],
|
|
|
+});
|
|
|
+
|
|
|
+const formCreate = ref({});
|
|
|
+const rulesCreate = ref({
|
|
|
+ gridName: [
|
|
|
+ { required: true, message: "网格名称不能为空", trigger: "blur" },
|
|
|
+ { max: 50, message: "网格名称字符长度不能超过50", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ department: [
|
|
|
+ { required: true, message: "所属部门不能为空", trigger: "blur" },
|
|
|
+ { max: 50, message: "所属部门字符长度不能超过50", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ departmentName: [
|
|
|
+ { required: true, message: "部门名称不能为空", trigger: "blur" },
|
|
|
+ { max: 200, message: "部门名称字符长度不能超过200", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ gridCategory: [{ required: true, message: "网格类型不能为空", trigger: "blur" }],
|
|
|
+ dangerCategory: [{ required: true, message: "隐患分类不能为空", trigger: "blur" }],
|
|
|
+ gridPersonDuty: [{ max: 500, message: "网格员职责字符长度不能超过500", trigger: "blur" }],
|
|
|
+});
|
|
|
+
|
|
|
+const formModify = ref({});
|
|
|
+const rulesModify = ref({
|
|
|
+ gridName: [
|
|
|
+ { required: true, message: "网格名称不能为空", trigger: "blur" },
|
|
|
+ { max: 50, message: "网格名称字符长度不能超过50", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ department: [
|
|
|
+ { required: true, message: "所属部门不能为空", trigger: "blur" },
|
|
|
+ { max: 50, message: "所属部门字符长度不能超过50", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ departmentName: [
|
|
|
+ { required: true, message: "部门名称不能为空", trigger: "blur" },
|
|
|
+ { max: 200, message: "部门名称字符长度不能超过200", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ gridCategory: [{ required: true, message: "网格类型不能为空", trigger: "blur" }],
|
|
|
+ dangerCategory: [{ required: true, message: "隐患分类不能为空", trigger: "blur" }],
|
|
|
+ gridPersonDuty: [{ max: 500, message: "网格员职责字符长度不能超过500", trigger: "blur" }],
|
|
|
+ status: [{ required: true, message: "状态", trigger: "blur" }],
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+/** 查询列表 */
|
|
|
+function getList() {
|
|
|
+ if (
|
|
|
+ dateRangeCreateTime &&
|
|
|
+ dateRangeCreateTime.value &&
|
|
|
+ dateRangeCreateTime.value[0]
|
|
|
+ ) {
|
|
|
+ queryParams.value.createTimeRange = dateRangeCreateTime.value.join(" ~ ");
|
|
|
+ }
|
|
|
+ search(queryParams.value).then((response) => {
|
|
|
+ for(let i=0; i<response.data.list.length; i++) {
|
|
|
+ let item = response.data.list[i];
|
|
|
+ item.departmentName = item.departmentName.replaceAll('#,#', '/').replaceAll('#', '');
|
|
|
+ }
|
|
|
+ dataList.value = response.data.list;
|
|
|
+ total.value = response.data.total;
|
|
|
+ });
|
|
|
+}
|
|
|
+/** 搜索按钮操作 */
|
|
|
+function handleQuery() {
|
|
|
+ queryParams.value.page = 1;
|
|
|
+ getList();
|
|
|
+}
|
|
|
+/** 重置按钮操作 */
|
|
|
+function resetQuery() {
|
|
|
+ dateRangeCreateTime.value = [];
|
|
|
+ proxy.resetForm("queryRef");
|
|
|
+ handleQuery();
|
|
|
+}
|
|
|
+/** 选择条数 */
|
|
|
+function handleSelectionChange(selection) {
|
|
|
+ ids.value = selection.map((item) => item.id);
|
|
|
+ single.value = selection.length != 1;
|
|
|
+ multiple.value = !selection.length;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+/** 取消新增按钮 */
|
|
|
+function cancelCreate() {
|
|
|
+ dialogOpenCreate.value = false;
|
|
|
+ resetCreate();
|
|
|
+}
|
|
|
+/** 新增表单重置 */
|
|
|
+function resetCreate() {
|
|
|
+ formCreate.value = {
|
|
|
+ gridName: undefined,
|
|
|
+ listDepartment: undefined,
|
|
|
+ gridCategory: undefined,
|
|
|
+ dangerCategory: undefined,
|
|
|
+ gridPersonDuty: undefined,
|
|
|
+ };
|
|
|
+ proxy.resetForm("formCrateRef");
|
|
|
+}
|
|
|
+/** 新增按钮 */
|
|
|
+function handleAdd() {
|
|
|
+ resetCreate();
|
|
|
+ dialogOpenCreate.value = true;
|
|
|
+ title.value = "网格信息添加";
|
|
|
+}
|
|
|
+/** 新增提交 */
|
|
|
+function submitCreate() {
|
|
|
+ proxy.$refs["formCrateRef"].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ createLoading.value = true;
|
|
|
+
|
|
|
+ create(formCreate.value)
|
|
|
+ .then((response) => {
|
|
|
+ proxy.$modal.msgSuccess("新增成功");
|
|
|
+ dialogOpenCreate.value = false;
|
|
|
+ getList();
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ createLoading.value = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/** 取消编辑按钮 */
|
|
|
+function cancelModify() {
|
|
|
+ dialogOpenModify.value = false;
|
|
|
+ resetModify();
|
|
|
+}
|
|
|
+/** 编辑表单重置 */
|
|
|
+function resetModify() {
|
|
|
+ formModify.value = {
|
|
|
+ id: undefined,
|
|
|
+ gridName: undefined,
|
|
|
+ listDepartment: undefined,
|
|
|
+ gridCategory: undefined,
|
|
|
+ dangerCategory: undefined,
|
|
|
+ gridPersonDuty: undefined,
|
|
|
+ status: undefined,
|
|
|
+ };
|
|
|
+ proxy.resetForm("formModifyRef");
|
|
|
+}
|
|
|
+/** 详情按钮 */
|
|
|
+function handleDetail(row) {
|
|
|
+ modifyLoading.value = true;
|
|
|
+ resetModify();
|
|
|
+ const id = row.id || ids.value[0];
|
|
|
+ detail(id).then((response) => {
|
|
|
+ isDetail.value = true;
|
|
|
+ modifyLoading.value = false;
|
|
|
+
|
|
|
+ formModify.value = response.data;
|
|
|
+
|
|
|
+ dialogOpenModify.value = true;
|
|
|
+ title.value = "网格信息";
|
|
|
+ cancelModifyTxt.value = "关 闭";
|
|
|
+ });
|
|
|
+}
|
|
|
+/** 详情编辑 */
|
|
|
+function changeModify() {
|
|
|
+ isDetail.value = false;
|
|
|
+ title.value = "修改网格信息";
|
|
|
+}
|
|
|
+/** 修改按钮 */
|
|
|
+function handleUpdate(row) {
|
|
|
+ modifyLoading.value = true;
|
|
|
+ resetModify();
|
|
|
+ const id = row.id || ids.value[0];
|
|
|
+ detail(id).then((response) => {
|
|
|
+ isDetail.value = false;
|
|
|
+ modifyLoading.value = false;
|
|
|
+
|
|
|
+ formModify.value = response.data;
|
|
|
+
|
|
|
+ dialogOpenModify.value = true;
|
|
|
+ title.value = "修改网格信息";
|
|
|
+ cancelModifyTxt.value = "取 消";
|
|
|
+ });
|
|
|
+}
|
|
|
+/** 修改提交 */
|
|
|
+function submitModify() {
|
|
|
+ proxy.$refs["formModifyRef"].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ modifyLoading.value = true;
|
|
|
+
|
|
|
+ modify(formModify.value)
|
|
|
+ .then((response) => {
|
|
|
+ proxy.$modal.msgSuccess("修改成功");
|
|
|
+ dialogOpenModify.value = false;
|
|
|
+ getList();
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ modifyLoading.value = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+/** 查询部门下拉树结构 */
|
|
|
+function getDeptTree() {
|
|
|
+ deptTreeSelect().then(response => {
|
|
|
+ deptOptions.value = response.data;
|
|
|
+ });
|
|
|
+};
|
|
|
+/** 初始化网格类型下拉框数据 */
|
|
|
+function initListGridCategory() {
|
|
|
+ listAllGridCategory().then((response) => {
|
|
|
+ gridCategoryList.value = response.data;
|
|
|
+ });
|
|
|
+}
|
|
|
+/** 初始化隐患分类下拉框数据 */
|
|
|
+function initListDangerCategory() {
|
|
|
+ listAllDangerCategory().then((response) => {
|
|
|
+ dangerCategoryList.value = response.data;
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// 调用初始化部门下拉框数据
|
|
|
+getDeptTree();
|
|
|
+// 调用初始化网格类型下拉框数据
|
|
|
+initListGridCategory();
|
|
|
+// 调用初始化隐患分类下拉框数据
|
|
|
+initListDangerCategory();
|
|
|
+// 调用列表查询
|
|
|
+getList();
|
|
|
+</script>
|