ElecSeal.vue

<template>
    <div class="currentPage">
        <el-form :model="elecSeal" ref="elecSealForm" label-width="150px" label-position="right" label-suffix="：" size="small">
			<c-row>
				<c-col :span="11">
					<c-form-item label="签章类型" prop="stbtbl">
                        <c-select v-model="elecSeal.stbtbl" style="width: 100%" dbCode="STBTXT">
						</c-select>
                    </c-form-item>
				</c-col>
			</c-row>
			<div class="text-center">
                <c-button type="primary" icon="el-icon-search" :loading="false"
                    style="margin-right:50px;margin-bottom:25px" @click="searchTable()">
                搜索
                </c-button>
                <c-button type="primary" :loading="false" icon="el-icon-refresh"
                    native-type="reset" @click="resetFormFields('elecSealForm')">
                重置
                </c-button>
            </div>
            <div style="height:40px;margin-top:-20px;">
				<c-button type="primary" size="mini" @click="addSeal()">新增</c-button>
			</div>
		</el-form>
        <c-paging-table :data="tableData" ref="elecSealTableRef" 
		:pageSize="elecSeal.pageSize" :pageNumber="elecSeal.pageNum" :total="elecSeal.total"
			@queryFunc="queryFunc" :border="true">
			<el-table-column label="签章ID" prop="qzid" min-width="20%">
				<template slot-scope="scope">{{scope.row.qzid}}</template>
			</el-table-column>
			<el-table-column label="签章机构ID" prop="userid" min-width="20%">
				<template slot-scope="scope">{{scope.row.userid}}</template>
			</el-table-column>
			<el-table-column label="签章类型" prop="stbtbl" :formatter="stbtblFormat" min-width="20%"></el-table-column>
			<el-table-column label="中文关键字" prop="keyword" min-width="15%">
				<template slot-scope="scope">{{ scope.row.keyword }}</template>
			</el-table-column>
			<el-table-column label="操作" min-width="25%">
				<template slot-scope="scope">
					<el-button @click="getSealInfoDialog(scope.row.inr)" type="info" size="mini">详情</el-button>
					<el-button @click="updateSealDialog(scope.row.inr)" type="primary" size="mini">修改</el-button>
					<el-button @click="deleteSealDialog(scope.row.inr)" type="danger" size="mini">删除</el-button>
				</template>
			</el-table-column>
		</c-paging-table>
        <el-dialog :visible.sync="sealDialogFormVisible" :title=sealDialogFormTitle :modal-append-to-body="false"
			:lock-scroll="false" :show-close="false" :close-on-click-modal="false"
			:close-on-press-escape="false" v-dialogDrag >
			<el-form ref="sealDialogForm" :model="elecSearDialog" label-width="120px" label-position="right" label-suffix="：" :rules="rules">
				<el-row style="margin-top:20px;">
					<el-col :span="10" class="rightLayoutDialog">
						<el-form-item label="签章类型" prop="stbtbl">
							<c-select v-model="elecSearDialog.stbtbl" :disabled="sealDialogFieldDisable" @change="handleChange" dbCode="STBTXT">
							</c-select>
						</el-form-item>
					</el-col>
					<el-col :span="10" class="leftLayout">
						<el-form-item label="签章ID" prop="qzid">
							<el-input event-render="loadText" type="text" v-model="elecSearDialog.qzid" :disabled="sealDialogFieldDisable" maxlength="40"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" class="leftLayout">
						<el-form-item label="签章机构ID" prop="userid">
							<el-input event-render="loadText" type="text" v-model="elecSearDialog.userid" :disabled="sealDialogFieldDisable" maxlength="40"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10" class="leftLayout">
						<el-form-item label="中文关键字" prop="keyword">
							<el-input event-render="loadText" type="text" v-model="elecSearDialog.keyword" :disabled="sealDialogFieldDisable" maxlength="20"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" class="rightLayoutDialog">
						<el-form-item label="英文关键字" prop="enkeyword">
							<el-input event-render="loadText" type="text" v-model="elecSearDialog.enkeyword" :disabled="sealDialogFieldDisable" maxlength="20"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10" class="leftLayout">
						<el-form-item label="偏移坐标X" prop="offsetcoordx">
							<el-input event-render="loadText" v-model.number="elecSearDialog.offsetcoordx" :disabled="sealDialogFieldDisable" autocomplete="off" maxlength="3"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" class="rightLayoutDialog">
						<el-form-item label="偏移坐标Y" prop="offsetcoordy">
							<el-input event-render="loadText" v-model.number="elecSearDialog.offsetcoordy" :disabled="sealDialogFieldDisable" autocomplete="off" maxlength="3"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10" class="leftLayout">
						<el-form-item label="签章图片高度" prop="imageheight">
							<el-input event-render="loadText" v-model.number="elecSearDialog.imageheight" :disabled="sealDialogFieldDisable" autocomplete="off" maxlength="3"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row style="margin-bottom:-20px;">
					<el-col :span="10" class="rightLayoutDialog">
						<el-form-item label="签章图片宽度" prop="imagewidth">
							<el-input event-render="loadText" v-model.number="elecSearDialog.imagewidth" :disabled="sealDialogFieldDisable" autocomplete="off" maxlength="3"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancelSealDialog">取 消</el-button>
				<el-button type="primary" @click="submitSealDialog" v-show="sealDialogSubBtnVisible" :loading="loadingStatus">确 定</el-button>
			</div>
		</el-dialog>
    </div>
