Ver código fonte

往来账款页面样式调整

guolufei123 4 anos atrás
pai
commit
fee9ca3395
1 arquivos alterados com 373 adições e 470 exclusões
  1. 373 470
      front-vue/src/views/service/bill/bill.vue

+ 373 - 470
front-vue/src/views/service/bill/bill.vue

@@ -1,490 +1,393 @@
 <template>
-  <div class="app-container">
-      <el-card class="fiche">
-          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList">收起</right-toolbar>
-          <span style="margin-bottom: 10px;color:#333333;font:14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial,sans-serif">所选条件:</span>
-         <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="120px">
-      <el-form-item prop="value">
-         <el-select v-model="queryParams.value" placeholder="请选择" clearable v-if="companyType !='00'" @change="change">
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value">
-          </el-option>
-        </el-select>
-        <el-select v-model="queryParams.value" placeholder="请选择" clearable v-if="companyType =='00'" @change="change">
-          <el-option
-            v-for="item in optionsPlus"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value">
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item prop="queryValue" v-if="queryParams.value !='02'">
-        <el-input
-          v-model="queryParams.queryValue"
-          placeholder="请输入关键字模糊查询"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-          maxlength="30"
-        />
-      </el-form-item>
-      <el-form-item prop="queryValue" v-if="queryParams.value =='02'">
-         <el-select v-model="queryParams.queryValue" placeholder="请选择账款类型" clearable>
-          <el-option
-            v-for="item in newOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value">
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="预计还款日" prop="expireDate">
-        <el-date-picker 
-          clearable 
-          unlink-panels 
-          v-model="queryParams.expireDate" 
-          value-format="yyyy-MM-dd" 
-          format="yyyy-MM-dd" 
-          type="daterange" 
-          range-separator="-" 
-          start-placeholder="开始日期" 
-          end-placeholder="结束日期">
-        </el-date-picker>
-      </el-form-item>
-  
-      <!-- <el-form-item label="账款编号" prop="zbiNumber">
-        <el-input
-          v-model="queryParams.zbiNumber"
-          placeholder="请输入账款编号"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-          maxlength="30"
-        />
-      </el-form-item>
-  
-      <el-form-item label="账款名称" prop="zbiName">
-        <el-input
-          v-model="queryParams.zbiName"
-          placeholder="请输入账款名称"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-          maxlength="20"
-        />
-      </el-form-item>
-  
-      <el-form-item label="账款类型" prop="zbiType" v-if="company.scyType!='00'">
-        <el-select v-model="queryParams.zbiType"
-            placeholder="请选择账款类型"
-            clearable
-            size="small"
-            >
-                <el-option
-                  v-for="dict in typeOptions"
-                  :key="dict.dictValue"
-                  :label="dict.dictLabel"
-                  :value="dict.dictValue"
-                ></el-option>
-        </el-select>
-      </el-form-item>
-  
-      <el-form-item label="应收方" prop="payeeName">
-        <el-input
-          v-model="queryParams.payeeName"
-          placeholder="请输入应收方"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-          maxlength="40"
-        />
-      </el-form-item>
-  
-      <el-form-item label="应付方" prop="payerName">
-        <el-input
-          v-model="queryParams.payerName"
-          placeholder="请输入应付方"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-          maxlength="40"
-        />
-      </el-form-item>
-  
-      <el-form-item label="账款状态" prop="zbiStatus">
-        <el-select v-model="queryParams.zbiStatus"
-            placeholder="请选择账款状态"
-            clearable
-            size="small"
-            >
-                <el-option
-                  v-for="dict in statusOptions"
-                  :key="dict.dictValue"
-                  :label="dict.dictLabel"
-                  :value="dict.dictValue"
-                ></el-option>
-        </el-select>
-      </el-form-item> -->
-  
+<div class="app-container zap-main">
+    <el-row class="zap-table-search">
+        <div class="zap-padding-end">
+            <right-toolbar style="margin-top: 4px;" :showSearch.sync="showSearch" @queryTable="getList">收起</right-toolbar>
+            <span class="zap-padding-start zap-font-title">所选条件:</span>
+            <div style="float: right;margin-right:1%">
+                <el-button type="cyan" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" @click="resetQuery" style="float: ;margin-right: 20px;">重置</el-button>
+                <column-setting :checkList="checkList" :tableList="tableList" :selfDom="selfDom" :tableId="tableId" style="margin-left:5px"></column-setting>
+            </div>
+        </div>
+        <hr style="margin-top: 16px;">
+        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="120px">
+            <el-form-item prop="value" size="large">
+                <el-select v-model="queryParams.value" placeholder="请选择" clearable v-if="companyType !='00'" @change="change">
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                </el-select>
+                <el-select v-model="queryParams.value" placeholder="请选择" clearable v-if="companyType =='00'" @change="change">
+                    <el-option v-for="item in optionsPlus" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item prop="queryValue" v-if="queryParams.value !='02'" size="large">
+                <el-input v-model="queryParams.queryValue" placeholder="请输入关键字模糊查询" clearable @keyup.enter.native="handleQuery" maxlength="30" />
+            </el-form-item>
+            <el-form-item prop="queryValue" v-if="queryParams.value =='02'" size="large">
+                <el-select v-model="queryParams.queryValue" placeholder="请选择账款类型" clearable>
+                    <el-option v-for="item in newOptions" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="预计还款日" prop="expireDate" size="large">
+                <el-date-picker clearable unlink-panels v-model="queryParams.expireDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
+                </el-date-picker>
+            </el-form-item>
 
