Smart_platform_ui/src/views/tirePartsMall/financialManagement/paymentSettlement/detailsPage.vue

<template>
  <div>
    <div class="customer-head">
      <div class="customer-back">
        <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
          @click="backToList(0)">返回列表
        </el-button>
      </div>
      <div class="add-customer-btn">
        <el-button class="el-button&#45;&#45;small-yh" style="margin-right: 10px" type="primary" size="small"
          v-if="!editButton" @click="confirmEditing">编辑
        </el-button>
        <el-button class="el-button--small-yh" type="primary" :disabled="isSaveBtn" size="small"
          @click="editCustomer">保存数据
        </el-button>
        <el-button class="el-button--small-yh" type="warning" size="small" :disabled="isFinanceBtn" @click="collection">{{
          form.financeStatus ==
          '已付款' ? '撤销付款' : '付款' }}
        </el-button>
        <!-- <el-button class="el-button--small-yh" type="primary" size="small" v-if="form.id">启用
        </el-button> -->
      </div>
    </div>
    <div style="margin-top: 50px">
      <trade-card title="基础信息">
        <avue-form :option="optionForm" v-model="form" ref="form"></avue-form>
      </trade-card>
      <trade-card title="明细信息">
        <avue-crud :option="optionContacts" v-model="formContacts" ref="formContacts" :data="form.settlementItemsList"
          @row-save="rowSave" @row-update="rowUpdate"
          @resetColumn="resetColumnTwo('formContacts', 'optionContacts', 'optionContactsBack', 266.1)"
          @saveColumn="saveColumnTwo('formContacts', 'optionContacts', 'optionContactsBack', 266.1)">
          <template slot-scope="scope" slot="menuLeft">
            <el-button type="primary" icon="el-icon-plus" :disabled="form.financeStatus == '已付款' || isMenu" size="small"
              @click="rowAdd()">选择订单</el-button>
          </template>
          <template slot-scope="{ row, index }" slot="contractNumber">
            <span style="color: #409EFF;cursor: pointer" @click.stop="payBtn(row)">{{ row.contractNumber }}
            </span>
          </template>
          <template slot-scope="{type,size,row,index,disabled}" slot="menu">
            <el-button :size="size" :type="type" :disabled="form.financeStatus == '已付款' || isMenu"
              :icon="row.$cellEdit ? 'el-icon-plus' : 'el-icon-edit'" @click="$refs.formContacts.rowCell(row, index)">{{
                row.$cellEdit ? '确认' : '修改' }}
            </el-button>
            <el-button icon="el-icon-delete" :size="size" :disabled="form.financeStatus == '已付款' || isMenu" :type="type"
              @click="rowDelBox(row, index)">删除
            </el-button>
          </template>
        </avue-crud>
      </trade-card>

        <containerTitle title="上传附件"></containerTitle>
        <c-upload v-loading="loadingBtn" typeUpload="LT"
                  deleteUrl="/api/trade-purchase/woodHarvestingCloud/removeByFileId" :data="filesList" display
                  :enumerationValue="35.1"></c-upload>

    </div>
    <el-dialog title="导入订单" append-to-body class="el-dialogDeep" :visible.sync="billDetailDialog" width="80%"
      :close-on-click-modal="false" :destroy-on-close="true" :close-on-press-escape="false" top="10vh" v-dialog-drag>
      <bill-detail ref="billDetailRef" :params="params" :billType="billType" :flag="1" @closeFun="closeBillDetail"
        @importProMent="importProMent">
      </bill-detail>
    </el-dialog>
  </div>
</template>

<script>
import billDetail from "@/components/bill/selectOrderDetailListCG";
import { saveSubmit, collectionAndPayment, revokeCollectionAndPayment, detail, removeItems, getFinanceList, remove } from '@/api/accountingManagement/index.js';
import { number } from "echarts";

