front-end/hdApp/src/admin/item/add.vue

<template>
  <view class="app-content">
    <!-- 花材基本信息 -->
    <form @submit="formSubmit">
      <view class="module-com input-line-wrap">

        <tui-list-cell class="line-cell" :hover="false">
          <view class="tui-title">花材名称</view>
          <input v-model="form.name" placeholder-class="phcolor" class="tui-input" name="name" placeholder="请填写名称" @input="fillName($event)" maxlength="50" type="text" />
        </tui-list-cell>

        <tui-list-cell class="line-cell" :hover="false">
          <view class="tui-title">平台名称</view>
          <view style="color:#CCCCCC;width:450upx;height:45upx;" @click.stop="notModify">{{form.name}}</view>
        </tui-list-cell>

        <tui-list-cell class="line-cell" :hover="false">
          <view class="tui-title">拼音缩写</view>
          <input
            v-model="form.py"
            placeholder-class="phcolor"
            class="tui-input"
            name="py"
            placeholder="请填写拼音首字母缩写"
            maxlength="50"
            type="text"
          />
        </tui-list-cell>

        <tui-list-cell class="line-cell" :hover="false">
          <view class="tui-title">售价</view>
          <input
            v-model="form.price"
            placeholder-class="phcolor"
            class="tui-input"
            name="price"
            @focus="form.price=''"
            placeholder="请填写售价"
            maxlength="50"
            type="digit"
          />
        </tui-list-cell>

        <tui-list-cell class="line-cell" :hover="false">
          <view class="tui-title">今日特价</view>
          <input
            v-model="form.discountPrice"
            placeholder-class="phcolor"
            class="tui-input"
            name="discountPrice"
            @focus="form.discountPrice=''"
            placeholder="不做特价填0"
            maxlength="50"
            type="digit"
          />
        </tui-list-cell>

        <tui-list-cell class="line-cell" :hover="false">
          <view class="tui-title">库存</view>
          <input v-model="form.stock" style="width:340upx;" placeholder-class="phcolor" @focus="form.stock=''" @input="changeStock($event)" class="tui-input" name="stock" placeholder="请输入" type="digit"/>
          <button v-if="productData.id > 0" class="admin-button-com blue small" @click="goStockDetail(productData.id)">库存明细</button>
        </tui-list-cell>

        <tui-list-cell class="line-cell" :arrow="true">
          <view class="tui-title">分类</view>
          <picker
            mode="selector"
            :value="form.classId"
            :range="itemClassData"
            range-key="name"
            @change="changeItemClassFn"
            class="tui-input"
          >
            <input v-model="form.classId" name="classId" type="text" hidden />
            <view v-if="form.classId" style="height:45upx;" >{{ itemClassSelectedData.name }}</view>
            <view class="tui-placeholder" style="height:45upx;" v-else>请选择</view>
          </picker>
        </tui-list-cell>

        <tui-list-cell class="line-cell" :arrow="true">
          <view class="tui-title">大单位</view>
          <picker
            mode="selector"
            :value="form.bigUnitId"
            :range="unitData"
            range-key="name"
            @change="changeBigUnitFn"
            class="tui-input"
          >
            <input v-model="form.bigUnitId" name="bigUnitId" type="text" hidden />
            <view v-if="form.bigUnitId">{{ bigUnitSelectedData.name }}</view>
            <view class="tui-placeholder" style="height:45upx;" v-else>请选择</view>
          </picker>
        </tui-list-cell>

        <tui-list-cell class="line-cell" :arrow="true">
          <view class="tui-title">小单位</view>
          <picker
            mode="selector"
            :value="form.smallUnitId"
            :range="unitData"
            range-key="name"
            @change="changeSmallUnitFn"
            class="tui-input"
          >
            <input v-model="form.smallUnitId" name="smallUnitId" type="text" hidden />
            <view v-if="form.smallUnitId">{{ smallUnitSelectedData.name }}</view>
            <view class="tui-placeholder" v-else>请选择</view>
          </picker>
        </tui-list-cell>

        <tui-list-cell class="line-cell" :hover="false">
          <view class="tui-title">加价</view>
          <input
            v-model="form.skAddPrice"
            placeholder-class="phcolor"
            class="tui-input"
            name="skAddPrice"
            @focus="form.skAddPrice=''"
            placeholder="请填写加价"
            maxlength="50"
            type="digit"
          />
        </tui-list-cell>

        <tui-list-cell class="line-cell" :hover="false">
          <view class="tui-title">单位比</view>
          <input
            v-model="form.ratio"
            placeholder-class="phcolor"
            class="tui-input"
            name="ratio"
            placeholder="如：1扎=20支，请填写20"
            maxlength="50"
            type="number"
          />
        </tui-list-cell>

        <tui-list-cell class="line-cell" :hover="false">
          <view class="tui-title">每扎重量</view>
          <input
            v-model="form.weight"
            placeholder-class="phcolor"
            class="tui-input"
            name="weight"
            placeholder="单位：公斤"
            maxlength="50"
            type="digit"
          />
        </tui-list-cell>

        <tui-list-cell class="line-cell" :hover="false">
          <view class="tui-title">库存预警值</view>
          <input
            v-model="form.stockWarning"
            placeholder-class="phcolor"
            class="tui-input"
            name="stockWarning"
            placeholder="请填写"
            maxlength="50"
            type="number"
          />
        </tui-list-cell>

        <tui-list-cell class="line-cell" :hover="false">
          <view class="tui-title">上架状态</view>
          <view class="switch_bx">
            <switch :checked="form.status == 2 ? false : true" @change="statusChange" style="transform: scale(0.8,0.8)" />
            <text v-if="form.status == 1">上架</text>
            <text v-else>下架</text>
          </view>
        </tui-list-cell>

        <tui-list-cell class="line-cell" :hover="false">
          <view class="tui-title">状态</view>
          <view class="switch_bx">
            <switch :checked="form.delStatus == 0 ? true : false" @change="delStatusChange" style="transform: scale(0.8,0.8)" />
            <text v-if="form.delStatus == 0">启用</text>
            <text v-else>停用</text>
          </view>
        </tui-list-cell>

      </view>

      <view class="module-com input-line-wrap goods-wrap">
        <view class="module-tit">
          <span>花材图片</span>
          <span class="app-color-3">（建议比例 600X600）</span>
        </view>
        <view class="module-det">
          <htz-image-upload :max="1" :compress="true" v-model="currentImgData" :headers="headers"
           @uploadSuccess="imgUploadSuccess" @imgDelete="imgDeleteFn" :action="getLoginInfo.imgUploadApi">
          </htz-image-upload>
        </view>
      </view>

      <view class="app-footer">
        <button class="admin-button-com big default" @click="goBack()">取消</button>
        <button v-if="option.ptItemId" class="admin-button-com big blue" formType="submit" @click="status = 1">添加</button>
        <button v-else class="admin-button-com big blue" formType="submit" @click="status = 1">确认</button>
      </view>

    </form>
  </view>
