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