张涛
2024-08-30 082b572b91abd0d5ae8e409714553130448aa6d1
src/views/systemSetting/silkStandardSetting/components/silkTableList.vue
@@ -3,8 +3,10 @@
    <div class="top-box">
      <div class="table-box" :style="{ width: detailEnter ? '95%' : '100%' }">
        <el-form ref="form" :model="tableList" :show-message="false" label-position="right">
          <el-table
            ref="fromTable"
            v-if="tableShow"
            :data="tableList.tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
@@ -45,11 +47,11 @@
                      }
                    "
                  ></el-input>
                  <div class="common-select-btn" @click="clearupColumn(item.prop)">
                  <div class="common-select-btn" @click="clearupColumn(item.prop,i)">
                    <i class="el-icon-remove" title="删除"></i>
                  </div>
                </div>
                <span v-else>{{ item.label }}</span>
                <span v-else @click="editColumnInput(item,i, item.prop)">{{ item.label||'--' }}</span>
              </template>
              <!-- column样式 -->
              <template slot-scope="scope">
@@ -67,7 +69,7 @@
                      :disabled="!isOperate"
                      @change="
                        (val) => {
                          commonInputChange(val, item.prop, scope.row, scope)
                          commonInputChange(val, item.prop, scope)
                        }
                      "
                    ></el-input>
@@ -83,7 +85,7 @@
                          v-for="(item, index) in projectOptions"
                          :key="index"
                          :label="item.value"
                          :value="item.value"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
@@ -162,6 +164,11 @@
                    "
                  ></el-input-number>
                </el-form-item>
                <div v-else-if="item.isCallMethod">
                  <span :class="item.isClass ? item.getClassName(scope.row[item.prop], scope.row) : ''">{{
                    item.getCallMethod(scope.row[item.prop], scope.row)
                  }}</span>
                </div>
                <span v-else style="text-align: right">{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
@@ -187,8 +194,8 @@
      </div>
    </div>
    <div v-if="detailEnter" style="margin: 10px">
      <div class="add-btn-box" @click="addRowClick">
        <i class="el-icon-circle-plus"></i>
      <div class="add-btn-box">
        <i class="el-icon-circle-plus" @click="addRowClick"></i>
      </div>
      <!-- <el-button size="small" type="primary" :disabled="!isOperate" @click="add">新增</el-button> -->
      <!-- <el-button size="small" type="primary" disabled>导入明细</el-button> -->
@@ -198,6 +205,7 @@
<script>
// import { getProductList } from "@/api/common/other"
import { getDataByType } from "@/api/data"
export default {
  name: "CommmonFormTableView",
  components: {},
@@ -230,6 +238,11 @@
      type: Boolean,
      default: true
    },
    // 是否可以编辑表头
    isEdit: {
      type: Boolean,
      default: false
    },
    silkTableList: {
      type: Object,
      default: () => {
@@ -250,13 +263,8 @@
      productList: [],
      tableList: [],
      projectIndex: 0,
      projectOptions: [
        { id: 1, value: "纤度偏差" },
        { id: 2, value: "二次变化" },
        { id: 3, value: "清洁分" },
        { id: 4, value: "洁净分" },
        { id: 5, value: "最大偏差" }
      ]
      projectOptions: getDataByType("projectOptions"),
      tableShow:true,
    }
  },
  created() {
@@ -271,7 +279,18 @@
        this.getTableInfo()
      },
      immediate: true
    }
    },
    'silkTableList.tableColumn': {
      handler() {
        this.tableShow=false;
        this.$nextTick(()=>{
          this.tableShow=true;
          this.$forceUpdate()
        })
      },
      immediate: true
    },
  },
  computed: {},
  methods: {
@@ -299,8 +318,8 @@
        this.$emit("addProjectClick")
      }
    },
    commonInputChange(val, prop, row, scope) {
      this.$emit("inputContent", val, prop, row, scope)
    commonInputChange(val, prop, scope) {
      this.$emit("inputContent", val, prop, scope)
    },
    // 删除
    deleteClick(scope) {
@@ -317,17 +336,28 @@
    // 添加列头部标题输入
    addColumnInputChange(val, prop) {
      console.log(val, prop, "添加列头部标题输入")
      this.$emit("addColumnInputChange", val, prop)
    },
    editColumnInput(item,i,prop){
      if(prop.indexOf('prop')!=-1&&this.isEdit){
        item.addColumn=true;
        this.$set(this.tableList.tableColumn[i],'addColumn',true)
        this.$forceUpdate()
        this.$emit("editColumnInput", item, i,prop)
      }
    },
    // 删除列
    clearupColumn(prop) {
    clearupColumn(prop,index) {
      console.log(prop)
      this.$emit("clearupColumn", prop)
      this.$emit("clearupColumn", prop,index)
    }
  },
  //解决表格抖动问题
  beforeUpdate() {
    this.$nextTick(() => {
      this.$refs["fromTable"].doLayout()
        if(this.$refs["fromTable"]){
            this.$refs["fromTable"].doLayout()
        }
    })
  }
}
@@ -366,7 +396,10 @@
    font-size: 26px;
    color: #5582f3;
    margin-left: 50px;
    cursor: pointer;
    .el-icon{
      cursor: pointer;
      padding:5px;
    }
  }
  .add-column-box {
    display: flex;
@@ -394,9 +427,22 @@
  .el-table th.el-table__cell > .cell {
    padding: 0 5px;
  }
  .el-table th.el-table__cell > .cell {
    span{
      width:100%;
      display:inline-block;
    }
  }
  .el-table__cell{
    padding: 5px 0 !important;
    height: 35px;
  }
 .el-input__suffix{
  text-align:right;
 }
  .el-input__inner {
    // text-align: left;
    text-align: center !important;
    // text-align: center !important;
  }
}
</style>