vue2监听父组件传过来的值
父组件使用的动态组件，然后父传子
<component :is="checkedIt" :riskQuarter='riskQuarter' :riskYear='riskYear'></component>子组件打印
console.log('riskQuarter :>> ', this.$props.riskQuarter);
监听
props: {
riskQuarter: {
type: String,
required: true
},
riskYear: {
type: String,
default: 0
}
},
watch: {
riskYear: function() {
this.getPage();//调列表
},
riskQuarter: function() {
this.getPage();
},
},vue2引入文件外部css文件，这玩意可以结合媒体查询用。@import引入的css会在页面加载完毕后加载
<style lang="scss" scoped>
@import 'report.scss';
</style>设置伪元素作为图标
.setButtonShow::after {
content: "";
position: absolute;
pointer-events: auto;
font-weight: bold;
bottom: -18px;
left: 50%;
font-size: 20px;
background: url(../../../images/down.png) no-repeat left center;
background-size: 100%;
color: var(--mainColor);
display: inline-block;
width: 25px;
height: 20px;
line-height: 20px;
cursor: pointer;
border-radius: 50%;
margin-right: 5px;
margin-left: 5px;
text-align: center;
}实现树形结构数据全选，el-tree全选多个树形，使用elementUi实现
定义data中的值。。。懒得过滤给你们看具体有哪几个了，主要看功能的实现吧
data() {
const that = this;
return {
props: {
label: "name"
},
tree1Data: [],
tree2Data: [],
editCheckOrg: true,
editCheckDep: true,
newCheckOrg: true,
newCheckDep: true,
timeRange: [],
importTime: "",
importlogShow: false,
header: {
Authorization: sessionStorage.getItem("header")
},
editBtnFlag: false,
loginUl: JSON.parse(sessionStorage.getItem("loginUl")),
userName: that.userName,
isRole: false, //打开用户组
loading: true,
missionList: [],
cur: 1, //分页
all: 0,
rows: 15, //条数
totalCount: 0, //总条数
list: {},
searchVal: "", //搜索
gridData: [],
options: "", //地域
value: "",
optionsUnit: "", //单位名称
valueUnit: "",
optionsSubordinate: "", //下级单位
valueSubordinate: "",
checked: false, //全选框状态
checkeds: false,
isHint: false, //删除
deleteId: "",
item: {
name: "确定删除选中的数据吗？"
},
tradeSettingShow: false,
saveLoading: false,
tradeSetting: {},
editSHow: false,
addressId: "",
orgId: "",
deleteIds: "",
editList: "",
addListsj: [],
addListsjs: [],
uploadLoading: false,
addxz: "", //新建 /条线
loginList: { orgId: "" }, //登录信息
departmentName: "", //新建部门
LineList: [
{
name: "业务条线",
id: 2
},
{
name: "品牌条线",
id: 1
}
],
perentAdd: [], //新建/上级部门
unitList: [], //新建/上级单位
prendId: "",
lineVal: "",
type: "",
orgShortNames: "",
num: 1,
parentDepName: "",
orderBy: 0,
unitXID: JSON.parse(localStorage.getItem("loginUl")).orgId,
parentId: "",
parentList: [],
parentName: "",
seeDetail: false,
isAllSign: true,
fileList: [],
fileName: "",
attachmentLists: [],
valueInfo: "",
optionss: [],
receiveDepIds: [],
uniqueArray: [],
optionas: "",
depDetailList: [],
setOrgId: [],
saveItemInfo: {},
optionTime: [
{
value: "",
label: "全部"
},
{
value: 1,
label: "一天"
},
{
value: 7,
label: "一周"
},
{
value: 30,
label: "一月"
},
{
value: -1,
label: "自定义"
}
]
};
},
//获取接口数据后给树形结构全选时的标题命名并赋值子元素
if (this.optionss && this.optionss.length) {
var name = "全部省分公司";
if (this.loginUl.orgParentId == 7) {
name = "全部市分公司";
}
if (this.loginUl.orgParentId != 7 && this.loginUl.orgParentId) {
name = "全部县分公司";
}
this.tree1Data = [{ name: name, children: this.optionss }];
}
默认全选
// 默认是全选，局部也选上
this.isAllSign = true;
this.newCheckOrg = true;
this.newCheckDep = true;
if (this.isAllSign) {
this.valueInfo = [];
this.addxz = [];
this.$nextTick(()=>{
this.$refs.tree1.setCheckedNodes(this.optionss);//获取完接口传给树组件，视觉上
this.valueInfo = this.$refs.tree1.getCheckedKeys();//要给接口的数据赋值
this.$refs.tree2.setCheckedNodes(this.optionas);
this.addxz = this.$refs.tree2.getCheckedKeys();
})
}页面样式与引入的插件-el-tree
<div class="item" style="height:auto;">
<label class="titleLabel"
>可见范围<span class="popRed">*</span></label
>
<div style="width:84%">
<input
type="checkbox"
class="check"
@click="checkAll('新建')"
v-model="isAllSign"
/> 所有人可见
<div style="display: flex;">
<div style="width: 50%;">
<el-tree
ref="tree1"
v-if="tree1Data.length"
node-key="id"
style="min-width: 200px"
:props="props"
show-checkbox
:data="tree1Data"
>
</el-tree>
</div>
<div style="width: 50%;">
<el-tree
ref="tree2"
node-key="id"
style="min-width: 200px"
:props="props"
show-checkbox
:data="tree2Data"
>
</el-tree>
</div>
</div>
</div>
</div> checkAll(type = "") {
if (!this.isAllSign) {
if (type === "新建") {
this.valueInfo = [];
this.addxz = [];
this.$nextTick(() => {
this.$refs.tree1.setCheckedNodes(this.optionss);
this.valueInfo = this.$refs.tree1.getCheckedKeys();
this.$refs.tree2.setCheckedNodes(this.optionas);
this.addxz = this.$refs.tree2.getCheckedKeys();
});
}
} else {
this.valueInfo = [];
this.addxz = [];
this.$nextTick(() => {
this.$refs.tree1.setCheckedNodes([]);
this.$refs.tree2.setCheckedNodes([]);
});
}
},编辑时回显
<div class="item" style="height:auto;">
<label class="titleLabel"
>可见范围<span class="popRed">*</span></label
>
<div style="width:84%">
<input
type="checkbox"
class="check"
v-model="editList.receiveType"
@change="checkAll('编辑')"
/> 所有人可见
<div style="display: flex;">
<div style="width: 50%;">
<el-tree
ref="tree1"
v-if="tree1Data.length"
node-key="id"
style="min-width: 200px"
:props="props"
show-checkbox
:data="tree1Data"
>
</el-tree>
</div>
<div style="width: 50%;">
<el-tree
ref="tree2"
node-key="id"
style="min-width: 200px"
:props="props"
show-checkbox
:data="tree2Data"
>
</el-tree>
</div>
</div>
</div>
</div>点击编辑按钮时的回显
//如果是全选
if (this.editList.receiveType) {
this.editList.orgIds = [];
this.editList.depIds = [];
this.$nextTick(() => {
this.$refs.tree1.setCheckedNodes(this.optionss);
this.editList.orgIds = this.$refs.tree1.getCheckedKeys();
this.$refs.tree2.setCheckedNodes(this.optionas);
this.editList.depIds = this.$refs.tree2.getCheckedKeys();
});
} else {
this.$nextTick(() => {
this.$refs.tree1.setCheckedNodes(this.editList.orgIds);
this.$refs.tree2.setCheckedNodes(this.editList.depIds);
});
}
this.$forceUpdate();方法补充，如果是编辑点击总全选按钮
checkAll(type = "") {
if (type === "新建") {
if (!this.isAllSign) {
this.valueInfo = [];
this.addxz = [];
this.$nextTick(() => {
this.$refs.tree1.setCheckedNodes(this.optionss);
this.valueInfo = this.$refs.tree1.getCheckedKeys();
this.$refs.tree2.setCheckedNodes(this.optionas);
this.addxz = this.$refs.tree2.getCheckedKeys();
});
} else {
this.valueInfo = [];
this.addxz = [];
this.$nextTick(() => {
this.$refs.tree1.setCheckedNodes([]);
this.$refs.tree2.setCheckedNodes([]);
});
}
}
if(type==='编辑'){
if (this.editList.receiveType) {
this.editList.orgIds = [];
this.editList.depIds = [];
this.$nextTick(() => {
this.$refs.tree1.setCheckedNodes(this.optionss);
this.editList.orgIds = this.$refs.tree1.getCheckedKeys();
this.$refs.tree2.setCheckedNodes(this.optionas);
this.editList.depIds = this.$refs.tree2.getCheckedKeys();
});
} else {
this.$nextTick(() => {
this.$refs.tree1.setCheckedNodes([]);
this.$refs.tree2.setCheckedNodes([]);
});
}
}
},提交的时候再次获取记得过滤一下值
this.valueInfo = this.$refs.tree1
.getCheckedKeys()
.filter(item => item !== undefined);
this.addxz = this.$refs.tree2
.getCheckedKeys()
.filter(item => item !== undefined);待完成：如果两个都是全选中，把总全选也勾上
全部代码，有点乱，是整个页面的代码
<template>
<div
class="commentInformationSearch specialA extractCommont extractSearch userControl extractDataMaintenanceSearch"
id="container"
>
<v-header></v-header>
<div class="with90">
<v-sidebar style="width: 14%; float: left"></v-sidebar>
<div style="width: 85%; float: right">
<div class="commentInformationSearchBox">
<h5>
<span>资料下载</span>
</h5>
<transition name="mybox">
<div class="commentInformationSearch box" v-show="boxshow">
<div class="titleLabel col-3">
<label class="titleLabel">标题</label>
<el-input
type="text"
placeholder="输入搜索关键字"
class="col-2"
clearable
v-model="searchVal"
/>
</div>
<div class="titleLabel col-10">
<label class="title">时间范围</label>
<el-radio-group
style="width: 365px;"
v-model="importTime"
size="mini"
>
<el-radio-button
v-for="lab in optionTime"
:key="lab.value"
:label="lab.value"
>{{ lab.label }}</el-radio-button
> </el-radio-group
> <el-date-picker
v-if="importTime == -1"
v-model="timeRange"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
<button class="blue" style="height:30px" @click="search()">
<img src="../../images/search.png" />查询
</button>
</div>
</div>
</transition>
<div class="odd">
<div class="fl">
<!-- 品牌部 -->
<button
v-if="loginUl.depType === 1"
class="green"
@click="addList"
>
上传资料
</button>
<button
v-if="loginUl.depType === 1"
class="green"
title="删除"
@click="delUsers()"
>
删除
</button>
</div>
</div>
</div>
<div class="TableBox">
<div v-loading="loading" v-if="loading" class="loadedTip400"></div>
<table class="table" v-show="!loading">
<thead>
<tr>
<th style="width: 3%">
<input
type="checkbox"
class="check"
@click="allCheck('id')"
v-model="checked"
/>
</th>
<th style="width: 10%">文件名称</th>
<th style="width: 8%">品牌条线</th>
<th style="width: 10%">业务条线</th>
<th style="width: 10%">发布单位</th>
<th class="lead" style="width: 8%">
创建/修改时间
<img
key="1"
v-if="orderBy === 1"
@click="
(orderBy = 0), (missionList = missionList.reverse())
"
src="@/images/positive.png"
alt="倒序"
/>
<img
key="0"
v-if="orderBy === 0"
@click="
(orderBy = 1), (missionList = missionList.reverse())
"
src="@/images/inverted.png"
alt="正序"
/>
</th>
<th style="width: 8%">创建/修改人</th>
<th style="width: 6%">操作</th>
</tr>
</thead>
<tbody v-if="missionList.length > 0">
<tr v-for="missions in missionList" :key="missions.id">
<td>
<input
type="checkbox"
class="check"
:value="missions.id"
@click="addChecked(missions.id, 'id')"
v-model="checkedIds"
/>
</td>
<td
:title="missions.customFileName || missions.defaultFileName"
>
{{ missions.customFileName || missions.defaultFileName }}
</td>
<td :title="missions.mainCount">
<span
@click="seeDetailNow(missions.id, 1)"
style="color:var(--mainColor);cursor: pointer;"
>
{{ missions.mainCount }}</span
>
</td>
<td :title="missions.deputyCount">
<span
@click="seeDetailNow(missions.id, 2)"
style="color:var(--mainColor);cursor: pointer;"
>{{ missions.deputyCount }}</span
>
</td>
<td :title="missions.orgName">
{{ missions.orgName || "暂无" }}
</td>
<td :title="missions.updateTime || missions.createTime">
{{ missions.updateTime || missions.createTime }}
</td>
<td :title="missions.updateUserName || missions.userName">
{{ missions.updateUserName || missions.userName }}
</td>
<td>
<span
v-if="loginUl.depType === 1"
title="编辑"
class="handle edit"
style="cursor: pointer;"
@click="amend(missions)"
></span>
<span
title="下载"
class="handle download"
style="cursor: pointer;"
@click="down(missions)"
></span>
</td>
</tr>
</tbody>
</table>
<div
v-if="missionList.length == 0"
v-show="!loading"
class="noContentPrompt noContentPrompt100"
>
暂无数据
</div>
</div>
<v-pageBox></v-pageBox>
<transition name="el-fade-in-linear">
<Hint
:isHint="isHint"
v-if="isHint"
:item="item"
@close="close"
@ok="ok"
></Hint>
</transition>
<!-- 授权人员明细 -->
<cwDialog
title="授权人员明细"
:visible="seeDetail"
dialogWidth="50%"
@close="seeDetail = false"
>
<div class="form styleSet">
<table class="table" v-show="!loading">
<thead>
<tr>
<th style="width: 8%">单位</th>
<th style="width: 10%">所属条线</th>
<th style="width: 12%">部门</th>
<th style="width: 10%">人员</th>
</tr>
</thead>
<tbody v-if="depDetailList.length > 0">
<tr v-for="missions in depDetailList" :key="missions.id">
<td :title="missions.receiveOrgName">
{{ missions.receiveOrgName }}
</td>
<td :title="missions.depType === 1 ? '品牌条线' : '业务条线'">
{{ missions.depType === 1 ? "品牌条线" : "业务条线" }}
</td>
<td style="border:1px solid #dee6ea;padding: 0;">
<div
:style="
Array.from(missions.receiveDepName.split(',')).length >
1
? 'border-bottom: 1px solid #dee6ea;'
: ''
"
v-for="item in Array.from(
missions.receiveDepName.split(',')
)"
:key="item"
>
<span :title="item" style="text-align: center">{{
item
}}</span>
</div>
</td>
<td style="border:1px solid #dee6ea;padding: 0;">
<div
:style="
Array.from(missions.receiveUserName.split(',')).length >
1
? 'border-bottom: 1px solid #dee6ea;'
: ''
"
v-for="item in Array.from(
missions.receiveUserName.split(',')
)"
:key="item"
>
<span :title="item" style="text-align: center">{{
item
}}</span>
</div>
</td>
</tr>
</tbody>
</table>
<div
v-if="depDetailList.length == 0"
v-show="!loading"
class="noContentPrompt noContentPrompt100"
style="left: 48%;top: 60%;"
>
暂无数据
</div>
</div>
</cwDialog>
<!-- 编辑 -->
<cwDialog
title="编辑"
:visible="tradeSettingShow"
dialogWidth="50%"
@close="tradeSettingShow = false"
>
<div class="form styleSet">
<div
style="display: flex;line-height: 40px;justify-content: space-between;align-items: center;"
>
<label class="titleLabel"
>上传文件<span class="popRed">*</span></label
>
<div style="width:84%">
<el-upload
class="upload"
action="/cbrc/file/upload"
:on-success="upsuccess"
:headers="header"
:on-remove="deletefile"
:before-upload="handleChange"
:file-list="editList.fileList"
:on-exceed="judegLimit"
:limit="1"
ref="upload"
>
<el-button type="primary" class="blue"
>添加文件<i class="el-icon-upload el-icon--right"></i
></el-button>
<div class="upload__tip">
备注：只可上传一个文件，不可上传可执行的文件
</div>
</el-upload>
</div>
</div>
<div class="item">
<label class="titleLabel"
>文件名称<span class="popRed">*</span></label
>
<div style="width:84%">
<el-input
type="text"
placeholder="请输入文件名称"
class="col-2"
v-model="editList.customFileName"
/>
</div>
</div>
<div class="item" style="height:auto;">
<label class="titleLabel"
>可见范围<span class="popRed">*</span></label
>
<div style="width:84%">
<input
type="checkbox"
class="check"
v-model="editList.receiveType"
@change="checkAll('编辑')"
/> 所有人可见
<div style="display: flex;">
<div style="width: 50%;">
<el-tree
ref="tree1"
v-if="tree1Data.length"
node-key="id"
style="min-width: 200px"
:props="props"
show-checkbox
:data="tree1Data"
>
</el-tree>
</div>
<div style="width: 50%;">
<el-tree
ref="tree2"
node-key="id"
style="min-width: 200px"
:props="props"
show-checkbox
:data="tree2Data"
>
</el-tree>
</div>
</div>
</div>
</div>
</div>
<template slot="footer">
<div style="text-align: right">
<el-button class="blue" @click="amend('reset')">重置</el-button>
<el-button
:loading="saveLoading"
class="blues"
type="primary"
@click="saveTradeSetting('set')"
>保存</el-button
>
</div>
</template>
</cwDialog>
<!-- 上传资料 -->
<cwDialog
title="上传资料"
:visible="editSHow"
dialogWidth="50%"
@close="editSHow = false"
>
<div class="form styleSet">
<div
style="display: flex;line-height: 40px;justify-content: space-between;align-items: center;"
>
<label class="titleLabel"
>上传文件<span class="popRed">*</span></label
>
<div style="width:84%">
<el-upload
class="upload"
action="/cbrc/file/upload"
:on-success="upsuccess"
:headers="header"
:on-remove="deletefile"
:before-upload="handleChange"
:file-list="fileList"
:on-exceed="judegLimit"
:limit="1"
ref="upload"
>
<el-button type="primary" class="blue"
>添加文件<i class="el-icon-upload el-icon--right"></i
></el-button>
<div class="upload__tip">
备注：只可上传一个文件，不可上传可执行的文件
</div>
</el-upload>
</div>
</div>
<div class="item">
<label class="titleLabel"
>文件名称<span class="popRed">*</span></label
>
<div style="width:84%">
<el-input
type="text"
placeholder="请输入文件名称"
class="col-2"
v-model="fileName"
/>
</div>
</div>
<div class="item" style="height:auto;">
<label class="titleLabel"
>可见范围<span class="popRed">*</span></label
>
<div style="width:84%">
<input
type="checkbox"
class="check"
@click="checkAll('新建')"
v-model="isAllSign"
/> 所有人可见
<div style="display: flex;">
<div style="width: 50%;">
<el-tree
ref="tree1"
v-if="tree1Data.length"
node-key="id"
style="min-width: 200px"
:props="props"
show-checkbox
:data="tree1Data"
>
</el-tree>
</div>
<div style="width: 50%;">
<el-tree
ref="tree2"
node-key="id"
style="min-width: 200px"
:props="props"
show-checkbox
:data="tree2Data"
>
</el-tree>
</div>
</div>
</div>
</div>
</div>
<template slot="footer">
<div style="text-align: right">
<el-button class="blue" @click="addList">重置</el-button>
<el-button
:loading="saveLoading"
class="blues"
type="primary"
@click="saveTradeSetting"
>保存</el-button
>
</div>
</template>
</cwDialog>
</div>
</div>
<v-footer></v-footer>
</div>
</template>
<script>
import checkMixin from "@/js/checkMisIn.js";
import Hint from "../SystemSetup/poput/Hint.vue";
export default {
components: {
Hint
},
mixins: [checkMixin],
data() {
const that = this;
return {
props: {
label: "name"
},
tree1Data: [],
tree2Data: [],
editCheckOrg: true,
editCheckDep: true,
newCheckOrg: true,
newCheckDep: true,
timeRange: [],
importTime: "",
importlogShow: false,
header: {
Authorization: sessionStorage.getItem("header")
},
editBtnFlag: false,
loginUl: JSON.parse(sessionStorage.getItem("loginUl")),
userName: that.userName,
isRole: false, //打开用户组
loading: true,
missionList: [],
cur: 1, //分页
all: 0,
rows: 15, //条数
totalCount: 0, //总条数
list: {},
searchVal: "", //搜索
gridData: [],
options: "", //地域
value: "",
optionsUnit: "", //单位名称
valueUnit: "",
optionsSubordinate: "", //下级单位
valueSubordinate: "",
checked: false, //全选框状态
checkeds: false,
isHint: false, //删除
deleteId: "",
item: {
name: "确定删除选中的数据吗？"
},
tradeSettingShow: false,
saveLoading: false,
tradeSetting: {},
editSHow: false,
addressId: "",
orgId: "",
deleteIds: "",
editList: "",
addListsj: [],
addListsjs: [],
uploadLoading: false,
addxz: "", //新建 /条线
loginList: { orgId: "" }, //登录信息
departmentName: "", //新建部门
LineList: [
{
name: "业务条线",
id: 2
},
{
name: "品牌条线",
id: 1
}
],
perentAdd: [], //新建/上级部门
unitList: [], //新建/上级单位
prendId: "",
lineVal: "",
type: "",
orgShortNames: "",
num: 1,
parentDepName: "",
orderBy: 0,
unitXID: JSON.parse(localStorage.getItem("loginUl")).orgId,
parentId: "",
parentList: [],
parentName: "",
seeDetail: false,
isAllSign: true,
fileList: [],
fileName: "",
attachmentLists: [],
valueInfo: "",
optionss: [],
receiveDepIds: [],
uniqueArray: [],
optionas: "",
depDetailList: [],
setOrgId: [],
saveItemInfo: {},
optionTime: [
{
value: "",
label: "全部"
},
{
value: 1,
label: "一天"
},
{
value: 7,
label: "一周"
},
{
value: 30,
label: "一月"
},
{
value: -1,
label: "自定义"
}
]
};
},
watch: {
rows: function() {
this.getPage();
},
cur: function() {
this.getPage();
},
importTime: function(val) {
if (val === 0) {
this.timeRange = [];
}
}
},
mounted() {
this.getSelfAndChildren();
console.log("this.userName :>> ", this.userName);
this.addSearch();
this.getPage();
},
methods: {
judegLimit() {
this.fileList.length > 0 ? this.$message.warning("只可上传一个文件") : "";
},
getPage() {
this.$http({
method: "GET",
url: "/cbrc/work/file/queryPageFile",
params: {
pageNo: this.cur,
pageSize: this.rows,
time: this.importTime,
customFileName: this.searchVal,
begin: this.timeRange.length > 0 ? this.timeRange[0] : "",
end: this.timeRange.length > 1 ? this.timeRange[1] : "",
orderBy: "create_time",
order: "asc"
}
}).then(res => {
if (res) {
this.loading = false;
var data = res.data.data;
if (data.totalCount >= 0) {
this.totalCount = data.totalCount;
this.all = Math.ceil(this.totalCount / this.rows);
if (this.orderBy === 0) {
this.missionList = data.result.reverse();
} else {
this.missionList = data.result;
}
}
}
});
this.$http({
method: "GET",
url: "/cbrc/user_center/organization/query/next/children", //全部省分公司
params: {
type: 1
}
}).then(res => {
if (res) {
this.optionss = res.data.data;
if (this.optionss && this.optionss.length) {
var name = "全部省分公司";
if (this.loginUl.orgParentId == 7) {
name = "全部市分公司";
}
if (this.loginUl.orgParentId != 7 && this.loginUl.orgParentId) {
name = "全部县分公司";
}
this.tree1Data = [{ name: name, children: this.optionss }];
}
}
});
},
//查询所属地域
addSearch() {
this.$http({
method: "GET",
url: "/cbrc/user_center/address/list"
}).then(res => {
if (res) {
this.options = res.data.data;
}
});
},
//编辑/ 条线
async editTx(val, i) {
//上级部门
await this.$http({
method: "GET",
url: "/cbrc/user_center/department/query/byOrgId",
params: {
type: val || this.type,
orgId: i || this.orgId
}
}).then(res => {
this.optionas = res.data.data;
this.tree2Data = [{ name: "全部业务条线", children: this.optionas }];
this.perentAdd = res.data.data;
this.$forceUpdate();
});
},
editDw(id) {
this.parentList = JSON.parse(
JSON.stringify(
this.addListsj.filter(function(ele) {
return ele.id === id;
})[0]
)
);
this.editList.parentOrgName = this.parentList.parentName || "暂无";
this.editList.parentId = this.parentList.parentId;
this.$forceUpdate();
},
changeDy() {
this.$http({
method: "GET",
url: "/cbrc/user_center/department/query/byOrgId",
params: {
orgId: this.orgId
}
}).then(res => {
if (res) {
this.optionsUnit = res.data.data;
}
});
},
changeDis(id) {
console.log(id);
},
oneVlue() {},
itemVlue(id) {
this.deleteIds = this.missionList.filter(item => item.id == id)[0].id;
},
//删除
delUsers() {
if (!this.checkedIds.length) return this.$message.warning("请勾选数据");
this.isHint = true;
},
close() {
//删除弹框关闭
this.isHint = false;
},
//确定删除
ok() {
this.$http({
method: "GET",
url: "/cbrc/work/file/delFileByIds",
params: {
idStr: this.checkedIds.join(",")
}
}).then(res => {
if (res) {
this.isHint = false;
this.$message.success("删除成功");
this.getPage();
} else {
this.$message.success("删除失败");
}
});
},
//编辑
async amend(item) {
await this.editTx(2, "");
if (item !== "reset") {
this.saveItemInfo = JSON.parse(JSON.stringify(item));
this.editList = JSON.parse(JSON.stringify(item));
} else {
this.editList = JSON.parse(JSON.stringify(this.saveItemInfo));
}
this.editList.fileList = [
{
name: this.editList.defaultFileName,
url: this.editList.excelPath
// fileLength: this.editList.excelPath
}
];
this.editList.orgIds =
typeof this.editList.depIds === "string" &&
this.editList.orgIds &&
this.editList.orgIds.length
? this.editList.orgIds.split(",")
: this.editList.orgIds;
this.editList.depIds =
typeof this.editList.depIds === "string" &&
this.editList.depIds &&
this.editList.depIds.length
? this.editList.depIds.split(",")
: this.editList.depIds;
if (this.editList.depIds !== "string") {
this.editList.depIds.pop();
}
// 处理全选
this.editList.receiveType = this.editList.receiveType ? true : false;
if (this.editList.receiveType) {
this.editList.orgIds = [];
this.editList.depIds = [];
this.$nextTick(() => {
this.$refs.tree1.setCheckedNodes(this.optionss);
this.editList.orgIds = this.$refs.tree1.getCheckedKeys();
this.$refs.tree2.setCheckedNodes(this.optionas);
this.editList.depIds = this.$refs.tree2.getCheckedKeys();
});
} else {
this.$nextTick(() => {
this.$refs.tree1.setCheckedNodes(this.editList.orgIds);
this.$refs.tree2.setCheckedNodes(this.editList.depIds);
});
}
this.$forceUpdate();
if (!this.tradeSettingShow) this.tradeSettingShow = true;
},
checkAll(type = "") {
if (type === "新建") {
if (!this.isAllSign) {
this.valueInfo = [];
this.addxz = [];
this.$nextTick(() => {
this.$refs.tree1.setCheckedNodes(this.optionss);
this.valueInfo = this.$refs.tree1.getCheckedKeys();
this.$refs.tree2.setCheckedNodes(this.optionas);
this.addxz = this.$refs.tree2.getCheckedKeys();
});
} else {
this.valueInfo = [];
this.addxz = [];
this.$nextTick(() => {
this.$refs.tree1.setCheckedNodes([]);
this.$refs.tree2.setCheckedNodes([]);
});
}
}
if (type === "编辑") {
if (this.editList.receiveType) {
this.editList.orgIds = [];
this.editList.depIds = [];
this.$nextTick(() => {
this.$refs.tree1.setCheckedNodes(this.optionss);
this.editList.orgIds = this.$refs.tree1.getCheckedKeys();
this.$refs.tree2.setCheckedNodes(this.optionas);
this.editList.depIds = this.$refs.tree2.getCheckedKeys();
});
} else {
this.$nextTick(() => {
this.$refs.tree1.setCheckedNodes([]);
this.$refs.tree2.setCheckedNodes([]);
});
}
}
},
//新建
async addList() {
await this.editTx(2, "");
this.attachmentLists = [];
this.fileList = [];
this.fileName = "";
this.valueInfo = [];
this.addxz = [];
// 默认是全选，局部也选上
this.isAllSign = true;
this.newCheckOrg = true;
this.newCheckDep = true;
if (this.isAllSign) {
this.valueInfo = [];
this.addxz = [];
this.$nextTick(() => {
this.$refs.tree1.setCheckedNodes(this.optionss);
this.valueInfo = this.$refs.tree1.getCheckedKeys();
this.$refs.tree2.setCheckedNodes(this.optionas);
this.addxz = this.$refs.tree2.getCheckedKeys();
});
}
if (!this.editSHow) this.editSHow = true;
},
async getFileNameRepeatStatus(id, name) {
let status = false;
await this.$http({
method: "POST",
url: "/cbrc/work/file/checkFile",
data: { customFileName: name, id: id }
}).then(res => {
const { data, code } = res.data;
if (code == 200) {
if (data.length > 0) {
status = true;
}
}
});
return status;
},
//保存
async saveTradeSetting(res) {
let query = {};
let depIds = [];
let orgIds = [];
if (res === "set") {
if (!this.editList || this.editList.length < 1)
return this.$message.warning("请上传文件后再保存");
if (!this.editList.customFileName)
return this.$message.warning("请填写文件名称");
if (
await this.getFileNameRepeatStatus(
this.editList.id,
this.editList.customFileName
)
)
return this.$message.warning(
"该文件名称与之前创建的数据重复，请重新填写"
);
this.editList.orgIds = this.$refs.tree1
.getCheckedKeys()
.filter(item => item !== undefined);
this.editList.depIds = this.$refs.tree2
.getCheckedKeys()
.filter(item => item !== undefined);
if (
!this.editList.receiveType &&
(!this.editList.orgIds || this.editList.orgIds.length < 1) &&
(!this.editList.depIds || this.editList.depIds.length < 1)
)
return this.$message.warning("请填写可见范围");
// 全选
if (this.editList.receiveType) {
const firm = this.optionss.map(item => item.id);
const line = this.optionas.map(item => item.id);
depIds = [...line, this.loginUl.depId];
orgIds = firm && firm.length ? firm.join(",") : "";
} else {
// 机构/单位
if (
!(typeof this.editList.orgIds === "string") &&
this.editList.orgIds &&
this.editList.orgIds.length
) {
orgIds = this.editList.orgIds.join(",");
} else {
orgIds = "";
}
// 部门,传参顺带把本人的部门id给到
if (this.editList.depIds && this.editList.depIds.length) {
depIds = [...this.editList.depIds, this.loginUl.depId];
}
}
// 转成接口要的Array<number>类型
depIds = depIds.map(item => Number(item));
query = {
id: this.editList.id,
defaultFileName: this.editList.defaultFileName,
customFileName: this.editList.customFileName,
excelPath: this.editList.fileList[0].url,
// fileLength: this.editList.fileList[0].fileLength,// 可以不传，要传得转成kb
receiveDepIds: depIds,
orgIds: orgIds,
receiveType: this.editList.receiveType ? 1 : 0
};
} else {
if (!this.attachmentLists || this.attachmentLists.length < 1)
return this.$message.warning("请上传文件后再保存");
if (!this.fileName) return this.$message.warning("请填写文件名称");
if (await this.getFileNameRepeatStatus("", this.fileName))
return this.$message.warning(
"该文件名称与之前创建的数据重复，请重新填写"
);
this.valueInfo = this.$refs.tree1
.getCheckedKeys()
.filter(item => item !== undefined);
this.addxz = this.$refs.tree2
.getCheckedKeys()
.filter(item => item !== undefined);
if (
!this.isAllSign &&
(!this.valueInfo || this.valueInfo.length < 1) &&
(!this.addxz || this.addxz.length < 1)
)
return this.$message.warning("请填写可见范围");
if (this.isAllSign) {
const firm = this.optionss.map(item => item.id);
const line = this.optionas.map(item => item.id);
depIds = [...line, this.loginUl.depId];
orgIds = firm && firm.length ? firm.join(",") : "";
} else {
// 机构/单位
if (this.valueInfo && this.valueInfo.length) {
orgIds = this.valueInfo.join(",");
}
// 部门,传参顺带把本人的部门id给到
if (this.addxz && this.addxz.length) {
depIds = [...this.addxz, this.loginUl.depId];
}
}
depIds = depIds.map(item => Number(item));
query = {
id: "",
defaultFileName: this.fileList[0].name,
customFileName: this.fileName,
excelPath: this.fileList[0].url,
// fileLength: this.attachmentLists[0].response.data[0].fileSize,// 可以不传，要传得转成kb
receiveDepIds: depIds,
orgIds: orgIds,
receiveType: this.isAllSign ? 1 : 0
};
}
this.saveLoading = true;
this.$http({
method: "POST",
url: "/cbrc/work/file/saveOrUpdateFile",
data: query
})
.then(response => {
if (!response) return this.$message.error("保存出错");
res === "set"
? this.$message.success("编辑成功")
: this.$message.success("上传成功");
this.getPage();
this.editSHow = false;
this.tradeSettingShow = false;
})
.finally(() => {
this.saveLoading = false;
if (res === "openNew") {
this.addList();
}
});
},
//新建/单位
addUnits(val) {
this.parentList = JSON.parse(
JSON.stringify(
this.addListsj.filter(function(ele) {
return ele.id === val;
})[0]
)
);
this.parentName = this.parentList.parentName || "暂无";
this.parentId = this.parentList.parentId;
this.$forceUpdate();
},
//新建/条线
addXzvalue(e) {
// this.uniqueArrays = this.uniqueArray.concat(...e);
// this.uniqueArrays.push(151);
// //上级部门
// this.$http({
// method: "GET",
// url: "/cbrc/user_center/department/query/byOrgId",
// params: {
// type: this.addxz[0],
// orgId: this.orgId
// }
// }).then(res => {
// this.perentAdd = res.data.data;
// });
},
//新建/上级部门
prentChange() {
console.log(this.prendId.toString());
},
//搜索
search() {
this.cur = 1;
this.getPage();
},
//批量导出
batchExport() {
if (!this.checkedIds.length) return this.$message.warning("请勾选数据");
var token = sessionStorage.getItem("header");
window.location.href =
"/cbrc/user_center/department/export?token=" +
token +
"&ids=" +
this.checkedIds.join(",");
},
//下载导入模板
downloadTemplate() {
window.open("http://123.57.88.10:9000/template/department_template.xls");
},
upsuccess() {
this.uploadLoading = false;
this.$message.success("导入成功");
this.getPage();
},
onError() {
this.uploadLoading = false;
this.$message.error("导入失败");
},
beforeUpload() {
this.uploadLoading = true;
},
// 获取自身和上级部门信息
getSelfAndChildren() {
this.$http({
method: "GET",
url: "/cbrc/user_center/organization/query/selfAndChildren"
}).then(res => {
if (res) {
this.addListsj = res.data.data;
}
});
},
//下载
down(mission) {
// window.open("http://123.57.88.10:9000/template"+mission.excelPath);
// this.$http({
// method: 'get',
// url: '/cbrc/file/getTokenUrl?url='+mission.excelPath
// }).then(res=>{if(res){
// const urls = res.data.data;
window.open(
"/cbrc" + mission.excelPath + "?name=" + mission.customFileName
);
// }
// })
},
upsuccess(response, file, fileList) {
if (response.code == 200) {
this.attachmentLists = fileList;
this.attachmentLists[0].response.data.forEach(item => {
this.fileList.push({
name: item.attachName,
url: item.attachPath
});
});
this.fileName = this.fileList[0].name;
console.log(this.fileList);
} else {
this.$message.error("附件添加失败");
}
},
//附件删除
deletefile(file, fileList) {
if (this.clones) {
this.attachmentLists = fileList;
if (file.response) {
this.$http({
method: "GET",
url: "/cbrc/file/del?filePath=" + url
}).then(res => {
if (res) {
this.fileList = [];
this.fileName = "";
this.$message.success("删除成功");
}
});
}
return;
}
var url = "";
if (file.url) {
url = file.url;
} else {
url = file.response.data[0].attachPath;
}
this.$http({
method: "GET",
url: "/cbrc/file/del?filePath=" + url
}).then(res => {
if (res) {
this.fileList = [];
this.fileName = "";
this.attachmentLists = fileList;
this.$message.success("删除成功");
}
});
},
handleChange(file, fileList) {
var size = file.size / 1024 / 1024;
if (size > 10) {
this.$message.warning("上传文件大小不能大于10M");
return false;
}
},
changeValue(e) {
// var arr = [];
// e.forEach((item, index) => {
// arr.push(this.optionss.filter(item => item.id == e[index]));
// });
// arr.map((item, index) => {
// if (item[0].departmentList[0]) {
// return this.receiveDepIds.push(item[0].departmentList[0].id);
// }
// });
// this.uniqueArray = this.receiveDepIds.filter((item, index, array) => {
// return array.indexOf(item) === index;
// });
},
seeDetailNow(id, typeId) {
this.loading = true;
this.depDetailList = [];
// typeId品牌部1/业务部2
this.$http({
method: "POST",
url: "/cbrc/work/file/queryFileInfoCountId",
data: {
depType: typeId,
id: id
}
}).then(res => {
if (res) {
this.depDetailList = res.data.data;
}
});
this.loading = false;
this.seeDetail = true;
}
}
};
</script>
<style lang="less" scoped>
.col {
display: inline !important;
}
.blue {
cursor: pointer;
min-width: 80px;
color: #fff;
font-size: 14px;
border-radius: 6px !important;
}
.blues {
min-width: 80px;
height: 38px;
color: #fff;
font-size: 14px;
border-radius: 6px !important;
}
.green {
float: right !important;
}
.fl {
width: 100% !important;
margin: 6px 0 !important;
}
.popRed {
color: red;
}
.el-cascader {
width: 100%;
}
.extractDataMaintenanceSearch .odd .fl button {
margin-bottom: 0px;
}
.setTb {
border: none;
}
.lead {
position: relative;
img {
position: absolute;
width: 25px;
bottom: 25px;
cursor: pointer;
}
}
.styleSet {
.item {
height: 40px;
line-height: 40px;
display: flex;
justify-content: space-between;
.el-input,
.el-select,
.el-cascader,
.col-1-1 {
width: 80%;
}
}
}
.upload {
position: relative;
margin-bottom: 8px;
}
.upload__tip {
position: absolute;
top: 2px;
left: 150px;
font-size: 12px;
}
tr {
border: 1px solid #dee6ea;
}
</style>
<style lang="scss">
.specialA {
.el-upload {
display: inline !important;
}
.el-select {
width: auto;
}
.el-upload-list__item-name:hover {
color: var(--mainColor) !important;
}
}
</style>
使用es6的filter过滤数组的数据
this.valueInfo = this.$refs.tree1.getCheckedKeys().filter(item => {
if (item!==undefined) return item;
});
//简写
this.valueInfo = this.$refs.tree1.getCheckedKeys().filter(item => item!==undefined);
