项目增加检索,其他小优化
This commit is contained in:
94
components/oa/oa-dict-tag/index.vue
Normal file
94
components/oa/oa-dict-tag/index.vue
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<text v-if="label" :class="['dict-tag', tagClass]">{{ label }}</text>
|
||||||
|
<text v-else class="dict-tag dict-tag-empty">{{ placeholder }}</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getDicts } from '@/api/oa/dict.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'DictTag',
|
||||||
|
props: {
|
||||||
|
dictType: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
colorMap: {
|
||||||
|
// 可选,传入字典值与颜色的映射
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
options: [],
|
||||||
|
label: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
tagClass() {
|
||||||
|
if (!this.value) return ''
|
||||||
|
const color = this.colorMap[this.value]
|
||||||
|
return color ? `dict-tag-${color}` : ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value: {
|
||||||
|
immediate: true,
|
||||||
|
handler(val) {
|
||||||
|
this.setLabel(val)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dictType: {
|
||||||
|
immediate: true,
|
||||||
|
handler() {
|
||||||
|
this.fetchOptions()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async fetchOptions() {
|
||||||
|
if (!this.dictType) return
|
||||||
|
const res = await getDicts(this.dictType)
|
||||||
|
this.options = res.data || []
|
||||||
|
this.setLabel(this.value)
|
||||||
|
},
|
||||||
|
setLabel(val) {
|
||||||
|
const item = this.options.find(item => item.dictValue == val)
|
||||||
|
this.label = item ? item.dictLabel : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.dict-tag {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 4rpx 16rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: #333;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
}
|
||||||
|
.dict-tag-empty {
|
||||||
|
color: #bbb;
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
/* 可自定义颜色映射样式 */
|
||||||
|
.dict-tag-blue { background: #e6f7ff; color: #1890ff; }
|
||||||
|
.dict-tag-green { background: #f6ffed; color: #52c41a; }
|
||||||
|
.dict-tag-red { background: #fff1f0; color: #f5222d; }
|
||||||
|
.dict-tag-orange { background: #fff7e6; color: #fa8c16; }
|
||||||
|
.dict-tag-gray { background: #f5f5f5; color: #888; }
|
||||||
|
</style>
|
||||||
@@ -13,7 +13,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<text class="info-label">项目类型:</text>
|
<text class="info-label">项目类型:</text>
|
||||||
<text class="info-value">{{ projectDetail.projectType || '-' }}</text>
|
<oa-dict-tag dict-type="sys_project_type" :value="projectDetail.projectType" placeholder="-" />
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<text class="info-label">项目地址:</text>
|
<text class="info-label">项目地址:</text>
|
||||||
|
|||||||
@@ -2,19 +2,82 @@
|
|||||||
<view class="project-page">
|
<view class="project-page">
|
||||||
<!-- 新增按钮 -->
|
<!-- 新增按钮 -->
|
||||||
<view class="add-btn-row">
|
<view class="add-btn-row">
|
||||||
|
<u-search
|
||||||
|
placeholder="根据项目名称搜索"
|
||||||
|
v-model="queryParams.projectName"
|
||||||
|
class="search-input"
|
||||||
|
:show-action="false"
|
||||||
|
@search="handleSearch"
|
||||||
|
/>
|
||||||
<view class="button-group">
|
<view class="button-group">
|
||||||
|
</input>
|
||||||
<uni-icons
|
<uni-icons
|
||||||
type="gift"
|
type="gift"
|
||||||
size="30"
|
size="30"
|
||||||
@click="toggleQualityFilter"
|
@click="toggleQualityFilter"
|
||||||
:color="qualityFilter ? '#ffcc00' : '#333'"
|
:color="qualityFilter ? '#ffcc00' : '#333'"
|
||||||
/>
|
/>
|
||||||
<!-- <uni-icons
|
<uni-icons
|
||||||
type="gear"
|
type="search"
|
||||||
size="30"
|
size="30"
|
||||||
@click="openSettingsPopup"
|
@click="openSettingsPopup"
|
||||||
color="#333"
|
color="#333"
|
||||||
/> -->
|
></uni-icons>
|
||||||
|
<uni-drawer
|
||||||
|
ref="filterDrawer"
|
||||||
|
mode="right"
|
||||||
|
:width="300"
|
||||||
|
>
|
||||||
|
<view class="popup-content">
|
||||||
|
<view class="filter-title">更多筛选条件</view>
|
||||||
|
<view class="filter-item">
|
||||||
|
<text class="filter-label">项目类型</text>
|
||||||
|
<oa-dict-select
|
||||||
|
v-model="queryParams.projectType"
|
||||||
|
dict-type="sys_project_type"
|
||||||
|
placeholder="请选择项目类型"
|
||||||
|
@change="handleQuery"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="filter-item">
|
||||||
|
<text class="filter-label">贸易类型</text>
|
||||||
|
<oa-dict-select
|
||||||
|
v-model="queryParams.tradeType"
|
||||||
|
dict-type="sys_trade_type"
|
||||||
|
placeholder="请选择贸易类型"
|
||||||
|
@change="handleQuery"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="filter-item">
|
||||||
|
<text class="filter-label">项目代号</text>
|
||||||
|
<oa-dict-select
|
||||||
|
v-model="queryParams.projectCode"
|
||||||
|
dict-type="sys_project_code"
|
||||||
|
placeholder="请选择代号类型"
|
||||||
|
@change="handleQuery"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="filter-item">
|
||||||
|
<text class="filter-label">日期范围</text>
|
||||||
|
<uni-datetime-picker
|
||||||
|
v-model="searchTime"
|
||||||
|
type="daterange"
|
||||||
|
rangeSeparator="至"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
@change="handleQuery"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="filter-actions">
|
||||||
|
<button class="primary" @click="handleQuery">查询</button>
|
||||||
|
<button @click="resetQuery">重置</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-drawer>
|
||||||
<uni-icons
|
<uni-icons
|
||||||
type="plus"
|
type="plus"
|
||||||
size="30"
|
size="30"
|
||||||
@@ -36,7 +99,7 @@
|
|||||||
<view class="project-title">{{ item.projectName }}</view>
|
<view class="project-title">{{ item.projectName }}</view>
|
||||||
<view class="project-info">
|
<view class="project-info">
|
||||||
<text>负责人:{{ item.functionary }}</text>
|
<text>负责人:{{ item.functionary }}</text>
|
||||||
<text :style="getRemainTimeStyle(item.remainTime)">
|
<text :style="getRemainTimeStyle(item.remainTime)" v-if="item.projectStatus == 0">
|
||||||
剩余时间:{{ item.remainTime }}天
|
剩余时间:{{ item.remainTime }}天
|
||||||
</text>
|
</text>
|
||||||
<text>项目总金额:{{ item.funds }}元</text>
|
<text>项目总金额:{{ item.funds }}元</text>
|
||||||
@@ -70,13 +133,74 @@ export default {
|
|||||||
loadMoreStatus: 'more', // 加载更多状态
|
loadMoreStatus: 'more', // 加载更多状态
|
||||||
scrollHeight: 0, // 滚动区域高度
|
scrollHeight: 0, // 滚动区域高度
|
||||||
qualityFilter: false, // 优质筛选开关
|
qualityFilter: false, // 优质筛选开关
|
||||||
|
searchTime: [], // 日期范围
|
||||||
|
queryParams: {
|
||||||
|
projectName: '',
|
||||||
|
projectType: '',
|
||||||
|
tradeType: '',
|
||||||
|
projectCode: '',
|
||||||
|
projectStatus: ''
|
||||||
|
},
|
||||||
|
dict: {
|
||||||
|
type: {
|
||||||
|
sys_project_type: [],
|
||||||
|
sys_trade_type: [],
|
||||||
|
sys_project_code: [],
|
||||||
|
sys_project_status: []
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
this.getList();
|
this.getList();
|
||||||
this.calculateScrollHeight();
|
this.calculateScrollHeight();
|
||||||
|
// TODO: 这里应请求字典数据填充dict.type
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getStatusLabel(val) {
|
||||||
|
const arr = this.dict.type.sys_project_status;
|
||||||
|
const found = arr.find(i => i.value === val);
|
||||||
|
return found ? found.label : '';
|
||||||
|
},
|
||||||
|
openSettingsPopup() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (this.$refs.filterDrawer) this.$refs.filterDrawer.open();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleSearch() {
|
||||||
|
this.page = 1;
|
||||||
|
this.projectList = [];
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
handleQuery() {
|
||||||
|
this.page = 1;
|
||||||
|
this.projectList = [];
|
||||||
|
if (this.$refs.filterDrawer) this.$refs.filterDrawer.close();
|
||||||
|
// 日期范围处理
|
||||||
|
if (this.searchTime && this.searchTime.length === 2) {
|
||||||
|
this.queryParams.beginDate = this.searchTime[0];
|
||||||
|
this.queryParams.endDate = this.searchTime[1];
|
||||||
|
} else {
|
||||||
|
this.queryParams.beginDate = '';
|
||||||
|
this.queryParams.endDate = '';
|
||||||
|
}
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
resetQuery() {
|
||||||
|
this.queryParams = {
|
||||||
|
projectName: '',
|
||||||
|
projectType: '',
|
||||||
|
tradeType: '',
|
||||||
|
projectCode: '',
|
||||||
|
projectStatus: ''
|
||||||
|
};
|
||||||
|
this.searchTime = [];
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
filterCode(val) {
|
||||||
|
// 可根据需要自定义筛选逻辑
|
||||||
|
return true;
|
||||||
|
},
|
||||||
calculateScrollHeight() {
|
calculateScrollHeight() {
|
||||||
const systemInfo = uni.getSystemInfoSync();
|
const systemInfo = uni.getSystemInfoSync();
|
||||||
const tabHeight = 75; // tab高度
|
const tabHeight = 75; // tab高度
|
||||||
@@ -84,7 +208,7 @@ export default {
|
|||||||
this.scrollHeight = systemInfo.windowHeight - tabHeight - containerPadding + 80;
|
this.scrollHeight = systemInfo.windowHeight - tabHeight - containerPadding + 80;
|
||||||
},
|
},
|
||||||
getList() {
|
getList() {
|
||||||
const params = { pageNum: this.page, pageSize: this.pageSize };
|
const params = { pageNum: this.page, pageSize: this.pageSize, ...this.queryParams };
|
||||||
if (this.qualityFilter) {
|
if (this.qualityFilter) {
|
||||||
params.prePay = 0.1; // 添加优质筛选参数
|
params.prePay = 0.1; // 添加优质筛选参数
|
||||||
}
|
}
|
||||||
@@ -186,6 +310,7 @@ export default {
|
|||||||
justify-content: flex-end; /* 右对齐 */
|
justify-content: flex-end; /* 右对齐 */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 20rpx;
|
margin: 20rpx;
|
||||||
|
gap: 10rpx; /* 按钮之间的间距 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-group {
|
.button-group {
|
||||||
@@ -195,8 +320,62 @@ export default {
|
|||||||
|
|
||||||
.popup-content {
|
.popup-content {
|
||||||
background-color: #fff; /* 设置纯白背景 */
|
background-color: #fff; /* 设置纯白背景 */
|
||||||
padding: 20px; /* 添加内边距 */
|
padding: 24px 18px 18px 18px; /* 上右下左内边距 */
|
||||||
border-radius: 8px; /* 圆角 */
|
border-radius: 14px; /* 圆角 */
|
||||||
|
min-height: 100vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
.filter-label {
|
||||||
|
min-width: 80px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #666;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.filter-item oa-dict-select,
|
||||||
|
.filter-item picker,
|
||||||
|
.filter-item uni-datetime-picker {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.filter-item .uni-input {
|
||||||
|
background: #f7f7f7;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.filter-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 18px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.filter-actions button {
|
||||||
|
min-width: 90px;
|
||||||
|
padding: 8px 0;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 16px;
|
||||||
|
background: #2979ff;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.filter-actions button:not(.primary) {
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: #333;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-button {
|
.close-button {
|
||||||
|
|||||||
@@ -118,7 +118,7 @@ export default {
|
|||||||
total: 0,
|
total: 0,
|
||||||
loadingMore: false,
|
loadingMore: false,
|
||||||
hasMore: true,
|
hasMore: true,
|
||||||
activeFilter: 'model' // 当前展开的筛选项
|
activeFilter: 'name' // 当前展开的筛选项
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
|||||||
Reference in New Issue
Block a user