Ptap4.vue

<template>
	<div>
		<el-card class="box-card" :class="[isShowCard ? '' : 'is-show-card']" >
			<c-col :span="24">
				<el-form-item 
					:label="label.labelExtkey" 
					:prop="`${argadr.grp}.${argadr.rol}.pts.extkey`" 
					style="width: 100%"
				>
					<c-fullbox>
						<c-input 
							v-model.trim="model[argadr.grp][argadr.rol].pts.extkey" 
							placeholder="" 
							maxlength="16" 
							:disabled="disabledExtkey" 
							clearable 
							@keyup.enter.native="showPtapDialog()" 
							@clear="clear"
						>
						</c-input>
						<template slot="footer">
							<c-button 
								style="margin:0 10px 0 10px;padding: 0 12px;" 
								size="small" 
								type="primary" 
								icon="el-icon-search" 
								:disabled="disabledExtkey" 
								@click="showPtapDialog()"
							>
							</c-button>
							<el-button 
								style="margin:0 0" 
								size="small" 
								type="primary" 
								:disabled="disabledDetail"
							>
								Details
							</el-button>
						</template>
					</c-fullbox>
				</el-form-item>
			</c-col>
			<c-col :span="24">
				<el-form-item 
					:label="label.labelAdrblk" 
					:prop="`${argadr.grp}.${argadr.rol}.adrblk`"
				>
					<c-mul-row-input
						type="textarea" 
						:rows="2"
						:cols="70"
						:autosize="{minRows: 1,	maxRows: 2}"
						:charmod="charmod"
						:showTip="false"
						v-model.trim="model[argadr.grp][argadr.rol].adrblk"
						placeholder=""
						:disabled="disabledAdrblk || isDisabled"
					>
					</c-mul-row-input>
				</el-form-item>
			</c-col>
		</el-card>
		<!-- 弹窗 -->
		<el-dialog
			v-dialogDrag
			width="64%"
			:visible.sync="dialogTableVisible"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:show-close="false"
			v-if="dialogTableVisible"
			:modal-append-to-body="false"
			:append-to-body="true"
		>
			<div slot="title" style="font-size: 16px;color: black;position: realtive;">
				{{ dialogTitle }}
				<!-- 关闭按钮 -->
				<div class="close-btn" @click="handleCloseDialogTable"><i class="el-icon-close"></i></div>
			</div>
			<div v-if="!tableLoading && tableList.length === 0">暂无数据</div>
			<div v-else style="width: 100%;height: 100%;">
				<el-table id='tableRef' height="calc(100% - 32px)" style="width: 100%;" v-loading="tableLoading" :data="tableList" @row-dblclick="dbClickRow" :before-close="beforeClose">
					<el-table-column v-for="(item,key) in tableColumn" :key="key" :prop="item.prop" :render-header="renderheader" :label="item.label">
					</el-table-column>
				</el-table>
				<el-pagination
					class="eContainer-pagination"
					layout="prev, pager, next, jumper, ->, sizes, total"
					:page-sizes="pageSizes"
					:page-size="pageSize"
					:current-page="currentPage"
					:total="total"
					@size-change="sizeChange"
					@current-change="currentChange"
				></el-pagination>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import { columnMap } from "./ptapColumn.js";
