|
@@ -7,6 +7,13 @@
|
|
|
|
|
|
|
|
<view class="tips-body">
|
|
<view class="tips-body">
|
|
|
<text class="tips-text">{{ content }}</text>
|
|
<text class="tips-text">{{ content }}</text>
|
|
|
|
|
+ <textarea
|
|
|
|
|
+ v-if="showInput"
|
|
|
|
|
+ v-model="reason"
|
|
|
|
|
+ class="tips-input"
|
|
|
|
|
+ :placeholder="inputPlaceholder"
|
|
|
|
|
+ :maxlength="200"
|
|
|
|
|
+ />
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<view class="tips-footer">
|
|
<view class="tips-footer">
|
|
@@ -26,19 +33,27 @@ import { ref } from 'vue'
|
|
|
|
|
|
|
|
const visible = ref(false)
|
|
const visible = ref(false)
|
|
|
const content = ref('')
|
|
const content = ref('')
|
|
|
-let confirmCallback: (() => void) | null = null
|
|
|
|
|
|
|
+const showInput = ref(false)
|
|
|
|
|
+const reason = ref('')
|
|
|
|
|
+const inputPlaceholder = ref('请输入作废理由')
|
|
|
|
|
+let confirmCallback: ((reason?: string) => void) | null = null
|
|
|
let cancelCallback: (() => void) | null = null
|
|
let cancelCallback: (() => void) | null = null
|
|
|
|
|
|
|
|
interface PopupOptions {
|
|
interface PopupOptions {
|
|
|
text: string
|
|
text: string
|
|
|
- confirm?: () => void
|
|
|
|
|
|
|
+ confirm?: (reason?: string) => void
|
|
|
cancel?: () => void
|
|
cancel?: () => void
|
|
|
|
|
+ showInput?: boolean
|
|
|
|
|
+ inputPlaceholder?: string
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const show = (options: PopupOptions) => {
|
|
const show = (options: PopupOptions) => {
|
|
|
content.value = options.text
|
|
content.value = options.text
|
|
|
confirmCallback = options.confirm || null
|
|
confirmCallback = options.confirm || null
|
|
|
cancelCallback = options.cancel || null
|
|
cancelCallback = options.cancel || null
|
|
|
|
|
+ showInput.value = options.showInput || false
|
|
|
|
|
+ inputPlaceholder.value = options.inputPlaceholder || '请输入作废理由'
|
|
|
|
|
+ reason.value = ''
|
|
|
visible.value = true
|
|
visible.value = true
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -47,11 +62,13 @@ const hide = () => {
|
|
|
content.value = ''
|
|
content.value = ''
|
|
|
confirmCallback = null
|
|
confirmCallback = null
|
|
|
cancelCallback = null
|
|
cancelCallback = null
|
|
|
|
|
+ showInput.value = false
|
|
|
|
|
+ reason.value = ''
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const handleConfirm = () => {
|
|
const handleConfirm = () => {
|
|
|
if (confirmCallback) {
|
|
if (confirmCallback) {
|
|
|
- confirmCallback()
|
|
|
|
|
|
|
+ confirmCallback(reason.value)
|
|
|
}
|
|
}
|
|
|
hide()
|
|
hide()
|
|
|
}
|
|
}
|
|
@@ -116,6 +133,19 @@ defineExpose({
|
|
|
line-height: 1.5;
|
|
line-height: 1.5;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+.tips-input {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 80px;
|
|
|
|
|
+ margin-top: 12px;
|
|
|
|
|
+ padding: 8px 10px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ background-color: #f5f5f5;
|
|
|
|
|
+ border: 1px solid #ddd;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
.tips-footer {
|
|
.tips-footer {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
flex-direction: row;
|