产品经理联调

postcss.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   plugins: {
+    'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

src/api/bank.ts

@@ -5,6 +5,7 @@ export const queryStorage = async (id: number): Promise<any> => (await axios.get
 export const updateStorage = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/storage?_method=put', data)).data;
 
 export const primaryTypeOfGuarantee = async (): Promise<any> => (await axios.post('/product/bankGuaranteeType/primaryTypeOfGuarantee')).data;
+export const typeOfGuarantee = async (): Promise<any> => (await axios.post('/product/bankGuaranteeType/typeOfGuarantee')).data;
 export const bankingProductsList = async (data: Record<string, any>): Promise<any> => (await axios.post('/product/product/bank/products/bankingProductsList', data)).data;
 export const batchDeletion = async (data: Record<string, any>): Promise<any> => (await axios.post('/product/product/bank/products/batchDeletion', data)).data;
 export const personalRiskControlConfigurationField = async (): Promise<any> =>

src/api/config.ts

@@ -1,50 +0,0 @@
-import axios from '@/utils/request';
-
-export const imageUploadUrl = `${import.meta.env.VITE_BASE_API}/backend/image-upload`;
-export const videoUploadUrl = `${import.meta.env.VITE_BASE_API}/backend/video-upload`;
-export const docUploadUrl = `${import.meta.env.VITE_BASE_API}/backend/doc-upload`;
-export const fileUploadUrl = `${import.meta.env.VITE_BASE_API}/backend/file-upload`;
-
-export const cropImage = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/image-crop', data)).data;
-
-export const queryGlobalModel = async (): Promise<any> => (await axios.get('/backend/core/global-settings/model')).data;
-export const queryGlobalSettings = async (): Promise<any> => (await axios.get('/backend/core/global-settings')).data;
-export const updateGlobalBaseSettings = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/global-settings/base?_method=put', data)).data;
-export const updateGlobalCustomsSettings = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/global-settings/customs?_method=put', data)).data;
-export const updateGlobalUploadSettings = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/global-settings/upload?_method=put', data)).data;
-
-export const querySiteSettings = async (): Promise<any> => (await axios.get('/backend/core/site-settings')).data;
-export const updateSiteBaseSettings = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/site-settings/base?_method=put', data)).data;
-export const updateSiteCustomsSettings = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/site-settings/customs?_method=put', data)).data;
-export const updateSiteWatermarkSettings = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/site-settings/watermark?_method=put', data)).data;
-export const querySiteHtmlSettings = async (): Promise<any> => (await axios.get('/backend/core/site-settings/html')).data;
-export const updateSiteHtmlSettings = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/site-settings/html?_method=put', data)).data;
-export const queryCurrentSiteThemeList = async (): Promise<any> => (await axios.get('/backend/core/site/theme')).data;
-
-export const queryModelList = async (params?: Record<string, any>): Promise<any> => (await axios.get('/backend/core/model', { params })).data;
-export const queryModel = async (id: number): Promise<any> => (await axios.get(`/backend/core/model/${id}`)).data;
-export const createModel = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/model', data)).data;
-export const updateModel = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/model?_method=put', data)).data;
-export const updateModelOrder = async (data: number[]): Promise<any> => (await axios.post('/backend/core/model/order?_method=put', data)).data;
-export const deleteModel = async (data: number[]): Promise<any> => (await axios.post('/backend/core/model?_method=delete', data)).data;
-
-export const queryDictTypeList = async (params?: Record<string, any>): Promise<any> => (await axios.get('/backend/core/dict-type', { params })).data;
-export const queryDictType = async (id: number): Promise<any> => (await axios.get(`/backend/core/dict-type/${id}`)).data;
-export const createDictType = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/dict-type', data)).data;
-export const updateDictType = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/dict-type?_method=put', data)).data;
-export const updateDictTypeOrder = async (data: number[]): Promise<any> => (await axios.post('/backend/core/dict-type/order?_method=put', data)).data;
-export const deleteDictType = async (data: number[]): Promise<any> => (await axios.post('/backend/core/dict-type?_method=delete', data)).data;
-
-export const queryDictList = async (params?: Record<string, any>): Promise<any> => (await axios.get('/backend/core/dict', { params })).data;
-export const queryDict = async (id: number): Promise<any> => (await axios.get(`/backend/core/dict/${id}`)).data;
-export const createDict = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/dict', data)).data;
-export const updateDict = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/dict?_method=put', data)).data;
-export const updateDictOrder = async (data: number[]): Promise<any> => (await axios.post('/backend/core/dict/order?_method=put', data)).data;
-export const deleteDict = async (data: number[]): Promise<any> => (await axios.post('/backend/core/dict?_method=delete', data)).data;
-
-export const queryBlockList = async (params?: Record<string, any>): Promise<any> => (await axios.get('/backend/core/block', { params })).data;
-export const queryBlock = async (id: number): Promise<any> => (await axios.get(`/backend/core/block/${id}`)).data;
-export const createBlock = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/block', data)).data;
-export const updateBlock = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/block?_method=put', data)).data;
-export const updateBlockOrder = async (data: number[]): Promise<any> => (await axios.post('/backend/core/block/order?_method=put', data)).data;
-export const deleteBlock = async (data: number[]): Promise<any> => (await axios.post('/backend/core/block?_method=delete', data)).data;

src/api/judgment.ts

@@ -0,0 +1,8 @@
+import axios from '@/utils/request';
+
+export const imageUploadUrl = `${import.meta.env.VITE_BASE_API}/backend/image-upload`;
+export const cropImage = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/image-crop', data)).data;
+export const getProcess = async (): Promise<any> => (await axios.post('/judgment/judgment/stRecord/getProcess?systemId=19')).data;
+export const getProcessInformationBasedOnRoles = async (id: number): Promise<any> =>
+  (await axios.post(`/judgment/judgment/stRecord/getProcessInformationBasedOnRoles?systemId=19&parentId=${id}`)).data;
+export const getAllBusiness = async (): Promise<any> => (await axios.post('/judgment/judgment/stRecord/getAllBusiness?systemId=19')).data;

src/styles/form.scss

@@ -1,15 +1,3 @@
-@mixin btn {
-  padding: 15px 22px;
-  font-size: 14px;
-  line-height: 1;
-  color: #fff;
-  background: #006bff;
-  border-radius: 12px;
-  cursor: pointer;
-  &:hover {
-    opacity: 0.9;
-  }
-}
 .forms {
   &.step-form {
     .step-name {
@@ -103,6 +91,30 @@
     line-height: 32px;
   }
   .submit {
-    @include btn;
+    padding: 15px 22px;
+    font-size: 14px;
+    line-height: 1;
+    color: #fff;
+    background: #006bff;
+    border-radius: 12px;
+    cursor: pointer;
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+}
+
+.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];
   }
 }

src/views/product/Add.vue

@@ -1,161 +1,273 @@
 <template>
   <div>
-    <el-tabs v-model="curTab"
+    <el-tabs v-model="curTab" @tab-click="tabChange">
-             @tab-click="tabChange">
+      <el-tab-pane label="新增产品" name="tab1">
-      <el-tab-pane label="新增产品"
+        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" label-suffix="：" class="form" status-icon>
-                   name="tab1">
+          <el-form-item label="产品定义" prop="productDefinition">
-        <div class="forms">
+            <el-input
-          <div class="line">
+              type="textarea"
-            <label class="label">产品定义：</label>
+              placeholder="用一段话简单介绍一下这个产品或者描述产品的设计理念。例如：本产品根据个人客户的信用状况，为其提供的一种短期融资便利产品，借款人可在额度金额内可循环周转使用贷款。"
-            <div class="fields">
+              maxlength="200"
-              <el-input type="textarea"
+            ></el-input>
-                        placeholder="用一段话简单介绍一下这个产品或者描述产品的设计理念。例如：本产品根据个人客户的信用状况，为其提供的一种短期融资便利产品，借款人可在额度金额内可循环周转使用贷款。"
+          </el-form-item>
-                        maxlength="200"></el-input>
+          <el-form-item label="产品名称" prop="productName">
-            </div>
+            <el-input placeholder="取个有吸引力的产品名，限20字。" maxlength="20"></el-input>
-          </div>
+          </el-form-item>
-          <div class="line">
+          <el-form-item label="产品币种" prop="productCurrency">
-            <label class="label">产品名称：</label>
+            <el-select v-model="form.productCurrency" placeholder="请选择">
-            <div class="fields">
+              <el-option label="人民币" :value="1" />
-              <el-input placeholder="取个有吸引力的产品名，限20字。"
+            </el-select>
-                        maxlength="20"></el-input>
+          </el-form-item>
-            </div>
+          <el-form-item label="贷款对象" required>
-          </div>
+            <div class="flex-1">
-          <div class="line">
-            <label class="label">产品币种：</label>
-            <div class="fields">
-              <el-select v-model="form.coinType"
-                         placeholder="请选择">
-                <el-option label="人民币"
-                           value="1" />
-              </el-select>
-            </div>
-          </div>
-          <div class="line">
-            <label class="label">贷款对象：</label>
-            <div class="fields">
               <p class="field-name">选择本产品的贷款对象。</p>
-              <el-checkbox-group v-model="form.cl">
+              <div class="flex items-center mb-2">
-                <el-checkbox label="身份证" />
+                <el-checkbox-group class="mt-1" v-model="form.age">
-                <el-checkbox label="身份证" />
+                  <el-checkbox label="年龄" />
-              </el-checkbox-group>
+                </el-checkbox-group>
+                <div class="num-inputs ml-7">
+                  <el-input placeholder="最小年龄" v-model.number="form.minimumAge"></el-input>
+                  <span class="split">-</span>
+                  <el-input placeholder="最大年龄" v-model.number="form.maximumAge"></el-input>
+                </div>
+              </div>
+              <div class="flex items-center mb-2">
+                <el-checkbox v-model="form.edu" label="学历要求"></el-checkbox>
+                <el-checkbox-group v-if="form.edu" class="mt-2 ml-5" v-model="form.educationalRequirements">
+                  <el-checkbox v-for="(item, i) in config[3]?.subject?.itemList?.slice(2, 6)" :key="i" :label="i + 1">{{ item.options }}</el-checkbox>
+                </el-checkbox-group>
+              </div>
+
+              <div class="flex items-center mb-2">
+                <el-checkbox v-model="form.curWL" label="工作年限"></el-checkbox>
+                <el-checkbox-group v-if="form.curWL" class="mt-2 ml-5" v-model="form.currentWorkingLife">
+                  <el-checkbox v-for="(item, i) in config[3]?.subject?.itemList?.slice(7, 11)" :key="i" :label="i + 1">{{ item.options }}</el-checkbox>
+                </el-checkbox-group>
+              </div>
+              <el-checkbox v-model="form.providentFundAndSocialSecurity" label="公积金/社保" :true-label="1" :false-label="2"></el-checkbox>
             </div>
-          </div>
+          </el-form-item>
-          <div class="line">
+          <el-form-item label="贷款用途" prop="loanPurpose">
-            <label class="label">贷款用途：</label>
+            <div class="flex-1">
-            <div class="fields">
               <p class="field-name">选择本产品贷款资金的用途。</p>
-              <el-radio-group v-model="form.cl">
+              <el-radio-group v-model="form.loanPurpose">
-                <el-radio :label="3">Option A</el-radio>
+                <el-radio v-for="(item, i) in config[4]?.subject?.itemList" :key="i" :label="item.itemId">{{ item.options }}</el-radio>
-                <el-radio :label="9">Option C</el-radio>
+                <el-radio :label="4">其他</el-radio>
               </el-radio-group>
+              <el-input
+                v-if="form?.loanPurpose === 4"
+                class="w-[250px] ml-5"
+                placeholder="请描述其他贷款用途可用于哪些方面。"
+                maxlength="10"
+                v-model="form.otherPurposesOfLoan"
+              ></el-input>
             </div>
-          </div>
+          </el-form-item>
-          <div class="line">
+          <el-form-item label="担保方式" prop="bankGuaranteeTypeIds">
-            <label class="label">担保方式：</label>
+            <div class="flex-1">
-            <div class="fields">
               <p class="field-name">选择本产品的担保种类。</p>
-              <el-checkbox-group v-model="form.cl">
+              <div v-for="(item, i) in guaranteees" :key="i" class="mb-2">
-                <el-checkbox label="身份证" />
+                <el-checkbox-group v-model="form.bankGuaranteeTypeIds">
-                <el-checkbox label="身份证" />
+                  <el-checkbox :label="item.id">{{ item.guarantyStyle }}</el-checkbox>
-              </el-checkbox-group>
+                  <el-checkbox v-for="(child, j) in item?.children" :key="j" :label="child.id">{{ child.guarantyStyle }}</el-checkbox>
+                </el-checkbox-group>
+              </div>
             </div>
-          </div>
+          </el-form-item>
-          <div class="line">
+          <el-form-item label="贷款额度" prop="minimumLoan">
-            <label class="label">贷款额度：</label>
+            <div class="flex-1">
-            <div class="fields">
               <div class="num-inputs">
-                <el-input placeholder="最小额度"
+                <el-input placeholder="最小额度" min="0" v-model.number="form.minimumLoan"></el-input>
-                          min="0"></el-input>
                 <span class="split">-</span>
-                <el-input placeholder="最高额度"
+                <el-input placeholder="最高额度" min="0" v-model.number="form.loanCeiling"></el-input>
-                          min="0"></el-input>
                 <span class="unit">万元</span>
               </div>
             </div>
-          </div>
+          </el-form-item>
-          <div class="line">
+          <el-form-item label="贷款利率" prop="minimumAprOnLoan">
-            <label class="label">贷款利率：</label>
+            <div class="flex-1">
-            <div class="fields">
               <div class="num-inputs">
-                <el-input placeholder="最小年利率"
+                <el-input placeholder="最小年利率" min="0" v-model.number="form.minimumAprOnLoan"></el-input>
-                          min="0"></el-input>
                 <span class="split">-</span>
-                <el-input placeholder="最高年利率"
+                <el-input placeholder="最高年利率" min="0" v-model.number="form.maximumAnnualInterestRate"></el-input>
-                          min="0"></el-input>
                 <span class="unit">%</span>
               </div>
             </div>
-          </div>
+          </el-form-item>
-          <div class="line">
+          <el-form-item label="贷款期限" prop="minimumTermOfLoan">
-            <label class="label">贷款期限：</label>
+            <div class="flex-1">
-            <div class="fields">
               <div class="num-inputs">
-                <el-input placeholder="最小期限"
+                <el-input placeholder="最小期限" min="0" v-model.number="form.minimumTermOfLoan"></el-input>
-                          min="0"></el-input>
                 <span class="split">-</span>
-                <el-input placeholder="最大期限"
+                <el-input placeholder="最大期限" min="0" v-model.number="form.maximumTermOfLoan"></el-input>
-                          min="0"></el-input>
                 <span class="unit">月</span>
               </div>
             </div>
-          </div>
+          </el-form-item>
-          <div class="line">
+          <el-form-item label="还款方式" prop="modeRepayment">
-            <label class="label">还款方式：</label>
+            <div class="flex-1">
-            <div class="fields">
               <p class="field-name">选择本产品可以选择的还款方式。</p>
-              <el-checkbox-group v-model="form.cl">
+              <el-checkbox-group v-model="form.modeRepayment">
-                <el-checkbox label="身份证" />
+                <el-checkbox :label="1">等额本息</el-checkbox>
-                <el-checkbox label="身份证" />
+                <el-checkbox :label="2">先息后本</el-checkbox>
+                <el-checkbox :label="3">等额本金</el-checkbox>
               </el-checkbox-group>
             </div>
-          </div>
+          </el-form-item>
-          <div class="line">
+          <el-form-item label="提前还款" prop="whetherToSupportEarlyRepayment">
-            <label class="label">提前还款：</label>
+            <div class="flex-1 flex items-center">
-            <div class="fields flex items-center">
+              <el-switch :active-value="1" :inactive-value="2" v-model="form.whetherToSupportEarlyRepayment" />
-              <el-switch v-model="form.cl" />
               <p class="tips ml-4">本产品是否支持提前还款。</p>
             </div>
-          </div>
+          </el-form-item>
-
           <div class="flex justify-end">
-            <div class="submit">完成，提交审批</div>
+            <div class="submit" @click="submit(formRef)">完成，提交风控经理</div>
           </div>
-        </div>
+        </el-form>
       </el-tab-pane>
     </el-tabs>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, reactive, computed, onMounted } from 'vue';
 import { ElMessage } from 'element-plus';
