LetterDialog.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>
				<el-col>
          <el-form-item label="Address Amend" prop="adrblk">
            <c-mul-row-input  type="textarea" :rows="7" :cols="35" :autosize="{ minRows: 7, maxRows: 7}" v-model="dialog.adrblk" @change="customAddModify(dialog, 'adrblk')"/>
          </el-form-item>
				</el-col>
			</c-row>
      <c-row>
				<el-col>
          <el-form-item label="文本附言" prop="addstr">
            <c-mul-row-input  :autosize="{minRows: 20,	maxRows: 20}" :rows="20" :cols="90" :max-length="21*90" v-model="dialog.addtxt" @change="customAddModify(dialog, 'addtxt')"/>
          </el-form-item>
				</el-col>
			</c-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<c-button @click="saveDialog" type="primary" v-if="!isDispaly">确 定</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: {
        addstr: [
          // { validator: this.validateAddstr, trigger: ["blur", "change"] }
        ]
      }
    };
  },
  methods: {
    //初始化传值
    init() {
      this.dialog = this.docpanDialog;
    },
    //确定
    saveDialog() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，执行提交操作
          this.close();
          this.dialog.addstr = this.dialog.addtxt;
          this.$emit("docpanQueryFunc", this.dialog);
        } else {
          // 表单验证未通过，阻止提交操作并显示错误提示
        }
      });
    },
    //取消
    close() {
      this.centerDialogVisible = false;
    },
    //附言不要超过150
    validateAddstr(rule, value, callback) {
      if (this.dialog.addtxt !== '' && this.dialog.addtxt.length > 150) {
        callback(new Error('输入字符长度超过150!'));
      } else if(this.dialog.addtxt !== '' && this.dialog.addtxt.split('\n').length > 3){
        callback(new Error('输入字符不超过3行!'));
      }else {
        callback()
      }
    },
  }
};
</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>