supplier_system/src/dashoo.cn/frontend_web/src/pages/oilcontract/contract-basis/index.vue

<template>
  <div>
    <el-breadcrumb class="heading">
      <el-breadcrumb-item :to="{ path: '/' }">平台首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/oilsupplier/oilcontract' }">承包商评价</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" style="height: calc(100vh - 115px);">
      <div slot="header">
        <span>
          <i class="icon icon-table2"></i> 承包商评价
        </span>
        <span style="float: right;">
          <!-- <router-link :to="'/oilcontract/contract-basis/add/operation'">
            <el-button type="primary" size="mini" style="margin-left:10px; margin-top: -4px;">添加</el-button>
          </router-link> -->
          <!-- <el-button type="primary" size="mini" style="margin-left:10px; margin-top: -4px;" @click="exportExcel">导出</el-button> -->
          <el-button type="primary" size="mini" style="margin-left:10px; margin-top: -4px;" v-if="!selectAllButtonBoolean&&userSelectBoolean" @click="onSelectAllButton">一键处理</el-button>
          <el-button type="info" size="mini" style="margin-left:10px; margin-top: -4px;" v-if="selectAllButtonBoolean" @click="onSelectAllButtonDelete">取消</el-button>
          <el-button type="primary" size="mini" style="margin-left:10px; margin-top: -4px;" v-if="selectAllButtonBoolean" @click="onSelectAllButtonTrue">确定</el-button>
        </span>
        <el-form ref="form" :inline="true" style="float: right; margin-top: -10px">
          <el-form-item label="上报时间">
            <el-date-picker size="mini" style="width: 220px" v-model="CreateOn" type="daterange" range-separator="至"
                            start-placeholder="生成日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-dropdown split-button type="primary" size="mini" @click="handleSearch" @command="searchCommand">
              查询
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="search">高级查询</el-dropdown-item>
                <el-dropdown-item command="clear">查询重置</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
        </el-form>
      </div>
      <el-table size="mini" highlight-current-row stripe id="rebateSetTable" :data="entityList" border height="calc(100vh - 243px)" style="width: 100%" @sort-change="orderby" @selection-change="onSelectAll">
        <el-table-column v-if="selectAllButtonBoolean" :selectable="selectableFun" type="selection" width="55"></el-table-column>

        <el-table-column label="操作" min-width="210" align="center" fixed>
          <template slot-scope="scope">
            <el-button v-if="editeBoolean" type="text" title="编辑" size="small" icon="el-icon-edit" @click="onNavigateEvaluate(scope.row)">编辑</el-button>
            <el-button v-else type="text" title="编辑" size="small" icon="el-icon-edit" @click="onNavigateEvaluate(scope.row)">查看</el-button>
            <el-popover placement="top" title="提示" :ref="'popover-' + `${scope.$index}`" v-if="deleteBoolean&&scope.row.Status<=0">
              <el-alert
                title=""
                description="确认要删除吗？"
                type="warning"
                :closable="false">
              </el-alert>
              <br/>
              <div style="text-align: right; margin: 0">
                <el-button type="primary" size="mini" @click="deleteEntity(scope.row,scope.$index)">删除</el-button>
              </div>
              <el-button slot="reference"  type="text" style="margin-left:3px" icon="el-icon-delete" size="small" >删除</el-button>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column v-for="column in tableColumns" :key="column.Id"
                         v-if="column.prop != 'CreateOn'" :prop="column.prop" sortable min-width="100" :label="column.label" align="center" show-overflow-tooltip>
                         <template slot-scope="scope" >
                           <div>{{columnFun(scope.row[column.prop],column.prop) }}</div>
                         </template>
        </el-table-column>

        <!--<el-table-column prop="CreateOn" sortable min-width="150" label="生成时间" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ jstimehandle(scope.row.CreateOn+'') }}
          </template>
        </el-table-column>-->
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                     :page-sizes="[10, 15, 20, 25]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="currentItemCount">
      </el-pagination>
    </el-card>

    <el-dialog title="高级查询" :visible.sync="dialogVisible" width="720px">
      <el-form ref="advancedsearchForm" label-width="110px">
        <el-row>

          <el-col :span="12">
            <el-form-item label="生成时间">
              <el-date-picker size="mini" v-model="CreateOn" type="daterange" style="width:100%" range-separator="至"
                              start-placeholder="生成日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="供应商ID">
              <el-input size="mini" v-model="searchForm.SupplierId" style="width:100%" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="企业名称">
              <el-input size="mini" v-model="searchForm.SupplierName" style="width:100%" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="项目名称">
              <el-input size="mini" v-model="searchForm.ProjectName" style="width:100%" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="合同编号">
              <el-input size="mini" v-model="searchForm.ContractNo" style="width:100%" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="工程地点">
              <el-input size="mini" v-model="searchForm.ProjectPlace" style="width:100%" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="项目负责人">
              <el-input size="mini" v-model="searchForm.ProjectOwner" style="width:100%" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="联系人电话">
              <el-input size="mini" v-model="searchForm.Telephone" style="width:100%" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="项目类别">
              <el-input size="mini" v-model="searchForm.ProjectType" style="width:100%" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="合同模式">
              <el-input size="mini" v-model="searchForm.ContractMode" style="width:100%" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="合同总金额(万元)">
              <el-input size="mini" v-model="searchForm.Amount" style="width:100%" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="合同总工期(天)">
              <el-input size="mini" v-model="searchForm.ContractPeriod" style="width:100%" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="开工日期">
              <el-input size="mini" v-model="searchForm.OpenDate" style="width:100%" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="计划竣工时间">
              <el-input size="mini" v-model="searchForm.PlanFinishDate" style="width:100%" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item label="备注">
              <el-input size="mini" v-model="searchForm.Remark" style="width:100%" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>


        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="handleSearch">查 询</el-button>
      </span>
    </el-dialog>

    <!-- :selectDeptBoolean="false"-->
    <submitPopup ref="submitpopup" :eveId="eveIdList" @refreshPage="initDatas" ></submitPopup>

  </div>
