<style lang="less">
@import url('../../styles/common.less');
#customFields{
position:absolute;
width:100%;
height:calc(100% - 45px);
overflow-y:auto;
// -webkit-overflow-scrolling: touch;
background: #eef4fe;
._container{
height:100%;
margin-bottom:48px;
.iCard{
height:100%;
position: relative;
width:auto;
margin:0 8px 0;
border-radius: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
>div.menu{
display:flex;
position: absolute;
width:100%;
box-sizing: border-box;
height:45px;
line-height: 45px;
background:#fff;
border-bottom:1px solid #ddd;
padding-right:8px;
>div.check{
padding:10px;
>div{
border:1px solid #ddd;
width:20px;
transition: all 0.5s;
height:20px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
>span{
border-radius:50%;
width:14px;
height:14px;
background:#3BF243;
box-shadow:1px 1px 3px -1px #555;
}
}
}
>div._title{
flex-grow: 1;
>i{
color:#E91E63;
font-size:9px;
position:relative;
top:0;
}
}
>i{
font-size: 30px;
width:0;
overflow: hidden;
transition: all 0.5s;
&.icon-caidan{
width:30px;
}
}
&.sFieldLocation{
background:#EDF4FF;
}
}
}
}
>.btn{
position:fixed;
z-index: 200;
display:flex;
bottom:0;
width:100%;
background: #eef4fe;
>button{
width:50%;
background:var(--color, #5E9AFE);
color:#fff;
opacity:1;
transition:all 0.2s;
flex-grow:1;
margin:0 5px;
height:40px;
font-size: 15px;
font-weight: bold;
border-radius: 10px;
&.button-hover{
opacity: 0.7;
}
}
}
>.mask{
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
z-index: -10;
transition: all .4s;
>div{
transition: all .4s;
background:#fff;
position:relative;
max-height:50%;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
box-shadow: 0 1px 10px -1px #333;
top:-100%;
}
&.show{
background:rgba(0,0,0,0.6);
z-index: 300;
>div{
top:0;
}
}
.picker{
position: relative;
display: flex;
align-items: center;
&:before{
content: " ";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #D9D9D9;
color: #D9D9D9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
left: 15px;
}
padding: 10px 15px;
display:flex;
height:40px;
span:first-child{
width:60px;
}
.Select{
flex:1;
text-align:right;
select{
width:100%;
}
}
}
}
.head{
color:#5E9AFD;
font-weight:bold;
font-size:15px;
border-bottom:1px solid #ddd;
background:linear-gradient(to right, #C6D8F5, #EDF2F7);
height: 40px;
box-sizing: border-box;
margin:8px 8px 0;
line-height: 40px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding-left:15px;
}
/deep/ .vux-x-input{
height:40px;
/deep/ .weui-cell__ft{
display: none;
}
}
/deep/ .vux-x-switch{
height:40px;
/deep/ .weui-switch{
height:22px;
}
input:before{
height:20px;
}
input:after{
height:20px;
}
}
/deep/ .weui-cell{
height:40px;
}
/deep/ .vux-cell-bd{
p{
margin-bottom: 0;
}
}
}
</style>
<template>
<div id='customFields' :style='{"overflow-y":bodyStyle}'>
<div class="_container" v-for="(v1,i1) in list" :key="i1" :style="{'max-height':'calc('+posList[i1].length * 45 + 'px)'}">
<div class="head">{{list[i1][0].sTypeName}}</div>
<div class="iCard" :style="{'min-height':'calc(' + posList[i1].length * 45 + ')px'}">
<div :class="[v2.sFieldName,'menu']" :style="{'top':posList[i1][i2] + 'px','z-index':posStyle[i2]}" v-for="(v2,i2) in list[i1]" :key="i2">
<div class="check" @click="select(i1,i2)">
<div>
<span v-if="v2.bVisible" :style="{'background':v2.bAmend&&v2.sFieldName!='sFieldLocation'?'':'#999'}"></span>
</div>
</div>
<div class="_title" @click="setValue(i1,i2)" :style="{'color':v2.bHome ? '#19be6b' : '#000'}">
{{v2.sFieldCaption||v2.sOldFieldCaption}}
<i class='iconfont' v-if="v2.bRequired"></i>
</div>
<i class="iconfont icon-caidan" @touchstart.stop.prevent="start(i1,i2,$event)" @touchmove.stop.prevent="move(i1,i2,$event)" @touchend.stop.prevent="end(i1,i2,$event)"></i>
</div>
</div>
</div>
<div class='btn'>
<button @click='recovery' style='--color:#5E9AFE;'>默认布局</button>
<button @click='up' style='--color:#36F240'>提交</button>
</div>
<div :class="['mask',isMask?'show':'']" @click="hide">
<div @click.stop="preventStop">
<x-input title='字段名' text-align="right" :placeholder="modalData.sOldFieldCaption" v-model="modalData.sFieldCaption"></x-input>
<x-switch title="是否必填" v-if="modalData.bAmend" v-model="modalData.bRequired"></x-switch>
<x-switch title="是否在表单中显示" v-if="isDetail && modalData.bAmend" v-model="modalData.bHome"></x-switch>
<div class="picker">
<span>选择卡片</span>
<div class="Select">
<select v-model="modalData.iType" @change="changeSelect($event)" dir="rtl">>
<option v-for="(item,index) in cardList" :key="index" :value="item.iType">{{item.title}}</option>
</select>
</div>
<i class='iconfont icon-right'></i>
</div>
</div>
</div>
</div>
</template>
<script>
import Util from '../../libs/util.js';
import { XInput,XSwitch,PopupPicker } from 'vux'
// function modalData(){
// return {
// sOldFieldCaption:'',
// sFieldCaption:'',
// bAmend:true,
// bRequired:true,
// bHome:true,
// iType:"1"
// }
// }
export default {
name: 'customField',
data(){
return {
list:{},
posList:{},
posStyle:[],
bodyStyle:"auto",
pos:0,
posSave:0,
isMask:false,
sTableName:'',
cardList:[],
isDetail:false,
modalData:{},
cardIndex:null,
rowIndex:-1
}
},
mounted(){
window.d = this;
var list = '{"1":[{"bAmend":false,"bDisabled":false,"bHome":false,"bOldRequired":true,"bOldVisible":true,"bPrint":false,"bRequired":true,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"37","iOldRowNo":"1","iOldType":"1","iProjectId":"5599","iRowNo":1,"iType":"1","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"物料编号","sFieldName":"sMaterialNo","sFieldType":"2","sOldFieldCaption":"物料编号","sOldTypeName":"卡片1","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片1","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":false,"bDisabled":false,"bHome":false,"bOldRequired":true,"bOldVisible":true,"bPrint":false,"bRequired":true,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"38","iOldRowNo":"2","iOldType":"1","iProjectId":"5599","iRowNo":2,"iType":"1","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"物料名称","sFieldName":"sMaterialName","sFieldType":"2","sOldFieldCaption":"物料名称","sOldTypeName":"卡片1","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片1","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":false,"bDisabled":false,"bHome":false,"bOldRequired":true,"bOldVisible":true,"bPrint":false,"bRequired":true,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"39","iOldRowNo":"3","iOldType":"1","iProjectId":"5599","iRowNo":3,"iType":"1","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"物料类别","sFieldName":"sMaterialTypeName","sFieldType":"3","sOldFieldCaption":"物料类别","sOldTypeName":"卡片1","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片1","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":false,"bDisabled":false,"bHome":false,"bOldRequired":true,"bOldVisible":true,"bPrint":false,"bRequired":true,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"40","iOldRowNo":"4","iOldType":"1","iProjectId":"5599","iRowNo":4,"iType":"1","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"单位","sFieldName":"sUnit","sFieldType":"3","sOldFieldCaption":"单位","sOldTypeName":"卡片1","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片1","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"}],"2":[{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"45","iOldRowNo":"4","iOldType":"2","iProjectId":"5599","iRowNo":1,"iType":"2","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"克重","sFieldName":"sGMWT","sFieldType":"2","sOldFieldCaption":"克重","sOldTypeName":"卡片2","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片2","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"44","iOldRowNo":"3","iOldType":"2","iProjectId":"5599","iRowNo":2,"iType":"2","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"幅宽","sFieldName":"sWidth","sFieldType":"2","sOldFieldCaption":"幅宽","sOldTypeName":"卡片2","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片2","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"43","iOldRowNo":"2","iOldType":"2","iProjectId":"5599","iRowNo":3,"iType":"2","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"成份","sFieldName":"sComponent","sFieldType":"2","sOldFieldCaption":"成份","sOldTypeName":"卡片2","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片2","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"42","iOldRowNo":"5","iOldType":"2","iProjectId":"5599","iRowNo":4,"iType":"2","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"型号","sFieldName":"sModel","sFieldType":"2","sOldFieldCaption":"型号","sOldTypeName":"卡片2","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片2","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"41","iOldRowNo":"6","iOldType":"2","iProjectId":"5599","iRowNo":5,"iType":"2","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"规格","sFieldName":"sSpecification","sFieldType":"2","sOldFieldCaption":"规格","sOldTypeName":"卡片2","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片2","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"46","iOldRowNo":"7","iOldType":"2","iProjectId":"5599","iRowNo":6,"iType":"2","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"来源工厂","sFieldName":"sSourceCustomer","sFieldType":"3","sOldFieldCaption":"来源工厂","sOldTypeName":"卡片2","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片2","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"}],"3":[{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"51","iOldRowNo":"4","iOldType":"3","iProjectId":"5599","iRowNo":1,"iType":"3","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"成品备货预警","sFieldName":"nStockWarning","sFieldType":"9","sOldFieldCaption":"成品备货预警","sOldTypeName":"卡片3","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片3","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"50","iOldRowNo":"3","iOldType":"3","iProjectId":"5599","iRowNo":2,"iType":"3","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"样品备货预警","sFieldName":"nSampleStockWarning","sFieldType":"9","sOldFieldCaption":"样品备货预警","sOldTypeName":"卡片3","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片3","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"47","iOldRowNo":"1","iOldType":"3","iProjectId":"5599","iRowNo":3,"iType":"3","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"样品报价","sFieldName":"nSampleQuote","sFieldType":"9","sOldFieldCaption":"样品报价","sOldTypeName":"卡片3","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片3","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"48","iOldRowNo":"2","iOldType":"3","iProjectId":"5599","iRowNo":4,"iType":"3","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"大货报价","sFieldName":"nQuote","sFieldType":"9","sOldFieldCaption":"大货报价","sOldTypeName":"卡片3","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片3","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"49","iOldRowNo":"5","iOldType":"3","iProjectId":"5599","iRowNo":5,"iType":"3","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"成本单价","sFieldName":"nPriceCost","sFieldType":"9","sOldFieldCaption":"成本单价","sOldTypeName":"卡片3","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片3","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"52","iOldRowNo":"6","iOldType":"3","iProjectId":"5599","iRowNo":6,"iType":"3","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"备注","sFieldName":"sRemark","sFieldType":"2","sOldFieldCaption":"备注","sOldTypeName":"卡片3","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片3","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"}]}'
this.sTableName = 'mmMaterialColor';
this.list=JSON.parse(list);
switch(this.sTableName){
case 'mmMaterialColor':
this.isDetail = true;
break;
default:
break;
}
this.rePos();
},
methods:{
changeSelect(e){
let selectedIndex = e.target.selectedIndex;
this.modalData.iType = this.cardList[selectedIndex].iType;
this.modalData.sTypeName = this.cardList[selectedIndex].title;
let data = Util.deepClone(this.modalData);
this.list[this.cardIndex].splice(this.rowIndex,1);
for(let x in this.list){
if(x == this.cardList[selectedIndex].iType){
data.iRowNo = this.list[x].length;
this.list[x].push(data);
}
}
this.isMask = false;
this.rePos();
},
preventStop(){
return true;
},
recovery(){//恢复默认
wx.showModal({
title:"提示",
content:"是否恢复默认？",
success:async res=>{
if(res.confirm){
var result = await this.$parent.base.shopVerGetCustomFields("goback/",{
iCompanyId:this.$parent.globalData.userData.iCompanyID,
iProjectId:this.$parent.globalData.userData.iProjectId,
sTableName:this.sTableName,
})
if(typeof result == 'object' && result.length > 0){
this.list = {};
result.map(x=>{
if(this.list.hasOwnProperty(x.iType)){
let data = this.list[x.iType];
if(Number(x.iRowNo) < Number(data[data.length - 1].iRowNo)){
this.list[x.iType].unshift(x)
}else{
this.list[x.iType].push(x)
}
}else{
this.list[x.iType] = [];
this.list[x.iType].push(x)
}
})
console.log(this.list)
let list = Util.deepClone(this.list)
var newkey = Object.keys(list).sort();
this.list = {};
newkey.map((x,y)=>{
this.list[x] = list[x];
})
this.$parent.globalData.customFields = this.list;
this.rePos();
}else{
this.$parent.Tip.alert("恢复失败！",1000)
}
}
}
})
},
setValue(i1,i2){
if(this.list[i1][i2].sFieldName!='sFieldLocation'){
this.isMask=true;
this.cardIndex = i1;
this.rowIndex = i2;
this.modalData = this.list[i1][i2];
}else{
wx.navigateTo({
url:"./dtlCustom"
})
}
},
hide(){
this.isMask=false
},
async up(){//提交编辑的菜单
let data = [];
for(let x in this.list){
this.list[x].map(y=>{
data.push(y)
})
}
var value=await this.$parent.base.shopVerPostCustomFields("savelist/",data)
if(/ok/i.test(value)){
wx.globalData.isRefresh = true;
this.$parent.globalData.customFields = this.list
wx.navigateBack()
}else{
this.$paretn.Tip.alert('保存失败！',900)
}
},
select(_index,index){
this.list[_index][index].bAmend&&(this.list[_index][index].bVisible=!this.list[_index][index].bVisible)
},
start(_i,i,e){
this.posSave=this.posList[_i][i]
this.posStyle[i]=100
this.pos=e.touches[0].pageY
this.bodyStyle='hidden'
},
move(_i,i,e){
let posList = Util.deepClone(this.posList)
var pos=e.touches[0].pageY-this.pos+this.posSave
if(pos<=0){
pos=0;
}else if(pos>(this.list[_i].length-1)*45){
pos = (this.list[_i].length-1)*45
}
posList[_i][i] = pos;
this.$set(this,'posList',posList)
},
end(_i,i,e){
this.posStyle[i]=1
var pos=e.changedTouches[0].pageY-this.pos+this.posSave
var index=parseInt((pos+23)/45)
this.list[_i].splice(index,0,this.list[_i].splice(i,1)[0])
this.rePos()
this.bodyStyle='auto'
},
rePos(){
this.posList={}
for(let x in this.list){
this.list[x].map((j,k)=>{
let flag = false;
this.cardList.map((z)=>{
if(z.iType == j.iType){
flag = true;
}
})
if(!flag){
this.cardList.push({
iType:j.iType,
title:j.sTypeName,
isOpen:true
})
}
if(this.posList.hasOwnProperty(x)){
this.posList[x].push(45*k);
}else{
this.posList[x] = [];
this.posList[x].push(45*k)
}
this.list[x][k].iRowNo=k+1
})
}
console.log(this.cardList)
}
},
components:{
XInput,XSwitch,PopupPicker
}
}
</script>