商品

src/api/inventory.js

@@ -82,3 +82,11 @@ export function getGoodsList(params) {
     params
   })
 }
+// 万科后台_物品插入操作
+export function addGoods(params) {
+  return request({
+    url: 'vankeGoods/insertGoods',
+    method: 'post',
+    params
+  })
+}

src/views/inv/modules/addGoodsModal.vue

@@ -7,7 +7,7 @@
     <el-row style="padding: 10px 0;text-align: left;">
       <el-button type="primary" size="medium" @click="handleAdd">新增</el-button>
     </el-row>
-    <div class="scroll-container"
+    <div class="scroll-container no-bottom"
          ref="scrollContainer">
       <el-table
         :data="tableData"
@@ -16,8 +16,10 @@
         <el-table-column prop="name" label="物品名称">
           <template slot-scope="scope">
             <el-form :model="scope.row">
-              <el-form-item size="mini" >
-                <el-input v-if="scope.row.isOK" v-model="scope.row.name" class="input-width" placeholder="请输入物品名称"></el-input>
+              <el-form-item size="mini" prop="name"
+              :rules="[{required: true,trigger: 'blur',message: '物品名称不能为空'}]">
+                <el-input v-if="scope.row.isOK" v-model="scope.row.name" class="input-width"
+                          placeholder="物品名称"></el-input>
                 <span v-else>{{scope.row.name}}</span>
               </el-form-item>
             </el-form>
@@ -26,9 +28,10 @@
         <el-table-column prop="name" label="型号">
           <template slot-scope="scope">
             <el-form :model="scope.row">
-              <el-form-item size="mini" >
-                <el-input v-if="scope.row.isOK" v-model="scope.row.model" class="input-width" placeholder="请输入型号"></el-input>
-                <span v-else>{{scope.row.model}}</span>
+              <el-form-item size="mini" prop="goodsNo"  :rules="[{required: true,trigger: 'blur',message: '型号不能为空'}]">
+                <el-input v-if="scope.row.isOK" v-model="scope.row.goodsNo" class="input-width"
+                          placeholder="型号"></el-input>
+                <span v-else>{{scope.row.goodsNo}}</span>
               </el-form-item>
             </el-form>
           </template>
@@ -36,27 +39,27 @@
         <el-table-column prop="name" label="物品类别">
           <template slot-scope="scope">
             <el-form :model="scope.row">
-              <el-form-item size="mini" >
-              <el-select v-if="scope.row.isOK" v-model="scope.row.cate"
+              <el-form-item size="mini" prop="goodsCategoryId"  :rules="[{required: true,trigger: 'change',message: '物品类别不能为空'}]">
+                <el-select v-if="scope.row.isOK" v-model="scope.row.goodsCategoryId"
                            class="input-width"
                            clearable
-                         placeholder="请选择物品类型">
-                <el-option v-for="item in statusOptions"
-                           :key="item.value"
-                           :label="item.label"
-                           :value="item.value"></el-option>
+                           placeholder="物品类别">
+                  <el-option v-for="item in categoryOptions"
+                             :key="item.id"
+                             :label="item.name"
+                             :value="item.id"></el-option>
                 </el-select>
-                <span v-else>{{scope.row.mcht}}</span>
+                <span v-else>{{getName(scope.row.goodsCategoryId, categoryOptions)}}</span>
               </el-form-item>
             </el-form>
           </template>
         </el-table-column>
         <el-table-column prop="name" label="数量">
           <template slot-scope="scope">
-            <el-form :model="scope.row">
-              <el-form-item size="mini" >
-                <el-input v-if="scope.row.isOK" v-model="scope.row.num" class="input-width" placeholder="请输入数量"></el-input>
-                <span v-else>{{scope.row.num}}</span>
+            <el-form :model="scope.row" >
+              <el-form-item size="mini" prop="goodsNum"  :rules="[{required: true,trigger: 'blur',message: '数量不能为空'}]">
+                <el-input v-if="scope.row.isOK" v-model="scope.row.goodsNum" class="input-width" placeholder="数量"></el-input>
+                <span v-else>{{scope.row.goodsNum}}</span>
               </el-form-item>
             </el-form>
           </template>
@@ -64,9 +67,10 @@
         <el-table-column prop="name" label="价格（元）">
           <template slot-scope="scope">
             <el-form :model="scope.row">
-              <el-form-item size="mini" >
-                <el-input v-if="scope.row.isOK" v-model="scope.row.price" class="input-width" placeholder="请输入价格"></el-input>
-                <span v-else>{{scope.row.price}}</span>
+              <el-form-item size="mini"  prop="prict"  :rules="[{required: true,trigger: 'blur',message: '价格不能为空'}]">
+                <el-input v-if="scope.row.isOK" v-model="scope.row.prict" class="input-width"
+                          placeholder="价格"></el-input>
+                <span v-else>{{scope.row.prict}}</span>
               </el-form-item>
             </el-form>
           </template>
