新建德森项目分支

skyouc

2024-12-21 c635d78b479510ebe2556a420948effcd30a0731

 zy-asrs-admin/src/components/locDetl/selectLocDetl/index.vue

@@ -1,263 +1,270 @@
<script setup>
import { getCurrentInstance, ref, watch, reactive } from 'vue';
import { useRouter } from "vue-router";
import { get, post, postForm } from '@/utils/request.js'
import { message, Modal } from 'ant-design-vue';
import { logout } from '@/config.js';
import { formatMessage } from '@/utils/localeUtils.js';
import useTableSearch from '@/utils/tableUtils.jsx';
const context = getCurrentInstance()?.appContext.config.globalProperties;

const router = useRouter();

const emit = defineEmits(['handleOk'])

const TABLE_KEY = 'table-mat';
let currentPage = 1;
let pageSize = 10;
let tableData = ref([]);
let selectedData = ref([]);
const open = ref(false);
const reload = ref(false);
const searchInput = ref("")

const showWidth = ref("60%")

const {
    getColumnSearchProps,
} = useTableSearch();

const state = reactive({
    selectedRowKeys: [],
    loading: false,
    columns: [],
});
const onSelectChange = (selectedRowKeys) => {
    // console.log('selectedRowKeys changed: ', selectedRowKeys);
    state.selectedRowKeys = selectedRowKeys;
    selectedData.value = selectedRowKeys;
};

getColumns();
getPage();

state.columns = [
    {
        title: formatMessage('db.man_loc_detl.loc_no', '库位号'),
        dataIndex: 'locNo',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('locNo'),
    },
    {
        title: formatMessage('db.man_loc_detl.mat_id', '商品'),
        dataIndex: 'matId$',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('matId$'),
    },
    {
        title: formatMessage('db.man_loc_detl.matnr', '商品编号'),
        dataIndex: 'matnr',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('matnr'),
    },
    {
        title: formatMessage('db.man_loc_detl.order_no', '订单号'),
        dataIndex: 'orderNo',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('orderNo'),
    },
    {
        title: formatMessage('db.man_loc_detl.batch', '批号'),
        dataIndex: 'batch',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('batch'),
    },
    {
        title: formatMessage('db.man_loc_detl.anfme', '数量'),
        dataIndex: 'anfme',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('anfme'),
    },
    {
        title: formatMessage('db.man_loc_detl.status', '状态'),
        dataIndex: 'status$',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('status$'),
    },
    // {
    //   title: formatMessage('db.man_loc_detl.create_time', '添加时间'),
    //   dataIndex: 'createTime$',
    //   width: 140,
    //   ellipsis: true,
    //   ...getColumnSearchProps('createTime$'),
    // },
    // {
    //   title: formatMessage('db.man_loc_detl.create_by', '添加人员'),
    //   dataIndex: 'createBy$',
    //   width: 140,
    //   ellipsis: true,
    //   ...getColumnSearchProps('createBy$'),
    // },
    {
        title: formatMessage('db.man_loc_detl.update_time', '修改时间'),
        dataIndex: 'updateTime$',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('updateTime$'),
    },
    {
        title: formatMessage('db.man_loc_detl.update_by', '修改人员'),
        dataIndex: 'updateBy$',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('updateBy$'),
    },
    {
        title: formatMessage('db.man_loc_detl.memo', '备注'),
        dataIndex: 'memo',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('memo'),
    },
];

//加载扩展字段
async function getColumns() {
    let fieldResp = await post('/api/matField/list', {
        fieldType: 1
    })
    let fieldResult = fieldResp.data;
    let tmp = state.columns;
    if (fieldResult.code == 200) {
        let data = fieldResult.data;

        data.forEach((item) => {
            tmp.push({
                title: formatMessage(item.language, item.describe),
                name: item.name,
                dataIndex: item.name,
                key: item.name,
                width: 140,
                editable: true,
            })
        })

        // tmp.push({
        //     title: formatMessage('common.operation', '操作'),
        //     name: 'oper',
        //     dataIndex: 'oper',
        //     key: 'oper',
        //     width: 140,
        // })

        state.columns = tmp;
    } else if (result.code === 401) {
        message.error(result.msg);
        logout()
    } else {
        message.error(result.msg);
    }
}

