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

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"
-    :style="{ marginRight: '10px', padding: '7px' }"
+    type="outline"
+    :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,44 +412,41 @@ const handleOk = async () => {
 
 // 暂存
 const handleStorage = async () => {
-  const valid = await createEditRef.value?.validate();
-  if (!valid) {
-    formData.value.submit = false;
-    // 新增
-    if (props.isCreate) {
-      const res = await ticketStore.createTicket(formData.value);
+  formData.value.submit = false;
+  // 新增
+  if (props.isCreate) {
+    const res = await ticketStore.createTicket(formData.value);
+    if (res.status === 200) {
+      Message.success({
+        content: t('storage.sucess'),
+        duration: 5 * 1000,
+      });
+    }
+  } else {
+    // 修改
+    formDifer = diffDataForm(formData.value, formDifer);
+    if (Object.keys(formDifer).length === 0) {
+      Message.success({
+        content: t('unmodified'),
+        duration: 3 * 1000,
+      });
+    } else {
+      formDifer.id = formData.value.id;
+      formDifer.submit = false;
+      const res = await ticketStore.updateTicket(formDifer);
       if (res.status === 200) {
         Message.success({
-          content: t('storage.sucess'),
+          content: t('modify.sucess'),
           duration: 5 * 1000,
         });
       }
-    } else {
-      // 修改
-      formDifer = diffDataForm(formData.value, formDifer);
-      if (Object.keys(formDifer).length === 0) {
-        Message.success({
-          content: t('unmodified'),
-          duration: 3 * 1000,
-        });
-      } else {
-        formDifer.id = formData.value.id;
-        formDifer.submit = false;
-        const res = await ticketStore.updateTicket(formDifer);
-        if (res.status === 200) {
-          Message.success({
-            content: t('modify.sucess'),
-            duration: 5 * 1000,
-          });
-        }
-      }
     }
-    createEditRef.value?.resetFields();
-    attachList.value = [];
-    fileList.value = [];
-    emit('refresh');
-    setVisible(false);
   }
+  createEditRef.value?.resetFields();
+  attachList.value = [];
+  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' }"
+    :style="{ marginRight: '10px', padding: '7px', border: '0px' }"
     @click="handleClick"
   >
     <template #icon><icon-search /></template>
@@ -31,96 +31,167 @@
     @cancel="handleCancel"
   >
     <template #title>{{ modalTitle }}</template>
-    <a-form ref="createEditRef" :model="formData" :style="{ width: '650px' }">
-      <a-form-item field="companyName" :label="$t('ticket.info.companyName')">
-        <div>
-          {{ formData.companyName }}
-        </div>
-      </a-form-item>
+    <a-form
+      ref="createEditRef"
+      :label-col-props="{ span: 8 }"
+      :wrapper-col-props="{ span: 10 }"
+      label-align="right"
+      :model="formData"
+      :style="{ width: '650px' }"
+    >
+      <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="title" :label="$t('ticket.info.title')">
-        <div>
-          {{ formData.title }}
-        </div>
-      </a-form-item>
+        <a-col :span="12"
+          ><a-form-item
+            field="money"
+            :label="$t('ticket.info.money')"
+            style="margin-bottom: 0px"
+          >
+            <div>
+              {{ formData.money }}
+            </div>
+          </a-form-item>
+        </a-col>
+      </a-row>
 
-      <a-form-item field="body" :label="$t('ticket.info.body')">
-        <div>
-          {{ formData.body }}
-        </div>
-      </a-form-item>
+      <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-form-item field="money" :label="$t('ticket.info.money')">
-        <div>
-          {{ formData.money }}
-        </div>
-      </a-form-item>
+        <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="createTime" :label="$t('ticket.info.createTime')">
-        <div>
-          {{ dayjs(formData.createTime).format('YYYY-MM-DD') }}
-        </div>
-      </a-form-item>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item
+            field="deptId"
+            :label="$t('ticket.info.dept')"
+            style="margin-bottom: 0px"
+          >
+            {{ formData.deptName }}
+          </a-form-item>
+        </a-col>
 
-      <a-form-item field="contactEmail" :label="$t('ticket.info.contactEmail')">
-        <div>
-          {{ formData.contactEmail }}
-        </div>
-      </a-form-item>
+        <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-form-item field="type" :label="$t('ticket.info.type')">
-        <div>
-          {{ formData.type }}
-        </div>
-      </a-form-item>
+      <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')">
-        {{ formData.deptName }}
-      </a-form-item>
+        <a-col :span="12">
+          <a-form-item
+            field="body"
+            :label="$t('ticket.info.body')"
+            style="margin-bottom: 0px"
+          >
+            <div>
+              {{ formData.body }}
+            </div>
+          </a-form-item>
+        </a-col>
+      </a-row>
 
-      <!-- 审核员 -->
-      <a-form-item field="auditorId" :label="$t('ticket.info.auditor')">
-        {{ formData.auditor }}
-      </a-form-item>
+      <!-- 详情 -->
+      <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>
 
-      <!-- 审核状态 -->
-      <a-form-item
-        field="status"
-        :label="$t('ticket.info.status')"
-        v-if="props.isDetail"
-      >
-        <div>
-          {{ formData.status }}
-        </div>
-      </a-form-item>
-      <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') }]"
-      >
-        <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')"
-        v-if="!props.isDetail"
-      >
-        <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>{{ formData.comment || '无' }}</div>
-      </a-form-item>
+      <!-- 审核 -->
+      <div v-else style="margin-left: -165px">
+        <a-form-item
+          field="status"
+          :label="$t('ticket.info.status')"
+          :disabled="props.isDetail"
+          :validate-trigger="['change', 'input']"
+          :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 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')"
+          v-if="!props.isDetail"
+        >
+          <a-textarea v-model="formData.comment" style="height: 200px" />
+        </a-form-item>
+      </div>
 
       <!-- 附件 -->
-      <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': '审核通过',