新增耗材导入导出

src/api/invoicing.js

@@ -360,3 +360,37 @@ export function tbConCheckGet(data) {
     }
   });
 }
+
+/**
+ * 耗材导出
+ * @returns
+ */
+export function tbConsInfodownload(data) {
+  return request({
+    url: "/api/tbConsInfo/download",
+    method: "get",
+    params: {
+      shopId: localStorage.getItem("shopId"),
+      ...data
+    },
+    responseType: "blob"
+  });
+}
+
+/**
+ * 导入耗材
+ * @returns
+ */
+export function tbConsInfoinputStock(file) {
+  const formData = new FormData();
+  formData.append("file", file);
+  formData.append("shopId", localStorage.getItem("shopId"));
+  return request({
+    url: "/api/tbConsInfo/inputStock",
+    method: "post",
+    data: formData,
+    Headers: {
+      "Content-Type": "multipart/form-data"
+    }
+  });
+}

src/views/invoicing/consumable/information.vue

@@ -2,90 +2,39 @@
 <template>
   <div class="app-container">
     <div class="head-container">
-      <el-row :gutter="20">
+      <div class="row_wrap">
-        <el-col :span="3">
+        <div class="row">
-          <el-input
+          <el-input v-model="query.conTypeId" size="small" clearable placeholder="请输入类型id" style="width: 150px;"
-            v-model="query.conTypeId"
+            @keyup.enter.native="getTableData" />
-            size="small"
+          <el-input v-model="query.conTypeName" size="small" clearable placeholder="请输入类型名称" style="width: 150px;"
-            clearable
+            @keyup.enter.native="getTableData" />
-            placeholder="请输入类型id"
+          <el-input v-model="query.conCode" size="small" clearable placeholder="请输入耗材代码" style="width: 150px;"
-            style="width: 100%;"
+            @keyup.enter.native="getTableData" />
-            class="filter-item"
+          <el-input v-model="query.conName" size="small" clearable placeholder="请输入耗材名称" style="width: 150px;"
-            @keyup.enter.native="getTableData"
+            @keyup.enter.native="getTableData" />
-          />
+          <div style="width: 150px;">
-        </el-col>
+            <el-select v-model="query.status" placeholder="请选择商品规格" style="width: 100%;">
-        <el-col :span="3">
+              <el-option :label="item.label" :value="item.value" v-for="item in typeEnums" :key="item.label" />
-          <el-input
+            </el-select>
-            v-model="query.conTypeName"
+          </div>
-            size="small"
-            clearable
-            placeholder="请输入类型名称"
-            style="width: 100%;"
-            class="filter-item"
-            @keyup.enter.native="getTableData"
-          />
-        </el-col>
-        <el-col :span="3">
-          <el-input
-            v-model="query.conCode"
-            size="small"
-            clearable
-            placeholder="请输入耗材代码"
-            style="width: 100%;"
-            class="filter-item"
-            @keyup.enter.native="getTableData"
-          />
-        </el-col>
-        <el-col :span="3">
-          <el-input
-            v-model="query.conName"
-            size="small"
-            clearable
-            placeholder="请输入耗材名称"
-            style="width: 100%;"
-            class="filter-item"
-            @keyup.enter.native="getTableData"
-          />
-        </el-col>
-        <el-col :span="3">
-          <el-select
-            v-model="query.status"
-            placeholder="请选择商品规格"
-            style="width: 100%;"
-          >
-            <el-option
-              :label="item.label"
-              :value="item.value"
-              v-for="item in typeEnums"
-              :key="item.label"
-            />
-          </el-select>
-        </el-col>
-        <el-col :span="6">
           <el-button type="primary" @click="getTableData">查询</el-button>
           <el-button @click="resetHandle">重置</el-button>
-        </el-col>
+        </div>
-      </el-row>
+        <div class="row">
+          <el-button icon="el-icon-download" :loading="downloadLoading" @click="protHandle">导出库存</el-button>
+          <el-button icon="el-icon-upload2" :loading="uploadLoading" @click="dialogVisible = true">导入库存</el-button>
+        </div>
+      </div>
     </div>
     <div class="head-container">
       <el-row>
         <el-col>
