sis-manage/src/views/stationConfiguration/equipmentmodel/index.vue

<template>
	<div class="table-container">
		<vab-query-form>
			<div class="title">
				<div class="left">
					<div class="left-item">
						<div style="width: 70px;">名称：</div>
						<el-input v-model="fuzzyQuery_name" placeholder="请输入" clearable />
					</div>
					<el-button icon="el-icon-search" type="primary" native-type="submit" @click="handleQuery">
						查询
					</el-button>
				</div>
				<div class="right">
					<el-button icon="el-icon-plus" type="primary" @click="handleAdd">
						添加
					</el-button>
					<el-button icon="el-icon-delete" type="danger" @click="handleDelete">
						删除
					</el-button>
					<UploadExcel style="margin-left: 10px;" @getResult="getMyExcelData"></UploadExcel>
					<ExportExcel :exportList="exportExcel" :useType="'export'" partsName="设备型号"></ExportExcel>
					<ExportExcel :exportList="templateExcel" :useType="'template'" partsName="设备型号模板"></ExportExcel>
				</div>
			</div>
			<el-table header-cell-class-name="table_header_style" border ref="tableSort" v-loading="listLoading" :data="list"
				:element-loading-text="elementLoadingText" :height="height" @selection-change="setSelectRows">
				<el-table-column show-overflow-tooltip type="selection" align="center" width="40"></el-table-column>
				<el-table-column show-overflow-tooltip label="编号" prop="id" align="center" sortable></el-table-column>
				<el-table-column show-overflow-tooltip label="编码" prop="nemCode" align="center" sortable></el-table-column>
				<el-table-column show-overflow-tooltip label="名称" prop="name" align="center" sortable></el-table-column>
				<el-table-column show-overflow-tooltip label="描述" prop="description" align="center" sortable></el-table-column>
				<el-table-column show-overflow-tooltip label="容量" prop="powerProduction" align="center" sortable>
				</el-table-column>
				<el-table-column :formatter="windturbineManufacturerIdFormatter" show-overflow-tooltip label="厂商名称" prop="windturbineManufacturerId" align="center" sortable>
				</el-table-column>
				<el-table-column show-overflow-tooltip label="图片" prop="photo" align="center" sortable>
				</el-table-column>
				<el-table-column width="180" show-overflow-tooltip label="传输总发电量单位" prop="unit" align="center" sortable></el-table-column>
				<el-table-column show-overflow-tooltip label="切入风速" prop="cutinwindSpeed" align="center" sortable>
				</el-table-column>
				<el-table-column show-overflow-tooltip label="额定风速" prop="ratedwindSpeed" align="center" sortable>
				</el-table-column>
				<el-table-column show-overflow-tooltip label="切出风速" prop="cutoutwindSpeed" align="center" sortable>
				</el-table-column>
				<el-table-column width="150" show-overflow-tooltip label="叶片切入面积" prop="sweptArea" align="center" sortable>
				</el-table-column>
				<el-table-column show-overflow-tooltip label="设备类别" prop="equipmentCategory" :formatter="equipmentCategoryFormatter" align="center" sortable>
				</el-table-column>
				<el-table-column show-overflow-tooltip label="操作" width="100px" fixed="right">
					<template #default="{ row }">
						<el-button type="text" @click="handleEdit(row)">编辑</el-button>
						<el-button type="text" @click="handleDelete(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination :background="background" :current-page="queryForm.pageNo" :layout="layout"
				:page-size="queryForm.pageSize" :total="total" @current-change="handleCurrentChange"
				@size-change="handleSizeChange"></el-pagination>
			<table-edit ref="edit" :options="options" :stationList="stationList" @save-success="fetchData"></table-edit>
		</vab-query-form>
	</div>
