screenModule.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  1. <template>
  2. <view>
  3. <!-- 顶部筛选条件 -->
  4. <u-dropdown ref="uDropdown" class="uDropdown">
  5. <u-dropdown-item v-model="searchForm.inspectorId" :title="isAll" @change="dropdownChange" :options="screenClass"></u-dropdown-item>
  6. <u-dropdown-item title="检查方式" class="screen-dropdown" @change="typeChange" @close="closeDropdownItem">
  7. <view class="slot-content">
  8. <scroll-view class="scroll-view" scroll-y="true">
  9. <view class="screen-module">
  10. <view :class="['status-item', item.checked ? 'active' : '']" v-for="item in sourceTypeList" :key="item.id" @click="chooseSourceType(item)">
  11. {{ item.dispName }}
  12. </view>
  13. </view>
  14. </scroll-view>
  15. <u-button type="primary" @click="closeTypeDropdown">确定</u-button>
  16. </view>
  17. </u-dropdown-item>
  18. <u-dropdown-item v-model="searchForm.status" title="状态" :options="screenState" @change="dropdownChange"></u-dropdown-item>
  19. <u-dropdown-item title="筛选" class="screen-dropdown" @close="closeDropdownItem">
  20. <view class="slot-content">
  21. <scroll-view class="scroll-view" scroll-y="true">
  22. <view class="screen-module">
  23. <text class="screen-tit">时间区间:</text>
  24. <view class="screen-time-val">
  25. <text @click="onShowDatePicker('range')">{{ range.length == 0 ? '请选择' : range[0] + '~' + range[1] }}</text>
  26. <u-icon v-show="range.length != 0" name="close-circle-fill" color="#c8c0cc" size="32" class="close-circle" @click="range=[]"></u-icon>
  27. </view>
  28. </view>
  29. <view class="screen-module">
  30. <text class="screen-tit">门店:</text>
  31. <view class="screen-inp-val">
  32. <u-input class="screen-inp" v-model="searchForm.storeName" :height="52" placeholder="请输入" type="text" :border="true" />
  33. </view>
  34. </view>
  35. <view class="screen-module">
  36. <text class="screen-tit">巡店人:</text>
  37. <view class="screen-inp-val">
  38. <u-input class="screen-inp" v-model="searchForm.shopInspector" :height="52" placeholder="请输入" type="text" :border="true" />
  39. </view>
  40. </view>
  41. </scroll-view>
  42. <u-button type="primary" @click="closeDropdown">确定</u-button>
  43. </view>
  44. </u-dropdown-item>
  45. </u-dropdown>
  46. <!-- 选择时间区间 -->
  47. <w-picker
  48. :visible.sync="showPicker"
  49. mode="range"
  50. startYear="2017"
  51. endYear="2030"
  52. :value="searchForm.creatTime"
  53. :current="false"
  54. @confirm="onSelected($event,'range')"
  55. @cancel="onSelected"
  56. ref="range"></w-picker>
  57. </view>
  58. </template>
  59. <script>
  60. import wPicker from '@/components/w-picker/w-picker.vue'
  61. import { getLookUpDatas } from '@/api/data.js'
  62. export default{
  63. components: { wPicker },
  64. props: {
  65. defaultParams: {
  66. type: Object,
  67. default: () => {
  68. return {}
  69. }
  70. }
  71. },
  72. data(){
  73. return{
  74. searchForm: this.defaultParams, // 筛选条件
  75. screenClass: [ // 过滤条件 类型
  76. { label: '全部', value: '', },
  77. { label: '我的巡店', value: 2 }
  78. ],
  79. screenMethod: [], // 过滤条件 检查方式
  80. screenState: [], // 过滤条件 状态
  81. showPicker: false, // 是否选择创建时间
  82. range: [], // 筛选创建时间的默认值
  83. sourceTypeList: [], // 检查方式列表
  84. }
  85. },
  86. computed: {
  87. isAll(){
  88. let str = this.searchForm.inspectorId ? '我的巡店' : '全部'
  89. return str
  90. },
  91. // 检查方式
  92. sourceType() {
  93. return this.filterData(this.sourceTypeList)
  94. }
  95. },
  96. mounted() {
  97. this.getLookUpData('TASK_TYPE') // 获取检查方式
  98. this.getLookUpData('TASK_STATUS') // 获取状态
  99. this.init()
  100. },
  101. methods: {
  102. // 初始化
  103. init(){
  104. this.searchForm.creatTime = this.defaultParams.creatTime ? this.defaultParams.creatTime : []
  105. this.range = this.searchForm.creatTime
  106. this.searchForm.storeName = this.defaultParams.storeName ? this.defaultParams.storeName : ''
  107. this.defaultSourceType()
  108. },
  109. // 巡店人、状态 筛选条件 change
  110. dropdownChange(val){
  111. this.$emit('refresh', this.searchForm)
  112. },
  113. // 检查方式 筛选条件
  114. closeTypeDropdown(){
  115. this.searchForm.typeList = this.sourceType
  116. this.$emit('refresh', this.searchForm)
  117. this.$refs.uDropdown.close()
  118. },
  119. // 筛选 筛选条件
  120. closeDropdown(){
  121. this.$emit('refresh', this.searchForm)
  122. this.$refs.uDropdown.close()
  123. },
  124. // 默认检查方式
  125. defaultSourceType(){
  126. if(this.defaultParams.typeList){
  127. setTimeout(()=>{
  128. this.sourceTypeList.map(item => {
  129. if(this.defaultParams.typeList.indexOf(item.code) != -1){
  130. item.checked = true
  131. }else{
  132. item.checked = false
  133. }
  134. })
  135. },0)
  136. }
  137. },
  138. // 关闭
  139. closeDropdownItem(){
  140. },
  141. // 获取数据字典数据
  142. getLookUpData(code) {
  143. getLookUpDatas({ type: code }).then(res => {
  144. if (res.status == 200) {
  145. res.data.map(item => {
  146. item.label = item.dispName
  147. item.value = item.code
  148. item.checked = false
  149. })
  150. if (code == 'TASK_TYPE') { // 检查方式
  151. this.sourceTypeList = res.data
  152. }else if(code == 'TASK_STATUS'){ // 状态
  153. res.data.unshift({label: '全部', value: ''})
  154. this.screenState = res.data
  155. }
  156. }
  157. });
  158. },
  159. // 选择检查方式
  160. chooseSourceType(item) {
  161. item.checked = !item.checked
  162. },
  163. // 过滤已选数据
  164. filterData(data) {
  165. let arr = []
  166. data.map(item => {
  167. if (item.checked) {
  168. arr.push(item.code)
  169. }
  170. });
  171. return arr
  172. },
  173. // 显示日期选择
  174. onShowDatePicker(type){
  175. this.showPicker = true
  176. },
  177. // 日期选择
  178. onSelected(e) {
  179. this.showPicker = false
  180. if(e) {
  181. this.range = e.value
  182. this.searchForm.creatTime = this.range
  183. }
  184. },
  185. }
  186. }
  187. </script>
  188. <style lang="scss">
  189. // 筛选条件
  190. .uDropdown{
  191. background-color: #fff;
  192. .screen-dropdown{
  193. .slot-content{
  194. background-color: #fff;
  195. .scroll-view{
  196. height: 300upx;
  197. .screen-module{
  198. margin: 20upx 30upx 20upx;
  199. display: flex;
  200. align-items: center;
  201. .screen-tit{
  202. color: #464646;
  203. font-size: 26upx;
  204. width: 140upx;
  205. flex-shrink: 0;
  206. }
  207. .screen-time-val{
  208. flex-grow: 1;
  209. font-size: 26upx;
  210. background-color: #f4f4f4;
  211. border-radius: 12upx;
  212. padding: 10upx 14upx;
  213. margin: 10upx 0;
  214. text-align: center;
  215. text{
  216. display: inline-block;
  217. width: 85%;
  218. }
  219. .close-circle{
  220. display: inline-block;
  221. padding-left: 3%;
  222. vertical-align: bottom;
  223. }
  224. }
  225. .screen-inp-val{
  226. flex-grow: 1;
  227. .screen-inp{
  228. color: #464646;
  229. font-size: 26upx;
  230. }
  231. }
  232. }
  233. .status-item {
  234. display: inline-block;
  235. width: 30%;
  236. text-align: center;
  237. line-height: 60upx;
  238. background-color: #e2e2e2;
  239. color: #333;
  240. font-size: 24upx;
  241. margin: 0 10upx;
  242. }
  243. .active {
  244. background-color: #ffaa00;
  245. color: #fff;
  246. }
  247. }
  248. }
  249. }
  250. }
  251. </style>