From 3f1aa5c95cdf0000c38fe0fadfc3524fee4cc735 Mon Sep 17 00:00:00 2001
From: panyuyi <panyuyi@datametatech.com>
Date: Wed, 12 Jun 2024 09:39:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=A4=A7=E5=86=99?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../inspectionPlan/components/PlanDetail.vue  | 619 ++++++++++++++++++
 1 file changed, 619 insertions(+)
 create mode 100644 src/views/dike/runManage/enginerring/inspectionPlan/components/PlanDetail.vue

diff --git a/src/views/dike/runManage/enginerring/inspectionPlan/components/PlanDetail.vue b/src/views/dike/runManage/enginerring/inspectionPlan/components/PlanDetail.vue
new file mode 100644
index 0000000..6fcbedd
--- /dev/null
+++ b/src/views/dike/runManage/enginerring/inspectionPlan/components/PlanDetail.vue
@@ -0,0 +1,619 @@
+<template>
+  <div class="route-detail-page">
+    <el-form
+      ref="formRef"
+      label-position="top"
+      :model="formData"
+      :rules="rules"
+      label-width="120px"
+    >
+      <div class="form-row-title">堤防选择</div>
+      <div class="flex items-start">
+        <el-form-item label="选择堤防" prop="dikeName">
+          <el-select
+            :disabled="!canEdit"
+            class="w-240"
+            size="small"
+            remote
+            filterable
+            reserve-keyword
+            :remote-method="handleGetRemoteDikeMethod"
+            @focus="handleGetRemoteDikeMethod"
+            @change="handleChangeDike"
+            v-model="formData.dikeName"
+            placeholder="请选择堤防"
+          >
+            <el-option
+              v-for="item in dikeList"
+              :key="item.id"
+              :label="item.dikeName"
+              :value="item.dikeName"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="堤防类型" prop="dikeType" class="ml-24">
+          <el-select
+            v-model="formData.dikeType"
+            :disabled="true"
+            class="w-240"
+            size="small"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in projectTypeOptions"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="堤防巡查责任人" prop="dutyHolder" class="ml-24">
+          <el-input
+            class="w-240"
+            size="small"
+            v-model="formData.dutyHolder"
+            :disabled="true"
+            placeholder=""
+          ></el-input>
+        </el-form-item>
+      </div>
+      <div class="form-row-title">巡查计划设置</div>
+      <div class="flex items-start">
+        <el-form-item label="巡查计划名称" prop="name">
+          <el-input
+            :disabled="!canEdit"
+            class="w-240"
+            size="small"
+            v-model="formData.name"
+            placeholder="请输入名称"
+            maxlength="50"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="巡查计划类型" prop="type" class="ml-24">
+          <div class="w-240">
+            <el-radio-group :disabled="!canEdit" v-model="formData.type">
+              <el-radio label="0">年度计划</el-radio>
+              <el-radio label="1">月度计划</el-radio>
+            </el-radio-group>
+          </div>
+        </el-form-item>
+        <el-form-item label="巡查提醒" prop="cycleType" class="ml-24">
+          <el-select
+            :disabled="!canEdit"
+            size="small"
+            class="w-100"
+            v-model="formData.cycleType"
+            placeholder="请选择"
+            @change="handleChangeRemindType"
+          >
+            <el-option label="每月提醒" value="1"> </el-option>
+            <el-option label="每周提醒" value="2"> </el-option>
+            <el-option label="每日提醒" value="3"> </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label=""
+          style="padding-top: 46px"
+          prop="otherConfig.reminderDays"
+          v-if="formData.cycleType == '1'"
+        >
+          <el-select
+            :disabled="!canEdit"
+            size="small"
+            multiple
+            v-model="formData.otherConfig.reminderDays"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in 31"
+              :key="item"
+              :label="`${item}日`"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label=""
+          style="padding-top: 46px"
+          v-else-if="formData.cycleType == '2'"
+          prop="otherConfig.reminderWeeks"
+        >
+          <el-checkbox-group
+            :disabled="!canEdit"
+            size="small"
+            v-model="formData.otherConfig.reminderWeeks"
+          >
+            <el-checkbox-button :label="1">周一</el-checkbox-button>
+            <el-checkbox-button :label="2">周二</el-checkbox-button>
+            <el-checkbox-button :label="3">周三</el-checkbox-button>
+            <el-checkbox-button :label="4">周四</el-checkbox-button>
+            <el-checkbox-button :label="5">周五</el-checkbox-button>
+            <el-checkbox-button :label="6">周六</el-checkbox-button>
+            <el-checkbox-button :label="7">周日</el-checkbox-button>
+          </el-checkbox-group>
+        </el-form-item>
+
+        <el-form-item label="" style="padding-top: 46px" prop="reminderTime">
+          <el-time-picker
+            :disabled="!canEdit"
+            size="small"
+            v-model="formData.reminderTime"
+            value-format="2024-06-05 HH:mm:ss"
+            placeholder="选择时间"
+          >
+          </el-time-picker>
+        </el-form-item>
+      </div>
+      <div>
+        <el-form-item label="巡查频率" prop="frequency">
+          <el-input
+            :disabled="!canEdit"
+            class="w-240"
+            type="number"
+            size="small"
+            v-model="formData.frequency"
+            placeholder="请输入"
+            :max="999"
+            :min="0"
+          ></el-input>
+          <span class="ml-4">次/月</span>
+        </el-form-item>
+      </div>
+      <div class="flex items-start">
+        <el-form-item label="附件上传" prop="files">
+          <el-upload
+            :disabled="!canEdit"
+            class=""
+            action="#"
+            :http-request="handleUpload"
+            :before-upload="beforeUpload"
+            :before-remove="beforeRemove"
+            accept=".docx,.doc,.pdf"
+            :limit="5"
+            :file-list="filesList"
+          >
+            <el-button size="small" type="primary">点击上传</el-button>
+            <div slot="tip" class="el-upload__tip">
+              文件支持docx、doc、pdf，文件大小100M以内，文件数量不能超过5份
+            </div>
+          </el-upload>
+        </el-form-item>
+      </div>
+      <div
+        class="plan-list-item"
+        v-for="(item, index) in formData.contents"
+        :key="index"
+      >
+        <div class="flex justify-between">
+          <div style="color: #262626; font-size: 16px; font-weight: 700">
+            子项{{ index + 1 }}
+          </div>
+          <el-popconfirm
+            v-if="formData.contents.length > 1"
+            :disabled="!canEdit"
+            title="确定删除？"
+            @confirm="handleDelPlanItem(index)"
+          >
+            <el-button slot="reference" type="danger" plain size="small"
+              >删除</el-button
+            >
+          </el-popconfirm>
+        </div>
+        <div class="flex items-start flex-wrap">
+          <el-form-item label="子项名称" prop="subItemName">
+            <el-input
+              :disabled="!canEdit"
+              class="w-240"
+              size="small"
+              v-model="item.name"
+              placeholder="请输入名称"
+              maxlength="50"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label="计划周期(起止)"
+            prop="planDateTimeArr"
+            class="ml-24"
+          >
+            <el-date-picker
+              :disabled="!canEdit"
+              size="small"
+              v-model="item.planDateTimeArr"
+              type="daterange"
+              range-separator="至"
+              value-format="yyyy-MM-dd"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="巡查人员" prop="operator" class="ml-24">
+            <el-select
+              :disabled="!canEdit"
+              class="w-240"
+              v-model="item.operator"
+              multiple
+              filterable
+              remote
+              :remote-method="searchUser"
+              value-key="id"
+              placeholder="请输入关键词搜索用户"
+            >
+              <el-option
+                v-for="item in personnelList"
+                :key="item.id"
+                :label="item.name"
+                :value="item"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+        <el-form-item label="巡查范围" prop="scope">
+          <!-- <el-radio></el-radio> -->
+          <div>暂无数据</div>
+        </el-form-item>
+        <el-form-item label="巡查路线(推荐)" prop="lineId">
+          <el-select
+            :disabled="!canEdit"
+            class="w-240"
+            v-model="item.lineId"
+            filterable
+            remote
+            :remote-method="handleRemoteLineData"
+            value-key="id"
+            placeholder="请输入关键词搜索路线"
+          >
+            <el-option
+              v-for="item in lineList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="巡查重点检查部位和内容" prop="remark">
+          <el-input
+            :disabled="!canEdit"
+            size="small"
+            type="textarea"
+            :rows="3"
+            v-model="item.remark"
+            :maxlength="500"
+          ></el-input>
+        </el-form-item>
+      </div>
+      <div
+        class="flex justify-start !mt-16"
+        v-if="canEdit && formData.contents.length <= 50"
+      >
+        <el-button
+          class="w-120"
+          type="primary"
+          @click="handleAddNewPlan"
+          icon="el-icon-plus"
+          >新增子项</el-button
+        >
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+import { listUser } from "@/api/management";
+import {
+  getProjectCheckingLineRoute,
+  getRunProjectList,
+  postProjectCheckingPlan,
+  putProjectCheckingPlan,
+  getProjectCheckingPlanDetails,
+} from "@/api/dike";
+
+import { uploadFileData } from "@/api/system/upload";
+
+export default {
+  props: {
+    id: String,
+    canEdit: Boolean,
+  },
+
+  data() {
+    return {
+      formData: {
+        dikeName: "",
+        dikeCode: "",
+        dikeType: "",
+        operator: "",
+        cycleType: "1",
+        reminderTime: "",
+        files: [],
+        otherConfig: {
+          options: {},
+          reminderDays: [],
+          reminderWeeks: [],
+        },
+        contents: [
+          {
+            planDateTimeArr: [],
+            startDate: "",
+            endDate: "",
+            operator: [],
+            scope: "",
+            lineId: "",
+            remark: "",
+            status: "0",
+          },
+        ],
+      },
+      rules: {
+        dikeName: [
+          { required: true, message: "请选择堤防", trigger: "change" },
+        ],
+        name: [{ required: true, message: "请输入计划名称", trigger: "blur" }],
+        type: [
+          { required: true, message: "请选择计划类型", trigger: "change" },
+        ],
+        cycleType: [
+          { required: true, message: "请选择类型", trigger: "change" },
+        ],
+        "otherConfig.reminderDays": [
+          { required: true, message: "请选择", trigger: "change" },
+        ],
+        "otherConfig.reminderWeeks": [
+          { required: true, message: "请选择", trigger: "change" },
+        ],
+        reminderTime: [
+          { required: true, message: "请选择", trigger: "change" },
+        ],
+        frequency: [{ required: true, message: "请输入", trigger: "blur" }],
+      },
+      filesList: [],
+      dikeList: [],
+      projectTypeOptions: [],
+      personnelList: [], // 人员列表
+      lineList: [], // 线路列表
+    };
+  },
+  watch: {
+    id: {
+      handler(val) {
+        if (val) {
+          this.getDetail();
+        }
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    this.searchUser();
+    this.getDicts("embankment_type").then((response) => {
+      this.projectTypeOptions = response.data;
+    });
+  },
+  methods: {
+    getDetail() {
+      getProjectCheckingPlanDetails(this.id).then((res) => {
+        console.log("res >>>>>  ", res);
+        this.formData = res.data;
+        this.formData.contents?.forEach((v) => {
+          if (v.startDate && v.endDate) {
+            v.planDateTimeArr = [v.startDate, v.endDate];
+          }
+        });
+        this.filesList = res.data.files.map((item) => {
+          return {
+            name: item,
+            url: item,
+          };
+        });
+        this.handleRemoteLineData(res.data.name);
+      });
+    },
+    handleChangeDike() {
+      let res = this.dikeList.find(
+        (v) => v.dikeName === this.formData.dikeName
+      );
+      this.formData.dikeCode = res.dikeCode;
+      this.formData.dikeType = res.dikeType;
+      this.formData.dikeName = res.dikeName;
+      this.formData.dutyHolders = res.dutyHolders;
+    },
+    handleGetRemoteDikeMethod(query) {
+      console.log("query >>>>>  ", query);
+      getRunProjectList({
+        pageSize: 10,
+        pageNum: 1,
+        cv: {
+          name: "dikeName",
+          type: "like",
+          value: query,
+        },
+      }).then((res) => {
+        if (res) {
+          this.dikeList = res.records;
+        }
+      });
+    },
+    // 上传前
+    beforeUpload(e) {
+      if (this.formData.files?.length >= 5) {
+        this.$message.warning("最多上传5份");
+        return false;
+      }
+      return true;
+    },
+    handleUpload(e) {
+      const { file } = e;
+      let fData = new FormData();
+      fData.append("file", file);
+      uploadFileData(fData)
+        .then((res) => {
+          this.formData.files?.push(res.url);
+        })
+        .catch((err) => {
+          console.log("err >>>>>  ", err);
+        });
+    },
+    beforeRemove(file, fileList) {
+      if (this.file) {
+        return this.$confirm(`确定移除 ${file.name}？`);
+      }
+    },
+    handleChangeRemindType() {
+      this.formData.remindTime = "";
+      this.formData.remindDay = [];
+    },
+    handleAddNewPlan() {
+      this.formData.contents.push({
+        planDateTimeArr: [],
+        startDate: "",
+        endDate: "",
+        operator: [],
+        scope: "",
+        lineId: "",
+        remark: "",
+        status: "0",
+      });
+    },
+    handleDelPlanItem(index) {
+      this.formData.contents.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.map((item) => {
+          return {
+            id: item.id,
+            name: item.nickName,
+            uid: item.uuid,
+          };
+        });
+      });
+    },
+    handleRemoteLineData(e) {
+      getProjectCheckingLineRoute({
+        data: {
+          name: e,
+        },
+        pageNum: 1,
+        pageSize: 50,
+      }).then((res) => {
+        this.lineList = res.records;
+      });
+    },
+    submit(reset) {
+      console.log("提交表单 >>>> ", this.formData);
+      return new Promise((r, j) => {
+        this.$refs.formRef.validate((valid) => {
+          if (valid) {
+            this.formData.contents.forEach((item) => {
+              item.startDate = item.planDateTimeArr[0]
+                ? item.planDateTimeArr[0] + " 00:00:00"
+                : "";
+              item.endDate = item.planDateTimeArr[1]
+                ? item.planDateTimeArr[1] + " 23:59:59"
+                : "";
+            });
+            (this.id ? putProjectCheckingPlan : postProjectCheckingPlan)({
+              id: this.id || null,
+              ...this.formData,
+            })
+              .then((res) => {
+                this.$message.success("提交成功");
+                if (reset) {
+                  this.reset();
+                }
+                r();
+              })
+              .catch(() => {
+                j();
+              });
+          } else {
+            j();
+          }
+        });
+      });
+    },
+    reset() {
+      this.formData = {
+        dikeName: "",
+        dikeCode: "",
+        dikeType: "",
+        operator: "",
+        cycleType: "1",
+        reminderTime: "",
+        files: [],
+        otherConfig: {
+          options: {},
+          reminderDays: [],
+          reminderWeeks: [],
+        },
+        contents: [
+          {
+            planDateTimeArr: [],
+            startDate: "",
+            endDate: "",
+            operator: [],
+            scope: "",
+            lineId: "",
+            remark: "",
+          },
+        ],
+      };
+
+      this.$refs.formRef.resetFields();
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.route-detail-page {
+  width: 100%;
+  max-width: 1232px;
+  padding: 16px;
+  padding-bottom: 78px;
+  border-radius: 6px;
+  .form-row-title {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    border-left: 4px solid #36b29e;
+    padding-left: 8px;
+  }
+  .w-100 {
+    width: 100px !important;
+  }
+  .w-240 {
+    width: 240px !important;
+  }
+
+  .plan-list-item {
+    position: relative;
+    border: 1px solid #ebeef5;
+    border-radius: 4px;
+    padding: 16px;
+    margin-top: 16px;
+  }
+
+  .del-btn {
+    cursor: pointer;
+    z-index: 1;
+    width: 18px;
+    font-size: 18px;
+  }
+}
+</style>