wanda-bm-guide/src/views/equipment/table/rcwxTable.vue

<!-- 维修-->
<template>
  <div class="rcwx-list">
    <div class="eq-list-top">
      <el-input
        placeholder="搜索设备名称或内码"
        size="small"
        @keyup.enter.native="pageChanged(1)"
        @blur="pageChanged(1)"
        clearable
        prefix-icon="el-icon-search"
        v-model="sbjc"
        style="width:192px;margin-right:12px"
      ></el-input>
      <el-input
        placeholder="搜索位置名称或内码"
        size="small"
        @keyup.enter.native="pageChanged(1)"
        @blur="pageChanged(1)"
        clearable
        prefix-icon="el-icon-search"
        v-model="wzjc"
        style="width:192px;margin-right:12px"
      ></el-input>
      <el-input
        placeholder="搜索描述"
        size="small"
        clearable
        @keyup.enter.native="pageChanged(1)"
        @blur="pageChanged(1)"
        prefix-icon="el-icon-search"
        v-model="matters"
        style="width:192px;margin-right:12px"
      ></el-input>
      <el-input
        placeholder="搜索工单编号"
        size="small"
        clearable
        @keyup.enter.native="pageChanged(1)"
        @blur="pageChanged(1)"
        prefix-icon="el-icon-search"
        v-model="wonum2"
        style="width:192px;margin-right:12px"
      ></el-input>
      <Select
        @change="confirmMore"
        @confirm="confirmMore"
        style="margin-right:12px;"
        v-model="status"
        width="200"
        tipPlace="top"
        caption="任务状态描述："
        multiple
        :selectdata="statusOption"
      ></Select>
      <Select
        @change="pageChanged(1)"
        style="margin-right:12px;"
        v-model="source"
        width="180"
        tipPlace="top"
        caption="报修来源："
        :selectdata="sourceOption"
      ></Select>
      <!-- <el-input
                placeholder='搜索执行人'
                size='small'
                clearable
                @keyup.enter.native='pageChanged(1)'
                @blur='pageChanged(1)'
                prefix-icon='el-icon-search'
                v-model='people'
                style='width:192px;margin-right:12px'
      ></el-input>-->
      <input-dialog :type="5" @confirm="confirm"></input-dialog>
    </div>
    <div ref="tableBox">
      <el-table :data="tableData" :border="true" style="width: 100%" @row-click="innerTable">
        <el-table-column type="index" label="序号" width="60" :index="indexMethod"></el-table-column>
        <el-table-column prop="sbmc" label="设备名称" show-overflow-tooltip resizable min-width="100">
          <template slot-scope="{row}">{{row.sbmc || '--'}}</template>
        </el-table-column>
        <el-table-column prop="matters" label="位置名称" width="240" show-overflow-tooltip resizable>
          <template slot-scope="{row}">{{row.wzjc || '--'}}</template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="问题描述"
          show-overflow-tooltip
          resizable
          min-width="280"
        >
          <template slot-scope="{row}">{{row.description || '--'}}</template>
        </el-table-column>
        <el-table-column prop="brand" label="报修照片" width="80">
          <template slot-scope="{row}">
            <div
              v-if="row.repair_photos_num"
              style="cursor:pointer;color: #0091ff;"
              @click.stop="clickPicRepair(row)"
            >{{row.repair_photos_num+'张'}}</div>
            <div v-else>{{'--'}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="任务状态描述"
          show-overflow-tooltip
          resizable
          min-width="200"
        >
          <template slot-scope="{row}">{{row.status || '--'}}</template>
        </el-table-column>
        <el-table-column prop="brand" label="完工照片" width="80">
          <template slot-scope="{row}">
            <div
              v-if="row.finish_photos_num"
              style="cursor:pointer;color: #0091ff;"
              @click.stop="clickPicFinish(row)"
            >{{row.finish_photos_num+'张'}}</div>
            <div v-else>{{'--'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="reportdate" label="要求完成时间" width="140">
          <template slot-scope="{row}">{{row.schedfinish?formatterTime(row.schedfinish): '--'}}</template>
        </el-table-column>
        <el-table-column prop="sjjssj" label="实际完工时间" width="140">
          <template slot-scope="{row}">{{row.wotjyssj?formatterTime(row.wotjyssj): '--'}}</template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="报修来源"
          show-overflow-tooltip
          resizable
          min-width="200"
        >
          <template slot-scope="{row}">{{row.bxfwlymc || '--'}}</template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="执行人"
          show-overflow-tooltip
          resizable
          min-width="80"
        >
          <template slot-scope="{row}">{{row.lead || '--'}}</template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="工单编号"
          show-overflow-tooltip
          resizable
          min-width="80"
        >
          <template slot-scope="{row}">
            <div
              v-if="row.wonum"
              @click.stop="staff(row)"
              style="cursor:pointer;color: #0091ff;"
            >{{row.wonum}}</div>
            <div v-else>{{'--'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="assetnum" label="设备内码" show-overflow-tooltip resizable width="80">
          <template slot-scope="{row}">{{row.assetnum || '--'}}</template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="位置内码"
          show-overflow-tooltip
          resizable
          min-width="80"
        >
          <template slot-scope="{row}">{{row.location || '--'}}</template>
        </el-table-column>
      </el-table>
    </div>
    <div class="foot">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="size"
        :current-page="currentPage"
        @prev-click="pageChanged"
        @next-click="pageChanged"
        @current-change="pageChanged"
      ></el-pagination>
      <pic-large :imgUrl="imgUrl" ref="picLargeOpen"></pic-large>
    </div>
  </div>
</template>
<script>
import { queryWxzy, queryWxzyImg } from "@/api/equipmentList.js";
import { mapGetters } from "vuex";
import inputDialog from "./inputDIalog";
import { Select } from "meri-design";
import { querySelect } from "@/api/public.js";
import { formatterTime, number_format } from "@/utils/format.js";
export default {
  components: { Select, inputDialog },
  data() {
    return {
      tableData: [],
      total: 0,
      currentPage: 1,
      reportdate: "",
      sjjssj: "",
      sbjc: "",
      wzjc: "",
      matters: "",
      wonum2: "",
      wonum: "",
      sourceOption: [],
      statusOption: [],
      source: "全部",
      formatterTime,
      number_format,
      imgUrl: [],
      people: "",
      locationName: "",
      keyword: "",
      status: [], //搜索状态描述
      getStatus: [
        "新建",
        "待派工",
        "已派工",
        "待验收",
        "验收通过",
        "工单执行退回",
        "问题待解决",
        "执行中"
      ] //默认选项如果statusOption存在则写入status中
    };
  },
  computed: {
    ...mapGetters(["floorSelect"])
  },
  props: ["smsxt", "diff", "tabLabel", "size", "assetnum"],
  methods: {
    //序号的方法
    indexMethod(index) {
      return (this.currentPage - 1) * this.size + index + 1;
    },
    innerTable(row) {
      if (row.workorderid) {
        window.open(
          `http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=JXWO&uniqueid=${row.workorderid}`
        );
      }
    },
    //跳转工单编号
    staff(row) {
      console.log(row);
      if (row.wonum) {
        window.open(
          `http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=JXWO&uniqueid=${row.wonum}`
        );
      }
    },
    //多余输入框监听
    confirm(reportdate, real, locationName, people) {
      this.reportdate = reportdate;
      this.sjjssj = real;
      this.locationName = locationName;
      this.people = people;
      this.pageChanged(1);
    },
    pageChanged(page) {
      this.currentPage = page;
      this.getList();
    },
    getList() {
      let getParams = {
        data: {
          smsxt: this.smsxt,
          // diff: this.diff,
          plazaId: this.$store.state.plazaId,
          page: this.currentPage,
          size: this.size
        }
      };
      //区分主要设备和全部设备
      if (this.smsxt != "1008") {
        getParams.data.onlyMainAsset = true;
      }
      if (this.assetnum) {
        getParams.data.assetnum = this.assetnum;
      }
      //下拉
      if (this.reportdate) {
        getParams.data.schedfinishStartDate = this.reportdate[0] + "000000";
        getParams.data.schedfinishEndDate = this.reportdate[1] + "000000";
      }
      if (this.real) {
        getParams.data.wotjyssjStartDate = this.real[0] + "000000";
        getParams.data.wotjyssjEndDate = this.real[1] + "000000";
      }
      if (this.source && this.source != "全部") {
        getParams.data.bxfwlymc = this.source;
        getParams.data.bxfwly = this.source;
      }
      //输入框搜索
      getParams.data.keyword = "";

      if (this.sbjc) {
        getParams.data.keyword += `${this.sbjc}:sbmc,assetnum;`;
      }
      if (this.wzjc) {
        getParams.data.keyword += `${this.wzjc}:wzjc,location;`;
      }
      if (this.matters) {
        getParams.data.keyword += `${this.matters}:description;`;
      }
      if (this.locationName) {
        getParams.data.keyword += `${this.locationName}:location;`;
      }
      if (this.wonum2) {
        getParams.data.keyword += `${this.wonum2}:wonum;`;
      }
      if (this.people) {
        getParams.data.keyword += `${this.people}:lead;`;
      }
      if (getParams.data.keyword == "") {
        delete getParams.data.keyword;
      }
      if (this.status.length) {
        const data = {
          status: this.status
        };
        getParams.getParams = data;
      }
      queryWxzy(getParams).then(res => {
        this.tableData = res.data.data || [];
        this.total = res.count;
      });
    },
    clickPicRepair(row) {
      let getParams = {
        data: {
          plazaId: this.$store.state.plazaId,
          ticketuid: row.ticketuid,
          type: 0,
          workorderid: row.workorderid
        }
      };
      queryWxzyImg(getParams).then(res => {
        let url = res.data;
        this.imgUrl = [];
        if (url) {
          url.forEach(el => {
            let obj = {
              name: el.description,
              url: el.urlname
            };
            this.imgUrl.push(obj);
          });
        }
        this.$refs.picLargeOpen.open(this.imgUrl);
      });
    },
    clickPicFinish(row) {
      let getParams = {
        data: {
          plazaId: this.plazaId,
          ticketuid: row.ticketuid,
          type: 1,
          workorderid: row.workorderid
        }
      };
      queryWxzyImg(getParams).then(res => {
        let url = res.data;
        this.imgUrl = [];
        if (url) {
          url.forEach(el => {
            let obj = {
              name: el.description,
              url: el.urlname
            };
            this.imgUrl.push(obj);
          });
        }
        this.$refs.picLargeOpen.open(this.imgUrl);
      });
    },
    startMethods() {
      this.tabFind();
    },
    //下拉框查询
    tabFind() {
      let postParams = [
        {
          columnName: { bxfwly: "bxfwlymc" },
          params: {
            smsxt: this.smsxt
          },
          tableName: "sms_wxzy" //视图名称
        }
      ];
      let data = {
        plazaId: this.$store.state.plazaId
      };
      if (this.smsxt != "1008") {
        data.onlyMainAsset = true;
      }
      querySelect({ data, postParams }).then(res => {
        //console.log(res)
        let bxfwlymc =
          res.data && res.data.data && res.data.data.sms_wxzy
            ? res.data.data.sms_wxzy.bxfwly
            : [];
        this.sourceOption = [];
        this.sourceOption.push({
          name: "全部",
          id: "全部"
        });
        bxfwlymc.forEach(el => {
          this.sourceOption.push({
            name: el.value,
            id: el.key
          });
        });
      });
      // 2任务状态
      let postParams2 = [
        {
          columnName: { status: "status" },
          params: {
            smsxt: this.smsxt
          },
          tableName: "sms_wxzy" //视图名称
        }
      ];
      querySelect({ data, postParams: postParams2 }).then(res => {
        let bxfwlymc =
          res.data && res.data.data && res.data.data.sms_wxzy
            ? res.data.data.sms_wxzy.status
            : [];
        this.statusOption = [];
        // this.statusOption.push({
        //   name: "全部",
        //   id: "全部"
        // });
        bxfwlymc.forEach(el => {
          this.statusOption.push({
            name: el.value,
            id: el.key
          });
        });
        let status = [];
        this.statusOption.forEach(item => {
          if (this.getStatus.includes(item.id)) {
            status.push(item.id);
          }
        });
        this.status = status;
        // 获取数据
        this.getList();
      });
    },
    confirmMore(val) {
      const arr = [];
      val.forEach(item => {
        arr.push(item.id);
      });
      this.status = arr;
      this.getList();
    }
  },
  watch: {
    diff(newV, oldV) {
      if (newV !== oldV) {
        this.startMethods();
      }
    },
    assetnum(newV, oldV) {
      if (newV !== oldV) {
        // this.tabFind()
        this.getList();
      }
    },
    tabLabel(newV, oldV) {
      if (newV !== oldV) {
        this.startMethods();
      }
    }
  },
  mounted() {
    this.startMethods();
  }
};
</script>
<style lang="less" scoped>
.rcwx-list {
  .eq-list-top {
    display: flex;
    margin-bottom: 12px;
    .picker-box {
      display: flex;
      align-items: center;
      background: #fff;
      padding: 0 6px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      height: 32px;
      box-sizing: border-box;
      margin-right: 12px;
      .picker-span {
        margin-right: 6px;
        color: rgba(0, 0, 0, 0.65);
      }
    }
  }
  td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .foot {
    height: 32px;
    display: flex;
    justify-content: flex-end;
    margin-top: 28px;
  }
}
</style>
<style lang="less" >
.rcwx-list {
  .picker-box {
    .el-input__inner {
      border: none;
    }
    .el-range-editor.el-input__inner {
      padding: 3px 0px;
    }
    .el-icon-date {
      display: none;
    }
    .el-range__close-icon {
      position: absolute;
      right: 0px;
      top: 2px;
    }
    .el-range-editor--mini .el-range-input {
      font-size: 14px;
      color: rgb(31, 36, 41);
    }
  }
  /deep/.el-table td {
    cursor: pointer;
  }
}
</style>