|
|
@@ -2,38 +2,38 @@
|
|
|
<Container :query-form="queryForm" class="mtm-container">
|
|
|
<!-- 头部查询表单 -->
|
|
|
<template #query-form>
|
|
|
- <el-form-item label="三维模型类型名称">
|
|
|
+ <el-form-item label="模型名称">
|
|
|
<el-input
|
|
|
- v-model="queryForm.name"
|
|
|
- placeholder="请输入三维模型类型名称"
|
|
|
+ v-model="queryForm.typeName"
|
|
|
+ placeholder="请输入模型名称"
|
|
|
clearable
|
|
|
@keyup.enter.native="handleQuery"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="三维模型类型码">
|
|
|
+ <el-form-item label="模型分类">
|
|
|
<el-select
|
|
|
- v-model="queryForm.code"
|
|
|
+ v-model="queryForm.typeCategory"
|
|
|
placeholder="全部"
|
|
|
clearable
|
|
|
filterable
|
|
|
style="width: 180px"
|
|
|
>
|
|
|
- <el-option label="ADMIN" value="ADMIN" />
|
|
|
- <el-option label="EQUIP" value="EQUIP" />
|
|
|
- <el-option label="ASSET" value="ASSET" />
|
|
|
+ <el-option label="ADMIN" value="ADMIN"/>
|
|
|
+ <el-option label="EQUIP" value="EQUIP"/>
|
|
|
+ <el-option label="ASSET" value="ASSET"/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="创建时间">
|
|
|
- <el-date-picker
|
|
|
- v-model="queryForm.dateRange"
|
|
|
- type="datetimerange"
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="开始时间"
|
|
|
- end-placeholder="结束时间"
|
|
|
- value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
+ <!--<el-form-item label="创建时间">-->
|
|
|
+ <!-- <el-date-picker-->
|
|
|
+ <!-- v-model="queryForm.dateRange"-->
|
|
|
+ <!-- type="datetimerange"-->
|
|
|
+ <!-- range-separator="至"-->
|
|
|
+ <!-- start-placeholder="开始时间"-->
|
|
|
+ <!-- end-placeholder="结束时间"-->
|
|
|
+ <!-- value-format="yyyy-MM-dd HH:mm:ss"-->
|
|
|
+ <!-- clearable-->
|
|
|
+ <!-- />-->
|
|
|
+ <!--</el-form-item>-->
|
|
|
</template>
|
|
|
|
|
|
<!-- 头部操作按钮 -->
|
|
|
@@ -46,7 +46,8 @@
|
|
|
icon="el-icon-delete"
|
|
|
:disabled="!selectedRows.length"
|
|
|
@click="handleBatchDelete"
|
|
|
- >批量删除</el-button>
|
|
|
+ >批量删除
|
|
|
+ </el-button>
|
|
|
</template>
|
|
|
|
|
|
<!-- 主内容区表格 -->
|
|
|
@@ -56,38 +57,41 @@
|
|
|
:data="tableData"
|
|
|
border
|
|
|
stripe
|
|
|
- height="100%"
|
|
|
size="mini"
|
|
|
highlight-current-row
|
|
|
@selection-change="handleSelectionChange"
|
|
|
>
|
|
|
- <el-table-column type="selection" width="55" />
|
|
|
- <el-table-column type="index" label="序号" width="60" />
|
|
|
- <el-table-column prop="id" label="编号" width="100" sortable align="center" />
|
|
|
+ <el-table-column type="selection" width="55"/>
|
|
|
+ <el-table-column type="index" label="序号" width="60"/>
|
|
|
+ <el-table-column prop="id" label="编号" width="100" sortable align="center"/>
|
|
|
<el-table-column
|
|
|
prop="typeName"
|
|
|
- label="三维模型类型名称"
|
|
|
+ label="类型名称"
|
|
|
min-width="200"
|
|
|
align="center"
|
|
|
show-overflow-tooltip
|
|
|
/>
|
|
|
<el-table-column
|
|
|
- prop="typeCode"
|
|
|
- label="三维模型类型编码"
|
|
|
+ prop="typeCategory"
|
|
|
+ label="类型分类"
|
|
|
min-width="160"
|
|
|
align="center"
|
|
|
- :filters="[{text:'ADMIN',value:'ADMIN'},{text:'EQUIP',value:'EQUIP'},{text:'ASSET',value:'ASSET'}]"
|
|
|
- :filter-method="(value, row) => row.code === value"
|
|
|
- filter-placement="bottom-end"
|
|
|
/>
|
|
|
- <el-table-column prop="creator" label="创建人" width="120" align="center" />
|
|
|
- <el-table-column prop="createTime" label="创建时间" min-width="180" align="center" sortable />
|
|
|
- <el-table-column label="操作" fixed="right" align="center" min-width="220">
|
|
|
+ <el-table-column prop="description" label="模型描述" align="center"/>
|
|
|
+ <el-table-column prop="status" label="是否启用" width="120" align="center">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-tag type="success" v-if="row.status === 1">是</el-tag>
|
|
|
+ <el-tag type="danger" v-else>否</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="creator" label="创建人" width="120" align="center"/>
|
|
|
+ <el-table-column prop="createTime" label="创建时间" min-width="180" align="center" sortable/>
|
|
|
+ <el-table-column label="操作" fixed="right" align="center">
|
|
|
<template slot-scope="{ row }">
|
|
|
<div class="action-bar">
|
|
|
- <el-link type="primary" :underline="false" @click="handleView(row)">查看</el-link>
|
|
|
+ <!--<el-link type="primary" :underline="false" @click="handleView(row)">查看</el-link>-->
|
|
|
<el-link type="primary" :underline="false" @click="handleEdit(row)">编辑</el-link>
|
|
|
- <el-link type="danger" :underline="false" @click="handleDelete(row)">删除</el-link>
|
|
|
+ <el-link type="danger" :underline="false" @click="handleDelete(row)">删除</el-link>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
@@ -145,27 +149,27 @@
|
|
|
>
|
|
|
<el-form ref="addFormRef" :model="addForm" :rules="addRules" label-width="110px" size="small">
|
|
|
<el-form-item label="类型名称" prop="typeName">
|
|
|
- <el-input v-model.trim="addForm.typeName" maxlength="100" show-word-limit placeholder="请输入类型名称" />
|
|
|
+ <el-input v-model.trim="addForm.typeName" maxlength="100" show-word-limit placeholder="请输入类型名称"/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="类型编码" prop="typeCode">
|
|
|
- <el-input v-model.trim="addForm.typeCode" placeholder="请输入类型编码" />
|
|
|
+ <el-input v-model.trim="addForm.typeCode" placeholder="请输入类型编码"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="类型分类" prop="typeCategory">
|
|
|
+ <el-select v-model="addForm.typeCategory" placeholder="请选择类型分类" style="width: 220px">
|
|
|
+ <el-option label="分类一" value="ADMIN"/>
|
|
|
+ <el-option label="分类二" value="EQUIP"/>
|
|
|
+ <el-option label="分类三" value="ASSET"/>
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
|
- <!--<el-form-item label="类型分类" prop="typeCategory">-->
|
|
|
- <!-- <el-select v-model="addForm.typeCategory" placeholder="请选择类型分类" style="width: 220px">-->
|
|
|
- <!-- <el-option label="分类一" value="ADMIN" />-->
|
|
|
- <!-- <el-option label="分类二" value="EQUIP" />-->
|
|
|
- <!-- <el-option label="分类三" value="ASSET" />-->
|
|
|
- <!-- </el-select>-->
|
|
|
- <!--</el-form-item>-->
|
|
|
<el-form-item label="类型描述" prop="description">
|
|
|
- <el-input type="textarea" v-model="addForm.description" placeholder="请输入类型描述" />
|
|
|
+ <el-input type="textarea" v-model="addForm.description" placeholder="请输入类型描述"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态" prop="status">
|
|
|
+ <el-select v-model="addForm.status" placeholder="请选择状态" style="width: 220px">
|
|
|
+ <el-option label="禁用" value="0"/>
|
|
|
+ <el-option label="启用" value="1"/>
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
|
- <!--<el-form-item label="状态" prop="status">-->
|
|
|
- <!-- <el-select v-model="addForm.status" placeholder="请选择状态" style="width: 220px">-->
|
|
|
- <!-- <el-option label="禁用" value="0" />-->
|
|
|
- <!-- <el-option label="启用" value="1" />-->
|
|
|
- <!-- </el-select>-->
|
|
|
- <!--</el-form-item>-->
|
|
|
<!--<el-form-item label="创建人" prop="creator">-->
|
|
|
<!-- <el-input v-model.trim="addForm.creator" placeholder="例如：ADMIN/张三" />-->
|
|
|
<!--</el-form-item>-->
|
|
|
@@ -189,15 +193,16 @@
|
|
|
|
|
|
<script>
|
|
|
import {getDataList, addModel, delModel, updateModel} from '@/api/threeTypeMork'
|
|
|
+
|
|
|
export default {
|
|
|
name: 'ModelTypeManagement',
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
// 查询表单
|
|
|
queryForm: {
|
|
|
- name: '',
|
|
|
- code: '',
|
|
|
- dateRange: []
|
|
|
+ typeName: '',
|
|
|
+ id: '',
|
|
|
+ typeCategory: ''
|
|
|
},
|
|
|
// 表格
|
|
|
tableData: [],
|
|
|
@@ -222,37 +227,37 @@ export default {
|
|
|
addForm: {
|
|
|
typeName: '',
|
|
|
typeCode: '',
|
|
|
- // typeCategory: '',
|
|
|
+ typeCategory: '',
|
|
|
description: '',
|
|
|
- // status: '',
|
|
|
+ status: '',
|
|
|
// creator: 'ADMIN',
|
|
|
// createTime: ''
|
|
|
},
|
|
|
addRules: {
|
|
|
typeName: [
|
|
|
- { required: true, message: '请输入类型名称', trigger: 'blur' },
|
|
|
- { min: 1, max: 100, message: '长度在 1~100 个字符', trigger: 'blur' }
|
|
|
+ {required: true, message: '请输入类型名称', trigger: 'blur'},
|
|
|
+ {min: 1, max: 100, message: '长度在 1~100 个字符', trigger: 'blur'}
|
|
|
],
|
|
|
- typeCode: [{ required: true, message: '请选择类型码', trigger: 'change' }],
|
|
|
- creator: [{ required: true, message: '请输入创建人', trigger: 'blur' }],
|
|
|
- createTime: [{ required: true, message: '请选择创建时间', trigger: 'change' }]
|
|
|
+ typeCode: [{required: true, message: '请选择类型码', trigger: 'change'}],
|
|
|
+ creator: [{required: true, message: '请输入创建人', trigger: 'blur'}],
|
|
|
+ createTime: [{required: true, message: '请选择创建时间', trigger: 'change'}]
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- created () {
|
|
|
+ created() {
|
|
|
// this.initMock()
|
|
|
this.handleQuery()
|
|
|
},
|
|
|
methods: {
|
|
|
/* ------------ 工具 ------------- */
|
|
|
- nowStr () {
|
|
|
+ nowStr() {
|
|
|
const d = new Date()
|
|
|
const pad = n => n.toString().padStart(2, '0')
|
|
|
- return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
|
|
|
+ return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
|
|
|
},
|
|
|
|
|
|
/* ------------ 数据 ------------- */
|
|
|
- initMock () {
|
|
|
+ initMock() {
|
|
|
const creators = ['ADMIN', '系统', '张三', '李四']
|
|
|
const arr = []
|
|
|
for (let i = 1; i <= 658; i++) {
|
|
|
@@ -261,24 +266,25 @@ export default {
|
|
|
name: `设备${(i % 9) + 1}`,
|
|
|
code: ['ADMIN', 'EQUIP', 'ASSET'][i % 3],
|
|
|
creator: creators[i % creators.length],
|
|
|
- createTime: `2021-02-${(i % 28 + 1).toString().padStart(2,'0')} 10:30:00`
|
|
|
+ createTime: `2021-02-${(i % 28 + 1).toString().padStart(2, '0')} 10:30:00`
|
|
|
})
|
|
|
}
|
|
|
this.allData = arr
|
|
|
},
|
|
|
|
|
|
/* ------------ 查询&分页 ------------- */
|
|
|
- handleQuery () {
|
|
|
+ handleQuery() {
|
|
|
let param = {
|
|
|
pageNo: this.pagination.currentPage,
|
|
|
- pageSize: this.pagination.pageSize
|
|
|
+ pageSize: this.pagination.pageSize,
|
|
|
+ ...this.queryForm
|
|
|
}
|
|
|
getDataList(param).then(res => {
|
|
|
if (res.code !== 0) {
|
|
|
return
|
|
|
}
|
|
|
this.pagination.total = res.data.total
|
|
|
- this.tableData = res.data.rows || []
|
|
|
+ this.tableData = res.data.records || []
|
|
|
})
|
|
|
// 过滤
|
|
|
// let list = this.allData.slice()
|
|
|
@@ -304,36 +310,41 @@ export default {
|
|
|
// const startIdx = (this.pagination.currentPage - 1) * this.pagination.pageSize
|
|
|
// this.tableData = list.slice(startIdx, startIdx + this.pagination.pageSize)
|
|
|
},
|
|
|
- resetQuery () {
|
|
|
- this.queryForm = { name: '', code: '', dateRange: [] }
|
|
|
+ resetQuery() {
|
|
|
+ this.queryForm = {
|
|
|
+ typeName: '',
|
|
|
+ id: '',
|
|
|
+ typeCategory: ''
|
|
|
+ }
|
|
|
this.pagination.currentPage = 1
|
|
|
this.handleQuery()
|
|
|
},
|
|
|
- handleSizeChange (size) {
|
|
|
+ handleSizeChange(size) {
|
|
|
this.pagination.pageSize = size
|
|
|
this.pagination.currentPage = 1
|
|
|
this.handleQuery()
|
|
|
},
|
|
|
- handleCurrentChange (page) {
|
|
|
+ handleCurrentChange(page) {
|
|
|
this.pagination.currentPage = page
|
|
|
this.handleQuery()
|
|
|
},
|
|
|
|
|
|
/* ------------ 选择/操作 ------------- */
|
|
|
- handleSelectionChange (val) {
|
|
|
+ handleSelectionChange(val) {
|
|
|
this.selectedRows = val
|
|
|
},
|
|
|
- handleView (row) {
|
|
|
- this.currentRow = { ...row }
|
|
|
+ handleView(row) {
|
|
|
+ this.currentRow = {...row}
|
|
|
this.detailVisible = true
|
|
|
},
|
|
|
- handleEdit (row) {
|
|
|
+ handleEdit(row) {
|
|
|
// this.$message.info(`编辑：#${row.id} ${row.name}（占位）`)
|
|
|
this.addForm = {...row}
|
|
|
this.addOrUpdateTitle = '编辑'
|
|
|
+ this.addVisible = true
|
|
|
},
|
|
|
- handleDelete (row) {
|
|
|
- this.$confirm(`确认删除「${row.name}」吗？`, '提示', { type: 'warning' })
|
|
|
+ handleDelete(row) {
|
|
|
+ this.$confirm(`确认删除「${row.name}」吗？`, '提示', {type: 'warning'})
|
|
|
.then(() => {
|
|
|
delModel({id: row.id}).then(res => {
|
|
|
if (res.code !== 0) {
|
|
|
@@ -357,12 +368,13 @@ export default {
|
|
|
// }
|
|
|
this.handleQuery()
|
|
|
})
|
|
|
- .catch(() => {})
|
|
|
+ .catch(() => {
|
|
|
+ })
|
|
|
},
|
|
|
- handleBatchDelete () {
|
|
|
+ handleBatchDelete() {
|
|
|
const ids = new Set(this.selectedRows.map(r => r.id))
|
|
|
if (!ids.size) return
|
|
|
- this.$confirm(`确认删除选中的 ${ids.size} 条记录吗？`, '警告', { type: 'warning' })
|
|
|
+ this.$confirm(`确认删除选中的 ${ids.size} 条记录吗？`, '警告', {type: 'warning'})
|
|
|
.then(() => {
|
|
|
this.allData = this.allData.filter(r => !ids.has(r.id))
|
|
|
this.$refs.table && this.$refs.table.clearSelection()
|
|
|
@@ -373,11 +385,12 @@ export default {
|
|
|
}
|
|
|
this.handleQuery()
|
|
|
})
|
|
|
- .catch(() => {})
|
|
|
+ .catch(() => {
|
|
|
+ })
|
|
|
},
|
|
|
|
|
|
/* ------------ 新建 ------------- */
|
|
|
- openAdd () {
|
|
|
+ openAdd() {
|
|
|
// 预填创建时间为此刻
|
|
|
this.addForm = {
|
|
|
typeName: '',
|
|
|
@@ -392,7 +405,7 @@ export default {
|
|
|
this.addVisible = true
|
|
|
this.$nextTick(() => this.$refs.addFormRef && this.$refs.addFormRef.clearValidate())
|
|
|
},
|
|
|
- handleAddSubmit () {
|
|
|
+ handleAddSubmit() {
|
|
|
this.$refs.addFormRef.validate(valid => {
|
|
|
if (!valid) return
|
|
|
(this.addOrUpdateTitle === '编辑' ? updateModel : addModel)(this.addForm).then(res => {
|
|
|
@@ -428,7 +441,7 @@ export default {
|
|
|
this.handleQuery()
|
|
|
})
|
|
|
},
|
|
|
- onAddClosed () {
|
|
|
+ onAddClosed() {
|
|
|
// 关闭时重置表单，避免下次残留
|
|
|
this.$refs.addFormRef && this.$refs.addFormRef.resetFields()
|
|
|
}
|
|
|
@@ -443,20 +456,37 @@ export default {
|
|
|
color: var(--dark-text-primary);
|
|
|
border-color: var(--dark-border-color);
|
|
|
}
|
|
|
+
|
|
|
.mtm-container .el-table th {
|
|
|
- background-color: rgba(30,55,95,.3);
|
|
|
+ background-color: rgba(30, 55, 95, .3);
|
|
|
border-color: var(--dark-border-color);
|
|
|
color: var(--dark-text-primary);
|
|
|
}
|
|
|
-.mtm-container .el-table tr { background-color: var(--dark-card-bg); }
|
|
|
-.mtm-container .el-table tr:hover > td { background-color: rgba(45,75,120,.2); }
|
|
|
-.mtm-container .el-table td { border-color: var(--dark-border-color); }
|
|
|
+
|
|
|
+.mtm-container .el-table tr {
|
|
|
+ background-color: var(--dark-card-bg);
|
|
|
+}
|
|
|
+
|
|
|
+.mtm-container .el-table tr:hover > td {
|
|
|
+ background-color: rgba(45, 75, 120, .2);
|
|
|
+}
|
|
|
+
|
|
|
+.mtm-container .el-table td {
|
|
|
+ border-color: var(--dark-border-color);
|
|
|
+}
|
|
|
+
|
|
|
.mtm-container .el-table--striped .el-table__body tr.el-table__row--striped td {
|
|
|
- background-color: rgba(30,55,95,.1);
|
|
|
+ background-color: rgba(30, 55, 95, .1);
|
|
|
+}
|
|
|
+
|
|
|
+.mtm-container .el-table__current-row td {
|
|
|
+ background-color: rgba(64, 150, 255, .15) !important;
|
|
|
+}
|
|
|
+
|
|
|
+.mtm-container .el-pagination {
|
|
|
+ color: var(--dark-text-secondary);
|
|
|
}
|
|
|
-.mtm-container .el-table__current-row td { background-color: rgba(64,150,255,.15) !important; }
|
|
|
|
|
|
-.mtm-container .el-pagination { color: var(--dark-text-secondary); }
|
|
|
.mtm-container .el-pagination button,
|
|
|
.mtm-container .el-pagination span:not([class*='el-icon']),
|
|
|
.mtm-container .el-pagination .el-pager li {
|
|
|
@@ -464,12 +494,20 @@ export default {
|
|
|
background-color: var(--dark-card-bg);
|
|
|
border-color: var(--dark-border-color);
|
|
|
}
|
|
|
+
|
|
|
.mtm-container .el-pagination .el-pager li.active {
|
|
|
- background-color: var(--dark-primary-color); color:#fff;
|
|
|
+ background-color: var(--dark-primary-color);
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.mtm-container .el-pagination .el-pager li:hover {
|
|
|
+ color: var(--dark-primary-color);
|
|
|
+}
|
|
|
+
|
|
|
+.mtm-container .el-form-item__label {
|
|
|
+ color: var(--dark-text-secondary);
|
|
|
}
|
|
|
-.mtm-container .el-pagination .el-pager li:hover { color: var(--dark-primary-color); }
|
|
|
|
|
|
-.mtm-container .el-form-item__label { color: var(--dark-text-secondary); }
|
|
|
.mtm-container .el-input__inner,
|
|
|
.mtm-container .el-select__inner,
|
|
|
.mtm-container .el-date-editor .el-input__inner {
|
|
|
@@ -478,10 +516,22 @@ export default {
|
|
|
color: var(--dark-text-primary);
|
|
|
}
|
|
|
|
|
|
-.mtm-dialog .el-dialog { background-color: var(--dark-card-bg); border:1px solid var(--dark-border-color); }
|
|
|
-.mtm-dialog .el-dialog__title { color: var(--dark-text-primary); }
|
|
|
-.mtm-dialog .el-dialog__header { border-bottom: 1px solid var(--dark-border-color); }
|
|
|
-.mtm-dialog .el-dialog__footer { border-top: 1px solid var(--dark-border-color); }
|
|
|
+.mtm-dialog .el-dialog {
|
|
|
+ background-color: var(--dark-card-bg);
|
|
|
+ border: 1px solid var(--dark-border-color);
|
|
|
+}
|
|
|
+
|
|
|
+.mtm-dialog .el-dialog__title {
|
|
|
+ color: var(--dark-text-primary);
|
|
|
+}
|
|
|
+
|
|
|
+.mtm-dialog .el-dialog__header {
|
|
|
+ border-bottom: 1px solid var(--dark-border-color);
|
|
|
+}
|
|
|
+
|
|
|
+.mtm-dialog .el-dialog__footer {
|
|
|
+ border-top: 1px solid var(--dark-border-color);
|
|
|
+}
|
|
|
</style>
|
|
|
|
|
|
<style scoped>
|
|
|
@@ -490,17 +540,22 @@ export default {
|
|
|
flex-direction: column;
|
|
|
height: 100%;
|
|
|
}
|
|
|
+
|
|
|
.pagination-container {
|
|
|
margin-top: 14px;
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
align-items: center;
|
|
|
}
|
|
|
+
|
|
|
.action-bar {
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
|
align-items: center;
|
|
|
width: 100%;
|
|
|
}
|
|
|
-.footer-tips { color: var(--dark-text-secondary); }
|
|
|
+
|
|
|
+.footer-tips {
|
|
|
+ color: var(--dark-text-secondary);
|
|
|
+}
|
|
|
</style>
|
zhaoen