</template>

<script>
import TuiListCell from "@/components/plugin/list-cell";
const form = require("@/utils/formValidation.js");
import { getAllItemClass } from "@/api/item-class";
import { getAllUnit } from "@/api/unit";
import { addProduct,updateProduct,getProductDetail,py } from "@/api/product";
import { getPtItemDetail } from "@/api/pt-item";
import { mapGetters } from "vuex"
//图片上传插件来源：https://ext.dcloud.net.cn/plugin?id=2922 已改造，不能再升级 shish 20211228
import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
export default {
  name: "item-detail",
  components: {
    TuiListCell,
    htzImageUpload
  },
  data() {
    return {
      status: 1,
      currentImgData: [],
      form: {
        id:0,
        name:"",
        py:"",
        stock:'',
        ratio:'',
        bigUnitId:1,
        smallUnitId:2,
        classId:'',
        price:'',
        skAddPrice:'',
        discountPrice:'',
        weight:1.5,
        cover:[],
        stockWarning:'',
        status:2,
        delStatus:0,
        itemId:0,
      },
      itemClassSelectedData:{},
      itemClassData:[],
      unitData:[],
      smallUnitSelectedData:{},
      bigUnitSelectedData:{},
      hasRequest:0,
      productData:{id:0},
      headers:{token:''}
    };
  },
	computed:{
		...mapGetters(["getLoginInfo","getDictionariesInfo"]),
	},
  onLoad(option) {
    if(option.id){
      this.form.id = this.option.id
    }
    const token = uni.getStorageSync('token')
    this.headers.token = token
  },
  watch:{
  },
  methods: {
    notModify(){
      this.$msg('不可修改')
    },
    goStockDetail(id){
				this.$util.pageTo({url: "/pagesStorehouse/stockWarn/detailed?id="+id})
		},
    statusChange(e){
      this.form.status = e.detail.value ? 1 : 2;
    },
    delStatusChange(e){
      this.form.delStatus = e.detail.value ? 0 : 1;
    },
    //如果库存被修改则花材状态变化
    changeStock(event){
      let num = Number(event.target.value)
      if(num > 0){
        this.form.status = 1
      }else{
        this.form.status = 2
      }
    },
    //获取拼音首字母 shish 20210707
    fillName(event){
      let val = event.target.value
      py({
        name:val
      }).then(res => {
        if(res.data.py){
          this.form.py = res.data.py
        }
      });
    },
    goBack(){
      uni.navigateBack({
						delta: 1
					});
    },
    changeBigUnitFn(e){
      this.bigUnitSelectedData = this.unitData[e.detail.value];
      this.form.bigUnitId = this.bigUnitSelectedData.id;
    },
    changeSmallUnitFn(e){
      this.smallUnitSelectedData = this.unitData[e.detail.value];
      this.form.smallUnitId = this.smallUnitSelectedData.id;
    },
    changeItemClassFn(e) {
        this.itemClassSelectedData = this.itemClassData[e.detail.value];
        this.form.classId = this.itemClassSelectedData.id;
    },
    //从平台选择花材 shish 20210826
    getPtItemInfo(ptItemId){
      getPtItemDetail({id:ptItemId}).then(res=>{

        if (this.$util.isEmpty(res.data)) {
          return;
        }
        Object.keys(this.form).forEach((i, index) => {
          this.form[i] = res.data[i];
        });

        this.currentImgData.push(res.data.cover)
        this.form.cover = [res.data.shortCover]

        this.form.stock = ''
        this.form.itemId = ptItemId
        this.form.classId = ''
        this.form.status = 1
        this.form.delStatus = 0
        this.form.id = 0
        this.form.price = ''
        this.form.skAddPrice =''
        this.form.discountPrice = ''
      })
    },
    getDetail() {
      return getProductDetail({ id: this.option.id }).then(res => {
        if (this.$util.isEmpty(res.data)) {
          return;
        }
        Object.keys(this.form).forEach((i, index) => {
          this.form[i] = res.data[i];
        });

        this.currentImgData.push(res.data.cover)
        this.form.cover = [res.data.shortCover]

        this.form.price = res.data.prePrice

        this.itemClassSelectedData = this.itemClassData.filter(
          e => this.form.classId == e.id
        )[0];
        this.smallUnitSelectedData = this.unitData.filter(
          e => this.form.smallUnitId == e.id
        )[0];
       this.bigUnitSelectedData = this.unitData.filter(
          e => this.form.bigUnitId == e.id
        )[0];
        this.productData = res.data
      });
    },
    imgUploadSuccess(res) {
      var _res = JSON.parse(res.data)
      if(_res.code == 1){
        this.currentImgData.push(_res.data.smallUrl)
        this.form.cover.push(_res.data.shortUrl)
      }
    },
    imgDeleteFn(res){
      const index = res.index
      this.form.cover.splice(index,1)
    },
    init() {
      //从平台选择花材
      if(!this.$util.isEmpty(this.option.ptItemId)){
        uni.setNavigationBarTitle({title: "确认花材信息"})
      }

      if(this.hasRequest == 1){
        return 
      }
      this._getAllUnit().then(res=>{
        this._getAllItemClass().then(res => {
          if(this.form.id == 0){
            this.smallUnitSelectedData = this.unitData.filter(e => 2 == e.id)[0];
            this.bigUnitSelectedData = this.unitData.filter(e => 1 == e.id)[0];
            //从平台选择花材
            if(!this.$util.isEmpty(this.option.ptItemId)){
              this.getPtItemInfo(this.option.ptItemId)
            }
          }else{
            this.getDetail();
          }
        });
      })
      this.hasRequest = 1
    },
    async _getAllUnit() {
      await getAllUnit().then(res => {
        if (this.$util.isEmpty(res.data)){
          return false;
        }
        this.unitData = res.data.list;
      });
    },
    async _getAllItemClass() {
      await getAllItemClass().then(res => {
        if (this.$util.isEmpty(res.data)){
          return false;
        }
        this.itemClassData = res.data;
      });
    },
    // 确认
    confirmFn() {
      if (this.$util.isEmpty(this.form.cover)) {
        this.$msg("请上传图片")
        return false
      }
      let requestHost = addProduct
      if(this.form.id && this.form.id != 0){
        requestHost = updateProduct;
      }else{
				if(/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(this.form.stock) == false){
					uni.showToast({title:"请填写库存，没有请填0",icon:"none"})
					return;
				}
				if(/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(this.form.discountPrice) == false){
					uni.showToast({title:"请填写特价，没有特价请填0",icon:"none"})
					return;
				}
				if(/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(this.form.price) == false){
					uni.showToast({title:"请填写售价",icon:"none"})
					return;
				}
				if(/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(this.form.skAddPrice) == false){
					uni.showToast({title:"请填写加价",icon:"none"})
					return;
				}
      }
      let form = JSON.parse(JSON.stringify(this.form))
      uni.showLoading({mask:true})
      requestHost({...form,cover:this.form.cover[0]}).then(res => {
        uni.hideLoading()
        if(res.code == 1){
          this.$msg("操作成功！")

          //返回上一页带参数
          let pages = getCurrentPages();
          let prevPage = pages[ pages.length - 2 ];
          let hidden = 0
          if(this.form.stock > this.form.stockWarning){
            hidden = 1
          }
          prevPage.$vm.modifyStock = {id:this.form.id,stock:this.form.stock,hidden:hidden};

          uni.navigateBack({})
        }
      })
    },
    formSubmit(e) {
      let rules = [
        {
          name: "name",
          rule: ["required"],
          msg: ["请填写名称"]
        },
        {
          name: "py",
          rule: ["required"],
          msg: ["请填写拼音缩写"]
        },{
          name: "stock",
          rule: ["required"],
          msg: ["请填写库存，没有填0"]
        },
        {
          name: "bigUnitId",
          rule: ["required"],
          msg: ["请选择大单位"]
        },
        {
          name: "smallUnitId",
          rule: ["required"],
          msg: ["请选择小单位"]
        },
        {
          name: "ratio",
          rule: ["required"],
          msg: ["请填写单位比"]
        },
        {
          name: "price",
          rule: ["required"],
          msg: ["请填写售价"]
        },
        {
          name: "skAddPrice",
          rule: ["required"],
          msg: ["请填写加价"]
        },
        {
          name: "discountPrice",
          rule: ["required"],
          msg: ["不做特价请填0"]
        },
        {
          name: "weight",
          rule: ["required"],
          msg: ["请填写重量"]
        },
        {
          name: "classId",
          rule: ["required"],
          msg: ["请选择分类"]
        },
        {
          name: "stockWarning",
          rule: ["required"],
          msg: ["请填写库存预警值"]
        }
      ];
      let formData = e.detail.value
      let checkRes = form.validation(formData, rules)
      if (!checkRes) {
          this.confirmFn()
      } else {
        this.$msg(checkRes)
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.app-content {
  min-height: calc(100vh - 100upx);
  padding-bottom: 150upx;
}
.module-com {
  margin-bottom: 20upx;
  background-color: #fff;
  color: $fontColor2;
  .module-tit {
    padding: 20upx 30upx;
    font-size: 28upx;
  }
  .module-det {
    padding: 0 30upx;
  }
}
.category-wrap {
  align-items: flex-start;
  padding-bottom: 0 !important;
  .tui-input {
    @include disFlex(center, flex-start);
    flex-wrap: wrap;
    .admin-button-com {
      margin-right: 20upx;
      margin-bottom: 20upx;
      position: relative;
      z-index: 9999;
    }
  }
}
.summary-wrap {
  .goods-summary {
    height: 400upx;
  }
}
.app-footer {
  justify-content: space-evenly;
  z-index: 9999;
  .admin-button-com {
    width: 46%;
  }
}
</style>