Blame view

src/views/machine/addEquipmentAccountList.vue 10.2 KB
439c1b56   wuxw   开发完成设备台账功能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
  <template>
    <div class="add-equipment-account-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ $t('addEquipmentAccount.title') }}</span>
        </div>
  
        <el-form ref="form" :model="addEquipmentAccountInfo" label-width="120px" label-position="right">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item :label="$t('addEquipmentAccount.machineName')" prop="machineName" required>
                    <el-input v-model.trim="addEquipmentAccountInfo.machineName"
                      :placeholder="$t('addEquipmentAccount.machineNamePlaceholder')" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('addEquipmentAccount.machineCode')" prop="machineCode" required>
                    <el-input v-model.trim="addEquipmentAccountInfo.machineCode"
                      :placeholder="$t('addEquipmentAccount.machineCodePlaceholder')" />
                  </el-form-item>
                </el-col>
              </el-row>
  
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item :label="$t('addEquipmentAccount.importanceLevel')" prop="importanceLevel" required>
                    <el-select v-model="addEquipmentAccountInfo.importanceLevel"
                      :placeholder="$t('addEquipmentAccount.importanceLevelPlaceholder')" style="width:100%">
                      <el-option v-for="(item, index) in addEquipmentAccountInfo.importanceLevels" :key="index"
                        :label="item.name" :value="item.statusCd" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('addEquipmentAccount.state')" prop="state" required>
                    <el-select v-model="addEquipmentAccountInfo.state"
                      :placeholder="$t('addEquipmentAccount.statePlaceholder')" style="width:100%">
                      <el-option v-for="(item, index) in addEquipmentAccountInfo.useStatus" :key="index" :label="item.name"
                        :value="item.statusCd" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
  
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item :label="$t('addEquipmentAccount.brand')">
                    <el-input v-model.trim="addEquipmentAccountInfo.brand"
                      :placeholder="$t('addEquipmentAccount.brandPlaceholder')" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('addEquipmentAccount.model')">
                    <el-input v-model.trim="addEquipmentAccountInfo.model"
                      :placeholder="$t('addEquipmentAccount.modelPlaceholder')" />
                  </el-form-item>
                </el-col>
              </el-row>
  
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item :label="$t('addEquipmentAccount.netWorth')">
                    <el-input v-model.trim="addEquipmentAccountInfo.netWorth"
                      :placeholder="$t('addEquipmentAccount.netWorthPlaceholder')" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('addEquipmentAccount.locationDetail')">
                    <el-input v-model.trim="addEquipmentAccountInfo.locationDetail"
                      :placeholder="$t('addEquipmentAccount.locationDetailPlaceholder')" />
                  </el-form-item>
                </el-col>
              </el-row>
  
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item :label="$t('addEquipmentAccount.firstEnableTime')">
                    <el-date-picker v-model="addEquipmentAccountInfo.firstEnableTime" type="date" value-format="yyyy-MM-dd"
                      :placeholder="$t('addEquipmentAccount.firstEnableTimePlaceholder')" style="width:100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('addEquipmentAccount.warrantyDeadline')">
                    <el-date-picker v-model="addEquipmentAccountInfo.warrantyDeadline" type="date" value-format="yyyy-MM-dd"
                      :placeholder="$t('addEquipmentAccount.warrantyDeadlinePlaceholder')" style="width:100%" />
                  </el-form-item>
                </el-col>
              </el-row>
  
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item :label="$t('addEquipmentAccount.usefulLife')">
                    <el-input v-model.trim="addEquipmentAccountInfo.usefulLife"
                      :placeholder="$t('addEquipmentAccount.usefulLifePlaceholder')" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('addEquipmentAccount.purchasePrice')">
                    <el-input v-model.trim="addEquipmentAccountInfo.purchasePrice"
                      :placeholder="$t('addEquipmentAccount.purchasePricePlaceholder')" />
                  </el-form-item>
                </el-col>
              </el-row>
  
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item :label="$t('addEquipmentAccount.useUserName')" prop="useUserName" required>
                    <el-input v-model.trim="addEquipmentAccountInfo.useUserName"
                      :placeholder="$t('addEquipmentAccount.useUserNamePlaceholder')" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('addEquipmentAccount.chargeUseName')" prop="chargeUseName" required>
                    <el-input v-model.trim="addEquipmentAccountInfo.chargeUseName"
                      :placeholder="$t('addEquipmentAccount.chargeUseNamePlaceholder')" />
                  </el-form-item>
                </el-col>
              </el-row>
  
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item :label="$t('addEquipmentAccount.remark')">
                    <el-input v-model.trim="addEquipmentAccountInfo.remark" type="textarea"
                      :placeholder="$t('addEquipmentAccount.remarkPlaceholder')" :rows="3" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
  
          <el-row :gutter="20">
            <el-col :span="24" style="text-align: right; margin-top: 20px;">
              <el-button type="warning" @click="handleCancel">
                {{ $t('common.cancel') }}
              </el-button>
              <el-button type="primary" @click="handleSave">
                {{ $t('common.save') }}
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script>
  import { saveEquipmentAccount } from '@/api/machine/addEquipmentAccountApi'
  import { getDict } from '@/api/community/communityApi'
  import { getCommunityId } from '@/api/community/communityApi'
  
  export default {
    name: 'AddEquipmentAccountList',
    data() {
      return {
        addEquipmentAccountInfo: {
          machineId: '',
          machineName: '',
          machineCode: '',
          brand: '',
          model: '',
          typeId: '',
          locationDetail: '',
          locationObjId: '',
          locationObjName: '',
          firstEnableTime: '',
          warrantyDeadline: '',
          usefulLife: '',
          importanceLevel: '',
          importanceLevels: [],
          state: '',
          purchasePrice: '',
          netWorth: '',
          useOrgId: '',
          useOrgName: '',
          useUserId: '',
          useUserName: '',
          useUseTel: '',
          chargeOrgId: '',
          chargeOrgName: '',
          chargeOrgTel: '',
          chargeUseId: '',
          chargeUseName: '',
          remark: '',
          useStatus: []
        }
      }
    },
    created() {
      this.initData()
    },
    methods: {
      async initData() {
        this.addEquipmentAccountInfo.typeId = this.$route.query.typeId
        this.communityId = await getCommunityId()
  
        try {
          const importanceLevels = await getDict('equipment_account', 'importance_level')
          const useStatus = await getDict('equipment_account', 'state')
          this.addEquipmentAccountInfo.importanceLevels = importanceLevels
          this.addEquipmentAccountInfo.useStatus = useStatus
        } catch (error) {
          console.error('Failed to fetch dict data:', error)
        }
      },
      validateForm() {
        const requiredFields = [
          { field: 'machineName', message: this.$t('addEquipmentAccount.validate.machineNameRequired') },
          { field: 'machineCode', message: this.$t('addEquipmentAccount.validate.machineCodeRequired') },
          { field: 'importanceLevel', message: this.$t('addEquipmentAccount.validate.importanceLevelRequired') },
          { field: 'state', message: this.$t('addEquipmentAccount.validate.stateRequired') },
          { field: 'useUserName', message: this.$t('addEquipmentAccount.validate.useUserNameRequired') },
          { field: 'chargeUseName', message: this.$t('addEquipmentAccount.validate.chargeUseNameRequired') }
        ]
  
        for (const item of requiredFields) {
          if (!this.addEquipmentAccountInfo[item.field]) {
            this.$message.error(item.message)
            return false
          }
        }
  
        return true
      },
      async handleSave() {
        if (!this.validateForm()) return
  
        try {
          const params = {
            ...this.addEquipmentAccountInfo,
            communityId: this.communityId
          }
          const res = await saveEquipmentAccount(params)
  
          if (res.code === 0) {
            this.$message.success(this.$t('addEquipmentAccount.saveSuccess'))
            this.$router.go(-1)
          } else {
            this.$message.error(res.msg)
          }
        } catch (error) {
          console.error('Save equipment account failed:', error)
          this.$message.error(this.$t('addEquipmentAccount.saveFailed'))
        }
      },
      handleCancel() {
        this.$router.go(-1)
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .add-equipment-account-container {
    padding: 20px;
  
    .box-card {
      width: 100%;
    }
  
    .el-form-item {
      margin-bottom: 22px;
    }
  }
  </style>