FEAT:创建测评对接（差第二个value），评估改版 创建评估对接

src/components/drawers/AddEval.vue

@@ -64,7 +64,6 @@
                 style="width: 424px"
                 v-model:value="time"
                 format="YYYY-MM-DD HH:mm:ss"
-                @change="onChange"
                 :placeholder="['      开始时间', '        结束时间']"
               />
             </div>
@@ -76,7 +75,7 @@
             <div class="textarea">
               <a-upload
                 v-model:file-list="fileList"
-                name="avatar"
+                name="file"
                 list-type="picture-card"
                 class="avatar-uploader"
                 :show-upload-list="false"
@@ -103,33 +102,12 @@
   </a-drawer>
 </template>
   <script>
-import { reactive, toRefs, ref } from "vue";
+import { reactive, toRefs, ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import * as api from "../../api/indexEval";
 import { message } from "ant-design-vue";
-// import { toDate } from "../../api/method";
+import { toDate } from "../../api/method";
 const router = useRouter();
-const rowSelection = ref({
-  checkStrictly: false,
-  onChange: (selectedRowKeys, selectedRows) => {
-    console.log(
-      `selectedRowKeys: ${selectedRowKeys}`,
-      "selectedRows: ",
-      selectedRows
-    );
-  },
-  onSelect: (record, selected, selectedRows) => {
-    console.log(record, selected, selectedRows);
-  },
-  onSelectAll: (selected, selectedRows, changeRows) => {
-    console.log(selected, selectedRows, changeRows);
-  },
-});
-function getBase64(img, callback) {
-  const reader = new FileReader();
-  reader.addEventListener('load', () => callback(reader.result));
-  reader.readAsDataURL(img);
-}
 export default {
   name: "AddEval",
   // components: {
@@ -145,82 +123,116 @@ export default {
       inputV1: "",
       inputV2: "",
       time: undefined,
-      endTime: undefined,
-      startTime: undefined,
+      endTimes : "",
+      startTimes: "",
+      picUrl: "",
+      tableData: [],
+      deletePathId: null, //删除路径id
+      editPathId: null, //修改路径id
+      currentPage: 1, //当前页
+      tableDataTotal: -1, //学习路径列表总数
+      pageSize: 10, //每页10条数据
     });
+
     const closeDrawer = () => {
       ctx.emit("update:addevalVisible", false);
       state.inputV1 = "";
       state.inputV2 = "";
-      state.time = undefined;
     };
     const afterVisibleChange = (bool) => {
       console.log("state", bool);
     };
-    const onChange = () => {
-      state.endTime = state.time[0].$d.toString;
-      state.startTime = state.time[1].$d.toString;
-    }
+
     //上传组件
+    function getBase64(img, callback) {
+			const reader = new FileReader();
+			reader.addEventListener('load', () => callback(reader.result));
+			reader.readAsDataURL(img);
+    }
+    
     const fileList = ref([]);
     const loading = ref(false);
     const imageUrl = ref('');
 
-    const handleChange = info => {
-      if (info.file.status === 'uploading') {
-        loading.value = true;
-        return;
-      }
-
-      if (info.file.status === 'done') {
-        // Get this url from response in real world.
-        getBase64(info.file.originFileObj, base64Url => {
-          imageUrl.value = base64Url;
+		const handleChange = (info) => {
+			if (info.file.status === 'uploading') {
+				loading.value = true;
+				return;
+			}
+			if (info.file.status === 'done') {
+				console.log('上传图片返回的信息 %o', info)
+				state.picUrl = info.file.response.data;
+				// Get this url from response in real world.
+				getBase64(info.file.originFileObj, (base64Url) => {
+					imageUrl.value = base64Url;
           loading.value = false;
         });
-      }
+			}
+			if (info.file.status === 'error') {
+				loading.value = false;
+				message.error('upload error');
+			}
+    };
 
-      if (info.file.status === 'error') {
-        loading.value = false;
-        message.error('upload error');
-      }
-    }
-    const beforeUpload = file => {
-      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+		const beforeUpload = (file) => {
+			const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+			if (!isJpgOrPng) {
+				message.error('You can only upload JPG file!');
+			}
+			const isLt2M = file.size / 1024 / 1024 < 1;
+			if (!isLt2M) {
+				message.error('Image must smaller than 1MB!');
+			}
+			return isJpgOrPng && isLt2M;
+		};
 
-      if (!isJpgOrPng) {
-        message.error('You can only upload JPG file!');
-      }
+    const getTableDate = (tableData) => {
+      let data = tableData;
+      let array = [];
+      data.map((value, index) => {
+        let obj = {
+          id: value.routerId,
+          number: (state.currentPage - 1) * state.pageSize + index + 1,
+          manager: value.name ? value.name : "-",
+          state:
+            value.status === 0
+              ? "草稿"
+              : value.status === 1
+              ? "已发布"
+              : value.status === -1
+              ? "已停用"
+              : "-",
+          creater: value.createName ? value.createName : "-",
+          pubtime: value.publishTime
+            ? toDate(value.publishTime, "Y-M-D h:m:s")
+            : "-",
+          cretime: value.createTime
+            ? toDate(value.createTime, "Y-M-D h:m:s")
+            : "-",
+          remark: value.remark ? value.remark : "-",
+        };
+        array.push(obj);
+      });
+      state.tableData = array;
+    };
 
-      const isLt2M = file.size / 1024 / 1024 < 2;
-
-      if (!isLt2M) {
-        message.error('Image must smaller than 2MB!');
-      }
-
-      return isJpgOrPng && isLt2M;
-    }
-    // const fileUp = () => {
-    //   let obj = {
-    //     file
-    //   }
-    // }
     //创建测评信息
     const createEvalText = () => {
       if (!state.inputV1) return message.info("请输入测评名称");
-      console.log(state.time);
-      console.log(state.time[0]);
-      console.log(state.time[0].$d.toString);
-      console.log(state.time[1].$d.toString);
+      if ( state.time != undefined) {
+        state.endTimes = toDate(new Date(state.time[0].$d).getTime() / 1000, "Y-M-D")
+        state.startTimes = toDate(new Date(state.time[1].$d).getTime() / 1000, "Y-M-D")
+      } 
+    
       let obj = {
         evaluationName: state.inputV1,
         createTime: "",
         createUser: 0,
-        evaluationEndTime: state.endTime,
+        evaluationEndTime: state.endTimes,
         evaluationFlag: "",
         evaluationId: "",
-        evaluationPictureAddress: "",
-        evaluationStartTime: state.startTime,
+        evaluationPictureAddress: state.picUrl,
+        evaluationStartTime: state.startTimes,
         evaluationTag: "",
         evaluationTypeId: 0,
         evaluationTypeName: "",
@@ -233,7 +245,6 @@ export default {
           setTimeout(() => {
             console.log("创建成功", res);
             message.success("创建成功");
-            console.log(obj);
             // state.createLoading = false;
             router.push("/leveladd");
             // getLearnPath();
@@ -245,13 +256,103 @@ export default {
         });
     };
 
+    //获取学习路径列表
+    const getEvalPath = () => {
+      let obj = {
+        pageNo: state.currentPage,
+        pageSize: state.pageSize,
+      };
+      api
+        .queryEvaluationDetailById(obj)
+        .then((res) => {
+          if (res.status === 200) {
+            console.log("获取任务列表数据", res.data.data);
+            let arr = res.data.data.rows;
+            if (
+              arr.length === 0 &&
+              res.data.data.total > 0 &&
+              state.currentPage > 1
+            ) {
+              state.currentPage = state.currentPage - 1;
+              getEvalPath();
+            }
+            getTableDate(arr);
+            state.tableDataTotal = Number(res.data.data.total);
+          }
+        })
+        .catch((err) => {
+          console.log("获取学习路径失败", err);
+        });
+    };
+    //翻页 需要去pa里绑定 @change="changePagination"
+    const changePagination = (page) => {
+      state.currentPage = page;
+      getEvalPath();
+      // console.log("翻页", page, pageSize);
+    };
+    //删除评估
+    const deleteEvalPath = () => {
+      let obj = {
+        routerId: state.deletePathId,
+        type: -2,
+      };
+      api
+        .deleteEvaluationById(obj)
+        .then((res) => {
+          console.log("删除成功", res);
+          message.success("删除成功");
+          // state.deleteModal = false;
+          getEvalPath();
+        })
+        .catch((err) => {
+          console.log("删除失败", err);
+        });
+    };
+    //编辑评估
+    const editEvalPath = () => {
+      if (!state.pathName) return message.info("请输入路径图名称");
+      // if (!state.organizationSelectName) return message.info("请选择归属组织");
+      // state.createLoading = true;
+      let obj = {
+        routerId: state.editPathId,
+        name: state.pathName,
+        picUrl: "",
+        remark: state.pathIntro,
+        status: 0,
+      };
+      api
+        .updateEvaluation(obj)
+        .then((res) => {
+          setTimeout(() => {
+            console.log("修改成功", res);
+            message.success("修改成功");
+            // state.createLoading = false;
+            // state.currentPage = 1;
+            // state.out1 = false;
+            // router.push("/leveladd");
+            getEvalPath();
+          }, 1000);
+        })
+        .catch((err) => {
+          console.log("修改失败", err);
+          // state.createLoading = false;
+        });
+    };
+    onMounted(() => {
+      // console.log("执行");
+      getEvalPath();
+    });
+
     return {
       ...toRefs(state),
       afterVisibleChange,
       closeDrawer,
-      rowSelection,
+      //增删改查
       createEvalText,
-      onChange,
+      getEvalPath,
+      changePagination,
+      deleteEvalPath,
+      editEvalPath,
       //上传组件
       fileList,
       loading,

src/components/drawers/AddInvist.vue

@@ -2,7 +2,7 @@
   <a-drawer
     :visible="addinvistVisible"
     class="drawerStyle addinvistDrawer"
-    width="80%"
+    width="70%"
     title="添加评估"
     placement="right"
     @after-visible-change="afterVisibleChange"
@@ -19,68 +19,50 @@
       <div class="contentMain">
         <div class="main_left">
           <div class="main_item">
-            <div class="signbox">
-              <div class="sign">
-                <img
-                  src="@/assets/images/coursewareManage/asterisk.png"
-                  alt=""
-                />
-              </div>
-              <span style="margin-right: 3px">测评名称：</span>
-            </div>
-            <div class="btnbox">
+            <div class="fi_input">
               <a-input
                 v-model:value="inputV1"
-                style="width: 424px; height: 32px"
-                placeholder="请输入测评名称"
+                style="width: 424px; height: 40px"
+                placeholder="请输入评估名称"
                 maxlength="20"
               />
             </div>
-          </div>
-          <div class="main_item">
-            <div class="signbox">
-              <div class="sign">
-                <img
-                  src="@/assets/images/coursewareManage/asterisk.png"
-                  alt=""
-                />
-              </div>
-              <span style="margin-right: 3px">选择考试：</span>
+            <div class="btns">
+              <div class="search"></div>
+              <div class="btnText">搜索</div>
             </div>
-            <div class="btnbox">
-              <a-select
-                dropdownClassName="dropdown-style"
-                style="width: 424px"
-                placeholder="请输入考试名称"
-                :options="options1"
-                allowClear
-                showSearch
-              />
-            </div>
-          </div>
-          <div class="main_item">
-            <div class="signbox">
-              <span style="margin-right: 3px">有效期：</span>
-            </div>
-            <div class="btnbox">
-              <a-range-picker
-                style="width: 424px"
-                :placeholder="['      开始时间', '        结束时间']"
-              />
+            <div class="btnsn">
+              <div class="search"></div>
+              <div class="btnText">重置</div>
             </div>
           </div>
           <div class="main_item2">
-            <div class="signbox">
-              <span style="margin-right: 3px">活动说明：</span>
-            </div>
-            <div class="textarea">
-              <a-textarea
-                v-model:value="textV1"
-                placeholder="请输入评估说明"
-                allow-clear
-                maxlength="150"
-              />
-            </div>
+            <a-table
+                  style="border: 1px solid #f2f6fe"
+                  :columns="tableDataFunc()"
+                  :data-source="tableData"
+                  :loading="tableDataTotal === -1 ? true : false"
+                  expandRowByClick="true"
+                  @expand="expandTable"
+                  :pagination="false"
+                  :row-selection="{
+                    columnWidth: 30,
+                    selectedRowKeys: selectedRowKeys,
+                    onChange: onSelectChange,
+                  }"
+                />
+
+                <div class="pa">
+                  <a-pagination
+                    showSizeChanger="true"
+                    showQuickJumper="true"
+                    hideOnSinglePage="true"
+                    :pageSize="pageSize"
+                    :current="currentPage"
+                    :total="tableDataTotal"
+                    class="pagination"
+                  />
+                </div>
           </div>
         </div>
       </div>
@@ -92,33 +74,11 @@
   </a-drawer>
 </template>
 <script>
-import { reactive, toRefs, ref } from "vue";
+import { reactive, toRefs} from "vue";
 import { useRouter } from "vue-router";
 import * as api from "../../api/indexInvist";
 import { message } from "ant-design-vue";
 const router = useRouter();
-const options1 = ref([
-  {
-    value: "value1",
-    label: "请选择状态",
-  },
-]);
-const rowSelection = ref({
-  checkStrictly: false,
-  onChange: (selectedRowKeys, selectedRows) => {
-    console.log(
-      `selectedRowKeys: ${selectedRowKeys}`,
-      "selectedRows: ",
-      selectedRows
-    );
-  },
-  onSelect: (record, selected, selectedRows) => {
-    console.log(record, selected, selectedRows);
-  },
-  onSelectAll: (selected, selectedRows, changeRows) => {
-    console.log(selected, selectedRows, changeRows);
-  },
-});
 export default {
   name: "AddInvist",
   // components: {
@@ -132,26 +92,103 @@ export default {
   setup(props, ctx) {
     const state = reactive({
       inputV1: "",
-      textV1: "",
+      time: undefined,
+      tableData: [
+        {
+          key: 1,
+          name: "评估",
+          num: "2",
+          creator: "管理员",
+          time: "2022-07-21 14:30:25",
+        },
+        {
+          key: 2,
+          name: "评估",
+          num: "8",
+          creator: "管理员",
+          time: "2022-07-21 14:30:25",
+        },
+        {
+          key: 3,
+          name: "评估",
+          num: "5",
+          creator: "管理员",
+          time: "2022-07-21 14:30:25",
+        },
+        {
+          key: 4,
+          name: "评估",
+          num: "20",
+          creator: "管理员",
+          time: "2022-07-21 14:30:25",
+        },
+      ],
     });
     const closeDrawer = () => {
       ctx.emit("update:addinvistVisible", false);
       state.inputV1 = "";
-      state.textV1 = "";
     };
     const afterVisibleChange = (bool) => {
       console.log("state", bool);
     };
+    const tableDataFunc = () => {
+      const columns = [
+        {
+          title: "名称",
+          dataIndex: "name",
+          // width: "30%",
+          key: "name",
+          width: '150px',
+          align: "left",
+          className: "classify",
+
+          scopedSlots: { customRender: "action" }, //引入的插槽
+          customRender: (text) => {
+            // console.log(text.record.checked1);
+            return (
+              <div class="racona">
+                <span> {text.record.name}</span>
+
+                {/**
+								<div class="img"></div>
+                <a-checkbox class="ch" checked={text.record.checkedd}>
+                  {text.record.lei}
+                </a-checkbox>
+*/}
+              </div>
+            );
+          },
+        },
+        {
+          title: "题数",
+          dataIndex: "num",
+          key: "num",
+          width: '80px',
+          align: "center",
+        },
+        {
+          title: "创建人",
+          dataIndex: "creator",
+          key: "creator",
+          width: '150px',
+          align: "center",
+        },
+        {
+          title: "创建时间",
+          dataIndex: "time",
+          key: "time",
+          width: '200px',
+          align: "center",
+        },
+      ];
+      return columns;
+    };
     //创建评估信息
     const createInvist = () => {
-      if (!state.inputV1) return message.info("请输入测评名称");
-      // if (!state.inputV2) return message.info("请选择测评");
-      // if (!state.organizationSelectName) return message.info("请选择归属组织");
-      // state.createLoading = true;
       let obj = {
         appraiseName: state.inputV1,
         appraiseEndTime: "",
-        appraiseExplain: state.textV1,
+        appraiseExplain: "",
         appraiseFlag: "",
         appraiseId: 0,
         appraiseStartTime: "",
@@ -183,8 +220,7 @@ export default {
       ...toRefs(state),
       afterVisibleChange,
       closeDrawer,
-      rowSelection,
-      options1,
+      tableDataFunc,
       createInvist,
     };
   },
@@ -215,84 +251,74 @@ export default {
       justify-content: space-between;
       .main_left {
         padding-right: 30px;
-        flex: 1;
-        border-right: 1px solid #e8e8e8;
         .main_item {
           display: flex;
           align-items: center;
           margin-bottom: 32px;
-          .signbox {
-            width: 120px;
+          .fi_input{
+            margin-right: 20px;
+          }
+          .btns{
+            margin-right: 20px;
+            padding: 0px 26px 0px 26px;
+            height: 38px;
+            background: #409eff;
+            border-radius: 8px;
+            //border: 1px solid rgba(64, 158, 255, 1);
             display: flex;
-            justify-content: end;
             align-items: center;
-            .sign {
-              margin-right: 5px;
+            justify-content: center;
+            margin-right: 14px;
+            flex-shrink: 0;
+            cursor: pointer;
+            .search {
+              width: 15px;
+              height: 17px;
+              background-image: url("../../assets/images/courseManage/search0.png");
+              background-size: 100% 100%;
+            }
+            .btnText {
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 36px;
+              margin-left: 5px;
             }
           }
-          .btnbox {
+          .btnsn {
+            padding: 0px 26px 0px 26px;
+            height: 38px;
+            background: #ffffff;
+            border-radius: 8px;
+            border: 1px solid rgba(64, 158, 255, 1);
             display: flex;
-            flex: 1;
             align-items: center;
-            .xkbtn {
-              cursor: pointer;
-              width: 130px;
-              height: 40px;
-              background: #388be1;
-              border-radius: 8px;
-              border: 0;
-              margin-right: 8px;
-              color: #fff;
+            justify-content: center;
+            margin-right: 14px;
+            flex-shrink: 0;
+            cursor: pointer;
+            .search {
+              width: 16px;
+              height: 18px;
+              background-image: url("../../assets/images/courseManage/reset1.png");
+              background-size: 100% 100%;
+            }
+            .btnText {
+              font-size: 14px;
+              font-weight: 400;
+              color: #409eff;
+              line-height: 36px;
+              margin-left: 5px;
             }
           }
+
         }
         .main_item2 {
-          display: flex;
-          align-items: flex-start;
-          margin-bottom: 32px;
-          .signbox {
-            width: 120px;
+          .pa {
+            width: 100%;
+            margin:15px auto;
             display: flex;
-            justify-content: end;
-            align-items: center;
-            .sign {
-              margin-right: 5px;
-            }
-          }
-          .kqszbox {
-            .qdqtbox {
-              margin-left: 56px;
-            }
-            .setbox {
-              display: flex;
-              flex-wrap: wrap;
-              margin-top: 10px;
-              margin-bottom: 24px;
-              .timerbox {
-                margin-top: 6px;
-                margin-right: 32px;
-                display: flex;
-                align-items: center;
-                flex-wrap: nowrap;
-              }
-            }
-          }
-          .btnbox2 {
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-start;
-            .xkbtn {
-              cursor: pointer;
-              width: 130px;
-              height: 40px;
-              background: #388be1;
-              border-radius: 8px;
-              border: 0;
-              margin-right: 16px 8px 32px 0;
-              color: #fff;
-              margin-top: 16px;
-              margin-bottom: 60px;
-            }
+            justify-content: center;
           }
         }
       }