\u6838\u5fc3\u529f\u80fd：\u5f39\u7a97\u57fa\u7840\u4ea4\u4e92\u3001\u53cc\u5217\u8868\u52fe\u9009\/\u5220\u9664\u8054\u52a8\u3001\u52a0\u5de5\u4ef6\u626b\u7801\u68c0\u7d22\u3001\u641c\u7d22\u5206\u9875\u3001\u9886\u53d6\u6570\u91cf\u6821\u9a8c\u3001\u4e00\u952e\u63d0\u4ea4\u3001\u4e3b\u5217\u8868\u5237\u65b0，\u65e0\u591a\u4f59\u7b2c\u4e09\u65b9\u4f9d\u8d56，\u4ec5\u9700\u9002\u914d\u9879\u76ee\u63a5\u53e3\u5373\u53ef\u590d\u7528\u3002<\/p>\n
\u672c\u6587\u6863\u8be6\u7ec6\u9610\u8ff0\u4e86\u57fa\u4e8e Vue2\u3001Element UI \u5b9e\u73b0\u7684\u529f\u80fd\u65b9\u6848\u3002\u65b9\u6848\u652f\u6301\u5f39\u7a97\u4ea4\u4e92\u3001\u53cc\u5217\u8868\u52fe\u9009\u8054\u52a8\u3001\u626b\u7801\u5feb\u901f\u68c0\u7d22\u3001\u6570\u91cf\u6821\u9a8c\u3001\u5206\u9875\u67e5\u8be2\u53ca\u63a5\u53e3\u63d0\u4ea4，\u4ea4\u4e92\u6d41\u7545\u3001\u9002\u914d\u6027\u5f3a，\u53ef\u76f4\u63a5\u96c6\u6210\u5230\u9879\u76ee\u4e2d\u4f7f\u7528\u3002<\/p>\n
\u6838\u5fc3\u529f\u80fd：\u5f39\u7a97\u57fa\u7840\u4ea4\u4e92\u3001\u53cc\u5217\u8868\u52fe\u9009\/\u5220\u9664\u8054\u52a8\u3001\u52a0\u5de5\u4ef6\u626b\u7801\u68c0\u7d22\u3001\u641c\u7d22\u5206\u9875\u3001\u9886\u53d6\u6570\u91cf\u6821\u9a8c\u3001\u4e00\u952e\u63d0\u4ea4\u3001\u4e3b\u5217\u8868\u5237\u65b0，\u9002\u914d\u9879\u76ee\u73b0\u6709\u6280\u672f\u6808，\u65e0\u591a\u4f59\u7b2c\u4e09\u65b9\u4f9d\u8d56，\u4ec5\u9700\u9002\u914d\u63a5\u53e3\u5373\u53ef\u590d\u7528\u3002<\/p>\n
Vue2：\u6784\u5efa\u524d\u7aef\u7ec4\u4ef6，\u7ba1\u7406\u9875\u9762\u6570\u636e\u4e0e\u4ea4\u4e92\u903b\u8f91；<\/p>\n<\/li>\n
Element UI：\u63d0\u4f9b\u5f39\u7a97\u3001\u8868\u683c\u3001\u8868\u5355\u3001\u5206\u9875\u7b49\u57fa\u7840 UI \u7ec4\u4ef6，\u5b9e\u73b0\u9875\u9762\u5e03\u5c40\u4e0e\u4ea4\u4e92；<\/p>\n<\/li>\n<\/ul>\n
Vue2：\u6784\u5efa\u524d\u7aef\u7ec4\u4ef6，\u7ba1\u7406\u9875\u9762\u6570\u636e\u4e0e\u4ea4\u4e92\u903b\u8f91，\u5b9e\u73b0\u7ec4\u4ef6\u590d\u7528；<\/p>\n<\/li>\n
Element UI：\u63d0\u4f9b\u5f39\u7a97\u3001\u8868\u683c\u3001\u8868\u5355\u3001\u5206\u9875\u7b49\u57fa\u7840 UI \u7ec4\u4ef6，\u5b9e\u73b0\u9875\u9762\u5e03\u5c40\u4e0e\u6838\u5fc3\u4ea4\u4e92；<\/p>\n<\/li>\n
Avue：\u7b80\u5316\u8868\u5355\u6e32\u67d3，\u7528\u4e8e\u5f39\u7a97\u9876\u90e8\u9886\u53d6\u57fa\u7840\u4fe1\u606f\u5c55\u793a（\u7981\u7528\u7f16\u8f91，\u4ec5\u4f5c\u5c55\u793a）；<\/p>\n<\/li>\n
\u539f\u751f JavaScript：\u5904\u7406\u5217\u8868\u8054\u52a8\u3001\u626b\u7801\u4ea4\u4e92\u3001\u6570\u636e\u6821\u9a8c\u3001\u63a5\u53e3\u8bf7\u6c42\u56de\u8c03，\u914d\u5408 Vue \u751f\u547d\u5468\u671f\u5b9e\u73b0\u529f\u80fd\u95ed\u73af\u3002<\/p>\n<\/li>\n<\/ul>\n
\u9879\u76ee\u5df2\u96c6\u6210 Vue2\u3001Element UI\u3001Avue \u7ec4\u4ef6\u5e93，\u4e14\u5168\u5c40\u6ce8\u518c\u5b8c\u6bd5；<\/p>\n<\/li>\n
\u9879\u76ee\u5df2\u5c01\u88c5$http \u7f51\u7edc\u8bf7\u6c42\u65b9\u6cd5（\u57fa\u4e8e axios），\u652f\u6301 post \u8bf7\u6c42\u53ca\u54cd\u5e94\u62e6\u622a；<\/p>\n<\/li>\n
\u5df2\u5f15\u5165\u81ea\u5b9a\u4e49\u626b\u7801\u7ec4\u4ef6 PadScanInput，\u652f\u6301 v-model \u7ed1\u5b9a\u53ca@input \u4e8b\u4ef6\u89e6\u53d1；<\/p>\n<\/li>\n
\u540e\u7aef\u63d0\u4f9b\u5bf9\u5e94\u63a5\u53e3（\u5e93\u5b58\u67e5\u8be2\u3001\u52a0\u5de5\u4ef6\u5217\u8868\u67e5\u8be2\u3001\u9886\u6599\u63d0\u4ea4），\u8fd4\u56de\u683c\u5f0f\u7edf\u4e00（code\u3001result\u3001message）；<\/p>\n<\/li>\n
\u6d4f\u89c8\u5668\u652f\u6301：\u517c\u5bb9 Chrome\u3001Firefox\u3001Edge \u7b49\u73b0\u4ee3\u6d4f\u89c8\u5668，\u9002\u914d PC \u7aef\u53ca PAD \u7aef\u64cd\u4f5c\u3002<\/p>\n<\/li>\n<\/ul>\n
\u4ee5\u4e0b\u4ee3\u7801\u4e3a\u5b8c\u6574\u53ef\u8fd0\u884c\u7248\u672c，\u590d\u5236\u4fdd\u5b58\u4e3a dialog.vue \u6587\u4ef6，\u5f15\u5165\u9879\u76ee\u5373\u53ef\u4f7f\u7528，\u4ec5\u9700\u4fee\u6539\u63a5\u53e3\u5730\u5740\u53ca\u5b57\u6bb5\u6620\u5c04\u5373\u53ef\u9002\u914d\u5b9e\u9645\u9700\u6c42\u3002<\/p>\n
<template>
\n <el-dialog
\n :visible.sync="scanDialog.visible"
\n width="1200px"
\n :close-on-click-modal="false"
\n :append-to-body="true"
\n >
\n <!– \u5f39\u7a97\u6807\u9898\u533a：\u5c55\u793a\u9886\u53d6\u57fa\u7840\u4fe1\u606f –>
\n <div slot="title">
\n <div class="receive-form">
\n <div class="receive-form-title">\u9886\u53d6\u6570\u91cf<\/div>
\n <avue-form :option="receiveOption" v-model="receiveForm"><\/avue-form>
\n <\/div>
\n <\/div><\/p>\n
<!– \u5f39\u7a97\u5185\u5bb9\u533a：\u641c\u7d22\u8868\u5355 + \u53cc\u5217\u8868 –>
\n <div class="dialog-content">
\n <!– \u641c\u7d22\u8868\u5355 –>
\n <div class="search-form">
\n <el-form :inline="true" :model="searchForm" class="demo-form-inline">
\n <el-form-item label="\u5de5\u5355\u7f16\u53f7">
\n <el-input
\n v-model="searchForm.workOrderNo"
\n placeholder="\u8bf7\u8f93\u5165\u5de5\u5355\u7f16\u53f7"
\n ><\/el-input>
\n <\/el-form-item>
\n <el-form-item label="\u52a0\u5de5\u7f16\u7801">
\n <PadScanInput
\n v-model="searchForm.code"
\n placeholder="\u8bf7\u8f93\u5165\u52a0\u5de5\u7f16\u7801"
\n @input="handleScan"
\n ><\/PadScanInput>
\n <\/el-form-item>
\n <el-form-item>
\n <el-button type="primary" @click="handleSearch">\u67e5\u8be2<\/el-button>
\n <el-button @click="resetSearch">\u91cd\u7f6e<\/el-button>
\n <\/el-form-item>
\n <\/el-form>
\n <\/div><\/p>\n
<!– \u53cc\u5217\u8868\u5e03\u5c40：\u5de6\u4fa7\u53ef\u9009\u5217\u8868 + \u53f3\u4fa7\u5df2\u9009\u5217\u8868 –>
\n <div class="list-container">
\n <!– \u5de6\u4fa7\u53ef\u9009\u5217\u8868（\u5e26\u5206\u9875） –>
\n <div class="left-list">
\n <el-table
\n :data="leftTableData"
\n border
\n height="400"
\n @select="handleSelection"
\n @select-all="handleSelectionAll"
\n ref="leftTable"
\n >
\n <el-table-column type="selection" width="55"><\/el-table-column>
\n <el-table-column
\n prop="code"
\n label="\u52a0\u5de5\u7f16\u7801"
\n width="200"
\n ><\/el-table-column>
\n <el-table-column
\n prop="stockName"
\n label="\u4ed3\u5e93"
\n min-width="100"
\n show-overflow-tooltip
\n ><\/el-table-column>
\n <el-table-column
\n prop="rackName"
\n label="\u8d27\u4f4d"
\n min-width="100"
\n show-overflow-tooltip
\n ><\/el-table-column>
\n <\/el-table>
\n <!– \u5206\u9875\u7ec4\u4ef6 –>
\n <div class="pagination-container">
\n <el-pagination
\n @size-change="handleSizeChange"
\n @current-change="handleCurrentChange"
\n :current-page="pagination.currentPage"
\n :page-sizes="[10, 20, 30, 50]"
\n :page-size="pagination.pageSize"
\n layout="total, sizes, prev, pager, next"
\n :total="pagination.total"
\n ><\/el-pagination>
\n <\/div>
\n <\/div><\/p>\n
<!– \u53f3\u4fa7\u5df2\u9009\u5217\u8868 –>
\n <div class="right-list">
\n <el-table :data="rightTableData" border height="400">
\n <el-table-column
\n prop="code"
\n label="\u52a0\u5de5\u7f16\u7801"
\n width="200"
\n ><\/el-table-column>
\n <el-table-column
\n prop="stockName"
\n label="\u4ed3\u5e93"
\n min-width="100"
\n show-overflow-tooltip
\n ><\/el-table-column>
\n <el-table-column
\n prop="rackName"
\n label="\u8d27\u4f4d"
\n min-width="100"
\n show-overflow-tooltip
\n ><\/el-table-column>
\n <el-table-column label="\u64cd\u4f5c" width="60">
\n <template slot-scope="scope">
\n <el-button
\n type="text"
\n size="small"
\n @click="handleDelete(scope.row)"
\n >\u5220\u9664<\/el-button
\n >
\n <\/template>
\n <\/el-table-column>
\n <\/el-table>
\n <\/div>
\n <\/div>
\n <\/div><\/p>\n
<!– \u5f39\u7a97\u5e95\u90e8\u64cd\u4f5c\u6309\u94ae –>
\n <div class="dialog-footer" slot="footer">
\n <el-button @click="handleCancel">\u53d6 \u6d88<\/el-button>
\n <el-button @click="handleConfirmDialog" type="primary">\u786e \u5b9a<\/el-button>
\n <\/div>
\n <\/el-dialog>
\n<\/template><\/p>\n
<script>
\nexport default {
\n name: "Dialog",
\n data() {
\n return {
\n \/\/ \u57fa\u7840\u67e5\u8be2\u53c2\u6570
\n query: {
\n label: "\u9886\u53d6\u90e8\u4ef6",
\n },
\n \/\/ \u63d0\u4ea4\u63a5\u53e3\u6838\u5fc3\u6570\u636e
\n submitData: {
\n workOrderPartsId: "",
\n workProductCodeRecordIds: [],
\n },
\n \/\/ Avue\u8868\u5355\u914d\u7f6e（\u5c55\u793a\u9886\u53d6\u57fa\u7840\u4fe1\u606f，\u7981\u7528\u7f16\u8f91）
\n receiveOption: {
\n labelWidth: 100,
\n column: [
\n {
\n label: "\u5546\u54c1\u7f16\u7801",
\n prop: "materialNo",
\n span: 8,
\n },
\n {
\n label: "\u5546\u54c1\u540d\u79f0",
\n prop: "productName",
\n span: 8,
\n },
\n {
\n label: "\u9700\u8981\u9886\u53d6\u6570\u91cf",
\n prop: "waitReceiveNum",
\n span: 8,
\n },
\n ],
\n disabled: true, \/\/ \u7981\u7528\u8868\u5355\u7f16\u8f91
\n menuBtn: false, \/\/ \u9690\u85cfAvue\u81ea\u5e26\u64cd\u4f5c\u6309\u94ae
\n },
\n \/\/ \u9886\u53d6\u57fa\u7840\u4fe1\u606f\u8868\u5355\u6570\u636e（\u4ece\u4e3b\u5217\u8868\u5e26\u5165）
\n receiveForm: {
\n waitReceiveNum: 0,
\n materialNo: "",
\n productName: "",
\n partId: "",
\n },
\n workOrderNo: "",
\n \/\/ \u4e3b\u5217\u8868\u6570\u636e（\u5f39\u7a97\u5916\u90e8\u7684\u90e8\u4ef6\u5217\u8868）
\n tableData: [],
\n tableHead: [
\n { label: "\u5546\u54c1\u540d\u79f0", prop: "productName" },
\n { label: "\u5546\u54c1\u7f16\u7801", prop: "materialNo" },
\n { label: "\u9700\u8981\u9886\u53d6\u6570\u91cf", prop: "waitReceiveNum" },
\n { label: "\u5e93\u5b58\u6570\u91cf", prop: "stockNum" },
\n ],
\n \/\/ \u5f39\u7a97\u663e\u793a\u63a7\u5236
\n scanDialog: {
\n visible: false,
\n batchDataList: [], \/\/ \u6279\u91cf\u6570\u636e\u5217\u8868（\u5907\u7528）
\n },
\n \/\/ \u641c\u7d22\u8868\u5355\u6570\u636e
\n searchForm: {
\n workOrderNo: "",
\n code: "",
\n },
\n \/\/ \u5de6\u4fa7\u53ef\u9009\u5217\u8868\u6570\u636e
\n leftTableData: [],
\n \/\/ \u53f3\u4fa7\u5df2\u9009\u5217\u8868\u6570\u636e
\n rightTableData: [],
\n \/\/ \u5206\u9875\u53c2\u6570
\n pagination: {
\n currentPage: 1,
\n pageSize: 20,
\n total: 0,
\n },
\n };
\n },
\n methods: {
\n \/**
\n * \u6253\u5f00\u9886\u53d6\u5f39\u7a97
\n * @param {Object} row – \u4e3b\u5217\u8868\u884c\u6570\u636e（\u5305\u542b\u9886\u53d6\u57fa\u7840\u4fe1\u606f）
\n *\/
\n openScanDialog(row) {
\n \/\/ \u91cd\u7f6e\u5df2\u9009\/\u53ef\u9009\u5217\u8868
\n this.rightTableData = [];
\n this.leftTableData = [];
\n \/\/ \u8d4b\u503c\u9886\u53d6\u57fa\u7840\u4fe1\u606f
\n this.receiveForm = row;
\n \/\/ \u83b7\u53d6\u5de6\u4fa7\u53ef\u9009\u5217\u8868\u6570\u636e
\n this.getLeftTableData();
\n \/\/ \u663e\u793a\u5f39\u7a97
\n this.scanDialog.visible = true;
\n },<\/p>\n
\/**
\n * \u626b\u7801\/\u8f93\u5165\u52a0\u5de5\u4ef6\u7f16\u7801\u89e6\u53d1\u7684\u5904\u7406\u903b\u8f91
\n * @param {String} value – \u626b\u7801\/\u8f93\u5165\u7684\u7f16\u7801
\n *\/
\n async handleScan(value) {
\n if (!value) return;
\n \/\/ \u8d4b\u503c\u5230\u641c\u7d22\u8868\u5355
\n this.searchForm.code = value;
\n \/\/ \u83b7\u53d6\u5de6\u4fa7\u5217\u8868\u6570\u636e
\n await this.getLeftTableData();<\/p>\n
\/\/ \u627e\u5230\u626b\u63cf\u5230\u7684\u9879\u5e76\u81ea\u52a8\u9009\u4e2d\u3001\u6dfb\u52a0\u5230\u53f3\u4fa7\u5df2\u9009\u5217\u8868
\n const scannedItem = this.leftTableData.find(
\n (item) => item.code === value
\n );
\n if (scannedItem) {
\n \/\/ \u907f\u514d\u91cd\u590d\u6dfb\u52a0
\n const exists = this.rightTableData.some(
\n (item) => item.id === scannedItem.id
\n );
\n if (!exists) {
\n this.rightTableData.push(scannedItem);
\n }
\n \/\/ \u5ef6\u8fdf\u66f4\u65b0\u9009\u4e2d\u72b6\u6001（\u786e\u4fddDOM\u6e32\u67d3\u5b8c\u6210）
\n this.$nextTick(() => {
\n this.$refs.leftTable.toggleRowSelection(scannedItem, true);
\n });
\n }
\n },<\/p>\n
\/**
\n * \u83b7\u53d6\u4e3b\u5217\u8868\u6570\u636e（\u5f39\u7a97\u5916\u90e8\u7684\u90e8\u4ef6\u5217\u8868）
\n *\/
\n getTableData() {
\n this.$http({
\n url: `XXXXX`,
\n method: "post",
\n data: {
\n workOrderNo: this.workOrderNo,
\n },
\n }).then((res) => {
\n this.tableData = res.result.map((item) => {
\n return {
\n …item,
\n productType: item.productType,
\n };
\n });
\n \/\/ \u521d\u59cb\u5316\u6279\u91cf\u6570\u636e\u5217\u8868（\u5907\u7528）
\n this.scanDialog.batchDataList = res.result.map((item) => {
\n return {
\n partId: item.partId,
\n batchDetailList: [],
\n };
\n });
\n });
\n },<\/p>\n
\/**
\n * \u70b9\u51fb\u67e5\u8be2\u6309\u94ae\u89e6\u53d1\u7684\u641c\u7d22\u903b\u8f91
\n *\/
\n handleSearch() {
\n \/\/ \u91cd\u7f6e\u9875\u7801\u4e3a\u7b2c\u4e00\u9875
\n this.pagination.currentPage = 1;
\n \/\/ \u91cd\u65b0\u83b7\u53d6\u5de6\u4fa7\u5217\u8868\u6570\u636e
\n this.getLeftTableData();
\n },<\/p>\n
\/**
\n * \u91cd\u7f6e\u641c\u7d22\u8868\u5355
\n *\/
\n resetSearch() {
\n \/\/ \u6e05\u7a7a\u641c\u7d22\u6761\u4ef6
\n this.searchForm = {
\n workOrderNo: "",
\n code: "",
\n };
\n \/\/ \u91cd\u65b0\u67e5\u8be2
\n this.handleSearch();
\n },<\/p>\n
\/**
\n * \u83b7\u53d6\u5de6\u4fa7\u53ef\u9009\u5217\u8868\u6570\u636e（\u6838\u5fc3\u63a5\u53e3）
\n * @returns {Promise} – \u63a5\u53e3\u8bf7\u6c42Promise
\n *\/
\n getLeftTableData() {
\n return this.$http({
\n url: "XXXXX",
\n method: "post",
\n data: {
\n pageNum: this.pagination.currentPage,
\n pageSize: this.pagination.pageSize,
\n workOrderNo: this.searchForm.workOrderNo,
\n code: this.searchForm.code,
\n materialNo: this.receiveForm.materialNo, \/\/ \u5173\u8054\u5f53\u524d\u9886\u53d6\u5546\u54c1\u7f16\u7801
\n },
\n }).then((res) => {
\n this.leftTableData = res.result.list || [];
\n this.pagination.total = res.result.total || 0;<\/p>\n
\/\/ \u56de\u663e\u5df2\u9009\u72b6\u6001（\u5206\u9875\u5207\u6362\u540e\u4fdd\u6301\u9009\u4e2d）
\n this.$nextTick(() => {
\n this.leftTableData.forEach((item) => {
\n this.rightTableData.forEach((rightItem) => {
\n if (item.id === rightItem.id) {
\n this.$refs.leftTable.toggleRowSelection(item, true);
\n }
\n });
\n });
\n });
\n });
\n },<\/p>\n
\/**
\n * \u5355\u884c\u9009\u62e9\u4e8b\u4ef6（\u5de6\u4fa7\u5217\u8868\u52fe\u9009\/\u53d6\u6d88）
\n * @param {Array} selection – \u9009\u4e2d\u5217\u8868
\n * @param {Object} row – \u5f53\u524d\u884c\u6570\u636e
\n *\/
\n handleSelection(selection, row) {
\n const findIndex = this.rightTableData.findIndex(
\n (item) => item.id === row.id
\n );
\n if (findIndex === -1) {
\n \/\/ \u672a\u9009\u4e2d，\u6dfb\u52a0\u5230\u5df2\u9009\u5217\u8868
\n this.rightTableData.push(row);
\n } else {
\n \/\/ \u5df2\u9009\u4e2d，\u4ece\u5df2\u9009\u5217\u8868\u79fb\u9664
\n this.rightTableData.splice(findIndex, 1);
\n }
\n },<\/p>\n
\/**
\n * \u5168\u9009\/\u53d6\u6d88\u5168\u9009\u4e8b\u4ef6
\n * @param {Array} selection – \u9009\u4e2d\u5217\u8868
\n *\/
\n handleSelectionAll(selection) {
\n if (selection.length === 0) {
\n \/\/ \u53d6\u6d88\u5168\u9009：\u6e05\u7a7a\u5df2\u9009\u5217\u8868
\n this.leftTableData.forEach((row) => {
\n const findIndex = this.rightTableData.findIndex(
\n (item) => item.id === row.id
\n );
\n if (findIndex >= 0) {
\n this.rightTableData.splice(findIndex, 1);
\n }
\n });
\n } else {
\n \/\/ \u5168\u9009：\u6279\u91cf\u6dfb\u52a0\u5230\u5df2\u9009\u5217\u8868（\u53bb\u91cd）
\n selection.forEach((row) => {
\n const findIndex = this.rightTableData.findIndex(
\n (item) => item.id === row.id
\n );
\n if (findIndex === -1) {
\n this.rightTableData.push(row);
\n }
\n });
\n }
\n },<\/p>\n
\/**
\n * \u5220\u9664\u5df2\u9009\u884c（\u53f3\u4fa7\u5217\u8868）
\n * @param {Object} row – \u5df2\u9009\u884c\u6570\u636e
\n *\/
\n handleDelete(row) {
\n const index = this.rightTableData.findIndex((item) => item.id === row.id);
\n if (index === -1) return;
\n \/\/ \u53d6\u6d88\u5de6\u4fa7\u5bf9\u5e94\u884c\u7684\u52fe\u9009
\n this.leftTableData.forEach((item) => {
\n if (item.id === row.id) {
\n this.$refs.leftTable.toggleRowSelection(item, false);
\n }
\n });
\n \/\/ \u4ece\u5df2\u9009\u5217\u8868\u79fb\u9664
\n this.rightTableData.splice(index, 1);
\n },<\/p>\n
\/**
\n * \u5206\u9875\u6761\u6570\u53d8\u5316
\n * @param {Number} val – \u6bcf\u9875\u6761\u6570
\n *\/
\n handleSizeChange(val) {
\n this.pagination.pageSize = val;
\n this.getLeftTableData();
\n },<\/p>\n
\/**
\n * \u9875\u7801\u53d8\u5316
\n * @param {Number} val – \u5f53\u524d\u9875\u7801
\n *\/
\n handleCurrentChange(val) {
\n this.pagination.currentPage = val;
\n this.getLeftTableData();
\n },<\/p>\n
\/**
\n * \u53d6\u6d88\u5f39\u7a97
\n *\/
\n handleCancel() {
\n this.scanDialog.visible = false;
\n },<\/p>\n
\/**
\n * \u786e\u5b9a\u9886\u53d6\u63d0\u4ea4
\n *\/
\n handleConfirmDialog() {
\n try {
\n this.$loading();
\n \/\/ \u63d0\u4ea4\u9886\u6599\u63a5\u53e3
\n this.$http({
\n url: "XXXXXXXX",
\n method: "post",
\n data: {
\n workOrderPartsId: this.receiveForm.partId,
\n workProductCodeRecordIds: this.rightTableData.map(
\n (item) => item.id
\n ),
\n },
\n }).then((res) => {
\n if (res.code === "Z000") {
\n this.$message.success("\u9886\u53d6\u6210\u529f");
\n this.scanDialog.visible = false;
\n this.getTableData(); \/\/ \u5237\u65b0\u4e3b\u5217\u8868
\n } else {
\n this.$message.error(res.message);
\n }
\n });
\n } catch (error) {
\n console.error("\u9886\u6599\u63d0\u4ea4\u5931\u8d25：", error);
\n } finally {
\n this.$clearLoading();
\n }
\n },
\n },
\n};
\n<\/script><\/p>\n
<style scoped>
\n\/* \u9886\u53d6\u8868\u5355\u6807\u9898\u6837\u5f0f *\/
\n.receive-form-title {
\n font-size: 16px;
\n font-weight: bold;
\n margin-bottom: 10px;
\n color: #333;
\n}
\n\/* \u641c\u7d22\u8868\u5355\u95f4\u8ddd\u4e0e\u6837\u5f0f *\/
\n.search-form {
\n margin-bottom: 20px;
\n padding: 10px;
\n background: #f8f9fa;
\n border-radius: 4px;
\n}
\n\/* \u53cc\u5217\u8868\u5e03\u5c40 *\/
\n.list-container {
\n display: flex;
\n gap: 20px;
\n}
\n.left-list,
\n.right-list {
\n flex: 1;
\n}
\n\/* \u5206\u9875\u5bb9\u5668\u6837\u5f0f *\/
\n.pagination-container {
\n margin-top: 10px;
\n text-align: right;
\n}
\n\/* \u5f39\u7a97\u5e95\u90e8\u6309\u94ae\u533a *\/
\n.dialog-footer {
\n text-align: center;
\n}
\n<\/style><\/p>\n
\u901a\u8fc7 Element UI Table \u7684\u9009\u62e9\u4e8b\u4ef6，\u5b9e\u73b0\u5de6\u4fa7\u53ef\u9009\u5217\u8868\u4e0e\u53f3\u4fa7\u5df2\u9009\u5217\u8868\u7684\u53cc\u5411\u8054\u52a8，\u786e\u4fdd\u52fe\u9009\/\u5220\u9664\u64cd\u4f5c\u540c\u6b65：<\/p>\n
\u5355\u884c\u52fe\u9009：\u76d1\u542c@select \u4e8b\u4ef6，\u5de6\u4fa7\u52fe\u9009\u65f6\u5c06\u884c\u6570\u636e\u6dfb\u52a0\u5230\u53f3\u4fa7\u5df2\u9009\u5217\u8868，\u53d6\u6d88\u52fe\u9009\u65f6\u4ece\u53f3\u4fa7\u79fb\u9664；<\/p>\n<\/li>\n
\u5168\u9009\u64cd\u4f5c：\u76d1\u542c@select-all \u4e8b\u4ef6，\u5168\u9009\u65f6\u6279\u91cf\u6dfb\u52a0\u5de6\u4fa7\u6570\u636e\u5230\u53f3\u4fa7（\u53bb\u91cd），\u53d6\u6d88\u5168\u9009\u65f6\u6e05\u7a7a\u53f3\u4fa7\u5217\u8868；<\/p>\n<\/li>\n
\u5220\u9664\u8054\u52a8：\u53f3\u4fa7\u5217\u8868\u70b9\u51fb\u5220\u9664\u65f6，\u540c\u6b65\u53d6\u6d88\u5de6\u4fa7\u5bf9\u5e94\u884c\u7684\u52fe\u9009\u72b6\u6001，\u786e\u4fdd\u6570\u636e\u4e00\u81f4\u6027；<\/p>\n<\/li>\n
\u5206\u9875\u56de\u663e：\u5207\u6362\u5206\u9875\u540e，\u901a\u8fc7$nextTick \u56de\u663e\u5df2\u9009\u72b6\u6001，\u907f\u514d\u5206\u9875\u540e\u9009\u4e2d\u4e22\u5931\u3002<\/p>\n<\/li>\n<\/ul>\n
\u7ed3\u679c\u53cd\u9988：\u63d0\u4ea4\u6210\u529f\u540e\u5173\u95ed\u5f39\u7a97\u3001\u5237\u65b0\u4e3b\u5217\u8868；\u5931\u8d25\u65f6\u63d0\u793a\u9519\u8bef\u4fe1\u606f，\u4fdd\u6301\u5f39\u7a97\u6253\u5f00\u3002<\/p>\n<\/li>\n
\u63a5\u53e3\u63d0\u4ea4：\u6821\u9a8c\u901a\u8fc7\u540e，\u8c03\u7528\u9886\u6599\u63a5\u53e3，\u63d0\u4ea4 workOrderPartsId（\u5546\u54c1 ID）\u548c workProductCodeRecordIds（\u5df2\u9009\u52a0\u5de5\u4ef6 ID \u6570\u7ec4）；<\/p>\n<\/li>\n<\/ul>\n
| \u53cc\u5217\u8868\u52fe\u9009\/\u5220\u9664\u4e0d\u540c\u6b65<\/td>\n | 1. \u884c\u6570\u636e\u65e0\u552f\u4e00 id \u5b57\u6bb5；2. $nextTick \u672a\u751f\u6548；3. \u4e8b\u4ef6\u76d1\u542c\u5f02\u5e38<\/td>\n | 1. \u786e\u4fdd\u6240\u6709\u5217\u8868\u6570\u636e\u5305\u542b\u552f\u4e00 id \u5b57\u6bb5；2. \u68c0\u67e5$nextTick \u6267\u884c\u65f6\u673a，\u786e\u4fdd DOM \u6e32\u67d3\u5b8c\u6210；3. \u6253\u5f00\u6d4f\u89c8\u5668\u63a7\u5236\u53f0，\u67e5\u770b\u662f\u5426\u6709\u4e8b\u4ef6\u7ed1\u5b9a\u62a5\u9519\u3002<\/td>\n<\/tr>\n |
| \u626b\u7801\u540e\u672a\u81ea\u52a8\u9009\u4e2d\/\u6dfb\u52a0<\/td>\n | 1. \u626b\u7801\u7f16\u7801\u4e0e\u52a0\u5de5\u4ef6 code \u5b57\u6bb5\u4e0d\u5339\u914d；2. PadScanInput \u7ec4\u4ef6\u672a\u6b63\u786e\u5f15\u5165；3. \u8868\u683c ref \u672a\u5b9a\u4e49<\/td>\n | 1. \u68c0\u67e5\u626b\u7801\u503c\u4e0e leftTableData \u4e2d code \u5b57\u6bb5\u683c\u5f0f\u4e00\u81f4；2. \u786e\u8ba4 PadScanInput \u7ec4\u4ef6\u5df2\u5168\u5c40\u6ce8\u518c；3. \u786e\u4fdd\u5de6\u4fa7\u8868\u683c ref=\u201cleftTable\u201d\u3002<\/td>\n<\/tr>\n |
| \u5206\u9875\u540e\u5df2\u9009\u72b6\u6001\u4e22\u5931<\/td>\n | \u5206\u9875\u5207\u6362\u540e\u672a\u56de\u663e\u5df2\u9009\u72b6\u6001，getLeftTableData \u4e2d\u56de\u663e\u903b\u8f91\u7f3a\u5931<\/td>\n | \u68c0\u67e5 getLeftTableData \u65b9\u6cd5\u4e2d，\u63a5\u53e3\u8bf7\u6c42\u6210\u529f\u540e\u662f\u5426\u6709\u56de\u663e\u5df2\u9009\u72b6\u6001\u7684\u903b\u8f91（\u4ee3\u7801\u4e2d\u5df2\u5b9e\u73b0，\u65e0\u9700\u4fee\u6539，\u786e\u4fdd\u5b57\u6bb5\u5339\u914d\u5373\u53ef）\u3002<\/td>\n<\/tr>\n |
| \u63d0\u4ea4\u63a5\u53e3\u62a5\u9519<\/td>\n | 1. \u63d0\u4ea4\u53c2\u6570\u683c\u5f0f\u9519\u8bef；2. \u63a5\u53e3\u5730\u5740\u9519\u8bef；3. \u6743\u9650\u4e0d\u8db3<\/td>\n | 1. \u68c0\u67e5 workProductCodeRecordIds \u662f\u5426\u4e3a\u6570\u7ec4\u683c\u5f0f；2. \u786e\u8ba4\u63a5\u53e3\u5730\u5740\u6b63\u786e；3. \u8054\u7cfb\u540e\u7aef\u914d\u7f6e\u63a5\u53e3\u6743\u9650，\u67e5\u770b\u63a5\u53e3\u8fd4\u56de\u9519\u8bef\u4fe1\u606f\u3002<\/td>\n<\/tr>\n |
| \u5f39\u7a97\u6253\u5f00\u540e\u65e0\u6570\u636e<\/td>\n | 1. \u4e3b\u5217\u8868\u884c\u6570\u636e\u672a\u6b63\u786e\u5e26\u5165；2. getLeftTableData \u63a5\u53e3\u672a\u8c03\u7528；3. \u63a5\u53e3\u8fd4\u56de\u65e0\u6570\u636e<\/td>\n | 1. \u68c0\u67e5 openScanDialog \u65b9\u6cd5\u4e2d row \u53c2\u6570\u662f\u5426\u6b63\u786e；2. \u786e\u8ba4 openScanDialog \u4e2d\u5df2\u8c03\u7528 getLeftTableData；3. \u68c0\u67e5\u63a5\u53e3\u8bf7\u6c42\u53c2\u6570，\u6d4b\u8bd5\u63a5\u53e3\u662f\u5426\u80fd\u6b63\u5e38\u8fd4\u56de\u6570\u636e\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
|