增加系统参数设置的页面 样式开发+获取crm的系统设置+保存crm系统设置的接口联调

haoxuan

2023-12-20 35408f8df18852cf24c8441c32085d8526598be6

增加系统参数设置的页面 样式开发+获取crm的系统设置+保存crm系统设置的接口联调

 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

@@ -1,6 +1,6 @@
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<template>
  <div class="table-view">
  <div class="table-view" v-loading="loading">
    <el-table
      ref="table"
      border
@@ -183,6 +183,10 @@
      default: () => {
        return {}
      }
    },
    loading:{
      type: Boolean,
      default: false
    }
  },
  data() {

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

New file
@@ -0,0 +1,181 @@
<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="CRM系统参数" name="crm" style="height: 100%">
        <TableCommonView
          ref="tableListRef"
          :loading="isBtnloading"
          :table-list="crmTableList"
          @selTableCol="selCrmTableCol"
          :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: "crm",
      crmTableList: {},
      showcolCrm: [],
      isBtnloading: false,
    };
  },
  created() {
    this.setCrmTable();
  },
  watch: {
    tableConfig: {
      handler() {
        this.getInfo();
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    getInfo() {
      this.activeName = "crm";
      this.crmTableList.tableInfomation = this.tableConfig.CRM;
    },
    // crm
    setCrmTable() {
      this.crmTableList = {
        tableInfomation: [],
        selectIndex: true,
        maxHeight: "930px",
        highlight: true,
        key: "id",
        showcol: this.showcolCrm,
        allcol: [],
        tableColumn: this.setCrmTableColumn(this.showcolCrm),
      };
      let allcol = [];
      for (let i = 0; i < this.crmTableList.tableColumn.length; i++) {
        if (!this.crmTableList.tableColumn[i].default) {
          const label = this.crmTableList.tableColumn[i].label;
          allcol.push(label);
        }
      }
      this.crmTableList.allcol = allcol;
    },
    setCrmTableColumn() {
      let tableColumn = [
        {
          label: "内容",
          prop: "name",
          align: "left",
          isShowColumn: true,
          default: true,
        },
      ];
      return tableColumn;
    },

    selCrmTableCol(val) {
      this.showcolCrm = val;
      this.crmTableList.tableColumn = this.setCrmTableColumn(val);
    },
    handleTabClick() {},
    onSubmit() {
      this.isBtnloading = true;
      let arr = [];
      arr = arr.concat(this.crmTableList.tableInfomation);
      for (let i in arr) {
        delete arr[i].id;
      }
      saveSystemSet({
        sets: arr,
        systemTypes: ["CRM"],
      })
        .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('CRM',res.data.CRM)
          }
        }
      });
    },
    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,
            systemType:value
          }
          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>