bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

综合查询样式修改

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/search/category/index.vue
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%;

131
src/views/search/equipment/index.vue
View File

@ -1,24 +1,22 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form <el-card class="search-box" style="margin-bottom: 20px;padding-bottom: 15px;" shadow="never">
:model="queryParams" <el-form
ref="queryForm" :model="queryParams"
size="small" ref="queryForm"
:inline="true" size="small"
v-show="showSearch" :inline="true"
label-width="68px" v-show="showSearch"
> 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"
placeholder="装备名称" placeholder="装备名称"
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>
@ -57,50 +55,49 @@
> >
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
</el-col>
<el-col :span="4" style="text-align: right;">
<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-col>
</el-row>
</el-card>
</el-form>
<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 icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</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;">
<el-table v-loading="loading" :data="tableData" border stripe class="my-table"> <span style="font-size: 20px; font-weight: 800;margin-right: 48px;">装备信息列表</span>
<el-table-column label="序号" align="center" width="80" type="index"> <span style="font-size: 16px;color: #808080;">共{{total}}条记录</span>
<template slot-scope="scope">
<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="装备名称" align="center" prop="deviceName" sortable/>
<el-table-column label="装备编码" align="center" prop="code" sortable>
<template slot-scope="scope">
<span style="color: blue">{{ scope.row.code }}</span>
</template>
</el-table-column>
<el-table-column label="装备类目" align="center" prop="typeName" width="250px" sortable>
<template slot-scope="scope">
<span
>{{ scope.row.firstName }} <span v-show="scope.row.firstName">></span> {{
scope.row.secondName
}}<span v-show="scope.row.secondName">></span>{{ scope.row.thirdName }}</span
>
</template>
</el-table-column>
<el-table-column label="装备型号" align="center" prop="typeName" sortable/>
<el-table-column label="所属公司" align="center" prop="companyName" sortable/>
<!-- <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>
</div> </div>
<el-table v-loading="loading" :data="tableData" border stripe class="my-table">
<el-table-column label="序号" align="center" width="80" type="index">
<template slot-scope="scope">
<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="装备名称" align="center" prop="deviceName" sortable/>
<el-table-column label="装备编码" align="center" prop="code" sortable>
<template slot-scope="scope">
<span style="color: blue">{{ scope.row.code }}</span>
</template>
</el-table-column>
<el-table-column label="装备类目" align="center" prop="typeName" width="250px" sortable>
<template slot-scope="scope">
<span
>{{ scope.row.firstName }} <span v-show="scope.row.firstName">></span> {{
scope.row.secondName
}}<span v-show="scope.row.secondName">></span>{{ scope.row.thirdName }}</span
>
</template>
</el-table-column>
<el-table-column label="装备型号" align="center" prop="typeName" sortable/>
<el-table-column label="所属公司" align="center" prop="companyName" sortable/>
<!-- <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>
<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;

253
src/views/search/lease/index.vue
View File

