1.基本信息详情启用接口、物料类型保存接口

2.基本信息列表导入、导出接口、删除接口

src/api/material/basic.js

@@ -1,15 +1,15 @@
-import request from '@/utils/request'
-
+import request from '@/utils/request';
+import { download } from "@/utils/request";
 
 /**
  * 查询接口
  */
 
 // 获取物料列表信息以及表头字段
-const materialList = (data) => {
+const materialList = (data, page) => {
 
   return request({
-    url: `/system/material/list`,
+    url: `/system/material/list?pageSize=${page.pageSize}&pageNum=${page.pageNum}`,
     method: 'post',
     data: data
   })
@@ -264,10 +264,32 @@ const medcineitemBatchSave = (data) => {
   return request({
     url: `/system/medcineitem/batchSave `,
     method: 'post',
-    data: data
+    data,
+  })
+}
+
+// 导入文件  /dev-api/drp-admin/system/material/import
+const fileImport = (data) => {
+  return request({
+    url: '/system/material/import',
+    method: 'post',
+    data,
   })
 }
 
+/**
+ * 删除接口
+ */
+// 删除物料基本信息-列表   /dev-api/drp-admin/system/material/delete/{id}
+const delMaterial = (data)=>{
+  return request({
+    url: '/system/material/delete',
+    method: 'post',
+    data,
+  })
+}
+
+
 export default {
   // 查询
   materialList,
@@ -299,5 +321,8 @@ export default {
   saveMaterial,
   insertMaterialInfo,
   medcineitemBatchSave,
+  fileImport,
 
+  // 删除
+  delMaterial,
 }

src/utils/request.js

@@ -6,6 +6,7 @@ import errorCode from '@/utils/errorCode'
 import { tansParams, blobValidate } from "@/utils/ruoyi";
 import cache from '@/plugins/cache'
 import { saveAs } from 'file-saver'
+import judgeFileFormat from '@/views/material/tools/attachment-file'
 
 let downloadLoadingInstance;
 // 是否显示重新登录
@@ -61,46 +62,46 @@ service.interceptors.request.use(config => {
   }
   return config
 }, error => {
-    console.log(error)
-    Promise.reject(error)
+  console.log(error)
+  Promise.reject(error)
 })
 
 // 响应拦截器
 service.interceptors.response.use(res => {
-    // 未设置状态码则默认成功状态
-    const code = res.data.code || 200;
-    // 获取错误信息
-    const msg = errorCode[code] || res.data.msg || errorCode['default']
-    // 二进制数据则直接返回
-    if (res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer') {
-      return res.data
-    }
-    if (code === 401) {
-      if (!isRelogin.show) {
-        isRelogin.show = true;
-        MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
-          isRelogin.show = false;
-          store.dispatch('LogOut').then(() => {
-            location.href = '/index';
-          })
+  // 未设置状态码则默认成功状态
+  const code = res.data.code || 200;
+  // 获取错误信息
+  const msg = errorCode[code] || res.data.msg || errorCode['default']
+  // 二进制数据则直接返回
+  if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
+    return res.data
+  }
+  if (code === 401) {
+    if (!isRelogin.show) {
+      isRelogin.show = true;
+      MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
+        isRelogin.show = false;
+        store.dispatch('LogOut').then(() => {
+          location.href = '/index';
+        })
       }).catch(() => {
         isRelogin.show = false;
       });
     }
-      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
-    } else if (code === 500) {
-      Message({ message: msg, type: 'error' })
-      return Promise.reject(new Error(msg))
-    } else if (code === 601) {
-      Message({ message: msg, type: 'warning' })
-      return Promise.reject('error')
-    } else if (code !== 200) {
-      Notification.error({ title: msg })
-      return Promise.reject('error')
-    } else {
-      return res.data
-    }
-  },
+    return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
+  } else if (code === 500) {
+    Message({ message: msg, type: 'error' })
+    return Promise.reject(new Error(msg))
+  } else if (code === 601) {
+    Message({ message: msg, type: 'warning' })
+    return Promise.reject('error')
+  } else if (code !== 200) {
+    Notification.error({ title: msg })
+    return Promise.reject('error')
+  } else {
+    return res.data
+  }
+},
   error => {
     console.log('err' + error)
     let { message } = error;
@@ -143,4 +144,5 @@ export function download(url, params, filename, config) {
   })
 }
 
+
 export default service

src/views/material/basicFile/details.vue

