From 3a2386347b77e6f85df4313dc8f7356c420a8ede Mon Sep 17 00:00:00 2001
From: liang <594755172@qq.com>
Date: Thu, 12 Jun 2025 22:38:37 +0800
Subject: [PATCH] =?UTF-8?q?1.=20=E5=9B=9E=E9=80=80goods.vue=E7=9A=84?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/excel/UploadExcelInventory.vue        |   2 +-
 dev_wms_client/src/layout/goods.vue           | 554 +++++++-----------
 2 files changed, 222 insertions(+), 334 deletions(-)

diff --git a/dev_wms_client/src/excel/UploadExcelInventory.vue b/dev_wms_client/src/excel/UploadExcelInventory.vue
index d045787..9f644d3 100644
--- a/dev_wms_client/src/excel/UploadExcelInventory.vue
+++ b/dev_wms_client/src/excel/UploadExcelInventory.vue
@@ -10,7 +10,7 @@
 <script setup>
 import store from '@/store'
 import {ref, reactive} from 'vue';
-import {uploadExcelBaseGoods, uploadExcelInventoryRequest} from '@/api/excel.js'
+import {uploadExcelInventoryRequest} from '@/api/excel.js'
 import {ElMessage} from 'element-plus'
 import {errorBox} from '@/utils/myMessageBox';
 import {sizeFormatter} from '@/utils/formatter.js'
diff --git a/dev_wms_client/src/layout/goods.vue b/dev_wms_client/src/layout/goods.vue
index 8ce01ce..7bc0d39 100644
--- a/dev_wms_client/src/layout/goods.vue
+++ b/dev_wms_client/src/layout/goods.vue
@@ -1,180 +1,105 @@
 <template>
