smartpark_durable_front/src/views/firstOrder/components/consumableDialog.vue

<template>
    <el-dialog :close-on-click-modal="false" :title="demandDialogTitle" :visible.sync="consumableVisible"
        :append-to-body="true" width="70%" @close="handleCloseDetail" fullscreen>
        <basic-container>
            <avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" v-model="form"
                :page.sync="page" :permission="permissionList" @row-del="rowDel" @search-change="searchChange"
                @search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange"
                @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad"
                @row-change="handleRowChange">
                <!-- <template slot-scope="scope" slot="menu">
                    <el-button type="text" size="small" @click.stop="handleLog(scope.row)">记录
                    </el-button>
                </template> -->
            </avue-crud>
        </basic-container>
    </el-dialog>
</template>
<script>
import { getList, recordList } from "@/api/firstOrder/list";
export default {
    props: {
        consumableVisible: {
            type: Boolean,
            default: false
        },
        demandDialogTitle: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            form: {},
            selectionList: [],
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            option: {
                height: "auto",
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 12,
                border: true,
                index: true,
                selection: true,
                viewBtn: true,
                dialogClickModal: false,
                menu: true,
                printBtn: false,
                refreshBtn: false,
                gridBtn: false,
                gridBackgroundImage: false,
                gridSpan: false,
                filterBtn: false,
                columnBtn: false,
                menuAlign: "left",
                searchMenuPosition: "right",
                menuWidth: 80,
                column: [
                    {
                        label: "存货编号",
                        prop: "materialCode",
                        headerAlign: "center",
                        align: "center",
                    },
                    {
                        label: "存货名称",
                        prop: "materialName",
                        search: true,
                        headerAlign: "center",
                        align: "left",
                    },
                    {
                        label: "规格型号",
                        prop: "model",
                        headerAlign: "center",
                        align: "left",
                    },
                    {
                        label: "类别",
                        prop: "type",
                        search: true,
                        type: "select",
                        headerAlign: "center",
                        align: "center",
                        dicData: [
                            {
                                label: "易耗品",
                                value: "YH",
                            },
                            {
                                label: "耐用品",
                                value: "NY",
                            },
                        ],
                    },
                    {
                        label: "计量单位",
                        prop: "unit",
                        headerAlign: "center",
                        align: "center",
                    },
                    {
                        label: "数量",
                        prop: "num",
                        headerAlign: "center",
                        align: "center",
                    },
                    {
                        label: "单价",
                        prop: "unitPrice",
                        headerAlign: "center",
                        align: "center",
                    },
                    {
                        label: "金额",
                        prop: "amount",
                        headerAlign: "center",
                        align: "center",
                    },
                    {
                        label: "描述",
                        prop: "remark",
                        headerAlign: "center",
                        align: "center",
                        formatter: (row, column) => {
                            const value = row.remark;
                            if (value === null || value === undefined || value === "") {
                                return "无";
                            }
                            return value;
                        }
                    },
                ],
            },
            data: [],
            dialogLogVisible: false,
            transactionType: "1",
            tableData: [],
            ckTable: [],
            rkTable: [],
            currentRow: null,
        };
    },
    computed: {
        permissionList() {
            return {
                addBtn: false,
                viewBtn: false,
                delBtn: false,
                editBtn: false,
            };
        },
        ids() {
            let ids = [];
            this.selectionList.forEach((ele) => {
                ids.push(ele.id);
            });
            return ids.join(",");
        },
    },
    mounted() {
        this.consumableVisible = this.consumableVisible
    },
    methods: {
        formatTime(row, column, cellValue) {
            if (!cellValue) return '';
            const date = new Date(cellValue);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        async handleLog(row) {
            this.dialogLogVisible = true;
            this.currentRow = row;
            this.loadTransactionData();
        },

        handleTabClick() {
            this.loadTransactionData();

        },
        async loadTransactionData() {
            if (!this.currentRow) return;
            const params = {
                oneFromId: this.currentRow.id,
                transactionType: this.transactionType
            };
            const pageNum = this.page.currentPage;
            const pageSize = this.page.pageSize;
            this.loading = true;
            try {
                const res = await recordList(
                    pageNum,
                    pageSize,
                    Object.assign({}, this.query, params)
                );
                if (this.transactionType === "1") {
                    this.ckTable = res.data.result.list;
                } else {
                    this.rkTable = res.data.result.list;
                }
                this.tableData = res.data.result.list;
            } catch (error) {
                this.$message.error(error.message);
            } finally {
                this.loading = false;
            }
        },
        searchReset() {
            this.query = {};
            this.onLoad(this.page);
        },
        searchChange(params, done) {
            this.query = params;
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        },
        //勾选当前
        selectionChange(list) {
            this.selectionList = list;
        },
        selectionClear() {
            this.selectionList = [];
            this.$refs.crud.toggleSelection();
        },
        handleRowChange(row, index, data) {
            console.log('Selected data:', data); 
        },
        currentChange(currentPage) {
            this.handleRowChange()
            this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },
        refreshChange() {
            this.onLoad(this.page, this.query);
        },
        onLoad(page, params = {}) {
            this.loading = true;
            getList(
                page.currentPage,
                page.pageSize,
                Object.assign(params, this.query)
            ).then((res) => {
                // const data = res.data.data;
                this.data = res.data.result.list;
                this.loading = false;
                this.page.total = res.data.result.total;
                // this.selectionClear();
            });
            this.loading = false;
        },
    },
}


</script>