@@ -1,6 +1,6 @@
 <!-- 物料信息基础档案——详情 -->
 <template>
-  <div class="material-details">
+  <div class="material-details" v-loading="loading">
     <!-- 操作栏 -->
     <!-- 基本信息栏 -->
     <div v-if="activeMainTab == 'material'">
@@ -39,13 +39,17 @@
         <el-col :span="1.5">
           <el-button-group>
             <el-button size="small" @click="handleMaterialType">维护物料类别</el-button>
-            <el-dropdown split-button size="small" @click="handleIsInvoke(true)" @command="handleIsInvoke">
+            <el-button size="small" @click="handleIsInvoke" :key="count">
+              <!-- 0：启用  2：停用 -->
+              {{ basicData.value.isEnable == '0' ? '停用' : '启用' }}
+            </el-button>
+          <!-- <el-dropdown split-button size="small" @click="handleIsInvoke(true)" @command="handleIsInvoke">
               启用
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item :command="isInvoke(true)">启用</el-dropdown-item>
                 <el-dropdown-item :command="isInvoke(false)">停用</el-dropdown-item>
               </el-dropdown-menu>
-            </el-dropdown>
+               </el-dropdown> -->
           </el-button-group>
         </el-col>
 
@@ -112,10 +116,14 @@
 
           <!-- 切换 -->
           <el-button-group>
-            <el-button size="small" icon="el-icon-d-arrow-left" @click="handleChangePage('first')"></el-button>
-            <el-button size="small" icon="el-icon-arrow-left" @click="handleChangePage('pre')"></el-button>
-            <el-button size="small" icon="el-icon-arrow-right" @click="handleChangePage('next')"></el-button>
-            <el-button size="small" icon="el-icon-d-arrow-right" @click="handleChangePage('end')"></el-button>
+            <el-button size="small" icon="el-icon-d-arrow-left" :disabled="!handleBasicEdit"
+              @click="handleChangePage('first')" />
+            <el-button size="small" icon="el-icon-arrow-left" :disabled="!handleBasicEdit"
+              @click="handleChangePage('pre')" />
+            <el-button size="small" icon="el-icon-arrow-right" :disabled="!handleBasicEdit"
+              @click="handleChangePage('next')" />
+            <el-button size="small" icon="el-icon-d-arrow-right" :disabled="!handleBasicEdit"
+              @click="handleChangePage('end')" />
           </el-button-group>
         </el-col>
       </el-row>
@@ -175,8 +183,8 @@
                         </el-form-item>
 
                         <el-form-item v-else-if="f.attribute == 'image'" :label="f.name">
-                          <el-image :src="basicData.value[f.prop]" fit="contain">
-                          </el-image>
+                          <el-image :src="basicData.value[f.prop]" fit="contain"></el-image>
+                          <!-- <img :src="basicData.value[f.prop]" alt="加载失败"> -->
 
                         </el-form-item>
 
@@ -312,45 +320,53 @@
     </el-card>
 
     <!-- 维护物料类别弹窗 -->
-    <el-dialog title="物料类别维护" :visible.sync="materialType.show" :before-close="handleCloseOtherDetails"
+    <el-dialog title="物料类别维护" :visible.sync="materialType.show" :before-close="handleCloseTypeDetails"
       :close-on-press-escape="false" :close-on-click-modal="false" width="80%" center class="materialType">
 
       <!-- 操作按钮 -->
       <el-row :gutter="10" class="mb10">
         <el-col :span="1.5">
           <el-button-group>
-            <el-button size="small" @click="handleMaterialTypeRow('add')">增行</el-button>
-            <el-button size="small" @click="handleMaterialTypeRow('del')">删行</el-button>
+            <el-button size="small" :disabled="!materialType.isEdit" @click="handleMaterialTypeRow('add')">增行</el-button>
+            <el-button size="small" :disabled="!materialType.isEdit" @click="handleMaterialTypeRow('del')">删行</el-button>
           </el-button-group>
           <el-button-group>
-            <el-button size="small" @click="handleMaterialTypeRow('save')">保存</el-button>
+            <el-button size="small" @click="handleMaterialTypeRow('edit')">{{ materialType.isEdit
+              ? '保存' : '修改' }}</el-button>
+            <el-button size="small" v-if="materialType.isEdit" @click="handleMaterialTypeRow('cancal')">取消</el-button>
             <el-button size="small" @click="handleMaterialTypeRow">刷新</el-button>
           </el-button-group>
         </el-col>
       </el-row>
       <!-- 表格数据 -->