function getPage() {
    state.loading = true;

    post('/api/locDetl/outPage', {
        current: currentPage,
        pageSize: pageSize,
        condition: searchInput.value
    }).then((resp) => {
        let result = resp.data;
        if (result.code == 200) {
            let data = result.data;
            tableData.value = data.records;

            state.loading = false;
        } else if (result.code === 401) {
            message.error(result.msg);
            logout()
        } else {
            message.error(result.msg);
        }
    })
}

const handleOk = () => {
    open.value = false;
    let tmpKeys = selectedData.value;

    post('/api/locDetl/listByIds', tmpKeys).then(resp => {
        let result = resp.data;
        if (result.code == 200) {
            let tmp = result.data;
            tmp.forEach((item) => {
                item.workQty = item.anfme;
            })
            emit('handleOk', tmp)
        } else {
            message.error(result.msg);
        }
    })

    state.selectedRowKeys = []
    selectedData.value = []
}

const handleCancel = () => {
    open.value = false;
}

const onSearch = () => {
    getPage()
}

const reloadPage = () => {
    currentPage = 1;
    searchInput.value = "";
    getPage()
}

watch(reload,(newVal,oldVal) => {
    if(reload.value) {
        reloadPage()
    }
})

defineExpose({
    tableData,
    open,
    showWidth,
    reload
})

</script>

<script>
export default {
    name: 'selectLocDetlComponent'
}
</script>

<template>
    <div>
        <a-modal v-model:open="open" :width="showWidth" @ok="handleOk" @cancel="handleCancel">
            <div class="table-header">
                <a-input-search v-model:value="searchInput" :placeholder="formatMessage('page.input', '请输入')"
                    style="width: 200px;" @search="onSearch" />
            </div>
            <a-table :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
                :data-source="tableData" :defaultExpandAllRows="false" :key="TABLE_KEY" rowKey="id" :scroll="{ y: 768 }"
                :columns="state.columns" :loading="state.loading">
            </a-table>
        </a-modal>
    </div>
</template>

<style></style>
<script setup>

import { getCurrentInstance, ref, watch, reactive } from 'vue';

import { useRouter } from "vue-router";

import { get, post, postForm } from '@/utils/request.js'

import { message, Modal } from 'ant-design-vue';

import { logout } from '@/config.js';

import { formatMessage } from '@/utils/localeUtils.js';

import useTableSearch from '@/utils/tableUtils.jsx';

const context = getCurrentInstance()?.appContext.config.globalProperties;



const router = useRouter();



const emit = defineEmits(['handleOk'])



const TABLE_KEY = 'table-mat';

let currentPage = 1;

let pageSize = 10;

let tableData = ref([]);

let selectedData = ref([]);

const open = ref(false);

const reload = ref(false);

const searchInput = ref("")



const showWidth = ref("60%")



const {

    getColumnSearchProps,

} = useTableSearch();



const state = reactive({

    selectedRowKeys: [],

    loading: false,

    columns: [],

});

const onSelectChange = (selectedRowKeys) => {

    // console.log('selectedRowKeys changed: ', selectedRowKeys);

    state.selectedRowKeys = selectedRowKeys;

    selectedData.value = selectedRowKeys;

};



getColumns();

getPage();



