ocr-web/src/components/Approval/NotPassed.vue

<script lang="ts" setup>
import { computed, onBeforeMount, reactive, ref } from 'vue'
import { useMessage } from 'naive-ui'
import { useDictionary } from '@/store/modules/dictonary'
import { audit } from '@/api/task/task'

const emit = defineEmits(['success'])
const message = useMessage()
const loading = ref(false)

const dictonaryStore = useDictionary()
const state: any = reactive({
  idItemList: [],
})
const formRef = ref()
const show = ref(false)
const cardStyle = {
  'width': '520px',
  '--n-padding-bottom': '10px',
  '--n-padding-left': '0px',
}

const rules = {
  disposeTypeId: [
    { required: true, message: '请选择处理方式', trigger: 'blur' },
  ],
  failCauseId: [
    { required: true, message: '请选择不通过原因', trigger: 'blur' },
  ],
}

const formData = reactive({
  disposeTypeId: '262403670085013522',
  failCauseId: '260402999231251188',
  comment: '',
})

function showModal(value) {
  state.idItemList = value
  show.value = true
}

function closeModal() {
  show.value = false
}

defineExpose({
  showModal,
})

const disposeOptions = ref<any[]>([]) // 处理方式
const failCauseOptions = ref<any[]>([]) // 不通过原因
const selectItem = ref(null)

onBeforeMount(async () => {
  const rejectList = await dictonaryStore.fetchTFList()
  const backList = await dictonaryStore.fetchBackList()

  failCauseOptions.value = rejectList
  disposeOptions.value = backList
})

const showOther = computed(() => {
  const failCauseItem = failCauseOptions.value.find(item => item.value === formData.failCauseId)
  return failCauseItem?.label === '其他'
})
/*
 * 需要的参数字段结构
 * [{
 *    id: ''
 *    taskId:''
 *    fromTaskName: ''
*  }]
*/
async function handleSumbit(e: MouseEvent) {
  e.preventDefault()
  formRef.value.validate(async (errors) => {
    if (!errors) {
      try {
        const list: any = []
        state.idItemList.forEach((item) => {
          list.push({
            formId: item.id,
            taskId: item.taskId,
            taskName: item.fromTaskName,
          })
        })
        const disposeTypeItem = disposeOptions.value.find(item => item.value === formData.disposeTypeId)
        const failCauseItem = failCauseOptions.value.find(item => item.value === formData.failCauseId)

        const param = {
          result: false,
          comment: showOther.value ? formData.comment : '',
          disposeType: disposeTypeItem.label,
          disposeTypeId: formData.disposeTypeId,
          failCauseId: formData.failCauseId,
          failCauseName: failCauseItem.label,
          flowTaskInfoList: list,
        }

        audit(param).then((res) => {
          const { code } = res
          if (code === 'OK') {
            message.success(res.message)
            emit('success', param)
            closeModal()
          }
          else { message.error(res.message) }
        })
      }
      finally {
        loading.value = false
      }
    }
  })
}

async function selectChange(id) {
  selectItem.value = failCauseOptions.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>
          <SvgIcon
            size="22"
            class="icon"
            name="close-none-border"
            @click="closeModal"
          />
        </div>
        <n-form
          ref="formRef"
          size="large"
          :model="formData"
          :rules="rules"
          require-mark-placement="left"
        >
          <div class="wrapper-content">
            <n-form-item class="form-item" label="处理方式" path="disposeTypeId">
              <n-select v-model:value="formData.disposeTypeId" filterable :options="disposeOptions" />
            </n-form-item>

            <n-form-item class="form-item" label="不通过原因" path="failCauseId">
              <n-select v-model:value="formData.failCauseId" filterable :options="failCauseOptions" @change="selectChange" />
            </n-form-item>
            <n-form-item v-show="showOther" class="form-item-area" label="" path="">
              <n-input v-model:value="formData.comment" placeholder-class="pl" type="textarea" placeholder="备注内容" />
            </n-form-item>
          </div>
        </n-form>
      </div>
      <template #footer>
        <div class="wrapper-footer">
          <n-button type="info" @click="handleSumbit">
            确定
          </n-button>
          <n-button secondary class="btn" 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;
    height: 56px;
    border-bottom: 0.5px solid #d9d9d9;
    padding: 0 24px
  }

  &-left {
    font-size: 18px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    color: #333333;
  }

  .icon{
    cursor: pointer;
  }

  &-content {
    padding: 24px;
  }

  &-footer {
    display: flex;
    justify-content: flex-end;
    padding-right: 24px;
    padding-bottom: 10px;
    border-top: 0.5px solid #d9d9d9;
    padding-top: 15px;
  }

  &-info {
    font-weight: bold;
    position: relative;

    &:before {
      background-color: #1980ff;
      content: '';
      width: 5px;
      border-radius: 2px;
      top: 0;
      bottom: 0;
      position: absolute;
    }
  }

  .form-item-area{
    margin-top: -30px;
  }

}

::v-deep(.n-card__content) {
  padding: 0!important;
}

::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;
}

::v-deep(.n-form-item-label__text) {
  color: #666666;
}

::v-deep(.n-input__placeholder) {
  color: #333333!important;
}

.btn{
  border: 1px solid #cad2dd;
  background-color: #fff;
}
</style>