Blame view

src/components/inspection/editInspectionItemTitle.vue 4.82 KB
6ec243d6   wuxw   v1.9 点击提交后,成功提示没有...
1
  <template>
c7a5a78f   wuxw   加入巡检工鞥你
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
    <el-dialog :title="$t('inspectionItemTitleManage.editTitle')" :visible.sync="visible" width="50%" @close="resetForm">
      <el-form ref="form" :model="formData" label-width="120px">
        <el-form-item :label="$t('inspectionItemTitleManage.title')" prop="itemTitle"
          :rules="[{ required: true, message: $t('common.required') }]">
          <el-input v-model="formData.itemTitle"
            :placeholder="$t('inspectionItemTitleManage.placeholderItemTitleRequired')" />
        </el-form-item>
        <el-form-item :label="$t('inspectionItemTitleManage.titleType')" prop="titleType"
          :rules="[{ required: true, message: $t('common.required') }]">
          <el-select v-model="formData.titleType"
            :placeholder="$t('inspectionItemTitleManage.placeholderTitleTypeRequired')" style="width:100%"
            @change="handleTypeChange">
            <el-option :label="$t('inspectionItemTitleManage.singleChoice')" value="1001" />
            <el-option :label="$t('inspectionItemTitleManage.multipleChoice')" value="2002" />
            <el-option :label="$t('inspectionItemTitleManage.shortAnswer')" value="3003" />
          </el-select>
        </el-form-item>
  
     
  
        <template v-if="formData.titleType && formData.titleType !== '3003'">
          <div v-for="(item, index) in formData.titleValues" :key="index">
            <el-form-item :label="`${$t('inspectionItemTitleManage.option')} ${index + 1}`"
              :prop="`titleValues.${index}.itemValue`" :rules="[{ required: true, message: $t('common.required') }]">
              <el-input v-model="item.itemValue" />
              <el-button v-if="index === formData.titleValues.length - 1" type="text" @click="addOption">
                <i class="el-icon-plus"></i>
                {{ $t('inspectionItemTitleManage.addOption') }}
              </el-button>
              <el-button v-else type="text" @click="removeOption(index)">
                <i class="el-icon-minus"></i>
                {{ $t('inspectionItemTitleManage.removeOption') }}
              </el-button>
            </el-form-item>
          </div>
        </template>
  
        <el-form-item :label="$t('inspectionItemTitleManage.seq')" prop="seq" :rules="[
          { required: true, message: $t('common.required') }
        ]">
          <el-input v-model.number="formData.seq" :placeholder="$t('inspectionItemTitleManage.placeholderSeq')"
            type="number" />
        </el-form-item>
      </el-form>
  
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">
          {{ $t('common.cancel') }}
        </el-button>
        <el-button type="primary" @click="submitForm">
          {{ $t('common.save') }}
        </el-button>
      </div>
    </el-dialog>
  </template>
  
  <script>
  import { updateInspectionItemTitle } from '@/api/inspection/inspectionItemTitleManageApi'
  import { getCommunityId } from '@/api/community/communityApi'
  
  export default {
    name: 'EditInspectionItemTitle',
    data() {
      return {
        visible: false,
        formData: {
          titleId: '',
          titleType: '',
          itemTitle: '',
          seq: '',
          itemId: '',
          titleValues: []
        }
      }
    },
    methods: {
      open(data) {
        this.formData = { ...data }
        console.log(data)
        this.formData.titleValues = data.inspectionItemTitleValueDtos;
        this.visible = true
      },
      handleTypeChange(val) {
        if (val === '1001' && (!this.formData.titleValues || this.formData.titleValues.length === 0)) {
          this.formData.titleValues = [{ itemValue: '', seq: 1 }]
        } else if (val === '2002' && (!this.formData.titleValues || this.formData.titleValues.length < 2)) {
          this.formData.titleValues = [
            { itemValue: '', seq: 1 },
            { itemValue: '', seq: 2 }
          ]
        } else if (val === '3003') {
          this.formData.titleValues = []
        }
      },
      addOption() {
        this.formData.titleValues.push({
          itemValue: '',
          seq: this.formData.titleValues.length + 1
        })
      },
      removeOption(index) {
        this.formData.titleValues.splice(index, 1)
        // 重新排序
        this.formData.titleValues.forEach((item, i) => {
          item.seq = i + 1
        })
      },
      resetForm() {
        this.$refs.form.resetFields()
        this.formData = {
          titleId: '',
          titleType: '',
          itemTitle: '',
          seq: '',
          itemId: '',
          titleValues: []
        }
      },
      submitForm() {
        this.$refs.form.validate(async valid => {
          if (!valid) return
  
          try {
            const params = {
              ...this.formData,
              communityId: getCommunityId()
            }
  
            await updateInspectionItemTitle(params)
6ec243d6   wuxw   v1.9 点击提交后,成功提示没有...
131
            this.$message.success(this.$t('common.operationSuccess'))
c7a5a78f   wuxw   加入巡检工鞥你
132
133
134
135
136
137
138
139
140
141
            this.visible = false
            this.$emit('success')
          } catch (error) {
            this.$message.error(error.message || this.$t('common.updateError'))
          }
        })
      }
    }
  }
  </script>