hi-ucs/back/src/views/modules/ability/assignedScene/components/ability-add.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>