lilishop-ui/manager/src/views/my-components/lili/member-choose.vue

<template>
  <div class="member-choose">
    <Button @click="userModalVisible=true" :icon="icon">{{text}}</Button>
    <span @click="clearSelectData" class="clear">清空已选</span>
    <Collapse simple class="collapse">
      <Panel name="1">
        已选择
        <span class="select-count">{{selectUsers.length}}</span> 人
        <p slot="content">
          <Tag
            v-for="(item, i) in selectUsers"
            :key="i"
            :name="item.id"
            color="default"
            closable
            @on-close="handleCancelUser"
          >{{item.username}}
          </Tag>
        </p>
      </Panel>
    </Collapse>
    <Drawer title="选择用户" closable v-model="userModalVisible" width="800" draggable>
      <Form ref="searchUserForm" :model="searchUserForm" inline :label-width="55">
        <Form-item label="用户名" prop="username">
          <Input
            type="text"
            v-model="searchUserForm.username"
            clearable
            placeholder="请输入用户名"
            style="width: 200px"
          />
        </Form-item>
        <Form-item style="margin-left:-35px;" class="br">
          <Button @click="handleSearchUser" type="primary" icon="ios-search">搜索</Button>
          <Button @click="handleResetUser">重置</Button>
        </Form-item>
      </Form>
      <Table
        :loading="userLoading"
        border
        :columns="userColumns"
        :data="userData"
        :height="height"
        ref="userTable"
      ></Table>
      <Row type="flex" justify="end" style="margin: 10px 0;">
        <Page
          :current="searchUserForm.pageNumber"
          :total="totalUser"
          :page-size="searchUserForm.pageSize"
          @on-change="changeUserPage"
          @on-page-size-change="changeUserPageSize"
          :page-size-opts="[10,20,50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
      <div class="my-drawer-footer">
        已选择
        <span class="select-count">{{selectUsers.length}}</span> 人
        <Button @click="clearSelectData" style="margin-left:10px">清空已选</Button>
        <Button @click="userModalVisible=false" type="primary" style="margin-left:10px">关闭</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
  import {getMember} from "@/api/member";

  export default {
    name: "userChoose",
    props: {
      text: {
        type: String,
        default: "选择会员"
      },
      icon: {
        type: String,
        default: "md-person-add"
      }
    },
    data() {
      return {
        height: 500, // 表格高度
        userLoading: true, // 加载状态
        userModalVisible: false, // modal显隐
        selectUsers: [], // 已选用户
        searchUserForm: { // 请求参数
          username: "",
          pageNumber: 1, // 当前页数
          pageSize: 10, // 页面大小
          sort: "createTime", // 默认排序字段
          order: "desc" // 默认排序方式
        },
        userColumns: [ // 表头
          {
            type: "index",
            width: 60,
            align: "center"
          },
          {
            title: "用户名",
            key: "username",
            minWidth: 140,
            sortable: true
          },
          {
            title: "头像",
            key: "face",
            width: 80,
            align: "center",
            render: (h, params) => {
              return h("Avatar", {
                props: {
                  src: params.row.face
                }
              });
            }
          },
          {
            title: "手机",
            key: "mobile",
            width: 125,
            sortable: true
          },
          {
            title: "状态",
            key: "status",
            align: "center",
            width: 120,
            render: (h, params) => {
              if (params.row.delFlag == 0) {
                return h("div", [
                  h("Badge", {
                    props: {
                      status: "success",
                      text: "正常启用"
                    }
                  })
                ]);
              } else if (params.row.delFlag == -1) {
                return h("div", [
                  h("Badge", {
                    props: {
                      status: "error",
                      text: "禁用"
                    }
                  })
                ]);
              }
            }
          },
          {
            title: "创建时间",
            key: "createTime",
            sortable: true,
            sortType: "desc",
            width: 170
          },
          {
            title: "操作",
            key: "action",
            width: 130,
            align: "center",
            fixed: "right",
            render: (h, params) => {
              let select;
              this.selectUsers.forEach(item => {
                if (item.id === params.row.id) {
                  select = params.row
                }
              });

              if (select) {
                return h("div", [
                  h(
                  "Button",
                  {
                    props: {
                      type: "info",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        this.chooseCancel(params.row);
                      }
                    }
                  },
                  "取消选择"
                  )
                ]);
              } else {
                return h("div", [
                  h(
                  "Button",
                  {
                    props: {
                      type: "info",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        this.chooseUser(params.row);
                      }
                    }
                  },
                  "选择"
                  )
                ]);
              }
            }
          }
        ],
        userData: [], // 用户数据
        totalUser: 0 // 数量
      };
    },
    methods: {
      changeUserPage(v) {
        this.searchUserForm.pageNumber = v;
        this.getUserDataList();
      },
      changeUserPageSize(v) {
        this.searchUserForm.pageSize = v;
        this.getUserDataList();
      },
      getUserDataList() {
        this.userLoading = true;
        getMember(this.searchUserForm).then(res => {
          this.userLoading = false;
          if (res.success) {
            this.userData = res.result.records;
            this.totalUser = res.result.total;
          }
        });
      },
      handleSearchUser() {
        this.searchUserForm.pageNumber = 1;
        this.searchUserForm.pageSize = 10;
        this.getUserDataList();
      },
      handleResetUser() {
        this.$refs.searchUserForm.resetFields();
        this.searchUserForm.pageNumber = 1;
        this.searchUserForm.pageSize = 9;
        this.$refs.dep.clearSelect();
        this.searchUserForm.departmentId = "";
        // 重新加载数据
        this.getUserDataList();
      },
      setData(v) {
        this.selectUsers = v;
        this.$emit("on-change", this.selectUsers);
      },
      chooseCancel(v){
        let _index;
        this.selectUsers.forEach((e,index) => {
          if (v.id == e.id) {
            _index = index;
          }
        });

        if(_index||_index==0){
          this.selectUsers.splice(_index,1);
          this.$emit("on-change", this.selectUsers);
        }
      },
      chooseUser(v) {
        // 去重
        let that = this;
        let flag = true;
        this.selectUsers.forEach(e => {
          if (v.id == e.id) {
            flag = false;
          }
        });
        if (flag) {
          let u = {
            id: v.id,
            username: v.username
          };
          this.selectUsers.push(u);
          this.$emit("on-change", this.selectUsers);
        }
      },
      clearSelectData() {
        this.selectUsers = [];
        this.$emit("on-change", this.selectUsers);
      },
      handleCancelUser(e, id) {
        // 删除所选用户
        let newArray = [];
        this.selectUsers.forEach(e => {
          if (id != e.id) {
            newArray.push(e);
          }
        });
        this.selectUsers = newArray;
        this.$emit("on-change", this.selectUsers);
        this.$Message.success("删除所选用户成功");
      }
    },
    created() {
      // 计算高度
      this.height = Number(document.documentElement.clientHeight - 230);
      this.getUserDataList();
    }
  };
</script>

<style lang="scss" scoped>
  .member-choose {
    .clear {
      font-size: 12px;
      margin-left: 15px;
      color: #40a9ff;
      cursor: pointer;
    }

    .collapse {
      font-size: 12px;
      margin-top: 15px;
      width: 500px;
    }

    .select-count {
      font-weight: 600;
      color: #40a9ff;
    }
  }

  .my-drawer-footer {
    z-index: 10;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
</style>