<template>
<hsa-adaptive-container>
<hsa-adaptive-pane>
<!-- el-collapse 改为 hsa-title-pane，el-collapse-item 改为 hsa-title-pane-item -->
<hsa-title-pane :value="['queryForm']">
<hsa-title-pane-item title="查询条件" name="queryForm">
<!-- label-width="xxpx" 必须设置固定 px，不允许使用 auto（
ie 不支持） -->
<!-- el-form 中去掉在每个 input/select 等组件上添加的 size="medium"，改为在 el-form 上添加： <el-form size="medium"> -->
<el-form label-width="120px" size="medium" :model="queryData">
<!-- el-row 组件替换为 hsa-row，el-col 替换为 hsa-col -->
<!-- collapseBtn
属性可以自动渲染 展开/收起 按钮 -->
<hsa-row>
<hsa-col :sm="24" :md="
8" :lg="6">
<el-form-item label="数据仓名称">
<el-input
placeholder="数据仓名称"
v-model="queryData
.warehouseName"
></el-input>
</el-form-item>
</hsa-col>
<hsa-col :sm="24" :md="
8" :lg="6">
<el-form-item label="数据仓库类型">
<el-select
v-model="queryData
.warehouseType"
placeholder="请选择"
style="width: 100%"
>
<el-option label="标准型" value="standard"></el-option>
<el-option label="自定义型" value="custom"></el-option>
<!-- 分级管理选项 -->
</el-select>
</el-form-item>
</hsa-col>
<!-- 通过 slot="footbar" 在查询区末尾添加查询
操作按钮，按钮规定使用 medium 大小 -->
<template slot="footbar">
<el-button size="medium" @click="Reset">重置</el-button>
<el-button type="primary" size="medium" @click="Search"
>查询</el-button
>
</template>
</hsa-row>
</el-form>
</hsa-title-pane-item>
</hsa-title-pane>
</hsa-adaptive-pane>
<hsa-adaptive-pane autoHeight>
<hsa-title-pane :value="['queryResult']">
<hsa-title-pane-item title="数据仓详情" name="queryResult">
<!-- 通过 slot="toolbar" 在查询结果区顶部添加
操作按钮 -->
<template slot="toolbar">
<el-button
type="success"
size="medium"
@click="queryHarnsSafDtalModHory"
>字段修改历史记录</el-button
>
</template>
<template slot="toolbar">
<el-button
type="success"
size="medium"
@click="diatileadd"
>新增</el-button
>
</template>
<!-- tableMaxHeight 为架构通过 layoutMixin 提供的表格高度，如果界面有其他元素导致计算结果不准确，可在此高度基础上进行
操作来二次计算 -->
<ncp-table
:data="tableDataList"
:columnDefs="columnDefs"
:paginationConfig="paginationConfig"
:tableHeight="tableMaxHeight"
@paginationConfigChange="PaginationConfigChange"
showIndex
></ncp-table>
</hsa-title-pane-item>
</hsa-title-pane>
<el-dialog
:visible
.sync="dialogVisible"
:close-on-click-modal="false"
:title="diatile"
>
<addAndEditDatawarehouse
@submit="submit"
ref="addSource"
></addAndEditDatawarehouse>
</el-dialog>
<!-- 历史记录 -->
<el-dialog
:close-on-click-modal="false"
:visible
.sync="dialogVisible4"
title="字段修改历史记录"
>
<hsa-adaptive-pane>
<hsa-title-pane :value="['queryForm']">
<hsa-title-pane-item name="queryForm">
<el-form label-width="70px" size="medium" :model="queryData">
<hsa-row>
<hsa-col :sm="24" :md="11" :lg="6">
<el-form-item label="修改类型">
<el-select
v-model="pagConfig
.modifyType"
placeholder="请选择"
style="width: 100%"
>
<el-option label="新增" value="1"></el-option>
<el-option label="修改" value="2"></el-option>
<el-option label="删除" value="3"></el-option>
</el-select>
</el-form-item>
</hsa-col>
<hsa-col :sm="24" :md="
8" :lg="6">
<el-form-item label="数据内容">
<el-input
placeholder="请输入数据内容"
v-model="pagConfig
.dataRecordContent"
></el-input>
</el-form-item>
</hsa-col>
<hsa-col :sm="12" :md="
8" :lg="4">
<el-form-item label="周期">
<el-date-picker
v-model="value1"
type="daterange"
align="right"
value-format="yyyy-MM-dd"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
</hsa-col>
</hsa-row>
</el-form>
<el-form label-width="70px" size="medium" :model="queryData">
<hsa-row>
<template slot="footbar">
<el-button size="medium" @click="Reset2">重置</el-button>
<el-button
type="primary"
size="medium"
@click="queryHarnsSafDtalModHory"
>查询</el-button
>
</template>
</hsa-row>
</el-form>
</hsa-title-pane-item>
</hsa-title-pane>
</hsa-adaptive-pane>
<el-form :model="form">
<ncp-table
v-loading="tableLoading"
@paginationConfigChange="pagConChange"
showIndex
ref="accountTable"
:columnDefs="columnConfig"
:enablePagination="true"
:paginationConfig="pagConfig"
:useExternalPagination="true"
:data="tableConfig"
>
</ncp-table>
</el-form>
</el-dialog>
<!-- 历史记录详情 -->
<el-dialog
:close-on-click-modal="false"
:visible
.sync="dialogVisible5"
title="历史记录详情"
>
<el-table :data="tabledataReConten"
style="width: 100%">
<el-table-column prop="dataRecordContent" label="数据记录内容">
</el-table-column>
</el-table>
</el-dialog>
<datawarehouh
ierar ref="datawar"></datawarehouh
ierar>
<datawarehoudoman ref="datdoman"></datawarehoudoman>
</hsa-adaptive-pane>
</hsa-adaptive-container>
</template>
<script>
import layoutMixin from '@ncp-web/hsa-ui/lib/mixins/adaptive-layout-mixin'
import apiService from '
./data-warehouse
.service'
import queryClass from '@/modules/data-zone/class/metaData
.class'
import addAndEditDatawarehouse from '
./components/add-and-edit-data-warehouse
.vue'
import datawarehouh
ierar from '
./components/datawarehouh
ierar
.vue'
import datawarehoudoman from '
./components/datawarehoudoman
.vue'
const resources = apiService
.Master
export default {
mixins: [layoutMixin],
name: 'DataSourceManage',
components: { addAndEditDatawarehouse, datawarehouh
ierar, datawarehoudoman },
data() {
return {
form: {},
diatile:"",
// 表格加载状态
tableLoading: true,
// 表格数据
tableDataList: [],
dialogVisible4: false,
dialogVisible: false,
dialogVisible5: false,
//历史数据详情
tabledataReConten: [],
//历史数据
value1: '',
tableConfig: [],
pagConfig: {
pageNumber: 1,
pageSize: 10,
total: 1,
dataRecordContent: '',
modifyType: '',
startTime: '',
endTime: '',
},
columnConfig: [
{
label: '数据业务类型',
prop: 'dataType',
},
{
label: '修改类型',
prop: 'modifyType',
},
{
label: '数据记录ID',
prop: 'dataRecordId',
},
// {
// label: '主键ID',
// prop: 'id',
// },
{
label: '
操作人姓名',
prop: 'operatorName',
},
{
label: '
操作时间',
prop: 'modifyTime',
},
{
label: '数据内容',
type: 'Button',
width: '
80px',
fixed: 'right',
buttonGroup: [
{
id: 'edit',
size: 'medium',
handle: (row) => this
.daTpe(row),
type: 'text primary',
label: '详情',
},
],
},
],
paginationConfig: {
pageSize: 500,
pageNumber: 1,
total: 1,
},
addid: '',
queryData: {
warehouseName: '',
},
inputValue15: '',
}
},
beforeCreate() {
// 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
},
created() {
// 实例创建完成后被调用
const realColumnDefs = [
{
label: '数据仓库名称',
prop: 'warehouseName',
fixed: 'left',
},
{
label: '数据仓库编码',
prop: 'warehouseCode',
},
{
label: '数据仓库类型',
prop: 'warehouseType',
},
{
label: '备注',
prop: 'warehouseRemark',
showOverflowTooltip: true,
},
{
label: '
操作',
type: 'Button',
width: '360px',
fixed: 'right',
buttonGroup: [
{
id: 'del',
size: 'medium',
handle: (row) => this
.updawar(row),
type: 'text primary',
label: '层级管理',
},
{
id: 'del',
size: 'medium',
handle: (row) => this
.updoman(row),
type: 'text primary',
label: '域级管理',
},
{
id: 'del',
size: 'medium',
handle: (row) => this
.upquer(row),
type: 'text primary',
label: '主题管理',
},
{
id: 'del',
size: 'medium',
handle: (row) => this
.update(row),
type: 'text primary',
label: '编辑',
},
{
id: 'del',
size: 'medium',
handle: (row) => this
.v
iewDel(row),
type: 'text primary',
label: '删除',
},
],
},
]
this
.columnDefs = realColumnDefs
},
beforeMount() {
// 在挂载开始之前被调用：相关的 render 函数首次被调用
},
mounted() {
// el 被新创建的 vm
.$el 替换，并挂载到实例上去之后调用该钩子
this
.queryTableList()
},
beforeUpdate() {
// 数据更新
时调用，发生在虚拟 DOM 打补丁之前
},
updated() {
// 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
},
activated() {
// 被 keep-alive 缓存的组件激活
时调用
},
deactivated() {
// 被 keep-alive 缓存的组件停用
时调用
},
beforeDestroy() {
// 实例销毁之前调用。在这一步，实例仍然完全可用
},
destroyed() {
// Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
},
methods: {
daTpe(row) {
this
.dialogVisible5 = true
this
.tabledataReConten = []
this
.tabledataReConten
.push(row)
},
pagConChange() {
this
.queryHarnsSafDtalModHory()
},
Reset2() {
this
.pagConfig
.modifyType = ''
this
.pagConfig
.dataRecordContent = ''
this
.value1 = ''
},
//历史记录按钮
async queryHarnsSafDtalModHory() {
this
.pagConfig
.startTime = this
.value1[0]
this
.pagConfig
.endTime = this
.value1[1]
this
.dialogVisible4 = true
const res = await resources
.queryHarn(this
.pagConfig)
// console
.log(res
.result
.length)
this
.tableConfig = res
.result
for (let index = 0; index < this
.tableConfig
.length; index++) {
if (this
.tableConfig[index]
.dataType == 'harnessSafeguardDetail') {
this
.tableConfig[index]
.dataType = '数据标准字段'
}
if (this
.tableConfig[index]
.modifyType == 1) {
this
.tableConfig[index]
.modifyType = '新增'
} else if (this
.tableConfig[index]
.modifyType == 2) {
this
.tableConfig[index]
.modifyType = '修改'
} else if (this
.tableConfig[index]
.modifyType == 3) {
this
.tableConfig[index]
.modifyType = '删除'
}
}
this
.pagConfig
.total = res
.result
.length
},
update(row) {
this
.dialogVisible = true
this
.diatile = "编辑"
this
.$nextTick(() => {
this
.$refs
.addSource
.open(row
.id)
})
},
updoman(row) {
this
.$nextTick(() => {
this
.$refs
.datdoman
.open(row
.id)
})
},
addSubmit() {
this
.dialogVisible = false
this
.queryTableList()
},
// 分页监听
PaginationConfigChange() {
this
.queryTableList()
},
// 这里放置你的方法
// 搜索
async Search() {
this
.paginationConfig
.pageNumber = 1
const row = Object
.assign({}, this
.paginationConfig, this
.queryData)
const res = await resources
.querlist(row)
this
.tableDataList = res
.result
this
.paginationConfig
.total = res
.total
this
.watype()
},
// 重置
Reset() {
this
.queryData = new queryClass()
},
//获取数据
async queryTableList() {
this
.tableLoading = true
try {
const res = await resources
.query()
this
.paginationConfig
.total = res
.total
this
.tableDataList = res
this
.watype()
} catch (err) {
console
.error(err)
} finally {
this
.tableLoading = false
}
},
v
iewDel(row) {
this
.$confirm(`确认删除？`, '提示')
.then(async () => {
try {
await resources
.delete({
id: row
.id,
})
this
.Search()
this
.$message({
type: 'success',
message: '删除成功!',
})
} catch (err) {
this
.$message({
title: '删除失败',
message: '删除失败',
type: 'error',
showClose: false,
})
}
})
.catch(() => {
this
.$message({
type: 'info',
message: '已取消删除',
})
})
},
watype() {
this
.tableDataList
.forEach((item) => {
if (item
.warehouseType == 'standard') {
item
.warehouseType = '标准型'
} else {
item
.warehouseType = '自定义型'
}
})
},
submit(row) {
this
.dialogVisible = row
this
.queryTableList()
},
updawar(row) {
this
.$nextTick(() => {
this
.$refs
.datawar
.open(row
.id)
})
},
upquer(row) {
this
.$router
.push({
path: '/data/data-governace/governance',
query: { id: row
.id },
})
},
diatileadd(){
this
.dialogVisible = true
this
.diatile = "新增"
}
},
}
</script>
<
style lang="scss" scoped></
style>
提示caught TypeError: Cannot read propert
ies of undefined (reading 'name')
at VueComponent
.$autoInit (app
.js:122066:76)
扫一扫
3988
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
