rn-bms/src/views/workOrderManage/orderList/index.vue

<template>
  <section class="app-container">
    <el-row>
      <!-- 地区 -->
      <el-col :span="4">
        <region @selectdRegionCode="selectdRegionCode" :currentNodeKey.sync="queryParams.provinceCode"></region>
      </el-col>
      <!-- form表单 -->
      <el-col :span="20">
        <el-form :size="size" :model="queryParams" :inline="true" ref="queryForm" v-show="showSearch" label-width="68px">
          <!-- 第一行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="告警等级">
                <el-select v-model="queryParams.warningLevel" clearable placeholder="请输入告警等级">
                  <el-option v-for="item in signalLevelList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="告警名称">
                <el-input v-model="queryParams.warningName" placeholder="请输入告警名称" clearable @keyup.enter.native="handleQuery" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="产品名称">
                <el-select v-model="queryParams.productId" clearable placeholder="请选择">
                  <el-option v-for="item in queryProductSelectList" :key="item.id" :label="item.productName" :value="item.productId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属客户">
                <el-select v-model="queryParams.userId" clearable placeholder="请选择" @change="queryUserIdChange">
                  <el-option v-for="item in queryUserSelectList" :key="item.id" :label="item.nickName" :value="item.userId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第二行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="所属项目">
                <el-select v-model="queryParams.projectId" clearable placeholder="请选择">
                  <el-option v-for="item in queryProjectSelectList" :key="item.id" :label="item.projectName" :value="item.projectId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6">
              <el-form-item label="站址名称">
                <el-input v-model="queryParams.deviceName" placeholder="请输入站址名称" clearable @keyup.enter.native="handleQuery" />
              </el-form-item>
            </el-col> -->
            <el-col :span="6">
              <el-form-item label="设备SN">
                <el-input v-model="queryParams.deviceSn" placeholder="请输入设备SN" clearable @keyup.enter.native="handleQuery" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="工单编号">
                <el-input v-model="queryParams.workCode" placeholder="请输入工单编号" clearable @keyup.enter.native="handleQuery" />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第三行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="工单状态">
                <el-select v-model="queryParams.workStatus" clearable placeholder="请选择">
                  <el-option v-for="item in workStatusList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="时间范围">
                <el-date-picker v-model="dateRange" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
                  start-placeholder="受理开始时间" end-placeholder="受理结束时间"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="cyan" 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-col>
          </el-row>
        </el-form>
        <right-toolbar class="mb8" :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        <!-- 表格区域 -->
        <el-table v-loading="loading" :data="tableData" style="width: 100%">
          <!-- 省市区 -->
          <!-- <el-table-column
            prop="proName"
            align="center"
            label="省份"
            min-width="80"
          >
          </el-table-column>
          <el-table-column
            prop="cityName"
            align="center"
            label="市"
            min-width="80"
          >
          </el-table-column>
          <el-table-column
            prop="disName"
            align="center"
            label="区"
            min-width="80"
          >
          </el-table-column> -->
          <el-table-column align="center" label="地区" min-width="150">
            <template slot-scope="scope">
              {{ scope.row.proName + scope.row.cityName + scope.row.disName }}
            </template>
          </el-table-column>
          <el-table-column prop="workCode" align="center" label="工单编号" min-width="180">
            <template slot-scope="scope">
              <el-link type="primary"  :href="'./detail?id=' + scope.row.id" target="_blank">{{scope.row.workCode}}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="warningLevel" align="center" label="告警等级" min-width="100">
            <template slot-scope="scope">
              {{ scope.row.warningLevel | toChinaNum }}级
            </template>
          </el-table-column>
          <el-table-column prop="warningName" align="center" label="告警名称" min-width="150"></el-table-column>
          <el-table-column prop="productName" label="产品名称" align="center" min-width="100"></el-table-column>
          <el-table-column prop="nickName" align="center" label="所属客户"></el-table-column>
          <el-table-column prop="projectName" align="center" label="所属项目"></el-table-column>
          <!-- <el-table-column align="center" label="站址名称"></el-table-column> -->
          <!-- <el-table-column prop="deviceName" align="center" label="设备名称"></el-table-column> -->
          <el-table-column prop="deviceSn" align="center" label="设备SN" min-width="100"></el-table-column>

          <el-table-column prop="status" align="center" label="告警状态"></el-table-column>
          <el-table-column prop="workStatus" align="center" label="工单状态">
              <template slot-scope="scope">
                {{ workStatusList.find(v=> v.value == scope.row.workStatus)['label']}}
              </template>
          </el-table-column>

          <el-table-column align="center" label="建单时间" min-width="180">
            <template slot-scope="scope">
              {{ scope.row.createTime | formatDate }}
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </el-col>
    </el-row>
  </section>
</template>
<script>
import Region from '@/components/Region';
import { list } from '@/api/work/order';
import { select as productSelect } from "@/api/hardware/product";
import { userSelect } from "@/api/system/user";
import { select as projectSelect } from "@/api/hardware/project";
export default {
  name: 'workOrder',
  components: {
    Region
  },
  data () {
    return {
      queryProductSelectList: [], // 产品名称
      queryUserSelectList: [], // 客户
      queryProjectSelectList: [], // 项目
      dateRange: [],
      signalLevelList: [
        { label: '一级', value: '1' },
        { label: '二级', value: '2' },
        { label: '三级', value: '3' }
      ],
      workStatusList: [
        { label: '待接单', value: '1' },
        { label: '待回单', value: '2' },
        { label: '已回单', value: '3' },
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 表格数据
      tableData: [],
      // 显示搜索条件
      showSearch: true
    };
  },
  methods: {
    selectdRegionCode ({ code }) {
      this.queryParams.provinceCode = code;
      this.handleQuery();
    },
    // 获取告警工单列表
    getList () {
      this.loading = true;
      if(null != this.dateRange && '' != this.dateRange) {
        this.queryParams.startTime = this.dateRange[0];
        this.queryParams.endTime = this.dateRange[1];
      }
      list(this.queryParams).then(res => {
        this.tableData = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    // 根据客户id获取项目
    queryUserIdChange (userId) {
      delete this.queryParams.projectId;
      projectSelect({ userId }).then(({ code, msg, select }) => {
        if (code == 200) {
          this.queryProjectSelectList = select;
        } else {
          this.$message.error(msg);
        }
      })
    },
    // 搜索按钮操作
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.getList();
    },
    // 重置按钮操作
    resetQuery () {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10
      };
      this.resetForm('queryForm');
      this.dateRange = [];
      this.handleQuery();
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getList();
    productSelect().then(({ code, msg, select }) => {
      if (code == 200) {
        this.queryProductSelectList = select;
      } else {
        this.$message.error(msg);
      }
    })
    userSelect().then(({ code, msg, select }) => {
      if (code == 200) {
        this.queryUserSelectList = select;
      } else {
        this.$message.error(msg);
      }
    })
  }
};
</script>
<style lang="scss" scoped></style>