【叶盏进销存】仓库管理模块-入库单前端页面架构搭建（50%）

src/main.js

@@ -24,7 +24,7 @@ const prodUrl = 'https://xiaoyou.dgtis.com/admin/storage/create';//正式地址
 
 // const prodUrl = 'http://47.103.79.143:9085/admin/storage/create';//阿里云测试地址
 
-const devUrl = 'http://47.103.79.143:9085/admin/storage/create';//本地测试地址
+const devUrl = 'https://xiaoyou.dgtis.com/admin/storage/create';//本地测试地址
 
 const baseUrl = process.env.NODE_ENV === 'production' ? prodUrl : devUrl;
 // 全局方法挂载

src/permission.js

@@ -33,10 +33,6 @@ const myRoles = [
   'lotteryDataList', 
   'lotteryLogsList',
 
-  'goodsManage', 
-  'goodsExchangeRules', 
-  'goodsList', 
-
   'giftManage', 
   'giftExchangeRules', 
   'giftList', 
@@ -94,10 +90,6 @@ const myRoles = [
   'certRules',
   'certList', 
 
-  'dictManage', 
-  'dictList', 
-  'dictDataList', 
-
   'postManage',
   'postList',
   'postApprovalList',
@@ -112,11 +104,24 @@ const myRoles = [
   'activeUsers',
   'pointsLottery',
 
+  'goodsManage', 
+  'goodsTypeList', 
+  'goodsList', 
+
+  'stock',
+  'warehousing',
+  'warehousingAdd',
+  'warehousingEdit',
+  'warehousingDetail',
+
+  'dictManage', 
+  'dictList', 
+  'dictDataList', 
+
   'sysManage',
   'admin',
   'dept',
-  'role'
-
+  'role',
 ]
 
 router.beforeEach((to, from, next) => {

src/router/index.js

@@ -63,10 +63,23 @@ export const asyncRouterMap = [
       icon: 'shangpin'
     },
     children: [
-      { path: 'certSetList', component: _import('certManage/certSetList'), name: 'certSetList', meta: { title: '商品类别', noCache: true }},
+      { path: 'goodsTypeList', component: _import('goodsManage/goodsTypeList'), name: 'goodsTypeList', meta: { title: '商品类别', noCache: true }},
       { path: 'goodsList', component: _import('goodsManage/goodsList'), name: 'goodsList', meta: { title: '商品列表', noCache: true }},
     ]
   },
+  {
+      path: '/stock',
+      component: Layout,
+      redirect: 'noredirect',
+      name: 'stock',
+      meta: { title: '仓库管理', icon: 'shangpin' },
+      children: [
+        { path: 'warehousing', component: _import('stock/warehousing/warehousing'), name: 'warehousing', meta: { title: '入库单', noCache: true }},
+        { path: 'warehousingAdd', component: _import('stock/warehousing/warehousingAdd'), name: 'warehousingAdd', meta: { title: '新增入库单', noCache: false, hideTag: true, hidden: true }},
+        { path: 'warehousingEdit/:id', component: _import('stock/warehousing/warehousingAdd'), name: 'warehousingEdit', meta: { title: '编辑入库单', noCache: false, hideTag: true, hidden: true }},
+        { path: 'warehousingDetail/:id', component: _import('stock/warehousing/warehousingAdd'), name: 'warehousingDetail', meta: { title: '入库单详情', noCache: false, hideTag: true, hidden: true }},
+      ]
+    },
   
   {
     path: '/dictManage',

src/views/goodsManage/goodsTypeList.vue

@@ -0,0 +1,299 @@
+<template>
+    <div class="app-container">
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+        <el-form-item label="证书类型" prop="typeName">
+          <el-input
+            v-model="queryParams.typeName"
+            placeholder="请输入证书类型"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleQuery">查找</el-button>
+          <el-button class="filter-item" type="primary" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+          <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleAdd">添加</el-button>
+          <el-button class="filter-item" type="info" icon="el-icon-sort" @click="toggleExpandAll">展开/折叠</el-button>
+        </el-form-item>
+      </el-form>
+      <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
+      <el-table
+        v-if="refreshTable"
+        v-loading="loading"
+        :data="deptList"
+        row-key="id"
+        border
+        :default-expand-all="isExpandAll"
+        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+      >
+        <el-table-column prop="typeName" label="证书类型" min-width="180px"></el-table-column>
+        <el-table-column prop="orderNum" label="排序" align="center"></el-table-column>
+        <el-table-column prop="integral" label="积分" align="center"></el-table-column>
+        <el-table-column label="创建时间" align="center" prop="createTime">
+        </el-table-column>
+        <el-table-column label="操作" align="center" min-width="110px">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="primary"
+              @click="handleUpdate(scope.row)"
+            >修改</el-button>
+            <el-button
+              size="mini"
+              type="success"
+              @click="handleAdd(scope.row)"
+            >添加</el-button>
+            <el-button
+              v-if="scope.row.parentId != 0"
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.row)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+  
+      <!-- 添加或修改证书对话框 -->
+      <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+          <el-row>
+            <el-col :span="24" v-if="form.parentId !== 0">
+              <el-form-item label="上级类型" prop="parentId">
+                <treeselect default-expand-all v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级类型" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="证书类型" prop="typeName">
+                <el-input v-model="form.typeName" placeholder="请输入证书类型" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="积分" prop="integral">
+                <el-input-number v-model="form.integral" controls-position="right" :min="0" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="显示排序" prop="orderNum">
+                <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </template>
+  
+  <script>
+  import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/certManage";
+  import Treeselect from "@riophae/vue-treeselect";
+  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+  
+  export default {
+    components: { Treeselect },
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 表格树数据
+        deptList: [],
+        // 证书树选项
+        deptOptions: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 是否展开，默认全部展开
+        isExpandAll: true,
+        // 重新渲染表格状态
+        refreshTable: true,
+        // 查询参数
+        queryParams: {
+          typeName: undefined,
+        },
+        // 表单参数
+        form: {},
+        // 表单校验
+        rules: {
+          parentId: [
+            { required: true, message: "上级类型不能为空", trigger: "blur" }
+          ],
+          typeName: [
+            { required: true, message: "证书类型不能为空", trigger: "blur" }
+          ],
+          orderNum: [
+            { required: true, message: "显示排序不能为空", trigger: "blur" }
+          ],
+          integral: [
+            { required: true, message: "积分不能为空", trigger: "blur" }
+          ],
+          email: [
+            {
+              type: "email",
+              message: "请输入正确的邮箱地址",
+              trigger: ["blur", "change"]
+            }
+          ],
+          phone: [
+            {
+              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+              message: "请输入正确的手机号码",
+              trigger: "blur"
+            }
+          ]
+        }
+      };
+    },
+    created() {
+      this.getList();
+    },
+    methods: {
+      /** 查询证书列表 */
+      getList() {
+        this.loading = true;
+        listDept(this.queryParams).then(response => {
+          this.deptList = this.handleTree(response.data.data,'id');
+          console.log(this.deptList);
+          this.loading = false;
+        });
+      },
+      /** 转换证书数据结构 */
+      normalizer(node) {
+        if (node.children && !node.children.length) {
+          delete node.children;
+        }
+        return {
+          id: node.id,
+          label: node.typeName,
+          children: node.children
+        };
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          id: undefined,
+          parentId: undefined,
+          typeName: undefined,
+          orderNum: undefined,
+          integral:undefined,
+          leader: undefined,
+          phone: undefined,
+          email: undefined,
+          status: "0"
+        };
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+      /** 新增按钮操作 */
+      handleAdd(row) {
+        this.reset();
+        if (row != undefined) {
+          this.form.parentId = row.id;
+        }
+        this.open = true;
+        this.title = "添加证书";
+        listDept().then(response => {
+          this.deptOptions = this.handleTree(response.data.data, "id");
+        });
+      },
+      /** 展开/折叠操作 */
+      toggleExpandAll() {
+        this.refreshTable = false;
+        this.isExpandAll = !this.isExpandAll;
+        this.$nextTick(() => {
+          this.refreshTable = true;
+        });
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        this.reset();
+        getDept({id:row.id}).then(response => {
+          this.form = response.data.data;
+          this.open = true;
+          this.title = "修改证书";
+          listDeptExcludeChild({id:row.id}).then(response => {
+            this.deptOptions = this.handleTree(response.data.data, "id");
+            if (this.deptOptions.length == 0) {
+              const noResultsOptions = { id: this.form.parentId, typeName: this.form.parentName, children: [] };
+              this.deptOptions.push(noResultsOptions);
+            }
+          });
+        });
+      },
+      /** 提交按钮 */
+      submitForm: function() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.form.id != undefined) {
+              updateDept(this.form).then(response => {
+                this.$notify({
+                            title: '成功',
+                            message: '修改成功',
+                            type: 'success',
+                            duration: 2000
+                        })
+                this.open = false;
+                this.getList();
+              });
+            } else {
+              addDept(this.form).then(response => {
+                this.$notify({
+                            title: '成功',
+                            message: '新增成功',
+                            type: 'success',
+                            duration: 2000
+                        })
+                this.open = false;
+                this.getList();
+              });
+            }
+          }
+        });
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        this.$confirm('是否确认删除名称为"' + row.typeName + '"的数据项？', "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+        .then(function() {
+          return delDept({id:row.id});
+        }).then(() => {
+          this.getList();
+          this.$notify({
+                            title: '成功',
+                            message: '删除成功',
+                            type: 'success',
+                            duration: 2000
+                        })
+        }).catch(() => {});
+      }
+    }
+  };
+  </script>
+  