-    <el-config-provider :locale="zhCn">
-        <el-container class="content">
-            <div class="work-area">
-                <fieldset class="search-area">
-                    <el-form ref="searchQueryFormRef" :model="searchQueryFormEntity" :label-position="labelPosition"
-                        label-width="158px" style="max-width: 100%" status-icon>
-                        <div style="display: flex;justify-content: space-between;">
-                            <el-row>
-                                <el-form-item label="料号">
-                                    <el-input v-model="searchQueryFormEntity.goodsId" @keyup.enter="search()"
-                                        clearable />
-                                </el-form-item>
-                                <el-form-item label="描述">
-                                    <el-input v-model="searchQueryFormEntity.goodsDesc" @keyup.enter="search()"
-                                        clearable />
-                                </el-form-item>
-                            </el-row>
-                            <div style="align-content: center;">
-                                <el-row>
-                                    <el-button type="primary" class="btn-search" @click="search()">查询</el-button>
-                                    <el-button type="warning" class="btn-search" @click="clearQuery()">清除输入</el-button>
-                                </el-row>
-                            </div>
-                        </div>
-                    </el-form>
-                </fieldset>
-                <div class="table-area">
-                    <el-table :data="tableData" stripe border v-loading="tableLoading" class="table-class"
-                        :max-height="maxHeight" highlight-current-row @row-click="getCurrentRow"
-                        :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
-                        @sort-change="handleSortChange">
-                        <el-table-column width="65px" fixed="left">
-                            <template v-slot="scope">
-                                <el-radio :label="scope.row.goodsId" v-model="goodsId">&nbsp;</el-radio>
-                            </template>
-                        </el-table-column>
-                        <el-table-column prop="goodsId" label="料号" fixed="left" min-width="120px" sortable="custom"
-                            show-overflow-tooltip />
-                        <el-table-column prop="goodsDescription" label="描述" min-width="120px" sortable="custom"
-                            show-overflow-tooltip />
-                        <el-table-column prop="plant" label="工厂" min-width="120px" sortable="custom"
-                            show-overflow-tooltip />
-                        <el-table-column prop="vendorName" label="供应商" min-width="120px" sortable="custom"
-                            show-overflow-tooltip />
-                        <el-table-column prop="isSled" label="SLED管理" min-width="120px" sortable="custom"
-                            show-overflow-tooltip />
-                        <el-table-column prop="sledDays" label="SLED天数" min-width="120px" sortable="custom"
-                            show-overflow-tooltip />
-                        <el-table-column prop="feedingType" label="补料类型" min-width="120px" sortable="custom"
-                            show-overflow-tooltip />
-                        <el-table-column prop="boxQty" label="每盒数量" min-width="120px" sortable="custom"
-                            show-overflow-tooltip />
-                        <el-table-column prop="maxBoxNum" label="最大盒数" min-width="120px" sortable="custom"
-                            show-overflow-tooltip />
-                        <el-table-column prop="putArea" label="存放区域" min-width="120px" sortable="custom"
-                            show-overflow-tooltip />
-                        <el-table-column prop="hotPoint" label="热点区域" min-width="120px" sortable="custom"
-                            show-overflow-tooltip />
-                        <el-table-column fixed="right" label="操作" width="170px">
-                            <template v-slot="scope">
-                                <div style="display: inline-block; align-content: center;">
-                                    <el-button type="primary"
-                                        @click="editCurrentRowFormEntity(scope.row)">编辑</el-button>
-                                    <el-button type="danger" @click="closeGoods(scope.row)">关闭</el-button>
-                                </div>
-                            </template>
-                        </el-table-column>
-                    </el-table>
-                    <br />
-                    <el-pagination v-model:current-page="baseTableQuery.currentPage"
-                        v-model:page-size="baseTableQuery.pageSize" :page-sizes="[10, 25, 50]" :small="false"
-                        :disabled="false" :background="false" :default-page-size="10" @size-change="search"
-                        @current-change="search" layout="total, sizes, prev, pager, next, jumper"
-                        :total="baseTableQuery.total" />
-                </div>
-                <el-dialog v-model="rowEditFlag" title="物料信息" width="60%" draggable :show-close="false">
-                    <el-form ref="rowEditFormRef" :model="rowFormEntity" :label-position="labelPosition"
-                        label-width="100px" style="max-width: 100%" status-icon>
-                        <el-row :gutter="16">
-                            <el-col :span="12" :offset="0">
-                                <el-form-item label="料号">
-                                    <el-input v-model="rowFormEntity.goodsId" disabled />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="描述">
-                                    <el-input v-model="rowFormEntity.goodsDescription" disabled />
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                        <el-row :gutter="16">
-                            <el-col :span="12" :offset="0">
-                                <el-form-item label="工厂">
-                                    <el-input v-model="rowFormEntity.plant" disabled />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="供应商">
-                                    <el-input v-model="rowFormEntity.vendorName" disabled />
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                        <el-row :gutter="16">
-                            <el-col :span="12" :offset="0">
-                                <el-form-item label="SLED管理">
-                                    <el-input v-model="rowFormEntity.isSled" disabled />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="SLED天数">
-                                    <el-input v-model="rowFormEntity.sledDays" disabled />
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                        <el-row :gutter="16">
-                            <el-col :span="12" :offset="0">
-                                <el-form-item label="补料类型">
-                                    <el-input v-model="rowFormEntity.feedingType" disabled />
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                        
-                        <!-- 可编辑字段 -->
-                        <el-divider>可编辑字段</el-divider>
-                        
-                        <el-row :gutter="16">
-                            <el-col :span="12" :offset="0">
-                                <el-form-item label="每盒数量">
-                                    <el-input-number v-model="rowFormEntity.boxQty" controls-position="right"
-                                        :min="0" clearable />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="最大盒数">
-                                    <el-input-number v-model="rowFormEntity.maxBoxNum" controls-position="right"
-                                        :min="0" clearable />
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                        <el-row :gutter="16">
-                            <el-col :span="12" :offset="0">
-                                <el-form-item label="存放区域">
-                                    <el-input v-model="rowFormEntity.putArea" clearable />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="热点区域">
-                                    <el-input v-model="rowFormEntity.hotPoint" clearable />
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                    </el-form>
-                    <template #footer>
-                        <span class="dialog-footer">
-                            <el-button type="primary" @click="rowEditFlag = false">取消</el-button>
-                            <el-button type="success" @click="submitUpdateRow(rowFormEntity)">
-                                确定
-                            </el-button>
-                        </span>
-                    </template>
-                </el-dialog>
+  <el-config-provider :locale="zhCn">
+    <el-container class="content">
+      <div class="work-area">
+        <fieldset class="search-area">
+          <el-form ref="searchQueryFormRef" :model="searchQueryFormEntity" :label-position="labelPosition"
+                   label-width="158px" style="max-width: 100%" status-icon>
+            <div style="display: flex;justify-content: space-between;">
+              <el-row>
+                <el-form-item label="料号">
+                  <el-input v-model="searchQueryFormEntity.goodsId" @keyup.enter="search()"
+                            clearable/>
+                </el-form-item>
+                <el-form-item label="描述">
+                  <el-input v-model="searchQueryFormEntity.goodsDesc" @keyup.enter="search()"
+                            clearable/>
+                </el-form-item>
+              </el-row>
+              <div style="align-content: center;">
+                <el-row>
+                  <el-button type="primary" class="btn-search" @click="search()">查询</el-button>
+                  <el-button type="warning" class="btn-search" @click="clearQuery()">清除输入</el-button>
+                </el-row>
+                <el-row>
+                  <el-button style="background-color: #00CED1;" class="btn-search"
+                             @click="openUploadDialog()">导入数据
+                  </el-button>
+                  <el-button type="success" class="btn-search"
+                             @click="exportExcel()">导出excel
+                  </el-button>
+                </el-row>
+              </div>
             </div>
