更新代码

src/api/base/company/index.js

@@ -102,3 +102,11 @@ export function getCompanyList(){
     method: 'get'
   })
 }
+
+// 当前登录用户的门店信息
+export function getNowCompany(){
+  return request({
+    url: "/base/company/now",
+    method: "get"
+  })
+}

src/api/repair/stockTransfer/stockTransfer.js

@@ -1 +1,12 @@
 import request from '@/utils/request'
+
+const preUrl = '/repair/st'
+
+// 新增
+export function createSt(data){
+  return request({
+    url: preUrl + "/create",
+    method: "post",
+    data
+  })
+}

src/views/repair/stockTransfer/Components/StInfo.vue

@@ -3,15 +3,15 @@
     <el-form :model="formData" size="small" :inline="true" label-width="80px">
       <el-row :gutter="20">
         <el-col :span="24">
-          <el-form-item label="调出门店">
+          <el-form-item label="调出门店" prop="oldCorp">
-            <CorpChoose/>
+            <CorpChoose v-model="formData.oldCorp"/>
           </el-form-item>
-          <el-form-item label="调入门店">
+          <el-form-item label="调入门店" prop="newCorp">
-            <CorpChoose/>
+            <CorpChoose v-model="formData.newCorp"/>
           </el-form-item>
-          <el-form-item label="日期">
+          <el-form-item label="日期" prop="stTime">
             <el-date-picker
-              v-model="formData"
+              v-model="formData.stTime"
               type="date"
               placeholder="选择日期">
             </el-date-picker>
@@ -19,43 +19,43 @@
           <el-form-item label="单据编号" prop="stNo">
             <el-input disabled v-model="formData.stNo" style="width: 20rem"/>
           </el-form-item>
-          <el-form-item label="调拨人">
+          <el-form-item label="调拨人" prop="user">
-            <StaffChoose @selected="getStaff"/>
+            <StaffChoose v-model="formData.user"/>
           </el-form-item>
-          <el-form-item label="选择商品">
+          <el-form-item label="选择商品" prop="goodsList">
             <PartChoose @selected="getPart"/>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="24">
-          <StTable :part-list="partList" @deleteItem="deleteItem"/>
+          <StTable @tableData="tableData" :part-list="partList" @deleteItem="deleteItem"/>
         </el-col>
       </el-row>
       <el-row :gutter="20" style="margin-top: 1rem">
         <el-col :span="24">
-          <el-form-item label="应收金额">
+          <el-form-item label="应收金额" prop="totalPrice">
-            <el-input v-model="formData"/>
+            <el-input disabled v-model="formData.totalPrice"/>
           </el-form-item>
-          <el-form-item label="优惠金额">
+          <el-form-item label="优惠金额" prop="discountPrice">
-            <el-input v-model="formData"/>
+            <el-input v-model="formData.discountPrice" @blur="handleDiscountPriceChange"/>
           </el-form-item>
-          <el-form-item label="本次收款">
+          <el-form-item label="本次收款" prop="thisCollection">
-            <el-input v-model="formData"/>
+            <el-input v-model="formData.thisCollection" @blur="handleThisCollection"/>
           </el-form-item>
-          <el-form-item label="本次欠款">
+          <el-form-item label="本次欠款" prop="thisDebt">
-            <el-input v-model="formData"/>
+            <el-input disabled v-model="formData.thisDebt"/>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="2">
         <el-col :span="12">
-          <el-form-item label="备注">
+          <el-form-item label="备注" prop="remark">
-            <el-input style="width: 45rem"/>
+            <el-input v-model="formData.remark" style="width: 45rem"/>
           </el-form-item>
         </el-col>
         <el-col :span="12" style="text-align: right">
-          <el-button type="danger">结算</el-button>
+          <el-button type="danger" @click="handleSubmit">结算</el-button>
         </el-col>
       </el-row>
     </el-form>
@@ -68,6 +68,8 @@ import StaffChoose from "@/views/repair/Components/StaffChoose.vue";
 import PartChoose from "@/views/repair/Components/PartChoose.vue";
 import StTable from "@/views/repair/stockTransfer/Components/StTable.vue";
 import {createUniqueCodeByHead} from "@/utils/createUniqueCode";
