<template> 
 | 
  <TableLayout :permissions="['business:ywworkorder:query']"> 
 | 
    <!-- 搜索表单 --> 
 | 
    <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" inline> 
 | 
      <el-form-item prop="areaType" label="位置类别"> 
 | 
        <el-select v-model="searchForm.areaType"> 
 | 
          <el-option label="室内维修" value="0"></el-option> 
 | 
          <el-option label="公共维修" value="1"></el-option> 
 | 
        </el-select> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="选择项目" prop="projectId"> 
 | 
        <el-select v-model="searchForm.projectId" @change="getBuild" clearable filterable> 
 | 
          <el-option v-for="item in projectList" :label="item.name" :value="item.id" /> 
 | 
        </el-select> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="选择楼宇" prop="buildingId"> 
 | 
        <el-select v-model="searchForm.buildingId" clearable filterable> 
 | 
          <el-option v-for="item in buildList" :label="item.name" :value="item.id" /> 
 | 
        </el-select> 
 | 
      </el-form-item> 
 | 
      <el-form-item prop="cateId" label="物品类别"> 
 | 
        <el-cascader v-model="searchForm.areaIds" @change="changeSel" placeholder="请选择巡检区域" clearable 
 | 
          :options="cateList" :props="{ 
 | 
            label: 'name', 
 | 
            value: 'id', 
 | 
            children: 'childCategoryList' 
 | 
          }"></el-cascader> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="提交日期"> 
 | 
        <el-date-picker v-model="searchForm.selDate" @change="changeSelDate" format="yyyy-MM-dd" 
 | 
          value-format="yyyy-MM-dd" type="daterange"></el-date-picker> 
 | 
      </el-form-item> 
 | 
  
 | 
      <section> 
 | 
        <el-button type="primary" @click="search">搜索</el-button> 
 | 
        <el-button type="primary" :loading="isWorking.export" v-permissions="['business:ywworkorder:exportExcel']" 
 | 
          @click="exportExcel">导出</el-button> 
 | 
        <el-button @click="reset">重置</el-button> 
 | 
      </section> 
 | 
    </el-form> 
 | 
    <!-- 表格和分页 --> 
 | 
    <template v-slot:table-wrap> 
 | 
      <ul class="toolbar" v-permissions="['business:ywworkorder:create', 'business:ywworkorder:delete']"> 
 | 
        <li><el-button type="primary" @click="$refs.operaYwWorkorderWindow.open('新建工单')" icon="el-icon-plus" 
 | 
            v-permissions="['business:ywworkorder:create']">新建</el-button></li> 
 | 
        <li><el-button @click="deleteByIdInBatch" icon="el-icon-delete" 
 | 
            v-permissions="['business:ywworkorder:delete']">删除</el-button></li> 
 | 
      </ul> 
 | 
      <el-table v-loading="isWorking.search" :data="tableData.list" stripe> 
 | 
        <el-table-column prop="areaType" label="位置类型" min-width="80px"> 
 | 
          <template v-slot="scope"> 
 | 
            <span v-if="scope.row.areaType == 0">室内装修</span> 
 | 
            <span v-if="scope.row.areaType == 1">公共区域</span> 
 | 
          </template> 
 | 
        </el-table-column> 
 | 
        <el-table-column prop="" label="报修区域" min-width="100px"> 
 | 
          <template v-slot="scope"> 
 | 
            <span>{{ scope.row.buildingName }} / {{ scope.row.areaType == 0 ? scope.row.roomNum : scope.row.floorName 
 | 
              }}</span> 
 | 
          </template> 
 | 
        </el-table-column> 
 | 
        <el-table-column prop="categoryName" label="物品类型" min-width="100px"></el-table-column> 
 | 
        <el-table-column prop="creatorName" label="上报人" min-width="100px"></el-table-column> 
 | 
        <el-table-column prop="createDate" label="上报时间" min-width="100px"></el-table-column> 
 | 
        <el-table-column prop="dealUserName" label="处理人" min-width="100px"></el-table-column> 
 | 
        <el-table-column label="处理结果" min-width="100px"> 
 | 
          <template slot-scope="{row}"> 
 | 
            <span v-if="row.dealStatus == 0">待指派</span> 
 | 
            <span v-if="row.dealStatus == 1">已指派</span> 
 | 
            <span v-if="row.dealStatus == 2">已处理</span> 
 | 
          </template> 
 | 
        </el-table-column> 
 | 
        <el-table-column v-if="containPermissions(['business:ywworkorder:update'])" label="操作" min-width="80" 
 | 
          fixed="right"> 
 | 
          <template slot-scope="{row}"> 
 | 
            <span @click="handleDetail(row)" class="primaryColor cu">查看详情</span> 
 | 
          </template> 
 | 
        </el-table-column> 
 | 
      </el-table> 
 | 
      <pagination @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="tableData.pagination"> 
 | 
      </pagination> 
 | 
    </template> 
 | 
    <Detail v-if="showDetail" ref="DetailRef" @close="showDetail = false" @success="search" /> 
 | 
    <!-- 新建/修改 --> 
 | 
    <OperaYwWorkorderWindow ref="operaYwWorkorderWindow" @success="handlePageChange" /> 
 | 
  </TableLayout> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import BaseTable from '@/components/base/BaseTable' 
 | 
