学期报告静态页面update

src/views/learning/item-list.vue

@@ -2,57 +2,49 @@
   <div class="course-analysis-wrap">
     <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
     <div class="component-content screenSet" id="screenSet">
-      <el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
-        <el-form ref="formInline" :model="formInline" label-width="75px" style="width:100%;">
-          <el-col :span="5">
-            <el-form-item label="选择地区：">
-              <el-cascader
-                :options="optionsRegion"
-                v-model="formInline.region"
-                @change="handleChange"
-              ></el-cascader>
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="选择日期：">
-              <el-date-picker
-                v-model="formInline.date"
-                size="small"
-                type="daterange"
-                placeholder="请选择开始时间"
-                range-separator="~"
-                value-format="yyyy-MM-dd 00:00:00"
-              ></el-date-picker>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8" style="padding:0;text-align:right;padding-right:15px;">
-            <el-button type="default" size="small" @click="reset">重置</el-button>
-            <el-button type="primary" size="small" @click="search" style="margin-left:0;">查询</el-button>
-          </el-col>
-        </el-form>
-      </el-row>
-      <el-row>
-        <el-col :span="5">
-          <el-form ref="formInline" :model="formInline" label-width="75px" style="width:100%;">
-            <el-form-item label="选择机构：">
-              <el-select
-                size="small"
-                v-model="formInline.organization"
-                placeholder="请选择发布状态"
-                @change="changeOrganization"
-              >
-                <el-option
-                  v-for="item in organizationList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                ></el-option>
-              </el-select>
-            </el-form-item>
-          </el-form>
-        </el-col>
-      </el-row>
-      <div class="choose">{{ chooseOrganization }}</div>
+
+      <el-form ref="formInline" :model="formInline" label-width="80px">
+        <el-form-item label="选择地区：">
+          <el-cascader
+              size="small"
+              :options="optionsRegion"
+              v-model="formInline.region"
+              @change="handleChange"
+              filterable
+              change-on-select
+              style="width:330px"
+            ></el-cascader>
+        </el-form-item>
+        <el-form-item label="选择机构：">
+          <el-select
+            size="small"
+            v-model="formInline.organization"
+            placeholder="请选择发布状态"
+            @change="changeOrganization"
+            multiple
+            collapse-tags
+            style="width:330px"
+          >
+            <el-option
+              v-for="item in organizationList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <div class="choose">{{ chooseOrganization }}</div>
+        <el-tag
+          v-for="tag in tags"
+          :key="tag.name"
+          closable>
+          {{ tag }}
+        </el-tag>
+        <el-form-item label="">
+          <el-checkbox size="small" v-model="formInline.checked">查看原始数据</el-checkbox>
+        </el-form-item>
+      </el-form>
+      <!-- <div class="choose">{{ chooseOrganization }}</div> -->
       <div class="button-group">
         <el-button type="default" size="small" @click="exportExcel">导出Excel</el-button>
         <el-button type="default" size="small" @click="changeDate" v-if="activeName=='first'">数据调整</el-button>
@@ -110,13 +102,17 @@ export default {
       curmbFirst: "学情报告",
       curmbSecond: "项目列表",
       organizationList: [
+        {
+          label: '全部',
+          value: 0,
+        },
         {
           label: "西湖区第二人民医院",
-          value: "1"
+          value: 1,
         },
         {
           label: "杭州市中医院",
-          value: "2"
+          value: 2,
         }
       ],
       chooseOrganization: "",
@@ -124,18 +120,18 @@ export default {
       formInline: {
         region: [],
         date: "",
-        organization: "",
+        organization: [],
+        checked: false,
         pageNo: 1,
         pageSize: 10
       },
-      activeName: "first"
+      tags: [],
+      activeName: "first",
     };
   },
   computed: {
     ...mapGetters([
       "_token"
-      // "idType",
-      // "masterAdministratorFlag"
     ])
   },
   created() {
@@ -158,9 +154,16 @@ export default {
       console.log(value);
     },
     changeOrganization(value) {
+      console.log(value);
+      this.chooseOrganization = "";
+      this.tags = [];
       for (let i = 0; i < this.organizationList.length; i++) {
-        if (value == this.organizationList[i].value) {
-          this.chooseOrganization = this.organizationList[i].label;
+        for(let j=0; j<value.length;j++) {
+          if (value[j] == this.organizationList[i].value) {
+            console.log('value[j]',j,value[j],this.organizationList[i].label )
+            this.chooseOrganization += this.organizationList[i].label + '   ';
+            this.tags.push(this.organizationList[i].label);
+          }
         }
       }
     },

src/views/learning/report-list.vue

@@ -111,6 +111,7 @@ export default {
       tableData: [
         // table数据
         {
+          id: 53,
           name: "one",
           status: 1,
           startTime: 1561707289000,
@@ -171,7 +172,7 @@ export default {
     },
     //跳转到报告详情页
     go(row) {
-      vm.$router.push({path:"/item-list",params: row})
+      vm.$router.push({path:"/item-list?id=" + row.id ,params: row})
     }
   }
 };