setData.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <template>
  2. <view class="content">
  3. <view class="tit">
  4. 应收对账单
  5. </view>
  6. <view class="con">
  7. <u-cell-group :border="false">
  8. <u-cell-item title="对账周期默认值">
  9. <u-input slot="right-icon" v-model="billCycle" @click="showModal=true" disabled placeholder="请选择对账周期" placeholder-style="text-align:right" :custom-style="inputStyle"/>
  10. </u-cell-item>
  11. <u-cell-item title="参与对账的销售单业务状态">
  12. <u-input slot="right-icon" v-model="billStatus" @click="showCheckBoxModal=true" disabled placeholder="请选择参与对账的销售单业务状态" placeholder-style="text-align:right" :custom-style="inputStyle"/>
  13. </u-cell-item>
  14. <u-cell-item title="参与对账的销售单来源">
  15. <u-input slot="right-icon" v-model="billCycle" @click="showModal=true" disabled placeholder="请选择参与对账的销售单来源" placeholder-style="text-align:right" :custom-style="inputStyle"/>
  16. </u-cell-item>
  17. <u-cell-item title="铺货销售单是否参与对账">
  18. <u-switch :size="40" :active-color="activeColor" slot="right-icon" v-model="checked"></u-switch>
  19. </u-cell-item>
  20. <u-cell-item title="对账单选择客户默认页签" :border-bottom="false">
  21. <u-input slot="right-icon" v-model="billCycle" @click="showModal=true" disabled placeholder="请选择对账单客户" placeholder-style="text-align:right" :custom-style="inputStyle"/>
  22. </u-cell-item>
  23. </u-cell-group>
  24. </view>
  25. <!-- 类似于picker单选 -->
  26. <redioPicker :showModal="showModal" @chooseItem="chooseCycle" @close="showModal=false" :dataList="cycleList"></redioPicker>
  27. <!-- 类似于picker多选 -->
  28. <checkBoxPicker :showModal="showCheckBoxModal" @chooseCon="chooseStatus" @close="showCheckBoxModal=false" :dataList="statusList"></checkBoxPicker>
  29. </view>
  30. </template>
  31. <script>
  32. import redioPicker from '@/components/customPicker/redioPicker.vue'
  33. import checkBoxPicker from '@/components/customPicker/checkBoxPicker.vue'
  34. export default{
  35. components:{
  36. redioPicker,
  37. checkBoxPicker
  38. },
  39. data(){
  40. return{
  41. showModal:false,
  42. cycleList:[
  43. {id:1,name:'全部'},
  44. {id:2,name:'昨日'},
  45. {id:3,name:'今日'},
  46. {id:4,name:'上周'},
  47. {id:5,name:'本周'},
  48. {id:6,name:'上月'},
  49. {id:7,name:'本月'}
  50. ],
  51. billCycle:'',
  52. checked:false,
  53. inputStyle:{
  54. 'text-align':'right'
  55. },
  56. activeColor:this.$config('primaryColor'),
  57. showCheckBoxModal:false,
  58. statusList:[
  59. {id:1,isChecked:false,name:'待提交'},
  60. {id:1,isChecked:false,name:'待审核'},
  61. {id:1,isChecked:false,name:'待出库'},
  62. {id:1,isChecked:false,name:'已完结'}
  63. ],
  64. billStatus:'',
  65. originList:[
  66. {id:1,isChecked:false,name:'自建'},
  67. {id:1,isChecked:false,name:'下级创建'},
  68. {id:1,isChecked:false,name:'数字货架'}
  69. ],
  70. customlist:[
  71. {id:1,isChecked:false,name:'最近开单用户(月)'},
  72. {id:1,isChecked:false,name:'最近开单用户(日)'},
  73. {id:1,isChecked:false,name:'全部客户'}
  74. ],
  75. }
  76. },
  77. onLoad() {
  78. },
  79. methods:{
  80. chooseCycle(con){
  81. this.billCycle = con.name
  82. },
  83. chooseStatus(arr){
  84. this.billStatus = '已选'+arr.length+'项'
  85. }
  86. }
  87. }
  88. </script>
  89. <style lang="scss" scoped>
  90. .content{
  91. width: 100%;
  92. height: 100vh;
  93. .tit{
  94. padding:30rpx 20rpx 16rpx;
  95. }
  96. .con{
  97. box-sizing: border-box;
  98. width: calc(100% - 40rpx);
  99. margin:0 auto;
  100. border-radius: 30rpx;
  101. overflow: hidden;
  102. .u-cell{
  103. padding:14rpx 26rpx;
  104. color:#333;
  105. /deep/.u-cell_right{
  106. max-width: 40% !important;
  107. }
  108. }
  109. }
  110. }
  111. </style>