</template>
<script>
  import { mapGetters } from 'vuex';
  import api from '@/api/oilcontract/contract';
  import apiReview from '@/api/oilcontract/contractReview';
  import permissionApi from '@/api/oilcontract/permission';
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'

  export default {
    computed: {
      ...mapGetters({
        authUser: 'authUser'
      })
    },
    computed:{
      columnFun:function(){
        return function(item,index){
          if(index == 'Status'){
            var index = Number(item)
            switch(index){
              case 0:
                return '已保存'
              break;
              case 1:
                return '待初审'
              break;
              case 2:
                return '待复审'
              break;
              case 3:
                return '专业科室接收'
              break;
              case 4:
                return '待专业科室审核'
              break;
              case 7:
                return '待企管法规处审批'
              break;
              case 8:
                return '已完成'
              break;
              case -1:
                return '初审未通过'
              break;
              case -2:
                return '复审未通过'
              break;
              case -3:
                return '专业处室未通过'
              break;
              case -4:
                return '专业处室审核未通过'
              break;
              case -7:
                return '企管法规处审批未通过'
              break;
              default:
                return '--'
              break;
            }
          }else{
            return item;
          }
        }
      }
    },
    name: 'oilcontract',

    data() {
      return {
        userSelectBoolean:false,
        eveIdList:'',
        selectAllButtonBoolean:false,

        editeBoolean:false,
        deleteBoolean:false,
        dialogVisible: false,
        //列表数据
        entityList: [],
        //分页参数
        size: 10,
        currentPage: 1,
        currentItemCount: 0,
        //列表排序
        Column: {
          Order: '',
          Prop: ''
        },
        //查询时间 new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000), new Date()
        CreateOn: [],
        //查询项
        searchFormReset: {},
        searchForm: {
          Id: '',
          SupplierId: '',
          SupplierName: '',
          ProjectName: '',
          ContractNo: '',
          ProjectPlace: '',
          ProjectOwner: '',
          Telephone: '',
          ProjectType: '',
          ContractMode: '',
          Amount: '',
          ContractPeriod: '',
          OpenDate: '',
          PlanFinishDate: '',
          ConstructionUnit: '',
          ConstructionOwner: '',
          ConstructionTelphone: '',
          BuildUnit: '',
          BuildOwner: '',
          BuildTelphone: '',
          SuperviseUnit: '',
          SuperviseOwner: '',
          SuperviseTelphone: '',
          QualityUnit: '',
          QualityOwner: '',
          QualityTelphone: '',
          Remark: '',
          IsDelete: '',
          CreateOn: '',
          CreateUserId: '',
          CreateBy: '',
          ModifiedOn: '',
          ModifiedUserId: '',
          ModifiedBy: '',
        },
        tableColumns: [

          {
            prop: "Status",
            label: '状态',
            width: 100,
            sort: true
          },

          // {
          //   prop: "SupplierId",
          //   label: '评价单位',
          //   width: 100,
          //   sort: true
          // },

          {
            prop: "SupplierName",
            label: '企业名称',
            width: 100,
            sort: true
          },

          {
            prop: "ProjectName",
            label: '项目名称',
            width: 100,
            sort: true
          },

          {
            prop: "ContractNo",
            label: '合同编号',
            width: 100,
            sort: true
          },

          {
            prop: "ProjectPlace",
            label: '工程地点',
            width: 100,
            sort: true
          },

          {
            prop: "ProjectOwner",
            label: '项目负责人',
            width: 100,
            sort: true
          },

          {
            prop: "Telephone",
            label: '联系人电话',
            width: 100,
            sort: true
          },

          {
            prop: "ProjectType",
            label: '项目类别',
            width: 100,
            sort: true
          },

          // {
          //   prop: "ContractMode",
          //   label: '合同模式',
          //   width: 100,
          //   sort: true
          // },

          {
            prop: "Amount",
            label: '合同总金额(万元)',
            width: 100,
            sort: true
          },

          {
            prop: "ContractPeriod",
            label: '合同总工期(天)',
            width: 100,
            sort: true
          },

          {
            prop: "OpenDate",
            label: '开工日期',
            width: 100,
            sort: true
          },

          {
            prop: "PlanFinishDate",
            label: '计划竣工时间',
            width: 100,
            sort: true
          },


          ]
      }
    },
    created() {
      //查询条件初始值备份
      Object.assign(this.searchFormReset, this.searchForm);
      //查询列表
      this.initDatas();
      //this.getDictOptions()
      this.statusFun()
      // console.log(8888888,localStorage.getItem('userRoleids'))
      // if(localStorage.getItem('userRoleids')!=''&&localStorage.getItem('userRoleids')!=undefined){
      //   this.userRoleids = localStorage.getItem('userRoleids').indexOf('10000221')
      //   console.log(8888888,this.userRoleids)
      // }else{
      //   this.userRoleids = -1
      // }

    },
    methods: {
      //一键处理
      onSelectAll(e){
        console.log(e)
        var list = []
        e.map((item,index) => {
          list.push(item.Id)
        })
        this.eveIdList = String(list)
      },
      //筛选
      selectableFun(row,index){
        if(row.Status==4){
          return true;
        }else{
          return false;
        }
      },
      //一键处理按钮
      onSelectAllButton(){
        this.selectAllButtonBoolean = true
      },
      //一键处理确定
      onSelectAllButtonTrue(){
        if(this.eveIdList!=''&&this.eveIdList!=undefined){
          this.$refs.submitpopup.dialogCommonAuditMakeSureVisible = true
        }else{
          this.$message({
            type: 'warning',
            message: '请选择评价'
          });
        }
      },
      //一键处理取消
      onSelectAllButtonDelete(){
        this.selectAllButtonBoolean = false
      },
      //状态判断
      statusFun(){
        // 一键处理权限
        var data = {
          percode:'oil_contract.Review.Batch',
        }
        permissionApi.permissionIsauth(data, this.$axios).then(res => {
          console.log('一键处理权限权限',res.data)
          if(res.data.code==0){
            if(res.data.message=='有权限'){
              this.userSelectBoolean = true
            }
          }
        }).catch(err => {
          console.error(err)
        })
        var data = {
          percode:'oil_contract.Review.Delete',
        }
        permissionApi.permissionIsauth(data, this.$axios).then(res => {
          console.log('权限',res.data)
          if(res.data.code==0){
            if(res.data.message=='有权限'){
              this.deleteBoolean = true
            }
          }
        }).catch(err => {
          console.error(err)
        })
        var data = {
          percode:'oil_contract.Review.Edit',
        }
        permissionApi.permissionIsauth(data, this.$axios).then(res => {
          console.log('权限',res.data)
          if(res.data.code==0){
            if(res.data.message=='有权限'){
              this.editeBoolean = true
            }
          }
        }).catch(err => {
          console.error(err)
        })

      },
      //跳转评价
      onNavigateEvaluate(item){
        console.log('跳转',item)
        this.$router.push({
          path:'/oilcontract/contract-basis/' + item.Id + '/evaluate',
          query:{
            item:item,
            type:2,
          }
        })
      },
      initDatas() {
        //分页及列表条件
        let params = {
          _currentPage: this.currentPage,
          _size: this.size,
          Order: this.Column.Order,
          Prop: this.Column.Prop,
          ContractClass:'02',
        }
        // <el-option label="物资类" value="01" key="01"></el-option>
        // <el-option label="基建类" value="02" key="02"></el-option>
        // <el-option label="技术服务" value="03" key="03"></el-option>

        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.getReviewList(myCreateOn.join(','), params, this.$axios).then(res => {
          console.log('评价接口',res)
          this.entityList = res.data.items
          this.currentItemCount = res.data.currentItemCount
        }).catch(err => {
          console.error(err)
        })
      },

      getDictOptions() {
        api.getDictList(this.$axios).then(res => {
          //this.dictOptions.customerList = res.data.items['customerList']
          //this.dictOptions.projectList = res.data.items['projectList']

        }).catch(err => {
          console.error(err)
        })
      },

      searchCommand(command) {
        if (command == 'search') {
          this.dialogVisible = true
        } else if (command == 'clear') {
          this.clearSearch()
        }
      },
      //列表排序功能
      orderby(column) {
        if (column.order == 'ascending') {
          this.Column.Order = 'asc'
        } else if (column.order == 'descending') {
          this.Column.Order = 'desc'
        }
        this.Column.Prop = column.prop
        this.initDatas()
      },
      clearSearch() {
        Object.assign(this.searchForm, this.searchFormReset);
        //this.searchForm = this.searchFormReset;
        this.CreateOn = ''
        this.initDatas()
      },
      handleSearch() {
        this.currentPage = 1;
        this.dialogVisible = false;
        this.initDatas();
      },
      handleCurrentChange(value) {
        this.currentPage = value
        this.initDatas()
      },
      handleSizeChange(value) {
        this.size = value
        this.currentPage = 1
        this.initDatas()
      },
      deleteEntity(row,index) {
        this.$refs['popover-' + `${index}`].doClose()
        apiReview.deleteEntity(row.Id, this.$axios).then(res => {
          if (res.data.code === 0) {
            this.initDatas();
            this.$message({
              type: 'success',
              message: res.data.message
            });
          } else {
            this.$message({
              type: 'warning',
              message: res.data.message
            });
          }
        }).catch(err => {
          console.error(err)
        });
      },
      jstimehandle(val) {
        if (val === '') {
          return '----'
        } else if (val === '0001-01-01T08:00:00+08:00') {
          return '----'
        } else if (val === '5000-01-01T23:59:59+08:00') {
          return '永久'
        } else {
          val = val.replace('T', ' ')
          return val.substring(0, 10)
        }
      },
      exportExcel () {
        /* generate workbook object from table */
        let wb = XLSX.utils.table_to_book(
          document.querySelector('#rebateSetTable')
        )
        /* get binary string as output */
        let wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array'
        })
        try {
          FileSaver.saveAs(
            new Blob([wbout], {
              type: 'application/octet-stream'
            }),
            'SupplierUsedName.xlsx'
          )
        } catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout)
        }
        return wbout
      },
      formatDateTime(date) {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        var minute = date.getMinutes();
        minute = minute < 10 ? ('0' + minute) : minute;
        return y + '-' + m + '-' + d + ' ' + h + ':' + minute;
      }
    }
  }

</script>

<style lang="scss">
  .el-pagination {
    margin: 1rem 0 2rem;
    text-align: right;
  }
</style>