yyw提交

src/views/commodity/list.vue

@@ -47,16 +47,18 @@
       </div>
       <el-table :data="goodsList" style="width: 100%" border v-loading="loading">
         <el-table-column prop="id" label="ID" width="80" align="center" />
-        <el-table-column prop="title" label="商品名称" align="center" />
+        <el-table-column label="商品名称" min-width="150">
-        <el-table-column prop="goods_code" label="商品编码" align="center" />
-        <el-table-column prop="brand.name" label="商品品牌" align="center" />
-        <el-table-column label="商品图片" align="center" min-width="150">
           <template #default="scope">
             <div class="imgBox">
-              <el-image :z-index="9999" v-for="(item, index) in scope.row.images" :key="index" :src="item" :hide-on-click-modal="true" :preview-src-list="[item]" fit="cover" :preview-teleported="true" />
+              <div v-if="scope.row.images && scope.row.images[0]">
+                <el-image :z-index="9999" :src="scope.row.images[0]" :hide-on-click-modal="true" :preview-src-list="[scope.row.images[0]]" fit="cover" :preview-teleported="true" />
+              </div>
+              <div>{{ scope.row.title }}</div>
             </div>
           </template>
         </el-table-column>
+        <el-table-column prop="brand.name" label="商品品牌" align="center" />
+        <el-table-column prop="goods_code" label="商品编码" align="center" />
         <el-table-column prop="warehouse.name" label="仓库" align="center" />
         <el-table-column prop="introduce" label="说明" align="center" />
         <el-table-column prop="admin_user.username" label="添加人" align="center" />
