|  |  | 
 |  |  | <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 TABLE_KEY = 'table-locDetl'; | 
 |  |  |  | 
 |  |  | let tableData = ref([]); | 
 |  |  | let openDetl = ref(false); | 
 |  |  | const orderId = ref(null); | 
 |  |  | const orderInfo = ref({ | 
 |  |  |     orderInfo: '', | 
 |  |  |     orderType$: '', | 
 |  |  |     orderSettle$: '', | 
 |  |  | }); | 
 |  |  |  | 
 |  |  | const showWidth = ref("60%") | 
 |  |  | getColumns(); | 
 |  |  |  | 
 |  |  | const { | 
 |  |  |     getColumnSearchProps, | 
 |  |  | } = useTableSearch(); | 
 |  |  |  | 
 |  |  | const state = reactive({ | 
 |  |  |     selectedRowKeys: [], | 
 |  |  |     loading: false, | 
 |  |  |     columns: [], | 
 |  |  | }); | 
 |  |  |  | 
 |  |  | state.columns = [ | 
 |  |  |     { | 
 |  |  |         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 = 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 = () => { | 
 |  |  |     openDetl.value = false; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const handleCancel = () => { | 
 |  |  |     openDetl.value = false; | 
 |  |  |     orderId.value = null; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | watch(orderId, (newVal, oldVal) => { | 
 |  |  |     if (newVal != null) { | 
 |  |  |         get("/api/orderDetlLog/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; | 
 |  |  |         }) | 
 |  |  |  | 
 |  |  |         get("/api/orderLog/" + newVal, {}).then((resp) => { | 
 |  |  |             let result = resp.data; | 
 |  |  |             if(result.data != null) { | 
 |  |  |                 orderInfo.value = result.data; | 
 |  |  |             } | 
 |  |  |         }) | 
 |  |  |     } | 
 |  |  | }) | 
 |  |  |  | 
 |  |  | defineExpose({ | 
 |  |  |     tableData, | 
 |  |  |     orderId, | 
 |  |  |     openDetl, | 
 |  |  |     showWidth, | 
 |  |  | }) | 
 |  |  |  | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | <script> | 
 |  |  | export default { | 
 |  |  |     name: 'showOrderDetlLogComponent' | 
 |  |  | } | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | <template> | 
 |  |  |     <div> | 
 |  |  |         <a-modal v-model:open="openDetl" :width="showWidth" @ok="handleOk" @cancel="handleCancel"> | 
 |  |  |             <div class="component-header"> | 
 |  |  |                 <div> | 
 |  |  |                     <h3> | 
 |  |  |                         订单号:{{ orderInfo.orderNo }} | 
 |  |  |                     </h3> | 
 |  |  |                     <h3> | 
 |  |  |                         单据类型:{{ orderInfo.orderType$ }} | 
 |  |  |                     </h3> | 
 |  |  |                     <h3> | 
 |  |  |                         单据状态:{{ orderInfo.orderSettle$ }} | 
 |  |  |                     </h3> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="qrcode"> | 
 |  |  |                     <a-qrcode :value="orderInfo.orderNo" :size="100" :bordered="false" /> | 
 |  |  |                 </div> | 
 |  |  |             </div> | 
 |  |  |             <a-table :data-source="tableData" :defaultExpandAllRows="false" :key="TABLE_KEY" rowKey="id" | 
 |  |  |                 :scroll="{ y: 768 }" :columns="state.columns"> | 
 |  |  |             </a-table> | 
 |  |  |         </a-modal> | 
 |  |  |     </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';
 | 
 |  |  | const context = getCurrentInstance()?.appContext.config.globalProperties;
 | 
 |  |  | 
 | 
 |  |  | const router = useRouter();
 | 
 |  |  | 
 | 
 |  |  | const TABLE_KEY = 'table-locDetl';
 | 
 |  |  | 
 | 
 |  |  | let tableData = ref([]);
 | 
 |  |  | let openDetl = ref(false);
 | 
 |  |  | const orderId = ref(null);
 | 
 |  |  | const orderInfo = ref({
 | 
 |  |  |     orderInfo: '',
 | 
 |  |  |     orderType$: '',
 | 
 |  |  |     orderSettle$: '',
 | 
 |  |  | });
 | 
 |  |  | 
 | 
 |  |  | const showWidth = ref("60%")
 | 
 |  |  | getColumns();
 | 
 |  |  | 
 | 
 |  |  | const {
 | 
 |  |  |     getColumnSearchProps,
 | 
 |  |  | } = useTableSearch();
 | 
 |  |  | 
 | 
 |  |  | const state = reactive({
 | 
 |  |  |     selectedRowKeys: [],
 | 
 |  |  |     loading: false,
 | 
 |  |  |     columns: [],
 | 
 |  |  | });
 | 
 |  |  | 
 | 
 |  |  | state.columns = [
 | 
 |  |  |     {
 | 
 |  |  |         title: '#',
 | 
 |  |  |         dataIndex: '_id',
 | 
 |  |  |         width: 60,
 | 
 |  |  |         ellipsis: true,
 | 
 |  |  |     },
 | 
 |  |  |     {
 | 
 |  |  |         title: formatMessage('db.man_loc_detl.matnr', '商品编号'),
 | 
 |  |  |         dataIndex: 'matnr',
 | 
 |  |  |         width: 180,
 | 
 |  |  |         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 = 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 = () => {
 | 
 |  |  |     openDetl.value = false;
 | 
 |  |  | }
 | 
 |  |  | 
 | 
 |  |  | const handleCancel = () => {
 | 
 |  |  |     openDetl.value = false;
 | 
 |  |  |     orderId.value = null;
 | 
 |  |  | }
 | 
 |  |  | 
 | 
 |  |  | watch(orderId, (newVal, oldVal) => {
 | 
 |  |  |     if (newVal != null) {
 | 
 |  |  |         get("/api/orderDetlLog/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;
 | 
 |  |  |         })
 | 
 |  |  | 
 | 
 |  |  |         get("/api/orderLog/" + newVal, {}).then((resp) => {
 | 
 |  |  |             let result = resp.data;
 | 
 |  |  |             if(result.data != null) {
 | 
 |  |  |                 orderInfo.value = result.data;
 | 
 |  |  |             }
 | 
 |  |  |         })
 | 
 |  |  |     }
 | 
 |  |  | })
 | 
 |  |  | 
 | 
 |  |  | defineExpose({
 | 
 |  |  |     tableData,
 | 
 |  |  |     orderId,
 | 
 |  |  |     openDetl,
 | 
 |  |  |     showWidth,
 | 
 |  |  | })
 | 
 |  |  | 
 | 
 |  |  | </script>
 | 
 |  |  | 
 | 
 |  |  | <script>
 | 
 |  |  | export default {
 | 
 |  |  |     name: 'showOrderDetlLogComponent'
 | 
 |  |  | }
 | 
 |  |  | </script>
 | 
 |  |  | 
 | 
 |  |  | <template>
 | 
 |  |  |     <div>
 | 
 |  |  |         <a-modal v-model:open="openDetl" :width="showWidth" @ok="handleOk" @cancel="handleCancel">
 | 
 |  |  |             <div class="component-header">
 | 
 |  |  |                 <div>
 | 
 |  |  |                     <h3>
 | 
 |  |  |                         订单号:{{ orderInfo.orderNo }}
 | 
 |  |  |                     </h3>
 | 
 |  |  |                     <h3>
 | 
 |  |  |                         单据类型:{{ orderInfo.orderType$ }}
 | 
 |  |  |                     </h3>
 | 
 |  |  |                     <h3>
 | 
 |  |  |                         单据状态:{{ orderInfo.orderSettle$ }}
 | 
 |  |  |                     </h3>
 | 
 |  |  |                 </div>
 | 
 |  |  |                 <div class="qrcode">
 | 
 |  |  |                     <a-qrcode :value="orderInfo.orderNo" :size="100" :bordered="false" />
 | 
 |  |  |                 </div>
 | 
 |  |  |             </div>
 | 
 |  |  |             <a-table :data-source="tableData" :defaultExpandAllRows="false" :key="TABLE_KEY" rowKey="id"
 | 
 |  |  |                 :scroll="{ y: 768 }" :columns="state.columns">
 | 
 |  |  |             </a-table>
 | 
 |  |  |         </a-modal>
 | 
 |  |  |     </div>
 | 
 |  |  | </template>
 | 
 |  |  | 
 | 
 |  |  | <style>
 | 
 |  |  | .component-header {
 | 
 |  |  |     display: flex;
 | 
 |  |  | }
 | 
 |  |  | 
 | 
 |  |  | .component-header>div {
 | 
 |  |  |     flex: 1;
 | 
 |  |  | }
 | 
 |  |  | 
 | 
 |  |  | .qrcode {
 | 
 |  |  |     display: flex;
 | 
 |  |  |     justify-content: flex-end;
 | 
 |  |  |     margin-right: 30px;
 | 
 |  |  | }
 | 
 |  |  | </style>
 |