修改

src/views/center/demand.vue

@@ -35,7 +35,7 @@
         </el-col>
       </el-col>
     </el-row>
-    <el-dialog v-model="dialog.show" :title="dialog.title" :destroy-on-close="false" @close="toClose">
+    <el-dialog v-model="dialog.show" :title="dialog.title" :destroy-on-close="false" @close="toClose" width="80%">
       <el-row>
         <el-col :span="24" v-if="dialog.type == '1'">
           <custom-form v-model="form" :fields="formFields" :rules="rules" @save="toSave" @draftSave="toDraftSave">
@@ -64,6 +64,28 @@
             </template>
           </custom-form>
         </el-col>
+        <el-col :span="24" v-if="dialog.type == '2'" class="dialog">
+          <div class="list" v-for="(item, index) in supplyList" :key="index" @click="toView(item)">
+            <h2 class="name textMore">
+              <span>{{ item.name || '暂无' }}</span>
+            </h2>
+            <div class="other">
+              <span class="other_1">{{ getDict(item.urgent, 'urgent') || '暂无' }}</span>
+              <div class="other_2">
+                <span>应用行业：</span>
+                {{ item.field || '暂无' }}
+              </div>
+              <div class="other_2">
+                <span>所属产业：</span>
+                {{ item.industry || '暂无' }}
+              </div>
+              <div class="other_2">
+                <span>来源：</span>
+                {{ item.source || '暂无' }}
+              </div>
+            </div>
+          </div>
+        </el-col>
       </el-row>
     </el-dialog>
   </div>
@@ -78,6 +100,7 @@ const userStore = UserStore()
 const user = computed(() => userStore.user)
 // 接口
 import { DemandStore } from '@/store/api/platform/demand'
+import { SupplyStore } from '@/store/api/platform/supply'
 import { DictDataStore } from '@/store/api/system/dictData'
 import { TagsStore } from '@/store/api/system/tags'
 import { SectorStore } from '@/store/api/platform/sector'
@@ -87,9 +110,12 @@ const store = DemandStore()
 const dictDataStore = DictDataStore()
 const tagsStore = TagsStore()
 const sectorStore = SectorStore()
+const supplyStore = SupplyStore()
 // 加载中
 const loading = ref(false)
 
+const router = useRouter()
+
 const searchForm = ref({})
 // 列表
 const list = ref([])
@@ -107,6 +133,8 @@ const cityList = ref([])
 const demandList = ref([])
 const tagsList = ref([])
 const sectorList = ref([])
+// 推荐供给列表
+const supplyList = ref([])
 
 const form = ref({ time: [] })
 const dialog = ref({ type: '1', show: false, title: '发布需求' })
@@ -189,6 +217,7 @@ const getDict = (data, model) => {
   if (data) {
     let res
     if (model == 'status') res = statusList.value.find((f) => f.value == data)
+    else if (model == 'urgent') res = urgentList.value.find((f) => f.value == data)
     return get(res, 'label')
   }
 }
@@ -225,8 +254,10 @@ const toSave = async () => {
   if (get(data, 'id')) res = await store.update({ ...data, ...other })
   else res = await store.create({ ...data, ...other })
   if ($checkRes(res, true)) {
-    search({ skip, limit })
-    toClose()
+    await search({ skip, limit })
+    await toClose()
+    await searchSupply()
+    dialog.value = { type: '2', show: true, title: '相关供给推荐' }
   }
 }
 const toDraftSave = async () => {
@@ -241,8 +272,10 @@ const toDraftSave = async () => {
   if (get(data, 'id')) res = await store.update({ ...data, ...other })
   else res = await store.create({ ...data, ...other })
   if ($checkRes(res, true)) {
-    search({ skip, limit })
-    toClose()
+    await search({ skip, limit })
+    await toClose()
+    await searchSupply()
+    dialog.value = { type: '2', show: true, title: '相关供给推荐' }
   }
 }
 // 审核保存
@@ -252,12 +285,25 @@ const toExam = async (row) => {
       const data = cloneDeep(row)
       let res = await store.update({ id: data.id, status: '0', user: user.value.id })
       if ($checkRes(res, true)) {
-        search({ skip, limit })
-        toClose()
+        await search({ skip, limit })
+        await toClose()
+        await searchSupply()
+        dialog.value = { type: '2', show: true, title: '相关供给推荐' }
       }
     })
     .catch(() => {})
 }
+// 供给列表查询
+const searchSupply = async (industry) => {
+  const info = { skip: 0, limit: 5, is_use: '0', status: '1' }
+  if (industry) info.industry = industry
+  const res = await supplyStore.query(info)
+  if (res.errcode == '0') supplyList.value = res.data
+}
+// 查看详情
+const toView = (item) => {
+  router.push({ path: '/supply/detail', query: { id: item.id || item._id } })
+}
 const toClose = () => {
   form.value = { time: [] }
   dialog.value = { show: false }
@@ -297,4 +343,71 @@ const sizeChange = (limits) => {
     margin: 20px 0 0 0;
   }
 }
+.dialog {
+  display: flex;
+  margin-top: 20px;
+  .list {
+    position: relative;
+    margin-right: 10px;
+    width: 380px;
+    height: 233px;
+    box-shadow: 0 0 13px 0 rgba(5, 88, 219, 0.18);
+    .name {
+      padding: 10px 20px;
+      width: 380px;
+      height: 71px;
+      background-color: #dce5ff;
+      font-size: 16px;
+      line-height: 24px;
+      color: #0d0d0d;
+      display: flex;
+      align-items: center;
+    }
+    .other {
+      height: 162px;
+      padding: 10px 20px 0 20px;
+      .other_1 {
+        padding: 0 10px;
+        height: 25px;
+        background-color: #e6f2fd;
+        border-radius: 2px;
+        border: solid 1px #cae0f5;
+        font-size: $global-font-size-14;
+        line-height: 25px;
+        color: #0085f5;
+      }
+      .other_2 {
+        display: flex;
+        align-items: center;
+        margin-top: 15px;
+        font-size: $global-font-size-16;
+        span {
+          color: #909090;
+        }
+        .state {
+          position: absolute;
+          right: 20px;
+          bottom: 15px;
+          display: inline-block;
+          vertical-align: middle;
+          padding: 0 20px;
+          height: 30px;
+          line-height: 30px;
+          background-image: linear-gradient(90deg, #ff8a00 0, #ff5a00 100%), linear-gradient(#ff7800, #ff7800);
+          background-blend-mode: normal, normal;
+          border-radius: 14px;
+          border: solid 1px #e5e5e5;
+          color: #fff;
+        }
+      }
+    }
+  }
+  .list:hover {
+    box-shadow: 0 0 5px 0 $global-color-107;
+    .name {
+      background-color: $global-color-107;
+      color: $global-color-fff;
+    }
+  }
+}
 </style>