<template>
|
<div class="page">
|
<div class="page-title">
|
<div>
|
<h2>工程专业配置</h2>
|
<p>维护故障上报时可选择的工程专业</p>
|
</div>
|
<el-button type="primary" icon="el-icon-plus" @click="openCreate">新增工程专业</el-button>
|
</div>
|
|
<div class="toolbar">
|
<el-input v-model="keyword" placeholder="名称" clearable style="width:260px"></el-input>
|
<el-button type="primary" icon="el-icon-search" @click="load">查询</el-button>
|
<el-button icon="el-icon-refresh" @click="load">刷新</el-button>
|
</div>
|
|
<div class="table-panel">
|
<el-table :data="filteredRows" border stripe height="calc(100vh - 205px)">
|
<el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
|
<el-table-column prop="name" label="名称" min-width="240"></el-table-column>
|
<el-table-column label="操作" width="140" fixed="right">
|
<template slot-scope="{ row }">
|
<el-button type="text" @click="openEdit(row)">编辑</el-button>
|
<el-button type="text" class="danger-link" @click="remove(row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<el-dialog :title="form.id ? '编辑工程专业' : '新增工程专业'" :visible.sync="dialogVisible" width="520px" append-to-body>
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
<el-form-item label="名称" prop="name"><el-input v-model="form.name" placeholder="请输入工程专业名称"></el-input></el-form-item>
|
</el-form>
|
<template slot="footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" :loading="saving" @click="save">保存</el-button></template>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import api from '@/api'
|
export default {
|
name: 'EngineeringMajorManage',
|
data() {
|
return {
|
rows: [], keyword: '', dialogVisible: false, saving: false,
|
form: {},
|
rules: { name: [{ required: true, message: '请输入名称', trigger: 'blur' }] }
|
}
|
},
|
computed: {
|
filteredRows() {
|
if (!this.keyword) return this.rows
|
const text = this.keyword.toLowerCase()
|
return this.rows.filter(item => String(item.name || '').toLowerCase().includes(text))
|
}
|
},
|
created() { this.load() },
|
methods: {
|
load() { api.get('/system/engineering-majors').then(res => { this.rows = res.data || [] }) },
|
blank() { return { name: '' } },
|
openCreate() { this.form = this.blank(); this.dialogVisible = true },
|
openEdit(row) { this.form = { ...row }; this.dialogVisible = true },
|
save() {
|
this.$refs.form.validate(valid => {
|
if (!valid) return
|
this.saving = true
|
const request = this.form.id ? api.put('/system/engineering-majors/' + this.form.id, this.form) : api.post('/system/engineering-majors', this.form)
|
request.then(() => { this.$message.success('保存成功'); this.dialogVisible = false; this.load() }).finally(() => { this.saving = false })
|
})
|
},
|
remove(row) {
|
this.$confirm(`确定删除“${row.name}”吗？`, '删除确认', { type: 'warning' }).then(() => api.delete('/system/engineering-majors/' + row.id)).then(() => {
|
this.$message.success('删除成功'); this.load()
|
}).catch(() => {})
|
}
|
}
|
}
|
</script>
|
<style scoped>.danger-link { color: #d9534f; }</style>
|
