Skip to content

W
WX_h5
Commit 9d9cb833 authored by 张锡奇's avatar 张锡奇
Browse files
Options

commit

parent 65e2cd33
Show whitespace changes
Inline Side-by-side
Showing with 5037 additions and 251 deletions
index.html
View file @ 9d9cb833
......@@ -2,10 +2,10 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1,user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3,minimum-scale=0.1,user-scalable=yes">
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script>
<title>图表</title>
</head>
<body>
......
package.json
View file @ 9d9cb833
......@@ -30,7 +30,9 @@
"vux-loader": "^1.2.9"
},
"devDependencies": {
"@antv/f2": "^3.4.4",
"@babel/preset-env": "^7.4.5",
"@babel/runtime": "^7.7.6",
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
......
src/App.vue
View file @ 9d9cb833
......@@ -19,18 +19,21 @@
<style lang="less">
@import "./styles/icon";
@import "./styles/iconfont";
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
// font-family: 'Avenir', Helvetica, Arial, sans-serif;
// -webkit-font-smoothing: antialiased;
// -moz-osx-font-smoothing: grayscale;
// color: #2c3e50;
background: #eef4fe;
height:100%;
width:100%;
font-size:12px;
}
* {
touch-action: pan-y;
// touch-action: all;
// touch-action: pan-x;
}
</style>
src/components/Modal.vue 0 → 100644
View file @ 9d9cb833
<style lang="less">
.modal{
opacity: 0;
display: none;
transition: all 0.3s;
}
.modalActive{
opacity: 1;
display: block;
}
.modal>.content,.modal_active>.content{
position: absolute;
top:0;
left:0;
height:100%;
width:100%;
background: rgba(0, 0, 0, 0.5);
z-index:999;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<template>
<div :class="showModal ? 'modal modalActive' : 'modal'">
<div class="content">
<slot></slot>
</div>
</div>
</template>
<script>
import Util from '@/libs/util.js'
export default {
name: 'Modal',
data () {
return {
}
},
props:{
showModal: {
type: Boolean,
default: false
},
},
async mounted(){
window.d = this;
},
methods:{
},
components:{
},
}
</script>
src/components/Table.vue 0 → 100644
View file @ 9d9cb833
<style lang="less" >
table{
margin:0 auto;
width:100%;
overflow:visible;
// thead{
// background: #eef4fe;
// width:100vw;
// // overflow-y: scroll;
// // -webkit-overflow-scrolling: touch;
// display:block;
// position: -webkit-sticky;
// position: sticky;
// top:0px;
// z-index: 999;
// tr{
// td{
// height:40px;
// text-align: center;
// // border:1px solid #8a8a8a;
// border-bottom:0;
// box-sizing: border-box;
// font-weight: bold;
// font-size:14px;
// position: sticky;
// }
// }
// }
tbody{
display:block;
max-width:100vw;
overflow: visible;
._tbody{
height:100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
tr{
width:100%;
box-sizing: border-box;
display: flex;
td{
display: flex;
align-items: center;
justify-content: center;
min-height:40px;
box-sizing: border-box;
word-wrap: break-word;
position: sticky;
left:0;
}
}
}
._thead,._tfoot{
-webkit-overflow-scrolling: touch;
min-height:40px;
overflow: auto;
font-weight:bold;
tr{
min-height:40px;
box-sizing: border-box;
display: flex;
td{
display: flex;
align-items: center;
justify-content: center;
min-height:40px;
box-sizing: border-box;
word-wrap: break-word;
position: sticky;
left:0;
}
}
}
}
}
.img{
width:100%;
display: flex;
justify-content: center;
img{
width:100%;
height:300px;
}
}
</style>
<template>
<div class="_table">
<table v-if="LIST.length > 0">
<!-- <thead @scroll="scrollThead" ref="thead">
<tr>
<td
v-for="(item,index) in columns"
:key="index"
:style="{
'text-align':item.align,
'width':item.width,
'min-width':item.width,
'max-width':item.width,
'border':tableStyle.theadTdBorder ? tableStyle.tbodyTrBorderBottom : '0px',
'background':tableStyle.theadBgColor,
'position': item.fixed ? 'sticky' : 'static',
'left':item.fixed ? item.fixedLeftWidth : 'none',
}"
>
{{item.name}}
</td>
</tr>
</thead> -->
<tbody :style="{'height':tableStyle.tbodyHeight}">
<div class="_thead" ref="thead" @scroll="scrollThead" >
<tr :style="{'width':'100%','min-width':tableStyle.width}">
<td
v-for="(item,index) in columns"
:key="index"
:style="{
'text-align':item.align,
'width':'100%',
'min-width':item.width,
'background':tableStyle.theadBgColor,
'position': item.fixed ? 'sticky' : 'static',
'left':item.fixed ? item.fixedLeftWidth : 'none',
'border-top':tableStyle.theadTdBorder ? tableStyle.tbodyTrBorderBottom : '0px',
'border-left':tableStyle.theadTdBorder ? tableStyle.tbodyTrBorderBottom : '0px',
'border-bottom':tableStyle.theadTdBorder ? tableStyle.tbodyTrBorderBottom : '0px',
'border-right':(index == columns.length - 1 && tableStyle.theadTdBorder) ? tableStyle.tbodyTrBorderBottom : '0px',
}"
>
{{item.name}}
</td>
</tr>
</div>
<div class="_tbody" ref="tbody" @scroll="scrollTbody">
<tr v-for="(item,index) in LIST" :key="index" :style="{'width':'100%','min-width':tableStyle.width}">
<td
v-for="(x,i) in columns"
:key="i"
:style="{
'text-align':x.align,
'width':'100%',
'min-width':x.width,
'color':x.color,
'background':index % 2 == 0 ? tableStyle.complexTrBgColor : tableStyle.singleTrBgColor,
'text-overflow': x.ellipsis ? 'ellipsis' : 'none',
'overflow': x.ellipsis ? 'hidden' : 'none',
'white-space': x.ellipsis ? 'normal' : 'none',
'position': x.fixed ? 'sticky' : 'static',
'left':x.fixed ? x.fixedLeftWidth : 'none',
'border-left':tableStyle.tbodyTdBorder ? tableStyle.tbodyTrBorderBottom : '0px',
'border-right':(i == columns.length - 1 && tableStyle.tbodyTdBorder) ? tableStyle.tbodyTrBorderBottom : '0px',
'border-bottom':tableStyle.tbodyTrBorderBottom
}"
@click="clickTd(x,item)"
v-html="item[x.field]"
>
</td>
</tr>
<slot></slot>
</div>
<div class="_tfoot" ref="tfoot" @scroll="scrollTFoot" v-if="showFooter & footerData.length > 0">
<tr v-for="(x,i) in footerData" :key="i" :style="{'width':'100%','min-width':tableStyle.width}">
<td
v-for="(item,index) in columns"
:key="index"
:style="{
'text-align':item.align,
'width':'100%',
'min-width':item.width,
'background':tableStyle.theadBgColor,
'position': item.fixed ? 'sticky' : 'static',
'left':item.fixed ? item.fixedLeftWidth : 'none',
'border-top':tableStyle.theadTdBorder ? tableStyle.tbodyTrBorderBottom : '0px',
'border-left':tableStyle.theadTdBorder ? tableStyle.tbodyTrBorderBottom : '0px',
'border-bottom':tableStyle.theadTdBorder ? tableStyle.tbodyTrBorderBottom : '0px',
'border-right':(index == columns.length - 1 && tableStyle.theadTdBorder) ? tableStyle.tbodyTrBorderBottom : '0px',
}"
v-html="x[item.field]"
>
</td>
</tr>
</div>
</tbody>
</table>
<div class="img">
<img v-if="LIST.length <= 0" src="@/assets/noData.jpg" class="_img" alt="">
</div>
</div>
</template>
<script>
import Util from '@/libs/util.js'
export default {
name: 'Table',
data () {
return {
x:0,
y:0,
isLoad:true,
footerData:[],
LIST:[]
}
},
props:{
columns: {
type: Array,
default: function(){
return [];
}
},
list: {
type: Array,
default: function(){
return [{}];
}
},
tableStyle:{
type: Object,
default: function(){
return {
theadBgColor:'#eef4fe',
complexTrBgColor:'#eef4fe',
singleTrBgColor:'white',
theadTdBorder:false,
tbodyTdBorder:false,
tbodyHeight:'100%',
tbodyTrBorderBottom:'1px solid #5cadff'
}
}
},
showFooter:{
type:Boolean,
default:false
}
},
async mounted(){
window.d = this;
this.isLoad = false;
},
watch: {
list: function(newVal,oldVal){
this.LIST = Util.deepClone(this.list);
if(this.showFooter) this.footerData = this.LIST.splice(this.LIST.length - 1,1);
},
},
methods:{
scrollTbody(e){
let thead = this.$refs['thead'];
let tbody = this.$refs['tbody'];
let tfoot = this.$refs['tfoot'];
// if(tbody.scrollLeft > this.x){
// }else if(tbody.scrollLeft < this.x){
// }
thead.scrollTo(tbody.scrollLeft,thead.scrollTop);
if(tfoot){
tfoot.scrollTo(tbody.scrollLeft,tfoot.scrollTop);
}
if(tbody.scrollTop > this.y){
// console.log('向下')
let offsetHeight = tbody.offsetHeight;
let scrollHeight = tbody.scrollHeight;
let scrollTop = tbody.scrollTop;
if(scrollHeight - offsetHeight - scrollTop <= 0){
this.global.$emit('scrollTable');
}
}else if(tbody.scrollTop < this.y){
// console.log('向上')
}
this.x = tbody.scrollLeft;
this.y = tbody.scrollTop;
},
scrollThead(){
let thead = this.$refs['thead'];
let tbody = this.$refs['tbody'];
let tfoot = this.$refs['tfoot'];
if(tfoot){
tfoot.scrollTo(thead.scrollLeft,tfoot.scrollTop);
}
tbody.scrollTo(thead.scrollLeft,tbody.scrollTop);
},
scrollTFoot(){
let thead = this.$refs['thead'];
let tbody = this.$refs['tbody'];
let tfoot = this.$refs['tfoot'];
tbody.scrollTo(tfoot.scrollLeft,tbody.scrollTop);
thead.scrollTo(tfoot.scrollLeft,thead.scrollTop);
},
clickTd(obj,item){
if(!obj.underline) return false;
this.global.$emit('clickTd',{
showModal:true,
item:item
});
},
},
components:{
},
activated(){
if(this.isLoad){
let thead = this.$refs['thead'];
let tbody = this.$refs['tbody'];
tbody.scrollTo(this.x,this.y);
thead.scrollTo(this.x,0);
}
this.isLoad = true;
},
beforeDestroy(){
}
}
</script>
src/components/search.vue
View file @ 9d9cb833
<template>
<div class="searchComponent">
<group>
<flexbox style="min-height:40px;border-bottom:1px solid #5E9AFE;padding:0 0.1rem;padding:0 10px;">
<div style="width:50px;text-align:center;font-size:12px;">时间纬度</div>
<flexbox-item class="padding-left-15 btns">
<!-- <group style="margin-top:0 !important;"> -->
<div class="Content gradient" v-if="typeList.input || typeList.select">
<div class="selector" v-if="typeList.select">
<select :multiple="multiple" v-model="selectValue" @change="changeSelect($event)">
<option v-for="(item,index) in status" :key="index" :value="item.sStatus">{{item.sStatus || '全部'}}</option>
</select>
</div>
<div class="_input" v-if="typeList.input">
<input class="input" v-model="inputValue" :placeholder="placeholder" v-on:input="changeInput"/>
<i class='iconfont icon-close' id="close" v-if="inputValue" @click='clearInputValue'></i>
</div>
</div>
<div class="Content">
<div class="Title">时间纬度</div>
<div class="padding-left-15 btns">
<button @click="changeDate(index)" v-for="(item,index) in btns" :key="index" :class="index == active ? 'active' : ''">
{{item}}
</button>
</flexbox-item>
</flexbox>
<flexbox style="min-height:40px;padding:0 10px;">
<div style="width:50px;text-align:center;font-size:12px;">日期范围</div>
<flexbox-item class="padding-left-15">
</div>
</div>
<div class="Content" >
<div class="Title">日期范围</div>
<div style="flex:1;display:flex;">
<div class="padding-left-15 dateTime" style="flex:1;justify-content:flex-end;align-items:center;display:flex;">
<datetime v-model="search.dBeginDate" format="YYYY-MM-DD" @on-change="searchData($event,1)"></datetime>
</flexbox-item>
<flexbox-item class="padding-right-15">
<!-- <i class='iconfont icon-right'></i> -->
</div>
<div class="padding-right-15 dateTime" style="flex:1;justify-content:flex-end;align-items:center;display:flex;">
<datetime :start-date="search.dBeginDate" v-model="search.dEndDate" format="YYYY-MM-DD" @on-change="searchData($event,2)"></datetime>
</flexbox-item>
</flexbox>
</group>
<!-- <i class='iconfont icon-right'></i> -->
</div>
</div>
</div>
<!-- </group> -->
</div>
</template>
......@@ -31,10 +47,44 @@ export default {
data () {
return {
btns:['本日','本周','本月','本年'],
active:2
active:2,
inputValue:'',
selectValue:'全部'
}
},
props:{
search: {
type: Object,
default:function(){
return {}
}
},
status: {
type: Array,
default:function(){
return []
}
},
typeList:{
type:Object,
default:function(){
return {
input:false,
select:false,
btns:true,
time:true
}
}
},
multiple:{
type:Boolean,
default:false
},
placeholder:{
type:String,
default:'请输入...'
}
},
props:['search'],
methods:{
searchData(e,type){
let dateList = this.btns.map(x=>Util.getDate(x));
......@@ -58,8 +108,25 @@ export default {
this.active = index;
this.search.dEndDate = Util.dateFormat(new Date(),'yyyy-MM-dd');
this.search.dBeginDate = Util.getDate(this.btns[index]);
},
changeSelect(e){
this.selectValue = this.status[e.target.selectedIndex].sStatus;
this.search.sStatus = this.selectValue;
this.global.$emit('searchData');
},
changeInput(e){
this.search.serachvalue = this.inputValue;
this.global.$emit('searchData');
},
clearInputValue(e){
this.inputValue = "";
this.search.serachvalue = this.inputValue;
this.global.$emit('searchData');
}
},
mounted(){
window.d = this;
},
components: {
Search,
Selector,
......@@ -77,24 +144,112 @@ export default {
<style lang="less">
.searchComponent{
.Content{
min-height:40px;padding:0 10px;background:white;
display: flex;
align-items: center;
.Title{
width:50px;text-align:center;font-size:12px;
}
}
.gradient{
background: linear-gradient(90deg,#8470FF, #2d8cf0, #00B2EE)
}
.btns{
text-align: right;
font-size:12px;
flex:1;
button{
height: 20px;
width: 50px;
border: 1px solid grey;
border-radius: 50px;
margin-left:10px;
box-sizing: border-box;
}
.active{
color:#5E9AFE;
border:1px solid #5E9AFE;
box-sizing: border-box;
}
}
.dateTime{
a{
display: flex;
align-items: center;
}
}
/deep/ .vux-cell-value{
font-size:12px !important;
}
/deep/ .weui-cell__ft{
display: flex;
justify-content: flex-end;
align-items: center;
}
.selector{
select{
width:100%;
}
border-radius: 0;
font-size: 12px;
padding: 5px 20px 5px 10px;
width: 100px;
// background: #ddd;
background:rgba(255,255,525,0.3);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
height:30px;
position: relative;
transition: all 0.3ms;
display: flex;
align-items: center;
border-right:0.5px solid #8a8a8a;
}
.selector:after{
content:'';
position: absolute;
top:12px;
right:5px;
width: 5px;
height: 5px;
border: 5px solid;
border-color: #666 transparent transparent transparent;
box-sizing: border-box;
}
._input {
flex: 1;
// border: 1px solid #ccc;
box-sizing: border-box;
border-left: 0;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding: 0 25px 0 5px;
height:30px;
font-size:12px;
position: relative;
box-sizing: border-box;
background:rgba(255,255,525,0.3);
input{
height:100%;
width:100%;
}
input::-webkit-input-placeholder {
/* placeholder颜色 */
color: black;
}
.iconfont{
position: absolute;
right:0;
width:25px;
height:100%;
top: 0;
font-size: 15px;
display: flex;
justify-content: center;
align-items: center;
color:red;
}
}
}
</style>
src/libs/apiMap.js
View file @ 9d9cb833
let url = 'https://weixin.huansi.net/apiproxy/huansi/Mall'
import apiURL from './host.js'
const methodMap = {
/**
* 产品颜色销售排行TOP50
*/
getMmcolorsaletop:{url:url+'/bianalysis/mmcolorsaletop/',method:'get'},
getMmcolorsaledtltop:{url:url+'/bianalysis/mmcolorsaledtltop/',method:'get'},
getMmcolorsaletop:{url:apiURL('sales')+'/bianalysis/mmcolorsaletop/',method:'get'},
getMmcolorsaledtltop:{url:apiURL('sales')+'/bianalysis/mmcolorsaledtltop/',method:'get'},
/**
* 产品销售排行TOP25
*/
getMmsaletop:{url:url+'/bianalysis/mmsaletop/',method:'get'},
getMmsaledtltop:{url:url+'/bianalysis/mmsaledtltop/',method:'get'},
getMmsaletop:{url:apiURL('sales')+'/bianalysis/mmsaletop/',method:'get'},
getMmsaledtltop:{url:apiURL('sales')+'/bianalysis/mmsaledtltop/',method:'get'},
/**
* 客户
*/
getPbcustomer:{url:url+'/bianalysis/pbcustomer/',method:'get'},
getPbcustomerDtl:{url:url+'/bianalysis/pbcustomerdtl/',method:'get'},
getPbcustomer:{url:apiURL('sales')+'/bianalysis/pbcustomer/',method:'get'},
getPbcustomerDtl:{url:apiURL('sales')+'/bianalysis/pbcustomerdtl/',method:'get'},
/**
* 销售员
*/
getPbsales:{url:url+'/bianalysis/pbsales/',method:'get'},
getPbsalesDtl:{url:url+'/bianalysis/pbsalesdtl/',method:'get'},
getPbsales:{url:apiURL('sales')+'/bianalysis/pbsales/',method:'get'},
getPbsalesDtl:{url:apiURL('sales')+'/bianalysis/pbsalesdtl/',method:'get'},
/**
* 应收应付 || 实收实付
*/
getPayable:{url:url+'/bianalysis/payable/',method:'get'},
getReceivepay:{url:url+'/bianalysis/receivepay/',method:'get'},
getPayable:{url:apiURL('sales')+'/bianalysis/payable/',method:'get'},
getReceivepay:{url:apiURL('sales')+'/bianalysis/receivepay/',method:'get'},
/**
* 销售统计
*/
sellinfo:{url:`${url}/bianalysis/sellinfo/`,method:'get'},
sellinfo:{url:`${apiURL('sales')}/bianalysis/sellinfo/`,method:'get'},
/**
* 样品信息
*/
getSpeciminHdr:{url:url+'/mmmaterial/getlist/',method:'post'},
getSpeciminDtl:{url:url+'/mmmaterial/getdetail/',method:'post'},
getSpeciminHdr:{url:apiURL('sales')+'/mmmaterial/getlist/',method:'post'},
getSpeciminDtl:{url:apiURL('sales')+'/mmmaterial/getdetail/',method:'post'},
/**
* tiip小程序
*/
//面料主档
getTiipSpeciminHdr:{url:apiURL('default')+'/mmmaterial/getlist/',method:'post'},
//订单明细查询
getTiipPbcontract:{url:apiURL('default')+'/pbcontracthdr/',method:'post'}, //采购
getTiipFipayable:{url:apiURL('default')+'/fipayablehdr/',method:'post'}, //应付
getTiipFireceivable:{url:apiURL('default')+'/fireceivablehdr/',method:'post'}, //应收
getTiipFabric:{url:apiURL('default')+'/mmFabric/',method:'post'}, //验布
};
export default methodMap;
src/libs/host.js 0 → 100644
View file @ 9d9cb833
import store from '@/store/modules/app.js'
function urlFun(name){
let userID = store.state.userId;
var url={
/**
* 门市域名
*/
// sales:`http://192.168.4.40:5000`,
// sales:`http://122.224.36.54:18005`,//测试服务器
sales:`https://weixin.huansi.net/apiproxy/huansi/Mall`,
/**
* 默认公司
*/
// default:`http://192.168.4.37:5001`,
default:`https://weixin.huansi.net/apiproxy/huansi/service/proxy/${userID}`,
/**
* 基本地址
*/
// app:`http://192.168.4.31:5002`,
app:`https://weixin.huansi.net/apiproxy/huansi/service`,
/**
* 内部公司
*/
// inside:`http://192.168.4.39:5003`,
inside:`https://weixin.huansi.net/apiproxy/huansi/ERP`,
}
return url[name]
}
export default urlFun;
src/libs/http.js
View file @ 9d9cb833
......@@ -73,6 +73,7 @@ Http.install = function (Vue) {
console.log('Customize Notice', error);
}
} else if (error.status === 500) {
resolve(response.data);
console.log('Customize Notice', error);
} else {
console.log('Customize Notice', error);
......@@ -109,6 +110,7 @@ Http.install = function (Vue) {
console.log('Customize Notice', error);
}
} else if (error.status === 500) {
resolve(response.data);
console.log('Customize Notice', error);
} else {
console.log('Customize Notice', error);
......
src/main.js
View file @ 9d9cb833
......@@ -11,13 +11,15 @@ import store from './store';
import VueWechatTitle from 'vue-wechat-title';
import Toast from './libs/toast/';
// import 'lib-flexible';
// import 'layui-src/dist/css/layui.css'
// import 'layui-src/dist/layui.js'
import 'layui-src/dist/css/layui.css'
import 'layui-src/dist/layui.js'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader
import 'babel-polyfill'
import echarts from 'echarts'
import { ConfirmPlugin } from 'vux'
import F2 from '@antv/f2';
import { ConfirmPlugin,ToastPlugin } from 'vux'
import urlFun from './libs/host.js'
Vue.use(Vuetify)
Vue.use(VueWechatTitle);
......@@ -25,10 +27,15 @@ Vue.use(VueRouter);
Vue.use(Http);
Vue.use(Toast)
Vue.use(ConfirmPlugin);
Vue.use(ToastPlugin);
Vue.prototype.global = new Vue({});
Vue.prototype.util = Util;
Vue.prototype.$echarts = echarts
Vue.prototype.$F2 = F2
Vue.prototype.$url = urlFun
function getAbsolutePath () {
let path = location.pathname
......
src/router/index.js
View file @ 9d9cb833
......@@ -100,6 +100,136 @@ let routes = [
}
}
]
},
{
name:'main',
component: () => import('@/view/main.vue'),
path:'/main',
children:[
{
path:'/tiip/specimen/:userId/:uGuid',
name:'specimen',
component:()=> import('@/view/tiip/specimen/index.vue'),
meta:{
title: '样品信息'
}
}
]
},
{
name:'main',
component: () => import('@/view/main.vue'),
path:'/main',
children:[
{
path:'/tiip/searchOrder/list/:userId',
name:'searchOrderList',
component:()=> import('@/view/tiip/searchOrder/index.vue'),
meta:{
title: '订单查询'
}
},
{
path:'/tiip/searchOrder/detail',
name:'searchOrderDetail',
component:()=> import('@/view/tiip/searchOrder/detail.vue'),
meta:{
title: '订单详情'
}
},
{
path:'/tiip/searchOrder/materialDetail',
name:'searchOrderMaterialDetail',
component:()=> import('@/view/tiip/searchOrder/materialDetail.vue'),
meta:{
title: '产品详情'
}
},
{
path:'/tiip/searchOrder/track',
name:'searchOrderTrack',
component:()=> import('@/view/tiip/searchOrder/track.vue'),
meta:{
title: '订单全程跟踪'
}
}
]
},
{
name:'main',
component: () => import('@/view/main.vue'),
path:'/main',
children:[
{
path:'/tiip/profitAnalysis/list/:userId',
name:'profitAnalysisList',
component:()=> import('@/view/tiip/profitAnalysis/index.vue'),
meta:{
title: '订单利润分析'
}
},
{
path:'/tiip/profitAnalysis/detail',
name:'profitAnalysisDetail',
component:()=> import('@/view/tiip/profitAnalysis/detail.vue'),
meta:{
title: '订单明细'
}
},
{
path:'/tiip/profitAnalysis/track',
name:'profitAnalysisTrack',
component:()=> import('@/view/tiip/profitAnalysis/track.vue'),
meta:{
title: '订单全程跟踪'
}
}
]
},
{
name:'main',
component: () => import('@/view/main.vue'),
path:'/main',
children:[
{
path:'/tiip/orderDetails/list/:type',
name:'orderDetailsIndex',
component:()=> import('@/view/tiip/orderDetails/index.vue'),
meta:{
title: '采购信息'
}
},
]
},
{
name:'main',
component: () => import('@/view/main.vue'),
path:'/main',
children:[
{
path:'/common/customField',
name:'customField',
component:()=> import('@/view/common/customField.vue'),
meta:{
title: '自定义列表'
}
},
]
},
{
name:'main',
component: () => import('@/view/main.vue'),
path:'/main',
children:[
{
path:'/tiip/chart/inventory/:userId',
name:'tiipChartInventory',
component:()=> import('@/view/tiip/chart/inventory.vue'),
meta:{
title: '库存金额分析'
}
},
]
}
];
......
src/store/index.js
View file @ 9d9cb833
......@@ -2,6 +2,8 @@ import Vue from 'vue';
import Vuex from 'vuex';
import app from './modules/app';
import searchOrder from './modules/searchOrder';
import profitAnalysis from './modules/profitAnalysis';
Vue.use(Vuex);
......@@ -14,7 +16,9 @@ const store = new Vuex.Store({
},
actions: {},
modules: {
app
app,
searchOrder,
profitAnalysis
}
});
......
src/store/modules/app.js
View file @ 9d9cb833
......@@ -5,9 +5,13 @@ const app = {
state: {
userInfo:{},
chartHearData:{},
iProjectId:5599
iProjectId:5599,
userId:'1115442959606779905'
},
mutations: {
saveUserId(state,data){
state.userId = data;
},
getUserInfo(state,obj){
state.userInfo = obj;
},
......@@ -19,6 +23,9 @@ const app = {
}
},
actions: {
saveUserId({commit},obj){
commit('saveUserId',obj);
},
getUserInfo({commit},obj){
commit('getUserInfo',obj);
},
......
src/store/modules/profitAnalysis.js 0 → 100644
View file @ 9d9cb833
import Util from '@/libs/util';
import Vue from 'vue';
const obj = {
state: {
hdr:{},
dtl:{},
},
mutations: {
profitAnalysisSaveHdr(state,data){
state.hdr = data;
},
profitAnalysisSaveDtl(state,data){
state.dtl = data;
}
},
actions: {
profitAnalysisSaveHdr({commit},data){
commit('profitAnalysisSaveHdr',data);
},
profitAnalysisSaveDtl({commit},data){
commit('profitAnalysisSaveDtl',data);
}
}
};
export default obj;
src/store/modules/searchOrder.js 0 → 100644
View file @ 9d9cb833
import Util from '@/libs/util';
import Vue from 'vue';
const app = {
state: {
hdr:{},
dtl:{},
},
mutations: {
searchOrderSaveHdr(state,data){
state.hdr = data;
},
searchOrderSaveDtl(state,data){
state.dtl = data;
}
},
actions: {
searchOrderSaveHdr({commit},data){
commit('searchOrderSaveHdr',data);
},
searchOrderSaveDtl({commit},data){
commit('searchOrderSaveDtl',data);
}
}
};
export default app;
src/styles/common.less 0 → 100644
View file @ 9d9cb833
.iCard{
font-size:12px;
overflow:hidden;
background:#fff;
border-radius:5px;
margin:8px 8px 0;
box-shadow:0 1px 3px #bababa;
width:auto;
.cardHeader{
display:flex;
align-items:center;
padding:6px 11px 6px 16px;
border-bottom: 2px solid #EDF4FF;
height:25px;
.content{
flex:1;
text-align: left;
font-size:14px;
color:#000;
}
.extra{
text-align:right;
padding:5px 10px;
box-sizing:border-box;
background:#5cadff;
color:white;
border-radius:8px;
font-size:12px;
height:25px;
display:flex;
align-items:center;
}
}
.cardBody,.cardFooter{
margin-top:13px;
color:#80848f;
padding:0 16px;
display: flex;
view{
flex:1
}
}
.cardFooter{
margin-bottom:13px;
}
}
\ No newline at end of file
src/styles/iconfont.less 0 → 100644
View file @ 9d9cb833
@font-face{
font-family:'iconfont';
src:url("https://weixin.huansi.net/apiproxy/dingding/BXPC/font/icon.ttf") format('truetype');
font-weight: normal;
font-style: normal;
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-weifenxiaopcjiemianzhuanhuan:before {
content: "\e637";
}
.icon-weixin:before {
content: "\e66c";
}
.icon-keshangguanli:before {
content: "\e611";
}
.icon-youjiantou1:before {
content: "\e644";
}
.icon-caidan:before {
content: "\e63c";
}
.icon-back:before {
content: "\e66a";
}
.icon-zhuanfa:before {
content: "\d727";
}
.icon-02:before {
content: "\e64e";
}
.icon-caidan1:before {
content: "\e64d";
}
.icon-baobiao:before {
content: "\e618";
}
.icon-gerenyonghuzhuce:before {
content: "\e699";
}
.icon-shangpinyangpinku:before {
content: "\e673";
}
.icon-ceng:before {
content: "\e669";
}
.icon-xiaoshoutongji:before {
content: "\e661";
}
.icon-jia1:before {
content: "\e61f";
}
.icon-zidongshengji:before {
content: "\e662";
}
.icon-wenjian:before {
content: "\e614";
}
.icon-piliangluru-copy:before {
content: "\e683";
}
.icon-shidianyincang:before {
content: "\e6b7";
}
.icon-jinxiaocun:before {
content: "\e602";
}
.icon-xiugai:before {
content: "\e650";
}
.icon-icon-text-fi-delete:before {
content: "\e65d";
}
.icon-qiankuan:before {
content: "\e65b";
}
.icon-shuzibiaoqian:before {
content: "\e68b";
}
.icon-manual:before {
content: "\d705";
}
.icon-mianliao:before {
content: "\e642";
}
.icon-fangdajing:before {
content: "\e609";
}
.icon-danweiguanli:before {
content: "\e719";
}
.icon-bi:before {
content: "\e615";
}
.icon-zuzhi:before {
content: "\e622";
}
.icon-calendar:before {
content: "\e7d6";
}
.icon-zhuanzhang:before {
content: "\e7d8";
}
.icon-kucun-:before {
content: "\e624";
}
.icon-ccgl-rukuguanli-1:before {
content: "\e61d";
}
.icon-ccgl-rukucaozuo-1:before {
content: "\e631";
}
.icon-icon_user-defined:before {
content: "\e613";
}
.icon-Warehouse_01:before {
content: "\e6f5";
}
.icon--:before {
content: "\e667";
}
.icon-fukuan3:before {
content: "\e638";
}
.icon-bumenfeiyongfenxi:before {
content: "\e61a";
}
.icon-kefu:before {
content: "\e70a";
}
.icon-zuoyouqiehuan:before {
content: "\e64a";
}
.icon-fuliao:before {
content: "\e71a";
}
.icon-qita:before {
content: "\e65c";
}
.icon-youjiantou:before {
content: "\e647";
}
.icon-caigou:before {
content: "\e649";
}
.icon-tongbu:before {
content: "\e990";
}
.icon-wentifankui1:before {
content: "\e632";
}
.icon-yuntongbu:before {
content: "\e625";
}
.icon-shebei:before {
content: "\e61c";
}
.icon-fukuandan:before {
content: "\e691";
}
.icon-icons-:before {
content: "\e60d";
}
.icon-location:before {
content: "\e61e";
}
.icon-fukuan:before {
content: "\f627";
}
.icon-yaoqingyoujiang:before {
content: "\e6a5";
}
.icon-shouzhi:before {
content: "\e62e";
}
.icon-chanpinfuwu:before {
content: "\e612";
}
.icon-BIfenxi:before {
content: "\e7e5";
}
.icon-wenbenx:before {
content: "\e737";
}
.icon-shoukuandan:before {
content: "\e648";
}
.icon-qiehuan:before {
content: "\e74b";
}
.icon-xiala:before {
content: "\e663";
}
.icon-zhuye:before {
content: "\e62a";
}
.icon-caidan3:before {
content: "\e657";
}
.icon-shenqingdan:before {
content: "\e62d";
}
.icon-jiagongdanguanli:before {
content: "\e64f";
}
.icon-yuangongguanli:before {
content: "\e623";
}
.icon-tuihuo:before {
content: "\e630";
}
.icon-qiehuangongsi:before {
content: "\e73d";
}
.icon-yingfu:before {
content: "\e633";
}
.icon-lianxiwomen:before {
content: "\e666";
}
.icon-zhanghu:before {
content: "\e664";
}
.icon-fahuo:before {
content: "\e608";
}
.icon-shuqian:before {
content: "\e600";
}
.icon-fukuan1:before {
content: "\e81f";
}
.icon-dianhua:before {
content: "\e616";
}
.icon-zhongyao:before {
content: "\e698";
}
.icon-yunzhu:before {
content: "\e660";
}
.icon-baobiao1:before {
content: "\e626";
}
.icon-quanxianguanli:before {
content: "\d627";
}
.icon-kucunjineicon:before {
content: "\e617";
}
.icon-mianliao1:before {
content: "\e605";
}
.icon-gouwuche:before {
content: "\e601";
}
.icon-kucunchaxun:before {
content: "\d621";
}
.icon-baobiao2:before {
content: "\e628";
}
.icon-yaoqing:before {
content: "\e6d1";
}
.icon-xiaoshoupaihang:before {
content: "\e651";
}
.icon-bitian:before {
content: "\e63e";
}
.icon-yangpin:before {
content: "\e634";
}
.icon-zhongduanweihu:before {
content: "\e60b";
}
.icon-database:before {
content: "\e6bc";
}
.icon-dingdan:before {
content: "\e629";
}
.icon-chuku:before {
content: "\e620";
}
.icon-jian:before {
content: "\e640";
}
.icon-address-book:before {
content: "\ef12";
}
.icon-tongxun:before {
content: "\e62b";
}
.icon-yuyin:before {
content: "\e6ae";
}
.icon-daijiagong:before {
content: "\e604";
}
.icon-rili:before {
content: "\e78f";
}
.icon-wuliaofahuo:before {
content: "\e610";
}
.icon-baojia:before {
content: "\c681";
}
.icon-yincang:before {
content: "\e60f";
}
.icon-dingwei:before {
content: "\e73a";
}
.icon-xiaoxitixing:before {
content: "\e62f";
}
.icon-fuzhai:before {
content: "\e60e";
}
.icon-shoukuan:before {
content: "\e655";
}
.icon-bumenyuangong:before {
content: "\e8c9";
}
.icon-zhichu:before {
content: "\e603";
}
.icon-shezhi:before {
content: "\e60a";
}
.icon-saomiao:before {
content: "\e636";
}
.icon-xiugai-:before {
content: "\e6b0";
}
.icon-jiaosequanxian:before {
content: "\e643";
}
.icon-icon-test:before {
content: "\e606";
}
.icon-Play:before {
content: "\eb78";
}
.icon-tupian:before {
content: "\e6cf";
}
.icon-liebiao:before {
content: "\e689";
}
.icon-shoukuan1:before {
content: "\e635";
}
.icon-shenpi:before {
content: "\e6da";
}
.icon-yitusoutu:before {
content: "\d636";
}
.icon-yuyin1:before {
content: "\e61b";
}
.icon-wangzhan:before {
content: "\e621";
}
.icon-chacha:before {
content: "\e641";
}
.icon-jianpan:before {
content: "\e619";
}
.icon-dacang-chukudan:before {
content: "\e607";
}
.icon-xiazai:before {
content: "\e665";
}
.icon-kaidan:before {
content: "\e62c";
}
.icon-zhinengyuyinguanli:before {
content: "\e60c";
}
.icon-zhaoxiangji:before {
content: "\e675";
}
.icon-gonggao:before {
content: "\c67a";
}
.icon-banben:before {
content: "\c627";
}
.icon-icon_daiban:before{
content: "\d654";
}
.icon-fenxiang:before{
content: "\d713";
}
.icon-miaogao:before{
content: "\d628";
}
.icon-caozuo1:before{
content: "\d639";
}
.icon-dayin:before{
content: "\d629";
}
.icon-kehuguanli:before{
content: "\d630";
}
.icon-dingdanchaxun:before{
content: "\d63b";
}
.icon-lirunfenxi:before{
content: "\d676";
}
\ No newline at end of file
src/view/chart/custom/detail.vue
View file @ 9d9cb833
<style lang="less" scoped>
#chartCustomDetail{
font-size:12px;
height:100%;
h2{
text-align: center;
height:40px;
line-height: 40px;
background: #19be6b;
color:white;
position: fixed;
top:0;
left:0;
width:100%;
z-index:999;
}
.center{
text-align: center;
......@@ -31,14 +40,39 @@
img{
width:100%;
}
.vux_table{
margin-top:40px;
}
.noData{
margin-top:120px;
}
}
</style>
<template>
<div id="chartCustomDetail">
<div id="chartCustomDetail" :style="value.length <= 0 ? 'background:white;' : ''">
<h2>{{title}}</h2>
<div ref='chart' :style="{width: '100vw', height: '100vh',display:value.length> 0 ? 'block' : 'none'}"></div>
<img v-if="value.length<= 0" src="@/assets/noData.jpg" class="_img" alt="">
<div class="vux_table" v-if="value.length > 0">
<x-table :cell-bordered="true" style="background-color:#fff;">
<thead>
<tr style="background-color: #F7F7F7">
<th>日期</th>
<th>金额</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in value" :key="index">
<td>{{item.sYearMonth}}</td>
<td>{{item.nAmount || 0}}</td>
</tr>
</tbody>
</x-table>
</div>
<div class="noData" v-else>
<img src="@/assets/noData.jpg" class="_img" alt="">
</div>
<!-- <div ref='chart' :style="{width: '100vw', height: '100vh',display:value.length> 0 ? 'block' : 'none'}"></div>
<img v-if="value.length<= 0" src="@/assets/noData.jpg" class="_img" alt=""> -->
</div>
</template>
......@@ -46,6 +80,7 @@
<script>
import Util from '@/libs/util.js'
import { mapState } from 'vuex';
import { XTable } from 'vux'
export default {
name: 'chartCustomDetail',
......@@ -63,7 +98,7 @@ export default {
this.title = '销售员';
await this.getPbsalesDtl();
}
this.setChart()
// this.setChart()
},
computed:{
...mapState({
......@@ -72,13 +107,13 @@ export default {
})
},
mounted(){
this.myChart=this.$echarts.init(this.$refs.chart)
window.addEventListener("resize",()=>{
this.myChart.resize()
var options=this.myChart.getOption()
options.dataZoom[0].end = document.documentElement.clientWidth > document.documentElement.clientHeight ? 40 : 20
this.myChart.setOption(options);
});
// this.myChart=this.$echarts.init(this.$refs.chart)
// window.addEventListener("resize",()=>{
// this.myChart.resize()
// var options=this.myChart.getOption()
// options.dataZoom[0].end = document.documentElement.clientWidth > document.documentElement.clientHeight ? 40 : 20
// this.myChart.setOption(options);
// });
},
methods:{
async getPbcustomerDtl(){
......@@ -86,12 +121,15 @@ export default {
params:this.chartHearData
},true,{iProjectId:this.iProjectId})
this.value=typeof result=='object'&&result.length>0&&result||[]
this.value = this.value.filter(x=>x.nAmount > 0)
},
async getPbsalesDtl(){
let result= await this.request('getPbsalesDtl',{
params:this.chartHearData
},true,{iProjectId:this.iProjectId})
this.value=typeof result=='object'&&result.length>0&&result||[]
this.value = this.value.filter(x=>x.nAmount > 0)
},
setChart(){
let options = {
......@@ -167,6 +205,9 @@ export default {
this.myChart.setOption(options);
this.myChart.resize()
}
},
components: {
XTable
}
}
</script>
......
src/view/chart/income/index.vue
View file @ 9d9cb833
......@@ -116,7 +116,8 @@ export default {
if(charts.containPixel('grid',pointInPixel)){
let index=charts.convertFromPixel({ seriesIndex: 0 }, [param.offsetX, param.offsetY])[0]
time=setTimeout(()=>{
if(param.name=='差价')return;
console.log(index)
if(index == 2) return;
var options=charts.getOption()
options.tooltip[0].show=false
charts.setOption(options)
......
src/view/chart/sales/detail.vue
View file @ 9d9cb833
<style lang="less" scoped>
#chartMmcolorsale{
font-size:12px;
height:100%;
h2{
text-align: center;
height:40px;
line-height: 40px;
background: #19be6b;
color:white;
position: fixed;
top:0;
left:0;
width:100%;
z-index:999;
}
.center{
text-align: center;
......@@ -31,20 +41,48 @@
img{
width:100%;
}
.vux_table{
margin-top:40px;
}
.noData{
margin-top:120px;
}
}
</style>
<template>
<div id="chartMmcolorsale">
<div id="chartMmcolorsale" :style="value.length <= 0 ? 'background:white;' : ''">
<h2>{{title}}</h2>
<div ref='chart' :style="{width: '100vw', height: '100vh',display:value.length > 0 ? 'block' : 'none'}"></div>
<img v-if="value.lenght<= 0" src="@/assets/noData.jpg" class="_img" alt="">
<div class="vux_table" v-if="value.length > 0">
<x-table :cell-bordered="true" style="background-color:#fff;">
<thead>
<tr style="background-color: #F7F7F7">
<th>日期</th>
<th>金额</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in value" :key="index">
<td>{{item.sYearMonth}}</td>
<td>{{item.nAmount || 0}}</td>
<td>{{item.nQty || 0}}</td>
</tr>
</tbody>
</x-table>
</div>
<div class="noData" v-else>
<img src="@/assets/noData.jpg" class="_img" alt="">
</div>
<!-- <div ref='chart' :style="{width: '100vw', height: '100vh',display:value.length > 0 ? 'block' : 'none'}"></div>
<img v-if="value.lenght<= 0" src="@/assets/noData.jpg" class="_img" alt=""> -->
</div>
</template>
<script>
import Util from '@/libs/util.js';
import { mapState } from 'vuex';
import { XTable } from 'vux'
export default {
name: 'chartMmcolorsaleDetail',
......@@ -58,6 +96,9 @@ export default {
myChart:null
}
},
components: {
XTable
},
async activated(){
if(this.chartHearData.type == 'mmsaletop'){
this.title = '产品销售排行';
......@@ -66,7 +107,7 @@ export default {
this.title = '产品颜色销售排行';
await this.getMmcolorsaledtltop();
}
this.setChart()
// this.setChart()
},
computed:{
...mapState({
......@@ -75,14 +116,14 @@ export default {
})
},
mounted(){
this.myChart=this.$echarts.init(this.$refs.chart)
window.addEventListener("resize",()=>{
var options=this.myChart.getOption()
options.dataZoom[0].end = document.documentElement.clientWidth > document.documentElement.clientHeight ? 40 : 20
this.myChart.setOption(options);
this.myChart.resize()
});
console.log(this.iProjectId)
// this.myChart=this.$echarts.init(this.$refs.chart)
// window.addEventListener("resize",()=>{
// var options=this.myChart.getOption()
// options.dataZoom[0].end = document.documentElement.clientWidth > document.documentElement.clientHeight ? 40 : 20
// this.myChart.setOption(options);
// this.myChart.resize()
// });
// console.log(this.iProjectId)
},
methods:{
async getMmcolorsaledtltop(){
......@@ -90,12 +131,14 @@ export default {
params:this.chartHearData
},true,{iProjectId:this.iProjectId})
this.value=typeof result=='object'&&result.length>0&&result||[]
this.value = this.value.filter(x=>x.nAmount > 0 || x.nQty > 0)
},
async getMmsaledtltop(){
let result= await this.request('getMmsaledtltop',{
params:this.chartHearData
},true,{iProjectId:this.iProjectId})
this.value=typeof result=='object'&&result.length>0&&result||[]
this.value = this.value.filter(x=>x.nAmount > 0 || x.nQty > 0)
},
setChart(){
let options = {
......
src/view/chart/sales/index.vue
View file @ 9d9cb833
......@@ -224,7 +224,6 @@ export default {
});
myChart.on('mouseup', (param)=> {
console.log(this.timer)
window.clearTimeout(this.timer);
});
......@@ -243,10 +242,9 @@ export default {
let index = param.dataIndex;
let data = {};
if(id == 'myChart1'){
console.log(that.pbcustomer)
data = Object.assign(that.pbcustomer[index],{type:'pbcustomer'})
data = Object.assign(that.mmcolorsaletop[index],{type:'pbcustomer'})
}else{
data = Object.assign(that.pbsales[index],{type:'pbsales'});
data = Object.assign(that.mmsaletop[index],{type:'pbsales'});
}
that.$store.dispatch('setChartHearData',data).then(()=>{
that.$router.push({name:'chartCustomDetail'});
......
src/view/common/customField.vue 0 → 100644
View file @ 9d9cb833
<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">&#xe63e;</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>
\ No newline at end of file
src/view/specimen/index.vue
View file @ 9d9cb833
<style lang="less" >
.slide-fade-enter-active {
transition: opacity .5s ease;
}
.slide-fade-leave-active {
transition: opacity .5s ease;
}
.slide-fade-enter, .slide-fade-leave-active {
opacity: 0;
}
h1, h2 {
margin: 0;
padding: 0;
}
img {
display: block;
max-width: 100%;
}
#imageView .imageBox li img{
height:auto !important;
}
#imageView .imageBox li{
display:flex;
align-items:center;
justify-content:center;
}
#specimen{
background: #f1f1f1;
height:100%;
background: white;
h3{
height:40px;
line-height:40px;
text-align: center;
background:white;
}
.header{
.hdrImg{
.Header{
height:250px;
width:100%;
height:200px;
display: flex;
justify-content: center;
align-items: center;
background: #eef4fe;
// position: relative;
}
img{
height:200px;
width:100%;
width: 100%;
height:100%;
}
// img:after {
// content: "";
// display: inline-block;
// position: absolute;
// z-index: 2;
// top: 0;
// left: calc(50% - 100px);
// width: 200px;
// height: 200px;
// background: url("../../assets/imgErr.png") no-repeat;
// background-position: center;
// background-size: contain;
// background-color: #fff;
// }
}
.info{
.content{
display:flex;
background:white;
padding:16px;
.INFO{
background: white;
margin-top:10px;
padding: 10px;
.CONTENT{
>div{
flex:1
display: flex;
border-bottom: 1px solid #F8F8F8;
>p{
margin:0;padding:0;
height:30px;
line-height: 30px;
}
>p:first-child{
width:80px;
color:#999999
}
}
}
}
.detail{
background: white;
border-top:1px solid #eef4fe;
.img{
// position: relative;
display: flex;
justify-content: center;
align-items: center;
img{
width: 100%;
max-height:50px;
margin-top:10px;
background: #fffeeb;
padding:20px;
>div{
margin-bottom:20px;
p{
margin:0;text-align:center;height:30px;line-height:30px;
font-weight: bold;
}
}
>div:last-child{
margin-bottom:0;
}
// img:after {
// content: "";
// display: inline-block;
// position: absolute;
// z-index: 2;
// top: 0;
// left: 0;
// width: 100%;
// height: 50px;
// background: url("../../assets/imgErr.png") no-repeat;
// background-position: center;
// background-size: contain;
// background-color: #fff;
// }
.detailImg{
width:100%;
height:200px;
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
}
}
}
</style>
<template>
<div id="specimen">
<div class="header">
<transition name="slide-fade" class="fadeView">
<div v-if="showHdr">
<image-view :imgArr="hdr_src"
:showImageView="true"
:imageIndex="imageHdrIndex"
v-on:hideImage="hideImageView('hdr')"></image-view>
<div class="Header">
<img class="previewer-demo-img" v-for="(item, index) in hdr_src" :src="item.src" width="100" @click="show('hdr',index)" :key="index"/>
</div>
<div v-if="showDtl">
<image-view :imgArr="dtl_src"
:showImageView="true"
:imageIndex="imageDtlIndex"
v-on:hideImage="hideImageView('dtl')"></image-view>
<div class="INFO">
<div class="CONTENT">
<div><p>产品编号</p><p>{{hdr.sMaterialNo}}</p></div>
<div><p>产品名称</p><p>{{hdr.sMaterialName}}</p></div>
<div><p>规格</p><p>{{hdr.sSdivecification}}</p></div>
<div><p>成分</p><p>{{hdr.sComdivonent}}</p></div>
<div><p>幅宽</p><p>{{hdr.sWidth}}</p></div>
<div><p>克重</p><p>{{hdr.sGMWT}}</p></div>
</div>
</transition>
<div class="hdrImg">
<img v-for="(item, index) in hdr_src" v-if="!hdr.isErr" @error="error(item,index,'hdr')" :src="item" @click="selectImg('hdr',index)" :key="index"/>
<img v-else src="../../assets/imgErr.png"/>
</div>
<div class="info">
<h3>参数</h3>
<div class="content">
<div class="left">
<p>产品编号：{{hdr.sMaterialNo}}</p>
<p>产品名称：{{hdr.sMaterialName}}</p>
<p>规格：{{hdr.sSpecification}}</p>
<p>成分：{{hdr.sComponent}}</p>
</div>
<div class="right">
<p>幅宽：{{hdr.sWidth}}</p>
<p>克重：{{hdr.sGMWT}}</p>
</div>
</div>
</div>
</div>
<div class="detail">
<h3>颜色明细</h3>
<div class="detailImg">
<v-container grid-list-md text-xs-center>
<v-layout row wrap>
<v-flex xs3 v-for="(item, index) in dtl_src" :key="index">
<div class="img">
<img :src="item" @error="error(item,index,'dtl')" v-if="!dtl[index].isErr" @click="selectImg('dtl',index)" />
<img v-else src="../../assets/imgErr.png"/>
<img src="../../assets/fabric.jpg" style="width:100%;margin-bottom:10px;"/>
<div v-for="(item, index) in dtl_src" :key="index">
<p style="">— {{item.sColorName}}({{item.sColorNo}}) —</p>
<img class="previewer-demo-img detailImg" :src="item.src" width="100" @click="show('dtl',index)" />
</div>
<div style="border:1px solid #ddd;border-top:0;height:20px;font-size:12px;">
{{dtl[index].sColorNo}}
</div>
</v-flex>
</v-layout>
</v-container>
</div>
<div v-transfer-dom>
<previewer :list="hdr_src" ref="previewer1" :options="options" @on-index-change="logIndexChange"></previewer>
<previewer :list="dtl_src" ref="previewer2" :options="options" @on-index-change="logIndexChange"></previewer>
</div>
</div>
</template>
<script>
import imageView from 'vue-imageview'
import Util from '@/libs/util.js'
import Util from '@/libs/util.js';
import {Previewer , TransferDom} from 'vux';
export default {
name: 'specimen',
data () {
return {
showHdr:false,
showDtl:false,
imageHdrIndex:0,
imageDtlIndex:0,
hdr_src:[],
dtl_src:[],
iProjectId:'',
sMaterialNo:'',
hdr:{},
dtl:[]
dtl:[],
options: {
getThumbBoundsFn (index) {
// find thumbnail element
let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
// get window scroll Y
let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
// optionally get horizontal scroll
// get position of element relative to viewport
let rect = thumbnail.getBoundingClientRect()
// w = width
return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
// Good guide on how to get element coordinates:
// http://javascript.info/tutorial/coordinates
}
}
}
},
directives: {
TransferDom
},
components:{
Previewer
},
async mounted(){
this.iProjectId = this.$route.params.iProjectId;
......@@ -192,11 +129,13 @@ export default {
await this.getSpeciminHdr();
await this.getSpeciminDtl();
},
components:{
'image-view': imageView
},
methods:{
logIndexChange (arg) {
console.log(arg)
},
show (type,index) {
this.$refs[type == 'hdr' ? 'previewer1' : 'previewer2'].show(index)
},
error(item,index,type){
if(type == 'hdr'){
this.$set(this.hdr,'isErr',true)
......@@ -214,7 +153,9 @@ export default {
if(this.hdr.length <= 0) return false;
this.hdr = result[0];
this.hdr.isErr = false;
this.hdr_src.push(`https://weixin.huansi.net/apiproxy/huansi/Mall/mmmaterial/image_click/?iProjectId=${this.iProjectId}&iIden=${this.hdr.iIden}&m=${Math.random() / 9999}`)
this.hdr_src.push({
src: `https://weixin.huansi.net/apiproxy/huansi/Mall/mmmaterial/image_click/?iProjectId=${this.iProjectId}&iIden=${this.hdr.iIden}&m=${Math.random() / 9999}`,
})
},
async getSpeciminDtl(){
let result = await this.request('getSpeciminDtl',{
......@@ -231,33 +172,14 @@ export default {
})
data.map(x=>{
x.isErr = false;
this.dtl_src.push(`https://weixin.huansi.net/apiproxy/huansi/Mall/mmmaterial/image_click/?iProjectId=${this.iProjectId}&iIden=${x.iIden}&m=${Math.random() / 9999}`)
this.dtl_src.push({
sColorName:x.sColorName,
sColorNo:x.sColorNo,
src:`https://weixin.huansi.net/apiproxy/huansi/Mall/mmmaterial/image_click/?iProjectId=${this.iProjectId}&iIden=${x.iIden}&m=${Math.random() / 9999}`
})
})
this.dtl = data;
},
showImgView (type) {
if(type == 'hdr'){
this.showHdr = true;
}else{
this.showDtl = true;
}
},
hideImageView (type) {
if(type == 'hdr'){
this.showHdr = false;
}else{
this.showDtl = false;
}
},
selectImg (type,index) {
if(type == 'hdr'){
this.showHdr = true;
this.imageHdrIndex = index;
}else{
this.showDtl = true;
this.imageDtlIndex = index;
}
},
}
}
</script>
......
src/view/specimen/temp.vue 0 → 100644
View file @ 9d9cb833
<style lang="less" >
.slide-fade-enter-active {
transition: opacity .5s ease;
}
.slide-fade-leave-active {
transition: opacity .5s ease;
}
.slide-fade-enter, .slide-fade-leave-active {
opacity: 0;
}
h1, h2 {
margin: 0;
padding: 0;
}
img {
display: block;
max-width: 100%;
}
#imageView .imageBox li img{
height:auto !important;
}
#imageView .imageBox li{
display:flex;
align-items:center;
justify-content:center;
}
#specimen{
height:100%;
background: white;
h3{
height:40px;
line-height:40px;
text-align: center;
background:white;
}
.header{
.hdrImg{
width:100%;
height:200px;
display: flex;
justify-content: center;
align-items: center;
background: #eef4fe;
// position: relative;
}
img{
height:200px;
width:100%;
}
// img:after {
// content: "";
// display: inline-block;
// position: absolute;
// z-index: 2;
// top: 0;
// left: calc(50% - 100px);
// width: 200px;
// height: 200px;
// background: url("../../assets/imgErr.png") no-repeat;
// background-position: center;
// background-size: contain;
// background-color: #fff;
// }
}
.info{
.content{
display:flex;
background:white;
padding:16px;
>div{
flex:1
}
}
}
.detail{
background: white;
border-top:1px solid #eef4fe;
.img{
// position: relative;
display: flex;
justify-content: center;
align-items: center;
img{
width: 100%;
max-height:50px;
}
}
// img:after {
// content: "";
// display: inline-block;
// position: absolute;
// z-index: 2;
// top: 0;
// left: 0;
// width: 100%;
// height: 50px;
// background: url("../../assets/imgErr.png") no-repeat;
// background-position: center;
// background-size: contain;
// background-color: #fff;
// }
}
}
</style>
<template>
<div id="specimen">
<div class="header">
<transition name="slide-fade" class="fadeView">
<div v-if="showHdr">
<image-view :imgArr="hdr_src"
:showImageView="true"
:imageIndex="imageHdrIndex"
v-on:hideImage="hideImageView('hdr')"></image-view>
</div>
<div v-if="showDtl">
<image-view :imgArr="dtl_src"
:showImageView="true"
:imageIndex="imageDtlIndex"
v-on:hideImage="hideImageView('dtl')"></image-view>
</div>
</transition>
<div class="hdrImg">
<img v-for="(item, index) in hdr_src" v-if="!hdr.isErr" @error="error(item,index,'hdr')" :src="item" @click="selectImg('hdr',index)" :key="index"/>
<img v-else src="../../assets/imgErr.png"/>
</div>
<div class="info">
<h3>参数</h3>
<div class="content">
<div class="left">
<p>产品编号：{{hdr.sMaterialNo}}</p>
<p>产品名称：{{hdr.sMaterialName}}</p>
<p>规格：{{hdr.sSpecification}}</p>
<p>成分：{{hdr.sComponent}}</p>
</div>
<div class="right">
<p>幅宽：{{hdr.sWidth}}</p>
<p>克重：{{hdr.sGMWT}}</p>
</div>
</div>
</div>
</div>
<div class="detail">
<h3>颜色明细</h3>
<div class="detailImg">
<v-container grid-list-md text-xs-center>
<v-layout row wrap>
<v-flex xs3 v-for="(item, index) in dtl_src" :key="index">
<div class="img">
<img :src="item" @error="error(item,index,'dtl')" v-if="!dtl[index].isErr" @click="selectImg('dtl',index)" />
<img v-else src="../../assets/imgErr.png"/>
</div>
<div style="border:1px solid #ddd;border-top:0;height:20px;font-size:12px;">
{{dtl[index].sColorNo}}
</div>
</v-flex>
</v-layout>
</v-container>
</div>
</div>
</div>
</template>
<script>
import imageView from 'vue-imageview'
import Util from '@/libs/util.js'
export default {
name: 'specimen',
data () {
return {
showHdr:false,
showDtl:false,
imageHdrIndex:0,
imageDtlIndex:0,
hdr_src:[],
dtl_src:[],
iProjectId:'',
sMaterialNo:'',
hdr:{},
dtl:[]
}
},
async mounted(){
this.iProjectId = this.$route.params.iProjectId;
this.$route.params.sMaterialNo.split('.').map((x,y) => {
this.sMaterialNo += String.fromCharCode(x)
})
await this.getSpeciminHdr();
await this.getSpeciminDtl();
},
components:{
'image-view': imageView
},
methods:{
error(item,index,type){
if(type == 'hdr'){
this.$set(this.hdr,'isErr',true)
}else{
this.$set(this.dtl[index],'isErr',true)
}
},
async getSpeciminHdr(){
let result = await this.request('getSpeciminHdr',{
data:[
{key: "url", value: "sMaterialName"},
{key: "searchname", value: this.sMaterialNo}
]
},true,{iProjectId:this.iProjectId,sUserName:'huansi'});
if(this.hdr.length <= 0) return false;
this.hdr = result[0];
this.hdr.isErr = false;
this.hdr_src.push(`https://weixin.huansi.net/apiproxy/huansi/Mall/mmmaterial/image_click/?iProjectId=${this.iProjectId}&iIden=${this.hdr.iIden}&m=${Math.random() / 9999}`)
},
async getSpeciminDtl(){
let result = await this.request('getSpeciminDtl',{
data:[
{key: "url", value: "getDetail"},
{key: "iIden", value: this.hdr.iIden}
]
},true,{iProjectId:this.iProjectId});
result.map(x=>{
x.tCreateTime = x.tCreateTime.replace(/-/g,'/').split('.')[0];
})
let data = result.sort((x,y)=>{
return new Date(x.tCreateTime).getTime() - new Date(y.tCreateTime).getTime();
})
data.map(x=>{
x.isErr = false;
this.dtl_src.push(`https://weixin.huansi.net/apiproxy/huansi/Mall/mmmaterial/image_click/?iProjectId=${this.iProjectId}&iIden=${x.iIden}&m=${Math.random() / 9999}`)
})
this.dtl = data;
},
showImgView (type) {
if(type == 'hdr'){
this.showHdr = true;
}else{
this.showDtl = true;
}
},
hideImageView (type) {
if(type == 'hdr'){
this.showHdr = false;
}else{
this.showDtl = false;
}
},
selectImg (type,index) {
if(type == 'hdr'){
this.showHdr = true;
this.imageHdrIndex = index;
}else{
this.showDtl = true;
this.imageDtlIndex = index;
}
},
}
}
</script>
src/view/tiip/chart/inventory.vue 0 → 100644
View file @ 9d9cb833
<style lang="less">
@import url('../../../styles/common.less');
#tiipChartInventory{
height:100%;
display:flex;
flex-direction: column;
background: #f2f2f2;
.Head{
height:30px;
line-height: 30px;
background: #09F;
text-align: center;
color: #fff;
font-weight: bold;
margin-top:8px;
width:100px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.CONTENT{
display:flex;flex-wrap:wrap;padding:8px;
.iCard{
width:calc(50% - 4px);
margin:0;
margin-bottom:8px;
text-align: center;
line-height:30px;
.warehouse{
}
}
.iCard:nth-child(odd) {
margin-right:8px;
}
}
.vertical{
flex-grow: 1;
height:1px;
margin-bottom: 7px;
}
.cross{
height:auto;
}
}
</style>
<template>
<div id="tiipChartInventory">
<div>
<div class="Head">金额</div>
<div class="iCard" ref="chart">
<canvas id="myChart" width="400" height="260" style="width:100%;height:240px;"></canvas>
</div>
</div>
<div>
<div class="Head">数量</div>
<div class="CONTENT">
<div class="iCard" v-for="(item,index) in chartData" :key="index" >
<div class="warehouse" :style="{'color':colorList[index]}">{{item.sStoreName}}</div>
<div class="piece"><span style="color:#8a8a8a;">总匹数：</span>{{item.nStockPieceQty}}</div>
<div class="qty"><span style="color:#8a8a8a;">总数量：</span>{{item.nStockQty}}</div>
</div>
</div>
</div>
<div v-if="false">
<div class="Head">金额</div>
<div :class="[direction == 'cross' ? 'cross' : 'vertical','iCard']">
<customerTable :columns="columns" :list="list" :tableStyle="tableStyle"></customerTable>
</div>
</div>
</div>
</template>
<script>
import Util from '@/libs/util.js'
import { mapState } from 'vuex'
import customerTable from '@/components/Table'
const F2 = require('@antv/f2/lib/index')
require('@antv/f2/lib/interaction/pan')
require('@antv/f2/lib/interaction/pie-select'); // 引入饼图选中交互
const Gesture = require('@antv/f2/lib/plugin/gesture');
export default {
name: 'tiipChartInventory',
data () {
return {
myChart:null,
list:[],
columns:[
{
width:'50px',
name:'序号',
align:'center',
field:'iIden',
},
{
width:'100px',
name:'类别',
align:'center',
field:'sMaterialTypeName',
},
{
width:'100px',
name:'入库数量',
align:'center',
field:'nInQty',
},
{
width:'100px',
name:'仓库金额',
align:'center',
field:'nAmount'
},
{
width:'100px',
name:'库存数量',
align:'center',
field:'nStockQty'
},
{
width:'100px',
name:'物料编号',
align:'center',
field:'sSampleMaterialNo'
},
],
tableStyle:{
theadBgColor:'rgba(223,238,253,1)',
complexTrBgColor:'white',
singleTrBgColor:'#eef4fe',
theadTdBorder:false,
tbodyTdBorder:false,
tbodyHeight:'calc(100vh - 342px)',
tbodyTrBorderBottom:'1px solid #5cadff',
width:'550px'
},
chartData:[],
direction:'vertical',
sStoreNo:'',
colorList:[ '#FE5D4D', '#3BA4FF', '#737DDE','#0000CD','#008B45','#FFF68F','#8B814C','#8B658B' ]
}
},
computed:{
...mapState({
userId:state => state.app.userId
})
},
async mounted(){
window.d = this;
this.$store.dispatch('saveUserId',this.$route.params.userId);
window.addEventListener("resize",()=>{
setTimeout(()=>{
this.renderResize();
this.myChart.changeSize(this.$refs['chart'].offsetWidth); // 清除
this.myChart.destroy();
this.renderChart();
})
});
},
async activated(){
this.renderResize();
await this.getDetail();
await this.renderChart();
},
methods:{
renderResize() {
// 判断横竖屏
let width = document.documentElement.clientWidth;
let height = document.documentElement.clientHeight;
if(width > height) {
this.direction = 'cross';
this.tableStyle.tbodyHeight = '100%';
}else{
this.direction = 'vertical';
this.tableStyle.tbodyHeight = 'calc(100vh - 342px)';
}
// 做页面适配
// 注意：renderResize方法执行时虚拟dom尚未渲染挂载，如果要操作vue实例，最好在this.$nextTick()里进行。
},
renderChart () {
let that = this;
const data = this.chartData;
const map = {};
data.forEach(function(obj) {
map[obj.sStoreName] = obj.nAmount + '元';
});
this.myChart = new F2.Chart({
id: 'myChart',
pixelRatio: window.devicePixelRatio,
padding: [ 20, 'auto' ],
plugins: Gesture,
});
this.myChart.source(data, {
nAmount: {
formatter: function formatter(val) {
return val + '元';
}
}
});
this.myChart.tooltip(false)
this.myChart.coord('polar', {
transposed: true,
innerRadius: 0.7,
radius: 1
});
this.myChart.axis(false);
this.myChart.interval()
.position('a*nAmount')
.color('sStoreName', this.colorList)
.adjust('stack');
const guide = this.myChart.guide().html({
position: [ '50%', '50%' ],
html: `
<div style="width: 250px;height: 40px;text-align: center;">
<div style="font-size: 12px">总计</div>
<div style="font-size: 12px">${(this.chartData.reduce((x,y)=>{return x = x+y.nAmount},0)).toFixed(2)}万</div>
</div>
`
});
this.myChart.interaction('pie-select',{
startEvent: 'tap',
cancelable:true,
animate: {
duration: 300,
delay: 0, // 动画延迟执行的时间
easing: 'bounceOut' // 动画的缓动函数
},
onEnd:async function(e){
if(!e.hasOwnProperty('data')){
// guide.html = `<div style="width: 250px;height: 40px;text-align: center;">
// <div style="font-size: 12px">总计</div>
// <div style="font-size: 12px">${(that.chartData.reduce((x,y)=>{return x = x+y.nAmount},0)).toFixed(2)}万</div>
// </div>
// `
// guide.repaint();
return false;
}
if(that.sStoreNo != e.data.sStoreNo){
that.sStoreNo = e.data.sStoreNo;
guide.html = `
<div style="width: 250px;height: 40px;text-align: center;">
<div style="font-size: 12px">${e.data.sStoreName}</div>
<div style="font-size: 12px">${((e.data.nAmount / (that.chartData.reduce((x,y)=>{return x = x+y.nAmount},0))) * 100).toFixed(2)}%</div>
</div>
`
}else{
guide.html = `<div style="width: 250px;height: 40px;text-align: center;">
<div style="font-size: 12px">总计</div>
<div style="font-size: 12px">${(that.chartData.reduce((x,y)=>{return x = x+y.nAmount},0)).toFixed(2)}万</div>
</div>
`
that.sStoreNo = '';
}
guide.repaint();
// await that.getDetail(that.sStoreNo);
}
});
this.myChart.legend({
clickable:true,
position: 'right',
itemFormatter: function itemFormatter(val) {
return val + '(' + map[val] + ')';
},
onClick: ev => {
let data = that.chartData.filter(x=>x.sStoreName == ev.clickedItem._attrs.dataValue);
if(data.length > 0){
guide.html = `
<div style="width: 250px;height: 40px;text-align: center;">
<div style="font-size: 12px">${data[0].sStoreName}</div>
<div style="font-size: 12px">${((data[0].nAmount / (that.chartData.reduce((x,y)=>{return x = x+y.nAmount},0))) * 100).toFixed(2)}%</div>
</div>
`
guide.repaint();
}
}
});
this.myChart.render();
},
async getDetail(sStoreNo){
let data = {};
!!sStoreNo && (data.sStoreNo = sStoreNo);
let res = await this.apiGet(`${this.$url('default')}/bianalysis/stockamountinfo/`,data,'加载中');
if(res.hasOwnProperty('error_data')){
this.$vux.confirm.show({
title:"提示",
content:res.error_title,
showCancelButton:false,
})
return false;
}
if(res.hasOwnProperty('set1')) this.chartData = res.set1;
this.chartData.map((x,y)=>{
x.a = '1';
})
this.chartData = this.chartData.filter(x=>x.nAmount != 0);
if(res.hasOwnProperty('set2')) this.list = res.set2;
}
},
components:{
customerTable
},
}
</script>
src/view/tiip/orderDetails/hdrFields.js 0 → 100644
View file @ 9d9cb833
module.exports = [
{
bAmend:false,
bDisabled:false,
bHome:false,
bPrint:false,
bRequired:true,
bUsable:true,
bVisible:true,
iRowNo:"1",
iType:"1",
sFieldCaption:"采购合同号",
sFieldName:"sContractNo",
sFieldType:"1",
sTypeName:"卡片1",
rowCount:2
},
{
bAmend:false,
bDisabled:false,
bHome:false,
bPrint:false,
bRequired:true,
bUsable:true,
bVisible:true,
iRowNo:"2",
iType:"1",
sFieldCaption:"状态",
sFieldName:"sStatus",
sFieldType:"7",
sTypeName:"卡片1",
rowCount:2
},
{
bAmend:false,
bDisabled:false,
bHome:false,
bPrint:false,
bRequired:true,
bUsable:true,
bVisible:true,
iRowNo:"3",
iType:"1",
sFieldCaption:"供应商",
sFieldName:"sCustomerName",
sFieldType:"3",
sTypeName:"卡片1",
rowCount:1
},
{
bAmend:false,
bDisabled:false,
bHome:false,
bPrint:false,
bRequired:false,
bUsable:true,
bVisible:true,
iRowNo:"4",
iType:"1",
sFieldCaption:"销售员",
sFieldName:"sSalesName",
sFieldType:"6",
sTypeName:"卡片1",
rowCount:2
},
{
bAmend:false,
bDisabled:false,
bHome:false,
bPrint:false,
bRequired:false,
bUsable:true,
bVisible:true,
iRowNo:"5",
iType:"1",
sFieldCaption:"币种",
sFieldName:"sCurrency",
sFieldType:"0",
sTypeName:"卡片1",
rowCount:2
},
{
bAmend:false,
bDisabled:false,
bHome:false,
bPrint:false,
bRequired:false,
bUsable:true,
bVisible:true,
iRowNo:"6",
iType:"1",
sFieldCaption:"签约日期",
sFieldName:"dContractDate",
sFieldType:"0",
sTypeName:"卡片1",
rowCount:5
},
{
bAmend:false,
bDisabled:false,
bHome:false,
bPrint:false,
bRequired:false,
bUsable:true,
bVisible:true,
iRowNo:"7",
iType:"1",
sFieldCaption:"交货地址",
sFieldName:"sSignAddress",
sFieldType:"0",
sTypeName:"卡片1",
rowCount:1
}
]
src/view/tiip/orderDetails/index.vue 0 → 100644
View file @ 9d9cb833
<style lang="less" >
#orderDetailsIndex{
height:100%;
display:flex;
flex-direction: column;
background: #f2f2f2;
.CONTENT{
margin-bottom:10px;
.basic{
background: #dfe9fd;
padding-left:5px;
.Title{
height:40px;
display: flex;
align-items: center;
color:#5E9AFE;
font-weight: bold;
}
}
.Info{
border-top:1px solid #dbe9f8;
display: flex;
flex-wrap: wrap;
margin-top: 0px;
font-size:12px;
>div{
display: flex;
width: 100%;
min-height:40px;
>div{
display: flex;
width:100%;
min-height:40px;
>div{
display: flex;
align-items: center;
box-sizing: content-box;
flex:1;
height:100%;
>span{
height:100%;
min-width:80px;
text-align: center;
border-right:1px solid #dbe9f8;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
border-bottom:1px solid #dbe9f8;
color:#586e86;
font-weight: bold;
background: #eef4fe;
}
>div{
height:100%;
width:100%;
display: flex;
flex-wrap: wrap;
>div{
height:100%;
width:100%;
background:white;
align-items: center;
display:inline-flex;
// padding:0 5px 0 0;
>div:first-child{
height:100%;
border-bottom:1px solid #dbe9f8;
border-right:1px solid #dbe9f8;
box-sizing: border-box;
}
>div{
flex:1;
padding-left:5px;
display: flex;
align-items: center;
>span{
width:70px;
display: inline-block;
}
}
}
}
}
}
}
}
}
}
</style>
<template>
<div id="orderDetailsIndex">
<div class="CONTENT" v-for="(v1,i1) in list" :key='i1'>
<div class="basic">
<div class="Title">
<span>{{v1.title}}</span>
</div>
</div>
<div class="Info">
<div v-for="(v2,i2) in v1.child" :key='i2'>
<div v-for="(v3,i3) in v2.child" :key="i3">
<div>
<span>{{v3.sFieldCaption}}</span>
<div>
<div>
<div>
{{DATA[v3.sFieldName]}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Util from '@/libs/util.js'
import { mapState } from 'vuex'
import hdrFields from './hdrFields'
export default {
name: 'orderDetailsIndex',
data(){
return{
list:[],
DATA:{}
}
},
computed:{
...mapState({
})
},
async mounted(){
window.d = this;
},
async activated(){
await this.getDetail();
this.filterFields(hdrFields,this.list,'采购基本合同');
},
methods:{
async getDetail(){
let apiURL;
switch(this.$route.params.type){
case 'pbcontract':
apiURL = 'getTiipPbcontract'
break;
case 'pay':
apiURL = 'getTiipFipayable'
break;
case 'receive':
apiURL = 'getTiipFireceivable'
break;
case 'fabric':
case 'inspectionReport':
apiURL = 'getTiipFabric'
break;
default:
break;
}
let hdrResult = await this.request(apiURL,{
data:[
{key:'url',value:this.$route.params.type == 'inspectionReport' ? 'Inspection Report' :'hdr'}
]
},true);
if(hdrResult.hasOwnProperty('error_data')){
this.$vux.confirm.show({
title:"提示",
content:hdrResult.error_title,
showCancelButton:false,
})
return false;
}
hdrResult.map(x=>{
for(let y in x){
if(isNaN(x[y])&&!isNaN(Date.parse(x[y]))){
　　 x[y] = Util.dateFormat(x[y],'yyyy-MM-dd')
}
}
})
this.DATA = hdrResult[0];
},
filterFields(fields,arr,title){
arr.push({title:title,child:[]});
let data = arr[arr.length - 1];
for(let y of hdrFields){
let flag = false;
if(data.child.length <= 0){
data.child.push({
rowCount:y.rowCount,
child:[]
})
}
for(let x of data.child){
if(x.child.length != x.rowCount && x.rowCount == y.rowCount){
flag = true;
x.child.push(y);
}
}
if(!flag){
data.child.push({
rowCount:y.rowCount,
child:[y]
})
}
}
}
},
components:{
},
}
</script>
src/view/tiip/profitAnalysis/detail.vue 0 → 100644
View file @ 9d9cb833
<style lang="less" >
#profitAnalysisDetail{
height:100%;
display:flex;
flex-direction: column;
.basic{
background: white;
padding: 0px 10px 15px 10px;
.Title{
height:40px;
display: flex;
align-items: center;
}
.items{
position: relative;
margin-bottom:10px;
}
.items:before{
content:"";
position: absolute;
left:-10px;
border:2px solid #5cadff;
height:100%;
}
.content{
display: flex;
line-height:25px;
>div>span:first-child{
color:#aaa;
display: inline-block;
width:70px;
}
>div:nth-child(odd){
flex:1;
text-align: left;
}
>div:nth-child(even){
width:40%;
text-align: right;
}
}
}
.line{
flex:1;
border:0.5px solid #5cadff;
margin-left:15px;
}
.Info{
border-top:1px solid #dbe9f8;
display: flex;
flex-wrap: wrap;
margin-top: 0px;
font-size:12px;
>div{
>span{
height:100%;
min-width:80px;
text-align: center;
border-right:1px solid #dbe9f8;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
border-bottom:1px solid #dbe9f8;
color:#586e86;
font-weight: bold;
}
display: flex;
min-height:40px;
align-items: center;
box-sizing: content-box;
width:100%;
>div{
width:100%;
display: flex;
flex-wrap: wrap;
>div{
width:100%;
background:white;
height:40px;
line-height: 40px;
display:inline-flex;
padding:0 5px 0 0;
border-bottom:1px solid #dbe9f8;
>div:first-child{
border-right:1px solid #dbe9f8;
}
>div{
flex:1;
padding-left:5px;
>span{
width:70px;
display: inline-block;
}
}
}
}
}
}
}
</style>
<template>
<div id="profitAnalysisDetail">
<div class="basic">
<div class="Title">
<span>基本信息</span>
<div class="line"></div>
</div>
<div>
<div class="content">
<div>
<span>订单号：</span>
<span @click="routerToTrack" style="color:#5cadff;text-decoration:underline;">{{hdr.sOrderNo}}</span>
</div>
<div style="color:#5cadff;font-weight:bold;">{{hdr.sStatus}}</div>
</div>
<div class="content">
<div><span>客户：</span>{{hdr.sCustomerName}}</div>
</div>
<div class="content">
<div><span>产品：</span><span style="color:black;">{{hdr.sSampleMaterialNo}}{{hdr.sSampleMaterialName ? '，'+hdr.sSampleMaterialName : ''}}</span></div>
</div>
<div class="content">
<div style="width:40%;flex:none;"><span>总数量：</span><span style="color:#5cadff;">{{hdr.nQty}}</span></div>
<div style="width:40%;text-align:left;"><span>总金额：</span><span style="color:#5cadff;">{{hdr.nPlanSellAmount}}</span></div>
<div style="text-align:right;"><span style="color:black;">{{hdr.dReceivedDate}}</span></div>
</div>
</div>
</div>
<div class="Info">
<div>
<span>坯布信息</span>
<div>
<div>
<div>
<span>采购数量：</span>{{hdr.nFPQty}}
</div>
<div>
<span>采购金额：</span>{{hdr.nFPAmount}}
</div>
</div>
</div>
</div>
<div>
<span>染整信息</span>
<div>
<div>
<div>
<span>染整数量：</span>{{hdr.nDyeQty}}
</div>
<div>
<span>染费：</span>{{hdr.nDyeAmount}}
</div>
</div>
<div>
<div>
<span>后整数量：</span>{{hdr.nFNQty}}
</div>
<div>
<span>后整金额：</span>{{hdr.nFNAmount}}
</div>
</div>
</div>
</div>
<div>
<span>订单信息</span>
<div>
<div>
<div style="border:none;">
<span>其他费用：</span>{{hdr.nOrderCost}}
</div>
</div>
<div>
<div>
<span>订单转出：</span>{{hdr.nTurnPayAmount}}
</div>
<div>
<span>订单转入：</span>{{hdr.nTurnReceAmount}}
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Util from '@/libs/util.js'
import { mapState } from 'vuex'
export default {
name: 'profitAnalysisDetail',
data () {
return {
list:[],
}
},
computed:{
...mapState({
hdr:state => state.profitAnalysis.hdr,
userId:state => state.app.userId
})
},
async mounted(){
window.d = this;
console.log(this.hdr)
//点击表格列触发
},
async activated(){
this.clean();
// await this.getDetail();
},
methods:{
async getDetail(){
let res = await this.apiGet(`${this.host}${this.userId}/fabricorder/dtl/`,{
uGUID:this.hdr.uGUID
},true);
if(res.hasOwnProperty('error_data')){
this.$vux.confirm.show({
title:"提示",
content:res.error_title,
showCancelButton:false,
})
return false;
}
// if(res.length > 0){
this.list = res[0].child;
this.nAllAmount = res[0].nAllAmount;
this.list.map(x=>x.sMaterial = `<div><span style="text-decoration:underline;">${x.sSampleMaterialNo}</span><br><span style="color:black;">${x.sSampleMaterialName}</span></div>`)
// }
},
clean(){
this.list = [];
this.nAllAmount = 0;
},
routerToTrack(){
this.$store.dispatch('profitAnalysisSaveHdr',this.hdr);
this.$router.push({name:'profitAnalysisTrack'})
}
},
components:{
},
}
</script>
src/view/tiip/profitAnalysis/index.vue 0 → 100644
View file @ 9d9cb833
<style lang="less" >
#profitAnalysisList{
height:100%;
background:#eef4fe;
display:flex;
flex-direction: column;
/deep/ .weui-cell_access .weui-cell__ft:after{
height: 10px;
width: 10px;
margin-top: -4px;
right: 0;
}
.Table{
flex-grow: 1;
height:1px;
}
}
</style>
<template>
<div id="profitAnalysisList">
<div class="header">
<searchComponent placeholder="请输入单号／客户进行搜索" :search="search" :status="status" :typeList="typeList"/>
</div>
<div class="Table">
<customerTable :showFooter="true" :columns="columns" :list="list" :tableStyle="tableStyle"></customerTable>
</div>
</div>
</template>
<script>
import Util from '@/libs/util.js'
import searchComponent from '@/components/search'
import customerTable from '@/components/Table'
import customerModal from '@/components/Modal'
import { XButton } from 'vux'
export default {
name: 'profitAnalysisList',
data () {
return {
search:{
dBeginDate:Util.dateFormat(new Date(),'yyyy-MM-01'),
dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd'),
page:1,
per_page:30,
sStatus:'全部'
},
list:[],
columns:[
{
width:'100px',
name:'单号',
align:'center',
field:'sOrderNoHTML',
underline:true,
color:'#2d8cf0',
fixed:true,
fixedLeftWidth:'0px'
},
{
width:'100px',
name:'客户',
align:'center',
field:'sCustomerName',
},
{
width:'100px',
name:'销售员',
align:'center',
field:'sSalesName'
},
{
width:'100px',
name:'利润',
align:'center',
field:'nFactProfit',
},
{
width:'100px',
name:'成本',
align:'center',
field:'nFactCost'
},
{
width:'100px',
name:'利润率',
align:'center',
field:'nFactProfitRate'
},
{
width:'100px',
name:'销售额',
align:'center',
field:'nSellAmount'
},
{
width:'100px',
name:'销售数量',
align:'center',
field:'nSellQty'
}
],
tableStyle:{
width:'800px',
theadBgColor:'rgba(223,238,253,1)',
complexTrBgColor:'white',
singleTrBgColor:'#eef4fe',
theadTdBorder:false,
tbodyTdBorder:false,
tbodyHeight:'calc(100vh - 200px)',
tbodyTrBorderBottom:'1px solid #5cadff'
},
status:[],
showModal:false,
row:{},
typeList:{
input:true,
select:true,
btns:true,
time:true
},
}
},
async mounted(){
window.d = this;
this.$store.dispatch('saveUserId',this.$route.params.userId);
await this.getStatus();
await this.getHdr();
},
async activated(){
this.showModal = false;
this.global.$off('searchData');
this.global.$off('scrollTable');
this.global.$off('clickTd');
//查询条件触发加载
this.global.$on('searchData',async ()=>{
this.cleanSearch();
this.getHdr();
});
//滚动加载
this.global.$on('scrollTable',async ()=>{
this.getHdr(true);
})
//点击表格列触发
this.global.$on('clickTd',async(res)=>{
// this.showModal = res.showModal;
this.row = res.item;
this.routerToDetail();
})
},
methods:{
async getStatus(){
let res = await this.apiGet(`${this.$url('default')}/fabricorder/status/`,{},true);
if(res.hasOwnProperty('error_data')){
this.$vux.confirm.show({
title:"提示",
content:res.error_title,
showCancelButton:false,
})
return false;
}
this.status = res;
this.status.map(x=>{
x.sStatus = x.sStatus || '全部';
})
},
async getHdr(flag){
if(this.search.per_page < 30){
this.$vux.toast.text('已加载全部数据!', 'middle')
return false;
}
let data = Util.deepClone(this.search);
if(this.search.sStatus == '全部'){
let status = [];
this.status.map(x=>{
if(x.sStatus != '全部') status.push(x.sStatus);
})
data.sStatus = status.join(',');
}
data.serachvalue == '' && (delete data.serachvalue);
data.begin_date = data.dBeginDate;
data.end_date = data.dEndDate;
delete data.dBeginDate;
delete data.dEndDate;
console.log(this.search.per_page)
let res = await this.apiGet(`${this.$url('default')}/fabricorder/order_profit_analysis/`,data,'加载中')
if(res.hasOwnProperty('error_data')){
this.$vux.confirm.show({
title:"提示",
content:res.error_title,
showCancelButton:false,
})
return false;
}
if(res.length > 0){
res.map(x=>{
x.dReceivedDate = (x.dReceivedDate || '').split(' ')[0];
x.sOrderNoHTML = x.sOrderNo != '合计' ? `<div><span style="text-decoration:underline;">${x.sOrderNo}</span></div>` : '<span>合计</span>'
});
if(flag){
this.list.splice(this.list.length - 1,1);
this.list = this.list.concat(res);
}else{
this.list = res;
}
this.search.page++;
this.search.per_page = res.length - 1;
console.log(res.length)
}
},
closeModal(){
this.showModal = false;
},
cleanSearch(){
this.search.page = 1;
this.search.per_page = 30;
this.list = [];
},
routerToDetail(){
this.$store.dispatch('profitAnalysisSaveHdr',this.row);
this.$router.push({name:'profitAnalysisDetail'})
},
// routerToTarck(){
// this.$store.dispatch('searchOrderSaveHdr',this.row);
// this.$router.push({name:'searchOrderTrack'})
// }
},
components:{
searchComponent,
XButton,
customerTable,
customerModal
},
}
</script>
src/view/tiip/profitAnalysis/track.vue 0 → 100644
View file @ 9d9cb833
<style lang="less" >
#profitAnalysisTrack{
height:100%;
background:white;
display:flex;
flex-direction:column;
.scrollContainer1{
flex-grow: 1;
height:1px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
// padding-bottom: 42px;
}
.scrollContainer2{
height:100%;
}
.basic{
padding:0 20px;
.Title{
height:40px;
display: flex;
align-items: center;
}
.items{
position: relative;
margin-bottom:10px;
}
.items:before{
content:"";
position: absolute;
left:-10px;
border:2px solid #5cadff;
height:100%;
}
.content{
display: flex;
line-height:25px;
>div>span:first-child{
color:#aaa;
display: inline-block;
width:70px;
}
>div:nth-child(odd){
flex:1;
text-align: left;
}
>div:nth-child(even){
width:40%;
text-align: right;
}
}
}
.line{
flex:1;
border:0.5px solid #bbb;
margin-left:15px;
}
.Table{
margin-top:10px;
}
.btns{
position: fixed;
bottom:0;
width:100%;
}
}
</style>
<template>
<div id="profitAnalysisTrack">
<div class="basic">
<div class="Title">
<span>基本信息</span>
<div class="line"></div>
</div>
<div>
<div class="content">
<div><span>订单号：</span>{{hdr.sOrderNo}}</div>
<div>{{hdr.dReceivedDate}}</div>
</div>
<div class="content">
<div><span>客户：</span>{{hdr.sCustomerName}}</div>
</div>
<div class="content">
<div><span>产品：</span><span style="color:#5cadff;">{{hdr.sSampleMaterialName ? hdr.sSampleMaterialName + '，' : ''}}{{hdr.sSampleMaterialNo }}</span></div>
</div>
<div class="content">
<div><span>总数量：</span><span style="color:#5cadff;">{{nAllQty}}</span></div>
<div><span>总金额：</span><span style="color:#5cadff;">{{nAllAmount}}</span></div>
</div>
</div>
</div>
<div class="Table">
<customerTable :columns="columns" :list="dtl" :tableStyle="tableStyle"></customerTable>
</div>
<div class='scrollContainer2'>
<div class="basic" v-for="(v1,i1) in orderallmes" :key="i1" style="font-size:12px;">
<div class="Title">
<span>{{v1.sType}}</span>
<div class="line"></div>
</div>
<div class="items" v-for="(v2,i2) in v1.child" :key="i2">
<div class="content">
<div><span>{{v1.sType.substr(0,2)}}单号：</span>{{v2.sBillNo}}</div>
<div>{{v2.dDate}}</div>
</div>
<div class="content">
<div><span>{{v1.sCheckItemName}}：</span>{{v2.sCheckItem}}</div>
</div>
<div class="content">
<div><span>产品：</span>{{v2.sMaterialNameSample}}</div>
</div>
<div class="content" v-for="(v3,i3) in v2.child" :key="i3" style="display:block;">
<div style="display:flex;lin-height:25px;">
<div style="display:flex;max-width:40%;width:40%;min-height:40%;flex:none;">
<span style="min-width:70px;display:inline-flex;align-items:center;">颜色：</span>
<div style="display:flex;flex-wrap:wrap;">
<div style="width:100%;display:flex;align-items:center;">{{v3.sColorNo}}</div>
<!-- <div style="width:100%;">色号</div> -->
</div>
</div>
<div style="max-width:30%;width:30%;min-height:30%;flex:none;display: flex;align-items: center;justify-content: flex-start;word-break:break-word;">
<span style="width:50px;min-width:50px;min-width:50px;">数量：</span>
<span style="color:#5cadff;text-align:left;">{{v3.nQty || 0}}{{v3.sUnit}}</span>
</div>
<div style="max-width:30%;width:30%;min-height:30%;flex:none;display: flex;align-items: center;justify-content: flex-end;">
<span style="width:50px;min-width:50px;min-width:50px;">金额：</span>
<span style="color:#5cadff;width:40%;max-with:40%;min-height:40%;word-break:break-word;text-align:left;">{{v3.nAmount || 0}}</span>
</div>
</div>
<div style="width:100%;text-align:left;display:flex;color:#FF8247;" v-if="!v2.isAll">
<span style="color:#FF8247;">摘要：</span>
<div style="flex:1;word-wrap: break-word;">{{v3.sRemark}}</div>
</div>
</div>
<div class="content" v-if="v2.isAll" style="line-height:normal;">
<div style="display:flex;color:#FF8247;">
<span style="color:#FF8247;">摘要：</span>
<div style="flex:1;word-wrap: break-word;">{{v2.sRemark}}</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="btns">
<x-button :gradients="['#1D62F0', '#19D5FD']" @click.native="share">转发</x-button>
</div>
<div id="photo">
<img class="imgDownload" :src="url" style="width:100%;">
</div> -->
</div>
</template>
<script>
import Util from '@/libs/util.js'
import customerTable from '@/components/Table'
import { mapState } from 'vuex'
import { XButton } from 'vux'
export default {
name: 'profitAnalysisTrack',
data () {
return {
host:'https://weixin.huansi.net/apiproxy/huansi/service/proxy/',
// host:'http://192.168.4.40:5001',
columns:[
{
width:'20vw',
name:'颜色',
align:'center',
field:'sColorName',
fixed:true
},
{
width:'15vw',
name:'单价',
align:'center',
field:'nPrice',
},
{
width:'15vw',
name:'数量',
align:'center',
field:'nQty'
},
{
width:'15vw',
name:'金额',
align:'center',
field:'nAmount'
},
{
width:'35vw',
name:'摘要',
align:'center',
field:'sRemark'
}
],
tableStyle:{
theadBgColor:'rgba(176,226,255,0.3)',
complexTrBgColor:'white',
singleTrBgColor:'#eef4fe',
theadTdBorder:false,
tbodyTdBorder:false,
tbodyHeight:'auto',
tbodyTrBorderBottom:'0.5px solid #5cadff'
},
dtl:[],
nAllQty:0,
nAllAmount:0,
orderallmes:[],
url:"",
direction:''
}
},
async mounted(){
window.d = this;
},
async activated(){
// window.removeEventListener("resize", this.renderResize, false)
// window.addEventListener("resize", this.renderResize, false)
this.clean();
await this.getDetail();
await this.getOrderallmes();
},
computed:{
...mapState({
hdr:state => state.profitAnalysis.hdr,
userId:state => state.app.userId
})
},
methods:{
renderResize() {
// 判断横竖屏
let width = document.documentElement.clientWidth
let height = document.documentElement.clientHeight
if(width > height) {
this.direction = 'cross'
}else{
this.direction = 'vertical';
}
// 做页面适配
// 注意：renderResize方法执行时虚拟dom尚未渲染挂载，如果要操作vue实例，最好在this.$nextTick()里进行。
},
routerToDetail(){
this.$store.dispatch('searchOrderSaveHdr',this.hdr);
this.$router.push({name:'searchOrderDetail'})
},
async getDetail(){
let res = await this.apiGet(`${this.host}${this.userId}/fabricorder/dtl/`,{
uGUID:this.hdr.uGUID
},true);
if(res.hasOwnProperty('error_data')){
this.$vux.confirm.show({
title:"提示",
content:res.error_title,
showCancelButton:false,
})
return false;
}
if(res.length > 0){
this.dtl = res[0].child;
this.nAllAmount = res[0].nAllAmount;
this.nAllQty = res[0].nAllQty;
}
},
async getOrderallmes(){
let res = await this.apiGet(`${this.host}${this.userId}/fabricorder/orderallmes/`,{
sOrderNo:this.hdr.sOrderNo
},true);
if(res.hasOwnProperty('error_data')){
this.$vux.confirm.show({
title:"提示",
content:res.error_title,
showCancelButton:false,
})
return false;
}
if(res.length > 0){
this.orderallmes = res;
for(let x of this.orderallmes){
x.child = x.child.filter(x=>x.sBillNo)
}
this.orderallmes = this.orderallmes.filter(x=>x.child.length > 0);
this.orderallmes.map((x,i1)=>{
x.child.map((y,i2)=>{
let arr = Array.from(new Set((y.child.map(z=>z.sRemark))))
if(arr.length > 1){
y.isAll = false;
}else{
y.sRemark = arr.join('');
y.isAll = true;
}
})
})
}
},
clean(){
this.orderallmes = [];
this.dtl = [];
this.nAllAmount = 0;
this.nAllQty = 0;
},
share(){
// wx.miniProgram.postMessage({ data: { imgBase64: imageUrl } })
　　　　　　　var shareContent = document.getElementById("searchOrderTrack");
var that = this;
html2canvas( shareContent,{
onrendered: function(canvas){
var img = new Image();
img.src = canvas.toDataURL();
var url = img.src.replace('data:image/png;base64,','');
wx.miniProgram.postMessage({ data: { imgBase64: url } })
// var triggerEvent = "touchstart";
// var blob=new Blob([''], {type:'application/octet-stream'});
// var url = URL.createObjectURL(blob);
// return false;
// var a = document.createElement('a');
// a.href = img.src;
// a.download = img.src.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];
// var e = document.createEvent('MouseEvents');
// e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
// a.dispatchEvent(e);
// URL.revokeObjectURL(url);
// document.getElementById("photo").appendChild(img);
}
})
},
},
components:{
customerTable,
XButton
},
}
</script>
\ No newline at end of file
src/view/tiip/searchOrder/detail.vue 0 → 100644
View file @ 9d9cb833
<style lang="less" >
#searchOrderDetail{
height:100%;
background:white;
display:flex;
flex-direction: column;
.header{
height:60px;
width:100%;
display: flex;
align-items:center;
flex-wrap: wrap;
background: #eef4fe;
padding-left:10px;
font-weight:bold;
margin-bottom: 10px;
div{
width:100%;
span{
display: inline-block;
width:60px;
}
}
}
.content{
flex-grow: 1;
height:1px;
overflow: auto;
.total{
height:40px;
line-height:40px;
text-align: right;
color: #2d8cf0;
padding:0 20px;
font-weight: bold;
}
}
}
</style>
<template>
<div id="searchOrderDetail">
<div class="header">
<div><span>订单号：</span>{{hdr.sOrderNo}}</div>
<div><span>客户：</span>{{hdr.sCustomerName}}</div>
</div>
<div class="content">
<customerTable :columns="columns" :list="list" :tableStyle="tableStyle">
<div class="total">合计：{{nAllAmount}}</div>
</customerTable>
</div>
</div>
</template>
<script>
import Util from '@/libs/util.js'
import customerTable from '@/components/Table'
import { mapState } from 'vuex'
export default {
name: 'searchOrderDetail',
data () {
return {
list:[],
columns:[
{
width:'20vw',
name:'产品名称',
align:'center',
field:'sMaterial',
underline:true,
color:'#2d8cf0'
},
{
width:'20vw',
name:'颜色',
align:'center',
field:'sColorName'
},
{
width:'20vw',
name:'单价',
align:'center',
field:'nPrice'
},
{
width:'20vw',
name:'数量',
align:'center',
field:'nQty'
},
{
width:'20vw',
name:'金额',
align:'center',
field:'nAmount'
}
],
tableStyle:{
theadBgColor:'rgba(176,226,255,0.3)',
complexTrBgColor:'white',
singleTrBgColor:'#eef4fe',
theadTdBorder:false,
tbodyTdBorder:false,
tbodyHeight:'calc(100vh - 110px)',
tbodyTrBorderBottom:'0.5px solid #5cadff'
},
host:'https://weixin.huansi.net/apiproxy/huansi/service/proxy/',
// host:'http://192.168.4.40:5001',
nAllAmount:0,
}
},
async mounted(){
window.d = this;
//点击表格列触发
},
async activated(){
this.clean();
await this.getDetail();
this.global.$off('clickTd');
this.global.$on('clickTd',async(res)=>{
this.$store.dispatch('searchOrderSaveDtl',res.item);
this.$router.push({name:'searchOrderMaterialDetail'})
})
},
computed:{
...mapState({
hdr:state => state.searchOrder.hdr,
userId:state => state.app.userId
})
},
methods:{
async getDetail(){
let res = await this.apiGet(`${this.host}${this.userId}/fabricorder/dtl/`,{
uGUID:this.hdr.uGUID
},true);
if(res.hasOwnProperty('error_data')){
this.$vux.confirm.show({
title:"提示",
content:res.error_title,
showCancelButton:false,
})
return false;
}
// if(res.length > 0){
this.list = res[0].child;
this.nAllAmount = res[0].nAllAmount;
this.list.map(x=>x.sMaterial = `<div><span style="text-decoration:underline;">${x.sSampleMaterialNo}</span><br><span style="color:black;">${x.sSampleMaterialName}</span></div>`)
// }
},
clean(){
this.list = [];
this.nAllAmount = 0;
}
},
components:{
customerTable,
},
}
</script>
src/view/tiip/searchOrder/index.vue 0 → 100644
View file @ 9d9cb833
<style lang="less" >
#searchOrderList{
height:100%;
background:#eef4fe;
display:flex;
flex-direction: column;
/deep/ .weui-cell_access .weui-cell__ft:after{
height: 10px;
width: 10px;
margin-top: -4px;
right: 0;
}
.Table{
flex-grow: 1;
height:1px;
overflow: auto;
// -webkit-overflow-scrolling: touch;
}
.modal>.content,.modal_active>.content{
.item{
width: 240px;
height: 180px;
background:#eef4fe;
border-radius:10px;
display: flex;
flex-direction: column;
.content{
height:1px;
flex-grow: 1;
div{
height:40px;
line-height: 40px;
text-align: center;
color:#5cadff;
}
}
}
}
}
</style>
<template>
<div id="searchOrderList">
<div class="header">
<searchComponent placeholder="请输入订单号／客户..." :search="search" :status="status" :typeList="typeList"/>
</div>
<div class="Table">
<customerTable :columns="columns" :list="list" :tableStyle="tableStyle"></customerTable>
</div>
<!-- <customerModal :showModal="showModal">
<div class="item">
<div class="content">
<div style="color:#000;font-weight:bold;">选择查看内容</div>
<div @click="routerToDetail">订单明细</div>
<div @click="routerToTarck">全流程跟踪</div>
</div>
<div class="btns">
<x-button type="primary" style="background:#6b9bf7;" @click.native="closeModal">取消</x-button>
</div>
</div>
</customerModal> -->
</div>
</template>
<script>
import Util from '@/libs/util.js'
import searchComponent from '@/components/search'
import customerTable from '@/components/Table'
import customerModal from '@/components/Modal'
import { XButton } from 'vux'
export default {
name: 'searchOrderList',
data () {
return {
search:{
dBeginDate:Util.dateFormat(new Date(),'yyyy-MM-01'),
dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd'),
page:1,
per_page:30,
sStatus:'全部'
},
list:[],
columns:[
{
width:'30%',
name:'单号',
align:'center',
field:'sOrderNoHTML',
underline:true,
color:'#2d8cf0',
fixed:true,
fixedLeftWidth:'0px'
},
{
width:'40%',
name:'客户',
align:'center',
field:'sCustomerName',
},
{
width:'20%',
name:'数量',
align:'center',
field:'nQty',
},
{
width:'20%',
name:'销售员',
align:'center',
field:'sSalesName'
},
{
width:'20%',
name:'状态',
align:'center',
field:'sStatus'
}
],
tableStyle:{
theadBgColor:'rgba(223,238,253,1)',
complexTrBgColor:'white',
singleTrBgColor:'#eef4fe',
theadTdBorder:false,
tbodyTdBorder:false,
tbodyHeight:'calc(100vh - 160px)',
tbodyTrBorderBottom:'1px solid #5cadff',
width:'100%'
},
host:'https://weixin.huansi.net/apiproxy/huansi/service/proxy/',
// host:'http://192.168.4.40:5001',
status:[],
showModal:false,
row:{},
typeList:{
input:true,
select:true,
btns:true,
time:true
},
}
},
async mounted(){
window.d = this;
await this.getStatus();
await this.getHdr();
this.$store.dispatch('saveUserId',this.$route.params.userId);
},
async activated(){
this.showModal = false;
this.global.$off('searchData');
this.global.$off('scrollTable');
this.global.$off('clickTd');
//查询条件触发加载
this.global.$on('searchData',async ()=>{
this.cleanSearch();
this.getHdr();
});
//滚动加载
this.global.$on('scrollTable',async ()=>{
this.getHdr(true);
})
//点击表格列触发
this.global.$on('clickTd',async(res)=>{
// this.showModal = res.showModal;
this.row = res.item;
this.routerToTarck();
})
},
methods:{
async getStatus(){
let res = await this.apiGet(`${this.host}${this.$route.params.userId}/fabricorder/status/`,{},true);
if(res.hasOwnProperty('error_data')){
this.$vux.confirm.show({
title:"提示",
content:res.error_title,
showCancelButton:false,
})
return false;
}
this.status = res;
this.status.map(x=>{
x.sStatus = x.sStatus || '全部';
})
},
async getHdr(flag){
if(this.search.per_page < 30){
this.$vux.toast.text('已加载全部数据!', 'middle')
return false;
}
let data = Util.deepClone(this.search);
if(this.search.sStatus == '全部'){
let status = [];
this.status.map(x=>{
if(x.sStatus != '全部') status.push(x.sStatus);
})
data.sStatus = status.join(',');
}
data.serachvalue == '' && (delete data.serachvalue);
data.begin_date = data.dBeginDate;
data.end_date = data.dEndDate;
delete data.dBeginDate;
delete data.dEndDate;
let res = await this.apiGet(`${this.host}${this.$route.params.userId}/fabricorder/hdr/`,data,'加载中')
if(res.hasOwnProperty('error_data')){
this.$vux.confirm.show({
title:"提示",
content:res.error_title,
showCancelButton:false,
})
return false;
}
if(res.table.length > 0){
res.table.map(x=>{
x.dReceivedDate = x.dReceivedDate.split(' ')[0]
x.sOrderNoHTML = `<div><span style="text-decoration:underline;">${x.sOrderNo}</span></div>`
});
if(flag){
this.list = this.list.concat(res.table);
}else{
this.list = res.table;
}
this.search.page++;
this.search.per_page = res.table.length;
}
},
closeModal(){
this.showModal = false;
},
cleanSearch(){
this.search.page = 1;
this.search.per_page = 30;
this.list = [];
},
routerToDetail(){
this.$store.dispatch('searchOrderSaveHdr',this.row);
this.$router.push({name:'searchOrderDetail'})
},
routerToTarck(){
this.$store.dispatch('searchOrderSaveHdr',this.row);
this.$router.push({name:'searchOrderTrack'})
}
},
components:{
searchComponent,
XButton,
customerTable,
customerModal
},
}
</script>
src/view/tiip/searchOrder/materialDetail.vue 0 → 100644
View file @ 9d9cb833
<style lang="less" >
#searchOrderMaterialDetail{
height:100%;
background:#eef4fe;
.basicInfo{
.head{
height:40px;
line-height: 40px;
background: #eef4fe;
font-size:16px;
padding:0 10px;
color:#2d8cf0;
font-weight:bold;
}
.content{
.tr{
display: flex;
min-height:35px;
>div{
width:25%;
min-width: 25%;
max-width: 25%;
display: flex;
align-items: center;
justify-content: center;
min-height:35px;
word-break: break-all;
}
>div:nth-child(odd){
background:#eef4fe;
border:1px solid #2d8cf0;
border-top:0;
}
>div:nth-child(even){
background:white;
border-bottom:1px solid #2d8cf0;
}
>div:nth-child(4n){
background:white;
border-right:1px solid #2d8cf0;
}
}
.tr:first-child{
border-top:1px solid #2d8cf0;
}
}
}
}
</style>
<template>
<div id="searchOrderMaterialDetail">
<div class="basicInfo">
<div class="head">基本信息</div>
<div class="content">
<div class="tr">
<div>产品编号</div>
<div>{{list.sSampleMaterialNo}}</div>
<div>产品名称</div>
<div>{{list.sSampleMaterialName}}</div>
</div>
<div class="tr">
<div>成品克重</div>
<div>{{list.sGMWT}}</div>
<div>幅宽</div>
<div>{{list.sWidth}}</div>
</div>
<div class="tr">
<div>成品规格</div>
<div>{{list.sConstruction}}</div>
<div>坯布规格</div>
<div>{{list.sRawConstruction}}</div>
</div>
<div class="tr">
<div>密度</div>
<div>{{list.sNeedleCount}}</div>
<div>成份</div>
<div>{{list.sComponent}}</div>
</div>
</div>
</div>
<div class="basicInfo">
<div class="head">附加信息</div>
<div class="content">
<div class="tr">
<div>坯布单价</div>
<div>{{list.nRawPrice}}</div>
<div>大货价</div>
<div>{{list.nPrice}}</div>
</div>
<div class="tr">
<div>成品单价</div>
<div>{{list.sCostPrice}}</div>
<div>样品单价</div>
<div>{{list.nDipSamplPrice}}</div>
</div>
<div class="tr">
<div>加工单价</div>
<div>{{list.nProducePrice}}</div>
<div>标准单价</div>
<div>{{list.nStdPrice}}</div>
</div>
<div class="tr">
<div>参考单价</div>
<div>{{list.sRefPrice}}</div>
<div>最低限价</div>
<div>{{list.nLimitPrice}}</div>
</div>
<div class="tr">
<div>染色缩率</div>
<div>{{list.nWastagePercent}}</div>
<div>利润率</div>
<div>{{list.nProfitPercent}}</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Util from '@/libs/util.js'
import customerTable from '@/components/Table'
import { mapState } from 'vuex'
export default {
name: 'searchOrderMaterialDetail',
data () {
return {
host:'https://weixin.huansi.net/apiproxy/huansi/service/proxy/',
// host:'http://192.168.4.40:5001',
list:{},
}
},
async mounted(){
window.d = this;
},
async activated(){
this.clean();
await this.getMaterial();
},
computed:{
...mapState({
dtl:state => state.searchOrder.dtl,
userId:state => state.app.userId
})
},
methods:{
async getMaterial(){
let res = await this.apiGet(`${this.host}${this.userId}/fabricorder/material/`,{
sSampleMaterialNo:this.dtl.sSampleMaterialNo
},'加载中');
if(res.hasOwnProperty('error_data')){
this.$vux.confirm.show({
title:"提示",
content:res.error_title,
showCancelButton:false,
})
return false;
}
if(res.length > 0) this.list = res[0];
},
clean(){
this.list = {};
}
},
components:{
customerTable,
},
}
</script>
src/view/tiip/searchOrder/track.vue 0 → 100644
View file @ 9d9cb833
<style lang="less" >
#searchOrderTrack{
height:100%;
background:white;
display:flex;
flex-direction:column;
.scrollContainer1{
flex-grow: 1;
height:1px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
// padding-bottom: 42px;
}
.scrollContainer2{
height:100%;
}
.basic{
padding:0 20px;
.Title{
height:40px;
display: flex;
align-items: center;
}
.items{
position: relative;
margin-bottom:10px;
}
.items:before{
content:"";
position: absolute;
left:-10px;
border:2px solid #5cadff;
height:100%;
}
.content{
display: flex;
line-height:25px;
>div>span:first-child{
color:#aaa;
display: inline-block;
width:70px;
}
>div:nth-child(odd){
flex:1;
text-align: left;
}
>div:nth-child(even){
width:40%;
text-align: right;
}
}
}
.line{
flex:1;
border:0.5px solid #bbb;
margin-left:15px;
}
.Table{
margin-top:10px;
}
.btns{
position: fixed;
bottom:0;
width:100%;
}
}
</style>
<template>
<div id="searchOrderTrack">
<div class="basic">
<div class="Title">
<span>基本信息</span>
<div class="line"></div>
</div>
<div>
<div class="content">
<div><span>订单号：</span>{{hdr.sOrderNo}}</div>
<div>{{hdr.dReceivedDate}}</div>
</div>
<div class="content">
<div><span>客户：</span>{{hdr.sCustomerName}}</div>
</div>
<div class="content">
<div><span>产品：</span><span @click="routerToMaterialDetail" style="color:#5cadff;text-decoration:underline;">{{hdr.sSampleMaterialName}}，{{hdr.sSampleMaterialNo}}</span></div>
</div>
<div class="content">
<div><span>总数量：</span><span style="color:#5cadff;">{{nAllQty}}</span></div>
<div><span>总金额：</span><span style="color:#5cadff;">{{nAllAmount}}</span></div>
</div>
</div>
</div>
<div class="Table">
<customerTable :columns="columns" :list="dtl" :tableStyle="tableStyle"></customerTable>
</div>
<div class="scrollContainer2">
<div class="basic" v-for="(v1,i1) in orderallmes" :key="i1" style="font-size:12px;">
<div class="Title">
<span>{{v1.sType}}</span>
<div class="line"></div>
</div>
<div class="items" v-for="(v2,i2) in v1.child" :key="i2">
<div class="content">
<div><span>{{v1.sType.substr(0,2)}}单号：</span>{{v2.sBillNo}}</div>
<div>{{v2.dDate}}</div>
</div>
<div class="content">
<div><span>{{v1.sCheckItemName}}：</span>{{v2.sCheckItem}}</div>
</div>
<div class="content">
<div><span>产品：</span>{{v2.sMaterialNameSample}}</div>
</div>
<div class="content" v-for="(v3,i3) in v2.child" :key="i3" style="display:block;">
<div style="display:flex;lin-height:25px;">
<div style="display:flex;max-width:40%;width:40%;min-height:40%;flex:none;">
<span style="min-width:70px;display:inline-flex;align-items:center;">颜色：</span>
<div style="display:flex;flex-wrap:wrap;">
<div style="width:100%;display:flex;align-items:center;">{{v3.sColorNo}}</div>
<!-- <div style="width:100%;">色号</div> -->
</div>
</div>
<div style="max-width:30%;width:30%;min-height:30%;flex:none;display: flex;align-items: center;justify-content: flex-start;word-break:break-word;">
<span style="width:50px;min-width:50px;min-width:50px;">数量：</span>
<span style="color:#5cadff;text-align:left;">{{v3.nQty || 0}}{{v3.sUnit}}</span>
</div>
<div style="max-width:30%;width:30%;min-height:30%;flex:none;display: flex;align-items: center;justify-content: flex-end;">
<span style="width:50px;min-width:50px;min-width:50px;">金额：</span>
<span style="color:#5cadff;width:40%;max-with:40%;min-height:40%;word-break:break-word;text-align:left;">{{v3.nAmount || 0}}</span>
</div>
</div>
<div style="width:100%;text-align:left;display:flex;color:#FF8247;" v-if="!v2.isAll">
<span style="color:#FF8247;">摘要：</span>
<div style="flex:1;word-wrap: break-word;">{{v3.sRemark}}</div>
</div>
</div>
<div class="content" v-if="v2.isAll" style="line-height:normal;">
<div style="display:flex;color:#FF8247;">
<span style="color:#FF8247;">摘要：</span>
<div style="flex:1;word-wrap: break-word;">{{v2.sRemark}}</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="btns">
<x-button :gradients="['#1D62F0', '#19D5FD']" @click.native="share">转发</x-button>
</div>
<div id="photo">
<img class="imgDownload" :src="url" style="width:100%;">
</div> -->
</div>
</template>
<script>
import Util from '@/libs/util.js'
import customerTable from '@/components/Table'
import { mapState } from 'vuex'
import { XButton } from 'vux'
export default {
name: 'searchOrderTrack',
data () {
return {
host:'https://weixin.huansi.net/apiproxy/huansi/service/proxy/',
// host:'http://192.168.4.40:5001',
columns:[
{
width:'20vw',
name:'颜色',
align:'center',
field:'sColorName',
fixed:true
},
{
width:'15vw',
name:'单价',
align:'center',
field:'nPrice',
},
{
width:'15vw',
name:'数量',
align:'center',
field:'nQty'
},
{
width:'15vw',
name:'金额',
align:'center',
field:'nAmount'
},
{
width:'35vw',
name:'摘要',
align:'center',
field:'sRemark'
}
],
tableStyle:{
theadBgColor:'rgba(176,226,255,0.3)',
complexTrBgColor:'white',
singleTrBgColor:'#eef4fe',
theadTdBorder:false,
tbodyTdBorder:false,
tbodyHeight:'auto',
tbodyTrBorderBottom:'0.5px solid #5cadff'
},
dtl:[],
nAllQty:0,
nAllAmount:0,
orderallmes:[],
url:"",
direction:''
}
},
async mounted(){
window.d = this;
},
async activated(){
// window.removeEventListener("resize", this.renderResize, false)
// window.addEventListener("resize", this.renderResize, false)
this.clean();
await this.getDetail();
await this.getOrderallmes();
},
computed:{
...mapState({
hdr:state => state.searchOrder.hdr,
userId:state => state.app.userId
})
},
methods:{
renderResize() {
// 判断横竖屏
let width = document.documentElement.clientWidth
let height = document.documentElement.clientHeight
if(width > height) {
this.direction = 'cross'
}else{
this.direction = 'vertical';
}
// 做页面适配
// 注意：renderResize方法执行时虚拟dom尚未渲染挂载，如果要操作vue实例，最好在this.$nextTick()里进行。
},
routerToMaterialDetail(){
this.$store.dispatch('searchOrderSaveDtl',this.hdr);
this.$router.push({name:'searchOrderMaterialDetail'})
// this.$store.dispatch('searchOrderSaveHdr',this.hdr);
// this.$router.push({name:'searchOrderDetail'})
},
async getDetail(){
let res = await this.apiGet(`${this.host}${this.userId}/fabricorder/dtl/`,{
uGUID:this.hdr.uGUID
},true);
if(res.hasOwnProperty('error_data')){
this.$vux.confirm.show({
title:"提示",
content:res.error_title,
showCancelButton:false,
})
return false;
}
if(res.length > 0){
this.dtl = res[0].child;
this.nAllAmount = res[0].nAllAmount;
this.nAllQty = res[0].nAllQty;
}
},
async getOrderallmes(){
let res = await this.apiGet(`${this.host}${this.userId}/fabricorder/orderallmes/`,{
sOrderNo:this.hdr.sOrderNo
},true);
if(res.hasOwnProperty('error_data')){
this.$vux.confirm.show({
title:"提示",
content:res.error_title,
showCancelButton:false,
})
return false;
}
if(res.length > 0){
this.orderallmes = res;
for(let x of this.orderallmes){
x.child = x.child.filter(x=>x.sBillNo)
}
this.orderallmes = this.orderallmes.filter(x=>x.child.length > 0);
this.orderallmes.map((x,i1)=>{
x.child.map((y,i2)=>{
let arr = Array.from(new Set((y.child.map(z=>z.sRemark))))
if(arr.length > 1){
y.isAll = false;
}else{
y.sRemark = arr.join('');
y.isAll = true;
}
})
})
}
},
clean(){
this.orderallmes = [];
this.dtl = [];
this.nAllAmount = 0;
this.nAllQty = 0;
},
share(){
// wx.miniProgram.postMessage({ data: { imgBase64: imageUrl } })
　　　　　　　var shareContent = document.getElementById("searchOrderTrack");
var that = this;
html2canvas( shareContent,{
onrendered: function(canvas){
var img = new Image();
img.src = canvas.toDataURL();
var url = img.src.replace('data:image/png;base64,','');
wx.miniProgram.postMessage({ data: { imgBase64: url } })
// var triggerEvent = "touchstart";
// var blob=new Blob([''], {type:'application/octet-stream'});
// var url = URL.createObjectURL(blob);
// return false;
// var a = document.createElement('a');
// a.href = img.src;
// a.download = img.src.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];
// var e = document.createEvent('MouseEvents');
// e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
// a.dispatchEvent(e);
// URL.revokeObjectURL(url);
// document.getElementById("photo").appendChild(img);
}
})
},
},
components:{
customerTable,
XButton
},
}
</script>
src/view/tiip/specimen/index.vue 0 → 100644
View file @ 9d9cb833
<style lang="less" >
.slide-fade-enter-active {
transition: opacity .5s ease;
}
.slide-fade-leave-active {
transition: opacity .5s ease;
}
.slide-fade-enter, .slide-fade-leave-active {
opacity: 0;
}
h1, h2 {
margin: 0;
padding: 0;
}
img {
display: block;
max-width: 100%;
}
#imageView .imageBox li img{
height:auto !important;
}
#imageView .imageBox li{
display:flex;
align-items:center;
justify-content:center;
}
#specimen{
height:100%;
background: white;
h3{
height:40px;
line-height:40px;
text-align: center;
background:white;
}
.header{
.hdrImg{
width:100%;
height:200px;
display: flex;
justify-content: center;
align-items: center;
background: #eef4fe;
// position: relative;
}
img{
height:200px;
width:100%;
}
// img:after {
// content: "";
// display: inline-block;
// position: absolute;
// z-index: 2;
// top: 0;
// left: calc(50% - 100px);
// width: 200px;
// height: 200px;
// background: url("../../assets/imgErr.png") no-repeat;
// background-position: center;
// background-size: contain;
// background-color: #fff;
// }
}
.info{
.content{
display:flex;
background:white;
padding:16px;
>div{
flex:1
}
}
}
.detail{
background: white;
border-top:1px solid #eef4fe;
.img{
// position: relative;
display: flex;
justify-content: center;
align-items: center;
img{
width: 100%;
max-height:50px;
}
}
// img:after {
// content: "";
// display: inline-block;
// position: absolute;
// z-index: 2;
// top: 0;
// left: 0;
// width: 100%;
// height: 50px;
// background: url("../../assets/imgErr.png") no-repeat;
// background-position: center;
// background-size: contain;
// background-color: #fff;
// }
}
}
</style>
<template>
<div id="specimen" :style="(showHdr || showDtl) ? 'height:100vh;overflow:hidden;' : ''">
<div class="header">
<transition name="slide-fade" class="fadeView">
<!-- <div v-if="showHdr">
<image-view :imgArr="hdr_src"
:showImageView="true"
:imageIndex="imageHdrIndex"
v-on:hideImage="hideImageView('hdr')"></image-view>
</div> -->
<div v-if="showDtl">
<image-view :imgArr="dtl_src"
:showImageView="true"
:imageIndex="imageDtlIndex"
v-on:hideImage="hideImageView('dtl')"></image-view>
</div>
</transition>
<!-- <div class="hdrImg">
<img v-for="(item, index) in [hdr]" v-if="!hdr.isErr" @error="error(item,index,'hdr')" :src="item" @click="selectImg('hdr',index)" :key="index"/>
<img v-else src="../../../assets/imgErr.png"/>
</div> -->
<div class="info">
<h3>参数</h3>
<div class="content">
<div class="left">
<p>产品编号：{{hdr.sSampleMaterialNo}}</p>
<p>产品名称：{{hdr.sSampleMaterialName}}</p>
<p>规格：{{hdr.sConstruction}}</p>
<p>成分：{{hdr.sComponent}}</p>
</div>
<div class="right">
<p>幅宽：{{hdr.sWidth}}</p>
<p>克重：{{hdr.sGMWT}}</p>
</div>
</div>
</div>
</div>
<div class="detail">
<h3>颜色明细</h3>
<div class="detailImg">
<v-container grid-list-md text-xs-center>
<v-layout row wrap>
<v-flex xs3 v-for="(item, index) in dtl_src" :key="index">
<div class="img">
<img :src="item" @error="error(item,index,'dtl')" v-if="!dtl[index].isErr" @click="selectImg('dtl',index)" />
<img v-else src="../../../assets/imgErr.png"/>
</div>
<div style="border:1px solid #ddd;border-top:0;height:20px;font-size:12px;">
{{dtl[index].sColorNo}}
</div>
</v-flex>
</v-layout>
</v-container>
</div>
</div>
</div>
</template>
<script>
import imageView from 'vue-imageview'
import Util from '@/libs/util.js'
export default {
name: 'specimen',
data () {
return {
showHdr:false,
showDtl:false,
imageHdrIndex:0,
imageDtlIndex:0,
hdr_src:[],
dtl_src:[],
sMaterialNo:'',
hdr:{},
dtl:[],
uGuid:'',
host:'https://weixin.huansi.net/apiproxy/huansi/service/proxy/'
}
},
async mounted(){
this.$route.params.uGuid.split('.').map((x,y) => {
this.uGuid += String.fromCharCode(x)
})
window.data = this;
await this.getList();
},
components:{
'image-view': imageView
},
methods:{
error(item,index,type){
if(type == 'hdr'){
this.$set(this.hdr,'isErr',true)
}else{
this.$set(this.dtl[index],'isErr',true)
}
},
async getList(){
this.apiGet(`${this.host}${this.$route.params.userId}/goods/onesample/${this.uGuid}/`,{},true).then(res=>{
if(res.hasOwnProperty('error_data')){
return false;
}
this.hdr = res.header;
this.dtl = res.childs;
res.childs.map(v=>{
this.dtl_src.push(`${this.host}${this.$route.params.userId}/goods/image_click/?uGuid=${v.uPictureGuid}&iType=2&random=${Math.random()}`)
})
})
},
showImgView (type) {
if(type == 'hdr'){
this.showHdr = true;
}else{
this.showDtl = true;
}
},
hideImageView (type) {
if(type == 'hdr'){
this.showHdr = false;
}else{
this.showDtl = false;
}
},
selectImg (type,index) {
if(type == 'hdr'){
this.showHdr = true;
this.imageHdrIndex = index;
}else{
this.showDtl = true;
this.imageDtlIndex = index;
}
},
}
}
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment