获取学习路径列表

src/api/index1.js

@@ -37,6 +37,12 @@ import http from "./config";
 
 // 接口-请求
 
+//创建学习路径
+export const createLearnPath = (obj) => http.post('/admin/router/edit', obj, {
+	headers: {
+		'token': '123'
+	}
+});
 // 获取学习路径图列表
 export const getLearnPath = (obj) => http.post('/admin/router/list', obj);
 

src/components/drawers/ActiveAttendance.vue

@@ -816,6 +816,9 @@ export default {
             }
             .opa {
               // background-color: #bfa;
+              .ant-checkbox + span {
+                margin-top: 5px;
+              }
             }
           }
           // .tab {

src/views/courselibrary/CoursewareManage.vue

@@ -121,7 +121,9 @@
             </div>
             <div class="b_sub">
               <div class="bs_header">
-                <div class="b_left"><span style="color:#999BA3;">课程命名规则</span></div>
+                <div class="b_left">
+                  <span style="color: #999ba3">课程命名规则</span>
+                </div>
                 <div class="b_right" @click="hideShow" style="cursor: pointer">
                   <div
                     class="b_zk"
@@ -313,7 +315,9 @@
                 </div>
                 <div class="i2_cz">
                   <div class="i2_top">
-                    <div class="i2_left"><span style="color:#999BA3;">课程命名规则</span></div>
+                    <div class="i2_left">
+                      <span style="color: #999ba3">课程命名规则</span>
+                    </div>
                     <div
                       class="i2_right"
                       @click="hideShow"
@@ -1691,6 +1695,7 @@
       wrapClassName="DelModal"
       style="margin-top: 400px"
       @cancel="delete_exit"
+      :zIndex="9999"
     >
       <div
         class="delete"

src/views/learningpath/LearningPath.vue

@@ -50,7 +50,6 @@
             <div class="btnText">重置</div>
           </div>
         </div>
-        
       </div>
       <div class="btns">
         <!-- <router-link to="/projectadd">
@@ -67,18 +66,28 @@
     </div>
     <!-- 搜索框及按钮 -->
     <!-- 无数据 -->
-    <div class="datanull" style="display: none">
+    <div class="datanull" v-if="tableData.length === 0">
       <div class="nodata_box">
-            <div class="left"><img src="../../assets/images/taskpage/left1.png"/></div>
+        <div class="left">
-            <div class="center"><img src="../../assets/images/leveladd/picture.png"/></div>
+          <img src="../../assets/images/taskpage/left1.png" />
+        </div>
+        <div class="center">
+          <img src="../../assets/images/leveladd/picture.png" />
+        </div>
         <div class="text1">无数据</div>
         <div class="text2">请添加路径</div>
-            <div class="right"><img src="../../assets/images/leveladd/right.png"/></div>
+        <div class="right">
+          <img src="../../assets/images/leveladd/right.png" />
+        </div>
       </div>
     </div>
     <!-- 无数据 -->
     <!-- 表格 -->
-    <div class="tableBox" style="padding-bottom: 160px; position: relative">
+    <div
+      class="tableBox"
+      v-if="tableData.length !== 0"
+      style="padding-bottom: 160px; position: relative"
+    >
       <a-table
         style="border: 1px solid #f2f6fe"
         :columns="tableDataFunc()"
@@ -134,11 +143,11 @@
             <div class="inname">路径图名称</div>
             <div class="in">
               <a-input
-                v-model:value="valueE"
+                v-model:value="pathName"
                 maxlength="20"
                 style="border-radius: 4px"
               />
-              <div class="showcount">{{ valueE.length }}/20</div>
+              <div class="showcount">{{ pathName.length }}/20</div>
             </div>
           </div>
           <div class="name" style="margin-left: 27px">
@@ -149,14 +158,25 @@
               />
             </div>
             <div class="inname">归属组织</div>
-            <div class="in">
+            <div class="select in">
+              <a-select
+                v-model:value="organizationSelectName"
+                style="width: 270px"
+                placeholder="请选择组织"
+                :options="organizationList"
+                @change="selectorganization"
+                allowClear
+                showSearch
+              ></a-select>
+            </div>
+            <!-- <div class="in">
               <a-input
-                v-model:value="valueE"
+                v-model:value="organization"
                 maxlength="20"
                 style="border-radius: 4px"
               />
-              <div class="showcount">{{ valueE.length }}/20</div>
+              <div class="showcount">{{ organization.length }}/20</div>
-            </div>
+            </div> -->
           </div>
           <div class="bac">
             <div class="d" style="margin-top: 12px">
