order-ui-pc/src/components/globalComponents/project-manager/main.vue

<template>
  <div class="project-manager">
    <el-select
      class="p-slesct"
      v-model="value"
      multiple
      filterable
      remote
      clearable
      collapse-tags
      :multiple-limit="1"
      reserve-keyword
      :size="size || 'medium'"
      placeholder="项目经理"
      :disabled="disabled"
      :remote-method="remoteMethod"
      :loading="selectLoading"
      @change="selectChange"
    >
      <el-option
        v-for="(item, index) in options"
        :key="item.id + index"
        :label="item.nickname"
        :value="item.id + ''"
        :disabled="item.status + '' !== '1'"
      />
    </el-select>
    <el-button :size="size || 'medium'" class="p-btn" @click="changeMe" :disabled="loading">选当前账号</el-button>
  </div>
</template>

<script>
import asyncRequest from "@/apis/components/project-manager";
import resToken from "@/mixins/resToken";
import { mapGetters } from "vuex";

export default {
  name: "ProjectManager",
  mixins: [resToken],
  computed: {
    ...mapGetters(["currentCompany"]),
    infoPowers() {
      return this.$store.getters.userInfo;
    }
  },
  props: ["size", "value", "isDetail", "disabled", "names"],
  /**
   * 属性集合
   * @param {String}        size             : 组件大小            非必填
   * @param {Array}         value            : 选中值              必填
   * @param {String}        placeholder      : 提示信息            非必填
   * @param {Boolean}       isDetail          : 是否是详情逻辑       必填
   * @param {Boolean}       disabled         : 是否禁用            必填
   * @param {String}        names            : 选中值label         展示详情必填
   * @param {String}        type             : 数据类型            非必填 1是平台供应商0非平台供应商
   */
  /**
   * 事件集合
   * @searchChange             : 选中值变化调用   抛出选中数据
   */
  data() {
    return {
      loading: false,
      options: [],
      selectLoading: false,
      searchName: "",
      formValue: {
        page: 1,
        size: 99999,
        status: ""
      }
    };
  },
  watch: {
    names: function(val, old) {
      this.searchName = val;
      if (this.isDetail && this.searchName) {
        this.remoteMethod(this.searchName);
      }
    },
    isDetail: function(val, old) {
      if (val && this.searchName) {
        this.remoteMethod(this.searchName);
      }
    }
  },
  mounted() {
    this.options = [];
    this.selectLoading = false;
  },
  methods: {
    async changeMe() {
      if (this.loading) return;
      this.loading = true;
      const id = this.infoPowers.id ?? "";
      const userName = this.infoPowers.nickname ?? "";

      if (userName === "") {
        this.loading = false;
        this.$message.warning("当前账号异常，请重新登录!");
        return;
      }

      await this.getList(userName);
      let index = this.options.findIndex(s => s.id === id);
      if (index === -1) {
        this.loading = false;
        this.$message.warning("当前业务公司下，未找到当前账号!");
        return;
      }
      const model = {
        id: this.options[index].id + "",
        label: this.options[index].nickname
      };

      // console.log(model);
      this.$emit("searchChange", model);
      this.loading = false;
    },
    async selectChange(e) {
      if (e && e.length > 0) {
        const index = this.options.findIndex(v => v.id + "" === e[0]);
        if (index !== -1) {
          const model = {
            id: this.options[index].id + "",
            label: this.options[index].nickname
          };
          this.$emit("searchChange", model);
        } else {
          this.$emit("searchChange", {});
        }
      } else {
        this.$emit("searchChange", {});
      }
    },
    async remoteMethod(query) {
      if (query !== "") {
        await this.getList(query);
      } else {
        this.options = [];
      }
    },
    async getList(query) {
      if (this.selectLoading) return;
      this.selectLoading = true;
      this.options = [];

      const { code, data, message } = await asyncRequest.list({
        ...this.formValue,
        nickname: query,
        companyNo: this.currentCompany
      });

      if (code === 0) {
        const { list } = data;
        this.options = list;
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(message);
      }
      this.selectLoading = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.project-manager {
  width: 100%;
  .p-btn {
    width: 80px;
    float: left;

    padding-left: 0;
    padding-right: 0;
    font-size: 12px;
    background-color: #f5f7fa;
    color: #909399;
    border: 1px solid #dcdfe6;
    border-left-width: 0;
  }
  .p-slesct {
    float: left;
    width: calc(100% - 80px);
  }
}
</style>