313 lines
8.6 KiB
Vue
313 lines
8.6 KiB
Vue
<template>
|
||
<div class="aainer">
|
||
<div class="wit-b">
|
||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
|
||
<el-form-item label="" prop="legalRepresentativeContact">
|
||
|
||
<el-select
|
||
v-model="queryParams.deviceType"
|
||
clearable
|
||
placeholder="请选择设备类型"
|
||
>
|
||
<el-option v-for="item in deviceTypeList" :key="item" :label="item" :value="item">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="" prop="deviceName">
|
||
<el-input
|
||
v-model="queryParams.deviceName"
|
||
placeholder="请输入设备名称"
|
||
clearable
|
||
style="width: 240px;"
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="">
|
||
<el-date-picker
|
||
v-model="beginTime"
|
||
style="width: 140px"
|
||
type="date"
|
||
placeholder="交易开始日期">
|
||
</el-date-picker>
|
||
至
|
||
<el-date-picker
|
||
v-model="endTime"
|
||
style="width: 140px"
|
||
type="date"
|
||
placeholder="交易结束日期">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item style="float: right;margin-right: 0px">
|
||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="handleAdd"
|
||
>新增设备</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<!-- v-hasPermi="['setting:app:add']"-->
|
||
|
||
<div style="height: 70vh;overflow: auto">
|
||
<el-table :data="tableData" style="width: 100%" border>
|
||
<el-table-column align="center" type="index" label="序号"></el-table-column>
|
||
<el-table-column align="center" prop="deviceType" label="设备类型"></el-table-column>
|
||
<el-table-column align="center" prop="deviceName" label="设备名称"></el-table-column>
|
||
<el-table-column align="center" prop="deviceId" label="设备id"></el-table-column>
|
||
<el-table-column align="center" prop="createName" label="创建人"></el-table-column>
|
||
<el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
|
||
<el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-view"
|
||
@click="edit(scope.row)"
|
||
>编辑</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-edit"
|
||
@click="del(scope.row)"
|
||
>删除</el-button>
|
||
</template>
|
||
<!-- v-hasPermi="['setting:app:delete']"-->
|
||
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<pagination
|
||
v-show="total>0"
|
||
:total="total"
|
||
:page.sync="queryParams.page"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getList"
|
||
/>
|
||
|
||
</div>
|
||
|
||
<el-dialog :title="title" :close-on-click-modal="false" :visible.sync="open" width="24%" append-to-body>
|
||
<el-form :model="deviceInfo" ref="deviceForm" label-width="95px" :rules="rule">
|
||
<el-form-item label="设备类型" prop="deviceType">
|
||
<el-select
|
||
v-model="deviceInfo.deviceType"
|
||
clearable
|
||
placeholder="设备类型"
|
||
style="width: 300px;"
|
||
>
|
||
<el-option v-for="item in deviceTypeList" :key="item" :label="item" :value="item">
|
||
</el-option>
|
||
</el-select>
|
||
|
||
</el-form-item>
|
||
<el-form-item label="设备名称" prop="deviceName">
|
||
<el-input v-model="deviceInfo.deviceName" style="width: 300px;"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item v-if="deviceInfo.deviceType !== 'BY'" label="设备id" prop="deviceId">
|
||
<el-input v-model="deviceInfo.deviceId" style="width: 300px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="" prop="deviceId1">
|
||
<div style="color: red; width: 300px; font-size: 12px; line-height: 15px">注：DD、LY的设备ID，需要找业务人员获取，DD是集线器ID、LY是门店ID。
|
||
BY的设备ID，创建后将自动生成，请把设备ID提供给BY技术人员进行配置。 </div>
|
||
</el-form-item>
|
||
|
||
<el-form-item>
|
||
<el-button @click="open = false">取消</el-button>
|
||
<el-button type="primary" @click="submitForm('deviceForm')">提交</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-dialog>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
|
||
import {
|
||
addOilEngineConfigApi,
|
||
delOilEngineConfigApi,
|
||
editOilEngineConfigApi,
|
||
getListByPageApi
|
||
} from "@/api/seeting/youqiji";
|
||
|
||
export default {
|
||
name: "youqiji",
|
||
|
||
data() {
|
||
return {
|
||
tableData: [],
|
||
deviceTypeList: [
|
||
"BY",
|
||
"LY",
|
||
"DD",
|
||
],
|
||
|
||
// 日期范围
|
||
dateRange: [],
|
||
beginTime:"",
|
||
endTime:"",
|
||
|
||
deviceInfo: {
|
||
id: null, // 自增id
|
||
deviceType: 'BY',
|
||
deviceName: '',
|
||
deviceId: '',
|
||
|
||
},
|
||
rule: {
|
||
deviceType: [{required: true, message: '请选择设备类型', trigger: 'blur'},],
|
||
deviceName: [{required: true, message: '请填写设备名称', trigger: 'blur'},],
|
||
deviceId: [{required: true, message: '请填写设备ID', trigger: 'blur'},],
|
||
},
|
||
// 是否显示弹出层
|
||
open: false,
|
||
title:"",
|
||
total:0,
|
||
// 查询参数
|
||
queryParams: {
|
||
page: 1,
|
||
pageSize: 10,
|
||
orgName:'',
|
||
orgId:'',
|
||
legalRepresentativeContact:'',
|
||
appStatus:'',
|
||
},
|
||
};
|
||
},
|
||
created() {
|
||
this.getList()
|
||
this.getDeptList()
|
||
},
|
||
methods: {
|
||
|
||
getList(){
|
||
let dateRange = []
|
||
if (this.beginTime && this.endTime) {
|
||
dateRange.push(this.beginTime.toLocaleDateString())
|
||
dateRange.push(this.endTime.toLocaleDateString())
|
||
}
|
||
getListByPageApi(this.addDateRange(this.queryParams, dateRange)).then(res=>{
|
||
this.tableData = res.data.records;
|
||
this.total = res.data.total
|
||
})
|
||
},
|
||
|
||
submitForm(formName) {
|
||
this.$refs[formName].validate(valid => {
|
||
if (valid) {
|
||
// 表单验证通过，可以提交数据
|
||
// 示例：调用 API 提交数据
|
||
this.submitDeviceInfo();
|
||
} else {
|
||
// 表单验证失败，不执行任何操作
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
submitDeviceInfo() {
|
||
// 在这里调用接口提交设备信息数据
|
||
|
||
if (this.deviceInfo.id) {
|
||
editOilEngineConfigApi(this.deviceInfo).then(res=>{
|
||
if(res.code === 200) {
|
||
this.getList()
|
||
this.open = false
|
||
}
|
||
|
||
})
|
||
}else {
|
||
addOilEngineConfigApi(this.deviceInfo).then(res=>{
|
||
if(res.code === 200) {
|
||
this.getList()
|
||
this.open = false
|
||
}
|
||
})
|
||
}
|
||
},
|
||
handleQuery(){
|
||
this.getList()
|
||
},
|
||
resetQuery(){
|
||
this.queryParams = {
|
||
page: 1,
|
||
pageSize: 10,
|
||
deviceName:'',
|
||
},
|
||
this.getList()
|
||
},
|
||
handleAdd(e) {
|
||
this.clean()
|
||
this.open = true;
|
||
this.title = "新增设备"
|
||
},
|
||
edit(e) {
|
||
this.clean()
|
||
this.open = true;
|
||
this.title = "编辑设备"
|
||
this.deviceInfo = e
|
||
console.log('提交设备信息数据:', this.deviceInfo);
|
||
|
||
},
|
||
del(e) {
|
||
|
||
this.$confirm('是否删除本条数据, 删除后无法恢复?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
delOilEngineConfigApi(e.id).then(res=>{
|
||
if (res.code == 200) {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '删除成功!'
|
||
});
|
||
this.getList()
|
||
}
|
||
})
|
||
|
||
}).catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消删除'
|
||
});
|
||
});
|
||
|
||
|
||
|
||
},
|
||
clean() {
|
||
this.deviceInfo= {
|
||
id: null, // 自增id
|
||
deviceType: 'BY',
|
||
deviceName: '',
|
||
deviceId: '',
|
||
|
||
}
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.common-dialog >>> .el-upload--picture-card {
|
||
width: 60px;
|
||
height: 50px;
|
||
line-height: 60px;
|
||
}
|
||
.aainer{
|
||
background: #f5f7f8;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
}
|
||
.wit-b{
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
height: 87vh;
|
||
}
|
||
</style>
|
||
|