Commit 7b19e994 authored by Your Name's avatar Your Name

地图不见、机构管理

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