-import type { TabsPaneContext } from 'element-plus';
+import type { TabsPaneContext, FormInstance, FormRules } from 'element-plus';
-import { personalRiskControlConfigurationField } from '@/api/bank';
+import { productElement, typeOfGuarantee } from '@/api/bank';
+import { getProcessInformationBasedOnRoles, getAllBusiness } from '@/api/judgment';
+import { useRouter, useRoute } from 'vue-router';
+
+interface RuleForm {
+  productDefinition: string;
+  productName: string;
+  productCurrency: number;
+  bankGuaranteeTypeIds: any[];
+  currentWorkingLife?: any;
+  educationalRequirements?: any;
+  loanCeiling?: number;
+  loanPurpose?: number;
+  maximumAge?: number;
+  maximumAnnualInterestRate?: number;
+  maximumTermOfLoan?: number;
+  minimumAge?: number;
+  minimumAprOnLoan?: number;
+  minimumLoan?: number;
+  minimumTermOfLoan?: number;
+  modeRepayment?: any;
+  otherPurposesOfLoan: string;
+  productObject?: number;
+  productType: number;
+  providentFundAndSocialSecurity?: number;
+  whetherToSupportEarlyRepayment?: number;
+}
 
+const router = useRouter();
+const route = useRoute();
 const curTab = ref<string>('tab1');
 const config = ref<any>({});
