update 商品管理和花农的

xuxy

2024-06-25 d1bb68d9f9054bbf87cd84956d3240c71d8e370c

 pages/farmer/flower-manage/flower-add.vue

@@ -1,72 +1,86 @@
<template>
   <view class="container-page">
   <view class="container-page" style="padding: 0rpx;">
      <view>
         <view class="form-item">
            <view class="label required">商品分类</view>
            <view class="m-l-a m-r-0 flex " :class="[!dto.applicationType?'desc-gray':'']" @click="()=>{
               if(!id){
                  show_select_type=true
               }
            <view class="label required">商品分类todo</view>
            <view class="m-l-a m-r-0 flex " :class="[!dto.category?'desc-gray':'']" @click="()=>{
               show_select_category=true
            }">
               <view>{{dto.applicationTypeStr||dto.applicationType || '请选择'}}</view>
               <view>{{dto.categoryStr||dto.category || '请选择'}}</view>
               <u-icon class="m-l-a" name="arrow-right"></u-icon>
            </view>

         </view>
         <view class="form-item before-line">
            <view class="label required">商品名称</view>
            <view class="m-l-a m-r-0 flex">
               <input v-model="dto.name" placeholder="请输入商品名称" style="margin-top: 16px;text-align: right;"></input>

            </view>
         </view>
         <view class="form-item before-line">
            <view class="label required">商品单位</view>
            <view class="m-l-a m-r-0 flex">
               <input v-model="dto.applicationTitle" placeholder="请输入店铺名称"
                  style="margin-top: 16px;text-align: right;"></input>
               <input v-model="dto.unit" placeholder="请输入商品单位" style="margin-top: 16px;text-align: right;"></input>

            </view>
         </view>
         <view class="form-item before-line">
            <view class="label required">商品颜色</view>
            <view class="m-l-a m-r-0 flex " :class="[!dto.applicationType?'desc-gray':'']" @click="()=>{
               if(!id){
                  show_select_type=true
               }
            <!--    <view class="m-l-a m-r-0 flex " :class="[!dto.color?'desc-gray':'']" @click="()=>{
               show_select_color=true
            }">
               <view>{{dto.applicationTypeStr||dto.applicationType || '请选择'}}</view>
               <u-icon class="m-l-a" name="arrow-right"></u-icon>
            </view> -->
            <view class="m-l-a m-r-0 flex">
               <input v-model="dto.color" placeholder="请输入商品颜色"
                  style="margin-top: 16px;text-align: right;"></input>
            </view>

         </view>
         <view class="line-gray-big"></view>

         <view class="form-item">
            <view class="label required">列表封面图（130*120px）</view>
            <view class="label required" style="width: 400rpx;">列表封面图（130*120px）</view>
            <view class="m-l-a m-r-0 flex">
               <view class="component-button-upload" @click="uploadIcon('icon')"
                  :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}">
               <view class="component-button-upload" @click="uploadIcon('cover')"
                  :style="{'background-image':dto.icon&&`url('${dto.cover}')`||''}">

               </view>
            </view>
         </view>
         <view class="form-item before-line">
            <view class="label required">商品轮播图（300*160px）</view>
         <view class="form-item before-line bottom-border-no">
            <view class="label required" style="width: 400rpx;">商品轮播图（300*160px）</view>
            <view class="m-l-a m-r-0 flex">
               <view class="component-button-upload" @click="uploadIcon('icon')"
                  :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}">
               <!-- :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}" -->
               <view class="component-button-upload" @click="uploadIcon('bannerList')">

               </view>
            </view>
         </view>
         <view class="flex p20" style="padding-top: 0rpx;padding-bottom: 10rpx"
            v-if="dto.bannerList&&dto.bannerList.length>0">
            <view class="m-t-12 m-r-10 " v-for="(tBanner,index) of dto.bannerList" :key="index">
               <image class="banner-img" :src="tBanner" @click.stop="previewImg(tBanner)">

               </image>
               <view class="t-red text-center" @click.stop="deleteBanner(index)">删除</view>
            </view>
         </view>
         <view class="line-gray-big"></view>


         <view class="form-item before-line">
            <view class="label required">售价</view>
            <view class="label required">售价(元)</view>
            <view class="m-l-a m-r-0 flex">
               <input v-model="dto.applicationTitle" placeholder="请输入数字" type="digit"
               <input v-model="dto.price" placeholder="请输入数字" type="digit"
                  style="margin-top: 16px;text-align: right;"></input>
            </view>
         </view>
         <view class="form-item before-line">
         <view class="form-item ">
            <view class="label required">库存</view>
            <view class="m-l-a m-r-0 flex">
               <input v-model="dto.applicationTitle" placeholder="请输入数字" type="number"
               <input v-model="dto.stock" placeholder="请输入数字" type="number"
                  style="margin-top: 16px;text-align: right;"></input>
            </view>
         </view>
@@ -76,11 +90,18 @@
         <view class="form-item ">
            <view class="label required">商品参数详情</view>
            <view class="m-l-a m-r-0 flex " :class="[!dto.applicationType?'desc-gray':'']" @click="()=>{
               if(!id){
                  show_select_type=true
               if(!dto.category){
                  $message.showToast('请先选择分类')
               }else{
                  if(dto.params&&dto.params.length==0){
                     $message.showToast('暂无参数可以设置')
                  }else{
                     $refs.popup_param.open()
                  }
						
               }
            }">
               <view>{{dto.applicationTypeStr||dto.applicationType || '去设置'}}</view>
               <view>{{ '去设置'}}</view>
               <u-icon class="m-l-a" name="arrow-right"></u-icon>
            </view>

@@ -88,12 +109,10 @@
         <view class="line-gray-big"></view>
         <view class="form-item before-line">
            <view class="label required">商品等级</view>
            <view class="m-l-a m-r-0 flex " :class="[!dto.applicationType?'desc-gray':'']" @click="()=>{
               if(!id){
                  show_select_type=true
               }
            <view class="m-l-a m-r-0 flex " :class="[!dto.level?'desc-gray':'']" @click="()=>{
               show_select_level=true
            }">
               <view>{{dto.applicationTypeStr||dto.applicationType || '请选择'}}</view>
               <view>{{dto.levelStr||dto.level || '请选择'}}</view>
               <u-icon class="m-l-a" name="arrow-right"></u-icon>
            </view>

@@ -103,37 +122,62 @@
         <view class="form-item before-line">
            <view class="label required">商品视频</view>
            <view class="m-l-a m-r-0 flex">
               <view class="component-button-upload m-r-15" @click="uploadIcon('icon')"
                  :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}">
               <!-- :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}" -->
               <view class="component-button-upload m-r-15" @click="uploadIcon('video')">

               </view>

            </view>
         </view>




         <view class="button-green-1 m-t-20 button-fixed-bottom before-line" @click="submit">
            提交审核
         <view v-if="dto.video">
            <video :src="dto.video" style="display: block;margin: 0 auto;"></video>
         </view>

         <view style="min-height: 200rpx;">
            &nbsp;
         </view>
         <view class="button-green-1 m-t-20 button-fixed-bottom " @click="submit" v-if="!dto.id">
            提交审核
         </view>
         <view class="button-green-1 m-t-20 button-fixed-bottom before-line" @click="submit" v-if="dto.id">
            修改
         </view>
      </view>


      <u-picker @confirm="select_type" keyName="label" @cancel="show_select_type=false" :show="show_select_type"
         :columns="columns_types"></u-picker>
      <u-picker @confirm="select_category" keyName="name" @cancel="show_select_category=false"
         :show="show_select_category" :columns="columns_categorys"></u-picker>

      <u-picker @confirm="select_user" keyName="label" @cancel="show_select_user=false" :show="show_select_user"
         :columns="userListCols"></u-picker>
      <u-picker @confirm="select_level" keyName="label" @cancel="show_select_level=false" :show="show_select_level"
         :columns="columns_levels"></u-picker>


      <uni-popup ref="popup_param" type="top">
         <view class="component-popup_input" v-if="dto.params">
            <view class="text-center m-b-40" style="font-size: 48rpx;font-weight: 600;">商品参数设置</view>
            <!-- 输入框-->
            <view v-for="(item,i) in dto.params" :key="i" class="m-b-20">
               <view class="title topic-font" style="font-size: 36rpx;font-weight: 600;">{{item.name}}</view>
               <view class="m-t-12">
                  <u-radio-group v-model="item.value" placement="row">
                     <u-radio
                        :customStyle="{'margin-bottom': '16rpx','margin-right': '24rpx','font-size':'28rpx'}"
                        v-for="(each, j) in item.values" :key="j" :label="each" :name="each">
                     </u-radio>
                  </u-radio-group>
               </view>
            </view>

            <!-- 提交按钮 -->
            <view class="button-green" @click="closeParamPop">返回</view>
         </view>
      </uni-popup>

   </view>
