antis-ncc-admin/src/views/tbAreaLine/index.vue

<template>
	<div class="NCC-common-layout">
		<div class="NCC-common-layout-center">
			<el-row class="NCC-common-search-box" :gutter="16">
				<el-form @submit.native.prevent>
					<el-col :span="6">
						<el-form-item label="地域">
							<el-select v-model="query.areaId" placeholder="地域" clearable>
								<el-option v-for="(item, index) in areaIdOptions" :key="index" :label="item.F_Name"
									:value="item.F_Id" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="线路标题">
							<el-input v-model="query.title" placeholder="线路标题" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="线路概况">
							<el-input v-model="query.remark" placeholder="线路概况" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
							<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
						</el-form-item>
					</el-col>
				</el-form>
			</el-row>
			<div class="NCC-common-layout-main NCC-flex-main">
				<div class="NCC-common-head">
					<div>
						<el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">新增</el-button>
						<el-button type="text" icon="el-icon-download" @click="exportData()">导出</el-button>
						<el-button type="text" icon="el-icon-delete" @click="handleBatchRemoveDel()">批量删除</el-button>
					</div>
					<div class="NCC-common-head-right">
						<el-tooltip effect="dark" content="刷新" placement="top">
							<el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false"
								@click="reset()" />
						</el-tooltip>
						<screenfull isContainer />
					</div>
				</div>
				<NCC-table v-loading="listLoading" :data="list" has-c @selection-change="handleSelectionChange">
					<el-table-column label="地域" prop="Name" align="left">
						<template slot-scope="scope">{{ scope.row.area&&scope.row.area.Name}}</template>
					</el-table-column>
					<el-table-column prop="title" label="线路标题" align="left" />
					<el-table-column prop="remark" label="线路概况" align="left" />
					<el-table-column prop="ratio" label="百分比%" align="left" />
					<el-table-column prop="creatorTime" label="创建时间" align="left" :formatter="ncc.tableDateFormat" />
					<el-table-column prop="lastModifyTime" label="修改时间" align="left" :formatter="ncc.tableDateFormat" />
					<el-table-column label="操作" fixed="right" width="100">
						<template slot-scope="scope">
							<el-button type="text" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
							<el-button type="text" @click="handleDel(scope.row.id)" class="NCC-table-delBtn">删除
							</el-button>
						</template>
					</el-table-column>
				</NCC-table>
				<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
					@pagination="initData" />
			</div>
		</div>
		<NCC-Form v-if="formVisible" ref="NCCForm" @refresh="refresh" />
		<ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
	</div>
</template>
<script>
	import request from '@/utils/request'
	import {
		getDictionaryDataSelector
	} from '@/api/systemData/dictionary'
	import NCCForm from './Form'
	import ExportBox from './ExportBox'
	import {
		previewDataInterface
	} from '@/api/systemData/dataInterface'
	export default {
		components: {
			NCCForm,
			ExportBox
		},
		data() {
			return {
				showAll: false,
				query: {
					areaId: undefined,
					title: undefined,
					remark: undefined,
				},
				list: [],
				listLoading: true,
				multipleSelection: [],
				total: 0,
				listQuery: {
					currentPage: 1,
					pageSize: 20,
					sort: "desc",
					sidx: "",
				},
				formVisible: false,
				exportBoxVisible: false,
				columnList: [{
						prop: 'areaId',
						label: '地域'
					},
					{
						prop: 'title',
						label: '线路标题'
					},
					{
						prop: 'remark',
						label: '线路概况'
					},
					{
						prop: 'creatorTime',
						label: '创建时间'
					},
					{
						prop: 'lastModifyTime',
						label: '修改时间'
					}, {
						prop: 'ratio',
						label: '百分比%'
					},
				],
				areaIdOptions: [],
			}
		},
		computed: {},
		created() {
			this.initData()
			this.getareaIdOptions();
		},
		methods: {
			getareaIdOptions() {
				previewDataInterface('393301869759300869').then(res => {
					this.areaIdOptions = res.data
				});
			},
			initData() {
				this.listLoading = true;
				let _query = {
					...this.listQuery,
					...this.query
				};
				let query = {}
				for (let key in _query) {
					if (Array.isArray(_query[key])) {
						query[key] = _query[key].join()
					} else {
						query[key] = _query[key]
					}
				}
				request({
					url: `/api/Blind/TbAreaLine`,
					method: 'GET',
					data: query
				}).then(res => {
					this.list = res.data.list
					this.total = res.data.pagination.total
					this.listLoading = false
				})
			},
			handleDel(id) {
				this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					type: 'warning'
				}).then(() => {
					request({
						url: `/api/Blind/TbAreaLine/${id}`,
						method: 'DELETE'
					}).then(res => {
						this.$message({
							type: 'success',
							message: res.msg,
							onClose: () => {
								this.initData()
							}
						});
					})
				}).catch(() => {});
			},
			handleSelectionChange(val) {
				const res = val.map(item => item.id)
				this.multipleSelection = res
			},
			handleBatchRemoveDel() {
				if (!this.multipleSelection.length) {
					this.$message({
						type: 'error',
						message: '请选择一条数据',
						duration: 1500,
					})
					return
				}
				const ids = this.multipleSelection
				this.$confirm('您确定要删除这些数据吗, 是否继续？', '提示', {
					type: 'warning'
				}).then(() => {
					request({
						url: `/api/Blind/TbAreaLine/batchRemove`,
						method: 'POST',
						data: ids,
					}).then(res => {
						this.$message({
							type: 'success',
							message: res.msg,
							onClose: () => {
								this.initData()
							}
						});
					})
				}).catch(() => {})
			},
			addOrUpdateHandle(id, isDetail) {
				this.formVisible = true
				this.$nextTick(() => {
					this.$refs.NCCForm.init(id, isDetail)
				})
			},
			exportData() {
				this.exportBoxVisible = true
				this.$nextTick(() => {
					this.$refs.ExportBox.init(this.columnList)
				})
			},
			download(data) {
				let query = {
					...data,
					...this.listQuery,
					...this.query
				}
				request({
					url: `/api/Blind/TbAreaLine/Actions/Export`,
					method: 'GET',
					data: query
				}).then(res => {
					if (!res.data.url) return
					window.location.href = this.define.comUrl + res.data.url
					this.$refs.ExportBox.visible = false
					this.exportBoxVisible = false
				})
			},
			search() {
				this.listQuery = {
					currentPage: 1,
					pageSize: 20,
					sort: "desc",
					sidx: "",
				}
				this.initData()
			},
			refresh(isrRefresh) {
				this.formVisible = false
				if (isrRefresh) this.reset()
			},
			reset() {
				for (let key in this.query) {
					this.query[key] = undefined
				}
				this.listQuery = {
					currentPage: 1,
					pageSize: 20,
					sort: "desc",
					sidx: "",
				}
				this.initData()
			}
		}
	}
</script>