PtapWithRole.vue

<template>
  <div class="eibs-tab">

    <c-col :span="17" offset="9">
      <el-form-item
              :label="`${argadr.fieldtit}`"
              label-position="left"
              label-width="120px"
              :prop="`${argadr.grp}.rec.${argadr.field}`"
      >
        <c-select
                v-model="model[argadr.grp].rec[argadr.field]"
                :placeholder="'Select Party'"
        ></c-select>
      </el-form-item>
    </c-col>

    <c-col :span="17" v-if="!noRef" offset="7">
      <el-form-item
              :label="`${argadr.title}`"
        :prop="`${argadr.grp}.${argadr.rol}.pts.ref`"
      >
        <c-input
          v-model="model[argadr.grp][argadr.rol].pts.ref"
          :placeholder="'请输入' + argadr.title + '参考号'"
        ></c-input>
      </el-form-item>
    </c-col>

    <c-col :span="20">
      <el-form-item
        :prop="`${argadr.grp}.${argadr.rol}.pts.extkey`"
        style="width: 100%"
      >
        <c-input
          style="width: 95%"
          v-model="model[argadr.grp][argadr.rol].pts.extkey"
          :placeholder="'请输入' + argadr.title + 'Extkey'"
          @keyup.enter.native="
            showGridPromptDialog(`${argadr.grp}.${argadr.rol}.pts.extkey`)
          "
          @change="valueChange"
        ></c-input>
      </el-form-item>
    </c-col>

    <c-col :span="1">
      <!-- <el-form-item label="" label-width="5px"> -->
      <c-button
        style="margin:0 10px 0 0;padding: 0 10px;"
        class="searchButton"
        size="small"
        type="primary"
        icon="el-icon-search"
        @click="onSeainf(`${argadr.grp}.${argadr.rol}.pts.extkey`)"
      ></c-button>
    </c-col>
    <c-col :span="3" style="text-align: right">
      <c-button
        style="margin:0 0"
        class="detailsButton"
        size="small"
        type="primary"
        @click="onAplpDet"
      >
        {{ $t('buttons.details') }}
      </c-button>
      <!-- </el-form-item> -->
    </c-col>

    <template v-if="!onlySearch">
      <c-col v-if="isAdrblk" :span="24">
        <el-form-item
          label=""
          :prop="`${argadr.grp}.${argadr.rol}.pts.adrblk`"
        >
          <c-input
            type="textarea"
            :rows="4"
            v-model="model[argadr.grp][argadr.rol].pts.adrblk"
            maxlength="35"
            show-word-limit
            placeholder="请输入名称地址"
            :disabled="disabled"
          ></c-input>
        </el-form-item>
      </c-col>
      <template v-else>
        <c-col :span="24">
          <el-form-item
            :label="`${argadr.title}名称`"
            :prop="`${argadr.grp}.${argadr.rol}.namelc`"
          >
            <c-input
              type="textarea"
              v-model="model[argadr.grp][argadr.rol].namelc"
              :placeholder="'请输入' + argadr.title + '名称'"
              :disabled="disabled"
              :rows="2"
              maxlength="35"
              show-word-limit
            ></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item
            :label="`${argadr.title}地址`"
            :prop="`${argadr.grp}.${argadr.rol}.adrelc`"
          >
            <c-input
              type="textarea"
              :rows="2"
              v-model="model[argadr.grp][argadr.rol].adrelc"
              :placeholder="'请输入' + argadr.title + '地址'"
              :disabled="disabled"
              maxlength="35"
              show-word-limit
            ></c-input>
          </el-form-item>
        </c-col>
      </template>
    </template>
  </div>
</template>
<script>
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";
// 机构信息模块
export default {
  inject: ["root"],
  mixins: [commonProcess],

  props: {
    model: {
      type: Object,
      default: undefined,
    },
    argadr: {
      type: Object,
      default: function () {
        return {
          title: "", //角色名称
          rol: "", //角色
          grp: "", //所属模块
        };
      },
    },
    disabled: {
      //名称地址是否灰显
      type: Boolean,
      default: false,
    },

    isAdrblk: {
      //名称地址是否为大字段
      type: Boolean,
      default: true,
    },
    onlySearch: {
      //是否只展示extkey
      type: Boolean,
      default: false,
    },
    noRef: {
      //无需参考号
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      data: [],
    };
  },
  watch: {},
  methods: {
    onSeainf(data) {
      this.$emit("onSeainf", data);
    },

    onAplpDet() {
      this.$emit("onAplpDet");
    },

    valueChange() {
      if (this.onlySearch) return;
      // this.showGridPromptDialog(
      //   `${this.argadr.grp}.${this.argadr.rol}.pts.extkey`
      // );
    },
  },

  created: function () {},
};
</script>
<style>
.searchButton {
  text-align: center;
  /* margin: 0 10px; */
  margin-right: 10px;
  padding: 0 10px;
}
.detailsButton {
  margin-left: 10px;
  
}
    .el-form-item__label-wrap{
        margin-left: 0px !important;
    }
</style>