zuozhengqing
2024-04-10 96aea12d4cbbda5d51fd8e85fdfb871c1f20a7fc
src/views/systemSetting/silkPriceStandard/index.vue
@@ -1,150 +1,188 @@
<template>
  <div class="silkStandardSetting-container">
    <div class="filter-card">
      <CommonSearch :show-add="false" :amount-view="false" placeholder="请输入关键词" @searchClick="onFilterSearch">
      <CommonSearch ref="searchRef" :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>
        <SilkTableList
          :detail-enter="isEdit"
          :silk-table-list="silkTableList"
          @inputContent="inputContent"
          @addProjectClick="addBtnClick"
          @clearupProject="clearupProject"
          @deleteClick="clearupProject"
          @addColumnClick="addColumnClick"
          @clearupColumn="clearupColumn"
      <div  class="list-view">
        <TableCommonView
          :table-list="tableList"
          @selTableCol="selTableCol"
          @tableRowClick="tableRowClick"
        >
        </SilkTableList>
          <template slot="tableButton">
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button @click.stop="handleClick(scope.row, '查看')" type="text" size="small">查看</el-button>
                <el-button @click.stop="handleClick(scope.row, '修改')" type="text" size="small">修改</el-button>
                <el-button @click.stop="handleClick(scope.row, '删除')" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </template>
        </TableCommonView>
      </div>
      <div class="btn-pager">
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <AddDialog
      :editDiaConfig="editConfig"
    />
  </div>
</template>
<script>
import SilkTableList from "@/views/systemSetting/silkPriceStandard/components/silkTableList"
import AddDialog from "@/views/systemSetting/silkPriceStandard/components/addDialog"
import {getPriceStandardList,deletePriceStandard} from "@/api/systemSetting/silkPriceStandard"
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
export default {
  name: "silkPriceStandard",
  props: {},
  components: { SilkTableList },
  mixins: [],
  components: { AddDialog },
  mixins: [pageMixin],
  computed: {},
  data() {
    return {
      isEdit: false,
      silkTableList: {},
      tableData: [],
      tableList: {},
      showCol: ["庄口", "生丝等级", "薪酬标准", "单位", "备注"],
      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: "marketNumber",},
        { label: "生丝等级", prop: "rawSilkGrade", },
        { label: "薪酬标准", prop: "payStandard" },
        { label: "单位", prop: "unit" },
        { label: "备注", prop: "notes", },
      ],
      columnNum: 0,
      dataObj: {
        projectName: "",
        start: 0,
        end: 0,
        price1: 0,
        price2: 0,
        price3: 0
      editConfig:{
        visible:false,
        infomitton:{
        }
      },
      getDataParams:{
        keyWord:"",
        // page: this.pagerOptions.currPage,
        // pageSize: this.pagerOptions.pageSize
      }
    }
  },
  created() {
    this.setTableForm()
    this.setTable()
    this.getData()
  },
  methods: {
    setTableForm() {
      this.silkTableList = {
        tableData: this.tableData,
        isReturn: false,
        tableColumn: this.tableColumn
      }
    },
    // 搜索
    onFilterSearch(searchText) {
      console.log(searchText)
      this.getDataParams.keyWord = searchText
      this.pagerOptions.currPage = 1
      this.getData()
    },
    // 新增
    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,
        })
      }
      this.editConfig.dialogTitle="新增"
      this.editConfig.visible=true
      this.editConfig.infomitton={}
    },
    // 保存
    saveBtnClick(){
      this.tableData.forEach((item)=>{
        item.isAdd=false
      })
      this.isEdit = false
    },
    // 刷新
    refreshClick() {},
    refreshClick() {
      this.getDataParams.keyWord = ""
      this.pagerOptions.currPage = 1
      this.pagerOptions.pageSize = 15
      this.$refs.searchRef.searchInput=""
      this.getData()
    },
    // 打印
    printClick() {},
    // 列表输入回调
    inputContent(val, prop, row) {
      console.log(val, prop, row,"列表打印回调")
    },
    // 删除
    clearupProject(data, index) {
      console.log(data)
      this.tableData.splice(index, 1)
    setTable() {
      // top 明细单列表
      this.tableList = {
        selectIndex: true,
        tableInfomation: [],
        allcol: [],
        showcol: this.showCol,
        tableColumn: this.setColumnVisible(this.showCol, this.tableColumn)
      }
      this.setTableList(this.tableList)
    },
    // 保存编辑按钮切换
    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
    setColumnVisible(showCol, tableColumn) {
      return tableColumn.map((ele) => {
        return {
          ...ele,
          isShowColumn: showCol.includes(ele.label)
        }
      })
      this.tableColumn.splice(currentIndex, 1)
      this.silkTableList.tableColumn = this.tableColumn
      this.$delete(this.dataObj, prop)
    },
    // 删除
    delBtnClick(){
    setTableList(tableList) {
      tableList.allcol = tableList.tableColumn.filter((ele) => !ele.default).map((ele) => ele.label)
      this.searchOptions = []
      for (let i = 0; i < tableList.tableColumn.length; i++) {
        const label = tableList.tableColumn[i].label
        const value = tableList.tableColumn[i].prop
        this.searchOptions.push({ value: value, label: label })
      }
    },
    selTableCol(val) {
      this.showcol = val
      this.tableList.tableColumn = this.setColumnVisible(val, this.tableColumn)
    },
    // 表格行点击
    tableRowClick(row){
      console.log(row,"row")
    },
    async getData(){
      await getPriceStandardList({
        keyWord:this.getDataParams.keyWord,
        page: this.pagerOptions.currPage,
        pageSize: this.pagerOptions.pageSize
      }).then((res)=>{
        if(res&&res.code===200){
          this.tableList.tableInfomation=res.data
          this.pagerOptions.totalCount = res.total
        }
      })
    },
    handleClick(row,type){
      if(type==="查看"){
        this.editConfig.infomitton=row
        this.editConfig.dialogTitle=type
        this.editConfig.visible=true
      }else if(type==="修改"){
        this.editConfig.infomitton=row
        this.editConfig.dialogTitle=type
        this.editConfig.visible=true
      }else if(type==="删除"){
        this.$confirm(`确认删除${row.name}吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deletePriceStandard({id:row.ID}).then((res)=>{
            if(res&&res.code===200){
              this.getData()
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }
          })
        })
      }
    }
  }
}
</script>
@@ -185,4 +223,15 @@
    }
  }
}
.list-view {
  height: calc(100% - 60px);
  overflow: hidden;
}
.btn-pager {
  display: flex;
  margin-top: 10px;
  .page {
    margin-left: auto;
  }
}
</style>