From a9c89fcdd1eeb75cc69a378beec10b435d8069d5 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Wed, 27 Sep 2023 16:33:48 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A3=8E=E6=8E=A7=E3=80=81=E4=B8=93=E5=AE=B6?=
 =?UTF-8?q?=E5=A7=94=E5=91=98=E4=BC=9A=E7=9B=B8=E5=85=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bank.ts                           |   4 +
 src/assets/images/icon7-1.png             | Bin 0 -> 2667 bytes
 src/layout/components/AppHeader.vue       |   5 +-
 src/layout/components/AppSidebar/Menu.vue |  16 ++-
 src/store/useProduct.ts                   |  20 +++-
 src/styles/form.scss                      | 116 +++++--------------
 src/views/product/Add.vue                 |  45 ++------
 src/views/product/Approve.vue             | 131 ++++++++++++++++++++++
 src/views/product/CardList.vue            |  17 ++-
 src/views/product/Config.vue              | 123 +-------------------
 src/views/product/Detail.vue              |  59 +---------
 src/views/product/Info.vue                | 130 +++++++++++++++++++++
 src/views/product/List.vue                |  88 ++++++---------
 13 files changed, 384 insertions(+), 370 deletions(-)
 create mode 100644 src/assets/images/icon7-1.png
 create mode 100644 src/views/product/Approve.vue
 create mode 100644 src/views/product/Info.vue

diff --git a/src/api/bank.ts b/src/api/bank.ts
index b05769d..40dde5f 100644
--- a/src/api/bank.ts
+++ b/src/api/bank.ts
@@ -13,3 +13,7 @@ export const productElement = async (id: number): Promise<any> => (await axios.p
 export const findById = async (id: number): Promise<any> => (await axios.post(`/product/product/bank/products/findById?id=${id}`)).data;
 export const save = async (data: Record<string, any>): Promise<any> => (await axios.post(`/product/product/bank/products/save`, data)).data;
 export const riskSave = async (data: Record<string, any>): Promise<any> => (await axios.post(`/product/managerOfRiskControl/bankRiskControlAllocation/save`, data)).data;
+export const riskUpdate = async (data: Record<string, any>): Promise<any> => (await axios.post(`/product/managerOfRiskControl/bankRiskControlAllocation/update`, data)).data;
+export const riskById = async (id: number): Promise<any> => (await axios.post(`/product/managerOfRiskControl/bankRiskControlAllocation/findById?id=${id}`)).data;
+export const examineAndApprove = async (id: number | string, opinionDescription: string, status: number, approvalTime: string): Promise<any> =>
+  (await axios.post(`/product/product/bank/products/examineAndApprove?id=${id}&opinionDescription=${opinionDescription}&status=${status}&approvalTime=${approvalTime}`)).data;
diff --git a/src/assets/images/icon7-1.png b/src/assets/images/icon7-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..e3915388fb50a99908e368627aea12db62ee5df5
GIT binary patch
literal 2667
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
Z{{pMjNQT4vcP{_{002ovPDHLkV1m9W9E$(|

literal 0
HcmV?d00001

diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index f020df3..c895b3c 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -2,8 +2,9 @@
   <div class="flex justify-between items-center w-full py-6 px-5 overflow-hidden bg-transparent">
     <logo :collapse="collapse" />
     <div>
-      <el-button @click="switchRole(1)">切换产品经理</el-button>
-      <el-button @click="switchRole(2)">切换风控经理</el-button>
+      <el-button @click="switchRole(41)">切换产品经理</el-button>
+      <el-button @click="switchRole(42)">切换风控经理</el-button>
+      <el-button @click="switchRole(43)">切换专家委员会</el-button>
     </div>
     <div class="inline-flex items-center">
       <img class="mr-3 cursor-pointer"
diff --git a/src/layout/components/AppSidebar/Menu.vue b/src/layout/components/AppSidebar/Menu.vue
index 3cf3fca..9a638cf 100644
--- a/src/layout/components/AppSidebar/Menu.vue
+++ b/src/layout/components/AppSidebar/Menu.vue
@@ -1,6 +1,6 @@
 <template>
   <ul class="switch px-7 mt-5">
-    <template v-if="isProduct">
+    <template v-if="role == 41">
       <li :class="{ active: active == 1 }"
           @click="toPage('/product?type=0&i=1')">
         <img class="icon"
@@ -22,7 +22,7 @@
         <p class="text">企业产品</p>
       </li>
     </template>
-    <template v-else>
+    <template v-else-if="role == 42">
       <li :class="{ active: active == 1 }">
         <img class="icon"
              src="@/assets/images/icon1.png"
@@ -60,6 +60,16 @@
         <p class="text">贷后管理模型</p>
       </li>
     </template>
+    <li v-else
+        class="active">
+      <img class="icon"
+           src="@/assets/images/icon6.png"
+           alt="" />
+      <img class="icon-1"
+           src="@/assets/images/icon7-1.png"
+           alt="" />
+      <p class="text">审批产品</p>
+    </li>
   </ul>
 </template>
 
@@ -71,7 +81,7 @@ import { isShowMenu } from '@/store/useCurrentUser';
 const router = useRouter();
 const route = useRoute();
 const active = computed(() => route.query.i);
-const isProduct = computed(() => route.query.role == 1 || !route.query.role);
+const role = computed(() => route.query.role || 41);
 
 // 跳转
 const toPage = (path: string) => {
diff --git a/src/store/useProduct.ts b/src/store/useProduct.ts
index f06df61..d76d979 100644
--- a/src/store/useProduct.ts
+++ b/src/store/useProduct.ts
@@ -13,28 +13,36 @@ const state = reactive<Product>({
       name: '产品进度',
     },
     {
-      id: 1,
+      id: 295,
       name: '配置风控',
     },
     {
-      id: 2,
+      id: 296,
       name: '待审批',
     },
     {
-      id: 3,
+      id: 297,
       name: '审批通过',
     },
     {
-      id: 4,
+      id: 298,
       name: '审批不通过',
     },
     {
-      id: 5,
+      id: 299,
       name: '审批打回',
     },
   ],
 });
 
+export const productState = readonly(state);
+// 专家委员会产品进度（去除配置风控）
+export const getExpertStatus = (): Record<string, any>[] => {
+  const newStatus = JSON.parse(JSON.stringify(state.status));
+  newStatus.splice(1, 1);
+  return newStatus;
+};
+// 返回产品进度名称
 export const getStatus = (id: number | string): string => {
-  return state.status.find((e) => e.id === id).name;
+  return state.status.find((e) => e.id === id)?.name;
 };
diff --git a/src/styles/form.scss b/src/styles/form.scss
index e7209a1..b828ea8 100644
--- a/src/styles/form.scss
+++ b/src/styles/form.scss
@@ -1,19 +1,10 @@
-.forms {
-  &.step-form {
-    .step-name {
-      padding-top: 5px;
-    }
-  }
+.form {
+  @apply max-h-[calc(100vh-270px)] overflow-auto;
   .step {
-    position: relative;
-    padding-left: 42px;
+    @apply relative pl-[42px];
     &:before {
+      @apply absolute top-0 left-0 w-[30px] h-[30px];
       content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 30px;
-      height: 30px;
       background: url(../assets/images/config1.png) no-repeat;
     }
     &:nth-child(2):before {
@@ -33,88 +24,39 @@
     }
     &:after {
       content: '';
-      position: absolute;
-      top: 40px;
-      left: 14px;
-      width: 2px;
-      height: 87%;
-      background: #006bff;
+      @apply absolute top-[40px] left-[14px] w-[2px] h-[87%] bg-[#006bff];
     }
   }
   .step-name {
-    font-size: 14px;
-    font-weight: 600;
-    color: #006bff;
-  }
-  .line {
-    display: flex;
-    margin-bottom: 30px;
-    .label {
-      margin-right: 5px;
-      font-size: 14px;
-      font-weight: 600;
-      line-height: 32px;
-    }
-    .field-name {
-      font-size: 14px;
-      font-weight: 600;
-      line-height: 32px;
-      color: #333;
-    }
-    .tips {
-      font-size: 14px;
-      color: #686868;
-    }
-    .fields {
-      flex: 1;
-    }
-    .num-inputs {
-      display: flex;
-      align-items: center;
-      .el-input {
-        width: 200px;
-      }
-      .split {
-        margin: 0 10px;
-        color: #ccc;
-      }
-      .unit {
-        margin-left: 10px;
-        font-size: 14px;
-        color: #333;
-      }
-    }
-  }
-  .text {
-    font-size: 14px;
-    color: #333;
-    line-height: 32px;
+    @apply pl-[5px] text-sm font-semibold text-[#006bff];
   }
-  .submit {
-    padding: 15px 22px;
-    font-size: 14px;
-    line-height: 1;
-    color: #fff;
-    background: #006bff;
-    border-radius: 12px;
-    cursor: pointer;
-    &:hover {
-      opacity: 0.9;
-    }
+
+  :deep(.el-form-item__label) {
+    @apply font-semibold text-sm leading-[32px] text-black;
   }
-}
 
-.info {
-  .step-name {
-    @apply mb-3 text-sm font-semibold text-[#006bff];
+  .field-name {
+    @apply mb-3 text-sm font-semibold leading-[32px] text-[#333];
   }
-  .line {
-    @apply flex mb-2;
+  .tips {
+    @apply text-sm text-[#686868];
   }
-  .label {
-    @apply mr-1 text-sm font-semibold text-[#333] leading-[32px];
+  .num-inputs {
+    @apply flex items-center;
+    .el-input {
+      @apply w-[200px];
+    }
+    .split {
+      @apply mx-2.5 text-white;
+    }
+    .unit {
+      @apply ml-2.5 text-sm text-[#333];
+    }
   }
-  .text {
-    @apply text-sm text-[#333] leading-[32px];
+}
+.submit {
+  @apply py-[15px] px-[22px] mt-5 text-sm leading-none text-white bg-[#006bff] rounded-xl cursor-pointer;
+  &:hover {
+    @apply opacity-90;
   }
 }
diff --git a/src/views/product/Add.vue b/src/views/product/Add.vue
index 6ed3fd6..e89d302 100644
--- a/src/views/product/Add.vue
+++ b/src/views/product/Add.vue
@@ -63,11 +63,11 @@
               <template v-else>
                 <p class="field-name">选择本产品的贷款对象。</p>
                 <div class="flex items-center mb-2">
-                  <el-checkbox-group class="mt-1"
-                                     v-model="form.age">
-                    <el-checkbox label="年龄" />
-                  </el-checkbox-group>
-                  <div class="num-inputs ml-7">
+                  <el-checkbox class="mt-1"
+                               v-model="form.age"
+                               label="年龄" />
+                  <div v-if="form.age"
+                       class="num-inputs ml-7">
                     <el-input placeholder="最小年龄"
                               v-model.number="form.minimumAge"></el-input>
                     <span class="split">-</span>
@@ -239,6 +239,7 @@ interface RuleForm {
   maximumAge: any;
   maximumAnnualInterestRate: any;
   maximumTermOfLoan: any;
+  age: boolean;
   minimumAge: any;
   minimumAprOnLoan: any;
   minimumLoan: any;
@@ -269,6 +270,7 @@ const form = reactive<RuleForm>({
   maximumAge: '',
   maximumAnnualInterestRate: '',
   maximumTermOfLoan: '',
+  age: false,
   minimumAge: '',
   minimumAprOnLoan: '',
   minimumLoan: '',
@@ -311,7 +313,7 @@ const submit = async (formEl: FormInstance | undefined) => {
         param.currentWorkingLife = param.currentWorkingLife.join();
         param.educationalRequirements = param.educationalRequirements.join();
         param.modeRepayment = param.modeRepayment.join();
-        param.providentFundAndSocialSecurity = param.providentFundAndSocialSecurity ? 13 : '';
+        param.providentFundAndSocialSecurity = param.providentFundAndSocialSecurity ? 1 : '';
         param.whetherToSupportEarlyRepayment = param.whetherToSupportEarlyRepayment ? 58 : '';
         // 担保方式
         param.addBankProductsGuarantyStyleReqList = [];
@@ -389,34 +391,5 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.form {
-  :deep(.el-form-item__label) {
-    @apply font-semibold text-sm text-black;
-  }
-
-  .field-name {
-    @apply mb-3 text-sm font-semibold text-[#333];
-  }
-  .tips {
-    @apply text-sm text-[#686868];
-  }
-  .num-inputs {
-    @apply flex items-center;
-    .el-input {
-      @apply w-[200px];
-    }
-    .split {
-      @apply mx-2.5 text-white;
-    }
-    .unit {
-      @apply ml-2.5 text-sm text-[#333];
-    }
-  }
-  .submit {
-    @apply py-[15px] px-[22px] text-sm leading-none text-white bg-[#006bff] rounded-xl cursor-pointer;
-    &:hover {
-      @apply opacity-90;
-    }
-  }
-}
+@import url(../../styles/form.scss);
 </style>
diff --git a/src/views/product/Approve.vue b/src/views/product/Approve.vue
new file mode 100644
index 0000000..d4129cf
--- /dev/null
+++ b/src/views/product/Approve.vue
@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <el-tabs v-model="curTab"
+             @tab-click="tabChange">
+      <el-tab-pane label="产品审批"
+                   name="tab1">
+        <info />
+        <el-form ref="formRef"
+                 :model="form"
+                 :rules="rules"
+                 label-width="100px"
+                 label-suffix="："
+                 class="form pt-5 mt-5 border-t border-t-solid border-t-[#EDF1F5]"
+                 status-icon>
+          <el-form-item label="审批意见"
+                        prop="status">
+            <el-select v-model="form.status"
+                       placeholder="请选择">
+              <el-option v-for="(item, i) in config[0]?.subject?.itemList.slice(2)"
+                         :key="i"
+                         :label="item.options"
+                         :value="item.itemId" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="意见描述"
+                        prop="opinionDescription">
+            <el-input type="textarea"
+                      placeholder="审批意见500字以内。"
+                      maxlength="500"
+                      v-model="form.opinionDescription"></el-input>
+          </el-form-item>
+          <div class="flex justify-end">
+            <div class="submit"
+                 @click="submit(formRef)">审批</div>
+          </div>
+        </el-form>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, reactive, watch, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import type { TabsPaneContext, FormInstance, FormRules } from 'element-plus';
+import { useRouter, useRoute } from 'vue-router';
+import Info from './Info.vue';
+import { findById, examineAndApprove } from '@/api/bank';
+import { getProcessInformationBasedOnRoles, addOperation } from '@/api/judgment';
+import dayjs from 'dayjs';
+
+const emit = defineEmits(['getList']);
+interface RuleForm {
+  id: any;
+  status: any;
+  opinionDescription?: string;
+}
+const router = useRouter();
+const route = useRoute();
+const curTab = ref<string>('tab1');
+const info = ref<any>({});
+const config = ref<any[]>([]);
+const formRef = ref<FormInstance>();
+const form = reactive<RuleForm>({
+  id: computed(() => +route.query.id),
+  status: '',
+  opinionDescription: '',
+});
+const rules = reactive<FormRules<RuleForm>>({
+  status: [{ required: true, message: '请选择审批意见', trigger: 'change' }],
+  opinionDescription: [{ required: true, message: '请输入意见描述', trigger: 'blur' }],
+});
+
+// tab切换回调
+const tabChange = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event);
+};
+// 配置项
+const getConfig = async () => {
+  const { process } = await getProcessInformationBasedOnRoles(43); // 专家委员会43
+  config.value = process;
+};
+watch(
+  () => route.query,
+  () => {
+    // getDetail();
+  },
+  {
+    immediate: true,
+  },
+);
+// 提交
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      try {
+        const param = JSON.parse(JSON.stringify(form));
+        param.approvalTime = dayjs(new Date()).format('YYYY年-MM月-DD日');
+
+        // const { message } = await examineAndApprove(param);
+        const { message } = await examineAndApprove(param.id, param.opinionDescription, param.status, param.approvalTime);
+        // addRecord(param, message);
+        ElMessage.success('提交成功！');
+        emit('getList', 1);
+      } finally {
+      }
+    } else {
+      console.log('error submit!', fields);
+    }
+  });
+};
+// 新增判分记录
+const addRecord = async (data: Record<string, any>, newId: number) => {
+  const preIds = `1,2,43,${data.productType ? 45 : 44},${newId}`; // 1，关卡id，角色（这个页面是专家委员会审批），个人/企业（44/45）
+  const lcRule = <Record<string, any>[]>[handleId(145, 69, data.status, preIds + ',145', 1), handleId(146, 70, data.opinionDescription, preIds + ',146', 3)];
+
+  await addOperation({
+    parentId: preIds,
+    lcJudgmentRuleReq: lcRule,
+    projectId: 1,
+  });
+};
+onMounted(() => {
+  getConfig();
+});
+</script>
+
+<style lang="scss" scoped>
+@import url(../../styles/form.scss);
+</style>
diff --git a/src/views/product/CardList.vue b/src/views/product/CardList.vue
index 2d0dcdb..218ea9b 100644
--- a/src/views/product/CardList.vue
+++ b/src/views/product/CardList.vue
@@ -41,13 +41,12 @@
       <!-- <component :is="Config"
                  v-model="form"></component> -->
       <config v-if="action === 'config'"
-              @getList="getList"
-              v-model="form"></config>
-      <detail v-if="action === 'detail'"
-              v-model="form"></detail>
+              @getList="getList"></config>
+      <detail v-if="action === 'detail'"></detail>
       <add v-else-if="action === 'add'"
-           @getList="getList"
-           v-model="form"></add>
+           @getList="getList"></add>
+      <approve v-else-if="action === 'approve'"
+               @getList="getList"></approve>
     </div>
   </div>
 </template>
@@ -63,16 +62,14 @@ import { getStatus } from '@/store/useProduct';
 import Config from './Config.vue';
 import Detail from './Detail.vue';
 import Add from './Add.vue';
+import Approve from './Approve.vue';
 
 const router = useRouter();
 const route = useRoute();
 const action = ref<any>('');
 const list = ref<Array<any>>([]);
-const form = ref<any>({
-  cl: '',
-});
 const loading = ref<boolean>(false);
-const productType = computed(() => +route.query.type); // 个人/企业
+const productType = computed(() => route.query.type); // 个人/企业
 const id = computed(() => +route.query.id);
 // 列表
 const getList = async (first: any) => {
diff --git a/src/views/product/Config.vue b/src/views/product/Config.vue
index f376fb6..b548229 100644
--- a/src/views/product/Config.vue
+++ b/src/views/product/Config.vue
@@ -4,20 +4,6 @@
              @tab-click="tabChange">
       <el-tab-pane label="配置风控"
                    name="tab1">
-        <!-- <div class="audit">
-          <div class="line">
-            <span class="field">审批意见：</span>
-            <span class="status">待审批</span>
-          </div>
-          <div class="line">
-            <span class="field">意见描述：</span>
-            习近平总书记在二十届中央政治局第六次集体学习时强调，党的二十大报告在总结历史经验基础上，提出并阐述了“两
-            个结合”“六个必须坚持”等推进理论创新的科学方法，为继续推进党的理论创新提供了根本遵循。这一重要论述，将“两个结合”与
-            “六个必须坚持”一同列为推进理论创新的科学方法，深刻阐明了“两个结合”作为认识世界、
-          </div>
-          <p class="mb-2 text-sm text-[#333] text-right">审查日期：2022-02-02</p>
-          <p class="mb-2 text-sm text-[#333] text-right">审查员：公瑾</p>
-        </div> -->
 
         <el-form ref="formRef"
                  :model="form"
@@ -190,7 +176,7 @@
               <div class="flex-1">
                 <div class="flex items-center mb-3">
                   <el-checkbox v-model="form.interestRatePricingModelCheck"
-                               label="个人额度模型" />
+                               :label="(detail.productType ? '企业' : '个人') + '额度模型'" />
                   <el-select v-show="form.interestRatePricingModelCheck"
                              class="ml-5"
                              v-model="form.interestRatePricingModel"
@@ -202,7 +188,7 @@
                   </el-select>
                 </div>
                 <el-checkbox v-model="form.individualInterestRateModel"
-                             :label="103">个人利率模型</el-checkbox>
+                             :label="103">{{ detail.productType ? '企业' : '个人' }}利率模型</el-checkbox>
               </div>
             </el-form-item>
           </div>
@@ -337,15 +323,7 @@
       </el-tab-pane>
       <el-tab-pane label="产品要素"
                    name="tab2">
-        <div class="info mt-2">
-          <h6 class="step-name mb-4">办理账户</h6>
-          <p class="text">根据个人客户的信用状况，为其提供的一种短期融资便利产品，借款人在我行核定的额度金额内可循环周转使用贷款。</p>
-          <h6 class="step-name mt-5">产品要素</h6>
-          <div class="line">
-            <label class="label">产品名称：</label>
-            <p class="text">根据个人客户的信用状况，为其提供的一种短期融资便利产品，借款人在我行核定的额度金额内可循环周转使用贷款。</p>
-          </div>
-        </div>
+        <info />
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -359,6 +337,7 @@ import { findById, riskSave } from '@/api/bank';
 import { getProcessInformationBasedOnRoles, addOperation } from '@/api/judgment';
 import { useRouter, useRoute } from 'vue-router';
 import { handleId } from '@/utils/common';
+import Info from './Info.vue';
 
 const emit = defineEmits(['getList']);
 interface RuleForm {
@@ -644,97 +623,5 @@ const addRecord = async (data: Record<string, any>, newId: number) => {
 </script>
 
 <style lang="scss" scoped>
-// @import url(../../styles/form.scss);
-.audit {
-  padding: 20px 16px;
-  margin-bottom: 30px;
-  background: #f9fafc;
-  border-radius: 10px;
-  .line {
-    margin-bottom: 18px;
-    font-size: 14px;
-    line-height: 1.6;
-  }
-  .field {
-    font-size: 14px;
-    font-weight: 600;
-  }
-}
-.form {
-  @apply max-h-[calc(100vh-270px)] overflow-auto;
-  .step {
-    @apply relative pl-[42px];
-    &:before {
-      @apply absolute top-0 left-0 w-[30px] h-[30px];
-      content: '';
-      background: url(../../assets/images/config1.png) no-repeat;
-    }
-    &:nth-child(2):before {
-      background-image: url(../../assets/images/config2.png);
-    }
-    &:nth-child(3):before {
-      background-image: url(../../assets/images/config3.png);
-    }
-    &:nth-child(4):before {
-      background-image: url(../../assets/images/config4.png);
-    }
-    &:nth-child(5):before {
-      background-image: url(../../assets/images/config5.png);
-    }
-    &:nth-child(6):before {
-      background-image: url(../../assets/images/config6.png);
-    }
-    &:after {
-      content: '';
-      @apply absolute top-[40px] left-[14px] w-[2px] h-[87%] bg-[#006bff];
-    }
-  }
-  .step-name {
-    @apply pl-[5px] text-sm font-semibold text-[#006bff];
-  }
-
-  :deep(.el-form-item__label) {
-    @apply font-semibold text-sm leading-[32px] text-black;
-  }
-
-  .field-name {
-    @apply mb-3 text-sm font-semibold leading-[32px] text-[#333];
-  }
-  .tips {
-    @apply text-sm text-[#686868];
-  }
-  .num-inputs {
-    @apply flex items-center;
-    .el-input {
-      @apply w-[200px];
-    }
-    .split {
-      @apply mx-2.5 text-white;
-    }
-    .unit {
-      @apply ml-2.5 text-sm text-[#333];
-    }
-  }
-}
-.submit {
-  @apply py-[15px] px-[22px] mt-5 text-sm leading-none text-white bg-[#006bff] rounded-xl cursor-pointer;
-  &:hover {
-    @apply opacity-90;
-  }
-}
-
-.info {
-  .step-name {
-    @apply mb-3 text-sm font-semibold text-[#006bff];
-  }
-  .line {
-    @apply flex mb-2;
-  }
-  .label {
-    @apply mr-1 text-sm font-semibold text-[#333] leading-[32px];
-  }
-  .text {
-    @apply text-sm text-[#333] leading-[32px];
-  }
-}
+@import url(../../styles/form.scss);
 </style>
diff --git a/src/views/product/Detail.vue b/src/views/product/Detail.vue
index ab0c31b..378d271 100644
--- a/src/views/product/Detail.vue
+++ b/src/views/product/Detail.vue
@@ -4,33 +4,7 @@
              @tab-click="tabChange">
       <el-tab-pane label="产品要素"
                    name="tab1">
-        <div class="info mt-2">
-          <h6 class="step-name">产品定义</h6>
-          <p class="text">{{ info.productDefinition }}</p>
-          <h6 class="step-name mt-5">产品要素</h6>
-          <div class="line">
-            <p class="text">{{ info.productName }}</p>
-          </div>
-          <div class="line">
-            <p class="text">贷款币种：人民币</p>
-          </div>
-          <div v-if="info.loanPurpose"
-               class="line">
-            <p class="text">{{ info.loanPurpose }}</p>
-          </div>
-          <div v-if="info.guarantyStyleList"
-               class="line">
-            <p class="text">{{ info.guarantyStyleList }}</p>
-          </div>
-          <div v-if="info.lengthOfMaturity"
-               class="line">
-            <p class="text">{{ info.lengthOfMaturity }}</p>
-          </div>
-          <div v-if="info.loanCommitment"
-               class="line">
-            <p class="text">{{ info.loanCommitment }}</p>
-          </div>
-        </div>
+        <info />
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -38,44 +12,15 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from 'vue';
-import { ElMessage } from 'element-plus';
 import type { TabsPaneContext } from 'element-plus';
-import { productElement } from '@/api/bank';
-import { useRouter, useRoute } from 'vue-router';
+import Info from './Info.vue';
 
-defineProps({ modelValue: { type: Object, required: true } });
-defineEmits({ 'update:form': null });
-
-const router = useRouter();
-const route = useRoute();
-const id = computed(() => +route.query.id);
 const curTab = ref<string>('tab1');
-const info = ref<any>({});
 
 // tab切换回调
 const tabChange = (tab: TabsPaneContext, event: Event) => {
   console.log(tab, event);
 };
-// 详情
-const getDetail = async () => {
-  if (id.value) {
-    try {
-      const { data } = await productElement(id.value);
-      info.value = data;
-    } finally {
-    }
-  }
-};
-watch(
-  () => route.query,
-  () => {
-    getDetail();
-  },
-  {
-    immediate: true,
-  },
-);
-onMounted(() => {});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/product/Info.vue b/src/views/product/Info.vue
new file mode 100644
index 0000000..83590f5
--- /dev/null
+++ b/src/views/product/Info.vue
@@ -0,0 +1,130 @@
+<template>
+  <div v-if="info.approvalTime"
+       class="audit">
+    <div class="line">
+      <span class="field">审批意见：</span>
+      <span class="status">{{ getStatus(+info?.status) }}</span>
+    </div>
+    <div class="line">
+      <span class="field">意见描述：</span>
+      {{ info.opinionDescription }}
+    </div>
+    <p class="mb-2 text-sm text-[#333] text-right">审查日期：{{ info.approvalTime }}</p>
+    <p class="mb-2 text-sm text-[#333] text-right">审查员：公瑾</p>
+  </div>
+  <div class="info mt-2">
+    <h6 class="step-name">一、产品定义</h6>
+    <p class="text">{{ info.productDefinition }}</p>
+    <h6 class="step-name mt-5">二、产品要素</h6>
+    <p class="text">产品名称：{{ info.productName }}</p>
+    <p class="text">贷款币种：人民币</p>
+    <p v-if="info.loanPurpose"
+       class="text">
+      贷款用途：{{
+        info.loanPurpose === '购房'
+          ? '可用于住房按揭贷款、二手房住房按揭贷款。'
+          : info.loanPurpose === '消费'
+          ? '贷款用途可用于除购房之外的合法个人消费支出，不得用于投资经营，不得用于无指定用途的个人支出。'
+          : info.loanPurpose === '经营' && !info.productType
+          ? '可用于个人或其企业生产和经营活动中临时性、季节性等流动资金周转以及购置、安装或修理小型设备和装潢经营性场所所需的人民币贷款业务。'
+          : info.loanPurpose === '创业'
+          ? '用于创业或再创业过程中的资金需求。'
+          : info.loanPurpose === '经营' && info.productType
+          ? '用于短期生产经营周转的可循环的人民币信用贷款业务。'
+          : info.otherPurposesOfLoan
+      }}
+    </p>
+    <p class="text">担保方式：{{ info.guarantyStyle }}</p>
+    <p class="text">贷款期限：{{ info.minimumTermOfLoan }}月 - {{ info.maximumTermOfLoan }}月</p>
+    <p class="text">贷款限额：{{ info.minimumLoan }}万元 - {{ info.loanCeiling }}万元</p>
+    <p class="text">贷款利率：{{ info.minimumAprOnLoan }}% - {{ info.maximumAnnualInterestRate }}%</p>
+    <p class="text">还款方式：{{ info.modeRepayment }}</p>
+    <div class="text">
+      贷款对象：
+      <p v-if="info.minimumAge">年龄{{ info.minimumAge }} - {{ info.maximumAge }}周岁；</p>
+      <p v-if="info.educationalRequirements">取得{{ info.educationalRequirements }}以上学历；</p>
+      <p v-if="info.currentWorkingLife">{{ info.currentWorkingLife }}；</p>
+      <p v-if="info.providentFundAndSocialSecurity">连续缴纳本市社保或者公积金6个月；</p>
+      <p>持有中国银行I类账户，且已关联至手机银行，且在我行及其他金融同业无不良信用记录。</p>
+    </div>
+    <template v-if="role == 43">
+      <h6 class="step-name mt-5">三、材料要求</h6>
+      <h6 class="step-name mt-5">四、业务流程</h6>
+      <p class="text">1、贷款人APP向智信银行公司业务部门提交借款申请，同时提交贷款用途证明文件以及有关资料；</p>
+      <p class="text">2、智信银行对贷款人的贷款申请进行审查，同时根据实际情况要求借款人提供补充资料；</p>
+      <p class="text">3、智信银行内部审批通过后，与贷款人签订借款合同；</p>
+      <p class="text">4、贷款人落实有关提款前提条件，根据贷款合同提款。</p>
+      <h6 class="step-name mt-5">五、注意要点</h6>
+      <p class="text">
+        贷款人在使用款额度时，必须明确说明贷款用途。贷款人必须在获得循环贷款额度后，方可在额度与用途范围内申请贷款，受理机构仅限在原经办行，同时逐笔上报中心核批。单笔贷款金额不得超过贷款人单笔消费（或投资）总金额的80%。
+      </p>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue';
+import { findById } from '@/api/bank';
+import { useRouter, useRoute } from 'vue-router';
+import { getStatus } from '@/store/useProduct';
+
+const router = useRouter();
+const route = useRoute();
+const role = computed(() => route.query.role || 41); // 1产品经理，2风控经理，3专家委员会
+const id = computed(() => +route.query.id);
+const info = ref<Record<string, any>>({});
+const riskInfo = ref<Record<string, any>>(null);
+
+// 详情
+const getDetail = async () => {
+  if (id.value) {
+    try {
+      const { data } = await findById(id.value);
+      info.value = data;
+      if (info.value.riskControlDetails) riskInfo.value = info.value.riskControlDetails;
+    } finally {
+    }
+  }
+};
+watch(
+  () => route.query,
+  () => {
+    getDetail();
+  },
+  {
+    immediate: true,
+  },
+);
+</script>
+
+<style lang="scss" scoped>
+.info {
+  .step-name {
+    @apply mb-3 text-sm font-semibold text-[#006bff];
+  }
+  .line {
+    @apply flex mb-2;
+  }
+  .label {
+    @apply mr-1 text-sm font-semibold text-[#333] leading-[32px];
+  }
+  .text {
+    @apply text-sm text-[#333] leading-[32px];
+  }
+}
+.audit {
+  padding: 20px 16px;
+  margin-bottom: 30px;
+  background: #f9fafc;
+  border-radius: 10px;
+  .line {
+    margin-bottom: 18px;
+    font-size: 14px;
+    line-height: 1.6;
+  }
+  .field {
+    font-size: 14px;
+    font-weight: 600;
+  }
+}
+</style>
diff --git a/src/views/product/List.vue b/src/views/product/List.vue
index a6f82ef..49d3017 100644
--- a/src/views/product/List.vue
+++ b/src/views/product/List.vue
@@ -4,7 +4,7 @@
       <search v-model="params.keyWord"
               @change="initList"></search>
       <div class="filter">
-        <el-checkbox-group v-if="role == 2"
+        <el-checkbox-group v-if="params.roleId == 42"
                            class="mr-5"
                            v-model="productTypes">
           <el-checkbox :label="0">个人</el-checkbox>
@@ -30,7 +30,7 @@
           <el-select v-model="params.status"
                      placeholder="产品进度"
                      size="large">
-            <el-option v-for="item in paces"
+            <el-option v-for="item in params.roleId == 43 ? getExpertStatus() : productState.status"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id" />
@@ -39,7 +39,7 @@
                alt=""
                class="icon" />
         </div>
-        <div v-if="role == 1"
+        <div v-if="params.roleId == 41"
              class="add-btn"
              @click="toAdd">
           <img src="@/assets/images/plus.png"
@@ -61,9 +61,9 @@
                        label="产品名称"></el-table-column>
       <el-table-column prop="productNumber"
                        label="产品编号"></el-table-column>
-      <el-table-column v-if="role == 2"
+      <el-table-column v-if="params.roleId != 41"
                        prop="loanCeiling"
-                       label="贷款对象">
+                       :label="params.roleId == 42 ? '贷款对象' : '产品对象'">
         <template #default="{ row }">
           {{ row.productType ? '企业' : '个人' }}
         </template>
@@ -88,13 +88,12 @@
       <el-table-column prop="id"
                        label="操作">
         <template #default="{ row }">
-          <el-button type="text"
-                     size="small"
-                     @click="toDetail(`/product/cardList/config`, row.id)">配置{{ role == 1 ? '要素' : '风控' }}</el-button>
-          <el-button type="text"
-                     @click="toDetail(`/product/cardList/detail`, row.id)"
-                     size="small">产品详情</el-button>
-          <el-popconfirm v-if="role == 1"
+          <template v-if="params.roleId != 43">
+            <el-button type="text"
+                       size="small"
+                       @click="toDetail(`/product/cardList/config`, row.id)">配置{{ params.roleId == 41 ? '要素' : '风控' }}</el-button>
+          </template>
+          <el-popconfirm v-if="params.roleId == 41"
                          title="您确定删除吗？"
                          @confirm.stop="handleDelete(row.id)">
             <template #reference>
@@ -103,6 +102,20 @@
                          @click.stop="stop">删除</el-button>
             </template>
           </el-popconfirm>
+          <!-- 专家委员会 && 非待审批： 展示审批结果 -->
+          <el-button v-if="params.roleId == 43 && row.status != 296"
+                     type="text"
+                     @click="toDetail(`/product/cardList/detail`, row.id)"
+                     size="small">审批结果</el-button>
+          <!-- （产品经理 || 风控经理） && 非审批打回： 展示产品详情 -->
+          <el-button v-if="params.roleId != 43 && row.status != 299"
+                     type="text"
+                     @click="toDetail(`/product/cardList/detail`, row.id)"
+                     size="small">产品详情</el-button>
+          <el-button v-if="params.roleId == 43 && row.status == 296"
+                     type="text"
+                     size="small"
+                     @click="toDetail(`/product/cardList/approve`, row.id)">审批</el-button>
         </template></el-table-column>
     </el-table>
     <el-pagination v-model:currentPage="currentPage"
@@ -129,7 +142,7 @@ import { getProcessInformationBasedOnRoles } from '@/api/judgment';
 import { bankingProductsList, batchDeletion } from '@/api/bank';
 import Search from '@/components/Search.vue';
 import { useRouter, useRoute } from 'vue-router';
-import { getStatus } from '@/store/useProduct';
+import { productState, getExpertStatus, getStatus } from '@/store/useProduct';
 
 const { t } = useI18n();
 const router = useRouter();
@@ -141,47 +154,21 @@ const params = reactive({
   keyWord: '',
   productType: computed(() => {
     let val = <number | string>'';
-    if (route.query.role == 2) {
-      if (productTypes.value.length === 1) val = productTypes.value[0];
-      return val;
+    if (params.roleId == 42 && productTypes.value.length === 1) {
+      val = productTypes.value[0];
+    } else if (params.roleId == 41) {
+      val = +route.query.type;
     }
-    return +route.query.type;
+    return val;
   }),
   status: '',
+  roleId: computed(() => +route.query.role || 41),
 });
-// params.productType = computed(() => (route.query.role == 2 ? '' : +route.query.type));
-const role = computed(() => route.query.role || 1); // 1产品经理，2风控经理
 const currentPage = ref<number>(1);
 const pageSize = ref<number>(10);
 const total = ref<number>(0);
 const table = ref<any>();
 const guarantees = ref<Array<any>>([]);
-const paces = ref<Array<any>>([
-  {
-    id: '',
-    name: '产品进度',
-  },
-  {
-    id: 1,
-    name: '配置风控',
-  },
-  {
-    id: 2,
-    name: '待审批',
-  },
-  {
-    id: 3,
-    name: '审批通过',
-  },
-  {
-    id: 4,
-    name: '审批不通过',
-  },
-  {
-    id: 5,
-    name: '审批打回',
-  },
-]);
 const list = ref<Array<any>>([]);
 const loading = ref<boolean>(false);
 // 担保方式
@@ -215,10 +202,6 @@ onMounted(() => {
 });
 
 watch([params, () => route.query], initList);
-// watch(productTypes, (val) => {
-//   console.log('🚀 ~ file: List.vue:207 ~ watch ~ val:', val);
-//   params.productType = val.length === 2 ? '' :
-// });
 const handleSort = ({ column, prop, order }: { column: any; prop: string; order: string }) => {
   params.createDateSort = order === 'descending' ? 'desc' : order === 'ascending' ? 'asc' : '';
   getList();
@@ -236,13 +219,17 @@ const toDetail = async (path: string, id: number) => {
     path,
     query: {
       ...route.query,
+      type: params.productType,
       id,
     },
   });
 };
 // 卡片模式
 const toCardList = () => {
-  router.push('/product/cardList/config');
+  router.push({
+    path: '/product/cardList/config',
+    query: route.query,
+  });
 };
 
 const handleDelete = async (id: number) => {
@@ -271,7 +258,6 @@ const handleDelete = async (id: number) => {
     @apply inline-flex items-center h-[36px] px-[24px] text-sm text-white rounded-[18px] cursor-pointer;
     background: linear-gradient(-36deg, #006bff, #2ab1ff);
     border: 1px solid #ffffff;
-    cursor: pointer;
     .icon {
       @apply mr-[8px];
     }