新建德森项目分支

skyouc

2024-12-21 c635d78b479510ebe2556a420948effcd30a0731

 zy-asrs-admin/src/components/orderDetl/edit.vue

@@ -1,345 +1,345 @@
<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';
import { debounce } from 'lodash-es';
const context = getCurrentInstance()?.appContext.config.globalProperties;

const router = useRouter();

const TABLE_KEY = 'table-locDetl';

let tableData = ref([]);
let deleteDetlId = ref([]);
let orderId = ref(null);
let isAdd = ref(false);
getColumns();

const {
    getColumnSearchProps,
} = useTableSearch();

const state = reactive({
    selectedRowKeys: [],
    loading: false,
    columns: [],
});

let defaultColumns = [
    {
        title: '#',
        dataIndex: '_id',
        width: 60,
        ellipsis: true,
    },
    {
        title: formatMessage('db.man_loc_detl.matnr', '商品编号'),
        dataIndex: 'matnr',
        width: 140,
        ellipsis: true,
    },
    {
        title: formatMessage('db.man_loc_detl.maktx', '商品名称'),
        dataIndex: 'maktx',
        width: 140,
        ellipsis: true,
    },
    {
        title: formatMessage('db.man_loc_detl.batch', '批号'),
        dataIndex: 'batch',
        width: 140,
        ellipsis: true,
        editable: true,
    },
    {
        title: formatMessage('db.man_loc_detl.anfme', '数量'),
        dataIndex: 'anfme',
        width: 140,
        ellipsis: true,
        editable: true,
    },
    // {
    //     title: formatMessage('db.man_loc_detl.qty', '已完成数量'),
    //     dataIndex: 'qty',
    //     width: 140,
    //     ellipsis: true,
    //     editable: true,
    // },
    // {
    //     title: formatMessage('db.man_loc_detl.workQty', '作业中数量'),
    //     dataIndex: 'workQty',
    //     width: 140,
    //     ellipsis: true,
    //     editable: true,
    // },
    // {
    //     title: formatMessage('db.man_loc_detl.memo', '备注'),
    //     dataIndex: 'memo',
    //     width: 140,
    //     ellipsis: true,
    //     editable: true,
    // },
];

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

        if (!isAdd.value) {
            tmp.push({
                title: formatMessage('db.man_loc_detl.qty', '已完成数量'),
                dataIndex: 'qty',
                width: 140,
                ellipsis: true,
                editable: true,
            })

            tmp.push({
                title: formatMessage('db.man_loc_detl.workQty', '作业中数量'),
                dataIndex: 'workQty',
                width: 140,
                ellipsis: true,
                editable: true,
            })
        }

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

            fieldList.push(item.name);
        })

        tmp.push({
            title: formatMessage('db.man_loc_detl.memo', '备注'),
            dataIndex: 'memo',
            width: 140,
            ellipsis: true,
            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);
    }
}

const openAddDetl = ref(false);
const matChecked = ref([]);
const matQueryList = ref(null);
const matFetching = ref(false);
const matSelectList = ref([]);
const addDetl = () => {
    openAddDetl.value = true;
}

const handleAddDetlOk = () => {
    let origin = tableData.value;
    let index = origin.length + 1;
    matSelectList.value.forEach((item) => {
        let data = {
            _id: index++,
            matnr: item.data.matnr,
            maktx: item.data.maktx,
            batch: '',
            anfme: 0,
            qty: 0,
            workQty: 0,
            memo: ''
        };
        fieldList.forEach((field) => {
            data[field] = '';
        })
        origin.push(data)
    })
    tableData.value = origin;

    openAddDetl.value = false;
    matSelectList.value = [];
    matChecked.value = [];
}

const handleAddDetlCancel = () => {
    matSelectList.value = [];
    matChecked.value = [];
}

const handleSearch = debounce(val => {
    matQuery(val);
}, 600)

const handleSelect = (value, option) => {
    let flag = true;
    matSelectList.value.forEach((item) => {
        if (item.value == value) {
            flag = false;
        }
    })

    if (flag) {
        matSelectList.value.push(option)
    }
}

const handleDeselect = (value, option) => {
    let tmp = [];
    matSelectList.value.forEach((item) => {
        if (item.value != value) {
            tmp.push(item);
        }
    })

    matSelectList.value = tmp;
}

matQuery(null);
function matQuery(condition) {
    matFetching.value = true;
    post('/api/mat/page', {
        current: 1,
        pageSize: 10,
        condition: condition
    }).then((resp) => {
        let result = resp.data;
        let tmp = []
        result.data.records.forEach((item) => {
            tmp.push({
                value: item.matnr,
                label: item.matnr + '_' + item.maktx,
                data: item
            })
        })
        matQueryList.value = tmp;
        matFetching.value = false;
    })
}

