新建德森项目分支

skyouc

2024-12-21 c635d78b479510ebe2556a420948effcd30a0731

 zy-asrs-admin/src/components/taskLog/showTaskDetlLog/index.vue

@@ -1,240 +1,240 @@
<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 ShowOrderDetlLogComponent from '@/components/orderDetlLog/show.vue';
const context = getCurrentInstance()?.appContext.config.globalProperties;

const router = useRouter();

const TABLE_KEY = 'table-locDetl';

let tableData = ref([]);
let open = ref(false);
const taskId = ref(null);
const taskInfo = ref({
    taskNo: '',
    taskSts$: '',
    taskType$: '',
});
const showWidth = ref("60%")

const showOrderDetlChild = ref(null)
getColumns();

const {
    getColumnSearchProps,
} = useTableSearch();

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

state.columns = [
    {
        title: '#',
        dataIndex: '_id',
        width: 60,
        ellipsis: true,
    },
    {
        title: formatMessage('db.man_task_detl.task_no', '任务编号'),
        dataIndex: 'taskNo',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('taskNo'),
    },
    {
        title: formatMessage('db.man_task_detl.matnr', '商品编号'),
        dataIndex: ['mat$', 'matnr'],
        width: 140,
        ellipsis: true,
    },
    {
        title: formatMessage('db.man_task_detl.maktx', '商品名称'),
        dataIndex: ['mat$', 'maktx'],
        width: 140,
        ellipsis: true,
    },
    {
        title: formatMessage('db.man_task_detl.anfme', '数量'),
        dataIndex: 'anfme',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('anfme'),
    },
    {
        title: formatMessage('db.man_task_detl.stock', '库存'),
        dataIndex: 'stock',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('stock'),
    },
    {
        title: formatMessage('db.man_task_detl.batch', '批号'),
        dataIndex: 'batch',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('batch'),
    },
    {
        title: formatMessage('db.man_task_detl.barcode', '托盘码'),
        dataIndex: 'barcode',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('barcode'),
    },
    {
        title: formatMessage('db.man_task_detl.order_no', '订单编号'),
        dataIndex: 'orderNo',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('orderNo'),
    },
];

const fieldList = [];
//加载扩展字段
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,
            })

            fieldList.push(item.name);
        })

        // 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 handleOk = () => {
    open.value = false;
}

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

watch(taskId, (newVal, oldVal) => {
    if (newVal != null) {
        get("/api/taskDetlLog/taskId/" + newVal, {}).then((resp) => {
            let result = resp.data;
            let index = 1;
            let tmp = [];
            result.data.forEach((item) => {
                item['_id'] = index++;
                tmp.push(item)
            })
            tableData.value = tmp;
        })

        get("/api/taskLog/" + newVal, {}).then((resp) => {
            let result = resp.data;
            taskInfo.value = result.data;
        })
    }
})

const openOrderDetl = (record) => {
    showOrderDetlChild.value.openDetl = true;
    showOrderDetlChild.value.orderId = record.orderId;
    showOrderDetlChild.value.showWidth = '55%'
}

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

</script>

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

<template>
    <div>
        <a-modal v-model:open="open" :width="showWidth" @ok="handleOk" @cancel="handleCancel">
            <div class="component-header">
                <div>
                    <h3>
                        任务编号：{{ taskInfo.taskNo }}
                    </h3>
                    <h3>
                        任务状态：{{ taskInfo.taskSts$ }}
                    </h3>
                    <h3>
                        任务类型：{{ taskInfo.taskType$ }}
                    </h3>
                </div>
                <div class="qrcode">
                    <a-qrcode :value="taskInfo.taskNo" :size="100" :bordered="false" />
                </div>
            </div>
            <a-table :data-source="tableData" :defaultExpandAllRows="false" :key="TABLE_KEY" rowKey="id"
                :scroll="{ y: 768 }" :columns="state.columns">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'orderNo'">
                        <a-button type="link" @click="openOrderDetl(record)">{{ text }}</a-button>
                    </template>
                </template>
            </a-table>
        </a-modal>

        <ShowOrderDetlLogComponent ref="showOrderDetlChild" />
    </div>
