front-end/hdApp/src/admin/work/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" @focus="form.name=''" placeholder="请填写名称" maxlength="50" type="text" />
          <button class="admin-button-com big blue" style="width:190upx;" @click="selectMake()">选作品</button>
        </tui-list-cell>

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

        <tui-list-cell class="line-cell" :arrow="true">
          <view class="tui-title">分类</view>
          <picker mode="selector" :value="form.catId" :range="plantClassData" range-key="categoryName" @change="changePlantClassFn" class="tui-input" >
            <input v-model="form.catId" name="catId" type="text" hidden />
            <view v-if="form.catId" style="height:45upx;" >{{ categorySelectedData.categoryName }}</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>
          <input v-model="form.flowerNum" placeholder-class="phcolor" class="tui-input" name="flowerNum" @focus="form.flowerNum=''" placeholder="请填写用花支数" maxlength="50" type="number" />
        </tui-list-cell>

      </view>

      <view class="module-com input-line-wrap goods-wrap">
        <view class="module-tit">
          <span>图片</span>
          <span class="app-color-3">（建议比例 1:1）</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="module-com input-line-wrap">
        <tui-list-cell class="line-cell" :hover="false" :arrow="false">
        <view class="tui-title">备注</view>
        <textarea style="height: 100upx" v-model="form.remark" placeholder="这里写备注..." />
        </tui-list-cell>
      </view>

      <view class="app-footer">
        <button class="admin-button-com big default" @click="goBack()">取消</button>
        <button class="admin-button-com big blue" formType="submit">确认</button>
      </view>

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

<script>
import TuiListCell from "@/components/plugin/list-cell";
const form = require("@/utils/formValidation.js");
import { getClass } from "@/api/category";
import { addWork } from "@/api/work/index";
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: "add",
  components: {
    TuiListCell,
    htzImageUpload
  },
  data() {
    return {
      currentImgData: [],
      form: {
        name:"花束",
        catId:'',
        cover:[],
        num:'',
        remark:'',
        flowerNum:''
      },
      flowerNumList:[{num:6,name:6},{num:9,name:9},{num:11,name:11},{num:19,name:19},{num:33,name:33},{num:52,name:52},{num:66,name:66},{num:99,name:99}],
      categorySelectedData:{},
      plantClassData:[],
      headers:{token:''},
      flowerIndex:0,
      flowerNumName:''
    };
  },
	computed:{
		...mapGetters(["getLoginInfo","getDictionariesInfo"]),
	},
  onLoad() {
    const token = uni.getStorageSync('token')
    this.headers.token = token
  },
  watch:{
  },
  methods: {
    selectMake(){
      this.$util.pageTo({ url: "/admin/goods/flower", type: 2 })
    },
    flowerNumChange(e){
      let index = e.detail.value
      this.form.flowerNum = this.flowerNumList[index].num
      this.flowerNumName = this.flowerNumList[index].name
    },
    statusChange(e){
      this.form.status = e.detail.value ? 1 : 2;
    },
    delStatusChange(e){
      this.form.delStatus = e.detail.value ? 0 : 1;
    },
    goBack(){
      uni.navigateBack({delta:1})
    },
    changePlantClassFn(e) {
        this.categorySelectedData = this.plantClassData[e.detail.value];
        this.form.catId = this.categorySelectedData.id;
    },
    imgUploadSuccess(res) {
      var imgReturn = JSON.parse(res.data)
      if(imgReturn.code == 1){
        this.currentImgData.push(imgReturn.data.smallUrl)
        this.form.cover.push(imgReturn.data.shortUrl)
      }
    },
    imgDeleteFn(res){
      const index = res.index
      this.form.cover.splice(index,1)
    },
    init() {
      this.getPlantCategory()
    },
    async getPlantCategory() {
      await getClass({flower:1}).then(res => {
        if (this.$util.isEmpty(res.data)){
          return false;
        }
        this.plantClassData = res.data;
        if(this.plantClassData && this.plantClassData[0] && this.plantClassData[0].id){
          this.form.catId = this.plantClassData[0].id||''
          let categoryName = this.plantClassData[0].categoryName||''
          this.categorySelectedData = {categoryName}
        }
      });
    },
    confirmFn() {
      if (this.$util.isEmpty(this.form.cover)) {
        this.$msg("请上传图片")
        return false
      }
      if(Array.isArray(this.form.cover)){
        this.form.cover = this.form.cover[0]
      }
      let form = JSON.parse(JSON.stringify(this.form))
      addWork({...form}).then(res => {
        if(res.code == 1){
          this.pageTo({url: '/admin/work/addResult',type:2})
        }
      })
    },
    formSubmit(e) {
      let rules = [
        {
          name: "name",
          rule: ["required"],
          msg: ["请填写名称"]
        },
        {
          name: "catId",
          rule: ["required"],
          msg: ["请选择分类"]
        },
        {
          name: "num",
          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>