-      <el-table :data="materialType.value" stripe style="width: 100%" max-height="350" v-loading="materialType.loading">
-        <el-table-column type="index" width="50" label="序号"></el-table-column>
+      <el-table :data="materialType.value" stripe style="width: 100%" max-height="350" v-loading="materialType.loading"
+        @selection-change="handleSelectionType">
+        <el-table-column type="selection" width="30" />
+        <el-table-column type="index" width="50" label="序号" />
         <el-table-column v-for="mt in materialType.form" v-if="mt.show" :label="mt.name" width="180">
-          <!-- :prop="mt.prop" -->
-
-          <!-- 多选框 -->
-          <el-checkbox size="small" v-if="mt.attribute == 'checkbox'" :disabled="!mt.edit"
-            v-model="materialType.value[mt.prop]" />
-
-          <!-- 下拉框 / 参照弹窗 -->
-          <el-select size="small" v-else-if="mt.attribute == 'select'" :disabled="!mt.edit"
-            v-model="materialType.value[`${mt.prop}Label`]" :key="materialType.value[mt.prop]" :placeholder="mt.name"
-            @focus="mt.apiUrl && handleQueryMore(mt, '', { name: 'materialType', prop: mt.prop })">
-            <el-option v-if="mt.dictId" v-for="d in mt.dictId" :key="d.dictValue" :label="d.dictLabel"
-              :value="d.dictValue">
-            </el-option>
-            <div slot="empty"></div>
-          </el-select>
-
-          <!-- 其他类型 -->
-          <el-input v-else size="small" v-model="materialType.value[mt.prop]" :readonly="!mt.edit"
-            :placeholder="mt.name" />
+
+          <template slot-scope="scope">
+            <!-- :prop="mt.prop" -->
+            <!-- 多选框 -->
+            <el-checkbox size="small" v-if="mt.attribute == 'checkbox'" :disabled="!(materialType.isEdit && mt.edit)"
+              v-model="scope.row[mt.prop]" />
+
+            <!-- 下拉框 / 参照弹窗 -->
+            <el-select size="small" v-else-if="mt.attribute == 'select'" :disabled="!(materialType.isEdit && mt.edit)"
+              v-model="scope.row[`${mt.prop}Label`]" :key="scope.row[mt.prop]" :placeholder="mt.name"
+              @focus="mt.apiUrl && handleQueryMore(mt, '', { name: 'materialType', prop: mt.prop })">
+              <el-option v-if="mt.dictId" v-for="d in mt.dictId" :key="d.dictValue" :label="d.dictLabel"
+                :value="d.dictValue">
+              </el-option>
+              <div slot="empty"></div>
+            </el-select>
+
+            <!-- 其他类型 -->
+
+            <el-input v-else size="small" v-model="scope.row[mt.prop]" :readonly="!(materialType.isEdit && mt.edit)"
+              :placeholder="mt.name" />
+          </template>
+
         </el-table-column>
       </el-table>
 
@@ -395,7 +411,7 @@
             <el-form :inline="true" label-position="right" :model="basicData.value">
             <!-- <el-form-item label="所属组织">
                   <el-input v-model="basicData.value.orgName" placeholder="所属组织"></el-input>
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       </el-form-item> -->
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             </el-form-item> -->
               <el-form-item label="物料编码">
                 <el-input v-model="basicData.value.code" size="small" readonly placeholder="物料编码"></el-input>
               </el-form-item>
@@ -407,7 +423,7 @@
               </el-form-item>
             <!-- <el-form-item label="版本号">
                 <el-input v-model="basicData.value.version"  placeholder="版本号"></el-input>
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       </el-form-item> -->
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             </el-form-item> -->
 
             </el-form>
           </el-collapse-item>
