srm项目 系统参数设置的前端页面开发+增加相关路由+公共列表组件增加是否可以配置表头的逻辑

haoxuan

2024-02-07 302858f921bed077ab54dd31102f086bfe1add3c

srm项目 系统参数设置的前端页面开发+增加相关路由+公共列表组件增加是否可以配置表头的逻辑

 src/api/systemSet/commonSet.js

New file
@@ -0,0 +1,18 @@
import request from "@/common/untils/request.js"

// 获取系统设置
export function getSystemSet(data) {
  return request({
    url: "/api/system/getSystemSet",
    method: "get",
    data,
  });
}
// 保存系统设置
export function saveSystemSet(data) {
  return request({
    url: "/api/system/saveSystemSet",
    method: "post",
    data,
  });
}

 src/components/makepager/TableCommonView.vue

@@ -106,7 +106,7 @@
    </el-table>
    <div class="overSpread1" v-show="iscolopen" @click="onMaskClick"></div>
    <div class="styleBtn">
      <i @click="checkCol()" class="label">...</i>
      <i @click="checkCol()" v-if="colOpenShow" class="label">...</i>
      <el-checkbox-group v-model="showcol" v-show="iscolopen" class="checkbox-group" @change="selectCheckBoxList">
        <el-checkbox v-for="item in tableList.allcol" :label="item" :key="item">{{ item }} </el-checkbox>
      </el-checkbox-group>
