gwlz/jp-ui/src/views/circulation2/GwCirculationCard2List.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 prop="yearNum" label="年度：">
        <el-input v-model="searchForm.yearNum" placeholder="请输入年度" clearable></el-input>
		   </el-form-item>
      <el-form-item prop="cardNum" label="卡号：">
        <el-input v-model="searchForm.cardNum" placeholder="请输入卡号" clearable></el-input>
		   </el-form-item> -->
      <el-form-item prop="sendingAgency" label="来文机关：">
        <el-input v-model="searchForm.sendingAgency" placeholder="请输入来文机关" clearable></el-input>
		   </el-form-item>
      <!-- <el-form-item prop="docFontSize" label="来文字号：">
        <el-input v-model="searchForm.docFontSize" placeholder="请输入来文字号" clearable></el-input>
		   </el-form-item>
      <el-form-item prop="fileSource" label="文件来源：">
        <el-input v-model="searchForm.fileSource" placeholder="请输入文件来源" clearable></el-input>
		   </el-form-item> -->
      <el-form-item prop="writtenTime" label="成文时间：">
        <el-date-picker
						v-model="searchForm.writtenTime"
						type="datetime"
						value-format="YYYY-MM-DD HH:mm:ss"
						placeholder="请选择成文时间">
        </el-date-picker>
		   </el-form-item>
      <el-form-item prop="receivingTime" label="收文时间：">
        <el-date-picker
						v-model="searchForm.receivingTime"
						type="datetime"
						value-format="YYYY-MM-DD HH:mm:ss"
						placeholder="请选择收文时间">
        </el-date-picker>
		   </el-form-item>
      <el-form-item prop="contentSummary" label="内容摘要：">
        <el-input v-model="searchForm.contentSummary" placeholder="请输入内容摘要" clearable></el-input>
		   </el-form-item>
      <el-form-item prop="state" label="状态：">
        <el-select v-model="searchForm.state" placeholder="请选择状态">
						  <el-option
						    v-for="item in $dictUtils.getDictList('gw_state')"
						    :key="item.value"
						    :label="item.label"
						    :value="item.value">
						  </el-option>
						</el-select>
		   </el-form-item>
      <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"  style="height: calc(100% - 120px);">
		  <vxe-toolbar ref="gwCirculationCard2Toolbar" :refresh="{query: refreshList}" import export print custom>
		    <template #buttons>
				<el-button v-if="hasPermission('circulation2:gwCirculationCard2:add')" type="primary"  icon="plus" @click="add()">新建</el-button>
				<el-button v-if="hasPermission('circulation2:gwCirculationCard2:edit')" type="warning" icon="edit-filled" @click="edit()" v-show="$refs.gwCirculationCard2Table && $refs.gwCirculationCard2Table.getCheckboxRecords().length === 1" plain>修改</el-button>
				<el-button v-if="hasPermission('circulation2:gwCirculationCard2:del')" type="danger"   icon="del-filled" @click="del()" v-show="$refs.gwCirculationCard2Table && $refs.gwCirculationCard2Table.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('circulation2:gwCirculationCard2: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="gwCirculationCard2Table"
				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="yearNum"
		  sortable
		  title="年度">
				<template  #default="{ row }">
				  <el-link  type="primary" :underline="false" v-if="hasPermission('circulation2:gwCirculationCard2:edit')" @click="edit(row.id)">{{row.yearNum}}</el-link>
				  <el-link  type="primary" :underline="false" v-else-if="hasPermission('circulation2:gwCirculationCard2:view')"  @click="view(row.id)">{{row.yearNum}}</el-link>
				  <span v-else>{{row.yearNum}}</span>
				</template>
		</vxe-column>
    <vxe-column
		  field="cardNum"
		  sortable
		  title="卡号">
		</vxe-column>
    <vxe-column
		  field="sendingAgency"
		  sortable
		  title="来文机关">
		</vxe-column>
    <vxe-column
		  field="docFontSize"
		  sortable
		  title="来文字号">
		</vxe-column>
    <vxe-column
		  field="fileSource"
		  sortable
		  title="文件来源">
		</vxe-column>
    <vxe-column
		  field="writtenTime"
		  sortable
		  title="成文时间">
		</vxe-column>
    <vxe-column
		  field="receivingTime"
		  sortable
		  title="收文时间">
		</vxe-column>
    <vxe-column
		  field="contentSummary"
		  sortable
		  title="内容摘要">
		</vxe-column>
    <vxe-column
		  field="attachedDocumentId"
		  sortable
		  title="来文附件">
		  <template  #default="{ row }">
		    <template v-if="row.attachedDocumentId">
				  <el-image
				    style="height: 50px;width:50px;margin-right:10px;"
				    :src="src" v-for="(src, index) in row.attachedDocumentId.split(',')" :key="index"
				    :preview-src-list="row.attachedDocumentId.split(',')">
				  </el-image>
		     </template>
		  </template>
		</vxe-column>

		<vxe-column
		  field="state"
		  sortable
		  title="状态">
		  <template #default="{ row }">
				  {{ $dictUtils.getDictLabel("gw_state", row.state, '-') }}
		  </template>
		</vxe-column>

		<vxe-column
		  fixed="right"
		  align="center"
		  width="200"
		  title="操作">
		  <template   #default="{ row }">
		    <el-button v-if="hasPermission('circulation2:gwCirculationCard2:view')" type="primary" text icon="view-filled" @click="view(row.id)">查看</el-button>

			<el-button v-if="daiban" type="primary" text icon="view-filled" @click="view2(row.id)">阅办</el-button>
		    <!-- <el-button v-if="hasPermission('circulation2:gwCirculationCard2:edit')" type="primary" text icon="edit-filled" @click="edit(row.id)">修改</el-button> -->
		    <el-button v-if="hasPermission('circulation2:gwCirculationCard2: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>
		  <!-- 弹窗, 新增 / 修改 -->
    <GwCirculationCard2Form  ref="gwCirculationCard2Form" @refreshDataList="refreshList"></GwCirculationCard2Form>
	<GwCirculationCard2Form2  ref="gwCirculationCard2Form2" @refreshDataList="refreshList"></GwCirculationCard2Form2>
	<GwCirculationCard2FormYb  ref="GwCirculationCard2FormYb" @refreshDataList="refreshList"></GwCirculationCard2FormYb>
	<!-- <fileInfo  ref="fileInfo" @refreshDataList="refreshList"></fileInfo> -->

  </div>
