Skip to content

M
mes-ui
Commit 29d1b26b authored by 周远喜's avatar 周远喜
Browse files
Options

用户选择控件开发。

parent 2c01c61e
Hide whitespace changes
Inline Side-by-side
Showing with 269 additions and 62 deletions
assets/css/base.less
View file @ 29d1b26b
...@@ -15,6 +15,25 @@ html body { ...@@ -15,6 +15,25 @@ html body {
ul,li{ ul,li{
list-style: none; list-style: none;
} }
div::-webkit-scrollbar{
width:10px;
height:10px;
/**/
}
div::-webkit-scrollbar-track{
background: rgb(239, 239, 239);
border-radius:2px;
}
div::-webkit-scrollbar-thumb{
background:rgba(38,128,235,0.5);
border-radius:10px;
}
div::-webkit-scrollbar-thumb:hover{
background: rgba(38,128,235,0.8);
}
div::-webkit-scrollbar-corner{
background: rgba(38,128,235,1);
}
/*flex*/ /*flex*/
.flex{ .flex{
display: flex; display: flex;
...@@ -23,6 +42,9 @@ ul,li{ ...@@ -23,6 +42,9 @@ ul,li{
.fc-m{ .fc-m{
justify-content: center; justify-content: center;
} }
.fa-m{
align-items: center;
}
.fc-e{ .fc-e{
justify-content: flex-end; justify-content: flex-end;
} }
......
components/page/userSelect.vue
View file @ 29d1b26b
<template> <template>
<Select <div>
:placeholder="placeholder" <div v-if="theme=='list'" class="flex fd userSelect">
v-model="name" <div class="fg1 users">
@on-change="change" <dl v-for="(g,i) in group">
:multiple="multiple" <dt :class="{checked:g.opened}" class="flex fc-b">
:departmentId="departmentId" <div class="ib fg">
clearable <Checkbox v-model="g.checked" @on-change="checkAll(g,i)">
filterable <span class="ml10">{{g.departmentTitle}}</span>
> </Checkbox>
<Option <!-- <span class="ml20">(<span v-text="g.children | vvv"></span>/{{g.children.length}}人)</span></div> -->
v-for="item in dic" <span class="ml20">({{g.children.length}}人)</span>
:value="item.value" </div>
:key="item.value" <a class="op" @click="toggle(i)">
:label="item.label" <Icon :type="g.opened?'ios-arrow-up':'ios-arrow-down'" size="24" />
> </a>
<div> </dt>
<Icon :type="item.gender == 1 ? 'ios-man' : 'ios-woman'" /> <dd
{{ item.label }}(<span style="color:#c3c3c3">{{ item.cardNo }}</span v-show="g.opened"
>) <br /><span style="color:#c3c3c3">{{ item.departmentTitle }}</span> v-for="(li,j) in g.children"
@click="checkItem(i,j,li)"
:class="{checked:li.checked}"
>{{li.userName}}</dd>
</dl>
</div>
<div class="footer flex">
<div v-width="50" class="flex fa-m">
<span> 已选项</span>
</div>
<dl class="fg">
<dd v-for="(li,i) in checkedItems">
<div class="flex">
<span class="fg">
{{li.userName}}
</span>
<a>
X
</a>
</div>
</dd>
</dl>
</div> </div>
</Option> </div>
</Select>
<Select
v-else
:placeholder="placeholder"
v-model="name"
@on-change="change"
:multiple="multiple"
:departmentId="departmentId"
clearable
filterable
>
<Option v-for="item in dic" :value="item.value" :key="item.value" :label="item.label">
<div>
<Icon :type="item.gender == 1 ? 'ios-man' : 'ios-woman'" />
{{ item.label }}(
<span style="color:#c3c3c3">{{ item.cardNo }}</span>)
<br />
<span style="color:#c3c3c3">{{ item.departmentTitle }}</span>
</div>
</Option>
</Select>
</div>
</template> </template>
<script> <script>
export default { export default {
model: { model: {
prop: 'value', prop: "value",
event: 'on-change' event: "on-change"
}, },
data() { data() {
return { return {
name: this.value, name: this.value,
data: [], data: [],
departId: '' departId: "",
} group: []
};
}, },
created() { created() {
// let url = `${systemUrl}/user/getfordispatch_x` // let url = `${systemUrl}/user/getfordispatch_x`
// this.$api.get(url).then((r) => { // this.$api.get(url).then((r) => {
// this.data = r.result // this.data = r.result
// }) // })
this.getselectuser() this.getselectuser();
}, },
props: { props: {
value: [String, Number, Array], value: [String, Number, Array],
placeholder: { placeholder: {
type: String, type: String,
default: '请选择人员' default: "请选择人员"
}, },
multiple: { multiple: {
type: Boolean, type: Boolean,
default: false default: false
}, },
theme: {
type: String,
default: "select"
},
type: { type: {
type: Number, type: Number,
default: 0 default: 0
...@@ -60,87 +108,224 @@ export default { ...@@ -60,87 +108,224 @@ export default {
type: Number, type: Number,
default: 0 default: 0
}, },
roleTitle:{ roleTitle: {
type: String, type: String,
default: '' default: ""
} }
}, },
methods: { methods: {
change(event) { change(event) {
// console.log(event) // console.log(event)
this.$emit('on-change', event) this.$emit("on-change", event);
}, },
// 加载人员 // 加载人员
getselectuser(id) { getselectuser(id) {
let url = `${systemUrl}/user/getselectuser` let url = `${systemUrl}/user/getselectuser`;
this.$api this.$api
.post(url, { .post(url, {
// pageIndex: 1, // pageIndex: 1,
departmentId: id, departmentId: id,
type: this.type, type: this.type,
roleTitle:this.roleTitle, roleTitle: this.roleTitle
// pageSize: 0 // pageSize: 0
}) })
.then((r) => { .then(r => {
this.data = r.result this.data = r.result;
}) this.departmentGroup();
});
},
departmentGroup() {
var group = [];
group = this.$u.group(this.data, u => {
return u.departmentId;
});
var deps = [];
group.map((u, i) => {
deps.push({
departmentTitle: u[0].departmentTitle,
children: u,
opened: (i = 0),
checked: false
});
});
this.group = deps;
},
toggle(i) {
this.group[i].opened = !this.group[i].opened;
// this.$set(this.group,i,this.group[i])
},
checkItem(i, j, item) {
item.checked = !item.checked;
this.group[i][j] = item;
this.$set(this.group, i, this.group[i]);
},
checkAll(item,i){
item.children.map(u=>{
u.checked=item.checked;
})
this.$set(this.group,i,this.group[i]);
}, },
//获取所有的选中项 //获取所有的选中项
getSelectItems() { getSelectItems() {
var items = [] var items = [];
if (!this.multiple) { if (!this.multiple) {
//单选时返回信息 //单选时返回信息
var item1 = this.dic.filter((u) => u.value == this.value) var item1 = this.dic.filter(u => u.value == this.value);
if (item1 && item1[0]) { if (item1 && item1[0]) {
items.push(item1[0]) items.push(item1[0]);
} }
} else { } else {
//复选时返回 //复选时返回
this.value.forEach((v) => { this.value.forEach(v => {
var item = this.dic.filter((u) => u.value == v) var item = this.dic.filter(u => u.value == v);
if (item && item[0]) { if (item && item[0]) {
items.push(item[0]) items.push(item[0]);
} }
}) });
} }
return items return items;
}, },
//获取所有选中项的名称 //获取所有选中项的名称
getSelectNames() { getSelectNames() {
var names = [] var names = [];
this.getSelectItems().forEach((v) => { this.getSelectItems().forEach(v => {
names.push(v.label) names.push(v.label);
}) });
return names return names;
} }
}, },
computed: { computed: {
dic() { dic() {
let result = [] let result = [];
this.data.forEach((u) => { this.data.forEach(u => {
// result.push({ // result.push({
// value: u.id, // value: u.id,
// label: u.userName // label: u.userName
// }) // })
;(u.value = u.id), (u.label = u.userName) (u.value = u.id), (u.label = u.userName);
result.push(u) result.push(u);
}) });
return result return result;
},
checkedItems() {
var items = [];
this.group.map(u => {
u.children.map(l => {
if (l.checked) {
items.push(l);
}
});
});
return items;
}
},
filters: {
vvv: lis => {
return 3;
// return lis.filter(u=>{
// return u.checked==true
// }).lenght;
} }
}, },
watch: { watch: {
value: { value: {
handler(v, o) { handler(v, o) {
this.name = v this.name = v;
}, },
deep: true deep: true
}, },
departmentId: { departmentId: {
handler(v, o) { handler(v, o) {
this.getselectuser(v) this.getselectuser(v);
}, },
deep: true deep: true
} }
} }
} };
</script> </script>
<style lang="less">
.userSelect {
.users {
width: 100%;
border: 1px solid #2680eb;
max-height: 420px;
overflow: auto;
font-size: 14px;
}
dl {
margin-bottom: 2px;
dt,
dd {
list-style: none;
padding: 0 15px;
}
dt {
width: 100%;
background: rgba(38, 128, 235, 0.1);
height: 48px;
font-weight: bold;
line-height: 48px;
color: rgba(81, 90, 110, 1);
a.op {
height: 26px;
width: 26px;
text-align: center;
display: inline-block;
padding-top: -15px;
line-height: 100%;
margin-top: 12px;
}
a.op:hover {
color: white;
background: rgba(38, 128, 235, 1.5);
border-radius: 4px;
}
}
dt.checked {
background: rgba(38, 128, 235);
color: white;
a.op {
color: white;
}
a.op:hover {
background: white;
color: rgba(38, 128, 235);
}
}
dd {
min-width: 120px;
line-height: 32px;
height: 36px;
border-radius: 18px;
display: inline-block;
background: rgba(38, 128, 235, 0.1);
border: 2px solid transparent;
color: #515a6e;
margin: 10px;
}
dd:hover {
// background: rgba(38, 128, 235, 1);
// border:1px solid rgba(38,128,235,0.1);
background: rgba(38, 128, 235, 0.1);
border: 2px solid rgba(38, 128, 235, 1);
// color: white;
cursor: pointer;
}
dd.checked {
border: 2px solid rgba(38, 128, 235, 1);
}
}
.footer {
margin-top: 5px;
min-height: 68px;
dl {
background: rgba(245, 246, 250, 1);
border: 1px solid rgba(220, 223, 230, 1);
opacity: 1;
border-radius: 4px;
min-height: 48px;
flex-wrap:wrap;
}
}
}
</style>
\ No newline at end of file
pages/test/user.vue
View file @ 29d1b26b
<template> <template>
<div> <div style="padding:50px;">
<UserSelect v-model="user" :multiple="true" :type="1"/> <UserSelect v-model="user" :multiple="true" theme="list"/>
<DepartmentSelect v-model="dep" /> <!-- <DepartmentSelect v-model="dep" />
{{user}} {{user}}
<Button @click="setUser">Set</Button>{{dep}} <Button @click="setUser">Set</Button>{{dep}} -->
</div> </div>
</template> </template>
<script> <script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment