资产管理动态字段

xiangpei

2024-08-16 7ae73495487e9bebb986d53ca923a9ebac231618

 src/components/RightToolbar/index.vue

@@ -7,6 +7,9 @@
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="自定义列" placement="top">
        <el-button size="mini" circle icon="el-icon-refresh" @click="addDynamicColumn()" />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
        <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
        <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
@@ -29,13 +32,45 @@
        @change="dataChange"
      ></el-transfer>
    </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="dynamicColumnClose">取 消</el-button>
        <el-button type="primary" size="small" :disabled="!dynamicColumnList || dynamicColumnList.length < 1" @click="saveColumns">保 存</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import { addDynamicColumn, deleteDynamicColumnById, editDynamicColumn, getDynamicColumnList } from '@/api/platform/dynamicColumn'
export default {
  name: "RightToolbar",
  data() {
    return {
      dynamicColumnList: [],
      showDynamicColumn: false,
      // 显隐数据
      value: [],
      // 弹出层标题
@@ -80,6 +115,7 @@
    }
  },
  created() {
    this.getDyColumn()
    if (this.showColumnsType == 'transfer') {
      // 显隐列初始默认隐藏列
      for (let item in this.columns) {
@@ -90,6 +126,45 @@
    }
  },
  methods: {
    getDyColumn() {
      if (this.$route.path.concat("equipment")) {
        // 查询动态列
        let params = {
          tableName: 't_monitor'
        }
        getDynamicColumnList(params).then(res => {
          this.dynamicColumnList = res.data
        })
      }
    },
    addDynamicColumn() {
      this.showDynamicColumn = true
    },
    saveColumns() {
      editDynamicColumn(this.dynamicColumnList).then(res => {
        this.$message.success("保存成功")
        this.showDynamicColumn = false
      })
    },
    addColumn() {
      this.dynamicColumnList.push({
        id: null,
        labelValue: ''
      })
    },
    delColumn(id, index) {
      if (! id) {
        this.dynamicColumnList.splice(index, 1)
        return
      }
      deleteDynamicColumnById(id).then(res => {
        this.$message.success("删除成功")
        this.getDyColumn();
      })
    },
    dynamicColumnClose() {
      this.showDynamicColumn = false
    },
    // 搜索
    toggleSearch() {
      this.$emit("update:showSearch", !this.showSearch);