342 lines
9.9 KiB
Vue
342 lines
9.9 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-card>
|
||
<el-form ref="form" :model="form" label-width="100px" size="medium">
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<el-form-item label="类型名称：">
|
||
<el-input v-model="form.name" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="创建人：">
|
||
<el-input v-model="form.creator" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="是否有效：">
|
||
<el-select v-model="form.isValid">
|
||
<el-option v-for="(item,index) in isValidOption" :key="index" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-button size="medium" @click="searchData">查询</el-button>
|
||
<el-button size="medium" type="primary" @click="add">新增</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</el-card>
|
||
<el-card>
|
||
<el-table
|
||
v-loading="listLoading"
|
||
:data="list"
|
||
element-loading-text="Loading"
|
||
fit
|
||
highlight-current-row
|
||
:header-cell-style="{background:'#fafafa'}"
|
||
>
|
||
<el-table-column align="center" label="序号" type="index" width="70" />
|
||
<el-table-column label="体系结构类型" align="center" width="120">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.parentName }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="终端类型" align="center" width="180">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.name }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="状态" align="center">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.isValid ? '有效' : '无效' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="创建时间" align="center" width="180">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.createTime }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="创建人" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.creator }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
label="最后修改时间"
|
||
width="180"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.lastUpdTime }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="修改人" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.modifier }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="操作" width="100">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" @click="paramVisible=true">参数</el-button>
|
||
<el-button type="text" @click="edit(scope.row.name,scope.row.id)">编辑</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<Pagination
|
||
:page-no="pageNo"
|
||
:page-sz="pageSz"
|
||
:page-total="pageTotal"
|
||
@setPage="setPage"
|
||
@query="fetchData"
|
||
/>
|
||
</el-card>
|
||
|
||
<!-- 新增编辑弹窗 -->
|
||
<el-dialog :title="title" :visible="visible" @close="closeDialog">
|
||
<el-form ref="operateForm" :rules="rules" label-width="100px" :model="operateForm" size="medium">
|
||
<el-row>
|
||
<el-col :span="12" :offset="6">
|
||
<el-form-item label="上级类型：" prop="parentId">
|
||
<el-input v-model="operateForm.parentId" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12" :offset="6">
|
||
<el-form-item label="类型名称：" prop="name">
|
||
<el-input v-model="operateForm.name" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12" :offset="6">
|
||
<el-form-item label="是否启用：" prop="isValid">
|
||
<el-radio v-model="operateForm.isValid" :label="true">是</el-radio>
|
||
<el-radio v-model="operateForm.isValid" :label="false">否</el-radio>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button size="medium" @click="closeDialog">取 消</el-button>
|
||
<el-button size="medium" type="primary" @click="submit">提 交</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<!-- 列表弹窗 -->
|
||
<el-dialog title="终端参数" :visible="paramVisible" @close="paramVisible=false">
|
||
<el-form :model="paramForm" label-width="100px" size="medium" @submit.native.prevent>
|
||
<el-row>
|
||
<el-col :span="12" :offset="4">
|
||
<el-form-item label="参数名称：">
|
||
<el-input v-model="paramForm.name" @keyup.enter.native="searchParamData" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-button size="medium" type="primary" @click="searchParamData">查询</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<el-table :data="paramList" fit highlight-current-row :height="380">
|
||
<el-table-column align="center" label="序号" type="index" width="70" />
|
||
<el-table-column label="编号" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.id }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="名称" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.name }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="单位" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.unit }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="单位描述" align="center" show-overflow-tooltip>
|
||
<template slot-scope="scope">
|
||
{{ scope.row.description }}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<Pagination
|
||
:page-no="paramPageNo"
|
||
:page-sz="paramPageSz"
|
||
:page-total="paramPageTotal"
|
||
@setPage="setParamPage"
|
||
@query="fetchParamData"
|
||
/>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Pagination from '@/components/Pagination'
|
||
import { getList, getParamList, add, update } from '@/api/terminal/structure'
|
||
|
||
export default {
|
||
components: { Pagination },
|
||
data() {
|
||
return {
|
||
list: null,
|
||
paramList: null,
|
||
listLoading: true,
|
||
form: {
|
||
name: '',
|
||
creator: '',
|
||
isValid: ''
|
||
},
|
||
isValidOption: [
|
||
{
|
||
label: '全部',
|
||
value: ''
|
||
},
|
||
{
|
||
label: '有效',
|
||
value: true
|
||
},
|
||
{
|
||
label: '无效',
|
||
value: false
|
||
}
|
||
],
|
||
operateForm: {
|
||
id: '',
|
||
parentId: 0,
|
||
name: '',
|
||
isValid: true
|
||
},
|
||
paramForm: {
|
||
name: ''
|
||
},
|
||
title: '新增终端类型',
|
||
paramPageNo: 1,
|
||
paramPageSz: 10,
|
||
paramPageTotal: 100,
|
||
pageNo: 1,
|
||
pageSz: 10,
|
||
pageTotal: 100,
|
||
rules: {
|
||
name: [{ required: true, message: '请输入类型名称', trigger: 'blur' }]
|
||
},
|
||
visible: false,
|
||
paramVisible: false,
|
||
type: 0 // 0-新增，1-编辑
|
||
}
|
||
},
|
||
created() {
|
||
this.fetchData()
|
||
this.fetchParamData()
|
||
},
|
||
methods: {
|
||
fetchData() {
|
||
this.listLoading = true
|
||
const data = {
|
||
...this.form,
|
||
pageNo: this.pageNo,
|
||
pageSz: this.pageSz
|
||
}
|
||
getList(data).then((res) => {
|
||
this.list = res.data.list || []
|
||
this.pageTotal = res.data.total
|
||
this.listLoading = false
|
||
})
|
||
},
|
||
fetchParamData() {
|
||
const data = {
|
||
...this.paramForm,
|
||
pageNo: this.paramPageNo,
|
||
pageSz: this.paramPageSz
|
||
}
|
||
getParamList(data).then((res) => {
|
||
this.paramList = res.data.list || []
|
||
this.paramPageTotal = res.data.total
|
||
})
|
||
},
|
||
searchData() {
|
||
this.pageNo = 1
|
||
this.fetchData()
|
||
},
|
||
searchParamData() {
|
||
this.pageNo = 1
|
||
this.fetchParamData()
|
||
},
|
||
setPage({ pageNo, pageSz }) {
|
||
this.pageNo = pageNo
|
||
this.pageSz = pageSz
|
||
},
|
||
setParamPage({ pageNo, pageSz }) {
|
||
this.paramPageNo = pageNo
|
||
this.paramPageSz = pageSz
|
||
},
|
||
add() {
|
||
this.title = '新增终端类型'
|
||
this.type = 0
|
||
this.visible = true
|
||
},
|
||
edit(name, id) {
|
||
this.title = '编辑终端类型'
|
||
this.type = 1
|
||
this.visible = true
|
||
this.$nextTick(() => {
|
||
this.operateForm.id = id
|
||
this.operateForm.name = name
|
||
})
|
||
},
|
||
submit() {
|
||
this.$refs.operateForm.validate(valid => {
|
||
if (valid) {
|
||
const data = {
|
||
...this.operateForm
|
||
}
|
||
const formData = new FormData()
|
||
for (const [key, value] of Object.entries(data)) {
|
||
formData.append(key, value)
|
||
}
|
||
let api
|
||
switch (this.type) {
|
||
case 0:
|
||
api = add(formData)
|
||
break
|
||
case 1:
|
||
api = update(data)
|
||
}
|
||
api.then(res => {
|
||
if (res.success === false) {
|
||
this.$message.error(res.message)
|
||
} else {
|
||
this.$message.success(res.message)
|
||
}
|
||
}).catch()
|
||
}
|
||
})
|
||
},
|
||
closeDialog() {
|
||
this.visible = false
|
||
this.$refs.operateForm.resetFields()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.dot {
|
||
display: inline-block;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
margin-right: 10px;
|
||
vertical-align: middle;
|
||
}
|
||
.blue {
|
||
background: #1890ff;
|
||
}
|
||
.grey {
|
||
background: #000000;
|
||
}
|
||
.table-header{
|
||
background-color: #fafafa;
|
||
}
|
||
</style>
|