dialog-end-work.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <template>
  2. <dialog-base ref="baseDialog" title="结束报工">
  3. <view class="list-container">
  4. <view class="list-title"><text class="label">合格量</text></view>
  5. <view class="table-item">
  6. <input class="input" v-model="workInfo.qualified" placeholder="请输入合格量" />
  7. </view>
  8. <view class="list-title">
  9. <text class="label">废品量</text>
  10. </view>
  11. <view class="table-item"><input class="input" v-model="workInfo.amount" placeholder="请输入废品量" /></view>
  12. <view class="list-title">
  13. <text class="label">废品原因</text>
  14. </view>
  15. <view class="table-item"><input class="input" v-model="workInfo.reason" placeholder="请输入废品原因" /></view>
  16. <view class="list-title uni-row">
  17. <text class="label">当前序是否完成</text>
  18. <switch class="switch" @change="switchChange" color="rgba(255,85,85,1)" style="transform:scale(0.7)" />
  19. </view>
  20. </view>
  21. <view class="add-btn-container uni-row">
  22. <button type="default" class="btn" @click="handleFinishReporting">结束报工</button>
  23. </view>
  24. </dialog-base>
  25. </template>
  26. <script setup>
  27. import {
  28. ref,
  29. getCurrentInstance
  30. } from 'vue'
  31. const baseDialog = ref(null)
  32. const workInfo = ref({})
  33. const open = (data) => {
  34. // console.log(dialog.value)
  35. baseDialog.value.open()
  36. }
  37. function switchChange(event) {
  38. if(event.detail.value) {
  39. workInfo.value.status = "2"
  40. }
  41. else {
  42. workInfo.value.status = "1"
  43. }
  44. }
  45. function handleFinishReporting(){
  46. console.log(workInfo.value,"123")
  47. }
  48. defineExpose({
  49. open
  50. })
  51. </script>
  52. <style lang="scss">
  53. .dialog-body {
  54. .list-container {
  55. width: 100%;
  56. display: flex;
  57. align-items: flex-start;
  58. padding: 0 4rpx;
  59. .list-title {
  60. margin-top: 24rpx;
  61. .label {
  62. font-size: 32rpx;
  63. }
  64. }
  65. .switch {
  66. margin-top: -8rpx;
  67. align-items: center;
  68. }
  69. .table-item {
  70. margin-top: 24rpx;
  71. .input {
  72. height: 60rpx;
  73. border: 1px solid #808080;
  74. }
  75. }
  76. }
  77. .add-btn-container {
  78. margin-top: 32rpx;
  79. .btn {
  80. flex: 1;
  81. background-color: rgba(255,85,85,1);
  82. color: #FFFFFF;
  83. }
  84. }
  85. }
  86. </style>