-    </el-form>
-      </el-card>
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['service:bill:add']"
-        >新增</el-button>
-      </el-col>
-     
-	 
+        </el-form>
     </el-row>
+    <div class="zap-content zap-margin-top">
+        <el-button type="primary" icon="el-icon-plus" @click="handleAdd" v-hasPermi="['service:bill:add']">新增</el-button>
+    </div>
 
-    <el-table stripe 
-      v-loading="loading" :data="billList" row-key="categoryId" 
-              default-expand-all  :tree-props="{children: 'children', hasChildren: 'hasChildren'}" border >
-       <el-table-column label="序号" type="index" width="50" align="center">
-        <template slot-scope="scope">
-          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
-        </template>
-      </el-table-column>
-      <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&&company.scyType!='00'" :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" 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" 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
-            size="mini"
-            type="text"
-            icon="el-icon-info"
-            @click="handleDetail(scope.row)"
-            v-show="scope.row.zfiNumber"
-            v-hasPermi="['service:bill:detail']"
-          >详情</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-show="!scope.row.zfiNumber"
-            v-hasPermi="['service:bill:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-show="!scope.row.zfiNumber"
-            v-hasPermi="['service:bill:del']"
-          >删除</el-button>
-        </template>
-      </el-table-column>
+    <el-table stripe v-loading="loading" :data="billList" row-key="categoryId" default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}" border>
+        <el-table-column label="序号" type="index" width="50" align="center">
+            <template slot-scope="scope">
+                <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
+            </template>
+        </el-table-column>
+        <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&&company.scyType!='00'" :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" 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" 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 size="mini" type="text" icon="el-icon-info" @click="handleDetail(scope.row)" v-show="scope.row.zfiNumber" v-hasPermi="['service:bill:detail']">详情</el-button>
+                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-show="!scope.row.zfiNumber" v-hasPermi="['service:bill:edit']">修改</el-button>
+                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-show="!scope.row.zfiNumber" v-hasPermi="['service:bill:del']">删除</el-button>
+            </template>
+        </el-table-column>
     </el-table>
-    
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
 
-  </div>
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+
+</div>
 </template>
 
 <script>
