Dragon
1 year ago
parent
ba7add68c0
commit
1cdebc153a
@ -0,0 +1,213 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, onBeforeMount, reactive, ref, toRefs, unref } from 'vue'
|
||||||
|
import { useDictionary } from '@/store/modules/dictonary'
|
||||||
|
import { audit } from '@/api/task/task'
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'commit', rejectId: any, backId: any, isOther: boolean)
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const dictonaryStore = useDictionary()
|
||||||
|
const state: any = reactive({
|
||||||
|
detail: {},
|
||||||
|
})
|
||||||
|
const { detail } = toRefs(state)
|
||||||
|
const show = ref(false)
|
||||||
|
const cardStyle = {
|
||||||
|
'width': '520px',
|
||||||
|
'--n-padding-bottom': '10px',
|
||||||
|
'--n-padding-left': '0px',
|
||||||
|
}
|
||||||
|
|
||||||
|
function showModal(value) {
|
||||||
|
state.detail = value
|
||||||
|
show.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeModal() {
|
||||||
|
show.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
showModal,
|
||||||
|
})
|
||||||
|
|
||||||
|
const backOptions = ref<any[]>([])
|
||||||
|
const reasonOptions = ref<any[]>([])
|
||||||
|
const selectBackId = ref(null)
|
||||||
|
const selectRejectId = ref(null)
|
||||||
|
const selectItem = ref(null)
|
||||||
|
const otherValue = ref(null)
|
||||||
|
const showOther = computed(() => {
|
||||||
|
return (selectItem.value as any)?.label === '其他'
|
||||||
|
})
|
||||||
|
|
||||||
|
const comomitValue = computed(() => {
|
||||||
|
return (selectItem.value as any)?.label === '其他' ? otherValue.value : selectRejectId.value
|
||||||
|
})
|
||||||
|
|
||||||
|
async function handleSumbit(e: MouseEvent) {
|
||||||
|
e.preventDefault()
|
||||||
|
closeModal()
|
||||||
|
// selectRejectId.value === 'other'
|
||||||
|
// emit('commit', unref(comomitValue), unref(selectBackId), showOther.value)
|
||||||
|
console.log(state.detail)
|
||||||
|
// const param = {
|
||||||
|
// formid: formIds,
|
||||||
|
// taskId: taskIds,
|
||||||
|
// approvd: false,
|
||||||
|
// taskComment: idOrDesc,
|
||||||
|
// taskname: isOther ? tasknames : ['其他'],
|
||||||
|
// }
|
||||||
|
// audit(param).then((res) => {
|
||||||
|
// const { code } = res
|
||||||
|
// if (code === 'OK')
|
||||||
|
// reload()
|
||||||
|
// else message.error(res.message)
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
|
||||||
|
onBeforeMount(async () => {
|
||||||
|
const rejectList = await dictonaryStore.fetchTFList()
|
||||||
|
const backList = await dictonaryStore.fetchBackList()
|
||||||
|
|
||||||
|
reasonOptions.value = rejectList
|
||||||
|
backOptions.value = backList
|
||||||
|
|
||||||
|
// TODO 删除此项 通过name=其他 判断
|
||||||
|
// 添加其他选项
|
||||||
|
// reasonOptions.value.push({
|
||||||
|
// label: '其他',
|
||||||
|
// value: 'other',
|
||||||
|
// })
|
||||||
|
})
|
||||||
|
|
||||||
|
async function selectChange(id) {
|
||||||
|
console.log(id, 'selectChange')
|
||||||
|
selectItem.value = reasonOptions.value.find(v => v.id == id)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<n-modal v-model:show="show" transform-origin="center">
|
||||||
|
<n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
|
||||||
|
<div class="wrapper">
|
||||||
|
<div class="wrapper-header">
|
||||||
|
<span class="wrapper-left">选择不通过原因</span>
|
||||||
|
<div class="wrapper-right">
|
||||||
|
<div class="wrapper-right-close" @pointerdown="closeModal">
|
||||||
|
<div class="wrapper-right-icon" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="wrapper-content">
|
||||||
|
<span>处理方式</span>
|
||||||
|
<n-select v-model:value="selectBackId" filterable style="margin-top: 10px;" :options="backOptions" />
|
||||||
|
</div>
|
||||||
|
<div class="wrapper-content">
|
||||||
|
<span>不通过原因</span>
|
||||||
|
<n-select v-model:value="selectRejectId" filterable style="margin-top: 10px;" :options="reasonOptions" @change="selectChange" />
|
||||||
|
<n-input v-show="showOther" v-model:value="otherValue" type="textarea" placeholder="备注内容" style="margin-top: 10px;" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="wrapper-content">
|
||||||
|
<n-input
|
||||||
|
type="textarea"
|
||||||
|
placeholder="备注内容" v-model="showOther"></n-input>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
<template #footer>
|
||||||
|
<div class="wrapper-footer">
|
||||||
|
<n-button type="info" @click="handleSumbit">
|
||||||
|
确认
|
||||||
|
</n-button>
|
||||||
|
<n-button secondary style="margin-left:15px" @click="closeModal">
|
||||||
|
取消
|
||||||
|
</n-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</n-card>
|
||||||
|
</n-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.wrapper {
|
||||||
|
&-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-left {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-right {
|
||||||
|
&-close {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-icon {
|
||||||
|
background: #000;
|
||||||
|
display: inline-block;
|
||||||
|
width: 18px;
|
||||||
|
height: 1px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 18px;
|
||||||
|
height: 1px;
|
||||||
|
background: #000;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
-webkit-transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-content {
|
||||||
|
padding: 18px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-info {
|
||||||
|
font-weight: bold;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
background-color: #1980ff;
|
||||||
|
content: '';
|
||||||
|
width: 5px;
|
||||||
|
border-radius: 2px;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.n-card.n-card--content-segmented > .n-card__content:not(:first-child)) {
|
||||||
|
border: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.n-card > .n-card-header) {
|
||||||
|
--n-padding-top: 0px;
|
||||||
|
--n-padding-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.n-divider:not(.n-divider--vertical)) {
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue