8.9编写销售管理

李林

2023-08-09 1615528985f30b496d3c294e82136434ee36397c

8.9编写销售管理

 src/App.vue

@@ -26,7 +26,7 @@
</script>
<style>
  /* @import url("../static/img/alifont/iconfont.css"); */
  @import url("//at.alicdn.com/t/c/font_4179845_y48isucsagi.css");
  @import url("//at.alicdn.com/t/c/font_4179845_enf3r8ak8d.css");

  * {
    margin: 0;
@@ -183,8 +183,32 @@
    margin-right: 8.5px;
  }
  .el-dialog__header .el-dialog__title{
    font-size: 18px !important;
    font-size: 16px !important;
  }
	
    .el-dialog__footer .el-button *{
        font-size: 14px !important;
    }
	
    .el-dialog__footer .el-button{
        height: 36px;
        border: 1px solid rgba(190, 190, 190, 0.44);
        box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
        padding: 0 14px;
    }
	
    .el-button--primary{
        background: #004EA2;
    }
	
    .el-dialog__body{
        padding: 15px 20px;
    }
	
    .el-input.is-disabled input{
        color: #666 !important;
        background-color: rgba(0, 0, 0, 0.05) !important;
    }
  /* å…¨å±€è¾“入框样式 */
  /* å…¨å±€æŒ‰é’®æ ·å¼ */
</style>

 src/assets/api/controller.js

@@ -1,43 +1,46 @@
// æŠ€æœ¯ç®¡ç†-标准Bom
const standard = {
  // æŠ€æœ¯ç®¡ç†-标准Bom
  selectTreeByMaterial: "material/selectTreeByMaterial", //查询物料的树
  selectProductByMaterial: "product/selectTreeByMaterial",//根据物料查询项目表格
  selectTechnologyByMaterial: "technology/select",
  // æŠ€æœ¯ç®¡ç†-技术文件
  selectAllOrder: "/orders/selectAllOrder",//查询所有订单列表
  selectOrderById: "/orders/selectOrderById",//根据订单id查询订单详情
    // æŠ€æœ¯ç®¡ç†-标准Bom
    selectTreeByMaterial: "material/selectTreeByMaterial", //查询物料的树
    selectProductByMaterial: "product/selectTreeByMaterial", //根据物料查询项目表格
    selectTechnologyByMaterial: "technology/select",
    // æŠ€æœ¯ç®¡ç†-技术文件
    selectAllOrder: "/orders/selectAllOrder", //查询所有订单列表
    selectOrderById: "/orders/selectOrderById", //根据订单id查询订单详情
}
// åŽŸææ–™æ£€éªŒ
const raw = {
  selectRawInspectsList: "rawInspect/selectRawInspectsList",//查询原材料检验单列表
  selectRawInspectsListById: "rawInspect/selectRawInspectsListById/",//根据检验单id获取检验单详情
  updaterawInsProduct:'rawInsProduct/updaterawInsProduct',//修改项目的检验值
  updateRawInspectsById:"/rawInspect/updateRawInspectsById/",//上报,
  selectRawMaterial:"/rawInspect/selectMaterial",//查询原材料信息
  selectSpBySt:"/rawInspect/selectSpBySt",//根据材料id查询所有型号,
  addRawInspects :"/rawInspect/addRawInspects"
    selectRawInspectsList: "rawInspect/selectRawInspectsList", //查询原材料检验单列表
    selectRawInspectsListById: "rawInspect/selectRawInspectsListById/", //根据检验单id获取检验单详情
    updaterawInsProduct: 'rawInsProduct/updaterawInsProduct', //修改项目的检验值
    updateRawInspectsById: "/rawInspect/updateRawInspectsById/", //上报,
    selectRawMaterial: "/rawInspect/selectMaterial", //查询原材料信息
    selectSpBySt: "/rawInspect/selectSpBySt", //根据材料id查询所有型号,
    addRawInspects: "/rawInspect/addRawInspects"
}

// æˆå“æ£€éªŒ
const finishedIns ={
  finishedInsListPage:"/finished-inspect/list_page",//获取成品检验列表
// listMaterial:"/finished-inspect/list_material",//添加检验单时的项目列表
finishedInspectUser:"/finished-inspect/page_user",//获取所有主机工
projectListByfinishId:"/inspection-item/list_user",//根据id查询所有项目

const finishedIns = {
    finishedInsListPage: "/finished-inspect/list_page", //获取成品检验列表
    // listMaterial:"/finished-inspect/list_material",//添加检验单时的项目列表
    finishedInspectUser: "/finished-inspect/page_user", //获取所有主机工
    projectListByfinishId: "/inspection-item/list_user", //根据id查询所有项目
}

const url = {
  enter: "user/enter", //登录
  ...standard,
  ...raw,
  ...finishedIns
    enter: "user/enter", //登录
    ...standard,
    ...raw,
    ...finishedIns,
    selectSaleList: "sale/selectSaleList", //查询销售单列表
    selectSaleDatilById: "sale/selectSaleDatilById", //根据销售单id查看详情,
    addSale: "sale/addSale", //新增销售单
}


export default function(Vue) {
  //添加全局API
  Vue.prototype.$api = {
    url
  }
}
    //添加全局API
    Vue.prototype.$api = {
        url
    }
}

 src/components/view/sale.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,475 @@
<style scoped>
    .sale .title .el-button {
        height: 32px;
        border: 1px solid rgba(190, 190, 190, 0.44);
        box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
        padding: 0 12px;
    }

    .sale .title {
        margin-bottom: 10px;
        padding: 0 20px;
    }

    .sale .title * {
        font-size: 16px;
    }

    .choose {
        padding: 21px 24px;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-bottom: 3px solid rgb(245, 247, 251);
    }

    .choose * {
        font-size: 14px;
    }

    .choose .el-button {
        height: 32px;
        border: 1px solid rgba(190, 190, 190, 0.44);
        box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
        padding: 0 12px;
    }

    .thing {
        width: calc(100% - 44px);
        height: calc(100% - 42px - 82px - 66px);
        background-color: #fff;
        overflow: auto;
        padding: 33px 22px;
    }

    .table_do {
        color: #004ea0;
        cursor: pointer;
    }

    .select-model .body {
        padding: 0 20px;
        color: #333;
        max-height: 70vh;
        overflow-y: auto;
    }

    .select-model .head {
        font-size: 16px;
        color: #333;
        line-height: 40px;
    }

    .select-model .content * {
        font-size: 14px;
    }

    .select-model .content .value {
        font-size: 14px;
        padding: 0 15px;
        background-color: rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    }
</style>
<style>
    .sale .title .el-button * {
        font-size: 14px;
    }

    .sale .title .el-button--default {
        color: #004EA2;
    }

    .sale .thing * {
        font-size: 14px;
    }

    .sale .has-gutter .el-table__cell {
        background-color: #F0F1F5 !important;
        color: #333;
    }

    .sale .has-gutter .el-table__cell .cell {
        font-size: 16px;
        font-weight: 500;
    }

    .sale .cell {
        color: #333;
        padding-left: 17px !important;
    }

    .sale .el-table__body-wrapper {
        height: 100%;
    }

    .sale .el-table__body {
        height: 100%;
    }
</style>

<template>
    <div class="sale">
        <div class="title">
            <el-row>
                <el-col :span="12" style="line-height: 32px;">销售管理</el-col>
                <el-col :span="12" style="text-align: right;">
                    <el-button type="primary" icon="el-icon-plus" @click="addDia= true">新增</el-button>
                    <el-button icon="el-icon-edit-outline">修改</el-button>
                    <el-button icon="el-icon-delete">删除</el-button>
                    <el-button icon="el-icon-download">导出</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="choose">
            <span>订单编号：</span>
            <el-input v-model="search.code" size="small" placeholder="请输入" style="width: 224px;margin-right: 30px;"
                clearable></el-input>
            <span>产品名称：</span>
            <el-input v-model="search.name" size="small" placeholder="请输入" style="width: 224px;margin-right: 30px;"
                clearable></el-input>
            <span>状态：</span>
            <el-select v-model="search.type" size="small" placeholder="请选择" style="width: 224px;margin-right: 30px;">
                <el-option label="全部" :value="null"></el-option>
                <el-option label="通过" :value="0"></el-option>
                <el-option label="不通过" :value="1"></el-option>
                <el-option label="未审核" :value="2"></el-option>
            </el-select>
            <span>交货日期：</span>
            <el-date-picker v-model="search.delTime" size="small" placeholder="请输入" style="width: 224px;margin-right: 30px;"
                clearable value-format="yyyy-MM-dd"></el-date-picker>
            <el-button size="mini" @click="clean()"><span>重 ç½®</span></el-button>
            <el-button size="mini" type="primary" style="background: #004EA2;" @click="selectRawInspectsList()">
                <span>查询</span>
            </el-button>
        </div>
        <div class="thing">
            <el-table :data="tableData" border style="width: 100%;overflow-y: auto;min-height: calc(100% - 50px)"
                max-height="calc(100% - 50px)" @selection-change="handleSelectionChange" default-expand-all row-key="id">
                <el-table-column type="selection" width="50">
                </el-table-column>
                <el-table-column type="index" label="序号" width="65">
                </el-table-column>
                <el-table-column prop="order_number" label="订单编号" width="150">
                </el-table-column>
                <el-table-column prop="code" label="合同编号" width="220">
                </el-table-column>
                <el-table-column prop="name" label="工程名称">
                </el-table-column>
                <el-table-column prop="proname" label="客户名称">
                </el-table-column>
                <el-table-column prop="交货日期" label="交货日期" width="150">
                </el-table-column>
                <el-table-column prop="type" label="状态" width="100">
                    <template slot-scope="scope">
                        <span style="color: #34BD66;" v-if="scope.row.type==1">通过</span>
                        <span style="color: #E84738;" v-else-if="scope.row.type==0">不通过</span>
                        <span v-else></span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="220">
                    <template slot-scope="scope">
                        <span class="table_do" @click="changeShowDetail(scope.row)">&nbsp;查看详情&nbsp;</span>
                        <span class="table_do" v-if="scope.row.type==null">&nbsp;审核&nbsp;</span>
                        <span class="table_do" v-else>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span class="table_do">&nbsp;编辑&nbsp;</span>
                        <span class="table_do">&nbsp;删除&nbsp;</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-col style="height: 50px;display: flex;align-items: center;justify-content: right;">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                    :page-sizes="[1,10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                    :total="countSize">
                </el-pagination>
            </el-col>
        </div>
        <div class="select-model">
            <el-dialog title="销售详情" :visible.sync="selectDia" width="750px">
                <div class="body" v-if="oneData!=null">
                    <div class="head">基本信息</div>
                    <div class="content">
                        <el-row style="line-height: 30px;margin: 15px 0;">
                            <el-col :span="3">订单编号</el-col>
                            <el-col :span="8">
                                <div class="value">{{oneData.orderNumber}}</div>
                            </el-col>
                            <el-col :span="3" :offset="2">合同编号</el-col>
                            <el-col :span="8">
                                <div class="value">{{oneData.code}}</div>
                            </el-col>
                        </el-row>
                        <el-row style="line-height: 30px;margin: 15px 0;">
                            <el-col :span="3">工程名称</el-col>
                            <el-col :span="8">
                                <div class="value">{{oneData.name}}</div>
                            </el-col>
                            <el-col :span="3" :offset="2">状态</el-col>
                            <el-col :span="8">
                                <div class="value" v-if="oneData.type == 1" style="color: #34BD66;">通过</div>
                                <div class="value" v-else-if="oneData.type == 2" style="color: #E84738;">不通过</div>
                                <div class="value" v-else>&nbsp;</div>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="head">客户信息</div>
                    <div class="content">
                        <el-row style="line-height: 30px;margin: 15px 0;">
                            <el-col :span="3">客户名称</el-col>
                            <el-col :span="8">
                                <div class="value">{{oneData.proname}}</div>
                            </el-col>
                            <el-col :span="3" :offset="2">收货地址</el-col>
                            <el-col :span="8">
                                <div class="value">{{oneData.adress}}</div>
                            </el-col>
                        </el-row>
                        <el-row style="line-height: 30px;margin: 15px 0;">
                            <el-col :span="3">联系人</el-col>
                            <el-col :span="8">
                                <div class="value">{{oneData.username}}</div>
                            </el-col>
                            <el-col :span="3" :offset="2">联系电话</el-col>
                            <el-col :span="8">
                                <div class="value">{{oneData.phone}}</div>
                            </el-col>
                        </el-row>
                        <el-row style="line-height: 30px;margin: 15px 0;">
                            <el-col :span="3">业务员</el-col>
                            <el-col :span="8">
                                <div class="value">{{JSON.parse(oneData.saleman)}}</div>
                            </el-col>
                            <el-col :span="3" :offset="2">下单人</el-col>
                            <el-col :span="8">
                                <div class="value">{{oneData.orderName}}</div>
                            </el-col>
                        </el-row>
                        <el-row style="line-height: 30px;margin: 15px 0;">
                            <el-col :span="3">交货日期</el-col>
                            <el-col :span="8">
                                <div class="value">{{oneData.delTime}}</div>
                            </el-col>
                            <el-col :span="3" :offset="2">审核人</el-col>
                            <el-col :span="8">
                                <div class="value">{{JSON.parse(oneData.checkname)}}</div>
                            </el-col>
                        </el-row>
                        <el-row style="line-height: 30px;margin: 15px 0;">
                            <el-col :span="3">审核日期</el-col>
                            <el-col :span="8">
                                <div class="value">{{oneData.checkTime}}</div>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="head">产品信息</div>
                    <div class="content">
                        <el-table :data="oneData.saleMaterialList" border style="width: 100%">
                            <el-table-column prop="name" label="产品名称" width="180">
                            </el-table-column>
                            <el-table-column prop="specifications" label="规格型号" width="200">
                            </el-table-column>
                            <el-table-column prop="unit" label="单位">
                            </el-table-column>
                            <el-table-column prop="number" label="数量">
                            </el-table-column>
                            <el-table-column prop="price" label="单价">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-dialog>
        </div>
        <div class="select-model">
            <el-dialog title="销售新增" :visible.sync="addDia" width="750px">
                <div class="body">
                    <div class="head">基本信息</div>
                    <div class="content">
                        <el-row style="line-height: 30px;margin: 15px 0;">
                            <el-col :span="3">订单编号</el-col>
                            <el-col :span="8">
                                <el-input v-model="addData.orderNumber" size="small" placeholder="请输入订单编号" clearable></el-input>
                            </el-col>
                            <el-col :span="3" :offset="2">合同编号</el-col>
                            <el-col :span="8">
                                <el-input v-model="addData.code" size="small" placeholder="请输入合同编号" clearable></el-input>
                            </el-col>
                        </el-row>
                        <el-row style="line-height: 30px;margin: 15px 0;">
                            <el-col :span="3">工程名称</el-col>
                            <el-col :span="8">
                                <el-input v-model="addData.name" size="small" placeholder="请输入工程名称" clearable></el-input>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="head">客户信息</div>
                    <div class="content">
                        <el-row style="line-height: 30px;margin: 15px 0;">
                            <el-col :span="3">客户名称</el-col>
                            <el-col :span="8">
                                <el-input v-model="addData.proname" size="small" placeholder="请输入客户名称" clearable></el-input>
                            </el-col>
                            <el-col :span="3" :offset="2">收货地址</el-col>
                            <el-col :span="8">
                                <el-input v-model="addData.adress" size="small" placeholder="请输入收货地址" clearable></el-input>
                            </el-col>
                        </el-row>
                        <el-row style="line-height: 30px;margin: 15px 0;">
                            <el-col :span="3">联系人</el-col>
                            <el-col :span="8">
                                <el-input v-model="addData.username" size="small" placeholder="请输入联系人" clearable></el-input>
                            </el-col>
                            <el-col :span="3" :offset="2">联系电话</el-col>
                            <el-col :span="8">
                                <el-input v-model="addData.phone" size="small" placeholder="请输入联系电话" clearable></el-input>
                            </el-col>
                        </el-row>
                        <el-row style="line-height: 30px;margin: 15px 0;">
                            <el-col :span="3">下单人</el-col>
                            <el-col :span="8">
                                <el-input v-model="addData.orderName" size="small" placeholder="请输入下单人" clearable></el-input>
                            </el-col>
                            <el-col :span="3" :offset="2">交货日期</el-col>
                            <el-col :span="8">
                                <el-date-picker v-model="addData.delTime" size="small" placeholder="请输入交货日期" clearable
                                    value-format="yyyy-MM-dd"></el-date-picker>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="head" style="line-height: 50px;">
                        <el-col :span="12">产品信息</el-col>
                        <el-col :span="12" style="text-align: right;">
                            <el-button size="mini" @click="addSaleMaterial"><span style="font-size: 12px;">添加行</span></el-button>
                        </el-col>
                    </div>
                    <div class="content">
                        <el-table :data="addData.saleMaterialList" border style="width: 100%">
                            <el-table-column prop="name" label="产品名称" width="180">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.name" size="small" clearable placeholder="请输入产品名称"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="specifications" label="规格型号" width="200">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.specifications" size="small" clearable placeholder="请输入规格型号"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="unit" label="单位">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.unit" size="small" clearable placeholder="请输入"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="number" label="数量">
                                <template slot-scope="scope">
                                    <el-input v-model.number="scope.row.number" size="small"
                                        @change="scope.row.number = isNaN(scope.row.number)?0:scope.row.number" clearable placeholder="请输入"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="price" label="单价">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.price" size="small" clearable placeholder="请输入"></el-input>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="addSale">ç¡® å®š</el-button>
                    <el-button @click="addDia = false">取 æ¶ˆ</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                search: {
                    code: null,
                    name: null,
                    type: null,
                    delTime: null
                },
                tableData: [],
                selects: [],
                currentPage: 1,
                countSize: 0,
                pageSize: 10,
                selectDia: false,
                oneData: null,
                addDia: true,
                addData: {
                    saleMaterialList: []
                }
            }
        },
        mounted() {
            this.selectRawInspectsList()
        },
        methods: {
            handleSelectionChange(val) {
                this.selects = val;
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.selectRawInspectsList()
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.selectRawInspectsList()
            },
            selectRawInspectsList() {
                this.axios.get(this.$api.url.selectSaleList, {
                    params: {
                        pageSize: this.currentPage,
                        countSize: this.pageSize,
                        delTime: this.search.delTime,
                        name: this.search.name,
                        type: this.search.type,
                        orderNumber: this.search.code
                    }
                }).then(res => {
                    this.tableData = res.data.row
                    this.countSize = res.data.total
                })
            },
            clean() {
                this.selects = []
                this.currentPage = 1
                this.countSize = 0
                this.pageSize = 10
                this.search = {
                    formTime: null,
                    createTime: null,
                    insState: 2,
                    judgeState: 2
                }
                this.selectRawInspectsList()
            },
            changeShowDetail(ob) {
                this.selectDia = true
                this.axios.get(this.$api.url.selectSaleDatilById, {
                    params: {
                        id: ob.id
                    }
                }).then(res => {
                    this.oneData = res.data
                })
            },
            addSaleMaterial() {
                this.addData.saleMaterialList.push({})
            },
            addSale() {
                this.axios.post(this.$api.url.addSale, this.addData, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(res => {
                    console.log(res);
                })
            }
        }
    }
