367 lines
7.9 KiB
Vue
367 lines
7.9 KiB
Vue
<template>
|
||
<view>
|
||
<dataNull v-if="list.length == 0" src="/static/img/chahua/dataNullXz.png" title="暂无相关分类"
|
||
title1="点击添加按钮添加相关分类"></dataNull>
|
||
<view v-else class="content">
|
||
<view class="row" v-for="(row, index) in list" :key="index">
|
||
<text class="text">{{row.flName}}</text>
|
||
<view class="rightMenuRow">
|
||
<u-switch v-model="row.isShow" inactive-color="#f00" @change="changeClassFun(row)">
|
||
</u-switch>
|
||
<view class="menuBtn primaryBtn" @click="updateNameFun(row)">修改</view>
|
||
<view class="menuBtn errorBtn" @click="deleteFun(row)">删除</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view @click="popupShow = true">
|
||
<addBtn></addBtn>
|
||
</view>
|
||
<!--新增分类-->
|
||
<u-popup v-model="popupShow" mode="center" border-radius="14" width="500rpx">
|
||
<view class="popupTitle">新增分类</view>
|
||
<view class="popupInput">
|
||
<text>分类名称：</text>
|
||
<input v-model="flName" class="uInput" type="text" placeholder="请输入分类名称" style="font-size: 16px;">
|
||
</view>
|
||
<view class="popupInput">
|
||
<text>分类排序：</text>
|
||
<input v-model="sort" class="uInput" type="number" placeholder="数值越小越靠前" style="font-size: 16px;">
|
||
</view>
|
||
<view class="btnRow">
|
||
<view class="popupBtn errorBtn" @click="popupShow = false">取消</view>
|
||
<view class="popupBtn primaryBtn" @click="addClassifyFun">确认</view>
|
||
</view>
|
||
</u-popup>
|
||
<!--修改分类名称-->
|
||
<u-popup v-model="popupXgShow" mode="center" border-radius="14" width="500rpx">
|
||
<view class="popupTitle">修改名称</view>
|
||
<view class="popupInput">
|
||
<text>分类名称：</text>
|
||
<input v-model="flName" class="uInput" type="text" placeholder="请输入分类名称" style="font-size: 16px;">
|
||
</view>
|
||
<view class="popupInput">
|
||
<text>分类排序：</text>
|
||
<input v-model="sort" class="uInput" type="number" placeholder="数值越小越靠前" style="font-size: 16px;">
|
||
</view>
|
||
<view class="btnRow">
|
||
<view class="popupBtn errorBtn" @click="popupXgShow = false">取消</view>
|
||
<view class="popupBtn primaryBtn" @click="updateConfirmFun">确认</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
let that = '';
|
||
import dataNull from '@/components/dataNull/dataNull.vue'
|
||
import addBtn from '@/components/addBtn/addBtn.vue'
|
||
import {
|
||
crmCpClassifyApi
|
||
} from '@/static/utils/api.js'
|
||
export default {
|
||
components: {
|
||
dataNull,
|
||
addBtn
|
||
},
|
||
data() {
|
||
return {
|
||
popupShow: false,
|
||
popupXgShow: false,
|
||
addName: '',
|
||
flName: '',
|
||
sort: '',
|
||
flData: {},
|
||
list: [],
|
||
xgObj: {},
|
||
ispush: false,
|
||
pageType: ''
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
that = this;
|
||
if (e.pageType) {
|
||
that.pageType = e.pageType;
|
||
that.popupShow = true;
|
||
}
|
||
that.getClassifyFun();
|
||
},
|
||
methods: {
|
||
// 查询分类方法
|
||
getClassifyFun: function() {
|
||
uni.showLoading({
|
||
title: '加载中...',
|
||
mask: true
|
||
})
|
||
let reqData = {
|
||
action: 'getFlList',
|
||
params: {}
|
||
}
|
||
crmCpClassifyApi(reqData)
|
||
.then(res => {
|
||
let data = res.result.data;
|
||
console.log(data)
|
||
that.list = data;
|
||
// if (data) {
|
||
// that.list = data.list;
|
||
// uni.setStorageSync('classifyList', data.list);
|
||
// }
|
||
})
|
||
},
|
||
// 新增和修改分类方法
|
||
addClassifyFun: function() {
|
||
if (!that.flName) {
|
||
uni.showToast({
|
||
title: '请输入分类名称！',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if (!that.sort) {
|
||
uni.showToast({
|
||
title: '请输入分类排序数值！',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
uni.showLoading({
|
||
title: '提交中...',
|
||
mask: true
|
||
})
|
||
let obj = {
|
||
flName: that.flName,
|
||
sort: parseFloat(that.sort),
|
||
isShow: true
|
||
}
|
||
let time = new Date().getTime()
|
||
obj.create_date = time;
|
||
obj.update_date = time;
|
||
obj.cjRenId = uni.$userInfo._id;
|
||
obj.updateUid = uni.$userInfo._id;
|
||
let reqData = {
|
||
action: 'add',
|
||
params: {
|
||
req: obj
|
||
}
|
||
}
|
||
crmCpClassifyApi(reqData)
|
||
.then(res => {
|
||
that.flName = '';
|
||
that.sort = '';
|
||
that.popupShow = false;
|
||
uni.showToast({
|
||
title: '新增成功！',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
that.getClassifyFun()
|
||
})
|
||
},
|
||
// 修改产品分类名称
|
||
updateNameFun: function(item) {
|
||
that.popupXgShow = true;
|
||
that.xgObj = item;
|
||
that.sort = item.sort;
|
||
that.flName = item.flName;
|
||
},
|
||
// 修改产品分类确认方法
|
||
updateConfirmFun: function() {
|
||
if (!that.flName) {
|
||
uni.showToast({
|
||
title: '请输入分类名称！',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if (!that.sort) {
|
||
uni.showToast({
|
||
title: '请输入分类排序数值！',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
uni.showLoading({
|
||
title: '更新中...',
|
||
mask: true
|
||
})
|
||
let obj = {
|
||
flName: that.flName,
|
||
sort: parseFloat(that.sort)
|
||
};
|
||
let time = new Date().getTime()
|
||
obj.update_date = time;
|
||
obj.updateUid = uni.$userInfo._id;
|
||
let reqData = {
|
||
action: 'updateFl',
|
||
params: {
|
||
_id: that.xgObj._id,
|
||
updateObj: obj
|
||
}
|
||
}
|
||
crmCpClassifyApi(reqData)
|
||
.then(res => {
|
||
that.flName = '';
|
||
that.sort = '';
|
||
that.popupXgShow = false;
|
||
uni.showToast({
|
||
title: '修改成功！',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
that.getClassifyFun()
|
||
})
|
||
},
|
||
// 是否显示分类按钮方法
|
||
changeClassFun: function(e) {
|
||
let reqData = {
|
||
action: 'updateFl',
|
||
params: {
|
||
_id: e._id,
|
||
updateObj: {
|
||
isShow: e.isShow
|
||
}
|
||
}
|
||
}
|
||
crmCpClassifyApi(reqData)
|
||
.then(res => {
|
||
that.getClassifyFun();
|
||
})
|
||
},
|
||
// 删除产品分类
|
||
deleteFun: function(item) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '是否确认要删除该产品分类：' + item.flName + '?',
|
||
success(res) {
|
||
if(res.confirm) {
|
||
uni.showLoading({
|
||
title: '删除中，请稍等...',
|
||
mask: true
|
||
})
|
||
let reqData = {
|
||
action: 'deleteFlById',
|
||
params: {
|
||
_id: item._id
|
||
}
|
||
}
|
||
crmCpClassifyApi(reqData)
|
||
.then(res => {
|
||
that.getClassifyFun();
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background-color: #efeff4 !important;
|
||
}
|
||
|
||
.content {
|
||
background-color: #FFFFFF;
|
||
padding: 26rpx;
|
||
.row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100rpx;
|
||
border-bottom: 1rpx solid #CDCDCD;
|
||
.icon {
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 6px;
|
||
margin-right: 13px;
|
||
}
|
||
|
||
.text {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.popupTitle {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin: 16rpx 0;
|
||
}
|
||
|
||
.popupInput {
|
||
font-size: 16px !important;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 26rpx;
|
||
margin: 32rpx 0 26rpx 26rpx;
|
||
}
|
||
|
||
.popupInput .uInput {
|
||
width: 280rpx !important;
|
||
border-bottom: 1rpx solid #AAAAAA;
|
||
padding-bottom: 8rpx;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.btnRow {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 26rpx;
|
||
}
|
||
|
||
.btnRow>.btn {
|
||
width: 160rpx;
|
||
height: 60rpx;
|
||
margin: 0;
|
||
}
|
||
|
||
.rightMenuRow {
|
||
display: flex;
|
||
align-items: center;
|
||
position: absolute;
|
||
right: 26rpx;
|
||
}
|
||
|
||
.rightMenuRow .menuBtn {
|
||
border-radius: 12rpx;
|
||
color: #FFFFFF;
|
||
margin: 0 0 0 26rpx;
|
||
width: 100rpx;
|
||
height: 50rpx;
|
||
text-align: center;
|
||
line-height: 50rpx;
|
||
}
|
||
.popupBtn {
|
||
border-radius: 12rpx;
|
||
color: #FFFFFF;
|
||
width: 150rpx;
|
||
height: 60rpx;
|
||
text-align: center;
|
||
line-height: 60rpx;
|
||
}
|
||
.primaryBtn {
|
||
background-color: #007AFF;
|
||
}
|
||
.primaryBtn:active {
|
||
background-color: #55aaff;
|
||
}
|
||
.errorBtn {
|
||
background-color: #ff0000;
|
||
}
|
||
.errorBtn:active {
|
||
background-color: #ff6e0e;
|
||
}
|
||
.uni-input-input {
|
||
font-size: 16px !important;
|
||
}
|
||
.arrowIcon {
|
||
margin-right: 26rpx;
|
||
}
|
||
</style>
|