112 lines
2.6 KiB
JavaScript
112 lines
2.6 KiB
JavaScript
// Utils
|
||
import { createNamespace } from '../utils';
|
||
import { RED } from '../utils/constant';
|
||
|
||
// Components
|
||
import Tag from '../tag';
|
||
import Icon from '../icon';
|
||
import Cell from '../cell';
|
||
import Radio from '../radio';
|
||
import Button from '../button';
|
||
import RadioGroup from '../radio-group';
|
||
|
||
const [createComponent, bem, t] = createNamespace('contact-list');
|
||
|
||
export default createComponent({
|
||
props: {
|
||
list: Array,
|
||
addText: String,
|
||
modelValue: null,
|
||
defaultTagText: String,
|
||
},
|
||
|
||
emits: ['add', 'edit', 'select', 'update:modelValue'],
|
||
|
||
setup(props, { emit }) {
|
||
return () => {
|
||
const List =
|
||
props.list &&
|
||
props.list.map((item, index) => {
|
||
function onClick() {
|
||
emit('update:modelValue', item.id);
|
||
emit('select', item, index);
|
||
}
|
||
|
||
function RightIcon() {
|
||
return (
|
||
<Radio
|
||
name={item.id}
|
||
iconSize={16}
|
||
checkedColor={RED}
|
||
onClick={onClick}
|
||
/>
|
||
);
|
||
}
|
||
|
||
function LeftIcon() {
|
||
return (
|
||
<Icon
|
||
name="edit"
|
||
class={bem('edit')}
|
||
onClick={(event) => {
|
||
event.stopPropagation();
|
||
emit('edit', item, index);
|
||
}}
|
||
/>
|
||
);
|
||
}
|
||
|
||
function Content() {
|
||
const nodes = [`${item.name}，${item.tel}`];
|
||
|
||
if (item.isDefault && props.defaultTagText) {
|
||
nodes.push(
|
||
<Tag type="danger" round class={bem('item-tag')}>
|
||
{props.defaultTagText}
|
||
</Tag>
|
||
);
|
||
}
|
||
|
||
return nodes;
|
||
}
|
||
|
||
return (
|
||
<Cell
|
||
v-slots={{
|
||
icon: LeftIcon,
|
||
default: Content,
|
||
'right-icon': RightIcon,
|
||
}}
|
||
key={item.id}
|
||
isLink
|
||
center
|
||
class={bem('item')}
|
||
valueClass={bem('item-value')}
|
||
onClick={onClick}
|
||
/>
|
||
);
|
||
});
|
||
|
||
return (
|
||
<div class={bem()}>
|
||
<RadioGroup modelValue={props.modelValue} class={bem('group')}>
|
||
{List}
|
||
</RadioGroup>
|
||
<div class={bem('bottom')}>
|
||
<Button
|
||
round
|
||
block
|
||
type="danger"
|
||
class={bem('add')}
|
||
text={props.addText || t('addText')}
|
||
onClick={() => {
|
||
emit('add');
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
},
|
||
});
|