表格添加字段排序功能

surprise

2023-11-29 40860ef4a79da4d4f8ffce369011c1a2450fa3c1

 src/views/datamanage/resourceManagement.vue

@@ -1,392 +1,193 @@
<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 sortable align="center" prop="cnName" :label="$t('dataManage.layerObj.resourceName')" />
          <!-- <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 sortable align="center" prop="type" :label="$t('dataManage.layerObj.serviceType')"
            :formatter="setResType" />
          <el-table-column sortable align="center" prop="data" :label="$t('dataManage.layerObj.dataType')"
            :formatter="setResData" />
          <!-- <el-table-column align="center" prop="tab" :label="$t('dataManage.layerObj.tableName')" width="150" /> -->
          <el-table-column sortable align="center" prop="url" :label="$t('dataManage.layerObj.serviceAddress')" />
          <!-- <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 sortable align="center" prop="proxy" :label="$t('dataManage.layerObj.proxyAddress')"
            :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 sortable align="center" prop="createTime" :label="$t('dataManage.vmobj.createontime')"
            :formatter="formatData" />
          <!-- <el-table-column align="center" prop="updateName" :label="$t('dataManage.vmobj.updateonuser')" width="200" /> -->
          <el-table-column sortable align="center" prop="updateTime" :label="$t('dataManage.vmobj.updateontime')"
            :formatter="formatData" />
          <!-- <el-table-column align="center" prop="bak" :label="$t('common.bak')" width="200" /> -->
          <el-table-column :label="$t('common.operate')" width="300">
            <template slot-scope="scope">
              <el-button
                @click="setScopeEdit(scope.row)"
                size="small"
                type="warning"
                plain
              >{{ $t('common.update') }}</el-button>
              <el-button @click="setScopeSee(scope.row)" size="mini" type="primary" plain>{{ $t('common.see')
              }}</el-button>
              <el-button @click="setScopeEdit(scope.row)" size="mini" type="warning" plain>{{ $t('common.update')
              }}</el-button>
              <el-button size="mini" 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-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"
              @change="setCategoryTypeChange"
              :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.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-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 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
@@ -396,133 +197,135 @@
            ></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-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"
              @change="setEdtitTypeChange"
              :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="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-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=" " :visible.sync="seeDialog" width="30%" :before-close="handleSeeClose">
      <div style="width: 100%;max-height: 63vh;overflow-y: auto;color:white">
        <el-form :model="seeData" class="demo-form-inline" label-width="120px">
          <el-form-item :label="$t('dataManage.layerObj.resourceName')">
            {{ seeData.cnName }}
          </el-form-item>

          <el-form-item :label="$t('dataManage.layerObj.englishName')">
            {{ seeData.enName }}
          </el-form-item>
          <el-form-item :label="$t('dataManage.layerObj.status')">
            {{ seeData.status }}
          </el-form-item>
          <el-form-item :label="$t('dataManage.layerObj.firm')">
            {{ seeData.category }}
          </el-form-item>
          <el-form-item :label="$t('dataManage.layerObj.serviceType')">
            {{ seeData.type }}
          </el-form-item>

          <el-form-item :label="$t('dataManage.layerObj.dataType')">
            {{ seeData.data }}
          </el-form-item>
          <el-form-item :label="$t('dataManage.layerObj.tableName')">
            {{ seeData.tab }}
          </el-form-item>
          <el-form-item :label="$t('dataManage.layerObj.serviceParameters')">
            {{ seeData.args }}
          </el-form-item>
          <el-form-item :label="$t('dataManage.layerObj.testAddress')">
            {{ seeData.test }}
          </el-form-item>
          <el-form-item :label="$t('dataManage.layerObj.proxyAddress')">
            {{ seeData.proxy }}
          </el-form-item>
          <el-form-item :label="$t('dataManage.layerObj.descr')">
            {{ seeData.descr }}
          </el-form-item>
          <el-form-item :label="$t('dataManage.vmobj.createonuser')">
            {{ seeData.createName }}
          </el-form-item>
          <el-form-item :label="$t('dataManage.vmobj.createontime')">
            {{ seeData.createTime }}
          </el-form-item>
          <el-form-item :label="$t('dataManage.vmobj.updateonuser')">
            {{ seeData.updateName }}
          </el-form-item>
          <el-form-item :label="$t('dataManage.vmobj.updateontime')">
            {{ seeData.updateTime }}
          </el-form-item>
        </el-form>

      </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,
@@ -530,23 +333,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,12 +382,28 @@
        data: null
      },
      editDialog: false,
      seeDialog: false,
      seeData: {},
      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: {
@@ -590,7 +414,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({
@@ -621,7 +475,13 @@
        .catch(_ => { });
    },
    setEmptyData() {
      this.formInline.name = ""
      this.formInline = {
        name: null,
        type: null,
        data: null,
        category: null,
        status: null
      }
      this.setListDataStart()
    },
    setInsertTableData() {
@@ -716,6 +576,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) {
@@ -752,9 +618,34 @@
        })
      }
      this.dataType = str;

      for (var i in serve_type) {
        std.push({
          value: serve_type[i].value,
          label: serve_type[i].name,
        })
      }
      this.dataTypes = std;
    },
    handleSeeClose() {
      this.seeDialog = false
      this.seeData = {};
    },

    setScopeSee(row) {
      this.seeDialog = true;
      this.seeData = JSON.parse(JSON.stringify(row));
      this.seeData.status = this.setResStatus(this.seeData)
      this.seeData.category = this.setResCategory(this.seeData)
      this.seeData.data = this.setResData(this.seeData)
      this.seeData.type = this.setResType(this.seeData)
      this.seeData.proxy = this.formatProxy(this.seeData)
      this.seeData.createTime = this.seeData.createTime ? this.format(this.seeData.createTime) : null;

      this.seeData.updateTime = this.seeData.updateTime ? this.format(this.seeData.updateTime) : null;
    },

    setScopeEdit(row) {

      this.copyData = JSON.parse(JSON.stringify(row));
      this.editData = JSON.parse(JSON.stringify(row));
      this.editData.status = this.editData.status.toString()
@@ -763,10 +654,33 @@
      if (this.editData.data) {
        this.editData.data = parseInt(this.editData.data)
      }

      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
@@ -889,6 +803,9 @@
        case 3:
          return "数简"
          break;
        case 4:
          return "ArcGisServer"
          break;
        default:
          return ""
          break;
@@ -912,7 +829,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({
@@ -993,10 +914,12 @@
  },
  mounted() {
    window.addEventListener("resize", this.onResize);
    this.getResToken();
    this.calHeight();
    this.getPerms();
    this.setListDataStart();
    this.optionsStart();


  },
};
@@ -1019,23 +942,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;
}