页面上传

src/assets/styles/ruoyi.scss

@@ -194,7 +194,7 @@
 }
 
 .el-card__body {
-  padding: 15px 20px 20px 20px !important;
+  padding: 15px 20px 20px 20px;
 }
 
 .card-box {

src/views/assetLibrary/QueryForm.vue

+<script setup lang="ts" name="QueryForm">
+import { ref, computed } from 'vue'
+import type { FormInstance } from 'element-plus'
+import PageWrapperSearch from '@/components/Search/PageWrapperSearch.vue'
+import { useDict } from '@/utils/dict'
+
+const emit = defineEmits(['update:modelValue', 'query', 'reset'])
+const employeesList = ref([])
+const props = defineProps<{
+  modelValue: any
+}>()
+
+const queryForm = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val: any) {
+    console.log('query computed', val)
+    emit('update:modelValue', val)
+  }
+})
+
+// 搜索
+function onSearch() {
+  emit('query')
+}
+
+// 重置
+function onReset(formRef: FormInstance) {
+  emit('reset', formRef)
+}
+
+</script>
+
+<template>
+  <page-wrapper-search
+    :model="queryForm"
+    @search="onSearch"
+    @reset="onReset"
+    label-width='100'>
+    <el-form-item label="数据源名称" prop="customerName">
+      <el-input v-model="queryForm.customerName" placeholder="请输入客户名称" clearable />
+    </el-form-item>
+    <el-form-item label="IP" prop="customerName">
+      <el-input v-model="queryForm.customerName" placeholder="请输入客户名称" clearable />
+    </el-form-item>
+    <el-form-item label="数据源类型" prop="customerName">
+      <el-input v-model="queryForm.customerName" placeholder="请输入客户名称" clearable />
+    </el-form-item>
+  </page-wrapper-search>
+</template>

src/views/assetLibrary/index.vue

+<script setup lang="ts" name="AssetLibrary">
+import { ref, getCurrentInstance, nextTick, type ComponentInternalInstance } from 'vue'
+import list from './list.vue'
+
+const widget = {
+  list
+}
+
+const page = ref('list')
+const params = ref({})
+
+const includePages = ref<string[]>(['list'])
+const excludePages = ref<string[]>([])
+
+function onChangePage(val: string, param?: any, refresh?: boolean) {
+  if (refresh) {
+    if (!excludePages.value.includes(val)) {
+      excludePages.value.push(val)
+    }
+  }
+  page.value = val
+  params.value = param ?? {}
+  if (refresh) {
+    nextTick(() => {
+      excludePages.value = excludePages.value.filter(item => item !== val)
+    })
+  }
+}
+
+</script>
+
+<template>
+  <KeepAlive :include="includePages" :exclude="excludePages">
+    <component
+      :is="widget[page]"
+      v-bind="params"
+      @page="onChangePage" />
+  </KeepAlive>
+</template>
+

src/views/assetLibrary/list.vue

+<script setup name="AssetLibrary">
+import { ref, toRefs, reactive, getCurrentInstance } from 'vue'
+import QueryForm from './QueryForm.vue'
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    customerName: null
+  },
+  rules: {
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+const onQuery = () => {
+  console.log('onQuery')
+  // handleQuery()
+}
+// 查询组件事件重置
+const onReset = (formQuery) => {
+  console.log('onReset')
+  formQuery.resetFields()
+}
+</script>
+
+<template>
+  <div class="app-container scroller">
+    <PageTitle>
+      <template #title>
+        <span id="badDebt" class="title-icon">
+          资产库
+          <PageTour tourType="badDebt" />
+        </span>
+      </template>
+      <template #buttons>
+        <el-button
+          type="primary"
+          icon="Plus"
+        >新增数据源</el-button>
+      </template>
+    </PageTitle>
+    <div class="app-container__body">
+      <query-form
+        ref="QueryFormRef"
+        v-model="queryParams"
+        @query="onQuery"
+        @reset="onReset" />
+        <el-scrollbar>
+          <div class="flex-content">
+            <el-card class="box-card" :body-style="{ padding: '0px !important' }">
+              <img class="img" src="https://172.19.1.166:9005/static/img/MYSQL.535270a.png" alt="">
+              <div class="title">
+                <div class="title-content"></div>
+              </div>
+            </el-card>
+          </div>
+        </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.flex-content{
+  display: flex;
+  .box-card{
+    flex-shrink: 0;
+    margin-right: 20px;
+    height: 138px;
+    width: 188px;
+    border-radius: 10px;
+    .img{
+      width: 100%;
+      border-radius: 10px 10px 0 0;
+    }
+    :deep(.el-card__body){
+      display: flex;
+      flex-direction: column;
+    }
+    .title{
+      &-content{
+        padding-left: 16px;
+        padding-right: 16px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+  .box-card:last-child{
+    margin-right: 0;
+  }
+}
+</style>
\ No newline at end of file