gwlz/jp-ui/src/views/gwflow/GwFlowList.vue

<template>
  <div class="page">
    <el-form
      :inline="true"
      v-if="searchVisible"
      class="query-form m-b-10"
      ref="searchForm"
      :model="searchForm"
      @keyup.enter="refreshList()"
      @submit.prevent
    >
      <!-- 搜索框-->
      <el-form-item>
        <el-button type="primary" @click="refreshList()" icon="search">查询</el-button>
        <el-button type="default" @click="resetSearch()" icon="refresh-right">重置</el-button>
      </el-form-item>
    </el-form>

		<div class="jp-table">
		  <vxe-toolbar ref="gwFlowToolbar" :refresh="{query: refreshList}" import export print custom>
		    <template #buttons>
				<el-button v-if="hasPermission('gwflow:gwFlow:add')" type="primary"  icon="plus" @click="add()">新建</el-button>
				<el-button v-if="hasPermission('gwflow:gwFlow:edit')" type="warning" icon="edit-filled" @click="edit()" v-show="$refs.gwFlowTable && $refs.gwFlowTable.getCheckboxRecords().length === 1" plain>修改</el-button>
				<el-button v-if="hasPermission('gwflow:gwFlow:del')" type="danger"   icon="del-filled" @click="del()" v-show="$refs.gwFlowTable && $refs.gwFlowTable.getCheckboxRecords().length > 0" plain>删除</el-button>
		    </template>
		    <template #tools>
		<vxe-button
		  type="text"
		  :title="
		    searchVisible ? '收起检索' : '展开检索'
		  "
		  icon="vxe-icon-search"
		  class="tool-btn"
		  @click="searchVisible = !searchVisible"
		></vxe-button>
		<vxe-button
		  type="text"
		  title="下载导入模板"
		  v-if="hasPermission('gwflow:gwFlow:import')"
		  icon="iconfont icon-xiazaimoban1"
		  class="tool-btn m-l-0"
		  @click="downloadTpl()"
		>
		</vxe-button>
    </template>
		  </vxe-toolbar>
		  <div class="jp-table-body">
		  <vxe-table
				border="inner"
				auto-resize
				resizable
				height="auto"
				:loading="loading"
				size="small"
				ref="gwFlowTable"
				show-header-overflow
				show-overflow
				highlight-hover-row
				:menu-config="{}"
				:print-config="{}"
  :import-config="{
    importMethod: importMethod,
    types: ['csv', 'xls', 'xlsx'],
    remote: true,
  }"
  :export-config="{
    remote: true,
    filename: `公文流程数据${moment(new Date()).format(
		'YYYY-MM-DD'
    )}`,
    sheetName: '公文流程数据',
    exportMethod: exportMethod,
    types: ['xlsx'],
    modes: ['current', 'selected', 'all'],
  }"

				@sort-change="sortChangeHandle"
				:sort-config="{remote:true}"
				:data="dataList"
				:checkbox-config="{}">
				<vxe-column type="seq" width="40"></vxe-column>
				<vxe-column type="checkbox"  width="40px"></vxe-column>
    <vxe-column
		  field="gwId"
		  sortable
		  title="公文id">
				<template  #default="{ row }">
				  <el-link  type="primary" :underline="false" v-if="hasPermission('gwflow:gwFlow:edit')" @click="edit(row.id)">{{row.gwId}}</el-link>
				  <el-link  type="primary" :underline="false" v-else-if="hasPermission('gwflow:gwFlow:view')"  @click="view(row.id)">{{row.gwId}}</el-link>
				  <span v-else>{{row.gwId}}</span>
				</template>
		</vxe-column>
    <vxe-column
		  field="content"
		  sortable
		  title="内容">
		</vxe-column>
    <vxe-column
		  field="signfj"
		  sortable
		  title="签名附件">
		  <template  #default="{ row }">
		    <template v-if="row.signfj">
				  <el-image
				    style="height: 50px;width:50px;margin-right:10px;"
				    :src="src" v-for="(src, index) in row.signfj.split(',')" :key="index"
				    :preview-src-list="row.signfj.split(',')">
				  </el-image>
		     </template>
		  </template>
		</vxe-column>
    <vxe-column
		  field="state"
		  sortable
		  title="流程状态">
		  <template #default="{ row }">
				  {{ $dictUtils.getDictLabel("gw_flow_state", row.state, '-') }}
		  </template>
		</vxe-column>
    <vxe-column
		  field="createBy.id"
		  sortable
		  title="创建者">
		</vxe-column>
		<vxe-column
		  fixed="right"
		  align="center"
		  width="200"
		  title="操作">
		  <template   #default="{ row }">
		    <el-button v-if="hasPermission('gwflow:gwFlow:view')" type="primary" text icon="view-filled" @click="view(row.id)">查看</el-button>
		    <el-button v-if="hasPermission('gwflow:gwFlow:edit')" type="primary" text icon="edit-filled" @click="edit(row.id)">修改</el-button>
		    <el-button v-if="hasPermission('gwflow:gwFlow:del')"  type="danger"  text icon="del-filled" @click="del(row.id)">删除</el-button>
		  </template>
		</vxe-column>
    </vxe-table>
    <vxe-pager
		background
		size="small"
		:current-page="tablePage.currentPage"
		:page-size="tablePage.pageSize"
		:total="tablePage.total"
		:page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
		:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
		@page-change="currentChangeHandle">
    </vxe-pager>
    </div>
    </div>
		  <!-- 弹窗, 新增 / 修改 -->
    <GwFlowForm  ref="gwFlowForm" @refreshDataList="refreshList"></GwFlowForm>
  </div>
