inputDialog.vue 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <div class='input-dialog'>
  3. <div @click='show' style='color: #c3c7cb;cursor: pointer;position:absolute;top:-45px;right:0px;'>
  4. <img src='@/assets/imgs/select.png' />
  5. 筛选
  6. </div>
  7. <div
  8. v-if='dialogFormVisible'
  9. style='width:280px;height:450px;background:rgba(255,255,255,1);
  10. box-shadow:0px 2px 10px 0px rgba(31,35,41,0.1);border:1px solid rgba(228,229,231,1);z-index:9999;
  11. position:absolute;top:0px;right:0px;'
  12. >
  13. <el-form style=' padding: 20px 24px;'>
  14. <p style='margin:16px 0 8px 0'>安装位置</p>
  15. <el-input placeholder='搜索安装位置' style='width:192px;margin-right:12px' size='small' prefix-icon='el-icon-search' v-model='keyword'></el-input>
  16. <p style='margin:16px 0 8px 0'>生产厂商</p>
  17. <el-input placeholder='搜索生产厂商' style='width:192px;margin-right:12px' size='small' prefix-icon='el-icon-search' v-model='keyword'></el-input>
  18. <p style='margin:16px 0 8px 0'>服务商</p>
  19. <el-input placeholder='搜索服务商' style='width:192px;margin-right:12px' size='small' prefix-icon='el-icon-search' v-model='keyword'></el-input>
  20. <p style='margin:16px 0 8px 0'>设备编号</p>
  21. <el-input placeholder='搜索设备编号' style='width:192px;margin-right:12px' size='small' prefix-icon='el-icon-search' v-model='keyword'></el-input>
  22. </el-form>
  23. <div style='position:absolute;bottom:40px;right:47px;z-index:9999'>
  24. <el-button @click='dialogFormVisible = false' size='small'>取 消</el-button>
  25. <el-button type='primary' @click='confirm' size='small'>确 定</el-button>
  26. </div>
  27. </div>
  28. </div>
  29. </template>
  30. <script>
  31. export default {
  32. data() {
  33. return {
  34. dialogFormVisible: false,
  35. form: {},
  36. formLabelWidth: '232px',
  37. search: {
  38. type: 'wx',
  39. msInput4: '',
  40. zysxInput4: '',
  41. gdbhInput4: ''
  42. }
  43. }
  44. },
  45. props: ['type'],
  46. methods: {
  47. show() {
  48. this.dialogFormVisible = !this.dialogFormVisible
  49. },
  50. confirm() {
  51. this.dialogFormVisible = false
  52. //console.log(this.type)
  53. if (this.type == 'wx') {
  54. this.$emit('changeIndex3', this.search)
  55. }
  56. }
  57. },
  58. mounted() {}
  59. }
  60. </script>
  61. <style lang="less" scoped>
  62. .input-dialog {
  63. position: relative;
  64. }
  65. </style>