评估接口+课程部分

package.json

@@ -8,6 +8,7 @@
 		"lint": "vue-cli-service lint"
 	},
 	"dependencies": {
+		"@wangeditor/editor-for-vue": "^5.1.12",
 		"ant-design-vue": "^3.2.12",
 		"axios": "^1.1.3",
 		"core-js": "^3.8.3",

src/api/config.js

@@ -1,47 +1,53 @@
 import axios from "axios";
+// const Qs = require("qs");
 
-axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
+// axios.defaults.headers.post["Content-Type"] =
+//   "application/x-www-form-urlencoded";
 
 axios.defaults.withCredentials = true;
 
 const http = axios.create({
-	baseURL: '/api',
-	timeout: 1000 * 5
+  baseURL: "/api",
+  timeout: 1000 * 5,
+  // headers: { "Content-Type": "multipart/form-data" },
+  headers: { "Content-Type": "application/json" },
 });
 
 http.interceptors.request.use(
-	(config) => {
-		const token = localStorage.getItem('token');
-		if (token) {
-			config.headers.token = token;
-		} else {
-			console.log("当前请求页面无token,请执行操作！！！")
-			// 此处测试默认配置token
-			config.headers.token = "123456";
-		}
-		return config;
-	},
-	(err) => {
-		console.log('登陆前拦截', err)
-		return Promise.reject(err);
-	}
+  (config) => {
+    const token = localStorage.getItem("token");
+    if (token) {
+      // config.headers.token = token;
+      config.headers.token = 123456; //测试1111
+    } else {
+      console.log("当前请求页面无token,请执行操作！！！");
+      // 此处测试默认配置token
+      config.headers.token = "123456";
+    }
+    return config;
+  },
+  (err) => {
+    console.log("登陆前拦截", err);
+    return Promise.reject(err);
+  }
 );
 
-
 http.interceptors.response.use(
-	(response) => {
-		const { data: { code, msg } } = response;
-		if (code === 0 || code === 200) {
-			return response;
-		} else {
-			console.log('api %o', msg);
-		}
-		return response;
-	},
-	function (error) {
-		console.log('api error %o', error);
-		return Promise.reject(error);
-	}
+  (response) => {
+    const {
+      data: { code, msg },
+    } = response;
+    if (code === 0 || code === 200) {
+      return response;
+    } else {
+      console.log("api %o", msg);
+    }
+    return response;
+  },
+  function (error) {
+    console.log("api error %o", error);
+    return Promise.reject(error);
+  }
 );
 
-export default http;
+export default http;

src/api/indexCourse.js

@@ -0,0 +1,21 @@
+import http from "./config";
+
+/**
+ * 1
+ */
+//删除开课
+export const deletePlan = (obj) =>
+  http.delete("/admin/offcourse/deletePlan", obj);
+//新建或编辑面授课
+export const edit = (obj) => http.post("/admin/offcourse/edit", obj);
+//新建或编辑面授课开课
+export const editPlan = (obj) => http.post("/admin/offcourse/editPlan", obj);
+//操作面授课(发布,撤回,删除)
+export const handle = (obj) => http.post("/admin/offcourse/handle", obj);
+//获取面授课列表
+export const list = (obj) => http.post("/admin/offcourse/list", obj);
+//面授课开课列表
+export const planList = (obj) => http.post("/admin/offcourse/planList", obj);
+//获取学员列表
+export const studentList = (obj) =>
+  http.post("/admin/offcourse/studentList", obj);

src/api/indexDiscuss.js

@@ -1,13 +1,16 @@
 import http from "./config";
 
 //创建讨论
-export const createDiscuss = (obj) => http.post('/discuss/createDiscuss', obj);
+export const createDiscuss = (obj) => http.post("/discuss/createDiscuss", obj);
 
 //获取讨论信息接口
-export const getDiscussDetail = (obj) => http.post('/discuss/getDiscussDetail', { params: obj });
+export const getDiscussDetail = (obj) =>
+  http.post("/discuss/getDiscussDetail", { params: obj });
 
 //删除讨论接口
-export const deleteDiscuss = (obj) => http.post('/discuss/deleteDiscuss', { params: obj });
+export const deleteDiscuss = (obj) =>
+  http.post("/discuss/deleteDiscuss", { params: obj });
 
 //修改讨论接口
-export const updateDiscuss = (obj) => http.post('/discuss/updateDiscuss', { params: obj });
+export const updateDiscuss = (obj) =>
+  http.post("/discuss/updateDiscuss", { params: obj });

src/api/indexEval.js

@@ -1,7 +1,6 @@
 import http from "./config";
 // import qs from 'qs';
 
-
 /**
  * 接口传参数方式（get）
  * axios.get('/user', {
@@ -34,25 +33,29 @@ import http from "./config";
  *
  */
 
-
 // 接口-请求
 
 //创建测评
-export const createEvaluation = (obj) => http.post('/evaluation/createEvaluation', obj,);
+export const createEvaluation = (obj) =>
+  http.post("/evaluation/createEvaluation", obj);
 
 //上传组件
-export const fileUp = (obj) => http.post('/file/upload', obj,);
+export const fileUp = (data) =>
+  http.post("/file/upload", data, {
+    headers: { "Content-Type": "multipart/form-data" },
+  });
 
 //删除测评信息
-export const deleteEvaluationById = (obj) => http.post('/evaluation/deleteEvaluationById', { params: obj })
-
+export const deleteEvaluationById = (obj) =>
+  http.post("/evaluation/deleteEvaluationById", { params: obj });
 
 //根据ID获取测评信息详情
-export const queryEvaluationDetailById = (obj) => http.post('/evaluation/queryEvaluationDetailById', { params: obj })
+export const queryEvaluationDetailById = (obj) =>
+  http.post("/evaluation/queryEvaluationDetailById", { params: obj });
 
 //修改测评信息
-export const updateEvaluation = (obj) => http.post('/evaluation/updateEvaluation', obj)
-
+export const updateEvaluation = (obj) =>
+  http.post("/evaluation/updateEvaluation", obj);
 
 // 测试方法
 // import * as api from '../../api/index'

src/api/indexResearch.js

@@ -0,0 +1,99 @@
+import http from "./config";
+
+/**
+ * 1
+ */
+// //评估问题创建接口
+// export const createResearch = (obj) =>
+//   http.post("research/createResearch", obj);
+// //删除评估基础信息
+// export const deleteResearch = (obj) =>
+//   http.post("research/deleteResearch", obj);
+// //评估信息发布状态的接口
+// export const editReleaseStatus = (obj) =>
+//   http.post("research/editReleaseStatus", obj);
+// //修改评估问题的接口
+// export const editResearchMessage = (obj) =>
+//   http.post("research/editResearchMessage", obj);
+// //根据ID查询评估基础信息详情
+// export const queryResearchDetailById = (obj) =>
+//   http.post("research/queryResearchDetailById", obj);
+// //获取全部评估信息接口
+// export const queryResearchDetailList = (obj) =>
+//   http.post("research/queryResearchDetailList", obj);
+
+//评估问题创建接口
+export const createResearch = (obj) =>
+  http.post("/assessment/createAssessment", obj);
+//删除评估基础信息
+export const deleteResearch = (obj) =>
+  http.post("/assessment/deleteAssessment", obj, {
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+  });
+//选择题删除题干或选项接口-修改时删除
+export const deleteChoiceQuestion = (obj) =>
+  http.post("/assessment/deleteChoiceQuestion", obj);
+//问答题或评分题删除题干-修改时删除
+export const deleteQuestionScAndQa = (obj) =>
+  http.post("/assessment/deleteQuestionScAndQa", obj);
+//修改评估问题的接口
+export const editResearchMessage = (obj) =>
+  http.post("/assessment/editAssessmentMessage", obj);
+//评估信息编辑修改评估名称
+export const editAssessmentName = (obj) =>
+  http.post("/assessment/editAssessmentName", obj);
+//评估信息发布状态的接口
+export const editReleaseStatus = (obj) =>
+  http.post("/assessment/editReleaseStatus", obj);
+//根据ID查询评估基础信息详情
+export const queryResearchDetailById = (obj) =>
+  http.post("/assessment/queryAssessmentDetailById", obj, {
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+  });
+//获取全部评估信息接口
+export const queryResearchDetailList = (obj) =>
+  http.post("/assessment/queryAssessmentDetailList", obj);
+//评估管理-管理-获取评估部分信息
+export const queryAssessmentDetailList = (obj) =>
+  http.post("/assessment/queryAssessmentPartDetail", obj, {
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+  });
+
+/**
+ * 2
+ */
+//创建评估信息
+// export const createAppraiseMessage = (obj) =>
+//   http.post("/survey/createAppraiseMessage", { params: obj });
+// //删除评估信息
+// export const deleteAppraise = (obj) =>
+//   http.post("/survey/deleteAppraise", { params: obj });
+// //查询评估信息
+// export const queryAppraiseDetailById = (obj) =>
+//   http.post("/survey/queryAppraiseDetailById", { params: obj });
+// //修改评估信息
+// export const updateAppraiseMessage = (obj) =>
+//   http.post("/survey/updateAppraiseMessage", { params: obj });
+
+// //获取任务列表
+// export const getTask = (obj) =>
+//   http.get(
+//     "/admin/project/detail",
+//     { params: obj },
+//     {
+//       headers: {
+//         token: "123",
+//       },
+//     }
+//   );
+
+// createWorkTask({
+//   createTime: "",
+// })
+//   .then((res) => {
+//     message.success(`添加成功${res}`);
+//     ctx.emit("update:addhomeworkVisible", false);
+//   })
+//   .catch((err) => {
+//     message.error(`添加失败${err}`);
+//   });

src/api/indexTaskadd.js

@@ -1,8 +1,13 @@
 import http from "./config";
 
 //获取任务列表
-export const getTask = (obj) => http.get('/admin/project/detail', { params: obj }, {
-  headers: {
-    'token': '123'
-  }
-})
+export const getTask = (obj) =>
+  http.get(
+    "/admin/project/detail",
+    { params: obj },
+    {
+      headers: {
+        token: "123",
+      },
+    }
+  );

src/api/indexWork.js

@@ -1,14 +1,16 @@
 import http from "./config";
 // 创建作业信息接口
-export const createWorkTask = (obj) => http.post('/work/createWorkTask',obj,{
-	headers: {
-		'token': '123'
-	}
-});
+export const createWorkTask = (obj) =>
+  http.post("/work/createWorkTask", obj, {
+    headers: {
+      token: "123",
+    },
+  });
 // 删除作业信息接口
-export const deleteWorkTask = (obj) => http.post('/work/deleteWorkTask',obj);
+export const deleteWorkTask = (obj) => http.post("/work/deleteWorkTask", obj);
 // 根据ID获取作业信息详情
-export const queryWorkDetailById = (obj) => http.post('/work/queryWorkDetailById',obj);
+export const queryWorkDetailById = (obj) =>
+  http.post("/work/queryWorkDetailById", obj);
 // 修改作业信息接口
-export const updateWorkTaskUsing = (obj) => http.post('/work/updateWorkTask',obj);
-
+export const updateWorkTaskUsing = (obj) =>
+  http.post("/work/updateWorkTask", obj);

src/components/BreadCrumb.vue

@@ -155,7 +155,7 @@ export default {
             },
             {
               name: "查看",
-              href:"/libraryadd",
+              href: "/libraryadd",
             },
           ];
         }

src/components/drawers/AddEval.vue

@@ -123,7 +123,7 @@ export default {
       inputV1: "",
       inputV2: "",
       time: undefined,
-      endTimes : "",
+      endTimes: "",
       startTimes: "",
       picUrl: "",
       tableData: [],
@@ -145,46 +145,47 @@ export default {
 
     //上传组件
     function getBase64(img, callback) {
-			const reader = new FileReader();
-			reader.addEventListener('load', () => callback(reader.result));
-			reader.readAsDataURL(img);
+      const reader = new FileReader();
+      reader.addEventListener("load", () => callback(reader.result));
+      reader.readAsDataURL(img);
     }
-    
+
     const fileList = ref([]);
     const loading = ref(false);
-    const imageUrl = ref('');
+    const imageUrl = ref("");
 
-		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;
+    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';
-			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;
-		};
+    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;
+    };
 
     // const getTableDate = (tableData) => {
     //   let data = tableData;
