shuhi-ui/src/views/priceWorkbench/stockTurnoverRate/index.vue

<template>
    <ele-page flex-table>
        <page-search ref="searchRef" @search="reload" @generate-rule="openRuleDialog" />

        <common-table
            ref="pageRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
            :datasource="datasource"
        >
            <template #toolbar>
                <el-button type="warning" @click="importVisible = true">
                    <el-icon class="mr-1"><Upload /></el-icon>
                    批量导入
                </el-button>
            </template>

            <template #cover="{ row }">
                <el-image
                    style="width: 80px; height: 110px; border-radius: 4px"
                    fit="cover"
                    :src="row.cover"
                    :preview-src-list="[row.cover]"
                    :initial-index="0"
                    preview-teleported
                />
            </template>

            <template #info="{ row }">
                <div class="flex flex-col text-sm">
                    <div class="info-basic-grid">
                        <div>
                            <span class="font-bold">书名: </span>{{ row.bookName }}
                        </div>
                        <div>
                            <span class="font-bold">作者: </span>{{ row.author }}
                        </div>
                        <div>
                            <span class="font-bold">ISBN: </span>{{ row.isbn }}
                        </div>
                        <div>
                            <span class="font-bold">出版社: </span>{{ row.publish }}
                        </div>
                        <div>
                            <span class="font-bold">出版时间: </span>{{ row.pubDate }}
                        </div>
                        <div>
                            <span class="font-bold">所属类型: </span>{{ row.bookTagName }}
                        </div>
                        <div>
                            <span class="font-bold">回收状态: </span>{{ row.recycleStatusName }}
                        </div>
                    </div>
                    <div class="mt-2 border-t pt-2">
                        <span class="mr-4">定价: {{ row.price }}</span>
                        <span class="mr-4"
                            >回收折扣: {{ row.recycleDiscount }}折
                            <span class="text-red-500 text-xs"
                                >{{ row.sugDiscountStr || '建议折扣' }}</span
                            ></span
                        >
                        <span>回收价格: {{ row.recyclePrice }}</span>
                    </div>
                    <div class="mb-1">
                        <span class="mr-4"
                            >销售价格: {{ row.productPrice }}
                            <el-icon class="cursor-pointer text-blue-500"
                                ><Edit /></el-icon
                        ></span>
                        <span class="text-green-500 text-xs"
                            >{{ row.productPriceChangeLog?.operatorName || '' }} {{ row.productPriceChangeLog?.createTime || '' }}</span
                        >
                    </div>
                    <div class="mb-1">
                        <span
                            >(已回收数量: {{ row.recycleNum }} 当前库存:
                            {{ row.stockNum }})</span
                        >
                    </div>
                </div>
            </template>

            <template #turnoverRate="{ row }">
                <div class="flex items-center">
                    <el-tag
                        :type="row.cycleName === '年' ? 'primary' : 'danger'"
                        effect="plain"
                        class="mr-1"
                    >
                        {{ row.cycleName }}
                    </el-tag>
                    <span>{{ row.turnoverRate }}</span>
                    <el-icon
                        class="ml-2 cursor-pointer text-blue-500 text-lg"
                        @click="handleHistory(row)"
                    >
                        <DataLine />
                    </el-icon>
                </div>
            </template>

            <template #action="{ row }">
                <div class="flex flex-col items-start gap-1">
                    <el-button link type="primary" @click="handleHistory(row)"
                        >[历史周转率]</el-button
                    >
                    <el-button link type="primary" @click="handleLog(row)"
                        >[操作记录]</el-button
                    >
                </div>
            </template>
        </common-table>

        <import-dialog v-model="importVisible" @done="reload" />
        <rule-dialog
            v-model="ruleVisible"
            :condition="lastWhere"
            :get-condition="getRuleCondition"
            @done="handleRuleDone"
        />
        <history-dialog v-model="historyVisible" ref="historyRef" />
        <log-dialog v-model="logVisible" ref="logRef" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import request from '@/utils/request';
    import { cleanParams, withOffsetLimit } from '@/api/priceWorkbench';
    import {
        Upload,
        Edit,
        DataLine
    } from '@element-plus/icons-vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import PageSearch from './components/page-search.vue';
    import ImportDialog from './components/import-dialog.vue';
    import RuleDialog from './components/rule-dialog.vue';
    import HistoryDialog from './components/history-dialog.vue';
    import LogDialog from './components/log-dialog.vue';

    defineOptions({ name: 'StockTurnoverRate' });

    // Component Refs
    const pageRef = ref(null);
    const searchRef = ref(null);
    const historyRef = ref(null);
    const logRef = ref(null);

    // Dialog Visibilities
    const importVisible = ref(false);
    const ruleVisible = ref(false);
    const historyVisible = ref(false);
    const logVisible = ref(false);

    const columns = ref([
        { type: 'selection', width: 50, align: 'center', fixed: 'left' },
        { label: '图片', prop: 'cover', width: 100, slot: 'cover' },
        { label: '信息', prop: 'info', minWidth: 300, slot: 'info' },
        {
            label: '库存周转率',
            prop: 'turnoverRate',
            width: 140,
            slot: 'turnoverRate',
            sortable: true
        },
        {
            label: '剩余可卖天数',
            prop: 'remainSellDays',
            width: 130,
            sortable: true
        },
        { label: '销量', prop: 'turnoverSalesNum', width: 100, sortable: true },
        { label: '期初库存', prop: 'beginStock', width: 100, sortable: true },
        { label: '期末库存', prop: 'endStock', width: 100, sortable: true },
        { label: '平均库存', prop: 'avgStock', width: 100, sortable: true },
        {
            label: '操作',
            prop: 'action',
            width: 120,
            slot: 'action',
            fixed: 'right'
        }
    ]);

    const lastWhere = ref({});

    const pageConfig = reactive({
        fileName: '库存周转率',
        cacheKey: 'stockTurnoverTable',
        params: {},
        rowKey: 'bookId'
    });

    const datasource = ({ pages, where, orders, sorter }) => {
        lastWhere.value = { ...(where || {}) };
        const params = withOffsetLimit(pages, {
            ...(pageConfig.params || {}),
            ...cleanParams(where || {})
        });
        if (orders && orders.orderByColumn) {
            params.orderType = sorter?.column?.columnKey || orders.orderByColumn;
            params.orderWay = orders.isAsc === 'ascending' ? 'asc' : 'desc';
        }
        return request
            .get('/book/bookTurnover/list', { params })
            .then((res) => {
                if (res.data.code === 200) return res.data;
                return Promise.reject(new Error(res.data.msg));
            });
    };

    function reload(where) {
        if (where) lastWhere.value = { ...where };
        pageRef.value?.reload(where);
    }

    
    function getRuleCondition() {
        const live = searchRef.value?.getCondition?.();
        if (live && Object.keys(live).length) {
            return live;
        }
        return lastWhere.value || {};
    }

    function handleRuleDone() {
        pageRef.value?.reload();
    }

    function openRuleDialog() {
        // 打开前先同步一次当前筛选，避免弹窗读到空条件
        const live = getRuleCondition();
        lastWhere.value = { ...(live || {}) };
        ruleVisible.value = true;
    }

    function handleHistory(row) {
        historyVisible.value = true;
        historyRef.value?.setData(row);
    }

    function handleLog(row) {
        logVisible.value = true;
        logRef.value?.handleOpen(row);
    }
</script>

<style scoped>
    .info-basic-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 16px;
        row-gap: 4px;
    }
</style>