You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
392 lines
9.2 KiB
392 lines
9.2 KiB
<template> |
|
<basic-container> |
|
<avue-crud |
|
id="avue-id" |
|
ref="crud" |
|
:option="option" |
|
:data="data" |
|
:page.sync="page" |
|
:table-loading="loading" |
|
@row-save="rowSave" |
|
@row-update="rowUpdate" |
|
@row-del="rowDel" |
|
@current-change="currentChange" |
|
@size-change="sizeChange" |
|
> |
|
<template slot="menuLeft"> |
|
<el-form |
|
ref="searchForm" |
|
:model="searchForm" |
|
label-width="120px" |
|
style="border: 0px solid red; margin-bottom: 8px" |
|
> |
|
<el-row> |
|
<el-col :span="2.5"> |
|
<el-date-picker |
|
:clearable="false" |
|
class="search-picker" |
|
v-model="searchForm.currentMonth" |
|
type="month" |
|
placeholder="选择日期" |
|
format="yyyy-MM" |
|
value-format="yyyy-MM"> |
|
</el-date-picker> |
|
</el-col> |
|
<el-col style="margin-left: 18px" :span="3.5"> |
|
<el-button class="search" @click="searchHandle(0)">查询</el-button> |
|
<el-button class="reset" @click="searchHandle(1)">重置</el-button> |
|
</el-col> |
|
</el-row> |
|
</el-form> |
|
</template> |
|
<template slot-scope="{ type }" slot="menuForm"> |
|
<el-button |
|
size="small" |
|
@click="$refs.crud.closeDialog()" |
|
class="button-el" |
|
>取消</el-button |
|
> |
|
<el-button |
|
size="small" |
|
v-if="type == 'add'" |
|
@click="$refs.crud.rowSave()" |
|
class="button-el" |
|
>确定</el-button |
|
> |
|
<el-button |
|
size="small" |
|
v-if="type == 'edit'" |
|
@click="$refs.crud.rowUpdate()" |
|
class="button-el" |
|
>提交</el-button |
|
> |
|
</template> |
|
<template slot="menuRight"> |
|
<el-button class="search" style="width: 120px" @click="$refs.crud.rowAdd()" |
|
>新建</el-button |
|
> |
|
</template> |
|
<template slot-scope="{ row, index }" slot="menu"> |
|
<el-button @click="$refs.crud.rowEdit(row, index)" class="look" |
|
>编辑</el-button |
|
> |
|
<el-button @click="$refs.crud.rowDel(row, index)" class="look" |
|
>删除</el-button |
|
> |
|
</template> |
|
</avue-crud> |
|
</basic-container> |
|
</template> |
|
|
|
<script> |
|
import {getIntensity,saveIntensity,deleteIntensity} from "@/api/dataStatistics/carbonIntensity"; |
|
export default { |
|
data() { |
|
return { |
|
loading: false, |
|
page: { |
|
current: 1, |
|
total: 1, |
|
size: 10, |
|
}, |
|
// 搜索 |
|
searchForm: { |
|
currentMonth: null, |
|
}, |
|
searchText: { |
|
flag: 3, |
|
addText: "新增", |
|
}, |
|
option: { |
|
searchMenuSpan: 8, |
|
selection: true, |
|
index: true, |
|
delBtn: false, |
|
editBtn: false, |
|
labelSuffix: " ", //控制标题后缀 |
|
labelWidth: 120, |
|
gutter: 20, //设置input的大小 |
|
expandLevel: 3, |
|
headerAlign: "left", |
|
menuWidth: 450, |
|
align: "left", |
|
menuPosition: "left", |
|
tree: true, |
|
menuBtn: false, |
|
submitBtn: true, |
|
emptyBtn: false, |
|
addBtn: false, |
|
searchBtn: false, |
|
columnBtn: false, |
|
refreshBtn: false, |
|
tip: false, |
|
border: false, |
|
saveBtn: false, |
|
cancelBtn: false, |
|
dialogWidth: 920, |
|
updateBtn: false, |
|
labelPosition: "top", |
|
dialogCustomClass: "custom", |
|
indexLabel: "序号", |
|
column: [ |
|
{ |
|
type: "month", |
|
span: 8, |
|
label: "日期", |
|
prop: "currentMonth", |
|
overHidden: true, |
|
align: "left", |
|
format:'yyyy-MM', |
|
valueFormat:'yyyy-MM', |
|
rules:[ |
|
{required:true,message:'请选择日期',trigger:'blur'}, |
|
] |
|
}, |
|
{ |
|
type: "input", |
|
span: 8, |
|
label: "碳排放强度", |
|
prop: "intensity", |
|
// search: true, |
|
overHidden: true, |
|
align: "left", |
|
rules: [ |
|
{required:true,message:'请填写碳排放强度',trigger:'blur'}, |
|
{ |
|
pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, |
|
message: "碳排放计划量必须大于0且最多只有两位小数", |
|
trigger: "blur", |
|
}, |
|
], |
|
}, |
|
], |
|
}, |
|
}; |
|
}, |
|
mounted() { |
|
// if (JSON.stringify(this.$store.state.client.supplierParams) !== "{}") { |
|
// this.searchForm = this.$store.state.client.supplierParams; |
|
// } |
|
this.onLoad(); |
|
}, |
|
methods: { |
|
// 分页 |
|
currentChange(currentPage) { |
|
this.page.current = currentPage; |
|
this.onLoad(); |
|
}, |
|
sizeChange(pageSize) { |
|
this.page.size = pageSize; |
|
this.onLoad(); |
|
}, |
|
// 搜索 |
|
searchHandle(val) { |
|
if(val == 0){ |
|
this.onLoad() |
|
}else{ |
|
this.searchForm = { |
|
currentMonth:null |
|
} |
|
this.onLoad() |
|
} |
|
}, |
|
// 新增 |
|
addHandle() { |
|
this.$refs.crud.rowAdd(); |
|
}, |
|
|
|
onLoad() { |
|
this.loading = true; |
|
getIntensity({current:this.page.current,size:this.page.size,...this.searchForm}).then((res) => { |
|
const {records,total} = res.data.data |
|
this.data = records |
|
this.page.total = total |
|
this.loading = false; |
|
}); |
|
}, |
|
//新增 |
|
rowSave(form, done, loading) { |
|
saveIntensity(form).then((res) => { |
|
if(res.data.code == 200){ |
|
this.$message.success("新增成功"); |
|
this.onLoad(); |
|
} |
|
}); |
|
done(); |
|
}, |
|
//删除 |
|
rowDel(form, index) { |
|
this.$confirm("此操作会删除该数据，且无法恢复，确定要删除吗?", { |
|
confirmButtonText: "确定", |
|
cancelButtonText: "取消", |
|
type: "warning", |
|
}).then(() => { |
|
deleteIntensity(form.id).then((res) => { |
|
this.$message.success("删除成功"); |
|
this.onLoad(); |
|
}); |
|
}); |
|
}, |
|
//修改 |
|
rowUpdate(form, index, done, loading) { |
|
let params = { |
|
id:form.id, |
|
currentMonth:form.currentMonth, |
|
intensity:form.intensity |
|
} |
|
saveIntensity(params).then((res) => { |
|
if(res.data.code == 200){ |
|
this.$message.success("编辑成功"); |
|
this.onLoad(); |
|
} |
|
done(); |
|
}); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
// 取消 |
|
.button-el { |
|
color: #999999; |
|
background-color: #fff; |
|
border-color: #e4e7ec; |
|
height: 46px; |
|
width: 100px; |
|
border-radius: 0px; |
|
margin-left: 20px; |
|
} |
|
// 确定 |
|
.button-el:hover { |
|
color: #fff; |
|
background-color: #1e60f5; |
|
border-color: #1e60f5; |
|
height: 46px; |
|
width: 100px; |
|
border-radius: 0px; |
|
margin-left: 20px; |
|
} |
|
::v-deep .el-table td.el-table__cell, |
|
.el-table th.el-table__cell.is-leaf { |
|
border-bottom: 1px solid #f0f3f7; |
|
} |
|
::v-deep .el-table .el-table__cell.is-center { |
|
text-align: left; |
|
} |
|
::v-deep .avue-crud .el-table th { |
|
color: #999999; |
|
font-weight: 400; |
|
background: #f6f8fa; |
|
height: 66px; |
|
} |
|
::v-deep .avue-crud .el-table td { |
|
height: 66px; |
|
color: #333333; |
|
} |
|
::v-deep .el-table .el-table__cell.is-center { |
|
text-align: left; |
|
} |
|
::v-deep .el-table__row .el-button--default, |
|
.el-table__row .el-button--text { |
|
background-color: #fff !important; |
|
} |
|
// 按钮样式 |
|
::v-deep .el-table__row .el-button--default, |
|
.el-table__row .el-button--text { |
|
background-color: #fff !important; |
|
width: 70px; |
|
height: 36px; |
|
border-radius: 0; |
|
padding: 10px; |
|
border-color: #e4e7ec; |
|
color: #333333; |
|
} |
|
/deep/ .avue-crud__pagination { |
|
height: 20px; |
|
padding: 10px; |
|
// padding-top: 30px; |
|
// padding-bottom: 30px; |
|
} |
|
.search-input { |
|
width: 255px; |
|
height: 46px; |
|
margin-left: 10px; |
|
/deep/ .el-input__inner { |
|
width: 255px; |
|
height: 46px; |
|
} |
|
} |
|
.search { |
|
color: #fff; |
|
background-color: #1e60f5; |
|
border-color: #1e60f5; |
|
height: 46px; |
|
width: 100px; |
|
border-radius: 0px; |
|
// margin-left:18px!important; |
|
margin-right: 0 !important; |
|
} |
|
// 重置按钮 |
|
.reset { |
|
color: #999999; |
|
background-color: #fff; |
|
border-color: #e4e7ec; |
|
height: 46px; |
|
width: 100px; |
|
margin-left: 18px !important; |
|
border-radius: 0px; |
|
} |
|
.search-picker { |
|
width: 240px; |
|
height: 46px; |
|
border-radius: 0; |
|
margin-left: 10px; |
|
/deep/ .el-input__inner{ |
|
height: 100% !important; |
|
} |
|
} |
|
.search-select { |
|
width: 240px !important; |
|
height: 46px; |
|
border-radius: 0; |
|
margin-left: 10px; |
|
/deep/ .el-input__inner { |
|
width: 240px; |
|
height: 46px; |
|
} |
|
} |
|
.search_select { |
|
width: 150px !important; |
|
height: 46px; |
|
border-radius: 0; |
|
margin-left: 10px; |
|
/deep/ .el-input__inner { |
|
width: 150px; |
|
height: 46px; |
|
} |
|
} |
|
// 新增取消确定 |
|
.buttonOne { |
|
color: #999999; |
|
background-color: #fff; |
|
border-color: #e4e7ec; |
|
height: 46px; |
|
width: 100px; |
|
border-radius: 0px; |
|
margin-left: 20px; |
|
} |
|
.buttonOne:hover { |
|
color: #fff; |
|
background-color: #1e60f5; |
|
border-color: #1e60f5; |
|
height: 46px; |
|
width: 100px; |
|
border-radius: 0px; |
|
margin-left: 20px; |
|
} |
|
// 分页 |
|
::v-deep .el-pagination .el-select .el-input .el-input__inner { |
|
height: 20px; |
|
} |
|
</style>
|
|
|