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

haoxuan

2024-04-09 4bf10a1ba42ddaeab565c105b376c5732b0f3dab

 src/views/systemSetting/dataDictionary/index.vue

@@ -1,21 +1,316 @@
<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="refreshClick">刷新</el-button>
        </template>
      </CommonSearch>
    </div>
    <div class="body-card">
      <div>
        <div class="bottom-tabs" >
          <div class="tab-pane" @click="getTab(0)" :style="{
            background: TabsIndex == 0 ? '#2a78fb' : '#F1F3F8',
            color: TabsIndex == 0 ? '#fff' : '#666'
          }">
            庄口管理
          </div>
          <div class="tab-pane" @click="getTab(1)" :style="{
            background: TabsIndex == 1 ? '#2a78fb' : '#F1F3F8',
            color: TabsIndex == 1 ? '#fff' : '#666'
          }">
            车间管理
          </div>
          <div class="tab-pane" @click="getTab(2)" :style="{
            background: TabsIndex == 2 ? '#2a78fb' : '#F1F3F8',
            color: TabsIndex == 2 ? '#fff' : '#666'
          }">
            带号颜色
          </div>
          <div class="tab-pane" @click="getTab(3)" :style="{
            background: TabsIndex == 3 ? '#2a78fb' : '#F1F3F8',
            color: TabsIndex == 3 ? '#fff' : '#666'
          }">
            规格
          </div>
        </div>
        <div class="list-view">
          <TableCommonView :loading="loading" :table-list="productTableList" @selTableCol="selBottomTableCol">
            <template slot="tableButton">
              <el-table-column label="操作" width="160" fixed="right">
                <template slot-scope="scope">
                  <!-- <el-button>{{ scope.row }}</el-button> -->
                  <el-button @click="rowClick(scope.row,'查看')" type="text" size="small">查看</el-button>
                  <el-button @click="rowClick(scope.row,'修改')" type="text" size="small">修改</el-button>
                  <el-button @click="rowClick(scope.row,'删除')" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </template>
          </TableCommonView>
        </div>
      </div>
    </div>
    <AddDataDictionaries 
      :editDiaConfig="editConfig"
    />
  </div>
</template>

