supplier_system/src/dashoo.cn/frontend_web/src/pages/index.vue

<template>
  <div style="overflow-y: auto">
    <el-card class="box-card">
      <div slot="header">
        <span>
          <i class="icon icon-table2"></i> 待办/已办
        </span>
        <el-form ref="form" :inline="true" style="float: right; margin-top: -10px">
          <el-form-item label="类型">
            <el-select size="mini" style="width:100px" v-model="searchForm.Type" placeholder="准入类别">
              <el-option label="全部" value=""></el-option>
              <el-option label="准入" value="1"></el-option>
              <el-option label="增项" value="2"></el-option>
              <el-option label="年审" value="3"></el-option>
              <el-option label="信息变更" value="4"></el-option>
              <el-option label="资质变更" value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类别">
            <el-select size="mini" style="width:100px" v-model="searchForm.SupplierTypeCode" placeholder="准入类别">
              <el-option label="全部" value=""></el-option>
              <el-option label="物资类" value="01"></el-option>
              <el-option label="基建类" value="02"></el-option>
              <el-option label="技术服务类" value="03"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="公司名称">
            <el-input size="mini" v-model="searchForm.SupplierName" placeholder="请输入" style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" @click="handleSearch">查 询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="待办任务" name="first">
          <el-table
          :data="entityList"
          size="mini"
          border
          :stripe="true"
          style="width: 100%">

          <!--<el-table-column type="index" label="序号"></el-table-column>-->

          <el-table-column label="待办类型" prop="Type">
            <template slot-scope="scope">
              <span v-if="scope.row.Type=='1'" style="color:#E6A23C">准入</span>
              <span v-if="scope.row.Type=='2'" style="color:#E6A23C">增项</span>
              <span v-if="scope.row.Type=='3'" style="color:#E6A23C">年审</span>
              <span v-if="scope.row.Type=='4'" style="color:#E6A23C">信息变更</span>
              <span v-if="scope.row.Type=='5'" style="color:#E6A23C">资质变更</span>
            </template>
          </el-table-column>
          <el-table-column label="类别" prop="SupplierTypeCode">
            <template slot-scope="scope">
              <span v-if="scope.row.SupplierTypeCode=='01'">物资类</span>
              <span v-if="scope.row.SupplierTypeCode=='02'">基建类</span>
              <span v-if="scope.row.SupplierTypeCode=='03'">技术服务类</span>
            </template>
          </el-table-column>

          <el-table-column label="公司名称" prop="SupplierName"></el-table-column>

          <el-table-column label="执行人" prop="UserName"></el-table-column>

          <el-table-column label="操作" width="130" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" title="办理"  icon="el-icon-edit" size="mini" @click="rowClick(scope.row)">办理</el-button>
              <!--<el-button type="text" title="编辑"  icon="el-icon-s-promotion" size="mini">跟踪</el-button>-->
            </template>
          </el-table-column>

        </el-table>
        </el-tab-pane>
        <el-tab-pane label="已办任务" name="second">
          <el-table
            :data="entityList"
            size="mini"
            border
            :stripe="true"
            style="width: 100%">

            <el-table-column label="已办类型" prop="Type">
              <template slot-scope="scope">
                <span v-if="scope.row.Type=='1'" style="color:#E6A23C">准入</span>
                <span v-if="scope.row.Type=='2'" style="color:#E6A23C">增项</span>
                <span v-if="scope.row.Type=='3'" style="color:#E6A23C">年审</span>
                <span v-if="scope.row.Type=='4'" style="color:#E6A23C">信息变更</span>
                <span v-if="scope.row.Type=='5'" style="color:#E6A23C">资质变更</span>
              </template>
            </el-table-column>
            <el-table-column label="类别" prop="SupplierTypeCode">
              <template slot-scope="scope">
                <span v-if="scope.row.SupplierTypeCode=='01'">物资类</span>
                <span v-if="scope.row.SupplierTypeCode=='02'">基建类</span>
                <span v-if="scope.row.SupplierTypeCode=='03'">技术服务类</span>
              </template>
            </el-table-column>

            <el-table-column label="公司名称" prop="SupplierName"></el-table-column>

            <el-table-column label="执行人" prop="UserName"></el-table-column>

            <el-table-column label="操作" width="130" align="center" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" title="打开"  icon="el-icon-edit" size="mini" @click="rowClick(scope.row)">打开</el-button>
                <!--<el-button type="text" title="编辑"  icon="el-icon-s-promotion" size="mini">跟踪</el-button>-->
              </template>
            </el-table-column>

          </el-table>
        </el-tab-pane>
      </el-tabs>

    </el-card>
  </div>
</template>