@@ -171,7 +191,7 @@
             <img class="im" src="../../assets/px.jpg" />
             <img class="im" src="../../assets/px.jpg" /> -->
               <div
-                @click="chooseImg(item.id)"
+                @click="chooseImg(item)"
                 v-for="item in imgData"
                 :key="item.key"
                 style="
@@ -196,13 +216,13 @@
           <div class="info">
             <div class="inname">路径说明</div>
             <div class="in">
-              <a-textarea v-model:value="valuei" maxlength="150" />
+              <a-textarea v-model:value="pathIntro" maxlength="150" />
-              <div class="showcount">{{ valuei.length }}/150</div>
+              <div class="showcount">{{ pathIntro.length }}/150</div>
             </div>
           </div>
           <div class="btn">
             <button class="samtn btn1" @click="handleOut">取消</button>
-            <button class="samtn btn2" @click="handleOut">确定</button>
+            <button class="samtn btn2" @click="createLearnPath">确定</button>
           </div>
         </div>
       </div></a-modal
@@ -238,11 +258,11 @@
             <div class="inname">路径图名称</div>
             <div class="in">
               <a-input
-                v-model:value="valueE"
+                v-model:value="pathName"
                 maxlength="20"
                 style="border-radius: 4px"
               />
-              <div class="showcount">{{ valueE.length }}/20</div>
+              <div class="showcount">{{ pathName.length }}/20</div>
             </div>
           </div>
           <div class="name" style="margin-left: 27px">
@@ -253,14 +273,25 @@
               />
             </div>
             <div class="inname">归属组织</div>
-            <div class="in">
+            <div class="select in">
+              <a-select
+                v-model:value="organizationSelectName"
+                style="width: 270px"
+                placeholder="请选择组织"
+                :options="organizationList"
+                @change="selectorganization"
+                allowClear
+                showSearch
+              ></a-select>
+            </div>
+            <!-- <div class="in">
               <a-input
-                v-model:value="valueE"
+                v-model:value="organization"
                 maxlength="20"
                 style="border-radius: 4px"
               />
-              <div class="showcount">{{ valueE.length }}/20</div>
+              <div class="showcount">{{ organization.length }}/20</div>
-            </div>
+            </div> -->
           </div>
           <div class="bac">
             <div class="d" style="margin-top: 12px">
@@ -275,7 +306,7 @@
             <img class="im" src="../../assets/px.jpg" />
             <img class="im" src="../../assets/px.jpg" /> -->
               <div
-                @click="chooseImg(item.id)"
+                @click="chooseImg(item)"
                 v-for="item in imgData"
                 :key="item.key"
                 style="
@@ -300,8 +331,8 @@
           <div class="info">
             <div class="inname">路径说明</div>
             <div class="in">
-              <a-textarea v-model:value="valuei" maxlength="150" />
+              <a-textarea v-model:value="pathIntro" maxlength="150" />
-              <div class="showcount">{{ valuei.length }}/150</div>
+              <div class="showcount">{{ pathIntro.length }}/150</div>
             </div>
           </div>
           <div class="btn">
@@ -550,6 +581,12 @@ import PowerList from "../../components/drawers/PowerList";
 import QueryRight from "../../components/drawers/QueryRight";
 import ManageRight from "../../components/drawers/ManageRight";
 import * as api from "../../api/index1";
