MTP2.0_WEB/src/common/components/searchUser/index.vue

<template>
  <!--选择用户-->
  <Drawer title="选择用户" placement="right" :class="[position === 'top' ? 'top486' : 'delistingBottom']" @cancel="cancel">
    <a-spin :spinning="loading">
      <div class="listed">
        <a-form class="inlineForm dialogForm">
          <a-input-search placeholder="搜索用户名称" class="searchFriendInput noSuffixInput" enter-button
            v-model:value="searchValue" @change="searchUser">
            <template #prefix>
              <SearchOutlined />
            </template>
          </a-input-search>
          <div class="formBar ant-checkbox-group commonCheckboxGroup whitebgCheckbox">
            <!-- <a-checkbox-group class="commonCheckboxGroup"> -->
            <div class="ant-checkbox-wrapper" style="width: 100%">
              <a-checkbox-group v-model:value="selectedUser" style="width: 100%">
                <div class="item" v-for="(item, index) in userList" :key="index + '11'">
                  <a-checkbox :value="item.userid">
                    <span class="txt">{{ item.userid }} {{ item.username }}</span>
                  </a-checkbox>
                </div>
              </a-checkbox-group>
            </div>
            <!-- </a-checkbox-group> -->
          </div>
          <a-row :gutter="24">
            <a-col :span="24" class="fixedBtns">
              <a-form-item class="btnCenter">
                <a-button class="listedBtn" @click="submit">确定</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-spin>
  </Drawer>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, computed } from 'vue';
import Drawer from '@/common/components/drawer/index.vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import { QueryWrSearchUserRsp } from '@/services/go/wrtrade/interface';
import { queryWrSearchUser } from '@/services/go/wrtrade';
import { message } from 'ant-design-vue';
import { timerInterceptor } from '@/@next/utils/timer'

export default defineComponent({
  emits: ['update:visible', 'update:selectedValue'],
  components: {
    Drawer,
    SearchOutlined
  },
  props: {
    position: {
      type: String,
      default: 'top',
    },
    selectedValue: {
      type: Array as PropType<number[]>,
      default: [],
    },
  },
  setup(props, context) {
    const loading = ref<boolean>(false);
    const searchValue = ref<string>('');
    const userList = ref<QueryWrSearchUserRsp[]>([]);

    const selectedUser = computed({
      get: () => props.selectedValue,
      set: (val) => context.emit('update:selectedValue', val)
    })

    // 查询用户
    const searchUser = timerInterceptor.setDebounce(() => {
      userList.value = [];
      selectedUser.value = [];

      if (searchValue.value) {
        loading.value = true;
        queryWrSearchUser({ username: searchValue.value })
          .then((res) => {
            userList.value = res;
          })
          .catch((err: string) => message.error(err))
          .finally(() => {
            loading.value = false;
          })
      }
    }, 500)

    const submit = () => {
      if (selectedUser.value.length) {
        cancel();
      } else {
        message.warn('请选择用户');
      }
    }

    const cancel = () => {
      context.emit('update:visible', false);
    }

    return {
      loading,
      userList,
      selectedUser,
      cancel,
      submit,
      searchValue,
      searchUser,
    };
  },
});
</script>

<style lang="less" scoped>
.listed {
  flex: 1;
  padding: 18px 20px 0;

  .formBar {
    height: calc(100% - 120px);
    padding: 0 20px 0 13px;
    margin-top: 16px;
    background: @m-grey63;
    border: 1px solid @m-black45;

    .item {
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid @m-black45;
      font-size: 16px;
      color: @m-white6;
    }
  }
}

.listedBtn {
  width: 120px;
  height: 30px;
  line-height: 30px;
  background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
  border-radius: 3px;
  color: @m-white0;
  font-size: 14px;
  text-align: center;
  border: 0;

  &:hover {
    background: linear-gradient(0deg, @m-blue0-hover 0%, @m-blue2-hover 100%);
    color: @m-white0-hover;
  }
}

.ant-checkbox-group.commonCheckboxGroup {
  .ant-checkbox-wrapper {
    span.txt {
      color: @m-white11;
    }
  }
}
</style>