<template>
|
<div class="menuSettings_box">
|
<div class="menuSettings_tree">
|
<My-bread
|
:list="[
|
`${$t('userManage.userManage')}`,
|
`${$t('userManage.orgManage')}`,
|
]"
|
></My-bread>
|
<el-divider />
|
<el-tree
|
:data="data"
|
node-key="id"
|
default-expand-all
|
@node-drag-start="handleDragStart"
|
@node-drag-enter="handleDragEnter"
|
@node-drag-leave="handleDragLeave"
|
@node-drag-over="handleDragOver"
|
@node-drag-end="handleDragEnd"
|
@node-drop="handleDrop"
|
draggable
|
:allow-drop="allowDrop"
|
:allow-drag="allowDrag"
|
>
|
</el-tree>
|
</div>
|
<div class="menuSettings">
|
<div class="btn_box">
|
<div class="herder_box">
|
{{ $t("operatManage.operationLogObj.queryRegion") }}
|
</div>
|
<el-form :inline="true" :model="formInline" size="small">
|
<el-form-item :label="$t('userManage.orgManageObj.companyName')">
|
<el-input
|
v-model="formInline.user"
|
:placeholder="$t('userManage.orgManageObj.companyName')"
|
></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('userManage.orgManageObj.flatType')">
|
<el-select
|
v-model="formInline.region"
|
:placeholder="$t('userManage.orgManageObj.flatType')"
|
>
|
<el-option label="全部" value="全部"></el-option>
|
<el-option label="海域行政部门" value="海域行政部门"></el-option>
|
<el-option label="海域监测部门" value="海域监测部门"></el-option>
|
<el-option label="海监执法部门" value="海监执法部门"></el-option>
|
<el-option label="技术中心" value="技术中心"></el-option>
|
<el-option label="信息中心" value="信息中心"></el-option>
|
<el-option label="用海单位" value="用海单位"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
@click="onSubmit"
|
icon="el-icon-search"
|
plain
|
>{{ $t("userManage.orgManageObj.inquire") }}</el-button
|
>
|
<el-button type="primary" icon="el-icon-delete" plain>{{
|
$t("userManage.orgManageObj.delete")
|
}}</el-button>
|
</el-form-item>
|
</el-form>
|
<div>
|
<el-button
|
type="success"
|
@click="outerVisible = true"
|
icon="el-icon-circle-plus"
|
size="small"
|
>{{ $t("userManage.orgManageObj.add") }}</el-button
|
>
|
</div>
|
</div>
|
<div class="table_box">
|
<el-table :data="tableData" stripe>
|
<el-table-column
|
type="index"
|
width="80"
|
:label="$t('userManage.orgManageObj.num')"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="menuname"
|
:label="$t('userManage.orgManageObj.companyName')"
|
/>
|
<el-table-column
|
prop="parentmenuname"
|
:label="$t('userManage.orgManageObj.flatType')"
|
/>
|
<el-table-column
|
prop="dataBulk"
|
:label="$t('userManage.orgManageObj.phone')"
|
/>
|
<el-table-column
|
fixed="right"
|
:label="$t('userManage.orgManageObj.operate')"
|
width="280"
|
>
|
<template #default>
|
<el-button type="warning" size="small">{{
|
$t("userManage.orgManageObj.edit")
|
}}</el-button>
|
<el-button type="success" size="small">{{
|
$t("userManage.orgManageObj.add")
|
}}</el-button>
|
<el-button type="danger" size="small">{{
|
$t("userManage.orgManageObj.delete")
|
}}</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div style="margin-top: 40px" class="pagination_box">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="currentPage4"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="10"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="10"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
<el-dialog title="新增" :visible.sync="outerVisible" :modal-append-to-body="true" :append-to-body="true">
|
<el-dialog
|
width="30%"
|
:title="dialogTitle"
|
:visible.sync="innerVisible"
|
append-to-body
|
>
|
<el-form :inline="true" :model="formInline" size="small">
|
<el-form-item :label="$t('userManage.orgManageObj.username')">
|
<el-input
|
v-model="formInline.user"
|
:placeholder="$t('userManage.orgManageObj.username')"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button
|
type="primary"
|
@click="onSubmit"
|
icon="el-icon-search"
|
plain
|
>{{ $t("userManage.orgManageObj.inquire") }}</el-button
|
>
|
<el-button type="primary" icon="el-icon-delete" plain>{{
|
$t("userManage.orgManageObj.delete")
|
}}</el-button>
|
</el-form-item>
|
</el-form>
|
<el-table
|
ref="multipleTable"
|
:data="tableData1"
|
tooltip-effect="dark"
|
style="width: 100%"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column type="selection" width="55"> </el-table-column>
|
<el-table-column prop="name" :label="$t('userManage.orgManageObj.ChineseNameUsername')">
|
</el-table-column>
|
<el-table-column prop="name" :label="$t('userManage.orgManageObj.phoneNumberToTeceiveShortMessages')">
|
</el-table-column>
|
<el-table-column prop="address" :label="$t('userManage.orgManageObj.status')"> </el-table-column>
|
</el-table>
|
<div style="margin-top: 40px" class="pagination_box">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="currentPage4"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="10"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="10"
|
>
|
</el-pagination>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary">{{$t('userManage.orgManageObj.confirm')}}</el-button>
|
<el-button @click="innerVisible = false">{{$t('userManage.orgManageObj.close')}}</el-button>
|
</div>
|
</el-dialog>
|
<el-dialog
|
width="30%"
|
title="行政区划-列表"
|
:visible.sync="innerVisible1"
|
append-to-body
|
>
|
<el-form :inline="true" :model="formInline" size="small">
|
<el-form-item :label="$t('userManage.orgManageObj.name')">
|
<el-input
|
v-model="formInline.user"
|
:placeholder="$t('userManage.orgManageObj.name')"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button
|
type="primary"
|
@click="onSubmit"
|
icon="el-icon-search"
|
plain
|
>{{ $t("userManage.orgManageObj.inquire") }}</el-button
|
>
|
<el-button type="primary" icon="el-icon-delete" plain>{{
|
$t("userManage.orgManageObj.delete")
|
}}</el-button>
|
</el-form-item>
|
</el-form>
|
<el-table
|
ref="multipleTable"
|
:data="tableData1"
|
tooltip-effect="dark"
|
style="width: 100%"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column type="selection" width="55"> </el-table-column>
|
<el-table-column prop="name" :label="$t('userManage.orgManageObj.name')"> </el-table-column>
|
<el-table-column prop="address" :label="$t('userManage.orgManageObj.coding')" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
:label="$t('userManage.orgManageObj.codeOfAdministrativeDivision')"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
:label="$t('userManage.orgManageObj.LevelForExaminationAndApproval')"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
:label="$t('userManage.orgManageObj.seaAreaUseClass')"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
</el-table>
|
<div style="margin-top: 40px" class="pagination_box">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="currentPage4"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="10"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="10"
|
>
|
</el-pagination>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary">{{$t('userManage.orgManageObj.confirm')}}</el-button>
|
<el-button @click="innerVisible1 = false">{{$t('userManage.orgManageObj.close')}}</el-button>
|
|
</div>
|
</el-dialog>
|
<el-form
|
:model="ruleForm"
|
:rules="rules"
|
ref="ruleForm"
|
label-width="150px"
|
>
|
<div class="flexForm">
|
<div style="width: 50%">
|
<el-form-item :label="$t('userManage.orgManageObj.companyName')" prop="name">
|
<el-input v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('userManage.orgManageObj.pinyinInitials')" prop="name">
|
<el-input v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('userManage.orgManageObj.abbreviation')" prop="name">
|
<el-input v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('userManage.orgManageObj.unitCode')" prop="name">
|
<el-input v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('userManage.orgManageObj.organizationCode')" prop="name">
|
<el-input v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('userManage.orgManageObj.companyAdministrator')" prop="name">
|
<el-input
|
v-model="ruleForm.name"
|
:disabled="true"
|
style="width: calc(100% - 138px)"
|
></el-input>
|
<el-button
|
type="primary"
|
icon="el-icon-more"
|
@click="innerVisible = true"
|
></el-button>
|
<el-button type="danger">清除</el-button>
|
</el-form-item>
|
<el-form-item :label="$t('userManage.orgManageObj.phone')" prop="name">
|
<el-input v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
</div>
|
<div style="width: 50%">
|
<el-form-item :label="$t('userManage.orgManageObj.picture')">
|
<el-upload
|
:auto-upload="false"
|
class="avatar-uploader"
|
action="#"
|
:show-file-list="false"
|
:http-request="request"
|
:limit="1"
|
>
|
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
</el-upload>
|
</el-form-item>
|
<el-form-item :label="$t('userManage.orgManageObj.flatType')" prop="region">
|
<el-select
|
v-model="ruleForm.region"
|
placeholder=""
|
style="width: 100%"
|
>
|
<el-option
|
label="海域行政部门"
|
value="海域行政部门"
|
></el-option>
|
<el-option
|
label="海域监测部门"
|
value="海域监测部门"
|
></el-option>
|
<el-option
|
label="海监执法部门"
|
value="海监执法部门"
|
></el-option>
|
<el-option label="技术中心" value="技术中心"></el-option>
|
<el-option label="信息中心" value="信息中心"></el-option>
|
<el-option label="用海单位" value="用海单位"></el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item :label="$t('userManage.orgManageObj.division')" prop="name">
|
<el-input
|
v-model="ruleForm.name"
|
:disabled="true"
|
style="width: calc(100% - 138px)"
|
></el-input>
|
<el-button
|
type="primary"
|
icon="el-icon-more"
|
@click="innerVisible1 = true"
|
></el-button>
|
<el-button type="danger">清除</el-button>
|
</el-form-item>
|
<el-form-item :label="$t('userManage.orgManageObj.EMail')" prop="name">
|
<el-input v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('userManage.orgManageObj.fax')" prop="name">
|
<el-input v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('userManage.orgManageObj.postalCode')" prop="name">
|
<el-input v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
</div>
|
</div>
|
|
<el-form-item :label="$t('userManage.orgManageObj.website')" prop="name">
|
<el-input v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('userManage.orgManageObj.cmpanyAddress')" prop="name">
|
<el-input v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('userManage.orgManageObj.companyIntroduction')" prop="name">
|
<el-input
|
type="textarea"
|
:rows="2"
|
placeholder=""
|
v-model="ruleForm.textarea"
|
>
|
</el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="submitForm('ruleForm')"
|
>{{$t('userManage.orgManageObj.immediatelyCreate')}}</el-button
|
>
|
<el-button @click="resetForm('ruleForm')">{{$t('userManage.orgManageObj.reset')}}</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import MyBread from "../../components/MyBread.vue";
|
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {
|
MyBread,
|
},
|
|
data() {
|
return {
|
dialogTitle:"用户-列表",
|
tableData1: [
|
{
|
date: "2016-05-03",
|
name: "王小虎",
|
address: "上海市普陀区金沙江路 1518 弄",
|
},
|
{
|
date: "2016-05-02",
|
name: "王小虎",
|
address: "上海市普陀区金沙江路 1518 弄",
|
},
|
{
|
date: "2016-05-04",
|
name: "王小虎",
|
address: "上海市普陀区金沙江路 1518 弄",
|
},
|
{
|
date: "2016-05-01",
|
name: "王小虎",
|
address: "上海市普陀区金沙江路 1518 弄",
|
},
|
{
|
date: "2016-05-08",
|
name: "王小虎",
|
address: "上海市普陀区金沙江路 1518 弄",
|
},
|
{
|
date: "2016-05-06",
|
name: "王小虎",
|
address: "上海市普陀区金沙江路 1518 弄",
|
},
|
{
|
date: "2016-05-07",
|
name: "王小虎",
|
address: "上海市普陀区金沙江路 1518 弄",
|
},
|
],
|
imageUrl: "",
|
ruleForm: {
|
name: "",
|
region: "",
|
date1: "",
|
date2: "",
|
delivery: false,
|
type: [],
|
resource: "",
|
desc: "",
|
},
|
rules: {
|
name: [
|
{ required: true, message: "请输入活动名称", trigger: "blur" },
|
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
|
],
|
region: [
|
{ required: true, message: "请选择活动区域", trigger: "change" },
|
],
|
date1: [
|
{
|
type: "date",
|
required: true,
|
message: "请选择日期",
|
trigger: "change",
|
},
|
],
|
date2: [
|
{
|
type: "date",
|
required: true,
|
message: "请选择时间",
|
trigger: "change",
|
},
|
],
|
type: [
|
{
|
type: "array",
|
required: true,
|
message: "请至少选择一个活动性质",
|
trigger: "change",
|
},
|
],
|
resource: [
|
{ required: true, message: "请选择活动资源", trigger: "change" },
|
],
|
desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
|
},
|
outerVisible: false,
|
innerVisible: false,
|
innerVisible1: false,
|
formInline: {
|
user: "",
|
region: "",
|
},
|
currentPage4: 4,
|
tableData: [
|
{
|
menuname: "数据质检",
|
parentmenuname: "",
|
dataBulk: "1",
|
creationtime: "2022-7-20",
|
creationname: "张三",
|
},
|
{
|
menuname: "数据交换",
|
parentmenuname: "",
|
dataBulk: "1",
|
creationtime: "2022-7-20",
|
creationname: "张三",
|
},
|
{
|
menuname: "数据管理",
|
parentmenuname: "",
|
dataBulk: "1",
|
creationtime: "2022-7-20",
|
creationname: "张三",
|
},
|
{
|
menuname: "服务管理",
|
parentmenuname: "",
|
dataBulk: "1",
|
creationtime: "2022-7-20",
|
creationname: "张三",
|
},
|
{
|
menuname: "综合展示",
|
parentmenuname: "",
|
dataBulk: "1",
|
creationtime: "2022-7-20",
|
creationname: "张三",
|
},
|
{
|
menuname: "运维管理",
|
parentmenuname: "",
|
dataBulk: "1",
|
creationtime: "2022-7-20",
|
creationname: "张三",
|
},
|
{
|
menuname: "菜单管理",
|
parentmenuname: "运维管理",
|
dataBulk: "1",
|
creationtime: "2022-7-20",
|
creationname: "张三",
|
},
|
{
|
menuname: "用户管理",
|
parentmenuname: "运维管理",
|
dataBulk: "1",
|
creationtime: "2022-7-20",
|
creationname: "张三",
|
},
|
{
|
menuname: "系统管理",
|
parentmenuname: "运维管理",
|
dataBulk: "1",
|
creationtime: "2022-7-20",
|
creationname: "张三",
|
},
|
{
|
menuname: "系统配置",
|
parentmenuname: "运维管理",
|
dataBulk: "1",
|
creationtime: "2022-7-20",
|
creationname: "张三",
|
},
|
],
|
data: [
|
{
|
id: 1,
|
label: "一级 1",
|
children: [
|
{
|
id: 4,
|
label: "二级 1-1",
|
children: [
|
{
|
id: 9,
|
label: "三级 1-1-1",
|
},
|
{
|
id: 10,
|
label: "三级 1-1-2",
|
},
|
],
|
},
|
],
|
},
|
{
|
id: 2,
|
label: "一级 2",
|
children: [
|
{
|
id: 5,
|
label: "二级 2-1",
|
},
|
{
|
id: 6,
|
label: "二级 2-2",
|
},
|
],
|
},
|
{
|
id: 3,
|
label: "一级 3",
|
children: [
|
{
|
id: 7,
|
label: "二级 3-1",
|
},
|
{
|
id: 8,
|
label: "二级 3-2",
|
children: [
|
{
|
id: 11,
|
label: "三级 3-2-1",
|
},
|
{
|
id: 12,
|
label: "三级 3-2-2",
|
},
|
{
|
id: 13,
|
label: "三级 3-2-3",
|
},
|
],
|
},
|
],
|
},
|
],
|
defaultProps: {
|
children: "children",
|
label: "label",
|
},
|
multipleSelection: [],
|
};
|
},
|
methods: {
|
handleSelectionChange(val) {
|
this.multipleSelection = val;
|
},
|
request(param) {},
|
onSubmit() {
|
console.log("submit!");
|
},
|
handleDragStart(node, ev) {
|
console.log("drag start", node);
|
},
|
handleDragEnter(draggingNode, dropNode, ev) {
|
console.log("tree drag enter: ", dropNode.label);
|
},
|
handleDragLeave(draggingNode, dropNode, ev) {
|
console.log("tree drag leave: ", dropNode.label);
|
},
|
handleDragOver(draggingNode, dropNode, ev) {
|
console.log("tree drag over: ", dropNode.label);
|
},
|
handleDragEnd(draggingNode, dropNode, dropType, ev) {
|
console.log("tree drag end: ", dropNode && dropNode.label, dropType);
|
},
|
handleDrop(draggingNode, dropNode, dropType, ev) {
|
console.log("tree drop: ", dropNode.label, dropType);
|
},
|
allowDrop(draggingNode, dropNode, type) {
|
if (dropNode.data.label === "二级 3-1") {
|
return type !== "inner";
|
} else {
|
return true;
|
}
|
},
|
allowDrag(draggingNode) {
|
return draggingNode.data.label.indexOf("三级 3-2-2") === -1;
|
},
|
handleSizeChange(val) {
|
console.log(`每页 ${val} 条`);
|
},
|
handleCurrentChange(val) {
|
console.log(`当前页: ${val}`);
|
},
|
handleCheckChange() {},
|
},
|
created() {
|
|
},
|
mounted(){
|
|
// this.$nextTick(() => {
|
// console.log($t('operatManage.operationLogObj.add'))
|
// });
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.menuSettings_box {
|
// background: rgb(240, 242, 245);
|
border-radius: 10px;
|
height: 100%;
|
padding: 10px;
|
box-sizing: border-box;
|
display: flex;
|
.menuSettings_tree {
|
width: 344px;
|
height: 100%;
|
background: rgb(240, 242, 245);
|
padding: 20px;
|
border-radius: 10px;
|
box-sizing: border-box;
|
overflow: auto;
|
.el-tree {
|
background: transparent;
|
/deep/ .el-tree-node__label {
|
font-size: 18px;
|
}
|
/deep/ .el-tree-node {
|
padding-top: 10px;
|
padding-bottom: 10px;
|
}
|
}
|
}
|
.menuSettings {
|
width: calc(100% - 344px);
|
border-radius: 10px;
|
background: rgb(240, 242, 245);
|
margin-left: 10px;
|
height: 100%;
|
padding: 10px;
|
box-sizing: border-box;
|
overflow: auto;
|
.btn_box {
|
background: #fff;
|
padding: 10px;
|
margin-bottom: 24px;
|
|
border-radius: 10px;
|
border: 1px solid rgb(202, 201, 204);
|
box-sizing: border-box;
|
.delBtn {
|
margin-left: auto;
|
}
|
.herder_box {
|
padding: 10px;
|
border-bottom: 1px solid #ccc;
|
margin-bottom: 20px;
|
font-size: 14px;
|
}
|
}
|
.table_box {
|
border: 1px solid rgb(202, 201, 204);
|
border-radius: 10px;
|
background: #fff;
|
padding: 10px;
|
box-sizing: border-box;
|
width: 100%;
|
.el-table__body {
|
width: 100% !important;
|
}
|
}
|
}
|
}
|
.avatar-uploader {
|
width: 120px;
|
height: 120px;
|
border: 1px dashed #c0ccda;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
}
|
.avatar-uploader:hover {
|
border-color: #409eff;
|
}
|
.avatar-uploader-icon {
|
font-size: 28px;
|
color: #8c939d;
|
width: 120px;
|
height: 120px;
|
line-height: 120px;
|
text-align: center;
|
}
|
.avatar {
|
width: 120px;
|
height: 120px;
|
display: block;
|
}
|
.flexForm {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
</style>
|
