优化操作出入库耗材多选

.env.production

@@ -3,9 +3,9 @@ ENV = 'production'
 # 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置
 # 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
 # 测试
-# VUE_APP_BASE_API  = 'https://admintestpapi.sxczgkj.cn'
+VUE_APP_BASE_API  = 'https://admintestpapi.sxczgkj.cn'
 # 生产
-VUE_APP_BASE_API  = 'https://cashieradmin.sxczgkj.cn'
+# VUE_APP_BASE_API  = 'https://cashieradmin.sxczgkj.cn'
 # VUE_APP_BASE_API  = 'http://192.168.2.98:8000'
 # 如果接口是 http 形式， wss 需要改为 ws
 VUE_APP_WS_API = 'wss://123.56.110.252

package.json

@@ -48,6 +48,7 @@
     "reconnecting-websocket": "^4.4.0",
     "screenfull": "4.2.0",
     "sortablejs": "^1.15.2",
+    "terser-webpack-plugin": "^4.2.3",
     "vue": "^2.6.14",
     "vue-amap": "^0.5.10",
     "vue-clipboard2": "^0.3.3",

src/views/invoicing/components/consumableList.vue

@@ -17,7 +17,8 @@
             </el-form-item>
         </el-form>
         <div class="head-container">
-            <el-table ref="table" :data="tableData.list" v-loading="tableData.loading">
+            <el-table ref="table" :data="tableData.list" v-loading="tableData.loading" @select="firstSelectChange">
+                <el-table-column type="selection" width="55" align="center"></el-table-column>
                 <el-table-column label="耗材名称" prop="conName"></el-table-column>
                 <el-table-column label="价格" prop="price"></el-table-column>
                 <el-table-column label="耗材代码" prop="conCode"></el-table-column>
@@ -29,16 +30,20 @@
                         {{ formatDecimal(scope.row.stockNumber - scope.row.stockConsume, 2, true) }}
                     </template>
                 </el-table-column>
-                <el-table-column label="操作" fixed="right">
+                <!-- <el-table-column label="操作" fixed="right">
                     <template v-slot="scope">
                         <el-button type="primary" size="mini" @click="confirmHandle(scope.row)">选择</el-button>
                     </template>
-                </el-table-column>
+                </el-table-column> -->
             </el-table>
         </div>
         <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
             @current-change="paginationChange" @size-change="sizeChange"
             layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="confirmHandle">确 定</el-button>
+        </span>
     </el-dialog>
 </template>
 
@@ -71,9 +76,18 @@ export default {
         this.resetSearchForm = { ...this.searchForm }
     },
     methods: {
+        firstSelectChange() {
+            // console.log(selection)
+            let selection = this.$refs.table.selection
+            if (selection.length > 1 && this.isselect) {
+                const del_row = selection.shift();
+                this.$refs.table.toggleRowSelection(del_row, false);
+            }
+        },
         // 确定选商品
-        confirmHandle(row) {
+        confirmHandle() {
-            this.$emit('success', row)
+            let res = this.$refs.table.selection
+            this.$emit('success', res)
             this.close()
         },
         // 重置查询
@@ -120,9 +134,25 @@ export default {
         },
         show(goods) {
             this.dialogVisible = true
+            if (goods && goods.length) {
+                this.goods = goods
+            } else {
+                this.goods = []
+            }
+            this.resetHandle()
+            this.getTableData()
         },
         close() {
             this.dialogVisible = false
+        },
+        selection() {
+            this.goods.forEach(row => {
+                this.tableData.list.forEach((item, index) => {
+                    if (row.id == item.id) {
+                        this.$refs.table.toggleRowSelection(this.tableData.list[index]);
+                    }
+                })
+            });
         }
     }
 }

src/views/invoicing/operation_in.vue

@@ -5,7 +5,7 @@
                 <el-form-item label="入库内容">
                     <div class="shop_type_box">
                         <div class="item" v-for="item in inTabs" :key="item.value"
-                            :class="{ active: inTabValue == item.value }" @click="tabChange(item.value)">
+                            :class="{ active: inTabValue == item.value }" @click="tabChange(item.value, item.type)">
                             <div class="s_title">{{ item.label }}</div>
                             <div class="active_dot">
                                 <i class="el-icon-check"></i>
@@ -89,7 +89,7 @@
                     </el-col>
                 </el-row>
                 <el-form-item>
-                    <el-button type="primary" @click="$refs.ConsumableList.show()"
+                    <el-button type="primary" @click="$refs.ConsumableList.show(tableData.list)"
                         v-if="inTabValue == 'consumable'">选择耗材</el-button>
                     <el-button type="primary" @click="$refs.shopList.show(tableData.list)" v-else>选择商品</el-button>
                 </el-form-item>
@@ -113,14 +113,14 @@
                 <el-table-column label="进价">
                     <template v-slot="scope">
                         <el-input-number v-model="scope.row.price" :min="0" controls-position="right"