import TableLayout from '@/layouts/TableLayout' 
 | 
import Pagination from '@/components/common/Pagination' 
 | 
import OperaYwWorkorderWindow from './components/OperaYwWorkorderWindow' 
 | 
import Detail from './components/detail' 
 | 
import { getBuildList } from '@/api/project/ywBuilding' 
 | 
import { getProjectList } from '@/api/project/ywProject' 
 | 
import { fetchList as getCateList } from '@/api/business/category.js' 
 | 
export default { 
 | 
  name: 'YwWorkorder', 
 | 
  extends: BaseTable, 
 | 
  components: { TableLayout, Pagination,Detail, OperaYwWorkorderWindow }, 
 | 
  data() { 
 | 
    return { 
 | 
      // 搜索 
 | 
      showDetail: false, 
 | 
      searchForm: { 
 | 
        selDate: [], 
 | 
        areaType: '', 
 | 
        areaIds: '', 
 | 
        projectId: '', 
 | 
        buildingId: '', 
 | 
        cateId: '', 
 | 
      }, 
 | 
      projectList: [], 
 | 
      buildList: [], 
 | 
      cateList: [], 
 | 
    } 
 | 
  }, 
 | 
  created() { 
 | 
    this.config({ 
 | 
      module: '运维工单信息表', 
 | 
      api: '/workorder/ywWorkorder', 
 | 
      'field.id': 'id', 
 | 
      'field.main': 'id' 
 | 
    }) 
 | 
    this.search() 
 | 
    this.initData() 
 | 
  }, 
 | 
  methods: { 
 | 
    handleDetail(row) { 
 | 
      this.showDetail = true 
 | 
      this.$nextTick(() => { 
 | 
        this.$refs.DetailRef.visible = true 
 | 
        this.$refs.DetailRef.id = row.id 
 | 
        this.$refs.DetailRef.getDetail() 
 | 
         
 | 
      }) 
 | 
    }, 
 | 
    initData() { 
 | 
      getProjectList({}).then(res => { 
 | 
        this.projectList = res 
 | 
      }) 
 | 
      getCateList({ 
 | 
        model: { type: 3 }, 
 | 
        capacity: 1000, 
 | 
        page: 1, 
 | 
      }).then(res => { 
 | 
        this.cateList = res.records || [] 
 | 
      }) 
 | 
    }, 
 | 
    getBuild(projectId) { 
 | 
      this.$set(this.searchForm, 'buildingId', '') 
 | 
      getBuildList({ projectId }).then(res => { 
 | 
        this.buildList = res 
 | 
      }) 
 | 
    }, 
 | 
    changeSel(e) { 
 | 
      if (e && e.length == 2) { 
 | 
        this.$set(this.searchForm, 'cateId', e[1]) 
 | 
      } else { 
 | 
        this.$set(this.searchForm, 'cateId', '') 
 | 
      } 
 | 
    }, 
 | 
    reset() { 
 | 
      this.searchForm = { 
 | 
        selDate: [], 
 | 
        areaType: '', 
 | 
        areaIds: '', 
 | 
        projectId: '', 
 | 
        buildingId: '', 
 | 
        cateId: '', 
 | 
      } 
 | 
      this.search() 
 | 
    }, 
 | 
    changeSelDate(e) { 
 | 
      if (e && e.length > 0) { 
 | 
        this.$set(this.searchForm, 'queryStartTime', e[0] + ' 00:00:00') 
 | 
        this.$set(this.searchForm, 'queryEndTime', e[1] + ' 23:59:59') 
 | 
      } else { 
 | 
        this.$set(this.searchForm, 'queryStartTime', '') 
 | 
        this.$set(this.searchForm, 'queryEndTime', '') 
 | 
      } 
 | 
  
 | 
    }, 
 | 
  } 
 | 
} 
 | 
</script> 
 |