[add] 选择用户组件

2023-09-01 16:53:04 +08:00
parent 59ed913bae
commit 18c682e175
6 changed files with 538 additions and 17 deletions
@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <div class="user-organ-wrap">
+      <a-input
+        class="user-input"
+        :placeholder="placeholder"
+        :value="checkedValue"
+        @click="selectClick"
+      >
+      </a-input>
+      <a-button type="primary" class="button-box" @click="selectClick">
+        {{$t('userSelect.select')}}
+      </a-button>
+    </div>
+    <user-select-modal v-bind="$attrs" ref="selectModal" @change="selectChange" @nameChange="nameChange"></user-select-modal>
+  </div>
+</template>
+
+<script>
+import UserSelectModal from './UserSelectModal'
+
+export default {
+  name: 'UserSelection',
+  components: { UserSelectModal },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    },
+    // 名字字符串
+    nameStr: {
+      type: String,
+      default: ''
+    },
+    // 修改的字段名
+    filedName: {
+      type: String,
+      default: ''
+    }
+  },
+  watch: {
+    nameStr: {
+      immediate: true,
+      handler (val) {
+        this.checkedValue = val
+      }
+    }
+  },
+  data () {
+    return {
+      checkedValue: ''
+    }
+  },
+  methods: {
+    selectClick () {
+      this.$refs.selectModal.open(this.value)
+    },
+    selectChange (ids) {
+      this.$emit('change', ids)
+    },
+    nameChange (value) {
+      this.checkedValue = value
+      this.$emit('nameChange', value, this.filedName)
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
+
+<style scoped lang="less">
+.user-organ-wrap {
+  width: 100%;
+  position: relative;
+  .user-input {
+    width: calc(100% - 70px);
+  }
+  .button-box {
+    height: 38px;
+    margin-left: 5px;
+    position: absolute;
+    top: 0;
+  }
+}
+</style>