screenModule.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
  1. <template>
  2. <view class="uDropdown-wrap">
  3. <!-- 顶部筛选条件 -->
  4. <u-dropdown ref="uDropdown" :active-color="$config('primaryColors')" class="uDropdown" @close="closeDropdownItem">
  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">
  7. <view class="slot-content">
  8. <scroll-view class="scroll-view" style="height: 180upx;" 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 style="border-radius: 0;" :style="{background: $config('buttonColors')}" 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">
  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="moreScreen.storeName" :height="56" 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="moreScreen.userName" :height="56" placeholder="请输入巡店人名字" type="text" :border="true" />
  39. </view>
  40. </view>
  41. </scroll-view>
  42. <u-button style="border-radius: 0;" :style="{background: $config('buttonColors')}" 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: 1 }
  78. ],
  79. screenMethod: [], // 过滤条件 检查方式
  80. screenState: [], // 过滤条件 状态
  81. showPicker: false, // 是否选择创建时间
  82. range: [], // 筛选创建时间的默认值
  83. sourceTypeList: [], // 检查方式数据列表
  84. moreScreen: { // 数据暂存
  85. storeName: '', // 门店
  86. userName: '' // 巡店人
  87. }
  88. }
  89. },
  90. computed: {
  91. isAll(){
  92. let str = this.searchForm.inspectorId ? '我的巡店' : '全部'
  93. return str
  94. },
  95. // 检查方式
  96. sourceType() {
  97. return this.filterData(this.sourceTypeList)
  98. }
  99. },
  100. mounted() {
  101. this.getLookUpData('TASK_TYPE') // 获取检查方式
  102. this.getLookUpData('TASK_STATUS') // 获取状态
  103. this.init()
  104. },
  105. methods: {
  106. // 初始化
  107. init(){
  108. this.searchForm.creatTime = this.defaultParams.creatTime ? this.defaultParams.creatTime : []
  109. this.range = this.searchForm.creatTime
  110. this.searchForm.storeName = this.defaultParams.storeName ? this.defaultParams.storeName : ''
  111. this.searchForm.userName = this.defaultParams.userName ? this.defaultParams.userName : ''
  112. this.moreScreen.storeName = this.searchForm.storeName
  113. this.moreScreen.userName = this.searchForm.userName
  114. this.defaultSourceType()
  115. },
  116. // 巡店人、状态 筛选条件 change
  117. dropdownChange(val){
  118. this.$emit('refresh', this.searchForm)
  119. },
  120. // 检查方式 筛选条件
  121. closeTypeDropdown(){
  122. this.searchForm.typeList = this.sourceType
  123. this.$emit('refresh', this.searchForm)
  124. this.$refs.uDropdown.close()
  125. },
  126. // 筛选 筛选条件
  127. closeDropdown(){
  128. this.searchForm.creatTime = this.range
  129. this.searchForm.storeName = this.moreScreen.storeName
  130. this.searchForm.userName = this.moreScreen.userName
  131. this.$emit('refresh', this.searchForm)
  132. this.$refs.uDropdown.close()
  133. },
  134. // 默认检查方式
  135. defaultSourceType(){
  136. if(this.defaultParams.typeList){
  137. setTimeout(()=>{
  138. this.sourceTypeList.map(item => {
  139. if(this.defaultParams.typeList.indexOf(item.code) != -1){
  140. item.checked = true
  141. }else{
  142. item.checked = false
  143. }
  144. })
  145. },0)
  146. }
  147. },
  148. // 关闭
  149. closeDropdownItem(ind){
  150. if(ind == 1){ // 检查方式
  151. this.defaultSourceType()
  152. }else if(ind == 3){ // 多条件筛选
  153. this.moreScreen.storeName = this.searchForm.storeName
  154. this.moreScreen.userName = this.searchForm.userName
  155. this.range = this.searchForm.creatTime
  156. }
  157. },
  158. // 获取数据字典数据
  159. getLookUpData(code) {
  160. getLookUpDatas({ type: code }).then(res => {
  161. if (res.status == 200) {
  162. res.data.map(item => {
  163. item.label = item.dispName
  164. item.value = item.code
  165. item.checked = false
  166. })
  167. if (code == 'TASK_TYPE') { // 检查方式
  168. this.sourceTypeList = res.data
  169. }else if(code == 'TASK_STATUS'){ // 状态
  170. res.data.unshift({label: '全部', value: ''})
  171. this.screenState = res.data
  172. }
  173. }
  174. });
  175. },
  176. // 选择检查方式
  177. chooseSourceType(item) {
  178. item.checked = !item.checked
  179. },
  180. // 过滤已选数据
  181. filterData(data) {
  182. let arr = []
  183. data.map(item => {
  184. if (item.checked) {
  185. arr.push(item.code)
  186. }
  187. })
  188. return arr
  189. },
  190. // 显示日期选择
  191. onShowDatePicker(type){
  192. this.showPicker = true
  193. },
  194. // 日期选择
  195. onSelected(e) {
  196. this.showPicker = false
  197. if(e) {
  198. this.range = e.value
  199. }
  200. },
  201. }
  202. }
  203. </script>
  204. <style lang="scss">
  205. .uDropdown-wrap{
  206. height: 100%;
  207. border-bottom: 1px solid #EEEEEE;
  208. box-shadow: 1px 1px 3px #eeeeee;
  209. // 筛选条件
  210. .uDropdown{
  211. background-color: #fff;
  212. .screen-dropdown{
  213. .slot-content{
  214. background-color: #fff;
  215. .scroll-view{
  216. height: 320upx;
  217. padding: 20upx 0;
  218. box-sizing: border-box;
  219. .screen-module{
  220. margin: 0 30upx;
  221. padding: 14upx 0;
  222. display: flex;
  223. align-items: center;
  224. .screen-tit{
  225. color: #464646;
  226. font-size: 26upx;
  227. width: 140upx;
  228. flex-shrink: 0;
  229. }
  230. .screen-time-val{
  231. flex-grow: 1;
  232. font-size: 26upx;
  233. background-color: #f4f4f4;
  234. border-radius: 12upx;
  235. padding: 16upx 10upx;
  236. text-align: center;
  237. text{
  238. display: inline-block;
  239. width: 85%;
  240. }
  241. .close-circle{
  242. display: inline-block;
  243. padding-left: 3%;
  244. vertical-align: bottom;
  245. }
  246. }
  247. .screen-inp-val{
  248. flex-grow: 1;
  249. .screen-inp{
  250. color: #464646;
  251. font-size: 26upx;
  252. }
  253. }
  254. }
  255. .status-item {
  256. display: inline-block;
  257. width: 30%;
  258. text-align: center;
  259. line-height: 60upx;
  260. background-color: #F8F8F8;
  261. color: #333;
  262. border-radius: 6upx;
  263. font-size: 24upx;
  264. margin: 0 10upx;
  265. }
  266. .active {
  267. background-color: #ffaa00;
  268. color: #fff;
  269. }
  270. }
  271. }
  272. }
  273. }
  274. }
  275. </style>