shuili-vue/src/views/dike/runManage/patrolMaintenance/patrolItemsManage/details.vue

<!-- 巡查项 -->
<template>
  <div class="slider-right">
    <TopBackTitle></TopBackTitle>
    <div class="table-box">
      <div class="top-box">
        <el-form
          :inline="true"
          :model="formData"
          :rules="rules"
          :disabled="!canEdit"
          ref="ruleForm"
          label-width="120px"
        >
          <el-form-item label="巡查堤防名称" prop="dikeName">
            <el-select
              :disabled="!canEdit"
              class="w-240"
              size="small"
              remote
              filterable
              reserve-keyword
              :maxlength="50"
              :remote-method="handleGetRemoteDikeMethod"
              @focus="handleGetRemoteDikeMethod('')"
              @change="handleChangeDike"
              v-model="formData.dikeCode"
              placeholder="请选择堤防"
            >
              <el-option
                v-for="item in dikeList"
                :key="item.id"
                :label="item.dikeName"
                :value="item.dikeCode"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="巡查堤防编码" prop="dikeCode">
            <el-input
              v-model="formData.dikeCode"
              :disabled="true"
              placeholder="请选择堤防"
            ></el-input>
          </el-form-item>
          <el-form-item label="巡查项目名称" prop="name">
            <el-input
              v-model="formData.name"
              :disable="true"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="巡查类别" prop="category">
            <el-select
              :disabled="!canEdit"
              v-model="formData.category"
              placeholder="请选择"
            >
              <el-option
                v-for="item in xcCategoryList"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="巡查类型" prop="type">
            <el-select
              :disabled="!canEdit"
              v-model="formData.type"
              placeholder="请选择"
            >
              <el-option
                v-for="item in xcTypeOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建人" prop="createUid">
            <el-input
              v-model="formData.createName"
              :disabled="true"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div>
        <el-table :data="tableData" border>
          <el-table-column prop="parts" label="工程部位" width="320">
            <template slot-scope="scope">
              <el-cascader
                :disabled="!canEdit"
                class="w-full"
                v-model="scope.row.parts"
                @change="(val) => handleChangeCascader(val, scope.row)"
                :options="xcTreeData"
                :props="{
                  checkStrictly: true,
                  expandTrigger: 'hover',
                  label: 'value',
                  value: 'key',
                }"
                clearable
              ></el-cascader>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="检查内容">
            <template slot-scope="scope">
              <el-input
                :disabled="!canEdit"
                v-model="scope.row.content"
                placeholder="请输入"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                :disabled="!canEdit"
                type="text"
                @click="handleAddNew(scope.$index)"
                >新增</el-button
              >
              <el-button :disabled="!canEdit" type="text">删除</el-button>
            </template>
          </el-table-column>
          <template #empty>
            <el-button
              :disabled="!canEdit"
              type="primary"
              @click="handleAddNew(null)"
              >新增</el-button
            >
          </template>
        </el-table>
      </div>
    </div>

    <div class="bottom-btns">
      <el-button :disabled="!canEdit" type="primary" @click="handleSave"
        >保存</el-button
      >
      <el-button @click="$router.go(-1)">返回</el-button>
    </div>
  </div>
</template>
<script>
import { intersection } from "lodash";
import {
  checkUsed,
  getCheckingDictTree,
  postV2PatrolChecking,
  putV2PatrolChecking,
  getV2PatrolChecking,
  getRunProjectList,
} from "@/api/dike";
import TopBackTitle from "@/components/TopBackTitle/index.vue";

import { mapGetters } from "vuex";

