零部件编号申请模块开发完毕

src/pages/regulatoryRepository/partCodeApply/index.vue

@@ -3,87 +3,287 @@
   <div class="partCodeApply" id="partCodeApply">
     <!--搜索区域-->
     <div class="search-area">
-      <div class="content-top">
-        <el-form inline class="label-input-form">
-          <el-form-item label="子组号" class="search-item">
-            <el-input placeholder="根据子组号查询" clearable :maxlength="100">
+      <el-form inline class="label-input-form" v-model="searchFormData">
+        <el-form-item label="子组号" class="search-item">
+          <el-input placeholder="根据子组号查询" clearable :maxlength="100" v-model="searchFormData.subgroupNumber">
 
-            </el-input>
-          </el-form-item>
-          <el-form-item label="分组号" class="search-item">
-            <el-input placeholder="根据分组号查询" clearable :maxlength="100">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="分组代号" class="search-item">
+          <el-input placeholder="根据分组代号查询" clearable :maxlength="100" v-model="searchFormData.groupCode">
 
-            </el-input>
-          </el-form-item>
-          <el-form-item label="零件分类号" class="search-item">
-            <el-input placeholder="根据零件分类号查询" clearable :maxlength="100">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="零件分类号" class="search-item">
+          <el-input placeholder="根据零件分类代号查询" clearable :maxlength="100" v-model="searchFormData.partCategoryCode">
 
-            </el-input>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" size="mini" class="common-button-primary">
-              查询
-            </el-button>
-          </el-form-item>
-          <el-form-item>
-            <el-button size="mini" class="common-button-default">
-              清空
-            </el-button>
-          </el-form-item>
-        </el-form>
-      </div>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="mini" v-btn-permission="'02424c2bc370ee846aa5a6d60c49a6a5'"
+                     class="common-button-primary" @click="getTableByPage('')">
+            查询
+          </el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button size="mini" v-btn-permission="'c5b873fcb659afb230db133e7e4706c8'" class="common-button-default"
+                     @click="clearAllSearch">
+            清空
+          </el-button>
+        </el-form-item>
+      </el-form>
     </div>
     <!--操作区域-->
     <div class="operation_area">
-      <div class="content-center">
-        <el-button type="primary" size="mini" class="common-button-primary">
-          <i class="iconfont">&#xe6e9;</i>
-          导出
-        </el-button>
-        <el-button type="primary" size="mini" class="common-button-primary">
-          <i class="iconfont">&#xe611;</i>
-          删除
-        </el-button>
-      </div>
+      <el-button type="primary" size="mini" class="common-button-primary" @click="exportPartInfo()"
+                 v-btn-permission="'2b196e3179b073436deb9c64251ddb3d'" title="不勾选时默认导出所有筛选项；勾选时仅导出勾选项">
+        <i class="iconfont">&#xe6e9;</i>
+        导出
+      </el-button>
+      <el-button type="primary" size="mini" v-btn-permission="'9caea8a46be62a0ae0600de35bad6539'"
+                 class="common-button-primary" @click="deletePartCode('demore',null)">
+        <i class="iconfont">&#xe611;</i>
+        删除
+      </el-button>
     </div>
     <!--表格区域-->
     <div class="table_area">
       <div class="container">
-        <loading :loading="loading"></loading>
+        <loading :loading="loading">数据获取中...</loading>
         <!--表头-->
         <div class="table-wrap">
-          <div class="inner-wrap">
-            <el-table>
-              <el-table-column type="selection" align="center"></el-table-column>
-              <el-table-column label="序号"></el-table-column>
-              <el-table-column label="子组号"></el-table-column>
-              <el-table-column label="子组结构号"></el-table-column>
-              <el-table-column label="子组结构名称"></el-table-column>
-              <el-table-column label="分组代号"></el-table-column>
-              <el-table-column label="零部件分类名称"></el-table-column>
-              <el-table-column label="零部件分类代号"></el-table-column>
-              <el-table-column label="备注"></el-table-column>
-              <el-table-column label="操作"></el-table-column>
-            </el-table>
-          </div>
+          <el-table
+              :data="partCodeList"
+              tooltip-effect="dark"
+              height="100%"
+              border
+              style="width: 99%"
+              class="table"
+              v-loading="tableLoading.loadData"
+              :header-cell-style="{background: '#e8e8e8', color: '#333333', fontSize: '16px',
+         fontWeight: 'bold', height: '48px'}"
+              @selection-change="selectOne"
+              ref="selection">
+            <el-table-column type="selection" align="center"></el-table-column>
+            <el-table-column label="子组号" prop="subgroupNumber" align="center"></el-table-column>
+            <el-table-column label="子组结构号" prop="subgroupStructureNumber" align="center"></el-table-column>
+            <el-table-column label="子组结构名称" prop="subgroupStructureName" align="center"></el-table-column>
+            <el-table-column label="分组代号" prop="groupCode" align="center"></el-table-column>
+            <el-table-column label="零部件分类名称" prop="partCategoryName" align="center"></el-table-column>
+            <el-table-column label="零部件分类代号" prop="partCategoryCode" align="center"></el-table-column>
+            <el-table-column label="备注" prop="remarks" align="center"></el-table-column>
+          </el-table>
         </div>
         <!--表头-->
       </div>
     </div>
