global-web/src/views/BasicData/components/productArchiveModel.vue

<template>
    <a-modal
      :title="title"
      width="80%"
      :visible="visible"
      :maskClosable="false"
      switchFullscreen
      @ok = "handleOk"
      @cancel="handleCancel">
        <a-spin :spinning="loading">
         <!-- 主表单区域 -->
         <a-form ref="formRef" :model="model" :rules="validatorRules">
           <a-row :gutter="24">
             <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
               <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="classId" label="分类(class)">
                <ApiSelect
                                    :api="classOption"
                                    :showSearch="true"
                                    v-model:value="model.classId"
                                    :filterOption="true"
                                    resultField="records"
                                    labelField="name"
                                    valueField="id"
                                    optionFilterProp='label'
                                />
               </a-form-item>
             </a-col>
             <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
               <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="code" label="编码(code)">
                    <a-input placeholder="自动生成" v-model:value="model.code" AutoComplete='off' disabled/>
               </a-form-item>
             </a-col>
             <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
               <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="chineseName" label="中文名(Chinese name)">
                  <a-input  placeholder="请输入" v-model:value="model.chineseName" AutoComplete='off' @blur="handleBlur(model.chineseName,'chineseName')"/>
               </a-form-item>
             </a-col>
             <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
               <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="englishName" label="英文名(English name)">
                  <a-input  placeholder="请输入" v-model:value="model.englishName" AutoComplete='off' @blur="handleBlur(model.englishName,'englishName')"/>
               </a-form-item>
             </a-col>
             <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
               <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="chineseAlias" label="中文别名(Chinese allas)">
                  <a-input  placeholder="请输入" v-model:value="model.chineseAlias" AutoComplete='off' @blur="handleBlur(model.chineseAlias,'chineseAlias')"/>
               </a-form-item>
             </a-col>
             <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
               <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="englishAlias" label="英文别名(englidsh allas)">
                  <a-input  placeholder="请输入" v-model:value="model.englishAlias" AutoComplete='off' @blur="handleBlur(model.englishAlias,'englishAlias')"/>
               </a-form-item>
             </a-col>
             <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
               <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="model" label="型号(model)">
                <JDictSelectTag v-model:value="model.model" placeholder="请选择" dictCode="model_typer" showSearch/>
               </a-form-item>
             </a-col>
             <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
               <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="partno" label="备件号(partno)">
                  <a-input  placeholder="请输入" v-model:value="model.partno" AutoComplete='off'/>
               </a-form-item>
             </a-col>
             <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
               <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="orderno" label="订货号(orderno)">
                  <a-input  placeholder="请输入" v-model:value="model.orderno" AutoComplete='off'/>
               </a-form-item>
             </a-col>
             <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
               <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="drawingno" label="图号(drawingno)">
                  <a-input  placeholder="请输入" v-model:value="model.drawingno" AutoComplete='off'/>
               </a-form-item>
             </a-col>
             <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
               <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="taxRate" label="税率(tax rate)">
                  <a-input  placeholder="请输入" v-model:value="model.taxRate" AutoComplete='off' addon-after="%"/>
               </a-form-item>
             </a-col>
             <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
               <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="measurementUnit" label="计量单位(measurement unit)">
                <JDictSelectTag v-model:value="model.measurementUnit" placeholder="请选择" dictCode="measurement_unit"/>
               </a-form-item>
             </a-col>
             <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
               <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="harmfulSubstances" label="有害物质(harmful substances)">
                <JDictSelectTag v-model:value="model.harmfulSubstances" placeholder="请选择" dictCode="yes_or_no" stringToNumber/>
               </a-form-item>
             </a-col>
             <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
               <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="virtualProduct" label="虚拟产品(virtual product)">
                <JDictSelectTag v-model:value="model.virtualProduct" placeholder="请选择" dictCode="yes_or_no" stringToNumber/>
               </a-form-item>
             </a-col>
             <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
               <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="commissionRebate" label="返佣(commission rebate)">
                <JDictSelectTag v-model:value="model.commissionRebate" placeholder="请选择" dictCode="yes_or_no" stringToNumber/>
               </a-form-item>
             </a-col>
             <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
               <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="notes" label="备注(notes)">
                  <a-input  placeholder="请输入" v-model:value="model.notes" AutoComplete='off'/>
               </a-form-item>
             </a-col>
             <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
               <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status" label="状态(status)">
                  <JDictSelectTag v-model:value="model.status" placeholder="请选择" dictCode="valid_status" stringToNumber/>
               </a-form-item>
             </a-col>
           </a-row>
         </a-form>
        </a-spin>
    </a-modal>
