shuili-vue/src/views/runManage/maintenance/maintenanceRecords/Dike.vue

<!-- 维修记录-堤防 -->
<script>
import { putDFMaintenanceRecords, deleteDFMaintenanceRecords, postDFMaintenanceRecords, postDFMaintenanceRecordsList, getDFMaintenanceRecords, getDicts, postDFMaintenancePlanList, getDFMaintenancePlan, listUser } from '@/api/management'
export default {
  name: 'InspectionItems',
  data() {
    return {
      searchInput: '',
      dialogVisible: false,
      prohibitEditing: false,
      statusList: [], // 状态列表
      personnelList: [], // 用户列表
      planData: {
        dikeCode: '',
        planTime: '',
        nationalSupplement: '',
        selfSupplement: '',
        budget: '',
        location: '',
        content: ''
      }, // 计划信息
      planList: [],
      embankmentList: [
        {
          label: '堤防1',
          value: '1',
          id: '1',
        },
        {
          label: '堤防2',
          value: '2',
          id: '2',
        },
        {
          label: '堤防3',
          value: '3',
          id: '3',
        }
      ], // 堤防名称列表
      selectStatus: '2', // 选中筛选状态
      tableData: [], // 检查列表
      pageData: {
        pageNum: 1, // 当前页
        pageSize: 10, // 请求数量
        pageSizes: [10, 20, 50, 100],
        total: 0 // 总数量
      },
      ruleForm: {
        name: '',
        planId: '',
        before: '',
        middle: '',
        after: '',
        maintenanceFunds: 0,
        operators: [],
        selectUser: [],
        implement: '',
        remark: '',
        status: 0,
      },
      rules: {
        planId: [
          { required: true, message: '请输入维养计划名称', trigger: 'blur' }
        ],
        before: [
          { required: true, message: '请输入维修养护前', trigger: 'blur' }
        ],
        middle: [
          { required: true, message: '请输入维修养护过程', trigger: 'blur' }
        ],
        after: [
          { required: true, message: '请输入维修养护结束后', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    dialogVisible(newVal, oldVal) {
      if (oldVal) {
        this.prohibitEditing = false
      }
    }
  },
  methods: {
    // 删除对应维修记录
    deleteTableItem(row) {
      deleteDFMaintenanceRecords(row.id).then((res) => {
        console.log('🚀res🚀', res)
        this.getTableData()
      })
    },
    // 查看或编辑记录详情
    viewOrEditPlanDetails(row, edit = false) {
      if (!edit) {
        this.prohibitEditing = true
      }
      getDFMaintenanceRecords(row.id).then((res) => {
        // 遍历用户数据让select组件渲染选项
        if (res.data.operators) {
          this.personnelList = []
          res.data.operators.forEach(element => {
            listUser({
              data: {
                timeView: {
                  timeField: "create_time"
                },
              },
              cv: {
                name: "nickName",
                type: "like",
                value: element.name
              },
              pageSize: 10,
              pageNum: 1
            }).then((res) => {
              this.personnelList.push(res.records[0])
            })
          });
        }
        this.ruleForm = res.data
        // 渲染选中项
        this.ruleForm.selectUser = []
        res.data.operators.forEach(element => {
          let a = {
            id: element.uid,
            lebel: element.name
          }
          this.ruleForm.selectUser.push(a)
        });
        this.dialogVisible = true
      })
    },
    // 保存维修记录
    submitForm(formName, confirm = false) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let user = []
          this.ruleForm.selectUser.forEach(element => {
            let a = {
              name: element.nickName,
              uid: element.id
            }
            user.push(a)
          });
          console.log('🚀user🚀', user)
          this.ruleForm.operators = user
          if (confirm) {
            this.ruleForm.status = 1
          }
          this.ruleForm.maintenanceFunds = Number(this.ruleForm.maintenanceFunds)
          if (this.ruleForm.id) {
            putDFMaintenanceRecords(this.ruleForm).then(() => {
              this.getTableData()
              this.dialogVisible = false
            })
          } else {
            postDFMaintenanceRecords(this.ruleForm).then(() => {
              this.getTableData()
              this.dialogVisible = false
            })
          }
        } else {
          console.log('校验不通过');
          return false;
        }
      });
    },
    // 搜索计划
    searchPlan(value) {
      postDFMaintenancePlanList({
        data: {
          timeView: {
            timeField: "create_time"
          },
        },
        cv: {
          name: "name",
          type: "like",
          value
        },
        pageSize: 100,
        pageNum: 1
      }).then((res) => {
        if (res) {
          this.planList = res.records
        }
      })
    },
    // 改变选中计划
    changeSelectPlan() {
      getDFMaintenancePlan(this.ruleForm.planId).then((res) => {
        if (res.data) {
          this.ruleForm.name = res.data.name
          this.planData = res.data
          this.planData.budget = res.data.nationalSupplement + res.data.selfSupplement
        }
      })
    },
    // 搜索用户
    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
        console.log('🚀用户数据🚀', res)
        console.log('🚀用户数据🚀', this.ruleForm.operators)
      })
    },
    // 关闭dialog
    closeDialog(ruleForm = 'ruleForm') {
      console.log('触发关闭dialog', ruleForm);
      this.$refs[ruleForm].resetFields();
      this.ruleForm = {
        name: '',
        planId: '',
        before: '',
        middle: '',
        after: '',
        maintenanceFunds: 0,
        operators: [],
        implement: '',
        remark: '',
        status: 0,
      }
    },
    // 获取数据
    getTableData(value = '') {
      postDFMaintenanceRecordsList({
        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)
      })
    }
  },
  mounted() {
    // 获取列表数据
    this.getTableData()
    // 获取状态字典
    getDicts('xs_record_status').then((res) => {
      if (res.data && Array.isArray(res.data)) {
        this.statusList = res.data
      }
    })
  },
}
</script>

