From 62f17cb0f48d7e5f5866abbb3f6ed69116138d22 Mon Sep 17 00:00:00 2001
From: panyuyi <panyuyi@datametatech.com>
Date: Tue, 27 Feb 2024 17:26:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=B7=AF=E5=BE=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../maintenance/maintenanceManage/index.vue   | 347 ++++++++
 .../planManagement/index.vue                  |   3 +-
 .../runManage/superVisionInspetion/index.vue  |   3 +
 .../superVisionInspetion/planManage/index.vue | 801 ++++++++++++++++++
 4 files changed, 1153 insertions(+), 1 deletion(-)
 create mode 100644 src/views/dike/runManage/maintenance/maintenanceManage/index.vue
 create mode 100644 src/views/dike/runManage/superVisionInspetion/index.vue
 create mode 100644 src/views/dike/runManage/superVisionInspetion/planManage/index.vue

diff --git a/src/views/dike/runManage/maintenance/maintenanceManage/index.vue b/src/views/dike/runManage/maintenance/maintenanceManage/index.vue
new file mode 100644
index 0000000..ecf5f64
--- /dev/null
+++ b/src/views/dike/runManage/maintenance/maintenanceManage/index.vue
@@ -0,0 +1,347 @@
+<!-- 维修养护管理页 -->
+<template>
+  <div class="patrol-manage-page">
+    <div class="top-title">维修养护管理</div>
+    <div class="table-box">
+      <div class="top-search">
+        <span>维养计划名称：</span>
+        <el-input
+          class="search-input"
+          v-model="searchInput"
+          placeholder="请输入堤防名称"
+        />
+        <span>堤防类型：</span>
+        <el-button
+          class="!ml-10"
+          type="success"
+          @click="getTableData(searchInput)"
+          >搜索</el-button
+        >
+        <el-button @click="resetSearch()">重置</el-button>
+      </div>
+      <el-table class="mt-16" height="625" :data="tableData" border>
+        <el-table-column type="index" align="center" label="序号" width="80" />
+        <el-table-column prop="dikeName" align="center" label="维养计划名称" />
+        <el-table-column prop="dikeName" align="center" label="堤防名称" />
+        <el-table-column prop="dikeCode" align="center" label="具体地点" />
+        <el-table-column prop="dikeCode" align="center" label="维修养护内容" />
+        <el-table-column prop="dikeCode" align="center" label="国补" />
+        <el-table-column prop="dikeCode" align="center" label="自筹" />
+        <el-table-column prop="lastTime" align="center" label="创建时间" />
+        <el-table-column prop="lastTime" align="center" label="更新时间" />
+        <el-table-column prop="operate" align="center" label="操作">
+          <template slot-scope="scope">
+            <el-button
+              style="margin-right: 16px"
+              @click="handleSet(scope.row)"
+              type="text"
+              size="small"
+              >查看</el-button
+            >
+            <el-button @click="handleGoPlan(scope.row)" type="text" size="small"
+              >编辑</el-button
+            >
+            <el-button
+              @click="handleGoRecord(scope.row)"
+              type="text"
+              size="small"
+              >巡查记录</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        background
+        class="pagination"
+        style="margin-top: 16px; margin-right: 16px; float: right"
+        :current-page="pageData.pageNum"
+        :page-sizes="pageData.pageSizes"
+        layout="total, prev, pager, next, sizes, jumper"
+        :total="pageData.total"
+        @size-change="getTableData()"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 弹窗 -->
+    <el-dialog
+      title="巡查项目配置"
+      @close="dialogVisible = false"
+      :visible.sync="dialogVisible"
+      width="520px"
+    >
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="100px"
+      >
+        <el-form-item
+          label-width="120px"
+          label="日常巡查项目"
+          prop="checkings[0].xcId"
+        >
+          <el-select
+            filterable
+            remote
+            :remote-method="(query) => handleGetRemoteProjectListData(0, query)"
+            @focus="handleGetRemoteProjectListData(0, '')"
+            v-model="ruleForm.checkings[0].xcId"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in projectList0"
+              :label="item.name"
+              :value="item.id"
+              :key="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label-width="120px"
+          label="定期巡查项目"
+          prop="checkings[1].xcId"
+        >
+          <el-select
+            filterable
+            remote
+            :remote-method="(query) => handleGetRemoteProjectListData(1, query)"
+            @focus="handleGetRemoteProjectListData(1, '')"
+            v-model="ruleForm.checkings[1].xcId"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in projectList1"
+              :label="item.name"
+              :value="item.id"
+              :key="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label-width="120px"
+          label="特别巡查项目"
+          prop="checkings[2].xcId"
+        >
+          <el-select
+            filterable
+            remote
+            :remote-method="(query) => handleGetRemoteProjectListData(2, query)"
+            @focus="handleGetRemoteProjectListData(2, '')"
+            v-model="ruleForm.checkings[2].xcId"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in projectList2"
+              :label="item.name"
+              :value="item.id"
+              :key="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="resetForm">取 消</el-button>
+        <el-button size="mini" type="primary" @click="submitForm"
+          >保存</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getDikeProjectList, postProjectChecking } from "@/api/dike";
+import { postDFInspectionProjectList } from "@/api/management";
+
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      pageData: {
+        pageNum: 1,
+        pageSize: 10,
+        total: 0,
+      },
+      searchInput: "",
+      dikeTypeList: [
+        {
+          label: "全部",
+          value: "",
+        },
+      ], // 堤防类型列表
+      dikeType: "",
+      tableData: [],
+      ruleForm: {
+        dikeCode: "",
+        checkings: [
+          {
+            type: 0,
+            label: "日常检查",
+            xcId: "",
+          },
+          {
+            type: 1,
+            label: "定期检查",
+            xcId: "",
+          },
+          {
+            type: 2,
+            label: "特别检查",
+            xcId: "",
+          },
+        ],
+      },
+      projectList0: [], // 对应type===0的日常巡查项目
+      projectList1: [], // 对应type===1的日常巡查项目
+      projectList2: [], // 对应type===2的日常巡查项目
+      rules: {
+        ["checkings[0].xcId"]: [
+          { required: true, message: "请选择", trigger: "change" },
+        ],
+        ["checkings[1].xcId"]: [
+          { required: true, message: "请选择", trigger: "change" },
+        ],
+        ["checkings[2].xcId"]: [
+          { required: true, message: "请选择", trigger: "change" },
+        ],
+      },
+    };
+  },
+  created() {
+    this.getDicts("embankment_type").then((response) => {
+      this.dikeTypeList = response.data;
+    });
+  },
+  mounted() {
+    this.getTableData();
+  },
+  methods: {
+    // 获取列表信息
+    getTableData() {
+      getDikeProjectList({
+        pageNum: this.pageData.pageNum,
+        pageSize: this.pageData.pageSize,
+        data: {
+          dikeType: this.dikeType || "",
+          dikeName: this.searchInput || "",
+        },
+      }).then((res) => {
+        if (res) {
+          this.tableData = res.records;
+          this.pageData.total = res.total;
+        }
+      });
+    },
+    // 重置搜索条件
+    resetSearch() {
+      this.searchInput = "";
+      this.dikeType = "";
+      this.getTableData();
+    },
+    handleGoPlan(row) {
+      this.$router.push({
+        path: "inspectionPlan",
+        query: {
+          dikeCode: row.dikeCode,
+          dikeName: row.dikeName,
+        },
+      });
+    },
+    handleGoRecord(row) {
+      this.$router.push({
+        path: "inspectionRecords",
+        query: {
+          dikeCode: row.dikeCode,
+          dikeName: row.dikeName,
+        },
+      });
+    },
+    // 请求项目列表
+    initProjectList(type, query) {
+      postDFInspectionProjectList({
+        data: {
+          timeView: {
+            timeField: "create_time",
+          },
+          type,
+        },
+        cv: {
+          name: "name",
+          type: "like",
+          value: query,
+        },
+        pageSize: 20,
+        pageNum: 1,
+      }).then((res) => {
+        if (res) {
+          this[`projectList${type}`] = res.records;
+        }
+      });
+    },
+    // 请求项目列表数据
+    handleGetRemoteProjectListData(type, query) {
+      this.initProjectList(type, query);
+    },
+    // 配置项目
+    handleSet(row) {
+      // this.initProjectList();
+      this.dialogVisible = true;
+      this.ruleForm.dikeCode = row.dikeCode;
+    },
+    resetForm() {
+      this.$refs.ruleForm.resetFields();
+      this.dialogVisible = false;
+    },
+    submitForm() {
+      console.log("表单 >>> ", this.ruleForm);
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          postProjectChecking(this.ruleForm).then((res) => {
+            console.log("res >>>>>  ", res);
+            if (res?.success) {
+              this.$message.success("配置成功");
+              this.dialogVisible = false;
+            }
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.patrol-manage-page {
+  width: 100%;
+  min-height: calc(100vh - 56px);
+  padding-left: 24px;
+  .top-title {
+    height: 40px;
+    background-color: white;
+    display: flex;
+    padding-left: 16px;
+    align-items: center;
+    font-weight: 600;
+  }
+
+  .table-box {
+    width: 100%;
+    min-height: calc(100vh - 56px - 64px);
+    margin-top: 24px;
+    padding: 16px;
+    background-color: white;
+
+    .top-search {
+      margin-bottom: 8px;
+
+      .search-input {
+        width: 202px;
+        margin-right: 10px;
+      }
+    }
+
+    .table {
+      height: calc(680px - 34px);
+    }
+  }
+}
+</style>
diff --git a/src/views/dike/runManage/pestAnimalControl/planManagement/index.vue b/src/views/dike/runManage/pestAnimalControl/planManagement/index.vue
index 71f1535..31d61f0 100644
--- a/src/views/dike/runManage/pestAnimalControl/planManagement/index.vue
+++ b/src/views/dike/runManage/pestAnimalControl/planManagement/index.vue
@@ -16,6 +16,7 @@ export default {
     return {
       paramsData: {
         name: "",
+        type: null,
         dikeName: "",
         selectLevel: "",
         selectType: "",
@@ -376,7 +377,7 @@ export default {
         />
         <span style="margin-left: 10px">防治类型：</span>
         <el-select v-model="paramsData.type" placeholder="请选择">
-          <el-option label="全部" value="3" />
+          <el-option label="全部" :value="null" />
           <el-option
             v-for="item in controlType"
             :label="item.dictLabel"
diff --git a/src/views/dike/runManage/superVisionInspetion/index.vue b/src/views/dike/runManage/superVisionInspetion/index.vue
new file mode 100644
index 0000000..98240ae
--- /dev/null
+++ b/src/views/dike/runManage/superVisionInspetion/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>
diff --git a/src/views/dike/runManage/superVisionInspetion/planManage/index.vue b/src/views/dike/runManage/superVisionInspetion/planManage/index.vue
new file mode 100644
index 0000000..8ed8db2
--- /dev/null
+++ b/src/views/dike/runManage/superVisionInspetion/planManage/index.vue
@@ -0,0 +1,801 @@
+<!-- 监督检查办法管理-堤防 -->
+<script>
+import {
+  putDFPreventionControlPlan,
+  deleteDFMaintenancePlan,
+  postDFNewPreventionControlPlan,
+  postDFPreventionControlPlanList,
+  getDFPreventionControlPlan,
+  listUser,
+} from "@/api/management";
+import { listDikeInfo } from "@/api/yg/dikeInfo";
+
+export default {
+  name: "InspectionItems",
+  data() {
+    return {
+      paramsData: {
+        name: "",
+        type: null,
+        dikeName: "",
+        selectLevel: "",
+        selectType: "",
+      },
+      dialogVisible: false,
+      prohibitEditing: false,
+      dikeTypeList: [],
+      personnelList: [], // 人员列表
+      patrolType: [], // 提醒周期类型
+      workMonth: [], // 工作月份
+      embankmentList: [], //堤防列表
+      dikeLevel: [], // 堤防级别列表
+      controlType: [], // 防治类型
+      tableData: [], // 检查列表
+      pageData: {
+        pageNum: 1, // 当前页
+        pageSize: 10, // 请求数量
+        pageSizes: [10, 20, 50, 100],
+        total: 0, // 总数量
+      },
+      ruleForm: {
+        dikeCode: "",
+        dikeName: "",
+        name: "",
+        type: "",
+        instruction: "",
+        month: "",
+        details: [],
+        cycleType: "",
+        frequency: "",
+        operators: [],
+        isReminder: 1,
+        otherConfig: {
+          selectUser: [],
+          week: "",
+          day: "",
+        },
+        reminderTime: "",
+      },
+      rules: {
+        dikeCode: [
+          { required: true, message: "请选择堤防名称", trigger: "blur" },
+        ],
+        name: [
+          { required: true, message: "请输入防治计划名称", trigger: "blur" },
+          { max: 100, message: "名称最长为100个字符", trigger: "blur" },
+        ],
+        type: [
+          { required: true, message: "请选择防治类型", trigger: "change" },
+        ],
+        instruction: [
+          { required: true, message: "请输入防治说明", trigger: "change" },
+        ],
+        month: [
+          { required: true, message: "请选择工作月份", trigger: "change" },
+        ],
+        cycleType: [
+          { required: true, message: "请选择提醒日期", trigger: "change" },
+        ],
+        frequency: [
+          { required: true, message: "请输入次数", trigger: "change" },
+        ],
+        "otherConfig.selectUser": [
+          { required: true, message: "请选择责任人", trigger: "change" },
+        ],
+        "otherConfig.week": [
+          { required: true, message: "请选择星期", trigger: "change" },
+        ],
+        "otherConfig.day": [
+          { required: true, message: "请输入", trigger: "change" },
+        ],
+        reminderTime: [
+          { required: true, message: "请选择提醒时间", trigger: "change" },
+        ],
+      },
+    };
+  },
+  watch: {
+    dialogVisible(newVal, oldVal) {
+      if (oldVal) {
+        this.prohibitEditing = false;
+      }
+    },
+  },
+  methods: {
+    // 获取堤防等级
+    resolveDikeGrad(dikeGrad) {
+      return (
+        this.dikeLevel.find((v) => v.dictValue === dikeGrad)?.dictLabel ||
+        dikeGrad
+      );
+    },
+    // 获取堤防类型
+    resolveDikeType(dikeType) {
+      return (
+        this.dikeTypeList.find((v) => v.dictValue == dikeType)?.dictLabel ||
+        dikeType
+      );
+    },
+    // 获取防治类型
+    resolveType(type) {
+      return (
+        this.controlType.find((v) => v.dictValue == type)?.dictLabel || type
+      );
+    },
+    // 打开新增弹窗
+    openAddDialog() {
+      // 获取字典数据
+      this.getDicts("xc_w_month").then((res) => {
+        this.workMonth = res.data;
+      });
+      this.getDicts("xs_cycle_type").then((res) => {
+        this.patrolType = res.data;
+      });
+      if (this.ruleForm.details.length <= 0) {
+        this.ruleForm.details.push({
+          constructionDate: "",
+          jobContent: "",
+          planDays: 0,
+        });
+      }
+      this.dialogVisible = true;
+      setTimeout(() => {
+        this.$refs.ruleForm.resetFields();
+      }, 0);
+    },
+    // 删除对应防治计划
+    deleteTableItem(row) {
+      deleteDFMaintenancePlan(row.id).then((res) => {
+        this.getTableData();
+        this.$message.success("删除成功");
+      });
+    },
+    // 删除对应工作内容
+    deleteWorkTableItem(id) {
+      const index = this.workTable.findIndex((item) => item.id === id);
+      if (index !== -1) {
+        this.workTable.splice(index, 1);
+      }
+    },
+    // 搜索用户
+    searchUser(e) {
+      listUser({
+        data: {
+          timeView: {
+            timeField: "create_time",
+          },
+        },
+        cv: {
+          name: "nickName",
+          type: "like",
+          value: e,
+        },
+        pageSize: 100,
+        pageNum: 1,
+      }).then((res) => {
+        this.personnelList = res.records;
+      });
+    },
+    // 查看或编辑计划详情
+    viewOrEditPlanDetails(row, edit = false) {
+      if (!edit) {
+        this.prohibitEditing = true;
+      }
+      getDFPreventionControlPlan(row.id).then((res) => {
+        this.dialogVisible = true;
+        setTimeout(() => {
+          this.ruleForm = res.data;
+          this.ruleForm.reminderCycle = res.data.instruction + res.data.month;
+        }, 30);
+      });
+    },
+    changeOtherConfigSelectUser(idsArr) {
+      if (idsArr?.length) {
+        this.ruleForm.operators =
+          this.personnelList
+            .filter((v) => idsArr.includes(v.nickName))
+            ?.map((v) => ({
+              name: v.nickName,
+              uid: v.id,
+            })) || [];
+      } else {
+        this.ruleForm.operators = [];
+      }
+    },
+    // 保存维修计划
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.ruleForm.cycleType = parseFloat(this.ruleForm.cycleType);
+          this.ruleForm.frequency = parseFloat(this.ruleForm.frequency);
+          this.ruleForm.month = parseFloat(this.ruleForm.month);
+          if (this.ruleForm.id) {
+            putDFPreventionControlPlan(this.ruleForm).then(() => {
+              this.getTableData();
+              this.dialogVisible = false;
+              this.$message({
+                message: "保存成功",
+                type: "success",
+              });
+            });
+          } else {
+            postDFNewPreventionControlPlan(this.ruleForm).then(() => {
+              console.log("保存成功");
+              this.getTableData();
+              this.dialogVisible = false;
+              this.$message({
+                message: "保存成功",
+                type: "success",
+              });
+            });
+          }
+        } else {
+          console.log("校验不通过");
+          return false;
+        }
+      });
+    },
+    // 重置校验
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.dialogVisible = false;
+    },
+    // 关闭dialog
+    handleClose(ruleForm = "ruleForm") {
+      console.log("关闭");
+      this.$refs[ruleForm].resetFields();
+      this.ruleForm = {
+        dikeCode: "",
+        dikeName: "",
+        name: "",
+        type: "",
+        instruction: "",
+        month: "",
+        details: [],
+        cycleType: "",
+        isReminder: true,
+        selectUser: [],
+        otherConfig: {
+          selectUser: [],
+          week: "",
+          day: "",
+        },
+        week: 1,
+        date: 1,
+        reminderTime: "",
+      };
+    },
+    // 添加工作项
+    addWorkItem() {
+      this.ruleForm.details.push({
+        jobContent: "",
+        constructionDate: "",
+        planDays: "",
+      });
+    },
+    // 获取列表数据
+    getTableData() {
+      postDFPreventionControlPlanList({
+        data: {
+          timeView: {
+            timeField: "create_time",
+          },
+          name: this.paramsData.name,
+          type: this.paramsData.type,
+          dikeName: this.paramsData.dikeName,
+          dikeGrad: this.paramsData.dikeGrad,
+          dikeType: this.paramsData.dikeType,
+        },
+        cv: {
+          name: "name",
+          type: "like",
+          value: this.name,
+        },
+        params: {
+          orderBy: "create_time",
+          sort: "desc",
+        },
+        pageSize: this.pageData.pageSize,
+        pageNum: this.pageData.pageNum,
+      }).then((res) => {
+        if (res) {
+          this.tableData = res.records;
+          this.pageData.total = res.total;
+        }
+      });
+    },
+    // 重置搜索
+    resetSearch() {
+      this.name = "";
+      this.selectStatus = "2";
+      this.getTableData();
+    },
+    // 打开地图
+    handleOpenMap() {},
+    // 打开详情
+    handleOpenDetail() {},
+    // 获取堤防列表信息
+    getEmbData() {
+      listDikeInfo({
+        pageNum: 1,
+        pageSize: 20,
+        ids: null,
+        data: {
+          embankmentName: null,
+          endStationNumber: null,
+          embankmentType: null,
+        },
+        // 排序方式
+        params: {
+          // 按哪个字段排序
+          orderBy: "create_time",
+          // desc降序，升序asc
+          sort: "desc",
+        },
+      }).then((res) => {
+        this.embankmentList = res?.records || [];
+      });
+    },
+    handleChangeDike(value) {
+      console.log("value >>>>>  ", value);
+      this.ruleForm.name = this.ruleForm.dikeCode;
+      let res = this.embankmentList.find((v) => v.dikeCode === value);
+      console.log("res >>>>>  ", res);
+      this.ruleForm.dikeName = res?.dikeName;
+      // this.dikeDetailsDialog.id = res?.id || ''
+    },
+  },
+  created() {
+    this.getDicts("embankment_type").then((response) => {
+      this.dikeTypeList = response.data;
+    });
+  },
+  mounted() {
+    // 获取列表数据
+    this.getTableData();
+    this.getEmbData();
+    this.getDicts("embankment_level").then((res) => {
+      this.dikeLevel = res.data;
+    });
+    this.getDicts("dh_jh_type").then((res) => {
+      this.controlType = res.data;
+    });
+  },
+};
+</script>
+
+<template>
+  <div class="body slider-right">
+    <div class="top-title">基础信息管理</div>
+    <div class="table-box">
+      <el-button
+        class="search-btn"
+        style="margin-right: 16px; margin-bottom: 8px; float: right"
+        type="success"
+        @click="openAddDialog()"
+        >新增</el-button
+      >
+      <el-table class="table" height="640" :data="tableData" border>
+        <el-table-column type="index" align="center" label="序号" width="100" />
+        <el-table-column prop="name" align="center" label="防治计划名称" />
+        <el-table-column prop="type" align="center" label="防治类型">
+          <template #default="{ row }">{{ resolveType(row.type) }}</template>
+        </el-table-column>
+        <el-table-column prop="effDate" align="center" label="计划时间" />
+        <el-table-column
+          prop="createTime"
+          align="center"
+          sortable
+          label="创建时间"
+        />
+        <el-table-column prop="address" align="center" label="操作">
+          <template slot-scope="scope">
+            <el-button
+              @click="viewOrEditPlanDetails(scope.row)"
+              type="text"
+              size="small"
+              >查看</el-button
+            >
+            <el-button
+              @click="viewOrEditPlanDetails(scope.row, true)"
+              type="text"
+              size="small"
+              >编辑</el-button
+            >
+            <!-- <el-popconfirm
+              confirm-button-text="确定"
+              cancel-button-text="取消"
+              icon="el-icon-info"
+              icon-color="red"
+              title="确定删除吗？"
+              @confirm="deleteTableItem(scope.row)"
+            >
+              <el-button
+                style="color: red"
+                type="text"
+                size="small"
+                slot="reference"
+                >删除</el-button
+              >
+            </el-popconfirm> -->
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        background
+        class="pagination"
+        style="margin-top: 16px; margin-right: 16px; float: right"
+        :current-page="pageData.pageNum"
+        :page-sizes="pageData.pageSizes"
+        layout="total, prev, pager, next, sizes, jumper"
+        :total="pageData.total"
+        @size-change="getTableData()"
+      >
+      </el-pagination>
+    </div>
+    <!-- 弹窗 -->
+    <el-dialog
+      title="新增/编辑防治计划"
+      @close="handleClose"
+      :visible.sync="dialogVisible"
+      :close-on-click-modal="false"
+      width="720px"
+    >
+      <div style="display: flex; margin-bottom: 16px">
+        <div
+          style="
+            width: 5px;
+            height: 16px;
+            background-color: #31a08e;
+            margin-right: 8px;
+          "
+        ></div>
+        <span style="font-weight: 600">基础信息</span>
+      </div>
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="100px"
+      >
+        <el-form-item label-width="120px" label="堤防名称" prop="dikeCode">
+          <!-- <el-input style="width: 202px;" v-model="ruleForm.dikeCode" placeholder="请输入" :disabled="prohibitEditing" /> -->
+          <el-select
+            v-model="ruleForm.dikeCode"
+            placeholder="请选择"
+            @change="handleChangeDike"
+            :disabled="prohibitEditing"
+          >
+            <el-option
+              v-for="item in embankmentList"
+              :label="item.dikeName"
+              :value="item.dikeCode"
+              :key="item.id"
+            ></el-option>
+          </el-select>
+          <el-button
+            :disabled="!ruleForm.dikeCode"
+            class="!m-6"
+            type="success"
+            size="small"
+            @click="handleOpenDetail"
+            >详情</el-button
+          >
+          <el-button
+            :disabled="!ruleForm.dikeCode"
+            class="!ml-6"
+            type="success"
+            size="small"
+            @click="handleOpenMap"
+            >打开地图</el-button
+          >
+        </el-form-item>
+        <div style="display: flex">
+          <el-form-item label-width="120px" label="防治计划名称" prop="name">
+            <el-input
+              style="width: 202px"
+              v-model="ruleForm.name"
+              placeholder="请输入"
+              :disabled="prohibitEditing"
+            />
+          </el-form-item>
+          <el-form-item label-width="120px" label="防治类型" prop="type">
+            <el-select
+              v-model="ruleForm.type"
+              placeholder="请选择"
+              :disabled="prohibitEditing"
+            >
+              <el-option
+                v-for="item in controlType"
+                :key="item.id"
+                :label="item.dictLabel"
+                :value="item.dictValue"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+        <el-form-item label-width="120px" label="防治说明" prop="instruction">
+          <el-input
+            v-model="ruleForm.instruction"
+            type="textarea"
+            placeholder=" 请输入"
+            :disabled="prohibitEditing"
+          />
+        </el-form-item>
+        <div style="display: flex; margin-bottom: 16px">
+          <div
+            style="
+              width: 5px;
+              height: 16px;
+              background-color: #31a08e;
+              margin-right: 8px;
+            "
+          ></div>
+          <span style="font-weight: 600">工作内容</span>
+        </div>
+        <el-form-item label-width="120px" label="工作月份" prop="month">
+          <el-select
+            v-model="ruleForm.month"
+            placeholder="请选择"
+            :disabled="prohibitEditing"
+          >
+            <el-option
+              v-for="item in workMonth"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+              :key="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-table
+          style="margin-bottom: 22px"
+          max-height="330"
+          :data="ruleForm.details"
+          border
+        >
+          <el-table-column
+            type="index"
+            align="center"
+            label="序号"
+            width="50"
+          />
+          <el-table-column prop="jobContent" align="center" label="工作内容">
+            <template slot-scope="scope">
+              <el-input
+                v-model="scope.row.jobContent"
+                placeholder="请输入工作内容"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="constructionDate"
+            align="center"
+            label="施工日期"
+          >
+            <template slot-scope="scope">
+              <el-input
+                v-model="scope.row.constructionDate"
+                placeholder="请输入施工日期"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="planDays"
+            align="center"
+            label="计划工日"
+            width="80"
+          >
+            <template slot-scope="scope">
+              <el-input
+                v-model="scope.row.planDays"
+                placeholder="请输入计划工日"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="操作" width="100">
+            <template slot-scope="scope">
+              <el-button
+                style="margin-right: 9px"
+                type="text"
+                size="small"
+                @click="addWorkItem"
+                >添加</el-button
+              >
+              <el-popconfirm
+                confirm-button-text="确定"
+                cancel-button-text="取消"
+                icon="el-icon-info"
+                icon-color="red"
+                title="确定删除吗？"
+                @confirm="deleteWorkTableItem(scope.row.id)"
+              >
+                <el-button
+                  v-if="ruleForm.details.length > 1"
+                  style="color: red"
+                  type="text"
+                  size="small"
+                  slot="reference"
+                  >删除</el-button
+                >
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div style="display: flex">
+          <el-form-item label-width="120px" label="提醒周期" prop="frequency">
+            <el-input
+              style="width: 90px"
+              v-model="ruleForm.frequency"
+              placeholder="请输入"
+            />
+            /次
+          </el-form-item>
+          <el-form-item label-width="10px" prop="cycleType">
+            <el-select
+              style="width: 90px"
+              v-model="ruleForm.cycleType"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in patrolType"
+                :label="item.dictLabel"
+                :value="item.dictValue"
+                :key="item.id"
+              ></el-option>
+            </el-select>
+            /日期
+          </el-form-item>
+          <el-form-item
+            label-width="100px"
+            label="责任人"
+            prop="otherConfig.selectUser"
+          >
+            <el-select
+              v-model="ruleForm.otherConfig.selectUser"
+              multiple
+              filterable
+              remote
+              :remote-method="searchUser"
+              value-key="id"
+              placeholder="请输入关键词搜索用户"
+              prop="selectUser"
+              @change="changeOtherConfigSelectUser"
+            >
+              <el-option
+                v-for="item in personnelList"
+                :key="item.id"
+                :label="item.nickName"
+                :value="item.nickName"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+        <div style="display: flex">
+          <el-form-item label-width="120px" label="消息提醒" prop="isReminder">
+            <el-switch
+              v-model="ruleForm.isReminder"
+              :active-value="1"
+              :inactive-value="0"
+              active-color="#31a08e"
+              inactive-color="#dcdfe6"
+            >
+            </el-switch>
+          </el-form-item>
+          <div style="display: flex; flex-direction: column">
+            <el-form-item
+              v-if="ruleForm.isReminder && ruleForm.cycleType === '1'"
+              label-width="120px"
+              label="提醒时间"
+              prop="otherConfig.week"
+            >
+              <el-radio-group v-model="ruleForm.otherConfig.week">
+                <el-radio :label="1">星期一</el-radio>
+                <el-radio :label="2">星期二</el-radio>
+                <el-radio :label="3">星期三</el-radio>
+                <el-radio :label="4">星期四</el-radio>
+                <el-radio :label="5">星期五</el-radio>
+                <el-radio :label="6">星期六</el-radio>
+                <el-radio :label="7">星期日</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              v-if="ruleForm.isReminder && ruleForm.cycleType === '0'"
+              label-width="120px"
+              label="提醒时间"
+              prop="otherConfig.day"
+            >
+              <div>
+                每月<el-input
+                  style="width: 202px"
+                  v-model="ruleForm.otherConfig.day"
+                />号
+              </div>
+            </el-form-item>
+            <el-form-item
+              label-width="120px"
+              :label="ruleForm.cycleType === '2' ? '提醒时间' : ''"
+              prop="reminderTime"
+            >
+              <el-time-picker
+                v-model="ruleForm.reminderTime"
+                value-format="yyyy-MM-dd hh:mm:ss"
+                placeholder="选择时间"
+              />
+            </el-form-item>
+          </div>
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="resetForm('ruleForm')">取 消</el-button>
+        <el-button
+          v-if="!prohibitEditing"
+          size="mini"
+          type="primary"
+          @click="submitForm('ruleForm')"
+          >保存</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped lang="less">
+.body {
+  width: 100%;
+  min-height: calc(100vh - 56px);
+  padding-left: 24px;
+
+  .top-title {
+    height: 40px;
+    background-color: white;
+    display: flex;
+    padding-left: 16px;
+    align-items: center;
+    font-weight: 600;
+  }
+
+  .table-box {
+    width: 100%;
+    min-height: calc(100vh - 56px - 64px);
+    margin-top: 24px;
+    padding: 16px;
+    background-color: white;
+
+    .top-search {
+      margin-bottom: 8px;
+
+      .search-input {
+        width: 202px;
+        margin-right: 10px;
+      }
+    }
+
+    .table {
+      height: calc(680px - 34px);
+    }
+  }
+
+  .search-btn {
+    margin-left: 10px;
+    background-color: #37b29e;
+    border: none;
+
+    &:hover {
+      background-color: #5ac6b9;
+    }
+
+    &:active {
+      background-color: #2b8070;
+    }
+  }
+}
+
+/deep/.el-input__count {
+  height: 15px;
+  line-height: 15px;
+  margin-right: 10px;
+  margin-bottom: -4px;
+}
+</style>