export default {
  name: "detailsPage",
  components: {
    billDetail
  },
  data() {
    return {
        // 上传附件的需要参数
        loadingBtn:false,
        filesList:[],
        params:{},
      // 经办人list
      financeList: [],
      billDetailDialog: false,
      isSave: 0,
      isMenu: false,
      isSaveBtn: false,
      isFinanceBtn: false,
      editButton: false,
      disabled: false,
      form: {
        settlementItemsList: []
      },
      optionForm: {
        menuBtn: false,
        span: 8,
        column: [{
          label: '供应商',
          prop: "corpId",
          type: "select",
          props: {
            label: 'cname',
            value: 'id'
          },
          dicUrl: '/api/blade-sales-part/corpsDesc/listAll?cname={{key}}&corpType=GYS&enableOrNot=1',
          rules: [{
            required: true,
            message: " ",
            trigger: "blur"
          }]
        }, {
          label: '付款账户',
          prop: "accountName",
          props: {
            label: 'cname',
            value: 'cname'
          },
          type: "select",
          dicUrl: '/api/blade-sales-part/accountManagement/list?enableOrNot=1&cname={{key}}&billType=HYCK',
          dicFormatter: (res => {
            return res.data.records
          }),
          change: (data => {
            console.log(data);
            console.log(this.$refs.form.DIC);
            const targetObject = this.$refs.form.DIC.accountName.find(obj => obj.cname == data.value);
            this.form.accountId = targetObject.id
          }),
          rules: [{
            required: true,
            message: " ",
            trigger: "blur"
          }]
        }, {
          label: '金额',
          prop: "amount",
          disabled: true,
          rules: [{
            required: true,
            message: " ",
            trigger: "blur"
          }]
        }, {
          label: "经办人",
          prop: "handledByName",
          type: "select",
          props: {
            label: "name",
            value: "name"
          },
          dicUrl: "/api/blade-user/financeList",
          rules: [{
            required: true,
            message: " ",
            trigger: "blur"
          }],
        }, {
          label: '付款日期',
          prop: "settlementDate",
          type: "date",
          overHidden: true,
          width: 100,
          searchRange: true,
          searchDefaultTime: ["00:00:00", "23:59:59"],
          format: "yyyy-MM-dd",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
          value: '',
            rules: [{
                required: true,
                message: " ",
                trigger: "blur"
            }]
        }, {
          label: '单据编号',
          prop: "sysNo",
          disabled: true
        }, {
          label: '备注',
          prop: "remarks",
          type: 'textarea',
          span: 24,
          minRows: 2
        }]
      },
      formContacts: {},
      optionContacts: {},
      optionContactsBack: {
        align: 'center',
        index: true,
        addBtnText: "录入明细",
        refreshBtn: false,
        dialogDrag: true,
        addBtn: false,
        span: 8,
        height: 600,
        addRowBtn: false,
        editBtn: false,
        delBtn: false,
        menuWidth: 140,
        dialogTop: 25,
        dialogWidth: "80%",
        column: [
          //   {
          //   label: '单据编号',
          //   prop: 'attn',
          //   cell: true
          // },
          {
            label: '合同号',
            prop: 'contractNumber',
            cell: false
          }, {
            label: '应付金额',
            prop: 'accountsAmount',
            cell: false
          }, {
            label: '结算金额',
            prop: 'settlmentAmount',
            cell: false
          }, {
            label: '本次金额',
            prop: 'thisAmount',
            cell: true
          }, {
            label: '业务日期',
            prop: "businesDate",
            disabled: false,
            type: "datetime",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            rules: [
              {
                required: true,
                message: "",
                trigger: "blur"
              }
            ]
          }, {
            label: '备注',
            prop: 'remarks',
            cell: true
          }]
      }
    }
  },
  props: {
    onLoad: Object,
    detailData: Object
  },
  async created() {
      //  获取今天的日期
      var today = new Date();
      var year = today.getFullYear();
      var month = String(today.getMonth() + 1).padStart(2, '0');
      var day = String(today.getDate()).padStart(2, '0');
      var hours = String(today.getHours()).padStart(2, '0');
      var minutes = String(today.getMinutes()).padStart(2, '0');
      var seconds = String(today.getSeconds()).padStart(2, '0');

      // 查询经办人
      getFinanceList().then(res => {
        this.financeList = res.data.data
        const logInUser = JSON.parse(localStorage.getItem('saber-userInfo'));
        if (logInUser.content.role_name.includes('财务')) {
          for (let finance of res.data.data) {
            if (finance.name === logInUser.content.nick_name) {
              console.log(finance.name)
              this.form.handledByName = finance.name;
              break;
            }
          }
        }
      })

      // 构建今天的日期时间字符串
      var todayDateTime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
      if (this.onLoad.id) {
          this.refresh(this.onLoad.id)
          this.$set(this.optionForm, 'disabled', true)
          this.$set(this.optionContactsBack, 'disabled', true)
          this.isSaveBtn = true
          this.isFinanceBtn = true
          this.isMenu = true
      } else {
          this.findObject(this.optionForm.column, 'settlementDate').value = todayDateTime
          this.editButton = true
      }

    this.optionContacts = await this.getColumnData(this.getColumnName(266.1), this.optionContactsBack);
    // let thisAmountSum = 0
    this.findObject(this.optionContacts.column, "thisAmount").change = ({ value, column }) => {
      let thisAmountSum = 0
      for (let item of this.form.settlementItemsList) {
        thisAmountSum += item.thisAmount;
      }
      this.form.amount = Number(thisAmountSum)
    }
    console.log(this.onLoad.id);

  },
  methods: {
    rowDelBox(row, index) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if (row.id) {
          console.log(this.form);
          removeItems({ ids: row.id }).then(res => {
            this.form.settlementItemsList.splice(index, 1);
            this.$message.success("操作成功!");
          });
        } else {
          this.form.settlementItemsList.splice(index, 1);
          this.$message.success("操作成功!");
        }
      }
      )
        ;
    },
    refresh(id, type) {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(255,255,255,0.7)'
      })
      detail({ id: id }).then(res => {
        this.form = res.data.data
          this.filesList = res.data.data.filesList
        loading.close();
      }).catch(() => {
        loading.close();
      })
    },
    rowAdd() {
      if (!this.form.corpId) {
        this.$message.warning("请先选择客户!")
        return
      }
        console.log(this.form,329)
      this.params = {
        customerId: this.form.corpId,
        status: '待确认',
        bsType: 'CG,TKCG',
        actualPaymentStatus: '2'
      }
        this.billDetailDialog = true;

      // 调用一次弹窗的方法，防止不刷新数据
        let page = {
            pageSize: 20,
            pagerCount: 1,
            total: 0,
            pageSizes: [20, 200, 300, 500, 700, 1000]
        }
        this.$refs.billDetailRef.onLoad(page,this.params)


    },
    confirmEditing() {
      this.editButton = true
      if (this.form.financeStatus == '已付款') {
        this.$set(this.optionForm, 'disabled', true)
        this.$set(this.optionContactsBack, 'disabled', true)
        this.isFinanceBtn = false
      } else {
        this.$set(this.optionForm, 'disabled', false)
        this.$set(this.optionContactsBack, 'disabled', false)
        this.isFinanceBtn = false
        this.isSaveBtn = false
        this.isMenu = false
      }
    },
    //关闭
    closeBillDetail() {
      this.billDetailDialog = false;
    },
    //保存数据
    editCustomer() {
      this.$refs["form"].validate((valid, done) => {
        done()
        if (valid) {
          let data = {
            ...this.form,
            dc: 'c',
            billType: 'FK',
            corpName: this.form.$corpId,
              filesList:this.filesList
          }
          const loading = this.$loading({
            lock: true,
            text: '加载中',
            spinner: 'el-icon-loading',
            background: 'rgba(255,255,255,0.7)'
          });
          for (let finance of this.financeList) {
            if (finance.name == data.handledByName) {
              data.handledById = finance.id
              break;
            }
          }
          saveSubmit(data).then(res => {
            console.log(res);
            this.refresh(res.data.data.id)
            this.$message.success('保存成功')
            loading.close();
          }).catch(() => {
            loading.close()
          })
        }
      })
    },
    //导入
    importProMent(list) {
      console.log(list);
      // return
      // for (let item of this.dataList){
      //   for (let li of list){
      //     if (item.srcSysno == li.srcSysno && item.srcRefno == li.srcRefno && new Date(item.rentEndDate) == new Date(li.rentEndDate)){
      //       return this.$message.error(`合同号${item.accSysNo}已存在`)
      //     }
      //   }
      // }
      list.forEach((item, index) => {
        item.contractNumber = item.ordNo;
        item.accountsAmount = item.totalMoney
        item.settlmentAmount = item.paymentAmountTl
        item.thisAmount = (Number(item.totalMoney) - Number(item.paymentAmountTl))
        item.srcParentId = item.id
        item.srcBillNo = item.ordNo
        item.salesCompanyId = item.salesCompanyId
        item.salesCompanyName = item.salesCompanyName
        item.id = null
        delete item.ordNo;
        this.$refs.formContacts.rowCellAdd(item);
      })
      //明细列表所有合同号 去重 加， 为主表合同号
      // this.$set(this.form,'srcOrderno',Array.from(new Set(this.dataList.map(item =>{ return item.srcOrderno}))).join(','))

      this.billDetailDialog = false;
    },
    //收款
    collection() {
      this.$refs["form"].validate((valid, done) => {
        done()
        if (valid) {
          if (this.form.financeStatus !== '已付款') {
            console.log('this.form.financeStatus', this.form.financeStatus);
            this.$confirm("确认付款?", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              const loading = this.$loading({
                lock: true,
                text: '加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(255,255,255,0.7)'
              });
              let data = {
                ...this.form,
                dc: 'c',
                billType: 'FK'
              }
              saveSubmit(data).then(res => {
                collectionAndPayment(data)
                  .then((res) => {
                    console.log(res);
                    this.refresh(res.data.data.id);
                    this.$set(this.optionForm, 'disabled', true)
                    this.$set(this.optionContactsBack, 'disabled', true)
                    this.$message.success('付款成功');
                    loading.close();
                  })
                  .catch((error) => {
                    console.error(error);
                    loading.close();
                  });
              }).catch(() => {
                loading.close()
              })
            })
          } else {
            this.$confirm("确认撤销付款?", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              const loading = this.$loading({
                lock: true,
                text: '加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(255,255,255,0.7)'
              });
              let data = {
                ...this.form,
                dc: 'c',
                billType: 'FK',
                corpName: this.form.$corpId
              }
              revokeCollectionAndPayment(data).then((res => {
                this.refresh(res.data.data.id)
                this.editButton = false
                this.$message.success('撤销付款成功')
                loading.close()
              }))
            })
          }
        }
      })
    },
    payBtn(row) {
      console.log(row);
      this.$router.$avueRouter.closeTag('/tirePartsMall/salesManagement/purchaseOrder/index');
      this.$router.push({
        path: "/tirePartsMall/salesManagement/purchaseOrder/index",
        query: { detail: row, type: 'F' },
      });
    },
    rowSave(form, done, loading) {
      done(form)
    },
    rowUpdate(form, index, done, loading) {
      done(form)
    },
    //自定义列保存
    async saveColumnTwo(ref, option, optionBack, code) {
      /**
       * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
       * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
       * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
       */
      const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs[ref].$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列重置
    async resetColumnTwo(ref, option, optionBack, code) {
      this[option] = this[optionBack];
      const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs[ref].$refs.dialogColumn.columnBox = false;
      }
    },
    backToList(type) {
      this.$emit("backToList", type);
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-bottom: 8px !important;
}
</style>