专题库

src/views/project/components/drawer/form.vue

@@ -1,123 +1,120 @@
 <template>
   <div>
-    <el-drawer class="custom-drawer-form" :title="title" size="800px" append-to-body :visible.sync="drawer" direction="rtl" :before-close="close" destroy-on-close>
-        <el-container>
-            <el-main>
-              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" label-position="left" class="demo-ruleForm">
-                <el-form-item label="专题库名称" prop="name">
-                  <el-input v-model="ruleForm.name" placeholder="请输入专题库名称"></el-input>
+    <el-drawer class="custom-drawer-form" :title="title" size="800px" append-to-body :visible.sync="drawer"
+      direction="rtl" :before-close="close" destroy-on-close>
+      <el-container>
+        <el-main>
+          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" label-position="left"
+            class="demo-ruleForm">
+            <el-form-item label="专题库名称" prop="name">
+              <el-input v-model="ruleForm.name" placeholder="请输入专题库名称"></el-input>
+            </el-form-item>
+            <template>
+              <div>
+                <el-form-item label="委托方" prop="name" v-if="userinfo.tenantType == 1">
+
+                  <mySelectButton size='large' style="width:100%" @click="handleSelect">
+                    <div slot="select" style="width:100%">
+                      <el-autocomplete style="width:100%" v-model="ruleForm.clientName" :fetch-suggestions="querySearch"
+                        @input="input" placeholder="请输入内容" :trigger-on-focus="false" @select="handleChange">
+                      </el-autocomplete>
+                    </div>
+                  </mySelectButton>
                 </el-form-item>
-                <template>
-                  <div>
-                    <el-form-item label="委托方" prop="name" v-if="userinfo.tenantType == 1">
-                      
-                      <mySelectButton size='large' style="width:100%" @click="handleSelect">
-                        <div slot="select" style="width:100%">
-                          <el-autocomplete
-                            style="width:100%"
-                            v-model="ruleForm.clientName"
-                            :fetch-suggestions="querySearch"
-                            @input="input"
-                            placeholder="请输入内容"
-                            :trigger-on-focus="false"
-                            @select="handleChange"
-                          >
-                          </el-autocomplete>
-                        </div>
-                      </mySelectButton>
-                    </el-form-item>
-                    <el-form-item label="委托部门" prop="name" v-else>
-                      <mySelectTree style="width:100%" v-model="ruleForm.departmentId" :options="departmentList"></mySelectTree>
-                    </el-form-item>
+                <el-form-item label="委托部门" prop="name" v-else>
+                  <mySelectTree style="width:100%" v-model="ruleForm.departmentId" :options="departmentList">
+                  </mySelectTree>
+                </el-form-item>
+              </div>
+            </template>
+            <el-form-item label="负责部门" prop="departmentId">
+              <mySelectTree style="width:100%" v-model="ruleForm.departmentId" :options="departmentList"></mySelectTree>
+            </el-form-item>
+            <el-form-item label="负责人" prop="person">
+              <el-select style="width:100%" v-model="ruleForm.personnelId" filterable remote clearable placeholder="请选择"
+                :loading="loading" v-SelectLazyLoading="lazyLoading" :remote-method="remoteMethod">
+                <el-option v-for="item in personnelList" :key="item.id" :label="item.name" :value="item.id">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="应用场景" prop="scenarioList">
+              <el-checkbox-group v-model="ruleForm.scenarioList" @change="onChange">
+                <el-checkbox v-for="item in commonData.ENTERPRISE_APPLICATION_SCENARIO" :key="item.value"
+                  :label="parseInt(item.value)">{{ item.label }}</el-checkbox>
+              </el-checkbox-group>
+            </el-form-item>
+            <el-form-item label="调查类型" prop="typeList" v-if="show == true">
+              <el-checkbox-group v-model="ruleForm.typeList">
+                <template v-for="(item, index) in dictAssociateData">
+                  <el-checkbox :label="parseInt(item.dictChildValue)">
+                    {{ item.dictChildLabel }}
+                  </el-checkbox>
+                  <div v-if="index === dictAssociateData.length - 1" class="more-data-box">
+                    <el-link v-if="moreData" type="primary" icon="el-icon-arrow-down" @click="handleMoreData(0)">更多
+                    </el-link>
+                    <el-link v-else type="primary" icon="el-icon-arrow-up" @click="handleMoreData(1)">收起</el-link>
                   </div>
                 </template>
-                <el-form-item label="负责部门" prop="departmentId">
-                  <mySelectTree style="width:100%" v-model="ruleForm.departmentId" :options="departmentList"></mySelectTree>
-                </el-form-item>
-                <el-form-item label="负责人" prop="person">
-                  <el-select style="width:100%" v-model="ruleForm.personnelId" filterable remote clearable placeholder="请选择" :loading="loading" v-SelectLazyLoading="lazyLoading" :remote-method="remoteMethod">
-                    <el-option
-                      v-for="item in personnelList"
-                      :key="item.id"
-                      :label="item.name"
-                      :value="item.id"
-                    >
-                    </el-option>
-                  </el-select>
+                <div v-show="isShow">
+                  <el-checkbox v-for="item in dictSecondAssociateData" :label="parseInt(item.dictChildValue)">
+                    {{ item.dictChildLabel }}
+                  </el-checkbox>
+                </div>
+              </el-checkbox-group>
+            </el-form-item>
+            <el-form-item label="产品类别/产品" prop="productId" v-if="$permission('/workspace/product')">
+              <div>
+                <mySelectButton size='large' style="width:100%">
+                  <div slot="select" style="width:100%">
+                    <mySelectTree style="width:100%" v-model="ruleForm.departmentId" :options="departmentList">
+                    </mySelectTree>
+                  </div>
+                </mySelectButton>
+              </div>
+            </el-form-item>
+            <el-row :gutter="24">
+              <el-col :span="12">
+                <el-form-item label="合同号" prop="contractNo">
+                  <el-input v-model="ruleForm.contractNo" placeholder="请输入合同号"></el-input>
                 </el-form-item>
