sen-yu-new-web/src/views/cost-allocation-total/modal/mainTableExpenseUSDModal.vue

<template>
  <!-- 成本分配 主表 美元费用支出 弹框 -->
  <a-modal
    title="美元费用支出"
    v-model="mainTableExpenseUSDModVis"
    :confirmLoading="confirmLoading"
    width="86%"
    style="top:330px;left:100px;"
    :footer="null"
  >
    <!-- tabel 加载 -->
    <a-spin :spinning="confirmLoading">
      <!-- 查询  -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="8">
              <a-form-item label="账套号">
                <a-input placeholder="请输入账套号" v-model="queryParam.setNo"></a-input>
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-item label="供应商">
                <a-input placeholder="请输入供应商" v-model="queryParam.supplier"></a-input>
              </a-form-item>
            </a-col>

            <!-- 重置 -->
            <a-col :md="6" :sm="8">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                <a @click="handleToggleSearch" style="margin-left: 8px">
                  {{ toggleSearchStatus ? '收起' : '展开' }}
                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <!-- table -->
      <div>
        <a-table
          bordered
          :loading="loading"
          :columns="mainTableExpenseUSDColumns"
          :data-source="mainTableExpenseUSDData"
          :pagination="false"
          :scroll="{ y: 500 }"
        >
        </a-table>
        <!-- 返回  -->
        <a-row style="marginTop:20px;">
          <a-col :md="24" :sm="12">
            <span style="float: right;" class="table-operator">
              <a-button type="primary" @click="backCostAllocationTable" icon="rollback">返回</a-button>
            </span>
          </a-col>
        </a-row>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
export default {
  name: 'MainTableExpenseUSDModVis', //  成本分配统计 主表 美元费用支出
  mixins: [JeecgListMixin],
  components: { JEllipsis },
  data() {
    return {
      loading: false, // 表格加载
      // orderDataform: this.$form.createForm(this),
      confirmLoading: false,
      mainTableExpenseUSDModVis: false,
      // 表头
      mainTableExpenseUSDColumns: [
        {
          title: '账套号',
          dataIndex: 'setNo',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '项目',
          dataIndex: 'expenseItem',
          width: 120,
          className: 'replacecolor'
        },
        { 
          title: '美元', 
          dataIndex: 'disbursedOriginalmoney', 
          width: 120,
          className: 'replacecolor' ,
          customRender: (text, record, index) => {
            if(text!==''&&text){
              return Number(text).toFixed(2)
            }
          },
          },
        { 
          title: '人民币（不含税）', 
          dataIndex: 'disbursedLocalmoney', 
          width: 120, className: 'replacecolor',
          customRender: (text, record, index) => {
            if(text!==''&&text){
              return Number(text).toFixed(2)
            }
          },
         },
        { 
          title: '人民币(税额)', 
          dataIndex: 'shuiemoney', 
          width: 120, 
          className: 'replacecolor',
          customRender: (text, record, index) => {
            if(text!==''&&text){
              return Number(text).toFixed(2)
            }
          },
         },
        { 
          title: '人民币(价税合计)', 
          dataIndex: 'iNatMoney', 
          width: 120, 
          className: 'replacecolor',
          customRender: (text, record, index) => {
            if(text!==''&&text){
              return Number(text).toFixed(2)
            }
          }, },
        // {
        //   title: '金额',
        //   dataIndex: 'disbursedOriginalmoney',
        //   width: 120,
        //   className: 'replacecolor'
        // },
        {
          title: '供应商',
          dataIndex: 'processUnit',
          width: 120,
          className: 'replacecolor'
        }
      ],
      mainTableExpenseUSDData: [],
      fixedData:[],
      // 查询条件
      queryParam: {
        setNo: '', // 账套号
        supplier: '' // 供应商
      }
    }
  },
  // 接收父组件 方法
  props: {
    father: {
      type: Function,
      default: null
    }
  },
  created() {},
  methods: {
    // 返回
    backCostAllocationTable() {
      console.log('返回成本分配统计表')
      // this.$router.push('fabricLoss-table')
      // this.invoiceNumModVis = false
      this.close()
    },
    // 弹框查询按钮
    searchQuery() {
       var data = []
      this.fixedData.map(item =>{
        if(item.setNo.includes(this.queryParam.setNo) && item.processUnit.includes(this.queryParam.supplier)){
          data.push(item)
        }
      })
      this.mainTableExpenseUSDData = data
    },
    // 重置
    searchReset() {
      console.log('美元重置查询条件')
      // this.queryParam = {}
      this.queryParam.setNo = ''
      this.queryParam.supplier = ''
      this.mainTableExpenseUSDData = this.fixedData
      // this.getShipmentList()
    },
    close() {
      this.$emit('close')
      this.mainTableExpenseUSDModVis = false
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/overwriter.less';
/deep/ .ant-table-thead > tr > th {
  text-align: center;
  // font-weight: 700;
}

/deep/ .ant-table-tbody {
  text-align: center;
}

// /deep/ th.replacecolor {
//   background-color: #ccc;
// }
</style>