-import { listBill, deleteBill } from "@/api/service/bill/bill";
-import { getOwnCompany } from "@/api/common/company";
-import { getUserProfile } from "@/api/system/user";
-import {columnQuery,columnfilter} from "@/api/common/columnSetting";
+import {
+    listBill,
+    deleteBill
+} from "@/api/service/bill/bill";
+import {
+    getOwnCompany
+} from "@/api/common/company";
+import {
+    getUserProfile
+} from "@/api/system/user";
+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 {
-      options: [{
-          value: '00',
-          label: '按账款名称查询'
-        }, {
-          value: '01',
-          label: '按账款编号查询'
-        }, {
-          value: '02',
-          label: '按账款类型查询'
-        }, {
-          value: '03',
-          label: '按应收企业名称查询'
-        }, {
-          value: '04',
-          label: '按应付企业名称查询'
-      }],
-      optionsPlus: [{
-          value: '00',
-          label: '按账款名称查询'
-        }, {
-          value: '01',
-          label: '按账款编号查询'
-        }, {
-          value: '03',
-          label: '按应收企业名称查询'
-        }, {
-          value: '04',
-          label: '按应付企业名称查询'
-      }],
-      newOptions: [{
-          value: '00',
-          label: '应收账款'
-        }, {
-          value: '01',
-          label: '应付账款'
-      }],
-      value:null,
-      // 遮罩层
-      loading: false,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      //企业类型
-      companyType:null,
-      // 资料目录表格数据
-      billList: [],
-      //账款类型
-      typeOptions: [],
-      //账款状态
-      statusOptions: [],
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        // zbiNumber: null,
-        // zbiName: null,
-        // zbiType: null,
-        // payeeName: null,
-        // payerName: null,
-        // zbiStatus:null,
-        value:null,
-        // queryType:null,
-        queryValue:null,
-        expireDate:null,
-      },
-      company:{},
-      //筛选按钮的数据列表,与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: '预计收/付款日期'
+    name: "Bill",
+    components: {
+        ColumnSetting
+    },
+    data() {
+        return {
+            options: [{
+                value: '00',
+                label: '按账款名称查询'
+            }, {
+                value: '01',
+                label: '按账款编号查询'
+            }, {
+                value: '02',
+                label: '按账款类型查询'
+            }, {
+                value: '03',
+                label: '按应收企业名称查询'
+            }, {
+                value: '04',
+                label: '按应付企业名称查询'
+            }],
+            optionsPlus: [{
+                value: '00',
+                label: '按账款名称查询'
+            }, {
+                value: '01',
+                label: '按账款编号查询'
+            }, {
+                value: '03',
+                label: '按应收企业名称查询'
+            }, {
+                value: '04',
+                label: '按应付企业名称查询'
+            }],
+            newOptions: [{
+                value: '00',
+                label: '应收账款'
+            }, {
+                value: '01',
+                label: '应付账款'
+            }],
+            value: null,
+            // 遮罩层
+            loading: false,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            //企业类型
+            companyType: null,
+            // 资料目录表格数据
+            billList: [],
+            //账款类型
+            typeOptions: [],
+            //账款状态
+            statusOptions: [],
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                // zbiNumber: null,
+                // zbiName: null,
+                // zbiType: null,
+                // payeeName: null,
+                // payerName: null,
+                // zbiStatus:null,
+                value: null,
+                // queryType:null,
+                queryValue: null,
+                expireDate: null,
             },
-            {
-              label: 'zbiStatus',
-              value: '账款状态'
-            }
+            company: {},
+            //筛选按钮的数据列表,与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() {
-      getUserProfile().then((response) =>{
-        this.companyType = response.data.companyType
-        if("00" == response.data.companyType){
-          this.queryParams.value = "01"
-        }else if("01" == response.data.companyType){
-          this.queryParams.value = "03"
-        }else if("02" == response.data.companyType){
-          this.queryParams.value = "04"
-        }
-      });
-      getOwnCompany().then((response) => {
-        this.company = response.data;
-      });
-      this.getList();
-      this.getDicts("zc_bill_type").then(response => {
-        this.typeOptions = response.data;
-      });
-      this.getDicts("zc_bill_status").then(response => {
-        this.statusOptions = response.data;
-      });
-  },
-  activated () {
-    this.getList();
-    this.getDicts("zc_bill_type").then(response => {
-      this.typeOptions = response.data;
-    });
-    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;
-      listBill(this.queryParams).then(response => {
-        this.billList = response.data.records;
-        this.total = response.data.total
-        this.loading = false;
-      });
-    },
-    // 账款类型字典翻译
-    typeFormat(row, column) {
-        return this.selectDictLabel(this.typeOptions, row.zbiType);
-    },
-     //账款状态字典翻译
-    statusFormat(row, column) {
-      return this.selectDictLabel(this.statusOptions, row.zbiStatus);
-    },
-    change(){
-      this.queryParams.queryValue = null
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        dciDeptName: undefined
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+            checkList: [], //筛选列选中的数据列表--显示隐藏列用
+            uncheckList: {}, //控制筛选列显示隐藏--显示隐藏列用
+            selfDom: this,
+            tableId: "/sc-service/ownBill/billList",
+        };
     },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 新增按钮操作 */
