xjsaas-ui/src/views/xj/document/maintenance-notice/components/edit-dialog.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-11-20 11:58:33
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2025-01-15 16:18:16
 * @FilePath: \znxjxt-ui\src\views\xj\document\maintenance-notice\components\edit-dialog.vue
 * @Description: 养护通知单编辑弹窗
-->
<template>
  <div class="edit-dialog">
    <el-form
      class="editForm"
      ref="editForm"
      :model="editForm"
      :rules="rules"
      label-width="7rem"
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="道路名称:" prop="segmentId">
            <el-select
              v-model="editForm.segmentId"
              placeholder="请选择路段"
              clearable
            >
              <el-option
                v-for="item in segmentList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="开始桩号:" prop="stakeStart">
            <el-input v-model="editForm.stakeStart" placeholder="K0000+000" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束桩号:" prop="stakeEnd">
            <el-input v-model="editForm.stakeEnd" placeholder="K0000+000" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="养护负责人:" prop="receiver">
            <el-input
              clearable
              v-model="editForm.receiver"
              placeholder="请输入负责人名称"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-form-item label="养护内容:" prop="taskDescription">
          <fssm-scroll style="max-height: 10rem">
            <div
              class="content-box"
              v-for="(item, index) in editForm.taskDescription"
              :key="`content-box-${index}`"
            >
              <el-col :span="21">
                <el-input
                  type="textarea"
                  resize="none"
                  placeholder="请输入养护内容"
                  v-model="editForm.taskDescription[index]"
                />
              </el-col>
              <el-col :span="2">
                <span
                  v-if="index < 1"
                  class="el-icon-circle-plus-outline"
                  @click="handleAddContent"
                ></span>
                <span
                  v-else
                  class="el-icon-delete"
                  @click="handleDeleteContent(index)"
                ></span>
              </el-col>
            </div>
          </fssm-scroll>
        </el-form-item>
      </el-row> -->
    </el-form>
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>选择病害</span>
        <el-button style="float: right; padding: 3px 0" type="text"
          >查看已选数据</el-button
        >
      </div>
      <!-- 列表查询条件 -->
      <el-form
        :model="diseaseForm"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="道路名称" prop="segmentName">
          <el-select
            v-model="diseaseForm.segmentName"
            placeholder="请选择路段"
            filterable
            clearable
          >
            <el-option
              v-for="item in segmentList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="采集时间" prop="dateTime">
          <el-date-picker
            v-model="dateTime"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            clearable
          />
        </el-form-item>
        <el-form-item label="病害类型" prop="paramsDefectType">
          <el-cascader
            v-model="paramsDefectType"
            :options="tableDefect"
            :props="{
              checkStrictly: true,
              emitPath: true,
              children: 'subTypes',
            }"
            clearable
          ></el-cascader>
        </el-form-item>
        <!-- <el-form-item label="病害状态" prop="state">
          <el-select
            v-model="diseaseForm.state"
            placeholder="请选择病害状态"
            clearable
          >
            <el-option
              v-for="item in defectStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item label="上下行" prop="inspectDirection">
          <el-select
            v-model="diseaseForm.inspectDirection"
            placeholder="请选择"
            clearable
          >
            <el-option label="上行" value="0" />
            <el-option label="下行" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="公里桩" prop="stakeRange">
          <el-input
            v-model="diseaseForm.stakeStart"
            placeholder="起始公里桩"
            style="width: 10rem"
            clearable
          />
          <span style="margin: 0 5px">-</span>
          <el-input
            v-model="diseaseForm.stakeEnd"
            placeholder="终止公里桩"
            style="width: 10rem"
            clearable
          />
          <el-tooltip
            class="item"
            effect="dark"
            content="格式为K0000+000"
            placement="top"
          >
            <i class="el-icon-info"></i>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="病害id" prop="id">
          <el-input
            v-model="diseaseForm.id"
            placeholder="请填写病害id"
            clearable
          />
        </el-form-item>
        <el-form-item label="病害长度" prop="lengthRange">
          <el-input-number
            v-model="diseaseForm.minLen"
            controls-position="right"
            placeholder="最小长度"
            :min="0"
          ></el-input-number>
          <span style="margin: 0 5px">-</span>
          <el-input-number
            v-model="diseaseForm.maxLen"
            controls-position="right"
            placeholder="最大长度"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="快照id" prop="snapshotId">
          <el-input
            v-model="diseaseForm.snapshotId"
            placeholder="请填写快照id"
            clearable
          />
        </el-form-item>
        <el-form-item label="病害面积" prop="areaRange">
          <el-input-number
            v-model="diseaseForm.minArea"
            controls-position="right"
            placeholder="最小面积"
            :min="0"
          ></el-input-number>
          <span style="margin: 0 5px">-</span>
          <el-input-number
            v-model="diseaseForm.maxArea"
            controls-position="right"
            placeholder="最大面积"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="巡检任务" prop="taskId">
          <el-select
            v-model="diseaseForm.taskId"
            placeholder="请选择巡检任务"
            filterable
            clearable
          >
            <el-option
              v-for="item in taskList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否已确认" prop="confirmStatus">
          <el-select
            v-model="diseaseForm.confirmStatus"
            placeholder="请选择"
            clearable
          >
            <el-option label="确认" value="1" />
            <el-option label="未确认" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <el-table
        ref="roadTable"
        v-loading="loading"
        :data="diseaseList"
        :row-key="getRowKey"
        @selection-change="handleSelectionChange"
        height="40rem"
        style="width: 100%"
      >
        <el-table-column
          type="selection"
          :reserve-selection="true"
          width="55"
          align="center"
        />
        <el-table-column label="路段名称" align="center" prop="segmentName" />
        <el-table-column label="采集时间" align="center" prop="createdTime">
          <template slot-scope="scope">
            <span>{{ new Date(scope.row.createdTime).toLocaleString() }}</span>
          </template>
        </el-table-column>
        <el-table-column label="病害类型" align="center" prop="defectTypeName">
        </el-table-column>
        <!-- <el-table-column label="病害状态" align="center" prop="state">
          <template slot-scope="scope">
            <span>{{ filterState(scope.row.state) }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="校验状态" align="center" prop="dataStatus">
          <template slot-scope="scope">
            <span>{{
              scope.row.dataStatus
                ? scope.row.dataStatus === 1
                  ? "未校验"
                  : "已校验"
                : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="开始桩号" align="center" prop="stakeStart" />
        <el-table-column label="结束桩号" align="center" prop="stakeEnd" />
        <el-table-column label="病害图片" align="center" prop="media">
          <template slot-scope="scope">
            <img
              @click="showScreenImg(scope.row)"
              height="50"
              :src="scope.row.mediaUrl"
            />
          </template>
        </el-table-column>
        <el-table-column label="病害长度" align="center" prop="targetLen">
          <template slot-scope="scope">
            {{ scope.row.targetLen * 1 <= 0 ? "" : `${scope.row.targetLen}米` }}
          </template>
        </el-table-column>
        <el-table-column label="病害面积" align="center" prop="targetArea" />
        <el-table-column
          label="道路方向"
          align="center"
          prop="inspectDirection"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.inspectDirection === "0" ? "上行" : "下行"
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <div class="pagination-part">
        <el-pagination
          background
          :current-page.sync="pagination.page"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size.sync="pagination.size"
          @size-change="handleSizeChange"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableTotal"
        >
        </el-pagination>
      </div>
    </el-card>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
import { addMaintenanceNotice, listDefect } from "@/api/xj/document";
export default {
  name: "EditDialog",
  components: { FssmScroll },
  props: {
    dialogItem: {
      type: Object,
      default: () => {},
    },
    segmentList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      // 编辑表单
      editForm: {
        // 病害id
        defectId: "",
        // 道路名称
        segmentId: "",
        // 开始桩号
        stakeStart: "",
        // 结束桩号
        stakeEnd: "",
        // 养护单位项目负责人
        receiver: "",
        // 养护内容
        // taskDescription: [""],
      },
      // 表单验证规则
      rules: {
        segmentId: [
          { required: true, message: "请选择路段", trigger: "change" },
        ],
        stakeStart: [
          {
            required: true,
            message: "请输入开始桩号",
            trigger: "blur",
          },
          {
            pattern: /^K\d{4}\+\d{3}$/,
            message: "请输入正确的桩号格式",
            trigger: "blur",
          },
        ],
        stakeEnd: [
          {
            required: true,
            message: "请输入结束桩号",
            trigger: "blur",
          },
          {
            pattern: /^K\d{4}\+\d{3}$/,
            message: "请输入正确的桩号格式",
            trigger: "blur",
          },
        ],
        receiver: [
          { required: true, message: "请输入负责人名称", trigger: "blur" },
        ],
        // taskDescription: [
        //   {
        //     type: "array",
        //     required: true,
        //     defaultField: {
        //       type: "string",
        //       required: true,
        //       message: "请完整填写内容",
        //     },
        //   },
        // ],
      },

      // 病害列表查询条件
      diseaseForm: {
        segmentName: "",
        defectType: "",
        classType: "",
        taskId: "",
        state: "",
        inspectDirection: "",
        stakeStart: "",
        stakeEnd: "",
        warningFlag: null,
        minLen: undefined,
        maxLen: undefined,
        minArea: undefined,
        maxArea: undefined,
        confirmStatus: "",
        id: "",
        snapshotId: "",
        taskId: "",
      },
      // 采集时间绑定
      dateTime: [],
      // 病害类型级联下拉绑定
      paramsDefectType: [],
      // 病害类型级联下拉数据
      tableDefect: [],
      // 巡检任务下拉数据
      taskList: [],
      // 病害列表数据
      diseaseList: [],
      // 列表加载状态
      loading: false,
      // 列表选中数据
      checkList: [],
      // 分页-列表总数
      tableTotal: 0,
      // 分页-页数页码
      pagination: {
        page: 1,
        size: 10,
      },
    };
  },
  watch: {
    dialogItem: {
      handler(val) {
        this.editForm = {
          ...val,
          segmentId: val.segmentId === "未知路段" ? "" : val.segmentId,
          id: null,
          defectId: val.id,
          createdTime: null,
          // taskDescription: [
          //   `${val.createdTimeLocal}  ${val.roadName || ""}-${
          //     val.segmentName || ""
          //   } 主线 ${val.stakeStart || ""}-${val.stakeEnd || ""} 有${
          //     val.defectTypeName
          //   }`,
          // ],
        };
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.getDiseaseList();
  },
  methods: {
    // /**
    //  * @description: 添加养护内容
    //  */
    // handleAddContent() {
    //   this.editForm.taskDescription.push("");
    // },

    // /**
    //  * @description: 删除养护内容
    //  */
    // handleDeleteContent(index) {
    //   this.editForm.taskDescription.splice(index, 1);
    // },

    handleQuery() {},

    resetQuery() {},

    /**
     * @description: 获取病害列表数据
     * @param {*}
     * @return {*}
     */
    getDiseaseList() {
      this.loading = true;
      const params = {
        ...this.searchForm,
        ...this.pagination,
        startTime: this.dateTime ? this.dateTime[0] : "",
        endTime: this.dateTime ? this.dateTime[1] : "",
      };
      listDefect(params)
        .then((response) => {
          this.diseaseList = response.rows;
          this.tableTotal = response.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    /**
     * @description: 列表行绑定id
     * @param {*} row
     * @return {*}
     */
    getRowKey(row) {
      return row.snapshotId;
    },

    /**
     * @description: 列表选择改变事件
     * @param {*} selection
     * @return {*}
     */
    handleSelectionChange(selection) {
      this.checkList = selection;
    },

    /**
     * @description: 切换分页
     * @param {*} arg
     * @return {*}
     */
    handleCurrentChange(arg) {
      this.pagination.page = arg;
      this.getDiseaseList();
    },

    /**
     * @description: 切换每条/页
     * @param {*} arg
     * @return {*}
     */
    handleSizeChange(arg) {
      this.pagination.size = arg;
      this.getDiseaseList();
    },

    /**
     * @description: 取消
     */
    cancel() {
      this.$emit("cancel");
    },

    /**
     * @description: 提交表单
     */
    submitForm() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          addMaintenanceNotice(this.editForm).then(({ code, data }) => {
            if (code === 200) {
              this.$message.success("生成成功");
              this.$emit("cancel");
            } else {
              this.$message.error(data);
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.edit-dialog {
  width: 100%;
  height: 100%;
}

.editForm {
  .el-select {
    width: 100%;
  }

  .content-box {
    display: flex;

    span {
      font-size: 1.5rem;
      line-height: 3rem;
    }

    .el-icon-circle-plus-outline {
      color: #08ce29;
    }

    .el-icon-delete {
      color: #f01515;
    }

    > div {
      margin: 0.5rem 0;
    }
  }
}

/* 分页样式 */
.pagination-part {
  width: 100%;
  display: flex;
  padding-top: 1rem;
  justify-content: flex-end;
}

/* 页脚 */
.dialog-footer {
  padding: 1rem 0;
  display: flex;
  justify-content: flex-end;
}
</style>