新购到货模块搭建-细节完善

package.json

@@ -47,10 +47,13 @@
         "fuse.js": "6.4.3",
         "highlight.js": "9.18.5",
         "html-webpack-plugin": "^5.6.0",
+        "html2canvas": "^1.4.1",
         "js-beautify": "1.13.0",
         "js-cookie": "3.0.1",
         "jsencrypt": "3.0.0-rc.1",
+        "jszip": "^3.10.1",
         "nprogress": "0.2.0",
+        "qrcodejs2": "0.0.2",
         "quill": "1.3.7",
         "screenfull": "5.0.2",
         "sm-crypto": "^0.3.13",

src/api/purchase/binding.js

@@ -20,6 +20,13 @@ export const submitCodeBindApi = (data) => {
   return request.post('/task/purchase/bind/addBind', data)
 }
 
+/** 下载二维码 */
+export const downloadQrcode = (data) => {
+  return request.get('/task/purchase/bind/downloadQrCode', {
+    params: data
+  })
+}
+
 
 
 

src/api/purchase/warehouse.js

@@ -0,0 +1,25 @@
+/**
+ * 新购到货入库页面 API
+ */
+import request from '@/utils/request'
+
+/** 新购到货入库查询 */
+export const queryPurchaseStorageListApi = (data) => {
+  return request.get('/task/purchase/store/list', {
+    params: data
+  })
+}
+
+/** 新购到货入库二级页面查询 */
+export const queryPurchaseStorageInnerListApi = (data) => {
+  return request.get('/task/purchase/store/details', {
+    params: data
+  })
+}
+
+/** 新购到货入库操作 */
+export const newPurchaseWarehouseApi = (data) => {
+  return request.post('/task/purchase/store', data)
+}
+
+

src/views/purchase/binding/components/list-binding.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- 新购绑定页面 -->
-    <div class="app-container">
+    <div>
         <PageHeader v-if="isShowComponent !== 'Index'" :pageContent="pageContent" @goBack="goBack" />
         <!-- 列表 -->
         <TableModel
@@ -13,6 +13,7 @@
         >
             <template slot="handle" slot-scope="{ data }">
                 <el-button type="primary" size="mini" @click="handleBindOpt(data)">绑定</el-button>
+                <el-button type="success" size="mini" @click="downloadQrcode(data)">二维码下载</el-button>
             </template>
 
             <template slot="purchaseNum" slot-scope="{ data }">{{ data.purchaseNum / 1000 }}</template>
@@ -36,7 +37,7 @@
 import PageHeader from '@/components/pageHeader'
 import { columnsList, dialogConfig, formLabel } from '../config-bind-list'
 import { commonMixin } from '../../mixins/common'
-
+import JSZip from 'jszip'
 import { queryPurchaseBindDetailsApi } from '@/api/purchase/binding' // api
 import FormBinding from './form-binding.vue'
 
@@ -65,6 +66,27 @@ export default {
             this.dialogConfig.outerVisible = true
             this.dialogConfig.outerTitle = '绑定'
         },
