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

<template>
<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>

    <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 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();
        },
        // 表单重置
        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.resetForm("queryForm");
            Cookies.set("/financeProduct/addFinanceProduct/", this.$route.fullPath);
            this.$router.push({
                path: "/financeProduct/addFinanceProduct/"
            });
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            const zfpId = row.zfpId
            this.resetForm("queryForm");
            Cookies.set("/financeProduct/editFinanceProduct/" + zfpId + "/", this.$route.fullPath);
            this.$router.push({
                path: "/financeProduct/editFinanceProduct/" + zfpId + "/"
            });
        },
        /** 修改按钮操作 */
        handleInfo(row) {
            const zfpId = row.zfpId
            this.resetForm("queryForm");
            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",
                    }
                )
                .then(function () {
                    return changeState(row.zfpId);
                })
                .then(() => {
                    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();
                        });
                    } 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';
            }
            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>
</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>