-const form = ref<any>({
+const guaranteees = ref<any[]>([]);
-  coinType: 1,
+const formRef = ref<FormInstance>();
+const form = reactive<RuleForm>({
+  productDefinition: '',
+  productName: '',
+  productCurrency: 1,
+  bankGuaranteeTypeIds: [],
+  currentWorkingLife: [],
+  educationalRequirements: [],
+  loanCeiling: '',
+  loanPurpose: '',
+  maximumAge: '',
+  maximumAnnualInterestRate: '',
+  maximumTermOfLoan: '',
+  minimumAge: '',
+  minimumAprOnLoan: '',
+  minimumLoan: '',
+  minimumTermOfLoan: '',
+  modeRepayment: [],
+  otherPurposesOfLoan: '',
+  productObject: '',
+  productType: computed(() => +route.query.type),
+  providentFundAndSocialSecurity: 2,
+  whetherToSupportEarlyRepayment: 2,
+});
+const rules = reactive<FormRules<RuleForm>>({
+  productDefinition: [{ required: true, message: '请输入产品定义', trigger: 'blur' }],
+  productName: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
+  productCurrency: [{ required: true, message: '请选择产品币种', trigger: 'change' }],
+  loanPurpose: [{ required: true, message: '请选择贷款用途', trigger: 'change' }],
+  bankGuaranteeTypeIds: [{ required: true, message: '请选择担保方式', trigger: 'change' }],
+  minimumLoan: [{ required: true, message: '请输入贷款额度', trigger: 'blur' }],
+  minimumAprOnLoan: [{ required: true, message: '请输入贷款利率', trigger: 'blur' }],
+  minimumTermOfLoan: [{ required: true, message: '请输入贷款期限', trigger: 'blur' }],
+  modeRepayment: [{ required: true, message: '请选择还款方式', trigger: 'change' }],
 });
 
 // tab切换回调
 const tabChange = (tab: TabsPaneContext, event: Event) => {
   console.log(tab, event);
 };
-// 担保方式
+// 配置项
 const getConfig = async () => {
-  try {
+  const { process } = await getProcessInformationBasedOnRoles(41);
-    const { data } = await personalRiskControlConfigurationField();
+  config.value = process;
-    config.value = data;
+
-  } finally {
+  const { data } = await typeOfGuarantee();
-  }
+  guaranteees.value = data;
+};
+// 提交
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      try {
+        console.log(33, form.value);
+        // const { data } = await productElement(form.value);
+        // ElMessage.success('提交成功！');
+        // setTimeout(() => {
+        //   router.push(``)
+        // }, 1500);
+      } finally {
+      }
+    } else {
+      console.log('error submit!', fields);
+    }
+  });
 };
 onMounted(() => {
   getConfig();
-  // fetchData();
 });
 </script>
 
 <style lang="scss" scoped>
 @import url(../../styles/form.scss);
+.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;
+    }
+  }
+}
 </style>

src/views/product/CardList.vue

@@ -65,7 +65,7 @@ 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 () => {

src/views/product/Config.vue

@@ -87,7 +87,7 @@
       </el-tab-pane>
       <el-tab-pane label="产品要素"
                    name="tab2">
-        <div class="forms">
+        <div class="info mt-2">
           <h6 class="step-name mb-4">办理账户</h6>
           <p class="text">根据个人客户的信用状况，为其提供的一种短期融资便利产品，借款人在我行核定的额度金额内可循环周转使用贷款。</p>
           <h6 class="step-name mt-5">产品要素</h6>

src/views/product/Detail.vue

@@ -4,13 +4,41 @@
              @tab-click="tabChange">
       <el-tab-pane label="产品要素"
                    name="tab1">
-        <div class="forms">
+        <div class="info mt-2">
-          <h6 class="step-name mb-4">办理账户</h6>
+          <h6 class="step-name">产品定义</h6>
-          <p class="text">根据个人客户的信用状况，为其提供的一种短期融资便利产品，借款人在我行核定的额度金额内可循环周转使用贷款。</p>
+          <p class="text">{{ info.productDefinition }}</p>
           <h6 class="step-name mt-5">产品要素</h6>
           <div class="line">
             <label class="label">产品名称：</label>
-            <p class="text">根据个人客户的信用状况，为其提供的一种短期融资便利产品，借款人在我行核定的额度金额内可循环周转使用贷款。</p>
+            <p class="text">{{ info.productName }}</p>
+          </div>
+          <div class="line">
+            <label class="label">贷款币种：</label>
+            <p class="text">人民币</p>
+          </div>
+          <div class="line">
+            <label class="label">贷款用途：</label>
+            <p class="text">{{ info.productName }}</p>
+          </div>
+          <div class="line">
+            <label class="label">担保方式：</label>
+            <p class="text">{{ info.productName }}</p>
+          </div>
+          <div class="line">
+            <label class="label">贷款期限：</label>
+            <p class="text">{{ info.productName }}</p>
+          </div>
+          <div class="line">
+            <label class="label">贷款利率：</label>
+            <p class="text">{{ info.productName }}</p>
+          </div>
+          <div class="line">
+            <label class="label">还款方式：</label>
+            <p class="text">{{ info.productName }}</p>
+          </div>
+          <div class="line">
+            <label class="label">贷款对象：</label>
+            <p class="text">{{ info.productName }}</p>
           </div>
         </div>
       </el-tab-pane>
@@ -32,7 +60,7 @@ const router = useRouter();
 const route = useRoute();
 const id = computed(() => +route.query.id);
 const curTab = ref<string>('tab1');
-const data = ref<any>();
+const info = ref<any>({});
 
 // tab切换回调
 const tabChange = (tab: TabsPaneContext, event: Event) => {
@@ -43,7 +71,7 @@ const getDetail = async () => {
   if (id.value) {
     try {
       const { data } = await findById(id.value);
-      data.value = data;
+      info.value = data;
     } finally {
     }
   }
@@ -62,19 +90,4 @@ onMounted(() => {});
 
 <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;
-  }
-}
 </style>

src/views/product/List.vue

@@ -64,7 +64,8 @@
         </template>
       </el-table-column>
       <el-table-column prop="createTime"
-                       label="创建日期"></el-table-column>
+                       label="创建日期"
+                       sortable="custom"></el-table-column>
       <el-table-column prop="status"
                        label="产品进度">
         <template #default="{ row }">
@@ -184,15 +185,9 @@ onMounted(() => {
   getList();
 });
 
-// 返回产品进度
-
 watch([() => params.keyWord, () => route.query.type], initList);
 const handleSort = ({ column, prop, order }: { column: any; prop: string; order: string }) => {
-  if (prop) {
+  params.createDateSort = order === 'descending' ? 'desc' : order === 'ascending' ? 'asc' : '';
-    sort.value = (column.sortBy ?? prop) + (order === 'descending' ? '_desc' : '');
-  } else {
-    sort.value = undefined;
-  }
   getList();
 };
 // 新增