+        downloadQrcode(data) {
+          console.log(data)
+          this.download(
+            'task/purchase/bind/downloadQrCode',
+            {
+              purchaseId: data.id
+            },
+            `二维码_${new Date().getTime()}.zip`
+          )
+          /* let zip = new JSZip()
+          zip.file('file1.txt', 'Hello World\n');
+          zip.file('file2.txt', 'This is a second file\n');
+          zip.generateAsync({ type: 'blob' }).then(function (content) {
+            // 创建一个链接并触发下载
+            let link = document.createElement('a');
+            link.style.display = 'none';
+            link.href = URL.createObjectURL(content);
+            link.download = 'example.zip';
+            link.click();
+          }); */
+        }
     },
     data() {
         return {

src/views/purchase/binding/config.js

@@ -10,8 +10,8 @@ export const columnsList = [
   { t_props: 'purchaseCode', t_label: '采购单号' },
   { t_props: 'purchaseMaterial', t_label: '采购物资' },
   { t_props: 'purchaseNum', t_label: '采购数量', t_slot: 'purchaseNum'  },
-  { t_props: 'purchasePrice', t_label: '采购价格(含税)', },
+  { t_props: 'purchasePrice', t_label: '采购价格(含税)', t_slot: 'purchasePrice' },
-  { t_props: 'notaxPrice', t_label: '采购价格(不含税)' },
+  { t_props: 'notaxPrice', t_label: '采购价格(不含税)', t_slot: 'notaxPrice' },
   { t_props: 'createBy', t_label: '操作人' },
   { t_props: 'createTime', t_label: '操作时间' },
   { t_props: 'statusName', t_label: '状态' },

src/views/purchase/binding/index.vue

@@ -32,16 +32,31 @@
                     >查看</el-button
                 >
                 <el-button
-                    type="danger"
+                    type="warning"
+                    plain
                     size="mini"
                     @click="toggleBinding(data)"
+                    v-if="data.status === 53"
                     >绑定</el-button
                 >
+                <el-button
+                  type="success"
+                  plain
+                  size="mini"
+                  @click="toggleDownload(data)"
+                >下载</el-button
+                >
+
             </template>
 
             <template slot="purchaseNum" slot-scope="{ data }">
               {{ data.purchaseNum / 1000 }}
             </template>
+            <template slot="purchasePrice" slot-scope="{ data }">
+              {{ data.purchasePrice / 100 }}
+            </template><template slot="notaxPrice" slot-scope="{ data }">
+              {{ data.notaxPrice / 100 }}
+            </template>
 
         </TableModel>
 
@@ -60,7 +75,8 @@ import { columnsList, dialogConfig, formLabel } from './config'
 import { commonMixin } from '../mixins/common'
 import ListBinding from './components/list-binding.vue'
 import {
-  queryPurchaseBindListApi
+  queryPurchaseBindListApi,
+  downloadQrcode
 } from '@/api/purchase/binding'
 
 export default {
@@ -72,10 +88,25 @@ export default {
       goBack() {
         this.isShowComponent = 'Index'
       },
+      // 绑定
       toggleBinding(data) {
         this.sendParams = {taskId:data.id}
-        console.log(data)
         this.isShowComponent = 'list-binding'
+      },
+      // 下载
+      toggleDownload(data) {
+        this.download(
+          'task/purchase/bind/downloadQrCode',
+          {
+            id: data.id
+          },
+          `二维码合集_${new Date().getTime()}.zip`
+        )
+        /* downloadQrcode({
+          id: data.id,
+        }).then(res => {
+          console.log(res)
+        }).catch(err => {}) */
       }
     },
     data() {

src/views/purchase/warehouse/components/form-warehouse.vue

@@ -1,162 +0,0 @@
-<template>
-    <!-- 往来单位 新增、编辑 表单组件 -->
-    <div>
-        <el-form
-            label-width="100px"
-            size="medium"
-            ref="contactUnitsParamsRef"
-            :model="storageConfigParams"
-            :rules="storageConfigParamsRules"
-        >
-            <el-form-item label="仓库名称" prop="houseId">
-                <el-select v-model="storageConfigParams.houseId">
-                  <el-option
-                    v-for="item in storageConfigRange"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  ></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="物资名称" prop="typeId">
-              <treeselect
-                v-model="storageConfigParams.typeId"
-                :options="typeRange"
-                noChildrenText="没有数据了"
-                noOptionsText="没有数据"
-                noResultsText="没有搜索结果"
-                placeholder="请选择所属上级"
-              />
-            </el-form-item>
-            <el-form-item>
-                <el-button type="success" @click="onSubmit">确定</el-button>
-                <el-button
-                    @click="
-                        () => {
-                            this.$emit('closeDialog')
-                        }
-                    "
-                    >取消</el-button
-                >
-            </el-form-item>
-        </el-form>
-    </div>
-</template>
-
-<script>
-import {
-  addStorageConfigListApi,
-  updateStorageConfigListApi
-} from '@/api/material/storageConfig'
-import {
-  queryStorageListApi
-} from '@/api/material/storage'
-import {
-  queryMaTypeTreeListApi
-} from '@/api/material/type'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-export default {
-    name: 'FormStorage',
-    props: {
-        editParams: {
-            type: Object,
-            default: () => null,
-        },
-    },
-    components: { Treeselect },
-    created() {
-      this.getHouseRange()
-      this.getTypeRange()
-    },
-    mounted() {
-        if (this.editParams) {
-            Object.assign(this.storageConfigParams, this.editParams)
-            this.subSort = 2
-        } else {
-            this.subSort = 1
-        }
-    },
-    data() {
-        return {
-            subSort: '', // 提交类型：新增 1 / 修改 2
-            storageConfigParams: {
-                houseId: undefined, // 仓库名称
-                typeId: undefined, // 物资名称
-            },
-            // 仓库下拉选项
-            storageConfigRange: [],
-            // 类型下拉选项
-            typeRange: [],
-            // 校验规则
-            storageConfigParamsRules: {
-                houseId: [
-                    {
-                        required: true,
-                        message: '请输入仓库名称',
-                        trigger: 'blur',
-                    },
-                ],
-                typeId: [
-                    {
-                        required: true,
-                        message: '请选择物资名称',
-                        trigger: 'blur',
-                    },
-                ],
-            },
-        }
-    },
-    methods: {
-        /** 初始化获取仓库下拉 */
-        getHouseRange() {
-          queryStorageListApi().then(res => {
-            console.log(res)
-            this.storageConfigRange = res.rows.map(item => {
-              return {
-                value: item.id,
-                label: item.name,
-              }
-            })
-          }).catch(err => {})
-        },
-        /** 初始化获取类型下拉 */
-        getTypeRange() {
-          queryMaTypeTreeListApi().then(res => {
-            this.typeRange = res.data
-          }).catch(err => {})
-        },
-        /** 确认按钮 */
-        onSubmit() {
-            this.$refs.contactUnitsParamsRef.validate((valid) => {
-                if (valid) {
-                    console.log('校验通过', this.storageConfigParams, this.subSort)
-                    // 1. 表单校验通过后调后台 Api
-                    if(this.subSort === 1) {
-                      addStorageConfigListApi(this.storageConfigParams).then(res => {
-                        console.log(res)
-                        this.$modal.msgSuccess('新增成功')
-                      }).catch(err => {})
-                    } else if(this.subSort === 2) {
-                      updateStorageConfigListApi(this.storageConfigParams).then(res => {
-                        console.log(res)
-                        this.$modal.msgSuccess('修改成功')
-                      }).catch(err => {})
-                    }
-                    // 2. 成功之后通知父组件关闭弹框
-                    this.$emit('closeDialog', true)
-                }
-            })
-        },
-    },
-}
-</script>
-
-<style scoped>
-::v-deep .el-select {
-    width: 100%;
-}
-::v-deep .el-form-item__label{
-  font-weight: normal;
-}
-</style>

src/views/purchase/warehouse/components/warehouse-detail.vue

@@ -0,0 +1,136 @@
+<template>
+    <!-- 往来单位 新增、编辑 表单组件 -->
+    <div>
+      <TableModel
+        :formLabel="formLabel"
+        :columnsList="columnsList"
+        ref="tableRef"
+        style="display: flex; flex-direction: column"
+        :request-api="queryPurchaseStorageInnerListApi"
+        :send-params="transObj"
+        :selectable="(row) => {
+          return row.status === 55
+        }"
+        @transIdList="getIdList"
+      >
+        <template slot="btn" slot-scope="{ queryParams }">
+          <el-button type="success" @click="multiWarehouse"
+          >批量入库</el-button>
+          <el-button type="danger"
+          >批量驳回</el-button>
+        </template>
+        <template slot="purchaseNum" slot-scope="{ data }">
+          {{ data.purchaseNum / 1000 }}
+        </template>
+        <template slot="status" slot-scope="{ data }">
+          {{ data.statusName }}
+        </template>
+        <template slot="manageType" slot-scope="{ data }">
+          <span v-if="data.manageType === '0'">编码</span>
+          <span v-if="data.manageType === '1'">数量</span>
+        </template>
+        <template slot="handle" slot-scope="{ data }" v-if="data.status === 55">
+          <el-button type="success" @click="handleWarehouse(data.id)"
+          >入库</el-button>
+          <el-button type="danger"
+          >驳回</el-button>
+        </template>
+      </TableModel>
+    </div>
+</template>
+
+<script>
+import { columnsList } from '../config-warehouse-detail'
+import {
+  queryPurchaseStorageInnerListApi,
+  newPurchaseWarehouseApi
+} from '@/api/purchase/warehouse'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+export default {
+    name: 'WarehouseDetail',
+    props: {
+        editParams: {
+            type: Object,
+            default: () => null,
+        },
+        sendParams: {
+            type: Object,
+            default: () => null,
+        },
+        sendRange: {
+          type: Array,
+          default: () => null
+        },
+        sendCascader: {
+          type: Array,
+          default: () => null
+        }
+    },
+    components: { Treeselect },
+    created() {
+      console.log(this.sendParams)
+      this.transObj = { ['id']: this.sendParams['id'] }
+    },
+    mounted() {
+
+    },
+    data() {
+        return {
+          formLabel: [
+            { f_label: '类型规格', f_model: 'typeId', f_type: 'selCas', f_selList: this.sendCascader },
+            { f_label: '机具厂家', f_model: 'supplierId', f_type: 'sel', f_selList: this.sendRange },
+            { f_label: '出厂日期', f_model: 'productDate', f_type: 'date' },
+          ],
+          columnsList,
+          transObj: {},
+          multiWarehouseList: []
+        }
+    },
+    methods: {
+      queryPurchaseStorageInnerListApi,
+      getIdList(list) {
+        this.multiWarehouseList = list
+      },
+      // 批量入库
+      multiWarehouse() {
+        if(this.multiWarehouseList.length === 0) {
+          this.$modal.msgError('请选择需要批量入库的物资')
+        } else {
+          let idList = []
+          this.multiWarehouseList.forEach(item => {
+            idList.push(item.id)
+          })
+          let substr = idList.join()
+          console.log(substr)
+          // 请求
+          newPurchaseWarehouseApi({
+            purchaseId: substr
+          }).then(res => {
+            this.$modal.msgSuccess('操作成功')
+            this.$refs.tableRef.getTableList()
+          }).catch(err => {})
+        }
+      },
+      // 单个入库
+      handleWarehouse(id) {
+        console.log(id)
+        newPurchaseWarehouseApi({
+          purchaseId: id
+        }).then(res => {
+          this.$modal.msgSuccess('操作成功')
+          this.$refs.tableRef.getTableList()
+        }).catch(err => {})
+      }
+    },
+}
+</script>
+
+<style scoped>
+::v-deep .el-select {
+    width: 100%;
+}
+::v-deep .el-form-item__label{
+  font-weight: normal;
+}
+</style>

src/views/purchase/warehouse/config-warehouse-detail.js

@@ -0,0 +1,10 @@
+export const columnsList = [
+  { t_props: 'materialName', t_label: '物资名称', },
+  { t_props: 'materialModel', t_label: '规格型号' },
+  { t_props: 'purchaseNum', t_label: '到货数量', t_slot: 'purchaseNum' },
+  { t_props: 'unitName', t_label: '单位', },
+  { t_props: 'supplierName', t_label: '供应商' },
+  { t_props: 'productDate', t_label: '出厂日期' },
+  { t_props: 'manageType', t_label: '管理模式', t_slot: 'manageType' },
+  { t_props: 'status', t_label: '状态', t_slot: 'status' },
+]

src/views/purchase/warehouse/config.js

@@ -1,22 +1,33 @@
+import {
+  queryStatusSelApi
+} from '@/api/purchase/receive'
+
+export const queryStatusSelData = () => {
+  queryStatusSelApi().then(res => {
+    formLabel[3].f_selList = res.data.data.map(item => {
+      return {
+        label: item.dictLabel,
+        value: item.dictCode
+      }
+    })
+  })
+}
 
 export const formLabel = [
   { f_label: '开始时间', f_model: 'startTime', f_type: 'date' },
   { f_label: '结束时间', f_model: 'endTime', f_type: 'date' },
   { f_label: '关键字', f_model: 'keyWord', f_type: 'ipt' },
-  { f_label: '状态', f_model: 'keyWord', f_type: 'ipt' },
+  { f_label: '状态', f_model: 'status', f_type: 'sel', f_selList: [] },
 ]
 export const columnsList = [
-  { t_props: 'name', t_label: '到货时间', },
+  { t_props: 'arrivalTime', t_label: '到货时间', },
-  { t_props: 'address', t_label: '采购单号' },
+  { t_props: 'purchaseCode', t_label: '采购单号' },
-  { t_props: 'companyMan', t_label: '采购物资' },
+  { t_props: 'purchaseMaterial', t_label: '采购物资', },
-  { t_props: 'mainPerson', t_label: '采购数量' },
+  { t_props: 'purchaseNum', t_label: '采购数量', t_slot: 'purchaseNum' },
-  { t_props: 'phone', t_label: '采购价格(含税)', },
+  { t_props: 'createBy', t_label: '操作人' },
-  { t_props: 'scopeBusiness', t_label: '采购价格(不含税)' },
+  { t_props: 'createTime', t_label: '操作时间' },
-  { t_props: 'picUrl', t_label: '税率', },
+  { t_props: 'status', t_label: '状态', t_slot: 'status' },
-  { t_props: 'notes', t_label: '操作人' },
+  { t_props: 'remark', t_label: '备注' },
-  { t_props: 'notes', t_label: '操作时间' },
-  { t_props: 'notes', t_label: '状态' },
-  { t_props: 'notes', t_label: '备注' },
 
 ]
 export const dialogConfig = {

src/views/purchase/warehouse/index.vue

@@ -1,19 +1,29 @@
 <template>
     <!-- 往来单位管理页面 -->
     <div class="app-container">
+        <PageHeader
+          v-if="isShowComponent !== 'Index'"
+          :pageContent="pageContent"
+          @goBack="goBack"
+        />
         <!-- 列表 -->
         <TableModel
           :formLabel="formLabel"
           :columnsList="columnsList"
-          :request-api="queryStorageConfigListApi"
+          :request-api="queryPurchaseStorageListApi"
           ref="tableRef"
+          v-if="isShowComponent === 'Index'"
+          :selectable="(row) => {
+            return row.status === 55
+          }"
+          @transIdList="getIdList"
         >
             <template slot="btn" slot-scope="{ queryParams }">
-                <el-button type="success" @click="handleAddData()"
+                <el-button type="success" @click="multiWarehouse"
-                    >入库</el-button
+                    >批量入库</el-button
                 >
                 <el-button type="danger" @click="handleAddData()"
-                >驳回</el-button
+                >批量驳回</el-button
                 >
                 <el-button @click="handleExportData(queryParams, 'base/customer/export', '往来单位清单')"
                     >导出</el-button
@@ -21,72 +31,158 @@
             </template>
 
             <template slot="handle" slot-scope="{ data }">
-<!--                <el-button
-                  type="warning"
-                  size="mini"
-                >解绑</el-button
-                >-->
                 <el-button
                     type="primary"
                     size="mini"
-                    @click="handleEditData(data)"
+                    @click="toggleDetail(data)"
-                    >编辑</el-button
+                    >查看</el-button
+                >
+                <el-button
+                  type="success"
+                  size="mini"
+                  v-if="data.status === 55"
+                  @click="handleWarehouse(data.id)"
+                >入库</el-button
                 >
                 <el-button
                     type="danger"
                     size="mini"
-                    @click="handleDeleteData(data.id, delStorageConfigListApi)"
+                    v-if="data.status === 55"
-                    >删除</el-button
+                    >驳回</el-button
                 >
             </template>
-<!--            <template slot="isActive" slot-scope="{ data }">
+            <template slot="purchaseNum" slot-scope="{ data }">
-              {{ data.isActive == '1' ? '启用' : '不启用' }}
+              {{ data.purchaseNum / 1000 }}
+            </template>
+            <template slot="status" slot-scope="{ data }">
+                <span style="color: #D9001B">
+                  {{ data.statusName }}
+                </span>
             </template>
-            <template slot="phone" slot-scope="{ data }">
-              {{ phoneCrypto(data.phone) }}
-            </template>-->
         </TableModel>
 
-        <!-- 新增以及修改时的弹框 -->
+      <warehouse-detail
-        <DialogModel
+        v-if="isShowComponent === 'warehouse-detail'"
-            :dialogConfig="dialogConfig"
+        :send-params="transObj"
-            @closeDialogOuter="closeDialogOuter"
+        :send-range="factoryRange"
+        :send-cascader="cascaderRange"
       >
-            <template slot="outerContent">
+
-                <!-- 新增以及修改数据的表单组件 -->
+      </warehouse-detail>
-                <FormWarehouse
+
-                    @closeDialog="closeDialog"
-                    :editParams="editParams"
-                />
-            </template>
-        </DialogModel>
     </div>
 </template>
 
 <script>
-import { columnsList, dialogConfig, formLabel } from './config'
+import { columnsList, dialogConfig, formLabel, queryStatusSelData } from './config'
 import { commonMixin } from '../mixins/common'
-import FormWarehouse from './components/form-warehouse.vue'
+import WarehouseDetail from './components/warehouse-detail.vue'
 import {
-  queryStorageConfigListApi,
+  queryPurchaseStorageListApi,
-  delStorageConfigListApi
+  newPurchaseWarehouseApi
-} from '@/api/material/storageConfig'
+} from '@/api/purchase/warehouse'
+import {
+  querySupplierListApi
+} from '@/api/material/masupplier'
+import {
+  queryTypeListApi
+} from '@/api/purchase/arrival'
+import PageHeader from '@/components/pageHeader/index.vue'
+import TableConfirm from '@/views/purchase/confirm/components/table-confirm.vue'
 
 export default {
     name: 'arrivalReceiveManage',
     mixins: [commonMixin], // 混入公共方法和数据
-    components: { FormWarehouse },
+    components: { TableConfirm, PageHeader, WarehouseDetail },
+    created() {
+      queryStatusSelData()
+      // 查询厂家
+      querySupplierListApi().then(res => {
+        this.factoryRange = res.rows.map(item => {
+          return {
+            label: item.name,
+            value: item.id
+          }
+        })
+      }).catch(err => {})
+      // 查询物资规格
+      queryTypeListApi().then(res => {
+        res.data.forEach(lv1 => {
+          if(!lv1.children) {
+            lv1.disabled = true
+          } else {
+            lv1.children.forEach(lv2 => {
+              if(!lv2.children) {
+                lv2.disabled = true
+              } else {
+                lv2.children.forEach(lv3 => {
+                  if(!lv3.children) {
+                    lv3.disabled = true
+                  }
+                })
+              }
+            })
+          }
+        })
+        this.cascaderRange = res.data
+      }).catch(err => {})
+    },
     methods: {
-      queryStorageConfigListApi,
+      queryPurchaseStorageListApi,
-      delStorageConfigListApi
+      goBack() {
+        this.isShowComponent = 'Index'
+      },
+      toggleDetail(data) {
+        this.transObj = data
+        this.isShowComponent = 'warehouse-detail'
+      },
+      getIdList(list) {
+        this.multiWarehouseList = list
+      },
+      // 批量入库
+      multiWarehouse() {
+        if(this.multiWarehouseList.length === 0) {
+          this.$modal.msgError('请选择需要批量入库的物资')
+        } else {
+          let idList = []
+          this.multiWarehouseList.forEach(item => {
+            idList.push(item.id)
+          })
+          let substr = idList.join()
+          console.log(substr)
+          // 请求
+          newPurchaseWarehouseApi({
+            id: substr
+          }).then(res => {
+            this.$modal.msgSuccess('操作成功')
+            this.$refs.tableRef.getTableList()
+          }).catch(err => {})
+        }
+      },
+      // 单个入库
+      handleWarehouse(id) {
+        console.log(id)
+        newPurchaseWarehouseApi({
+          id
+        }).then(res => {
+          this.$modal.msgSuccess('操作成功')
+          this.$refs.tableRef.getTableList()
+        }).catch(err => {})
+      }
     },
     data() {
         return {
+            isShowComponent: 'Index',
+            pageContent: '入库详情',
+            transObj: undefined,
             formLabel,
             columnsList,
             dialogConfig,
             addDialogTitle: '新建仓库', // 新建时弹框标题
             editDialogTitle: '修改仓库', // 修改时弹框标题
+            factoryRange: [],
+            cascaderRange: [],
+            multiWarehouseList: []
         }
     },
 }