+import { message } from "ant-design-vue";
+function getBase64(img, callback) {
+  const reader = new FileReader();
+  reader.addEventListener("load", () => callback(reader.result));
+  reader.readAsDataURL(img);
+}
 export default {
   name: "learningPath",
   components: { OwnerShip, PowerList, QueryRight, ManageRight },
@@ -583,117 +620,20 @@ export default {
       selectTime: null,
       sh: false,
       tableData: [
-        {
+        // {
-          key: 1,
+        //   key: 1,
-          number: 1,
+        //   number: 1,
-          manager: "产品经理上升路径",
+        //   manager: "产品经理上升路径",
-          state: "已发布",
+        //   state: "已发布",
-          creater: "管理员",
+        //   creater: "管理员",
-          pubtime: "2022-07-20 14:00:03",
+        //   pubtime: "2022-07-20 14:00:03",
-          cretime: "2022-07-20 14:00:03",
+        //   cretime: "2022-07-20 14:00:03",
-          haspub: false,
+        // },
-        },
+      ], //学习路径列表
-        {
+      currentPage: 1, //当前页
-          key: 2,
+      tableDataTotal: -1, //学习路径列表总数
-          number: 2,
+      pageSize: 10, //每页10条数据
-          manager: "程序员升级路径",
+
-          state: "草稿",
-          creater: "管理员",
-          pubtime: "2022-07-20 14:00:03",
-          cretime: "2022-07-20 14:00:03",
-          haspub: true,
-        },
-        {
-          key: 3,
-          number: 3,
-          manager: "ui成长之路",
-          state: "已停用",
-          creater: "管理员",
-          pubtime: "2022-07-20 14:00:03",
-          cretime: "2022-07-20 14:00:03",
-          haspub: false,
-        },
-        {
-          key: 4,
-          number: 4,
-          manager: "ui成长之路",
-          state: "草稿",
-          creater: "管理员",
-          pubtime: "2022-07-20 14:00:03",
-          cretime: "2022-07-20 14:00:03",
-          haspub: true,
-        },
-        {
-          key: 4,
-          number: 4,
-          manager: "ui成长之路",
-          state: "草稿",
-          creater: "管理员",
-          pubtime: "2022-07-20 14:00:03",
-          cretime: "2022-07-20 14:00:03",
-          haspub: true,
-        },
-        {
-          key: 4,
-          number: 4,
-          manager: "ui成长之路",
-          state: "草稿",
-          creater: "管理员",
-          pubtime: "2022-07-20 14:00:03",
-          cretime: "2022-07-20 14:00:03",
-          haspub: true,
-        },
-        {
-          key: 4,
-          number: 4,
-          manager: "ui成长之路",
-          state: "草稿",
-          creater: "管理员",
-          pubtime: "2022-07-20 14:00:03",
-          cretime: "2022-07-20 14:00:03",
-          haspub: true,
-        },
-        {
-          key: 4,
-          number: 4,
-          manager: "ui成长之路",
-          state: "草稿",
-          creater: "管理员",
-          pubtime: "2022-07-20 14:00:03",
-          cretime: "2022-07-20 14:00:03",
-          haspub: true,
-        },
-        {
-          key: 4,
-          number: 4,
-          manager: "ui成长之路",
-          state: "草稿",
-          creater: "管理员",
-          pubtime: "2022-07-20 14:00:03",
-          cretime: "2022-07-20 14:00:03",
-          haspub: true,
-        },
-        {
-          key: 4,
-          number: 4,
-          manager: "ui成长之路",
-          state: "草稿",
-          creater: "管理员",
-          pubtime: "2022-07-20 14:00:03",
-          cretime: "2022-07-20 14:00:03",
-          haspub: true,
-        },
-        {
-          key: 4,
-          number: 4,
-          manager: "ui成长之路",
-          state: "草稿",
-          creater: "管理员",
-          pubtime: "2022-07-20 14:00:03",
-          cretime: "2022-07-20 14:00:03",
-          haspub: true,
-        },
-      ],
       imgData: [
         {
           id: 1,
@@ -727,15 +667,129 @@ export default {
       PLvisible: false, //授权名单抽屉
       Queryvisible: false, //查看权抽屉
       Managevisible: false, //管理权抽屉
-      currentPage: 1,
+
-      tableDataTotal: 100,
-      pageSize: 10,
       value1: "",
       value2: "",
-      valueE: "",
+      pathName: "", //创建/编辑路径图名称
+      organization: "", //创建/编辑路径图归属组织
+      organizationList: [
+        {
+          id: 1,
+          value: "组织一",
+          label: "组织一",
+        },
+        {
+          id: 2,
+          value: "组织二",
+          label: "组织二",
+        },
+        {
+          id: 3,
+          value: "组织三",
+          label: "组织三",
+        },
+        {
+          id: 4,
+          value: "组织四",
+          label: "组织四",
+        },
+      ], //归属组织
+      organizationSelectName: null, //归属组织选择名称
+      organizationSelectId: null, //归属组织选择id
+      pathIntro: "", //路径说明
       valueEE: "",
-      valuei: "",
     });
+
+    const selectProjectName = (value, index) => {
+      console.log("value", value, index);
+    };
+    const expandTable = (e, a) => {
+      // console.log("惦记了");
+      console.log("e", e, a);
+    };
+    const handleOut = () => {
+      state.out = !state.out;
+    };
+    const handleOut1 = () => {
+      state.out1 = !state.out1;
+    };
+    const chooseImg = (item) => {
+      console.log(item);
+      state.learnPathBg = item.id;
+    };
+    const showPub = () => {
+      state.pub = true;
+    };
+    const closePub = () => {
+      state.pub = false;
+    };
+    const showCopyModal = () => {
+      state.copyModal = true;
+    };
+    const closeCopyModal = () => {
+      state.copyModal = false;
+    };
+    const showStopModal = () => {
+      state.stopModal = true;
+    };
+    const closeStopModal = () => {
+      state.stopModal = false;
+    };
+    const showDeleteModal = () => {
+      state.deleteModal = true;
+    };
+    const closeDeleteModal = () => {
+      state.deleteModal = false;
+    };
+    const showStartModal = () => {
+      state.startModal = true;
+    };
+    const closeStartModal = () => {
+      state.startModal = false;
+    };
+    const showBackModal = () => {
+      state.backModal = true;
+    };
+    const closeBackModal = () => {
+      state.backModal = false;
+    };
+    const showOwner = () => {
+      state.Ownervisible = true;
+    };
+    const showPower = () => {
+      state.PLvisible = true;
+    };
+    const showQuery = () => {
+      state.Queryvisible = true;
+    };
+    const showManage = () => {
+      state.Managevisible = true;
+    };
+    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,
+          state:
+            value.status === 0
+              ? "草稿"
+              : value.status === 1
+              ? "已发布"
+              : value.status === -1
+              ? "已停用"
+              : "-",
+          creater: value.createName,
+          pubtime: value.publishTime,
+          cretime: value.createTime,
+        };
+        array.push(obj);
+      });
+      state.tableData = array;
+    };
+
     const tableDataFunc = () => {
       const columns = [
         {
@@ -796,132 +850,13 @@ export default {
           key: "opacation",
           width: 200,
           align: "center",
-        },
+          scopedSlots: { customRender: "action" }, //引入的插槽
-      ];
+          customRender: (text) => {
-      return columns;
+            // console.log(text);
-    };
+            return (
-    //获取学习路径列表
-    const getLearnPath = () => {
-      let obj = {
-        beginTime: 0,
-        endTime: 0,
-        name: "",
-        pageNo: 0,
-        pageSize: 0,
-        status: 0,
-      };
-      api
-        .getLearnPath(obj)
-        .then((res) => {
-          console.log("获取路径列表数据", res);
-        })
-        .catch((err) => {
-          console.log("获取学习路径失败", err);
-        });
-      let getChapterObj = {
-        routerId: 0,
-      };
-      api
-        .getChapter(getChapterObj)
-        .then((res) => {
-          console.log("获取关卡数据", res);
-        })
-        .catch((err) => {
-          console.log("获取关卡数据失败", err);
-        });
-
-      // let editChapterObj = {
-      //   name: "测试关卡",
-      //   remark: "这是测试关卡说明",
-      //   routerId: 0,
-      // };
-      // api
-      //   .editChapter(editChapterObj)
-      //   .then((res) => {
-      //     console.log("添加测试关卡数据", res);
-      //   })
-      //   .catch((err) => {
-      //     console.log("添加测试关卡数据失败", err);
-      // 	});
-    };
-    onMounted(() => {
-      // console.log("执行");
-      getLearnPath();
-    });
-    const selectProjectName = (value, index) => {
-      console.log("value", value, index);
-    };
-    const expandTable = (e, a) => {
-      // console.log("惦记了");
-      console.log("e", e, a);
-    };
-    const handleOut = () => {
-      state.out = !state.out;
-    };
-    const handleOut1 = () => {
-      state.out1 = !state.out1;
-    };
-    const chooseImg = (id) => {
-      console.log(id);
-      state.learnPathBg = id;
-    };
-    const showPub = () => {
-      state.pub = true;
-    };
-    const closePub = () => {
-      state.pub = false;
-    };
-    const showCopyModal = () => {
-      state.copyModal = true;
-    };
-    const closeCopyModal = () => {
-      state.copyModal = false;
-    };
-    const showStopModal = () => {
-      state.stopModal = true;
-    };
-    const closeStopModal = () => {
-      state.stopModal = false;
-    };
-    const showDeleteModal = () => {
-      state.deleteModal = true;
-    };
-    const closeDeleteModal = () => {
-      state.deleteModal = false;
-    };
-    const showStartModal = () => {
-      state.startModal = true;
-    };
-    const closeStartModal = () => {
-      state.startModal = false;
-    };
-    const showBackModal = () => {
-      state.backModal = true;
-    };
-    const closeBackModal = () => {
-      state.backModal = false;
-    };
-    const showOwner = () => {
-      state.Ownervisible = true;
-    };
-    const showPower = () => {
-      state.PLvisible = true;
-    };
-    const showQuery = () => {
-      state.Queryvisible = true;
-    };
-    const showManage = () => {
-      state.Managevisible = true;
-    };
-    const getTableDate = () => {
-      let data = state.tableData;
-      data.map((value) => {
-        {
-          //单层项目
-          value.opacation = (
               <div class="operation">
                 <div class="nSelect">
-                {value.state === "草稿" ? (
+                  {text.record.state === "草稿" ? (
                     <div class="fb">
                       <div
                         style="cursor:pointer"
@@ -944,7 +879,7 @@ export default {
                   ) : (
                     <div></div>
                   )}
-                {value.state === "已发布" ? (
+                  {text.record.state === "已发布" ? (
                     <div class="fb">
                       <div
                         class="jc"
@@ -958,7 +893,7 @@ export default {
                   ) : (
                     <div></div>
                   )}
-                {value.state === "已停用" ? (
+                  {text.record.state === "未发布" ? (
                     <div class="fb">
                       <div
                         style="cursor:pointer"
@@ -978,7 +913,6 @@ export default {
                   <router-link to="/leveladd">
                     <div class="g1">关卡</div>
                   </router-link>
-
                   <a-select
                     style="width: 50px;margin-top:2px;margin-left:25px"
                     value="授权"
@@ -1024,8 +958,7 @@ export default {
                   </a-select>
                 </div>
                 <div class="tableSelect">
-                {value.state === "草稿" ? (
+                  {text.record.state === "草稿" ? (
-                  <div>
                     <a-select
                       style="width: 50px;margin-top:2px;margin-right:20px;"
                       value="更多"
@@ -1072,11 +1005,10 @@ export default {
                         </div>
                       </a-select-option>
                     </a-select>
-                  </div>
                   ) : (
                     <div></div>
                   )}
-                {value.state === "已发布" ? (
+                  {text.record.state === "已发布" ? (
                     <div>
                       <a-select
                         style="width: 50px;margin-top:2px;margin-right:20px;"
@@ -1116,7 +1048,7 @@ export default {
                   ) : (
                     <div></div>
                   )}
-                {value.state === "已停用" ? (
+                  {text.record.state === "未发布" ? (
                     <div>
                       <a-select
                         style="width: 50px;margin-top:2px;margin-right:20px;"
@@ -1159,11 +1091,93 @@ export default {
                 </div>
               </div>
             );
-        }
+          },
-      });
+        },
-      state.tableData = data;
+      ];
+      return columns;
     };
-    getTableDate();
+    const selectorganization = (e, v) => {
+      console.log("eee", e, v);
+      state.organizationSelectName = e;
+      state.organizationSelectId = v.id;
+    };
+    //创建学习路径图
+    const createLearnPath = () => {
+      getBase64("../../assets/images/leveladd/2.png", (base64Url) => {
+        console.log("base64Url", base64Url);
+      });
+      if (!state.pathName) return message.info("请输入路径图名称");
+      if (!state.organizationSelectName) return message.info("请选择归属组织");
+      if (!state.organizationSelectName) return message.info("请选择归属组织");
+      // let obj = {
+      //   name: "新建路径图测试",
+      //   picUrl: "",
+      //   remark: "新建路径图测试说明",
+      //   status: 0,
+      // };
+      // api
+      //   .createLearnPath(obj)
+      //   .then((res) => {
+      //     console.log("创建成功", res);
+      //   })
+      //   .catch((err) => {
+      //     console.log("创建失败", err);
+      //   });
+    };
+    //获取学习路径列表
+    const getLearnPath = () => {
+      let obj = {
+        pageNo: state.currentPage,
+        pageSize: state.pageSize,
+      };
+      api
+        .getLearnPath(obj)
+        .then((res) => {
+          if (res.status === 200) {
+            // console.log("获取路径列表数据", res.data.data);
+            let arr = res.data.data.rows;
+            // let array = [];
+            getTableDate(arr);
+
+            // state.tableData = array;
+            // getTableDate();
+            // console.log("tableData", array);
+            state.tableDataTotal = Number(res.data.data.total);
+          }
+        })
+        .catch((err) => {
+          console.log("获取学习路径失败", err);
+        });
+      // let getChapterObj = {
+      //   routerId: 0,
+      // };
+      // api
+      //   .getChapter(getChapterObj)
+      //   .then((res) => {
+      //     console.log("获取关卡数据", res);
+      //   })
+      //   .catch((err) => {
+      //     console.log("获取关卡数据失败", err);
+      //   });
+
+      // let editChapterObj = {
+      //   name: "测试关卡",
+      //   remark: "这是测试关卡说明",
+      //   routerId: 0,
+      // };
+      // api
+      //   .editChapter(editChapterObj)
+      //   .then((res) => {
+      //     console.log("添加测试关卡数据", res);
+      //   })
+      //   .catch((err) => {
+      //     console.log("添加测试关卡数据失败", err);
+      // 	});
+    };
+    onMounted(() => {
+      // console.log("执行");
+      getLearnPath();
+    });
     return {
       ...toRefs(state),
       selectProjectName,
@@ -1188,6 +1202,8 @@ export default {
       chooseImg,
       showQuery,
       showManage,
+      createLearnPath,
+      selectorganization,
     };
   },
 };
@@ -1647,11 +1663,7 @@ export default {
       width: 412px;
       height: 212px;
       position: relative;
-      background: linear-gradient(
+      background: linear-gradient(180deg, #fef3dd, #fffaf0);
-              180deg,
-              #FEF3DD,
-             #FFFAF0
-            );
       border-radius: 10px;
       .left {
         position: absolute;
@@ -1668,7 +1680,7 @@ export default {
         top: 128px;
         left: 178px;
         font-size: 20px;
-        color: #FFB64E;
+        color: #ffb64e;
         font-weight: 500;
       }
       .text2 {
@@ -1676,7 +1688,7 @@ export default {
         bottom: 32px;
         left: 174px;
         font-size: 14px;
-        color: #878B92;
+        color: #878b92;
         font-weight: 500;
       }
       .right {

src/views/learningpath/LevelAddDetail.vue

@@ -798,7 +798,6 @@ export default {
       selectedRowKeys: [],
       isActive: false,
       gqxy_hs: true,
-
       projectChecked: null, //项目单选框
     });
     const showDrawer = () => {

src/views/system/SystemManage.vue

@@ -24,20 +24,50 @@
       <add-vote v-model:addvoteVisible="visible" />
     </div>
     <a-radio v-model:checked="checked" @click="changeRadio">Option A</a-radio>
+    <a-upload
+      v-model:file-list="fileList"
+      name="avatar"
+      list-type="picture-card"
+      class="avatar-uploader"
+      :show-upload-list="false"
+      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+      :before-upload="beforeUpload"
+      @change="handleChange"
+    >
+      <!-- <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
+      <div v-else>
+        <loading-outlined v-if="loading"></loading-outlined>
+        <plus-outlined v-else></plus-outlined>
+        <div class="ant-upload-text">Upload</div>
+      </div> -->
+    </a-upload>
   </div>
 </template>
 <script>
 import { reactive, toRefs } from "vue";
 import AddVote from "../../components/drawers/AddVote";
+// import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
+import { message } from "ant-design-vue";
+
+function getBase64(img, callback) {
+  const reader = new FileReader();
+  reader.addEventListener("load", () => callback(reader.result));
+  reader.readAsDataURL(img);
+}
 export default {
   name: "SystemManage",
   components: {
     AddVote,
+    // LoadingOutlined,
+    // PlusOutlined,
   },
   setup() {
     const state = reactive({
       visible: false,
       checked: true,
+      imageUrl: "",
+      loading: false,
+      fileList: [],
     });
 
     const showDrawer = () => {
@@ -46,10 +76,49 @@ export default {
     const changeRadio = () => {
       state.checked = false;
     };
+    const handleChange = (info) => {
+      if (info.file.status === "uploading") {
+        state.loading = true;
+        return;
+      }
+
+      if (info.file.status === "done") {
+        // Get this url from response in real world.
+        getBase64(info.file.originFileObj, (base64Url) => {
+          state.imageUrl = base64Url;
+          state.loading = false;
+        });
+      }
+
+      if (info.file.status === "error") {
+        state.loading = false;
+        message.error("upload error");
+      }
+    };
+
+    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 < 2;
+
+      if (!isLt2M) {
+        message.error("Image must smaller than 2MB!");
+      }
+
+      return isJpgOrPng && isLt2M;
+    };
+
     return {
       ...toRefs(state),
       showDrawer,
       changeRadio,
+      handleChange,
+      beforeUpload,
     };
   },
 };