页面修改

src/components/exam/paperfolder-form.vue

 <template>
   <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
-    <q-card style="width: 800px;max-width:900px;">
+    <q-card style="width: 500px;max-width:500px;">
       <q-card-section>
         <div class="text-h6">{{objOption.PaperId==0?'新增文件夹':'修改文件夹名称'}}</div>
       </q-card-section>
       <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
-        <div class="text-caption q-mb-md q-px-xs text-grey-6">基本资料</div>
         <div class="row wrap">
           <q-input filled stack-label maxlength="50" :dense="false" v-model="objOption.PaperName" ref="PaperName"
-            class="col-6 q-pr-lg q-pb-lg" label="文件夹名称" :rules="[val => !!val || '请填写文件夹名称']" />
+            class="col-12 q-pr-lg q-pb-lg" label="文件夹名称" :rules="[val => !!val || '请填写文件夹名称']" />
         </div>
       </q-card-section>
       <q-separator />
@@ -53,13 +52,13 @@
     methods: {
       initObj() {
         if (this.saveObj) {
-          this.optionTitle = "修改助教信息"
+          this.optionTitle = "修改文件夹名称"
           this.objOption.PaperId = this.saveObj.PaperId;
           this.objOption.PaperName = this.saveObj.PaperName;
           this.objOption.PaperType = this.saveObj.PaperType;
           this.objOption.ParentId = this.saveObj.ParentId;
         } else {
-          this.optionTitle = "新增助教"
+          this.optionTitle = "新增文件夹"
         }
       },
       closeSaveForm() {

src/pages/exam/examManagement.vue

@@ -35,35 +35,63 @@
             label="输入试卷名称、组卷人查找" />
         </div>
       </div>
+      <div class="page-option">
+        <q-btn color="accent" size="sm" class="q-mr-md" label="新增文件夹" @click="showExamFolder(null)" />
+        <q-btn color="accent" size="sm" class="q-mr-md" label="新增试卷" @click="CreatePaper()" />
+      </div>
     </div>
     <div class="page-content">
-      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
-        class="sticky-column-table sticky-right-column-table" separator="none" :data="dataList" :columns="columns"
-        row-key="name">
-        <template v-slot:top="props">
-          <div class="col-2 q-table__title">试卷管理</div>
-          <q-space />
-          <q-btn color="accent" size="sm" class="q-mr-md" label="新增文件夹" @click="CreatePaper()" />
-          <q-btn color="accent" size="sm" class="q-mr-md" label="新增试卷" @click="CreatePaper()" />
+      <el-table :data="dataList" v-loading="loading" :expand-row-keys="expandKeys" :default-expand-all="true"
+        class="tree-tab-chapter" style="width: 100%;margin-bottom: 20px;" row-key="PaperId" ref="examPaperTab"
+        @row-click="rowsClick" :tree-props="{ children: 'ChildList', hasChildren: 'hasChildren' }">
+        <el-table-column prop="PaperName" label="文件夹/试卷" width="450">
+          <template slot-scope="scope">
+            {{ scope.row.PaperName }}
           </template>
-        <template v-slot:bottom>
-          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
-            :input="true" @input="changePage" />
+        </el-table-column>
+        <el-table-column prop="QuestionCount" label="题量" width="100">
+          <template slot-scope="scope">
+            {{ scope.row.QuestionCount }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="DifficultyTypeName" label="难度" width="200">
+          <template slot-scope="scope">
+            {{ scope.row.DifficultyTypeName }}
           </template>
-        <template v-slot:body-cell-PaperId="props">
-          <q-td :props="props" style="width:100px;">
-            <q-btn flat size="xs" color="primary" style="font-weight:400" label="封存" />
-            <q-btn flat size="xs" color="primary" style="font-weight:400" label="预览" />
-            <q-btn flat size="xs" color="primary" style="font-weight:400" @click="goExameEdit(props.row)" label="编辑" />
-            <q-btn flat size="xs" color="primary" style="font-weight:400" label="复制" />
-            <q-btn flat size="xs" color="primary" style="font-weight:400" label="发布考试" />
-            <q-btn flat size="xs" color="primary" style="font-weight:400" label="分配管理" />
-            <q-btn flat size="xs" color="primary" style="font-weight:400" label="删除" />
-            <q-btn flat size="xs" color="primary" style="font-weight:400" label="详情" />
-          </q-td>
+        </el-table-column>
+        <el-table-column prop="PublishCount" label="发放次数" width="200">
+          <template slot-scope="scope">
+            {{ scope.row.PublishCount }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="CreateByName" label="创建人" width="200">
+          <template slot-scope="scope">
+            {{ scope.row.CreateByName }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="CreateTimeStr" label="创建时间" width="200">
+          <template slot-scope="scope">
+            {{ scope.row.CreateTimeStr }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <template v-if="scope.row.PaperType==1">
+              <q-btn flat size="xs" color="primary" style="font-weight:400" @click="showExamFolder(scope.row)"
+                label="重命名" />
+            </template>
+            <template v-if="scope.row.PaperType==2">
+              <q-btn flat size="xs" color="primary" style="font-weight:400" @click="goExameEdit(scope.row)"
+                label="编辑" />
+            </template>
+
           </template>
-      </q-table>
+        </el-table-column>
+      </el-table>
+      <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
+        :input="true" @input="changePage" />
     </div>
+    <paperfolderForm v-if="isShowExamFolder" :saveObj="examObj"  @close="closeExamForm"  @success="refreshPage"></paperfolderForm>
   </div>
 </template>
 <script>
@@ -84,59 +112,16 @@
         data: [],
         msg: {
           pageIndex: 1,
-          pageSize: 12,
-          rowsPerPage: 12,
+          pageSize: 10,
+          rowsPerPage: 10,
           PaperName: '' //题库名
         },
         pageCount: 0,
         loading: false,
-        tikuList: [{
-          Id: 0,
-          Name: '全部'
-        }, {
-          Id: 1,
-          Name: '测试题库'
-        }, {
-          Id: 2,
-          Name: '质量管理与可靠性'
-        }],
         dataList: [],
-        columns: [{
-            name: 'PaperName',
-            label: '试卷名称',
-            field: 'PaperName',
-            align: 'left'
-          },
-          {
-            name: 'QuestionCount',
-            label: '题量',
-            field: 'QuestionCount',
-            align: 'left'
-          },
-          {
-            name: 'DifficultyTypeName',
-            label: '难度',
-            field: 'DifficultyTypeName',
-            align: 'left'
-          },
-          {
-            name: 'PublishCount',
-            label: '发放次数',
-            field: 'PublishCount',
-            align: 'left'
-          },
-          {
-            name: 'CreateByName',
-            label: '创建人',
-            field: 'CreateByName',
-            align: 'left'
-          },
-          {
-            name: 'PaperId',
-            label: '操作',
-            field: 'PaperId'
-          }
-        ],
+        expandKeys: [],
+        isShowExamFolder: false, //是否显示新增文件夹
+        examObj: {}, //弹窗对象
       }
     },
     created() {},
@@ -144,6 +129,9 @@
       this.getList();
     },
     methods: {
+      rowsClick(row, column, event) {
+        this.$refs.examPaperTab.toggleRowExpansion(row);
+      },
       //创建试卷
       CreatePaper() {
         this.OpenNewUrl('/exam/examCreate', {})
@@ -174,6 +162,15 @@
         this.OpenNewUrl('/exam/examEdit', {
           Id: item.PaperId
         })
+      },
+      //新增修改文件夹
+      showExamFolder(obj) {
+        this.examObj = obj;
+        this.isShowExamFolder = true;
+      },
+      //关闭弹窗
+      closeExamForm() {
+        this.isShowExamFolder = false;
       }
     }
   }