审核

src/dts/components.d.ts

@@ -42,6 +42,7 @@ declare module 'vue' {
     IxPopover: typeof import('@idux/components/popover')['IxPopover']
     IxProLayout: typeof import('@idux/pro/layout')['IxProLayout']
     IxPwdInput: typeof import('./../components/input/IxPwdInput.vue')['default']
+    IxRadioGroup: typeof import('@idux/components/radio')['IxRadioGroup']
     IxRow: typeof import('@idux/components/grid')['IxRow']
     IxSelect: typeof import('@idux/components/select')['IxSelect']
     IxSpace: typeof import('@idux/components/space')['IxSpace']

src/pages/dispose-recode/DisposeRecode.vue

@@ -110,6 +110,11 @@ const columns: TableColumn[] = [
     dataKey: 'timeOutStatusTxt',
     customCell: 'timeOutStatus',
   },
+  {
+    title: '审查状态',
+    dataKey: 'auditStatusTxt',
+    customCell: 'auditStatus',
+  },
   {
     title: '操作',
     key: 'action',
@@ -229,6 +234,11 @@ onMounted(() => {
           <IxTag v-if="record.timeOutStatus === 'WeiChaoShi'" status="success">未超时</IxTag>
           <IxTag v-else status="error">已超时</IxTag>
         </template>
+        <template #auditStatus="{record}">
+          <IxTag v-if="record.auditStatus === 'DaiShenHe'" status="warning">待审核</IxTag>
+          <IxTag v-else-if="record.auditStatus === 'YiShenHe'" status="success">已确认</IxTag>
+          <IxTag v-else status="error">有问题</IxTag>
+        </template>
         <template #action="{record}">
           <IxButton class="detail-btn" icon="eye" mode="text" @click="disposeRecodeDetail?.open(record)">查看</IxButton>
         </template>
@@ -244,6 +254,7 @@ onMounted(() => {
   flex-direction: column;
   height: 100%;
   width: 100%;
+  position relative
 
   .title {
     font-size: 1.75rem;

src/pages/dispose-recode/DisposeRecodeDetail.vue

@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+import { useFormGroup } from '@idux/cdk'
+import DisposeRecodeApi from '@/pages/dispose-recode/dispose-recode-api.ts'
+import Toast from '@/components/toast'
+
 const show = ref(false)
 const ins = ref<HTMLElement | null>(null)
 const data = reactive<DisposeRecodeTypes.DisposeRecodeData>({
@@ -19,10 +23,57 @@ const data = reactive<DisposeRecodeTypes.DisposeRecodeData>({
   outFrontPhoto: '',
   outBodyPhoto: '',
   timeOutStatus: '',
-  timeOutStatusTxt: ''
+  timeOutStatusTxt: '',
+  tspPhotos: [],
+  zcPhotos: [],
+  auditStatus: 'YiShenHe',
+  auditStatusTxt: '',
+  problemDesc: ''
 })
 const container = ref<HTMLElement | undefined>(undefined)
 
+const auditData = useFormGroup<{
+  auditStatus: 'YiShenHe' | 'YouWenTi',
+  problemDesc: string
+}>({
+  auditStatus: [ 'YiShenHe' ],
+  problemDesc: [ '' ],
+})
+
+auditData.get('auditStatus')?.watchValue((val) => {
+  if (val === 'YiShenHe') {
+    auditData.get('problemDesc')?.setValue('')
+  }
+})
+
+const disabledDesc = computed(() => {
+  const value = auditData.get('auditStatus')?.getValue()
+  return value === 'YiShenHe'
+})
+
+const auditStatusDataSource = [
+  {key: 'YiShenHe', label: '确认'},
+  {key: 'YouWenTi', label: '有问题'},
+]
+
+function auditHandler() {
+  if (auditData.valid.value) {
+    DisposeRecodeApi.audit({
+      id: data.id,
+      auditStatus: auditData.get('auditStatus')?.getValue()!,
+      problemDesc: auditData.get('problemDesc')?.getValue()!,
+    }).then(() => {
+      Toast.success('审核成功')
+      closeHandler()
+    }).catch(() => {
+      Toast.error('审核失败')
+    })
+  } else {
+    auditData.markAsDirty()
+    Toast.error('请填写完整信息')
+  }
+}
+
 function closeHandler() {
   container.value!.style!.width = '0'
   container.value!.style!.height = '0'
@@ -57,6 +108,9 @@ defineExpose({
         <p class="detail-item"><span>进场时间：</span><span>{{ data.inTime ?? '-' }}</span></p>
         <p class="detail-item"><span>出场时间：</span><span>{{ data.outTime ?? '-' }}</span></p>
         <p class="detail-item"><span>消纳场名称：</span><span>{{ data.disposalSite ?? '-' }}</span></p>
+        <p class="detail-item"><span>超时状态：</span><span>{{ data.timeOutStatusTxt ?? '-' }}</span></p>
+        <p class="detail-item"><span>审查状态：</span><span>{{ data.auditStatusTxt ?? '-' }}</span></p>
+        <p class="detail-item"><span>问题描述：</span><span>{{ data.problemDesc ?? '-' }}</span></p>
       </div>
       <div class="dispose-recode-detail-img-title">车辆照片</div>
       <div class="dispose-recode-detail-img">
@@ -77,7 +131,7 @@ defineExpose({
           <IxImage :src="data.outBodyPhoto" alt="出场后"/>
         </div>
       </div>
-      <div class="dispose-recode-detail-img-title">装车照片</div>
+      <div class="dispose-recode-detail-img-title">现场照片</div>
       <div v-if="data.tspPhotos == null || data.tspPhotos.length === 0">
         <IxEmpty/>
       </div>
@@ -86,9 +140,30 @@ defineExpose({
           <IxImage :src="tspPhoto" alt="装车照片"/>
         </p>
       </div>
-
-      <template #footer="{ cancel:_, ok }">
-        <IxButton mode="primary" @click="ok">确定</IxButton>
+      <div class="dispose-recode-detail-img-title">装车照片</div>
+      <div v-if="data.zcPhotos == null || data.zcPhotos.length === 0">
+        <IxEmpty/>
+      </div>
+      <div v-else class="dispose-recode-detail-img">
+        <p v-for="tspPhoto in data.zcPhotos" class="detail-item img-card"><span class="img-title"></span>
+          <IxImage :src="tspPhoto" alt="装车照片"/>
+        </p>
+      </div>
+      <template #footer>
+        <IxPopconfirm v-if="data.auditStatus === 'DaiShenHe'" icon="whitelist" placement="top" title="审查" @ok="auditHandler">
+          <IxButton mode="primary">审查</IxButton>
+          <template #content>
+            <IxForm :control="auditData" layout="inline">
+              <IxFormItem messageTooltip>
+                <IxRadioGroup :dataSource="auditStatusDataSource" control="auditStatus" name="audit"></IxRadioGroup>
+              </IxFormItem>
+              <IxFormItem messageTooltip>
+                <IxInput :placeholder="disabledDesc?'':'请输入问题描述'" :readonly="disabledDesc" control="problemDesc"/>
+              </IxFormItem>
+            </IxForm>
+          </template>
+        </IxPopconfirm>
+        <IxButton @click="closeHandler">关闭</IxButton>
       </template>
     </IxModal>
   </div>
@@ -111,15 +186,18 @@ defineExpose({
   background-color: rgb(249 250 251);
   padding .5rem
   border-radius .5rem
+  width: 100%;
 
   .img-title {
     text-align center
   }
 
   :deep(.ix-image) {
+    width: 100%;
+
     img {
       width: 100%;
-      height: auto;
+      height: 100px;
       object-fit: cover;
       min-height unset
       min-width unset;

src/pages/dispose-recode/dispose-recode-api.ts

@@ -26,6 +26,9 @@ export default {
   exportData(date: string[]) {
     return download('/dispose_record/export', {date})
   },
+  audit(data: DisposeRecodeTypes.AuditParam) {
+    return post('/dispose_record/audit', data)
+  },
   statistics(date: string) {
     return get<DisposeRecodeTypes.StatisticsResult>('/dispose_record/statistics', {date})
   },

src/pages/dispose-recode/dispose-recode.d.ts

@@ -21,6 +21,10 @@ declare global {
       timeOutStatus: string
       timeOutStatusTxt: string
       tspPhotos?: string[]
+      zcPhotos?: string[]
+      auditStatus: 'DaiShenHe' | 'YiShenHe' | 'YouWenTi'
+      auditStatusTxt: string
+      problemDesc: string
     }
 
     interface SearchParam {
@@ -33,5 +37,11 @@ declare global {
         [key: string]: number[]
       }
     }
+
+    interface AuditParam {
+      id: string
+      auditStatus: 'DaiShenHe' | 'YiShenHe' | 'YouWenTi'
+      problemDesc: string
+    }
   }
 }