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" "vueui": "vue ui"
}, },
"dependencies": { "dependencies": {
"@johmun/vue-tags-input": "^2.1.0",
"axios": "^0.24.0", "axios": "^0.24.0",
"core-js": "^3.19.1", "core-js": "^3.19.1",
"echarts": "^5.2.2", "echarts": "^5.2.2",
src/views/Report/ReportList.vue
+101 -2
View File
@@ -88,7 +88,23 @@
</el-row> </el-row>
</div> </div>
<div class="table"> <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"> <vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
<template #default="{ row, rowIndex }"> <template #default="{ row, rowIndex }">
{{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }} {{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
@@ -129,6 +145,7 @@
<!-- <el-button type="text" @click="downloadRow(row)">下载</el-button>--> <!-- <el-button type="text" @click="downloadRow(row)">下载</el-button>-->
</template> </template>
</vxe-column> </vxe-column>
</vxe-table> </vxe-table>
<el-pagination <el-pagination
@size-change="handleSizeChange" @size-change="handleSizeChange"
@@ -138,6 +155,12 @@
:page-size="q.pageSize" :page-size="q.pageSize"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="total"/> :total="total"/>
</el-col>
</el-row>
</div> </div>
<!--预览--> <!--预览-->
@@ -208,10 +231,77 @@ export default {
} }
}, },
dialogPreview: false, // 预览 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: { methods: {
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
init () { init () {
this.labelList() this.labelList()
this.reportDateList() this.reportDateList()
@@ -341,6 +431,15 @@ export default {
</script> </script>
<style lang="scss" scoped> <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 { .report-list {
.title { .title {
border-bottom: 1px solid #EBEEF5; border-bottom: 1px solid #EBEEF5;
src/views/Report/ReportManager.vue
+298 -242
View File
@@ -140,139 +140,30 @@
</div> </div>
</el-dialog> </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"> :close-on-press-escape="false" modal-append-to-body append-to-body :before-close="handleTagsClose">
<div class="dialog-tags"> <div class="head">
<el-row :gutter="17"> <el-input placeholder="输入关键字进行过滤" v-model="filterText">
<el-col :span="8"> </el-input>
<div class="tags-item"> <el-button type="primary" class="btn" @click="add">新增</el-button>
<div class="tag-header"> </div>
<el-row> <div class="tree">
<el-col :span="17"> <el-tree class="filter-tree" :data="data" default-expand-all :filter-node-method="filterNode"
<el-input v-model="tagsForm.tags01.name" placeholder="请输入标签一名称" maxlength="20" show-word-limit ref="tree">
@change="(val)=> handleSaveTopTag(val, 1)"></el-input> <span class="custom-tree-node" slot-scope="{ node,data}">
</el-col> <span>{{ node.label }}</span>
<el-col :span="7"><img class="icon-modify" src="@/assets/imgs/icon-modify.png" <span>
alt=""></el-col> <!-- <el-button type="text" @click.stop="add">新建</el-button> -->
</el-row> <el-button type="text" v-if="data.label != '根节点'"
</div> @click.stop="update(node, data)">编辑</el-button>
<div class="tags-content"> <el-button type="text" v-if="data.label != '根节点'"
<el-scrollbar> @click.stop="deleteNode(node, data)">删除</el-button>
<el-row> </span>
<template v-for="(item, index) in tagsForm.tags01.childList"> </span>
<el-col :span="17" :key="'input-' + item.id"> </el-tree>
<!--:disabled="index === 0"--> </div>
<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>
</el-dialog> </el-dialog>
<labelModalVue ref="labelModalVue"></labelModalVue>
<!--报告上传--> <!--报告上传-->
<el-dialog :title="mode === 'modify' ? '报告编辑' : '报告上传'" :visible.sync="dialogReport" width="750px" :close-on-click-modal="false" <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> :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-input v-model="reportF.name" placeholder="请填写" maxlength="100" show-word-limit></el-input>
</el-form-item> </el-form-item>
<el-form-item label="关键词:"> <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>
<el-form-item label="内容摘要:"> <el-form-item label="内容摘要:">
<el-input v-model="reportF.mainContent" placeholder="请填写" type="textarea" <el-input v-model="reportF.mainContent" placeholder="请填写" type="textarea"
@@ -291,7 +187,21 @@
<el-form-item label="报告所属部门:"> <el-form-item label="报告所属部门:">
<el-input v-model="reportF.department" placeholder="请填写" maxlength="100" show-word-limit></el-input> <el-input v-model="reportF.department" placeholder="请填写" maxlength="100" show-word-limit></el-input>
</el-form-item> </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-row type="flex">
<el-col :span="15"> <el-col :span="15">
<el-input v-model="reportF.fileName" disabled placeholder="请上传报告"></el-input> <el-input v-model="reportF.fileName" disabled placeholder="请上传报告"></el-input>
@@ -312,35 +222,15 @@
prefix-icon="null" :picker-options="pickerOptions"/> prefix-icon="null" :picker-options="pickerOptions"/>
</el-form-item> </el-form-item>
<el-form-item label="标签:" required> <el-form-item label="标签:" required>
<el-row :gutter="10" type="flex"> <el-cascader
<el-col :span="8"> width="100%"
<el-select v-model="labelOne" :placeholder="'请选择' + tagsForm.tags01.name" value-key="id" v-model="reportF.label"
@change="(val) => handleSelectTag(val, 1)"> :options="cascaderOptions"
<template v-for="item in tagsForm.tags01.childList"> :props="{ checkStrictly: true }"
<el-option :label="item.name" :value="item" :key="item.id"></el-option> clearable>
</template> </el-cascader>
</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-form-item> </el-form-item>
<el-form-item label="权限:" required> <el-form-item label="权限设置:" required>
<el-select v-model="reportF.reportUserIdList" <el-select v-model="reportF.reportUserIdList"
class="icon-auth" class="icon-auth"
multiple multiple
@@ -348,7 +238,7 @@
@change="changeSelect" @change="changeSelect"
@visible-change="changeSelect" @visible-change="changeSelect"
placeholder="请选择"> 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"> <template v-for="item in userList">
<el-option :label="item.USNAME" :value="item.USID" :key="item.USID"></el-option> <el-option :label="item.USNAME" :value="item.USID" :key="item.USID"></el-option>
</template> </template>
@@ -386,9 +276,14 @@
import {fileType} from '@/utils/fileType' import {fileType} from '@/utils/fileType'
import {downloadFile} from "../../utils/downloadFile"; import {downloadFile} from "../../utils/downloadFile";
import {formatDate} from '@/utils/date' import {formatDate} from '@/utils/date'
import VueTagsInput from '@johmun/vue-tags-input';
import labelModalVue from './reportManager/labelModal.vue';
export default { export default {
name: "ReportManager", name: "ReportManager",
components:{
labelModalVue,
VueTagsInput
},
data() { data() {
return { return {
watermarkText: '', // 水印 watermarkText: '', // 水印
@@ -409,6 +304,64 @@ export default {
doNames: [], doNames: [],
/* =============================================== 标签维护 =============================================== */ /* =============================================== 标签维护 =============================================== */
dialogTags: false, // 标签维护 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: { tagsForm: {
tags01: { tags01: {
name: '', name: '',
@@ -456,11 +409,42 @@ export default {
labelThreeName: '', // 标签3 labelThreeName: '', // 标签3
reportUserIdList: [], // 权限 reportUserIdList: [], // 权限
}, },
tag:'',
tags:[],
labelOne: {}, labelOne: {},
labelTwo: {}, labelTwo: {},
labelThree: {}, labelThree: {},
mode: '', mode: '',
userList: [], 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: { pickerOptions: {
disabledDate(time) { disabledDate(time) {
return time.getFullYear() > new Date().getFullYear() + 1 || time.getFullYear() < new Date().getFullYear() - 10; return time.getFullYear() > new Date().getFullYear() + 1 || time.getFullYear() < new Date().getFullYear() - 10;
@@ -486,7 +470,37 @@ export default {
mulSelecteds: [], // 已选中选项 mulSelecteds: [], // 已选中选项
} }
}, },
//监听标签搜索框
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
methods: { 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() { selectAll() {
this.reportF.reportUserIdList = []; this.reportF.reportUserIdList = [];
@@ -575,13 +589,13 @@ export default {
}, },
/* =============================================== 标签维护 =============================================== */ /* =============================================== 标签维护 =============================================== */
// 标签维护 新增 // 标签维护 新增
addTag(index, type) { // addTag(index, type) {
if (this.tagsForm['tags0' + type].childList.length >= 20) { // if (this.tagsForm['tags0' + type].childList.length >= 20) {
return this.$message.warning("最多添加20个标签"); // return this.$message.warning("最多添加20个标签");
} // }
let itemData = {name: '', id: "", parentId: this.tagsForm['tags0' + type].id, type: String(type)}; // let itemData = {name: '', id: "", parentId: this.tagsForm['tags0' + type].id, type: String(type)};
this.tagsForm['tags0' + type].childList.splice(index + 1, 0, itemData); // this.tagsForm['tags0' + type].childList.splice(index + 1, 0, itemData);
}, // },
// 标签维护 删除 // 标签维护 删除
delTag(index, type) { delTag(index, type) {
let {id, status} = this.tagsForm['tags0' + type].childList[index]; let {id, status} = this.tagsForm['tags0' + type].childList[index];
@@ -738,38 +752,38 @@ export default {
this.reset(); this.reset();
}, },
// 保存标签 // 保存标签
saveTags() { // saveTags() {
let tagsForm = JSON.parse(JSON.stringify(this.tagsForm)); // let tagsForm = JSON.parse(JSON.stringify(this.tagsForm));
let params = { // let params = {
labelList: [ // labelList: [
tagsForm.tags01, // tagsForm.tags01,
tagsForm.tags02, // tagsForm.tags02,
tagsForm.tags03 // tagsForm.tags03
] // ]
} // }
let isSave = true; // let isSave = true;
params.labelList.forEach(item => { // params.labelList.forEach(item => {
if(!item.name || item.name === '-'){ // if(!item.name || item.name === '-'){
isSave = false; // isSave = false;
return // return
} // }
item.childList.forEach(ele => { // item.childList.forEach(ele => {
if(!ele.name || item.name === '-'){ // if(!ele.name || item.name === '-'){
isSave = false; // isSave = false;
return // return
} // }
}) // })
}) // })
if(!isSave){ // if(!isSave){
return this.$message.warning('标签名称不能为空'); // return this.$message.warning('标签名称不能为空');
} // }
this.$api.report.labelSave(params).then(_ => { // this.$api.report.labelSave(params).then(_ => {
this.$message.success('操作成功'); // this.$message.success('操作成功');
this.dialogTags = false; // this.dialogTags = false;
this.labelList(); // this.labelList();
this.reset(); // this.reset();
}) // })
}, // },
/* =============================================== 报告上传 =============================================== */ /* =============================================== 报告上传 =============================================== */
// 打开报告上传 // 打开报告上传
openReportAdd() { openReportAdd() {
@@ -797,45 +811,45 @@ export default {
this.dialogReport = true; this.dialogReport = true;
}, },
// 选择标签 // 选择标签
handleSelectTag(val, type) { // handleSelectTag(val, type) {
switch (type) { // switch (type) {
case 1: // case 1:
this.reportF.labelOneId = val.id; // this.reportF.labelOneId = val.id;
this.reportF.labelOneName = val.name; // this.reportF.labelOneName = val.name;
break; // break;
case 2: // case 2:
this.reportF.labelTwoId = val.id; // this.reportF.labelTwoId = val.id;
this.reportF.labelTwoName = val.name; // this.reportF.labelTwoName = val.name;
break; // break;
case 3: // case 3:
this.reportF.labelThreeId = val.id; // this.reportF.labelThreeId = val.id;
this.reportF.labelThreeName = val.name; // this.reportF.labelThreeName = val.name;
break; // break;
} // }
}, // },
// 必填项 // 必填项
checkReportF() { checkReportF() {
if (!this.reportF.name) { // if (!this.reportF.name) {
return this.$message.warning('请检查报告名称') && false; // return this.$message.warning('请检查报告名称') && false;
} // }
if (!this.reportF.fileId || !this.reportF.fileName) { // if (!this.reportF.fileId || !this.reportF.fileName) {
return this.$message.warning('请检查上传文件') && false; // return this.$message.warning('请检查上传文件') && false;
} // }
if (!this.reportF.year) { // if (!this.reportF.year) {
return this.$message.warning('请检查报告年份') && false; // return this.$message.warning('请检查报告年份') && false;
} // }
if (!this.reportF.labelOneId || !this.reportF.labelOneName || this.reportF.labelOneName === '-' ) { // if (!this.reportF.labelOneId || !this.reportF.labelOneName || this.reportF.labelOneName === '-' ) {
return this.$message.warning(`请检查${this.tagsForm.tags01.name}`) && false; // return this.$message.warning(`请检查${this.tagsForm.tags01.name}`) && false;
} // }
if (!this.reportF.labelTwoId || !this.reportF.labelTwoName || this.reportF.labelTwoName === '-') { // if (!this.reportF.labelTwoId || !this.reportF.labelTwoName || this.reportF.labelTwoName === '-') {
return this.$message.warning(`请检查${this.tagsForm.tags02.name}`) && false; // return this.$message.warning(`请检查${this.tagsForm.tags02.name}`) && false;
} // }
if (!this.reportF.labelThreeId || !this.reportF.labelThreeName || this.reportF.labelThreeName === '-') { // if (!this.reportF.labelThreeId || !this.reportF.labelThreeName || this.reportF.labelThreeName === '-') {
return this.$message.warning(`请检查${this.tagsForm.tags03.name}`) && false; // return this.$message.warning(`请检查${this.tagsForm.tags03.name}`) && false;
} // }
if (!this.reportF.reportUserIdList || !this.reportF.reportUserIdList.length) { // if (!this.reportF.reportUserIdList || !this.reportF.reportUserIdList.length) {
return this.$message.warning('请检查权限') && false; // return this.$message.warning('请检查权限') && false;
} // }
return true; 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 { .dialog-tags {
padding: 11px 33px 0 33px; padding: 11px 33px 0 33px;
@@ -1282,14 +1335,17 @@ export default {
font-weight: 400; font-weight: 400;
color: #434343; color: #434343;
} }
.el-select { .el-select {
width: 100%; width: 100%;
} }
.ti-input{
width: 107.5% !important;
}
.el-cascader{
width: 100%;
}
.el-date-editor { .el-date-editor {
width: 100%; width: 100%;
.el-input__inner { .el-input__inner {
padding-left: 15px; 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>