新增纤度登记表和纤度检验表的路由添加

haoxuan

2024-02-29 51ff17883e34d45c7bdabe6d9212239872d2fe2a

新增纤度登记表和纤度检验表的路由添加

 src/router/product/index.js

@@ -2,6 +2,7 @@

const silkRegisterForm = (resolve) => require(["@/views/productManage/silkRegisterForm/index"], resolve) // 纤度登记表
const silkInspectForm = (resolve) => require(["@/views/productManage/silkInspectForm/index"], resolve) // 纤度检验表
const silkRegisterAddPage = (resolve) => require(["@/views/productManage/silkRegisterForm/addPage"], resolve) // 纤度登记表，检验表 新增
const productRegisterForm = (resolve) => require(["@/views/productManage/productRegisterForm/index"], resolve) // 产量登记表

const appconfig = [
@@ -22,6 +23,14 @@
    }
  },
  {
    path: "/productManage/silkRegisterForm/addPage",
    name: "silkRegisterAddPage",
    component: silkRegisterAddPage,
    meta: {
      title: "新增纤度登记表/纤度检验表"
    }
  },
  {
    path: "/productManage/productRegisterForm",
    name: "productRegisterForm",
    component: productRegisterForm,

 src/views/productManage/silkRegisterForm/addPage.vue

New file
@@ -0,0 +1,260 @@
<template>
    <div class="custom-manage">
      <div class="tab-view">
        <el-tabs v-model="activeName" @tab-click="tabsClick">
          <el-tab-pane label="纤度登记表" name="first"></el-tab-pane>
          <el-tab-pane label="纤度检验表" name="second"></el-tab-pane>
        </el-tabs>
      </div>
  
      <div class="filter">
        <div class="filter-card">
          <CommonSearch
              :show-add="false"
              :show-download="false"
              :amount-view="false"
              :show-action-btn="false"
              placeholder="请输入关键词"
              @searchClick="onFilterSearch"
          >
            <template slot="leftButton">
              <el-button size="small" type="primary"  @click="cancelClick">放弃</el-button>
              <el-button size="small" type="primary"  @click="saveClick">保存</el-button>
            </template>
          </CommonSearch>
        </div>
      </div>
  
      <div class="body">
        <div class="body-card">
          <div class="list-view">
            <TableCommonView
                ref="tableListRef"
                v-loading="loading"
                :table-list="tableList"
                @selTableCol="selTableCol"
            >
            </TableCommonView>
          </div>
          <div class="btn-pager">
            <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
 import { getFollowRecordList } from "@/api/productManage/silkRegisterForm.js"
  import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
  export default {
    name: "silkRegisterAddPage",
    props: {},
    mixins: [pageMixin],
    components: {
    },
    computed: {},
    data() {
      return {
        tableList: {},
        loading: false,
        activeName: "first",
        searchOptions: [],
        search_map: {},
        is_public:true,
        tableColumn:[
          { label: "车号", prop: "name", min: 100, default:true}, // 客户名称
          { label: "纤度值", prop: "member_name", default:true }, // 销售负责人
          { label: "数量", prop: "client_level" , default:true}, // 重要级别
          { label: "纤度合计", prop: "next_visit_time", min: 90, default:true }, // 下次回访日期
        ],
        showCol:['车号','纤度值','数量','纤度合计']
      }
    },
    created() {
      this.setTable()
      this.search_map = {
        is_public: this.is_public
      }
      this.getData()
    },
    methods: {
      setTable() {
        this.tableList = {
          selectIndex: true,
          tableInfomation: [],
          allcol: [],
          showcol: this.showCol,
          tableColumn:this.setColumnVisible(this.showCol)
        }
        this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);
        this.searchOptions = []
        for (let i = 0; i < this.tableList.tableColumn.length; i++) {
          const label = this.tableList.tableColumn[i].label
          const value = this.tableList.tableColumn[i].prop
          this.searchOptions.push({ value: value, label: label })
        }
      },
      setColumnVisible(showCol){
        return  this.tableColumn.map(ele=>{
          return {
            ...ele,
            isShowColumn:showCol.includes(ele.label)
          }
        })
      },
      selTableCol(val) {
        this.showcol = val;
        this.tableList.tableColumn = this.setColumnVisible(val);
      },
      // 请求数据
      async getData() {
        this.loading = true
        await getFollowRecordList({
          search_map: this.search_map,
          page: this.pagerOptions.currPage,
          pageSize: this.pagerOptions.pageSize
        })
          .then((res) => {
            console.log(res)
            if (res.code === 200) {
              if (res.data.list && res.data.list.length > 0) {
                const list = res.data.list.map((item) => {
                  let contact_name = ""
                  let contact_phone = ""
                  let contact_id = 0
                  let contact_wechat = ""
                  let contact_email = ""
                  let position = ""
                  if (item.contacts.length !== 0) {
                    for (let i = 0; i < item.contacts.length; i++) {
                      if (item.contacts[i].is_first) {
                        contact_name = item.contacts[i].name
                        contact_phone = item.contacts[i].phone
                        contact_id = item.contacts[i].id
                        contact_wechat = item.contacts[i].wechat
                        contact_email = item.contacts[i].email
                        position = item.contacts[i].position
                      }
                    }
                  }
                  return {
                    ...item,
                    contact_name: contact_name,
                    contact_phone: contact_phone,
                    client_level: item.client_level.name,
                    client_status: item.client_status.name,
                    contact_id: contact_id,
                    member_name: item.member.username,
                    contact_wechat: contact_wechat,
                    contact_email: contact_email,
                    position: position
                  }
                })
                this.tableList.tableInfomation = list || []
                this.pagerOptions.totalCount = res.data.count
              } else {
                this.tableList.tableInfomation = []
              }
            } else {
              this.tableList.tableInfomation = []
            }
            this.loading = false
          })
          .catch((err) => {
            console.log(err)
            this.tableList.tableInfomation = []
            this.loading = false
          })
      },
      tabsClick(tab) {
        console.log(tab.name)
        if (tab.name === "first") {
          this.is_public = true
        } else {
          this.is_public = false
        }
        this.search_map = {
          is_public: this.is_public
        }
        this.pagerOptions.currPage = 1
        this.getData()
      },
      // 搜索
      onFilterSearch(searchText){
        this.search_map = {
          is_public: this.is_public,
          name: searchText
        }
        this.pagerOptions.currPage = 1
        this.getData()
      },
      // 放弃
      cancelClick() {
       
      },
      saveClick(){

      },
     
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="scss" scoped>
  ::v-deep {
    .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
      padding-left: 25px;
    }
    .el-tabs__item {
      padding: 0 25px;
      height: 45px;
    }
  }
  
  .custom-manage{
    height: 100%;
    overflow: hidden;
    .filter{
      height: 80px;
      display: flex;
      align-items: center;
      padding: 0 20px 0 20px;
      &-card{
        height: 80px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 10px 20px;
        flex: 1;
        border-radius: 12px;
        background-color: #fff;
      }
    }
    .body{
      box-sizing: border-box;
      padding: 10px 20px;
      border-radius: 12px;
      height: calc(100% - 139px);
      .body-card {
        background-color: #fff;
        border-radius: 12px;
        height: 100%;
        overflow: hidden;
      }
      .list-view {
        height: calc(100% - 60px);
        overflow: hidden;
      }
      .btn-pager {
        display: flex;
        margin-top: 10px;
        .page {
          margin-left: auto;
        }
      }
    }
  }
  </style>