shuili-vue/src/views/sluice/runManage/enginerring/inspectionItems/inspectionItemDetails.vue

<template>
  <div class="slider-right">
    <div class="top-title">基础信息管理</div>
    <div class="table-box">
      <div class="top-box">
        <span>巡视检查名称：</span>
        <el-input
          v-model="formData.name"
          size="small"
          class="search-input"
          placeholder="请输入巡视检查名称"
        ></el-input>
        <span>巡检类型：</span>
        <el-select 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>
      </div>

      <div class="xc-form-table">
        <el-row class="flex l-t-border">
          <div
            class="w-240 flex-shrink-0 flex justify-center items-center r-b-border p-4"
          >
            <div>工程部位</div>
          </div>
          <div class="flex flex-1 w-full">
            <div class="flex-1 flex justify-center items-center r-b-border">
              <div>检查内容</div>
            </div>
            <div class="w-120 flex justify-center items-center r-b-border">
              <div>是否检查项</div>
            </div>
          </div>
        </el-row>
        <el-row
          v-for="(item, index) in xcTreeData"
          :key="item.key"
          class="flex font-12"
        >
          <el-col>
            <div class="flex w-full l-t-border">
              <div
                class="flex items-center p-4 r-b-border"
                :class="{
                  'w-240 flex-shrink-0': !item.children.length,
                  'w-80 flex-shrink-0': item.children.length,
                }"
              >
                {{ index + 1 }},{{ item.value }}
              </div>
              <div v-if="item.children.length" class="flex flex-1 flex-col">
                <div
                  class="flex flex-1"
                  v-for="item2 in item.children"
                  :key="item2.key"
                >
                  <div
                    class="flex items-center p-4 r-b-border"
                    :class="{
                      'w-80 flex-shrink-0': item2.children.length,
                      'w-160 flex-shrink-0': !item2.children.length,
                    }"
                  >
                    {{ item2.value }}
                  </div>
                  <div
                    v-if="item2.children.length"
                    class="flex flex-1 flex-col"
                  >
                    <div
                      class="flex"
                      v-for="item3 in item2.children"
                      :key="item3.key"
                    >
                      <div
                        class="flex items-center p-4 r-b-border w-80 flex-shrink-0"
                      >
                        {{ item3.value }}
                      </div>
                      <!-- 三级项目的问题 -->
                      <div class="flex flex-1 items-center">
                        <div
                          class="flex flex-1 items-center p-4 r-b-border h-full"
                        >
                          <el-input
                            :disabled="!item3.check"
                            v-model="item3.content"
                            type="textarea"
                            :rows="1"
                            :maxlength="500"
                            placeholder="请输入检查内容"
                          ></el-input>
                        </div>
                        <div
                          class="w-120 flex justify-center items-center p-4 r-b-border h-full"
                        >
                          <el-radio-group
                            class="inspection-radio-group"
                            v-model="item3.check"
                          >
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                          </el-radio-group>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 两级项目的问题 -->
                  <div v-else class="flex flex-1 items-center">
                    <div class="flex-1 flex items-center p-4 r-b-border h-full">
                      <el-input
                        :disabled="!item2.check"
                        v-model="item2.content"
                        type="textarea"
                        :rows="1"
                        :maxlength="500"
                        placeholder="请输入检查内容"
                      ></el-input>
                    </div>
                    <div
                      class="w-120 flex justify-center items-center p-4 r-b-border h-full"
                    >
                      <el-radio-group
                        class="inspection-radio-group"
                        v-model="item2.check"
                      >
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 只有一级项目的问题 -->
              <div v-else class="flex flex-1 items-center">
                <div class="flex-1 flex items-center p-4 r-b-border h-full">
                  <el-input
                    :disabled="!item.check"
                    v-model="item.content"
                    type="textarea"
                    :rows="1"
                    :maxlength="500"
                    placeholder="请输入检查内容"
                  ></el-input>
                </div>
                <div
                  class="w-120 flex justify-center items-center p-4 r-b-border h-full"
                >
                  <el-radio-group
                    class="inspection-radio-group"
                    v-model="item.check"
                  >
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="bottom-btns">
      <el-button type="primary" @click="handleSave">保存</el-button>
      <el-button @click="$router.go(-1)">返回</el-button>
    </div>
  </div>
</template>
<script>
import { intersection } from "lodash";
import {
  putInspectionProjectData,
  postInspectionProjectData,
  getCheckingDictTree,
  getInspectionProjectDetails,
} from "@/api/sluice";

export default {
  data() {
    return {
      xcTreeData: [],
      xcTypeOptions: [],
      formData: {
        id: null,
        name: "",
        type: "",
        items: [],
      },
    };
  },
  created() {
    // 获取巡查类型
    this.getDicts("xs_classfy").then((res) => {
      if (res.data && Array.isArray(res.data)) {
        this.xcTypeOptions = res.data;
      }
    });
  },
  methods: {
    // 获取详情信息
    async getDetailsData() {
      const dictData = await getCheckingDictTree("sz_xs_c_classfy");
      let _xcTreeData = this.transformArr(dictData?.data);

      if (this.$route.query.id) {
        const detailData = await getInspectionProjectDetails(
          this.$route.query.id
        );
        if (detailData?.data?.items) {
          // 匹配xcTreeData
          this.formData.name = detailData.data.name;
          this.formData.type = detailData.data.type;
          this.matchXcTreeData(_xcTreeData, detailData.data.items);
        }
      }
      this.xcTreeData = _xcTreeData;
    },
    // 树转换
    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];
            } else {
              deepCalc(v, item.parts);
            }
          });
        }
      }

      treeList.forEach((item) => {
        deepCalc(item);
      });
      return treeList;
    },
    // 匹配xcTreeData
    matchXcTreeData(treeData, dataList) {
      treeData.forEach((v) => {
        if (!v.children?.length) {
          for (let i = 0; i < dataList.length; i++) {
            const item = dataList[i];
            v.id = item.id;
            if (intersection(v.parts, item.parts).length === v.parts.length) {
              // 证明匹配成功
              v.content = item.content || "";
              v.check = true;
              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;
    },

    // 保存
    handleSave() {
      if (!this.formData.name) {
        this.$message.error("请输入巡视检查名称");
        return;
      }
      if (!this.formData.type) {
        this.$message.error("请选择巡检类型");
        return;
      }
      this.formData.items = this.getCheckData(this.xcTreeData);

      if (this.$route.query.id) {
        this.formData.id = this.$route.query.id;
      } 
      
      if (this.formData.id){
        putInspectionProjectData(this.formData).then(() => {
        this.$message.success("保存成功");
      }); 
      }else {
        postInspectionProjectData(this.formData).then((res) => {
        if (res.data?.id) {
          this.formData.id = res.data.id;
        }
        this.$message.success("保存成功");
        });
      }
      
    },
  },
  mounted() {
    this.getDetailsData();
  },
};
</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;
  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>