备份恢复项目中的难点需求整理
1.多种备份方式显示和操作 逻辑
<template>
<div class="container">
<el-card class="boxCard">
<div class="cardHeader">
<div class="headerImg"></div>
<div class="headerFont">备份模型管理</div>
</div>
<el-divider></el-divider>
<div class="tabStyle">
<el-form v-show="showSearch" :inline="true" ref="queryForm" :model="queryParams" class="demo-form-inline"
id="demo-form" label-width="90px">
<el-form-item label="表英文名称" prop="tableNameEng">
<el-input clearable autocomplete="off" v-model="queryParams.tableNameEng" placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item label="表中文名称" prop="tableNameChn">
<el-input clearable autocomplete="off" v-model="queryParams.tableNameChn" placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item>
<el-button class="panbtn greenbtn" icon="el-icon-search" @click="handleQuery">查询</el-button>
</el-form-item>
<el-form-item>
<el-button class="panbtn bluebtn" icon="el-icon-refresh-left" @click="resetQuery">重置</el-button>
</el-form-item>
<div class="btnBox">
<el-button class="panbtn greenbtn" @click="handleAdd" icon="el-icon-circle-plus">新增表</el-button>
<el-button class="panbtn redbtn" @click="handleDelete" :disabled="multiple"
icon="el-icon-remove">删除</el-button>
</div>
</el-form>
<!-- 折叠 -->
<el-row v-show="false" :gutter="10" class="mb8">
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<!-- 表格 -->
<div class="table-wrapper">
<el-table height="55vh" @cell-dblclick="handleUpdate" :data="leftTableData" :style="{width: rightTableData.length > 0 ? '49%' : '100%', display: 'inline-block', verticalAlign: 'top'}"
@selection-change="selection => handleSelectionChange(selection, 'left')" v-loading="loading">
<el-table-column type="selection" width="55" align="center" />
<el-table-column width="100px" prop="tableId" label="表ID" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="tableNameEng" label="表英文名" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="tableNameChn" label="表中文名" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column label="操作" width="150px" align="center" show-overflow-tooltip>
<template slot-scope="scope">
<el-button class="tableBtn-green" @click="handleUpdate(scope.row)">查看域信息配置</el-button>
</template>
</el-table-column>
</el-table>
<el-table height="55vh" v-if="rightTableData.length>0" @cell-dblclick="handleUpdate" :data="rightTableData" style="width: 49%; display: inline-block;margin-left: 1%;vertical-align: top;"
@selection-change="selection => handleSelectionChange(selection, 'right')" v-loading="loading">
<el-table-column type="selection" width="55" align="center" />
<el-table-column width="100px" prop="tableId" label="表ID" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="tableNameEng" label="表英文名" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="tableNameChn" label="表中文名" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column label="操作" width="150px" align="center" show-overflow-tooltip>
<template slot-scope="scope">
<el-button class="tableBtn-green" @click="handleUpdate(scope.row)">查看域信息配置</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<pagination :page-sizes="[20, 40, 100, 200]" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" @pagination="getList" />
</div>
</el-card>
<!-- 弹框表 -->
<el-dialog title="添加表" :visible.sync="open2" width="98%" :close-on-click-modal="false">
<el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
<el-form-item label="表英文名称" prop="tableNameEng">
<el-input clearable autocomplete="off" v-model="formInline.tableNameEng" placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item label="表中文名称" prop="tableNameChn">
<el-input clearable autocomplete="off" v-model="formInline.tableNameChn" placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item label="应用类型" prop="appType">
<el-select clearable autocomplete="off" v-model="appType1" multiple collapse-tags @change="changeappType">
<el-option v-for="item in comOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button class="panbtn greenbtn" icon="el-icon-search" @click="handleQuery2">查询</el-button>
</el-form-item>
<el-form-item>
<el-button class="panbtn bluebtn" icon="el-icon-refresh-left" @click="resetQuery2">重置</el-button>
</el-form-item>
<div class="btnBox">
<el-button :disabled="multipleAddB" class="panbtn greenbtn" @click="handleAddB"
icon="el-icon-circle-plus">添加</el-button>
</div>
</el-form>
<el-table height="55vh" :data="tableDataB" style="width: 100%" @selection-change="handleSelectionChangeB" v-loading="loadingB">
<el-table-column type="selection" width="55" align="center" />
<el-table-column width="100" prop="tableId" label="表ID" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="tableNameEng" label="表英文名" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="tableNameChn" label="表中文名" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="appTypeName" label="应用类型" align="center" show-overflow-tooltip>
</el-table-column>
</el-table>
<pagination v-show="formtotal2 > 0" :total="formtotal2" :page.sync="formInline.pageNum"
:limit.sync="formInline.pageSize" @pagination="getBList" />
</el-dialog>
<!-- 弹框域 -->
<el-dialog title="域信息配置详情" :visible.sync="open" width="98%" :close-on-click-modal="false" @close="handleClose">
<div class="titlee">{{ form.tableNameChn }}</div>
<el-button class="panbtn greenbtn" @click="handleAddBFY" icon="el-icon-circle-plus">添加备份域</el-button>
<el-button class="panbtn redbtn" @click="handleDeleteBFY" :disabled="multipleBFY"
icon="el-icon-remove">删除</el-button>
<el-table height="55vh" :data="tableDataY" style="width: 100%;margin-top: 10px;" @selection-change="handleSelectionChangeBFY" v-loading="loadingY">
<el-table-column type="selection" width="55" align="center" />
<el-table-column prop="columnId" label="域ID" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="columnNameEng" label="域英文名" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="columnNameChn" label="域中文名" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="referenceFlag" label="关联方式" align="center" show-overflow-tooltip>
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.referenceFlag == 1">采样关联</el-tag>
<el-tag type="success" v-if="scope.row.referenceFlag == 0">普通关联</el-tag>
<el-tag type="danger" v-if="scope.row.referenceFlag == 2">外键关联</el-tag>
</template>
</el-table-column>
<el-table-column prop="menuName" label="菜单名称" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="isKey" label="是否主键" align="center" show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="scope.row.isKey == 1" style="color: red">是</span>
<span v-if="scope.row.isKey == 0" style="color: #00706b">否</span>
</template>
</el-table-column>
<el-table-column prop="allowNull" label="是否允许空值" align="center" show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="scope.row.allowNull == 1" style="color: red">是</span>
<span v-if="scope.row.allowNull == 0" style="color: #00706b">否</span>
</template>
</el-table-column>
<el-table-column prop="backupType" label="备份方式" align="center" width="300px">
<template slot-scope="scope">
<el-radio-group v-model="scope.row.backupType" @change.native="changeBackupType(scope.row)">
<el-radio :label="0" v-if="scope.row.menuName == null && scope.row.referenceFlag == 0
">普通备份</el-radio>
<el-radio :label="1" v-if="scope.row.menuName != null || scope.row.referenceFlag != 0
">ID备份</el-radio>
<el-radio :label="2" v-if="scope.row.menuName != null || scope.row.referenceFlag != 0
">ID转备份</el-radio>
<el-radio :label="3" v-if="scope.row.menuName != null || scope.row.referenceFlag != 0
">全备份</el-radio>
</el-radio-group>
</template></el-table-column></el-table>
<pagination v-show="formtotal > 0" :total="formtotal" :page.sync="form.pageNum" :limit.sync="form.pageSize"
@pagination="getYList" />
<!-- 内层域列表弹框------------------------ -->
<el-dialog width="80%" title="添加域" :visible.sync="innerVisible" append-to-body :close-on-click-modal="false">
<el-button :disabled="multipleInner" class="panbtn greenbtn" @click="handleAddBFYInner"
icon="el-icon-circle-plus">添加</el-button>
<!-- @toggleRowSelection="toRowSelection" -->
<el-table height="55vh" :data="tableDataInner" style="width: 100%;margin-top: 10px;" @selection-change="handleSelectionChangeInner"
v-loading="loadingInner" @row-click="row_click" ref="innerDom">
<el-table-column type="selection" width="55" align="center" />
<el-table-column width="100px" prop="tableId" label="域ID" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="columnNameEng" label="域英文名" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="columnNameChn" label="域中文名" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="referenceFlag" label="关联方式" align="center" show-overflow-tooltip>
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.referenceFlag == 1">采样关联</el-tag>
<el-tag type="success" v-if="scope.row.referenceFlag == 0">普通关联</el-tag>
<el-tag type="danger" v-if="scope.row.referenceFlag == 2">外联关联</el-tag>
</template>
</el-table-column>
<el-table-column prop="isKey" label="是否主键" align="center" show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="scope.row.isKey == 1" style="color: red">是</span>
<span v-if="scope.row.isKey == 0" style="color: #00706b">否</span>
</template>
</el-table-column>
<el-table-column prop="allowNull" label="是否允许空值" align="center" show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="scope.row.allowNull == 1" style="color: red">是</span>
<span v-if="scope.row.allowNull == 0" style="color: #00706b">否</span>
</template>
</el-table-column>
<el-table-column prop="menuName" label="菜单名称" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="backupType" label="备份方式" align="center" width="300px">
<template slot-scope="scope">
<el-radio-group v-model="scope.row.backupType">
<el-radio :label="0" v-if="scope.row.menuName == null && scope.row.referenceFlag == 0
">普通备份</el-radio>
<el-radio :label="1" v-if="scope.row.menuName != null || scope.row.referenceFlag != 0
">ID备份</el-radio>
<el-radio :label="2" v-if="scope.row.menuName != null || scope.row.referenceFlag != 0
">ID转备份</el-radio>
<el-radio :label="3" v-if="scope.row.menuName != null || scope.row.referenceFlag != 0
">全备份</el-radio>
</el-radio-group>
</template></el-table-column></el-table>
<pagination v-show="formtotalInner > 0" :total="formtotalInner" :page.sync="formInner.pageNum"
:limit.sync="formInner.pageSize" @pagination="getBFYList" />
</el-dialog>
</el-dialog>
</div>
</template>
<script>
import apptypeOptions from '../comOption/appTypeOption.js'; //引入公共option
import {
getByConditionsList,
batchDelete,
getBycolumnInfoList,
getAddByConditions,
batchInsert,
getAddByColumnInfo,
batchInsertColumnInfo,
batchDeleteColumnInfo,
updateSelective
} from '@/api/equipDhbfApi/bfmxgl.js';
// import { getToken } from '@/utils/auth';
export default {
components: {},
name: 'bfxx1',
data() {
return {
appType1: undefined,
appType: undefined,
comOptions: apptypeOptions,
// 显示搜索条件
showSearch: true,
// 遮罩层
loading: false,
loadingB: false,
loadingY: false,
loadingInner: false,
// 选中删除的数组
leftSelection: [],
rightSelection: [],
tableBItem: [],
tableBInner: [],
tableBFY: [],
multipleAddB: true,
multipleInner: true,
multipleBFY: true,
// 总条数
total: 1,
formtotal: 1,
formtotal2: 1,
formtotalInner: 1,
// 是否显示弹出层
open: false,
open2: false,
innerVisible: false,
queryParams: {
pageNum: 1,
pageSize: 20,
tableNameChn: undefined,
tableNameEng: undefined,
appType: undefined
},
// 表单参数
form: {
pageNum: 1,
pageSize: 10,
tableId: undefined,
tableNameChn: undefined
},
formInner: {
pageNum: 1,
pageSize: 10,
tableId: undefined
},
formInline: {
tableNameEng: undefined,
tableNameChn: undefined,
appType: undefined,
pageNum: 1,
pageSize: 10
},
// 表格
tableData: [],
tableDataY: [],
tableDataB: [],
tableDataInner: []
};
},
computed: {
leftTableData() {
const data = this.tableData;
const middle = Math.ceil(data.length / 2);
return data.slice(0, middle);
},
rightTableData() {
const data = this.tableData;
const middle = Math.ceil(data.length / 2);
return data.slice(middle);
},
selectionSummation(){
return this.leftSelection.concat(this.rightSelection);
},
selection(){
return this.selectionSummation.map((item) => item);
},
single(){// 非单个禁用
return this.selectionSummation.length != 1;
},
multiple(){ // 非多个禁用
return !this.selection.length;
}
},
watch: {},
mounted() { },
beforeDestroy() { },
created() {
this.getList();
},
methods: {
handleClose() {
this.form.pageNum = 1; // 重置页码为初始值
this.formInner.pageNum = 1;
},
// 批量删除备份域
handleDeleteBFY() {
batchDeleteColumnInfo(this.tableBFY).then((res) => {
// this.$message.success('已删除');
this.getYList();
});
},
// 内嵌域添加
handleAddBFYInner() {
batchInsertColumnInfo(this.tableBInner).then((res) => {
this.innerVisible = false;
this.getYList();
});
},
// 添加备份域
handleAddBFY() {
this.loadingInner = true;
this.getBFYList();
},
// 获取可添加的备份域列表
getBFYList() {
getAddByColumnInfo(this.formInner).then((res) => {
// this.tableDataInner = res.rows;
let arr = res.rows;
this.formtotalInner = res.total;
this.innerVisible = true;
this.loadingInner = false;
arr.forEach((item) => {
if (item.menuName == null && item.referenceFlag == 0) {
item.backupType = 0;
} else if (item.menuName != null || item.referenceFlag != 0) {
item.backupType = 3;
}
});
this.tableDataInner = arr;
});
},
// 添加表
handleAddB() {
batchInsert(this.tableBItem).then((res) => {
this.$message({
message: '添加表成功',
type: 'success'
});
this.open2 = false;
this.getList();
});
},
// 应用类型多选转字符串
changeappType(val) {
let str = val.toString();
this.queryParams.appType = str;
this.formInline.appType = str;
},
// 域单选改变
changeBackupType(row) {
updateSelective(row).then((res) => {
});
},
// 列表
getList() {
this.loading = true;
getByConditionsList(this.queryParams).then((response) => {
this.tableData = response.rows;
this.total = response.total;
this.loading = false;
});
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.appType = undefined;
this.resetForm('queryForm');
this.handleQuery();
},
handleQuery2() {
this.formInline.pageNum = 1;
this.getBList();
},
resetQuery2() {
this.appType1 = undefined;
this.resetForm('formInline');
this.handleQuery2();
},
row_click(row, column, event) {
this.$refs.innerDom.toggleRowSelection(row);
},
// 添加域多选数据
handleSelectionChangeInner(select, row) {
this.multipleInner = !select.length;
this.tableBInner = select.map((item) => item);
// this.$refs.innerDom.toggleRowSelection(select);
},
// 查看域列表多选数据
handleSelectionChangeBFY(sele) {
this.multipleBFY = !sele.length;
this.tableBFY = sele.map((item) => item);
},
// toRowSelection(row, selected){
// },
// 添加表多选框
handleSelectionChangeB(item) {
this.multipleAddB = !item.length;
this.tableBItem = item.map((item) => item);
},
// 列表多选框选中数据
handleSelectionChange(selection, tableType) {
if(tableType === 'left'){
this.leftSelection = selection;
} else if(tableType === 'right'){
this.rightSelection = selection;
}
},
/** 新增按钮操作 */
handleAdd() {
this.getBList();
this.open2 = true;
},
/** 修改按钮操作 */
handleUpdate(row) {
this.open = true;
this.form.tableId = row.tableId;
this.formInner.tableId = row.tableId;
this.form.tableNameChn = row.tableNameChn;
this.getYList();
},
// 添加表
getBList() {
this.loadingB = true;
getAddByConditions(this.formInline).then((res) => {
this.tableDataB = res.rows;
this.formtotal2 = res.total;
this.loadingB = false;
});
},
// 域列表
getYList() {
this.loadingY = true;
getBycolumnInfoList(this.form).then((res) => {
this.tableDataY = res.rows;
this.formtotal = res.total;
this.loadingY = false;
});
},
/** 删除按钮操作 */
handleDelete() {
const selection = this.selection;
this.$confirm('是否确认删除选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(function () {
return batchDelete(selection);
})
.then(() => {
this.$message.success('已删除');
this.getList();
})
.catch(function () { });
}
}
};
</script>
<style lang="scss" scoped>
@import '@/views/equipDhbf/style/btn.scss';
@import '@/views/equipDhbf/style/index.scss';
@import '@/views/equipDhbf/style/checkbox.scss';
.titlee {
line-height: 24px;
font-size: 16px;
font-weight: 600;
text-align: center;
margin-top: -20px;
}
.table-wrapper{
display: flex;
flex-direction: row;
justify-content: space-between;
}
</style>
``
2.恢复时选择行内数据时 可多选 也可单选一条 选中一个时多选框也需是选中状态，总之就是多选框的联动效果
因为此模型恢复是基于同一个表内的多条信息恢复，所以需要把数据格式转成
{backupId: 111, reqContent: {表名: Array(2)}} // 注意Array(2)为提交的两条选中数据
因为表内容和表字段是不固定的 所以要用拆分表头和表内容的方式
<template>
<div class="container">
<el-card class="boxCard">
<div class="cardHeader">
<div class="headerImg"></div>
<div class="headerFont">差异模型恢复</div>
</div>
<el-divider></el-divider>
<div class="tabStyle">
<el-form
v-show="showSearch"
:inline="true"
ref="queryForm"
:model="queryParams"
class="demo-form-inline"
id="demo-form"
label-width="90px"
>
<el-form-item label="表英文名称" prop="tableNameEng">
<el-input
v-model="queryParams.tableNameEng"
placeholder="请输入内容"
></el-input>
</el-form-item>
<el-form-item label="表中文名称" prop="tableNameChn">
<el-input
v-model="queryParams.tableNameChn"
placeholder="请输入内容"
></el-input>
</el-form-item>
<el-form-item label="应用类型" prop="appType">
<el-select v-model="appType" clearable multiple collapse-tags>
<el-option
v-for="item in comOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button
class="panbtn greenbtn"
icon="el-icon-search"
@click="handleQuery"
>查询</el-button
>
</el-form-item>
<el-form-item>
<el-button
class="panbtn bluebtn"
icon="el-icon-refresh-left"
@click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<!-- 表格 -->
<el-table
@cell-dblclick="handleUpdate"
:data="tableData"
style="width: 100%"
v-loading="loading"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column
prop="backupTime"
label="备份时间"
align="center"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
width="150px"
prop="tableId"
label="表ID"
align="center"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="tableNameEng"
label="表英文名"
align="center"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="tableNameChn"
label="表中文名"
align="center"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="appTypeName"
label="应用类型"
align="center"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
label="操作"
width="150px"
align="center"
show-overflow-tooltip
>
<template slot-scope="scope">
<el-button class="tableBtn-green" @click="handleUpdate(scope.row)"
>差异恢复</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
<!-- 弹框 -->
<el-dialog title="差异详情" :visible.sync="open" width="99%">
<el-button
type="primary"
size="small"
style="margin-bottom: 10px"
@click="onSubmit"
>提交修改</el-button
>
<el-table
:data="listData"
style="width: 100%"
border
ref="multipleTable"
v-loading="dialogLoading"
@select-all="selectAllChange"
@select="handleSelectionChangeInner"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column
v-for="(item, index) in listLabel"
:key="index"
:label="item.label"
:prop="item.prop"
align="center"
>
<template slot-scope="scope">
<div v-if="scope.row[item.prop]">
<div v-if="scope.row[item.prop].includes('更新为')">
<el-checkbox
:key="scope.row.check_q3hfqnre30[item.prop]"
:checked="scope.row.check_q3hfqnre30[item.prop]"
:label="scope.row[item.prop]"
:true-label="scope.row[item.prop]"
:false-label="0"
@change="changeCheckbox(scope.row, item.prop)"
/>
</div>
<div v-else>{{ scope.row[item.prop] }}</div>
</div>
</template>
</el-table-column>
</el-table>
</el-dialog>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
tijiaoData: {},
selectionInner: [],
// 表头数据
listLabel: [
{ label: '车牌号', prop: 'carEntrustId' },
{ label: '名称', prop: 'name' },
{ label: '值', prop: 'carRewardId' },
{ label: '价格', prop: 'carFundProvider' },
{ label: '利润', prop: 'carFrameNo' },
{ label: '大类', prop: 'carNo' },
{ label: '小类', prop: 'acreage' },
{ label: '有价格', prop: 'assetsType' },
{ label: '极好价格', prop: 'incomePrice' },
{ label: '优质价格', prop: 'rewardStatus' },
{ label: '良好价格', prop: 'addTime' },
{ label: '无价格', prop: 'addManagerName' }
],
// 表格数据
listData: [
{
carEntrustId: '1',
name: '更新为12',
carRewardId: '34',
carFundProvider: '34',
carFrameNo: '354',
carNo: '更新为15',
acreage: '93450',
assetsType: '44344',
incomePrice: '34',
rewardStatus: '23',
addTime: '23',
addManagerName: '23'
},
{
carEntrustId: '2',
name: '343',
carRewardId: '更新为23',
carFundProvider: '34',
carFrameNo: '78',
carNo: '78',
acreage: '756',
assetsType: '354',
incomePrice: '23',
rewardStatus: '23',
addTime: '23',
addManagerName: '23'
}
],
comOptions: [
{
value: '选项1',
label: '黄金糕'
},
{
value: '选项2',
label: '双皮奶'
},
{
value: '选项3',
label: '蚵仔煎'
},
{
value: '选项4',
label: '龙须面'
},
{
value: '选项5',
label: '北京烤鸭'
}
],
appType: undefined,
// 显示搜索条件
showSearch: true,
// 遮罩层
loading: false,
dialogLoading: false,
// 选中删除的数组
selection: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 总条数
total: 1,
totalInner: 1,
// 是否显示弹出层
open: false,
queryParams: {
pageNum: 1,
pageSize: 10,
backupId: undefined,
tableNameChn: undefined,
tableNameEng: undefined,
appType: undefined
},
queryParamsInner: {
pageNum: 1,
pageSize: 10,
backupId: undefined,
tableName: '111'
},
// 表格
tableData: [
{
backupTime: '2016-05-02',
tableNameEng: '王小虎1'
},
{
backupTime: '2016-05-04',
tableNameEng: '王小虎2'
},
{
backupTime: '2016-05-01',
tableNameEng: '王小虎3'
},
{
backupTime: '2016-05-03',
tableNameEng: '王小虎4'
}
]
};
},
watch: {},
created() {},
methods: {
// 提交修改
onSubmit() {
// 判断是否为@selection-change多选框选中
if (this.selectionInner.length != 0) {
this.tijiao(this.tijiaoData);
} else {
// 筛选有选中项的数据
const arr = this.listData.filter((item) => {
if (JSON.stringify(item.active) !== '{}') {
return item;
}
});
// 重组数据结构
let newArr = [];
let num = 0;
arr.forEach((item, index) => {
newArr.push({});
for (const key in item) {
if (typeof item[key] === 'string' && item[key].includes('更新为')) {
if (
item.active[key] &&
JSON.stringify(item.active[key]) !== '{}'
) {
newArr[index][key] = item[key];
num += 1;
}
} else {
newArr[index][key] = item[key];
}
}
});
// 判断是否有选中项
if (num === 0) {
this.$message({
showClose: true,
message: '请选择数据',
type: 'warning'
});
return;
}
// 删除无用key
let result = JSON.parse(JSON.stringify(newArr));
result.forEach((j) => {
delete j.active;
});
// 组装传递给后台的数据
const data = {
backupId: this.$route.query.id * 1,
reqContent: {
[this.queryParamsInner.tableName]: result
}
};
this.tijiao(data);
}
},
// 弹框内提交
tijiao(data) {
console.log(data, 'dataaaaAA>?????');
},
// *******************************************************************
// 表格内多选框改变
changeCheckbox(row, type) {
console.log(row, type, 'row, type');
if (
JSON.stringify(row.active) !== '{}' &&
row.active[type] &&
JSON.stringify(row.active[type]) !== '{}'
) {
row.active[type] = {};
this.$set(row.check_q3hfqnre30, type, false);
} else {
row.active[type] = {
name: row[type]
};
this.$set(row.check_q3hfqnre30, type, true);
}
// 记录是否选中数据
const arr = [];
for (const key in row.check_q3hfqnre30) {
arr.push(row.check_q3hfqnre30[key]);
}
const flag = arr.some((item) => item === true);
row.isSelect_q3hfqnre30 = flag ? '1' : '0';
// 设置选中行
this.$refs.multipleTable.toggleRowSelection(row, flag);
},
// 全选提交
selectAllChange(val) {
console.log(val, '全选');
// 取消全选时，设置取消选中项
if (val.length === 0) {
this.listData?.forEach((item) => {
item.check_q3hfqnre30 = {};
item.active = {};
item.isSelect_q3hfqnre30 = '0';
});
} else {
// 反之设置选中项
val?.forEach((item) => {
item.isSelect_q3hfqnre30 = '1';
for (const key in item) {
if (
typeof item[key] === 'string' &&
item[key]?.includes('更新为')
) {
this.changeCheckbox(item, key);
item.check_q3hfqnre30[key] = true;
}
}
});
}
},
// 弹框内多选
handleSelectionChangeInner(selectionInner, row) {
console.log(selectionInner, 'selectionInner415');
console.log(row, ' row414');
row.isSelect_q3hfqnre30 = row.isSelect_q3hfqnre30 === '1' ? '0' : '1';
this.selectionInner = selectionInner; //判断用
// 判断是否为第一次选中行，是的话选中当前行所有包含复选框的数据
if (JSON.stringify(row.check_q3hfqnre30) === '{}') {
for (const key in row) {
if (typeof row[key] === 'string' && row[key]?.includes('更新为')) {
this.$set(row.check_q3hfqnre30, key, true);
this.changeCheckbox(row, key);
}
}
} else {
for (const key in row) {
if (typeof row[key] === 'string' && row[key]?.includes('更新为')) {
if (row.check_q3hfqnre30[key]) {
this.$set(row.check_q3hfqnre30, key, false);
} else {
this.$set(row.check_q3hfqnre30, key, true);
}
this.changeCheckbox(row, key);
}
}
}
// 当没有选中行时取消所有选中项
if (selectionInner.length === 0) {
this.listData?.forEach((item) => {
item.isSelect_q3hfqnre30 = false;
for (const key in item.check_q3hfqnre30) {
this.$set(row.check_q3hfqnre30, key, false);
}
});
}
},
// **************************************************************************
handleSelectionChange(val) {
console.log(val, '选中行');
},
/** 差异恢复 */
handleUpdate(row) {
this.queryParamsInner.tableName = row.tableNameEng;
this.getInnerData();
this.open = true;
},
//获取差异详情
getInnerData() {
// getCurdbCompareContentRecovery(this.queryParamsInner).then((res) => {
// console.log(res, '差异恢复');
// this.listLabel = res.listLabel;
// res.rows.forEach((item) => (item['active'] = {}));
// this.listData = res.rows;
// this.open = true;
// });
// 测试使用的date数据 实际按接口获取整理*********
this.listLabel = this.listLabel;
let listDataN = this.listData;
listDataN?.forEach((item) => {
item['active'] = {}; // 默认选中行参数
item['check_q3hfqnre30'] = {}; // 默认选中行标识
});
this.listData = listDataN;
},
/** 搜索按钮操作 */
handleQuery() {},
/** 重置按钮操作 */
resetQuery() {}
}
};
</script>
<style lang="less" scoped>
</style>
浙公网安备 33010602011771号