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

<template>
    <hc-card title="材料调差" class="hc-debit-pay-material-material">
        <template #header>
            <div class="w-32">
                <el-select v-model="searchForm.contractPeriodId" placeholder="选择调差期" filterable clearable block>
                    <template v-for="item in adjustment" :key="item.id">
                        <el-option v-if="item.approveStatus === 2" :label="item.periodNumber" :value="item.id" />
                    </template>
                </el-select>
            </div>
            <div class="ml-3 w-40">
                <el-date-picker v-model="searchForm.adjustMonth" class="block" type="month" format="YYYY-MM" value-format="YYYY-MM" placeholder="调差月份" />
            </div>
            <el-button class="ml-3" type="primary" @click="searchClick">
                <hc-icon name="search" />
                <span>搜索</span>
            </el-button>
        </template>
        <template #extra>
            <el-button hc-btn type="primary" @click="addFormModal">
                <hc-icon name="add" />
                <span>新增</span>
            </el-button>
        </template>
        <hc-table :column="tableColumn" :datas="tableData" :index-style="{ width: 60 }" :loading="tableLoading">
            <template #materialName="{ row }">
                <el-link type="primary" @click="rowTop(row)">{{ row.materialName }}</el-link>
            </template>
            <template #approveStatus="{ row }">
                <span v-if="row.approveStatus === 1" class="text-green">已完结</span>
                <span v-else class="text-gray">未完结</span>
            </template>
            <template #action="{ row }">
                <el-link type="primary" :disabled="row.approveStatus === 1" @click="rowEditClick(row)">编辑</el-link>
                <el-link type="danger" :disabled="row.approveStatus === 1" @click="rowDelClick(row)">删除</el-link>
            </template>
        </hc-table>
        <template #action>
            <hc-pages :pages="searchForm" @change="pageChange" />
        </template>
        <!-- 新增/编辑 -->
        <HcdataModal v-model="isFormModal" :meter-period-id="searchForm.contractPeriodId" :ids="rowId" @finish="dataModalFinish" />
    </hc-card>
</template>

<script setup>
import { nextTick, onActivated, ref } from 'vue'
import { useAppStore } from '~src/store'
import { HcDelMsg } from 'hc-vue3-ui'
import { getArrValue } from 'js-fast-way'
import mainApi from '~api/debit-pay/material/material'
import HcdataModal from './components/material/dataModal.vue'

//初始化
const store = useAppStore()
const projectId = ref(store.getProjectId)
const contractId = ref(store.getContractId)

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

//获取调差期
const adjustment = ref([])
const getPeriodAdjustment = async () => {
    const { data } = await mainApi.periodAdjustment(contractId.value)
    adjustment.value = getArrValue(data)
}

//搜索表单
const searchForm = ref({
    contractPeriodId: null, adjustMonth: null,
    current: 1, size: 20, total: 0,
})
const searchClick = () => {
    searchForm.value.current = 1
    getTableData()
}

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

//表格
const tableColumn = [
    { key: 'contractPeriodNumber', name: '调差期', width: 100, align: 'center' },
    { key: 'adjustMonth', name: '调差月份', width: 120, align: 'center' },
    { key: 'materialName', name: '材料名称' },
    { key: 'materialPrice', name: '基准价格（元）', width: 140, align: 'center' },
    { key: 'currentPrice', name: '施工期价格（元）', width: 140, align: 'center' },
    { key: 'adjustTotal', name: '调差数量', width: 140, align: 'center' },
    { key: 'adjustMoney', name: '调差金额', width: 140, align: 'center' },
    { key: 'approveStatus', name: '状态', width: 120, align: 'center' },
    { key: 'action', name: '操作', width: 100, align: 'center' },
]
const tableData = ref([])

//获取表格数据
const tableLoading = ref(false)
const getTableData = async () => {
    tableLoading.value = true
    const { error, code, data } = await mainApi.page({
        ...searchForm.value,
        projectId: projectId.value,
        contractId: contractId.value,
    })
    tableLoading.value = false
    if (!error && code === 200) {
        tableData.value = getArrValue(data['records'])
        searchForm.value.total = data['total']
    } else {
        tableData.value = []
        searchForm.value.total = 0
    }
}

//新增
const isFormModal = ref(false)
const rowId = ref('')
const addFormModal = () => {
    rowId.value = ''
    isFormModal.value = true
}

//材料名称被点击
const rowTop = (row) => {
    rowId.value = row.id
    nextTick(() => {
        isFormModal.value = true
    })
}

//编辑
const rowEditClick = (row) => {
    rowId.value = row.id
    nextTick(() => {
        isFormModal.value = true
    })
}

//数据弹窗完成
const dataModalFinish = () => {
    isFormModal.value = false
    getTableData()
}

//删除
const rowDelClick = (row) => {
    HcDelMsg(async (resolve) => {
        const { code, msg } = await mainApi.delete(row.id)
        resolve()
        if (code === 200) {
            window.$message.success('删除成功')
            getTableData().then()
        } else {
            window.$message.error(msg ?? '操作失败')
        }
    })
}
</script>

<style scoped lang="scss">

</style>