672 lines
18 KiB
Vue
672 lines
18 KiB
Vue
<template>
|
|
<view class="bg-page">
|
|
<u-navbar title="大宗物资" :background="background" :custom-back="goback"
|
|
:title-color="titleColor" :back-icon-color="titleColor">
|
|
<view class="nav_slot_right_box" slot="right">
|
|
<view class="custom_btn add_btn" @click="addBtn()">新增</view>
|
|
</view>
|
|
</u-navbar>
|
|
<view class="secreen-section">
|
|
<view class="search-box">
|
|
<view class="search-input-vh u-border" @click="screenShowFn()">
|
|
<view class="placeholder_text">筛选条件</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content-box u-padding-25">
|
|
<u-swipe-action class="tb_swipe_list"
|
|
v-for="(item, index) in list"
|
|
:show="item.show" :index="index" :key="item.id"
|
|
@click="click"
|
|
@open="open"
|
|
:options="options"
|
|
>
|
|
|
|
<view class="tb_body" @click="showInfo(index)">
|
|
<view class="row_box">
|
|
<view class="text">名称：{{ item.name }}</view>
|
|
</view>
|
|
<view class="row_box">
|
|
<view class="text">年份：{{ item.year }}</view>
|
|
</view>
|
|
|
|
<view class="row_box">
|
|
<view class="text">季度：{{item.quarter|quartername}}</view>
|
|
</view>
|
|
<view class="row_box">
|
|
<view class="text">类型：
|
|
<u-tag text="饲料" v-if="item.type==1" type="success" size="mini"/>
|
|
<u-tag text="肥料" v-if="item.type==2" type="error" size="mini"/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <view class="row_box">
|
|
<view class="text">创建人：{{ item.created_by?item.created_by.name:'-' }}</view>
|
|
</view> -->
|
|
|
|
</view>
|
|
</u-swipe-action>
|
|
<u-loadmore :status="loading" margin-top="60"/>
|
|
</view>
|
|
<!-- 编辑 -->
|
|
<u-popup v-model="editShow" border-radius="28" width="92%" height="70%"
|
|
mode="center" :closeable="true" :mask-close-able="false" z-index="910">
|
|
<view class="popup-form-ubox">
|
|
<view class="top_box">
|
|
<view class="title" v-if="setInfo.id">编辑价格</view>
|
|
<view class="title" v-else>新增价格</view>
|
|
</view>
|
|
<scroll-view class="scroll-y" scroll-y="true">
|
|
<view class="form_edit" style="padding-left: 50rpx;">
|
|
<u-form>
|
|
<u-form-item label="ID" label-width="140" v-if="setInfo.id">
|
|
<view class="input_box bg_colorf8 pdlr12">
|
|
<u-input v-model="setInfo.id" :disabled="true" />
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="名称" label-width="140" :required='true'>
|
|
<view class="input_box">
|
|
<u-input v-model="setInfo.name" />
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="年份" label-width="140" :required='true'>
|
|
<view class="input_box">
|
|
<view class="u-select-list" @click="selectFn1()">
|
|
<view class="value u-line-2"
|
|
v-if="setInfo.year">{{setInfo.year}}</view>
|
|
<view class="placeholder" v-else>请选择</view>
|
|
<view class="right">
|
|
<u-icon name="arrow-right" color="#999" size="28"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="季度" label-width="140" :required='true'>
|
|
<view class="input_box">
|
|
<view class="u-select-list" @click="selectFn2()">
|
|
<view class="value u-line-2"
|
|
v-if="setInfo.quarter_name">{{setInfo.quarter_name}}</view>
|
|
<view class="placeholder" v-else>请选择</view>
|
|
<view class="right">
|
|
<u-icon name="arrow-right" color="#999" size="28"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="类型" label-width="140" :required='true'>
|
|
<view class="input_box">
|
|
<view class="u-select-list" @click="selectFn3()">
|
|
<view class="value u-line-2"
|
|
v-if="setInfo.type">{{setInfo.type_name}}</view>
|
|
<view class="placeholder" v-else>请选择</view>
|
|
<view class="right">
|
|
<u-icon name="arrow-right" color="#999" size="28"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="最低价" label-width="140" :required='true'>
|
|
<view class="input_box">
|
|
<u-input v-model="setInfo.lowest_price" />
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="最高价" label-width="140" :required='true'>
|
|
<view class="input_box">
|
|
<u-input v-model="setInfo.highest_price" type="number"/>
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="单位" label-width="140" :required='true'>
|
|
<view class="input_box">
|
|
<u-input v-model="setInfo.unit" />
|
|
</view>
|
|
</u-form-item>
|
|
</u-form>
|
|
|
|
</view>
|
|
</scroll-view>
|
|
<view class="buttom_section">
|
|
<u-button class="btn" type="default" @click="editShow = false">取消</u-button>
|
|
<u-button class="btn" @click="editInfoBtn()" type="primary">确定</u-button>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<u-popup v-model="popupShow" mode="bottom" border-radius="28" z-index="900">
|
|
<view class="popup-form-info">
|
|
<view class="top_box u-border-bottom">
|
|
<view class="handle-btns">
|
|
<view class="btn_del" @click="deleteInfoId(formInfo.id)">删除</view>
|
|
<view class="btn_edit" @click="editInfoId(formInfo.id)">编辑</view>
|
|
</view>
|
|
</view>
|
|
<view class="section_c">
|
|
<view class="plist u-border-bottom">
|
|
<view class="label_t">名称</view>
|
|
<view class="flex-1">{{formInfo.name}}</view>
|
|
</view>
|
|
<view class="plist u-border-bottom">
|
|
<view class="label_t">年份</view>
|
|
<view class="flex-1">{{formInfo.year}}</view>
|
|
</view>
|
|
<view class="plist u-border-bottom">
|
|
<view class="label_t">季度</view>
|
|
<view class="flex-1">{{formInfo.quarter|quartername}}</view>
|
|
</view>
|
|
<view class="plist u-border-bottom">
|
|
<view class="label_t">类型</view>
|
|
<view class="flex-1">
|
|
<u-tag text="饲料" v-if="formInfo.type==1" type="success" size="mini"/>
|
|
<u-tag text="肥料" v-if="formInfo.type==2" type="error" size="mini"/>
|
|
</view>
|
|
</view>
|
|
<view class="plist u-border-bottom">
|
|
<view class="label_t">最低价</view>
|
|
<view class="flex-1">{{ formInfo.lowest_price }}{{formInfo.unit}}</view>
|
|
</view>
|
|
<view class="plist u-border-bottom">
|
|
<view class="label_t">最高价</view>
|
|
<view class="flex-1">{{ formInfo.highest_price }}{{formInfo.unit}}</view>
|
|
</view>
|
|
<view class="plist u-border-bottom">
|
|
<view class="label_t">创建人</view>
|
|
<view class="flex-1">{{ formInfo.created_by?formInfo.created_by.name:'-' }}</view>
|
|
</view>
|
|
<view class="plist u-border-bottom">
|
|
<view class="label_t">更新时间</view>
|
|
<view class="flex-1">{{ formInfo.updated_at|timeFormat}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<!-- 筛选查询条件 -->
|
|
<u-popup v-model="screenShow" mode="top" z-index="9">
|
|
<view class="popup-screen-groups">
|
|
<view class="status_bar_top"></view>
|
|
<scroll-view class="scroll-y" scroll-y="true">
|
|
<view class="row_ul u-padding-right-20 u-padding-top-40">
|
|
<view class="row_list u-flex">
|
|
<view class="label_tit small">年份</view>
|
|
<yn-select-input-list :value="queryCond.year"
|
|
rightIcon="calendar" placeholder="请选择年份"
|
|
@click="selectFn1('q')"></yn-select-input-list>
|
|
</view>
|
|
<view class="row_list u-flex">
|
|
<view class="label_tit small">季度</view>
|
|
<yn-select-input-list :value="queryCond.quarter_name" placeholder="请选择季度"
|
|
@click="selectFn2('q')"></yn-select-input-list>
|
|
</view>
|
|
<view class="row_list u-flex">
|
|
<view class="label_tit small">类型</view>
|
|
<yn-select-input-list :value="queryCond.type_name" placeholder="请选择类型"
|
|
@click="selectFn3('q')"></yn-select-input-list>
|
|
</view>
|
|
<view class="row_list u-flex">
|
|
<view class="label_tit small">名称</view>
|
|
<u-input v-model="queryCond.name" border/>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="buttom_section u-padding-top-40">
|
|
<u-button class="btn small_btn" type="default" @click="resetQuery()">重置</u-button>
|
|
<u-button class="btn small_btn" @click="queryBtn()" type="primary">查询</u-button>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<u-picker mode="time" v-model="selectShow1"
|
|
:params="timeParams" :default-time="selectValue1"
|
|
@confirm="uselectConfirm1"></u-picker>
|
|
<u-select v-model="selectShow2" :list="quarterlist"
|
|
:default-value="selectValue2" mode="single-column"
|
|
@confirm="uselectConfirm2"></u-select>
|
|
<u-select v-model="selectShow3" :list="typelist"
|
|
:default-value="selectValue3" mode="single-column"
|
|
@confirm="uselectConfirm3"></u-select>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {formatDate,showLoading,hideLoading,navigateBack} from '@/com/utils.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
background: {
|
|
backgroundColor:'#2a7dc9',
|
|
},
|
|
titleColor:"#ffffff",
|
|
per_page:15,
|
|
page:1,
|
|
list:[],
|
|
loading:'loadmore',
|
|
options: [
|
|
{
|
|
text: '编辑',
|
|
style: {
|
|
backgroundColor: '#007aff'
|
|
}
|
|
},
|
|
{
|
|
text: '删除',
|
|
style: {
|
|
backgroundColor: '#dd524d'
|
|
}
|
|
}
|
|
],
|
|
popupShow:false,
|
|
cindex:-1,//操作的索引
|
|
editShow:false,
|
|
formInfo:{},
|
|
timeParams: {
|
|
year: true,
|
|
month: false,
|
|
day: false,
|
|
hour: false,
|
|
minute: false,
|
|
second: false
|
|
},
|
|
screenShow:false,
|
|
isqueryselect:false,
|
|
setInfo:{
|
|
id:'',
|
|
name:'',
|
|
year:'',
|
|
quarter:'',
|
|
quarter_name:'',
|
|
type:'',
|
|
type_name:'',
|
|
lowest_price:'',
|
|
highest_price:'',
|
|
unit:''
|
|
},
|
|
editShow:false,
|
|
queryCond:{
|
|
year:'',
|
|
quarter:'',
|
|
quarter_name:'',
|
|
name:''
|
|
},
|
|
selectShow1:false,
|
|
selectShow2:false,
|
|
selectShow3:false,
|
|
selectValue1:'',
|
|
selectValue2:[0],
|
|
selectValue3:[0],
|
|
quarterlist:[
|
|
{
|
|
label:'第一季度',
|
|
value:1,
|
|
},
|
|
{
|
|
label:'第二季度',
|
|
value:2,
|
|
},
|
|
{
|
|
label:'第三季度',
|
|
value:3,
|
|
},
|
|
{
|
|
label:'第四季度',
|
|
value:4,
|
|
}
|
|
],
|
|
typelist:[
|
|
{
|
|
label:'饲料',
|
|
value:1,
|
|
},
|
|
{
|
|
label:'肥料',
|
|
value:2,
|
|
}
|
|
]
|
|
};
|
|
},
|
|
filters:{
|
|
quartername(val){
|
|
let keys = {1:'第一季度',2:'第二季度',3:'第三季度',4:'第四季度'}
|
|
let name = keys[val]?keys[val]:val
|
|
return name;
|
|
},
|
|
timeFormat(val){
|
|
return formatDate(val*1000, 'yyyy-MM-dd hh:mm');
|
|
},
|
|
},
|
|
onLoad(){
|
|
this.queryDataList();
|
|
},
|
|
methods:{
|
|
addBtn(){
|
|
this.setInfoKeys('add');
|
|
this.editShow = true;
|
|
},
|
|
selectFn1(type){
|
|
this.isqueryselect = false;
|
|
let year = this.setInfo.year;
|
|
if(type=='q'){
|
|
this.isqueryselect = true;
|
|
this.selectShow1 = true;
|
|
year = this.queryCond.year;
|
|
}
|
|
if(year){
|
|
this.selectValue1 = `${year}-01-01 00:00:01`;
|
|
}
|
|
console.log(this.selectValue1)
|
|
this.selectShow1 = true;
|
|
},
|
|
selectFn2(type){
|
|
this.isqueryselect = false;
|
|
let quarter = this.setInfo.quarter;
|
|
if(type=='q'){
|
|
this.isqueryselect = true;
|
|
quarter = this.queryCond.quarter;
|
|
}
|
|
for(let [index,item] of this.quarterlist.entries()){
|
|
if(quarter==item.value){
|
|
this.selectValue2 = [index];
|
|
break;
|
|
}
|
|
}
|
|
|
|
this.selectShow2 = true;
|
|
},
|
|
selectFn3(type){
|
|
this.isqueryselect = false;
|
|
let qtype = this.setInfo.type;
|
|
if(type=='q'){
|
|
this.isqueryselect = true;
|
|
qtype = this.queryCond.type;
|
|
}
|
|
for(let [index,item] of this.typelist.entries()){
|
|
if(qtype==item.value){
|
|
this.selectValue3 = [index];
|
|
break;
|
|
}
|
|
}
|
|
|
|
this.selectShow3 = true;
|
|
},
|
|
resetQuery(){
|
|
this.queryCond = {
|
|
year:'',
|
|
quarter:'',
|
|
quarter_name:'',
|
|
}
|
|
},
|
|
queryBtn(){
|
|
this.list = [];
|
|
this.queryDataList(true);
|
|
this.screenShow = false;
|
|
},
|
|
uselectConfirm1(e){
|
|
if(this.isqueryselect){
|
|
console.log(e);
|
|
this.queryCond.year = e.year;
|
|
}else{
|
|
this.setInfo.year = e.year;
|
|
}
|
|
},
|
|
uselectConfirm2(e){
|
|
if(this.isqueryselect){
|
|
console.log(e);
|
|
this.queryCond.quarter = e[0].value;
|
|
this.queryCond.quarter_name = e[0].label;
|
|
}else{
|
|
this.setInfo.quarter = e[0].value;
|
|
this.setInfo.quarter_name = e[0].label;
|
|
}
|
|
},
|
|
uselectConfirm3(e){
|
|
if(this.isqueryselect){
|
|
console.log(e);
|
|
this.queryCond.type = e[0].value;
|
|
this.queryCond.type_name = e[0].label;
|
|
}else{
|
|
this.setInfo.type = e[0].value;
|
|
this.setInfo.type_name = e[0].label;
|
|
}
|
|
},
|
|
screenShowFn(){
|
|
this.screenShow = true;
|
|
},
|
|
showInfo(index){
|
|
this.cindex = index;
|
|
let _id = this.list[index].id;
|
|
this.queryInfo(_id);
|
|
this.formInfo = this.list[index];
|
|
this.popupShow = true;
|
|
|
|
},
|
|
open(index){
|
|
this.list[index].show = true;
|
|
},
|
|
click(index, index1) {
|
|
console.log(index,index1,this.list[index])
|
|
if(index1 == 1) {
|
|
this.cindex = index;
|
|
let _id = this.list[index].id;
|
|
this.deleteInfoId(_id);
|
|
} else {//编辑
|
|
let _id = this.list[index].id;
|
|
this.formInfo = this.list[index];
|
|
this.queryInfo(_id);
|
|
this.setInfoKeys();
|
|
this.editShow = true;
|
|
this.list[index].show = false;
|
|
|
|
}
|
|
|
|
},
|
|
queryDataList(refresh){
|
|
if(refresh){
|
|
this.loading = 'loadmore';
|
|
this.page = 1;
|
|
}
|
|
if(this.loading=='nomore'){//超出最大页
|
|
return false;
|
|
}
|
|
let params = {
|
|
per_page:this.per_page,
|
|
page: this.page ++,
|
|
_t: new Date().getTime()
|
|
}
|
|
for(let k in this.queryCond){
|
|
if(this.queryCond[k]||this.queryCond[k]=='0'){
|
|
params[k] = this.queryCond[k];
|
|
}
|
|
}
|
|
|
|
this.loading = 'loading';
|
|
this.$http.get('/api/materiels',{params:params}).then(({data})=>{
|
|
console.log(data)
|
|
this.screenShow = false;
|
|
if(refresh){
|
|
this.list = [];
|
|
}
|
|
this.loading = 'loadmore';
|
|
if(data.code==200){
|
|
let _list = data.data|| [];
|
|
for(let item of _list){
|
|
item.show = false;
|
|
}
|
|
this.list = this.list.concat(_list);
|
|
console.log(this.list);
|
|
if(this.list.length>= data.meta.total){
|
|
this.loading ='nomore';
|
|
}
|
|
}
|
|
}).catch(()=>{
|
|
this.loading = 'loadmore';
|
|
this.screenShow = false;
|
|
})
|
|
},
|
|
//修改
|
|
editInfoBtn(){
|
|
if(!this.valiFormRule()){
|
|
return false;
|
|
}
|
|
let params = {}
|
|
params = this.setInfo;
|
|
showLoading('请稍等..');
|
|
if(params['id']){
|
|
this.$http.put(`/api/materiels/${params['id']}`,params).then(({data})=>{
|
|
hideLoading()
|
|
if(data.code==200){
|
|
|
|
this.editShow = false;
|
|
this.queryDataList(true);
|
|
|
|
}
|
|
uni.showToast({ title: data.message, icon: 'none' });
|
|
}).catch(()=>{
|
|
hideLoading()
|
|
})
|
|
}else{
|
|
delete params['id'];
|
|
this.$http.post(`/api/materiels`,params).then(({data})=>{
|
|
hideLoading()
|
|
if(data.code==200){
|
|
this.queryDataList(true);
|
|
this.editShow = false;
|
|
uni.showToast({ title: data.message, icon: 'none' });
|
|
}else{
|
|
uni.showToast({ title: data.message, icon: 'none' });
|
|
}
|
|
}).catch(()=>{
|
|
hideLoading()
|
|
})
|
|
}
|
|
|
|
},
|
|
queryInfo(id){
|
|
// this.$http.get(`/api/materiels/${id}`).then(({data})=>{
|
|
// console.log(data,'queryInfo===')
|
|
// if(data.code==200){
|
|
// this.formInfo = data.data;
|
|
// this.setInfoKeys();
|
|
// }
|
|
// }).catch((err)=>{
|
|
|
|
// })
|
|
},
|
|
editInfoId(id){
|
|
// this.queryInfo(id);
|
|
|
|
this.setInfoKeys();
|
|
this.editShow = true;
|
|
this.popupShow = false;
|
|
},
|
|
//删除deleteInfoId
|
|
deleteInfoId(id){
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '是否确定删除？',
|
|
success: (res)=> {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定');
|
|
showLoading('请稍等..');
|
|
this.$http.delete(`/api/materiels/${id}`).then(({data})=>{
|
|
hideLoading();
|
|
if(data.code==200){
|
|
this.formInfo = {};//重置删除
|
|
this.popupShow = false;
|
|
this.list.splice(this.cindex,1);
|
|
// this.queryDataList(true);
|
|
}
|
|
uni.showToast({ title: data.message, icon: 'none' });
|
|
}).catch(()=>{
|
|
hideLoading();
|
|
})
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
|
|
},
|
|
setInfoKeys(_type){
|
|
let info = {
|
|
id:'',
|
|
name:'',
|
|
year:'',
|
|
quarter:'',
|
|
quarter_name:'',
|
|
type:'',
|
|
type_name:'',
|
|
lowest_price:'',
|
|
highest_price:'',
|
|
unit:''
|
|
}
|
|
if(_type=='add'){
|
|
this.setInfo = info;
|
|
}else{
|
|
let {quarter,type} = this.formInfo;
|
|
try{
|
|
for(let k in info){
|
|
info[k] = this.formInfo[k];
|
|
}
|
|
for(let item of this.quarterlist){
|
|
if(quarter == item.value){
|
|
info.quarter_name = item.label;
|
|
break;
|
|
}
|
|
}
|
|
for(let item of this.typelist){
|
|
if(type == item.value){
|
|
info.type_name = item.label;
|
|
break;
|
|
}
|
|
}
|
|
this.setInfo = info;
|
|
}catch(e){
|
|
//TODO handle the exception
|
|
uni.showToast({ title: '数据错误', icon: 'none' })
|
|
}
|
|
}
|
|
},
|
|
valiFormRule(){
|
|
let {id,name,year,quarter,type,lowest_price,highest_price,unit} = this.setInfo;
|
|
if(name==''){
|
|
uni.showToast({ title: '名称不能为空', icon: 'none' });
|
|
return false;
|
|
}
|
|
if(year==''){
|
|
uni.showToast({ title: '年份不能为空', icon: 'none' });
|
|
return false;
|
|
}
|
|
if(quarter==''){
|
|
uni.showToast({ title: '季度不能为空', icon: 'none' });
|
|
return false;
|
|
}
|
|
if(type==''){
|
|
uni.showToast({ title: '类型不能为空', icon: 'none' });
|
|
return false;
|
|
}
|
|
if(lowest_price==''){
|
|
uni.showToast({ title: '最低价不能为空', icon: 'none' });
|
|
return false;
|
|
}
|
|
if(highest_price==''){
|
|
uni.showToast({ title: '最高价不能为空', icon: 'none' });
|
|
return false;
|
|
}
|
|
if(unit==''){
|
|
uni.showToast({ title: '单位不能为空', icon: 'none' });
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
goback(){
|
|
navigateBack()
|
|
}
|
|
},
|
|
//触底加载
|
|
onReachBottom() {
|
|
if(this.loading=='loadmore'){
|
|
this.queryDataList();
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|