111

src/components/index.js

@@ -5,6 +5,7 @@ import HcReportDialog from './hc-report/hc-report.vue'
 import HcInfoTable from './info-table/info-table.vue'
 import HcInfoTableTd from './info-table/info-table-td.vue'
 import HcCharts from './echarts/echarts.vue'
+import HcSearchInput from './search-input/search-input.vue'
 
 //注册全局组件
 export const setupComponents = (App) => {
@@ -15,4 +16,5 @@ export const setupComponents = (App) => {
     App.component('HcInfoTable', HcInfoTable)
     App.component('HcInfoTableTd', HcInfoTableTd)
     App.component('HcCharts', HcCharts)
+    App.component('HcSearchInput', HcSearchInput)
 }

src/components/search-input/search-input.vue

@@ -0,0 +1,59 @@
+<template>
+    <div class="hc-search-input-box">
+        <el-input v-model="queryValue" class="w-60" clearable :placeholder="placeholder" @keyup="keyUpEvent" />
+        <el-button type="primary" @click="searchClick">{{ text }}</el-button>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    placeholder: {
+        type: String,
+        default: '请输入关键词检索',
+    },
+    text: {
+        type: String,
+        default: '查询',
+    },
+})
+
+const emit = defineEmits(['search'])
+
+defineOptions({
+    name: 'HcSearchInput',
+})
+
+//双向绑定
+// eslint-disable-next-line no-undef
+const queryValue = defineModel('modelValue', {
+    default: '',
+})
+
+//回车搜索
+const keyUpEvent = (e) => {
+    if (e.key === 'Enter') {
+        searchClick()
+    }
+}
+
+//搜索
+const searchClick = () => {
+    emit('search', queryValue.value)
+}
+</script>
+
+<style lang="scss">
+.hc-search-input-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    .el-input__wrapper {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    .el-button {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+}
+</style>

src/views/project/debit/project/affix.vue

@@ -1,102 +1,49 @@
 <template>
-    <hc-card>
+    <hc-new-card>
         <template #header>
-            111
+            <hc-search-input v-model="searchForm.queryValue" placeholder="请输入文件名称关键词" @search="searchClick" />
         </template>
         <template #extra>
-            222
+            <el-button hc-btn color="#626aef">
+                <HcIcon name="sort-desc" :line="false" />
+                <span>按部位排序</span>
+            </el-button>
+            <el-button hc-btn color="#626aef">
+                <HcIcon name="sort-desc" :line="false" />
+                <span>按录入时间排序</span>
+            </el-button>
         </template>
-        <div class="relative h-full flex">
-            <div :id="`hc_tree_card_${uuid}`">
-                <hc-card-item scrollbar>
-                    <hc-lazy-tree :h-props="treeProps" @load="treeLoadNode" />
-                </hc-card-item>
-            </div>
-            <div :id="`hc_table_card_${uuid}`" class="flex-1">
-                <hc-card-item>
-                    <template #header>
-                        <div class="font-400 text-orange">收方总金额：0元</div>
-                    </template>
-                    <template #extra>
-                        <el-button hc-btn color="#626aef">
-                            <HcIcon name="sort-desc" :line="false" />
-                            <span>按部位排序</span>
-                        </el-button>
-                        <el-button hc-btn color="#626aef">
-                            <HcIcon name="sort-desc" :line="false" />
-                            <span>按录入时间排序</span>
-                        </el-button>
-                    </template>
-                    <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-check @selection-change="tableCheckChange">
-                        <template #action="{ row }">
-                            <el-link type="primary" @click="giveTaskModalClick(row)">下达</el-link>
-                            <el-link type="success">修改</el-link>
-                            <el-link type="danger">删除</el-link>
-                        </template>
-                    </hc-table>
-                    <template #action>
-                        <hc-pages :pages="searchForm" @change="pageChange" />
-                    </template>
-                </hc-card-item>
-            </div>
-        </div>
-    </hc-card>
+        <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-check @selection-change="tableCheckChange">
+            <template #action="{ row }">
+                <el-link type="primary" @click="giveTaskModalClick(row)">下达</el-link>
+                <el-link type="success">修改</el-link>
+                <el-link type="danger">删除</el-link>
+            </template>
+        </hc-table>
+        <template #action>
+            <hc-pages :pages="searchForm" @change="pageChange" />
+        </template>
+    </hc-new-card>
 </template>
 
 <script setup>
-import { nextTick, onMounted, ref } from 'vue'
-import { getRandom } from 'js-fast-way'
+import { onMounted, ref } from 'vue'
 
 defineOptions({
-    name: 'DebitPayAdminApply',
+    name: 'ProjectDebitProjectAffix',
 })
 
-const uuid = getRandom(4)
-
 //渲染完成
 onMounted(() => {
-    setSplitRef()
-})
 
-//初始化设置拖动分割线
-const setSplitRef = () => {
-    //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
-    nextTick(() => {
-        window.$split(['#hc_tree_card_' + uuid, '#hc_table_card_' + uuid], {
-            sizes: [20, 80],
-            snapOffset: 0,
-            minSize: [50, 500],
-        })
-    })
-}
-
-//搜索表单
-const searchForm = ref({
-    key1: null, current: 1, size: 10, total: 0,
 })
 
+//搜索表单
+const searchForm = ref({ current: 1, size: 10, total: 0 })
 
-//数据格式
-const treeProps = {
-    label: 'name',
-    children: 'children',
-    isLeaf: 'leaf',
-}
-
-//懒加载的数据
-const treeLoadNode = ({ level }, resolve) => {
-    if (level === 0) {
-        return resolve([{ name: 'region' }])
-    }
-    if (level > 3) {
-        return resolve([])
-    }
-    setTimeout(() => {
-        resolve([
-            { name: 'leaf', leaf: true },
-            { name: 'zone' },
-        ])
-    }, 500)
+//搜索
+const searchClick = () => {
+    searchForm.value.current = 1
 }
 
 //分页
@@ -125,7 +72,3 @@ const tableCheckChange = () => {
 
 }
 </script>
-
-<style scoped lang="scss">
-
-</style>