入库管理

src/views/menu/indepot/index.vue

@@ -13,8 +13,8 @@
     </el-row>
     <e-dialog :dialog="dialog" @toClose="toClose">
       <template slot="info">
-        <detail-1 v-if="dialog.type == '1'" :form="form" :stock_typeList="stock_typeList" :typeList="typeList" @toSave="onSubmit" @addSave="addSave"></detail-1>
-        <info-1 v-else-if="dialog.type == '2'" :form="form"></info-1>
+        <info-1 v-if="dialog.type == '1'" :form="form"></info-1>
+        <form-1 v-else-if="dialog.type == '2'" :form="form" @toSave="toSave" @orderSave="orderSave" @orderDelete="orderDelete"></form-1>
       </template>
     </e-dialog>
   </div>
@@ -22,32 +22,45 @@
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
-const { stock_type } = require('@common/src/layout/deploy/dict');
 export default {
   name: 'index',
   props: {},
   components: {
     info1: () => import('./parts/info-1.vue'),
-    detail1: () => import('./parts/detail-1.vue'),
+    form1: () => import('./parts/form-1.vue'),
   },
   data: function () {
     return {
-      // 数据项
       fields: [
         { label: '登记人名称', prop: 'register_name', filter: true },
         { label: '登记人电话', prop: 'register_phone', filter: true },
         { label: '登记时间', prop: 'register_date' },
       ],
       opera: [{ label: '详情', method: 'view' }],
-      // 列表
-      list: [
+      list: [],
+      total: 0,
+      // 弹框
+      dialog: { title: '详细信息', show: false, type: '1' },
+      form: { order: [] },
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      let data = [
         {
           register_name: '胡图图',
           mech_name: '羊村',
           register_phone: '123456789',
           register_date: '2020-20-20',
           reason: '1111',
-          order: [{ name: '喜羊羊', num: '111' }],
+          order: [
+            { name: '喜羊羊', num: '111' },
+            { name: '喜羊羊', num: '111' },
+            { name: '喜羊羊', num: '111' },
+          ],
         },
         {
           register_name: '胡英俊',
@@ -59,52 +72,36 @@ export default {
           status_name: '待收货',
           order: [{ name: '美羊羊', num: '111' }],
         },
-      ],
-      total: 0,
-      // 弹框
-      dialog: { title: '信息管理', show: false, type: '1' },
-      // 添加表单
-      form: { order: [], img_url: [] },
-      // 库存商品类型
-      stock_typeList: stock_type,
-      typeList: [
-        { label: '文件管理用品', value: '0' },
-        { label: '桌面办公用品', value: '1' },
-        { label: '书写工具', value: '2' },
-        { label: '纸制品', value: '3' },
-        { label: '金融用品', value: '4' },
-        { label: '办公机械', value: '5' },
-        { label: '办公生活用品', value: '6' },
-        { label: '其他', value: '7' },
-      ],
-    };
-  },
-  created() {},
-  methods: {
-    search({ skip = 0, limit = 10, ...info } = {}) {},
-    // 添加
+      ];
+      this.$set(this, `list`, data);
+    },
+    // 查看信息
+    toView({ data }) {
+      this.$set(this, `form`, data);
+      this.dialog = { title: '详细信息', show: true, type: '1', widths: '40%' };
+    },
+    // 添加入库
     toAdd() {
-      this.dialog = { title: '信息管理', show: true, type: '1', widths: '40%' };
+      this.dialog = { title: '入库信息管理', show: true, type: '2', widths: '40%' };
     },
-    // 提交保存
-    onSubmit({ data }) {
+    // 保存信息
+    toSave({ data }) {
       console.log(data);
     },
-    // 详细信息
-    toView({ data }) {
-      this.$set(this, `form`, data);
-      this.dialog = { title: '详细信息', show: true, type: '2', widths: '40%' };
+    // 商品保存
+    orderSave({ data }) {
+      this.form.order.push(data);
+    },
+    // 删除商品信息
+    orderDelete({ index }) {
+      this.form.order.splice(index, 1);
     },
     // 关闭弹框
     toClose() {
-      this.form = { order: [], img_url: [] };
-      this.dialog = { title: '详细信息', show: false, type: '1' };
+      this.form = { order: [] };
+      this.dialog = { title: '详细信息', show: false, type: '1', widths: '40%' };
       this.search();
     },
-    // 保存
-    addSave({ data }) {
-      this.form.order.push(data);
-    },
   },
   computed: {
     ...mapState(['user']),
@@ -122,9 +119,4 @@ export default {
 };
 </script>
 
-<style lang="less" scoped>
-/deep/.el-dialog__body {
-  padding: 10px;
-  min-height: 570px;
-}
-</style>
+<style lang="less" scoped></style>

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

@@ -1,18 +1,23 @@
 <template>
-  <div id="detail-1">
+  <div id="form-1">
     <el-row>
       <el-col :span="24" class="main">
         <data-form :fields="fields" :data="form" :rules="rules" @save="toSave">
           <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="toAddTwo()">添加商品(库存无)</el-button>
+              <el-col :span="24" style="margin: 0 0 10px 0">
+                <el-button type="primary" size="mini" @click="orderAdd('1')">添加商品(库存有)</el-button>
+                <el-button type="primary" size="mini" @click="orderAdd('2')">添加商品(库存无)</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>
@@ -22,33 +27,42 @@
     </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="orderForm" :rules="oneRules" @save="orderSave"> </data-form>
           </el-col>
         </el-col>
-        <el-col v-if="dialog.type == '2'">
-          <data-form :fields="fieldsTwo" :data="twoform" :rules="rulesTwo" @save="addSave">
+        <el-col :span="24" class="two" v-else-if="dialog.type == '2'">
+          <data-form :fields="twoFields" :data="orderForm" :rules="twoRules" @save="orderSave">
             <template #options="{ item }">
               <template v-if="item.model === 'stock_type_name'">
                 <el-option v-for="item in stock_typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
               </template>
-              <template v-if="item.model === 'type_name'">
+              <template v-else-if="item.model === 'type_name'">
                 <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
               </template>
             </template>
             <template #custom="{ item }">
               <template v-if="item.model === 'img_url'">
-                <s-upload :limit="4" :data="twoform.img_url" type="img_url" url="/files/live/upload" @upload="uplSuc" @delete="uplDel"></s-upload>
+                <s-upload :limit="4" :data="orderForm.img_url" type="img_url" url="/files/live/upload" @upload="uplSuc" @delete="uplDel"></s-upload>
               </template>
               <template v-else-if="item.model === 'code'">
-                <el-input v-model="twoform.code" placeholder="请输入资产编号" v-if="twoform.stock_type_name == '1'"></el-input>
+                <el-input v-model="orderForm.code" placeholder="请输入资产编号" v-if="orderForm.stock_type_name == '1'"></el-input>
               </template>
             </template>
           </data-form>
@@ -59,14 +73,12 @@
 </template>
 
 <script>
+const { stock_type } = require('@common/src/layout/deploy/dict');
 import { mapState, createNamespacedHelpers } from 'vuex';
-
 export default {
-  name: 'detail-1',
+  name: 'form-1',
   props: {
     form: { type: Object },
-    stock_typeList: { type: Array },
-    typeList: { type: Array },
   },
   components: {},
   data: function () {
@@ -84,15 +96,22 @@ export default {
         register_date: [{ required: true, message: '请输入登记时间' }],
         reason: [{ required: true, message: '请输入入库原因' }],
       },
-      fieldsOne: [
-        { label: '商品名称', model: 'name' },
+      // 弹框
+      dialog: { title: '商品信息', show: false, type: '1' },
+      orderForm: { img_url: [] },
+      // 有库存
+      oneFields: [
+        { label: '商品名称', model: 'name', readonly: true },
         { label: '商品数量', model: 'num' },
       ],
-      rulesOne: {
+      oneRules: {
         name: [{ required: true, message: '请输入商品名称' }],
         num: [{ required: true, message: '请输入商品数量' }],
       },
-      fieldsTwo: [
+      input: '',
+      marketList: [],
+      // 无库存
+      twoFields: [
         { label: '商品类别', model: 'stock_type_name', type: 'select' },
         { label: '资产编号', model: 'code', custom: true },
         { label: '商品类型', model: 'type_name', type: 'select' },
@@ -102,7 +121,7 @@ export default {
         { label: '商品简介', model: 'brief' },
         { label: '商品图片', model: 'img_url', custom: true },
       ],
-      rulesTwo: {
+      twoRules: {
         stock_type_name: [{ required: true, message: '请选择商品类别' }],
         code: [{ required: false, message: '请输入资产编号' }],
         type_name: [{ required: true, message: '请选择商品类型' }],
@@ -111,43 +130,65 @@ export default {
         brief: [{ required: true, message: '请输入商品简介' }],
         money: [{ required: true, message: '请输入商品单价' }],
       },
-      // 弹框
-      dialog: { title: '信息管理', show: false, type: '1' },
-      input: '',
-      twoform: {},
+      // 库存商品类型
+      stock_typeList: stock_type,
+      typeList: [
+        { label: '文件管理用品', value: '0' },
+        { label: '桌面办公用品', value: '1' },
+        { label: '书写工具', value: '2' },
+        { label: '纸制品', value: '3' },
+        { label: '金融用品', value: '4' },
+        { label: '办公机械', value: '5' },
+        { label: '办公生活用品', value: '6' },
+        { label: '其他', value: '7' },
+      ],
     };
   },
   created() {},
   methods: {
-    search({ skip = 0, limit = 10, ...info } = {}) {},
+    // 保存
     toSave({ data }) {
       this.$emit('toSave', { data: data });
     },
-    // 添加商品信息有
-    toAddOne() {
-      this.dialog = { title: '添加商品', show: true, type: '1', widths: '30%' };
+    // 添加商品
+    orderAdd(type) {
+      this.dialog = { title: '商品信息', show: true, type: `${type}`, widths: '35%' };
+    },
+    // 商品查询
+    marketSearch() {
+      let data = [
+        { id: 'test1', name: '124', num: '11' },
+        { id: 'test2', name: '123', num: '11' },
+      ];
+      this.$set(this, `marketList`, data);
     },
-    // 添加商品信息无
-    toAddTwo() {
-      this.dialog = { title: '添加商品', show: true, type: '2', widths: '30%' };
+    // 确认选择
+    stockChange(data) {
+      let arr = { stock_market_id: data.id, name: data.name };
+      this.$set(this, `orderForm`, arr);
     },
-    addSave({ data }) {
-      this.$emit('addSave', { data: data });
+    // 保存订单
+    orderSave({ data }) {
+      this.$emit('orderSave', { data: data });
       this.toClose();
     },
+    // 删除订单
+    orderDelete(index) {
+      this.$emit('orderDelete', { index: index });
+    },
     // 上传图片
     uplSuc({ type, data }) {
-      let list = this.form[type];
-      this.$set(this.form, `${type}`, [...order, { name: data.name, url: data.uri }]);
+      let list = this.orderForm[type];
+      this.$set(this.orderForm, `${type}`, [...list, { name: data.name, url: data.uri }]);
     },
     // 删除图片
     uplDel({ type, data, list }) {
-      this.$set(this.form, `${type}`, list);
+      this.$set(this.orderForm, `${type}`, list);
     },
     // 关闭弹框
     toClose() {
-      this.dialog = { show: false };
-      this.search();
+      this.orderForm = { img_url: [] };
+      this.dialog = { title: '商品信息', show: false };
     },
   },
   computed: {
@@ -167,14 +208,20 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.input {
-  margin: 0 0 20px 45px;
-}
-.text {
-  margin: 4px 0 0 5px;
-}
-/deep/.el-dialog__body {
-  padding: 10px;
-  min-height: 570px;
+.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>

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

@@ -5,7 +5,7 @@
         <data-form :fields="fields" :data="form" :rules="rules" @save="toSave">
           <template #custom="{ item }">
             <template v-if="item.model === 'order'">
-              <el-col :span="24">
+              <el-col :span="24" style="margin: 0 0 10px 0">
                 <el-button type="primary" size="mini" @click="orderAdd()">添加商品</el-button>
               </el-col>
               <el-col :span="24">