+    <!--分页区域-->
+    <div class="page_area">
+      <pagination :page="pageNo" :total="total" @pageChange="pageChange"
+                  @pageSizeChange="pageSizeChange"></pagination>
+    </div>
+    <!--导出模态框区域-->
+    <el-dialog :visible.sync="exportModelFlag" title="导出文件" width="300px">
+      <el-form :inline="true" class="label-input-form search-area">
+        <el-form-item label="导出名称" class="search-item">
+          <el-input v-model="exportName" placeholder="请输入导出文件名称" :maxlength="30" clearable label="导出名称"/>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="demo-drawer-footer">
+          <el-button size="mini" class="common-button-default" icon="el-icon-close" @click="cancal">取消</el-button>
+          <el-button type="primary" size="mini" class="common-button-primary" icon="el-icon-check"
+                     @click="exportTestItem">提交</el-button>
+        </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import {interfaceUrl} from "@/sysConfig";
+
 export default {
   name: "partCodeApply",
   data() {
     return {
-      loading: false
+      //零部件编号表格数据
+      partCodeList: [],
+      //当前页数
+      pageNo: 1,
+      //总数
+      total: 1,
+      //搜索区域输入框的数据
+      searchFormData: {
+        //子组号
+        subgroupNumber: "",
+        //分组代号
+        groupCode: "",
+        //零件分类号
+        partCategoryCode: ""
+      },
+      loading: false,
+      tableLoading: {
+        loadData: false
+      },
+      selectedList: [],//标准选中的数据
+      saveExportType: '',// 导出文件模态框控制，和文件名称
+      exportName: '',//导出文件的名称输入值
+      exportModelFlag: false, //导出模态窗
     }
+  },
+  mounted() {
+    this.getTableByPage();
+  },
+  methods: {
+    //导出
+    exportPartInfo() {
+      if (this.selectedList.length > 0) {
+        this.saveExportType = 'apart'
+      } else {
+        this.saveExportType = 'all'
+      }
+      this.exportName = ''
+      this.exportModelFlag = true
+      console.log(this.saveExportType);
+    },
+    //取消导出
+    cancal() {
+      this.exportModelFlag = false
+    },
+    //确认导出
+    exportTestItem() {
+      if (this.saveExportType === 'apart') {
+        if (this.selectedList != null && this.selectedList != '') {
+          console.log(this.selectedList);
+          const exportURL = interfaceUrl + 'sarStandPartCodeApply/exportPartInfoExcel?' +
+              'exportType' + this.saveExportType + '&ids=' + this.selectedList.join(',') + '&exportName=' + this.exportName
+          window.open(exportURL)
+          this.$message.success('导出信息成功')
+        }
+      } else if (this.saveExportType === 'all') {
+        console.log(this.selectedList);
+        const exportURL = interfaceUrl + 'sarStandPartCodeApply/exportPartInfoExcel?' +
+            'exportType' + this.saveExportType + '&ids=' + this.selectedList.join(',') + '&exportName=' + this.exportName
+        window.open(exportURL)
+        this.$message.success('导出信息成功')
+      }
+      this.exportModelFlag = false
+      this.selectedList = []
+    },
+    // 表格选择框
+    selectOne(data) {
+      this.selectedList = [];
+      for (let i = 0; i < data.length; i++) {
+        this.selectedList.push(data[i].id);
+      }
+    },
+    // 批量删除
+    deletePartCode(flag, id) {
+      if (flag === 'delOne') {
+        this.selectedList = [];
+        this.selectedList[0] = id;
+      }
+      if (this.selectedList.length === 0) {
+        this.$message.warning('请选择要删除的数据')
+      } else {
+        this.$confirm('确定删除这些数据？', '提示', {
+          confirmButtonText: '确定',
+          confirmButtonClass: 'common-button-primary',
+          cancelButtonText: '取消',
+          type: 'warning',
+        }).then(() => {
+          const URL = `sarStandPartCodeApply/deleteListAll?idList=${this.selectedList.join(',')}`
+          this.$http.postDelete(URL, {}, res => {
+            this.getTableByPage();
+            this.selectedList = [];
+            this.$message.success('删除成功')
+          }, e => {
+          });
+        }).catch(() => {
+
+        })
+      }
+    },
+    // 查询零部件table列表
+    getTableByPage() {
+      this.tableLoading.loadData = true
+      //后端的controller接口
+      this.$http.get('sarStandPartCodeApply', {
+        ...this.searchFormData,
+        current: this.pageNo,
+        size: this.$store.getters.userInfo.configContent
+      }, {
+        _this: this
+      }, res => {
+        this.tableLoading.loadData = false
+        this.total = res.data.total
+        this.partCodeList = res.data.records
+      }, e => {
+        this.tableLoading.loadData = false
+      })
+    },
+    // 清空 查询条件
+    clearAllSearch() {
+      this.searchFormData = {
+        //子组号
+        subgroupNumber: "",
+        //分组代号
+        groupCode: "",
+        //零件分类号
+        partCategoryCode: ""
+      }
+      this.getTableByPage()
+    },
+    // 分页事件
+    pageChange(page) {
+      this.pageNo = page
+      this.getTableByPage()
+    },
+    pageSizeChange(pageSize) {
+      console.log(pageSize);
+      this.getTableByPage()
+    },
   }
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
+#partCodeApply {
+  height: 100%;
+  background-color: #ffffff;
+  padding-left: 10px;
 
+  .search-area {
+    /deep/ .el-input__inner {
+      width: 185px;
+    }
+  }
+
+  .table_area {
+    display: flex;
+    height: calc(100% - 115px);
+
+    .container {
+      flex: 1;
+      height: 100%;
+
+      .table-wrap {
+        flex: 1;
+        height: 100%;
+      }
+    }
+  }
+
+
+  .operation_area {
+    padding: 4px 0 14px 10px;
+  }
+
+  .page_area {
+    // /deep/只在当前页面修改elementui的默认样式
+    /deep/ .pagination-slot {
+      padding-left: 40px;
+    }
+  }
+
+}
 </style>