-          <el-button
+          <el-button type="primary" icon="el-icon-plus" @click="clickdialogframe('add')">添加</el-button>
-            type="primary"
-            icon="el-icon-plus"
-            @click="clickdialogframe('add')"
-            >添加</el-button
-          >
         </el-col>
       </el-row>
     </div>
     <div class="head-container" id="table_drag">
-      <el-table
+      <el-table ref="table" :data="tableData.data" v-loading="tableData.loading" row-key="id">
-        ref="table"
-        :data="tableData.data"
-        v-loading="tableData.loading"
-        row-key="id"
-      >
         <el-table-column prop="id" label="ID" width="50px" />
         <el-table-column label="耗材名称" prop="conName" />
         <el-table-column label="耗材代码" prop="conCode" />
@@ -114,22 +63,10 @@
         </el-table-column>
         <el-table-column label="操作" width="180" fixed="right">
           <template v-slot="scope">
-            <el-button type="text" @click="editorHandle(scope.row)"
+            <el-button type="text" @click="editorHandle(scope.row)">编辑</el-button>
-              >编辑</el-button
+            <el-button type="text" @click="clicksee(scope.row)" style="margin-left: 10px !important;">耗材记录</el-button>
-            >
+            <el-button type="text" size="mini" style="margin-left: 10px !important;"
-            <el-button
+              @click="$refs.AddConsTakin.show(scope.row)">耗材盘点</el-button>
-              type="text"
-              @click="clicksee(scope.row)"
-              style="margin-left: 10px !important;"
-              >耗材记录</el-button
-            >
-            <el-button
-              type="text"
-              size="mini"
-              style="margin-left: 10px !important;"
-              @click="$refs.AddConsTakin.show(scope.row)"
-              >耗材盘点</el-button
-            >
             <!-- <el-button type="text" icon="el-icon-rank">排序</el-button> -->
             <!-- <el-button type="text" @click="clickdialogfadd(scope.row)"
               style="margin-left: 10px !important;">入库</el-button> -->
@@ -143,112 +80,56 @@
       </el-table>
     </div>
     <div class="head-container">
-      <el-pagination
+      <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
-        :total="tableData.total"
+        layout="total, sizes, prev, pager, next, jumper" @current-change="paginationChange" @size-change="e => {
-        :current-page="tableData.page + 1"
+          tableData.size = e;
-        :page-size="tableData.size"
+          tableData.page = 0;
-        layout="total, sizes, prev, pager, next, jumper"
+          getTableData();
-        @current-change="paginationChange"
+        }
-        @size-change="
+          " />
-          e => {
-            tableData.size = e;
-            tableData.page = 0;
-            getTableData();
-          }
-        "
-      />
     </div>
     <!-- 耗材入库 -->
     <el-dialog title="耗材入库" :visible.sync="libraryshow">
-      <el-form
+      <el-form :inline="true" ref="reflibrary" :model="libraryshowdata" :rules="ruleslibrary" class="demo-form-inline">
-        :inline="true"
-        ref="reflibrary"
-        :model="libraryshowdata"
-        :rules="ruleslibrary"
-        class="demo-form-inline"
-      >
         <el-form-item label="耗材入库数量" prop="stockNumber">
-          <el-input
+          <el-input v-model.number="libraryshowdata.stockNumber" type="number" placeholder="请输入单位"></el-input>
-            v-model.number="libraryshowdata.stockNumber"
-            type="number"
-            placeholder="请输入单位"
-          ></el-input>
         </el-form-item>
         <el-form-item style="display: flex;justify-content: flex-end;">
           <el-button @click="libraryshow = false">取 消</el-button>
-          <el-button
+          <el-button type="primary" @click="clickdialoglibraryshow('reflibrary')">确 定</el-button>
-            type="primary"
-            @click="clickdialoglibraryshow('reflibrary')"
-            >确 定</el-button
-          >
         </el-form-item>
       </el-form>
     </el-dialog>
     <!-- 修改和增加 -->
     <el-dialog :title="dialogtitle" :visible.sync="dialogshow" width="70%">
