crm_extend/src/pages/indent-manage/indent/components/skuApply.vue

<template>
  <div class="compnent-appply-sku">
    <el-dialog
      v-model="show"
      class="custom-apply-sku-dialog"
      title="申请商品"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="close"
      width="700px"
    >
      <el-form
        ref="formRef"
        label-width="90px"
        :model="form"
        :rules="rules"
      >
        <el-form-item
          prop="product_name"
          label="英文品名"
        >
          <el-input v-model="form.product_name"></el-input>
        </el-form-item>
        <el-form-item
          prop="product_name_cn"
          label="中文品名"
        >
          <el-input v-model="form.product_name_cn"></el-input>
        </el-form-item>
        <el-form-item
          prop=""
          label="产品图片"
        >
          <image-upload
            v-model:list="imageList"
            width="100px"
            height="100px"
            :disable-preview="true"
          ></image-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="flex justify-center items-center">
          <el-button
            type="primary"
            size="small"
            @click="checkForm(formRef)"
          >
            确定
          </el-button>
          <el-button
            type=""
            size="small"
            @click="close"
          >
            {{ $t('btn_cancel') }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, ref, watch, inject } from 'vue'
import {
  ElButton,
  ElInput,
  ElDialog,
  ElNotification,
  ElForm,
  ElFormItem,
} from 'element-plus'
import type { FormInstance } from 'element-plus'
import { $t } from '@/i18n/index'
import imageUpload from '@/components/ImageUpload.vue'
import { applySKU } from '@/api/indent'

defineComponent({
  name: 'ComponentApplySku',
})
const show = ref(false)
const loading = ref(false)
const imageList = ref([])

const { visible = false } = defineProps<{ visible: boolean }>()
const $emit = defineEmits(['update:visible', 'apply'])

const rules = {
  product_name: [
    {
      required: true,
      message: $t('text_please_input'),
      trigger: 'change',
    },
  ],
  product_name_cn: [
    {
      required: true,
      message: $t('text_please_input'),
      trigger: 'change',
    },
  ],
}
watch(
  () => visible,
  () => {
    show.value = visible
    resetData()
  },
)
const form = ref({
  product_name: '',
  product_name_cn: '',
  images: '',
})
const formRef = ref()
const $mediaRegExp = inject('mediaRegExp') as RegExp

const checkForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid: boolean) => {
    if (!valid) return
    form.value.images = imageList.value
      .map((i: any) => {
        return i.url.replace($mediaRegExp, '/')
      })
      .join(',')

    loading.value = true
    applySKU(form.value)
      .then((response: any) => {
        if (response.code === 1) {
          ElNotification({
            title: '操作成功',
            message: 'SKU已提交申请',
            type: 'success',
            duration: 3000,
          })
          $emit('apply', { product_name: form.value.product_name })
          close()
        }
      })
      .finally(() => {
        loading.value = false
      })
  })
}
const resetData = () => {
  form.value = {
    product_name: '',
    product_name_cn: '',
    images: '',
  }
  imageList.value = []
}
const close = (done = {} as any) => {
  $emit('update:visible', false)
  if (typeof done === 'function') done()
}
</script>