列设置

src/views/reportManagement/outExcel/index.vue

@@ -1,28 +1,107 @@
 <template>
   <div class="app-container">
     <el-row>
-      <el-col>
-        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport"
-          >导出
-        </el-button>
-      </el-col>
+      <div class="tabSetting">
+        <div>
+          <el-button
+            type="warning"
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExport"
+            >导出
+          </el-button>
+        </div>
+        <div style="display:flex">
+          <right-toolbar
+            :showSearch.sync="showSearch"
+            @queryTable="getList"
+          ></right-toolbar>
+          <div style="margin: 0 12px">
+            <el-tooltip
+              class="item"
+              effect="dark"
+              content="列设置"
+              placement="top"
+            >
+              <el-button
+                icon="el-icon-setting"
+                size="mini"
+                circle
+                @click="showSetting = !showSetting"
+              ></el-button>
+            </el-tooltip>
+          </div>
+        </div>
+      </div>
     </el-row>
+    <el-dialog title="自定义列显示" :visible.sync="showSetting" width="700px">
+      <div>配置排序列数据（拖动调整顺序）</div>
+      <div style="margin-left: 17px">
+        <el-checkbox
+          v-model="allCheck"
+          label="全选"
+          @change="allChecked"
+        ></el-checkbox>
+      </div>
+      <div style="padding: 4px; display: flex; justify-content: center">
+        <draggable
+          v-model="setRowList"
+          group="site"
+          animation="300"
+          @start="onStart"
+          @end="onEnd"
+          handle=".indraggable"
+        >
+          <transition-group>
+            <div
+              v-for="item in setRowList"
+              :key="item.surface"
+              class="listStyle"
+            >
+              <div style="width: 500px" class="indraggable">
+                <div class="progress" :style="{ width: item.width + 'px' }">
+                  <el-checkbox
+                    :label="item.name"
+                    v-model="item.checked"
+                    :true-label="0"
+                    :false-label="1"
+                    >{{ item.name }}
+                  </el-checkbox>
+                </div>
+              </div>
+              <el-input-number
+                v-model.number="item.width"
+                controls-position="right"
+                :min="1"
+                :max="500"
+                size="mini"
+              ></el-input-number>
+            </div>
+          </transition-group>
+        </draggable>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showSetting = false">取 消</el-button>
+        <el-button @click="delRow" type="danger">重 置</el-button>
+        <el-button type="primary" @click="save()">确 定</el-button>
+      </span>
+    </el-dialog>
+
     <el-table v-loading="loading" :data="stockDate">
       <el-table-column type="index" label="序号" align="center" />
-      <el-table-column label="对账人" align="center" prop="userName" />
-      <el-table-column label="客户" align="center" prop="corpName"/>
-      <el-table-column label="月份" align="center" prop="feelMonth"/>
-      <el-table-column label="仓储费" align="center" prop="ccf"/>
-      <el-table-column label="出入库费" align="center" prop="fAmount"/>
-      <el-table-column label="合计人民币" align="center" prop="totalAmount"/>
-      <el-table-column label="账期" align="center" prop="accountPeriod"/>
-      <el-table-column label="协议到期日" align="center" prop="maturity"/>
-      <el-table-column label="开发票情况" align="center" prop="isInvoice"/>
-      <el-table-column label="是否超账期" align="center" prop="isAccountPeriod"/>
-      <el-table-column label="库存(吨)" align="center" prop="stock"/>
-      <el-table-column label="应收款催收结果" align="center" prop="collectionResult"/>
+      <el-table-column
+        v-for="(item, index) in getRowList"
+        :key="index"
+        :label="item.name"
+        :width="item.width"
+        :prop="item.label"
+        align="center"
+        :show-overflow-tooltip="true"
+        sortable
+        :fixed="item.fixed"
+      />
     </el-table>
-        <pagination
+    <pagination
       v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
@@ -33,7 +112,10 @@
 </template>
 
 <script>