-    handleAdd(row) {
-      this.resetQuery();
-      Cookies.set("/bill/billAdd", this.$route.fullPath)
-      this.$router.push({ path: "/bill/billAdd" });
+    created() {
+        getUserProfile().then((response) => {
+            this.companyType = response.data.companyType
+            if ("00" == response.data.companyType) {
+                this.queryParams.value = "01"
+            } else if ("01" == response.data.companyType) {
+                this.queryParams.value = "03"
+            } else if ("02" == response.data.companyType) {
+                this.queryParams.value = "04"
+            }
+        });
+        getOwnCompany().then((response) => {
+            this.company = response.data;
+        });
+        this.getList();
+        this.getDicts("zc_bill_type").then(response => {
+            this.typeOptions = response.data;
+        });
+        this.getDicts("zc_bill_status").then(response => {
+            this.statusOptions = response.data;
+        });
     },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.resetQuery();
-      Cookies.set("/bill/billEdit/" + row.zbiId, this.$route.fullPath)
-      this.$router.push({ path: "/bill/billEdit/" + row.zbiId });
+    activated() {
+        this.getList();
+        this.getDicts("zc_bill_type").then(response => {
+            this.typeOptions = response.data;
+        });
+        this.getDicts("zc_bill_status").then(response => {
+            this.statusOptions = response.data;
+        });
     },
-    /** 详情按钮操作 */
-    handleDetail(row) {
-      this.resetQuery();
-      Cookies.set("/bill/billDetail/" + row.zbiId, this.$route.fullPath)
-      this.$router.push({ path: "/bill/billDetail/" + row.zbiId });
+    mounted() {
+        this.columnQuery();
     },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      var self = this
-      const zbiName = row.zbiName;
-      const zbiIds = row.zbiId;
-      this.$confirm('是否确认删除往来账款名称为"' + zbiName + '"的数据项?', "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
-          self.loading = true
-          return deleteBill(zbiIds); 
-        }).then(() => {
-          this.getList();
-          this.msgSuccess("删除成功");
-        }).catch(() => {
-          this.$message({
-            type: "warning",
-            message: "已取消删除",
-        });
-      });
+    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;
+            listBill(this.queryParams).then(response => {
+                this.billList = response.data.records;
+                this.total = response.data.total
+                this.loading = false;
+            });
+        },
+        // 账款类型字典翻译
+        typeFormat(row, column) {
+            return this.selectDictLabel(this.typeOptions, row.zbiType);
+        },
+        //账款状态字典翻译
+        statusFormat(row, column) {
+            return this.selectDictLabel(this.statusOptions, row.zbiStatus);
+        },
+        change() {
+            this.queryParams.queryValue = null
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                dciDeptName: undefined
+            };
+            this.resetForm("form");
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        /** 新增按钮操作 */
+        handleAdd(row) {
+            this.resetQuery();
+            Cookies.set("/bill/billAdd", this.$route.fullPath)
+            this.$router.push({
+                path: "/bill/billAdd"
+            });
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.resetQuery();
+            Cookies.set("/bill/billEdit/" + row.zbiId, this.$route.fullPath)
+            this.$router.push({
+                path: "/bill/billEdit/" + row.zbiId
+            });
+        },
+        /** 详情按钮操作 */
+        handleDetail(row) {
+            this.resetQuery();
+            Cookies.set("/bill/billDetail/" + row.zbiId, this.$route.fullPath)
+            this.$router.push({
+                path: "/bill/billDetail/" + row.zbiId
+            });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            var self = this
+            const zbiName = row.zbiName;
+            const zbiIds = row.zbiId;
+            this.$confirm('是否确认删除往来账款名称为"' + zbiName + '"的数据项?', "警告", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+            }).then(function () {
+                self.loading = true
+                return deleteBill(zbiIds);
+            }).then(() => {
+                this.getList();
+                this.msgSuccess("删除成功");
+            }).catch(() => {
+                this.$message({
+                    type: "warning",
+                    message: "已取消删除",
+                });
+            });
+        }
     }
-  }
 };
-</script>
+</script>
+
+<style lang="scss" scoped>
+.zap-table-search {
+    padding-top: 12px;
+    background-color: #ffffff;
+}
+
+.zap-table-search__form {
+    display: flex;
+    align-items: center;
+    min-height: 90px;
+
+    .el-form-item--medium.el-form-item {
+        margin-bottom: 0;
+    }
+
+    .el-form-item__label {
+        line-height: 40px;
+        font-size: 14px;
+        color: #333333;
+    }
+
+    .el-input--small .el-input__inner {
+        height: 40px;
+        line-height: 40px;
+    }
+}
+</style>