南岸纠错提交

nngkxxdp/src/main/resources/static/naqwzsjtj/naqwzsjtj/src/views/rectification/components/RectificationEdit.vue

@@ -1,24 +1,24 @@
 <template>
-  <el-dialog title="" :close-on-click-modal="false" class="detailDialog" :modal-append-to-body="false" append-to-body width="40%" :visible.sync="dialog.visible" @closed="afterFormClosed">
+  <el-dialog title="" :close-on-click-modal="false" top="10px" class="detailDialog" :modal-append-to-body="false"
+    append-to-body width="60%" :visible.sync="dialog.visible" @closed="afterFormClosed">
     <div slot="title" style="height: 10px;">
       <div class="addTitle">{{ dialog.title }}</div>
     </div>
-    <el-form ref="refForm" v-loading="form.loading" :model="form" :rules="rules" label-width="80px">
+    <el-form ref="refForm" style="height: 500px;overflow-y: scroll;padding-right: 30px;" v-loading="form.loading"
+      :model="form" label-width="120px">
       <el-form-item prop="questionType" label="问题类型">
-        <el-input v-model="form.questionType" placeholder="问题类型" maxlength="255" />
+        <el-select v-model="form.questionType" placeholder="请选择问题类型" style="width: 100%">
+          <el-option v-for="(item, index) in questionType" :key="index" :value="item.value" :label="item.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="equipment" label="设备类型">
+        <el-select v-model="form.equipment" placeholder="请选择设备类型" style="width: 100%">
+          <el-option v-for="(item, index) in equipmentType" :key="index" :value="item.value" :label="item.label" />
+        </el-select>
       </el-form-item>
       <el-form-item prop="errorUrl" label="问题页面网址">
         <el-input v-model="form.errorUrl" placeholder="问题页面网址" maxlength="255" />
       </el-form-item>
-      <el-form-item prop="picture" label="截图">
-        <el-input v-model="form.picture" placeholder="截图" maxlength="255" />
-      </el-form-item>
-      <el-form-item prop="questionDescription" label="描述">
-        <el-input v-model="form.questionDescription" placeholder="描述" maxlength="255" />
-      </el-form-item>
-      <el-form-item prop="status" label="办理状态">
-        <el-input v-model="form.status" placeholder="办理状态" maxlength="255" />
-      </el-form-item>
       <el-form-item prop="submitter" label="提交人姓名">
         <el-input v-model="form.submitter" placeholder="提交人姓名" maxlength="255" />
       </el-form-item>
@@ -28,11 +28,20 @@
       <el-form-item prop="phone" label="手机号">
         <el-input v-model="form.phone" placeholder="手机号" maxlength="255" />
       </el-form-item>
-      <el-form-item prop="equipment" label="设备类型">
-        <el-input v-model="form.equipment" placeholder="设备类型" maxlength="255" />
+      <el-form-item v-if="form.id" prop="finishTime" label="办结时间">
+        <el-date-picker v-model="form.finishTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
+          style="width: 100%">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item prop="questionDescription" label="描述">
+        <el-input type="textarea" v-model="form.questionDescription"></el-input>
       </el-form-item>
-      <el-form-item prop="finishTime" label="办结时间">
-        <el-input v-model="form.finishTime" placeholder="办结时间" maxlength="255" />
+      <el-form-item prop="picture" label="截图">
+        <el-upload list-type="picture-card" action="#" ref="upload" :auto-upload="false"
+          accept="image/png,image/jpg,image/jpeg,image/bmp" multiple :file-list="picList" :on-change="picChange"
+          :on-remove="picRemove">
+          <i class="el-icon-plus"></i>
+        </el-upload>
       </el-form-item>
     </el-form>
     <div slot="footer">
@@ -43,138 +52,205 @@
 </template>
 
 <script>
-import { isEmpty } from '@/utils/tool'
-import rectificationApi from '@/api/rectification'
+  import {
+    isEmpty
+  } from '@/utils/tool'
+  import rectificationApi from '@/api/rectification'
+  import {
+    questionType,
+    equipmentType
+  } from '../constants/codeConsts'
 
