DocpanDialog.vue

<template>
	<el-dialog v-dialogDrag :close="close" :title="title" :visible.sync="centerDialogVisible" center destroy-on-close width="60%" v-if="centerDialogVisible">
		<el-form :disabled="suppress" :model="dialog" :rules="formRules" label-width="120px" ref="form">
			<c-row>
				<c-col :span="12">
					<c-col>
						<el-form-item label="介质">
							<c-select dbCode="doceotCortyp" disabled v-model="dialog.cortyp"></c-select>
						</el-form-item>
					</c-col>
					<c-col>
						<el-form-item label="表单集合">
							<c-select dbCode="doceotCortyp" disabled v-model="dialog.cortyp"></c-select>
						</el-form-item>
					</c-col>
					<c-col v-if="title !== 'elcs.101.001.01'">
						<el-form-item>
							<c-col :span="13">
								<el-input disabled value="Original" />
							</c-col>
							<c-col :span="11">
								<el-input style="width: calc(100% - 5px); margin-left: 5px" v-model="dialog.apfcpy1" />
							</c-col>
						</el-form-item>
						<el-form-item>
							<c-col :span="13">
								<el-input disabled value="Customer Copy" />
							</c-col>
							<c-col :span="11">
								<el-input @change="customAddModify(dialog, 'apfcpy2')" style="width: calc(100% - 5px); margin-left: 5px" v-model="dialog.apfcpy2" />
							</c-col>
						</el-form-item>
						<el-form-item>
							<c-col :span="13">
								<el-input disabled value="File Copy" />
							</c-col>
							<c-col :span="11">
								<el-input style="width: calc(100% - 5px); margin-left: 5px" v-model="dialog.apfcpy3" />
							</c-col>
						</el-form-item>
						<el-form-item>
							<c-col :span="13">
								<el-input disabled value="Internal Copy" />
							</c-col>
							<c-col :span="11">
								<el-input style="width: calc(100% - 5px); margin-left: 5px" v-model="dialog.apfcpy4" />
							</c-col>
						</el-form-item>
					</c-col>
				</c-col>

				<c-col :span="12">
					<el-form-item label="发送至">
						<!-- <el-input disabled v-model="dialog.roladr" /> -->
						<c-select dbCode="payrol" disabled v-model="dialog.roladr">
						</c-select>
					</el-form-item>
					<el-form-item v-if="title === 'elcs.101.001.01'">
						<c-fullbox>
							<c-input @keyup.enter.native="
									showGridPromptDialog('docpan.doccur.rcv.pts.extkey')
								" v-model="dialog.rcv.pts.extkey" />
							<template slot="footer">
								<c-button icon="el-icon-search" size="small" type="primary"></c-button>
								<c-button size="small" type="primary"> 详情</c-button>
							</template>
						</c-fullbox>
					</el-form-item>
					<el-form-item label="BIC编码" v-else>
						<el-input v-model="dialog.rcv.pts.extkey" />
					</el-form-item>
					<el-form-item label="联行行号" v-if="
							title === 'elcs.101.001.01' ||
							(title !== 'elcs.101.001.01' && dialog.rcv.pts.bankno !== '')
						">
						<el-input v-model="dialog.rcv.pts.bankno" />
					</el-form-item>
					<el-form-item label-width="30px">
						<el-input :disabled="title !== 'elcs.101.001.01'" :rows="2" :value="
								title === 'elcs.101.001.01'
									? dialog.rcv.namelc
									: dialog.rcv.pts.jigomc
							" type="textarea" />
						<br/>
						<el-input :disabled="title === 'MT799'" :rows="2" :value="
								title === 'elcs.101.001.01'
									? dialog.rcv.adrelc
									: dialog.rcv.pts.dizzhii
							" type="textarea" />
					</el-form-item>
					<el-form-item label="参考号">
						<el-input disabled v-model="dialog.adrref" />
					</el-form-item>
					<el-form-item label="介质">
						<c-col :span="12">
							<c-select dbCode="doceotCortyp" disabled v-model="dialog.cortyp">
							</c-select>
						</c-col>
						<c-col :span="12">
							<c-select @change="customAddModify(dialog, 'docuil')" dbCode="payuil" disabled style="width: calc(100% - 5px); margin-left: 5px" v-model="dialog.docuil">
							</c-select>
						</c-col>
					</el-form-item>
				</c-col>

				<c-col :span="12" v-if="title !== 'MT799'">
					<el-form-item label="地址修改">
						<el-input :rows="4" type="textarea" v-model="dialog.adrblk" />
					</el-form-item>
				</c-col>
				<c-col :span="12" v-else>
					<el-form-item label="BIC编码">
						<el-input disabled v-model="dialog.adrbic" />
					</el-form-item>
					<el-form-item label="Authenticator">
						<el-input disabled v-model="dialog.adrbicaut" />
					</el-form-item>
					<el-form-item label="优先级">
						<el-input disabled v-model="dialog.msgpri" />
					</el-form-item>
				</c-col>
				<c-col :span="12">
					<el-form-item label-width="30px">
						<el-table :border="true" :data="dialogRcvPtyinftxtRows" empty-text=" " max-height="430px" size="mini" stripe>
							<el-table-column label="报文类型" min-width="100px" sortable></el-table-column>
							<el-table-column label="地址" min-width="90px" sortable></el-table-column>
							<el-table-column label="Authentication" min-width="130px" sortable>
							</el-table-column>
						</el-table>
					</el-form-item>
				</c-col>
				<c-col v-if="title !== 'MT799'">
					<el-form-item label="面函日期">
						<el-date-picker type="date" v-model="dialog.docdat">
						</el-date-picker>
					</el-form-item>
				</c-col>
				<c-col v-if="this.suppress !== true">
					<el-form-item label="Contact">
						<el-input v-model="dialog.ptcnam" />
					</el-form-item>
				</c-col>

				<c-col :span="24" v-if="this.suppress !== true">
					<c-fullbox>
						<el-form-item :label="title === 'MT799' ? 'Sender to Rec. information' : 'Sender to Rec. Information'" prop="addtxt">
							<div v-if="title === 'MT799'">
								<el-input :rows="10" disabled type="textarea" v-model="dialog.addtxt" />
							</div>
							<div v-else>
								<el-input :rows="10" type="textarea" v-model="dialog.addtxt" />
							</div>
						</el-form-item>
						<template slot="footer">
							<c-button icon="el-icon-more" size="mini" style="margin-left:5px"></c-button>
						</template>
					</c-fullbox>
				</c-col>
			</c-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<c-button @click="saveDialog" type="primary" v-if="!isDispaly">确 定</c-button>
				<!-- <c-button type="primary" @click="activateDialog" v-if="dialog.delflg == 'D'">应用</c-button>
                <c-button type="primary" @click="suppressDialog" v-else-if="dialog.lev == '1' || dialog.mliflg != ''">禁用</c-button>
                <c-button v-else type="primary" @click="activateDialog">删除</c-button> -->
				<el-button @click="close">取 消</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script>
