预测版本增加导出功能

src/views/plan/workbench/predictVersion/index.vue

@@ -2,11 +2,20 @@
   <div ref="tableRef" class="table-height-wrap predict-version-wrapper">
     <SearchTemplate>
       <el-form :inline="true" class="clearfix search-content">
-        <el-form-item label="版本号">
-          <el-input v-model.trim="queryParams.versionId"
-              placeholder="请输入查询内容"
-              clearable
-              style="width: 240px" />
+        <el-form-item label="版本号" style="margin-bottom: 0">
+          <el-select
+            style="width: 300px"
+            v-model="queryParams.versionId"
+            filterable
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in getSpecifiedVersion"
+              :key="item['AP_CustDemandVerHead-VersionId']"
+              :label="item['AP_CustDemandVerHead-VersionId']"
+              :value="item['AP_CustDemandVerHead-VersionId']"
+            />
+          </el-select>
         </el-form-item>
         <el-form-item label="客户">
           <el-select
@@ -19,10 +28,12 @@
             :loading="customerLoading"
             @visible-change="setCustomerList"
           >
-            <el-option v-for="item in customerArray"
-                :key="item['Customer-CustomerId']"
-                :label="item['Customer-Name1']"
-                :value="item['Customer-CustomerId']" />
+            <el-option
+              v-for="item in customerArray"
+              :key="item['Customer-CustomerId']"
+              :label="item['Customer-Name1']"
+              :value="item['Customer-CustomerId']"
+            />
           </el-select>
         </el-form-item>
         <el-form-item label="物料">
@@ -32,63 +43,128 @@
             filterable
             :loading="artIdLoading"
             @visible-change="setArtList"
-            placeholder="请选择">
-            <el-option v-for="item in artList"
-                  :key="item['Article-ArtId']"
-                  :label="item['Article-ArtId'] + '-' + item['Article-Descr1']"
-                  :value="item['Article-ArtId']" />
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in artList"
+              :key="item['Article-ArtId']"
+              :label="item['Article-ArtId'] + '-' + item['Article-Descr1']"
+              :value="item['Article-ArtId']"
+            />
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button icon="el-icon-search"
-              size="mini"
-              :disabled="!queryParams.versionId"
-              class="search-button-style"
-              @click="handleQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh"
-              size="mini"
-              class="reset-button-style"
-              @click="resetQuery">重置</el-button>
+          <el-button
+            icon="el-icon-search"
+            size="mini"
+            :disabled="!queryParams.versionId"
+            class="search-button-style"
+            @click="handleQuery"
+            >搜索</el-button
+          >
+          <el-button
+            icon="el-icon-refresh"
+            size="mini"
+            class="reset-button-style"
+            @click="resetQuery"
+            >重置</el-button
+          >
+          <el-button
+            icon="el-icon-download"
+            class="add-button-style"
+            @click="handleExport"
+            style="margin-left: 24px"
+            >导出</el-button
+          >
         </el-form-item>
       </el-form>
     </SearchTemplate>
     <ContentContainer>
       <el-table
         v-if="tableHeight"
-				:height="tableHeight"
+        :height="tableHeight"
         :data="tableData1"
         v-loading="loading"
         size="mini"
-        @header-dragend="(newWidth, oldWidth, column)=>saveRowWidth(column, newWidth)"
+        @header-dragend="
+          (newWidth, oldWidth, column) => saveRowWidth(column, newWidth)
+        "
         border
       >
-        <el-table-column :label="getColumnName('AP_CustArtlst-ArtId')" align="center">
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('AP_CustArtlst-ArtId')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["AP_CustArtlst-ArtId"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('AP_CustArtlst-Descr1')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["AP_CustArtlst-Descr1"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('Customer-CustomerId')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["Customer-CustomerId"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('AP_CustArtlst-CustArtId')"
+          align="center"
+        >
           <template #default="scope">
-            {{scope.row['AP_CustArtlst-ArtId']}}
+            {{ scope.row["AP_CustArtlst-CustArtId"] }}
           </template>
         </el-table-column>
-        <el-table-column :label="getColumnName('AP_CustArtlst-Descr1')" align="center">
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('Customer-FcustId')"
+          align="center"
+        >
           <template #default="scope">
-            {{scope.row['AP_CustArtlst-Descr1']}}
+            {{ scope.row["Customer-FcustId"] }}
           </template>
         </el-table-column>
-        <el-table-column :label="getColumnName('Customer-CustomerId')" align="center">
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('Customer-Name1')"
+          align="center"
+        >
           <template #default="scope">
-            {{scope.row['Customer-CustomerId']}}
+            {{ scope.row["Customer-Name1"] }}
           </template>
         </el-table-column>
-        <el-table-column :label="getColumnName('Customer-FcustId')" align="center">
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('AP_CustArtlst-LastUser')"
+          align="center"
+        >
           <template #default="scope">
-            {{scope.row['Customer-FcustId']}}
+            {{ scope.row["AP_CustArtlst-LastUser"] }}
           </template>
         </el-table-column>
-        <el-table-column :label="getColumnName('Customer-Name1')" align="center">
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('User-Name')"
+          align="center"
+        >
           <template #default="scope">
-            {{scope.row['Customer-Name1']}}
+            {{ scope.row["User-Name"] }}
           </template>
         </el-table-column>
-        <el-table-column  
-          v-for="(item) in headers"
+        <el-table-column
+          v-for="item in headers"
           :key="item"
           :width="getRowWidth(item)"
           :label="getColumnName(item)"
@@ -100,110 +176,142 @@
         </el-table-column>
       </el-table>
       <!-- 分页 -->
-      <Pagination 
+      <Pagination
         v-show="pagination.total > 0"
         v-model:pagination="pagination"
-        @change="getTableList" />
+        @change="getTableList"
+      />
     </ContentContainer>
   </div>
 </template>
 <script>
-  import { ListMixin } from "@/mixins/ListMixin";
-  import { get } from "@/server/api.js";
-  import { getArtIdList } from "@/server/productionPlanning/emergencyOrder";
-  export default {
-    mixins: [ListMixin],
-    data() {
-      return {
-        artList: [],
-        customerArray: [],
-        queryTableDataUrl: "/admin/ap/custdemandverhead/selectdetail",
-        headers: [], // 遍历表头
-        tableHeight: 0,
-        artIdLoading: false,
-        customerLoading: false,
-        tableData1: []
-      };
-    },
-    methods: {
-      // 查询分页列表
-      getTableList() {
-        this.loading = true;
-        for (let key in this.queryParams) {
-          if(this.queryParams[key] == ''){
-            this.queryParams[key]=undefined
-          }
+import { ListMixin } from "@/mixins/ListMixin";
+import { get } from "@/server/api.js";
+import { getArtIdList } from "@/server/productionPlanning/emergencyOrder";
+export default {
+  mixins: [ListMixin],
+  data() {
+    return {
+      artList: [],
+      customerArray: [],
+      queryTableDataUrl: "/admin/ap/custdemandverhead/selectdetail",
+      headers: [], // 遍历表头
+      tableHeight: 0,
+      artIdLoading: false,
+      customerLoading: false,
+      tableData1: [],
+      getSpecifiedVersion: [],
+    };
+  },
+  methods: {
+    // 查询分页列表
+    getTableList() {
+      this.loading = true;
+      for (let key in this.queryParams) {
+        if (this.queryParams[key] == '') {
+          this.queryParams[key] = undefined
         }
-        get(this.queryTableDataUrl, { 
-          ...this.pagination, 
-          ...this.queryParams,
-          "customerId": this.queryParams.customerId ? this.queryParams.customerId.join(",") : undefined
-        })
-          .then(({ code, data: { count = 0, records: { Data=[], Head=[]} } }) => {
-            if (code === 200) {
-              this.headers = Head || []
-              this.tableData1 = (Data || []).map(el => {
-                return {
-                  ...el.Info,
-                  ...el.Item
-                }
-              })
-              this.pagination.total = count
-              this.loading = false
-            } else {
-              this.loading = false
-            }
-          })
-          .catch(() => {
+      }
+      get(this.queryTableDataUrl, {
+        ...this.pagination,
+        ...this.queryParams,
+        "customerId": this.queryParams.customerId ? this.queryParams.customerId.join(",") : undefined
+      })
+        .then(({ code, data: { count = 0, records: { Data = [], Head = [] } } }) => {
+          if (code === 200) {
+            this.headers = Head || []
+            this.tableData1 = (Data || []).map(el => {
+              return {
+                ...el.Info,
+                ...el.Item
+              }
+            })
+            this.pagination.total = count
             this.loading = false
-          });
-      },
-      // 物料列表
-      setArtList() {
-        this.artIdLoading = true
-        getArtIdList().then(({ data = [] }) => {
-          this.artIdLoading = false
-          this.artList = data;
-        }).catch( () => {
-          this.artIdLoading = false
-        })
-      },
-      // 客户列表
-      setCustomerList() {
-        this.customerLoading = true
-        get('/admin/base/customer/customerlst').then(({ data = [] }) => {
-          this.customerLoading = false
-          this.customerArray = data
-        }).catch( () => {
-          this.customerLoading = false
+          } else {
+            this.loading = false
+          }
         })
-      },
-      // 搜索按钮操作
-      handleQuery() {
-        this.pagination.pageNumber = 1;
-        this.getTableList();
-      },
-      // 重置按钮操作
-      resetQuery() {
-        this.queryParams.customerId = [];
-        this.queryParams.versionId = '';
-        this.queryParams.artId = '';
-        this.handleQuery();
-      },
+        .catch(() => {
+          this.loading = false
+        });
+    },
+    // 物料列表
+    setArtList() {
+      this.artIdLoading = true
+      getArtIdList().then(({ data = [] }) => {
+        this.artIdLoading = false
+        this.artList = data;
+      }).catch(() => {
+        this.artIdLoading = false
+      })
+    },
+    // 客户列表
+    setCustomerList() {
+      this.customerLoading = true
+      get('/admin/base/customer/customerlst').then(({ data = [] }) => {
+        this.customerLoading = false
+        this.customerArray = data
+      }).catch(() => {
+        this.customerLoading = false
+      })
+    },
+    // 搜索按钮操作
+    handleQuery() {
+      this.pagination.pageNumber = 1;
+      this.getTableList();
+    },
+    // 重置按钮操作
+    resetQuery() {
+      this.queryParams.customerId = [];
+      this.queryParams.versionId = '';
+      this.queryParams.artId = '';
+      this.handleQuery();
+    },
+    // 根据客户查询版本
+    getVersionOfCustom() {
+      get(`/admin/ap/custdemandverhead/selectuinquelist`).then(({ code, data }) => {
+        if (code === 200) {
+          this.getSpecifiedVersion = data
+        }
+      })
     },
-    mounted() {
-      this.$nextTick(() => {
-        this.tableHeight = this.calculationTableHeight(
-          this.$refs.tableRef,
-          120
-        );
+    // 导出
+    handleExport() {
+      for (let key in this.queryParams) {
+        if (this.queryParams[key] == '') {
+          this.queryParams[key] = undefined
+        }
+      }
+      get(`/admin/ap/custdemandverhead/selectdetailExcel`, {
+        ...this.queryParams,
+        "customerId": this.queryParams.customerId ? this.queryParams.customerId.join(",") : undefined
+      }).then(res => {
+        let link = document.createElement('a');
+        link.style.display = 'none';
+        link.href = (process.env.VUE_APP_BASE_URL || "http://101.201.121.115:9003/") + res.data;
+        link.setAttribute('download', '预测版本.xlsx');
+        document.body.appendChild(link);
+        link.click();
       })
-    }
-  };
+    },
+  },
+  created() {
+    this.getVersionOfCustom()
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.tableHeight = this.calculationTableHeight(
+        this.$refs.tableRef,
+        120
+      );
+    })
+  }
+};
 </script>
 <style lang="less" scoped>
-  .predict-version-wrapper {
-    height: 100%;
-    overflow: hidden;
-  }
+.predict-version-wrapper {
+  height: 100%;
+  overflow: hidden;
+}
 </style>