page1###########################################serversManage.vue
<template>
<div :class="{'ly-is-full':isFull}">
<div class="tableSelect" ref="tableSelect">
<el-form :inline="true" :model="formInline" label-position="left">
<el-form-item label="">
<el-input v-model.trim="formInline.search" clearable placeholder="设备编号，信息来源，硬件配置，BMC " @change="search" style="width:350px"></el-input>
</el-form-item>
<!-- <el-form-item>-->
<!-- <el-input v-model.trim="formInline.serverCode__icontains" maxlength="60" clearable placeholder="设备编号" @change="search" style="width:150px"></el-input>-->
<!-- </el-form-item>-->
<el-form-item label="机型:">
<el-select v-model="formInline.serversModel" style="width:120px" placeholder="请选择" filterable clearable @change="search">
<el-option
v-for="item in serversmodelList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="领域:" maxlength="60">
<el-select v-model="formInline.serversModel__area" style="width:100px" placeholder="请选择" filterable clearable @change="search">
<el-option label="BMCV3" value="BMCV3"></el-option>
<el-option label="BMCV4" value="BMCV4"></el-option>
</el-select>
</el-form-item>
<el-form-item label="用途:">
<el-select v-model="formInline.serversUsage" style="width:110px" placeholder="请选择" filterable clearable @change="search">
<el-option
style="width:120px"
v-for="item in serversusageList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="归还时间早于:">
<div class="block">
<el-date-picker
style="width:120px"
filterable
clearable
@change="timeChange"
v-model="formInline.borrowEndtimeEarlierThan"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="归还时间晚于或等于:">
<div class="block">
<el-date-picker
style="width:120px"
filterable
clearable
@change="timeChange2"
v-model="formInline.borrowEndtimeLaterThan"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="借用人:" maxlength="60">
<el-select v-model="formInline.borrowUserIsNull" style="width:90px" placeholder="请选择" filterable clearable @change="search">
<el-option label="为空" value=true></el-option>
<el-option label="非空" value=false></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item maxlength="60">-->
<!-- <input type="checkbox" v-model="formInline.borrowUserIsNull" @change="borrowUserChange">借用人为空-->
<!-- </el-form-item>-->
<el-form-item label=""><el-button @click="search" type="primary" icon="Search" v-show="isShowBtn('serversManage','服务器管理','Search')">查询</el-button></el-form-item>
<el-form-item label=""><el-button @click="handleEdit('','reset')" icon="Refresh">重置</el-button></el-form-item>
<el-form-item label=""><el-button @click="addModule" type="primary" v-show="isShowBtn('serversManage','服务器管理','Create')">新增</el-button></el-form-item>
<el-form-item label=""><el-button @click="handleDelete" type="danger" :disabled="multiple" v-show="isShowBtn('serversManage','服务器管理','Delete')">删除</el-button></el-form-item>
<!-- <el-form-item label=""><el-button @click="exportDataBackend" type="primary">导出</el-button></el-form-item>-->
<el-form-item>
<el-upload
ref="upload"
:multiple="false"
action=""
:limit="1"
:show-file-list="false"
:auto-upload="true"
accept=".xls"
:http-request="ImportExcelUploadRequest"
:before-upload="ImportExcelbeforeUpload"
:on-success="ImportExcelhandleSuccess"
:file-list="fileList">
<el-button type="primary" @click="isShowBtn('serversManage','服务器管理','Import')">导入</el-button>
</el-upload>
</el-form-item>
<el-form-item label=""><el-button @click="handleDisable" type="info" :disabled="multiple" v-show="isShowBtn('serversManage','服务器管理','Disable')">批量下架</el-button></el-form-item>
</el-form>
</div>
<div class="table">
<el-table :height="tableHeight" border :data="tableData" v-loading="loadingPage" ref="tableref" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="30" align="center"></el-table-column>
<el-table-column type="index" width="60" align="center" label="序号">
<template #default="scope">
<span v-text="getIndex(scope.$index)"></span>
</template>
</el-table-column>
<el-table-column min-width="90" prop="serverCode" label="设备编号"></el-table-column>
<el-table-column min-width="90" prop="serverFrom" label="信息来源" show-overflow-tooltip></el-table-column>
<el-table-column min-width="180" prop="hardware" label="硬件配置">
<template #default="scope">
<span style="white-space: pre-line;" v-html="scope.row.hardware"></span>
</template>
</el-table-column>
<el-table-column min-width="75" prop="location" label="位置" show-overflow-tooltip></el-table-column>
<el-table-column min-width="75" prop="serversmodel_name" label="设备型号" show-overflow-tooltip></el-table-column>
<el-table-column min-width="70" prop="serversmodel_area" label="设备领域" show-overflow-tooltip></el-table-column>
<el-table-column min-width="70" prop="serversusage_name" label="设备用途" show-overflow-tooltip></el-table-column>
<el-table-column min-width="95" prop="bmcIP" label="bmcIP" show-overflow-tooltip></el-table-column>
<el-table-column min-width="95" prop="hostIP" label="hostIP" show-overflow-tooltip></el-table-column>
<!-- <el-table-column min-width="100" prop="serialIP" label="serialIP" show-overflow-tooltip></el-table-column>-->
<el-table-column min-width="95" prop="borrowUser" label="借用人"></el-table-column>
<el-table-column min-width="80" prop="borrowFromtime" label="借用时间"></el-table-column>
<el-table-column min-width="80" prop="borrowEndtime" label="归还时间"></el-table-column>
<el-table-column min-width="120" prop="notes" label="备注">
<template v-slot="scope">
<el-tooltip placement="top" effect="light">
<template v-slot:content>
<div v-html="formatNotes(scope.row.notes)"></div>
</template>
<div class="cell-content">{{ scope.row.notes }}</div>
</el-tooltip>
</template>
</el-table-column>
<!-- <el-table-column min-width="150" prop="notes" label="备注">-->
<!-- <template v-slot="{ row }">-->
<!-- <el-tooltip :content="row.notes.replace(/\n/g, '<br>')" placement="top" effect="light" :open-delay="500">-->
<!-- <span v-html="row.notes.replace(/\n/g, '<br>')"></span>-->
<!-- </el-tooltip>-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column label="操作" fixed="right" width="150">
<template #header>
<div style="display: flex;justify-content: space-between;align-items: center;">
<div>操作</div>
<div @click="setFull">
<el-tooltip content="全屏" placement="bottom">
<el-icon ><full-screen /></el-icon>
</el-tooltip>
</div>
</div>
</template>
<template #default="scope">
<span class="table-operate-btn" @click="handleEdit(scope.row,'status')" v-show="isShowBtn('serversManage','服务器管理','Disable')">
<span v-if="scope.row.is_launched">下架</span>
<span v-else>上架</span>
</span>
<span class="table-operate-btn" @click="handleEdit(scope.row,'edit')" v-show="isShowBtn('serversManage','服务器管理','Update')">编辑</span>
<span class="table-operate-btn" @click="handleEdit(scope.row,'delete')" v-show="isShowBtn('serversManage','服务器管理','Delete')">删除</span>
</template>
</el-table-column>
</el-table>
</div>
<Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
<add-module-servers ref="addModuleFlag" @refreshData="getData"></add-module-servers>
</div>
</template>
<style scoped>
.cell-content {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<script>
import Pagination from "@/components/Pagination.vue";
import {dateFormats} from "@/utils/util";
import {
wholeMachineServersInfo,
wholeMachineServersInfoDelete,
mallGoodsspuIslaunched,
wholeMachineServersModel,
wholeMachineServersUsage,
wholeMachineServersInfoExportexecl,
wholeMachineServersInfoImportexcel, wholeMachineServersModelGetArea
} from '@/api/api'
import AddModuleServers from "./components/addModuleServers.vue";
import { lyMixins } from "@/mixins/mixins"
export default {
mixins: [lyMixins],
components:{
AddModuleServers,
Pagination,
},
name:'serversManage',
data() {
return {
isFull:false,
loadingPage:false,
// 选项框选中数组
ids: [],
// 选项框非单个禁用
single: true,
// 非多个禁用
multiple: true,
formInline:{
page: 1,
limit: 10,
status:true
},
pageparm: {
page: 1,
limit: 10,
total: 0,
status:true
},
statusList:[
{id:1,name:'正常'},
{id:0,name:'禁用'}
],
islaunchedList:[
{id:1,name:'上架'},
{id:0,name:'下架'}
],
timers:[],
tableData:[],
serversareaList:[],
serversusageList:[],
serversmodelList:[],
fileList: [],
}
},
methods:{
formatNotes(notes) {
return notes.replace(/\n/g, '<br>');
},
async ImportExcelUploadRequest(param){
var vm = this
let obj= await wholeMachineServersInfoImportexcel(param)
if(obj.code == 2000) {
vm.$message.success(obj.msg)
vm.search()
} else {
vm.$message.warning(obj.msg)
}
},
ImportExcelbeforeUpload(file){
let isLt50M = true
isLt50M = file.size / 1024 / 1024 < 50
if(!isLt50M){
this.$message.error("上传文件不能超过50MB")
}
return isLt50M
},
ImportExcelhandleSuccess(response,file,fileList){
this.$refs.upload.clearFiles()
},
downloadFileURL(url) {
var iframe =document.createElement("iframe")
iframe.style.display ="none";
iframe.src = url;
document.body.appendChild(iframe);
},
exportDataBackend() {
var params = {
page: 1,
limit: 9999,
}
wholeMachineServersInfoExportexecl(params).then(res => {
if(res.code ===2000) {
this.downloadFileURL(res.data.data)
//this.$message.warning(res.data.data)
}
})
},
setFull(){
this.isFull=!this.isFull
window.dispatchEvent(new Event('resize'))
},
getIndex($index) {
// (当前页 - 1) * 当前显示数据条数 + 当前行数据的索引 + 1
return (this.pageparm.page-1)*this.pageparm.limit + $index +1
},
//多选项框被选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 批量删除按钮操作 */
handleDelete(row) {
const ids = this.ids;
let vm = this
vm.$confirm('是否确认删除选中的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return wholeMachineServersInfoDelete({id:ids}).then(res=>{
if(res.code == 2000) {
vm.$message.success(res.msg)
vm.search()
} else {
vm.$message.warning(res.msg)
}
})
})
},
/** 批量下架按钮操作 */
handleDisable(row) {
const ids = this.ids;
let vm = this
vm.$confirm('是否确认下架/上架选中的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return mallGoodsspuIslaunched({id:ids}).then(res=>{
if(res.code == 2000) {
vm.$message.success(res.msg)
vm.search()
} else {
vm.$message.warning(res.msg)
}
})
})
},
addModule() {
this.$refs.addModuleFlag.addModuleFn(null,'新增',this.serversAreaList,this.serverstypeList,this.serversmodelList)
},
handleEdit(row,flag) {
if(flag=='status'){
let vm = this
var titext = ""
if(row.is_launched){
titext = "您确定要下架操作吗？"
}else{
titext = "您确定要上架操作吗？"
}
vm.$confirm(titext,{
closeOnClickModal:false
}).then(res=>{
mallGoodsspuIslaunched({id:row.id}).then(res=>{
if(res.code === 2000) {
vm.$message.success(res.msg)
vm.search()
} else {
vm.$message.warning(res.msg)
}
})
}).catch(()=>{
})
}
else if(flag==='edit') {
this.$refs.addModuleFlag.addModuleFn(row,'编辑',this.categoryList)
}
else if(flag==='delete') {
let vm = this
vm.$confirm('您确定要删除选中的数据吗？',{
closeOnClickModal:false
}).then(res=>{
wholeMachineServersInfoDelete({id:row.id}).then(res=>{
if(res.code == 2000) {
vm.$message.success(res.msg)
vm.search()
} else {
vm.$message.warning(res.msg)
}
})
}).catch(()=>{
})
}
else if(flag==="reset"){
this.formInline = {
page:1,
limit: 10,
status: true
}
this.pageparm={
page: 1,
limit: 10,
total: 0,
status:true
}
this.getData()
}
},
callFather(parm) {
this.formInline.page = parm.page
this.formInline.limit = parm.limit
this.getData()
},
search() {
this.formInline.page = 1
this.formInline.limit = 10
this.getData()
},
//获取列表
async getData() {
this.loadingPage = true
wholeMachineServersInfo(this.formInline).then(res => {
this.loadingPage = false
if(res.code ===2000) {
this.tableData = res.data.data
this.pageparm.page = res.data.page;
this.pageparm.limit = res.data.limit;
this.pageparm.total = res.data.total;
}
})
},
getwholeMachineServersUsageList(){
let param = {
page: 1,
limit: 100,
status: true
}
wholeMachineServersUsage(param).then(res => {
if(res.code ==2000) {
this.serversusageList = res.data.data
}
})
},
//获取用途列表
getwholeMachineServersModelList(){
let param = {
page: 1,
limit: 100,
status:true
}
wholeMachineServersModel(param).then(res => {
if(res.code ===2000) {
this.serversmodelList= res.data.data
}
})
},
getwholeMachineServersAreaList(){
let param = {
status:true
}
wholeMachineServersModelGetArea(param).then(res => {
if(res.code ===2000) {
this.serversareaList= res.data.data
}
})
},
timeChange(val){
if (val) {
this.formInline.borrowEndtimeEarlierThan=dateFormats(val,'yyyy-MM-dd');
} else {
this.formInline.borrowEndtimeEarlierThan = null
}
this.search()
},
timeChange2(val){
if (val) {
this.formInline.borrowEndtimeLaterThan=dateFormats(val,'yyyy-MM-dd');
} else {
this.formInline.borrowEndtimeLaterThan = null
}
this.search()
},
borrowUserChange(val){
if (!this.formInline.borrowUserIsNull) {
this.formInline.borrowUserIsNull = null;
// 或者删除该属性
// delete this.formInline.borrowUserIsNull;
}
this.search()
}
},
created() {
this.formInline.serversModel=this.$route.query.serversModel;
this.formInline.serversArea=this.$route.query.serversareaList;
this.formInline.serversUsage=this.$route.query.serversUsage;
this.formInline.serversModel__area = this.$route.query.serversModel__area;
this.formInline.borrowEndtimeEarlierThan = this.$route.query.borrowEndtimeEarlierThan;
this.formInline.borrowEndtimeLaterThan = this.$route.query.borrowEndtimeLaterThan;
this.formInline.borrowUserIsNull = this.$route.query.borrowUserIsNull;
// console.log(this.$route.query); // 输出查询参数，确保参数已经传递过来
this.getData();
this.getwholeMachineServersModelList();
this.getwholeMachineServersAreaList();
this.getwholeMachineServersUsageList();
},
}
</script>
page2#################################################serversModel.vue
<template>
<div :class="{'ly-is-full':isFull}">
<div class="tableSelect" ref="tableSelect">
<el-form :inline="true" :model="formInline" label-position="left">
<el-form-item label="分类名称：">
<el-input v-model.trim="formInline.search" maxlength="60" clearable placeholder="分类名称" @change="search" style="width:200px"></el-input>
</el-form-item>
<el-form-item label="领域：">
<el-select v-model="formInline.area" placeholder="请选择" filterable clearable @change="search" style="width:120px">
<el-option label="BMCV3" value="BMCV3"></el-option>
<el-option label="BMCV4" value="BMCV4"></el-option>
</el-select>
</el-form-item>
<!-- </el-form-item>-->
<!-- <el-form-item label="创建时间：">-->
<!-- <el-date-picker-->
<!-- style="width:100% !important;"-->
<!-- v-model="timers"-->
<!-- size="small"-->
<!-- type="datetimerange"-->
<!-- @change="timeChange"-->
<!-- range-separator="至"-->
<!-- start-placeholder="开始日期"-->
<!-- end-placeholder="结束日期">-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
<el-form-item label=""><el-button @click="search" type="primary" icon="Search" v-show="isShowBtn('serversModel','机型管理','Search')">查询</el-button></el-form-item>
<el-form-item label=""><el-button @click="handleEdit('','reset')" icon="Refresh">重置</el-button></el-form-item>
<el-form-item label=""><el-button @click="addModule" type="primary" v-show="isShowBtn('serversModel','机型管理','Create')">新增</el-button></el-form-item>
<el-form-item label=""><el-button @click="handleDelete" type="danger" :disabled="multiple" v-show="isShowBtn('serversModel','机型管理','Delete')">删除</el-button></el-form-item>
</el-form>
</div>
<div class="table">
<el-table :height="tableHeight" border :data="tableData" v-loading="loadingPage" style="width: 100%" ref="tableref"
@selection-change="handleSelectionChange" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<!-- <el-table-column type="selection" width="55"></el-table-column>-->
<el-table-column type="selection" width="60" align="center"></el-table-column>
<el-table-column type="index" width="60" align="center" label="序号">
<template #default="scope">
<span v-text="getIndex(scope.$index)"></span>
</template>
</el-table-column>
<el-table-column min-width="100" prop="name" label="分类名称"></el-table-column>
<el-table-column min-width="100" prop="area" label="领域"></el-table-column>
<el-table-column min-width="60" sortable prop="sort" label="排序"></el-table-column>
<el-table-column min-width="100" label="状态" prop="status">
<template v-slot="scope">
<el-tag v-if="scope.row.status" size="small">正常</el-tag>
<el-tag v-else type="danger" size="small">禁用</el-tag>
</template>
</el-table-column>
<el-table-column min-width="150" prop="create_datetime" label="创建时间"></el-table-column>
<el-table-column label="操作" width="180">
<template #header>
<div style="display: flex;justify-content: space-between;align-items: center;">
<div>操作</div>
<div @click="setFull">
<el-tooltip content="全屏" placement="bottom">
<el-icon ><full-screen /></el-icon>
</el-tooltip>
</div>
</div>
</template>
<template #default="scope">
<span class="table-operate-btn" @click="handleEdit(scope.row,'edit')" v-show="isShowBtn('serversModel','机型管理','Update')">编辑</span>
<span class="table-operate-btn" @click="handleEdit(scope.row,'delete')" v-show="isShowBtn('serversModel','机型管理','Delete')">删除</span>
</template>
</el-table-column>
</el-table>
</div>
<Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
<add-module-servers-model ref="addModuleFlag" @refreshData="getData"></add-module-servers-model>
</div>
</template>
<script>
import Pagination from "@/components/Pagination.vue";
import {dateFormats} from "@/utils/util";
import { wholeMachineServersModel, wholeMachineServersModelDelete} from '@/api/api'
import XEUtils from "xe-utils";
import AddModuleServersModel from "./components/addModuleServersModel.vue";
import { lyMixins } from "@/mixins/mixins"
export default {
mixins: [lyMixins],
components:{
AddModuleServersModel,
Pagination,
},
name:'serversModel',
data() {
return {
isFull:false,
loadingPage:false,
// 选项框选中数组
ids: [],
// 选项框非单个禁用
single: true,
// 非多个禁用
multiple: true,
formInline:{
search:'',
page: 1,
limit: 100,
},
pageparm: {
page: 1,
limit: 100,
total: 0
},
statusList:[
{id:1,name:'正常'},
{id:0,name:'禁用'}
],
timers:[],
tableData:[],
selectData:[]
}
},
methods:{
setFull(){
this.isFull=!this.isFull
window.dispatchEvent(new Event('resize'))
},
// 表格序列号
getIndex($index) {
// (当前页 - 1) * 当前显示数据条数 + 当前行数据的索引 + 1
return (this.pageparm.page-1)*this.pageparm.limit + $index +1
},
//多选项框被选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 批量删除按钮操作 */
handleDelete(row) {
const ids = this.ids;
let vm = this
vm.$confirm('是否确认删除选中的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return wholeMachineServersModelDelete({id:ids}).then(res=>{
if(res.code == 2000) {
vm.$message.success(res.msg)
vm.search()
} else {
vm.$message.warning(res.msg)
}
})
})
},
changeStatus(row) {
console.log(row,'row----')
},
addModule() {
this.$refs.addModuleFlag.addModuleFn(null,'新增')
},
handleEdit(row,flag) {
if(flag=='detail') {
this.$refs.addModuleFlag.addModuleFn(row,'详情')
}
else if(flag=='edit') {
this.$refs.addModuleFlag.addModuleFn(row,'编辑')
}
else if(flag=='delete') {
let vm = this
vm.$confirm('您确定要删除选中的数据吗？',{
closeOnClickModal:false
}).then(res=>{
wholeMachineServersModelDelete({id:row.id}).then(res=>{
if(res.code == 2000) {
vm.$message.success(res.msg)
vm.search()
} else {
vm.$message.warning(res.msg)
}
})
}).catch(()=>{
})
}
else if(flag=="reset"){
this.formInline = {
page:1,
limit: 10
}
this.pageparm={
page: 1,
limit: 10,
total: 0
}
this.getData()
}
},
callFather(parm) {
this.formInline.page = parm.page
this.formInline.limit = parm.limit
this.getData()
},
search() {
this.formInline.page = 1
this.formInline.limit = 100
this.getData()
},
//获取列表
async getData(){
this.loadingPage = true
wholeMachineServersModel(this.formInline).then(res => {
this.loadingPage = false
if(res.code ==2000) {
this.tableData = res.data.data
// // 将列表数据转换为树形数据
// this.tableData = XEUtils.toArrayTree(res.data.data, { parentKey: 'parent', strict: false })
this.pageparm.page = res.data.page;
this.pageparm.limit = res.data.limit;
this.pageparm.total = res.data.total;
}
})
},
timeChange(val){
if (val) {
this.formInline.beginAt=dateFormats(val[0],'yyyy-MM-dd hh:mm:ss');
this.formInline.endAt=dateFormats(val[1],'yyyy-MM-dd hh:mm:ss');
} else {
this.formInline.beginAt = null
this.formInline.endAt = null
}
this.search()
},
},
created() {
this.getData()
},
}
</script>
page3##########################################serversUsage.vue
<template>
<div :class="{'ly-is-full':isFull}">
<div class="tableSelect" ref="tableSelect">
<el-form :inline="true" :model="formInline" label-position="left">
<el-form-item label="分类名称：">
<el-input v-model.trim="formInline.search" maxlength="60" clearable placeholder="分类名称" @change="search" style="width:200px"></el-input>
</el-form-item>
<!-- <el-form-item label="创建时间：">-->
<!-- <el-date-picker-->
<!-- style="width:100% !important;"-->
<!-- v-model="timers"-->
<!-- size="small"-->
<!-- type="datetimerange"-->
<!-- @change="timeChange"-->
<!-- range-separator="至"-->
<!-- start-placeholder="开始日期"-->
<!-- end-placeholder="结束日期">-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
<el-form-item label=""><el-button @click="search" type="primary" icon="Search" v-show="isShowBtn('serversUsage','用途管理','Search')">查询</el-button></el-form-item>
<el-form-item label=""><el-button @click="handleEdit('','reset')" icon="Refresh">重置</el-button></el-form-item>
<el-form-item label=""><el-button @click="addModule" type="primary" v-show="isShowBtn('serversUsage','用途管理','Create')">新增</el-button></el-form-item>
<el-form-item label=""><el-button @click="handleDelete" type="danger" :disabled="multiple" v-show="isShowBtn('serversUsage','用途管理','Delete')">删除</el-button></el-form-item>
</el-form>
</div>
<div class="table">
<el-table :height="tableHeight" border :data="tableData" v-loading="loadingPage" style="width: 100%" ref="tableref"
@selection-change="handleSelectionChange" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<!-- <el-table-column type="selection" width="55"></el-table-column>-->
<el-table-column type="selection" width="60" align="center"></el-table-column>
<el-table-column type="index" width="60" align="center" label="序号">
<template #default="scope">
<span v-text="getIndex(scope.$index)"></span>
</template>
</el-table-column>
<el-table-column min-width="100" prop="name" label="分类名称"></el-table-column>
<el-table-column min-width="60" sortable prop="sort" label="排序"></el-table-column>
<el-table-column min-width="100" label="状态" prop="status">
<template v-slot="scope">
<el-tag v-if="scope.row.status" size="small">正常</el-tag>
<el-tag v-else type="danger" size="small">禁用</el-tag>
</template>
</el-table-column>
<el-table-column min-width="150" prop="create_datetime" label="创建时间"></el-table-column>
<el-table-column label="操作" width="180">
<template #header>
<div style="display: flex;justify-content: space-between;align-items: center;">
<div>操作</div>
<div @click="setFull">
<el-tooltip content="全屏" placement="bottom">
<el-icon ><full-screen /></el-icon>
</el-tooltip>
</div>
</div>
</template>
<template #default="scope">
<!-- <span class="table-operate-btn" @click="handleEdit(scope.row,'detail')" v-show="isShowBtn('viptypeManage','会员卡管理','Retrieve')">详情</span>-->
<span class="table-operate-btn" @click="handleEdit(scope.row,'edit')" v-show="isShowBtn('serversUsage','用途管理','Update')">编辑</span>
<span class="table-operate-btn" @click="handleEdit(scope.row,'delete')" v-show="isShowBtn('serversUsage','用途管理','Delete')">删除</span>
</template>
</el-table-column>
</el-table>
</div>
<Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
<add-module-servers-usage ref="addModuleFlag" @refreshData="getData"></add-module-servers-usage>
</div>
</template>
<script>
import Pagination from "@/components/Pagination.vue";
import {dateFormats} from "@/utils/util";
import { wholeMachineServersUsage, wholeMachineServersUsageDelete} from '@/api/api'
import XEUtils from "xe-utils";
import AddModuleServersUsage from "./components/addModuleServersUsage.vue";
import { lyMixins } from "@/mixins/mixins"
export default {
mixins: [lyMixins],
components:{
AddModuleServersUsage,
Pagination,
},
name:'serversUsage',
data() {
return {
isFull:false,
loadingPage:false,
// 选项框选中数组
ids: [],
// 选项框非单个禁用
single: true,
// 非多个禁用
multiple: true,
formInline:{
search:'',
page: 1,
limit: 100,
},
pageparm: {
page: 1,
limit: 100,
total: 0
},
statusList:[
{id:1,name:'正常'},
{id:0,name:'禁用'}
],
timers:[],
tableData:[],
selectData:[]
}
},
methods:{
setFull(){
this.isFull=!this.isFull
window.dispatchEvent(new Event('resize'))
},
// 表格序列号
getIndex($index) {
// (当前页 - 1) * 当前显示数据条数 + 当前行数据的索引 + 1
return (this.pageparm.page-1)*this.pageparm.limit + $index +1
},
//多选项框被选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 批量删除按钮操作 */
handleDelete(row) {
const ids = this.ids;
let vm = this
vm.$confirm('是否确认删除选中的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return wholeMachineServersUsageDelete({id:ids}).then(res=>{
if(res.code == 2000) {
vm.$message.success(res.msg)
vm.search()
} else {
vm.$message.warning(res.msg)
}
})
})
},
changeStatus(row) {
console.log(row,'row----')
},
addModule() {
this.$refs.addModuleFlag.addModuleFn(null,'新增')
},
handleEdit(row,flag) {
if(flag=='detail') {
this.$refs.addModuleFlag.addModuleFn(row,'详情')
}
else if(flag=='edit') {
this.$refs.addModuleFlag.addModuleFn(row,'编辑')
}
else if(flag=='delete') {
let vm = this
vm.$confirm('您确定要删除选中的数据吗？',{
closeOnClickModal:false
}).then(res=>{
wholeMachineServersUsageDelete({id:row.id}).then(res=>{
if(res.code == 2000) {
vm.$message.success(res.msg)
vm.search()
} else {
vm.$message.warning(res.msg)
}
})
}).catch(()=>{
})
}
else if(flag=="reset"){
this.formInline = {
page:1,
limit: 10
}
this.pageparm={
page: 1,
limit: 10,
total: 0
}
this.getData()
}
},
callFather(parm) {
this.formInline.page = parm.page
this.formInline.limit = parm.limit
this.getData()
},
search() {
this.formInline.page = 1
this.formInline.limit = 100
this.getData()
},
//获取列表
async getData(){
this.loadingPage = true
wholeMachineServersUsage(this.formInline).then(res => {
this.loadingPage = false
if(res.code ==2000) {
this.tableData = res.data.data
// // 将列表数据转换为树形数据
// this.tableData = XEUtils.toArrayTree(res.data.data, { parentKey: 'parent', strict: false })
this.pageparm.page = res.data.page;
this.pageparm.limit = res.data.limit;
this.pageparm.total = res.data.total;
}
})
},
timeChange(val){
if (val) {
this.formInline.beginAt=dateFormats(val[0],'yyyy-MM-dd hh:mm:ss');
this.formInline.endAt=dateFormats(val[1],'yyyy-MM-dd hh:mm:ss');
} else {
this.formInline.beginAt = null
this.formInline.endAt = null
}
this.search()
},
},
created() {
this.getData()
},
}
</script>
page4#################components--addModuleServers.vue
<template>
<div>
<ly-dialog v-model="dialogVisible" :title="loadingTitle" width="560px" :before-close="handleClose">
<el-form :inline="false" :model="formData" :rules="rules" ref="rulesForm" label-position="right" label-width="130px">
<el-form-item label="分类名称：" prop="name">
<el-input v-model.trim="formData.name" style="width: 300px" :disabled="loadingTitle=='详情'"></el-input>
</el-form-item>
<el-form-item label="排序：" prop="sort">
<el-input-number v-model="formData.sort" :min="0" :max="999999"></el-input-number>
</el-form-item>
<el-form-item label="分类图标：" prop="default_image">
<el-upload
class="avatar-uploader"
action=""
:show-file-list="false"
:http-request="imgUploadRequest"
:on-success="imgUploadSuccess"
:before-upload="imgBeforeUpload">
<img v-if="formData.default_image" :src="formData.default_image" class="avatar">
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</el-form-item>
<el-form-item label="状态：" prop="status" :disabled="loadingTitle=='详情'" >
<el-switch
v-model="formData.status"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="handleClose" :loading="loadingSave">取消</el-button>
<el-button type="primary" @click="submitData" :loading="loadingSave" :disabled="loadingTitle=='详情'">确定</el-button>
</template>
</ly-dialog>
</div>
</template>
<script>
import {wholeMachineServersUsageAdd,wholeMachineServersUsageEdit,platformsettingsUploadPlatformImg} from "@/api/api";
import LyDialog from "@/components/dialog/dialog.vue";
export default {
emits: ['refreshData'],
name: "addModuleServersUsage",
components: {LyDialog},
data() {
return {
dialogVisible:false,
loadingSave:false,
loadingTitle:'',
formData:{
name:"",
sort:0,
parent:"",
default_image:"",
},
rules:{
name: [
{required: true, message: '请输入橱窗名称',trigger: 'blur'}
],
}
}
},
methods:{
handleClose() {
this.dialogVisible=false
this.loadingSave=false
this.formData = {
name:"",
sort:0,
parent:"",
default_image:"",
}
this.$emit('refreshData')
},
addModuleFn(item,flag) {
this.loadingTitle=flag
this.dialogVisible=true
if(item){
this.formData=item
}
},
submitData() {
this.$refs['rulesForm'].validate(obj=>{
if(obj) {
this.loadingSave=true
let param = {
...this.formData
}
if(this.formData.id){
wholeMachineServersUsageEdit(param).then(res=>{
this.loadingSave=false
if(res.code ==2000) {
this.$message.success(res.msg)
this.handleClose()
this.$emit('refreshData')
} else {
this.$message.warning(res.msg)
}
})
}else{
wholeMachineServersUsageAdd(param).then(res=>{
this.loadingSave=false
if(res.code ==2000) {
this.$message.success(res.msg)
this.handleClose()
this.$emit('refreshData')
} else {
this.$message.warning(res.msg)
}
})
}
}
})
},
imgBeforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJPG) {
this.$message.error('图片只能是 JPG/PNG 格式!');
return false
}
return isJPG;
},
async imgUploadRequest(param) {
var vm = this
let obj= await platformsettingsUploadPlatformImg(param)
if(obj.code == 2000) {
let res=''
if (obj.data.data[0].indexOf("://")>=0){
res = obj.data.data[0]
}else{
res = url.split('/api')[0]+obj.data.data[0]
}
vm.formData.default_image = res
} else {
vm.$message.warning(res.msg)
}
},
imgUploadSuccess(res) {
// if (res) {
// this.formData.image = res.url
// }
}
}
}
</script>
<style scoped>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 128px;
height: 128px;
line-height: 128px;
text-align: center;
}
.avatar {
width: 128px;
height: 128px;
display: block;
}
</style>
page5#################################################components--addModuleServersModel.vue
<template>
<div>
<ly-dialog v-model="dialogVisible" :title="loadingTitle" width="560px" :before-close="handleClose">
<el-form :inline="false" :model="formData" :rules="rules" ref="rulesForm" label-position="right" label-width="130px">
<el-form-item label="分类名称：" prop="name">
<el-input v-model.trim="formData.name" style="width: 300px" :disabled="loadingTitle=='详情'"></el-input>
</el-form-item>
<el-form-item label="领域">
<el-select v-model="formData.area" placeholder="请选择">
<el-option label="BMCV4" value="BMCV4" />
<el-option label="BMCV3" value="BMCV3" />
</el-select>
</el-form-item>
<!-- <el-form-item label="领域：" prop="serversType">-->
<!-- <el-select v-model="formData.serversType" placeholder="请选择领域" clearable filterable style="width: 300px">-->
<!-- <el-option-->
<!-- v-for="item in serversTypeList"-->
<!-- :key="item.id"-->
<!-- :label="item.name"-->
<!-- :value="item.id">-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label="排序：" prop="sort">
<el-input-number v-model="formData.sort" :min="0" :max="999999"></el-input-number>
</el-form-item>
<!-- <el-form-item label="分类图标：" prop="default_image">-->
<!-- <el-upload-->
<!-- class="avatar-uploader"-->
<!-- action=""-->
<!-- :show-file-list="false"-->
<!-- :http-request="imgUploadRequest"-->
<!-- :on-success="imgUploadSuccess"-->
<!-- :before-upload="imgBeforeUpload">-->
<!-- <img v-if="formData.default_image" :src="formData.default_image" class="avatar">-->
<!-- <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>-->
<!-- </el-upload>-->
<!-- </el-form-item>-->
<el-form-item label="状态：" prop="status" :disabled="loadingTitle=='详情'" >
<el-switch
v-model="formData.status"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="handleClose" :loading="loadingSave">取消</el-button>
<el-button type="primary" @click="submitData" :loading="loadingSave" :disabled="loadingTitle=='详情'">确定</el-button>
</template>
</ly-dialog>
</div>
</template>
<script>
import {
wholeMachineServersModelAdd,
wholeMachineServersModelEdit,
platformsettingsUploadPlatformImg,
wholeMachineServersType
} from "@/api/api";
import LyDialog from "@/components/dialog/dialog.vue";
export default {
emits: ['refreshData'],
name: "addModuleServersModel",
components: {LyDialog},
data() {
return {
dialogVisible:false,
loadingSave:false,
loadingTitle:'',
formData:{
name:"",
sort:0,
parent:"",
default_image:"",
},
rules:{
name: [
{required: true, message: '请输入橱窗名称',trigger: 'blur'}
],
},
}
},
methods:{
handleClose() {
this.dialogVisible=false
this.loadingSave=false
this.formData = {
name:"",
sort:0,
parent:"",
default_image:"",
}
this.$emit('refreshData')
},
addModuleFn(item,flag) {
this.loadingTitle=flag
this.dialogVisible=true
if(item){
this.formData=item
}
},
submitData() {
this.$refs['rulesForm'].validate(obj=>{
if(obj) {
this.loadingSave=true
let param = {
...this.formData
}
if(this.formData.id){
wholeMachineServersModelEdit(param).then(res=>{
this.loadingSave=false
if(res.code ==2000) {
this.$message.success(res.msg)
this.handleClose()
this.$emit('refreshData')
} else {
this.$message.warning(res.msg)
}
})
}else{
wholeMachineServersModelAdd(param).then(res=>{
this.loadingSave=false
if(res.code ==2000) {
this.$message.success(res.msg)
this.handleClose()
this.$emit('refreshData')
} else {
this.$message.warning(res.msg)
}
})
}
}
})
}
}
}
</script>
<style scoped>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 128px;
height: 128px;
line-height: 128px;
text-align: center;
}
.avatar {
width: 128px;
height: 128px;
display: block;
}
</style>
page6#################components--addModuleServersUsage.vue
<template>
<div>
<ly-dialog v-model="dialogVisible" :title="loadingTitle" width="560px" :before-close="handleClose">
<el-form :inline="false" :model="formData" :rules="rules" ref="rulesForm" label-position="right" label-width="130px">
<el-form-item label="分类名称：" prop="name">
<el-input v-model.trim="formData.name" style="width: 300px" :disabled="loadingTitle=='详情'"></el-input>
</el-form-item>
<el-form-item label="排序：" prop="sort">
<el-input-number v-model="formData.sort" :min="0" :max="999999"></el-input-number>
</el-form-item>
<el-form-item label="分类图标：" prop="default_image">
<el-upload
class="avatar-uploader"
action=""
:show-file-list="false"
:http-request="imgUploadRequest"
:on-success="imgUploadSuccess"
:before-upload="imgBeforeUpload">
<img v-if="formData.default_image" :src="formData.default_image" class="avatar">
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</el-form-item>
<el-form-item label="状态：" prop="status" :disabled="loadingTitle=='详情'" >
<el-switch
v-model="formData.status"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="handleClose" :loading="loadingSave">取消</el-button>
<el-button type="primary" @click="submitData" :loading="loadingSave" :disabled="loadingTitle=='详情'">确定</el-button>
</template>
</ly-dialog>
</div>
</template>
<script>
import {wholeMachineServersUsageAdd,wholeMachineServersUsageEdit,platformsettingsUploadPlatformImg} from "@/api/api";
import LyDialog from "@/components/dialog/dialog.vue";
export default {
emits: ['refreshData'],
name: "addModuleServersUsage",
components: {LyDialog},
data() {
return {
dialogVisible:false,
loadingSave:false,
loadingTitle:'',
formData:{
name:"",
sort:0,
parent:"",
default_image:"",
},
rules:{
name: [
{required: true, message: '请输入橱窗名称',trigger: 'blur'}
],
}
}
},
methods:{
handleClose() {
this.dialogVisible=false
this.loadingSave=false
this.formData = {
name:"",
sort:0,
parent:"",
default_image:"",
}
this.$emit('refreshData')
},
addModuleFn(item,flag) {
this.loadingTitle=flag
this.dialogVisible=true
if(item){
this.formData=item
}
},
submitData() {
this.$refs['rulesForm'].validate(obj=>{
if(obj) {
this.loadingSave=true
let param = {
...this.formData
}
if(this.formData.id){
wholeMachineServersUsageEdit(param).then(res=>{
this.loadingSave=false
if(res.code ==2000) {
this.$message.success(res.msg)
this.handleClose()
this.$emit('refreshData')
} else {
this.$message.warning(res.msg)
}
})
}else{
wholeMachineServersUsageAdd(param).then(res=>{
this.loadingSave=false
if(res.code ==2000) {
this.$message.success(res.msg)
this.handleClose()
this.$emit('refreshData')
} else {
this.$message.warning(res.msg)
}
})
}
}
})
},
imgBeforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJPG) {
this.$message.error('图片只能是 JPG/PNG 格式!');
return false
}
return isJPG;
},
async imgUploadRequest(param) {
var vm = this
let obj= await platformsettingsUploadPlatformImg(param)
if(obj.code == 2000) {
let res=''
if (obj.data.data[0].indexOf("://")>=0){
res = obj.data.data[0]
}else{
res = url.split('/api')[0]+obj.data.data[0]
}
vm.formData.default_image = res
} else {
vm.$message.warning(res.msg)
}
},
imgUploadSuccess(res) {
// if (res) {
// this.formData.image = res.url
// }
}
}
}
</script>
<style scoped>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 128px;
height: 128px;
line-height: 128px;
text-align: center;
}
.avatar {
width: 128px;
height: 128px;
display: block;
}
</style>