界面开发

src/views/modules/custom/suggestionmake-detail.vue

@@ -0,0 +1,108 @@
+<template>
+  <el-dialog :visible.sync="visible" title="详情" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+        <el-form-item label="建议标题 :">
+          <span>{{dataForm.suggestionTitle}}</span>
+        </el-form-item>
+        <el-form-item label="提交人 :">
+          <span>{{dataForm.nickname}}</span>
+        </el-form-item>
+        <el-form-item label="所在网格 :">
+          <span>{{dataForm.deptName}}</span>
+        </el-form-item>
+        <el-form-item label="提交时间 :">
+          <span>{{dataForm.createdTimeStr}}</span>
+        </el-form-item>
+        <el-form-item label="建议内容 :">
+          <span>{{dataForm.suggestionContent}}</span>
+        </el-form-item>
+        <el-form-item label="图片 :">
+          <el-upload
+            action=""
+            :file-list="dataForm.suggestionPicList"
+            disabled="true"
+            list-type="picture-card">
+            <i class="el-icon-plus"></i>
+          </el-upload>
+        </el-form-item>
+    </el-form>
+
+    <el-table :data="dataList" border style="width: 100%;">
+      <el-table-column prop="createdTime" label="回复时间" header-align="center" align="center" width="160px"></el-table-column>
+      <el-table-column prop="deptName" label="回复部门" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="feedbackContent" label="回复内容" header-align="center" align="center"></el-table-column>
+    </el-table>
+
+    
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import debounce from 'lodash/debounce'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      visible: false,
+      dataForm: {
+        id: '',
+        suggestionPics: ''
+      },
+      dataList: [],
+      dialogVisible: true
+    }
+  },
+  computed: {
+    dataRule () {
+      return {}
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.getFeedbackInfo()
+          this.getInfo()
+        }
+      })
+    },
+    // 获取信息
+    getInfo: debounce (
+      function () {
+        this.$http
+          .get(`/custom/suggestionmake/${this.dataForm.id}`)
+          .then(({ data: res }) => {
+            if (res.code !== 0) {
+              return this.$message.error(res.msg)
+            }
+            this.dataForm = {
+              ...this.dataForm,
+              ...res.data
+            }
+          })
+          .catch(() => {})
+      },
+      1000,
+      { leading: true, trailing: false }
+    ),
+    // 获取回馈信息
+    getFeedbackInfo () {
+      this.$http
+      .get(`/custom/suggestionfeedback/feedbackInfo/${this.dataForm.id}`)
+      .then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataList = res.data
+      })
+      .catch(() => { })
+    }
+  }
+}
+</script>

src/views/modules/custom/suggestionmake.vue

@@ -2,8 +2,32 @@
   <el-card shadow="never" class="aui-card--fill">
     <div class="mod-custom__suggestionmake}">
       <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
-        <el-form-item>
-          <el-input v-model="dataForm.id" placeholder="id" clearable></el-input>
+        <el-form-item label="所属部门">
+          <el-cascader v-model="ids"
+                       :options="options"
+                       :props="{ checkStrictly: true }"
+                       clearable></el-cascader>
+        </el-form-item>
+        <el-form-item label="建议类别">
+          <el-cascader v-model="typeIds"
+                       :options="optionSuggestionType"
+                       :props="{ checkStrictly: true }"
+                       clearable></el-cascader>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="dataForm.isFeedback" style="width: 100%;" clearable>
+            <el-option
+              v-for="item in optionIsFeedback"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="建议标题">
+          <el-input v-model="dataForm.suggestionTitle"
+                    placeholder="建议标题"
+                    clearable></el-input>
         </el-form-item>
         <el-form-item>
           <el-button @click="getDataList()">{{ $t('query') }}</el-button>
@@ -13,15 +37,15 @@
         </el-form-item>
       </el-form>
       <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
-        <el-table-column prop="suggestionTypeId" label="建议类别" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="suggestionTypeName" label="建议类别" header-align="center" align="center"></el-table-column>
         <el-table-column prop="suggestionTitle" label="建议标题" header-align="center" align="center"></el-table-column>
         <el-table-column prop="deptName" label="网格" header-align="center" align="center"></el-table-column>
         <el-table-column prop="nickname" label="建议人" header-align="center" align="center"></el-table-column>
         <el-table-column prop="isFeedback" label="状态" :formatter="formatFeedback" header-align="center" align="center"></el-table-column>
