网络请求封装及公共组件导入优化

yangfeng

2023-07-11 7955d7693a5854add1f1718644f380e94a4f0573

网络请求封装及公共组件导入优化

 src/api/custom/salesLead.js

New file
@@ -0,0 +1,9 @@
import { POST } from "@/api/index"
import { manageContextPath } from "@/common/config"

export default {
  // 销售线索列表
  getSalesLeadList: (params) => {
    return POST(manageContextPath + "", { params })
  }
}

 src/components/index.js

New file
@@ -0,0 +1,10 @@
import Vue from "vue"
import SearchCommonView from "@/components/makepager/SearchCommonView"
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/pager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"

const components = [SearchCommonView, PublicFunctionBtnView, PagerView, TableCommonView]
components.forEach((component) => {
  Vue.component(component.name, component)
})

 src/components/makepager/pager/PagerView.vue

File was renamed from src/components/makepager/PagerView.vue
@@ -1,11 +1,11 @@
<template>
  <div class="page-view">
    <el-pagination
      :current-page="pageOptions.currPage"
      :current-page="pagerOptions.currPage"
      :page-sizes="pageSizes"
      :page-size="pageOptions.pageSize"
      :page-size="pagerOptions.pageSize"
      :layout="layout"
      :total="pageOptions.totalCount"
      :total="pagerOptions.totalCount"
      v-on="$listeners"
    >
    </el-pagination>