@@ -74,32 +78,33 @@
         <el-table-column prop="name" label="供应商">
           <template slot-scope="scope">
             <el-form :model="scope.row">
-              <el-form-item size="mini" >
-                <el-select v-if="scope.row.isOK" v-model="scope.row.mcht"
+              <el-form-item size="mini"  prop="supplierId"  :rules="[{required: true,trigger: 'change',message: '供应商不能为空'}]" >
+                <el-select v-if="scope.row.isOK" v-model="scope.row.supplierId"
                            class="input-width"
                            clearable
-                           placeholder="请选择供应商">
-                  <el-option v-for="item in statusOptions"
-                             :key="item.value"
-                             :label="item.label"
-                             :value="item.value"></el-option>
+                           placeholder="供应商">
+                  <el-option v-for="item in supplierOptions"
+                             :key="item.id"
+                             :label="item.supplierName"
+                             :value="item.id"></el-option>
                 </el-select>
-                <span v-else>{{scope.row.mcht}}</span>
+                <span v-else>{{getName(scope.row.supplierId, supplierOptions,1)}}</span>
               </el-form-item>
             </el-form>
           </template>
         </el-table-column>
         <el-table-column label="操作"
-                         align="center">
+                         align="center"
+                         width="100">
           <template slot-scope="scope">
-            <el-button type="danger" icon="el-icon-delete" circle></el-button>
+            <el-button type="danger" size="small" @click="handleDelete(scope.$index)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
     <div slot="footer">
       <el-button type="primary"
-                 @click="close">确认
+                 @click="submit">确认
       </el-button>
       <el-button
         @click="close">返回
@@ -109,49 +114,97 @@
   </el-dialog>
 </template>
 <script>
-import { addMember, updateMcht } from '@/api/audit'
+import { getGoodsCategoryList,addGoods} from '@/api/inventory'
+import { getSuppliersList } from '@/api/supplier'
 
 // 添加编辑属性
 export default {
   name: 'addGoodsModal',
   data() {
     return {
-      statusOptions: [{label: '物品',value: 1}],
       visible: false,
       title: null,
       loading: false,
-      tableData: []
+      tableData: [],
+      categoryOptions: [],
+      supplierOptions: []
     }
   },
   methods: {
+    // 物品类别
+    getGoodsCategoryList() {
+      getGoodsCategoryList().then(res => {
+        this.categoryOptions = res.data.list
+      })
+    },
+    // 供应商
+    getSuppliersList() {
+      getSuppliersList().then(res => {
+        this.supplierOptions = res.data.list
+      })
+    },
     init() {
+      this.getGoodsCategoryList()
+      this.getSuppliersList()
+      this.tableData = []
       this.$nextTick(() => {
         this.$refs.scrollContainer.scrollTop = 0
       })
 
     },
-    add(){
+    add() {
       this.visible = true
-      this.title="新增物品"
+      this.title = '新增物品'
       this.init()
     },
     close() {
       this.visible = false
     },
-    handleAdd(){
+    handleAdd() {
+     for(var i of this.tableData){
+      i.isOK = false
+     }
       this.tableData.push({
         name: '',
-        num: '',
-        cate: '',
-        model: '',
-        price: '',
-        mcht:'',
+        goodsNo: '',
+        goodsNum: '',
+        prict: '',
+        supplierId: '',
+        goodsCategoryId: '',
         isOK: true
       },)
     },
-    dbclick(row, event, column){
+    dbclick(row, event, column) {
+      for(var i of this.tableData){
+        i.isOK = false
+      }
       console.log(row, event, column)
-      row.isOK =!row.isOK
+      row.isOK = !row.isOK
+    },
+    submit() {
+      addGoods(this.tableData).then(res=>{
+        this.$emit('ok')
+        this.visible = false
+      })
+    },
+    // 删除
+    handleDelete(index){
+      this.tableData.splice(index,1)
+    },
+    // 获取名称
+    getName(id,arr,type){
+      if(!id){
+        return ''
+      }
+      console.log('arr',id, arr)
+      let name = null
+      if(type){
+        name = arr.filter(item=>item.id == id)[0].supplierName
+      }else {
+        name= arr.filter(item=>item.id == id)[0].name
+      }
+      return name
+
     }
   }
 }
@@ -162,7 +215,13 @@ export default {
     overflow: hidden;
     overflow-y: auto;
   }
+
   .input-width {
-    width: 100px;
+    width: 110px;
+  }
+</style>
+<style>
+ .no-bottom  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
+    margin-bottom: 0;
   }
 </style>