| | |
| | | <template> |
| | | <div class="parameterConfiguration_box"> |
| | | <div class="parameterConfiguration_box box_div"> |
| | | <My-bread :list="[ |
| | | `${$t('operatManage.operatManage')}`, |
| | | `${$t('operatManage.systemLayout')}`, |
| | | ]"></My-bread> |
| | | <el-divider /> |
| | | <div class="parameterConfiguration"> |
| | | <div |
| | | class="table_box" |
| | | :style="styleVar" |
| | | > |
| | | <el-table |
| | | ref="filterTable" |
| | | :data="tableData" |
| | | style="width: 100%" |
| | | border |
| | | height="calc(100% - 45px)" |
| | | > |
| | | <el-table-column |
| | | align="center" |
| | |
| | | type="warning" |
| | | plain |
| | | size="small" |
| | | >{{ $t('common.edit') }}</el-button> |
| | | >{{ $t("common.edit") }}</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <div class="pagination_box"> |
| | | <div |
| | | class="pagination_box" |
| | | style="margin-top: 10px" |
| | | > |
| | | <el-pagination |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | :current-page="listData.pageIndex" |
| | | :page-sizes="[10, 20, 30, 40]" |
| | | :page-sizes="[10, 20, 50, 100]" |
| | | :page-size="listData.pageSize" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="count" |
| | |
| | | |
| | | <el-dialog |
| | | :title="$t('operatManage.sysLayOutObj.editSysLayOut')" |
| | | style="overflow: hidden" |
| | | top="2vh" |
| | | :visible.sync="EditFormdialog" |
| | | :before-close="EditFromDataClose" |
| | | > |
| | | <el-form :model="upform"> |
| | | <el-form-item |
| | | :label="$t('operatManage.sysLayOutObj.name')" |
| | | :label-width="formLabelWidth" |
| | | <div style="height: 500px; overflow: auto"> |
| | | <el-form |
| | | :model="upform" |
| | | label-position="top" |
| | | > |
| | | <label class="boxlabel">{{ upform.name }}</label> |
| | | </el-form-item> |
| | | <el-form-item |
| | | :label="$t('operatManage.sysLayOutObj.cvalue')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-input |
| | | v-model="upform.cvalue" |
| | | autocomplete="off" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item |
| | | :label="$t('operatManage.sysLayOutObj.dvalue')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <label class="boxlabel">{{ upform.dvalue }}</label> |
| | | </el-form-item> |
| | | <el-form-item |
| | | :label="$t('operatManage.sysLayOutObj.minValue')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <label class="boxlabel">{{ upform.minValue }}</label> |
| | | </el-form-item> |
| | | <el-form-item |
| | | :label="$t('operatManage.sysLayOutObj.maxValue')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <label class="boxlabel">{{ upform.maxValue }}</label> |
| | | </el-form-item> |
| | | <el-form-item |
| | | :label="$t('operatManage.sysLayOutObj.descr')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <label class="boxlabel">{{ upform.descr }}</label> |
| | | </el-form-item> |
| | | </el-form> |
| | | <el-form-item |
| | | :label="$t('operatManage.sysLayOutObj.name')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <label class="boxlabel">{{ upform.name }}</label> |
| | | </el-form-item> |
| | | <el-form-item |
| | | :label="$t('operatManage.sysLayOutObj.cvalue')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-input |
| | | v-model="upform.cvalue" |
| | | autocomplete="off" |
| | | style="width:85%" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item |
| | | :label="$t('operatManage.sysLayOutObj.dvalue')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <label class="boxlabel">{{ upform.dvalue }}</label> |
| | | </el-form-item> |
| | | <el-form-item |
| | | :label="$t('operatManage.sysLayOutObj.minValue')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <label class="boxlabel">{{ upform.minValue }}</label> |
| | | </el-form-item> |
| | | <el-form-item |
| | | :label="$t('operatManage.sysLayOutObj.maxValue')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <label class="boxlabel">{{ upform.maxValue }}</label> |
| | | </el-form-item> |
| | | <el-form-item |
| | | :label="$t('operatManage.sysLayOutObj.descr')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <label class="boxlabel">{{ upform.descr }}</label> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <div |
| | | slot="footer" |
| | | class="dialog-footer" |
| | | > |
| | | <el-button @click="EditFromDataClose">{{ |
| | | $t('common.close') |
| | | <el-button |
| | | size="small" |
| | | @click="EditFromDataClose" |
| | | >{{ |
| | | $t("common.close") |
| | | }}</el-button> |
| | | <el-button |
| | | @click="EditFromData" |
| | | style="background: #409eff; border: 1px solid #409eff; color: white" |
| | | >{{ $t('common.confirm') }}</el-button> |
| | | size="small" |
| | | type="primary" |
| | | >{{ |
| | | $t("common.confirm") |
| | | }}</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import MyBread from '../../components/MyBread.vue'; |
| | | import { select_Args_ByPageAndCount, update_args } from '../../api/api.js'; |
| | | import MyBread from "../../components/MyBread.vue"; |
| | | import { select_Args_ByPageAndCount, update_args } from "../../api/api.js"; |
| | | export default { |
| | | //import引入的组件需要注入到对象中才能使用 |
| | | components: { |
| | |
| | | insert: false, |
| | | update: false, |
| | | }, |
| | | formLabelWidth: '120px', |
| | | formLabelWidth: "120px", |
| | | upform: {}, |
| | | EditFormdialog: false, |
| | | tableData: [], |
| | | count: 0, |
| | | listData: { |
| | | name: '', |
| | | name: "", |
| | | pageIndex: 1, |
| | | pageSize: 10, |
| | | }, |
| | | tableHeight: 0, |
| | | timer: 0, |
| | | styleVar: { |
| | | height: "calc(100% - 30px)", |
| | | }, |
| | | }; |
| | | }, |
| | |
| | | this.upform = row; |
| | | }, |
| | | EditFromDataClose() { |
| | | this.EditFormdialog = false; |
| | | this.upform = {}; |
| | | this.$confirm("关闭后无法保存,是否关闭?") |
| | | .then((_) => { |
| | | this.EditFormdialog = false; |
| | | this.upform = {}; |
| | | this.getRoleTabelData(); |
| | | }) |
| | | .catch((_) => { }); |
| | | }, |
| | | async EditFromData() { |
| | | if ( |
| | |
| | | parseInt(this.upform.cvalue) > parseInt(this.upform.maxValue) |
| | | ) { |
| | | this.$message({ |
| | | message: '当前值不能小于最小值或大于最大值!', |
| | | type: 'warning', |
| | | message: "当前值不能小于最小值或大于最大值!", |
| | | type: "warning", |
| | | }); |
| | | return; |
| | | } |
| | |
| | | this.uploadFile = val_data.result; |
| | | |
| | | this.$message({ |
| | | message: '修改成功!', |
| | | type: 'success', |
| | | message: "修改成功!", |
| | | type: "success", |
| | | }); |
| | | this.getRoleTabelData(); |
| | | this.EditFormdialog = false; |
| | | this.upform = {}; |
| | | } else { |
| | | this.$message({ |
| | | message: '修改失败!', |
| | | type: 'warning', |
| | | message: "修改失败!", |
| | | type: "warning", |
| | | }); |
| | | } |
| | | }, |
| | | async getRoleTabelData() { |
| | | if (this.listData.tab == '') { |
| | | if (this.listData.tab == "") { |
| | | delete this.listData.tab; |
| | | } |
| | | const data = await select_Args_ByPageAndCount(this.listData); |
| | | if (data.code != 200) { |
| | | this.$message.error('列表调用失败'); |
| | | this.$message.error("列表调用失败"); |
| | | } |
| | | console.log(data); |
| | | |
| | | this.tableData = data.result; |
| | | this.count = data.count; |
| | | }, |
| | | showPermsMenu(res) { |
| | | switch (res.tag) { |
| | | case '/delete': |
| | | case "/delete": |
| | | this.menuStatus.delete = true; |
| | | break; |
| | | case '/insert': |
| | | case "/insert": |
| | | this.menuStatus.insert = true; |
| | | break; |
| | | case '/update': |
| | | case "/update": |
| | | this.menuStatus.update = true; |
| | | break; |
| | | } |
| | |
| | | <style lang="less" scoped> |
| | | //@import url(); 引入公共css类 |
| | | .parameterConfiguration_box { |
| | | height: 98%; |
| | | width: 98%; |
| | | padding: 1%; |
| | | position: absolute; |
| | | height: calc(100% - 40px); |
| | | width: calc(100% - 40px); |
| | | padding: 10px; |
| | | margin: 10px; |
| | | border-radius: 10px; |
| | | position: relative; |
| | | .parameterConfiguration { |
| | | padding-top: 10px; |
| | | padding-bottom: 10px; |
| | | height: 88%; |
| | | overflow: auto; |
| | | border-radius: 5px; |
| | | border: 1px solid rgb(202, 201, 204); |
| | | |
| | | box-sizing: border-box; |
| | | .el-select { |
| | | width: 100%; |
| | |
| | | display: flex; |
| | | justify-content: center; |
| | | } |
| | | /*修改table 表体的背景颜色和文字颜色*/ |
| | | /deep/ .el-table { |
| | | background-color: transparent; |
| | | |
| | | th, |
| | | td { |
| | | background-color: transparent; |
| | | } |
| | | .el-table__expanded-cell { |
| | | background-color: transparent !important; |
| | | } |
| | | |
| | | // 表头背景色 |
| | | th.el-table__cell { |
| | | background-color: #303030; |
| | | color: #fff; |
| | | } |
| | | tr > td { |
| | | background-color: #303030; |
| | | color: #fff; |
| | | } |
| | | |
| | | // hover效果 |
| | | tr:hover > td { |
| | | background-color: rgba(255, 255, 255, 0.3) !important; |
| | | } |
| | | |
| | | tbody tr:hover { |
| | | background-color: rgba(255, 255, 255, 0.3) !important; |
| | | // text-align: center; |
| | | } |
| | | |
| | | // 滚动条宽高 |
| | | .el-table__body-wrapper::-webkit-scrollbar { |
| | | width: 5px; |
| | | height: 5px; |
| | | } |
| | | |
| | | .el-table__body-wrapper::-webkit-scrollbar { |
| | | width: 5px; |
| | | /*滚动条宽度*/ |
| | | height: 10px; |
| | | /*滚动条高度*/ |
| | | } |
| | | /*定义滚动条轨道 内阴影+圆角*/ |
| | | .el-table__body-wrapper::-webkit-scrollbar-track { |
| | | box-shadow: 0px 1px 3px #216fe6 inset; |
| | | /*滚动条的背景区域的内阴影*/ |
| | | border-radius: 10px; |
| | | } |
| | | |
| | | /*定义滑块 内阴影+圆角*/ |
| | | .el-table__body-wrapper::-webkit-scrollbar-thumb { |
| | | box-shadow: 0px 1px 3px #216fe6 inset; |
| | | border-radius: 6px; |
| | | background-color: #216fe6; |
| | | } |
| | | } |
| | | } |
| | | .pagination_box { |
| | | margin-top: 20px; |
| | | } |
| | | |
| | | .pagination_box { |
| | | /deep/.el-input__inner { |
| | | background-color: transparent !important; |
| | | border: 1px solid; |
| | | color: white; |
| | | } |
| | | /deep/.el-pagination__total { |
| | | color: white; |
| | | } |
| | | /deep/.el-pagination__jump { |
| | | color: white; |
| | | } |
| | | /deep/.el-pager li.active { |
| | | color: #1890ff; |
| | | } |
| | | /deep/.el-pager li { |
| | | color: white; |
| | | background: transparent; |
| | | } |
| | | /deep/.el-pager li { |
| | | color: white; |
| | | } |
| | | /deep/.btn-prev { |
| | | background: transparent; |
| | | } |
| | | /deep/.btn-next { |
| | | background: transparent; |
| | | } |
| | | } |
| | | /deep/ .el-input__inner { |
| | | background-color: transparent !important; |
| | | border: 1px solid; |
| | | color: white; |
| | | } |
| | | /deep/ .el-dialog { |
| | | background: #303030; |
| | | } |
| | | /deep/.el-range-editor.is-active, |
| | | .el-range-editor.is-active:hover, |
| | | .el-select .el-input.is-focus .el-input__inner { |
| | | border: 1px solid; |
| | | } |
| | | /deep/.el-dialog__title { |
| | | color: white; |
| | | } |
| | | /deep/.el-form-item__label { |
| | | color: white; |
| | | } |
| | | .boxlabel { |
| | | color: white; |
| | | } |
| | | } |
| | | </style> |