Merge branch 'zzq' of http://192.168.5.5:10010/r/silk/silk-web

haoxuan

2024-04-07 508ca07de304f2d7b4c4cc8612875317307dccf6

Merge branch 'zzq' of http://192.168.5.5:10010/r/silk/silk-web

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

New file
@@ -0,0 +1,402 @@
<template>
  <div class="page-view">
    <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>
                <span v-else>{{ item.label }}</span>
              </template>
              <!-- column样式 -->
              <template slot-scope="scope">
                <template v-if="scope.row.isAdd">
                  <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>
                <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="addRowClick">
        <i class="el-icon-circle-plus"></i>
      </div>
      <!-- <el-button size="small" type="primary" :disabled="!isOperate" @click="add">新增</el-button> -->
      <!-- <el-button size="small" type="primary" disabled>导入明细</el-button> -->
    </div>
  </div>
</template>

<script>
// import { getProductList } from "@/api/common/other"
export default {
  name: "CommmonFormTableView",
  components: {},
  props: {
    detailEnter: {
      type: Boolean,
      default: false
    },
    selectBox: {
      type: Boolean,
      default: false
    },
    // 那个页面 用来判断计算方式
    pageName: {
      type: String,
      default: ""
    },
    // 列表新增是否多选
    addTypeIdMultiple: {
      type: Boolean,
      default: false
    },
    // 根据报价单查询产品
    quotationNumber: {
      type: [String, Number],
      default: ""
    },
    // 是否可以操作 添加等
    isOperate: {
      type: Boolean,
      default: true
    },
    silkTableList: {
      type: Object,
      default: () => {
        return {
          tableData: [], // 接口返回数据
          isReturn: false,
          tableColumn: [
            // table表单
            { label: "", prop: "", min: 200, tooltip: true }
          ]
        }
      }
    }
  },
  data() {
    return {
      total: 0,
      productList: [],
      tableList: [],
      projectIndex: 0,
      projectOptions: [
        { id: 1, value: "纤度偏差" },
        { id: 2, value: "二次变化" },
        { id: 3, value: "清洁分" },
        { id: 4, value: "洁净分" },
        { id: 5, value: "最大偏差" }
      ]
    }
  },
  created() {
    // if (!this.selectBox) {
    //   this.getProductList()
    // }
    this.getTableInfo()
  },
  watch: {
    silkTableList: {
      handler() {
        this.getTableInfo()
      },
      immediate: true
    }
  },
  computed: {},
  methods: {
    getTableInfo() {
      this.tableList = this.silkTableList
      if (this.tableList.tableData.length === 1 && this.tableList.tableData[0].name === "") {
        this.isRecalculate = false
      } else {
        this.isRecalculate = true
      }
    },
    // 多选
    handleSelectionChange(val) {
      this.$emit("getSelectArray", val)
    },

    // 新增
    addRowClick() {
      if (this.addTypeIdMultiple) {
        this.projectIndex = this.tableList.tableData.length
        this.editSelCommonConfig.title = "产品名称"
        this.editSelCommonConfig.isSelectBox = true
        this.editSelCommonConfig.editVisible = true
      } else {
        this.$emit("addProjectClick")
      }
    },
    commonInputChange(val, prop, row, scope) {
      this.$emit("inputContent", val, prop, row, scope)
    },
    // 删除
    deleteClick(scope) {
      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>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.page-view {
  .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 {
    font-size: 26px;
    color: #5582f3;
    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 {
    display: none;
  }
  .el-table__footer-wrapper tbody td.el-table__cell {
    background-color: #fff;
    // text-align: right;
    font-weight: bold;
  }
  .el-input--suffix .el-input__inner {
    padding-right: 0px;
  }
  .el-table .cell,
  .el-table th.el-table__cell > .cell {
    padding: 0 5px;
  }
  .el-input__inner {
    // text-align: left;
    text-align: center !important;
  }
}
</style>

 src/views/systemSetting/silkPriceStandard/index.vue

@@ -1,21 +1,191 @@
<template>
  <div class="container"></div>
  <div class="silkStandardSetting-container">
    <div class="filter-card">
      <CommonSearch :show-add="false" :amount-view="false" placeholder="请输入关键词" @searchClick="onFilterSearch">
        <template slot="leftButton">
          <el-button size="small" type="primary" @click="addBtnClick" >新增</el-button>
          <!-- <el-button size="small" type="primary" @click="delBtnClick" >删除</el-button> -->
          <el-button size="small" type="primary" @click="saveBtnClick" >保存</el-button>
          |
          <!-- <el-button size="small" type="primary" @click="addBtnClick" >修改</el-button> -->
          <el-button size="small" type="primary" @click="refreshClick">刷新</el-button>
          <el-button size="small" type="primary" @click="printClick">打印</el-button>
        </template>
      </CommonSearch>
    </div>
    <div class="body-card">
      <!-- <div class="edit-save">
        <div class="edit-save-icon" @click="editSaveClick">
          <i :class="isEdit ? 'el-icon-unlock' : 'el-icon-lock'"></i>
        </div>
        <div class="edit-sace-label">{{ isEdit ? "锁定保存" : "界面设计" }}</div>
      </div> -->
      <div>
        <SilkTableList
          :detail-enter="isEdit"
          :silk-table-list="silkTableList"
          @inputContent="inputContent"
          @addProjectClick="addBtnClick"
          @clearupProject="clearupProject"
          @deleteClick="clearupProject"
          @addColumnClick="addColumnClick"
          @clearupColumn="clearupColumn"
        >
        </SilkTableList>
      </div>
    </div>
  </div>
</template>

<script>
import SilkTableList from "@/views/systemSetting/silkPriceStandard/components/silkTableList"
export default {
  name: "silkPriceStandard",
  props: {},
  components: {},
  components: { SilkTableList },
  mixins: [],
  computed: {},
  data() {
    return {}
    return {
      isEdit: false,
      silkTableList: {},
      tableData: [],
      tableColumn: [
        { label: "庄口", prop: "projectName", projectName: true },
        { label: "生丝等级", prop: "start", inputFloat: true },
        { label: "薪酬标准", prop: "end", inputFloat: true },
        { label: "单位", prop: "price1", inputFloat: true },
        { label: "备注", prop: "price2", inputFloat: true },
      ],
      columnNum: 0,
      dataObj: {
        projectName: "",
        start: 0,
        end: 0,
        price1: 0,
        price2: 0,
        price3: 0
      }
    }
  },
  created() {},
  methods: {}
  created() {
    this.setTableForm()
  },
  methods: {
    setTableForm() {
      this.silkTableList = {
        tableData: this.tableData,
        isReturn: false,
        tableColumn: this.tableColumn
      }
    },
    // 搜索
    onFilterSearch(searchText) {
      console.log(searchText)
    },
    // 新增
    addBtnClick() {
      if(this.isEdit){
        this.$message.warning("请先保存当前编辑")
      }else{
        this.isEdit = true
        // array.splice(index, 0, item)
        this.tableData.splice(0,0,{
          projectName: "",
          start: 0,
          end: 0,
          price1: 0,
          price2: 0,
          price3: 0,
          isAdd:true,
        })
      }
      
      
    },
    // 保存
    saveBtnClick(){
      this.tableData.forEach((item)=>{
        item.isAdd=false
      })
      this.isEdit = false
    },
    // 刷新
    refreshClick() {},
    // 打印
    printClick() {},
    // 列表输入回调
    inputContent(val, prop, row) {
      console.log(val, prop, row,"列表打印回调")
    },
    // 删除
    clearupProject(data, index) {
      console.log(data)
      this.tableData.splice(index, 1)
    },
    // 保存编辑按钮切换
    editSaveClick() {
      this.isEdit = !this.isEdit
    },
    // 添加列
    addColumnClick() {
      let propStr = "trends" + this.columnNum
      this.tableColumn.splice(2, 0, { label: "", prop: propStr, inputFloat: true, addColumn: true })
      this.$set(this.dataObj, propStr, 0)
      console.log(this.tableColumn)
      this.silkTableList.tableColumn = this.tableColumn
      this.columnNum += 1
    },
    // 删除列
    clearupColumn(prop) {
      let currentIndex = 0
      this.tableColumn.map((item, index) => {
        if (item.prop == prop) {
          currentIndex = index
        }
      })
      this.tableColumn.splice(currentIndex, 1)
      this.silkTableList.tableColumn = this.tableColumn
      this.$delete(this.dataObj, prop)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.silkStandardSetting-container {
  height: 100%;
  .filter-card {
    margin: 20px 30px;
    height: 80px;
    display: flex;
    align-items: center;
    padding: 0 20px 0 20px;
    border-radius: 4px;
    background-color: #fff;
  }
  .body-card {
    margin: 0 30px;
    background-color: #fff;
    padding: 10px 15px;
    height: calc(100% - 180px);
    border-radius: 4px;
    .edit-save {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .edit-save-icon {
        font-size: 24px;
        color: #5582f3;
        cursor: pointer;
      }
      .edit-sace-label {
        margin-left: 10px;
        font-size: 14px;
        color: #000000d8;
      }
    }
  }
}
</style>

 src/views/systemSetting/silkStandardSetting/index.vue

@@ -3,7 +3,7 @@
    <div class="filter-card">
      <CommonSearch :show-add="false" :amount-view="false" placeholder="请输入关键词" @searchClick="onFilterSearch">
        <template slot="leftButton">
          <el-button size="small" type="primary" @click="addBtnClick" :disabled="!isEdit">新增</el-button>
          <el-button size="small" type="primary" @click="addBtnClick">新增</el-button>
          <el-button size="small" type="primary" @click="refreshClick">刷新</el-button>
          <el-button size="small" type="primary" @click="printClick" disabled>打印</el-button>
        </template>
@@ -76,7 +76,7 @@
      projectOptions: getDataByType("projectOptions"),
      rankObj: {},
      columnInputList: [],
      dynamicsRanks: []
      dynamicsRanks: [],
    }
  },
  created() {
@@ -137,7 +137,14 @@
      this.silkTableList = {
        tableData: this.tableData,
        isReturn: false,
        tableColumn: this.tableColumn
        tableColumn: [
          { label: "检查项目名称", prop: "projectName", projectName: true },
          { label: "开始纤度", prop: "start", inputFloat: true },
          { label: "结束纤度", prop: "end", inputFloat: true },
          { label: "野纤", prop: "price1", inputFloat: true },
          { label: "大野", prop: "price2", inputFloat: true },
          { label: "特野", prop: "price3", inputFloat: true }
        ]
      }
    },
    // 搜索
@@ -146,7 +153,14 @@
    },
    // 新增
    addBtnClick() {
      this.tableData.push(this.dataObj)
      this.tableData.push({
        projectName: "",
        start: 0,
        end: 0,
        price1: 0,
        price2: 0,
        price3: 0
      })
    },
    // 刷新
    refreshClick() {

 src/views/systemSetting/workshopManage/components/addWorkshop.vue

New file
@@ -0,0 +1,62 @@
<template>
  <div class="add_wordshop">
    <el-dialog
      title="提示"
      :visible.sync="editConfig.visible"
      width="30%"
      :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editConfig.visible = false">取 消</el-button>
        <el-button type="primary" @click="editConfig.visible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    editDiaConfig:{
      type: Object,
      default: () => {
        return {
          visible: false,
          infomitton: {

          }
        }
      }
    }
  },
  data() {
    return {
      editConfig:this.editDiaConfig
    };
  },
  computed: {

  },
  created() {

  },
  mounted() {

  },
  watch: {

  },
  methods: {
    handleClose(done) {
      done();
    }
  },
  components: {

  },
};
</script>

<style scoped lang="scss">

</style>

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

New file
@@ -0,0 +1,402 @@
<template>
  <div class="page-view">
    <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>
                <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>
                <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="addRowClick">
        <i class="el-icon-circle-plus"></i>
      </div>
      <!-- <el-button size="small" type="primary" :disabled="!isOperate" @click="add">新增</el-button> -->
      <!-- <el-button size="small" type="primary" disabled>导入明细</el-button> -->
    </div>
  </div>
</template>

<script>
// import { getProductList } from "@/api/common/other"
export default {
  name: "CommmonFormTableView",
  components: {},
  props: {
    detailEnter: {
      type: Boolean,
      default: false
    },
    selectBox: {
      type: Boolean,
      default: false
    },
    // 那个页面 用来判断计算方式
    pageName: {
      type: String,
      default: ""
    },
    // 列表新增是否多选
    addTypeIdMultiple: {
      type: Boolean,
      default: false
    },
    // 根据报价单查询产品
    quotationNumber: {
      type: [String, Number],
      default: ""
    },
    // 是否可以操作 添加等
    isOperate: {
      type: Boolean,
      default: true
    },
    silkTableList: {
      type: Object,
      default: () => {
        return {
          tableData: [], // 接口返回数据
          isReturn: false,
          tableColumn: [
            // table表单
            { label: "", prop: "", min: 200, tooltip: true }
          ]
        }
      }
    }
  },
  data() {
    return {
      total: 0,
      productList: [],
      tableList: [],
      projectIndex: 0,
      projectOptions: [
        { id: 1, value: "纤度偏差" },
        { id: 2, value: "二次变化" },
        { id: 3, value: "清洁分" },
        { id: 4, value: "洁净分" },
        { id: 5, value: "最大偏差" }
      ]
    }
  },
  created() {
    // if (!this.selectBox) {
    //   this.getProductList()
    // }
    this.getTableInfo()
  },
  watch: {
    silkTableList: {
      handler() {
        this.getTableInfo()
      },
      immediate: true
    }
  },
  computed: {},
  methods: {
    getTableInfo() {
      this.tableList = this.silkTableList
      if (this.tableList.tableData.length === 1 && this.tableList.tableData[0].name === "") {
        this.isRecalculate = false
      } else {
        this.isRecalculate = true
      }
    },
    // 多选
    handleSelectionChange(val) {
      this.$emit("getSelectArray", val)
    },

    // 新增
    addRowClick() {
      if (this.addTypeIdMultiple) {
        this.projectIndex = this.tableList.tableData.length
        this.editSelCommonConfig.title = "产品名称"
        this.editSelCommonConfig.isSelectBox = true
        this.editSelCommonConfig.editVisible = true
      } else {
        this.$emit("addProjectClick")
      }
    },
    commonInputChange(val, prop, row, scope) {
      this.$emit("inputContent", val, prop, row, scope)
    },
    // 删除
    deleteClick(scope) {
      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>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.page-view {
  .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 {
    font-size: 26px;
    color: #5582f3;
    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 {
    display: none;
  }
  .el-table__footer-wrapper tbody td.el-table__cell {
    background-color: #fff;
    // text-align: right;
    font-weight: bold;
  }
  .el-input--suffix .el-input__inner {
    padding-right: 0px;
  }
  .el-table .cell,
  .el-table th.el-table__cell > .cell {
    padding: 0 5px;
  }
  .el-input__inner {
    // text-align: left;
    text-align: center !important;
  }
}
</style>

 src/views/systemSetting/workshopManage/index.vue

@@ -1,21 +1,192 @@
<template>
  <div class="container"></div>
  <div class="silkStandardSetting-container">
    <div class="filter-card">
      <CommonSearch :show-add="false" :amount-view="false" placeholder="请输入关键词" @searchClick="onFilterSearch">
        <template slot="leftButton">
          <el-button size="small" type="primary" @click="addBtnClick" >新增</el-button>
          <!-- <el-button size="small" type="primary" @click="delBtnClick" >删除</el-button> -->
          <el-button size="small" type="primary" @click="saveBtnClick" >保存</el-button>
          |
          <!-- <el-button size="small" type="primary" @click="addBtnClick" >修改</el-button> -->
          <el-button size="small" type="primary" @click="refreshClick">刷新</el-button>
          <el-button size="small" type="primary" @click="printClick">打印</el-button>
        </template>
      </CommonSearch>
    </div>
    <div class="body-card">
      <!-- <div class="edit-save">
        <div class="edit-save-icon" @click="editSaveClick">
          <i :class="isEdit ? 'el-icon-unlock' : 'el-icon-lock'"></i>
        </div>
        <div class="edit-sace-label">{{ isEdit ? "锁定保存" : "界面设计" }}</div>
      </div> -->
      <div>
        <SilkTableList
          :detail-enter="isEdit"
          :silk-table-list="silkTableList"
          @inputContent="inputContent"
          @addProjectClick="addBtnClick"
          @clearupProject="clearupProject"
          @deleteClick="clearupProject"
          @addColumnClick="addColumnClick"
          @clearupColumn="clearupColumn"
        >
        </SilkTableList>
      </div>
    </div>
  </div>
</template>

<script>
import SilkTableList from "@/views/systemSetting/workshopManage/components/silkTableList"
export default {
  name: "workshopManage",
  props: {},
  components: {},
  components: { SilkTableList },
  mixins: [],
  computed: {},
  data() {
    return {}
    return {
      isEdit: false,
      silkTableList: {},
      tableData: [],
      tableColumn: [
        { label: "车间", prop: "projectName", projectName: true },
        { label: "组别", prop: "start", inputFloat: true },
        { label: "开始车号", prop: "end", inputFloat: true },
        { label: "结束车号", prop: "price1", inputFloat: true },
        { label: "半车标志", prop: "projectName", projectName: true },
        { label: "备注", prop: "price2", inputFloat: true },
      ],
      columnNum: 0,
      dataObj: {
        projectName: "",
        start: 0,
        end: 0,
        price1: 0,
        price2: 0,
        price3: 0
      }
    }
  },
  created() {},
  methods: {}
  created() {
    this.setTableForm()
  },
  methods: {
    setTableForm() {
      this.silkTableList = {
        tableData: this.tableData,
        isReturn: false,
        tableColumn: this.tableColumn
      }
    },
    // 搜索
    onFilterSearch(searchText) {
      console.log(searchText)
    },
    // 新增
    addBtnClick() {
      if(this.isEdit){
        this.$message.warning("请先保存当前编辑")
      }else{
        this.isEdit = true
        // array.splice(index, 0, item)
        this.tableData.splice(0,0,{
          projectName: "",
          start: 0,
          end: 0,
          price1: 0,
          price2: 0,
          price3: 0,
          isAdd:true,
        })
      }
      
      
    },
    // 保存
    saveBtnClick(){
      this.tableData.forEach((item)=>{
        item.isAdd=false
      })
      this.isEdit = false
    },
    // 刷新
    refreshClick() {},
    // 打印
    printClick() {},
    // 列表输入回调
    inputContent(val, prop, row) {
      console.log(val, prop, row,"列表打印回调")
    },
    // 删除
    clearupProject(data, index) {
      console.log(data)
      this.tableData.splice(index, 1)
    },
    // 保存编辑按钮切换
    editSaveClick() {
      this.isEdit = !this.isEdit
    },
    // 添加列
    addColumnClick() {
      let propStr = "trends" + this.columnNum
      this.tableColumn.splice(2, 0, { label: "", prop: propStr, inputFloat: true, addColumn: true })
      this.$set(this.dataObj, propStr, 0)
      console.log(this.tableColumn)
      this.silkTableList.tableColumn = this.tableColumn
      this.columnNum += 1
    },
    // 删除列
    clearupColumn(prop) {
      let currentIndex = 0
      this.tableColumn.map((item, index) => {
        if (item.prop == prop) {
          currentIndex = index
        }
      })
      this.tableColumn.splice(currentIndex, 1)
      this.silkTableList.tableColumn = this.tableColumn
      this.$delete(this.dataObj, prop)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.silkStandardSetting-container {
  height: 100%;
  .filter-card {
    margin: 20px 30px;
    height: 80px;
    display: flex;
    align-items: center;
    padding: 0 20px 0 20px;
    border-radius: 4px;
    background-color: #fff;
  }
  .body-card {
    margin: 0 30px;
    background-color: #fff;
    padding: 10px 15px;
    height: calc(100% - 180px);
    border-radius: 4px;
    .edit-save {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .edit-save-icon {
        font-size: 24px;
        color: #5582f3;
        cursor: pointer;
      }
      .edit-sace-label {
        margin-left: 10px;
        font-size: 14px;
        color: #000000d8;
      }
    }
  }
}
</style>