measure/src/views/debit-pay/admin/periods.vue

<template>
    <hc-new-card title="合同计量期">
        <template #extra>
            <el-button hc-btn type="primary" @click="editModalClick">
                <HcIcon name="add" />
                <span>编辑</span>
            </el-button>
        </template>
        <hc-table is-new :index-style="{ width: 60 }" :column="tableColumn" :datas="tableData" :loading="tableLoading" />
        <template #action>
            <hc-pages :pages="searchForm" @change="pageChange" />
        </template>
        <!-- 计量期编辑 -->
        <hc-new-dialog
            is-table widths="1200px" :show="editModalShow" title="计量期编辑" :loading="saveLoading"
            @save="editModalSave" @close="editModalClose"
        >
            <hc-card-item>
                <template #header>
                    <el-tooltip :visible="editVisible" effect="light" placement="bottom-start">
                        <template #content>
                            <div class="text-sm text-red">
                                1.日期不能为空<br>
                                2.同一期的结束日期不能小于开始日期<br>
                                3.连续的两期，上一期结束日期和下一期的开始日期必须连续<br>
                                如：期号1的结束日期为2018-1-25，则期号2的开始日期必须是2018-1-26 ！<br>
                                4.已经存在数据的计量周期不能进行删除！<br>
                                5.已经存在上报数据的计量周期不能进行数据修改
                            </div>
                        </template>
                        <el-button type="danger" @mouseenter="editVisible = true" @mouseleave="editVisible = false">
                            <HcIcon name="question" />
                            <span>编辑说明</span>
                        </el-button>
                    </el-tooltip>
                </template>
                <template #extra>
                    <el-button type="primary" @click="addPreRow">
                        <HcIcon name="page-separator" :line="false" />
                        <span>插入上一行</span>
                    </el-button>
                    <el-button type="primary" @click="addNextRow">
                        <HcIcon name="page-separator" :line="false" />
                        <span>插入下一行</span>
                    </el-button>
                </template>
                <hc-table
                    is-new :index-style="{ width: 60 }" :column="tableEditColumn" :datas="tableEditData"
                    :loading="tableEditLoading" is-current-row @row-click="hangeRow"
                >
                    <template #periodNumber="{ row }">
                        <hc-table-input v-model="row.periodNumber" :disabled="getRowStatus1(row)" />
                    </template>
                    <template #payNumber="{ row }">
                        <hc-table-input v-model="row.payNumber" disabled />
                    </template>
                    <template #periodYear="{ row }">
                        <el-select v-model="row.periodYear" placeholder="选择年份" filterable block :disabled="getRowStatus1(row)">
                            <el-option v-for="item in yearData" :key="item" :label="item" :value="item" />
                        </el-select>
                    </template>
                    <template #periodMonth="{ row }">
                        <el-select v-model="row.periodMonth" placeholder="选择月份" filterable block :disabled="getRowStatus1(row)">
                            <el-option v-for="item in monthData" :key="item" :label="item" :value="item" />
                        </el-select>
                    </template>
                    <template #startDate="{ row }">
                        <el-date-picker
                            v-model="row.startDate" class="block" format="YYYY-MM-DD" type="date"
                            value-format="YYYY-MM-DD"
                            :disabled="getRowStatus1(row)"
                            @change="changeStart($event, row)"
                        />
                    </template>
                    <template #endDate="{ row }">
                        <el-date-picker
                            v-model="row.endDate" class="block" format="YYYY-MM-DD" type="date"
                            value-format="YYYY-MM-DD"
                            :disabled="getRowStatus1(row)"
                            @change="changeEnd($event, row)"
                        />
                    </template>
                    <template #formPrintDate="{ row }">
                        <el-date-picker v-model="row.formPrintDate" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" :disabled="getRowStatus1(row)" />
                    </template>
                    <template #action="{ row, index }">
                        <el-link type="danger" :disabled="getRowStatus2(row)" @click="delRow(row, index)">删除</el-link>
                    </template>
                </hc-table>
            </hc-card-item>
        </hc-new-dialog>
    </hc-new-card>
</template>

<script setup>
import { onActivated, ref } from 'vue'
import dayjs from 'dayjs'
import { getArrValue, getMonthList, getYearList, isNullES } from 'js-fast-way'
import mainApi from '~api/debit-pay/admin/periods.js'
import { useAppStore } from '~src/store'

const useAppState = useAppStore()
const contractId = ref(useAppState.getContractId)
const projectId = ref(useAppState.getProjectId)

defineOptions({
    name: 'DebitPayAdminPeriods',
})

//获取年月等相关日期数据
const year = Number(dayjs().format('YYYY')) + 8
const yearData = getYearList(year, 2010)
const monthData = getMonthList()

//渲染完成
onActivated(() => {
    getTableData()
})

//搜索表单
const searchForm = ref({ current: 1, size: 20, total: 0 })

//分页
const pageChange = ({ current, size }) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//表格数据
const tableLoading = ref(false)
const tableColumn = ref([
    { key: 'periodNumber', name: '期号' },
    { key: 'payNumber', name: '支付期编号' },
    { key: 'periodYear', name: '年份' },
    { key: 'periodMonth', name: '月份' },
    { key: 'startDate', name: '开始日期' },
    { key: 'endDate', name: '结束日期' },
    { key: 'formPrintDate', name: '报表打印日期' },
])
const tableData = ref([])
const getTableData = async () => {
    tableLoading.value = true
    const { error, code, data } = await mainApi.getPage({
        ...searchForm.value,
        contractId: contractId.value,
        type: 1,
    })
    tableLoading.value = false
    if (!error && code === 200) {
        tableData.value = getArrValue(data['records'])
        searchForm.value.total = data['total']
    } else {
        tableData.value = []
    }
}
//计量期编辑
const editVisible = ref(false)
const editModalShow = ref(false)
const editModalClick = () => {
    editModalShow.value = true
    getContractNumber()
    getTableEditData()
}

//判断修改状态
const getRowStatus1 = ({ approveStatus, isNew }) => {
    if (isNew) return false
    return approveStatus !== 0
}

//判断删除状态
const getRowStatus2 = ({ approveStatus, dataStatus, citeStatus, isNew }) => {
    if (isNew) return false
    if (approveStatus !== 0) {
        return true
    } else {
        return dataStatus === 1 || citeStatus === 1
    }
}

//获取合同编号
const contractNumber = ref('')
const getContractNumber = async () => {
    const { data } = await mainApi.getContractNumber({
        contractId: contractId.value,
    })
    contractNumber.value = isNullES(data) ? '' : data
}

const curIndex = ref(0)
const curRow = ref({})
const hangeRow = ({ row }) => {
    tableEditData.value.forEach((ele, index) => {
        if (row.id === ele.id) {
            curIndex.value = index
            curRow.value = ele
        }
    })
}
const addPreRow = () => {
    tableEditData.value.splice(curIndex.value, 0, { isNew: true })
}
const addNextRow = () => {
    if (!curRow.value?.endDate) {
        curRow.value.endDate = tableEditData.value[tableEditData.value.length - 1].endDate
    }
    const netxtDay = getNextDate(curRow.value?.endDate)
    tableEditData.value.splice(curIndex.value + 1, 0, { isNew: true, startDate: netxtDay })
}
//获取连续的时间
const getNextDate = (data) => {
    let dateString = data
    // 将日期字符串转换为 Date 对象
    let dateObject = new Date(dateString)
    // 将日期加一天
    dateObject.setDate(dateObject.getDate() + 1)
    // 获取新日期的年、月、日
    let year = dateObject.getFullYear()
    let month = dateObject.getMonth() + 1 // 注意：月份从0开始，所以要加1
    let day = dateObject.getDate()

    // 将年、月、日格式化为字符串
    let newDateString = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`

    // 输出结果
    console.log(newDateString)
    return newDateString
}
const delRow = (row, index) => {
    console.log(index, 'index')
    tableEditData.value.splice(index, 1)
    // if ( tableEditData.value.length === 0) {
    //     tableEditData.value.push({})
    // }
}
//编辑的表格
const tableEditColumn = [
    { key: 'periodNumber', name: '期号' },
    { key: 'payNumber', name: '支付期编号' },
    { key: 'periodYear', name: '年份' },
    { key: 'periodMonth', name: '月份' },
    { key: 'startDate', name: '开始日期' },
    { key: 'endDate', name: '结束日期' },
    { key: 'formPrintDate', name: '报表打印日期' },
    { key: 'action', name: '操作', width: 80, align: 'center' },
]
const tableEditData = ref([])
const tableEditLoading = ref(false)
const getTableEditData = async () => {
    tableEditLoading.value = true
    const { error, code, data } = await mainApi.allPeriod({
        ...searchForm.value,
        contractId: contractId.value,
        type: 1,
    })
    tableEditLoading.value = false
    if (!error && code === 200) {
        tableEditData.value = getArrValue(data)
        curIndex.value = tableEditData.value.length
        if (tableEditData.value.length === 0) {
            tableEditData.value.push({ isNew: true })
        }
    } else {
        tableEditData.value = []
    }
}
const saveLoading = ref(false)
const editModalSave = async () => {
    saveLoading.value = true
    tableEditData.value.forEach(ele => {
        ele.contractId = contractId.value
        ele.projectId = projectId.value
    })
    const { error, code, msg } = await mainApi.edit({
        list: tableEditData.value,
        contractId: contractId.value,
        projectId: projectId.value,
        type: 1,
    })
    //判断状态
    saveLoading.value = false
    if (!error && code === 200) {
        window?.$message?.success(msg)
        getTableData()
        editModalClose()
    } else {
        window.$message.error(msg)
    }

}
const editModalClose = () => {
    editModalShow.value = false
}
const changeStart = (val, row) => {
    if (val > row.endDate) {
        window.$message.warning('开始时间不能晚于结束时间')
        row.startDate = ''
    }
}
const changeEnd = (val, row) => {

    if (val < row.startDate) {
        window.$message.warning('结束时间不能早于开始时间')
        row.endDate = ''
        if (val) {
            row.formPrintDate = row.endDate
        }
    }
    if (val) {
        row.formPrintDate = row.endDate
    }

}
</script>

<style scoped lang="scss">

</style>