往来账款自定义表头 应付应收选择bug优化

front-vue/src/views/service/bill/bill.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" style="margin-left:5px"></column-setting>
          </div>
          <hr  style="margin-top: 16px;">
     <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px">
@@ -109,24 +110,24 @@
           <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
         </template>
       </el-table-column>
-      <el-table-column label="账款编号" align="center" prop="zbiNumber" :show-overflow-tooltip="true"/>
-      <el-table-column label="账款名称" align="center" prop="zbiName" :show-overflow-tooltip="true"/>
-      <el-table-column label="账款类型" align="center" prop="zbiType" :show-overflow-tooltip="true" :formatter="typeFormat"/>
-      <el-table-column label="关联融信" align="center" prop="zfiNumber" :show-overflow-tooltip="true"/>
-      <el-table-column label="应付方" align="center" prop="payerName" :show-overflow-tooltip="true"/>
-      <el-table-column label="应收方" align="center" prop="payeeName" :show-overflow-tooltip="true"/>
-      <el-table-column label="账款金额" align="center" prop="zbiAmount" :show-overflow-tooltip="true"/>
-      <el-table-column label="贸易日期" align="center" prop="zbiDate" :show-overflow-tooltip="true">
+      <el-table-column label="账款编号" align="center" prop="zbiNumber" v-if="uncheckList.zbiNumber" :show-overflow-tooltip="true"/>
+      <el-table-column label="账款名称" align="center" prop="zbiName" v-if="uncheckList.zbiName" :show-overflow-tooltip="true"/>
+      <el-table-column label="账款类型" align="center" prop="zbiType" v-if="uncheckList.zbiType" :show-overflow-tooltip="true" :formatter="typeFormat"/>
+      <el-table-column label="关联融信" align="center" prop="zfiNumber" v-if="uncheckList.zfiNumber" :show-overflow-tooltip="true"/>
+      <el-table-column label="应付方" align="center" prop="payerName" v-if="uncheckList.payerName" :show-overflow-tooltip="true"/>
+      <el-table-column label="应收方" align="center" prop="payeeName" v-if="uncheckList.payeeName" :show-overflow-tooltip="true"/>
+      <el-table-column label="账款金额" align="center" prop="zbiAmount" v-if="uncheckList.zbiAmount" :show-overflow-tooltip="true"/>
+      <el-table-column label="贸易日期" align="center" prop="zbiDate" v-if="uncheckList.zbiDate" :show-overflow-tooltip="true">
         <template slot-scope="scope">
           <span>{{ parseTime(new Date(scope.row.zbiDate),'{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="预计还款日" align="center" prop="zbiPayDate" :show-overflow-tooltip="true">
+      <el-table-column label="预计还款日" align="center" prop="zbiPayDate" v-if="uncheckList.zbiPayDate" :show-overflow-tooltip="true">
         <template slot-scope="scope">
           <span>{{ parseTime(new Date(scope.row.zbiPayDate),'{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="账款状态" align="center" prop="zbiStatus" :show-overflow-tooltip="true" :formatter="statusFormat"/>
+      <el-table-column label="账款状态" align="center" prop="zbiStatus" v-if="uncheckList.zbiStatus" :show-overflow-tooltip="true" :formatter="statusFormat"/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
         <template slot-scope="scope">
           <el-button
@@ -170,9 +171,14 @@
 
 <script>
 import { listBill, deleteBill } from "@/api/service/bill/bill";
+import {columnQuery,columnfilter} from "@/api/common/columnSetting";
+import ColumnSetting from '../../../components/Table/columnSetting.vue';
 import Cookies from 'js-cookie'
 export default {
   name: "Bill",
+  components: {
+    ColumnSetting 
+  },
   data() {
     return {
       // 遮罩层
@@ -198,6 +204,53 @@ export default {
         payerName: null,
         zbiStatus:null
       },
+      //筛选按钮的数据列表，与table表头的数据一致 --显示隐藏列用
+      tableList: [
+            {
+              label: 'zbiNumber',
+              value: '账款编号'
+            },
+            {
+              label: 'zbiName',
+              value: '账款名称'
+            },
+            {
+              label: 'zbiType',
+              value: '账款类型'
+            },
+            {
+              label: 'zfiNumber',
+              value: '关联融信'
+            },
+            {
+              label: 'payerName',
+              value: '应付方'
+            },
+            {
+              label: 'payeeName',
+              value: '应收方'
+            },
+            {
+              label: 'zbiAmount',
+              value: '账款金额'
+            },
+            {
+              label: 'zbiDate',
+              value: '贸易日期'
+            },
+            {
+              label: 'zbiPayDate',
+              value: '预计收/付款日期'
+            },
+            {
+              label: 'zbiStatus',
+              value: '账款状态'
+            }
+            ],
+      checkList: [],//筛选列选中的数据列表--显示隐藏列用
+      uncheckList: {},//控制筛选列显示隐藏--显示隐藏列用
+      selfDom : this,
+      tableId:"/sc-service/ownBill/billList",
     };
   },
   created() {
@@ -217,8 +270,34 @@ export default {
     this.getDicts("zc_bill_status").then(response => {
       this.statusOptions = response.data;
     });
+  }, 
+  mounted() {
+    this.columnQuery();
   },
   methods: {
+    //获取当前客户是否之前设置过列展示隐藏
+    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);
+    },
     /** 查询往来账款列表 */
     getList() {
       this.loading = true;

front-vue/src/views/service/bill/billAdd.vue

@@ -62,7 +62,7 @@
                 />
               </el-form-item>
               <el-form-item label="应付方" prop="zbiPayerId">
-                <el-select style="width: 300px" v-model="form.zbiPayerId" :disabled="true"
+                <el-select style="width: 300px" v-model="form.zbiPayerId" :disabled="true" filterable remote
                   v-if="type == '00'">
                     <el-option :label="company.scyName" :value="company.scyId">
                     </el-option>
@@ -103,7 +103,7 @@
                 </el-date-picker>
               </el-form-item>
               <el-form-item label="应收方" prop="zbiPayeeId">
-                <el-select style="width: 300px" v-model="form.zbiPayeeId" :disabled="true"
+                <el-select style="width: 300px" v-model="form.zbiPayeeId" :disabled="true" filterable remote
                   v-if="type == '01'">
                     <el-option :label="company.scyName" :value="company.scyId">
                     </el-option>
@@ -649,7 +649,7 @@ export default {
     getOwnCompany().then((response) => {
       console.log(response);
       this.company = response.data;
-      this.form.zbiPayerId = this.company.scyId
+      this.changePayer("00")
     });
     this.getCompanyRel()
     this.getDicts("zc_invoice_checkStt").then(response => {

front-vue/src/views/service/bill/billDetail.vue

@@ -64,7 +64,7 @@
                 />
               </el-form-item>
               <el-form-item label="应付方" prop="zbiPayerId">
-                <el-select style="width: 300px" v-model="form.zbiPayerId" :disabled="true"
+                <el-select style="width: 300px" v-model="form.zbiPayerId" :disabled="true" filterable remote
                   v-if="type == '00'">
                     <el-option :label="company.scyName" :value="company.scyId">
                     </el-option>
@@ -103,7 +103,7 @@
                 </el-date-picker>
               </el-form-item>
               <el-form-item label="应收方" prop="zbiPayeeId">
-                <el-select style="width: 300px" v-model="form.zbiPayeeId" :disabled="true"
+                <el-select style="width: 300px" v-model="form.zbiPayeeId" :disabled="true" filterable remote
                   v-if="type == '01'">
                     <el-option :label="company.scyName" :value="company.scyId">
                     </el-option>

front-vue/src/views/service/bill/billEdit.vue

@@ -45,11 +45,13 @@
                 prop="wplIsInput"
                 style="width: 300px"
               >
-                <el-radio-group v-model="type" prop="type" @change="changePayer">
+                <el-radio-group v-model="type" prop="type" :disabled="true">
                   <el-radio-button label="00"
+                  v-if="type == '00'"
                     >应付账款</el-radio-button
                   >
                   <el-radio-button label="01"
+                  v-if="type == '01'"
                     >应收账款</el-radio-button
                   >
                 </el-radio-group>
@@ -63,7 +65,7 @@
                 />
               </el-form-item>
               <el-form-item label="应付方" prop="zbiPayerId">
-                <el-select style="width: 300px" v-model="form.zbiPayerId" :disabled="true"
+                <el-select style="width: 300px" v-model="form.zbiPayerId" :disabled="true" filterable remote
                   v-if="type == '00'">
                     <el-option :label="company.scyName" :value="company.scyId">
                     </el-option>
@@ -104,7 +106,7 @@
                 </el-date-picker>
               </el-form-item>
               <el-form-item label="应收方" prop="zbiPayeeId">
-                <el-select style="width: 300px" v-model="form.zbiPayeeId" :disabled="true"
+                <el-select style="width: 300px" v-model="form.zbiPayeeId" :disabled="true" filterable remote
                   v-if="type == '01'">
                     <el-option :label="company.scyName" :value="company.scyId">
                     </el-option>