票据详情和审核页面的布局的修改

src/views/ticket/manage/components/form-edit.vue

@@ -3,8 +3,9 @@
   <a-button
     v-permission="['BILL_QUERY']"
     v-if="props.isCreate"
-    type="primary"
     size="small"
+    type="primary"
+    :style="{ border: '0px' }"
     @click="handleClick"
   >
     <template #icon><icon-plus /></template>
@@ -16,8 +17,8 @@
     v-permission="['BILL_UPDATE']"
     v-if="!props.isCreate"
     size="small"
-    type="primary"
+    type="outline"
-    :style="{ marginRight: '10px', padding: '7px' }"
+    :style="{ marginRight: '10px', padding: '7px', border: '0px' }"
     @click="handleClick"
   >
     <template #icon><icon-edit /></template>
@@ -38,6 +39,7 @@
         :rules="[
           { required: true, message: t('ticket.info.companyName.required') },
         ]"
+        style="line-height: 18px"
       >
         <a-input
           v-model="formData.companyName"
@@ -410,8 +412,6 @@ const handleOk = async () => {
 
 // 暂存
 const handleStorage = async () => {
-  const valid = await createEditRef.value?.validate();
-  if (!valid) {
   formData.value.submit = false;
   // 新增
   if (props.isCreate) {
@@ -447,7 +447,6 @@ const handleStorage = async () => {
   fileList.value = [];
   emit('refresh');
   setVisible(false);
-  }
 };
 
 // 关闭

src/views/ticket/manage/components/ticket-edit.vue

@@ -5,7 +5,7 @@
     v-if="props.isDetail"
     type="outline"
     size="small"
-    :style="{ marginRight: '10px', padding: '7px' }"
+    :style="{ marginRight: '10px', padding: '7px', border: '0px' }"
     @click="handleClick"
   >
     <template #icon><icon-eye /></template>
@@ -16,9 +16,9 @@
   <a-button
     v-permission="['BILL_AUDIT']"
     v-if="!props.isDetail"
+    type="outline"
     size="small"
-    type="primary"
+    :style="{ marginRight: '10px', padding: '7px', border: '0px' }"
-    :style="{ marginRight: '10px', padding: '7px' }"
     @click="handleClick"
   >
     <template #icon><icon-search /></template>
@@ -31,83 +31,152 @@
     @cancel="handleCancel"
   >
     <template #title>{{ modalTitle }}</template>
-    <a-form ref="createEditRef" :model="formData" :style="{ width: '650px' }">
+    <a-form
-      <a-form-item field="companyName" :label="$t('ticket.info.companyName')">
+      ref="createEditRef"
-        <div>
+      :label-col-props="{ span: 8 }"
-          {{ formData.companyName }}
+      :wrapper-col-props="{ span: 10 }"
-        </div>
+      label-align="right"
-      </a-form-item>
+      :model="formData"
-
+      :style="{ width: '650px' }"
-      <a-form-item field="title" :label="$t('ticket.info.title')">
+    >
+      <a-row>
+        <a-col :span="12">
+          <a-form-item
+            field="title"
+            :label="$t('ticket.info.title')"
+            style="margin-bottom: 0px"
+          >
             <div>
               {{ formData.title }}
             </div>
           </a-form-item>
+        </a-col>
 
-      <a-form-item field="body" :label="$t('ticket.info.body')">
+        <a-col :span="12"
-        <div>
+          ><a-form-item
-          {{ formData.body }}
+            field="money"
-        </div>
+            :label="$t('ticket.info.money')"
-      </a-form-item>
+            style="margin-bottom: 0px"
-
+          >
-      <a-form-item field="money" :label="$t('ticket.info.money')">
             <div>
               {{ formData.money }}
             </div>
           </a-form-item>
+        </a-col>
+      </a-row>
 
-      <a-form-item field="createTime" :label="$t('ticket.info.createTime')">
+      <a-row>
+        <a-col :span="12">
+          <a-form-item
+            field="contactEmail"
+            :label="$t('ticket.info.contactEmail')"
+            style="margin-bottom: 0px"
+          >
+            <div>
+              {{ formData.contactEmail }}
+            </div>
+          </a-form-item></a-col
+        >
+
+        <a-col :span="12">
+          <a-form-item
+            field="createTime"
+            :label="$t('ticket.info.createTime')"
+            style="margin-bottom: 0px"
+          >
             <div>
               {{ dayjs(formData.createTime).format('YYYY-MM-DD') }}
             </div>
           </a-form-item>
+        </a-col>
+      </a-row>
 
-      <a-form-item field="contactEmail" :label="$t('ticket.info.contactEmail')">
+      <a-row>
-        <div>
+        <a-col :span="12">
-          {{ formData.contactEmail }}
+          <a-form-item
-        </div>
+            field="deptId"
+            :label="$t('ticket.info.dept')"
+            style="margin-bottom: 0px"
+          >
+            {{ formData.deptName }}
           </a-form-item>
+        </a-col>
 
-      <a-form-item field="type" :label="$t('ticket.info.type')">
+        <a-col :span="12">
+          <!-- 审核员 -->
+          <a-form-item
+            field="auditorId"
+            :label="$t('ticket.info.auditor')"
+            style="margin-bottom: 0px"
+          >
+            {{ formData.auditor }}
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-row>
+        <a-col :span="12">
+          <a-form-item
+            field="type"
+            :label="$t('ticket.info.type')"
+            style="margin-bottom: 0px"
+          >
             <div>
               {{ formData.type }}
             </div>
           </a-form-item>
+        </a-col>
 
-      <a-form-item field="deptId" :label="$t('ticket.info.dept')">
+        <a-col :span="12">
-        {{ formData.deptName }}
-      </a-form-item>
-
-      <!-- 审核员 -->
-      <a-form-item field="auditorId" :label="$t('ticket.info.auditor')">
-        {{ formData.auditor }}
-      </a-form-item>
-
-      <!-- 审核状态 -->
           <a-form-item
-        field="status"
+            field="body"
-        :label="$t('ticket.info.status')"
+            :label="$t('ticket.info.body')"
-        v-if="props.isDetail"
+            style="margin-bottom: 0px"
           >
+            <div>
+              {{ formData.body }}
+            </div>
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <!-- 详情 -->
+      <a-row v-if="props.isDetail">
+        <a-col :span="12">
+          <a-form-item field="status" :label="$t('ticket.info.status')">
             <div>
               {{ formData.status }}
             </div>
           </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item field="comment" :label="$t('ticket.info.comment')">
+            <div>{{ formData.comment || '无' }}</div>
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <!-- 审核 -->
+      <div v-else style="margin-left: -165px">
         <a-form-item
           field="status"
-        v-else
           :label="$t('ticket.info.status')"
           :disabled="props.isDetail"
           :validate-trigger="['change', 'input']"
-        :rules="[{ required: true, message: t('ticket.info.status.required') }]"
+          :rules="[
+            { required: true, message: t('ticket.info.status.required') },
+          ]"
+          style="margin-bottom: 5px"
+        >
+          <a-radio-group
+            v-model="formData.submit"
+            default-value="true"
+            :span="8"
           >
-        <a-radio-group v-model="formData.submit" default-value="true">
             <a-radio value="true">{{ t('pass') }}</a-radio>
             <a-radio value="false">{{ t('failed') }}</a-radio>
           </a-radio-group>
         </a-form-item>
-
-      <!-- 审核意见 -->
         <a-form-item
           field="comment"
           :label="$t('ticket.info.comment')"
@@ -115,12 +184,14 @@
         >
           <a-textarea v-model="formData.comment" style="height: 200px" />
         </a-form-item>
-      <a-form-item field="comment" :label="$t('ticket.info.comment')" v-else>
+      </div>
-        <div>{{ formData.comment || '无' }}</div>
-      </a-form-item>
 
       <!-- 附件 -->
-      <a-form-item field="attachment" :label="$t('ticket.info.attachment')">
+      <a-form-item
+        field="attachment"
+        :label="$t('ticket.info.attachment')"
+        style="margin-left: -110px"
+      >
         <a-upload
           :file-list="fileList"
           :custom-request="Onchange"
@@ -133,6 +204,7 @@
         />
         <div v-else>无</div>
       </a-form-item>
+      <!-- </a-row> -->
     </a-form>
   </a-modal>
 </template>
@@ -143,7 +215,7 @@ import useVisible from '@/hooks/visible';
 import { computed, PropType, ref } from 'vue';
 import { FormInstance } from '@arco-design/web-vue/es/form';
 import { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
-import { Message } from '@arco-design/web-vue';
+import { Button, Message } from '@arco-design/web-vue';
 import { useTicketStore, useUserStore, useRoleStore } from '@/store';
 import { TicketRecord } from '@/api/ticket';
 import { deptList } from '@/api/dept';
@@ -285,4 +357,5 @@ const handleCancel = async () => {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+</style>

src/views/ticket/manage/index.vue

@@ -2,7 +2,8 @@
   <div class="container">
     <Breadcrumb :items="['menu.ticket', 'menu.ticket.manage']" />
     <a-card class="general-card">
-      <a-tabs default-active-key="PASS" @change="changeTop">
+      <a-tabs default-active-key="" @change="changeTop">
+        <a-tab-pane key="" :title="t('set')"> </a-tab-pane>
         <a-tab-pane key="PASS" :title="t('pass')"> </a-tab-pane>
         <a-tab-pane key="FAILED" :title="t('failed')"> </a-tab-pane>
         <a-tab-pane key="EXAMINE" :title="t('unreviewed')"> </a-tab-pane>
@@ -135,7 +136,7 @@
         <a-col :span="12">
           <a-space>
             <TicketForm
-              v-if="formModel.status === 'SUBMIT'"
+              v-if="formModel.status === 'SUBMIT' || formModel.status === ''"
               ref="createEditRef"
               :prem="formModel"
               :is-create="true"
@@ -284,18 +285,16 @@
 
           <a-popconfirm
             :content="t('Confirm the deletion of this ticket')"
-            type="error"
             @ok="handleDelete(record)"
           >
             <a-button
-              type="primary"
+              type="outline"
               size="small"
-              status="danger"
               v-permission="['BILL_DELETE']"
               v-if="
                 record.status === '待提交' || record.status === '审核未通过'
               "
-              style="padding: 7px"
+              style="padding: 7px; border: 0px"
             >
               <template #icon><icon-delete /></template>
               {{ $t('delete') }}
@@ -354,7 +353,7 @@ const generateFormModel = () => {
     title: '',
     type: '',
     // 默认先展示票据审核通过的
-    status: 'PASS',
+    status: '',
     time: [],
     userName: '',
     minMoney: '',

src/views/ticket/manage/locale/zh-CN.ts

@@ -48,6 +48,7 @@ export default {
   'tax': '税务支票',
   'other': '其他支票',
   
+  'set':'票据集合',
   'unsubmitted': '待提交',
   'unreviewed': '待审核',
   'pass': '审核通过',