表格添加字段排序功能

surprise

2023-11-29 40860ef4a79da4d4f8ffce369011c1a2450fa3c1

 src/views/datamanage/resourceManagement.vue

@@ -63,40 +63,42 @@
          @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 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"
          <!-- <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 align="center" prop="createTime" :label="$t('dataManage.vmobj.createontime')" width="200"
          <!-- <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 align="center" prop="updateTime" :label="$t('dataManage.vmobj.updateontime')" width="200"
          <!-- <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="200">
          <!-- <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 @click="setScopeSee(scope.row)" size="mini" type="primary" plain>{{ $t('common.see')
              }}</el-button>
              <el-button size="small" v-show="scope.row.status != 0" plain @click="setScopePreview(scope.row)">{{
              <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>
@@ -254,7 +256,60 @@
        </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"
@@ -327,6 +382,8 @@
        data: null
      },
      editDialog: false,
      seeDialog: false,
      seeData: {},
      insertDialog: false,
      dataType: [],
      dataTypes: [],
@@ -569,6 +626,24 @@
      }
      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));