@@ -24,7 +24,7 @@
      type: String,
      default: "total, sizes, prev, pager, next"
    },
    pageOptions: {
    pagerOptions: {
      type: Object,
      default: () => {
        return {

 src/components/makepager/pager/mixin/pageMixin.js

New file
@@ -0,0 +1,27 @@
export default {
  data() {
    const pagerEvents = {
      "size-change": this.sizeChangeHandler,
      "current-change": this.currentChangeHandler
    }
    return {
      pagerOptions: {
        currPage: 1,
        pageSize: 10,
        totalCount: 0
      },
      pagerEvents
    }
  },
  methods: {
    sizeChangeHandler(val) {
      this.pagerOptions.currPage = 1
      this.pagerOptions.pageSize = val
      this.getData()
    },
    currentChangeHandler(val) {
      this.pagerOptions.currPage = val
      this.getData()
    }
  }
}

 src/main.js

@@ -4,6 +4,8 @@
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"
import "@/assets/style/index.scss"
import "@/components"

Vue.use(ElementUI)

Vue.config.productionTip = false

 src/router/index.js

@@ -69,7 +69,10 @@
  },
  {
    path: "*",
    redirect: "/404"
    component: () => import("@/views/error/404"),
    meta: {
      title: "404"
    }
  }
]
// 导出路由 在 main.js 里使用

 src/views/custom/contacts/index.vue

@@ -21,19 +21,11 @@
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import AddContactsDialog from "@/views/custom/contacts/AddContactsDialog"
export default {
  name: "ContactsView",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddContactsDialog
  },
  computed: {},

 src/views/custom/customManage/index.vue

@@ -46,19 +46,11 @@
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import AddCustomManageDialog from "@/views/custom/customManage/AddCustomManageDialog"
export default {
  name: "CustomManage",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddCustomManageDialog
  },
  computed: {

 src/views/custom/followupRecords/index.vue

@@ -20,19 +20,11 @@
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import AddFollowupRecordsDialog from "@/views/custom/followupRecords/AddFollowupRecordsDialog"
export default {
  name: "FollowupRecords",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddFollowupRecordsDialog
  },
  computed: {

 src/views/custom/salesLead/index.vue

@@ -3,7 +3,7 @@
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView :operates-list="operatesList" />
      <PagerView class="page" />
      <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
      <template slot="tableButton">
@@ -22,22 +22,16 @@
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import AddSalesLeadDialog from "@/views/custom/salesLead/AddSalesLeadDialog"
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"

export default {
  name: "SalesLead",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddSalesLeadDialog
  },
  mixins: [pageMixin],
  computed: {},
  data() {
    return {
@@ -68,6 +62,7 @@
  },
  created() {
    this.setTable()
    this.getData()
  },
  methods: {
    setTable() {
@@ -101,6 +96,8 @@
        this.searchOptions.push({ value: (i + 1).toString(), label: label })
      }
    },
    // 请求数据
    async getData() {},
    // 新建
    addBtnClick() {
      this.editSalesLeadConfig.visible = true

 src/views/error/404.vue

New file
@@ -0,0 +1,26 @@
<template>
  <div class="error-page">
    <p class="page_title">404 page not found</p>
    <el-button class="back" @click="$router.replace({ path: '/' })"> 返回 </el-button>
  </div>
</template>
<script>
export default {
  name: "PageV404"
}
</script>
<style lang="scss" scoped>
.error-page {
  background: #303133;
  background-blend-mode: multiply, multiply;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .page_title {
    font-size: 20px;
    color: #fff;
  }
}
</style>

 src/views/sales/contractManage/index.vue

@@ -30,20 +30,12 @@
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import AddContractManageDialog from "@/views/sales/contractManage/AddContractManageDialog"

export default {
  name: "ContractManage",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddContractManageDialog
  },
  computed: {

 src/views/sales/generatePlan/index.vue

@@ -20,20 +20,12 @@
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import AddGeneratePlanDialog from "@/views/sales/generatePlan/AddGeneratePlanDialog"

export default {
  name: "GeneratePlan",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddGeneratePlanDialog
  },
  computed: {

 src/views/sales/masterOrder/index.vue

@@ -20,20 +20,12 @@
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import AddMasterOrderDialog from "@/views/sales/masterOrder/AddMasterOrderDialog"

export default {
  name: "MasterOrder",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddMasterOrderDialog
  },
  computed: {},

 src/views/sales/quotation/index.vue

@@ -25,20 +25,12 @@
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import AddQuotationDialog from "@/views/sales/quotation/AddQuotationDialog"

export default {
  name: "QuotationView",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddQuotationDialog
  },
  computed: {

 src/views/sales/refundForm/index.vue

@@ -20,20 +20,12 @@
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import AddRefundFormDialog from "@/views/sales/refundForm/AddRefundFormDialog"

export default {
  name: "RefundForm",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddRefundFormDialog
  },
  computed: {

 src/views/sales/salesDetails/index.vue

@@ -20,20 +20,12 @@
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import AddSalesDetailsDialog from "@/views/sales/salesDetails/AddSalesDetailsDialog"

export default {
  name: "SalesDetails",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddSalesDetailsDialog
  },
  computed: {

 src/views/sales/salesOpportunity/index.vue

@@ -26,20 +26,12 @@
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import AddSalesOpportunityDialog from "@/views/sales/salesOpportunity/AddSalesOpportunityDialog"

export default {
  name: "SalesOpportunity",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddSalesOpportunityDialog
  },
  computed: {

 src/views/sales/salesReturn/index.vue

@@ -20,20 +20,12 @@
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import AddSalesReturnDialog from "@/views/sales/salesReturn/AddSalesReturnDialog"

export default {
  name: "SalesReturn",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddSalesReturnDialog
  },
  computed: {

 src/views/sales/subOrder/index.vue

@@ -20,20 +20,12 @@
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import AddSubOrderDialog from "@/views/sales/subOrder/AddSubOrderDialog"

export default {
  name: "SubOrder",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddSubOrderDialog
  },
  computed: {

 src/views/service/orderManage/index.vue

@@ -29,20 +29,12 @@
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import AddOrderManageDialog from "@/views/service/orderManage/AddOrderManageDialog"

export default {
  name: "SalesLead",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddOrderManageDialog
  },
  computed: {

 src/views/service/serviceContract/index.vue

@@ -20,20 +20,12 @@
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import AddServiceContractDialog from "@/views/service/serviceContract/AddServiceContractDialog"

export default {
  name: "ServiceContract",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddServiceContractDialog
  },
  computed: {

 src/views/service/serviceFeeManage/index.vue

@@ -27,20 +27,12 @@
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import AddServiceFeeManageDialog from "@/views/service/serviceFeeManage/AddServiceFeeManageDialog"

export default {
  name: "ServiceFeeManage",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddServiceFeeManageDialog
  },
  computed: {

 src/views/service/serviceFollowup/index.vue

@@ -20,20 +20,12 @@
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import AddServiceFollowupDialog from "@/views/service/serviceFollowup/AddServiceFollowupDialog"

export default {
  name: "SalesLead",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddServiceFollowupDialog
  },
  computed: {

 vue.config.js

@@ -1,54 +1,54 @@
const { defineConfig } = require("@vue/cli-service")
module.exports = defineConfig({
  transpileDependencies: true
})
// const path = require("path")
// const getServerJson = require("./public/serverconfig")
// const devServer = require("./vue.develop.config")
// const { context } = getServerJson
// function resolve(dir) {
//   return path.join(__dirname, dir)
// }
// module.exports = {
//   publicPath: context,
//   lintOnSave: false,
//   productionSourceMap: false, // 如果你不需要生产环境的source map, 可以将其设置为false 以加速生产环境构建
//   devServer,
//   transpileDependencies: [
//     // 兼容IE11浏览器(兼容npm包和cnpm包)
//     "crypto-js",
//     "sockjs-client"
//   ],
//   configureWebpack: (config) => {
//     if (process.env.NODE_ENV === "production") {
//       // 为生产环境修改配置
//       config.optimization.minimizer[0].options.terserOptions.compress.warings = false
//       config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
//       config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
//       config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ["console.log"]
//       config.performance = {
//         hints: "warning",
//         maxEntrypointSize: 20000000, // 入口起点的最大体积
//         maxAssetSize: 10000000 // 生成文件的最大体积
//       }
//     } else {
//       // 为开发环境修改配置
//       config.devtool = "eval-source-map"
//     }
//   },
//   chainWebpack(config) {
//     // 设置svg导入
//     config.module.rule("svg").exclude.add(resolve("srv/assets/icons")).end()
//     config.module
//       .rule("icons")
//       .test(/\.svg$/)
//       .include.add(resolve("src/assets/icons"))
//       .end()
//       .use("svg-sprite-loader")
//       .loader("svg-sprite-loader")
//       .options({
//         symbolId: "icon-[name]"
//       })
//       .end()
//   }
// }
// const { defineConfig } = require("@vue/cli-service")
// module.exports = defineConfig({
//   transpileDependencies: true
// })
const path = require("path")
const getServerJson = require("./public/serverconfig")
const devServer = require("./vue.develop.config")
const { context } = getServerJson
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  publicPath: context,
  lintOnSave: false,
  productionSourceMap: false, // 如果你不需要生产环境的source map, 可以将其设置为false 以加速生产环境构建
  devServer,
  transpileDependencies: [
    // 兼容IE11浏览器(兼容npm包和cnpm包)
    "crypto-js",
    "sockjs-client"
  ],
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "production") {
      // 为生产环境修改配置
      config.optimization.minimizer[0].options.terserOptions.compress.warings = false
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
      config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
      config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ["console.log"]
      config.performance = {
        hints: "warning",
        maxEntrypointSize: 20000000, // 入口起点的最大体积
        maxAssetSize: 10000000 // 生成文件的最大体积
      }
    } else {
      // 为开发环境修改配置
      config.devtool = "eval-source-map"
    }
  },
  chainWebpack(config) {
    // 设置svg导入
    config.module.rule("svg").exclude.add(resolve("srv/assets/icons")).end()
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/assets/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]"
      })
      .end()
  }
}

 vue.develop.config.js

@@ -9,10 +9,5 @@
      target: targetProxy,
      changeOrigin: true
    }
  },
  watchOptions: {
    aggregateTimeout: 300, // 改动延迟时间
    poll: 1000, // 轮询时间
    ignored: /node_modules/
  }
}