manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/contract/component/addEditor.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 || []
})

// 上传附件
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'
  })
}

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="是否已回款">
        <template #default="scope">
          <el-checkbox v-model="scope.row.isPayed" label="已回款" />
        </template>
      </el-table-column>
      <el-table-column label="回款日期">
        <template #default="scope">
          <el-date-picker v-model="scope.row.payDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
            placeholder="回款日期" />
        </template>
      </el-table-column>
      <el-table-column label="回款金额">
        <template #default="scope">
          <el-input v-model="scope.row.amount" v-enter-number placeholder="回款金额">
            <template #prefix>
              <el-text class="mx-1" type="info">￥</el-text>
            </template>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="operation" width="80">
        <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>