manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/contract/component/addEditorTwo.vue

<script lang="ts" setup>
import { ref, reactive, onMounted, inject, watch } from "vue";
import { UploadRequestOptions } from 'element-plus';
import { Delete } from '@element-plus/icons-vue'
import { tableShowOverflowTooltip } from '@/utils/globalVariables'
import { formatDate } from '@/utils/times'
import { downloadFile } from '@/utils/tools'
import { post, get, uploadFile } from "@/utils/request";
const props = defineProps<{
  paymentPlan: any[],
  enclosure: any[],
  enclosureDetele: any[]
}>()
const globalPopup = inject<GlobalPopup>('globalPopup')
const paymentPlan = ref(props.paymentPlan)
const enclosure = ref(props.enclosure)
const enclosureDetele = ref<any[]>([])
const uploadRef = ref<any>()

watch(() => props.paymentPlan, (newVal, _oldVal) => {
  paymentPlan.value = newVal || []
})

watch(() => props.enclosure, (newVal, _oldVal) => {
  enclosure.value = newVal || []
})

watch(() => props.enclosureDetele, (newVal, _oldVal) => {
  enclosureDetele.value = newVal || []
})

const typeOptions = [
  { label: '增值税专用发票', value: 0 },
  { label: '增值税普通发票', value: 1 },
]


function calculateTaxAmount(index: number) {
  const { amount = 0, taxRate = 0, taxAmount = 0 } = paymentPlan.value[index]
  if(!amount && !amount) {
    return
  }

  const shui = taxRate / 100
  const zhi = amount / (1 + shui) * shui
  paymentPlan.value[index].taxAmount = +(zhi.toFixed(2))
}

// 上传附件
async function httpUploadFile(param: UploadRequestOptions) {
  const { file } = param
  enclosure.value.push({ name: file.name, file, needUpload: true })
  return
}

function addPlan() {
  paymentPlan.value.push({
    isPayed: false,
    payDate: formatDate(new Date()),
    amount: '0',
    isBilled: true
  })
}

function deteleTables(row: any, index: number, type: 'paymentPlan' | 'enclosure') {
  if (type === 'paymentPlan') {
    paymentPlan.value.splice(index, 1)
  } else {
    if(row.id) {
      enclosureDetele.value.push(row.id)
    }
    enclosure.value.splice(index, 1)
  }
}

function getAddEditorData() {
  return {
    paymentPlan: paymentPlan.value,
    enclosure: enclosure.value,
    enclosureDetele: enclosureDetele.value
  }
}

defineExpose({
  getAddEditorData
})

</script>
<template>
  <div>
    <div>回款计划</div>
    <el-table :show-overflow-tooltip="tableShowOverflowTooltip" :data="paymentPlan" height="260">
      <el-table-column label="是否已回款" width="100">
        <template #default="scope">
          <el-checkbox v-model="scope.row.isPayed" label="已回款" />
        </template>
      </el-table-column>
      <el-table-column label="回款日期" width="180">
        <template #default="scope">
          <el-date-picker v-model="scope.row.payDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
            placeholder="回款日期" style="width: 150px;" />
        </template>
      </el-table-column>
      <el-table-column label="金额(含税)" width="180">
        <template #default="scope">
          <el-input v-model="scope.row.amount" v-enter-number placeholder="金额(含税)" style="width: 150px;">
            <template #prefix>
              <el-text class="mx-1" type="info">￥</el-text>
            </template>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="是否已开票" width="100">
        <template #default="scope">
          <el-checkbox v-model="scope.row.isBilled" label="已开票" />
        </template>
      </el-table-column>
      <el-table-column label="开票日期" width="180">
        <template #default="scope">
          <el-date-picker v-model="scope.row.billDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
            placeholder="开票日期" style="width: 150px;" />
        </template>
      </el-table-column>
      <el-table-column label="开票种类增值税" width="180">
        <template #default="scope">
          <el-select v-model="scope.row.invoiceType" placeholder="请选择">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="税率%" width="180">
        <template #default="scope">
          <el-input-number v-model="scope.row.taxRate" controls-position="right" :min="0.1" :max="100" @change="calculateTaxAmount(scope.$index)"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="税额" width="180">
        <template #default="scope">
          <el-input-number v-model="scope.row.taxAmount" controls-position="right" :min="0"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="operation" width="80" fixed="right">
        <template #header>
          <el-link type="primary" :underline="false" @click="addPlan()">添加</el-link>
        </template>
        <template #default="scope">
          <el-button type="danger" :icon="Delete" size="small"
            @click="deteleTables(scope.row, scope.$index, 'paymentPlan')"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <div>附件</div>
    <el-table :show-overflow-tooltip="tableShowOverflowTooltip" :data="enclosure" height="260">
      <el-table-column label="序号" width="100">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="文件名称" prop="name"></el-table-column>
      <el-table-column label="操作" width="80">
        <template #default="scope">
          <el-link type="primary" :underline="false" v-if="scope.row.id" @click="downloadFile(scope.row.url, scope.row.name)">下载</el-link>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80">
        <template #header>
          <el-upload ref="uploadRef" :http-request="httpUploadFile" :show-file-list="false" element-loading-text="正在上传"
            multiple>
            <template #trigger>
              <el-link type="primary" :underline="false">添加</el-link>
            </template>
          </el-upload>
        </template>
        <template #default="scope">
          <el-button type="danger" :icon="Delete" size="small"
            @click="deteleTables(scope.row, scope.$index, 'enclosure')"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style lang="scss" scoped></style>