</template>

<script>
  import GwFlowForm from './GwFlowForm'
  import gwFlowService from '@/api/gwflow/gwFlowService'
  export default {
    data () {
		return {
		  searchVisible: true,
		  searchForm: {
		  },
		  dataList: [],
		  tablePage: {
		    total: 0,
		    currentPage: 1,
		    pageSize: 10,
		    orders: [{ column: "create_time", asc: false }],
		  },
		  loading: false
		}
    },
    components: {
		GwFlowForm
    },
    created () {
    },    
    mounted () {
		this.$nextTick(() => {
		  // 将表格和工具栏进行关联
		  const $table = this.$refs.gwFlowTable
		  const $toolbar = this.$refs.gwFlowToolbar
		  $table.connect($toolbar)
		})
    }, 
    activated () {
		this.refreshList()
    },
    methods: {
		// 获取数据列表
		refreshList () {
		  this.loading = true
		  gwFlowService.list({
		    'current': this.tablePage.currentPage,
		    'size': this.tablePage.pageSize,
		    'orders': this.tablePage.orders,
		    ...this.searchForm
		  }).then((data) => {
		    this.dataList = data.records
		    this.tablePage.total = data.total
		    this.loading = false
		  })
		},
		// 当前页
		currentChangeHandle ({ currentPage, pageSize }) {
		  this.tablePage.currentPage = currentPage
		  this.tablePage.pageSize = pageSize
		  this.refreshList()
		},
		// 排序
    sortChangeHandle(obj) {
		  this.tablePage.orders = [];
		  if (obj.order != null) {
		    this.tablePage.orders = [{ column: obj.column.sortBy || this.$utils.toLine(obj.property), asc: obj.order === "asc" }];
		  } else {
		    this.tablePage.orders = [{ column: "create_time", asc: false }];
		  }
		  this.refreshList();
		},
		// 新增
		add () {
		  this.$refs.gwFlowForm.init('add', '')
		},
		// 修改
		edit (id) {
		  id = id || this.$refs.gwFlowTable.getCheckboxRecords().map(item => {
		    return item.id
		  })[0]
		  this.$refs.gwFlowForm.init('edit', id)
		},
		// 查看
		view (id) {
		  this.$refs.gwFlowForm.init('view', id)
		},
		// 删除
		del (id) {
		  let ids = id || this.$refs.gwFlowTable.getCheckboxRecords().map(item => {
		    return item.id
		  }).join(',')
		  this.$confirm(`确定删除所选项吗?`, '提示', {
		    confirmButtonText: '确定',
		    cancelButtonText: '取消',
		    type: 'warning'
		  }).then(() => {
		    this.loading = true
		    gwFlowService.delete(ids).then((data) => {
				this.$message.success(data)
				this.refreshList()
				this.loading = false
		    })
		  })
		},
		// 下载模板
		downloadTpl() {
		this.loading = true
		gwFlowService
		  .exportTemplate()
		  .then((data) => {
		    // 将二进制流文件写入excel表，以下为重要步骤
		    this.$utils.downloadExcel(data, "公文流程导入模板");
		    this.loading = false
		  })
		  .catch(function (err) {
				this.loading = false
		    if (err.response) {
				console.log(err.response);
		    }
		  });
    },
    // 自定义服务端导入
    importMethod({ file }) {
		// 处理表单
		const formBody = new FormData();
		formBody.append("file", file);
		this.loading = true
		gwFlowService.importExcel(formBody).then((result) => {
		  this.$message.success({
		    dangerouslyUseHTMLString: true,
		    message: result,
		  });
		  this.refreshList();
		});
    },
    // 自定义服务端导出
    exportMethod({ options }) {
		// 传给服务端的参数
		const params = {
		  current: this.tablePage.currentPage,
		  size: this.tablePage.pageSize,
		  orders: this.tablePage.orders,
		  ...this.searchForm,
		  filename: options.filename,
		  sheetName: options.sheetName,
		  isHeader: options.isHeader,
		  original: options.original,
		  mode: options.mode,
		  selectIds:
		    options.mode === "selected"
				? options.data.map((item) => item.id)
				: [],
		  exportFields: options.columns.map(
		    (column) => column.property && column.property.split(".")[0]
		  ),
		};
		this.loading = true;
		return gwFlowService
		  .exportExcel(params)
		  .then((data) => {
		    // 将二进制流文件写入excel表，以下为重要步骤
		    this.$utils.downloadExcel(data, options.filename);
		    this.loading = false;
		  })
		  .catch(function (err) {
		    if (err.response) {
				console.log(err.response);
		    }
		  });
    },
		resetSearch () {
		  this.$refs.searchForm.resetFields()
		  this.refreshList()
		}
    }
  }
</script>