OitInfo.vue

<template>
    <div class="eibs-tab">
      <el-form :model="oit" ref="oitForm" style="height: auto!important; " label-width="150px" label-position="right" label-suffix="：" size="small" >
			<c-row>
				<c-col :span="12">
					<c-form-item label="提示类型" prop="subtyp">
                        <c-select v-model="oit.subtyp" style="width: 100%" dbCode="OITSUB"></c-select>
                    </c-form-item>
				</c-col>
				<c-col :span="12">
					<c-form-item label="提示级别" prop="inflev">
                        <c-select v-model="oit.inflev" style="width: 100%" dbCode="INFLEV"></c-select>
                    </c-form-item>
				</c-col>
			</c-row>
			<c-row>
				<c-col :span="12">
					<c-form-item label="业务品种" prop="subbus">
                        <c-select v-model="oit.subbus" style="width: 100%" :code="busCod"></c-select>
                    </c-form-item>
				</c-col>
			</c-row>
            <c-row>
                <c-col :span="12" style="text-align: left">
					<c-button type="primary" size="mini" @click="addOit()" :disabled="isPageDisabled">新增</c-button>
				</c-col>
                <c-col :span="12" style="text-align: right">
					<c-button icon="el-icon-refresh" native-type="reset" @click="resetFormFields('oitForm')">重置</c-button>
                    <c-button type="primary" icon="el-icon-search" :loading="false" size="small" @click="searchTable()">查询</c-button>
				</c-col>
            </c-row>
		</el-form>
      <c-col :span="24">
        <c-paging-table :data="tableData" ref="oitTableRef" 
		:pageSize="oit.pageSize" :pageNumber="oit.pageNum" :total="oit.total"
			@queryFunc="queryFunc" :border="true">
			<el-table-column label="提示类型" prop="subtypname" min-width="15%">
				<template slot-scope="scope">{{scope.row.subtypname}}</template>
			</el-table-column>
			<el-table-column label="提示级别" prop="inflevname" min-width="15%">
				<template slot-scope="scope">{{scope.row.inflevname}}</template>
			</el-table-column>
			<el-table-column label="业务品种" prop="subbusname" min-width="15%">
                <template slot-scope="scope">{{scope.row.subbusname}}</template>
            </el-table-column>
			<el-table-column label="提示内容" prop="inftxt" min-width="35%">
				<template slot-scope="scope">{{ scope.row.inftxt }}</template>
			</el-table-column>
			<el-table-column label="操作" min-width="20%">
				<template slot-scope="scope">
					<el-button @click="getOitInfoDialog(scope.row.inr)" type="" size="mini">详情</el-button>
					<el-button @click="updateOitDialog(scope.row.inr)" type="primary" size="mini" :disabled="isPageDisabled">修改</el-button>
					<el-button @click="deleteOitDialog(scope.row.inr)" type="primary" size="mini" :disabled="isPageDisabled">删除</el-button>
				</template>
			</el-table-column>
		</c-paging-table>
    </c-col>
        <el-dialog :visible.sync="oitDialogFormVisible" :title=oitDialogFormTitle :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="oitDialogForm" :model="oitDialog" label-width="120px" label-position="right" label-suffix="：" :rules="rules">
				<el-row style="margin-top:20px;">
					<el-col :span="11">
						<el-form-item label="提示类型" prop="subtyp">
							<c-select v-model="oitDialog.subtyp" dbCode="OITSUB" :disabled="fieldDisabled || subtypFieldDisabled" @change="changeTyp()"></c-select>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="提示级别" prop="inflev"> 
                            <c-select v-model="oitDialog.inflev" dbCode="INFLEV" :disabled="fieldDisabled"></c-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="11">
						<el-form-item label="业务品种" prop="subbus" :rules="(oitDialog.subtyp == 'BUS' || oitDialog.subtyp == 'SET') ? rules.subbus : [{required: false}]">
                            <c-select v-model="oitDialog.subbus" :code="busCod" :disabled="fieldDisabled || subbusFieldDisabled"></c-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="22">
						<el-form-item label="提示内容" prop="inftxt">
                            <c-input type="textarea" :rows="4" v-model="oitDialog.inftxt" :disabled="fieldDisabled" maxlength="150" show-word-limit placeholder="请输入提示内容"></c-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button v-if="!detailBtnShow" @click="cancelOitDialog">取 消</el-button>
				<el-button v-if="detailBtnShow" @click="cancelOitDialog">返 回</el-button>
				<el-button type="primary" @click="addOitDialog" v-show="oitDialogAddBtnVisible" :loading="loadingStatus">确 定</el-button>
				<el-button type="primary" @click="editOitDialog" v-show="oitDialogEditBtnVisible" :loading="loadingStatus">确 定</el-button>
			</div>
		</el-dialog>
    </div>
