综合查询样式修改

This commit is contained in:
zzyuan 2026-01-20 15:06:47 +08:00
parent d3b70f67c9
commit 7f4316aa4e
3 changed files with 235 additions and 175 deletions

View File

@ -103,6 +103,32 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-container{
background: #F0F0F0;
}
::v-deep.el-button--primary{
background-color: #2CBAB2;
border-color: #2CBAB2;
}
::v-deep.el-button--danger{
background-color: #FF5129;
border-color: #FF5129;
}
::v-deep.el-tag.el-tag--info {
background-color: #F5F5F5;
border-color: #B3B3B3;
color: #B3B3B3;
}
::v-deep.el-tag.el-tag--warn{
background-color: rgba(255,171,41,0.1);;
border: #FFAB29;
color: #FFAB29;
}
::v-deep.el-tag.el-tag--success {
background-color: rgba(52,226,199,0.1);
border-color: #34E2C7;
color: #34E2C7;
}
.app-container { .app-container {
height: 100%; height: 100%;

View File

@ -1,16 +1,14 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-card class="search-box" style="margin-bottom: 20px;padding-bottom: 15px;" shadow="never">
<el-form <el-form
:model="queryParams" :model="queryParams"
ref="queryForm" ref="queryForm"
size="small" size="small"
:inline="true" :inline="true"
v-show="showSearch" v-show="showSearch"
label-width="68px" label-width="150px"
> >
<el-card class="search-box">
<el-row style="height: 32px">
<el-col :span="20">
<el-form-item prop="deviceName" label="装备名称"> <el-form-item prop="deviceName" label="装备名称">
<el-input <el-input
v-model="queryParams.deviceName" v-model="queryParams.deviceName"
@ -18,7 +16,7 @@
clearable clearable
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
maxlength="20" maxlength="20"
style="width: 220px" style="width: 240px;"
/> />
</el-form-item> </el-form-item>
<el-form-item prop="code" label="装备编码"> <el-form-item prop="code" label="装备编码">
@ -28,7 +26,7 @@
clearable clearable
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
maxlength="20" maxlength="20"
style="width: 220px" style="width: 240px;"
/> />
</el-form-item> </el-form-item>
@ -39,7 +37,7 @@
:props="partTypeTreeProps" :props="partTypeTreeProps"
filterable filterable
clearable clearable
style="width: 220px" style="width: 240px;"
placeholder="请选择装备类目" placeholder="请选择装备类目"
@change="deviceTypeChange" @change="deviceTypeChange"
></el-cascader> ></el-cascader>
@ -58,21 +56,21 @@
> >
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
</el-col>
<el-col :span="4" style="text-align: right;"> <el-form-item style="float: right;margin-top: 10px;">
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-col> </el-form-item>
</el-row>
</el-card>
</el-form> </el-form>
</el-card>
<!-- <el-row :gutter="10" class="mb8"> <!-- <el-row :gutter="10" class="mb8">
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row> --> </el-row> -->
<el-card class="content-box"> <el-card class="content-box" shadow="never">
<div > <div style="display: flex;align-items: center;padding: 10px 0;margin-bottom: 15px;border-bottom: 1px solid #F0F0F0;">
<span style="font-size: 20px; font-weight: 800;margin-right: 48px;">装备信息列表</span>
<span style="font-size: 16px;color: #808080;">{{total}}条记录</span>
</div>
<el-table v-loading="loading" :data="tableData" border stripe class="my-table"> <el-table v-loading="loading" :data="tableData" border stripe class="my-table">
<el-table-column label="序号" align="center" width="80" type="index"> <el-table-column label="序号" align="center" width="80" type="index">
<template slot-scope="scope"> <template slot-scope="scope">
@ -100,7 +98,6 @@
<el-table-column label="创建时间" align="center" prop="createTime" sortable/> <el-table-column label="创建时间" align="center" prop="createTime" sortable/>
<el-table-column label="更新时间" align="center" prop="updateTime" sortable/> <el-table-column label="更新时间" align="center" prop="updateTime" sortable/>
</el-table> </el-table>
</div>
<div class="pagination-wrapper"> <div class="pagination-wrapper">
<pagination <pagination
@ -286,6 +283,32 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-container{
background: #F0F0F0;
}
::v-deep.el-button--primary{
background-color: #2CBAB2;
border-color: #2CBAB2;
}
::v-deep.el-button--danger{
background-color: #FF5129;
border-color: #FF5129;
}
::v-deep.el-tag.el-tag--info {
background-color: #F5F5F5;
border-color: #B3B3B3;
color: #B3B3B3;
}
::v-deep.el-tag.el-tag--warn{
background-color: rgba(255,171,41,0.1);;
border: #FFAB29;
color: #FFAB29;
}
::v-deep.el-tag.el-tag--success {
background-color: rgba(52,226,199,0.1);
border-color: #34E2C7;
color: #34E2C7;
}
.uploadImg { .uploadImg {
padding-top: 20px; padding-top: 20px;
display: flex; display: flex;

View File

@ -1,14 +1,12 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-card class="search-box" style="margin-bottom: 20px;padding-bottom: 15px;" shadow="never">
<el-card class="search-box"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="150px">
<el-row>
<el-col :span="24">
<el-form-item prop="deviceName" label="装备名称" > <el-form-item prop="deviceName" label="装备名称" >
<el-input <el-input
v-model="queryParams.deviceName" v-model="queryParams.deviceName"
placeholder="装备名称" placeholder="装备名称"
clearable clearable style="width: 240px;"
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
maxlength="20" maxlength="20"
/> />
@ -17,16 +15,14 @@
<el-input <el-input
v-model="queryParams.code" v-model="queryParams.code"
placeholder="装备编码" placeholder="装备编码"
clearable clearable style="width: 240px;"
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
maxlength="20" maxlength="20"
/> />
</el-form-item> </el-form-item>
<el-form-item prop="maStatus" label="装备状态"> <el-form-item prop="maStatus" label="装备状态">
<el-select <el-select
style="width: 100% " style="width: 240px;"
v-model="queryParams.maStatus" v-model="queryParams.maStatus"
clearable clearable
placeholder="请选择装备状态" placeholder="请选择装备状态"
@ -37,20 +33,17 @@
<el-option label="在租" value="3"></el-option> <el-option label="在租" value="3"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item prop="rentNum" label="共享次数"> <el-form-item prop="rentNum" label="共享次数">
<el-input <el-input
v-model="queryParams.rentNum" v-model="queryParams.rentNum"
placeholder="共享次数" placeholder="共享次数"
type="number" type="number" style="width: 240px;"
clearable clearable
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
maxlength="20" maxlength="20"
/> />
</el-form-item> </el-form-item>
<el-form-item prop="dateRange" label="更新时间" style="margin-top: 15px;">
<el-form-item prop="dateRange" label="更新时间">
<el-date-picker <el-date-picker
v-model="dateRange" v-model="dateRange"
@ -59,29 +52,24 @@
range-separator="至" range-separator="至"
start-placeholder="更新开始日期" start-placeholder="更新开始日期"
end-placeholder="更新结束日期" end-placeholder="更新结束日期"
style="width: 260px " style="width: 240px;"
> >
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
</el-col> <el-form-item style="float: right;margin-top: 10px;">
</el-row>
<el-row>
<el-col :span="24" style="text-align: right; margin-top: 10px ;padding-right: 10px">
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-col> </el-form-item>
</el-row>
</el-card>
</el-form> </el-form>
</el-card>
<!-- <el-row :gutter="10" class="mb8"> <!-- <el-row :gutter="10" class="mb8">
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row> --> </el-row> -->
<el-card class="content-box"> <el-card class="content-box" shadow="never">
<div > <div style="display: flex;align-items: center;padding: 10px 0;margin-bottom: 15px;border-bottom: 1px solid #F0F0F0;">
<span style="font-size: 20px; font-weight: 800;margin-right: 48px;">装备租赁查询列表</span>
<span style="font-size: 16px;color: #808080;">{{total}}条记录</span>
</div>
<el-table v-loading="loading" :data="tableData" border stripe class="my-table"> <el-table v-loading="loading" :data="tableData" border stripe class="my-table">
<el-table-column label="序号" align="center" width="80" type="index"> <el-table-column label="序号" align="center" width="80" type="index">
<template slot-scope="scope"> <template slot-scope="scope">
@ -116,9 +104,7 @@
<el-table-column label="操作" align="center" width="180"> <el-table-column label="操作" align="center" width="180">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
size="mini" type="text" style="color: #2CBAB2;"
type="text"
icon="el-icon-view"
@click="handleDetail(scope.row)" @click="handleDetail(scope.row)"
> >
共享详情 共享详情
@ -126,7 +112,6 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div>
<div class="pagination-wrapper"> <div class="pagination-wrapper">
<pagination <pagination
@ -444,6 +429,32 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-container{
background: #F0F0F0;
}
::v-deep.el-button--primary{
background-color: #2CBAB2;
border-color: #2CBAB2;
}
::v-deep.el-button--danger{
background-color: #FF5129;
border-color: #FF5129;
}
::v-deep.el-tag.el-tag--info {
background-color: #F5F5F5;
border-color: #B3B3B3;
color: #B3B3B3;
}
::v-deep.el-tag.el-tag--warn{
background-color: rgba(255,171,41,0.1);;
border: #FFAB29;
color: #FFAB29;
}
::v-deep.el-tag.el-tag--success {
background-color: rgba(52,226,199,0.1);
border-color: #34E2C7;
color: #34E2C7;
}
.uploadImg { .uploadImg {
padding-top: 20px; padding-top: 20px;
display: flex; display: flex;