</template>

<script>
   import environments from '@/environments'
   import xflSelect from '@/components/xfl-select/xfl-select.vue'; //导入

   import {
      mapState
@@ -144,76 +188,69 @@
      data() {
         return {
            id: '',
            orderId: '',
            show_addlog: false,
            log_remarks: '',
            refresh: false,
            api: '',
            dto: {
               id: '',
               applicationType: '',
               name: '',
               category: '',
               unit: '',
               color: '',
               cover: '',
               bannerList: [], //str[]
               video: '',
               level: '', //FLOWER_LEVEL
               price: 0.00,
               stock: 0,
               params: [], //id,value
            },
            show_select_type: false,
            show_select_user: false,
            columns_types: [],
            audit_remarks: '',
            audit_result: false,
            show_audit: false,


            //审核方式
            shTypeList: [{
                  name: '身份证',
                  disabled: false
               },
               {
                  name: '营业执照',
                  disabled: false
               }
            ],
            radiovalue1: '身份证',

            show_select_category: false,
            show_select_level: false,
            columns_categorys: [],
            columns_levels: [],
            //    columns_params: [], //弹窗选择具体的值
         }
      },
      onLoad(options) {
      async onLoad(options) {
         if (options.id) {
            this.id = options.id
            uni.setNavigationBarTitle({
               title: '商品详情'
            })
            this.getDetail()
         } else {
            // this.$http.request('get', '/api/personnel/employee/list', {
            //    params: {
            //       size: 4000,
            //       current: 1
            //    }
            // }).then(res => {
            //    this.userListAll = (res.data && res.data.records || []).map(item => {
            //       item.label = item.label || item.name || item.nickName || item.loginName || '-'
            //       return item
            //    })
            //    var index = 0
            //    this.userList = this.userListAll.map(item => {
            //       index += 1
            //       return `${index}.` + item.label + (item.tel ? `(${item.tel})` : '')
            //    })
            //    var arr = this.userListAll.map(item => {
            //       return {
            //          label: item.label + (item.tel ? `(${item.tel})` : ''),
            //          value: item.id
            //       }
            //    })
            //    this.userListCols = [arr]
            if (options.copyId) {
               this.id = options.copyId
               await this.getDetail()
               this.id = ''
               delete this.dto.id
               uni.setNavigationBarTitle({
                  title: '复制商品并新增'
               })
            } else {
               uni.setNavigationBarTitle({
                  title: '商品新增'
               })
            }

            // })
            //tree
            this.$http.request('get', '/api/flower/category/tree', {}).then(res => {
               var data = res.data
               this.columns_categorys = [data || []]
               this.columns_categorys[0].unshift({
                  label: '全部',
                  value: '',
                  children: []
               })

            })

            this.$http.request('get', '/api/dict/value', {
            this.$http.request('get', '/api/code/value', {
               params: {
                  typeCode: 'APPLICATION_TYPE'
                  typeCode: 'FLOWER_LEVEL'
               }
            }).then(res => {
               var data = res.data
               this.columns_types = [data || []]
               this.columns_types[0].unshift({
               this.columns_levels = [data || []]
               this.columns_levels[0].unshift({
                  label: '全部',
                  value: ''
               })
@@ -224,17 +261,48 @@
      },

      methods: {


         select_type(e) {
            this.show_select_type = false
            this.dto.applicationTypeStr = e.value[0].label
            this.dto.applicationType = e.value[0].value
         closeParamPop() {
            this.$refs.popup_param.close()
         },
         select_user(e) {
            this.show_select_user = false
            this.dto.auditPersonStr = e.value[0].label
            this.dto.auditPersonId = e.value[0].value

         async select_category(e) {
            if (e.value[0].id !== this.dto.category) {
               if (this.dto.category) {
                  await this.$message.confirm('修改分类将清空商品参数，确定修改吗')
               }
               console.log('select_category', e)
               this.show_select_category = false
               this.dto.categoryStr = e.value[0].name
               this.dto.category = e.value[0].id
               this.$message.showLoading()
               await this.refresh_category()
               this.$message.hideLoading()
            } else {

            }

         },
         async refresh_category() {
            // this.columns_params = []
            this.dto.params = []
            //获取分类参数
            if (this.dto.category) {
               const res = await this.$http.request('get', '/api/supplier/flower/params', {
                  params: {
                     categoryId: this.dto.category
                  }
               })
               if (res.code == 0) {
                  // this.columns_params = res.data || []
                  this.dto.params = res.data || []
               }
            }

         },
         select_level(e) {
            this.show_select_level = false
            this.dto.levelStr = e.value[0].label
            this.dto.level = e.value[0].value
         },

         async getDetail() {
@@ -242,108 +310,128 @@
            const {
               code,
               data
            } = await this.$http.request('get', "/api/app/application/get/" + this.id, {})
            } = await this.$http.request('get', "/api/supplier/flower/list/view?id=" + this.id, {})
            if (code == 0) {
               this.dto = {
                  ...data,

               }
               if (this.dto.applicationDate) {
                  this.dto.applicationDate = this.$util.toDate(new Date(this.dto.applicationDate))
               // if (this.dto.applicationDate) {
               //    this.dto.applicationDate = this.$util.toDate(new Date(this.dto.applicationDate))
               // }
               // // console.log('this.dto', this.dto)
               if (!this.dto.bannerList) {
                  this.dto.bannerList = []
               }
               // console.log('this.dto', this.dto)

               // if (this.dto.category) {
               //    await this.refresh_category()
               // }
            }

            this.$message.hideLoading()

         },
         async submit() {
            if (!this.dto.applicationType) {
               this.$message.showToast('未选择类型')
               return
            }
            if (!this.dto.applicationTitle) {
               this.$message.showToast('未填写申请主题')
               return
            }
            if (!this.dto.auditPersonId) {
               this.$message.showToast('未选择审批人')
               return
            }
            await this.$message.confirm(`是否确定提交申请${this.auditPersonName?("，审批人为:"+this.auditPersonName):""}`)
            // if (!this.dto.applicationType) {
            //    this.$message.showToast('未选择类型')
            //    return
            // }
            // if (!this.dto.applicationTitle) {
            //    this.$message.showToast('未填写申请主题')
            //    return
            // }
            // if (!this.dto.auditPersonId) {
            //    this.$message.showToast('未选择审批人')
            //    return
            // }
            // await this.$message.confirm(`是否确定提交申请${this.auditPersonName?("，审批人为:"+this.auditPersonName):""}`)

            // this.$message.showToast('1')
            // return
            var dto = {
               ...this.dto,
               applicationDate: this.$util.toDate(new Date()),
               applicantId: this.currentInfo.id
               // applicationDate: this.$util.toDate(new Date()),
               // applicantId: this.currentInfo.id
            }
            this.$message.showLoading()
            const re = await this.$http.request('post', '/api/app/application/create', {
            const re = await this.$http.request('post', `/api/supplier/flower/list/${this.id?'edit':'new'}`, {
               data: dto
            })
            this.$message.hideLoading()
            if (re.code == 2000 || re.code == 0) {
               this.$message.showToast('操作成功')
               //需要标记加一下
               this.$store.dispatch('sign_add', 'application');
               // this.$store.dispatch('sign_add', 'application');

               this.backpage()
            }
         },
         async submitAudit() {
            var url = ''
            if (this.audit_result) {
               url = '/api/app/application/audit/pass'
            } else {
               url = '/api/app/application/audit/reject'
            }
            var dto = {
               id: this.id,
               auditRemarks: this.audit_remarks
            }
            this.show_audit = false
            this.$message.showLoading()
            const re = await this.$http.request('post', url, {
               data: dto
            })
            this.$message.hideLoading()
            if (re.code == 2000 || re.code == 0) {
               this.$message.showToast('操作成功')
               this.$store.dispatch('sign_add', 'application');

               this.getDetail()
            }
         async deleteBanner(index) {
            await this.$message.confirm('是否确认删除此图片')
            // this.dto.bannerList  = 
            this.dto.bannerList.splice(index, 1)
         },
         uploadIcon(key) {
            console.log('that dto key', key)
            const that = this
            uni.chooseImage({
               count: 1, // 最多可以选择的图片张数，默认9
               sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
               sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
               success: function({
                  errMsg,
                  tempFiles
               }) {
                  if (errMsg === 'chooseImage:ok') {
                     // console.log(tempFiles[0])
                     that.$message.showLoading()
                     that.$http.upload(tempFiles[0].path).then(async res => {
                        var pic = res.data && res.data.length > 0 && res.data[
                              0]
                           .url || ''
                        that.$message.hideLoading()
                        that.dto[key] = pic || ''
                        that.$forceUpdate()
                     }).catch(res => {
                        that.$message.hideLoading()
            if (key == 'video') {
               uni.chooseVideo({
                  sourceType: ['camera', 'album'],
                  success: function(res) {
                     if (res.tempFilePath) {
                        console.log('res.tempFilePath', res.tempFilePath)
                        that.$message.showLoading()
                        that.$http.upload(res.tempFilePath).then(async res => {
                           console.log('res1', res)
                           var pic = res.data && res.data.length > 0 && res.data[
                                 0]
                              .url || ''
                           that.$message.hideLoading()
                           that.dto[key] = pic || ''

                     })
                           that.$forceUpdate()
                           console.log('that dto', that.dto)
                        }).catch(res => {
                           that.$message.hideLoading()
                           console.error(res)
                        })
                     }
                  }
               }
            })
               });
            } else {

               uni.chooseImage({
                  count: 1, // 最多可以选择的图片张数，默认9
                  sizeType: ['compressed'], //original 原图，compressed 压缩图，默认二者都有
                  sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
                  success: function({
                     errMsg,
                     tempFiles
                  }) {
                     if (errMsg === 'chooseImage:ok') {
                        // console.log(tempFiles[0])
                        that.$message.showLoading()
                        that.$http.upload(tempFiles[0].path).then(async res => {
                           console.log('res1', res)
                           var pic = res.data && res.data.length > 0 && res.data[
                                 0]
                              .url || ''
                           that.$message.hideLoading()
                           if (key == 'bannerList') {
                              that.dto[key].push(pic)
                           } else {
                              that.dto[key] = pic || ''
                           }

                           that.$forceUpdate()
                        }).catch(res => {
                           that.$message.hideLoading()
                           console.error(res)
                        })
                     }
                  }
               })
            }
         },

      },
@@ -351,16 +439,24 @@
         ...mapState(['currentInfo'])
      },
      components: {
         xflSelect

      }
   }
</script>

<style lang="scss" scoped>
   .banner-img {
      width: 96rpx;
      height: 96rpx;
      border-radius: 4rpx;
      border: 2rpx dashed #CECECE;
   }

   .form-item {
      // padding: 40rpx;
      border-bottom: 1px solid #F3F3F3;
      display: flex;
      padding: 20rpx;
      // height: 100px;

      .label {
@@ -380,6 +476,7 @@


      }

   }

   .form-item.bottom-border-no {