From 5efed41edcade2ed54e1ec1776a87b9969f21830 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=A2=E6=A1=82=E5=90=8D?= <2106139272@qq.com>
Date: Fri, 20 Jan 2023 11:55:31 +0800
Subject: [PATCH] =?UTF-8?q?TodoTask=E7=BC=96=E8=BE=91=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/TodoTask.vue | 127 ++++++++++++++++++++++++++++-------------
 1 file changed, 88 insertions(+), 39 deletions(-)

diff --git a/src/views/TodoTask.vue b/src/views/TodoTask.vue
index 356b682..63c4c10 100644
--- a/src/views/TodoTask.vue
+++ b/src/views/TodoTask.vue
@@ -39,7 +39,7 @@
         v-for="(todo, idx) in todoList"
         :key="todo.execute_date + idx"
       >
-        <el-button class="timeline-btn" icon="el-icon-edit" @click="showQuestionDialog = true" circle ></el-button>
+        <el-button class="timeline-btn" icon="el-icon-edit" @click="getQuestionMsg()" circle ></el-button>
         <div class="task-container scroll-box" :id="todo.execute_date">
           <div
             v-for="task in todo.task_items"
@@ -95,11 +95,11 @@
                 <div class="task-title">
                   <el-tooltip
                     disabled
-                    class="box-item"
                     effect="dark"
                     :content="task.content"
                     placement="top"
                     popper-class="tool-tip"
+                    class="scroll-box"
                   >
                     <p style="max-height: 200px;overflow: auto;">
                       {{ task.content
@@ -225,26 +225,20 @@
   <el-dialog
     title="问题补充"
     v-model="showQuestionDialog"
-    width="600px"
+    width="1000px"
+    :close-on-click-modal = "false"
   >
-    <el-form :model="ruleForm" status-icon ref="formRef" label-width="120px">
-        <el-row :gutter="20">
-            <el-col :span="4">
-                <el-form-item>
-                    <el-button type="primary" @click="addFruitConfig">新增行</el-button>
-                </el-form-item>
-            </el-col>
-        </el-row>
+    <el-form :model="ruleForm" status-icon ref="questionFormRef" label-width="80px" :rules="questionRules">
         <el-row :gutter="20" v-for="(item, index) in ruleForm.fruitConfig" :key="index">
-            <el-col :span="10">
-                <el-form-item label="水果名称" prop="'fruit' + index">
-                    <el-input type="text" v-model="item.fruit" autocomplete="off" maxlength="50">
+            <el-col :span="19">
+                <el-form-item :label="'问题' + (index + 1)" :prop="`fruitConfig.${index}.fruit`" :rules="questionRules.fruitConfig.fruit">
+                    <el-input type="text" v-model="item.fruit" autocomplete="off" maxlength="30" show-word-limit>
                     </el-input>
                 </el-form-item>
             </el-col>
-            <el-col :span="10">
-                <el-form-item label="水果售价" prop="'price' + index">
-                    <el-input type="text" v-model="item.price" autocomplete="off" maxlength="50">
+            <el-col :span="19">
+                <el-form-item label="解答" :prop="`fruitConfig.${index}.price`" :rules="questionRules.fruitConfig.price">
+                    <el-input type="textarea" :rows="4" v-model="item.price" autocomplete="off">
                     </el-input>
                 </el-form-item>
             </el-col>
@@ -255,8 +249,9 @@
     </el-form>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="showQuestionDialog = false">取 消</el-button>
-        <el-button type="primary" @click="submitTarget">确 定</el-button>
+        <el-button @click="questionCancel">取 消</el-button>
+        <el-button type="primary" @click="submitTarget">提 交</el-button>
+        <el-button type="warning" @click="addFruitConfig">新 增</el-button>
       </span>
     </template>
   </el-dialog>
@@ -282,6 +277,7 @@ export default {
   name: "Todos",
   setup() {
     const formRef = ref(null);
+    const questionFormRef = ref(null);
     const state = reactive({
       loading: false,
       todoList: [],
@@ -326,7 +322,20 @@ export default {
       },
       pageSize: 10,
       pageNum: 1,
-      todoTotal: 0
+      todoTotal: 0,
+      questionRules: {
+        type: 'array',
+        required: true,
+        message: '至少有一个问题',
+        fruitConfig: {
+          fruit: [
+            { required: "true", message: "问题不能为空", trigger: 'blur' },
+          ],
+          price: [
+            { required: "true", message: "解答不能为空", trigger: 'blur' },
+          ],
+        }
+      },
     });
     const route = useRoute();
     const getPlanList = async () => {
@@ -514,14 +523,19 @@ export default {
     };
 
     const submitTarget = () => {
-      formRef.value.validate(async (valid) => {
+      if(state.ruleForm.fruitConfig.length == 0) {
+        ElMessage.error("至少有一个问题!");
+        return;
+      }
+      questionFormRef.value.validate(async (valid) => {
         if (valid) {
-          const res = await editTarget(state.targetForm);
+          const res = await editTarget(state.ruleForm);
           getTodoList("add", res?.id);
           getDetail();
           ElMessage.success("编辑成功!");
           state.showTargetDialog = false;
-          formRef.value.resetFields();
+          questionFormRef.value.resetFields();
+          state.showQuestionDialog = false;
         }
       });
     };
@@ -544,6 +558,20 @@ export default {
       console.log("水果名称：" + fruitConfig[0].fruit);
       console.log("水果售价：" + fruitConfig[0].price);
     }
+    // 编辑问题方法,方便后续按日期请求数据
+    const getQuestionMsg = () => {
+      state.showQuestionDialog = true;
+      state.ruleForm = {
+        fruitConfig: [{
+            fruit: '',
+            price: ''
+        }]
+      }
+    }
+    const questionCancel = () => {
+      state.showQuestionDialog = false;
+      questionFormRef.value.resetFields();
+    }
     // 必须返回，除非升级vue3版本
     return {
       ...toRefs(state),
@@ -564,7 +592,10 @@ export default {
       handleCurrentChange,
       addFruitConfig,
       removeFruitConfig,
-      submitFruit
+      submitFruit,
+      getQuestionMsg,
+      questionFormRef,
+      questionCancel
     };
   },
 };
@@ -673,21 +704,6 @@ export default {
 	margin-bottom: 18px;
 	float: left;
 }
-/*滚动条样式*/
-.box-item::-webkit-scrollbar {
-    width: 4px;    
-}
-.box-item::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-    background: rgba(0,0,0,0.2);
-}
-.box-item::-webkit-scrollbar-track {
-    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-    border-radius: 0;
-    background: rgba(0,0,0,0.1);
-
-}
 </style>
 <style>
 .el-timeline {
@@ -704,4 +720,37 @@ export default {
 .tool-tip {
   max-width: 600px;
 }
+.el-dialog {
+  margin: 40px auto !important;
+  max-height: 90%;
+  overflow: auto;
+}
+/*滚动条样式*/
+.el-dialog::-webkit-scrollbar {
+  width: 4px;    
+}
+.el-dialog::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+  background: rgba(0,0,0,0.2);
+}
+.el-dialog::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+  border-radius: 0;
+  background: rgba(0,0,0,0.1);
+}
+.el-textarea__inner::-webkit-scrollbar {
+  height: 5px;
+  width: 4px;    
+}
+.el-textarea__inner::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+  background: rgba(0,0,0,0.2);
+}
+.el-textarea__inner::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+  border-radius: 0;
+  background: rgba(0,0,0,0.1);
+}
 </style>
-- 
Gitee