TableListMixin.js 7.48 KB
/**
 * 新增修改完成调用 dialogFormOk方法重置表单,修改新增弹框组件ref定义为dialogForm
 * 弹框组件中新增方法add 编辑方法 edit
 * 表格页面的data中tableUrl定义为接口地址
 * 弹窗页面定义初始this.init()方法,获取弹窗需要的数据
 * 表格ref=xTree
 */
import { deleteAction, getAction } from '@/api/manageApi'

export const TableListMixin = {
  data() {
    return {
      // 查询拼接json字符串
      queryOptions: '',
      queryParam: {}, // 查询条件
      /* 数据源 */
      tableData: [],
      /* 分页参数*/
      ipagination: {
        pageNumber: 0,
        pageSize: 10
      },
      /* table选中行*/
      selectionRows: [],
      loading: false // 表格加载状态
    }
  },
  created() {
    // console.log(' -- mixin created -- ')
    // 初始化字典配置 在需要页面调用字典值获取方法
    this.initDictConfig()
  },
  methods: {
    // 加载表格数据
    /**
     * @description: 加载表格数据
     * @param {*} arg
     * @author: renchao
     */
    loadData(arg) {
      if (!this.tableUrl) {
        console.log('请设置tableUrl属性为接口地址!')
        return
      }
      // 加载数据 若传入参数1则加载第一页的内容
      // if (arg === 1) {
      // }
      const params = this.getQueryParams() // 查询条件
      this.loading = true
      getAction(this.tableUrl, params)
        .then(res => {
          if (res.status === 1) {
            this.loading = false
            this.tableData = res.content
            this.$nextTick(() => {
              if (this.tableData.length !== 0) {
                this.$refs.xTree && this.$refs.xTree.setAllTreeExpand(true)
              }
            })
          } else {
            this.$message.error({ message: res.message, showClose: true })
            this.loading = false
          }
        })
        .catch(error => {
          console.log('error', error)
          this.loading = false
        })
    },
    // 字典值配置
    /**
     * @description: 字典值配置
     * @author: renchao
     */
    initDictConfig() {
      // console.log('假初始化字典值方法!')
    },
    // 选择所有和取消所有
    /**
     * @description: 选择所有和取消所有
     * @param {*} checked
     * @param {*} records
     * @author: renchao
     */
    selectAllEvent({ checked, records }) {
      this.selectionRows = records
    },
    //   选中节点
    /**
     * @description: 选中节点
     * @param {*} records
     * @author: renchao
     */
    selectChangeEvent({ records }) {
      this.selectionRows = records
    },
    // 使用查询条件查询
    /**
     * @description: 使用查询条件查询
     * @author: renchao
     */
    searchQuery() {
      this.loadData()
    },
    // 获取查询条件
    /**
     * @description: 获取查询条件
     * @author: renchao
     */
    getQueryParams() {
      if (this.queryOptions !== '') {
        this.queryParam.queryOptions = JSON.stringify(this.queryOptions)
      }
      return this.$filterNullObj(this.queryParam)
    },
    // 新增
    /**
     * @description: 新增
     * @author: renchao
     */
    handleAdd: function() {
      this.$refs.dialogForm.add()
      this.$refs.dialogForm.title = '新增'
    },
    // 修改
    /**
     * @description: 修改
     * @param {*} record
     * @author: renchao
     */
    handleEdit: function(record) {
      localStorage.setItem('record', JSON.stringify(record))
      this.$refs.dialogForm.edit(record)
      this.$refs.dialogForm.title = '修改'
    },
    // 删除
    /**
     * @description: 删除
     * @param {*} id
     * @param {*} content
     * @author: renchao
     */
    handleDelete: function(id, content = '') {
      this.$confirm(
        `<div  class="customer-message-wrapper">
              <h5 class="title">您确认要执行该操作用于以下信息:</h5>
              <p class="content" aria-controls="${content}">${content}
              </p>
               <p class="result">执行后,数据将
                 <span >无法恢复</span>
                </p>
        </div>`,
        '执行确认',
        {
          dangerouslyUseHTMLString: true,
          customClass: 'customer-delete',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          if (!this.tableUrl) {
            this.$message.error({
              message: '请设置tableUrl属性为接口地址!',
              showClose: true
            })
            return
          }
          const url = this.tableUrl + '/' + id
          deleteAction(url).then(res => {
            if (res.status === 1) {
              this.$message.success({ message: res.message, showClose: true })
              this.loadDataS(this.subcode)
            } else {
              this.$message.error({ message: res.message, showClose: true })
            }
          })
        })
        .catch(() => {})
    },
    // 批量删除
    /**
     * @description: 批量删除
     * @author: renchao
     */
    batchDel: function() {
      if (!this.tableUrl) {
        this.$message.error({
          message: '请设置tableUrl属性为接口地址!',
          showClose: true
        })
        return
      }
      if (this.selectionRows.length === 0) {
        this.$message.error({
          message: '请选择删除项!',
          showClose: true
        })
        return
      }
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const ids = []
          this.selectionRows.forEach(element => {
            ids.push(element.id)
          })
          deleteAction(this.tableUrl, ids).then(res => {
            if (res.status === 1) {
              this.$message.success({ message: res.message, showClose: true })
              this.loadData()
            } else {
              this.$message.error({ message: res.message, showClose: true })
            }
          })
        })
        .catch(() => {})
    },
    // 新增或修改成功时,重载列表
    /**
     * @description: 新增或修改成功时,重载列表
     * @author: renchao
     */
    dialogFormOk() {
      this.loadData()
    },
    // 导出
    /**
     * @description: 导出
     * @param {*} data
     * @param {*} name
     * @author: renchao
     */
    handleExportXls(data, name) {
      if (name === '菜单' || name === '部门' || name === '机构' ||
        name === '资源' || name === '资源分类' || name === '数据字典' || name === '行政区划') {
        const params = this.getQueryParams() // 查询条件
        getAction(this.tableUrl + '/export', params)
          .then(res => {
            if (res.status === 1) {
              data = res.content
              this.$downloadJson(data, name)
            } else {
              this.$message.error({ message: '导出失败', showClose: true })
            }
          })
      } else if (name === '人员') {
        exportUserList(this.queryParam).then((res) => {
          if (res.status === 1) {
            data = res.content
            this.$downloadJson(data, name)
          } else {
            this.$message.error({ message: '导出失败', showClose: true })
          }
        })
      } else {
        this.$downloadJson(data, name)
      }
    },
    /* 导入 */
    /**
     * @description: 导入
     * @author: renchao
     */
    handleImportExcel(info) {}
  }
}