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

<template>
    <hc-card class="hc-debit-pay-material-adjustment">
        <template #header>
            <div class="w-40">
                <el-input
                    v-model="searchForm.materialNumber"
                    placeholder="材料编码"
                />
            </div>
            <div class="ml-3 w-60">
                <hc-search-input
                    v-model="searchForm.materialName"
                    placeholder="请输入材料名称"
                    @search="getTableData"
                />
            </div>
        </template>
        <hc-body :split="rowBindingShow" padding="0">
            <hc-card-item>
                <hc-table
                    :column="tableColumn"
                    :datas="tableData"
                    :is-index="false"
                    :loading="tableLoading"
                >
                    <template #action="{ row }">
                        <template v-if="row.rowBindingData">
                            <el-link
                                type="success"
                                :disabled="treeLoadNode.length <= 0"
                                @click="confirmBinding(row)"
                                >确认绑定</el-link
                            >
                            <el-link type="danger" @click="cancelBinding(row)"
                                >取消绑定</el-link
                            >
                        </template>
                        <template v-else>
                            <el-link type="warning" @click="rowBinding(row)"
                                >绑定清单</el-link
                            >
                            <el-link type="primary" @click="rowEditClick(row)"
                                >编辑</el-link
                            >
                        </template>
                    </template>
                </hc-table>
            </hc-card-item>
            <template #right>
                <hc-card-item scrollbar>
                    <el-tree
                        ref="treeRef"
                        :data="treeLoadNode"
                        node-key="id"
                        :props="treeProps"
                        :default-checked-keys="treeNodeCheckList"
                        show-checkbox
                        check-strictly
                    >
                        <template #default="{ data }">
                            <div class="data-custom-tree-node">
                                <div class="level">{{ data.formName }}</div>
                                <div
                                    v-if="data.isFormNode"
                                    class="submit-input"
                                >
                                    <el-input
                                        v-model="data.adjustFactor"
                                        size="small"
                                        placeholder="请输入调差参数"
                                        :disabled="data.isQuote === 1"
                                    />
                                </div>
                            </div>
                        </template>
                    </el-tree>
                </hc-card-item>
            </template>
        </hc-body>
        <!-- 调差系数编辑 -->
        <hc-new-dialog
            v-model="isFormModal"
            title="调差系数编辑"
            is-footer-center
            is-table
            widths="50rem"
            @close="modalClose"
        >
            <hc-table
                :column="tableColumn1"
                :datas="tableData2"
                :is-index="false"
            >
                <template #adjustFactor="{ row }">
                    <hc-table-input v-model="row.adjustFactor" />
                </template>
                <template #action="{ row }">
                    <el-link
                        type="danger"
                        :disabled="row.isQuote === 1"
                        @click="dischargeBinding(row)"
                        >解除绑定关系</el-link
                    >
                </template>
            </hc-table>
            <template #footer>
                <el-button hc-btn @click="modalClose">取消</el-button>
                <el-button
                    :loading="saveLoaing"
                    hc-btn
                    type="primary"
                    @click="modalSave"
                    >提交</el-button
                >
            </template>
        </hc-new-dialog>
    </hc-card>
</template>