<script>
import AddDataDictionaries from "@/views/systemSetting/dataDictionary/components/addDataDictionaries.vue"
import {getDict} from "@/api/systemSetting/dataDictionary"
export default {
  name: "dataDictionary",
  props: {},
  components: {},
  components: {AddDataDictionaries},
  mixins: [],
  computed: {},
  data() {
    return {}
    return {
      TabsIndex:0,
      loading: false,
      productTableList: {},
      editConfig:{
        visible:false,
        dialogTitleType:"庄口",
        infomitton:{
          TabsIndex:0,
        }
      },
      tableColumn: [
        { label: "序号", prop: "number",},
        { label: "庄口名称", prop: "name",},
        { label: "描述", prop: "remark" },
      ],
      showCol: ["序号","庄口名称", "描述",],
      workshopTableColumn:[
        { label: "编码", prop: "number" },
        { label: "车间名称", prop: "name" },
        { label: "描述", prop: "remark" },
      ],
      showWorkshopCol: ["编码","车间名称", "描述",],
      colorTableColumn:[
        { label: "带号颜色", prop: "member_name" },
        { label: "描述", prop: "remark" },
      ],
      showColorCol: ["带号颜色", "描述",],
      specsTableColumn:[
        { label: "规格", prop: "member_name" },
        { label: "描述", prop: "remark" },
      ],
      showSpecsCol: ["规格", "描述",],
      getDataParams:{
        page: 1,
        pageSize:10,
        dictType:0,
      },
    }
  },
  created() {},
  methods: {}
  created() {
    this.getProductOrderInfo()
    // this.setTable()
    this.getData()
  },
  methods: {
    // 搜索
    onFilterSearch(searchText) {
      console.log(searchText)
    },
    // 新增
    addBtnClick() {
      this.editConfig.dialogTitle="新增"
      this.editConfig.visible=true
    },
    // 刷新
    refreshClick() {
      console.log("a")
     },
    // 打印
    printClick() { 
      console.log("a")},
    //tabs切换
    getTab(tab) {
      this.TabsIndex = tab
      this.editConfig.infomitton.TabsIndex=tab
      // if (this.TabsIndex == 1) {
      //   this.isRequest = true;
      // } else {
      //   this.isRequest = false;
      // }
      this.getProductOrderInfo()
    },
    // setTable() {
    //   this.tableBottomColumn = this.tableColumn
    //   this.showBottomCol = this.showCol
    //   this.setBottomList()
    // },
    selTableCol(val) {
      this.showcol = val
      this.tableList.tableColumn = this.setColumnVisible(val, this.tableColumn)
    },
    async getProductOrderInfo() {
        this.getData()
        if (this.TabsIndex == 0) {
          // 庄口管理
          this.editConfig.dialogTitleType="庄口"
          this.tableBottomColumn = this.tableColumn // 表头
          this.showBottomCol = this.showCol  // 动态表头
          this.setBottomList()
        }else if (this.TabsIndex == 1) {
          // 车间管理
          this.editConfig.dialogTitleType="车间"
          this.tableBottomColumn = this.workshopTableColumn
          this.showBottomCol = this.showWorkshopCol
          this.setBottomList()
        } else if (this.TabsIndex == 2) {
          // 带号颜色
          this.editConfig.dialogTitleType="带号颜色"
          this.tableBottomColumn = this.colorTableColumn
          this.showBottomCol = this.showColorCol
          this.setBottomList()

        } else if (this.TabsIndex == 3) {
          // 规格
          this.editConfig.dialogTitleType="规格"
          this.tableBottomColumn = this.specsTableColumn
          this.showBottomCol = this.showSpecsCol
          this.setBottomList()
        }

        this.loading = true
        // this.getProductInventoryInfo(number)
        // await getProductOrderInfo(number)
        //   .then((res) => {
        //     this.productDataBottom = res;
        //     this.getListValue(this.productDataBottom)
        //   })
        //   .catch(() => {
        //     this.productTableList.tableInfomation = []
        //   })
        this.loading = false
    },
    setBottomList() {
      this.productTableList = {
        selectIndex: true,
        tableInfomation: [],
        allcol: [],
        showcol: this.showBottomCol,
        tableColumn: this.setColumnVisible(this.showBottomCol, this.tableBottomColumn)
      }
      this.setTableList(this.productTableList)
    },
    selBottomTableCol(val) {
      this.showcol = val
      this.productTableList.tableColumn = this.setColumnVisible(val, this.tableBottomColumn)
    },
    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 })
      }
    },
    setColumnVisible(showCol, tableColumn) {
      return tableColumn.map((ele) => {
        return {
          ...ele,
          isShowColumn: showCol.includes(ele.label)
        }
      })
    },
    getData(){
      getDict({
        dictType:this.TabsIndex,
        page:this.getDataParams.page,
        pageSize:this.getDataParams.pageSize,
      }).then((res)=>{
        console.log(res,"res")
        this.productTableList.tableInfomation=res.data
      })
    },
    rowClick(row,type){
      if(type==="查看"){
        this.editConfig.dialogTitle="查看"
        this.editConfig.visible=true
      }else if(type==="修改"){
        this.editConfig.dialogTitle="修改"
        this.editConfig.visible=true
      }else if(type==="删除"){
        console.log("删除")
      }
    }
  }
}
</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;
      }
    }
  }
}

.bottom-tabs {
  height: 40px;
  line-height: 40px;
  // background: #e6ecf2;
  display: flex;

  .tab-pane {
    width: 100px;
    margin-right: 20px;
    font-size: 14px !important;
    text-align: center;
    cursor: pointer;
    background: #2a78fb;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
}

.bgcGrey {
  background: #fff;
}

.bgcWhite {
  background: #fff !important;
}</style>