水印下发列表
fanluyan
2 years ago
parent
0af10c5364
commit
dcef86131c
@ -0,0 +1,316 @@
|
||||
<template>
|
||||
<div class="waterMark">
|
||||
<div class="deviceBox">
|
||||
<div class="deviceBtnGroup">
|
||||
<h4>水印下发</h4>
|
||||
<!-- <el-button
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click.native.stop="handleAdddevice()"
|
||||
>导入</el-button
|
||||
> -->
|
||||
</div>
|
||||
|
||||
<div class="deviceTable">
|
||||
<div class="batchBox" v-if="this.multipleSelection.length !== 0">
|
||||
<el-button type="text" icon="el-icon-s-promotion">批量下发</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="tableData"
|
||||
tooltip-effect="dark"
|
||||
stripe
|
||||
style="width: 100%"
|
||||
height="calc(100% - 40px)"
|
||||
v-loading="loading"
|
||||
:row-class-name="tableRowClassName"
|
||||
highlight-current-row
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<template slot="empty">
|
||||
<el-empty :image-size="160" description="暂无数据"></el-empty>
|
||||
</template>
|
||||
<el-table-column type="selection" width="55"> </el-table-column>
|
||||
<el-table-column label="设备CMD_ID" width="125">
|
||||
<template slot-scope="scope">{{ scope.row.cmdid }}</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="channel" label="通道"> </el-table-column> -->
|
||||
<el-table-column
|
||||
prop="bottomLeft"
|
||||
label="通道1左下角水印"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
v-if="scope.row.index == tableCli"
|
||||
v-model="scope.row.bottomLeft"
|
||||
/>
|
||||
<span v-else>{{ scope.row.bottomLeft }}</span></template
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="bottomRIght"
|
||||
label="通道1右下角水印"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
v-if="scope.row.index == tableCli"
|
||||
v-model="scope.row.bottomRIght"
|
||||
/>
|
||||
<span v-else>{{ scope.row.bottomRIght }}</span></template
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="bottomLeft"
|
||||
label="通道2左下角水印"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
v-if="scope.row.index == tableCli"
|
||||
v-model="scope.row.bottomLeft"
|
||||
/>
|
||||
<span v-else>{{ scope.row.bottomLeft }}</span></template
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="bottomRIght"
|
||||
label="通道2右下角水印"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
v-if="scope.row.index == tableCli"
|
||||
v-model="scope.row.bottomRIght"
|
||||
/>
|
||||
<span v-else>{{ scope.row.bottomRIght }}</span></template
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="bottomLeft"
|
||||
label="通道3左下角水印"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
v-if="scope.row.index == tableCli"
|
||||
v-model="scope.row.bottomLeft"
|
||||
/>
|
||||
<span v-else>{{ scope.row.bottomLeft }}</span></template
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="bottomRIght"
|
||||
label="通道3右下角水印"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
v-if="scope.row.index == tableCli"
|
||||
v-model="scope.row.bottomRIght"
|
||||
/>
|
||||
<span v-else>{{ scope.row.bottomRIght }}</span></template
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="bottomLeft"
|
||||
label="通道4左下角水印"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
v-if="scope.row.index == tableCli"
|
||||
v-model="scope.row.bottomLeft"
|
||||
/>
|
||||
<span v-else>{{ scope.row.bottomLeft }}</span></template
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="bottomRIght"
|
||||
label="通道4右下角水印"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
v-if="scope.row.index == tableCli"
|
||||
v-model="scope.row.bottomRIght"
|
||||
/>
|
||||
<span v-else>{{ scope.row.bottomRIght }}</span></template
|
||||
>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column fixed="right" label="操作" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
v-if="scope.row.index == tableCli"
|
||||
:disabled="multipleSelection.length !== 0"
|
||||
@click="handleSave(scope.row, scope)"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button
|
||||
v-else
|
||||
type="text"
|
||||
:disabled="multipleSelection.length !== 0"
|
||||
@click="handleEdit(scope.row, scope)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button type="text" :disabled="multipleSelection.length !== 0"
|
||||
>下发</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pageNation">
|
||||
<el-pagination
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
layout="sizes, prev, pager, next, jumper,total"
|
||||
:total="total"
|
||||
background
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import { getTowerListApi, delTowerApi } from "@/utils/api/index";
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
tableData: [
|
||||
{
|
||||
cmdid: "10020",
|
||||
bottomLeft: "省检-四班-500kV芜城5382线038#小号侧 ",
|
||||
bottomRIght: "西格玛-2020-09-10",
|
||||
},
|
||||
|
||||
{
|
||||
cmdid: "10021",
|
||||
channel: "通道1",
|
||||
bottomLeft: "上海市普陀区金沙江路 1518 弄",
|
||||
bottomRIght: "上海市普陀区金沙江路 1518 弄",
|
||||
},
|
||||
{
|
||||
cmdid: "10021",
|
||||
channel: "通道2",
|
||||
bottomLeft: "上海市普陀区金沙江路 1518 弄",
|
||||
bottomRIght: "上海市普陀区金沙江路 1518 弄",
|
||||
},
|
||||
{
|
||||
cmdid: "10021",
|
||||
channel: "通道3",
|
||||
bottomLeft: "上海市普陀区金沙江路 1518 弄",
|
||||
bottomRIght: "上海市普陀区金沙江路 1518 弄",
|
||||
},
|
||||
{
|
||||
cmdid: "10021",
|
||||
channel: "通道4",
|
||||
bottomLeft: "上海市普陀区金沙江路 1518 弄",
|
||||
bottomRIght: "上海市普陀区金沙江路 1518 弄",
|
||||
},
|
||||
],
|
||||
multipleSelection: [],
|
||||
isEdit: false,
|
||||
tableCli: -1,
|
||||
page: 1, // 当前页数
|
||||
pageSize: 20, // 每页数量
|
||||
total: 0, //总条数
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
watch: {},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
//选中
|
||||
handleSelectionChange(val) {
|
||||
console.log(val);
|
||||
this.multipleSelection = val;
|
||||
this.tableCli = -1;
|
||||
},
|
||||
tableRowClassName({ row, rowIndex }) {
|
||||
// 把每一行的索引放进row
|
||||
row.index = rowIndex;
|
||||
},
|
||||
handleEdit(val, scope) {
|
||||
console.log(val, scope);
|
||||
this.tableCli = scope.$index;
|
||||
console.log(this.tableCli);
|
||||
},
|
||||
handleSave(val, scope) {
|
||||
this.tableCli = -1;
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.page = val;
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.waterMark {
|
||||
width: calc(100% - 24px);
|
||||
height: calc(100% - 24px);
|
||||
padding: 12px 12px;
|
||||
background: @color-white;
|
||||
.deviceBox {
|
||||
border: 1px solid #dddddd;
|
||||
height: calc(100% - 24px);
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
.searchBox {
|
||||
margin-top: 8px;
|
||||
.ml10 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.el-form {
|
||||
.dybox {
|
||||
.el-form-item__content {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
.xlbox {
|
||||
.el-form-item__content {
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.deviceBtnGroup {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.deviceTable {
|
||||
margin-top: 8px;
|
||||
height: calc(100% - 40px);
|
||||
position: releative;
|
||||
.batchBox {
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
line-height: 40px;
|
||||
background: #fafafa;
|
||||
width: calc(100% - 116px);
|
||||
left: 78px;
|
||||
z-index: 4;
|
||||
top: 55px;
|
||||
}
|
||||
.el-input--small {
|
||||
font-size: 12px;
|
||||
.el-input__inner {
|
||||
padding: 0px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue