Infsea.vue

<template>
	<div class="eibs-tab">
		<c-col :span="24">
			<c-col :span="8">
				<el-form-item label="客户号/名称" prop="ptyExtkey">
					<c-input v-model="model.ptyExtkey" placeholder="请输入客户号/名称" style="width:100%" />
				</el-form-item>
			</c-col>
			<c-col :span="8">
        <el-form-item label="收费日期" style="width: 100%">
          <c-col :span="11">
            <c-date-picker type="date" v-model="model.opndatfrom" style="width: 100%" placeholder="请选择起始日期" value-format="yyyy-MM-dd"></c-date-picker>
          </c-col>
          <c-col :span="2" style="text-align: center">
            <label style="display: inline-block; width: 100%">-</label>
          </c-col>
          <c-col :span="11">
            <c-date-picker type="date" v-model="model.opndatto" style="width: 100%" placeholder="请选择截止日期" value-format="yyyy-MM-dd"></c-date-picker>
          </c-col>
        </el-form-item>
			</c-col>
			<c-col :span="8">
				<el-form-item label="业务类型" prop="gidopentyps">
					<c-select collapse-tags multiple v-model="model.gidopentyps" placeholder="请输入业务类型" style="width:100%" :clearable="true" dbCode="trntyp"></c-select>
				</el-form-item>
			</c-col>
			
		</c-col>

		<c-col :span="24">
			<c-col :span="12" style="text-align: left">
				<el-button type="primary" size="small" @click="onceCharge()">一键收费</el-button>
			</c-col>
			<c-col :span="12" style="text-align: right">
				<el-button icon="el-icon-search" size="small" @click="handleReset()">重置</el-button>
				<el-button type="primary" icon="el-icon-search" size="small" @click="formSerach()">查询</el-button>
			</c-col>
		</c-col>
		 <!-- 查询展示区 -->
    <c-col :span="24" style="height: calc(100% - 136px)">
      <el-table
				ref="multipleTable"
				:border="true"
				:data="comfecList"
				style="width:100%; margin-top:20px;margin-right:20px;"
				size="small"
				height="calc(100% - 42px)"
				:highlight-current-row="true"
				:row-key="getRowKey"
				@selection-change="handleSelectionChange"
			>
				<el-table-column type="selection"	width="55" :reserve-selection="true"></el-table-column>
        <el-table-column label="业务种类" prop="trntyp" min-width="100px">
          <template slot-scope="scope">
            <el-form-item label-width="0">
							<c-select-value-to-label v-model="scope.row.trntyp" dbCode="TRNTYP">
							</c-select-value-to-label>
						</el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="业务编号" prop="objref" min-width="150px">
        </el-table-column>
        <el-table-column label="客户号" prop="ptyextkey" min-width="100px">
        </el-table-column>
        <el-table-column label="客户名称" prop="ptynam" min-width="200px">
        </el-table-column>
        <el-table-column label="费用代码" prop="feecod" min-width="100px">
        </el-table-column>
        <el-table-column label="计费起始日期" prop="beginDate" min-width="150px">
        </el-table-column>
        <el-table-column label="计费结束日期" prop="endDate" min-width="150px">
        </el-table-column>
        <el-table-column label="收取份数" prop="unt" min-width="100px">
        </el-table-column>
        <el-table-column label="币种" prop="feecur" min-width="100px">
        </el-table-column>
        <el-table-column label="未收取金额" prop="feeamt" min-width="100px">
            <template slot-scope="scope">
              <span> {{moneyFormat(scope.row.feeamt, scope.row.feecur) }}
              </span>
            </template>
        </el-table-column>
        <el-table-column label="计费周期" prop="pertyp" min-width="100px">
            <template slot-scope="scope">
            <el-form-item label-width="0">
							<c-select-value-to-label v-model="scope.row.pertyp" dbCode="pertyp" uil="CN">
							</c-select-value-to-label>
						</el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="费率类型" prop="calrul" min-width="100px">
            <template slot-scope="scope">
            <el-form-item label-width="0">
							<c-select-value-to-label v-model="scope.row.calrul" uil="CN" dbCode="calrul">
							</c-select-value-to-label>
						</el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="适用费率" prop="ratcal" min-width="150px">
        </el-table-column>
        <el-table-column label="操作" min-width="150px" fixed="right" align="center">
          <template slot-scope="scope">
            <c-button style="margin-right: 10px" size="small" type="primary" @click="showDialog(scope.$index, scope.row)">费用调整</c-button>
          </template>
        </el-table-column>
      </el-table>
			<el-pagination
				layout="total, sizes, prev, pager, next, jumper"
				:page-sizes="[5, 10, 20, 50, 100]"
				:total="pagination.total"
				:page-size="pagination.pageSize"
				:current-page="pagination.pageNum"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange" >
			</el-pagination>
    </c-col>
		<!-- <div class="footer-btn-wrap">
			<el-button type="primary" size="small" @click="onceCharge()">一键收费</el-button>
		</div> -->
    <!-- 费用调整弹框 -->
		<fee-dialog ref="feeDialog" :dialog="dialog" @saveDialog="saveDialog"/>
	</div>
