tire-platform-ui/src/views/financialManagement/paymentDetailsPage.vue

<template>
  <div class="borderless">
    <div class="main-head">
      <div class="main-back">
        <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
                   @click="backToList">返回列表
        </el-button>
        <el-button type="success"
                   class="el-button--small-yh add-customer-btn-two"
                   :disabled="true"
                   @click.stop="">复制新单
        </el-button>
        <el-button class="el-button--small-yh add-customer-btn" type="primary"
                   @click.stop="editFinance"
        >{{this.id?"确认修改" :"确认新增"}}
        </el-button>
      </div>
    </div>
    <div style="margin-top: 60px">
      <containerTitle title="基础信息"></containerTitle>
      <basic-container>
        <el-form :model="form" ref="form" label-width="130px">
          <el-row>
            <el-col v-for="(item, index) in basicData.column" :span="item.span?item.span:8" :key="index">
              <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
                <el-date-picker v-if="item.type === 'date'" style="width: 100%;" v-model="form[item.prop]" size="small" type="date" :disabled="item.disabled?true:false" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"/>
                <el-select v-else-if="item.type === 'select'" style="width: 100%" size="small" placeholder="请选择"  clearable filterable></el-select>
                <selectComponent v-else-if="item.prop === 'corpId'" v-model="form[item.prop]" :configuration="configuration"/>
                <el-select v-else-if="item.prop === 'currency'" style="width: 100%"   v-model="form[item.prop]" size="small" placeholder="请选择" clearable filterable>
                  <el-option v-for="(item,index) in currencyDic" :key="index" :label="item.dictValue" :value="item.dictValue"></el-option>
                </el-select>
                <el-select v-else-if="item.prop === 'financeStatus'" style="width: 100%"   v-model="form[item.prop]" size="small" placeholder="请选择" clearable filterable>
                  <el-option
                    v-for="item in financeStatusDic"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-input type="age" v-else-if="item.prop === 'exchangeRate'" v-model="form[item.prop]"   size="small" autocomplete="off" placeholder="请输入">
                  <template   slot="append">%</template>
                </el-input>
                <el-input type="textarea" v-else-if="(item.prop === 'remark')" v-model="form[item.prop]"   size="small" autocomplete="off" placeholder="请输入"></el-input>
                <el-input type="age" v-else v-model="form[item.prop]" size="small" :disabled="item.disabled?true:false" autocomplete="off" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </basic-container>
      <basic-container>
        <avue-crud :option="option"
                   :data="dataList"
                   ref="crud"
                   v-model="form"
                   :page.sync="page"
                   @search-reset="searchReset"
                   @selection-change="selectionChange"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange">
          <template slot="menuLeft">
            <el-button type="primary"
                       size="small"
                       icon="el-icon-shopping-cart-2"
                       @click="">选择采购合同
            </el-button>
            <el-button
              icon="el-icon-printer"
              size="small"
              type="primary"
              @click.stop="openReport()"
            >报 表
            </el-button>
          </template>
          <template slot="menuRight">
            <el-button type="info"
                       size="small"
                       @click="">请核
            </el-button>
          </template>
          <template slot-scope="scope" slot="menu">
            <el-button
              type="text"
              icon="el-icon-view"
              size="small"
              @click.stop=""
            >费用确认
            </el-button>
            <el-button
              type="text"
              icon="el-icon-edit"
              size="small"
              @click.stop=""
            >移除数据
            </el-button>
          </template>
        </avue-crud>
      </basic-container>
    </div>
  </div>
</template>