-                <el-form-item label="应用场景" prop="scenarioList">
-                  <el-checkbox-group v-model="ruleForm.scenarioList" @change="onChange">
-                    <el-checkbox v-for="item in commonData.ENTERPRISE_APPLICATION_SCENARIO" :key="item.value" :label="parseInt(item.value)">{{ item.label }}</el-checkbox>
-                  </el-checkbox-group>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="内部案卷" prop="innerFile">
+                  <el-input v-model="ruleForm.innerFile" placeholder="请输入内部案卷"></el-input>
                 </el-form-item>
-                <el-form-item label="调查类型" prop="typeList" v-if="show==true">
-                  <el-checkbox-group v-model="ruleForm.typeList">
-                    <template v-for="(item, index) in dictAssociateData">
-                      <el-checkbox :label="parseInt(item.dictChildValue)">
-                        {{ item.dictChildLabel }}
-                      </el-checkbox>
-                      <div v-if="index === dictAssociateData.length - 1" class="more-data-box">
-                        <el-link v-if="moreData" type="primary" icon="el-icon-arrow-down" @click="handleMoreData(0)">更多
-                        </el-link>
-                        <el-link v-else type="primary" icon="el-icon-arrow-up" @click="handleMoreData(1)">收起</el-link>
-                      </div>
-                    </template>
-                    <div v-show="isShow">
-                      <el-checkbox v-for="item in dictSecondAssociateData" :label="parseInt(item.dictChildValue)">
-                        {{ item.dictChildLabel }}
-                      </el-checkbox>
-                    </div>
-                  </el-checkbox-group>
+              </el-col>
+            </el-row>
+            <el-row :gutter="24">
+              <el-col :span="12">
+                <el-form-item label="委案日" prop="caseDate">
+                  <el-date-picker v-model="ruleForm.caseDate" value-format="yyyy-MM-dd" type="date" placeholder="请选择委案日"
+                    class="width_100"></el-date-picker>
                 </el-form-item>
-                <el-form-item label="产品类别/产品" prop="productId" v-if="$permission('/workspace/product')">
-                  <div>
-                    <mySelectButton size='large' style="width:100%">
-                      <div slot="select" style="width:100%">
-                        <mySelectTree style="width:100%" v-model="ruleForm.departmentId" :options="departmentList"></mySelectTree>
-                      </div>
-                    </mySelectButton>
-                  </div>
-                </el-form-item>
-                <el-row :gutter="24">
-                  <el-col :span="12">
-                    <el-form-item label="合同号" prop="contractNo">
-                      <el-input v-model="ruleForm.contractNo" placeholder="请输入合同号"></el-input>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="12">
-                    <el-form-item label="内部案卷" prop="innerFile">
-                      <el-input v-model="ruleForm.innerFile" placeholder="请输入内部案卷"></el-input>
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-                <el-row :gutter="24">
-                  <el-col :span="12">
-                    <el-form-item label="委案日" prop="caseDate">
-                      <el-date-picker v-model="ruleForm.caseDate" value-format="yyyy-MM-dd" type="date" placeholder="请选择委案日" class="width_100"></el-date-picker>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="12">
-                    <el-form-item label="处理状态" prop="status">
-                      <el-select v-model="ruleForm.status" placeholder="请输入处理状态" class="width_100">
-                        <el-option value="0" label="处理中"></el-option>
-                        <el-option value="1" label="已完成"></el-option>
-                      </el-select>
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-                <el-form-item label="备注" prop="remark">
-                  <el-input v-model="ruleForm.remark" placeholder="请输入备注" type="textarea"></el-input>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="处理状态" prop="status">
+                  <el-select v-model="ruleForm.status" placeholder="请输入处理状态" class="width_100">
+                    <el-option value="0" label="处理中"></el-option>
+                    <el-option value="1" label="已完成"></el-option>
+                  </el-select>
                 </el-form-item>
-              </el-form>
-            </el-main>
-            <el-footer class="footer-common" v-if="($permission('/workspace/project/modify')||$permission('/workspace/project/add')) && ($r(ruleForm.id,[2])||userinfo.id == ruleForm.createBy)">
-              <el-button @click="close">取 消</el-button>
-              <el-button type="primary" @click="submit" :loading="loading">确 定</el-button>
-            </el-footer>
-        </el-container>
+              </el-col>
+            </el-row>
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="ruleForm.remark" placeholder="请输入备注" type="textarea"></el-input>
+            </el-form-item>
+          </el-form>
+        </el-main>
+        <el-footer class="footer-common"
+          v-if="($permission('/workspace/project/modify') || $permission('/workspace/project/add')) && ($r(ruleForm.id, [2]) || userinfo.id == ruleForm.createBy)">
+          <el-button @click="close">取 消</el-button>
+          <el-button type="primary" @click="submit" :loading="loading">确 定</el-button>
+        </el-footer>
+      </el-container>
     </el-drawer>
 
