From 889e88cc9b225526d1a73e214991433f683b702c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=93=E6=B5=A9=E8=BD=A9?= <[yihaoxuan@datametatech.com]>
Date: Tue, 16 Jan 2024 13:43:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B0=B4=E9=97=B8=E3=80=81=E5=A0=A4?=
 =?UTF-8?q?=E9=98=B2=E7=BB=B4=E4=BF=AE=E8=AE=A1=E5=88=92=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E8=AE=B0=E5=BD=95=E8=B7=B3=E8=BD=AC=E5=88=B0?=
 =?UTF-8?q?=E5=AF=B9=E5=BA=94=E7=BB=B4=E4=BF=AE=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../maintenance/maintenancePlan/index.vue     |  12 +-
 .../maintenance/maintenanceRecords/index.vue  |   6 +-
 .../maintenance/maintenancePlan/index.vue     |  12 +-
 .../maintenance/maintenanceRecords/index.vue  | 507 ++++++++++++++++++
 4 files changed, 534 insertions(+), 3 deletions(-)
 create mode 100644 src/views/sluice/runManage/maintenance/maintenanceRecords/index.vue

diff --git a/src/views/dyke/runManage/maintenance/maintenancePlan/index.vue b/src/views/dyke/runManage/maintenance/maintenancePlan/index.vue
index 2bbd4ff..7e96a90 100644
--- a/src/views/dyke/runManage/maintenance/maintenancePlan/index.vue
+++ b/src/views/dyke/runManage/maintenance/maintenancePlan/index.vue
@@ -129,6 +129,15 @@ export default {
         this.dialogVisible = true
       })
     },
+    // 跳转记录页面
+    goMaintenanceRecords(row) {
+      this.$router.push({
+        path: '/maintenanceRecords',
+        query: {
+          name: row.name
+        }
+      })
+    },
     // 保存维修计划
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
@@ -254,7 +263,8 @@ export default {
           <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">记录</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>
diff --git a/src/views/dyke/runManage/maintenance/maintenanceRecords/index.vue b/src/views/dyke/runManage/maintenance/maintenanceRecords/index.vue
index 02b5ae2..25b1818 100644
--- a/src/views/dyke/runManage/maintenance/maintenanceRecords/index.vue
+++ b/src/views/dyke/runManage/maintenance/maintenanceRecords/index.vue
@@ -275,8 +275,12 @@ export default {
     }
   },
   mounted() {
+    // 拿到路由参数
+    if (this.$route.query.name) {
+      this.searchInput = this.$route.query.name
+    }
     // 获取列表数据
-    this.getTableData()
+    this.getTableData(this.$route.query.name || '')
     // 获取状态字典
     getDicts('xs_yh_record_status').then((res) => {
       if (res.data && Array.isArray(res.data)) {
diff --git a/src/views/sluice/runManage/maintenance/maintenancePlan/index.vue b/src/views/sluice/runManage/maintenance/maintenancePlan/index.vue
index 9e57768..5949f23 100644
--- a/src/views/sluice/runManage/maintenance/maintenancePlan/index.vue
+++ b/src/views/sluice/runManage/maintenance/maintenancePlan/index.vue
@@ -130,6 +130,15 @@ export default {
         this.dialogVisible = true
       })
     },
+    // 跳转记录页面
+    goMaintenanceRecords(row) {
+      this.$router.push({
+        path: '/maintenanceRecords',
+        query: {
+          name: row.name
+        }
+      })
+    },
     // 保存维修计划
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
@@ -250,7 +259,8 @@ export default {
           <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">记录</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>
diff --git a/src/views/sluice/runManage/maintenance/maintenanceRecords/index.vue b/src/views/sluice/runManage/maintenance/maintenanceRecords/index.vue
new file mode 100644
index 0000000..5352eb5
--- /dev/null
+++ b/src/views/sluice/runManage/maintenance/maintenanceRecords/index.vue
@@ -0,0 +1,507 @@
+<!-- 维修记录-水闸 -->
+<script>
+import { putSZMaintenanceRecords, deleteSZMaintenanceRecords, postSZMaintenanceRecords, postSZMaintenanceRecordsList, getSZMaintenanceRecords, getDicts, postSZMaintenancePlanList, getSZMaintenancePlan, listUser } from '@/api/management'
+export default {
+  name: 'InspectionItems',
+  data() {
+    return {
+      searchInput: '',
+      dialogVisible: false,
+      prohibitEditing: false,
+      statusList: [], // 状态列表
+      personnelList: [], // 用户列表
+      planData: {
+        dykeCode: '',
+        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) {
+      deleteSZMaintenanceRecords(row.id).then((res) => {
+        console.log('🚀res🚀', res)
+        this.getTableData()
+        this.$message.success('删除成功');
+      })
+    },
+    // 查看或编辑记录详情
+    viewOrEditPlanDetails(row, edit = false) {
+      if (!edit) {
+        this.prohibitEditing = true
+      }
+      getSZMaintenanceRecords(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) {
+            putSZMaintenanceRecords(this.ruleForm).then(() => {
+              this.getTableData()
+              this.dialogVisible = false
+              this.$message({
+                message: confirm ? '确认成功' : '保存成功',
+                type: 'success'
+              })
+            })
+          } else {
+            postSZMaintenanceRecords(this.ruleForm).then(() => {
+              this.getTableData()
+              this.dialogVisible = false
+              this.$message({
+                message: confirm ? '确认成功' : '保存成功',
+                type: 'success'
+              })
+            })
+          }
+        } else {
+          console.log('校验不通过');
+          return false;
+        }
+      });
+    },
+    // 搜索计划
+    searchPlan(value) {
+      postSZMaintenancePlanList({
+        data: {
+          timeView: {
+            timeField: "create_time"
+          },
+        },
+        cv: {
+          name: "name",
+          type: "like",
+          value
+        },
+        pageSize: 100,
+        pageNum: 1
+      }).then((res) => {
+        if (res) {
+          this.planList = res.records
+        }
+      })
+    },
+    // 改变选中计划
+    changeSelectPlan() {
+      getSZMaintenancePlan(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 = '', status = '') {
+      postSZMaintenanceRecordsList({
+        data: {
+          timeView: {
+            timeField: "create_time"
+          },
+          status: status == 2 ? '' : status
+        },
+        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.selectStatus = '2'
+      this.getTableData()
+    }
+  },
+  mounted() {
+    // 拿到路由参数
+    if (this.$route.query.name) {
+      this.searchInput = this.$route.query.name
+    }
+    // 获取列表数据
+    this.getTableData(this.$route.query.name || '')
+    // 获取状态字典
+    getDicts('xs_yh_record_status').then((res) => {
+      if (res.data && Array.isArray(res.data)) {
+        this.statusList = res.data
+      }
+    })
+  },
+}
+</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="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, selectStatus)">搜索</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 class="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="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">
+        <el-form-item label-width="130px" label="维养计划名称" prop="planId">
+          <el-select v-model="ruleForm.planId" filterable remote :remote-method="searchPlan" placeholder="请输入"
+            @change="changeSelectPlan" :disabled="prohibitEditing">
+            <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.dykeCode" 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 v-if="!prohibitEditing" size="mini" type="primary" @click="submitForm('ruleForm')">保存</el-button>
+        <el-button v-if="this.ruleForm.status == 0 && prohibitEditing" size="mini" type="primary"
+          @click="submitForm('ruleForm', true)">确认</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;
+    }
+  }
+
+  .table {
+    .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>
\ No newline at end of file