[add] 增加选人组件

src/components/SelectUserField.vue

@@ -0,0 +1,233 @@
+<template>
+  <div>
+    <van-field
+      v-model="selectedDataNames"
+      :label="label"
+      :placeholder="$t('clickSelect') + label"
+      readonly
+      rows="1"
+      autosize
+      type="textarea"
+      @click="handleSelect"
+    >
+
+    </van-field>
+    <van-popup class="history-list-popup" v-model="isShow" position="right" :style="{ width: '100%', height: '100%' }" >
+      <!--    增加一个标题-->
+      <custom-header :title="$t('selectUser')" :leftArrow="true" :handle-left="handleLeft"></custom-header>
+
+      <select-user
+        ref="evaluatePersonSelectedList"
+        :selected-data="value"
+        :filter-data="filterData"
+        @selected-change="selectedChange"
+        @selected-change-name="selectedChangeName"
+        @cancel="hide()"
+        v-bind="$attrs"
+        :readonly="readonly"
+      ></select-user>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import SelectUser from './SelectUser'
+import CustomHeader from './CustomHeader'
+export default {
+  name: 'SelectUserField',
+  components: { SelectUser, CustomHeader },
+  props: {
+    // 选中的多个id 以逗号“,”拼接
+    value: {
+      type: String,
+      required: true,
+      default: () => {
+        return ''
+      }
+    },
+    // 一些其他的查询参数
+    filterData: {
+      type: Object,
+      required: false,
+      default: () => {
+        return {}
+      }
+    },
+    readonly: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    checkedNames: {
+      type: String,
+      required: false,
+      default: () => {
+        return ''
+      }
+    },
+    label: {
+      type: String,
+      required: false,
+      default: '人员'
+    },
+    fieldName: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  watch: {
+    checkedNames: {
+      immediate: true,
+      // deep: true,
+      handler (val) {
+        this.selectedDataNames = val
+      }
+    }
+  },
+  data () {
+    return {
+      isShow: false,
+      selectedDataNames: ''
+    }
+  },
+  methods: {
+    handleSelect () {
+      if (this.readonly) {
+        return
+      }
+      this.isShow = true
+      this.$nextTick(() => {
+        this.$refs.evaluatePersonSelectedList.initData()
+        this.$refs.evaluatePersonSelectedList.getListData()
+      })
+    },
+    handleLeft () {
+      this.hide()
+    },
+    hide () {
+      this.isShow = false
+    },
+    // 选择人员组件 选择后返回的方法
+    selectedChange (value) {
+      this.$emit('select', value)
+      this.hide()
+    },
+    selectedChangeName (value) {
+      this.selectedDataNames = value
+      this.$emit('selectNameChange', value, this.fieldName)
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'select'
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+
+.history-list-popup{
+  background: @global-bg;
+  display: flex;
+  flex-direction: column;
+}
+.van-list{
+  padding: @pad-base;
+  flex: 1;
+  overflow: auto;
+}
+.item-box .item-title.full-width .title{
+  width: 100%;
+}
+// 底部按钮
+.bottom-justify-div{
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  .van-button{
+    padding: 0 @pad-base;
+  }
+}
+// 中间内容
+.item-box{
+  background: #FFFFFF;
+  padding: @pad-base;
+  & + .item-box{
+    margin-top: 0.24rem;
+  }
+
+  // 左滑后 样式的变化
+  &.item-box-has-swipe{
+    border-radius: 0.1rem 0 0 0.1rem;
+    .item-state{
+      border-radius: 0 0 0 0.1rem;
+    }
+  }
+
+  .van-checkbox{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    /deep/.van-checkbox__label{
+      flex: 1;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-left: 0;
+    }
+  }
+  .left-img{
+    display: flex;
+    flex-direction: row;
+    flex-basis: 1.5rem;
+    .van-image{
+      width: 1.2rem;
+      height: 1.2rem;
+      margin: 0 0.24rem;
+    }
+  }
+
+  .right-content{
+    width: 0;
+    flex: 1;
+    .title{
+      width: 3.05rem;
+      font-weight: bold;
+    }
+    .item-title{
+      font-size: 0.28rem;
+      text-align: left;
+      display: flex;
+      align-items: center;
+      span {
+        display: inline-block;
+        text-align: left;
+      }
+
+    }
+    .item-content{
+      padding: 0.2rem 0 0;
+      span {
+        display: flex;
+        align-items: baseline;
+        color: @font-color;
+        font-size: 0.22rem;
+        text-align: left;
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+    }
+  }
+}
+
+.history-btn{
+  padding: 0 @pad-base;
+
+}
+//.van-cell{
+//  padding: 0.27rem 0!important;
+//}
+
+</style>