251 lines
6.1 KiB
Vue
251 lines
6.1 KiB
Vue
<template>
|
|
<div>
|
|
<div class="info-title">{{ title }}</div>
|
|
<el-form :inline="true">
|
|
<el-form-item label="使用总数">
|
|
<el-input
|
|
v-model="count"
|
|
onkeyup="value=value.replace(/[^\d]/g,0)"
|
|
placeholder="请输入总数"
|
|
style="width: 320px"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<div class="submit">
|
|
<a-button type="primary" @click="addBaseInfo">
|
|
<img
|
|
style="height: 12px; width: 12px; margin-top: -2px"
|
|
src="~@/assets/img/jiahao.png"
|
|
alt=""
|
|
/>
|
|
<span style="margin-left: 4px">添加实例数据</span>
|
|
</a-button>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div style="margin-bottom: 20px">
|
|
<el-table v-if="dataInfo.length > 0" :data="dataInfo" border>
|
|
<el-table-column label="序号" width="55">
|
|
<template slot-scope="scope">{{
|
|
scope.$index + 1 > 9 ? scope.$index + 1 : "0" + (scope.$index + 1)
|
|
}}</template>
|
|
</el-table-column>
|
|
<el-table-column label="数据名称" width="180">
|
|
<template slot-scope="scope">
|
|
<el-input
|
|
v-model="scope.row.name"
|
|
placeholder="请输入数据名称"
|
|
></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="类型" width="200">
|
|
<template slot-scope="scope">
|
|
<el-select :ref="scope.row.id" v-model="scope.row.type">
|
|
<el-option
|
|
v-for="item in typeList"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
:key="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="来源部门" width="180">
|
|
<template slot-scope="scope">
|
|
<el-input
|
|
v-model="scope.row.dept"
|
|
placeholder="请输入来源部门"
|
|
></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作">
|
|
<template slot-scope="scope">
|
|
<el-popconfirm
|
|
confirm-button-text="确认"
|
|
cancel-button-text="取消"
|
|
icon="el-icon-info"
|
|
icon-color="red"
|
|
title="确定删除该实例数据吗?"
|
|
@confirm="handleDelete(scope.$index, scope.row)"
|
|
>
|
|
<el-button
|
|
type="danger"
|
|
icon="el-icon-delete"
|
|
slot="reference"
|
|
></el-button>
|
|
</el-popconfirm>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
dataForm: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
typeList: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
watch: {
|
|
dataInfo: {
|
|
handler (newVal) {
|
|
this.dataInfo = newVal
|
|
this.$emit('update', {
|
|
title: this.title,
|
|
list: newVal
|
|
})
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
},
|
|
count: {
|
|
handler (newVal) {
|
|
this.count = newVal
|
|
this.$emit('updateCount', {
|
|
title: this.title,
|
|
count: newVal
|
|
})
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
count: '',
|
|
dataInfo: []
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
addBaseInfo () {
|
|
const data = {
|
|
name: '',
|
|
type: '',
|
|
dept: ''
|
|
}
|
|
this.dataInfo.push(data)
|
|
},
|
|
handleDelete (row) {
|
|
this.dataInfo.splice(row, 1)
|
|
},
|
|
getDataInfo (dataForm) {
|
|
let arr = []
|
|
if (dataForm && (dataForm.id || dataForm.id === 0)) {
|
|
if (this.title === '基础设施') {
|
|
this.count = dataForm.infrastructureCount
|
|
}
|
|
if (this.title === '组件服务') {
|
|
this.count = dataForm.componentCount
|
|
}
|
|
if (this.title === '数据资源') {
|
|
this.count = dataForm.dataSourceCount
|
|
}
|
|
|
|
const fuseAttrList = dataForm.fuseResourceList || []
|
|
const obj = fuseAttrList.filter((v) => v.type === this.title)
|
|
console.log('回显数据=======>', obj)
|
|
if (obj.length > 0) {
|
|
obj.map((v) => {
|
|
v.name = v.resourceName
|
|
v.dept = v.deptName
|
|
v.type = v.typeSecond
|
|
arr.push(v)
|
|
})
|
|
} else {
|
|
arr = []
|
|
}
|
|
} else {
|
|
arr = []
|
|
}
|
|
|
|
this.dataInfo = arr
|
|
},
|
|
// 新增
|
|
addItem () {
|
|
const index = this.dataInfo.length - 1
|
|
if (this.dataInfo[index][this.keyTextObj.descObj.key] === '') {
|
|
return this.$message.warning('请填写完整信息!')
|
|
}
|
|
this.dataInfo.push({
|
|
[this.keyTextObj.descObj.key]: ''
|
|
})
|
|
},
|
|
// 删除
|
|
deleteItem (index) {
|
|
this.$confirm('确认是否删除?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '删除成功!'
|
|
})
|
|
this.dataInfo.splice(index, 1)
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
::v-deep .el-table thead {
|
|
height: 40px;
|
|
}
|
|
|
|
::v-deep .el-table th {
|
|
font-weight: normal;
|
|
background-color: #e3e4e5 !important;
|
|
}
|
|
|
|
.submit {
|
|
font-size: 0.14rem;
|
|
margin-left: 8px;
|
|
|
|
.ant-btn {
|
|
width: 128px;
|
|
height: 32px;
|
|
text-align: center;
|
|
background: #fff;
|
|
color: #0558e1;
|
|
border: 1px solid #0558e1;
|
|
border-radius: 2px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.ant-btn:hover {
|
|
background: #fff;
|
|
color: #0558e1;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.ant-btn:active {
|
|
background: #fff;
|
|
color: #0558e1;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.info-title {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.add-btn {
|
|
margin-left: 10px;
|
|
}
|
|
</style>
|