内容

src/api/content.js

@@ -0,0 +1,12 @@
export const uploadPhotoUrl = '/ajax/article/image' //  上传图片
export const publishUrl = '/ajax/article/publish' //  内容发布
export const draftFirstUrl = '/ajax/article/draft' // 草稿首次保存
export const draftUrl = '/ajax/article/draft/save' // 草稿保存
export const draftPublishUrl = '/ajax/article/draft/publish' // 草稿发布
export const pageInquireUrl = '/ajax/article/pq' // 分页查询
export const inquireContentUrl = '/ajax/article/qo' //  单个查询
export const deleteUrl = '/ajax/article/invalid' // 删除
export const restoreUrl = '/ajax/article/valid' //  恢复
export const recycleBinInquireUrl = '/ajax/article/invalid/pq' // 回收站分页查询
export const thoroughDeleteSingleUrl = '/ajax/article/delete/one' //  单个彻底删除
export const thoroughDeleteAll = '/ajax/article/delete/all' //  全部彻底删除

src/api/cooperationAgency.js

@@ -0,0 +1,3 @@
export const agencyListUrl = '/ajax/org/list'
export const agencyUserUrl = '/ajax/org/qo'
export const sortUrl = '/ajax/org/setlevel'

src/api/specialExpert.js

@@ -0,0 +1,3 @@
export const expertListUrl = '/ajax/professor/list'
export const expertUserUrl = '/ajax/professor/qp'
export const sortUrl = '/ajax/professor/setlevel'

src/components/complexTable/index.vue

@@ -1,44 +1,25 @@
<template>
  <div>
    <el-table
      :data="tableData"
      height="630"
      border>
      <el-table-column v-if="hasSelect"
        type="selection"
        width="55">
    <el-table :data="tableData" height="630" border>
      <el-table-column v-if="hasSelect" type="selection" width="55">
      </el-table-column>
      <el-table-column
        v-for="item in tableItem"
        :key="item.index"
        :prop="item.prop ? item.prop : ''"
        :label="item.tit ? item.tit : ''"
        :width="item.width ? item.width : ''"
        align="center">
      <el-table-column v-for="item in tableItem" :key="item.index" :prop="item.prop ? item.prop : ''" :label="item.tit ? item.tit : ''"
        :width="item.width ? item.width : ''" align="center" :className="item.active">
        <template slot-scope="scope">
          <div v-if="scope.row[item.prop]">
            {{scope.row[item.prop]}}
            <div v-if="item.active" @click.stop="$emit('jump', scope.row.id)">{{scope.row[item.prop]}}</div>
            <div v-else> {{scope.row[item.prop]}}</div>
          </div>
          <div v-if="item.operate && typeof scope.row === 'object'">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            <el-button v-for="operating in operatingList" :key="operating.index " size="mini" :type="operating.icon"
              @click="$emit(operating.event, scope.row)">{{operating.text}}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        :current-page.sync="pageNo"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total">
      <el-pagination background :current-page.sync="pageNo" :page-size="pageSize" layout="prev, pager, next, jumper"
        :total="total" @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
