cost-frontend/src/views/convolution/costCalculation/index.vue

<script lang="tsx">
//表格
import { defineComponent, ref } from "vue";
import { ElMessage } from "element-plus";
import Calculate from "./component/calculate.vue";
import { transformPageResponse } from "@/utils/qomo";
import { costStandardList,deleteCostStandard } from '@/api/costCalculation';
export default defineComponent({
    setup() {
        const tableRef = ref();
        const visible = ref(false);
        const forecastDialogRef = ref();
        //列
        const columns = ref([
            { type: "selection" },
            { label: "版本号", prop: "costVersion" },
            { label: "年份", prop: "year", valueType: "year" },
            { label: "物料编号", prop: "materialNo" },
            { label: "创建日期", prop: "createTime", hideInSearchForm: true, valueType: "datetime" },
            { label: "阶段", prop: "stage", valueType: 'dict-select', extraProps: { dictType: 'stageData' } },
            { label: "状态", prop: "status",valueType: 'dict-select',extraProps: { dictType: 'statusList' }  },
            {
                type: "operation",
                label: "操作",
                minWidth: 200,
                render: ({ row, doAddOrEdit, doDeleteRows, doReload, doPreview }) => (
                    <base-table-operation
                        btnList={
                            [{
                                key: "edit",
                                label: "重新计算",
                                onclick: () => doAddOrEdit(row)
                            },
                            {
                                key: "delete",
                                label: "删除",
                                onclick: () => doDeleteRows(row)
                            },
                            {
                                key: "deletion",
                                label: "部件缺失信息",
                            },
                            {
                                key: "preview",
                                label: "查看详情",
                                onclick: () => doPreview(row)
                            }
                            ]
                        }
                    />
                )
            },
        ]);

        const render = () => {
            return (
                <div>
                    <BasePageContainer flex-hidden={true} style={{ width: "100%", height: "800px", padding: "0" }}>
                        <BaseTable
                            columns={columns.value}
                            queryParamsToUrl
                            toolbar={{ layout: "search-dnamic,reload,column-setting,fullscreen" }}
                            ref={tableRef}
                            request={async ({
                                pageSize = 10,
                                current = 1,
                                ...otherSearchParams
                            }) => {
                                let tableData = {};
                                tableData = transformPageResponse(
                                    await costStandardList({
                                        pageNo: current,
                                        pageSize,
                                        ...otherSearchParams
                                    })
                                );
                                tableData.data.forEach(item => {
                                    if (item.stage == "A") {
                                        item.stage = "初始"
                                    } else if (item.stage == "B") {
                                        item.stage = "量产"
                                    } else if (item.stage == "C") {
                                        item.stage = "首批"
                                    }
                                })
                                return tableData;
                            }}
                            curdConfig={{
                                unitColSpan: 12,
                                async onDeleteRows(data) {
                                    await deleteCostStandard({ id: data.id })
                                },
                            }}
                            v-slots={{
                                toolbar: () => (
                                    <el-space>
                                        <el-button type="primary" onClick={calculate}>
                                            计算标准成本
                                        </el-button>
                                        <el-button type="success" onClick={batchCalculate}>批量计算</el-button>
                                        <el-button type="info" onClick={batchExport}>批量导出</el-button>
                                    </el-space>
                                ),
                            }}
                        />
                    </BasePageContainer>
                    <Calculate visible={visible.value} onCancelVisible={cancelVisible} tableRef={tableRef.value}></Calculate>
                    <base-dialog-form
                        ref={forecastDialogRef}
                        title={"批量计算"}
                        width={400}
                        labelWidth={0}
                        rules={{
                            filed: [
                                { required: true, message: "请上传附件", trigger: "blur" }
                            ]
                        }}
                        confirm={() => {
                            {/* forecastDialogRef.value.open(); */ }
                        }}
                        cancel={() => {
                            forecastDialogRef.value.close();
                        }}
                        v-slots={{
                            default: ({ model }) => (
                                <el-form-item label="" prop="filed">
                                    <base-upload
                                        drag
                                        multiple
                                        limit={1}
                                        on-change={onChange}
                                        v-model={model.fileIds}
                                        accept=".xls,.xlsx,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                                    >
                                        <el-icon class="el-icon-upload">
                                            <upload-filled />
                                        </el-icon>
                                        <div class="w-full">请上传文件</div>
                                    </base-upload>
                                </el-form-item>
                            )
                        }}
                    />
                </div>
            );
        };
        const calculate = () => {
            visible.value = true;
        }
        const cancelVisible = () => {
            visible.value = false;
        }
        const batchCalculate = () => {
            forecastDialogRef.value.open();
        }
        const batchExport = () => {
            console.log(tableRef.value.selectionRows, "批量导出");
        }
        const onChange = (file) => {
            console.log(file, "PPPPPPPPPPPPPPPPPPPP");

            const isExcel = file.raw.type === 'application/vnd.ms-excel' ||
                file.raw.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
            if (!isExcel) {
                ElMessage.error('只能上传Excel文件!');
                return false;
            }
            return true;
        }
        const doReload = () => { }
        return render;
    },
});
</script>
<style lang="scss" scoped></style>