提交 7ec4fdee 编写于 作者: RedPig97's avatar RedPig97

update: 组织选择

上级 ef8611f8
.app-org-picker { .app-login-org {
height: 40px;
width: 100%; width: 100%;
.ivu-dropdown { .ivu-select {
height: 100%;
width: 100%; width: 100%;
} }
.app-org-picker__empty { .ivu-select-selection {
height: 100%;
width: 100%; width: 100%;
font-size: 16px; display: flex;
text-align: center; align-items: center;
color: #dbdbdb;
padding: 5px 0;
} }
} }
\ No newline at end of file
<template> <template>
<div class="app-org-picker"> <div :class="[model.sysCss, 'app-login-org']" :style="containerStyle">
<dropdown @on-click="orgSelect" @on-visible-change="visibleChange"> <Select v-model="curKey">
<Input :value="getSelectedOrgName" placeholder="请选择部门" readonly :icon="iconClass" /> <Option v-for="(item, index) in items" :value="item.value" :key="item.value">{{ item.label }}</Option>
<dropdown-menu slot="list"> </Select>
<dropdown-item
:class="{ 'is-active': Object.is(item.srforgsectorid, getSelectedOrgName) }"
:name="item.srforgsectorid"
v-for="(item, index) in selectedOrgArray"
:key="index"
>
{{ item.srforgsectorname }}
</dropdown-item>
<div class="app-org-picker__empty" v-show="!selectedOrgArray.length">暂无数据</div>
</dropdown-menu>
</dropdown>
</div> </div>
</template> </template>
<script lang='ts'> <script lang='ts'>
import { Vue, Component, Inject, Prop } from 'vue-property-decorator'; import { PanelFieldModel } from '@/model/panel-detail';
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({}) @Component({})
export default class AppAuthOrgPicker extends Vue { export default class AppLoginOrg extends Vue {
/** /**
* 输入值 * 名称
* *
* @type {*} * @type {*}
* @memberof AppAuthOrgPicker * @memberof AppLoginOrg
*/
@Prop() public value!: string;
/**
* 默认数据来源模式
*
* @type {string}
* @memberof AppAuthOrgPicker
*
*/ */
public selectMode: 'REMOTE' | 'LOCAL' = 'LOCAL'; @Prop() public name!: string;
/** /**
* 选中组织部门id * 输入值
* *
* @type {string} * @type {*}
* @memberof AppAuthOrgPicker * @memberof AppLoginOrg
*/ */
public selectedOrgId: string = ''; @Prop() public value!: string;
/** /**
* 图标名称 * 模型
* *
* @type {boolean} * @type {*}
* @memberof AppAuthOrgPicker * @memberof AppLoginOrg
*/ */
public iconClass: string = 'ios-arrow-down'; @Prop() public model!: PanelFieldModel;
/** /**
* 选中组织部门名称 * 当前值
* *
* @type {string} * @type {string}
* @memberof AppAuthOrgPicker * @memberof AppLoginOrg
*/ */
get getSelectedOrgName() { get curKey() {
if (this.value) { if (this.value) {
const selectedValue = this.selectedOrgArray.find((item: any) => { return this.value;
return item.srforgsectorid == this.value; } else {
}); return '';
if (selectedValue) {
return selectedValue.srforgsectorname;
}
} }
} }
set curKey(value: string) {
this.$emit('valueChange', { name: this.name, value: value });
}
/** /**
* 组织部门名称数组 * 组织部门名称数组
* *
* @type {Array<any>} * @type {Array<any>}
* @memberof AppAuthOrgPicker * @memberof AppLoginOrg
*/ */
public selectedOrgArray: Array<any> = []; public items: Array<any> = [];
/** /**
* 组件初始化数据,vue生命周期 * 容器样式
* *
* @memberof AppAuthOrgPicker * @type {any}
* @memberof AppLoginInput
*/ */
public created() { public containerStyle: any = null;
this.getOrgData();
}
/** /**
* 选择组织部门回调 * 组件初始化数据,vue生命周期
* *
* @memberof AppAuthOrgPicker * @memberof AppLoginOrg
*/ */
public orgSelect(data: string) { public created() {
if (Object.is(data, this.selectedOrgId)) { this.getOrgData();
return; if (this.model) {
this.containerStyle = this.model.getElementStyle();
} }
let item: any = this.selectedOrgArray.find((_item: any) => Object.is(_item.srforgsectorid, data));
this.$emit('valueChange', { value: item.srforgsectorid });
}
/**
* 下拉框打开或收起回调
*
* @memberof AppAuthOrgPicker
*/
visibleChange(data: boolean) {
this.iconClass = data ? 'ios-arrow-up' : 'ios-arrow-down';
} }
/** /**
* 获取数据 * 获取数据
* *
* @memberof AppAuthOrgPicker * @memberof AppLoginOrg
*/ */
public async getOrgData() { public async getOrgData() {
// todo // todo
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册