shuili-vue/src/views/dike/runManage/enginerring/inspectionPlan/index.vue

<!-- 巡查计划管理-堤防 -->
<script>
import {
  postDFInspectionPlanlist,
  postDFInspectionPlan,
  putDFInspectionPlan,
  postDFInspectionProjectList,
  getDFInspectionPlan,
  deleteDFInspectionPlan,
  listUser,
} from "@/api/management";

import { uploadFileData } from "@/api/system/upload";

export default {
  name: "InspectionItems",
  data() {
    return {
      searchInput: "",
      dialogVisible: false,
      patrolType: [], // 巡查周期类型
      personnelList: [], // 人员列表
      examType: [], // 检查类型
      tableData: [], // 检查列表
      patrolTableData: [], // 巡查项目列表
      pageData: {
        pageNum: 1, // 当前页
        pageSize: 10, // 请求数量
        pageSizes: [10, 20, 50, 100],
        total: 0, // 总数量
      },
      ruleForm: {
        dikeCode: this.$route.query.dikeCode || "",
        name: "",
        type: "",
        xcId: "",
        frequency: "",
        cycleType: "",
        isReminder: false,
        reminderTime: "",
        operators: [],
        files: [], //依据
        otherConfig: {
          week: "",
          time: "",
          selectUser: [],
        },
      },
      rules: {
        name: [
          { required: true, message: "请输入计划名称", trigger: "blur" },
          { max: 50, message: "名称最长为50个字符", trigger: "blur" },
        ],
        type: [
          { required: true, message: "请选择巡查类型", trigger: "change" },
        ],
        xcId: [
          { required: true, message: "请选择巡查项目名称", trigger: "change" },
        ],
        cycleType: [
          { required: true, message: "请选择巡查周期", trigger: "change" },
        ],
        isReminder: [
          { required: true, message: "请选择消息提醒", trigger: "change" },
        ],
        "otherConfig.time": [
          { required: true, message: "请选择检查时间", trigger: "change" },
        ],
        reminderTime: [
          { required: true, message: "请选择提醒时间", trigger: "change" },
        ],
        "otherConfig.selectUser": [
          { required: true, message: "请选择责任人", trigger: "change" },
        ],
      },
    };
  },
  computed: {
    disabledUpload() {
      return this.ruleForm?.files?.length >= 9;
    },
  },
  methods: {
    handleCurrentPageChange(page) {
      this.pageData.pageNum = page;
      this.getTableData();
    },
    handlePageSizeChange(pageSize) {
      this.pageData.pageSize = pageSize;
      this.getTableData();
    },
    // 编辑巡查项目
    editTableItem(row) {
      getDFInspectionPlan(row.id).then((res) => {
        // 遍历用户数据让select组件渲染选项
        if (res.data.otherConfig.selectUser) {
          this.personnelList = [];
          res.data.otherConfig.selectUser.forEach((element) => {
            listUser({
              data: {
                timeView: {
                  timeField: "create_time",
                },
              },
              cv: {
                name: "nickName",
                type: "like",
                value: element.nickName,
              },
              pageSize: 10,
              pageNum: 1,
            }).then((res) => {
              this.personnelList.push(res.records[0]);
            });
          });
        }
        this.ruleForm = res.data;
        this.ruleForm.type = res.data.type.toString();
        if (res.data.cycleType) {
          this.ruleForm.cycleType = res.data.cycleType.toString();
        }
        this.changePatrolType(res.data, false);
        this.dialogVisible = true;
      });
    },
    // 删除对应巡查项目
    deleteTableItem(row) {
      deleteDFInspectionPlan(row.id).then((res) => {
        this.getTableData();
        this.$message.success("删除成功");
      });
    },
    // 路线设置
    routeSetting(row) {
      this.$router.push({
        path: "patrolRouteSettings",
        query: { id: row.id, name: row.name, editor: true },
      });
    },
    // 保存巡查项目
    submitForm(formName) {
      console.log("保存 >>> ", this.ruleForm);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let user = [];
          this.ruleForm.otherConfig.selectUser.forEach((element) => {
            let a = {
              name: element.nickName,
              uid: element.id,
            };
            user.push(a);
          });
          this.ruleForm.operators = user;
          if (this.ruleForm.id) {
            putDFInspectionPlan(this.ruleForm).then((res) => {
              this.getTableData();
              this.dialogVisible = false;
              this.$message.success("更新成功");
            });
          } else {
            postDFInspectionPlan(this.ruleForm).then((res) => {
              this.getTableData();
              this.dialogVisible = false;
              this.$message.success("添加成功");
            });
          }
        } else {
          console.log("校验不通过");
          return false;
        }
      });
    },
    // 更改巡查类型
    changePatrolType(ruleForm, reset) {
      if (reset) {
        this.$set(ruleForm, "xcId", "");
      }
      postDFInspectionProjectList({
        data: {
          timeView: {
            timeField: "create_time",
          },
          type: ruleForm.type,
        },
        cv: {
          name: "name",
          type: "like",
        },
        pageSize: 999,
        pageNum: 1,
      }).then((res) => {
        this.patrolTableData = res.records;
      });
    },
    // 搜索用户
    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;
      });
    },
    // 关闭dialog
    closeDialog(ruleForm = "ruleForm") {
      console.log("触发关闭dialog", ruleForm);
      this.$refs[ruleForm].resetFields();
      this.patrolTableData = [];
      this.ruleForm = {
        dikeCode: this.$route.query.dikeCode || "",
        name: "",
        type: "",
        xcId: "",
        frequency: "",
        cycleType: "",
        isReminder: false,
        reminderTime: "",
        operators: [],
        otherConfig: {
          week: "",
          time: "",
          selectUser: [],
        },
      };
    },
    // 获取数据
    getTableData(search) {
      postDFInspectionPlanlist({
        data: {
          timeView: {
            timeField: "create_time",
          },
          dikeCode: this.$route.query.dikeCode,
        },
        cv: {
          name: "name",
          type: "like",
          value: search,
        },
        pageSize: this.pageData.pageSize,
        pageNum: this.pageData.pageNum,
      }).then((res) => {
        if (res) {
          this.tableData = res.records;
          this.pageData.total = res.total;
        }
        console.log("🚀res1🚀", res);
      });
    },
    // 上传前
    beforeUpload(e) {
      console.log("beforeUpload >>>>>  ", e);
      if (this.ruleForm.files?.length >= 9) {
        return false;
      }
      return true;
    },
    handleUpload(e) {
      const { file } = e;
      let formData = new FormData();
      formData.append("file", file);
      uploadFileData(formData)
        .then((res) => {
          console.log("上传结果 >>>>>  ", res);
          this.ruleForm.files.push(res.url);
        })
        .catch((err) => {
          console.log("err >>>>>  ", err);
        });
    },
    handleDelFile(_url, index) {
      this.ruleForm.files.splice(index, 1);
    },
    // 重置搜索
    resetSearch() {
      this.searchInput = "";
      this.getTableData();
    },
  },
  created() {
    this.getDicts("embankment_type").then((response) => {
      this.embankmentTypeOptions = response.data;
    });
    this.getDicts("xs_classfy").then((res) => {
      if (res.data && Array.isArray(res.data)) {
        res.data.forEach((element) => {
          element.dictValue = element.dictValue;
        });
        this.examType = res.data;
      }
    });
    this.getDicts("xs_cycle_type").then((res) => {
      this.patrolType = res.data;
    });
  },
  mounted() {
    // 获取列表数据
    this.getTableData();
  },
};
</script>

