u

code/g3hd-old/g3hd-vue/src/backup/ssDialog.vue

@@ -0,0 +1,74 @@
+<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>