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

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="detailDialogFlag"
    title="详情"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="60%"
    :before-close="cancel"
    :maxable="true"
    :resizable="true"
  >
  <div>
    <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="120px">
        <headerTitle title="基本信息"></headerTitle>
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item
              label="应付日期"
              prop="payableDate"
              >
              <el-date-picker
                style="width: 100%"
                v-model="form.payableDate"
                disabled
                type="date"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="应付金额"
              prop="payableTotalPrice"
              >
              <el-input-number disabled v-model="form.payableTotalPrice" :precision="2" :controls="false"
                               style="width: 100%"
                               :min="0"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item
              label="会计科目"
              prop="accountingSubjectId"
              >
              <ele-tree-select
                disabled
                clearable
                filterable
                ref="treeSelect"
                :data="accountingSubjectList"
                v-model="form.accountingSubjectId"
                valueKey="id"
                labelKey="name"
                placeholder="请选择"
                @change="changeSubjectInfo"
                default-expand-all
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="发票编码"
              prop="invoiceCode"
              >
              <el-input disabled v-model="form.invoiceCode"></el-input>
            </el-form-item>
          </el-col>


        </el-row>
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item
              label="来源类型"
              prop="sourceType"
              >
              <el-input :value="form.sourceType==2?'合同':form.sourceType==3?'采购订单':'对账单'" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="来源编码"
              prop="sourceCode"
              >
              <el-input v-model="form.sourceCode" disabled></el-input>
            </el-form-item>
          </el-col>
 
          <el-col :span="12">
            <el-form-item
              label="公司名称"
              prop="contactName"
              >
              <el-input disabled v-model="form.contactName"></el-input>
            </el-form-item>
          </el-col>

          
          <el-col :span="12">
            <el-form-item
              label="公司名称"
              prop="contactName"
             >
              <el-input disabled v-model="form.contactName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="附件">
              <fileMain v-model="form.files" type="view"></fileMain>
             
            </el-form-item>
          </el-col>
        </el-row>
        <headerTitle title="付款信息"></headerTitle>
        <info-table ref="feeRelatedInfoTable" dialog-type="view" v-if="form.id" :form.sync="form" @invoiceChange="init"></info-table>
      </el-form>
    </div>
    <bpmDetail v-if="activeComp === 'bpm' && form.processInstanceId" :id="form.processInstanceId"></bpmDetail>

  </div>
    <div slot="footer">
      <el-button @click="cancel">返回</el-button>
    </div>
  </ele-modal>
</template>

<script>
import {getFile} from '@/api/system/file';
import dictMixins from '@/mixins/dictMixins';
import fileMain from '@/components/addDoc/index.vue';

import {getFinPayableInfoAPI} from "@/api/financialManage/payableManage";
import {getTreeByPid} from "@/api/classifyManage";
import infoTable from "@/views/financialManage/payableManage/components/infoTable.vue";
import bpmDetail from "@/views/bpm/processInstance/detail.vue";
import tableInfo from "@/views/financialManage/invoiceManage/components/tableInfo.vue";

export default {
  mixins: [dictMixins],
  components: {
    tableInfo, bpmDetail,
    infoTable,
    fileMain
  },

  data() {
    return {
      activeComp: 'main',
      tabOptions: [
        {key: 'main', name: '付款详情'},
        {key: 'bpm', name: '流程详情'}
      ],
      dialogType: '',
      form: {
        accountingSubjectCode: "",
        accountingSubjectId: '',
        accountingSubjectName: "",
        contactId: '',
        contactName: "",
        files: [],
        id: '',
        invoiceCode: "",
        receivableDate: "",
        payableTotalPrice: '',
        paidTotalPrice: '',
        remark: "",
        sourceCode: "",
        sourceId: "",
        sourceType: '',
        unpaidTotalPrice: 0
      },
      accountingSubjectList: [],
      rules: {
        accountingSubjectId: {required: true, message: '请选择', trigger: 'change'},
        receivableDate: {required: true, message: '请选择', trigger: 'change'},
      }
    };
  },
  props: {
    detailDialogFlag: {
      type: Boolean,
      default: false,
    },
  },
  async created() {

  },
  methods: {
    //获取详情
    async init(id) {
      await this.getClassifyList(24, 'accountingSubjectList')
      this.form = await getFinPayableInfoAPI(id)
      this.$nextTick(()=>{
        this.$refs.feeRelatedInfoTable.init()
      })
    },
    downloadFile(file) {
      getFile({objectName: file.storePath}, file.name);
    },

    //获取分类管理中的数据
    async getClassifyList(id, listName) {
      let res = await getTreeByPid(id)
      this[listName] = res.data
    },
    //获取会计科目选中数据
    changeSubjectInfo(val) {
      if (!val) return this.form.accountingSubjectName = ''
      let data = this.$refs.treeSelect?.$refs?.tree?.getCurrentNode() || {}
      this.form.accountingSubjectName = data.name
    },
    cancel() {
      this.$emit('update:detailDialogFlag', false)
    }
  }
};
</script>

<style scoped lang="scss">
.ele-dialog-form {
  .el-form-item {
    margin-bottom: 10px;
  }
}

.headbox {
  display: flex;
  justify-content: flex-start;
  align-items: center;

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