crm-app-vue3/pages/wareHouse/components/openOrder.vue

<template>
   <view class="open_order" @click="handleClickOutside">
      <u-navbar class="nav-bar" title="销售业务开单" :autoBack="true" :placeholder="true" v-hideNav></u-navbar>
      <view class="open_order_content">
         <view class="header">
            <image class="header_img" :src="openOrderForm.url || '/static/no-img.png'" alt=""></image>
            <view class="header_box">
               <view class="title">
                  {{ openOrderForm.dictLabel }} | {{ openOrderForm.model }}
               </view>
               <view class="header_detail_box">
                  <view class="total_cost">
                     <view class="total_cost_title">系统总成本</view>
                     <view class="total_cost_price">￥{{ openOrderForm.agentPrice }}</view>
                  </view>
                  <view class="advice_price">
                     <view class="advice_price_title">建议标价</view>
                     <view class="advice_price_price">￥<u--input v-model="openOrderForm.price" placeholder="建议标价"
                           border="none" type="number"></u--input></view>
                  </view>
               </view>
            </view>
         </view>
         <u--form labelPosition="top" :model="openOrderForm" :rules="rules" ref="openOrderForm" label-width="200rpx">
            <view class="card_item">
               <u-form-item label="成交金额" required prop="dealPrice">
                  ￥<u--input v-model="openOrderForm.dealPrice" placeholder="成交金额" border="none"
                     type="number"></u--input>
               </u-form-item>
            </view>
            <view class="card_item">
               <u-form-item label="开单数量">
                  <u-number-box v-model="openOrderForm.quantity" button-size="26"></u-number-box>
               </u-form-item>
            </view>
            <view class="card_item">
               <u-form-item label="订单类型">
                  <TabSelect :tabList="orderTypeList" mode="single" :colNum="4" :defaultIndex="1" labelKey="dictLabel"
                     valueKey="dictValue" @tabChange="changeOrderType">
                  </tabSelect>
               </u-form-item>
            </view>
            <view class="card_item">
               <u-form-item label="销售人员与时间" class="sales_person_box_form">
                  <view class="sales_person_box" @click="recyclePersonClick">
                     <u-icon name="man-add" size="36rpx" color="#374151"></u-icon>
                     <view class="text">{{ openOrderForm.recyclePerson }}</view>
                     <PersonPicker ref="recyclePersonPickerRef" title="请选择回收人员"
                        @selectPerson="handleSelectRecyclePerson"></PersonPicker>
                  </view>
                  <view class="sales_person_box" @click="dateShow = true">
                     <u-icon name="calendar" size="36rpx" color="#374151"></u-icon>
                     <view class="text">{{ openOrderForm.orderDate }}</view>
                     <u-datetime-picker :show="dateShow" v-model="openOrderForm.orderDate" mode="date"
                        @confirm="confirmDate" @close="closeDate" @cancel="closeDate"></u-datetime-picker>
                  </view>

               </u-form-item>
            </view>
            <view class="card_item">
               <u-form-item label="收款方式">
                  <TabSelect :tabList="paymentTabList" mode="single" :colNum="4" :defaultIndex="1"
                     @tabChange="changepayType">
                  </tabSelect>
               </u-form-item>
            </view>
            <view class="card_item">
               <u-form-item label="售后保障配置">
                  <TabSelect :tabList="afterSaleTabList" mode="multiple" :colNum="3" :defaultIndex="1"
                     @tabChange="changeAfterSaleTab">
                  </tabSelect>
               </u-form-item>
            </view>
            <view class="card_item">
               <u-form-item label="支付凭证图片">
                  <view class="imgs_scroll">
                     <ImgsRowScroll :isShowDeleteIcon="true"
                        @deleteImgInfo="getDeletePayTypeProofPicInfo" imgMode="aspectFill" :totalWidth="400"
                        :images="openOrderForm.payTypeProofPicFileList" :previewEnabled="true" :imageWidth="150"
                        :imageHeight="150">
                     </ImgsRowScroll>
                     <u-upload @afterRead="afterReadpayTypeProofPic" name="1" multiple :maxCount="10"></u-upload>
                  </view>
               </u-form-item>
            </view>
            <view class="card_item">
               <u-form-item label="订单备注">
                  <u--textarea v-model="openOrderForm.remark" placeholder="请输入订单备注" confirmType="done"></u--textarea>
               </u-form-item>
            </view>
            <view class="card_item">
               <u-form-item label="收货地址">
                  <u--textarea v-model="openOrderForm.address" placeholder="请输入收货地址" confirmType="done"></u--textarea>
               </u-form-item>
            </view>
         </u--form>
      </view>
      <view class="bottom_box">
         <view class="bottom_box_item">
            <view class="bottom_box_item_title">实收总计</view>
            <view class="bottom_box_item_price">￥{{ openOrderForm.dealPrice * openOrderForm.quantity || 0 }}</view>
         </view>
         <u-button color="#3c9cff" type="primary" @click="submitForm" icon="checkmark">确认开单</u-button>
      </view>
   </view>