@@ -539,6 +555,7 @@ export default {
   data() {
     return {
       count: 1,
+      loading: false,
       // 详情固定标签页
       detailsTabs,
       defaultProps: {
@@ -581,6 +598,8 @@ export default {
         value: [],
         form: [],
         loading: false,
+        checkedList: [],
+        isEdit: false,
       },
       // 医药行业
       medcineData: {
@@ -885,13 +904,15 @@ export default {
 
           _this.getExecuteMethods(item.apiUrl, param, (data) => {
             let { tableBody } = data;
+
+            // 维护物料类别  --- 属于列表中获取label
             if (dataName == 'materialType') {
 
               _this[dataName].value.length && (_this[dataName].value = _this[dataName].value.map(d => {
 
                 let Blabel = tableBody.filter((t) => t.id == d[item.prop])[0];
                 console.log(Blabel, 'Blabel``````````````````````````');
-                d[`${item.prop}Label`] = (Blabel && Blabel.name) || Blabel || '11111';
+                d[`${item.prop}Label`] = (Blabel && Blabel.name) || Blabel || '';
                 return d;
               }))
 
@@ -903,6 +924,7 @@ export default {
             }
 
             this.count++;
+            this.loading = false;
             console.log(_this[dataName].value, `${dataName}//////////////////////`);
           })
         }
@@ -1234,6 +1256,7 @@ export default {
     // 刷新
     handleRefresh() {
       console.log('刷新');
+      this.handleRest();
     },
     // 过滤
     handleFilter(e) {
@@ -1257,7 +1280,14 @@ export default {
     },
     // 启用
     handleIsInvoke(e) {
-      console.log('启用', e);
+      console.log('启用', this.basicData.value.isEnable);
+      if (this.basicData.value.isEnable == '0') {
+        this.basicData.value.isEnable = '2';
+      } else {
+        // this.basicData.isEnable 为空或者为2
+        this.basicData.value.isEnable = '0';
+      }
+      this.handleSave();
     },
     isInvoke(val) {
       return val;
@@ -1288,31 +1318,110 @@ export default {
         this.$router.go(0)
       });
     },
+    // 物料类别列表选中
+    handleSelectionType(list) {
+      console.log('物料类别列表选中', list);
+      this.materialType.checkedList = list;
+    },
     // 物料类别增删行
     handleMaterialTypeRow(op) {
+      let _this = this;
       switch (op) {
-
         // 增行
         case 'add':
-          console.log('物料类别增行');
-          break;
+          let rowObj = _this.materialType.value[0];
+
+          for (const key in rowObj) {
+            if (Object.hasOwnProperty.call(rowObj, key)) {
 
+              rowObj[key] = '';
+
+            }
+          }
+          console.log(rowObj, '物料类别增行rowObj');
+          this.materialType.value.push(rowObj);
+
+          break;
         // 删行
         case 'del':
-          console.log('物料类别删行');
+          console.log('物料类别删行', _this.materialType.checkedList);
+          if (_this.materialType.checkedList.length) {
+            _this.materialType.checkedList.map(c => {
+              _this.materialType.value = _this.materialType.value.filter(m => m.id != c.id)
+            })
+          } else {
+            this.$message({
+              message: '请选择需要删除的信息！',
+              type: 'warning'
+            });
+          }
           break;
-
-        // 保存
-        case 'save':
-          console.log('物料类别保存', this.materialType.value);
+        // 取消
+        case 'cancal':
+          this.materialType.isEdit = false;
+          this.handleMaterialTypeRow();
+          break;
+        // 保存、修改
+        case 'edit':
+          if (_this.materialType.isEdit) {
+            // 编辑状态
+            let nullList = _this.materialType.value.filter(m => (!m.drugId || m.drugId == ''));
+            console.log(nullList, 'nullList');
+            if (!nullList.length) {
+              console.log('物料类别保存', _this.materialType.value);
+              let params = {
+                materialId: _this.materialId,
+                medcineItems: _this.materialType.value
+              }
+              materialApi.medcineitemBatchSave(params).then(res => {
+                console.log(res, '保存物料类型');
+                if (res.code == 200) {
+                  _this, materialType.isEdit = false;
+                  _this.handleMaterialTypeRow();
+                }
+              })
+              // 保存
+            } else {
+              this.$message({
+                message: '存在数据为空！',
+                type: 'warning'
+              });
+            }
+          } else {
+            // 非编辑状态
+            console.log('物料类别修改');
+            this.materialType.isEdit = true;
+          }
           break;
         // 刷新
         default:
           console.log('物料类别刷新');
+          if (this.materialType.isEdit) {
+            this.$message({
+              message: '请先保存数据！',
+              type: 'warning'
+            })
+          } else {
+            this.materialType.loading = true;
+            this.getTagList('material_medcine_item', (form) => {
+              this.materialType.form = form;
+              this.getMedcineitemList(this.materialId);
+            });
+          }
           break;
 
       }
     },
+    // 物料类别弹窗关闭前
+    handleCloseTypeDetails(done) {
+
+      console.log('物料类别弹窗关闭前');
+      this.materialType.isEdit ? this.$message({
+        message: '请先保存数据！',
+        type: 'warning'
+      }) : done();
+
+    },
     // 保存修改并新增
     handleSaveAdd() {
       console.log('保存修改并新增');
@@ -1452,23 +1561,32 @@ export default {
     },
 
 
-    // 取消之后重新查询页面
-    handleRest() {
+    // 重新加载
+    async handleRest() {
+      this.loading = true;
       // 基本信息
-      this.getTagList('material', (form) => {
+      await this.getTagList('material', (form) => {
         this.basicData.form = form;
         this.getMaterialDetails(this.materialId, 'material');
       })
       // 医疗行业
-      this.getTagList('material_medcine', (form) => {
+      await this.getTagList('material_medcine', (form) => {
         this.medcineData.form = form;
         this.getMedcineDetails(this.materialId, 'material_medcine');
       })
     },
   },
   created() {
+
     // 基本信息
     this.handleRest();
+    if (window.name === '') {
+      console.log('页面首次被加载')
+      this.$route.query.isEdit && this.handleBasicEdit();
+    } else {
+      console.log('页面被刷新')
+    }
+
   },
 
 }
@@ -1537,9 +1655,9 @@ export default {
       overflow-x: hidden;
     }
 
-    .el-dialog__header {
-      background-color: rgb(244, 244, 244);
-    }
+    // .el-dialog__header {
+    //   background-color: rgb(244, 244, 244);
+    // }
   }
 
   .el-dialog__header {
@@ -1638,6 +1756,7 @@ export default {
 .od-msg>>>.el-form-item__content {
   width: 60%;
   box-sizing: border-box;
+  height: 36px;
 }
 
 .od-msg>>>.el-checkbox__label {

src/views/material/basicFile/index.vue

@@ -28,7 +28,7 @@
             </el-dropdown-menu>
           </el-dropdown>
 
-          <el-button size="small" @click="handleQuery">查询</el-button>
+          <!-- <el-button size="small" @click="handleQuery">查询</el-button> -->
           <el-button size="small" @click="handleRefresh">刷新</el-button>
 
         </el-button-group>
@@ -58,14 +58,24 @@
       <el-col :span="1.5">
         <el-button-group>
           <el-button size="small" @click="handleImport">批量导入</el-button>
-          <el-button size="small" @click="handleExport">批量导出</el-button>
+          <el-button size="small" @click="handleExport" v-hasPermi="['system:material:export']">批量导出</el-button>
         </el-button-group>
       </el-col>
 
     </el-row>
 
+    <!-- 查询框 -->
+    <el-form :inline="true" :model="queryForm" class="mb-query">
+      <el-form-item label="物料名称">
+        <el-input size="small" v-model="queryForm.name" placeholder="物料名称"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button size="small" type="primary" @click="handleQuery">查询</el-button>
+      </el-form-item>
+    </el-form>
 
-    <el-dialog title="操作提示" :visible.sync="optionDialog.show" width="30%" center top="50vh">
+
+    <el-dialog title="操作提示" :visible.sync="optionDialog.show" width="30%" center>
       <span>是否确认{{ optionDialog.op }}？</span>
       <span slot="footer" class="dialog-footer">
         <el-button @click="handleOptionShow('option', false)">取 消</el-button>
@@ -73,19 +83,38 @@
       </span>
     </el-dialog>
 
-    <el-card class="material-list">
-      <el-table v-loading="loading" :data="taskList" @cell-dblclick="handledbClick"
-        @selection-change="handleSelectionChange">
+    <el-card class="material-list" v-loading="loading">
+      <el-table :data="taskList" @cell-dblclick="handledbClick" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" />
         <el-table-column type="index" label="序号" width="55" align="center" />
         <el-table-column v-for="h in  tableHeader" v-if="h.show" :label="h.name" align="center" :prop="h.prop"
           show-overflow-tooltip />
       </el-table>
 
-      <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-        @pagination="getMaterialList" />
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+        :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper" :total="total">
+      </el-pagination>
     </el-card>
 
+    <!-- 导入弹窗 -->
+    <el-dialog title="批量导入" :visible.sync="importData.show" width="50%" center @before-close="handlefileDialogColse">
+      <div class="mb-import">
+
+        <el-upload class="upload-demo" accept=".xls, .xlsx" ref="upload" action="#" :on-remove="handleFileRemove"
+          :file-list="importData.list" :auto-upload="false" :on-change="handleChangeFile" :limit="1">
+          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+          <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="handleSubmitUpload">上传到服务器</el-button> -->
+          <div slot="tip" class="el-upload__tip">只能上传Excel文件</div>
+        </el-upload>
+
+      </div>
+      <span slot="footer">
+        <el-button @click="handleImportData('cancal')">取 消</el-button>
+        <el-button type="primary" @click="handleImportData('confirm')">确 定</el-button>
+      </span>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -99,9 +128,17 @@ export default {
     return {
       // 物料基本信息数据
       taskList: [],
+      // 查询表单字段
+      queryForm: {
+        name: '',
+      },
       // 总条数
       total: 1,
       loading: false,
+      importData: {
+        show: false,
+        list: []
+      },
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -124,6 +161,16 @@ export default {
   },
 
   methods: {
+    // 改变分页大小
+    handleSizeChange(e) {
+      this.queryParams.pageSize = e;
+      this.getMaterialList('material');
+    },
+    // 改变当前页
+    handleCurrentChange(e) {
+      this.queryParams.pageNum = e;
+      this.getMaterialList('material');
+    },
     // 新增
     handleInster() {
       this.$message({
@@ -135,7 +182,12 @@ export default {
     handleEdit() {
       console.log(this.checkedList, 'this.checkedList');
       if (this.checkedList.length == 1) {
-        this.$router.push(`/material/basicFile/detail/${this.checkedList[0].id}`);
+        this.$router.push({
+          path: `/material/basicFile/detail/${this.checkedList[0].id}`,
+          query: {
+            isEdit: true
+          }
+        });
       } else if (this.checkedList.length > 1) {
         this.$message({
           message: '修改只能选择单个数据！',
@@ -150,7 +202,20 @@ export default {
     },
     // 删除
     handleDel() {
-      console.log('删除');
+      console.log('删除', this.checkedList);
+      // delMaterial
+      if (this.checkedList.length) {
+        let ids = this.checkedList.map(i => i.id);
+        materialApi.delMaterial(ids ).then(res => {
+          if (res.code == 200) this.handleRefresh();
+        })
+      } else {
+        this.$message({
+          message: '请选择需要删除的数据！',
+          type: 'warning'
+        });
+      }
+
     },
     // 复制
     handleCopy() {
@@ -159,10 +224,16 @@ export default {
     //查询 
     handleQuery() {
 
+      console.log('查询');
+      this.getMaterialList('material', this.queryForm);
     },
     // 刷新
     handleRefresh() {
       console.log('刷新');
+      this.getMaterialList('material');
+      for (const key in this.queryForm) {
+        this.queryForm[key] = '';
+      }
     },
     // 过滤
     handleFilter(e) {
@@ -187,29 +258,64 @@ export default {
     // 批量导入
     handleImport() {
       console.log('批量导入');
+      this.importData.show = true
     },
-    // 批量导出
-    handleExport() {
-      console.log('批量导出');
+    // 导入弹窗关闭前
+    handlefileDialogColse(done) {
+      this.importData.list = [];
+      done();
     },
-
-    // 取消保存
-    handleCancel() {
-      console.log('取消保存');
-      this.optionDialog.op = '取消';
-      this.handleOptionShow('option', true);
+    // 导入弹窗操作
+    handleImportData(type) {
+      console.log('导入弹窗操作');
+      switch (type) {
+        // 取消
+        case 'cancal':
+          this.importData.list = [];
+          this.importData.show = false;
+          break;
+        // 确认
+        case 'confirm':
+          console.log(this.importData.list, 'this.fileList');
+          if (this.importData.list.length) {
+
+            let formData = new FormData();
+
+            formData.append('file', this.importData.list[0].raw);
+            materialApi.fileImport(formData).then(res => {
+              if (res.code == 200) this.importData.show = false;
+            })
+          } else {
+            this.$message({
+              message: '请上传文件之后在确认！',
+              type: 'warning'
+            });
+          }
+          break;
+      }
     },
-    // 保存修改
-    handleSave() {
-      console.log('保存修改');
+
+    // 删除文件
+    handleFileRemove(file, fileList) {
+      console.log('删除文件', file, 'file', fileList, 'fileList');
+      this.importData.list = fileList;
     },
-    // 保存修改并新增
-    handleSaveAdd() {
-      console.log('保存修改并新增');
+    // 文件发生改变
+    handleChangeFile(file, fileList) {
+      this.importData.list = fileList;
+      console.log(this.importData.list, '文件发生改变');
     },
-    // 更新导入
-    handleUpdateImport() {
-      console.log('更新导入');
+    // 批量导出
+    handleExport() {
+      console.log('批量导出', this.checkedList);
+
+      let ids = this.checkedList.length ? this.checkedList.map(i => i.id) : [];
+
+      let params = {
+        // orgId: '1',
+        ids,
+      }
+      this.download('/system/material/export', params, `物料基本信息${new Date().getTime()}.xlsx`)
     },
 
 
@@ -245,10 +351,19 @@ export default {
       this.$emit('headerOption', JSON.stringify({ checkedList: [...list] }))
     },
     // 获取物料列表信息
-    getMaterialList(templateCode) {
+    getMaterialList(templateCode, query) {
       let _this = this;
       this.loading = true;
-      materialApi.materialList({ templateCode }).then((res) => {
+      let page = {
+        pageNum: this.queryParams.pageNum,
+        pageSize: this.queryParams.pageSize,
+      }
+
+      let param = {
+        templateCode,
+        ...query
+      }
+      materialApi.materialList(param, page).then((res) => {
         _this.loading = false;
         console.log(res, '获取物料列表信息以及表头字段');
         let { code, data } = res;
@@ -286,17 +401,18 @@ export default {
 
 <style lang="scss">
 .material-list {
-  height: calc(100% - 42px);
+  height: calc(100% - 100px);
+
 
   .el-card__body {
     height: 100%;
     box-sizing: border-box;
 
     .el-table {
-      height: calc(100% - 70px);
+      height: calc(100% - 35px);
 
       .el-table__body-wrapper {
-        height: calc(100% - 137px);
+        height: calc(100% - 150px);
         overflow-y: auto;
         overflow-x: auto;
         // .el-table__body {
@@ -305,5 +421,28 @@ export default {
       }
     }
   }
+
+  .el-pagination {
+    margin-top: 8px;
+    text-align: right;
+  }
+}
+
+.mb-import {
+  text-align: center;
+}
+</style>
+<style scoped>
+.el-dialog__header {
+  background-color: rgb(244, 244, 244);
+}
+
+.mb-query>>>.el-form-item__label {
+  font-weight: normal;
+  font-size: 12px;
+}
+
+.mb-query>>>.el-tabs__content {
+  padding-bottom: 8px;
 }
 </style>

src/views/material/tools/attachment-file.js

@@ -0,0 +1,87 @@
+// 附件处理——格式
+const judgeFileFormat = (fileType) => {
+
+  console.log(fileType, 'fileType');
+
+  let fileFormat = '';
+
+  switch (fileType) {
+
+    case 'txt':
+
+      return fileFormat = 'text/plain';
+
+    case 'docx':
+
+      // return fileFormat = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+      return fileFormat = 'application/msword';
+    // return fileFormat = 'application/x-msdownload';
+
+    case 'doc':
+
+      return fileFormat = 'application/msword';
+
+    case 'xlsx':
+
+      return fileFormat = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+
+    case 'xls':
+
+      return fileFormat = 'application/vnd.ms-excel';
+
+    case 'pptx':
+
+      return fileFormat = 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
+
+    case 'ppt':
+
+      return fileFormat = 'application/vnd.ms-powerpoint';
+
+    case 'pdf':
+
+      return fileFormat = 'application/pdf';
+
+    case 'zip':
+
+      return fileFormat = 'application/zip';
+
+    case 'rar':
+
+      return fileFormat = 'application/x-rar-compressed';
+
+    case 'jpg':
+
+      return fileFormat = 'image/jpeg';
+
+    case 'jpeg':
+
+      return fileFormat = 'image/jpeg';
+
+    case 'png':
+
+      return fileFormat = 'image/png';
+
+    case 'gif':
+
+      return fileFormat = 'image/gif';
+
+    case 'bmp':
+
+      return fileFormat = 'image/bmp';
+
+    case 'mp3':
+
+      return fileFormat = 'audio/mpeg';
+
+    case 'mp4':
+
+      return fileFormat = 'video/mp4';
+
+    case 'avi':
+
+      return fileFormat = 'video/x-msvideo';
+  }
+
+}
+
+export default judgeFileFormat;