<template>
  <div class="body">
    <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="selectStatus" placeholder="请选择">
          <el-option label="全部" value="2" />
          <el-option v-for="item in statusList" :label="item.dictLabel" :value="item.dictValue"
            :key="item.id"></el-option>
        </el-select>
        <el-button class="search-btn" type="success" @click="getTableData(searchInput)">搜索</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 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="before" align="center" label="维修养护前" />
        <el-table-column prop="middle" align="center" label="维修养护过程" />
        <el-table-column prop="after" align="center" label="维修养护结束后" />
        <el-table-column prop="maintenanceFunds" align="center" label="维修养护费用" />
        <el-table-column prop="status" align="center" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status == '0'" class="is-save">已保存</span>
            <span v-else class="is-confirm">已确认</span>
          </template>
        </el-table-column>
        <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" v-if="!scope.row.status"
              size="small">编辑</el-button>
            <el-popconfirm v-if="!scope.row.status" confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info"
              icon-color="red" title="确定删除吗？" @confirm="deleteTableItem(scope.row)">
              <el-button style="color: red; margin-left: 10px;" 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="40%">
      <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" class="demo-ruleForm">
        <el-form-item label-width="130px" label="维养计划名称" prop="planId">
          <el-select v-model="ruleForm.planId" filterable remote :remote-method="searchPlan" placeholder="请输入"
            @change="changeSelectPlan">
            <el-option v-for="item in planList" :key="item.id" :label="item.name" :value="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="130px" label="堤防名称">
            <el-input v-model="planData.dikeCode" disabled />
          </el-form-item>
          <el-form-item label-width="130px" label="计划时间">
            <el-date-picker v-model="planData.planTime" type="month" disabled>
            </el-date-picker>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item label-width="130px" label="国补资金">
            <div style="display: flex;">
              <el-input v-model="planData.nationalSupplement" type="number" disabled style="margin-right: 5px;" />
              <div style="width: 50px;">万元</div>
            </div>
          </el-form-item>
          <el-form-item label-width="90px" label="自筹资金">
            <div style="display: flex;">
              <el-input v-model="planData.selfSupplement" type="number" disabled style="margin-right: 5px;" />
              <div style="width: 50px;">万元</div>
            </div>
          </el-form-item>
          <el-form-item label-width="90px" label="项目预算">
            <el-input v-model="planData.budget" disabled />
          </el-form-item>
        </div>
        <el-form-item label-width="130px" label="具体地点">
          <el-input :autosize="{ minRows: 5 }" type="textarea" maxlength="500" show-word-limit v-model="planData.location"
            disabled />
        </el-form-item>
        <el-form-item label-width="130px" label="维修养护内容">
          <el-input :autosize="{ minRows: 5 }" type="textarea" maxlength="500" show-word-limit v-model="planData.content"
            disabled />
        </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="130px" label="维修养护前" prop="before">
          <el-input v-model="ruleForm.before" placeholder="请输入" style="width: 202px;" :disabled="prohibitEditing" />
        </el-form-item>
        <el-form-item label-width="130px" label="维修养护过程" prop="middle">
          <el-input v-model="ruleForm.middle" placeholder="请输入" style="width: 202px;" :disabled="prohibitEditing" />
        </el-form-item>
        <el-form-item label-width="130px" label="维修养护结束后" prop="after">
          <el-input v-model="ruleForm.after" placeholder="请输入" style="width: 202px;" :disabled="prohibitEditing" />
        </el-form-item>
        <el-form-item label-width="130px" label="维修养护费用" prop="maintenanceFunds">
          <el-input v-model="ruleForm.maintenanceFunds" placeholder="请输入" style="width: 165px;" type="number"
            :disabled="prohibitEditing" /> 万元
        </el-form-item>
        <el-form-item label-width="130px" label="养护人员" prop="operators">
          <!-- <el-input v-model="ruleForm.operators" placeholder="请输入" style="width: 202px;" /> -->
          <el-select v-model="ruleForm.selectUser" multiple filterable remote :remote-method="searchUser" value-key="id"
            :disabled="prohibitEditing" 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 label-width="130px" label="落实情况" prop="implement">
          <el-input :autosize="{ minRows: 5 }" type="textarea" maxlength="500" show-word-limit
            v-model="ruleForm.implement" placeholder="请输入" :disabled="prohibitEditing" />
        </el-form-item>
        <el-form-item label-width="130px" label="备注" prop="remark">
          <el-input :autosize="{ minRows: 5 }" type="textarea" maxlength="500" show-word-limit v-model="ruleForm.remark"
            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 size="mini" type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <el-button size="mini" type="primary" @click="submitForm('ruleForm', true)">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
.body {
  width: 100%;
  min-height: calc(100vh - 56px);
  margin-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 {
      display: flex;
      align-items: center;
      margin-bottom: 8px;

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

    }


    .table {
      height: calc(680px - 34px);

      .is-confirm {
        background-color: #ebf7f5;
        border-radius: 4px;
        color: #36b29e;
        padding: 0px 6px;
      }

      .is-save {
        background-color: #f8f9fb;
        border: 1px solid #bfbfbf;
        border-radius: 4px;
        color: #bfbfbf;
        padding: 0px 6px;
      }
    }
  }

  .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>