654 lines
18 KiB
Vue
654 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
|
|
v-auth="['endpoint.rice_shrimp_flows.create']"
|
|
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.year }}</view>
|
|
</view>
|
|
|
|
<view class="row_box">
|
|
<view class="text">季度：{{ item.quarter | quartername }}</view>
|
|
</view>
|
|
<view class="row_box">
|
|
<view class="text">地区：{{ item.area }}</view>
|
|
</view>
|
|
<view class="row_box">
|
|
<view class="text">销量：{{ item.sales }}{{ item.unit }}</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="60%"
|
|
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">
|
|
<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">
|
|
<u-input v-model="setInfo.area" />
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="销量" label-width="140" :required="true">
|
|
<view class="input_box">
|
|
<u-input v-model="setInfo.sales" 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
|
|
v-auth="['endpoint.rice_shrimp_flows.destroy']"
|
|
class="btn_del"
|
|
@click="deleteInfoId(formInfo.id)"
|
|
>删除</view
|
|
>
|
|
<view
|
|
v-auth="['endpoint.rice_shrimp_flows.edit']"
|
|
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.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">{{ formInfo.area }}</view>
|
|
</view>
|
|
|
|
<view class="plist u-border-bottom">
|
|
<view class="label_t">销量</view>
|
|
<view class="flex-1">{{ formInfo.sales }}{{ 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>
|
|
</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>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
formatDate,
|
|
showLoading,
|
|
hideLoading,
|
|
navigateBack,
|
|
} from '@/com/utils.js'
|
|
import checkPermission from '@/utils/permission.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
background: {
|
|
backgroundColor: '#2a7dc9',
|
|
},
|
|
titleColor: '#ffffff',
|
|
per_page: 15,
|
|
page: 1,
|
|
list: [],
|
|
loading: 'loadmore',
|
|
|
|
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: '',
|
|
year: '',
|
|
quarter: '',
|
|
quarter_name: '',
|
|
area: '',
|
|
sales: '',
|
|
unit: '',
|
|
},
|
|
editShow: false,
|
|
queryCond: {
|
|
year: '',
|
|
quarter: '',
|
|
quarter_name: '',
|
|
},
|
|
selectShow1: false,
|
|
selectShow2: false,
|
|
selectValue1: '',
|
|
selectValue2: [0],
|
|
quarterlist: [
|
|
{
|
|
label: '第一季度',
|
|
value: 1,
|
|
},
|
|
{
|
|
label: '第二季度',
|
|
value: 2,
|
|
},
|
|
{
|
|
label: '第三季度',
|
|
value: 3,
|
|
},
|
|
{
|
|
label: '第四季度',
|
|
value: 4,
|
|
},
|
|
],
|
|
}
|
|
},
|
|
computed: {
|
|
options() {
|
|
return [
|
|
{
|
|
text: '编辑',
|
|
opt: 'edit',
|
|
permission: ['endpoint.rice_shrimp_flows.edit'],
|
|
style: {
|
|
backgroundColor: '#007aff',
|
|
},
|
|
},
|
|
{
|
|
text: '删除',
|
|
opt: 'delete',
|
|
permission: ['endpoint.rice_shrimp_flows.destroy'],
|
|
style: {
|
|
backgroundColor: '#dd524d',
|
|
},
|
|
},
|
|
].filter((e) => checkPermission(e.permission))
|
|
},
|
|
},
|
|
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
|
|
},
|
|
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
|
|
}
|
|
},
|
|
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/rice-shrimp-flows', { 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/rice-shrimp-flows/${params['id']}`, params)
|
|
.then(({ data }) => {
|
|
hideLoading()
|
|
if (data.code == 200) {
|
|
this.editShow = false
|
|
this.queryDataList(true)
|
|
}
|
|
uni.showToast({ title: data.message, icon: 'none' })
|
|
})
|
|
.catch(({data}) => {
|
|
hideLoading()
|
|
this.$u.toast(data.message)
|
|
})
|
|
} else {
|
|
delete params['id']
|
|
this.$http
|
|
.post(`/api/rice-shrimp-flows`, 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(({data}) => {
|
|
hideLoading()
|
|
this.$u.toast(data.message)
|
|
})
|
|
}
|
|
},
|
|
queryInfo(id) {
|
|
// this.$http.get(`/api/rice-shrimp-flows/${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/rice-shrimp-flows/${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: '',
|
|
year: '',
|
|
quarter: '',
|
|
quarter_name: '',
|
|
area: '',
|
|
sales: '',
|
|
unit: '',
|
|
}
|
|
if (type == 'add') {
|
|
this.setInfo = info
|
|
} else {
|
|
let { id, year, quarter, area, sales, unit } = 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
|
|
}
|
|
}
|
|
this.setInfo = info
|
|
} catch (e) {
|
|
//TODO handle the exception
|
|
uni.showToast({ title: '数据错误', icon: 'none' })
|
|
}
|
|
}
|
|
},
|
|
valiFormRule() {
|
|
let { id, year, quarter, area, sales, unit } = this.setInfo
|
|
|
|
if (year == '') {
|
|
uni.showToast({ title: '年份不能为空', icon: 'none' })
|
|
return false
|
|
}
|
|
if (quarter == '') {
|
|
uni.showToast({ title: '季度不能为空', icon: 'none' })
|
|
return false
|
|
}
|
|
if (area == '') {
|
|
uni.showToast({ title: '地区不能为空', icon: 'none' })
|
|
return false
|
|
}
|
|
if (sales == '') {
|
|
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"></style>
|