Smart_platform_ui/src/components/finance/financialAccount.vue

<template>
  <div>
    <basic-container>
      <avue-crud
        ref="crud"
        :data="data"
        :option="option"
        :table-loading="loading"
        @row-update="rowUpdate"
        @row-del="rowDel"
        @saveColumn="saveColumn"
        @resetColumn="resetColumn"
      >
        <template slot="menuLeft" slot-scope="{size}">
          <el-button type="primary"
                     icon="el-icon-plus"
                     size="small"
                     :loading="submitButton"
                     @click="entering"
          >录入
          </el-button>
        </template>
        <template slot-scope="{row,index}" slot="menu">
          <!--        <el-button-->
          <!--          type="text"-->
          <!--          size="small"-->
          <!--          icon="el-icon-edit"-->
          <!--          @click="rowCell(row,index)"-->
          <!--        >{{ row.$cellEdit ? '修改完成' : '修改' }}-->
          <!--        </el-button>-->
          <el-button
            type="text"
            icon="el-icon-delete"
            size="small"
            @click="rowDel(row,index)"
          >删除
          </el-button>
        </template>
        <template slot-scope="{row,index}" slot="corpId">
          <span v-if="row.$cellEdit" class="required_fields" style="float: left;line-height: 32px">*</span>
          <crop-select
            v-if="row.$cellEdit"
            v-model="corpId"
            corpType="KG"
            style="width: 100%"
          ></crop-select>
        </template>
        <template slot-scope="{row,index}" slot="belongToCorpId">
          <crop-select
            v-if="row.$cellEdit"
            v-model="row.belongToCorpId"
            corpType="GS"
            style="width: 100%"
          ></crop-select>
          <span v-else>{{ row.costType }}</span>
        </template>
        <template slot-scope="{row,index}" slot="costType">
          <span v-if="row.$cellEdit" class="required_fields">*</span>
          <breakdown-select
            v-if="row.$cellEdit"
            v-model="row.costType"
            style="width: 90%"
            :configuration="configuration">
          </breakdown-select>
          <span v-else>{{ row.costType }}</span>
        </template>
        <template slot-scope="{row,index}" slot="billNo">
          <el-select placeholder="请选择"
                     v-if="row.$cellEdit"
                     v-model="row.billNo"
                     size="small"
                     filterable
                     allow-create
                     default-first-option
                     clearable>
            <el-option
              v-for="item in row.billNoList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <span v-else>{{ row.billNo }}</span>
        </template>
        <template slot-scope="{row,index}" slot="taxRate">
          <el-input
            v-model="row.taxRate"
            v-if="row.$cellEdit"
            size="small"
            oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d\d\d\d\d).*$/, "$1.$2")'
            autocomplete="off"
          >
            <i slot="suffix" style="margin-right: 10px;top:6px">%</i>
          </el-input>
          <span v-else>{{ row.taxRate }}</span>
        </template>
        <template slot-scope="{row,index}" slot="currency">
          <span v-if="row.$cellEdit" class="required_fields">*</span>
          <el-select v-if="row.$cellEdit" v-model="row.currency" size="small" placeholder="请选择" style="width: 90%" @change="currencyChange(row)" clearable filterable>
            <el-option v-for="(item,index) in currencyDic" :key="index" :label="item.dictValue"  :value="item.dictValue"></el-option>
          </el-select>
          <span v-else>{{ row.currency }}</span>
        </template>
        <template slot-scope="{row,index}" slot="unit">
          <span v-if="row.$cellEdit" class="required_fields">*</span>
          <el-select  v-if="row.$cellEdit" v-model="row.unit" size="small" style="width: 90%" placeholder="请选择" clearable filterable>
            <el-option v-for="(item,index) in unitDic" :key="index" :label="item.dictValue"  :value="item.dictValue"></el-option>
          </el-select>
          <span v-else>{{ row.unit }}</span>
        </template>
      </avue-crud>
      <div class="dialogButton">
        <el-button size="small" :loading="submitButton" @click="$emit('choceFun')">取消</el-button>
        <el-button type="primary" size="small" :loading="submitButton" @click="submit()">确定</el-button>
      </div>
    </basic-container>
    <containerTitle title="历史账单"></containerTitle>
    <basic-container>
      <avue-crud :option="historyOption"
                 :data="historyDataList"
                 ref="historyCrud"
                 v-model="historyForm"
                 :page.sync="page"
                 :table-loading="historyLoading"
                 @on-load="onLoad">
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
  import {applyLoan, paymentApply} from "@/api/financialManagement/paymentRequest";
  import option from "./config/option.json"
  import historyOption from "../bill/config/application.json"
  import {getUserInfo} from "@/api/system/user";
  import { getBillList } from "@/api/financialManagement/paymentRequest";

  export default {
    name: "financialAccount",
    props: {
      billId:{
        type:String
      },
      billType: {
        type: String
      },
      srcType: {
        type: Number,
        default: 1,
      },
      billData: {
        type: Object
      },
      choceFun: {
        type: Function
      },
      arrList: {
        type: Array,
        default: []
      },
      checkData: {
        type: Object,
        default: {
          url: null,
          pageStatus: null,
          pageLabel: null,
          checkType: null
        },
      },
    },
    data(){
      return {
        data: [],
        corpId:'',
        option:option,
        loading:false,
        submitButton:false,
        currencyDic:[],
        unitDic:[],
        configuration: {
          multipleChoices: false,
          multiple: false,
          disabled: true,
          searchShow: true,
          collapseTags: false,
          placeholder: '请点击右边按钮选择',
          dicData: []
        },
        category: '',

        historyLoading:false,
        historyOption:historyOption,
        historyDataList:[],
        historyForm:{},
        page: {
          pageSize: 10,
          pagerCount: 1,
          total: 0,
        },
      }
    },
    created() {
      this.historyOption.searchShow = false

      getUserInfo().then(res=>{
        this.category = res.data.data.billType
        if (this.category == 2) {
        }
      })
      //币别
      this.getWorkDicts("currency").then(res => {
        this.currencyDic = res.data.data
      })
      this.getWorkDicts("unit").then(res => {
        this.unitDic = res.data.data
      })
    },
    mounted() {
      this.init()
    },
    watch:{
      billId(val, oldVal) {
        if(val != oldVal){
          this.onLoad(this.page)
        }
      },
    },
    methods:{
      init(){
        if(this.arrList.length === 0){
          this.corpId = this.billData.corpId
          this.$refs.crud.rowCellAdd(this.billData);
        }else{
          this.billData = this.arrList[0]
          this.corpId = this.arrList[0].corpId
          this.arrList.forEach(item=>{
            this.$refs.crud.rowCellAdd(item);
          })
        }

        //删除 提单号
        if(this.billData.optionType !== "JK"){
          this.option.column.forEach(item =>{
            if(item.prop === "billNo"){
              item.hide = true
            }else{
              item.hide = false
            }
          })
        }
      },
      currencyChange(row){
        this.currencyDic.forEach(item =>{
          if(item.dictValue === row.currency){
            row.exchangeRate = item.remark
          }
        })
      },
      rowCell(row,index){
        this.$refs.crud.rowCell(row, index)
      },
      rowDel(row,index){
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
            this.data.splice(index, 1);
         })
      },
      rowUpdate(row, index, done, loading) {
        done(row);
      },
      entering(){
        if(this.data.length !== 0){
          //取第一条数据的 合同号 以及客户
          let params = {
            ...this.billData,
            srcOrderno:this.data[0].srcOrderno,
            corpId:this.data[0].corpId
          }
          this.$refs.crud.rowCellAdd(params);
        }else{
          this.$refs.crud.rowCellAdd(this.billData);
        }
      },
      onLoad(page,params = {}) {
        this.historyLoading = true;
        params.srcParentId = this.billId
        params.flag = 1

        getBillList(page.currentPage, page.pageSize,params).then(res=>{
          this.historyDataList = res.data.data.records
        }).finally(()=>{
          this.historyLoading = false;
        })
      },
      submit(){
        for(let i = 0;i<this.data.length;i++){
          if (this.corpId === (null || "")) {
            return this.$message.error(`请输入第${i + 1}行的客户`);
          }
          if (this.data[i].costType === (null || "")) {
            return this.$message.error(`请输入第${i + 1}行的费用名称`);
          }
          if (this.data[i].accDate === (null || "")) {
            return this.$message.error(`请输入第${i + 1}行的合同日期`);
          }
          if (this.data[i].amount === (null || "")) {
            return this.$message.error(`请输入第${i + 1}行的金额`);
          }
          if (this.data[i].currency === (null || "")) {
            return this.$message.error(`请输入第${i + 1}行的币别`);
          }
          if (this.data[i].exchangeRate === (null || "")) {
            return this.$message.error(`请输入第${i + 1}行的汇率`);
          }
          if (this.data[i].taxRate === (null || "")) {
            return this.$message.error(`请输入第${i + 1}行的税率`);
          }
        }

        this.submitButton = true
        const itemsList = this.data.map(item => {
          item.corpId = this.corpId;
          item.tradeType = this.billData.optionType?this.billData.optionType: item.tradeType
          item.srcType = this.srcType
          return item
        })
        const params = {
          url: this.checkData.url,
          pageStatus: this.checkData.pageStatus,
          pageLabel: this.checkData.pageLabel,
          checkType: this.checkData.checkType,
          billType : this.billType,
          DC : this.billData.itemType === "采购"?"C":"D",     //账单明细会根据D C区分采购 销售搜索
          itemsList: itemsList
        }
        // 采购申请货款   销售申请退款 都会走申请 走审核   => 付款申请
        if(this.billType === "申请"){
          applyLoan(params).then(res =>{
            if(res.data.success){
              this.$message.success("操作成功!")
              this.$emit("choceFun");
              //跳转付款申请页面

              // if(this.$store.getters.pqStatus){
              //   this.$alert("无法自动跳,因为付费申请页面已存在!", "温馨提示", {
              //     confirmButtonText: "确定",
              //     type: 'warning',
              //     callback: action => {
              //     }
              //   });
              // }else{
              //   //关闭一下存在的列表页  跳转
              //   this.$router.$avueRouter.closeTag('/financialManagement/paymentRequest/index');
              //   this.$router.push({
              //     path: "/financialManagement/paymentRequest/index",
              //     query: {params: res.data.data.id},
              //   });
              // }
            }
          }).finally(()=>{
            this.submitButton = false
          })
        }
        //采购退款结算 销售收款结算  不需申请请核 直接结算  => 结算
        if(this.billType === "收费"){
          paymentApply(params).then(res=>{
            if(res.data.success){
              this.$message.success("操作成功!")
              this.$emit("choceFun");
            }
          }).finally(()=>{
            this.submitButton = false
          })
        }
      },
      saveColumn(){

      },
      resetColumn(){

      },
    }
  }
</script>

<style scoped lang="scss">
  .required_fields{
    color: #F56C6C;
    display:inline-block;
    width: 7%
  }
</style>