-    <el-dialog title="选择委托方" :visible.sync="visible" width="800px" append-to-body destroy-on-close :before-close="close2" top="10vh">
+    <el-dialog title="选择委托方" :visible.sync="visible" width="800px" append-to-body destroy-on-close :before-close="close2"
+      top="10vh">
       <ClientTable :choseClient="true" @getClient="getClient"></ClientTable>
     </el-dialog>
   </div>
@@ -135,50 +132,50 @@ export default {
   },
   data() {
     return {
-        //抽屉标题
-        title:'',
-        //抽屉开关标识
-        drawer:false,
-        //表单数据
-        ruleForm:{},
-        //表单规则
-        rules:{},
-        //控制选择委托方弹窗
-        visible:false,
-        //部门列表
-        departmentList:[],
-        //人员列表
-        personnelList:[],
-        //负责人下拉加载
-        loading:false,
-        //显示调查类型
-        show:false,
-        //显示更多调查类型
-        isShow: false,
-        //显示更多和收起按钮
-        moreData: true,
-        //调查类型列表
-        dictAssociateData: [],
-        //其他调查类型
-        dictSecondAssociateData: [],
-        //用来获取调查类型
-        test: {
-          value: '1',
-          type: 'ENTERPRISE_APPLICATION_SCENARIO',
-          flag: 1
-        },
+      //抽屉标题
+      title: '',
+      //抽屉开关标识
+      drawer: false,
+      //表单数据
+      ruleForm: {},
+      //表单规则
+      rules: {},
+      //控制选择委托方弹窗
+      visible: false,
+      //部门列表
+      departmentList: [],
+      //人员列表
+      personnelList: [],
+      //负责人下拉加载
+      loading: false,
+      //显示调查类型
+      show: false,
+      //显示更多调查类型
+      isShow: false,
+      //显示更多和收起按钮
+      moreData: true,
+      //调查类型列表
+      dictAssociateData: [],
+      //其他调查类型
+      dictSecondAssociateData: [],
+      //用来获取调查类型
+      test: {
+        value: '1',
+        type: 'ENTERPRISE_APPLICATION_SCENARIO',
+        flag: 1
+      },
     };
   },
   watch: {},
   computed: {
     ...mapGetters(['userinfo'])
   },