@@ -46,37 +27,31 @@
<script>
export default {
  name: 'complexTable',
  props: ['tableData', 'tableItem', 'hasSelect'],
  data() {
    return {
      pageNo: 1,
      pageSize: 20,
      total: 0
    }
  },
  computed: {
    dataSize() {
      return this.tableData.length % this.pageSize
    }
  },
  created() {
    this.gapFilling()
  },
  methods: {
    gapFilling() {
      const needNum = this.pageSize - this.tableData.length % this.pageSize
      for (let i = 0; i < needNum; ++i) {
        this.tableData.push(i)
  export default {
    name: 'complexTable',
    props: ['tableData', 'tableItem', 'hasSelect', 'operatingList', 'total'],
    data() {
      return {
        pageNo: 1,
        pageSize: 20
      }
    },
    methods: {
      handleCurrentChange(val) { // 点击页码
        this.pageNo = val
        this.$emit('current', val)
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
  .el-table .cell{
  .el-table .cell {
    min-height: 23px
  }
  .active {
    color: #409EFF;
    cursor: pointer
  }
</style>

src/components/editorUE/index.vue

@@ -27,7 +27,7 @@
        BaseUrl: '',
        initialFrameWidth: null,
        initialFrameHeight: 500,
        serverUrl: '',
        serverUrl: '/ajax/editor/controller',
        UEDITOR_HOME_URL: '/static/ueditor/' // 这个是静态资源的路径
      })// 初始化UE
      this.editor.addListener('ready', function() { // 确保UE加载完成后放入内容

src/components/searchBar/index.vue

@@ -1,7 +1,7 @@
<template>
  <el-form-item :label=relevant.label :prop=relevant.professor>
    <el-select v-model='input' filterable remote reserve-keyword :placeholder=relevant.placeholder :remote-method="remoteMethod"
      :loading="loading" :style="{ width: relevant.width }" @change='change(input)'>
      :loading="loading" @change='change(input)'>
      <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>

src/router/index.js

@@ -120,6 +120,12 @@ export const asyncRouterMap = [
            }
          ]
        },
        {
          path: 'draftList',
          component: () => import('@/views/contentPub/draftList'),
          name: 'draftList',
          meta: { title: '内容草稿箱列表' }
        },
        {
          path: 'recycle',
          component: () => import('@/views/contentPub/index'),
@@ -141,12 +147,6 @@ export const asyncRouterMap = [
              meta: { title: ' 查看回收内容' }
            }
          ]
        },
        {
          path: 'draftList',
          component: () => import('@/views/contentPub/draftList'),
          name: 'draftList',
          meta: { title: '内容草稿箱列表' }
        }
      ]
    },
@@ -161,7 +161,6 @@ export const asyncRouterMap = [
        {
          path: 'expertslist',
          component: () => import('@/views/specialExperts/index'),
          name: 'publishedList',
          meta: { title: '特约专家列表' }
        }
      ]

src/views/contentPub/draftList.vue

@@ -1,3 +1,178 @@
<template>
  <div>内容草稿箱列表</div>
</template>
  <div class="app-container">
    <div class="box-container">
      <div class="contain-title">内容草稿箱列表</div>
    </div>
    <div class="content-container">
      <div class="contain-select">
        <span>栏目分类：</span>
        <el-select v-model="selectMode" placeholder="选择分类" @change="change">
          <el-option label="平台新闻" value="1"></el-option>
          <el-option label="采访专栏" value="2"></el-option>
          <el-option label="政策法规" value="3"></el-option>
          <el-option label="通知公告" value="4"></el-option>
        </el-select>
      </div>
      <complex-table :tableData="tableData" :tableItem="tableItem" :operatingList='operatingList' :total='total'
        v-on:sortSingleExpert="sortSingleExpert" v-on:jump="jump" v-on:current="current" v-on:edit="edit"></complex-table>
    </div>
  </div>
</template>
<script>
  import complexTable from '@/components/complexTable'
  import { pageInquireUrl, deleteUrl, inquireContentUrl } from '@/api/content'
  import { queryUserOne } from '@/api/sysSetting'
  import { parseTime } from '@/utils/index'
  import ret from '@/utils/comTable'
  export default {
    data() {
      return {
        searchText: '',
        selectMode: '',
        info: {
          title: '',
          catalog: '',
          published: 0,
          pageSize: 20,
          pageNo: 1
        },
        type: {
          '1': '平台新闻',
          '2': '采访专栏',
          '3': '政策法规',
          '4': '通知公告'
        },
        formData: {},
        operatingList: [ // 在子组件中遍历事件
          {
            text: '编辑',
            event: 'edit',
            icon: 'primary'
          },
          {
            text: '删除',
            event: 'sortSingleExpert',
            icon: 'danger'
          }
        ],
        dataList: [], //  拉去专家数据存到dataList这个数组里面
        tableData: [], //  每一页的存储的数据
        total: 0, //  页码总数
        tableItem: [ // 表头信息
          {
            prop: 'title',
            tit: '标题',
            active: 'active' // 点击加颜色，加此选项
          },
          {
            prop: 'catalog',
            tit: '栏目分类'
          },
          {
            prop: 'modifier',
            tit: '最后修改人',
            width: '160'
          },
          {
            prop: 'createTime',
            tit: '发布时间',
            width: '160'
          },
          {
            operate: 'edit',
            width: '200'
          }
        ]
      }
    },
    created() {
      this.publishList()
    },
    components: {
      complexTable //  表子页面
    },
    methods: {
      change(value) {
        this.info.catalog = value
        this.publishList()
      },
      publishList() {
        this.$http.get(pageInquireUrl, this.info, (response) => { //  拉去专家信息列表，总数据存在dataList，tableData存每一页的信息
          if (response.success && response.data) {
            const epData = response.data.data
            for (let i = 0; i < epData.length; i++) {
              epData[i].createTime = parseTime(epData[i].createTime).substr(0, 16)
              epData[i].catalog = this.type[epData[i].catalog]
              this.$http.get(queryUserOne, { id: epData[i].modifier }, (response) => {
                if (response.success) {
                  epData[i].modifier = response.data.name
                }
              })
            }
            this.dataList = epData
            this.total = Math.ceil(epData / 20)
            if (this.total > 1) {
              this.tableData = this.dataList.slice(0, 20)
            } else {
              const array = this.dataList
              ret.gapFilling(array)
              this.tableData = array
            }
          } else {
            this.$sort.total = 0
            this.tableData = []
          }
        })
      },
      edit(obj) {
        this.$router.push({ path: 'content/publish', query: { id: obj.id }})
      },
      sortSingleExpert(obj) { //  点击单个特约专家信息
        this.$confirm('确定删除该条内容？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$http.get(deleteUrl, { id: obj.id }, response => {
            if (response.success) {
              if (response.data) {
                this.publishList()
                this.$message({
                  message: '删除成功',
                  type: 'success'
                })
              } else {
                this.$http.get(inquireContentUrl, { id: this.id }, (response) => {
                  if (response.success && response.data) {
                    const info = response.data
                    if (!info.actived) {
                      this.$message({
                        message: '该内容已被删除',
                        type: 'warning'
                      })
                    }
                  }
                })
              }
            }
          })
        }).catch(() => {
        })
      },
      jump(id) { // 点击超练级跳转
        console.log(id)
      },
      current(val) { // 点击页码
        if (val < this.total) {
          this.tableData = this.dataList.slice(20 * (val - 1), 20 * val)
        } else {
          const array = this.dataList.slice(20 * val)
          ret.gapFilling(array)
          this.tableData = array
        }
      }
    }
  }
</script>

src/views/contentPub/pubList.vue

@@ -4,97 +4,202 @@
      <div class="contain-title">发布中内容列表</div>
      <div class="contain-search">
        <el-input placeholder="搜索内容标题" v-model="searchText" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
          <el-button slot="append" icon="el-icon-search" @click.stop="search"></el-button>
        </el-input>
      </div>
      <div class="contian-operate">
        <el-button type="primary">发布内容</el-button>
        <el-button type="primary" @click.stop="$router.push('publish')">发布内容</el-button>
      </div>
    </div>
    <div class="content-container">
      <div class="contain-select">
        <span>栏目分类：</span>
        <el-select v-model="selectMode" placeholder="选择分类">
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option>
        <el-select v-model="selectMode" placeholder="选择分类" @change="change">
          <el-option label="平台新闻" value="1"></el-option>
          <el-option label="采访专栏" value="2"></el-option>
          <el-option label="政策法规" value="3"></el-option>
          <el-option label="通知公告" value="4"></el-option>
        </el-select>
      </div>
      <complex-table :tableData="tableData" :tableItem="tableItem"></complex-table>
      <complex-table :tableData="tableData" :tableItem="tableItem" :operatingList='operatingList' :total='total'
        v-on:sortSingleExpert="sortSingleExpert" v-on:jump="jump" v-on:current="current"></complex-table>
    </div>
  </div>
