Fixiaobai
2023-11-03 f27ae4aa1a3b72bf8dc934efd6f084ba5a101a48
src/views/basic/param/index.vue
@@ -1,8 +1,10 @@
<template>
  <div class="mod-config">
    <basic-container>
      <ttable
      <!-- <ttable
        :table="table"
        :row-key="id"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        @handleSelectionChange="handleSelectionChange"
        :uploadInfo="uploadInfo"
        :prelang="prelang"
@@ -11,13 +13,70 @@
        ref="paramTable"
      >
        <template #toolbar></template>
      </ttable>
      </ttable> -->
      <el-row style="margin-left: 10px;">
        <el-form :inline="true" :model="table" class="demo-form-inline">
          <el-form-item label="参数项">
            <el-input v-model="table.param" placeholder="参数项"></el-input>
          </el-form-item>
          <el-form-item label="参数编号">
            <el-input v-model="table.code" placeholder="参数编号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row style="margin-left: 10px;height: 80vh;">
        <el-row>
          <el-button type="defult" @click="addOrUpdateHandle">新增</el-button>
          <el-button type="defult" @click="onSearch">导入</el-button>
          <!-- <el-button type="defult" @click="isExpandAllClick">展开/折叠</el-button> -->
        </el-row>
        <el-row style="padding-top: 20px;">
          <!--    表格数据区-->
          <el-table  height="480" style="width: 100%;" :data="table.data" row-key="id"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>
            <el-table-column prop="code" label="参数编号"></el-table-column>
            <el-table-column prop="parameterItem" label="参数项"></el-table-column>
            <el-table-column prop="type" label="参数类型">
              <template slot-scope="scope">
                <el-col v-show="scope.row.bianJi===false">{{ scope.row.type }}</el-col>
                <el-col v-show="scope.row.bianJi">
                  111
                  <!-- <el-select v-model="scope.row.type" filterable placeholder="请选择参数类型" style="width:100%"
                    @change="changeType">
                    <el-option v-for="(item, index) in this.typeOptions" :label="item.label" :value="item.value"
                      :key="item.value">
                    </el-option>
                  </el-select> -->
                </el-col>
              </template>
            </el-table-column>
            <el-table-column prop="parameterFormat" label="参数格式"></el-table-column>
            <el-table-column prop="unit" label="单位"></el-table-column>
            <el-table-column prop="code" label="操作">
              <template slot-scope="scope">
                <el-row style=" display: flex;width: 100%;">
                  <el-col><el-button type="text">删除</el-button></el-col>
                  <el-col v-if="scope.row.isBianji">
                  <el-button @click="bianji(scope.row)" type="text">{{ scope.row.bianJiBtn }}</el-button>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          <el-row style="display: flex; justify-content: end;">
            <el-pagination :current-page="table.currentPage" @current-change="handlesCurrentChange"
              @size-change="sizeChangeHandle" :page-sizes="[10, 20, 50, 100]" :page-size="table.pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="table.total"></el-pagination>
          </el-row>
        </el-row>
      </el-row>
      <!-- 弹窗, 新增 / 修改 -->
      <table-form
        v-if="addOrUpdateVisible"
        ref="addOrUpdate"
        @refreshDataList="getData"
      ></table-form>
      <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getData"></table-form>
    </basic-container>
  </div>
</template>
@@ -30,6 +89,9 @@
export default {
  data() {
    return {
      isExpandAll: false,
      // 重新渲染表格状态
      refreshTable: true,
      ajaxFun: fetchList,
      typeOptions: [],
      multipleSelection: [],
@@ -47,14 +109,16 @@
        border: true, // 是否有纵向边框
        lazy: false, // 是否需要懒加载
        fit: true, // 列的宽度是否自撑开
        multiSelect: true, //
        multiSelect: false, //
        seqNo: true,
        isShowHide: true, // 是否显示显影按钮
        isSearch: true, // 高级查询按钮
        isSearch: false, // 高级查询按钮
        defaultOrderBy: { column: 'createTime', direction: 'desc' }
      },
      table: {
        param: null,
        total: 0,
        code: null,
        currentPage: 1,
        pageSize: 20,
        data: [],
@@ -77,6 +141,24 @@
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
          },
          {
            minWidth: '120',
            prop: 'second',
            label: '二级参数',
            sort: true,
            isTrue: true,
            isSearch: false,
            searchInfoType: 'text'
          },
          {
            minWidth: '130',
            prop: 'third',
            label: '三级参数',
            sort: true,
            isTrue: true,
            isSearch: false,
            searchInfoType: 'text'
          },
          {
@@ -182,11 +264,68 @@
  },
  created() {
    this.getParamType()
    this.getData()
  },
  methods: {
    changeType(){},
    bianji(row){
      // this.$set(row.bianJi,false,true)
      row.bianJi=true
      row.bianJiBtn='保存'
      console.log(row)
    },
    isExpandAllClick() {
      // console.log(1111);
      this.isExpandAll = !this.isExpandAll;
      this.$nextTick(() => {
        this.refreshTable = true;
      });
      // console.log(this.isExpandAll);
    },
    handlesCurrentChange() { },
    sizeChangeHandle() { },
    onSearch() { },
    // 获取数据列表
    getData() {
      this.$refs.paramTable.getDataList()
      let param = {
        parentId: 0,
        code: this.table.code,
        size: this.table.pageSize,
        current: this.table.currentPage,
        parameterItem: this.table.param
      }
      fetchList(param).then((res) => {
        console.log(res.data);
        this.table.total = res.data.data.total
        this.table.data = res.data.data.records
        let datas=JSON.parse(JSON.stringify(this.table.data))
        datas.forEach(l => {
          l.bianJi = false
          if (l.children.length < 1) {
            l.isBianji = true
            l.bianJiBtn='编辑'
          }
          if (l.children.length > 0) {
            l.isBianji = false
            l.children.forEach(c => {
              c.bianji = false
              if (c.children.length < 1) {
                c.isBianji = true
                c.bianJiBtn='编辑'
              } else {
                l.isBianji = false
                c.children.forEach(cc => {
                  cc.bianJi = false
                  cc.isBianji = true
                  c.bianJiBtn='编辑'
                })
              }
            })
          }
        })
        this.table.data=datas
        console.log(this.table.data);
      })
    },
    // 新增 / 修改
    addOrUpdateHandle(row) {
@@ -233,3 +372,10 @@
  }
}
</script>
<style scoped>
table,
tr,
td {
  text-align: center;
}
</style>