drp-ui/src/views/input-dialog/index.vue

<script>
export default {
  name: "DrInputDialog",
  props: [
    "value",
    "title",
    "type",
    "dataMapping",
    "source",
    "placeholder",
    "clearable",
    "disabled",
    "readonly",
    "size",
  ],
  components: {
    InputDialog: () => import("./components/index.vue"),
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    handleAsyncOpenDialog() {
      this.$nextTick(() => {
        const { setVisible } = this.$refs.InputDialogFef;
        setVisible(true);
      });
    },
    handleUpdateSource(prop) {
      const { source, dataMapping } = this.$props;
      for (let key in dataMapping) {
        source[key] = prop[dataMapping[key]];
      }
      this.$emit("update:source", source);
      console.log("type", this.$props.type);
      console.log("dataMapping", dataMapping);
      console.log("prop", prop);
      console.log("source", this.$props.source);
    },
  },
  created() {
    console.log("prop", this.$props);
  },
  mounted() {},
  destroyed() {},
};
</script>
<template>
  <el-input
    v-model="value"
    :placeholder="placeholder"
    :clearable="clearable"
    :disabled="disabled"
    :readonly="readonly"
    :size="size"
    style="width: 100%; cursor: pointer"
    @click.native.stop="handleAsyncOpenDialog"
  >
    <template #suffix>
      <el-icon class="el-icon-thumb"></el-icon>
      <input-dialog
        ref="InputDialogFef"
        :title="title"
        :type="type"
        @confirm="handleUpdateSource"
      ></input-dialog>
    </template>
  </el-input>
</template>
<style scoped>
::v-deep.el-input .el-input__suffix {
  display: flex;
  align-items: center;
}
</style>