vue管理系统 页面模板

<template>
  <div class="bottom-project-pool">
    <div class="operate mb20">
      <div class="top dfac">
        <div class="btns left fs14">
          <button class="fullin-btn mr14" @click="addProject">添加人物</button>
          <button class="fullin-btn mr14" @click="deleteProject">删除</button>
          <button class="common-btn" @click="exportProject">导出</button>
          <single-search
            class="ml14"
            placeholder="人物姓名/手机号/公司名称"
            @triggerSearch="handleKeywordsChange"
          ></single-search>
        </div>
        <div class="right dfac">
          <div class="ml30 hand f-blue" @click="openFilter = !openFilter">
            <div v-if="!openFilter">
              <i class="iconfont icon-touxiangxiala"></i>展开筛选
            </div>
            <div v-else><i class="iconfont icon-shouqi"></i>收起筛选</div>
          </div>
        </div>
      </div>
      <div
        class="filter-wrap mt12 stl"
        v-show="openFilter"
        :style="filterStyle"
      >
        <rounds-filter
          label="关系维护人"
          :activeArr="activeArrObj.person"
          @result="handleResult"
        />
        <RadioFilter
          label="联系方式"
          type="radio"
          :tags="tags"
          :activeIndex="activeIndex"
          @handleActiveIndex="handleActiveIndustry"
          class="mb5"
        />
        <result-filter :activeArrObj="activeArrObj" @result="handleResult" />
      </div>

      <el-table
        v-loading="loading"
        :data="dataList"
        @selection-change="handleSelectionChange"
        style="width: 100%; margin-top: 20px"
        border
      >
        <el-table-column
          type="selection"
          align="center"
          width="40"
        ></el-table-column>
        <el-table-column label="姓名" align="center" width="100">
          <template v-slot="{ row }">{{ row.nickname }}</template>
        </el-table-column>
        <el-table-column label="公司名称" width="100">
          <template v-slot="{ row }">
            <div
              class="hand f-blue ellipsis"
              v-goto.new.entcom="row.product_id"
            >
              {{ row.product || '-' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="职位" align="center" width="120">
          <template v-slot="{ row }">{{ row.deal_status || '-' }}</template>
        </el-table-column>
        <el-table-column label="性别" align="center" width="80">
          <template v-slot="{ row }">{{ row.nick || '-' }}</template>
        </el-table-column>
        <el-table-column label="联系方式" align="center" width="130">
          <template v-slot="{ row }">{{ row.phone || '-' }}</template>
        </el-table-column>
        <el-table-column label="关系维护人" align="center" width="140">
          <template v-slot="{ row }">{{ row.person || '-' }}</template>
        </el-table-column>
        <el-table-column
          label="擅长领域"
          align="center"
          show-overflow-tooltip
          min-width="100"
        >
          <template v-slot="{ row }">{{ row.lingyu || '-' }}</template>
        </el-table-column>
        <el-table-column label="纪要" align="center" width="80">
          <template v-slot="{ row }">
            <span @click="handleShowSummary(row)" class="hand f-blue"
              >纪要({{ row.summary_num || '0' }})</span
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template v-slot="{ row }">
            <i
              class="fs13 iconfont icon-BPguanli-xiugaizhuangtai hand f-hblue"
            ></i>
            <i class="hand f-hblue fs13 iconfont icon-shanchu ml12"></i>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 导出弹框 -->
    <!-- <el-dialog
      title="选择导出字段"
      class="export-dialog"
      :visible.sync="exportDialog.isShow"
      width="800px">
      <div class="p30 pt20">
        <div class="tip fc6 mb20">{{`共选择了${exportDialog.count}个项目`}}</div>
        <el-checkbox-group v-model="exportDialog.fields">
          <el-checkbox
            v-for="(item, index) in exportFields"
            :key="index"
            :label="item"
          ></el-checkbox>
        </el-checkbox-group> -->
    <!--<div class="tip-bottom fc9 fs12 mt20 mb20">*执行情况只导出最后一条</div>-->
    <!-- <div class="btns mt30 tc">
          <button @click="doExport" class="fullin-btn fs13">导出</button>
        </div>
      </div>
    </el-dialog> -->

    <!-- <download-file
      ref="exportFile"
      :export-url="exportBottomProjectUrl"
    ></download-file> -->
  </div>
</template>

<script>
// import MultiFilter from '@/views/components/MultiFilter'
import SingleSearch from '@/views/components/SingleSearch'
import RoundsFilter from '../../components/filters/RoundsFilterXdf.vue'
import ResultFilter from '../../components/filters/ResultFilter.vue'
import { RadioFilter } from '@/components/_qmpComponents'
import { phone } from '@/utils/globalData.js'
import mixin from '../invest/mixin'
// import DownloadFile from '../../../components/DownloadFile'
// import GetConfig from '@/mixins/getConfig'
export default {
  data() {
    return {
      openFilter: false,
      loading: false,
      dataList: [
        {
          nickname: '马云',
          product: '阿里巴巴',
          deal_status: 'CEO',
          nick: '男',
          phone: '12345555',
          person: '张三，李四',
          lingyu: '教育，医疗',
          summary_num: 6
        },
        {
          nickname: '马化腾',
          product: '腾讯',
          deal_status: 'CEO',
          nick: '男',
          phone: '12345555',
          person: '张三，李四',
          lingyu: '教育，医疗',
          summary_num: 0
        },
        {
          nickname: '刘强东',
          product: '京东',
          deal_status: 'CEO',
          nick: '男',
          phone: '12345555',
          person: '张三，李四',
          lingyu: '教育，医疗',
          summary_num: 0
        }
      ],
      // filterField: {
      //   job: '',
      //   city: ''
      // },
      // jobMap: {
      //   1: { name: '空', value: '1', class: 'level-tag level1' },
      //   2: { name: '张三', value: '2', class: 'level-tag level2' },
      //   3: { name: '李四', value: '3', class: 'level-tag level3' }
      // },
      // cityMap: {
      //   1: { name: '有', value: '1', class: 'level-tag level1' },
      //   2: { name: '无', value: '2', class: 'level-tag level2' }
      // }
      // 筛选器已选对象变量
      activeArrObj: {
        person: []
      },
      activeIndex: 0,
      industry: ''
    }
  },
  mixins: [mixin],
  components: {
    SingleSearch,
    RoundsFilter,
    ResultFilter,
    RadioFilter
    // MultiFilter
  },
  computed: {
    filterStyle() {
      return {
        height: this.openFilter ? 'auto' : '0',
        marginTop: this.openFilter ? '20px' : '0',
        overflow: 'hidden'
      }
    }
  },
  created() {
    // this.init()
    this.tags = phone
  },
  methods: {
    addProject() {
      console.log(1)
    },
    deleteProject() {
      console.log(5)
    },
    exportProject() {
      console.log(2)
    },
    handleKeywordsChange(keywords) {
      this.keywords = keywords
      console.log(keywords)
    },
    // 处理筛选器返回数据
    handleResult(value, type) {
      this.activeArrObj[type] = value
    },
    handleActiveIndustry(index) {
      this.activeIndex = Number(index)
      if (index !== -1) {
        this.industry = this.activeIndex === 0 ? '' : phone[this.activeIndex]
      }
    },
    handleSelectionChange(value) {
      console.log(value)
    }
    // init() {
    //   const jobList = Object.values(this.jobMap)
    //   const cityList = Object.values(this.cityMap)
    //   this.optionsList = [
    //     { type: '关系维护人 :', list: jobList },
    //     { type: '联系方式 :', list: cityList }
    //   ]
    // }
  }
}
</script>

<style lang="scss" scoped>
.bottom-project-pool {
  .level-tag {
    display: inline-block;
    padding: 2px 0;
    width: 50px;
    text-align: center;
    border-radius: 5px;
  }
  .operate {
    .top {
      justify-content: space-between;
      .hand {
        font-size: 13px;
        color: #333;
      }
      .left {
        display: flex;
      }
    }
    .filter {
      overflow: hidden;
    }
    .stl {
      background-color: rgb(250, 250, 250);
      padding: 20px 0 10px 20px;
    }
  }
  ::v-deep .pass-tag {
    position: absolute;
    height: auto;
    line-height: 14px;
    padding: 0 2px;
    right: 1px;
    transform: scale(0.8);
  }
  ::v-deep #radioFilter .filterItem .filterTitle {
    min-width: 60px;
    color: #333 !important;
  }
  ::v-deep #radioFilter .filterItem .filterTags .rf-tag {
    margin: 0 20px 0 0;
  }
  ::v-deep #resultFilter .resTitle {
    color: #333;
  }
  ::v-deep .filterTile {
    color: #333 !important;
  }
}
</style>