table.js

import axios from 'axios';
import {
  formatter, formatterAmount, formatterDate, formatterDateOnly, find,
} from '@/assets/utils/table';

const tagsMap = {
  1: 'danger',
  0: 'success'
};

export default {
  mounted() {
    this.getData();
  },
  watch: {
    '$route'(route) {
      this.query = Object.assign({}, this.query, route.query);
      this.getData();
    }
  },
  beforeDestroy() {
    this.source.cancel('自动取消ajax操作');
    clearTimeout(this.loadingTimer);
  },
  methods: {
    test() {
      console.log("test")
    },
    // 开启、关闭
    changePath(path) {
      this.pageInfo.list = path + "/list";
      this.pageInfo.del = path + "/delete";
      this.pageInfo.add = path + "/add";
      this.pageInfo.edit = path + "/edit";
      this.pageInfo.view = path + "/view";
    },
    beforeFecth() {
      return Promise.resolve();
    },
    // 表格接收数据前
    beforeRender(data) { return data },
    // 表格接收数据后
    afterRender(data) { },
    // 删除动作发生后
    afterDel(data) { },
    // 默认拉取数据
    async getData() {
      try {
        await this.beforeFecth();
      } catch (error) {
        return;
      }
      this.tableData.loading = true;
      this.$post(this.pageInfo.list, this.query, {
        cancelToken: this.source.token
      })
        .then(({ data }) => {
          this.tableData = this.beforeRender(
            Object.assign({}, this.tableData, data)
          );
          this.afterRender(this.tableData);
        })
        .catch(error => {
          if (error.message == '自动取消ajax操作') return
          this.$message.error(error.message);
        })
        .then(data => {
          clearTimeout(this.loadingTimer);
          this.loadingTimer = setTimeout(() => {
            this.tableData.loading = false;
          }, 300);
        })
    },
    // 复制一个数组或对象
    util_copy(data) {
      if (typeof data !== 'object') return data;
      return JSON.parse(JSON.stringify(data))
    },
    _showAll(item) {
      let data = this.util_copy(item);
      data.isShowAll = true;
      this.util_update(item.id, data)
    },
    // 超长文本展开收起
    util_short(key, size) {
      return row => {
        let string = row[key] || '';
        if (string.length < size || row.isShowAll) return string;
        return (
          <span>
            {string.substr(0, 50) + '...'}
            <el-button size='mini' type='text' onClick={() => { this._showAll(row) }}>更多</el-button>
          </span>
        )
      }
    },
    // 从dict字段暴力取值，取不到则返回原值
    util_formatter(key, val) {
      try {
        return this.tableData.dict[key][val]
      } catch (error) {
        return val;
      }
    },
    // 通过id修改某条记录
    util_update(id, newData, idColumnName) {
      let table = this.tableData.data;
      let { index, data } = find(table, !idColumnName ? 'id' : idColumnName, id);
      table.splice(index, 1, Object.assign({}, data, newData));
    },
    // 工具方法，把数字转化为字符串
    util_toString(data, array) {
      const dataCopy = Object.assign({}, data);
      for (var item in data) {
        dataCopy[item] = dataCopy[item] === undefined ? '' : dataCopy[item] + '';

      }
      return dataCopy;
    },
    util_formatterDate(time, fmt) {
      if (!time) return '';
      let date = new Date(Number(time));
      var o = {
        "M+": date.getMonth() + 1, //月份
        "d+": date.getDate(), //日
        "[h|H]+": date.getHours(), //小时
        "m+": date.getMinutes(), //分
        "s+": date.getSeconds(), //秒
        "q+": Math.floor((date.getMonth() + 3) / 3), //季度
        "S": date.getMilliseconds() //毫秒
      };
      if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
      for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      return fmt;
    },
    util_getPrevMonthDate() {
      let date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth();
      var day = date.getDate();
      if (month == 0) {//年份为0代表,是本年的第一月,所以不能减
        month = 11;//月份为上年的最后月份
        year--;//年份减1
        return new Date(year, month, day);
      }
      month--;//否则,只减去月份
      return new Date(year, month, day);
    },
    // 格式化单元格数据
    formatter(row, column, val) {
      const content = formatter(this.tableData, column, val);
      return content ? <el-tag type={'info'} size='mini'>{content}</el-tag> : val
    },

    formatterYES(row, column, val) {
      const content = formatter(this.tableData, column, val);
      if (content) {
        if (val == '0') {
          return <el-tag type={'danger'} size='mini'>{content}</el-tag>
        } else if (val == '1') {
          return <el-tag type={'success'} size='mini'>{content}</el-tag>
        }
      } else {
        return val
      }
    },

    formatterStatus(row, column, val) {
      const content = formatter(this.tableData, column, val);
      if (content) {
        if (val == '0') {
          return <el-tag size='mini'>{content}</el-tag>
        } else if (val == '1') {
          return <el-tag type={'danger'} size='mini'>{content}</el-tag>
        } else if (val == '2') {
          return <el-tag type={'success'} size='mini'>{content}</el-tag>
        }
      } else {
        return val
      }
    },

    formatterDictLink(row, column, val) {
      const content = formatter(this.tableData, column, val);
      let underline = false;
      let type = "primary"
      if (val === 3) {
        type = 'danger'
      }
      return content ? <el-link type={type} underline={underline} onClick={() => { this.toDrawerMsg(row) }} size='mini'>{content}</el-link> : val
    },
    formatters(row, column, val) {
      if (val) {
        return (
          val.split(',').map(v => { return formatter(this.tableData, column, v) }).join(",")
        )
      }
      return '--'
    },
    formatterLink(row, column, val) {
      //const content = formatter(this.tableData, column-2, val);

      return <el-link type="primary" href={val} target="_blank">{row.fileName}</el-link>
      //return content;
      // return content ? <el-tag type={'info'} size='mini'>{content}</el-tag> : val
    },
    formatterString(row, column, val) {
      return formatter(this.tableData, column, val)
    },
    // 格式化单元格数据 0显示 0.00
    formatterAmount(row, column) {
      return formatterAmount(row, column)
    },
    // 格式化单元格数据钱单位里换算成元
    formatterMoney(row, column, val) {
      return ((val || 0) / 1000).toFixed(2)
    },
    // 格式化单元格数据
    formatterDate(row, column) {
      //console.log("date:",row,column)
      return formatterDate(row, column)
    },
    // 格式化单元格数据 只要年月日
    formatterDateOnly(row, column) {
      return formatterDateOnly(row, column)
    },
    // 格式化人员
    formaterPeople(row, column, val) {
      let info
      if (val) {
        if (typeof (val) === 'number') {
          info = <el-tag type={'info'} size='mini'>{this.util_formatter('assigneeList', val)}</el-tag>
        } else {
          info = (
            val.split(',').map(v => {
              if (this.tableData.dict["assigneeList"][v] != undefined) {
                return <el-tag type={'info'} size='mini'>{this.util_formatter('assigneeList', v)}</el-tag>
              }
            })
          )
        }
      } else {
        info = '--'
      }
      return info
    },
    // 多选表格行
    handleSelectionChange(val) {
      this.selection = val.map(i => i.id);
    },
    // 当某一行被点击时会触发该事件
    handleRowClick(row, column, event) {

    },
    // 合并表格行列
    handleSpanMethod() {

    },
    // 自定义表格排序
    handleSortChange() {

    },
    // 自定义索引号
    handleIndexMethod(index) {
      //prePageResult 每页条数
     // console.log("index:"+index)
      let size = this.tableData.pageInfo.prePageResult;
      let page = this.tableData.pageInfo.currPage;
      let count = parseInt(size) * (parseInt(page) - 1)
      return count + index + 1;

    },

    // 自定义表格选择行是否能勾选
    handleSelectableMethod(row, index) {
      return true;
    },

    // 设置单元行样式
    tableRowClassName() { },
    // 批量删除
    toBatchDel() {
      this.toDel(this.selection.join(','), true);
    },
    // 单个删除
    toDel(id, isBatch) {
      if (!id) {
        return this.$message.warning('请选中一条记录');
      }

      this.$get(this.pageInfo.del, { id: id })
        .then(res => {
          this.$message.success(res.msg)
          // 更新数据
          if (isBatch) {
            // 批量删除，刷新页面
            this.getData();
          } else {
            let table = this.tableData.data;
            let { index } = find(table, 'id', id);
            table.splice(index, 1);
            this.tableData.pageInfo.totalResult -= 1;
          }
          this.afterDel(id);
        })
        .catch(error => {
          this.$message.error(error.message);
        })
    },
    // 新增
    toAdd() {
      this.$router.push({
        path: this.pageInfo.add,
        query: this.tableConfig.addQuery,
      })
    },
    // 编辑
    toEdit(row, query) {
      this.$router.push({
        path: this.pageInfo.edit,
        query: Object.assign({}, { id: row.id }, query)
      })
    },
    // 查看
    toView(row, query) {
      console.log(this.pageInfo.view)
      this.$router.push({
        path: this.pageInfo.view,
        query: Object.assign({}, { id: row.id }, query)
      })
    },
    // 导入
    toImport() {
      this.$router.push({
        path: this.pageInfo.importView,
        query: this.tableConfig.addQuery,
      })
    },
    // 返回
    toBack() {
      this.$router.push({
        path: this.pageInfo.back
      })
    },
    // 开启、关闭
    open() {

    },

  },
  computed: {
    tableConfig() {
      return Object.assign({}, this.defaultConfig, this.config)
    },
    pageInfo() {
      const urls = { // 操作所需的url地址，和url同路径
        list: this.$route.path,
        edit: this.$route.path.replace('/list', '/edit'),
        save: this.$route.path.replace('/list', '/save'),
        del: this.$route.path.replace('/list', '/delete'),
        add: this.$route.path.replace('/list', '/add'),
        view: this.$route.path.replace('/list', '/view'),
        importView: this.$route.path.replace('/list', '/importView'),
        exclude: this.$route.path.replace('/list', '/list/exclude'),
      }
      return Object.assign({}, urls, this.urls)
    },
  },
  data() {
    return {
      source: axios.CancelToken.source(),
      loadingTimer: null,
      query: this.$route.query, // url-query参数
      selection: [], // 表格内置的多选
      urls: {},
      toString: [],
      defaultConfig: {
        search: [], // 头部搜索配置
        columns: [], // 表格列信息配置
        addQuery: {}, // 新增按钮携带的参数
        buttons: [], // 增加查询区域自定义操作按钮,格式：[{label:'按钮显示名称',isShow:是否显示true/false,loading:true/false,type:'类型',icon:'图标',method:function(){}}]
        methods: {
          handleSelectionChange: this.handleSelectionChange,
          handleRowClick: this.handleRowClick,
          tableRowClassName: this.tableRowClassName,
          handleSpanMethod: this.handleSpanMethod,
          handleSortChange: this.handleSortChange,
          handleIndexMethod: this.handleIndexMethod,
          handleSelectableMethod: this.handleSelectableMethod,
          edit: this.toEdit,
          add: this.toAdd,
          del: this.toBatchDel,
          back: this.toBack,
          importView: this.toImport,
          refresh: this.getData,
        }
      },
      tableData: { // 表格数据
        loading: true, // ajax请求状态
        dict: {},
        result: [],
        pageInfo: {},
      }
    }
  }
}