<template>
  <div class="slider-right">
    <div class="top-title">巡查管理</div>
    <div class="table-box">
      <div class="font-18 mb-12 font-700">
        {{ $route.query.dikeName }}-巡查计划
      </div>
      <div class="flex justify-between">
        <div class="top-search">
          <span>计划名称：</span>
          <el-input
            class="search-input"
            v-model="searchInput"
            placeholder="请输入计划名称"
          />
          <el-button
            class="search-btn"
            type="success"
            @click="getTableData(searchInput)"
            >搜索</el-button
          >
          <el-button @click="resetSearch()">重置</el-button>
        </div>
        <el-button
          class="search-btn"
          style="margin-right: 16px; margin-bottom: 8px; float: right"
          type="success"
          @click="dialogVisible = true"
          >添加</el-button
        >
      </div>
      <el-table height="625" :data="tableData" border>
        <el-table-column type="index" align="center" label="序号" width="100" />
        <el-table-column prop="name" align="center" label="计划名称" />
        <el-table-column align="center" label="巡查类型">
          <template slot-scope="scope">
            <span v-if="examType.length > 0">{{
              examType.find((item) => item.dictValue == scope.row.type)
                .dictLabel || ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          align="center"
          sortable
          label="最近巡查时间"
        />
        <el-table-column
          prop="createTime"
          align="center"
          sortable
          label="创建时间"
        />
        <el-table-column
          prop="updateTime"
          align="center"
          sortable
          label="更新时间"
        />
        <el-table-column prop="address" align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              style="margin-right: 16px"
              @click="editTableItem(scope.row)"
              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; margin-right: 16px"
                type="text"
                size="small"
                slot="reference"
                >删除</el-button
              >
            </el-popconfirm>
            <el-button @click="routeSetting(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="(e) => handlePageSizeChange(e)"
        @current-change="(e) => handleCurrentPageChange(e)"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="新增/编辑巡查计划"
      @close="closeDialog"
      :visible.sync="dialogVisible"
      width="680px"
    >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item label-width="120px" label="计划名称" prop="name">
          <el-input style="width: 202px" v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label-width="120px" label="巡查类型" prop="type">
          <el-select
            v-model="ruleForm.type"
            placeholder="请选择巡查类型"
            @change="changePatrolType(ruleForm, true)"
          >
            <el-option
              v-for="item in examType"
              :label="item.dictLabel"
              :value="item.dictValue"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="120px" label="巡查项目名称" prop="xcId">
          <el-select v-model="ruleForm.xcId" placeholder="请选择巡查项目名称">
            <el-option
              v-for="item in patrolTableData"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="ruleForm.type == 0"
          label-width="120px"
          label="巡查周期"
          prop="cycleType"
        >
          <el-input
            style="width: 202px"
            v-model="ruleForm.frequency"
          ></el-input>
          /次
          <el-select 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
          v-else
          label-width="120px"
          label="检查日期"
          prop="otherConfig.time"
        >
          <el-date-picker
            v-model="ruleForm.otherConfig.time"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label-width="120px" label="消息提醒" prop="isReminder">
          <el-switch
            v-model="ruleForm.isReminder"
            active-color="#31a08e"
            inactive-color="#dcdfe6"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label-width="120px" label="提醒时间" prop="reminderTime">
          <el-radio-group
            v-if="ruleForm.cycleType == 1 && ruleForm.type == 0"
            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-time-picker
            v-if="ruleForm.cycleType != 2 && ruleForm.type == 0"
            v-model="ruleForm.reminderTime"
            value-format="yyyy-MM-dd hh:mm:ss"
            placeholder="请选择时间点"
          />
          <el-date-picker
            v-if="ruleForm.cycleType == 2 || ruleForm.type != 0"
            v-model="ruleForm.reminderTime"
            value-format="yyyy-MM-dd hh:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
          />
        </el-form-item>
        <el-form-item
          label-width="120px"
          label="责任人"
          prop="otherConfig.selectUser"
        >
          <el-select
            v-model="ruleForm.otherConfig.selectUser"
            multiple
            filterable
            remote
            :remote-method="searchUser"
            value-key="id"
            placeholder="请输入关键词搜索用户"
            prop="selectUser"
          >
            <el-option
              v-for="item in personnelList"
              :key="item.id"
              :label="item.nickName"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="ruleForm.type == 2"
          label-width="120px"
          label="检查依据"
          prop="files"
        >
          <div>
            <div
              class="myflex"
              v-for="(item, index) in ruleForm.files"
              :key="item"
            >
              <div>{{ (item && item.split("/").slice(-1)[0]) || "" }}</div>
              <img
                src="../../../../../assets/common/icon-delete.png"
                style="
                  width: 14px;
                  flex-shrink: 0;
                  margin-left: 4px;
                  margin-right: 18px;
                  cursor: pointer;
                "
                @click="handleDelFile(item, index)"
                alt=""
              />
            </div>
          </div>
          <el-upload
            v-if="!disabledUpload"
            action="#"
            class="avatar-uploader"
            :http-request="handleUpload"
            :auto-upload="true"
            :before-upload="beforeUpload"
            v-model:file-list="ruleForm.files"
            :showFileList="false"
            accept=".PDF,.docx,.doc,.excel,.ppt,.jpg,.png,.txt"
            :maxLength="9"
          >
            <el-button type="primary">上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取消</el-button>
        <el-button size="mini" type="primary" @click="submitForm('ruleForm')"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
.top-title {
  height: 50px;
  background-color: white;
  display: flex;
  padding-left: 16px;
  align-items: center;
  font-weight: 600;
}

.table-box {
  height: calc(100% - 50px - 24px);
  margin-top: 24px;
  padding: 16px;
  background-color: white;

  .top-search {
    display: flex;
    align-items: center;
    margin-bottom: 8px;

    .search-input {
      width: 300px;
      margin-right: 10px;
    }
  }

  .search-btn {
    margin-left: 10px;
    background-color: #37b29e;
    border: none;

    &:hover {
      background-color: #5ac6b9;
    }

    &:active {
      background-color: #2b8070;
    }
  }
}

.myflex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>