-  created() {},
+  created() { },
   mounted() {
   },
   methods: {
     //打开弹窗
-    open(form,title){
+    open(form, title) {
       //获取部门列表
       this.getDepartment()
       //获取人员列表
@@ -189,136 +186,135 @@ export default {
     },
     //获取部门列表
     getDepartment() {
-			this.$api.getPermissionDepartmentList().then((response) => {
-				this.departmentList = response.data;
-			});
-		},
+      this.$api.getPermissionDepartmentList().then((response) => {
+        this.departmentList = response.data;
+      });
+    },
     //获取人员列表
-    getPersonnelList(){
-      this.$api.getPermissionPersonnelList().then((response)=>{
-        this.personnelList=response.data
+    getPersonnelList() {
+      this.$api.getPermissionPersonnelList().then((response) => {
+        this.personnelList = response.data
       })
     },
     //关闭抽屉
-    close(){
-        this.drawer = false
+    close() {
+      this.drawer = false
     },
     //远程搜索（建议调取接口获取）
     querySearch(queryString, cb) {
-        // var clientList = this.clientList;
-        // var results = (queryString ? clientList.filter(this.createFilter(queryString)) : clientList).map(item=>{
-        //   return {
-        //     value:item.name,
-        //     name:item.name,
-        //     id:item.id
-        //   }
-        // });
-        // // 调用 callback 返回建议列表的数据
-        // cb(results);
-      },
-      createFilter(queryString) {
-        return (clientList) => {
-          return (clientList.name && clientList.name.toLowerCase().indexOf(queryString.toLowerCase()) != -1);
-        };
-      },
-      //输入框输入事件（委托方）
-      input() {
-        this.$set(this.ruleForm, 'clientId', -1)
-      },
-      //切换选择委托方
-      handleChange(row) {
-        this.$set(this.ruleForm, 'clientId', row.id)
-        this.$set(this.ruleForm, 'clientName', row.name)
-        this.close2()
-      },
-      //打开选择委托方弹窗
-      handleSelect() {
-        this.visible = true
-      },
-      //获取委托方信息
-      getClient(row){
-        this.$set(this.ruleForm, 'clientId', row.id)
-        this.$set(this.ruleForm, 'clientName', row.name)
-        this.close2()
-      },
-      //关闭委托方弹窗
-      close2(){
-        this.visible = false
-      },
-      //负责人远程搜索
-      remoteMethod(){
-
-      },
-      //负责人下拉懒加载
-      lazyLoading(){
+      // var clientList = this.clientList;
+      // var results = (queryString ? clientList.filter(this.createFilter(queryString)) : clientList).map(item=>{
+      //   return {
+      //     value:item.name,
+      //     name:item.name,
+      //     id:item.id
+      //   }
+      // });
+      // // 调用 callback 返回建议列表的数据
+      // cb(results);
+    },
+    createFilter(queryString) {
+      return (clientList) => {
+        return (clientList.name && clientList.name.toLowerCase().indexOf(queryString.toLowerCase()) != -1);
+      };
+    },
+    //输入框输入事件（委托方）
+    input() {
+      this.$set(this.ruleForm, 'clientId', -1)
+    },
+    //切换选择委托方
+    handleChange(row) {
+      this.$set(this.ruleForm, 'clientId', row.id)
+      this.$set(this.ruleForm, 'clientName', row.name)
+      this.close2()
+    },
+    //打开选择委托方弹窗
+    handleSelect() {
+      this.visible = true
+    },
+    //获取委托方信息
+    getClient(row) {
+      this.$set(this.ruleForm, 'clientId', row.id)
+      this.$set(this.ruleForm, 'clientName', row.name)
+      this.close2()
+    },
+    //关闭委托方弹窗
+    close2() {
+      this.visible = false
+    },
+    //负责人远程搜索
+    remoteMethod(query) {
+      
+    },
+    //负责人下拉懒加载
+    lazyLoading() {
 
-      },
-      //应用场景选择切换
-      onChange() {
-        if(this.ruleForm.scenarioList.length!=0){
-          this.show=true
-          this.test.value = this.ruleForm.scenarioList.toString()
-          this.test.flag = 1
-          this.$api.getDictTreeByParentDictValue(this.test).then(response => {
-            this.dictAssociateData = response.data
-            this.test.value = this.ruleForm.scenarioList.toString()
-            this.test.flag = 0
-            this.$api.getDictTreeByParentDictValue(this.test).then(response => {
-              this.dictSecondAssociateData = response.data
-            })
-          })
-        }else{
-          this.show=false
-        }
-      },
-      //调查类型展开收起
-      handleMoreData(type) {
-        if (type === 0) {
-          this.isShow = true
+    },
+    //调查类型选择切换
+    onChange() {
+      if (this.ruleForm.scenarioList.length != 0) {
+        this.show = true
+        this.test.value = this.ruleForm.scenarioList.toString()
+        this.test.flag = 1
+        this.$api.getDictTreeByParentDictValue(this.test).then(response => {
+          this.dictAssociateData = response.data
           this.test.value = this.ruleForm.scenarioList.toString()
           this.test.flag = 0
           this.$api.getDictTreeByParentDictValue(this.test).then(response => {
             this.dictSecondAssociateData = response.data
           })
-        } else if (type === 1) {
-          this.isShow = false
-        }
-        this.moreData = !this.moreData
-      },
-      //提交数据
-      submit() {
-        this.$refs.ruleForm.validate((valid) => {
-          if (valid) {
-            this.show=false
-            this.loading = true
-            if (this.ruleForm.id) {
-              this.$api.editProject(this.ruleForm).then(response => {
-                this.loading = false
-                this.$message.success('编辑成功')
-                this.$emit('submit', 0)
-                this.close()
-              }).catch(error => {
-                this.loading = false
-              })
-            } else {
-              this.$api.addProject(this.ruleForm).then(response => {
-                this.loading = false
-                let permissions = this.permissions
-                permissions[response.data] = 0
-                this.$store.commit('SET_PERMISSIONS', permissions)
-                this.$message.success('新增成功')
-                this.$emit('submit', 1)
-                this.close()
-              }).catch(error => {
-                this.show=true
-                this.loading = false
-              })
-            }
-          }
         })
-      },
+      } else {
+        this.show = false
+      }
+    },
+    //调查类型展开收起
+    handleMoreData(type) {
+      if (type === 0) {
+        this.isShow = true
+        this.test.value = this.ruleForm.scenarioList.toString()
+        this.test.flag = 0
+        this.$api.getDictTreeByParentDictValue(this.test).then(response => {
+          this.dictSecondAssociateData = response.data
+        })
+      } else if (type === 1) {
+        this.isShow = false
+      }
+      this.moreData = !this.moreData
+    },
+    //提交数据
+    submit() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.show = false
+          this.loading = true
+          if (this.ruleForm.id) {
+            this.$api.editProject(this.ruleForm).then(response => {
+              this.loading = false
+              this.$message.success('编辑成功')
+              this.$emit('submit', 0)
+              this.close()
+            }).catch(error => {
+              this.loading = false
+            })
+          } else {
+            this.$api.addProject(this.ruleForm).then(response => {
+              this.loading = false
+              let permissions = this.permissions
+              permissions[response.data] = 0
+              this.$store.commit('SET_PERMISSIONS', permissions)
+              this.$message.success('新增成功')
+              this.$emit('submit', 1)
+              this.close()
+            }).catch(error => {
+              this.show = true
+              this.loading = false
+            })
+          }
+        }
+      })
+    },
   },
 };
 </script>
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

src/views/project/components/mixins/index.js

@@ -2,20 +2,20 @@ import { downLoad2, renderSize } from '@/utils'
 export const workspaceOptions = {
   props: {
     tableData: {//数据
-        type: Array,
-        default: () => {
-          return [{ name: '123', eventNumber: 2, projectNumber: 3, projectNumber1: [{ name: '场景一' }, {name:'场景二'}]},]
-        }
-      },
-      queryParams: {//分页信息
-        type: Object,
-        default: () => {
-          return {
-            size: 10,
-            current: 1,
-          }
+      type: Array,
+      default: () => {
+        return [{ name: '123', eventNumber: 2, projectNumber: 3, projectNumber1: [{ name: '场景一' }, { name: '场景二' }] },]
+      }
+    },
+    queryParams: {//分页信息
+      type: Object,
+      default: () => {
+        return {
+          size: 10,
+          current: 1,
         }
-      },
+      }
+    },
   },
   methods: {
     renderSize,
@@ -26,12 +26,12 @@ export const workspaceOptions = {
           id: row.id,
         }
       })
-      this.$s.setSession('projectName',row.name)
+      this.$s.setSession('projectName', row.name)
       window.open(router.href, '_blank');
     },
     //操作列