<script setup>
import { onActivated, onDeactivated, 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/adjustment";

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

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

//搜索表单
const searchForm = ref({ materialNumber: "", materialName: "" });

//表格
const tableColumn = [
    { key: "materialNumber", name: "材料编码" },
    { key: "materialName", name: "材料名称" },
    { key: "unit", name: "材料单位" },
    { key: "action", name: "操作", width: 140, align: "center" },
];
const tableData = ref([]);

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

//调差树
const treeRef = ref(null);
const treeProps = {
    label: "formName",
    children: "children",
    disabled: (data) => {
        return data.isQuote === 1;
    },
    class: (data) => {
        return `${data.isFormNode === 1 ? "is-form-node" : "no-form-check"}`;
    },
};
const treeLoadNode = ref([]);

//绑定清单
const rowBindingShow = ref(false);
const treeNodeCheckList = ref([]);
const rowBinding = async (row) => {
    if (rowBindingShow.value) {
        window.$message.error("请先操作完上一个清单");
        return;
    }
    rowBindingShow.value = true;
    row.rowBindingData = true;
    //获取树的数据
    const { data } = await mainApi.getAdjustFormTree({
        projectId: projectId.value,
        contractId: contractId.value,
        materialId: row.id,
    });
    treeLoadNode.value = getArrValue(data["vo2s"]);
    treeNodeCheckList.value = getArrValue(data["ids"]);
};

//确认绑定
const confirmBinding = async (row) => {
    const nodes = treeRef.value?.getCheckedNodes();
    if (nodes.length <= 0) {
        window.$message.error("请先勾选要绑定的节点");
        return false;
    }
    //处理数据
    let newArr = [];
    for (let i = 0; i < nodes.length; i++) {
        newArr.push({
            id: nodes[i].id,
            adjustFactor: nodes[i].adjustFactor ?? "",
        });
    }
    //发起请求
    const { error, code, msg } = await mainApi.linkFormMaterial({
        projectId: projectId.value,
        contractId: contractId.value,
        materialId: row.id,
        forms: newArr,
    });
    if (!error && code === 200) {
        window.$message.success(msg);
        cancelBinding(row);
        getTableData().then();
    } else {
        window.$message.error(msg ?? "操作失败");
    }
};

//取消绑定
const cancelBinding = (row) => {
    rowBindingShow.value = false;
    row.rowBindingData = false;
};

//编辑表格
const tableColumn1 = [
    { key: "formName", name: "清单名称" },
    { key: "formNumber", name: "清单编号" },
    { key: "materialName", name: "绑定材料名称" },
    { key: "adjustFactor", name: "调差系数" },
    { key: "action", name: "操作", width: 110, align: "center" },
];
const tableData2 = ref([]);
const getLinkAllForm = async () => {
    const { data } = await mainApi.linkAllForm({
        projectId: projectId.value,
        contractId: contractId.value,
        materialId: tableRowID.value,
    });
    tableData2.value = getArrValue(data);
};

//编辑
const isFormModal = ref(false);
const tableRowID = ref("");
const rowEditClick = (row) => {
    isFormModal.value = true;
    tableRowID.value = row.id;
    getLinkAllForm();
};

//解除绑定关系
const dischargeBinding = (row) => {
    HcDelMsg(
        {
            title: "确认操作提醒",
            text: "确认要解除绑定关系？",
        },
        async (resolve) => {
            const { error, code, msg } = await mainApi.removeLinkForm(row.id);
            if (!error && code === 200) {
                window.$message.success(msg);
                getLinkAllForm();
                resolve();
            } else {
                window.$message.error(msg ?? "操作失败");
            }
        }
    );
};

//保存
const saveLoaing = ref(false);
const modalSave = async () => {
    const list = tableData2.value;
    if (list.length <= 0) {
        window.$message.error("无数据可提交");
        return;
    }
    //处理数据
    let newArr = [];
    for (let i = 0; i < list.length; i++) {
        newArr.push({
            id: list[i].id,
            adjustFactor: list[i].adjustFactor,
        });
    }
    //发起请求
    const { error, code, msg } = await mainApi.submitLinkForm(newArr);
    if (!error && code === 200) {
        window.$message.success(msg);
        modalClose();
    } else {
        window.$message.error(msg ?? "操作失败");
    }
};

//取消关闭
const modalClose = () => {
    isFormModal.value = false;
    tableData2.value = [];
    tableRowID.value = "";
};

//页面卸载
onDeactivated(() => {
    rowBindingShow.value = false;
});
</script>

<style lang="scss">
.hc-debit-pay-material-adjustment .el-tree {
    --el-fill-color-blank: transparent;
    --el-tree-node-hover-bg-color: white;
    .el-tree-node.no-form-check .el-tree-node__content .el-checkbox {
        display: none;
    }
    .el-tree-node.is-form-node .el-tree-node__content .el-checkbox {
        display: inline-flex;
    }
    .data-custom-tree-node {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #101010;
        .level {
            position: relative;
            flex: 1;
            height: 100%;
            display: flex;
            align-items: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .submit-input {
            position: unset;
            margin-left: 10px;
            margin-right: 2px;
            width: 100px;
        }
        .el-input .el-input__wrapper {
            background-color: white;
        }
    }
}
</style>