<script>
  import option from "./configuration/detailsPage.json";
  import { getDetail,editFinance } from "@/api/financialManagement/financialManagement"
  import {detailListData } from "@/api/importTrade/purchase";
  import {getSysNo} from "@/api/importTrade/purchase";
  import { getUserInfo } from "@/api/system/user";
  export default {
    name: "paymentDetailsPage",
    props: {
      detailData: {
        type: Object
      }
    },
    data() {
      return {
        form: {},
        option: option,
        parentId:0,
        id:"",
        dataList: [],
        currencyDic:[],
        page: {
          pageSize: 10,
          pagerCount: 5,
          total: 0,
        },
        query:{},
        //客户组件配置控制
        configuration:{
          multipleChoices:false,
          multiple:false,
          disabled:false,
          searchShow:true,
          collapseTags:false,
          placeholder:'请点击右边按钮选择',
          dicData:[]
        },
        financeStatusDic:[{
          label:'正常',
          value:0
        },{
          label:'停用',
          value:1
        }],
        //顶部from数据
        basicData: {
          column: [
            {
              label: '系统号',
              prop: 'sysNo',
              disabled:true,
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },{
              label: '合同号',
              prop: 'srcOrderno',
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '供应商',
              prop: 'corpId',
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '金额',
              prop: 'amount',
              rules: [
                {
                  pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '币别',
              prop: 'currency'
            },
            {
              label: '汇率',
              prop: 'exchangeRate',
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },{
              label: '银行名称',
              prop: 'accountBank',
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '银行户头',
              prop: 'accountName',
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '银行账号',
              prop: 'accountNo',
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '手续费',
              prop: 'serviceCharge',
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '要求付款日期',
              prop: 'orderNo',
              type:"date",
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '实际付款日期',
              prop: 'orderNo',
              type:"date",
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '单据状态',
              prop: 'financeStatus',
            }, {
              label: '制单人',
              prop: 'createUserName',
              disabled:true,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '制单日期',
              prop: 'createTime',
              type:"date",
              disabled:true,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '备注',
              prop: 'remark',
              span:24,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
          ],
        },
      }
    },
    created() {
      //币别
      this.getWorkDicts("currency").then(res =>{
        this.currencyDic = res.data.data
      })
      if (this.detailData.id) {
        this.id = BigInt(this.detailData.id);//字符串转数字  超长用BigInt
        getDetail(this.id).then(res => {
          this.form = res.data.data;
          this.configuration.dicData = res.data.data.customerModel;
          this.dataList = res.data.data.itemsList
        })
      }else{
        this.assignment()
      }

      if(this.detailData.params){
        detailListData(this.detailData.params.id).then(res =>{
          this.form.corpId =  res.data.data.corpId;
          this.form.srcOrderno =  res.data.data.orderNo;
          this.configuration.dicData = res.data.data.corpsName;
          res.data.data.itemsVOList.forEach((item,index) =>{
            this.detailData.params.orderItemIds.forEach((e,i) =>{
              if(e ==  index){
                const params ={
                  srcOrderno:res.data.data.orderNo,
                  amount:item.amount,
                  createUserName:item.createUserName,
                  createTime:item.createTime,
                }
                this.$refs.crud.rowCellAdd(params);
                this.$refs.crud.rowCell(params,this.dataList.length - 1)
              }
            })
          })
        })
        this.assignment()
      }
    },
    mounted() {
      option.height = window.innerHeight - 640 ;
    },
    methods: {
      assignment(){
        getSysNo("CW-FK").then(res =>{
          this.$set(this.form,"sysNo", res.data.data)
          let date = new Date();
          let strDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
          this.$set(this.form,"createTime",strDate)
        })
        getUserInfo().then(res =>{
          this.$set(this.form,"createUserName", res.data.data.name)
        })
      },
      searchReset() {
        console.log('1')
      },
      selectionChange() {
        console.log('1')
      },
      currentChange() {
        console.log('1')
      },
      sizeChange() {
        console.log('1')
      },
      refreshChange() {
        console.log('1')
      },
      editFinance(status){
        this.$refs["form"].validate((valid) => {
          if(valid){
            const params = {
              ...this.form,
              billType:"付费",
              itemsList:this.dataList
            }
            editFinance(params).then(res =>{
              if(res.data.success){
                this.$message.success("操作成功!")
              }
            })
            if(status === true){
              this.$emit("goBack");
            }
          }
        })
      },
      backToList(){
        this.$confirm("是否保存当前页面？", "提示", {
          confirmButtonText: "保存",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.editFinance(true)
        }).catch(() => {
          this.$emit("goBack");
        })
      }
    }
  }
</script>

<style scoped>
  ::v-deep .el-form-item {
    margin-bottom: 0;
  }
  .main-head {
    position: fixed;
    top: 105px;
    width: 100%;
    margin-left: -10px;
    height: 62px;
    background: #ffffff;
    box-shadow: 0 4px 12px 0px rgba(232, 232, 235, 1);
    z-index: 999;
  }
  .main-back {
    cursor: pointer;
    line-height: 62px;
    font-size: 16px;
    color: #323233;
    font-weight: 400;
  }
  .add-customer-btn-two {
    position: fixed;
    right: 150px;
    top: 115px;
  }
  .add-customer-btn {
    position: fixed;
    right: 36px;
    top: 115px;
  }
</style>