feat: 新增审核搜索&首页图高度调整

sanmu
1 parent 6094d271
Showing 6 changed files with 206 additions and 277 deletions
src/views/dashboard/analysis/components/VisitAnalysis.vue
src/views/project/approve/FieldPanel.vue
src/views/project/approve/ProfitPanel.vue
src/views/project/approve/ReportPanel.vue
src/views/project/approve/data.ts
src/views/project/approve/index.vue
 <template>
-  <div ref="chartRef" :style="{ height, width }"></div>
+  <div ref="chartRef" :style="{ height: '500px', width }"></div>
 </template>
 <script lang="ts" setup>
@@ -48,7 +48,7 @@
         {
           type: 'value',
           max: maxY + 20,
-          splitNumber: 4,
+          splitNumber: 20,
           axisTick: {
             show: false,
           },
 <template>
-  <PageWrapper contentBackground>
-    <BasicTable @register="registerTable">
-      <template #form-custom> custom-slot </template>
-
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'picUrl'">
-          <img
-            :width="100"
-            :height="100"
-            :src="record?.orderBaseInfo?.smallPicUrl"
-            @click="handlePreview(record?.orderBaseInfo?.picUrl)"
-          />
-        </template>
-        <template v-if="column.key === 'action'">
-          <TableAction
-            :actions="[
-              {
-                label: '详情',
-                // icon: 'ic:outline-delete-outline',
-                onClick: handleDetail.bind(null, record),
-              },
-            ]"
-          />
-        </template>
+  <BasicTable @register="registerTable" className="p-0">
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'picUrl'">
+        <img
+          :width="50"
+          :height="50"
+          :src="record?.orderBaseInfo?.smallPicUrl"
+          @click="handlePreview(record?.orderBaseInfo?.picUrl)"
+        />
+      </template>
+      <template v-if="column.key === 'action'">
+        <TableAction
+          :actions="[
+            {
+              label: '详情',
+              // icon: 'ic:outline-delete-outline',
+              onClick: handleDetail.bind(null, record),
+            },
+          ]"
+        />
       </template>
-    </BasicTable>
-    <BasicDrawer
-      width="500"
-      :showFooter="!isApproved && role === ROLE.ADMIN"
-      @register="registerDrawer"
-      title="申请信息"
-      okText="通过"
-      @ok="handleTrue"
-    >
-      <BaseInfo :baseInfos="baseInfos" />
-      <h2 className="mt-8">基本信息申请字段</h2>
-      <div>{{ fieldInfos.baseFields.join(' , ') }}</div>
+    </template>
+  </BasicTable>
+  <BasicDrawer
+    width="500"
+    :showFooter="!isApproved && role === ROLE.ADMIN"
+    @register="registerDrawer"
+    title="申请信息"
+    okText="通过"
+    @ok="handleTrue"
+  >
+    <BaseInfo :baseInfos="baseInfos" />
+    <h2 className="mt-8">基本信息申请字段</h2>
+    <div>{{ fieldInfos.baseFields.join(' , ') }}</div>
-      <h2 className="mt-8">利润分析表申请字段</h2>
-      <div>
-        {{ fieldInfos.profitFields.join(' , ') }}
-      </div>
+    <h2 className="mt-8">利润分析表申请字段</h2>
+    <div>
+      {{ fieldInfos.profitFields.join(' , ') }}
+    </div>
-      <h2 className="mt-8">项目报告书申请字段</h2>
-      <div>
-        <span>{{ fieldInfos.reportFields.join(' , ') }}</span>
-      </div>
+    <h2 className="mt-8">项目报告书申请字段</h2>
+    <div>
+      <span>{{ fieldInfos.reportFields.join(' , ') }}</span>
+    </div>
-      <h2 className="mt-8">跟单信息申请字段</h2>
-      <div>
-        <span>{{ fieldInfos.trackStageFields.join(' , ') }}</span>
-      </div>
+    <h2 className="mt-8">跟单信息申请字段</h2>
+    <div>
+      <span>{{ fieldInfos.trackStageFields.join(' , ') }}</span>
+    </div>
-      <h2 className="mt-8">质量检测申请字段</h2>
-      <div>
-        <span>{{ fieldInfos.inspectionStageFields.join(' , ') }}</span>
-      </div>
-      <template #appendFooter>
-        <a-button @click="handleFalse"> 不通过</a-button>
-      </template>
-    </BasicDrawer>
-    <MsgModal v-if="msgVisible" @msg-modal-close="handleMsgModalClose" />
-  </PageWrapper>
+    <h2 className="mt-8">质量检测申请字段</h2>
+    <div>
+      <span>{{ fieldInfos.inspectionStageFields.join(' , ') }}</span>
+    </div>
+    <template #appendFooter>
+      <a-button @click="handleFalse"> 不通过</a-button>
+    </template>
+  </BasicDrawer>
+  <MsgModal v-if="msgVisible" @msg-modal-close="handleMsgModalClose" />
 </template>
 <script lang="ts">
   import MsgModal from './MsgModal.vue';
   import { computed, defineComponent, ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { PageWrapper } from '/@/components/Page';
   import { BasicDrawer, useDrawer } from '/@/components/Drawer';
   import { approveAuditApi, getApprovedListApi, getWaitListApi } from '/@/api/project/approve';
   import {
@@ -82,12 +77,12 @@
   import { useUserStoreWithOut } from '/@/store/modules/user';
   import BaseInfo from './BaseInfo.vue';
   import { createImgPreview } from '/@/components/Preview';
+  import { getFormConfig } from './data';
   const userStore = useUserStoreWithOut();
   export default defineComponent({
     components: {
-      PageWrapper,
       BasicTable,
       BasicDrawer,
       TableAction,
@@ -153,12 +148,12 @@
       }
       const [registerTable, { reload }] = useTable({
+        scroll: false,
         api: props.isApproved ? getApprovedListApi : getWaitListApi,
         searchInfo: { type: 0 },
-
         columns,
-        // useSearchForm: true,
-        // formConfig: getFormConfig(),
+        useSearchForm: true,
+        formConfig: getFormConfig(),
         rowKey: 'id',
         actionColumn: {
           width: 160,
 <template>
-  <PageWrapper contentBackground>
-    <BasicTable @register="registerTable">
-      <template #form-custom> custom-slot </template>
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'picUrl'">
-          <img
-            :width="100"
-            :height="100"
-            :src="record?.orderBaseInfo?.smallPicUrl"
-            @click="handlePreview(record?.orderBaseInfo?.picUrl)"
-          />
-        </template>
-        <template v-if="column.key === 'action'">
-          <TableAction
-            :actions="[
-              {
-                label: '详情',
-                // icon: 'ic:outline-delete-outline',
-                onClick: handleDetail.bind(null, record),
-              },
-            ]"
-          />
-        </template>
+  <BasicTable @register="registerTable" className="p-0">
+    <template #form-custom> custom-slot </template>
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'picUrl'">
+        <img
+          :width="50"
+          :height="50"
+          :src="record?.orderBaseInfo?.smallPicUrl"
+          @click="handlePreview(record?.orderBaseInfo?.picUrl)"
+        />
       </template>
-    </BasicTable>
-    <BasicDrawer
-      :showFooter="!isApproved && role === ROLE.ADMIN"
-      @register="registerDrawer"
-      title="申请信息"
-      okText="通过"
-      @ok="handleTrue"
-    >
-      <BaseInfo :baseInfos="baseInfos" />
-      <h2>利润分析信息</h2>
-      <div v-for="field in fieldInfos" :key="field">
-        <span className="w-[140px] inline-block text-right mr-3">{{ field.label }}:</span
-        ><span>{{ field.value }}</span>
-      </div>
-      <template #appendFooter>
-        <a-button @click="handleFalse"> 不通过</a-button>
+      <template v-if="column.key === 'action'">
+        <TableAction
+          :actions="[
+            {
+              label: '详情',
+              // icon: 'ic:outline-delete-outline',
+              onClick: handleDetail.bind(null, record),
+            },
+          ]"
+        />
       </template>
-    </BasicDrawer>
-    <MsgModal v-if="msgVisible" @msg-modal-close="handleMsgModalClose" />
-  </PageWrapper>
+    </template>
+  </BasicTable>
+  <BasicDrawer
+    :showFooter="!isApproved && role === ROLE.ADMIN"
+    @register="registerDrawer"
+    title="申请信息"
+    okText="通过"
+    @ok="handleTrue"
+  >
+    <BaseInfo :baseInfos="baseInfos" />
+    <h2>利润分析信息</h2>
+    <div v-for="field in fieldInfos" :key="field">
+      <span className="w-[140px] inline-block text-right mr-3">{{ field.label }}:</span
+      ><span>{{ field.value }}</span>
+    </div>
+    <template #appendFooter>
+      <a-button @click="handleFalse"> 不通过</a-button>
+    </template>
+  </BasicDrawer>
+  <MsgModal v-if="msgVisible" @msg-modal-close="handleMsgModalClose" />
 </template>
 <script lang="ts">
   import MsgModal from './MsgModal.vue';
   import { computed, defineComponent, ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { PageWrapper } from '/@/components/Page';
   import { BasicDrawer, useDrawer } from '/@/components/Drawer';
   import { approveAuditApi, getApprovedListApi, getWaitListApi } from '/@/api/project/approve';
@@ -57,12 +54,12 @@
   import { useUserStoreWithOut } from '/@/store/modules/user';
   import BaseInfo from './BaseInfo.vue';
   import { createImgPreview } from '/@/components/Preview';
+  import { getFormConfig } from './data';
   const userStore = useUserStoreWithOut();
   export default defineComponent({
     components: {
-      PageWrapper,
       BasicTable,
       BasicDrawer,
       TableAction,
@@ -123,10 +120,12 @@
       const [registerTable, { reload }] = useTable({
         api: props.isApproved ? getApprovedListApi : getWaitListApi,
         searchInfo: { type: 10 },
-
+        // scroll: {
+        //   scrollToFirstRowOnChange: true,
+        // },
         columns,
-        // useSearchForm: true,
-        // formConfig: getFormConfig(),
+        useSearchForm: true,
+        formConfig: getFormConfig(),
         rowKey: 'id',
         actionColumn: {
           width: 160,
 <template>
-  <PageWrapper contentBackground>
-    <BasicTable @register="registerTable">
-      <template #form-custom> custom-slot </template>
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'picUrl'">
-          <img
-            :width="100"
-            :height="100"
-            :src="record?.orderBaseInfo?.smallPicUrl"
-            @click="handlePreview(record?.orderBaseInfo?.picUrl)"
-          />
-        </template>
-        <template v-if="column.key === 'action'">
-          <TableAction
-            :actions="[
-              {
-                label: '详情',
-                // icon: 'ic:outline-delete-outline',
-                onClick: handleDetail.bind(null, record),
-              },
-            ]"
-          />
-        </template>
+  <BasicTable @register="registerTable" className="p-0">
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'picUrl'">
+        <img
+          :width="100"
+          :height="100"
+          :src="record?.orderBaseInfo?.smallPicUrl"
+          @click="handlePreview(record?.orderBaseInfo?.picUrl)"
+        />
       </template>
-    </BasicTable>
-    <BasicDrawer
-      :showFooter="!isApproved && role === ROLE.ADMIN"
-      @register="registerDrawer"
-      title="申请信息"
-      okText="通过"
-      @ok="handleTrue"
-    >
-      <BaseInfo :baseInfos="baseInfos" />
-      <h2>项目报告书信息</h2>
-      <div v-for="field in fieldInfos" :key="field">
-        <span className="w-[140px] inline-block text-right mr-3">{{ field.label }}:</span
-        ><span>{{ field.value }}</span>
-      </div>
-      <template #appendFooter>
-        <a-button @click="handleFalse"> 不通过</a-button>
+      <template v-if="column.key === 'action'">
+        <TableAction
+          :actions="[
+            {
+              label: '详情',
+              // icon: 'ic:outline-delete-outline',
+              onClick: handleDetail.bind(null, record),
+            },
+          ]"
+        />
       </template>
-    </BasicDrawer>
-    <MsgModal v-if="msgVisible" @msg-modal-close="handleMsgModalClose" />
-  </PageWrapper>
+    </template>
+  </BasicTable>
+  <BasicDrawer
+    :showFooter="!isApproved && role === ROLE.ADMIN"
+    @register="registerDrawer"
+    title="申请信息"
+    okText="通过"
+    @ok="handleTrue"
+  >
+    <BaseInfo :baseInfos="baseInfos" />
+    <h2>项目报告书信息</h2>
+    <div v-for="field in fieldInfos" :key="field">
+      <span className="w-[140px] inline-block text-right mr-3">{{ field.label }}:</span
+      ><span>{{ field.value }}</span>
+    </div>
+    <template #appendFooter>
+      <a-button @click="handleFalse"> 不通过</a-button>
+    </template>
+  </BasicDrawer>
+  <MsgModal v-if="msgVisible" @msg-modal-close="handleMsgModalClose" />
 </template>
 <script lang="ts">
   import MsgModal from './MsgModal.vue';
   import { computed, defineComponent, ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { PageWrapper } from '/@/components/Page';
   import { BasicDrawer, useDrawer } from '/@/components/Drawer';
   import { approveAuditApi, getApprovedListApi, getWaitListApi } from '/@/api/project/approve';
@@ -57,12 +53,12 @@
   import { useUserStoreWithOut } from '/@/store/modules/user';
   import BaseInfo from './BaseInfo.vue';
   import { createImgPreview } from '/@/components/Preview';
+  import { getFormConfig } from './data';
   const userStore = useUserStoreWithOut();
   export default defineComponent({
     components: {
-      PageWrapper,
       BasicTable,
       BasicDrawer,
       BaseInfo,
@@ -124,8 +120,8 @@
         searchInfo: { type: 20 },
         columns,
-        // useSearchForm: true,
-        // formConfig: getFormConfig(),
+        useSearchForm: true,
+        formConfig: getFormConfig(),
         rowKey: 'id',
         actionColumn: {
           width: 160,
+import { useOrderInfo } from '/@/hooks/component/order';
+import { useOrderStoreWithOut } from '/@/store/modules/order';
+
+export function getFormConfig() {
+  const orderStore = useOrderStoreWithOut();
+
+  const { innerNo } = useOrderInfo(orderStore);
+
+  return {
+    labelWidth: 100,
+    schemas: [
+      {
+        field: `innerNo`,
+        label: `内部编号`,
+        component: 'Select',
+        colProps: {
+          span: 8,
+        },
+        labelWidth: 70,
+        componentProps: {
+          options: innerNo,
+          showSearch: true,
+          mode: 'multiple',
+        },
+      },
+    ],
+  };
+}
 <template>
-  <PageWrapper contentBackground>
+  <div className="approve-page px-4 bg-white">
     <a-tabs default-active-key="1" v-model:activeKey="currentKey">
       <a-tab-pane key="1" tab="字段待审核">
         <FieldPanel />
       </a-tab-pane>
-      <a-tab-pane key="2" tab="字段已审核">
-        <FieldPanel isApproved />
-      </a-tab-pane>
       <a-tab-pane key="3" tab="利润分析待审核">
         <ProfitPanel />
       </a-tab-pane>
-      <a-tab-pane key="4" tab="利润分析已审核">
-        <ProfitPanel isApproved />
-      </a-tab-pane>
       <a-tab-pane key="5" tab="项目报告书待审核">
         <ReportPanel />
       </a-tab-pane>
+      <a-tab-pane key="2" tab="字段已审核">
+        <FieldPanel isApproved />
+      </a-tab-pane>
+      <a-tab-pane key="4" tab="利润分析已审核">
+        <ProfitPanel isApproved />
+      </a-tab-pane>
       <a-tab-pane key="6" tab="项目报告书已审核">
         <ReportPanel isApproved />
       </a-tab-pane>
     </a-tabs>
-  </PageWrapper>
+  </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { defineComponent, onMounted, ref } from 'vue';
   import { Tabs } from 'ant-design-vue';
-  import { PageWrapper } from '/@/components/Page';
   import ReportPanel from './ReportPanel.vue';
   import ProfitPanel from './ProfitPanel.vue';
   import FieldPanel from './FieldPanel.vue';
-  import { approveAuditApi, getWaitListApi, getApprovedListApi } from '/@/api/project/approve';
+  import { useOrderStoreWithOut } from '/@/store/modules/order';
+
+  const orderStore = useOrderStoreWithOut();
   export default defineComponent({
     components: {
-      PageWrapper,
-      BasicTable,
-      TableAction,
       [Tabs.name]: Tabs,
       [Tabs.TabPane.name]: Tabs.TabPane,
       ReportPanel,
@@ -47,116 +44,30 @@
       const checkedKeys = ref<Array<string | number>>([]);
       const currentKey = ref('1');
-      const [registerTable1, { reload }] = useTable({
-        api: getWaitListApi,
-        columns: [
-          {
-            title: '申请人',
-            dataIndex: 'createBy',
-            width: 150,
-          },
-          {
-            title: '申请字段',
-            dataIndex: 'fields',
-            width: 600,
-          },
-          {
-            title: '订单号',
-            dataIndex: 'no6',
-          },
-          {
-            title: '订单字段1',
-            dataIndex: 'no5',
-          },
-          {
-            title: '订单字段2',
-            dataIndex: 'no4',
-          },
-          {
-            title: '订单字段3',
-            dataIndex: 'no3',
-          },
-
-          {
-            title: '订单字段5',
-            dataIndex: 'no1',
-          },
-        ],
-        // useSearchForm: true,
-        // formConfig: getFormConfig(),
-        rowKey: 'id',
-        actionColumn: {
-          width: 160,
-          title: 'Action',
-          dataIndex: 'action',
-          // slots: { customRender: 'action' },
-        },
-      });
-
-      const [registerTable2] = useTable({
-        api: getApprovedListApi,
-        columns: [
-          {
-            title: '申请人',
-            dataIndex: 'createBy',
-            width: 150,
-          },
-          // {
-          //   title: '申请字段',
-          //   dataIndex: 'fields',
-          //   width: 600,
-          // },
-        ],
-        rowKey: 'id',
+      onMounted(async () => {
+        await orderStore.getDict();
       });
-      // function getFormValues() {
-      //   console.log(getForm1().getFieldsValue());
-      // }
-
-      function onSelect(record, selected) {
-        if (selected) {
-          checkedKeys.value = [...checkedKeys.value, record.id];
-        } else {
-          checkedKeys.value = checkedKeys.value.filter((id) => id !== record.id);
-        }
-      }
-      function onSelectAll(selected, selectedRows, changeRows) {
-        const changeIds = changeRows.map((item) => item.id);
-        if (selected) {
-          checkedKeys.value = [...checkedKeys.value, ...changeIds];
-        } else {
-          checkedKeys.value = checkedKeys.value.filter((id) => {
-            return !changeIds.includes(id);
-          });
-        }
-      }
-      function handleEdit(record, e) {
-        e?.stopPropagation();
-        return false;
-      }
-
-      async function handleTrue(record) {
-        await approveAuditApi({ status: 10, id: record.id });
-        reload();
-      }
-
-      async function handleFalse(record) {
-        await approveAuditApi({ status: 20, id: record.id });
-        reload();
-      }
-
       return {
-        registerTable1,
-        registerTable2,
         checkedKeys,
         currentKey,
-        onSelect,
-        handleEdit,
-        onSelectAll,
-        handleTrue,
-        handleFalse,
       };
     },
   });
 </script>
+
+<style>
+  .approve-page .vben-basic-table .ant-table-wrapper {
+    margin-bottom: 0;
+  }
+
+  .approve-page .vben-basic-table-form-container {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  .approve-page .vben-basic-table-form-container .ant-form {
+    margin-bottom: 0;
+    padding-top: 0;
+  }
+</style>