Tk.vue

<template>
	<div class="eibs-tab">
		<c-col :span="24">
			<c-col :span="12" style="display: flex;padding-right: 20px;">
				<div style="width: calc(100% - 80px);">
					<el-form-item :label="(model.didgrp.rec.mytype=='H'||model.didgrp.rec.mytype=='')?'货物描述': (model.didgrp.rec.mytype=='F'?'服务描述':'货物/服务描述')" prop="didgrp.blk.lcrgod">
						<c-mul-row-input disabled :cols="65" :rows="12" :autosize="{ minRows: 12, maxRows: 12}" placeholder="请输入货物描述" v-model="model.didgrp.blk.lcrgod">
						</c-mul-row-input>
					</el-form-item>
				</div>
				<div style="width: 60px;margin-left: 20px;display: flex;align-items: flex-start;flex-direction:column;">
					<div style="margin-top:10px;">
						<c-checkbox v-model="model.ditamep.hwmsupdate" class="checkbox-left" true-label="X" false-label="" @change="hwmsupdateChange">修改
						</c-checkbox>
					</div>
					<div style="margin-top:10px;">
						<el-button size="small" type="primary" @click="showDialog1()">历史
						</el-button>
					</div>
				</div>
			</c-col>
			<c-col :span="12" v-if="model.ditamep.hwmsupdate=='X'" style="display: flex;padding-left:20px;">
				<c-ptap-commons  :requiredExtkey="model.ditamep.hwmsupdate=='X'" :cols="65" :rows="12" :minRows="12" :maxRows="12" :model="model" :extCodes="['swiadd']" lastModel="lcrgod" :title="(model.didgrp.rec.mytype=='H'||model.didgrp.rec.mytype=='')?'货物描述修改': (model.didgrp.rec.mytype=='F'?'服务描述修改':'货物/服务描述修改')"></c-ptap-commons>
			</c-col>
		</c-col>

		<c-col :span="24">
			<c-col :span="12" style="display: flex;padding-right: 20px;">
				<div style="width: calc(100% - 80px);">
					<el-form-item label="单据要求" prop="didgrp.blk.lcrdoc">
						<c-mul-row-input disabled :cols="65" :rows="12" :autosize="{ minRows: 12, maxRows: 12}" placeholder="请输入单据要求" v-model="model.didgrp.blk.lcrdoc">
						</c-mul-row-input>
					</el-form-item>
				</div>
				<div style="width: 60px;margin-left: 20px;display: flex;align-items: flex-start;flex-direction:column">
					<div style="margin-top:10px;">
						<c-checkbox v-model="model.ditamep.djyqupdate" class="checkbox-left" true-label="X" false-label="" @change="djyqupdateChange">修改
						</c-checkbox>
					</div>
					<div style="margin-top:10px;">
						<el-button size="small" type="primary" @click="showDialog2()">历史
						</el-button>
					</div>
				</div>
			</c-col>
			<c-col :span="12" v-if="model.ditamep.djyqupdate=='X'" style="display: flex;padding-left:20px;">
				<c-ptap-commons :requiredExtkey="model.ditamep.djyqupdate=='X'" :cols="65" :rows="12" :minRows="12" :maxRows="12" :model="model" :extCodes="['swiadd']"  lastModel="lcrdoc" title="单据要求修改"></c-ptap-commons>
			</c-col>
		</c-col>

		<c-col :span="24">
			<c-col :span="12" style="display: flex;padding-right: 20px;">
				<div style="width: calc(100% - 80px);">
					<el-form-item label="附加条款" prop="didgrp.blk.adlcnd">
						<c-mul-row-input disabled :cols="65" :rows="12" :autosize="{ minRows: 12, maxRows: 12}" placeholder="请输入附加条款" v-model="model.didgrp.blk.adlcnd">
						</c-mul-row-input>
					</el-form-item>
				</div>
				<div style="width: 60px;margin-left: 20px;display: flex;align-items: flex-start;flex-direction:column">
					<div style="margin-top:10px;">
						<c-checkbox v-model="model.ditamep.fjtkupdate" class="checkbox-left" true-label="X" false-label="" @change="fjtkupdateChange">修改
						</c-checkbox>
					</div>
					<div style="margin-top:10px;">
						<el-button size="small" type="primary" @click="showDialog3()">历史
						</el-button>
					</div>
				</div>
			</c-col>
			<c-col :span="12" v-if="model.ditamep.fjtkupdate=='X'" style="display: flex;padding-left:20px;">
				<c-ptap-commons  :requiredExtkey="model.ditamep.fjtkupdate=='X'"  :cols="65" :rows="12" :minRows="12" :maxRows="12" :model="model" :extCodes="['swiadd']"  lastModel="adlcnd" title="附加条款修改"></c-ptap-commons>
			</c-col>
		</c-col>

		<c-col :span="24">
			<c-col :span="12" style="display: flex;padding-right: 20px;">
				<div style="width: calc(100% - 80px);">
					<el-form-item label="给付款、承兑、议付行的指示" prop="didgrp.blk.insbnk">
						<c-mul-row-input disabled :cols="65" :rows="12" :autosize="{ minRows: 12, maxRows: 12}" placeholder="请输入给付款、承兑、议付行的指示" v-model="model.didgrp.blk.insbnk">
						</c-mul-row-input>
					</el-form-item>
				</div>
				<div style="width: 60px;margin-left: 20px;display: flex;align-items: flex-start;flex-direction:column">
					<div style="margin-top:10px;">
						<c-checkbox v-model="model.ditamep.zsupdate" class="checkbox-left" true-label="X" false-label="" @change="zsupdateChange">修改
						</c-checkbox>
					</div>
					<div style="margin-top:10px;">
						<el-button size="small" type="primary" @click="showDialog4()">历史
						</el-button>
					</div>
				</div>
			</c-col>
			<c-col :span="12" v-if="model.ditamep.zsupdate=='X'" style="display: flex;padding-left:20px;">
				<c-ptap-commons  :requiredExtkey="model.ditamep.zsupdate=='X'"  :cols="65" :rows="12" :minRows="12" :maxRows="12" :model="model" :extCodes="['swiadd']"  lastModel="insbnk" title="给付款、承兑、议付行的指示修改"></c-ptap-commons>
			</c-col>
		</c-col>

		<!-- 货物描述修改历史弹窗 -->
		<el-dialog v-dialogDrag v-if="visible1" :visible="visible1" title="货物描述修改历史" width="50%" :before-close="handleClose1">
			<div style="text-align: center">
				<el-form-item label-width="0" prop="didgrp.blk.lcrgodame">
					<c-mul-row-input disabled :cols="50" :rows="999" :autosize="{ minRows:25, maxRows: 25}" v-model="model.didgrp.blk.lcrgodame">
					</c-mul-row-input>
				</el-form-item>
			</div>
		</el-dialog>

		<!-- 单据要求修改历史弹窗 -->
		<el-dialog v-dialogDrag v-if="visible2" :visible="visible2" title="单据要求修改历史" width="50%" :before-close="handleClose2">
			<div style="text-align: center">
				<el-form-item label-width="0" prop="didgrp.blk.lcrdocame">
					<c-mul-row-input disabled :cols="50" :rows="999" :autosize="{ minRows: 25, maxRows: 25}" placeholder="请输入单据要求" v-model="model.didgrp.blk.lcrdocame">
					</c-mul-row-input>
				</el-form-item>
			</div>
		</el-dialog>

		<!-- 附加条款修改历史弹窗 -->
		<el-dialog v-dialogDrag v-if="visible3" :visible="visible3" title="附加条款修改历史" width="50%" :before-close="handleClose3">
			<div style="text-align: center">
				<el-form-item label-width="0" prop="didgrp.blk.adlcndame">
					<c-mul-row-input disabled :cols="50" :rows="999" :autosize="{ minRows: 25, maxRows: 25}" placeholder="请输入附加条款" v-model="model.didgrp.blk.adlcndame">
					</c-mul-row-input>
				</el-form-item>
			</div>
		</el-dialog>

		<!-- 给付款、承兑、议付行的指示修改历史弹窗 -->
		<el-dialog v-dialogDrag v-if="visible4" :visible="visible4" title="给付款、承兑、议付行的指示修改历史" width="50%" :before-close="handleClose4">
			<div style="text-align: center">
				<el-form-item label-width="0" prop="didgrp.blk.insbnkame">
					<c-mul-row-input disabled :cols="50" :rows="999" :autosize="{ minRows: 25, maxRows: 25}" placeholder="请输入给付款、承兑、议付行的指示" v-model="model.didgrp.blk.insbnkame">
					</c-mul-row-input>
				</el-form-item>
			</div>
		</el-dialog>

	</div>
</template>
<script>
import event from "../event";
export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event],
  data() {
    return {
      visible1: false,
      visible2: false,
      visible3: false,
      visible4: false
    };
  },
  created() {},
  methods: {
    showDialog1() {
      this.visible1 = true;
    },
    handleClose1(done) {
      this.visible1 = false;
      done();
    },
    showDialog2() {
      this.visible2 = true;
    },
    handleClose2(done) {
      this.visible2 = false;
      done();
    },
    showDialog3() {
      this.visible3 = true;
    },
    handleClose3(done) {
      this.visible3 = false;
      done();
    },
    showDialog4() {
      this.visible4 = true;
    },
    handleClose4(done) {
      this.visible4 = false;
      done();
    }
  }
};
</script>
<style>
.custom-box-wrap {
  display: flex;
  justify-content: flex-start;
}
</style>