tire-platform-ui/src/views/financialManagement/paymentRequest/paymentRequestDetails.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>
        <div class="upper_right_button">
          <el-button type="info"
                     :disabled="!checkDisabled"
                     class="el-button--small-yh"
                     @click.stop="paymentCheck">请核
          </el-button>
          <el-button type="warning"
                     class="el-button--small-yh"
                     :disabled="checkDisabled"
                     @click.stop="settlement">结算
          </el-button>
          <el-button type="primary"
                     class="el-button--small-yh"
                     :disabled="!checkDisabled"
                     @click.stop="confirmEdit">确认修改
          </el-button>
        </div>
      </div>
    </div>
    <div style="margin-top: 60px">
      <containerTitle title="基础信息"></containerTitle>
      <basic-container>
        <avue-form ref="form" v-model="form" :option="option">
          <template slot="corpId">
            <select-component
              v-model="form.corpId"
              :configuration="configuration"
            ></select-component>
          </template>
        </avue-form>
      </basic-container>
      <containerTitle title="明细列表"></containerTitle>
      <basic-container>
        <avue-crud :option="itemOption"
                   :data="dataList"
                   ref="crud"
                   v-model="itemForm"
                   :page.sync="page"
                   @search-reset="searchReset"
                   @selection-change="selectionChange"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange">
          <template slot-scope="scope" slot="menu">
            <el-button
              type="text"
              size="small"
              :disabled="!checkDisabled"
              @click.stop="rowCell(scope.row,scope.index)"
            >修改
            </el-button>
            <el-button
              type="text"
              size="small"
              @click.stop=""
            >删除
            </el-button>
          </template>
        </avue-crud>
      </basic-container>
    </div>
  </div>
</template>

<script>
  import itemOption from "./configuration/detailsPage.json";
  import { contrastObj,contrastList } from "@/util/contrastData";
  import { getDetails,modify,submit, paymentCheck } from "@/api/financialManagement/paymentRequest";

  export default {
    name: "paymentDetailsPage",
    props: {
      detailData: {
        type: Object
      }
    },
    data() {
      return {
        form:{},
        itemForm: {},
        itemOption: itemOption,
        checkDisabled:false,
        parentId:0,
        id:"",
        dataList: [],
        currencyDic:[],
        page: {
          pageSize: 10,
          pagerCount: 5,
          total: 0,
        },
        query:{},
        option: {
          menuBtn: false,
          labelWidth: 100,
          column: [
            {
              label: '系统号',
              prop: 'sysNo',
              span: 8,
              disabled: true
            },{
              label: '合同号',
              prop: 'srcOrderno',
              span: 8,
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '客户名称',
              prop: 'corpId',
              sort:true,
              span: 8,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '总金额',
              prop: 'amount',
              span: 8,
              rules: [
                {
                  pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '开户银行',
              prop: 'accountBank',
              span: 8,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '银行户头',
              prop: 'accountName',
              span: 8,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '银行账号',
              prop: 'accountNo',
              span: 8,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '制单人',
              prop: 'createUserName',
              span: 8,
              disabled:true,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '制单日期',
              prop: 'createTime',
              span: 8,
              type:"date",
              disabled:true,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '备注',
              prop: 'remark',
              span:24,
              row:2,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
          ],
        },
        //客户组件配置控制
        configuration:{
          multipleChoices:false,
          multiple:false,
          disabled:false,
          searchShow:true,
          collapseTags:false,
          placeholder:'请点击右边按钮选择',
          dicData:[]
        },
        oldForm:{},
        oldDataList:[],
      }
    },
    created() {
      //币别
      this.getWorkDicts("currency").then(res =>{
        this.currencyDic = res.data.data
      })
      if (this.detailData.id) {
        this.id = this.detailData.id;
        getDetails(this.id).then(res => {
          this.form = res.data.data;
          this.oldForm = Object.assign({},res.data.data);
          this.checkDisabled = res.data.data.checkStatus === "未请核"?true:false;
          if(res.data.data.itemsList){
            this.dataList = res.data.data.itemsList
            this.oldDataList = this.deepClone(res.data.data.itemsList)
          }
        })
      }
    },
    methods: {
      rowCell(row, index) {
        this.$refs.crud.rowCell(row, index)
      },
      //验证新旧数据
      verification(){
        let verification;
        if(contrastObj(this.form,this.oldForm) || contrastList(this.dataList,this.oldDataList)){
          this.$confirm("您已改动数据,是否先保存在进行操作!", {
            confirmButtonText: "保存",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.editPayment()
          }).catch(()=>{
            verification = false;  //取消改动数据
          })
        }else{
          verification = true;   //没有动过数据
        }
        return verification
      },
      //请核
      paymentCheck(){
        if(this.verification()){
          this.$confirm("您确定请核此次申请吗？", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(()=>{
            const params ={
              id : this.form.id,
              billType: this.form.billType
            }
            paymentCheck(params).then(res =>{
              if(res.data.success){
                this.$message.success("请核成功!");
                this.checkDisabled = res.data.data.checkStatus === "未请核"?true:false;
              }
            })
          })
        }
      },
      //结算
      settlement(){
        if(this.verification()){
          this.$confirm("您确定结算此次申请吗？", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(()=>{
            if(this.$store.getters.takeStatus){
              this.$alert("结算页面已存在,请关闭收货单再进行操作", "温馨提示", {
                confirmButtonText: "确定",
                type: 'warning',
                callback: action => {
                }
              });
            }else{
              //关闭一下存在的列表页  跳转
              this.$router.$avueRouter.closeTag('/payment_settle');
              this.$router.push({
                path: "/payment_settle",
                query: {params: this.form.id},
              });
            }
          })
        }
      },
      searchReset() {
        console.log('1')
      },
      selectionChange() {
        console.log('1')
      },
      currentChange() {
        console.log('1')
      },
      sizeChange() {
        console.log('1')
      },
      refreshChange() {
        console.log('1')
      },
      confirmEdit(status){
        this.$refs["form"].validate((valid) => {
          if(valid){
            const params = {
              ...this.form,
              billType:"申请",
              itemsList:this.dataList
            }
            submit(params).then(res =>{
              this.$message.success("操作成功!")
              this.form = res.data.data;
              this.oldForm = Object.assign({},res.data.data);
              if(res.data.data.itemsList){
                this.dataList = res.data.data.itemsList
                this.oldDataList = this.deepClone(res.data.data.itemsList)
              }
            })
            if(status === true){
              this.$emit("goBack");
            }
          }
        })
      },
      backToList() {
        if(contrastObj(this.form,this.oldForm) || contrastList(this.dataList,this.oldDataList)
        ){
          this.$confirm("是否保存当前页面？", "提示", {
            confirmButtonText: "保存",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.editCustomer(true)
          }).catch(()=>{
            this.$emit("goBack");
          })
        }else{
          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;
  }
  .upper_right_button{
    display: flex;
    position: fixed;
    right: 20px;
    top: 115px;
  }
</style>