import commonDepend from "~/mixin/commonDepend.js";

export default {
  inject: ["root"],
  mixins: [commonDepend],
  props: {
    docpanDialog: {
      type: Object,
      default: {}
    }
  },
  computed: {
    isDispaly() {
      return this.$store.state.Status.mode === "display";
    }
  },
  data() {
    return {
      dialog: {
        rcv: {
          pts: {},
          ptyinftxt: {}
        }
      },
      title: "详情",
      dialogRcvPtyinftxtRows: [],
      suppress: false,
      centerDialogVisible: false,
      formRules: {
        addtxt: [
          { validator: this.validateSpecialChars, trigger: "blur" },
          { validator: this.validateChineseChars, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    //初始化传值
    init() {
      this.dialog = this.docpanDialog;
    },
    validateSpecialChars(rule, value, callback) {
      const reg = /^[^\s`~!@#$%^&*()\-=_+[\]{}|;:'",.<>/?]+$/;
      if (!reg.test(value)) {
        callback(new Error("输入内容不允许包含特殊字符"));
      } else {
        callback();
      }
    },
    validateChineseChars(rule, value, callback) {
      const reg = /^[^\u4e00-\u9fa5\u3000-\u303f\uff00-\uffef]+$/; // 不包含中文字符和中文符号的正则表达式
      if (!reg.test(value)) {
        callback(new Error("输入内容不允许包含中文字符"));
      } else {
        callback();
      }
    },
    //确定
    saveDialog() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，执行提交操作
          this.close();
          this.dialog.addstr = this.dialog.addtxt;
          this.$emit("docpanQueryFunc", this.dialog);
        } else {
          // 表单验证未通过，阻止提交操作并显示错误提示
        }
      });
    },
    //应用/删除
    activateDialog() {
      this.suppress = false;
    },
    //禁用
    suppressDialog() {
      this.suppress = true;
    },
    //取消
    close() {
      this.centerDialogVisible = false;
    }
  }
};
</script>
<style lang="less" scoped>
.dialog-wrap {
  height: 400px;
  overflow: auto;
}

.el-dialog__header {
  height: 36px;

  .el-dialog__headerbtn {
    top: 10px;
  }
}

.dialog-footer {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px 0;
  display: flex;
  justify-content: center;
}
</style>