1

src/views/menu/outdepot/index.vue

@@ -13,7 +13,7 @@
     </el-row>
     <e-dialog :dialog="dialog" @toClose="toClose">
       <template slot="info">
-        <detail-1 v-if="dialog.type == '1'" :form="form" @onSubmit="onSubmit" @addSave="addSave"></detail-1>
+        <detail-1 v-if="dialog.type == '1'" :form="form" @toSave="toSave" @orderSave="orderSave" @orderDelete="orderDelete"></detail-1>
         <info-1 v-if="dialog.type == '2'" :form="form"></info-1>
       </template>
     </e-dialog>
@@ -26,20 +26,17 @@ export default {
   name: 'index',
   props: {},
   components: {
-    info1: () => import('./parts/info-1.vue'),
     detail1: () => import('./parts/detail-1.vue'),
+    info1: () => import('./parts/info-1.vue'),
   },
   data: function () {
     return {
-      // 数据项
       fields: [
         { label: '登记人名称', prop: 'register_name', filter: true },
         { label: '登记人电话', prop: 'register_phone', filter: true },
         { label: '登记时间', prop: 'register_date' },
       ],
-      total: 0,
       opera: [{ label: '详情', method: 'view' }],
-      // 列表
       list: [
         {
           register_name: '胡图图',
@@ -60,10 +57,11 @@ export default {
           order: [{ name: '美羊羊', num: '111' }],
         },
       ],
+      total: 0,
       // 弹框
       dialog: { title: '信息管理', show: false, type: '1' },
       // 添加表单
-      form: { order: [], img_url: [] },
+      form: { order: [] },
     };
   },
   created() {},
@@ -74,8 +72,8 @@ export default {
       this.dialog = { title: '信息管理', show: true, type: '1', widths: '40%' };
     },
     // 提交保存
-    onSubmit(data) {
-      this.toClose();
+    toSave({ data }) {
+      console.log(data);
     },
     // 详细信息
     toView({ data }) {
@@ -88,10 +86,14 @@ export default {
       this.dialog = { title: '详细信息', show: false, type: '1' };
       this.search();
     },
-    // 保存
-    addSave({ data }) {
+    // 商品信息保存
+    orderSave({ data }) {
       this.form.order.push(data);
     },
+    // 删除商品信息
+    orderDelete({ index }) {
+      this.form.order.splice(index, 1);
+    },
   },
   computed: {
     ...mapState(['user']),

src/views/menu/outdepot/parts/detail-1.vue

@@ -6,12 +6,17 @@
           <template #custom="{ item }">
             <template v-if="item.model === 'order'">
               <el-col :span="24">
-                <el-button type="primary" size="mini" @click="toAddOne()">添加商品</el-button>
+                <el-button type="primary" size="mini" @click="orderAdd()">添加商品</el-button>
               </el-col>
-              <el-col :span="24" class="table">
+              <el-col :span="24">
                 <el-table :data="form.order" style="width: 100%" border stripe size="mini">
                   <el-table-column prop="name" label="商品名称" align="center" show-overflow-tooltip> </el-table-column>
                   <el-table-column prop="num" label="商品数量" align="center" show-overflow-tooltip> </el-table-column>
+                  <el-table-column label="操作" align="center">
+                    <template slot-scope="scope">
+                      <el-button size="mini" type="danger" @click="orderDelete(scope.$index, scope.row)">删除</el-button>
+                    </template>
+                  </el-table-column>
                 </el-table>
               </el-col>
             </template>
@@ -21,15 +26,24 @@
     </el-row>
     <e-dialog :dialog="dialog" @toClose="toClose">
       <template slot="info">
-        <el-col v-if="dialog.type == '1'">
-          <el-col :span="18" class="input">
-            <el-input placeholder="请输入库存商品全称" v-model="input" clearable> </el-input>
+        <el-col :span="24" class="one" v-if="dialog.type == '1'">
+          <el-col :span="24" class="one_1">
+            <el-input placeholder="请输入内容" v-model="input" class="input-with-select" size="mini">
+              <el-button slot="append" icon="el-icon-search" @click="marketSearch()"></el-button>
+            </el-input>
           </el-col>
-          <el-col :span="4" class="text">
-            <el-button type="primary" size="small">搜索</el-button>
+          <el-col :span="24" class="one_2">
+            <el-col :span="24" class="list" v-for="(item, index) in marketList" :key="index">
+              <el-col :span="20" class="name textOver">
+                商品名称：<span>{{ item.name }}</span>
+              </el-col>
+              <el-col :span="4">
+                <el-button type="primary" size="mini" @click="stockChange(item)">确认选择</el-button>
+              </el-col>
+            </el-col>
           </el-col>
-          <el-col>
-            <data-form :fields="fieldsOne" :data="twoform" :rules="rulesOne" @save="addSave"> </data-form>
+          <el-col :span="24" class="one_3">
+            <data-form :fields="oneFields" :data="oneForm" :rules="oneRules" @save="orderSave"> </data-form>
           </el-col>
         </el-col>
       </template>
@@ -60,38 +74,61 @@ export default {
         register_date: [{ required: true, message: '请输入登记时间' }],
         reason: [{ required: true, message: '请输入出库原因' }],
       },
-      fieldsOne: [
-        { label: '商品名称', model: 'name' },
+      // 弹框
+      dialog: { title: '信息管理', show: false, type: '1' },
+      oneForm: {},
+      oneFields: [
+        { label: '商品名称', model: 'name', readonly: true },
+        { label: '商品库存数量', model: 'stockNum', readonly: true },
         { label: '商品数量', model: 'num' },
       ],
-      rulesOne: {
+      oneRules: {
         name: [{ required: true, message: '请输入商品名称' }],
+        stockNum: [{ required: true, message: '请输入商品库存数量' }],
         num: [{ required: true, message: '请输入商品数量' }],
       },
-      // 弹框
-      dialog: { title: '信息管理', show: false, type: '1' },
       input: '',
-      twoform: {},
+      marketList: [],
     };
   },
   created() {},
   methods: {
-    search({ skip = 0, limit = 10, ...info } = {}) {},
     toSave({ data }) {
-      this.$emit('onSubmit', data);
+      this.$emit('toSave', { data: data });
     },
-    // 添加商品信息有
-    toAddOne() {
+    // 添加商品
+    orderAdd() {
       this.dialog = { title: '添加商品', show: true, type: '1', widths: '30%' };
     },
-    addSave({ data }) {
-      this.$emit('addSave', { data: data });
-      this.toClose();
+    // 保存订单
+    orderSave({ data }) {
+      if (parseInt(data.num) > parseInt(data.stockNum)) {
+        this.$message({ message: `商品数量大于商品库存数量，不可提交`, type: 'error' });
+      } else {
+        this.$emit('orderSave', { data: data });
+        this.toClose();
+      }
+    },
+    // 删除订单
+    orderDelete(index) {
+      this.$emit('orderDelete', { index: index });
     },
     // 关闭弹框
     toClose() {
       this.dialog = { show: false };
-      this.search();
+    },
+    // 商品查询
+    marketSearch() {
+      let data = [
+        { id: 'test1', name: '124', num: '11' },
+        { id: 'test2', name: '123', num: '11' },
+      ];
+      this.$set(this, `marketList`, data);
+    },
+    // 确认选择
+    stockChange(data) {
+      let arr = { stock_market_id: data.id, name: data.name, stockNum: data.num };
+      this.$set(this, `oneForm`, arr);
     },
   },
   computed: {
@@ -111,16 +148,20 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.input {
-  margin: 0 0 20px 45px;
-}
-.text {
-  margin: 4px 0 0 5px;
-}
-/deep/.el-dialog__body {
-  min-height: 570px !important;
-}
-/deep/.el-dialog {
-  min-height: 650px;
+.one {
+  .one_1 {
+    margin: 0 0 10px 0;
+  }
+  .one_2 {
+    .list {
+      margin: 0 0 10px 0;
+      border: 1px dashed #ccc;
+      border-radius: 5px;
+      padding: 10px;
+      .name {
+        padding: 4px 0;
+      }
+    }
+  }
 }
 </style>