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

haoxuan

2024-04-09 4bf10a1ba42ddaeab565c105b376c5732b0f3dab

 src/views/systemSetting/encodeManage/index.vue

@@ -1,21 +1,186 @@
<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="addBtnClick" >修改</el-button>
          <el-button size="small" type="primary" @click="refreshClick">刷新</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: "encodeManage",
  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 },
      ],
      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>