supplier_system/src/dashoo.cn/frontend_web/src/pages/oilsupplier/goodsaptitude/tmpsuppliercheck.vue

<template>
  <div>
    <el-card class="box-card" shadow="never" style="height: calc(100vh - 115px);position:relative">
      <div slot="header">
        <span>
          <i class="icon icon-table2"></i> 对比列表
        </span>
        <el-form :model="searchForm" ref="searchformRef" :inline="true" style="float: right;position:absolute;right:15px;top:10.5px" >
          <el-form-item label="准入编码">
            <el-input size="mini" v-model="searchForm.AccessCardNo" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="企业名称">
            <el-input size="mini" v-model="searchForm.SupplierName" placeholder="请输入内容"></el-input>
          </el-form-item>

          <el-form-item>
            <el-dropdown split-button type="primary" size="mini" @click="initDatas($event)" @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-item>
            <el-button type="warning" size="mini" @click="exportExcel">导出</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!--内框表格显示-->
      <el-table id="rebateSetTable1" highlight-current-row :data="conList" size="mini" v-loading="loading" border height="calc(100vh - 243px)"
                style="width: 100%" @sort-change="orderby" :row-class-name="tableRowClassName">
        <el-table-column label="操作" width="260px" align="center" fixed="right" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="text" @click="opencertsub(scope.row)" title="查看准入范围" size="mini" icon="el-icon-document" width="120px">准入范围</el-button>
          </template>
        </el-table-column>
        <!--内框表格剩余栏显示-->
        <el-table-column label="状态" prop="InFlag" width="100px" align="center">
          <template slot-scope="scope">
            <el-alert v-if="scope.row.InFlag=='1'" :closable="false" style="background:rgba(255,255,255,0.2)" title="准入" type="success" ></el-alert>
            <el-alert v-if="scope.row.InFlag=='2'" :closable="false" style="background:rgba(255,255,255,0.2)" title="暂停" type="warning" ></el-alert>
            <el-alert v-if="scope.row.InFlag=='3'" :closable="false" style="background:rgba(255,255,255,0.2)" title="取消" type="error"></el-alert>
          </template>
        </el-table-column>
        <el-table-column label="准入编码" width="100px" prop="AccessCardNo" sortable align="center">
          <template slot-scope="scope" >
            <span style="font-family:'黑体';font-size:13px">{{scope.row.AccessCardNo}}</span>
          </template>
        </el-table-column>
        <el-table-column label="企业名称" min-width="300px" prop="SupplierName" sortable align="center"></el-table-column>
        <el-table-column label="准入类别" prop="SupplierTypeCode" align="center">
          <template slot-scope="scope">
            {{transferStr(scope.row.SupplierTypeCode)}}
          </template>
        </el-table-column>
        <el-table-column label="法人代表"  width="100px" prop="LegalPerson" align="center"></el-table-column>
        <el-table-column label="注册资金（万元）"  width="170px" prop="RegCapital" sortable align="center"></el-table-column>
        <el-table-column label="移动电话"  width="120px" prop="Mobile" align="center"></el-table-column>
        <el-table-column label="是否缺资质" width="130px" prop="Checked" sortable align="center">
          <template slot-scope="scope" >
            <span style="font-family:'黑体';font-size:13px">{{stringChecked(scope.row.Checked)}}</span>
          </template>
        </el-table-column>
        <!--<el-table-column label="最后一次年审" width="100px" prop="AuditDate" align="center">-->
        <!--<template slot-scope="scope">{{ jstimehandle(scope.row.AuditDate) }}</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 :visible.sync="dialogVisibleCertsSub" width="90%" append-to-body>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-weight: bold">准入范围</span>
          <span style="float: right;">
                <el-form ref="form" :inline="true" style="margin-top: -10px">
                  <el-form-item label="编码">
                    <el-input size="mini" v-model="searchFormSub.Code" placeholder="请输入内容" style="width: 100%"></el-input>
                  </el-form-item>
                  <el-form-item label="名称">
                    <el-input size="mini" v-model="searchFormSub.Name" placeholder="请输入内容" style="width: 100%"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" size="mini" style="margin-left: 8px" @click="search">查询</el-button>
<!--                    <el-button type="primary" @click="toPdf" size="mini" style="margin-left: 25px">下载待删除准入范围</el-button>-->
                  </el-form-item>
                </el-form>
              </span>
        </div>
        <el-table :data="certsubList" border size="mini" :row-class-name="subRowClassName" v-loading="certsubListLoading">
<!--          <el-table-column label="操作" width="160px" align="center" fixed="right" show-overflow-tooltip>-->
<!--            <template slot-scope="scope">-->
<!--              <el-button type="text" style="color: #F56C6C" @click="delcertsubbyid(scope.row)" title="删除" size="mini" icon="el-icon-delete" width="90px">删除</el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column prop="Code" label="分类编码" show-overflow-tooltip></el-table-column>
          <el-table-column prop="Name" label="分类名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="HeaderName" label="缺少资质" show-overflow-tooltip></el-table-column>
          <el-table-column prop="GoodsLevel" label="级别" width="80px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.GoodsLevel=='1'">一级</span>
              <span v-if="scope.row.GoodsLevel=='2'">二级</span>
            </template>
          </el-table-column>
          <el-table-column
            label="是否为制造商" width="100" v-if="SupplierTypeCode == '01'">
            <template slot-scope="scope">
              <el-tag type="info" v-if="scope.row.IsManufacturer == 2">非制造商</el-tag>
              <el-tag type="success" v-else-if="scope.row.IsManufacturer == 1">制造商</el-tag>
              <span v-else>——</span>
            </template>
          </el-table-column>
          <el-table-column label="状态"
                           align="center"
                           width="100px">
            <template slot-scope="scope">
            <span v-if="scope.row.CertSubStatus=='1'"
                  style="color:#67C23A">准入</span>
              <span v-else-if="scope.row.CertSubStatus=='2'"
                    style="color:#E6A23C">暂停</span>
              <span v-else>——</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChangeSub"
          @current-change="handleCurrentChangeSub"
          :current-page="currentPageSub"
          :page-sizes="[10, 50, 100, 200, 400]"
          :page-size="sizeSub"
          layout="total, sizes, prev, pager, next, jumper"
          :total="currentItemCountSub"
        ></el-pagination>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
  import api from '@/api/oilsupplier/goodsaptitude'
  import XLSX from "xlsx";
  export default {
    name: 'compareTmpSupplier',
    created () {
      // Object.assign(this.searchFormReset, this.searchForm)
      this.initDatas()
    },
    data () {
      return {
        // 分页参数
        size: 10,
        currentPage: 1,
        currentItemCount: 0,
        // 列表排序
        Column: {
          Order: '',
          Prop: ''
        },
        conList: [],
        loading: false,
        dialogVisibleCertsSub: false,
        certsubListLoading: false,
        searchForm: {
          AccessCardNo: '',
          SupplierName: '',
          SupplierTypeCode: '',
          InFlag: '',
          LegalPerson: '',
          ContactName: '',
          CommercialNo: '',
          RegCapital1: '',
          RegCapital2: '',
          CompanyType: '',
          Province: '',
          City: '',
          Street: '',
          Address: '',
          LinkProvince: '',
          LinkCity: '',
          LinkStreet: '',
          LinkAddress: '',
          DepositBank: '',
          BusinessScope: '',
          OldSupplierName: '',
          HseTraining: '',
          // NeedFileType: [],
          NeedFileType: '',
          CerSubName: '',
          FullName: '',
          CheckUserName: '',
          CheckUserId: ''
        },
        SupplierId: '',
        Id: '',
        SupplierCertId: '',
        SupplierTypeCode: '',
        SupplierName: '',
        searchFormSub: {
          Code: '',
          Name: ''
        },
        // 分页参数
        sizeSub: 10,
        currentPageSub: 1,
        currentItemCountSub: 0,
        certsubList: [],
        showcolumn: [],
        tableColumns: [

          {
            prop: 'InFlag',
            label: '状态',
            width: 120,
            sort: true
          },
          {
            prop: 'AccessCardNo',
            label: '准入编码',
            width: 150,
            sort: true
          },

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

          {
            prop: 'SupplierTypeCode',
            label: '准入类别',
            width: 150,
            sort: true
          },

          {
            prop: 'LegalPerson',
            label: '法人代表',
            width: 120,
            sort: true
          },

          {
            prop: 'RegCapital',
            label: '注册资金',
            width: 150,
            sort: true
          },

          {
            prop: 'Mobile',
            label: '移动电话',
            width: 120,
            sort: true
          }

        ],
        dynamicTableColumns: [],
      }
    },

    methods: {
      tableRowClassName({row, rowIndex}) {
        // console.log(row, 'row')
        console.log(row.Checked, 'row')
        if (row.Checked === "1") {
          return 'blue-row'
        } else{
          return 'yellow-row'
        }
      },
      subRowClassName({row, rowIndex}) {
        // console.log(row, 'row')
        console.log(row.Checked, 'row')
        if (row.Checked === 1) {
          return 'yellow-row'
        } else{
          return 'blue-row'
        }
      },
      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()
      },
      transferStr (val) {
        if (val === '01') {
          return '物资类'
        } else if (val === '02') {
          return '基建类'
        } else if (val === '03') {
          return '服务类'
        } else {
          return val
        }
      },
      stringChecked(val) {
        if (val === '1') {
          return '否'
        }  else {
          return '是'
        }
      },
      initDatas () {
        this.loading = true
        // 分页及列表条件
        let params = {
          _currentPage: this.currentPage,
          _size: this.size,
          Order: this.Column.Order,
          Prop: this.Column.Prop,
          Edition: '1'
        }
        let myCreateOn = []
        // 解析时间

        if (this.CreateOn != null && 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.getCompareTmpSupplier(params, this.$axios).then(res => {
          this.conList = res.data.items
          this.currentItemCount = res.data.currentItemCount
          this.loading = false
        }).catch(err => {
          console.error(err)
        })
      },
      opencertsub (row) {
        this.currentPageSub = 1
        this.certsubList = []
        this.dialogVisibleCertsSub = true
        this.certsubListLoading = true
        this.Id = row.Id
        this.SupplierCertId = row.CertId
        this.SupplierTypeCode = row.SupplierTypeCode
        this.SupplierName = row.SupplierName
        this.getCertSub(row)
      },
      getCertSub (row) {
        let _this = this
        const params = {
          SupplierCertId: this.SupplierCertId,
          SupplierTypeCode: this.SupplierTypeCode,
          _currentPage: this.currentPageSub,
          _size: this.sizeSub
        }
        Object.assign(params, this.searchFormSub)
        this.$axios.get('goodsaptitude/delcertsublist', {
          params
        })
          .then(res => {
            _this.certsubList = res.data.items
            _this.currentItemCountSub = res.data.currentItemCount
            this.certsubListLoading = false
          })
          .catch(err => {
            console.error(err)
          })
      },
      // 分页方法
      handleCurrentChangeSub (value) {
        this.currentPageSub = value
        this.getCertSub()
      },
      handleSizeChangeSub (value) {
        this.sizeSub = value
        this.currentPageSub = 1
        this.getCertSub()
      },
      // 导出准入范围到pdf
      toPdf () {
        api.pdfexport(this.Id, this.SupplierTypeCode, this.$axios)
          .then(res => {
            // response
            if (res.data.code === 0) {
              // this.$message({
              //   type: 'success'
              //   message: res.data.message
              // })
              let docurl = res.data.item
              let pdfurl
              // 内网服务器专用
              if (process.client && docurl.indexOf('upfile') === 0) {
                const myDomain = window.location.host
                // location.href = 'http://' + myDomain + '/' + docurl
                pdfurl = 'http://' + process.env.LOCAL_IP + '/' + docurl
                let requestParams = {
                  pdfUrl: pdfurl,
                  watermark: this.SupplierName
                }
                this.$axios.post('supplierdataentry/word-to-pdf-watermark', requestParams)
                  .then(function (res) {
                    window.open('http://' + myDomain + '/' + res.data)
                  })
              } else {
                // location.href = 'http://' + docurl
                pdfurl = 'http://' + docurl
                let requestParams = {
                  pdfUrl: pdfurl,
                  watermark: this.SupplierName
                }
                this.$axios.post('supplierdataentry/word-to-pdf-watermark', requestParams)
                  .then(function (res) {
                    window.open('http://' + res.data)
                  })
              }
            }
          }).catch(err => {
          console.error(err)
        })
      },
      search () {
        this.getCertSub()
      },
      delcertsubbyid (row) {
        console.log(row)
        this.$confirm('是否删除准入项?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            Id: row.Id
          }
          console.log(params)
          api.delTmpSupplierCertSub(params, this.$axios).then(res => {
            console.log(res)
            if (res.data.code === 0) {
              this.$message({
                type: 'success',
                message: res.data.message
              })
              this.getCertSub()
            } else {
              this.$message({
                type: 'warning',
                message: res.data.message
              })
            }
          })
        })
      },
      exportExcel () {
        console.log('111111导出')
        this.loading = true
        api.execlexport(this.$axios)
          .then(res => {
            // response
            if (res.data.code === 0) {
              // this.$message({
              //    type: 'success'
              //    message: res.data.message
              // })
              let docurl = res.data.item
              // 内网服务器专用
              if (process.client && docurl.indexOf('upfile') === 0) {
                const myDomain = window.location.host
                location.href = 'http://' + myDomain + '/' + docurl
              } else {
                location.href = 'http://' + docurl
              }
            }
          }).catch(err => {
          console.error(err)
        })
        this.loading = false
      },
    }

  }
</script>

<style>
.el-table .blue-row {
  background: lightblue;
}

.el-table .yellow-row {
  background: lightyellow;
}
</style>