导出与自定义标签

zxl

2025-05-12 bcf398d588c873875e680541431c267d611ef557

 src/views/system/data-manage/data-detail/index.vue

@@ -98,14 +98,34 @@
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <right-toolbar style="position: absolute;right: 0px" v-show="index !== 'image_resource_security'"  :showSearch.sync="showSearch" @queryTable="handleQuery"
                     :columns="showList"></right-toolbar>


        <right-toolbar style="position: absolute;right: 0px" v-show="index !== 'image_resource_security'"  :showSearch.sync="showSearch" @queryTable="handleQuery"
                       :columns="showList"></right-toolbar>
      <div>
        <el-tooltip v-show="needDynamicColumn" style="position: absolute" class="item" effect="dark" content="自定义列" placement="top">
          <el-button size="mini" circle icon="el-icon-collection-tag" @click="addDynamicColumn()" />
        </el-tooltip>
      </div>

    </div>

    <div  v-show="exportUrl" style="margin-bottom: 5px">
      <el-button  slot="reference" type="primary" size="mini" @click="handleExport(exportUrl)" plain
                 v-hasPermi="['platform:platform:export']">导出
      </el-button>
    <div  v-show="exportUrl" style="margin-bottom: 5px" >
      <el-form :model="exportParam" :inline="true">
        <el-form-item label="列选择">
          <el-select  v-model="exportParam.id" size="small">
            <el-option  v-for="option in dynamicColumnList" :key="option.id" :label="option.labelValue" :value="option.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="列值">
          <el-input v-model="exportParam.value" size="small" placeholder="自定义列值"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="handleExport(exportUrl)" plain v-hasPermi="['platform:platform:export']">导出
          </el-button>
        </el-form-item>
      </el-form>

    </div>

    <div v-show="index === 'image_resource_security'" style="margin-bottom: 5px">
@@ -119,10 +139,21 @@
      <el-table v-loading="loading" :data="tableData.list">
