ld-pc/src/views/goods/planList.vue

/**
 * 计划管理 计划列表
 */
<template>
  <div style="height: 100%">
    <el-row class="top-main" style="height: 15%">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>点检管理</el-breadcrumb-item>
        <el-breadcrumb-item>点检保养列表</el-breadcrumb-item>
      </el-breadcrumb>
      <h3>点检保养列表</h3>
    </el-row>
    <el-row class="body-main" style="min-height: 85%">
      <!-- 搜索筛选 -->
      <el-form inline ref="searchReset" :model="searchData">
        <el-form-item label="点检名称:" prop="name">
          <el-input
            size="small"
            v-model="searchData.name"
            placeholder="请输入"
            style="width: 150px"
          ></el-input>
        </el-form-item>
        <el-form-item label="点检状态:" prop="checkStatus">
          <el-select
            size="small"
            v-model="searchData.checkStatus"
            placeholder="请选择"
            style="width: 100px"
          >
            <el-option
              v-for="item in planStatus"
              :label="item.value"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="责任人:" prop="principleOne">
          <el-select
            size="small"
            v-model="searchData.principleOne"
            placeholder="请选择"
            style="width: 100px"
            @visible-change="getPrincipleData"
          >
            <el-option
              v-for="item in principleData"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="巡检人:" prop="tourId">
          <el-select
            size="small"
            v-model="searchData.tourId"
            placeholder="请选择"
            style="width: 100px"
            @visible-change="getTourData"
          >
            <el-option
              v-for="item in tourData"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备名称:" prop="deviceName">
          <el-input
            size="small"
            v-model="searchData.deviceName"
            placeholder="请输入"
            style="width: 150px"
          ></el-input>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button
            size="small"
            type="primary"
            @click="$router.push('/goods/addFailSafePlan')"
            >新建</el-button
          >
        </el-form-item>
        <el-form-item style="float: right">
          <el-button size="small" @click="reset">重置</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button size="small" type="primary" @click="search"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <el-alert type="info" :closable="false" show-icon>
        <slot name="title">
          <div style="font-size: 18px" v-html="spotCheckNum">
            {{ spotCheckNum }}
          </div>
        </slot>
      </el-alert>
      <!--列表-->
      <el-table
        size="mini"
        :data="listData"
        highlight-current-row
        v-loading="loading"
        element-loading-text="拼命加载中"
        :header-cell-style="{ 'background-color': '#FAFAFA', color: '#000' }"
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column
          align="center"
          prop="name"
          label="点检保养名称"
          min-width="50px"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="deviceNo"
          label="设备编号"
          min-width="50px"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="deviceName"
          label="设备名称"
          min-width="50px"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="deviceType"
          label="型号"
          min-width="40px"
        >
        </el-table-column>
        <el-table-column align="center" label="责任人" min-width="50px">
          <template slot-scope="scope">
            <span v-if="scope.row.principleOneName">{{
              scope.row.principleOneName
            }}</span>
            <span v-if="scope.row.principleTwoName"
              >,{{ scope.row.principleTwoName }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="tourName"
          label="巡检人"
          min-width="30px"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="nos"
          label="编号"
          min-width="20px"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="checkStatus"
          label="计划状态"
          min-width="30px"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.checkStatus === 1">待响应</span>
            <span v-else-if="scope.row.checkStatus === 2">处理中</span>
            <!-- <span v-else-if="scope.row.checkStatus === 3">已响应</span> -->
            <span v-else>已完成</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="createdTime"
          label="点检保养表创建日期"
          min-width="50px"
        >
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="45px">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="jumpListinfo(scope.row)"
              >查看</el-button
            >
            <el-button size="mini" type="text" @click="update(scope.row)"
              >编辑</el-button
            >
            <el-button
              v-if="!scope.row.pauseFlag"
              size="mini"
              type="text"
              @click="userLocks(scope.row)"
              :disabled="scope.row.versionId === '1'"
              >禁用</el-button
            >
            <el-button
              v-else
              size="mini"
              type="text"
              @click="userLocks(scope.row)"
              >解禁</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <template v-if="listData.length">
        <Pagination
          :childMsg="pageInfo"
          style="display: flex; justify-content: flex-end; margin-top: 20px"
          @currentChange="get_page"
        >
        </Pagination>
      </template>
    </el-row>
    <!-- 新建计划 -->
    <el-dialog
      :visible.sync="showView"
      :close-on-click-modal="false"
      @close="showView = false"
    >
      <el-row class="create-plan">
        <el-button
          type="primary"
          style="width: 50%"
          @click="$router.push('/goods/addFirstPlan')"
          >首件检验放行计划</el-button
        >
      </el-row>
      <el-row class="create-plan">
        <el-button
          type="primary"
          style="width: 50%"
          @click="$router.push('/goods/addFailSafePlan')"
          >防错系统计划</el-button
        >
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import { resetMixin, exportMixin } from "@/utils/mixin";
import { planlist, unUsePlan, getPrinciple, getTour } from "@/api/project";
export default {
  mixins: [resetMixin, exportMixin],
  data() {
    return {
      // 总数
      total: 0,
      // 处理中
      clz: 0,
      // 已完成
      ywc: 0,
      // 待响应
      dxy: 0,
      showView: false,
      loading: false, //是显示加载
      searchData: {
        name: "",
        checkStatus: "",
        principleOne: "",
        tourId: "",
        deviceName: "",
        page: 1,
        size: this.$store.state.pageSize,
      },
      // 责任人数据
      principleData: [],
      // 巡检人数据
      tourData: [],
      // 点检保养状态
      planStatus: [
        { id: 1, value: "待响应" },
        { id: 2, value: "处理中" },
        // { id: 3, value: "已响应" },
        { id: 3, value: "已完成" },
      ],
      // 计划数据
      listData: [],
    };
  },
  // 注册组件
  components: {
    Pagination,
  },
  created() {
    this.getdata();
  },
  computed: {
    spotCheckNum() {
      return ` 共 <span style="color:red;">${this.total}</span> 项 <span style="margin-left:50px;">处理中 : </span><span style="color:blue">${this.clz}</span> 项<span style="margin-left:50px;">已完成 : </span><span style="color:blue">${this.ywc}</span> 项<span style="margin-left:50px;">待响应 : </span><span style="color:red">${this.dxy}</span> 项`;
    },
  },
  methods: {
    // ...mapMutations(['savePlanFilterInfo']),
    // 获取计划列表
    getdata() {
      this.loading = true;
      planlist(this.searchData).then((res) => {
        if (res.status === "20000") {
          this.listData = res.data.row;
          this.pageInfo.total =  parseInt(res.data.total)
          this.total = parseInt(res.data.total)
          let message = JSON.parse(res.message)
          this.dxy = message[0]
           this.clz = message[1]
           this.ywc = message[2]
        } else {
          this.listData = [];
          this.$message.error("暂无数据");
        }
        this.loading = false;
      });
    },
    // 获取责任人
    getPrincipleData() {
      getPrinciple().then((res) => {
        if (res.status === "20000") {
          this.principleData = res.data;
        }
      });
    },
    // 获取巡检人
    getTourData() {
      getTour().then((res) => {
        if (res.status === "20000") {
          this.tourData = res.data;
        }
      });
    },
    // 禁用/解禁
    userLocks(row) {
      this.$confirm(`是否${row.pauseFlag ? "解禁" : "禁用"}`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          unUsePlan({ versionId: row.versionId, updateFlag: !row.pauseFlag }).then((res) => {
            if (res.status === "20000") {
              this.$message.success("操作成功");
            }
            this.getdata();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 跳转编辑页
    update(row) {
      this.$router.push({
        path: "/goods/addFailSafePlan",
        query: { id: row.versionId },
      });
    },
    // 查看
    jumpListinfo(row) {
      console.log(row)
      this.$router.push({
        path: "/goods/failSafePlan",
        query: { id: row.versionId },
      });
    },
  },
};
</script>

<style scoped>
/deep/ .el-dialog {
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  border-radius: 20px;
}
.top-main {
  padding: 20px 20px 0 20px;
  height: 100%;
}
.body-main {
  border: 20px solid #f0f2f5;
  padding: 20px 20px 0 20px;
}
.create-plan {
  text-align: center;
  margin-bottom: 20px;
}
.el-alert{
  padding:6px 10px;
}
</style>