inputDIalog.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. <template>
  2. <div class='input-dialog'>
  3. <div
  4. @click='show'
  5. style='color: #1F2429;cursor: pointer;position:absolute;z-index:9999;'
  6. :style='`right:${type === 1 ? "30px" : "12px"};top:${type === 1 ? "77px" : "0px"};`'
  7. >
  8. <img style='margin-right:4px;' src='@/assets/imgs/select.png' />
  9. <span>筛选</span>
  10. </div>
  11. <div
  12. v-if='dialogFormVisible'
  13. style='width:280px;height:250px;background:rgba(255,255,255,1);margin-top:40px;
  14. box-shadow:0px 2px 10px 0px rgba(31,35,41,0.1);border:1px solid rgba(228,229,231,1);z-index:10000;
  15. position:absolute;'
  16. :style='`right:${type === 1 ? "40px" : "0"};height:${type === 6 || type === 5? "420px":"250px"}`'
  17. >
  18. <el-form style=' padding:20px 24px;' v-if='type==1'>
  19. <p style='margin:0 0 8px 0'>生产厂商</p>
  20. <el-input
  21. placeholder='搜索生产厂商'
  22. style='width:232px;margin-right:12px'
  23. size='small'
  24. clearable
  25. prefix-icon='el-icon-search'
  26. v-model='inputForm.manufacturer'
  27. ></el-input>
  28. <p style='margin:16px 0 8px 0'>服务商</p>
  29. <el-input
  30. placeholder='搜索服务商'
  31. clearable
  32. style='width:232px;margin-right:12px'
  33. size='small'
  34. prefix-icon='el-icon-search'
  35. v-model='inputForm.fws'
  36. ></el-input>
  37. </el-form>
  38. <el-form style=' padding: 20px 24px;' v-if='type==2'>
  39. <p style='margin:0 0 8px 0'>任务编号</p>
  40. <el-input placeholder='搜索任务编号' clearable size='small' prefix-icon='el-icon-search' v-model='inputForm.gzglid' style='width:232px;'></el-input>
  41. </el-form>
  42. <el-form style=' padding: 20px 24px;' v-if='type==3'>
  43. <p style='margin:0 0 8px 0'>工单编号</p>
  44. <el-input placeholder='搜索工单编号' clearable size='small' prefix-icon='el-icon-search' v-model='inputForm.wonum' style='width:232px;'></el-input>
  45. </el-form>
  46. <el-form style=' padding: 20px 24px;' v-if='type==4'>
  47. <p style='margin:0 0 8px 0'>验收结果</p>
  48. <el-select v-model='inputForm.status' placeholder='请选择' size='small' style='width:232px'>
  49. <el-option v-for='item in statusOption' :key='item.id' :label='item.name' :value='item.id'></el-option>
  50. </el-select>
  51. <p style='margin:16px 0 8px 0'>验收日期</p>
  52. <el-date-picker
  53. clearable
  54. style='width:232px'
  55. v-model='inputForm.yssjwcsj'
  56. value-format='yyyyMMdd'
  57. type='daterange'
  58. size='small'
  59. range-separator='-'
  60. start-placeholder
  61. end-placeholder
  62. ></el-date-picker>
  63. </el-form>
  64. <el-form style=' padding: 20px 24px;' v-if='type==5'>
  65. <p style='margin:16px 0 8px 0'>要求完成日期</p>
  66. <el-date-picker
  67. clearable
  68. style='width:232px'
  69. v-model='inputForm.reportdate'
  70. value-format='yyyyMMdd'
  71. type='daterange'
  72. size='small'
  73. range-separator='-'
  74. start-placeholder
  75. end-placeholder
  76. ></el-date-picker>
  77. <p style='margin:16px 0 8px 0'>实际完工日期</p>
  78. <el-date-picker
  79. clearable
  80. style='width:232px'
  81. v-model='inputForm.real'
  82. value-format='yyyyMMdd'
  83. type='daterange'
  84. size='small'
  85. range-separator='-'
  86. start-placeholder
  87. end-placeholder
  88. ></el-date-picker>
  89. <p style='margin:16px 0 8px 0'>位置名称编号</p>
  90. <el-input
  91. placeholder='搜索位置名称编号'
  92. size='small'
  93. clearable
  94. prefix-icon='el-icon-search'
  95. v-model='inputForm.locationName'
  96. style='width:232px;margin-right:12px'
  97. ></el-input>
  98. <!-- 日常维保,执行搜索人放入筛选 -->
  99. <p style='margin:16px 0 8px 0'>搜索执行人</p>
  100. <el-input
  101. placeholder='搜索执行人'
  102. size='small'
  103. clearable
  104. prefix-icon='el-icon-search'
  105. v-model='inputForm.people'
  106. style='width:232px;margin-right:12px'
  107. ></el-input>
  108. </el-form>
  109. <el-form style=' padding: 20px 24px;' v-if='type==6'>
  110. <p style='margin:16px 0 8px 0'>任务完成日期</p>
  111. <el-date-picker
  112. clearable
  113. style='width:232px'
  114. v-model='inputForm.complete'
  115. value-format='yyyyMMdd'
  116. type='daterange'
  117. size='small'
  118. range-separator='-'
  119. start-placeholder
  120. end-placeholder
  121. ></el-date-picker>
  122. <p style='margin:16px 0 8px 0'>异常工单编号</p>
  123. <p>
  124. <el-input clearable placeholder='异常工单编号' size='small' prefix-icon='el-icon-search' v-model='inputForm.bill' style='width:232px;'></el-input>
  125. </p>
  126. <p style='margin:16px 0 8px 0'>异常工单填报日期</p>
  127. <el-date-picker
  128. clearable
  129. value-format='yyyyMMdd'
  130. type='daterange'
  131. size='small'
  132. v-model='inputForm.ycgdtbsj'
  133. style='width:232px'
  134. range-separator='-'
  135. start-placeholder
  136. end-placeholder
  137. ></el-date-picker>
  138. <p style='margin:16px 0 8px 0'>异常工单验收日期</p>
  139. <el-date-picker
  140. clearable
  141. value-format='yyyyMMdd'
  142. type='daterange'
  143. size='small'
  144. style='width:232px'
  145. range-separator='-'
  146. start-placeholder
  147. end-placeholder
  148. v-model='inputForm.ycgdyssj'
  149. ></el-date-picker>
  150. </el-form>
  151. <div style='position:absolute;bottom:24px;right:24px;z-index:10000'>
  152. <el-button @click='dialogFormVisible = false' size='small'>取 消</el-button>
  153. <el-button type='primary' @click='confirm' size='small'>确 定</el-button>
  154. </div>
  155. </div>
  156. </div>
  157. </template>
  158. <script>
  159. export default {
  160. data() {
  161. return {
  162. dialogFormVisible: false,
  163. form: {},
  164. formLabelWidth: '232px',
  165. inputForm: {
  166. fws: '',
  167. manufacturer: '',
  168. gzglid: '',
  169. wonum: '',
  170. ssfasm: '',
  171. status: '1',
  172. yssjwcsj: '',
  173. //6
  174. complete: '',
  175. bill: '',
  176. ycgdtbsj: '',
  177. ycgdyssj: '',
  178. //5
  179. reportdate: '',
  180. real: '',
  181. locationName: '',
  182. people: '',
  183. },
  184. }
  185. },
  186. props: ['type', 'statusOption'],
  187. methods: {
  188. show() {
  189. this.dialogFormVisible = !this.dialogFormVisible
  190. },
  191. confirm() {
  192. if (this.type == 1) {
  193. this.$emit('confirm', this.inputForm.fws, this.inputForm.manufacturer)
  194. } else if (this.type == 2) {
  195. this.$emit('confirm', this.inputForm.gzglid)
  196. } else if (this.type == 3) {
  197. this.$emit('confirm', this.inputForm.wonum)
  198. } else if (this.type == 4) {
  199. this.$emit('confirm', this.inputForm.status, this.inputForm.yssjwcsj)
  200. } else if (this.type == 6) {
  201. this.$emit('confirm', this.inputForm.complete, this.inputForm.bill, this.inputForm.ycgdtbsj, this.inputForm.ycgdyssj)
  202. } else if (this.type == 5) {
  203. this.$emit('confirm', this.inputForm.reportdate, this.inputForm.real, this.inputForm.locationName, this.inputForm.people)
  204. }
  205. this.dialogFormVisible = false
  206. // TODO: 删除清空栏位值
  207. // this.inputForm.status = ''
  208. // this.inputForm.yssjwcsj = ''
  209. // this.inputForm.complete = ''
  210. // this.inputForm.bill = ''
  211. // this.inputForm.ycgdtbsj = ''
  212. // this.inputForm.ycgdyssj = ''
  213. // this.inputForm.reportdate = ''
  214. // this.inputForm.real = ''
  215. // this.inputForm.locationName = ''
  216. },
  217. },
  218. mounted() {},
  219. }
  220. </script>
  221. <style lang="less" scoped>
  222. .input-diadlog {
  223. position: relative;
  224. }
  225. </style>