| | |
| | | </div> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="组合" name="third"> |
| | | <!-- <div class="tab3"> --> |
| | | <el-row :gutter="20" style="width: 100%"> |
| | | <el-col :span="6"> |
| | | <div style=" |
| | | text-align: center; |
| | | margin-bottom: 10px; |
| | | margin-top: 10px; |
| | | "> |
| | | <el-col :span="6" style="min-width: 200px"> |
| | | <div style="text-align: center; margin-bottom: 10px; margin-top: 10px;"> |
| | | 项目列表 |
| | | </div> |
| | | <el-input placeholder="输入关键字进行过滤" v-model="filterage"> |
| | |
| | | </el-tree> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <div style=" |
| | | text-align: center; |
| | | margin-bottom: 10px; |
| | | margin-top: 10px; |
| | | "> |
| | | <el-col :span="6" style="min-width: 200px"> |
| | | <div style="text-align: center; margin-bottom: 10px; margin-top: 10px;"> |
| | | 明细项目列表 |
| | | </div> |
| | | <div class="tab3"> |
| | |
| | | margin-top: 10px; |
| | | "> |
| | | 已选项目列表 |
| | | |
| | | </div> |
| | | <el-table :data="DataLists" border style="width: 100%" height="400" :span-method="objectspanmethod"> |
| | | <el-table-column prop="propinName" label="检查项目"> |
| | |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <!-- </div> --> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="单项" name="second"> |
| | | <div class="tab8"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="6"> |
| | | <div style=" |
| | | text-align: center; |
| | | margin-bottom: 10px; |
| | | margin-top: 10px; |
| | | "> |
| | | 项目列表 |
| | | <el-row :gutter="20" style="width: 100%"> |
| | | <el-col :span="6" style="min-width: 200px"> |
| | | <div style="text-align: center; margin-bottom: 10px; margin-top: 10px;"> |
| | | 项目列表 |
| | | </div> |
| | | <el-input placeholder="输入关键字进行过滤" v-model="filterText" style="margin-bottom: 10px;"> |
| | | </el-input> |
| | | <div class="tab3"> |
| | | <el-tree class="filter-tree" v-loading="loading" :data="Treedata" :props="defaultProps" show-checkbox |
| | | node-key="proId" @check="handleCurrentChecked" :default-checked-keys="checkedkey" |
| | | :filter-node-method="filterNode" ref="tree" :render-content="renderContent"> |
| | | </el-tree> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="6" style="min-width: 200px"> |
| | | <div style="text-align: center; margin-bottom: 10px; margin-top: 10px;"> |
| | | 明细项目列表 |
| | | </div> |
| | | <div class="tab3"> |
| | | <el-tree class="filter-tree" v-loading="loading" :data="TreedataList" node-key="proId" |
| | | :props="defaultProps" :filter-node-method="filterNode" show-checkbox |
| | | @check-change="handleCurrentChecked1" :default-checked-keys="checkedListkey" |
| | | :render-content="renderContent"> |
| | | </el-tree> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="11"> |
| | | <div class="grid-content bg-purple"> |
| | | <div style="text-align: center; margin-bottom: 10px; margin-top: 10px;"> |
| | | 已选项目列表 |
| | | </div> |
| | | <!-- @input="gaibian" --> |
| | | <el-input placeholder="输入关键字进行过滤" v-model="filterText"> |
| | | </el-input> |
| | | <div class="tab3"> |
| | | <el-tree class="filter-tree" v-loading="loading" :data="Treedata" :props="defaultProps" show-checkbox |
| | | node-key="proId" @check="handleCurrentChecked" :default-checked-keys="checkedkey" |
| | | :filter-node-method="filterNode" ref="tree" :render-content="renderContent"> |
| | | </el-tree> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <div style=" |
| | | text-align: center; |
| | | margin-bottom: 10px; |
| | | margin-top: 10px; |
| | | "> |
| | | 明细项目列表 |
| | | </div> |
| | | <div class="tab3"> |
| | | <el-tree class="filter-tree" v-loading="loading" :data="TreedataList" node-key="proId" |
| | | :props="defaultProps" :filter-node-method="filterNode" show-checkbox |
| | | @check-change="handleCurrentChecked1" :default-checked-keys="checkedListkey" |
| | | :render-content="renderContent"> |
| | | </el-tree> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="11"> |
| | | <div class="grid-content bg-purple"> |
| | | <div style=" |
| | | text-align: center; |
| | | margin-bottom: 10px; |
| | | margin-top: 10px; |
| | | "> |
| | | 已选项目列表 |
| | | </div> |
| | | <el-table :data="DataList" border style="width: 100%" height="400" :span-method="objectSpanMethod"> |
| | | <el-table-column prop="propinName" label="检查项目"> |
| | | </el-table-column> |
| | | <el-table-column prop="sl" label="数量" width="56px"> |
| | | </el-table-column> |
| | | <el-table-column prop="proPrice" label="原价" width="56px"></el-table-column> |
| | | <el-table-column prop="proName" label="明细项目" width="260px"> |
| | | </el-table-column> |
| | | |
| | | <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" |
| | | width="50px"> |
| | | <template slot-scope="scope"> |
| | | <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" |
| | | title="删除"></el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <h3 style="font-weight: 600">合计:{{ marryall }}元</h3> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | <el-table :data="DataList" border style="width: 100%" height="400" :span-method="objectSpanMethod"> |
| | | <el-table-column prop="propinName" label="检查项目"> |
| | | </el-table-column> |
| | | <el-table-column prop="proName" label="明细项目" width="260px"> |
| | | </el-table-column> |
| | | <el-table-column prop="sl" label="数量" width="56px"> |
| | | </el-table-column> |
| | | <el-table-column prop="proPrice" label="原价" width="56px"> |
| | | </el-table-column> |
| | | <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" |
| | | width="50px"> |
| | | <template slot-scope="scope"> |
| | | <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" |
| | | title="删除"></el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <h3 style="font-weight: 600">合计:{{ marryall }}元</h3> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | <span slot="footer" class="dialog-footer"> |
| | |
| | | |
| | | // this.getData(); |
| | | }, |
| | | mounted() { }, |
| | | |
| | | mounted() { |
| | | this.TreedataList = []; |
| | | this.DataList = []; |
| | | this.marryall = 0; |
| | | }, |
| | | methods: { |
| | | debounceNumberChange(currentValue, oldValue) { |
| | | clearTimeout(this.debounceTimer); |
| | |
| | | let configKey = "getInfoFromSqlData"; |
| | | getconfigKey(configKey).then((res) => { |
| | | if (res.code == 200) { |
| | | console.log(res.msg, 'res.msg'); |
| | | if (res.msg == "N") { |
| | | var websocket = null; |
| | | var url = this.valueUrl; |
| | |
| | | |
| | | //接收到消息的回调方法 |
| | | websocket.onmessage = (event) => { |
| | | var resultObj = eval("(" + event.data + ")"); |
| | | var resultObj = eval("(" + event.data + ")"); // 注意:eval存在安全隐患,建议用JSON.parse |
| | | this.readCardWebSocket(resultObj); |
| | | |
| | | }; |
| | | websocket.onclose = function () { |
| | | alert("读卡器连接关闭"); |
| | | }; |
| | | |
| | | } else if (res.msg == "Y") { |
| | | /* this.$refs.aaa.open = true; |
| | | this.$refs.aaa.getAllList(); |
| | |
| | | // 最新使用webSocket通信 |
| | | readCardWebSocket(resultObj) { |
| | | let _this = this; |
| | | |
| | | if (resultObj.code === 200 && resultObj.data.name != null) { |
| | | console.log(resultObj, 'resultObj'); |
| | | if (resultObj.code === 200 && resultObj.data.name && resultObj.data.name != null) { |
| | | //回显相关数据 |
| | | _this.form.cusName = resultObj.data.name; |
| | | _this.form.cusSex = resultObj.data.sex == "0" ? "女" : "男"; |
| | |
| | | } |
| | | } |
| | | }; |
| | | websocket.onclose = function () { |
| | | alert("读卡器连接关闭"); |
| | | }; |
| | | // websocket.onclose = function () { |
| | | // alert("读卡器连接关闭"); |
| | | // }; |
| | | websocket.onmessage = function (event) { |
| | | var resultObj = JSON.parse(event.data); |
| | | _this.form.cusName = resultObj.data.name; |
| | |
| | | } |
| | | } |
| | | }; |
| | | websocket.onclose = function () { |
| | | alert("读卡器连接关闭"); |
| | | }; |
| | | // websocket.onclose = function () { |
| | | // alert("读卡器连接关闭"); |
| | | // }; |
| | | websocket.onmessage = function (event) { |
| | | var resultObj = JSON.parse(event.data); |
| | | _this.form.cusName = resultObj.data.name; |
| | |
| | | |
| | | // 取消按钮 |
| | | cancel() { |
| | | this.TreedataList = []; |
| | | this.DataList = []; |
| | | this.marryall = 0; // 重置合计 |
| | | this.Seachopen = false; |
| | | this.taocan = false; |
| | | this.malldisble = false; |
| | | this.defaultKeys = []; |
| | | this.DataLists = []; |
| | | |
| | | }, |
| | | |
| | | cancell() { |
| | |
| | | if (this.activeNames == "second") { |
| | | this.DataList = []; |
| | | this.checkedkey = []; |
| | | this.TreedataList = []; |
| | | this.marryall = 0; // 重置合计 |
| | | this.getDataList(); |
| | | } else if (this.activeNames == "third") { |
| | | this.DataLists = []; |
| | | this.checkedkeys = []; |
| | | this.TreedataList = []; |
| | | this.marryall = 0; // 重置合计 |
| | | getZhList().then((response) => { |
| | | if (response.data) { |
| | | this.packageList = response.data; |
| | |
| | | this.loading = true; |
| | | getProParentIdDxList().then((response) => { |
| | | this.Treedata = response.data.list; |
| | | |
| | | // 回显 TreedataList 到 DataList |
| | | if (this.TreedataList && this.TreedataList.length > 0) { |
| | | this.DataList = this.TreedataList; |
| | | this.marryall = this.DataList.reduce((sum, item) => sum + (item.proPrice || 0) * (item.sl || 1), 0); |
| | | this.checkedListkey = this.DataList.map(item => item.proId); |
| | | this.$nextTick(() => { |
| | | this.$refs.tree.setCheckedKeys(this.checkedListkey); |
| | | }); |
| | | } |
| | | |
| | | if (this.tableData[0]) { |
| | | this.tableData[0].tjProjectList.forEach((selectionitem) => { |
| | | this.Treedata.forEach((item) => { |
| | |
| | | }); |
| | | }); |
| | | } |
| | | |
| | | // 回显 packageList 的选中态 |
| | | this.handlePackageSelection(); |
| | | |
| | | this.loading = false; |
| | | }); |
| | | }, |
| | | |
| | | handlePackageSelection() { |
| | | // 假设你有之前保存的选中状态或从某个地方获取这些数据 |
| | | let selectedPackageIds = this.getPreviouslySelectedPackages(); // 这是一个假设的函数,实际使用时替换为实际的逻辑 |
| | | |
| | | // 设置 packageList 的选中状态 |
| | | this.$nextTick(() => { |
| | | if (this.$refs.treas) { // 确保 treas 引用已经存在 |
| | | this.$refs.treas.setCheckedKeys(selectedPackageIds, true); |
| | | } |
| | | // 更新 checkedkeys 以反映当前选中的包 |
| | | this.checkedkeys = selectedPackageIds; |
| | | }); |
| | | |
| | | // 根据选中状态更新 DataLists 或其他需要更新的内容 |
| | | this.updateDataListsBasedOnSelection(selectedPackageIds); |
| | | }, |
| | | |
| | | getPreviouslySelectedPackages() { |
| | | // 返回之前保存的选中包ID数组 |
| | | // 例如,从 localStorage 或者 Vuex store 获取 |
| | | return []; // 这里是示例,替换为实际获取数据的逻辑 |
| | | }, |
| | | |
| | | updateDataListsBasedOnSelection(selectedPackageIds) { |
| | | // 根据选中的包ID更新 DataLists |
| | | this.DataLists = []; |
| | | selectedPackageIds.forEach(id => { |
| | | let packageItem = this.packageList.find(item => item.id === id); |
| | | if (packageItem) { |
| | | // 这里假设每个包项目都有一个 proId 数组或者类似的结构,用来获取包中的项目 |
| | | if (packageItem.proIds) { // 假设 packageItem 包含一个 proId 数组 |
| | | packageItem.proIds.forEach(proId => { |
| | | let project = this.findProjectById(proId); // 假设有一个函数来找到项目 |
| | | if (project) { |
| | | this.DataLists.push(project); |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | }); |
| | | |
| | | // 计算合计 |
| | | this.marryalls = this.DataLists.reduce((sum, item) => sum + item.proPrice, 0); |
| | | }, |
| | | |
| | | findProjectById(proId) { |
| | | // 此函数假设你有一个全局的项目列表或者可以从某个API获取 |
| | | // 这里只是一个示例,实际应用中应该根据你的数据结构来实现 |
| | | return this.allpackageList.find(item => item.proId === proId) || null; |
| | | }, |
| | | |
| | | handlepackage(data, checked, checkedNodes) { |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | // if (columnIndex == 3) { |
| | | // let rowspan = 0; |
| | | // this.DataLists.forEach((element) => { |
| | | // if (element.propinName === row.propinName) { |
| | | // rowspan++; |
| | | // } |
| | | // }); |
| | | // return [rowspan, 1]; |
| | | // } |
| | | }, |
| | | handlePackageChecked(data, checked, checkedNodes) { |
| | | if (checked == false) { |
| | |
| | | } |
| | | |
| | | .filter-tree { |
| | | /* max-height: 360px; |
| | | overflow-y: auto; |
| | | border: 1px solid #d9d9d9; */ |
| | | overflow: auto; |
| | | flex: 1; |
| | | overflow-y: auto; /* 保留纵向滚动条 */ |
| | | overflow-x: hidden; /* 隐藏横向滚动条 */ |
| | | height: 350px; |
| | | } |
| | | |
| | |
| | | width: 100%; |
| | | display: flex; |
| | | } |
| | | /* .tab3 { |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | .tab3::-webkit-scrollbar { |
| | | width: 0px; |
| | | background: transparent; |
| | | } |
| | | |
| | | .tab3::-webkit-scrollbar-thumb { |
| | | background: transparent; |
| | | } */ |
| | | </style> |