</script>

 src/components/view/standard.vue

@@ -153,8 +153,7 @@
      <el-dialog
        title="BOM新增"
        :visible.sync="bomAddModelVisible"
        width="30%"
        :before-close="handleClose">
        width="30%">
        <el-form>
          
        </el-form>
@@ -207,7 +206,6 @@
        this.$refs.tree.filter(val);
      },
      tableType(val){
        console.log(val)
        this.selectProductTableData()
      }
    },
@@ -216,7 +214,6 @@
    },
    methods: {
      handleNodeClick(data) {
        // console.log(data);
        this.checkTreeNode = data
        // this.selectMaterialTree()
        this.selectProductTableData()
@@ -251,7 +248,6 @@
          this.$nextTick().then(() => {
          const firstNode = document.querySelector('.el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node')
          firstNode.click()
          // console.log(firstNode)
          })
        })
        
@@ -275,7 +271,6 @@
        this.tableData = productList
            break;
        }
        console.log(this.tableData)
      }
    }
  }

 src/main.js

@@ -20,7 +20,7 @@
Vue.use(qs);
Vue.use(api);

const javaApi = 'http://192.168.110.167:8001/'
const javaApi = 'http://localhost:8001/'

axios.defaults.baseURL = javaApi
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

 src/view/index.vue

