# staff-vue2

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

## Basic Information

- **Project Name**: staff-vue2
- **Description**: Vue2中使用WebComponents
- **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 vue2 Demo

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

### 安装

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

### 使用

Vue入口文件 `main.ts`
```typescript
import Vue from 'vue'
import VueCompositionAPI, { createApp, h } from '@vue/composition-api'

// 导入公共组件
import 'bgy-staff-pick'

import App from './App.vue'
import router from './router'

Vue.use(VueCompositionAPI)

const app = createApp({
  router,
  render: () => h(App)
})

app.mount('#app')
```

业务组件中使用
```typescript
<template>
  <div class="home">
    <bgy-selection
      :visible="visible"
      v-bind.prop="state"
      @cancel="handleCancel"
      @confirm="handleConfirm"
    ></bgy-selection>

    <div class="center">
      <button @click="handlePicker">选人控件</button>
    </div>

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

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

    <p>传给组件的属性</p>
    <pre>
{{ JSON.stringify(state, null, 2) }}</pre>
  </div>
</template>
<script lang="ts">
import type { Org, Staff } from "bgy-staff-pick/types/types"
import PropertyGetter from "./PropertyGetter.vue"

export default {
  components: {
    PropertyGetter
  },
  data() {
    return {
      state: {
        // 是否允许多选
        allowMulti: true,
        // 是否可选离职人员
        allowSelectLeaveUser: true,
        // 是否允许全局选人
        allowAll: true,
        // 应用编码
        appCode: "app001",
        // 访问令牌
        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>,
      },
      // 是否展示
      visible: false,
      // 已选组织
      selectedOrg: [] as Org[],
      // 已选人员
      selectedStaff: [] as Staff[],
    }
  },
  watch: {
    'selectedOrg.length': 'handleWatch',
    'selectedStaff.length': 'handleWatch',
  },
  methods: {
    handlePicker() {
      this.visible = !this.visible;
    },
    handleCancel() {
      this.visible = false;
    },
    handleRemove({ detail }: CustomEvent) {
      if (detail.otype === "user") {
        const index = this.selectedStaff.findIndex((e: Staff) => e.bip === detail.bip)
        this.selectedStaff.splice(index, 1);
      } else if (detail.otype === "org") {
        const index = this.selectedOrg.findIndex((e: Org) => e.orgNo === detail.orgNo)
        this.selectedOrg.splice(index, 1);
      }
    },
    handleConfirm({ detail }: CustomEvent) {
      this.selectedOrg.length = 0
      this.selectedStaff.length = 0
      if (Array.isArray(detail.org)) {
        this.selectedOrg.push(...detail.org)
      }
      if (Array.isArray(detail.staff)) {
        this.selectedStaff.push(...detail.staff)
      }
    },
    handleWatch() {
      // 先清空下回填数据
      this.state.checkedObjectList.length = 0;
      this.selectedOrg.forEach((item: Org) => {
        this.state.checkedObjectList.push(item);
      });
      this.selectedStaff.forEach((item: Staff) => {
        this.state.checkedObjectList.push(item);
      });
    }
  }
}
</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>

    data() {
      return {
        property: {
          appCode: 'app01',
          token: 'b9b9781e0dc2a5cb0148f215da25d2ae'
        }
      }
    }