xiaoshi_system/src/views/patentMining/components/viewIndex.vue

<template>
  <div class="patentMiningIndex">
    <el-container>
      <el-header>
        <div>
          <mySearch style="width:500px" :SearchFields="searchFiled" @search="search" :searchValue="searchOption"
            :disabled="!$permission('/workspace/project/check')"></mySearch>
        </div>
        <div style="display:flex;margin-right:10px">
          <el-button-group class="margin-left_10" v-if="[2].indexOf(isOperate) == -1">
            <el-button :type="viewType === 'commonTable' ? 'primary' : ''" @click="onChange2('commonTable')"
              size="small">列表</el-button>
            <el-button :type="viewType === 'commonCard' ? 'primary' : ''" @click="onChange2('commonCard')"
              size="small">卡片</el-button>
          </el-button-group>
          <el-dropdown trigger="click" split-button type="primary" size="small" @command="handleCommand($event)">
            <span @click="handleAdd">创建项目</span>
            <el-dropdown-menu slot="dropdown" class="text-align_center">
              <el-dropdown-item command="0">显示栏位管理</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-main>
        <component :is="viewType" v-bind="$attrs" v-on="$listeners" :isOperate="isOperate" :tableData="dataList" :column="columnList"
          :group="group" :queryParams="queryParams" @option="handleOption" @sort="handleSort"></component>
      </el-main>
      <el-footer class="pagination">
        <div>
          <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>
      </el-footer>
    </el-container>
    <addAndEditProject ref="addAndEditProject" @isSuccess="isSuccess"></addAndEditProject>
    <fields ref="field" type="patentDigProject" @getFieldList="getFieldList"></fields>
  </div>
</template>
  
<script>
import commonTable from './view/commonTable.vue';
import addAndEditProject from './dialog/addAndEditProject.vue';
import fields from '@/views/components/dialog/fields.vue';
export default {
  components: {
    commonTable,
    addAndEditProject,
    fields,
  },
  props: {
    isOperate: ''
  },
  data() {
    return {
      //当前组件名称
      viewType: 'commonTable',
      //专利挖掘项目数据集合
      dataList: [],
      //分页
      queryParams: {
        size: 10,
        current: 0,
      },
      //当前分组的值
      group: '',
      // 分组字段数组
      groupingOption:[],
      //排序
      sort: [ { "orderBy": "createTime", "orderType": 1 } ],
      //总数
      total: 0,
      //检索字段
      searchFiled: [
        {
          label: '项目名称',
          value: 'name',
          type: 1,
          placeholder: '请输入项目名称'
        },
        {
          label: '创建人',
          value: 'createPerson',
          type: 1,
          placeholder: '请输入创建人名称'
        },
      ],
      //检索条件
      searchOption: {},
      // table栏位信息
      columnList: [],
      // 获取
    };
  },
  watch: {},
  computed: {},
  created() { },
  async mounted() {
    // 获取table栏位
    this.columnList = await this.$commonJS.getCustomField('patentDigProject')
    //获取检索、分组字段
    await this.getColumn()
    // 获取table数据
    this.getList()
  },
  methods: {
    //显示栏位管理
    getFieldList(data){
      this.columnList = data
    },
    // 获取检索及分组栏位
    async getColumn() {
      let params = ['patentDigProject']
      await this.$api.getParamsCommon(params).then(res => {
        if (res.code == 200) {
          let conditionDTOList = JSON.parse(JSON.stringify(res.data[0].conditionDTOList))
          // 分组字段
          this.groupingOption = this.$commonJS.getField(conditionDTOList, (u) => u.ifGroup == true, {
            name: 'name',
            value: 'value',
          })
          // 检索字段
          this.searchFiled = this.$commonJS.getField(conditionDTOList, (u) => u.ifSearch == true, {
            label: 'name',
            value: 'value',
            type: 'type',
          })
          //为array类型添加选项
          // var obj = this.searchFiled.find(item => { return item.label == '应用场景' })
          // if (obj) {
          //   obj.options = this.scene.map(item => {
          //     return {
          //       label: item.name,
          //       value: item.id
          //     }
          //   })
          // }
        }
      })
      this.showView = false
      this.$nextTick(() => {
        this.showView = true
      })
    },
    // 新增、编辑成功信息
    isSuccess(val) {
      this.getList()
    },
    //获取检索组件传过来的数据
    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=params
      // 调用查询接口
      this.queryParams.current = 1
      this.getList()
    },
    //排序
    handleSort({ column, prop, order }) {
      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
      this.getList()
    },
    //分页
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
    //获取专利挖掘项目数据列表
    getList() {
      let params = {
        ...this.queryParams,//分页信息
        searchQuery: this.$commonJS.objectToString(this.searchOption.searchQuery || {}),//检索条件
        orderDTOList: this.sort,//排序
      }
      this.$api.queryPatentDigProject(params).then(res => {
        if (res.code == 200) {
          this.dataList = res.data.data
          this.total = res.data.total
        }
      }).catch(error => {
        this.dataList = []
        this.total = 0
        this.$message.error(error.message)
      })
    },
    //创建项目按钮，添加其他企业专利数据库
    handleAdd() {
      this.$refs.addAndEditProject.open()
    },
    // 创建项目按钮下拉菜单内容
    handleCommand(ev) {
      switch (ev) {
        case '0'://显示栏位管理
          this.$refs.field.open(this.columnList)
          break;
      
        default:
          break;
      }
    },
    //切换视图
    onChange2(val) {
      this.viewType = val
      this.queryParams.current=1
      this.getList()
    },
    //操作列
    handleOption({ option, row }) {
      switch (option) {
        case '0'://设置定时任务
          // this.$refs.addAndEditDB.open(row, true)
          break;
        case '1'://删除
          this.projectDelete(row)
          break;
        case 'e'://编辑
          this.$refs.addAndEditProject.open(row)
          break;
      }
    },
    // 删除项目
    projectDelete(row) {
      this.projectDeletes([row.id])
    },
    // 删除项目
    projectDeletes(ids,isLast) {
      this.$confirm('此操作将删除该项目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.deletePatentDigProject(ids).then(res => {
          if (res.code == 200) {
            // if(isLast){
            //   this.isGrouping()
            // }else{
            this.getList()
          // }
            // this.handleMessage = '删除成功'
            // this.clearMessage()
            this.$message.success('删除成功!');
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.patentMiningIndex {
  height: 100%;
}
</style>