</template>

<script>
import codes from "~/config/CodeTable";
import event from "../event";
import FeeDialog from "./feeDialog.vue";
import { cloneDeep } from "lodash";
import commonDepend from "~/mixin/commonDepend.js";
import Api from "~/service/Api"
import commonFunctions from '~/mixin/commonFunctions.js';

export default {
  props: ["model", "codes"],
  inject: ["root"],
  mixins: [event, commonDepend, commonFunctions],
  components: {FeeDialog},
  data() {
    return {
      comfecList:[],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
			},
			mulSelected: [],
      feeIndex: -1,
      dialog: {},
    };
  },
  mounted() {
  
  },
  methods: {
    showDialog(index, row) {
      this.feeIndex = index;
      this.dialog = cloneDeep(row);
      this.$refs.feeDialog.visiable = true;
      this.$nextTick(() => {
        this.$refs.feeDialog.init();
      });
    },
    saveDialog(formData) {
			console.log('formData', formData)
      this.comfecList[this.feeIndex].unt = formData.unt;
      this.comfecList[this.feeIndex].endDate = formData.endDate;
      this.comfecList[this.feeIndex].feeamt = formData.feeamt;
      this.comfecList[this.feeIndex].ratcal = formData.ratcal;
      this.comfecList[this.feeIndex].untamt = formData.untamt;
      this.comfecList[this.feeIndex].minamt = formData.minamt;
      this.comfecList[this.feeIndex].maxamt = formData.maxamt;
      this.comfecList[this.feeIndex].inftxt = formData.inftxt;
      this.comfecList[this.feeIndex].modflg = formData.modflg;
      this.comfecList[this.feeIndex].pertyp = formData.pertyp;
		},
		getRowKey(row) {
			return row.diainr
		},
		handleSelectionChange(val) {
			console.log('val===', val)
			this.mulSelected = val
		},
    async onceCharge() {
      if (this.mulSelected.length == 0) {
        this.$notify.error({
          title: "错误",
          message: "请至少选择一条数据!"
        });
        return;
      }
      const loading = this.loading();
      let rtnmsg = await Api.post("/business/comsel/processFec", this.mulSelected);
      if (rtnmsg.respCode === SUCCESS) {
          this.$notify({
            title: '成功',
            message: '一键收费成功',
            type: 'success',
          });
          this.$nextTick(() => {
            this.$store.commit('delTagsArry', this.$route.path);
            this.$router.back()
          })
      }
      loading.close();
    }
  }
};
</script>

<style scoped lang="less">
::v-deep #business_container .eContainer .c-page-container-div .el-form {
	height: 100%!important;
	margin-bottom: 0!important;
}
.table-button-item-list {
  padding: 0;
  margin: 0;
}
.table-button-item-list li {
  list-style: none;
  padding: 5px 0;
  text-align: center;
  color: #606266;
  cursor: pointer;
}
// .footer-btn-wrap {
// 	width: 100%;
// 	height: 42px;
// 	display: flex;
// 	align-items: center;
// 	justify-content: center;
// }
</style>