</template>
<script>
import complexTable from '@/components/complexTable'
export default {
  data() {
    return {
      searchText: '',
      selectMode: '',
      tableData: [
        {
          date: '2018/08/25 16:32',
          name: '关于征集企业技术创新需求的通知',
          class: '通知公告',
          owner: '张贝贝',
          num: '4552'
        }, {
          date: '2018/08/25 16:32',
          name: '关于征集企业技术创新需求的通知',
          class: '通知公告',
          owner: '张贝贝',
          num: '4552'
        }, {
          date: '2018/08/25 16:32',
          name: '关于征集企业技术创新需求的通知',
          class: '通知公告',
          owner: '张贝贝',
          num: '4552'
        }, {
          date: '2018/08/25 16:32',
          name: '关于征集企业技术创新需求的通知',
          class: '通知公告',
          owner: '张贝贝',
          num: '4552'
        }
      ],
      tableItem: [
        {
          prop: 'name',
          tit: '标题'
        },
        {
          prop: 'class',
          tit: '栏目分类',
          width: '160'
        },
        {
          prop: 'owner',
          tit: '发布人',
          width: '160'
  import complexTable from '@/components/complexTable'
  import { pageInquireUrl, deleteUrl, inquireContentUrl } from '@/api/content'
  import { queryUserOne } from '@/api/sysSetting'
  import { parseTime } from '@/utils/index'
  import ret from '@/utils/comTable'
  export default {
    data() {
      return {
        searchText: '',
        selectMode: '',
        info: {
          title: '',
          catalog: '',
          published: 1,
          pageSize: 20,
          pageNo: 1
        },
        {
          prop: 'date',
          tit: '发布时间',
          width: '160'
        type: {
          '1': '平台新闻',
          '2': '采访专栏',
          '3': '政策法规',
          '4': '通知公告'
        },
        {
          prop: 'num',
          tit: '浏览数量',
          width: '160'
        },
        {
          operate: 'edit',
          width: '200'
        formData: {},
        operatingList: [ // 在子组件中遍历事件
          {
            text: '删除',
            event: 'sortSingleExpert',
            icon: 'danger'
          }
        ],
        dataList: [], //  拉去专家数据存到dataList这个数组里面
        tableData: [], //  每一页的存储的数据
        total: 0, //  页码总数
        tableItem: [ // 表头信息
          {
            prop: 'title',
            tit: '标题',
            active: 'active' // 点击加颜色，加此选项
          },
          {
            prop: 'catalog',
            tit: '栏目分类'
          },
          {
            prop: 'creator',
            tit: '发布人',
            width: '160'
          },
          {
            prop: 'createTime',
            tit: '发布时间',
            width: '160'
          },
          {
            prop: 'num',
            tit: '浏览数量',
            width: '160'
          },
          {
            operate: 'edit',
            width: '200'
          }
        ]
      }
    },
    created() {
      this.publishList()
    },
    components: {
      complexTable //  表子页面
    },
    methods: {
      change(value) {
        console.log(value)
        this.info.catalog = value
        this.publishList()
      },
      search() {
        this.info.title = this.searchText
        this.publishList()
      },
      publishList() {
        const arr = [
          {
            num: 1
          },
          {
            num: 2
          },
          {
            num: 3
          },
          {
            num: 4
          }
        ]
        this.$http.get(pageInquireUrl, this.info, (response) => { //  拉去专家信息列表，总数据存在dataList，tableData存每一页的信息
          if (response.success && response.data) {
            const epData = response.data.data
            console.log(epData)
            for (let i = 0; i < epData.length; i++) {
              epData[i].createTime = parseTime(epData[i].createTime).substr(0, 16)
              epData[i].catalog = this.type[epData[i].catalog]
              Object.assign(epData[i], arr[i])
              this.$http.get(queryUserOne, { id: epData[i].creator }, (response) => {
                if (response.success) {
                  epData[i].creator = response.data.name
                }
              })
            }
            this.dataList = epData
            this.total = Math.ceil(epData / 20)
            if (this.total > 1) {
              this.tableData = this.dataList.slice(0, 20)
            } else {
              const array = this.dataList
              ret.gapFilling(array)
              this.tableData = array
            }
          } else {
            this.$sort.total = 0
            this.tableData = []
          }
        })
      },
      sortSingleExpert(obj) { //  点击单个特约专家信息
        this.$confirm('确定删除该条内容？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$http.get(deleteUrl, { id: obj.id }, response => {
            if (response.success) {
              if (response.data) {
                this.publishList()
                this.$message({
                  message: '删除成功',
                  type: 'success'
                })
              } else {
                this.$http.get(inquireContentUrl, { id: this.id }, (response) => {
                  if (response.success && response.data) {
                    const info = response.data
                    if (!info.actived) {
                      this.$message({
                        message: '该内容已被删除',
                        type: 'warning'
                      })
                    }
                  }
                })
              }
            }
          })
        }).catch(() => {
        })
      },
      jump(id) { // 点击超练级跳转
        console.log(id)
      },
      current(val) { // 点击页码
        if (val < this.total) {
          this.tableData = this.dataList.slice(20 * (val - 1), 20 * val)
        } else {
          const array = this.dataList.slice(20 * val)
          ret.gapFilling(array)
          this.tableData = array
        }
      ]
      }
    }
  },
  components: {
    complexTable
  },
  methods: {
  }
}
</script>

src/views/contentPub/publish.vue

@@ -1,57 +1,62 @@
<template>
<div class="app-container">
  <div class="box-container">
    <div class="contain-title">新内容发布</div>
  </div>
  <div class="content-container contentBox">
    <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm" style="width: 943px">
      <div style="width: 500px">
        <el-form-item label="标题" prop="contentTitle">
          <el-input placeholder="请填写内容标题" v-model="ruleForm2.contentTitle" class="input-with-select" maxlength=50>
            <el-select v-model="ruleForm2.select" slot="prepend" placeholder="栏目分类" @change="change">
              <el-option label="平台新闻" value="1"></el-option>
              <el-option label="采访专栏" value="2"></el-option>
              <el-option label="政策法规" value="3"></el-option>
              <el-option label="通知公告" value="4"></el-option>
            </el-select>
          </el-input>
  <div class="app-container">
    <div class="box-container">
      <div class="contain-title">新内容发布</div>
    </div>
    <div class="content-container">
      <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm formWidth">
        <el-row>
          <el-col :span="12">
            <el-form-item label="标题" prop="title">
              <el-input placeholder="请填写内容标题" v-model="ruleForm2.title" class="input-with-select" maxlength=50>
                <el-select v-model="ruleForm2.catalog" slot="prepend" placeholder="栏目分类" @change="change" class="selectWidth">
                  <el-option label="平台新闻" value="1"></el-option>
                  <el-option label="采访专栏" value="2"></el-option>
                  <el-option label="政策法规" value="3"></el-option>
                  <el-option label="通知公告" value="4"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
            <el-form-item label="作者/来源" prop="source">
              <el-input v-model.number="ruleForm2.source" placeholder="请填写作者/来源" maxlength=20></el-input>
            </el-form-item>
            <searchTemplate :relevant=relevantExperts v-on:expert="expert"></searchTemplate>
            <searchTemplate :relevant=relevantInstitutions v-on:institution="institution"></searchTemplate>
            <searchTemplate :relevant=relevantCompanies v-on:company="company"></searchTemplate>
          </el-col>
          <el-col :span="12">
            <el-form-item style="text-align:right" prop="imgUrl">
              <uploadFile :uploadImg=uploadImg v-on:uploadfun="uploadfun" :upImgsStr="upImgsStr"></uploadFile>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="文章正文" prop="cnt" class="editBox">
          <UE :id="artUe" :contentText="ruleForm2.cnt" ref="ueBox"></UE>
        </el-form-item>
        <el-form-item label="作者/来源" prop="authorSource">
          <el-input v-model.number="ruleForm2.age" placeholder="请填写作者/来源" maxlength=20></el-input>
        <el-form-item class="traftButton">
          <el-button type="info" @click="draft">保存草稿</el-button>
        </el-form-item>
        <searchTemplate :relevant=relevantExperts v-on:expert="expert"></searchTemplate>
        <searchTemplate :relevant=relevantInstitutions v-on:institution="institution"></searchTemplate>
        <searchTemplate :relevant=relevantCompanies v-on:company="company"></searchTemplate>
      </div>
      <el-form-item label="文章正文" prop="artDesc" class="editBox">
        <UE :id="artUe" :contentText="ruleForm2.artDesc" ref="ueBox"></UE>
      </el-form-item>
      <el-form-item class="publishButton">
        <el-button type="primary" @click="submitForm('ruleForm2')">发布</el-button>
        <el-button @click="resetForm('ruleForm2')">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="fileBox" v-on:uploadfun="uploadfun">
      <uploadFile :uploadImg=uploadImg></uploadFile>
      <p class="teimg">上传封面图片</p>
      <p class="tetype">PNG/JPG/JPEG格式，2M以内</p>
        <el-form-item class="publishButton">
          <el-button type="primary" @click="submitForm('ruleForm2')">发布</el-button>
          <el-button type="danger" @click="deleteContent" v-if="$route.query.id">删除</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</div>
</template>
<script>
  import searchTemplate from '@/components/searchBar'
  import uploadFile from '@/components/uploadFile'
  import UE from '@/components/editorUE'
  import { uploadPhotoUrl, publishUrl, draftFirstUrl, draftUrl, draftPublishUrl, deleteUrl, inquireContentUrl } from '@/api/content'
  export default {
    data() {
      var checkTitle = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请填写标题'))
        } else {
          if (this.ruleForm2.select === '') {
          if (this.draftFlag && this.ruleForm2.catalog === '') {
            callback('请选择该内容所属栏目分类')
          }
          callback()
@@ -72,57 +77,81 @@
        }
      }
      return {
        draftFlag: true,
        upImgsStr: '',
        id: '',
        artUe: 'artUeditorId',
        uploadImg: {
          url: '',
          width: '400px',
          height: '200px',
          fun: 'uploadfun'
          url: uploadPhotoUrl,
          width: '340px',
          height: '200px'
        },
        relevantExperts: {
          url: '',
          placeholder: '请选择关联专家',
          fun: 'expert',
          label: '相关专家',
          prop: 'professor',
          width: '400px'
          prop: 'professors'
        },
        relevantInstitutions: {
          url: '',
          placeholder: '请选择关联机构',
          fun: 'institution',
          label: '相关机构',
          prop: 'institution',
          width: '400px'
          prop: 'orgs'
        },
        relevantCompanies: {
          url: '',
          placeholder: '请选择关联企业',
          fun: 'company',
          label: '相关企业',
          prop: 'company',
          width: '400px'
          prop: 'comps'
        },
        ruleForm2: {
          authorSource: '',
          select: '',
          contentTitle: '',
          professor: '',
          artDesc: ''
          title: '',
          catalog: '',
          source: '',
          imgUrl: '',
          cnt: '',
          professors: [],
          orgs: [],
          comps: []
        },
        rules2: {
          contentTitle: [
          title: [
            { validator: checkTitle, trigger: 'blur', required: true }
          ],
          authorSource: [
          source: [
            { validator: checkAuthorSource, trigger: 'blur', required: true }
          ],
          artDesc: [
          cnt: [
            { validator: checkContent, trigger: 'blur', required: true }
          ]
          ],
          imgUrl: []
        }
      }
    },
    created() {
      this.id = this.$route.query.id
      if (this.id) {
        this.$http.get(inquireContentUrl, { id: this.id }, (response) => {
          if (response.success && response.data) {
            const info = response.data
            this.ruleForm2 = {
              catalog: info.catalog,
              cnt: info.cnt,
              title: info.title,
              source: info.source,
              imgUrl: info.imgUrl,
              professors: [],
              orgs: [],
              comps: []
            }
            this.upImgsStr = info.imgUrl
          }
        })
      }
    },
    components: {
      searchTemplate,
      uploadFile,
@@ -130,25 +159,151 @@
    },
    methods: {
      uploadfun(value) {
        console.log(value)
        this.ruleForm2.imgUrl = value
      },
      institution(value) {
        console.log(value)
        this.ruleForm2.orgs = [value]
      },
      company(value) {
        console.log(value)
        this.ruleForm2.comps = [value]
      },
      expert(value) {
        console.log(value)
        this.ruleForm2.professors = [value]
      },
      change() {
        console.log(11)
        this.$refs.ruleForm2.validateField('contentTitle')
      change(value) {
        if (this.ruleForm2.title) {
          this.$refs.ruleForm2.validateField('title')
        }
        if (value === '1' || value === '2') {
          console.log(value, typeof value)
          console.log(this.rules2)
          this.rules2.imgUrl.push({ message: '请上传封面图片', required: true, trigger: 'blur' })
        } else {
          this.rules2.imgUrl = []
        }
        this.ruleForm2.catalog = value
      },
      deleteContent() {
        this.$confirm('该内容是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$http.get(deleteUrl, { id: this.id }, response => {
            if (response.success) {
              if (response.data) {
                this.$router.push('/draftList')
                this.$message({
                  message: '删除成功',
                  type: 'success'
                })
              } else {
                this.$http.get(inquireContentUrl, { id: this.id }, (response) => {
                  if (response.success && response.data) {
                    const info = response.data
                    if (!info.actived) {
                      this.$message({
                        message: '该内容已被删除',
                        type: 'warning'
                      })
                    }
                  }
                })
              }
            }
          })
        }).catch(() => {
        })
      },
      draft() {
        this.draftFlag = false
        this.$refs.ruleForm2.validateField('title')
        this.ruleForm2.cnt = this.$refs.ueBox.getUEContent()
        if (this.ruleForm2.title) {
          if (this.id) {
            this.ruleForm2.id = this.id
          }
          this.$confirm('该内容是否保存草稿箱？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            this.$http.post((this.id) ? draftUrl : draftFirstUrl, this.ruleForm2, response => {
              this.draftFlag = true
              if (response.success && response.data) {
                const info = response.data
                this.id = info
              } else {
                if (this.id) {
                  this.$http.get(inquireContentUrl, { id: this.id }, (response) => {
                    if (response.success && response.data) {
                      const info = response.data
                      if (info.published) {
                        this.$message({
                          message: '该内容草稿已被发布',
                          type: 'warning'
                        })
                      } else {
                        if (info.actived) {
                          this.$message({
                            message: '该内容草稿已被删除',
                            type: 'warning'
                          })
                        }
                      }
                    }
                  })
                }
              }
            })
          }).catch(() => {
          })
        }
      },
      submitForm(formName) {
        this.ruleForm2.cnt = this.$refs.ueBox.getUEContent()
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
            if (this.id) {
              this.ruleForm2.id = this.id
            }
            this.$confirm('该内容是否发布？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              center: true
            }).then(() => {
              this.$http.post((this.id) ? draftPublishUrl : publishUrl, this.ruleForm2, (response) => {
                if (response.success && response.data) {
                  this.$router.push('publist')
                } else {
                  if (this.id) {
                    this.$http.get(inquireContentUrl, { id: this.id }, (response) => {
                      if (response.success && response.data) {
                        const info = response.data
                        if (info.published) {
                          this.$message({
                            message: '该内容已被发布',
                            type: 'warning'
                          })
                        } else {
                          if (info.actived) {
                            this.$message({
                              message: '该内容已被删除',
                              type: 'warning'
                            })
                          }
                        }
                      }
                    })
                  }
                }
              })
            }).catch(() => {
            })
          } else {
            console.log('error submit!!')
            return false
@@ -163,26 +318,41 @@
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .content-container {
    position: relative;
  .formWidth {
    width: 960px
  }
  .fileBox {
    position: absolute; top: 20px; left: 550px;
    text-align: center
  .selectWidth {
    width: 103px;
  }
  .teimg {
    color:#606266;
    font-size: 16px;
    color: #606266;
    font-size: 12px;
    text-align: center;
    line-height: 10px;
  }
  .tetype {
    color:#909399;
    color: #909399;
    font-size: 14px;
    text-align: center;
    line-height: 10px
  }
  .editBox .el-form-item__content {
    line-height: 0px;
  }
  .publishButton {
    text-align: center;
  }
  .traftButton {
    text-align: right;
  }
  .avatar-uploader {
    line-height: 1.15;
  }
</style>

src/views/contentPub/recycleBin.vue

@@ -1,3 +1,225 @@
<template>
  <div>内容回收站列表</div>
</template>
  <div class="app-container">
    <div class="box-container">
      <div class="contain-title">内容回收站列表</div>
      <div class="contian-operate">
        <el-button type="danger" @click.stop="deleteAll">全部彻底删除</el-button>
      </div>
    </div>
    <div class="content-container">
      <div class="contain-select">
        <span>栏目分类：</span>
        <el-select v-model="selectMode" placeholder="选择分类" @change="change">
          <el-option label="平台新闻" value="1"></el-option>
          <el-option label="采访专栏" value="2"></el-option>
          <el-option label="政策法规" value="3"></el-option>
          <el-option label="通知公告" value="4"></el-option>
        </el-select>
      </div>
      <complex-table :tableData="tableData" :tableItem="tableItem" :operatingList='operatingList' :total='total'
        v-on:sortSingleExpert="sortSingleExpert" v-on:jump="jump" v-on:current="current" v-on:edit="edit"></complex-table>
    </div>
  </div>
</template>
<script>
  import complexTable from '@/components/complexTable'
  import { thoroughDeleteAll, thoroughDeleteSingleUrl, recycleBinInquireUrl, restoreUrl, inquireContentUrl } from '@/api/content'
  import { queryUserOne } from '@/api/sysSetting'
  import { parseTime } from '@/utils/index'
  import ret from '@/utils/comTable'
  export default {
    data() {
      return {
        searchText: '',
        selectMode: '',
        info: {
          catalog: '',
          pageSize: 20,
          pageNo: 1
        },
        type: {
          '1': '平台新闻',
          '2': '采访专栏',
          '3': '政策法规',
          '4': '通知公告'
        },
        formData: {},
        operatingList: [ // 在子组件中遍历事件
          {
            text: '恢复',
            event: 'edit',
            icon: 'primary'
          },
          {
            text: '彻底删除',
            event: 'sortSingleExpert',
            icon: 'danger'
          }
        ],
        dataList: [], //  拉去专家数据存到dataList这个数组里面
        tableData: [], //  每一页的存储的数据
        total: 0, //  页码总数
        tableItem: [ // 表头信息
          {
            prop: 'title',
            tit: '标题',
            active: 'active' // 点击加颜色，加此选项
          },
          {
            prop: 'catalog',
            tit: '栏目分类'
          },
          {
            prop: 'createTime',
            tit: '创建时间'
          },
          {
            prop: 'creator',
            tit: '创建人'
          },
          {
            prop: 'invalidTime',
            tit: '删除时间',
            width: '160'
          },
          {
            prop: 'invalidOperator',
            tit: '删除人',
            width: '160'
          },
          {
            operate: 'edit',
            width: '200'
          }
        ]
      }
    },
    created() {
      this.publishList()
    },
    components: {
      complexTable //  表子页面
    },
    methods: {
      change(value) {
        this.info.catalog = value
        this.publishList()
      },
      publishList() {
        this.$http.get(recycleBinInquireUrl, this.info, (response) => { //  拉去专家信息列表，总数据存在dataList，tableData存每一页的信息
          if (response.success && response.data) {
            const epData = response.data.data
            for (let i = 0; i < epData.length; i++) {
              epData[i].createTime = parseTime(epData[i].createTime).substr(0, 16)
              epData[i].invalidTime = parseTime(epData[i].invalidTime).substr(0, 16)
              epData[i].catalog = this.type[epData[i].catalog]
              this.$http.get(queryUserOne, { id: epData[i].creator }, (response) => {
                if (response.success) {
                  epData[i].creator = response.data.name
                }
              })
            }
            this.dataList = epData
            this.total = Math.ceil(epData / 20)
            if (this.total > 1) {
              this.tableData = this.dataList.slice(0, 20)
            } else {
              const array = this.dataList
              ret.gapFilling(array)
              this.tableData = array
            }
          } else {
            this.$sort.total = 0
            this.tableData = []
          }
        })
      },
      edit(obj) {
        console.log(obj)
        this.$confirm(`确定恢复${obj.title}内容？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$http.get(restoreUrl, { id: obj.id }, response => {
            if (response.success) {
              if (response.data) {
                this.publishList()
                this.$message({
                  message: '恢复成功成功',
                  type: 'success'
                })
              } else {
                this.$http.get(inquireContentUrl, { id: this.id }, (response) => {
                  if (response.success && response.data) {
                    const info = response.data
                    if (!info.actived) {
                      this.$message({
                        message: '状态改变',
                        type: 'warning'
                      })
                    }
                  }
                })
              }
            }
          })
        }).catch(() => {
        })
      },
      deleteAll() {
        this.$confirm('确定全部彻底删除回收站内容？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$http.get(thoroughDeleteAll, '', response => {
            if (response.success) {
              this.publishList()
              this.$message({
                message: '全部删除成功',
                type: 'success'
              })
            }
          })
        }).catch(() => {
        })
      },
      sortSingleExpert(obj) { //  点击单个特约专家信息
        console.log(obj)
        this.$confirm('确定彻底删除该条回收站内容？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$http.get(thoroughDeleteSingleUrl, { id: obj.id }, response => {
            if (response.success) {
              this.publishList()
              this.$message({
                message: '删除成功',
                type: 'success'
              })
            }
          })
        }).catch(() => {
        })
      },
      jump(id) { // 点击超练级跳转
        this.$router.push({ path: 'viewRecycling', query: { id }})
      },
      current(val) { // 点击页码
        if (val < this.total) {
          this.tableData = this.dataList.slice(20 * (val - 1), 20 * val)
        } else {
          const array = this.dataList.slice(20 * val)
          ret.gapFilling(array)
          this.tableData = array
        }
      }
    }
  }
</script>

src/views/contentPub/viewRecyclingBins.vue

@@ -6,24 +6,24 @@
    <div class="content-container contentBox">
      <el-form :model="ruleForm2" status-icon ref="ruleForm2" label-width="100px" class="demo-ruleForm formTable">
        <div class="formWidth">
          <el-form-item label="标题" prop="contentTitle">
            平台新闻<span>Science：美国国家科学基金会暂停研究生资助项目，上千访问学者或受影响</span>
          <el-form-item label="标题" prop="title">
            <span>{{ruleForm2.title}}</span>
          </el-form-item>
          <el-form-item label="作者/来源" prop="authorSource">
            科袖网
          <el-form-item label="作者/来源" prop="source">
            {{ruleForm2.source}}
          </el-form-item>
          <el-form-item label="相关专家" prop="professor">
            张莎莎
          <el-form-item label="相关专家" prop="professors">
            {{ruleForm2.professors}}
          </el-form-item>
          <el-form-item label="相关机构" prop="institution">
            北京科技大学
          <el-form-item label="相关机构" prop="orgs">
            {{ruleForm2.orgs}}
          </el-form-item>
          <el-form-item label="相关企业" prop="company">
            北京科技大学
          <el-form-item label="相关企业" prop="comps">
            {{ruleForm2.comps}}
          </el-form-item>
        </div>
        <el-form-item label="文章正文" prop="artDesc" class="editBox">
          <div class="editContent"></div>
        <el-form-item label="文章正文" prop="cnt" class="editBox">
          <div class="editContent" v-html="ruleForm2.cnt"></div>
        </el-form-item>
        <el-form-item class="publishButton">
          <el-button type="primary" @click="submitForm('ruleForm2')">恢复</el-button>
@@ -31,7 +31,7 @@
        </el-form-item>
      </el-form>
      <div class="fileBox">
        <img src="../../assets/404_images/404.png" alt="" class="fileImg">
        <img :src="ruleForm2.imgUrl" alt="" class="fileImg">
      </div>
    </div>
@@ -39,18 +39,40 @@
</template>
<script>
  import { inquireContentUrl } from '@/api/content'
  export default {
    data() {
      return {
        ruleForm2: {
          authorSource: '',
          select: '',
          contentTitle: '',
          professor: '',
          artDesc: ''
          title: '',
          source: '',
          cnt: '',
          imgUrl: '',
          catalog: '',
          professors: '',
          orgs: '',
          comps: ''
        }
      }
    },
    created() {
      const id = this.$route.query.id
      this.$http.get(inquireContentUrl, { id }, (response) => {
        if (response.success && response.data) {
          const info = response.data
          this.ruleForm2 = {
            catalog: info.catalog,
            cnt: info.cnt,
            title: info.title,
            source: info.source,
            imgUrl: info.imgUrl,
            professors: '',
            orgs: '',
            comps: ''
          }
        }
      })
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {

src/views/cooperationAgency/agencySort.vue

@@ -4,43 +4,82 @@
      <div class="t-left">
        <div class="headPhoto"></div>
      </div>
      <el-form :model="form" class="form-el">
      <el-form :model="form" class="form-el" ref="form" :rules="rules2">
        <el-form-item :label-width="formLabelWidth">
          机构名称
          {{form.name}}
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          机构类型
          {{form.type}}
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          所在城市
          {{form.name}}
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
        <el-form-item :label-width="formLabelWidth" prop="level">
          <div class='labelBox'>合作机构平台序号</div></span>
          <el-input v-model="form.name" placeholder="最多三位数字" class="conBox"></el-input>
          <el-input type="level" v-model="form.level" placeholder="最多三位数字" class="conBox" maxlength="3"></el-input>
        </el-form-item>
        <el-form-item class="modiaB">
          <el-button type="primary" @click="submitForm('form')">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import { sortUrl } from '@/api/cooperationAgency'
  export default {
    data() {
      //  校验排序字段
      const checkAge = (rule, value, callback) => {
        const par = /^\d{0,3}$/
        if (!value) {
          return callback()
        } else {
          if (par.test(value)) {
            return callback()
          } else {
            callback('请填写数字')
          }
        }
      }
      return {
        dialogFormVisible: false,
        form: {
          name: ''
          level: ''
        },
        rules2: {
          level: [
            { validator: checkAge, trigger: 'blur' }
          ]
        },
        formLabelWidth: '20px'
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$http.post(sortUrl, { id: this.form.id, level: this.form.level }, (response) => {
              if (response.success) {
                this.$emit('rearrange')
                this.dialogFormVisible = false
              }
            })
          } else {
            return false
          }
        })
      }
    }
  }
</script>
<style scoped>
  .modiaB {
    text-align: center;
    margin: 30px 0;
  }
  .box {
    overflow: hidden;
  }

src/views/cooperationAgency/index.vue

@@ -1,109 +1,149 @@
<template>
    <div class="app-container">
      <div class="box-container">
        <div class="contain-title">合作机构列表</div>
      </div>
      <div class="content-container">
        <complex-table :tableData="tableData" :tableItem="tableItem"></complex-table>
      </div>
      <agencySort ref="sort"></agencySort>
      <button @click="dianji">点击</button>
  <div class="app-container">
    <div class="box-container">
      <div class="contain-title">合作机构列表</div>
    </div>
  </template>
  
  <script>
    import complexTable from '@/components/complexTable'
    import agencySort from './agencySort'
    export default {
      data() {
        return {
          searchText: '',
          selectMode: '',
          tableData: [
            {
              date: 1,
              name: '关于征集企业技术创新需求的通知',
              class: '通知公告',
              owner: '张贝贝',
              num: '4552',
              mail: '280716068@qq.com',
              time: '2018/1/2'
            }, {
              date: 2,
              name: '关于征集企业技术创新需求的通知',
              class: '通知公告',
              owner: '张贝贝',
              num: '4552',
              mail: '280716068@qq.com',
              time: '2018/1/2'
            }, {
              date: 3,
              name: '关于征集企业技术创新需求的通知',
              class: '通知公告',
              owner: '张贝贝',
              num: '4552',
              mail: '280716068@qq.com',
              time: '2018/1/2'
            }, {
              date: 4,
              name: '关于征集企业技术创新需求的通知',
              class: '通知公告',
              owner: '张贝贝',
              num: '4552',
              mail: '280716068@qq.com',
              time: '2018/1/2'
    <div class="content-container">
      <complex-table :tableData="tableData" :tableItem="tableItem" :operatingList='operatingList' :total='total'
        v-on:sortSingleExpert="sortSingleAgency" v-on:jump="jump" v-on:current="current"></complex-table>
    </div>
    <agencySort ref="sort" v-on:rearrange="rearrange"></agencySort>
  </div>
</template>
<script>
  import complexTable from '@/components/complexTable'
  import agencySort from './agencySort'
  import { agencyListUrl } from '@/api/cooperationAgency' //  agencyUserUrl
  import { parseTime } from '@/utils/index'
  import ret from '@/utils/comTable'
  export default {
    data() {
      return {
        searchText: '',
        selectMode: '',
        formData: {},
        operatingList: [ // 在子组件中遍历事件
          {
            text: '排序',
            event: 'sortSingleExpert',
            icon: 'primary'
          }
        ],
        dataList: [], //  拉去专家数据存到dataList这个数组里面
        tableData: [], //  每一页的存储的数据
        total: 0, //  页码总数
        tableItem: [ // 表头信息
          {
            prop: 'level',
            tit: '机构序号'
          },
          {
            prop: 'name',
            tit: '机构名称',
            active: 'active' // 点击加颜色，加此选项
          },
          {
            prop: 'type',
            tit: '机构类型',
            width: '160'
          },
          {
            prop: 'linkman',
            tit: '联系人',
            width: '160'
          },
          {
            prop: 'linkphone',
            tit: '联系电话',
            width: '160'
          },
          {
            prop: 'linkemail',
            tit: '联系邮箱',
            width: '160'
          },
          {
            prop: 'assTime',
            tit: '入住时间',
            width: '160'
          },
          {
            operate: 'edit',
            width: '200'
          }
        ]
      }
    },
    created() {
      this.agencyList()
    },
    components: {
      complexTable,
      agencySort
    },
    methods: {
      agencyList() {
        const arr = [
          {
            name: '北京科袖科技有限公司',
            type: '上市公司',
            linkman: '张女士',
            linkphone: '13526256369',
            linkemail: '280716069@qq.com'
          },
          {
            name: '北京佳木斯科技有限公司',
            type: '国有企业',
            linkman: '李朋涛',
            linkphone: '1352569',
            linkemail: '280716890@qq.com'
          }
        ]
        this.$http.get(agencyListUrl, '', (response) => { //  拉去专家信息列表，总数据存在dataList，tableData存每一页的信息
          if (response.success && response.data) {
            const epData = response.data
            for (let i = 0; i < epData.length; i++) {
              epData[i].assTime = parseTime(epData[i].assTime).substr(0, 10)
              Object.assign(epData[i], arr[i])
              // this.$http.get(agencyUserUrl, {id: epData[i].id}, (response ) => {
              //   console.log(response)
              // })
            }
          ],
          tableItem: [
            {
              prop: 'date',
              tit: '机构序号'
            },
            {
              prop: 'class',
              tit: '机构名称',
              width: '160'
            },
            {
              prop: 'owner',
              tit: '机构类型',
              width: '160'
            },
            {
              prop: 'date',
              tit: '联系人',
              width: '160'
            },
            {
              prop: 'num',
              tit: '联系电话',
              width: '160'
            },
            {
              prop: 'mail',
              tit: '联系邮箱',
              width: '160'
            },
            {
              prop: 'time',
              tit: '入驻时间',
              width: '160'
            },
            {
              operate: 'edit',
              width: '200'
            this.dataList = epData
            this.total = Math.ceil(epData / 20)
            if (this.total > 1) {
              this.tableData = this.dataList.slice(0, 20)
            } else {
              const array = this.dataList
              ret.gapFilling(array)
              this.tableData = array
            }
          ]
        }
          } else {
            this.$sort.total = 0
            this.tableData = []
          }
        })
      },
      rearrange() {
        this.agencyList()
      },
      sortSingleAgency(obj) { //  点击单个特约专家信息
        this.$refs.sort.dialogFormVisible = true
        this.$refs.sort.form = { ...obj }
      },
      components: {
        complexTable,
        agencySort
      jump(id) { // 点击超练级跳转
        console.log(id)
      },
      methods: {
        dianji() {
          console.log(this.$refs.sort.dialogFormVisible = true)
      current(val) { // 点击页码
        if (val < this.total) {
          this.tableData = this.dataList.slice(20 * (val - 1), 20 * val)
        } else {
          const array = this.dataList.slice(20 * val)
          ret.gapFilling(array)
          this.tableData = array
        }
      }
    }
  </script>
  }
</script>

src/views/specialExperts/expertSort.vue

@@ -4,43 +4,83 @@
      <div class="t-left">
        <div class="headPhoto"></div>
      </div>
      <el-form :model="form" class="form-el">
      <el-form :model="form" class="form-el" ref="form" :rules="rules2">
        <el-form-item :label-width="formLabelWidth">
          专家姓名
          {{form.name}}
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          职称
          {{form.job}}
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          所在机构
          {{form.comp}}
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
        <el-form-item :label-width="formLabelWidth" prop="level">
          <div class='labelBox'>专家平台序号</div></span>
          <el-input v-model="form.name" placeholder="最多三位数字" class="conBox"></el-input>
          <el-input type="level" v-model="form.level" placeholder="最多三位数字" class="conBox" maxlength="3"></el-input>
        </el-form-item>
        <el-form-item class="modiaB">
          <el-button type="primary" @click="submitForm('form')">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import { sortUrl } from '@/api/specialExpert'
  export default {
    data() {
      //  校验排序字段
      const checkAge = (rule, value, callback) => {
        const par = /^\d{0,3}$/
        if (!value) {
          return callback()
        } else {
          if (par.test(value)) {
            return callback()
          } else {
            callback('请填写数字')
          }
        }
      }
      return {
        dialogFormVisible: false,
        form: {
          name: ''
          level: ''
        },
        rules2: {
          level: [
            { validator: checkAge, trigger: 'blur' }
          ]
        },
        formLabelWidth: '20px'
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$http.post(sortUrl, { id: this.form.id, level: this.form.level }, (response) => {
              if (response.success) {
                this.$emit('rearrange')
                this.dialogFormVisible = false
              }
            })
          } else {
            return false
          }
        })
      }
    }
  }
</script>
<style scoped>
  .modiaB {
    text-align: center;
    margin: 30px 0;
  }
  .box {
    overflow: hidden;
  }
@@ -57,7 +97,8 @@
  }
  .form-el {
    float: left
    float: left;
    margin-bottom: 20px;
  }
  .form-el .el-form-item {
@@ -77,4 +118,4 @@
  .dialog-footer {
    text-align: center;
  }
</style>
</style>

src/views/specialExperts/index.vue

@@ -4,88 +4,72 @@
      <div class="contain-title">特约专家列表</div>
    </div>
    <div class="content-container">
      <complex-table :tableData="tableData" :tableItem="tableItem"></complex-table>
      <complex-table :tableData="tableData" :tableItem="tableItem" :operatingList='operatingList' :total='total'
        v-on:sortSingleExpert="sortSingleExpert" v-on:jump="jump" v-on:current="current"></complex-table>
    </div>
    <expertSort ref="sort"></expertSort>
    <button @click="dianji">点击</button>
    <expertSort ref="sort" v-on:rearrange="rearrange"></expertSort>
  </div>
</template>
<script>
  import complexTable from '@/components/complexTable'
  import expertSort from './expertSort'
  import { expertListUrl } from '@/api/specialExpert' //  expertUserUrl
  import { parseTime } from '@/utils/index'
  import ret from '@/utils/comTable'
  export default {
    data() {
      return {
        searchText: '',
        selectMode: '',
        tableData: [
        formData: {},
        operatingList: [ // 在子组件中遍历事件
          {
            date: 1,
            name: '关于征集企业技术创新需求的通知',
            class: '通知公告',
            owner: '张贝贝',
            num: '4552',
            mail: '280716068@qq.com',
            time: '2018/1/2'
          }, {
            date: 2,
            name: '关于征集企业技术创新需求的通知',
            class: '通知公告',
            owner: '张贝贝',
            num: '4552',
            mail: '280716068@qq.com',
            time: '2018/1/2'
          }, {
            date: 3,
            name: '关于征集企业技术创新需求的通知',
            class: '通知公告',
            owner: '张贝贝',
            num: '4552',
            mail: '280716068@qq.com',
            time: '2018/1/2'
          }, {
            date: 4,
            name: '关于征集企业技术创新需求的通知',
            class: '通知公告',
            owner: '张贝贝',
            num: '4552',
            mail: '280716068@qq.com',
            time: '2018/1/2'
            text: '排序',
            event: 'sortSingleExpert',
            icon: 'primary'
          }
        ],
        tableItem: [
        dataList: [], //  拉去专家数据存到dataList这个数组里面
        tableData: [], //  每一页的存储的数据
        total: 0, //  页码总数
        tableItem: [ // 表头信息
          {
            prop: 'date',
            prop: 'level',
            tit: '专家序号'
          },
          {
            prop: 'class',
            prop: 'name',
            tit: '真实姓名',
            active: 'active' // 点击加颜色，加此选项
          },
          {
            prop: 'job',
            tit: '职称',
            width: '160'
          },
          {
            prop: 'owner',
            prop: 'comp',
            tit: '所在机构',
            width: '160'
          },
          {
            prop: 'date',
            prop: 'city',
            tit: '所在城市',
            width: '160'
          },
          {
            prop: 'num',
            prop: 'phone',
            tit: '联系电话',
            width: '160'
          },
          {
            prop: 'mail',
            prop: 'email',
            tit: '联系邮箱',
            width: '160'
          },
          {
            prop: 'time',
            prop: 'assTime',
            tit: '入住时间',
            width: '160'
          },
@@ -96,13 +80,76 @@
        ]
      }
    },
    created() {
      this.expertList()
    },
    components: {
      complexTable,
      expertSort
      complexTable, //  表子页面
      expertSort //  专家排序页面
    },
    methods: {
      dianji() {
        console.log(this.$refs.sort.dialogFormVisible = true)
      expertList() {
        const arr = [
          {
            name: '张波',
            job: '教授',
            comp: '河南科技学院',
            city: '郑州',
            phone: '13526256369',
            email: '280716069@qq.com'
          },
          {
            name: '李朋涛',
            job: '讲师',
            comp: '北京大学',
            city: '北京',
            phone: '15623569685',
            email: '280715983@qq.com'
          }
        ]
        this.$http.get(expertListUrl, '', (response) => { //  拉去专家信息列表，总数据存在dataList，tableData存每一页的信息
          if (response.success && response.data) {
            const epData = response.data
            for (let i = 0; i < epData.length; i++) {
              epData[i].assTime = parseTime(epData[i].assTime).substr(0, 16)
              Object.assign(epData[i], arr[i])
              // this.$http.get(expertUserUrl, {id: epData[i].id}, (response ) => {
              //   console.log(response)
              // })
            }
            this.dataList = epData
            this.total = Math.ceil(epData / 20)
            if (this.total > 1) {
              this.tableData = this.dataList.slice(0, 20)
            } else {
              const array = this.dataList
              ret.gapFilling(array)
              this.tableData = array
            }
          } else {
            this.$sort.total = 0
            this.tableData = []
          }
        })
      },
      rearrange() {
        this.expertList()
      },
      sortSingleExpert(obj) { //  点击单个特约专家信息
        this.$refs.sort.dialogFormVisible = true
        this.$refs.sort.form = { ...obj }
      },
      jump(id) { // 点击超练级跳转
        console.log(id)
      },
      current(val) { // 点击页码
        if (val < this.total) {
          this.tableData = this.dataList.slice(20 * (val - 1), 20 * val)
        } else {
          const array = this.dataList.slice(20 * val)
          ret.gapFilling(array)
          this.tableData = array
        }
      }
    }
  }