-         <el-table-column prop="createdTime" label="提交时间" header-align="center" align="center"></el-table-column>
+         <el-table-column prop="createdTimeStr" label="提交时间" header-align="center" align="center"></el-table-column>
         <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
           <template slot-scope="scope">
-            <el-button  type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">查看</el-button>
+            <el-button  type="text" size="small" @click="detailHandle(scope.row.id)">查看</el-button>
             <el-button v-if="$hasPermission('custom:suggestionmake:feedback')" :disabled="scope.row.isFeedback==='1'"
             type="text" size="small" @click="feedbackHandle(scope.row.id)">回复</el-button>
           </template>
@@ -40,6 +64,9 @@
       <suggestionfeedback-add-or-update v-if="feedbackVisible"
                             ref="suggestionfeedbackAddOrUpdate"
                             @refreshDataList="getDataList"></suggestionfeedback-add-or-update>
+      <suggestionmake-detail v-if="detailVisible"
+                            ref="suggestionmakeDetail"
+                            @refreshDataList="getDataList"></suggestionmake-detail>
     </div>
   </el-card>
 </template>
@@ -48,6 +75,7 @@
 import mixinViewModule from '@/mixins/view-module'
 import AddOrUpdate from './suggestionmake-add-or-update'
 import suggestionfeedbackAddOrUpdate from './suggestionfeedback-add-or-update'
+import suggestionmakeDetail from './suggestionmake-detail'
 export default {
   mixins: [mixinViewModule],
   data () {
@@ -59,11 +87,67 @@ export default {
         deleteIsBatch: true
       },
       dataForm: {
-        id: ''
+        id: '',
+        allDeptIds: '',
+        suggestionTypeId: ''
+      },
+      options: [],
+      optionSuggestionType: [],
+      ids: [],
+      typeIds: [],
+      optionIsFeedback: [{
+        value: '0',
+        label: '未回复'
+      },{
+        value: '1',
+        label: '已回复'
+      }],
+      feedbackVisible: false,
+      detailVisible: false
+    }
   },
-      feedbackVisible: false
+  watch: {
+    'ids': function (val) {
+      if (val.length === 0) {
+        this.dataForm.allDeptIds = ''
+      }
+      if (val.length === 1) {
+        this.dataForm.allDeptIds = this.ids[0]
+      }
+      if (val.length === 2) {
+        this.dataForm.allDeptIds = this.ids[0] + ',' + this.ids[1]
+      }
+      if (val.length === 3) {
+        this.dataForm.allDeptIds = this.ids[0] + ',' + this.ids[1] + ',' + this.ids[2]
       }
     },
+    'typeIds': function (val) {
+      if (val.length === 0) {
+        this.dataForm.suggestionTypeId = ''
+      }
+      if (val.length === 1) {
+        this.dataForm.suggestionTypeId = this.typeIds[0]
+      }
+      if (val.length === 2) {
+        this.dataForm.suggestionTypeId = this.typeIds[1]
+      }
+      if (val.length === 3) {
+        this.dataForm.suggestionTypeId = this.typeIds[2]
+      }
+    }
+  },
+  created () {
+    this.$http
+      .get(`/sys/user/deptOptions/getByLoginUser`)
+      .then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.options = res.data.options
+      })
+      .catch(() => { })
+    this.getListSuggestionType()
+  },
   methods: {
     formatFeedback (row, column) {
       if (row.isFeedback === '0') {
@@ -72,18 +156,33 @@ export default {
         return '已回复'
       }
     },
+    getListSuggestionType () {
+      this.$http.get(`/custom/suggestiontype/getSuggestionTypeTree`).then(({ data: res }) => {
+      if (res.code !== 0) {
+        return this.$message.error(res.msg)
+      }
+      this.optionSuggestionType = res.data
+      }).catch(() => {})
+    },
     feedbackHandle (id) {
-      console.log(id)
       this.feedbackVisible = true
       this.$nextTick(() => {
         this.$refs.suggestionfeedbackAddOrUpdate.dataForm.suggestionId = id
         this.$refs.suggestionfeedbackAddOrUpdate.init()
       })
+    },
+    detailHandle (id) {
+      this.detailVisible = true
+      this.$nextTick(() => {
+        this.$refs.suggestionmakeDetail.dataForm.id = id
+        this.$refs.suggestionmakeDetail.init()
+      })
     }
   },
   components: {
     AddOrUpdate,
-    suggestionfeedbackAddOrUpdate
+    suggestionfeedbackAddOrUpdate,
+    suggestionmakeDetail
   }
 }
 </script>