jdt-mer/src/views/goods/add/index.vue

<template>
  <CommonPage show-footer :title="$route.title">
    <!-- {{ model }} -->
    <n-spin size="large" :show="isShowSpin">
      <n-form ref="formRef" label-width="100" :model="model" :rules="rules" label-placement="left">
        <n-grid :cols="2" :x-gap="24">
          <n-form-item-gi :span="12" label="商品分类:" path="goods_class_id">
            <n-select
              v-model:value="model.goods_class_id"
              label-field="name"
              value-field="ID"
              :options="classList"
              placeholder="选择商品分类"
            />
          </n-form-item-gi>
          <n-form-item-gi :span="12" label="商品名称:" path="name">
            <n-input v-model:value="model.name" placeholder="输入商品名称" />
          </n-form-item-gi>
          <n-form-item-gi :span="12" label="商品封面:" path="cover">
            <Upload v-model:list="model.cover" />
          </n-form-item-gi>
          <n-form-item-gi :span="12" label="商品轮播图:" path="rotation">
            <Upload v-model:list="model.rotation" :max="5" multiple />
          </n-form-item-gi>
          <!--          <n-form-item-gi :span="12" label="支付方式:" path="pay_type">-->
          <!--            <n-select-->
          <!--              v-model:value="model.pay_type"-->
          <!--              multiple-->
          <!--              :options="[-->
          <!--                { label: '微信支付', value: 1 },-->
          <!--                { label: '积分支付', value: 2 },-->
          <!--              ]"-->
          <!--            />-->
          <!--          </n-form-item-gi>-->
          <n-form-item-gi :span="12" label="商品价格:" path="number">
            <n-input-number v-model:value="model.number" :min="0" placeholder="输入现金价格" />
          </n-form-item-gi>
          <!--          <n-form-item-gi :span="12" label="积分价格:" path="exchange">-->
          <!--            <n-input-number v-model:value="model.exchange" :min="0" placeholder="输入积分价格" />-->
          <!--          </n-form-item-gi>-->
          <n-form-item-gi :span="12" label="商品库存:" path="stock">
            <n-input-number v-model:value="model.stock" :min="0" placeholder="输入商品库存" />
          </n-form-item-gi>
          <n-form-item-gi :span="12" label="商品简介:" path="profile">
            <n-input v-model:value="model.profile" type="textarea" placeholder="输入商品简介" />
          </n-form-item-gi>
          <n-form-item-gi :span="12" label="上架状态:" path="state">
            <n-switch v-model:value="model.state" :checked-value="1" :unchecked-value="2" />
          </n-form-item-gi>
          <n-form-item-gi :span="12" label="商品详情:" path="details">
            <Editor v-model:valueHtml="model.details" />
          </n-form-item-gi>
          <n-form-item-gi :span="12">
            <n-button class="m-auto" type="primary" @click="submit">提交</n-button>
          </n-form-item-gi>
        </n-grid>
      </n-form>
    </n-spin>
  </CommonPage>
</template>

<script setup>
import Upload from '@/components/Upload.vue'
import Editor from '@/components/Editor.vue'
import api from './api'
import { useGoodsStore } from '@/store/modules/goods'
import { useRouter } from 'vue-router'

const formRef = ref(null)

const model = ref({
  name: '',
  goods_class_id: null,
  cover: [],
  rotation: [],
  profile: '',
  details: '',
  pay_type: [],
  stock: null,
  number: null,
  market_num: null,
  state: 2,
})

const rules = {
  name: {
    required: true,
    message: '请输入商品名称',
    trigger: 'blur',
  },
  goods_class_id: {
    required: true,
    type: 'number',
    message: '请选择商品分类',
    trigger: 'change',
  },
  cover: {
    required: true,
    type: 'array',
    message: '请上传商品封面',
    trigger: 'change',
  },
  rotation: {
    required: true,
    type: 'array',
    message: '请上传商品轮播图',
    trigger: 'change',
  },
  pay_type: {
    required: true,
    type: 'array',
    message: '请选择支付方式',
    trigger: 'change',
  },
  number: {
    required: true,
    type: 'number',
    message: '请输入商品价格',
    trigger: 'blur',
  },
  // exchange: {
  //   required: true,
  //   type: 'number',
  //   message: '请输入市场价格',
  //   trigger: 'blur',
  // },
  stock: {
    required: true,
    type: 'number',
    message: '请输入商品库存',
    trigger: 'blur',
  },
}
const { row, setRow, goodType } = useGoodsStore()

const type = ref('')

const isShowSpin = ref(false)

onMounted(() => {
  type.value = goodType
  getClassList()
})

const classList = ref([])

const getClassList = async () => {
  isShowSpin.value = true
  const res = await api.getGoodClass()
  classList.value = res.data.data.filter((item) => item.status !== 2)

  if (row && type.value === 'edit') {
    // console.log(row)
    type.value = 'edit'
    model.value = {
      ...row,
      cover: [{ url: row.cover, status: 'finished', id: 1 }],
      rotation: row.rotation?.split(',').map((item, index) => ({
        url: item,
        status: 'finished',
        id: index + 1,
      })),
    }
  }
  isShowSpin.value = false
}

const route = useRouter()

const submit = () => {
  formRef.value.validate(async (errors) => {
    if (errors) return
    try {
      const data = {
        ...model.value,
        cover: model.value.cover.map((item) => item.url)[0],
        rotation: model.value.rotation.map((item) => item.url).join(','),
        status: 3,
      }
      const res = await api.addGoods(data)
      console.log(res)
      //   $message.success(res.data.msg)
      route.back()
      setRow({})
    } catch (error) {
      $message.error(error.msg)
    }
  })
}
</script>

<style lang="scss" scoped></style>