287 lines
10 KiB
Vue
287 lines
10 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="query-view">
|
||
<view class="header">
|
||
<u-search placeholder="请查询" input-align="center" :show-action="false" @focus="onShowPopup"></u-search>
|
||
</view>
|
||
<hqs-popup class="hqs-popup" height="40vh" title="向下滑动关闭" from="top" :mask-click="maskClick" @back="onBack"
|
||
v-model="showPop">
|
||
<view class="from-item">
|
||
<view class="from-item-label">项目名称:</view>
|
||
<u-search class="from-item-input" @focus="selectShow = true" v-model="queryFrom.projectName"
|
||
disabledColor="#ffffff" placeholder="请选择项目名称"></u-search>
|
||
</view>
|
||
<view class="from-item">
|
||
<view class="from-item-label">开始时间:</view>
|
||
<u-search class="from-item-input" @focus="showTime = true; type = 'createdStartDt'" v-model="queryFrom.createdStartDt"
|
||
disabledColor="#ffffff" placeholder="请选择开始时间"></u-search>
|
||
</view>
|
||
<view class="from-item">
|
||
<view class="from-item-label">结束时间:</view>
|
||
<u-search class="from-item-input" @focus="showTime = true; type = 'createdEndDt'" v-model="queryFrom.createdEndDt"
|
||
disabledColor="#ffffff" placeholder="请选择结束时间"></u-search>
|
||
</view>
|
||
<template v-slot:bottom>
|
||
<view class="chaxunx">
|
||
<u-button type="info" size="medium" :ripple="true" ripple-bg-color="#909399"
|
||
@click="resultFunc">重置</u-button>
|
||
<u-button type="primary" size="medium" :ripple="true" ripple-bg-color="#909399"
|
||
@click="queryFunc">查询</u-button>
|
||
</view>
|
||
</template>
|
||
</hqs-popup>
|
||
</view>
|
||
<view class="list-view" style="max-height: 90vh;">
|
||
<view
|
||
style="font-size:1ex;padding: 1ex;box-shadow: .8ex .7ex 1ex #22222215;margin-left: 4.5vw;width: 88vw;height: 16vh;display: flex;" :key="index"
|
||
v-for="(item,index) in tableData">
|
||
<view style="display: flex;flex-direction: column;flex:4.5">
|
||
<span class="span-porject span-porject-top">
|
||
<ul>项目名称</ul>
|
||
<ul>{{item.projectName}}</ul>
|
||
</span>
|
||
<span class="span-porject">
|
||
<ul>创建时间</ul>
|
||
<ul>{{item.createdDtFormatted}}</ul>
|
||
</span>
|
||
<span class="span-porject">
|
||
<ul>修改时间</ul>
|
||
<ul>{{item.updateDt?item.updateDt:''}}</ul>
|
||
</span>
|
||
</view>
|
||
<view style="display: block;flex: 0.01;background-color: #58b6ec;height: 82%;margin-top: 4%;"></view>
|
||
<view style="margin-left: 1ex;display: flex;flex-direction: column;flex:3.5">
|
||
<span class="span-porject span-porject-top">
|
||
<ul>单价</ul>
|
||
<ul>{{item.unitPrice}}</ul>
|
||
</span>
|
||
<span class="span-porject">
|
||
<ul>创建人</ul>
|
||
<ul>{{item.createdBy}}</ul>
|
||
</span>
|
||
<span class="span-porject">
|
||
<ul>修改人</ul>
|
||
<ul>{{item.updateBy?item.updateBy:''}}</ul>
|
||
</span>
|
||
</view>
|
||
<view style="flex:2;display:flex;flex-direction:column;">
|
||
<view style="margin-top:auto;">
|
||
<u-button type="warning" size="mini" :ripple="true" ripple-bg-color="#909399"
|
||
@click="editItem(item)">修改项目</u-button>
|
||
</view>
|
||
<view style="margin-top:1ex;margin-bottom: 0ex;">
|
||
<u-button type="error" size="mini" :ripple="true" ripple-bg-color="#909399"
|
||
@click="delItem(item)">删除项目</u-button>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="foot-view">
|
||
<view class="chaxunx">
|
||
<u-button type="primary" size="medium" :ripple="true" ripple-bg-color="#909399" @click="addItem">新增项目</u-button>
|
||
</view>
|
||
</view>
|
||
<u-picker :show="selectShow" :columns="columns" @confirm="confirm" @cancel="selectShow = false"></u-picker>
|
||
<u-datetime-picker :show="showTime" v-model="time" format="YYYY-MM-DD HH:mm:ss" mode="date"
|
||
@confirm="timeConfirm" @cancel="showTime = false"></u-datetime-picker>
|
||
<u-popup :show="addAndEditShow" :round="10" mode="top" @close="close" @open="open">
|
||
<view>
|
||
<view class="from-item">
|
||
<view class="from-item-label">项目名称:</view>
|
||
<u--input class="from-item-input" v-model="selectRow.projectName"
|
||
disabledColor="#ffffff" placeholder="请输入项目名称"></u--input>
|
||
</view>
|
||
<view class="from-item">
|
||
<view class="from-item-label">单价(元):</view>
|
||
<u--input class="from-item-input" placeholder="请输入单价" v-model="selectRow.unitPrice"></u--input>
|
||
</view>
|
||
<view class="chaxunx" style="margin-top: 2ex;">
|
||
<u-button type="primary" size="medium" :ripple="true" ripple-bg-color="#909399" @click="commitInfo">提交</u-button>
|
||
<u-button type="info" size="medium" :ripple="true" ripple-bg-color="#909399" @click="addAndEditShow = false">关闭</u-button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
|
||
</template>
|
||
<script>
|
||
import { commonDate } from "../../api/api.js"
|
||
export default {
|
||
data() {
|
||
return {
|
||
selectRow: {},
|
||
type: '',
|
||
addAndEditShow: false,
|
||
maskClick: true,
|
||
showPop: false,
|
||
queryFrom: {projectName:'',createdStartDt:'',createdEndDt:''},
|
||
selectShow: false,
|
||
showTime: false,
|
||
columns: [['全部', '针灸', '拔火罐']],
|
||
time: '',
|
||
tableData: [{
|
||
"sid": 5,
|
||
"createdBy": "带头大哥",
|
||
"createdDt": "2024-04-06T11:27:11.000+00:00",
|
||
"projectName": "针灸1225",
|
||
"unitPrice": 1750.00,
|
||
"updateBy": "带头大哥",
|
||
"updateDt": "2024-04-08 15:06:42",
|
||
"createdDtFormatted": "2024-04-06 11:27:11"
|
||
}]
|
||
}
|
||
|
||
},
|
||
async onShow() {
|
||
this.queryFunc()
|
||
const res = await commonDate('project/findProjectNameList',{})
|
||
this.columns = res.data
|
||
|
||
},
|
||
methods: {
|
||
onBack() {
|
||
uni.showToast({
|
||
title: 'test',
|
||
})
|
||
},
|
||
onShowPopup() {
|
||
this.showPop = true
|
||
},
|
||
|
||
confirm(e) {
|
||
console.log(e)
|
||
this.queryFrom.projectName = e.value
|
||
this.selectShow = false
|
||
},
|
||
timeConfirm(e) {
|
||
// this.$set(this.queryFrom, this.type, this.time)
|
||
this.queryFrom[this.type] = this.formatMillisecondsToDate(e.value)
|
||
this.showTime = false
|
||
},
|
||
async queryFunc() {
|
||
this.showPop = false
|
||
const res = await commonDate(this.queryFrom)
|
||
// console.log(res)
|
||
if(res.code == 200){
|
||
this.tableData = res.data
|
||
}
|
||
},
|
||
formatMillisecondsToDate(milliseconds) {
|
||
// 创建一个新的Date对象，参数为毫秒值
|
||
var date = new Date(milliseconds);
|
||
|
||
// 提取年、月、日
|
||
var year = date.getFullYear();
|
||
var month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份从0开始，所以加1，并格式化为两位数
|
||
var day = ("0" + date.getDate()).slice(-2); // 格式化为两位数
|
||
|
||
// 返回年月日的字符串格式
|
||
return year + "-" + month + "-" + day;
|
||
},
|
||
resultFunc() {
|
||
this.queryFrom = {projectName:'', createdStartDt:'', createdEndDt:''}
|
||
},
|
||
editItem(item) {
|
||
this.selectRow = item
|
||
this.addAndEditShow = true
|
||
},
|
||
addItem(){
|
||
this.addAndEditShow = true
|
||
},
|
||
async delItem(item) {
|
||
const res = await commonDate('project/delProject',{sid:item.sid})
|
||
if(res.code == 200){
|
||
this.queryFunc()
|
||
}
|
||
},
|
||
async commitInfo(){
|
||
const {projectName,unitPrice,sid} = this.selectRow
|
||
console.log(projectName,unitPrice,sid)
|
||
console.log(this.selectRow)
|
||
if(!projectName){
|
||
return
|
||
}
|
||
if(!unitPrice){
|
||
return
|
||
}
|
||
if(sid){
|
||
const res = await commonDate('project/editProject',this.selectRow)
|
||
if(res.code == 200){
|
||
this.addAndEditShow = false
|
||
this.queryFunc()
|
||
}
|
||
}else{
|
||
const res = await commonDate('project/addProject',this.selectRow)
|
||
if(res.code == 200){
|
||
this.addAndEditShow = false
|
||
this.queryFunc()
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
</script>
|
||
<style>
|
||
.query-view {
|
||
position: fixed;
|
||
top: 0ex;
|
||
width: 100%;
|
||
}
|
||
|
||
.list-view {
|
||
margin-top: 2.3ex;
|
||
height: 90vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.foot-view {
|
||
position: fixed;
|
||
bottom: 0.2ex;
|
||
width: 100%;
|
||
}
|
||
.span-porject-top{
|
||
margin-top: 1.5ex;
|
||
}
|
||
.span-porject > ul:nth-child(2){
|
||
font-size: 2.1ex;
|
||
color: #1d1d1d;
|
||
}
|
||
.span-porject > ul:nth-child(1){
|
||
font-size: 1.9ex;
|
||
color: #5f5f5f;
|
||
}
|
||
.span-porject{
|
||
margin-bottom: .3ex;
|
||
}
|
||
.hqs-popup {
|
||
padding: 2ex;
|
||
}
|
||
|
||
.from-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.from-item-input {}
|
||
|
||
.from-item-label {
|
||
font-size: 1.8ex;
|
||
text-align: left;
|
||
line-height: 4.8ex;
|
||
margin-right: 1.8ex;
|
||
|
||
}
|
||
|
||
.chaxunx {
|
||
display: flex;
|
||
}
|
||
|
||
.query-view .u-picker {
|
||
position: fixed;
|
||
/* 或者使用 absolute 或 relative，根据你的布局需求 */
|
||
bottom: 0;
|
||
}
|
||
</style> |