import { getPtaTableDtat, getPtsptaByInr } from "~/service/business/common";
import commonFunctions from '~/mixin/commonFunctions.js';
import commonDepend from '~/mixin/commonDepend.js'
export default {
	inject: ["root"],
	mixins: [commonFunctions,commonDepend],
  props: {
		model: {
      type: Object,
      default: () => {}
		},
		argadr: {
      type: Object,
      default: function() {
        return {
          rol: "", //角色
          grp: "" //所属模块
        };
      }
		},
		label: {
      type: Object,
      default: function() {
        return {
					labelExtkey: "", //Extkey标题
          labelAdrblk: ""//Adrblk标题
        };
      }
		},
		charmod: {
      type: Number,
      default: 0
		},
		isShowCard: {
			type: Boolean,
			default: true
		},
    disabledExtkey: {
      //extkey是否灰显(true:extkey处灰显)
      type: Boolean,
      default: false
    },
    disabledDetail: {
      //details是否灰显(true:details处灰显)
      type: Boolean,
      default: false
    },
    disabledAdrblk: {
      //adrblk是否灰显(true:adrblk处灰显)
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
			dialogTitle: "", // 弹框标题
      dialogTableVisible: false, // 控制弹框的展示和隐藏
      tableLoading: false,
      total: 0,
      isDisabled: false,
      currentPage: 1, // 页数
      pageSizes: [5, 10, 20, 30, 40, 50, 100],
      pageSize: 5, // 条数
      tableList: [],
			tableColumn: [],
    };
  },
  watch: {},
  methods: {
		// 弹框
		async showPtapDialog() {
			if (this.tableLoading || this.dialogTableVisible) {
				return
			}
      const value = this.model[this.argadr.grp][this.argadr.rol].pts.extkey;
      // 分层取值
      await this.getTableData(value);
      if (this.total == 1) {
					this.dbClickRow(this.tableList[0]);
      } else {
				// 设置弹框标题
				this.dialogTitle = `${this.label.labelExtkey}详情`;
				this.dialogTableVisible = true;
				this.tableColumn = columnMap['C'];
				this.$nextTick(()=>{
					this.root.$refs['modelForm'].validateField([`${this.argadr.grp}.${this.argadr.rol}.pts.extkey`]);
				})
      }
		},
		// 清除
		clear() {
			this.$emit("clear");
		},
		// 关闭弹框
		handleCloseDialogTable () {
			this.dialogTableVisible = false;
			this.$nextTick(()=>{
				this.root.$refs['modelForm'].validateField([`${this.argadr.grp}.${this.argadr.rol}.pts.extkey`]);
			})
		},
		async dbClickRow(row, column, event) {
      let params = {
        inr: row.ptainr,
        rol: this.argadr.rol
      };
			const response = await getPtsptaByInr(params, this.moduleRouter());
      if (response.respCode == SUCCESS) {
				// 赋值
        this.model[this.argadr.grp][this.argadr.rol].pts.nam = response.data.cnnam
        this.model[this.argadr.grp][this.argadr.rol].pts.extkey = row.ptaobjkey
				// 此处为了回填数据时回调
				this.$emit('handleChange',{
					rowData: row,
        })
        this.isDisabled = true
				this.$nextTick(()=>{
					this.root.$refs['modelForm'].validateField([`${this.argadr.grp}.${this.argadr.rol}.pts.extkey`]);
				})
			}
      this.dialogTableVisible = false;
		},
		// 获取弹框内的table数据
    async getTableData(value) {
			return new Promise(async (resolve) => {
				this.tableLoading = true;
				this.tableList = [];
				// 获取table的表格数据
				let params = {
					ptytyp: this.ptytyp,
					extkey: value || "",
					bchinr: this.bchinr,
					pageNum: this.currentPage,
					pageSize: this.pageSize
        };
				const loading = this.loading();
				const res = await getPtaTableDtat(params, this.moduleRouter());
				loading.close();
				if (res.respCode == SUCCESS) {
					if (res.data && res.data.list) {
						this.total = res.data.total;
						this.tableList = res.data.list.map(it => ({
							...it,
						}));
						resolve(this.tableList)
					}
				}
				this.tableLoading = false; //接口掉完变成false
			})
		},
  },
};
</script>
<style scoped lang="less">
.box-card {
	margin-bottom: 10px;
	/deep/ .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
		margin-bottom: 10px;
	}
	/deep/ .el-card__body {
		padding: 10px 10px 10px 0px;
	}
}
.is-show-card {
	border: none!important;
	box-shadow: none!important;
	margin-bottom: 0!important;
	/deep/ .el-card__body {
		padding: 0!important;
	}
}
</style>