export default {
  components: {
    TopBackTitle,
  },
  data() {
    return {
      tableData: [
        {
          id: null,
          parts: [],
          content: "",
        },
      ],
      xcTreeData: [],
      xcTypeOptions: [],
      xcCategoryList: [],
      dikeList: [],
      formData: {
        id: null,
        dikeCode: "",
        dikeName: "",
        name: "",
        type: "",
        category: "",
        createUid: "",
        createName: "",
        items: [],
      },
      rules: {
        dikeCode: [{ required: true, message: "请选择", trigger: "change" }],
        dikeName: [{ required: true, message: "请选择", trigger: "change" }],
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        category: [{ required: true, message: "请选择", trigger: "change" }],
        type: [{ required: true, message: "请选择", trigger: "change" }],
        createUid: [
          {
            required: true,
            message: "未能识别当前登录用户",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters({
      userId: "uid",
      userName: "name",
    }),
    canEdit: function () {
      return (
        this.$route.query.type === "edit" || this.$route.query.type === "add"
      );
    },
  },
  created() {
    // 获取巡查类型
    this.getDicts("patrol_maintenance_type").then((res) => {
      if (res.data && Array.isArray(res.data)) {
        this.xcTypeOptions = res.data;
      }
    });
    this.getDicts("patrol_maintenance_category").then((res) => {
      if (res.data && Array.isArray(res.data)) {
        this.xcCategoryList = res.data;
      }
    });
  },
  mounted() {
    this.getDetailsData();
  },
  methods: {
    handleGetRemoteDikeMethod(query) {
      getRunProjectList({
        pageSize: 10,
        pageNum: 1,
        data: {
          dikeName: query,
        },
      }).then((res) => {
        if (res) {
          this.dikeList = res.records;
        }
      });
    },
    handleChangeDike() {
      let res = this.dikeList.find(
        (v) => v.dikeCode === this.formData.dikeCode
      );
      this.formData.dikeType = res.dikeType;
      this.formData.dikeName = res.dikeName;
    },
    // 获取详情信息
    async getDetailsData() {
      const dictData = await getCheckingDictTree("df_xs_c_classfy");
      let _xcTreeData = this.transformArr(dictData?.data);
      const checkId = this.$route.query.id;
      if (checkId) {
        const { data } = await getV2PatrolChecking(checkId);
        if (data?.items) {
          this.formData.id = data.id;
          this.formData.name = data.name;
          this.formData.type = data.type;
          this.formData.category = data.category;
          this.formData.dikeCode = data.dikeCode;
          this.formData.dikeName = data.dikeName;
          this.formData.createUid = data.createUid;
          this.formData.createName = data.createName;
          // 匹配xcTreeData
          this.matchXcTreeData(_xcTreeData, data.items);
          this.tableData = data.items;
        }
      } else {
        this.formData.createUid = this.userId;
        this.formData.createName = this.userName;
      }
      this.xcTreeData = _xcTreeData;
    },
    // 修改级联选项时填写content
    handleChangeCascader(val, row) {
      if (val?.length) {
        let resObj = this.xcTreeData.find((v) => v.key === val[0]);
        for (let i = 1; i < val.length; i++) {
          let resDict = resObj.children?.find((v) => v.key === val[i]);
          if (resDict) {
            resObj = resDict;
          } else {
            break;
          }
        }
        if (!row.content) row.content = resObj.content;
      }
    },
    handleChangeSelectDike(val) {
      let res = this.dikeList.find((v) => v.dikeCode === val);
      if (res) this.formData.dikeName = res.dikeName;
    },
    // 树转换
    transformArr(treeList) {
      // 递归设置路径
      function deepCalc(item, part = []) {
        item.parts = [...part, item.key];
        if (item.children?.length) {
          item.children.forEach((v) => {
            if (!v.children || v.children.length === 0) {
              v.parts = [...item.parts, v.key];
              v.content = v.remark || "";
              delete v.children;
            } else {
              deepCalc(v, item.parts);
            }
          });
        } else {
          delete item.children;
        }
      }
      treeList.forEach((item) => {
        deepCalc(item);
      });
      return treeList;
    },
    // 匹配维修养护内容
    matchXcTreeData(treeData, dataList) {
      treeData.forEach((v) => {
        if (!v.children?.length) {
          for (const item of dataList) {
            v.id = item.id;
            if (intersection(v.parts, item.parts).length === v.parts.length) {
              // 证明匹配成功
              v.content = item.content || "";
              break;
            }
          }
        } else {
          this.matchXcTreeData(v.children, dataList);
        }
      });
    },

    // 获取xcTreeData中的check为true的数据
    getCheckData(treeData) {
      let res = [];
      treeData.forEach((v) => {
        if (v.check) {
          res.push({
            parts: v.parts,
            id: v.id || null,
            content: v.content,
          });
        }
        if (v.children?.length) {
          res = res.concat(this.getCheckData(v.children));
        }
      });
      return res;
    },
    handleAddNew(index) {
      console.log("index >>>>>  ", index);
      if (index !== null) {
        this.tableData.splice(index + 1, 0, {
          id: null,
          parts: [],
          content: "",
        });
      } else {
        this.tableData.push({
          id: null,
          parts: [],
          content: "",
        });
      }
    },
    // 保存
    handleSave() {
      console.log("保存 >>> ", {
        ...this.formData,
        items: this.tableData,
      });
      if (this.$route.query.id) {
        this.formData.id = this.$route.query.id;
      }
      this.$refs.ruleForm.validate().then((valid) => {
        if (valid) {
          console.log("valid >>>>>  ", valid);
          if (this.tableData.length) {
            if (
              this.tableData.some(
                (v) => !v.content || !v.parts || !v.parts.length
              )
            ) {
              this.$message.error("请完善巡查部位或检车内容");
              return;
            }
          } else {
            this.$message.error("请至少新增一条巡查项目");
            return;
          }
          if (this.formData.id) {
            putV2PatrolChecking({
              ...this.formData,
              items: this.tableData,
            }).then((res) => {
              this.$message.success("更新成功");
              setTimeout(() => {
                this.$router.go(-1);
              }, 500);
            });
          } else {
            postV2PatrolChecking({
              ...this.formData,
              items: this.tableData,
            }).then((res) => {
              if (res.data?.id) {
                this.formData.id = res.data.id;
              }
              this.$message.success("保存成功");
              setTimeout(() => {
                this.$router.go(-1);
              }, 500);
            });
          }
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.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;
  padding-bottom: 80px;
  background-color: white;
  overflow: auto;

  .top-box {
    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;
    }
  }
}
.xc-form-table {
}
.l-t-border {
  border-left: 1px solid #eee;
  border-top: 1px solid #eee;
}
.r-b-border {
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.w-p-20 {
  width: 20%;
}
.w-p-80 {
  width: 80%;
}

.w-p-50 {
  width: 50%;
}

.w-80 {
  width: 80px !important;
}
.w-120 {
  width: 120px !important;
}
.w-160 {
  width: 160px !important;
}
.w-240 {
  width: 240px !important;
}
</style>
<style lang="scss">
.inspection-radio-group {
  .el-radio {
    margin-right: 10px;
    .el-radio__label {
      padding-left: 4px;
    }
    &:last-child {
      margin-right: 0;
    }
  }
}
</style>