kd-aiot-frontend-wt/src/views/bpm/handleTask/components/financialManage/invoiceManage/components/addOrEditDialog.vue

<template>
  <div>
    <el-form ref="form" :rules="rules" :model="form" label-width="130px">
      <headerTitle title="基本信息"></headerTitle>
      <el-row :gutter="12">
        <!-- <el-row :gutter="12"> -->
          <el-col :span="8">
            <el-form-item label="发票类型" prop="type">
              <el-select
                v-model="form.type"
                @change="handleSelType"
                disabled
                clearable
                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="6"></el-option>
                <el-option label="付款计划" :value="7"></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 == 6">
            <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 == 7">
            <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
                v-model="form.amount"
                :precision="2"
                disabled
                :controls="false"
                style="width: 100%"
                :min="0"
              ></el-input-number>
            </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-row> -->
        <el-col :span="8">
          <el-form-item label="申请部门" prop="applyDeptId">
            <ele-tree-select
              disabled
              clearable
              :data="deptTreeList"
              v-model="form.applyDeptId"
              valueKey="id"
              labelKey="name"
              placeholder="请选择"
              @change="changeDeptInfo"
              default-expand-all
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请人" prop="applyUserId">
            <personSelect
              disabled
              ref="directorRef"
              v-model="form.applyUserId"
              @selfChange="changeUserInfo"
            />
          </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"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            v-if="taskDefinitionKey != 'starter'"
            label="会计科目"
            prop="accountingSubjectId"
          >
            <ele-tree-select
              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="8" :gutter="12" v-if="taskDefinitionKey != 'starter'">
          <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" :gutter="12" v-if="taskDefinitionKey != 'starter'">
          <el-form-item
            prop="files"
            label="发票附件"
            :rules="[
              {
                required: isFile == 1 ? false : true,
                message: '请上传发票附件',
                trigger: 'blur'
              }
            ]"
          >
            <fileMain v-model="form.files" @updateVal="getFiles"></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 v-model="form.companyName" disabled></el-input>
          </el-form-item>
          <el-form-item label="统一社会信用代码" prop="companyUsc">
            <el-input v-model="form.companyUsc" disabled></el-input>
          </el-form-item>
          <el-form-item label="开户银行" prop="companyBankBranchNo">
            <el-input v-model="form.companyBankBranchNo" disabled></el-input>
          </el-form-item>
          <el-form-item label="银行账户" prop="companyBankAccount">
            <el-input v-model="form.companyBankAccount" disabled></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="companyAddress">
            <el-input v-model="form.companyAddress" disabled></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 v-model="form.companyTel" disabled></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>
    <!-- <headerTitle title="关联信息"></headerTitle>
    <table-info
      v-if="form.detailList.length"
      :dialogType="taskDefinitionKey != 'starter' ? 'view' : 'update'"
      :form="form"
      ref="table"
      @setPrice="setPrice"
    ></table-info> -->
    <div style="margin-top: 20px; margin-bottom: 20px;">
        <headerTitle title="收款计划信息"></headerTitle>
        <!-- <el-form ref="form" :model="tableForm"> -->
          <ele-pro-table
            ref="table"
            :needPage="false"
            :columns="columns"
            :datasource="form.receiptPayments"
            row-key="id"
            class="time-form"
          >
            <template v-slot:toolbar>
              <!-- <span>已开票金额：{{ totalInvoiceAmount }}</span> -->
            </template>
            
            <template v-slot:invoiceAmount="scope">
              <!-- <el-form-item
                style="width: 100%;"
                label-width="0"
                :prop="'receiptPayments.' + scope.$index + '.invoiceAmount'"
                :rules="[
                  {
                    required: true,
                    message: '请输入开票金额',
                    trigger: 'blur'
                  },
                  {
                    validator: (rule, value, callback) => {
                      if (value === undefined || value === null || value === '') {
                        callback('请输入开票金额');
                      } else if (parseFloat(value) <= 0) {
                        callback('开票金额必须大于0');  
                      } else {
                        callback();
                      }
                    },
                    trigger: 'blur'
                  }
                ]"
              >  -->
                <span v-if="dialogType === 'view'">{{ scope.row.invoiceAmount }}</span>
                <!-- <el-input :min="0" :max="scope.row.planPaymentAmount" v-limit="{ min: 0, max: scope.row.planPaymentAmount }" 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>
    <headerTitle title="关联物品清单信息"></headerTitle>
    <!-- <table-info
      v-if="dialogType != 'add' && form.detailList.length"
      dialogType="view"
      :form="form"
      ref="table"
    ></table-info> -->
   <table-info-new
      dialogType="view"
      ref="tableInfoNewRef"
    ></table-info-new>
  </div>
