封装

src/views/Public/Ptap1.vue

+<template>
+  <div class="eibs-tab">
+    <c-col :span="20">
+      <el-form-item
+        :label="`${argadr.title}`"
+        :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`)
+          "
+        ></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>
+
+      <c-col :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>
+
+  </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,
+    },
+
+  },
+  data() {
+    return {
+      data: [],
+    };
+  },
+  watch: {},
+  methods: {
+    onSeainf(data) {
+      this.$emit("onSeainf", data);
+    },
+
+    onAplpDet() {
+      this.$emit("onAplpDet");
+    },
+  },
+
+  created: function () {},
+};
+</script>
+<style>
+.searchButton {
+  text-align: center;
+  /* margin: 0 10px; */
+  margin-right: 10px;
+  padding: 0 10px;
+}
+.detailsButton {
+  margin-left: 10px;
+  
+}
+</style>