From 172a152f1050ddff33119a75bd54b473d8fa1906 Mon Sep 17 00:00:00 2001
From: yangzhi <765157588@qq.com>
Date: Wed, 23 Mar 2022 15:54:44 +0800
Subject: [PATCH] 组卷左侧题目的分类

---
 src/views/TestPaper/ManualTestPaper.vue | 617 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 1 file changed, 326 insertions(+), 291 deletions(-)

diff --git a/src/views/TestPaper/ManualTestPaper.vue b/src/views/TestPaper/ManualTestPaper.vue
index 8b6ba9f..bfb6867 100644
--- a/src/views/TestPaper/ManualTestPaper.vue
+++ b/src/views/TestPaper/ManualTestPaper.vue
@@ -3,16 +3,25 @@
 		<el-row :gutter="20">
 			<el-col :span="6" :style="{'height':contentHeight+'px'}">
 				<div class="grid-content bg-purple">
-					<div style="width: 100%;height: 80px;background: red;">
-					</div>
-					<draggable :options="{animation:380,filter:'.unmover'}" group="itxst" v-model="arr1" @end="end1"
-						@add="RemoveHere" :move="onMove" class="infinite-list" :style="{'height':contentHeight-80+'px'}"
-						infinite-scroll-disabled="disabled" v-infinite-scroll="load" style="overflow:auto">
-						<li v-for="i in arr1" class="infinite-list-item">{{ i.subject }}</li>
-						<p v-if="loading" style="text-align: center;color: #cdcdcd;" class="unmover">加载中...</p>
-						<p v-if="noMore" style="text-align: center;color: #cdcdcd;" class="unmover">没有更多了</p>
-						</li>
-					</draggable>
+					<el-tabs
+              v-model="activeTab"
+              @tab-click="handleTabsClick"
+              style="padding: 0 20px"
+              :stretch="true"
+            >
+              <el-tab-pane label="专业类" name="6"></el-tab-pane>
+              <el-tab-pane label="测评类" name="1"></el-tab-pane>
+            </el-tabs>
+			<div style="padding:0 10px">
+				<el-input size="small" placeholder="输入关键字搜索" v-model="keyword"></el-input>
+			</div>
+			<draggable :options="{animation:380,filter:'.unmover'}" group="itxst" v-model="arr1" @end="end1"
+				@add="RemoveHere" :move="onMove" class="infinite-list" :style="{'height':contentHeight-80+'px'}"
+				infinite-scroll-disabled="disabled" v-infinite-scroll="load" style="overflow:auto">
+				<li v-for="i in arr1" class="infinite-list-item" :key="i.id">{{ i.subject }}</li>
+				<p v-if="loading" style="text-align: center;color: #cdcdcd;" class="unmover">加载中...</p>
+				<p v-if="noMore" style="text-align: center;color: #cdcdcd;" class="unmover">没有更多了</p>
+			</draggable>
 
 				</div>
 			</el-col>
@@ -93,292 +102,318 @@
 </template>
 
 <script>
-	import draggable from 'vuedraggable'
-	import {
-		getQuestionClassList,
-		getQuestionList,
-	} from '@/api/QuestionBank'
-	import {
-		EditTestPaper,
-		GetToplevel
-	} from '@/api/TestPaper'
-	export default {
-		//注册draggable组件
-		components: {
-			draggable,
-		},
-		data() {
-			return {
-				parameter: {
-					pageIndex: 0,
-					pageSize: 12,
-					sort: "id",
-					sortOrder: 1,
-					keyword: "",
-					QuestionClassId: 0,
-					status: 1
-				},
-				contentHeight: 0,
-				count: 0,
-				edit: false,
-				arr1: [],
-				arr2: [],
-				moveId: -1,
-				TestPaper: {
-					TestPaperTitle: "未命名试卷标题",
-					TestPaperClassId: 0,
-					TotalScore: 0,
-					Describe: "",
-					SingleNumber: 0,
-					MultipleNumber: 0,
-					SubjectiveNumber: 0,
-					OriginalPrice: "0",
-					PresentPrice: "0",
-					MembershipPrice: "0",
-					QuestionBankIds: []
-				},
-				loading: false,
-				rules: {
-					OriginalPrice: [{
-						required: true,
-						message: '不能为空'
-					}],
-					PresentPrice: [{
-						required: true,
-						message: '不能为空'
-					}],
-					MembershipPrice: [{
-						required: true,
-						message: '不能为空'
-					}]
-				},
-				QuestionClass: [],
-				treeData: [{
-					value:0,
-					label:"全部"
-				}]
-			}
-		},
-		computed: {
-			noMore() {
-				return this.arr1.length >= this.count
-			},
-			disabled() {
-				return this.loading || this.noMore
-			}
-		},
-		created() {
-
-		},
-		mounted() {
-			//计算页面内容区域的高度
-			this.contentHeight = window.innerHeight - 90;
-			this.getQuestionClassListHeadler();
-			//this.GetList();
-		},
-		methods: {
-			SubmitTestPaper() {
-				if (this.arr2.length > 0) {
-					EditTestPaper(this.TestPaper).then(res => {
-						if(res.data.code==200){
-							this.$confirm('组卷成功！', '消息')
-						}else{
-							this.$confirm('组卷失败！', '消息')
-						}
-					});
-				} else {
-					this.$confirm('试题未有题目！', '消息')
-				}
-			},
-			load() {
-				this.loading = true
-				this.parameter.pageIndex += 1;
-				this.GetList();
-				this.loading = false;
-			},
-			GetList() {
-				getQuestionList(this.parameter).then(res => {
-					res.data.data.rows.forEach((item, i) => {
-						this.arr1.push(item)
-					})
-					this.count = res.data.data.total;
-					this.$forceUpdate();
-				});
-			},
-			end1(e, ) {
-				var that = this;
-				if (that.arr1.length < 10) {
-					this.load();
-				}
-
-				var items = this.arr2.filter(function(m) {
-					return m.id == that.moveId
-				})
+import draggable from "vuedraggable";
+import { getQuestionClassList, getQuestionList } from "@/api/QuestionBank";
+import { EditTestPaper, GetToplevel } from "@/api/TestPaper";
+export default {
+  //注册draggable组件
+  components: {
+    draggable,
+  },
+  data() {
+    return {
+      keyword: "",
+      activeTab: 6,
+      parameter: {
+        pageIndex: 0,
+        pageSize: 12,
+        sort: "id",
+        sortOrder: 1,
+        keyword: "",
+        QuestionClassId: 0,
+        status: 1,
+      },
+      contentHeight: 0,
+      count: 0,
+      edit: false,
+      arr1: [],
+      arr2: [],
+      moveId: -1,
+      TestPaper: {
+        TestPaperTitle: "未命名试卷标题",
+        TestPaperClassId: 0,
+        TotalScore: 0,
+        Describe: "",
+        SingleNumber: 0,
+        MultipleNumber: 0,
+        SubjectiveNumber: 0,
+        OriginalPrice: "0",
+        PresentPrice: "0",
+        MembershipPrice: "0",
+        QuestionBankIds: [],
+      },
+      loading: false,
+      rules: {
+        OriginalPrice: [
+          {
+            required: true,
+            message: "不能为空",
+          },
+        ],
+        PresentPrice: [
+          {
+            required: true,
+            message: "不能为空",
+          },
+        ],
+        MembershipPrice: [
+          {
+            required: true,
+            message: "不能为空",
+          },
+        ],
+      },
+      QuestionClass: [],
+      treeData: [
+        {
+          value: 0,
+          label: "全部",
+        },
+      ],
+      timeout: 0,
+    };
+  },
+  watch: {
+    activeTab() {
+      this.search();
+    },
+    keyword(val) {
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        this.search();
+      }, 500);
+    },
+  },
+  computed: {
+    noMore() {
+      return this.arr1.length >= this.count;
+    },
+    disabled() {
+      return this.loading || this.noMore;
+    },
+  },
+  created() {},
+  mounted() {
+    //计算页面内容区域的高度
+    this.contentHeight = window.innerHeight - 90;
+    this.getQuestionClassListHeadler();
+    //this.GetList();
+  },
+  methods: {
+    search() {
+      this.parameter.pageIndex = 1;
+      this.parameter.QuestionClassId = this.activeTab;
+      this.GetList();
+    },
+    SubmitTestPaper() {
+      if (this.arr2.length > 0) {
+        EditTestPaper(this.TestPaper).then((res) => {
+          if (res.data.code == 200) {
+            this.$confirm("组卷成功！", "消息");
+          } else {
+            this.$confirm("组卷失败！", "消息");
+          }
+        });
+      } else {
+        this.$confirm("试题未有题目！", "消息");
+      }
+    },
+    load() {
+      this.loading = true;
+      this.parameter.pageIndex += 1;
+      this.GetList();
+      this.loading = false;
+    },
+    GetList() {
+      getQuestionList(this.parameter).then((res) => {
+        if (this.parameter.pageIndex == 1) {
+          this.arr1 = [];
+        }
+        res.data.data.rows.forEach((item, i) => {
+          this.arr1.push(item);
+        });
+        this.count = res.data.data.total;
+        this.$forceUpdate();
+      });
+    },
+    end1(e) {
+      var that = this;
+      if (that.arr1.length < 10) {
+        this.load();
+      }
 
-				//如果左边
-				if (items.length < 2) return;
-				this.arr2.splice(e.newDraggableIndex, 1)
+      var items = this.arr2.filter(function (m) {
+        return m.id == that.moveId;
+      });
 
-				//	SingleNumber:0,
-				// MultipleNumber:0,
-				// SubjectiveNumber:0,
-			},
-			//从右边移除到左边
-			RemoveHere(e) {
-				if (e.item._underlying_vm_.subjectType == 1) {
-					this.TestPaper.SingleNumber -= 1;
-				}
-				if (e.item._underlying_vm_.subjectType == 2) {
-					this.TestPaper.MultipleNumber -= 1;
-				}
-				if (e.item._underlying_vm_.subjectType == 3) {
-					this.TestPaper.SubjectiveNumber -= 1;
-				}
-				this.TestPaper.TotalScore -= e.item._underlying_vm_.fraction;
-				this.TestPaper.QuestionBankIds = this.arr2.map(u => u.id);
-			},
-			//从左边添加到右边
-			ComeHere(e) {
-				if (e.item._underlying_vm_.subjectType == 1) {
-					this.TestPaper.SingleNumber += 1;
-				}
-				if (e.item._underlying_vm_.subjectType == 2) {
-					this.TestPaper.MultipleNumber += 1;
-				}
-				if (e.item._underlying_vm_.subjectType == 3) {
-					this.TestPaper.SubjectiveNumber += 1;
-				}
-				this.TestPaper.TotalScore += e.item._underlying_vm_.fraction;
+      //如果左边
+      if (items.length < 2) return;
+      this.arr2.splice(e.newDraggableIndex, 1);
 
-				this.TestPaper.QuestionBankIds = this.arr2.map(u => u.id);
-			},
-			//右边往左边拖动时的事件
-			end2(e) {
-				var that = this;
-				var items = this.arr1.filter(function(m) {
-					return m.id == that.moveId
-				})
-				//如果左边
-				if (items.length < 2) return;
-				this.arr1.splice(e.newDraggableIndex, 1)
-			},
-			//move回调方法
-			onMove(e, originalEvent) {
-				//this.moveId = e.relatedContext.element.id;
-				return true;
-			},
-			getQuestionClassListHeadler() {
-				let _this = this;
-				GetToplevel().then(res => {
-					var gettree = function(titem) {
-						titem.children = []
-						let childrenList = res.data.data.filter(u => u.ParentId == titem.value);
-						if (childrenList.length == 0)
-							titem.children = undefined;
-						res.data.data.filter(u => u.ParentId == titem.value).forEach((item, i) => {
-							var model = {
-								value: item.id,
-								label: item.ClassTitle
-							};
-							gettree(model);
-							titem.children.push(model);
-						})
-					}
-					res.data.data.filter(u => u.ParentId == 0).forEach((item, i) => {
-						var model = {
-							value: item.id,
-							label: item.ClassTitle
-						};
-						gettree(model);
-						_this.QuestionClass.push(model);
-						_this.treeData.push(model)
-					})
-				});
-			}
+      //	SingleNumber:0,
+      // MultipleNumber:0,
+      // SubjectiveNumber:0,
+    },
+    //从右边移除到左边
+    RemoveHere(e) {
+      if (e.item._underlying_vm_.subjectType == 1) {
+        this.TestPaper.SingleNumber -= 1;
+      }
+      if (e.item._underlying_vm_.subjectType == 2) {
+        this.TestPaper.MultipleNumber -= 1;
+      }
+      if (e.item._underlying_vm_.subjectType == 3) {
+        this.TestPaper.SubjectiveNumber -= 1;
+      }
+      this.TestPaper.TotalScore -= e.item._underlying_vm_.fraction;
+      this.TestPaper.QuestionBankIds = this.arr2.map((u) => u.id);
+    },
+    //从左边添加到右边
+    ComeHere(e) {
+      if (e.item._underlying_vm_.subjectType == 1) {
+        this.TestPaper.SingleNumber += 1;
+      }
+      if (e.item._underlying_vm_.subjectType == 2) {
+        this.TestPaper.MultipleNumber += 1;
+      }
+      if (e.item._underlying_vm_.subjectType == 3) {
+        this.TestPaper.SubjectiveNumber += 1;
+      }
+      this.TestPaper.TotalScore += e.item._underlying_vm_.fraction;
 
-		}
-	}
+      this.TestPaper.QuestionBankIds = this.arr2.map((u) => u.id);
+    },
+    //右边往左边拖动时的事件
+    end2(e) {
+      var that = this;
+      var items = this.arr1.filter(function (m) {
+        return m.id == that.moveId;
+      });
+      //如果左边
+      if (items.length < 2) return;
+      this.arr1.splice(e.newDraggableIndex, 1);
+    },
+    //move回调方法
+    onMove(e, originalEvent) {
+      //this.moveId = e.relatedContext.element.id;
+      return true;
+    },
+    getQuestionClassListHeadler() {
+      let _this = this;
+      GetToplevel().then((res) => {
+        var gettree = function (titem) {
+          titem.children = [];
+          let childrenList = res.data.data.filter(
+            (u) => u.ParentId == titem.value
+          );
+          if (childrenList.length == 0) titem.children = undefined;
+          res.data.data
+            .filter((u) => u.ParentId == titem.value)
+            .forEach((item, i) => {
+              var model = {
+                value: item.id,
+                label: item.ClassTitle,
+              };
+              gettree(model);
+              titem.children.push(model);
+            });
+        };
+        res.data.data
+          .filter((u) => u.ParentId == 0)
+          .forEach((item, i) => {
+            var model = {
+              value: item.id,
+              label: item.ClassTitle,
+            };
+            gettree(model);
+            _this.QuestionClass.push(model);
+            _this.treeData.push(model);
+          });
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-	.el-row {
-		/* margin-bottom: 20px; */
-		&:last-child {
-			margin-bottom: 0;
-		}
-	}
-	.el-col {
-		border-radius: 4px;
-	}
-	.bg-purple-dark {
-		background: #99a9bf;
-	}
-	.bg-purple {
-		background: #efefef;
-	}
-	.bg-purple-light {
-		background: #e5e9f2;
-	}
-	.grid-content {
-		border-radius: 4px;
-		min-height: 36px;
-		height: 100%;
-	}
-	.row-bg {
-		padding: 10px 0;
-		background-color: #f9fafc;
-	}
-	.infinite-list {
-		list-style: none;
-		margin: 0px;
-		padding: 0px;
-		&::-webkit-scrollbar {
-			width: 6px;
-		}
-		//滚动条小方块
-		&::-webkit-scrollbar-thumb {
-			border-radius: 10px;
-			background: #304156;
-		}
-		//滚动条轨道
-		&::-webkit-scrollbar-track {
-			// border-radius: 10px;
-			height: 100px;
-			background: #cdcdcd;
-		}
-		.infinite-list-item {
-			padding: 10px;
-			min-height: 60px;
-			width: 95%;
-			margin: auto;
-			background-color: #FFF;
-			margin-bottom: 10px;
-			border-radius: 5px;
-			box-shadow: 0 0 5px #cdcdcd;
-			&:first-child {
-				margin-top: 10px;
-			}
-		}
-	}
-	.option-p {
-		line-height: 15px;
-	}
-	.areahead {
-		text-align: center;
-		height: 60px;
-		line-height: 60px;
-		border-bottom: 1px solid #cdcdcd;
-	}
-	.testPaper-manager{
-		margin: 10px 20px 10px 10px;
-	}
-	.testPaper-manager .el-form-item {
-		margin-bottom: 20px;
-	}
-	.el-form-item-custom {
-		margin-bottom: 0px !important;
-	}
-	.testpaper-input {
-		//max-width: 400px;
-	}
+.el-row {
+  /* margin-bottom: 20px; */
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.el-col {
+  border-radius: 4px;
+}
+.bg-purple-dark {
+  background: #99a9bf;
+}
+.bg-purple {
+  background: #efefef;
+}
+.bg-purple-light {
+  background: #e5e9f2;
+}
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+  height: 100%;
+}
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
+.infinite-list {
+  list-style: none;
+  margin: 0px;
+  padding: 0px;
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  //滚动条小方块
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: #304156;
+  }
+  //滚动条轨道
+  &::-webkit-scrollbar-track {
+    // border-radius: 10px;
+    height: 100px;
+    background: #cdcdcd;
+  }
+  .infinite-list-item {
+    padding: 10px;
+    min-height: 60px;
+    width: 95%;
+    margin: auto;
+    background-color: #fff;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    box-shadow: 0 0 5px #cdcdcd;
+    &:first-child {
+      margin-top: 10px;
+    }
+  }
+}
+.option-p {
+  line-height: 15px;
+}
+.areahead {
+  text-align: center;
+  height: 60px;
+  line-height: 60px;
+  border-bottom: 1px solid #cdcdcd;
+}
+.testPaper-manager {
+  margin: 10px 20px 10px 10px;
+}
+.testPaper-manager .el-form-item {
+  margin-bottom: 20px;
+}
+.el-form-item-custom {
+  margin-bottom: 0px !important;
+}
+.testpaper-input {
+  //max-width: 400px;
+}
 </style>
--
libgit2 0.21.4