入库单模版

config/dev.env.js

@@ -2,12 +2,12 @@ module.exports = {
 	NODE_ENV: '"development"',
 	ENV_CONFIG: '"dev"',
   // 本地数据库：登录用户名 admin123，密码 admin123
-  BASE_API: '"http://192.168.100.188:9085/admin"',
-  OS_API: '"http://192.168.100.188:9085/admin"',
+  // BASE_API: '"http://192.168.100.188:9085/admin"',
+  // OS_API: '"http://192.168.100.188:9085/admin"',
   // BASE_API: '"http://47.103.79.143:9085/admin"',
   // OS_API: '"http://47.103.79.143:9085/admin"',
-  // OS_API: '"https://xiaoyou.dgtis.com/admin"',
-  // BASE_API: '"https://xiaoyou.dgtis.com/admin"',
+  OS_API: '"https://xiaoyou.dgtis.com/admin"',
+  BASE_API: '"https://xiaoyou.dgtis.com/admin"',
   
   
   

src/main.js

@@ -17,9 +17,12 @@ import { handleTree,resetForm } from "@/utils/index";
 // 自定义表格工具组件
 import RightToolbar from "@/components/RightToolbar"
 
+import UIComponents from '@/ui-components'
+
 Vue.use(Element, {
   size: 'medium' // set element-ui default size
 })
+Vue.use(UIComponents)
 const prodUrl = 'http://192.168.100.188:9085/admin/storage/create';//正式地址
 
 // const prodUrl = 'http://47.103.79.143:9085/admin/storage/create';//阿里云测试地址

src/ui-components/PickerGoods/index.js

@@ -0,0 +1,15 @@
+/**
+ * Created by Andste on 2021/8/18.
+ * 采购计划选择器
+ * 依赖于element-ui
+ */
+import Vue from 'vue'
+import PickerGoods from './src/main.vue'
+import PickerGoodsPicker from './src/main.js'
+
+PickerGoods.install = function() {
+  Vue.component(PickerGoods.name, PickerGoods)
+}
+Vue.prototype.$EnPickerGoods = PickerGoodsPicker
+
+export default PickerGoods

src/ui-components/PickerGoods/src/defaultOptions.js

@@ -0,0 +1,57 @@
+import request from '@/utils/request'
+
+export const props = {
+  // 显示选择器
+  show: {
+    type: Boolean,
+    default: false
+  },
+  // 已选导购的ID集合
+  selectedIds: {
+    type: Array,
+    required: false,
+    default: () => ([])
+  },
+  // 获取导购列表API
+  goodsApi: {
+    type: String,
+    required: true
+  },
+  // 扩展的导购API参数
+  goodsApiParams: {
+    type: Object,
+    default: () => ({})
+  },
+  // 请求方法
+  request: {
+    type: Function,
+    required: false,
+    default: request
+  },
+  // 最大可选个数
+  limit: {
+    type: Number,
+    default: -1
+  },
+  // 扩展列
+  columns: {
+    type: Array,
+    default: () => (generalColumns)
+  },
+  // 是否是管理端
+  isAdmin: {
+    type: Boolean,
+    default: true
+  }
+}
+
+export const data = {
+}
+
+// 一般列
+export const generalColumns = [
+  { label: '商品编号', prop: 'id' },
+  { label: '商品名称', prop: 'dictName'},
+  { label: '单价(￥)', prop: 'status' },
+  { label: '商品类别', prop: 'dictType' }
+]

src/ui-components/PickerGoods/src/main.js

@@ -0,0 +1,43 @@
+import Vue from 'vue'
+import Main from './main.vue'
+import * as Options from './defaultOptions'
+
+let GoodsConstructor = Vue.extend(Main)
+
+let instance
+let seed = 1
+
+const Goods = function(options) {
+  if (Vue.prototype.$isServer) return
+  if (instance) instance.close()
+
+  return new Promise((resolve, reject) => {
+    options = options || {}
+    if (!options.goodsApi) {
+      options.goodsApi = process.env.BASE_API +'/system/dict/type/list';
+    }
+    let id = 'goods_picker_' + seed++
+    options.show = true
+    instance = new GoodsConstructor({ propsData: options })
+    instance.id = id
+    instance.$mount()
+    instance.resolve = resolve
+    instance.reject = reject
+    instance.close = closeInstance
+    document.body.appendChild(instance.$el)
+  })
+}
+
+// 扩展列
+Goods.columns = {
+  general: Options.generalColumns
+}
+
+function closeInstance() {
+  instance.$destroy()
+  instance.$el.parentNode.removeChild(instance.$el)
+  // instance.reject('取消了')
+  instance = undefined
+}
+
+export default Goods

src/ui-components/PickerGoods/src/main.vue

@@ -0,0 +1,243 @@
+<template>
+  <el-dialog title="商品选择器" width="60%" :visible.sync="dialogVisible" :append-to-body="false"
+    :modal-append-to-body="false" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="true"
+    @closed="handleClose" class="goods-picker">
+    <div class="goods-picker__body">
+      <div class="goods-picker__filter">
+        <div class="filter-item">
+          <el-input size="small" v-model="searchParams.keyword" clearable placeholder="请输入关键字" style="width: 200px" />
+        </div>
+        <div class="filter-item">
+          <el-button size="small" type="primary" @click="handleSearch">搜索 </el-button>
+        </div>
+      </div>
+      <el-table size="small" ref="goodsTable" v-loading="loading" :data="purchasePlanData.items" border row-key="id"
+        @selection-change="handleSelectionChange" @row-click="handleRowClick" style="width: 100%; min-height: 400px">
+        <el-table-column v-if="limit === 1" label="选择" width="55" align="center">
+          <template slot-scope="scope">
+            <el-radio v-model="radioGuide" :label="scope.row"
+              :disabled="selectedIds.some(v => v === scope.row.id)"></el-radio>
+          </template>
+        </el-table-column>
+        <el-table-column v-else type="selection" label="选择" width="55" :selectable="checkDisable" reserve-selection
+          align="center" />
+        <el-table-column v-for="column in columns" :key="column.label" align="center" v-bind="column" />
+      </el-table>
+      <div class="goods-picker__tools">
+        <div class="tools">
+        </div>
+        <el-pagination v-if="purchasePlanData.total" background :page-sizes="[10, 30, 50, 100]"
+          :total="purchasePlanData.total" layout="total, sizes, prev, next, pager, jumper"
+          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+      </div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleCancel">取 消</el-button>
+      <el-button type="primary" @click="handleConfirm">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import * as DefaultOptions from './defaultOptions'
+import request from '@/utils/request'
+
+export default {
+  name: 'EnPurchasePlan',
+  props: {
+    ...DefaultOptions.props
+  },
+  data() {
+    return {
+      ...DefaultOptions.data,
+      dialogVisible: false,
+      selected: [],
+      radioGuide: '',
+      goodsParams: {
+        page: 1,
+        limit: 10,
+        // market_enable: true //状态
+      },
+      searchParams: {
+        keyword: ''
+      },
+      purchasePlanData: {
+        items: [],
+        total: 0
+      },
+      // 加载列表
+      loading: false
+    }
+  },
+  mounted() {
+    this.getGoodsList()
+  },
+  watch: {
+    show: {
+      immediate: true,
+      handler(newVal) {
+        this.$nextTick(() => {
+          this.dialogVisible = newVal
+        })
+      }
+    }
+  },
+  methods: {
+    checkDisable(row, index) {
+      return this.selectedIds.some(v => v === row.id) ? 0 : 1
+    },
+    // 关闭
+    handleClose() {
+      this.$nextTick(this.close)
+      this.dialogVisible = false
+      this.$emit('closed')
+    },
+    // 取消
+    handleCancel() {
+      this.dialogVisible = false
+      this.$emit('cancel')
+      // typeof this.reject === 'function' && this.reject('取消了')
+    },
+    // 确认
+    handleConfirm() {
+      if (this.limit === 1) {
+        if (!this.radioGuide) return this.$message.error('请选择商品/物料')
+      } else {
+        if (!this.selected.length) return this.$message.error('请选择商品/物料')
+      }
+      this.dialogVisible = false
+      let goods = this.limit === 1 ? [this.radioGuide] : this.selected
+      goods = JSON.parse(JSON.stringify(goods))
+      this.$emit('confirm', goods)
+      typeof this.resolve === 'function' && this.resolve(goods)
+      this.$emit('close')
+    },
+    // 选择
+    handleSelectionChange(val) {
+      this.selected = val
+    },
+    // 分页大小发生改变
+    handleSizeChange(size) {
+      this.goodsParams.page_size = size
+      this.getGoodsList()
+    },
+    // 当前页数发生改版
+    handleCurrentChange(current) {
+      this.goodsParams.page = current
+      this.getGoodsList()
+    },
+    // 搜索
+    handleSearch() {
+      this.goodsParams.page = 1
+      this.goodsParams = {
+        ...this.goodsParams,
+        ...this.searchParams
+      }
+      this.getGoodsList()
+    },
+    // 点击了某行
+    handleRowClick(row) {
+      if (this.limit === 1) {
+        this.radioGuide = row
+      } else {
+        this.$refs.goodsTable.toggleRowSelection(row)
+      }
+    },
+    // 获取列表
+    async getGoodsList() {
+      this.loading = true
+      const params = JSON.parse(JSON.stringify(this.goodsParams))
+      request({
+        url: this.goodsApi,
+        method: 'get',
+        loading: false,
+        params: {
+          ...params,
+          ...this.goodsApiParams,
+        }
+      }).then(response => {
+        this.loading = false
+        this.purchasePlanData = response.data.data
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.goods-picker {
+  clear: both;
+
+  .goods-picker__filter {
+    float: right;
+  }
+
+  ::v-deep {
+    .el-dialog__body {
+      padding-top: 20px;
+      padding-bottom: 20px;
+    }
+
+    .el-dialog__header {
+      padding: 9px 20px 10px;
+      border-bottom: 1px solid #e5e5e5;
+      text-shadow: 0 1px 0 #fff;
+      background-color: #efefef;
+    }
+
+    .el-dialog__footer {
+      border-top: solid 1px #e5e5e5;
+      background: #f5f5f5;
+    }
+
+    .el-table .el-table__body-wrapper .el-table__row {
+      cursor: pointer;
+    }
+  }
+
+  &__filter {
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+    border-right: none;
+    position: relative;
+    margin-bottom: 10px;
+
+    .filter-item {
+      display: flex;
+      align-items: center;
+    }
+
+    .filter-item+.filter-item {
+      margin-left: 10px;
+    }
+
+    .filter-item:last-child {
+      flex: 1;
+      margin-left: 20px;
+
+      ::v-deep .el-button {
+        width: 100%;
+        max-width: 120px;
+        font-weight: bold;
+      }
+    }
+  }
+
+  &__body {
+    max-height: 650px;
+    overflow: hidden auto;
+  }
+
+  &__tools {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 10px;
+
+    .tools {
+      display: flex;
+    }
+  }
+}
+</style>

src/ui-components/index.js

@@ -0,0 +1,20 @@
+/**
+ * 导出选择器
+ */
+import PickerGoods from './PickerGoods'
+
+let components = {
+  PickerGoods,
+}
+
+components.install = function(Vue, opts) {
+  Object.keys(components).forEach(function(key) {
+    key !== 'install' && Vue.component(components[key].name, components[key])
+  })
+}
+
+export {
+  PickerGoods,
+}
+
+export default components

src/views/stock/warehousing/warehousing.vue

@@ -1,141 +1,83 @@
 <template>
-    <div class="app-container calendar-list-container">
-  
-      <!-- 查询和其他操作 -->
-      <div class="filter-container">
-        <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入字典名称" v-model="listQuery.dictName"></el-input>
-        <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入字典类型" v-model="listQuery.dictType"></el-input>
-        <el-select v-model="listQuery.status" clearable placeholder="字典状态" class="filter-item" style="width: 200px">
-            <el-option :key="item.type" v-for="item in typeList" :label="item.name" :value="item.type">
-            </el-option>
-        </el-select>
-        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
-        <el-button class="filter-item" v-waves icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-        <el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-plus">添加</el-button>
-        <el-button class="filter-item" :loading="downloadLoading" v-waves icon="el-icon-download" @click="handleDownload">导出</el-button>
-        <el-button class="filter-item" type="success" icon="el-icon-takeaway-box" @click="delAll">批量入库</el-button>
-        <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="delAll">批量删除</el-button>
-      </div>
-  
-      <!-- 查询结果 -->
-      <el-table
-        size="small"
-        :data="list"
-        @selection-change="handleSelectionChange"
-        v-loading="listLoading"
-        element-loading-text="正在查询中。。。"
-        border
-        fit
-        highlight-current-row
-      >
-        <el-table-column type="selection" width="55px"> </el-table-column>
-        <el-table-column type="index" label="序号" header-align="center" align="center">
-        </el-table-column>
-  
-        <el-table-column align="center" min-width="100px" label="字典名称" prop="dictName">
-        </el-table-column>
-        <el-table-column align="center" min-width="150px" label="字典类型">
-            <template slot-scope="scope">
-                <router-link :to="{name: 'warehousingDetail', params: { id: scope.row.dictType }}">
-                    <div style="color: #337ab7;cursor: pointer;">{{ scope.row.dictType }}</div>
-                </router-link>
-            </template>
-        </el-table-column>
-        <el-table-column align="center" min-width="100px" label="状态">
-            <template slot-scope="scope">
-                <el-tag v-if="scope.row.status === '1'">停用</el-tag>
-                <el-tag v-else>正常</el-tag>
-            </template>
-            
-        </el-table-column>
-        <el-table-column align="center" min-width="200px" label="备注" prop="remark">
-        </el-table-column>
-        <el-table-column align="center" min-width="150px" label="创建时间" prop="createTime">
-        </el-table-column>
-        <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
-          <template slot-scope="scope">
-            <el-button type="success" size="small"  @click="handleDelete(scope.row)">入库</el-button>
-            <el-button
-              type="primary"
-              size="small"
-              @click="handleUpdate(scope.row, false)"
-              >编辑</el-button
-            >
-  
-            <el-button type="danger" size="small"  @click="handleDelete(scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-  
-      <!-- 分页 -->
-      <div class="pagination-container">
-        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
-          :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
-        </el-pagination>
-      </div>
-  
-      <!-- 添加或修改对话框 -->
-      <el-dialog
-      :close-on-click-modal="false"
-        :title="textMap[dialogStatus]"
-        :visible.sync="dialogFormVisible"
-        width="40%"
-      >
-        <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="80px" style='width: 700px; margin-left:50px;'>
-            <el-form-item  label="字典名称" prop="dictName">
-              <el-input style="width: 300px" v-model="dataForm.dictName"></el-input>
-            </el-form-item>
-            <el-form-item  label="字典类型" prop="dictType">
-              <el-input style="width: 300px" v-model="dataForm.dictType"></el-input>
-            </el-form-item>
-            <el-form-item  label="状态">
-                <el-radio-group v-model="dataForm.status">
-                    <el-radio :label="'0'">正常</el-radio>
-                    <el-radio :label="'1'">停用</el-radio>
-                </el-radio-group>
-            </el-form-item>
-            <el-form-item  label="备注">
-              <el-input type="textarea" :rows="2" style="width: 300px" v-model="dataForm.remark"></el-input>
-            </el-form-item>
-            
-            
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-          <el-button @click="dialogFormVisible = false">取消</el-button>
-          <el-button v-if="dialogStatus == 'create'" type="primary" @click="createData">确定</el-button>
-          <el-button v-else type="primary" @click="updateData">确定</el-button>
-        </div>
-      </el-dialog>
-  
+  <div class="app-container calendar-list-container">
+    <!-- 查询和其他操作 -->
+    <div class="filter-container">
+      <el-date-picker clearable class="filter-item" style="display: inline-flex;" v-model="listQuery.dateRange" type="daterange"
+        unlink-panels range-separator="~" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">
+      </el-date-picker>
+      <el-select v-model="listQuery.status" clearable placeholder="请选择仓库" class="filter-item" style="width: 200px">
+        <el-option :key="item.type" v-for="item in typeList" :label="item.name" :value="item.type">
+        </el-option>
+      </el-select>
+      <el-select v-model="listQuery.status" clearable placeholder="请选择状态" class="filter-item" style="width: 200px">
+        <el-option :key="item.type" v-for="item in typeList" :label="item.name" :value="item.type">
+        </el-option>
+      </el-select>
+      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
+      <el-button class="filter-item" v-waves icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      <el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-plus">添加</el-button>
+      <el-button class="filter-item" :loading="downloadLoading" v-waves icon="el-icon-download"
+        @click="handleDownload">导出</el-button>
+      <el-button class="filter-item" type="success" icon="el-icon-takeaway-box" @click="delAll">批量入库</el-button>
+      <!-- <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="delAll">批量删除</el-button> -->
     </div>
-  </template>
-  
-  <style>
-    .demo-table-expand {
-      font-size: 0;
-    }
-    .demo-table-expand label {
-      width: 200px;
-      color: #99a9bf;
-    }
-    .demo-table-expand .el-form-item {
-      margin-right: 0;
-      margin-bottom: 0;
-    }
-  </style>
-  
-  <script>
-    import { list, createItem, updateItem, deleteitem } from "@/api/dictManage";
-    import waves from "@/directive/waves"; // 水波纹指令
-    import Tinymce from '@/components/Tinymce'
-  
-  export default {
-    components: { Tinymce },
-    directives: { waves },
-    data() {
-      return {
-        downloadLoading: false,
-        typeList: [
+
+    <!-- 查询结果 -->
+    <el-table size="small" :data="list" @selection-change="handleSelectionChange" v-loading="listLoading"
+      element-loading-text="正在查询中。。。" border fit highlight-current-row>
+      <el-table-column type="selection" width="55px"> </el-table-column>
+      <el-table-column type="index" label="序号" header-align="center" align="center">
+      </el-table-column>
+      <el-table-column align="center" min-width="150px" label="入库单号">
+        <template slot-scope="scope">
+          <router-link :to="{name: 'warehousingDetail', params: { id: scope.row.dictType }}">
+            <div style="color: #337ab7;cursor: pointer;">{{ scope.row.dictType }}</div>
+          </router-link>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" min-width="100px" label="入库时间" prop="dictName">
+      </el-table-column>
+      <el-table-column align="center" min-width="100px" label="供应商" prop="dictName">
+      </el-table-column>
+      <el-table-column align="center" min-width="100px" label="仓库" prop="dictName">
+      </el-table-column>
+      <el-table-column align="center" min-width="100px" label="经手人" prop="dictName">
+      </el-table-column>
+      <el-table-column align="center" min-width="100px" label="状态">
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.status === '1'">停用</el-tag>
+          <el-tag v-else>正常</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button type="success" size="small" @click="handleDelete(scope.row)">入库</el-button>
+          <el-button type="primary" size="small" @click="handleUpdate(scope.row, false)">编辑</el-button>
+
+          <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <div class="pagination-container">
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+        :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
+        layout="total, sizes, prev, pager, next, jumper" :total="total">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import { list, deleteitem } from "@/api/dictManage";
+import waves from "@/directive/waves"; // 水波纹指令
+
+export default {
+  directives: { waves },
+  data() {
+    return {
+      downloadLoading: false,
+      typeList: [
         {
           type: "0",
           name: "正常",
@@ -145,244 +87,145 @@
           name: "停用",
         },
       ],
-        list: [
-          
-        ],
-        delarr: [],
-        multipleSelection: [],
-        total: 0,
-        listLoading: false,
-        listQuery: {
-          page: 1,
-          limit: 10,
-          dictName: '',
-          dictType: '',
-          status: '',
-        },
-        dataForm: {
-          dictName: undefined,
-          dictType: undefined,
-          status: 1,
-          remark: undefined,
-        },
-        dialogFormVisible: false,
-        dialogStatus: '',
-        textMap: {
-          update: "编辑",
-          create: "创建",
-        },
-        imageUrl: undefined,
-        rules: {
-          dictName: [{ required: true, message: "字典名称不能为空", trigger: "blur" }],
-          dictType: [{ required: true, message: "字典类型不能为空", trigger: "blur" }],
-        },
-      }
-    },
-    created() {
-        this.getList();
-    },
-    methods: {
-      /** 重置按钮操作 */
-      resetQuery() {
-        this.listQuery = {
-          page: 1,
-          limit: 10,
-          dictName: '',
-          dictType: '',
-          status: '',
-        },
-        this.getList()
-      },
-      handleDownload() {
-        this.downloadLoading = true
-        import('@/vendor/Export2Excel').then(excel => {
-          const tHeader = ['用户ID', '用户名称','用户昵称', '用户头像']
-          const filterVal = ['id', 'username', 'nickname', 'avatar']
-          excel.export_json_to_excel2(tHeader, this.list, filterVal, '用户信息')
-          this.downloadLoading = false
-        })
-      },
-      resetForm() {
-        this.dataForm = {
-            dictName: undefined,
-            dictType: undefined,
-            status: 1,
-            remark: undefined,
-        };
-      },
-      handleCreate() {
-        this.$router.push({
-          name: 'warehousingAdd',
-          params: { callback: this.getList }
-        })
-        // this.resetForm();
-        // this.dialogFormVisible = true;
-        // this.dialogStatus = "create";
-        // this.$nextTick(() => {
-        //   this.$refs["dataForm"].clearValidate();
-        // });
-      },
-      createData() {
-        this.$refs["dataForm"].validate((valid) => {
-          if (valid) {
-            createItem(this.dataForm)
-                  .then(() => {
-                    this.getList();
-                    this.dialogFormVisible = false;
-  
-                    this.$notify({
-                      title: "成功",
-                      message: "创建成功",
-                      type: "success",
-                      duration: 2000,
-                    });
-                    this.getList()
-                  })
-          }
-        });
-      },
-      getList() {
-        this.listLoading = true
-        list(this.listQuery).then(response => {
-          this.list = response.data.data.items
-          this.total = response.data.data.total
-          this.listLoading = false
-        }).catch(() => {
-          this.list = []
-          this.total = 0
-          this.listLoading = false
-        })
-      },
-  
-      handleFilter() {
-        this.listQuery.page = 1
-        this.getList()
+      list: [
+
+      ],
+      delarr: [],
+      multipleSelection: [],
+      total: 0,
+      listLoading: false,
+      listQuery: {
+        page: 1,
+        limit: 10,
+        dictName: '',
+        dictType: '',
+        status: '',
       },
-  
-      handleSizeChange(val) {
-        this.listQuery.limit = val
-        this.getList()
+    }
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.listQuery = {
+        page: 1,
+        limit: 10,
+        dictName: '',
+        dictType: '',
+        status: '',
       },
-  
-      handleCurrentChange(val) {
-        this.listQuery.page = val
         this.getList()
-      },
-  
-      handleUpdate(row) {
-        // this.dataForm = Object.assign({}, row);
-        // this.dialogStatus = 'update'
-        // this.dialogFormVisible = true
-        // this.$nextTick(() => {
-        //   this.$refs['dataForm'].clearValidate()
-        // })
-        this.$router.push({
-          name: 'warehousingEdit',
-          params: { id: row.dictType }
+    },
+    handleDownload() {
+      this.downloadLoading = true
+      import('@/vendor/Export2Excel').then(excel => {
+        const tHeader = ['用户ID', '用户名称', '用户昵称', '用户头像']
+        const filterVal = ['id', 'username', 'nickname', 'avatar']
+        excel.export_json_to_excel2(tHeader, this.list, filterVal, '用户信息')
+        this.downloadLoading = false
+      })
+    },
+    handleCreate() {
+      this.$router.push({
+        name: 'warehousingAdd',
+        params: { callback: this.getList }
+      })
+    },
+    getList() {
+      this.listLoading = true
+      list(this.listQuery).then(response => {
+        this.list = response.data.data.items
+        this.total = response.data.data.total
+        this.listLoading = false
+      }).catch(() => {
+        this.list = []
+        this.total = 0
+        this.listLoading = false
+      })
+    },
+
+    handleFilter() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.getList()
+    },
+
+    handleCurrentChange(val) {
+      this.listQuery.page = val
+      this.getList()
+    },
+
+    handleUpdate(row) {
+      this.$router.push({
+        name: 'warehousingEdit',
+        params: { id: row.dictType }
+      })
+    },
+    handleDelete(row) {
+
+      this.$confirm('确认删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteitem({ dictIds: row.dictId }).then(response => {
+          this.$notify({
+            title: '成功',
+            message: '删除成功',
+            type: 'success',
+            duration: 2000
+          })
+          this.getList()
         })
-      },
-  
-      updateData() {
-        this.$refs['dataForm'].validate((valid) => {
-          if (valid) {
-            updateItem(this.dataForm).then(() => {
-                this.dialogFormVisible = false
+      }).catch(() => {
+
+      })
+
+    },
+    delAll() {
+      this.$confirm("确认删除吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          const length = this.multipleSelection.length;
+
+          if (length > 0) {
+            for (let i = 0; i < length; i++) {
+              this.delarr.push(this.multipleSelection[i].dictId);
+            }
+            const dictIds = this.delarr.join(",");
+            deleteitem({ dictIds: dictIds })
+              .then(() => {
                 this.$notify({
-                  title: '成功',
-                  message: '更新成功',
-                  type: 'success',
-                  duration: 2000
-                })
-                this.getList()
+                  title: "成功",
+                  message: "删除成功",
+                  type: "success",
+                  duration: 2000,
+                });
+                this.getList();
               })
-            
-          }
-        })
-      },
-  
-      handleDelete(row) {
-  
-        this.$confirm('确认删除吗?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          deleteitem({dictIds:row.dictId}).then(response => {
+              .catch(() => { });
+          } else {
             this.$notify({
-              title: '成功',
-              message: '删除成功',
-              type: 'success',
-              duration: 2000
-            })
-            this.getList()
-          })
-        }).catch(() => {
-  
+              title: "警告提示",
+              message: "请选择要删除的信息！",
+              type: "warning",
+            });
+          }
         })
-  
-      },
-      delAll() {
-            this.$confirm("确认删除吗?", "提示", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-            })
-                .then(() => {
-                    const length = this.multipleSelection.length;
-
-                    if (length > 0) {
-                        for (let i = 0; i < length; i++) {
-                            this.delarr.push(this.multipleSelection[i].dictId);
-                        }
-                        const dictIds = this.delarr.join(",");
-                        deleteitem({ dictIds: dictIds })
-                            .then(() => {
-                                this.$notify({
-                                    title: "成功",
-                                    message: "删除成功",
-                                    type: "success",
-                                    duration: 2000,
-                                });
-                                this.getList();
-                            })
-                            .catch(() => { });
-                    } else {
-                        this.$notify({
-                            title: "警告提示",
-                            message: "请选择要删除的信息！",
-                            type: "warning",
-                        });
-                    }
-                })
-                .catch(() => { });
-        },
-        handleSelectionChange(val) {
-            this.multipleSelection = val;
-        },
-    }
+        .catch(() => { });
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
   }
-  </script>
-  <style>
-    .ad-avatar-uploader .el-upload {
-      border: 1px dashed #d9d9d9;
-      border-radius: 6px;
-      cursor: pointer;
-      position: relative;
-      overflow: hidden;
-    }
-    .ad-avatar-uploader .el-upload:hover {
-      border-color: #409EFF;
-    }
-    .ad-avatar-uploader-icon {
-      font-size: 28px;
-      color: #8c939d;
-      width: 178px;
-      height: 178px;
-      line-height: 178px;
-      text-align: center;
-    }
-    .ad-avatar {
-      display: block;
-    }
-  </style>
-  
+}
+</script>

src/views/stock/warehousing/warehousingAdd.vue

@@ -1,88 +1,102 @@
 <template>
     <div class="app-container">
-        <el-form ref="addForm" :model="addForm" label-width="120px" inline>
-            <h3>入库单</h3>
-            <el-form-item label="名称" prop="name">
-                <el-input v-model="addForm.name" :minlength="2" :maxlength="20" clearable
-                    placeholder="请输入名称" style="width:200px"></el-input>
-            </el-form-item>
-            <el-form-item label="日期时间" prop="dateTime">
-                <el-date-picker v-model="addForm.dateTime" value-format="timestamp" type="datetime"
-                    :disabled="type === 'detail'" placeholder="选择日期时间" style="width:200px">
+        <el-form ref="dataForm" :model="dataForm" label-width="120px" inline>
+            <h3>通用入库单</h3>
+            <!-- <el-form-item label="名称" prop="name">
+                <el-input v-model="dataForm.name" :minlength="2" :maxlength="20" clearable
+                    placeholder="请输入名称" style="width:200px" :disabled="type === 'detail'"></el-input>
+            </el-form-item> -->
+            <el-form-item label="入库时间" prop="dateTime">
+                <el-date-picker v-model="dataForm.dateTime" value-format="timestamp" type="datetime"
+                    placeholder="选择日期时间" style="width:200px" :disabled="type === 'detail'">
                 </el-date-picker>
             </el-form-item>
-            <el-form-item label="表彰人" prop="loginId">
-                <el-select v-model="addForm.loginId" clearable filterable placeholder="请选择" style="width: 200px">
-                    <el-option :key="item.loginId" v-for="item in recipientsList" :label="item.deptName+'_'+item.userName" :value="item.loginId">
+            <el-form-item label="供应商" prop="type">
+                <el-select v-model="dataForm.type" clearable placeholder="请选择" style="width: 200px;" :disabled="type === 'detail'">
+                    <el-option :key="item.dictValue" v-for="item in allTypeList" :label="item.dictLabel" :value="item.dictValue">
                     </el-option>
                 </el-select>
             </el-form-item>
-            <el-form-item label="类型" prop="type">
-                <el-select v-model="addForm.type" clearable placeholder="请选择类型" style="width: 200px;">
+            <el-form-item label="仓库" prop="type">
+                <el-select v-model="dataForm.type" clearable placeholder="请选择" style="width: 200px;" :disabled="type === 'detail'">
                     <el-option :key="item.dictValue" v-for="item in allTypeList" :label="item.dictLabel" :value="item.dictValue">
                     </el-option>
                 </el-select>
             </el-form-item>
+            <el-form-item label="经手人" prop="loginId">
+                <el-select v-model="dataForm.loginId" clearable filterable placeholder="请选择" style="width: 200px" :disabled="type === 'detail'">
+                    <el-option :key="item.loginId" v-for="item in recipientsList" :label="item.deptName+'_'+item.userName" :value="item.loginId">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            
 
-            <el-form-item label="采购说明" prop="desc">
-                <el-input style="width:535px" v-model="addForm.desc" :maxlength="120"
-                    type="textarea" :disabled="type === 'detail'" :autosize="{ minRows: 3, maxRows: 4 }"
+            <!-- <el-form-item label="采购说明" prop="desc">
+                <el-input style="width:535px" v-model="dataForm.desc" :maxlength="120"
+                    type="textarea" :disabled="type === 'detail'" :autosize="{ minRows: 1, maxRows: 4 }"
                     placeholder="请输入采购说明 最大120字"></el-input>
-            </el-form-item>
+            </el-form-item> -->
             <el-form-item label="附件:" prop="fileIds">
-                <el-upload :limit="1" :action="fileUrl" :file-list="addForm.files" :on-success="handleFileSuccess"
+                <el-upload :limit="1" :action="fileUrl" :file-list="dataForm.files" :on-success="handleFileSuccess"
                     :before-upload="beforeUploadFile" :on-remove="handleRemove">
-                    <el-button size="small" type="primary">点击上传</el-button>
+                    <el-button size="small" type="primary" :disabled="type === 'detail'">点击上传</el-button>
                 </el-upload>
             </el-form-item>
             <div class="mx">
-        <h3>合同明细</h3>
-        <el-button class="button" size="mini" type="primary" v-if="type !== 'detail'"
-          @click="handleSelectGoods">选择</el-button>
+        <h3>入库明细</h3>
+        <el-button size="small" type="primary" v-if="type !== 'detail'"
+          @click="handleSelectGoods" icon="el-icon-plus">商品/物料</el-button>
       </div>
-      <el-table size="small" :data="addForm.item_list" border :cell-style="{ textAlign: 'center' }"
-            :header-cell-style="{ textAlign: 'center' }">
+      <el-table size="small" :data="dataForm.item_list" border :cell-style="{ textAlign: 'center' }"
+            :header-cell-style="{ textAlign: 'center' }" style="width: 100%">
             <el-table-column label="商品编号">
               <template slot-scope="scope">
-                {{ scope.row.product_sn }}
+                {{ scope.row.goodCode }}
               </template>
             </el-table-column>
             <el-table-column label="商品名称">
               <template slot-scope="scope">
-                {{ scope.row.product_name }}
+                {{ scope.row.goodName }}
               </template>
             </el-table-column>
-            <el-table-column label="规格型号">
+            <el-table-column label="单价(￥)">
               <template slot-scope="scope">
-                {{ scope.row.specification }}
+                {{ scope.row.price }}
               </template>
             </el-table-column>
-            <el-table-column label="单位">
+            <el-table-column label="库存数量">
               <template slot-scope="scope">
                 {{ scope.row.unit }}
               </template>
             </el-table-column>
-            <el-table-column label="计划采购数量">
+            <el-table-column label="入库数量">
               <template slot-scope="scope">
-                <el-input :maxlength="12" v-model="scope.row.procurement_num" onkeyup="value=value.replace(/[^\d]/g,'')"
-                  :disabled="type === 'detail'" />
+                <el-form-item v-if="type !== 'detail'" :prop="'item_list.'+scope.$index+'.num'" :rules="{ required: true, message: '入库数量不能为空', trigger: 'blur' }" class="tableFormItem">
+                    <el-input-number v-model="scope.row.num" @change="handleChange(scope.row)" size="small" :min="1" :max="10000" label="入库数量"></el-input-number>
+                </el-form-item>
+                <span v-else>{{ scope.row.num }}</span>
               </template>
             </el-table-column>
-            <el-table-column label="备注">
+            <el-table-column label="合计(￥)">
               <template slot-scope="scope">
-                <el-input :maxlength="99" v-model="scope.row.remark" :disabled="type === 'detail'" />
+                {{ scope.row.total_price.toFixed(2) }}
               </template>
             </el-table-column>
+            <!-- <el-table-column label="备注">
+              <template slot-scope="scope">
+                <el-input :maxlength="99" v-model="scope.row.remark" :disabled="type === 'detail'" />
+              </template>
+            </el-table-column> -->
             <el-table-column label="操作" width="150" v-if="type !== 'detail'">
               <template slot-scope="scope">
                 <el-button size="mini" type="danger"
-                  @click="addForm.item_list.splice(scope.$index, 1)">删除</el-button>
+                  @click="dataForm.item_list.splice(scope.$index, 1)">删除</el-button>
               </template>
             </el-table-column>
           </el-table>
         </el-form>
         <div class="footer">
-            <el-button type="primary" @click="submitpurchaseContractForm" v-if="type !== 'detail'">保存
+            <el-button type="primary" @click="submitForm" v-if="type !== 'detail'">保存
             </el-button>
             <el-button @click="roBack()">返回
             </el-button>
@@ -90,13 +104,11 @@
     </div>
 </template>
 <script>
-import { dataList, dataAdd, dataEdit, dataRemove, optionSelect } from "@/api/dictManage";
+import { dataAdd, dataEdit } from "@/api/dictManage";
 import { allUserList,dataTypeList } from "@/api/public";
 import waves from "@/directive/waves"; // 水波纹指令
-import Tinymce from '@/components/Tinymce'
 
 export default {
-    components: { Tinymce },
     directives: { waves },
     data() {
         return {
@@ -106,7 +118,7 @@ export default {
             id: '',
             type: '',
             /** 表单*/
-            addForm: {
+            dataForm: {
                 item_list: []
             }
         }
@@ -116,7 +128,7 @@ export default {
             immediate: true,
             handler(newVal) {
                 if (this.$route.name === 'warehousingAdd') {
-                    this.addForm = {
+                    this.dataForm = {
                         item_list: []
                     }
                 } else if (this.$route.name === 'warehousingDetail') {
@@ -124,6 +136,7 @@ export default {
                 }
                 if (this.$route.params.id) {
                     this.id = this.$route.params.id
+                    this.getDataFormDetail()
                 }
             }
         }
@@ -133,11 +146,37 @@ export default {
         this.getPointRulesType(); 
     },
     methods: {
-        handleSelectGoods(){
-
+        /** 获取详情页面数据 */
+        getDataFormDetail() {
+            
+        },
+         // 选择商品
+        async handleSelectGoods() {
+            let selectedIds = this.dataForm.item_list.map(item => item.id);
+            const Goods = await this.$EnPickerGoods({
+                goodsApi: '/admin/list',
+                selectedIds: selectedIds,
+                // goodsApiParams: { warehouse_id: 12 }
+            })
+            if (!Goods.length) return
+            const item_list = Goods.map(item => {
+                item.id = item.id
+                item.goodCode = item.goodCode
+                item.goodName = item.goodName
+                item.unit = item.unit
+                item.unit = item.num
+                item.total_price = 0
+                return item
+            })
+            this.dataForm.item_list = this.dataForm.item_list && this.dataForm.item_list.length ? this.dataForm.item_list.concat(item_list) : this.dataForm.item_list = item_list
         },
-        submitpurchaseContractForm(){
+        submitForm(){
 
+        },
+        handleChange(row) {
+            if (row.price && row.num) {
+                row.total_price = row.price * row.num
+            }
         },
         roBack() {
             const { callback } = this.$route.params
@@ -159,7 +198,7 @@ export default {
             let id = fileList[i].response.data.id;
             fileIds.push(id);
         }
-        this.addForm.fileIds = fileIds.join(",");
+        this.dataForm.fileIds = fileIds.join(",");
         },
         beforeUploadFile(file) {
         console.log(file);
@@ -187,7 +226,7 @@ export default {
             fileIds.push(id);
             }
         }
-        this.addForm.fileIds = fileIds.join(",");
+        this.dataForm.fileIds = fileIds.join(",");
         },
         getPointRulesType() {
             dataTypeList({dictType:'integral_rule_type'}).then(response => {
@@ -216,9 +255,11 @@ export default {
 .mx {
   display: flex;
   align-items: center;
-
-  .button {
-    margin-left: 10px;
-  }
+  justify-content: space-between;
+}
+/** 表格中输入框样式 */
+.tableFormItem {
+  width: 100%;
+  margin-bottom: 0;
 }
 </style>