<script>
  import api from '@/api/oilsupplier/supplier'

  import {
    mapGetters
  } from 'vuex'
  export default {
    name: 'index',

    computed: mapGetters({
      authUser: 'authUser'
    }),

    data () {
      return {
        tabindex: '',
        activeName: 'first',
        currentDate: new Date(),
        // 查询时间
        CreateOn: [],
        // 分页参数
        size: 10,
        currentPage: 1,
        currentItemCount: 0,
        // 列表排序
        Column: {
          Order: '',
          Prop: ''
        },
        // 查询项
        searchForm: {
          Id: '',
          Type: '',
          SupplierTypeCode: '',
          SupplierName: '',
          IsPay: '1',
          CreateOn: '',
          CreateUserId: '',
          CreateBy: '',
          ModifiedOn: '',
          ModifiedUserId: '',
          ModifiedBy: ''

        },
        entityList: []
      }
    },
    created () {
      this.initDatas()
    },
    methods: {
      handleSearch () {
        this.currentPage = 1
        if (this.tabindex === '0') {
          this.initDatas()
        } else {
          this.finishedData()
        }
        this.initDatas()
      },
      handleClick (tab) {
        this.tabindex = tab.index
        if (tab.index === '0') {
          this.initDatas()
        } else {
          this.finishedData()
        }
      },
      rowClick (val) {
        let SupplierType = ''
        if (val.Type === '1') {
          if (val.SupplierTypeCode === '01') {
            SupplierType = 'goodsedit'
          } else if (val.SupplierTypeCode === '02') {
            SupplierType = 'basisedit'
          } else {
            SupplierType = 'techedit'
          }
          this.$router.push('oilsupplier/supplieraudit/' + val.Id + '/' + SupplierType + '?certid=' + val.CertId)
        } else if (val.Type === '2') {
          if (val.SupplierTypeCode === '01') {
            SupplierType = 'goodsdataopera'
          } else if (val.SupplierTypeCode === '02') {
            SupplierType = 'basisdataopera'
          } else {
            SupplierType = 'techdataopera'
          }
          this.$router.push('oilsupplier/addtionaudit/' + val.Id + '/' + SupplierType)
        } else if (val.Type === '3') {
          this.$router.push('oilsupplier/annualaudit/' + val.SupplierId + '/auditoperation?certid=' + val.CertId + '&WorkflowId=' + val.WorkflowId + '&AnnualStatus=' + val.Status + '&annualId=' + val.Id + '&Step=' + val.Step)
          // /oilsupplier/annualaudit/' + scope.row.SupplierId + '/auditoperation?certid=' + scope.row.CerId +'&WorkflowId='+scope.row.WorkflowId+'&AnnualStatus='+scope.row.Status+'&annualId='+scope.row.Id+'&Step='+scope.row.Step
        } else if (val.Type === '4') {
          this.$router.push('oilsupplier/infochange/' + val.Id + '/auditoperation?InfoStatus=' + val.Status)
        } else if (val.Type === '5') {
          this.$router.push('oilsupplier/qualchange/' + val.SupplierId + '/auditoperation?certid=' + val.CertId + '&QualId=' + val.Id + '&QualStatus=' + val.Status)
        }
      },
      finishedData () {
        // 分页及列表条件
        let params = {
          _currentPage: this.currentPage,
          _size: this.size,
          Order: this.Column.Order,
          Prop: this.Column.Prop,
          Statustype: 2
        }
        let myCreateOn = []
        // 解析时间
        if (this.CreateOn.length === 2) {
          this.CreateOn[1].setHours(23)
          this.CreateOn[1].setMinutes(59)
          this.CreateOn[1].setSeconds(59)
          myCreateOn.push(this.formatDateTime(this.CreateOn[0]))
          myCreateOn.push(this.formatDateTime(this.CreateOn[1]))
        }
        // 查询条件
        Object.assign(params, this.searchForm)
        api.getMyTaskFinished(params, this.$axios).then(res => {
          this.entityList = res.data.items
          console.log(this.entityList, 'this.entityList')
          this.currentItemCount = res.data.currentItemCount
        }).catch(err => {
          console.error(err)
        })
      },
      initDatas () {
        // 分页及列表条件
        let params = {
          _currentPage: this.currentPage,
          _size: this.size,
          Order: this.Column.Order,
          Prop: this.Column.Prop,
          Statustype: 2
        }
        let myCreateOn = []
        // 解析时间
        if (this.CreateOn.length === 2) {
          this.CreateOn[1].setHours(23)
          this.CreateOn[1].setMinutes(59)
          this.CreateOn[1].setSeconds(59)
          myCreateOn.push(this.formatDateTime(this.CreateOn[0]))
          myCreateOn.push(this.formatDateTime(this.CreateOn[1]))
        }
        // 查询条件
        Object.assign(params, this.searchForm)
        // 访问接口
        api.getTodoList(params, this.$axios).then(res => {
          this.entityList = res.data.items
          console.log(this.entityList, 'this.entityList')
          this.currentItemCount = res.data.currentItemCount
        }).catch(err => {
          console.error(err)
        })
      },
      handleCurrentChange (value) {
        this.currentPage = value
        this.initData()
      },
      handleSizeChange (value) {
        this.size = value
        this.currentPage = 1
        this.initData()
      }
    }
  }
</script>