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

<template>
<div class="app-container zap-main">
    <el-row class="zap-table-search">
        <div class="zap-padding-end">
            <right-toolbar class="zap-right-toolbar" :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 class="zap-column-setting"  :checkList="checkList"  :tableList="tableList"  :selfDom="selfDom"  :tableId="tableId"></column-setting>
            </div>
        </div>
        <hr style="margin-top: 16px;">
        <el-form class="zap-table-search__form" :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
            <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="合同模板名称" prop="zfcName">
                <el-input v-model="queryParams.zfcName" placeholder="请输入模板名称" clearable size="small" maxlength="20" />
            </el-form-item>
            <el-form-item label="合同模板状态" prop="zfcStatus">
                <el-select v-model="queryParams.zfcStatus" placeholder="请选择合同模板状态" clearable size="small">
                    <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                </el-select>
            </el-form-item>
        </el-form>
    </el-row>
    <div class="zap-content zap-margin-top">
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd" v-hasPermi="['service:contract:add']">新增</el-button>
    </div>

    <el-table v-loading="loading" :data="contractList" class="zap-table" @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="scyName" :show-overflow-tooltip="true" v-if="uncheckList.scyName" />
        <el-table-column label="合同模板名称" align="center" prop="zfcName" :show-overflow-tooltip="true" v-if="uncheckList.zfcName" />
        <el-table-column label="合同模板状态" align="center" prop="zfcStatus" width='120px' :formatter="statusFormat" :show-overflow-tooltip="true" v-if="uncheckList.zfcStatus" />
        <el-table-column label="签署节点" align="center" prop="zfcNode" :formatter="nodeFormat" :show-overflow-tooltip="true" v-if="uncheckList.zfcNode" />
        <!-- <el-table-column label="签署方" align="center" prop="zfcSubject" :formatter="subjectFormat" :show-overflow-tooltip="true" v-if="uncheckList.zfcSubject"/> -->
        <el-table-column label="创建人" align="center" prop="nickName" :show-overflow-tooltip="true" v-if="uncheckList.nickName" />
        <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true" v-if="uncheckList.createTime" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width='200px'>
            <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-if="scope.row.zfcStatus == '01'" v-hasPermi="['service:contract:edit']">修改</el-button>
                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleChange(scope.row)" v-if="scope.row.zfcStatus == '00'" v-hasPermi="['service:contract:change']">停用</el-button>
                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleChange(scope.row)" v-if="scope.row.zfcStatus == '01'" v-hasPermi="['service:contract:change']">启用</el-button>
                <el-button size="mini" type="text" icon="el-icon-view" @click="handleInfo(scope.row)" v-hasPermi="['service:contract:query']">详情</el-button>
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDel(scope.row)" v-if="scope.row.zfcStatus == '01'" v-hasPermi="['service:contract:delete']">删除</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>
</template>

<script>
import {
    listContract,
    changeState,
    delContract
} from "@/api/service/contract/contract";
import ColumnSetting from "../../../components/Table/columnSetting.vue";
import {
    columnQuery,
    columnfilter
} from "@/api/common/columnSetting";
import Cookies from 'js-cookie'
export default {
    name: "contract",
    components: {
        ColumnSetting
    },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            contractList: [],
            statusOptions: [],
            // 总条数
            total: 0,
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                zfcName: null,
                scyName: null,
                zfcStatus: null,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                //  pptName:[
                //   { required: true, message: "项目类型不能为空", trigger: "blur" },
                // ]
            },
            tableList: [{
                    label: "scyName",
                    value: "资金渠道"
                },
                {
                    label: "zfcName",
                    value: "合同模板名称"
                },
                {
                    label: "zfcStatus",
                    value: "合同模板状态"
                },
                {
                    label: "zfcNode",
                    value: "签署节点"
                },
                //         {
                //           label: "zfcSubject",
                //           value: "签署方"
                //         },
                {
                    label: "nickName",
                    value: "创建人"
                },
                {
                    label: "createTime",
                    value: "创建时间"
                },
            ],
            checkList: [], //筛选列选中的数据列表--显示隐藏列用
            uncheckList: {}, //控制筛选列显示隐藏--显示隐藏列用
            selfDom: this,
            tableId: "/service/contract/list",
        };
    },
    created() {
        this.getList();
        this.getDicts("zc_zfc_status").then((response) => {
            this.statusOptions = response.data;
        });
        this.getDicts("zc_zfc_node").then((response) => {
            this.nodeOptions = response.data;
        });
        this.getDicts("zc_zfc_subject").then((response) => {
            this.subjectOptions = response.data;
        });
    },
    activated() {
        this.getList();
    },
    mounted() {
        this.columnQuery();
    },
    methods: {
        /** 查询合同列表 */
        getList() {
            this.loading = true;
            listContract(this.queryParams).then(response => {
                this.contractList = 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.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("/contract/addContract/", this.$route.fullPath);
            this.$router.push({
                path: "/contract/addContract/"
            });
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            const zfcId = row.zfcId
            this.resetForm("queryForm");
            Cookies.set("/contract/editContract/" + zfcId + "/", this.$route.fullPath);
            this.$router.push({
                path: "/contract/editContract/" + zfcId + "/"
            });
        },
        /** 详情按钮操作 */
        handleInfo(row) {
            const zfcId = row.zfcId
            this.resetForm("queryForm");
            Cookies.set("/contract/detailContract/" + zfcId + "/", this.$route.fullPath);
            this.$router.push({
                path: "/contract/detailContract/" + zfcId + "/"
            });
        },
        /** 删除按钮操作 */
        handleDel(row) {
            const zfcId = row.zfcId
            const zfcName = row.zfcName
            this.$confirm(
                    '是否确认删除合同模板名为"' + zfcName + '"的数据项?',
                    "警告", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }
                )
                .then(function () {
                    return delContract(zfcId);
                })
                .then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                })
                .catch(() => {
                    this.$message({
                        type: "warning",
                        message: "已取消删除",
                    });
                });
        },
        /** 启用按钮操作 */
        handleChange(row) {
            let text = row.zfcStatus === "01" ? "启用合同" : "停用合同";
            this.$confirm(
                    "确认要" + text + '"' + row.zfcName + '"吗?',
                    "警告", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }
                )
                .then(function () {
                    return changeState(row.zfcId);
                })
                .then(() => {
                    this.getList();
                    this.msgSuccess(text + '"' + row.zfcName + '"' + "成功");
                })
                .catch(function () {

                });
        },
        //合同模板状态字典反显
        statusFormat(row, column) {
            return this.selectDictLabel(this.statusOptions, row.zfcStatus);
        },
        //签署节点字典反显
        nodeFormat(row, column) {
            var zfcNodes = row.zfcNode.split(",");
            var zfcNodeList = '';
            for (var i = 0; i < zfcNodes.length; i++) {
                zfcNodeList += this.selectDictLabel(this.nodeOptions, zfcNodes[i]);
                if (i < zfcNodes.length - 1) {
                    zfcNodeList += ",";
                }
            }
            return zfcNodeList;
        },
        //签署节点字典反显
        subjectFormat(row, column) {
            return this.selectDictLabel(this.subjectOptions, row.zfcSubject);
        },
        //获取当前客户是否之前设置过列展示隐藏
        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);
        },
        /** 导出按钮操作 */
        handleExport() {
            /* this.download('base/taxCode/export', {
              ...this.queryParams
            }, `base_taxCode.xlsx`) */
        }
    }
};
</script>