Commit 172a152f1050ddff33119a75bd54b473d8fa1906

Authored by yangzhi
1 parent f6d2db76

组卷左侧题目的分类

src/views/TestPaper/ManualTestPaper.vue
... ... @@ -3,16 +3,25 @@
3 3 <el-row :gutter="20">
4 4 <el-col :span="6" :style="{'height':contentHeight+'px'}">
5 5 <div class="grid-content bg-purple">
6   - <div style="width: 100%;height: 80px;background: red;">
7   - </div>
8   - <draggable :options="{animation:380,filter:'.unmover'}" group="itxst" v-model="arr1" @end="end1"
9   - @add="RemoveHere" :move="onMove" class="infinite-list" :style="{'height':contentHeight-80+'px'}"
10   - infinite-scroll-disabled="disabled" v-infinite-scroll="load" style="overflow:auto">
11   - <li v-for="i in arr1" class="infinite-list-item">{{ i.subject }}</li>
12   - <p v-if="loading" style="text-align: center;color: #cdcdcd;" class="unmover">加载中...</p>
13   - <p v-if="noMore" style="text-align: center;color: #cdcdcd;" class="unmover">没有更多了</p>
14   - </li>
15   - </draggable>
  6 + <el-tabs
  7 + v-model="activeTab"
  8 + @tab-click="handleTabsClick"
  9 + style="padding: 0 20px"
  10 + :stretch="true"
  11 + >
  12 + <el-tab-pane label="专业类" name="6"></el-tab-pane>
  13 + <el-tab-pane label="测评类" name="1"></el-tab-pane>
  14 + </el-tabs>
  15 + <div style="padding:0 10px">
  16 + <el-input size="small" placeholder="输入关键字搜索" v-model="keyword"></el-input>
  17 + </div>
  18 + <draggable :options="{animation:380,filter:'.unmover'}" group="itxst" v-model="arr1" @end="end1"
  19 + @add="RemoveHere" :move="onMove" class="infinite-list" :style="{'height':contentHeight-80+'px'}"
  20 + infinite-scroll-disabled="disabled" v-infinite-scroll="load" style="overflow:auto">
  21 + <li v-for="i in arr1" class="infinite-list-item" :key="i.id">{{ i.subject }}</li>
  22 + <p v-if="loading" style="text-align: center;color: #cdcdcd;" class="unmover">加载中...</p>
  23 + <p v-if="noMore" style="text-align: center;color: #cdcdcd;" class="unmover">没有更多了</p>
  24 + </draggable>
16 25  
17 26 </div>
18 27 </el-col>
... ... @@ -93,292 +102,318 @@
93 102 </template>
94 103  
95 104 <script>
96   - import draggable from 'vuedraggable'
97   - import {
98   - getQuestionClassList,
99   - getQuestionList,
100   - } from '@/api/QuestionBank'
101   - import {
102   - EditTestPaper,
103   - GetToplevel
104   - } from '@/api/TestPaper'
105   - export default {
106   - //注册draggable组件
107   - components: {
108   - draggable,
109   - },
110   - data() {
111   - return {
112   - parameter: {
113   - pageIndex: 0,
114   - pageSize: 12,
115   - sort: "id",
116   - sortOrder: 1,
117   - keyword: "",
118   - QuestionClassId: 0,
119   - status: 1
120   - },
121   - contentHeight: 0,
122   - count: 0,
123   - edit: false,
124   - arr1: [],
125   - arr2: [],
126   - moveId: -1,
127   - TestPaper: {
128   - TestPaperTitle: "未命名试卷标题",
129   - TestPaperClassId: 0,
130   - TotalScore: 0,
131   - Describe: "",
132   - SingleNumber: 0,
133   - MultipleNumber: 0,
134   - SubjectiveNumber: 0,
135   - OriginalPrice: "0",
136   - PresentPrice: "0",
137   - MembershipPrice: "0",
138   - QuestionBankIds: []
139   - },
140   - loading: false,
141   - rules: {
142   - OriginalPrice: [{
143   - required: true,
144   - message: '不能为空'
145   - }],
146   - PresentPrice: [{
147   - required: true,
148   - message: '不能为空'
149   - }],
150   - MembershipPrice: [{
151   - required: true,
152   - message: '不能为空'
153   - }]
154   - },
155   - QuestionClass: [],
156   - treeData: [{
157   - value:0,
158   - label:"全部"
159   - }]
160   - }
161   - },
162   - computed: {
163   - noMore() {
164   - return this.arr1.length >= this.count
165   - },
166   - disabled() {
167   - return this.loading || this.noMore
168   - }
169   - },
170   - created() {
171   -
172   - },
173   - mounted() {
174   - //计算页面内容区域的高度
175   - this.contentHeight = window.innerHeight - 90;
176   - this.getQuestionClassListHeadler();
177   - //this.GetList();
178   - },
179   - methods: {
180   - SubmitTestPaper() {
181   - if (this.arr2.length > 0) {
182   - EditTestPaper(this.TestPaper).then(res => {
183   - if(res.data.code==200){
184   - this.$confirm('组卷成功!', '消息')
185   - }else{
186   - this.$confirm('组卷失败!', '消息')
187   - }
188   - });
189   - } else {
190   - this.$confirm('试题未有题目!', '消息')
191   - }
192   - },
193   - load() {
194   - this.loading = true
195   - this.parameter.pageIndex += 1;
196   - this.GetList();
197   - this.loading = false;
198   - },
199   - GetList() {
200   - getQuestionList(this.parameter).then(res => {
201   - res.data.data.rows.forEach((item, i) => {
202   - this.arr1.push(item)
203   - })
204   - this.count = res.data.data.total;
205   - this.$forceUpdate();
206   - });
207   - },
208   - end1(e, ) {
209   - var that = this;
210   - if (that.arr1.length < 10) {
211   - this.load();
212   - }
213   -
214   - var items = this.arr2.filter(function(m) {
215   - return m.id == that.moveId
216   - })
  105 +import draggable from "vuedraggable";
  106 +import { getQuestionClassList, getQuestionList } from "@/api/QuestionBank";
  107 +import { EditTestPaper, GetToplevel } from "@/api/TestPaper";
  108 +export default {
  109 + //注册draggable组件
  110 + components: {
  111 + draggable,
  112 + },
  113 + data() {
  114 + return {
  115 + keyword: "",
  116 + activeTab: 6,
  117 + parameter: {
  118 + pageIndex: 0,
  119 + pageSize: 12,
  120 + sort: "id",
  121 + sortOrder: 1,
  122 + keyword: "",
  123 + QuestionClassId: 0,
  124 + status: 1,
  125 + },
  126 + contentHeight: 0,
  127 + count: 0,
  128 + edit: false,
  129 + arr1: [],
  130 + arr2: [],
  131 + moveId: -1,
  132 + TestPaper: {
  133 + TestPaperTitle: "未命名试卷标题",
  134 + TestPaperClassId: 0,
  135 + TotalScore: 0,
  136 + Describe: "",
  137 + SingleNumber: 0,
  138 + MultipleNumber: 0,
  139 + SubjectiveNumber: 0,
  140 + OriginalPrice: "0",
  141 + PresentPrice: "0",
  142 + MembershipPrice: "0",
  143 + QuestionBankIds: [],
  144 + },
  145 + loading: false,
  146 + rules: {
  147 + OriginalPrice: [
  148 + {
  149 + required: true,
  150 + message: "不能为空",
  151 + },
  152 + ],
  153 + PresentPrice: [
  154 + {
  155 + required: true,
  156 + message: "不能为空",
  157 + },
  158 + ],
  159 + MembershipPrice: [
  160 + {
  161 + required: true,
  162 + message: "不能为空",
  163 + },
  164 + ],
  165 + },
  166 + QuestionClass: [],
  167 + treeData: [
  168 + {
  169 + value: 0,
  170 + label: "全部",
  171 + },
  172 + ],
  173 + timeout: 0,
  174 + };
  175 + },
  176 + watch: {
  177 + activeTab() {
  178 + this.search();
  179 + },
  180 + keyword(val) {
  181 + clearTimeout(this.timeout);
  182 + this.timeout = setTimeout(() => {
  183 + this.search();
  184 + }, 500);
  185 + },
  186 + },
  187 + computed: {
  188 + noMore() {
  189 + return this.arr1.length >= this.count;
  190 + },
  191 + disabled() {
  192 + return this.loading || this.noMore;
  193 + },
  194 + },
  195 + created() {},
  196 + mounted() {
  197 + //计算页面内容区域的高度
  198 + this.contentHeight = window.innerHeight - 90;
  199 + this.getQuestionClassListHeadler();
  200 + //this.GetList();
  201 + },
  202 + methods: {
  203 + search() {
  204 + this.parameter.pageIndex = 1;
  205 + this.parameter.QuestionClassId = this.activeTab;
  206 + this.GetList();
  207 + },
  208 + SubmitTestPaper() {
  209 + if (this.arr2.length > 0) {
  210 + EditTestPaper(this.TestPaper).then((res) => {
  211 + if (res.data.code == 200) {
  212 + this.$confirm("组卷成功!", "消息");
  213 + } else {
  214 + this.$confirm("组卷失败!", "消息");
  215 + }
  216 + });
  217 + } else {
  218 + this.$confirm("试题未有题目!", "消息");
  219 + }
  220 + },
  221 + load() {
  222 + this.loading = true;
  223 + this.parameter.pageIndex += 1;
  224 + this.GetList();
  225 + this.loading = false;
  226 + },
  227 + GetList() {
  228 + getQuestionList(this.parameter).then((res) => {
  229 + if (this.parameter.pageIndex == 1) {
  230 + this.arr1 = [];
  231 + }
  232 + res.data.data.rows.forEach((item, i) => {
  233 + this.arr1.push(item);
  234 + });
  235 + this.count = res.data.data.total;
  236 + this.$forceUpdate();
  237 + });
  238 + },
  239 + end1(e) {
  240 + var that = this;
  241 + if (that.arr1.length < 10) {
  242 + this.load();
  243 + }
217 244  
218   - //如果左边
219   - if (items.length < 2) return;
220   - this.arr2.splice(e.newDraggableIndex, 1)
  245 + var items = this.arr2.filter(function (m) {
  246 + return m.id == that.moveId;
  247 + });
221 248  
222   - // SingleNumber:0,
223   - // MultipleNumber:0,
224   - // SubjectiveNumber:0,
225   - },
226   - //从右边移除到左边
227   - RemoveHere(e) {
228   - if (e.item._underlying_vm_.subjectType == 1) {
229   - this.TestPaper.SingleNumber -= 1;
230   - }
231   - if (e.item._underlying_vm_.subjectType == 2) {
232   - this.TestPaper.MultipleNumber -= 1;
233   - }
234   - if (e.item._underlying_vm_.subjectType == 3) {
235   - this.TestPaper.SubjectiveNumber -= 1;
236   - }
237   - this.TestPaper.TotalScore -= e.item._underlying_vm_.fraction;
238   - this.TestPaper.QuestionBankIds = this.arr2.map(u => u.id);
239   - },
240   - //从左边添加到右边
241   - ComeHere(e) {
242   - if (e.item._underlying_vm_.subjectType == 1) {
243   - this.TestPaper.SingleNumber += 1;
244   - }
245   - if (e.item._underlying_vm_.subjectType == 2) {
246   - this.TestPaper.MultipleNumber += 1;
247   - }
248   - if (e.item._underlying_vm_.subjectType == 3) {
249   - this.TestPaper.SubjectiveNumber += 1;
250   - }
251   - this.TestPaper.TotalScore += e.item._underlying_vm_.fraction;
  249 + //如果左边
  250 + if (items.length < 2) return;
  251 + this.arr2.splice(e.newDraggableIndex, 1);
252 252  
253   - this.TestPaper.QuestionBankIds = this.arr2.map(u => u.id);
254   - },
255   - //右边往左边拖动时的事件
256   - end2(e) {
257   - var that = this;
258   - var items = this.arr1.filter(function(m) {
259   - return m.id == that.moveId
260   - })
261   - //如果左边
262   - if (items.length < 2) return;
263   - this.arr1.splice(e.newDraggableIndex, 1)
264   - },
265   - //move回调方法
266   - onMove(e, originalEvent) {
267   - //this.moveId = e.relatedContext.element.id;
268   - return true;
269   - },
270   - getQuestionClassListHeadler() {
271   - let _this = this;
272   - GetToplevel().then(res => {
273   - var gettree = function(titem) {
274   - titem.children = []
275   - let childrenList = res.data.data.filter(u => u.ParentId == titem.value);
276   - if (childrenList.length == 0)
277   - titem.children = undefined;
278   - res.data.data.filter(u => u.ParentId == titem.value).forEach((item, i) => {
279   - var model = {
280   - value: item.id,
281   - label: item.ClassTitle
282   - };
283   - gettree(model);
284   - titem.children.push(model);
285   - })
286   - }
287   - res.data.data.filter(u => u.ParentId == 0).forEach((item, i) => {
288   - var model = {
289   - value: item.id,
290   - label: item.ClassTitle
291   - };
292   - gettree(model);
293   - _this.QuestionClass.push(model);
294   - _this.treeData.push(model)
295   - })
296   - });
297   - }
  253 + // SingleNumber:0,
  254 + // MultipleNumber:0,
  255 + // SubjectiveNumber:0,
  256 + },
  257 + //从右边移除到左边
  258 + RemoveHere(e) {
  259 + if (e.item._underlying_vm_.subjectType == 1) {
  260 + this.TestPaper.SingleNumber -= 1;
  261 + }
  262 + if (e.item._underlying_vm_.subjectType == 2) {
  263 + this.TestPaper.MultipleNumber -= 1;
  264 + }
  265 + if (e.item._underlying_vm_.subjectType == 3) {
  266 + this.TestPaper.SubjectiveNumber -= 1;
  267 + }
  268 + this.TestPaper.TotalScore -= e.item._underlying_vm_.fraction;
  269 + this.TestPaper.QuestionBankIds = this.arr2.map((u) => u.id);
  270 + },
  271 + //从左边添加到右边
  272 + ComeHere(e) {
  273 + if (e.item._underlying_vm_.subjectType == 1) {
  274 + this.TestPaper.SingleNumber += 1;
  275 + }
  276 + if (e.item._underlying_vm_.subjectType == 2) {
  277 + this.TestPaper.MultipleNumber += 1;
  278 + }
  279 + if (e.item._underlying_vm_.subjectType == 3) {
  280 + this.TestPaper.SubjectiveNumber += 1;
  281 + }
  282 + this.TestPaper.TotalScore += e.item._underlying_vm_.fraction;
298 283  
299   - }
300   - }
  284 + this.TestPaper.QuestionBankIds = this.arr2.map((u) => u.id);
  285 + },
  286 + //右边往左边拖动时的事件
  287 + end2(e) {
  288 + var that = this;
  289 + var items = this.arr1.filter(function (m) {
  290 + return m.id == that.moveId;
  291 + });
  292 + //如果左边
  293 + if (items.length < 2) return;
  294 + this.arr1.splice(e.newDraggableIndex, 1);
  295 + },
  296 + //move回调方法
  297 + onMove(e, originalEvent) {
  298 + //this.moveId = e.relatedContext.element.id;
  299 + return true;
  300 + },
  301 + getQuestionClassListHeadler() {
  302 + let _this = this;
  303 + GetToplevel().then((res) => {
  304 + var gettree = function (titem) {
  305 + titem.children = [];
  306 + let childrenList = res.data.data.filter(
  307 + (u) => u.ParentId == titem.value
  308 + );
  309 + if (childrenList.length == 0) titem.children = undefined;
  310 + res.data.data
  311 + .filter((u) => u.ParentId == titem.value)
  312 + .forEach((item, i) => {
  313 + var model = {
  314 + value: item.id,
  315 + label: item.ClassTitle,
  316 + };
  317 + gettree(model);
  318 + titem.children.push(model);
  319 + });
  320 + };
  321 + res.data.data
  322 + .filter((u) => u.ParentId == 0)
  323 + .forEach((item, i) => {
  324 + var model = {
  325 + value: item.id,
  326 + label: item.ClassTitle,
  327 + };
  328 + gettree(model);
  329 + _this.QuestionClass.push(model);
  330 + _this.treeData.push(model);
  331 + });
  332 + });
  333 + },
  334 + },
  335 +};
