templateStx.vue

<template>
	<div>
    <c-button style="margin: 0 0 0 10px; padding: 1px 1px" type="primary" size="small" :disabled="disabledButton" icon="el-icon-more" @click="showCommonDialog()"></c-button>
		<!-- 弹窗 -->
		<el-dialog v-dialogDrag width="80%" :visible.sync="dialogTableVisible" title="报文模版" destroy-on-close v-if="dialogTableVisible">
			<div v-if="!loading && tableList.length === 0">暂无数据</div>
			<div v-else style="width: 100%;height: 100%;">
				<el-table height="calc(100% - 32px)" :data="tableList" @row-dblclick="dbClickRow" >
					<el-table-column v-for="(item,key) in tableColumn" :key="key" :prop="item.prop" :label="item.label">
					</el-table-column>
				</el-table>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { getLcTxmBlock } from "~/service/business/common"
import commonDepend from '~/mixin/commonDepend.js'
import Api from "~/service/Api"
import _ from 'lodash'
export default {
	inject: ["root"],
	mixins: [commonDepend],
  props: {
    model: {
      type: Object,
      default: () => {}
    },
    extCodes:{
			type: Array,
			default: ()=>[]
		},
		lastModel:{
			type: String,
			default: ''
		},
    inifrm:{
			type: String,
			default: ''
		},
		isRules:{
			type: Boolean,
			default: true
		},
		//按钮和输入框同时灰显
		disabledButton: {
			type: Boolean,
			default: false
		},
		charmod: {
			type:Number,
			default: 0
		},
		isLeavl:{
			type: Boolean,
			default: true
		},
		dis:{
			type:Boolean,
			default:false
		},
		requiredExtkey:{
			type:Boolean,
			default:false
		},
		uil:{
			type:String,
			default: ''
		},
    trntyp:{
			type:String,
			default: ''
		},
    inifrm:{
      type:String,
      default:'',
    },
		title:String,
		cols: { type: Number, default: 1 },
		rows: { type: Number, default: 1 },
		minRows: { type: Number, default: 4 },
		maxRows: { type: Number, default: 4 },
	},
	computed:{
		// 额外字段处理成字符串
    formatExtCodesToStr() {
      if (this.extCodes && this.extCodes.length > 0) {
        return this.extCodes.join('.') + '.'
      } else {
        return ''
      }
		},
		modifySet(){
			let extCodes = this.extCodes || []
      return [...extCodes]
		},
		// 简化字段写法
    formatCodes () {
      let extCodes = this.extCodes || []
      return [...extCodes, this.lastModel]
    },
    // extkey的计算属性
    modelExtkey: {
      get() {
        let codesList = this.formatCodes
        return _.get(this.model, codesList)
      },
      set(val) {
        let codesList = this.formatCodes
        _.set(this.model, codesList, val)
      }
    },
	},
  data() {
    return {
      dialogTableVisible: false,
      tableList: [],
			loading: true,
			markText:'',
			canUseRow: this.rows,
      tableColumn: [ 
				{ prop: "nam", label: "名称" },
				{ prop: "swttxt",label: "Text"},
				{ prop: "extkey", label: "Text Module" },
        { prop: "ptyextkey", label: "BIC" },
			],
    };
  },
  watch:{
    modelExtkey(val,oldval){
      if(!val){
        this.markText = ''
      }else{
        this.markText = val
      }
    }
  },

  methods: {
    showCommonDialog() {
      this.getTableData();
    },
    async getTableData() {
      this.tableList = []
      if(!this.model.fremsg.othmsg.pts.extkey){
         this.$notify.error({ title: '错误', message: '请选择或输入收报行！'});
          return;
      }
			this.dialogTableVisible = true;
      this.loading = true;
      let params = {
				ptyextkey:  this.model.fremsg.othmsg.pts.extkey ,
        trntyp: this.inifrm == 'BPDFRE' ? 'FP' : this.inifrm.substr(0,2),
        dfuflg: this.model[this.trntyp + 'grp'].rec.dfuflg ? this.model[this.trntyp + 'grp'].rec.dfuflg : ''
      };
      const res = await Api.post('/manager/stx/queryTemp', params);
      if (res.respCode == SUCCESS) {
        if (res.data) {
					this.tableList = res.data;
        }
      }
      this.loading = false;
    },
    //回填数据
    dbClickRow(row) {
			this.customAddModify(_.get(this.model,this.modifySet),`${this.lastModel}`)
      if(!this.markText){
        this.markText = row.swttxt
      }else{
        this.markText = this.markText + '\n' + row.swttxt
      }
      _.set(this.model,[...this.formatCodes],this.markText) ;
      this.$emit('handelChange')
			this.dialogTableVisible = false;
		},
		changeExtkey(val){
			this.customAddModify(_.get(this.model,this.modifySet),`${this.lastModel}`)
			this.markText = val
			if(this.isLeavl){
				this.canUseRow = this.markText ? this.rows - this.markText.split('\n').length : this.rows
			}
			this.$emit('handelChange')
			
		}
  }
};
</script>

<style scoped lang="less">
::v-deep .el-dialog__body {
	height: calc(100% - 55px)
}
.el-table .cell {
  white-space: pre-wrap;
}
</style>