ソースを参照

融资产品管理样式调整

guolufei123 3 年 前
コミット
714918fe29
1 ファイル変更442 行追加457 行削除
  1. 442 457
      front-vue/src/views/service/financeProduct/financeProduct.vue

+ 442 - 457
front-vue/src/views/service/financeProduct/financeProduct.vue

@@ -1,485 +1,470 @@
 <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"></column-setting>
-         </div>
-         <hr  style="margin-top: 16px;">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
-      <el-form-item label="产品名称" prop="zfpName" >
-        <el-input
-          v-model="queryParams.zfpName"
-          placeholder="请输入产品名称"
-          clearable
-          size="small"
-          maxlength="30"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="资方" prop="scyName" >
-        <el-input
-          v-model="queryParams.scyName"
-          placeholder="请输入资方名称"
-          clearable
-          size="small"
-          maxlength="30"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item  label="最短账期">
-          <el-input
-          type = "number"
-          v-model="queryParams.begin"
-          placeholder="请输入最短账期"
-          clearable
-          size="small"
-          maxlength="20"
-          min="0"
-        />
-      </el-form-item>
-      <el-form-item>
-        ~
-      </el-form-item>
-      <el-form-item>
-          <el-input
-          type = "number"
-          v-model="queryParams.end"
-          placeholder="请输入最短账期"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-          maxlength="20"
-          min="1"
-        />
-      </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:financeProduct:add']"
-        >新增</el-button>
-      </el-col>
-	
+<div class="app-container zap-main">
+    <el-row class="zap-table-search">
+        <el-row style="padding-top: 16px;">
+            <right-toolbar style="margin-top: 4px;" :showSearch.sync="showSearch" @queryTable="getList">收起</right-toolbar>
+            <span class="zap-table-search__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: ;">重置</el-button>
+                <column-setting :checkList="checkList" :tableList="tableList"  :selfDom="selfDom" :tableId="tableId" style="margin-left:5px"></column-setting>
+            </div>
+        </el-row>
+        <hr style="margin-top: 16px;">
+        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
+            <el-form-item label="产品名称" prop="zfpName">
+                <el-input v-model="queryParams.zfpName" placeholder="请输入产品名称" clearable size="large" maxlength="30" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="资方" prop="scyName">
+                <el-input v-model="queryParams.scyName" placeholder="请输入资方名称" clearable size="large" maxlength="30" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="最短账期">
+                <el-input type="number" v-model="queryParams.begin" placeholder="请输入最短账期" clearable size="large" maxlength="20" min="0" />
+            </el-form-item>
+            <el-form-item>
+                ~
+            </el-form-item>
+            <el-form-item>
+                <el-input type="number" v-model="queryParams.end" placeholder="请输入最短账期" clearable size="large" @keyup.enter.native="handleQuery" maxlength="20" min="1" />
+            </el-form-item>
+
+        </el-form>
+    </el-row>
+    <el-row class="zap-margin-top">
+        <div style="padding: 20px;background-color: #ffffff;">
+            <el-button type="primary" icon="el-icon-plus" @click="handleAdd" v-hasPermi="['service:financeProduct:add']">新增</el-button>
+        </div>
+    </el-row>
+    <el-row>
+        <div class="zap-table">
+            <el-table v-loading="loading" :data="financeProductList" @selection-change="handleSelectionChange" stripe="">
+                <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="zfpNumber" :show-overflow-tooltip="true"  v-if="uncheckList.zfpNumber" />
+                <el-table-column label="产品名称" align="center" prop="zfpName" :show-overflow-tooltip="true"  v-if="uncheckList.zfpName" />
+                <el-table-column label="产品类型" align="center" prop="zfpType" :formatter="typeFormat" :show-overflow-tooltip="true"  v-if="uncheckList.zfpType" />
+                <el-table-column label="资金方" align="center" prop="scyName" :show-overflow-tooltip="true"  v-if="uncheckList.scyName" />
+                <el-table-column label="是否可拆转融" align="center" prop="zfpSplit" :formatter="splitFormat" :show-overflow-tooltip="true"  v-if="uncheckList.zfpSplit" />
+                <el-table-column label="是否有追索权" align="center" prop="zfpRecourse" :formatter="recourseFormat" :show-overflow-tooltip="true"  v-if="uncheckList.zfpRecourse" />
+                <el-table-column label="电子凭证类型" align="center" prop="zfpVoucherType" :formatter="voucherTypeFormat" :show-overflow-tooltip="true"  v-if="uncheckList.zfpVoucherType" />
+                <el-table-column label="服务费是否可退" align="center" prop="zfpCharge" :formatter="chargeFormat" :show-overflow-tooltip="true"  v-if="uncheckList.zfpCharge" />
+                <el-table-column label="产品状态" align="center" prop="zfpStatus" :formatter="statusFormat" :show-overflow-tooltip="true"  v-if="uncheckList.zfpStatus" />
+                <el-table-column label="最小融资金额(元)" align="center" prop="zfpMinimumAmount" :formatter="moneyFormat" :show-overflow-tooltip="true"  v-if="uncheckList.zfpMinimumAmount" />
+                <el-table-column label="最短账期" align="center" prop="zfpShortestPeriod" :show-overflow-tooltip="true"  v-if="uncheckList.zfpShortestPeriod" />
+                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
+                    <template slot-scope="scope">
+                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['service:financeProduct:edit']">修改</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleChange(scope.row)" v-if="scope.row.zfpStatus == '01'" v-hasPermi="['service:financeProduct:change']">停用</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleChange(scope.row)" v-if="scope.row.zfpStatus == '00'" v-hasPermi="['service:financeProduct:change']">启用</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDel(scope.row)" v-if="scope.row.zfpStatus == '00'" v-hasPermi="['service:financeProduct:delete']">删除</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-view" @click="handleInfo(scope.row)" v-hasPermi="['service:financeProduct:query']">详情</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
     </el-row>
 
