组织机构管理

王旭

2022-09-22 12abf3b445be263b147b7ba40c5c529df5cad2da

组织机构管理

 src/assets/lang/en.js

@@ -343,6 +343,46 @@
      fv9: 'Other',
    },
    orgManage: 'Org Manage',
    orgManageObj:{
      companyName:"companyName",
      flatType:"flatType",
      inquire:"inquire",
      delete:"delete",
      add:"add",
      num:"num",
      phone:"phone",
      operate:"operate",
      edit:"edit",
      unitInformation:"unitInformation",
      userList:"userList",
      username:"username",
      ChineseNameUsername:"ChineseName username",
      phoneNumberToTeceiveShortMessages:"phoneNumber to teceiveShort messages",
      status:"status",
      confirm:"confirm",
      close:"close",
      administrativeDvisionsList:"administrativeDvisions List",
      name:"name",
      coding:"coding",
      codeOfAdministrativeDivision:"code of administrative division",
      LevelForExaminationAndApproval:"Level for examination and approval",
      seaAreaUseClass:"seaAreaUseClass",
      reset:"reset",
      immediatelyCreate:"immediatelyCreate",
      pinyinInitials:"pinyinInitials",
      abbreviation:"abbreviation",
      unitCode:"unitCode",
      organizationCode:"organizationCode",
      companyAdministrator:"companyAdministrator",
      picture:"picture",
      division:"division",
      EMail:"EMail",
      fax:"fax",
      postalCode:"postalCode",
      website:"website",
      cmpanyAddress:"cmpanyAddress",
      companyIntroduction:"companyIntroduction",
    },
    userAuditing: 'User Auditing',
    UA: {
      userName: 'User Name',

 src/assets/lang/zh.js

@@ -341,6 +341,46 @@
      fv9: '其他',
    },
    orgManage: '组织机构管理',
    orgManageObj:{
      companyName:"单位名称",
      flatType:"单位类型",
      inquire:"查询",
      delete:"清除",
      add:"新增",
      num:"序号",
      phone:"联系电话",
      operate:"操作",
      edit:"编辑",
      unitInformation:"单位信息",
      userList:"用户-列表",
      username:"用户名称",
      ChineseNameUsername:"中文名【用户名】",
      phoneNumberToTeceiveShortMessages:"手机号【接收短信】",
      status:"状态",
      confirm:"确定",
      close:"关闭",
      administrativeDvisionsList:"行政区划-列表",
      name:"区域名称",
      coding:"编码",
      codeOfAdministrativeDivision:"行政区划代码",
      LevelForExaminationAndApproval:"审批级别",
      seaAreaUseClass:"海域使用等级",
      reset:"重置",
      immediatelyCreate:"立即创建",
      pinyinInitials:"拼音首字母",
      abbreviation:"单位简称",
      unitCode:"单位编码",
      organizationCode:"单位组织机构代码",
      companyAdministrator:"单位管理员",
      picture:"图片",
      division:"所属区划",
      EMail:"E-Mail地址",
      fax:"传真",
      postalCode:"邮政编码",
      website:"网址",
      cmpanyAddress:"单位地址",
      companyIntroduction:"单位介绍",
    },
    userAuditing: '用户审核',
    UA: {
      userName: '用户名称',

 src/views/userManage/orgManage.vue

@@ -1,307 +1,792 @@
<template>
    <div class="logLog_box">
  <div class="menuSettings_box">
    <div class="menuSettings_tree">
      <My-bread
        :list="[
          `${$t('operatManage.operatManage')}`,
          `${$t('operatManage.eventlogManage')}`,
          `${$t('userManage.userManage')}`,
          `${$t('userManage.orgManage')}`,
        ]"
      ></My-bread>
      <el-divider />
      <div class="inquire">
        <el-form ref="ruleForm" :model="form" :inline="true">
          <el-form-item :label="$t('operatManage.ELM.username')" prop="username">
      <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="form.username"
              :placeholder="$t('operatManage.ELM.usernameInfo')"
            />
              v-model="formInline.user"
              :placeholder="$t('userManage.orgManageObj.companyName')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('operatManage.ELM.ownedSystem')"
            prop="ownedSystem"
          >
          <el-form-item :label="$t('userManage.orgManageObj.flatType')">
            <el-select
              v-model="form.ownedSystem"
              :placeholder="$t('operatManage.ELM.please')"
              v-model="formInline.region"
              :placeholder="$t('userManage.orgManageObj.flatType')"
            >
              <el-option :label="$t('operatManage.ELM.all')" value="all" />
              <el-option :label="$t('operatManage.ELM.one')" value="one" />
              <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
            :label="$t('operatManage.ELM.operationType')"
            prop="operationType"
          >
            <el-select
              v-model="form.operationType"
              :placeholder="$t('operatManage.ELM.please')"
            >
              <el-option :label="$t('operatManage.ELM.all')" value="all" />
              <el-option :label="$t('operatManage.ELM.add')" value="add" />
              <el-option :label="$t('operatManage.ELM.delete')" value="delete" />
              <el-option :label="$t('operatManage.ELM.edit')" value="edit" />
              <el-option :label="$t('operatManage.ELM.query')" value="query" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('operatManage.ELM.date')" prop="date">
            <el-date-picker
              v-model="form.date"
              type="daterange"
              align="right"
              unlink-panels
              :range-separator="$t('operatManage.ELM.to')"
              :start-placeholder="$t('operatManage.ELM.startDate')"
              :end-placeholder="$t('operatManage.ELM.endDate')"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item :label="$t('operatManage.ELM.ip')" prop="requestIp">
            <el-input v-model="form.requestIp" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button @click="onSubmit"
              ><i class="el-icon-search"></i> &nbsp;{{
                $t("operatManage.ELM.search")
              }}</el-button
            <el-button
              type="primary"
              @click="onSubmit"
              icon="el-icon-search"
              plain
              >{{ $t("userManage.orgManageObj.inquire") }}</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm('ruleForm')"
              ><i class="el-icon-delete"></i>&nbsp;{{
                $t("operatManage.ELM.reset")
              }}</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 style="width: 100%" height="99%">
        <el-table :data="tableData" stripe>
          <el-table-column
            align="center"
            type="index"
            :label="$t('operatManage.ELM.index')"
            width="70px"
            width="80"
            :label="$t('userManage.orgManageObj.num')"
          >
          </el-table-column>
          <el-table-column
            prop="menuname"
            :label="$t('userManage.orgManageObj.companyName')"
          />
          <el-table-column
            align="center"
            prop="username"
            :label="$t('operatManage.ELM.username')"
            prop="parentmenuname"
            :label="$t('userManage.orgManageObj.flatType')"
          />
          <el-table-column
            align="center"
            prop="ip"
            :label="$t('operatManage.ELM.ip')"
            prop="dataBulk"
            :label="$t('userManage.orgManageObj.phone')"
          />
          <el-table-column
            align="center"
            prop="ownedSystem"
            :label="$t('operatManage.ELM.ownedSystem')"
          />
          <el-table-column
            align="center"
            prop="largeModuleName"
            :label="$t('operatManage.ELM.largeModuleName')"
          />
          <el-table-column
            align="center"
            prop="smallModuleName"
            :label="$t('operatManage.ELM.smallModuleName')"
          />
          <el-table-column
            align="center"
            prop="resourceName"
            :label="$t('operatManage.ELM.resourceName')"
          />
          <el-table-column
            align="center"
            prop="date"
            :label="$t('operatManage.ELM.date')"
          />
          <el-table-column
            align="center"
            prop="operationType"
            :label="$t('operatManage.ELM.operationType')"
          />
            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="currentPage"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="9"
            :total="10"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import MyBread from "../../components/MyBread.vue";
  
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      MyBread,
    },
  
    data() {
      return {
        currentPage: 1,
        form: {
          username: "",
          ownedSystem: "",
          requestIp: "",
          operationType: "",
          date: "",
    <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 弄",
        },
        tableData: [
        {
          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: [
          {
            username: "管理员",
            ip: "221.182.31.12",
            date: "2022-08-05",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
            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;
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      onSubmit() {
        console.log("submit!");
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    request(param) {},
    onSubmit() {
      console.log("submit!");
    },
    created() {},
  };
  </script>
  <style lang="less" scoped>
  //@import url(); 引入公共css类
  .logLog_box {
    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;
    .el-input {
      width: 300px;
    }
    .inquire {
      height: 110px;
      overflow: auto;
      padding: 10px;
      margin-top: 20px;
    overflow: auto;
    .btn_box {
      background: #fff;
      border-radius: 5px;
      padding: 10px;
      margin-bottom: 24px;

      border-radius: 10px;
      border: 1px solid rgb(202, 201, 204);
      margin-bottom: 20px;
      .el-form-item {
        margin: 7px;
      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 {
      height: 65%;
      padding: 10px;
      background: #fff;
      border-radius: 5px;
      border: 1px solid rgb(202, 201, 204);
    }
    .text-center {
      text-align: center;
      border-radius: 10px;
      background: #fff;
      padding: 10px;
      box-sizing: border-box;
      width: 100%;
      .el-table__body {
        width: 100% !important;
      }
    }
  }
  </style>
  
}
.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>