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.
118 lines
3.1 KiB
118 lines
3.1 KiB
1 year ago
|
<template>
|
||
|
|
<el-dialog title="额外支出" v-model="show" width="800px">
|
||
|
|
<el-button
|
||
|
|
class="mb-5px"
|
||
|
|
type="primary"
|
||
|
|
size="small"
|
||
|
|
@click="
|
||
|
|
form.extraPay.push({
|
||
|
|
extraPayType: undefined,
|
||
|
|
extraPayMoney: 0,
|
||
|
|
dictType: 'extra_pay_type'
|
||
|
|
})
|
||
|
|
"
|
||
|
|
>
|
||
|
|
添加额外支出
|
||
|
|
</el-button>
|
||
|
|
<el-table :data="form.extraPay" border size="small">
|
||
|
|
<el-table-column type="index" width="50" />
|
||
|
|
<el-table-column prop="extraPayType" label="费用类型" width="200px">
|
||
|
|
<template #default="{ row }">
|
||
|
|
<el-select v-model="row.extraPayType" size="small" placeholder="其他费用类型" filterable>
|
||
|
|
<el-option
|
||
|
|
v-for="item in extraPayOptions"
|
||
|
|
:key="item.value"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.value"
|
||
|
|
/>
|
||
|
|
</el-select>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="extraPayMoney" label="费用金额" width="180px">
|
||
|
|
<template #default="{ row }">
|
||
|
|
<el-input-number v-model="row.extraPayMoney" size="small" :controls="false" />
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="remark" label="备注">
|
||
|
|
<template #default="{ row }">
|
||
|
|
<el-input v-model="row.remark" size="small" placeholder="备注信息" />
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作" width="60px">
|
||
|
|
<template #default="{ row, $index }">
|
||
|
|
<Icon
|
||
|
|
icon="ep:remove-filled"
|
||
|
|
class="text-red-500"
|
||
|
|
:disabled="row.id"
|
||
|
|
@click="handleRemove('extraPay', $index)"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
|
||
|
|
<template #footer>
|
||
|
|
<span>
|
||
|
|
<el-button @click="show = false">取 消</el-button>
|
||
|
|
<el-button :disabled="formLoading" type="primary" @click="onSubmit">确 定</el-button>
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup name="DialogExtraPay">
|
||
|
|
import { signAddPay } from '@/api/clue/sign'
|
||
|
|
import { getDictOptions } from '@/utils/dict'
|
||
|
|
|
||
|
|
const extraPayOptions = getDictOptions('extra_pay_type')
|
||
|
|
const message = useMessage() // 消息弹窗
|
||
|
|
|
||
|
|
const show = ref(false)
|
||
|
|
function open(id) {
|
||
|
|
show.value = true
|
||
|
|
resetForm(id)
|
||
|
|
}
|
||
|
|
defineExpose({
|
||
|
|
open
|
||
|
|
})
|
||
|
|
|
||
|
|
const form = ref({})
|
||
|
|
function resetForm(id) {
|
||
|
|
form.value = {
|
||
|
|
signId: id,
|
||
|
|
extraPay: []
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const formLoading = ref(false)
|
||
|
|
async function onSubmit() {
|
||
|
|
// 校验表单
|
||
|
|
if (form.value.extraPay.length) {
|
||
|
|
if (form.value.extraPay.some((it) => !it.extraPayType || it.extraPayMoney == null)) {
|
||
|
|
message.info('请想额外支出信息填写完整！')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
message.info('请添加额外支出')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
// 提交请求
|
||
|
|
formLoading.value = true
|
||
|
|
try {
|
||
|
|
const params = {
|
||
|
|
signId: form.value.id,
|
||
|
|
extraPay: form.value.extraPay.filter((it) => !it.id)
|
||
|
|
}
|
||
|
|
await signAddPay(params)
|
||
|
|
message.success('添加额外支出成功！')
|
||
|
|
} finally {
|
||
|
|
formLoading.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleRemove(type, index) {
|
||
|
|
form.value[type].splice(index, 1)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped></style>
|