课程提问

src/api/biz/qa.js

+/******************
+ * 课程标签
+ *****************/
+
+// 导入请求公用方法
+import {
+    request
+} from '../../utils/axiosFun';
+
+export const answerObj = (obj) => {
+    return request('post','/api/mgr/qa/answer',obj)
+}
+export const modifyStatus = (obj) => {
+    return request('get','/api/mgr/qa/question/complete',obj, "T")
+}
+export const fetchList = (query) => {
+    return request('post','/api/mgr/qa/list',query)
+}
+export const fetchAnswerList = (query) => {
+    return request('post','/api/mgr/qa/answerList',query)
+}
\ No newline at end of file

src/router/index.js

@@ -50,6 +50,30 @@ const routes = [{
       component: () => import('@/views/biz/course/detail')
     }
   ]
+},
+{
+  path: '/edu',
+  name: 'qaDetail',
+  component: () => import ('@/views/index'),
+  children: [
+    {
+      path: 'biz/qa/detail',
+      name: '问答记录',
+      component: () => import('@/views/biz/qa/detail')
+    }
+  ]
+},
+{
+  path: '/edu',
+  name: 'qa',
+  component: () => import ('@/views/index'),
+  children: [
+    {
+      path: 'biz/qa/index',
+      name: '课程提问',
+      component: () => import('@/views/biz/qa/index')
+    }
+  ]
 }
 
 ]

src/views/biz/qa/detail.vue

