inputDIalog.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. <template>
  2. <div class='input-dialog'>
  3. <div
  4. @click='show'
  5. style='color: #c3c7cb;cursor: pointer;position:absolute;right:32px;z-index:9999'
  6. :class='`top:${type === 1 ? "40px" : "0"};`'
  7. >
  8. <img src='@/assets/imgs/select.png' />
  9. 筛选
  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:9999;
  15. position:absolute;right:0px;'
  16. >
  17. <el-form style=' padding:20px 24px;' v-if='type==1'>
  18. <p style='margin:0 0 8px 0'>生产厂商</p>
  19. <el-input
  20. placeholder='搜索生产厂商'
  21. style='width:192px;margin-right:12px'
  22. size='small'
  23. prefix-icon='el-icon-search'
  24. v-model='inputForm.manufacturer'
  25. ></el-input>
  26. <p style='margin:16px 0 8px 0'>服务商</p>
  27. <el-input placeholder='搜索服务商' style='width:192px;margin-right:12px' size='small' prefix-icon='el-icon-search' v-model='inputForm.fws'></el-input>
  28. </el-form>
  29. <el-form style=' padding: 20px 24px;' v-if='type==2'>
  30. <p style='margin:0 0 8px 0'>任务编号</p>
  31. <el-input placeholder='搜索任务编号' size='small' prefix-icon='el-icon-search' v-model='inputForm.gzglid' style='width:192px;'></el-input>
  32. </el-form>
  33. <el-form style=' padding: 20px 24px;' v-if='type==3'>
  34. <p style='margin:0 0 8px 0'>工单编号</p>
  35. <el-input placeholder='搜索工单编号' size='small' prefix-icon='el-icon-search' v-model='inputForm.wonum' style='width:192px;'></el-input>
  36. </el-form>
  37. <el-form style=' padding: 20px 24px;' v-if='type==4'>
  38. <p style='margin:0 0 8px 0'>验收结果</p>
  39. <el-select v-model='inputForm.status' placeholder='请选择' size='small' style='width:220px'>
  40. <el-option v-for='item in statusOption' :key='item.id' :label='item.name' :value='item.id'></el-option>
  41. </el-select>
  42. <p style='margin:16px 0 8px 0'>验收日期</p>
  43. <el-date-picker
  44. style='width:220px'
  45. v-model='inputForm.yssjwcsj'
  46. value-format='yyyyMMdd'
  47. type='daterange'
  48. size='small'
  49. range-separator='-'
  50. start-placeholder
  51. end-placeholder
  52. ></el-date-picker>
  53. </el-form>
  54. <div style='position:absolute;bottom:20px;right:47px;z-index:9999'>
  55. <el-button @click='dialogFormVisible = false' size='small'>取 消</el-button>
  56. <el-button type='primary' @click='confirm' size='small'>确 定</el-button>
  57. </div>
  58. </div>
  59. </div>
  60. </template>
  61. <script>
  62. export default {
  63. data() {
  64. return {
  65. dialogFormVisible: false,
  66. form: {},
  67. formLabelWidth: '232px',
  68. inputForm: {
  69. fws: '',
  70. manufacturer: '',
  71. gzglid: '',
  72. wonum: '',
  73. ssfasm: '',
  74. status: '',
  75. yssjwcsj: ''
  76. }
  77. }
  78. },
  79. props: ['type', 'statusOption'],
  80. methods: {
  81. show() {
  82. this.dialogFormVisible = !this.dialogFormVisible
  83. },
  84. confirm() {
  85. this.dialogFormVisible = false
  86. if (this.type == 1) {
  87. this.$emit('confirm', this.inputForm.fws, this.inputForm.manufacturer)
  88. } else if (this.type == 2) {
  89. this.$emit('confirm', this.inputForm.gzglid)
  90. } else if (this.type == 3) {
  91. this.$emit('confirm', this.inputForm.wonum)
  92. } else if (this.type == 4) {
  93. this.$emit('confirm', this.inputForm.status, this.inputForm.yssjwcsj)
  94. }
  95. }
  96. },
  97. mounted() {}
  98. }
  99. </script>
  100. <style lang="less" scoped>
  101. .input-diadlog {
  102. position: relative;
  103. }
  104. </style>