const handleDel = (record) => {
    let tmp = [];
    tableData.value.forEach((item) => {
        if (item._id != record._id) {
            tmp.push(item);
        }
    })

    //重建索引
    let index = 1;
    tmp.forEach((item) => {
        item._id = index++;
    })

    if (record.detlId != undefined) {
        deleteDetlId.value.push(record.detlId);
    }

    tableData.value = tmp;
}

watch(orderId, (newVal, oldVal) => {
    if (newVal == undefined || newVal == null) {
        tableData.value = [];
        getColumns()
        return;
    }

    get("/api/orderDetl/orderId/" + newVal, {}).then((resp) => {
        let result = resp.data;
        let index = 1;
        let tmp = [];
        result.data.forEach((item) => {
            let data = {
                _id: index++,
                detlId: item.id,
                matnr: item.mat$.matnr,
                maktx: item.mat$.maktx,
                batch: item.batch,
                anfme: item.anfme,
                qty: item.qty,
                workQty: item.workQty,
                memo: item.memo
            };
            fieldList.forEach((field) => {
                data[field] = item[field];
            })
            tmp.push(data)
        })
        tableData.value = tmp;
    })

})

defineExpose({
    tableData,
    orderId,
    deleteDetlId,
    isAdd,
})

</script>

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

<template>
    <div>
        <div class="table-header">
            <a-button @click="addDetl()" type="primary">{{ formatMessage('page.add', '添加明细') }}</a-button>
        </div>
        <a-table :data-source="tableData" :defaultExpandAllRows="false" :key="TABLE_KEY" rowKey="id"
            :scroll="{ y: 768 }" :columns="state.columns">
            <template #bodyCell="{ column, record, index }">
                <template v-if="column.dataIndex === 'oper'">
                    <div style="display: flex;justify-content: space-evenly;">
                        <a-button type="link" danger @click="handleDel(record)">{{ formatMessage('page.delete', '删除')
                            }}</a-button>
                    </div>
                </template>

                <template v-if="column.editable">
                    <a-input v-model:value="record[column.dataIndex]" />
                </template>
            </template>
        </a-table>

        <a-modal v-model:open="openAddDetl" :title="formatMessage('component.orderDetl.edit.addDetl', '添加明细')"
            @ok="handleAddDetlOk" @cancel="handleAddDetlCancel">
            <a-select v-model:value="matChecked" :options="matQueryList" mode="multiple"
                :placeholder="formatMessage('component.orderDetl.edit.selectMat', '请选择物料')" @search="handleSearch"
                :filter-option="false" :not-found-content="matFetching ? undefined : null" @select="handleSelect"
                @deselect="handleDeselect"></a-select>
        </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';

import { debounce } from 'lodash-es';

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



const router = useRouter();



const TABLE_KEY = 'table-locDetl';



let tableData = ref([]);

let deleteDetlId = ref([]);

let orderId = ref(null);

let isAdd = ref(false);

getColumns();



const {

    getColumnSearchProps,

} = useTableSearch();



const state = reactive({

    selectedRowKeys: [],

    loading: false,

    columns: [],

});



let defaultColumns = [

    {

        title: '#',

        dataIndex: '_id',

        width: 60,

        ellipsis: true,

    },

    {

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

        dataIndex: 'matnr',

        width: 140,

        ellipsis: true,

    },

    {

        title: formatMessage('db.man_loc_detl.maktx', '商品名称'),

        dataIndex: 'maktx',

        width: 140,

        ellipsis: true,

    },

    {

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

        dataIndex: 'batch',

        width: 140,

        ellipsis: true,

        editable: true,

    },

    {

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

        dataIndex: 'anfme',

        width: 140,

        ellipsis: true,

        editable: true,

    },

    // {

    //     title: formatMessage('db.man_loc_detl.qty', '已完成数量'),

    //     dataIndex: 'qty',

    //     width: 140,

    //     ellipsis: true,

    //     editable: true,

    // },

    // {

    //     title: formatMessage('db.man_loc_detl.workQty', '作业中数量'),

    //     dataIndex: 'workQty',

    //     width: 140,

    //     ellipsis: true,

    //     editable: true,

    // },

    // {

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

    //     dataIndex: 'memo',

    //     width: 140,

    //     ellipsis: true,

    //     editable: true,

    // },

];



const fieldList = [];

//加载扩展字段

async function getColumns() {

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

        fieldType: 1

    })

    let fieldResult = fieldResp.data;

    let tmp = defaultColumns;

    if (fieldResult.code == 200) {

        let data = fieldResult.data;



        if (!isAdd.value) {

            tmp.push({

                title: formatMessage('db.man_loc_detl.qty', '已完成数量'),

                dataIndex: 'qty',

                width: 140,

                ellipsis: true,

                editable: true,

            })



            tmp.push({

                title: formatMessage('db.man_loc_detl.workQty', '作业中数量'),

                dataIndex: 'workQty',

                width: 140,

                ellipsis: true,

                editable: true,

            })

        }



        data.forEach((item) => {

            tmp.push({

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

                name: item.name,

                dataIndex: item.name,

                key: item.name,

                width: 140,

                editable: true,

            })



            fieldList.push(item.name);

        })



        tmp.push({

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

            dataIndex: 'memo',

            width: 140,

            ellipsis: true,

            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);

    }

}



