DZ/faw-report-library-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面绘制

Browse Source
This commit is contained in:
yuekuo
2023-04-18 14:32:12 +08:00
parent bf594d4b89
commit 93a3e41710
4 changed files with 532 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -9,6 +9,7 @@
"vueui": "vue ui"
},
"dependencies": {
"@johmun/vue-tags-input": "^2.1.0",
"axios": "^0.24.0",
"core-js": "^3.19.1",
"echarts": "^5.2.2",
src/views/Report/ReportList.vue
+101 -2
View File
@@ -88,7 +88,23 @@
</el-row>
</div>
<div class="table">
<vxe-table :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 420px)'">
<el-row>
<el-col :span="4" class="treeList">
<el-input placeholder="输入关键字进行过滤" v-model="filterText">
</el-input>
<el-tree
class="filter-tree"
:data="treeData"
show-checkbox
node-key="id"
default-expand-all
:filter-node-method="filterNode"
ref="tree"
>
</el-tree>
</el-col>
<el-col :span="19">
<vxe-table :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 420px)'">
<vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
<template #default="{ row, rowIndex }">
{{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
@@ -129,6 +145,7 @@
<!-- <el-button type="text" @click="downloadRow(row)">下载</el-button>-->
</template>
</vxe-column>
</vxe-table>
<el-pagination
@size-change="handleSizeChange"
@@ -138,6 +155,12 @@
:page-size="q.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"/>
</el-col>
</el-row>
</div>
<!--预览-->
@@ -208,10 +231,77 @@ export default {
}
},
dialogPreview: false, // 预览
content: ''
content: '',
filterText:'',
treeData: [
{
id: 0,
label: '根节点',
children: [
{
id: 1,
label: '一级 1',
children: [
{
id: 4,
label: '二级 1-1',
children: [
{
id: 9,
label: '三级 1-1-1'
},
{
id: 10,
label: '三级 1-1-2'
}
]
}
]
},
{
id: 2,
label: '一级 2',
children: [
{
id: 5,
label: '二级 2-1'
},
{
id: 6,
label: '二级 2-2'
}
]
},
{
id: 3,
label: '一级 3',
children: [
{
id: 7,
label: '二级 3-1'
},
{
id: 8,
label: '二级 3-2'
}
]
},
]
}
],
}
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
init () {
this.labelList()
this.reportDateList()
@@ -341,6 +431,15 @@ export default {
</script>
<style lang="scss" scoped>
.treeList{
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
margin-right: 20px;
.filter-tree{
margin-top: 20px;
}
}
.report-list {
.title {
border-bottom: 1px solid #EBEEF5;
src/views/Report/ReportManager.vue
+298 -242
View File
@@ -140,139 +140,30 @@
</div>
</el-dialog>
<!--标签维护-->
<el-dialog title="标签维护" :visible.sync="dialogTags" width="1100px" :close-on-click-modal="false"
<el-dialog title="标签维护" :visible.sync="dialogTags" width="30%" :close-on-click-modal="false"
:close-on-press-escape="false" modal-append-to-body append-to-body :before-close="handleTagsClose">
<div class="dialog-tags">
<el-row :gutter="17">
<el-col :span="8">
<div class="tags-item">
<div class="tag-header">
<el-row>
<el-col :span="17">
<el-input v-model="tagsForm.tags01.name" placeholder="请输入标签一名称" maxlength="20" show-word-limit
@change="(val)=> handleSaveTopTag(val, 1)"></el-input>
</el-col>
<el-col :span="7"><img class="icon-modify" src="@/assets/imgs/icon-modify.png"
alt=""></el-col>
</el-row>
</div>
<div class="tags-content">
<el-scrollbar>
<el-row>
<template v-for="(item, index) in tagsForm.tags01.childList">
<el-col :span="17" :key="'input-' + item.id">
<!--:disabled="index === 0"-->
<el-input v-model="item.name" placeholder="请输入标签名称"
maxlength="20" show-word-limit
@change="(val)=> handleSaveTag(val, item, 1)"></el-input>
</el-col>
<el-col :span="7" :key="'btns-' + item.id">
<img @click="addTag(index, 1)" class="icon-add"
src="@/assets/imgs/icon-add.png" alt="">
<!-- v-if="index !== 0"-->
<img @click="delTag(index, 1)" v-if="tagsForm.tags01.childList.length !== 1" class="icon-sub"
src="@/assets/imgs/icon-sub.png" alt="">
<img @click="upTag(item, index, 1)" v-if="index !== 0" class="icon-up"
src="@/assets/imgs/icon-up.png" alt="">
<img @click="downTag(item, index, 1)" v-if="index !== tagsForm.tags01.childList.length - 1" class="icon-down"
src="@/assets/imgs/icon-down.png" alt="">
</el-col>
</template>
</el-row>
</el-scrollbar>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="tags-item">
<div class="tag-header">
<el-row>
<el-col :span="17">
<el-input v-model="tagsForm.tags02.name" placeholder="请输入标签二名称" maxlength="20" show-word-limit
@change="(val)=> handleSaveTopTag(val, 2)"></el-input>
</el-col>
<el-col :span="7"><img class="icon-modify" src="@/assets/imgs/icon-modify.png"
alt=""></el-col>
</el-row>
</div>
<div class="tags-content">
<el-scrollbar>
<el-row>
<template v-for="(item, index) in tagsForm.tags02.childList">
<el-col :span="17" :key="'input-' + item.id">
<!-- :disabled="index === 0"-->
<el-input v-model="item.name" placeholder="请输入标签名称"
maxlength="20" show-word-limit
@change="(val)=> handleSaveTag(val, item, 2)"></el-input>
</el-col>
<el-col :span="7" :key="'btns-' + item.id">
<img @click="addTag(index, 2)" class="icon-add"
src="@/assets/imgs/icon-add.png" alt="">
<!-- v-if="index !== 0"-->
<img @click="delTag(index, 2)" v-if="tagsForm.tags02.childList.length !== 1" class="icon-sub"
src="@/assets/imgs/icon-sub.png" alt="">
<img @click="upTag(item, index, 2)" v-if="index !== 0" class="icon-up"
src="@/assets/imgs/icon-up.png" alt="">
<img @click="downTag(item, index, 2)" v-if="index !== tagsForm.tags02.childList.length - 1" class="icon-down"
src="@/assets/imgs/icon-down.png" alt="">
</el-col>
</template>
</el-row>
</el-scrollbar>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="tags-item">
<div class="tag-header">
<el-row>
<el-col :span="17">
<el-input v-model="tagsForm.tags03.name" placeholder="请输入标签三名称" maxlength="20" show-word-limit
@change="(val)=> handleSaveTopTag(val, 3)"></el-input>
</el-col>
<el-col :span="7"><img class="icon-modify" src="@/assets/imgs/icon-modify.png"
alt=""></el-col>
</el-row>
</div>
<div class="tags-content">
<el-scrollbar>
<el-row>
<template v-for="(item, index) in tagsForm.tags03.childList">
<el-col :span="17" :key="'input-' + item.id">
<!-- :disabled="index === 0"-->
<el-input v-model="item.name" placeholder="请输入标签名称"
maxlength="20" show-word-limit
@change="(val)=> handleSaveTag(val, item, 3)"></el-input>
</el-col>
<el-col :span="7" :key="'btns-' + item.id">
<img @click="addTag(index, 3)" class="icon-add"
src="@/assets/imgs/icon-add.png" alt="">
<!-- v-if="index !== 0"-->
<img @click="delTag(index, 3)" v-if="tagsForm.tags03.childList.length !== 1" class="icon-sub"
src="@/assets/imgs/icon-sub.png" alt="">
<img @click="upTag(item, index, 3)" v-if="index !== 0" class="icon-up"
src="@/assets/imgs/icon-up.png" alt="">
<img @click="downTag(item, index, 3)" v-if="index !== tagsForm.tags03.childList.length - 1" class="icon-down"
src="@/assets/imgs/icon-down.png" alt="">
</el-col>
</template>
</el-row>
</el-scrollbar>
</div>
</div>
</el-col>
<el-col :span="24" align="center">
<el-button class="save-tag-btn" type="primary" @click="saveTags">保存</el-button>
</el-col>
</el-row>
</div>
<div class="head">
<el-input placeholder="输入关键字进行过滤" v-model="filterText">
</el-input>
<el-button type="primary" class="btn" @click="add">新增</el-button>
</div>
<div class="tree">
<el-tree class="filter-tree" :data="data" default-expand-all :filter-node-method="filterNode"
ref="tree">
<span class="custom-tree-node" slot-scope="{ node,data}">
<span>{{ node.label }}</span>
<span>
<!-- <el-button type="text" @click.stop="add">新建</el-button> -->
<el-button type="text" v-if="data.label != '根节点'"
@click.stop="update(node, data)">编辑</el-button>
<el-button type="text" v-if="data.label != '根节点'"
@click.stop="deleteNode(node, data)">删除</el-button>
</span>
</span>
</el-tree>
</div>
</el-dialog>
<labelModalVue ref="labelModalVue"></labelModalVue>
<!--报告上传-->
<el-dialog :title="mode === 'modify' ? '报告编辑' : '报告上传'" :visible.sync="dialogReport" width="750px" :close-on-click-modal="false"
:close-on-press-escape="false" modal-append-to-body append-to-body>
@@ -282,7 +173,12 @@
<el-input v-model="reportF.name" placeholder="请填写" maxlength="100" show-word-limit></el-input>
</el-form-item>
<el-form-item label="关键词:">
<el-input v-model="reportF.keyContent" placeholder="请填写" maxlength="100" show-word-limit></el-input>
<vue-tags-input
placeholder="请输入关键词"
v-model="reportF.tag"
:tags="tags"
@tags-changed="newTags => tags = newTags"
/>
</el-form-item>
<el-form-item label="内容摘要:">
<el-input v-model="reportF.mainContent" placeholder="请填写" type="textarea"
@@ -291,7 +187,21 @@
<el-form-item label="报告所属部门:">
<el-input v-model="reportF.department" placeholder="请填写" maxlength="100" show-word-limit></el-input>
</el-form-item>
<el-form-item label="文件上传:" required>
<el-form-item label="报告涉密等级:">
<el-select v-model="reportF.secretLevel" placeholder="请选择报告涉密等级">
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="报告隐私等级:">
<el-select v-model="reportF.privacyLevel" placeholder="请选择报告隐私等级">
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="上传报告:" required>
<el-row type="flex">
<el-col :span="15">
<el-input v-model="reportF.fileName" disabled placeholder="请上传报告"></el-input>
@@ -312,35 +222,15 @@
prefix-icon="null" :picker-options="pickerOptions"/>
</el-form-item>
<el-form-item label="标签:" required>
<el-row :gutter="10" type="flex">
<el-col :span="8">
<el-select v-model="labelOne" :placeholder="'请选择' + tagsForm.tags01.name" value-key="id"
@change="(val) => handleSelectTag(val, 1)">
<template v-for="item in tagsForm.tags01.childList">
<el-option :label="item.name" :value="item" :key="item.id"></el-option>
</template>
</el-select>
</el-col>
<el-col :span="8">
<el-select v-model="labelTwo" :placeholder="'请选择' + tagsForm.tags02.name" value-key="id"
@change="(val) => handleSelectTag(val, 2)">
<template v-for="item in tagsForm.tags02.childList">
<el-option :label="item.name" :value="item" :key="item.id"></el-option>
</template>
</el-select>
</el-col>
<el-col :span="8">
<el-select v-model="labelThree" :placeholder="'请选择' + tagsForm.tags03.name"
value-key="id"
@change="(val) => handleSelectTag(val, 3)">
<template v-for="item in tagsForm.tags03.childList">
<el-option :label="item.name" :value="item" :key="item.id"></el-option>
</template>
</el-select>
</el-col>
</el-row>
<el-cascader
width="100%"
v-model="reportF.label"
:options="cascaderOptions"
:props="{ checkStrictly: true }"
clearable>
</el-cascader>
</el-form-item>
<el-form-item label="权限:" required>
<el-form-item label="权限设置:" required>
<el-select v-model="reportF.reportUserIdList"
class="icon-auth"
multiple
@@ -348,7 +238,7 @@
@change="changeSelect"
@visible-change="changeSelect"
placeholder="请选择">
<el-checkbox class="check-all" v-model="checked" @change="selectAll">全选</el-checkbox>
<el-checkbox class="check-all" v-model="checked" @change="selectAll">全选</el-checkbox>
<template v-for="item in userList">
<el-option :label="item.USNAME" :value="item.USID" :key="item.USID"></el-option>
</template>
@@ -386,9 +276,14 @@
import {fileType} from '@/utils/fileType'
import {downloadFile} from "../../utils/downloadFile";
import {formatDate} from '@/utils/date'
import VueTagsInput from '@johmun/vue-tags-input';
import labelModalVue from './reportManager/labelModal.vue';
export default {
name: "ReportManager",
components:{
labelModalVue,
VueTagsInput
},
data() {
return {
watermarkText: '', // 水印
@@ -409,6 +304,64 @@ export default {
doNames: [],
/* =============================================== 标签维护 =============================================== */
dialogTags: false, // 标签维护
filterText: '',
data: [
{
id: 0,
label: '根节点',
children: [
{
id: 1,
label: '一级 1',
children: [
{
id: 4,
label: '二级 1-1',
children: [
{
id: 9,
label: '三级 1-1-1'
},
{
id: 10,
label: '三级 1-1-2'
}
]
}
]
},
{
id: 2,
label: '一级 2',
children: [
{
id: 5,
label: '二级 2-1'
},
{
id: 6,
label: '二级 2-2'
}
]
},
{
id: 3,
label: '一级 3',
children: [
{
id: 7,
label: '二级 3-1'
},
{
id: 8,
label: '二级 3-2'
}
]
},
]
}
],
tagsForm: {
tags01: {
name: '',
@@ -456,11 +409,42 @@ export default {
labelThreeName: '', // 标签3
reportUserIdList: [], // 权限
},
tag:'',
tags:[],
labelOne: {},
labelTwo: {},
labelThree: {},
mode: '',
userList: [],
cascaderOptions:[{
value: 1,
label: '东南',
children: [{
value: 2,
label: '上海',
children: [
{ value: 3, label: '普陀' },
{ value: 4, label: '黄埔' },
{ value: 5, label: '徐汇' }
]
}, {
value: 7,
label: '江苏',
children: [
{ value: 8, label: '南京' },
{ value: 9, label: '苏州' },
{ value: 10, label: '无锡' }
]
}, {
value: 12,
label: '浙江',
children: [
{ value: 13, label: '杭州' },
{ value: 14, label: '宁波' },
{ value: 15, label: '嘉兴' }
]
}]
}],
pickerOptions: {
disabledDate(time) {
return time.getFullYear() > new Date().getFullYear() + 1 || time.getFullYear() < new Date().getFullYear() - 10;
@@ -486,7 +470,37 @@ export default {
mulSelecteds: [], // 已选中选项
}
},
//监听标签搜索框
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
methods: {
//标签搜索
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
add(){
this.$refs.labelModalVue.open()
},
update(node, data){
this.$refs.labelModalVue.open(node, data)
},
deleteNode(node, data){
this.$confirm('确认删除？','提示',{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'})
.then(_ => {
done();
})
.catch(_ => {});
},
addTag(){
},
/* 权限全选 */
selectAll() {
this.reportF.reportUserIdList = [];
@@ -575,13 +589,13 @@ export default {
},
/* =============================================== 标签维护 =============================================== */
// 标签维护 新增
addTag(index, type) {
if (this.tagsForm['tags0' + type].childList.length >= 20) {
return this.$message.warning("最多添加20个标签");
}
let itemData = {name: '', id: "", parentId: this.tagsForm['tags0' + type].id, type: String(type)};
this.tagsForm['tags0' + type].childList.splice(index + 1, 0, itemData);
},
// addTag(index, type) {
// if (this.tagsForm['tags0' + type].childList.length >= 20) {
// return this.$message.warning("最多添加20个标签");
// }
// let itemData = {name: '', id: "", parentId: this.tagsForm['tags0' + type].id, type: String(type)};
// this.tagsForm['tags0' + type].childList.splice(index + 1, 0, itemData);
// },
// 标签维护 删除
delTag(index, type) {
let {id, status} = this.tagsForm['tags0' + type].childList[index];
@@ -738,38 +752,38 @@ export default {
this.reset();
},
// 保存标签
saveTags() {
let tagsForm = JSON.parse(JSON.stringify(this.tagsForm));
let params = {
labelList: [
tagsForm.tags01,
tagsForm.tags02,
tagsForm.tags03
]
}
let isSave = true;
params.labelList.forEach(item => {
if(!item.name || item.name === '-'){
isSave = false;
return
}
item.childList.forEach(ele => {
if(!ele.name || item.name === '-'){
isSave = false;
return
}
})
})
if(!isSave){
return this.$message.warning('标签名称不能为空');
}
this.$api.report.labelSave(params).then(_ => {
this.$message.success('操作成功');
this.dialogTags = false;
this.labelList();
this.reset();
})
},
// saveTags() {
// let tagsForm = JSON.parse(JSON.stringify(this.tagsForm));
// let params = {
// labelList: [
// tagsForm.tags01,
// tagsForm.tags02,
// tagsForm.tags03
// ]
// }
// let isSave = true;
// params.labelList.forEach(item => {
// if(!item.name || item.name === '-'){
// isSave = false;
// return
// }
// item.childList.forEach(ele => {
// if(!ele.name || item.name === '-'){
// isSave = false;
// return
// }
// })
// })
// if(!isSave){
// return this.$message.warning('标签名称不能为空');
// }
// this.$api.report.labelSave(params).then(_ => {
// this.$message.success('操作成功');
// this.dialogTags = false;
// this.labelList();
// this.reset();
// })
// },
/* =============================================== 报告上传 =============================================== */
// 打开报告上传
openReportAdd() {
@@ -797,45 +811,45 @@ export default {
this.dialogReport = true;
},
// 选择标签
handleSelectTag(val, type) {
switch (type) {
case 1:
this.reportF.labelOneId = val.id;
this.reportF.labelOneName = val.name;
break;
case 2:
this.reportF.labelTwoId = val.id;
this.reportF.labelTwoName = val.name;
break;
case 3:
this.reportF.labelThreeId = val.id;
this.reportF.labelThreeName = val.name;
break;
}
},
// handleSelectTag(val, type) {
// switch (type) {
// case 1:
// this.reportF.labelOneId = val.id;
// this.reportF.labelOneName = val.name;
// break;
// case 2:
// this.reportF.labelTwoId = val.id;
// this.reportF.labelTwoName = val.name;
// break;
// case 3:
// this.reportF.labelThreeId = val.id;
// this.reportF.labelThreeName = val.name;
// break;
// }
// },
// 必填项
checkReportF() {
if (!this.reportF.name) {
return this.$message.warning('请检查报告名称') && false;
}
if (!this.reportF.fileId || !this.reportF.fileName) {
return this.$message.warning('请检查上传文件') && false;
}
if (!this.reportF.year) {
return this.$message.warning('请检查报告年份') && false;
}
if (!this.reportF.labelOneId || !this.reportF.labelOneName || this.reportF.labelOneName === '-' ) {
return this.$message.warning(`请检查${this.tagsForm.tags01.name}`) && false;
}
if (!this.reportF.labelTwoId || !this.reportF.labelTwoName || this.reportF.labelTwoName === '-') {
return this.$message.warning(`请检查${this.tagsForm.tags02.name}`) && false;
}
if (!this.reportF.labelThreeId || !this.reportF.labelThreeName || this.reportF.labelThreeName === '-') {
return this.$message.warning(`请检查${this.tagsForm.tags03.name}`) && false;
}
if (!this.reportF.reportUserIdList || !this.reportF.reportUserIdList.length) {
return this.$message.warning('请检查权限') && false;
}
// if (!this.reportF.name) {
// return this.$message.warning('请检查报告名称') && false;
// }
// if (!this.reportF.fileId || !this.reportF.fileName) {
// return this.$message.warning('请检查上传文件') && false;
// }
// if (!this.reportF.year) {
// return this.$message.warning('请检查报告年份') && false;
// }
// if (!this.reportF.labelOneId || !this.reportF.labelOneName || this.reportF.labelOneName === '-' ) {
// return this.$message.warning(`请检查${this.tagsForm.tags01.name}`) && false;
// }
// if (!this.reportF.labelTwoId || !this.reportF.labelTwoName || this.reportF.labelTwoName === '-') {
// return this.$message.warning(`请检查${this.tagsForm.tags02.name}`) && false;
// }
// if (!this.reportF.labelThreeId || !this.reportF.labelThreeName || this.reportF.labelThreeName === '-') {
// return this.$message.warning(`请检查${this.tagsForm.tags03.name}`) && false;
// }
// if (!this.reportF.reportUserIdList || !this.reportF.reportUserIdList.length) {
// return this.$message.warning('请检查权限') && false;
// }
return true;
},
// 新增或编辑报告
@@ -1171,6 +1185,45 @@ export default {
}
/* 标签维护 */
.head {
display: flex;
align-items: center;
.btn{
cursor: pointer;
}
}
.tree {
margin-top: 30px;
padding:0px 50px 50px 50px;
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
}
}
.head ::v-deep .el-input__inner {
margin-top: 10px;
height: 40px;
line-height: 40px;
width: 50% !important;
margin-left: 50px;
}
.head ::v-deep .el-button{
margin-top: 10px;
height: 40px;
line-height: 40px;
display: flex;
justify-content: center;
align-items: center;
margin-left: -120px;
cursor: pointer;
z-index: 999;
}
.dialog-tags {
padding: 11px 33px 0 33px;
@@ -1282,14 +1335,17 @@ export default {
font-weight: 400;
color: #434343;
}
.el-select {
width: 100%;
}
.ti-input{
width: 107.5% !important;
}
.el-cascader{
width: 100%;
}
.el-date-editor {
width: 100%;
.el-input__inner {
padding-left: 15px;
}
src/views/Report/reportManager/labelModal.vue
+132
View File
@@ -0,0 +1,132 @@
<template>
<div>
<el-dialog title="新增/编辑标签" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
<div class="form">
<el-form ref="form" :model="form" label-width="80px" :rules="rule">
<el-form-item label="上级标签">
<el-select v-model="form.label" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="标签名称" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<!-- <el-form-item label="标签属性" prop="resource">
<el-radio-group v-model="form.resource">
<el-radio label="单选" value="0"></el-radio>
<el-radio label="多选" value="1"></el-radio>
</el-radio-group>
</el-form-item> -->
<el-form-item label="排序">
<el-input v-model="form.sort"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.tip"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="cancel" class="btn">取消</el-button>
<el-button type="primary" @click="submitForm" class="btn">确定</el-button>
</el-form-item>
</el-form>
</div>
<!-- <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click=" submit">确 定</el-button>
</span> -->
</el-dialog>
</div>
</template>
<script>
export default {
name: 'labelModal',
data() {
return {
dialogVisible: false,
form: {},
rule: {
name: [
{ required: true, trigger: 'blur', message: '请输入标签名称' }
],
resource: [
{
required: true, trigger: 'change', message: '请选择标签属性'
}
]
},
};
},
methods: {
handleClose(done) {
// this.$confirm('确认关闭？')
// .then(_ => {
// done();
// })
// .catch(_ => {});
done();
},
open(node, data) {
this.dialogVisible = true
if (node && data) {
this.showAddOrUpdateLabel = true
this.form.label = node.parent.data.label
this.form.name = data.label
this.$forceUpdate()
} else {
this.form={}
this.$forceUpdate()
}
},
cancel() {
this.dialogVisible = false
},
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
this.dialogVisible = false
}
})
}
}
}
</script>
<style lang="scss" scoped>
.form {
padding: 50px;
.btn {
margin-left: 40px;
width: 90px;
height: 40px;
border-radius: 30px;
margin-right: 30px;
}
}
.form ::v-deep .el-input__inner {
width: 90%
}
.form ::v-deep .el-select {
width: 90%;
}
.form ::v-deep .el-select .el-input__inner {
width: 100%;
}
::v-deep .el-form-item--mini .el-form-item__label {
line-height: 40px !important;
}
::v-deep .el-input__inner {
height: 40px;
line-height: 40px;
width: 80%;
}
</style>