保密发料单升降序

src/views/mes/pro/secretSend/index.vue

@@ -78,16 +78,55 @@
         <el-table v-loading="loading" :data="informationList" :summary-method="getSummaries" show-summary @selection-change="handleSelectionChange" :max-height="maxHeight">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="组合单号" align="center" prop="combinationCode" />
-        <el-table-column label="生产工单" align="center" prop="workorderCode" />
-        <el-table-column label="状态" align="center" prop="status">
+        <el-table-column align="center" prop="workorderCode" width="180">
+            <template slot="header" slot-scope="scope">
+            <div class="t-cell">
+                生产工单
+                <span class="t-caret-warpper">
+                <i class="t-sort-caret ascend" :class="[ascOrderKeyList.includes('workorderCode') ? 'ascending' : '' ]" @click="handleSortChange('workorderCode', 'asc')"></i>
+                <i class="t-sort-caret descend" :class="[descOrderKeyList.includes('workorderCode') ? 'descending' : '' ]" @click="handleSortChange('workorderCode', 'desc')"></i>
+                </span>
+            </div>
+            </template>
+        </el-table-column>
+        <el-table-column align="center" prop="status" width="100">
             <template slot-scope="scope">
             <dict-tag :options="dict.type.se_issue_table_status" :value="scope.row.status"/>
             </template>
+            <template slot="header" slot-scope="scope">
+            <div class="t-cell">
+                状态
+                <span class="t-caret-warpper">
+                <i class="t-sort-caret ascend" :class="[ascOrderKeyList.includes('status') ? 'ascending' : '' ]" @click="handleSortChange('status', 'asc')"></i>
+                <i class="t-sort-caret descend" :class="[descOrderKeyList.includes('status') ? 'descending' : '' ]" @click="handleSortChange('status', 'desc')"></i>
+                </span>
+            </div>
+            </template>
+        </el-table-column>
+        <el-table-column align="center" prop="sapItemCode" width="180">
+            <template slot="header" slot-scope="scope">
+            <div class="t-cell">
+                物料编码
+                <span class="t-caret-warpper">
+                <i class="t-sort-caret ascend" :class="[ascOrderKeyList.includes('sapItemCode') ? 'ascending' : '' ]" @click="handleSortChange('sapItemCode', 'asc')"></i>
+                <i class="t-sort-caret descend" :class="[descOrderKeyList.includes('sapItemCode') ? 'descending' : '' ]" @click="handleSortChange('sapItemCode', 'desc')"></i>
+                </span>
+            </div>
+            </template>
         </el-table-column>
-        <el-table-column label="物料编码" align="center" prop="sapItemCode" />
         <el-table-column label="物料名称" align="center" prop="itemName" min-width="200"/>
         <el-table-column label="数量" align="center" prop="quantity" />
-        <el-table-column label="工艺编码" align="center" prop="seRouteCode" />
+        <el-table-column align="center" prop="seRouteCode" width="180">
+            <template slot="header" slot-scope="scope">
+            <div class="t-cell">
+                工艺编码
+                <span class="t-caret-warpper">
+                <i class="t-sort-caret ascend" :class="[ascOrderKeyList.includes('seRouteCode') ? 'ascending' : '' ]" @click="handleSortChange('seRouteCode', 'asc')"></i>
+                <i class="t-sort-caret descend" :class="[descOrderKeyList.includes('seRouteCode') ? 'descending' : '' ]" @click="handleSortChange('seRouteCode', 'desc')"></i>
+                </span>
+            </div>
+            </template>
+        </el-table-column>
         <el-table-column label="工艺描述" align="center" prop="seRouteDesc" />
         <el-table-column label="油墨重量（KG）" align="center" prop="printinginkCoefficient">
           <template slot-scope="scope">
@@ -99,10 +138,19 @@
             <span>{{ scope.row.particleCoefficient ? (scope.row.quantity * scope.row.particleCoefficient > 0 ? (scope.row.quantity * scope.row.particleCoefficient).toFixed(3) : 0) : 0 }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="需求日期" align="center" prop="requestDate" width="180">
+        <el-table-column align="center" prop="requestDate" width="180">
           <template slot-scope="scope">
             <span>{{ parseTime(scope.row.requestDate, "{y}-{m}-{d}") }}</span>
           </template>
+          <template slot="header" slot-scope="scope">
+            <div class="t-cell">
+                需求日期
+                <span class="t-caret-warpper">
+                <i class="t-sort-caret ascend" :class="[ascOrderKeyList.includes('requestDate') ? 'ascending' : '' ]" @click="handleSortChange('requestDate', 'asc')"></i>
+                <i class="t-sort-caret descend" :class="[descOrderKeyList.includes('requestDate') ? 'descending' : '' ]" @click="handleSortChange('requestDate', 'desc')"></i>
+                </span>
+            </div>
+            </template>
         </el-table-column>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="120">
             <template slot-scope="scope">
@@ -240,6 +288,8 @@ export default {
         },
         // 表单参数
         form: {},
+        ascOrderKeyList: [],
+        descOrderKeyList: [],
         // 表单校验
         rules: {
                 taskCode: [
@@ -258,6 +308,23 @@ export default {
         this.getList();
     },
     methods: {
+        handleSortChange(code, type) {
+            const ascIndex = this.ascOrderKeyList.indexOf(code);
+            const descIndex = this.descOrderKeyList.indexOf(code);
+            if(ascIndex != -1) {
+                this.ascOrderKeyList.splice(ascIndex, 1);
+            }
+            if(type == "asc" && ascIndex == -1) {
+                this.ascOrderKeyList.push(code);
+            }
+            if(descIndex != -1) {
+                this.descOrderKeyList.splice(descIndex, 1);
+            }
+            if(type == "desc" && descIndex == -1) {
+                this.descOrderKeyList.push(code);
+            }
+            this.getList();
+        },
         submitForm() {
             this.$refs["form"].validate(valid => {
                 if (valid) {
@@ -281,6 +348,8 @@ export default {
             this.loading = true;
             const params = {
                 ...this.queryParams,
+                ascOrderKeyList: this.ascOrderKeyList,
+                descOrderKeyList: this.descOrderKeyList,
                 itemNameList: this.queryParams.itemNameList ? this.queryParams.itemNameList.split(/[\n,;，、；。]/).filter(item => item) : null,
                 sapItemCodeList: this.queryParams.sapItemCodeList ? this.queryParams.sapItemCodeList.split(/[\n,;，、；。]/).filter(item => item) : null
             }
@@ -469,3 +538,46 @@ export default {
     }
 }
 </script>
+<style lang="scss" scoped>
+.t-cell {
+  display: inline-block;
+  box-sizing: border-box;
+  position: relative;
+  vertical-align: middle;
+  padding-left: 10px;
+  padding-right: 10px;
+  width: 100%;
+  .t-caret-warpper {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    height: 34px;
+    width: 24px;
+    vertical-align: middle;
+    cursor: pointer;
+    overflow: initial;
+    position: relative;
+    .t-sort-caret {
+      width: 0;
+      height: 0;
+      border: 5px solid transparent;
+      position: absolute;
+      left: 7px;
+    }
+    .ascend {
+      border-bottom-color: #c0c4cc;
+      top: 5px;
+    }
+    .ascending {
+      border-bottom-color: #409eff;
+    }
+    .descend {
+      border-top-color: #c0c4cc;
+      bottom: 7px;
+    }
+    .descending {
+      border-top-color: #409eff;
+    }
+  }
+}
+</style>
\ No newline at end of file