equipment/src/views/task/qiye_list.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <sticky style="margin-bottom: 10px;">
        <div class="sub-navbar">
          <el-button type="primary" icon="el-icon-edit" @click="openBaseZhongjian">
            标注部分设备现场检验
          </el-button>
        </div>
      </sticky>
      <el-form :inline="true" :model="searchRw" class="demo-form-inline">
        <el-form-item label="设备种类">
          <el-input v-model="searchRw.shebeizhonglei" style="width: 100px" />
        </el-form-item>
        <el-form-item label="报检单号">
          <el-input v-model="searchRw.serialNumber" />
        </el-form-item>
        <el-form-item label="报检日期">
          <el-date-picker v-model="searchRw.createTime" type="date" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="使用单位">
          <el-input v-model="searchRw.shiyongdanwei" style="width: 300px" />
        </el-form-item>
        <el-form-item label="使用单位地址">
          <el-input v-model="searchRw.shiyongdanweiDizhi" style="width: 300px" />
        </el-form-item>
        <el-form-item label="施工单位">
          <el-input v-model="searchRw.shigongdanwei" style="width: 300px" />
        </el-form-item>
        <el-form-item label="制造单位">
          <el-input v-model="searchRw.zhizaodanwei" style="width: 300px" />
        </el-form-item>
        <el-form-item label="说明：">
          <span style="color: red">列表默认是黑色，如已经正确标记颜色会变更。</span>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="list"
      v-adaptive="{bottomOffset: 50}"
      height="0"
      :data="list"
      width="100%"
      size="small"
      border
      fit
      highlight-current-row
      stripe
      :row-class-name="tableRowBfZhongjian"
      @row-click="onRowClick"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40" />
      <el-table-column align="center" label="序号" width="60" fixed="left">
        <template slot-scope="scope">
          <span v-text="getIndex(scope.$index)" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备类别" prop="shebeileibie" width="150" />
      <el-table-column align="center" label="设备品种" prop="shebeipinzhong" width="150" />
      <el-table-column align="center" label="设备代码" prop="shebeidaima" width="180" />
      <el-table-column align="center" label="产品编号/出厂编号" prop="chanpinbianhao" width="220" />
      <el-table-column align="center" label="规格型号" prop="guigexinghao" width="220" />
      <el-table-column align="center" label="区划名称" prop="quhuamingcheng" width="150" />
      <el-table-column align="center" label="申请现场检验日期" prop="shenqingxianchangriqi" />
      <el-table-column align="center" label="层" prop="s1" />
      <el-table-column align="center" label="区段长度" prop="s14" />
      <el-table-column align="center" label="提升高度" prop="s16" />
    </el-table>
  </div>
</template>

<script>
import Sticky from '@/components/Sticky'
export default {
  name: 'MyTask',
  components: { Sticky },
  data() {
    return {
      list: [],
      searchRw: {},
      bjdId: '',
      multipleSelection: [],
      selection: {},
      bjdZhongjian: {
        bjdid: '',
        xianchangriqi: '',
        xianchangbeizhu: '',
        renwuIds: '',
        zhongjianstate: '1'
      }
    }
  },
  created() {
    localStorage.setItem('token', this.$route.query.tkey)
    this.getList()
  },
  mounted() {
  },
  methods: {
    getList() {
      const qyid = window.atob(this.$route.params.qyid)
      this.apibjd({
        url: '/bjd/getByQyId',
        method: 'get',
        params: {
          qyid: qyid
        }
      }).then(data => {
        this.bjdId = data
        this.apibjd({
          url: '/renwu/getAllotBaseList',
          method: 'post',
          data: {
            bjdIds: this.bjdId
          }
        }).then(data => {
          this.searchRw = data.list[0]
          this.list = data.list
        })
      })
    },
    getIndex($index) {
      // 表格序号
      return $index + 1
    },
    handleFilter() {
      // 查询事件
      this.getList()
    },
    onRowClick(row) {
      this.selection = row
      this.$refs.list.toggleRowSelection(row)
    },
    handleSelectionChange: function(val) {
      this.multipleSelection = val
    },
    openBaseZhongjian() {
      if (this.multipleSelection.length === 0) {
        this.$message({ message: '请在列表选择要操作的数据。', type: 'warning' })
        return false
      }
      for (let i = 0; i < this.multipleSelection.length; i++) {
        if (this.multipleSelection[i].shenqingxianchangriqi !== '' && this.multipleSelection[i].shenqingxianchangriqi !== null && this.multipleSelection[i].shenqingxianchangriqi !== undefined) {
          this.$message({ message: '请勿重复执行标注操作。', type: 'warning' })
          return false
        }
      }
      this.bjdZhongjian.bjdid = this.bjdId
      this.bjdZhongjian.renwuIds = this.multipleSelection.map(rw => {
        return rw.id
      }).join(',')
      this.bjdZhongjian.xianchangriqi = new Date()
      this.apibjd({
        url: '/renwu/updBjdEndState',
        method: 'post',
        data: this.bjdZhongjian
      }).then(data => {
        this.$message.success('标记成功。')
        this.getList()
      })
    },
    tableRowBfZhongjian({ row, rowIndex }) {
      if (row.shenqingxianchangriqi !== null) {
        return 'xianchangriqi-row'
      }
      return ''
    }
  }
}
</script>

<style>
  /** 允许终检 */
  .el-table .xianchangriqi-row {
    color: #0831e4;
  }
</style>