-        </el-container>
-    </el-config-provider>
+          </el-form>
+        </fieldset>
+        <div class="table-area">
+          <el-table :data="tableData" stripe border v-loading="tableLoading" class="table-class"
+                    :max-height="maxHeight" highlight-current-row @row-click="getCurrentRow"
+                    :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
+                    @sort-change="handleSortChange">
+            <el-table-column width="65px" fixed="left">
+              <template v-slot="scope">
+                <el-radio :label="scope.row.goodsId" v-model="goodsId">&nbsp;</el-radio>
+              </template>
+            </el-table-column>
+            <el-table-column prop="goodsId" label="料号" fixed="left" min-width="120px" sortable="custom"
+                             show-overflow-tooltip/>
+            <el-table-column prop="goodsDescription" label="描述" min-width="120px" sortable="custom"
+                             show-overflow-tooltip/>
+            <el-table-column prop="plant" label="工厂" min-width="120px" sortable="custom"
+                             show-overflow-tooltip/>
+            <el-table-column prop="vendorName" label="供应商" min-width="120px" sortable="custom"
+                             show-overflow-tooltip/>
+            <el-table-column prop="isSled" label="SLED管理" min-width="120px" sortable="custom"
+                             show-overflow-tooltip/>
+            <el-table-column prop="sledDays" label="SLED天数" min-width="120px" sortable="custom"
+                             show-overflow-tooltip/>
+            <el-table-column prop="feedingType" label="补料类型" min-width="120px" sortable="custom"
+                             show-overflow-tooltip/>
+            <el-table-column prop="boxQty" label="每盒数量" min-width="120px" sortable="custom"
+                             show-overflow-tooltip/>
+            <el-table-column prop="maxBoxNum" label="最大盒数" min-width="120px" sortable="custom"
+                             show-overflow-tooltip/>
+            <el-table-column prop="putArea" label="存放区域" min-width="120px" sortable="custom"
+                             show-overflow-tooltip/>
+            <el-table-column prop="hotPoint" label="热点区域" min-width="120px" sortable="custom"
+                             show-overflow-tooltip/>
+          </el-table>
+          <br/>
+          <el-pagination v-model:current-page="baseTableQuery.currentPage"
+                         v-model:page-size="baseTableQuery.pageSize" :page-sizes="[10, 25, 50]" :small="false"
+                         :disabled="false" :background="false" :default-page-size="10" @size-change="search"
+                         @current-change="search" layout="total, sizes, prev, pager, next, jumper"
+                         :total="baseTableQuery.total"/>
+        </div>
+        <el-dialog v-model="showUploadDialog" title="上传物料信息" width="40%" draggable :show-close="true">
+          <fieldset class="search-area">
+            <legend>导入基础信息</legend>
+            <UploadExcelBaseGoods></UploadExcelBaseGoods>
+          </fieldset>
+          <fieldset class="search-area">
+            <legend>导入看板信息</legend>
+            <UploadExcelKanban></UploadExcelKanban>
+          </fieldset>
+        </el-dialog>
+      </div>
+    </el-container>
+  </el-config-provider>
 </template>
 
 <script setup>
 import store from '@/store'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
