nnbp_ui/src/views/detection/list/index.vue

<template>
  <div style="padding: 10px">
    <div class="formbody">
      <el-form
        :inline="true"
        v-model="queryparameters"
        class="demo-form-inline"
      >
        <el-form-item label="设施台账">
          <el-select
            v-model="queryparameters.facilitiesId"
            class="m-1"
            placeholder="请选择"
          >
            <el-option
              v-for="item in alldevices"
              :label="item.exId"
              :value="item.exId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划状态" v-if="currentstatus == 1">
          <el-select
            v-model="queryparameters.status"
            class="m-1"
            placeholder="请选择"
          >
            <el-option
              v-for="item in detection_status"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="道路名">
          <el-select
            v-model="queryparameters.taskArea"
            class="m-2"
            placeholder="请选择"
          >
            <el-option
              v-for="item in alldevices"
              :label="item.roadName"
              :value="item.roadName"
            ></el-option>
          </el-select>
        </el-form-item>
        <div style="float: right">
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="adddetection">新增</el-button>
          </el-form-item>
        </div>
      </el-form>

      <div>
        <el-table
          :data="tableData"
          class="eltable"
          style="width: 100%"
          @row-click="tblrowclick"
        >
          <el-table-column label="设备台账">
            <template #default="scope">
              {{
                alldevices.filter((i) => i.id === scope.row.facilitiesId)[0]
                  ?.exId ?? "-"
              }}
            </template>
          </el-table-column>

          <el-table-column prop="taskCode" label="设施道路">
            <template #default="scope">
              {{
                alldevices.filter((i) => i.id === scope.row.facilitiesId)[0]
                  ?.roadName ?? "-"
              }}
            </template>
          </el-table-column>
          <el-table-column prop="detectionYear" label="年计划" width="180" />
          <el-table-column prop="detectionMonth" label="月计划" width="180" />
          <el-table-column label="运维设施长度" width="180">
            <template #default="scope">
              {{
                alldevices.filter((i) => i.id === scope.row.facilitiesId)[0]
                  ?.fLength ?? ""
              }}
            </template>
          </el-table-column>
          <el-table-column label="计划状态" width="180">
            <template #default="scope">
              {{
                detection_status.filter(
                  (i) => i.value.toString() === scope.row.status.toString()
                )[0]?.label ?? "-"
              }}
            </template>
          </el-table-column>
          <el-table-column label="检测类型">
            <template #default="scope">
              {{
                detection_type.filter(
                  (i) => i.value.toString() === scope.row.detectionType.toString()
                )[0]?.label ?? "-"
              }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template #default="scope">
              <el-button text size="small" @click.stop="edittask(scope.row)"
                >修改
              </el-button>
              <el-popconfirm title="确定删除?" @confirm="deltask(scope.row)">
                <template #reference>
                  <el-button text size="small" @click.stop="">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>

          <!-- <el-table-column prop="ext1" label="责任人" width="180">
            <template #default="scope">
              {{ scope.row.ext1 === "" ? "未派发" : scope.row.ext1 }}
            </template>
          </el-table-column> -->
        </el-table>
        <div style="position: relative; padding-right: 20px; margin-top: -20px">
          <Pagination
            :total="pagedata.total ?? 0"
            v-show="pagedata.total > 0"
            v-model:page="queryparameters.pageNum"
            v-model:limit="queryparameters.pageSize"
            @pagination="getList"
          ></Pagination>
          <!-- <el-pagination
          style="float: right"
          small
          background
          :page-sizes="[10, 20, 30, 50]"

          :page-size="10"
          layout=" sizes,prev, pager, next"
          :total="pagedata.total??0"
          class="mt-4"
        /> -->
        </div>
      </div>
    </div>

    <el-dialog
      v-model="showadd"
      v-loading="loading"
      title="新增检测计划"
      width="70%"
      draggable
    >
      <div>
        <el-form :model="detectioninfo">
          <el-row>
            <el-col :span="12">
              <el-form-item label="关联设施" label-width="150px">
                <el-select
                  v-model="detectioninfo.facilitiesId"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in alldevices"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="检测类型" label-width="150px">
                <el-select
                  v-model="detectioninfo.detectionType"
                  filterable
                  placeholder="请选择类型"
                >
                  <el-option
                    v-for="item in detection_type"
                    :label="item.label"
                    :value="parseInt(item.value)"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="计划年" label-width="150px">
                <el-select
                  v-model="detectioninfo.detectionYear"
                  filterable
                  placeholder="请选择计划年"
                >
                  <el-option
                    v-for="item in getyears()"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="8">
              <el-form-item label="计划月" label-width="150px">
                <el-select
                  v-model="detectioninfo.detectionMonth"
                  filterable
                  placeholder="请选择计划月"
                >
                  <el-option
                    v-for="item in getmonth()"
                    :label="item"
                    :value="item"
                  ></el-option> </el-select></el-form-item
            ></el-col>
            <el-col :span="8">
              <el-form-item label="计划周" label-width="150px">
                <el-input
                  v-model="detectioninfo.detectionWeek"
                  placeholder="请输入周"
                ></el-input> </el-form-item
            ></el-col>
          </el-row>

          <el-row>
            <el-col :span="12"
              ><el-form-item label="计划作业组" label-width="150px">
                <el-tree-select
                  v-model="detectioninfo.detectionDept"
                  multiple
                  :data="treedept"
                  check-strictly="true"
                /> </el-form-item
            ></el-col>
            <el-col :span="12"
              ><el-form-item label="计划备注" label-width="150px">
                <el-input
                  v-model="detectioninfo.detectionDes"
                  type="textarea"
                  placeholder="请输入"
                ></el-input> </el-form-item
            ></el-col>
          </el-row>

          <el-row>
            <el-col :span="24"
              ><el-form-item label="备注" label-width="150px">
                <el-input
                  v-model="detectioninfo.detectionRemark"
                  type="textarea"
                  placeholder="请输入"
                ></el-input> </el-form-item
            ></el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showadd = false">取消</el-button>
          <el-button type="primary" @click="onadd">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { defineComponent, ref, reactive, onMounted, computed } from "vue";
import { useDict } from "@/utils/dict";
import router from "../../../router";
// 分页组件
import Pagination from "@/components/Pagination";

import { listFacilities } from "@/api/system/facilities";

import { listDetection,addDetection } from "@/api/system/detection";
import { listDept, getDept } from "@/api/system/dept";
import { treeselect as deptTreeselect } from "@/api/system/dept";
import { cloneDeep } from "lodash";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
import { delDetection, updateDetection } from "../../../api/system/detection";

const { detection_status, detection_type } = useDict(
  "detection_status",
  "detection_type"
);

const queryparameters = ref({
  status: "",
  facilitiesId: "",
  pageNum: 1,
  pageSize: 10,
});

const { proxy } = getCurrentInstance();
const showadd = ref(false);
const loading = ref(false);
const tableData = ref([]);
const pagedata = ref({});
const route = useRoute();
const currentstatus = computed(() => route.params.status);

const alldevices = ref([]);

listFacilities().then((res) => {
  alldevices.value = res.rows;
});

const detectioninfo = ref({});
const maintaininfo = ref();
const initadd = () => {
  detectioninfo.value = {
    detectionDept: "",
    detectionDes: "",
    detectionLogs: null,
    detectionMonth: "",
    detectionRemark: "",
    detectionType: null,
    detectionWeek: "",
    detectionYear: "",
    ext1: "",
    ext2: "",
    id:null,
    facilitiesId: 1,
    remark: null,
    status: 1,
  };
};
initadd();

const adddetection = () => {
  initadd();
  showadd.value = true;
};

const tblrowclick = (row) => {
  // console.log(row)
  router.push(`/detection/detail/${row.id}`);
};

const onadd = () => {
 loading.value = true;
  if (detectioninfo.value.id == null) {

    var detectioninfoobj = cloneDeep(detectioninfo.value);
    // delete detectioninfoobj.detectionDept;
    detectioninfoobj.detectionDept = (detectioninfo.value.detectionDept instanceof Array) ? detectioninfo.value.detectionDept.join(",") : '';
    addDetection(detectioninfoobj).then(res => {
      loading.value = false;
      showadd.value = false;
      getList();
    })

  } else {
      var detectioninfoobj = cloneDeep(detectioninfo.value);
    // delete detectioninfoobj.detectionDept;
    detectioninfoobj.detectionDept = (detectioninfo.value.detectionDept instanceof Array) ? detectioninfo.value.detectionDept.join(",") : '';
    updateDetection(detectioninfoobj).then(res => {
      loading.value = false;
      showadd.value = false;
      getList();
    })

  }



};

const getList = () => {
  if (currentstatus.value != 1) {
    if (currentstatus.value == 2) {
      queryparameters.value.status = 1;
    } else {
      queryparameters.value.status = currentstatus.value;
    }
  } else {
    queryparameters.value.status = "";
  }
  listDetection(queryparameters.value).then((response) => {
    tableData.value = response.rows;
    pagedata.value = response;
  });
};
getList();

const getyears = () => {
  var years = [];
  for (var i = 0; i <= 100; i++) {
    years.push((2019 + i).toString());
  }
  return years;
};
const getmonth = () => {
  var months = [];
  for (var i = 0; i < 12; i++) {
    if (i < 9) {
      months.push("0" + (1 + i).toString());
    } else {
      months.push((1 + i).toString());
    }
  }
  return months;
};



const edittask = (row) => {
  detectioninfo.value = cloneDeep(row);
   if (detectioninfo.value.detectionDept!=null && detectioninfo.value.detectionDept!="" && detectioninfo.value.detectionDept!=undefined && !Array.isArray(detectioninfo.value.detectionDept)) {
          detectioninfo.value.detectionDept = detectioninfo.value.detectionDept.split(",").map(i => parseInt(i));
        }
  showadd.value = true;
};
const deltask = (row) => {
  delDetection(row.id).then((res) => {
    ElMessage.success("删除成功");
    getList();
  });
};


onMounted(() => {});
function setdatakey(dept) {
  if (dept.children) {
    dept.children = dept.children.map((i) => {
      return setdatakey(i);
    });
  }
  dept["value"] = dept.id;
  return dept;
}
const treedept = ref([]);
deptTreeselect().then((res) => {
  treedept.value = [setdatakey(res.data[0])];
});
</script>

<style lang="scss" scoped>
.formbody {
  background: #fff;
  width: 100%;
  border-radius: 5px;
  min-height: 80vh;
  padding: 15px 10px;
  .eltable {
    border: 1px solid #e5e9f2;
    border-radius: 5px;
  }
}
</style>

<style>
.el-table__row:hover {
  cursor: pointer;
}
.el-select {
  width: 100%;
}
</style>