xhj/vue_mdc_xhj.git

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,250 @@
			<template>
			<a-card :bordered="false">

			<!-- æ¥è¯¢åºå -->
			<div class="table-page-search-wrapper">
			<a-form layout="inline" @keyup.enter.native="searchQuery">
			<a-row :gutter="24">

			<a-col :md="6" :sm="12">
			<a-form-item label="ä¸æå">
			<j-input placeholder="è¯·è¾å¥ä¸æå" v-model="queryParam.chineseName"></j-input>
			</a-form-item>
			</a-col>

			<a-col :md="6" :sm="8">
			<a-form-item label="è±æå">
			<j-input placeholder="è¯·è¾å¥è±æå" v-model="queryParam.englishName"></j-input>
			</a-form-item>
			</a-col>

			<a-col :md="6" :sm="8">
			<a-form-item label="é©±å¨ç±»å">
			<a-auto-complete
			v-model="queryParam.controlSystemType"
			:data-source="driveTypeList"
			placeholder="è¯·éæ©æ§å¶ç³»ç»ç±»å"
			:filter-option="filterOption"
			:allowClear="true"
			/>
			</a-form-item>
			</a-col>

			<a-col :md="6" :sm="8">
			<a-button type="primary" @click="searchQuery" icon="search">æ¥è¯¢</a-button>
			<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">éç½®</a-button>
			</a-col>
			</a-row>
			</a-form>
			</div>

			<!-- æä½æé®åºå -->
			<div class="table-operator" style="border-top: 5px">
			<a-button @click="handleAdd" type="primary" icon="plus">æ·»å åæ°éå¼</a-button>
			<a-dropdown v-if="selectedRowKeys.length > 0">
			<a-menu slot="overlay" @click="handleMenuClick">
			<a-menu-item key="1">
			<a-icon type="delete" @click="batchDel"/>
			å é¤
			</a-menu-item>
			</a-menu>
			<a-button style="margin-left: 8px">
			æ¹éæä½
			<a-icon type="down"/>
			</a-button>
			</a-dropdown>
			</div>

			<!-- tableåºå-begin -->
			<div>
			<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
			<i class="anticon anticon-info-circle ant-alert-icon"></i>å·²éæ© <a style="font-weight: 600">{{
			selectedRowKeys.length }}</a>é¡¹
			<a style="margin-left: 24px" @click="onClearSelected">æ¸ç©º</a>
			</div>

			<a-table
			ref="table"
			bordered
			size="middle"
			rowKey="id"
			:scroll="{x:'max-content',y:600}"
			:columns="columns"
			:dataSource="dataSource"
			:pagination="ipagination"
			:loading="loading"
			:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
			@change="handleTableChange">

			<template slot="avatarslot" slot-scope="text, record, index">
			<div class="anty-img-wrap">
			<a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user"/>
			</div>
			</template>

			<span slot="action" slot-scope="text, record">
			<a @click="handleEdit(record)">ç¼è¾</a>

			<a-divider type="vertical"/>

			<a-popconfirm title="ç¡®å®å é¤å?" @confirm="() => handleDelete(record.id)">
			<a>å é¤</a>
			</a-popconfirm>

			</span>


			</a-table>
			</div>
			<!-- tableåºå-end -->

			<ParamThresholdModal ref="modalForm" @ok="modalFormOk" :driveTypeList="driveTypeList"/>
			</a-card>
			</template>

			<script>
			import { JeecgListMixin } from '@/mixins/JeecgListMixin'
			import api from '@/api/mdc'
			import ParamThresholdModal from './modules/DeviceParamThresholdManagement/ParamThresholdModal'

			export default {
			name: 'EquipmentList',
			mixins: [JeecgListMixin],
			components: {
			ParamThresholdModal
			},
			data() {
			return {
			name: 'DeviceParamThresholdManagement',
			description: 'è¿æ¯è®¾å¤åæ°éå¼ç®¡çé¡µé¢',
			queryParam: {},
			/* åé¡µåæ° */
			ipagination:{
			current: 1,
			pageSize: 30,
			pageSizeOptions: ['30', '50', '100'],
			showTotal: (total, range) => {
			return range[0] + "-" + range[1] + " å±" + total + "æ¡"
			},
			showQuickJumper: true,
			showSizeChanger: true,
			total: 0
			},
			columns: [
			{
			title: '#',
			dataIndex: '',
			key: 'rowIndex',
			width: 60,
			align: 'center',
			customRender: function(t, r, index) {
			return parseInt(index) + 1
			}
			},
			{
			title: 'ä¸æå',
			align: 'center',
			dataIndex: 'chineseName',
			width: 350
			// sorter: true
			},
			{
			title: 'è±æå',
			align: 'center',
			width: 350,
			dataIndex: 'englishName'
			},
			{
			title: 'é©±å¨ç±»å',
			align: 'center',
			width: 350,
			dataIndex: 'controlSystemType'
			},
			{
			title: 'éå¼ä¸é',
			align: 'center',
			width: 270,
			dataIndex: 'maxThreshold'
			// scopedSlots: {customRender: "avatarslot"}
			},
			{
			title: 'éå¼ä¸é',
			align: 'center',
			width: 270,
			dataIndex: 'minThreshold'
			// sorter: true
			},
			{
			title: 'æä½',
			dataIndex: 'action',
			scopedSlots: { customRender: 'action' },
			align: 'center',
			fixed: 'right',
			width: 150
			}
			],
			driveTypeList: [],
			url: {
			list: '/mdc/mdcEquipmentThreshold/list',
			delete: '/mdc/mdcEquipmentThreshold/delete',
			deleteBatch: '/mdc/mdcEquipmentThreshold/deleteBatch'
			}
			}
			},
			created() {
			this.getDriveTypeByApi()
			},
			methods: {
			handleEdit: function(record) {
			this.$refs.modalForm.edit(record)
			this.$refs.modalForm.title = 'ç¼è¾'

			// è°ç¨æ½å±è¡¨åç»ä»¶ä¸çæ¸é¤è¡¨åéªè¯æ¹æ³
			this.$refs.modalForm.removeValidate()
			},

			handleAdd: function() {
			this.$refs.modalForm.add()
			this.$refs.modalForm.title = 'æ°å¢'

			// è°ç¨æ½å±è¡¨åç»ä»¶ä¸çæ¸é¤è¡¨åéªè¯æ¹æ³
			this.$refs.modalForm.removeValidate()
			},

			handleMenuClick(e) {
			if (e.key == 1) {
			this.batchDel()
			} else if (e.key == 2) {
			this.batchFrozen(2)
			} else if (e.key == 3) {
			this.batchFrozen(1)
			}
			},

			/**
			* è°ç¨æ¥å£è·åæ§å¶ç³»ç»ç±»å
			*/
			getDriveTypeByApi() {
			api.getDriveTypeApi().then((res) => {
			this.driveTypeList = res.result.map(item => item.value)
			})
			},

			/**
			* èæ³è¾å¥æ¡çéåè½
			* @param input è¾å¥çåå®¹
			* @param option éç½®
			* @returns {boolean} å¤ææ¯å¦çé
			*/
			filterOption(input, option) {
			return (
			option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
			)
			}
			}

			}
			</script>
			<style scoped>
			@import '~@assets/less/common.less'
			</style>