-import { getGoodsInfoByPage, updateGoodsInfo, closeGoodsInfo } from '@/api/goods.js'
-import { timeFormatter, wmsTaskTypeFormatter, wmsTaskStatusFormatter } from '@/utils/formatter.js'
-import { ref, reactive, onMounted, nextTick, onBeforeUnmount } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { genTableRequest } from '@/utils/generator.js'
-import { labelPosition } from '@/constant/form.js'
-import { loading } from '@/utils/loading'
+import {getGoodsInfoByPage} from '@/api/goods.js'
+import {ref, reactive, onMounted, nextTick, onBeforeUnmount} from 'vue'
+import {ElMessage} from 'element-plus'
+import {genTableRequest} from '@/utils/generator.js'
+import {labelPosition} from '@/constant/form.js'
+import UploadExcelBaseGoods from '@/excel/UploadExcelBaseGoods.vue'
+import UploadExcelKanban from '@/excel/UploadExcelKanban.vue'
+import {exportGoodsExcel} from "@/api/excel";
+
 /**
  * 常量定义
  */
@@ -187,247 +112,210 @@ let maxHeight = ref(window.innerHeight * 0.55)
 let tableLoading = ref(false)
 let tableData = ref([])
 let baseTableQuery = reactive({
-    currentPage: 1,
-    pageSize: 10,
-    total: 0,
-    sortBy: new Map([['goodsId', true]]),// 按照料号顺序排序
-    standId: STAND_ID,
-    userName: USER_NAME
+  currentPage: 1,
+  pageSize: 10,
+  total: 0,
+  sortBy: new Map([['goodsId', true]]),// 按照料号顺序排序
+  standId: STAND_ID,
+  userName: USER_NAME
 })
 let searchQueryFormEntity = reactive({
-    goodsId: '',
-    goodsDesc: ''
+  goodsId: '',
+  goodsDesc: ''
 })
 let searchQueryFormRef = ref()
 let rowEditFlag = ref(false)
 let goodsId = ''
 let rowEditFormRef = ref()
 let rowFormEntity = reactive({})
+let showUploadDialog = ref(false)
 /**
  * 系统方法
  */
 onMounted(() => {
-    nextTick(() => {
-        window.addEventListener('resize', resizeHeight)
-        search()
-    })
+  nextTick(() => {
+    window.addEventListener('resize', resizeHeight)
+    search()
+  })
 })
 onBeforeUnmount(() => {
-    nextTick(() => {
-        window.removeEventListener('resize', resizeHeight)
-    })
+  nextTick(() => {
+    window.removeEventListener('resize', resizeHeight)
+  })
 })
 const resizeHeight = () => {
-    maxHeight.value = window.innerHeight * 0.55
+  maxHeight.value = window.innerHeight * 0.55
 }
 /**
  * 自定义方法
  */
 // 查询
 const search = () => {
-    tableLoading.value = true
-    let request = genTableRequest(baseTableQuery)
-    // 设定查询参数
-    request.goodsId = searchQueryFormEntity.goodsId.trim()
-    request.goodsDesc = searchQueryFormEntity.goodsDesc.trim()
-    getGoodsInfoByPage(request).then((res) => {
-        const response = res.data
-        if (response.code == 0) {
-            const data = response.data
-            if (data != null) {
-                tableData.value = data.lists
-                baseTableQuery.total = data.total
-            } else {
-                tableData.value = []
-                baseTableQuery.total = 0
-            }
-        } else {
-            ElMessage.error(response.message)
-        }
-    }).catch(err => {
-        ElMessage.error('查询数据异常。')
-    }).finally(() => {
-        tableLoading.value = false
-    })
+  tableLoading.value = true
+  let request = genTableRequest(baseTableQuery)
+  // 设定查询参数
+  request.goodsId = searchQueryFormEntity.goodsId.trim()
+  request.goodsDesc = searchQueryFormEntity.goodsDesc.trim()
+  getGoodsInfoByPage(request).then((res) => {
+    const response = res.data
+    if (response.code === 0) {
+      const data = response.data
+      if (data != null) {
+        tableData.value = data.lists
+        baseTableQuery.total = data.total
+      } else {
+        tableData.value = []
+        baseTableQuery.total = 0
+      }
+    } else {
+      ElMessage.error(response.message)
+    }
+  }).catch(err => {
+    ElMessage.error('查询数据异常。')
+  }).finally(() => {
+    tableLoading.value = false
+  })
 }
 const clearQuery = () => {
-    searchQueryFormEntity.goodsId = ''
-    searchQueryFormEntity.goodsDesc = ''
+  searchQueryFormEntity.goodsId = ''
+  searchQueryFormEntity.goodsDesc = ''
 }
 const handleSortChange = (data) => {
-    if (baseTableQuery.sortBy.has(data.prop)) {
-        baseTableQuery.sortBy.delete(data.prop)
-    }
-    baseTableQuery.sortBy.set(data.prop, data.order == 'ascending')
-    search()
+  if (baseTableQuery.sortBy.has(data.prop)) {
+    baseTableQuery.sortBy.delete(data.prop)
+  }
+  baseTableQuery.sortBy.set(data.prop, data.order.toLowerCase() === 'ascending')
+  search()
+}
+const openUploadDialog = () => {
+  showUploadDialog.value = true
 }
 const getCurrentRow = (row) => {
-    goodsId = row.goodsId
+  goodsId = row.goodsId
 }
