You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
3.0 KiB
133 lines
3.0 KiB
<template>
|
|
<view class="edit-store-page">
|
|
<view class="edit-form-wrapper">
|
|
<uni-forms :modelValue="editForm" ref="editForm" label-width="150">
|
|
<uni-forms-item label="店铺名称" required>
|
|
<uni-easyinput v-model="editForm.shopName" placeholder="请输入店铺名称" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="店铺员工" required>
|
|
<uni-data-checkbox v-model="editForm.clerks" :multiple="true" :localdata="hobbys" />
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
</view>
|
|
<view class="button-wrapper">
|
|
<u-button type="primary" @click="onAddButtonClick">添加员工</u-button>
|
|
</view>
|
|
<view class="button-wrapper">
|
|
<u-button type="success">保存</u-button>
|
|
</view>
|
|
<view>
|
|
<!-- 输入框示例 -->
|
|
<uni-popup ref="inputDialog" type="dialog" class="popup-wrap">
|
|
<uni-card title="添加员工">
|
|
<uni-forms :modelValue="addForm" ref="addForm" label-width="160rpx" label-align="right">
|
|
<uni-forms-item label="员工姓名" required>
|
|
<uni-easyinput v-model="addForm.name" placeholder="请输入员工姓名" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="手机号" required>
|
|
<uni-easyinput v-model="addForm.name" placeholder="请输入员工手机号" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="是否店长" required>
|
|
<uni-data-checkbox v-model="addForm.sex" :localdata="sexs" />
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
<view class="action-area">
|
|
<u-button type="info" plain>取消</u-button>
|
|
<u-button type="info" plain>保存</u-button>
|
|
</view>
|
|
</uni-card>
|
|
</uni-popup>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
editForm: {
|
|
shopName: '',
|
|
clerks: [],
|
|
},
|
|
addForm: {
|
|
|
|
},
|
|
hobbys: [{
|
|
text: '张三',
|
|
value: 0
|
|
}, {
|
|
text: '李四',
|
|
value: 1
|
|
}, {
|
|
text: '王五',
|
|
value: 2
|
|
}, {
|
|
text: '赵六',
|
|
value: 3
|
|
}, {
|
|
text: '田七',
|
|
value: 4
|
|
}, {
|
|
text: '钱八',
|
|
value: 5
|
|
}],
|
|
sexs: [{
|
|
text: '是',
|
|
value: 0
|
|
}, {
|
|
text: '不是',
|
|
value: 1
|
|
}, {
|
|
text: '其他',
|
|
value: 2
|
|
}],
|
|
customStyle: {
|
|
margin: '15px',
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// 选中某个复选框时，由checkbox时触发
|
|
checkboxChange(e) {
|
|
console.log(e);
|
|
},
|
|
// 选中任一checkbox时，由checkbox-group触发
|
|
checkboxGroupChange(e) {
|
|
console.log(e);
|
|
},
|
|
// 对话框
|
|
dialogInputConfirm(e) {
|
|
console.log(e)
|
|
},
|
|
onAddButtonClick() {
|
|
this.$refs.inputDialog.open()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.edit-store-page {
|
|
padding: 15rpx;
|
|
}
|
|
|
|
.edit-form-wrapper {
|
|
min-height: 800rpx;
|
|
}
|
|
|
|
.button-wrapper {
|
|
margin: 15rpx 0;
|
|
}
|
|
|
|
.popup-wrap {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.action-area {
|
|
display: flex;
|
|
|
|
.action-area-button {
|
|
margin: 0 15rpx;
|
|
}
|
|
}
|
|
</style>
|