-    handleCommand(event,row) {
-      this.$emit('option',{option:event,row})
+    handleCommand(event, row) {
+      this.$emit('option', { option: event, row })
     },
-  }
+  },
 }

src/views/project/components/view/MergeTable.vue

@@ -1,18 +1,20 @@
 <template>
   <div class="workspace-merge-table">
-    <el-table :data="tableData" header-row-class-name="custom-table-header" @expand-change="expandChange" >
+    <el-table :data="tableData" header-row-class-name="custom-table-header" @expand-change="expandChange" @sort-change="sortChange">
       <el-table-column type="expand">
         <template slot-scope="props">
           <Table :data="showData[props.row.index]" :params="params" :field="field" @option="handleOption" />
         </template>
       </el-table-column>
-      <el-table-column v-for="column in columnList" :label="column.label" :prop="column.prop" show-overflow-tooltip></el-table-column>
+      <el-table-column v-for="column in columnList" :label="column.label" :prop="column.prop" sortable="custom"
+        show-overflow-tooltip>
+      </el-table-column>
     </el-table>
   </div>
 </template>
 
 <script>
-import { workspaceOptions } from "./mixins";
+import { workspaceOptions } from "../mixins";
 import { formatDate, formatTableDate } from "@/utils";
 import Table from "./table";
 
@@ -34,32 +36,35 @@ export default {
     }
   },
   watch: {
-    
+
   },
   mounted() {
     this.initData()
   },
   methods: {
+    // 排序
+    sortChange({ column, prop, order }) {
+      let str = '1'
+      this.$emit('on-sort', { column, prop, order, str })
+    },
     //操作列
     handleOption(data) {
       this.$emit('option', data)
     },
     //展开行
     expandChange(row, expandedRows) {
-     
+
     },
     initData() {
-     
-     
+
+
     },
-  
-     
+
+
   }
 }
 </script>
 
 <style lang="scss">
-.workspace-merge-table {
-
-}
+.workspace-merge-table {}
 </style>

src/views/project/components/view/table.vue

@@ -1,30 +1,31 @@
 <template>
   <div class="height_100">
     <div>
-      <el-table :data="tableData" border style="width: 100%" header-row-class-name="custom-table-header">
+      <el-table :data="tableData" border style="width: 100%" header-row-class-name="custom-table-header"
+        @sort-change="sortChange">
         <el-table-column label="#" width="60" type="index" align="center">
           <template slot-scope="scope">
             <span>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
           </template>
         </el-table-column>
 
-        <el-table-column v-for="item in column" :key="item.key" :prop="item.key" :label="item.name" align="center">
+        <el-table-column v-for="item in column" :key="item.key" :prop="item.key" :label="item.name" sortable="custom" align="center">
           <template slot-scope="scope">
             <div v-if="['name', 'eventNumber', 'projectNumber'].includes(item.key)">
-              <el-link @click="handleItem(scope.row,item.key)">{{ scope.row[item.key] }}</el-link>
+              <el-link @click="handleItem(scope.row, item.key)">{{ scope.row[item.key] }}</el-link>
             </div>
-            <div v-else v-html="getColumnData(scope.row,item.key)"></div>
+            <div v-else v-html="getColumnData(scope.row, item.key)"></div>
           </template>
         </el-table-column>
 
         <el-table-column v-if="[1].indexOf(isOperate) == -1" label="操作" align="center" width="150px">
           <template slot-scope="scope">
-            <el-dropdown split-button type="primary" size="small" @click="handleCommand('e',scope.row)"
-              @command="handleCommand($event,scope.row)">
+            <el-dropdown split-button type="primary" size="small" @click="handleCommand('e', scope.row)"
+              @command="handleCommand($event, scope.row)">
               <span>编 辑</span>
               <el-dropdown-menu slot="dropdown" style="text-align:center">
                 <el-dropdown-item>
-                  <el-dropdown @command="handleCommand($event,scope.row)" placement="left-start">
+                  <el-dropdown @command="handleCommand($event, scope.row)" placement="left-start">
                     <span> 专利导入 </span>
                     <el-dropdown-menu style="text-align:center">
                       <el-dropdown-item command="0"> Excel导入 </el-dropdown-item>