-const timeFormat = (row, column, cellValue, index) => {
-    return timeFormatter(cellValue)
-}
-const taskTypeFormat = (row, column, cellValue, index) => {
-    return wmsTaskTypeFormatter(cellValue)
-}
-const taskStatusFormat = (row, column, cellValue, index) => {
-    return wmsTaskStatusFormatter(cellValue)
-}
-// 编辑弹框
-const editCurrentRowFormEntity = (row) => {
-    // 设置form值，复制所有字段
-    Object.assign(rowFormEntity, row)
-    // 弹出框
-    rowEditFlag.value = true
-}
-// 关闭物料
-const closeGoods = (row) => {
-    ElMessageBox.confirm(`确定要关闭物料(${row.goodsId})吗?`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-    }).then(() => {
-        const request = {
-            goodsId: row.goodsId,
-            standId: STAND_ID,
-            userName: USER_NAME
-        };
-        loading.open('关闭中...');
-        closeGoodsInfo(request).then(res => {
-            const response = res.data;
-            if (response.code == 0) {
-                ElMessage.success(response.message);
-                search();
-            } else {
-                ElMessage.error(response.message);
-            }
-        }).catch(err => {
-            ElMessage.error('请求异常。');
-        }).finally(() => {
-            loading.close();
-        });
-    }).catch(err => {
-        ElMessage.info('已取消关闭操作');
-    });
-}
-// 更新当前行数据
-const submitUpdateRow = (rowFormEntity) => {
-    const request = {
-        goodsId: rowFormEntity.goodsId,
-        boxQty: rowFormEntity.boxQty,
-        maxBoxNum: rowFormEntity.maxBoxNum,
-        putArea: rowFormEntity.putArea,
-        hotPoint: rowFormEntity.hotPoint,
-        standId: STAND_ID,
-        userName: USER_NAME
+const exportExcel = () => {
+  const params = {
+    goodsId: searchQueryFormEntity.goodsId,
+    goodsDesc: searchQueryFormEntity.goodsDesc,
+    userName: USER_NAME
+  }
+  exportGoodsExcel(params).then(res => {
+    const link = document.createElement('a');//创建a标签
+    try {
+      // let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});    //如果后台返回的不是blob对象类型，先定义成blob对象格式，该type导出为xls格式，
+      let blob = res.data    //如果后台返回的直接是blob对象类型，直接获取数据
+      // let _fileName = res.headers['content-disposition'].split(';')[1].split('=')[1]; //拆解获取文件名，如果后端有给返回文件名的话
+      let _fileName = '物料基础信息' + dateFormatter(new Date) + '.xlsx'
+      link.style.display = 'none'//隐藏
+
+      // 兼容不同浏览器的URL对象
+      const url = window.URL || window.webkitURL || window.moxURL
+      link.href = url.createObjectURL(blob)
+      link.setAttribute('download', _fileName.substring(_fileName.lastIndexOf('_') + 1))
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      url.revokeObjectURL(link.href)//移除url对象
+    } catch (e) {
+      console.log(e)
+      ElMessage.error('下载文件失败')
     }
-    loading.open('更新中...')
-    updateGoodsInfo(request).then(res => {
-        if (res.data.code == 0) {
-            ElMessage.success('更新数据成功。')
-            rowEditFlag.value = false
-            search()
-        } else {
-            ElMessage.error('更新数据失败。')
-        }
-    }).catch(err => {
-        console.log(err)
-        ElMessage.error('更新数据异常。')
-    }).finally(() => {
-        loading.close()
-    })
+  }).catch(err => {
+    console.log(err)
+    ElMessage.error('导出失败')
+  })
 }
 </script>
 <style scoped>
 .content {
-    display: flex;
-    width: 100%;
+  display: flex;
+  width: 100%;
 }
 
 .work-area {
-    width: 100%;
-    /* padding: 5px; */
+  width: 100%;
+  /* padding: 5px; */
 }
 
 .search-area {
-    margin: auto;
-    min-height: fit-content;
-    max-height: 40%;
-    margin-bottom: 10px;
-    min-width: inherit;
-    border: solid 1px;
-    border-radius: 10px;
-    box-shadow: 0px 15px 10px -15px #000;
-    overflow: auto;
-    padding: 10px;
+  margin: auto;
+  min-height: fit-content;
+  max-height: 40%;
+  margin-bottom: 10px;
+  min-width: inherit;
+  border: solid 1px;
+  border-radius: 10px;
+  box-shadow: 0px 15px 10px -15px #000;
+  overflow: auto;
+  padding: 10px;
 }
 
 .table-area {
-    margin: auto;
-    min-height: fit-content;
-    max-height: 60%;
-    margin-bottom: 10px;
-    min-width: inherit;
-    border: solid 1px;
-    border-radius: 10px;
-    box-shadow: 0px 15px 10px -15px #000;
-    overflow: auto;
-    padding: 10px;
+  margin: auto;
+  min-height: fit-content;
+  max-height: 60%;
+  margin-bottom: 10px;
+  min-width: inherit;
+  border: solid 1px;
+  border-radius: 10px;
+  box-shadow: 0px 15px 10px -15px #000;
+  overflow: auto;
+  padding: 10px;
 }
 
 .el-form-item {
-    margin: 5px 5px 5px 5px;
+  margin: 5px 5px 5px 5px;
 }
 
 .el-form-item .el-input {
-    width: 196px;
+  width: 196px;
 }
 
 .el-form-item .el-input-number {
-    width: 196px;
+  width: 196px;
 }
 
 .table-class {
-    margin: 5px 5px 5px 5px;
-    width: inherit;
+  margin: 5px 5px 5px 5px;
+  width: inherit;
 }
 
 .el-pagination {
-    padding-left: 5px;
+  padding-left: 5px;
 }
 
 .my-autocomplete li {
-    width: 196px;
-    line-height: normal;
-    padding: 7px;
+  width: 196px;
+  line-height: normal;
+  padding: 7px;
 }
 
 .my-autocomplete li .name {
-    text-overflow: ellipsis;
-    overflow: hidden;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 .my-autocomplete li .addr {
-    font-size: 12px;
-    color: #b4b4b4;
+  font-size: 12px;
+  color: #b4b4b4;
 }
 
 .my-autocomplete li .highlighted .addr {
-    color: #ddd;
+  color: #ddd;
 }
 
 .my-autocomplete li .goods_id {
-    color: brown;
+  color: brown;
 }
 
 .my-autocomplete li .goods_name {
-    color: cornflowerblue;
+  color: cornflowerblue;
 }
 
 .btn-search {
-    height: 30px;
-    width: 80px;
-    margin: auto 5px 5px auto;
-    color: black;
+  height: 30px;
+  width: 80px;
+  margin: auto 5px 5px auto;
+  color: black;
 }
 </style>
\ No newline at end of file