|
@@ -0,0 +1,286 @@
|
|
|
+<template>
|
|
|
+ <div class="indicia">
|
|
|
+ <div style="padding: 20px;">
|
|
|
+ <div class="indicia-top-components">
|
|
|
+ <div>
|
|
|
+ <el-select v-model="screenValue" size="small" class="indicia-top-select">
|
|
|
+ <el-option v-for="item in screenOptions" :key="item.value" :label="item.label" :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <template v-if="screenValue != 'date'">
|
|
|
+ <el-input v-model="screenInputValue" :placeholder="getPlaceholder()" size="small"
|
|
|
+ style="margin-left: 10px;width: 200px;"></el-input>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <el-date-picker v-model="screenInputValue" value-format="yyyy-MM-dd" size="small" type="date" :placeholder="getPlaceholder()" style="margin-left: 10px;width: 200px;"></el-date-picker>
|
|
|
+ <!-- <el-date-picker v-model="screenInputValue.end" value-format="yyyy-MM-dd" size="small" type="date" :placeholder="getPlaceholder()" style="margin-left: 10px;width: 200px;"></el-date-picker> -->
|
|
|
+ </template>
|
|
|
+ <el-button size="small" type="primary" @click="screenBtn" class="indicia-top-button">搜 索</el-button>
|
|
|
+ <template v-if="searchOptions.length>0">
|
|
|
+ <el-popover placement="bottom" title="" width="200" trigger="hover" class="margin-left_10">
|
|
|
+ <div v-for="(item, index) in searchOptions" :key="index" class="workspace-content-header-query-box">
|
|
|
+ <el-tag closable type="success" @close="handleDelete(item,index)" style="margin-bottom: 5px;">
|
|
|
+ {{ item.label +':'+ item.content}}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ <!-- <el-button style="" >
|
|
|
+ 检索条件<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
+ </el-button> -->
|
|
|
+ <span slot="reference" size="small" type="primary" style="font-size: 14px;"> 检索信息:({{ searchOptions[0].label +':'+searchOptions[0].content }}<i class="el-icon-arrow-down el-icon--right"></i>)</span>
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>分组查询:</span>
|
|
|
+ <el-select v-model="groupingValue" size="small" @change="changeGrouping" class="indicia-top-select">
|
|
|
+ <el-option v-for="item in groupingOption" :key="item.value" :label="item.label" :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <!-- <el-button size="small" type="primary" @click="importBtn" class="indicia-top-button">导 出</el-button> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- table及collapse组件 -->
|
|
|
+ <div class="indicia-components" :style="{'height': sonHeight + 'px'}">
|
|
|
+ <component :dataArr="tableCollapseList" :collapseList="collapseList" :queryParams="queryParams" :sonHeight="sonHeight"
|
|
|
+ @collapseVal="collapseVal" :is="componentType" :loading="loading" :componentType="componentType">
|
|
|
+ </component>
|
|
|
+ </div>
|
|
|
+ <!-- collapse分页 -->
|
|
|
+ <div style="text-align: center;">
|
|
|
+ <el-pagination background layout="total, prev, pager, next, jumper" :current-page.sync="queryParams.current"
|
|
|
+ :page-size.sync="queryParams.size" @current-change="handleCurrentChange" :total="total" >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import indiciaCard from './card.vue'
|
|
|
+import indiciaCollapse from './collapse.vue'
|
|
|
+import { importExcel } from './mixins'
|
|
|
+// import { downLoad2 } from "@/utils";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ indiciaCollapse,
|
|
|
+ indiciaCard,
|
|
|
+ },
|
|
|
+ mixins:[importExcel,],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ componentType: 'indiciaCard',//切换组件,默认card组件
|
|
|
+ screenOptions: [
|
|
|
+ {
|
|
|
+ label: '标注',
|
|
|
+ value: 'remark',
|
|
|
+ placeholder: '请输入标注',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '专利号',
|
|
|
+ value: 'patentNo',
|
|
|
+ placeholder: '请输入专利号',
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // label: '标注的位置',
|
|
|
+ // value: 'address',
|
|
|
+ // placeholder: '请输入标注的位置'
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ label: '标注人',
|
|
|
+ value: 'name',
|
|
|
+ placeholder: '请输入标注人',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '标注时间',
|
|
|
+ value: 'date',
|
|
|
+ placeholder: '请选择标注时间',
|
|
|
+ },
|
|
|
+ ],//筛选
|
|
|
+ groupingOption: [
|
|
|
+ {
|
|
|
+ label: '不分组',
|
|
|
+ value: 'noGrouping',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '专利号',
|
|
|
+ value: 'patentNo',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '标注人',
|
|
|
+ value: 'name',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '标注时间',
|
|
|
+ value: 'date',
|
|
|
+ },
|
|
|
+ ],//分组
|
|
|
+ screenValue: 'remark',//筛选的值
|
|
|
+ screenInputValue: '',//筛选输入的值
|
|
|
+ groupingValue: 'noGrouping',//分组的值
|
|
|
+ queryParams: {
|
|
|
+ current: 1,
|
|
|
+ size: 10,
|
|
|
+ },
|
|
|
+ total: 0,
|
|
|
+ tableCollapseList: [],//获取的数据
|
|
|
+ collapseList: [],//collapse数据
|
|
|
+ sonHeight: document.documentElement.clientHeight -230,//页面高度
|
|
|
+ loading: false,
|
|
|
+ searchOptions:[],//检索条件
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 请求card数据
|
|
|
+ getList(val) {
|
|
|
+ this.loading = true
|
|
|
+ if (val) {
|
|
|
+ let a=this.searchOptions.filter(item => {
|
|
|
+ return item.value!=this.queryParams.grouping
|
|
|
+ })
|
|
|
+ a.push({ value: this.queryParams.grouping, content: val })
|
|
|
+ var params = {
|
|
|
+ search:a
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ var params = {
|
|
|
+ //...扩展、展开
|
|
|
+ ...this.queryParams,
|
|
|
+ search:this.searchOptions,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$api.queryScratchS(params).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.tableCollapseList = res.data.records
|
|
|
+ if (!val) {
|
|
|
+ this.total=res.data.total
|
|
|
+ }
|
|
|
+ this.loading=false
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.tableCollapseList = []
|
|
|
+ if (!val) {
|
|
|
+ this.total=0
|
|
|
+ }
|
|
|
+ this.loading=false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 查询分组
|
|
|
+ getCollapse() {
|
|
|
+ this.loading = true
|
|
|
+ let params = {
|
|
|
+ //...扩展、展开
|
|
|
+ search:this.searchOptions,
|
|
|
+ ...this.queryParams,
|
|
|
+ }
|
|
|
+ this.$api.queryGroupScratchS(params).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.collapseList = res.data.records
|
|
|
+ this.total=res.data.total
|
|
|
+ this.loading = false
|
|
|
+ if (this.collapseList.length > 0) {
|
|
|
+ this.getList(this.collapseList[0][this.queryParams.grouping])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.collapseList = []
|
|
|
+ this.total=0
|
|
|
+ this.loading=false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 判断是查询分组还是只检索
|
|
|
+ isCollapse() {
|
|
|
+ if (this.componentType == 'indiciaCard') {
|
|
|
+ this.getList()
|
|
|
+ } else {
|
|
|
+ this.getCollapse()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 搜索事件
|
|
|
+ screenBtn() {
|
|
|
+ this.editSearchOptions()
|
|
|
+ this.isCollapse()
|
|
|
+ this.screenInputValue=''
|
|
|
+ },
|
|
|
+ // 修改检索数组
|
|
|
+ editSearchOptions() {
|
|
|
+ this.searchOptions.push(
|
|
|
+ {
|
|
|
+ value: this.screenValue,
|
|
|
+ label: this.screenOptions.find(item => { return item.value == this.screenValue }).label,
|
|
|
+ content: this.screenInputValue,
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ // 分组监听事件
|
|
|
+ changeGrouping(val) {
|
|
|
+ this.queryParams.current = 1
|
|
|
+ if (val == 'noGrouping') {//不分组
|
|
|
+ this.componentType='indiciaCard'
|
|
|
+ } else {
|
|
|
+ this.componentType = 'indiciaCollapse'
|
|
|
+ this.queryParams.grouping = val
|
|
|
+ }
|
|
|
+ this.isCollapse()
|
|
|
+ },
|
|
|
+ // 分页
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.queryParams.current = val
|
|
|
+ this.isCollapse()
|
|
|
+ },
|
|
|
+ // 获取输入框提示信息
|
|
|
+ getPlaceholder() {
|
|
|
+ let a = this.screenOptions.filter(item => {
|
|
|
+ return item.value == this.screenValue
|
|
|
+ })
|
|
|
+ return a[0].placeholder
|
|
|
+ },
|
|
|
+ // 删除检索条件
|
|
|
+ handleDelete(val,index) {
|
|
|
+ this.searchOptions.splice(index, 1)
|
|
|
+ this.isCollapse()
|
|
|
+ },
|
|
|
+ // 子组件
|
|
|
+ collapseVal(val) {
|
|
|
+ this.getList(val)
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.indicia {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ min-width: 950px;
|
|
|
+ background: white;
|
|
|
+
|
|
|
+ .indicia-top-components {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ // padding-right: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .indicia-top-select {
|
|
|
+ width: 150px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .indicia-top-button {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .indicia-components {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ overflow: auto;
|
|
|
+ // padding-right: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|