购物车的商品详情

ant-design-vue-jeecg/src/views/customershoppingcart/admin/modules/ZyGoodsForm.vue

@@ -0,0 +1,269 @@
+<template>
+  <a-spin :spinning="confirmLoading">
+    <j-form-container :disabled="formDisabled">
+      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
+        <a-row>
+          <a-col :span="24">
+            <a-form-model-item label="企业" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="enterprisesId">
+              <j-select-depart1 v-model="model.enterprisesId"  @change="getlx()"/>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item label="服装类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="clothsTypeId">
+              <j-dict-select-tag type="list" v-model="model.clothsTypeId" :dictCode="lx" placeholder="请选择类型" @change="getks()"/>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item label="服装款式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="styleId">
+              <j-dict-select-tag type="list" v-model="model.styleId" :dictCode="ks" placeholder="请选择款式" @change="getxh()"/>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item label="服装型号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="modelId">
+              <j-dict-select-tag type="list" v-model="model.modelId" :dictCode="xh" placeholder="请选择型号" @change="getspbh()"/>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item label="商品编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="goodsCode">
+              <a-input v-model="model.goodsCode" placeholder="请输入商品编号"  disabled></a-input>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item label="商品名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="goodsName">
+              <a-input v-model="model.goodsName" placeholder="请输入商品名称"  ></a-input>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item label="商品描述" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="goodsIntr">
+              <a-input v-model="model.goodsIntr" placeholder="请输入商品描述"  ></a-input>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item label="是否定制" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customized">
+              <j-dict-select-tag type="radio" v-model="model.customized" dictCode="yn" placeholder="请选择是否定制" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item label="商品图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="goodsPicture">
+              <j-image-upload isMultiple  v-model="model.goodsPicture" ></j-image-upload>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item label="默认图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="defaultPicture">
+              <j-image-upload isMultiple  v-model="model.defaultPicture" ></j-image-upload>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item label="商品视频" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="goodsVideo">
+              <j-upload v-model="model.goodsVideo"   ></j-upload>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item label="单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="unit">
+              <a-input v-model="model.unit" placeholder="请输入单位"  ></a-input>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item label="包装个数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="number">
+              <a-input-number v-model="model.number" placeholder="请输入包装个数" style="width: 100%" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item label="单价(元)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="unitPrice">
+              <a-input-number v-model="model.unitPrice" placeholder="请输入单价" style="width: 100%" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item label="折扣(元)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="discount">
+              <a-input-number v-model="model.discount" placeholder="请输入折扣" style="width: 100%" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item label="促销价(元)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="promotionPrice">
+              <a-input-number v-model="model.promotionPrice" placeholder="请输入促销价" style="width: 100%" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item label="是否推荐" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="recommend">
+              <j-dict-select-tag type="radio" v-model="model.recommend" dictCode="yn" placeholder="请选择是否推荐" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item label="产地" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="placeOrigin">
+              <a-input v-model="model.placeOrigin" placeholder="请输入产地"  ></a-input>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
+              <j-dict-select-tag type="radio" v-model="model.status" dictCode="good_status" placeholder="请选择状态" />
+            </a-form-model-item>
+          </a-col>
+
+        </a-row>
+      </a-form-model>
+    </j-form-container>
+  </a-spin>
+</template>
+
+<script>
+
+  import { httpAction, getAction } from '@/api/manage'
+  import { validateDuplicateValue } from '@/utils/util'
+
+  export default {
+    name: 'ZyGoodsForm',
+    components: {
+    },
+    props: {
+      //表单禁用
+      disabled: {
+        type: Boolean,
+        default: false,
+        required: false
+      }
+    },
+    data () {
+      return {
+        lx:'zy_cloths_type ,type_name,id',
+        ks:'zy_cloths_style,style_names,id',
+        xh:'zy_style_model,model_number,id',
+        model:{
+            customized:0,
+            recommend:0,
+            status:1,
+         },
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 5 },
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 16 },
+        },
+        confirmLoading: false,
+        validatorRules: {
+          enterprisesId:[{
+            required: true, message: '请选择企业!'
+          }],
+          modelId:[{
+            required: true, message: '请选择型号!'
+          }],
+           goodsCode: [
+              { required: true, message: '请输入商品编号!'},
+           ],
+           styleId: [
+              { required: true, message: '请选择款式!'},
+           ],
+          clothsTypeId:[{
+            required: true, message: '请选择类型!'
+          }],
+           number: [
+              { required: false},
+              { pattern: /^[+]{0,1}(\d+)$/, message: '包装个数必须大于等于0!'},
+           ],
+           unitPrice: [
+              { required: false},
+              { pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/, message: '请输入正确的金额!'},
+           ],
+           discount: [
+              { required: false},
+              { pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/, message: '请输入正确的金额!'},
+           ],
+           promotionPrice: [
+              { required: false},
+              { pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/, message: '请输入正确的金额!'},
+           ],
+          goodsName: [
+            { required: true, message: '请输入商品名称!'},
+            { pattern: /^.{1,50}$/, message: '商品名称不能超过50个字符!'},
+          ],
+        },
+        url: {
+          add: "/zygoods/zyGoods/add",
+          edit: "/zygoods/zyGoods/edit",
+          queryById: "/zygoods/zyGoods/queryById",
+          zy:"/zygoods/zyGoods/getspbh",
+          zystyle:"/zygoods/zyGoods/getzystyle",
+        }
+      }
+    },
+    computed: {
+      formDisabled(){
+        return this.disabled
+      },
+    },
+    created () {
+       //备份model原始值
+      this.modelDefault = JSON.parse(JSON.stringify(this.model));
+    },
+    methods: {
+      getlx(){
+        this.lx ="zy_cloths_type ,type_name,id,enterprise_id='" + this.model.enterprisesId + "'";
+      },
+      getks(){
+        this.ks ="zy_cloths_style,style_names,id,type_id='" + this.model.clothsTypeId + "'";
+      },
+      getxh(){
+        this.xh ="zy_style_model,model_number,id,style_id='" + this.model.styleId + "'";
+        getAction(this.url.zystyle, {ksid:this.model.styleId}).then((res) => {
+          if (res.success) {
+            // this.$forceUpdate();
+            this.$set(this.model,'goodsIntr',res.result.productOverview);
+            this.$set(this.model,'goodsPicture',res.result.designSketch);
+            this.$set(this.model,'defaultPicture',res.result.designSketch);
+          } else {
+
+          }
+        });
+      },
+      getspbh(){
+        getAction(this.url.zy, {lxid:this.model.clothsTypeId,xhid:this.model.modelId}).then((res) => {
+          if (res.success) {
+            // console.log(res.result.nums)
+            // this.$forceUpdate();
+            //写一个接口返回一个拼装好的商品编号
+            this.$set(this.model,'goodsCode',res.result);
+          } else {
+
+          }
+        });
+      },
+      add () {
+        this.edit(this.modelDefault);
+      },
+      edit (record) {
+        this.model = Object.assign({}, record);
+        this.visible = true;
+      },
+      submitForm () {
+        const that = this;
+        // 触发表单验证
+        this.$refs.form.validate(valid => {
+          if (valid) {
+            that.confirmLoading = true;
+            let httpurl = '';
+            let method = '';
+            if(!this.model.id){
+              httpurl+=this.url.add;
+              method = 'post';
+            }else{
+              httpurl+=this.url.edit;
+               method = 'put';
+            }
+            httpAction(httpurl,this.model,method).then((res)=>{
+              if(res.success){
+                that.$message.success(res.message);
+                that.$emit('ok');
+              }else{
+                that.$message.warning(res.message);
+              }
+            }).finally(() => {
+              that.confirmLoading = false;
+            })
+          }
+
+        })
+      },
+    }
+  }
+</script>