|
|
<template>
|
|
|
<div>
|
|
|
<xy-dialog ref="dialog" :width="60" :is-show.sync="isShow" :type="'form'" :title="type === 'add' ? '新增业务类型' : '编辑业务类型'"
|
|
|
:form="form" :rules='rules' @submit="submit">
|
|
|
<template v-slot:name>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label" style="font-weight: bold">
|
|
|
<span style="color: red;font-weight: bold;padding-right: 4px;">*</span>业务名称：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input v-model="form.name" placeholder="请输入业务名称" clearable style="width: 100%;"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:area_ids>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label" style="font-weight: bold">
|
|
|
<span style="color: red;font-weight: bold;padding-right: 4px;">*</span>填报区域：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-select style="width:100%" v-model="form.area_ids" multiple collapse-tags
|
|
|
placeholder="请选择">
|
|
|
<el-option v-for="item in list_areas" :key="item.id" :label="item.name" :value="item.id">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<template v-slot:id_business_types_business_id_relation>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label" style="font-weight: bold">
|
|
|
<span style="color: red;font-weight: bold;padding-right: 4px;"></span>业务类别：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-button type="primary" style="margin-bottom:10px" size="small" @click="addRow">新增</el-button>
|
|
|
<xy-table style="width:850px" :list="form.id_business_types_business_id_relation" :isPage="false" :height="350"
|
|
|
:table-item="business_types_item">
|
|
|
<template v-slot:name>
|
|
|
<el-table-column align='left' label="类别名称" width="340">
|
|
|
<template slot-scope="scope">
|
|
|
<el-input placeholder="请输入类别名称" style="width:100%" v-model="scope.row.name"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</template>
|
|
|
<template v-slot:area_id>
|
|
|
<el-table-column align='left' label="所属区域" width="340">
|
|
|
<template slot-scope="scope">
|
|
|
<el-select style="width:100%"
|
|
|
v-model="scope.row.area_id" placeholder="请选择所属区域">
|
|
|
<el-option v-for="(item,index) in list_areas" :key="index" :label="item.name"
|
|
|
:value="item.id">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</template>
|
|
|
<template v-slot:btns>
|
|
|
<el-table-column align='center' label="操作" width="120" header-align="center">
|
|
|
<template slot-scope="scope">
|
|
|
<el-popconfirm style="margin:0 10px"
|
|
|
@confirm="delRow(scope.$index,scope.row.id)" title="确认删除该项业务类别?">
|
|
|
<el-button type="danger" size="small" slot="reference">删除</el-button>
|
|
|
</el-popconfirm>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</template>
|
|
|
</xy-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:id_business_datas_business_id_relation>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label" style="font-weight: bold">
|
|
|
<span style="color: red;font-weight: bold;padding-right: 4px;"></span>业务填报数据：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-button type="primary" style="margin-bottom:10px" size="small" @click="addDataRow">新增</el-button>
|
|
|
<xy-table style="width:850px" :list="form.id_business_datas_business_id_relation" :isPage="false" :height="350"
|
|
|
:table-item="business_datas_item">
|
|
|
<template v-slot:name>
|
|
|
<el-table-column align='left' label="填报数据名称" width="680">
|
|
|
<template slot-scope="scope">
|
|
|
<el-input placeholder="请输入填报数据名称" style="width:100%" v-model="scope.row.name"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</template>
|
|
|
<!-- <template v-slot:sort>
|
|
|
<el-table-column align='center' label="排序" width="100">
|
|
|
<template slot-scope="scope">
|
|
|
<el-input placeholder="请输入排序" style="width:100%" v-model="scope.row.sort"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</template> -->
|
|
|
<template v-slot:btns>
|
|
|
<el-table-column align='center' label="操作" width="120" header-align="center">
|
|
|
<template slot-scope="scope">
|
|
|
<el-popconfirm style="margin:0 10px"
|
|
|
@confirm="delDataRow(scope.$index,scope.row.id)" title="确认删除该项业务填报数据?">
|
|
|
<el-button type="danger" size="small" slot="reference">删除</el-button>
|
|
|
</el-popconfirm>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</template>
|
|
|
</xy-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
</xy-dialog>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
save,
|
|
|
show,
|
|
|
index,
|
|
|
destroy
|
|
|
} from "@/api/system/baseForm.js"
|
|
|
export default {
|
|
|
components: {
|
|
|
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
isShow: false,
|
|
|
type: 'add',
|
|
|
id: '',
|
|
|
table_name: 'businesses',
|
|
|
list_areas: [],
|
|
|
// 业务类别子表
|
|
|
business_types_item:[{
|
|
|
type: 'index',
|
|
|
width: 50,
|
|
|
}, {
|
|
|
prop: 'name',
|
|
|
label: '类别名称',
|
|
|
align: 'left',
|
|
|
width: 620
|
|
|
}, {
|
|
|
prop: 'area_id',
|
|
|
label: '所属区域',
|
|
|
align: 'left',
|
|
|
width: 620
|
|
|
}],
|
|
|
// 业务填报数据 子表
|
|
|
business_datas_item:[{
|
|
|
type: 'index',
|
|
|
width: 50,
|
|
|
}, {
|
|
|
prop: 'name',
|
|
|
label: '数据名称',
|
|
|
align: 'left',
|
|
|
width: 630
|
|
|
}],
|
|
|
form: {
|
|
|
name: '',
|
|
|
area_ids: [],
|
|
|
id_business_types_business_id_relation:[],
|
|
|
id_business_datas_business_id_relation:[]
|
|
|
},
|
|
|
rules: {
|
|
|
name: [{
|
|
|
required: true,
|
|
|
message: '请输入业务名称'
|
|
|
}],
|
|
|
area_ids: [{
|
|
|
required: true,
|
|
|
message: '请选择填报区域'
|
|
|
}]
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
async getAreaList() {
|
|
|
const res = await index({
|
|
|
page_size: 999,
|
|
|
page: 1,
|
|
|
table_name: 'areas',
|
|
|
sort_type:'ASC',
|
|
|
sort_name:'sort',
|
|
|
})
|
|
|
this.list_areas = res.data
|
|
|
},
|
|
|
addRow() {
|
|
|
this.form.id_business_types_business_id_relation.push({
|
|
|
name:'',
|
|
|
area_id:''
|
|
|
})
|
|
|
},
|
|
|
delRow(index,id) {
|
|
|
if(id){
|
|
|
destroy({
|
|
|
id: id,
|
|
|
table_name: 'business_types'
|
|
|
}).then(response => {
|
|
|
this.form.id_business_types_business_id_relation.splice(index, 1)
|
|
|
}).catch(error => {
|
|
|
console.log(error)
|
|
|
reject(error)
|
|
|
})
|
|
|
}else{
|
|
|
this.form.id_business_types_business_id_relation.splice(index, 1)
|
|
|
}
|
|
|
},
|
|
|
addDataRow() {
|
|
|
this.form.id_business_datas_business_id_relation.push({
|
|
|
name:'',
|
|
|
sort:0
|
|
|
})
|
|
|
},
|
|
|
delDataRow(index,id) {
|
|
|
if(id){
|
|
|
destroy({
|
|
|
id: id,
|
|
|
table_name: 'business_datas'
|
|
|
}).then(response => {
|
|
|
this.form.id_business_datas_business_id_relation.splice(index, 1)
|
|
|
}).catch(error => {
|
|
|
console.log(error)
|
|
|
reject(error)
|
|
|
})
|
|
|
}else{
|
|
|
this.form.id_business_datas_business_id_relation.splice(index, 1)
|
|
|
}
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
submit() {
|
|
|
if (this.id) {
|
|
|
this.form.id = this.id
|
|
|
}
|
|
|
if (this.type == 'add') {
|
|
|
this.form.id = ''
|
|
|
}
|
|
|
console.log("this.form", this.form)
|
|
|
|
|
|
// 判断 业务类型是否有 为空的数据
|
|
|
if (this.form.id_business_types_business_id_relation.length > 0) {
|
|
|
// 判断属性中是否为空
|
|
|
for (var p of this.form.id_business_types_business_id_relation) {
|
|
|
if (this.base.isNull(p.name)) {
|
|
|
this.$message({
|
|
|
type: 'warning',
|
|
|
message: `业务类别名称不能为空`
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
if (this.base.isNull(p.area_id)) {
|
|
|
this.$message({
|
|
|
type: 'warning',
|
|
|
message: `请选择业务类别所属区域`
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 判断 业务填报数据是否有 为空的数据
|
|
|
if (this.form.id_business_datas_business_id_relation.length > 0) {
|
|
|
// 判断属性中是否为空
|
|
|
for (var p of this.form.id_business_datas_business_id_relation) {
|
|
|
if (this.base.isNull(p.name)) {
|
|
|
this.$message({
|
|
|
type: 'warning',
|
|
|
message: `业务填报数据名称不能为空`
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// return
|
|
|
save({
|
|
|
table_name: this.table_name,
|
|
|
...this.form
|
|
|
}).then(res => {
|
|
|
this.$message({
|
|
|
type: 'success',
|
|
|
message: this.type === 'add' ? '新增成功' : '编辑成功'
|
|
|
})
|
|
|
this.isShow = false
|
|
|
this.$emit('refresh')
|
|
|
})
|
|
|
},
|
|
|
|
|
|
getDetail() {
|
|
|
show({
|
|
|
id: this.id,
|
|
|
table_name: this.table_name,
|
|
|
}).then(res => {
|
|
|
this.form = this.base.requestToForm(res, this.form)
|
|
|
this.form.area_ids = res.area_ids ? res.area_ids : [],
|
|
|
this.form.id_business_types_business_id_relation = res.id_business_types_business_id_relation?res.id_business_types_business_id_relation:[]
|
|
|
if(res.id_business_datas_business_id_relation){
|
|
|
this.form.id_business_datas_business_id_relation = res.id_business_datas_business_id_relation.sort((a, b) => parseInt(a.sort) - parseInt(b.sort))
|
|
|
}
|
|
|
// this.form.id_business_datas_business_id_relation = res.id_business_datas_business_id_relation?res.id_business_datas_business_id_relation:[]
|
|
|
|
|
|
})
|
|
|
},
|
|
|
},
|
|
|
watch: {
|
|
|
isShow(newVal) {
|
|
|
this.getAreaList()
|
|
|
if (newVal) {
|
|
|
if (this.type === 'editor') {
|
|
|
this.getDetail()
|
|
|
}
|
|
|
} else {
|
|
|
this.id = ''
|
|
|
this.type = "add"
|
|
|
this.list_areas = []
|
|
|
this.form = {
|
|
|
name: '',
|
|
|
area_ids: [],
|
|
|
id_business_types_business_id_relation:[],
|
|
|
id_business_datas_business_id_relation:[]
|
|
|
}
|
|
|
this.$refs['dialog'].reset()
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
// ::v-deep .area_ids,
|
|
|
// ::v-deep .name{
|
|
|
// flex-basis: 100%;
|
|
|
// }
|
|
|
</style>
|
