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="row?.dataStatus === 1 || row?.citeStatus === 1" />
                    </template>
                    <template #periodYear="{ row }">
                        <el-select v-model="row.periodYear" placeholder="选择年份" filterable block :disabled="row?.dataStatus === 1 || row?.citeStatus === 1">
                            <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="row?.dataStatus === 1 || row?.citeStatus === 1">
                            <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="row?.dataStatus === 1 || row?.citeStatus === 1" @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="row?.dataStatus === 1 || row?.citeStatus === 1" @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="row?.dataStatus === 1 || row?.citeStatus === 1" />
                    </template>
                    <template #action="{ row, index }">
                        <el-link type="danger" :disabled="row?.dataStatus === 1 || row?.citeStatus === 1" @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 } 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: 10, 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: '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
    getTableEditData()
}
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: '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()
        }

}
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 = ''
    }
}
</script>

<style scoped lang="scss">

</style>