</template>
<script lang="ts" setup>
  import { defHttp } from '/@/utils/http/axios';
  import { message } from 'ant-design-vue';
  import { JDictSelectTag,JSearchSelect,ApiSelect} from '/@/components/Form';
  import JSelectInput from '/@/components/Form/src/jeecg/components/JSelectInput.vue';
  import { ref, reactive, toRaw, toRefs, watch, nextTick, onMounted, getCurrentInstance } from 'vue';
  const emit = defineEmits([ 'success']); //定义emit
  const formRef = ref()
  var visible = ref(false)
  let title = ref('')
  let loading = ref(false)
  let model = ref({
    classId:'',
    code:'',
    chineseName:'',
    englishName:'',
    chineseAlias:'',
    englishAlias:'',
    model:'',
    partno:'',
    orderno:'',
    drawingno:'',
    taxRate:'0',
    harmfulSubstances:0,
    virtualProduct:0,
    commissionRebate:1,
    notes:'',
    status:1,
    measurementUnit:'PCE',
    id:''
  })
  let enforcemmentBasis = ref('')
  const validatorRules = {
    // code: [{ required: true, message: '编码(code)不能为空', trigger: 'blur' }],
    englishName: [{ required: true, message: '英文名(english name)不能为空', trigger: 'blur' }],
  };
  const labelCol = ref({
    xs: { span: 24 },
    sm: { span: 9 },
    });
  const wrapperCol = ref({
    xs: { span: 24 },
    sm: { span: 15 },
  });
  function handleOk() {
    formRef.value
          .validate()
          .then(async () => {
              let url = ''
              if(enforcemmentBasis.value=='add'){
                  url = '/baseCode/baseProductArchive/add'
              }else{
                  url = '/baseCode/baseProductArchive/edit'
              }
              let params = model.value
              defHttp.post({url,params}, { isTransformResponse: false })
                  .then((res) => {
                      if (res.success) {
                        message.success(res.message);
                      } else {
                        message.error(res.message);
                      }
                  })
                  .finally(() => {
                      handleCancel()
                  });
                })
          .catch(error => {
            console.log('error', error);
          });
    
  }
  function handleCancel() {
    model.value ={
      classId:'',
      code:'',
      chineseName:'',
      englishName:'',
      chineseAlias:'',
      englishAlias:'',
      model:'',
      partno:'',
      orderno:'',
      drawingno:'',
      taxRate:'0',
      harmfulSubstances:0,
      virtualProduct:0,
      commissionRebate:1,
      notes:'',
      status:1,
      measurementUnit:'PCE',
      id:''
    }
    visible.value = false
    emit('success');
  }
  function getForm(data,record){
    enforcemmentBasis.value = data
    visible.value = true
    if(data=='add'){
        title.value = '新增档案(add)'
    }else{
        title.value = '编辑档案(edit)'
        model.value = record
    }
  }
  function classOption(){
      var params = {pageSize:-1}
      return defHttp.get({ url: 'baseCode/baseProductClass/list',params})
  }
  function handleBlur(value,data){
    if(value!==''){
      var newString = ''
      for (let i = 0; i < value.length; i++) {
          if( (/^[A-Za-z]$/.test(value[i]))&&(/^[a-z]$/.test(value[i]))){
            newString=newString+value[i].toUpperCase()
          }else{
            newString =newString+value[i]
          }
      }
        model.value[data] = newString
    }
  }
  defineExpose({
    getForm
  });
</script>
<style lang="less" scoped>
/deep/ .ant-spin-container{
    width: 97%;
    margin-top: 1%;
}
/deep/.ant-form-item {
    margin-bottom: 8px !important;
  }

</style>