VistarStarDataIntegration/admin.net.pro/Web/src/views/processManagement/changeNoticeEcn/index.vue

<template>
    <div class="changeNoticeEcn-container">
        <el-card shadow="hover"
            :body-style="{ padding: '20px 20px 16px 10px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
            <el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true"
                label-width="auto" style="flex: 1 1 0%" @submit.prevent="handleQuery">
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="12" :md="8" :lg="5" :xl="6" class="mb5">
                        <el-form-item label="物料编码" prop="_System_objNBS">
                            <el-input v-model="state.queryParams._System_objNBS" placeholder="物料编码" clearable
                                @keyup.enter.native="handleQuery" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="5" :xl="6" class="mb5">
                        <el-form-item label="有效日期" prop="fld004693">
                            <el-date-picker type="daterange" v-model="state.queryParams.fld004693Range"
                                value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期"
                                :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" unlink-panels />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5">
                        <el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'changeNoticeEcn/page'"
                            :loading="options.loading"> 查询 </el-button>
                        <el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>

        <el-card class="full-table" shadow="hover" style="margin-top: 5px">
            <vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
                <template #toolbar_tools>
                    <el-button style="position: absolute; left: 0" icon="ele-Promotion" size="small" text=""
                        type="success" @click="batchSyncToSAP" v-auth="'changeNoticeEcn/batchSyncToSAP'"> 批量同步到SAP
                    </el-button>
                </template>
                <template #row_buttons="{ row }">

                    <el-tooltip content="同步到ERP" placement="top">
                        <el-button icon="ele-Promotion" size="small" text="" type="success" @click="syncToSAP(row)"
                            v-auth="'productManagement/syncToSAP'"
                            v-if="row.fld005292 == 'A' && row._System_CurrentStage == '结束'"> 同步到SAP </el-button>
                    </el-tooltip>
                </template>
            </vxe-grid>
        </el-card>

    </div>
</template>

<script lang="ts" setup name="changeNoticeEcn">
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from "element-plus";
import { auth } from '/@/utils/authFunction';

import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage';

import { formatDate } from '/@/utils/formatTime';
import { PageChangeNoticeEcn, SyncToSAPChangeNoticeEcn, BatchSyncToSAPChangeNoticeEcn } from '/@/api/processManagement/changeNoticeEcn';
import { disable } from 'ol/rotationconstraint';

const xGrid = ref<VxeGridInstance>();

// 变量
const state = reactive({
    queryParams: {
        searchKey: undefined,
        _System_objNBS: undefined,
        fld004693: undefined,
        fld004693Range: undefined,
    },
    localPageParam: {
        pageSize: 50 as number,
        defaultSort: { field: 'createTime', order: 'asc', descStr: 'desc' },
    },
    visible: false,
    title: '',
});

// 本地存储参数
const localPageParamKey = 'localPageParam:changeNoticeEcn';

// 表格参数配置
const options = useVxeTable(
    {
        id: 'changeNoticeEcn',
        name: '变更通知ECN',
        columns: [
            { type: 'checkbox', title: '', width: 60 },
            { type: 'seq', title: '序号', width: 60 },
            { field: '_System_objNBS', title: 'ECN编号', minWidth: 100, showOverflow: 'tooltip', sortable: false },
            { field: '_System_objDescription', title: '变更原因', minWidth: 100, showOverflow: 'tooltip', sortable: false },
            {field: 'fld004693', title: '有效日期', minWidth: 100, showOverflow: 'tooltip', sortable: false },
            { field: '_System_CurrentStage', title: '_System_CurrentStage', minWidth: 100, showOverflow: 'tooltip', sortable: false },
            { field: 'fld005294', title: '物料同步状态', minWidth: 100, showOverflow: 'tooltip', sortable: false },
            { field: 'fld005293', title: '物料同步时间', minWidth: 100, showOverflow: 'tooltip', sortable: false },
            { field: 'fld005292', title: '物料同步标识', minWidth: 100, showOverflow: 'tooltip', sortable: false },
            { field: 'fld005295', title: '物料同步信息', minWidth: 100, showOverflow: 'tooltip', sortable: false },

            { title: '操作', fixed: 'right', width: 300, showOverflow: true, slots: { default: 'row_buttons' } },
        ],
    },
    // vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
    {
        // 代理配置
        proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
        // 排序配置
        sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
        // 分页配置
        pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
        // 工具栏配置
        toolbarConfig: { export: false },
        // 行设置
        // rowConfig: { height: 80 },
    }
);

// 页面初始化
onMounted(() => {
});

// 查询api
const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
    const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' });
    var data = PageChangeNoticeEcn(params)
    return data;
};

// 查询操作
const handleQuery = async (reset = false) => {
    options.loading = true;
    await xGrid.value?.commitProxy('query');
    options.loading = false;
};

// 重置操作
const resetQuery = async () => {
    state.queryParams.searchKey = undefined,
        state.queryParams._System_objNBS = undefined,
        state.queryParams.fld004693 = undefined,
        await xGrid.value?.commitProxy('reload');
};



// 表格事件
const gridEvents: VxeGridListeners = {
    // 只对 pager-config 配置时有效，分页发生改变时会触发该事件
    async pageChange({ pageSize }) {
        state.localPageParam.pageSize = pageSize;
        Local.set(localPageParamKey, state.localPageParam);
    },
    // 当排序条件发生变化时会触发该事件
    async sortChange({ field, order }) {
        state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
        Local.set(localPageParamKey, state.localPageParam);
    },
};

// 同步到SAP
const syncToSAP = async (row: any) => {
    options.loading = true;
    ElMessageBox.confirm(`确定要同步物料吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(async () => {
            var data = await SyncToSAPChangeNoticeEcn(row);
            await handleQuery();
            if (data.data.result.code == "成功") {
                ElMessage.success("同步成功");
            } else {
                ElMessage.error("同步失败");
            }
        })
        .catch(() => { });
    options.loading = false;

};

</script>