</template>
<script>
import OitModel, { Pattern } from "./OitModel.js";
import { addPtyOit,editPtyOit,deletePtyOit,getPtyOit,queryPtyOitByPage } from "~/service/manage/ptyn.js";
export default {
    props: ["model","type"],
    data(){
        return{
			rules:Pattern,
			tableData:null,
			oit: new OitModel().data,
			oitDialog: new OitModel().data,
			oitDialogFormVisible:false,
			oitDialogFormTitle:'新增消息及停用信息',
			oitDialogAddBtnVisible:false,
			oitDialogEditBtnVisible:false,
			deleteOitInr:null,
            loadingStatus:false,
			detailBtnShow:false,
			fieldDisabled:false,
			subbusFieldDisabled:false,
      subtypFieldDisabled:false,
      busCod:[
        {label: "进口信用证", value: "LI"},
        {label: "进口信用证单据", value: "BR"},
        {label: "出口信用证", value: "LE"},
        {label: "出口信用证单据", value: "BE"},
        {label: "转让信用证", value: "LT"},
        {label: "转让信用证单据", value: "BT"},
        {label: "国内证买方", value: "DI"},
        {label: "国内证买方单据", value: "BD"},
        {label: "国内证卖方", value: "DE"},
        {label: "国内证卖方单据", value: "BF"},
        {label: "汇款", value: "CP"},
        {label: "保证金业务", value: "FC"},
        {label: "出口融资", value: "BP"},
        {label: "进口融资", value: "TR"},
        {label: "委托方代付", value: "DF"},
        {label: "进口托收", value: "BC"},
        {label: "出口托收", value: "BO"},
        {label: "光票托收", value: "CC"},
        {label: "国际保函", value: "GI"},
        {label: "国内保函", value: "NI"},
        {label: "海关保函", value: "HI"},
        {label: "国际保函通知", value: "GE"},
        {label: "国内保函通知", value: "NE"},
        {label: "结售汇", value: "JS"},
        {label: "万能交易", value: "MC"},
      ]
        }
    },
    watch:{
        'model.inr':{
			handler:function(newValue,oldValue){
				if(newValue != '' && newValue != null && newValue != 'undefined'){
					this.searchTable();
				}
			},
			// 强制立即执行回调
			immediate:true
		}
    },

    computed: {
    
      isPageDisabled() {
        if(!this.$route.path.toUpperCase().endsWith("PTYN")){
          console.log("$route---1-",this.$route)
          if　(this.type=="info") {
            return true
          }else if (this.type=="edit"){
            if (this.$route.query.maaFlg != "Y" && this.$route.query.zFlg != "Y"){
              console.log("$route----",this.$route)
              return true
            }
          }else if (this.type=="add"){
            return false
          }
          return false
        }else{
          if　(this.type=="info") {
            return true
          }else if (this.type=="edit"){
            if  ((this.$route.query.zhFlg=="Y" && this.$route.query.cwFlg=="Y")||(this.$route.query.zhFlg!="Y" && this.$route.query.cwFlg!="Y")||(this.$route.query.zhFlg!="Y" && this.$route.query.cwFlg=="Y" && this.$route.query.zFlg!="Y")){
              return true
            }
          }else if (this.type=="add"){
            return false
          }
          return false
        }
      },
    },

    methods:{
		// 重置表单数据
		resetFormFields(formName){
			this.$refs[formName].resetFields();
		},

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

		// 列表查询
		searchTable(){
            this.oit.objinr = this.model.inr;
			queryPtyOitByPage(this.oit)
				.then((res)=>{
					this.tableData = res.data.list;
					this.oit.total = res.data.total;
					this.oit.pageNum = res.data.pageNumber;
        			this.oit.pageSize = res.data.pageSize;
				})
				.catch((err)=>{
					this.$notify.error("查询失败!");
				});
		},

		// 【取消】按钮
		cancelOitDialog(){
			// 关闭弹框
            this.oitDialogFormVisible = false;
            this.oitDialog.inr = '';
            this.oitDialog.subtyp = '';
            this.oitDialog.subbus = '';
            this.oitDialog.inflev = '';
            this.oitDialog.inftxt = '';
			this.$refs['oitDialogForm'].resetFields();
		},

		// 【新增-确定】按钮
		addOitDialog(){
			this.$refs.oitDialogForm.validate((validated) => {
				if(validated){
                    this.loadingStatus = true;
                    this.oitDialog.objinr = this.model.inr;
                    addPtyOit(this.oitDialog)
                        .then((res)=>{
							if(res.respCode == 'AAAAAA'){
								this.$notify.success("保存成功!");
							} else {
								this.$notify.error(res.respMsg);
							}
                            // 关闭弹框
                            this.cancelOitDialog();
                            // 刷新列表
							this.searchTable();
							this.loadingStatus = false;
                        })
                        .catch((err)=>{
							this.loadingStatus = false;
                            this.$notify.error("保存失败!");
                        });
				} else {
					this.$notify.error({
						title: '失败',
						message: '请检查必输项！'
					});
				}
			})
        },
        
        // 【修改-确定】按钮
		editOitDialog(){
			this.$refs.oitDialogForm.validate((validated) => {
				if(validated){
                    this.loadingStatus = true;
                    this.oitDialog.objinr = this.model.inr;
                    editPtyOit(this.oitDialog)
                        .then((res)=>{
							if(res.respCode == 'AAAAAA'){
								this.$notify.success("保存成功!");
							} else {
								this.$notify.error(res.respMsg);
							}
                            // 关闭弹框
                            this.cancelOitDialog();
                            // 刷新列表
							this.searchTable();
							this.loadingStatus = false;
                        })
                        .catch((err)=>{
							this.loadingStatus = false;
                            this.$notify.error("保存失败!");
                        });
				} else {
					this.$notify.error({
						title: '失败',
						message: '请检查必输项！'
					});
				}
			})
		},

		// 【详情】按钮
		getOitInfoDialog(inr){
			// 开启弹窗
			this.oitDialogFormVisible = true;
			// 字段禁用
			this.fieldDisabled = true;
			// 确定按钮隐藏
			this.oitDialogAddBtnVisible = false;
            this.oitDialogEditBtnVisible = false;
            this.detailBtnShow = true;
			this.oitDialogFormTitle = '查看消息及停用信息';
			this.getOitInformation(inr);
        },
        
        // 【新增】按钮
		addOit(){
			this.fieldDisabled = false;
			this.subtypFieldDisabled = false;
			this.subbusFieldDisabled = true;
            this.oitDialogFormVisible = true;
			this.oitDialogAddBtnVisible = true;
            this.oitDialogEditBtnVisible = false;
            this.detailBtnShow = false;
			this.oitDialogFormTitle = '新增消息及停用信息';
        },

		// 【修改】按钮
		updateOitDialog(inr){
			this.fieldDisabled = false;
			this.subtypFieldDisabled = true;
			this.oitDialogFormVisible = true;
			this.oitDialogAddBtnVisible = false;
            this.oitDialogEditBtnVisible = true;
            this.detailBtnShow = false;
			this.oitDialogFormTitle = '修改消息及停用信息';
            this.getOitInformation(inr);
		},

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

		// 查看消息及停用信息
		getOitInformation(inr){
			this.oitDialog.inr = inr;
            getPtyOit(this.oitDialog)
                .then((res)=>{
					this.oitDialog = res.data;
					this.changeTyp();
                })
                .catch((err)=>{
                    this.$notify.error("查询失败!");
                });
		},

		// 删除消息及停用信息
		deleteOitDialogInfo(){
			this.oitDialog.inr = this.deleteOitInr;
            deletePtyOit(this.oitDialog)
                .then((res)=>{
					this.$notify.success("删除成功!");
                    this.deleteOitInr = null;
                    // 刷新列表
                    this.searchTable();
                })
                .catch((err)=>{
                    this.$notify.error("删除失败!");
                });
		},
		// change事件，控制 业务品种 是否禁用
		changeTyp(){
			if(this.oitDialog.subtyp == 'BUS' || this.oitDialog.subtyp == 'SET'){
				this.subbusFieldDisabled = false;
			} else {
				this.oitDialog.subbus = '';
				this.subbusFieldDisabled = true;
			}
		}

    }
}
</script>
<style lang="less" scoped>
.currentPage{
	.el-table--enable-row-hover .el-table__body tr:hover>td{
		background-color: #c694dc !important;
	}
}
</style>