添加隐藏列

front-vue/src/views/service/financeProduct/financeProduct.vue

@@ -6,6 +6,7 @@
          <div  style="float: right;margin-right:1%">
             <el-button type="cyan"  icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
             <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"  style="float: ;">重置</el-button>
+            <column-setting :checkList=checkList :tableList=tableList :selfDom=selfDom :tableId=tableId></column-setting>
          </div>
          <hr  style="margin-top: 16px;">
     <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
@@ -19,7 +20,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item style="margin-left: 10%;" label="资方" prop="scyName" >
+      <el-form-item label="资方" prop="scyName" >
         <el-input
           v-model="queryParams.scyName"
           placeholder="请输入资方名称"
@@ -29,7 +30,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item style="margin-left: 10%;" label="最短账期">
+      <el-form-item  label="最短账期">
           <el-input
           v-model="queryParams.begin"
           placeholder="请输入最短账期"
@@ -132,7 +133,8 @@
 
 <script>
 import { listFinanceProduct,changeState } from "@/api/service/financeProduct/financeProduct";
-
+import ColumnSetting from "../../../components/Table/columnSetting.vue";
+import { columnQuery, columnfilter } from "@/api/common/columnSetting";
 export default {
   name: "financeProduct",
   components: {
@@ -173,7 +175,57 @@ export default {
         //  pptName:[
         //   { required: true, message: "项目类型不能为空", trigger: "blur" },
         // ]
-      }
+      },
+      tableList: [
+        {
+          label: "zfpNumber",
+          value: "产品编号"
+        },
+        {
+          label: "zfpName",
+          value: "产品名称"
+        },
+        {
+          label: "zfpType",
+          value: "产品类型"
+        },
+        {
+          label: "scyName",
+          value: "资金方"
+        },
+        {
+          label: "zfpSplit",
+          value: "是否可拆转融"
+        },
+        {
+          label: "zfpRecourse",
+          value: "是否有追索权"
+        },
+        {
+          label: "zfpVoucherType",
+          value: "电子凭证类型"
+        },
+        {
+          label: "zfpStatus",
+          value: "服务费是否可退"
+        },
+        {
+          label: "zfpSplit",
+          value: "产品状态"
+        },
+        {     
+          label: "zfpMinimumAmount",
+          value: "最小融资金额"
+        },
+        {
+          label: "zfpShortestPeriod",
+          value: "最短账期"
+        },
+      ],
+      checkList: [], //筛选列选中的数据列表--显示隐藏列用
+      uncheckList: {}, //控制筛选列显示隐藏--显示隐藏列用
+      selfDom: this,
+      tableId: "/service/financeProduct/list",
     };
 },
   created() {
@@ -287,6 +339,30 @@ export default {
     typeFormat(row, column) {
       return this.selectDictLabel(this.typeOptions, row.zfpType);
     },
+    //获取当前客户是否之前设置过列展示隐藏
+    columnQuery() {
+      //获取页面路径
+      var psfPagePath = window.location.pathname;
+
+      //用请求后台的url作为唯一标识
+      var psfTableName = this.tableId;
+      var columnForm = {};
+      columnForm.psfPagePath = psfPagePath;
+      columnForm.psfTableName = psfTableName;
+      columnQuery(columnForm).then(response => {
+        if (response.data && response.data.psfShowData) {
+          this.checkList = response.data.psfShowData;
+        }
+        this.filter();
+      });
+    },
+    //控制隐藏显示的函数
+    filter(checkList) {
+      if (!!checkList) {
+        this.checkList = checkList;
+      }
+      columnfilter(this.selfDom);
+    },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {