187 lines
6.9 KiB
Vue
187 lines
6.9 KiB
Vue
<template>
|
|
<d2-container>
|
|
<template #header>
|
|
<div class="search-bar">
|
|
<el-form :inline="true" :model="search" size="mini">
|
|
<el-form-item label="关键字">
|
|
<el-input v-model.trim="search.keyword" placeholder="请输入关键字" clearable style="width:180px" @keyup.enter.native="onSearch" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" :disabled="loading" @click="onSearch">查询</el-button>
|
|
<el-button icon="el-icon-refresh" :disabled="loading" @click="onReset">重置</el-button>
|
|
<el-button type="primary" icon="el-icon-plus" @click="openDialog()">新增</el-button>
|
|
<el-button v-if="hasExport" icon="el-icon-download" :disabled="loading" @click="exportTask">导出</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<el-table v-loading="loading" :data="tableData" size="mini" border height="calc(100vh - 220px)">
|
|
<el-table-column type="index" width="55" />
|
|
<el-table-column v-for="column in displayColumns" :key="column.prop" :prop="column.prop" :label="column.label" min-width="150" show-overflow-tooltip />
|
|
<el-table-column label="操作" fixed="right" width="150">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" size="mini" @click="openDialog(scope.row)">编辑</el-button>
|
|
<el-button type="text" size="mini" class="danger" @click="remove(scope.row)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<template #empty><el-empty description="暂无数据" :image-size="80" /></template>
|
|
</el-table>
|
|
<div class="pager">
|
|
<el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="pagination.current" :page-size="pagination.size" :total="pagination.total" @current-change="changePage" @size-change="changeSize" />
|
|
</div>
|
|
|
|
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="640px">
|
|
<el-form ref="form" :model="form" label-width="120px" size="mini">
|
|
<el-form-item v-for="field in formFields" :key="field.prop" :label="field.label" :prop="field.prop">
|
|
<el-input v-model="form[field.prop]" clearable />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button size="mini" @click="dialogVisible=false">取消</el-button>
|
|
<el-button type="primary" size="mini" :loading="saving" @click="save">确定</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</d2-container>
|
|
</template>
|
|
|
|
<script>
|
|
import { createExportTask, createItem, deleteItem, editItem, getList } from '@/api/equipment-management/equipment-registry'
|
|
|
|
export default {
|
|
name: 'equipment-management-equipment-registry',
|
|
data () {
|
|
return {
|
|
loading: false,
|
|
saving: false,
|
|
search: { keyword: '' },
|
|
tableData: [],
|
|
pagination: { current: 1, size: 10, total: 0 },
|
|
columns: [
|
|
{
|
|
prop: 'device_code',
|
|
label: '设备编码'
|
|
},
|
|
{
|
|
prop: 'device_name',
|
|
label: '设备名称'
|
|
},
|
|
{
|
|
prop: 'device_type_name',
|
|
label: '设备类别'
|
|
},
|
|
{
|
|
prop: 'device_status',
|
|
label: '设备状态'
|
|
},
|
|
{
|
|
prop: 'area_name',
|
|
label: '所属区域'
|
|
},
|
|
{
|
|
prop: 'line_name',
|
|
label: '所属产线'
|
|
},
|
|
{
|
|
prop: 'remark',
|
|
label: '备注'
|
|
}
|
|
],
|
|
formFields: [
|
|
{
|
|
prop: 'device_code',
|
|
label: '设备编码'
|
|
},
|
|
{
|
|
prop: 'device_name',
|
|
label: '设备名称'
|
|
},
|
|
{
|
|
prop: 'device_type_id',
|
|
label: '设备类别ID'
|
|
},
|
|
{
|
|
prop: 'device_status',
|
|
label: '设备状态'
|
|
},
|
|
{
|
|
prop: 'area_id',
|
|
label: '区域ID'
|
|
},
|
|
{
|
|
prop: 'line_id',
|
|
label: '产线ID'
|
|
},
|
|
{
|
|
prop: 'remark',
|
|
label: '备注'
|
|
}
|
|
],
|
|
form: {},
|
|
dialogVisible: false
|
|
}
|
|
},
|
|
computed: {
|
|
dialogTitle () { return this.form && this.form.id ? '编辑设备信息' : '新增设备信息' },
|
|
hasExport () { return typeof createExportTask === 'function' },
|
|
displayColumns () {
|
|
const keys = new Set(this.columns.map(item => item.prop))
|
|
const extra = Object.keys(this.tableData[0] || {}).filter(key => !keys.has(key) && key !== 'id').slice(0, 8).map(key => ({ prop: key, label: key }))
|
|
return [...this.columns, ...extra]
|
|
}
|
|
},
|
|
mounted () { this.fetchData() },
|
|
methods: {
|
|
responseData (res) { return res && res.data !== undefined ? res.data : res },
|
|
normalizeList (data) {
|
|
if (Array.isArray(data)) return { list: data, total: data.length }
|
|
if (data && Array.isArray(data.data)) return { list: data.data, total: Number(data.count || data.total || data.data.length) }
|
|
if (data && data.data && Array.isArray(data.data.data)) return { list: data.data.data, total: Number(data.data.count || data.data.total || data.data.data.length) }
|
|
return { list: [], total: 0 }
|
|
},
|
|
buildParams () { return { ...this.search, page_no: this.pagination.current, page_size: this.pagination.size } },
|
|
async fetchData () {
|
|
this.loading = true
|
|
try {
|
|
const res = await getList(this.buildParams())
|
|
const data = this.normalizeList(this.responseData(res))
|
|
this.tableData = data.list
|
|
this.pagination.total = data.total
|
|
} finally { this.loading = false }
|
|
},
|
|
onSearch () { this.pagination.current = 1; this.fetchData() },
|
|
onReset () { this.search = { keyword: '' }; this.pagination.current = 1; this.fetchData() },
|
|
changePage (page) { this.pagination.current = page; this.fetchData() },
|
|
changeSize (size) { this.pagination.size = size; this.pagination.current = 1; this.fetchData() },
|
|
openDialog (row) { this.form = row ? { ...row } : {}; this.dialogVisible = true },
|
|
async save () {
|
|
this.saving = true
|
|
try {
|
|
if (this.form.id) await editItem(this.form)
|
|
else await createItem(this.form)
|
|
this.$message.success('操作成功')
|
|
this.dialogVisible = false
|
|
this.fetchData()
|
|
} finally { this.saving = false }
|
|
},
|
|
async remove (row) {
|
|
await this.$confirm('确认删除该记录？', '提示', { type: 'warning' })
|
|
await deleteItem({ id: row.id })
|
|
this.$message.success('删除成功')
|
|
this.fetchData()
|
|
},
|
|
async exportTask () {
|
|
await this.$confirm('确认创建导出任务？', '提示', { type: 'warning' })
|
|
await createExportTask(this.buildParams())
|
|
this.$message.success('导出任务创建成功')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.search-bar { margin-bottom: -18px; }
|
|
.pager { padding-top: 10px; text-align: right; }
|
|
.danger { color: #f56c6c; }
|
|
</style>
|