</template>

<script>
  import GwCirculationCard2Form from './GwCirculationCard2Form'
  import GwCirculationCard2Form2 from './GwCirculationCard2Form2'
  import GwCirculationCard2FormYb from './GwCirculationCard2FormYb'


  //import fileInfo from './fileInfo'
  import gwCirculationCard2Service from '@/api/circulation2/gwCirculationCard2Service'
  export default {
    data () {
		return {
		  searchVisible: true,
		  daiban:false,
		  searchForm: {
		    yearNum: '',
		    cardNum: '',
		    sendingAgency: '',
		    docFontSize: '',
		    fileSource: '',
		    writtenTime: '',
		    receivingTime: '',
		    contentSummary: '',
		    state: '1'
		  },
		  dataList: [],
		  tablePage: {
		    total: 0,
		    currentPage: 1,
		    pageSize: 10,
		    orders: [{ column: "a.create_time", asc: false }],
		  },
		  loading: false
		}
    },
    components: {
		GwCirculationCard2Form,
		GwCirculationCard2Form2,
		GwCirculationCard2FormYb
    },
    created () {
    },
    mounted () {
		this.$nextTick(() => {
		  // 将表格和工具栏进行关联
		  const $table = this.$refs.gwCirculationCard2Table
		  const $toolbar = this.$refs.gwCirculationCard2Toolbar
		  $table.connect($toolbar)
		})
    },
    activated () {
		this.refreshList()
    },
    methods: {
		// 获取数据列表
		refreshList () {
		  this.loading = true


		  gwCirculationCard2Service.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

			//选择待办的时候
			if(this.searchForm.state=='1'){
						  this.daiban=true;
			}else{
						  this.daiban=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.gwCirculationCard2Form.init('add', '')
		},
		// 修改
		edit (id) {
		  id = id || this.$refs.gwCirculationCard2Table.getCheckboxRecords().map(item => {
		    return item.id
		  })[0]
		  this.$refs.gwCirculationCard2Form.init('edit', id)
		},
		// 查看
		view (id) {
		 //this.$refs.gwCirculationCard2Form.init('view', id)
		 // this.$refs.fileInfo.init('view', id)
		 //this.$refs.gwCirculationCard2Form2.init('view', id)
		 this.$refs.GwCirculationCard2FormYb.init('view', id)
		},
		// 查看
		view2 (id) {
		  this.$refs.GwCirculationCard2FormYb.init('edit', id)
		},
		// 删除
		del (id) {
		  let ids = id || this.$refs.gwCirculationCard2Table.getCheckboxRecords().map(item => {
		    return item.id
		  }).join(',')
		  this.$confirm(`确定删除所选项吗?`, '提示', {
		    confirmButtonText: '确定',
		    cancelButtonText: '取消',
		    type: 'warning'
		  }).then(() => {
		    this.loading = true
		    gwCirculationCard2Service.delete(ids).then((data) => {
				this.$message.success(data)
				this.refreshList()
				this.loading = false
		    })
		  })
		},
		// 下载模板
		downloadTpl() {
		this.loading = true
		gwCirculationCard2Service
		  .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
		gwCirculationCard2Service.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 gwCirculationCard2Service
		  .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>