<!--        <el-table-column :prop="item.prop" :label="item.label" :width="item.width" v-for="(item, index) in tableHead"-->
<!--                         :key="index" v-if="showListPD(item)">-->
        <el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in tableHead"
          <el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in tableHead"
                         :key="index" v-if="showListPD(item)">
          <template slot-scope="scope">
            <span :class="{'error-text': scope.row[item.error]}"> {{ scope.row[item.prop] }} </span>
          </template>
        </el-table-column>
        <el-table-column v-for="(column, index) in dynamicColumnList" :key="index" :label="column.labelValue" :prop="column.propName" align="center">
          <template slot-scope="scope">
            {{ getDynamicValue(scope.row, column.propName) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                       v-hasPermi="['point:edit']">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
@@ -183,7 +214,57 @@
      </div>
    </el-dialog>

    <el-dialog
      title="添加动态列"
      :visible.sync="showDynamicColumn"
      width="500px"
      :before-close="dynamicColumnClose">
      <div>
        <div style="margin-bottom: 8px">
          <el-button style="float: right" type="primary" @click="addColumn" size="small">新增一条</el-button>
        </div>
        <div v-for="(dynamicColumn, index) in dynamicColumnList" :key="index">
          <el-form :inline="true" size="small">
            <el-form-item label="列名" prop="labelValue">
              <div style="display: flex; flex-direction: row">
                <el-input v-model="dynamicColumn.labelValue"></el-input>
                <el-button style="margin-left: 8px" type="danger" @click="delColumn(dynamicColumn.id, index)">删除</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeAdd">取 消</el-button>
        <el-button type="primary" size="small" :disabled="!dynamicColumnList || dynamicColumnList.length < 1" @click="saveColumns">保 存</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="修改"
      :visible.sync="showUpdateDynamicColumn"
      width="500px"
      :before-close="updateValueDynamicColumnClose">
        <div v-for="(dynamicColumn, index) in updateDynamicList" :key="index">
          <el-form :inline="true" size="small">
            <el-form-item :label="dynamicColumn.labelValue" :prop="dynamicColumn.propName"  label-width="100px">
              <div style="display: flex; flex-direction: row">
                <el-input v-model="dynamicColumn.columnValue"></el-input>
              </div>
            </el-form-item>
          </el-form>
        </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeEdit">取 消</el-button>
        <el-button type="primary" size="small" @click="updateValue">确认</el-button>
      </span>
    </el-dialog>

  </div>



</template>

<script>
@@ -191,7 +272,7 @@
import {carData, equipment, faceData, videoData} from "./list";
import {listSecurity, updateSecurity} from '@/api/platform/resource-security';
import {getToken} from "@/utils/auth";

import {deleteDynamicColumnById,editDynamicColumnByPath,getDynamicColumnListByTableName,updateDynamicValue} from  '@/api/platform/dynamicColumn';
export default {
  name: "Platform",
  computed: {
@@ -201,6 +282,20 @@
  },
  data() {
    return {
      //导出参数
      exportParam: {
        id: '',
        value: ''
      },
      //复原用
      saveDynamicColumnList:[],
      dynamicColumnList: [],
      showDynamicColumn:false,
      showUpdateDynamicColumn:false,
      updateDynamicList:[],
      upDateDynamicListNew:[],
      id: null,

      // 导入参数
      upload: {
        // 是否显示弹出层
@@ -277,6 +372,7 @@
      cardList: [],
      index: null,
      exportUrl: null,
      needDynamicColumn:null,
    };
  },

@@ -298,13 +394,15 @@

    if (this.$route.query.type === '1') {
      let data = videoData.table.filter(item => item.index === this.$route.query.index)[0]
      console.log(data)
      this.tableHead = data.columns;
      this.cardList = data.card;
      this.showList = data.showList;
      this.optionsStatus = data.optionsStatus;
      this.options = data.options;
      this.optionsName = data.optionsName;
      this.exportUrl = data.exportUrl
      this.exportUrl = data.exportUrl;
      this.needDynamicColumn = data.needDynamicColumn;
    }
    if (this.$route.query.type === '2') {
      let data = carData.table.filter(item => item.index === this.$route.query.index)[0]
@@ -315,6 +413,7 @@
      this.options = data.options;
      this.optionsName = data.optionsName;
      this.exportUrl = data.exportUrl
      this.needDynamicColumn = data.needDynamicColumn;
    }
    if (this.$route.query.type === '3') {
      let data = faceData.table.filter(item => item.index === this.$route.query.index)[0]
@@ -325,6 +424,7 @@
      this.options = data.options;
      this.optionsName = data.optionsName;
      this.exportUrl = data.exportUrl
      this.needDynamicColumn = data.needDynamicColumn;
    }
    if (this.$route.query.type === '4') {
      let data = equipment.table.filter(item => item.index === this.$route.query.index)[0]
@@ -335,12 +435,102 @@
      this.options = data.options;
      this.optionsName = data.optionsName;
      this.exportUrl = data.exportUrl
      this.needDynamicColumn = data.needDynamicColumn;
    }
    this.getList();
    this.getDyColumn();
  },
  methods: {
    getColor(value, prop) {
    closeAdd(){
      this.dynamicColumnList = JSON.parse(JSON.stringify(this.saveDynamicColumnList));
      this.showDynamicColumn = false;
    },
    closeEdit(){
      this.showUpdateDynamicColumn = false;
    },
    addDynamicColumn() {
      this.showDynamicColumn = true
    },
    saveColumns() {
      let params = {
        pathName: this.$route.query.ruleName,
      }
      console.log(params.pathName)
      editDynamicColumnByPath(params,this.dynamicColumnList).then(res => {
        this.$message.success("保存成功")
        this.$emit('refreshHeader');
        this.showDynamicColumn = false
        //重新刷新页面
        this.getDyColumn()
        this.getList()
      })
    },
    addColumn() {
      this.dynamicColumnList.push({
        id: null,
        labelValue: '',
      })
    },
    handleUpdate(row){
      this.showUpdateDynamicColumn = true;
      //row 赋值给元素
      console.log(row)
      if("录像可用率" === this.$route.query.ruleName){
        this.id = row.id;
      }else {
        this.id = row.no;
      }
      //深拷贝
      this.updateDynamicList = JSON.parse(JSON.stringify(row.dynamicColumnList));
      console.log(updateDynamicList)
    },
    updateValue(){
      let data = {
        id:this.id,
        dynamicColumnVOList:this.updateDynamicList,
      }
      updateDynamicValue(data).then(res =>{
        this.$message.success("修改成功")
        this.getList();
        this.showUpdateDynamicColumn = false;
      })
    },

    delColumn(id, index) {
      if(id) {
        deleteDynamicColumnById(id).then(res => {
          this.$message.success("删除成功")
          this.getDyColumn();
          this.$emit('refreshHeader');
        })
      }else {
        this.dynamicColumnList.splice(index,1)
      }
    },
    getDyColumn() {
      // 查询动态列
      let params = {
        pathName: this.$route.query.ruleName,
      }

      getDynamicColumnListByTableName(params).then(res => {
        this.dynamicColumnList = res.data
        //复原用
        this.saveDynamicColumnList = JSON.parse(JSON.stringify(this.dynamicColumnList));
        this.refreshkey+=1
      })
    },
    getDynamicValue(row, propName) {
      let target = row.dynamicColumnList.filter(item => item.propName === propName)
      return target && target.length > 0 ? target[0].columnValue : ''
    },
    dynamicColumnClose() {
      this.showDynamicColumn = false
    },
    updateValueDynamicColumnClose() {
      this.showUpdateDynamicColumn = false
    },
    getColor(value, prop) {
      // 默认颜色
      return 'red';
    },
@@ -403,6 +593,7 @@
        this.tableData = response.data;
        this.total = response.total;
        this.loading = false;

      });
    },
    // 取消按钮
@@ -441,11 +632,14 @@
      this.upload.open = true;
    },
    handleExport(url) {
      this.download(url, {
        ...this.queryParams,
      }, this.$route.query.ruleName+`_${new Date().getTime()}.xlsx`, {
        timeout: 60000
      })
      const filteredParams = { ...this.queryParams };
      filteredParams.exportParam = this.exportParam;
      console.log(filteredParams)
      // this.download(url, {
      //    filteredParams,
      // }, this.$route.query.ruleName+`_${new Date().getTime()}.xlsx`, {
      //   timeout: 60000
      // })
    },
    /** 下载模板 */
    importTemplate() {
@@ -535,4 +729,8 @@
  width: 150px;
  margin: 0 30px;
}
.custom-label-form-item .el-form-item__label {
  width: 100px ; /* 固定宽度为 100px */
  text-align: right; /* 可选：让文本右对齐 */
}
</style>