state.columns = [

    {

        title: formatMessage('db.man_loc_detl.loc_no', '库位号'),

        dataIndex: 'locNo',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('locNo'),

    },

    {

        title: formatMessage('db.man_loc_detl.mat_id', '商品'),

        dataIndex: 'matId$',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('matId$'),

    },

    {

        title: formatMessage('db.man_loc_detl.matnr', '商品编号'),

        dataIndex: 'matnr',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('matnr'),

    },

    {

        title: formatMessage('db.man_loc_detl.order_no', '订单号'),

        dataIndex: 'orderNo',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('orderNo'),

    },

    {

        title: formatMessage('db.man_loc_detl.batch', '批号'),

        dataIndex: 'batch',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('batch'),

    },

    {

        title: formatMessage('db.man_loc_detl.anfme', '数量'),

        dataIndex: 'anfme',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('anfme'),

    },

    {

        title: formatMessage('db.man_loc_detl.freeze', '是否冻结'),

        dataIndex: 'freeze$',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('freeze$'),

    },

    {

        title: formatMessage('db.man_loc_detl.status', '状态'),

        dataIndex: 'status$',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('status$'),

    },

    // {

    //   title: formatMessage('db.man_loc_detl.create_time', '添加时间'),

    //   dataIndex: 'createTime$',

    //   width: 140,

    //   ellipsis: true,

    //   ...getColumnSearchProps('createTime$'),

    // },

    // {

    //   title: formatMessage('db.man_loc_detl.create_by', '添加人员'),

    //   dataIndex: 'createBy$',

    //   width: 140,

    //   ellipsis: true,

    //   ...getColumnSearchProps('createBy$'),

    // },

    {

        title: formatMessage('db.man_loc_detl.update_time', '修改时间'),

        dataIndex: 'updateTime$',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('updateTime$'),

    },

    {

        title: formatMessage('db.man_loc_detl.update_by', '修改人员'),

        dataIndex: 'updateBy$',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('updateBy$'),

    },

    {

        title: formatMessage('db.man_loc_detl.memo', '备注'),

        dataIndex: 'memo',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('memo'),

    },

];



//加载扩展字段

async function getColumns() {

    let fieldResp = await post('/api/matField/list', {

        fieldType: 1

    })

    let fieldResult = fieldResp.data;

    let tmp = state.columns;

    if (fieldResult.code == 200) {

        let data = fieldResult.data;



        data.forEach((item) => {

            tmp.push({

                title: formatMessage(item.language, item.describe),

                name: item.name,

                dataIndex: item.name,

                key: item.name,

                width: 140,

                editable: true,

            })

        })



        // tmp.push({

        //     title: formatMessage('common.operation', '操作'),

        //     name: 'oper',

        //     dataIndex: 'oper',

        //     key: 'oper',

        //     width: 140,

        // })



        state.columns = tmp;

    } else if (result.code === 401) {

        message.error(result.msg);

        logout()

    } else {

        message.error(result.msg);

    }

}



function getPage() {

    state.loading = true;



    post('/api/locDetl/outPage', {

        current: currentPage,

        pageSize: pageSize,

        condition: searchInput.value

    }).then((resp) => {

        let result = resp.data;

        if (result.code == 200) {

            let data = result.data;

            tableData.value = data.records;



            state.loading = false;

        } else if (result.code === 401) {

            message.error(result.msg);

            logout()

        } else {

            message.error(result.msg);

        }

    })

}



const handleOk = () => {

    open.value = false;

    let tmpKeys = selectedData.value;



    post('/api/locDetl/listByIds', tmpKeys).then(resp => {

        let result = resp.data;

        if (result.code == 200) {

            let tmp = result.data;

            tmp.forEach((item) => {

                item.workQty = item.anfme;

            })

            emit('handleOk', tmp)

        } else {

            message.error(result.msg);

        }

    })



    state.selectedRowKeys = []

    selectedData.value = []

}



const handleCancel = () => {

    open.value = false;

}



const onSearch = () => {

    getPage()

}



const reloadPage = () => {

    currentPage = 1;

    searchInput.value = "";

    getPage()

}



watch(reload, (newVal, oldVal) => {

    if (reload.value) {

        reloadPage()

    }

})



defineExpose({

    tableData,

    open,

    showWidth,

    reload

})



</script>



<script>

export default {

    name: 'selectLocDetlComponent'

}

</script>



<template>

    <div>

        <a-modal v-model:open="open" :width="showWidth" @ok="handleOk" @cancel="handleCancel">

            <div class="table-header">

                <a-input-search v-model:value="searchInput" :placeholder="formatMessage('page.input', '请输入')"

                    style="width: 200px;" @search="onSearch" />

            </div>

            <a-table :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"

                :data-source="tableData" :defaultExpandAllRows="false" :key="TABLE_KEY" rowKey="id" :scroll="{ y: 768 }"

                :columns="state.columns" :loading="state.loading">

            </a-table>

        </a-modal>

    </div>

</template>



<style></style>