shuili-vue/src/views/sluice/runManage/maintenance/maintenancePlan/index.vue

<!-- 维修计划管理-水闸 -->
<script>
import { putSZMaintenancePlan, deleteSZMaintenancePlan, postSZMaintenancePlan, postSZMaintenancePlanList, getSZMaintenancePlan } from '@/api/management'
export default {
  name: 'InspectionItems',
  data() {
    return {
      searchInput: '',
      dialogVisible: false,
      prohibitEditing: false,
      dikeLevel: [
        {
          id: 1,
          label: '全部',
          value: 1
        },
        {
          id: 2,
          label: '一级',
          value: 2
        },
        {
          id: 3,
          label: '二级',
          value: 3
        },
        {
          id: 4,
          label: '三级',
          value: 4
        },
        {
          id: 5,
          label: '四级',
          value: 5
        },
        {
          id: 6,
          label: '五级及以下',
          value: 6
        },
      ], // 堤防级别列表
      embankmentList: [
        {
          label: '堤防1',
          value: '1',
          id: '1',
        },
        {
          label: '堤防2',
          value: '2',
          id: '2',
        },
        {
          label: '堤防3',
          value: '3',
          id: '3',
        }
      ], // 堤防名称列表
      searchLevel: 1, // 筛选堤防级别
      tableData: [], // 检查列表
      pageData: {
        pageNum: 1, // 当前页 
        pageSize: 10, // 请求数量
        pageSizes: [10, 20, 50, 100],
        total: 0 // 总数量
      },
      ruleForm: {
        dikeCode: '',
        name: '',
        planTime: '',
        nationalSupplement: 0,
        selfSupplement: 0,
        budget: 0,
        location: '',
        content: '',
        wagaCode: 'b'
      },
      rules: {
        dikeCode: [
          { required: true, message: '请选择堤防名称', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入维养计划名称', trigger: 'blur' },
          { max: 100, message: '名称最长为100个字符', trigger: 'blur' }
        ],
        planTime: [
          { required: true, message: '请选计划时间', trigger: 'change' }
        ],
        nationalSupplement: [
          { required: true, message: '请输入资金', trigger: 'change' }
        ],
        selfSupplement: [
          { required: true, message: '请输入资金', trigger: 'change' }
        ],
        location: [
          { required: true, message: '请输入具体地点', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入维修养护内容', trigger: 'change' }
        ],
      }
    }
  },
  watch: {
    dialogVisible(newVal, oldVal) {
      if (oldVal) {
        this.prohibitEditing = false
      }
    }
  },
  methods: {
    // 删除对应维修计划
    deleteTableItem(row) {
      deleteSZMaintenancePlan(row.id).then((res) => {
        console.log('🚀res🚀', res)
        this.getTableData()
        this.$message.success('删除成功');
      })
    },
    // 查看或编辑计划详情
    viewOrEditPlanDetails(row, edit = false) {
      if (!edit) {
        this.prohibitEditing = true
      }
      getSZMaintenancePlan(row.id).then((res) => {
        console.log('🚀res🚀', res)
        this.ruleForm = res.data
        this.ruleForm.budget = res.data.nationalSupplement + res.data.selfSupplement
        this.dialogVisible = true
      })
    },
    // 跳转记录页面
    goMaintenanceRecords(row) {
      this.$router.push({
        path: '/dyke/runManage/maintenance/maintenanceRecords',
        query: {
          name: row.name
        }
      })
    },
    // 保存维修计划
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.id) {
            putSZMaintenancePlan(this.ruleForm).then(() => {
              this.getTableData()
              this.dialogVisible = false
              this.$message({
                message: '保存成功',
                type: 'success'
              })
            })
          } else {
            postSZMaintenancePlan(this.ruleForm).then(() => {
              this.getTableData()
              this.dialogVisible = false
              this.$message({
                message: '保存成功',
                type: 'success'
              })
            })
          }
        } else {
          console.log('校验不通过');
          return false;
        }
      });
    },
    // 关闭dialog
    closeDialog(ruleForm = 'ruleForm') {
      console.log('触发关闭dialog', ruleForm);
      this.$refs[ruleForm].resetFields();
      this.ruleForm = {
        dikeCode: '',
        name: '',
        planTime: '',
        nationalSupplement: 0,
        selfSupplement: 0,
        location: '',
        budget: 0,
        content: '',
        wagaCode: 'b'
      }
    },
    // 计算预算
    calculateBudget() {
      this.ruleForm.budget = Number(this.ruleForm.selfSupplement) + Number(this.ruleForm.nationalSupplement)
    },
    // 获取数据
    getTableData(value = '') {
      postSZMaintenancePlanList({
        data: {
          timeView: {
            timeField: "create_time"
          },
        },
        cv: {
          name: "name",
          type: "like",
          value
        },
        pageSize: this.pageData.pageSize,
        pageNum: this.pageData.pageNum
      }).then((res) => {
        if (res) {
          this.tableData = res.records
          this.pageData.total = res.total
        }
        console.log('🚀表格数据🚀', res)
      })
    },
    // 重置搜索
    resetSearch() {
      this.searchInput = ''
      this.searchLevel = 1
      this.getTableData()
    }
  },
  mounted() {
    // 获取列表数据
    this.getTableData()
  },
}
</script>

