<template>
<!--数据分类管理*编辑-->
<el-dialog :close-on-click-modal="false" :visible.sync='dialogFormVisible' :title="title" class="xyj-el-dialog width30 right4px" center>
<el-form ref="editForm" :model="editForm" :rules="rules" class="xyj-el-form" label-width="85px">
<el-row style="position:relative;">
<el-col :span="24">
<el-form-item label="数据类别:" prop="categoryId" label-width="110px" style="margin-right:63px;">
<el-select :disabled="type === 'edit'" v-model.number="editForm.categoryId" popper-class="xyj-dropdown" placeholder="请选择数据类别"
class="xyj-select h30 flex-1 lmy-sensitive-select">
<el-option v-for="item in categoryOptions" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-col v-if="type === 'edit'" :span="24">
<el-form-item label="关联数据源:" label-width="110px" style="margin-right:63px;">
<!-- <span class="name-text" :title="editForm.dsName">{{editForm.dsName}}</span> -->
<el-select v-model="editForm.dsName" popper-class="xyj-dropdown" placeholder="请选择"
class="xyj-select h30 flex-1 lmy-sensitive-select">
<el-option v-for="(item,index) in sensitiveOptions" @click.native="clickReferDS(item)" :key="index" :label="item.dsName"
:value="item.dsName">
</el-option>
</el-select>
<div class="secretLevestar">*</div>
</el-form-item>
</el-col>
<el-row v-if="type === 'add'">
<el-col :span="24">
<el-form-item label="关联数据源:" label-width="110px">
<div class="stylewrap" ref="boxScrol">
<div class="dis-box align-items-end">
<div class="flex-1">
<div v-for="(item,index) in sensitiveData" :key="index">
<el-select v-model="item.name" popper-class="xyj-dropdown" placeholder="请选择"
class="xyj-select h30 flex-1 lmy-sensitive-select">
<el-option v-for="(item,index) in sensitiveOptions" @click.native="clickReferDS(item)" :key="index" :label="item.dsName"
:value="item.id">
</el-option>
</el-select>
</div>
</div>
<div class="dis-box align-items-end rightbox">
<div class="leftMinus">
<div class="el-icon-remove-outline minusBtn cursor-po" @click="deleteDataNames(index)"
v-show="sensitiveData.length>1" v-for="(item,index) in sensitiveData" :key="index"></div>
</div>
<div class="el-icon-circle-plus-outline plusBtn cursor-po" @click="plusDataNames()"></div>
</div>
<div style="width:8px;height:30px;background: white;" v-show="!(sensitiveData.length>5)"></div>
</div>
</div>
<div class="secretLevestar">*</div>
<div class="fs12 ctips" v-show="tipIsShow">请选择!</div>
<div class="fs12 ctips" v-show="tipIsShowTwo">不能超过30个!</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="text-c" slot="footer">
<el-button type="primary" class="noShadow" size="small" @click="submit(editForm)">确认</el-button>
</div>
</el-dialog>
</template>
<script>
import { removeEmptyField } from '@/utils/basefunc'
import { categoryAll,dsList, saveDataCategory, updateDataCategory, ruleAllForDataCategory } from '@/http/hdataCategory'
import { editDialog } from '@/mixin/index'
export default {
mixins: [editDialog],
props: {
proccessType: {
default: 'add'
},
title: {
default: ''
},
editForm: {
type: Object,
default () {
return {
categoryId: ''
}
}
},
type: {
type: String,
default: 'add'
}
},
data () {
return {
categoryOptions: [],
sensitiveData: [{}],
sensitiveOptions: [],
dsArray: [],
dialogFormVisible: false,
searchData: {
pageNum: 1,
pageSize: 10
},
rules: {
categoryId: [
{ required: true, message: '请选择数据类别！', type: 'number', trigger: 'change' }
]
},
tipIsShow: false,
tipIsShowTwo: false
}
},
computed: {
sensitiveNames () {
let preIds = this.sensitiveData.map(item => {
return item.name
})
return preIds
}
},
watch: {
sensitiveNames: {
handler (val) {
if (val.length > 0) {
this.tipIsShow = false
} else {
this.tipIsShow = true
}
}
}
},
methods: {
clickReferDS(item){
this.dsArray.push({dsId:item.id,dsName:item.dsName})
},
dataAdd () {
// this.editForm.dataNames = removeEmptyField(this.sensitiveNames)
this.editForm.dsNames = this.dsArray;
if (!(this.editForm.dsNames.length > 0)) {
this.tipIsShow = true
return
}
saveDataCategory(this.editForm).then(res => {
if (res.code === 0) {
this.$emit('update-data')
this.successTips('新增数据分类成功！')
this.dialogFormVisible = false
} else {
this.errorTips(res.message || '新增数据分类失败!')
}
}, (err) => {
this.errorTips(err.message || '新增数据分类失败!')
})
},
dataEdit () {
console.log('editdata', this.editForm)
updateDataCategory(this.editForm).then(res => {
if (res.code === 0) {
this.$emit('update-data')
this.successTips('更新数据分类成功！')
this.dialogFormVisible = false
} else {
this.errorTips(res.message || '更新数据分类失败!')
}
})
},
// 删除
deleteDataNames (index) {
this.sensitiveData.splice(index, 1)
this.dsArray.splice(index,1)
},
// 添加
plusDataNames () {
if (this.sensitiveData.length < 30) {
this.sensitiveData.push({})
} else {
this.tipIsShowTwo = true
setTimeout(() => {
this.tipIsShowTwo = false
}, 1000)
}
this.$nextTick(() => {
this.$refs.boxScrol.scrollTop = this.$refs.boxScrol.scrollHeight
})
},
// 数据类别All查询接口
getCategoryOptions () {
categoryAll().then(res => {
if (res.code === 0) {
this.categoryOptions = res.data
} else {
this.errorTips(res.message || '请求失败！')
}
})
}
},
created(){
// this.editForm
},
mounted () {
this.getCategoryOptions()
let data = {}
dsList(data).then(res => {
console.log(87382, res)
if (res.code === 0) {
this.sensitiveOptions = res.data
} else {
this.errorTips(res.message || '请求失败!')
}
})
// ruleAllForDataCategory().then(res => {
// console.log(87382, res)
// if (res.code === 0) {
// this.sensitiveOptions = res.data
// } else {
// this.errorTips(res.message || '请求失败!')
// }
// })
}
}
</script>
<style lang="scss" scoped>
.stylewrap{
max-height:180px;
overflow-y: auto;
}
.plusBtn{
font-size: 20px;
color:$c-button;
margin-bottom: 10px;
margin-left: 0px;
}
.rightbox{
width: 45px;
margin-left: 5px;
margin-right: 5px;
}
.minusBtn{
height:20px;
width:20px;
font-size: 20px;
color:$c-button;
margin-bottom: 0px;
margin-top: 5px;
}
.secretLevestar{
position: absolute;
top: -0em;
left: -7em;
color:#f56c6c;
font-size:16px;
}
.ctips{
position:absolute;
bottom:-26px;
left:0;
color:#f56c6c;
}
.name-text{
display: inline-block;
width: 379px;
height: 36px;
line-height: 36px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
cursor: pointer;
}
</style>