301 336 </script>
302 337  
303 338 <style lang="scss" scoped>
304   - .el-row {
305   - /* margin-bottom: 20px; */
306   - &:last-child {
307   - margin-bottom: 0;
308   - }
309   - }
310   - .el-col {
311   - border-radius: 4px;
312   - }
313   - .bg-purple-dark {
314   - background: #99a9bf;
315   - }
316   - .bg-purple {
317   - background: #efefef;
318   - }
319   - .bg-purple-light {
320   - background: #e5e9f2;
321   - }
322   - .grid-content {
323   - border-radius: 4px;
324   - min-height: 36px;
325   - height: 100%;
326   - }
327   - .row-bg {
328   - padding: 10px 0;
329   - background-color: #f9fafc;
330   - }
331   - .infinite-list {
332   - list-style: none;
333   - margin: 0px;
334   - padding: 0px;
335   - &::-webkit-scrollbar {
336   - width: 6px;
337   - }
338   - //滚动条小方块
339   - &::-webkit-scrollbar-thumb {
340   - border-radius: 10px;
341   - background: #304156;
342   - }
343   - //滚动条轨道
344   - &::-webkit-scrollbar-track {
345   - // border-radius: 10px;
346   - height: 100px;
347   - background: #cdcdcd;
348   - }
349   - .infinite-list-item {
350   - padding: 10px;
351   - min-height: 60px;
352   - width: 95%;
353   - margin: auto;
354   - background-color: #FFF;
355   - margin-bottom: 10px;
356   - border-radius: 5px;
357   - box-shadow: 0 0 5px #cdcdcd;
358   - &:first-child {
359   - margin-top: 10px;
360   - }
361   - }
362   - }
363   - .option-p {
364   - line-height: 15px;
365   - }
366   - .areahead {
367   - text-align: center;
368   - height: 60px;
369   - line-height: 60px;
370   - border-bottom: 1px solid #cdcdcd;
371   - }
372   - .testPaper-manager{
373   - margin: 10px 20px 10px 10px;
374   - }
375   - .testPaper-manager .el-form-item {
376   - margin-bottom: 20px;
377   - }
378   - .el-form-item-custom {
379   - margin-bottom: 0px !important;
380   - }
381   - .testpaper-input {
382   - //max-width: 400px;
383   - }
  339 +.el-row {
  340 + /* margin-bottom: 20px; */
  341 + &:last-child {
  342 + margin-bottom: 0;
  343 + }
  344 +}
  345 +.el-col {
  346 + border-radius: 4px;
  347 +}
  348 +.bg-purple-dark {
  349 + background: #99a9bf;
  350 +}
  351 +.bg-purple {
  352 + background: #efefef;
  353 +}
  354 +.bg-purple-light {
  355 + background: #e5e9f2;
  356 +}
  357 +.grid-content {
  358 + border-radius: 4px;
  359 + min-height: 36px;
  360 + height: 100%;
  361 +}
  362 +.row-bg {
  363 + padding: 10px 0;
  364 + background-color: #f9fafc;
  365 +}
  366 +.infinite-list {
  367 + list-style: none;
  368 + margin: 0px;
  369 + padding: 0px;
  370 + &::-webkit-scrollbar {
  371 + width: 6px;
  372 + }
  373 + //滚动条小方块
  374 + &::-webkit-scrollbar-thumb {
  375 + border-radius: 10px;
  376 + background: #304156;
  377 + }
  378 + //滚动条轨道
  379 + &::-webkit-scrollbar-track {
  380 + // border-radius: 10px;
  381 + height: 100px;
  382 + background: #cdcdcd;
  383 + }
  384 + .infinite-list-item {
  385 + padding: 10px;
  386 + min-height: 60px;
  387 + width: 95%;
  388 + margin: auto;
  389 + background-color: #fff;
  390 + margin-bottom: 10px;
  391 + border-radius: 5px;
  392 + box-shadow: 0 0 5px #cdcdcd;
  393 + &:first-child {
  394 + margin-top: 10px;
  395 + }
  396 + }
  397 +}
  398 +.option-p {
  399 + line-height: 15px;
  400 +}
  401 +.areahead {
  402 + text-align: center;
  403 + height: 60px;
  404 + line-height: 60px;
  405 + border-bottom: 1px solid #cdcdcd;
  406 +}
  407 +.testPaper-manager {
  408 + margin: 10px 20px 10px 10px;
  409 +}
  410 +.testPaper-manager .el-form-item {
  411 + margin-bottom: 20px;
  412 +}
  413 +.el-form-item-custom {
  414 + margin-bottom: 0px !important;
  415 +}
  416 +.testpaper-input {
  417 + //max-width: 400px;
  418 +}
384 419 </style>
... ...