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-if="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 label="对账单" :value="1"></el-option>
                <el-option label="合同" :value="2"></el-option>
                <el-option label="订单" :value="3"></el-option>
                <el-option label="应收" :value="5"></el-option>
                <el-option label="应付" :value="4"></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" :disabled="true"></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" :disabled="true"></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" :disabled="true"></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" :disabled="true"></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" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="金额" prop="amount">
              <el-input-number
                disabled
                v-model="form.amount"
                :precision="2"
                :controls="false"
                style="width: 100%"
                :min="0"
              ></el-input-number>
            </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="预计开票日期">
              <el-date-picker
                style="width: 100%"
                v-model="form.expectInvoiceDate"
                type="date"
                disabled
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </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-radio disabled v-model="form.category" :label="2"
                >增值税普通发票</el-radio
              >
              <el-radio disabled v-model="form.category" :label="1"
                >增值税专用发票</el-radio
              >
            </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="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="receiverTel">
            <el-input v-model="form.receiverTel" disabled></el-input>
          </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <headerTitle title="关联信息"></headerTitle>
      <table-info
        v-if="dialogType != 'add' && form.detailList.length"
        dialogType="view"
        :form="form"
        :invoiceAmount="form.invoiceAmount"
        ref="table"
      ></table-info>
    </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 { invoiceApplyInfoAPI } from '@/api/financialManage/invoiceManage';
  // import fileMain from '@/components/addDoc/index.vue';
  export default {
    mixins: [dictMixins],
    props: ['detailDialogFlag'],
    components: {
      tableInfo,
      personSelect,
      bpmDetail
      // fileMain
    },
    data() {
      return {
        fullscreen: false,
        activeComp: 'main',
        tabOptions: [
          { key: 'main', name: '申请详情' },
          { key: 'bpm', name: '流程详情' }
        ],
        title: '详情',
        dialogType: '',
        form: {
          files: []
        }
      };
    },
    methods: {
      //初始化
      async init(row = {}, type) {
        this.title = '详情';
        this.dialogType = type;
        await this.getInfo(row.id);
      },
      //获取详情
      async getInfo(id) {
        this.form = await invoiceApplyInfoAPI(id);
      },
      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>