+import {getNowCompany} from "@/api/base/company";
+import {createSt} from "@/api/repair/stockTransfer/stockTransfer";
 
 export default {
   name: "StInfo",
@@ -81,20 +83,35 @@ export default {
     return {
       formData: {
         stNo: null,
+        newCorp: null,
+        oldCorp: null,
+        stTime: Date.now(),
+        user: null,
+        goodsList: [],
+        totalPrice: 0,
+        discountPrice: 0,
+        thisCollection: 0,
+        thisDebt: 0,
+        remark: null,
+        itemCount: 0,
+        stStatus: "01"
       },
       partList: []
     }
   },
   mounted() {
-    this.formData.stNo = createUniqueCodeByHead("DB")
+    this.init()
   },
   methods: {
-    // 选择员工
+    // TODO 同调用 init方法，初始化当前门店
-    getStaff(data) {
+    async companyInit() {
-
+      try {
+        const res = await getNowCompany()
+      } catch {
+      }
     },
     // 选择商品
-    async getPart(data){
+    async getPart(data) {
       const flag = this.partList.find(item => item.id === data.id)
       if (flag) {
         try {
@@ -107,8 +124,80 @@ export default {
       }
     },
     // 删除商品
-    deleteItem(index){
+    deleteItem(index) {
       this.partList.splice(index, 1)
+    },
+    // 表格的数据
+    tableData(data) {
+      const tempPrice = data.reduce((x, y) => {
+        return x + y.totalPrice
+      }, 0)
+      const itemCount = data.reduce((x, y) => {
+        return x + y.goodsCount
+      }, 0)
+      this.formData.totalPrice = tempPrice
+      this.formData.thisDebt = tempPrice
+      this.formData.itemCount = itemCount
+      this.formData.goodsList = data.map(item => {
+        return {
+          ...item,
+          goodsId: item.id,
+          goodsCount: item.goodsCount,
+          goodsPrice: item.goodsPrice,
+          remark: item.remark
+        }
+      })
+    },
+    // 优惠变化计算
+    handleDiscountPriceChange() {
+      this.formData.thisDebt -= this.formData.discountPrice
+    },
+    // 付款变化计算
+    handleThisCollection() {
+      this.formData.thisDebt -= this.formData.thisCollection
+    },
+    // 提交
+    async handleSubmit() {
+      try {
+        this.createInit()
+        await createSt(this.formData)
+        this.$modal.msgSuccess("新增成功")
+        this.init()
+      } catch {
+      }
+    },
+    // 提交前的处理
+    createInit() {
+      const data = this.formData
+      this.formData = {
+        ...data,
+        outCorpId: data.oldCorp.id,
+        inCorpId: data.newCorp.id,
+        userId: data.user.id,
+        userName: data.user.name,
+      }
+    },
+    // 组件初始化
+    init(){
+      // TODO 数据库有问题，先抛异常，后面在解决
+      // this.companyInit()
+      this.formData = {
+        stNo: null,
+        newCorp: null,
+        oldCorp: null,
+        stTime: Date.now(),
+        user: null,
+        goodsList: [],
+        totalPrice: 0,
+        discountPrice: 0,
+        thisCollection: 0,
+        thisDebt: 0,
+        remark: null,
+        itemCount: 0,
+        stStatus: "01"
+      }
+      this.formData.stNo = createUniqueCodeByHead("DB")
+      this.partList = []
     }
   }
 }

src/views/repair/stockTransfer/Components/StTable.vue

@@ -1,20 +1,42 @@
 <template>
-  <el-table v-loading="loading" :data="partList" :stripe="true" :show-overflow-tooltip="true">
+  <el-table v-loading="loading"
+            :data="list" :stripe="true"
+            :show-overflow-tooltip="true" show-summary
+            :summary-method="getSummaries"
+            @cell-mouse-enter="handleCellEnter"
+            @cell-mouse-leave="handleCellLeave"
+            @cell-click="handleCellClick"
+  >
     <el-table-column label="序号" align="center">
       <template scope="scope">
         <span>{{ scope.$index + 1 }}</span>
       </template>
     </el-table-column>
     <el-table-column label="商品名称" align="center" prop="name" width="200"/>
-    <el-table-column label="规格" align="center" width="180"/>
+    <el-table-column label="规格" align="center" width="180" prop="model"/>
-    <el-table-column label="单位" align="center" width="150"/>
+    <el-table-column label="单位" align="center" width="150" prop="unit"/>
-    <el-table-column label="原库位" align="center" width="150"/>
+    <el-table-column label="原库位" align="center" width="150" prop="warehouse"/>
-    <el-table-column label="账上数量" align="center" width="150"/>
+    <el-table-column label="账上数量" align="center" width="150" prop="stock"/>
-    <el-table-column label="调拨数量" align="center" width="150"/>
+    <el-table-column label="调拨数量" align="center" width="150" prop="goodsCount">
-    <el-table-column label="参考成本" align="center" width="150"/>
+      <div class="item" slot-scope="scope">
-    <el-table-column label="结算单价" align="center" width="150"/>
+        <el-input @blur="save(scope.row)" class="item__input" v-model="scope.row.goodsCount" placeholder="请输入内容"></el-input>
-    <el-table-column label="结算金额" align="center" width="150"/>
+        <span class="item__txt">{{ scope.row.goodsCount }}</span>
-    <el-table-column label="备注" align="center" width="180"/>
+      </div>
+    </el-table-column>
+    <el-table-column label="参考成本" align="center" width="150" prop="price"/>
+    <el-table-column label="结算单价" align="center" width="150" prop="goodsPrice">
+      <div class="item" slot-scope="scope">
+        <el-input @blur="save(scope.row)" class="item__input" v-model="scope.row.goodsPrice" placeholder="请输入内容"></el-input>
+        <span class="item__txt">{{ scope.row.goodsPrice }}</span>
+      </div>
+    </el-table-column>
+    <el-table-column label="结算金额" align="center" width="150" prop="totalPrice"/>
+    <el-table-column label="备注" align="center" width="180" prop="remark">
+      <div class="item" slot-scope="scope">
+        <el-input @blur="save(scope.row)" class="item__input" v-model="scope.row.remark" placeholder="请输入内容"></el-input>
+        <span class="item__txt">{{ scope.row.remark }}</span>
+      </div>
+    </el-table-column>
     <el-table-column label="操作" fixed="right" align="center" width="150">
       <template v-slot="scope">
         <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteItem(scope.$index)"
@@ -28,8 +50,8 @@
 <script>
 export default {
   name: "StTable",
-  props:{
+  props: {
-    partList:{
+    partList: {
       type: Array,
       defaultValue: false,
       required: true
@@ -39,17 +61,152 @@ export default {
     return {
       loading: false,
       list: [],
+      // 需要合计的属性
+      includeColumn: ['goodsCount', 'totalPrice'],
+      // 需要编辑的属性
+      editProp: ['goodsCount', 'goodsPrice', 'remark'],
+      // 保存进入编辑的cell
+      clickCellMap: {}
     }
   },
+  watch: {
+    partList(val) {
+      if (val && val.length > 0) {
+        const data = val[val.length - 1]
+        const newData = {
+          ...data,
+          goodsCount: 1,
+          totalPrice: data.price * 1,
+          remark: '',
+          goodsPrice: data.price,
+        }
+        this.list.push(newData)
+      } else {
+        this.list = []
+      }
+    },
+    list: {
+      handler(val) {
+        this.$emit("tableData", val)
+      },
+      deep: true
+    },
+  },
   methods: {
     // 通知父组件，删除元素
-    deleteItem(index){
+    deleteItem(index) {
       this.$emit("deleteItem", index)
+    },
+    getSummaries(param) {
+      const {columns, data} = param
+      const sums = []
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '合计';
+          return;
+        }
+        const values = data.map(item => Number(item[column.property]));
+        if (this.includeColumn.includes(column.property)) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr);
+            if (!isNaN(value)) {
+              return prev + curr;
+            } else {
+              return prev;
+            }
+          }, 0);
+          sums[index];
+        }
+      });
+      return sums
+    },
+    /** 鼠标移入cell */
+    handleCellEnter(row, column, cell, event) {
+      const property = column.property
+      if (this.editProp.includes(property)) {
+        cell.querySelector('.item__txt').classList.add('item__txt--hover')
+      }
+    },
+    /** 鼠标移出cell */
+    handleCellLeave(row, column, cell, event) {
+      const property = column.property
+      if (this.editProp.includes(property)) {
+        cell.querySelector('.item__txt').classList.remove('item__txt--hover')
+      }
+    },
+    /** 点击cell */
+    handleCellClick(row, column, cell, event) {
+      const property = column.property
+      if (this.editProp.includes(property)) {
+        // 保存cell
+        this.saveCellClick(row, cell)
+        cell.querySelector('.item__txt').style.display = 'none'
+        cell.querySelector('.item__input').style.display = 'inline'
+        cell.querySelector('input').focus()
+      }
+    },
+    /** 取消编辑状态 */
+    cancelEditable(cell) {
+      cell.querySelector('.item__txt').style.display = 'inline'
+      cell.querySelector('.item__input').style.display = 'none'
+    },
+    /** 保存进入编辑的cell */
+    saveCellClick(row, cell) {
+      const id = row.id
+      if (this.clickCellMap[id] !== undefined) {
+        if (!this.clickCellMap[id].includes(cell)) {
+          this.clickCellMap[id].push(cell)
+        }
+      } else {
+        this.clickCellMap[id] = [cell]
+      }
+    },
+    /** 保存数据 */
+    save (row) {
+      // 更新表格的数据
+      row.totalPrice = row.goodsCount * row.goodsPrice
+      const id = row.id
+      // 取消本行所有cell的编辑状态
+      this.clickCellMap[id].forEach(cell => {
+        this.cancelEditable(cell)
+      })
+      this.clickCellMap[id] = []
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
+.item {
+  .item__input {
+    display: none;
+    width: 100px;
+    /* 调整elementUI中样式 如果不需要调整请忽略 */
+    .el-input__inner {
+      height: 24px !important;
+    }
 
+    /* 调整elementUI中样式 如果不需要调整请忽略 */
+    .el-input__suffix {
+      i {
+        font-size: 12px !important;
+        line-height: 26px !important;
+      }
+    }
+  }
+
+  .item__txt {
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    width: 100px;
+    line-height: 24px;
+    padding: 0 8px;
+  }
+
+  .item__txt--hover {
+    border: 1px solid #dddddd;
+    border-radius: 4px;
+    cursor: text;
+  }
+}
 </style>