admin-fiveFollowing/src/views/operManage/workManage/index.vue

<template>
  <div class="app-container workManage" v-if="this.pageShow">
    <!-- 筛选start -->
    <div class="filter-container mb-10">
      <div>
        <div class="filter-item">
          站点:
          <el-select v-model="region" placeholder="请选择" style="width: 200px">
            <el-option label="站点一" value="1"></el-option>
            <el-option label="站点二" value="2"></el-option>
          </el-select>
        </div>

        <div class="filter-item">
          工单来源:
          <el-select v-model="workFrom" placeholder="请选择" style="width: 200px">
            <el-option label="来源一" value="1"></el-option>
            <el-option label="来源二" value="2"></el-option>
          </el-select>
        </div>

        <div class="filter-item">
          当前处理人:
          <el-select v-model="dealWorker" placeholder="请选择" style="width: 200px">
            <el-option label="处理人一" value="1"></el-option>
            <el-option label="处理人二" value="2"></el-option>
          </el-select>
        </div>

        <el-button type="primary" icon="el-icon-search" class="search-button">
          搜索
        </el-button>

        <el-button icon="el-icon-plus" type="success" @click="addItem()">
          新增
        </el-button>
      </div>
    </div>
    <!-- 筛选end -->

    <!-- tab切换 -->
    <div class="tab-section">
      <el-button class="search-button timeTab" @click="num2 = 0" :type="num2 == 0 ? 'primary' : ''">
        待抢单(0)
      </el-button>
      <el-button class="search-button timeTab" @click="num2 = 1" :type="num2 == 1 ? 'primary' : ''">
        待指派(0)
      </el-button>
      <el-button class="search-button timeTab" @click="num2 = 2" :type="num2 == 2 ? 'primary' : ''">
        待接单(0)
      </el-button>
      <el-button class="search-button timeTab" @click="num2 = 3" :type="num2 == 3 ? 'primary' : ''">
        待处理(0)
      </el-button>
      <el-button class="search-button timeTab" @click="num2 = 4" :type="num2 == 4 ? 'primary' : ''">
        待关单(0)
      </el-button>
      <el-button class="search-button timeTab" @click="num2 = 5" :type="num2 == 5 ? 'primary' : ''">
        已完成(0)
      </el-button>
      <el-checkbox v-model="checked2">显示我的代办</el-checkbox>
    </div>

    <!-- tab切换end -->

    <!-- 表格start -->
    <el-table :data="tableData" border stripe :header-cell-style="headClass" :cell-style="cellStyle">
      <el-table-column fixed prop="workCode" label="编号" width="260px"></el-table-column>
      <el-table-column prop="workDes" label="工作描述" width=""></el-table-column>
      <el-table-column prop="workType" label="工单类型" width="">
        <template #default="scope">
          <div>
            <img src="@/assets/images/jianxiu.svg" alt="" class="jianxiu">
            {{ scope.row.workType }}
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="stationName" label="站点" width=""></el-table-column>

      <el-table-column prop="status" label="状态" width="350">
        <template #default="scope">
          <div>
            {{ scope.row.status }}
            <span class="workStatusBtn">超时</span>
            <!-- <el-button size="mini" round>超时</el-button> -->
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" label="创建时间" width=""></el-table-column>

      <el-table-column prop="handleMan" label="当前处理人" width=""></el-table-column>


      <el-table-column fixed="right" label="操作" width="">
        <template #default="scope">
          <el-button type="primary" size="small" @click.prevent="editRow(scope.row)" link>
            编辑
          </el-button>
          <el-button @click="goDhandlePage()" type="danger" size="small" link>
            待您处理
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格end -->

    <!--弹框组件开始-----------------------start-->
    <dialog-component v-if="showDialog" ref="dialogComponent" :dialog-title="dialogTitle" :item-info="tableItem"
      @closeDialog="closeDialog"></dialog-component>
    <!--弹框组件开始-----------------------end-->
  </div>
  <handle-detail :pageShow="pageShow" @func="getMsgFormSon" v-else></handle-detail>
</template>

<script>
import DialogComponent from './dialogComponent'
import HandleDetail from './handleDetail'

// import { mapGetters } from "vuex";

export default {
  // name: "Dashboard",
  // computed: {
  //   ...mapGetters(["name"]),
  // },

  components: { DialogComponent, HandleDetail },

  data() {
    return {
      pageShow: true,
      region: '',
      dealWorker: '',
      workFrom: '',
      num2: 0,
      showDialog: false,

      input: '请输入编号',
      tableData: [
        {
          workCode: 'TSRP23_20210916165634493',
          workDes: '测试',
          workType: '检修',
          stationName: '	万众实业变电站',
          status: '待指派',
          createTime: '10',
          handleMan: '运维管理员',
        },

      ],
    }
  },
  methods: {
    getMsgFormSon() {
      this.pageShow = !this.pageShow
    },

    goDhandlePage() {
      this.pageShow = !this.pageShow
    },
    // 表头样式设置
    headClass() {
      return 'background:#FAFAFA;'
    },

    //自定义列样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      row, column, rowIndex
      if (columnIndex === 2 || columnIndex === 0) {
        return `color:#89b7eb;`
      } else {
        return ''
      }
    },

    // 添加操作
    addItem() {
      this.tableItem = {
        id: '',
        workCode: '',
        workDes: '',
        stationName: '',
        siteList: [],
        done: '',
        guaZai: '',
      }
      this.dialogTitle = '新增'
      this.showDialog = true
      this.$nextTick(() => {
        this.$refs['dialogComponent'].showDialog = true
      })
    },
    // 编辑操作
    editRow(row) {
      console.log(row)
      this.tableItem = row
      this.dialogTitle = '编辑'
      this.showDialog = true
      this.$nextTick(() => {
        this.$refs['dialogComponent'].showDialog = true
      })
    },
    // 关闭操作
    closeDialog(flag) {
      if (flag) {
        // 重新刷新表格内容
        this.fetchData()
      }
      this.showDialog = false
    },

    //删除操作
    handleDelete(index, row) {
      console.log(index, row)
      alert(index)
    },
  },
}
</script>

<style lang="scss" scoped></style>