@@ -219,11 +220,17 @@ export default {
     //创建测评信息
     const createEvalText = () => {
       if (!state.inputV1) return message.info("请输入测评名称");
-      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")
-      } 
-    
+      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: "",

src/router/config.js

@@ -1,16 +1,16 @@
 const routes = [];
-const context = require.context('@/views', true, /\.vue$/, 'lazy');
-context.keys().forEach(path => {
-	// console.log('path', path)
-	const componentName = path.replace(/.*\/([^\\.\\/]*)\.vue$/, '$1');
-	routes.push({
-		path: `/${componentName.toLowerCase()}`,
-		name: componentName,
-		component: () => context(path),
-		meta: {
-			isLink: true
-		}
-	});
+const context = require.context("@/views", true, /\.vue$/, "lazy");
+context.keys().forEach((path) => {
+  // console.log('path', path)
+  const componentName = path.replace(/.*\/([^\\.\\/]*)\.vue$/, "$1");
+  routes.push({
+    path: `/${componentName.toLowerCase()}/:id?`,
+    name: componentName,
+    component: () => context(path),
+    meta: {
+      isLink: true,
+    },
+  });
 });
 
-export default routes;
+export default routes;

src/store/index.js

@@ -1,25 +1,32 @@
-import { createStore } from 'vuex'
+import { createStore } from "vuex";
 
 export default createStore({
-	state: {
-		openpages: localStorage.getItem('openpages') ? JSON.parse(localStorage.getItem('openpages')) : [{
-			pagename: "学习路径",
-			href: "/learningpath",
-			active: true,
-		},]
+  state: {
+    openpages: localStorage.getItem("openpages")
+      ? JSON.parse(localStorage.getItem("openpages"))
+      : [
+          {
+            pagename: "学习路径",
+            href: "/learningpath",
+            active: true,
+          },
+        ],
 
-	},
-	getters: {
+    assessmentName: "",
+  },
+  getters: {},
+  mutations: {
+    chengeOpenpages(state, list) {
+      // console.log('list', list)
+      state.openpages = list;
+    },
 
-	},
-	mutations: {
-		chengeOpenpages(state, list) {
-			// console.log('list', list)
-			state.openpages = list
-		}
-	},
-	actions: {
-	},
-	modules: {
-	}
-})
+    SET_assessmentName(state, name) {
+      state.assessmentName = name;
+      console.log("state.assessmentName");
+      console.log(state.assessmentName);
+    },
+  },
+  actions: {},
+  modules: {},
+});

src/utils/utils.js

@@ -0,0 +1,86 @@
+//
+export function traverseArr(arr, traverseObj, saveOld = false) {
+  const newArr = [];
+  if (arr.length !== 0) {
+    arr.forEach((item) => {
+      let obj = {};
+      if (saveOld) {
+        obj = {
+          ...item,
+        };
+      }
+      if (Object.keys(traverseObj).length !== 0) {
+        for (const key in traverseObj) {
+          if (typeof traverseObj[key] === "string") {
+            obj[key] = item[traverseObj[key]];
+          } else {
+            if (item[key] && item[key].length !== 0) {
+              obj[key] = traverseArr(item[key], traverseObj);
+            }
+          }
+        }
+      }
+      newArr.push(obj);
+    });
+  }
+  return newArr;
+}
+
+// export function deepClone(obj) {
+//   let result = typeof obj.splice === "function" ? [] : {};
+//   if (obj && typeof obj === "object") {
+//     for (let key in obj) {
+//       if (obj[key] && typeof obj[key] === "object") {
+//         result[key] = deepClone(obj[key]);
+//       } else {
+//         result[key] = obj[key];
+//       }
+//     }
+//     return result;
+//   }
+//   return obj;
+// }
+
+export function deepCloneFilterString(obj, fillterKeys) {
+  let result = typeof obj.splice === "function" ? [] : {};
+  if (obj && typeof obj === "object") {
+    for (let key in obj) {
+      if (obj[key] && typeof obj[key] === "object") {
+        result[key] = deepCloneFilterString(obj[key], fillterKeys);
+      } else {
+        result[key] = fillterKeys.includes(key) ? obj[key] : String(obj[key]);
+      }
+    }
+    return result;
+  }
+  return obj;
+}
+
+export function sortBy(arr, ...keys) {
+  return arr.sort((x, y) => {
+    for (const key of keys) {
+      const valueX = typeof key === "function" ? key(x) : x[key];
+      const valueY = typeof key === "function" ? key(y) : y[key];
+      if (valueX > valueY) {
+        return 1;
+      }
+      if (valueX < valueY) {
+        return -1;
+      }
+    }
+    return 0;
+  });
+}
+
+export function filterCommon(arr, key) {
+  let newData = {};
+  arr.forEach((item) => {
+    //新建属性名
+    if (Object.keys(newData).indexOf("" + item[key]) === -1) {
+      newData[item[key]] = [];
+    }
+    //对应插入属性值
+    newData["" + item[key]].push(item);
+  });
+  return newData;
+}

src/views/research/ManagePage.vue

@@ -5,33 +5,40 @@
       <div class="header">
         <div style="width: 100%">
           <div class="export">
-             <img src="../../assets/images/research/export.png"/>
-             <span style="color: #4EA6FF;font-size: 14px;margin-left:3px">导出信息</span>
+            <img src="../../assets/images/research/export.png" />
+            <span style="color: #4ea6ff; font-size: 14px; margin-left: 3px">
+              导出信息
+            </span>
           </div>
-          <router-link to="/researchmanage" class="goback"><span class="return"></span><router-link class="returntext" to="/researchmanage">返回</router-link></router-link>
-        </div>       
+          <router-link to="/researchmanage" class="goback">
+            <span class="return"></span>
+            <router-link class="returntext" to="/researchmanage">
+              返回
+            </router-link>
+          </router-link>
+        </div>
         <div class="text">评估管理</div>
       </div>
       <div class="message">
         <div class="title">基本信息</div>
         <div class="messagebox">
-          <div style="width: 186px;margin-right: 126px;float: left">
+          <div style="width: 186px; margin-right: 126px; float: left">
             <span class="name">评估名称:</span>
             <span class="descript">课程评估</span>
           </div>
-          <div style="width: 103px;margin-right: 126px;float:left">
+          <div style="width: 103px; margin-right: 126px; float: left">
             <span class="name">创建人:</span>
             <span class="descript">管理员</span>
           </div>
-          <div style="width: 88px;margin-right: 126px;float:left">
+          <div style="width: 88px; margin-right: 126px; float: left">
             <span class="name">状态:</span>
             <span class="descript">已发布</span>
           </div>
-          <div style="width: 192px;margin-right: 126px;float:left">
+          <div style="width: 192px; margin-right: 126px; float: left">
             <span class="name">创建时间:</span>
             <span class="descript">2022-07-22 9:30</span>
           </div>
-          <div style="width: 192px;margin-right: 126px;float:left">
+          <div style="width: 192px; margin-right: 126px; float: left">
             <span class="name">发布时间:</span>
             <span class="descript">2022-07-22 9:30</span>
           </div>
@@ -51,7 +58,7 @@
           :data-source="dataSource"
           :loading="tableDataTotal === -1 ? true : false"
           expandRowByClick="true"
-          :scroll="{ x: 1500}"
+          :scroll="{ x: 1500 }"
           @expand="expandTable"
           :pagination="false"
         />
@@ -64,124 +71,131 @@
 
 <script>
 import ViewAssess from "../../components/drawers/ViewAssess";
-import { reactive, toRefs} from "vue";
+import { reactive, toRefs } from "vue";
+import { queryAssessmentDetailList } from "@/api/indexResearch";
+import { useRouter } from "vue-router";
 export default {
   name: "ManagePage",
   components: { ViewAssess },
   setup() {
-      const state = reactive ({
-        Assessvisible: false,
+    const router = useRouter();
+    const getInfoDate = async () => {
+      let res = await queryAssessmentDetailList({
+        assessmentId: router.currentRoute.value.params.id,
       });
-      const showassess = () => {
-        state.Assessvisible = true;
-      };
-      return {
-        ...toRefs(state),
-        dataSource: [
-          {
-            key: '1',
-            name: '张三',
-            department: '产品部',
-            post:'产品经理',
-            project:'产品经理进阶-腾飞班1',
-            learning:'产品经理学习路径',
-            submit:'2022-07-22 9:30',
-            
-          },
-          {
-            key: '2',
-            name: '李四',
-            department: '产品部',
-            post:'产品经理',
-            project:'产品经理进阶-腾飞班1',
-            learning:'高级产品经理学习路径',
-            submit:'2022-07-22 9:30',
-         
-          },
-          {
-            key: '3',
-            name: '王五',
-            department: '产品部',
-            post:'产品经理',
-            project:'产品经理进阶-腾飞班1',
-            learning:'-',
-            submit:'2022-07-22 9:30',
-          
-          },
-          {
-            key: '4',
-            name: '赵六',
-            department: '产品部',
-            post:'产品经理',
-            project:'产品经理进阶-腾飞班1',
-            learning:'HR学习路径',
-            submit:'2022-07-22 9:30',
-        
-          },
-        ],
+      console.log(res);
+    };
+    getInfoDate();
 
-        columns: [
-          {
-            title: '姓名',
-            width: 40,
-            dataIndex: 'name',
-            key: 'name',
-          },
-          {
-            title: '部门',
-            width: 50,
-            dataIndex: 'department',
-            key: 'department',
-          },
-          {
-            width: 50,
-            title: '岗位',
-            dataIndex: 'post',
-            key: 'post',
-          },
-          {
-            title: '项目',
-            width: 50,
-            dataIndex: 'project',
-            key: 'project',
-          },
-          {
-            title: '学习路径',
-            width: 50,
-            dataIndex: 'learning',
-            key: 'learning',
-          },
-          {
-            title: '提交时间',
-            width: 50,
-            dataIndex: 'submit',
-            key: 'submit',
-          },
-          {
-            title: '操作',
-            width: 50,
-            dataIndex: 'opacation',
-            key: 'opacation',
-            scopedSlots: { customRender: "action" }, //引入的插槽
-            customRender: () => {
-            return (             
-                <div class="opacationn">
-                  <span
-                    onClick={() => {
-                      showassess();
-                    }}
-                    style="cursor:pointer"
-                  >
-                    查看
-                  </span>
-                </div>
+    const state = reactive({
+      Assessvisible: false,
+    });
+    const showassess = () => {
+      state.Assessvisible = true;
+    };
+    return {
+      ...toRefs(state),
+      dataSource: [
+        {
+          key: "1",
+          name: "张三",
+          department: "产品部",
+          post: "产品经理",
+          project: "产品经理进阶-腾飞班1",
+          learning: "产品经理学习路径",
+          submit: "2022-07-22 9:30",
+        },
+        {
+          key: "2",
+          name: "李四",
+          department: "产品部",
+          post: "产品经理",
+          project: "产品经理进阶-腾飞班1",
+          learning: "高级产品经理学习路径",
+          submit: "2022-07-22 9:30",
+        },
+        {
+          key: "3",
+          name: "王五",
+          department: "产品部",
+          post: "产品经理",
+          project: "产品经理进阶-腾飞班1",
+          learning: "-",
+          submit: "2022-07-22 9:30",
+        },
+        {
+          key: "4",
+          name: "赵六",
+          department: "产品部",
+          post: "产品经理",
+          project: "产品经理进阶-腾飞班1",
+          learning: "HR学习路径",
+          submit: "2022-07-22 9:30",
+        },
+      ],
+
+      columns: [
+        {
+          title: "姓名",
+          width: 40,
+          dataIndex: "name",
+          key: "name",
+        },
+        {
+          title: "部门",
+          width: 50,
+          dataIndex: "department",
+          key: "department",
+        },
+        {
+          width: 50,
+          title: "岗位",
+          dataIndex: "post",
+          key: "post",
+        },
+        {
+          title: "项目",
+          width: 50,
+          dataIndex: "project",
+          key: "project",
+        },
+        {
+          title: "学习路径",
+          width: 50,
+          dataIndex: "learning",
+          key: "learning",
+        },
+        {
+          title: "提交时间",
+          width: 50,
+          dataIndex: "submit",
+          key: "submit",
+        },
+        {
+          title: "操作",
+          width: 50,
+          dataIndex: "opacation",
+          key: "opacation",
+          scopedSlots: { customRender: "action" }, //引入的插槽
+          customRender: () => {
+            return (
+              <div class="opacationn">
+                <span
+                  onClick={() => {
+                    showassess();
+                  }}
+                  style="cursor:pointer"
+                >
+                  查看
+                </span>
+              </div>
             );
           },
-          },
-        ],
-        showassess,
-      };
-    },
+        },
+      ],
+      showassess,
+    };
+  },
 };
 </script>
 
@@ -199,7 +213,7 @@ export default {
       width: 100%;
       display: flex;
       flex-direction: column;
-      border-bottom: 1px solid #F2F6FC;
+      border-bottom: 1px solid #f2f6fc;
       .text {
         font-size: 16px;
         color: #363636;
@@ -211,33 +225,33 @@ export default {
         float: left;
         width: 130px;
         height: 40px;
-        border: 1px solid #4EA6FF;
+        border: 1px solid #4ea6ff;
         border-radius: 8px;
         margin-top: 29px;
         margin-left: 38px;
         text-align: center;
         padding-top: 7px;
       }
-      .goback { 
-            float: right;          
-            padding-right: 70px;
-            //padding-top: 37px;
-            position: relative;
-            .return {
-                display: inline-block;
-                width: 42px;
-                height: 42px;
-                margin-top: 17px;
-                margin-right: 10px;
-                background-image: url("../../assets/images/projectadd/return.png");
-            }
-            .returntext {
-                display: inline-block;
-                position: absolute;
-                top: 27px;
-                color: #4EA6FF;
-                font-size: 14px;
-            }
+      .goback {
+        float: right;
+        padding-right: 70px;
+        //padding-top: 37px;
+        position: relative;
+        .return {
+          display: inline-block;
+          width: 42px;
+          height: 42px;
+          margin-top: 17px;
+          margin-right: 10px;
+          background-image: url("../../assets/images/projectadd/return.png");
+        }
+        .returntext {
+          display: inline-block;
+          position: absolute;
+          top: 27px;
+          color: #4ea6ff;
+          font-size: 14px;
+        }
       }
     }
     .message {
@@ -245,7 +259,7 @@ export default {
       display: flex;
       flex-direction: column;
       .title {
-        color: #4F5156;
+        color: #4f5156;
         font-size: 14px;
         margin-left: 38px;
         margin-top: 20px;
@@ -258,13 +272,12 @@ export default {
         margin-left: 38px;
         margin-bottom: 20px;
         .name {
-          color: #999BA3;
+          color: #999ba3;
           font-size: 14px;
         }
         .descript {
-          color: #4F5156;
-          font-size:14px;
-          
+          color: #4f5156;
+          font-size: 14px;
         }
       }
     }
@@ -279,15 +292,15 @@ export default {
     display: flex;
     flex-direction: column;
     .tableBox {
-      margin: 20px 38px 30px ;
+      margin: 20px 38px 30px;
       .opacationn {
-        color: #4EA6FF;
+        color: #4ea6ff;
         cursor: pointer;
       }
       th.ant-table-cell {
-        background-color:#EFF4FC !important;
+        background-color: #eff4fc !important;
         text-align: center;
-        color: #999BA3;
+        color: #999ba3;
       }
       td.ant-table-cell {
         text-align: center;

src/views/research/ResearchAdd copy.vue

@@ -0,0 +1,760 @@
+<!-- 评估管理-创建评估页面 -->
+<template>
+  <div class="researchadd">
+    <div class="header">
+      <span class="title">创建评估</span>
+      <router-link to="/researchmanage" class="goback">
+        <span class="return"></span>
+        <router-link class="returntext" to="/researchmanage">
+          返回
+        </router-link>
+      </router-link>
+    </div>
+    <div class="addtype">
+      <div class="addtypen">创建评估类型</div>
+      <div class="types" @click="handleTypes(1)">单选题</div>
+      <div class="types" @click="handleTypes(2)">多选题</div>
+      <div class="types" @click="handleTypes(3)">问答题</div>
+      <div class="types" @click="handleTypes(4)">评分题</div>
+    </div>
+    <div v-for="(item, index) in allFormsData" :key="index">
+      <ResearchAddSingle v-if="item.type === 1" :item="item" @del="handleDel" />
+      <ResearchAddMulti v-if="item.type === 2" :item="item" @del="handleDel" />
+      <ResearchAddAsk v-if="item.type === 3" :item="item" @del="handleDel" />
+      <ResearchAddPin v-if="item.type === 4" :item="item" @del="handleDel" />
+    </div>
+    <div class="opinion name2">
+      <div class="namebox">
+        <div class="inname" style="margin-top: 13px">您的其他意见</div>
+      </div>
+      <div class="in">
+        <a-textarea
+          v-model:value="valueMore"
+          style="height: 110px"
+          show-count
+          :maxlength="200"
+        />
+      </div>
+    </div>
+    <div class="footer">
+      <div class="btn">
+        <a-button
+          type="primary"
+          style="
+            width: 100px;
+            height: 40px;
+            border-radius: 8px;
+            background-color: #409eff;
+          "
+          @click="handleSave"
+        >
+          保存
+        </a-button>
+        <a-button
+          type="primary"
+          ghost
+          style="
+            width: 100px;
+            height: 40px;
+            margin-left: 14px;
+            border-radius: 8px;
+          "
+          @click="handleAllCancel"
+        >
+          取消
+        </a-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { reactive, toRefs, computed } from "vue";
+// import { message } from "ant-design-vue";
+// import { createResearch } from "../../api/indexResearch";
+import ResearchAddSingle from "./components/ResearchAddSingle.vue";
+import ResearchAddMulti from "./components/ResearchAddMulti.vue";
+import ResearchAddAsk from "./components/ResearchAddAsk.vue";
+import ResearchAddPin from "./components/ResearchAddPin.vue";
+import { sortBy, traverseArr, filterCommon } from "../../utils/utils";
+import {
+  queryResearchDetailById,
+  editResearchMessage,
+  createResearch,
+} from "@/api/indexResearch";
+import { useRouter } from "vue-router";
+import store from "@/store";
+
+export default {
+  name: "ResearchAdd",
+  components: {
+    ResearchAddSingle,
+    ResearchAddMulti,
+    ResearchAddAsk,
+    ResearchAddPin,
+  },
+  setup() {
+    const router = useRouter();
+    const state = reactive({
+      assessmentId: "", //编辑时候传
+      assessmentName: "",
+      assessmentNameNew: computed(() => store.state.assessmentName),
+
+      allFormsData: [],
+      valueMore: "",
+    });
+
+    const getInfoDate = async () => {
+      let id = router.currentRoute.value.params.id;
+      if (id) {
+        state.assessmentId = id;
+        let renderArr = [];
+        let res = await queryResearchDetailById({
+          assessmentId: state.assessmentId,
+        });
+        console.log("res1111111111");
+        console.log(res);
+        state.assessmentName = res.assessmentName;
+        state.valueMore = res.assessmentMark;
+        renderArr.concat(
+          res.singleStemVoList,
+          res.multipleStemVoList,
+          res.essayQuestionVoList,
+          res.scoringQuestionVoList
+        );
+        sortBy(renderArr, "orderNumber"); //序号
+        console.log("renderArr");
+        console.log(renderArr);
+        this.allFormsData = parseData(renderArr, "questionType"); //类型
+        console.log("this.allFormsData");
+        console.log(this.allFormsData);
+      }
+    };
+    getInfoDate();
+
+    // 转换成前端格式
+    const parseData = (arr, typeKey) => {
+      console.log(arr);
+      console.log(typeKey);
+      const resultArr = [];
+      arr.forEach((item) => {
+        let obj = {};
+        if (item[typeKey] === 1) {
+          let restList = traverseArr(item.assessmentSingleChoiceVoList, {
+            inputVal: "singleOptionName",
+            imgVal: "singleOptionPictureAddress",
+          }).map((itm, idx) => {
+            itm.id = idx + 1;
+            return itm;
+          });
+
+          obj = {
+            type: item[typeKey],
+            valueSingle: item.singleStemName,
+            singleList: restList,
+          };
+          resultArr.push(obj);
+        }
+        if (item[typeKey] === 2) {
+          let restList = traverseArr(item.multipleChoiceVoList, {
+            inputVal: "multipleOptionName",
+            imgVal: "multipleOptionPictureAddress",
+          }).map((itm, idx) => {
+            itm.id = idx + 1;
+            return itm;
+          });
+
+          obj = {
+            type: item[typeKey],
+            valueMutil: item.multipleStemName,
+            mutilList: restList,
+          };
+          resultArr.push(obj);
+        }
+        if (item[typeKey] === 3) {
+          obj = {
+            type: item[typeKey],
+            valueAsk: item.assessmentQaTitle,
+            valueAskDesc: item.assessmentQaDescribe,
+          };
+          resultArr.push(obj);
+        }
+        if (item[typeKey] === 4) {
+          obj = {
+            type: item[typeKey],
+            valuePin: item.assessmentScTitle,
+            minScore: item.assessmentScore, //?
+            maxScore: item.assessmentScore, //?
+            pinQuan: item.weightScale,
+          };
+          resultArr.push(obj);
+        }
+      });
+      resultArr.map((itm, idx) => {
+        itm.id = idx + 1;
+        return itm;
+      });
+      console.log(resultArr);
+      return resultArr;
+    };
+    // 转换成后端格式
+    const restData = (arr, typeKey) => {
+      console.log("转换成后端格式");
+      console.log(arr);
+      console.log(typeKey);
+      const resultArr = [];
+      arr.forEach((item) => {
+        let obj = {};
+        if (item[typeKey] === 1) {
+          console.log(11111111111);
+          let restList = traverseArr(item.singleList, {
+            singleOptionName: "inputVal",
+            singleOptionPictureAddress: "imgVal",
+          }).map((itm, idx) => {
+            itm.optionOrderNum = idx + 1;
+            return itm;
+          });
+          console.log(restList);
+
+          obj = {
+            questionType: item[typeKey],
+            singleStemName: item.valueSingle,
+            singleList: restList,
+          };
+          resultArr.push(obj);
+        }
+        if (item[typeKey] === 2) {
+          let restList = traverseArr(item.mutilList, {
+            multipleOptionName: "inputVal",
+            multipleOptionPictureAddress: "imgVal",
+          }).map((itm, idx) => {
+            itm.optionOrderNum = idx + 1;
+            return itm;
+          });
+
+          obj = {
+            questionType: item[typeKey],
+            multipleStemName: item.valueMutil,
+            mutilList: restList,
+          };
+          resultArr.push(obj);
+        }
+        if (item[typeKey] === 3) {
+          obj = {
+            questionType: item[typeKey],
+            assessmentQaTitle: item.valueAsk,
+            assessmentQaDescribe: item.valueAskDesc,
+          };
+          resultArr.push(obj);
+        }
+        if (item[typeKey] === 4) {
+          obj = {
+            questionType: item[typeKey],
+            assessmentScTitle: item.valuePin,
+            assessmentScore: item.minScore, //?
+            assessmentScore1: item.maxScore, //?
+            weightScale: item.pinQuan,
+          };
+          resultArr.push(obj);
+        }
+      });
+      resultArr.map((itm, idx) => {
+        itm.orderNumber = idx + 1;
+        return itm;
+      });
+      console.log(resultArr);
+      return resultArr;
+    };
+    // 解散传值
+    const parseItem = (arr) => {
+      console.log(676767);
+      console.log(arr);
+      const filterComObj = filterCommon(arr, "questionType");
+      console.log("filterComObj");
+      console.log(filterComObj);
+      let resultObj = {};
+      for (let key in filterComObj) {
+        console.log("key");
+        console.log(key);
+        if (key === "1") {
+          let arrSingle = filterComObj[key];
+          console.log(arrSingle);
+          let arr = [];
+          arrSingle.forEach((item) => {
+            if (item.singleList.length) {
+              item.singleList.forEach((itm) => {
+                arr.push({
+                  ...itm,
+                  singleStemName: item.singleStemName,
+                  orderNumber: item.orderNumber,
+                  questionType: item.questionType,
+                });
+              });
+            }
+          });
+          resultObj.assessmentSingleChoiceDtoList = arr;
+        }
+        if (key === "2") {
+          let arrMulti = filterComObj[key];
+          let arr = [];
+          arrMulti.forEach((item) => {
+            if (item.mutilList.length) {
+              item.mutilList.forEach((itm) => {
+                arr.push({
+                  ...itm,
+                  multipleStemName: item.multipleStemName,
+                  orderNumber: item.orderNumber,
+                  questionType: item.questionType,
+                });
+              });
+            }
+          });
+          resultObj.assessmentMultipleChoiceDtoList = arr;
+        }
+        if (key === "3") {
+          resultObj.assessmentEssayQuestionDtoList = filterComObj[key];
+        }
+        if (key === "4") {
+          resultObj.assessmentScoringQuestionDtoList = filterComObj[key];
+        }
+      }
+      console.log("resultObj");
+      console.log(resultObj);
+      return resultObj;
+    };
+    const creatFromData = (type) => {
+      let obj = {};
+      switch (type) {
+        case 1:
+          obj = {
+            type,
+            id: state.allFormsData.length,
+            valueSingle: "",
+            singleList: [
+              {
+                id: 1,
+                inputVal: "",
+                imgVal: "",
+              },
+            ],
+          };
+          break;
+        case 2:
+          obj = {
+            type,
+            id: state.allFormsData.length,
+            valueMutil: "",
+            mutilList: [
+              {
+                id: 1,
+                inputVal: "",
+                imgVal: "",
+              },
+            ],
+          };
+          break;
+        case 3:
+          obj = {
+            type,
+            id: state.allFormsData.length,
+            valueAsk: "",
+            valueAskDesc: "",
+          };
+          break;
+        case 4:
+          obj = {
+            type,
+            id: state.allFormsData.length,
+            valuePin: "",
+            minScore: 1,
+            maxScore: 10,
+            pinQuan: 100,
+          };
+          break;
+      }
+      return obj;
+    };
+
+    const handleTypes = (type) => {
+      state.allFormsData.push(creatFromData(type));
+    };
+
+    const handleDel = ({ id }) => {
+      state.allFormsData.forEach((item, index) => {
+        if (item.id === id) {
+          state.allFormsData.splice(index, 1);
+        }
+      });
+      state.allFormsData.map((item, index) => {
+        item.id = index + 1;
+        return item;
+      });
+    };
+
+    const handleSave = () => {
+      let resultPost = {};
+      let filterData = parseItem(restData(state.allFormsData, "type"));
+      console.log(777);
+      console.log(filterData);
+      console.log(state.allFormsData);
+      console.log("当前权重设置是百分制 请重新配置");
+
+      if (state.assessmentId) {
+        resultPost = {
+          assessmentId: state.assessmentId,
+          assessmentName: state.assessmentName ? state.assessmentName : "编辑测试",
+          assessmentMark: state.assessmentMark,
+          ...filterData,
+        };
+        console.log("resultPost2222222222");
+        console.log(resultPost);
+        editResearchMessage(resultPost).then((res) => {
+          console.log(res);
+        });
+      } else {
+        resultPost = {
+          assessmentName: state.assessmentNameNew,
+          assessmentMark: state.assessmentMark,
+          ...filterData,
+        };
+        console.log("resultPost111111");
+        console.log(resultPost);
+        createResearch(resultPost).then((res) => {
+          console.log(res);
+        });
+      }
+    };
+    const handleAllCancel = () => {
+      state.allFormsData = [];
+    };
+
+    return {
+      ...toRefs(state),
+      handleTypes,
+      handleSave,
+      handleAllCancel,
+      handleDel,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.researchadd {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    .title {
+      color: #000000;
+      font-size: 18px;
+      //line-height: 36px;
+      padding-top: 30px;
+      padding-left: 37px;
+      //font-weight: 500;
+    }
+    .goback {
+      padding-right: 70px;
+      //padding-top: 37px;
+      position: relative;
+      .return {
+        display: inline-block;
+        width: 42px;
+        height: 42px;
+        margin-top: 17px;
+        margin-right: 10px;
+        background-image: url("../../assets/images/projectadd/return.png");
+      }
+      .returntext {
+        display: inline-block;
+        position: absolute;
+        top: 27px;
+        color: #4ea6ff;
+        font-size: 14px;
+      }
+    }
+  }
+  .addtype {
+    display: flex;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    margin-right: 20px;
+    align-items: center;
+    margin-left: 41px;
+    .addtypen {
+      color: #6f6f6f;
+      font-size: 14px;
+    }
+    .types {
+      cursor: pointer;
+      width: 80px;
+      height: 40px;
+      color: #409eff;
+      border: 1px solid #409eff;
+      border-radius: 4px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 20px 10px;
+    }
+    .typesCur {
+      color: #fff;
+      background: #409eff;
+    }
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    width: 70%;
+    min-width: 690px;
+    margin-left: 38px;
+    margin-top: 20px;
+    .tagbox {
+      display: flex;
+      justify-content: space-between;
+      .tagname {
+        width: 90px;
+        height: 32px;
+        margin-top: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-left: 134px;
+        background: rgba(78, 166, 255, 0.1);
+        border-radius: 4px;
+        color: rgba(64, 158, 255, 1);
+        font-size: 16px;
+      }
+      .deleteop {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100px;
+        height: 40px;
+        margin-top: 20px;
+        margin-right: 30px;
+        border: 1px solid #409eff;
+        border-radius: 8px;
+        cursor: pointer;
+        .del_text {
+          color: #409eff;
+          font-size: 14px;
+          margin-left: 5px;
+        }
+      }
+    }
+    .scorebox {
+      display: flex;
+      align-items: center;
+      margin-top: 20px;
+      margin-left: 70px;
+      .scoretext {
+        font-size: 14px;
+        color: #56a3f9;
+      }
+      .number {
+        display: flex;
+        border: 1px solid #d7e5fd;
+        border-radius: 5px;
+        margin: 0 10px;
+        padding: 5px;
+        .btn {
+          width: 40px;
+          height: 40px;
+          border: 1px solid #56a3f9;
+          border-radius: 8px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin: 5px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #56a3f9;
+          line-height: 24px;
+          cursor: pointer;
+        }
+        .curBtn {
+          background: #56a3f9;
+          color: #fff;
+        }
+      }
+    }
+    .picture {
+      width: 100px;
+      display: flex;
+      flex-direction: column;
+      margin-top: 20px;
+      margin-left: 133px;
+      .pictureimg {
+        width: 100px;
+        height: 100px;
+      }
+      .picturename {
+        color: #6f6f6f;
+        font-size: 14px;
+      }
+    }
+    .options {
+      display: flex;
+    }
+    .delete {
+      cursor: pointer;
+      margin-top: 32px;
+      margin-left: 20px;
+      // float: right;
+      color: #4ea6ff;
+      font-size: 14px;
+    }
+    .name2 {
+      display: flex;
+      align-items: flex-start;
+    }
+    .name {
+      width: 60%;
+      // background-color: lightcoral;
+      display: flex;
+      margin-top: 20px;
+      //align-items: center;
+      //height: 40px;
+      // border: 1px solid black;
+      .namebox {
+        width: 120px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        flex-shrink: 0;
+        .nameimg {
+          width: 10px;
+          height: 10px;
+        }
+      }
+      .inname {
+        color: #6f6f6f;
+        font-size: 14px;
+        margin-left: 7px;
+        font-weight: 700;
+      }
+      .in {
+        margin-left: 14px;
+        flex: 1;
+        .assess {
+          display: flex;
+          width: 226px;
+          height: 40px;
+          border: 1px solid #56a3f9;
+          //margin-bottom: 20px;
+          .assesstype {
+            width: 50%;
+            background: #56a3f9;
+            color: #ffffff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          .assesswhole {
+            width: 50%;
+            background: rgba(86, 163, 249, 0.1);
+            font-size: 14px;
+            color: #6f6f6f;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          .ratio {
+            position: absolute;
+            right: 10px;
+            top: 8px;
+            color: #6f6f6f;
+            font-size: 14px;
+          }
+        }
+        .addimg {
+          cursor: pointer;
+          color: rgba(78, 166, 255, 1);
+          font-size: 14px;
+        }
+        .text {
+          color: rgba(109, 117, 132, 1);
+          font-size: 14px;
+          //line-height: 24px;
+        }
+        .ant-radio-wrapper {
+        }
+        .ant-input {
+          border-radius: 5px;
+          // height: 120%;
+          width: 100%;
+          height: 35px;
+        }
+        .ant-select-selector {
+          border-radius: 5px;
+          // height: 120%;
+          width: 100%;
+          height: 40px;
+        }
+      }
+      .numberInp {
+        width: 200px;
+        .ant-input-number {
+          width: 200px;
+          height: 40px;
+          border-radius: 8px;
+        }
+        // .ant-input-number-input-wrap {
+        //   width: 200px;
+        // }
+      }
+    }
+  }
+  .name2 {
+    display: flex;
+    align-items: flex-start;
+  }
+  .opinion {
+    display: flex;
+    margin-top: 30px;
+    .namebox {
+      width: 120px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      flex-shrink: 0;
+    }
+    .in {
+      margin-left: 14px;
+      width: 500px;
+      .ant-input-textarea-show-count {
+        position: relative;
+        height: 110px;
+      }
+      .ant-input-textarea-show-count::after {
+        position: absolute;
+        right: 10px;
+        bottom: 0px;
+      }
+      .ant-input {
+        border-radius: 8px;
+      }
+    }
+  }
+  .footer {
+    width: 100%;
+    margin-top: 31px;
+    margin-bottom: 14px;
+    .btn {
+      display: flex;
+      margin-bottom: 20px;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
+
+  .uploadContent {
+    display: block !important;
+    .uploadBtn {
+      margin-left: 120px !important;
+    }
+  }
+}
+</style>

src/views/research/ResearchAdd.vue

@@ -3,244 +3,45 @@
   <div class="researchadd">
     <div class="header">
       <span class="title">创建评估</span>
-      <router-link to="/researchmanage" class="goback"
-        ><span class="return"></span
-        ><router-link class="returntext" to="/researchmanage"
-          >返回</router-link
-        ></router-link
-      >
+      <router-link to="/researchmanage" class="goback">
+        <span class="return"></span>
+        <router-link class="returntext" to="/researchmanage">
+          返回
+        </router-link>
+      </router-link>
     </div>
     <div class="addtype">
       <div class="addtypen">创建评估类型</div>
-      <div class="types">单选题</div>
-      <div class="types">多选题</div>
-      <div class="types">问答题</div>
-      <div class="types">评分题</div>
+      <div class="types" @click="handleTypes(1)">单选题</div>
+      <div class="types" @click="handleTypes(2)">多选题</div>
+      <div class="types" @click="handleTypes(3)">问答题</div>
+      <div class="types" @click="handleTypes(4)">评分题</div>
     </div>
-    <div class="content">
-      <div class="tagbox">
-        <div class="tagname">单选题</div>
-        <div class="deleteop">
-          <div><img src="../../assets/images/projectadd/delete.png" /></div>
-          <div class="del_text">删除选项</div>
-        </div>
-      </div>
-      <div class="name">
-        <div class="namebox">
-          <img
-            class="nameimg"
-            src="../../assets/images/basicinfo/asterisk.png"
-          />
-          <div class="inname">标题</div>
-        </div>
-        <div class="in">
-          <a-input
-            v-model:value="valueE"
-            placeholder="请输入提干名称"
-            show-count
-            :maxlength="20"
-            style="border-radius: 8px"
-          />
-        </div>
-      </div>
-      <div class="options">
-        <div class="name">
-          <div class="namebox">
-            <div class="inname">选项1</div>
-          </div>
-          <div class="in">
-            <a-input
-              v-model:value="valueE"
-              show-count
-              :maxlength="30"
-              style="border-radius: 8px"
-            />
-          </div>
-        </div>
-        <div class="delete">删除</div>
-      </div>
-      <div class="name">
-        <div class="in" style="margin-left: 133px">
-          <div class="addimg">+添加图片</div>
-        </div>
-      </div>
-      <div class="options">
-        <div class="name">
-          <div class="namebox">
-            <div class="inname">选项2</div>
-          </div>
-          <div class="in">
-            <a-input
-              v-model:value="valueE"
-              show-count
-              :maxlength="30"
-              style="border-radius: 8px"
-            />
-          </div>
-        </div>
-        <div class="delete">删除</div>
-      </div>
-      <div class="picture" style="position: relative">
-        <img
-          class="pictureimg"
-          src="../../assets/images/research/picture.png"
-        />
-        <div class="picturename">图片名称1.jpg</div>
-        <img
-          style="
-            cursor: pointer;
-            width: 20px;
-            height: 20px;
-            position: absolute;
-            right: 0;
-            top: 0;
-          "
-          src="../../assets/images/basicinfo/close.png"
-        />
-      </div>
-      <div class="name">
-        <div class="in" style="margin-left: 85px; margin-bottom: 20px">
-          <a-button
-            type="primary"
-            style="
-              width: 100px;
-              height: 40px;
-              border-radius: 8px;
-              background-color: #409eff;
-            "
-            >添加选项</a-button
-          >
-        </div>
-      </div>
-    </div>
-    <div class="content">
-      <div class="tagbox">
-        <div class="tagname">问答题</div>
-        <div class="deleteop">
-          <div><img src="../../assets/images/projectadd/delete.png" /></div>
-          <div class="del_text">删除选项</div>
-        </div>
-      </div>
-      <div class="name">
-        <div class="namebox">
-          <img
-            class="nameimg"
-            src="../../assets/images/basicinfo/asterisk.png"
-          />
-          <div class="inname">标题</div>
-        </div>
-        <div class="in">
-          <a-input
-            v-model:value="valueEi"
-            placeholder="请输入标题名称"
-            show-count
-            :maxlength="20"
-            style="border-radius: 8px"
-          />
-        </div>
-      </div>
-      <div class="name name2" style="margin-bottom: 20px">
-        <div class="namebox">
-          <div class="inname">描述</div>
-        </div>
-        <div class="in">
-          <a-textarea v-model:value="valueii" style="height: 148px" />
-        </div>
-      </div>
-    </div>
-    <div class="content">
-      <div class="tagbox">
-        <div class="tagname">评分题</div>
-        <div class="deleteop">
-          <div><img src="../../assets/images/projectadd/delete.png" /></div>
-          <div class="del_text">删除选项</div>
-        </div>
-      </div>
-      <div class="name">
-        <div class="namebox">
-          <img
-            class="nameimg"
-            src="../../assets/images/basicinfo/asterisk.png"
-          />
-          <div class="inname">标题</div>
-        </div>
-        <div class="in">
-          <a-input
-            v-model:value="valueE1"
-            placeholder="请输入标题名称"
-            show-count
-            :maxlength="20"
-            style="border-radius: 8px"
-          />
-        </div>
-      </div>
-      <div class="name">
-        <div class="namebox">
-          <div class="inname">最低分</div>
-        </div>
-        <div class="in numberInp">
-          <a-input-number
-            :value="minScore"
-            :min="1"
-            :max="10"
-            @change="minChange"
-          />
-        </div>
-        <div class="namebox">
-          <div class="inname">最高分</div>
-        </div>
-        <div class="in numberInp">
-          <a-input-number
-            :value="maxScore"
-            :min="1"
-            :max="10"
-            @change="maxChange"
-          />
-        </div>
-      </div>
-      <div class="scorebox">
-        <div class="scoretext">非常满意</div>
-        <div class="number">
-          <div
-            class="btn"
-            style="margin-left: 10px"
-            v-for="(value, index) in scoreList"
-            :key="index"
-          >
-            {{ value.text }}
-          </div>
-          <!-- <a-button class="btn">2</a-button>
-                    <a-button class="btn">3</a-button>
-                    <a-button class="btn">4</a-button>
-                    <a-button class="btn">5</a-button>
-                    <a-button class="btn">6</a-button>
-                    <a-button class="btn">7</a-button>
-                    <a-button class="btn">8</a-button>
-                    <a-button class="btn">9</a-button>
-                    <a-button class="btn" style="display: flex;align-items:center;margin-right: 10px;justify-content: center">10</a-button> -->
-        </div>
-        <div class="scoretext">非常不满意</div>
-      </div>
-      <div class="name" style="margin-bottom: 20px">
-        <div class="namebox">
-          <img
-            class="nameimg"
-            src="../../assets/images/basicinfo/asterisk.png"
-          />
-          <div class="inname">配置权重</div>
-        </div>
-        <div class="in" style="display: flex">
-          <div class="assess">
-            <div class="assesstype">评估类型</div>
-            <div class="assesswhole">整体评估</div>
-          </div>
-          <div class="assess" style="margin-left: 50px; position: relative">
-            <div class="assesstype">权重比例</div>
-            <div class="assesswhole" style="background: #ffffff">20</div>
-            <div class="ratio">%</div>
-          </div>
-        </div>
-      </div>
+    <div v-for="(item, index) in allFormsData" :key="index">
+      <ResearchAddSingle
+        v-if="item.type === 1"
+        :item="item"
+        :assessmentId="assessmentId"
+        @del="handleDel"
+      />
+      <ResearchAddMulti
+        v-if="item.type === 2"
+        :item="item"
+        :assessmentId="assessmentId"
+        @del="handleDel"
+      />
+      <ResearchAddAsk
+        v-if="item.type === 3"
+        :item="item"
+        :assessmentId="assessmentId"
+        @del="handleDel"
+      />
+      <ResearchAddPin
+        v-if="item.type === 4"
+        :item="item"
+        :assessmentId="assessmentId"
+        @del="handleDel"
+      />
     </div>
     <div class="opinion name2">
       <div class="namebox">
@@ -248,7 +49,7 @@
       </div>
       <div class="in">
         <a-textarea
-          v-model:value="valuep"
+          v-model:value="valueMore"
           style="height: 110px"
           show-count
           :maxlength="200"
@@ -265,8 +66,10 @@
             border-radius: 8px;
             background-color: #409eff;
           "
-          >保存</a-button
+          @click="handleSave"
         >
+          保存
+        </a-button>
         <a-button
           type="primary"
           ghost
@@ -276,134 +79,524 @@
             margin-left: 14px;
             border-radius: 8px;
           "
-          >取消</a-button
+          @click="handleAllCancel"
         >
+          取消
+        </a-button>
       </div>
     </div>
   </div>
 </template>
 <script>
-import { reactive, toRefs } from "vue";
+import { reactive, toRefs, computed } from "vue";
+// import { message } from "ant-design-vue";
+// import { createResearch } from "../../api/indexResearch";
+import ResearchAddSingle from "./components/ResearchAddSingle.vue";
+import ResearchAddMulti from "./components/ResearchAddMulti.vue";
+import ResearchAddAsk from "./components/ResearchAddAsk.vue";
+import ResearchAddPin from "./components/ResearchAddPin.vue";
+import {
+  sortBy,
+  traverseArr,
+  filterCommon,
+  deepCloneFilterString,
+} from "../../utils/utils";
+import {
+  queryResearchDetailById,
+  editResearchMessage,
+  createResearch,
+  deleteChoiceQuestion,
+  deleteQuestionScAndQa,
+} from "@/api/indexResearch";
+import { useRouter } from "vue-router";
+import store from "@/store";
 import { message } from "ant-design-vue";
+
 export default {
   name: "ResearchAdd",
+  components: {
+    ResearchAddSingle,
+    ResearchAddMulti,
+    ResearchAddAsk,
+    ResearchAddPin,
+  },
   setup() {
+    const router = useRouter();
     const state = reactive({
-      minScore: 1,
-      maxScore: 10,
-      scoreList: [
-        {
-          id: 1,
-          text: 1,
-        },
-        {
-          id: 2,
-          text: 2,
-        },
-        {
-          id: 3,
-          text: 3,
-        },
-        {
-          id: 4,
-          text: 4,
-        },
-        {
-          id: 5,
-          text: 5,
-        },
-        {
-          id: 6,
-          text: 6,
-        },
-        {
-          id: 7,
-          text: 7,
-        },
-        {
-          id: 8,
-          text: 8,
-        },
-        {
-          id: 9,
-          text: 9,
-        },
-        {
-          id: 10,
-          text: 10,
-        },
-      ],
-      scoreListClone: [
-        {
-          id: 1,
-          text: 1,
-        },
-        {
-          id: 2,
-          text: 2,
-        },
-        {
-          id: 3,
-          text: 3,
-        },
-        {
-          id: 4,
-          text: 4,
-        },
-        {
-          id: 5,
-          text: 5,
-        },
-        {
-          id: 6,
-          text: 6,
-        },
-        {
-          id: 7,
-          text: 7,
-        },
-        {
-          id: 8,
-          text: 8,
-        },
-        {
-          id: 9,
-          text: 9,
-        },
-        {
-          id: 10,
-          text: 10,
-        },
-      ],
+      assessmentId: "", //编辑时候传
+      assessmentName: "",
+      assessmentNameNew: computed(() => store.state.assessmentName),
+
+      allFormsData: [],
+      valueMore: "",
     });
 
-    const minChange = (e) => {
-      // console.log("eee", e);
-      if (e > state.maxScore) return message.info("最低分不能超过最高分");
-      state.minScore = e;
-      let arr = state.scoreListClone.concat([]);
-      arr.map((value, index) => {
-        if (value.id === e) {
-          arr = arr.slice(index, state.maxScore);
+    // 详情
+    const getInfoDate = async () => {
+      let id = router.currentRoute.value.params.id;
+      if (id) {
+        state.assessmentId = id;
+        let res = await queryResearchDetailById({
+          assessmentId: state.assessmentId,
+        }).then((res) => {
+          if (res.data.code === 200) {
+            return res.data.data;
+          }
+        });
+        state.assessmentName = res.assessmentName;
+        state.valueMore = res.assessmentMark;
+        let renderArr = [
+          ...res.singleStemVoList,
+          ...res.multipleStemVoList,
+          ...res.essayQuestionVoList,
+          ...res.scoringQuestionVoList,
+        ];
+        sortBy(renderArr, "orderNumber"); //序号
+        state.allFormsData = parseData(renderArr, "questionType"); //类型
+        // console.log("state.allFormsData");
+        // console.log(state.allFormsData);
+      }
+    };
+    getInfoDate();
+
+    // 转换成前端格式
+    const parseData = (arr, typeKey) => {
+      const resultArr = [];
+      arr.forEach((item) => {
+        let key = Number(item[typeKey]);
+        let obj = {};
+        if (key === 1) {
+          let restList = traverseArr(item.assessmentSingleChoiceVoList, {
+            inputVal: "singleOptionName",
+            imgVal: "singleOptionPictureAddress",
+            optionId: "singleOptionId",
+          }).map((itm, idx) => {
+            itm.id = idx + 1;
+            return itm;
+          });
+
+          obj = {
+            type: key,
+            valueSingle: item.singleStemName,
+            singleList: restList,
+            orderNumber: item.orderNumber,
+          };
+          resultArr.push(obj);
+        }
+        if (key === 2) {
+          let restList = traverseArr(item.multipleChoiceVoList, {
+            inputVal: "multipleOptionName",
+            imgVal: "multipleOptionPictureAddress",
+            optionId: "multipleOptionId",
+          }).map((itm, idx) => {
+            itm.id = idx + 1;
+            return itm;
+          });
+
+          obj = {
+            type: key,
+            valueMutil: item.multipleStemName,
+            mutilList: restList,
+            orderNumber: item.orderNumber,
+          };
+          resultArr.push(obj);
+        }
+        if (key === 3) {
+          obj = {
+            type: key,
+            valueAsk: item.assessmentQaTitle,
+            valueAskDesc: item.assessmentQaDescribe,
+            optionId: item.assessmentQaId,
+          };
+          resultArr.push(obj);
+        }
+        if (key === 4) {
+          obj = {
+            type: key,
+            valuePin: item.assessmentScTitle,
+            minScore: item.assessmentMinScore,
+            maxScore: item.assessmentMaxScore,
+            pinQuan: item.weightScale,
+            optionId: item.assessmentScId,
+          };
+          resultArr.push(obj);
         }
       });
-      state.scoreList = arr;
+      resultArr.map((itm, idx) => {
+        itm.id = idx + 1;
+        return itm;
+      });
+      return resultArr;
     };
-    const maxChange = (e) => {
-      if (e < state.minScore) return message.info("最高分不能低于最低分");
-      state.maxScore = e;
-      let arr = state.scoreListClone.concat([]);
-      arr.map((value, index) => {
-        if (value.id === e) {
-          arr = arr.slice(state.minScore - 1, index + 1);
+    // 转换成后端格式
+    const restData = (arr, typeKey) => {
+      const resultArr = [];
+      arr.forEach((item) => {
+        let obj = {};
+        if (item[typeKey] === 1) {
+          let restList = traverseArr(item.singleList, {
+            singleOptionName: "inputVal",
+            singleOptionPictureAddress: "imgVal",
+            singleOptionId: "optionId",
+          }).map((itm, idx) => {
+            itm.optionOrderNum = idx + 1;
+            return itm;
+          });
+          restList.forEach((item) => {
+            item.singleOptionId = item.singleOptionId
+              ? item.singleOptionId
+              : "";
+          });
+
+          obj = {
+            questionType: item[typeKey],
+            singleStemName: item.valueSingle,
+            singleList: restList,
+            orderNumber: item.orderNumber,
+          };
+          resultArr.push(obj);
+        }
+        if (item[typeKey] === 2) {
+          let restList = traverseArr(item.mutilList, {
+            multipleOptionName: "inputVal",
+            multipleOptionPictureAddress: "imgVal",
+            multipleOptionId: "optionId",
+          }).map((itm, idx) => {
+            itm.optionOrderNum = idx + 1;
+            return itm;
+          });
+          restList.forEach((item) => {
+            item.multipleOptionId = item.multipleOptionId
+              ? item.multipleOptionId
+              : "";
+          });
+
+          obj = {
+            questionType: item[typeKey],
+            multipleStemName: item.valueMutil,
+            mutilList: restList,
+            orderNumber: item.orderNumber,
+          };
+          resultArr.push(obj);
+        }
+        if (item[typeKey] === 3) {
+          obj = {
+            questionType: item[typeKey],
+            assessmentQaTitle: item.valueAsk,
+            assessmentQaDescribe: item.valueAskDesc,
+            assessmentQaId: item.optionId ? item.optionId : "",
+          };
+          resultArr.push(obj);
+        }
+        if (item[typeKey] === 4) {
+          obj = {
+            questionType: item[typeKey],
+            assessmentScTitle: item.valuePin,
+            assessmentMinScore: item.minScore,
+            assessmentMaxScore: item.maxScore,
+            weightScale: item.pinQuan,
+            assessmentScId: item.optionId ? item.optionId : "",
+          };
+          resultArr.push(obj);
         }
       });
-      state.scoreList = arr;
+      resultArr.map((itm, idx) => {
+        itm.orderNumber = idx + 1;
+        return itm;
+      });
+      return resultArr;
     };
+    // 解散传值
+    const parseItem = (arr) => {
+      const filterComObj = filterCommon(arr, "questionType");
+      let resultObj = {};
+      for (let key in filterComObj) {
+        if (key === "1") {
+          let arrSingle = filterComObj[key];
+          let arr = [];
+          arrSingle.forEach((item) => {
+            if (item.singleList.length) {
+              item.singleList.forEach((itm) => {
+                arr.push({
+                  ...itm,
+                  singleStemName: item.singleStemName,
+                  orderNumber: item.orderNumber,
+                  questionType: item.questionType,
+                });
+              });
+            }
+          });
+          resultObj.assessmentSingleChoiceDtoList = arr;
+        }
+        if (key === "2") {
+          let arrMulti = filterComObj[key];
+          let arr = [];
+          arrMulti.forEach((item) => {
+            if (item.mutilList.length) {
+              item.mutilList.forEach((itm) => {
+                arr.push({
+                  ...itm,
+                  multipleStemName: item.multipleStemName,
+                  orderNumber: item.orderNumber,
+                  questionType: item.questionType,
+                });
+              });
+            }
+          });
+          resultObj.assessmentMultipleChoiceDtoList = arr;
+        }
+        if (key === "3") {
+          resultObj.assessmentEssayQuestionDtoList = filterComObj[key];
+        }
+        if (key === "4") {
+          resultObj.assessmentScoringQuestionDtoList = filterComObj[key];
+        }
+      }
+      return resultObj;
+    };
+    const creatFromData = (type) => {
+      let obj = {};
+      switch (type) {
+        case 1:
+          obj = {
+            type,
+            id: state.allFormsData.length,
+            valueSingle: "",
+            singleList: [
+              {
+                id: 1,
+                inputVal: "",
+                imgVal: "",
+              },
+            ],
+          };
+          break;
+        case 2:
+          obj = {
+            type,
+            id: state.allFormsData.length,
+            valueMutil: "",
+            mutilList: [
+              {
+                id: 1,
+                inputVal: "",
+                imgVal: "",
+              },
+            ],
+          };
+          break;
+        case 3:
+          obj = {
+            type,
+            id: state.allFormsData.length,
+            valueAsk: "",
+            valueAskDesc: "",
+          };
+          break;
+        case 4:
+          obj = {
+            type,
+            id: state.allFormsData.length,
+            valuePin: "",
+            minScore: 1,
+            maxScore: 10,
+            pinQuan: 100,
+          };
+          break;
+      }
+      return obj;
+    };
+
+    const handleTypes = (type) => {
+      state.allFormsData.push(creatFromData(type));
+    };
+
+    const handleDel = ({ id, type, curItem }) => {
+      state.allFormsData.forEach((item, index) => {
+        if (item.id === id) {
+          state.allFormsData.splice(index, 1);
+        }
+      });
+      state.allFormsData.map((item, index) => {
+        item.id = index + 1;
+        return item;
+      });
+
+      if (type === 1) {
+        console.log(11111);
+        console.log(curItem);
+        deleteChoiceQuestion({
+          assessmentId: state.assessmentId,
+          questionType: "1",
+          orderNumber: curItem.orderNumber,
+        }).then((res) => {
+          console.log(56444);
+          console.log(res);
+        });
+      }
+      if (type === 2) {
+        console.log(11111);
+        console.log(curItem);
+        deleteChoiceQuestion({
+          assessmentId: state.assessmentId,
+          questionType: "2",
+          orderNumber: curItem.orderNumber,
+        }).then((res) => {
+          console.log(56444);
+          console.log(res);
+        });
+      }
+      if (type === 3) {
+        console.log(2222);
+        console.log(curItem);
+        deleteQuestionScAndQa({
+          assessmentId: state.assessmentId,
+          questionType: "3",
+          optionId: curItem.optionId,
+        }).then((res) => {
+          console.log(56444);
+          console.log(res);
+        });
+      }
+      if (type === 4) {
+        console.log(2222);
+        console.log(curItem);
+        deleteQuestionScAndQa({
+          assessmentId: state.assessmentId,
+          questionType: "4",
+          optionId: curItem.optionId,
+        }).then((res) => {
+          console.log(56444);
+          console.log(res);
+        });
+      }
+    };
+
+    const handleSave = () => {
+      let resultPost = {};
+      let filterData = parseItem(restData(state.allFormsData, "type"));
+      // 校验
+      if (!checkVal(filterData)) {
+        return false;
+      }
+      console.log(12121212);
+      console.log(filterData);
+
+      if (state.assessmentId) {
+        resultPost = {
+          assessmentId: state.assessmentId,
+          assessmentName: state.assessmentName,
+          assessmentMark: state.valueMore,
+          ...filterData,
+        };
+        resultPost = deepCloneFilterString(resultPost, [
+          "assessmentMaxScore",
+          "assessmentMinScore",
+        ]);
+        console.log(1212334);
+        console.log(resultPost);
+        editResearchMessage(resultPost).then((res) => {
+          if (res.data.code === 200) {
+            message.success("编辑成功");
+            router.push({
+              path: "/researchmanage",
+            });
+          }
+        });
+      } else {
+        resultPost = {
+          assessmentName: state.assessmentNameNew,
+          assessmentMark: state.valueMore,
+          ...filterData,
+        };
+        resultPost = deepCloneFilterString(resultPost, [
+          "assessmentMaxScore",
+          "assessmentMinScore",
+        ]);
+        createResearch(resultPost).then((res) => {
+          if (res.data.code === 200) {
+            message.success("创建成功");
+            router.push({
+              path: "/researchmanage",
+            });
+          }
+        });
+      }
+    };
+    const handleAllCancel = () => {
+      state.allFormsData = [];
+      router.push({
+        path: "/researchmanage",
+      });
+    };
+    const checkVal = (filterData) => {
+      // 问答
+      if (
+        filterData.assessmentEssayQuestionDtoList &&
+        filterData.assessmentEssayQuestionDtoList.length
+      ) {
+        let arr = filterData.assessmentEssayQuestionDtoList;
+        for (let item of arr) {
+          if (!item.assessmentQaTitle) {
+            message.error("问答题干为必填 请确认");
+            return false;
+          }
+        }
+      }
+      // 多选
+      if (
+        filterData.assessmentMultipleChoiceDtoList &&
+        filterData.assessmentMultipleChoiceDtoList.length
+      ) {
+        let arr = filterData.assessmentMultipleChoiceDtoList;
+        for (let item of arr) {
+          if (!item.multipleStemName) {
+            message.error("多选题干为必填 请确认");
+            return false;
+          }
+        }
+      }
+      // 评分
+      if (
+        filterData.assessmentScoringQuestionDtoList &&
+        filterData.assessmentScoringQuestionDtoList.length
+      ) {
+        let CountNum = 0;
+        let CountArr = filterData.assessmentScoringQuestionDtoList;
+        for (let item of CountArr) {
+          if (!item.assessmentScTitle) {
+            message.error("评分题干为必填 请确认");
+            return false;
+          }
+          CountNum += Number(item["weightScale"]);
+        }
+        if (CountNum !== 100) {
+          message.error("当前权重设置是百分制 请重新配置");
+          return false;
+        }
+      }
+      // 单选
+      if (
+        filterData.assessmentSingleChoiceDtoList &&
+        filterData.assessmentSingleChoiceDtoList.length
+      ) {
+        let arr = filterData.assessmentSingleChoiceDtoList;
+        for (let item of arr) {
+          if (!item.singleStemName) {
+            message.error("单选题干为必填 请确认");
+            return false;
+          }
+        }
+      }
+      return true;
+    };
+
     return {
       ...toRefs(state),
-      minChange,
-      maxChange,
+      handleTypes,
+      handleSave,
+      handleAllCancel,
+      handleDel,
     };
   },
 };
@@ -468,6 +661,10 @@ export default {
       align-items: center;
       margin: 20px 10px;
     }
+    .typesCur {
+      color: #fff;
+      background: #409eff;
+    }
   }
   .content {
     display: flex;
@@ -541,6 +738,10 @@ export default {
           line-height: 24px;
           cursor: pointer;
         }
+        .curBtn {
+          background: #56a3f9;
+          color: #fff;
+        }
       }
     }
     .picture {
@@ -712,5 +913,12 @@ export default {
       cursor: pointer;
     }
   }
+
+  .uploadContent {
+    display: block !important;
+    .uploadBtn {
+      margin-left: 120px !important;
+    }
+  }
 }
 </style>

src/views/research/ResearchManage.vue

@@ -5,54 +5,44 @@
     <div class="filter">
       <div class="filterItems">
         <div class="select">
-          <a-select
+          <a-input
             v-model:value="projectName"
-            style="width: 270px"
+            style="width: 270px; height: 40px; border-radius: 8px"
             placeholder="请输入评估名称"
-            :options="projectNameList"
-            @change="selectProjectName"
-            allowClear
-            showSearch
-          ></a-select>
+          />
         </div>
 
         <div class="select">
           <a-select
-            v-model:value="projectName"
+            v-model:value="projectStatus"
             style="width: 270px"
             placeholder="请选择状态"
             :options="projectStateList"
-            @change="selectProjectState"
+            @change="handleProjectState"
             allowClear
             showSearch
           ></a-select>
         </div>
         <div class="select">
-          <!-- <a-date-picker
-            v-model="selectTime"
-            type="date"
-            placeholder="时间"
-            style="width: 270px"
-          /> -->
           <a-range-picker
-            v-model:value="value2"
+            v-model:value="projectTime"
             separator="至"
             :placeholder="['        开始时间', '        结束时间']"
           />
         </div>
         <div style="display: flex; margin-bottom: 20px">
-          <div class="btn btn1">
+          <div class="btn btn1" @click="handleSearch">
             <div class="search"></div>
             <div class="btnText">搜索</div>
           </div>
-          <div class="btnn btn2">
+          <div class="btnn btn2" @click="handleRest">
             <div class="search"></div>
             <div class="btnText">重置</div>
           </div>
         </div>
       </div>
-      <div class="btns">       
-        <div class="btn btn3" @click="handleOut">
+      <div class="btns">
+        <div class="btn btn3" @click="handleNew">
           <div class="search"></div>
           <div class="btnText">创建评估</div>
         </div>
@@ -81,11 +71,12 @@
         :current="currentPage"
         :total="tableDataTotal"
         class="pagination"
+        @change="handelChangePage"
       />
     </div>
     <!-- 表格 -->
     <a-modal
-      v-model:visible="out"
+      v-model:visible="newNext"
       :footer="null"
       :closable="false"
       style="margin-top: 250px"
@@ -94,8 +85,11 @@
       <div class="out">
         <div class="top">
           <img class="topimg" src="../../assets/images/courseManage/add1.png" />
-          <div class="topc">创建评估</div>
-          <div @click="handleOut" style="margin-left: 500px; cursor: pointer">
+          <div class="topc">{{ !assessmentId ? "创建" : "编辑" }}评估</div>
+          <div
+            style="margin-left: 500px; cursor: pointer"
+            @click="handleCancel"
+          >
             <img
               style="width: 20px; height: 20px"
               src="../../assets/images/basicinfo/close.png"
@@ -107,7 +101,7 @@
             <div class="inname">评估名称</div>
             <div class="in">
               <a-input
-                v-model:value="valuen"
+                v-model:value="assessmentName"
                 show-count
                 :maxlength="15"
                 style="border-radius: 8px"
@@ -115,8 +109,10 @@
             </div>
           </div>
           <div class="btn">
-            <button class="samtn btn1" @click="handleOut">取消</button>
-            <button class="samtn btn2" @click="handleOut">确定</button>
+            <button class="samtn btn1" @click="handleCancel">取消</button>
+            <button class="samtn btn2" @click="handleNext">
+              {{ !assessmentId ? "下一步" : "确定" }}
+            </button>
           </div>
         </div>
       </div></a-modal
@@ -128,15 +124,15 @@
       :closable="closableQR"
       wrapClassName="DelModal"
       style="margin-top: 400px"
-      @cancel="delete_exit"
+      @cancel="handleCancelModal"
     >
       <div class="delete" :style="{ display: delete_hs ? 'block' : 'none' }">
         <div class="del_header"></div>
         <div class="del_main">
           <div class="header">
-            <img src="@/assets/images/coursewareManage/QR.png" alt="">
+            <img src="@/assets/images/coursewareManage/QR.png" alt="" />
             <span style="margin-left: 9px">提示</span>
-            <div class="close_exit" @click="delete_exit"></div>
+            <div class="close_exit" @click="handleCancelModal"></div>
           </div>
           <div class="body">
             <div :style="{ display: del_hs ? 'block' : 'none' }">
@@ -157,10 +153,10 @@
           </div>
           <div class="del_btnbox">
             <div class="del_btn btn1">
-              <div class="btnText" @click="delete_exit">取消</div>
+              <div class="btnText" @click="handleCancelModal">取消</div>
             </div>
             <div class="del_btn btn2">
-              <div class="btnText" @click="delete_exit">确定</div>
+              <div class="btnText" @click="handleSure">确定</div>
             </div>
           </div>
         </div>
@@ -171,50 +167,66 @@
 </template>
 <script>
 import { reactive, toRefs, onMounted, ref } from "vue";
+// import { message } from "ant-design-vue";
+import {
+  queryResearchDetailList,
+  editAssessmentName,
+  editReleaseStatus,
+  deleteResearch,
+  createResearch,
+} from "@/api/indexResearch";
+import { traverseArr } from "../../utils/utils";
+import { useRouter } from "vue-router";
+import { toDate } from "../../api/method.js";
+import store from "@/store";
+import { message } from "ant-design-vue";
+
 export default {
   name: "learningPath",
   setup() {
+    const router = useRouter();
     const state = reactive({
-      projectNameList: [
-        {
-          id: 1,
-          value: "项目一",
-          label: "项目一",
-        },
-        {
-          id: 2,
-          value: "项目二",
-          label: "项目二",
-        },
-        {
-          id: 3,
-          value: "项目三",
-          label: "项目三",
-        },
-        {
-          id: 4,
-          value: "项目四",
-          label: "项目四",
-        },
-      ],
+      // projectNameList: [
+      //   {
+      //     id: 1,
+      //     value: "项目一",
+      //     label: "项目一",
+      //   },
+      //   {
+      //     id: 2,
+      //     value: "项目二",
+      //     label: "项目二",
+      //   },
+      //   {
+      //     id: 3,
+      //     value: "项目三",
+      //     label: "项目三",
+      //   },
+      //   {
+      //     id: 4,
+      //     value: "项目四",
+      //     label: "项目四",
+      //   },
+      // ],
       projectStateList: [
         {
-          id: 1,
-          value: "已发布",
-          label: "已发布",
+          value: 1,
+          label: "待发布", //发布
         },
         {
-          id: 2,
-          value: "待发布",
-          label: "待发布",
+          value: 2,
+          label: "已发布", //撤回
         },
         {
-          id: 3,
-          value: "已结束",
+          value: 3,
           label: "已结束",
         },
       ],
-      out: false,
+      projectName: "",
+      projectStatus: null,
+      projectTime: "",
+
+      newNext: false,
       number: null,
       selectTime: null,
       tableData: [
@@ -260,10 +272,14 @@ export default {
         },
       ],
       currentPage: 1,
-      tableDataTotal: 100,
+      tableDataTotal: 0,
       pageSize: 10,
-      value1: " ",
-      valuen: "",
+      // value1: " ",
+
+      assessmentId: "", //区分新建/编辑
+      assessmentName: "",
+      copyItem: {},
+
       value2: ref(),
       valueE: ref(" "),
       valueEE: ref(" "),
@@ -284,6 +300,10 @@ export default {
           width: 100,
           align: "center",
           className: "h",
+          customRender: ({ index }) => {
+            //{ text, record, index, column }
+            return index + 1;
+          },
         },
         {
           title: "名称",
@@ -293,24 +313,38 @@ export default {
           align: "center",
           ellipsis: true,
           className: "h",
+          customRender: ({ text }) => {
+            return text ? text : "-";
+          },
         },
         {
           title: "状态",
           dataIndex: "state",
-          // width: "30%",
           key: "state",
           width: 100,
           align: "center",
           className: "h",
+          customRender: ({ record }) => {
+            switch (record.releaseStatus) {
+              case "1":
+                return "待发布";
+              case "2":
+                return "已发布";
+              case "3":
+                return "已结束";
+            }
+          },
         },
         {
           title: "创建人",
           dataIndex: "creater",
-          // width: "30%",
           key: "creater",
           width: 100,
           align: "center",
           className: "h",
+          customRender: ({ text }) => {
+            return text ? text : "-";
+          },
         },
         {
           title: "发布时间",
@@ -319,6 +353,9 @@ export default {
           width: 180,
           align: "center",
           className: "h",
+          customRender: ({ text }) => {
+            return text ? text : "-";
+          },
         },
         {
           title: "创建时间",
@@ -327,6 +364,9 @@ export default {
           width: 180,
           align: "center",
           className: "h",
+          customRender: ({ text }) => {
+            return text ? text : "-";
+          },
         },
         {
           title: "操作",
@@ -340,74 +380,151 @@ export default {
       return columns;
     };
 
-    const getTableDate = () => {
-      let data = state.tableData;
+    const getTableDate = async () => {
+      // let data = state.tableData;
+      let startTime,
+        endTime = "";
+      if (state.projectTime) {
+        startTime = toDate(
+          new Date(state.projectTime[0].$d).getTime() / 1000,
+          "Y-M-D"
+        );
+        endTime = toDate(
+          new Date(state.projectTime[1].$d).getTime() / 1000,
+          "Y-M-D"
+        );
+      }
+      let res = await queryResearchDetailList({
+        pageNo: state.currentPage,
+        pageSize: state.pageSize,
+        releaseStatus: state.projectStatus,
+        assessmentName: state.projectName,
+        searchEndTime: endTime,
+        searchStartTime: startTime,
+      });
+      const { rows, total } = res.data.data;
+      state.tableDataTotal = total;
+      const data = traverseArr(
+        rows,
+        {
+          key: "assessmentId",
+          number: "assessmentId",
+          manager: "assessmentName",
+          state: "releaseStatus",
+          creater: "createUser",
+          pubtime: "releaseTime",
+          cretime: "createTime",
+          haspub: "assessmentId",
+        },
+        true
+      );
       data.map((value) => {
         {
           //单层项目
           value.opacation = (
             <div class="operation">
-              {value.state === "已发布" ? (
+              {value.state === "2" ? (
                 <div class="fb">
-                  <router-link to="/managepage" class="jc">
+                  <div
+                    class="jc"
+                    onClick={() => {
+                      handleToManagepage(value, "/managepage");
+                    }}
+                  >
                     管理
-                  </router-link>
-                  <div class="jc"
-                  onClick={()=>{
-                      state.delete_hs = true;
-                      state.copy_hs = true;
-                  }}>复制</div>
-                  <div class="jc"
-                  onClick={()=>{
-                      state.delete_hs = true;
-                      state.back_hs = true;
-                  }}>撤回</div>
-                  <div class="jc"
-                  onClick={()=>{
-                      state.delete_hs = true;
-                      state.over_hs = true;
-                  }}>结束</div>
+                  </div>
+                  <div
+                    class="jc"
+                    onClick={() => {
+                      handleCopy(value);
+                    }}
+                  >
+                    复制
+                  </div>
+                  <div
+                    class="jc"
+                    onClick={() => {
+                      handleStatuts(value, "2");
+                    }}
+                  >
+                    撤回
+                  </div>
+                  <div
+                    class="jc"
+                    onClick={() => {
+                      handleStatuts(value, "3");
+                    }}
+                  >
+                    结束
+                  </div>
                 </div>
               ) : (
                 <div></div>
               )}
-              {value.state === "待发布" ? (
+              {value.state === "1" ? (
                 <div class="fb">
-                <div class="jc"
-                  onClick={()=>{
-                      state.delete_hs = true;
-                      state.pub_hs = true;
-                  }}>发布</div>
-                  <router-link to="/researchadd" class="jc">
+                  <div
+                    class="jc"
+                    onClick={() => {
+                      handleStatuts(value, "1");
+                    }}
+                  >
+                    发布
+                  </div>
+                  <div
+                    class="jc"
+                    onClick={() => {
+                      handleToResearchadd(value, "/researchadd");
+                    }}
+                  >
                     基础信息
-                  </router-link>
-                  <div class="jc"
-                  onClick={()=>{
-                      state.delete_hs = true;
-                      state.copy_hs = true;
-                  }}>复制</div>
-                  <div class="jc">编辑</div>
-                  <div class="jc"
-                    onClick={()=>{
-                      state.delete_hs = true;
-                      state.del_hs = true;
-                  }}>删除</div>
+                  </div>
+                  <div
+                    class="jc"
+                    onClick={() => {
+                      handleCopy(value);
+                    }}
+                  >
+                    复制
+                  </div>
+                  <div
+                    class="jc"
+                    onClick={() => {
+                      handleEditName(value);
+                    }}
+                  >
+                    编辑
+                  </div>
+                  <div
+                    class="jc"
+                    onClick={() => {
+                      handleDel(value);
+                    }}
+                  >
+                    删除
+                  </div>
                 </div>
               ) : (
                 <div></div>
               )}
-              {value.state === "已结束" ? (
+              {value.state === "3" ? (
                 <div class="fb">
-                  <div class="jc"
-                  onClick={()=>{
-                      state.delete_hs = true;
-                      state.copy_hs = true;
-                  }}>复制</div>
-                  <div class="jc"
-                    onClick={()=>{
-                      state.delete_hs = true;
-                      state.del_hs = true;
-                  }}>删除</div>
+                  <div
+                    class="jc"
+                    onClick={() => {
+                      handleCopy(value);
+                    }}
+                  >
+                    复制
+                  </div>
+                  <div
+                    class="jc"
+                    onClick={() => {
+                      handleDel(value);
+                    }}
+                  >
+                    删除
+                  </div>
                 </div>
               ) : (
                 <div></div>
@@ -419,26 +536,149 @@ export default {
       state.tableData = data;
     };
     getTableDate();
-    onMounted(() => {
-      // console.log("执行");
-    });
-    const selectProjectName = (value, index) => {
-      console.log("value", value, index);
+    const handelChangePage = (page, pageSize) => {
+      state.currentPage = page;
+      state.pageSize = pageSize;
+      getTableDate();
     };
-    const selectProjectState = (value, index) => {
-      console.log("value", value, index);
+    const handleSearch = () => {
+      getTableDate();
     };
-    const expandTable = (e, a) => {
-      // console.log("惦记了");
-      console.log("e", e, a);
+    const handleRest = () => {
+      state.projectName = "";
+      state.projectStatus = null;
+      state.projectTime = "";
+      getTableDate();
     };
-    const handleOut = () => {
-      state.out = !state.out;
+
+    const handleProjectState = (value) => {
+      state.projectStatus = value;
     };
-    const chooseImg = (id) => {
-      console.log(id);
+    const handleNew = () => {
+      state.newNext = true;
     };
-    const delete_exit = () => {
+    const handleEditName = (item) => {
+      state.assessmentId = item.assessmentId;
+      state.assessmentName = item.assessmentName;
+      state.newNext = true;
+    };
+    const handleNext = () => {
+      if (!state.assessmentId) {
+        if (!state.assessmentName) {
+          message.error("请输入评估名称");
+          return false;
+        }
+        store.commit("SET_assessmentName", state.assessmentName);
+        router.push("/researchadd");
+        handleCancel();
+      } else {
+        editAssessmentName({
+          assessmentId: state.assessmentId,
+          assessmentName: state.assessmentName,
+        }).then((res) => {
+          if (res.data.code === 200) {
+            getTableDate();
+            handleCancel();
+          }
+        });
+      }
+    };
+    const handleCancel = () => {
+      state.assessmentId = "";
+      state.assessmentName = "";
+      // store.commit("SET_assessmentName", "");
+      state.newNext = false;
+    };
+
+    const handleStatuts = (item, status) => {
+      state.assessmentId = item.assessmentId;
+      switch (status) {
+        case "1":
+          // 发布
+          state.delete_hs = true;
+          state.pub_hs = true;
+          break;
+        case "2":
+          // 撤回
+          state.delete_hs = true;
+          state.back_hs = true;
+          break;
+        case "3":
+          // 结束
+          state.delete_hs = true;
+          state.over_hs = true;
+          break;
+      }
+    };
+    const handleDel = (item) => {
+      state.assessmentId = item.assessmentId;
+      state.delete_hs = true;
+      state.del_hs = true;
+    };
+    const handleCopy = (item) => {
+      state.assessmentId = item.assessmentId;
+      state.copyItem = item;
+      state.delete_hs = true;
+      state.copy_hs = true;
+    };
+    const handleSure = () => {
+      // 发布
+      if (state.pub_hs) {
+        editReleaseStatus({
+          assessmentId: state.assessmentId,
+          releaseStatus: "2",
+        }).then((res) => {
+          console.log(res);
+          handleCancelModal();
+          getTableDate();
+        });
+      }
+      // 撤回
+      if (state.back_hs) {
+        editReleaseStatus({
+          assessmentId: state.assessmentId,
+          releaseStatus: "1",
+        }).then((res) => {
+          console.log(res);
+          handleCancelModal();
+          getTableDate();
+        });
+      }
+      // 结束
+      if (state.over_hs) {
+        editReleaseStatus({
+          assessmentId: state.assessmentId,
+          releaseStatus: "3",
+        }).then((res) => {
+          console.log(res);
+          handleCancelModal();
+          getTableDate();
+        });
+      }
+      // 删除
+      if (state.del_hs) {
+        deleteResearch({
+          assessmentId: Number(state.assessmentId),
+        }).then((res) => {
+          console.log(res);
+          handleCancelModal();
+          getTableDate();
+        });
+      }
+      // 复制
+      if (state.copy_hs) {
+        let resultPost = restData(state.copyItem);
+        console.log("resultPost");
+        console.log(resultPost);
+        createResearch(resultPost).then((res) => {
+          console.log(res);
+          handleCancelModal();
+          getTableDate();
+        });
+      }
+    };
+    const handleCancelModal = () => {
+      state.assessmentId = "";
       state.delete_hs = false;
       state.del_hs = false;
       state.over_hs = false;
@@ -446,16 +686,130 @@ export default {
       state.back_hs = false;
       state.pub_hs = false;
     };
+    const handleToManagepage = (item, path) => {
+      router.push({
+        path: path + "/" + item.assessmentId,
+      });
+    };
+    const handleToResearchadd = (item, path) => {
+      // console.log("item.assessmentId");
+      // console.log(item.assessmentId);
+      // console.log(item);
+      router.push({
+        path: path + "/" + item.assessmentId,
+      });
+    };
+
+    onMounted(() => {
+      // console.log("执行");
+    });
+
+    // 转换成后端格式
+    const restData = (obj) => {
+      const resultArr = {
+        assessmentName: obj.assessmentName,
+        assessmentMark: obj.assessmentMark,
+        assessmentSingleChoiceDtoList: [],
+        assessmentMultipleChoiceDtoList: [],
+        assessmentEssayQuestionDtoList: [],
+        assessmentScoringQuestionDtoList: [],
+      };
+      if (obj.singleStemVoList.length) {
+        let single = obj.singleStemVoList;
+        let singleArr = [];
+        single.forEach((item) => {
+          item.assessmentSingleChoiceVoList.forEach((itm) => {
+            singleArr.push({
+              singleStemName: item.singleStemName,
+              questionType: item.questionType,
+              orderNumber: item.orderNumber,
+              optionOrderNum: itm.optionOrderNum,
+              singleOptionName: itm.singleOptionName,
+              singleOptionPictureAddress: itm.singleOptionPictureAddress,
+            });
+          });
+        });
+        resultArr.assessmentSingleChoiceDtoList = singleArr;
+      }
+      if (obj.multipleStemVoList.length) {
+        let multi = obj.multipleStemVoList;
+        let multiArr = [];
+        multi.forEach((item) => {
+          item.multipleChoiceVoList.forEach((itm) => {
+            multiArr.push({
+              multipleStemName: item.multipleStemName,
+              questionType: item.questionType,
+              orderNumber: item.orderNumber,
+              optionOrderNum: itm.optionOrderNum,
+              multipleOptionName: itm.multipleOptionName,
+              multipleOptionPictureAddress: itm.multipleOptionPictureAddress,
+            });
+          });
+        });
+        resultArr.assessmentMultipleChoiceDtoList = multiArr;
+      }
+      if (obj.essayQuestionVoList.length) {
+        let Ques = obj.essayQuestionVoList;
+        let QuesArr = [];
+        Ques.forEach((item) => {
+          QuesArr.push({
+            questionType: item.questionType,
+            assessmentQaTitle: item.assessmentQaTitle,
+            assessmentQaDescribe: item.assessmentQaDescribe,
+            orderNumber: item.orderNumber,
+          });
+        });
+        resultArr.assessmentEssayQuestionDtoList = QuesArr;
+      }
+      if (obj.scoringQuestionVoList.length) {
+        let scor = obj.scoringQuestionVoList;
+        let scorsArr = [];
+        scor.forEach((item) => {
+          scorsArr.push({
+            questionType: item.questionType,
+            assessmentScTitle: item.assessmentScTitle,
+            assessmentMinScore: item.assessmentMinScore,
+            assessmentMaxScore: item.assessmentMaxScore,
+            weightScale: item.weightScale,
+            orderNumber: item.orderNumber,
+          });
+        });
+        resultArr.assessmentScoringQuestionDtoList = scorsArr;
+      }
+      console.log(111);
+      console.log(resultArr);
+      return resultArr;
+    };
+
+    const expandTable = (e, a) => {
+      // console.log("惦记了");
+      console.log("e", e, a);
+    };
+    const chooseImg = (id) => {
+      console.log(id);
+    };
+
     return {
       ...toRefs(state),
-      selectProjectName,
-      selectProjectState,
+      handleProjectState,
       expandTable,
-      handleOut,
       tableDataFunc,
       chooseImg,
       getTableDate,
-      delete_exit,
+      handleCopy,
+      handleSure,
+      handleCancelModal,
+      handelChangePage,
+      handleSearch,
+      handleRest,
+      handleCancel,
+      handleNext,
+      handleNew,
+      handleEditName,
+      handleStatuts,
+      handleDel,
+      handleToManagepage,
+      handleToResearchadd,
     };
   },
 };
@@ -593,7 +947,6 @@ export default {
         height: 38px;
         background: #409eff;
         border-radius: 8px;
-        //border: 1px solid rgba(64, 158, 255, 1);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -721,13 +1074,13 @@ export default {
     flex-direction: column;
 
     th.ant-table-cell {
-        background-color:#EFF4FC !important;
-        text-align: center;
-        color: #999BA3;
-      }
-      td.ant-table-cell {
-        text-align: center;
-      }
+      background-color: #eff4fc !important;
+      text-align: center;
+      color: #999ba3;
+    }
+    td.ant-table-cell {
+      text-align: center;
+    }
 
     .ant-table-tbody
       > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
@@ -805,16 +1158,16 @@ export default {
               padding-left: 26px;
               font-size: 16px;
               .del-icon {
-                  width: 16px;
-                  height: 16px;
-                  position: relative;
-                  margin-right: 10px;
-                img{
+                width: 16px;
+                height: 16px;
+                position: relative;
+                margin-right: 10px;
+                img {
                   width: 100%;
                   height: 100%;
                   position: absolute;
-                  top:0px;
-                  left:0px;
+                  top: 0px;
+                  left: 0px;
                   background-size: 100% 100%;
                 }
               }

src/views/research/components/ResearchAddAsk.vue

@@ -0,0 +1,399 @@
+<!-- 评估管理-创建评估页面 -->
+<template>
+  <!-- 问答题 -->
+  <div class="content">
+    <div class="tagbox">
+      <div class="tagname">问答题</div>
+      <div class="deleteop" @click="handleTypesDel(3)">
+        <div><img src="../../../assets/images/projectadd/delete.png" /></div>
+        <div class="del_text">删除选项</div>
+      </div>
+    </div>
+    <div class="name">
+      <div class="namebox">
+        <img
+          class="nameimg"
+          src="../../../assets/images/basicinfo/asterisk.png"
+        />
+        <div class="inname">标题</div>
+      </div>
+      <div class="in">
+        <a-input
+          v-model:value="curItem.valueAsk"
+          placeholder="请输入标题名称"
+          show-count
+          :maxlength="20"
+          style="border-radius: 8px"
+        />
+      </div>
+    </div>
+    <div class="name name2" style="margin-bottom: 20px">
+      <div class="namebox">
+        <div class="inname">描述</div>
+      </div>
+      <div class="in">
+        <a-textarea
+          v-model:value="curItem.valueAskDesc"
+          style="height: 148px"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref } from "vue";
+
+export default {
+  name: "ResearchAddAsk",
+  props: {
+    item: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    assessmentId: {
+      type: String,
+      default: "",
+    },
+  },
+  setup(props, { emit }) {
+    const curItem = ref(props.item);
+    // const assessmentId = ref(props.assessmentId);
+
+    const handleTypesDel = (type) => {
+      emit("del", { id: curItem.value.id, type, curItem: curItem.value });
+      // if (state.typesCur.includes(types)) {
+      //   const arr = state.typesCur.filter((item) => item !== types);
+      //   state.typesCur = arr;
+      // }
+    };
+
+    return {
+      curItem,
+      handleTypesDel,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.researchadd {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    .title {
+      color: #000000;
+      font-size: 18px;
+      //line-height: 36px;
+      padding-top: 30px;
+      padding-left: 37px;
+      //font-weight: 500;
+    }
+    .goback {
+      padding-right: 70px;
+      //padding-top: 37px;
+      position: relative;
+      .return {
+        display: inline-block;
+        width: 42px;
+        height: 42px;
+        margin-top: 17px;
+        margin-right: 10px;
+        background-image: url("../../../assets/images/projectadd/return.png");
+      }
+      .returntext {
+        display: inline-block;
+        position: absolute;
+        top: 27px;
+        color: #4ea6ff;
+        font-size: 14px;
+      }
+    }
+  }
+  .addtype {
+    display: flex;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    margin-right: 20px;
+    align-items: center;
+    margin-left: 41px;
+    .addtypen {
+      color: #6f6f6f;
+      font-size: 14px;
+    }
+    .types {
+      cursor: pointer;
+      width: 80px;
+      height: 40px;
+      color: #409eff;
+      border: 1px solid #409eff;
+      border-radius: 4px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 20px 10px;
+    }
+    .typesCur {
+      color: #fff;
+      background: #409eff;
+    }
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    width: 70%;
+    min-width: 690px;
+    margin-left: 38px;
+    margin-top: 20px;
+    .tagbox {
+      display: flex;
+      justify-content: space-between;
+      .tagname {
+        width: 90px;
+        height: 32px;
+        margin-top: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-left: 134px;
+        background: rgba(78, 166, 255, 0.1);
+        border-radius: 4px;
+        color: rgba(64, 158, 255, 1);
+        font-size: 16px;
+      }
+      .deleteop {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100px;
+        height: 40px;
+        margin-top: 20px;
+        margin-right: 30px;
+        border: 1px solid #409eff;
+        border-radius: 8px;
+        cursor: pointer;
+        .del_text {
+          color: #409eff;
+          font-size: 14px;
+          margin-left: 5px;
+        }
+      }
+    }
+    .scorebox {
+      display: flex;
+      align-items: center;
+      margin-top: 20px;
+      margin-left: 70px;
+      .scoretext {
+        font-size: 14px;
+        color: #56a3f9;
+      }
+      .number {
+        display: flex;
+        border: 1px solid #d7e5fd;
+        border-radius: 5px;
+        margin: 0 10px;
+        padding: 5px;
+        .btn {
+          width: 40px;
+          height: 40px;
+          border: 1px solid #56a3f9;
+          border-radius: 8px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin: 5px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #56a3f9;
+          line-height: 24px;
+          cursor: pointer;
+        }
+        .curBtn {
+          background: #56a3f9;
+          color: #fff;
+        }
+      }
+    }
+    .picture {
+      width: 100px;
+      display: flex;
+      flex-direction: column;
+      margin-top: 20px;
+      margin-left: 133px;
+      .pictureimg {
+        width: 100px;
+        height: 100px;
+      }
+      .picturename {
+        color: #6f6f6f;
+        font-size: 14px;
+      }
+    }
+    .options {
+      display: flex;
+    }
+    .delete {
+      cursor: pointer;
+      margin-top: 32px;
+      margin-left: 20px;
+      // float: right;
+      color: #4ea6ff;
+      font-size: 14px;
+    }
+    .name2 {
+      display: flex;
+      align-items: flex-start;
+    }
+    .name {
+      width: 60%;
+      // background-color: lightcoral;
+      display: flex;
+      margin-top: 20px;
+      //align-items: center;
+      //height: 40px;
+      // border: 1px solid black;
+      .namebox {
+        width: 120px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        flex-shrink: 0;
+        .nameimg {
+          width: 10px;
+          height: 10px;
+        }
+      }
+      .inname {
+        color: #6f6f6f;
+        font-size: 14px;
+        margin-left: 7px;
+        font-weight: 700;
+      }
+      .in {
+        margin-left: 14px;
+        flex: 1;
+        .assess {
+          display: flex;
+          width: 226px;
+          height: 40px;
+          border: 1px solid #56a3f9;
+          //margin-bottom: 20px;
+          .assesstype {
+            width: 50%;
+            background: #56a3f9;
+            color: #ffffff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          .assesswhole {
+            width: 50%;
+            background: rgba(86, 163, 249, 0.1);
+            font-size: 14px;
+            color: #6f6f6f;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          .ratio {
+            position: absolute;
+            right: 10px;
+            top: 8px;
+            color: #6f6f6f;
+            font-size: 14px;
+          }
+        }
+        .addimg {
+          cursor: pointer;
+          color: rgba(78, 166, 255, 1);
+          font-size: 14px;
+        }
+        .text {
+          color: rgba(109, 117, 132, 1);
+          font-size: 14px;
+          //line-height: 24px;
+        }
+        .ant-radio-wrapper {
+        }
+        .ant-input {
+          border-radius: 5px;
+          // height: 120%;
+          width: 100%;
+          height: 35px;
+        }
+        .ant-select-selector {
+          border-radius: 5px;
+          // height: 120%;
+          width: 100%;
+          height: 40px;
+        }
+      }
+      .numberInp {
+        width: 200px;
+        .ant-input-number {
+          width: 200px;
+          height: 40px;
+          border-radius: 8px;
+        }
+        // .ant-input-number-input-wrap {
+        //   width: 200px;
+        // }
+      }
+    }
+  }
+  .name2 {
+    display: flex;
+    align-items: flex-start;
+  }
+  .opinion {
+    display: flex;
+    margin-top: 30px;
+    .namebox {
+      width: 120px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      flex-shrink: 0;
+    }
+    .in {
+      margin-left: 14px;
+      width: 500px;
+      .ant-input-textarea-show-count {
+        position: relative;
+        height: 110px;
+      }
+      .ant-input-textarea-show-count::after {
+        position: absolute;
+        right: 10px;
+        bottom: 0px;
+      }
+      .ant-input {
+        border-radius: 8px;
+      }
+    }
+  }
+  .footer {
+    width: 100%;
+    margin-top: 31px;
+    margin-bottom: 14px;
+    .btn {
+      display: flex;
+      margin-bottom: 20px;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
+
+  .uploadContent {
+    display: block !important;
+    .uploadBtn {
+      margin-left: 120px !important;
+    }
+  }
+}
+</style>

src/views/research/components/ResearchAddItem.vue

@@ -0,0 +1,439 @@
+<!-- 评估管理-创建评估页面 -->
+<template>
+  <div class="itemRow">
+    <div class="options">
+      <div class="name">
+        <div class="namebox">
+          <div class="inname">选项{{ item.id }}</div>
+        </div>
+        <div class="in">
+          <a-input
+            v-model:value="curItem.inputVal"
+            show-count
+            :maxlength="30"
+            style="border-radius: 8px"
+            @change="handleInput"
+          />
+        </div>
+      </div>
+      <div class="delete" @click="handleDel">删除</div>
+    </div>
+    <div class="name uploadContent">
+      <a-upload
+        v-show="!item.imgVal"
+        class="in uploadBtn"
+        :show-upload-list="false"
+        :before-upload="beforeUpload"
+      >
+        <div class="addimg">+添加图片</div>
+      </a-upload>
+      <div v-show="item.imgVal" class="picture" style="position: relative">
+        <img class="pictureimg" :src="item.imgVal" />
+        <div class="picturename" v-show="hasImgName">{{ hasImgName }}</div>
+        <img
+          style="
+            cursor: pointer;
+            width: 20px;
+            height: 20px;
+            position: absolute;
+            right: 0;
+            top: 0;
+          "
+          src="../../../assets/images/basicinfo/close.png"
+          @click="handleCancel"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { reactive, toRefs, ref } from "vue";
+import { message } from "ant-design-vue";
+import { fileUp } from "../../../api/indexEval";
+
+export default {
+  name: "ResearchAddItem",
+  props: {
+    item: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  setup(props, { emit }) {
+    const curItem = ref(props.item);
+    const state = reactive({
+      hasImgName: "",
+    });
+
+    const handleInput = () => {
+      emit("input", { id: curItem.value.id, val: curItem.value.inputVal });
+    };
+    const handleDel = () => {
+      handleCancel();
+      emit("del", { id: curItem.value.id, optionId: curItem.value.optionId });
+    };
+    const handleCancel = () => {
+      state.hasImgName = "";
+      emit("delImg", { id: curItem.value.id });
+    };
+    const beforeUpload = (file) => {
+      const isJpgOrPng =
+        file.type === "image/jpg" ||
+        file.type === "image/jpeg" ||
+        file.type === "image/png" ||
+        file.type === "image/svg" ||
+        file.type === "image/bmp" ||
+        file.type === "image/gif";
+      if (!isJpgOrPng) {
+        message.error("仅支持jpg、gif、png、jpeg、svg、bmp格式!");
+        return false;
+      }
+
+      let isLt1M = file.size / 10240 / 10240 <= 1;
+      if (!isLt1M) {
+        this.$message.error("图片大小超过10MB!");
+        return false;
+      }
+
+      const formData = new FormData();
+      formData.append("file", file);
+      console.log(file);
+      fileUp(formData).then((res) => {
+        if (res.data.code === 200) {
+          state.hasImgName = file.name;
+          emit("src", { id: curItem.value.id, src: res.data.data });
+        }
+      });
+      return false;
+    };
+
+    return {
+      ...toRefs(state),
+      curItem,
+      handleInput,
+      handleDel,
+      handleCancel,
+      beforeUpload,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.researchadd {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    .title {
+      color: #000000;
+      font-size: 18px;
+      //line-height: 36px;
+      padding-top: 30px;
+      padding-left: 37px;
+      //font-weight: 500;
+    }
+    .goback {
+      padding-right: 70px;
+      //padding-top: 37px;
+      position: relative;
+      .return {
+        display: inline-block;
+        width: 42px;
+        height: 42px;
+        margin-top: 17px;
+        margin-right: 10px;
+        background-image: url("../../../assets/images/projectadd/return.png");
+      }
+      .returntext {
+        display: inline-block;
+        position: absolute;
+        top: 27px;
+        color: #4ea6ff;
+        font-size: 14px;
+      }
+    }
+  }
+  .addtype {
+    display: flex;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    margin-right: 20px;
+    align-items: center;
+    margin-left: 41px;
+    .addtypen {
+      color: #6f6f6f;
+      font-size: 14px;
+    }
+    .types {
+      cursor: pointer;
+      width: 80px;
+      height: 40px;
+      color: #409eff;
+      border: 1px solid #409eff;
+      border-radius: 4px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 20px 10px;
+    }
+    .typesCur {
+      color: #fff;
+      background: #409eff;
+    }
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    width: 70%;
+    min-width: 690px;
+    margin-left: 38px;
+    margin-top: 20px;
+    .tagbox {
+      display: flex;
+      justify-content: space-between;
+      .tagname {
+        width: 90px;
+        height: 32px;
+        margin-top: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-left: 134px;
+        background: rgba(78, 166, 255, 0.1);
+        border-radius: 4px;
+        color: rgba(64, 158, 255, 1);
+        font-size: 16px;
+      }
+      .deleteop {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100px;
+        height: 40px;
+        margin-top: 20px;
+        margin-right: 30px;
+        border: 1px solid #409eff;
+        border-radius: 8px;
+        cursor: pointer;
+        .del_text {
+          color: #409eff;
+          font-size: 14px;
+          margin-left: 5px;
+        }
+      }
+    }
+    .scorebox {
+      display: flex;
+      align-items: center;
+      margin-top: 20px;
+      margin-left: 70px;
+      .scoretext {
+        font-size: 14px;
+        color: #56a3f9;
+      }
+      .number {
+        display: flex;
+        border: 1px solid #d7e5fd;
+        border-radius: 5px;
+        margin: 0 10px;
+        padding: 5px;
+        .btn {
+          width: 40px;
+          height: 40px;
+          border: 1px solid #56a3f9;
+          border-radius: 8px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin: 5px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #56a3f9;
+          line-height: 24px;
+          cursor: pointer;
+        }
+      }
+    }
+    .picture {
+      width: 100px;
+      display: flex;
+      flex-direction: column;
+      margin-top: 20px;
+      margin-left: 133px;
+      .pictureimg {
+        width: 100px;
+        height: 100px;
+      }
+      .picturename {
+        color: #6f6f6f;
+        font-size: 14px;
+      }
+    }
+    .options {
+      display: flex;
+    }
+    .delete {
+      cursor: pointer;
+      margin-top: 32px;
+      margin-left: 20px;
+      // float: right;
+      color: #4ea6ff;
+      font-size: 14px;
+    }
+    .name2 {
+      display: flex;
+      align-items: flex-start;
+    }
+    .name {
+      width: 60%;
+      // background-color: lightcoral;
+      display: flex;
+      margin-top: 20px;
+      //align-items: center;
+      //height: 40px;
+      // border: 1px solid black;
+      .namebox {
+        width: 120px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        flex-shrink: 0;
+        .nameimg {
+          width: 10px;
+          height: 10px;
+        }
+      }
+      .inname {
+        color: #6f6f6f;
+        font-size: 14px;
+        margin-left: 7px;
+        font-weight: 700;
+      }
+      .in {
+        margin-left: 14px;
+        flex: 1;
+        .assess {
+          display: flex;
+          width: 226px;
+          height: 40px;
+          border: 1px solid #56a3f9;
+          //margin-bottom: 20px;
+          .assesstype {
+            width: 50%;
+            background: #56a3f9;
+            color: #ffffff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          .assesswhole {
+            width: 50%;
+            background: rgba(86, 163, 249, 0.1);
+            font-size: 14px;
+            color: #6f6f6f;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          .ratio {
+            position: absolute;
+            right: 10px;
+            top: 8px;
+            color: #6f6f6f;
+            font-size: 14px;
+          }
+        }
+        .addimg {
+          cursor: pointer;
+          color: rgba(78, 166, 255, 1);
+          font-size: 14px;
+        }
+        .text {
+          color: rgba(109, 117, 132, 1);
+          font-size: 14px;
+          //line-height: 24px;
+        }
+        .ant-radio-wrapper {
+        }
+        .ant-input {
+          border-radius: 5px;
+          // height: 120%;
+          width: 100%;
+          height: 35px;
+        }
+        .ant-select-selector {
+          border-radius: 5px;
+          // height: 120%;
+          width: 100%;
+          height: 40px;
+        }
+      }
+      .numberInp {
+        width: 200px;
+        .ant-input-number {
+          width: 200px;
+          height: 40px;
+          border-radius: 8px;
+        }
+        // .ant-input-number-input-wrap {
+        //   width: 200px;
+        // }
+      }
+    }
+  }
+  .name2 {
+    display: flex;
+    align-items: flex-start;
+  }
+  .opinion {
+    display: flex;
+    margin-top: 30px;
+    .namebox {
+      width: 120px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      flex-shrink: 0;
+    }
+    .in {
+      margin-left: 14px;
+      width: 500px;
+      .ant-input-textarea-show-count {
+        position: relative;
+        height: 110px;
+      }
+      .ant-input-textarea-show-count::after {
+        position: absolute;
+        right: 10px;
+        bottom: 0px;
+      }
+      .ant-input {
+        border-radius: 8px;
+      }
+    }
+  }
+  .footer {
+    width: 100%;
+    margin-top: 31px;
+    margin-bottom: 14px;
+    .btn {
+      display: flex;
+      margin-bottom: 20px;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
+
+  .uploadContent {
+    display: block !important;
+    .uploadBtn {
+      margin-left: 120px !important;
+    }
+  }
+}
+</style>

src/views/research/components/ResearchAddMulti.vue

@@ -0,0 +1,471 @@
+<!-- 评估管理-创建评估页面 -->
+<template>
+  <!-- 多选题 -->
+  <div class="content">
+    <div class="tagbox">
+      <div class="tagname">多选题</div>
+      <div class="deleteop" @click="handleTypesDel(2)">
+        <div><img src="../../../assets/images/projectadd/delete.png" /></div>
+        <div class="del_text">删除选项</div>
+      </div>
+    </div>
+    <div class="name">
+      <div class="namebox">
+        <img
+          class="nameimg"
+          src="../../../assets/images/basicinfo/asterisk.png"
+        />
+        <div class="inname">标题</div>
+      </div>
+      <div class="in">
+        <a-input
+          v-model:value="curItem.valueMutil"
+          placeholder="请输入题干名称"
+          show-count
+          :maxlength="20"
+          style="border-radius: 8px"
+        />
+      </div>
+    </div>
+    <ResearchAddItem
+      v-for="(item, index) in curItem.mutilList"
+      :key="index"
+      :item="item"
+      @input="inputMutil"
+      @src="imgSrcMutil"
+      @delImg="delImgMutil"
+      @del="delMutil"
+    />
+    <div class="name">
+      <div class="in" style="margin-left: 85px; margin-bottom: 20px">
+        <a-button
+          type="primary"
+          style="
+            width: 100px;
+            height: 40px;
+            border-radius: 8px;
+            background-color: #409eff;
+          "
+          @click="handleMutilAdd"
+        >
+          添加选项
+        </a-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref } from "vue";
+import ResearchAddItem from "./ResearchAddItem.vue";
+import { deleteChoiceQuestion } from "@/api/indexResearch";
+
+export default {
+  name: "ResearchAddMulti",
+  components: {
+    ResearchAddItem,
+  },
+  props: {
+    item: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    assessmentId: {
+      type: String,
+      default: "",
+    },
+  },
+  setup(props, { emit }) {
+    const curItem = ref(props.item);
+    const assessmentId = ref(props.assessmentId);
+
+    const handleTypesDel = (type) => {
+      emit("del", { id: curItem.value.id, type, curItem: curItem.value });
+      // if (state.typesCur.includes(types)) {
+      //   const arr = state.typesCur.filter((item) => item !== types);
+      //   state.typesCur = arr;
+      // }
+    };
+
+    const handleMutilAdd = () => {
+      curItem.value.mutilList.push({
+        id: curItem.value.mutilList.length + 1,
+        inputVal: "",
+        imgVal: "",
+      });
+    };
+    const inputMutil = ({ id, val }) => {
+      curItem.value.mutilList.forEach((item) => {
+        if (item.id === id) {
+          item.inputVal = val;
+        }
+      });
+    };
+    const imgSrcMutil = ({ id, src }) => {
+      curItem.value.mutilList.forEach((item) => {
+        if (item.id === id) {
+          item.imgVal = src;
+        }
+      });
+    };
+    const delImgMutil = ({ id }) => {
+      curItem.value.mutilList.forEach((item) => {
+        if (item.id === id) {
+          item.imgVal = "";
+        }
+      });
+    };
+    const delMutil = ({ id, optionId }) => {
+      curItem.value.mutilList.forEach((item, index) => {
+        if (item.id === id) {
+          curItem.value.mutilList.splice(index, 1);
+        }
+      });
+      curItem.value.mutilList.map((item, index) => {
+        item.id = index + 1;
+      });
+
+      deleteChoiceQuestion({
+        assessmentId: assessmentId.value,
+        questionType: "2",
+        optionId,
+      }).then((res) => {
+        console.log(56444);
+        console.log(res);
+      });
+    };
+
+    return {
+      curItem,
+      handleTypesDel,
+      handleMutilAdd,
+      inputMutil,
+      imgSrcMutil,
+      delImgMutil,
+      delMutil,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.researchadd {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    .title {
+      color: #000000;
+      font-size: 18px;
+      //line-height: 36px;
+      padding-top: 30px;
+      padding-left: 37px;
+      //font-weight: 500;
+    }
+    .goback {
+      padding-right: 70px;
+      //padding-top: 37px;
+      position: relative;
+      .return {
+        display: inline-block;
+        width: 42px;
+        height: 42px;
+        margin-top: 17px;
+        margin-right: 10px;
+        background-image: url("../../../assets/images/projectadd/return.png");
+      }
+      .returntext {
+        display: inline-block;
+        position: absolute;
+        top: 27px;
+        color: #4ea6ff;
+        font-size: 14px;
+      }
+    }
+  }
+  .addtype {
+    display: flex;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    margin-right: 20px;
+    align-items: center;
+    margin-left: 41px;
+    .addtypen {
+      color: #6f6f6f;
+      font-size: 14px;
+    }
+    .types {
+      cursor: pointer;
+      width: 80px;
+      height: 40px;
+      color: #409eff;
+      border: 1px solid #409eff;
+      border-radius: 4px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 20px 10px;
+    }
+    .typesCur {
+      color: #fff;
+      background: #409eff;
+    }
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    width: 70%;
+    min-width: 690px;
+    margin-left: 38px;
+    margin-top: 20px;
+    .tagbox {
+      display: flex;
+      justify-content: space-between;
+      .tagname {
+        width: 90px;
+        height: 32px;
+        margin-top: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-left: 134px;
+        background: rgba(78, 166, 255, 0.1);
+        border-radius: 4px;
+        color: rgba(64, 158, 255, 1);
+        font-size: 16px;
+      }
+      .deleteop {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100px;
+        height: 40px;
+        margin-top: 20px;
+        margin-right: 30px;
+        border: 1px solid #409eff;
+        border-radius: 8px;
+        cursor: pointer;
+        .del_text {
+          color: #409eff;
+          font-size: 14px;
+          margin-left: 5px;
+        }
+      }
+    }
+    .scorebox {
+      display: flex;
+      align-items: center;
+      margin-top: 20px;
+      margin-left: 70px;
+      .scoretext {
+        font-size: 14px;
+        color: #56a3f9;
+      }
+      .number {
+        display: flex;
+        border: 1px solid #d7e5fd;
+        border-radius: 5px;
+        margin: 0 10px;
+        padding: 5px;
+        .btn {
+          width: 40px;
+          height: 40px;
+          border: 1px solid #56a3f9;
+          border-radius: 8px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin: 5px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #56a3f9;
+          line-height: 24px;
+          cursor: pointer;
+        }
+        .curBtn {
+          background: #56a3f9;
+          color: #fff;
+        }
+      }
+    }
+    .picture {
+      width: 100px;
+      display: flex;
+      flex-direction: column;
+      margin-top: 20px;
+      margin-left: 133px;
+      .pictureimg {
+        width: 100px;
+        height: 100px;
+      }
+      .picturename {
+        color: #6f6f6f;
+        font-size: 14px;
+      }
+    }
+    .options {
+      display: flex;
+    }
+    .delete {
+      cursor: pointer;
+      margin-top: 32px;
+      margin-left: 20px;
+      // float: right;
+      color: #4ea6ff;
+      font-size: 14px;
+    }
+    .name2 {
+      display: flex;
+      align-items: flex-start;
+    }
+    .name {
+      width: 60%;
+      // background-color: lightcoral;
+      display: flex;
+      margin-top: 20px;
+      //align-items: center;
+      //height: 40px;
+      // border: 1px solid black;
+      .namebox {
+        width: 120px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        flex-shrink: 0;
+        .nameimg {
+          width: 10px;
+          height: 10px;
+        }
+      }
+      .inname {
+        color: #6f6f6f;
+        font-size: 14px;
+        margin-left: 7px;
+        font-weight: 700;
+      }
+      .in {
+        margin-left: 14px;
+        flex: 1;
+        .assess {
+          display: flex;
+          width: 226px;
+          height: 40px;
+          border: 1px solid #56a3f9;
+          //margin-bottom: 20px;
+          .assesstype {
+            width: 50%;
+            background: #56a3f9;
+            color: #ffffff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          .assesswhole {
+            width: 50%;
+            background: rgba(86, 163, 249, 0.1);
+            font-size: 14px;
+            color: #6f6f6f;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          .ratio {
+            position: absolute;
+            right: 10px;
+            top: 8px;
+            color: #6f6f6f;
+            font-size: 14px;
+          }
+        }
+        .addimg {
+          cursor: pointer;
+          color: rgba(78, 166, 255, 1);
+          font-size: 14px;
+        }
+        .text {
+          color: rgba(109, 117, 132, 1);
+          font-size: 14px;
+          //line-height: 24px;
+        }
+        .ant-radio-wrapper {
+        }
+        .ant-input {
+          border-radius: 5px;
+          // height: 120%;
+          width: 100%;
+          height: 35px;
+        }
+        .ant-select-selector {
+          border-radius: 5px;
+          // height: 120%;
+          width: 100%;
+          height: 40px;
+        }
+      }
+      .numberInp {
+        width: 200px;
+        .ant-input-number {
+          width: 200px;
+          height: 40px;
+          border-radius: 8px;
+        }
+        // .ant-input-number-input-wrap {
+        //   width: 200px;
+        // }
+      }
+    }
+  }
+  .name2 {
+    display: flex;
+    align-items: flex-start;
+  }
+  .opinion {
+    display: flex;
+    margin-top: 30px;
+    .namebox {
+      width: 120px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      flex-shrink: 0;
+    }
+    .in {
+      margin-left: 14px;
+      width: 500px;
+      .ant-input-textarea-show-count {
+        position: relative;
+        height: 110px;
+      }
+      .ant-input-textarea-show-count::after {
+        position: absolute;
+        right: 10px;
+        bottom: 0px;
+      }
+      .ant-input {
+        border-radius: 8px;
+      }
+    }
+  }
+  .footer {
+    width: 100%;
+    margin-top: 31px;
+    margin-bottom: 14px;
+    .btn {
+      display: flex;
+      margin-bottom: 20px;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
+
+  .uploadContent {
+    display: block !important;
+    .uploadBtn {
+      margin-left: 120px !important;
+    }
+  }
+}
+</style>

src/views/research/components/ResearchAddPin.vue

@@ -0,0 +1,568 @@
+<!-- 评估管理-创建评估页面 -->
+<template>
+  <!-- 评分题  -->
+  <div class="content">
+    <div class="tagbox">
+      <div class="tagname">评分题</div>
+      <div class="deleteop" @click="handleTypesDel(4)">
+        <div><img src="../../../assets/images/projectadd/delete.png" /></div>
+        <div class="del_text">删除选项</div>
+      </div>
+    </div>
+    <div class="name">
+      <div class="namebox">
+        <img
+          class="nameimg"
+          src="../../../assets/images/basicinfo/asterisk.png"
+        />
+        <div class="inname">标题</div>
+      </div>
+      <div class="in">
+        <a-input
+          v-model:value="curItem.valuePin"
+          placeholder="请输入标题名称"
+          show-count
+          :maxlength="20"
+          style="border-radius: 8px"
+        />
+      </div>
+    </div>
+    <div class="name">
+      <div class="namebox">
+        <div class="inname">最低分</div>
+      </div>
+      <div class="in numberInp">
+        <a-input-number
+          :value="curItem.minScore"
+          :min="1"
+          :max="10"
+          @change="minChange"
+        />
+      </div>
+      <div class="namebox">
+        <div class="inname">最高分</div>
+      </div>
+      <div class="in numberInp">
+        <a-input-number
+          :value="curItem.maxScore"
+          :min="1"
+          :max="10"
+          @change="maxChange"
+        />
+      </div>
+    </div>
+    <div class="scorebox">
+      <div class="scoretext">非常满意</div>
+      <div class="number">
+        <div
+          style="margin-left: 10px"
+          v-for="(value, index) in scoreList"
+          :key="index"
+          class="btn"
+        >
+          {{ value.text }}
+        </div>
+      </div>
+      <div class="scoretext">非常不满意</div>
+    </div>
+    <div class="name" style="margin-bottom: 20px">
+      <div class="namebox">
+        <img
+          class="nameimg"
+          src="../../../assets/images/basicinfo/asterisk.png"
+        />
+        <div class="inname">配置权重</div>
+      </div>
+      <div class="in" style="display: flex">
+        <div class="assess">
+          <div class="assesstype">评估类型</div>
+          <div class="assesswhole">整体评估</div>
+        </div>
+        <div class="assess" style="margin-left: 50px; position: relative">
+          <div class="assesstype">权重比例</div>
+          <div class="assesswhole" style="background: #ffffff">
+            <a-input-number
+              v-model:value="curItem.pinQuan"
+              :min="1"
+              :max="100"
+            />
+          </div>
+          <div class="ratio" style="right: -1px">%</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { reactive, toRefs, ref } from "vue";
+import { message } from "ant-design-vue";
+
+export default {
+  name: "ResearchAddPin",
+  props: {
+    item: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    assessmentId: {
+      type: String,
+      default: "",
+    },
+  },
+  setup(props, { emit }) {
+    const curItem = ref(props.item);
+    // const assessmentId = ref(props.assessmentId);
+
+    const state = reactive({
+      scoreList: [
+        {
+          id: 1,
+          text: 1,
+        },
+        {
+          id: 2,
+          text: 2,
+        },
+        {
+          id: 3,
+          text: 3,
+        },
+        {
+          id: 4,
+          text: 4,
+        },
+        {
+          id: 5,
+          text: 5,
+        },
+        {
+          id: 6,
+          text: 6,
+        },
+        {
+          id: 7,
+          text: 7,
+        },
+        {
+          id: 8,
+          text: 8,
+        },
+        {
+          id: 9,
+          text: 9,
+        },
+        {
+          id: 10,
+          text: 10,
+        },
+      ],
+      scoreListClone: [
+        {
+          id: 1,
+          text: 1,
+        },
+        {
+          id: 2,
+          text: 2,
+        },
+        {
+          id: 3,
+          text: 3,
+        },
+        {
+          id: 4,
+          text: 4,
+        },
+        {
+          id: 5,
+          text: 5,
+        },
+        {
+          id: 6,
+          text: 6,
+        },
+        {
+          id: 7,
+          text: 7,
+        },
+        {
+          id: 8,
+          text: 8,
+        },
+        {
+          id: 9,
+          text: 9,
+        },
+        {
+          id: 10,
+          text: 10,
+        },
+      ],
+    });
+
+    const handleTypesDel = (type) => {
+      emit("del", { id: curItem.value.id, type, curItem: curItem.value });
+      // if (state.typesCur.includes(types)) {
+      //   const arr = state.typesCur.filter((item) => item !== types);
+      //   state.typesCur = arr;
+      // }
+    };
+
+    const minChange = (e) => {
+      if (e > curItem.value.maxScore)
+        return message.info("最低分不能超过最高分");
+      curItem.value.minScore = e;
+      let arr = state.scoreListClone.concat([]);
+      arr.map((value, index) => {
+        if (value.id === e) {
+          arr = arr.slice(index, curItem.value.maxScore);
+        }
+      });
+      state.scoreList = arr;
+    };
+    const maxChange = (e) => {
+      if (e < curItem.value.minScore)
+        return message.info("最高分不能低于最低分");
+      curItem.value.maxScore = e;
+      let arr = state.scoreListClone.concat([]);
+      arr.map((value, index) => {
+        if (value.id === e) {
+          arr = arr.slice(curItem.value.minScore - 1, index + 1);
+        }
+      });
+      state.scoreList = arr;
+    };
+
+    return {
+      ...toRefs(state),
+      curItem,
+      handleTypesDel,
+      minChange,
+      maxChange,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.researchadd {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    .title {
+      color: #000000;
+      font-size: 18px;
+      //line-height: 36px;
+      padding-top: 30px;
+      padding-left: 37px;
+      //font-weight: 500;
+    }
+    .goback {
+      padding-right: 70px;
+      //padding-top: 37px;
+      position: relative;
+      .return {
+        display: inline-block;
+        width: 42px;
+        height: 42px;
+        margin-top: 17px;
+        margin-right: 10px;
+        background-image: url("../../../assets/images/projectadd/return.png");
+      }
+      .returntext {
+        display: inline-block;
+        position: absolute;
+        top: 27px;
+        color: #4ea6ff;
+        font-size: 14px;
+      }
+    }
+  }
+  .addtype {
+    display: flex;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    margin-right: 20px;
+    align-items: center;
+    margin-left: 41px;
+    .addtypen {
+      color: #6f6f6f;
+      font-size: 14px;
+    }
+    .types {
+      cursor: pointer;
+      width: 80px;
+      height: 40px;
+      color: #409eff;
+      border: 1px solid #409eff;
+      border-radius: 4px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 20px 10px;
+    }
+    .typesCur {
+      color: #fff;
+      background: #409eff;
+    }
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    width: 70%;
+    min-width: 690px;
+    margin-left: 38px;
+    margin-top: 20px;
+    .tagbox {
+      display: flex;
+      justify-content: space-between;
+      .tagname {
+        width: 90px;
+        height: 32px;
+        margin-top: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-left: 134px;
+        background: rgba(78, 166, 255, 0.1);
+        border-radius: 4px;
+        color: rgba(64, 158, 255, 1);
+        font-size: 16px;
+      }
+      .deleteop {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100px;
+        height: 40px;
+        margin-top: 20px;
+        margin-right: 30px;
+        border: 1px solid #409eff;
+        border-radius: 8px;
+        cursor: pointer;
+        .del_text {
+          color: #409eff;
+          font-size: 14px;
+          margin-left: 5px;
+        }
+      }
+    }
+    .scorebox {
+      display: flex;
+      align-items: center;
+      margin-top: 20px;
+      margin-left: 70px;
+      .scoretext {
+        font-size: 14px;
+        color: #56a3f9;
+      }
+      .number {
+        display: flex;
+        border: 1px solid #d7e5fd;
+        border-radius: 5px;
+        margin: 0 10px;
+        padding: 5px;
+        .btn {
+          width: 40px;
+          height: 40px;
+          border: 1px solid #56a3f9;
+          border-radius: 8px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin: 5px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #56a3f9;
+          line-height: 24px;
+          cursor: pointer;
+        }
+        .curBtn {
+          background: #56a3f9;
+          color: #fff;
+        }
+      }
+    }
+    .picture {
+      width: 100px;
+      display: flex;
+      flex-direction: column;
+      margin-top: 20px;
+      margin-left: 133px;
+      .pictureimg {
+        width: 100px;
+        height: 100px;
+      }
+      .picturename {
+        color: #6f6f6f;
+        font-size: 14px;
+      }
+    }
+    .options {
+      display: flex;
+    }
+    .delete {
+      cursor: pointer;
+      margin-top: 32px;
+      margin-left: 20px;
+      // float: right;
+      color: #4ea6ff;
+      font-size: 14px;
+    }
+    .name2 {
+      display: flex;
+      align-items: flex-start;
+    }
+    .name {
+      width: 60%;
+      // background-color: lightcoral;
+      display: flex;
+      margin-top: 20px;
+      //align-items: center;
+      //height: 40px;
+      // border: 1px solid black;
+      .namebox {
+        width: 120px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        flex-shrink: 0;
+        .nameimg {
+          width: 10px;
+          height: 10px;
+        }
+      }
+      .inname {
+        color: #6f6f6f;
+        font-size: 14px;
+        margin-left: 7px;
+        font-weight: 700;
+      }
+      .in {
+        margin-left: 14px;
+        flex: 1;
+        .assess {
+          display: flex;
+          width: 226px;
+          height: 40px;
+          border: 1px solid #56a3f9;
+          //margin-bottom: 20px;
+          .assesstype {
+            width: 50%;
+            background: #56a3f9;
+            color: #ffffff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          .assesswhole {
+            width: 50%;
+            background: rgba(86, 163, 249, 0.1);
+            font-size: 14px;
+            color: #6f6f6f;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          .ratio {
+            position: absolute;
+            right: -1px;
+            top: 8px;
+            color: #6f6f6f;
+            font-size: 14px;
+          }
+        }
+        .addimg {
+          cursor: pointer;
+          color: rgba(78, 166, 255, 1);
+          font-size: 14px;
+        }
+        .text {
+          color: rgba(109, 117, 132, 1);
+          font-size: 14px;
+          //line-height: 24px;
+        }
+        .ant-radio-wrapper {
+        }
+        .ant-input {
+          border-radius: 5px;
+          // height: 120%;
+          width: 100%;
+          height: 35px;
+        }
+        .ant-select-selector {
+          border-radius: 5px;
+          // height: 120%;
+          width: 100%;
+          height: 40px;
+        }
+      }
+      .numberInp {
+        width: 200px;
+        .ant-input-number {
+          width: 200px;
+          height: 40px;
+          border-radius: 8px;
+        }
+        // .ant-input-number-input-wrap {
+        //   width: 200px;
+        // }
+      }
+    }
+  }
+  .name2 {
+    display: flex;
+    align-items: flex-start;
+  }
+  .opinion {
+    display: flex;
+    margin-top: 30px;
+    .namebox {
+      width: 120px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      flex-shrink: 0;
+    }
+    .in {
+      margin-left: 14px;
+      width: 500px;
+      .ant-input-textarea-show-count {
+        position: relative;
+        height: 110px;
+      }
+      .ant-input-textarea-show-count::after {
+        position: absolute;
+        right: 10px;
+        bottom: 0px;
+      }
+      .ant-input {
+        border-radius: 8px;
+      }
+    }
+  }
+  .footer {
+    width: 100%;
+    margin-top: 31px;
+    margin-bottom: 14px;
+    .btn {
+      display: flex;
+      margin-bottom: 20px;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
+
+  .uploadContent {
+    display: block !important;
+    .uploadBtn {
+      margin-left: 120px !important;
+    }
+  }
+}
+</style>

src/views/research/components/ResearchAddSingle.vue

@@ -0,0 +1,471 @@
+<!-- 评估管理-创建评估页面 -->
+<template>
+  <!-- 单选题 -->
+  <div class="content">
+    <div class="tagbox">
+      <div class="tagname">单选题</div>
+      <div class="deleteop" @click="handleTypesDel(1)">
+        <div><img src="../../../assets/images/projectadd/delete.png" /></div>
+        <div class="del_text">删除选项</div>
+      </div>
+    </div>
+    <div class="name">
+      <div class="namebox">
+        <img
+          class="nameimg"
+          src="../../../assets/images/basicinfo/asterisk.png"
+        />
+        <div class="inname">标题</div>
+      </div>
+      <div class="in">
+        <a-input
+          v-model:value="curItem.valueSingle"
+          placeholder="请输入题干名称"
+          show-count
+          :maxlength="20"
+          style="border-radius: 8px"
+        />
+      </div>
+    </div>
+    <ResearchAddItem
+      v-for="(item, index) in curItem.singleList"
+      :key="index"
+      :item="item"
+      @input="input"
+      @src="imgSrc"
+      @delImg="delImg"
+      @del="del"
+    />
+    <div class="name">
+      <div class="in" style="margin-left: 85px; margin-bottom: 20px">
+        <a-button
+          type="primary"
+          style="
+            width: 100px;
+            height: 40px;
+            border-radius: 8px;
+            background-color: #409eff;
+          "
+          @click="handleSingleAdd"
+        >
+          添加选项
+        </a-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref } from "vue";
+import ResearchAddItem from "./ResearchAddItem.vue";
+import { deleteChoiceQuestion } from "@/api/indexResearch";
+
+export default {
+  name: "ResearchAddSingle",
+  components: {
+    ResearchAddItem,
+  },
+  props: {
+    item: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    assessmentId: {
+      type: String,
+      default: "",
+    },
+  },
+  setup(props, { emit }) {
+    const curItem = ref(props.item);
+    const assessmentId = ref(props.assessmentId);
+
+    const handleTypesDel = (type) => {
+      emit("del", { id: curItem.value.id, type, curItem: curItem.value });
+      // if (state.typesCur.includes(types)) {
+      //   const arr = state.typesCur.filter((item) => item !== types);
+      //   state.typesCur = arr;
+      // }
+    };
+
+    const handleSingleAdd = () => {
+      curItem.value.singleList.push({
+        id: curItem.value.singleList.length + 1,
+        inputVal: "",
+        imgVal: "",
+      });
+    };
+    const input = ({ id, val }) => {
+      curItem.value.singleList.forEach((item) => {
+        if (item.id === id) {
+          item.inputVal = val;
+        }
+      });
+    };
+    const imgSrc = ({ id, src }) => {
+      curItem.value.singleList.forEach((item) => {
+        if (item.id === id) {
+          item.imgVal = src;
+        }
+      });
+    };
+    const delImg = ({ id }) => {
+      curItem.value.singleList.forEach((item) => {
+        if (item.id === id) {
+          item.imgVal = "";
+        }
+      });
+    };
+    const del = ({ id, optionId }) => {
+      curItem.value.singleList.forEach((item, index) => {
+        if (item.id === id) {
+          curItem.value.singleList.splice(index, 1);
+        }
+      });
+      curItem.value.singleList.map((item, index) => {
+        item.id = index + 1;
+      });
+
+      deleteChoiceQuestion({
+        assessmentId: assessmentId.value,
+        questionType: "1",
+        optionId,
+      }).then((res) => {
+        console.log(56444);
+        console.log(res);
+      });
+    };
+
+    return {
+      curItem,
+      handleTypesDel,
+      handleSingleAdd,
+      input,
+      imgSrc,
+      delImg,
+      del,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.researchadd {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    .title {
+      color: #000000;
+      font-size: 18px;
+      //line-height: 36px;
+      padding-top: 30px;
+      padding-left: 37px;
+      //font-weight: 500;
+    }
+    .goback {
+      padding-right: 70px;
+      //padding-top: 37px;
+      position: relative;
+      .return {
+        display: inline-block;
+        width: 42px;
+        height: 42px;
+        margin-top: 17px;
+        margin-right: 10px;
+        background-image: url("../../../assets/images/projectadd/return.png");
+      }
+      .returntext {
+        display: inline-block;
+        position: absolute;
+        top: 27px;
+        color: #4ea6ff;
+        font-size: 14px;
+      }
+    }
+  }
+  .addtype {
+    display: flex;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    margin-right: 20px;
+    align-items: center;
+    margin-left: 41px;
+    .addtypen {
+      color: #6f6f6f;
+      font-size: 14px;
+    }
+    .types {
+      cursor: pointer;
+      width: 80px;
+      height: 40px;
+      color: #409eff;
+      border: 1px solid #409eff;
+      border-radius: 4px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 20px 10px;
+    }
+    .typesCur {
+      color: #fff;
+      background: #409eff;
+    }
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    width: 70%;
+    min-width: 690px;
+    margin-left: 38px;
+    margin-top: 20px;
+    .tagbox {
+      display: flex;
+      justify-content: space-between;
+      .tagname {
+        width: 90px;
+        height: 32px;
+        margin-top: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-left: 134px;
+        background: rgba(78, 166, 255, 0.1);
+        border-radius: 4px;
+        color: rgba(64, 158, 255, 1);
+        font-size: 16px;
+      }
+      .deleteop {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100px;
+        height: 40px;
+        margin-top: 20px;
+        margin-right: 30px;
+        border: 1px solid #409eff;
+        border-radius: 8px;
+        cursor: pointer;
+        .del_text {
+          color: #409eff;
+          font-size: 14px;
+          margin-left: 5px;
+        }
+      }
+    }
+    .scorebox {
+      display: flex;
+      align-items: center;
+      margin-top: 20px;
+      margin-left: 70px;
+      .scoretext {
+        font-size: 14px;
+        color: #56a3f9;
+      }
+      .number {
+        display: flex;
+        border: 1px solid #d7e5fd;
+        border-radius: 5px;
+        margin: 0 10px;
+        padding: 5px;
+        .btn {
+          width: 40px;
+          height: 40px;
+          border: 1px solid #56a3f9;
+          border-radius: 8px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin: 5px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #56a3f9;
+          line-height: 24px;
+          cursor: pointer;
+        }
+        .curBtn {
+          background: #56a3f9;
+          color: #fff;
+        }
+      }
+    }
+    .picture {
+      width: 100px;
+      display: flex;
+      flex-direction: column;
+      margin-top: 20px;
+      margin-left: 133px;
+      .pictureimg {
+        width: 100px;
+        height: 100px;
+      }
+      .picturename {
+        color: #6f6f6f;
+        font-size: 14px;
+      }
+    }
+    .options {
+      display: flex;
+    }
+    .delete {
+      cursor: pointer;
+      margin-top: 32px;
+      margin-left: 20px;
+      // float: right;
+      color: #4ea6ff;
+      font-size: 14px;
+    }
+    .name2 {
+      display: flex;
+      align-items: flex-start;
+    }
+    .name {
+      width: 60%;
+      // background-color: lightcoral;
+      display: flex;
+      margin-top: 20px;
+      //align-items: center;
+      //height: 40px;
+      // border: 1px solid black;
+      .namebox {
+        width: 120px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        flex-shrink: 0;
+        .nameimg {
+          width: 10px;
+          height: 10px;
+        }
+      }
+      .inname {
+        color: #6f6f6f;
+        font-size: 14px;
+        margin-left: 7px;
+        font-weight: 700;
+      }
+      .in {
+        margin-left: 14px;
+        flex: 1;
+        .assess {
+          display: flex;
+          width: 226px;
+          height: 40px;
+          border: 1px solid #56a3f9;
+          //margin-bottom: 20px;
+          .assesstype {
+            width: 50%;
+            background: #56a3f9;
+            color: #ffffff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          .assesswhole {
+            width: 50%;
+            background: rgba(86, 163, 249, 0.1);
+            font-size: 14px;
+            color: #6f6f6f;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          .ratio {
+            position: absolute;
+            right: 10px;
+            top: 8px;
+            color: #6f6f6f;
+            font-size: 14px;
+          }
+        }
+        .addimg {
+          cursor: pointer;
+          color: rgba(78, 166, 255, 1);
+          font-size: 14px;
+        }
+        .text {
+          color: rgba(109, 117, 132, 1);
+          font-size: 14px;
+          //line-height: 24px;
+        }
+        .ant-radio-wrapper {
+        }
+        .ant-input {
+          border-radius: 5px;
+          // height: 120%;
+          width: 100%;
+          height: 35px;
+        }
+        .ant-select-selector {
+          border-radius: 5px;
+          // height: 120%;
+          width: 100%;
+          height: 40px;
+        }
+      }
+      .numberInp {
+        width: 200px;
+        .ant-input-number {
+          width: 200px;
+          height: 40px;
+          border-radius: 8px;
+        }
+        // .ant-input-number-input-wrap {
+        //   width: 200px;
+        // }
+      }
+    }
+  }
+  .name2 {
+    display: flex;
+    align-items: flex-start;
+  }
+  .opinion {
+    display: flex;
+    margin-top: 30px;
+    .namebox {
+      width: 120px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      flex-shrink: 0;
+    }
+    .in {
+      margin-left: 14px;
+      width: 500px;
+      .ant-input-textarea-show-count {
+        position: relative;
+        height: 110px;
+      }
+      .ant-input-textarea-show-count::after {
+        position: absolute;
+        right: 10px;
+        bottom: 0px;
+      }
+      .ant-input {
+        border-radius: 8px;
+      }
+    }
+  }
+  .footer {
+    width: 100%;
+    margin-top: 31px;
+    margin-bottom: 14px;
+    .btn {
+      display: flex;
+      margin-bottom: 20px;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
+
+  .uploadContent {
+    display: block !important;
+    .uploadBtn {
+      margin-left: 120px !important;
+    }
+  }
+}
+</style>

vue.config.js

@@ -1,17 +1,17 @@
-const { defineConfig } = require('@vue/cli-service')
+const { defineConfig } = require("@vue/cli-service");
 module.exports = defineConfig({
-	transpileDependencies: true,
-	devServer: {
-		proxy: {
-			"/api": {
-				target: "http://111.231.196.214:30001/",
-				changeOrigin: true,
-				secure: false,
-				ws: false,
-				pathRewrite: {
-					"^/api": "",
-				},
-			},
-		},
-	}
-})
+  // transpileDependencies: true,
+  devServer: {
+    proxy: {
+      "/api": {
+        target: "http://111.231.196.214:30001/", //这里后台的地址模拟的;应该填写你们真实的后台接口
+        changeOrigin: true, //表示是否改变原域名
+        // secure: false,
+        // ws: false, //表示WebSocket协议
+        pathRewrite: {
+          "^/api": "",
+        },
+      },
+    },
+  },
+});