-      <el-form
+      <el-form :inline="true" ref="refruleForm" :model="ruleForm" :rules="rules" class="demo-form-inline">
-        :inline="true"
-        ref="refruleForm"
-        :model="ruleForm"
-        :rules="rules"
-        class="demo-form-inline"
-      >
         <el-form-item label="单位" prop="conUnit" v-if="dialogtitle == '添加'">
-          <el-input
+          <el-input v-model="ruleForm.conUnit" placeholder="请输入单位"></el-input>
-            v-model="ruleForm.conUnit"
-            placeholder="请输入单位"
-          ></el-input>
         </el-form-item>
-        <el-form-item
+        <el-form-item label="耗材类型" prop="conNames" v-if="dialogtitle == '添加'">
-          label="耗材类型"
+          <el-input v-model="ruleForm.conNames" placeholder="请输耗材信息名称" disabled></el-input>
-          prop="conNames"
-          v-if="dialogtitle == '添加'"
-        >
-          <el-input
-            v-model="ruleForm.conNames"
-            placeholder="请输耗材信息名称"
-            disabled
-          ></el-input>
         </el-form-item>
         <el-form-item v-if="dialogtitle == '添加'">
-          <el-button type="primary" @click="typedialogshow = true"
+          <el-button type="primary" @click="typedialogshow = true">去选择</el-button>
-            >去选择</el-button
-          >
         </el-form-item>
         <el-form-item label="耗材信息名称" prop="conName">
-          <el-input
+          <el-input v-model="ruleForm.conName" placeholder="请输入耗材信息名称"></el-input>
-            v-model="ruleForm.conName"
-            placeholder="请输入耗材信息名称"
-          ></el-input>
         </el-form-item>
         <el-form-item label="耗材信息代码" prop="conCode">
-          <el-input
+          <el-input v-model="ruleForm.conCode" placeholder="请输入耗材信息代码"></el-input>
-            v-model="ruleForm.conCode"
-            placeholder="请输入耗材信息代码"
-          ></el-input>
         </el-form-item>
         <el-form-item label="耗材价格" prop="price">
-          <el-input
+          <el-input v-model="ruleForm.price" placeholder="请输入耗材价格"></el-input>
-            v-model="ruleForm.price"
-            placeholder="请输入耗材价格"
-          ></el-input>
         </el-form-item>
         <el-form-item label="预警值" prop="conWarning">
-          <el-input
+          <el-input v-model="ruleForm.conWarning" placeholder="请输入耗材预警值"></el-input>
-            v-model="ruleForm.conWarning"
-            placeholder="请输入耗材预警值"
-          ></el-input>
         </el-form-item>
         <!-- <el-form-item label="单位耗材值" prop="surplusStock">
           <el-input v-model="ruleForm.surplusStock" placeholder="请输入单位耗材值"></el-input>
         </el-form-item> -->
         <el-form-item style="display: flex;justify-content: flex-end;">
           <el-button @click="dialogshow = false">取 消</el-button>
-          <el-button
+          <el-button type="primary" :loading="ruleFormLoading" @click="submitForm('refruleForm')">
-            type="primary"
-            :loading="ruleFormLoading"
-            @click="submitForm('refruleForm')"
-          >
             确 定
           </el-button>
         </el-form-item>
@@ -256,47 +137,19 @@
     </el-dialog>
     <el-dialog title="选择类型" :visible.sync="typedialogshow">
       <div class="head-container">
