客服回复配置：问题分类和问题列表部分对接

src/page/main/config/reply-settings/index.vue

@@ -4,14 +4,14 @@
     <div class="main_container">
       <div class="switch-box">
         <div class="switch-label">是否启用</div>
-        <el-switch
+        <!-- 特别说明，本来这个开关适用于整个功能，但是经沟通，后端的欢迎语开关也是唯一的，他们决定用这个欢迎语开关来确认整个功能的是否启用，所以代码逻辑可能产生误会，特此说明 -->
+        <bg-switch
+          @click="handleWelcomeSwitch()"
           class="bg-switch-ele"
-          v-model="ruleForm.state"
-          :active-value="1"
-          :inactive-value="0"
+          v-model="welcome.state"
+          :values="[0, 1]"
           inline-prompt
-          active-text="是"
-          inactive-text="否" />
+          :labels="['否', '是']" />
       </div>
       <div class="welcome-box">
         <div class="welcome-label"><span class="required">*</span>欢迎语</div>
@@ -41,8 +41,15 @@
                   :values="[0, 1]"
                   v-model="row.state"></bg-switch>
               </template>
+              <template #problem_number="{ row }">
+                <router-link :to="`/config/reply-settings/question-category?id=${row.id}`">{{
+                  row.problem_number
+                }}</router-link>
+              </template>
               <template #action="{ row }">
-                <bg-table-btn @click="$router.push('/config/reply-settings/question-category')">添加问题</bg-table-btn>
+                <bg-table-btn @click="$router.push(`/config/reply-settings/question-category?id=${row.id}`)"
+                  >添加问题</bg-table-btn
+                >
                 <bg-table-btn @click="handleCategoryUpdate('edit', row)">编辑</bg-table-btn>
                 <bg-table-btn @click="handleDeleteDialog(row)">删除</bg-table-btn>
                 <bg-table-btn @click="moveRow(row, 1)" :disabled="!row.canMoveUp">上移</bg-table-btn>
@@ -78,7 +85,7 @@
       <template #footer>
         <div class="apaas_button">
           <el-button type="default" @click="dialogCategoryEdit = false">取消</el-button>
-          <el-button type="primary" @click="handleSaveCategory">保存</el-button>
+          <el-button type="primary" @click="handleSaveCategory(bgForm)">保存</el-button>
         </div>
       </template>
     </el-dialog>
@@ -108,17 +115,9 @@ import { ref, reactive, toRefs, onMounted } from "vue";
 import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
 import axios from "@/request/http.js";
 import { ElMessage } from "element-plus";
