discardDialog.vue 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <!-- components/discardDialog.vue - 废弃弹窗 -->
  2. <template>
  3. <uni-popup ref="popup" type="center">
  4. <view class="discard-dialog">
  5. <view class="title">废弃</view>
  6. <uni-forms ref="form" :modelValue="formData" :rules="rules" label-width="100px">
  7. <uni-forms-item label="废弃原因" name="handleOpinion">
  8. <textarea v-model="formData.handleOpinion" placeholder="请输入废弃原因(100字以内)" maxlength="100" />
  9. </uni-forms-item>
  10. <uni-forms-item label="废弃人">
  11. <input v-model="formData.handlerName" disabled />
  12. </uni-forms-item>
  13. </uni-forms>
  14. <view class="footer">
  15. <button @click="close">取消</button>
  16. <button type="primary" @click="handleSubmit">确定</button>
  17. </view>
  18. </view>
  19. </uni-popup>
  20. </template>
  21. <script>
  22. export default {
  23. emits: ['confirm'],
  24. data() {
  25. return {
  26. formData: { id: '', handleOpinion: '', handlerName: '' },
  27. rules: { handleOpinion: { required: true, message: '请输入废弃原因', trigger: 'blur' } }
  28. };
  29. },
  30. methods: {
  31. open(row) {
  32. const userInfo = uni.getStorageSync('userInfo') || {};
  33. this.formData = {
  34. id: row.id,
  35. handleOpinion: row.handleOpinion || '',
  36. handlerName: row.handlerName || userInfo.name || ''
  37. };
  38. this.$refs.popup.open();
  39. },
  40. close() {
  41. this.$refs.popup.close();
  42. this.$refs.form?.resetFields();
  43. },
  44. async handleSubmit() {
  45. const valid = await this.$refs.form.validate();
  46. if (!valid) return;
  47. this.$emit('confirm', { id: this.formData.id, handleOpinion: this.formData.handleOpinion });
  48. this.close();
  49. }
  50. }
  51. };
  52. </script>
  53. <style lang="scss" scoped>
  54. .discard-dialog {
  55. width: 500rpx;
  56. background: #fff;
  57. border-radius: 16rpx;
  58. padding: 30rpx;
  59. .title {
  60. font-size: 36rpx;
  61. font-weight: bold;
  62. text-align: center;
  63. margin-bottom: 30rpx;
  64. }
  65. .footer {
  66. display: flex;
  67. gap: 20rpx;
  68. margin-top: 30rpx;
  69. button { flex: 1; margin: 0; }
  70. }
  71. }
  72. </style>