-import { financialStatistics,feesExport } from "@/api/outExcel/outExcel";
+import { financialStatistics, feesExport } from "@/api/outExcel/outExcel";
+import { addSet, select, resetModule } from "@/api/system/set";
+import Cookies from "js-cookie";
+import draggable from "vuedraggable";
 
 export default {
   name: "Warehousebills",
@@ -48,12 +130,99 @@ export default {
         pageSize: 10,
       },
       total: 0,
-      stockDate:[]
+      stockDate: [],
+      showSearch: true,
+      showSetting: false,
+      drag: false,
+      setRowList: [],
+      getRowList: [],
+      tableDate: [
+        {
+          surface: "1",
+          label: "userName",
+          name: "对账人",
+          checked: 0,
+          width: 100,
+        },
+        {
+          surface: "2",
+          label: "corpName",
+          name: "客户",
+          checked: 0,
+          width: 120,
+        },
+        {
+          surface: "3",
+          label: "feelMonth",
+          name: "月份",
+          checked: 0,
+          width: 120,
+        },
+        {
+          surface: "4",
+          label: "ccf",
+          name: "仓储费",
+          checked: 0,
+          width: 120,
+        },
+        {
+          surface: "5",
+          label: "fAmount",
+          name: "出入库费",
+          checked: 0,
+          width: 120,
+        },
+        {
+          surface: "6",
+          label: "totalAmount",
+          name: "合计人民币",
+          checked: 0,
+          width: 120,
+        },
+        {
+          surface: "7",
+          label: "accountPeriod",
+          name: "账期",
+          checked: 0,
+          width: 120,
+        },
+        {
+          surface: "8",
+          label: "maturity",
+          name: "协议到期日",
+          checked: 0,
+          width: 120,
+        },
+        {
+          surface: "9",
+          label: "isInvoice",
+          name: "开发票情况",
+          checked: 0,
+          width: 150,
+        },
+        {
+          surface: "10",
+          label: "isAccountPeriod",
+          name: "是否超账期",
+          checked: 0,
+          width: 150,
+        },
+        {
+          surface: "11",
+          label: "collectionResult",
+          name: "应收款催收结果",
+          checked: 0,
+          width: 150,
+        },
+      ],
+      allCheck: false,
     };
   },
   created() {
-    this.loading = false;
+    this.setRowList = this.tableDate;
+    this.getRowList = this.tableDate;
     this.getList();
+    this.getRow();
   },
   methods: {
     //列设置全选
@@ -72,7 +241,7 @@ export default {
     getRow() {
       let that = this;
       this.data = {
-        tableName: "库存总账详情",
+        tableName: "总账统计",
         userId: Cookies.get("userName"),
       };
       select(this.data).then((res) => {
@@ -96,7 +265,7 @@ export default {
     //重置列表
     delRow() {
       this.data = {
-        tableName: "库存总账详情",
+        tableName: "总账统计",
         userId: Cookies.get("userName"),
       };
       resetModule(this.data).then((res) => {
@@ -111,7 +280,7 @@ export default {
     save() {
       this.showSetting = false;
       this.data = {
-        tableName: "库存总账详情",
+        tableName: "总账统计",
         userId: Cookies.get("userName"),
         sysTableSetList: this.setRowList,
       };
@@ -133,12 +302,13 @@ export default {
     getList() {
       financialStatistics(this.queryParams).then((res) => {
         if (res.code == 200) {
-          this.stockDate=res.rows
-          this.total=res.total
+          this.stockDate = res.rows;
+          this.total = res.total;
+          this.loading = false;
         }
       });
     },
-        /** 导出按钮操作 */
+    /** 导出按钮操作 */
     handleExport() {
       const queryParams = this.queryParams;
       this.$confirm("是否确认导出所有订单主数据项?", "警告", {
@@ -156,3 +326,26 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.tabSetting {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+.listStyle {
+  display: flex;
+  border-top: 1px solid #dcdfe6;
+  border-left: 1px solid #dcdfe6;
+  border-right: 1px solid #dcdfe6;
+}
+.listStyle:last-child {
+  border-bottom: 1px solid #dcdfe6;
+}
+.progress {
+  display: flex;
+  align-items: center;
+  padding: 2px;
+  background-color: rgba(0, 0, 0, 0.05);
+  height: 100%;
+}
+</style>