xiaoshi_system/src/views/project/index.vue

<template>
  <div class="workspace height_100">
    <div shadow="never" class="workspace-card nopadding height_100">
      <div class="query-top" v-if="[2].indexOf(isOperate) == -1">
        <el-collapse>
          <el-collapse-item title="图表预览" name="1">
            <div class="chart-box">
              <total-chart ref="totalChart" />
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="height_100">
        <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" 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 groupingOption" :key="item.value" :label="item.name"
                    :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>
            </div>
          </el-header>
          <el-main class="workspace-main">
            <div v-loading="loading">
              <component v-if="showView" :is="viewType" v-bind="$attrs" v-on="$listeners" :isOperate="isOperate" :tableData="dataList" :group="group" :queryParams="queryParams" :column="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">
            </el-pagination>
          </el-footer>
        </el-container>
      </div>

    </div>
    <project-form-drawer @submit="getMessage" :common-data="commonData" ref="projectFormDrawer" />
    <field ref="field" type="patentProject" @getFieldList="getFieldList"></field>
    <customField ref="customField"></customField>
  </div>
</template>

<script>
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';

import customField from '@/views/components/drawer/Field.vue';
export default {
  components: {
    TotalChart,
    Table,
    Card,
    ProjectFormDrawer,
    field,
    mergeTable,
    customField
  },
  props: {
    isOperate: ''
  },
  data() {
    return {
      //检索字段
      searchFiled: [
        {
          label: "项目名称",
          value: "name",
          type: 1,
          placeholder: "请输入项目名称",
        },
        {
          label: "技术主题",
          value: "technicalTheme",
          type: 1,
          placeholder: "请输入技术主题",
        },
        {
          label: "负责部门",
          value: "departmentId",
          type: 3,
          placeholder: "请选择负责部门",
        },
        {
          label: "内部案卷",
          value: "innerFile",
          type: 1,
          placeholder: "请输入内部案卷",
        },
      ],
      //检索条件
      searchOption: {
        name: localStorage.searchContent,
      },
      //专题库数据总数
      total: 0,
      //分页信息
      queryParams: {
        size: 10,
        current: 1,
      },
      //排序
      sort: [
        {
          "orderBy": "createTime",
          "orderType": 1
        }
      ],
      //分组集合
      groupingOption:[],
      //分组
      group: '',
      //展示的视图
      queryShowType: '0',
      //显示的视图组件
      viewType: 'Table',
      //加载
      loading: false,
      //专题库数据集合//分组及不分组公用此变量
      dataList: [],
      //栏位集合
      fieldList: [],
      //接受子组件消息
      handleMessage:'',
      //显示视图
      showView: false,
    };
  },
  watch: {},
  computed: {
    ...mapGetters(['userinfo']),
    commonData(){
      var a = this.$store.state.dictMessage.scenario.map(item=>{
        return {
          label:item.name,
          value:item.id
        }
      })
      var obj = this.searchFiled.find(item=>{return item.label == '应用场景'})
      if(obj){
        obj.options = a
      }
      return this.$store.state.dictMessage.scenario || []
    }
  },
  created() { },
  async mounted() {
    this.fieldList = await this.$commonJS.getCustomField('patentProject')
    //获取检索字段和分组字段
    this.getColumn()
    //获取应用场景统计
    // if ([2].indexOf(this.isOperate) == -1) {
    //   this.getScenarioAndTypeTotal();
    // }

    //获取专题库列表
    this.getList()
    this.showViews()
  },
  methods: {
    //显示视图?
    showViews() {
      this.showView = false
      this.$nextTick(() => {
        this.showView = true
      })
    },
    //获取自定义栏位
    getFieldList(data){
      this.fieldList  = data
    },
    //获取检索字段和分组字段
    async getColumn() {
      let params = ['patentProject']
      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',
          })
          var obj = this.searchFiled.find(item=>{return item.label == '应用场景'})
          if(obj){
            obj.options = this.commonData.map(item=>{
              return {
                label:item.name,
                value:item.id
              }
            })
          }
        }
      })
      this.showView = false
      this.$nextTick(() => {
        this.showView = true
      })
    },
    //获取应用场景统计
    getScenarioAndTypeTotal() {
      this.$api.getScenarioAndTypeTotal().then((response) => {
        this.queryTotal = response.data;
        this.$refs.totalChart.initData(response.data);
      });
    },
    //检索
    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 = params
      // 调用查询接口
      this.queryParams.current = 1
      this.isGrouping()
    },
    //获取专题库列表/卡片数据
    getList() {
      this.queryParams.size = this.queryShowType === '0' ? 10 : 12
      var params = this.queryParams
      params = {
        ...this.queryParams,//分页信息
        searchQuery:this.$commonJS.objectToString(this.searchOption),//检索条件
        orderDTOList:this.sort,//排序
      }
      this.loading = true
      this.$api.queryPatentProject(params).then(response => {
        this.dataList = response.data.data
        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,//检索条件
        orderDTOList:this.sort,//排序
        group: this.group,//分组的值
      }
      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
      })
    },
    //排序
    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.isGrouping();
    },
    //切换到分组
    onChange(val) {
      if (val != '') {
        this.viewType = 'mergeTable'
      } else {
        this.viewType = 'Table'
      }
      this.queryParams.current = 1
      this.queryParams.size = 10
      this.isGrouping()//区分是否分组，调用不同请求数据
    },
    // 区分是否为分组
    isGrouping() {
      if (this.group != '') {//分组
        this.getGrouping()
      } else {//不分组
        this.getList()
      }
    },
    //切换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() {
      this.$refs.projectFormDrawer.open({
        ifUpdate: false,
        updateTime: 'day',
        crons:'',
        status: '0',
        sort: 1,
        matterIds: [],
        scenarioIds: []
      }, '新增专题库')
    },
    //确认提交专题库信息
    getMessage(val) {
      this.handleMessage = val
      this.getList()
     },
     clearMessage(){
      this.$nextTick(()=>{
        this.handleMessage = ''
      })
     },
    //导出列表
    handleExport() {
      this.btnLoading = true
      this.$api.exportProjectList().then(response => {
        downLoad(response, getFileName('xlsx'))
        this.btnLoading = false
      }).catch(error => {
        this.btnLoading = false
      })
    },
    //导入数据包
    handleImport() {
      this.$refs.projectImport.open()
    },
    //显示栏位管理
    handleField() {
      this.$refs.field.open(this.fieldList)
    },
    //操作列
    handleOption({ option, row }) {
      switch (option) {
        case '0'://Excel导入
          this.handleExcelImport(row)
          break
        case '1'://专利号导入
          break
        case '2'://检索条件导入
          this.handleFile(row, 1)
          break
        case '3'://任务清单
          this.handleFile(row, 0)
          break
        case '5'://报告管理
          break
        case '6'://产品架构
          break
        case '7'://事件
          break
        case '8'://其他附件
          break;
        case '9'://项目分享
          break;
        case '10'://删除
          this.deletes(row)
          break
        case 'e'://编辑
          this.handleEdit(row)
          break
        case '11':
          this.$refs.customField.open(row.id)
          break;
      }
    },
    //获取删除的id
    deletes(row){
      this.deletePatentProject([row.id])
    },
    //删除专题库
    deletePatentProject(ids){
      this.$confirm('此操作将删除该产品类别, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.deletePatentProject(ids).then(response=>{
          if(response.code == 200){
            this.handleMessage = '删除成功'
            this.$message.success('删除成功!');
            if(!this.group){
              this.getList()
            }
            this.clearMessage()
          }
        })
      })
      
    },
    //编辑专题库
    handleEdit(row) {
      this.$refs.projectFormDrawer.open(JSON.parse(JSON.stringify(row)), '编辑专题库')
    },
   
  },
};
</script>
<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 {
      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 {
        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;
    }
  }
}
</style>