@ -1,132 +1,117 @@
<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-form-item prop="deviceName" label="装备名称" >
<el-col :span="24"> <el-input
<el-form-item prop="deviceName" label="装备名称" > v-model="queryParams.deviceName"
<el-input placeholder="装备名称"
v-model="queryParams.deviceName" clearable style="width: 240px;"
placeholder="装备名称" @keyup.enter.native="handleQuery"
clearable maxlength="20"
@keyup.enter.native="handleQuery" />
maxlength="20" </el-form-item>
/> <el-form-item prop="code" label="装备编码">
</el-form-item> <el-input
<el-form-item prop="code" label="装备编码"> v-model="queryParams.code"
<el-input placeholder="装备编码"
v-model="queryParams.code" clearable style="width: 240px;"
placeholder="装备编码" @keyup.enter.native="handleQuery"
clearable maxlength="20"
@keyup.enter.native="handleQuery" />
maxlength="20" </el-form-item>
/> <el-form-item prop="maStatus" label="装备状态">
</el-form-item> <el-select
style="width: 240px;"
v-model="queryParams.maStatus"
clearable
placeholder="请选择装备状态"
>
<el-option label="草稿状态" value="0"></el-option>
<el-option label="上架" value="2"></el-option>
<el-option label="下架" value="1"></el-option>
<el-option label="在租" value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="rentNum" label="共享次数">
<el-input
v-model="queryParams.rentNum"
placeholder="共享次数"
type="number" style="width: 240px;"
clearable
@keyup.enter.native="handleQuery"
maxlength="20"
/>
</el-form-item>
<el-form-item prop="dateRange" label="更新时间" style="margin-top: 15px;">
<el-date-picker
<el-form-item prop="maStatus" label="装备状态"> v-model="dateRange"
<el-select type="daterange"
style="width: 100% " value-format="yyyy-MM-dd"
range-separator="至"
v-model="queryParams.maStatus" start-placeholder="更新开始日期"
clearable end-placeholder="更新结束日期"
placeholder="请选择装备状态" style="width: 240px;"
> >
<el-option label="草稿状态" value="0"></el-option> </el-date-picker>
<el-option label="上架" value="2"></el-option> </el-form-item>
<el-option label="下架" value="1"></el-option> <el-form-item style="float: right;margin-top: 10px;">
<el-option label="在租" value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="rentNum" label="共享次数">
<el-input
v-model="queryParams.rentNum"
placeholder="共享次数"
type="number"
clearable
@keyup.enter.native="handleQuery"
maxlength="20"
/>
</el-form-item>
<el-form-item prop="dateRange" label="更新时间">
<el-date-picker
v-model="dateRange"
type="daterange"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="更新开始日期"
end-placeholder="更新结束日期"
style="width: 260px "
>
</el-date-picker>
</el-form-item>
</el-col>
</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-form>
</el-card>
</el-card>
</el-form>
<!-- <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;">
<el-table v-loading="loading" :data="tableData" border stripe class="my-table"> <span style="font-size: 20px; font-weight: 800;margin-right: 48px;">装备租赁查询列表</span>
<el-table-column label="序号" align="center" width="80" type="index"> <span style="font-size: 16px;color: #808080;">共{{total}}条记录</span>
<template slot-scope="scope">
<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="装备名称" align="center" prop="deviceName" sortable/>
<el-table-column label="装备编码" align="center" prop="code" sortable>
<template slot-scope="scope">
<span style="color:blue">{{ scope.row.code }}</span>
</template>
</el-table-column>
<el-table-column label="装备类目" align="center" prop="typeName" width="250px" sortable>
<template slot-scope="scope">
<span
>{{ scope.row.firstName }} <span v-show="scope.row.firstName">></span>
{{ scope.row.secondName }}<span v-show="scope.row.secondName">></span
>{{ scope.row.thirdName }}</span
>
</template>
</el-table-column>
<el-table-column label="共享次数" align="center" prop="rentNum" sortable/>
<el-table-column label="装备状态" align="center" prop="maStatus" sortable>
<template slot-scope="scope">
<el-tag v-if="scope.row.maStatus == 0" size="small" type="info">草稿状态</el-tag>
<el-tag v-if="scope.row.maStatus == 1" size="small" type="warning">下架</el-tag>
<el-tag v-if="scope.row.maStatus == 2" size="small" type="success">上架</el-tag>
<el-tag v-if="scope.row.maStatus == 3" size="small" type="danger">在租</el-tag>
</template>
</el-table-column>
<el-table-column label="更新时间" align="center" prop="updateTime" sortable/>
<el-table-column label="操作" align="center" width="180">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleDetail(scope.row)"
>
共享详情
</el-button>
</template>
</el-table-column>
</el-table>
</div> </div>
<el-table v-loading="loading" :data="tableData" border stripe class="my-table">
<el-table-column label="序号" align="center" width="80" type="index">
<template slot-scope="scope">
<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="装备名称" align="center" prop="deviceName" sortable/>
<el-table-column label="装备编码" align="center" prop="code" sortable>
<template slot-scope="scope">
<span style="color:blue">{{ scope.row.code }}</span>
</template>
</el-table-column>
<el-table-column label="装备类目" align="center" prop="typeName" width="250px" sortable>
<template slot-scope="scope">
<span
>{{ scope.row.firstName }} <span v-show="scope.row.firstName">></span>
{{ scope.row.secondName }}<span v-show="scope.row.secondName">></span
>{{ scope.row.thirdName }}</span
>
</template>
</el-table-column>
<el-table-column label="共享次数" align="center" prop="rentNum" sortable/>
<el-table-column label="装备状态" align="center" prop="maStatus" sortable>
<template slot-scope="scope">
<el-tag v-if="scope.row.maStatus == 0" size="small" type="info">草稿状态</el-tag>
<el-tag v-if="scope.row.maStatus == 1" size="small" type="warning">下架</el-tag>
<el-tag v-if="scope.row.maStatus == 2" size="small" type="success">上架</el-tag>
<el-tag v-if="scope.row.maStatus == 3" size="small" type="danger">在租</el-tag>
</template>
</el-table-column>
<el-table-column label="更新时间" align="center" prop="updateTime" sortable/>
<el-table-column label="操作" align="center" width="180">
<template slot-scope="scope">
<el-button
type="text" style="color: #2CBAB2;"
@click="handleDetail(scope.row)"
>
共享详情
</el-button>
</template>
</el-table-column>
</el-table>
<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;