投影图层管理

surprise

2023-10-31 68d96e197c921bb61bc079d42b617692eca36f55

 src/views/datamanage/resourceManagement.vue

@@ -1,389 +1,191 @@
<template>
  <div class="subpage_Box">
    <My-bread :list="[
          `${$t('dataManage.dataManage')}`,
          `${$t('dataManage.resourceManage')}`,
        ]"></My-bread>
      `${$t('dataManage.dataManage')}`,
      `${$t('dataManage.resourceManage')}`,
    ]"></My-bread>
    <el-divider />
    <div class="mainBox">
      <div
        class="content_box "
        ref="container"
      >
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
        >
      <div class="content_box " ref="container">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-input
              size="small"
              :title="$t('dataManage.vmobj.keyword')"
              v-model="formInline.name"
              :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuedataName')"
            > <i
                :title="$t('common.iquery')"
                slot="suffix"
                @click="setListDataStart"
                class="el-icon-search"
                style="padding-right: 8px"
              ></i></el-input>
            <el-input size="small" :title="$t('dataManage.vmobj.keyword')" v-model="formInline.name"
              :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuedataName')"> <i :title="$t('common.iquery')" slot="suffix"
                @click="getResTableData" class="el-icon-search" style="padding-right: 8px"></i></el-input>
          </el-form-item>
          <!-- 服务类别 -->
          <el-form-item>
            <el-select size="small" v-model="formInline.category" :placeholder="$t('dataManage.layerObj.prompt18')"
              @change="getResTableData">
              <el-option v-for="item in serviceType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 数据类型 -->
          <el-form-item>
            <el-select size="small" v-model="formInline.data" :placeholder="$t('dataManage.layerObj.prompt8')"
              @change="getResTableData">
              <el-option v-for="item in dataType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 服务类别 -->
          <el-form-item>
            <el-select size="small" v-model="formInline.type" :placeholder="$t('dataManage.layerObj.prompt3')"
              @change="getResTableData">
              <el-option v-for="item in dataTypes" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 状态 -->
          <el-form-item>
            <el-select size="small" v-model="formInline.status" :placeholder="$t('dataManage.layerObj.prompt19')"
              @change="getResTableData">
              <el-option v-for="item in statusType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="float: right;">
            <el-button
              v-if="menuStatus.insert"
              icon="el-icon-edit"
              type="success"
              @click="setInsertTableData"
              size="small"
            >{{ $t('common.append') }}
            <el-button v-if="menuStatus.insert" icon="el-icon-edit" type="success" @click="setInsertTableData"
              size="small">{{ $t('common.append') }}
            </el-button>
            <el-button
              v-if="menuStatus.delete"
              icon="el-icon-delete"
              type="danger"
              @click="setDelTableData"
              size="small"
            >{{ $t('common.delete') }}
            <el-button v-if="menuStatus.delete" icon="el-icon-delete" type="danger" @click="setDelTableData"
              size="small">{{ $t('common.delete') }}
            </el-button>
            <el-button
              icon="el-icon-refresh"
              type="info"
              size="small"
              @click="setEmptyData"
            >{{ $t('common.empty') }}
            <el-button icon="el-icon-refresh" type="info" size="small" @click="setEmptyData">{{ $t('common.empty') }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="dividing-line"></div>
      <div
        class="table_box"
        :style="styleVar"
      >
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          height="calc(100% - 10px)"
          @selection-change="handleSelectionChange"
          @cell-dblclick="copyText"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            align="center"
            type="index"
            :label="$t('dataManage.styleObj.index')"
            width="100"
          />
          <el-table-column
            align="center"
            prop="cnName"
            :label="$t('dataManage.layerObj.resourceName')"
            width="150"
          />
      <div class="table_box" :style="styleVar">
        <el-table :data="tableData" style="width: 100%" border height="calc(100% - 10px)"
          @selection-change="handleSelectionChange" @cell-dblclick="copyText">
          <el-table-column type="selection" width="55" />
          <el-table-column align="center" type="index" :label="$t('dataManage.styleObj.index')" width="100" />
          <el-table-column align="center" prop="cnName" :label="$t('dataManage.layerObj.resourceName')" width="150" />
          <!-- <el-table-column
            align="center"
            prop="enName"
            :label="$t('dataManage.layerObj.englishName')"
            width="170"
          /> -->
          <el-table-column
            align="center"
            prop="status"
            :label="$t('dataManage.layerObj.status')"
            :formatter="setResStatus"
            width="150"
          />
          <el-table-column
            align="center"
            prop="category"
            :label="$t('dataManage.layerObj.firm')"
            :formatter="setResCategory"
            width="150"
          />
          <el-table-column
            align="center"
            prop="type"
            :label="$t('dataManage.layerObj.serviceType')"
            :formatter="setResType"
            width="150"
          />
          <el-table-column
            align="center"
            prop="data"
            :label="$t('dataManage.layerObj.dataType')"
            :formatter="setResData"
            width="150"
          />
          <el-table-column
            align="center"
            prop="tab"
            :label="$t('dataManage.layerObj.tableName')"
            width="150"
          />
          <el-table-column
            align="center"
            prop="url"
            :label="$t('dataManage.layerObj.serviceAddress')"
            width="300"
          />
          <el-table-column
            align="center"
            prop="args"
            :label="$t('dataManage.layerObj.serviceParameters')"
            width="220"
          />
          <el-table-column
            align="center"
            prop="test"
            :label="$t('dataManage.layerObj.testAddress')"
            width="300"
          />
          <el-table-column
            align="center"
            prop="proxy"
            :label="$t('dataManage.layerObj.proxyAddress')"
            width="300"
            :formatter="formatProxy"
          />
          <el-table-column
            align="center"
            prop="descr"
            :label="$t('dataManage.layerObj.descr')"
            width="200"
          />
          <el-table-column
            align="center"
            prop="createName"
            :label="$t('dataManage.vmobj.createonuser')"
            width="200"
          />
          <el-table-column
            align="center"
            prop="createTime"
            :label="$t('dataManage.vmobj.createontime')"
            width="200"
            :formatter="formatData"
          />
          <el-table-column
            align="center"
            prop="updateName"
            :label="$t('dataManage.vmobj.updateonuser')"
            width="200"
          />
          <el-table-column
            align="center"
            prop="updateTime"
            :label="$t('dataManage.vmobj.updateontime')"
            width="200"
            :formatter="formatData"
          />
          <el-table-column
            align="center"
            prop="bak"
            :label="$t('common.bak')"
            width="200"
          />
          <el-table-column
            :label="$t('common.operate')"
            width="150"
          >
          <el-table-column align="center" prop="status" :label="$t('dataManage.layerObj.status')"
            :formatter="setResStatus" width="150" />
          <el-table-column align="center" prop="category" :label="$t('dataManage.layerObj.firm')"
            :formatter="setResCategory" width="150" />
          <el-table-column align="center" prop="type" :label="$t('dataManage.layerObj.serviceType')"
            :formatter="setResType" width="150" />
          <el-table-column align="center" prop="data" :label="$t('dataManage.layerObj.dataType')" :formatter="setResData"
            width="150" />
          <el-table-column align="center" prop="tab" :label="$t('dataManage.layerObj.tableName')" width="150" />
          <el-table-column align="center" prop="url" :label="$t('dataManage.layerObj.serviceAddress')" width="300" />
          <el-table-column align="center" prop="args" :label="$t('dataManage.layerObj.serviceParameters')" width="220" />
          <el-table-column align="center" prop="test" :label="$t('dataManage.layerObj.testAddress')" width="300" />
          <el-table-column align="center" prop="proxy" :label="$t('dataManage.layerObj.proxyAddress')" width="300"
            :formatter="formatProxy" />
          <el-table-column align="center" prop="descr" :label="$t('dataManage.layerObj.descr')" width="200" />
          <el-table-column align="center" prop="createName" :label="$t('dataManage.vmobj.createonuser')" width="200" />
          <el-table-column align="center" prop="createTime" :label="$t('dataManage.vmobj.createontime')" width="200"
            :formatter="formatData" />
          <el-table-column align="center" prop="updateName" :label="$t('dataManage.vmobj.updateonuser')" width="200" />
          <el-table-column align="center" prop="updateTime" :label="$t('dataManage.vmobj.updateontime')" width="200"
            :formatter="formatData" />
          <el-table-column align="center" prop="bak" :label="$t('common.bak')" width="200" />
          <el-table-column :label="$t('common.operate')" width="200">
            <template slot-scope="scope">
              <el-button
                @click="setScopeEdit(scope.row)"
                size="small"
                type="warning"
                plain
              >{{ $t('common.update') }}</el-button>
              <el-button @click="setScopeEdit(scope.row)" size="small" type="warning" plain>{{ $t('common.update')
              }}</el-button>
              <el-button size="small" v-show="scope.row.status != 0" plain @click="setScopePreview(scope.row)">{{
                $t('common.preview') }}</el-button>

            </template>
          </el-table-column>
        </el-table>

        <div
          class="pagination_box"
          style="margin-top: 15px"
        >
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listData.pageIndex"
            :page-sizes="[10, 50,100,200]"
            :page-size="listData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listData.count"
          >
        <div class="pagination_box" style="margin-top: 15px">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="listData.pageIndex" :page-sizes="[10, 50, 100, 200]" :page-size="listData.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="listData.count">
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      :title="$t('common.append')"
      :visible.sync="insertDialog"
      width="50%"
      :show-close="false"
    >
    <el-dialog :title="$t('common.append')" :visible.sync="insertDialog" width="50%" :show-close="false">
      <div style="width: 100%;max-height: 63vh;overflow-y: auto;">
        <el-form
          :model="insertData"
          class="demo-form-inline"
          label-width="120px"
        >
        <el-form :model="insertData" class="demo-form-inline" label-width="120px">
          <el-form-item :label="$t('dataManage.layerObj.resourceName')">
            <el-input
              v-model="insertData.cnName"
              :placeholder="$t('dataManage.layerObj.prompt13')"
              class="insertWidth"
            ></el-input>
            <el-input v-model="insertData.cnName" :placeholder="$t('dataManage.layerObj.prompt13')"
              class="insertWidth"></el-input>
          </el-form-item>

          <el-form-item :label="$t('dataManage.layerObj.firm')">
            <el-select
              class="insertWidth"
              v-model="insertData.category"
              :placeholder="$t('dataManage.layerObj.prompt3')"
            >
              <el-option
                v-for="item in serviceType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('dataManage.layerObj.serviceType')">
            <el-select
              class="insertWidth"
              v-model="insertData.type"
              @change="setCategoryTypeChange"
              :placeholder="$t('dataManage.layerObj.prompt8')"
            >
              <el-option
                v-for="item in categoryType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
            <el-select class="insertWidth" v-model="insertData.category" :placeholder="$t('dataManage.layerObj.prompt3')">
              <el-option v-for="item in serviceType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('dataManage.layerObj.dataType')">
            <el-select
              class="insertWidth"
              v-model="insertData.data"
              :disabled='insertDisabled'
              :placeholder="$t('dataManage.layerObj.prompt3')"
            >
              <el-option
                v-for="item in dataType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
            <el-select class="insertWidth" v-model="insertData.data" @change="setCategoryTypeChange"
              :placeholder="$t('dataManage.layerObj.prompt3')">
              <el-option v-for="item in dataType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item :label="$t('dataManage.layerObj.tableName')">
            <el-input
              v-model="insertData.tab"
              class="insertWidth"
              :placeholder="$t('dataManage.layerObj.prompt12')"
            ></el-input>
          <el-form-item :label="$t('dataManage.layerObj.serviceType')">
            <el-select class="insertWidth" v-model="insertData.type" :placeholder="$t('dataManage.layerObj.prompt8')">
              <el-option v-for="item in categoryType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item v-if="insertData.category == 2" :label="$t('dataManage.layerObj.layerName')">
            <el-input v-model="insertData.tab" class="insertWidth"
              :placeholder="$t('dataManage.layerObj.prompt1')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('dataManage.layerObj.serviceAddress')">
            <el-input
              v-model="insertData.url"
              :placeholder="$t('dataManage.layerObj.prompt4')"
              class="insertWidth"
            ></el-input>
            <el-input v-model="insertData.url" :placeholder="$t('dataManage.layerObj.prompt4')"
              class="insertWidth"></el-input>
          </el-form-item>
          <el-form-item :label="$t('dataManage.layerObj.testAddress')">
            <el-input
              v-model="insertData.test"
              :placeholder="$t('dataManage.layerObj.prompt9')"
              class="insertWidth"
            ></el-input>
            <el-input v-model="insertData.test" :placeholder="$t('dataManage.layerObj.prompt9')"
              class="insertWidth"></el-input>
          </el-form-item>
          <el-form-item :label="$t('dataManage.layerObj.serviceParameters')">
            <el-input
              v-model="insertData.args"
              :placeholder="$t('dataManage.layerObj.prompt15')"
              class="insertWidth"
            ></el-input>
            <el-input v-model="insertData.args" :placeholder="$t('dataManage.layerObj.prompt15')"
              class="insertWidth"></el-input>
          </el-form-item>
          <el-form-item :label="$t('dataManage.layerObj.status')">
            <div class="insertWidth">
              <el-radio
                v-model="insertData.status"
                label="0"
              >{{$t('dataManage.layerObj.disable')}}</el-radio>
              <el-radio
                v-model="insertData.status"
                label="1"
              > {{$t('dataManage.layerObj.enableOriginalAddress')}}</el-radio>
              <el-radio
                v-model="insertData.status"
                label="2"
              > {{$t('dataManage.layerObj.enableProxy')}}</el-radio>
              <el-radio v-model="insertData.status" label="0">{{ $t('dataManage.layerObj.disable') }}</el-radio>
              <el-radio v-model="insertData.status" label="1">
                {{ $t('dataManage.layerObj.enableOriginalAddress') }}</el-radio>
              <el-radio v-model="insertData.status" label="2"> {{ $t('dataManage.layerObj.enableProxy') }}</el-radio>
            </div>
          </el-form-item>
          <el-form-item :label="$t('dataManage.layerObj.descr')">
            <el-input
              v-model="insertData.descr"
              :placeholder="$t('dataManage.layerObj.prompt16')"
              class="insertWidth"
            ></el-input>
            <el-input v-model="insertData.descr" :placeholder="$t('dataManage.layerObj.prompt16')"
              class="insertWidth"></el-input>
          </el-form-item>
          <el-form-item :label="$t('common.bak')">
            <el-input
              v-model="insertData.bak"
              :placeholder="$t('dataManage.layerObj.prompt17')"
              class="insertWidth"
            ></el-input>
            <el-input v-model="insertData.bak" :placeholder="$t('dataManage.layerObj.prompt17')"
              class="insertWidth"></el-input>
          </el-form-item>

        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
          style="float: right; margin-right: 10%;"
        >
          <el-button
            @click="setInsertCannel"
            size="small"
          >{{ $t('common.cancel') }}</el-button>
          <el-button
            type="primary"
            size="small"
            @click="setInsertConfirm"
          >{{ $t('common.confirm') }}</el-button>
        <span slot="footer" class="dialog-footer" style="float: right; margin-right: 10%;">
          <el-button @click="setInsertCannel" size="small">{{ $t('common.cancel') }}</el-button>
          <el-button type="primary" size="small" @click="setInsertConfirm">{{ $t('common.confirm') }}</el-button>
        </span>
      </div>
    </el-dialog>
    <el-dialog
      :title="$t('common.edit')"
      :visible.sync="editDialog"
      width="50%"
      :before-close="handleEditClose"
    >
    <el-dialog :title="$t('common.edit')" :visible.sync="editDialog" width="50%" :before-close="handleEditClose">
      <div style="width: 100%;max-height: 63vh;overflow-y: auto;">
        <el-form
          :model="editData"
          class="demo-form-inline"
          label-width="120px"
        >
        <el-form :model="editData" class="demo-form-inline" label-width="120px">
          <el-form-item :label="$t('dataManage.layerObj.resourceName')">
            <el-input
              v-model="editData.cnName"
              :placeholder="$t('dataManage.layerObj.prompt13')"
              class="insertWidth"
            ></el-input>
            <el-input v-model="editData.cnName" :placeholder="$t('dataManage.layerObj.prompt13')"
              class="insertWidth"></el-input>
          </el-form-item>
          <!-- <el-form-item :label="$t('dataManage.layerObj.englishName')">
            <el-input
@@ -393,134 +195,82 @@
            ></el-input>
          </el-form-item> -->
          <el-form-item :label="$t('dataManage.layerObj.firm')">
            <el-select
              class="insertWidth"
              v-model="editData.category"
              :placeholder="$t('dataManage.layerObj.prompt3')"
            >
              <el-option
                v-for="item in serviceType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('dataManage.layerObj.serviceType')">
            <el-select
              class="insertWidth"
              v-model="editData.type"
              @change="setEdtitTypeChange"
              :placeholder="$t('dataManage.layerObj.prompt8')"
            >
              <el-option
                v-for="item in categoryType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
            <el-select class="insertWidth" v-model="editData.category" :placeholder="$t('dataManage.layerObj.prompt3')">
              <el-option v-for="item in serviceType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('dataManage.layerObj.dataType')">
            <el-select
              class="insertWidth"
              v-model="editData.data"
              :placeholder="$t('dataManage.layerObj.prompt3')"
              :disabled="editDisabled"
            >
              <el-option
                v-for="item in dataType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
            <el-select class="insertWidth" v-model="editData.data" @change="setEdtitTypeChange"
              :placeholder="$t('dataManage.layerObj.prompt3')">
              <el-option v-for="item in dataType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('dataManage.layerObj.serviceType')">
            <el-select class="insertWidth" v-model="editData.type" :placeholder="$t('dataManage.layerObj.prompt8')">
              <el-option v-for="item in categoryType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item :label="$t('dataManage.layerObj.tableName')">
            <el-input
              v-model="editData.tab"
              class="insertWidth"
              :placeholder="$t('dataManage.layerObj.prompt12')"
            ></el-input>
            <el-input v-model="editData.tab" class="insertWidth"
              :placeholder="$t('dataManage.layerObj.prompt12')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('dataManage.layerObj.serviceAddress')">
            <el-input
              v-model="editData.url"
              :placeholder="$t('dataManage.layerObj.prompt4')"
              class="insertWidth"
            ></el-input>
            <el-input v-model="editData.url" :placeholder="$t('dataManage.layerObj.prompt4')"
              class="insertWidth"></el-input>
          </el-form-item>
          <el-form-item :label="$t('dataManage.layerObj.testAddress')">
            <el-input
              v-model="editData.test"
              :placeholder="$t('dataManage.layerObj.prompt9')"
              class="insertWidth"
            ></el-input>
            <el-input v-model="editData.test" :placeholder="$t('dataManage.layerObj.prompt9')"
              class="insertWidth"></el-input>
          </el-form-item>
          <el-form-item :label="$t('dataManage.layerObj.serviceParameters')">
            <el-input
              v-model="editData.args"
              :placeholder="$t('dataManage.layerObj.prompt15')"
              class="insertWidth"
            ></el-input>
            <el-input v-model="editData.args" :placeholder="$t('dataManage.layerObj.prompt15')"
              class="insertWidth"></el-input>
          </el-form-item>
          <el-form-item :label="$t('dataManage.layerObj.status')">
            <div class="insertWidth">
              <el-radio
                v-model="editData.status"
                label="0"
              >{{$t('dataManage.layerObj.disable')}}</el-radio>
              <el-radio
                v-model="editData.status"
                label="1"
              > {{$t('dataManage.layerObj.enableOriginalAddress')}}</el-radio>
              <el-radio
                v-model="editData.status"
                label="2"
              > {{$t('dataManage.layerObj.enableProxy')}}</el-radio>
              <el-radio v-model="editData.status" label="0">{{ $t('dataManage.layerObj.disable') }}</el-radio>
              <el-radio v-model="editData.status" label="1">
                {{ $t('dataManage.layerObj.enableOriginalAddress') }}</el-radio>
              <el-radio v-model="editData.status" label="2"> {{ $t('dataManage.layerObj.enableProxy') }}</el-radio>
            </div>
          </el-form-item>
          <el-form-item :label="$t('dataManage.layerObj.descr')">
            <el-input
              v-model="editData.descr"
              :placeholder="$t('dataManage.layerObj.prompt16')"
              class="insertWidth"
            ></el-input>
            <el-input v-model="editData.descr" :placeholder="$t('dataManage.layerObj.prompt16')"
              class="insertWidth"></el-input>
          </el-form-item>
          <el-form-item :label="$t('common.bak')">
            <el-input
              v-model="editData.bak"
              :placeholder="$t('dataManage.layerObj.prompt17')"
              class="insertWidth"
            ></el-input>
            <el-input v-model="editData.bak" :placeholder="$t('dataManage.layerObj.prompt17')"
              class="insertWidth"></el-input>
          </el-form-item>

        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
          style="float: right; margin-right: 10%;"
        >
          <el-button
            @click="setEditReset"
            size="small"
          >{{ $t('common.reset') }}</el-button>
          <el-button
            type="primary"
            size="small"
            @click="setEditConfirm"
          >{{ $t('common.confirm') }}</el-button>
        <span slot="footer" class="dialog-footer" style="float: right; margin-right: 10%;">
          <el-button @click="setEditReset" size="small">{{ $t('common.reset') }}</el-button>
          <el-button type="primary" size="small" @click="setEditConfirm">{{ $t('common.confirm') }}</el-button>
        </span>
      </div>
    </el-dialog>

    <!-- 地址预览 -->
    <el-dialog :title="$t('common.preview')" :class="isFullscreen ? '' : 'dialogClass_his'"
      custom-class="handleDialogClass" width="73.4%" :fullscreen="isFullscreen" v-if="prevDialog"
      :visible.sync="prevDialog" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <dialog-header slot="title" :dialog-tittle="$t('common.preview')" :fullscreen="isFullscreen"
        @handle-closed="handleClose" @is-fullscreen="onFullscreen"></dialog-header>
      <div :class="{ 'fullscreen1': isFullscreen }">
        <mapview v-if="showMapView"></mapview>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import MyBread from "../../components/MyBread.vue";
import dialogHeader from './dialogHeader.vue'
import server from '../../components/js/server.js'
import {
  getPerms,
  select_Res_ByPageAndCount,
@@ -528,23 +278,28 @@
  res_deletes,
  res_updates,
  res_update,
  token_insertNewToken
} from "../../api/api";
import $ from 'jquery'
import { getToken } from '../../utils/auth';
import { serve_type, data_type, category_type } from './js/layerManage.js'
import { json } from "body-parser";
import { flatten } from '@turf/turf';

import mapview from '../../components/MapView/moonMap.vue'
export default {
  name: "catalogueManage",
  components: {
    MyBread,
    MyBread, mapview, 'dialog-header': dialogHeader,
  },
  data() {

    return {
      formInline: {
        name: null
        name: null,
        type: null,
        data: null,
        category: null,
        status: null
      },
      menuStatus: {
        delete: false,
@@ -574,10 +329,24 @@
      editDialog: false,
      insertDialog: false,
      dataType: [],
      dataTypes: [],
      serviceType: [],
      categoryType: [],
      insertDisabled: false,
      editDisabled: false,
      isFullscreen: false,
      prevDialog: false,
      showMapView: false,
      statusType: [
        {
          label: '禁用', value: 0
        },
        {
          label: '启用原始地址', value: 1
        }, {
          label: '启用代理地址', value: 2
        }
      ], resToken: null,
    };
  },
  watch: {
@@ -588,7 +357,37 @@
    window.removeEventListener("resize", this.onResize);
  },
  methods: {
    async getResToken() {
      if (this.$store.state.resToken) {
        this.resToken = this.$store.state.resToken
      } else {
        const data = await token_insertNewToken({
          type: 1,
          min: 43200
        });
        if (data.code == 200) {
          this.$store.state.resToken = data.result.token;
          this.resToken = data.result.token;
        }
      }
    },

    //是否为全屏函数
    onFullscreen(fullscreen) {
      this.isFullscreen = fullscreen;
    },
    //预览弹窗关闭
    handleClose() {
      this.prevDialog = false
      this.showMapView = false;

    },
    async setEditConfirm() {
      if (this.editData.url.indexOf('?') > -1) {
        var val = this.editData.url.split("?");
        this.editData.url = val[0];
        this.editData.args = this.editData.args + val[1];
      }
      const data = await res_update(this.editData);
      if (data.code == 200) {
        this.$message({
@@ -619,40 +418,73 @@
        .catch(_ => { });
    },
    setEmptyData() {
      this.formInline.name = ""
      this.formInline = {
        name: null,
        type: null,
        data: null,
        category: null,
        status: null
      }
      this.setListDataStart()
    },
    setInsertTableData() {
      this.insertData.category = this.serviceType[0].value
      this.insertData.type = this.categoryType[0].value

      this.insertData.data = this.dataType[0].value
      this.setServeTypeChange(this.dataType[0].children)
      this.insertDialog = true;
      this.setinsertDisabled();

    },
    setinsertDisabled() {
      var val = [0, 4, 5]
      if (val.indexOf(this.insertData.type) > -1) {
        this.insertDisabled = true
        this.insertData.data = this.dataType[0].value;
      } else {
        this.insertDisabled = false
    setServeTypeChange(res) {
      var std = [];
      for (var i in res) {
        for (var j in serve_type) {
          if (serve_type[j].value == res[i]) {
            std.push({
              value: serve_type[j].value,
              label: serve_type[j].name,
            })
          }
        }
      }
      this.categoryType = std
      this.insertData.type = this.categoryType[0].value
    },

    setCategoryTypeChange(item) {
      this.setinsertDisabled()
      var filter = this.dataType.filter(res => {
        if (res.value == item) {
          return res
        }
      })
      this.setServeTypeChange(filter[0].children)
    },
    setEdtitTypeChange(item) {
      this.setEditDisabled()
      var filter = this.dataType.filter(res => {
        if (res.value == item) {
          return res
        }
      })
      this.setEditServeTypeChange(filter[0].children)
    },
    setEditDisabled() {
      var val = [0, 4, 5]
      if (val.indexOf(this.editData.type) > -1) {
        this.editDisabled = true
        this.editData.data = this.dataType[0].value;
      } else {
        this.editDisabled = false
    setEditServeTypeChange(res) {
      var std = [];
      for (var i in res) {
        for (var j in serve_type) {
          if (serve_type[j].value == res[i]) {
            std.push({
              value: serve_type[j].value,
              label: serve_type[j].name,
            })
          }
        }
      }
      this.categoryType = std
      this.editData.type = this.categoryType[0].value
    },




    async setDelTableData() {
      if (this.multipleSelection.length <= 0) {
        return this.$message('请选择要删除的资源数据');
@@ -687,6 +519,12 @@
        .catch(_ => { });
    },
    async setInsertConfirm() {
      if (this.insertData.url.indexOf('?') > -1) {
        var val = this.insertData.url.split("?");
        this.insertData.url = val[0];
        this.insertData.args = val[1] + this.insertData.args;
      }

      this.insertData.status = parseInt(this.insertData.status)
      const data = await res_insert(this.insertData);
      if (data.code == 200) {
@@ -707,30 +545,32 @@
      var std = [];
      var ste = [];
      var str = [];
      for (var i in serve_type) {
        ste.push({
          value: serve_type[i].value,
          label: serve_type[i].name,
        })
      }
      this.serviceType = std;
      for (var i in category_type) {
        std.push({
        ste.push({
          value: category_type[i].value,
          label: category_type[i].name,
        })
      }
      this.categoryType = ste;
      this.serviceType = ste;

      for (var i in data_type) {
        str.push({
          value: data_type[i].value,
          label: data_type[i].name,
          children: data_type[i].children
        })
      }
      this.dataType = str;

      for (var i in serve_type) {
        std.push({
          value: serve_type[i].value,
          label: serve_type[i].name,
        })
      }
      this.dataTypes = std;
    },
    setScopeEdit(row) {
      
      this.copyData = JSON.parse(JSON.stringify(row));
      this.editData = JSON.parse(JSON.stringify(row));
      this.editData.status = this.editData.status.toString()
@@ -740,16 +580,36 @@
        this.editData.data = parseInt(this.editData.data)
      }

      this.setEditDisabled()
      this.setEditDataStart(this.editData.category);

      this.editDialog = true
    },
    setEditDataStart(res) {
      for (var i in data_type) {
        if (data_type[i].value == res) {
          this.setServeTypeChange(data_type[i].children)
          break
        }
      }
    },





    setScopePreview(row) {
      this.prevDialog = true;
      this.showMapView = true;
      setTimeout(() => {
        server.addLayer(row)
      }, 1000);
    },
    formatProxy(row, column) {
      var token = getToken()
      var token = this.resToken
      if (row.proxy && row.proxy.indexOf('{token}') > -1) {
        var val = row.proxy.replaceAll('{token}', token)
        return BASE_URL + val
      }

    },
    copyText(row, column, cell, event) {
      // 双击复制
@@ -825,14 +685,29 @@
    },
    setResData(row, column) {
      switch (row.data) {
        case 0:
          return "URL"
          break;
        case 1:
          return "DOM"
          return "数字正射影像图"
          break;
        case 2:
          return "DEM"
          return "场景地形数据"
          break;
        case 3:
          return "数字高程模型（晕渲图）"
          break;
        case 4:
          return "单波段栅格数据"
          break;
        case 5:
          return "多光谱栅格数据"
          break;
        case 6:
          return "高光谱栅格数据"
          break;
        case 7:
          return "矢量图层"
          break;
        case 8:
          return "三维模型"
          break;
        default:
          return ""
@@ -852,6 +727,9 @@
          break;
        case 3:
          return "数简"
          break;
        case 4:
          return "ArcGisServer"
          break;
        default:
          return ""
@@ -876,7 +754,11 @@
      }
    },
    async getResTableData() {
      this.listData.name = this.formInline.name
      this.listData.name = this.formInline.name;
      this.listData.data = this.formInline.data;
      this.listData.type = this.formInline.type;
      this.listData.category = this.formInline.category;
      this.listData.status = this.formInline.status;
      const data = await select_Res_ByPageAndCount(this.listData);
      if (data.code != 200) {
        return this.$message({
@@ -957,10 +839,12 @@
  },
  mounted() {
    window.addEventListener("resize", this.onResize);
    this.getResToken();
    this.calHeight();
    this.getPerms();
    this.setListDataStart();
    this.optionsStart();


  },
};
@@ -983,23 +867,40 @@
    width: 100%;
    // border-bottom: 2px solid #e4e7ed;
    margin-bottom: 10px;

    .el-form-item {
      margin: 5px;
    }
  }
}

.fullscreen1 {
  width: 100%;
  height: 94vh;
}

/deep/ .el-input__suffix {
  top: 50%;
  transform: translateY(-50%);
}

.insertWidth {
  width: calc(100% - 200px);
}

/deep/.el-dialog__body {
  padding: 10px !important;
}

/deep/.el-dialog__header {
  padding: 10px !important;
}
</style>
<style >
.el-message-box {
  background: #303030 !important;
}

.el-message-box p {
  color: #fff !important;
}