</template>
<script>
import UploadExcel from '@/components/UploadExcel/index'
import ExportExcel from '@/components/ExportExcel/index'
import api from '@/api/station'
import apis from '@/api/realtimeDatabaseConfiguration'
import TableEdit from './components/TableEdit'
export default {
	components: {
		UploadExcel,
		ExportExcel,
		TableEdit,
	},
	data() {
		return {
      windturbineManufacturerIdOptions: [],
      // 0：风机；1：集中；2：组串
      equipmentCategoryOptions: [
        {id: 0, name: "风机"},
        {id: 1, name: "集中"},
        {id: 2, name: "组串"},
      ],
			fuzzyQuery_name: '',
			listLoading: true,
			list: [],
			options: [],
			exportExcel: [],
			templateExcel: [],
			elementLoadingText: '正在加载...',
			selectRows: '',
			layout: 'total, sizes, prev, pager, next, jumper',
			total: 0,
			background: true,
			exportList: [],
			queryForm: {
				pageNo: 1,
				pageSize: 20,
			},
			stationList: [],
			selectValue: ''
		};
	},
	computed: {
		height() {
			return this.$baseTableHeight() + 50
		},
	},
	created() {
		this.sttreeMantreels()
		this.fetchData()
	},
	methods: {
    windturbineManufacturerIdFormatter(row){
      for (const key of this.windturbineManufacturerIdOptions) {
        if (key.id == row.windturbineManufacturerId) {
          return key.name
        }
      }
    },
    sttreeMantreels(){
      apis.sttreeMantreels(1).then(res => {
        if(res.data){
          res.data.forEach( item=> {
            this.windturbineManufacturerIdOptions.push(item)
          });
        }
			})
    },
    equipmentCategoryFormatter(row, column, cellValue, index){
      let val = this.equipmentCategoryOptions.filter(item=>{
        return item.id == row.equipmentCategory
      });
      return val[0] ? val[0].name : ""
    },
		handleQuery() {
			this.queryForm.pageNo = 1
			this.fetchData()
		},
		getMyExcelData(val) {
			val.forEach(item => {
				api.addEquipmentmodel(item).then(res => {
					if (res.code == 200) {
						this.$message({
							type: 'success',
							message: '添加成功!'
						});
						this.fetchData()
					}
				})
			})
		},
		getStation() {
			api.windpowerstationList({
				id: '',
				name: '',
				companyid: '',
				pageNum: 1,
				pageSize: 1000,
			}).then(res => {
				if (res.data) {
					this.listLoading = false
					this.stationList = res.data.records
				}
			})
		},
		fetchData() {
			api.equipmentmodel({
				name: this.fuzzyQuery_name,
				pageNum: this.queryForm.pageNo,
				pageSize: this.queryForm.pageSize,
			}).then(res => {
				if (res.data) {
					this.listLoading = false
					this.total = res.data.total
					this.list = res.data.records
					this.templateExcel = [
						{
							id: "",
              nemCode: "",
              name: "",
              description: "",
              powerProduction: "",
              windturbineManufacturerId: "",
              photo: "",
              unit: "",
              cutinwindSpeed: "",
              ratedwindSpeed: "",
              cutoutwindSpeed: "",
              sweptArea: "",
              equipmentCategory: "",
						}
					]
					// 导出
					let exportExcel = []
					res.data.records.forEach(item => {
						exportExcel.push({
							id: item.id,
							nemCode: item.nemCode,
							name: item.name,
							description: item.description,
							powerProduction: item.powerProduction,
							windturbineManufacturerId: item.windturbineManufacturerId,
							photo: item.photo,
							unit: item.unit,
							cutinwindSpeed: item.cutinwindSpeed,
							ratedwindSpeed: item.ratedwindSpeed,
							cutoutwindSpeed: item.cutoutwindSpeed,
							sweptArea: item.sweptArea,
							equipmentCategory: item.equipmentCategory,
						})
					})
					this.exportExcel = exportExcel
				}
			})
		},
		handleSizeChange(val) {
			this.queryForm.pageSize = val
			this.fetchData()
		},
		handleCurrentChange(val) {
			this.queryForm.pageNo = val
			this.fetchData()
		},
		handleAdd() {
			this.$refs['edit'].showEdit()
		},
		handleEdit(row) {
			this.$refs['edit'].showEdit(row)
		},
		handleDelete(row) {
			if (row.id || this.selectRows.length > 0) {
				this.$baseConfirm('你确定要删除吗', null, async () => {
					let ids = ''
					if (this.selectRows.length > 0) {
						ids = this.selectRows.map((item) => item.id).join()
					}
					api.deleteEquipmentmodel({
						id: row.id || ids
					}).then(res => {
						if (res.data) {
							this.$baseMessage('删除成功', 'success')
							this.fetchData()
						}
					})
				})
			} else {
				this.$baseMessage('未选中任何行', 'error')
				return false
			}
		},
		setSelectRows(val) {
			this.selectRows = val
		},
	},
}
</script>
<style lang="less" scoped>
.title {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.left {
	display: flex;
	flex-direction: row;
	align-items: center;

	.left-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 10px;
	}
}
</style>