</template>
<script>
import TabSelect from '@/components/custom-tab-select/index.vue'
import ImgsRowScroll from '@/components/imgs-row-scroll/index.vue'
import PersonPicker from '@/components/person-picker/index.vue'
import { afterSaleTabList, paymentTabList } from '../js/public.js'
export default {
   components: {
      TabSelect,
      ImgsRowScroll,
      PersonPicker,
   },
   data() {
      return {
         payTypeProofPicFileList: [],
         openOrderForm: {
            url: '',
            dictLabel: '',
            dictValue: '',
            model: '',
            agentPrice: '',
            price: null,
            dealPrice: null,
            quantity: 1,
            recyclePerson: '',
            recyclePersonId: '',
            orderType: '',
            orderDate: this.$dayjs().format('YYYY-MM-DD'),
            payType: 1,
            afterSaleTab: [],
            remark: '',
            address: '',
            type: '',
         },
         afterSaleTabList: afterSaleTabList,
         paymentTabList: paymentTabList,
         orderTypeList: [],
         rules: {
            dealPrice: [
               { required: true, message: '请输入成交金额', trigger: ['blur'] },
            ],
         },
         dateShow: false,
      }
   },
   onLoad(options) {
      const params = options.params || '{}'

      if (params) {
         this.openOrderForm.quantity = 1
         Object.keys(JSON.parse(params)).forEach(key => {
            this.openOrderForm[key] = JSON.parse(params)[key]
         })
         this.getOrderTypeList()
      }
   },
   methods: {
      getOrderTypeList() {
         this.$getDicts("crm_sendOrder_type").then(res => {
            this.orderTypeList = res
         })
      },
      changeOrderType(val) {
         this.openOrderForm.orderType = val
      },
      changepayType(val) {
         this.openOrderForm.payType = val
      },
      changeAfterSaleTab(val) {
         this.openOrderForm.afterSaleTab = val
      },
      // 打开回收人选择器
      recyclePersonClick() {
         this.$refs.recyclePersonPickerRef.open();
      },
      handleSelectRecyclePerson(person) {
         this.openOrderForm.recyclePerson = person.label
         this.openOrderForm.recyclePersonId = person.id
      },
      handleClickOutside() {
         this.personShow = false
      },
      confirmDate(val) {
         this.$nextTick(() => {
            this.openOrderForm.orderDate = this.$dayjs(val.value).format('YYYY-MM-DD');
         })
         this.dateShow = false
      },
      closeDate() {
         this.dateShow = false
      },
      getDeletePayTypeProofPicInfo(info) {
         this.openOrderForm.payTypeProofPicFileList = info.newImages
      },
      async afterReadPayTypeProofPic(event) {
         event.file.forEach(item => {
            uni.$u.api.uploadFile(item.url).then((res) => {
               this.openOrderForm.payTypeProofPicFileList.push(res.data.url);
               uni.$u.toast("文件上传成功");
            }).catch(() => {
               uni.$u.toast("上传文件失败");
            })
         })
      },
      submitForm() {
         this.$refs.openOrderForm.validate().then(res => {
            if (res) {
               const data = {
                  ...this.openOrderForm,
                  payTypeProofPicFileList: this.payTypeProofPicFileList,
                  amountReceived: Number(this.openOrderForm.dealPrice) * Number(this.openOrderForm.quantity),
               }
               uni.$u.api.wareHouseOpenOrder(data).then(() => {
                  uni.$u.toast("开单成功");
                  setTimeout(() => {
                     uni.navigateBack({
                        delta: 2
                     });
                  }, 1000);
               }).catch((error) => {
                  uni.$u.toast(error);
               })
            }
         })
      },
   }
}
</script>
<style lang="scss" scoped>
@import '../styles/openOrder.scss';
</style>