</template>

<style>
.component-header {
    display: flex;
}

.component-header>div {
    flex: 1;
}

.qrcode {
    display: flex;
    justify-content: flex-end;
    margin-right: 30px;
}
</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 ShowOrderDetlLogComponent from '@/components/orderDetlLog/show.vue';

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



const router = useRouter();



const TABLE_KEY = 'table-locDetl';



let tableData = ref([]);

let open = ref(false);

const taskId = ref(null);

const taskInfo = ref({

    taskNo: '',

    taskSts$: '',

    taskType$: '',

});

const showWidth = ref("60%")



const showOrderDetlChild = ref(null)

getColumns();



const {

    getColumnSearchProps,

} = useTableSearch();



const state = reactive({

    selectedRowKeys: [],

    loading: false,

    columns: [],

});



state.columns = [

    {

        title: '#',

        dataIndex: '_id',

        width: 60,

        ellipsis: true,

    },

    {

        title: formatMessage('db.man_task_detl.task_no', '任务编号'),

        dataIndex: 'taskNo',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('taskNo'),

    },

    {

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

        dataIndex: ['mat$', 'matnr'],

        width: 140,

        ellipsis: true,

    },

    {

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

        dataIndex: ['mat$', 'maktx'],

        width: 140,

        ellipsis: true,

    },

    {

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

        dataIndex: 'anfme',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('anfme'),

    },

    {

        title: formatMessage('db.man_task_detl.stock', '库存'),

        dataIndex: 'stock',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('stock'),

    },

    {

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

        dataIndex: 'batch',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('batch'),

    },

    {

        title: formatMessage('db.man_task_detl.barcode', '托盘码'),

        dataIndex: 'barcode',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('barcode'),

    },

    {

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

        dataIndex: 'orderNo',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('orderNo'),

    },

];



const fieldList = [];

//加载扩展字段

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,

            })



            fieldList.push(item.name);

        })



        // 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 handleOk = () => {

    open.value = false;

}



const handleCancel = () => {

    open.value = false;

    taskId.value = null;

}



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

    if (newVal != null) {

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

            let result = resp.data;

            let index = 1;

            let tmp = [];

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

                item['_id'] = index++;

                tmp.push(item)

            })

            tableData.value = tmp;

        })



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

            let result = resp.data;

            taskInfo.value = result.data;

        })

    }

})



const openOrderDetl = (record) => {

    showOrderDetlChild.value.openDetl = true;

    showOrderDetlChild.value.orderId = record.orderId;

    showOrderDetlChild.value.showWidth = '55%'

}



defineExpose({

    tableData,

    taskId,

    open,

    showWidth,

})



</script>



<script>

export default {

    name: 'showTaskDetlLogComponent'

}

</script>



<template>

    <div>

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

            <div class="component-header">

                <div>

                    <h3>

                        任务编号：{{ taskInfo.taskNo }}

                    </h3>

                    <h3>

                        任务状态：{{ taskInfo.taskSts$ }}

                    </h3>

                    <h3>

                        任务类型：{{ taskInfo.taskType$ }}

                    </h3>

                </div>

                <div class="qrcode">

                    <a-qrcode :value="taskInfo.taskNo" :size="100" :bordered="false" />

                </div>

            </div>

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

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

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

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

                        <a-button type="link" @click="openOrderDetl(record)">{{ text }}</a-button>

                    </template>

                </template>

            </a-table>

        </a-modal>



        <ShowOrderDetlLogComponent ref="showOrderDetlChild" />

    </div>

</template>



<style>

.component-header {

    display: flex;

}



.component-header>div {

    flex: 1;

}



.qrcode {

    display: flex;

    justify-content: flex-end;

    margin-right: 30px;

}

</style>