-export default {
-  name: 'RectificationEdit',
-  components: {},
-  data() {
-    return {
-      data: [], // 数据
-      form: {
-        id: '', // id
-        questionType: '', // 问题类型【0：功能无法使用 1：内容无法访问 2：信息不更新 3：内容不准确 4：咨询互动不回应 5：错别字 6：虚假伪造内容 7：其它】
-        errorUrl: '', // 问题页面网址
-        picture: '', // 截图
-        questionDescription: '', // 描述
-        status: '', // 办理状态【0：未处理 1：已处理】
-        submitter: '', // 提交人姓名
-        mail: '', // 邮箱
-        phone: '', // 手机号
-        equipment: '', // 设备类型【0：首页 1：小程序 2：智能问答服务兜底问题 3：政策问答库提问】
-        finishTime: '', // 办结时间
-        loading: false
-      },
-      rules: {
-        name: [
-          { required: true, message: '请输入名称', trigger: 'blur' }
-        ]
-      },
-      dialog: {
-        title: '',
-        visible: false
-      }
-    }
-  },
-  computed: {},
-  methods: {
-    submitForm() {
-      this.$refs.refForm.validate().then(() => {
-        if (isEmpty(this.form.id)) {
-          rectificationApi.rectificationAdd({
-            ...this.form
-          }).then(res => {
-            if (res.data.result) {
-              this.$message({
-                type: 'success',
-                message: '添加成功!'
-              })
-              this.dialog.visible = false
-              this.$emit('update-table')
-            } else {
-              this.$message({
-                type: 'info',
-                message: res.data.msg
-              })
-            }
-          })
-        } else {
-          rectificationApi.rectificationUpdate({
-            ...this.form
-          }).then(res => {
-            if (res.data.result) {
-              this.$message({
-                type: 'success',
-                message: '修改成功!'
-              })
-              this.dialog.visible = false
-              this.$emit('update-table')
-            } else {
-              this.$message({
-                type: 'info',
-                message: res.data.msg
-              })
-            }
-          })
-        }
-      }).catch(() => {
-        console.log('验证失败')
-      })
-    },
-    showEditForm(id) {
-      this.dialog.visible = true
-      this.form.loading = true
-      this.form.loading = false
-      if (id) {
-        this.dialog.title = '编辑'
-        this.form.id = id
-        const params = {
-          id: id
-        }
-        rectificationApi.rectificationInfo({ params }).then((res) => {
-          const ret = res.data.data || []
-          this.form = ret
-        })
-      } else {
-        this.dialog.title = '新增'
-        this.form = {
+
+  export default {
+    name: 'RectificationEdit',
+    components: {},
+    data() {
+      return {
+        data: [], // 数据
+        form: {
           id: '', // id
           questionType: '', // 问题类型【0：功能无法使用 1：内容无法访问 2：信息不更新 3：内容不准确 4：咨询互动不回应 5：错别字 6：虚假伪造内容 7：其它】
           errorUrl: '', // 问题页面网址
           picture: '', // 截图
           questionDescription: '', // 描述
-          status: '', // 办理状态【0：未处理 1：已处理】
           submitter: '', // 提交人姓名
           mail: '', // 邮箱
           phone: '', // 手机号
           equipment: '', // 设备类型【0：首页 1：小程序 2：智能问答服务兜底问题 3：政策问答库提问】
-          finishTime: '', // 办结时间
           loading: false
-        }
+        },
+        dialog: {
+          title: '',
+          visible: false
+        },
+        questionType: questionType,
+        equipmentType: equipmentType,
+        // 图片
+        picList: [],
+        imgUrl: process.env.VUE_APP_IMG_URL,
       }
     },
-    afterFormClosed() {
-      this.$refs.refForm.resetFields()
-      this.form.id = null
+    computed: {},
+    methods: {
+      submitForm() {
+        if (!this.form.questionType) {
+          this.$message.error('请选择问题类型');
+          return;
+        }
+        if (!this.form.equipment) {
+          this.$message.error('请选择设备类型');
+          return;
+        }
+        if (!this.form.errorUrl) {
+          this.$message.error('请输入问题页面网址');
+          return;
+        }
+        if (!this.form.submitter) {
+          this.$message.error('请输入提交人姓名');
+          return;
+        }
+        if (!this.form.mail) {
+          this.$message.error('请输入邮箱');
+          return;
+        }
+        if (!this.form.phone) {
+          this.$message.error('请输入手机号');
+          return;
+        }
+        if (!this.form.questionDescription) {
+          this.$message.error('请输入描述');
+          return;
+        }
+        if (this.picList.length <= 0) {
+          this.$message.error('请上传截图');
+          return;
+        }
+        // if (isEmpty(this.form.id)) {
+        //   rectificationApi.rectificationAdd({
+        //     ...this.form
+        //   }).then(res => {
+        //     if (res.data.result) {
+        //       this.$message({
+        //         type: 'success',
+        //         message: '添加成功!'
+        //       })
+        //       this.dialog.visible = false
+        //       this.$emit('update-table')
+        //     } else {
+        //       this.$message({
+        //         type: 'info',
+        //         message: res.data.msg
+        //       })
+        //     }
+        //   })
+        // } else {
+        //   rectificationApi.rectificationUpdate({
+        //     ...this.form
+        //   }).then(res => {
+        //     if (res.data.result) {
+        //       this.$message({
+        //         type: 'success',
+        //         message: '修改成功!'
+        //       })
+        //       this.dialog.visible = false
+        //       this.$emit('update-table')
+        //     } else {
+        //       this.$message({
+        //         type: 'info',
+        //         message: res.data.msg
+        //       })
+        //     }
+        //   })
+        // }
+      },
+      showEditForm(id) {
+        this.dialog.visible = true
+        this.form.loading = true
+        this.form.loading = false
+        if (id) {
+          this.dialog.title = '编辑'
+          this.form.id = id
+          const params = {
+            id: id
+          }
+          rectificationApi.rectificationInfo({
+            params
+          }).then((res) => {
+            const ret = res.data.data || []
+            this.form = ret
+          })
+          this.picList = this.form.picture.split(',').map(item => {
+            return {
+              url: this.imgUrl + item
+            }
+          })
+        } else {
+          this.dialog.title = '新增'
+          this.form = {
+            id: '', // id
+            questionType: '', // 问题类型【0：功能无法使用 1：内容无法访问 2：信息不更新 3：内容不准确 4：咨询互动不回应 5：错别字 6：虚假伪造内容 7：其它】
+            errorUrl: '', // 问题页面网址
+            picture: '', // 截图
+            questionDescription: '', // 描述
+            submitter: '', // 提交人姓名
+            mail: '', // 邮箱
+            phone: '', // 手机号
+            equipment: '', // 设备类型【0：首页 1：小程序 2：智能问答服务兜底问题 3：政策问答库提问】
+            loading: false
+          }
+        }
+      },
+      afterFormClosed() {
+        this.form.id = null
+      },
+      //上传文件
+      picChange(file, fileList) {
+        if (file.raw.type === 'image/png' || file.raw.type === 'image/jpg' || file.raw.type ===
+          'image/jpeg' ||
+          file.raw.type === 'image/bmp') {
+          this.picList = fileList;
+        } else {
+          this.$message.error('只能上传jpg或png或bmp或jpeg格式!');
+          fileList.splice(-1);
+        }
+      },
+      //删除文件
+      picRemove(file, fileList) {
+        this.picList = fileList;
+        if (this.form.picture) {
+          let temp = this.form.picture.split(",");
+          for (let i = 0; i < temp.length; i++) {
+            if (temp[i] == file.name) {
+              temp[i] = temp[i] + "x";
+              break;
+            }
+          }
+          this.form.picture = temp.join(",");
+        }
+      },
     }
   }
-}
 </script>
 
 <style lang="less" scoped>
-.menu-edit {
-  .color {
-    position: absolute;
-    right: 2px;
-    top: 2px;
-    z-index: 3;
+  .menu-edit {
+    .color {
+      position: absolute;
+      right: 2px;
+      top: 2px;
+      z-index: 3;
+    }
   }
-}
 
-.addTitle {
-        font-size: 18px;
-        font-weight: bold;
-    }
-</style>
+  .addTitle {
+    font-size: 18px;
+    font-weight: bold;
+  }
 
+  /deep/ .el-form-item__label:before {
+    content: "*";
+    color: #f56c6c;
+    margin-right: 4px;
+  }
+</style>