-        <el-input
+        <el-input v-model="querytypedialogshowquery.conTypeName" size="small" clearable placeholder="请输入耗材类型名称"
-          v-model="querytypedialogshowquery.conTypeName"
+          style="width: 100%;" class="filter-item" @keyup.enter.native="getTableDatatype" />
-          size="small"
+        <el-input v-model="querytypedialogshowquery.conTypeCode" size="small" clearable placeholder="请输入耗材类型代码"
-          clearable
+          style="width: 100%;" class="filter-item" @keyup.enter.native="getTableDatatype" />
-          placeholder="请输入耗材类型名称"
+        <el-select v-model="querytypedialogshowquery.status" placeholder="请选择商品规格" style="width: 100%;">
-          style="width: 100%;"
+          <el-option :label="item.label" :value="item.value" v-for="item in typeEnums" :key="item.label" />
-          class="filter-item"
-          @keyup.enter.native="getTableDatatype"
-        />
-        <el-input
-          v-model="querytypedialogshowquery.conTypeCode"
-          size="small"
-          clearable
-          placeholder="请输入耗材类型代码"
-          style="width: 100%;"
-          class="filter-item"
-          @keyup.enter.native="getTableDatatype"
-        />
-        <el-select
-          v-model="querytypedialogshowquery.status"
-          placeholder="请选择商品规格"
-          style="width: 100%;"
-        >
-          <el-option
-            :label="item.label"
-            :value="item.value"
-            v-for="item in typeEnums"
-            :key="item.label"
-          />
         </el-select>
         <div style="margin-top: 10px;">
           <el-button type="primary" @click="getTableDatatype">查询</el-button>
           <el-button @click="resetHandletype">重置</el-button>
         </div>
       </div>
-      <el-table
+      <el-table ref="table" :data="tableDatatype.data" v-loading="tableDatatype.loading" row-key="id">
-        ref="table"
-        :data="tableDatatype.data"
-        v-loading="tableDatatype.loading"
-        row-key="id"
-      >
         <el-table-column label="耗材类型名称" prop="conTypeName" />
         <el-table-column label="耗材类型代码" prop="conTypeCode" />
         <el-table-column label="店铺ID" prop="shopId" />
@@ -313,30 +166,19 @@
         </el-table-column>
       </el-table>
       <div class="head-container">
-        <el-pagination
+        <el-pagination :total="tableDatatype.total" :current-page="tableDatatype.page + 1"
-          :total="tableDatatype.total"
+          :page-size="tableDatatype.size" layout="total, sizes, prev, pager, next, jumper"
-          :current-page="tableDatatype.page + 1"
+          @current-change="paginationChangetype" />
-          :page-size="tableDatatype.size"
-          layout="total, sizes, prev, pager, next, jumper"
-          @current-change="paginationChangetype"
-        />
       </div>
     </el-dialog>
     <el-dialog title="耗材信息" :visible.sync="clickseetypedialogshow">
       <div class="head-container">
-        <el-table
+        <el-table ref="table" :data="clickseetableData.data" v-loading="clickseetableData.loading" row-key="id"
-          ref="table"
+          height="450">
-          :data="clickseetableData.data"
-          v-loading="clickseetableData.loading"
-          row-key="id"
-          height="450"
-        >
           <el-table-column label="耗材名称" prop="conName" />
           <el-table-column label="变动库存" prop="amount">
             <template v-slot="scope">
-              <span :class="{ red: scope.row.bizType == '-' }"
+              <span :class="{ red: scope.row.bizType == '-' }">{{ scope.row.bizType }}{{ scope.row.amount }}</span>
-                >{{ scope.row.bizType }}{{ scope.row.amount }}</span
-              >
             </template>
           </el-table-column>
           <el-table-column label="现有库存" prop="balance" />
@@ -344,10 +186,7 @@
           <el-table-column label="业务说明" prop="bizName" />
           <!-- <el-table-column label="正负号标识" prop="bizType" /> -->
           <!-- <el-table-column label="耗材id" prop="consId" /> -->
-          <el-table-column
+          <el-table-column label="商品信息" prop="productName"></el-table-column>
-            label="商品信息"
-            prop="productName"
-          ></el-table-column>
           <el-table-column label="创建时间" prop="createTime"></el-table-column>
           <!-- <el-table-column label="更新时间" prop="updateTime">
           <template v-slot="scope">
