Skip to content

N
national_museum_vod
Commit 7b19e994 authored by Your Name's avatar Your Name
Browse files
Options

地图不见、机构管理

parent 6904ac15
Hide whitespace changes
Inline Side-by-side
Showing with 1693 additions and 1687 deletions
src/page/accounts/unitAdmin.vue
View file @ 7b19e994
......@@ -12,9 +12,9 @@
></el-input>
</el-form-item>
<el-form-item>
<el-select
<el-select
v-model="form.orgId"
filterable
filterable
placeholder="请选择所属单位"
clearable>
<el-option
......
src/page/content/display/content/index.vue
View file @ 7b19e994
<template>
<div class="content-list-page H100">
<msg-dialog ref="msgDialog" :msgInfo="msgInfo" />
<div class="search-container">
<el-form :inline="true" :model="form" onsubmit="return false;">
<el-form-item >
<el-input
placeholder="请输入展板名称"
v-model="form.nameOrCode"
@keyup.enter.native="onSearch"
clearable
></el-input>
</el-form-item>
<el-form-item >
<el-date-picker
value-format="yyyy-MM-dd"
v-model="form.dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item >
<el-select v-model="form.boardCopyrightOwnerId" placeholder="请选择展板版权方">
<el-option
v-for="item in copyRightList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item >
<el-select v-model="form.exhibitionBoardCatId" placeholder="请选择展板分类">
<el-option
v-for="item in classifyList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<div class="btn-group">
<el-button size="mini" type="primary" class="btn_form_search" @click="onSearch">查询</el-button>
<el-button size="mini" class="btn_form_search" @click="Reset">重置</el-button>
</div>
</el-form-item>
</el-form>
<div class="page-tip">
<span class="page-tip-title">页面说明:</span>
<span class="page-tips">可通过展板名称、创建时间对展板信息进行快速检索。可对展板进行上架、下架、删除、修改及查看展板详情等操作。已上架展板需先下架才能删除。</span>
</div>
</div>
<div class="table-content">
<div class="btn-group">
<el-button type="primary" @click="addPermis()">新建展板</el-button>
</div>
<div class="party-table">
<el-table
border
style="width: 100%;height:100%"
height="100%"
ref="multipleTable"
:data="tableData"
>
<el-table-column type="index" width="120" label="序号"><template slot-scope="scope">
<span>{{ (page._index - 1) * 10 + scope.$index + 1 }}</span>
</template></el-table-column>
<el-table-column show-overflow-tooltip label="展板名称" prop="name"></el-table-column>
<el-table-column show-overflow-tooltip label="展板版权方" prop="boardCopyrightOwnerName"></el-table-column>
<el-table-column label="展板分类" prop="exhibitionBoardCatName"></el-table-column>
<el-table-column show-overflow-tooltip label="展板简介" prop="remarks"></el-table-column>
<el-table-column label="关联视频名称" prop="videoContentName"></el-table-column>
<el-table-column label="视频版权方" prop="videoContentCopyrightOwnerName"></el-table-column>
<el-table-column label="创建时间" prop="createTime"></el-table-column>
<el-table-column label="审核状态" prop="auditStatus">
<template slot-scope="scope">
<span v-if="scope.row.auditStatus === 'TBC'">待初审</span>
<span v-else-if="scope.row.auditStatus === 'REFUSED'">已驳回</span>
<span v-else-if="scope.row.auditStatus === 'TBCA'">待复审</span>
<span v-else-if="scope.row.auditStatus === 'APPROVED_FINAL'">通过</span>
</template>
</el-table-column>
<el-table-column label="是否上架" prop="published">
<template slot-scope="scope">
<span v-if="scope.row.published">是</span>
<span v-else>否</span>
</template>
</el-table-column>
<el-table-column label="操作" width="280" header-align="center" align="center">
<!-- 只有下架可编辑、删除,只有通过可上架、下架 -->
<template slot-scope="scope" >
<div class="table-btn-group">
<el-tooltip content="修改" placement="top">
<el-button circle :disabled="(scope.row.published)||(scope.row.auditStatus === 'TBC')||(scope.row.auditStatus === 'TBCA')" @click="openEdit(scope.row)">
<i class="icon-table icon-edit"></i>
</el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button circle :disabled="(scope.row.published)||(scope.row.auditStatus === 'TBC')||(scope.row.auditStatus === 'TBCA')" @click="handleDelete(scope.row)">
<i class="icon-table icon-del"></i>
</el-button>
</el-tooltip>
<el-tooltip content="上架" placement="top">
<el-button circle :disabled="(scope.row.auditStatus === 'TBC')||(scope.row.auditStatus === 'TBCA')" v-show="!scope.row.published" @click="handlePublish(scope.row,true)">
<i class="icon-table icon-enable"></i>
</el-button>
</el-tooltip>
<el-tooltip content="下架" placement="top">
<el-button circle :disabled="(scope.row.auditStatus === 'TBC')||(scope.row.auditStatus === 'TBCA')" v-show="scope.row.published" @click="handlePublish(scope.row,false)">
<i class="icon-table icon-disable"></i>
</el-button>
</el-tooltip>
<el-tooltip content="详情" placement="top">
<el-button circle @click="displayInfo(scope.row)">
<i class="icon-table icon-detail"></i>
</el-button>
</el-tooltip>
</div>
</template>
</el-table-column>
</el-table>
</div>
<party-pagination :page="page" @changePage="handleCurrentChange" />
</div>
</div>
</template>
<script>
import msgDialog from "@/page/content/components/msgDialog.vue";
import { partyPagination } from "@/components/index";
export default {
components: { partyPagination ,msgDialog},
data() {
return {
msgInfo: {},
page: { _index: 1, _size: 10, total: 0 },
tableData: [],
formLabelWidth: "100px",
form: {
dateRange:[]
},
copyRightList: [],
classifyList: [],
};
},
mounted() {
this.onSearch();
this.getCopyRightList()
this.getClassifyList()
},
methods: {
getCopyRightList(){
let vm = this;
let param = {
copyrightOwnerType: 'EXHIBITION_BOARD'
};
vm.$https(
{
url: "copyrightOwner/getList",
method: "get",
authType: this.backToken,
},param)
.then((res) => {
if (res.data.resultCode === "200") {
this.copyRightList = res.data.data
} else {
this.$message.error(res.data.message)
}
})
.catch(function (err) {
console.log(err)
});
},
getClassifyList(){
let vm = this;
vm.$https(
{
url: "exhibitionBoardCat/getList",
method: "post",
authType: this.backToken,
})
.then((res) => {
if (res.data.resultCode === "200") {
this.classifyList = res.data.data
} else {
this.$message.error(res.data.message)
}
})
.catch(function (err) {
console.log(err)
});
},
onSearch() {
this.page._index = 1;
this.getTableData();
},
// 获得数据接口
getTableData() {
let vm = this;
const param ={
_index: this.page._index,
_size: this.page._size,
nameOrCode: this.form.nameOrCode,
boardCopyrightOwnerId:this.form.boardCopyrightOwnerId,
exhibitionBoardCatId:this.form.exhibitionBoardCatId,
startDate: this.form.dateRange.length ? this.form.dateRange[0] : "",
endDate: this.form.dateRange.length ? this.form.dateRange[1] : "",
};
vm.$https(
{
url: "exhibitionBoard/getPageList",
method: "post",
authType: this.backToken
},
vm.$qs.stringify(param)
)
.then(res => {
let data = res.data.data;
vm.page.total = data.total;
vm.tableData = data.records;
})
.catch(function(err) {
console.log(err);
});
},
// 分页
handleCurrentChange(val) {
this.page._index = val;
this.getTableData();
},
// 重置
Reset() {
this.form = {dateRange:[]};
this.onSearch();
},
// 添加
addPermis() {
this.$router.push({ path: "displayContentAdd", query: { type: "add" } });
},
displayInfo(row) {
this.$router.push({
path: "displayContentDetails",
query: { id: row.id, }
});
},
// 编辑弹框
openEdit(row) {
this.$router.push({
path: "displayContentUpdate",
query: { type: "Update", id: row.id }
});
},
// 删除
handleDelete(row) {
let _this = this;
this.$confirm("此操作将永久删除, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
_this
.$https({
method: "delete",
url: "exhibitionBoard/delete/" + row.id,
authType: this.backToken
})
.then(
res => {
if(res.data.resultCode === "200"){
this.$message({ type: "success", message: "删除视频申请已提交,待审核！" });
_this.onSearch();
}else{
this.$message({ type: "error", message: res.data.message });
}
},
error => {
this.$message({
type: "error",
message: "删除失败!" + error.response.data
});
}
);
})
.catch(() => {});
},
// 上下架
handlePublish(row ,isPublish) {
let _isPublish = isPublish
let _this = this;
_this
.$https({
method: "put",
url: "exhibitionBoard/publish/" + row.id,
authType: this.backToken
},
_this.$qs.stringify({isPublish:isPublish}))
.then(
res => {
if(res.data.resultCode === "200"){
if(_isPublish){
this.$message({ type: "success", message: "上架申请已提交,待审核！" });
}else{
this.$message({ type: "success", message: "下架申请已提交,待审核！" });
}
_this.onSearch();
}else{
this.$message({ type: "error", message: res.data.message });
}
_this.onSearch();
},
error => {
this.$message({
type: "error",
message: "失败!" + error.response.data
});
}
);
},
}
};
</script>
<style lang="less">
@import "../../../../style/table.less";
.content-list-page {
.search-container {
height: 160px;
}
.table-content {
height: calc(100% - 180px);
}
}
</style>
<template>
<div class="content-list-page H100">
<msg-dialog ref="msgDialog" :msgInfo="msgInfo" />
<div class="search-container">
<el-form :inline="true" :model="form" onsubmit="return false;">
<el-form-item >
<el-input
placeholder="请输入展板名称"
v-model="form.nameOrCode"
@keyup.enter.native="onSearch"
clearable
></el-input>
</el-form-item>
<el-form-item >
<el-date-picker
value-format="yyyy-MM-dd"
v-model="form.dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item >
<el-select v-model="form.boardCopyrightOwnerId" placeholder="请选择展板版权方">
<el-option
v-for="item in copyRightList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item >
<el-select v-model="form.exhibitionBoardCatId" placeholder="请选择展板分类">
<el-option
v-for="item in classifyList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<div class="btn-group">
<el-button size="mini" type="primary" class="btn_form_search" @click="onSearch">查询</el-button>
<el-button size="mini" class="btn_form_search" @click="Reset">重置</el-button>
</div>
</el-form-item>
</el-form>
<div class="page-tip">
<span class="page-tip-title" style='width:80px'>页面说明:</span>
<span class="page-tips">可通过展板名称、创建时间对展板信息进行快速检索。可对展板进行上架、下架、删除、修改及查看展板详情等操作。已上架展板需先下架才能删除。</span>
</div>
</div>
<div class="table-content">
<div class="btn-group">
<el-button type="primary" @click="addPermis()">新建展板</el-button>
</div>
<div class="party-table">
<el-table
border
style="width: 100%;height:100%"
height="100%"
ref="multipleTable"
:data="tableData"
>
<el-table-column type="index" width="120" label="序号"><template slot-scope="scope">
<span>{{ (page._index - 1) * 10 + scope.$index + 1 }}</span>
</template></el-table-column>
<el-table-column show-overflow-tooltip label="展板名称" prop="name"></el-table-column>
<el-table-column show-overflow-tooltip label="展板版权方" prop="boardCopyrightOwnerName"></el-table-column>
<el-table-column label="展板分类" prop="exhibitionBoardCatName"></el-table-column>
<el-table-column show-overflow-tooltip label="展板简介" prop="remarks"></el-table-column>
<el-table-column label="关联视频名称" prop="videoContentName"></el-table-column>
<el-table-column label="视频版权方" prop="videoContentCopyrightOwnerName"></el-table-column>
<el-table-column label="创建时间" prop="createTime"></el-table-column>
<el-table-column label="审核状态" prop="auditStatus">
<template slot-scope="scope">
<span v-if="scope.row.auditStatus === 'TBC'">待初审</span>
<span v-else-if="scope.row.auditStatus === 'REFUSED'">已驳回</span>
<span v-else-if="scope.row.auditStatus === 'TBCA'">待复审</span>
<span v-else-if="scope.row.auditStatus === 'APPROVED_FINAL'">通过</span>
</template>
</el-table-column>
<el-table-column label="是否上架" prop="published">
<template slot-scope="scope">
<span v-if="scope.row.published">是</span>
<span v-else>否</span>
</template>
</el-table-column>
<el-table-column label="操作" width="280" header-align="center" align="center">
<!-- 只有下架可编辑、删除,只有通过可上架、下架 -->
<template slot-scope="scope" >
<div class="table-btn-group">
<el-tooltip content="修改" placement="top">
<el-button circle :disabled="(scope.row.published)||(scope.row.auditStatus === 'TBC')||(scope.row.auditStatus === 'TBCA')" @click="openEdit(scope.row)">
<i class="icon-table icon-edit"></i>
</el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button circle :disabled="(scope.row.published)||(scope.row.auditStatus === 'TBC')||(scope.row.auditStatus === 'TBCA')" @click="handleDelete(scope.row)">
<i class="icon-table icon-del"></i>
</el-button>
</el-tooltip>
<el-tooltip content="上架" placement="top">
<el-button circle :disabled="(scope.row.auditStatus === 'TBC')||(scope.row.auditStatus === 'TBCA')" v-show="!scope.row.published" @click="handlePublish(scope.row,true)">
<i class="icon-table icon-enable"></i>
</el-button>
</el-tooltip>
<el-tooltip content="下架" placement="top">
<el-button circle :disabled="(scope.row.auditStatus === 'TBC')||(scope.row.auditStatus === 'TBCA')" v-show="scope.row.published" @click="handlePublish(scope.row,false)">
<i class="icon-table icon-disable"></i>
</el-button>
</el-tooltip>
<el-tooltip content="详情" placement="top">
<el-button circle @click="displayInfo(scope.row)">
<i class="icon-table icon-detail"></i>
</el-button>
</el-tooltip>
</div>
</template>
</el-table-column>
</el-table>
</div>
<party-pagination :page="page" @changePage="handleCurrentChange" />
</div>
</div>
</template>
<script>
import msgDialog from "@/page/content/components/msgDialog.vue";
import { partyPagination } from "@/components/index";
export default {
components: { partyPagination ,msgDialog},
data() {
return {
msgInfo: {},
page: { _index: 1, _size: 10, total: 0 },
tableData: [],
formLabelWidth: "100px",
form: {
dateRange:[]
},
copyRightList: [],
classifyList: [],
};
},
mounted() {
this.onSearch();
this.getCopyRightList()
this.getClassifyList()
},
methods: {
getCopyRightList(){
let vm = this;
let param = {
copyrightOwnerType: 'EXHIBITION_BOARD'
};
vm.$https(
{
url: "copyrightOwner/getList",
method: "get",
authType: this.backToken,
},param)
.then((res) => {
if (res.data.resultCode === "200") {
this.copyRightList = res.data.data
} else {
this.$message.error(res.data.message)
}
})
.catch(function (err) {
console.log(err)
});
},
getClassifyList(){
let vm = this;
vm.$https(
{
url: "exhibitionBoardCat/getList",
method: "post",
authType: this.backToken,
})
.then((res) => {
if (res.data.resultCode === "200") {
this.classifyList = res.data.data
} else {
this.$message.error(res.data.message)
}
})
.catch(function (err) {
console.log(err)
});
},
onSearch() {
this.page._index = 1;
this.getTableData();
},
// 获得数据接口
getTableData() {
let vm = this;
const param ={
_index: this.page._index,
_size: this.page._size,
nameOrCode: this.form.nameOrCode,
boardCopyrightOwnerId:this.form.boardCopyrightOwnerId,
exhibitionBoardCatId:this.form.exhibitionBoardCatId,
startDate: this.form.dateRange.length ? this.form.dateRange[0] : "",
endDate: this.form.dateRange.length ? this.form.dateRange[1] : "",
};
vm.$https(
{
url: "exhibitionBoard/getPageList",
method: "post",
authType: this.backToken
},
vm.$qs.stringify(param)
)
.then(res => {
let data = res.data.data;
vm.page.total = data.total;
vm.tableData = data.records;
})
.catch(function(err) {
console.log(err);
});
},
// 分页
handleCurrentChange(val) {
this.page._index = val;
this.getTableData();
},
// 重置
Reset() {
this.form = {dateRange:[]};
this.onSearch();
},
// 添加
addPermis() {
this.$router.push({ path: "displayContentAdd", query: { type: "add" } });
},
displayInfo(row) {
this.$router.push({
path: "displayContentDetails",
query: { id: row.id, }
});
},
// 编辑弹框
openEdit(row) {
this.$router.push({
path: "displayContentUpdate",
query: { type: "Update", id: row.id }
});
},
// 删除
handleDelete(row) {
let _this = this;
this.$confirm("此操作将永久删除, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
_this
.$https({
method: "delete",
url: "exhibitionBoard/delete/" + row.id,
authType: this.backToken
})
.then(
res => {
if(res.data.resultCode === "200"){
this.$message({ type: "success", message: "删除视频申请已提交,待审核！" });
_this.onSearch();
}else{
this.$message({ type: "error", message: res.data.message });
}
},
error => {
this.$message({
type: "error",
message: "删除失败!" + error.response.data
});
}
);
})
.catch(() => {});
},
// 上下架
handlePublish(row ,isPublish) {
let _isPublish = isPublish
let _this = this;
_this
.$https({
method: "put",
url: "exhibitionBoard/publish/" + row.id,
authType: this.backToken
},
_this.$qs.stringify({isPublish:isPublish}))
.then(
res => {
if(res.data.resultCode === "200"){
if(_isPublish){
this.$message({ type: "success", message: "上架申请已提交,待审核！" });
}else{
this.$message({ type: "success", message: "下架申请已提交,待审核！" });
}
_this.onSearch();
}else{
this.$message({ type: "error", message: res.data.message });
}
_this.onSearch();
},
error => {
this.$message({
type: "error",
message: "失败!" + error.response.data
});
}
);
},
}
};
</script>
<style lang="less">
@import "../../../../style/table.less";
.content-list-page {
.search-container {
height: 160px;
}
.table-content {
height: calc(100% - 180px);
}
}
</style>
src/page/content/display/copyright/index.vue
View file @ 7b19e994
<template>
<div class="listPage H100">
<div class="search-container">
<el-form
:inline="true"
:model="form"
ref="form"
onsubmit="return false;"
>
<el-form-item >
<el-input
placeholder="请输入版权方名称"
v-model="form.nameOrCode"
@keyup.enter.native="onSearch"
clearable
></el-input>
</el-form-item>
<el-form-item >
<el-date-picker
value-format="yyyy-MM-dd"
v-model="form.dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<div class="btn-group">
<el-button
type="primary"
class="btn_form_search"
@click="onSearch"
>查询</el-button
>
<el-button class="btn_form_search" @click="Reset">重置</el-button
>
</div>
</el-form-item>
</el-form>
<div class="page-tip">
<span class="page-tip-title">页面说明:</span>
<span class="page-tips"
>可对展板版权方信息进行筛选、修改及删除。可新建版权方信息</span
>
</div>
</div>
<div class="table-content">
<div class="btn-group">
<el-button type="primary" @click="addPermis()">新建版权方</el-button>
</div>
<div class="party-table">
<el-table
border
style="width: 100%; height: 100%"
height="100%"
ref="multipleTable"
:data="tableData"
>
<el-table-column
type="index"
width="120"
label="序号"
><template slot-scope="scope">
<span>{{ (page._index - 1) * 10 + scope.$index + 1 }}</span>
</template></el-table-column>
<el-table-column label="版权方名称" prop="name"></el-table-column>
<el-table-column
label="展板分类"
prop="boardCatNames"
></el-table-column>
<el-table-column label="创建时间" prop="createTime"></el-table-column>
<el-table-column
label="版权方有效期"
prop="expireDateEnd"
width="200"
>
<template slot-scope="scope"
>{{ scope.row.expireDateStart }} 至
{{ scope.row.expireDateEnd }}</template
>
</el-table-column>
<el-table-column label="备注" prop="remarks"></el-table-column>
<el-table-column label="操作" header-align="center" align="center">
<template slot-scope="scope" width="220">
<div class="table-btn-group">
<el-tooltip content="修改" placement="top">
<el-button circle @click="openEdit(scope.row)">
<i class="icon-table icon-edit"></i>
</el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button circle @click="handleDelete(scope.row)">
<i class="icon-table icon-del"></i>
</el-button>
</el-tooltip>
</div>
</template>
</el-table-column>
</el-table>
</div>
<party-pagination :page="page" @changePage="handleCurrentChange" />
</div>
<!--新增弹框-->
<el-dialog
:title="type?'新建版权方':'编辑版权方'"
custom-class="party-dialog"
width="468px"
:visible.sync="FormVisible"
:before-close="close"
>
<div class="dialog-content">
<el-form
:model="classForm"
ref="classForm"
label-width="80px"
label-position="top"
:rules="rule"
id="ruleo"
class="party-form"
>
<el-form-item label="版权方名称" prop="name">
<el-input oninput="value = value.trim()" v-model="classForm.name"></el-input>
</el-form-item>
<el-form-item label="版权方有效期" prop="valueDate">
<el-date-picker
value-format="yyyy-MM-dd"
v-model="classForm.valueDate"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="classForm.remarks"></el-input>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer btn-group">
<el-button size="mini" v-show="type" type="primary" @click="permisSave"
>确定</el-button
>
<el-button size="mini" v-show="!type" type="primary" @click="permisEdit"
>确定</el-button
>
<el-button size="mini" @click="close">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { partyPagination } from "@/components/index";
export default {
components: { partyPagination },
data() {
return {
type: true,
page: { _index: 1, _size: 10, total: 0 },
tableData: [],
FormVisible: false,
formLabelWidth: "100px",
form: {
dateRange:[]
},
classForm: {
ownerType: "EXHIBITION_BOARD",
valueDate: [],
},
rule: {
name: [
{ required: true, message: "请输入展板分类名称", trigger: "blur" },
{ min: 1, max: 20, message: "请输入1到20个字" },
],
valueDate: [
{ required: true, message: "请选择版权方有效期", trigger: "change" },
]
},
value: "",
name: "",
};
},
computed: {},
mounted() {
this.onSearch();
},
methods: {
onSearch() {
this.page._index = 1;
this.getTableData();
},
// 获得数据接口
getTableData() {
let vm = this;
let param = {
_index: this.page._index,
_size: this.page._size,
nameOrCode:this.form.nameOrCode,
ownerType: "EXHIBITION_BOARD",
startDate: this.form.dateRange.length ? this.form.dateRange[0] : "",
endDate: this.form.dateRange.length ? this.form.dateRange[1] : "",
};
vm.$https(
{
url: "copyrightOwner/getPageList",
method: "post",
authType: this.backToken,
},
vm.$qs.stringify(param)
)
.then((res) => {
let data = res.data.data;
vm.page.total = data.total;
vm.tableData = data.records;
})
.catch(function (err) {
console.log(err);
});
},
// 分页
handleCurrentChange(val) {
this.page._index = val;
this.getTableData();
},
// 重置
Reset() {
this.form = { dateRange:[]};
this.onSearch();
},
// 添加
addPermis() {
this.$router.push({ path: "displayCopyrightAdd", query: { type: "add" } });
// this.FormVisible = true;
// this.type = true;
// this.classForm = {
// ownerType: "EXHIBITION_BOARD",
// valueDate: [],
// }
},
// 新建视频分类确认保存
permisSave() {
let _this = this;
_this.$refs.classForm.validate((valid) => {
if (valid) {
const params ={
name: this.classForm.name,
remarks: this.classForm.remarks,
ownerType: "EXHIBITION_BOARD",
expireDateEnd : this.classForm.valueDate.length ? this.classForm.valueDate[1] : "",
expireDateStart : this.classForm.valueDate.length ? this.classForm.valueDate[0] : ""
}
_this
.$https(
{
url: "copyrightOwner/save",
method: "post",
authType: this.backToken,
},
_this.$qs.stringify(params)
)
.then(
(res) => {
if (res.data.resultCode === '200') {
_this.$message.success("新建成功！");
//跳回用户列表
_this.onSearch();
_this.close()
} else {
_this.$message.error(res.data.msg);
}
},
(error) => {
_this.$message({
type: "error",
message: error,
});
}
);
}
});
},
// 编辑视频分类确认保存
permisEdit() {
let _this = this;
_this.$refs.classForm.validate((valid) => {
if (valid) {
this.classForm.ownerType = "EXHIBITION_BOARD";
this.classForm.expireDateEnd = this.classForm.valueDate.length ? this.classForm.valueDate[1] : "";
this.classForm.expireDateStart = this.classForm.valueDate.length ? this.classForm.valueDate[0] : "";
delete this.classForm.valueDate
_this
.$https(
{
url: "copyrightOwner/update",
method: "put",
authType: this.backToken,
},
_this.$qs.stringify(_this.classForm)
)
.then(
(res) => {
if (res.data.resultCode === '200') {
_this.$message.success("修改成功！");
//跳回用户列表
_this.onSearch();
_this.close()
} else {
_this.$message.error(res.data.msg);
}
},
(error) => {
_this.$message({
type: "error",
message: error,
});
}
);
}
});
},
// 关闭
close() {
this.FormVisible = false;
this.classForm = {
ownerType: "EXHIBITION_BOARD",
valueDate: [],
}
this.$refs["classForm"].clearValidate();
this.$refs["classForm"].resetFields();
},
// 编辑弹框
openEdit(row) {
this.$router.push({
path: "displayCopyrightUpdate",
query: { type: "Update", id: row.id }
});
// this.type = false;
// this.FormVisible = true;
// this.classForm = JSON.parse(JSON.stringify(row));
// this.classForm.valueDate =[row.expireDateStart,row.expireDateEnd]
// this.classForm = {...this.classForm}
},
// 删除
handleDelete(row) {
let _this = this;
this.$confirm("此操作将永久删除, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
_this
.$https({
method: "delete",
url: "copyrightOwner/delete/" + row.id,
authType: this.backToken,
})
.then(
(res) => {
this.$message({ type: "success", message: "删除成功!" });
_this.onSearch();
},
(error) => {
this.$message({
type: "error",
message: "删除失败!" + error.response.data,
});
}
);
})
.catch(() => {});
},
},
};
</script>
<style lang="less">
@import "../../../../style/table.less";
</style>
<template>
<div class="listPage H100">
<div class="search-container">
<el-form
:inline="true"
:model="form"
ref="form"
onsubmit="return false;"
>
<el-form-item >
<el-input
placeholder="请输入版权方名称"
v-model="form.nameOrCode"
@keyup.enter.native="onSearch"
clearable
></el-input>
</el-form-item>
<el-form-item >
<el-date-picker
value-format="yyyy-MM-dd"
v-model="form.dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<div class="btn-group">
<el-button
type="primary"
class="btn_form_search"
@click="onSearch"
>查询</el-button
>
<el-button class="btn_form_search" @click="Reset">重置</el-button
>
</div>
</el-form-item>
</el-form>
<div class="page-tip">
<span class="page-tip-title">页面说明:</span>
<span class="page-tips"
>可对展板版权方信息进行筛选、修改及删除。可新建版权方信息</span
>
</div>
</div>
<div class="table-content">
<div class="btn-group">
<el-button type="primary" @click="addPermis()">新建版权方</el-button>
</div>
<div class="party-table">
<el-table
border
style="width: 100%; height: 100%"
height="100%"
ref="multipleTable"
:data="tableData"
>
<el-table-column
type="index"
width="120"
label="序号"
><template slot-scope="scope">
<span>{{ (page._index - 1) * 10 + scope.$index + 1 }}</span>
</template></el-table-column>
<el-table-column label="版权方名称" prop="name"></el-table-column>
<el-table-column
label="展板分类"
prop="boardCatNames"
></el-table-column>
<el-table-column label="创建时间" prop="createTime"></el-table-column>
<el-table-column
label="版权方有效期"
prop="expireDateEnd"
width="200"
>
<template slot-scope="scope"
>{{ scope.row.expireDateStart }} 至
{{ scope.row.expireDateEnd }}</template
>
</el-table-column>
<el-table-column label="备注" prop="remarks"></el-table-column>
<el-table-column label="操作" header-align="center" align="center">
<template slot-scope="scope" width="220">
<div class="table-btn-group">
<el-tooltip content="修改" placement="top">
<el-button circle @click="openEdit(scope.row)">
<i class="icon-table icon-edit"></i>
</el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button circle @click="handleDelete(scope.row)">
<i class="icon-table icon-del"></i>
</el-button>
</el-tooltip>
</div>
</template>
</el-table-column>
</el-table>
</div>
<party-pagination :page="page" @changePage="handleCurrentChange" />
</div>
<!--新增弹框-->
<el-dialog
:title="type?'新建版权方':'编辑版权方'"
custom-class="party-dialog"
width="468px"
:visible.sync="FormVisible"
:before-close="close"
>
<div class="dialog-content">
<el-form
:model="classForm"
ref="classForm"
label-width="80px"
label-position="top"
:rules="rule"
id="ruleo"
class="party-form"
>
<el-form-item label="版权方名称" prop="name">
<el-input oninput="value = value.trim()" v-model="classForm.name"></el-input>
</el-form-item>
<el-form-item label="版权方有效期" prop="valueDate">
<el-date-picker
value-format="yyyy-MM-dd"
v-model="classForm.valueDate"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="classForm.remarks"></el-input>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer btn-group">
<el-button size="mini" v-show="type" type="primary" @click="permisSave"
>确定</el-button
>
<el-button size="mini" v-show="!type" type="primary" @click="permisEdit"
>确定</el-button
>
<el-button size="mini" @click="close">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { partyPagination } from "@/components/index";
export default {
components: { partyPagination },
data() {
return {
type: true,
page: { _index: 1, _size: 10, total: 0 },
tableData: [],
FormVisible: false,
formLabelWidth: "100px",
form: {
dateRange:[]
},
classForm: {
ownerType: "EXHIBITION_BOARD",
valueDate: [],
},
rule: {
name: [
{ required: true, message: "请输入展板分类名称", trigger: "blur" },
{ min: 1, max: 20, message: "请输入1到20个字" },
],
valueDate: [
{ required: true, message: "请选择版权方有效期", trigger: "change" },
]
},
value: "",
name: "",
};
},
computed: {},
mounted() {
this.onSearch();
},
methods: {
onSearch() {
this.page._index = 1;
this.getTableData();
},
// 获得数据接口
getTableData() {
let vm = this;
let param = {
_index: this.page._index,
_size: this.page._size,
nameOrCode:this.form.nameOrCode,
ownerType: "EXHIBITION_BOARD",
startDate: this.form.dateRange.length ? this.form.dateRange[0] : "",
endDate: this.form.dateRange.length ? this.form.dateRange[1] : "",
};
vm.$https(
{
url: "copyrightOwner/getPageList",
method: "post",
authType: this.backToken,
},
vm.$qs.stringify(param)
)
.then((res) => {
let data = res.data.data;
vm.page.total = data.total;
vm.tableData = data.records;
})
.catch(function (err) {
console.log(err);
});
},
// 分页
handleCurrentChange(val) {
this.page._index = val;
this.getTableData();
},
// 重置
Reset() {
this.form = { dateRange:[]};
this.onSearch();
},
// 添加
addPermis() {
this.$router.push({ path: "displayCopyrightAdd", query: { type: "add" } });
// this.FormVisible = true;
// this.type = true;
// this.classForm = {
// ownerType: "EXHIBITION_BOARD",
// valueDate: [],
// }
},
// 新建视频分类确认保存
permisSave() {
let _this = this;
_this.$refs.classForm.validate((valid) => {
if (valid) {
const params ={
name: this.classForm.name,
remarks: this.classForm.remarks,
ownerType: "EXHIBITION_BOARD",
expireDateEnd : this.classForm.valueDate.length ? this.classForm.valueDate[1] : "",
expireDateStart : this.classForm.valueDate.length ? this.classForm.valueDate[0] : ""
}
_this
.$https(
{
url: "copyrightOwner/save",
method: "post",
authType: this.backToken,
},
_this.$qs.stringify(params)
)
.then(
(res) => {
if (res.data.resultCode === '200') {
_this.$message.success("新建成功！");
//跳回用户列表
_this.onSearch();
_this.close()
} else {
_this.$message.error(res.data.msg);
}
},
(error) => {
_this.$message({
type: "error",
message: error,
});
}
);
}
});
},
// 编辑视频分类确认保存
permisEdit() {
let _this = this;
_this.$refs.classForm.validate((valid) => {
if (valid) {
this.classForm.ownerType = "EXHIBITION_BOARD";
this.classForm.expireDateEnd = this.classForm.valueDate.length ? this.classForm.valueDate[1] : "";
this.classForm.expireDateStart = this.classForm.valueDate.length ? this.classForm.valueDate[0] : "";
delete this.classForm.valueDate
_this
.$https(
{
url: "copyrightOwner/update",
method: "put",
authType: this.backToken,
},
_this.$qs.stringify(_this.classForm)
)
.then(
(res) => {
if (res.data.resultCode === '200') {
_this.$message.success("修改成功！");
//跳回用户列表
_this.onSearch();
_this.close()
} else {
_this.$message.error(res.data.msg);
}
},
(error) => {
_this.$message({
type: "error",
message: error,
});
}
);
}
});
},
// 关闭
close() {
this.FormVisible = false;
this.classForm = {
ownerType: "EXHIBITION_BOARD",
valueDate: [],
}
this.$refs["classForm"].clearValidate();
this.$refs["classForm"].resetFields();
},
// 编辑弹框
openEdit(row) {
this.$router.push({
path: "displayCopyrightUpdate",
query: { type: "Update", id: row.id }
});
// this.type = false;
// this.FormVisible = true;
// this.classForm = JSON.parse(JSON.stringify(row));
// this.classForm.valueDate =[row.expireDateStart,row.expireDateEnd]
// this.classForm = {...this.classForm}
},
// 删除
handleDelete(row) {
let _this = this;
this.$confirm("此操作将永久删除, 是否继续?", "提示",{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
_this
.$https({
method: "delete",
url: "copyrightOwner/delete/" + row.id,
authType: this.backToken,
})
.then(
(res) => {
this.$message({ type: "success", message: "删除成功!" });
_this.onSearch();
},
(error) => {
this.$message({
type: "error",
message: "删除失败!" + error.response.data,
});
}
);
})
.catch(() => {});
},
},
};
</script>
<style lang="less">
@import "../../../../style/table.less";
</style>
src/page/statistics/components/maps copy.vue
View file @ 7b19e994
<template>
<div id="mapDiv"></div>
</template>
<script>
// import "echarts/map/js/china";
import echarts from 'echarts'
import { chinaJson } from "@/map/china";
echarts.registerMap("china", chinaJson);
export default {
name: "maps",
data() {
return {
dataList: [],
};
},
mounted() {
this.getList();
},
methods: {
getList() {
this.$https({
method: "post",
url: "tBoardStatistic/getBoardProvincePlayTotalList",
authType: this.backToken,
})
.then((res) => {
if (res.status == 200) {
if (res.data.resultCode == 200) {
this.dataList = res.data.data;
} else {
this.dataList = [];
}
} else {
this.dataList = [];
}
this.init();
})
.catch((err) => {
this.$message.error(err.message);
this.init();
});
},
init() {
let option = {
tooltip: {
triggerOn: "click",
formatter: function (e, t, n) {
return 0.5 == e.value
? e.name + "：播放量"
: e.seriesName + "<br />" + e.name + "：" + e.value;
},
},
visualMap: [
{
dimension: 0,
right: 20,
bottom: 20,
itemWidth: 16,
itemHeight: "200px",
orient: "horizontal",
text: ["由高到低", "播放量"],
backgroundColor: "rgba(0,28,66,0.6)",
padding: [15, 10],
textStyle: {
color: "rgba(255,255,255,1)",
},
inRange: {
color: ["#9B1E23", "#E72128", "#FB8D1F", "#FFCF4E"],
},
},
],
geo: {
map: "china",
roam: !1,
scaleLimit: {
min: 1,
max: 2,
},
roam: true, //是否开启平游或缩放
scaleLimit: {
//滚轮缩放的极限控制
min: 1,
max: 2,
},
zoom: 1,
top: 100,
left: "10%",
label: {
normal: {
show: !0,
fontSize: "12",
color: "#fff",
},
},
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)",
},
emphasis: {
areaColor: "#f2d5ad",
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 0,
},
},
regions: [
{
name: "南海诸岛",
itemStyle: {
// 隐藏地图
normal: {
opacity: 0, // 为 0 时不绘制该图形
},
},
label: {
show: false, // 隐藏文字
},
},
],
},
series: [
{
name: "播放量",
type: "map",
geoIndex: 0,
data: this.dataList,
},
],
};
let echartsDiv = this.$echarts.init(document.getElementById("mapDiv"));
echartsDiv.setOption(option);
},
},
};
</script>
<style lang="less">
#mapDiv {
width: 100%;
height: 100%;
}
</style>
<template>
<div id="mapDiv"></div>
</template>
<script>
// import "echarts/map/js/china";
import echarts from 'echarts'
import { chinaJson } from "@/map/china";
echarts.registerMap("china", chinaJson);
export default {
name: "maps",
data() {
return {
dataList: [],
};
},
mounted() {
this.getList();
},
methods: {
getList() {
this.$https({
method: "post",
url: "tBoardStatistic/getBoardProvincePlayTotalList",
authType: this.backToken,
})
.then((res) => {
if (res.status == 200) {
if (res.data.resultCode == 200) {
this.dataList = res.data.data;
} else {
this.dataList = [];
}
} else {
this.dataList = [];
}
this.init();
})
.catch((err) => {
this.$message.error(err.message);
this.init();
});
},
init() {
let option = {
tooltip: {
triggerOn: "click",
formatter: function (e, t, n) {
return 0.5 == e.value
? e.name + "：播放量"
: e.seriesName + "<br />" + e.name + "：" + e.value;
},
},
visualMap: [
{
dimension: 0,
right: 20,
bottom: 20,
itemWidth: 16,
itemHeight: "200px",
orient: "horizontal",
text: ["由高到低", "播放量"],
backgroundColor: "rgba(0,28,66,0.6)",
padding: [15, 10],
textStyle: {
color: "rgba(255,255,255,1)",
},
inRange: {
color: ["#9B1E23", "#E72128", "#FB8D1F", "#FFCF4E"],
},
},
],
geo: {
map: "china",
roam: !1,
scaleLimit: {
min: 1,
max: 2,
},
roam: true, //是否开启平游或缩放
scaleLimit: {
//滚轮缩放的极限控制
min: 1,
max: 2,
},
zoom: 1,
top: 100,
left: "10%",
label: {
normal: {
show: !0,
fontSize: "12",
color: "#fff",
},
},
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)",
},
emphasis: {
areaColor: "#f2d5ad",
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 0,
},
},
regions: [
{
name: "南海诸岛",
itemStyle: {
// 隐藏地图
normal: {
opacity: 0, // 为 0 时不绘制该图形
},
},
label: {
show: false, // 隐藏文字
},
},
],
},
series: [
{
name: "播放量",
type: "map",
geoIndex: 0,
data: this.dataList,
},
],
};
let echartsDiv = this.$echarts.init(document.getElementById("mapDiv"));
echartsDiv.setOption(option);
},
},
};
</script>
<style lang="less">
#mapDiv {
width: 100%;
height: 100%;
}
</style>
src/page/statistics/components/maps.vue
View file @ 7b19e994
<template>
<div class="map-box">
<div id="map-box">
<span id="back" v-if="parentInfo.length !== 1" @click="handleBack()"
>返回</span
>
......@@ -118,14 +118,15 @@ export default {
map: this.parentInfo.length === 1 ? "china" : "map",
roam: !1,
roam: true, //是否开启平游或缩放
scaleLimit: {
//滚轮缩放的极限控制
min: 1
},
// scaleLimit: {
// //滚轮缩放的极限控制
// min: 1
// },
zoom: 1.1,
top: 100,
left: "20%",
top: 110,
bottom:0,
left: "24%",
label: {
normal: {
show: !0,
......@@ -159,6 +160,10 @@ export default {
},
},
},
emphasis: {
// color: "#ffffff",
show: true,
},
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)",
......@@ -195,7 +200,7 @@ export default {
],
};
let echartsDiv = this.$echarts.init(document.getElementById("mapDiv"));
echartsDiv.setOption(option);
echartsDiv.setOption(option, true);
echartsDiv.on("click", this.echartsMapClick);
},
handleBack() {
......@@ -262,7 +267,7 @@ export default {
</script>
<style lang="less">
.map-box {
#map-box {
width: 100%;
height: 100%;
#back {
......
src/page/statistics/overview.vue
View file @ 7b19e994
<template>
<div class="overview-wrapper height100">
<div class="middel-part">
<!--地区展板播放统计-->
<areas class="table-list"></areas>
<!--中间地图-->
<div class="map-container">
<borderNums></borderNums>
<mapDiv></mapDiv>
</div>
<!--全国点播板块-->
<top10 class="table-list"></top10>
</div>
<div class="echartspanel">
<div class="echarts-box left">
<demand class="echarts-panel"></demand>
</div>
<div class="echarts-box right">
<interact class="echarts-panel"></interact>
</div>
</div>
</div>
</template>
<script>
import {
demand,
interact,
areas,
top10,
mapDiv,
borderNums
} from './components'
export default {
data(){
return {
}
},
components:{demand, interact , areas, top10, mapDiv, borderNums},
}
</script>
<style lang="less" scoped>
.overview-wrapper{
.middel-part{
display: flex;
height: 50vh;
justify-content: space-between;
overflow:hidden;
.table-list{
width: 25vw;
height: 100%;
background: @party-white;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);
border-radius: 8px;
padding: 20px;
}
.map-container{
position: relative;
width: calc(100% - 50vw);
height: 100%;
}
}
/deep/ .common-title{
.icon-title{
width: 20px;
vertical-align: middle;
}
.title{
font-weight: 500;
font-size: 20px;
color: @font-color;
line-height: 20px;
vertical-align: middle;
margin-left: 12px;
}
.bg{
width: 100%;
}
}
//列表
.table-list{
/deep/.list-of-body{
height: calc(100% - 50px);
box-sizing: border-box;
ul{
display: flex;
align-items: flex-start;
font-size: 16px;
padding-left: 20px;
box-sizing: border-box;
li{
line-height: 40px;
&.f1{
width: 10%;
}
&.f2{
width: 20%;
}
&.f3{
width: 30%;
}
&.f5{
width: 50%;
}
&.f6{
width: 60%;
}
&.f7{
width: 70%;
}
div.title{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 10px;
}
}
}
.body-title{
color: @font-color;
}
.body-content{
height: calc(100% - 40px);
overflow-y: hidden;
.body-item{
height: 40px;
background-color: @party-bg-gray;
margin-bottom: 3px;
color: @font-color;
}
}
}
}
// echarts 样式
.echartspanel{
height: calc(100% - 50vh);
padding-top: 20px;
.echarts-box{
height: 100%;
width: 50%;
display: inline-block;
box-sizing: border-box;
&.left{
padding-right: 10px;
float: left;
}
&.right{
padding-left: 10px;
float: right;
}
.echarts-panel{
background:@party-white;
border: 1px solid #FFFFFF;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);
border-radius: 8px;
height: 100%;
padding: 20px;
}
}
}
}
<template>
<div class="overview-wrapper height100">
<div class="middel-part">
<!--地区展板播放统计-->
<areas class="table-list"></areas>
<!--中间地图-->
<div class="map-container">
<borderNums></borderNums>
<mapDiv></mapDiv>
</div>
<!--全国点播板块-->
<top10 class="table-list"></top10>
</div>
<div class="echartspanel">
<div class="echarts-box left">
<demand class="echarts-panel"></demand>
</div>
<div class="echarts-box right">
<interact class="echarts-panel"></interact>
</div>
</div>
</div>
</template>
<script>
import {
demand,
interact,
areas,
top10,
mapDiv,
borderNums
} from './components'
export default {
data(){
return {
}
},
components:{demand, interact , areas, top10, mapDiv, borderNums},
}
</script>
<style lang="less" scoped>
.overview-wrapper{
.middel-part{
display: flex;
height: 50vh;
justify-content: space-between;
overflow:hidden;
.table-list{
width: 25vw;
height: 100%;
background: @party-white;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);
border-radius: 8px;
padding: 20px;
}
.map-container{
position: relative;
width: calc(100% - 50vw);
height: 100%;
}
}
/deep/ .common-title{
.icon-title{
width: 20px;
vertical-align: middle;
}
.title{
font-weight: 500;
font-size: 20px;
color: @font-color;
line-height: 20px;
vertical-align: middle;
margin-left: 12px;
}
.bg{
width: 100%;
}
}
//列表
.table-list{
/deep/.list-of-body{
height: calc(100% - 50px);
box-sizing: border-box;
ul{
display: flex;
align-items: flex-start;
font-size: 16px;
padding-left: 20px;
box-sizing: border-box;
li{
line-height: 40px;
&.f1{
width: 10%;
}
&.f2{
width: 20%;
}
&.f3{
width: 30%;
}
&.f5{
width: 50%;
}
&.f6{
width: 60%;
}
&.f7{
width: 70%;
}
div.title{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 10px;
}
}
}
.body-title{
color: @font-color;
}
.body-content{
height: calc(100% - 40px);
overflow-y: hidden;
.body-item{
height: 40px;
background-color: @party-bg-gray;
margin-bottom: 3px;
color: @font-color;
}
}
}
}
// echarts 样式
.echartspanel{
height: calc(100% - 50vh);
padding-top: 20px;
.echarts-box{
height: 100%;
width: 50%;
display: inline-block;
box-sizing: border-box;
&.left{
padding-right: 10px;
float: left;
}
&.right{
padding-left: 10px;
float: right;
}
.echarts-panel{
background:@party-white;
border: 1px solid #FFFFFF;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);
border-radius: 8px;
height: 100%;
padding: 20px;
}
}
}
}
</style>
\ No newline at end of file
src/page/system/orgDialog/edit.vue
View file @ 7b19e994
<template>
<div>
<el-dialog
custom-class="party-dialog"
title="编辑机构"
:visible.sync="dialogVisible"
width="550px"
:before-close="handleClose"
>
<div class="dialog-content">
<el-form
ref="form"
:rules="rules"
:model="form"
label-width="80px"
label-position="top"
class="party-form"
>
<el-form-item label="父级节点:">
<el-input v-model="form.parentName" readonly></el-input>
<div style="float: right">
<el-button @click="handlefocus" round>修改</el-button>
<el-button @click="form.parentName = ''" round>重置</el-button>
</div>
<!-- <el-button @click="handlefocus" round>修改</el-button> -->
</el-form-item>
<el-form-item label="机构名称:" prop="name">
<el-input
v-model="form.name"
placeholder="请填写"
clearable
oninput="value = value.trim()"
></el-input>
</el-form-item>
<el-form-item label="机构地理位置:" prop="areaId">
<el-cascader
v-model="form.areaId"
change-on-select
:props="cascaderProps"
:options="areaOptions"
>
</el-cascader>
</el-form-item>
<el-form-item label="备注">
<el-input
v-model="form.remarks"
type="textarea"
placeholder="请输入"
></el-input>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer btn-group">
<el-button @click="handleCancle()">取 消</el-button>
<el-button type="primary" @click="handleSubmit()" :disabled="disabled"
>确 定</el-button
>
</div>
</el-dialog>
<org-trees
ref="orgTree"
:treeData="treeData"
@selected="handleSelectParent"
>
</org-trees>
</div>
</template>
<script>
import { getAreas } from "@/config/area";
import orgTrees from "./orgTree";
export default {
data() {
return {
dialogVisible: false,
form: {
name: "",
areaId: [],
remarks: "",
parentId: "",
parentName: "",
},
disabled: false,
areaOptions: [],
cascaderProps: {
label: "name",
value: "code",
checkStrictly: true,
},
rules: {
name: [
{ required: true, message: "请输入机构名称", trigger: "change" },
{ min: 1, max: 20, message: "请输入1到20个字" },
],
areaId: [
{ required: true, message: "请选择地理位置", trigger: "change" },
],
},
};
},
components: { orgTrees },
props: {
currentInfo: {
type: Object,
default: () => {
return {};
},
},
treeData: {
type: Array,
default: () => {
return [];
},
},
},
mounted() {
getAreas().then((res) => {
this.areaOptions = res;
});
},
methods: {
handlefocus() {
this.$refs.orgTree.dialogVisible = true;
},
handleSelectParent(parentData) {
this.form.parentId = parentData.id;
this.form.parentName = parentData.name;
},
// 弹窗关闭
handleClose() {
this.$confirm("确认关闭？")
.then((_) => {
this.handleReset();
})
.catch((_) => {});
},
handleReset() {
this.dialogVisible = false;
this.$refs.form.resetFields();
this.form = {
name: "",
areaId: [],
remarks: "",
parentId: "",
parentName: "",
};
},
handleCancle() {
this.handleClose();
},
handleSubmit() {
// 校验用户输入值
this.$refs.form.validate((valid) => {
if (valid) {
let params = {};
params.name = this.form.name;
params.areaId = [...this.form.areaId].pop();
params.remarks = this.form.remarks;
params.parentId = this.form.parentName ? this.form.parentId : "";
params.id = this.currentInfo.id;
let requestparams = this.$qs.stringify(params);
this.$https(
{
method: "put",
url: "organ/update",
authType: this.backToken,
},
requestparams
)
.then((res) => {
this.handleReset();
if (res.status == 200) {
if (res.data.resultCode == 200) {
this.$message({
type: "success",
message: res.data.message,
});
this.$emit("success", true);
} else {
this.$message.error(res.data.message);
// this.$emit("success", false);
}
} else {
this.$message.error(res.data);
// this.$emit("success", false);
}
})
.catch((err) => {
console.log(err);
});
} else {
return false;
}
});
},
},
watch: {
currentInfo() {
this.form = {
name: this.currentInfo.name,
areaId: this.currentInfo.areas,
remarks: this.currentInfo.remarks,
parentId: this.currentInfo.parentId,
parentName: this.currentInfo.parentName,
};
},
},
};
</script>
<style lang="less" scoped>
<template>
<div>
<el-dialog
custom-class="party-dialog"
title="编辑机构"
:visible.sync="dialogVisible"
width="550px"
:before-close="handleClose"
>
<div class="dialog-content">
<el-form
ref="form"
:rules="rules"
:model="form"
label-width="80px"
label-position="top"
class="party-form"
>
<el-form-item label="父级节点:">
<el-input v-model="form.parentName" readonly></el-input>
<div style="float: right">
<el-button @click="handlefocus" round>修改</el-button>
<el-button @click="form.parentName = ''" round>重置</el-button>
</div>
<!-- <el-button @click="handlefocus" round>修改</el-button> -->
</el-form-item>
<el-form-item label="机构名称:" prop="name">
<el-input
v-model="form.name"
placeholder="请填写"
clearable
oninput="value = value.trim()"
></el-input>
</el-form-item>
<el-form-item label="机构地理位置:" prop="areaId">
<el-cascader
v-model="form.areaId"
change-on-select
:props="cascaderProps"
:options="areaOptions"
>
</el-cascader>
</el-form-item>
<el-form-item label="备注">
<el-input
v-model="form.remarks"
type="textarea"
placeholder="请输入"
></el-input>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer btn-group">
<el-button @click="handleCancle()">取 消</el-button>
<el-button type="primary" @click="handleSubmit()" :disabled="disabled"
>确 定</el-button
>
</div>
</el-dialog>
<org-trees
ref="orgTree"
:treeData="treeData"
@selected="handleSelectParent"
>
</org-trees>
</div>
</template>
<script>
import { getAreas } from "@/config/area";
import orgTrees from "./orgTree";
export default {
data() {
return {
dialogVisible: false,
form: {
name: "",
areaId: [],
remarks: "",
parentId: "",
parentName: "",
},
disabled: false,
areaOptions: [],
cascaderProps: {
label: "name",
value: "code",
checkStrictly: true,
},
rules: {
name: [
{ required: true, message: "请输入机构名称", trigger: "change" },
{ min: 1, max: 20, message: "请输入1到20个字" },
],
areaId: [
{ required: true, message: "请选择地理位置", trigger: "change" },
],
},
};
},
components: { orgTrees },
props: {
currentInfo: {
type: Object,
default: () => {
return {};
},
},
treeData: {
type: Array,
default: () => {
return [];
},
},
},
created() {
getAreas().then((res) => {
this.areaOptions = res;
});
},
methods: {
handlefocus() {
this.$refs.orgTree.dialogVisible = true;
},
handleSelectParent(parentData) {
this.form.parentId = parentData.id;
this.form.parentName = parentData.name;
},
// 弹窗关闭
handleClose() {
this.$confirm("确认关闭？")
.then((_) => {
this.handleReset();
})
.catch((_) => {});
},
handleReset() {
this.dialogVisible = false;
this.$refs.form.resetFields();
this.form = {
name: "",
areaId: [],
remarks: "",
parentId: "",
parentName: "",
};
},
handleCancle() {
this.handleClose();
},
handleSubmit() {
// 校验用户输入值
this.$refs.form.validate((valid) => {
if (valid) {
let params = {};
params.name = this.form.name;
params.areaId = [...this.form.areaId].pop();
params.remarks = this.form.remarks;
params.parentId = this.form.parentName ? this.form.parentId : "";
params.id = this.currentInfo.id;
let requestparams = this.$qs.stringify(params);
this.$https(
{
method: "put",
url: "organ/update",
authType: this.backToken,
},
requestparams
)
.then((res) => {
this.handleReset();
if (res.status == 200) {
if (res.data.resultCode == 200) {
this.$message({
type: "success",
message: res.data.message,
});
this.$emit("success", true);
} else {
this.$message.error(res.data.message);
// this.$emit("success", false);
}
} else {
this.$message.error(res.data);
// this.$emit("success", false);
}
})
.catch((err) => {
console.log(err);
});
} else {
return false;
}
});
},
},
watch: {
currentInfo() {
this.form = {
name: this.currentInfo.name,
areaId: this.currentInfo.areas,
remarks: this.currentInfo.remarks,
parentId: this.currentInfo.parentId,
parentName: this.currentInfo.parentName,
};
},
},
};
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
src/page/system/organ.vue
View file @ 7b19e994
<template>
<div class="oran-wrapper height100">
<div class="org-tree-container">
<div class="org-tree-box">
<div class="org-tree-box-header">组织结构</div>
<div class="org-tree-box-content">
<div class="tree-search party-form">
<el-input
placeholder="请输入组织结构名称"
v-model="name"
>
<i
slot="suffix"
class="el-input__icon el-icon-search"
@click="getOrgTree()"
>
</i>
</el-input>
<div class="f0" style="display: flex">
<el-tooltip content="新建" placement="top">
<i class="icon-add party-icon-20" @click="handleAdd('add')" />
</el-tooltip>
<el-tooltip content="导入" placement="top">
<el-upload
action=""
:http-request="handleRequest"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
>
<i class="icon-import party-icon-20" />
</el-upload>
</el-tooltip>
<el-tooltip content="下载导入模版" placement="top">
<i
class="icon-down el-icon-download party-icon-20"
@click="downLoad"
/>
</el-tooltip>
</div>
</div>
<div class="tree-content">
<el-tree
class="org-tree"
:data="data"
:props="defaultProps"
@node-click="handleNodeClick"
>
<div
class="custom-tree-node"
slot-scope="{ node, data }"
:class="'tree-node-level' + data.level"
>
<i class="icon-org" v-if="data.level === 1"></i>
<span>{{ node.label }}</span>
</div>
</el-tree>
</div>
</div>
</div>
</div>
<div class="org-detail">
<div class="org-detail-panel-box">
<span class="title">{{ currentInfo.name }}</span>
<div class="icon-group">
<i class="icon-edit party-icon-24" @click="handleEdit()"> </i>
<i class="icon-del party-icon-24" @click="handleDel()"> </i>
</div>
</div>
<div class="org-detail-panel-box-content">
<div class="page-tip">
<p class="page-tip-title">页面说明:</p>
<p class="page-tip-des">
点击相应的机构名称，可查看该机构的详细信息。可新增机构、删除机构及批量导入机构信息。新增机构中“*”为必填项
</p>
</div>
<el-form label-position="top">
<el-form-item label="上级机构" class="w100">
<span>
{{ currentInfo.parentName || "暂无上级机构" }}
</span>
</el-form-item>
<el-form-item label="下级机构" class="w100">
<span>
{{ currentInfo.childrenName || "暂无下级机构" }}
</span>
</el-form-item>
<el-form-item label="地理位置" class="w100">
<span>
{{ currentInfo.areaName || "暂无地理位置信息" }}
</span>
</el-form-item>
<el-form-item label="备注信息" class="w100">
<span>
{{ currentInfo.remarks || "暂无备注信息" }}
</span>
</el-form-item>
</el-form>
</div>
<org-add
ref="orgAdd"
:parentId="currentInfo.id"
:treeData="data"
@success="getOrgTree()"
/>
<org-edit
ref="orgEdit"
:treeData="data"
:currentInfo="currentInfo"
@success="handleSuccessEdit()"
/>
</div>
</div>
</template>
<script>
import { orgAdd, orgEdit } from "./orgDialog";
import axios from 'axios'
export default {
data() {
return {
name: "",
data: [],
defaultProps: {
children: "children",
label: "name",
},
currentId: "",
currentInfo: {},
};
},
components: { orgAdd, orgEdit },
mounted() {
this.getOrgTree();
},
methods: {
handleNodeClick(data) {
this.currentId = data.id;
this.getInfoById();
},
// 获取机构数详情
getInfoById() {
this.$https(
{
method: "get",
url: "organ/getById",
authType: this.backToken,
},
{ id: this.currentId }
)
.then((res) => {
if (res.status == 200) {
if (res.data.resultCode == 200) {
if (res.data.data) {
this.currentInfo = res.data.data;
this.currentInfo.childrenName = this.currentInfo.children
.map((v) => {
return v.name;
})
.join(" 、");
} else {
this.currentInfo = {};
}
} else {
this.currentInfo = {};
}
} else {
this.currentInfo = {};
}
})
.catch((err) => {
console.log(res);
});
},
// 获取机构树
getOrgTree() {
this.$https(
{
method: "get",
url: "organ/getTree",
authType: this.backToken,
},
{ name: this.name }
)
.then((res) => {
if (res.status == 200) {
if (res.data.resultCode == 200) {
this.data = res.data.data;
this.currentId = this.data[0] ? this.data[0].id : "";
this.getInfoById();
} else {
this.data = [];
}
} else {
this.data = [];
}
})
.catch((err) => {
console.log(res);
});
},
// 新增
handleAdd() {
this.$refs.orgAdd.dialogVisible = true;
},
//导入
handleImport() {},
handleEdit() {
this.$refs.orgEdit.dialogVisible = true;
},
downLoad() {
axios
.get("static/file/机构导入模板.xlsx", {
responseType: "blob", //重要
})
.then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement("a");
let fname = "机构导入模板.xlsx";
link.href = url;
link.setAttribute("download", fname);
document.body.appendChild(link);
link.click();
});
},
// 删除
handleDel() {
let _this = this;
this.$confirm("此操作将永久删除, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
_this.delAction();
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
delAction() {
this.$https({
method: "delete",
url: `organ/delete?id=${this.currentId}`,
authType: this.backToken,
})
.then((res) => {
if (res.status == 200) {
if (res.data.resultCode == 200) {
this.$message({
type: "success",
message: res.data.message,
});
this.getOrgTree();
} else {
this.$message.error(res.data.message);
}
} else {
this.$message.error(res.data);
}
})
.catch((err) => {
console.log(err);
});
},
// 编辑成功
handleSuccessEdit() {
this.getOrgTree();
this.getInfoById();
},
beforeAvatarUpload(file) {
const isLt5M = file.size / 1024 / 1024 < 5;
if (!isLt5M) {
this.$message.error("上传文件大小不能超过 5MB!");
}
return isLt5M;
},
handleRequest(file) {
let formData = new FormData();
formData.append("file", file.file);
let _this = this;
_this
.$https(
{
method: "post",
url: "organ/import",
authType: this.backToken,
},
formData
)
.then((res) => {
let resData = res.data;
if (res.status == 200) {
if (resData.resultCode == 200) {
_this.$message({
type: "success",
message: resData.message,
});
_this.getOrgTree();
} else {
_this.$message.error(resData.msg || resData.message || "");
}
} else {
_this.$message.error(resData.msg || resData.message || "");
}
})
.catch((err) => {
console.log(err);
_this.$message.error(err.msg || err.message || "");
});
},
},
};
</script>
<style lang="less" scoped>
.oran-wrapper {
display: flex;
.icon-down {
text-align: center;
font-size: 16px;
background-color: #ad9374;
color: #fff;
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
}
.org-tree-container {
width: 420px;
padding-right: 20px;
height: 100%;
.org-tree-box {
height: 100%;
background: @party-white;
border: 1px solid @party-white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
.org-tree-box-header {
height: 56px;
line-height: 56px;
background-color: @party-red;
text-align: center;
font-size: 16px;
color: @party-white;
}
/deep/ .tree-search {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 10px;
.el-input__icon {
width: 40px;
font-size: 20px;
color: @party-btn-color;
}
.icon-import {
margin-left: 10px;
}
.el-input{
width: 250px;
}
}
.org-tree-box-content {
padding: 20px;
height: calc(100% - 56px);
.tree-content {
height: calc(100% - 60px);
overflow-y: auto;
}
}
}
}
.org-detail {
width: calc(100% - 420px);
height: 100%;
background: @party-white;
border: 1px solid @party-white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
.org-detail-panel-box {
height: 64px;
border-bottom: 1px solid @party-border-color;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
.title {
font-size: 20px;
font-weight: bold;
color: @font-color;
}
.icon-del {
margin-left: 30px;
}
}
.org-detail-panel-box-content {
height: calc(100% - 64px);
padding: 20px;
overflow-y: scroll;
.page-tip {
width: 648px;
height: 72px;
background: @party-bg-gray;
border-radius: 8px;
color: @font-color;
display: flex;
padding: 16px 20px;
margin: 0 auto 40px;
.page-tip-title {
width: 100px;
font-weight: bold;
}
}
.el-form {
width: 648px;
margin: 0 auto;
.w50 {
width: calc(50% - 15px);
}
.w100 {
width: 100%;
}
.el-form-item__content {
span {
color: @font-color;
font-weight: bold;
}
}
}
}
}
}
</style>
<template>
<div class="oran-wrapper height100">
<div class="org-tree-container">
<div class="org-tree-box">
<div class="org-tree-box-header">组织结构</div>
<div class="org-tree-box-content">
<div class="tree-search party-form">
<el-input
placeholder="请输入组织结构名称"
v-model="name"
>
<i
slot="suffix"
class="el-input__icon el-icon-search"
@click="getOrgTree()"
>
</i>
</el-input>
<div class="f0" style="display: flex">
<el-tooltip content="新建" placement="top">
<i class="icon-add party-icon-20" @click="handleAdd('add')" />
</el-tooltip>
<el-tooltip content="导入" placement="top">
<el-upload
action=""
:http-request="handleRequest"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
>
<i class="icon-import party-icon-20" />
</el-upload>
</el-tooltip>
<el-tooltip content="下载导入模版" placement="top">
<i
class="icon-down el-icon-download party-icon-20"
@click="downLoad"
/>
</el-tooltip>
</div>
</div>
<div class="tree-content">
<el-tree
class="org-tree"
:data="data"
:props="defaultProps"
@node-click="handleNodeClick"
>
<div
class="custom-tree-node"
slot-scope="{ node, data }"
:class="'tree-node-level' + data.level"
>
<i class="icon-org" v-if="data.level === 1"></i>
<span>{{ node.label }}</span>
</div>
</el-tree>
</div>
</div>
</div>
</div>
<div class="org-detail">
<div class="org-detail-panel-box">
<span class="title">{{ currentInfo.name }}</span>
<div class="icon-group">
<i class="icon-edit party-icon-24" @click="handleEdit()"> </i>
<i class="icon-del party-icon-24" @click="handleDel()"> </i>
</div>
</div>
<div class="org-detail-panel-box-content">
<div class="page-tip">
<p class="page-tip-title">页面说明:</p>
<p class="page-tip-des">
点击相应的机构名称，可查看该机构的详细信息。可新增机构、删除机构及批量导入机构信息。新增机构中“*”为必填项
</p>
</div>
<el-form label-position="top">
<el-form-item label="上级机构" class="w100">
<span>
{{ currentInfo.parentName || "暂无上级机构" }}
</span>
</el-form-item>
<el-form-item label="下级机构" class="w100">
<span>
{{ currentInfo.childrenName || "暂无下级机构" }}
</span>
</el-form-item>
<el-form-item label="地理位置" class="w100">
<span>
{{ currentInfo.areaName || "暂无地理位置信息" }}
</span>
</el-form-item>
<el-form-item label="备注信息" class="w100">
<span>
{{ currentInfo.remarks || "暂无备注信息" }}
</span>
</el-form-item>
</el-form>
</div>
<org-add
ref="orgAdd"
:parentId="currentInfo.id"
:treeData="data"
@success="getOrgTree()"
/>
<org-edit
ref="orgEdit"
:treeData="data"
:currentInfo="currentInfo"
@success="handleSuccessEdit()"
/>
</div>
</div>
</template>
<script>
import { orgAdd, orgEdit } from "./orgDialog";
import axios from 'axios'
export default {
data() {
return {
name: "",
data: [],
defaultProps: {
children: "children",
label: "name",
},
currentId: "",
currentInfo: {},
};
},
components: { orgAdd, orgEdit },
mounted() {
this.getOrgTree();
},
methods: {
handleNodeClick(data) {
this.currentId = data.id;
this.getInfoById();
},
// 获取机构数详情
getInfoById() {
this.$https(
{
method: "get",
url: "organ/getById",
authType: this.backToken,
},
{ id: this.currentId }
)
.then((res) => {
if (res.status == 200) {
if (res.data.resultCode == 200) {
if (res.data.data) {
this.currentInfo = res.data.data;
this.currentInfo.childrenName = this.currentInfo.children
.map((v) => {
return v.name;
})
.join(" 、");
} else {
this.currentInfo = {};
}
} else {
this.currentInfo = {};
}
} else {
this.currentInfo = {};
}
})
.catch((err) => {
console.log(res);
});
},
// 获取机构树
getOrgTree() {
this.$https(
{
method: "get",
url: "organ/getTree",
authType: this.backToken,
},
{ name: this.name }
)
.then((res) => {
if (res.status == 200) {
if (res.data.resultCode == 200) {
this.data = res.data.data;
this.currentId = this.data[0] ? this.data[0].id : "";
this.getInfoById();
} else {
this.data = [];
}
} else {
this.data = [];
}
})
.catch((err) => {
console.log(res);
});
},
// 新增
handleAdd() {
this.$refs.orgAdd.dialogVisible = true;
},
//导入
handleImport() {},
handleEdit() {
this.getInfoById()
this.$refs.orgEdit.dialogVisible = true;
},
downLoad() {
axios
.get("static/file/机构导入模板.xlsx", {
responseType: "blob", //重要
})
.then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement("a");
let fname = "机构导入模板.xlsx";
link.href = url;
link.setAttribute("download", fname);
document.body.appendChild(link);
link.click();
});
},
// 删除
handleDel() {
let _this = this;
this.$confirm("此操作将永久删除, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
_this.delAction();
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
delAction() {
this.$https({
method: "delete",
url: `organ/delete?id=${this.currentId}`,
authType: this.backToken,
})
.then((res) => {
if (res.status == 200) {
if (res.data.resultCode == 200) {
this.$message({
type: "success",
message: res.data.message,
});
this.getOrgTree();
} else {
this.$message.error(res.data.message);
}
} else {
this.$message.error(res.data);
}
})
.catch((err) => {
console.log(err);
});
},
// 编辑成功
handleSuccessEdit() {
this.getOrgTree();
this.getInfoById();
},
beforeAvatarUpload(file) {
const isLt5M = file.size / 1024 / 1024 < 5;
if (!isLt5M) {
this.$message.error("上传文件大小不能超过 5MB!");
}
return isLt5M;
},
handleRequest(file) {
let formData = new FormData();
formData.append("file", file.file);
let _this = this;
_this
.$https(
{
method: "post",
url: "organ/import",
authType: this.backToken,
},
formData
)
.then((res) => {
let resData = res.data;
if (res.status == 200) {
if (resData.resultCode == 200) {
_this.$message({
type: "success",
message: resData.message,
});
_this.getOrgTree();
} else {
_this.$message.error(resData.msg || resData.message || "");
}
} else {
_this.$message.error(resData.msg || resData.message || "");
}
})
.catch((err) => {
console.log(err);
_this.$message.error(err.msg || err.message || "");
});
},
},
};
</script>
<style lang="less" scoped>
.oran-wrapper {
display: flex;
.icon-down {
text-align: center;
font-size: 16px;
background-color: #ad9374;
color: #fff;
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
}
.org-tree-container {
width: 420px;
padding-right: 20px;
height: 100%;
.org-tree-box {
height: 100%;
background: @party-white;
border: 1px solid @party-white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
.org-tree-box-header {
height: 56px;
line-height: 56px;
background-color: @party-red;
text-align: center;
font-size: 16px;
color: @party-white;
}
/deep/ .tree-search {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 10px;
.el-input__icon {
width: 40px;
font-size: 20px;
color: @party-btn-color;
}
.icon-import {
margin-left: 10px;
}
.el-input{
width: 250px;
}
}
.org-tree-box-content {
padding: 20px;
height: calc(100% - 56px);
.tree-content {
height: calc(100% - 60px);
overflow-y: auto;
}
}
}
}
.org-detail {
width: calc(100% - 420px);
height: 100%;
background: @party-white;
border: 1px solid @party-white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
.org-detail-panel-box {
height: 64px;
border-bottom: 1px solid @party-border-color;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
.title {
font-size: 20px;
font-weight: bold;
color: @font-color;
}
.icon-del {
margin-left: 30px;
}
}
.org-detail-panel-box-content {
height: calc(100% - 64px);
padding: 20px;
overflow-y: scroll;
.page-tip {
width: 648px;
height: 72px;
background: @party-bg-gray;
border-radius: 8px;
color: @font-color;
display: flex;
padding: 16px 20px;
margin: 0 auto 40px;
.page-tip-title {
width: 100px;
font-weight: bold;
}
}
.el-form {
width: 648px;
margin: 0 auto;
.w50 {
width: calc(50% - 15px);
}
.w100 {
width: 100%;
}
.el-form-item__content {
span {
color: @font-color;
font-weight: bold;
}
}
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment