推荐产品完成

2022-03-22 18:41:13 +08:00
parent 433ff4476f
commit f45692df45
4 changed files with 182 additions and 5 deletions
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -70,7 +70,7 @@ export default {
      this.$axios.post("/admin/user/detail-phone").then(res => {
        if (res && res.data) {
          this.$store.commit("setUserInfo", res.data)
-          if (/^\/xiushan/.test(location.pathname)) {
+          if (/^\/project\/xiushan/.test(location.pathname)) {
            this.$store.commit("setFinanceUser")
          }
        }
--- a/project/xiushan/apps/finance/AppFinanceProduct/AppFinanceProduct.vue
+++ b/project/xiushan/apps/finance/AppFinanceProduct/AppFinanceProduct.vue
@@ -9,10 +9,11 @@
 import ProductDetail from "./productDetail";
 import ProductList from "./productList";
 import ProductAdd from "./productAdd";
+import ProductRecommend from "./productRecommend";

 export default {
  name: "AppFinanceProduct",
-  components: {ProductAdd, ProductList, ProductDetail},
+  components: {ProductRecommend, ProductAdd, ProductList, ProductDetail},
  label: "产品发布",
  props: {
    instance: Function,
@@ -22,11 +23,13 @@ export default {
  computed: {
    currentComponent() {
      return this.$route.hash == "#add" ? ProductAdd :
-          !!this.$route.query.id ? ProductDetail : ProductList
+          this.$route.hash == "#productRecommend" ? ProductRecommend :
+              !!this.$route.query.id ? ProductDetail : ProductList
    }
  },
  created() {
-    this.dict.load( "productGuaranteeMode", "productRepaymentMethod", "productRepaymentTimeline", "productStatus", "productFaceUser","enterpriseAuditStatus")
+    this.dict.load("productGuaranteeMode", "productRepaymentMethod", "productRepaymentTimeline", "productStatus", "productFaceUser",
+        "enterpriseAuditStatus", "yesOrNo", "financialOrganizationType")
  }
 }
 </script>
--- a/project/xiushan/apps/finance/AppFinanceProduct/productList.vue
+++ b/project/xiushan/apps/finance/AppFinanceProduct/productList.vue
@@ -1,16 +1,25 @@
 <template>
  <section class="productList">
    <ai-list>
-      <ai-title slot="title" title="产品发布管理" isShowBottomBorder/>
+      <ai-title slot="title" title="产品发布管理" isShowBottomBorder>
+        <template #rightBtn>
+          <el-button type="primary" @click="$router.push({hash:'#productRecommend'})">推荐产品</el-button>
+        </template>
+      </ai-title>
      <template #content>
        <ai-search-bar>
          <template #left>
+            <ai-select placeholder="机构类型" v-model="search.organizationType" @change="page.current=1,getTableData()"
+                       :selectList="dict.getDict('financialOrganizationType')"/>
            <ai-select v-model="search.repaymentTimeline" :selectList="dict.getDict('productRepaymentTimeline')"
                       placeholder="还款期限"
                       @change="page.current=1,getTableData()"/>
            <ai-select v-model="search.guaranteeMode" :selectList="dict.getDict('productGuaranteeMode')"
                       placeholder="担保方式"
                       @change="page.current=1,getTableData()"/>
+            <ai-select v-model="search.isHot" :selectList="dict.getDict('yesOrNo')"
+                       placeholder="热门推荐"
+                       @change="page.current=1,getTableData()"/>
          </template>
          <template #right>
            <el-input size="small" placeholder="搜索产品名称" v-model="search.productName" clearable
@@ -74,6 +83,7 @@ export default {
      tableData: [],
      colConfigs: [
        {label: "产品名称", prop: "productName", width: "160px"},
+        {label: "机构类型", prop: "organizationType", dict: "financialOrganizationType"},
        {label: "贷款额度(万)", prop: "loanMax", align: "center", width: 120},
        {label: "参考利率(%)", slot: 'interestRateMin', align: "center", width: 120},
        {label: "还款期限", prop: "repaymentTimeline", dict: "productRepaymentTimeline", align: "center"},
--- a/project/xiushan/apps/finance/AppFinanceProduct/productRecommend.vue
+++ b/project/xiushan/apps/finance/AppFinanceProduct/productRecommend.vue
@@ -0,0 +1,164 @@
+<template>
+  <section class="productRecommend">
+    <ai-list>
+      <ai-title slot="title" title="推荐产品" isShowBottomBorder isShowBack @onBackClick="$router.push({query:{}})"/>
+      <template #content>
+        <ai-search-bar>
+          <template #left>
+            <el-button type="primary" @click="dialog=true">新增推荐</el-button>
+            <ai-select placeholder="机构类型" v-model="search.organizationType" @change="page.current=1,getTableData()"
+                       :selectList="dict.getDict('financialOrganizationType')"/>
+          </template>
+        </ai-search-bar>
+        <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
+                  @getList="getTableData" :col-configs="colConfigs" :dict="dict">
+          <el-table-column slot="options" label="操作" fixed="right" align="center" width="200px">
+            <template slot-scope="{row}">
+              <el-button type="text" @click="handleEdit(row.id)">编辑</el-button>
+              <el-button type="text" @click="handleDelete(row.id)">删除</el-button>
+            </template>
+          </el-table-column>
+        </ai-table>
+      </template>
+    </ai-list>
+    <ai-dialog :visible.sync="dialog" :title="dialogTitle" @closed="form={}" @onConfirm="submitAudit" width="560px">
+      <el-form :model="form" :rules="rules" ref="PRForm" size="small" label-width="120px">
+        <el-form-item label="机构类型" prop="organizationType">
+          <ai-select v-model="form.organizationType" :selectList="dict.getDict('financialOrganizationType')"
+                     @change="getProducts(),form.productId=null"/>
+        </el-form-item>
+        <el-form-item label="推荐产品" prop="productId">
+          <ai-select v-model="form.productId" :selectList="productOps" @change="getOrgId"/>
+        </el-form-item>
+        <el-form-item label="推荐顺序" prop="showIndex">
+          <el-input type="number" v-model.number="form.showIndex" placeholder="请输入" clearable/>
+        </el-form-item>
+      </el-form>
+    </ai-dialog>
+  </section>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: "productRecommend",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  computed: {
+    ...mapState(['user']),
+    isFinanceUser() {
+      return !!this.user.financeUser?.id
+    },
+    dialogTitle() {
+      return this.form.id ? "编辑推荐" : "新增推荐"
+    },
+    productOps() {
+      return this.productList.map(e => ({dictName: e.productName, dictValue: e.id})) || []
+    }
+  },
+  data() {
+    return {
+      search: {productName: ""},
+      page: {current: 1, size: 10, total: 0},
+      tableData: [],
+      colConfigs: [
+        {label: "产品名称", prop: "productName"},
+        {label: "机构类型", prop: "organizationType", dict: "financialOrganizationType", width: 120},
+        {label: "推荐顺序", prop: "showIndex", align: "center", width: 120},
+        {label: "机构名称", prop: "organizationName"},
+        {slot: "options"}
+      ],
+      dialog: false,
+      form: {},
+      rules: {
+        showIndex: [
+          {required: true, message: "请输入推荐顺序"},
+          {pattern: /^[1-7]$/, message: "请输入1~7之间的整数"}
+        ],
+        productId: [{required: true, message: "请选择推荐产品",trigger:"blur"}],
+        organizationType: [{required: true, message: "请选择机构类型"}],
+      },
+      productList: []
+    }
+  },
+  methods: {
+    getTableData() {
+      this.instance.post("/appfinancialproductrecommend/list", null, {
+        params: {...this.page, ...this.search}
+      }).then(res => {
+        if (res?.data) {
+          this.tableData = res.data?.records.map(e => {
+            let guaranteeModeLabel = e.guaranteeMode.split(",").map(g => this.dict.getLabel("productGuaranteeMode", g))?.toString()
+            return {...e, guaranteeModeLabel}
+          })
+          this.page.total = res.data.total
+        }
+      })
+    },
+    handleEdit(row) {
+      this.dialog = false
+      this.form = JSON.parse(JSON.stringify(row))
+    },
+    handleDelete(ids) {
+      this.$confirm("是否要删除该推荐?").then(() => {
+        this.instance.post("/appfinancialproductrecommend/delete", null, {
+          params: {ids}
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$message.success("删除成功!")
+            this.getTableData()
+          }
+        })
+      }).catch(() => 0)
+    },
+    submitAudit() {
+      this.$refs.PRForm.validate(v => {
+        if (v) {
+          this.instance.post("/appfinancialproductrecommend/addOrUpdate", this.form).then(res => {
+            if (res?.code == 0) {
+              this.$message.success("提交成功!")
+              this.getTableData()
+            }
+          })
+        }
+      })
+    },
+    getProducts() {
+      let {organizationType} = this.form
+      this.instance.post("/appfinancialproduct/list", null, {
+        params: {organizationType, size: 999}
+      }).then(res => {
+        if (res?.data) {
+          this.productList = res.data?.records
+        }
+      })
+    },
+    getOrgId(productId) {
+      let product = this.productList.find(e => e.id == productId)
+      this.form.organizationId = product?.organizationId || ""
+      this.$forceUpdate()
+    }
+  },
+  created() {
+    this.getTableData()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.productRecommend {
+  height: 100%;
+
+  ::v-deep input[type="number"] {
+    line-height: 1px !important;
+
+    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
+      -webkit-appearance: none !important;
+    }
+  }
+}
+</style>