订单

src/api/sale.js

@@ -25,3 +25,19 @@ export function revokePurchase (data) {
     data
   })
 }
+
+// 订单列表
+export function getOrderList (params) {
+  return request({
+    url: request.adornUrl(`/biz-service/order/list`),
+    method: 'get',
+    params: params
+  })
+}
+// 订单详情
+export function getOrderDetail (id) {
+  return request({
+    url: request.adornUrl(`/biz-service/order/info/${id}`),
+    method: 'get'
+  })
+}

src/views/modules/order/order-add-or-update.vue

@@ -0,0 +1,379 @@
+<template>
+  <div>
+    <el-dialog
+      :title="!id ? '新增': display ? '详情' : '修改'"
+      width="70%"
+      :close-on-click-modal="false"
+      :visible.sync="visible">
+      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="auto">
+        <el-row class="my-row">
+          <el-col :span="8">
+            <el-form-item label="订单编码" prop="orderCode">
+              <el-input v-model="dataForm.orderCode" :disabled="true" placeholder="系统自动生成"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8" style="padding-left: 20px">
+            <el-form-item label="客户订单编码" prop="cusOrderCode">
+              <el-input v-model="dataForm.cusOrderCode" :disabled="display" placeholder="客户订单编码"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8" style="padding-left: 20px">
+            <el-form-item label="客户名称" prop="customerId">
+              <el-input v-if="display" v-model="dataForm.customerId" disabled></el-input>
+              <el-select v-else
+                v-model="dataForm.customerId"
+                :disabled="display"
+                         filterable
+                remote
+                         :remote-method="remoteCusList"
+                placeholder="请选择">
+                <el-option
+                  v-for="item in optionsCus"
+                  :key="item.code"
+                  :label="item.value"
+                  :value="item.code">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row class="my-row">
+          <el-col :span="8">
+            <el-form-item label="业务员" prop="source">
+              <el-input v-if="display" v-model="dataForm.salesmanId" disabled></el-input>
+              <user-component v-else v-model="dataForm.salesmanId"></user-component>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8" style="padding-left: 20px">
+            <el-form-item label="合同交期" prop="techId">
+              <el-input v-if="display" v-model="dataForm.contactDate" disabled></el-input>
+              <el-date-picker v-else
+                v-model="dataForm.contactDate"
+                value-format="yyyy-MM-dd"
+                type="date">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row class="my-row">
+          <el-form-item label="合同扫描件" prop="attachList">
+            <el-upload
+              class="upload-demo"
+              ref="upload"
+              :multiple="true"
+              action="#"
+              accept="image/jpeg,image/gif,image/png"
+              :on-preview="handlePreview"
+              :on-remove="handleRemove"
+              :on-change="handleChange"
+              :file-list="fileList"
+              :limit="5"
+              :on-exceed="handleExceed"
+              :auto-upload="false">
+              <el-button slot="trigger" size="small" type="primary" v-show="!display">选取文件</el-button>
+              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" v-show="!display">开始上传</el-button>
+              <div slot="tip" class="el-upload__tip" v-show="!display">只能上传jpg/png文件，最多5张图片，且每张图片不超过10M</div>
+            </el-upload>
+          </el-form-item>
+        </el-row>
+        <el-row class="my-row">
+          <el-form-item label="备注说明" prop="notes">
+            <el-input v-model="dataForm.notes" :disabled="display" placeholder="备注说明"></el-input>
+          </el-form-item>
+        </el-row>
+        <el-row class="my-row">
+          <div class="title"><span style="color: red">*</span> 订单产品明细</div>
+          <el-table
+            :data="productDetails"
+            border
+            style="width: 100%;">
+            <el-table-column
+              label="序号"
+              type="index"
+              width="50"
+              align="center">
+            </el-table-column>
+            <el-table-column
+              prop="productName"
+              header-align="center"
+              align="center"
+              label="产品名称">
+            </el-table-column>
+            <el-table-column
+              prop="cnt"
+              header-align="center"
+              align="center"
+              label="数量">
+            </el-table-column>
+            <el-table-column
+              prop="unitName"
+              header-align="center"
+              align="center"
+              label="订单编号">
+            </el-table-column>
+            <el-table-column
+              prop="unitName"
+              header-align="center"
+              align="center"
+              label="含税单价">
+            </el-table-column>
+            <el-table-column
+              prop="unitName"
+              header-align="center"
+              align="center"
+              label="含税总价">
+            </el-table-column>
+            <el-table-column
+              prop="unitName"
+              header-align="center"
+              align="center"
+              label="税率">
+            </el-table-column>
+            <el-table-column
+              prop="notes"
+              header-align="center"
+              align="center"
+              label="备注">
+            </el-table-column>
+          </el-table>
+          <el-row style="text-align: center; margin-top: 10px;">
+            <el-button v-show="!display" type="primary" icon="el-icon-plus" @click="addProduct"></el-button>
+          </el-row>
+        </el-row>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+          <el-button @click="visible = false">取消</el-button>
+          <el-button v-if="!display" type="primary" @click="dataFormSubmit()">确定</el-button>
+        </span>
+    </el-dialog>
+    <!-- 图片预览 -->
+    <el-dialog title="图片预览" :visible.sync="previewVisible" width="50%">
+      <img :src="previewPath" :alt="previewName" style="width:100%;height:100%" />
+    </el-dialog>
+    <template-chose v-if="productListVisible" ref="productList" @addItem="addProductItem" />
+  </div>
+</template>
+
+<script>
+  import templateChose from '../product/template-chose'
+  import { getOrderDetail } from '@/api/sale'
+  import { uploadUrl, downloadUrl, uploadFiles } from '@/api/file'
+  import { getCusList } from '@/api/cus'
+  import UserComponent from '../common/user-component'
+
+  export default {
+    name: 'order-add-or-update',
+    components: {UserComponent, templateChose},
+    computed: {
+      orgId: {
+        get () { return this.$store.state.user.orgId }
+      }
+    },
+    data () {
+      return {
+        productListVisible: false,
+        visible: false,
+        display: false,
+        optionsCus: [],
+        fileList: [],
+        dataList: [],
+        id: 0,
+        productDetails: [],
+        dataForm: {},
+        uploadUrl: uploadUrl,
+        previewPath: '',
+        previewName: '',
+        previewVisible: false,
+        dataRule: {
+          cusOrderCode: [{ required: true, message: '客户订单编码不能为空', trigger: 'blur' }],
+          customerId: [{ required: true, message: '客户名称不能为空', trigger: 'change' }],
+          salesmanId: [{ required: true, message: '业务员不能为空', trigger: 'change' }],
+          attachList: [{ required: true, message: '合同扫描附件不能为空', trigger: 'blur' }]
+        }
+      }
+    },
+    methods: {
+      async init (id, display) {
+        this.fileList = []
+        this.dataForm = {}
+        this.productDetails = []
+        this.visible = true
+        this.id = id || 0
+        this.display = display
+        if (!id) return
+        await getOrderDetail(this.id).then(({data}) => {
+          if (data && data.code === '200') {
+            this.dataForm = data.data
+            console.log('data = ' + JSON.stringify(data.data))
+            // // 组合小产品
+            // data.data.composeProductMaterialList.forEach((item) => {
+            //   this.productDetails.push(item)
+            // })
+            // // 产品配料清单
+            // data.data.productMaterialList.forEach((item) => {
+            //   this.materialList.push(item)
+            // })
+            // // 产品来源
+            // if (data.data.source) {
+            //   this.optionsSource = [{
+            //     code: data.data.source,
+            //     value: data.data.sourceName
+            //   }]
+            // }
+            // // 产品工艺
+            // if (data.data.techId) {
+            //   this.optionsTech = [{
+            //     code: data.data.techId,
+            //     value: data.data.techName
+            //   }]
+            // }
+            // // 产品图纸
+            // if (data.data.proDrawings) {
+            //   this.dataForm.drawingIdList = []
+            //   data.data.proDrawings.forEach((item) => {
+            //     if (item.attachList) {
+            //       item.attachList.forEach((item1) => {
+            //         this.fileList.push({
+            //           name: item1.fileName,
+            //           url: item1.url,
+            //           id: item1.url
+            //         })
+            //       })
+            //     }
+            //     this.optionsDraw.push({
+            //       code: item.drawingId,
+            //       value: item.drawingName
+            //     })
+            //     this.dataForm.drawingIdList.push(item.drawingId)
+            //   })
+            // }
+          }
+        })
+      },
+      submitUpload () {
+        if (this.fileList.length === 0) {
+          return this.$message.warning('请选取文件后再上传')
+        }
+        const formData = new FormData()
+        this.fileList.forEach((file) => {
+          formData.append('file', file.raw)
+        })
+        uploadFiles(formData).then(({data}) => {
+          if (data && data.code === '200') {
+            data.data.forEach((item) => {
+              let fileData = this.fileList.find((file) => file.name === item.originFileName)
+              fileData.url = item.fileUrl
+            })
+            this.$message.success('上传成功')
+          } else {
+            this.$message.error('上传失败')
+          }
+        })
+      },
+      handleRemove (file, fileList) {
+        this.fileList = fileList
+      },
+      handleChange (file, fileList) {
+        this.fileList = fileList
+      },
+      handleExceed (files, fileList) {
+        this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
+      },
+      handlePreview (file) {
+        if (file && file.url) {
+          // 获取文件路径
+          this.previewPath = downloadUrl + file.url
+          this.previewName = file.name
+          this.previewVisible = true
+        }
+      },
+      // 产品来源（客户）列表
+      async remoteCusList (query) {
+        if (!query) {
+          query = ''
+        }
+        await getCusList({'customerName': query}).then(({data}) => {
+          if (data && data.code === '200') {
+            this.optionsCus = []
+            data.data.records.forEach((item) => {
+              this.optionsCus.push({
+                code: item.customerId,
+                value: item.customerName
+              })
+            })
+          }
+        }
+        )
+      },
+      // 添加组合产品
+      addProduct () {
+        this.productListVisible = true
+        this.$nextTick(() => {
+          this.$refs.productList.init()
+        })
+      },
+      addProductItem (item) {
+        this.productDetails.push({
+          productId: item.productId,
+          productName: item.productName,
+          productSpec: item.productSpec,
+          cnt: 1,
+          unitName: item.unitName,
+          notes: item.notes
+        })
+      },
+      addMaterial () {
+        this.materialListVisible = true
+        this.$nextTick(() => {
+          this.$refs.materialList.init()
+        })
+      },
+      addMaterialItem (item) {
+        this.materialList.push({
+          materialId: item.materialId,
+          materialName: item.materialName,
+          specifications: item.specifications,
+          cnt: item.cnt,
+          unitName: item.unitName,
+          notes: item.notes
+        })
+      },
+      validateField (type) {
+        this.$refs.dataForm.validateField(type)
+      },
+      // 表单提交
+      dataFormSubmit () {
+        this.$refs['dataForm'].validate((valid) => {
+          if (valid) {
+            // 合同扫描件
+            // 订单产品明细
+            // this.dataForm.composeProductMaterialList = []
+            this.$http({
+              url: this.$http.adornUrl(`/biz-service/product/save`),
+              method: 'post',
+              data: this.$http.adornData({...this.dataForm, orgId: this.orgId})
+            }).then(({data}) => {
+              if (data && data.code === '200') {
+                this.$message({
+                  message: '操作成功',
+                  type: 'success',
+                  duration: 1500,
+                  onClose: () => {
+                    this.visible = false
+                    this.$emit('refreshDataList')
+                  }
+                })
+              } else {
+                this.$message.error(data.msg)
+              }
+            })
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/modules/order/order.vue

@@ -1,11 +1,257 @@
+<!-- 订单 -->
 <template>
-
+  <div class="order">
+    <el-form :inline="true" :model="dataForm" @keyup.enter.native="queryData()">
+      <el-form-item label="客户名称">
+        <el-select
+                   v-model="dataForm.customerId"
+                   remote
+                   filterable
+                   :remote-method="remoteCustomer"
+                   placeholder="请选择">
+          <el-option
+            v-for="item in optionsCustomer"
+            :key="item.code"
+            :label="item.value"
+            :value="item.code">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="合同编码">
+        <el-input v-model="dataForm.cusOrderCode" placeholder="合同编码" clearable></el-input>
+      </el-form-item>
+      <el-form-item label="创建日期">
+        <el-date-picker
+          v-model="dataForm.createTime"
+          value-format="yyyy-MM-dd"
+          type="date">
+        </el-date-picker>
+      </el-form-item>
+<!--      <el-form-item label="状态">-->
+<!--        <el-select-->
+<!--                   v-model="dataForm.state"-->
+<!--                   placeholder="请选择">-->
+<!--          <el-option-->
+<!--            v-for="item in optionsState"-->
+<!--            :key="item.code"-->
+<!--            :label="item.value"-->
+<!--            :value="item.code">-->
+<!--          </el-option>-->
+<!--        </el-select>-->
+<!--      </el-form-item>-->
+      <el-form-item>
+        <el-button @click="queryData()">查询</el-button>
+        <el-button @click="addOrUpdateHandle(0, false)" type="primary">创建订单</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      :data="dataList"
+      border
+      v-loading="dataListLoading"
+      @selection-change="selectionChangeHandle"
+      style="width: 100%;">
+      <el-table-column
+        label="序号"
+        type="index"
+        width="50"
+        align="center">
+      </el-table-column>
+      <el-table-column
+        prop="orderCode"
+        header-align="center"
+        align="center"
+        min-width="180"
+        label="订单编码">
+      </el-table-column>
+      <el-table-column
+        prop="customerName"
+        header-align="center"
+        align="center"
+        min-width="180"
+        :show-overflow-tooltip="true"
+        label="客户名称">
+      </el-table-column>
+      <el-table-column
+        prop="cusOrderCode"
+        header-align="center"
+        align="center"
+        min-width="120"
+        label="客户订单编号">
+      </el-table-column>
+      <el-table-column
+        prop="createTime"
+        header-align="center"
+        align="center"
+        min-width="160"
+        label="下单时间">
+      </el-table-column>
+      <el-table-column
+        prop="contactDate"
+        header-align="center"
+        align="center"
+        min-width="160"
+        label="合同交期">
+      </el-table-column>
+      <el-table-column
+        prop="state"
+        header-align="center"
+        align="center"
+        label="当前状态">
+      </el-table-column>
+      <el-table-column
+        prop="completeDate"
+        header-align="center"
+        align="center"
+        min-width="160"
+        label="订单完成时间">
+      </el-table-column>
+      <el-table-column
+        prop="notes"
+        header-align="center"
+        align="center"
+        min-width="100"
+        :show-overflow-tooltip="true"
+        label="备注">
+      </el-table-column>
+      <el-table-column
+        fixed="right"
+        header-align="center"
+        align="center"
+        width="150"
+        label="操作">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.orderId, true)">查看</el-button>
+          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.orderId,false)">编辑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper">
+    </el-pagination>
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+  </div>
 </template>
 
 <script>
+  import AddOrUpdate from './order-add-or-update'
+  import { getOrderList } from '@/api/sale'
+  import { getCusList } from '@/api/cus'
   export default {
-    // 订单管理
-    name: 'order'
+    name: 'order',
+    components: {
+      AddOrUpdate
+    },
+    created () {
+      this.queryData()
+    },
+    data () {
+      return {
+        addOrUpdateVisible: false,
+        dataForm: {},
+        dataList: [],
+        pageIndex: 1,
+        pageSize: 10,
+        totalPage: 0,
+        dataListLoading: false,
+        dataListSelections: [],
+        optionsState: [
+          {
+            code: null, value: '全部'
+          },
+          {
+            code: '0', value: '待提交'
+          },
+          {
+            code: '1', value: '待审批'
+          },
+          {
+            code: '2', value: '审批中'
+          },
+          {
+            code: '3', value: '审批完成'
+          },
+          {
+            code: '4', value: '审批不通过'
+          }
+        ],
+        optionsCustomer: []
+      }
+    },
+    methods: {
+      // 查询
+      queryData () {
+        this.pageIndex = 1
+        this.getDataList()
+      },
+      // 获取数据列表
+      getDataList () {
+        this.dataListLoading = true
+        let params = {
+          'current': this.pageIndex,
+          'size': this.pageSize,
+          'createTime': this.dataForm.createTime ? this.dataForm.createTime : null,
+          'cusOrderCode': this.dataForm.cusOrderCode ? this.dataForm.cusOrderCode : null,
+          'customerId': this.dataForm.customerId ? this.dataForm.customerId : null,
+          'state': this.dataForm.state ? this.dataForm.state : null
+        }
+        getOrderList(params).then(({data}) => {
+          if (data && data.code === '200') {
+            this.dataList = data.data.records
+            this.totalPage = Number(data.data.total)
+          } else {
+            this.dataList = []
+            this.totalPage = 0
+          }
+          this.dataListLoading = false
+        })
+      },
+      // 每页数
+      sizeChangeHandle (val) {
+        this.pageSize = val
+        this.pageIndex = 1
+        this.getDataList()
+      },
+      // 当前页
+      currentChangeHandle (val) {
+        this.pageIndex = val
+        this.getDataList()
+      },
+      // 多选
+      selectionChangeHandle (val) {
+        this.dataListSelections = val
+      },
+      // 远程方法：获取客户列表
+      async remoteCustomer (query) {
+        if (!query) {
+          query = ''
+        }
+        await getCusList({'customerName': query}).then(({data}) => {
+          if (data && data.code === '200') {
+            this.optionsCustomer = []
+            data.data.records.forEach((item) => {
+              this.optionsCustomer.push({
+                code: item.customerId,
+                value: item.customerName
+              })
+            })
+          }
+        })
+      },
+      // 新增 / 修改
+      addOrUpdateHandle (id, disable) {
+        this.addOrUpdateVisible = true
+        this.$nextTick(() => {
+          this.$refs.addOrUpdate.init(id, disable)
+        })
+      }
+    }
   }
 </script>