@@ -210,7 +210,11 @@
        <i class="font icon-shouye"></i>
        <div>首页</div>
      </div>
      <el-popover placement="right-start" width="90" trigger="click" v-for="(a, ai) in menu" :key="ai" v-if="a.k!='0'">
            <div :class="`box ${activeBox==3?'active_box':''}`" @click="addTab(menu[1].c[0])">
              <i class="font icon-jine"></i>
              <div>销售管理</div>
            </div>
      <el-popover placement="right-start" width="90" trigger="click" v-for="(a, ai) in menu" :key="ai" v-if="a.k!='0'&&a.k!='3'">
        <div :class="`box ${activeBox==a.k?'active_box':''}`" @click="activeBox = a.k" slot="reference">
          <i :class="a.i"></i>
          <div>{{a.v}}</div>
@@ -268,6 +272,16 @@
            v: "首页",
            i: "font icon-shouye",
            u: "index-index"
          }]
        },{
          k: 3,
          v: "销售管理",
          i: "font icon-jine",
          c: [{
            k: 11,
            v: "销售管理",
            i: "font icon-jine",
            u: "sale"
          }]
        }, {
          k: 1,
@@ -349,6 +363,7 @@
    methods: {
      addTab(ob) {
        if (ob.k == 0) this.activeBox = 0
                if (ob.k == 11) this.activeBox = 3
        this.activeP = ob.k  //0
        this.tabActive = ob.k  //0
        let num = -1;
@@ -380,7 +395,9 @@
          this.activeBox = 1
        } else if (num > 2 && num <= 10) {
          this.activeBox = 2
        }
        } else if(num == 11){
                    this.activeBox = 3
                }
      },
      out() {
        sessionStorage.clear()