@@ -333,7 +335,7 @@ export default {
     }
 
     function handleRemoveImg(res, ress) {
-      data.fileList = ress
+      data.fileList = []
     }
 
     function handleUploadError(err) {
@@ -348,7 +350,7 @@ export default {
     }
     
     function handleSuccess(res) {
-      data.fileList.push({url: res.data.link})
+      data.fileList = [{url: res.data.link}]
     }
 
     function handleSkuDelete(index) {
@@ -470,10 +472,10 @@ export default {
   }
   .imgBox{
     display: flex;
-    flex-wrap: wrap;
+    align-items: center;
     .el-image{
-      width: 60px;
+      width: 70px;
-      height: 60px;
+      height: 70px;
       border-radius: 4px;
       margin-right: 10px;
     }

src/views/warehouse/io.vue

@@ -1,25 +1,35 @@
 <template>
   <div class="pageBox">
-    <!-- <div class="searchBox">
+    <div class="searchBox">
       <div class="row">
         <span class="span">商品名称：</span>
-        <div class="right"><el-input v-model="goods_name" class="wid100" clearable></el-input></div>
+        <div class="right"><el-input v-model="goods_title" class="wid100" clearable></el-input></div>
+      </div>
+      <div class="row">
+        <span class="span">来源：</span>
+        <div class="right">
+          <el-select v-model="target_type" placeholder="请选择" clearable class="wid100">
+            <el-option label="采购" value="purchase" />
+            <el-option label="出库" value="outbound" />
+          </el-select>
+        </div>
       </div>
       <div class="row">
         <el-button type="primary" @click="handleSearch"><el-icon><Search /></el-icon>&nbsp;筛选</el-button>
       </div>
-    </div> -->
+    </div>
 
     <el-card shadow="never">
-      <!-- <div class="opaBox">
+      <div class="opaBox">
-        <el-button type="warning" @click="handleExport"><span class="iconfont icon-daochu"></span>&nbsp;导出</el-button>
+        <el-button type="primary" @click="addOut"><el-icon><Plus /></el-icon>&nbsp;新增出库</el-button>
-      </div> -->
+      </div>
       <el-table :data="goodsList" style="width: 100%" border v-loading="loading">
         <el-table-column prop="id" label="ID" width="80" align="center" />
         <el-table-column prop="target_type" label="来源" align="center" />
         <el-table-column prop="goods.title" label="商品名称" align="center" />
-        <el-table-column prop="goods_id" label="商品编码" align="center" />
+        <el-table-column prop="goods.brand.name" label="商品品牌" align="center" />
-        <el-table-column prop="sku.title" label="规格名称" align="center" />
+        <el-table-column prop="goods_id" label="商品ID" align="center" />
+        <el-table-column prop="sku.title" label="规格名称" align="center" min-width="120" />
         <el-table-column prop="sku.sku_code" label="规格编码" align="center" />
         <el-table-column prop="num" label="数量" align="center" />
         <el-table-column prop="cost" label="成本" align="center" />
@@ -28,10 +38,6 @@
         <el-table-column prop="validity" label="有效时间" align="center">
           <template #default="scope">
             <span>{{scope.row.validity_type == 'none' ? '-' : scope.row.validity}}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="validity_type" label="有效期类型" align="center">
-          <template #default="scope">
             <span>{{Validity[scope.row.validity_type]}}</span>
           </template>
         </el-table-column>
@@ -52,6 +58,51 @@
       </div>
     </el-card>
 
+    <el-dialog v-model="showOut" width="700px" title="新增出库">
+      <el-form label-position="right" label-width="110px">
+        <el-form-item label="供应商：">
+          <el-select v-model="tempData.supplier_id" placeholder="请选择" clearable filterable>
+            <el-option v-for="it in suppliersList" :key="it.id" :label="it.name" :value="it.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="商品/规格：">
+          <el-select v-model="goodsSku" value-key="id" placeholder="请选择" clearable filterable @change="changeSku">
+            <el-option v-for="it in skusList" :key="it.id" :label="it.goods && it.goods.title + '（' + it.title + '）'" :value="it" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="仓库：">
+          <el-select v-model="tempData.warehouse_id" placeholder="请选择" clearable filterable>
+            <el-option v-for="it in warehouseList" :key="it.id" :label="it.name" :value="it.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="出库数量：">
+          <el-input-number v-model="tempData.num" :min="0" />
+        </el-form-item>
+        <el-form-item label="出库日期：">
+          <el-date-picker
+            v-model="tempData.out_put_time"
+            type="date"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            placeholder="选择日期"
+            style="width: 270px;"
+            clearable>
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="批次号：">
+          <el-input v-model="tempData.batch_number" />
+        </el-form-item>
+        <el-form-item label="备注：">
+          <el-input type="textarea" :rows="3" v-model="tempData.note" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="showOut = false">取消</el-button>
+          <el-button type="primary" @click="commitOut()" :loading="opa_loading">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -59,7 +110,7 @@
 import { onMounted, reactive, toRefs } from "vue"
 import { get, post } from "@/api/request"
 import { Search, Plus, Edit, ZoomIn, Delete } from '@element-plus/icons'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
 
 export default {
   components: {
@@ -67,6 +118,7 @@ export default {
   },
   setup() {
     const data = reactive({
+      target_type: '',
       goodsList: [],
       page: 1,
       pageSize: 10,
@@ -77,7 +129,15 @@ export default {
         'month': '月',
         'year': '年',
         'none': '长期'
-      }
+      },
+      goods_title: '',
+      tempData: {},
+      showOut: false,
+      warehouseList: [],
+      suppliersList: [],
+      skusList: [],
+      goodsSku: {},
+      opa_loading: false
     })
 
     function handleSearch() {
@@ -90,6 +150,8 @@ export default {
       let params = {
         page: data.page,
         pageSize: data.pageSize,
+        goods_title: data.goods_title,
+        target_type: data.target_type,
         service_id: data.service_id,
         start_date: data.pickerTime ? data.pickerTime[0] : '',
         end_date: data.pickerTime ? data.pickerTime[1] : ''
@@ -114,8 +176,58 @@ export default {
       fetchData()
     }
 
+    function addOut() {
+      data.goodsSku = {}
+      data.tempData = {num: 0}
+      data.showOut = true
+    }
+
+    function commitOut() {
+      data.opa_loading = true
+      let params = {
+        ...data.tempData
+      }
+      post(`/api/goods-put-records`, params).then(() => {
+        fetchData()
+        ElMessage({ type: 'success', message: '新增成功' })
+        data.showOut = false
+        data.opa_loading = false
+      }).catch((err) => {
+        data.opa_loading = false
+      })
+    }
+
+    function getWarehouseList() {
+      get(`/api/all/warehouses`).then((res) => {
+        data.warehouseList = res.data
+      })
+    }
+
+    function getSuppliersList() {
+      get(`/api/suppliers`, {pageSize: 1000}).then((res) => {
+        data.suppliersList = res.data
+      })
+    }
+
+    function getSkusList() {
+      get(`/api/all/goods-skus`).then((res) => {
+        data.skusList = res.data
+      })
+    }
+
+    function changeSku(e) {
+      data.tempData.goodsSkuId = ''
+      if(e) {
+        data.tempData.goodsSkuId = e.id
+        data.tempData.warehouse_id = e.warehouse_id
+      }
+    }
+
     onMounted(() => {
       fetchData()
+      getWarehouseList()
+      getSuppliersList()
+      getSkusList()
     })
 
     return {
@@ -124,7 +236,12 @@ export default {
       handleCurrentChange,
       handleSizeChange,
       fetchData,
-
+      addOut,
+      commitOut,
+      getWarehouseList,
+      getSuppliersList,
+      getSkusList,
+      changeSku
     }
   }
 }