反馈信息管理

app/src/api/feedback.js

@@ -0,0 +1,39 @@
+/*
+ * @Author: BINGWU
+ * @Date: 2024-05-22 22:39:54
+ * @LastEditors: BINGWU HuJiaCheng2003@163.com
+ * @LastEditTime: 2024-05-22 22:40:06
+ * @FilePath: \feedback-information-management-system\app\src\api\feedback.js
+ * @Describe:
+ * @Mark: ૮(˶ᵔ ᵕ ᵔ˶)ა
+ */
+import http from '@/utils/http'
+import { deleteRequest } from '@/utils/http'
+const getFeedback = (_id) => {
+  return http.get('/feedback/get', {
+    params: {
+      _id
+    }
+  })
+}
+const createFeedback = (params) => {
+  return http.post('/feedback/create', params)
+}
+const updateFeedback = (params) => {
+  return http.put('/feedback/update', params)
+}
+const deleteFeedback = (params) => {
+  return deleteRequest('/feedback/delete', params)
+}
+const getAllFeedback = (params) => {
+  return http.get('/feedback/get-all', {
+    params
+  })
+}
+export {
+  getFeedback,
+  createFeedback,
+  getAllFeedback,
+  updateFeedback,
+  deleteFeedback
+}

app/src/views/components/form/FeedbackFormCom.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="feedback-form">
+    <el-dialog
+      v-model="dialogVisible"
+      :title="props.title + '反馈信息'"
+      width="500"
+      :before-close="handleClose"
+    >
+      <el-form
+        :model="formData"
+        label-width="auto"
+        style="max-width: 600px"
+        ref="formRef"
+      >
+        <el-form-item label="职工名" prop="employeeName">
+          <el-input
+            type="text"
+            v-model="formData.employeeName"
+            :disabled="title === '查看' || title === '修改'"
+          />
+        </el-form-item>
+        <el-form-item label="内容" prop="content">
+          <el-input
+            type="textarea"
+            v-model="formData.content"
+            :disabled="title === '查看' || title === '修改'"
+          />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group
+            v-model="formData.status"
+            @change="handleRadioChange"
+            :disabled="title === '查看'"
+          >
+            <el-radio label="已处理">已处理</el-radio>
+            <el-radio label="待处理">待处理</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="提交时间" prop="date">
+          <el-input
+            type="text"
+            v-model="formData.date"
+            :disabled="title === '查看' || title === '修改'"
+          >
+            <template #suffix>
+              <el-icon class="el-input__icon"><calendar /></el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer" v-show="title !== '查看'">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleConfirm"> 确认 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, nextTick } from 'vue'
+import { updateFeedback } from '@/api/feedback'
+const formData = reactive({
+  employeeName: '',
+  content: '',
+  status: '待处理',
+  date: ''
+})
+const dialogVisible = ref(false)
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '添加'
+  }
+})
+const formRef = ref(null)
+let newId = ''
+const emits = defineEmits(['updateTableData'])
+
+const handleConfirm = () => {
+  formRef.value
+    .validate()
+    .then(async () => {
+      let message = ''
+      const params = {
+        ...formData
+      }
+      const {
+        data: { msg }
+      } = await updateFeedback({
+        data: params,
+        _id: newId
+      })
+      message = msg
+      ElMessage({
+        message,
+        type: 'success'
+      })
+      emits('updateTableData')
+      offDialog()
+    })
+    .catch(() => {})
+}
+
+const openDialog = (row) => {
+  dialogVisible.value = true
+  nextTick(() => {
+    formRef.value.clearValidate()
+  })
+  const { content, date, employeeName, status, _id } = row
+  formData.content = content
+  formData.date = date
+  formData.employeeName = employeeName
+  formData.status = status.tagName
+  newId = _id
+}
+const handleClose = () => {
+  offDialog()
+}
+const offDialog = () => (dialogVisible.value = false)
+defineExpose({
+  openDialog,
+  offDialog
+})
+</script>
+
+<style lang="scss" scoped>
+.feedback-form {
+  .tree-content {
+    width: 100%;
+    border: 1px solid #e5e6e7;
+    border-radius: 2px;
+  }
+}
+</style>

app/src/views/components/form/RewardFormCom.vue

@@ -11,7 +11,7 @@
   <div class="reward-form">
     <el-dialog
       v-model="dialogVisible"
-      :title="props.title + '用户'"
+      :title="props.title + '绩效'"
       width="500"
       :before-close="handleClose"
     >

app/src/views/feedback/FeedbackManageView.vue

@@ -1,14 +1,116 @@
 <template>
   <div class="feedback-manage">
     <div clase="table">
-      <BaseTableCom></BaseTableCom>
+      <BaseTableCom
+        :column-data="columnData"
+        :dropdown-data="dropdownData"
+        :table-data="tableData"
+        :total="total"
+        :show-pagination="true"
+        :page-sizes="[5, 8]"
+        @update-table-data="updateTableData"
+        ref="baseTableComRef"
+      ></BaseTableCom>
     </div>
+    <FeedbackFormCom
+      ref="feedbackFormComRef"
+      :title="title"
+      @update-table-data="getTableData"
+    ></FeedbackFormCom>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
+import { dayjs } from 'element-plus'
 import BaseTableCom from '@/components/table/BaseTableCom.vue'
+import { getAllFeedback, deleteFeedback } from '@/api/feedback'
+import FeedbackFormCom from '../components/form/FeedbackFormCom.vue'
+const feedbackFormComRef = ref(null)
+
+const columnData = [
+  {
+    prop: 'content',
+    label: '内容'
+  },
+  {
+    prop: 'employeeName',
+    label: '职工名'
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    tagColumn: true
+  },
+  {
+    prop: 'date',
+    label: '提交时间'
+  }
+]
+const total = ref(0)
+const title = ref('')
+const tableData = ref([])
+const baseTableComRef = ref(null)
+const dropdownData = [
+  {
+    command: 'command1',
+    handleAction: (row) => {
+      returnData(row, '查看')
+    },
+    icon: 'View',
+    actionName: '查看'
+  },
+  {
+    command: 'command2',
+    handleAction: (row) => {
+      returnData(row, '修改')
+    },
+    icon: 'Edit',
+    actionName: '修改'
+  },
+  {
+    command: 'command3',
+    handleAction: async (row) => {
+      const { _id } = row
+      const res = await deleteFeedback({ _ids: [_id] })
+      const { msg } = res.data
+      await getTableData()
+      ElMessage({
+        message: msg,
+        type: 'success'
+      })
+    },
+    icon: 'Delete',
+    actionName: '删除'
+  }
+]
+const getTableData = async (params = null) => {
+  if (!params) {
+    const { currentPage, pageSize } = baseTableComRef.value.getPaginationData()
+    params = { pageIndex: currentPage, pageSize }
+  }
+  const res = await getAllFeedback(params)
+  tableData.value = res.data.data.map((item) => {
+    item.date = dayjs(item.date).format('YYYY-MM-DD')
+    item.status = {
+      tagName: item.status,
+      tagType: item.status === '待处理' ? 'danger' : 'success'
+    }
+    return item
+  })
+  total.value = res.data.total
+}
+const returnData = (row, newTiltle) => {
+  title.value = newTiltle
+  console.log('row:', row)
+  feedbackFormComRef.value.openDialog(row)
+}
+const updateTableData = async (pageSize, pageIndex) => {
+  await getTableData({ pageSize, pageIndex })
+}
+onMounted(async () => {
+  await getTableData({ pageSize: 5, pageIndex: 1 })
+})
 </script>
 
 <style lang="scss" scoped></style>