生丝定级标准页面开发、添加列及添加列输入框、删除列功能开发

yangfeng

2024-03-04 e314f30de574edeb86f27555c275545b7d12b3a0

 src/views/systemSetting/silkStandardSetting/components/silkTableList.vue

@@ -1,159 +1,193 @@
<template>
  <div class="page-view">
    <el-form ref="form" :model="tableList" :show-message="false" label-position="right">
      <el-table
        ref="fromTable"
        :data="tableList.tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :row-key="(row) => row.productId"
        :header-cell-style="{ background: '#f1f3f8', color: '#000009', 'font-size': '14px' }"
        border
      >
        <el-table-column v-if="selectBox" type="selection" :reserve-selection="true" width="40" align="center">
        </el-table-column>
        <el-table-column v-if="tableList.isReturn" type="index" label="#" width="50" align="center"></el-table-column>
        <el-table-column
          v-for="(item, i) in tableList.tableColumn"
          :key="i"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :min-width="item.min"
          align="center"
        >
          <!-- 表头样式 -->
          <template slot="header">
            <span v-if="item.isRequird" style="color: #f56c6c">*</span>
            <span>{{ item.label }}</span>
          </template>
          <!-- column样式 -->
          <template slot-scope="scope">
            <template v-if="detailEnter">
              <el-form-item
                v-if="item.input"
                label=" "
                :prop="'tableData.' + scope.$index + '.' + item.prop"
                :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
              >
                <el-input
                  v-model.trim="scope.row[item.prop]"
                  maxlength="50"
                  size="mini"
                  :disabled="!isOperate"
                  @change="
                    (val) => {
                      commonInputChange(val, item.prop, scope.row, scope)
                    }
                  "
                ></el-input>
              </el-form-item>
              <el-form-item
                v-else-if="item.projectName"
                label=" "
                :prop="'tableData.' + scope.$index + '.' + item.prop"
              >
                <div class="custom-name">
                  <el-select v-model="scope.row[item.prop]" clearable size="mini" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in projectOptions"
                      :key="index"
                      :label="item.value"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                  <div class="common-select-btn" @click="clearupClient(scope)">
    <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"
            :data="tableList.tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            :row-key="(row) => row.productId"
            :header-cell-style="{ background: '#f1f3f8', color: '#000009', 'font-size': '14px' }"
            border
          >
            <el-table-column v-if="selectBox" type="selection" :reserve-selection="true" width="40" align="center">
            </el-table-column>
            <el-table-column
              v-if="tableList.isReturn"
              type="index"
              label="#"
              width="50"
              align="center"
            ></el-table-column>
            <el-table-column
              v-for="(item, i) in tableList.tableColumn"
              :key="i"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :min-width="item.min"
              align="center"
            >
              <!-- 表头样式 -->
              <template slot="header">
                <span v-if="item.isRequird" style="color: #f56c6c">*</span>
                <div v-else-if="item.addColumn" class="add-column-box">
                  <el-input
                    placeholder="请输入"
                    v-model="item.label"
                    size="mini"
                    clearable
                    @change="
                      (val) => {
                        addColumnInputChange(val, item.prop)
                      }
                    "
                  ></el-input>
                  <div class="common-select-btn" @click="clearupColumn(item.prop)">
                    <i class="el-icon-remove" title="删除"></i>
                  </div>
                </div>
              </el-form-item>
              <el-form-item
                v-else-if="item.inputNumber"
                label=" "
                :prop="'tableData.' + scope.$index + '.' + item.prop"
                :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
              >
                <el-input-number
                  v-model="scope.row[item.prop]"
                  placeholder=""
                  :min="0"
                  :controls="false"
                  :disabled="!isOperate"
                  size="mini"
                  style="width: 100%; margin-right: 5px"
                  @change="
                    (val) => {
                      commonInputChange(val, item.prop, scope.row, scope)
                    }
                  "
                ></el-input-number>
              </el-form-item>
              <el-form-item
                v-else-if="item.inputFloat"
                label=" "
                :prop="'tableData.' + scope.$index + '.' + item.prop"
                :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
              >
                <el-input-number
                  v-model="scope.row[item.prop]"
                  placeholder=""
                  :min="0"
                  :precision="4"
                  :disabled="!isOperate"
                  :controls="false"
                  size="mini"
                  style="width: 100%; margin-right: 5px"
                  @change="
                    (val) => {
                      commonInputChange(val, item.prop, scope.row, scope)
                    }
                  "
                ></el-input-number>
              </el-form-item>
              <span v-else>
                <template>
                  {{ scope.row[item.prop] }}
                <span v-else>{{ item.label }}</span>
              </template>
              <!-- column样式 -->
              <template slot-scope="scope">
                <template v-if="detailEnter">
                  <el-form-item
                    v-if="item.input"
                    label=" "
                    :prop="'tableData.' + scope.$index + '.' + item.prop"
                    :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
                  >
                    <el-input
                      v-model.trim="scope.row[item.prop]"
                      maxlength="50"
                      size="mini"
                      :disabled="!isOperate"
                      @change="
                        (val) => {
                          commonInputChange(val, item.prop, scope.row, scope)
                        }
                      "
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    v-else-if="item.projectName"
                    label=" "
                    :prop="'tableData.' + scope.$index + '.' + item.prop"
                  >
                    <div class="custom-name">
                      <el-select v-model="scope.row[item.prop]" clearable size="mini" placeholder="请选择">
                        <el-option
                          v-for="(item, index) in projectOptions"
                          :key="index"
                          :label="item.value"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <div class="common-select-btn" @click="clearupClient(scope)">
                        <i class="el-icon-remove" title="删除"></i>
                      </div>
                    </div>
                  </el-form-item>
                  <el-form-item
                    v-else-if="item.inputNumber"
                    label=" "
                    :prop="'tableData.' + scope.$index + '.' + item.prop"
                    :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
                  >
                    <el-input-number
                      v-model="scope.row[item.prop]"
                      placeholder=""
                      :min="0"
                      :controls="false"
                      :disabled="!isOperate"
                      size="mini"
                      style="width: 100%; margin-right: 5px"
                      @change="
                        (val) => {
                          commonInputChange(val, item.prop, scope.row, scope)
                        }
                      "
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item
                    v-else-if="item.inputFloat"
                    label=" "
                    :prop="'tableData.' + scope.$index + '.' + item.prop"
                    :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
                  >
                    <el-input-number
                      v-model="scope.row[item.prop]"
                      placeholder=""
                      :min="0"
                      :precision="4"
                      :disabled="!isOperate"
                      :controls="false"
                      size="mini"
                      style="width: 100%; margin-right: 5px"
                      @change="
                        (val) => {
                          commonInputChange(val, item.prop, scope.row, scope)
                        }
                      "
                    ></el-input-number>
                  </el-form-item>
                  <span v-else>
                    <template>
                      {{ scope.row[item.prop] }}
                    </template>
                  </span>
                </template>
              </span>
            </template>
            <el-form-item
              v-else-if="item.inputNumber && selectBox"
              label=" "
              :prop="'tableData.' + scope.$index + '.' + item.prop"
              :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
            >
              <el-input-number
                v-model="scope.row[item.prop]"
                placeholder=""
                :min="0"
                :controls="false"
                :disabled="!isOperate"
                size="mini"
                style="width: 100%; margin-right: 5px"
                @change="
                  (val) => {
                    commonInputChange(val, item.prop, scope.row, scope)
                  }
                "
              ></el-input-number>
            </el-form-item>
            <span v-else style="text-align: right">{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80" v-if="detailEnter" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" :disabled="!isOperate" @click="deleteClick(scope)">删除</el-button>
          </template>
        </el-table-column>
        <slot name="tableButton" />
        <div slot="empty">
          <el-empty description="暂无数据"></el-empty>
        </div>
      </el-table>
    </el-form>
                <el-form-item
                  v-else-if="item.inputNumber && selectBox"
                  label=" "
                  :prop="'tableData.' + scope.$index + '.' + item.prop"
                  :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
                >
                  <el-input-number
                    v-model="scope.row[item.prop]"
                    placeholder=""
                    :min="0"
                    :controls="false"
                    :disabled="!isOperate"
                    size="mini"
                    style="width: 100%; margin-right: 5px"
                    @change="
                      (val) => {
                        commonInputChange(val, item.prop, scope.row, scope)
                      }
                    "
                  ></el-input-number>
                </el-form-item>
                <span v-else style="text-align: right">{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80" v-if="!detailEnter" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" :disabled="!isOperate" @click="deleteClick(scope)">删除</el-button>
              </template>
            </el-table-column>
            <slot name="tableButton" />
            <div slot="empty">
              <el-empty description="暂无数据"></el-empty>
            </div>
          </el-table>
        </el-form>
      </div>
      <div
        v-if="detailEnter"
        class="add-column-box"
        @click="addColumnClick"
        :style="{ width: detailEnter ? '40px' : '0px' }"
      >
        <i class="el-icon-circle-plus"></i>
      </div>
    </div>
    <div v-if="detailEnter" style="margin: 10px">
      <div class="add-btn-box" @click="add">
      <div class="add-btn-box" @click="addRowClick">
        <i class="el-icon-circle-plus"></i>
      </div>
      <!-- <el-button size="small" type="primary" :disabled="!isOperate" @click="add">新增</el-button> -->
@@ -249,29 +283,13 @@
        this.isRecalculate = true
      }
    },
    // 产品名称
    // async getProductList() {
    //   await getProductList({
    //     productName: "",
    //     productNumber: "",
    //     page: 1,
    //     pageSize: 100
    //   }).then((res) => {
    //     console.log(res, "产品名称")
    //     if (res.code === 200) {
    //       if (res.data.data && res.data.data.length > 0) {
    //         this.productList = res.data.data
    //       }
    //     }
    //   })
    // },
    // 多选
    handleSelectionChange(val) {
      this.$emit("getSelectArray", val)
    },

    // 新增
    add() {
    addRowClick() {
      if (this.addTypeIdMultiple) {
        this.projectIndex = this.tableList.tableData.length
        this.editSelCommonConfig.title = "产品名称"
@@ -286,31 +304,31 @@
    },
    // 删除
    deleteClick(scope) {
      this.tableList.tableData.splice(scope.$index, 1)
      this.$forceUpdate()
      this.$message.success("删除成功！")
      this.$emit("deleteClick", scope)
    },
    // 新增
    selClientClick(scope, prop) {
      console.log(scope, prop)
      this.projectIndex = scope.$index
      this.editSelCommonConfig.title = "产品名称"
      this.editSelCommonConfig.isSelectBox = true
      this.editSelCommonConfig.editVisible = true
    },
    // 编辑
    handleEditClient(scope, prop) {
      console.log(scope, prop)
      this.projectIndex = scope.$index
      this.editSelCommonConfig.title = "产品名称"
      this.editSelCommonConfig.isSelectBox = false
      this.editSelCommonConfig.editVisible = true
      this.$emit("clearupProject", this.tableList.tableData, scope.$index)
    },
    // 删除
    clearupClient(scope) {
      this.$emit("clearupProject", this.tableList.tableData, scope.$index)
    },
    // 添加列按钮
    addColumnClick() {
      this.$emit("addColumnClick")
    },
    // 添加列头部标题输入
    addColumnInputChange(val, prop) {
      console.log(val, prop, "添加列头部标题输入")
    },
    // 删除列
    clearupColumn(prop) {
      console.log(prop)
      this.$emit("clearupColumn", prop)
    }
  },
  //解决表格抖动问题
  beforeUpdate() {
    this.$nextTick(() => {
      this.$refs["fromTable"].doLayout()
    })
  }
}
</script>
@@ -318,16 +336,30 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.page-view {
  .el-form-item {
    margin-bottom: 0;
    .custom-name {
      display: flex;
      .common-select-btn {
        margin-left: 5px;
        font-size: 18px;
        cursor: pointer;
        color: #ff0000;
  .top-box {
    display: flex;
    .table-box {
      flex: 1;
      .el-form-item {
        margin-bottom: 0;
        .custom-name {
          display: flex;
          .common-select-btn {
            margin-left: 5px;
            font-size: 18px;
            cursor: pointer;
            color: #ff0000;
          }
        }
      }
    }
    .add-column-box {
      // width: 40px;
      margin-top: 10px;
      font-size: 26px;
      color: #5582f3;
      margin-left: 20px;
      cursor: pointer;
    }
  }
  .add-btn-box {
@@ -336,6 +368,15 @@
    margin-left: 50px;
    cursor: pointer;
  }
  .add-column-box {
    display: flex;
    .common-select-btn {
      margin-left: 5px;
      font-size: 18px;
      cursor: pointer;
      color: #ff0000;
    }
  }
}
::v-deep {
  .el-form-item__label {