Smart_platform_ui/src/views/workManagement/receipt/settleAccountsDetailsPage.vue

<template>
  <div class="borderless">
    <div class="receipt-head">
      <div class="receipt-back">
        <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
                   @click="backToList">返回列表
        </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:6" :key="index">
              <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
                <el-date-picker v-if="item.type === 'datetime'" :disabled="item.disabled?true:false" style="width: 100%;" v-model="form[item.prop]" size="small" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"/>
                <el-select v-else-if="item.prop === 'paymentType'" :disabled="item.disabled?true:false" style="width: 100%" v-model="form[item.prop]" size="small" placeholder="请选择" clearable filterable >
                  <el-option v-for="(item,index) in paymentTerm" :key="index" :label="item.dictValue" :value="item.dictValue"></el-option>
                </el-select>
                <selectComponent v-else-if="item.prop === 'corpId'" :disabled="item.disabled?true:false"  v-model="form[item.prop]" :configuration="configuration"/>
                <el-input type="textarea" v-else-if="(item.prop === 'remark'||item.prop === 'settlementRemark')"v-model="form[item.prop]" :disabled="item.disabled && item.prop === 'remark'?true:false"  size="small" autocomplete="off" placeholder="请输入"></el-input>
                <el-input type="age" v-else v-model="form[item.prop]" :disabled="item.disabled?true:false" size="small" autocomplete="off" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </basic-container>
      <containerTitle title="明细列表"></containerTitle>
      <basic-container>
        <avue-crud :option="option"
                   :data="dataList"
                   ref="crud"
                   v-model="form"
                   :page.sync="page"
                   :table-loading="loading"
                   @search-reset="searchReset"
                   @selection-change="selectionChange"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange">
          <template slot="menuLeft">
            <el-button
              icon="el-icon-printer"
              size="small"
              type="primary"
              @click.stop="openReport()"
            >报表
            </el-button>
          </template>
          <template slot-scope="scope" slot="menu">
            <el-button
              type="text"
              icon="el-icon-check"
              size="small"
              @click.stop="beforeCloseAccount(scope.row,scope.index)"
            >结 算
            </el-button>
            <el-button
              type="text"
              icon="el-icon-close"
              size="small"
              v-if="scope.row.status == 5"
              @click.stop="callAccount(scope.row,scope.index)"
            >取消结算
            </el-button>
          </template>
        </avue-crud>
      </basic-container>
      <containerTitle title="附件上传"></containerTitle>
      <basic-container style="margin-bottom: 40px">
        <avue-crud
          :option="upLoadOption"
          v-model="upLoadForm"
          :data="upLoadData"
          @row-save="upLoadSave"
          @row-update="upLoadUpdate"
          @row-del="upLoadDel"
        ></avue-crud>
      </basic-container>
    </div>
    <el-dialog
      title="结算"
      append-to-body
      class="el-dialogDeep"
      :visible.sync="accountDialog"
      width="25%"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :close-on-press-escape="false">
      <el-form v-model="accountFormData">
        <el-form-item label="账户名称:"  class="landConFrom-input" prop="accountName">
          <el-input v-model="accountFormData.accountName" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="开户银行:"  class="landConFrom-input" prop="accountBank">
          <el-input v-model="accountFormData.accountBank"  style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="银行账号:"  class="landConFrom-input" prop="accountNo">
          <el-input v-model="accountFormData.accountNo"  style="width: 200px;"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" style="display: flex; justify-content: center">
          <el-button @click.stop="accountDialog = false , accountFormData = {}" size="small">取 消</el-button>
          <el-button type="primary"  size="small" @click="closeAccount">结算</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import option from "./configuration/settleAccountsDetailsPage.json";
  import upLoadOption from "../../exportTrade/purchaseContract/config/uploadList.json";
  import { projectDetail,updateItemStatus } from "@/api/workManagement/mainProject";
  //业务字典
  import { getDictionary } from "@/api/system/dictbiz";

  export default {
    name: "customerInformation",
    data() {
      return {
        loading:false,
        accountDialog:false,
        aaccount:{},
        form: {},
        accountFormData:{
          accountName:'',
          accountBank:'',
          accountNo:'',
        },
        option: option,
        parentId:0,
        account:{},
        paymentTerm:[],
        page: {
          pageSize: 10,
          pagerCount: 5,
          total: 0,
        },
        configuration:{
          multipleChoices:false,
          multiple:false,
          disabled:true,
          searchShow:false,
          collapseTags:false,
          placeholder:'请点击右边按钮选择',
          dicData:[]
        },
        query:{},
        //顶部from数据
        basicData: {
          column: [
            {
              label: '系统编号',
              prop: 'sysNo',
              disabled: true,
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '项目编码',
              prop: 'code',
              disabled: true,
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '项目名称',
              prop: 'cname',
              disabled: true,
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '客户名称',
              prop: 'corpId',
              disabled: true,
            },{
              label: '合同金额',
              prop: 'debitAmount',
              disabled: true,
              rules: [
                {
                  pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '首付金额',
              prop: 'advanceAmount',
              disabled: true,
              rules: [
                {
                  pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '未收金额',
              prop: 'balanceAmount',
              disabled: true,
              rules: [
                {
                  pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '已收金额',
              prop: 'settlmentAmount',
              disabled: true,
              rules: [
                {
                  pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '责任人',
              prop: 'corpAttn',
              disabled: true
            }, {
              label: '承揽人',
              prop: 'salesName',
              disabled: true
            },
            {
              label: '制单人',
              prop: 'createUserName',
              disabled: true
            }, {
              label: '制单日期',
              prop: 'createTime',
              type: 'datetime',
              disabled: true
            },
            {
              label: '电话',
              prop: 'corpTel',
              disabled: true,
            },
            {
              label: '收款方式',
              prop: 'paymentType',
              type:'select',
              dataType: "number",
              width: 120,
              disabled: true,
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=affair_payment_term",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
            },
            {
              label: '开始日期',
              disabled: true,
              prop: 'beginTime',
              type:'datetime',
            },
            {
              label: '结束日期',
              disabled: true,
              prop: 'endTime',
              type:'datetime',
            },
            {
              label: '备注',
              span: 24,
              prop: 'remark',
              disabled: true,
            },
            {
              label: '结算备注',
              span: 24,
              prop: 'settlementRemark',
              disabled: true,
            },
          ],
        },
        //列表假数据
        dataList : [],
        //上传文件
        upLoadOption: upLoadOption,
        upLoadData:[],
        upLoadForm:{},
      }
    },
    created() {
      this.id = BigInt(this.$route.query.id);
      this.getProjectDetail();
      const params = {
        code : "affair_payment_term"
      }
      getDictionary(params).then(res =>{
        this.paymentTerm = res.data.data;
      })
    },
    mounted() {

    },
    methods: {
      getProjectDetail(){
        if(this.id){
          projectDetail(this.id,"4,5").then(res =>{
            this.form = res.data.data;
            if(res.data.data.itemList){
              this.loading = true;
              this.dataList = res.data.data.itemList;
              this.loading = false;
            }
          })
        }
      },
      //结算
      beforeCloseAccount(row){
        this.aaccount = row;
        this.accountDialog = true;
      },
      closeAccount(){
        this.$confirm("确认结算此明细?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          updateItemStatus(this.aaccount.id,5,
            this.accountFormData.accountName,
            this.accountFormData.accountBank,
            this.accountFormData.accountNo,).then(res =>{
            if(res.data.success){
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.accountFormData = {},
              this.accountDialog = false;
              this.getProjectDetail();
            }
          })
        });
      },
      //结算
      callAccount(row,index){
        this.$confirm("确认取消结算此明细?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          updateItemStatus(row.id,6).then(res =>{
            if(res.data.success){
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.getProjectDetail();
            }
          })
        });
      },
      //返回列表
      backToList(){
        this.$router.$avueRouter.closeTag();
        this.$router.push({
          path: '/workManagement/receipt/settleAccounts',
          query: {}
        });
      },
      searchReset() {
        console.log('1')
      },
      selectionChange() {
        console.log('1')
      },
      currentChange() {
        console.log('1')
      },
      sizeChange() {
        console.log('1')
      },
      refreshChange() {
        console.log('1')
      },
      //上传文件保存
      upLoadSave(row, done, loading){
        this.upLoadData.push(row)
        done()
      },
      //修改附件上传触发
      upLoadUpdate(row, done){
        done(row);
      },
      //删除附件上传触发
      upLoadDel(row, index,){
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          if (row.id){
            corpsbank(row.id).then(res=>{
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.bankOfDepositData.splice(index, 1);
            })
          }else {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.bankOfDepositData.splice(index, 1);
          }
        })
      },
    }
  }
</script>

<style scoped  lang="scss">
  .receipt-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;
  }
  .receipt-back {
    cursor: pointer;
    line-height: 62px;
    font-size: 16px;
    color: #323233;
    font-weight: 400;
  }
  ::v-deep .el-form-item {
    margin-bottom: 0;
  }
  .landConFrom-input{
    display:flex;
    justify-content:center;
  }
</style>