75 lines
2.2 KiB
Vue
75 lines
2.2 KiB
Vue
<template>
|
||
<el-dialog v-model="visible" title="指定审批人" width="420px" :close-on-click-modal="false">
|
||
<div>
|
||
<div style="display: flex;align-items: center;">
|
||
<label class="font-medium">送报审批人：</label>
|
||
<!-- 插槽允许父级自定义 -->
|
||
<slot name="selector">
|
||
<el-select v-model="selectedUser" placeholder="请选择送报审批人" style="width: 280px;">
|
||
<el-option v-for="item in levelUserIds" :key="item.b_id" :label="`${item.b_name}`" reserve-keyword="false"
|
||
:value="item.b_id" />
|
||
</el-select>
|
||
</slot>
|
||
</div>
|
||
|
||
<div style="display: flex;margin-top:3px;">
|
||
<label class="font-medium">送审说明：</label>
|
||
<el-input type="textarea" v-model="memo" placeholder="请输入送审说明" rows="3" style="width: 280px;" />
|
||
</div>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<el-button @click="cancel">取消</el-button>
|
||
<el-button type="primary" @click="confirm">确定</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, watch } from 'vue'
|
||
import { ElDialog, ElButton, ElInput, ElSelect, ElOption, ElMessage } from 'element-plus'
|
||
const props = defineProps({
|
||
levelUserIds: { type: Array, default: () => [] },
|
||
modelValue: { type: Boolean, default: false },
|
||
})
|
||
const emits = defineEmits(['update:visible', 'confirm', 'cancel'])
|
||
|
||
const visible = ref(props.modelValue)
|
||
const selectedUser = ref('')
|
||
const memo = ref('')
|
||
|
||
// 同步 v-model
|
||
watch(
|
||
() => props.modelValue,
|
||
val => (visible.value = val)
|
||
)
|
||
watch(visible, val => emits('update:visible', val))
|
||
|
||
// 点击确定
|
||
const confirm = () => {
|
||
if (!selectedUser.value) {
|
||
ElMessage.warning('请选择审批人')
|
||
return
|
||
}
|
||
emits('confirm', { user: selectedUser.value, memo: memo.value })
|
||
visible.value = false
|
||
}
|
||
|
||
// 点击取消
|
||
const cancel = () => {
|
||
emits('cancel')
|
||
visible.value = false
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.font-medium {
|
||
font-weight: 500;
|
||
width: 84px;
|
||
text-align: right;
|
||
}
|
||
|
||
.space-y-3>*+* {
|
||
margin-top: 14px;
|
||
}
|
||
</style>
|