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

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

import TopBackTitle from "@/components/TopBackTitle/index.vue";

import { uploadFileData } from "@/api/system/upload";
import PlanDetail from "./components/PlanDetail.vue";

export default {
  name: "InspectionItems",
  components: {
    TopBackTitle,
    PlanDetail,
  },
  data() {
    return {
      paramsData: {
        name: "",
        status: "",
        userIds: [],
        planDateArr: [],
      },
      currentRow: {},
      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: "0",
        isReminder: true,
        reminderTime: "",
        operators: [],
        files: [], //依据
        otherConfig: {
          week: "",
          time: "",
          selectUser: [],
        },
      },
      rules: {
        name: [
          { required: true, message: "请输入计划名称", trigger: "change" },
          { max: 50, message: "名称最长为50个字符", trigger: "change" },
        ],
        type: [
          { required: true, message: "请选择巡查类型", trigger: "change" },
        ],
        xcId: [
          { required: true, message: "请选择巡查项目名称", trigger: "change" },
        ],
        cycleType: [
          { required: true, message: "请选择巡查周期", trigger: "change" },
        ],
        frequency: [
          { required: true, message: "请输入巡查次数", trigger: "blur" },
        ],
        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();
    },
    handleAdd() {
      this.$router.push({
        path: "createInspectionPlan",
      });
    },
    // 查看巡查项目
    handleCheck(row) {
      this.currentRow = row;
      this.dialogVisible = true;
    },
    // 编辑巡查项目
    handleEdit(row) {
      this.$router.push({
        path: "createInspectionPlan",
        query: {
          id: row.id,
        },
      });
    },
    // 删除对应巡查项目
    deleteTableItem(row) {
      deleteDFInspectionPlan(row.id).then((res) => {
        this.getTableData();
        this.$message.success("删除成功");
      });
    },
    // 查看详情
    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", "");
      }
      setTimeout(() => {
        this.$refs.ruleForm.validateField("frequency");
        this.$refs.ruleForm.validateField("otherConfig.time");
      }, 30);
      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.map((item) => {
          return {
            id: item.id,
            name: item.nickName,
            uid: item.uuid,
          };
        });
      });
    },

    // 获取数据
    getTableData() {
      postDFInspectionPlanlist({
        data: {
          timeView: {
            timeField: "create_time",
          },
          name: this.paramsData.name,
          startTime: this.paramsData.planDateArr[0],
          endTime: this.paramsData.planDateArr[1],
          status: this.paramsData.status,
          userIds: this.paramsData.userIds,
        },
        pageSize: this.pageData.pageSize,
        pageNum: this.pageData.pageNum,
      }).then((res) => {
        if (res) {
          this.tableData = res.records;
          this.pageData.total = res.total;
        }
      });
    },
    // 上传前
    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);
    },
    handleChangeQuery() {
      this.pageData.pageNum = 1;
      this.getTableData();
    },
    handleResetQuery() {
      this.paramsData.name = "";
      this.paramsData.status = "";
      this.paramsData.userIds = [];
      this.paramsData.planDateArr = [];

      this.pageData.pageNum = 1;
      this.getTableData();
    },
    getDikeTypeName(type) {
      let name = "";
      this.embankmentTypeOptions.forEach((element) => {
        if (element.dictValue === type) {
          name = element.dictLabel;
        }
      });
      return name;
    },
  },
  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">
    <TopBackTitle :showBackBtn="false"></TopBackTitle>
    <div class="table-box slider-right-body">
      <div class="search-form flex flex-wrap">
        <div class="search-item flex items-center">
          <span class="search-label">巡查计划名称</span>
          <el-input
            size="small"
            class="w-202 ml-10"
            :maxlength="50"
            v-model="paramsData.name"
            @change="handleChangeQuery"
            placeholder="请输入名称"
          />
        </div>
        <div class="search-item flex items-center">
          <span class="search-label">巡查计划启用状态</span>
          <el-select
            size="small"
            class="w-202 ml-10"
            @change="handleChangeQuery"
            v-model="paramsData.status"
            :popper-append-to-body="false"
            filterable
            placeholder="请选择"
          >
            <el-option label="全部" value=""> </el-option>
            <el-option label="启用" value="1"> </el-option>
            <el-option label="停用" value="0"> </el-option>
          </el-select>
        </div>
        <div class="search-item flex items-center">
          <span class="search-label">巡查计划责任人</span>
          <el-select
            size="small"
            class="w-202 ml-10"
            @change="handleChangeQuery"
            v-model="paramsData.userIds"
            :popper-append-to-body="false"
            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.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-item flex items-center">
          <span class="search-label">巡查计划日期</span>
          <el-date-picker
            size="small"
            class="ml-10"
            v-model="paramsData.planDateArr"
            type="daterange"
            placeholder="开始日期"
            value-format="yyyy-MM-dd"
            @change="handleChangeQuery"
          ></el-date-picker>
        </div>
        <div class="flex-1 flex justify-end search-item">
          <el-button
            size="small"
            class="flex-shrink-0 myml-12"
            type="success"
            @click="handleChangeQuery"
            >查询</el-button
          >
          <el-button
            class="flex-shrink-0"
            size="small"
            @click="handleResetQuery"
            >重置</el-button
          >
        </div>
      </div>
      <div class="line"></div>
      <div class="flex justify-end mb-16">
        <div>
          <el-button type="primary" size="small" @click="handleAdd"
            >新增</el-button
          >
          <!-- <el-button size="small">编辑</el-button> -->
          <el-button type="danger" size="small">删除</el-button>
        </div>
      </div>

      <el-table :data="tableData" border>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="status" align="center" label="状态">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.status === '1'"
              type="success"
              class="normal"
              >启用</el-tag
            >
            <el-tag v-else type="danger" class="abnormal">停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="dikeName" align="center" label="堤防名称" />
        <el-table-column prop="dikeType" align="center" label="堤防类型">
          <template slot-scope="scope">
            <span>{{ getDikeTypeName(scope.row.dikeType) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" align="center" label="巡查计划名称" />
        <el-table-column align="center" label="巡查计划类型">
          <template slot-scope="scope">
            <span>{{
              scope.row.planType === "0"
                ? "日常检查"
                : scope.row.planType === "1"
                ? "年度检查"
                : scope.row.planType === "2"
                ? "特别检查"
                : "-"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="frequency" align="center" label="巡查频次" />
        <el-table-column prop="itemCount" align="center" label="子项计划数量" />
        <el-table-column
          prop="createName"
          align="center"
          label="创建计划人员"
        />
        <el-table-column
          prop="createTime"
          align="center"
          sortable
          label="创建时间"
        />
        <el-table-column prop="operate" align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              style="margin-right: 16px"
              type="text"
              size="small"
              @click="handleCheck(scope.row)"
              >查看</el-button
            >
            <el-button
              style="margin-right: 16px"
              @click="handleEdit(scope.row)"
              type="text"
              size="small"
              v-hasPermi="['df:run:checking:plan:edit']"
              >编辑</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"
                v-hasPermi="['df:run:checking:plan:delete']"
                >删除</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="(e) => handlePageSizeChange(e)"
        @current-change="(e) => handleCurrentPageChange(e)"
      >
      </el-pagination>
    </div>
    <el-drawer
      title="计划详情"
      :visible.sync="dialogVisible"
      direction="rtl"
      size="80%"
    >
      <div class="drawer-body">
        <PlanDetail
          ref="formRef"
          :id="currentRow.id"
          :canEdit="false"
        ></PlanDetail>
      </div>
      <div class="drawer-footer p-16">
        <el-button size="mini" type="primary" @click="handleEdit(currentRow)"
          >编辑</el-button
        >
        <el-button size="mini" @click="dialogVisible = false">取消</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<style scoped lang="less">
.search-form {
  .search-item {
    margin-bottom: 16px;
    .search-label {
      width: 120px;
      text-align: right;
      flex-shrink: 0;
    }
  }
}
.line {
  background: #e5e5e5;
  width: 100%;
  height: 1px;
  margin-top: 8px;
  margin-bottom: 24px;
}

.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;
  padding-bottom: 60px;
  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;
    }
  }
}

.drawer-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 2;
  border-top: 1px solid #ebeef5;
  background: #fff;
}

.drawer-body {
  height: 100%;
  padding: 0 16px;
  padding-bottom: 72px;
  overflow: auto;
}
</style>