+<template>
+  <div class="template_content">
+    <!-- 表格内容 -->
+    <div class="content_box">
+      <a-table
+        :columns="columns"
+        :dataSource="data"
+        :loading="loading"
+        :pagination="pagination"
+        bordered
+        size="small"
+        @change="handleTableChange"
+        rowKey="id"
+      >
+      </a-table>
+      <a-form-model :label-col="{ span: 4 }">
+        <div class="btn-div">
+          <a-button
+            type="primary"
+            v-if="status != 'COMPLETE'"
+            @click="showModal('')"
+          >
+            回复 </a-button
+          >&nbsp;
+          <a-button class="cancel-btn" @click="onCancel">返回</a-button>
+        </div>
+      </a-form-model>
+    </div>
+
+    <!-- Modal窗口 -->
+    <template>
+      <a-modal
+        :visible="modalVisible"
+        :title="modalTitle"
+        @ok="onConfirm"
+        @cancel="onCancel2"
+      >
+        <a-form-model
+          :model="formModel"
+          :label-col="{ span: 4 }"
+          :wrapper-col="{ span: 12 }"
+          :rules="formRules"
+          ref="formModelRef"
+        >
+          <a-form-model-item label="回复内容" prop="content" disabled>
+            <a-textarea row="2" v-model="formModel.content" />
+          </a-form-model-item>
+        </a-form-model>
+      </a-modal>
+    </template>
+  </div>
+</template>
+
+<script>
+import { answerObj, fetchAnswerList } from "@/api/biz/qa";
+import { disposereq, timestampToTime } from "@/utils/util";
+
+let columns = [
+  {
+    title: "用户",
+    dataIndex: "nickName",
+    align: "center",
+  },
+  {
+    title: "时间",
+    dataIndex: "createTime",
+    align: "center",
+    customRender: (text) => {
+      return text ? timestampToTime(text) : "-";
+    },
+    width: 180,
+  },
+  {
+    title: "内容",
+    dataIndex: "content",
+    align: "center",
+  },
+];
+
+export default {
+  data() {
+    return {
+      columns: columns,
+      data: [],
+      searchPage: {
+        pageIndex: 1,
+        pageSize: 10,
+      },
+      pagination: {
+        showQuickJumper: true,
+        showSizeChanger: true,
+      },
+      status: this.$route.query.status,
+      modalVisible: false,
+      modalTitle: "回复",
+      loading: false,
+      formModel: {
+        questionId: this.$route.query.id,
+        content: "",
+      },
+      formRules: {
+        content: [
+          {
+            required: true,
+            message: "不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  // 创建完毕
+  created() {
+    let questionId = this.$route.query.id;
+    if (questionId) {
+      this.searchPage.questionId = questionId;
+      this.getAnswerList(this.searchPage);
+    }
+  },
+  // 即将更新渲染
+  beforeUpdate() {},
+  methods: {
+    getAnswerList(query) {
+      this.loading = true;
+      fetchAnswerList(query)
+        .then((res) => {
+          if (res.code == 200) {
+            this.data = res.data;
+            let paper = { ...this.pagination };
+            paper.current = query.pageIndex;
+            paper.total = res.count;
+            this.pagination = paper;
+          } else {
+            this.$message.info(res.resp_msg);
+          }
+          this.loading = false;
+        })
+        .catch((err) => {
+          this.loading = false;
+          disposereq(this, err);
+        });
+    },
+    answer() {
+      let data = { ...this.formModel };
+      answerObj(data)
+        .then((res) => {
+          if (res.resp_code == 200) {
+            this.$message.info("回复成功");
+            this.getAnswerList(this.searchPage);
+          } else {
+            this.$message.info(res.resp_msg);
+          }
+        })
+        .catch((err) => {
+          disposereq(this, err);
+        });
+    },
+    showModal() {
+      this.modalVisible = true;
+    },
+    onConfirm() {
+      this.$refs.formModelRef.validate((valid) => {
+        if (valid) {
+          this.answer();
+          this.closeModal();
+        } else {
+          return false;
+        }
+      });
+    },
+    onCancel2() {
+      this.closeModal();
+    },
+    closeModal() {
+      this.modalVisible = false;
+      this.$refs.formModelRef.resetFields();
+    },
+
+    handleTableChange() {
+      let queryParam = { ...this.searchPage };
+      queryParam.pageIndex = pagination.current;
+      queryParam.pageSize = pagination.pageSize;
+      this.getList(queryParam);
+    },
+    navigateIndexPage(row) {
+      let queryParam = {
+        pageIndex: 1,
+        pageSize: 10,
+      };
+      this.$router.push({ path: "/edu/biz/qa/index", queryParam });
+    },
+    onCancel() {
+      this.$router.push("/edu/biz/qa/index");
+    },
+  },
+};
+</script>
+<style>
+.template_content {
+  background-color: #f0f2f5;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+.search_box {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 14px;
+  background-color: #fff;
+}
+.content_box {
+  width: 100%;
+  background-color: #fff;
+  margin-top: 10px;
+  padding: 14px;
+}
+.table_top {
+  padding-bottom: 14px;
+}
+.btn_margin {
+  margin: 0px 5px;
+}
+.btn-div {
+  text-align: center;
+}
+</style>
\ No newline at end of file

src/views/biz/qa/index.vue

+<template>
+  <div class="template_content">
+    <!-- 搜索 -->
+    <div class="search_box">
+      <a-form layout="inline">
+        <a-form-item label="">
+          <a-input
+            v-model="searchPage.condition"
+            placeholder="请输入用户昵称或手机号码"
+            allowClear
+          ></a-input>
+        </a-form-item>
+        <a-form-item>
+          <a-button type="primary" icon="search" @click="handlSearch"
+            >查询</a-button
+          >
+        </a-form-item>
+      </a-form>
+    </div>
+
+    <!-- 表格内容 -->
+    <div class="content_box">
+      <a-table
+        :columns="columns"
+        :dataSource="data"
+        :loading="loading"
+        :pagination="pagination"
+        bordered
+        size="small"
+        @change="handleTableChange"
+        rowKey="id"
+      >
+        <!-- 状态 -->
+        <div slot="status" slot-scope="text, record">
+          <span>{{
+            statusList.filter((e) => e.key == record.status)[0].label
+          }}</span>
+        </div>
+
+        <!-- 操作 -->
+        <template slot="action" slot-scope="text, record">
+          <span v-if="record.status != 'COMPLETE'">
+            <a-button type="link" @click="changeStatus(record)"
+              >结束</a-button
+            ></span
+          >
+
+          <a-button icon="edit" type="link" @click="navigateDetailPage(record)"
+            >查看</a-button
+          >
+        </template>
+      </a-table>
+    </div>
+  </div>
+</template>
+<script>
+import { fetchList, modifyStatus } from "@/api/biz/qa";
+import { disposereq } from "@/utils/util";
+
+let columns = [
+  {
+    title: "编号",
+    dataIndex: "id",
+    align: "center",
+  },
+  {
+    title: "用户昵称",
+    dataIndex: "nickName",
+    align: "center",
+    customRender: (text) => {
+      return text ? text : "-";
+    },
+  },
+  {
+    title: "课程名称",
+    dataIndex: "courseName",
+    align: "center",
+  },
+  {
+    title: "问题内容",
+    dataIndex: "content",
+    align: "center",
+  },
+  {
+    title: "状态",
+    dataIndex: "status",
+    align: "center",
+    scopedSlots: { customRender: "status" },
+    width: 100,
+  },
+  {
+    title: "操作",
+    key: "action",
+    scopedSlots: { customRender: "action" },
+    align: "center",
+    width: 180,
+  },
+];
+export default {
+  data() {
+    return {
+      columns: columns,
+      data: [],
+      searchPage: {
+        pageIndex: 1,
+        pageSize: 10,
+        condition: "",
+      },
+      pagination: {
+        showQuickJumper: true,
+        showSizeChanger: true,
+      },
+      loading: false,
+      statusList: [
+        {
+          key: "WAIT_REPLY",
+          label: "待回复",
+        },
+        {
+          key: "REPLY",
+          label: "已回复",
+        },
+        {
+          key: "COMPLETE",
+          label: "已完成",
+        },
+      ],
+    };
+  },
+  // 创建完毕
+  created() {
+    this.getList(this.searchPage);
+  },
+  // 即将更新渲染
+  beforeUpdate() {},
+  methods: {
+    getList(query) {
+      this.loading = true;
+      fetchList(query)
+        .then((res) => {
+          if (res.code == 200) {
+            this.data = res.data;
+            let paper = { ...this.pagination };
+            paper.current = query.pageIndex;
+            paper.total = res.count;
+            this.pagination = paper;
+          } else {
+            this.$message.info(res.resp_msg);
+          }
+          this.loading = false;
+        })
+        .catch((err) => {
+          this.loading = false;
+          disposereq(this, err);
+        });
+    },
+    handlSearch() {
+      let queryParam = { ...this.searchPage };
+      this.getList(queryParam);
+    },
+    handleTableChange() {
+      let queryParam = { ...this.searchPage };
+      queryParam.pageIndex = pagination.current;
+      queryParam.pageSize = pagination.pageSize;
+      this.getList(queryParam);
+    },
+    navigateDetailPage(row) {
+      this.$router.push({
+        path: "/edu/biz/qa/detail",
+        query: { id: row.id, status: row.status },
+      });
+    },
+    changeStatus(row) {
+      console.log(row.id);
+      let modifyStatusObj = {};
+      modifyStatusObj.questionId = row.id;
+      modifyStatus(modifyStatusObj)
+        .then((res) => {
+          if (res.resp_code == 200) {
+            this.$message.info("修改状态成功");
+            this.getList(this.searchPage);
+          } else {
+            this.$message.info(res.resp_msg);
+          }
+        })
+        .catch((err) => {
+          disposereq(this, err);
+        });
+    },
+  },
+};
+</script>
+<style>
+.template_content {
+  background-color: #f0f2f5;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+.search_box {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 14px;
+  background-color: #fff;
+}
+.content_box {
+  width: 100%;
+  background-color: #fff;
+  margin-top: 10px;
+  padding: 14px;
+}
+.table_top {
+  padding-bottom: 14px;
+}
+.btn_margin {
+  margin: 0px 5px;
+}
+</style>
\ No newline at end of file