@@ -357,17 +196,17 @@
         </el-table>
       </div>
       <div class="head-container">
-        <el-pagination
+        <el-pagination :total="clickseetableData.total" :current-page="clickseetableData.page + 1"
-          :total="clickseetableData.total"
+          :page-size="clickseetableData.size" layout="total, sizes, prev, pager, next, jumper"
-          :current-page="clickseetableData.page + 1"
+          @current-change="paginationChangetype" />
-          :page-size="clickseetableData.size"
-          layout="total, sizes, prev, pager, next, jumper"
-          @current-change="paginationChangetype"
-        />
       </div>
     </el-dialog>
     <!-- 耗材盘点 -->
     <AddConsTakin ref="AddConsTakin" @success="resetHandle" />
+    <!-- 导入耗材 -->
+    <el-dialog title="导入库存" :visible.sync="dialogVisible">
+      <UploadExcel :beforeUpload="excelSuccessUpload" />
+    </el-dialog>
   </div>
 </template>
 
@@ -385,8 +224,11 @@ import {
   postapitbConsInfo
 } from "@/api/consumable";
 import AddConsTakin from "../components/addConsTakin";
+import { tbConsInfodownload, tbConsInfoinputStock } from '@/api/invoicing'
+import { downloadFile } from "@/utils";
+import UploadExcel from '@/components/UploadExcel'
 export default {
-  components: { AddConsTakin },
+  components: { AddConsTakin, UploadExcel },
   data() {
     return {
       dayjs,
@@ -394,8 +236,10 @@ export default {
         conTypeId: "",
         conTypeName: "",
         conCode: "",
-        conName: ""
+        conName: "",
+        status: ''
       },
+      resetQuery: '',
       libraryshow: false, //耗材入库显示
       libraryshowdata: {
         id: "",
@@ -484,14 +328,45 @@ export default {
             trigger: "blur"
           }
         ]
-      }
+      },
+      downloadLoading: false,
+      uploadLoading: false,
+      dialogVisible: false
     };
   },
   mounted() {
+    this.resetQuery = { ...this.query }
     this.getTableData();
     this.getTableDatatype();
   },
   methods: {
+    // 导入耗材
+    async excelSuccessUpload(file) {
+      try {
+        this.uploadLoading = true
+        this.dialogVisible = false
+        await tbConsInfoinputStock(file)
+        this.uploadLoading = false
+        this.$notify.success('导入成功')
+        this.resetHandle()
+      } catch (error) {
+        this.dialogVisible = false
+        this.uploadLoading = false
+        console.log(error);
+      }
+    },
+    // 耗材导出
+    async protHandle() {
+      try {
+        this.downloadLoading = true;
+        const file = await tbConsInfodownload(this.query)
+        downloadFile(file, "耗材", "xlsx");
+        this.downloadLoading = false;
+      } catch (error) {
+        this.downloadLoading = false;
+        console.log(error);
+      }
+    },
     // 编辑
     editorHandle(row) {
       this.dialogtitle = "编辑";
@@ -503,10 +378,7 @@ export default {
     },
     // 重置查询
     resetHandle() {
-      this.query.conTypeId = "";
+      this.query = { ...this.resetQuery }
-      this.query.conTypeName = "";
-      this.query.conCode = "";
-      this.query.conName = "";
       this.tableData.page = 0;
       this.getTableData();
     },
@@ -524,12 +396,9 @@ export default {
       this.tableData.loading = true;
       try {
         const res = await gettbConsInfo({
+          ...this.query,
           page: this.tableData.page,
           size: this.tableData.size,
-          conTypeId: this.query.conTypeId,
-          conTypeName: this.query.conTypeName,
-          conCode: this.query.conCode,
-          conName: this.query.conName,
           shopId: localStorage.getItem("shopId")
         });
         this.tableData.loading = false;
@@ -676,6 +545,17 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.row_wrap {
+  display: flex;
+  justify-content: space-between;
+
+  .row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+}
+
 .handle {
   font-size: 18px;
   color: #999;