<template>
  <div style="height: 100%;">
    <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-select v-model="searchLevel" placeholder="请选择">
          <el-option v-for="item in dikeLevel" :label="item.label" :value="item.value" :key="item.id"></el-option>
        </el-select>
        <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>
      <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 prop="" align="center" label="堤防级别" />
        <el-table-column prop="location" align="center" label="具体地点" />
        <el-table-column prop="content" align="center" label="维修养护内容" />
        <el-table-column prop="nationalSupplement" align="center" label="国补" />
        <el-table-column prop="selfSupplement" align="center" label="自筹" />
        <el-table-column prop="createTime" align="center" sortable label="创建时间">
        </el-table-column>
        <el-table-column prop="updateTime" align="center" sortable label="更新时间">
        </el-table-column>
        <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-button style=" margin-right: 9px;" type="text" size="small"
              @click="goMaintenanceRecords(scope.row)">记录</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="closeDialog" :visible.sync="dialogVisible" width="38%">
      <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-select v-model="ruleForm.dikeCode" placeholder="请选择" @change="ruleForm.name = ruleForm.dikeCode"
            :disabled="prohibitEditing">
            <el-option v-for="item in embankmentList" :label="item.label" :value="item.value" :key="item.id"></el-option>
          </el-select>
          <el-button button class="search-btn" type="success" size="small">详情</el-button>
          <el-button button class="search-btn" type="success" size="small">打开地图</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="planTime">
            <el-date-picker v-model="ruleForm.planTime" type="month" placeholder="选择月" :disabled="prohibitEditing"
              value-format="yy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item label-width="120px" label="国补资金" prop="nationalSupplement">
            <el-input style="width: 79px;" v-model="ruleForm.nationalSupplement" type="number" @input="calculateBudget()"
              placeholder="请输入" :disabled="prohibitEditing" /> 万元
          </el-form-item>
          <el-form-item label-width="120px" label="自筹资金" prop="selfSupplement">
            <el-input style="width: 79px;" v-model="ruleForm.selfSupplement" type="number" @input="calculateBudget()"
              placeholder="请输入" :disabled="prohibitEditing" /> 万元
          </el-form-item>
          <el-form-item label-width="120px" label="项目预算">
            <el-input style="width: 79px;" v-model="ruleForm.budget" disabled />
          </el-form-item>
        </div>
        <el-form-item label-width="120px" label="具体地点" prop="location">
          <el-input style="width: 542px;" :autosize="{ minRows: 5 }" type="textarea" maxlength="500" show-word-limit
            v-model="ruleForm.location" placeholder="请输入" :disabled="prohibitEditing" />
        </el-form-item>
        <el-form-item label-width="120px" label="维修养护内容" prop="content">
          <el-input style="width: 542px;" :autosize="{ minRows: 5 }" type="textarea" maxlength="500" show-word-limit
            v-model="ruleForm.content" placeholder="请输入" :disabled="prohibitEditing" />
        </el-form-item>
      </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">
.top-title {
  height: 50px;
  background-color: white;
  display: flex;
  padding-left: 16px;
  align-items: center;
  font-weight: 600;
}

.table-box {
  width: 100%;
  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;
  }
}

/deep/.el-input__count {
  height: 15px;
  line-height: 15px;
  margin-right: 10px;
  margin-bottom: -4px;
}
</style>