</template>
<script>
import DeptModel, { Pattern } from "./DeptModel.js";
import { queryElecSealByPage, saveElecSealInfo, getElecSealInfo, deleteElecSeal, getBchInfo } from "~/service/manage/dept.js";
import Utils from "~/utils";
export default {
    props:{
        orgBranch:String
    },
    data(){
        return{
			rules:Pattern,
			tableData:null,
			elecSeal: new DeptModel().data.elecSeal,
			elecSearDialog: new DeptModel().data.elecSeal,
			sealDialogFormVisible:false,
			sealDialogFieldDisable:false,
			sealDialogFormTitle:'新增电子签章',
			sealDialogSubBtnVisible:true,
			deleteSealInr:null,
			loadingStatus:false,
        }
    },
	watch:{
		// 会出现父组件传真，子组件更新不及时的情况
		orgBranch:{
			handler:function(newValue,oldValue){
				if(newValue != '' && newValue != null && newValue != 'undefined'){
					this.searchTable();
				}
			},
			// 强制立即执行回调
			immediate:true
		}
	},
    methods:{
		// 重置表单数据
		resetFormFields(formName){
			this.$refs[formName].resetFields();
		},

		// 数据格式化
        stbtblFormat(row,column){
			if(row.stbtbl == 'QZUUID'){
				return '云平台签章ID（交易银行业务）';
			}
			if(row.stbtbl == 'QZ2UID'){
				return '云平台签章ID（电子保函）';
			}
			if(row.stbtbl == 'QZ3UID'){
				return '负责人签章';
			}
		},

		// 获取分页组件数据，为请求数据赋值
        queryFunc(pageNumber, pageSize) {
			this.elecSeal.pageNum = pageNumber;
			this.elecSeal.pageSize = pageSize;
			this.searchTable();
		},

		// 列表查询
		searchTable(){
			this.elecSeal.branch = this.orgBranch;
			queryElecSealByPage(this.elecSeal)
				.then((res)=>{
					this.tableData = res.data.list;
					this.elecSeal.total = res.data.total;
					this.elecSeal.pageNum = res.data.pageNumber;
        			this.elecSeal.pageSize = res.data.pageSize;
				})
				.catch((err)=>{
					this.$notify.error("查询失败!");
				});
		},

		// 【新增】按钮
		addSeal(){
			// 选中节点后操作
			if(!(this.orgBranch != ''  && this.orgBranch != null)){
				this.$message({message: '请选中具体分行、支行再操作！',center: true,type: 'warning'});
				return;
			}
			getBchInfo(this.orgBranch)
			.then((res)=>{
				if(res.respCode == "AAAAAA"){
					var bch = res.data;
					if(bch == null){
						this.$message({message: '请先在【国结机构信息】页签中新增该机构信息!',center: true,type: 'warning'});
						return;
					}
					if(bch.lev == "0" || bch.lev == "A" || bch.lev == "B"){
						this.$message({message: '请选中具体的分行、支行再操作!',center: true,type: 'warning'});
						return;
					}
					this.sealDialogFieldDisable = false;
					this.sealDialogFormVisible = true;
					this.sealDialogSubBtnVisible = true;
					this.sealDialogFormTitle = '新增电子签章';
				} else {
					this.$notify.error("获取机构号:["+this.orgBranch+"]机构信息失败!");
					return;
				}
			})
			.catch((res)=>{
				this.$notify.error("获取机构号:["+this.orgBranch+"]机构信息失败!");
			});
		},

		// 【取消】按钮
		cancelSealDialog(){
			// 关闭弹框
			this.sealDialogFormVisible = false;
			this.elecSearDialog.inr = '';
			this.elecSearDialog.userid = '';
			this.elecSearDialog.qzid = '';
			this.elecSearDialog.ver = '';
			this.elecSearDialog.branch = '';
			this.elecSearDialog.stbtbl = '';
			this.elecSearDialog.keyword = '';
			this.elecSearDialog.enkeyword = '';
			this.elecSearDialog.offsetcoordx = 0;
			this.elecSearDialog.offsetcoordy = 0;
			this.elecSearDialog.imagewidth = 0;
			this.elecSearDialog.imageheight = 0;
			this.$refs['sealDialogForm'].resetFields();
		},

		// 【确定】按钮
		submitSealDialog(){
			this.$refs.sealDialogForm.validate((validated) => {
				if(validated){
					this.loadingStatus = true;
					this.elecSearDialog.branch = this.orgBranch;
                    saveElecSealInfo(this.elecSearDialog)
                        .then((res)=>{
							this.$notify.success("保存成功!");
                            // 关闭弹框
                            this.cancelSealDialog();
                            // 刷新列表
							this.searchTable();
							this.loadingStatus = false;
                        })
                        .catch((err)=>{
							this.loadingStatus = false;
                            this.$notify.error("保存失败!");
                        });
				} else {
 					Utils.formValidateTips(this.$refs.sealDialogForm.fields)
				}
			})
		},

		// 【详情】按钮
		getSealInfoDialog(inr){
			// 开启弹窗
			this.sealDialogFormVisible = true;
			// 字段禁用
			this.sealDialogFieldDisable = true;
			// 确定按钮隐藏
			this.sealDialogSubBtnVisible = false;
			this.sealDialogFormTitle = '查看电子签章详情';
			this.getSealInformation(inr);
		},

		// 【修改】按钮
		updateSealDialog(inr){
			this.sealDialogFormVisible = true;
			this.sealDialogFieldDisable = false;
			this.sealDialogSubBtnVisible = true;
			this.sealDialogFormTitle = '修改电子签章';
			this.getSealInformation(inr);
		},

		// 【删除】按钮
		deleteSealDialog(inr){
			this.deleteSealInr = inr;
			this.$confirm("是否确认删除?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
				})
				.then(()=>{
					this.deleteSealDialogInfo();
				})
				.catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
		},

		// 查看电子签章详情
		getSealInformation(inr){
			this.elecSearDialog.inr = inr;
            getElecSealInfo(this.elecSearDialog)
                .then((res)=>{
                    this.elecSearDialog = res.data;
                })
                .catch((err)=>{
                    this.$notify.error("查询失败!");
                });
		},

		// 删除电子签章
		deleteSealDialogInfo(){
			this.elecSearDialog.inr = this.deleteSealInr;
            deleteElecSeal(this.elecSearDialog)
                .then((res)=>{
					this.$notify.success("删除成功!");
                    this.deleteSealInr = null;
                    // 刷新列表
                    this.searchTable();
                })
                .catch((err)=>{
                    this.$notify.error("删除失败!");
                });
		},

		// 强制更新
		handleChange(){
			this.$forceUpdate();
		}
    }
}
</script>
<style lang="less" scoped>
.currentPage{
	.el-table--enable-row-hover .el-table__body tr:hover>td{
		background-color: #c694dc !important;
	}
}
</style>