206 lines
3.7 KiB
Vue
206 lines
3.7 KiB
Vue
<template>
|
||
<view class="modal-mask" v-if="show" @click="closeModal">
|
||
<view class="modal-content" @click.stop>
|
||
<view class="edit-modal">
|
||
<view class="title">编辑员工</view>
|
||
<view class="form-container">
|
||
<view class="form-item">
|
||
<view class="label">备注</view>
|
||
<input
|
||
class="input"
|
||
v-model="form.remark"
|
||
placeholder="请输入备注信息"
|
||
placeholder-class="placeholder"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="btn-container">
|
||
<button class="btn cancel" @click="handleCancel">取消</button>
|
||
<button class="btn confirm" @click="handleConfirm">确定</button>
|
||
</view>
|
||
<view class="close-btn" @click="closeModal">
|
||
<text class="close-icon">×</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mchUpdateStaff } from '@/api/mch/mchStaff'
|
||
|
||
export default {
|
||
name: 'EditStaffModal',
|
||
props: {
|
||
value: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
staff: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
form: {
|
||
remark: ''
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
show: {
|
||
get() {
|
||
return this.value
|
||
},
|
||
set(val) {
|
||
this.$emit('input', val)
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
value(val) {
|
||
if (val) {
|
||
this.form.remark = this.staff.remark || ''
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
closeModal() {
|
||
this.show = false
|
||
},
|
||
handleCancel() {
|
||
this.closeModal()
|
||
},
|
||
handleConfirm() {
|
||
this.$modal.loading('保存中...')
|
||
mchUpdateStaff({
|
||
id: this.staff.id,
|
||
remark: this.form.remark
|
||
}).then(() => {
|
||
this.$modal.closeLoading()
|
||
uni.showToast({ title: '保存成功', icon: 'success' })
|
||
this.closeModal()
|
||
this.$emit('success')
|
||
}).catch(() => {
|
||
this.$modal.closeLoading()
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.modal-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 999;
|
||
}
|
||
|
||
.modal-content {
|
||
width: 600rpx;
|
||
animation: modalShow 0.3s ease;
|
||
}
|
||
|
||
@keyframes modalShow {
|
||
from {
|
||
transform: scale(0.8);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.edit-modal {
|
||
position: relative;
|
||
padding: 40rpx;
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
|
||
.title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
margin-bottom: 40rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.form-container {
|
||
margin-bottom: 40rpx;
|
||
|
||
.form-item {
|
||
margin-bottom: 20rpx;
|
||
|
||
.label {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.input {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
background: #f5f7fa;
|
||
border-radius: 10rpx;
|
||
padding: 0 20rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.placeholder {
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn-container {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
|
||
.btn {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
border-radius: 40rpx;
|
||
font-size: 28rpx;
|
||
|
||
&.cancel {
|
||
background: #f5f7fa;
|
||
color: #666;
|
||
}
|
||
|
||
&.confirm {
|
||
background: #2979ff;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.close-btn {
|
||
position: absolute;
|
||
top: 20rpx;
|
||
right: 20rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.close-icon {
|
||
font-size: 40rpx;
|
||
color: #999;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
}
|
||
</style> |