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

<template>
    <hc-new-card title="材料预付款计量期">
        <template #extra>
            <el-button hc-btn type="primary" @click="editModalClick">
                <HcIcon name="edit" />
                <span>编辑</span>
            </el-button>
        </template>
        <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new :index-style="{ width: 60 }">
            <template #action="{ row }">
                <el-link v-if="row?.isLock === 0" type="danger" @click="lockRow(row)">锁定</el-link>
                <el-link v-if="row?.isLock === 1" type="danger" @click="lockRow(row)">解锁</el-link>
            </template>
        </hc-table>
        <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.已经存在数据或者被锁定的计量期不能删除数据
                            </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 :column="tableEditColumn" :datas="tableEditData" is-new is-current-row :index-style="{ width: 60 }" :loading="tableEditLoading" @row-click="hangeRow">
                    <template #periodNumber="{ row }">
                        <hc-table-input v-model="row.periodNumber" is-new :index-style="{ width: 60 }" :disabled="row.isLock === 1" />
                    </template>
                    <template #periodName="{ row }">
                        <hc-table-input v-model="row.periodName" is-new :index-style="{ width: 60 }" :disabled="row.isLock === 1" />
                    </template>
                    <template #periodYear="{ row }">
                        <el-select v-model="row.periodYear" placeholder="选择年份" filterable block :disabled="row.isLock === 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.isLock === 1">
                            <el-option v-for="item in monthData" :key="item" :label="item" :value="item" />
                        </el-select>
                    </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.isLock === 1" />
                    </template>
                    <template #action="{ row, index }">
                        <el-button plain size="small" type="danger" :disabled="row?.isLock === 1" @click="delRow(row, index)">删除</el-button>
                    </template>
                </hc-table>
            </hc-card-item>
        </hc-new-dialog>
    </hc-new-card>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import dayjs from 'dayjs'
import { getArrValue, getMonthList, getYearList } from 'js-fast-way'
import mainApi from '~api/debit-pay/material/periods.js'
import { useAppStore } from '~src/store'
const useAppState = useAppStore()
const contractId = ref(useAppState.getContractId)
const projectId = ref(useAppState.getProjectId)

defineOptions({
    name: 'DebitPayMaterialPeriods',
})

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

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

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

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

//表格数据
const tableLoading = ref(false)
const tableColumn = ref([
    { key: 'periodNumber', name: '期号' },
    { key: 'periodName', name: '期名称' },
    { key: 'periodYear', name: '年份' },
    { key: 'periodMonth', name: '月份' },
    { key: 'formPrintDate', name: '报表打印日期' },
    { key: 'action', name: '操作', width: 80 },
])
const tableData = ref([
    { key1: '1111' },
])
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'])
    } else {
        tableData.value = []
    }
}
//计量期编辑
const editVisible = ref(false)
const editModalShow = ref(false)
const editModalClick = () => {
    editModalShow.value = true
    getTableEditData()
}
//锁定
const lockLoading = ref(false)
const lockRow = async (row)=>{
    lockLoading.value = true
    const { error, code, msg } = await mainApi.locking({
        isLock:row?.isLock,
        id:row?.id,
        })
        //判断状态
        lockLoading.value = false
        if (!error && code === 200) {
            window?.$message?.success(msg)
        }
        getTableData()
}

//编辑的表格
const tableEditColumn = [
    { key: 'periodNumber', name: '期号' },
    { key: 'periodName', name: '期名称' },
    { key: 'periodYear', name: '年份' },
    { key: 'periodMonth', 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)
        if (tableEditData.value.length === 0) {
            tableEditData.value.push({ isNew:true })
        }
    } else {
        tableEditData.value = []
    }
}
const delRow = (row, index)=>{
    tableEditData.value.splice(index, 1)
    // if ( tableEditData.value.length === 0) {
    //     tableEditData.value.push({})
    // }
}
const curIndex = ref(0)
const hangeRow = ({ row })=>{
    tableEditData.value.forEach((ele, index)=>{
        if (row.id === ele.id) {
            curIndex.value = index
        }
    })
}
const addPreRow = ()=>{
    tableEditData.value.splice( curIndex.value, 0, { isNew:true })
}
const addNextRow = ()=>{
    tableEditData.value.splice( curIndex.value + 1, 0, { isNew:true })
}
const saveLoading = ref(false)
const editModalSave = async () => {
    saveLoading.value = true
    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
}
</script>

<style scoped lang="scss">

</style>