laisiao/src/customized/delaibao/productManage/modules/edit.vue

<template>
  <a-button type="primary" :disabled="disabled" @click="showDrawer">
    编辑
  </a-button>
  <a-modal
    title="编辑商品档案"
    :width="820"
    v-model:open="visible"
    @cancel="onClose"
  >
    <a-form :model="form" ref="formRef" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="财务分类">
            <a-select v-model:value="form.financeclasstype" placeholder="选择财务分类">
              <a-select-option :value="item.value" v-for="item in finOptions" :key="item.index">{{item.remarks}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="领域">
            <a-select v-model:value="form.tradefields" mode="multiple" placeholder="选择域">
              <a-select-option :value="item.value" v-for="item in tradefieldOptions" :key="item.index">{{item.remarks}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="标签">
            <a-select v-model:value="form.delistingstatus" placeholder="选择标签">
              <a-select-option :value="item.value" v-for="item in delistingOptions" :key="item.index">{{item.remarks}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="商品编码" name="itemno">
            <a-input v-model:value="form.itemno" placeholder="请输入商品编号" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="品名" name="itemname">
            <a-input v-model:value="form.itemname" placeholder="请输入商品名称" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="选项方案" name="sa_customschemeid">
            <a-select v-model:value="form.sa_customschemeid" placeholder="选择选项方案" allowClear>
              <a-select-option v-for="item in schemeList"
              :key="item.sa_customschemeid" :value="item.sa_customschemeid">{{item.schemename}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="型号" name="model">
            <a-input v-model:value="form.model" placeholder="请输入商品型号" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
        <a-form-item label="规格" name="standards">
            <a-input v-model:value="form.standards" placeholder="请输入商品规格" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="尺寸" name="spec">
            <a-input v-model:value="form.spec" readonly placeholder="请输入商品尺寸" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="工艺" name="cheek">
            <a-input v-model:value="form.cheek" readonly placeholder="请输入商品工艺" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="颜色" name="color">
            <a-input v-model:value="form.color" readonly placeholder="请输入商品颜色" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="选项" name="material">
            <a-input v-model:value="form.material" readonly placeholder="请输入商品选项" />
          </a-form-item>
        </a-col>
        
      </a-row>
      <a-row :gutter="16">
        <!-- <a-col :span="6">
          <a-form-item label="配件" name="ismodule">
            <a-select v-model:value="form.ismodule" placeholder="选择是否配件">
              <a-select-option :value="1">配件</a-select-option>
              <a-select-option :value="0">非配件</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="木制品" name="iswoodproducts">
            <a-select v-model:value="form.iswoodproducts" placeholder="选择是否木制品">
              <a-select-option :value="1">木制品</a-select-option>
              <a-select-option :value="0">非木制品</a-select-option>
            </a-select>
          </a-form-item>
        </a-col> -->
        <a-col :span="6">
          <a-form-item label="物料" name="iswuliao">
            <a-select v-model:value="form.iswuliao" placeholder="选择是否物料">
              <a-select-option :value="1">物料</a-select-option>
              <a-select-option :value="0">非物料</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="批次管理" name="batchcontrol">
            <a-select v-model:value="form.batchcontrol" placeholder="选择是否批次管理">
              <a-select-option :value="1">批次管理</a-select-option>
              <a-select-option :value="0">非批次管理</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="单品管理" name="skucontrol">
            <a-select v-model:value="form.skucontrol" placeholder="选择是否单品管理">
              <a-select-option :value="1">单品管理</a-select-option>
              <a-select-option :value="0">非单品管理</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="保修期限" name="warrantyday">
            <a-input v-model:value="form.warrantyday" placeholder="请输入保修期限" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="起订量" name="orderminqty" :rules="[{ required: true,validator: checkNumber,trigger: 'change' }]">
            <a-input-number style="width:100%" :precision="2" v-model:value="form.orderminqty" placeholder="请输入起订量"/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="增量" name="orderaddqty" :rules="[{ required: true,validator: checkNumber,trigger: 'change' }]">
            <a-input-number style="width:100%" :precision="2" v-model:value="form.orderaddqty" placeholder="请输入增量"/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="包装数量" :rules="[{ required: true,validator: checkNumber ,trigger: 'change'}]" name="packageqty">
            <a-input v-model:value="form.packageqty" :precision="2" placeholder="请输入包装数量" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="单位" name="unitid">
            <a-select v-model:value="form.unitid" placeholder="选择单位">
              <a-select-option :value="item.unitid" v-for="item in unitData" :key="item.index">{{item.unitname}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <p class="title">定制信息</p>
        </a-col>
        <a-col :span="6">
          <a-form-item label="是否定制商品" name="iscustomsize" :rules="[{ required: true, message: '请选择定制信息' }]">
            <a-select v-model:value="form.iscustomsize" placeholder="选择是否定制商品">
              <a-select-option :value="1">定制商品</a-select-option>
              <a-select-option :value="0">非定制商品</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6" v-if="form.iscustomsize == 1">
          <a-form-item label="长" name="lengthschemeid" :rules="[{ required: true, message: '请选择长度定制方案' }]">
            <a-select :disabled="form.spec != '自定义' && form.spec != 'custom'" v-model:value="form.lengthschemeid" placeholder="选择长度定制方案">
              <a-select-option :value="item.sa_sizecustomizedschemeid" v-for="item in schemeWhOptions" :key="item.sa_sizecustomizedschemeid">{{item.schemename}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6" v-if="form.iscustomsize == 1">
          <a-form-item label="宽" name="widthschemeid" :rules="[{ required: true, message: '请选选择宽度定制方案' }]">
            <a-select :disabled="form.spec != '自定义' && form.spec != 'custom'" v-model:value="form.widthschemeid" placeholder="选择宽度定制方案">
              <a-select-option :value="item.sa_sizecustomizedschemeid" v-for="item in schemeWhOptions" :key="item.sa_sizecustomizedschemeid">{{item.schemename}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6" v-if="form.iscustomsize == 1">
          <a-form-item label="选项" name="materialschemeid" :rules="[{ required: true, message: '请选选择选项定制方案' }]">
            <a-select :disabled="form.material != '自定义' && form.material != 'custom'" v-model:value="form.materialschemeid" placeholder="选择选项定制方案">
              <a-select-option :value="item.sa_sizecustomizedschemeid" v-for="item in schemeWhOptions" :key="item.sa_sizecustomizedschemeid">{{item.schemename}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6" v-if="form.iscustomsize == 1">
          <a-form-item label="颜色" name="colorschemeid" :rules="[{ required: true, message: '请选选择颜色定制方案' }]">
            <a-select :disabled="form.color != '自定义' && form.color != 'custom'" v-model:value="form.colorschemeid" placeholder="选择颜色定制方案">
              <a-select-option :value="item.sa_sizecustomizedschemeid" v-for="item in schemeWhOptions" :key="item.sa_sizecustomizedschemeid">{{item.schemename}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6" v-if="form.iscustomsize == 1">
          <a-form-item label="工艺" name="cheekschemeid" :rules="[{ required: true, message: '请选选择工艺定制方案' }]">
            <a-select :disabled="form.cheek != '自定义' && form.cheek != 'custom'" v-model:value="form.cheekschemeid" placeholder="选择工艺定制方案">
              <a-select-option :value="item.sa_sizecustomizedschemeid" v-for="item in schemeWhOptions" :key="item.sa_sizecustomizedschemeid">{{item.schemename}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6" v-if="form.iscustomsize == 1">
          <a-form-item label="计价方式" name="pricingmetod">
            <a-select v-model:value="form.pricingmetod" placeholder="选择计价方式">
              <a-select-option :value="1">平方价</a-select-option>
              <a-select-option :value="2">单位价</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item label="特殊说明" name="specalnote">
            <a-textarea v-model:value="form.specalnote" placeholder="请输入特殊说明" />
          </a-form-item>
        </a-col>
      </a-row>
      
    </a-form>
    <template #footer>
      <a-space>
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">保存</a-button>
      </a-space>
    </template>
  </a-modal>
</template>
<script setup>
import { PlusOutlined } from '@ant-design/icons-vue';
import {reactive, ref,onMounted,defineProps,defineEmits} from 'vue';
import Api from '@/api/api'
import utils from '@/utils/utils'

const props = defineProps({
  data:Object,
  disabled:Boolean
})
const emit = defineEmits(['onSuccess'])
const form = ref({
  packageqty:0,
  pricingmetod:1,
});
let visible = ref(false);
const showDrawer = () => {
  financial()
  fieldData()
  delistingData()
  unitlist()
  schemeData()
  schemeWhData()
  form.value = Object.assign({},form.value,props.data)
  form.value.lengthschemeid = form.value.lengthschemeid == 0 ? null : form.value.lengthschemeid
  form.value.widthschemeid = form.value.widthschemeid == 0 ? null : form.value.widthschemeid
  visible.value = true;
};
const checkNumber = async (_rule, value) => {
  console.log(value)
  if (value === '' || value == null) {
    return Promise.reject('该输入项不能为空');
  } else if(value <=0){
    return Promise.reject('输的的值必须大于0');
  } else {
    return Promise.resolve();
  }
};
const onClose = () => {
  visible.value = false;
};

// 财务分类
const finOptions = ref([])
const financial = async () => {
  const res = await Api.optionstype('financialclassification')
  finOptions.value = res.data
};
// 查询领域
const tradefieldOptions = ref([])
const  fieldData = async ()=> {
  const res = await Api.optionstype('tradefield')
  tradefieldOptions.value = res.data
}
// 查询标签
const delistingOptions = ref([])
const delistingData = async ()=> {
  const res = await Api.optionstype('delistingstatus')
  delistingOptions.value = res.data
}
const formRef = ref()
const onSubmit = ()=>{
  formRef.value.validate().then(async () => {
      // 不选方案,方案id默认传0
      form.value.sa_customschemeid = form.value.sa_customschemeid ? form.value.sa_customschemeid:0

      const res = await Api.post({
        "id": 20220923141502,
        "content": form.value
      })
      utils.message(res,'保存成功',()=>{
        visible.value = false;
        emit('onSuccess')
      })
    }).catch(error => {
      console.log('error', error);
    });
  
}
const unitData = ref([])
const unitlist = async ()=> {
  const res = await Api.requested({
    "id": "20220922084803",
    "content": {
      "pageSize":1000,
      "where":{
        "condition":""
      }
    }
  })
  unitData.value = res.data
}
const schemeList = ref([])
const schemeData = async ()=>{
  const res = await Api.requested({
    id:20230321153903,
    content:{}
  })
  schemeList.value = res.data
  schemeList.value.push({schemename:'默认',sa_customschemeid:0})
}
const schemeWhOptions = ref([])
const schemeWhData = async ()=>{
  const res = await Api.requested({
    "content": {
    "pageNumber": 1,
    "pageSize": 500,
    "where": {
      "condition": "",
      "status": '审核'
    }
  },
  "id": 20230707091703,
  })
  schemeWhOptions.value = res.data
}

onMounted (()=>{

})
</script>
<style scoped>
.title{
  color:#999
}
</style>