333 lines
10 KiB
Vue
333 lines
10 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="form-container">
|
||
<uni-section title="基础卡片" type="line" >
|
||
<!-- 基础表单校验：缩小字体+一行两列布局 -->
|
||
<uni-forms
|
||
ref="valiForm"
|
||
label-width="50px"
|
||
label-position="left"
|
||
:modelValue="form"
|
||
style="font-size: 10px;"
|
||
>
|
||
<!-- 一行两列布局容器 -->
|
||
<view class="form-row">
|
||
<uni-forms-item label="标题:" name="name" class="form-item">
|
||
<uni-easyinput
|
||
v-model="form.title"
|
||
placeholder="请输入标题搜索"
|
||
|
||
/>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="详情:" label-width="35px" name="age" class="form-item">
|
||
<uni-easyinput
|
||
v-model="form.detail"
|
||
placeholder="请输入详情搜索"
|
||
|
||
/>
|
||
</uni-forms-item>
|
||
</view>
|
||
|
||
<!-- 第二行两列 -->
|
||
<view class="form-row">
|
||
<uni-forms-item label="优先级:" name="priority" class="form-item">
|
||
<uni-data-select
|
||
v-model="form.priority"
|
||
:localdata="range"
|
||
|
||
/>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="进度:" label-width="35px" name="progress" class="form-item">
|
||
<uni-data-select
|
||
v-model="form.progress"
|
||
:localdata="range"
|
||
|
||
/>
|
||
</uni-forms-item>
|
||
</view>
|
||
</uni-forms>
|
||
|
||
<view class="btn-group">
|
||
<view class="btn-left">
|
||
|
||
<button
|
||
class="iconfont icon-add mini-btn add-btn"
|
||
@click="submit('form')"
|
||
hover-class="is-hover"
|
||
type="default"
|
||
size="mini"
|
||
> 新增</button>
|
||
|
||
<button
|
||
class="iconfont icon-ashbin mini-btn del-btn"
|
||
hover-class="is-hover"
|
||
type="default"
|
||
size="mini"
|
||
> 删除</button>
|
||
<button
|
||
class="iconfont icon-edit mini-btn edit-btn"
|
||
hover-class="is-hover"
|
||
type="default"
|
||
size="mini"
|
||
> 编辑</button>
|
||
</view>
|
||
|
||
<view class="btn-right">
|
||
<button
|
||
class="iconfont icon-search mini-btn"
|
||
hover-class="is-hover"
|
||
type="default"
|
||
size="mini"
|
||
> 查询</button>
|
||
</view>
|
||
</view>
|
||
</uni-section>
|
||
</view>
|
||
|
||
<view class="uni-container">
|
||
<!-- 表格区域：保持原有紧凑样式并优化 -->
|
||
<uni-table
|
||
ref="table"
|
||
:loading="loading"
|
||
border
|
||
stripe
|
||
type="selection"
|
||
emptyText="暂无更多数据"
|
||
@selection-change="selectionChange"
|
||
style="width: 100%; font-size: 11px;"
|
||
:border-width="1"
|
||
>
|
||
<uni-tr>
|
||
<uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">选择</uni-th>
|
||
<uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">需求标题</uni-th>
|
||
<uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">需求详情</uni-th>
|
||
<uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">优先级</uni-th>
|
||
<uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">进度</uni-th>
|
||
<uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">需求类型</uni-th>
|
||
<uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">经办人名称</uni-th>
|
||
<uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">操作</uni-th>
|
||
</uni-tr>
|
||
<uni-tr v-for="(item, index) in tableData" :key="index" style="height: 30px; line-height: 30px;">
|
||
<uni-td style="width: auto; padding: 1px 0; font-size: 11px;">
|
||
<uni-checkbox :value="index" @change="(e) => handleCheckboxChange(e, index)"></uni-checkbox>
|
||
</uni-td>
|
||
<uni-td style="width: auto; padding: 1px 0; font-size: 11px;">{{ item.title }}</uni-td>
|
||
<uni-td style="width: auto; padding: 1px 0; font-size: 11px;">
|
||
<view class="name">{{ item.detail }}</view>
|
||
</uni-td>
|
||
<uni-td align="center" style="width: auto; padding: 1px 0; font-size: 11px;">{{ item.priority }}</uni-td>
|
||
<uni-td align="center" style="width: auto; padding: 1px 0; font-size: 11px;">{{ item.progress }}</uni-td>
|
||
<uni-td align="center" style="width: auto; padding: 1px 0; font-size: 11px;">{{ item.reqType }}</uni-td>
|
||
<uni-td align="center" style="width: auto; padding: 1px 0; font-size: 11px;">{{ item.assigneeName }}</uni-td>
|
||
<uni-td style="width: auto; padding: 1px 0; font-size: 11px;">
|
||
<view class="uni-group">
|
||
<button class="uni-button" size="mini" type="primary" style="padding: 1px 6px; font-size: 10px;">修改</button>
|
||
<button class="uni-button" size="mini" type="warn" style="padding: 1px 6px; font-size: 10px; margin-left: 3px;">删除</button>
|
||
</view>
|
||
</uni-td>
|
||
</uni-tr>
|
||
</uni-table>
|
||
<view class="uni-pagination-box" style="margin-top: 8px;">
|
||
<uni-pagination
|
||
show-icon
|
||
:page-size="pageSize"
|
||
:current="pageCurrent"
|
||
:total="total"
|
||
@change="change"
|
||
style="font-size: 11px;"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import UniTh from "../../../uni_modules/uni-table/components/uni-th/uni-th.vue";
|
||
import UniTr from "../../../uni_modules/uni-table/components/uni-tr/uni-tr.vue";
|
||
import UniTd from "../../../uni_modules/uni-table/components/uni-td/uni-td.vue";
|
||
import UniPagination from "../../../uni_modules/uni-pagination/components/uni-pagination/uni-pagination.vue";
|
||
import { listRequire } from "../../../api/system/require";
|
||
import UniTable from "../../../uni_modules/uni-table/components/uni-table/uni-table.vue";
|
||
|
||
export default {
|
||
components: {UniTable, UniPagination, UniTd, UniTr, UniTh },
|
||
data() {
|
||
return {
|
||
searchVal: '',
|
||
tableData: [],
|
||
pageSize: 10,
|
||
pageCurrent: 1,
|
||
total: 0,
|
||
range:[],
|
||
form: {
|
||
title:null,
|
||
detail:null,
|
||
priority:null,
|
||
progress: null
|
||
},
|
||
loading: false,
|
||
selectedIndexs: [] // 已选择的行索引
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getData()
|
||
},
|
||
methods: {
|
||
// 多选处理
|
||
selectedItems() {
|
||
return this.selectedIndexs.map(i => this.tableData[i])
|
||
},
|
||
// 多选（修复参数传递）
|
||
handleCheckboxChange(e, index) {
|
||
if (e.detail.value) {
|
||
// 去重处理
|
||
if (!this.selectedIndexs.includes(index)) {
|
||
this.selectedIndexs.push(index)
|
||
}
|
||
} else {
|
||
this.selectedIndexs = this.selectedIndexs.filter(item => item !== index)
|
||
}
|
||
},
|
||
// 批量删除
|
||
delTable() {
|
||
console.log(this.selectedItems())
|
||
},
|
||
// 分页触发
|
||
change(e) {
|
||
this.selectedIndexs = []
|
||
this.getData(e.current)
|
||
},
|
||
// 搜索
|
||
search() {
|
||
this.getData()
|
||
},
|
||
submit(form) {
|
||
console.info(form)
|
||
},
|
||
// 获取数据
|
||
getData(pageCurrent) {
|
||
this.loading = true
|
||
this.pageCurrent = pageCurrent || this.pageCurrent
|
||
const queryParams = {
|
||
imei: this.imei,
|
||
pageNum: this.pageCurrent,
|
||
pageSize: this.pageSize,
|
||
}
|
||
listRequire(queryParams).then(response => {
|
||
if (response.code === 200 && response.rows) {
|
||
this.tableData = response.rows
|
||
this.total = response.total
|
||
}
|
||
this.loading = false
|
||
}).catch(error => {
|
||
console.error('获取数据失败:', error)
|
||
this.loading = false
|
||
})
|
||
},
|
||
// 补充selection-change事件
|
||
selectionChange(e) {
|
||
console.log('表格选中项:', e)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 页面基础样式重置 */
|
||
page {
|
||
padding-top: 0 !important;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* 整体容器样式 */
|
||
.container {
|
||
margin: 20rpx;
|
||
border-radius: 20rpx;
|
||
background: #fff;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.form-container {
|
||
margin: 20rpx 0 0 0;
|
||
padding: 15rpx;
|
||
border-radius: 20rpx;
|
||
background: #fff;
|
||
}
|
||
|
||
/* 表单一行两列布局核心样式 */
|
||
.form-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
margin: 0 10rpx 10rpx 10rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 核心：父容器flex布局，通过justify-content: space-between实现左右分布 */
|
||
.btn-group {
|
||
display: flex;
|
||
justify-content: space-between; /* 关键：左右元素分别靠两端 */
|
||
align-items: center; /* 垂直居中，保证按钮对齐 */
|
||
width: 100%; /* 占满父容器宽度，确保分布效果 */
|
||
padding: 20rpx 10rpx 0; /* 左右留间距，避免贴边 */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 左侧按钮容器：横向排列，靠左 */
|
||
.btn-left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 右侧按钮容器：横向排列，靠右 */
|
||
.btn-right {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 表格容器样式 */
|
||
.uni-container {
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.uni-group {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 需求详情文字样式 */
|
||
.name {
|
||
line-height: 18px;
|
||
font-size: 11px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 分页区域样式 */
|
||
.uni-pagination-box {
|
||
text-align: center;
|
||
}
|
||
|
||
/deep/ .uni-forms-item__label {
|
||
font-size: 12px !important;
|
||
padding: 0 !important;
|
||
}
|
||
/deep/ .uni-select, /deep/.uni-easyinput__content-input {
|
||
font-size: 12px !important;
|
||
height: 30px;
|
||
}
|
||
|
||
|
||
.form-item {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 48%; /* 每个表单项占48%宽度，留间距 */
|
||
box-sizing: border-box;
|
||
margin: 0 !important; /* 清除默认间距 */
|
||
}
|
||
|
||
|
||
</style> |