BlkTextarea.vue

<template>
  <div>
    <!-- Description of Goods -->
    <c-col :span="19">
      <el-form-item :label="blkMsg.title" :prop="blkMsg.dataUrl">
        <c-input
          type="textarea"
          :rows="blkMsg.rows ? blkMsg.rows : 20"
          v-model="blkTextarea"
          :maxlength="blkMsg.maxlength ? blkMsg.maxlength : 52000"
          show-word-limit
          :placeholder="`请输入${blkMsg.title}`"
        ></c-input>
      </el-form-item>
    </c-col>
    <c-col :span="2" class="BlkTextarea_button">
      <c-button
        size="small"
        type="primary"
        icon="el-icon-search"
        @click="
          showGridPromptDialog(rulePath, columns, shadow, modelUrl, isCover,'doxpDialog')
        "
      >
        ...
      </c-button>
    </c-col>
  </div>
</template>
<script>
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";
import _ from "~/utils/Lodash.js";

/**
 *
 * @param {String} rulePath  请求路径
 * @param {String} columns 自定义需要展示列
 * @param {String} shadow 自定义列后需要保留的影藏字段
 * @param {String} modelUrl 非机构双击后需要回填的字段路劲,k:对应列，value:应用model路劲,如{TXT:'ledgrp.blk.lcrgod'}
 * @param {String} isCover 非机构双击后需要回填的字段值是覆盖还是叠加，部分覆盖值为对象，false为叠加，如{TXT:false}，k值为modelUrl的k，如全部覆盖则isCover='T',如全部叠加则isCover='',默认全部覆盖
 */

export default {
  inject: ["root"],
  props: {
    model: {
      type: Object,
      default: undefined,
    },
    blkMsg: {
      //大字段信息
      type: Object,
      default: function () {
        return {
          title: "",
          dataUrl: "", //字段所在model路劲
          rows: 20,
          maxlength: 2000,
        };
      },
    },

    rulePath: {
      type: String,
      default: "",
    },
    columns: {
      type: String,
      default:
        '1 2 "EXTKEY" 410 50\r\n2 1 "NAM" 410 50\r\nTXT\r\nUIL\r\n5 3 "VER" 410 50\r\nETGEXTKEY\r\nP COLORED TRUE\r\nP VERTLINES TRUE\r\nP HORZLINES TRUE\r\nP MULTISELECT FALSE\r\nP COLUMNSIZING TRUE',
    },
    shadow: {
      type: Object,
      default: () => {
        return { TXT: 3 };
      },
    },
    modelUrl: {
      type: Object,
      default: function () {
        let obj = { TXT: this.blkMsg.dataUrl };
        return obj;
      },
    },
    isCover: {
      type: Object,
      default: undefined,
    },
  },

  mixins: [commonProcess],
  data() {
    return {
      blkTextarea: _.get(this.model, this.blkMsg.dataUrl, ""),
    };
  },

  watch: {
    getBlk: {
      handler(val, oldVal) {
        this.blkTextarea = _.get(this.model, this.blkMsg.dataUrl, "");
        // console.log("blkTextarea is:", this.blkTextarea);
      },
      immediate: false,
    },

    blkTextarea: {
      handler(val, oldVal) {
        _.set(this.model, this.blkMsg.dataUrl, val);
        // console.log("blkTextarea is 2:", this.blkTextarea);
      },
      immediate: false,
    },
  },
  computed: {
    getBlk() {
      return _.get(this.model, this.blkMsg.dataUrl, "");
    },
  },

  created: function () {},
};
</script>
<style>
.BlkTextarea_button {
  margin: 20px 0 0 0px;
}
</style>