-
+const bgForm = ref(null);
 const state = reactive({
   welcome: {},
-  categoryEditType: "",
-  dialogCategoryEdit: false,
-  ruleForm: {
-    categoryName: "",
-  },
-  rules: {
-    categoryName: [{ required: true, message: "请输入问题分类", trigger: "blur" }],
-  },
   tableRows: [],
   headers: [
     {
@@ -145,20 +144,27 @@ const state = reactive({
     page: 1,
     limit: 10,
   },
+  categoryEditType: "",
+  dialogCategoryEdit: false,
+  ruleForm: {
+    categoryName: "",
+  },
+  rules: {
+    categoryName: [{ required: true, message: "请输入问题分类", trigger: "blur" }],
+  },
   dialogDelete: false,
   actionRow: null,
 });
 
 const getTableRows = () => {
   let params = { ...state.filter };
-  params.id = state.nodeId;
   axios
     .get(`/apaas/system/v5/customer/service/problem/type`, {
       params,
     })
     .then((res) => {
       if (res.data.code == 200) {
-        state.tableRows = res.data.data;
+        state.tableRows = res.data.data || [];
         state.tableTotal = res.data.total;
         if (state.tableRows.length > 0) {
           state.tableRows.forEach((e) => {
@@ -250,7 +256,10 @@ const handleCategoryUpdate = (type, row) => {
   }
 };
 
-const handleSaveCategory = () => {
+const handleSaveCategory = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
       const isNew = state.categoryEditType === "create";
       axios
         .post("/apaas/system/v5/customer/service/problem/type", {
@@ -268,6 +277,10 @@ const handleSaveCategory = () => {
             ElMessage.error(data.data);
           }
         });
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
 };
 
 const handleDeleteDialog = (row) => {
@@ -287,6 +300,17 @@ const deleteData = () => {
   });
 };
 
+const handleWelcomeSwitch = () => {
+  // 可能会造成的bug，如果用户改了欢迎语，但是不点保存，直接点击开关，也会影响到欢迎语的变化，所以千万不要修改欢迎语不保存，去点击开关。
+  axios.post("/apaas/system/v5/customer/service/welcome", state.welcome).then(({ data }) => {
+    if (data.code === 200) {
+      ElMessage.success("操作成功");
+    } else {
+      ElMessage.error(data.data);
+    }
+  });
+};
+
 const getWelcomeText = () => {
   axios.get("/apaas/system/v5/customer/service/welcome").then(({ data }) => {
     if (data.data) {
@@ -377,7 +401,7 @@ const {
 }
 .welcome-box {
   margin-top: 23px;
-  .label .required {
+  .welcome-label .required {
     color: #d75138;
   }
   .welcome-form {
@@ -391,6 +415,7 @@ const {
 
 .question-box {
   margin-top: 42px;
+  height: 100%;
   .el-button {
     margin: 23px 0 8px;
   }

src/page/main/config/reply-settings/question-category/index.vue

+<template>
+  <div class="detail_container">
+    <bg-breadcrumb></bg-breadcrumb>
+    <div class="main_container">
+      <div class="question-box">
+        <div>问题分类 - {{ category.problem_type }}（{{ category.problem_number }}/8）</div>
+        <el-button type="primary" @click="handleQuestionUpdate('create')">
+          <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon>
+          新增
+        </el-button>
+        <div class="table_container" style="padding: 0">
+          <div class="table bg-scroll">
+            <bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
+              <template #action="{ row }">
+                <bg-table-btn @click="handleQuestionUpdate('edit', row)">编辑</bg-table-btn>
+                <bg-table-btn @click="handleDeleteDialog(row)">删除</bg-table-btn>
+                <bg-table-btn @click="moveRow(row, 1)" :disabled="!row.canMoveUp">上移</bg-table-btn>
+                <bg-table-btn @click="moveRow(row, 2)" :disabled="!row.canMoveDown">下移</bg-table-btn>
+              </template>
+            </bg-table>
+          </div>
+          <!-- <bg-pagination
+            :page="filter.page"
+            :size="filter.size"
+            :total="tableTotal"
+            @change-page="changePage"
+            @change-size="changeSize">
+          </bg-pagination> -->
+        </div>
+      </div>
+    </div>
+    <el-dialog
+      class="dialog_box"
+      :title="questionEditType == 'create' ? '新增' : '编辑'"
+      v-model="dialogQuestionEdit"
+      width="614px">
+      <el-form ref="bgForm" :model="ruleForm" :rules="rules" label-width="80px" class="bg_form">
+        <el-form-item label="标题" prop="title">
+          <el-input
+            v-model="ruleForm.title"
+            type="text"
+            show-word-limit
+            maxlength="50"
+            placeholder="请输入标题"></el-input>
+        </el-form-item>
+        <el-form-item label="回复内容" prop="content">
+          <el-input
+            v-model="ruleForm.content"
+            type="textarea"
+            :rows="8"
+            show-word-limit
+            maxlength="500"
+            placeholder="请输入回复内容"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="apaas_button">
+          <el-button type="default" @click="dialogQuestionEdit = false">取消</el-button>
+          <el-button type="primary" @click="handleSaveCategory(bgForm)">保存</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <el-dialog
+      class="dialog_box"
+      title="提示"
+      v-model="dialogDelete"
+      width="400px"
+      :before-close="
+        () => {
+          dialogDelete = false;
+        }
+      ">
+      <div>确定要删除吗？</div>
+      <template #footer>
+        <div class="apaas_button">
+          <el-button type="default" @click="dialogDelete = false">取 消</el-button>
+          <el-button type="primary" @click="deleteData">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, reactive, toRefs, ref } from "vue";
+import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
+import { useRoute } from "vue-router";
+import axios from "@/request/http.js";
+import { ElMessage } from "element-plus";
+
+const route = useRoute();
+const { id } = route.query;
+
+const bgForm = ref(null);
+const state = reactive({
+  category: {},
+  tableRows: [],
+  // filter: {
+  //   page: 1,
+  //   limit: 10,
+  // },
+  headers: [
+    {
+      label: "标题",
+      prop: "title",
+      width: 180,
+    },
+    {
+      label: "回复内容",
+      prop: "content",
+    },
+    {
+      label: "操作",
+      prop: "action",
+      width: 260,
+      fixed: "right",
+    },
+  ],
+  questionEditType: "",
+  dialogQuestionEdit: false,
+  ruleForm: {
+    title: "",
+    content: "",
+  },
+  rules: {
+    title: [{ required: true, message: "请输入标题", trigger: "blur" }],
+    content: [{ required: true, message: "请输入回复内容", trigger: "blur" }],
+  },
+  dialogDelete: false,
+  actionRow: null,
+});
+
+const handleDeleteDialog = (row) => {
+  state.actionRow = row;
+  state.dialogDelete = true;
+};
+
+const deleteData = () => {
+  axios.delete(`/apaas/system/v5/customer/service/problem/${state.actionRow.id}`).then(({ data }) => {
+    if (data.code === 200) {
+      ElMessage.success("操作成功");
+      getCategoryWithQuestions();
+      state.dialogDelete = false;
+    } else {
+      ElMessage.error(data.data);
+    }
+  });
+};
+
+const handleQuestionUpdate = (type, row) => {
+  state.dialogQuestionEdit = true;
+  state.questionEditType = type;
+  if (type !== "create") {
+    state.actionRow = row;
+    state.ruleForm.title = row.problem_type;
+  }
+};
+
+const handleSaveCategory = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      const isNew = state.questionEditType === "create";
+      axios
+        .post(
+          "/apaas/system/v5/customer/service/problem",
+          Object.assign(
+            {
+              problem_type_id: state.category.problem_type_id,
+              title: state.ruleForm.title,
+              content: state.ruleForm.content,
+            },
+            !isNew && { id: actionRow.id }
+          )
+        )
+        .then(({ data }) => {
+          if (data.code === 200) {
+            getCategoryWithQuestions();
+            ElMessage.success("添加成功");
+            state.dialogQuestionEdit = false;
+            state.ruleForm.title = "";
+            state.ruleForm.content = "";
+          } else {
+            ElMessage.error(data.data);
+          }
+        });
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+
+const getCategoryList = () => {
+  axios.get(`/apaas/system/v5/customer/service/problem/type`).then((res) => {
+    if (res.data.code == 200) {
+      const [category] = res.data.data.filter((item) => item.id.toString() === id);
+      state.category = category;
+    } else {
+      ElMessage.error(res.data.data);
+    }
+  });
+};
+
+const getQuestionList = () => {
+  axios.get(`/apaas/system/v5/customer/service/problem/${id}`).then(({ data }) => {
+    state.tableRows = data.data || [];
+    if (state.tableRows.length > 0) {
+      state.tableRows.forEach((e) => {
+        e.canMoveUp = true;
+        e.canMoveDown = true;
+      });
+      state.tableRows[0].canMoveUp = false;
+      state.tableRows[state.tableRows.length - 1].canMoveDown = false;
+    }
+  });
+};
+
+const moveRow = (row, type) => {
+  let index;
+  state.tableRows.forEach((e, i) => {
+    if (e.id == row.id) {
+      index = i;
+    }
+  });
+  let nextRow;
+  if (type == 1) {
+    // 上移
+    nextRow = state.tableRows[index - 1];
+  } else {
+    // 下移
+    nextRow = state.tableRows[index + 1];
+  }
+  let params = [
+    {
+      id: row.id,
+      sort: nextRow.sort,
+    },
+    {
+      id: nextRow.id,
+      sort: row.sort,
+    },
+  ];
+  axios
+    .post(`/apaas/system/v5/customer/service/problem/sort`, [...params])
+    .then((res) => {
+      if (res.data.code == 200) {
+        ElMessage.success("操作成功");
+        getCategoryWithQuestions();
+      } else {
+        ElMessage.error(res.data.data);
+      }
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+};
+
+const getCategoryWithQuestions = () => {
+  getCategoryList();
+  getQuestionList();
+};
+
+onMounted(() => {
+  getCategoryWithQuestions();
+});
+
+const { category, tableRows, headers, ruleForm, rules, questionEditType, dialogQuestionEdit, dialogDelete } =
+  toRefs(state);
+</script>
+
+<style lang="scss" scoped>
+.detail_container {
+  width: 100%;
+  padding: 0 24px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  font-size: 14px;
+  .main_container {
+    padding: 40px;
+    flex-grow: 1;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    background-color: #fff;
+    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
+    border-radius: 6px;
+    margin: 0 0 16px;
+    position: relative;
+    height: calc(100% - 62px);
+    .table_container {
+      height: calc(100% - 70px);
+      padding: 0 16px;
+      .table {
+        max-height: calc(100% - 64px);
+      }
+    }
+  }
+}
+
+.question-box {
+  height: 100%;
+  .el-button {
+    margin: 40px 0 8px;
+  }
+}
+
+:deep(.el-dialog__body) {
+  padding-bottom: 0;
+}
+</style>