xiangpei
2024-05-22 e81ae1ff5e83f6c8a315c3f6b99221308b7ceb44
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
<template>
  <div class="app-container">
 
    <el-form :model="form" ref="form" label-width="100px" v-loading="formLoading" :rules="rules">
      <el-form-item label="问题:"  prop="question">
        <el-input v-model="form.question" maxlength="48"></el-input>
      </el-form-item>
      <el-form-item label="答案:"  prop="answer">
        <el-input v-model="form.answer" maxlength="1000"></el-input>
      </el-form-item>
      <el-form-item label="附件:"  prop="attachment">
        <upload :fileUrl="form.contentUrl" :fileSizeLimitM="1024" :uploadNum="1" @getUploadUrl="getUploadAttachmentUrl" @removeFile="removeAttachmentFile"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
 
<script>
import { mapGetters, mapState, mapActions } from 'vuex'
import questionAnswerApi from '@/api/questionAnswer'
import Upload from '@/components/UploadC'
 
export default {
  components: { Upload },
  computed: {
    fileContentUrl: () => {
      return this.form ? this.form.contentUrl ? [this.form.contentUrl] : [] : [];
    }
  },
  data () {
    return {
      form: {
        id: null,
        question: '',
        answer: '',
        contentType: 'file',
        subject: '',
        belongType: 2,
        contentUrl: [],
        attachment: '',
        temp: []
      },
      formLoading: false,
      rules: {
        question: [
          { required: true, message: '请输入问题', trigger: 'blur' }
        ],
        answer: [
          { required: true, message: '请输入答案', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    let id = this.$route.query.id
    let _this = this
    if (id && parseInt(id) !== 0) {
      _this.formLoading = true
      questionAnswerApi.query(id).then(re => {
        _this.form.id = re.response.id
        _this.form.question = re.response.question
        _this.form.answer = re.response.answer
        _this.form.attachment = re.response.attachment ? re.response.attachment : ''
        _this.form.contentUrl = re.response.attachment ? JSON.parse(re.response.attachment) : []
        _this.formLoading = false
      })
    }
  },
  methods: {
    removeAttachmentFile(fileList, fileName) {
      this.form.attachment = JSON.stringify(fileList.filter(item => item.name !== fileName));
      this.form.contentUrl = fileList.filter(item => item.name !== fileName);
    },
    getUploadAttachmentUrl(uploadData) {
      this.form.attachment = JSON.stringify(uploadData);
      this.form.contentUrl = uploadData;
    },
    submitForm () {
      let _this = this
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.formLoading = true
          
          questionAnswerApi.save(this.form).then(data => {
            if (data.code === 1) {
              _this.$message.success(data.message)
              _this.delCurrentView(_this).then(() => {
                _this.$router.push('/list')
              })
            } else {
              _this.$message.error(data.message)
              _this.formLoading = false
            }
          }).catch(e => {
            _this.formLoading = false
          })
        } else {
          return false
        }
      })
    },
    resetForm () {
      let lastId = this.form.id
      this.$refs['form'].resetFields()
      this.form = {
        id: null,
        question: '',
        answer: ''
      }
      this.form.id = lastId
    },
    ...mapActions('tagsView', { delCurrentView: 'delCurrentView' })
  },
  computed: {
    ...mapGetters('enumItem', [
      'enumFormat'
    ]),
    ...mapState('enumItem', {
      sexEnum: state => state.user.sexEnum,
      roleEnum: state => state.user.roleEnum,
      statusEnum: state => state.user.statusEnum
    })
  }
}
</script>