</template>
<script>
  import personSelect from '@/components/CommomSelect/person-select.vue';
  import { listOrganizations } from '@/api/system/organization';
  import { mapGetters } from 'vuex';
  import fileUpload from '@/components/upload/fileUpload.vue';
  import tableInfo from './tableInfo.vue';
  import { getTreeByPid } from '@/api/classifyManage';
  import {
    invoiceApplyInfoAPI,
    invoiceApplyUpdateAPI,
    invoiceApplyUpdateV2API
  } from '@/api/bpm/components/financialManage/invoiceManage';
  // import fileMain from '@/components/addDoc/index.vue';
  import { parameterGetByCode } from '@/api/main/index.js';
  import { paymentTypeOp } from '@/enum/dict';
  import { invoiceApplyInfoV2API } from '@/api/bpm/components/financialManage/invoiceManage';
  import tableInfoNew from './tableInfoNew.vue';

  export default {
    name: 'add-or-edit-dialog',
    components: {
      // fileMain,
      fileUpload,
      personSelect,
      tableInfo,
      tableInfoNew
    },
    props: {
      businessId: {
        default: ''
      },
      taskDefinitionKey: {
        default: ''
      }
    },
    provide() {
      return {
        invoiceType: () => this.form.type
      };
    },
    computed: {
      ...mapGetters(['user']),
      columns() {
        return [
          {
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            fixed: 'left'
          },
          {
            width: 150,
            prop: 'sourceOrderDetailNo',
            label: this.form.type == 1 ? '收款计划编码' : '付款计划编码',
            align: 'center'
          },
          {
            width: 150,
            prop: 'relatedOrderNo',
            label: '订单编号',
            align: 'center'
          },
          {
            width: 120,
            prop: 'relatedOrderType',
            label: '订单类型',
            align: 'center',
            formatter: (row) => {
              return row.relatedOrderType == 1 ? '销售订单' : '采购订单'
            }
          },
          {
            width: 120,
            prop: 'contractNo',
            label: '合同编码',
            align: 'center'
          },
          {
            width: 120,
            prop: 'contractCode',
            label: '合同编号',
            align: 'center'
          },
          {
            width: 120,
            prop: 'contractName',
            label: '合同名称',
            align: 'center'
          },
          {
            prop: 'issueNumber',
            label: '期数',
            align: 'center'
          },
          {
            width: 120,
            prop: 'paymentType',
            label: '款项类型',
            align: 'center',
            formatter: (row) => {
              return this.paymentTypeOp.find(item => item.value == row.paymentType)?.label || ''
            }
          },
          {
            prop: 'moneyName',
            label: '款项名称',
            align: 'center',
            width: 170
          },
          {
            width: 150,
            prop: 'paymentRatio',
            label: '比例',
            align: 'center'
          },
          {
            width: 170,
            prop: 'planPaymentAmount',
            label: this.form.type == 1 ? '计划收款金额' : '计划付款金额',
            align: 'center',
          },
          {
            width: 150,
            prop: 'unInvoiceAmount',
            label: '未开票金额',
            align: 'center'
          },
          {
            width: 150,
            prop: 'invoicedAmount',
            label: '已开票金额',
            align: 'center'
          },
          {
            width: 160,
            prop: 'invoiceAmount',
            label: '开票金额',
            align: 'center',
            // slot: 'invoiceAmount',
            fixed: 'right'
          }
        ];
      },
    },
    data() {
      return {
        dialogType: '',
        title: '',
        paymentTypeOp,
        form: {
          salesCompanyUsc: '',
          salesCompanyBankBranchNo: '',
          salesCompanyBankAccount: '',
          accountingSubjectCode: '',
          accountingSubjectId: '',
          accountingSubjectName: '',
          amount: undefined,
          applyDeptId: '',
          applyDeptName: '',
          applyUserId: '',
          applyUserName: '',
          companyAddress: '',
          companyBankAccount: '',
          companyUsc: '',
          expectInvoiceDate: '',
          companyBankBranchNo: '',
          companyName: '',
          receiverAddress: '',
          receiverName: '',
          receiverTel: '',
          companyTel: '',
          detailList: [],
          drawerId: '',
          drawerName: '',
          files: [],
          invoiceStatus: '',
          link: [],
          remark: '',
          settlementAccountId: '',
          settlementAccountName: '',
          type: '',
          category: 1
        },
        isFile: 0,
        feeTypeList: [],
        accountingSubjectList: [],
        deptList: [],
        deptTreeList: [],
        rules: {
          applyDeptId: { required: true, message: '请选择', trigger: 'change' },
          applyUserId: { required: true, message: '请选择', trigger: 'change' },
          accountingSubjectId: {
            required: true,
            message: '请选择',
            trigger: ['change', 'blur']
          },
          feeTypeId: { required: true, message: '请选择', trigger: 'change' },
          amount: { required: true, message: '请输入', trigger: 'blur' },
          type: { required: true, message: '请选择', trigger: 'change' }
        }
      };
    },
    created() {
      this.init();
      parameterGetByCode({
        code: 'eos_financialManage_invoiceManage_files'
      }).then((res) => {
        this.isFile = res.value;
      });
    },
    methods: {
      //初始化
      async init() {
        await this.getClassifyList(24, 'accountingSubjectList');
        await this.getDeptList();
        await this.getInfo(this.businessId);
        this.$nextTick(async () => {
          await this.getUserList(this.form.applyDeptId);
        });
      },
      //获取详情
      async getInfo(id) {
        this.form = await invoiceApplyInfoV2API(id);
        this.$nextTick(() => {
          this.$refs.tableInfoNewRef && this.$refs.tableInfoNewRef.putValue(this.form);
        })
      },
      //获取分类管理中的数据
      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;
        this.$refs.form.validateField('accountingSubjectId');
      },
      getFiles(val) {
        // this.form.files = val;
        console.log(val, 'val');
        this.$refs.form.validateField('files');
      },
      // 获取部门数据
      getDeptList() {
        listOrganizations().then((list) => {
          this.deptList = list;
          this.deptTreeList = this.$util.toTreeData({
            data: list,
            idField: 'id',
            parentIdField: 'parentId'
          });
        });
      },
      // 选择负责人部门
      changeDeptInfo(id) {
        const info = this.deptList.find((e) => e.id == id) || {};
        this.form.applyDeptName = info.name;
        this.form.applyUserId = '';
        this.form.applyUserName = '';
        this.getUserList(id);
      },
      // 获取人员数据
      getUserList(deptId) {
        if (deptId) {
          this.$refs.directorRef.getList({ deptId });
        }
      },
      //选择人员数据
      changeUserInfo(val, info) {
        this.form.applyUserName = info.name;
      },
      //
      handleSelType(val) {
        this.$refs.table.clearTable();
      },
      setPrice(val) {
        this.form.amount = val;
      },
      //
      getTableValue() {
        return new Promise((resolve, reject) => {
          this.$refs.form.validate(async (valid) => {
            if (!valid) return this.$message.warning('有必填项未填，请检查');
            // let tableData = {};
            console.log(this.form.sourceType, 'this.form.sourceType');
            // if (this.form.sourceType != 4 && this.form.sourceType != 5) {
            //   tableData = await this.$refs.table.getTableValidate();
            // }
            // this.form.link = tableData.link;
            // this.form.detailList = tableData.detailList;
            const API = invoiceApplyUpdateV2API;
            const res = await API(this.form);
            console.log(res, 'res~~~');
            res.code == '0' ? resolve('1') : reject(new Error(res.message));
          });
        });
      }
    }
  };
</script>
<style scoped lang="scss"></style>