@@ -152,7 +152,12 @@
      default: () => {
        return {}
      }
    }
    },
    // 是否可以配置列表 表头
    colOpenShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {

 src/router/index.js

@@ -15,7 +15,7 @@
const productManage = (resolve) => require(["@/views/productManage/index"], resolve)
const PreviewFile = (resolve) => require(["@/views/supplierManage/supplier/PreviewFile"], resolve)
const noData = (resolve) => require(["@/views/NoData/index"], resolve)

const commonSet = (resolve) => require(["@/views/systemSet/commonSet/index"], resolve) //系統設置

export const routes = [
  // 无数据页面
@@ -57,6 +57,14 @@
      title: "产品管理",
      isAllways: true
    }
  },
  {
    path: "/systemSet/commonSet",
    name: "commonSet",
    component: commonSet,
    meta: {
      title: "通用设置"
    }
  }
]
export const constantRoutes = [

 src/views/systemSet/commonSet/compontents/SystemParameterSet.vue

New file
@@ -0,0 +1,180 @@
<template>
  <div class="system-parameter-set-box">
    <el-button
      class="system-button"
      type="primary"
      :loading="isBtnloading"
      size="mini"
      @click="onSubmit()"
      >保存</el-button
    >
    <el-tabs
      class="system-tabs"
      v-model="activeName"
      @tab-click="handleTabClick"
    >
      <el-tab-pane label="SRM系统参数" name="srm" style="height: 100%">
        <TableCommonView
          ref="tableListRef"
          :loading="isBtnloading"
          :table-list="srmTableList"
          @selTableCol="selSrmTableCol"
          :showHeader="false"
          :colOpenShow="false"
        >
          <template slot="tableButton">
            <el-table-column prop="value" label="值" width="210" fixed="right">
              <template slot-scope="scope">
                <el-select
                  size="small"
                  v-if="scope.row.type == 'select'"
                  v-model="scope.row.value"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in scope.row.select"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <el-input
                  v-else
                  size="small"
                  v-model="scope.row.value"
                  placeholder="请输入"
                ></el-input>
              </template>
            </el-table-column>
          </template>
        </TableCommonView>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { saveSystemSet } from "@/api/systemSet/commonSet";
export default {
  components: {},
  props: {
    tableConfig: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      activeName: "srm",
      srmTableList: {},
      showcolSrm: [],
      isBtnloading: false,
    };
  },
  created() {
    this.setSrmTable();
  },
  watch: {
    tableConfig: {
      handler() {
        this.getInfo();
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    getInfo() {
      this.activeName = "srm";
      this.srmTableList.tableInfomation = this.tableConfig.SRM;
    },
    // srm
    setSrmTable() {
      this.srmTableList = {
        tableInfomation: [],
        selectIndex: true,
        maxHeight: "930px",
        highlight: true,
        key: "id",
        showcol: this.showcolSrm,
        allcol: [],
        tableColumn: this.setSrmTableColumn(this.showcolSrm),
      };
      let allcol = [];
      for (let i = 0; i < this.srmTableList.tableColumn.length; i++) {
        if (!this.srmTableList.tableColumn[i].default) {
          const label = this.srmTableList.tableColumn[i].label;
          allcol.push(label);
        }
      }
      this.srmTableList.allcol = allcol;
    },
    setSrmTableColumn() {
      let tableColumn = [
        {
          label: "内容",
          prop: "name",
          align: "left",
          isShowColumn: true,
          default: true,
        },
      ];
      return tableColumn;
    },

    selSrmTableCol(val) {
      this.showcolSrm = val;
      this.srmTableList.tableColumn = this.setSrmTableColumn(val);
    },
    handleTabClick() {},
    onSubmit() {
      this.isBtnloading = true;
      let arr = [];
      arr = arr.concat(this.srmTableList.tableInfomation);
      for (let i in arr) {
        delete arr[i].id;
      }
      saveSystemSet({
        sets: arr,
      })
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("修改成功！");
            this.$emit("refresh");
          }
          this.isBtnloading = false;
        })
        .catch(() => {
          setTimeout(() => {
            this.isBtnloading = false;
          }, 3000);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.system-parameter-set-box {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .system-button {
    float: right;
    position: relative;
    right: 20px;
    top: 5px;
    z-index: 5;
  }
  .system-tabs {
    width: 100%;
    height: 100%;
    ::v-deep .el-tabs__content {
      height: calc(100% - 55px) !important;
    }
  }
}
</style>

 src/views/systemSet/commonSet/index.vue

New file
@@ -0,0 +1,141 @@
<template>
    <div class="body">
      <div class="body-card">
        <el-tabs
          v-model="activeName"
          @tab-click="handleTabClick"
          tab-position="left"
        >
          <el-tab-pane label="系统参数设置" name="systemParameterSet" style="height: 100%">
            <SystemParameterSet :tableConfig="tableConfig" @refresh="getSystem"/>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
</template>

<script>
import SystemParameterSet from './compontents/SystemParameterSet'
import { getSystemSet } from "@/api/systemSet/commonSet"
export default {
  name: "commonSet",
  components: {
    SystemParameterSet
  },
  data() {
    return {
      activeName: "systemParameterSet",
        // 系统参数设置
        tableConfig:{
          APS:[],
          WMS:[],
          CRM:[],
          SRM:[]
        },
    };
  },
  mounted() {
    this.handleTabClick()
  },
  computed: {
  },
  watch:{
    
  },
  methods: {
    handleTabClick() {
      if(this.activeName=='systemParameterSet') this.getSystem();
    },
    getSystem(){
      getSystemSet().then((res) => {
        if (res.code == 200) {
          if (res.data) {
            this.getTableSet('SRM',res.data.SRM)
          }
        }
      });
    },
    getTableSet(value,data){
      let arr=[]
      if(data&&Object.keys(data).length>0){
        for(let i in data){
          let list=[]
          if(data[i].type=='select'){
            let select=data[i].select
            if(select&&Object.keys(select).length>0){
              for(let j in select){
                list.push({
                  name:select[j],
                  id:select[j]
                })
              }
            }
          }
          let item={
            name:i,
            id:value+'&'+i,
            value:data[i].value,
            type:data[i].type,
            select:data[i].type=='select'?list:data[i].select,
            modeType:data[i].modeType
          }
          arr.push(item)
        }
      }
      this.tableConfig[value]=arr;
    },
  },
};
</script>
<style lang="scss" scoped>
  .body{
    box-sizing: border-box;
    padding: 10px 20px;
    border-radius: 12px;
    height: calc(100% - 20px);
    .body-card {
      background-color: #fff;
      border-radius: 12px;
      height: 100%;
      overflow: hidden;
    }
  ::v-deep .el-tabs__content{
    height:100%;
  }
  .cursor{
      cursor: pointer;
    }
  .rests-form{
    width:50%;
    
    .add-area {
      width: 60px;
      height: 60px;
      border: 2px solid #ddd;
      border-radius: 3px;
      text-align: center;
      line-height: 60px;
    }
    .add-area img {
      width: 100%;
      height: 100%;
    }
  }
}
::v-deep .el-tabs.el-tabs--left {
  height: 100%;
  .el-tabs__header.is-left {
    width: 150px;
    height: 100%;
    border-right: 1px solid #eee;
  }
  .el-tabs__item.is-left {
    text-align: left;
  }
  .el-tabs__item.is-left.is-active {
    background: rgba(64, 158, 255, 0.1);
  }

}
</style>