-                            @change="e => { queryForm.totalAmount = formatDecimal(e * scope.row.stockNumber) }"></el-input-number>
+                            @change="consCountTotal()"></el-input-number>
                         <div class="tips">原价￥{{ scope.row.costPrice }}/{{ scope.row.conUnit }}</div>
                     </template>
                 </el-table-column>
                 <el-table-column label="数量">
                     <template v-slot="scope">
                         <el-input-number v-model="scope.row.stockNumber" :min="0" controls-position="right"
-                            @change="e => { queryForm.totalAmount = formatDecimal(e * scope.row.price) }"></el-input-number>
+                            @change="consCountTotal()"></el-input-number>
                         <div class="tips">入库前：{{ scope.row.number }}{{ scope.row.conUnit }}
                         </div>
                     </template>
@@ -226,11 +226,13 @@ export default {
             inTabs: [
                 {
                     label: '商品入库',
-                    value: 'goods'
+                    value: 'goods',
+                    type: 'purveyor'
                 },
                 {
                     label: '耗材入库',
-                    value: 'consumable'
+                    value: 'consumable',
+                    type: 'in'
                 }
             ],
             shopTypesActive: 0,
@@ -294,16 +296,26 @@ export default {
     },
     methods: {
         // 切换入库内容
-        tabChange(value) {
+        tabChange(value, type) {
             this.inTabValue = value
             this.shopTypesActive = 0
+            this.queryForm.type = type
         },
+        // 计算耗材总价
+        consCountTotal() {
+            let zong = 0
+            this.tableData.list.forEach(ele => {
+                zong += ele.price * ele.stockNumber
+            })
+            this.queryForm.totalAmount = formatDecimal(zong)
+        },
+        // 计算商品总价
         modifyPrice() {
             let zong = 0
             this.tableData.list.forEach(ele => {
                 zong += ele.costPrice * ele.number
             })
-            this.queryForm.totalAmount = parseFloat(zong.toFixed(2))
+            this.queryForm.totalAmount = formatDecimal(zong)
         },
         // 提交
         submitHandle() {
@@ -317,17 +329,12 @@ export default {
                                 await tbProductStockOperateOutAndOn(this.queryForm)
                                 break;
                             case 'consumable':
-                                const con = { ...this.tableData.list[0] }
+                                this.queryForm.accountsPayable = this.queryForm.totalAmount
-                                await stockInOut({
+                                this.queryForm.actualPayment = this.queryForm.paidAmount
-                                    accountsPayable: this.queryForm.totalAmount,
+                                this.queryForm.paymentTime = this.queryForm.paidAt
-                                    actualPayment: this.queryForm.paidAmount,
+                                this.queryForm.supplierId = this.queryForm.purveyorId
-                                    conInfoId: con.id,
+                                this.queryForm.list = this.tableData.list
-                                    paymentTime: this.queryForm.paidAt,
+                                await stockInOut(this.queryForm)
-                                    price: con.price,
-                                    stockNumber: con.stockNumber,
-                                    supplierId: this.queryForm.purveyorId,
-                                    type: 'in'
-                                })
                                 break;
                             default:
                                 break;
@@ -343,12 +350,13 @@ export default {
         },
         // 选择耗材
         selectConsumable(res) {
-            const n_res = { ...res }
+            this.tableData.list = res.map(item => {
-            res.costPrice = n_res.price
+                item.number = formatDecimal(item.stockNumber - item.stockConsume, 2, true)
-            res.number = n_res.stockNumber - n_res.stockConsume
+                item.stockNumber = 0
-            res.stockNumber = 0
+                item.costPrice = item.price
-            this.tableData.list = [res]
+                item.conInfold = item.id
-            this.queryForm.totalAmount = formatDecimal(res.price * res.stockNumber)
+                return item
+            })
         },
         // 选择商品
         selectShop(res) {
@@ -373,6 +381,7 @@ export default {
             this.showResult = false
             this.queryForm = { ...this.resetForm }
             this.tableData.list = []
+            this.$refs.queryForm.resetFields()
         },
         // 切换类型
         changeTypeEnum(index) {

src/views/invoicing/operation_out.vue

@@ -5,7 +5,7 @@
                 <el-form-item label="出库内容">
                     <div class="shop_type_box">
                         <div class="item" v-for="item in inTabs" :key="item.value"
-                            :class="{ active: inTabValue == item.value }" @click="tabChange(item.value)">
+                            :class="{ active: inTabValue == item.value }" @click="tabChange(item.value, item.type)">
                             <div class="s_title">{{ item.label }}</div>
                             <div class="active_dot">
                                 <i class="el-icon-check"></i>
@@ -89,7 +89,7 @@
                     </el-col>
                 </el-row>
                 <el-form-item>
-                    <el-button type="primary" @click="$refs.ConsumableList.show()"
+                    <el-button type="primary" @click="$refs.ConsumableList.show(tableData.list)"
                         v-if="inTabValue == 'consumable'">选择耗材</el-button>
                     <el-button type="primary" @click="$refs.shopList.show(tableData.list)" v-else>选择商品</el-button>
                 </el-form-item>
@@ -101,7 +101,6 @@
             </el-button>
         </div>
         <div class="head-container">
-
             <el-table :data="tableData.list" v-if="inTabValue == 'consumable'">
                 <el-table-column label="耗材名称" prop="conName">
                     <template v-slot="scope">
@@ -111,14 +110,14 @@
                 <el-table-column label="进价">
                     <template v-slot="scope">
                         <el-input-number v-model="scope.row.price" :min="0" controls-position="right"
-                            @change="e => { queryForm.totalAmount = formatDecimal(e * scope.row.stockNumber) }"></el-input-number>
+                            @change="consCountTotal()"></el-input-number>
                         <div class="tips">原价￥{{ scope.row.costPrice }}/{{ scope.row.conUnit }}</div>
                     </template>
                 </el-table-column>
                 <el-table-column label="数量">
                     <template v-slot="scope">
                         <el-input-number v-model="scope.row.stockNumber" :min="0" controls-position="right"
-                            @change="e => { queryForm.totalAmount = formatDecimal(e * scope.row.price) }"></el-input-number>
+                            @change="consCountTotal()"></el-input-number>
                         <div class="tips">出库前：{{ scope.row.number }}{{ scope.row.conUnit }}</div>
                     </template>
                 </el-table-column>
@@ -223,11 +222,13 @@ export default {
             inTabs: [
                 {
                     label: '商品出库',
-                    value: 'goods'
+                    value: 'goods',
+                    type: 'reject'
                 },
                 {
                     label: '耗材出库',
-                    value: 'consumable'
+                    value: 'consumable',
+                    type: 'out'
                 }
             ],
             shopTypesActive: 0,
@@ -260,7 +261,7 @@ export default {
                 time: dayjs().format('YYYY-MM-DD'),
                 totalAmount: 0,
                 type: 'reject',
-                shopId: localStorage.getItem('shopId')
+                shopId: localStorage.getItem('shopId'),
             },
             queryRules: {
                 purveyorId: [
@@ -291,10 +292,20 @@ export default {
     },
     methods: {
         // 切换入库内容
-        tabChange(value) {
+        tabChange(value, type) {
             this.inTabValue = value
             this.shopTypesActive = 0
+            this.queryForm.type = type
         },
+        // 计算耗材总价
+        consCountTotal() {
+            let zong = 0
+            this.tableData.list.forEach(ele => {
+                zong += ele.price * ele.stockNumber
+            })
+            this.queryForm.totalAmount = formatDecimal(zong)
+        },
+        // 计算商品总价
         modifyPrice() {
             let zong = 0
             this.tableData.list.forEach(ele => {
@@ -314,17 +325,13 @@ export default {
                                 await tbProductStockOperateOutAndOn(this.queryForm)
                                 break;
                             case 'consumable':
-                                const con = { ...this.tableData.list[0] }
+                                this.queryForm.accountsPayable = this.queryForm.totalAmount
-                                await stockInOut({
+                                this.queryForm.actualPayment = this.queryForm.paidAmount
-                                    accountsPayable: this.queryForm.totalAmount,
+                                this.queryForm.paymentTime = this.queryForm.paidAt
-                                    actualPayment: this.queryForm.paidAmount,
+                                this.queryForm.supplierId = this.queryForm.purveyorId
-                                    conInfoId: con.id,
+                                this.queryForm.list = this.tableData.list
-                                    paymentTime: this.queryForm.paidAt,
+                                this.queryForm.type = 'out'
-                                    price: con.price,
+                                await stockInOut(this.queryForm)
-                                    stockNumber: con.stockNumber,
-                                    supplierId: this.queryForm.purveyorId,
-                                    type: 'out'
-                                })
                                 break;
                             default:
                                 break;
@@ -340,12 +347,13 @@ export default {
         },
         // 选择耗材
         selectConsumable(res) {
-            const n_res = { ...res }
+            this.tableData.list = res.map(item => {
-            res.costPrice = n_res.price
+                item.number = formatDecimal(item.stockNumber - item.stockConsume, 2, true)
-            res.number = n_res.stockNumber - n_res.stockConsume
+                item.stockNumber = 0
-            res.stockNumber = 0
+                item.costPrice = item.price
-            this.tableData.list = [res]
+                item.conInfold = item.id
-            this.queryForm.totalAmount = formatDecimal(res.price * res.stockNumber)
+                return item
+            })
         },
         // 选择商品
         selectShop(res) {
@@ -370,6 +378,7 @@ export default {
             this.showResult = false
             this.queryForm = { ...this.resetForm }
             this.tableData.list = []
+            this.$refs.queryForm.resetFields()
         },
         // 切换类型
         changeTypeEnum(index) {

webpack.config.js

@@ -0,0 +1,17 @@
+const TerserPlugin = require("terser-webpack-plugin");
+
+module.exports = {
+  // 其他配置项...
+  optimization: {
+    minimize: true, // 必须开启，否则配置不失效
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          compress: {
+            drop_console: true
+          }
+        }
+      })
+    ]
+  }
+};