@@ -53,13 +54,13 @@
 <script>
 import { workspaceOptions } from "../mixins";
 export default {
-  mixins:[workspaceOptions],
+  mixins: [workspaceOptions],
   props: {
     isOperate: {//控制显示
-      type: [String,Number],
-      default:''
+      type: [String, Number],
+      default: ''
     },
-    
+
     column: {//显示栏位管理数组
       type: Array,
       default: () => {
@@ -126,27 +127,34 @@ export default {
   },
   data() {
     return {
-      
+
     };
   },
   watch: {
-    
+
   },
   mounted() {
-   
+
   },
   methods: {
+    // 排序
+    sortChange({ column, prop, order }) {
+      // this.handleSort({ column, prop, order })
+      // if (!this.row) {
+        this.$emit('on-sort', { column, prop, order })
+      // }
+    },
     // 点击名称等事件
-    handleItem(row,key) {
+    handleItem(row, key) {
       // console.log(row,key);
     },
     // 获取栏位数据
-    getColumnData(row,key) {
+    getColumnData(row, key) {
       if (key == 'projectNumber1') {
         if (row[key]) {
-          var a=''
+          var a = ''
           row[key].forEach(item => {
-            a+=item.name + '</br>'
+            a += item.name + '</br>'
           });
           return a
         } else {
@@ -154,11 +162,10 @@ export default {
         }
       }
     },
-    
-    
+
+
   },
 };
 </script>
-<style lang="scss">
-</style>
+<style lang="scss"></style>
 <style lang="scss" scoped></style>

src/views/project/index.vue

@@ -12,66 +12,66 @@
       </div>
       <div class="height_100">
         <el-container>
-        <el-header>
+          <el-header>
             <div>
-              <mySearch style="width:500px" :SearchFields="searchFiled" @search="search" :searchValue="searchOption" :disabled="!$permission('/workspace/project/check')"></mySearch>  
+              <mySearch style="width:500px" :SearchFields="searchFiled" @search="search" :searchValue="searchOption"
+                :disabled="!$permission('/workspace/project/check')"></mySearch>
             </div>
             <div style="display:flex;margin-right:10px" v-if="[2].indexOf(isOperate) == -1">
-                <div >
-                    <span>分组查询：</span>
-                    <el-select v-model="group" :disabled="!$permission('/workspace/project/check')" clearable size="small" @change="onChange" style="width:200px">
-                        <el-option v-for="item in commonData.QUERY_GROUP" :key="item.value" :label="item.label" :value="parseInt(item.value)">
-                        </el-option>
-                    </el-select>
-                </div>
-                <el-button-group class="margin-left_10">
-                  <el-button :type="queryShowType === '0' ? 'primary' : ''" @click="onChange2('0')" size="small">列表</el-button>
-                  <el-button :type="queryShowType === '1' ? 'primary' : ''" @click="onChange2('1')" size="small">卡片</el-button>
-                </el-button-group>
-                <el-dropdown trigger="click" split-button type="primary" size="small">
-                    <span @click="handleAdd" v-disabled="!$permission('/workspace/project/add')">新增专题库</span>
-                    <el-dropdown-menu slot="dropdown" class="text-align_center">
-                        <el-dropdown-item @click.native="handleExport">导出列表</el-dropdown-item>
-                        <el-dropdown-item @click.native="handleImport" :disabled="!$permission('/workspace/project/import')">导入数据包</el-dropdown-item>
-                        <el-dropdown-item @click.native="handleField">显示栏位管理</el-dropdown-item>
-                    </el-dropdown-menu>
-                </el-dropdown>
+              <div>
+                <span>分组查询：</span>
+                <el-select v-model="group" :disabled="!$permission('/workspace/project/check')" clearable size="small"
+                  @change="onChange" style="width:200px">
+                  <el-option v-for="item in commonData.QUERY_GROUP" :key="item.value" :label="item.label"
+                    :value="parseInt(item.value)">
+                  </el-option>
+                </el-select>
+              </div>
+              <el-button-group class="margin-left_10">
+                <el-button :type="queryShowType === '0' ? 'primary' : ''" @click="onChange2('0')"
+                  size="small">列表</el-button>
+                <el-button :type="queryShowType === '1' ? 'primary' : ''" @click="onChange2('1')"
+                  size="small">卡片</el-button>
+              </el-button-group>
+              <el-dropdown trigger="click" split-button type="primary" size="small">
+                <span @click="handleAdd" v-disabled="!$permission('/workspace/project/add')">新增专题库</span>
+                <el-dropdown-menu slot="dropdown" class="text-align_center">
+                  <el-dropdown-item @click.native="handleExport">导出列表</el-dropdown-item>
+                  <el-dropdown-item @click.native="handleImport"
+                    :disabled="!$permission('/workspace/project/import')">导入数据包</el-dropdown-item>
+                  <el-dropdown-item @click.native="handleField">显示栏位管理</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
             </div>
             <div v-else>
-              <el-button type="primary" @click="handleAdd" v-disabled="!$permission('/workspace/project/add')">新增专题库</el-button>
+              <el-button type="primary" @click="handleAdd"
+                v-disabled="!$permission('/workspace/project/add')">新增专题库</el-button>
             </div>
-        </el-header>
-        <el-main class="workspace-main" >
+          </el-header>
+          <el-main class="workspace-main">
             <div v-loading="loading">
-                <component :is="viewType" v-bind="$attrs" v-on="$listeners" :isOperate="isOperate" :tableData="dataList" :common-data="commonData" :group="group" :params="queryParams" :field="fieldList" @option="handleOption" @sort="handleSort"></component>
+              <component :is="viewType" v-bind="$attrs" v-on="$listeners" :isOperate="isOperate" :tableData="dataList"
+                :common-data="commonData" :group="group" :params="queryParams" :field="fieldList" @option="handleOption"
+                @on-sort="handleSort"></component>
             </div>
-          <div class="pagination"  v-if="[2].indexOf(isOperate) == -1">
-            <el-pagination
-                backgroundx
-                layout="total, prev, pager, next, jumper"
-                :current-page.sync="queryParams.current"
-                :page-size.sync="queryParams.size"
-                @current-change="handleCurrentChange"
-                :total="total">
-            </el-pagination>
-          </div>
-        </el-main>
-        <el-footer class="pagination" v-if="[2].indexOf(isOperate) != -1 ">
-          <el-pagination
-                backgroundx
-                layout="total, prev, pager, next, jumper"
-                :current-page.sync="queryParams.current"
-                :page-size.sync="queryParams.size"
-                @current-change="handleCurrentChange"
-                :total="total">
+            <div class="pagination" v-if="[2].indexOf(isOperate) == -1">
+              <el-pagination backgroundx layout="total, prev, pager, next, jumper"
+                :current-page.sync="queryParams.current" :page-size.sync="queryParams.size"
+                @current-change="handleCurrentChange" :total="total">
+              </el-pagination>
+            </div>
+          </el-main>
+          <el-footer class="pagination" v-if="[2].indexOf(isOperate) != -1">
+            <el-pagination backgroundx layout="total, prev, pager, next, jumper" :current-page.sync="queryParams.current"
+              :page-size.sync="queryParams.size" @current-change="handleCurrentChange" :total="total">
             </el-pagination>
-        </el-footer>
-      </el-container>
+          </el-footer>
+        </el-container>
       </div>
-      
+
     </div>
-    <project-form-drawer  @submit="submitProjectForm" :common-data="commonData" ref="projectFormDrawer" />
-    <field ref="field" ></field>
+    <project-form-drawer @submit="submitProjectForm" :common-data="commonData" ref="projectFormDrawer" />
+    <field ref="field"></field>
   </div>
 </template>
 
@@ -80,6 +80,7 @@ import { mapGetters } from 'vuex'
 import TotalChart from "./components/TotalChart";
 import Table from "./components/view/table.vue";
 import Card from "./components/view/card.vue";
+import mergeTable from "./components/view/MergeTable.vue";
 
 import ProjectFormDrawer from './components/drawer/form.vue'
 import field from '@/views/components/dialog/fields.vue';
@@ -89,14 +90,15 @@ export default {
     Table,
     Card,
     ProjectFormDrawer,
-    field
+    field,
+    mergeTable,
   },
   props: {
-   isOperate:''
+    isOperate: ''
   },
   data() {
     return {
-        //检索字段
+      //检索字段
       searchFiled: [
         {
           label: "项目名称",
@@ -128,50 +130,50 @@ export default {
         name: localStorage.searchContent,
       },
       //专题库数据总数
-      total:0,
+      total: 0,
       //分页信息
       queryParams: {
         size: 10,
         current: 1,
       },
       //排序
-      sort:[
+      sort: [
         {
           "orderBy": "createTime",
           "orderType": 1
         }
       ],
       //分组
-      group:'',
+      group: '',
       //字典项
-      commonData:{},
+      commonData: {},
       //展示的视图
       queryShowType: '0',
       //显示的视图组件
       viewType: 'Table',
       //加载
-      loading:false,
-      //专题库数据集合
-      dataList:[],
+      loading: false,
+      //专题库数据集合//分组及不分组公用此变量
+      dataList: [],
       //栏位集合
-      fieldList:[],
+      fieldList: [],
     };
   },
   watch: {},
   computed: {
     ...mapGetters(['userinfo'])
   },
-  created() {},
+  created() { },
   mounted() {
     //获取字典项（接口还是通过字典获取）
     this.$api.getCommonData({ keys: 'QUERY_GROUP,ENTERPRISE_APPLICATION_SCENARIO,INVESTIGATION_TYPE' }).then(response => {
       this.commonData = response.data
     })
     //获取应用场景统计
-    if([2].indexOf(this.isOperate) == -1){
+    if ([2].indexOf(this.isOperate) == -1) {
       this.getScenarioAndTypeTotal();
     }
-    
+
     //获取专题库列表
     this.getList()
   },
@@ -184,59 +186,127 @@ export default {
       });
     },
     //检索
-    search(){
-
+    search(val) {
+      let params = {}
+      val.forEach(item => {
+        if (item.type == 3) {
+          params[item.value] = item.searchValue.map(itemValue => {
+            return itemValue.value
+          })
+        } else {
+          params[item.value] = item.searchValue.label
+        }
+      })
+      // 返回字符串
+      this.searchOption.searchQuery = this.$commonJS.objectToString(params)
+      // 调用查询接口
+      this.queryParams.current = 1
+      this.isGrouping()
     },
-    //获取专题库列表
+    //获取专题库列表/卡片数据
     getList() {
-      if (this.group) {
-        this.queryParams.size = 99999
-      } else {
-        this.queryParams.size = this.queryShowType === '0' ? 10 : 12
-      }
+      this.queryParams.size = this.queryShowType === '0' ? 10 : 12
       var params = this.queryParams
-        params = {
-          ...this.queryParams,
-          ...this.searchOption
-        }
+      params = {
+        ...this.queryParams,//分页信息
+        ...this.searchOption,//检索条件
+        ...this.sort,//排序
+      }
+      this.loading = true
+      this.$api.getProjectListV2(params).then(response => {
+        this.dataList = response.data.records
+        this.total = response.data.total
+        this.loading = false
+      }).catch(error => {
+        this.dataList = [{}, {}]
+        this.total = 0
+        this.loading = false
+      })
+    },
+    // 获取分组数据
+    getGrouping() {
+      let params = {
+        ...this.queryParams,//分页信息
+        ...this.searchOption,//检索条件
+        ...this.sort,//排序
+        group: this.group,//分组的值
+      }
       this.loading = true
       this.$api.getProjectListV2(params).then(response => {
-        // console.log(response.data.records,'8888888');
         this.dataList = response.data.records
         this.total = response.data.total
         this.loading = false
-      }).catch(error=>{
-        this.dataList = [{},{}]
+      }).catch(error => {
+        this.dataList = [{}, {}]
         this.total = 0
         this.loading = false
       })
     },
+    //排序
+    handleSort({ column, prop, order, str }) {
+      this.sort=[]//如需要多个字段排序，则不需要清空
+      if (order == 'null') {
+        return;
+      }
+      var orderType = {
+        ascending: 0,
+        descending:1
+      }
+      var params = this.sort.find(item => {
+        return item.orderBy == prop
+      })
+      if (params) {
+        params.orderType = orderType[order]
+      } else {
+        params = {}
+        params.orderBy = prop
+        params.orderType = orderType[order]
+        this.sort.push(params)
+      }
+      this.queryParams.current = 1
+      //1表示展开行2表示基础表格
+      if (str == '1') {
+        this.getGrouping()
+      } else {//table排序
+        this.getList()
+      }
+    },
     //分页
     handleCurrentChange(val) {
       this.queryParams.current = val;
-      this.getList();
+      this.isGrouping();
     },
-    //切换分组
-    onChange() {
+    //切换到分组
+    onChange(val) {
+      if (val != '') {
+        this.viewType = 'mergeTable'
+      } else {
+        this.viewType = 'Table'
+      }
       this.queryParams.current = 1
-      this.getList()
-      this.handleChangeView()
+      this.queryParams.size = 10
+      this.isGrouping()//区分是否分组，调用不同请求数据
     },
-    //切换视图
-    onChange2(type) {
-      this.queryShowType = type
-      this.onChange()
+    // 区分是否为分组
+    isGrouping() {
+      if (this.group != '') {//分组
+        this.getGrouping()
+      } else {//不分组
+        this.getList()
+      }
     },
-    handleChangeView() {
-      let view = [
-          ['Table', 'Card'],
-          ['MergeTable', 'MergeCard'],
-      ]
-      if (!this.group) {
-        this.viewType = view[0][this.queryShowType]
-      } else {
-        this.viewType = view[1][this.queryShowType]
+    //切换table、卡片视图
+    onChange2(type) {
+      this.group = ''
+      if (type == '0') {//type为0时是table页面
+        this.viewType = 'Table'
+      } else {//type为1时是卡片页面
+        this.viewType = 'Card'
       }
+      this.queryShowType = type
+      this.queryParams.current = 1
+      this.getList()
+      // this.onChange()
     },
     //新增专题库
     handleAdd() {
@@ -250,7 +320,7 @@ export default {
       }, '新增专题库')
     },
     //确认提交专题库信息
-    submitProjectForm(){},
+    submitProjectForm() { },
     //导出列表
     handleExport() {
       this.btnLoading = true
@@ -318,53 +388,57 @@ export default {
       }
     },
     //编辑专题库
-    handleEdit(row){
+    handleEdit(row) {
       this.$refs.projectFormDrawer.open(JSON.parse(JSON.stringify(row)), '编辑专题库')
     },
-    //排序
-    handleSort(sort) {
-      this.sort = { ...sort }
-      this.getList()
-    },
+   
   },
 };
 </script>
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
 <style lang="scss">
- 
 .workspace {
   .workspace-card {
     min-height: calc(100% - 3px);
+
     // padding-bottom: 15px;
     .workspace-main {
       padding-top: 10px;
       width: 100%;
     }
-    .el-card__body{
+
+    .el-card__body {
       height: 100%;
     }
   }
+
   .nopadding .el-card__body {
     padding: 0 !important;
   }
+
   .query-top {
     border-bottom: 1px solid #bbb;
     padding-bottom: 10px;
+
     .el-collapse {
       border-bottom: 0 !important;
       border-top: 0 !important;
-      .el-collapse-item__wrap, .el-collapse-item__header {
+
+      .el-collapse-item__wrap,
+      .el-collapse-item__header {
         border-bottom: 0 !important;
       }
+
       .el-collapse-item__header {
         padding-left: 15px;
         font-weight: bold;
       }
+
       .is-active .el-collapse-item__wrap {
         border-top: 1px solid #bbb;
       }
     }
+
     .chart-box {
       height: 250px;
     }