const openAddDetl = ref(false);

const matChecked = ref([]);

const matQueryList = ref(null);

const matFetching = ref(false);

const matSelectList = ref([]);

const addDetl = () => {

    openAddDetl.value = true;

}



const handleAddDetlOk = () => {

    let origin = tableData.value;

    let index = origin.length + 1;

    matSelectList.value.forEach((item) => {

        let data = {

            _id: index++,

            matnr: item.data.matnr,

            maktx: item.data.maktx,

            batch: '',

            anfme: 0,

            qty: 0,

            workQty: 0,

            memo: ''

        };

        fieldList.forEach((field) => {

            data[field] = '';

        })

        origin.push(data)

    })

    tableData.value = origin;



    openAddDetl.value = false;

    matSelectList.value = [];

    matChecked.value = [];

}



const handleAddDetlCancel = () => {

    matSelectList.value = [];

    matChecked.value = [];

}



const handleSearch = debounce(val => {

    matQuery(val);

}, 600)



const handleSelect = (value, option) => {

    let flag = true;

    matSelectList.value.forEach((item) => {

        if (item.value == value) {

            flag = false;

        }

    })



    if (flag) {

        matSelectList.value.push(option)

    }

}



const handleDeselect = (value, option) => {

    let tmp = [];

    matSelectList.value.forEach((item) => {

        if (item.value != value) {

            tmp.push(item);

        }

    })



    matSelectList.value = tmp;

}



matQuery(null);

function matQuery(condition) {

    matFetching.value = true;

    post('/api/mat/page', {

        current: 1,

        pageSize: 10,

        condition: condition

    }).then((resp) => {

        let result = resp.data;

        let tmp = []

        result.data.records.forEach((item) => {

            tmp.push({

                value: item.matnr,

                label: item.matnr + '_' + item.maktx,

                data: item

            })

        })

        matQueryList.value = tmp;

        matFetching.value = false;

    })

}



const handleDel = (record) => {

    let tmp = [];

    tableData.value.forEach((item) => {

        if (item._id != record._id) {

            tmp.push(item);

        }

    })



    //重建索引

    let index = 1;

    tmp.forEach((item) => {

        item._id = index++;

    })



    if (record.detlId != undefined) {

        deleteDetlId.value.push(record.detlId);

    }



    tableData.value = tmp;

}



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

    if (newVal == undefined || newVal == null) {

        tableData.value = [];

        getColumns()

        return;

    }



    get("/api/orderDetl/orderId/" + newVal, {}).then((resp) => {

        let result = resp.data;

        let index = 1;

        let tmp = [];

        result.data.forEach((item) => {

            let data = {

                _id: index++,

                detlId: item.id,

                matnr: item.mat$.matnr,

                maktx: item.mat$.maktx,

                batch: item.batch,

                anfme: item.anfme,

                qty: item.qty,

                workQty: item.workQty,

                memo: item.memo

            };

            fieldList.forEach((field) => {

                data[field] = item[field];

            })

            tmp.push(data)

        })

        tableData.value = tmp;

    })



})



defineExpose({

    tableData,

    orderId,

    deleteDetlId,

    isAdd,

})



</script>



<script>

export default {

    name: 'orderDetlComponent'

}

</script>



<template>

    <div>

        <div class="table-header">

            <a-button @click="addDetl()" type="primary">{{ formatMessage('page.add', '添加明细') }}</a-button>

        </div>

        <a-table :data-source="tableData" :defaultExpandAllRows="false" :key="TABLE_KEY" rowKey="id"

            :scroll="{ y: 768 }" :columns="state.columns">

            <template #bodyCell="{ column, record, index }">

                <template v-if="column.dataIndex === 'oper'">

                    <div style="display: flex;justify-content: space-evenly;">

                        <a-button type="link" danger @click="handleDel(record)">{{ formatMessage('page.delete', '删除')

                            }}</a-button>

                    </div>

                </template>



                <template v-if="column.editable">

                    <a-input v-model:value="record[column.dataIndex]" />

                </template>

            </template>

        </a-table>



        <a-modal v-model:open="openAddDetl" :title="formatMessage('component.orderDetl.edit.addDetl', '添加明细')"

            @ok="handleAddDetlOk" @cancel="handleAddDetlCancel">

            <a-select v-model:value="matChecked" :options="matQueryList" mode="multiple"

                :placeholder="formatMessage('component.orderDetl.edit.selectMat', '请选择物料')" @search="handleSearch"

                :filter-option="false" :not-found-content="matFetching ? undefined : null" @select="handleSelect"

                @deselect="handleDeselect"></a-select>

        </a-modal>

    </div>

</template>



<style></style>