-    <el-table v-loading="loading" :data="financeProductList" @selection-change="handleSelectionChange" 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="zfpNumber" :show-overflow-tooltip="true"  v-if="uncheckList.zfpNumber"/>
-      <el-table-column label="产品名称" align="center" prop="zfpName" :show-overflow-tooltip="true"  v-if="uncheckList.zfpName"/>
-      <el-table-column label="产品类型" align="center" prop="zfpType" :formatter="typeFormat" :show-overflow-tooltip="true"  v-if="uncheckList.zfpType"/>
-      <el-table-column label="资金方" align="center" prop="scyName" :show-overflow-tooltip="true"  v-if="uncheckList.scyName"/>
-      <el-table-column label="是否可拆转融" align="center" prop="zfpSplit" :formatter="splitFormat" :show-overflow-tooltip="true"  v-if="uncheckList.zfpSplit"/>
-      <el-table-column label="是否有追索权" align="center" prop="zfpRecourse" :formatter="recourseFormat" :show-overflow-tooltip="true"  v-if="uncheckList.zfpRecourse"/>
-      <el-table-column label="电子凭证类型" align="center" prop="zfpVoucherType" :formatter="voucherTypeFormat" :show-overflow-tooltip="true"  v-if="uncheckList.zfpVoucherType"/>
-      <el-table-column label="服务费是否可退" align="center" prop="zfpCharge" :formatter="chargeFormat" :show-overflow-tooltip="true"  v-if="uncheckList.zfpCharge"/>
-      <el-table-column label="产品状态" align="center" prop="zfpStatus" :formatter="statusFormat" :show-overflow-tooltip="true"  v-if="uncheckList.zfpStatus"/>
-      <el-table-column label="最小融资金额(元)" align="center" prop="zfpMinimumAmount" :formatter="moneyFormat" :show-overflow-tooltip="true"  v-if="uncheckList.zfpMinimumAmount"/>
-      <el-table-column label="最短账期" align="center" prop="zfpShortestPeriod" :show-overflow-tooltip="true"  v-if="uncheckList.zfpShortestPeriod"/>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['service:financeProduct:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleChange(scope.row)"
-            v-if="scope.row.zfpStatus == '01'"
-            v-hasPermi="['service:financeProduct:change']"
-          >停用</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleChange(scope.row)"
-            v-if="scope.row.zfpStatus == '00'"
-            v-hasPermi="['service:financeProduct:change']"
-          >启用</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDel(scope.row)"
-            v-if="scope.row.zfpStatus == '00'"
-            v-hasPermi="['service:financeProduct:delete']"
-          >删除</el-button>
-           <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-view"
-            @click="handleInfo(scope.row)"
-            v-hasPermi="['service:financeProduct:query']"
-          >详情</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 { listFinanceProduct,changeState,delFinanceProduct } from "@/api/service/financeProduct/financeProduct";
-import ColumnSetting from "../../../components/Table/columnSetting.vue";
-import { columnQuery, columnfilter } from "@/api/common/columnSetting";
+import {
+    listFinanceProduct,
+    changeState,
+    delFinanceProduct
+} from "@/api/service/financeProduct/financeProduct";
+import ColumnSetting from "../../../components/Table/columnSetting.vue";
+import {
+    columnQuery,
+    columnfilter
+} from "@/api/common/columnSetting";
 import Cookies from 'js-cookie'
 export default {
-  name: "financeProduct",
-  components: {
-    ColumnSetting 
-  },
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      financeProductList:[],
-      // 总条数
-      total: 0,
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        zfpName: null,
-        scyName: null,
-        begin: null,
-        end: null,
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        //  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: "zfpCharge",
-          value: "服务费是否可退"
-        },
-        {
-          label: "zfpStatus",
-          value: "产品状态"
-        },
-        {     
-          label: "zfpMinimumAmount",
-          value: "最小融资金额"
-        },
-        {
-          label: "zfpShortestPeriod",
-          value: "最短账期"
-        },
-      ],
-      checkList: [], //筛选列选中的数据列表--显示隐藏列用
-      uncheckList: {}, //控制筛选列显示隐藏--显示隐藏列用
-      selfDom: this,
-      tableId: "/service/financeProduct/list",
-    };
-},
-  created() {
-    this.getList();
-    this.getDicts("zc_zfp_split").then((response) => {
-      this.splitOptions = response.data;
-    });
-    this.getDicts("zc_zfp_recourse").then((response) => {
-      this.recourseOptions = response.data;
-    });
-    this.getDicts("zc_zfp_status").then((response) => {
-      this.statusOptions = response.data;
-    });
-    this.getDicts("zc_zfp_charge").then((response) => {
-      this.chargeOptions = response.data;
-    });
-    this.getDicts("zc_zfp_voucher_type").then((response) => {
-      this.voucherTypeOptions = response.data;
-    });
-    this.getDicts("zc_zfp_type").then((response) => {
-      this.typeOptions = response.data;
-    });
-  },
-  activated(){
-    this.getList();
-  },
-  mounted() {
-    this.columnQuery();
-  },
-  methods: {
-    
-    /** 查询融资产品列表 */
-    getList() {
-      this.loading = true;
-      listFinanceProduct(this.queryParams).then(response => {
-        this.financeProductList = response.data.records;
-        this.total = response.data.total;
-        this.loading = false;
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
+    name: "financeProduct",
+    components: {
+        ColumnSetting
     },
-    // 表单重置
-    reset() {
-      this.form = {
-       
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.queryParams.begin = "";
-      this.queryParams.end = "";
-      this.resetForm("queryForm");
-      this.handleQuery();
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            financeProductList: [],
+            // 总条数
+            total: 0,
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                zfpName: null,
+                scyName: null,
+                begin: null,
+                end: null,
+            },
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {
+                //  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: "zfpCharge",
+                    value: "服务费是否可退"
+                },
+                {
+                    label: "zfpStatus",
+                    value: "产品状态"
+                },
+                {
+                    label: "zfpMinimumAmount",
+                    value: "最小融资金额"
+                },
+                {
+                    label: "zfpShortestPeriod",
+                    value: "最短账期"
+                },
+            ],
+            checkList: [], //筛选列选中的数据列表--显示隐藏列用
+            uncheckList: {}, //控制筛选列显示隐藏--显示隐藏列用
+            selfDom: this,
+            tableId: "/service/financeProduct/list",
+        };
     },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-     /*  this.ids = selection.map(item => item.ptcId)
-      this.single = selection.length!==1
-      this.multiple = !selection.length */
+    created() {
+        this.getList();
+        this.getDicts("zc_zfp_split").then((response) => {
+            this.splitOptions = response.data;
+        });
+        this.getDicts("zc_zfp_recourse").then((response) => {
+            this.recourseOptions = response.data;
+        });
+        this.getDicts("zc_zfp_status").then((response) => {
+            this.statusOptions = response.data;
+        });
+        this.getDicts("zc_zfp_charge").then((response) => {
+            this.chargeOptions = response.data;
+        });
+        this.getDicts("zc_zfp_voucher_type").then((response) => {
+            this.voucherTypeOptions = response.data;
+        });
+        this.getDicts("zc_zfp_type").then((response) => {
+            this.typeOptions = response.data;
+        });
     },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.resetQuery();
-      Cookies.set("/financeProduct/addFinanceProduct/", this.$route.fullPath);
-      this.$router.push({path:"/financeProduct/addFinanceProduct/"});
+    activated() {
+        this.getList();
     },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      const zfpId = row.zfpId
-      this.resetQuery();
-      Cookies.set("/financeProduct/editFinanceProduct/"+zfpId+"/", this.$route.fullPath);
-      this.$router.push({path:"/financeProduct/editFinanceProduct/"+zfpId+"/"});
-    },/** 修改按钮操作 */
-    handleInfo(row) {
-      const zfpId = row.zfpId
-      this.resetQuery();
-      Cookies.set("/financeProduct/detailFinanceProduct/"+zfpId+"/", this.$route.fullPath);
-      this.$router.push({path:"/financeProduct/detailFinanceProduct/"+zfpId+"/"});
+    mounted() {
+        this.columnQuery();
     },
-    /** 启用按钮操作 */
-     handleChange(row) {
-         let text = row.zfpStatus === "00" ? "开启产品" : "停用产品";
+    methods: {
+
+        /** 查询融资产品列表 */
+        getList() {
+            this.loading = true;
+            listFinanceProduct(this.queryParams).then(response => {
+                this.financeProductList = response.data.records;
+                this.total = response.data.total;
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+
+            };
+            this.resetForm("form");
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.queryParams.begin = "";
+            this.queryParams.end = "";
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            /*  this.ids = selection.map(item => item.ptcId)
+             this.single = selection.length!==1
+             this.multiple = !selection.length */
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.resetQuery();
+            Cookies.set("/financeProduct/addFinanceProduct/", this.$route.fullPath);
+            this.$router.push({
+                path: "/financeProduct/addFinanceProduct/"
+            });
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            const zfpId = row.zfpId
+            this.resetQuery();
+            Cookies.set("/financeProduct/editFinanceProduct/" + zfpId + "/", this.$route.fullPath);
+            this.$router.push({
+                path: "/financeProduct/editFinanceProduct/" + zfpId + "/"
+            });
+        },
+        /** 修改按钮操作 */
+        handleInfo(row) {
+            const zfpId = row.zfpId
+            this.resetQuery();
+            Cookies.set("/financeProduct/detailFinanceProduct/" + zfpId + "/", this.$route.fullPath);
+            this.$router.push({
+                path: "/financeProduct/detailFinanceProduct/" + zfpId + "/"
+            });
+        },
+        /** 启用按钮操作 */
+        handleChange(row) {
+            let text = row.zfpStatus === "00" ? "开启产品" : "停用产品";
             this.$confirm(
-                "确认要" + text + '"' + row.zfpName + '"吗?',
-                "警告",
-                {
-                    confirmButtonText: "确定",
-                    cancelButtonText: "取消",
-                    type: "warning",
-                }
-            )
+                    "确认要" + text + '"' + row.zfpName + '"吗?',
+                    "警告", {
+                        confirmButtonText: "确定",
+                        cancelButtonText: "取消",
+                        type: "warning",
+                    }
+                )
                 .then(function () {
                     return changeState(row.zfpId);
                 })
                 .then(() => {
-                  this.getList();
-                    this.msgSuccess(text +'"'+ row.zfpName + '"成功');
+                    this.getList();
+                    this.msgSuccess(text + '"' + row.zfpName + '"成功');
                 })
                 .catch(function () {
 
                 });
-       
-     },
-    //拆转融字典反显
-    splitFormat(row, column) {
-      return this.selectDictLabel(this.splitOptions, row.zfpSplit);
-    },
-    //是否有追索权字典反显
-    recourseFormat(row, column) {
-      return this.selectDictLabel(this.recourseOptions, row.zfpRecourse);
-    },
-    //产品状态字典反显
-    statusFormat(row, column) {
-      return this.selectDictLabel(this.statusOptions, row.zfpStatus);
-    },
-    //服务费是否可退字典反显
-    chargeFormat(row, column) {
-      return this.selectDictLabel(this.chargeOptions, row.zfpCharge);
-    },
-    //电子凭证类型字典反显
-    voucherTypeFormat(row, column) {
-      return this.selectDictLabel(this.voucherTypeOptions, row.zfpVoucherType);
-    },
-    //类型字典反显
-    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 => {
-        if (valid) {
-          if (this.form.pptId != null) {
-            const loading = this.$loading({
-                lock: true,
-                text: "Loading",
-                spinner: "el-icon-loading",
-                background: "rgba(0, 0, 0, 0.7)",
-            })
-            updateProjectType(this.form).then(response => {
-              loading.close();
-              this.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            }).catch((response)=>{
-              loading.close();
+        },
+        //拆转融字典反显
+        splitFormat(row, column) {
+            return this.selectDictLabel(this.splitOptions, row.zfpSplit);
+        },
+        //是否有追索权字典反显
+        recourseFormat(row, column) {
+            return this.selectDictLabel(this.recourseOptions, row.zfpRecourse);
+        },
+        //产品状态字典反显
+        statusFormat(row, column) {
+            return this.selectDictLabel(this.statusOptions, row.zfpStatus);
+        },
+        //服务费是否可退字典反显
+        chargeFormat(row, column) {
+            return this.selectDictLabel(this.chargeOptions, row.zfpCharge);
+        },
+        //电子凭证类型字典反显
+        voucherTypeFormat(row, column) {
+            return this.selectDictLabel(this.voucherTypeOptions, row.zfpVoucherType);
+        },
+        //类型字典反显
+        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();
             });
-          } else {
-            const loading = this.$loading({
-                lock: true,
-                text: "Loading",
-                spinner: "el-icon-loading",
-                background: "rgba(0, 0, 0, 0.7)",
-            })
-            addProjectType(this.form).then(response => {
-              loading.close();
-              this.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            }).catch((response)=>{
-              loading.close();
+        },
+        //控制隐藏显示的函数
+        filter(checkList) {
+            if (!!checkList) {
+                this.checkList = checkList;
+            }
+            columnfilter(this.selfDom);
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                    if (this.form.pptId != null) {
+                        const loading = this.$loading({
+                            lock: true,
+                            text: "Loading",
+                            spinner: "el-icon-loading",
+                            background: "rgba(0, 0, 0, 0.7)",
+                        })
+                        updateProjectType(this.form).then(response => {
+                            loading.close();
+                            this.msgSuccess("修改成功");
+                            this.open = false;
+                            this.getList();
+                        }).catch((response) => {
+                            loading.close();
+                        });
+                    } else {
+                        const loading = this.$loading({
+                            lock: true,
+                            text: "Loading",
+                            spinner: "el-icon-loading",
+                            background: "rgba(0, 0, 0, 0.7)",
+                        })
+                        addProjectType(this.form).then(response => {
+                            loading.close();
+                            this.msgSuccess("新增成功");
+                            this.open = false;
+                            this.getList();
+                        }).catch((response) => {
+                            loading.close();
+                        });
+                    }
+                }
             });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDel(row) {
-      const zfpId = row.zfpId || this.ids;
-      const zfpName = row.zfpName;
-      this.$confirm('是否确认删除产品名称为"'+ zfpName +'"的数据项?', "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
-          return delFinanceProduct(zfpId);
-        }).then(() => {
-          this.getList();
-          this.msgSuccess("删除成功");
-        })
-           .catch(() => {
-          this.$message({
-            type: "warning",
-            message: "已取消删除",
-           
-          });
-        });
-    },
-    //列表格式化金额
-    moneyFormat(row, column, cellValue) {
-        if(cellValue == null || cellValue== undefined || cellValue == ''){
-            cellValue = '0.00'
-        }
-        cellValue += '';
-        if (!cellValue.includes('.')) {
-            cellValue += '.00';
+        },
+        /** 删除按钮操作 */
+        handleDel(row) {
+            const zfpId = row.zfpId || this.ids;
+            const zfpName = row.zfpName;
+            this.$confirm('是否确认删除产品名称为"' + zfpName + '"的数据项?', "警告", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning"
+                }).then(function () {
+                    return delFinanceProduct(zfpId);
+                }).then(() => {
+                    this.getList();
+                    this.msgSuccess("删除成功");
+                })
+                .catch(() => {
+                    this.$message({
+                        type: "warning",
+                        message: "已取消删除",
+
+                    });
+                });
+        },
+        //列表格式化金额
+        moneyFormat(row, column, cellValue) {
+            if (cellValue == null || cellValue == undefined || cellValue == '') {
+                cellValue = '0.00'
+            }
+            cellValue += '';
+            if (!cellValue.includes('.')) {
+                cellValue += '.00';
+            }
+            return cellValue.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
+                return $1 + ',';
+            }).replace(/\.$/, '');
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            /* this.download('base/taxCode/export', {
+              ...this.queryParams
+            }, `base_taxCode.xlsx`) */
         }
-        return cellValue.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
-            return $1 + ',';
-          }).replace(/\.$/, '');
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      /* this.download('base/taxCode/export', {
-        ...this.queryParams
-      }, `base_taxCode.xlsx`) */
     }
-  }
 };
-</script>
+</script>
+</style>
+
+<style lang="scss" scoped>
+::v-deep .el-tabs__item {
+    width: 105px;
+    height: 55px;
+    padding: 0;
+    line-height: 55px;
+    text-align: center;
+    font-size: 16px;
+}
+
+.zap-credit__content {
+    position: relative;
+    padding: 0 13px 25px;
+    background-color: #ffffff;
+}
+
+.zap-credit__tabs {
+    position: relative;
+}
+
+.zap-credit__buttons {
+    position: absolute;
+    top: 0;
+    right: 13px;
+    display: flex;
+    align-items: center;
+    height: 55px;
+    z-index: 99;
+}
+
+.zap-table-search__title {
+    display: inline-block;
+    line-height: 40px;
+    height: 40px;
+    color: #333333;
+    font-size: 14px;
+}
+
+.zap-table {
+    padding: 0 13px;
+    background-color: #ffffff;
+}
+</style>