# staff-vue3

**Repository Path**: qinz/staff-vue3

## Basic Information

- **Project Name**: staff-vue3
- **Description**: Vue3中使用webcomponent
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-06-08
- **Last Updated**: 2023-03-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# bgy-staff-pick for vue3 Demo

[在线文档](https://npm.countrygarden.com.cn/-/web/detail/bgy-staff-pick)

### 安装

```
npm install bgy-staff-pick -S
```

### 使用

Vue入口文件 `main.ts`
```typescript
import { createApp } from "vue";

import App from "./App.vue";
import router from "./router";

// 导入公共组件, 内部提供的组件有 bgy-selection bgy-dialog bgy-staff-card bgy-org-card
import "bgy-staff-pick";

const app = createApp(App);

app.use(router);

app.mount("#app");
```

业务组件中使用
```typescript
<template>
  <bgy-selection
    :visible="visible"
    v-bind="state"
    @cancel="handleCancel"
    @confirm="handleConfirm"
  >
  </bgy-selection>
  
  <div class="center">
    <button @click="visible = true">选人控件</button>
  </div>

  <p>已选组织</p>
  <div class="viewer">
    <bgy-org-card
      v-for="item of selectedOrg"
      :key="item.orgNo"
      :data="item"
      removeable
      @remove="handleRemove"
    ></bgy-org-card>
  </div>

  <p>已选人员</p>
  <div class="viewer">
    <bgy-staff-card
      v-for="item of selectedStaff"
      :key="item.bip"
      :data="item"
      removeable
      @remove="handleRemove"
    >
    </bgy-staff-card>
  </div>
</template>

<script lang="ts" setup>
import type { Org, Staff } from "bgy-staff-pick/types/types";
import { ref, watch, reactive } from "vue";

// 是否展示
const visible = ref(false);
// 其他属性(由于属性较多，这里我使用 v-bind 收到一个对象里面了)
const state = reactive({
  // 是否允许多选
  allowMulti: true,
  // 是否可选离职人员
  allowSelectLeaveUser: true,
  // 是否允许全局选人
  allowAll: true,
  // 应用编码
  appCode: "app002",
  // 访问令牌
  token: "b9b9781e0dc2a5cb0148f215da25d2ae",
  // 体系分类
  sysType: ["01", "02", "03", "04"],
  // 使用用户
  currentUser: "lijunjie10",
  // 组件功能
  compFun: ["01", "02"],
  // 候选人列表
  waitUserList: [
    { bip: "zhongzhangpeng" },
    { bip: "zhaozhiyan01" },
    { bip: "1000122825" },
  ] as Array<Staff>,
  // 回填
  checkedObjectList: [] as Array<Org | Staff>,
  // 排除
  exceptObjectList: [] as Array<Org | Staff>,
});
// 已选组织
const selectedOrg = ref<Set<Org>>();
// 已选人员
const selectedStaff = ref<Set<Staff>>();

const handleCancel = () => {
  visible.value = false;
};

const handleRemove = ({ detail }: CustomEvent) => {
  if (detail.otype === "user") {
    selectedStaff.value?.delete(detail as Staff);
  } else if (detail.otype === "org") {
    selectedOrg.value?.delete(detail as Org);
  }
};

const handleConfirm = ({ detail }: CustomEvent) => {
  if (Array.isArray(detail.org)) {
    selectedOrg.value = new Set(detail.org);
  }
  if (Array.isArray(detail.staff)) {
    selectedStaff.value = new Set(detail.staff);
  }
  visible.value = false;
};

watch(
  [selectedOrg, selectedStaff],
  ([orgVal = [], staffVal = []]) => {
    // 先清空下回填数据
    state.checkedObjectList.length = 0;
    orgVal.forEach((item: Org) => {
      state.checkedObjectList.push(item);
    });
    staffVal.forEach((item: Staff) => {
      state.checkedObjectList.push(item);
    });
  },
  { deep: true }
);
</script>

<style>
.center {
  text-align: center;
}
.viewer {
  display: flex;
  flex-flow: row wrap;
}
.viewer bgy-staff-card,
.viewer bgy-org-card {
  width: 200px;
}
</style>
```

### 注意

    bgy-selection 标签的 attribute 只有一个属性 visible ，用于控制弹窗的显示/隐藏
    其他属性均为 property，注意 attribute 与 property 两者的区别

    以下 visible 为标签的 attribute
    <bgy-selection visible></bgy-selection>

    设置标签的 property 如下所示
    <bgy-selection visible appCode.prop="app01"></bgy-selection>

    同时设置多个 property 可绑定到一个对象上
    <bgy-selection visible v-bind.prop="property"></bgy-selection>

    const property = reactive({
      appCode: 'app01',
      token: 'b9b9781e0dc2a5cb0148f215da25d2ae'
    })