src/views/stock/warehousing/warehousing.vue

@@ -0,0 +1,388 @@
+<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>
+  </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: [
+        {
+          type: "0",
+          name: "正常",
+        },
+        {
+          type: "1",
+          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()
+      },
+  
+      handleSizeChange(val) {
+        this.listQuery.limit = val
+        this.getList()
+      },
+  
+      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 }
+        })
+      },
+  
+      updateData() {
+        this.$refs['dataForm'].validate((valid) => {
+          if (valid) {
+            updateItem(this.dataForm).then(() => {
+                this.dialogFormVisible = false
+                this.$notify({
+                  title: '成功',
+                  message: '更新成功',
+                  type: 'success',
+                  duration: 2000
+                })
+                this.getList()
+              })
+            
+          }
+        })
+      },
+  
+      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()
+          })
+        }).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();
+                            })
+                            .catch(() => { });
+                    } else {
+                        this.$notify({
+                            title: "警告提示",
+                            message: "请选择要删除的信息！",
+                            type: "warning",
+                        });
+                    }
+                })
+                .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>
+  

src/views/stock/warehousing/warehousingAdd.vue

@@ -0,0 +1,224 @@
+<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-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-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="类型" prop="type">
+                <el-select v-model="addForm.type" clearable placeholder="请选择类型" style="width: 200px;">
+                    <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="desc">
+                <el-input style="width:535px" v-model="addForm.desc" :maxlength="120"
+                    type="textarea" :disabled="type === 'detail'" :autosize="{ minRows: 3, maxRows: 4 }"
+                    placeholder="请输入采购说明 最大120字"></el-input>
+            </el-form-item>
+            <el-form-item label="附件:" prop="fileIds">
+                <el-upload :limit="1" :action="fileUrl" :file-list="addForm.files" :on-success="handleAvatarSuccess"
+                    :before-upload="beforeUploadFile" :on-remove="handleRemove">
+                    <el-button size="small" type="primary">点击上传</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>
+      </div>
+      <el-table size="small" :data="addForm.item_list" border :cell-style="{ textAlign: 'center' }"
+            :header-cell-style="{ textAlign: 'center' }">
+            <el-table-column label="商品编号">
+              <template slot-scope="scope">
+                {{ scope.row.product_sn }}
+              </template>
+            </el-table-column>
+            <el-table-column label="商品名称">
+              <template slot-scope="scope">
+                {{ scope.row.product_name }}
+              </template>
+            </el-table-column>
+            <el-table-column label="规格型号">
+              <template slot-scope="scope">
+                {{ scope.row.specification }}
+              </template>
+            </el-table-column>
+            <el-table-column label="单位">
+              <template slot-scope="scope">
+                {{ scope.row.unit }}
+              </template>
+            </el-table-column>
+            <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'" />
+              </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>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form>
+        <div class="footer">
+            <el-button type="primary" @click="submitpurchaseContractForm" v-if="type !== 'detail'">保存
+            </el-button>
+            <el-button @click="roBack()">返回
+            </el-button>
+        </div>
+    </div>
+</template>
+<script>
+import { dataList, dataAdd, dataEdit, dataRemove, optionSelect } 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 {
+            fileUrl:this.upLoadUrl,
+            recipientsList:[],
+            allTypeList: [],
+            id: '',
+            type: '',
+            /** 表单*/
+            addForm: {
+                item_list: []
+            }
+        }
+    },
+    watch: {
+        $route: {
+            immediate: true,
+            handler(newVal) {
+                if (this.$route.name === 'warehousingAdd') {
+                    this.addForm = {
+                        item_list: []
+                    }
+                } else if (this.$route.name === 'warehousingDetail') {
+                    this.type = 'detail'
+                }
+                if (this.$route.params.id) {
+                    this.id = this.$route.params.id
+                }
+            }
+        }
+    },
+    mounted() {
+        this.getAllUserList(); 
+        this.getPointRulesType(); 
+    },
+    methods: {
+        handleSelectGoods(){
+
+        },
+        submitpurchaseContractForm(){
+
+        },
+        roBack() {
+            const { callback } = this.$route.params
+            if (typeof callback === 'function') callback()
+            this.$store.dispatch('delVisitedViews', this.$route).then((views) => {
+                const latestView = views.slice(-1)[0]
+                if (latestView) {
+                    this.$router.push(latestView.path)
+                } else {
+                    this.$router.push('/')
+                }
+            })
+            this.$router.push({ name: 'warehousing' })
+        },
+        handleRemove(file, fileList) {
+        console.log(file, fileList);
+        let fileIds = [];
+        for (let i in fileList) {
+            let id = fileList[i].response.data.id;
+            fileIds.push(id);
+        }
+        this.addForm.fileIds = fileIds.join(",");
+        },
+        beforeUploadFile(file) {
+        console.log(file);
+        const size = file.size / 1024 / 1024;
+        console.log(size);
+        if (size > 10) {
+            this.$message.error("文件大小不能超过10MB！");
+            return false;
+        }
+        },
+        handleAvatarSuccess(res, file, fileList) {
+        console.log(file, fileList);
+        console.log("------", "==========");
+        console.log("res = ", res);
+
+        let fileIds = [];
+        for (let i in fileList) {
+            let response = fileList[i].response;
+            if (response.errno && response.errno != "0") {
+            this.$message.error("该文件上传失败,已被移除,请重新上传!");
+            // 上传失败移除该 file 对象
+            fileList.splice(i, 1);
+            } else {
+            let id = fileList[i].response.data.id;
+            fileIds.push(id);
+            }
+        }
+        this.addForm.fileIds = fileIds.join(",");
+        },
+        getPointRulesType() {
+            dataTypeList({dictType:'integral_rule_type'}).then(response => {
+                this.allTypeList = response.data.data;
+            }).catch(() => {
+                
+            });
+        },
+        getAllUserList() {
+            allUserList().then(response => {
+                this.recipientsList = response.data.data;
+            }).catch(() => { });
+        },
+    }
+}
+</script>
+<style>
+/** 底部步骤 */
+.footer {
+  width: 100%;
+  padding: 10px;
+  bottom: 0px;
+  text-align: center;
+  z-index: 999;
+}
+.mx {
+  display: flex;
+  align-items: center;
+
+  .button {
+    margin-left: 10px;
+  }
+}
+</style>