kd-aiot-frontend-eom/src/views/financialManage/invoiceManage/components/detailDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="detailDialogFlag"
    :title="title"
    :close-on-click-modal="false"
    append-to-body
    width="60%"
    :before-close="cancel"
    :maxable="true"
    :resizable="true"
  >
    <div class="switch_left">
      <ul>
        <li
          v-for="item in tabOptions"
          :key="item.key"
          :class="{ active: activeComp == item.key }"
          @click="activeComp = item.key"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div v-show="activeComp === 'main'">
      <el-form ref="form" :model="form" class="el-form-box" label-width="140px">
        <headerTitle title="基本信息"></headerTitle>
        <el-row :gutter="12">
          <el-col :span="8">
            <el-form-item label="发票类型" prop="type">
              <el-select v-model="form.type" disabled style="width: 100%">
                <el-option label="开票" value="1"></el-option>
                <el-option label="收票" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="来源类型" prop="sourceType">
              <el-select
                v-model="form.sourceType"
                :disabled="true"
                style="width: 100%"
              >
                <el-option v-for="(item, index) in sourceTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="form.sourceType == 1">
          <el-form-item label="对账单" prop="sourceCode">
            <el-input
              v-model="form.sourceCode"
              readonly
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="form.sourceType == 2">
          <el-form-item label="合同" prop="sourceCode">
            <el-input
              v-model="form.sourceCode"
              readonly
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="form.sourceType == 3">
          <el-form-item label="订单" prop="sourceCode">
            <el-input
              v-model="form.sourceCode"
              readonly
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="form.sourceType == 5">
          <el-form-item label="已收" prop="sourceCode">
            <el-input
              v-model="form.sourceCode"
              readonly
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="form.sourceType == 4">
          <el-form-item label="已付" prop="sourceCode">
            <el-input
              v-model="form.sourceCode"
              readonly
            ></el-input>
          </el-form-item>
        </el-col>
          <el-col :span="8">
            <el-form-item label="发票金额" prop="amount">
              <el-input
                disabled
                v-model="form.amount"
                :precision="2"
                type="number"
                :controls="false"
                style="width: 100%"
                :min="0"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发票号" prop="invoiceNos">
              <el-input
                v-model="form.invoiceNos"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开票日期">
              <el-date-picker
                disabled
                style="width: 100%"
                v-model="form.expectInvoiceDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请部门" prop="applyDeptId">
              <el-input v-model="form.applyDeptName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请人" prop="applyUserId">
              <el-input v-model="form.applyUserName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="会计科目" prop="accountingSubjectName">
              <el-input
                v-model="form.accountingSubjectName"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
          <el-form-item label="发票种类" prop="category">
              <el-select
                v-model="form.category"
                clearable
                disabled
                style="width: 100%"
              >
                <el-option label="增值税专用发票" :value="1"></el-option>
                <el-option label="增值税普通发票" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="files" label="发票附件">
              <fileMain v-model="form.files" type="view"></fileMain>
            </el-form-item>
          </el-col>
        </el-row>
        <headerTitle title="发票信息"></headerTitle>
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="购买方名称" prop="companyName">
              <el-input disabled v-model="form.companyName"></el-input>
            </el-form-item>
            <el-form-item
              label="统一社会信用代码"
              class="form_item_label"
              prop="companyUsc"
            >
              <el-input disabled v-model="form.companyUsc"></el-input>
            </el-form-item>
            <el-form-item label="开户银行" prop="companyBankBranchNo">
              <el-input disabled v-model="form.companyBankBranchNo"></el-input>
            </el-form-item>
            <el-form-item label="银行账户" prop="companyBankAccount">
              <el-input disabled v-model="form.companyBankAccount"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="companyAddress">
              <el-input disabled v-model="form.companyAddress"></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="companyContactName">
              <el-input v-model="form.companyContactName" disabled></el-input>
            </el-form-item>
            <el-form-item label="电话号码" prop="companyTel">
              <el-input disabled v-model="form.companyTel"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="销售方名称" prop="receiverName">
              <el-input disabled v-model="form.receiverName"></el-input>
            </el-form-item>
            <el-form-item
            label="统一社会信用代码"
            prop="salesCompanyUsc"
            class="form_item_label"
          >
            <el-input v-model="form.salesCompanyUsc" disabled></el-input>
          </el-form-item>
          <el-form-item label="开户银行" prop="salesCompanyBankBranchNo">
            <el-input v-model="form.salesCompanyBankBranchNo" disabled></el-input>
          </el-form-item>
          <el-form-item label="银行账户" prop="salesCompanyBankAccount">
            <el-input v-model="form.salesCompanyBankAccount" disabled></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="receiverAddress">
            <el-input v-model="form.receiverAddress" disabled></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="receiverContactName">
            <el-input v-model="form.receiverContactName" disabled></el-input>
          </el-form-item>
          <el-form-item label="电话号码" prop="receiverTel">
            <el-input v-model="form.receiverTel" disabled></el-input>
          </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div v-if="form.sourceType != 99" class="payinfo" style="margin-top: 20px;">
        <headerTitle title="来源清单"></headerTitle>
        <!-- <el-form ref="form" :model="tableForm"> -->
          <ele-pro-table
            ref="table"
            :needPage="false"
            :columns="columns"
            :datasource="form.relatedList"
            row-key="id"
            class="time-form"
          >
            <template v-slot:toolbar>
              <!-- <span>已开票金额：{{ totalInvoiceAmount }}</span> -->
            </template>
            <template v-slot:planPaymentAmount="scope">
              <el-form-item
                style="width: 100%;"
                label-width="0"
                :prop="'relatedList.' + scope.$index + '.planPaymentAmount'"
                :rules="[
                  {
                    required: false,
                    message: '请输入计划金额',
                    trigger: 'blur'
                  }
                ]"
              > 
                <span v-if="dialogType === 'view'">{{ scope.row.planPaymentAmount }}</span>
                <el-input v-else v-model="scope.row.planPaymentAmount" type="number" @input="updatePlanPaymentAmount(scope.row)"></el-input>
              </el-form-item>
            </template>
            <template v-slot:invoiceAmount="scope">
              <el-form-item
                style="width: 100%;"
                label-width="0"
                :prop="'relatedList.' + scope.$index + '.invoiceAmount'"
                :rules="[
                  {
                    required: false,
                    message: '请输入开票金额',
                    trigger: 'blur'
                  },
                  {
                    required: false,
                    validator: (rule, value, callback) => {
                      if (value === undefined || value === null || value === '') {
                        callback('请输入开票金额');
                      } else if (parseFloat(value) <= 0 || parseFloat(value) > parseFloat(scope.row.unInvoiceAmount)) {
                        callback('开票金额必须大于0且不超过未开票金额');  
                      } else {
                        callback();
                      }
                    },
                    trigger: 'blur'
                  }
                ]"
              > 
                <span v-if="dialogType === 'view'">{{ scope.row.invoiceAmount }}</span>
                <el-input v-else v-model="scope.row.invoiceAmount" type="number" @input="updateInvoiceAmount(scope.row)"></el-input>
              </el-form-item>
            </template>
          </ele-pro-table>
        <!-- </el-form> -->
      </div>
      <div style="margin-top: 20px;">
        <headerTitle title="关联物品清单信息"></headerTitle>
        <table-info-new
          v-if="form.sourceType != 99"
          dialogType="view"
          ref="tableInfoNewRef"
        ></table-info-new>
        <table-info
          v-else
          dialogType="view"
          ref="tableInfoNoOrderRef"
        ></table-info>
      </div>
    </div>
    <bpmDetail
      v-if="activeComp === 'bpm' && form.processInstanceId"
      :id="form.processInstanceId"
    ></bpmDetail>
    <div slot="footer" class="footer">
      <el-button @click="cancel">返回</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import { getFile } from '@/api/system/file';
  import dictMixins from '@/mixins/dictMixins';
  import bpmDetail from '@/views/bpm/processInstance/detail.vue';
  import personSelect from '@/components/CommomSelect/person-select.vue';
  import tableInfo from '@/views/financialManage/invoiceManage/components/tableInfo.vue';
  import { invoiceApplyInfoV2API } from '@/api/financialManage/invoiceManage';
  import { paymentTypeOp } from '@/enum/dict';
  import tableInfoNew from './tableInfoNew.vue';
  // import fileMain from '@/components/addDoc/index.vue';
  export default {
    mixins: [dictMixins],
    props: ['detailDialogFlag'],
    components: {
      tableInfo,
      personSelect,
      bpmDetail,
      tableInfoNew
      // fileMain
    },
    computed: {
      columns() {
        return [
          {
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            fixed: 'left'
          },
          {
            minWidth: 150,
            prop: 'sourceCode',
            label: '来源编码',
            align: 'center'
          },
          // {
          //   width: 150,
          //   prop: 'relatedOrderNo',
          //   label: '来源编号',
          //   align: 'center'
          // },
          {
            minWidth: 120,
            prop: 'sourceType',
            label: '来源类型',
            align: 'center',
            formatter: (row) => {
              return this.sourceTypeList.find(item => item.value == row.sourceType)?.label || ''
            }
          },
          // {
          //   width: 170,
          //   prop: 'planPaymentAmount',
          //   label: this.form.type == 1 ? '计划收款金额' : '计划付款金额',
          //   align: 'center',
          //   slot: 'planPaymentAmount'
          // },
          {
            minWidth: 150,
            prop: 'unInvoiceAmount',
            label: '未开票金额',
            align: 'center'
          },
          {
            minWidth: 150,
            prop: 'invoicedAmount',
            label: '已开票金额',
            align: 'center'
          },
          {
            minWidth: 160,
            prop: 'invoiceAmount',
            label: '本次开票金额',
            align: 'center',
            // slot: 'invoiceAmount',
            fixed: 'right'
          }
        ];
      },
    },
    data() {
      return {
        paymentTypeOp,
        fullscreen: false,
        activeComp: 'main',
        tabOptions: [
          { key: 'main', name: '申请详情' },
          { key: 'bpm', name: '流程详情' }
        ],
        title: '详情',
        dialogType: '',
        form: {
          files: []
        },
        sourceTypeList: [
          {
            label: '对账单',
            value: 1
          },
          {
            label: '合同',
            value: 2
          },
          {
            label: '订单',
            value: 3
          },
          {
            label: '已付',
            value: 4
          },
          {
            label: '已收',
            value: 5
          },
          {
            label: '其他无订单无合同',
            value: 99
          }
        ],
      };
    },
    methods: {
      //初始化
      async init(row = {}, type) {
        this.title = '详情';
        this.dialogType = type;
        await this.getInfo(row.id);
      },
      //获取详情
      async getInfo(id) {
        this.form = await invoiceApplyInfoV2API(id);
        this.form.relatedList = [this.form.relatedVO];
        // this.$refs.tableInfoRef.setValue(this.form);
        this.$nextTick(() => {
          // this.$refs.tableInfoNewRef && this.$refs.tableInfoNewRef.putValue(this.form);
          if (this.form.sourceType == 99) {
            this.$refs.tableInfoNoOrderRef?.setValue(this.form);
          } else {
            this.$refs.tableInfoNewRef?.putValue(this.form);
          }
        })
      },
      downloadFile(file) {
        getFile({ objectName: file.storePath }, file.name);
      },
      cancel() {
        this.$emit('update:detailDialogFlag', false);
      }
    }
  };
</script>

<style scoped lang="scss">
  .headbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .amount {
      font-size: 14px;
      font-weight: bold;
      margin-right: 20px;
    }
  }
</style>