不通过弹窗

src/api/task/task.ts

@@ -25,12 +25,11 @@ export async function getApprovalList(page: PageParam) {
  * 审核
  * @param param
  */
-export async function audit(params: ApprovalParam) {
+export async function audit(params) {
   return http.request({
     url: `/flow/task/completeBatchFlow?`,
     method: 'post',
-    params: qs.stringify(params, { indices: false }),
+    params,
-    headers: { 'Content-Type': ContentTypeEnum.FORM_DATA },
   })
 }
 

src/components/Approval/NotPassed.vue

@@ -1,19 +1,20 @@
 <script lang="ts" setup>
-import { computed, onBeforeMount, reactive, ref, toRefs, unref } from 'vue'
+import { computed, onBeforeMount, reactive, ref } from 'vue'
-import { useDialog, useMessage } from 'naive-ui'
+import { useMessage } from 'naive-ui'
 import { useDictionary } from '@/store/modules/dictonary'
 import { audit } from '@/api/task/task'
 
 const emit = defineEmits<{
-  (e: 'commit', rejectId: any, backId: any, isOther: boolean)
+  (e: 'success')
 }>()
 const message = useMessage()
+const loading = ref(false)
 
 const dictonaryStore = useDictionary()
 const state: any = reactive({
-  detail: {},
+  idItemList: [],
 })
-const { detail } = toRefs(state)
+const formRef = ref()
 const show = ref(false)
 const cardStyle = {
   'width': '520px',
@@ -21,9 +22,23 @@ const cardStyle = {
   '--n-padding-left': '0px',
 }
 
+const rules = {
+  disposeTypeId: [
+    { required: true, message: '请选择处理方式', trigger: 'blur' },
+  ],
+  failCauseId: [
+    { required: true, message: '请选择不通过原因', trigger: 'blur' },
+  ],
+}
+
+const formData = reactive({
+  disposeTypeId: '',
+  failCauseId: '',
+  comment: '',
+})
+
 function showModal(value) {
-  console.log(value)
+  state.idItemList = value
-  state.detail = value
   show.value = true
 }
 
@@ -35,60 +50,75 @@ defineExpose({
   showModal,
 })
 
-const backOptions = ref<any[]>([])
+const disposeOptions = ref<any[]>([]) // 处理方式
-const reasonOptions = ref<any[]>([])
+const failCauseOptions = 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()
-
-  // selectRejectId.value === 'other'
-  // emit('commit', unref(comomitValue), unref(selectBackId), showOther.value)
-  console.log(state.detail)
-  console.log(comomitValue)
-  const param = {
-    formid: [state.detail.id],
-    taskId: ['66b06dda-e673-11ee-a934-0242bc74e4f3'],
-    approvd: false,
-    taskComment: comomitValue.value,
-    taskname: showOther.value ? state.detail.detail.tasks : ['其他'],
-  }
-  audit(param).then((res) => {
-    const { code } = res
-    if (code === 'OK')
-      closeModal()
-    else message.error(res.message)
-  })
-}
 
 onBeforeMount(async () => {
   const rejectList = await dictonaryStore.fetchTFList()
   const backList = await dictonaryStore.fetchBackList()
 
-  reasonOptions.value = rejectList
+  failCauseOptions.value = rejectList
-  backOptions.value = backList
+  disposeOptions.value = backList
+})
 
-  // TODO 删除此项 通过name=其他 判断
+const showOther = computed(() => {
-  // 添加其他选项
+  const failCauseItem = failCauseOptions.value.find(item => item.value === formData.failCauseId)
-  // reasonOptions.value.push({
+  return failCauseItem?.label === '其他'
-  //   label: '其他',
-  //   value: 'other',
-  // })
 })
+/*
+ * 需要的参数字段结构
+ * [{
+ *    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('审核成功')
+            emit('success')
+            closeModal()
+          }
+          else { message.error(res.message) }
+        })
+      }
+      finally {
+        loading.value = false
+      }
+    }
+  })
+}
 
 async function selectChange(id) {
-  console.log(id, 'selectChange')
+  selectItem.value = failCauseOptions.value.find(v => v.id === id)
-  selectItem.value = reasonOptions.value.find(v => v.id == id)
 }
 </script>
 
@@ -98,27 +128,33 @@ async function selectChange(id) {
       <div class="wrapper">
         <div class="wrapper-header">
           <span class="wrapper-left">选择不通过原因</span>
-          <div class="wrapper-right">
+          <SvgIcon
-            <div class="wrapper-right-close" @pointerdown="closeModal">
+            size="22"
-              <div class="wrapper-right-icon" />
+            class="icon"
-            </div>
+            name="close-none-border"
-          </div>
+            @click="closeModal"
-        </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>
-
+        <n-form
-        <!-- <div class="wrapper-content">
+          ref="formRef"
-          <n-input
+          size="large"
-          type="textarea"
+          :model="formData"
-          placeholder="备注内容" v-model="showOther"></n-input>
+          :rules="rules"
-        </div> -->
+          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" type="textarea" placeholder="备注内容" />
+            </n-form-item>
+          </div>
+        </n-form>
       </div>
       <template #footer>
         <div class="wrapper-footer">
@@ -140,49 +176,31 @@ async function selectChange(id) {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 10px;
+    height: 56px;
+    border-bottom: 0.5px solid #d9d9d9;
+    padding: 0 24px
   }
 
   &-left {
-    font-weight: bold;
+    font-size: 18px;
-    font-size: 16px;
+    font-family: PingFang SC, PingFang SC-Medium;
+    font-weight: 500;
+    color: #333333;
   }
 
-  &-right {
+  .icon{
-    &-close {
+    cursor: pointer;
-      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;
+    padding: 24px;
   }
 
   &-footer {
     display: flex;
     justify-content: flex-end;
+    padding-right: 24px;
+    padding-bottom: 10px;
   }
 
   &-info {
@@ -199,10 +217,14 @@ async function selectChange(id) {
       position: absolute;
     }
   }
+
+  .form-item-area{
+    margin-top: -30px;
+  }
 }
 
-::v-deep(.n-card.n-card--content-segmented > .n-card__content:not(:first-child)) {
+::v-deep(.n-card__content) {
-  border: 0px;
+  padding: 0!important;
 }
 
 ::v-deep(.n-card > .n-card-header) {

src/store/modules/dictonary.ts

@@ -216,7 +216,7 @@ export const useDictionaryStore = defineStore({
     // 退回方式
     async fetchBackList() {
       const list = await getBackList()
-      this.backList = generateOptions(list, 'codeno', 'name')
+      this.backList = generateOptions2(list)
       return this.backList
     },
     // 退回方式

src/views/task/content/Content.vue

@@ -15,7 +15,6 @@ import { isEmpty } from '@/utils'
 import { formatToDateHMS } from '@/utils/dateUtil'
 import { hideDownload } from '@/utils/image'
 import emitter from '@/utils/mitt'
-import ConfrimModal from '../modal/ConfrimModal.vue'
 import CustomSettingModal from '../modal/CustomSettingModal.vue'
 import PictureTable from './PictureTable.vue'
 import TaskTable from './TaskTable.vue'
@@ -154,27 +153,27 @@ function approvalHandler(items?: any) {
 }
 
 function rejectHandler(items?: any) {
-  let cloneItem: any
+  // let cloneItem: any
-  if (batch.value) {
+  // if (batch.value) {
-    processItems = selectItems.value
+  //   processItems = selectItems.value
-  }
+  // }
-  else if (overTask.value) {
+  // else if (overTask.value) {
-    cloneItem = clone(overTask.value)
+  //   cloneItem = clone(overTask.value)
-    processItems = [cloneItem]
+  //   processItems = [cloneItem]
-  }
+  // }
 
-  if (items !== undefined && !(items instanceof PointerEvent))
+  // if (items !== undefined && !(items instanceof PointerEvent))
-    processItems = items
+  //   processItems = items
 
-  const msg = validate(processItems)
+  // const msg = validate(processItems)
 
-  if (msg !== null) {
+  // if (msg !== null) {
-    message.error(msg)
+  //   message.error(msg)
-    return
+  //   return
-  }
+  // }
 
   const modal = unref(notPassModalRef)! as any
-  modal.showModal()
+  modal.showModal(selectItems.value)
 }
 
 function approval() {
@@ -343,6 +342,10 @@ function previewHandler(event: MouseEvent) {
   if (imageRef.value && (imageRef.value as any).src)
     (imageRef.value as any).mergedOnClick()
 }
+
+function reloadList() {
+  getImgList()
+}
 </script>
 
 <template>
@@ -589,8 +592,7 @@ function previewHandler(event: MouseEvent) {
         <History :data="taskDetailInfo" />
       </n-tab-pane>
     </n-tabs>
-    <NotPassed />
+    <NotPassed ref="notPassModalRef" @success="reloadList" />
-    <ConfrimModal ref="notPassModalRef" @commit="reject" />
     <BatchModal
       ref="batchModalRef"
       @reject="rejectHandler"