gjerp_ui/src/views/dashboard/components/fd/czfdzgtcx.vue

<template>
  <el-container>
    <el-header style="width: 100%; height: 30px;font-size: 12px">
      <el-form :inline="true"  label-width="90px" >
        <el-row>
          <el-col :span="20">
            <el-form-item label="工程编号:"  >
              <el-select v-model="queryParam.czbh" filterable  placeholder="工程编号" @change="czbhChange" >
                <el-option
                  v-for="item in projectData"
                  :key="item.cbbm"
                  :label="item.cbbm"
                  :value="item.cbbm">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item style="float: right" >
              <el-button type="success" @click="loadData()">查询</el-button>
              <el-button type="success"  @click.native="uploadExcel">
                  <el-upload
                  :action="uploadAction"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :data="uploadData"
                  :on-success="handleAvatarSuccess"
                  :disabled="uploadState==0?true:false"
                  :headers="heads">
                  直观图模板导入
                </el-upload>
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <hr style="margin: 0.5%">
    <el-container style="padding-top: 0px">
      <el-main>
        <Zgt ref="zgtRef" :czbh="this.queryParam.czbh"/>
        <Tabs :data="tabsData"/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { startLoading, endLoading } from '@/utils'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import { Message } from 'element-ui'
import { getCzFdBase, getList, upload, getListFdMx, findTPxqjh } from '@/api/fd/base'
import XEUtils from 'xe-utils'
import { getSumAdd } from '@/utils/rpkj'
import Tabs from "@/views/dashboard/components/fd/child/tab.vue";
import Zgt from "@/views/dashboard/components/fd/child/zgt.vue";
export default {
  // 船只分段直观图定义
  name: 'Czfdzgtcx',
  components: {Zgt, Tabs},
  data() {
    return {
      tabsData:{},
      defaultHeight: { height: '' },
      activeName: 'first',
      tableDataMx: [],
      heads: { token: getToken() },
      uploadAction: process.env.VUE_APP_BASE_API + '/api/dmCzfddyb/upload',
      uploadData: {},
      queryParam: {
        czbh: '',
      },
      uploadState: 0,
      isupload:'01',
      dictData: {},
      projectData: [],
      col:0,
      row:'',
      column:'',
      columns:[],
      filterName1:'',
      tableData: [],
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'bmbm',
      'apbm'
    ]),
  },
  created() {
    this.emtext='暂无数据'
    this.baseSeacrh()
    this.uploadState=0
  },
  methods: {
    czbhChange(){
      this.uploadState = 1
    },
    headerCellStyle ({ column, columnIndex }) {
      if (['jhxqrq','fdxqrq',
        "jhjtrq","jtxqts","qfxqrq"].includes(column.property)) {
        return {
          backgroundColor: '#2db7f5',
          color: '#ffffff'
        }
      }
      if (['sjltsj',"'ltxqts'",'qfpsrq',"qfqrrq",'ltxqts'
      ].includes(column.property)) {
        return {
          backgroundColor: '#43b812',
          color: '#ffffff'
        }
      }
      if (['xzjhrkrq','ygpprq','fkpprq',"xqtsc",
      ].includes(column.property)) {
        return {
          backgroundColor: '#e4bc0a',
          color: '#ffffff'
        }
      }
    },
    rowClassName({ row, rowIndex ,column}){
      if(row.qfpsrq!=='' && row.qfpsrq!==undefined && row.qfpsrq!==null){
        return 'row-green'
      }else if(row.xqtsc<-7){
        return 'row-yellow'
      }
    },
    footerMethod ({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (['xqsl','bjzzl'].includes(column.property)) {
            return getSumAdd(data, column.property)
          }
          if (columnIndex === 1) {
            return '合计'
          }
          return null
        })
      ]
    },
    uploadExcel() {
      if (this.queryParam.czbh === '') {
        this.$message.warning('选择工程编码')
        this.uploadState = 0
        return
      }
      this.uploadData.czbh = this.queryParam.czbh
      this.uploadData.isupload = this.isupload
    },
    beforeAvatarUpload(file) {
      // 文件类型
      const isType = file.type === 'application/vnd.ms-excel'
      const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      const fileType = isType || isTypeComputer
      if (!fileType) {
        this.$message.error('上传文件只能是xls/xlsx格式！')
        return
      }
      startLoading()
      return fileType
    },
    handleAvatarSuccess(res, file) {
      endLoading()
      if (res.success) {
        if(res.data.zt==='01'){
          this.$alert('该模板已导入数据,是否重新导入并覆盖模板数据?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            distinguishCancelAndClose: true,
            type: 'warning'
          }).then(type => {
            upload({ file: file.raw, project: this.queryParam.czbh, isupload: '02' }).then(res => {
              if (res.success) {
                this.$message({ message: '导入成功', type: 'success' })
                this.loadData()
              }
            })
          })
        }else{
          this.$message({ message: '导入成功', type: 'success' })
          this.loadData()
        }
      } else {
        Message({
          message: res.message || 'Error',
          type: 'error',
          duration: 5 * 1000
        })
      }
    },
    async baseSeacrh() {
      getCzFdBase({  }).then(response => {
        const tmpList=[]
        const data=[]
        for (const item of response.data.czbhs) {
          if (tmpList.includes(item.cbbm)){
            continue
          }
          tmpList.push(item.cbbm)
          data.push(item)
        }
        this.projectData = data
      })
    },
    loadData() {
      if(this.queryParam.czbh===''){
        this.$message.warning('选择工程编码')
        return
      }
      getListFdMx(this.queryParam).then(res=>{
          this.$refs.zgtRef.show(res)
      })
    },
  }
}
</script>

<style lang="scss" scoped >
.el-header{margin:0;padding: 5px;height:auto;}
.el-container{padding: 0;margin:0;}
.el-main{padding: 0;}
.el-col{padding: 0;}
.el-aside{background: #fff;padding: 0}
.el-container{padding: 0}
.el-row {margin-bottom: 5px;}
.el-row:last-child {margin-bottom: 0; }

.tableStyles{
  background: #0a76a4;
}

.my-dropdown {
  width: 400px;
  height: 400px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  font-size: 12px;

}
.mytable1{

}
.borderClass{

}
.vxe-input {
  display: inline-block !important;
  position: relative !important;
  width: auto;
}
.el-input {
  display: inline-block !important;
  position: relative !important;
  width: auto;
}
.keyword-lighten {
  color: #000;
  background-color: #FFFF00;
}

.vxe-textarea--inner {
  line-height: inherit;
}
.fontClass{
  font-size: 12px;
  font-weight: bold;
}
</style>